/* BayMatematik — sade, telefon öncelikli; geniş ekranda (akıllı tahta) büyür */
:root{
  --mavi:#1D4ED8; --mavi-koyu:#1E3A8A; --mavi-acik:#E0E7FF; --mavi-zemin:#EEF2FF;
  --turuncu:#C2410C; --turuncu-acik:#FFEDD5;
  --yesil:#0F766E; --yesil-acik:#CCFBF1;
  --mor:#7C3AED; --mor-acik:#EDE9FE;
  --zemin:#F4F6FA; --kart:#FFFFFF; --cizgi:#E2E8F0; --cizgi-koyu:#CBD5E1;
  --metin:#0F172A; --metin-2:#334155; --soluk:#475569;
  --r:16px; --nav-h:78px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --baslik:'Outfit','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--metin);background:var(--zemin);line-height:1.45}
a{color:var(--mavi);text-decoration:none}
a:hover{color:var(--mavi-koyu)}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--baslik);margin:0;line-height:1.2}
:focus-visible{outline:3px solid #F59E0B;outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- iskelet ---------- */
.app{min-height:100vh}
.main{max-width:640px;margin:0 auto;padding:0 1.25rem calc(var(--nav-h) + 1.5rem)}
.main:focus{outline:none}
.loading{padding:3rem 0;text-align:center;color:var(--soluk)}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--cizgi);padding:6px 4px calc(10px + env(safe-area-inset-bottom))}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;min-height:44px;color:var(--soluk);font-size:.6875rem;font-weight:600}
.nav a .ic{display:flex;padding:4px 14px;border-radius:999px}
.nav a[aria-current="page"]{color:var(--mavi)}
.nav a[aria-current="page"] .ic{background:var(--mavi-acik)}
.nav .logo{display:none}

