/*! © 2026 Sinan Sarıtaş · sinansaritas.com — Tüm hakları saklıdır. İzinsiz kopyalanamaz, çoğaltılamaz ve kullanılamaz. */
/* Ana sayfa "pano" görünümü: sekme başlıklı kutular, 3B simgeler. Yalnız .spn altında. */
.spn{--lac:#1E3A8A;--lac2:#172554;--amb:#F59E0B;--amb2:#D97706;--amb-a:#FFF4DB;--cizgi:#E6E8EF;--sol:#5B6476;--zem:#F6F7FB;
 --s5:#C0473A;--s6:#059669;--s7:#8F3D88;--s8:#157971;--s5a:#FAE8E5;--s6a:#D1FAE5;--s7a:#F6E6F4;--s8a:#DDF1EE;
 font-family:Poppins,system-ui,sans-serif;color:#1F2937;display:flex;flex-direction:column;gap:30px;margin:6px 0 30px}
.spn *{box-sizing:border-box}.spn p,.spn h1,.spn h2,.spn h3{margin:0}.spn ul{margin:0;padding:0}.spn li{list-style:none!important}.spn li::marker{content:none}
.spn a{text-decoration:none!important;color:inherit}
.spn-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* sekme başlıklı kutu */
.spn-kutu{position:relative;background:#fff;border:1.5px solid var(--cizgi);border-radius:0 20px 20px 20px;padding:22px 20px 20px;margin-top:16px}
.spn-sekme{position:absolute;left:-1.5px;top:-31px;height:31px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;background:#fff;border:1.5px solid var(--cizgi);border-bottom:0;border-radius:12px 12px 0 0;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--lac2)}
.spn-sekme i{width:8px;height:8px;border-radius:50%;background:var(--amb)}
.spn-sekme::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:#fff}
.spn-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.spn-ust h2{font-size:20px;font-weight:700;color:var(--lac2);line-height:1.25}
.spn-ust p{font-size:13.5px;color:var(--sol);margin-top:3px}
.spn-hep{font-size:13.5px;font-weight:600;color:var(--lac)!important;white-space:nowrap}

/* 1) karşılama */
.spn-gir{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center;padding:30px 30px 28px;border-radius:26px;background:#fff;border:1.5px solid var(--cizgi);position:relative;overflow:hidden}
.spn-gir::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:linear-gradient(var(--s5),var(--s6),var(--s7),var(--s8))}
.spn-selam{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--amb2);background:var(--amb-a);padding:5px 12px;border-radius:999px}
.spn-gir h1{font-size:clamp(28px,3.4vw,42px);line-height:1.12;font-weight:800;color:var(--lac2);margin:12px 0 10px;letter-spacing:-.5px}
.spn-gir h1 em{font-style:normal;background:linear-gradient(transparent 62%,#FDE68A 62%)}
.spn-gir>div>p{font-size:15px;color:var(--sol);line-height:1.55}
.spn-ara{display:flex;margin-top:18px;border:2px solid var(--lac);border-radius:16px;overflow:hidden;background:#fff}
.spn-ara input{flex:1;min-width:0;border:0!important;outline:0;padding:13px 16px!important;font:inherit;font-size:15px;background:none!important;box-shadow:none!important}
.spn-ara button{border:0;background:var(--lac);color:#fff;font:inherit;font-weight:700;padding:0 20px;cursor:pointer}
.spn-sin{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spn-sin a{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:118px;padding:14px 16px;border-radius:20px;background:var(--a);color:var(--r)!important;border:1.5px solid transparent;transition:transform .15s,border-color .15s;overflow:hidden}
.spn-sin a:hover{transform:translateY(-2px);border-color:var(--r)}
.spn-sin b{font-size:44px;line-height:1;font-weight:800}
.spn-sin span{font-size:15px;font-weight:700;line-height:1.2}
.spn-sin small{display:block;font-size:12px;font-weight:500;opacity:.85}
.spn-sin a::after{content:"→";position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.spn-s5{--r:var(--s5);--a:var(--s5a)}.spn-s6{--r:var(--s6);--a:var(--s6a)}.spn-s7{--r:var(--s7);--a:var(--s7a)}.spn-s8{--r:var(--s8);--a:var(--s8a)}

/* 2) ne arıyorsun: yatay çipler */
.spn-cip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:-14px 0 -10px}
.spn-cip::-webkit-scrollbar{display:none}
.spn-cip a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 9px;border-radius:999px;border:1.5px solid var(--cizgi);background:#fff;font-size:14px;font-weight:600;color:var(--lac2)!important}
.spn-cip a svg{width:30px;height:30px}
.spn-cip a:hover{border-color:var(--amb)}

/* 3) bu hafta: sınıf sekmeli tek kart */
.spn-hf-s{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.spn-hf-s button{border:1.5px solid var(--cizgi);background:#fff;border-radius:12px;padding:7px 14px;font:inherit;font-size:13.5px;font-weight:600;color:var(--sol);cursor:pointer}
.spn-hf-s button[aria-selected=true]{background:var(--r);border-color:var(--r);color:#fff}
.spn-hf-p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border-radius:16px;background:var(--a)}
.spn-hf-p[hidden]{display:none!important}
.spn-hf-p small{font-size:12.5px;font-weight:600;color:var(--r)}
.spn-hf-p h3{font-size:19px;font-weight:700;color:var(--lac2);line-height:1.3;margin:2px 0 4px}
.spn-hf-p p{font-size:13.5px;color:var(--sol)}
.spn-hf-d{display:flex;gap:8px;flex-wrap:wrap}
.spn-hf-d a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;background:#fff;font-size:13.5px;font-weight:600;color:var(--lac2)!important;border:1.5px solid #fff}
.spn-hf-d a:first-child{background:var(--r);color:#fff!important}
.spn-hf-d a:hover{border-color:var(--r)}

/* 4) araçlar: uygulama ızgarası */
.spn-arac{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.spn-arac a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:16px 8px 14px;border-radius:18px;border:1.5px solid var(--cizgi);background:#fff;transition:transform .15s,border-color .15s}
.spn-arac a:hover{transform:translateY(-2px);border-color:var(--amb)}
.spn-arac svg{width:56px;height:56px;filter:drop-shadow(0 6px 10px rgba(23,37,84,.16))}
.spn-arac b{font-size:14px;font-weight:700;color:var(--lac2);line-height:1.25}
.spn-arac small{font-size:12px;color:var(--sol);line-height:1.35}

/* 5) yazılı kampı ve lgs bantları */
.spn-iki{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.spn-iki .spn-kutu{margin-top:16px}
.spn-yk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.spn-yk a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:14px;background:var(--a);color:var(--r)!important;font-weight:700}
.spn-yk a b{font-size:24px;line-height:1}.spn-yk a span{font-size:12px}
.spn-lgs{display:flex;flex-direction:column;gap:8px}
.spn-lgs a{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:9px 12px 9px 9px;border-radius:14px;border:1.5px solid var(--cizgi)}
.spn-lgs a:hover{border-color:var(--s8)}
.spn-lgs svg{width:40px;height:40px}
.spn-lgs b{font-size:14.5px;color:var(--lac2);display:block;line-height:1.25}.spn-lgs small{font-size:12px;color:var(--sol)}
.spn-lgs em{font-style:normal;font-weight:700;color:var(--s8)}

/* 6) çalışma odam */
.spn-oda{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 22px;border-radius:22px;background:linear-gradient(120deg,var(--lac2),var(--lac));color:#fff}
.spn-oda svg{width:58px;height:58px}
.spn-oda b{font-size:18px;display:block}.spn-oda p{font-size:13.5px;opacity:.85;margin-top:2px}
.spn-oda a{background:var(--amb);color:var(--lac2)!important;font-weight:700;padding:11px 18px;border-radius:14px;white-space:nowrap}

/* bütün içerikler kutusu */
.spn-liste{padding-top:14px}

@media(max-width:980px){.spn-gir{grid-template-columns:1fr}.spn-arac{grid-template-columns:repeat(3,1fr)}.spn-iki{grid-template-columns:1fr}}
@media(max-width:600px){
 .spn{gap:26px}
 .spn-gir{padding:22px 18px 18px;border-radius:22px;gap:18px}
 .spn-gir h1{font-size:28px}
 .spn-sin a{min-height:98px;padding:12px 14px;border-radius:18px}.spn-sin b{font-size:36px}.spn-sin span{font-size:14px}
 .spn-kutu{padding:18px 14px 14px;border-radius:0 18px 18px 18px}
 .spn-ust h2{font-size:17.5px}
 .spn-hf-p{grid-template-columns:1fr;padding:14px}
 .spn-hf-p h3{font-size:17px}
 .spn-arac{gap:9px}.spn-arac a{padding:13px 4px 11px;border-radius:16px}.spn-arac svg{width:46px;height:46px}.spn-arac b{font-size:12.5px}.spn-arac small{display:none}
 .spn-oda{grid-template-columns:auto 1fr;padding:16px}.spn-oda a{grid-column:1/-1;text-align:center}.spn-oda svg{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.spn a{transition:none}.spn a:hover{transform:none}}

/* içerik türleri ızgarası */
.spn-tur{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.spn-tur a{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:12px 14px 12px 12px;border-radius:16px;border:1.5px solid var(--cizgi);background:#fff;transition:border-color .15s,transform .15s}
.spn-tur a:hover{border-color:var(--amb);transform:translateY(-2px)}
.spn-tur svg{width:52px;height:52px;filter:drop-shadow(0 5px 8px rgba(23,37,84,.15))}
.spn-tur b{display:block;font-size:15px;font-weight:700;color:var(--lac2);line-height:1.25}
.spn-tur small{font-size:12.5px;color:var(--sol)}
/* karşılamada yayın kodu */
.spn-kod{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--sol)}
.spn-kod form{display:flex;border:1.5px dashed var(--amb);border-radius:12px;overflow:hidden}
.spn-kod input{width:120px;border:0!important;padding:7px 10px!important;font:inherit;font-size:13.5px;font-weight:600;letter-spacing:1px;background:#fff!important;box-shadow:none!important}
.spn-kod button{border:0;background:var(--amb-a);color:var(--amb2);font:inherit;font-weight:700;padding:0 12px;cursor:pointer}
.spn-sin small b{font-size:inherit;font-weight:700}
/* bu haftanın dosyaları */
.spn-dos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.spn-dos a{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:8px 12px 8px 8px;border-radius:12px;background:#fff;border:1.5px solid #fff}
.spn-dos a:hover{border-color:var(--r)}
.spn-dos svg{width:38px;height:38px}
.spn-dos b{font-size:14px;color:var(--lac2);line-height:1.3;display:block}
.spn-dos small{font-size:12px;font-weight:500;color:var(--sol)}
.spn-dos em{font-style:normal;color:var(--r);font-weight:700}
/* son eklenenler listesi */
.spn-son{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.spn-son a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px dashed var(--cizgi)}
.spn-son a:hover b{color:var(--lac)}
.spn-son i{font-style:normal;font-size:12px;font-weight:700;color:var(--r);background:var(--a);border-radius:8px;padding:4px 8px;white-space:nowrap}
.spn-son b{font-size:14.5px;color:var(--lac2);line-height:1.3;font-weight:600}
.spn-son small{font-size:12px;color:var(--sol);white-space:nowrap}
@media(max-width:980px){.spn-tur{grid-template-columns:1fr 1fr}.spn-son{grid-template-columns:1fr}}
@media(max-width:600px){
 .spn-tur{gap:8px}.spn-tur a{grid-template-columns:40px 1fr;gap:9px;padding:10px}.spn-tur svg{width:40px;height:40px}.spn-tur b{font-size:13.5px}.spn-tur small{font-size:11.5px}
 .spn-dos{grid-template-columns:1fr}
 .spn-son a{grid-template-columns:auto 1fr}.spn-son small{display:none}
 .spn-kod{flex-wrap:wrap}
}

/* sıcak karşılama zemini (yalnız karşılamada) */
.spn-gir{background:linear-gradient(160deg,#FFF6E9 0%,#FFFBF5 45%,#fff 100%);border-color:#F6E3C6}
/* karşılamada yazılı satırı: en çok aranan içerik ilk ekranda */
.spn-yzs{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;background:#fff;border:1.5px solid #F6E3C6}
.spn-yzs>b{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--lac2);margin-right:auto}
.spn-yzs>b svg{width:36px;height:36px}
.spn-yzs>b small{display:block;font-size:12px;font-weight:500;color:var(--sol)}
.spn-yzs nav{display:flex;gap:8px}
.spn-yzs nav a{min-width:64px;min-height:44px;display:grid;place-items:center;border-radius:12px;font-weight:700;font-size:14px;background:var(--a);color:var(--r)!important;border:1.5px solid transparent}
.spn-yzs nav a:hover{border-color:var(--r)}
/* her sayfada üstte yapışkan sınıf şeridi (ss-altyapi tasarim-ek.css'e taşınacak) */
.ssg-serit{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--cizgi,#E6E8EF);font-family:Poppins,sans-serif}
.ssg-serit-i{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;overflow-x:auto;scrollbar-width:none}
.ssg-serit-i::-webkit-scrollbar{display:none}
.ssg-serit a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:#172554;text-decoration:none;border:1.5px solid #E6E8EF;background:#fff}
.ssg-serit a.s{color:#fff;border-color:transparent;min-width:44px;justify-content:center;font-weight:800}
.ssg-serit a.s5{background:#C0473A}.ssg-serit a.s6{background:#059669}.ssg-serit a.s7{background:#8F3D88}.ssg-serit a.s8{background:#157971}
.ssg-serit a[aria-current]{box-shadow:0 0 0 3px #FDE68A}
.ssg-serit i{width:1px;height:22px;background:#E6E8EF;flex:none;margin:0 4px}
/* reklam kartı */
.spn-rk{background:#fff;border:1.5px solid var(--cizgi);border-radius:18px;padding:8px 10px 10px}
.spn-rk>p{font-size:11px;letter-spacing:1px;color:#8A93A6;text-align:center;margin-bottom:6px}
/* erişilebilirlik: görünür odak */
.spn a:focus-visible,.spn button:focus-visible,.spn input:focus-visible,.ssg-serit a:focus-visible{outline:3px solid #F59E0B;outline-offset:2px}
@media(max-width:600px){.spn-yzs{padding:10px}.spn-yzs nav{width:100%}.spn-yzs nav a{flex:1;min-width:0}}
.ssg-serit a.s{width:40px;min-width:40px;padding:0}
@media(max-width:600px){
 .spn-gir{gap:14px;padding:18px 16px 16px}
 .spn-gir h1{font-size:25px;margin:8px 0 6px}
 .spn-gir>div>p{font-size:14px;line-height:1.5}
 .spn-ara{margin-top:12px}.spn-ara input{padding:11px 12px!important;font-size:14px}
 .spn-kod{margin-top:8px}
 .spn-sin{grid-template-columns:repeat(4,1fr);gap:8px}
 .spn-sin a{min-height:78px;padding:10px 6px;align-items:center;text-align:center;justify-content:center;gap:4px;border-radius:16px}
 .spn-sin a::after{display:none}
 .spn-sin b{font-size:32px}
 .spn-sin span{font-size:12px}.spn-sin small{font-size:10.5px}.spn-sin small b{display:block}
 .spn-sin small{display:none}
}
/* Onay Matematik'ten ayrışma (12 Kasım): krem/şeftali zemin, sol renk şeridi, hap biçimli selam yok; 6. sınıf camgöbeği */
.spn{--s6:#946812;--s6a:#FAF1DE}
.ssg-serit a.s6{background:#946812}
.spn-gir{background:#fff;border-color:var(--cizgi)}
.spn-gir::before{display:none}
.spn-selam{background:none;padding:0;border-radius:0;color:var(--amb2);font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700}
.spn-yzs{border-color:var(--cizgi);background:var(--zem)}
.spn-hf-p{display:block}
.spn-hf-p h3{margin-bottom:2px}
.spn>.ssg-serit{position:static;border:0;background:none;margin:-4px 0 -14px}
.spn>.ssg-serit .ssg-serit-i{padding:0;max-width:none}
.spn-bos{font-size:14px;color:var(--sol);padding:6px 2px}
.spn .sg-reklam{background:#fff;border:1.5px solid var(--cizgi);border-radius:18px;padding:8px 10px 10px;margin:0;overflow:hidden}
.spn .sg-reklam::before{content:"REKLAM";display:block;text-align:center;font-size:11px;letter-spacing:1px;color:#8A93A6;margin-bottom:6px}
.spn .sg-reklam:has(ins[data-ad-status="unfilled"]){display:none}
.spn-gir>*,.spn-kutu>*,.spn-iki>*,.spn-hf-p>*{min-width:0}
@media(min-width:981px){.spn-arac{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
/* sınıf sekmeli erişim kutusu */
.spn-s0{--r:var(--lac);--a:var(--zem)}
#spn-her .spn-hf-p{background:none;padding:0}
#spn-her .spn-hf-s button[aria-selected=true]{background:var(--r);border-color:var(--r);color:#fff}
.spn-bu{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--a);min-height:44px}
.spn-bu span{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--r)}
.spn-bu b{font-size:14.5px;color:var(--lac2);line-height:1.3}
.spn-bu em{font-style:normal;font-weight:700;color:var(--r)}
.spn-sinif-git{display:inline-block;margin-top:12px}
@media(max-width:600px){.spn-hf-s{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.spn-hf-s button{flex:none}.spn-bu{grid-template-columns:1fr auto}.spn-bu span{grid-column:1/-1}}
#spn-her .spn-tur small{font-weight:500;color:var(--sol)}

/* Bahçe paleti, derin tonlar ve canlı görünüm (12 Kasım 2026) */
.spn{--s5:#C0473A;--s5a:#FAE8E5;--s6:#946812;--s6a:#FAF1DE;--s7:#8F3D88;--s7a:#F6E6F4;--s8:#157971;--s8a:#DDF1EE}
.spn-s5{--r:#C0473A;--rk:#9C3428;--a:#FAE8E5}.spn-s6{--r:#946812;--rk:#7A560F;--a:#FAF1DE}.spn-s7{--r:#8F3D88;--rk:#72316D;--a:#F6E6F4}.spn-s8{--r:#157971;--rk:#0F5C56;--a:#DDF1EE}
.ssg-serit a.s5{background:#C0473A}.ssg-serit a.s6{background:#946812}.ssg-serit a.s7{background:#8F3D88}.ssg-serit a.s8{background:#157971}
/* karşılama: açık lavanta zemin, koyu yazı, erik vurgu */
.spn-gir{background:linear-gradient(160deg,#F4EEFB 0%,#FBF8FE 60%,#FFFFFF 100%);border:1.5px solid #E7DDF5;color:#1F2937}
.spn-gir h1{color:#172554}.spn-gir h1 em{background:linear-gradient(transparent 62%,#F9D77E 62%)}
.spn-gir>div>p{color:#5B6476}.spn-selam{color:#8F3D88}
.spn-ara{border-color:#8F3D88}.spn-ara button{background:#8F3D88;color:#fff}
.spn-kod{color:#5B6476}.spn-kod form{border-color:#8F3D88}.spn-kod input{background:#fff!important}.spn-kod button{background:#F6E6F4;color:#72316D}
/* dolu sınıf kartları */
.spn-sin a{background:linear-gradient(150deg,var(--r) 0%,var(--rk) 100%);color:#fff!important;box-shadow:0 10px 18px -10px rgba(0,0,0,.45)}
.spn-sin a::after{background:rgba(255,255,255,.22);color:#fff}
.spn-sin a:hover{border-color:rgba(255,255,255,.6)}
.spn-sin small{opacity:.92}
/* yazılı satırı: beyaz zemin, dolu düğmeler */
.spn-yzs{background:#fff;border:1.5px solid #E7DDF5}
.spn-yzs nav a{background:var(--r);color:#fff!important}
.spn-yzs nav a:hover{background:var(--rk)}
/* dolu sekme etiketleri */
.spn-sekme{background:var(--lac);color:#fff;border-color:var(--lac)}.spn-sekme i{background:#FBBF24}.spn-sekme::after{display:none}
.spn-kutu{border-color:#D5DBEA}
#spn-her .spn-tur a{background:linear-gradient(180deg,#F7F9FE,#fff)}
#spn-her .spn-hf-s button[aria-selected=true]{box-shadow:0 6px 12px -6px var(--r)}