/* BOLME-17EYL — index.html stil bloğu, bayt bayt */
:root{--bg:#f1f5f9;--bg2:#e8eef5;--card:#ffffff;--card2:#f1f5f9;--border:#d6dde7;--border2:#b8c2d0;--accent:#3b6fd1;--accent2:#7c5cfc;--accent3:#0d9488;--accent5:#ea580c;--text:#0f172a;--text2:#475569;--text3:#94a3b8;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#3b6fd1;--r:12px;--r2:8px;--sh:0 4px 24px rgba(15,23,42,.08);--sh2:0 2px 12px rgba(15,23,42,.06)}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-y:auto;overflow-x:hidden}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;overflow-y:auto;font-size:16px;line-height:1.5}
.demo-banner{background:linear-gradient(90deg,var(--accent2),var(--accent));color:#fff;text-align:center;padding:7px;font-size:14px;font-weight:600;position:sticky;top:0;z-index:200}
#login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at 20% 50%,#1a2a6c22,transparent 60%),var(--bg)}
.lbox{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:34px;width:440px;max-width:100%;box-shadow:var(--sh)}
.llogo{text-align:center;margin-bottom:22px}
.licon{width:54px;height:54px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:10px}
.llogo h1{font-size:27px;font-weight:800}
.llogo p{color:var(--text2);font-size:15px;margin-top:3px}
.rolegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px}
.rolebtn{padding:12px 6px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;text-align:center;transition:.2s}
.rolebtn.active{background:rgba(79,142,247,.15);border-color:var(--accent);color:var(--accent)}
.rolebtn .ri{font-size:22px;display:block;margin-bottom:4px}
.fg{margin-bottom:var(--bosluk-m)}
.fg label{display:block;font-size:var(--yazi-kucuk);color:var(--text2);margin-bottom:var(--bosluk-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
/* dolgu olcekten; YAZI 16px SABIT kalir (kural a: alti iOS'ta yakinlastirir).
min-height YALNIZ metin/secim alanlarina: checkbox-radio'ya verilirse satir sisiyor. */
.fg input:not([type=checkbox]):not([type=radio]),.fg select,.fg textarea{min-height:var(--form-yukseklik)}
.fg input,.fg select,.fg textarea{width:100%;padding:var(--bosluk-s) var(--bosluk-m);background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-family:inherit;font-size:16px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.fg input[type=checkbox],.fg input[type=radio]{width:auto;padding:0;flex:none} /* MODALSIG-16EKI — radyo/onay alan genişliği almaz (.frm'deki istisnanın aynısı) */
.fg label:has(> input[type=radio]),.fg label:has(> input[type=checkbox]),.frm label:has(> input[type=radio]),.frm label:has(> input[type=checkbox]),#modal #modb label:has(> input[type=radio]),#modal #modb label:has(> input[type=checkbox]){text-transform:none;letter-spacing:normal} /* MODALSIG-16EKI — seçenek etiketi alan etiketi gibi BÜYÜK HARF olmaz */
#modal #modb .frm{max-width:none !important} /* MODALSIG-16EKI — pencere içinde form pencereden dar tutulmaz (içerik tam genişlik, iç kaydırma azalır) */
#modal .md.mod-sig{width:var(--mod-sig-w,1180px);max-height:calc(100dvh - 36px) !important} /* MODALSIG-17EKI/4 — genişletilen pencere ekran yüksekliğini de kullanır */ /* MODALSIG-16EKI — taşan pencere geniş ekranda genişler (_modSigdir) */
#modal .mod-sig-kok{columns:2;column-gap:28px;display:block !important}
#modal .mod-sig-kok.mod-sig-k3{columns:3}
#modal .mod-sig-kok.mod-sig-k4{columns:4}
#modal .mod-sig-kok.mod-sig-k5{columns:5} /* MODALSIG-17EKI/4 — çok sayıda kısa satırlı liste */
#modal .mod-sig-liste{column-gap:18px;border:1px solid var(--border);border-radius:10px;padding:6px 8px;margin:6px 0}
#modal .mod-sig-liste > *{break-inside:avoid} /* MODALSIG-17EKI/4 — 3e liste kutusu */
#modal .md.mod-sig .mod-sig-liste-kok{max-height:none !important;overflow:visible !important}
#modal #modb.mod-sig-ozet label:has(> input[type=checkbox]) .txs,#modal #modb.mod-sig-ozet label:has(> input[type=radio]) .txs,#modal #modb.mod-sig-ozet label:has(> input[type=checkbox]) .txs + br,#modal #modb.mod-sig-ozet label:has(> input[type=checkbox]) b + br,#modal #modb.mod-sig-ozet label:has(> input[type=radio]) b + br{display:none} /* MODALSIG-17EKI/4 — sığmayan pencerede seçenek açıklaması ipucunda */
#modal .md.mod-sig .mod-sig-kok{max-height:none !important;overflow:visible !important}
/* MODALSIG-17EKI/5 — TELEFON: pencere tam ekran (sonraki genel `.mo{padding:16px}` MODALCERCEVE'nin padding:0'ını eziyordu; kimlikli seçici yener) ·
form en küçük genişliği ekranı aşmaz · form kendi içinde kaymaz (çift kaydırma) · giriş alanı kabını aşmaz */
@media(max-width:860px){
#modal.mo{padding:0}
#modal #modb .kd-form{min-width:0;max-height:none;overflow:visible;padding-right:0}
#modal #modb input,#modal #modb select,#modal #modb textarea{max-width:100%}
}
body.mobil-gorunum #modal.mo{padding:0}
body.mobil-gorunum #modal #modb .kd-form{min-width:0;max-height:none;overflow:visible;padding-right:0}
body.mobil-gorunum #modal #modb input,body.mobil-gorunum #modal #modb select,body.mobil-gorunum #modal #modb textarea{max-width:100%} /* MODALSIG-17EKI/4 — sütun kökünün kendi iç kaydırması kalkar (çift kaydırma: Yayınevi Yönetimi) */
#modal .md.mod-sig #modb > div[style*="max-width"],#modal .md.mod-sig .mod-sig-kok{max-width:none !important}
#modal .md.mod-sig .mod-sig-kok{width:auto !important} /* MODALSIG-17EKI — sabit genişlikli form (.kp-form 480 px) sütunları sıkıştırmasın */ /* MODALSIG-16EKI — genişleyen pencerede içerik sarmalayıcısı dar kalmaz */
#modal .mod-sig-kok > *,#modal .mod-sig-kok > [data-mod-sig-acik] > *{break-inside:avoid} /* MODALSIG-17EKI/2 — açılmış satırın alanları da bölünmez */
#modal .md.mod-sig .mod-sig-secenek{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px} /* MODALSIG-16EKI — geniş pencerede seçenek kartları yan yana */
#modal .md.mod-sig .mod-sig-secenek > :not(label){grid-column:1/-1} /* MODALSIG-17EKI — işaret _modSigSecenekIsaretle'den */
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,142,247,.15)}
.fg select option{background:var(--card)}
/* ===== MODERN FORM — class="frm" kullanan TÜM modallara otomatik uygulanır ===== */
.frm{padding:4px}
.frm > div{margin-bottom:14px}
.frm .g2, .frm .g3, .frm .fr{margin-bottom:14px}
.frm .g2 > div, .frm .g3 > div, .frm .fr > div{margin-bottom:0}
.frm label{display:block;font-size:14px;color:var(--text2);margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.frm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.frm select,
.frm textarea{
width:100%;padding:11px 14px;background:var(--bg2);
border:1.5px solid var(--border);border-radius:10px;
color:var(--text);font-family:inherit;font-size:16px;
box-sizing:border-box;outline:none;
transition:border-color .15s,box-shadow .15s
}
.frm input:focus,.frm select:focus,.frm textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(79,142,247,.15)
}
.frm select option{background:var(--card)}
.frm textarea{resize:vertical;min-height:80px;font-family:inherit}
/* ===== MODAL içinde her input için son güvenlik ağı (frm dışı modallar için) ===== */
/* ANAHTARGOR-16EYL — maxlength="1" kutular HARİÇ: bu kural 28px yatay dolgu
ekliyor, telefonda 33px'lik harf kutusunun içerik alanı 5px'e düşüyor ve
girilen harf şerit hâlinde kırpılıyordu (değer duruyor, GÖRÜNMÜYOR). */
#modal #modb input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([class*="bi"]):not([maxlength="1"]),
#modal #modb select:not([class]),
#modal #modb textarea:not([class]){
padding:11px 14px;background:var(--bg2);
border:1.5px solid var(--border);border-radius:10px;
color:var(--text);font-family:inherit;font-size:16px;
box-sizing:border-box;outline:none;
transition:border-color .15s,box-shadow .15s
}
#modal #modb input:focus,#modal #modb select:focus,#modal #modb textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(79,142,247,.15)
}
#modal #modb label{font-weight:700;font-size:14px;letter-spacing:.4px;color:var(--text2);margin-bottom:6px;display:block}
/* ============================================================
🎨 MODERN BUTON SİSTEMİ — Tek noktadan kontrol
============================================================
Tüm .btn, .btn-p, .btn-s, .btn-d, .btn-w, .btn-g ve hatta
sadece .btn-s/.btn-p (.btn olmadan) bile bu sistemi kullanır.
Bu sayede eski-stilli hiçbir buton kalmaz. */
/* Temel .btn + tek-class kullanım için (.btn-p, .btn-s) ortak stil */
.btn, .btn-p, .btn-s, .btn-w, .btn-d, .btn-g {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
border-radius: 10px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: .2px;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.btn:hover:not(:disabled), .btn-p:hover:not(:disabled), .btn-s:hover:not(:disabled),
.btn-w:hover:not(:disabled), .btn-d:hover:not(:disabled), .btn-g:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(0,0,0,.15);
filter: brightness(1.05);
}
.btn:active:not(:disabled), .btn-p:active:not(:disabled), .btn-s:active:not(:disabled),
.btn-w:active:not(:disabled), .btn-d:active:not(:disabled), .btn-g:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0,0,0,.12);
}
.btn:disabled, .btn-p:disabled, .btn-s:disabled, .btn-w:disabled, .btn-d:disabled, .btn-g:disabled {
opacity: .5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Renkler — gradient + uygun gölge */
.btn-p, .btn.btn-p {
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff;
box-shadow: 0 3px 10px rgba(79,142,247,.28);
}
.btn-p:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(79,142,247,.4); }
.btn-s, .btn.btn-s {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #fff;
box-shadow: 0 3px 10px rgba(34,197,94,.28);
}
.btn-s:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(34,197,94,.4); }
.btn-w, .btn.btn-w {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
box-shadow: 0 3px 10px rgba(245,158,11,.28);
}
.btn-w:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(245,158,11,.4); }
.btn-d, .btn.btn-d {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
box-shadow: 0 3px 10px rgba(239,68,68,.28);
}
.btn-d:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(239,68,68,.4); }
.btn-g, .btn.btn-g {
background: var(--card2);
color: var(--text);
border: 1.5px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.btn-g:hover:not(:disabled) { background: var(--card); border-color: var(--accent); }
/* Boyut varyantları */
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.btn-bl { width: 100%; }
/* İkon butonları — modernize (sil/düzenle ikonları) */
.bi {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
min-width: 36px;
min-height: 36px;
border-radius: 9px;
background: var(--card2);
border: 1px solid var(--border);
color: var(--text2);
cursor: pointer;
font-size: 15px;
transition: all .15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.bi:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(79,142,247,.3);
}
/* Eski .btn-bl davranışı korunsun */
.btn-bl { display: flex; }
/* Disabled inline style override için ek koruma */
button[disabled], .btn[disabled], .btn-p[disabled], .btn-s[disabled], .btn-w[disabled], .btn-d[disabled], .btn-g[disabled] {
opacity: .5 !important;
cursor: not-allowed !important;
transform: none !important;
filter: grayscale(.3);
}
/* Modal içindeki buton grupları — sağa hizalı standart sıra */
.frm .btn, .frm .btn-p, .frm .btn-s, .frm .btn-w, .frm .btn-d, .frm .btn-g {
min-width: 110px;
justify-content: center;
}
#app{display:none;min-height:100dvh;align-items:stretch}
/* MENUKAPALI-16EYL — sol menü genişliği TEK KAYNAK. --sb-w: menünün kendi genişliği (kabuklar değiştirir: koç 250, daraltılmış 76).
--menu-genislik: içeriğe ayrılan yer; menü kapalıyken (body.sb-kapali, yalnız masaüstü) ve telefonda 0.
.main · #sbTutamak · #altSerit hepsi --menu-genislik'ten beslenir; başka yerde piksel yazma. */
body{--sb-w:230px;--menu-genislik:var(--sb-w)}
@media(min-width:861px){body.sb-kapali{--menu-genislik:0px}body.sb-kapali .sb{transform:translateX(-105%)}}
@media(max-width:860px){body{--menu-genislik:0px}}
.sb{position:fixed;left:0;top:0;bottom:0;width:var(--sb-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;overflow-y:auto;transition:transform .2s ease}
body.sb-gecis .sb{transition:transform .2s ease,width .2s ease}
body.sb-gecis .main{transition:margin-left .2s ease,width .2s ease,max-width .2s ease}
#sbTutamak{position:fixed;top:50%;transform:translateY(-50%);left:var(--menu-genislik);z-index:350;width:22px;height:64px;border:1px solid var(--border);border-left:none;border-radius:0 10px 10px 0;background:var(--card);color:var(--text2);font-size:13px;font-weight:800;cursor:pointer;transition:left .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:2px 0 8px rgba(0,0,0,.08);padding:0}
@media(max-width:860px){#sbTutamak{display:none}}
#altSerit{position:fixed;left:var(--menu-genislik);right:0;bottom:var(--ob-serit-h,0px);z-index:120;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 170px 6px 14px;background:var(--card);border-top:1px solid var(--border);font-size:12.5px;transition:left .2s ease}
#altSerit .as-etiket{color:var(--text2);font-weight:700;display:flex;align-items:center;gap:6px}
@media(max-width:860px){#altSerit{display:none}}
/* 🖥️ LAYOUT-27AGU — TAM SAYFA KABUK (masaüstü): gövde kaymaz, TEK içerik
kaydırması .pc içindedir. Üst çubuk + alt durum çubuğu sabit kalır;
sticky öğeler (.top, liste panelleri, tablo başlıkları) .pc kaydırıcısına
göre çalışır. Mobil (≤860px / mobil-gorunum) ESKİ body-scroll düzeninde. */
@media(min-width:861px){
body:not(.mobil-gorunum){height:100dvh;overflow:hidden}
body:not(.mobil-gorunum) .main{height:100dvh;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-bottom:0}
body:not(.mobil-gorunum) .top{flex:0 0 auto}
body:not(.mobil-gorunum) .pc{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:72px}
body.mobil-gorunum .main{padding-bottom:56px}
}
/* 🪗 AYARPANEL-27AGU — ortak akordiyon ayar paneli */
.ayar-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden}
.ap-baslik{width:100%;display:flex;align-items:center;gap:9px;min-height:46px;padding:10px 14px;border:none;background:var(--bg2);color:var(--text);cursor:pointer;font-family:inherit;font-size:13.5px;text-align:left}
.ap-baslik:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ap-ok{color:var(--text3);font-size:13px;flex:0 0 auto}
.ap-ad{font-weight:800;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-ozet{color:var(--text2);font-size:12px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-rozet{display:none;flex:0 0 auto;font-size:var(--yazi-kucuk);font-weight:800;color:#b45309;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.5);border-radius:9px;padding:2px 8px}
.ayar-panel.ap-kirli .ap-rozet{display:inline-block}
.ap-icerik{display:grid;grid-template-rows:1fr;transition:grid-template-rows .18s ease}
.ayar-panel.ap-kapali .ap-icerik{grid-template-rows:0fr}
.ap-ic{min-height:0;overflow:hidden}
.ap-ic>.card{margin-bottom:0;border:none;border-radius:0}
.ap-bar{display:flex;gap:6px;margin-bottom:8px}
@media(max-width:480px){.ap-ozet{font-size:var(--yazi-kucuk)}}
.sb-lg{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-lg .li{width:32px;height:32px;border-radius:9px;font-size:17px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));flex-shrink:0}
.sb-lg h2{font-size:17px;font-weight:800}
.sb-lg span{font-size:12px;color:var(--text2)}
.sb-us{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;color:#fff}
.av-a{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.av-t{background:linear-gradient(135deg,var(--success),#00a884)}
.av-p{background:linear-gradient(135deg,var(--accent5),#e67700)}
.av-c{background:linear-gradient(135deg,var(--accent2),#5e3fc4)}
.sb-us .un{font-size:15px;font-weight:600}.sb-us .ur{font-size:13px;color:var(--text2)}
.sbnav{flex:1;padding:10px}
.nsec{margin-bottom:14px}
.nst{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;padding:0 8px;margin-bottom:5px}
/* 📂 DUZEN-22EYL — kategori başlığındaki modül sayısı */
.nst-say{font-weight:700;opacity:.75;letter-spacing:0}
.nst-tog{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:6px 8px;border-radius:7px;user-select:none;transition:background .15s}
.nst-tog:hover{background:var(--bg);color:var(--text2)}
.nst-ok{font-size:12px;transition:transform .2s;color:var(--text3)}
.nsec-items{overflow:hidden;max-height:2400px;transition:max-height .35s ease,opacity .2s;opacity:1}
.nsec-items.kapali{max-height:0;opacity:0;margin:0}
.ni{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r2);cursor:pointer;color:var(--text2);font-size:15px;font-weight:500;margin-bottom:2px;position:relative}
.ni:hover{background:var(--card);color:var(--text)}
.ni.active{background:rgba(79,142,247,.15);color:var(--accent)}
.ni.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:var(--accent);border-radius:0 4px 4px 0}
.nico{font-size:17px;width:20px;text-align:center}
.nbadge{margin-left:auto;background:var(--danger);color:#fff;font-size:12px;padding:1px 6px;border-radius:10px;font-weight:700}
.sbf{padding:14px 16px;border-top:1px solid var(--border)}
.main{margin-left:var(--menu-genislik);min-height:100dvh;height:auto;flex:1 1 auto;width:calc(100% - var(--menu-genislik));max-width:calc(100% - var(--menu-genislik));box-sizing:border-box;overflow:visible}
.top{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 22px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.top h1{font-size:19px;font-weight:700}
.tba{display:flex;align-items:center;gap:10px}
/* 📏 DUZEN-22EYL — MASAÜSTÜ İÇERİK GENİŞLİĞİ (TEK KURAL, tüm ekranlar).
Kök neden: `.pc` yalnız `width:100%` taşıyordu; 1920/2560px'te satırlar ekran
boyu uzayıp göz soldan sağa tarayamıyordu (1500/1900 medya sorguları yalnız
dolguyu artırıyor, satır uzunluğunu SINIRLAMIYORDU).
Çözüm tek yerde: içerik 1400px'te durur ve ortalanır. 1366×768'de sınır zaten
devreye girmez — ekran tam kullanılır. Tablo/ızgara ekranları `.genis-icerik`
ile muaf tutulur (show() içinde GENIS_EKRANLAR listesinden verilir).
Mobilde `body.mobil-gorunum .pc` (480px) bu kuralı zaten ezer. */
.pc{padding:24px 28px;width:100%;max-width:var(--icerik-max,1400px);margin-inline:auto;box-sizing:border-box}
.pc.genis-icerik{max-width:100%}
/* Metin ağırlıklı blok: satır uzunluğu okunabilir sınırda kalsın */
.metin-blok{max-width:75ch}
@media(min-width:1500px){.pc{padding:28px 44px}#pc.pc-sutun{column-count:3}}
/* 📏 EKRANSIKIS-25EYL — içerik sınırı KADEMELİ: 1920px'te 1400px'lik kilit iki yanda ~260px boşluk bırakıyordu */
@media(min-width:1600px){:root{--icerik-max:1600px}}
@media(min-width:1900px){:root{--icerik-max:1840px}}
@media(min-width:1900px){.pc{padding:32px 70px}}
/* 📏 YOGUNLUK-21EYL — kart dolgusu ölçekten (önce 20px sabit). Sistemdeki en yaygın
tek ölçü: her kartta 2×8px kazanç, 13 kartlı ekranda ~100px. */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:var(--bosluk-l);box-shadow:var(--sh2);word-break:break-word;overflow-wrap:anywhere}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ct{font-size:17px;font-weight:700}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bosluk-m);margin-bottom:var(--bosluk-l)}
.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:var(--bosluk-m) var(--bosluk-l)}
.sl{font-size:var(--yazi-normal);color:var(--text2);margin-bottom:var(--bosluk-s)}
.sv{font-size:var(--rakam-buyuk);font-weight:800;line-height:1.1;font-family:'JetBrains Mono',monospace}
/* VERIKARTI2-06EYL — sistem geneli TEK sıra: rakam üstte, etiket altta (44 .sc kartı, markup değişmez; diğer çocuklar sonda) */
.sc{display:flex;flex-direction:column;justify-content:flex-start}
.sc>*{order:3}.sc>.sv{order:1}.sc>.sl{order:2;margin:4px 0 0}
.sv.b{color:var(--accent)}.sv.pu{color:var(--accent2)}.sv.g{color:var(--accent3)}.sv.o{color:var(--accent5)}.sv.r{color:var(--danger)}
.scg{font-size:13px;margin-top:5px}.scg.u{color:var(--success)}.scg.d{color:var(--danger)}
.tw{overflow-x:auto;border-radius:var(--r2)}
/* 📜 KLISTE-07EYL — ORTAK KAYDIRILABİLİR LİSTE KABI ()
Uzun listeler artık sayfayı uzatmaz: kendi kabında, KENDİ GÖRÜNÜR kaydırma
çubuğuyla kayar ve başlık satırı sabit kalır. Kapsam bilinçli olarak dar:
· `#pc` → yalnız SAYFA listeleri. Pencere (modal) içindeki tablolar hariç;
MODALCERCEVE-07EYL "tek kaydırma alanı" sözleşmesi bozulmasın.
· `body:not(.mobil-gorunum)` → mobilde TEKKAYDIR-29AGU geçerli kalır,
kaydırıcı PENCEREdir; telefonda iç kap AÇILMAZ.
Bir ekranın kabı sınırlanmasın isteniyorsa kaba `kl-yok` sınıfı eklenir. */
/* ⚠️ KAYDIRMA-28EYL — ASIL KÖK NEDEN BURASIYDI (tarayıcıya soruldu:
CSS.getMatchedStylesForNode → `.tw.tkr-tablo`nun `contain`i bu kuraldan).
`overscroll-behavior:contain` HER tablo kabına veriliyordu. Tablo kısa
olunca (içerik < 560px) kap KAYAMIYOR ama `contain` tekerleğin sayfaya
devrini yine de engelliyor → fare tablonun/listenin üstündeyken kaydırma
ÖLÜ, yanındaki boş alanda çalışıyor. Ölçüldü: exams tablo üstü 0px.
Dikey eksen serbest bırakıldı: tablo kayabiliyorsa önce tablo kayar,
sonuna gelince sayfa devam eder (tarayıcının doğal davranışı).
Yatay eksende engelleme korunur (yan kaydırma geri/ileri gezinmesin). */
body:not(.mobil-gorunum) #pc .tw:not(.kl-yok),.kl{
max-height:var(--kl-h,min(62vh,560px));overflow:auto;overscroll-behavior-x:contain;overscroll-behavior-y:auto;
scrollbar-width:thin;scrollbar-color:var(--border) transparent}
body:not(.mobil-gorunum) #pc .tw:not(.kl-yok)::-webkit-scrollbar,.kl::-webkit-scrollbar{width:11px;height:11px}
body:not(.mobil-gorunum) #pc .tw:not(.kl-yok)::-webkit-scrollbar-track,.kl::-webkit-scrollbar-track{background:transparent}
body:not(.mobil-gorunum) #pc .tw:not(.kl-yok)::-webkit-scrollbar-thumb,.kl::-webkit-scrollbar-thumb{
background:var(--border);border-radius:99px;border:2px solid var(--card)}
body:not(.mobil-gorunum) #pc .tw:not(.kl-yok)::-webkit-scrollbar-thumb:hover,.kl::-webkit-scrollbar-thumb:hover{background:var(--text3)}
body:not(.mobil-gorunum) #pc .tw:not(.kl-yok) thead th,.kl thead th{
position:sticky;top:0;z-index:2;background:var(--card);box-shadow:0 1px 0 var(--border)}
.kl-sayac{font-size:12px;color:var(--text3);padding:6px 10px;border-top:1px solid var(--border)}
/* 🧭 REHBERATAMA-08EYL — toplu rehberlik ataması · 💬 GORUSMENOT-B4-08EYL — görüşme notu durum rozeti */
.gn-durum{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:99px;min-height:28px;line-height:1.2;max-width:100%}
.ra-yerlesim{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start;min-width:0}
.ra-sag{position:sticky;top:8px;min-width:0}
.ra-filtre{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px;min-width:0}
.ra-filtre select,.ra-filtre input{min-height:var(--form-yukseklik);max-width:100%;min-width:0}
.ra-filtre .mob-cipler{padding:0;margin:0;flex:1 1 100%;min-width:0}
.ra-tablo{width:100%;border-collapse:collapse;table-layout:auto;min-width:0}
.ra-tablo th{position:sticky;top:0;z-index:2;background:var(--card);box-shadow:0 1px 0 var(--border);text-align:left;font-size:12px;padding:8px}
.ra-tablo td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere}
.ra-tablo td.yz,.ra-tablo th.yz{white-space:nowrap;overflow-wrap:normal}
.ra-satir{cursor:pointer}
.ra-satir td{min-height:48px}
.ra-satir:hover{background:rgba(59,111,209,.06)}
.ra-satir.secili{background:rgba(59,111,209,.12)}
.ra-satir input[type=checkbox],.ra-tablo th input[type=checkbox]{width:22px;height:22px;margin:0;cursor:pointer;vertical-align:middle}
.ra-rozet{display:inline-block;font-size:var(--yazi-kucuk);font-weight:700;padding:3px 8px;border-radius:99px;background:var(--bg2);border:1px solid var(--border);color:var(--text3);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ra-rozet.var{background:rgba(124,92,252,.12);border-color:rgba(124,92,252,.4);color:#5b3fd6}
.ra-denge{display:flex;flex-direction:column;gap:6px}
.ra-denge .sat{display:flex;align-items:center;gap:8px;min-height:var(--satir-yukseklik);padding:6px 8px;border-radius:9px;background:var(--bg2);cursor:pointer;min-width:0}
.ra-denge .sat.hedef{outline:2px solid #7c5cfc}
.ra-denge .bar{height:6px;border-radius:99px;background:var(--border);flex:1 1 40px;min-width:30px;overflow:hidden}
.ra-denge .bar i{display:block;height:100%;background:#7c5cfc}
.ra-alt{position:sticky;bottom:50px;z-index:6;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;box-shadow:0 -6px 18px -10px rgba(0,0,0,.35)} /* 50px: #altSerit (44px) üstünde */
@media(max-width:860px){.ra-alt{bottom:8px}}
.ra-alt .btn{min-height:var(--buton-yukseklik)}
body.mobil-gorunum .ra-alt{position:fixed;left:8px;right:8px;bottom:calc(8px + var(--mob-nav-h,58px) + var(--ob-serit-h,0px));margin-top:0} /* mobil kabukta #pc kaydırıcı değil: sticky tutmaz */
body.mobil-gorunum #pc:has(.ra-alt){padding-bottom:calc(var(--mob-nav-h,58px) + 140px + env(safe-area-inset-bottom,0px))}
body.mobil-gorunum:has(.ra-alt) #anaSayfaBtn,body.mobil-gorunum:has(.ra-alt) #isaretRehberiBtn,body.mobil-gorunum:has(.ra-alt) #yukariCikBtn{display:none !important}
@media (max-width:760px){.ra-yerlesim{grid-template-columns:1fr}.ra-sag{position:static}.ra-alt{gap:6px}.ra-alt>b{flex:1 1 100%}.ra-alt .btn{flex:1 1 30%;justify-content:center;padding-left:6px;padding-right:6px;font-size:13px}.ra-rozet{max-width:110px}}
@media (max-width:760px){.ra-aciklama{display:none}.ra-sag{order:-1}.ra-secim .btn{flex:1 1 30%;padding:6px 4px;font-size:12px;justify-content:center}}
.ra-denge-kap summary{list-style:none}.ra-denge-kap summary::-webkit-details-marker{display:none}
/* 🧾 SIPARISLISTE-07EYL — tıklanabilir durum sayaçları */
.sl-sayac{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin-bottom:9px}
.sl-kutu{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:9px 11px;
border:2px solid var(--border);border-radius:11px;background:var(--card);cursor:pointer;
font-family:inherit;min-height:56px;text-align:left}
.sl-kutu.aktif{background:var(--bg2);box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.sl-adet{font-size:20px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.sl-et{font-size:var(--yazi-kucuk);color:var(--text2);overflow-wrap:anywhere}
/* 📱 TESTKURALT-07EYL/B — sayfa tam ekranı ORTAK PENCERE gövdesinde.
Kendi position:fixed katmanı açılmaz (deploy linti + MODALCERCEVE). */
.ste-govde{display:flex;gap:14px;padding:6px 2px;overflow:auto;
scroll-snap-type:x mandatory;touch-action:pinch-zoom pan-x pan-y;-webkit-overflow-scrolling:touch}
.ste-sayfa{scroll-snap-align:center;flex:none;display:flex;flex-direction:column;gap:6px;align-items:center}
.ste-ic{position:relative;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.25);border-radius:3px;overflow:hidden}
.ste-no{font-size:12px;color:var(--text3);text-align:center}
/* ═══════════════════════════════════════════════════════════════════
📱 MOBTASMA-07EYL — MOBİLDE SAĞDAN TAŞMA YOK
Satır içi `grid-template-columns:1fr 1fr` sınıf kuralını ezdiği için
`.fr` mobil kuralı bu ızgaralara hiç uygulanmıyordu. Öznitelik seçici
+ !important ile satır içi ızgaralar da tek sütuna düşer.
═══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
#pc [style*="grid-template-columns:1fr 1fr"],
#pc [style*="grid-template-columns: 1fr 1fr"],
#pc [style*="grid-template-columns:repeat(2,"],
#pc [style*="grid-template-columns:repeat(3,"],
#pc [style*="grid-template-columns:repeat(4,"],
.mb [style*="grid-template-columns:1fr 1fr"],
.mb [style*="grid-template-columns:repeat(2,"]{grid-template-columns:minmax(0,1fr) !important}
/* Izgara/esnek çocuğunun min-width:auto varsayılanı uzun metinde kabı
genişletir — düğme ve alanların 44px dokunma hedefi korunur. */
#pc [style*="display:grid"] > *:not(button):not(input):not(select):not(.btn),
#pc [style*="display:flex"] > *:not(button):not(input):not(select):not(.btn){min-width:0}
#pc label,#pc p,#pc .txs,#pc .tc{overflow-wrap:anywhere}
/* Sabit px genişlik mobilde tavanlanır (işlev değişmez, yalnız sığar) */
#pc [style*="width:"]:not(img):not(svg):not(canvas){max-width:100%}
}
/* Uzun yardım paragrafı mobilde KATLI gelir, açılınca TAM okunur */
details.mob-yardim{margin-top:5px}
details.mob-yardim > summary{cursor:pointer;font-size:12.5px;color:var(--mavi,#2563eb);
font-weight:700;list-style:none;padding:6px 0;min-height:32px;display:flex;align-items:center}
details.mob-yardim > summary::-webkit-details-marker{display:none}
details.mob-yardim > div{font-size:12.5px;color:var(--text3);line-height:1.55;overflow-wrap:anywhere}
@media(min-width:769px){
details.mob-yardim > summary{display:none}
details.mob-yardim > div{display:block !important}
}
/* Test Kur önizlemesinde yüzen butonlar içeriği örtmesin */
body:has(.stOnizlemeSar) #yukariCikBtn,body:has(.stOnizlemeSar) #kaydetFloat{display:none !important}
.stSayfaKutu,.stAnahtarKutu{max-width:100%}
/* 👁 GORUNUMSALT-07EYL — salt okunur görünümde yazma butonları PASİF görünür.
Gezinme ve "Görünümden Çık" etkilenmez (onclick=show/closeM ya da
data-gorunum-izin="1"). */
body.gorunum-salt .btn-p,body.gorunum-salt .btn-d,body.gorunum-salt .btn-s,body.gorunum-salt .btn-w{
opacity:.45;cursor:not-allowed;filter:grayscale(.55);position:relative}
body.gorunum-salt .btn-p[data-gorunum-izin="1"],body.gorunum-salt .btn-d[data-gorunum-izin="1"],
body.gorunum-salt .btn-s[data-gorunum-izin="1"],body.gorunum-salt .btn-w[data-gorunum-izin="1"]{
opacity:1;cursor:pointer;filter:none}
body.gorunum-salt input[type="file"]+*{opacity:.45}
body.gorunum-salt .gs-uyari{display:block}
.gs-uyari{display:none;font-size:12px;color:#c2410c;background:rgba(249,115,22,.12);
border-left:3px solid #f97316;border-radius:0 8px 8px 0;padding:7px 10px;margin:8px 0}
/* 📱 SORUMOBIL-07EYL — mobil soru ızgarası: tek dokunuşla ekle/çıkar,
44px dokunma hedefi, görsel KIRPILMAZ (contain), yatay kaydırma YOK */
.shm-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-top:9px}
.shm-kart{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.shm-kart.secili{border-color:#16a34a;box-shadow:0 0 0 2px rgba(22,163,74,.28)}
.shm-kart img{width:100%;height:150px;object-fit:contain;object-position:top;background:var(--bg2);cursor:zoom-in;display:block}
.shm-alt{display:flex;align-items:center;gap:6px;padding:6px 7px;flex-wrap:wrap}
.shm-zor{font-size:var(--yazi-kucuk);font-weight:700}
.shm-kul{font-size:var(--yazi-kucuk)}
.shm-btn{margin-left:auto;min-height:var(--buton-yukseklik);min-width:80px;font-size:12.5px;padding:0 10px}
body.mobil-gorunum .shm-izgara{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
/* 🎯 HEDEFIM-07EYL — iki sütun masaüstü, tek sütun mobil (yatay kaydırma YOK) */
@media(max-width:900px){ .hdf-iki{grid-template-columns:minmax(0,1fr) !important} }
body.mobil-gorunum .hdf-iki{grid-template-columns:minmax(0,1fr) !important}
table{width:100%;border-collapse:collapse}
/* 📏 YOGUNLUK-21EYL — ORTAK tablo ölçüsü. Önce 11/14px dolgu + 15px gövde yazısı
(satır 43px). Artık ölçekten: satır ~26px → 20 satırlı tabloda ~340px kazanç.
Telefonda dolgu bir kademe artar (dokunma hedefi). */
th{background:var(--bg2);color:var(--text2);font-size:var(--yazi-kucuk);font-weight:700;text-transform:uppercase;padding:var(--bosluk-s) var(--bosluk-m);text-align:left;border-bottom:1px solid var(--border)}
td{padding:var(--bosluk-s) var(--bosluk-m);border-bottom:1px solid var(--border);font-size:var(--yazi-normal)}
/* Zebra striping — beyaz tema için ardışık satırlar farklı tonda görünür */
tbody tr:nth-child(even) td{background:#fafbfd}
/* 📏 DARTABLO-26EYL — SORU DAĞILIMI TABLOSU DAR VE BİTİŞİK.
Sorun: genel kural `table{width:100%}` tabloyu sayfa boyu yayıyor; 4 sütunlu
eBOS düzeninde Ders sütunu uzuyor, A ve B sağ kenara kaçıyordu — kullanıcı
ne yazdığını göremiyordu. Ayrıca `td{font-size:var(--yazi-normal)}` bu
tabloda gereğinden büyük. Yalnız bu tabloyu kapsar, genel tablolar etkilenmez. */
/* 📐 SORUDAG-26EYL — SORU DAĞILIMI SÜTUNLARI SABİT GENİŞLİKTE.
ÖLÇÜLDÜ (1366×768, önceki sürüm): ALAN 308px · DERS 389px · A 113px ·
Ders KUTUSU bitişi → A KUTUSU başlangıcı **209px**. Göz, "Türkçe" satırından
A'daki 40 değerine kadar ekranın yarısını kat ediyordu.
KÖK NEDEN: `table-layout:auto`. Bu modda `th`'ye yazılan `width` değerleri
ASGARİ sayılır; tarayıcı tablonun doğal genişliğini sütunlara ORANTILI dağıtır.
Girdi kutularını daraltmak hücreleri daraltmıyordu — üç turdur yanlış kaldıraç
çevriliyordu ("ekranı küçült" sanılmıştı, oysa sorun sütun genişliği).
ÇÖZÜM: `table-layout:fixed` +
. Bu modda yazılan genişlikler KESİNDİR,
dağıtım olmaz. Artan yer sütunlara paylaştırılmaz, SAĞDA kalır.
Yalnız MASAÜSTÜ (≥1024px); mobilde eski akışkan düzen aynen sürer. */
.tw table.sdDgT{width:auto;min-width:0}
.sdDgT th,.sdDgT td{padding:var(--bosluk-xs) var(--bosluk-s);font-size:var(--yazi-kucuk)}
.sdDgT input{font-size:var(--yazi-kucuk);padding:var(--bosluk-xs) var(--bosluk-s)}
.sdDg .tw{overflow-x:auto}
@media (min-width:1024px){
/* TARAYICIDA ÖLÇÜLEREK BULUNDU — iki ayrı engel vardı:
1) `table-layout:fixed` tek başına yetmedi: tablo genişliği kaptan
devralınıp 1045px oluyor,
ölçüleri ×1.358 ORANTILI büyüyordu
(200→272 · 320→435 · 80→109). `width:max-content` ile tablo sütun
toplamına (801px) oturur, artan yer SAĞDA kalır.
2) Girdi kutularının SATIR İÇİ `width:NNNpx` stili CSS'i eziyordu; kutu
180px, hücre 320px kalınca aradaki ölü alan 140px'ti. `!important`
yalnız bu yüzden — üretilen satır içi stili yenmek için. */
.tw table.sdDgT{table-layout:fixed;width:max-content}
.sdDgT td input{width:100% !important;box-sizing:border-box;text-overflow:ellipsis}
.sdDgT th,.sdDgT td{overflow:hidden}
}
/* 📐 YENISIHIRBAZ-01EKI/5 — SİHİRBAZIN 4. ADIMINDA SIKIŞIK DAĞILIM TABLOSU.
Ölçüldü (1366×768): satır 48px · ekran 853px → 10 dersin tamamı görünmüyordu.
Yalnız bu kapta (.sdyDg4) geçerlidir; düzenleyicinin kendi sayfadaki görünümü değişmez. */
.sdyDg4 .form-bolum-bas{display:none !important} /* !important: 21094 satır içi `display:flex` yazıyor — onsuz gizlenmiyordu */
.sdyDg4 .form-bolum-govde > .txs:first-child{display:none} /* uzun açıklama paragrafı */
.sdyDg4 .form-bolum-govde > .txs:last-child{font-size:11px;line-height:1.2;margin:0} /* "🔒 yalnız yönetici" notu — gizlenmez, küçülür */
/* Üstteki durum şeridi (seviye şablonu önerisi · "N şablon kâğıda bağlı değil") — GİZLENMEZ,
tek satıra sıkışır: iki satır ~76px yer kaplıyor, o yer ders satırlarına lazım. */
.sdyDg4 .form-bolum-govde > .txs{font-size:11px;line-height:1.25;margin:0 0 4px}
.sdyDg4 .form-bolum-govde > .txs .btn{min-height:22px !important;height:22px;padding:0 var(--bosluk-s) !important;font-size:11px}
.sdyDg4 .sdDg{padding:0;border:none}
.sdyDg4 .form-bolum,.sdyDg4 .form-bolum-govde{margin:0}
.sdyDg4 .rt{margin-bottom:4px}
.sdyDg4 .sdDgT th,.sdyDg4 .sdDgT td{padding:0 var(--bosluk-s);line-height:1.05}
.sdyDg4 .sdDgT input,.sdyDg4 .sdDgT select{min-height:22px !important;height:22px;padding:0 var(--bosluk-s);font-size:var(--yazi-kucuk)} /* !important: inp() satır içi min-height yazıyor */
.sdyDg4 .sdDgBos td{font-size:11px;line-height:1}
.sdyDg4 .sdDgBos input{min-height:18px !important;height:18px}
.sdyDg4 .sdDgT .btn{min-height:22px !important;height:22px;padding:0 var(--bosluk-s) !important;font-size:var(--yazi-kucuk)} /* satır yüksekliğini butonlar belirliyordu */
.sdyDg4 .sdDgPrev{display:none} /* konum önizleme şeridi — yer kaplıyor */
/* 📐 SDYDG4TAM-03EKI — Volkan 03.10: "soru dağılımı aşağı yukarı kaydırmadan tam gözüksün, sayfayı da kaydırmayalım".
ÖLÇÜM (1366×768, YKS 19 satır): tablo 467px ama genel liste kısıcıları (.tw 62vh + _listeKaydirUygula) 248px'e
kesiyordu; yukarıdaki gizleme kuralları da EZİLİYORDU (başlık 34px duruyordu: .form-bolum-bas başka yerde !important).
Çözüm: bu adımda kısıcı yok (kap .kl-yok), başlık/bilgi satırı/açıklama gizli ya da tek satır, satırlar 21px. */
.sdyDg4 .form-bolum-bas{display:none !important}
.sdyDg4 .form-bolum.form-katli .form-bolum-govde,.sdyDg4 .form-bolum .form-bolum-govde{display:block !important} /* başlık gizli → bölüm dar ekranda katlı başlarsa açılamazdı: hep açık */
.sdyDg4 .tw{max-height:none !important;overflow-y:visible !important}
.sdyDg4 .form-bolum{margin:0 !important;padding:0 !important;border:0 !important;box-shadow:none !important;background:transparent !important}
.sdyDg4 .form-bolum-govde{padding:0 !important;gap:2px !important}
.sdyDg4 .rt{margin:0 0 2px !important;padding:2px !important;min-height:0 !important}
.sdyDg4 .rt .rtb{min-height:26px !important;height:26px;padding:0 10px !important;font-size:12.5px !important}
.sdyDg4 .form-bolum-govde > .rt + .txs{font-size:11.5px !important;margin:0 !important;line-height:1.25}
.sdyDg4 .sdDgSar{gap:2px !important}
.sdyDg4 .sdDgSar > *{margin-top:0 !important;margin-bottom:2px !important}
/* 📏 ABESIT-03EKI — Volkan 03.10: "dersler, branşlar ve soru sayısı üst üste binmiş görünüyor;
sayfada boşluk var, tam ekranı aşmayacak şekilde yeniden düzenle."
ÖLÇÜLDÜ: kutular 20px ve aralarında YALNIZ 1px vardı (SDYDG4TAM-03EKI fazla sıkmıştı) —
çerçeveler birleşip tek blok gibi görünüyordu; "BOŞ SORU SAYISI" satırı 15px/11px ile
üstündeki kutuya yapışıyordu. Tablo ise 374px, ekranda ~160px boş yer vardı.
YENİ ÖLÇÜ: kutu 24px, satır 28px → kutular arası 4px; boş satırı 24px.
1366×768'de de tamamı tek ekranda (ölçüm: yerlesim.test.js §4). */
.sdyDg4 .sdDgT tr{height:auto !important}
.sdyDg4 .sdDgT th{font-size:11.5px !important;line-height:1.2;height:20px}
.sdyDg4 .sdDgT td{height:28px;line-height:1.2;padding-top:0 !important;padding-bottom:0 !important;vertical-align:middle}
.sdyDg4 .sdDgT input,.sdyDg4 .sdDgT select{height:24px !important;min-height:24px !important;font-size:13px !important;color:var(--text) !important;line-height:1.3 !important}
.sdyDg4 .sdDgT .btn{min-height:24px !important;height:24px;font-size:12px !important}
.sdyDg4 .sdDgBos td{height:24px;font-size:11.5px !important;line-height:1.2}
.sdyDg4 .sdDgBos input{min-height:20px !important;height:20px !important;font-size:12px !important}
/* === KART İÇİ LİSTE AYRIMI — ardışık item kartları gri zemin ile ayrılır === */
/* Her kart-içi item'a uygulanır: .card içindeki ardışık
'ler */
.card > div + div[style*="background:var(--bg2)"],
.card > div[style*="background:var(--bg2)"]{
border:1px solid var(--border);
}
/* Kart-içi item kartların hover'ı */
.card > div[style*="background:var(--bg2)"]:hover,
.card > div[style*="background:var(--card2)"]:hover{
background:#dde5f0 !important;
transition:background .15s;
}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--card2)}
.bg{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:13px;font-weight:700}
.bg-s{background:rgba(0,212,170,.15);color:var(--success)}
.bg-d{background:rgba(255,107,107,.15);color:var(--danger)}
.bg-w{background:rgba(255,169,77,.15);color:var(--warning)}
.bg-i{background:rgba(79,142,247,.15);color:var(--info)}
.bg-pu{background:rgba(124,92,252,.15);color:var(--accent2)}
.pb{height:7px;background:var(--bg2);border-radius:4px;overflow:hidden}
.pf{height:100%;border-radius:4px;transition:width .6s}
.pf-b{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.pf-g{background:var(--success)}.pf-o{background:var(--warning)}.pf-r{background:var(--danger)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tabs{display:flex;gap:4px;background:var(--bg2);border-radius:var(--r2);padding:4px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tb{flex:1 1 auto;min-width:max-content;white-space:nowrap;padding:9px 14px;border-radius:6px;border:none;background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;font-size:15px;font-weight:500;line-height:1.25}
.tb.active{background:var(--card);color:var(--text)}
/* Koyu kokpit (rehber/öğretmen) içinde koçluk sekmeleri okunaklı kalsın */
#rkRoot .tb,#okRoot .tb{color:#94a3b8}
#rkRoot .tb.active,#okRoot .tb.active{background:#e2e8f0;color:#0f172a;font-weight:800}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.2s;padding:16px}
.mo.open{opacity:1;pointer-events:all}
/* 🪟 MODALCERCEVE-07EYL — ÜÇ BÖLÜM: başlık SABİT · içerik TEK kaydırma alanı · alt çubuk SABİT.
Eskiden kutunun KENDİSİ kayıyordu (overflow-y:auto): başlık yukarı kaçıyor, sticky alt
çubuk dayanağını kaybediyor ve butonlar ekran dışında kalıyordu. Artık kutu kaymaz. */
.md{background:var(--card);border:1px solid var(--border2);border-radius:18px;padding:26px;width:720px;max-width:100%;
max-height:min(90dvh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.55)}
.md > .mh{flex:none}
.md > #modAlt{flex:none}
/* İÇERİK: tek kaydırma alanı. Çubuk HER ZAMAN görünür (ince/gizli değil) ki
devamı olduğu anlaşılsın; alt kenardaki gölge sona gelince kendiliğinden kaybolur. */
.md > #modb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:auto;scrollbar-gutter:stable;
background:
linear-gradient(var(--card) 30%, rgba(0,0,0,0)) top/100% 22px no-repeat local,
linear-gradient(rgba(0,0,0,0), var(--card) 72%) bottom/100% 22px no-repeat local,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.20), rgba(0,0,0,0)) top/100% 11px no-repeat scroll,
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.20), rgba(0,0,0,0)) bottom/100% 11px no-repeat scroll}
.md > #modb::-webkit-scrollbar{width:10px}
.md > #modb::-webkit-scrollbar-track{background:var(--bg2);border-radius:6px}
.md > #modb::-webkit-scrollbar-thumb{background:var(--text3);border-radius:6px;border:2px solid var(--card)}
.md > #modb::-webkit-scrollbar-thumb:hover{background:var(--text2)}
/* Grup başlıkları uzun listelerde yapışkan kalsın (Öğretmene Aktar vb.) */
.md > #modb .mod-grup{position:sticky;top:0;z-index:3;background:var(--card);padding:6px 0 4px;box-shadow:0 1px 0 var(--border)}
/* 🆕 Optik şablon sihirbazı içeren modal — geniş görünüm */
.mo .md:has(#oxOnizleme){width:1240px;max-width:97vw;padding:18px 22px}
.md > #modb{padding-top:6px}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.mt{font-size:20px;font-weight:800;letter-spacing:.2px}
.mc{background:var(--bg2);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-size:20px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mc:hover{background:var(--danger);color:#fff;border-color:var(--danger);transform:rotate(90deg)}
/* 🔔 Bildirim — KAPALIYKEN GÖRÜNMEZ VE TIKLAMA GEÇİRMEZ.
Eskiden yalnız transform ile kaydırılıyordu; fixed + z-index:9999 kutu
ekranda kalıp alt navigasyon şeridinin dokunuşlarını yutuyordu. */
/* 🔔 BALON-02EYL — z-index düzeni: modal(1000+) > balon(500) > alt nav(200) > içerik.
Kapsayıcı dokunuş YUTMAZ (pointer-events:none); yalnız balonun kendisi ve × alır. */
.nt{position:fixed;top:50px;right:16px;z-index:500;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r);padding:13px 17px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh);min-width:260px;max-width:90vw;transform:translateX(400px);visibility:hidden;pointer-events:none;transition:transform .3s ease,visibility 0s linear .3s}
.nt.show{transform:translateX(0);visibility:visible;pointer-events:auto;cursor:pointer;transition:transform .3s ease,visibility 0s}
.nt-kapat{margin-left:auto;flex:none;width:34px;height:34px;min-width:34px;border:none;background:transparent;color:var(--text2);
font-size:19px;line-height:1;cursor:pointer;border-radius:9px;pointer-events:auto}
.nt-kapat:hover{background:var(--bg2);color:var(--text)}
.nt.s{border-left:4px solid var(--success)}.nt.e{border-left:4px solid var(--danger)}.nt.i{border-left:4px solid var(--accent)}
.scg-grid{display:grid;gap:3px;min-width:760px}
.sch{background:var(--accent);color:#fff;padding:9px 4px;text-align:center;font-size:13px;font-weight:700;border-radius:6px}
.sct{background:var(--bg2);padding:7px 4px;text-align:center;font-size:12px;color:var(--text2);border-radius:6px;font-family:'JetBrains Mono',monospace}
.scc{background:var(--bg2);border-radius:6px;padding:5px;min-height:56px;cursor:pointer;border:1px solid transparent}
.scc:hover{border-color:var(--accent)}
.sl-i{border-radius:5px;padding:5px 7px;font-size:12px;font-weight:600;height:100%;display:flex;flex-direction:column;justify-content:center}
.slm{background:rgba(79,142,247,.2);color:var(--accent)}
.slt{background:rgba(255,169,77,.2);color:var(--warning)}
.sle{background:rgba(255,107,107,.2);color:var(--danger)}
.attg{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:12px}
.atts{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.atta{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;border:2px solid transparent;transition:.2s}
.att-u{background:var(--bg2);border-color:var(--border);color:var(--text3)}
.att-p{background:rgba(0,212,170,.15);border-color:var(--success);color:var(--success)}
.att-ab{background:rgba(255,107,107,.15);border-color:var(--danger);color:var(--danger)}
.att-l{background:rgba(255,169,77,.15);border-color:var(--warning);color:var(--warning)}
/* YOKSAYAC-04EYL — isaretlenmemis: ne var ne yok. Otomatik atama YASAK. */
.att-x{background:rgba(148,163,184,.18);border-color:#94a3b8;color:#64748b;border-style:dashed}
/* 📋 YOK4DURUM-07EYL — İzinli: gri, düz çerçeve (İşaretlenmemiş kesikli çerçeveden ayrılır) */
.att-iz{background:rgba(100,116,139,.16);border-color:#64748b;color:#475569}
.attn{font-size:12px;color:var(--text2);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:18px;align-items:end}
/* 📱 MOBKAYMA-26AGU — GRID BLOWOUT KOKU: hucre min-width:auto yuzunden
icerigin (110px sabit ad) altina KUCULEMIYOR, 360px'te 3x110+boşluk
siğmayip podyum sağa taşıyor, hizalar "kaymış" görünüyordu. min-width:0
hucrenin kuculmesine izin verir; .pod-ad tek ortak ad stili (masaüstü
110px, dar ekranda hucre genisligi kadar) — iki podyum da bunu kullanır. */
.pod>*{min-width:0}
.podc{display:flex;flex-direction:column;align-items:center;min-width:0}
.pod-ad{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){.pod{gap:6px}.pod-ad{max-width:100%}}
.podbar{width:100%;border-radius:8px 8px 0 0;margin-top:8px;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;font-size:24px}
.fx{display:flex}.fxc{display:flex;align-items:center}
/* 📏 YOGUNLUK-21EYL — BAŞLIK + AKSIYON deseni: butonlar küçülünce başlık
blokları 180px'e sıkışıp metin sarıyordu (sınıflar ekranında 126 → 327px).
Başlık 300px'in altına düşmez; sığmazsa butonlar alt satıra sarar. */
.fxc > .f1{ flex:1 1 min(300px,100%); min-width:0; }
/* 📱 LIDERMOBIL-23EYL — 300px TABAN TELEFONDA SATIRI KIRIYORDU.
Belirti: mobil girişte Liderlik Tablosu satırlarında isim, lig ve puan alt alta
düşüyor, metinler dikey dizilmiş/bozuk gibi görünüyordu.
Kök neden: @media(max-width:860px) .fxc'ye flex-wrap:wrap veriyor (satır 871).
390px telefonda satırın sabit kısmı (34px sıra + 32px avatar + 3×10px gap + 24px
dolgu + ~70px puan bloğu) ≈ 190px; .f1'e ~170px kalıyor ama taban 300px isteniyor
→ .f1 alt satıra sarıyor, arkasından puan bloğu da kayıyor.
Düzeltme TELEFONA özel: taban 0 → .f1 kalan alana sığar (min-width:0 + ellipsis
zaten var). Butonlar .f1 DEĞİL, onlar hâlâ gerekirse alt satıra sarar; YOGUNLUK-21EYL'in
"başlık 300px altına düşmesin" amacı tablet/masaüstünde aynen korunur.
.fxc kullanan TÜM satırlar için geçerlidir (liderlik yalnız fark edilen örnekti). */
/* ⚠️ EKRANKUCULT-22EYL/5 — DAR EKRANDA BAŞLIK EZİLİYORDU (kullanıcı bildirdi).
ÖNCEKİ HÂLİ: @media(max-width:520px){ .fxc > .f1{ flex-basis:0 } }
Başlık bloğunun temel genişliği 0 + min-width:0 + .fxc'nin SARMAMASI =
kardeş butonlar tüm satırı alınca başlık 66px'e düşüyordu. .card'daki
overflow-wrap:anywhere ile birleşince metin HARF HARF alt alta diziliyordu
("Ö ğre ncile r"). Ölçüldü: DIV.fw8 "👨🎓 Öğrenciler" = 66x132px.
ÇÖZÜM: satır SARSIN, başlık kendi satırını alsın (projenin kendi mobil
deyimi — bkz. .mob-alt .fx > .f1{flex:1 0 100%}). Butonlar alta iner.
NOT: ölçek değişkenlerini eski değerlere çekmek bunu DÜZELTMİYOR (A/B ile
ölçüldü) — sebep boşluk değil flex düzeniydi. */
@media(max-width:520px){
.fxc{ flex-wrap:wrap }
.fxc > .f1{ flex:1 1 100%; min-width:0 }
}
/* 🔢 EKRANKUCULT-22EYL/5 — SATIR İÇİ SABİT ÇOK SÜTUNLU IZGARALAR TELEFONDA DARALIR.
Ölçüldü: yaziciLog'daki sayaç şeridi satır içi `repeat(5,1fr)` ile yazılmış;
satır içi stil, .sg'nin mobil kırılma noktalarını EZDİĞİ için 390px'te sütun
66px'e düşüp etiketler harf harf alt alta diziliyordu (DIV 43x59px
"📋 Toplam Kopya"). Dosyada bu biçimde 28 ızgara var.
Sütun başına en az 96px garanti edilir; masaüstü etkilenmez.
!important ŞART: satır içi stili başka türlü ezemez. */
@media(max-width:520px){
.pc [style*="grid-template-columns:repeat(4"],
.pc [style*="grid-template-columns:repeat(5"],
.pc [style*="grid-template-columns:repeat(6"],
.pc [style*="grid-template-columns:repeat(7"],
.pc [style*="grid-template-columns:repeat(8"]{
grid-template-columns:repeat(auto-fit,minmax(96px,1fr)) !important;
}
}
.g6{gap:6px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.ma{margin-left:auto}.f1{flex:1}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.tc{color:var(--text2)}.ta{color:var(--accent)}.ts{color:var(--success)}.tw2{color:var(--warning)}.td{color:var(--danger)}
.txs{font-size:13px}.tsm{font-size:15px}
.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.mono{font-family:'JetBrains Mono',monospace}
.dv{border:none;border-top:1px solid var(--border);margin:12px 0}
.fs{background:var(--bg2);border-radius:10px;padding:14px;margin-bottom:14px}
/* OKULKOD-04EYL — onay listesi kendi icinde kayar. Satir ici stil YERINE sinif:
kabuk lint bilezigi satir ici overflow-y sayisinin ARTMASINI engelliyor. */
.okOneriListe{max-block-size:52vh;overflow-y:auto}
.fst{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.ir{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:15px}
.ir span:first-child{color:var(--text2);width:130px;flex-shrink:0}
.list-panel{width:230px;flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.li-item{padding:10px 13px;cursor:pointer;border-bottom:1px solid var(--border);font-size:15px}
.li-item:hover{background:var(--card2)}
.li-item.active{background:rgba(79,142,247,.15);color:var(--accent);border-left:2px solid var(--accent)}
.photo{width:78px;height:88px;border-radius:8px;background:var(--bg2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:34px;flex-shrink:0}
.rt{display:flex;gap:3px;flex-wrap:wrap;background:var(--bg2);padding:6px 6px 0;border-radius:var(--r2) var(--r2) 0 0}
.rtb{padding:8px 13px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;border-bottom:2px solid transparent}
.rtb.active{background:var(--card);color:var(--accent);border-bottom-color:var(--accent)}
.rb{background:var(--card);border:1px solid var(--border);border-radius:0 var(--r) var(--r) var(--r);padding:var(--bosluk-l)}
.offbar{background:var(--danger);color:#fff;text-align:center;font-size:14px;font-weight:600;padding:7px;display:none}
.offbar.show{display:block}
.toggle{position:relative;width:46px;height:24px;border-radius:20px;border:none;cursor:pointer}
.toggle.on{background:var(--success)}.toggle.off{background:var(--border2)}
.toggle .knob{position:absolute;top:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s}
.toggle.on .knob{transform:translateX(24px)}.toggle.off .knob{transform:translateX(2px)}
/* ═══ 📱 KADEMELI-26AGU — KADEMELI YUKLEME ISKELETI (skeleton) ═══
Yavas baglantida/ilk cizimde ekran bos kalmasin, liste zipla-masin. */
.kad-parla{background:linear-gradient(90deg,var(--bg2) 25%,var(--border) 37%,var(--bg2) 63%);
background-size:400% 100%;animation:kadParla 1.3s ease-in-out infinite}
@keyframes kadParla{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.kad-parla{animation:none;opacity:.55}}
.kad-son{text-align:center;padding:14px 10px;color:var(--text3);font-size:12.5px;
background:var(--bg2);border-top:1px solid var(--border)}
/* Kademeli "daha fazla" dugmesi — dokunma hedefi 44px+ (mobil kontrol listesi md.2) */
.kad-daha{width:100%;min-height:46px;padding:13px;border:none;border-top:1px solid var(--border);
background:linear-gradient(135deg,rgba(79,142,247,.08),rgba(124,92,252,.04));
color:var(--accent);font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;
transition:background .15s}
.kad-daha:hover{background:rgba(79,142,247,.15)}
/* ===== MOBİL OPTİMİZASYON ===== */
/* ═══ 📱 TAM MOBİL KABUK — ekran ne kadar geniş olursa olsun telefon düzeni ═══
Öğretmen/öğrenci/veli için sistem yalnızca mobilde varmış gibi görünür. */
body.mobil-gorunum .sb{display:none !important}
/* MOBSABLON-02EYL — ortak mobil modul sablonu */
.mob-satir{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;background:var(--card);border:1px solid var(--border);margin-bottom:6px;min-height:56px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-satir.pasif{cursor:default}
.mob-satir .ik{font-size:20px;width:28px;text-align:center;flex-shrink:0;white-space:nowrap;overflow:hidden} /* MOBIKON-23EYL — 28px sütuna sığmayan metin harf harf DİKEY kırılıyordu */
.mob-satir .ik:has(.kf){width:auto;display:flex;align-items:center} /* KISIFOTO-08EYL — fotoğraflı satır: 44px yuvarlak, satır 56px korunur */
.kf img{color:transparent}
.mob-satir .gov{flex:1;min-width:0}
.mob-satir .a1{font-weight:700;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-satir .a2{font-size:12px;color:var(--text3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-satir .sag{flex-shrink:0;display:flex;align-items:center;gap:6px}
.mob-satir .sag .btn{min-height:var(--buton-yukseklik);min-width:44px}
.mob-rozet{font-size:var(--yazi-kucuk);font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.mob-ara{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);font-size:16px;min-height:var(--form-yukseklik);margin-bottom:8px}
.mob-cipler{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mob-cipler::-webkit-scrollbar{display:none}
.mob-cip{flex:none;font-size:13px;font-weight:700;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text2);min-height:var(--buton-yukseklik);cursor:pointer;font-family:inherit}
.mob-cip.aktif{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.mob-bos{text-align:center;padding:26px 16px;color:var(--text2);font-size:14px;line-height:1.6}
.mob-bos .bik{font-size:34px;margin-bottom:6px}
/* 📱 MOBALT-07EYL — SABİT ALT ÇUBUK ARTIK İÇERİĞİ ÖRTMÜYOR.
KÖK NEDEN: yapışkan alt çubuk ile ekranın altındaki sabit sekme çubuğu
liste akışının üzerine biniyordu ve sayfanın alt dolgusu yalnız 20px'ti;
son öğrenci satırı ikisinin altında kalıyor, dokunuş öğrenciye değil
butona gidiyordu. Çubuk artık kendi zeminine oturur (altında içerik
olduğu anlaşılsın) ve sayfa altına çubuk kadar boşluk bırakılır. */
.mob-alt{
position:sticky; bottom:calc(8px + var(--mob-nav-h,58px) + var(--ob-serit-h,0px)); z-index:5; margin-top:10px; /* ODEVBILDIRIM-08EYL */
background:var(--card); border-top:1px solid var(--border); border-radius:12px;
padding:9px 9px calc(9px + env(safe-area-inset-bottom,0px));
box-shadow:0 -6px 18px -10px rgba(0,0,0,.35);
/* 📱 MOBDIP-09EYL — SON KART ALT CUBUGUN ALTINDA KALMASIN.
Olculdu (demo, 375x812, 11 ogrenci): cubuk son kartin tamamini ortuyordu (bosluk -55px).
Cubuk `.pc` icinde akistaki SON ogedir; `.pc` dip payi cubugun ALTINA yazildigi icin
liste ile cubuk arasinda hic pay kalmiyordu. Bu tek kural, `.mob-alt` tasiyan
TUM mobil ekranlar icin gecerlidir (ekran basina ayri kod yok). */
margin-top:calc(112px + env(safe-area-inset-bottom,0px));
}
.mob-alt .btn{width:100%;justify-content:center;min-height:48px;font-size:15px;font-weight:800}
/* Alt çubuk BULUNAN sayfada listenin altına çubuk + sekme kadar boşluk */
body.mobil-gorunum .pc:has(.mob-alt){padding-bottom:calc(var(--mob-nav-h,58px) + var(--ob-serit-h,0px) + 96px + env(safe-area-inset-bottom,0px))}
/* :has desteklemeyen tarayıcı için taban: sekme çubuğu kadar boşluk her zaman var */
body.mobil-gorunum .pc{padding-bottom:calc(var(--mob-nav-h,58px) + var(--ob-serit-h,0px) + 28px + env(safe-area-inset-bottom,0px))}
/* İşaretleme ekranında yüzen kısayollar gizlenir — ekran tek işe odaklanır.
`show` sarmalanmaz (o tuzak daha önce yaşandı): işaretleme çubuğunun
VARLIĞI ölçüt, sayfa değişince kural kendiliğinden kalkar. */
body:has(.mt-yok-alt) #yukariCikBtn,
body:has(.mt-yok-alt) #kaydetFloat{display:none !important}
/* GIRISDAYANIK-08EYL — oturum acilmamis sayfada uygulama ici bilesen YOK (giris, sifremi unuttum, kayit) */
body:has(#login:not([style*="display: none"]):not([style*="display:none"])) #kaydetFloat,
body:has(#login:not([style*="display: none"]):not([style*="display:none"])) #anaSayfaBtn,
body:has(#login:not([style*="display: none"]):not([style*="display:none"])) #yukariCikBtn,
body:has(#login:not([style*="display: none"]):not([style*="display:none"])) #isaretRehberiBtn{display:none !important}
/* Durum butonları dokunma ölçüsünde ve aralıklı */
.mob-isaret-btn{min-width:44px;min-height:var(--buton-yukseklik)}
.mob-isaret-grup{display:flex;gap:8px;flex:none}
.mob-bilgi{background:var(--bg2);border-radius:10px;padding:9px 11px;font-size:13px;line-height:1.5;margin-bottom:8px}
/* SONUCKART-06EYL — ORTAK VERİ KARTI: rakam üstte, etiket altta, yan yana (3–4 sütun). .mob-ozet eski ad. */
.veri-kart,.mob-ozet{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kart-ic-gap);margin-bottom:var(--kart-gap)}
.veri-kart.k4{grid-template-columns:repeat(4,1fr)}
.veri-kart.k5{grid-template-columns:repeat(5,1fr)}
.veri-kart .k-uyari b{color:#b45309}
.mob-satir .a2 .veri-kart{white-space:normal;margin:4px 0 0}
.veri-kart div,.mob-ozet div{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:var(--kart-ic-pad);text-align:center;min-width:0}
.veri-kart b,.mob-ozet b{display:block;font-size:var(--rakam-boyut);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.veri-kart span,.mob-ozet span{display:block;font-size:var(--etiket-boyut);color:var(--text2);line-height:1;margin-top:1px}
.veri-kart .k-dogru b{color:#15803d}.veri-kart .k-yanlis b{color:#b91c1c}.veri-kart .k-net{background:rgba(59,111,209,.10)}.veri-kart .k-net b{color:var(--accent)}
.veri-kart.ic{margin:4px 0 0}.veri-kart.ic div{background:var(--bg2);border:0;border-radius:8px;padding:var(--kart-ic-pad-sik)}
/* kompakt sonuç kartı ≤88px: ad tek satır (…), alt satır küçük gri, 3 sütun veri */
.sonuc-kart{background:var(--card);border:1px solid var(--border);border-left-width:4px;border-radius:12px;padding:var(--kart-padding);margin-bottom:var(--kart-gap);cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0;overflow:hidden}
.sonuc-kart .ad{font-weight:800;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sonuc-kart .alt{font-size:12px;color:var(--text3);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sonuc-kart .alt span{font-size:inherit} /* fark rozeti satırı büyütmesin (≤88px) */
.sonuc-ay{font-size:12px;font-weight:800;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin:4px 2px 6px}
.sonuc-serit{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:var(--kart-gap);font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-height:var(--buton-yukseklik)}
.sonuc-serit b{color:var(--text);font-size:14px}
.sonuc-cip-ayrac{flex:none;width:1px;background:var(--border);margin:6px 2px}
.sonuc-tablo td,.sonuc-tablo th{padding:5px 9px;line-height:1.3;white-space:nowrap}
.sonuc-tablo td.s,.sonuc-tablo th.s{text-align:center;font-variant-numeric:tabular-nums}
.mob-sayfa-bas{font-weight:800;font-size:15px;margin:4px 2px 8px}
/* KENDICALISMA-21EYL — telefonda program satırının "kaç soru çözdün" kutusu + günün altındaki kendi çalışma düğmesi */
.mmkc-soru{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.mmkc-soru label{font-size:13px;font-weight:700;color:var(--text2)}
.mmkc-soru input{width:92px;min-height:var(--form-yukseklik);font-size:16px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);box-sizing:border-box}
.mmkc-soru .btn{min-height:var(--buton-yukseklik)}
.mmkc-hedef{font-size:13px;color:var(--text3);white-space:nowrap}
.mmkc-ekle{width:100%;justify-content:center;min-height:46px;font-weight:700;margin:6px 0 2px;border-style:dashed}
/* MODM-YKULLANICI-02EYL — kullanıcı yönetimi mobil varyantı.
Kural: mevcut liste HTML'i (_backendKullaniciRender) DEĞİŞMEZ; burada yalnız mobil
kabukta (.myku sarmalayıcısı) görünüm ölçüleri verilir → rol çipleri yatay şerit,
satır 52px, satırın tamamı dokunulabilir (tek eylem). */
body.mobil-gorunum .myku .ku-tabsatir{flex-wrap:nowrap !important;overflow-x:auto;gap:6px !important;margin-bottom:8px !important;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.mobil-gorunum .myku .ku-tabsatir::-webkit-scrollbar{display:none}
body.mobil-gorunum .myku .ku-tabsatir > button{flex:none !important;min-height:var(--buton-yukseklik);padding:8px 13px !important;border-radius:999px !important;border-width:1px !important;font-size:13px !important;box-shadow:none !important}
body.mobil-gorunum .myku .ku-tabsatir > button > div{display:none !important}
body.mobil-gorunum .myku #backendKullaniciListe > .fxc{gap:6px !important;margin-bottom:6px !important}
body.mobil-gorunum .myku #backendKullaniciListe > .fxc > input{flex:1 1 100% !important;min-height:var(--form-yukseklik) !important;font-size:16px !important}
body.mobil-gorunum .myku .ku-satir{flex-wrap:nowrap !important;min-height:52px !important;padding:0 9px !important;margin-bottom:5px !important;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobil-gorunum .myku .ku-satir > div:nth-of-type(2){font-size:14px !important}
body.mobil-gorunum .myku .ku-satir > button:first-of-type{display:none !important} /* ✏️ — satıra dokununca tam ekran kişi ekranı açılır */
body.mobil-gorunum .myku .ku-satir > button:last-of-type{min-height:var(--buton-yukseklik) !important;min-width:44px;padding:4px 10px !important;font-size:15px}
.myku-geri{margin:0 0 8px}
.myku-geri .btn{min-height:var(--buton-yukseklik);font-weight:700}
.myku-bas{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 12px;margin-bottom:8px}
.myku-bas b{font-size:16px;line-height:1.3;display:block}
.myku-bas .alt{font-size:12.5px;color:var(--text3);margin-top:3px}
.myku-eyl{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.myku-eyl .btn{width:100%;justify-content:center;min-height:48px;font-size:15px;font-weight:800}
.myku-bv{margin-bottom:11px}
.myku-bvt{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.myku-bvt .btn{width:100%;justify-content:center;min-height:var(--buton-yukseklik);font-size:13px;font-weight:800}
/* MODM-YDENEME-02EYL — deneme takvimi (satir alt bilgisi 2 satir, siradaki blogu, sayi alani) */
.mob-satir.myd-sat{align-items:flex-start;padding-top:10px}
.mob-satir.myd-sat .a2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.myd-sira{background:linear-gradient(135deg,#4c1d95,#7c3aed);color:#fff;border-radius:12px;padding:11px 13px;margin-bottom:9px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.myd-sira b{display:block;font-size:15px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.myd-sira .alt{font-size:12.5px;opacity:.92;margin-top:4px}
.myd-sira .ger{font-size:13.5px;font-weight:800;margin-top:5px}
.myd-alan{width:100%;box-sizing:border-box;font-size:16px;min-height:var(--form-yukseklik);padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);font-family:inherit}
.myd-etiket{display:block;font-size:14px;font-weight:700;margin:9px 2px 4px}
/* MODM-YOZET-02EYL — yonetici gunluk ozet (sayac seridi + acil satir) */
.myz-sar .mob-ozet b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myz-tarih{font-weight:700;font-size:14px}
/* acil satirda alt bilgi (sinif/ogrenci adlari) kesilmesin: en fazla 2 satir, toplam <=96px */
.mob-satir.myz-acil{align-items:flex-start;padding-top:10px}
.mob-satir.myz-acil .a2{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* MODM-YRAPOR-02EYL — mobil Rapor Merkezi (rapor satiri + tam ekran cikti) */
.myr-ust{margin:2px 0 8px}
.myr-geri{min-height:var(--buton-yukseklik);padding:0 14px;border-radius:11px;border:1px solid var(--border);background:var(--card);color:var(--text2);font-size:14px;font-weight:800;font-family:inherit;cursor:pointer}
.myr-eylem{display:flex;gap:8px;margin:0 0 10px}
.myr-eylem button{flex:1;min-height:var(--buton-yukseklik);font-size:14px;font-weight:800;font-family:inherit;border:1px solid var(--border);background:var(--card);color:var(--text2);border-radius:11px;cursor:pointer;padding:0 8px}
/* cikti EKRAN temasinda cizilir; kagit duzeni yazdirma penceresinde uretilir (raporYazdir) */
/* Rapor tablolari 7-11 sutunlu (or. Ogrenci Listesi 11 sutun): 360px telefonda sayfanin
TAMAMI yana kayardi (tek dikey kaydirma kabugu bozulur). Cozum: YALNIZ bu kutu yatay
kayar; yukseklik SINIRLANMAZ (max-height yok) — yarim pencere olusmaz. */
.myr-cikti{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;font-size:14px;line-height:1.5;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* rapor ureticisi (_rTablo/_rOzet) tabloya 13px'lik SATIR ICI (inline) yazi boyutu basar;
inline stil secicileri yener, mobil >=14px kurali ancak !important ile gecerli olur. */
.myr-cikti table{width:100%;border-collapse:collapse;font-size:14px !important}
.myr-cikti th,.myr-cikti td,.myr-cikti > div{font-size:14px !important}
/* rapor adi uzun: satirda 2 satira kadar sarsin, satir yine <=96px */
.mob-satir.myr-s{align-items:flex-start;padding-top:10px}
.mob-satir.myr-s .a1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* MODM-VBUGUN-02EYL — veli gun oku (‹ Dün · BUGÜN · Yarın ›) */
.mv-gun{display:flex;gap:6px;margin:2px 0 9px}
.mv-gun button{flex:1;min-height:var(--buton-yukseklik);font-size:13px;font-weight:800;font-family:inherit;border:1px solid var(--border);background:var(--card);color:var(--text2);border-radius:11px;cursor:pointer;padding:0 6px}
.mv-gun button.ort{flex:2.2;color:var(--text)}
.mv-gun button.ort.bugun{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.mv-gun button.ort.tatil{opacity:.62}
/* MODM-TDERSLER-02EYL — aktif ders satırı */
.mob-satir.mt-aktif{background:rgba(22,163,74,.08)}
/* MODM-ODEVKONT-02EYL — ödev kontrol: öğrenci satırı ≤56px + ✓/▲/✗ durum düğmeleri (44×44) */
.mob-satir.mt-odk-ogr{padding:4px 8px 4px 10px;min-height:52px}
.mt-odk-b{min-width:44px;min-height:var(--buton-yukseklik);border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:18px;font-weight:800;cursor:pointer;font-family:inherit;padding:0;line-height:1}
.mt-odk-b.yap.aktif{background:#16a34a;color:#fff;border-color:#16a34a}
.mt-odk-b.eks.aktif{background:#f59e0b;color:#fff;border-color:#f59e0b}
.mt-odk-b.yok.aktif{background:#dc2626;color:#fff;border-color:#dc2626}
.mt-odk-kirp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mt-odk-alan{width:100%;box-sizing:border-box;font-size:16px;min-height:var(--form-yukseklik);padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);font-family:inherit}
.mt-odk-etiket{display:block;font-size:14px;font-weight:700;margin:8px 2px 4px}
/* 🧩 MOBILKUTU-02EYL — mobil ana ekran KUTU IZGARASI (kart tanimi degismez, yalniz gorunum) */
body.mobil-gorunum .mb-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:8px}
/* PUANIM-03EYL/2 — Puanım satır yükseklikleri (şartname E: döküm ≤72px, liderlik ≤56px, ödül kartı ≤200px) */
.pm-dok{max-block-size:72px}.pm-ld{max-block-size:56px}.pm-odul{max-block-size:200px}.pm-ad{max-block-size:33px}
@media(min-width:420px){body.mobil-gorunum .mb-izgara{grid-template-columns:repeat(4,minmax(0,1fr))}}
body:not(.mobil-gorunum) .mb-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-bottom:10px}
.mb-kutu{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 8px 7px;min-height:74px;display:flex;flex-direction:column;gap:2px;cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0}
.mb-kutu:active{transform:scale(.97)}
.mb-kutu .ik{font-size:18px;line-height:1.1}
.mb-kutu .ad{font-size:12px;font-weight:700;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.mb-kutu .alt{font-size:var(--yazi-kucuk);color:var(--text3);margin-top:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-kutu .say{position:absolute;top:6px;right:6px;min-width:17px;height:17px;border-radius:9px;padding:0 5px;font-size:var(--yazi-kucuk);font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}
.mb-acil{background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:#fff;border-radius:12px;padding:9px 12px;margin-bottom:10px;font-size:12.5px;line-height:1.45}
.mb-acil b{display:block;font-size:13px}
/* MODM-BUGUN-02EYL — ogrenci bugun modulu */
.mob-satir.mm-bitti{opacity:.6}
.mb-acil.mm-bugun{cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobil-gorunum #sbTutamak{display:none !important}
body.mobil-gorunum #altSerit{display:none !important}
body.mobil-gorunum .mob-overlay{display:none !important}
body.mobil-gorunum .main{margin-left:0 !important;width:100% !important;max-width:100% !important;padding-bottom:72px !important}
/* USTBAR-PWA-02EYL — mobil kabuk GENIS ekranda da 4 ogeli mobil bari kullanir; masaustu bari gizli */
body.mobil-gorunum .top{display:none !important}
body.mobil-gorunum .mob-top{display:flex;align-items:center;gap:8px;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 10px;height:52px;position:sticky;top:0;z-index:90}
body.mobil-gorunum .mob-top .moff{background:var(--card2);border:1px solid var(--border);color:var(--text2);width:44px;height:44px;border-radius:9px;font-size:17px;cursor:pointer;flex-shrink:0}
body.mobil-gorunum .mob-top h1{font-size:16px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.mob-top .mprofil{background:#1d4ed8 !important;color:#fff !important;border-color:#1d4ed8 !important}
.gbd-satir{max-height:72px}
.pwa-afis{display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#0e7490,#155e75);color:#fff;border-radius:12px;padding:9px 11px;margin-bottom:10px;font-size:12.5px;line-height:1.35}
.pwa-afis .m{flex:1;min-width:0}.pwa-afis .m b{display:block;font-size:13px}.pwa-afis .m span{opacity:.9;font-size:var(--yazi-kucuk)}
.pwa-afis .kur{background:#fff;color:#0e7490;font-weight:800;border:0;border-radius:9px;padding:9px 13px;min-height:var(--buton-yukseklik);cursor:pointer;font-family:inherit}
.pwa-afis .x{background:transparent;border:0;color:#cffafe;font-size:17px;cursor:pointer;min-width:40px;min-height:var(--buton-yukseklik)}
.pwa-afis.ios{display:block}.pwa-afis.ios .adim{display:flex;gap:8px;align-items:center;margin-top:6px}.pwa-afis.ios .adim span{background:rgba(255,255,255,.2);border-radius:7px;padding:3px 8px;font-weight:700;white-space:nowrap}
#swYeniSurum,#surumBant{position:fixed;top:0;left:0;right:0;z-index:10000;background:#1d4ed8;color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#swYeniSurum button,#surumBant button{background:#fff;color:#1d4ed8;border:0;border-radius:9px;padding:8px 14px;font-weight:800;cursor:pointer;min-height:var(--buton-yukseklik);font-family:inherit}
/* OPTIKFORM-11EYL — online optik formu dar ekranda TEK SUTUNA duser.
360 px'de iki sutun ~165 px kaliyor; tarih ve saat secicileri sikisiyordu.
Masaustu ve tablet degismez. */
@media (max-width:560px){ .osFormIzgara{grid-template-columns:1fr !important} }
/* SURUMBEKCI-11EYL — "Sonra" ikincil buton; dar ekranda metin alta sarar.
NOT: flex degeri satir ici DEGIL burada verilir; satir ici stil medya
sorgusunu ezer ve dar ekran duzeni calismaz. */
#surumBant span{flex:1}
#surumBant button.ikincil{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7);padding:8px 12px}
@media (max-width:520px){#surumBant{flex-wrap:wrap;font-size:12.5px;padding:9px 11px;gap:8px}#surumBant span{flex:1 0 100%}}
body.mobil-gorunum .top h1{font-size:16px}
body.mobil-gorunum .pc{max-width:480px;margin:0 auto;padding:12px 12px calc(20px + var(--ob-serit-h,0px))} /* ODEVBILDIRIM-08EYL */
body.mobil-gorunum .mob-nav{display:flex !important;position:fixed;left:50%;transform:translateX(-50%);
bottom:var(--ob-serit-h,0px);width:100%;max-width:480px;background:var(--card);border-top:1px solid var(--border); /* ODEVBILDIRIM-08EYL — WA kopma şeridi sekme çubuğunu örtmesin */
box-shadow:0 -2px 14px rgba(0,0,0,.10);padding:6px 4px 9px;z-index:220}
body.mobil-gorunum .mob-nav button{flex:1;background:none;border:none;color:var(--text3);
font-size:var(--yazi-kucuk);font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:6px 2px;cursor:pointer;min-height:46px}
body.mobil-gorunum .mob-nav button.aktif,
body.mobil-gorunum .mob-nav button.active{color:var(--accent);background:rgba(79,142,247,.12)}
/* 🔔 Mobil kabukta bildirim de şeritle aynı genişlikte ve onun ÜSTÜNDE */
/* 🔔 BALON-02EYL — mobilde DAR ŞERİT: içeriğe göre genişler (tam genişlik değil),
ortalanmış, alt navigasyonun ÜSTÜNDE; arkasındaki butonlar dokunulabilir kalır. */
body.mobil-gorunum .nt{top:auto;left:50%;right:auto;width:auto;max-width:min(460px,calc(100% - 24px));min-width:auto;
padding:10px 12px;bottom:calc(72px + var(--ob-serit-h,0px) + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(240px)} /* ODEVBILDIRIM-08EYL */
body.mobil-gorunum .nt.show{transform:translateX(-50%) translateY(0)}
body.mobil-gorunum .mob-nav .mi{font-size:19px;line-height:1}
/* Geniş ekranda telefon şeridinin dışı sakin dursun */
@media(min-width:861px){ body.mobil-gorunum{background:var(--bg2)} }
.mob-top{display:none}
.mob-nav{display:none}
/* 📎 WAMEDYA-05EYL — dosya surukleme alani */
#wmAlan.wm-uzeri{background:rgba(37,211,102,.20) !important;border-style:solid !important}
body.mobil-gorunum #wmAlan{min-height:56px;padding:15px}
/* 📱 SDMOBIL-05EYL — SINAV DEĞERLENDİRME SONUÇLARI: MOBİL KART GÖRÜNÜMÜ
10 sütunlu sonuç tablosu telefonda yatay taşıyordu. Mobilde tablo gizlenir
(DOM'da kalır → PDF/Excel çıktısı bozulmaz), yerine kart listesi çizilir. */
/* 👆 MOBDOKUNMA-05EYL — MOBİL DOKUNMA HEDEFİ: TÜM SAYFALARDA TEK KURAL
Ölçüm (canlı, 158 sayfa, 375px): 14 metin/sayı girdisi 44px'in altındaydı
(22–42px) — Ana Pano, Ders Dağıtımı, Akademik Takvim, İSTSİS, Okullar,
Mobil Ayar. Parmakla isabet ettirmek zordu. Sayfa sayfa düzeltmek yerine
TEK kural: mobil kabukta metin girdileri en az 44px.
Kutucuk/radyo/renk/aralık/dosya girdileri DİŞARIDA — onların boyu kasten küçük.
Regresyon ölçüldü: yeni yatay taşma 0 sayfa; yükseklik artışı 26 sayfada
toplam 244px (en fazla 58px). Masaüstü davranışı hiç etkilenmez. */
body.mobil-gorunum .pc input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
body.mobil-gorunum .md input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]){min-height:var(--form-yukseklik)}
body.mobil-gorunum #sdSonucSar{display:none !important}
/* 📒 OKULNOTMOBIL-05EYL — not fişleri telefonda tam satır (170px sabit
genişlik yan yana sıkışıp yazıyı harf harf kırıyordu). */
body.mobil-gorunum .okn-cip{min-width:0 !important;flex:1 1 100% !important}
body.mobil-gorunum.msd-tablo-geri #sdSonucSar{display:block !important}
body.mobil-gorunum .sd-tbl-ipucu{display:none !important}
body.mobil-gorunum #sdSonucAra{margin-left:0 !important;max-width:none !important;width:100% !important;padding:11px 12px !important;font-size:16px !important}
.msd-k{margin-bottom:8px}
.mob-satir.msd-sat{align-items:flex-start;padding-top:10px;margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.mob-satir.msd-sat .a2{white-space:normal;display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.mob-satir.msd-sat .ik{font-weight:800;font-size:14px;color:var(--accent)}
.msd-det{border:1px solid var(--border);border-top:0;border-radius:0 0 11px 11px;background:var(--card);padding:2px 10px 9px;display:flex;gap:6px;flex-wrap:wrap}
.msd-det>div{width:100%;display:flex;gap:6px;flex-wrap:wrap}
/* Mobil kabuk .fx'i dikey yiginlar; puan turu rozetleri (SAY/EA/SOZ) kart icinde YAN YANA kalsin. */
.msd-det .fx{flex-direction:row;flex-wrap:wrap}
.msd-bos{grid-column:1/-1;font-size:12px;color:var(--text3)}
/* 📱 CIHAZAYRIM-05EYL — tablet (768–1023px) mobil düzendedir ama 3 sütun */
body.mobil-gorunum.mb-tablet .mbKartIzgara,
body.mobil-gorunum.mb-tablet .mb-grid{grid-template-columns:repeat(3,1fr) !important}
.mob-overlay{display:none}
@media(max-width:860px){
/* 🚫 GLOBAL HORİZONTAL OVERFLOW KORUMASI — KESİN ÇÖZÜM
Hiçbir element viewport'tan taşmasın, sağa kayma olmasın */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
margin: 0 !important;
position: relative;
}
body * { max-width: 100vw; } /* her şey viewport içine sığsın */
.main, .pc, #pc, .sb {
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
#pc {
padding-left: 12px !important;
padding-right: 12px !important;
width: 100% !important;
}
.card {
max-width: 100% !important;
overflow-x: hidden;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: anywhere;
}
/* Flex container'larda da overflow guard */
.fxc, .fx, .fr { max-width: 100%; flex-wrap: wrap; }
/* Uzun butonlar/etiketler kırılsın */
.btn, .btn-p, .btn-s, .btn-w, .btn-d, .btn-g, .btn-sm {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
/* Long text içerik kırılsın */
span, div, p, h1, h2, h3, h4 { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
/* Tablolar haricinde tüm container'lar yatay scroll yapmasın */
*:not(.tw):not(.tabs):not(table):not(thead):not(tbody):not(tr):not(td):not(th) {
max-width: 100%;
}
/* Mobil-spesifik: çok büyük tablo/grid'leri zorla küçült */
table { max-width: 100% !important; }
img, svg, video { max-width: 100%; height: auto; }
body{-webkit-text-size-adjust:100%}
.demo-banner{font-size:13px;padding:6px 10px;line-height:1.4}
/* Login mobil */
#login{padding:14px;align-items:flex-start;padding-top:24px}
.lbox{width:100%;padding:24px 20px;border-radius:18px}
.licon{width:48px;height:48px;font-size:24px}
.llogo h1{font-size:24px}
.rolegrid{gap:7px}
.rolebtn{padding:14px 4px;font-size:14px}
.rolebtn .ri{font-size:24px}
.fg input,.fg select,.fg textarea,.frm input,.frm select,.frm textarea{padding:14px 16px;font-size:18px}
.g2,.g3{grid-template-columns:1fr !important}
.btn-bl{padding:14px}
/* Sidebar -> kayan çekmece */
.sb{position:fixed;left:0;top:0;bottom:0;width:78%;max-width:300px;transform:translateX(-105%);transition:transform .28s ease;z-index:300;box-shadow:8px 0 40px rgba(0,0,0,.6)}
.sb.open{transform:translateX(0)}
.mob-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:250;opacity:0;pointer-events:none;transition:opacity .25s}
.mob-overlay.open{opacity:1;pointer-events:all}
.main{margin-left:0;width:100%;max-width:100%}
/* Mobil üst bar (hamburger) */
.top{display:none}
.mob-top{display:flex;align-items:center;gap:8px;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 10px;height:52px;position:sticky;top:0;z-index:90}
.mob-top .burger{background:var(--card2);border:1px solid var(--border);color:var(--text);width:var(--buton-yukseklik);height:var(--buton-yukseklik);border-radius:9px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mob-top h1{font-size:17px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-top .moff{background:var(--card2);border:1px solid var(--border);color:var(--text2);width:var(--buton-yukseklik);height:var(--buton-yukseklik);border-radius:9px;font-size:17px;cursor:pointer;flex-shrink:0}
.mob-top .mlogout{background:rgba(255,107,107,.15);border:1px solid var(--danger);color:var(--danger);width:var(--buton-yukseklik);height:var(--buton-yukseklik);border-radius:9px;font-size:17px;cursor:pointer;flex-shrink:0}
/* İçerik — alt mob-nav (≈65-68px) + iOS safe area + 30px güvenli boşluk */
.pc{padding:14px 12px calc(95px + env(safe-area-inset-bottom,0px)) 12px}
.card{padding:15px;border-radius:14px}
.ct{font-size:17px}
/* Stat kartları - 2 sütun */
.sg{grid-template-columns:1fr 1fr;gap:var(--bosluk-m);margin-bottom:var(--bosluk-l)}
.sc{padding:var(--bosluk-m) var(--bosluk-l)}
/* .sv telefonda --rakam-buyuk:22px (olcekten) */
/* .sl telefonda --yazi-normal:14px (olcekten) */
/* Grid'ler tek sütun */
.g2,.g3,.g4{grid-template-columns:1fr;gap:12px}
/* Liste paneli (öğrenci/koçluk) */
.fx{flex-direction:column;gap:12px!important}
.list-panel{width:100%;max-height:none}
.list-panel>div:first-child{position:sticky;top:0}
.li-item{padding:13px;font-size:16px}
/* Tablolar - yatay kaydırma + büyük dokunma */
.tw{-webkit-overflow-scrolling:touch;margin:0 -3px}
/* 📱 MOBLIST-26AGU/md.1 — min-width YALNIZ kendi kutusunda kayan
tablolara. Sarmalayicisiz bir tabloya 560px dayatmak SAYFAYI yatay
kaydirtiyordu (max-width:100% min-width'i ezemez). */
/* 📜 KLISTE-07EYL/B — YATAY KAYDIRMA YOK (mobil + masaüstü)
Eskiden burada `.tw table{min-width:560px}` vardı: tablo kabından geniş
kalıyor, kullanıcı sağa-sola kaydırmak zorunda kalıyordu. Taban genişlik
kaldırıldı; tablo kabına sığar, hücreler sarar. Bölünmemesi gereken
hücrelere (tarih, tutar, saat) `yz` sınıfı verilir. */
.tw table{min-width:0;width:100%;table-layout:auto}
#pc .tw td,#pc .tw th{white-space:normal;overflow-wrap:anywhere;word-break:normal}
#pc .tw td[style*="nowrap"],#pc .tw th[style*="nowrap"]{white-space:normal !important}
#pc .tw td.yz,#pc .tw th.yz,#pc .tw .yz{white-space:nowrap;overflow-wrap:normal}
#pc .tw img,#pc .tw svg{max-width:100%;height:auto}
body{overflow-x:hidden}
th{padding:var(--bosluk-s) var(--bosluk-m);font-size:var(--yazi-kucuk)}
td{padding:var(--bosluk-s) var(--bosluk-m);font-size:var(--yazi-normal)}
/* Sekmeler kaydırılabilir */
.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tb{flex:0 0 auto;min-width:auto;padding:10px 16px;white-space:nowrap;font-size:15px}
.rt{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:0}
.rtb{flex:0 0 auto;white-space:nowrap;font-size:14px;padding:10px 14px}
/* Butonlar dokunmatik */
.btn, .btn-p, .btn-s, .btn-w, .btn-d, .btn-g { padding: 12px 18px; font-size: 14px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-sm{padding:9px 14px;font-size:14px}
.bi{padding:10px;font-size:17px;min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
/* Form satırları tek sütun */
.fr{grid-template-columns:1fr;gap:11px}
.fs{padding:13px}
/* Detay üst kısım (öğrenci kartı) dikey */
.photo{width:64px;height:74px;font-size:30px}
/* 🪟 MODALCERCEVE-07EYL — mobilde de ÜÇ BÖLÜMLÜ ÇERÇEVE (tam ekran).
Eski yaklaşım (.mo dış kaydırma kabı, .md display:block) burada da
çerçeveyi bozuyordu: alt buton çubuğu ekran dışında kalıyordu. */
.mo{padding:0;display:flex;align-items:stretch;overflow:hidden}
/* Yükseklik 100dvh DEĞİL 100%: perdenin dolgusu (16px) kalsa bile kutu
taşmaz — canlı ölçümde 375x812'de alt çubuk 828px'e düşüyordu. */
.md{width:100%;max-width:100%;max-height:100%;height:100%;min-height:0;border-radius:0;padding:0;
display:flex;flex-direction:column;position:static;overflow:hidden;border:none}
.mh{flex:none;background:var(--card);padding:14px 16px;margin:0;border-bottom:1px solid var(--border)}
.mt{font-size:19px}
.md > #modb{flex:1 1 auto;min-height:0;padding:16px 14px;overflow-y:auto;overscroll-behavior:contain}
.md > #modAlt{flex:none;margin:0;padding:10px 14px calc(10px + var(--klavye,0px));background:var(--card);border-top:1px solid var(--border)}
.md .tabs{position:sticky;top:53px;z-index:9;background:var(--card);margin:0 -14px 14px;padding:10px 14px}
/* Bildirim mobil — alt şeridin ÜSTÜNDE durur, kapanınca tamamen çıkar.
⚠️ Sadece kaydırmak yetmez: kapalı kutu şeridin dokunuşlarını yutuyordu,
bu yüzden .nt kuralında visibility/pointer-events kapatılıyor. */
/* 🔔 BALON-02EYL — dar şerit + ortalı (eski left/right:10px tam genişlik kutusu
görünmezken bile alt eylem butonlarının dokunuşunu yutuyordu). */
.nt{top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));left:50%;right:auto;width:auto;
max-width:min(460px,calc(100% - 24px));min-width:auto;padding:10px 12px;transform:translateX(-50%) translateY(240px)}
.nt.show{transform:translateX(-50%) translateY(0)}
/* Ders programı - daha dar hücreler */
.scg-grid{min-width:640px}
.sl-i{font-size:var(--yazi-kucuk)}
/* Yoklama daireleri biraz küçük */
.attg{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px}
.atta{width:46px;height:46px}
/* Podyum mobilde */
.podbar{font-size:20px}
/* Alt navigasyon çubuğu */
.mob-nav{display:flex;position:fixed;bottom:var(--ob-serit-h,0px);left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);z-index:200;padding:5px 2px calc(5px + env(safe-area-inset-bottom,0px)) 2px;justify-content:space-around} /* ODEVBILDIRIM-08EYL — WA kopma şeridi sekme çubuğunu örtmesin */
/* 📱 MOBLIST-26AGU/md.11 — AKTIF SEKME VURGUSU.
buildMobNav `active` yaziyor; kabuk CSS'i `aktif` bekliyordu -> hicbir
sekme vurgulanmiyordu. Iki sinif da kabul edilir. */
.mob-nav button.aktif{color:var(--accent);background:rgba(79,142,247,.12)}
.mob-nav button{background:none;border:none;color:var(--text3);font-family:inherit;font-size:var(--yazi-kucuk);font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;cursor:pointer;flex:1;min-width:0;border-radius:8px;transition:.15s;overflow:hidden;white-space:nowrap}
.mob-nav button.active{color:var(--accent)}
.mob-nav button.active{background:rgba(79,142,247,.12)}
.mob-nav .mi{font-size:21px}
/* Inline iki kolonlu detay -> tek */
.g2 .fs{margin-bottom:10px}
.ir span:first-child{width:110px}
}
/* 📱 MOBGIRIS-11EYL — TELEFONDA GIRIS ROLLERI ILK EKRANDA GORUNSUN.
OLCUM (375x812, onizleme sunucusu):
sayfa boyu 1205px / ekran 812px -> 393px DIKEY TASMA
.llogo 226px (logo + slogan + kurum adi)
#tanitimKart 233px (tanitim karti)
#loginForm 622px (ASIL IS: rol secimi + giris)
Yani kullanicinin yapacagi is baslamadan once 459px tanitim vardi;
telefonda acan kisi giris rolunu gormek icin kaydirmak zorunda kaliyordu.
* NOT: kok sebep 100vh DEGILDI (yanlis pozitif onlendi: satir yorum olarak isaretli) — viewport etiketi zaten dogru
(viewport-fit=cover, maximum-scale yok) ve yatay tasma 0px olcüldü.
Icerik gercekten ekrandan uzundu; cozum de sunum katmaninda sikistirma.
KOSUL: dar (<=860px) VE kisa (<=860px) ekran. Tablet (768x1024) ve
masaustu bu kurala HIC girmez, gorunumleri aynen kalir. */
@media (max-width:860px) and (max-height:860px){
.lbox{padding:16px 14px}
.llogo{margin-bottom:10px !important}
#loginLogoSlot{padding:0 !important;margin-bottom:6px !important;min-height:44px !important}
#loginLogoSlot img{height:44px !important}
#loginLogoSlot > div{height:44px !important}
.llogo > div:nth-of-type(2){font-size:14px !important;padding:7px 16px !important}
.llogo > p{margin:8px 0 0 !important;font-size:12.5px !important}
/* Tanitim karti tek dokunusluk satira iner: aciklama gizlenir, VIDEO BUTONU KALIR
(islev kaybolmuyor, yalnizca yer kaplamasi kalkiyor). */
#tanitimKart{padding:10px !important;margin-bottom:12px !important}
#tanitimKart > div{display:none !important}
#tanitimKart > button{width:100%;min-height:var(--buton-yukseklik)}
/* Dokunma hedefi 44px altina DUSMEZ: .rolegrid .rolebtn min-height:48px kuralli. */
.rolebtn{padding:10px 4px}
}
@media(max-width:420px){
.sg{grid-template-columns:1fr}
.rolegrid{grid-template-columns:1fr 1fr}
.attg{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
/* Çok dar ekranlarda card padding'i biraz daha küçült + içerik kıvrılsın */
.pc{padding:12px 10px calc(110px + env(safe-area-inset-bottom,0px)) 10px}
.card{padding:13px;border-radius:12px}
/* Mob-nav butonları biraz daha kompakt */
.mob-nav button{font-size:var(--yazi-kucuk);padding:5px 1px}
.mob-nav .mi{font-size:19px}
}
/* 🆕 KAPSAMLI MOBIL DÜZELTMELER — install banner + floating Kaydet + overflow + safe area
Şikayet: Deneme Stok'ta install banner+Kaydet butonu içeriğin üzerine biniyor (mobilde).
Hedef: hangi ekran boyutunda olursa olsun (375px→768px) tam responsive. */
html, body { overflow-x: hidden !important; max-width: 100vw; }
@media(max-width:860px){
/* PWA install butonu — mobilde küçült, header'ın hemen altına al, içeriği kapatmasın */
#pwaInstallBtn {
top: 60px !important;
right: 8px !important;
padding: 6px 11px !important;
font-size: var(--yazi-kucuk) !important;
border-radius: 20px !important;
z-index: 95 !important; /* mob-top header'ın altında kalsın */
box-shadow: 0 3px 10px rgba(124,92,252,.4) !important;
}
/* Floating Kaydet butonu — mob-nav (≈70px) üzerinde dursun, içerikle çakışmasın */
#kaydetFloat {
bottom: calc(82px + env(safe-area-inset-bottom,0px)) !important;
right: 12px !important;
padding: 11px 18px !important;
font-size: 13px !important;
border-radius: 30px !important;
}
#kaydetFloatIkon { font-size: 17px !important; }
/* Yatay overflow — tablolar ve geniş içerikler ekrana sığsın */
.card { max-width: 100%; box-sizing: border-box; }
/* Form satırları ve input'lar — touch dostu min boyut */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="tel"], input[type="password"], select, textarea {
min-height: 42px;
font-size: 16px !important; /* iOS Safari otomatik zoom'u önler (16px+) */
box-sizing: border-box;
}
/* Modal — mobilde tam ekran, klavye açıkken dahi içerik kaydırılabilir */
.mo { z-index: 9999; }
/* Bottom-fixed buton/banner üst üste binmesin — mob-nav'ın üzerine değil yanına */
.pc { overflow-x: hidden; }
/* Geniş tablolar mobilde kart formatı kullansın (.tw zaten yapıyor) — fallback */
table:not(.tw table) { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Çok küçük telefonlar (iPhone SE 375px, Pixel 5 393px, vb.) */
@media(max-width:400px){
#pwaInstallBtn {
top: 58px !important;
padding: 5px 9px !important;
font-size: var(--yazi-kucuk) !important;
}
#kaydetFloat {
bottom: calc(78px + env(safe-area-inset-bottom,0px)) !important;
padding: 10px 15px !important;
font-size: 12.5px !important;
right: 10px !important;
}
/* Stat kartları font biraz daha küçük */
.sg .sv { font-size: 22px; }
.sg .sl { font-size: 12px; }
}
/* Tablet (768-860px) */
@media(min-width:701px) and (max-width:860px){
.g4 { grid-template-columns: 1fr 1fr !important; }
}
@keyframes turnuvaPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7) }
50% { box-shadow: 0 0 0 10px rgba(16,185,129,0) }
}
/* 🆕 Optik alan butonu — seçim varken parlayan animasyon */
@keyframes pulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.03); opacity: 0.92; }
}
@keyframes haftaSinavPulse {
0%,100% { transform: scale(1); box-shadow: 0 2px 8px rgba(220,38,38,.4); }
50% { transform: scale(1.04); box-shadow: 0 4px 14px rgba(220,38,38,.7); }
}
@media(max-width:860px){
#haftaSinavPill { font-size: var(--yazi-kucuk) !important; padding: 5px 9px !important; }
}
.turnuvaBenim {
animation: turnuvaBenimGlow 2s infinite;
border: 3px solid #f59e0b !important;
}
@keyframes turnuvaBenimGlow {
0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.6) }
50% { box-shadow: 0 0 0 8px rgba(245,158,11,0) }
}
/* ===== ARKA PLAN FILIGRANI — İstanbul Kurs / İstanbul Dershanesi ===== */
/* Body'nin background-image'i olarak çini gibi tekrarlanır, sabit kalır */
body {
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
}
/* Ana içerik alanı (main) — body bg'sini göstermesi için transparan
(sadece kendi içindeki kartlar bg'liyse onlar opak olacak) */
.main { background: transparent !important; }
/* ===== HADİHOCAM LOGO — Animasyonlu Yükleme Barlı ===== */
.hadiLogo {
display: inline-block;
font-family: 'Outfit', 'Inter', Arial, sans-serif;
position: relative;
line-height: 1;
--hadiSize: 32px;
--hadiTextColor: #1e3a8a;
--hadiDotColor: #dc2626;
--hadiBarBg: rgba(0,0,0,0.08);
--hadiBarFill: #dc2626;
}
.hadiLogo.beyaz {
--hadiTextColor: #fff;
--hadiBarBg: rgba(255,255,255,0.18);
}
.hadiLogo-svg {
display: block;
width: auto;
height: var(--hadiSize);
}
.hadiLogo-svg text {
fill: var(--hadiTextColor);
font-family: 'Outfit', 'Inter', Arial, sans-serif;
font-weight: 800;
letter-spacing: -2px;
}
.hadiLogo-svg .hadiDot { fill: var(--hadiDotColor); }
/* Loading bar tamamen kaldırıldı — logo altında bar yok */
/* ═══════════════════════════════════════════════════════════════════
📱 MOBIL-22AGU — TELEFON UYUMU (asıl kullanım telefon)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* ① SEKME ÇUBUĞU SARMALI — kırpılan sekme kalmaz.
Eskiden overflow-x:auto ile tek satıra sıkışıyor, son sekme
("EKSTR…") yarım görünüyordu ve kaydırılabildiği belli olmuyordu. */
.tabs {
flex-wrap: wrap !important;
overflow-x: visible !important;
row-gap: 6px !important;
}
.tb {
flex: 0 1 auto !important;
min-width: 0 !important;
min-height: 44px !important; /* ② dokunma hedefi */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
font-size: 14px !important;
padding: 8px 12px !important;
}
/* ③ DOKUNMA HEDEFİ — MOBIL-22AGU/2: 360px'te ölçüldü, header düğmeleri
44px altındaydı (burger 38×38, mlogout 38×38, mc 34×34). Sınıf sınıf
saymak yerine mobilde TÜM düğmelere taban konuyor. */
button, .bi, .btn, .btn-sm, .tb, a[onclick] {
min-height: 44px;
min-width: 44px;
}
.burger, .mlogout, .mc, #burger {
min-height: 44px !important;
min-width: 44px !important;
}
/* Satır içi metin bağlantıları hedef kuralından muaf — blok gibi davranmasın */
a[onclick].txs, a[onclick].tsm, td a[onclick], span a[onclick] {
min-height: 0; min-width: 0;
}
.fx.g6 > .btn, .fx.g8 > .btn { margin-bottom: 2px; }
/* ④ OTOMATİK ZOOM ENGELİ — iOS Safari 16px altı alana dokununca
sayfayı büyütür; kullanıcı her formda elle geri küçültmek zorunda kalır. */
input, select, textarea {
font-size: 16px !important;
}
input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
/* ⑤ 360px'TE YATAY KAYDIRMA YOK — taşma yalnız tablonun KENDİ kabında olur */
html, body { overflow-x: hidden !important; max-width: 100vw; }
.card, .ct, .tsm, .txs { max-width: 100%; box-sizing: border-box; }
pre, code { white-space: pre-wrap !important; word-break: break-word; }
img, svg, canvas, video { max-width: 100%; height: auto; }
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* ⑥ ALT MENÜ İÇERİĞİ KAPATMASIN + iOS SAFE-AREA */
body.mobil-gorunum #content,
body.mobil-gorunum .sk-main {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
.mob-nav {
padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
.mob-nav button { min-height:var(--buton-yukseklik); }
}
/* ⑦ NOTCH — yatay çentik alanına içerik taşmasın (tüm mobil genişlikler) */
@media (max-width: 860px) {
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
/* ═══ 📱 MOBLIST-26AGU — MOBIL KABUKTA MODAL TAM EKRAN (md.6) ═══
Modalin mobil kurallari yalniz `@media(max-width:860px)` icindeydi.
Ogretmen/ogrenci/veli sistemi `body.mobil-gorunum` kabugunda gorur ve
bu kabuk GENIS EKRANDA da aktiftir. Olcum (1280px + kabuk): modal
720px kutu, kapatma butonu yapiskan degil -> uzun icerikte kayboluyor.
Ayni kurallar kabuga da verilir; boylece "tam ekran + kapatma her zaman
gorunur + icerik kaydirilabilir" her genislikte saglanir. */
/* 🪟 MODALCERCEVE-07EYL — mobil kabukta da AYNI çerçeve: başlık ve alt çubuk
SABİT bölüm (sticky değil), kaydırma yalnız #modb'de. Eski kurallar
(display:block · overflow:visible · min-height:100%) alt çubuğu ekran
dışına itiyordu; canlı ölçümde 375×812'de modal 1193px çıkıyordu. */
body.mobil-gorunum .mo{padding:0;display:flex;align-items:stretch;overflow:hidden}
body.mobil-gorunum .md{width:100%;max-width:480px;margin:0 auto;max-height:100%;height:100%;min-height:0;
border-radius:0;padding:0;display:flex;flex-direction:column;position:static;overflow:hidden;border:none}
body.mobil-gorunum .mh{flex:none;background:var(--card);
padding:14px 16px;margin:0;border-bottom:1px solid var(--border)}
body.mobil-gorunum .mt{font-size:19px}
body.mobil-gorunum .md > #modb{flex:1 1 auto;min-height:0;padding:16px 14px;overflow-y:auto;overscroll-behavior:contain}
body.mobil-gorunum .md > #modAlt{flex:none;margin:0;padding:10px 14px calc(10px + var(--klavye,0px));background:var(--card);border-top:1px solid var(--border)}
body.mobil-gorunum .md .tabs{position:sticky;z-index:9;background:var(--card);margin:0 -14px 14px;padding:10px 14px}
/* md.2 — kapatma butonu dokunma hedefi */
body.mobil-gorunum .mc{width:44px;height:44px;font-size:22px}
/* md.6 — modal ici yapiskan sekmeler BASLIGIN ALTINDA dursun.
Sabit 53px yanlisti: baslik dolgusu+cizgi ile ~73px. Degisken ile
tek yerden ayarlanir; baslik yuksekligi JS'ten yazilir. */
.md .tabs{top:var(--mh-h, 53px)}
body.mobil-gorunum .md .tabs{top:var(--mh-h, 66px)}
/* md.6 — alt aksiyon cubugu mobilde yatay bosluklu (butonlar kenara yapismasin)
ve KLAVYE acilinca gorunur alanin icinde kalsin. */
@media(max-width:860px){
#modAlt{padding-left:14px !important;padding-right:14px !important;
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;}
}
body.mobil-gorunum #modAlt{padding-left:14px !important;padding-right:14px !important;
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;}
/* 🖥️ SANAL-26AGU — `html,body{overflow-x:hidden}` BODY'yi kaydirma kabi
yapip position:sticky'yi OLDURUYORDU (paneller hic yapismiyordu).
`clip` gorsel olarak ayni tasma korumasini verir ama kaydirma kabi
OLUSTURMAZ -> sticky calisir. Eski tarayicida deger taninmazsa bu
bildirim yok sayilir ve onceki `hidden` gecerli kalir (bugunku durum). */
html { overflow-x: clip !important; }
/* body'de overflow-y:auto (satir 44) vardi; `auto` yaninda `clip` de
`hidden` gibi davranip kaydirma kabi olusturur. `visible` ile birlikte
clip kaydirma kabi OLUSTURMAZ; body icerigiyle buyudugu icin dikeyde
kirpacak bir sey yoktur, sayfa kaydirmasi html uzerinden surer. */
body { overflow-x: clip !important; overflow-y: visible !important; }
/* ===== TEKKAYDIR-29AGU — TEK KAYDIRMA: TARAYICI ============================
Kok neden: LAYOUT-27AGU kabugu masaustunde body'yi kilitleyip (.pc) UYGULAMA
ICI ikinci bir kaydirici kuruyordu; ekran o kutuya sigmaya calistigi icin
kisa goruunuyor ve "Tam Ekran" dugmesi gerekiyordu. Artik sayfa dogal
yuksekliginde akar, TEK dikey cubuk tarayicinindir.
DOKUNULMAYANLAR: #stuSonucKutu (ogrenci arama/sanal liste), .sb (sabit menu),
tablo kapsayicilari (yatay kaydirma), form ogeleri, `kaydir-kalsin`. */
@media(min-width:861px){
body:not(.mobil-gorunum){height:auto !important;min-height:100dvh;overflow-y:visible !important;overflow-x:clip}
body:not(.mobil-gorunum) .main{height:auto !important;min-height:100dvh;overflow:visible !important;display:block}
body:not(.mobil-gorunum) .pc{flex:1 1 auto;min-height:0;height:auto !important;max-height:none !important;
overflow:visible !important;width:100%;box-sizing:border-box;
/* ⚠️ KAYDIRMA-28EYL — LAYOUT-27AGU `.pc`ye `overscroll-behavior:contain`
vermişti (o zaman kaydırıcı .pc'ydi). TEKKAYDIR kaydırmayı tarayıcıya
devretti ama bu satırı geri almadı; kaydırıcı olmayan bir öğede duran
`contain` tekerleğin sayfaya devrini engelliyor. */
overscroll-behavior:auto !important}
/* Ust cubuk yapisik kalir ama icerigi kesmez */
body:not(.mobil-gorunum) .top{position:sticky;top:0;z-index:95}
}
/* Ekran icerigini saran kutularda SABIT yukseklik / ic dikey kaydirma YOK.
⚠️ EKRANSTD-26EYL/G1 — `.liste-kaydir` ve `.std-liste` MUAF EDİLDİ. Sebep
ölçüldü: TEKEKRAN-24EYL bu iki sınıfla MEŞRU liste kaydırması kuruyor
(standart İstisna 1), ama bu kural `max-height:none !important` ile onu
iptal ediyordu — iki mekanizma birbirini yiyordu ve "liste kaydırma" hiç
çalışmıyordu. Muafiyet yalnız İŞARETLİ kapsayıcılara; işaretsiz her iç
kaydırma yine iptal edilir.
(Genis tablolar kendi kapsayicisinda yatay kayar — overflow-x korunur.) */
.pc [style*="overflow-y:auto"]:not(#stuSonucKutu):not(.sb):not(.kaydir-kalsin):not(.liste-kaydir):not(.std-liste):not([data-ickaydir]):not(select):not(textarea),
.pc [style*="overflow-y: auto"]:not(#stuSonucKutu):not(.sb):not(.kaydir-kalsin):not(.liste-kaydir):not(.std-liste):not([data-ickaydir]):not(select):not(textarea),
.pc [style*="overflow:auto"]:not(#stuSonucKutu):not(.sb):not(.kaydir-kalsin):not(.liste-kaydir):not(.std-liste):not([data-ickaydir]):not(select):not(textarea),
.pc [style*="overflow: auto"]:not(#stuSonucKutu):not(.sb):not(.kaydir-kalsin):not(.liste-kaydir):not(.std-liste):not([data-ickaydir]):not(select):not(textarea){
overflow-y:visible !important;max-height:none !important;height:auto !important;
/* ⚠️ KAYDIRMA-28EYL — EKSİK OLAN SATIR. Bu kural iç kaydırmayı iptal ediyor
ama `.liste-kaydir` ile gelen `overscroll-behavior:contain` yerinde kalıyordu.
Sonuç ölçüldü: `.tw.liste-kaydir` kutusu KAYAMIYOR (max-height silindi) ama
`contain` yüzünden tekerleği sayfaya da DEVRETMİYOR → fare tablonun üstünde
iken kaydırma ölü, yanındaki boş alanda çalışıyor. Kaydırmayı öldüren yer,
engellemeyi de kaldırmak zorundadır. */
overscroll-behavior:auto !important}
.pc [style*="max-height"]:not(#stuSonucKutu):not(.sb):not(.kaydir-kalsin):not(.liste-kaydir):not(.std-liste):not([data-ickaydir]):not([data-sigdir]):not(select):not(textarea):not(.nsec-items){
max-height:none !important}
/* Yatay kaydirma yalniz kendi kapsayicisinda */
.pc table{max-width:100%}
.pc .tablo-kaydir,.pc [style*="overflow-x:auto"],.pc [style*="overflow-x: auto"]{overflow-x:auto !important;max-width:100%}
/* ↔️ EKRANKUCULT-22EYL/5 — YATAY KAYAN ŞERİTTE ÖĞELER KÜÇÜLMEZ.
Kök neden: sekme şeridi `display:flex … overflow-x:auto` ile yazılmıştı (yazar
yatay kaydırma istemiş) ama flex öğeleri varsayılan olarak KÜÇÜLÜR
(flex-shrink:1). 390px'te 4 sekme sığmayınca her biri ~48px'e düşüp etiketler
HARF HARF alt alta diziliyordu (ölçüldü: BUTTON 48x172px "📊 Raporlar").
Öğeler kendi genişliğini korur, şerit kayar — yazarın amacı buydu. */
.pc [style*="overflow-x:auto"][style*="display:flex"] > *,
.pc [style*="overflow-x: auto"][style*="display:flex"] > *{ flex:0 0 auto; white-space:nowrap }
body{overflow-x:clip}
/* ISTISNA: OGRENCI ARAMA/LISTE PANELI eskisi gibi KENDI icinde kayar.
Body-scroll'a donunce sticky panel satir boyu uzayacagi icin ekran boyuyla
sinirlanir; boylece sanal kaydirma ve kaydirma konumu korunmasi bozulmaz. */
@media(min-width:861px){
body:not(.mobil-gorunum) .stu-cift .list-panel{max-height:calc(100dvh - 24px)}
body:not(.mobil-gorunum) .stu-cift #stuSonucKutu{
overflow-y:auto !important;max-height:none;min-height:0;flex:1 1 auto}
}
/* 🪟 MODALCERCEVE-07EYL — ESKİ KURAL KALDIRILDI.
Burası kutunun iç kaydırmasını `!important` ile iptal edip kaydırmayı perdeye
(.mo) taşıyordu; çubuk modalın değil perdenin oluyordu ve sticky alt çubuk
çalışmıyordu. Artık perde kaymaz, kaydırma #modb'dedir. */
.mo{overflow:hidden;align-items:center;padding:16px}
/* İçerik kısaysa kutu içerik kadar; boşuna ekranı doldurmaz (flex + max-height). */
/* Mobil (360-430px): ayni kural + dokunma hedefi >=44px */
@media(max-width:860px){
body,.main,.pc{height:auto !important;max-height:none !important;overflow-y:visible !important}
.pc{width:100%;box-sizing:border-box}
.pc button,.pc .btn,.pc select,.pc input[type="button"]{min-height:var(--buton-yukseklik)}
/* 🪟 MODALCERCEVE-07EYL — mobilde modal TAM EKRAN: kenar boşluğu yok, köşe yok.
Klavye açılınca (--klavye) alt çubuk klavyenin altında kalmaz. */
.mo .md > #modAlt button,.mo .md > #modAlt .btn{min-height:var(--buton-yukseklik)}
}
/* Modal açıkken alt sekme çubuğu kapanır — modal bir görevdir, sekmeye geçiş onu yarıda bırakır */
body.modal-acik .mob-nav{display:none !important}
/* ═══ 🧩 KABUK3-01EYL — TEK ORTAK DÜZEN KATMANI (onaylı) ==================
Yoğunluk değişkenleri + ortak akordiyon + açıklama-ⓘ + watermark yumuşatma.
Ekrana özel değer YAZILMAZ; her ekran bu değişkenlerden okur. */
/* ═══ 📐 YOGUNLUK-21EYL — TEK ÖLÇEK SİSTEMİ ════════════════════════
TÜM ekranların yoğunluğu BURADAN yönetilir. "Biraz daha sıkışsın" denince
bu blokta tek satır değişir, 116 ekran birden düzelir. Ekran-özel değer YAZILMAZ.
İHLAL EDİLEMEZ: form yazısı ≥16px · metin ≥12px · telefonda dokunma hedefi ≥44px.
Denetçi: node _gorunum_kontrol.js --ratchet */
:root{
/* —— boşluk ölçeği —— */
/* EKRANKUCULT-22EYL — masaustu olcegi kisildi (telefonda asagida gevsetilir).
Once: xs2 s4 m8 l12 xl16 · Simdi: xs2 s3 m6 l9 xl12 xxl16
Satir ici olculer _olcek_kodmod.js ile bu olcege baglandigi icin bu satir
tum ekranlarin dikey boslugunu birlikte kucultur. Ekran-ozel deger YAZILMAZ. */
--bosluk-xs:2px; --bosluk-s:3px; --bosluk-m:6px; --bosluk-l:9px; --bosluk-xl:12px; --bosluk-xxl:16px;
/* —— yazı ölçeği (--yazi-form ASLA 16px altına İNMEZ: iOS yakınlaştırır) —— */
--yazi-kucuk:12px; --yazi-normal:13px; --yazi-baslik:15px; --yazi-form:16px;
/* —— buton / satır / kart —— */
--buton-yukseklik:32px; --buton-yatay-bosluk:12px;
/* form alanı butondan biraz yüksek: içinde 16px yazı var (form yazısı küçültülemez) */
--form-yukseklik:34px;
--satir-yukseklik:30px; --kart-ic-bosluk:8px;
/* —— ESKİ ADLAR (silinmez — bugüne kadar bunlara bağlanmış ekranlar kırılmasın).
Artık sabit px değil, yukarıdaki ölçekten okurlar. —— */
--pad-1:var(--bosluk-l); /* önce 14px */
--pad-2:var(--bosluk-m); /* önce 9px */
--row-h:var(--satir-yukseklik); /* önce 34px */
--gap-1:var(--bosluk-m); /* önce 10px */
--ct-mb:var(--bosluk-s); /* önce 6px */
--liste-h:34px; /* önce 44px — masaüstü; telefonda aşağıda 44'e çıkar */
/* SONUCKART-06EYL — ORTAK KART ÖLÇÜLERİ (bileşen içinde sabit px YASAK; deploy/check-index.js denetler) */
--kart-padding:var(--bosluk-s); --kart-gap:var(--bosluk-m); --kart-ic-gap:var(--bosluk-s);
--kart-ic-pad:var(--bosluk-s); --kart-ic-pad-sik:var(--bosluk-xs) var(--bosluk-s);
--rakam-boyut:17px; /* önce 19px */
--rakam-buyuk:20px; /* sayac/KPI kutularinin BUYUK rakami (önce 26-30px) */
--etiket-boyut:var(--yazi-kucuk); /* önce 11px — 12px altı okunmuyor, kurala çekildi */
}
/* 📱 TELEFON — dokunulabilirlik sıkıştırmadan ÖNCE gelir (max-width VE body sınıfı) */
@media(max-width:768px){
/* EKRANKUCULT-22EYL — telefonda bosluk olcegi GEVSETILIR (masaustu siki kalir) */
:root{ --buton-yukseklik:44px; --satir-yukseklik:40px; --liste-h:44px; --form-yukseklik:44px; --yazi-normal:14px; --rakam-buyuk:22px;
--bosluk-s:4px; --bosluk-m:8px; --bosluk-l:12px; --bosluk-xl:16px; --bosluk-xxl:20px; }
}
body.mobil-gorunum{ --buton-yukseklik:44px; --satir-yukseklik:40px; --liste-h:44px; --form-yukseklik:44px; --yazi-normal:14px; --rakam-buyuk:22px;
--bosluk-s:4px; --bosluk-m:8px; --bosluk-l:12px; --bosluk-xl:16px; --bosluk-xxl:20px; }
/* —— İHLAL EDİLEMEZ GÜVENCELER (YOGUNLUK-21EYL) ——
a) Form alanı yazısı 16px: satır içi küçük değerler iOS'ta sayfayı yakınlaştırıp
düzeni dağıtıyordu. CLAUDE.md §5 (ANAHTARGOR-16EYL): giriş alanı yazdığını
KULLANICIYA GÖSTERMEK ZORUNDA — bu yüzden !important bilinçli. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select, textarea{ font-size:var(--yazi-form) !important; }
/* b) Telefonda dokunma hedefi 44px + hedefler arası en az 4px pay */
@media(max-width:768px){
button, .btn, [role=button], input[type=button], input[type=submit], select{ min-height:var(--buton-yukseklik); }
}
body.mobil-gorunum button, body.mobil-gorunum .btn, body.mobil-gorunum [role=button],
body.mobil-gorunum input[type=button], body.mobil-gorunum input[type=submit]{ min-height:var(--buton-yukseklik); }
/* c) Tıklanabilir şey tıklanabilir GÖRÜNSÜN: küçülen buton dolgu ya da net çerçeve taşır */
button:not(.kabuk-info-btn):not(.duz-btn){ min-height:var(--buton-yukseklik); padding-inline:var(--buton-yatay-bosluk); }
/* 🔤 KOMPAKTLISTE-02EYL — ORTAK kompakt liste satırı (sayfa kendi ölçüsünü yazmaz) */
.ku-satir{ min-height:var(--liste-h) !important; }
/* 📊 EKRANKUCULT-22EYL — PANO 2 SÜTUN (masaüstü).
SEBEP: ana sayfa 24 adet alt alta TAM GENİŞLİK karttan oluşuyordu; 1366x768'de
3183px (taşma +2415). Boşluk kısmak bunu çözmez — sorun DÜZEN. Gazete sütunu
(column-count) kart sırasını korur, kartları bölmez ve yüksekliği ~yarıya indirir.
1200px altında tek sütun kalır (tablet/telefon düzeni bozulmasın). */
@media (min-width:1200px){
/* ⚠️ column-count DENENDI VE BOZDU (ölçüldü): 1242px'lik kart 602px'lik sütun
kutusuna sığmayıp KIRPILIYORDU — "sığdı" gibi görünen ekran aslında içerik
kaybıydı. Grid'de uzun kart kendi satırını yükseltir, içerik kaybolmaz. */
/* overflow:visible ŞART — #pc altındaki kaplara başka bir kuraldan
overflow-y:hidden geliyor; onunla 1983px'lik kart 602px'te KIRPILIYORDU. */
#pc.pano2s{ display:grid; grid-template-columns:1fr 1fr; gap:var(--bosluk-l); align-items:start; }
#pc.pano2s > *{ min-width:0; margin-bottom:0; }
/* tam genişlik isteyenler: sayaç şeritleri ve ızgaralar satırı bölmesin */
#pc.pano2s > .sg, #pc.pano2s > .g2, #pc.pano2s > .sigdir-daha{ grid-column:1 / -1; }
/* 🔗 EKRANKUCULT-22EYL — 3 SÜTUN: yalnız KUTUCUK MENÜSÜ ekranları için.
koc_daha_fazla 14 bölümden oluşan bir gezinme menüsü; kutucuklar kısa
olduğu için dar sütun okunabilirliği bozmaz (kart ekranlarında bozar). */
#pc.pano3s{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-l); align-items:start; }
#pc.pano3s > *{ min-width:0; margin-bottom:0; }
}
body.mobil-gorunum .ku-satir{ min-height:52px !important; flex-wrap:wrap; padding:6px 10px !important; }
body.mobil-gorunum .ku-satir > button{ min-height:var(--buton-yukseklik) !important; }
/* Açıklama → ⓘ */
.kabuk-info-gizli{ display:none !important; }
.kabuk-info-btn{ margin-left:6px; cursor:pointer; opacity:.55; font-size:13px;
border:none; background:none; font-family:inherit; padding:2px 4px; }
.kabuk-info-btn:hover{ opacity:1; }
/* Ortak bölüm akordiyonu */
/* modal İÇİ liste kaydırması — TEKKAYDIR modal istisnası (inline yazma; ratchet lint) */
.modal-kaydir{ max-height:46vh; overflow-y:auto; }
/* LISTEPANEL-03EYL — UZUN LISTE PANELI (ortak; sayfalar kendi olcusunu YAZMAZ).
Kendi icinde kayar, cubuk GORUNUR (ince, uzerine gelince belirgin), baslik yapisik
(.liste-bas), panel sonunda kaydirma sayfaya GECMEZ, yukseklik ekrana bagli.
+1 BILINCLI inline max-height/overflow-y: bu SINIF tanimi (ratchet: _kabuk_lint_test). */
/* ⚠️ KAYDIRMA-28EYL — `overscroll-behavior:contain` KALDIRILDI (ölçüldü).
Amacı "liste sonuna gelince sayfa kaymasın" inceliğiydi; bedeli ağır çıktı:
bu sınıf `.tw` sarmalayıcılara da veriliyor (hem işaretlemeyle hem
_listeKaydirUygula ile) ve kutu KAYAMAZ durumdayken bile tekerleğin sayfaya
devrini engelliyordu → fare tablonun üstündeyken kaydırma ölü.
Ölçüm: `.tw.tkr-tablo oy=auto osb=contain kayabilir=false` → tekerlek 0px.
Yatay eksende engelleme korunur (yan kaydırma sayfayı sürüklemesin);
dikey eksen serbest — liste sonuna gelince sayfa doğal biçimde devam eder. */
.liste-kaydir{max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior-x:contain;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-gutter:stable;min-height:0}
.liste-kaydir::-webkit-scrollbar{width:9px}
.liste-kaydir::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
.liste-kaydir::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.liste-kaydir > .liste-bas{position:sticky;top:0;background:var(--card);z-index:1}
body.mobil-gorunum .liste-kaydir{max-height:60vh;-webkit-overflow-scrolling:touch}
/* CANLIYOK-GUN-03EYL — alt balon acikken icerik balonun altinda kalmasin */
body.mobil-gorunum.nt-acik .pc{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px)) !important}
.kabuk-akordiyon > .ct{ cursor:pointer; user-select:none; min-height:28px; }
.kabuk-akordiyon > .ct::after{ content:'⌄'; float:right; opacity:.45; transition:transform .15s; }
.kabuk-akordiyon.kapali > .ct::after{ transform:rotate(-90deg); }
.kabuk-akordiyon.kapali > .kabuk-akordiyon-icerik{ display:none; }
.kabuk-akordiyon.kapali{ padding-bottom:10px !important; }
body.mobil-gorunum .kabuk-akordiyon > .ct{ min-height:var(--buton-yukseklik); display:flex; align-items:center; }
/* ═══ 📐 KOMPAKT-31AGU — SIĞMIYORSA KÜÇÜLT ================================
Tam-sayfa + tek tarayıcı kaydırma TEKKAYDIR-29AGU'da hazır. Bu blok yalnız
YOĞUNLUĞU bir kademe düşürür: içerik dikeyde daha çok sığar, kaydırma azalır.
ORTAK — ekran-özel yama yok. Sol öğrenci listesi (#stuSonucKutu) etkilenmez. */
@media(min-width:861px){
/* .pc dikey dolgu bir kademe (yatay okunurluk korunur); alt bar (44px) + 6px pay */
body:not(.mobil-gorunum) .pc{padding:14px 24px 50px}
/* Kart yoğunluğu bir kademe düşer */
.pc .card{padding:var(--bosluk-l)}
.pc .ch{margin-bottom:11px}
/* Üst istatistik/özet kartları: SABIT 4 sütun yerine EKRANA GÖRE sarsın
(taşma yok) + kompakt — üst alan küçülür */
.pc .sg{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.pc .sg .card,.pc .sg>div{padding:12px}
/* Tablo satırları bir kademe sıkı (padding + satır yüksekliği) */
.pc th{padding:var(--bosluk-s) var(--bosluk-m)}
.pc td{padding:var(--bosluk-s) var(--bosluk-m);font-size:var(--yazi-normal)}
}
/* Mobilde de kart/tablo dolgusu bir kademe iner (tam sığsın) */
@media(max-width:860px){
.pc .card{padding:var(--bosluk-l)}
.pc th,.pc td{padding:var(--bosluk-s) var(--bosluk-m)}
}
/* ═══ 📐 EKRANSTD-26EYL — EKRAN STANDARDI ORTAK KATMANI (G0) ════════════════
Standart: haritalama/10-ekran-standardi.md · Ölçüm: haritalama/11-ekran-olcum.md
Ölçüldü (1366×768, 220 ekran): 48 ekran taşıyor, 45'inde içerik KESİLİYOR
(body overflow:hidden → taşan kısım kaydırılamıyor bile), 212 ekranda kart
iç dolgusu (e) eşiğini aşıyor.
BU BLOK NE YAPAR — iki iş, ikisi de EKRAN GÖVDESİNE DOKUNMADAN:
1) (e) ölçülmüş tek kaynak düzeltmesi: kart dolgusu 9px → 6px (masaüstü).
Ölçümde ihlalin %94'ü tek sınıftan geliyordu: `.card` (70 örnekte 9px).
Ekran-özel yama YAZILMAZ — YOGUNLUK-21EYL ölçeği üzerinden çözülür.
2) Sonraki grupların (G1…) kullanacağı `.std-*` sınıfları. Bunlar ŞU AN
HİÇBİR EKRANDA KULLANILMIYOR; tanımlı olmaları kasıtlı: her grup aynı
CSS'i yeniden yazmasın. Standart tam olarak bu yüzden dağılıyordu.
⚠️ MOBİL MUAF (standart maddesi (j)): aşağıdaki sıkıştırma yalnız
min-width:861px + body:not(.mobil-gorunum) altında. Telefonda akışkan
düzen ve 44px dokunma hedefi olduğu gibi kalır.
⚠️ ortak.css ÜRETİLEN dosyadır (ORTAKCSS-25EYL) — kural BURAYA yazılır.
═══════════════════════════════════════════════════════════════════════════ */
/* ── (e) KART İÇ DOLGUSU ≤6px — masaüstü, ölçülmüş düzeltme ─────────────── */
@media(min-width:861px){
body:not(.mobil-gorunum) .pc .card{padding:var(--bosluk-m)}
/* üst özet/istatistik kartları: sabit 12px yerine ölçeğe bağlanır
(SONUCKART-06EYL: bileşen içinde sabit px YASAK) */
body:not(.mobil-gorunum) .pc .sg .card,
body:not(.mobil-gorunum) .pc .sg>div{padding:var(--bosluk-m)}
}
/* ── (b)(c)(d) STANDART TABLO — G1'den itibaren kullanılacak ─────────────────
EBOS düzeni: sütunlar SABİT genişlikte, yan yana, arada boşluk yok;
kullanılmayan alan SAĞDA TEK PARÇA kalır.
Kullanımı:
+
içinde her sütuna SABİT
genişlik (ölçü satır içi değil, sütun tanımında verilir).
⚠️ width:100% VERİLMEZ — verilirse artan yer sütunlara dağılır ve
"sağda tek parça boşluk" kuralı bozulur. */
.std-tablo{table-layout:fixed;width:max-content;max-width:100%;border-collapse:collapse}
.std-tablo th,.std-tablo td{
padding:var(--bosluk-xs) var(--bosluk-m); /* komşu hücre toplamı 12px ≤ 24px (c) */
height:var(--satir-yukseklik); /* 30px ≤ 36px (d) */
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:var(--yazi-normal);text-align:left;vertical-align:middle;
}
.std-tablo th{font-weight:700;background:var(--card)}
/* sarma gereken sütun (ad, açıklama) bunu alır — satır yüksekliği yine sınırlı */
.std-tablo .std-sar{white-space:normal;overflow-wrap:anywhere}
/* tabloyu saran kutu: yatay kaydırma YOK, artan yer sağda boş kalır */
.std-tablo-kap{display:block;max-width:100%}
/* ── (e) STANDART KART ─────────────────────────────────────────────────── */
.std-kart{padding:var(--bosluk-m);gap:var(--bosluk-m)}
.std-kart>*+*{margin-top:var(--bosluk-s)}
/* ── (h)(i) GİRİŞ + DOKUNMA HEDEFİ ──────────────────────────────────────────
(h) 16px zaten global güvencede (YOGUNLUK-21EYL, --yazi-form !important);
burada yalnız YÜKSEKLİK standarda bağlanır. */
.std-giris{font-size:var(--yazi-form);height:var(--form-yukseklik)}
.std-dugme{min-height:var(--buton-yukseklik);padding:0 var(--buton-yatay-bosluk)}
@media(max-width:768px){ .std-dugme{min-height:44px} } /* (i) mobil 44px */
/* ── (a)(f)(g)(k) SAYFA İSKELETİ ────────────────────────────────────────────
(k) tam görüntü yüksekliği (vh) YASAK → 90dvh kullanılır. (g) iç kaydırma
YASAK; tek istisna ANA KAYIT
LİSTESİ ve o da .std-liste ile İŞARETLENEREK kullanılır (liste ekranı
istisnası — 10-ekran-standardi.md İstisna 1). */
.std-sayfa{max-height:90dvh}
.std-ust{max-height:250px;overflow:visible} /* (f) üst yığın sınırı */
.std-liste{overflow-y:auto} /* (g) tek meşru istisna */
/* ── LİSTE EKRANI İSTİSNASI — ölçülmüş yükseklikler ────────────────────────
Kapsayıcının boyu SABİT px DEĞİL: görüntü yüksekliğinden iskeleti düşer.
Böylece 1366×768'de de, 1920×1080'de de iskelet ekranda kalır ve yalnız
liste kayar. ⚠️ (j) MOBİL MUAF — telefonda akışkan düzen korunur. */
@media(min-width:861px){
/* denemetakvim: iskelet ölçüldü = 362px (üst kartlar 248 + kart başlığı 254'ün
görünen kısmı). ⚠️ İLK DENEME 420px paydı ve YETMEDİ: gerçek üst yığın 618px
ölçüldü (ekran 1069px kaldı, 301 taşıyordu). Pay ÖLÇÜME göre önce 620,
yönetim düğmeleri katlanınca (üst yığın 618 → 581) 660, son ölçümde 690'a
çekildi (26px kalmıştı); `.pc` dikey dolgusu da (14+50) bu paya dâhildir.
1366×768'de liste penceresi ~80px (yarım kart), 1920×1080'de ~390px.
⚠️ Bu dar bir pencere (768'de ~148px ≈ 1 deneme kartı) çünkü `.dt-kart`
kartları 189px; asıl düzeltme o kartları sıkıştırmak — ayrı iş olarak yazıldı
(haritalama/13-g1-olcum.md). Büyük ekranda pencere kendiliğinden büyür. */
/* ÜSTYIĞIN-29EYL — üst yığın 575 → 430 (Sipariş Dökümü düğmeye, Takvim Yönetimi + liste başlığı tek satır);
ÖLÇÜLDÜ: liste üstü 476px (görüş alanına göre) + #pc alt dolgu 50 + kart dolgusu → pay 690 → 540. 768'de pencere 78 → ~228px. */
body:not(.mobil-gorunum) #dtListeKart .dt-liste-kap{
max-height:calc(100dvh - 540px); min-height:80px;
}
/* 📐 DENEME KARTI YAN YANA — ölçülmüş genişlik kullanımı.
ÖNCE: kart 183px ve 1058px GENİŞ, her şey alt alta; sağın yarısı boştu.
EBOS kuralı: boşluk satırların arasına değil SAĞA. Dört blok
(başlık · yayınevi · uyarı · düğmeler) ızgarada yan yana dizilir.
⚠️ (j) mobil muaf — telefonda alt alta akış korunur. */
body:not(.mobil-gorunum) .dt-kart{
display:grid; align-items:center; column-gap:var(--bosluk-m);
grid-template-columns:minmax(420px,1.4fr) minmax(170px,1fr) minmax(150px,240px);
grid-template-areas:'bas yay dug' 'bas uyari dug';
}
/* ⚠️ 420px ÖLÇÜMLE kondu: başlık sütunu 260px'e sıkışınca meta satırı
("8. Sınıf · tarih · saat · süre") İKİ satıra sarıyor ve kart 156px'te
takılıyordu. 420px'te tek satır kalıyor. Düğmeler 240px'e sığmazsa
ikinci satıra sarar — kartı uzatmaz, kendi sütununda kalır. */
body:not(.mobil-gorunum) .dt-kart > .dt-k-bas { grid-area:bas; }
body:not(.mobil-gorunum) .dt-kart > .dt-k-yay { grid-area:yay; margin-top:0; }
body:not(.mobil-gorunum) .dt-kart > .dt-k-uyari{ grid-area:uyari; margin-top:0; }
body:not(.mobil-gorunum) .dt-kart > .dt-k-dug { grid-area:dug; margin-top:0; }
/* ızgaraya girmeyen parçalar (çakışma, not, sonuç düğmesi) tam satır kaplar */
body:not(.mobil-gorunum) .dt-kart > *:not([class*='dt-k-']){ grid-column:1 / -1; }
/* ── PANO BÖLÜMLERİ (EKRANSTD-26EYL/G1) ────────────────────────────────
Bölümler #pc'nin doğrudan çocuğu; ızgara artık bölümün İÇİNDE kurulur.
Böylece pano2s/pano3s kuralları bozulmaz, yalnız bir kademe içeri iner. */
/* PANOBUGUN-29EYL — dikey başlıkları (her biri ~44px, 5-6 bölümde ~250px) yerine TEK SATIR sekme şeridi */
#pc.pano2s > .pano-sekme, #pc.pano3s > .pano-sekme,
#pc.pano2s > .pano-bolum,
#pc.pano3s > .pano-bolum{ grid-column:1 / -1; }
.pano-sekme{ display:flex; gap:var(--bosluk-s); flex-wrap:wrap; margin-bottom:var(--bosluk-m); }
.pano-sekme-dug{ min-height:var(--buton-yukseklik); padding:0 var(--bosluk-m); border:1px solid var(--border); background:var(--card);
color:var(--text); border-radius:999px; font:inherit; font-weight:700; cursor:pointer; }
.pano-sekme-dug.akt{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pano-bolum[hidden]{ display:none !important; }
#pc.pano2s .pano-bolum > .pano-ic{
display:grid; grid-template-columns:1fr 1fr; gap:var(--bosluk-l); align-items:start;
}
#pc.pano3s .pano-bolum > .pano-ic{
display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-l); align-items:start;
}
.pano-bolum > .pano-ic > *{ min-width:0; margin-bottom:0; }
/* PANOBUGUN-29EYL — içi henüz dolmamış yuvalar (kocAnalizUyariSlot, alSeritYuva …) ızgara hücresi işgal etmesin (dolunca görünür);
küçük kartlar tam genişlik satırların bıraktığı boşluğa yerleşsin (dense). Ölçüldü: Bugün 705 → ~550px. */
.pano-bolum > .pano-ic > :empty{ display:none; }
#pc.pano2s .pano-bolum > .pano-ic, #pc.pano3s .pano-bolum > .pano-ic{ grid-auto-flow:row dense; }
.pano-bolum > .pano-ic > .sg,
.pano-bolum > .pano-ic > .g2{ grid-column:1 / -1; }
/* PANODUZEN-13EKI — BOŞLUKSUZ DİZİLİM. Kök: ızgarada her satırın boyu o satırdaki EN UZUN kart; kısa kartın altında
400px'e varan boşluk kalıyordu (dense yalnız yan boşluğu doldurur). Satır 1px, her kart kendi boyu kadar satır kaplar
(_panoDuvarKur, ResizeObserver — kart sonradan dolarsa/küçülürse kendiliğinden yeniden hesaplanır). ResizeObserver yoksa
.pano-duvar eklenmez → eski ızgara aynen çalışır. */
/* ⚠️ #pc.pano3s/pano2s'li seçici ŞART: üstteki `#pc.pano3s .pano-bolum > .pano-ic{gap:…}` satır arasına 16px koyar;
zayıf seçici ezilirse 1px'lik HER satıra 16px eklenir, kartlar ekranlarca aşağı kayar (ölçüldü: Bugün 5211px). */
#pc.pano2s .pano-bolum > .pano-ic.pano-duvar,
#pc.pano3s .pano-bolum > .pano-ic.pano-duvar{ grid-auto-rows:1px; row-gap:0; align-items:start; }
.pano-bolum > .pano-ic.pano-duvar > *{ margin-top:0; margin-bottom:var(--bosluk-l); } /* mt16'lı kart (Deneme Girilmemiş) 16px taşıyordu */
.pano-bolum > .pano-ic > .card{ box-shadow:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.06); }
/* kart başlığı → ilgili modül (PANO_KART_HEDEF) */
.pano-kb{ cursor:pointer; font-size:15px !important; font-weight:800 !important; }
.pano-kb:hover, .pano-kb:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.pano-kb-git{ display:inline-block; margin-left:6px; color:var(--accent); font-weight:800; }
/* görünüm anahtarı: Ayrıntılı / Yalnız başlıklar (sekme şeridinin sağında) */
.pano-gorunum{ margin-left:auto; display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--card); }
.pano-gorunum button{ border:0; background:transparent; color:var(--text2); font:inherit; font-size:16px; line-height:1; font-weight:700; padding:0 var(--bosluk-m); min-height:var(--buton-yukseklik); cursor:pointer; }
.pano-gorunum button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
/* sekiz sayı kutusu tek satıra sığsın (iki şerit birleşti) · uzun liste kartı iki sütun kaplar */
.pano-bolum > .pano-ic > .sg{ grid-template-columns:repeat(4,minmax(0,1fr)); } /* 8 kutu = 4+4 (124px'te açıklama kırpılıyordu; 1920'de 6'lı düzen 2 kutuyu yalnız bırakıyordu) */
#pc.pano3s .pano-bolum > .pano-ic > .pano-iki{ grid-column:span 2; }
/* YALNIZ BAŞLIKLAR — kart başlık + ilk satıra iner (4 sütun); sayı şeridi ve karşılama bandı aynen kalır */
#pc.pano-yalniz .pano-bolum > .pano-ic{ grid-template-columns:repeat(4,minmax(0,1fr)); }
/* tam genişlik bloklar (.g2 yan yana iki kart, .pano-genis tablo, yoklama sayacı) tam genişlik KALIR — dar sütunda 822px'e uzuyordu (ölçüldü) */
#pc.pano-yalniz .pano-bolum > .pano-ic > :not(.sg):not(.pano-bant):not(.g2):not(.pano-genis):not(#dersSayacKart){ grid-column:auto; }
/* başlığı bağlanmış kartta YALNIZ başlık satırı kalır (yazıyı ortasından kesmez); bağlanmamış kartta ilk satır (.ch başlığı);
kart olmayan blok ilk ~96px'e iner */
#pc.pano-yalniz .pano-ic .pano-kb-kart > :not(.pano-kb-satir){ display:none; }
#pc.pano-yalniz .pano-ic .card:not(.pano-kb-kart) > :not(:first-child){ display:none; }
#pc.pano-yalniz .pano-bolum > .pano-ic > :not(.sg):not(.pano-bant):not(.pano-kb-kart):not(.g2){ max-height:96px; overflow:hidden; }
}
/* PANODUZEN-13EKI — karşılama + günün sözü tek ince bant (eski iki kart ~250px) — tüm genişliklerde */
.pano-bant{ padding:var(--bosluk-s) var(--bosluk-l) !important; }
.pano-bant-ic{ display:flex; align-items:center; gap:var(--bosluk-s) var(--bosluk-l); flex-wrap:wrap; }
.pano-bant-selam{ font-weight:800; font-size:16px; }
.pano-bant-tarih{ color:var(--text2); font-weight:600; font-size:var(--yazi-kucuk); }
.pano-bant-soz{ flex:1; min-width:200px; color:var(--text2); font-style:italic; font-size:var(--yazi-kucuk); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; cursor:pointer; border-left:1px solid var(--border); padding-left:var(--bosluk-l); }
.pano-bant-soz:empty{ display:none; }
.pano-bant-soz b{ font-style:normal; color:var(--text); }
/* PANODUZEN-13EKI — Deneme Girilmemiş: 8 kutu yerine kısa satır listesi */
.dek-liste{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); column-gap:var(--bosluk-l); }
.dek-satir{ display:flex; align-items:baseline; gap:var(--bosluk-s); padding:5px 2px; border-bottom:1px dashed var(--border); cursor:pointer; min-width:0; }
.dek-satir:hover{ background:var(--bg2); }
.dek-satir .dek-ad{ font-weight:800; white-space:nowrap; }
.dek-satir .dek-tarih{ color:var(--text2); font-size:var(--yazi-kucuk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.dek-satir .dek-ekle{ margin-left:auto; color:var(--accent); font-weight:700; font-size:var(--yazi-kucuk); white-space:nowrap; }
.dek-satir.acil .dek-ad, .dek-satir .dek-kalan{ color:#dc2626; }
/* ═══ 📐 EKRANSTD-G1B-29EYL — G1'in kalan üç ekranı (sinavdeg · students · kitap) ════════
Ölçüm: _ekran_duzen.js --tohum, 1366×768. ⚠️ (j) MOBİL MUAF — hepsi min-width:861px içinde. */
@media(min-width:861px){
/* sinavdeg — Sınav Adı + Tarih + Kitapçık tek satır (ad geniş, tarih dar) */
body:not(.mobil-gorunum) .fr.fr3{ grid-template-columns:1.6fr 1fr 1.4fr; }
/* students › Genel Bakış bölüm düğmeleri (tek satır, 32px) */
.stu-gb-sekme{ display:flex; gap:var(--bosluk-s); flex-wrap:wrap; margin-bottom:var(--bosluk-m); }
.stu-gb-dug{ min-height:var(--buton-yukseklik); padding:0 var(--bosluk-l); border:1px solid var(--border); background:var(--card);
color:var(--text); border-radius:999px; font:inherit; font-weight:700; cursor:pointer; }
.stu-gb-dug.akt{ background:var(--accent); border-color:var(--accent); color:#fff; }
.stu-gb-bolum[hidden]{ display:none !important; }
/* GBACIK-05EKI — bölümler hep açık; her bölümün görünür başlığı */
.stu-gb-baslik{ font-weight:800; font-size:14px; color:var(--text); margin:var(--bosluk-m) 0 var(--bosluk-s); padding-bottom:4px; border-bottom:2px solid var(--border); scroll-margin-top:80px; }
/* PANOBUGUN-29EYL — pano ızgarasında tam genişlik kart + ders matrisi tablosu */
.pano-bolum > .pano-ic > .pano-genis,
.pano-bolum > .pano-ic > #dersSayacKart{ grid-column:1 / -1; } /* üçte bir sütunda 822px, tam genişlikte 333px (ölçüldü) */
table.ders-matris th, table.ders-matris td{ height:auto; line-height:1.25; padding:var(--bosluk-xs) var(--bosluk-s); font-size:var(--yazi-kucuk); vertical-align:top; }
table.ders-matris thead th{ position:sticky; top:0; background:var(--card); }
table.ders-matris tbody th{ position:sticky; left:0; background:var(--card); text-align:left; }
table.ders-matris td.dm-aktif{ box-shadow:inset 3px 0 0 #3b82f6; }
table.ders-matris td.dm-uyari{ box-shadow:inset 3px 0 0 #f59e0b; background:rgba(245,158,11,.06); }
table.ders-matris td.dm-bos{ color:var(--text3); text-align:center; }
table.ders-matris .dm-ogr{ color:var(--text2); }
table.ders-matris tr.dm-canli > *{ background:rgba(16,185,129,.10); }
/* TAKIPKART-29EYL — Sınıf Konu & Tarama İlerleme: sınıf satırları çok sütunlu */
.skt-izgara{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:var(--bosluk-s); align-items:start; }
.skt-izgara > div{ margin-bottom:0 !important; }
.skt-izgara .skt-ogr{ display:none !important; } /* öğretmen adı özet satırını iki satıra sarıyordu; açılır ayrıntıda duruyor */
/* ÜSTYIĞIN-29EYL — kitap sipariş durum sayaçları: sayı ile etiket YAN YANA, düğme boyu (58px → ~34px) */
.sl-sayac{ gap:var(--bosluk-s); margin-bottom:var(--bosluk-m); }
.sl-kutu{ flex-direction:row; align-items:center; gap:var(--bosluk-s); min-height:var(--buton-yukseklik); padding:var(--bosluk-xs) var(--bosluk-m); }
.sl-adet{ font-size:var(--yazi-baslik); }
}
/* ═══ 📐 TAMEKRAN-31AGU — ÜST ALAN KÜÇÜLT (1366×768 kaydırmasız hedef) ══════
Ölçüldü (1366×768): üst araç çubuğu 56px, anamenu portal bandı 105px +
Ayın Birincisi şeridi 59px = 258px üst alan. Portal bandı JS'te VARSAYILAN
KAPALI (tek satır ≤36px). Burada üst çubuk + başlık boşlukları + Ayın
Birincisi şeridi + EBOS bandı bir kademe küçülür. Sol öğrenci listesi hariç. */
@media(min-width:861px){
.top{height:46px;padding:0 18px}
.top h1{font-size:17px}
/* Ekran başlığı satırı (başlık + aksiyon) daha az alt boşluk */
.pc .fxc.mb16{margin-bottom:10px}
.pc .card.mb16{margin-bottom:11px}
/* 🏆 Ayın Birincisi şeridi kompakt — inline stile karşı !important şart */
#pnSampiyonSerit .mb12{margin-bottom:7px !important}
#pnSampiyonSerit [style*="padding:8px 13px"]{padding:5px 11px !important}
#pnSampiyonSerit [style*="font-size:22px"]{font-size:16px !important}
#pnSampiyonSerit .txs{font-size:var(--yazi-kucuk) !important}
/* EBOS Ana Menü bandı + gövde bir kademe sıkı */
#thEbos .the-band{padding:7px 14px}
#thEbos{margin:-2px 0 6px}
/* 📝 FORM YOĞUNLUĞU — tüm formlar/sihirbazlar bir kademe sıkı (tek ortak) */
.pc .fg{margin-bottom:var(--bosluk-m)}
.pc .fg label{margin-bottom:var(--bosluk-xs);font-size:var(--yazi-kucuk)}
.pc .fg input,.pc .fg select,.pc .fg textarea{padding:8px 12px;font-size:15px}
.pc .fr{gap:10px}
.pc .frm .g2,.pc .frm .g3,.pc .frm .fr{margin-bottom:10px}
}
/* 👁 SANAL2-26AGU — "Gozunden Gor" LISTE KARTINDA yalniz ikon (her ekran).
Metinli hali 117px olup ismi eziyordu; tooltip tam adi soyler. */
.stu-goz button{width:34px;height:34px;padding:0 !important;font-size:0 !important;
display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.stu-goz button::before{content:'👁';font-size:15px}
.li-item .stu-orta{min-width:0}
.li-item .stu-adsatir{word-break:break-word;line-height:1.3}
/* ═══ 🖥️ SANAL-26AGU — OGRENCILER: IKI SABIT PANEL (yalniz masaustu) ═══
Sol liste KENDI ICINDE kayar (sticky + ic kaydirma), sagdaki detay
paneli yerinde SABIT durur ve kendi icinde kayar. Arama/filtre basligi
listenin ustunde sabittir (flex-shrink:0). Mobil kabuk ve dar ekran
ETKILENMEZ — orada liste→detay ayri ekran akisi calisir. */
@media(min-width:861px){
/* 🖥️ STUTAM-26AGU — YENI MODEL: detay DOGAL yukseklikte, IC KAYDIRMA YOK.
(Kaldirilanlar: cift'in JS yuksekligi, .stu-detay{height:100%;
overflow:hidden;flex-column}, #stub{flex:1;overflow-y:auto} — icerik
kucuk kutuya sikisip icinde kayiyordu, "Tam Ekran"a basmak gerekiyordu.)
Sayfa TEK ana kaydirmayla akar; SOL liste sticky + ekran boyu olup
KENDI icinde kayar (sanal kaydirma korunur). */
body:not(.mobil-gorunum) .stu-cift{align-items:flex-start}
body:not(.mobil-gorunum) .stu-cift .list-panel{
display:flex;flex-direction:column;width:300px;min-height:0;
position:sticky;top:8px}
body:not(.mobil-gorunum) .stu-cift .list-panel>div:first-child{flex-shrink:0}
body:not(.mobil-gorunum) .stu-cift #stuSonucKutu{
flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch}
body:not(.mobil-gorunum) .stu-cift .stu-detay{min-width:0}
/* Baslik (ad/no/rozetler) + sekme cubugu kaydirirken USTTE yapisik */
body:not(.mobil-gorunum) .stu-detay .stu-detay-bas{
position:sticky;top:0;z-index:6;background:var(--bg);padding-bottom:2px}
/* ⛶ Tam ekran: sol liste gizlenir, detay TUM genisligi kullanir */
body:not(.mobil-gorunum) .stu-cift.stu-tam .list-panel{display:none}
/* 🧾 SANAL2-26AGU — SANAL kaydirma SABIT satir yuksekligi ister.
74px: iki satira sarabilen AD (klamp 2) + sinif satiri. Onceki
64px + tek-satir ellipsis isimleri "L…" diye kesiyordu. */
body:not(.mobil-gorunum) .stu-cift #stuSanalGovde .li-item{
height:60px;box-sizing:border-box;overflow:hidden;align-items:center;
padding-top:var(--bosluk-s);padding-bottom:var(--bosluk-s)}
body:not(.mobil-gorunum) .stu-cift .li-item .stu-adsatir{
font-size:12.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
body:not(.mobil-gorunum) .stu-cift .li-item .stu-altsatir{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--yazi-kucuk);margin-top:2px}
/* (SANAL2 .rt sticky kurali kaldirildi — sekmeler artik .stu-detay-bas
ile birlikte yapisiyor; STUTAM-26AGU) */
}
/* 📱 MOBKAYMA-26AGU — genel koruma: uzun secenekli SELECT ve genis IMG
dar ekranda kapsayicisini asamasin (kaydirmali .tw iceriden etkilenmez) */
@media(max-width:860px){
#pc select{max-width:100%}
#pc img{max-width:100%;height:auto}
}
/* ═══ 📱 YUZENGIZLE-26AGU — KAYDIRIRKEN YUZEN BUTONLAR GIZLENIR (md.3) ═══
Konum degistirmek tek basina yetmiyor: `position:fixed` bir dugme her
zaman ALTINDAN gecen satirin USTUNDE kalir. Kullanicinin verdigi ikinci
secenek uygulanir — "kaydirinca gizlensin". Kaydirma bitince ~550 ms
sonra geri gelirler; dokunma sirasinda ekranda olmadiklari icin liste
satirlarindaki eylem dugmelerini (Gozunden Gor, ✏️, 🗑️) kapatamazlar. */
@media(max-width:860px){
body.kaydiriyor #yukariCikBtn, body.kaydiriyor #isaretRehberiBtn,
body.kaydiriyor #anaSayfaBtn, body.kaydiriyor #kaydetFloat{
opacity:0 !important; pointer-events:none !important;
transition:opacity .18s ease !important;
}
}
body.mobil-gorunum.kaydiriyor #yukariCikBtn, body.mobil-gorunum.kaydiriyor #isaretRehberiBtn,
body.mobil-gorunum.kaydiriyor #anaSayfaBtn, body.mobil-gorunum.kaydiriyor #kaydetFloat{
opacity:0 !important; pointer-events:none !important;
transition:opacity .18s ease !important;
}
/* ═══ 📱 YUZENBTN-26AGU — YUZEN BUTONLAR ICERIGI KAPATMASIN (md.3) ═══
ev · ? · yukari-ok butonlari JS ile ekranin DIKEY ORTASINA sabitleniyor
ve liste satirlarindaki sagdaki eylem dugmelerinin (Gozunden Gor, ✏️, 🗑️)
USTUNU kapatiyordu. Satir-ici stil @media'yi ezdigi icin `!important` sart.
Mobilde uc buton alt seridin hemen USTUNE yatay tek sirada alinir. */
@media(max-width:860px){
#yukariCikBtn, #isaretRehberiBtn, #anaSayfaBtn{
top:auto !important; transform:none !important;
bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
width:42px !important; height:42px !important; line-height:40px !important;
z-index:190 !important; /* alt seridin (200) ALTINDA kalsin */
}
#yukariCikBtn{ right:12px !important; }
#isaretRehberiBtn{ right:60px !important; }
#anaSayfaBtn{ right:108px !important; }
/* Bildirim bu siranin USTUNDE dursun (md.3 — birbirini kapatmasin) */
.nt{ bottom:calc(134px + env(safe-area-inset-bottom,0px)) !important; }
/* Yuzen "Kaydet" SOL alta — buton sirasi ve alt serit ile cakismasin */
#kaydetFloat{
right:auto !important; left:12px !important;
bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
padding:11px 16px !important; font-size:13px !important;
}
/* md.4 — liste sonu alt serit + buton sirasinin ALTINDA kalmasin */
.main{ padding-bottom:calc(132px + env(safe-area-inset-bottom,0px)) !important; }
}
/* Mobil KABUK (genis ekranda da telefon duzeni): butonlar 480px'lik
sutunun sag kenarina hizalanir, viewport kenarinda oksuz kalmaz. */
body.mobil-gorunum #yukariCikBtn, body.mobil-gorunum #isaretRehberiBtn,
body.mobil-gorunum #anaSayfaBtn{
top:auto !important; transform:none !important;
bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
width:42px !important; height:42px !important; line-height:40px !important;
z-index:190 !important;
}
body.mobil-gorunum #yukariCikBtn{ right:max(12px, calc(50% - 228px)) !important; }
body.mobil-gorunum #isaretRehberiBtn{ right:max(60px, calc(50% - 180px)) !important; }
body.mobil-gorunum #anaSayfaBtn{ right:max(108px, calc(50% - 132px)) !important; }
body.mobil-gorunum .nt{ bottom:calc(134px + env(safe-area-inset-bottom,0px)) !important; }
body.mobil-gorunum #kaydetFloat{
right:auto !important; left:max(12px, calc(50% - 228px)) !important;
bottom:calc(82px + env(safe-area-inset-bottom,0px)) !important;
}
body.mobil-gorunum .main{ padding-bottom:calc(132px + env(safe-area-inset-bottom,0px)) !important; }
/* md.2 — dokunma hedefi tabani MOBIL DUZENIN TAMAMINDA (860px) gecerli olsun.
Eskiden yalniz 600px altinda taniniyordu; 601-860px (tablet + buyuk telefon
yatay) araliginda 38px'lik dugmeler kaliyordu. */
@media(max-width:860px){
.mob-top .burger, .mob-top .moff, .mob-top .mlogout,
.mob-nav button, .bi, .mc{
min-width:44px !important; min-height:44px !important;
}
}
/* ╔══ 🛒 KITAPETIC-10EYL — KİTAP MAĞAZASI E-TİCARET GÖRÜNÜMÜ ══╗
Kurum renkleri: turkuaz #14AFC4, lacivert #0D2B5C, turuncu #F58220.
TURUNCU YALNIZ eylem butonunda (Sepete Ekle / Talebi Gönder). */
.kt-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
@media(max-width:1199px){.kt-izgara{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.kt-izgara{grid-template-columns:repeat(2,1fr);gap:10px}}
.kt-kart{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;
display:flex;flex-direction:column;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.kt-kart:hover{transform:translateY(-4px);box-shadow:0 10px 24px -8px rgba(13,43,92,.28)}
/* Kapak: en-boy oranını KAPSAYICI belirler. Görsel mutlak konumlu olmalı; yoksa
görselin kendi boyu oranı ezer ve kart telefonda uzar (ölçüldü: 167px → 114px). */
.kt-kapak{position:relative;aspect-ratio:1/1;background:var(--bg2);flex:none;overflow:hidden}
.kt-kapak img,.kt-kapak .kt-yer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kt-kapak .kt-yer{display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--text3);
background:repeating-linear-gradient(45deg,var(--bg2),var(--bg2) 10px,var(--bg) 10px,var(--bg) 20px)}
.kt-rozet{position:absolute;top:8px;right:8px;padding:4px 9px;border-radius:999px;font-size:var(--yazi-kucuk);
font-weight:800;color:#fff;z-index:2}
.kt-rozet.r-tuk{background:#94a3b8}
.kt-rozet.r-son{background:#0D2B5C}
.kt-rozet.r-bek{background:#b45309}
.kt-govde{padding:10px 11px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.kt-yayinevi{font-size:var(--yazi-kucuk);color:var(--text3);line-height:1.2}
.kt-ad{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.32;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em}
.kt-cip{align-self:flex-start;font-size:var(--yazi-kucuk);font-weight:700;padding:2px 8px;border-radius:999px;
background:rgba(20,175,196,.12);color:#0e7d8c}
.kt-fiyat{margin-top:auto;padding-top:6px}
.kt-eylem{margin-top:8px}
.kt-eylem .btn,.kt-eylem button{width:100%;justify-content:center}
.kt-yonet{display:flex;gap:6px;margin-top:6px}
.kt-yonet button{flex:1;padding:7px;border-radius:8px;border:1px solid var(--border);background:var(--card);
font-family:inherit;font-size:12px;font-weight:700;color:var(--text);cursor:pointer}
.kt-yonet button.sil{color:#dc2626;border-color:#f3c6c6}
.kt-yeni{border:2px dashed var(--border);background:var(--bg2);display:flex;align-items:center;
justify-content:center;min-height:220px;color:#14AFC4;font-weight:800;font-size:14px;gap:8px;flex-direction:column}
.kt-yeni:hover{border-color:#14AFC4}
@media(max-width:767px){
.kt-kapak{aspect-ratio:3/2}
.kt-govde{padding:8px 9px 10px;gap:4px}
.kt-ad{font-size:12.5px}
.kt-eylem{margin-top:6px}
.kt-yeni{min-height:150px}
}
/* — LIGHTBOX — */
.kt-lb{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9998;display:flex;align-items:center;
justify-content:center;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .17s ease}
.kt-lb.acik{opacity:1;pointer-events:auto}
.kt-lb img{max-width:90vw;max-height:78vh;object-fit:contain;border-radius:6px}
.kt-lb .kt-lb-yazi{color:#fff;text-align:center;margin-top:12px;padding:0 14px}
.kt-lb .kt-lb-yazi b{display:block;font-size:15px}
.kt-lb .kt-lb-yazi span{font-size:12.5px;opacity:.8}
.kt-lb .kt-lb-kapat{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.14);border:0;color:#fff;
width:38px;height:38px;border-radius:999px;font-size:19px;cursor:pointer}
.kt-lb .kt-lb-ok{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;
color:#fff;width:42px;height:52px;border-radius:9px;font-size:22px;cursor:pointer}
.kt-lb .kt-lb-ok.sol{left:12px}.kt-lb .kt-lb-ok.sag{right:12px}
body.kt-lb-acik{overflow:hidden}
/* — KITAPETIC2-10EYL: ÜST BAR — */
.kt-ustbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.kt-ustbar .kt-ara{flex:1;min-width:170px}
.kt-sepetbtn{position:relative;padding:9px 13px;border:1px solid var(--border);border-radius:9px;
background:var(--card);font-family:inherit;font-size:14px;cursor:pointer;color:var(--text);min-height:var(--buton-yukseklik)}
.kt-sepetbtn .rz{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;
background:#F58220;color:#fff;font-size:var(--yazi-kucuk);font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
.kt-cipsatir{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
@media(max-width:767px){
.kt-ustbar .kt-ara{flex:1 1 100%;order:-1}
.kt-cipsatir{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.kt-cipsatir::-webkit-scrollbar{display:none}
.kt-cipsatir>button{white-space:nowrap;flex:none}
}
/* — SEPET PANELİ (drawer) — */
.kt-perde{position:fixed;inset:0;background:rgba(13,43,92,.45);opacity:0;pointer-events:none;
transition:opacity .18s ease;z-index:9990}
.kt-perde.acik{opacity:1;pointer-events:auto}
.kt-sepetpanel{position:fixed;top:0;right:0;bottom:0;width:min(400px,94vw);background:var(--card);z-index:9991;
transform:translateX(102%);transition:transform .2s ease;display:flex;flex-direction:column;
box-shadow:-8px 0 30px -12px rgba(13,43,92,.4)}
.kt-sepetpanel.acik{transform:translateX(0)}
.kt-sepetpanel header{padding:13px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.kt-sepetpanel header b{flex:1;font-size:15px}
.kt-sepetpanel header button{border:0;background:none;font-size:20px;cursor:pointer;color:var(--text3);min-width:44px;min-height:var(--buton-yukseklik)}
.kt-sepetpanel .icerik{flex:1;overflow:auto;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px))}
body.kt-sepet-acik{overflow:hidden}
/* ═══ 📅 YOGUNLUK-21EYL — ORTAK HAFTALIK PROGRAM IZGARASI ════════════════
TÜM program ekranları (sınıf programı, ders dağıtım, özel dersler, risk programı,
öğrenci/öğretmen kendi programı) BU SINIFLARDAN beslenir. Ekran kendi px'ini YAZMAZ.
Hedef: haftalık program 1366×768'de dikey kaydırma olmadan sığsın. */
:root{ --prg-hucre-h:34px; --prg-saat-genislik:66px; --prg-ders-renk:#1e40af;
--kisi-foto:100px; } /* kisi detay fotografi — 100px alti EK KAZANC getirmiyor (olculdu) */
@media(max-width:768px){ :root{ --prg-hucre-h:44px; --prg-saat-genislik:56px; } }
body.mobil-gorunum{ --prg-hucre-h:44px; --prg-saat-genislik:56px; }
/* kapsayıcı: geniş tablo KENDİ içinde yatay kayar, sayfa yana kaymaz */
.prg-kap{ padding:var(--bosluk-s); overflow-x:auto; overscroll-behavior-x:contain; }
.prg-tablo{ border-collapse:collapse; width:100%; min-width:700px; font-size:var(--yazi-kucuk); }
.prg-tablo th, .prg-tablo td{ border:1px solid var(--border); }
/* üst başlık + gün satırı sabit; yalnız gövde kayar */
.prg-tablo thead th{ padding:var(--bosluk-xs) var(--bosluk-s); background:var(--bg2); font-weight:800;
position:sticky; top:0; z-index:3; line-height:1.2; }
.prg-tablo th.prg-saat{ left:0; z-index:4; }
.prg-tablo .prg-saat{ width:var(--prg-saat-genislik); min-width:var(--prg-saat-genislik);
background:var(--bg2); text-align:center; position:sticky; left:0; padding:var(--bosluk-xs); white-space:nowrap; }
.prg-tablo td.prg-hucre{ padding:var(--bosluk-xs) var(--bosluk-s); text-align:center; vertical-align:middle;
height:var(--prg-hucre-h); overflow:hidden; }
/* ders adı sığmıyorsa kısalır; tam adı title= ile üzerine gelince görünür */
.prg-ders{ font-weight:800; font-size:var(--yazi-kucuk); color:var(--prg-ders-renk); line-height:1.15;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prg-og{ font-size:var(--yazi-kucuk); color:var(--text2); line-height:1.15;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prg-bos{ color:var(--text3); font-size:15px; line-height:1; }
/* saat sütunu — "1. DERS" yerine "1." + saat aralığı (sütun darlar) */
.prg-saat-no{ font-size:var(--yazi-kucuk); font-weight:800; line-height:1.1; letter-spacing:-.01em; }
.prg-saat-td{ font-family:monospace; font-size:var(--yazi-kucuk); color:var(--text2); line-height:1.1; font-weight:400; }
/* ═══ 🧰 YOGUNLUK-21EYL — ORTAK ARAÇ ÇUBUĞU ══════════════════════════
İşlem butonları ayrı ayrı büyük kutular değil, tek şeritte toplanır.
Buton KÜÇÜK ama BELİRGİN: dolgu + net çerçeve taşır, salt metin bırakılmaz. */
.arac-cubugu{ display:flex; gap:var(--bosluk-s); align-items:center; flex-wrap:wrap;
padding:var(--bosluk-m) var(--bosluk-l); }
.arac-cubugu > button, .arac-cubugu > .ac-btn{
min-height:var(--buton-yukseklik); padding:0 var(--buton-yatay-bosluk);
border:1px solid var(--border2); border-radius:8px; background:var(--card); color:var(--text);
font-weight:700; font-size:var(--yazi-normal); font-family:inherit; cursor:pointer; white-space:nowrap; }
.arac-cubugu > button:hover, .arac-cubugu > .ac-btn:hover{ background:var(--card2); border-color:var(--accent); }
.arac-cubugu > button.ac-ana{ background:var(--accent); border-color:var(--accent); color:#fff; }
.arac-cubugu > select{ min-height:var(--buton-yukseklik); padding:0 var(--buton-yatay-bosluk);
border:1.5px solid var(--border2); border-radius:8px; background:var(--bg2); color:var(--text);
font-weight:700; font-family:inherit; }
.arac-cubugu > .ac-etiket{ font-weight:800; font-size:var(--yazi-baslik); }
/* ═══ 👤 YOGUNLUK-21EYL — ORTAK KİŞİ KÜNYESİ + ÖZET SÜTUNLARI ══════════
Öğrenci/öğretmen/veli detay ekranları aynı künyeden beslenir. Ekran kendi px'ini YAZMAZ.
Hedef: temel bilgi + iletişim + özet TEK BAKIŞTA. */
.kunye-serit{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--bosluk-xs) var(--bosluk-m);
font-size:var(--yazi-normal); color:var(--text2); line-height:1.35; margin-top:var(--bosluk-s); }
.kunye-serit > span{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.kunye-serit > span + span::before{ content:'·'; color:var(--border2); margin-right:var(--bosluk-s); }
.kunye-serit b{ color:var(--text); font-weight:700; }
/* iletişim değerleri tıklanabilir görünsün (tel:/wa bağlantısı varsa) */
.kunye-serit a{ color:var(--accent); font-weight:700; text-decoration:none; }
.kunye-serit a:hover{ text-decoration:underline; }
.kunye-yok{ color:var(--text3); font-style:italic; }
/* ÖZET KARTLARI — alt alta uzun liste yerine sütunlara dağılır.
columns (masonry gibi): kart bölünmez, uzun kart bir sütunu tutar, kısalar diğerini doldurur. */
.ozet-sutun{ columns:2; column-gap:var(--bosluk-m); }
/* KISA kartlar (denetim/uyari satirlari ~70px) icin 3 sutun — YOGUNLUK-21EYL GRUP-6 */
.ozet-sutun-3{ columns:3; column-gap:var(--bosluk-m); }
.ozet-sutun-3 > *{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
display:inline-block; width:100%; margin-bottom:var(--bosluk-m) !important; }
@media(max-width:1400px){ .ozet-sutun-3{ columns:2; } }
@media(max-width:1100px){ .ozet-sutun-3{ columns:1; } }
body.mobil-gorunum .ozet-sutun-3{ columns:1; }
.ozet-sutun > *{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
display:inline-block; width:100%; margin-bottom:var(--bosluk-m) !important; }
@media(max-width:1100px){ .ozet-sutun{ columns:1; } }
body.mobil-gorunum .ozet-sutun{ columns:1; }
/* ═══ ⚙️ YOGUNLUK-21EYL — ORTAK İŞLEM ÇUBUĞU + "⋯ Diğer" ══════════════
İşlem butonları ayrı ayrı büyük kutular değil, tek şeritte. Az kullanılanlar
"⋯ Diğer" altına. Buton KÜÇÜK ama BELİRGİN: renkli dolgu + beyaz yazı.
Ölçü ORTAK ölçekten; ekran kendi px'ini YAZMAZ. */
.islem-cubugu{ background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
margin-bottom:var(--bosluk-l); }
.islem-cubugu > button, .ac-diger-kutu > button{
min-height:var(--buton-yukseklik); padding:0 var(--buton-yatay-bosluk);
font-size:var(--yazi-normal); font-weight:800; font-family:inherit; letter-spacing:.2px;
border:none; border-radius:var(--r2); color:#fff; cursor:pointer;
display:inline-flex; align-items:center; gap:var(--bosluk-s); white-space:nowrap;
box-shadow:var(--sh2); transition:transform .12s, filter .12s; }
.islem-cubugu > button:hover, .ac-diger-kutu > button:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.islem-cubugu > button:active, .ac-diger-kutu > button:active{ transform:translateY(0); }
/* renk kimlikleri — hangi işlem olduğu renkten de anlaşılsın.
SEÇİCİ ÖZGÜLLÜĞÜ ÖNEMLİ: .arac-cubugu > button (0,1,1) sade .ac-mavi'yi (0,1,0) ezip
zemini beyaza çeviriyordu → beyaz yazı beyaz zeminde kayboluyordu. */
.arac-cubugu > button.ac-mavi, .ac-diger-kutu > button.ac-mavi{ background:linear-gradient(135deg,#4f8ef7,#3b6fd1); color:#fff; border:none; }
.arac-cubugu > button.ac-mor, .ac-diger-kutu > button.ac-mor{ background:linear-gradient(135deg,#7c5cfc,#5b21b6); color:#fff; border:none; }
.arac-cubugu > button.ac-gri, .ac-diger-kutu > button.ac-gri{ background:linear-gradient(135deg,#6b7280,#4b5563); color:#fff; border:none; }
.arac-cubugu > button.ac-sari, .ac-diger-kutu > button.ac-sari{ background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:none; }
.arac-cubugu > button.ac-gok, .ac-diger-kutu > button.ac-gok{ background:linear-gradient(135deg,#0ea5e9,#0369a1); color:#fff; border:none; }
.arac-cubugu > button.ac-turuncu, .ac-diger-kutu > button.ac-turuncu{ background:linear-gradient(135deg,#f97316,#c2410c); color:#fff; border:none; }
.arac-cubugu > button.ac-kirmizi, .ac-diger-kutu > button.ac-kirmizi{ background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; border:none; }
/* "⋯ Diğer" — native ; JS gerekmez, klavyeyle açılır */
.ac-diger{ position:relative; }
.ac-diger > summary{ list-style:none; cursor:pointer;
min-height:var(--buton-yukseklik); padding:0 var(--buton-yatay-bosluk);
display:inline-flex; align-items:center; gap:var(--bosluk-s);
font-size:var(--yazi-normal); font-weight:800; font-family:inherit;
border:1px solid var(--border2); border-radius:var(--r2);
background:var(--card); color:var(--text); white-space:nowrap; }
.ac-diger > summary::-webkit-details-marker{ display:none; }
.ac-diger > summary:hover{ background:var(--card2); border-color:var(--accent); }
.ac-diger[open] > summary{ border-color:var(--accent); }
.ac-diger-kutu{ position:absolute; top:calc(100% + var(--bosluk-s)); left:0; z-index:40;
display:flex; flex-direction:column; gap:var(--bosluk-s); padding:var(--bosluk-m);
background:var(--card); border:1px solid var(--border2); border-radius:var(--r);
box-shadow:var(--sh); min-width:210px; max-width:min(280px,90vw); }
.ac-diger-kutu > button{ justify-content:flex-start; width:100%; }
/* telefonda menü sağa taşmasın */
@media(max-width:768px){ .ac-diger-kutu{ left:auto; right:0; } }
body.mobil-gorunum .ac-diger-kutu{ left:auto; right:0; }
/* 📱 YOGUNLUK-21EYL — telefonda tablo satırı dokunma hedefi kalır (dolgu bir kademe) */
@media(max-width:768px){ th, td{ padding:var(--bosluk-m) var(--bosluk-l); } }
body.mobil-gorunum th, body.mobil-gorunum td{ padding:var(--bosluk-m) var(--bosluk-l); }
body.mobil-gorunum .pc th, body.mobil-gorunum .pc td{ padding:var(--bosluk-m) var(--bosluk-l); }
@media(max-width:768px){ .pc th, .pc td{ padding:var(--bosluk-m) var(--bosluk-l); } }
/* 🔤 YOGUNLUK-21EYL — tarayıcı varsayılanı 0.83em: 14px'lik bir kutuda
11.67px'e düşüyordu (kural c: metin ≥12px). Taban ölçekten gelir. */
small{ font-size:var(--yazi-kucuk); }
/* 🖼️ YOGUNLUK-21EYL — KİŞİ DETAY FOTOĞRAFI (öğrenci/öğretmen/veli)
Önce 108×144px + altındaki "Fotoğraf Ekle" düğmesiyle 179px; başlık 238px oluyordu.
100×100 kare → başlık 163px. Daha küçük yapmak kazanç getirmez: o noktadan sonra
yüksekliği bilgi bloğu (ad + künye + rozetler) ile sekme çubuğu belirler (ölçüldü). */
.stu-detay-bas .photo{ width:var(--kisi-foto); min-width:var(--kisi-foto); }
.stu-detay-bas .photo .kf, .stu-detay-bas .photo .kf-av,
.stu-detay-bas .photo .ogrfoto > span, .stu-detay-bas .photo img{
width:var(--kisi-foto) !important; height:var(--kisi-foto) !important;
max-width:var(--kisi-foto); max-height:var(--kisi-foto); object-fit:cover; }
/* ═══ 🧩 RAPORSIH-22EYL — ÖZEL RAPOR SİHİRBAZI ═══════════════════════════════
Ölçüler ORTAK ölçekten; ekran kendi px'ini YAZMAZ (YOGUNLUK-21EYL kuralı). */
.rs-kok .rs-adim{ font-weight:800; font-size:var(--yazi-baslik); margin:var(--bosluk-l) 0 var(--bosluk-s);
display:flex; align-items:center; gap:var(--bosluk-s); }
.rs-kok .rs-adim:first-child{ margin-top:0; }
.rs-no{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
border-radius:50%; background:var(--accent); color:#fff; font-size:var(--yazi-kucuk); }
.rs-not{ font-weight:400; font-size:var(--yazi-kucuk); color:var(--text2); font-style:normal; }
.rs-konu, .rs-alt, .rs-sablon{ background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); }
.rs-ara{ flex:1 1 var(--bosluk-m); }
/* süzgeç ızgarası — dar sütun, çok bilgi */
.rs-suzler{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:var(--bosluk-m); }
.rs-suz{ border:1px solid var(--border); border-radius:var(--r2); background:var(--card); min-width:0; }
.rs-suz-bas{ font-weight:700; font-size:var(--yazi-normal); padding:var(--bosluk-s) var(--bosluk-m);
background:var(--bg2); border-bottom:1px solid var(--border); border-radius:var(--r2) var(--r2) 0 0;
display:flex; align-items:center; gap:var(--bosluk-s); }
.rs-rozet{ margin-left:auto; background:var(--accent); color:#fff; font-size:var(--yazi-kucuk);
min-width:18px; text-align:center; border-radius:99px; padding:0 var(--bosluk-s); }
.rs-suz-kutu{ max-height:148px; overflow-y:auto; padding:var(--bosluk-s); display:flex; flex-direction:column;
gap:var(--bosluk-xs); overscroll-behavior:contain; }
.rs-sec{ display:flex; align-items:center; gap:var(--bosluk-s); font-size:var(--yazi-normal);
padding:var(--bosluk-xs) var(--bosluk-s); border-radius:6px; cursor:pointer; min-height:var(--satir-yukseklik); }
.rs-sec:hover{ background:var(--bg2); }
.rs-sec input{ width:16px; height:16px; flex:none; cursor:pointer; }
.rs-bos{ color:var(--text3); font-size:var(--yazi-kucuk); padding:var(--bosluk-s); }
.rs-tarih{ max-height:none; }
.rs-tarih label{ display:flex; flex-direction:column; gap:var(--bosluk-xs);
font-size:var(--yazi-kucuk); color:var(--text2); font-weight:700; }
.rs-tarih input{ min-height:var(--form-yukseklik); font-size:var(--yazi-form);
border:1px solid var(--border); border-radius:6px; padding:0 var(--bosluk-s); background:var(--bg2); color:var(--text); }
.rs-ozet{ margin:var(--bosluk-l) 0 var(--bosluk-s); font-size:var(--yazi-normal); color:var(--text2); }
.rs-ipucu{ margin-top:var(--bosluk-l); padding:var(--bosluk-l); background:var(--bg2);
border:1px dashed var(--border2); border-radius:var(--r2); font-size:var(--yazi-normal); color:var(--text2); }
#rsTablo tr.rs-grup td{ background:var(--bg2); }
#rsTablo td.rs-gh{ background:var(--bg2); border-right:2px solid var(--border2); }
/* telefonda süzgeçler tek sütun, dokunma hedefi korunur */
@media(max-width:768px){
.rs-suzler{ grid-template-columns:1fr; }
.rs-suz-kutu{ max-height:200px; }
/* onay satiri DOKUNMA HEDEFI: --satir-yukseklik telefonda 40px, kural 44 ister */
.rs-sec{ min-height:var(--buton-yukseklik); }
}
body.mobil-gorunum .rs-suzler{ grid-template-columns:1fr; }
/* ═══════════════════════════════════════════════════════════════════
📱 DUZEN-22EYL — MOBİL YAZI DENETİMİ (ortak dosya, ekran ekran DEĞİL)
═══════════════════════════════════════════════════════════════════
Dosyanın SONUNDA duruyor: aynı özgüllükteki eski kuralları sırayla yener.
Satır içi font-size yazan (13px gibi) ~200 form alanı için `!important`
şart — CSS'in satır içi stili yenmesinin tek yolu bu. Kural mobil kabukla
sınırlı (`body.mobil-gorunum`), masaüstü görünümü HİÇ etkilenmez. */
/* 1) FORM YAZISI 16px — altına düşerse iOS Safari alana dokununca sayfayı
yakınlaştırır ve kullanıcı bir daha uzaklaştıramaz. Onay kutusu/radyo
hariç: onlarda font-size görünümü bozar. */
body.mobil-gorunum input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.mobil-gorunum select,
body.mobil-gorunum textarea,
body.mobil-gorunum [contenteditable="true"]{font-size:16px !important;line-height:1.35}
/* 2) BAŞLIKLAR TAŞMASIN, KAYMASIN — uzun başlık alt satıra iner; kelime
sığmıyorsa kelimenin içinden kırılır. Yatay kaydırma üretmez. */
body.mobil-gorunum h1,body.mobil-gorunum h2,body.mobil-gorunum h3,
body.mobil-gorunum .top h1,body.mobil-gorunum .ct,body.mobil-gorunum .fst,
body.mobil-gorunum .mb-bas,body.mobil-gorunum .md-bas{
overflow-wrap:anywhere;word-break:break-word;hyphens:auto;min-width:0;max-width:100%}
/* Tek satırda kalması gereken üst başlık: kaydırmak yerine üç noktayla kes */
body.mobil-gorunum .top h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 3) UZUN SINIF / DERS / ÖĞRENCİ ADLARI satırı bozmasın. Esnek kutu çocuğu
varsayılan `min-width:auto` taşır — içerik kutudan taşar, satır kayar. */
body.mobil-gorunum .fxc>*,body.mobil-gorunum .f1,
body.mobil-gorunum .ku-satir>*,body.mobil-gorunum .ni{min-width:0}
body.mobil-gorunum .ni{overflow-wrap:anywhere}
/* 4) BUTON İÇİ YAZI SIĞSIN — taşmak yerine kırpılır; düğme yüksekliği
(dokunma hedefi 44px) korunur. */
body.mobil-gorunum .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;min-height:var(--buton-yukseklik)}
/* Alt satıra inebilen düğmeler (etiketi uzun olanlar) kırpılmasın */
body.mobil-gorunum .btn.btn-sar{white-space:normal;overflow:visible;text-overflow:clip}
/* 5) METİN TABANI 12px — bunun altı okunmuyor. `.txs`/`.tc` sistemdeki en
küçük yazı sınıfları; küçük yazı ayrıca soluk OLMASIN (kontrast). */
body.mobil-gorunum .txs,body.mobil-gorunum .tc,body.mobil-gorunum small{
font-size:max(12px,var(--yazi-kucuk,12px));color:var(--text2)}
/* ═══════════════════════════════════════════════════════════════════════════
📐 TEKEKRAN-24EYL — FORM BÖLÜMLERİ YAN YANA (.form-kolon)
═══════════════════════════════════════════════════════════════════════════
ÖLÇÜLDÜ (1366×768, --tohum): Yeni Öğrenci Kaydı 1818px, taşma +1050.
Alan yüksekliği 36px, form yazısı 16px, en küçük metin 12px — yani ölçek
zaten sıkıydı (YOGUNLUK-21EYL/EKRANKUCULT-22EYL). Yeri yiyen tek şey,
dört bölüm kartının ALT ALTA dizilmesiydi: ekranın yarısı boşa gidiyordu.
NEDEN `columns` (ızgara değil): kartlar döngüden art arda basılan KARDEŞ
düğümler; sarmalayıcı eklemeden dengeli iki sütuna ancak çok sütun düzeni
dağıtır. `break-inside:avoid` bir kartın ortadan ikiye bölünmesini engeller.
1200px altında tek sütuna döner — telefon/tablet düzeni DEĞİŞMEZ.
DOKUNULMAYANLAR: alan yüksekliği, form yazısı 16px, etiket boyutu, zorunlu
alan yıldızı, hata mesajı yeri. Sekme (Tab) sırası DOM sırasıdır; çok sütun
düzeni DOM'u değiştirmez, sıra bozulmaz. */
.form-kolon{column-gap:var(--bosluk-xl)}
/* Sütun sayısı ÖLÇÜLEREK seçildi (1366×768, 8 bölüm, 49 alan):
2 sütun → 1225px (+457) · 3 sütun → 1152px (+384) · 4 sütun → 1374px (+606)
4 sütun DAHA KÖTÜ: sütun daralınca kart içindeki alanlar alt satıra kayıp
kartı uzatıyor. Kazancın tepesi 3 sütunda. */
/* 📦 EKRANSIKIS-25EYL — SÜTUN SAYISI FORMUN KENDİ GENİŞLİĞİNE GÖRE (container query).
Pencere genişliği yanıltıyordu: öğrenci detayında form 300px'lik listenin yanındaki
~740px'lik kutuda; pencere 1366 diye 3 sütun açılıyor, sütun ~240px'e düşüyor, kart
içi ızgara tek alana iniyor ve Genel Bilgiler 619px'e uzuyordu (ölçüldü). Kap =
.form-kolon-kap (formu çizen iki fonksiyon sarar). Mobil kabuk HARİÇ — orada eski
davranış (tek sütun) aynen sürer. */
.form-kolon-kap{container-type:inline-size}
.form-kolon-son{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;width:100%}
/* 📂 EKRANSIKIS2-26EYL — Tümünü aç / Tümünü kapat (yalnız masaüstü) */
.form-hepsi-btn{min-height:var(--buton-yukseklik);padding:0 var(--bosluk-m);border:1px solid var(--border);border-radius:8px;
background:var(--bg2);color:var(--text);font-family:inherit;font-size:var(--yazi-kucuk);font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0}
.form-hepsi-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-head > .form-hepsi-btn{float:right;margin-left:var(--bosluk-m)}
@media(max-width:1023px){ .form-hepsi-btn{display:none !important} }
body.mobil-gorunum .form-hepsi-btn{display:none !important}
@container (min-width:640px){
body:not(.mobil-gorunum) .form-kolon{column-count:2}
/* sütun dar: kart içi alan ızgarası da daralsın, yoksa tek alana düşer. Alan yüksekliği/yazı AYNI */
body:not(.mobil-gorunum) .form-kolon > .card > div[style*="grid-template-columns"]{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
}
}
@container (min-width:1000px){ body:not(.mobil-gorunum) .form-kolon{column-count:3} }
/* Container query desteklemeyen eski tarayıcı: eski (pencere) kuralı */
@supports not (container-type:inline-size){
@media(min-width:1100px){ .form-kolon{column-count:2} }
@media(min-width:1300px){ .form-kolon{column-count:3} }
@media(min-width:1200px){ .form-kolon > .card > div[style*="grid-template-columns"]{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important} }
}
@media(min-width:1100px){ #pc.pc-sutun{column-count:2} }
.form-kolon > .card{
break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
display:block; width:100%;
margin:0 0 var(--bosluk-m); /* kartlar arası boşluk tek yerden */
}
/* Sütunlar dar kalır → kart içi alan ızgarası da daralmalı, yoksa tek sütuna
düşüp kazanç kaybolur. Alan yüksekliği ve yazı boyutu AYNI kalır. */
/* Kart içi ızgara 1200px'te daralır: kural EKRANKUCULT-22EYL'in 1200px sorgusunda (ORTAKCSS-25EYL) */
/* ═══ 📂 TEKEKRAN-24EYL — KATLANABİLİR FORM BÖLÜMÜ ═══
3 sütun taşmayı +1050 → +384 indirdi ama 8 bölüm / 49 alan 768px'e düzen
değişikliğiyle SIĞMIYOR (ölçüldü). Az kullanılan bölümler katlanır; ilk 4
açık gelir. Katlı bölüm gizlenir ama DOM'dan çıkmaz: değerler durur,
kaydetme ve sekme sırası etkilenmez. */
.form-bolum-bas{
display:flex; align-items:center; gap:6px;
font-weight:800; font-size:var(--yazi-baslik);
margin-bottom:var(--bosluk-l);
cursor:pointer; user-select:none;
min-height:var(--buton-yukseklik); /* dokunma hedefi: 32px masaüstü / 44px telefon */
}
.form-bolum-bas:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.form-bolum-ok{margin-left:auto; color:var(--text3); transition:transform .15s ease}
.form-katli .form-bolum-ok{transform:rotate(-90deg)}
.form-katli .form-bolum-bas{margin-bottom:0}
.form-katli .form-bolum-govde{display:none !important}
/* ═══ 📐 TEKEKRAN-24EYL — DAR İÇERİKLİ EKRAN ÇOK SÜTUNA DİZİLİR ═══
Hangi ekranların buraya girdiği index.html'deki SUTUN_EKRANLAR sözlüğünde,
ölçümle seçilir (_yapi_analiz.js → "DAR MI? EVET"). Geniş tablolu ekranlar
BİLEREK dışarıda: onlarda içerik zaten 1088px, sütuna bölmek yatay kaydırma
doğurur. Kart ortadan bölünmez. 1100px altında tek sütun — telefon değişmez. */
#pc.pc-sutun{column-gap:var(--bosluk-xl)}
/* Sütun sayısı: 2 sütun .form-kolon ile ORTAK 1100px sorgusunda · 3 sütun .pc'nin 1500px sorgusunda (ORTAKCSS-25EYL) */
#pc.pc-sutun > *{
break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
display:block; width:100%; margin-bottom:var(--bosluk-m);
}
/* Sayfa başlığı sütuna girmesin — üstte tam genişlik kalsın */
#pc.pc-sutun > .page-head{column-span:all; margin-bottom:var(--bosluk-m)}
/* ═══ 📜 TEKEKRAN-24EYL — LİSTE KENDİ ALANINDA KAYAR ═══
Sınıfı JS verir (_listeKaydirUygula): yalnız GERÇEKTEN taşan ekranda ve
yalnız en uzun listeye. Yükseklik ölçülerek hesaplanır, buraya sabit px
YAZILMAZ — ekranın üstündeki başlık/filtre yüksekliği ekrandan ekrana değişir. */
/* Kaydırma (overflow-y, overscroll-behavior) ve çubuk görünümü GENEL .liste-kaydir
kuralından (LISTEPANEL-03EYL) gelir; burada yalnız TABLOYA özgü olanlar. */
/* Kaydırılabilir olduğu belli olsun (alt kenarda ince çizgi) */
#pc .tw.liste-kaydir{border-bottom:1px solid var(--border)}
/* Liste kayarken sütun başlıkları görünür kalsın */
#pc .tw.liste-kaydir thead th{position:sticky; top:0; z-index:2; background:var(--bg2)}
/* ═══ 📐 EKRANSIKIS-25EYL — ÖĞRENCİ DETAYI DİKEY SIKIŞTIRMA (yalnız masaüstü ≥1024px) ═══
Hedef: Öğrenciler › Bilgi 1366×768'de sayfa kaydırmasız. İÇ KAYDIRMA YOK (STUTAM-26AGU
kararı korunur: max-height/overflow YAZILMAZ). Form yazısı 16px, diğer metin ≥12px;
yalnız dolgu/boşluk ve yerleşim değişir. Dokunma hedefi masaüstünde 32px. */
@media(min-width:1024px){
/* a) başlık + dönem özeti + dönem etiketi TEK SATIR; sağdaki düğmeler aynı satırda */
body:not(.mobil-gorunum) .ogr-bas{margin-bottom:var(--bosluk-m) !important;align-items:center}
body:not(.mobil-gorunum) .ogr-bas{flex-wrap:nowrap !important}
body:not(.mobil-gorunum) .ogr-bas > button{flex-shrink:0}
body:not(.mobil-gorunum) .ogr-bas-sol{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--bosluk-l);row-gap:2px;min-width:0}
body:not(.mobil-gorunum) .ogr-bas-sol > *{margin-top:0 !important;grid-column:1 / -1}
body:not(.mobil-gorunum) .ogr-bas-sol > .fw8{grid-column:1;grid-row:1;white-space:nowrap;font-size:20px !important}
body:not(.mobil-gorunum) .ogr-bas-sol > .tsm{grid-column:2;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.mobil-gorunum) .ogr-bas-etiket{grid-column:3 !important;grid-row:1;white-space:nowrap;padding:2px var(--bosluk-m) !important}
/* b) karşılama mesajı şeridi: tek satır, yarı yükseklik */
body:not(.mobil-gorunum) .hg-serit{padding:2px var(--bosluk-l) !important;margin-bottom:var(--bosluk-m) !important;flex-wrap:nowrap !important}
body:not(.mobil-gorunum) .hg-serit > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.mobil-gorunum) .hg-serit .btn{min-height:var(--buton-yukseklik);padding-top:2px;padding-bottom:2px}
/* c) öğrenci kartı: küçük fotoğraf; rozetler ad satırının yanına akar; künye altta */
body:not(.mobil-gorunum) .stu-detay-bas{--kisi-foto:64px}
body:not(.mobil-gorunum) .stu-detay-bas .photo .ogrfoto{width:var(--kisi-foto)}
body:not(.mobil-gorunum) .stu-detay-bas .photo .ogrfoto > button{width:100%;min-height:var(--buton-yukseklik) !important;
white-space:normal !important;line-height:1.15;padding:2px 4px !important}
body:not(.mobil-gorunum) .stu-kart{margin-bottom:var(--bosluk-s) !important;align-items:center !important}
body:not(.mobil-gorunum) .stu-bilgi{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--bosluk-m);row-gap:2px}
/* satır 1: ad (uzunsa …) + koç geçmişi özeti · satır 2: rozetler · satır 3: künye */
body:not(.mobil-gorunum) .stu-bilgi > .stu-ad{order:1;flex:1 1 0;min-width:0;display:flex;align-items:center;font-size:19px !important}
body:not(.mobil-gorunum) .stu-ad > .stu-ad-metin{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.mobil-gorunum) .stu-ad > span:first-child:not(.stu-ad-metin), body:not(.mobil-gorunum) .stu-ad > button{flex-shrink:0}
body:not(.mobil-gorunum) .stu-bilgi > [id^="kaKartGecmis_"]{order:2;flex:none}
body:not(.mobil-gorunum) .stu-bilgi > .stu-rozet{order:3;flex-basis:100%;margin-top:0 !important}
body:not(.mobil-gorunum) .stu-bilgi > [id^="kaKartGecmis_"]:has(details[open]){flex-basis:100%}
body:not(.mobil-gorunum) .stu-bilgi > .kunye-serit{order:4;flex-basis:100%;margin-top:0}
body:not(.mobil-gorunum) .stu-bilgi > .stu-kisa-kunye{order:3;flex-basis:100%} /* STUBASKISA-03EKI — ad satırının ALTINDA */
/* d) iki sekme çubuğu: dikey dolgu azalır, dokunma hedefi 32px korunur */
body:not(.mobil-gorunum) .stu-detay-bas .rt{padding-top:3px}
body:not(.mobil-gorunum) .stu-detay-bas .rtb{padding-top:4px;padding-bottom:4px;min-height:var(--buton-yukseklik)}
body:not(.mobil-gorunum) .stu-alt-sekme{margin-bottom:var(--bosluk-m) !important;padding-bottom:var(--bosluk-m) !important}
body:not(.mobil-gorunum) .stu-alt-sekme > button{padding-top:3px !important;padding-bottom:3px !important;min-height:var(--buton-yukseklik)}
body:not(.mobil-gorunum) #stub{padding:var(--bosluk-m) var(--bosluk-l)}
/* e) "Öğrenci Bilgileri" başlık satırı */
body:not(.mobil-gorunum) .stu-bilgi-bas{margin-bottom:var(--bosluk-m) !important}
body:not(.mobil-gorunum) .stu-bilgi-bas > button{padding-top:4px !important;padding-bottom:4px !important;min-height:var(--buton-yukseklik)}
/* alt sekmeler (Öğrenci/Veli/Kayıt/Özel) ile "Öğrenci Bilgileri + Kaydet" AYNI SATIRDA */
body:not(.mobil-gorunum) #stub:has(> .stu-bilgi-bas){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--bosluk-l)}
body:not(.mobil-gorunum) #stub:has(> .stu-bilgi-bas) > *{grid-column:1 / -1}
body:not(.mobil-gorunum) #stub:has(> .stu-bilgi-bas) > .stu-alt-sekme,
body:not(.mobil-gorunum) #stub:has(> .stu-bilgi-bas) > .stu-bilgi-bas{grid-row:1;align-items:center;margin-bottom:var(--bosluk-m) !important;
padding-bottom:var(--bosluk-s) !important;border-bottom:1px solid var(--border)}
body:not(.mobil-gorunum) #stub:has(> .stu-bilgi-bas) > .stu-alt-sekme{grid-column:1}
body:not(.mobil-gorunum) #stub:has(> .stu-bilgi-bas) > .stu-bilgi-bas{grid-column:2;flex-wrap:nowrap !important;min-width:0}
body:not(.mobil-gorunum) .stu-bilgi-bas > div{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.mobil-gorunum) .stu-bilgi-bas > button{flex-shrink:0}
/* KATLI BÖLÜM = ÇİP: başlığı görünür, tıklayınca açılır ve tam genişlik karta döner (sınıf
kalkınca kural düşer). Sütunda yan yana dizilir: 6 katlı başlık 6×54px yerine ~2-3 satır. */
body:not(.mobil-gorunum) .form-kolon > .card.form-katli{display:inline-block;width:auto;vertical-align:top;
margin:0 var(--bosluk-s) var(--bosluk-s) 0 !important;padding:2px var(--bosluk-m) !important}
/* SOL LİSTE kalan alana göre (STUTAM-26AGU'nun ekran boyu 100dvh-24px kuralı): üstteki başlık/bant
yüksekliği JS'ten gelir (--stu-cift-ust, _stuListeUstAyarla). Eskiden liste sayfayı her zaman
~180px taşırıyordu. Liste KENDİ içinde kaymaya devam eder (sanal kaydırma aynı). */
body:not(.mobil-gorunum) .stu-cift .list-panel{max-height:max(360px, calc(100dvh - var(--stu-cift-ust, 0px) - 50px))}
/* form: alan yüksekliği masaüstü dokunma hedefine (32px) iner (yazı 16px AYNI); bölüm başlığı altı boşluk azalır */
body:not(.mobil-gorunum) .form-kolon{--form-yukseklik:var(--buton-yukseklik)}
body:not(.mobil-gorunum) .form-kolon .form-bolum-bas{margin-bottom:2px}
/* 📐 EKRANSIKIS2-26EYL — ALAN ARALIKLARI (ölçüldü: alan satırı başına ~10px). Yazı boyutları AYNI:
etiket 12px, kutu 16px. Kutu 36→32px = masaüstü dokunma hedefi; satır içi stil yazıldığı için !important. */
body:not(.mobil-gorunum) .form-kolon .fg > label{line-height:1.15 !important;margin-bottom:0 !important}
body:not(.mobil-gorunum) .form-kolon .fg input:not([type=checkbox]):not([type=radio]),
body:not(.mobil-gorunum) .form-kolon .fg select{padding-top:5px !important;padding-bottom:5px !important}
body:not(.mobil-gorunum) .form-kolon .form-bolum-govde{row-gap:2px !important}
body:not(.mobil-gorunum) .form-kolon > .card{padding-top:6px !important;padding-bottom:6px !important;margin-bottom:3px !important}
/* formun son satırı (Mesaj Geçmişi / Karşılama): tek satır; aynı işlevli "Bilgileri Kaydet" başlık satırında
zaten var → masaüstünde TEKRARI gizlenir (işlev kaybı YOK). Mobilde iki düğme de durur. */
body:not(.mobil-gorunum) .stu-bilgi-bas ~ .form-kolon-kap .form-kolon-son > div{margin-top:0 !important}
body:not(.mobil-gorunum) .stu-bilgi-bas ~ .form-kolon-kap .form-kolon-son button{padding-top:4px !important;padding-bottom:4px !important;min-height:var(--buton-yukseklik)}
body:not(.mobil-gorunum) .stu-bilgi-bas ~ .form-kolon-kap .form-kolon-son button[onclick^="ogrenciProfilKaydet"]{display:none}
/* a) başlık düğmeleri (Yeni Kayıt / Diğer / Rapor): dikey dolgu azalır, 32px korunur */
body:not(.mobil-gorunum) .ogr-bas > button{padding-top:6px !important;padding-bottom:6px !important;min-height:var(--buton-yukseklik)}
body:not(.mobil-gorunum) .stu-cift #stub{padding-top:var(--bosluk-s);padding-bottom:var(--bosluk-s)}
}
/* 3. YÖNTEM (EKRANSIKIS-25EYL, ölçüldü: yalnız 1. yöntemle 1366×768'de +10px kalıyordu) — dar masaüstünde
sol öğrenci listesi 300→240px; ayrıntı paneli 60px genişler, künye/rozet satırları daha az kırılır.
≥1600px'te liste 300px kalır (orada yer var). Liste satırı adı 2 satıra kırar (SANAL2-26AGU), kesmez. */
@media(min-width:1024px) and (max-width:1599px){
body:not(.mobil-gorunum) .stu-cift .list-panel{width:240px}
}
/* ═══ 📐 EKRANSABLON-30EYL — ORTAK EKRAN ŞABLONU (tasarım: "Şablon kuralları") ═══
Plan + ölçüm: docs/EKRAN-SABLON-PLAN.md · EKRANSTD-26EYL (.std-*) katmanının ÜSTÜNE kurulur;
ikinci sistem AÇILMAZ — yeni sınıflar .std-* ailesinde, ölçüler :root ölçeğinde.
İKİ KATMAN:
1) KABUK (masaüstü, TÜM ekranlar): üst çubuk 52px · alt durum şeridi yok (rozetler üst
çubukta) · "?" üst çubukta · kullanıcı menüsü. JS: ustCubukKur() (altSeritKur yerine).
2) ŞABLONA GEÇMİŞ SAYFA (body.std-sablon, masaüstü): yazı 14 · düğme 34 · tasarım renkleri.
Hangi sayfanın geçtiği TEK YERDE: STD_SABLON_SAYFALAR (show() sınıfı koyar).
Sayfalar gruplar hâlinde eklenir — bir sayfa eklenmeden onun görünümü DEĞİŞMEZ.
⚠️ MOBİL MUAF: kabuk kuralları min-width:861px + body:not(.mobil-gorunum) altında. */
:root{ --yazi-sayfa:20px; --yazi-bolum:16px; --yazi-tablo:13.5px; --yazi-yardimci:12.5px; --ust-cubuk-h:52px; }
@media(max-width:768px){ :root{ --yazi-sayfa:18px; } }
/* ── 1) KABUK — üst çubuk 52px ─────────────────────────────────────────── */
@media(min-width:861px){
body:not(.mobil-gorunum) .top{height:var(--ust-cubuk-h);padding:0 14px;gap:10px;justify-content:flex-start;background:var(--card)}
body:not(.mobil-gorunum) .top h1#pt{font-size:var(--yazi-bolum);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:120px;max-width:280px;flex:0 1 auto;order:1}
body:not(.mobil-gorunum) .top .tba{display:contents}
body:not(.mobil-gorunum) .top .ust-geri{order:0}
body:not(.mobil-gorunum) .top .ust-ev{order:0}
body:not(.mobil-gorunum) .top #hizliAraBtn{order:2}
body:not(.mobil-gorunum) .top .ust-bosluk{order:3;flex:1 1 auto;min-width:8px}
body:not(.mobil-gorunum) .top #haftaSinavPill,
body:not(.mobil-gorunum) .top #lgsCountdown,
body:not(.mobil-gorunum) .top #yksCountdown{order:4}
body:not(.mobil-gorunum) .top #altSerit{order:5}
body:not(.mobil-gorunum) .top #ustYardim{order:6}
body:not(.mobil-gorunum) .top #ustKullanici{order:7}
/* ikon düğmesi (geri, ?) — 34px kare */
.top .ust-ikon{width:34px;height:34px;min-height:34px;flex:0 0 34px;padding:0 !important;border-radius:8px !important;border:1px solid var(--border) !important;background:var(--card) !important;color:var(--text) !important;display:inline-flex;align-items:center;justify-content:center;font-size:16px !important;font-weight:700 !important;cursor:pointer;box-shadow:none !important}
/* arama — arama kutusu görünümü (tıklayınca Ctrl+K penceresi) */
body:not(.mobil-gorunum) .top #hizliAraBtn{height:34px;min-width:34px;max-width:320px;flex:0 1 200px;white-space:nowrap;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:0 10px !important;border-radius:8px !important;border:1px solid var(--border) !important;background:var(--bg) !important;color:var(--text2) !important;box-shadow:none !important;font-weight:500 !important;font-size:13.5px !important;text-align:left}
body:not(.mobil-gorunum) .top #hizliAraBtn > span{margin-left:auto !important;background:var(--card) !important;border:1px solid var(--border);color:var(--text2)}
/* ROZETLER — eski alt şerit (dönem · yedek · WA · senkron) + sınav geri sayımı.
Güncelleyiciler AYNI id'leri buluyor; yalnız boy/biçim burada. Renk (durum) korunur. */
body:not(.mobil-gorunum) .top #altSerit{position:static;left:auto;right:auto;bottom:auto;display:flex;flex-wrap:nowrap;gap:6px;padding:0;background:none;border:0;font-size:var(--yazi-yardimci);z-index:auto;min-width:0;overflow:hidden}
body:not(.mobil-gorunum) .top #altSerit > button,
body:not(.mobil-gorunum) .top #haftaSinavPill,
body:not(.mobil-gorunum) .top #lgsCountdown,
body:not(.mobil-gorunum) .top #yksCountdown{height:28px;min-height:28px;padding:0 10px !important;border-radius:14px !important;font-size:var(--yazi-yardimci) !important;font-weight:700 !important;box-shadow:none !important;white-space:nowrap;flex:0 1 auto;min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;line-height:28px;vertical-align:middle}
/* KULLANICI MENÜSÜ — yazı boyutu · saat · rol · bağlantı testi · çıkış */
.top #ustKullanici{position:relative;flex:0 0 auto}
.top #ustKullaniciBtn{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 8px 0 4px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:220px}
.top #ustKullaniciBtn:hover,.top #ustKullanici.acik #ustKullaniciBtn{border-color:var(--border);background:var(--bg)}
.top #ustKullaniciBtn .ust-av{width:28px;height:28px;border-radius:50%;background:#DDE5FB;color:#2446C7;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 28px}
.top #ustKullaniciBtn .ust-ad{overflow:hidden;text-overflow:ellipsis;max-width:130px}
@media(max-width:1439px){ .top #ustKullaniciBtn .ust-ad{display:none} }
.top #ustKullaniciMenu{display:none;position:absolute;right:0;top:40px;z-index:400;min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(20,30,50,.14);padding:8px;flex-direction:column;gap:6px}
.top #ustKullanici.acik #ustKullaniciMenu{display:flex}
.top #ustKullaniciMenu > *{width:100%}
.top #ustKullaniciMenu > button{justify-content:flex-start;min-height:34px}
.top #ustKullaniciMenu .ust-menu-satir{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--yazi-yardimci);color:var(--text2)}
/* alt şerit yeri boşaldı: içerik alt dolgusu 72 → 16 */
body:not(.mobil-gorunum) .pc{padding-bottom:16px}
/* sağ-orta yüzen "?" masaüstünde üst çubuğa taşındı (telefonda yerinde) */
body.ust-sablon:not(.mobil-gorunum) #isaretRehberiBtn{display:none !important}
/* sağ-orta yüzen 🏠 de masaüstünde gizli: üst çubukta ← ve sol menüde Ana Menü var; içeriğin (Düzenle düğmeleri) üstüne biniyordu */
body.ust-sablon:not(.mobil-gorunum) #anaSayfaBtn{display:none !important}
}
/* ── 2) ŞABLONA GEÇMİŞ SAYFA — ölçek + renk (yalnız STD_SABLON_SAYFALAR) ── */
@media(min-width:861px){
body.std-sablon:not(.mobil-gorunum){
--yazi-normal:14px; --yazi-baslik:16px; --buton-yukseklik:34px; --form-yukseklik:34px;
--accent:#2446C7; --info:#2446C7; --text:#1B2230; --text2:#5B6474; --bg:#F4F6FA; --border:#E3E7EF;
--success:#1E7A45; --warning:#B45309; --danger:#B42318;
}
}
/* ── 3) ORTAK BİLEŞENLER (her yerde kullanılabilir) ───────────────────── */
/* Başlık satırı: sol başlık/sekmeler · sağ eylemler · TEK satır (kural 2) */
.std-baslik{display:flex;align-items:center;gap:var(--bosluk-m);flex-wrap:wrap;margin-bottom:var(--bosluk-l)}
.std-baslik .std-bosluk{flex:1 1 auto}
.std-baslik-ad{font-size:var(--yazi-sayfa);font-weight:700;letter-spacing:-.2px;margin:0}
/* Alt çizgili sekmeler (adımlar) */
.std-sekmeler{display:flex;align-items:stretch;gap:0 var(--bosluk-xl);border-bottom:1px solid var(--border);flex-wrap:wrap;min-width:0}
.std-sekme{height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 2px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;font:inherit;font-size:var(--yazi-normal);font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap}
.std-sekme:hover{color:var(--text)}
.std-sekme.on{color:var(--accent);border-bottom-color:var(--accent)}
.std-sekme.tamam:not(.on){color:var(--success)}
.std-sekme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Parçalı seçici (iki/üç seçenek) */
.std-segment{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card);flex:0 0 auto}
.std-segment > button{height:var(--buton-yukseklik);min-height:var(--buton-yukseklik);padding:0 var(--bosluk-xl);border:0;border-left:1px solid var(--border);background:transparent;font:inherit;font-size:var(--yazi-normal);font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap}
.std-segment > button:first-child{border-left:0}
.std-segment > button.on{background:var(--accent);color:#fff}
/* Uyarı ŞERİDİ — tek satır, çözüm bağlantısı içinde (kural 7). Tam metin title'da. */
.std-serit{display:flex;align-items:center;gap:var(--bosluk-m);min-height:34px;padding:var(--bosluk-xs) var(--bosluk-l);margin-bottom:var(--bosluk-m);border-radius:8px;border:1px solid #F3D3A6;background:#FFF3E3;color:#6E3B00;font-size:13px;line-height:1.3}
.std-serit .std-serit-metin{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.std-serit .std-serit-eylem{flex:0 0 auto;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0 var(--bosluk-s);min-height:28px;white-space:nowrap}
.std-serit.hata{border-color:#F0B8B1;background:#FDECEA;color:#8A1C12}
.std-serit.bilgi{border-color:#C9D6F6;background:#EEF3FF;color:#1F3FAE}
/* Durum rozetleri */
.std-rozet{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:600;white-space:nowrap;background:#EEF0F3;color:#4A5262}
.std-rozet.bekliyor{background:#E6EDFF;color:#1F3FAE}
.std-rozet.dikkat{background:#FFF1E0;color:#8A4300}
.std-rozet.tamam{background:#E3F4EA;color:#1A6B3C}
.std-rozet.hata{background:#FDE7E4;color:#9B1C12}
/* KAYDET ÇUBUĞU — her zaman görünür (kural 5): masaüstü içerik kaydırıcısının altına yapışır,
telefonda ekrana sabit (alt menünün üstünde). Sağ altta global kayıt balonu için yer bırakılır. */
.std-kaydet{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:var(--bosluk-m);flex-wrap:wrap;margin-top:var(--bosluk-l);padding:var(--bosluk-m) 200px var(--bosluk-m) var(--bosluk-l);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 -4px 14px rgba(20,30,50,.07)}
.std-kaydet > .btn{min-height:var(--buton-yukseklik)}
[data-yuva-goster]{display:block !important} /* TITREME-14EKI — yeniden çizimde boş gelen yuva dolana kadar yerini tutar (YUVAKORU) */
@media(max-width:860px){
.std-kaydet{position:fixed;left:0;right:0;bottom:calc(var(--mob-nav-h,58px) + env(safe-area-inset-bottom,0px));z-index:180;margin:0;border-radius:0;border-width:1px 0 0;padding:var(--bosluk-m) var(--bosluk-l)}
.std-kaydet > .btn{flex:1 1 auto;min-height:44px;justify-content:center}
.pc:has(.std-kaydet){padding-bottom:calc(var(--mob-nav-h,58px) + 76px + env(safe-area-inset-bottom,0px)) !important}
/* sabit Kaydet çubuğunun üstüne binen yüzen düğmeler (RAALT deseni): ev/yardım gizlenir, kayıt balonu çubuğun üstüne çıkar */
body:has(.std-kaydet) #anaSayfaBtn,body:has(.std-kaydet) #isaretRehberiBtn,body:has(.std-kaydet) #yukariCikBtn{display:none !important}
body:has(.std-kaydet) #kaydetFloat{bottom:calc(var(--mob-nav-h,58px) + 70px + env(safe-area-inset-bottom,0px)) !important}
}
/* ═══ ISLEMCUBUGU-12EKI — ORTAK İŞLEM ÇUBUĞU (EBOS düzeni, sağ alt) ═══
Sıra sabit: ◀ ▶ | Yeni · Sil · Önizle · Kaydet | Kapat. Yalnız simge; ad + kısayol fareyle üstüne gelince.
Çubuk sayfa HTML'inin içinde gelir (ISLEMCUBUGU.html) → sayfa değişince kendiliğinden kalkar. */
#islemCubugu{position:fixed;right:16px;bottom:16px;z-index:150;display:flex;align-items:center;gap:4px;padding:5px 7px;background:var(--card);border:1px solid var(--border2);border-radius:14px;box-shadow:0 6px 24px rgba(15,23,42,.18)}
#islemCubugu .ic-ayr{width:1px;align-self:stretch;margin:3px 3px;background:var(--border)}
#islemCubugu .ic-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin:0;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;font:inherit;color:var(--text)}
#islemCubugu .ic-btn:hover:not([aria-disabled="true"]){background:var(--bg2);border-color:var(--border)}
#islemCubugu .ic-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#islemCubugu .ic-btn[aria-disabled="true"]{cursor:not-allowed}
#islemCubugu .ic-btn[aria-disabled="true"] .ic-s{opacity:.32;filter:grayscale(.6)}
#islemCubugu .ic-s{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
#islemCubugu .ic-s svg{width:16px;height:16px;display:block}
#islemCubugu .ic-s.yeni{background:#10b981}
#islemCubugu .ic-s.sil{background:#ef4444}
#islemCubugu .ic-s.onz{background:#7c5cfc}
#islemCubugu .ic-s.kay{background:#3b6fd1}
#islemCubugu .ic-s.kap{background:#64748b}
#islemCubugu .ic-s.gez{background:transparent;color:var(--text2);border:1.5px solid var(--border2)}
#islemCubugu .ic-btn.mesgul .ic-s.kay{opacity:1;filter:none;animation:icDon 1s linear infinite}
@keyframes icDon{to{transform:rotate(360deg)}}
#pc:has(#islemCubugu) .fb-cubuk{display:none !important}
/* ISLEMCUBUGU-12EKI/3 — tablo satır seçimi (satıra tıkla = seç, çift tıkla = düzenle) */
tr.ic-satir{cursor:pointer}
tr.ic-satir:hover > td{background:rgba(59,111,209,.05)}
tr.ic-secili > td,tr.ic-secili:hover > td{background:rgba(59,111,209,.13) !important}
tr.ic-secili > td:first-child{box-shadow:inset 3px 0 0 #3b6fd1}
/* ISLEMMENU-13EKI — "İşlemler" açılır menüsü: tek düğme, kategorili liste, sayfayı itmez */
.ic-menu{position:relative;display:inline-block;vertical-align:middle}
.ic-menu > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--buton-yukseklik,34px);padding:0 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer;user-select:none;white-space:nowrap}
.ic-menu > summary::-webkit-details-marker{display:none}
.ic-menu > summary::after{content:'▾';font-size:11px;color:var(--text2)}
.ic-menu[open] > summary{border-color:var(--accent);color:var(--accent)}
.ic-menu[open] > summary::after{content:'▴'}
.ic-menu > summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ic-menu-kutu{position:absolute;top:calc(100% + 6px);left:0;z-index:160;min-width:250px;max-width:340px;max-height:min(70vh,560px);overflow-y:auto;background:var(--card);border:1px solid var(--border2,var(--border));border-radius:12px;box-shadow:0 10px 32px rgba(15,23,42,.22);padding:6px}
.ic-menu.sag .ic-menu-kutu,.ic-menu.sag-oto .ic-menu-kutu{left:auto;right:0}
/* ⬅️ ISLEMMENUSOL-19EKI — sağa hizalı menü SOL kenardan taşarsa sola hizalanır.
Eski kod yalnız SAĞ taşmayı düzeltiyordu; araç çubuğu alt satıra kayıp düğme
sol kenara gelince 250px'lik kutu ekran dışında kalıyor, içeriği okunmuyordu. */
.ic-menu.sol-oto .ic-menu-kutu{left:0;right:auto}
/* hiçbir yöne sığmıyorsa (dar telefon) kutu ekran genişliğine kırpılır */
.ic-menu-kutu{min-width:min(250px,calc(100vw - 24px));max-width:min(340px,calc(100vw - 24px))}
.ic-menu-grup{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3,var(--text2));padding:8px 10px 3px}
.ic-menu-oge{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ic-menu-oge:hover,.ic-menu-oge:focus-visible{background:var(--bg2);outline:none}
.ic-menu-oge .ic-menu-ik{width:20px;text-align:center;flex:none}
.ic-menu-tehlike .ic-menu-grup{color:#dc2626}
.ic-menu-tehlike .ic-menu-oge{color:#dc2626}
.ic-menu-tehlike{border-top:1px solid var(--border);margin-top:4px;padding-top:2px}
@media(max-width:860px){.ic-menu-kutu{position:fixed;left:8px !important;right:8px !important;top:auto;bottom:calc(var(--mob-nav-h,58px) + 72px);max-width:none;max-height:60vh}}
/* ISLEMCUBUGU-12EKI/5 — kutu biçimli satırlar (div) için aynı seçim */
div.ic-satir{cursor:pointer}
div.ic-satir:hover{outline:1px solid rgba(59,111,209,.35)}
div.ic-secili,div.ic-secili:hover{background:rgba(59,111,209,.13) !important;box-shadow:inset 3px 0 0 #3b6fd1;outline:none}
#islemCubugu .ic-btn.kirli .ic-s.kay{background:#ea580c;box-shadow:0 0 0 3px rgba(234,88,12,.35);animation:icNabiz 1.6s ease-in-out infinite}
@keyframes icNabiz{50%{box-shadow:0 0 0 6px rgba(234,88,12,.12)}}
@media (prefers-reduced-motion:reduce){#islemCubugu .ic-btn.kirli .ic-s.kay,#islemCubugu .ic-btn.mesgul .ic-s.kay{animation:none}}
/* ipucu — ad + kısayol + açıklama (title KULLANILMAZ: tarayıcı ipucu gecikmeli ve kısayolu göstermez) */
#islemCubugu .ic-ip{position:absolute;bottom:calc(100% + 8px);right:0;min-width:150px;max-width:260px;width:max-content;padding:7px 10px;border-radius:8px;background:#0f172a;color:#f8fafc;font-size:12.5px;font-weight:500;line-height:1.35;text-align:left;white-space:normal;pointer-events:none;opacity:0;transition:opacity .12s;z-index:2}
#islemCubugu .ic-ip b{display:block;font-weight:700;font-size:13px}
#islemCubugu .ic-ip kbd{font-family:inherit;font-size:11px;font-weight:600;border:1px solid rgba(248,250,252,.5);border-radius:4px;padding:0 4px;margin-left:6px}
#islemCubugu .ic-btn:hover .ic-ip,#islemCubugu .ic-btn:focus-visible .ic-ip{opacity:1}
/* sayfanın kendi Kaydet düğmesi çubuğa devredildi: görünmez ama yerinde (sekmeye özel kayıt mantığı korunur) */
#pc:has(#islemCubugu) [data-ic="kaydet"]{display:none !important}
/* ISLEMCUBUGU-12EKI/11 — çubuğa devredilen tüm sayfa düğmeleri gizli; yapışkan adım şeridi çubuğa yer bırakır, boş kalırsa hiç görünmez */
#pc:has(#islemCubugu) [data-ic]:not(#islemCubugu *){display:none !important}
#pc:has(#islemCubugu) .std-kaydet{padding-right:380px}
#pc:has(#islemCubugu) .std-kaydet:not(:has(> :not([data-ic]))),#pc:has(#islemCubugu) .ic-hedef-serit:not(:has(> :not([data-ic]))){display:none !important}
@media(max-width:860px){#pc:has(#islemCubugu) .std-kaydet{padding-right:var(--bosluk-l);bottom:calc(var(--mob-nav-h,58px) + 68px + env(safe-area-inset-bottom,0px))}}
#pc:has(#islemCubugu){padding-bottom:76px !important}
/* sağ alttaki yüzen düğmeler çubuğun üstüne binmesin */
body:has(#islemCubugu) #yukariCikBtn,body:has(#islemCubugu) #kaydetFloat{display:none !important}
body.modal-acik #kaydetFloat{display:none !important} /* MODALSIG-17EKI — açık pencerenin Ekle/Kaydet düğmelerinin üstüne binmesin (pencere kapanınca geri gelir) */
/* TELEFON — alt menünün hemen üstünde, ekran boyu, düğmeler 44px */
@media(max-width:860px){
#islemCubugu{left:8px;right:8px;bottom:calc(var(--mob-nav-h,58px) + 8px + env(safe-area-inset-bottom,0px));justify-content:space-between;z-index:185}
#islemCubugu .ic-btn{width:44px;height:44px}
#islemCubugu .ic-ip{display:none}
#pc:has(#islemCubugu){padding-bottom:calc(var(--mob-nav-h,58px) + 80px + env(safe-area-inset-bottom,0px)) !important}
body:has(#islemCubugu) #anaSayfaBtn,body:has(#islemCubugu) #isaretRehberiBtn{display:none !important}
}
body.mobil-gorunum #islemCubugu{left:max(8px, calc(50% - 232px));right:max(8px, calc(50% - 232px));bottom:calc(var(--mob-nav-h,58px) + 8px + env(safe-area-inset-bottom,0px));justify-content:space-between;z-index:185}
body.mobil-gorunum #islemCubugu .ic-btn{width:44px;height:44px}
body.mobil-gorunum #islemCubugu .ic-ip{display:none}
body.mobil-gorunum #pc:has(#islemCubugu){padding-bottom:calc(var(--mob-nav-h,58px) + 80px + env(safe-area-inset-bottom,0px)) !important}
body.mobil-gorunum:has(#islemCubugu) #anaSayfaBtn,body.mobil-gorunum:has(#islemCubugu) #isaretRehberiBtn{display:none !important}
/* MOBİLDE TABLO → KART (kural 6):