/* Sigorta Hakemliği — tema (Tasarım Bölümü, Bölüm 2 paleti). Açık tema, düz/flat. */
:root{
  --marka:#234a87; --mavi:#234a87;          /* re-skin: tek lacivert (modlar/aktif sekme/birincil düğme) */
  --mod-ana-ikon:#234a87; --mod-ana-zemin:#E6F1FB;
  --mod-konu-ikon:#356218; --mod-konu-zemin:#EAF3DE;   /* re-skin: birleşik koyu yeşil */
  --mod-hizli-ikon:#854F0B; --mod-hizli-zemin:#FAEEDA;
  --dogru-zemin:#EAF3DE; --dogru-cizgi:#356218;   /* re-skin: birleşik koyu yeşil */
  --yanlis-zemin:#FCEBEB; --yanlis-cizgi:#A32D2D;
  --ust-iyi:#639922; --ust-orta:#EF9F27; --ust-zayif:#E24B4A;
  /* Tek enerji aksanı: amber/altın — yalnız seri, başarı, hazır-ödül anlarında. */
  --amber:#9A6B0B; --amber-zemin:#FBEFD2; --altin:#C8941A;
  --yuzey:#FFFFFF; --zemin:#efe6d1; --metin:#2C2C2A; --metin2:#756f64;   /* re-skin: krem zemin + ikincil metin */
  --cizgi:#e7decb;   /* re-skin: ılık kart kenarı / hairline */
  --r:12px;          /* re-skin: köşe 12px */
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--zemin);color:var(--metin);line-height:1.6;font-size:17px}
a{color:var(--mavi);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.4rem;margin:.2rem 0 .8rem;font-weight:600}
h2{font-size:1.15rem;margin:.2rem 0 .6rem;font-weight:600}
h3{font-size:1rem;font-weight:600;margin:.4rem 0}
p{margin:.5rem 0}
.kucuk{color:var(--metin2);font-size:.9rem}
.hata{color:var(--yanlis-cizgi)}

/* ---- Düzen: sol kenar menü + içerik ---- */
.duzen{display:flex;min-height:100vh;align-items:flex-start}
.kenar{width:230px;flex:0 0 230px;background:var(--yuzey);border-right:1px solid var(--cizgi);
  min-height:100vh;padding:16px;position:sticky;top:0}
.marka{color:var(--marka);font-weight:600;font-size:1.05rem;padding:6px 8px 14px}
.marka img{display:block;height:40px;width:auto;max-width:100%} /* logo.svg — sol menü + landing (Tasarım 2.7) */
.landing-ust .marka img{height:38px}
.menu{display:flex;flex-direction:column;gap:2px}
.menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--metin)}
.menu a:hover{background:var(--mod-ana-zemin);text-decoration:none}
.menu-kullanici{margin-top:18px;padding-top:12px;border-top:1px solid var(--cizgi)}
.menu-kullanici .ad{font-weight:600;padding:6px 12px;color:var(--marka)}
.menu-toggle{display:none}
.hamburger{display:none}

.icerik{padding:26px 22px} /* Faz8-3: .duzen flex kalktı → flex:1/min-width işlevsizdi, kaldırıldı */
.icerik-ic{max-width:880px;margin:0 auto}            /* içerik ortalanır */
.icerik-oturum{max-width:400px;margin:48px auto;padding:0 16px} /* giriş/kayıt */
.icerik-genis{max-width:980px;margin:0 auto;padding:22px} /* landing / Sınav Hakkında (ziyaretçi) */

/* ===== Faz8-3: ÜST MENÜ ÇUBUĞU (sol .kenar yerine) — yeni renk yok ===== */
.ust-cubuk{background:var(--yuzey);border-bottom:1px solid var(--cizgi);position:sticky;top:0;z-index:40}
.uc-ic{display:flex;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:8px 22px}
.ust-cubuk .menu-toggle{display:none}
.uc-marka{display:flex;align-items:center}
.uc-marka img{height:34px;width:auto;display:block}
.uc-nav{display:flex;gap:4px}
.uc-nav a{padding:8px 12px;border-radius:8px;color:var(--metin);font-weight:500}
.uc-nav a:hover{background:var(--mod-ana-zemin);color:var(--mavi);text-decoration:none}
.uc-sag{margin-left:auto;display:flex;align-items:center;gap:12px}
.uc-ai{color:var(--metin2);font-size:.85rem;white-space:nowrap}
.uc-link{color:var(--mavi)}
.btn-mini{padding:6px 12px;font-size:.85rem}
/* Avatar açılır menü (CSS-only <details>) */
.avatar-menu{position:relative}
.avatar-menu>summary{list-style:none;cursor:pointer;padding:7px 12px;border-radius:8px;
  font-weight:600;color:var(--marka);background:var(--mod-ana-zemin)}
.avatar-menu>summary::-webkit-details-marker{display:none}
.avatar-menu[open]>summary{background:var(--mavi);color:#fff}
.avatar-menu-govde{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.16);padding:6px;z-index:45;display:flex;flex-direction:column;gap:2px}
.avatar-menu-govde a{padding:8px 10px;border-radius:6px;color:var(--metin)}
.avatar-menu-govde a:hover{background:var(--mod-ana-zemin);color:var(--mavi);text-decoration:none}
.avatar-menu-govde form{margin:4px 0 0;border-top:1px solid var(--cizgi);padding-top:6px}
.avatar-menu-govde .cikis{width:100%;text-align:left;background:transparent;border:0;
  color:var(--yanlis-cizgi);padding:8px 10px;cursor:pointer;border-radius:6px;font:inherit}
.avatar-menu-govde .cikis:hover{background:var(--yanlis-zemin)}

