/* Elmadil Plus — hikaye okuma sayfası kabuğu (class-el-okuma.php).
   Sol: öğrenci paneli · orta: hikaye · sağ: "Bu sayfada". Paneller kart, sayfa ortalı kap içinde (kenarlara yapışmaz).
   Container query: kabuğun genişliğine göre çalışır (tema tam genişlik verse de vermese de).
     >= 1080px : üç sütun          780–1079px : sol + orta          < 780px : tek sütun + alt çubuk/çekmece */

.el-okuma,.el-ok-cubuk,.el-ok-cekmece{
  --ok-bg:var(--kb-h-bg1,#fff);--ok-kagit:var(--kb-h-bg2,#f6f4ff);--ok-yazi:var(--kb-h-text,#1d1846);--ok-soluk:var(--kb-h-text2,#5c5878);
  --ok-cizgi:var(--kb-h-line,#e7e3f4);--ok-marka:var(--kb-h-bg5,#5b3fe0);--ok-vurgu:var(--kb-h-accent,#ef802e);
  --ok-marka-12:rgba(91,63,224,.10);--ok-golge:0 1px 2px rgba(20,16,52,.05),0 14px 34px -22px rgba(20,16,52,.28);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html[data-kb-theme="dark"] .el-okuma,html[data-kb-theme="dark"] .el-ok-cubuk,html[data-kb-theme="dark"] .el-ok-cekmece{
  --ok-bg:var(--kb-bg-alt,#1c1840);--ok-kagit:#241f4d;--ok-yazi:var(--kb-heading,#efedfc);--ok-soluk:var(--kb-muted,#b9b5d8);
  --ok-cizgi:var(--kb-border,#2f2a5c);--ok-marka:#8f7cff;--ok-marka-12:rgba(143,124,255,.16);--ok-golge:0 14px 34px -22px rgba(0,0,0,.7)}

.el-okuma{container-type:inline-size;box-sizing:border-box;width:100%;max-width:1360px;margin:0 auto;
  padding:clamp(20px,3vw,36px) clamp(16px,3vw,40px) clamp(32px,4vw,56px);--ok-ust:100px}
.el-okuma *,.el-okuma *::before,.el-okuma *::after,.el-ok-cekmece *{box-sizing:border-box}
.el-okuma a,.el-ok-cekmece a{text-decoration:none}

.el-okuma-izgara{display:block}
.el-okuma-orta{min-width:0}
.el-okuma-sol,.el-okuma-sag{display:none;min-width:0}

@container (min-width:780px){
  .el-okuma-izgara{display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start}
  .el-okuma-sol{display:block;position:sticky;top:var(--ok-ust)}
}
@container (min-width:1080px){
  .el-okuma-izgara{grid-template-columns:248px minmax(0,1fr) 228px;gap:40px}
  .el-okuma-sag{display:block;position:sticky;top:var(--ok-ust)}
}

/* ---- kart ---- */
.el-ok-panel{padding:20px;border-radius:18px;background:var(--ok-bg);border:1px solid var(--ok-cizgi);box-shadow:var(--ok-golge);
  font-size:14px;line-height:1.5;color:var(--ok-yazi)}
:is(.el-okuma,.el-ok-cekmece) .el-ok-bas{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ok-soluk)}
:is(.el-okuma,.el-ok-cekmece) .el-ok-metin{margin:0 0 16px;color:var(--ok-soluk);font-size:13.5px}
:is(.el-okuma,.el-ok-cekmece) .el-ok-kart-bas{margin:0 0 6px;font-weight:800;font-size:16px;color:var(--ok-yazi)}
.el-ok-ikon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* sol: kim */
.el-ok-kim{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--ok-cizgi)}
.el-ok-harf{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;color:#fff;font-weight:800;font-size:18px;
  background:linear-gradient(135deg,var(--ok-marka),#8b6cff)}
.el-ok-kim b{display:block;font-size:15px;line-height:1.25;color:var(--ok-yazi)}
.el-ok-kim small{display:block;margin-top:2px;color:var(--ok-soluk);font-size:12.5px}

/* sol: istatistik */
.el-ok-istat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.el-ok-istat div{padding:10px 12px;border-radius:12px;background:var(--ok-kagit)}
.el-ok-istat b{display:block;font-size:18px;font-weight:800;line-height:1.2;color:var(--ok-yazi)}
.el-ok-istat small{display:block;margin-top:2px;font-size:11.5px;color:var(--ok-soluk)}

/* sol: menü */
.el-ok-menu{display:grid;gap:2px;margin:0 -8px 12px}
.el-ok-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ok-yazi);font-weight:600;transition:background .15s,color .15s}
.el-ok-menu a .el-ok-ikon{color:var(--ok-soluk);transition:color .15s}
.el-ok-menu a:hover,.el-ok-menu a:focus-visible{background:var(--ok-marka-12);color:var(--ok-marka)}
.el-ok-menu a:hover .el-ok-ikon,.el-ok-menu a:focus-visible .el-ok-ikon{color:var(--ok-marka)}
.el-ok-devam{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin:0 0 12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--ok-cizgi);color:var(--ok-yazi);font-weight:700;transition:border-color .15s}
.el-ok-devam:hover{border-color:var(--ok-marka)}
.el-ok-devam small{grid-column:1/-1;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ok-vurgu)}
.el-ok-devam span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el-ok-devam .el-ok-ikon{color:var(--ok-marka)}
.el-ok-cikis{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--ok-cizgi);color:var(--ok-soluk);font-size:13px;font-weight:600}
.el-ok-cikis .el-ok-ikon{width:16px;height:16px}
.el-ok-cikis:hover{color:var(--ok-yazi)}

/* misafir */
.el-ok-btn{display:block;padding:11px 14px;border-radius:11px;background:var(--ok-marka);color:#fff!important;font-weight:700;text-align:center;transition:filter .15s}
.el-ok-btn:hover{filter:brightness(1.08)}
.el-ok-bag{display:block;margin-top:10px;color:var(--ok-marka);font-weight:700;font-size:13px;text-align:center}
.el-ok-bag:hover{text-decoration:underline}

/* sağ: içindekiler */
.el-ok-icindekiler{display:grid;gap:2px;margin:0 -8px 16px;counter-reset:ok}
.el-ok-icindekiler a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ok-soluk);font-weight:600;transition:background .15s,color .15s}
.el-ok-icindekiler a::before{counter-increment:ok;content:counter(ok);display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;
  border:1.5px solid var(--ok-cizgi);font-size:11px;font-weight:800;color:var(--ok-soluk);transition:all .15s}
