/* =========================================================
   Myriad Pro — eminkaya.net ile aynı tipografi
   Dosyalar WordPress temasından okunur (aynı alan adı, CORS sorunu yok).
   Portalı temadan bağımsız hale getirmek isterseniz: woff dosyalarını
   varliklar/fonts/ klasörüne kopyalayın ve her src satırında yerel yolu
   başa alın; tarayıcı listedeki ilk çalışan kaynağı kullanır.
   ========================================================= */
@font-face{
  font-family:'Myriad Pro Local';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MyriadPro-Light.woff') format('woff'),
      url('../fonts/MyriadPro-Light.woff') format('woff');
  font-weight:300;font-style:normal;font-stretch:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-REGULAR.woff') format('woff'),
      url('../fonts/MYRIADPRO-REGULAR.woff') format('woff');
  font-weight:400;font-style:normal;font-stretch:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff'),
      url('../fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
  font-weight:600;font-style:normal;font-stretch:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff'),
      url('../fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
  font-weight:600;font-style:italic;font-stretch:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-BOLD.woff') format('woff'),
      url('../fonts/MYRIADPRO-BOLD.woff') format('woff');
  font-weight:700;font-style:normal;font-stretch:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-BOLDIT.woff') format('woff'),
      url('../fonts/MYRIADPRO-BOLDIT.woff') format('woff');
  font-weight:700;font-style:italic;font-stretch:normal;font-display:swap;
}
/* Dar sürümler: portalda kullanılmıyor ama tanımlı dursun.
   Kullanılmayan @font-face indirilmez, maliyeti yoktur. */
@font-face{
  font-family:'Myriad Pro Local Condensed';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-COND.woff') format('woff'),
      url('../fonts/MYRIADPRO-COND.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local Condensed';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-CONDIT.woff') format('woff'),
      url('../fonts/MYRIADPRO-CONDIT.woff') format('woff');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local Bold Condensed';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-BOLDCOND.woff') format('woff'),
      url('../fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Myriad Pro Local Bold Condensed';
  src:url('/wp-content/themes/%C6%8EKTema/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff'),
      url('../fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
  font-weight:700;font-style:italic;font-display:swap;
}

/* =========================================================
   e-Portal — arayüz katmanı
   Mobil öncelikli. Tablolar dar ekranda karta dönüşür.
   Tipografi: Myriad Pro (eminkaya.net ile aynı)
   ========================================================= */

:root{
  /* açık tema — değerler eminkaya.net'teki ƎKTema'dan alındı */
  --kagit:#f3f7f6;
  --yuzey:#ffffff;
  --yuzey2:#f9f9f9;
  --yuzey3:#f1f1f1;
  --cizgi:#e9e9e9;
  --cizgi-koyu:#e0e0e0;

  --murekkep:#222222;
  --murekkep2:#444444;
  /* Tema meta yazısında #777 kullanıyor; beyaz üzerinde 4,48:1 ile AA'nın
     altında kalıyor. Öğrenci ekranında okunurluk için bir tık koyultuldu. */
  --soluk:#6b7270;

  --vurgu:#008080;
  /* Marka teal'i beyazda 4,77:1 ile geçiyor ama sayfa zemininde (#f3f7f6)
     4,42:1'e düşüp AA eşiğinin altında kalıyor. Dolgu (düğme, şerit) marka
     renginde kalır; açık zemine YAZI olarak basılan teal bu jetonu kullanır. */
  --vurgu-yazi:#007a7a;
  --vurgu-koyu:#005959;
  --vurgu-ac:#e0f2f2;
  --vurgu-metin:#ffffff;

  --yesil:#3d6245;  --yesil-ac:#e2ede3;
  --kirmizi:#c1332a; --kirmizi-ac:#fbe9e7;
  --sari:#8a6206;   --sari-ac:#fdf3dd;

  --golge-1:0 1px 2px rgba(0,0,0,.05);
  --golge-2:0 4px 12px rgba(0,0,0,.06);
  --golge-3:0 -2px 16px rgba(0,0,0,.08);

  --r-s:3px; --r-m:8px; --r-l:8px; --r-tam:999px;
  /* eminkaya.net ile aynı tipografi.
     Tema başlıkları daraltılmış kesimle çiziyor ama bunu Cufon ile yapıyor;
     @font-face adları kurallardaki adlarla tutmuyor. Portal kendi @font-face
     adlarını doğru tanımladığı için daraltılmış kesimi doğrudan kullanır. */
  --bas:'Myriad Pro Local Bold Condensed','Myriad Pro Local Condensed','Myriad Pro Local','Segoe UI',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --govde:'Myriad Pro Local','Myriad Pro','Segoe UI',"Helvetica Neue",Helvetica,Arial,sans-serif;

  --ust-h:58px;
  --tab-h:calc(60px + env(safe-area-inset-bottom, 0px));
  /* Kalıcı kenar menüsü. Koyu zemin LearningSYS'den geliyor ama nötr gri
     yerine teal'e çalan bir tonda: menü portalın markasına ait durmalı. */
  --kenar-g:260px;
  --kenar-zemin:#1d2b2a;
  --kenar-yazi:#b3c1bf;
  --kenar-parlak:#ffffff;
  --kenar-uzeri:#2a3c3a;
  --kenar-cizgi:#31423f;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]){
    /* Temada koyu tema yok. Bilinçli ayrışma: gece çalışan öğrenci için
       korunuyor, ama marka teal'ine göre tonlandı. */
    --kagit:#0f1413;
    --yuzey:#171d1c;
    --yuzey2:#1f2726;
    --yuzey3:#283130;
    --cizgi:#2a3332;
    --cizgi-koyu:#3a4442;

    --murekkep:#e9eeec;
    --murekkep2:#a8b3b0;
    --soluk:#8a9593;

    --vurgu:#4db6ac;
    --vurgu-yazi:#4db6ac;
    --vurgu-koyu:#6ec9c0;
    --vurgu-ac:#11302d;
    --vurgu-metin:#0f1413;

    --yesil:#68b98c;  --yesil-ac:#15251c;
    --kirmizi:#e8887b; --kirmizi-ac:#2b1a17;
    --sari:#d6a445;   --sari-ac:#2a2214;

    --golge-1:0 1px 2px rgba(0,0,0,.35);
    --golge-2:0 4px 12px rgba(0,0,0,.32);
    --golge-3:0 -2px 16px rgba(0,0,0,.4);

    /* Koyu temada sayfa zaten koyu; menü sayfadan ayrışsın diye bir tık daha koyu. */
    --kenar-zemin:#121918;
    --kenar-yazi:#9fadab;
    --kenar-uzeri:#212b2a;
    --kenar-cizgi:#273331;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--kagit);
  color:var(--murekkep);
  font-family:var(--govde);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  padding-bottom:0;
}
/* alt sekme çubuğu yalnızca dar ekranda var; gövdeye o kadar boşluk bırak */
@media (max-width:860px){
  body{padding-bottom:var(--tab-h)}
}

h1,h2,h3,h4{
  font-family:var(--bas);
  margin:0;
  line-height:1.2;
  /* Daraltılmış kesimde negatif aralık harfleri birbirine yapıştırıyor. */
  letter-spacing:0;
  text-wrap:balance;
}
h1{font-size:clamp(25px,6vw,34px);font-weight:700}
h2{font-size:clamp(20px,4.6vw,26px);font-weight:600}
h3{font-size:clamp(17px,3.8vw,19px);font-weight:600}
p{margin:0 0 12px}
a{color:var(--vurgu-yazi);text-decoration-thickness:1.5px;text-underline-offset:2px}
img{max-width:100%;height:auto}
code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.9em;
  background:var(--yuzey2);padding:2px 6px;border-radius:4px}

.kap{width:100%;max-width:1100px;margin:0 auto;padding-inline:16px}
@media (min-width:640px){.kap{padding-inline:24px}}

.atla{position:absolute;left:-9999px}
.atla:focus{left:12px;top:12px;background:var(--yuzey);padding:10px 16px;
  z-index:200;border-radius:var(--r-s);box-shadow:var(--golge-2)}
:focus-visible{outline:2.5px solid var(--vurgu);outline-offset:2px;border-radius:4px}

.tnum{font-variant-numeric:tabular-nums}
.sag{text-align:right}

/* ---------------- üst çubuk ---------------- */
.ust{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--yuzey) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--cizgi);
  padding-top:env(safe-area-inset-top, 0px);
}
.ust-ic{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--ust-h);
}
.marka{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1.2;min-width:0}
.marka-ad{font-family:var(--bas);font-weight:700;font-size:17px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marka-alt{font-size:11.5px;color:var(--soluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ust-nav{display:flex;align-items:center;gap:6px;font-size:14.5px}
.ust-nav a{
  text-decoration:none;color:var(--murekkep2);font-weight:600;
  padding:8px 14px;border-radius:var(--r-s);
  display:inline-flex;align-items:center;min-height:38px;
}
.ust-nav a:active{background:var(--yuzey2);transform:scale(.97)}
.ust-nav a.vurgu{background:var(--vurgu);color:var(--vurgu-metin)}
.ust-nav a.sade{color:var(--soluk);font-weight:500}
.ust-nav .kisi{color:var(--soluk);font-size:13px;padding-inline:4px;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* dar ekranda üst menü sadeleşir; gezinme alt çubuğa iner,
   sağ üstte yalnızca kullanıcı çipi kalır */
@media (max-width:860px){
  .ust-nav a:not(.vurgu-mobil):not(.kisi-cip),
  .ust-nav .kisi{display:none}
}

/* ---------------- kabuk: üst bar + kalıcı kenar + ortalanmış içerik ----------------
   Gezinme kabuğu LearningSYS'den örnek alındı. Oradaki kalıcı sol menü,
   öğrencinin ders ağacını her sayfada görmesini sağlıyordu; portalda ağaç
   yalnızca iç sayfalarda ve sayfa içinde duruyordu. Renk, tipografi ve koyu
   tema portalın kendi kimliğinde kaldı. */
.tepe{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  min-height:var(--ust-h);padding-inline:16px;
  background:color-mix(in srgb, var(--yuzey) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--cizgi);
  padding-top:env(safe-area-inset-top, 0px);
}
.tepe .marka{flex:1 1 auto}
.tepe-nav{display:flex;align-items:center;gap:6px;font-size:14.5px}
.tepe-nav a{
  text-decoration:none;color:var(--murekkep2);font-weight:600;
  padding:8px 14px;border-radius:var(--r-s);
  display:inline-flex;align-items:center;min-height:44px;
}
.tepe-nav a:active{background:var(--yuzey2);transform:scale(.97)}
.tepe-nav a.vurgu{background:var(--vurgu);color:var(--vurgu-metin)}
.tepe-nav a.sade{color:var(--soluk);font-weight:500}
@media (max-width:860px){
  .tepe-nav a:not(.vurgu-mobil):not(.kisi-cip){display:none}
}

/* Hamburger yalnızca kenar çekmeceye dönüştüğünde anlamlı. */
.tepe-menu{
  display:none;flex:0 0 auto;width:44px;height:44px;margin-left:-8px;
  align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--murekkep);border-radius:var(--r-s);
}
.tepe-menu svg{width:22px;height:22px}
@media (hover:hover){.tepe-menu:hover{background:var(--yuzey2)}}

.kabuk{display:flex;align-items:flex-start;min-height:calc(100vh - var(--ust-h))}
.govde-alan{flex:1 1 auto;min-width:0;padding-block:20px 40px}
@media (min-width:640px){.govde-alan{padding-block:28px 56px}}
/* İçerik ortalanır ve dar tutulur: uzun satır okunmuyor, LearningSYS de
   içeriği 900 pikselde ortalıyordu. Kenar menüsü yokken (giriş, kayıt)
   sayfa kendi genişliğini kullanır. */
.ic{width:100%;max-width:900px;margin:0 auto;padding-inline:16px}
@media (min-width:640px){.ic{padding-inline:24px}}
.govde-genis .ic{max-width:1100px}

/* Kenar menüsü */
.kenar{
  position:relative;
  flex:0 0 var(--kenar-g);width:var(--kenar-g);
  align-self:stretch;
  background:var(--kenar-zemin);color:var(--kenar-yazi);
  padding:18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
}
@media (min-width:900px){
  .kenar{position:sticky;top:var(--ust-h);max-height:calc(100vh - var(--ust-h))}
}
.kenar h4{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb, var(--kenar-yazi) 72%, transparent);
  margin:16px 0 6px;font-weight:700;padding-inline:10px;
}
.kenar h4:first-of-type{margin-top:0}
.kenar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kenar a{
  display:flex;align-items:center;gap:9px;
  padding:11px 10px;border-radius:var(--r-m);min-height:44px;
  text-decoration:none;color:var(--kenar-yazi);font-size:14.5px;font-weight:500;
}
.kenar a:active{background:var(--kenar-uzeri)}
@media (hover:hover){.kenar a:hover{background:var(--kenar-uzeri);color:var(--kenar-parlak)}}
.kenar a.secili{background:var(--vurgu);color:var(--vurgu-metin);font-weight:700}
.kenar .alt-liste{margin:2px 0 4px}
.kenar .alt-liste a{padding-left:20px;font-size:13.5px}
.kenar-bos{margin:0 10px;font-size:13.5px;color:color-mix(in srgb, var(--kenar-yazi) 70%, transparent)}

/* Çekmeceyi kapatma. Masaüstünde menü zaten açık olduğu için gizli;
   dar ekranda karartmaya dokunmak sezgisel değil, görünür bir çıkış lazım. */
.kenar-kapat{
  display:none;position:absolute;top:8px;right:8px;
  width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--kenar-yazi);border-radius:var(--r-m);
}
.kenar-kapat svg{width:18px;height:18px}
@media (hover:hover){.kenar-kapat:hover{background:var(--kenar-uzeri);color:var(--kenar-parlak)}}

/* "← Derslerim" ve ders başlığı bloğu kaldırıldı: menü artık sabit, ders
   içindeyken de aynı kalıyor; geri dönüş "Derslerim" grubunun kendisi. */
.kenar-nokta{width:8px;height:8px;border-radius:var(--r-tam);flex:0 0 auto}
/* Seçili ders vurgu renginde basılıyor; kendi rengi teal ise nokta zemine
   karışıp kayboluyordu. Seçiliyken yazı rengini alır. Satır içi stili
   ezmek için !important gerekli. */
.kenar a.secili .kenar-nokta{background:currentColor !important}

/* Katlanır bölüm grubu — kenar menüsü sürümü */
.kenar .yan-grup > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:11px 10px;border-radius:var(--r-m);color:var(--kenar-yazi);
  font-size:14.5px;font-weight:500;min-height:44px;
}
.kenar .yan-grup > summary::-webkit-details-marker{display:none}
.kenar .yan-grup > summary::after{
  content:"";width:7px;height:7px;margin-left:auto;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;margin-top:-3px;opacity:.7;
}
.kenar .yan-grup[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
@media (hover:hover){.kenar .yan-grup > summary:hover{background:var(--kenar-uzeri);color:var(--kenar-parlak)}}
.kenar .yan-adet{
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-s);
  background:var(--kenar-uzeri);color:var(--kenar-yazi);
}

