:root {
  --lacivert: #0d1b6e;
  --mavi: #1565c0;
  --acik-mavi: #e8f0fe;
  --yesil: #2e7d32;
  --altin: #c8a84b;
  --bg: #faf9f6;
  --bg2: #f2f0ec;
  --metin: #1a1a2e;
  --metin2: #5a5a7a;
  --kenar: #e0ddd6;
  --beyaz: #ffffff;
  --sidebar-w: 272px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Source Serif 4',Georgia,serif; background:var(--bg); color:var(--metin); display:flex; min-height:100vh; }

/* SIDEBAR */
#sidebar { width:var(--sidebar-w); background:var(--lacivert); height:100vh; position:fixed; top:0; left:0; display:flex; flex-direction:column; z-index:100; transition:transform .3s; overflow:hidden; }
#sidebar-header { padding:24px 20px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.kitap-logo { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:var(--altin); letter-spacing:.05em; margin-bottom:8px; }
.kitap-adi { font-family:'Source Serif 4',serif; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.9); line-height:1.4; }
.yazar { font-size:.72rem; color:rgba(255,255,255,.4); margin-top:4px; }
#nav { flex:1; overflow-y:auto; padding:8px 0 60px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
#nav::-webkit-scrollbar { width:2px; }
#nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); }
.nav-grup-baslik { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.14em; text-transform:uppercase; padding:16px 18px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 18px; font-size:.82rem; color:rgba(255,255,255,.65); cursor:pointer; transition:all .16s; border-left:3px solid transparent; line-height:1.4; }
.nav-item:hover:not(.disabled) { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.aktif { background:rgba(200,168,75,.12); color:#fff; border-left-color:var(--altin); font-weight:600; }
.nav-item.disabled { opacity:.35; cursor:default; }
.nav-no { font-family:'JetBrains Mono',monospace; font-size:.67rem; color:var(--altin); min-width:28px; flex-shrink:0; }
.nav-ikon { font-size:.9rem; min-width:28px; flex-shrink:0; }
.nav-alt { padding-left:30px; font-size:.78rem; }

/* MAIN */
#main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
#topbar { background:var(--beyaz); border-bottom:1px solid var(--kenar); padding:10px 40px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:50; }
#menu-toggle { display:none; background:none; border:none; cursor:pointer; font-size:1.3rem; color:var(--metin); padding:4px 6px; }
#bread { font-size:.78rem; color:var(--metin2); flex:1; }
#progress-wrap { display:flex; align-items:center; gap:8px; }
#progress-bar { width:80px; height:3px; background:var(--kenar); border-radius:2px; overflow:hidden; }
#progress-fill { height:100%; background:var(--altin); border-radius:2px; transition:width .4s; width:5%; }
#progress-text { font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--metin2); }

/* İÇERİK */
#icerik { flex:1; padding:52px 72px; max-width:840px; margin:0 auto; width:100%; overflow-x:hidden; }

/* Tipografi */
.bolum-no {
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  font-weight:700;
  color:var(--altin);
  letter-spacing:.22em;
  text-transform:uppercase;
  background:var(--lacivert);
  border-radius:8px;
  padding:10px 20px;
  margin-bottom:20px;
}
h1.b-baslik { font-family:'Playfair Display',serif; font-size:2.9rem; font-weight:900; color:var(--lacivert); line-height:1.2; margin-bottom:20px; letter-spacing:-.01em; }
.bolum-ozet { font-size:1.02rem; color:var(--metin2); line-height:1.85; margin-bottom:36px; }
h2.k-baslik { font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:700; color:var(--lacivert); margin:48px 0 20px; padding-bottom:12px; border-bottom:3px solid var(--lacivert); }
h2.k-baslik .kno { font-family:'JetBrains Mono',monospace; font-size:.72rem; background:var(--lacivert); color:var(--altin); padding:3px 9px; border-radius:4px; vertical-align:middle; margin-right:8px; }
h3.a-baslik { font-size:1.12rem; font-weight:800; color:var(--lacivert); margin:32px 0 12px; }
p { font-size:.96rem; line-height:1.88; color:var(--metin); margin-bottom:14px; }
ul.olist { list-style:none; margin:10px 0 16px; }
ul.olist li { padding:7px 0 7px 22px; position:relative; font-size:.92rem; line-height:1.65; border-bottom:1px solid var(--kenar); }
ul.olist li:last-child { border:none; }
ul.olist li::before { content:'◆'; position:absolute; left:0; color:var(--altin); font-size:.55rem; top:11px; }

/* Tanım kutusu */
.tanim { background:var(--acik-mavi); border:2px solid var(--mavi) !important; border-radius:10px; padding:18px 22px; margin:20px 0; font-style:italic; font-size:.96rem; line-height:1.8; }
.tanim strong { font-style:normal; color:var(--lacivert); }
.tanim-etiket { font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--mavi); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; display:block; font-style:normal; font-weight:800; }

/* Örnek */
.ornek { background:var(--bg2); border:1px solid var(--kenar); border-radius:10px; padding:18px 22px; margin:20px 0; }
.ornek-etiket { font-size:.68rem; font-weight:700; color:var(--yesil); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }

/* Tooltip */
.tip { position:relative; border-bottom:1px dashed var(--mavi); cursor:help; color:var(--mavi); font-weight:600; }
.tip .tiptext { visibility:hidden; opacity:0; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--lacivert); color:#fff; padding:10px 14px; border-radius:8px; font-size:.78rem; font-style:normal; font-weight:400; width:260px; line-height:1.5; z-index:999; transition:opacity .2s; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.tip:hover .tiptext { visibility:visible; opacity:1; }

/* Hızlı kontrol */
.hk { background:var(--beyaz); border:1px solid var(--kenar); border-radius:10px; padding:20px 22px; margin:24px 0; }
.hk-baslik { font-size:.82rem; font-weight:800; color:var(--lacivert); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.hk-item { display:flex; align-items:flex-start; gap:10px; padding:5px 0; font-size:.88rem; line-height:1.55; }
.hk-ikon { flex-shrink:0; font-size:.95rem; }

/* Düşün */
.dusun { background:linear-gradient(135deg,#fffde7,#fff9c4); border:1px solid #f9a825; border-radius:10px; padding:18px 22px; margin:20px 0; }
.dusun-etiket { font-size:.82rem; font-weight:800; color:#e65100; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }

/* Derinleştirme */
.dw { border:1px solid var(--kenar); border-radius:10px; overflow:hidden; margin:24px 0; }
.dw-btns { display:flex; }
.dw-btn { flex:1; padding:10px; text-align:center; font-size:.82rem; font-weight:600; cursor:pointer; background:var(--bg2); border:none; border-right:1px solid var(--kenar); color:var(--metin2); transition:all .15s; }
.dw-btn:last-child { border:none; }
.dw-btn:hover, .dw-btn.aktif { background:var(--beyaz); color:var(--mavi); }
.dw-panel { padding:20px 22px; display:none; background:var(--beyaz); }
.dw-panel.aktif { display:block; }
.dw-panel p { font-size:.88rem; color:var(--metin2); line-height:1.7; }

/* Tablo */
.tablo-wrap { overflow-x:auto; margin:20px 0; }
table.kitap-tablo { width:100%; border-collapse:collapse; font-size:.88rem; }
table.kitap-tablo th { background:var(--lacivert); color:#fff; padding:10px 14px; text-align:left; font-weight:600; }
table.kitap-tablo td { padding:9px 14px; border-bottom:1px solid var(--kenar); }
table.kitap-tablo tr:nth-child(even) td { background:var(--bg2); }

/* ALT NAV */
#alt-nav { border-top:1px solid var(--kenar); padding:20px 72px; display:flex; justify-content:space-between; align-items:center; background:var(--beyaz); }
.nav-btn { display:flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid var(--kenar); border-radius:8px; background:var(--beyaz); cursor:pointer; font-family:'Source Serif 4',serif; font-size:.85rem; color:var(--metin); transition:all .2s; }
.nav-btn:hover { background:var(--lacivert); color:#fff; border-color:var(--lacivert); }
#sayfa-no { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--metin2); }

/* MOBİL */
@media (max-width:768px) {
  #sidebar { transform:translateX(-100%); }
  #sidebar.acik { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.3); }
  #main { margin-left:0; }
  #menu-toggle { display:block; }
  #icerik { padding:28px 20px; }
  h1.b-baslik { font-size:1.8rem; }
  #alt-nav { padding:16px 20px; }
}
#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:99; }
#overlay.aktif { display:block; }

.dw-widget{border:1px solid var(--kenar);border-radius:10px;overflow:hidden;margin:24px 0;}
.dw-label{font-size:.82rem;font-weight:800;color:var(--lacivert);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px 6px;background:var(--bg2);border-bottom:1px solid var(--kenar);}
.dw-tabs{display:flex;border-bottom:1px solid var(--kenar);}
.dw-tab{flex:1;padding:14px 18px;text-align:center;font-size:.88rem;font-weight:600;cursor:pointer;background:var(--bg2);border:none;border-right:1px solid var(--kenar);color:var(--metin2);transition:all .15s;font-family:inherit;min-height:50px;display:flex;align-items:center;justify-content:center;gap:6px;}
.dw-tab:last-child{border-right:none;}
.dw-tab.dw-active,.dw-tab:hover{background:var(--beyaz);color:var(--mavi);}
.dw-frame{background:var(--beyaz);}
.dw-panel{padding:20px 22px;font-size:.92rem;line-height:1.7;color:var(--metin);}

/* Popup tip */
.popup-tip{text-decoration:underline;text-decoration-style:solid;text-decoration-color:#111;text-underline-offset:3px;cursor:help;color:#111;font-weight:700;}
/* DW Widget */
.dw-widget{border:1px solid var(--kenar);border-radius:10px;overflow:hidden;margin:24px 0;}
.dw-label{font-size:.82rem;font-weight:800;color:var(--lacivert);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px 6px;background:var(--bg2);border-bottom:1px solid var(--kenar);}
.dw-tabs{display:flex;border-bottom:1px solid var(--kenar);}
.dw-tab{flex:1;padding:14px 18px;text-align:center;font-size:.88rem;font-weight:600;cursor:pointer;background:var(--bg2);border:none;border-right:1px solid var(--kenar);color:var(--metin2);transition:all .15s;font-family:inherit;min-height:50px;display:flex;align-items:center;justify-content:center;gap:6px;}
.dw-tab:last-child{border-right:none;}
.dw-tab.dw-active{background:var(--beyaz);color:var(--mavi);}
.dw-tab:hover{background:var(--beyaz);color:var(--mavi);}
.dw-body{background:var(--beyaz);}
.dw-panel{padding:20px 22px;font-size:.92rem;line-height:1.75;color:var(--metin);}
.dw-panel p{margin-bottom:10px;}
.dw-show{display:block;}
.dw-hide{display:none;}
/* Bulmaca */
#grid-wrap{overflow:auto;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.15);background:#fff;padding:6px;}
td.black{background:#1a237e;}
td.white{background:#fff;border:1px solid #90a4ae;}
td.white.selected{background:#bbdefb;}
td.white.word-sel{background:#e3f2fd;}
td.white.correct{background:#c8e6c9;border-color:#388e3c;}
td.white.wrong{background:#ffcdd2;border-color:#c62828;}
td.white.revealed{background:#fff9c4;border-color:#f9a825;}
.cell-num{position:absolute;top:1px;left:2px;font-size:9px;font-weight:700;color:#1565c0;line-height:1;pointer-events:none;}
.cell-inp{width:100%;height:100%;border:none;background:transparent;text-align:center;font-size:13px;font-weight:700;color:#1a237e;text-transform:uppercase;outline:none;cursor:pointer;padding:0;caret-color:transparent;}
.clue-item{display:flex;gap:5px;margin-bottom:7px;cursor:pointer;border-radius:6px;padding:3px 5px;transition:background .15s;}
.clue-item:hover{background:#e8eaf6;}.clue-item.active{background:#bbdefb;}
.clue-num{font-size:.78rem;font-weight:700;color:#1565c0;min-width:22px;flex-shrink:0;}
.clue-txt{font-size:.75rem;color:#37474f;line-height:1.4;}

/* Bulmaca genel */
#wrap{max-width:100%;margin:0 auto;padding:8px 0;}
#main{justify-content:center;align-items:flex-start;}
#grid-wrap{
  overflow:auto;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  background:#fff;
  padding:4px;
  max-width:100%;
}
#btbl table, table#tbl{border-collapse:collapse;}
#btbl td, #tbl td{width:28px;height:28px;}
td.black, #btbl td.black{background:#2c3e6b;}
td.white, #btbl td.white{background:#f8fafc;border:1px solid #c5d0de;}
td.white.selected{background:#cde4fa;}
td.white.word-sel{background:#e8f4fd;}
td.white.correct{background:#c8efd4;border-color:#5ba875;}
td.white.wrong{background:#fdd;border-color:#c0605e;}
td.white.revealed{background:#fef9c3;border-color:#d4b94a;}
.cell-inp{font-size:12px;color:#1a2b5e;}
.cell-num{font-size:5.5px;color:#5c78a8;}
#clues, #bclues{min-width:220px;max-width:320px;}
.clue-item:hover{background:#e8edf8;}
.clue-item.active{background:#cde4fa;}
.clue-num{color:#2c4a8a;}
.clue-txt{color:#3a4a60;}
/* Bulmaca numaraları */
.cell-num{position:absolute;top:1px;left:2px;font-size:5.5px;font-weight:700;color:#5c78a8;line-height:1;pointer-events:none;}

/* Collapsible nav bölümler */
.nav-bolum-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 6px;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
  user-select: none;
}
.nav-bolum-toggle:hover { color: rgba(255,255,255,.8); }
.nav-bolum-ok {
  font-size: .6rem;
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-bolum-icerik { overflow: hidden; max-height: 4000px; transition: max-height .5s ease; }
.nav-bolum-icerik.kapali {
  max-height: 0;
}
.nav-ayrac {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 4px 18px;
}
.nav-item.disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* Kavram Haritası */
#kmw .ag{transition:opacity .28s;opacity:0;pointer-events:none;}
#kmw .ag.ac{opacity:1;pointer-events:all;}
#kmw .bc{transition:opacity .28s;opacity:0;}
#kmw .bc.ac{opacity:1;}
#kmw .ok{font-size:9px;transition:transform .22s;transform-box:fill-box;transform-origin:center;}
#kmw .ok.ro{transform:rotate(90deg);}
#kmw .ad{cursor:pointer;}
#kmw .ad:hover rect,#kmw .ad:hover ellipse{filter:brightness(1.13);}
.ag{display:none}.ag.ac{display:block}.bc{display:none}.bc.ac{display:block}
.ok{font-size:9px;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.ok.ro{transform:rotate(90deg)}
.ad{cursor:pointer}

/* H4 standart stil */
h4 { font-size:1.05rem; font-weight:700; margin:26px 0 10px; }

/* Kart başlıkları (border-left kartlar) */
[style*="border-left:4px solid"] h4,
[style*="border-left: 4px solid"] h4 {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
/* Tanim kutusu daha belirgin */
.tanim {
  border-left: 5px solid var(--mavi) !important;
  padding: 20px 24px;
}
/* HK kutusu başlık ikonlu */
.hk { border-radius: 12px; }