/* Mobil (≤760): üst çubuk + hamburger panel (CSS-only checkbox) */
@media (max-width:760px){
  .uc-ic{flex-wrap:wrap;padding:8px 16px}
  .ust-cubuk .hamburger{display:inline-block;cursor:pointer;padding:6px 12px;
    border:1px solid var(--cizgi);border-radius:8px;color:var(--marka);margin-left:auto}
  .uc-nav,.uc-sag{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;margin:8px 0 0}
  .menu-toggle:checked ~ .uc-nav,
  .menu-toggle:checked ~ .uc-sag{display:flex}
  .uc-sag{margin-left:0}
  .uc-nav a{padding:10px 12px}
  /* Avatar menü mobilde: summary GÖRÜNÜR kalır (ad ▾) → dokununca ikincil maddeler
     yerinde açılır (native <details>; CSS-zorlaması yok = her tarayıcıda sağlam). */
  .avatar-menu{position:static;width:100%}
  .avatar-menu>summary{width:100%;box-sizing:border-box}
  .avatar-menu-govde{position:static;box-shadow:none;border:0;border-radius:0;
    padding:6px 0 0 10px;min-width:0;margin-top:4px}
  .uc-ai{padding:8px 10px}
}

/* ---- Landing (herkese açık karşılama) ---- */
.landing-ust{display:flex;justify-content:space-between;align-items:center;
  padding:6px 0 16px;border-bottom:1px solid var(--cizgi);margin-bottom:8px;gap:10px;flex-wrap:wrap}
.landing-ust .marka{padding:0;font-size:1.1rem}
.landing-ust-eylem{display:flex;gap:12px;align-items:center}
.landing-hero{padding:30px 0 8px}
.landing-hero h1{font-size:1.8rem;line-height:1.25;margin:0 0 10px}
.landing-alt{font-size:1.1rem;color:var(--metin2);max-width:680px}
.landing-eylem{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 6px}
.serit-bilgi{background:var(--mod-konu-zemin);border-color:var(--mod-konu-ikon)}
.landing-kartlar{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:8px}
.landing-kartlar h2{font-size:1rem;margin:.2rem 0 .4rem} /* hiyerarşi h2 ama görünüm sade (SEO) */
.landing-footer{margin:24px 0 8px;padding-top:14px;border-top:1px solid var(--cizgi)}
/* Site geneli footer (sayfa_alt — her sayfada, main dışında tam genişlik şerit) */
.site-footer{border-top:1px solid var(--cizgi);margin-top:32px;padding:16px 22px}
.site-footer p{max-width:880px;margin:0 auto;text-align:center;color:var(--metin2)}
.site-footer a{color:inherit;text-decoration:underline}

/* ---- Basit veri tablosu (Sınav Hakkında soru dağılımı) ---- */
.tablo{width:100%;border-collapse:collapse;margin-top:8px}
.tablo th,.tablo td{border:1px solid var(--cizgi);padding:8px 10px;text-align:left}
.tablo th{background:var(--mod-ana-zemin);color:var(--marka)}
.tablo td:last-child,.tablo th:last-child{text-align:center;width:80px}

/* ---- Sidebar alt (ikincil) bağlantı: Sınav Hakkında ---- */
.menu-alt{margin-top:14px;padding-top:10px;border-top:1px solid var(--cizgi)}
.menu-alt a{color:var(--metin2);font-size:.9rem}

/* ---- İçerik içi sayfa başlığı ---- */
.ust-bar{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--cizgi);padding-bottom:10px;margin-bottom:6px;gap:10px}
.ust-bar h1{margin:0}
.durum{color:var(--metin2);font-size:.9rem;white-space:nowrap}

/* ---- Kart (ferah; hafif belirgin kenarlık, gölge yok) ---- */
.kutu{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:24px;margin:20px 0}

/* ---- Soru metni (aktif soru) ---- */
.soru-metni{font-size:1.12rem;font-weight:600;line-height:1.5;margin:0 0 18px}

/* ---- Şık kutuları (ferah, büyük, okunur) ---- */
.sik{display:block;margin:14px 0;padding:16px 18px;border:1px solid var(--cizgi);
  border-radius:8px;cursor:pointer;background:var(--yuzey);font-size:1.05rem;line-height:1.5}
.sik:hover{background:var(--mod-ana-zemin)}
/* Sade cevap kartı: radio gizli, tüm kart tıklanabilir; seçili vurgulanır */
.sik input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.sik:has(input:checked){border-color:var(--mavi);background:var(--mod-ana-zemin);font-weight:600}
.sik.dogru{background:var(--dogru-zemin);border-color:var(--dogru-cizgi);color:var(--dogru-cizgi)}
.sik.yanlis{background:var(--yanlis-zemin);border-color:var(--yanlis-cizgi);color:var(--yanlis-cizgi)}