/* Dar ekranda kenar bir çekmecedir. Alt sekme çubuğu kaldırılmadı:
   çekmece derinlik (ders ağacı), çubuk tek dokunuşluk hızlı erişim veriyor. */
@media (max-width:899px){
  .tepe-menu{display:flex}
  .kenar{
    position:fixed;left:0;top:0;bottom:0;z-index:120;
    width:min(86vw, 300px);flex-basis:auto;
    padding-top:calc(18px + env(safe-area-inset-top, 0px));
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:6px 0 24px rgba(0,0,0,.28);
  }
  .kenar.acik{transform:translateX(0)}
  .kenar-kapat{display:flex}
  /* Kapatma düğmesi ilk satırın üstüne binmesin. */
  .kenar > ul{margin-top:34px}
  .perde{position:fixed;inset:0;z-index:110;background:rgba(8,14,13,.55)}
  .perde[hidden]{display:none}
}
@media (min-width:900px){
  .perde{display:none}
}

/* ---------------- alt sekme çubuğu (mobil) ---------------- */
.tab-bar{display:none}
@media (max-width:860px){
  .tab-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    background:var(--yuzey);
    border-top:1px solid var(--cizgi-koyu);
    box-shadow:var(--golge-3);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    transition:transform .22s ease;
  }
  /* Okurken aşağı kaydırırken çekilir, yukarı kaydırırken geri gelir.
     Sabit çubuk metnin üstünü kapatıyordu; JS yoksa çubuk hep durur. */
  .tab-bar.tab-gizli{transform:translateY(100%)}
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 7px;text-decoration:none;color:var(--soluk);
    font-size:11px;font-weight:600;letter-spacing:-.01em;min-height:56px;
  }
  .tab svg{width:22px;height:22px;stroke-width:1.9}
  .tab.etkin{color:var(--vurgu-yazi)}
  .tab:active{background:var(--yuzey2)}
}
@media (prefers-reduced-motion:reduce){.tab-bar{transition:none}}

/* ---------------- bildirim ---------------- */
.uyari{
  padding:13px 16px;border-radius:var(--r-m);margin-top:14px;
  font-size:14.5px;line-height:1.5;
  border:1px solid var(--cizgi);background:var(--yuzey);box-shadow:var(--golge-1);
}
.uyari.basari{background:var(--yesil-ac);border-color:transparent;color:var(--yesil)}
.uyari.hata{background:var(--kirmizi-ac);border-color:transparent;color:var(--kirmizi)}
.uyari.bilgi{background:var(--sari-ac);border-color:transparent;color:var(--sari)}

/* ---------------- başlık bloğu ---------------- */
.baslik-blok{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.ustluk{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soluk);font-weight:700}
.ustluk a{color:inherit;text-decoration:none}
/* .aciklama'da genişlik sınırı yoktu değil, 68ch idi — 15 puntoda yaklaşık
   500px. Kabın kendisi 1100px olduğu için açıklama metni geniş ekranda
   yarıda kesilmiş gibi duruyordu. Ölçüyü kap veriyor: .kap zaten 1100px,
   yan menüli düzende sütun daha da dar. Buraya yeniden ch sınırı koymayın. */
.aciklama{color:var(--murekkep2);font-size:15px}

/* ---------------- kartlar ---------------- */
.izgara{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.izgara{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}}

.panel{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:18px;box-shadow:var(--golge-1);
}
@media (min-width:640px){.panel{padding:24px}}
.panel + .panel{margin-top:14px}
/* Izgarada boşluğu gap verir; kardeş kuralı ikinci karttan itibaren hücreyi aşağı itiyordu. */
.izgara > .panel + .panel{margin-top:0}

.ders-kart{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:16px 18px;display:flex;flex-direction:column;gap:7px;
  text-decoration:none;color:inherit;box-shadow:var(--golge-1);
  border-left:4px solid var(--vurgu);
  transition:transform .14s ease, box-shadow .14s ease;
}
.ders-kart:active{transform:scale(.985);box-shadow:var(--golge-2)}
@media (hover:hover){.ders-kart:hover{box-shadow:var(--golge-2);transform:translateY(-2px)}}
.ders-kart .kod{font-family:var(--bas);font-size:12.5px;font-weight:700;
  letter-spacing:.03em;color:var(--vurgu-yazi)}
.ders-kart .ad{font-family:var(--bas);font-size:18px;font-weight:600;line-height:1.25}
.ders-kart .meta{font-size:13px;color:var(--soluk);display:flex;flex-wrap:wrap;
  gap:5px 12px;align-items:center}
.ders-kart .ozet{font-size:13.5px;color:var(--murekkep2);line-height:1.5}

.rozet{
  display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;
  border-radius:var(--r-s);background:var(--yuzey2);color:var(--murekkep2);
}
.rozet.uzak{background:var(--vurgu-ac);color:var(--vurgu-koyu)}
.rozet.pasif{background:var(--kirmizi-ac);color:var(--kirmizi)}
.rozet.acik{background:var(--yesil-ac);color:var(--yesil)}

/* ---------------- form ---------------- */
.form-kart{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:22px 18px;max-width:460px;margin:0 auto;box-shadow:var(--golge-2);
}
@media (min-width:640px){.form-kart{padding:30px}}
.form-kart.genis{max-width:780px}

.alan{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.alan label{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
/* .ipucu uzun süre yalnızca .alan içinde tanımlıydı; tablo hücresinde ya da
   başlık yanında kullanılınca hiç küçülmüyor, gövde puntosunda kalıyordu.
   Temel kural artık genel, .alan içindeki ölçü korunuyor. */
.ipucu{font-size:12.5px;color:var(--soluk);line-height:1.45}
.alan .ipucu{font-size:12.5px}

/* `type` yazılmamış input da metin kutusudur; seçiciden düşünce Vaka, Evrak,
   Sunum Kartları ve Canlı Test formlarında kutular çıplak kalıyor, telefonda
   küçük punto yüzünden odakta sayfa yakınlaşıyordu. Tarih kutusu da aynı
   kuraldan geçer: Sunum Kartları, Evrak ve Politika Analizi'ndeki tarih
   alanları tarayıcının çıplak kutusunda kalıyordu. */
input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=url],input[type=file],input[type=search],select,textarea{
  font-family:inherit;font-size:16px;  /* iOS'ta odakta yakınlaşmayı önler */
  padding:12px 14px;border:1.5px solid var(--cizgi);border-radius:var(--r-m);
  background:var(--yuzey);color:var(--murekkep);width:100%;
  transition:border-color .15s, box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8495' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
  padding-right:38px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--vurgu);box-shadow:0 0 0 3.5px var(--vurgu-ac);
}
textarea{min-height:130px;resize:vertical;line-height:1.55}
input[type=checkbox]{width:19px;height:19px;accent-color:var(--vurgu);flex:0 0 auto}

/* display veren her gizli öğedeki tuzak: sınıf seçicisi tarayıcının
   [hidden] kuralından baskın. Bu satır olmazsa portal.js'in açtığı
   paylaşım düğmesi desteklemeyen tarayıcılarda da görünür kalırdı. */