.el-ok-icindekiler a:hover{background:var(--ok-kagit);color:var(--ok-yazi)}
.el-ok-icindekiler a.etkin{color:var(--ok-marka);background:var(--ok-marka-12)}
.el-ok-icindekiler a.etkin::before{background:var(--ok-marka);border-color:var(--ok-marka);color:#fff}

.el-ok-ilerleme-kutu{padding:14px 0 16px;margin-bottom:16px;border-top:1px solid var(--ok-cizgi);border-bottom:1px solid var(--ok-cizgi)}
.el-ok-ilerleme-ust{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:12.5px;color:var(--ok-soluk);font-weight:600}
.el-ok-ilerleme-ust b{color:var(--ok-yazi);font-size:13px}
.el-ok-ilerleme{height:6px;border-radius:99px;background:var(--ok-kagit);overflow:hidden}
.el-ok-ilerleme i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok-vurgu),var(--ok-marka));border-radius:inherit;transition:width .2s}

.el-ok-seviyeler{display:flex;flex-wrap:wrap;gap:6px}
.el-ok-seviyeler a,.el-ok-seviyeler span{display:inline-flex;align-items:center;min-height:30px;padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:700;
  border:1px solid var(--ok-cizgi);color:var(--ok-yazi);transition:border-color .15s,color .15s}