/* ---- Form ögeleri ---- */
button,.btn{padding:10px 16px;border:0;border-radius:8px;background:var(--mavi);
  color:#fff;cursor:pointer;font-size:1rem}
button:hover,.btn:hover{background:#1c3a6b;text-decoration:none}   /* re-skin: lacivert birleştiği için hover bir ton koyu */
button.ikincil{background:var(--yuzey);color:var(--mavi);border:1px solid var(--mavi)}
input,textarea,select{padding:10px;border:1px solid var(--cizgi);border-radius:8px;
  width:100%;box-sizing:border-box;font:inherit;background:var(--yuzey)}
select{width:auto;min-width:160px;display:inline-block}
textarea{min-height:90px;resize:vertical}
label{display:block;margin:12px 0 4px;font-weight:600}

/* ---- Mod kartları (ana sayfa) ---- */
.mod-kartlar{display:grid;gap:14px;grid-template-columns:1fr}
.mod-kart{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--cizgi);
  border-radius:var(--r);background:var(--yuzey)}
.mod-ikon{width:14px;height:14px;border-radius:50%;margin-top:6px;flex:0 0 14px}
.mod-ana .mod-ikon{background:var(--mod-ana-ikon)}
.mod-konu .mod-ikon{background:var(--mod-konu-ikon)}
.mod-hizli .mod-ikon{background:var(--mod-hizli-ikon)}
/* Kart içi doğrudan başlatma (İş 4): konu satırları + hızlı adet butonları */
.mod-govde{flex:1;min-width:0}
.mod-secenekler{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.mod-secenekler.yatay{flex-direction:row;flex-wrap:wrap}
.secenek-form{margin:0}
.secenek-satir{display:flex;justify-content:space-between;align-items:center;gap:8px;
  width:100%;text-align:left;padding:9px 12px;border:1px solid var(--cizgi);border-radius:8px;
  background:var(--yuzey);color:var(--metin);font:inherit;font-weight:500;cursor:pointer}
.secenek-satir:hover{background:var(--mod-ana-zemin);border-color:var(--mavi);text-decoration:none}
.mod-secenekler.yatay .secenek-satir{width:auto;justify-content:center;font-weight:600;color:var(--mavi)}
.secenek-satir.devam{background:var(--mod-ana-zemin);border-color:var(--mavi);font-weight:600}

/* ---- Aktif oturum şeridi ---- */
.serit{background:#dce8f7;border:1px solid #b9d2ef;border-radius:var(--r);   /* re-skin: devam şeridi tonu */
  padding:14px 16px;margin:14px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---- Ustalık çubuğu (karne/İlerlemem — T2'de kullanılacak) ---- */
.ustalik{height:10px;border-radius:6px;background:#eef1e6;overflow:hidden;margin:4px 0}   /* re-skin: çubuk yatağı */
.ustalik > span{display:block;height:100%}
.ust-iyi{background:var(--ust-iyi)} .ust-orta{background:var(--ust-orta)} .ust-zayif{background:var(--ust-zayif)}

/* ---- Metrik kartları (karne / İlerlemem) ---- */
.metrik-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:6px 0}
.metrik{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);padding:14px;text-align:center}
.metrik .deger{font-size:1.5rem;font-weight:600;color:var(--marka)}
.metrik .etiket{color:var(--metin2);font-size:.85rem;margin-top:2px}

/* ---- İstatistik çubuk grafiği (CSS-only; JS yok → CSP korunur, Tasarım 6.8) ---- */
.cubuk-grafik{display:flex;align-items:flex-end;gap:10px;height:200px;margin:12px 0 4px}
.cubuk-sutun{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.cubuk-deger{font-size:.8rem;color:var(--metin2);margin-bottom:4px}
.cubuk-yuva{flex:1;width:100%;display:flex;align-items:flex-end} /* dolgu alta hizalı */
.cubuk-dolgu{width:100%;background:var(--mavi);border-radius:6px 6px 0 0;min-height:2px}
.cubuk-etiket{font-size:.78rem;color:var(--metin2);margin-top:6px}

/* ---- Kanun maddesi tam metni (açılır-kapanır; açıklama altında) ---- */
.madde-metni{margin:10px 0 4px;border:1px solid var(--cizgi);border-radius:8px;background:#FAFAF7}
.madde-metni > summary{cursor:pointer;padding:8px 12px;font-weight:600;color:var(--marka);font-size:.92rem}
.madde-metni[open] > summary{border-bottom:1px solid var(--cizgi)}
.madde-govde{padding:10px 12px;font-size:.92rem;color:var(--metin2);
  max-height:340px;overflow:auto;white-space:normal}

/* ---- Ders satırı + ustalık lejantı ---- */
.ders-satir{margin:10px 0}
.ders-satir .ust-satir{display:flex;justify-content:space-between;gap:8px;font-size:.95rem}
.lejant{display:flex;gap:14px;flex-wrap:wrap;color:var(--metin2);font-size:.85rem;margin-top:8px}
.lejant span{display:inline-flex;align-items:center;gap:6px}
.lejant i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ---- Cevaplanan kartta statik şık kutuları (tıklanamaz) ---- */
.kart-sik{display:block;margin:8px 0;padding:12px;border:1px solid var(--cizgi);border-radius:8px;background:var(--yuzey)}
.kart-sik.dogru{background:var(--dogru-zemin);border-color:var(--dogru-cizgi);color:var(--dogru-cizgi)}
.kart-sik.yanlis{background:var(--yanlis-zemin);border-color:var(--yanlis-cizgi);color:var(--yanlis-cizgi)}
/* Çeldirici tuzağı: ait olduğu YANLIŞ şık kutusunun İÇİNDE, alt bölümünde durur (kardeş değil).
   Üstte ince ayraç + solda şerit ile şık metninden ayrışır; gri/küçük ton korunur. Aynı kutuda
   kaldığı için bir bakışta "üstteki yanlış şıkkın açıklaması" anlaşılır, sonraki şıkla karışmaz.
   Nesne iç içe olduğundan gruplama dar ekranda da kendiliğinden korunur. */
.kart-tuzak{color:var(--metin2);font-size:.9rem;margin-top:10px;padding:8px 0 0 12px;border-top:1px solid var(--cizgi);border-left:3px solid var(--cizgi)}
.kart-tuzak .tuzak-etiket{color:var(--marka);font-weight:600;margin-right:4px}

/* ---- Geri bildirim kutusu tonları ---- */
.gb-dogru{background:var(--dogru-zemin);border-color:var(--dogru-cizgi)}
.gb-yanlis{background:var(--yanlis-zemin);border-color:var(--yanlis-cizgi)}
.gb-dogru h2{color:var(--dogru-cizgi)} .gb-yanlis h2{color:var(--yanlis-cizgi)}

/* ---- Uyarı/bilgi kutucuğu (şüpheli vb.) ---- */
.uyari{background:var(--mod-hizli-zemin);border:1px solid #e6c48f;border-radius:8px;padding:8px 10px}

/* ---- Boş durum ---- */
.bos{color:var(--metin2);text-align:center;padding:18px}

/* ---- Rozetler (satırda 2 kart; kategoriye göre renkli — yalnız burada) ---- */
.rozet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:10px}
.rozet{border:1px solid var(--cizgi);border-radius:var(--r);padding:18px}
.rozet .ad{font-weight:600;font-size:1.05rem;margin-bottom:12px}   /* başlık-açıklama arası ferah */
.rozet .aciklama{color:var(--metin2);font-size:.9rem}
.rozet.kilitli{opacity:.5}                                         /* kazanılmayan: aynı renk, soluk */
.rozet.mt{background:#E6F1FB;border-color:#185FA5} .rozet.mt .ad{color:#185FA5}
.rozet.us{background:#EAF3DE;border-color:#3B6D11} .rozet.us .ad{color:#3B6D11}
.rozet.ge{background:#E1F5EE;border-color:#0F6E56} .rozet.ge .ad{color:#0F6E56}
.ilerleme-metin{font-size:.85rem;color:var(--metin2);font-weight:600;margin-top:10px}
.rozet-bar{height:8px;background:rgba(0,0,0,0.10);border-radius:5px;overflow:hidden;margin-top:6px}
.rozet-bar span{display:block;height:100%}
.rozet.mt .rozet-bar span{background:#185FA5}
.rozet.us .rozet-bar span{background:#3B6D11}
.rozet.ge .rozet-bar span{background:#0F6E56}

/* ---- Ana sayfa kokpiti ("Hazırlık durumun") ---- */
.kokpit{margin:14px 0}
.kokpit-baslik{font-size:1.15rem;color:var(--marka);margin:0 0 10px}
/* HERO: Hazır mıyım — beyaz kart, şampanya zemin üstünde kalkar */
.kokpit-hero{display:flex;gap:16px;align-items:flex-start}
.kokpit-hero-govde{flex:1;min-width:0}
.kokpit-hero-ust{display:flex;align-items:center;gap:10px;color:var(--metin2);font-size:.95rem}
.kokpit-skor{font-size:2.2rem;font-weight:700;color:var(--marka);line-height:1.15;margin:4px 0}
.kokpit-skor .baraj{font-size:1.05rem;color:var(--metin2);font-weight:600}
.kokpit-hero.hero-gecti .kokpit-skor{color:var(--dogru-cizgi)}   /* yalnız geçti = yeşil ödül */
.rozet-etiket{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  background:var(--amber-zemin);color:var(--amber);padding:2px 8px;border-radius:999px}
.kokpit-gauge{position:relative;height:10px;border-radius:6px;background:#eef1e6;margin:10px 0 6px}   /* re-skin: çubuk yatağı */
.kokpit-gauge > span{display:block;height:100%;border-radius:6px;background:#356218}   /* re-skin: ilerleme çubuğu yeşil */
.kokpit-hero.hero-gecti .kokpit-gauge > span{background:var(--dogru-cizgi)}
.kokpit-gauge .baraj-cizgi{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--metin2)}
.trend{font-weight:600;font-size:.9rem;margin-left:6px}
.trend.yukari{color:var(--dogru-cizgi)} .trend.asagi,.trend.sabit{color:var(--metin2)}
/* Soru bankası kapsamı — kanun rozetleri (misafir landing + üye ana sayfa) */
.kanun-kapsam{margin-top:14px}
.kanun-rozetler{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kanun-rozet{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:999px;font-size:.9rem}
.kanun-rozet b{color:var(--mavi);font-weight:600}
.kanun-rozet-sayi{color:var(--metin2);font-variant-numeric:tabular-nums;
  padding-left:8px;border-left:1px solid var(--cizgi)}
/* segmentli başlangıç göstergesi (bos durum — kırık değil, başlangıç) */
.kokpit-segment{display:flex;gap:6px;margin:8px 0}
.kokpit-segment i{flex:1;height:8px;border-radius:4px;background:#eef1e6}   /* re-skin: çubuk yatağı */
.kokpit-segment i.dolu{background:var(--altin)}
/* sinyal ikonları: küçük renkli daire */
.sinyal-ikon{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:1.2rem;line-height:1}
.ikon-altin,.ikon-amber{background:var(--amber-zemin);color:var(--amber)}
.ikon-mavi{background:var(--mod-ana-zemin);color:var(--mavi)}
/* destek çipleri: hero'dan küçük, 3 yan yana */
.kokpit-cipler{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:12px}
/* re-skin: üç destek çipi → koyu yeşil dolu (mavi/amber karışıklığı kalkar) */
.kokpit-cip{display:flex;gap:12px;align-items:flex-start;padding:14px;border:0;
  border-radius:var(--r);background:#356218;color:#fff}
.kokpit-cip .cip-govde{min-width:0}
.kokpit-cip .cip-baslik{font-weight:600;font-size:.95rem;color:#fff}
.kokpit-cip .cip-deger{font-size:1.3rem;font-weight:700;color:#fff;margin:2px 0}
.kokpit-cip .kucuk{color:#fff;opacity:.9}
.kokpit-cip .sinyal-ikon{background:rgba(255,255,255,.18);color:#fff}
.kokpit-cip .btn{background:#fff;color:#356218}
.kokpit-cip .btn:hover{background:#fff;opacity:.9}
.kokpit-cip.cip-amber .cip-deger{color:#fff}
.kokpit-cip.cip-bos{opacity:.82}                                 /* başlangıç: soluk, alarm değil */
.btn-mini{display:inline-block;font-size:.85rem;padding:6px 10px;margin-top:8px}
.kokpit-detay{margin:12px 0 0}

/* ---- Mobil: sidebar → hamburger (CSS-only) ---- */
@media (max-width:760px){
  .duzen{display:block}
  .kenar{width:auto;flex:none;min-height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--cizgi)}
  .hamburger{display:inline-block;cursor:pointer;padding:8px 12px;border:1px solid var(--cizgi);
    border-radius:8px;color:var(--marka)}
  .menu{display:none;margin-top:10px}
  .menu-toggle:checked ~ .menu{display:flex}
  .icerik{max-width:none}
  /* Kokpit: hero tam genişlik (zaten blok), 3 çip alt alta */
  .kokpit-cipler{grid-template-columns:1fr}
}

/* Kademe ilerleme şeridi (Faz 1/İş A) — mavi yapısal, yeni kazanım altın.
   Renk kilidi: sabit hex YOK; yalnız mevcut CSS değişkenleri. */
.kademe-serit{margin-top:14px}
.kademe-baslik{font-weight:600;color:var(--marka);margin-bottom:8px}
.kademe-satir{padding:8px 0;border-top:1px solid var(--cizgi)}
.kademe-satir:first-of-type{border-top:0}
.kademe-yeni{background:var(--amber-zemin);border-radius:var(--r);padding:8px 10px}
.kademe-ust{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kademe-ders{font-weight:500}
.kademe-rozet{font-size:.82rem;padding:2px 10px;border-radius:999px;
  background:var(--mod-ana-zemin);color:var(--mavi);white-space:nowrap}
.kademe-rozet.kademe-bos{background:transparent;color:var(--metin2)}
.kademe-rozet.kademe-altin{background:var(--amber-zemin);color:var(--altin)}
.kademe-bar{height:6px;background:#eef1e6;border-radius:999px;overflow:hidden;margin:6px 0}   /* re-skin: çubuk yatağı */
.kademe-bar span{display:block;height:100%;background:#356218}   /* re-skin: ilerleme çubuğu yeşil */
.kademe-yeni .kademe-bar span{background:var(--altin)}

/* Favori yıldızı (Faz 2/İş B) — dolu favoride altın. Renk kilidi: CSS değişkeni. */
.yildiz-form{display:inline-block;margin:6px 8px 0 0}
.yildiz{background:transparent;border:1px solid var(--cizgi);color:var(--metin2);
  padding:4px 12px;border-radius:999px;cursor:pointer;font-size:.85rem}
.yildiz.yildiz-dolu{color:var(--altin);border-color:var(--altin)}
.favori-not{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.favori-not textarea{width:100%;border:1px solid var(--cizgi);border-radius:8px;padding:6px;font:inherit}
.favori-not .btn-mini{align-self:flex-start}

/* Bugünün planı (Faz 3/İş C) — altın enerji; gauge mavi yapısal, alt eşik işareti.
   Renk kilidi: yalnız CSS değişkeni. */
.plan-bugun{border-left:3px solid var(--altin)}
.plan-bugun.plan-tamam{background:#e8f0dd}   /* re-skin: tamam → hafif yeşil zemin */
.plan-ust{display:flex;justify-content:space-between;align-items:baseline}
.plan-baslik{font-weight:600;color:var(--marka)}
.plan-sayi{font-weight:600;color:var(--altin)}
.plan-gauge{position:relative;height:8px;background:var(--cizgi);border-radius:999px;
  overflow:hidden;margin:8px 0}
.plan-gauge>span{display:block;height:100%;background:var(--altin)}
.plan-gauge>.plan-alt{position:absolute;top:-2px;width:2px;height:12px;background:var(--mavi);overflow:visible}
.hafta{margin-top:12px}
.hafta>summary{cursor:pointer;color:var(--mavi);font-weight:500}
/* re-skin Parça 3: Bu hafta → tek satır yatay (sarılabilir; details açık kalır) */
.hafta-govde{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.hafta-govde p{margin:0}

/* Mertebe manşeti (Faz 4) — mavi yapısal; zirve (Usta) altın. Renk kilidi: CSS değişkeni. */
.mertebe{display:flex;align-items:center;gap:14px;background:var(--yuzey);
  border:1px solid var(--cizgi);border-left:3px solid var(--mavi);
  border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
/* Faz 5/Adım 0: manşet tüm bantlarda yapısal mavi (Usta dahil); altın yalnız paylaşım kartında. */
.mertebe-yok{border-left-color:var(--cizgi)}
.mertebe-net{font-size:2.2rem;font-weight:700;color:var(--mavi);line-height:1}
.mertebe-ad{font-weight:600;color:var(--marka)}

/* Drill (Faz 3.6): havuz yetersizse pasif etiket. Yeni renk yok; ikincil metin tonu. */
.drill-pasif{color:var(--metin2);font-style:italic}

/* Faz 3.6.1: zayıflık bölümleri ince link-liste. (Çerçeve = .kutu beyaz kart; her bölüm
   kendi kartında — kullanıcı tercihi.) Yeni renk yok (--mavi/--marka). */
.zayif-bolum h2{margin-bottom:6px}
.zayif-grup{margin:0 0 10px}
.zayif-grup-bas{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.zayif-alt-ad{font-weight:600;color:var(--marka)}
.zayif-konular{list-style:none;margin:2px 0 0;padding:0}
.zayif-konular li{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:var(--metin2)}
.drill-form{margin:6px 0 0}
/* Çerçevesiz bölümlerde form satır-içi, link-submit görünür: marj yok, sağa hizalı. */
.zayif-grup-bas .drill-form,.zayif-konular .drill-form{margin:0}
.drill-link{background:transparent;border:0;padding:0;color:var(--mavi);cursor:pointer;
  font:inherit;white-space:nowrap}
.drill-link::before{content:'→ '}
.drill-link:hover{text-decoration:underline}
/* Faz 3.6.3: alan altındaki ilgili maddeler — soluk (yeni renk yok; ikincil metin tonu). */
.zayif-maddeler{color:var(--metin2);opacity:.8;margin:3px 0 0}

/* Faz 5: paylaşılabilir karne kartı. Düz/temiz (md.1); altın aksan paylaşım varlığında SERBEST.
   Yeni renk yok — mevcut CSS değişkenleri. */
.kart{background:var(--yuzey);border:1px solid var(--cizgi);border-top:4px solid var(--mavi);
  border-radius:var(--r);padding:22px;max-width:520px;margin:0 0 16px}
.kart-zirve{border-top-color:var(--altin)}
.kart-baslik{font-weight:600;color:var(--marka);margin-bottom:14px}
.kart-govde{display:flex;align-items:center;gap:20px}
.kart-ring-wrap{position:relative;width:120px;height:120px;flex:0 0 auto}
.kart-ring-wrap svg{width:120px;height:120px}
.ring-bg{fill:none;stroke:var(--cizgi);stroke-width:12}
.ring-fg{fill:none;stroke:var(--mavi);stroke-width:12;stroke-linecap:round}
.kart-zirve .ring-fg{stroke:var(--altin)}
.kart-ring-net{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.net-buyuk{font-size:2.2rem;font-weight:700;color:var(--mavi);line-height:1}
.kart-zirve .net-buyuk{color:var(--altin)}
.net-kucuk{font-size:.72rem;color:var(--metin2)}
.kart-mertebe{font-size:1.4rem;font-weight:700;color:var(--marka)}
.kart-rumuz{color:var(--metin2)}
.kart-alt{margin-top:14px}
.kart-alt p{margin:3px 0}
.kart-cta{margin-top:14px;padding-top:12px;border-top:1px solid var(--cizgi);
  font-weight:600;color:var(--mavi)}
.kart-zirve .kart-cta{color:var(--altin)}
#paylas-metin{width:100%;border:1px solid var(--cizgi);border-radius:8px;padding:8px;font:inherit}

/* Faz 6: kompakt liderlik — YALNIZ mavi yapısal (altın YOK; kalıcı yapı, ciddi ton). */
.liderlik-liste{list-style:none;margin:8px 0 0;padding:0;counter-reset:none}
.lider-satir{display:flex;align-items:baseline;gap:10px;padding:6px 8px;border-radius:8px;
  border-top:1px solid var(--cizgi)}
.lider-satir:first-child{border-top:0}
.lider-benim{background:var(--mod-ana-zemin)}            /* açık mavi vurgu */
.lider-sira{flex:0 0 auto;font-weight:700;color:var(--marka);min-width:1.6em}
.lider-ad{flex:1 1 auto;font-weight:500}
.lider-net{font-weight:700;color:var(--mavi)}
.lider-mertebe{color:var(--metin2);font-size:.9rem}
.lider-deneme{color:var(--metin2);font-size:.8rem;white-space:nowrap}
.lider-sen{margin-top:8px;font-weight:500;color:var(--mavi)}

/* ================================================================
   KAHOOT DERİSİ KATMANI  (v2 — CANLI sınıf adlarına göre düzeltildi)
   Kaynak karar: anayasa-tasarim-kahoot-derisi-guncellemesi.md
   KULLANIM: style.css'in EN SONUNA ekle. Canlı sınıfları (.kutu.plan-bugun,
   .kademe-serit, .lider-*, .mod-kartlar) override eder → çoğu blok için
   MARKUP DEĞİŞİKLİĞİ GEREKMEZ. Yalnız 3 yerde markup gerekir (kılavuza bak).
   Renkler mevcut paletten; tek yeni hex paylaşım kırmızısı.
   ================================================================ */

:root{
  --plan-yesil:#356218;      /* re-skin: birleşik koyu yeşil */
  --plan-yesil-koyu:#244510;
  --vurgu-kirmizi:#B5302A;   /* yalnız paylaşılır karne CTA'sı */
}

/* ---- 1) BUGÜNÜN PLANI → yeşil dolu hero  (SADECE CSS, markup yok) ----
   Canlı: <div class="kutu plan-bugun"> .plan-baslik .plan-sayi .plan-gauge(span+i.plan-alt) p.kucuk
   Şu an border-left altın (style.css:282) → yeşil dolguya çevrilir. */
/* re-skin: Bugünün planı → BEYAZ kart; sayı + çubuk yeşil */
.kutu.plan-bugun{background:var(--yuzey);color:var(--metin);border:1px solid var(--cizgi);border-left:0}
.kutu.plan-bugun .plan-baslik{color:var(--marka);opacity:1}
.kutu.plan-bugun .plan-sayi{font-size:2.1rem;font-weight:700;color:#356218;line-height:1.1}
.kutu.plan-bugun .plan-gauge{background:#eef1e6}
.kutu.plan-bugun .plan-gauge > span{background:#356218}
.kutu.plan-bugun .plan-gauge .plan-alt{background:var(--marka)}
.kutu.plan-bugun .kucuk{color:var(--metin2);opacity:1}
/* opsiyonel: plan kutusuna CTA eklenirse */
.kutu.plan-bugun .btn-plan{display:inline-block;background:var(--marka);color:#fff;
  border-radius:8px;padding:7px 14px;font-weight:600;font-size:.85rem;margin-top:8px}
.kutu.plan-bugun .btn-plan:hover{text-decoration:none;opacity:.92}

/* ---- 2) ÜÇ MOD → mavi dolu bant + numaralı adımlar  (MARKUP gerekir) ----
   index.php'de .mod-kartlar bloğu .mod-bant ile değişir (kılavuz §A). */
.mod-bant{background:var(--mavi);color:#fff;border-radius:var(--r);padding:18px 20px;margin:14px 0}
.mod-bant-baslik{font-size:1.05rem;font-weight:600;margin:0}
.mod-bant-alt{font-size:.85rem;opacity:.9;margin:2px 0 14px}
.mod-adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mod-adim{text-align:center}
.mod-adim-no{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--mavi);
  display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 8px}
.mod-adim-ad{font-size:.92rem;margin-bottom:8px}
.mod-adim .btn-adim,
.mod-acilir > summary{display:inline-block;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:8px;
  padding:6px 14px;font-size:.85rem;cursor:pointer;list-style:none}
.mod-adim .btn-adim:hover,
.mod-acilir > summary:hover{background:rgba(255,255,255,.28);text-decoration:none}

/* ---- 3) AÇILIR MENÜ  (CSS-only <details> — JS YOK = CSP korunur) ---- */
.mod-acilir{position:relative;display:inline-block}
.mod-acilir > summary::-webkit-details-marker{display:none}
.mod-acilir[open] > summary{background:#fff;color:var(--mavi);border-color:#fff}
.mod-acilir-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  min-width:160px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.16);padding:5px;z-index:30;text-align:left}
.mod-acilir-menu .secenek-form{margin:0}
.mod-acilir-menu .secenek-satir{display:block;width:100%;background:transparent;border:0;
  color:var(--metin);padding:7px 10px;border-radius:6px;font-size:.88rem;text-align:left;cursor:pointer}
.mod-acilir-menu .secenek-satir:hover{background:var(--mod-ana-zemin);color:var(--mavi);text-decoration:none}

/* ---- 4) DERS KADEMEM → iki sütun kutu  (SADECE CSS, markup yok) ----
   Canlı: <div class="kutu kademe-serit"> .kademe-baslik + N×.kademe-satir(.kademe-ust>.kademe-ders/.kademe-rozet, .kademe-bar>span, p.kucuk) */
.kutu.kademe-serit{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.kutu.kademe-serit .kademe-baslik{grid-column:1 / -1;margin:0 0 2px}
.kutu.kademe-serit .kademe-satir{border:1px solid var(--cizgi);border-radius:8px;padding:10px;margin:0}

/* ---- 5) LİDERLİK → DOKUNMA (canlı zaten §1.7: mavi/sakin, .lider-benim → --mod-ana-zemin) ----
   Yeni sınıf override etme; .lider-* olduğu gibi kalır. */

/* ---- 6) PAYLAŞILIR KARNE → kırmızı CTA kartı  (MARKUP: sağ sütuna ekle) ---- */
/* re-skin: Paylaşılır karnem → beyaz kart (alt ikili), lacivert CTA */
.paylas-kart{background:var(--yuzey);color:var(--metin);border:1px solid var(--cizgi);border-radius:var(--r);padding:14px}
.paylas-kart h3{margin:0 0 3px;font-size:1rem;font-weight:600;color:var(--marka)}
.paylas-kart p{margin:0 0 9px;font-size:.82rem;color:var(--metin2);line-height:1.4}
.paylas-kart .btn-paylas{display:inline-block;background:var(--marka);color:#fff;
  border-radius:8px;padding:5px 12px;font-weight:600;font-size:.82rem}
.paylas-kart .btn-paylas:hover{text-decoration:none;opacity:.92}

/* ---- 7) HİYERARŞİ — başlık sıçraması ---- */
.kokpit-baslik{font-size:1.3rem}

/* ---- 8) ANA SAYFA → üç sütun pano  (MARKUP: home bloklarını sar) ---- */
/* re-skin Parça 2: üç sütun → TEK sütun; bölümler tam genişlik. DOM kaynağı sırası
   (Bu hafta → kokpit[plan→nasıl→hazır→çip→kademe] → Sıralama/kart/karne) = hedef dikey sıra. */
.home-izgara{display:grid;grid-template-columns:1fr;gap:16px;
  align-items:start;margin-top:14px}
.home-sutun{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Sol kenar menü (230px) duruyor + içerik 880 cap → üç sütun sıkışıyordu. Home içeriğini
   genişlet (yalnız üç-sütun panoyu içerdiğinde; kılavuz §B "daha geniş kapsayıcı"). */
.icerik-ic:has(.home-izgara){max-width:880px}   /* re-skin Parça 2: tek sütun → normal içerik genişliği (1180 geniş-pano kalktı) */

/* re-skin Parça 3: dashboard kartlarında boşluk rötuşu (beyaz kart + yeşil çubuk renkleri Parça 1'den) */
.kutu.plan-bugun,.kutu.kokpit-hero,.kutu.kademe-serit{padding:18px}
/* re-skin Parça 3: SAĞ sütun → Sıralama tam genişlik, altında Paylaşılır karnem + Son karneler ALT İKİLİ.
   CSS-only: yalnız son .home-sutun grid'e alınır (diğer sütunlar etkilenmez); auto-fit tek öğe kalırsa
   tam genişliğe yayar → markup gerekmez, koşullu (paylas/karne yoksa) durumlar da temiz. */
.home-izgara>.home-sutun:last-child{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;align-items:start}
.home-izgara>.home-sutun:last-child>.liderlik{grid-column:1 / -1}

/* ---- 9) MOBİL — tek sütun (sol kenar menü/hamburger zaten mevcut, dokunulmaz) ---- */
@media (max-width:980px){
  .home-izgara{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mod-adimlar{grid-template-columns:1fr;gap:10px}
  .kutu.kademe-serit{grid-template-columns:1fr}
}

/* Faz 11: şüpheli bildirimde soru düzenleme formu (admin yönetim). Yeni renk yok. */
.soru-duzenle-kutu{margin:6px 0}
.soru-duzenle-kutu>summary{cursor:pointer;color:var(--mavi);font-weight:500}
.soru-duzenle{margin-top:10px;padding-top:8px;border-top:1px solid var(--cizgi)}
.soru-duzenle label{margin-top:10px}
.soru-duzenle .sik-satir{display:flex;gap:8px;align-items:center;margin:4px 0}
.soru-duzenle .sik-satir .sik-harf{font-weight:600;min-width:26px}
.soru-duzenle .sik-satir input{margin:0}
.soru-duzenle .havuz-onay{display:flex;align-items:center;gap:8px;font-weight:400}
.soru-duzenle .havuz-onay input{width:auto}

/* Faz8-2 ADIM 2: İlerlemem mertebe hero → DOLU MAVİ (yalnız .mertebe-dolu; karne dokunulmaz).
   Beyaz metin/iri net = güçlü hero; --mavi zemin (yeni renk yok). §1.4: yüksek kontrast. */
.mertebe.mertebe-dolu{background:var(--mavi);border-color:var(--mavi)}
.mertebe.mertebe-dolu .mertebe-net{color:#fff}
.mertebe.mertebe-dolu .mertebe-ad{color:#fff}
.mertebe.mertebe-dolu .kucuk{color:#fff;opacity:.92}
.mertebe.mertebe-dolu .rozet-etiket{background:rgba(255,255,255,.22);color:#fff}
/* Faz8-2 ADIM 3: İlerlemem kart başlıkları → marka navisi (hero altında net blok-başlığı
   katmanı, .kokpit-baslik ile uyumlu). Scope'lu; YALNIZ başlık metni — veri/çubuk/tablo nötr (§1.4). */
.ilerlemem .kutu h2{color:var(--marka)}
/* Faz8-2 rötuş: İlerlemem'de 0-deneme kullanıcıya da renk kimliği. AÇIK mod tonu zemin +
   sol kenar aksanı (DOLU/doygun DEĞİL → veri/çubuk okunur, §1.4). Yeni renk yok (mevcut palet). */
.ilerlemem .kutu-aksan-mavi{background:var(--mod-ana-zemin);border-left:3px solid var(--mavi)}
.ilerlemem .kutu-aksan-yesil{background:var(--mod-konu-zemin);border-left:3px solid var(--mod-konu-ikon)}

/* Faz 7: Son karneler — sakin/beyaz .kutu; yeni renk yok (mevcut değişkenler). */
.son-karneler h3{margin:0 0 6px;font-size:1rem;color:var(--marka)}
.son-karne-satir{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-top:1px solid var(--cizgi);color:var(--metin)}
.son-karne-satir:first-of-type{border-top:0}
.son-karne-satir .sk-tarih{color:var(--metin2);font-size:.85rem}
.son-karne-satir .sk-net{font-weight:500;white-space:nowrap}
.son-karne-satir:hover{text-decoration:none;color:var(--mavi)}

/* Çok sınavlılık (Faz 3) — sınav seçim sekmeleri + tarih penceresi seçici.
   Yeni renk YOK; mevcut CSS değişkenleri. Tek sınavda bu öğeler hiç render edilmez. */
.sinav-secim{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* re-skin Parça 3: sınav seçici → tek-parça segment (yatak #e8dfca, aktif lacivert pill, pasifler sade) */
.sinav-sekmeler{display:inline-flex;gap:2px;flex-wrap:wrap;background:#e8dfca;border-radius:var(--r);padding:3px}
.sinav-sekme-form{margin:0;display:flex}
.sinav-sekme{display:inline-block;padding:6px 14px;border:0;border-radius:9px;
  background:transparent;color:var(--metin);font-size:.92rem;cursor:pointer}
.sinav-sekme:hover{background:rgba(0,0,0,.06);color:var(--marka)}
.sinav-sekme.aktif{background:var(--marka);color:#fff;font-weight:600}
.pencere-secici{margin:4px 0 12px}
.pencere-secici .kucuk{margin:0 0 6px}

/* Aktif sınav görünürlüğü (UX, salt-görünüm) — rozet + İlerlemem vurgu + seçici çerçeve. */
.uc-aktif-sinav{display:inline-flex;align-items:center;gap:5px;background:var(--marka);color:#fff;
  border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:600;white-space:nowrap}
.uc-aktif-sinav .uc-as-ikon{font-size:.9em;line-height:1}
.uc-nav .uc-nav-vurgu{color:var(--marka);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px}
.uc-nav .uc-nav-vurgu:hover{color:var(--mavi)}
/* "Ana Sayfa"da aktif/"buradasın" işareti (aria-current) — no-op linkin bozuk hissini giderir. */
.uc-nav a.uc-nav-aktif{color:var(--marka);font-weight:700;background:var(--mod-ana-zemin)}
/* Misafir "Misafir oturumundan çık" — bir ton daha kırmızı: açık-kırmızı dolgu + kırmızı kenarlık/
   yazı (Kaydol baskın dolu-mavi kalsın; parlak-dolu kırmızı değil). */
.btn-cik-misafir{background:var(--yanlis-zemin);color:var(--yanlis-cizgi);border:1px solid var(--yanlis-cizgi)}
.btn-cik-misafir:hover{background:#f3cccc}
.sinav-secim-baslik{color:var(--marka);font-weight:700;font-size:.95rem}
.sinav-secim-ipucu{flex-basis:100%;margin:6px 0 0}

/* Karne → İlerlemem derin link: CSP-güvenli yumuşak kaydırma (JS yok) + sticky üst-bar payı. */
html{scroll-behavior:smooth}
#en-cok-zorlandigin{scroll-margin-top:80px}

/* Ana sayfa "Son rozetin" kartı — rozet çipi (mevcut .rozet.mt/.us/.ge vokabülerini kullanır). */
.son-rozet .rozet{margin:8px 0 0}

/* ============================================================
   MEYDAN OKUMA (Challenge / Düello) — Faz 0. Mevcut değişkenler; yeni renk yok.
   ============================================================ */
a.btn.ikincil{background:var(--yuzey);color:var(--mavi);border:1px solid var(--mavi)}
.meydan-kanunlar{margin:6px 0 4px}
.etiket{font-weight:600;margin:14px 0 6px;color:var(--metin)}
.meydan-rumuz{width:100%;max-width:320px;padding:10px 12px;border:1px solid var(--cizgi);
  border-radius:8px;font-size:1rem;background:var(--yuzey);color:var(--metin)}
.meydan-butonlar{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.meydan-ust{display:flex;justify-content:space-between;align-items:center;
  color:var(--metin2);font-size:.9rem;margin-bottom:8px}
.meydan-kanun{font-weight:600;color:var(--mavi)}
.meydan-rakip-serit{background:var(--mod-ana-zemin);border:1px solid var(--mavi);
  border-radius:8px;padding:8px 12px;margin:8px 0;font-size:.92rem;text-align:right}
.meydan-sayac{text-align:right;color:var(--amber);font-weight:600;margin:6px 0 12px}
.meydan-sayac #geri-sayim{font-variant-numeric:tabular-nums}
.meydan-bekleme{text-align:center}
.meydan-spinner{font-size:1.6rem;margin:12px 0}
.meydan-paylas-serit{background:var(--mod-hizli-zemin);border:1px solid var(--mod-hizli-ikon);
  border-radius:8px;padding:10px 12px;margin:0 0 12px}
.meydan-paylas-serit p{margin:2px 0}
.meydan-tiebreak{color:var(--amber);margin-top:4px}
.meydan-review-baslik{margin:20px 0 8px}
.meydan-link{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.meydan-link input{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--cizgi);
  border-radius:8px;background:var(--zemin);color:var(--metin);font-size:.9rem}
.meydan-poll-durdu{color:var(--metin2);margin-top:10px}
.meydan-skor-tablo{margin:12px 0}
.meydan-skor-satir{display:flex;justify-content:space-between;padding:10px 12px;
  border:1px solid var(--cizgi);border-radius:8px;margin:6px 0}
.meydan-skor-satir.sen{border-color:var(--mavi);background:var(--mod-ana-zemin);font-weight:600}
.meydan-skor-satir .ms-net{font-variant-numeric:tabular-nums;color:var(--metin2)}
.meydan-sonuc h2{margin-top:0}
.meydan-sonuc.kazandi h2{color:var(--dogru-cizgi)}
.meydan-sonuc.kaybetti h2{color:var(--yanlis-cizgi)}
.meydan-sonuc.berabere h2{color:var(--amber)}
.meydan-teaser{margin-top:12px}