.dugme[hidden]{display:none}
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--govde);font-size:15px;font-weight:600;
  padding:11px 20px;min-height:44px;
  border:1.5px solid var(--cizgi);border-radius:var(--r-s);
  background:var(--yuzey);color:var(--murekkep);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease, background .15s;
}
.dugme:active{transform:scale(.96)}
@media (hover:hover){.dugme:hover{background:var(--yuzey2)}}
.dugme.ana{background:var(--vurgu);color:var(--vurgu-metin);border-color:transparent}
@media (hover:hover){.dugme.ana:hover{background:var(--vurgu-koyu)}}
.dugme.tehlike{background:var(--kirmizi-ac);color:var(--kirmizi);border-color:transparent}
.dugme.kucuk{padding:7px 14px;min-height:36px;font-size:13.5px}
.dugme-sira{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ---------------- ders düzeni ---------------- */
/* Ders içi iki sütunlu düzen kaldırıldı: bölüm ağacı artık kalıcı kenar
   menüsünde duruyor, sayfa içinde ikinci bir menü basmak tekrardı. */
.ders-govde{display:block}

/* Ders içi yan menü (.yan / .yan-sar) kaldırıldı: bölüm ağacı artık kalıcı
   kenar menüsünde (.kenar) duruyor, sayfa içinde ikinci bir menü tekrardı. */

/* ---------------- metin gövdesi ---------------- */
.metin{font-size:16px;line-height:1.7}
.metin h2,.metin h3{margin:24px 0 10px}
.metin h2:first-child,.metin h3:first-child{margin-top:0}
.metin ul,.metin ol{padding-left:22px;margin:0 0 14px}
.metin li{margin-bottom:6px}
.metin table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
.metin th,.metin td{border:1px solid var(--cizgi);padding:10px 12px;text-align:left;vertical-align:top}
.metin th{background:var(--yuzey2);font-weight:600;width:34%}
.metin .not{font-size:13.5px;color:var(--soluk);font-style:italic}
.metin img{border-radius:var(--r-m)}

/* künye tablosu mobilde satır satır */
@media (max-width:560px){
  .metin table.kunye,
  .metin table.kunye tbody,
  .metin table.kunye tr{display:block;width:100%}
  .metin table.kunye th,.metin table.kunye td{display:block;width:100%;border:0;padding:0}
  .metin table.kunye tr{
    padding:11px 0;border-bottom:1px solid var(--cizgi);
  }
  .metin table.kunye tr:last-child{border-bottom:0}
  .metin table.kunye th{
    background:none;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--soluk);margin-bottom:2px;
  }
}

.sarmal{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------------- dosya listesi ---------------- */
.dosyalar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.dosyalar li{
  display:flex;align-items:center;gap:11px;padding:13px 14px;
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r-m);
  flex-wrap:wrap;
}
.dosyalar .tur{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-s);background:var(--vurgu-ac);
  color:var(--vurgu-yazi);flex:0 0 auto;
}
.dosyalar .ad{flex:1;min-width:140px;text-decoration:none;color:var(--murekkep);
  font-weight:600;font-size:15px;line-height:1.35}
.dosyalar .boyut{font-size:12.5px;color:var(--soluk);font-variant-numeric:tabular-nums}

/* =========================================================
   TABLOLAR — geniş ekranda tablo, dar ekranda kart
   Her <td> kendi başlığını data-label ile taşır.
   ========================================================= */
.tablo{width:100%;border-collapse:collapse;font-size:14.5px}
.tablo th,.tablo td{padding:11px 12px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--cizgi)}
.tablo thead th{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--soluk);
  background:var(--yuzey2);font-weight:700;white-space:nowrap;
}
.tablo thead th:first-child{border-top-left-radius:var(--r-s)}
.tablo thead th:last-child{border-top-right-radius:var(--r-s)}
.tablo tbody tr:last-child td{border-bottom:0}
@media (hover:hover){.tablo tbody tr:hover{background:var(--yuzey2)}}

@media (max-width:760px){
  .sarmal{overflow-x:visible}
  .tablo{display:block;font-size:15px}
  .tablo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tablo tbody{display:flex;flex-direction:column;gap:11px}
  .tablo tr{
    display:block;background:var(--yuzey);border:1px solid var(--cizgi);
    border-radius:var(--r-m);padding:13px 15px;box-shadow:var(--golge-1);
  }
  .tablo td{
    display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
    padding:7px 0;border-bottom:1px dashed var(--cizgi);text-align:right;
  }
  .tablo td:last-child{border-bottom:0;padding-bottom:0}
  .tablo td:first-child{padding-top:0}
  .tablo td::before{
    content:attr(data-label);
    flex:0 0 40%;text-align:left;
    font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--soluk);font-weight:700;padding-top:2px;
  }
  .tablo td[data-label=""]::before{display:none}
  .tablo td.sag{text-align:right}
  /* işlem hücresi: düğmeler alta, tam genişlik */
  .tablo td.islem{flex-direction:column;align-items:stretch;text-align:left;gap:8px;
    padding-top:11px;border-bottom:0}
  .tablo td.islem::before{flex:none;text-align:left;margin-bottom:2px}
  .tablo td.islem form{display:block !important}
  .tablo td.islem .dugme{width:100%}
  .tablo td.islem-sira{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
  .tablo td.islem-sira .dugme{width:auto;flex:1 1 auto}
  .tablo td input[type=number],.tablo td input[type=text],.tablo td input:not([type]),.tablo td select{max-width:180px}
}

/* ---------------- boş durum ---------------- */
.bos{
  padding:32px 20px;text-align:center;color:var(--soluk);font-size:15px;
  background:var(--yuzey);border:1.5px dashed var(--cizgi-koyu);border-radius:var(--r-l);
}