.el-ok-seviyeler a:hover{border-color:var(--ok-marka);color:var(--ok-marka)}
.el-ok-seviyeler [aria-current]{background:var(--ok-marka);border-color:var(--ok-marka);color:#fff}
.el-ok-seviyeler .el-level-missing{opacity:.4}

/* test sonucu notu (el-okuma.js, puan kutusunun altına) */
.el-ok-sonuc-not{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#ecfaf4;border:1px solid #bfe8d6;color:#14532d;font-size:14px;font-weight:600}
html[data-kb-theme="dark"] .el-ok-sonuc-not{background:#12302a;border-color:#1f5a4b;color:#bdf0dc}
.el-okuma .el-ok-sonuc-not.el-ok-sonuc-hata{background:#fef2f2;border-color:#fecaca;color:#991b1b}
html[data-kb-theme="dark"] .el-okuma .el-ok-sonuc-not.el-ok-sonuc-hata{background:#3a1d24;border-color:#6b2b36;color:#ffc9c9}

/* testin altındaki "Hikayeyi tamamladım" (Tracker'ın üstteki düğmesine basar) */
.el-ok-tamamla{margin:12px 0 0;text-align:center}
.el-ok-tamamla-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border:0;border-radius:10px;
  background:var(--ok-marka);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:filter .15s,transform .15s}
.el-ok-tamamla-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.el-ok-tamamla-btn[disabled]{opacity:.75;cursor:default;transform:none}
.el-ok-tamamla-bilgi{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--ok-kagit);color:var(--ok-soluk);font-weight:600;font-size:14px}
/* ---- dar alan: alt çubuk + çekmece ----
   container-type, fixed konumlu alt öğelerin kapsayıcısı olduğu için çubuk ve çekmece <body>'ye taşınır (el-okuma.js). */
.el-ok-cubuk{position:fixed;left:50%;bottom:14px;z-index:60;display:flex;gap:4px;padding:5px;border-radius:99px;transform:translateX(-50%);
  background:var(--ok-bg);border:1px solid var(--ok-cizgi);box-shadow:0 10px 30px -10px rgba(20,16,52,.45);transition:transform .25s,opacity .25s}
.el-ok-cubuk[hidden]{display:none}
.el-ok-cubuk.gizli{transform:translate(-50%,90px);opacity:0}
.el-ok-cubuk button{display:flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:99px;background:transparent;color:var(--ok-yazi);
  font:inherit;font-weight:600;font-size:13.5px;line-height:1;cursor:pointer;white-space:nowrap}
.el-ok-cubuk button[hidden]{display:none}
.el-ok-cubuk button:hover,.el-ok-cubuk button[aria-expanded="true"]{background:var(--ok-marka-12);color:var(--ok-marka)}
.el-ok-cubuk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.el-ok-cekmece{position:fixed;left:0;right:0;bottom:0;z-index:62;max-height:80vh;overflow:auto;color:var(--ok-yazi);
  padding:22px 16px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--ok-bg);
  box-shadow:0 -10px 40px -10px rgba(20,16,52,.4);animation:el-ok-yukari .22s ease-out}
.el-ok-cekmece[hidden]{display:none}
.el-ok-cekmece::before{content:"";display:block;width:40px;height:4px;margin:-8px auto 14px;border-radius:99px;background:var(--ok-cizgi)}
.el-ok-cekmece .el-ok-panel{border:0;box-shadow:none;padding:4px 6px;background:none}
.el-ok-perde{position:fixed;inset:0;z-index:61;background:rgba(14,12,34,.45)}
.el-ok-perde[hidden]{display:none}
@keyframes el-ok-yukari{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){.el-okuma *,.el-ok-cubuk,.el-ok-cekmece{transition:none!important;animation:none!important}}
@media print{.el-okuma-sol,.el-okuma-sag,.el-ok-cubuk,.el-ok-cekmece,.el-ok-perde{display:none!important}.el-okuma-izgara{display:block!important}}