.ust{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1rem 0 .25rem}
.marka{display:flex;align-items:center;gap:10px;color:var(--metin)}
.pi{width:40px;height:40px;border-radius:12px;background:var(--mavi);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--baslik);font-size:22px;font-weight:700;flex:none}
.marka b{display:block;font-family:var(--baslik);font-size:1.2rem}
.marka small{display:block;font-size:.75rem;color:var(--soluk)}
.sayfa-bas{padding:1.1rem 0 .4rem}
.sayfa-bas h1{font-size:1.65rem}
.sayfa-bas p{margin:.25rem 0 0;color:var(--soluk);font-size:.9rem}
.yigin{display:flex;flex-direction:column;gap:14px;padding-top:10px}
.ornek-serit{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:#FEF3C7;color:#78350F;font-size:.8rem}

/* ---------- ortak bileşenler ---------- */
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:16px}
.kart h2{font-size:1.05rem;margin-bottom:8px}
.etiket{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--soluk);text-transform:uppercase}
.soluk{color:var(--soluk)}
.kucuk{font-size:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--mavi);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;text-align:center}
.btn:hover{background:var(--mavi-koyu);color:#fff}
.btn.ikincil{background:var(--mavi-zemin);color:var(--mavi)}
.btn.ikincil:hover{background:var(--mavi-acik)}
.btn.cizgili{background:#fff;color:var(--metin);border:1px solid var(--cizgi-koyu)}
.btn.tehlike{background:#fff;color:#B91C1C;border:1px solid #FECACA}
.btn.tam{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.rozet{display:inline-block;font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px}
.cubuk{height:10px;border-radius:999px;background:var(--cizgi);display:flex;overflow:hidden}
.cubuk > span{border-radius:999px;background:var(--yesil)}
.cubuk > span.bar-0{background:#16A34A}.cubuk > span.bar-1{background:#CA8A04}.cubuk > span.bar-2{background:#EA580C}.cubuk > span.bar-3{background:#DC2626}
.izgara-2,.izgara-3{display:flex;flex-direction:column;gap:14px}
input,select{font:inherit;color:var(--metin)}
.alan{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600}
.alan input,.alan select{min-height:46px;padding:0 12px;border:1px solid var(--cizgi-koyu);border-radius:12px;background:#fff;font-weight:400;font-size:.95rem;min-width:0}

/* sekmeler */
.sekmeler{display:flex;padding:4px;background:var(--cizgi);border-radius:12px}
.sekmeler button{flex:1;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--soluk);font-weight:600;font-size:.875rem;cursor:pointer}
.sekmeler button[aria-selected="true"]{background:#fff;color:var(--metin)}
.siniflar{display:flex;gap:8px}
.siniflar button{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--cizgi-koyu);background:#fff;font-weight:600;font-size:.875rem;cursor:pointer}
.siniflar button[aria-pressed="true"]{background:var(--mavi);border-color:var(--mavi);color:#fff}
.secici{display:flex;flex-direction:column;gap:10px}

/* ana sayfa */
.selam{font-size:1.65rem}
.vurgu{display:flex;gap:12px;align-items:center;padding:16px;border-radius:var(--r);background:var(--mavi);color:#fff}
.vurgu:hover{color:#fff;background:var(--mavi-koyu)}
.vurgu .etiket{color:#C7D2FE}
.vurgu b{display:block;font-family:var(--baslik);font-size:1.1rem}
.vurgu small{color:#E0E7FF;font-size:.8rem}
.kutular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kutu{background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;color:var(--metin);min-height:112px}
.kutu:hover{color:var(--metin);border-color:var(--cizgi-koyu)}
.kutu .ik{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.kutu b{font-family:var(--baslik);font-size:1.05rem}
.kutu small{color:var(--soluk);font-size:.8rem}
.ipucu{display:flex;gap:12px;align-items:flex-start}
.tahta-only{display:none}

/* çalış */
.ara{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;background:#fff;border:1px solid var(--cizgi-koyu);border-radius:12px}
.ara input{border:0;outline:0;flex:1;background:transparent;font-size:.95rem;min-width:0}
.cipler{display:flex;flex-wrap:wrap;gap:8px}
.cip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:10px;background:#F1F5F9;color:#1E293B;font-size:.85rem;font-weight:600}
.cip[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* sonuçlar */
.ozet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ozet .kart{padding:12px;display:flex;flex-direction:column;gap:2px}
.ozet span{font-size:.75rem;color:var(--soluk)}
.ozet b{font-family:var(--baslik);font-size:1.55rem}
.tablo-kutu{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
table.liste th,table.liste td{padding:9px 6px;text-align:right;border-top:1px solid var(--cizgi)}
table.liste thead th{font-size:.7rem;color:var(--soluk);font-weight:600;border-top:0}
table.liste th[scope="row"],table.liste thead th:first-child{text-align:left;padding-left:0;white-space:nowrap}
.puan{display:inline-block;min-width:40px;padding:3px 6px;border-radius:8px;font-weight:700;text-align:center}
.sev-0{background:#DCFCE7;color:#166534}.sev-1{background:#FEF9C3;color:#854D0E}.sev-2{background:#FFEDD5;color:#9A3412}.sev-3{background:#FEE2E2;color:#991B1B}
.bar-0{background:#16A34A}.bar-1{background:#CA8A04}.bar-2{background:#EA580C}.bar-3{background:#DC2626}
.dagilim{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dagilim li{display:flex;flex-direction:column;gap:6px}
.dagilim .sat{display:flex;justify-content:space-between;font-size:.82rem}
.dagilim .cubuk{background:#F1F5F9}
.satirlar{list-style:none;margin:0;padding:0}
.satirlar > li{padding:12px 0;border-top:1px solid var(--cizgi);display:flex;flex-direction:column;gap:6px}
.satirlar > li:first-child{border-top:0}
.ust-sat{display:flex;justify-content:space-between;align-items:center;gap:8px}
.yildiz{display:flex;align-items:center;gap:10px}
.sira{width:28px;height:28px;flex:none;border-radius:999px;background:#FEF3C7;color:#92400E;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.olcek{display:flex;gap:6px}
.olcek div{flex:1;padding:8px 6px;border-radius:10px;font-size:.7rem;display:flex;flex-direction:column;gap:2px}
.olcek div.secili{outline:2px solid currentColor}
.sinav-cubuk{position:relative;height:10px;border-radius:999px;background:var(--cizgi)}
.sinav-cubuk .d{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--mavi)}
.sinav-cubuk .o{position:absolute;top:-4px;width:3px;height:18px;border-radius:2px;background:var(--metin)}
.kod-form{display:flex;gap:8px;align-items:flex-end}

/* ödevler */
.adim{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);padding:14px}
.adim.bitti{border-color:#99F6E4}
.adim .tik{flex:none;width:44px;height:44px;border-radius:12px;border:2px solid #94A3B8;background:#fff;color:var(--yesil);font-size:1.3rem;font-weight:700;cursor:pointer}
.adim.bitti .tik{background:var(--yesil);border-color:var(--yesil);color:#fff}
.adim .govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.adim .ne{font-family:var(--baslik);font-size:1.02rem;font-weight:700}
.adim.bitti .ne{color:var(--soluk);text-decoration:line-through}
.tur-kitap{background:var(--mavi-acik);color:var(--mavi)}
.tur-kagit{background:var(--yesil-acik);color:var(--yesil)}
.tur-soru{background:var(--turuncu-acik);color:#9A3412}
.tur-ek{background:var(--mor-acik);color:#5B21B6}
.dur-ok{background:#DCFCE7;color:#166534}.dur-half{background:#FFEDD5;color:#9A3412}.dur-no{background:#FEE2E2;color:#991B1B}.dur-wait{background:var(--cizgi);color:var(--soluk)}
.not svg,.ipucu svg,.satir-link svg{flex:none}
.not{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:#F1F5F9;font-size:.82rem;color:var(--metin-2)}
.bos{text-align:center;padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.satir-link{display:flex;align-items:center;gap:12px;color:var(--metin)}
.satir-link:hover{color:var(--metin)}

/* kontrol */
.sayaclar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sayaclar div{padding:8px;border-radius:10px;display:flex;flex-direction:column;align-items:center;font-size:.7rem;font-weight:600}
.sayaclar b{font-family:var(--baslik);font-size:1.25rem}
.isaret-liste{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
.isaret-liste li{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-top:1px solid #F1F5F9}
.isaret-liste li:first-child{border-top:0}
.isaret-liste .no{width:24px;flex:none;text-align:right;font-size:.75rem;color:var(--soluk);font-weight:600}
.isaret-liste .ad{flex:1;min-width:0;font-weight:600}
.isaret-liste button{width:44px;height:44px;flex:none;border-radius:12px;background:#fff;font-weight:700;font-size:1.1rem;cursor:pointer}
.i-ok{color:#15803D;border:2px solid #BBF7D0}.i-ok[aria-pressed="true"]{background:#15803D;color:#fff;border-color:#15803D}
.i-half{color:#C2410C;border:2px solid #FED7AA}.i-half[aria-pressed="true"]{background:#C2410C;color:#fff;border-color:#C2410C}
.i-no{color:#B91C1C;border:2px solid #FECACA}.i-no[aria-pressed="true"]{background:#B91C1C;color:#fff;border-color:#B91C1C}
.yapiskan{position:sticky;bottom:calc(var(--nav-h) + 8px);display:flex;gap:10px;align-items:center;padding:10px 12px;background:#fff;border:1px solid var(--cizgi);border-radius:14px;box-shadow:0 4px 16px rgba(15,23,42,.08)}

/* oyunlar */
.oyun-vurgu{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r);background:var(--mor);color:#fff}
.oyun-vurgu:hover{color:#fff;background:#6D28D9}
.oyun-vurgu .etiket{color:#EDE9FE}
.oyun-vurgu b{font-family:var(--baslik);font-size:1.25rem}
.oyun-vurgu .git{align-self:flex-start;margin-top:6px;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:10px;background:#fff;color:#5B21B6;font-weight:600;font-size:.9rem}
.araclar{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.araclar button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--cizgi-koyu);background:#fff;color:var(--metin-2);font-weight:600;font-size:.82rem;cursor:pointer}
.araclar button[aria-pressed="true"]{background:var(--metin);border-color:var(--metin);color:#fff}
.oyun{display:flex;gap:12px;align-items:center}
.oyun .ik{width:56px;height:56px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center}
.oyun .bilgi{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.oyun .bilgi b{font-family:var(--baslik);font-size:1rem}
.oyna{width:44px;height:44px;flex:none;border-radius:12px;background:var(--mavi);display:flex;align-items:center;justify-content:center}

/* öğretmen */
.dosya-sec{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px;border-radius:18px;border:2px dashed #93A4C3;background:#fff;cursor:pointer;text-align:center}
.dosya-sec.uzerinde{background:var(--mavi-zemin);border-color:var(--mavi)}
.adimlar{display:flex;gap:6px}
.adimlar span{flex:1;text-align:center;padding:6px 0;border-radius:8px;font-size:.75rem;font-weight:700;background:var(--cizgi);color:var(--soluk)}
.adimlar span.simdi{background:var(--mavi);color:#fff}
.adimlar span.gecti{background:var(--yesil-acik);color:#115E59}
.uyari{margin:0;padding:10px 12px;border-radius:10px;font-size:.88rem;font-weight:600}
.uyari.iyi{background:#DCFCE7;color:#14532D}
.uyari.dikkat{background:#FFEDD5;color:#7C2D12}
.uyari.hata{background:#FEE2E2;color:#7F1D1D}
.nasil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nasil li{display:flex;gap:10px;font-size:.88rem;color:var(--metin-2)}
.nasil li>span:first-child{width:24px;height:24px;flex:none;border-radius:999px;background:var(--mavi-acik);color:var(--mavi);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.alt-bilgi{margin-top:28px;padding:16px 0;text-align:center;font-size:.75rem;color:var(--soluk);display:flex;flex-direction:column;gap:8px;align-items:center}
.alt-bilgi a,.alt-bilgi button{color:var(--soluk);text-decoration:underline;background:none;border:0;cursor:pointer;font-size:.75rem;min-height:32px}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--metin);color:#fff;padding:10px 16px;border-radius:12px;font-size:.9rem;font-weight:600;transition:all .2s;z-index:50;max-width:90vw;text-align:center}
.toast.acik{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- AKILLI TAHTA (geniş ekran) ---------- */
html.tahta{font-size:125%}
body.tahta{font-size:1rem}
body.tahta .app{display:flex}
body.tahta .nav{position:sticky;top:0;align-self:flex-start;bottom:auto;left:auto;right:auto;height:100vh;width:168px;flex:none;flex-direction:column;gap:10px;padding:28px 16px;border-top:0;border-right:1px solid var(--cizgi)}
body.tahta .nav a{flex:none;padding:18px 8px;border-radius:20px;font-size:1rem;gap:8px}
body.tahta .nav a .ic{padding:0;background:transparent!important}
body.tahta .nav a .ic svg{width:40px;height:40px}
body.tahta .nav a[aria-current="page"]{background:var(--mavi-acik)}
body.tahta .main{max-width:none;flex:1;min-width:0;padding:32px 48px 40px}
body.tahta .tahta-only{display:block}
body.tahta .telefon-only{display:none!important}
body.tahta .siniflar button,body.tahta .btn{min-height:64px;font-size:1.1rem;border-radius:16px}
body.tahta .sekmeler button{min-height:56px;font-size:1rem}
body.tahta .sayfa-bas h1,body.tahta .selam{font-size:2.6rem}
body.tahta .yigin{gap:24px}
body.tahta .kart{border-radius:24px;padding:28px 32px}
body.tahta .izgara-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
body.tahta .izgara-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
body.tahta .kutular{grid-template-columns:repeat(4,minmax(0,1fr))}
body.tahta .toast{bottom:32px}
body.tahta .yapiskan{bottom:16px}
.tahta-ana{display:grid;grid-template-columns:2fr 1fr;gap:28px}
.konu-buyuk{font-size:3.4rem;line-height:1.05;font-family:var(--baslik);font-weight:700;margin:.4rem 0}
.soru-buyuk{font-family:var(--baslik);font-size:1.8rem;line-height:1.3;font-weight:600}

/* logo */
.logo-isaret{width:44px;height:44px;flex:none;display:block}
.marka-yazi{display:block;font-family:var(--font);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;color:#111827}
.marka-yazi span{color:#D97706}
.marka small{display:block;font-size:.75rem;color:var(--soluk)}
.nav .logo{display:none}
body.tahta .nav .logo{display:block;align-self:center;margin-bottom:18px;padding:0;background:none!important}
body.tahta .nav .logo .logo-isaret{width:84px;height:84px}
.tahta-marka{display:flex;align-items:center;gap:20px}
.tahta-marka .logo-isaret{width:84px;height:84px}
.tahta-marka .marka-yazi{font-size:inherit;font-weight:600}
fieldset{min-width:0}

/* ---------- Videolar (izleme kaydı tutulmaz) ---------- */
.adim-bas{display:flex;align-items:center;gap:8px;font-size:.95rem;margin:14px 0 8px}
.adim-bas span{width:26px;height:26px;border-radius:8px;background:var(--mavi);color:#fff;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.video-kart{all:unset;box-sizing:border-box;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #E2E8F0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.video-kart:hover,.video-kart:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.12)}
.video-kart:focus-visible{outline:3px solid var(--turuncu);outline-offset:2px}
.video-kart .kapak{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1F3A8A 0%,#2563EB 60%,#F97316 140%);display:block;overflow:hidden}
.video-kart .kapak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-kart .oynat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(220,38,38,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s}
.video-kart:hover .oynat{transform:translate(-50%,-50%) scale(1.1)}
.video-kart .liste-etiket{position:absolute;right:6px;bottom:6px;background:rgba(15,23,42,.8);color:#fff;font-size:.7rem;padding:2px 6px;border-radius:6px}
.video-kart .vk-alt{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;font-size:.88rem;line-height:1.25}
.bos-video{cursor:default;opacity:.75}.bos-video .oynat{background:rgba(100,116,139,.85)}
.bos-video:hover{transform:none;box-shadow:none}
.video-pencere{width:min(960px,96vw);padding:0;border:0;border-radius:16px;background:#0F172A;color:#fff}
.video-pencere::backdrop{background:rgba(15,23,42,.75)}
.vp-ust{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.vp-ust .btn{color:#fff;background:transparent;border:1px solid #475569;min-height:40px;min-width:40px;padding:0 12px}
.vp-oran{position:relative;aspect-ratio:16/9;background:#000}
.vp-oran iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-alt{margin:0;padding:8px 12px 12px;font-size:.85rem}.vp-alt a{color:#93C5FD}
html.tahta .video-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ---------- Öğretim programı: temalar ---------- */
.program-bant{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tema-cipler{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tema-cipler button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--cizgi);background:#fff;color:var(--metin);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
.tema-cipler button[aria-pressed="true"]{background:var(--mavi-koyu);border-color:var(--mavi-koyu);color:#fff}
.tema-cipler button[aria-pressed="true"] svg{stroke:#fff}
.tema-cipler em{font-style:normal;font-size:.72rem;background:var(--mavi-acik);color:var(--mavi-koyu);border-radius:999px;padding:1px 7px}
.tema-cipler button[aria-pressed="true"] em{background:rgba(255,255,255,.2);color:#fff}
.tema-bolum{display:flex;flex-direction:column;gap:12px}
.tema-bas{display:flex;align-items:center;gap:12px;margin:8px 0 0;font-size:1.15rem}
.tema-bas .ik{width:44px;height:44px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center}
.tema-bas small{display:block;font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soluk)}
details.sonraki summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
details.sonraki ol{margin:8px 0 0;padding-left:1.4em;color:var(--soluk);font-size:.9rem;display:flex;flex-direction:column;gap:4px}

/* ---------- Kodla ---------- */
.vurgu.kodla-renk{background:linear-gradient(135deg,#C2410C,#EA580C)}
.vurgu.kodla-renk:hover{background:#9A3412}
.vurgu.kodla-renk .etiket{color:#FFEDD5}.vurgu.kodla-renk small{color:#FFEDD5}
.kodla-vurgu{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r);color:#fff;background:linear-gradient(135deg,#C2410C 0%,#EA580C 60%,#F59E0B 130%);position:relative;overflow:hidden}
.kodla-vurgu::after{content:"{ }";position:absolute;right:14px;top:-6px;font:700 5rem/1 var(--baslik);color:rgba(255,255,255,.14)}
.kodla-vurgu .etiket{color:#FFEDD5}
.kodla-vurgu b{font-family:var(--baslik);font-size:1.35rem;line-height:1.2}
.kodla-vurgu > span:not(.etiket){color:#FFF7ED;font-size:.9rem}
.kodla-vurgu .git{all:unset;box-sizing:border-box;align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:#fff;color:#C2410C;font-weight:700;cursor:pointer}
.kodla-vurgu .git:focus-visible{outline:3px solid #fff;outline-offset:2px}
.uc-adim{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.uc-adim li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:14px;background:#F8FAFC}
.uc-adim span{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.uc-adim b{font-family:var(--baslik)}
.uc-adim small{color:var(--soluk);font-size:.78rem;line-height:1.3}
.arac-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.arac-kart{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);background:#fff;border:1px solid var(--cizgi);border-left:6px solid var(--a);color:var(--metin);transition:transform .15s,box-shadow .15s}
.arac-kart:hover{color:var(--metin);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.10)}
.arac-kart .ik{width:48px;height:48px;flex:none;border-radius:14px;background:var(--b);display:flex;align-items:center;justify-content:center}
.arac-kart .bilgi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.arac-kart .bilgi b{font-family:var(--baslik);font-size:1.02rem}
.arac-kart .git{flex:none;display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--a);font-size:.85rem}
@media (max-width:420px){.uc-adim{grid-template-columns:1fr}.uc-adim li{flex-direction:row;align-items:center;flex-wrap:wrap}.uc-adim small{flex-basis:100%}.arac-kart .git{display:none}}
html.tahta .kodla-vurgu b{font-size:2rem}

/* ---------- Ödev kontrolü: tablo ---------- */
.k-tablo{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--cizgi);border-radius:var(--r);font-size:.9rem}
.k-tablo th,.k-tablo td{padding:6px;border-top:1px solid #F1F5F9;text-align:center;vertical-align:middle}
.k-tablo thead th{border-top:0;vertical-align:top;background:#F8FAFC;min-width:84px}
.k-tablo thead th:first-child{border-top-left-radius:var(--r)}.k-tablo thead th:last-child{border-top-right-radius:var(--r)}
.k-tablo tbody th{text-align:left;font-weight:600;white-space:nowrap;position:sticky;left:0;background:#fff;z-index:1}
.k-tablo tbody th .no{display:inline-block;width:22px;color:var(--soluk);font-size:.72rem}
.k-bas{display:block;font-family:var(--baslik);font-size:.85rem}
.k-alt{display:block;font-size:.68rem;font-weight:500;color:var(--soluk);line-height:1.2;margin-top:2px}
.k-say{display:block;font-size:.66rem;font-weight:600;color:var(--soluk);margin-top:4px}
.k-hepsi{margin-top:6px;min-height:32px;padding:0 8px;border-radius:8px;border:1px solid #BBF7D0;background:#F0FDF4;color:#15803D;font:inherit;font-size:.7rem;font-weight:700;cursor:pointer}
.k-kutu{width:48px;height:48px;border-radius:12px;border:2px solid #CBD5E1;background:#fff;font-size:1.35rem;font-weight:800;cursor:pointer;color:transparent}
.k-kutu:focus-visible{outline:3px solid var(--turuncu);outline-offset:2px}
.k-kutu.k-ok{background:#15803D;border-color:#15803D;color:#fff}
.k-kutu.k-half{background:#FEF3C7;border-color:#F59E0B;color:#B45309}
.k-kutu.k-no{background:#FEE2E2;border-color:#EF4444;color:#B91C1C}

/* ---------- Haftanın sorusu: Pólya ---------- */
.polya{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:6px}
.polya li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:#F8FAFC;color:var(--soluk)}
.polya li.acik{background:var(--b);color:var(--metin)}
.polya .pn{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;background:#fff;color:var(--a);border:2px solid var(--a)}
.polya li.acik .pn{background:var(--a);color:#fff}
.polya b{font-family:var(--baslik);font-size:.95rem;display:block;line-height:26px}
.polya .pq{display:block;font-size:.8rem;color:var(--a);font-weight:600;margin-bottom:2px}
.polya p{margin:4px 0 0;line-height:1.45}
.polya .cevap{font-family:var(--baslik);font-weight:800;color:var(--yesil);font-size:1.15rem}
html.tahta .polya b{font-size:1.15rem}html.tahta .polya .pq{font-size:1rem}

/* ---------- Kodla: 4 adım ve beceriler ---------- */
.uc-adim.dort{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.uc-adim.dort{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cip.bid{flex-direction:column;align-items:flex-start;gap:0;padding:6px 12px;background:#F8FAFC;border:1px dashed #CBD5E1}
.cip.bid small{font-weight:500;color:var(--soluk);font-size:.72rem}
.arac-kart .etiketler{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.arac-kart .etiketler em{font-style:normal;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--b);color:var(--a)}

/* ---------- Karşılama ---------- */
.karsilama{position:relative;overflow:hidden;border-radius:22px;padding:22px 18px 16px;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#2563EB 0%,#1E3A8A 55%,#312E81 100%)}
.karsilama h1{position:relative;margin:0;font-family:var(--baslik);font-size:1.55rem;line-height:1.2;font-weight:800}
.karsilama .r1{color:#FBBF24}.karsilama .r2{background:linear-gradient(90deg,#F472B6,#A78BFA,#34D399);-webkit-background-clip:text;background-clip:text;color:transparent}
.karsilama > p{position:relative;margin:.5rem 0 0;color:#DBEAFE;font-size:.95rem}
.karsilama .merak{position:relative;margin-top:14px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.12);backdrop-filter:blur(2px);font-size:.85rem;line-height:1.4;color:#EFF6FF}
.karsilama .merak b{color:#FDE047}
.karsilama .semboller{display:flex;gap:12px;margin-bottom:10px;font-family:var(--baslik);font-weight:800;font-size:1.35rem;line-height:1}
.karsilama .semboller span{display:inline-block;animation:zipla 2.8s ease-in-out infinite}
@keyframes zipla{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.karsilama .semboller span{animation:none}}
.karsilama.buyuk .semboller{font-size:2rem;gap:20px}
.karsilama.buyuk{padding:34px 40px 26px}
.karsilama.buyuk h1{font-size:2.6rem}.karsilama.buyuk > p{font-size:1.25rem}.karsilama.buyuk .merak{font-size:1.1rem;max-width:70%}
html.tahta .tahta-only .karsilama{margin-top:4px}

/* ---------- Pólya: sade şerit ---------- */
.polya-serit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:8px}
.polya-serit button{min-height:40px;border-radius:10px;border:0;background:#F1F5F9;color:var(--soluk);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;padding:0 4px}
.polya-serit button[aria-selected="true"]{background:var(--a);color:#fff}
.polya-kutu{padding:12px 14px;border-radius:14px;background:var(--b);margin-bottom:10px}
.polya-kutu .pq{display:block;font-size:.82rem;font-weight:700;color:var(--a)}
.polya-kutu p{margin:6px 0 0;line-height:1.45}
.cevap-satir{margin:0 0 10px;font-family:var(--baslik);font-weight:800;color:var(--yesil);font-size:1.2rem}
html.tahta .polya-serit button{min-height:52px;font-size:1.05rem}html.tahta .polya-kutu .pq{font-size:1.05rem}

/* ---------- Kodla şeridi ---------- */
.kodla-serit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--baslik);font-weight:800;font-size:1.05rem;padding:4px 2px}
.kodla-serit i{font-style:normal;color:#CBD5E1;font-weight:400}
.adim-bas span svg{display:block}

/* =====================================================================
   ANA TEMALAR · html[data-tema="gokyuzu" | "pastel" | "okyanus"]
   Ortak: yumuşak gölgeli beyaz kartlar, geniş köşeler, renkli karşılama.
   ===================================================================== */
:root{
  --r:20px; --golge:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);
  --ana:#3B5BDB; --ana-koyu:#2B44B0; --ana-acik:#E5EBFF; --vurgu-renk:#FF8A00;
  --hero:linear-gradient(135deg,#4C6EF5 0%,#7048E8 100%);
  --zemin-desen:radial-gradient(1100px 420px at 50% -160px,#DCE4FF 0%,transparent 70%);
  --zemin:#F6F8FF; --cizgi:#E7EAF3; --cizgi-koyu:#D5DAE6;
}
html[data-tema="pastel"]{
  --ana:#7048E8; --ana-koyu:#5A36C9; --ana-acik:#EFE9FF; --vurgu-renk:#FF6B6B;
  --hero:linear-gradient(120deg,#7048E8 0%,#D6336C 100%);
  --zemin-desen:radial-gradient(1100px 420px at 50% -160px,#FFE3D6 0%,transparent 70%);
  --zemin:#FFF9F3; --cizgi:#F1E6DC; --cizgi-koyu:#E3D3C4;
}
html[data-tema="okyanus"]{
  --ana:#0C8599; --ana-koyu:#0B7285; --ana-acik:#DDF6F8; --vurgu-renk:#F59F00;
  --hero:linear-gradient(135deg,#0C8599 0%,#1C7ED6 100%);
  --zemin-desen:radial-gradient(1100px 420px at 50% -160px,#D3F5F7 0%,transparent 70%);
  --zemin:#F4FBFC; --cizgi:#E1EFF1; --cizgi-koyu:#C9DFE3;
}
:root,html[data-tema]{--mavi:var(--ana);--mavi-koyu:var(--ana-koyu);--mavi-acik:var(--ana-acik);--mavi-zemin:var(--ana-acik);--lacivert:var(--ana)}
body{background:var(--zemin-desen) no-repeat,var(--zemin);background-attachment:fixed}

.kart,.video-kart,.arac-kart{border:1px solid var(--cizgi);box-shadow:var(--golge)}
.sayfa-bas h1{color:var(--metin)}
.etiket{letter-spacing:.05em}

.btn{border-radius:14px}
.btn:not(.ikincil):not(.cizgili):not(.tehlike){background:var(--ana)}
.btn:not(.ikincil):not(.cizgili):not(.tehlike):hover{background:var(--ana-koyu)}
.btn.ikincil{background:var(--ana-acik);color:var(--ana-koyu)}

.sekmeler{background:rgba(255,255,255,.7);border:1px solid var(--cizgi);box-shadow:var(--golge)}
.sekmeler button[aria-selected="true"]{background:var(--ana);color:#fff;font-weight:700}
.siniflar button{border:1px solid var(--cizgi);background:#fff;box-shadow:var(--golge);border-radius:14px}
.siniflar button[aria-pressed="true"],.tema-cipler button[aria-pressed="true"]{background:var(--ana);border-color:var(--ana);color:#fff}
.tema-cipler button{border:1px solid var(--cizgi);box-shadow:var(--golge)}

.karsilama{background:var(--hero);box-shadow:0 10px 30px -10px rgba(40,40,90,.45);border-radius:24px}
.karsilama::after{content:"";position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.10)}
.karsilama::before{content:"";position:absolute;right:40px;top:-50px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.karsilama .r1,.karsilama .r2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FFE066}
.karsilama .semboller{font-size:1.15rem;gap:10px}
.karsilama .semboller span{color:#fff!important;opacity:.85;animation:none}
.karsilama .merak{background:rgba(255,255,255,.16)}
.karsilama .merak b{color:#FFE066}

.vurgu{background:var(--ana);box-shadow:var(--golge)}
.vurgu:hover{background:var(--ana-koyu)}
.vurgu .etiket,.vurgu small{color:rgba(255,255,255,.85)}

/* ana sayfa kutuları: pastel zemin, beyaz ikon */
.kutu{background:var(--k,#fff);border:1px solid transparent;box-shadow:var(--golge);transition:transform .15s,box-shadow .15s}
.kutu:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(16,24,40,.18)}
.kutu .ik{background:#fff!important}
.kutu b{color:var(--kf,var(--metin))}
.kutu small{color:#4B5563}

/* alt menü: yüzen ada (telefon) */
body:not(.tahta) .nav{left:10px;right:10px;bottom:10px;border:1px solid var(--cizgi);border-radius:22px;box-shadow:0 10px 30px -8px rgba(16,24,40,.25);padding:6px 4px;background:rgba(255,255,255,.96)}
body:not(.tahta) .main{padding-bottom:calc(var(--nav-h) + 2.5rem)}
.nav a[aria-current="page"]{color:var(--ana)}
.nav a[aria-current="page"] .ic{background:var(--ana-acik)}
body.tahta .nav{background:#fff;box-shadow:var(--golge);border-right:1px solid var(--cizgi)}
body.tahta .nav a[aria-current="page"]{background:var(--ana-acik)}
body.tahta .nav a[aria-current="page"] .ic{background:transparent}

/* tema seçici (yalnızca örnek modda görünür) */
.tema-sec{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.tema-sec button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--cizgi);background:#fff;font-size:.75rem;font-weight:600;cursor:pointer;text-decoration:none!important}
.tema-sec button[aria-pressed="true"]{border-color:var(--ana);color:var(--ana)}
.tema-sec i{width:14px;height:14px;border-radius:50%;display:inline-block}
.ust-link{font-size:.85rem;font-weight:600;color:var(--soluk);min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.hk-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hk-liste li{display:flex;gap:12px;align-items:flex-start;line-height:1.4}
.hk-liste .ik{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center}
.hk-liste .soluk{font-size:.88rem}
.sosyal{display:flex;flex-wrap:wrap;gap:10px}
.sosyal a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font-weight:600;color:#fff}
.sosyal a:hover{color:#fff;opacity:.92}
.sos-insta{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.sos-face{background:#1877F2}
.sos-mail{background:var(--lacivert)}
.alt-sosyal{display:flex;gap:6px}
.alt-sosyal a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--soluk);text-decoration:none}
.alt-sosyal a:hover{background:var(--mavi-acik);color:var(--lacivert)}

/* ---------- site içi oyun penceresi ---------- */
.oyun-pencere{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0F172A;color:#fff;display:none;flex-direction:column}
.oyun-pencere[open]{display:flex}
.oyun-pencere::backdrop{background:rgba(15,23,42,.8)}
.oyun-pencere .vp-ust{flex:none}
.oyun-pencere .vp-ust .btn{color:#fff;background:transparent;border:1px solid #475569;min-height:40px;min-width:40px;padding:0 12px;box-shadow:none}
.oyun-pencere iframe{flex:1;width:100%;border:0;background:#fff}
.net-grafik{width:100%;max-width:520px;height:auto;display:block;margin:4px 0 10px}
.takip-ozet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.takip-ozet div{background:#F6F8FF;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.takip-ozet b{font-family:var(--baslik);font-size:1.4rem}.takip-ozet span{font-size:.72rem;color:var(--soluk)}

/* Menü ve hızlı erişim */
.hizli{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hizli a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;background:var(--kart,#fff);border-radius:16px;box-shadow:0 1px 3px rgba(15,23,42,.08);color:var(--metin,#0F172A);text-align:center;min-height:44px}
.hizli a span{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.hizli a b{font-size:.78rem;line-height:1.15}
.menu-liste{list-style:none;margin:0;padding:0}
.menu-liste li{display:flex;align-items:stretch;gap:8px;border-top:1px solid #E2E8F0;padding:8px 0}
.menu-liste li:first-child{border-top:0}
.menu-git{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:inherit;padding:4px 0}
.menu-git b{color:var(--ana,#1D4ED8);font-size:1rem}
.menu-adr{font-size:.75rem;color:var(--ana,#1D4ED8);text-decoration:underline;word-break:break-all}
.menu-kopya{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;min-height:44px;border:1px solid #CBD5E1;border-radius:12px;background:#fff;color:#334155;font:inherit;font-size:.7rem;font-weight:600;cursor:pointer}
.menu-kopya:hover{background:#F1F5F9}
body.tahta .hizli a b{font-size:1rem}

/* Ödev notları, dosyalar, arşiv */
.odev-not{margin:4px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.dosya-baslik{display:flex;align-items:center;gap:6px;font-size:1rem;margin:14px 0 8px}
.dosya-baslik:first-child{margin-top:0}
.dosya-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dosya-kart{display:flex;flex-direction:column;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden;background:#fff}
.dosya-onizle{position:relative;aspect-ratio:4/3;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dosya-onizle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;background:#fff}
.dosya-onizle .oynat{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(185,28,28,.9);display:flex;align-items:center;justify-content:center}
.dosya-alt{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px}
.dosya-alt .rozet{align-self:flex-start;font-size:.68rem}
.dosya-alt b{font-size:.88rem;line-height:1.3;word-break:break-word}
.dosya-btn{display:flex;gap:6px}
.dosya-btn .btn{min-height:36px;padding:0 12px;font-size:.8rem;flex:1}
.dosya-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dosya-liste a{display:flex;align-items:center;gap:6px}
details.arsiv{border-top:1px solid #E2E8F0}
details.arsiv summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none;min-height:44px}
details.arsiv summary::-webkit-details-marker{display:none}
details.arsiv summary::after{content:'▾';color:var(--soluk);transition:transform .2s}
details.arsiv[open] summary::after{transform:rotate(180deg)}
.arsiv-no{flex:none;background:var(--ana,#4F46E5);color:#fff;font-weight:700;font-size:.75rem;border-radius:999px;padding:4px 10px}
.arsiv-ic{padding:0 0 14px;display:flex;flex-direction:column;gap:6px}
.dosya-duzen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dosya-duzen li{display:flex;gap:8px;align-items:center;border:1px solid #E2E8F0;border-radius:12px;padding:8px}
.dosya-duzen .ik{width:36px;height:36px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.dosya-duzen input,.dosya-duzen select{min-height:36px;font:inherit;font-size:.85rem;padding:4px 8px;border:1px solid #CBD5E1;border-radius:8px}
.dosya-duzen .btn{min-height:36px;padding:0 10px;flex:none}

/* Hakkında */
.hk-kahraman{position:relative;overflow:hidden;border-radius:24px;padding:22px 20px;color:#fff;background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 55%,#DB2777 100%);display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;box-shadow:0 10px 30px rgba(79,70,229,.25)}
.hk-kahraman::after{content:'π  √  ∞  Σ';position:absolute;right:-6px;bottom:-14px;font-size:3.6rem;font-weight:800;opacity:.12;letter-spacing:.2em;pointer-events:none}
.hk-foto{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.85)}
.hk-mono{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);font-family:var(--baslik);font-weight:800;font-size:1.9rem;letter-spacing:.05em}
.hk-selam{margin:0;font-size:.85rem;opacity:.9}
.hk-kahraman h2{margin:0;font-size:1.7rem;line-height:1.1;color:#fff}
.hk-unvan{margin:4px 0 0;font-weight:600;opacity:.95}
.hk-slogan{grid-column:1/-1;margin:2px 0 0;font-size:1.05rem;font-style:italic;line-height:1.45}
.hk-cipler{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.hk-cipler span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 10px;font-size:.75rem;font-weight:600}
ol.yol{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:flex;flex-direction:column;gap:16px}
ol.yol::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:#E2E8F0}
ol.yol li{position:relative;display:flex;flex-direction:column;gap:2px;line-height:1.45}
.yol-nokta{position:absolute;left:-22px;top:4px;width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #CBD5E1}
.yol-yil{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--soluk)}
.ilkeler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ilke{display:flex;flex-direction:column;gap:6px;border:1px solid #E2E8F0;border-radius:16px;padding:12px}
.ilke .ik{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
@media (min-width:900px){.ilkeler{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Gelişim izleme */
.gt-kutular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gt-kutular>div{background:linear-gradient(135deg,#EEF2FF,#F5F3FF);border:1px solid #E0E7FF;border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.gt-kutular span{font-size:.75rem;color:#4338CA;font-weight:600}
.gt-kutular b{font-family:var(--baslik);font-size:1.6rem;color:#1E1B4B;line-height:1.1}
.gt-kutular em,.dn-net em{font-style:normal;font-size:.75rem;color:var(--soluk)}
em.art{color:#15803D!important;font-weight:700} em.azal{color:#B91C1C!important;font-weight:700}
@media (min-width:900px){.gt-kutular{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dn-liste{list-style:none;margin:0;padding:0}
.dn-liste>li{border-top:1px solid #E2E8F0}
.dn-liste>li:first-child{border-top:0}
.dn-satir{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:12px 2px;font:inherit;text-align:left;cursor:pointer;color:inherit;min-height:56px}
.dn-ad{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dn-net{display:flex;flex-direction:column;align-items:flex-end}
.dn-net b{font-family:var(--baslik);font-size:1.25rem}
.dn-net b.enIyi{background:#FEF3C7;color:#92400E;border-radius:999px;padding:0 10px}
.dn-detay{background:#F8FAFC;border-radius:14px;padding:12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.dn-kutular{display:flex;flex-wrap:wrap;gap:8px}
.dn-kutular div{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:6px 10px;display:flex;flex-direction:column}
.dn-kutular span{font-size:.7rem;color:var(--soluk)} .dn-kutular b{font-size:1rem}
.dn-ders td,.dn-ders th{padding:6px 4px}
.dn-ders tr.dn-mat{background:#EEF2FF} .dn-ders tr.dn-top{border-top:2px solid #CBD5E1}
.dn-bas{margin:6px 0 2px;font-size:.95rem}
.hata-izgara{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.hq{display:flex;flex-direction:column;align-items:center;border-radius:8px;padding:3px 0;font-size:.75rem;line-height:1.1}
.hq small{font-size:.62rem}
.hq-d{background:#DCFCE7;color:#166534} .hq-y{background:#FEE2E2;color:#991B1B} .hq-b{background:#E5E7EB;color:#374151}
.konu-harita{display:flex;flex-wrap:wrap;gap:6px}
.kh{display:inline-flex;flex-direction:column;align-items:flex-start;border:1.5px solid #CBD5E1;background:#fff;border-radius:12px;padding:6px 10px;font:inherit;font-size:.82rem;font-weight:600;color:#334155;text-align:left}
.kh small{font-size:.65rem;font-weight:600;opacity:.85}
button.kh{cursor:pointer;min-height:44px}
.dn-alan{border:1px solid #E2E8F0;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.dn-alan legend{font-weight:700;padding:0 6px}
.dn-alan summary,.dn-alan details summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.dn-alan details{display:flex;flex-direction:column;gap:8px}
.dn-diger{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:6px;align-items:center;margin-top:8px}
.dn-diger input{min-height:40px;width:100%;padding:4px 6px;border:1px solid #CBD5E1;border-radius:8px;font:inherit}

/* Sınav Hazırlık */
.hz-kahraman{border-radius:24px;padding:22px 20px;background:linear-gradient(140deg,#1E1B4B 0%,#4338CA 55%,#7C3AED 100%);color:#fff;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(67,56,202,.25)}
.hz-ust{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.hz-kahraman h1{margin:0;font-size:1.8rem;line-height:1.15;color:#fff}
.hz-kahraman h1 em{font-style:normal;color:#FDE68A}
.hz-kahraman p{margin:0;opacity:.92}
.hz-sinif{display:flex;gap:6px;flex-wrap:wrap}
.hz-sinif button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.hz-sinif button[aria-pressed=true]{background:#fff;color:#4338CA;border-color:#fff}
.hz-sinif-acik button{border-color:#C7D2FE;color:#4338CA}
.hz-sinif-acik button[aria-pressed=true]{background:#4338CA;color:#fff;border-color:#4338CA}
.hz-dersler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.hz-dersler{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hz-ders{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px;border-radius:20px;border:1.5px solid var(--a2);background:linear-gradient(160deg,var(--a),#fff);font:inherit;color:#0F172A;cursor:pointer;min-height:44px}
.hz-ders:hover{border-color:var(--r)}
.hz-ik{width:46px;height:46px;border-radius:14px;background:var(--r);color:#fff;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.hz-no{position:absolute;right:14px;top:12px;font-size:.75rem;font-weight:800;color:var(--r);opacity:.5}
.hz-ders b{font-family:var(--baslik);font-size:1.1rem}
.hz-desc{font-size:.8rem;color:#475569;line-height:1.35}
.hz-etiket{display:flex;flex-wrap:wrap;gap:4px}
.hz-etiket span{font-size:.65rem;font-weight:700;background:#fff;border:1px solid var(--a2);color:var(--r);border-radius:999px;padding:2px 7px}
.hz-sayi{font-size:.78rem;font-weight:700;color:var(--r);margin-top:auto}
.hz-mebi{display:flex;align-items:center;gap:12px}
.hz-m{width:44px;height:44px;flex:none;border-radius:12px;background:#0B5FA5;color:#fff;font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
ol.hz-adim{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:10px}
ol.hz-adim li{display:flex;flex-direction:column;gap:2px}
.hz-dene{display:flex;align-items:center;gap:12px;background:linear-gradient(140deg,var(--a),#fff);border:1.5px solid var(--r)}
.hz-dene .hz-ik{background:#fff;border:1.5px solid var(--r)}
details.hz-modul{border-top:1px solid #E2E8F0}
details.hz-modul:first-of-type{border-top:0}
details.hz-modul summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none;min-height:52px}
details.hz-modul summary::-webkit-details-marker{display:none}
.hz-rozet{flex:none;font-size:.72rem;font-weight:700;background:#F1F5F9;color:#475569;border-radius:999px;padding:4px 10px}
.hz-ic{display:flex;flex-direction:column;gap:10px;padding:0 0 14px}
.hz-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hz-liste li{display:flex;align-items:center;gap:10px;border:1px solid #E2E8F0;border-radius:14px;padding:8px 10px}
.hz-liste .ik{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.hz-ilerleme{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.85rem}
.hz-soru{display:flex;flex-direction:column;gap:12px}
.hz-soru-metin{margin:0;font-size:1.08rem;line-height:1.55;white-space:pre-wrap}
.hz-gorsel{max-width:100%;border-radius:12px;border:1px solid #E2E8F0}
.hz-secenek{display:flex;flex-direction:column;gap:8px}
.hz-sec{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:14px;border:1.5px solid #CBD5E1;background:#fff;font:inherit;font-size:1rem;cursor:pointer;min-height:52px;color:#0F172A}
.hz-sec b{width:32px;height:32px;flex:none;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center}
.hz-sec:hover:not([disabled]){border-color:#4F46E5}
.hz-sec.dogru{border-color:#16A34A;background:#F0FDF4}.hz-sec.dogru b{background:#16A34A;color:#fff}
.hz-sec.yanlis{border-color:#DC2626;background:#FEF2F2}.hz-sec.yanlis b{background:#DC2626;color:#fff}
.hz-sec.soluk-sec{opacity:.55}
.hz-geri{border-radius:14px;padding:12px}.hz-geri p{margin:6px 0 0;line-height:1.5}
.hz-geri.iyi{background:#F0FDF4;color:#14532D}.hz-geri.kotu{background:#FEF2F2;color:#7F1D1D}
.hz-sonuc{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border-top:6px solid var(--r)}
.hz-skor{font-family:var(--baslik);font-size:2.6rem;color:var(--r)}
ol.hz-yanlis{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:14px}
.hz-cozum{margin:4px 0 0;background:#F8FAFC;border-left:3px solid #4F46E5;padding:8px 10px;border-radius:0 10px 10px 0;font-size:.92rem;line-height:1.5}
body.tahta .hz-soru-metin{font-size:1.5rem}
body.tahta .hz-sec{font-size:1.3rem;min-height:68px}
.hz-lgs{display:inline-flex;align-items:center;gap:10px;margin:8px 0 2px;padding:8px 14px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.hz-lgs b{font-size:1.9rem;line-height:1;font-family:var(--baslik)}
.hz-lgs span{font-size:.85rem;line-height:1.2}
.hz-lgs small{opacity:.85}

/* Oyunlar konu konu, video listeleri */
.oyun-konu{font-size:1rem;margin:10px 0 0;padding-left:10px;border-left:4px solid var(--ana,#4F46E5)}
.oyun-konu:first-child{margin-top:0}
.oyun-bm{border:1.5px solid #C7D2FE}
.bm-rozet{display:inline-block;background:linear-gradient(90deg,#4F46E5,#DB2777);color:#fff;font-weight:700;font-size:.68rem;border-radius:999px;padding:2px 8px}
.yt-listeler{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.yt-liste{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #FECACA;background:#FFF5F5;border-radius:14px;padding:10px 12px;font:inherit;cursor:pointer;min-height:56px}
.yt-liste:hover{background:#FEE2E2}
.yt-liste .yt-ik{width:44px;height:44px;flex:none;border-radius:12px;background:#DC2626;display:flex;align-items:center;justify-content:center}
.yt-liste b{display:block}

.tk-odev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px;border-radius:14px;background:#F8FAFC;border:1px dashed #CBD5E1}
@media (min-width:900px){.hizli{grid-template-columns:repeat(8,minmax(0,1fr))}.hizli a{padding:14px 6px}}
body.tahta .hizli a span{width:56px;height:56px}

/* Alt menü 7 düğme + Yazılıya Hazırlık Merkezi kartı */
.nav a .ic{padding:4px 10px}
@media (max-width:380px){.nav a{font-size:.6rem;white-space:nowrap;letter-spacing:-.01em}.nav a .ic{padding:4px 6px}}
body.tahta .nav{overflow-y:auto}
body.tahta .nav a{padding:12px 8px}
.yazili-merkez{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#10243B 0%,#1D4ED8 60%,#7C3AED 100%);box-shadow:0 10px 26px rgba(29,78,216,.25);text-decoration:none}
.yazili-merkez:hover{filter:brightness(1.06)}
.ym-ik{width:58px;height:58px;flex:none;border-radius:18px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.ym-yazi{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.ym-ust{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FDE68A}
.ym-yazi b{font-size:1.25rem;font-family:var(--baslik)}
.ym-yazi span:last-child{opacity:.9;font-size:.88rem}
.ym-git{display:inline-flex;align-items:center;gap:6px;font-weight:700;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 16px}

.kontrol-odev select{font-weight:700;font-size:1rem}.kontrol-odev>span{font-weight:600}

/* ödev kontrolü: kolay kullanım */
.kontrol-modu #nav{display:none}
.kontrol-modu .main{padding-bottom:24px}
.k-ilerleme{display:flex;flex-direction:column;gap:10px}
.k-ilerleme-ust{display:flex;justify-content:space-between;align-items:baseline}
.k-cubuk{height:10px;border-radius:99px;background:#E2E8F0;overflow:hidden}
.k-cubuk span{display:block;height:100%;background:linear-gradient(90deg,#22C55E,#15803D);border-radius:99px;transition:width .3s}
.k-lejant{display:flex;flex-wrap:wrap;gap:6px}
.lj{font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:99px}
.lj-ok{background:#DCFCE7;color:#15803D}.lj-half{background:#FEF3C7;color:#B45309}.lj-no{background:#FEE2E2;color:#B91C1C}.lj-bos{background:#F1F5F9;color:#475569}
.k-tumu{background:#15803D;border-color:#15803D}
.k-isim{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:2px;min-height:44px;font-weight:700}
.k-isim:focus-visible{outline:3px solid var(--turuncu);outline-offset:2px;border-radius:6px}
.k-kutu{border-style:dashed}
.k-kutu.k-ok,.k-kutu.k-half,.k-kutu.k-no{border-style:solid}
.k-satir-ok th,.k-satir-ok td{background:#F0FDF4}
.k-satir-no th,.k-satir-no td{background:#FEF2F2}
.kontrol-modu .yapiskan{bottom:12px;z-index:5}
.k-yeni summary{cursor:pointer;list-style:none;min-height:40px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}.k-yeni summary::-webkit-details-marker{display:none}.k-yeni[open] summary{margin-bottom:4px}

/* Bu hafta: ödev + çalışma (ana sayfa ve Çalış) */
.bu-hafta{display:grid;gap:12px}
.bh-odev{background:linear-gradient(135deg,var(--mavi),#4338CA);color:#fff;border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 18px rgba(29,78,216,.25)}
.bh-odev .etiket,.bh-calis .etiket{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bh-odev .etiket{color:#E0E7FF}
.bh-satir{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;min-height:52px;color:#fff}
.bh-satir:hover{background:rgba(255,255,255,.22)}
.bh-satir:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.bh-satir b{display:block;font-family:var(--baslik);font-size:1.02rem;line-height:1.25}
.bh-satir small{display:block;color:#C7D2FE;font-weight:600;margin-top:2px}
.bh-calis{background:#fff;border:1px solid #99F6E4;border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.bh-baslik{display:flex;align-items:center;gap:8px;justify-content:space-between;color:#134E4A;text-decoration:none}
.bh-baslik b{font-family:var(--baslik);font-size:1.05rem;line-height:1.25}
.bh-dugmeler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bh-dugme{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:12px;background:#F0FDFA;color:#134E4A;text-decoration:none;font-weight:700;font-size:.8rem;text-align:center}
.bh-dugme:hover{background:#CCFBF1}
@media (min-width:900px){.bu-hafta{grid-template-columns:1fr 1fr}}
/* Çalış: açılır konu kartları */
details.konu-kart>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}
details.konu-kart>summary::-webkit-details-marker{display:none}
details.konu-kart>summary::after{content:'';flex:none;width:10px;height:10px;border-right:2.5px solid #64748B;border-bottom:2.5px solid #64748B;transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .2s}
details.konu-kart[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
details.konu-kart .konu-ad{font-family:var(--baslik);font-size:1.08rem}
details.konu-kart .konu-ic{margin-top:6px}
.konu-etiket{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mavi,#3B5BDB);margin-bottom:2px}
.tahta-dugmeler{grid-template-columns:repeat(4,1fr);gap:14px}
.tahta-dugmeler .bh-dugme{min-height:110px;font-size:1.2rem;font-weight:700;gap:10px}
.bh-alistirma{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.bh-al{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:14px;background:#F5F3FF;color:#4C1D95;font-weight:700;text-decoration:none}
.tahta .bh-al{min-height:64px;font-size:1.15rem}
/* 9 Kasım düzeltmeleri: dar ekranda taşma olmasın */
.nasil li>span:last-child{flex:1;min-width:0;line-height:1.45}
.sekmeler{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sekmeler::-webkit-scrollbar{display:none}
.sekmeler button{flex:1 0 auto;white-space:nowrap;padding:0 14px}
main{overflow-wrap:anywhere}
textarea,input,select{max-width:100%}
/* Birebir öğrenci ödev takibi */
.od-takip h2{display:flex;align-items:center;gap:8px}
.od-yuzde{font-weight:800;font-size:1.05rem}
.od-sayac{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.od-sayac span{border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:600}
.od-alt{font-size:1rem;margin:14px 0 6px;color:var(--metin-2)}
.od-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.od-satir{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--cizgi);border-radius:14px;background:#fff}
.od-bilgi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.od-sag{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.od-rozet{display:inline-block;border-radius:999px;padding:6px 12px;font-weight:700;font-size:.85rem;white-space:nowrap}
.od-rozet.bos{background:#F1F5F9;color:#475569}
.od-btn{border:0;background:none;padding:0;cursor:pointer}
.od-btn:focus-visible .od-rozet{outline:3px solid var(--ana)}
.od-eski{margin-top:12px}
.od-eski summary{cursor:pointer;font-weight:700;color:var(--metin-2);min-height:40px;display:flex;align-items:center}