/* ---------------- anket ---------------- */
.secenekler{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.secenek{
  display:flex;align-items:center;gap:13px;padding:15px 16px;
  border:1.5px solid var(--cizgi);border-radius:var(--r-m);background:var(--yuzey);
  cursor:pointer;font-size:16px;width:100%;text-align:left;
  font-family:inherit;color:var(--murekkep);position:relative;overflow:hidden;
  min-height:56px;transition:transform .12s, border-color .15s;
}
.secenek:active{transform:scale(.985)}
@media (hover:hover){.secenek:hover{border-color:var(--vurgu)}}
.secenek .dolgu{position:absolute;inset:0 auto 0 0;background:var(--vurgu-ac);
  width:0;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.secenek > *{position:relative}
.secenek .harf{
  flex:0 0 auto;width:30px;height:30px;border-radius:4px;background:var(--yuzey2);
  display:grid;place-items:center;font-weight:700;font-size:14px;font-family:var(--bas);
}
.secenek .yazi{flex:1;line-height:1.35}
.secenek .oran{font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--bas);
  white-space:nowrap}
.secenek.secildi{border-color:var(--yesil);background:var(--yesil-ac)}
/* Anket perdede: seçenekler ekranla büyür, sınıf arkadan okuyabilsin. */
.anket-perde{gap:14px}
.anket-perde .secenek{font-size:clamp(16px,1.8vw,28px);padding-block:14px}
.anket-perde .secenek .harf{font-size:clamp(14px,1.4vw,22px);width:clamp(30px,2.6vw,42px);height:clamp(30px,2.6vw,42px)}
.anket-perde .secenek .oran{font-size:clamp(16px,1.8vw,28px)}
.secenek.secildi .harf{background:var(--yesil);color:#fff}
/* Birlikte görünüm: seçilen sorular yan yana kutular. Perdede dört soru tek
   ekranda dursun diye punto tek soruluk perdeden küçüktür. */
.anket-coklu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;margin:6px 0 14px}
.anket-kutu{border:1px solid var(--cizgi);border-radius:var(--r-m);padding:12px 14px;background:var(--yuzey);min-width:0}
.anket-kutu h4{margin:0;font-size:16px;line-height:1.35}
.anket-kutu .secenekler{gap:6px;margin:10px 0 8px}
.anket-kutu .secenek{padding-block:8px;min-height:44px;font-size:14.5px;cursor:default}
.anket-kutu .aciklama{margin:0}
/* Perdede içerik alanı genişler: 1100 piksellik kapta dört soru iki sütuna
   düşüyor ve geniş perdede bile ekran kaydırılıyordu. Geniş ekranda dört soru
   yan yana durur. */
.govde-alan:has(.anket-coklu.anket-perde){max-width:none}
.anket-coklu.anket-perde{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.anket-coklu.anket-perde .anket-kutu h4{font-size:clamp(15px,1.15vw,22px)}
.anket-coklu.anket-perde .secenek{font-size:clamp(14px,1.05vw,20px);padding-block:7px}
.anket-coklu.anket-perde .secenek .harf{width:clamp(26px,1.9vw,34px);height:clamp(26px,1.9vw,34px);font-size:clamp(13px,1vw,18px)}
.anket-coklu.anket-perde .secenek .oran{font-size:clamp(15px,1.2vw,22px)}
.anket-ogrenci{scroll-margin-top:70px}

/* ---------------- alt bilgi ---------------- */
.alt{border-top:1px solid var(--cizgi);background:var(--yuzey);margin-top:32px}
.alt-ic{width:100%;max-width:1100px;margin:0 auto;padding:18px 16px;display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;color:var(--soluk);line-height:1.5}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

@media print{
  .ust,.tepe,.kenar,.perde,.tab-bar,.alt,.dugme,.dugme-sira{display:none !important}
  body{background:#fff;padding:0}
  .panel{box-shadow:none;border:1px solid #ccc}
}


/* ---------------- kullanıcı çipi ve profil ---------------- */
.kisi-cip{
  display:inline-flex !important;align-items:center;gap:9px;
  padding:5px 14px 5px 5px;border-radius:var(--r-tam);
  background:var(--yuzey2);color:var(--murekkep) !important;
  text-decoration:none;font-weight:600;font-size:14px;min-height:40px;
  max-width:190px;
}
.kisi-cip:active{transform:scale(.97)}
@media (hover:hover){.kisi-cip:hover{background:var(--yuzey3)}}
.bas-harf{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-tam);
  background:var(--vurgu);color:var(--vurgu-metin);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.kisi-ad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){
  .kisi-cip{padding:5px;max-width:none}
  .kisi-ad{display:none}
}

.profil-ust{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.bas-harf.buyuk{width:58px;height:58px;font-size:21px}
.profil-ust h2{margin:0 0 2px}

.bilgi-listesi{
  display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;
  border-top:1px solid var(--cizgi);padding-top:16px;font-size:15px;
}
.bilgi-listesi dt{color:var(--soluk);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;padding-top:3px}
.bilgi-listesi dd{margin:0}
@media (max-width:520px){
  .bilgi-listesi{grid-template-columns:1fr;gap:3px}
  .bilgi-listesi dd{margin-bottom:11px}
}

/* ---------------- duyuru gövdesi (zengin metin) ---------------- */
.duyuru-govde{display:block;margin-top:4px}
.duyuru-govde p{margin:0 0 6px}
.duyuru-govde p:last-child{margin-bottom:0}
.duyuru-govde ul,.duyuru-govde ol{margin:4px 0 6px;padding-left:20px}
.duyuru-govde a{color:inherit;text-decoration:underline}

/* ---------------- Jodit editörü ile uyum ---------------- */
.jodit-container{border-radius:var(--r-m) !important;border-color:var(--cizgi) !important}
.jodit-container:not(.jodit_inline) .jodit-workplace{font-family:var(--govde)}
.jodit-wysiwyg{font-family:var(--govde);font-size:15.5px;line-height:1.65}
.jodit-wysiwyg h2,.jodit-wysiwyg h3,.jodit-wysiwyg h4{font-family:var(--bas)}
.jodit-status-bar{border-bottom-left-radius:var(--r-m);border-bottom-right-radius:var(--r-m)}
/* editör alanı formun genişliğini aşmasın */
.alan .jodit-container{max-width:100%}

/* =========================================================
   Tablo içi bağlantılar
   Bunlar metin içi bağlantı değil, arayüz ögesidir: satırın adıdır.
   O yüzden mavi-altı çizili görünmezler; üzerine gelince renklenir.
   ========================================================= */
.tablo a{
  color:var(--murekkep);
  text-decoration:none;
  font-weight:600;
  border-bottom:1.5px solid transparent;
  padding-bottom:1px;
  transition:color .12s ease, border-color .12s ease;
}
@media (hover:hover){
  .tablo a:hover{
    color:var(--vurgu-yazi);
    border-bottom-color:color-mix(in srgb, var(--vurgu) 38%, transparent);
  }
}
.tablo a:active{color:var(--vurgu-koyu)}
.tablo a:focus-visible{border-bottom-color:transparent}

/* Dosya ve kaynak listeleri de aynı mantıkta */
.dosyalar .ad{border-bottom:1.5px solid transparent;transition:color .12s, border-color .12s}
@media (hover:hover){
  .dosyalar .ad:hover{color:var(--vurgu-yazi);border-bottom-color:color-mix(in srgb, var(--vurgu) 38%, transparent)}
}

/* ---------------- bölüm ağacı hiyerarşisi ---------------- */
.tablo tr.alt-satir td:nth-child(2){padding-left:28px;position:relative}
.tablo tr.alt-satir td:nth-child(2)::before{
  content:"";position:absolute;left:12px;top:50%;
  width:9px;height:1.5px;background:var(--cizgi-koyu);
}
.tablo tr.alt-satir a{font-weight:500;color:var(--murekkep2)}
@media (hover:hover){.tablo tr.alt-satir a:hover{color:var(--vurgu-yazi)}}
.tablo tr.alt-satir input[type=number]{opacity:.65}
.tablo tr.alt-satir:hover input[type=number]{opacity:1}
@media (max-width:760px){
  /* kart görünümünde girinti yerine kenar şeridi */
  .tablo tr.alt-satir{border-left:3px solid var(--cizgi-koyu);padding-left:12px}
  .tablo tr.alt-satir td:nth-child(2){padding-left:0}
  .tablo tr.alt-satir td:nth-child(2)::before{display:none}
}

/* boş içerik rozeti biraz daha sessiz olsun */
.rozet.bos-rozet{background:transparent;color:var(--soluk);border:1px solid var(--cizgi)}

/* =========================================================
   Konum çizgisi (breadcrumb)
   ========================================================= */
.kirinti{
  font-size:13px;line-height:1.4;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin-bottom:2px;
}
.kirinti::-webkit-scrollbar{display:none}
.kirinti ol{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:0;white-space:nowrap;
}
.kirinti li{display:flex;align-items:center;color:var(--soluk);font-weight:600}
.kirinti li + li::before{
  content:"";flex:0 0 auto;
  width:6px;height:6px;margin:0 9px;
  border-right:1.5px solid var(--cizgi-koyu);
  border-bottom:1.5px solid var(--cizgi-koyu);
  transform:rotate(-45deg);
}
.kirinti a{
  color:var(--soluk);text-decoration:none;
  padding:3px 0;border-bottom:1.5px solid transparent;
  transition:color .12s ease, border-color .12s ease;
}
@media (hover:hover){
  .kirinti a:hover{color:var(--vurgu-yazi);border-bottom-color:color-mix(in srgb, var(--vurgu) 38%, transparent)}
}
.kirinti a:active{color:var(--vurgu-koyu)}
/* Son parça KIRPILMAZ. Bir ara 46ch (dar ekranda 22ch) sınırı vardı ve
   "LOJ-3233 · Lojistikte İns…" gibi yarıda kesiyordu; ders adını okumak
   konum çizgisinin tek işi. Uzunsa alt satıra sarar. */
.kirinti li[aria-current="page"]{color:var(--murekkep2)}
@media (max-width:560px){
  /* Dar ekranda tek satırda tutmak yerine sarmasına izin ver. */
  .kirinti{white-space:normal}
  .kirinti ol{flex-wrap:wrap;white-space:normal}
  .kirinti li[aria-current="page"]{white-space:normal}
}

/* Dar ekranda alt bilgi gizlenir: alt sekme çubuğu zaten sayfanın
   kapanışını yapıyor, metin sadece yer kaplıyordu. */
@media (max-width:860px){
  .alt{display:none}
}

/* =========================================================
   Canlı Vaka modülü
   ========================================================= */
.atla-gizle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.vaka-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.vaka-ust h3{margin:0}
.vaka-rol{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--vurgu);
  background:var(--vurgu-ac);color:var(--vurgu-koyu);border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:14.5px}

.geri-sayim{font-family:var(--bas);font-variant-numeric:tabular-nums;
  font-size:28px;font-weight:700;line-height:1;color:var(--vurgu-yazi);
  padding:6px 12px;background:var(--vurgu-ac);border-radius:var(--r-s)}
.geri-sayim.az-kaldi{color:var(--kirmizi);background:var(--kirmizi-ac)}
.ipucu.az-kaldi{color:var(--kirmizi);font-weight:600}

.oy-liste{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px}
/* Satırın TAMAMI oy düğmesidir. Önce yalnızca kenardaki küçük ▲ kutusu
   tıklanabiliyordu; derste nereye basılacağı anlaşılmıyor, yanıt metnine
   dokunanlar bir şey olmadığını sanıyordu. */
.oy-satir{padding:0;border:0;background:none}
.oy-form{margin:0}
.oy-kart{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m);
  padding:12px;color:inherit;font:inherit;cursor:pointer;
  transition:border-color .12s, background-color .12s}
.oy-kart.durgun{cursor:default}
/* İstek sürerken düğme kapalıdır (çift gönderimi önler) ama SOLDURULMAZ:
   az önce dokunulan satırın sönmesi "oy gitmedi" gibi okunuyor. */
.oy-kart[disabled]{cursor:default;opacity:1;color:inherit}
.oy-satir.benimki .oy-kart{border-color:var(--vurgu);background:var(--vurgu-ac)}
.oy-satir.mutabakat .oy-kart{border-color:var(--yesil);border-left-width:3px}
/* Oy verilmiş satır kenarlıkla DEĞİL, dolu bir durum şeridiyle anlaşılır;
   ince kenarlık derste perdeden ve telefonda seçilmiyordu. */
.oy-kart.verildi{border-color:var(--vurgu);background:var(--vurgu-ac)}
.oy-kart.verildi .oy-durum{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-metin)}
@media (hover:hover){.oy-kart:not(.durgun):hover{border-color:var(--vurgu)}}
.oy-kart:not(.durgun):active{background:var(--vurgu-ac)}
.oy-kart:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

.oy-govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.oy-govde p,.oy-metin{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.oy-metin{display:block;white-space:pre-line}
.oy-etiketler{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Durum kutusu: sayı ve ne olduğunu söyleyen yazı bir arada. Yalnız ▲ ile
   oyun verilip verilmediği anlaşılmıyordu. */
.oy-durum{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-width:74px;min-height:48px;padding:6px 8px;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-s);
  color:var(--murekkep2);line-height:1.15}
.oy-sayi{font-size:17px;font-weight:700}
.oy-yazi{font-size:11.5px;text-align:center}
.oy-kisi{font-weight:700;font-size:14px;color:var(--murekkep)}

/* Yanıt gönderilince oylama listesine iniliyor; yapışkan üst bar başlığı
   kapatmasın diye öğenin kendi üst boşluğu var. */
#cv-yanitlar{scroll-margin-top:74px}

/* Perde kipi: sınıfın uzaktan okuyacağı ölçü. .yansit'teki tuzak burada da
   geçerli — yatay `padding` KISAYOLU .panel'in yan boşluğunu siler ve
   satırlar kartın dışına taşar, o yüzden `padding-block`. */
.cv-perde{padding-block:10px 22px}
.cv-perde .vaka-ust h3{font-size:clamp(22px,2.6vw,38px)}
.cv-perde-metin{font-size:clamp(17px,1.9vw,28px);line-height:1.45;
  margin:14px 0 4px;white-space:pre-line}
.cv-perde .aciklama{font-size:clamp(14px,1.2vw,19px)}
.cv-perde .oy-metin{font-size:clamp(16px,1.5vw,24px)}
.cv-perde .oy-kisi{font-size:clamp(15px,1.4vw,22px)}
.cv-perde .oy-sayi{font-size:clamp(18px,1.8vw,28px)}
.cv-perde .oy-durum{min-width:92px}
.rozet.uyari-rozet{background:var(--sari-ac);color:var(--sari);cursor:help}

/* Yönetim sonuç panosu. Yanıtlar önce tek sütunda alt alta diziliyordu; otuz
   kişilik sınıfta masaüstünde 2 900, telefonda 4 800 piksel ediyordu ve rol
   rol ne yazıldığı ancak kaydırarak toplanabiliyordu. Artık özet sayılar,
   rol kutuları ve süzgeçli ızgara. */
#cv-sonuc{scroll-margin-top:74px}
.cv-onizle-metin{margin:6px 0 12px;padding:12px 14px;border-left:3px solid var(--vurgu);background:var(--yuzey2);border-radius:var(--r-s);font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.cv-onizle-roller{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.cv-sayilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin:4px 0 14px}
.cv-sayilar .masa-sayi{padding:10px 12px;box-shadow:none}
.cv-sayilar .masa-sayi strong{font-size:24px}
.cv-sayilar .masa-sayi small{font-size:15px;color:var(--soluk);font-weight:400}
.cv-sayilar .masa-sayi span{font-size:13px}
.cv-sayilar a.masa-sayi:hover{border-color:var(--vurgu)}
.cv-gorunum{margin:16px 0 14px}

.cv-yanitlar{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cv-izgara{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.cv-yanit{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m)}
.cv-yanit.mutabakat{border-color:var(--yesil);border-left-width:3px}
.cv-yanit-ust{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cv-oy{margin-left:auto;font-size:13px;color:var(--soluk);white-space:nowrap}
.cv-oy strong{font-size:17px;color:var(--murekkep)}
.cv-yanit-metin{margin:0;font-size:15px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
/* Oyun eşiğe oranı: dolunca yanıt mutabakattadır. Sayı tek başına "eşiğe
   ne kadar kaldı" sorusunu yanıtlamıyordu. */
.cv-cubuk{display:block;height:4px;margin-top:auto;border-radius:2px;background:var(--yuzey2);overflow:hidden}
.cv-cubuk > span{display:block;height:100%;background:var(--vurgu)}
.cv-yanit.mutabakat .cv-cubuk > span{background:var(--yesil)}

.cv-roller{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.cv-rol{display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-m)}
.cv-rol-bas{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.cv-rol-bas h4{margin:0;font-size:16px;color:var(--murekkep)}
.cv-rol-bas span{font-size:13px;color:var(--soluk)}
.cv-rol-bos{margin:0;font-size:14px;color:var(--soluk)}
.cv-rol-tumu{align-self:flex-start;display:inline-flex;align-items:center;min-height:36px;
  font-size:14px;font-weight:600;color:var(--vurgu-yazi)}
.cv-devam{margin:12px 0 0}
.cv-devam a{font-weight:600;color:var(--vurgu-yazi)}

.cv-perde .cv-izgara{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:14px}
.cv-perde .cv-yanit-metin{font-size:clamp(16px,1.5vw,24px)}
.cv-perde .cv-oy strong{font-size:clamp(18px,1.8vw,28px)}
.cv-perde .cv-devam{font-size:clamp(14px,1.2vw,19px)}
@media (max-width:600px){
  .cv-izgara,.cv-roller{grid-template-columns:1fr}
  .cv-rol{padding:10px}
  .cv-sayilar{grid-template-columns:repeat(3,1fr);gap:6px}
  .cv-sayilar .masa-sayi{padding:8px 10px}
  .cv-sayilar .masa-sayi strong{font-size:20px}
  .cv-sayilar .masa-sayi small{font-size:13px}
  .cv-sayilar .masa-sayi span{font-size:12px;line-height:1.25}
}

/* Katlanır bölüm grubu — yalnızca kenar menüsünde kullanılır; biçimi
   .kenar .yan-grup kurallarında (gerekçe orada). Rozet ortak kalıyor. */
.yan-adet{
  font-size:11px;font-weight:700;color:var(--soluk);background:var(--yuzey2);
  padding:1px 7px;border-radius:var(--r-s);
}

/* =========================================================
   Ders panosu — genel bakış
   Genel bakış eskiden yan menü + künye dökümüydü. Künyenin kendi sayfası
   var ve orada ders kaydından üretiliyor; burada tekrarı hem uzatıyor hem
   eskiyordu. Yerine dokunmatik kısayollar geldi.
   ========================================================= */
.pano-baslik{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.pano-baslik h2{margin:0}

.hafta-izgara{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
}
.hafta-izgara a{
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:12px 14px;min-height:76px;text-decoration:none;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-m);
  transition:border-color .15s,background-color .15s;
}
.hafta-izgara a:hover{background:var(--vurgu-ac);border-color:var(--vurgu)}
.hafta-no{
  font-family:var(--bas);font-weight:700;font-size:20px;line-height:1;
  color:var(--vurgu-yazi);font-variant-numeric:tabular-nums;
}
.hafta-ad{
  font-size:12.5px;line-height:1.35;color:var(--murekkep2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.kisayol-izgara{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
}
.kisayol-izgara a{
  display:flex;flex-direction:column;gap:6px;height:100%;
  padding:16px;min-height:88px;text-decoration:none;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-m);
  transition:border-color .15s,background-color .15s;
}
.kisayol-izgara a:hover{background:var(--vurgu-ac);border-color:var(--vurgu)}
.kisayol-izgara svg{width:22px;height:22px;color:var(--vurgu-yazi)}
.kisayol-ad{font-weight:600;font-size:15px;color:var(--murekkep)}
.kisayol-alt{font-size:12.5px;line-height:1.4;color:var(--soluk)}

@media (max-width:520px){
  .hafta-izgara{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .kisayol-izgara{grid-template-columns:1fr}
}

/* =========================================================
   Ders panosu — genel bakış
   Genel bakış eskiden yan menü + künye dökümüydü. Künyenin kendi sayfası
   var ve orada ders kaydından üretiliyor; burada tekrarı hem uzatıyor hem
   eskiyordu. Yerine dokunmatik kısayollar geldi.
   ========================================================= */
.pano-baslik{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.pano-baslik h2{margin:0}

.hafta-izgara{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
}
.hafta-izgara a{
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:12px 14px;min-height:76px;text-decoration:none;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-m);
  transition:border-color .15s,background-color .15s;
}
.hafta-izgara a:hover{background:var(--vurgu-ac);border-color:var(--vurgu)}
.hafta-no{
  font-family:var(--bas);font-weight:700;font-size:20px;line-height:1;
  color:var(--vurgu-yazi);font-variant-numeric:tabular-nums;
}
.hafta-ad{
  font-size:12.5px;line-height:1.35;color:var(--murekkep2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.kisayol-izgara{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
}
.kisayol-izgara a{
  display:flex;flex-direction:column;gap:6px;height:100%;
  padding:16px;min-height:88px;text-decoration:none;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-m);
  transition:border-color .15s,background-color .15s;
}
.kisayol-izgara a:hover{background:var(--vurgu-ac);border-color:var(--vurgu)}
.kisayol-izgara svg{width:22px;height:22px;color:var(--vurgu-yazi)}
.kisayol-ad{font-weight:600;font-size:15px;color:var(--murekkep)}
.kisayol-alt{font-size:12.5px;line-height:1.4;color:var(--soluk)}

@media (max-width:520px){
  .hafta-izgara{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .kisayol-izgara{grid-template-columns:1fr}
}

/* Bölümler arası gezinme. Kaydırma hareketi bunun kısayolu; düğmeler
   görünür kalır çünkü hareket keşfedilebilir değil ve masaüstünde yok. */
.bolum-gezinme{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
}
.bolum-gez{
  display:flex;flex-direction:column;gap:3px;min-height:60px;
  padding:12px 16px;text-decoration:none;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m);
  box-shadow:var(--golge-1);transition:border-color .15s,background-color .15s;
}
.bolum-gez:hover{background:var(--vurgu-ac);border-color:var(--vurgu)}
.bolum-gez.sonraki{text-align:right;grid-column:2}
.bolum-gez-yon{font-size:12.5px;font-weight:700;color:var(--vurgu-yazi)}
.bolum-gez-ad{
  font-size:14px;color:var(--murekkep2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Dar ekranda da yan yana kalır; alt alta düşünce iki ayrı kart gibi
   duruyor ve sayfayı uzatıyordu. Sığması için kutu ve punto küçülür. */
@media (max-width:520px){
  .bolum-gezinme{gap:8px}
  .bolum-gez{padding:10px 12px;min-height:56px}
  .bolum-gez-yon{font-size:12px}
  .bolum-gez-ad{font-size:13px;-webkit-line-clamp:2}
}

/* Tanı okuması — yalnızca adrese ?tani=1 eklenince basılır.
   iOS bu geliştirme ortamında taklit edilemiyor; hareket cihazda ölçülüyor. */
.tani-kutu{
  /* alt sekme çubuğunun üstünde dursun, onu kapatmasın */
  position:fixed;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:60;margin:0;padding:8px 10px;border-radius:var(--r-s);
  background:rgba(0,0,0,.82);color:#fff;font-size:12px;line-height:1.35;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;pointer-events:none;
}

/* Dosya önizleme — dosya-goster.php.
   Dosyalar artık portal kabuğunun içinde açılır; ham akışa gidilince
   uygulama kipinde geri dönülemiyordu (gerekçe dosya-goster.php'de). */
.dosya-onizleme{padding:0;overflow:hidden}
.dosya-onizleme img{display:block;width:100%;height:auto}
.dosya-onizleme video{display:block;width:100%;max-height:70vh;background:#000}
.dosya-onizleme audio{display:block;width:100%;padding:16px;box-sizing:border-box}
/* PDF çerçevesi: masaüstünde okunur bir yükseklik, dar ekranda daha kısa.
   iOS bunu açmayabilir; o durumda içindeki not görünür ve düğmeler zaten
   sayfanın üstünde duruyor. */
.dosya-pdf{display:block;width:100%;height:min(78vh, 900px);border:0}
.dosya-pdf .bos{margin:16px}
/* Metin önizlemesi (txt, csv): satırlar sarmaz, yatay kayar — csv sütunları
   bozulmasın. Kutu sayfayı uzatmasın diye yükseklik sınırlı. */
.dosya-metin{
  margin:0;max-height:60vh;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.55;white-space:pre;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:640px){
  .dosya-pdf{height:60vh}
}

/* Ana ekrana ekleme kartı — giris.php ve index.php üstünde.
   Yalnızca mobilde, uygulama olarak açılmamışken ve kapatılmamışsa
   görünür; kararı portal.js verir (gerekçe orada). Rozetlerden yalnızca
   cihazın yazılımına uyanı açılır. */
.kurulum{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(160deg, var(--vurgu-ac), var(--yuzey) 70%);
  border:1px solid var(--cizgi);border-radius:var(--r-l);
  padding:18px;margin-bottom:18px;box-shadow:var(--golge-1);
}
@media (min-width:720px){
  .kurulum{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px}
}
/* Sınıf seçicisi tarayıcının [hidden] kuralından baskın; bu satır olmazsa
   kart gizli basılmasına rağmen herkese görünür. */
.kurulum[hidden]{display:none}
.kurulum-metin h3{font-size:17px;margin-bottom:4px}
.kurulum-metin p{font-size:14px;color:var(--murekkep2);margin:0;line-height:1.5;padding-right:26px}

.rozet-sira{display:flex;gap:10px;flex-wrap:wrap}
.kur-rozet{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 16px 9px 13px;min-height:52px;
  background:var(--murekkep);color:var(--kagit);
  border:0;border-radius:var(--r-m);cursor:pointer;
  font-family:var(--govde);text-align:left;
  transition:transform .12s ease, opacity .15s;
}
.kur-rozet[hidden]{display:none}
.kur-rozet:active{transform:scale(.96)}
@media (hover:hover){.kur-rozet:hover{opacity:.88}}
.kur-rozet svg{width:24px;height:24px;flex:0 0 auto}
.rozet-yazi{display:flex;flex-direction:column;line-height:1.2}
.rozet-yazi .kucuk{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.75;font-weight:600}
.rozet-yazi .buyuk{font-family:var(--bas);font-size:15px;font-weight:600;letter-spacing:-.01em}

/* Kapatma: kart bir daha açılmaz. Dokunma hedefi 44 px, görsel olarak küçük. */
.kurulum-kapat{
  position:absolute;top:4px;right:4px;
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--soluk);
}
.kurulum-kapat svg{width:15px;height:15px}
@media (hover:hover){.kurulum-kapat:hover{color:var(--murekkep)}}

/* yönerge penceresi */
.yonerge{
  border:0;border-radius:var(--r-l);padding:22px;max-width:420px;width:calc(100% - 32px);
  background:var(--yuzey);color:var(--murekkep);box-shadow:var(--golge-2);
}
.yonerge::backdrop{background:rgba(10,12,16,.55);backdrop-filter:blur(3px)}
.yonerge h3{margin-bottom:12px}
.yonerge ol{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.5}
.yonerge ol[hidden]{display:none}
.yonerge .ipucu{font-size:13px;color:var(--soluk)}
.yonerge p.ipucu{margin:0}

/* Kayıtlı ders yokken gösterilen tek iş. Ekranı boş ızgarayla doldurmak
   yerine ortalanmış küçük bir blok: ne olduğu, niçin ve tek düğme. */
.giris-bos{text-align:center;padding:34px 22px}
.giris-bos svg{width:40px;height:40px;color:var(--soluk);margin-bottom:10px}
.giris-bos-ad{font-family:var(--bas);font-weight:700;font-size:19px;color:var(--murekkep);margin:0 0 6px}
.giris-bos .aciklama{margin:0 auto 18px;max-width:46ch}

/* Haftalar katlanır durur: ders ekranı açılır açılmaz 14 kutuluk bir duvarla
   karşılaşmak kullanışlı değildi. Önce ne yapabileceği, sonra istenirse
   içerik. Özet satırı kendisi bir dokunma hedefi (≥44 px). */
.hafta-katlar > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;min-height:44px;
  font-weight:600;font-size:17px;color:var(--murekkep);
}
.hafta-katlar > summary::-webkit-details-marker{display:none}
.hafta-katlar > summary::after{
  content:'';width:9px;height:9px;flex:none;
  border-right:2px solid var(--soluk);border-bottom:2px solid var(--soluk);
  transform:rotate(45deg);margin-right:4px;transition:transform .2s;
}
.hafta-katlar[open] > summary::after{transform:rotate(225deg);margin-top:5px}
.hafta-katlar-ad{font-family:var(--bas)}
/* Adet, başlığın yanında dursun; space-between onu ortaya atıyordu. */
.hafta-katlar > summary .ipucu{margin-right:auto}
.hafta-katlar[open] > summary{margin-bottom:14px}
/* Haftalar artık "Ders içeriği" panelinin içinde, kutuların altında duruyor;
   ince bir çizgi olmadan listeye yapışık görünüyordu. */
.kisayol-izgara + .hafta-katlar{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--cizgi);
}

/* =========================================================
   Yansıtma kipi — tur sunumu perdede
   Soru salonun arkasından okunmalı, bu yüzden punto ekranla birlikte büyür.
   Sonuç tablosu bu kipte HİÇ basılmaz: perdede dururken sıradaki soruları
   da göstermiş olurdu.
   ========================================================= */
.yansit{text-align:center;padding-block:10px 24px}
.yansit .yansit-ad{
  font-family:var(--bas);font-weight:700;color:var(--murekkep);
  font-size:clamp(26px,4.2vw,52px);line-height:1.15;margin:0 0 4px;
}
.yansit .yansit-no{font-size:clamp(13px,1.2vw,18px);color:var(--soluk);font-variant-numeric:tabular-nums}
.yansit .yansit-soru{
  font-size:clamp(30px,5.5vw,68px);line-height:1.25;color:var(--murekkep);
  margin:28px auto;max-width:22ch;font-weight:600;
}
.yansit .yansit-cevap{
  font-size:clamp(22px,3.6vw,44px);line-height:1.3;color:var(--vurgu-yazi);
  margin:0 auto 24px;max-width:28ch;
}
.yansit details > summary{
  display:inline-block;cursor:pointer;list-style:none;
  padding:12px 26px;border-radius:var(--r-s);
  border:1px solid var(--vurgu);color:var(--vurgu-yazi);
  font-size:clamp(15px,1.6vw,20px);font-weight:600;min-height:44px;
}
.yansit details[open] > summary{display:none}
.yansit .dugme{font-size:clamp(15px,1.7vw,22px);padding:14px 30px}
.yansit .dugme-sira{justify-content:center;gap:12px;flex-wrap:wrap}
.yansit .yansit-ilerleme{
  font-size:clamp(12px,1.1vw,16px);color:var(--soluk);margin-top:18px;
  font-variant-numeric:tabular-nums;
}

/* Tur sonu özeti. Yansıtma kipinde punto .yansit kurallarıyla büyür. */
.ozet-oran{
  font-family:var(--bas);font-weight:700;color:var(--vurgu-yazi);
  font-size:44px;line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums;
}
.yansit .ozet-oran{font-size:clamp(56px,10vw,120px)}
.ozet-takilan{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ozet-takilan li{
  background:var(--yuzey2);border-radius:var(--r-s);padding:10px 14px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;
}
.ozet-takilan .ozet-cevap{color:var(--soluk);font-size:14.5px}
.yansit .ozet-takilan li{font-size:clamp(17px,2.2vw,28px)}
.yansit .ozet-takilan .ozet-cevap{font-size:clamp(14px,1.5vw,20px)}
.ozet-ogrenci{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 18px;
}
.ozet-ogrenci li{
  display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--cizgi);padding:5px 0;font-size:14.5px;
}
.yansit .ozet-ogrenci{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:900px;margin-inline:auto}
.yansit .ozet-ogrenci li{font-size:clamp(15px,1.7vw,22px)}

/* =========================================================
   Kart destesi — çalışma kartları
   Cevap kartın ARKASINDA durur, yanındaki hücrede değil: öğrenci
   çevirmeden önce hatırlamayı denemek zorunda kalsın. JS yoksa sunucunun
   bastığı düz liste görünür, cevaplar da okunur — işlev kaybolmaz.
   ========================================================= */
.deste{perspective:1200px;margin:18px 0}
.kart{
  position:relative;width:100%;min-height:220px;
  transform-style:preserve-3d;transition:transform .55s;
  cursor:pointer;border:0;padding:0;background:none;
  font:inherit;color:inherit;text-align:inherit;display:block;
}
.kart.cevrik{transform:rotateY(180deg)}
.kart-yuz{
  position:absolute;inset:0;backface-visibility:hidden;
  display:grid;place-items:center;gap:10px;padding:28px 22px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m);
  box-shadow:var(--golge-2);text-align:center;
}
.kart-on{font-size:24px;font-weight:600;color:var(--murekkep)}
.kart-arka{transform:rotateY(180deg);font-size:19px;color:var(--vurgu-yazi);line-height:1.5}
.kart-etiket{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soluk);font-weight:700;
}
.deste-gezinme{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;
}
.deste-sayac{font-variant-numeric:tabular-nums;color:var(--soluk);font-size:14px}
.deste-ipucu{font-size:12.5px;color:var(--soluk);text-align:center;margin-top:10px}
.deste-liste{margin:0;padding-left:20px}
.deste-liste li{margin-bottom:10px}
.deste-liste .deste-cevap{display:block;color:var(--soluk);font-size:14.5px}
@media (prefers-reduced-motion:reduce){
  /* Dönme hareketi rahatsız edenler için: kart çevrilir ama animasyon yok. */
  .kart{transition:none}
}

/* =========================================================
   Çek-yenile göstergesi (ana ekran kısayolu)
   ========================================================= */
/* Kısayolda iOS'un webview yaylanması çekme hareketini yutuyordu; sınıfı
   portal.js yalnızca ana ekran kısayolunda ekler. */
html.kisayol, html.kisayol body{overscroll-behavior-y:contain}

.cek-yenile{
  position:fixed;top:0;left:50%;z-index:70;
  width:36px;height:36px;margin-top:-44px;
  display:grid;place-items:center;opacity:0;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-tam);
  box-shadow:var(--golge-2);transform:translateX(-50%);
  transition:opacity .15s;pointer-events:none;
}
.cek-ok{
  width:9px;height:9px;border-left:2px solid var(--soluk);border-top:2px solid var(--soluk);
  transform:rotate(45deg);margin-top:2px;transition:transform .2s;
}
.cek-yenile.hazir{border-color:var(--vurgu)}
.cek-yenile.hazir .cek-ok{border-color:var(--vurgu);transform:rotate(225deg);margin-top:-2px}
.cek-yenile.donuyor .cek-ok{
  width:14px;height:14px;margin:0;border:2px solid var(--cizgi);
  border-top-color:var(--vurgu);border-radius:50%;transform:none;
  animation:cek-don .7s linear infinite;
}
@keyframes cek-don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .cek-yenile.donuyor .cek-ok{animation:none}
}

/* ===== Evrak Atölyesi ================================================== */
/* Öğrenci ekranı düz sekiz kutuluk bir yığındı: ne yapılacağı tek satırlık
   bir ipucunda duruyor, alanların çoğunda hiç açıklama yoktu ve öğrenci
   ekrana bakıp ne isteneceğini anlamıyordu. Üç parça eklendi: adımlar,
   kaynak paneli ve belgenin gerçek parçalarına göre alan grupları. */

/* Adımlar — "ne yapacaksınız" numaralı okunur. */
.ev-adim{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.ev-adim li{font-size:15px;line-height:1.5;color:var(--murekkep2)}

/* Kaynak paneli: forma DOLDURULMAYAN ham malzeme. Belgeden görünüşçe de
   ayrılmalı — gri alıntı bloğu, kenarında şerit. Aynı şey form alanının
   içinde dursaydı (bir kez öyle oldu) öğrenci onu belgenin gövdesi sanar. */
.ev-kaynak-panel{border-left:3px solid var(--sari)}
.ev-kaynak{
  margin:10px 0 12px;padding:14px 16px;
  background:var(--sari-ac);border-radius:var(--r-m);
  font-size:15px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;
  color:var(--murekkep);
}

/* Alan grupları — belgenin başı / ne hakkında / metin ve altı. */
.ev-grup{
  border:1px solid var(--cizgi);border-radius:var(--r-m);
  padding:6px 16px 4px;margin:0 0 16px;min-width:0;
}
.ev-grup > legend{
  font-family:var(--bas);font-size:14px;font-weight:700;
  color:var(--vurgu-yazi);padding:0 8px;
}
.ev-grup .alan:last-child{margin-bottom:12px}

/* Zorunlu alanlar yazıyla işaretlenir: yıldız işareti tek başına hangi
   alanın kayda girmeye yettiğini anlatmıyordu. */
.ev-zorunlu{
  font-size:11px;font-weight:700;text-transform:lowercase;
  color:var(--sari);background:var(--sari-ac);
  padding:1px 7px;border-radius:var(--r-s);margin-left:6px;
}

/* Yönetim: belge resmî yazı düzeninde okunur (başlık ortada, sayı ile tarih
   aynı satırda karşılıklı, imza sağda). Etiket–değer satırları yazının
   nasıl durduğunu göstermiyordu. Eksik bölüm soluk "(… yok)" olarak durur:
   incelemede yazılmayan bölüm, yazılan kadar önemli. */
.ev-yazi{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m);
  padding:20px 22px;font-size:15px;line-height:1.55;color:var(--murekkep);overflow-wrap:anywhere;
}
.ev-y-baslik{text-align:center;font-weight:700;margin-bottom:16px}
.ev-y-satir{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;margin-bottom:6px}
.ev-y-konu,.ev-y-ilgi{margin-bottom:10px}
.ev-y-govde{margin:16px 0 18px}
.ev-y-imza{margin:0 0 16px auto;width:fit-content;max-width:70%;text-align:center}
.ev-y-ekler{font-size:.92em}
.ev-yok{color:var(--soluk);font-style:italic;font-weight:400}
.ev-yazi-perde{font-size:clamp(16px,1.6vw,26px);padding:clamp(18px,2vw,34px)}

/* İnceleme: belge solda, karar ve ölçüt yanda. Dar ekranda alt alta. */
.ev-incele{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0 16px;align-items:start}
@media (max-width:900px){.ev-incele{grid-template-columns:minmax(0,1fr)}}
.ev-ust-gezinme{align-items:center;margin-bottom:12px}
#ev-sahne > .dugme-sira{margin-bottom:14px}
.ev-incele .uyari + .ev-yazi{margin-top:12px}
.ev-olcut p{margin:0 0 8px;font-size:14px;line-height:1.5}
.ev-gerekce{border:0;padding:0;margin:0 0 12px;min-width:0;display:flex;flex-direction:column;gap:4px}
.ev-gerekce > legend{font-size:14px;font-weight:600;margin-bottom:6px;padding:0}
.ev-gerekce label{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;
  min-height:36px;padding:4px 0;cursor:pointer}
.ev-gerekce input[type=checkbox]{margin-top:1px}
.ev-not{white-space:normal}
p.ev-not{margin:6px 0 10px;padding:8px 12px;background:var(--yuzey2);border-radius:var(--r-s);font-size:14px;line-height:1.5}
.ev-onceki{padding:10px 0;border-top:1px solid var(--cizgi)}
.ev-onceki p{margin:0 0 6px}
.ev-suz{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ev-numaralar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ev-numaralar span{font-size:14px;padding:3px 9px;border-radius:var(--r-s);background:var(--yuzey2)}
.ev-numaralar .ev-taslakta{outline:1px solid var(--sari)}

/* ── CANLI TEST ─────────────────────────────────────────────────────────
   Derste süreli kısa test: öğrenci sorular arasında kendisi gezinir, süre
   dolana kadar işaretini değiştirir, "Testi bitir" ile teslim eder. Sonuçlar
   ancak paylaşıldıktan sonra açılır. Perdede İSİM ve SIRALAMA yoktur:
   duvara liderlik tablosu basmak hızı düşünmenin önüne geçiriyor ve
   ilk üçe girmeyen sınıf iki turda bırakıyor. Kıyaslamayan geri bildirim
   öğrencinin kendi ekranında durur. */
.ct-ust{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.ct-ust h3{margin:0}

/* Soru metni perdede okunacak: punto ekranla büyür. */
.ct-soru{font-family:var(--bas);font-size:clamp(18px,2.4vw,34px);line-height:1.3;
  margin:10px 0 16px;color:var(--murekkep)}
.ct-soru-metin{font-size:17px;line-height:1.5;margin:10px 0 16px}

/* Test sürerken perdede duran tek sayı: kaç kişi teslim etti. Sonuç ve doğru
   cevap yok — sınıf hâlâ yanıtlıyor. */
.ct-sayac{margin:0 0 12px;font-size:clamp(14px,1.35vw,21px);color:var(--murekkep2)}
.ct-sayac b{font-size:clamp(22px,2.6vw,40px);font-family:var(--bas);
  color:var(--vurgu-yazi);margin-right:6px}

.ct-oran{margin:14px 0 0;font-size:clamp(14px,1.35vw,21px);line-height:1.45}
.ct-oran .aciklama{display:inline;margin-left:4px}
.ct-takilan{margin:14px 0;padding:12px 14px;border:1px solid var(--sari);
  border-left-width:4px;border-radius:0 var(--r-m) var(--r-m) 0;background:var(--sari-ac)}
.ct-takilan .ct-soru{margin:8px 0 6px}

/* Öğrencinin şıkları: dokunma hedefi büyük, tek dokunuşla gönderilir. */
.ct-sik-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ct-sik-liste form{margin:0}
.ct-sik{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;
  min-height:52px;padding:12px 16px;text-align:left;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m);
  color:inherit;font:inherit;font-family:var(--bas);font-weight:700;font-size:17px;
  cursor:pointer;transition:border-color .12s, background-color .12s}
.ct-sik small{font-family:var(--govde);font-weight:400;font-size:12.5px;color:var(--soluk)}
/* İstek sürerken düğme kapalıdır ama SOLDURULMAZ: az önce dokunulan şıkkın
   sönmesi "gitmedi" gibi okunuyor — oy düğmesindeki tuzağın aynısı. */
.ct-sik[disabled]{cursor:default;opacity:1;color:inherit}
.ct-sik.secili{border-color:var(--vurgu);background:var(--vurgu-ac)}
.ct-sik.dogru{border-color:var(--yesil);border-width:2px;background:var(--yesil-ac)}
@media (hover:hover){.ct-sik:hover{border-color:var(--vurgu)}}
.ct-sik:active{background:var(--vurgu-ac)}
.ct-sik:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

/* TEST SONUCU — iki sekme: sınıfın sonucu ve kendi dökümü. Sekme GET ile
   taşınır, JS gerekmez; bağlantı olduğu için geri tuşu da çalışır. */
.ct-sekmeler{display:flex;gap:6px;margin:16px 0 -1px;padding:0 4px}
.ct-sekme{display:inline-block;padding:10px 18px;min-height:44px;
  font-weight:700;font-size:15px;line-height:24px;text-decoration:none;
  color:var(--murekkep2);background:var(--yuzey2);
  border:1px solid var(--cizgi);border-bottom:0;
  border-radius:var(--r-m) var(--r-m) 0 0}
.ct-sekme.etkin{background:var(--yuzey);color:var(--vurgu-yazi);
  border-color:var(--cizgi);box-shadow:inset 0 3px 0 var(--vurgu)}
@media (hover:hover){.ct-sekme:not(.etkin):hover{color:var(--vurgu-yazi)}}
.ct-sekme:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
.ct-sonuc{border-top-left-radius:0}

.ct-baslik{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  justify-content:space-between;margin-bottom:14px}
.ct-baslik h3{margin:0}

/* Sayı kutuları: aranan üç sayı en üstte, listeyi kaydırmadan görünsün. */
.ct-kutular{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  margin-bottom:16px}
.ct-kutu{background:var(--yuzey2);border:1px solid var(--cizgi);
  border-radius:var(--r-m);padding:14px 12px;text-align:center}
.ct-kutu b{display:block;font-family:var(--bas);font-size:clamp(24px,7vw,32px);line-height:1.1;
  color:var(--murekkep)}
.ct-kutu span{display:block;margin-top:4px;font-size:12.5px;color:var(--soluk);line-height:1.35}
.ct-kutu.vurgulu-kutu{background:var(--vurgu-ac);border-color:var(--vurgu)}
.ct-kutu.vurgulu-kutu b{color:var(--vurgu-yazi)}

.ct-sonuc-liste{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px}
.ct-sonuc-satir{display:flex;align-items:flex-start;gap:12px;
  background:var(--yuzey);border:1px solid var(--cizgi);
  border-left:4px solid var(--cizgi);border-radius:0 var(--r-m) var(--r-m) 0;
  padding:11px 14px}
.ct-sonuc-satir.dogru{border-left-color:var(--yesil)}
.ct-sonuc-satir.yanlis{border-left-color:var(--kirmizi)}
.ct-no,.ct-isaret{flex:0 0 auto;width:26px;text-align:center;font-weight:800;line-height:1.5}
.ct-no{color:var(--soluk);font-size:13px}
.ct-sonuc-satir.dogru .ct-isaret{color:var(--yesil)}
.ct-sonuc-satir.yanlis .ct-isaret{color:var(--kirmizi)}
.ct-govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ct-soru-kisa{font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.ct-cevap{font-size:13px;color:var(--soluk);line-height:1.4;overflow-wrap:anywhere}
.ct-cevap b{color:var(--murekkep2)}
.ct-yuzde{flex:0 0 auto;font-weight:700;font-size:15px;color:var(--murekkep2)}
.ct-yuzde.dusuk{color:var(--kirmizi)}

/* Canlı Test yönetimi — çoklu grup seçimi, soru önizlemesi, katlı işler. */
#ct-sahne > .dugme-sira{margin-bottom:14px}
.ct-alan-sira{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ct-gruplar{border:1px solid var(--cizgi);border-radius:var(--r-m);padding:8px 14px 12px;margin:0 0 16px;min-width:0}
.ct-gruplar > legend{font-weight:700;padding:0 6px}
.ct-grup-izgara{display:grid;gap:8px;margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ct-grup-sec{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;
  border:1px solid var(--cizgi);border-radius:var(--r-s);background:var(--yuzey);cursor:pointer}
.ct-grup-sec span{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.35}
.ct-grup-sec small{color:var(--soluk);font-size:12px}
.ct-grup-sec:has(input:checked){border-color:var(--vurgu);background:var(--vurgu-ac)}
.ct-grup-sec input{width:18px;height:18px;flex:0 0 auto;margin:0}
.ct-onizle > summary{cursor:pointer;min-height:32px;padding:4px 0}
.ct-onizle[open] > summary{margin-bottom:12px}
.ct-onizle-liste{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.ct-onizle-soru{display:block;line-height:1.45}
.ct-onizle-siklar{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ct-onizle-siklar span{font-size:13px;padding:2px 8px;border:1px solid var(--cizgi);border-radius:var(--r-s);color:var(--soluk)}
.ct-onizle-siklar .dogru-sik{border-color:var(--yesil);background:var(--yesil-ac);color:var(--murekkep);font-weight:700}
.ct-sonuc-satir.bos-satir{border-left-color:var(--cizgi);opacity:.75}
.ct-sonuc-satir.bos-satir .ct-isaret{color:var(--soluk)}

/* Kendi hızında yanıtlanan testin gezinmesi. Düğmeler HER GENİŞLİKTE yan
   yana: dar ekranda alt alta düşünce iki ayrı kart gibi duruyor ve sayfayı
   uzatıyorlar (bölüm gezinmesinde aynı karar verilmişti). */
.ct-gezinme{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ct-gezinme>*{justify-content:center;text-align:center}
.dugme[aria-disabled="true"]{opacity:.45;cursor:default}
/* Son soruda "Sonraki"nin yerini "Testi bitir" alır; form da bir ızgara
   gözüdür, düğme gözü doldursun. */
.ct-gezinme .ct-bitir{margin:0;display:grid}
.ct-gezinme .ct-bitir .dugme{width:100%;justify-content:center}

/* Soru şeridi: hangi soruda olduğunu ve hangilerini boş bıraktığını tek
   bakışta gösterir. Dokunma hedefi 44 px altına indirilmez. */
.ct-palet{list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px}
.ct-palet-no{display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 6px;
  border:1px solid var(--cizgi);border-radius:var(--r-s);
  background:var(--yuzey);color:var(--murekkep2);
  font-variant-numeric:tabular-nums;font-weight:700;text-decoration:none}
.ct-palet-no.isaretli{background:var(--vurgu-ac);border-color:var(--vurgu);
  color:var(--vurgu-yazi)}
.ct-palet-no.etkin{border-color:var(--vurgu);border-width:2px;
  box-shadow:0 0 0 2px var(--vurgu-ac)}
@media (hover:hover){.ct-palet-no:hover{border-color:var(--vurgu)}}
.ct-palet-no:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

/* LİDERLİK TABLOSU — lig puan cetveli.
   Tabloda ad değil numara yazar ve perde kipi yoktur: tablo öğrencinin kendi
   cihazında durur, sınıfın duvarında değil. */
.lider-puan{font-weight:800;color:var(--vurgu-yazi)}
/* Öğrencinin kendi satırı tabloda kaybolmasın: sıralamanın bilinen kusuru
   ilk üçün dışındakini "benim işim değil" noktasına getirmesi.
   Seçici `.tablo tr.benim-satir` OLMAK ZORUNDA: dar ekran kuralındaki
   `.tablo tr{background:var(--yuzey)}` daha baskın (0,1,1) ve tek sınıflı bir
   seçiciyi eziyor — vurgu mobilde sessizce kayboluyordu. */
.tablo tr.benim-satir{background:var(--vurgu-ac)}
.tablo tr.benim-satir td{border-color:var(--vurgu)}
.lider-tablo td:first-child{font-weight:700;color:var(--soluk)}
@media (max-width:860px){
  /* Dar ekranda satırlar karta dönüşüyor; kendi kartın kenarından da belli olsun. */
  .tablo tr.benim-satir{border-left:4px solid var(--vurgu)}
}

/* Perde kipi. Yatay `padding` KISAYOLU KULLANMAYIN: .panel'in yan boşluğunu
   siler ve satırlar kartın dışına taşar (.yansit ve .cv-perde'de yaşandı). */
.ct-perde{padding-block:clamp(16px,3vh,32px)}

/* ---------- Modül Merkezi (yonetim/modul-merkezi.php) ---------- */
.merkez-liste{list-style:none;margin:8px 0 0;padding:0}
.merkez-liste li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--cizgi)}
.merkez-liste li:first-child{border-top:0}
.merkez-ders-bas{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.merkez-ders-bas h3{margin:0}
.merkez-ders.soluk{opacity:.6}
.merkez-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.merkez-kart{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:11px 13px;border:1px solid var(--cizgi);border-radius:8px;color:inherit;text-decoration:none;background:var(--yuzey)}
.merkez-kart:hover,.merkez-kart:focus-visible{border-color:var(--vurgu)}
.merkez-kart-ad{font-weight:600}
.merkez-kart-sayi{font-size:14px;color:var(--soluk)}
.merkez-kart .rozet{align-self:flex-start}

/* Gelen yanıt kartı (Vaka, Bilgi Kartı yönetimi): panelin içinde, birbirinden ayrılan kutular. */
.yanit-kart{border:1px solid var(--cizgi);border-radius:8px;padding:14px 16px;margin-top:12px;background:var(--yuzey)}
.yanit-kart h4{margin:0 0 4px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.yanit-kart p{margin:8px 0}
.vaka-metin{white-space:pre-line;line-height:1.6}

/* Sunum Kartları: haftalık katlanır listeler, konu atama, puan satırı. */
.hafta-konu{border-top:1px solid var(--cizgi);padding:10px 0}
.hafta-konu:first-of-type{border-top:0}
.hafta-konu > summary .hafta-ad{font-weight:400}
.hafta-konu > summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-height:44px;align-content:center;font-weight:600}
.ata-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ata-form select{max-width:220px}
.puan-sira{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.puan-sira label{display:flex;flex-direction:column;font-size:13px;color:var(--soluk)}
.puan-sira input{width:74px}

/* SUNUM KARTLARI YÖNETİMİ — dört sekme, süzgeç çubuğu ve toplu formlar.
   Sekme çubuğu Canlı Test sonucundakinin aynısı; altındaki panelin sol üst
   köşesi sekmeye bitişsin diye düz. */
.bk-sekmeler{flex-wrap:wrap;margin-top:4px}
.bk-sekmeler .sekme-sayi{margin-left:4px}
.bk-ilk{border-top-left-radius:0}
.bk-suzgec{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:12px 0 10px}
.bk-suzgec .alan{margin:0;flex:0 1 190px;min-width:0}
.bk-suzgec .alan.bk-ara{flex:1 1 240px}
.bk-suzgec .dugme-sira{margin:0}
.bk-kaydet{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.bk-kaydet:last-child{justify-content:flex-end}
/* Gün değişimi çizgisi yalnız geniş ekranda: dar ekranda tablo karta dönüşüyor
   ve kural kartın her satırına kalın çizgi çekiyordu. */
@media (min-width:861px){.bk-tablo tr.bk-yeni-gun td{border-top:2px solid var(--cizgi-koyu)}}
.bk-ogr-kutu{width:120px;max-width:100%}
.bk-ad{display:block;margin-top:2px}
.bk-konu-kutu{width:100%;min-width:200px}
.bk-konu-satir{margin:2px 0;line-height:1.5}
.bk-not-tablo .bk-puan{width:68px;padding:10px 8px;text-align:center}
.bk-yorum{min-width:180px;width:100%;min-height:64px}
.bk-goster{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer}
.bk-secenek{border:0;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.bk-secenek legend{font-weight:600;font-size:14px;margin-bottom:6px}
.bk-secenek label{display:flex;gap:8px;align-items:flex-start}
.bk-sil{margin-top:14px;padding-top:12px;border-top:1px solid var(--cizgi)}
.bk-ekle > summary{cursor:pointer;list-style:none}
.bk-ekle > summary::-webkit-details-marker{display:none}
.bk-ekle > summary h3{display:inline;margin:0}
.bk-ekle > summary::after{content:" ▾";color:var(--soluk)}
.bk-ekle[open] > summary{margin-bottom:12px}
.bk-toplu-gor{margin-top:18px;padding-top:14px;border-top:1px solid var(--cizgi)}
.bk-toplu-gor .dugme-sira form{margin:0}
@media (max-width:860px){
  .bk-suzgec .alan{flex:1 1 calc(50% - 6px)}
  .bk-suzgec .alan.bk-ara{flex-basis:100%}
  .bk-ogr-kutu,.bk-not-tablo .bk-puan{width:100%;max-width:none}
  .bk-yorum,.bk-konu-kutu{min-width:0}
}
.hata-yazi{color:var(--kirmizi)}

/* DERS MASASI — yönetimde bir dersin bütün sayfalarının ortak başlığı.
   Sekmeler dar ekranda yatay kayar; sütun sayısı değişmez, düğme küçülmez
   (dokunma hedefi 44 px). */
.masa-bas{margin-bottom:18px}
.masa-baslik{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.masa-baslik h1{margin:2px 0 0}
.masa-araclar{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.masa-sekmeler{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--cizgi);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.masa-sekme{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;
  font-weight:600;font-size:15px;color:var(--murekkep2);text-decoration:none;
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.masa-sekme.etkin{color:var(--vurgu-yazi);border-bottom-color:var(--vurgu)}
@media (hover:hover){.masa-sekme:not(.etkin):hover{color:var(--vurgu-yazi);border-bottom-color:var(--cizgi-koyu)}}
.masa-sekme:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
.sekme-sayi{display:inline-block;min-width:20px;padding:1px 6px;border-radius:var(--r-s);
  background:var(--sari-ac);color:var(--sari);font-size:12px;text-align:center}

/* Ders değiştirici JS'siz bir açılır listedir; açıkken sayfanın üstünde durur. */
.ders-degis{position:relative}
.ders-degis > summary{list-style:none;cursor:pointer}
.ders-degis > summary::-webkit-details-marker{display:none}
.ders-degis > summary::after{content:"▾";margin-left:6px;font-size:11px}
.ders-degis > ul{position:absolute;right:0;top:calc(100% + 6px);z-index:30;list-style:none;margin:0;padding:6px;
  width:min(360px,calc(100vw - 32px));max-height:60vh;overflow:auto;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-m);box-shadow:var(--golge-2)}
.ders-degis a{display:block;padding:9px 10px;border-radius:var(--r-s);color:inherit;text-decoration:none;font-size:14.5px;line-height:1.35}
.ders-degis a:hover,.ders-degis a:focus-visible{background:var(--vurgu-ac)}
.ders-degis a[aria-current]{background:var(--vurgu-ac);color:var(--vurgu-yazi)}
.ders-degis a.soluk{opacity:.6}

.masa-sayilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.masa-sayi{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r-m);color:inherit;text-decoration:none;box-shadow:var(--golge-2)}
.masa-sayi strong{font-family:var(--bas);font-size:28px;line-height:1;color:var(--murekkep)}
.masa-sayi span{font-size:14px;color:var(--soluk)}
.masa-sayi.dikkat strong{color:var(--sari)}
.masa-sayi:hover,.masa-sayi:focus-visible{border-color:var(--vurgu)}
.masa-iki{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:18px}
.masa-iki > .panel{margin:0}
.kod-kutu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kod-kutu strong{font-size:24px;letter-spacing:.08em;cursor:pointer}

/* Haftalar: tıklayınca bölüm düzenleme ekranı açılır. */
.hafta-duzen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.hafta-duzen a{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:4px;
  padding:10px 12px;min-height:44px;border:1px solid var(--cizgi);border-radius:var(--r-m);
  color:inherit;text-decoration:none;background:var(--yuzey)}
.hafta-duzen a:hover,.hafta-duzen a:focus-visible{border-color:var(--vurgu);background:var(--vurgu-ac)}
.hd-no{grid-row:1 / 3;align-self:center;font-family:var(--bas);font-size:22px;color:var(--vurgu-yazi);text-align:center}
.hd-ad{font-size:14.5px;line-height:1.3;color:var(--murekkep)}
.hd-durum{display:flex;gap:4px;flex-wrap:wrap}
.hafta-duzen a.bos-hafta .hd-no{color:var(--soluk)}

/* İÇERİK AĞACI — başlık ve altındaki haftalar. Satır tablo değil liste:
   dar ekranda araçlar adın altına iner, tablo-karta dönüşme gerekmez. */
.icerik-agac,.icerik-agac ul{list-style:none;margin:0;padding:0}
.icerik-satir{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid var(--cizgi);scroll-margin-top:calc(var(--ust-h) + 16px)}
.icerik-agac > .icerik-satir:first-child{border-top:0}
.icerik-alt > ul{margin-left:22px;border-left:2px solid var(--vurgu-ac);padding-left:14px}
.icerik-ad{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:0;flex:1 1 280px}
.icerik-ad > a{font-weight:600;color:var(--murekkep);text-decoration:none}
.icerik-alt .icerik-ad > a{font-weight:500}
.icerik-ad > a:hover{color:var(--vurgu-yazi);text-decoration:underline}
.icerik-tur{font-size:13px;color:var(--soluk)}
.gizli-satir .icerik-ad > a{color:var(--soluk)}
.icerik-arac{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.icerik-arac form{display:inline;margin:0}
.dugme.kucuk.ok{min-width:44px;padding-inline:0}
.icerik-arac .dugme[disabled]{opacity:.35;cursor:default}
:target > .icerik-ad{background:var(--vurgu-ac);border-radius:var(--r-s)}

.alan-sira{display:flex;gap:12px;flex-wrap:wrap}
.alan-sira > .alan{flex:1 1 160px}

/* Bölüm düzenleme: önceki / öğrenci görünümü / sonraki. Uzun başlık kısalır,
   düğmeler yan yana kalır (öğrenci tarafındaki gezinme düğmeleriyle aynı karar). */
.bolum-gec{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:14px}
.bolum-gec > a:first-child{justify-self:start}
.bolum-gec > a:last-child{justify-self:end}
.bolum-gec > a{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bolum-ayar{border:1px solid var(--cizgi);border-radius:var(--r-m);padding:0 14px;margin:6px 0 16px}
.bolum-ayar > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600}
.bolum-ayar[open]{padding-bottom:6px}
/* Kaydet uzun metnin altında kaybolmasın diye masaüstünde ekranın altına yapışır.
   Dar ekranda yapışmaz: orada alt sekme çubuğu aynı yeri kaplıyor. */
@media (min-width:861px){.kaydet-sira{position:sticky;bottom:0;z-index:5;background:var(--yuzey);padding:10px 0;margin-bottom:-10px}}
.sil-panel form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}

/* Dosya listesi (bölüm ve bütün dosyalar): ad, tür, boyut; araçlar katlanır. */
.dosya-duzen{list-style:none;margin:0;padding:0}
.dosya-duzen > li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 14px;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid var(--cizgi)}
.dosya-duzen > li:first-child{border-top:0}
.dosya-bilgi{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;flex:1 1 260px;min-width:0}
.dosya-bilgi a{font-weight:600;overflow-wrap:anywhere}
.dosya-arac > summary{list-style:none}
.dosya-arac > summary::-webkit-details-marker{display:none}
.dosya-arac[open]{flex:1 1 100%}
.dosya-arac-ic{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;
  background:var(--yuzey2);border:1px solid var(--cizgi);border-radius:var(--r-m)}
.satir-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
.satir-form input[type=text],.satir-form select{flex:1 1 200px;min-width:0}

.suzgec{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.suzgec a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;font-size:14px;
  border:1px solid var(--cizgi);border-radius:var(--r-s);background:var(--yuzey);color:var(--murekkep2);text-decoration:none}
.suzgec a.etkin{border-color:var(--vurgu);background:var(--vurgu-ac);color:var(--vurgu-yazi);font-weight:600}
.suzgec a span{color:var(--soluk);font-size:12.5px}

/* Paneldeki ders seçimi: her kart dersin masasına götürür; sol kenar dersin rengi. */
.ders-sec{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ders-sec-kart{display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 16px;min-height:44px;
  border:1px solid var(--cizgi);border-left:4px solid var(--ders-renk,var(--vurgu));border-radius:var(--r-m);
  background:var(--yuzey);color:inherit;text-decoration:none}
.ders-sec-kart strong{font-size:15.5px;line-height:1.3;color:var(--murekkep)}
.ders-sec-kart .aciklama{font-size:13.5px}
.ders-sec-kart:hover,.ders-sec-kart:focus-visible{border-color:var(--vurgu);border-left-color:var(--ders-renk,var(--vurgu));background:var(--vurgu-ac)}
.ders-sec-kart.soluk{opacity:.6}
.ders-sec-alt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--soluk);margin-top:4px}

/* Yönetici şeridi: öğrenci ekranında yalnız yöneticiye görünür. Sayfanın
   kendi başlığıyla karışmasın diye kesikli çerçeveli, soluk zeminli. */
.yonetici-serit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:8px 10px;
  border:1px dashed var(--vurgu);border-radius:var(--r-m);background:var(--vurgu-ac)}
.yonetici-serit-ad{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vurgu-yazi);margin-right:4px}