/* Unsiyet - PDF okuyucu | Beyribey Bilisim */
:root{
  --parsomen:#F6F0E2; --parsomen-2:#FFFCF3;
  --zumrut:#1F5B47; --zumrut-2:#2E7C62; --yesil-sis:#D9E7DC;
  --ceviz:#6D4A2B; --ceviz-2:#9C7549; --altin:#C09A45; --altin-2:#E7D3A0;
  --lal:#8E3B4E; --murekkep:#2C251C; --murekkep-2:#6B6152;
  --disp:"Bodoni Moda", Didot, Georgia, serif;
  --metin:"Spectral", Georgia, serif;
  --util:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --arab:"Amiri", serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--parsomen); color:var(--murekkep); font-family:var(--metin);
  -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2.5px solid var(--zumrut-2); outline-offset:2px}
.util{font-family:var(--util); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600}
h1,h2,h3,h4{font-family:var(--disp); font-weight:600; margin:0}

/* ---- üst ---- */
.serit{background:var(--zumrut); color:var(--altin-2); position:relative; overflow:hidden}
.serit .desen{position:absolute; inset:0; opacity:.16}
.serit .ic{position:relative; width:min(1440px,100% - 36px); margin-inline:auto; display:flex;
  align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:8px 0}
.serit .besmele{font-family:var(--arab); font-size:16px; direction:rtl; color:#F0E3BD}

.okuyucu-bas{background:var(--parsomen-2); border-bottom:1px solid var(--ceviz); position:relative}
.okuyucu-bas::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:var(--altin); opacity:.55}
.okuyucu-bas .ic{width:min(1440px,100% - 36px); margin-inline:auto; display:flex; align-items:center;
  gap:20px; padding:14px 0 16px; flex-wrap:wrap}
.geri-baglanti{display:inline-flex; align-items:center; gap:8px; color:var(--ceviz); font-family:var(--util);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.geri-baglanti:hover{color:var(--zumrut)}
.marka{display:flex; align-items:baseline; gap:12px; margin-inline:auto}
.marka .ad{font-family:var(--disp); font-size:34px; color:var(--zumrut); line-height:1}
.marka .ad span{color:var(--altin)}
.marka .kunye{font-family:var(--util); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ceviz-2)}
.bas-sag{display:flex; gap:10px; align-items:center}

.dg{font-family:var(--util); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--ceviz); color:var(--ceviz); background:transparent;
  border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.2s; white-space:nowrap}
