*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden}
body{
  font-family:'Georgia','Times New Roman',serif;
  background:linear-gradient(145deg,#D4F1FF 0%,#E8F4F8 50%,#F0F7FA 100%);
}

/* ÖLÇEKLI TASARIM TUVALI — her cihaz/yönde orantili küçülür, kirpilmaz */
#okumaStage{
  position:fixed;
  left:50%;
  top:50%;
  width:1240px;
  height:820px;
  transform:translate(-50%,-50%) scale(var(--okuma-scale,1));
  transform-origin:center center;
}

/* Toolbar */
.toolbar-wrap{position:absolute;top:0;left:0;right:0;z-index:50;pointer-events:auto}
.toolbar-header{pointer-events:auto}
.toolbar-back-btn{pointer-events:auto!important;z-index:60}

/* KITAP TASARIMI */
.book-container{
  position:absolute;
  top:84px;
  left:50%;
  transform:translateX(-50%);
  width:1040px;
  height:710px;
  perspective:1500px;
}
.book-page{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#fffef8 0%,#fdfcf5 40%,#f9f6eb 100%);
  border-radius:4px 16px 16px 4px;
  padding:42px 56px 60px 52px;
  overflow:hidden;
  display:none;
  flex-direction:column;
  box-shadow:-3px 0 8px rgba(0,0,0,.03),4px 0 15px rgba(0,0,0,.08),8px 5px 25px rgba(0,0,0,.12),inset 3px 0 8px rgba(0,0,0,.04),inset -1px 0 3px rgba(255,255,255,.8);
}
.book-page.active{display:flex}
.book-page::before{content:'';position:absolute;left:40px;top:30px;bottom:30px;width:2px;background:linear-gradient(180deg,#e8c4c4 0%,#d4a5a5 50%,#e8c4c4 100%);opacity:.4;border-radius:1px}
.page-title{font-size:25px;color:#b91c1c;font-weight:700;line-height:1.35;margin-bottom:22px;text-align:center;letter-spacing:-.02em}
.page-content{flex:1;font-size:17.5px;line-height:1.75;color:#2c3e50;text-align:justify;overflow:hidden}
.page-content p{margin-bottom:1.2em;text-indent:2em}
.page-content p.pcont{text-indent:0;margin-top:0}
.page-number{position:absolute;bottom:18px;right:30px;font-size:13px;color:#8b7355;font-style:italic;opacity:.7}

/* Sticky Tabs */
.page-tabs{position:absolute;right:-70px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;z-index:100}
.page-tab{width:65px;height:28px;padding:0 8px;background:linear-gradient(180deg,#fffacd 0%,#fff59d 100%);border:none;border-radius:0 14px 14px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:2px 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9);transition:all .15s ease;position:relative;writing-mode:horizontal-tb}
.page-tab::before{display:none}
.page-tab .tab-label{font-size:9px;font-weight:700;color:#8b7355;text-transform:uppercase}
.page-tab .tab-num{font-size:11px;font-weight:900;color:#5d4a10}
.page-tab:hover{transform:translateX(8px);box-shadow:4px 3px 12px rgba(0,0,0,.22);background:linear-gradient(180deg,#fff59d,#ffee58)}
.page-tab.active{background:linear-gradient(180deg,#ffeb3b,#ffc107);transform:translateX(12px);box-shadow:5px 4px 15px rgba(255,193,7,.4)}
.page-tab.active .tab-label{color:#6d5a10}
.page-tab.active .tab-num{color:#3e2d05}

/* Dark Mode */
html[data-theme="dark"] body{background:linear-gradient(145deg,#0f172a,#1e293b)}
html[data-theme="dark"] .book-page{background:linear-gradient(135deg,#1e293b,#1a2332,#151c28);box-shadow:-3px 0 8px rgba(0,0,0,.2),4px 0 15px rgba(0,0,0,.3),8px 5px 25px rgba(0,0,0,.4)}
html[data-theme="dark"] .book-page::before{background:linear-gradient(180deg,#4a5568,#2d3748,#4a5568);opacity:.3}
html[data-theme="dark"] .page-title{color:#f87171}
html[data-theme="dark"] .page-content{color:#cbd5e1}
html[data-theme="dark"] .page-number{color:#64748b}
html[data-theme="dark"] .page-tab{background:linear-gradient(145deg,#4a5568,#374151);box-shadow:3px 3px 8px rgba(0,0,0,.3)}
html[data-theme="dark"] .page-tab .tab-label{color:#94a3b8}
html[data-theme="dark"] .page-tab .tab-num{color:#e2e8f0;text-shadow:none}
html[data-theme="dark"] .page-tab:hover{background:linear-gradient(145deg,#4a5568,#2d3748)}
html[data-theme="dark"] .page-tab.active{background:linear-gradient(145deg,#3b82f6,#2563eb)}
html[data-theme="dark"] .page-tab.active .tab-label{color:#bfdbfe}
html[data-theme="dark"] .page-tab.active .tab-num{color:#fff}

/* Sözlük Popup */
.dict-word{cursor:pointer;border-bottom:1px dotted #3b82f6;transition:all .15s}
.dict-word:hover{background:#dbeafe;border-radius:2px}
html[data-theme="dark"] .dict-word{border-bottom-color:#60a5fa}
html[data-theme="dark"] .dict-word:hover{background:#1e3a5f}

.dict-popup{position:fixed;z-index:999999;background:linear-gradient(145deg,#fff,#f8fafc);border-radius:12px;padding:16px 20px;box-shadow:0 10px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);max-width:320px;min-width:180px;transform:scale(0.9);opacity:0;transition:all .2s ease;pointer-events:none}
.dict-popup.show{transform:scale(1);opacity:1;pointer-events:auto}
.dict-popup-word{font-size:18px;font-weight:700;color:#1e40af;margin-bottom:8px;letter-spacing:-.02em}
.dict-popup-meaning{font-size:15px;color:#374151;line-height:1.5}
.dict-popup-speaker{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;background:#3b82f6;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.dict-popup-speaker:hover{background:#2563eb;transform:scale(1.1)}
.dict-popup-speaker svg{width:14px;height:14px;fill:#fff}
.dict-popup::before{content:'';position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 4px rgba(0,0,0,.05)}
.dict-popup.arrow-top::before{bottom:-6px;left:50%;margin-left:-6px}
.dict-popup.arrow-bottom::before{top:-6px;left:50%;margin-left:-6px}

html[data-theme="dark"] .dict-popup{background:linear-gradient(145deg,#1e293b,#0f172a);box-shadow:0 10px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .dict-popup-word{color:#60a5fa}
html[data-theme="dark"] .dict-popup-meaning{color:#cbd5e1}
html[data-theme="dark"] .dict-popup::before{background:#1e293b}

/* AUDIO BAR - Sik Alt Çubuk */
.audio-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:44px;
  background:linear-gradient(180deg,rgba(255,252,240,.95),rgba(250,245,230,.98));
  border-top:1px solid rgba(180,160,120,.15);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:14px;
  z-index:50;
  backdrop-filter:blur(8px);
}
.audio-bar-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
  flex-shrink:0;
}
.audio-bar-btn svg{width:14px;height:14px}
.audio-bar-btn:hover{transform:scale(1.1)}
.audio-bar-btn:active{transform:scale(0.95)}

#audioPlayBtn{background:linear-gradient(145deg,#10b981,#059669);box-shadow:0 2px 8px rgba(16,185,129,.3)}
#audioPlayBtn svg{fill:#fff;margin-left:2px}
#audioPauseBtn{background:linear-gradient(145deg,#f59e0b,#d97706);box-shadow:0 2px 8px rgba(245,158,11,.3);display:none}
#audioPauseBtn svg{fill:#fff}
.audio-bar.playing #audioPlayBtn{display:none}
.audio-bar.playing #audioPauseBtn{display:flex}

.audio-seek-wrap{flex:1;display:flex;align-items:center;gap:10px}
.audio-seek{
  flex:1;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(0,0,0,.08);
  border-radius:3px;
  cursor:pointer;
  outline:none;
}
.audio-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  background:linear-gradient(145deg,#3b82f6,#2563eb);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(59,130,246,.4);
  cursor:grab;
  transition:transform .1s;
}
.audio-seek::-webkit-slider-thumb:hover{transform:scale(1.2)}
.audio-seek::-webkit-slider-thumb:active{cursor:grabbing}
.audio-seek::-moz-range-thumb{
  width:16px;height:16px;background:linear-gradient(145deg,#3b82f6,#2563eb);
  border-radius:50%;border:none;box-shadow:0 2px 6px rgba(59,130,246,.4);cursor:grab;
}
.audio-time{font-size:11px;font-weight:600;color:#78716c;min-width:38px;font-family:system-ui,sans-serif}

/* Cümle Highlight */
.sentence{transition:background .25s ease}
.sentence-highlight{
  background:linear-gradient(135deg,#fef08a,#fde047);
  border-radius:4px;
  box-shadow:0 0 0 3px rgba(253,224,71,.35);
}

/* Dark Mode */
html[data-theme="dark"] .audio-bar{
  background:linear-gradient(180deg,rgba(30,41,59,.95),rgba(15,23,42,.98));
  border-top-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .audio-seek{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .audio-time{color:#94a3b8}
html[data-theme="dark"] .sentence-highlight{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:#fff;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
}

/* ==================== KAPAK EKRANI ==================== */
#okumaStage.reading #coverScreen{display:none}
.book-container{display:none}
#okumaStage.reading .book-container{display:block}

#coverScreen{
  position:absolute;
  top:84px;
  left:50%;
  transform:translateX(-50%);
  width:1040px;
  height:710px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
  padding-top:6px;
}

/* 3D Kitap Kapagi */
.cover-card{
  position:relative;
  width:680px;
  height:392px;
  border-radius:6px 14px 14px 6px;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(212,175,55,.16) 0%, transparent 45%),
    linear-gradient(135deg,#0b2027 0%,#14323b 42%,#1f4a55 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.3),
    14px 16px 40px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(212,175,55,.25),
    inset 0 0 60px rgba(0,0,0,.35);
  transform:perspective(1600px) rotateY(-8deg) rotateX(2deg);
  transform-style:preserve-3d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:38px 56px;
  overflow:hidden;
}
/* Kitap sirti */
.cover-card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:26px;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.06) 60%,rgba(0,0,0,.35));
  border-right:1px solid rgba(212,175,55,.25);
}
/* Altin çerçeve */
.cover-card::after{
  content:'';
  position:absolute;
  inset:16px 16px 16px 34px;
  border:1.5px solid rgba(212,175,55,.55);
  border-radius:4px 10px 10px 4px;
  pointer-events:none;
  box-shadow:inset 0 0 24px rgba(212,175,55,.08);
}

.cover-emblem{
  width:74px;height:74px;
  margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(212,175,55,.25),rgba(212,175,55,.05));
  box-shadow:0 0 0 1.5px rgba(212,175,55,.6),inset 0 0 18px rgba(212,175,55,.12);
}
.cover-emblem svg{width:42px;height:42px}

.cover-kicker{
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:12px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:rgba(212,175,55,.85);
  margin-bottom:8px;
}
.cover-title{
  font-family:'Georgia',serif;
  font-size:32px;
  line-height:1.2;
  color:#f4ecd8;
  text-align:center;
  font-weight:700;
  letter-spacing:.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.cover-title span{
  display:block;
  font-size:38px;
  background:linear-gradient(180deg,#f5d784,#d4af37 60%,#a8841f);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-top:4px;
}
.cover-sub-en{
  margin-top:16px;
  font-family:'Georgia',serif;
  font-style:italic;
  font-size:15px;
  color:#cfe3e8;
  text-align:center;
  letter-spacing:.3px;
}
.cover-sub-tr{
  margin-top:4px;
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:13px;
  color:rgba(207,227,232,.7);
  text-align:center;
}
.cover-foot{
  position:absolute;
  bottom:22px;
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(212,175,55,.7);
}

/* ===== Article Butonlari — 3D YAPIŞKAN NOTLAR (kitaba yapıştırılmış post-it) ===== */
.article-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px 16px;
  width:760px;
  perspective:1100px;
}

.article-btn{
  position:relative;
  height:70px;
  border:none;
  cursor:pointer;
  border-radius:2px 3px 7px 3px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 24%),
    linear-gradient(155deg,#fff7c6 0%,#ffe98c 52%,#ffdf6e 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#6a4e16;
  transform-origin:50% 4%;
  transform:rotate(-2.3deg);
  box-shadow:
    0 1px 1px rgba(0,0,0,.12),
    0 7px 9px -5px rgba(0,0,0,.32),
    0 16px 22px -12px rgba(110,80,10,.42),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -12px 20px -12px rgba(170,130,20,.40);
  transition:transform .24s cubic-bezier(.2,.7,.3,1.45),box-shadow .24s ease,filter .24s ease;
}
/* üstte yarı saydam yapıştırma bandı (washi tape) */
.article-btn::after{
  content:'';
  position:absolute;
  top:-6px;left:50%;
  width:50px;height:15px;
  transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(206,224,234,.30));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 5px rgba(0,0,0,.16);
  border-radius:1px;
}
/* sağ-alt kıvrılan köşe (peel / dog-ear) */
.article-btn::before{
  content:'';
  position:absolute;
  right:0;bottom:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 0 18px 18px;
  border-color:transparent transparent rgba(0,0,0,.16) transparent;
  border-radius:0 0 7px 0;
  filter:drop-shadow(-2px -2px 3px rgba(0,0,0,.12));
}

.article-btn .art-no{
  font-family:'Georgia',serif;
  font-size:23px;
  font-weight:800;
  line-height:1;
  color:#9a6500;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.article-btn .art-label{
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1px;
  line-height:1.16;
  text-align:center;
  padding:0 9px;
  color:#6a4e16;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* organik "elle yapıştırılmış" eğimler */
.article-btn:nth-child(even){transform:rotate(2deg)}
.article-btn:nth-child(3n){transform:rotate(-1.4deg)}
.article-btn:nth-child(4n){transform:rotate(2.6deg)}
.article-btn:nth-child(5n){transform:rotate(-2.7deg)}

/* renkli not paketi (kağıt tonları) */
.article-btn:nth-child(6n+2){background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 24%),linear-gradient(155deg,#ffd9e6 0%,#ffb6cd 55%,#ff9fbd 100%)}
.article-btn:nth-child(6n+3){background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 24%),linear-gradient(155deg,#d7f6e2 0%,#a8ecc6 55%,#8fe3b4 100%)}
.article-btn:nth-child(6n+4){background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 24%),linear-gradient(155deg,#d8edff 0%,#a9d6ff 55%,#8ec6ff 100%)}
.article-btn:nth-child(6n+5){background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 24%),linear-gradient(155deg,#ffe7cf 0%,#ffcaa0 55%,#ffb781 100%)}
.article-btn:nth-child(6n){background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 24%),linear-gradient(155deg,#ebe0fb 0%,#cdb8f6 55%,#bba2f0 100%)}

.article-btn:hover{
  transform:rotate(0deg) translateY(-7px) scale(1.06);
  box-shadow:
    0 2px 2px rgba(0,0,0,.14),
    0 18px 24px -10px rgba(0,0,0,.40),
    0 30px 44px -18px rgba(90,70,10,.48),
    inset 0 1px 0 rgba(255,255,255,.85);
  filter:saturate(1.08) brightness(1.04);
  z-index:6;
}
.article-btn:active{transform:rotate(0deg) translateY(-2px) scale(1.01)}

/* hazır makale — etiketi biraz daha güçlü */
.article-btn.ready .art-label{font-weight:800}

/* yakında gelecek — soluk, gri kağıt */
.article-btn.soon{filter:grayscale(.7) brightness(.97);opacity:.72}
.article-btn.soon:hover{transform:rotate(0deg) translateY(-3px) scale(1.02);filter:grayscale(.45) brightness(1)}

/* Kitap içinde "Kütüphane" dönüs butonu */
.lib-back{
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  display:flex;align-items:center;gap:6px;
  padding:6px 16px;
  border:none;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#1f4a55,#14323b);
  color:#f4ecd8;
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  transition:all .15s ease;
}
.lib-back:hover{filter:brightness(1.12)}
.lib-back svg{width:13px;height:13px;fill:none;stroke:#d4af37;stroke-width:2.2}

/* Dark mode kapak */
/* Dark mode — yapışkan kağıt notlar her temada kağıt kalır */
html[data-theme="dark"] .article-btn .art-no{color:#9a6500}
html[data-theme="dark"] .article-btn .art-label{color:#6a4e16}