/* SBD Sınıf Araç Kutusu 1.0.0 — renkler ve kalıplar SBD Çekirdek (SBD-matik) ve Kulüp-matik ile aynı aile.
   Bütün kurallar .sak altında; yazdırma kâğıdı .sak-kagit ve #sak-baski. Dış yazı tipi yüklenmez. */
.sak{--ink:#141414;--ink2:#4A4C52;--muted:#686B72;--line:#D6D8DC;--line2:#EDF0F3;--bg:#F2F3F5;--card:#fff;--soft:#F7F8FA;
  --blue:#0398CE;--blue-d:#027AA6;--lac:#026A93;--lac-d:#01506F;--red:#DB233C;--red-d:#B81C31;--green:#3F7A12;--r-lacivert:#026A93;
  font-family:'Open Sans','Nunito Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);font-size:16px;line-height:1.45;max-width:1500px;margin:0 auto;padding:6px 0 40px;box-sizing:border-box;text-align:left}
.sak *,.sak *::before,.sak *::after{box-sizing:border-box}
.sak button,.sak input,.sak select,.sak textarea{font:inherit;color:inherit;letter-spacing:normal;text-transform:none;margin:0}
.sak button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.sak [hidden]{display:none!important}
.sak :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sak h2,.sak h3{font-family:inherit;letter-spacing:normal;text-transform:none}
.sak svg{display:inline-block;vertical-align:middle}

/* düğmeler */
.sak .sak-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 20px;border-radius:10px;border:2px solid var(--blue);
  background:var(--blue);color:#fff;font-weight:800;font-size:18px;line-height:1.2;text-decoration:none;box-shadow:none;transition:filter .12s;white-space:nowrap}
.sak .sak-btn:hover{filter:brightness(1.07)}
.sak .sak-btn:active{transform:translateY(1px)}
.sak .sak-btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.sak .sak-btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.sak .sak-btn.ghost:hover{border-color:#B9BCC2;filter:none;background:#FAFBFC}
.sak .sak-btn.kirmizi{background:var(--red);border-color:var(--red);color:#fff}
.sak .sak-btn.ghost.sil{color:var(--red-d)}
.sak .sak-btn.dev{min-height:76px;font-size:28px;padding:12px 34px;border-radius:14px}
.sak .sak-btn.kare{width:52px;min-width:52px;padding:0;font-size:30px;font-weight:700}
.sak .sak-btn.tam-gen{width:100%}
.sak .sak-btn svg{width:22px;height:22px;flex:none}
.sak .sak-btn.dev svg{width:30px;height:30px}

/* etiketler */
.sak .sak-etiketler{display:flex;gap:8px;flex-wrap:wrap}
.sak .sak-etiket{display:inline-block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:2px;white-space:nowrap}
.sak .sak-etiket.yesil{background:#EAF7DF;color:var(--green)}
.sak .sak-etiket.mavi{background:#E5F4FA;color:var(--blue-d)}
.sak .sak-etiket.gri{background:var(--line2);color:var(--ink2)}

/* başlık kartı (SBD-matik araç kartının büyüğü) */
.sak-hero{display:flex;overflow:hidden;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--lac);box-shadow:0 1px 3px rgba(20,20,20,.10);margin:0 0 12px}
.sak-hero-ikon{position:relative;width:84px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--lac);color:#fff;overflow:hidden}
.sak-hero-ikon::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 120% at 20% 0%,rgba(255,255,255,.22),transparent 60%)}
.sak-hero-ikon svg{width:38px;height:38px;position:relative;z-index:1}
.sak-hero-ikon i{position:absolute;right:6px;bottom:2px;font-style:normal;font-family:'Roboto Condensed','Open Sans',sans-serif;font-weight:700;font-size:28px;line-height:1;color:rgba(255,255,255,.30)}
.sak-hero-govde{padding:12px 16px;border-left:2px dashed var(--line);flex:1;min-width:0}
.sak .sak-hero-baslik{margin:0 0 2px;font-family:'Roboto Condensed','Open Sans',sans-serif;font-size:25px;font-weight:700;line-height:1.15;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.sak .sak-hero-baslik span{color:var(--lac)}
.sak-hero p{margin:0 0 8px;color:var(--ink2);font-size:15px;max-width:780px}

/* uygulama alanı */
.sak-uyg{position:relative}
.sak-ust{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px}
.sak-sinif-sec{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.sak-sinif-sec span{font-family:'Roboto Condensed','Open Sans',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.sak-sinif-sec select{min-height:52px;min-width:230px;max-width:100%;padding:8px 12px;border:2px solid var(--lac);border-radius:10px;background:#fff;font-size:19px;font-weight:800;color:var(--ink)}
.sak-ust-bilgi{font-size:15px;color:var(--muted);font-weight:600}
.sak-no-hizli{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:16px;color:var(--ink2)}
.sak-no-hizli[hidden]{display:none}
.sak-no-hizli button{min-width:48px;min-height:48px;border:2px solid var(--lac);border-radius:10px;background:#fff;font-size:24px;font-weight:800;color:var(--ink);cursor:pointer;line-height:1}
.sak-no-hizli input{width:78px;min-height:48px;border:2px solid var(--lac);border-radius:10px;text-align:center;font-size:20px;font-weight:800}
.sak-bosluk{flex:1 1 auto}
.sak .sak-btn#sakSes.kapali{color:var(--muted);border-style:dashed}
.sak-mini-sayac{min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid var(--lac);background:#E8F3F8;color:var(--lac-d);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.sak-mini-sayac.bitti{background:var(--red);border-color:var(--red);color:#fff}
.sak-depo-uyari{background:#FFF3F5;border:1px solid #F3B5BF;border-left:4px solid var(--red);border-radius:10px;padding:10px 14px;margin:0 0 10px;font-weight:700;color:var(--red-d)}

/* sekmeler */
.sak-sekmeler{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 12px}
.sak .sak-sekme{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:8px 10px;border:2px solid var(--line);border-radius:12px;background:#fff;
  font-weight:800;font-size:18px;line-height:1.15;color:var(--ink);text-align:center;box-shadow:0 1px 2px rgba(20,20,20,.05)}
.sak .sak-sekme svg{width:26px;height:26px;flex:none;color:var(--lac)}
.sak .sak-sekme:hover{border-color:#9CC7DA;background:#F6FBFD}
.sak .sak-sekme.on{background:var(--lac);border-color:var(--lac);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.sak .sak-sekme.on svg{color:#fff}

/* paneller ve kartlar */
.sak-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(20,20,20,.06)}
.sak-kart{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px}
.sak-kart+.sak-kart{margin-top:12px}
.sak .sak-kb{margin:0 0 8px;font-family:'Roboto Condensed','Open Sans',sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.sak-satir{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sak-satir.orta{justify-content:center;margin-top:14px}
.sak-satir.sag{justify-content:flex-end}
.sak-cubuk{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 12px}
.sak-cubuk-not{font-size:16px;font-weight:600;color:var(--ink2)}
.sak-duzen{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.sak-ana{min-width:0}
.sak-yan{min-width:0}
.sak-bos{margin:6px 0;color:var(--muted);font-size:16px}
.sak-bos.buyuk{font-size:20px;padding:30px 10px;text-align:center;border:2px dashed var(--line);border-radius:12px}
.sak-kucuk{margin:0 0 8px;font-size:14px;color:var(--muted)}
.sak-ipucu{margin:0 0 10px;font-size:16px;color:var(--ink2)}
.sak-ipucu.vurgu{color:var(--lac-d);font-weight:800;background:#E8F3F8;border-radius:8px;padding:8px 12px}
.sak-durum{text-align:center;font-size:20px;font-weight:700;color:var(--ink2);margin:12px 0 0}

/* seçmeli düğme grubu */
.sak-seg{display:inline-flex;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;max-width:100%}
.sak-seg.genis{display:flex;margin:0 0 12px}
.sak .sak-seg button{flex:1;border:0;background:#fff;min-height:50px;padding:6px 16px;font-weight:800;font-size:17px;color:var(--ink);border-radius:0}
.sak .sak-seg button+button{border-left:2px solid var(--line)}
.sak .sak-seg button[aria-pressed="true"]{background:var(--lac);color:#fff}
.sak-adimla{display:inline-flex;align-items:center;gap:8px}
.sak-adimla-ad{font-weight:800;font-size:16px;color:var(--ink2)}
.sak-adimla output{min-width:2.2ch;text-align:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}

/* 1. sınıflarım */
.sak-gizlilik{display:flex;gap:12px;align-items:center;background:#E8F3F8;border:1px solid #BFE0EE;border-left:5px solid var(--lac);border-radius:12px;padding:12px 16px;margin:0 0 14px}
.sak-gizlilik svg{width:34px;height:34px;flex:none;color:var(--lac)}
.sak-gizlilik b{display:block;font-size:19px;color:var(--lac-d)}
.sak-gizlilik span{display:block;font-size:15px;color:var(--ink2)}
.sak-iki{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.sak-iki>.sak-kart+.sak-kart{margin-top:0}
.sak-sinif-liste{display:grid;gap:8px}
.sak .sak-sinif-satir{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;background:#fff;border:2px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;text-align:left}
.sak .sak-sinif-satir.on{border-color:var(--lac);box-shadow:inset 5px 0 0 var(--lac)}
.sak .sak-sinif-satir.no{min-height:56px;font-size:16px}
.sak-sinif-ad{min-width:0}
.sak .sak-sinif-satir b{display:block;font-size:22px;line-height:1.15}
.sak .sak-sinif-satir span{display:block;font-size:14px;color:var(--muted);font-weight:600}
.sak-sinif-satir .sak-btn{min-height:46px;font-size:16px;padding:8px 14px}
.sak-no-ayar{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.sak-no-ayar b{font-size:16px}
.sak-no-ayar p{margin:4px 0 8px;font-size:14px;color:var(--ink2)}
.sak-no-ayar label,.sak-elle label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px;color:var(--ink2)}
.sak input[type=number],.sak input[type=text],.sak textarea{border:2px solid var(--line);border-radius:10px;background:#fff;padding:8px 12px;font-size:19px;color:var(--ink);width:100%}
.sak input[type=number]{width:120px;font-weight:800;font-size:22px;min-height:52px}
.sak input:focus,.sak textarea:focus,.sak select:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(3,152,206,.18)}
.sak-alan{display:block;font-weight:800;font-size:16px;margin:0 0 12px}
.sak-alan small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin:2px 0 6px}
.sak-alan input{margin-top:4px;min-height:52px}
.sak textarea{min-height:200px;resize:vertical;font-size:17px;line-height:1.4;font-family:inherit}
.sak-onizle{margin:0 0 12px}
.sak-onizle-baslik{margin:0 0 6px;font-weight:800;color:var(--green)}
.sak-onizle-liste{margin:0;padding:8px 8px 8px 40px;max-height:220px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;columns:2;column-gap:24px;font-size:15px}
.sak-onizle-liste li{break-inside:avoid;padding:1px 0}

/* 2. rastgele öğrenci ve söz sırası kartı */
.sak-adkart{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:clamp(260px,44vh,520px);height:clamp(260px,44vh,520px);background:#fff;border:3px solid var(--line);border-radius:18px;padding:20px;overflow:hidden}
.sak-adkart.orta-boy{min-height:clamp(200px,34vh,420px);height:clamp(200px,34vh,420px)}
.sak-adkart-ust{font-size:20px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.sak-ad{display:block;max-width:100%;font-weight:800;line-height:1.08;font-size:120px;color:var(--ink);word-break:normal;overflow-wrap:normal;hyphens:none}
.sak-adkart.bekle .sak-ad{color:#A4A7AD}
.sak-adkart.akis .sak-ad{color:var(--ink2)}
.sak-adkart.secildi{border-color:var(--lac);box-shadow:0 0 0 6px rgba(2,106,147,.12)}
.sak-adkart.secildi .sak-ad{color:var(--lac-d)}
.sak-adkart.bitti{border-color:var(--green);background:#F3FAEC}
.sak-adkart.bitti .sak-ad{color:var(--green)}
.sak-ad.pop{animation:sak-pop .38s ease-out}
@keyframes sak-pop{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1);opacity:1}}
.sak-secilenler{margin:0;padding:0 0 0 30px;max-height:260px;overflow:auto;font-size:17px;font-weight:700}
.sak-secilenler li{padding:2px 0}
.sak-cipler{display:flex;flex-wrap:wrap;gap:6px}
.sak .sak-cip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:6px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-size:15px;font-weight:700;line-height:1.15;text-align:left}
.sak .sak-cip.yok{background:#FFF3F5;border-color:#F3B5BF;color:var(--red-d)}
.sak .sak-cip.yok .sak-cip-ad{text-decoration:line-through}
.sak .sak-cip-not{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--red);color:#fff;border-radius:999px;padding:2px 7px}

/* 3. grup kur */
.sak-gruplar{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sak-gruplar.kalabalik{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.sak-grup{border:3px solid var(--gr,#0277B6);border-radius:14px;background:#fff;overflow:hidden;min-width:0}
.sak-grup-bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;background:var(--gr,#0277B6);color:#fff;padding:8px 14px}
.sak-grup-bas b{font-family:'Roboto Condensed','Open Sans',sans-serif;font-size:26px;letter-spacing:.03em;line-height:1.1}
.sak-grup-bas span{font-size:15px;font-weight:700;opacity:.95}
.sak-grup-liste{list-style:none;margin:0;padding:8px 14px 12px;font-size:22px;font-weight:700;line-height:1.3}
.sak-grup-liste li{padding:5px 0;border-bottom:1px dashed var(--line)}
.sak-grup-liste li:last-child{border-bottom:0}

/* 4. sayaç */
.sak-saat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;background:#fff;border:3px solid var(--line);border-radius:18px;padding:12px 16px;
  min-height:clamp(250px,46vh,640px)}
.sak-saat-tur{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sak-rakam{display:block;font-family:'Roboto Condensed','Open Sans',system-ui,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.01em;
  font-size:clamp(72px,16vw,300px);color:var(--ink);white-space:nowrap}
.sak-rakam small{font-size:.38em;color:var(--muted)}
.sak-saat-not{display:block;min-height:1.25em;font-size:clamp(22px,3vw,52px);font-weight:800;line-height:1.2}
.sak-saat.calisiyor{border-color:var(--lac)}
.sak-saat.son10{background:#FFF3F5;border-color:var(--red)}
.sak-saat.son10 .sak-rakam,.sak-saat.son10 .sak-saat-not{color:var(--red-d)}
.sak-saat.bitti{background:var(--red);border-color:var(--red-d);color:#fff}
.sak-saat.bitti .sak-rakam,.sak-saat.bitti .sak-saat-tur,.sak-saat.bitti .sak-saat-not{color:#fff}
.sak-saat.bitti .sak-saat-not{font-size:clamp(30px,5vw,90px);text-transform:uppercase;letter-spacing:.03em}
.sak-hazir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
.sak .sak-hazir .sak-btn{min-height:58px;font-size:20px;padding:6px 4px}
.sak .sak-hazir .sak-btn.on{border-color:var(--lac);background:#E8F3F8;color:var(--lac-d)}
.sak-elle{margin:0 0 10px}
.sak-elle label{flex:1}
.sak-elle input[type=number]{width:100%}

/* 5. oturma planı */
.sak-plan-alan{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start;user-select:none;-webkit-user-select:none}
.sak-plan{min-width:0;overflow-x:auto;padding:4px 2px 8px}
.sak-on{min-width:calc(var(--sut,3) * 100px + 80px);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(120px,22%);gap:12px;align-items:stretch;margin:0 0 14px}
.sak-on-yazi{align-self:center;font-family:'Roboto Condensed','Open Sans',sans-serif;font-weight:700;color:var(--muted);letter-spacing:.06em;min-width:56px;text-align:center}
.sak-tahta{display:flex;align-items:center;justify-content:center;min-height:44px;background:#2F4A3A;color:#fff;border-radius:6px;font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase}
.sak-masa{display:flex;align-items:center;justify-content:center;min-height:44px;background:#F1E6D6;border:2px solid #C9B08A;color:#5A4422;border-radius:6px;font-weight:800;font-size:15px;text-align:center;padding:4px 8px}
.sak-siralar{display:grid;grid-template-columns:auto repeat(var(--sut,3),minmax(0,1fr));gap:12px 26px;align-items:stretch;min-width:calc(var(--sut,3) * 160px + 80px)}
.sak-plan.tekli .sak-siralar{min-width:calc(var(--sut,3) * 100px + 80px)}
.sak-plan.genis .sak-siralar{gap:12px 16px}
.sak-sira-no{align-self:center;min-width:56px;font-size:14px;font-weight:700;color:var(--muted);text-align:center}
.sak-sira-kutu{display:flex;gap:5px;padding:5px;background:#E3E9EE;border:1px solid #C8D2DA;border-radius:9px;min-width:0}
.sak .sak-yer{flex:1 1 0;min-width:0;min-height:64px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 6px;background:#fff;border:2px dashed #B9C1C8;border-radius:7px;
  font-size:16px;font-weight:800;line-height:1.15;color:var(--ink);overflow-wrap:break-word;word-break:normal;hyphens:manual;user-select:none;-webkit-user-select:none}
.sak .sak-yer.dolu{border-style:solid;border-color:#8FBCD0;background:#F4FAFD;cursor:grab}
.sak-yer-bos{color:#9A9DA3;font-weight:600;font-size:14px}
.sak .sak-yer.ustunde,.sak .sak-tepsi.ustunde{outline:3px dashed var(--blue);outline-offset:1px;background:#E5F4FA}
.sak .sak-yer.secili,.sak .sak-ogr.secili{outline:4px solid var(--red);outline-offset:1px}
.sak .kalkti{opacity:.35}
.sak-tepsi{background:var(--soft);border:2px solid var(--line);border-radius:12px;padding:12px;min-height:120px}
.sak-tepsi.hedefte{border-style:dashed;border-color:var(--blue)}
.sak .sak-ogr{display:inline-flex;align-items:center;min-height:42px;padding:6px 12px;border:2px solid #8FBCD0;border-radius:999px;background:#fff;font-size:15px;font-weight:700;line-height:1.15;cursor:grab;user-select:none;-webkit-user-select:none;text-align:left}
.sak-kayit{font-size:15px;font-weight:700;color:var(--green)}
.sak-hayalet{position:fixed;left:0;top:0;z-index:100004;pointer-events:none;padding:10px 14px;background:var(--lac);color:#fff;font-weight:800;font-size:17px;line-height:1.15;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.28);text-align:center;opacity:.95}
.sak-uyg.surukleniyor,.sak-uyg.surukleniyor *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
@media (min-width:900px){.sak .sak-yer,.sak .sak-ogr{touch-action:none}}

/* 6. söz sırası */
.sak-soz-liste{margin:0;padding:0 0 0 34px;max-height:min(60vh,520px);overflow:auto;font-size:18px;font-weight:700}
.sak-soz-liste li{padding:4px 6px;border-radius:6px}
.sak-soz-liste li.gecti{color:#9A9DA3;text-decoration:line-through}
.sak-soz-liste li.simdi{background:#E8F3F8;color:var(--lac-d)}
.sak-soz-liste li em{font-style:normal;font-size:12px;font-weight:800;text-transform:uppercase;margin-left:8px;background:var(--lac);color:#fff;border-radius:999px;padding:2px 8px;vertical-align:middle}

/* pencere, bildirim */
.sak-katman{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100001;background:rgba(20,20,20,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.sak-pencere{background:#fff;border-radius:16px;max-width:600px;width:100%;padding:22px 24px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.sak .sak-pencere h3{margin:0 0 8px;font-size:25px;line-height:1.2}
.sak-pencere p{margin:0 0 18px;font-size:18px;color:var(--ink2)}
.sak-bildirim{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100003;background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;font-size:17px;max-width:min(90vw,680px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sak-onizleme{background:#E4E7EB;border-radius:14px;width:100%;max-width:1400px;height:100%;display:flex;flex-direction:column;overflow:hidden}
.sak-onizleme-ust{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.sak-onizleme-bilgi{flex:1 1 260px;min-width:0}
.sak-onizleme-bilgi b{display:block;font-size:18px}
.sak-onizleme-bilgi span{display:block;font-size:14px;color:var(--muted)}
.sak-onizleme-alan{flex:1;overflow:auto;padding:12px;display:flex;justify-content:center;align-items:flex-start}
.sak-olcek-dis{flex:none;position:relative}
.sak-olcek{position:absolute;left:0;top:0;transform-origin:0 0}
.sak-olcek .sak-kagit{box-shadow:0 3px 14px rgba(0,0,0,.22)}

/* tam ekran (Fullscreen API ya da yedek) */
.sak-uyg.tam{background:var(--bg);padding:12px 16px;overflow:auto;display:flex;flex-direction:column}
.sak-uyg.sak-tam{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000}
html.sak-tam-kilit,html.sak-tam-kilit body{overflow:hidden!important}
.sak-uyg.tam .sak-ust,.sak-uyg.tam .sak-sekmeler{margin-bottom:8px}
.sak-uyg.tam .sak-sekme{min-height:56px}
.sak-uyg.tam .sak-panel{flex:1 0 auto}
.sak-uyg.tam .sak-adkart{height:calc(100vh - 330px);min-height:240px}
.sak-uyg.tam .sak-adkart.orta-boy{height:calc(100vh - 360px)}
.sak-uyg.tam .sak-saat{min-height:calc(100vh - 290px)}
.sak-uyg.tam .sak-rakam{font-size:min(25vw,52vh)}
.sak-uyg.tam .sak-grup-liste{font-size:26px}
.sak-uyg.tam .sak-secilenler{max-height:calc(100vh - 640px);min-height:180px}
.sak-uyg.tam .sak-yer{font-size:19px;min-height:72px}

/* kullanım rehberi */
.sak-rehber{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.sak-rehber section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.sak .sak-rehber h2{margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.25;color:var(--ink)}
.sak-rehber ol,.sak-rehber ul{margin:0;padding-left:22px;font-size:15px;color:var(--ink2)}
.sak-rehber li{margin:0 0 6px}
.sak-uyari{background:#FFF3F5;border:1px solid #F3B5BF;border-radius:10px;padding:12px 16px;font-weight:700}

/* araç genişliğine göre (tema sütunu dar olabilir; sınıfları kutu-100.js aracın kendi genişliğinden verir) */
.sak.gw-orta .sak-sekme{font-size:16px;gap:8px}
.sak.gw-orta .sak-sekme svg{width:22px;height:22px}
.sak.gw-orta .sak-duzen{grid-template-columns:minmax(0,1fr) 300px}
.sak.gw-orta .sak-plan-alan{grid-template-columns:minmax(0,1fr) 230px}
.sak.gw-dar .sak-duzen,.sak.gw-dar .sak-iki,.sak.gw-dar .sak-plan-alan,.sak.gw-dar .sak-rehber{grid-template-columns:minmax(0,1fr)}
.sak.gw-dar .sak-sekmeler{grid-template-columns:repeat(3,minmax(0,1fr))}
.sak.gw-cokdar{font-size:15px}
.sak.gw-cokdar .sak-sekmeler{gap:6px}
.sak.gw-cokdar .sak-sekme{flex-direction:column;gap:4px;min-height:66px;font-size:14px;padding:6px 4px}
.sak.gw-cokdar .sak-panel{padding:12px}
.sak.gw-cokdar .sak-hero-ikon{width:62px}
.sak.gw-cokdar .sak-hero-ikon svg{width:30px;height:30px}
.sak.gw-cokdar .sak-hero-baslik{font-size:20px}
.sak.gw-cokdar .sak-hero p{font-size:14px}
.sak.gw-cokdar .sak-sinif-sec{width:100%}
.sak.gw-cokdar .sak-sinif-sec select{flex:1;min-width:0}
.sak.gw-cokdar .sak-ust .sak-btn{flex:1 1 40%}
.sak.gw-cokdar .sak-btn{font-size:16px;padding:8px 14px}
.sak.gw-cokdar .sak-btn.dev{min-height:64px;font-size:22px;padding:10px 18px}
.sak.gw-cokdar .sak-satir.orta .sak-btn,.sak.gw-cokdar .sak-cubuk .sak-btn{flex:1 1 auto}
.sak.gw-cokdar .sak-bosluk{display:none}
.sak.gw-cokdar .sak-adkart{min-height:220px;height:240px}
.sak.gw-cokdar .sak-gizlilik b{font-size:17px}
.sak.gw-cokdar .sak-onizle-liste{columns:1}
.sak.gw-cokdar .sak-sinif-satir .sak-satir{width:100%}
.sak.gw-cokdar .sak-sinif-satir .sak-btn{flex:1 1 auto}
.sak.gw-cokdar .sak-siralar{gap:10px 14px;min-width:calc(var(--sut,3) * 210px + 70px)}
.sak.gw-cokdar .sak-plan.tekli .sak-siralar{min-width:calc(var(--sut,3) * 120px + 70px)}
.sak.gw-cokdar .sak-btn.kare{font-size:26px;padding:0}
.sak.gw-cokdar .sak-yer{font-size:13px}
.sak.gw-cokdar .sak-gruplar{grid-template-columns:minmax(0,1fr)}

/* ---------------- yazdırma kâğıdı (önizleme ve #sak-baski) ---------------- */
.sak-kagit{background:#fff;color:#000;font-family:'Times New Roman',Times,'Liberation Serif',serif;font-size:11pt;line-height:1.3;box-sizing:border-box;text-align:left}
.sak-kagit *{box-sizing:border-box}
.sak-kagit.dikey{width:210mm;min-height:297mm;padding:15mm}
.sak-kagit.yatay{width:297mm;min-height:210mm;padding:15mm}
.sak-kagit p{margin:0 0 1.5mm}
.sak-kagit table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0}
.sak-kagit td{border:1px solid #000;padding:1.5mm 2mm;vertical-align:top;overflow-wrap:break-word;color:#000;background-clip:padding-box}
.sak-kagit td.bosluk{border:0}
.sak-kagit .sak-k-plan td.yer{border:1.5px solid #000;line-height:1.2}
.sak-kagit .sak-k-tablo td{line-height:1.5;padding:3mm 4mm}
.sak-kagit [data-ipucu]:empty::before{content:attr(data-ipucu);color:#9A9DA3;font-weight:400;font-style:italic}
.sak-kagit [contenteditable]{outline:0;border-radius:2px}
.sak-kagit [contenteditable]:hover{box-shadow:inset 0 0 0 1px #9CC7DA}
.sak-kagit [contenteditable]:focus{box-shadow:inset 0 0 0 2px #0398CE;background:#F4FAFD}
#sak-baski{display:none}
@media print{
  html.sak-baski-var,html.sak-baski-var body{background:#fff!important;margin:0!important;padding:0!important;height:auto!important;min-height:0!important;overflow:visible!important}
  html.sak-baski-var body>*:not(#sak-baski){display:none!important}
  html.sak-baski-var #sak-baski{display:block!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #sak-baski .sak-kagit{width:auto!important;min-height:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
  #sak-baski tr{page-break-inside:avoid;break-inside:avoid}
  #sak-baski .sak-kagit [data-ipucu]:empty{display:none}
}