.dg:hover{background:var(--ceviz); color:var(--parsomen-2)}
.dg.yesil{background:var(--zumrut); border-color:var(--zumrut); color:#FDF8EA}
.dg.yesil:hover{background:var(--zumrut-2); border-color:var(--zumrut-2)}
.dg.altin{background:var(--altin); border-color:var(--altin); color:#40320F}
.dg.altin:hover{background:var(--altin-2); border-color:var(--altin-2)}
.dg.kucuk{padding:8px 14px; font-size:10px}

/* ---- araç çubuğu ---- */
.arac{background:var(--yesil-sis); border-bottom:1px solid rgba(109,74,43,.3); position:sticky; top:0; z-index:30}
.arac .ic{width:min(1440px,100% - 36px); margin-inline:auto; display:flex; align-items:center; gap:12px;
  padding:10px 0; flex-wrap:wrap}
.grup{display:flex; align-items:center; gap:8px; background:var(--parsomen-2); border:1px solid rgba(109,74,43,.35);
  border-radius:999px; padding:5px 8px}
.ikon{width:34px; height:34px; border-radius:50%; border:1px solid transparent; background:transparent;
  color:var(--ceviz); cursor:pointer; font-size:15px; display:grid; place-items:center; transition:.18s}
.ikon:hover{background:var(--zumrut); color:var(--altin-2)}
.ikon.aktif{background:var(--zumrut); color:var(--altin-2)}
.ikon:disabled{opacity:.35; cursor:not-allowed}
.sayfa-giris{width:52px; text-align:center; border:1px solid rgba(109,74,43,.35); border-radius:6px;
  padding:6px 4px; font-family:var(--util); font-size:13px; background:var(--parsomen); color:var(--murekkep)}
.arac .toplam{font-family:var(--util); font-size:12px; color:var(--murekkep-2)}
.arac .oran{font-family:var(--util); font-size:12px; min-width:46px; text-align:center; color:var(--ceviz)}
.arac .baslik{margin-inline:auto; font-family:var(--disp); font-size:19px; color:var(--zumrut); font-style:italic}

/* ---- gövde ---- */
.govde{display:grid; grid-template-columns:268px minmax(0,1fr); min-height:70vh}
/* Perde her zaman akış dışında durur; yoksa ızgaranın ilk hücresini kapıp
   kenar çubuğunu ikinci sütuna, sayfaları alt satıra itiyor. */
.perde{position:fixed; inset:0; background:rgba(18,58,45,.5); z-index:75; opacity:0;
  pointer-events:none; transition:opacity .3s}
.perde.acik{opacity:1; pointer-events:auto}
.kenar{background:var(--parsomen-2); border-right:1px solid rgba(109,74,43,.3); padding:0 0 30px;
  max-height:calc(100vh - 60px); overflow:auto; position:sticky; top:57px}
/* Kenar kapanınca sütun da sıfırlanır; yoksa sahne 268px'lik dar sütuna düşer. */
.govde.kenarsiz{grid-template-columns:0 minmax(0,1fr)}
.kenar.kapali{visibility:hidden; overflow:hidden; border-right:0; padding:0}
.sekmeler{display:flex; border-bottom:1px solid rgba(109,74,43,.25); position:sticky; top:0; background:var(--parsomen-2); z-index:2}
.sekme{flex:1; padding:13px 6px; background:transparent; border:0; cursor:pointer; font-family:var(--util);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ceviz-2); border-bottom:2px solid transparent}
.sekme.aktif{color:var(--zumrut); border-bottom-color:var(--altin)}
.panel{padding:16px 16px 0}
.panel[hidden]{display:none}

.kucukler{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kucuk{position:relative; border:1px solid var(--ceviz-2); background:var(--parsomen); cursor:pointer; padding:0;
  aspect-ratio:3/4.1; overflow:hidden; transition:.18s}
.kucuk:hover{border-color:var(--altin)}
.kucuk.aktif{border-color:var(--zumrut); box-shadow:0 0 0 2px var(--altin-2)}
.kucuk canvas,.kucuk svg{width:100%; height:100%; display:block}
.kucuk .no{position:absolute; bottom:0; left:0; right:0; background:rgba(31,91,71,.88); color:var(--altin-2);
  font-family:var(--util); font-size:10px; letter-spacing:.1em; padding:3px; text-align:center}

.icindekiler{list-style:none; margin:0; padding:0}
.icindekiler li{border-bottom:1px dotted rgba(109,74,43,.35)}
.icindekiler button{width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:12px 8px; display:flex; gap:12px; align-items:baseline; font-family:var(--metin); color:var(--murekkep)}
.icindekiler button:hover{background:var(--yesil-sis)}
.icindekiler .sf{font-family:var(--util); font-size:11px; color:var(--altin); min-width:26px}
.icindekiler .bs{font-family:var(--disp); font-size:16.5px; line-height:1.2; font-weight:600}
.icindekiler .yzr{font-size:13px; color:var(--murekkep-2)}
.icindekiler li.aktif{background:var(--yesil-sis)}

/* ---- sahne ---- */
.sahne{background:linear-gradient(180deg,#EFE7D4,#E6DCC5); padding:30px 20px 46px; display:flex;
  flex-direction:column; align-items:center; gap:18px; position:relative}
.sahne .desen{position:absolute; inset:0; opacity:.07; pointer-events:none}
.acilim{position:relative; display:flex; gap:0; align-items:stretch; justify-content:center; max-width:100%;
  filter:drop-shadow(0 26px 40px rgba(44,37,28,.35))}
/* Kutunun ölçüsü çizimden önce JS ile veriliyor; böylece sayfa yüklenirken
   kap büzülüp genişlemiyor, ekran zıplamıyor. */
.varak{position:relative; background:var(--parsomen-2); border:1px solid var(--ceviz);
  border-radius:8px; overflow:hidden; flex:0 0 auto}
.varak + .varak{border-left:0}
.varak canvas{display:block; width:100%; height:100%}
.varak .iskelet{position:absolute; inset:0; display:grid; place-items:center; background:var(--parsomen-2);
  color:var(--ceviz-2); font-style:italic; font-size:14px; letter-spacing:.02em}
.varak .ornek{width:100%; height:100%; aspect-ratio:auto}
.acilim{min-height:120px}
/* PDF açılamazsa: sahte sayfa yerine dürüst bilgi */
.acilmadi{width:min(560px,100%); background:var(--parsomen-2); border:1px solid var(--ceviz);
  border-radius:10px; padding:38px 34px; text-align:center}
.acilmadi h2{font-size:26px; color:var(--zumrut); margin-bottom:12px}
.acilmadi p{color:var(--murekkep-2); font-size:15px; margin:0 0 20px}
.acilmadi .dugmeler{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.acilmadi .sebep{margin:20px 0 0; font-size:12px; color:var(--ceviz-2); font-family:var(--util);
  border-top:1px dotted rgba(109,74,43,.4); padding-top:12px}
.acilim.mesgul .iskelet::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--altin),transparent); animation:yukleniyor 1.1s linear infinite}
@keyframes yukleniyor{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.varak .kose{position:absolute; width:30px; height:30px; color:var(--altin); pointer-events:none; z-index:3}
.varak .kose.su{top:3px;left:3px} .varak .kose.sag{top:3px;right:3px;transform:scaleX(-1)}
.varak .kose.al{bottom:3px;left:3px;transform:scaleY(-1)} .varak .kose.as{bottom:3px;right:3px;transform:scale(-1)}
.yukleniyor{padding:80px 20px; text-align:center; color:var(--ceviz-2); font-style:italic}
.uyari-serit{width:min(900px,100%); background:#FFF6E2; border:1px solid var(--altin); border-radius:4px;
  padding:12px 18px; font-size:14.5px; color:var(--ceviz); display:flex; gap:12px; align-items:center}
.uyari-serit b{color:var(--zumrut)}

/* ---- sahne içi gezinme okları ---- */
.yon{position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,252,243,.86); border:1px solid var(--altin); color:var(--zumrut);
  font-size:22px; line-height:1; cursor:pointer; backdrop-filter:blur(3px);
  box-shadow:0 4px 14px rgba(44,37,28,.22); transition:.18s; padding:0 0 3px}
.yon:hover{background:var(--zumrut); border-color:var(--zumrut); color:var(--altin-2)}
.yon:disabled{opacity:0; pointer-events:none}
.yon.sol{left:14px} .yon.sag{right:14px}

/* ---- tam ekran ---- */
.tam-arac{display:none}
.sahne:fullscreen{overflow:auto; padding:64px 14px 24px; justify-content:flex-start;
  background:linear-gradient(180deg,#1B2C25,#0E1815); gap:0}
.sahne:fullscreen{align-items:center; align-items:safe center}
.sahne:fullscreen .desen{opacity:.05; position:fixed}
/* yakınlaşınca sayfa ekranı aşabilsin, kırpılmadan kaydırılabilsin */
.sahne:fullscreen .acilim{max-width:none; margin:auto; filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.sahne:fullscreen .varak .iskelet{background:#1E2F28; color:rgba(231,211,160,.7)}
.sahne:fullscreen .uyari-serit{margin-bottom:14px}
.sahne:fullscreen .yon{position:fixed; background:rgba(20,32,27,.72); border-color:rgba(231,211,160,.55);
  color:var(--altin-2); width:48px; height:48px}
.sahne:fullscreen .yon:hover{background:var(--altin); border-color:var(--altin); color:#26372F}
.sahne:fullscreen .tam-arac{display:flex; position:fixed; top:12px; left:50%; transform:translateX(-50%);
  z-index:8; align-items:center; gap:6px; padding:5px 8px; border-radius:999px;
  background:rgba(20,32,27,.86); border:1px solid rgba(231,211,160,.4); backdrop-filter:blur(6px)}
.tam-arac .ikon{color:var(--altin-2); width:32px; height:32px; font-size:14px}
.tam-arac .ikon:hover{background:var(--altin); color:#26372F}
.tam-arac .ikon.cikis{color:#F3D3D3}
.tam-arac .sayac{font-family:var(--util); font-size:12px; color:var(--altin-2); padding:0 8px; white-space:nowrap}
.tam-arac .ayrac{width:1px; height:20px; background:rgba(231,211,160,.3)}

/* örnek (tıpkı) sayfa */
.ornek{width:min(600px,100%); max-width:100%; aspect-ratio:1/1.414; background:var(--parsomen-2); padding:44px 40px;
  display:flex; flex-direction:column; overflow:hidden}
.ornek .ust{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--ceviz); padding-bottom:8px}
.ornek .ust .lg{font-family:var(--disp); font-size:26px; color:var(--zumrut)}
.ornek .ust .no{font-family:var(--disp); font-size:22px; color:var(--ceviz)}
.ornek .et{margin:20px auto 12px; background:var(--zumrut); color:var(--altin-2); font-family:var(--util);
  font-size:10px; letter-spacing:.2em; padding:5px 16px; border-radius:999px}
.ornek h2{font-size:30px; text-align:center; line-height:1.12; margin-bottom:10px}
.ornek .yzr{text-align:center; font-family:var(--util); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ceviz-2); margin-bottom:16px}
.ornek .spot{font-style:italic; text-align:center; color:var(--murekkep-2); border-top:1px solid var(--altin);
  border-bottom:1px solid var(--altin); padding:10px 0; font-size:15px; margin-bottom:16px}
.ornek .sutunlar{columns:2; column-gap:26px; column-rule:1px dotted rgba(109,74,43,.4); font-size:12.5px;
  line-height:1.62; color:var(--murekkep-2); flex:1; overflow:hidden}
.ornek .sutunlar p{margin:0 0 10px}

/* alt bilgi */
footer{background:var(--zumrut); color:rgba(239,230,208,.8); position:relative; overflow:hidden}
footer .desen{position:absolute; inset:0; opacity:.13}
footer .ic{position:relative; width:min(1440px,100% - 36px); margin-inline:auto; padding:22px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px}

/* sosyal + imza */
.sosyal{display:flex; gap:8px}
.sosyal a{width:34px; height:34px; border:1px solid rgba(231,211,160,.45); border-radius:50%;
  display:grid; place-items:center; color:var(--altin-2); transition:.2s}
.sosyal a:hover{background:var(--altin); border-color:var(--altin); color:#1F5B47}
.sosyal svg{width:16px; height:16px}
.imza-serit{position:relative; text-align:center; padding:0 0 20px; font-size:13px; color:rgba(239,230,208,.68)}
.imza-serit a{color:var(--altin-2); border-bottom:1px solid rgba(231,211,160,.5)}

@media (max-width:1000px){
  .govde,.govde.kenarsiz{grid-template-columns:1fr}
  .kenar{position:fixed; top:0; left:0; bottom:0; width:min(300px,85vw); z-index:80; max-height:none;
    transform:translateX(-104%); transition:transform .35s cubic-bezier(.32,.72,.3,1);
    box-shadow:0 0 60px rgba(31,91,71,.45); border-right:1px solid var(--ceviz)}
  .kenar.acik{transform:none}
  /* mobilde gizleme transform ile yapılır; masaüstünün kapali kuralı geçersiz */
  .kenar.kapali{visibility:visible; overflow:auto; border-right:1px solid var(--ceviz); padding:0 0 30px}
  .arac .baslik{display:none}
  .arac .ic{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:9px 0; gap:9px}
  .arac .ic::-webkit-scrollbar{display:none}
  .grup{flex:0 0 auto}
  .okuyucu-bas .ic{padding:11px 0 12px; gap:10px}
  .marka .ad{font-size:26px} .marka .kunye{display:none}
  .bas-sag .dg{padding:9px 13px; font-size:10px}
  .sahne{padding:16px 8px 34px; gap:14px}
  .yon{width:38px; height:38px; font-size:19px}
  .yon.sol{left:6px} .yon.sag{right:6px}
  .ornek{padding:22px 18px}
  .ornek h2{font-size:22px} .ornek .sutunlar{columns:1; font-size:12px}
  .ornek .spot{font-size:13px}
  .serit .ic{gap:8px; font-size:10px}
}
@media (max-width:560px){
  .serit .besmele{font-size:14px}
  .uyari-serit{font-size:13px; padding:10px 12px}
  footer .ic{flex-direction:column; gap:10px; text-align:center; align-items:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}