/* ============================================================
   OKULSIS DESIGN SYSTEM  ·  v2
   Kaynak: _MUH/Listeler.aspx (.muh-listeler) + css/sozlesmeler.css (.soz-page)
   Tüm bileşenler .okulsis kökü altında scope'lanır; böylece master
   sayfa stilleriyle çakışmadan mevcut .aspx ekranlarına gömülebilir.

   TEK KAYNAK: _Mockups/genel/okulsis-ds.css
   Bu dosyayı kopyalamayın — ../genel/okulsis-ds.css olarak referanslayın.
   Kullanım kuralları: _Mockups/genel/KILAVUZ.md
   Canlı bileşen galerisi: _Mockups/genel/index.html

   v2 değişiklikleri (SozlesmeIslemleri mockup'larından devşirildi):
     + .search          — ikonlu arama kutusu
     + .form-footer.sticky / .form-net.lg — sabit alt bar + büyük net tutar
     + .fg-4            — 4 sütunlu form ızgarası
     + .split / .split-list / .split-detail — liste+detay düzeni
     + .row-acts        — tablo satır aksiyonları (Görüntüle/Düzenle/Sil grubu)
     + .modal ailesi    — açılır pencere: .danger (silme onayı, işlemden ÖNCE),
                          .success (kayıt sonucu, işlemden SONRA; .modal-result),
                          .modal-lg (seçim pencereleri). RadWindow karşılığı.
     + .savemsg         — işlem sonucu şeridi (+ .err). Odevler'deki yerel
                          kopyalardan DS'e alındı.
     + .rte / .rte-tools / .rte-body — zengin metin editörü kabuğu (RadEditor
                          yer tutucusu). 2-odevler + odev-degerlendirme'deki
                          mükerrer yerel tanımlardan DS'e alındı.
     + .panel-title / .donut-wrap — 4-ogretmen + 5-ogrenci'deki mükerrer
                          yerel tanımlardan DS'e alındı.
     + .dropzone / .attach — dosya yükleme (bUpload yer tutucusu) + ek dosya
                          satırı. 2-odevler yerelinden DS'e alındı (6-odevlerim
                          de kullanıyor).
     + .combo ailesi    — aranabilir açılır liste (RadComboBox Filter="Contains"
                          yer tutucusu). Davranış: okulsis-ui.js.
     - .btn-sm / .btn-lg — KALDIRILDI. Tüm butonlar TEK BOYUT: 36px (girdilerle
                          hizalı). Inline padding ile küçültmek de yasak.
     - .avatar, .av0–.av5 — KALDIRILDI. Baş harf rozeti adın tekrarıydı;
       listelerde ad zaten hücrede yazılı. Ödev sayfalarının renderer'ı da
       zaten basmıyordu. Kişi görseli: .form-photo / .subject-ico.
   Not: okulsis-print.js de v2 (bkz. dosya başlığı — .stu ve colspan düzeltmeleri).
   ============================================================ */

.okulsis {
  /* --- renk paleti --- */
  --bg:#f1f4f9; --card:#fff; --ink:#0f1b2d; --muted:#64748b; --line:#e6ebf2;
  --title:#255282; --slate:#334155;
  --primary:#2563eb; --primary-d:#1d4ed8; --primary-soft:#e7efff;
  --green:#16a34a; --green-soft:#e7f6ed;
  --amber:#d97706; --amber-soft:#fef3c7;
  --red:#dc2626;   --red-soft:#fef2f2;
  --purple:#7c3aed; --purple-soft:#ede9fe;
  --cyan:#0891b2;  --cyan-soft:#cffafe;
  /* --- kpi vurgu daireleri --- */
  --acc-blue:#bfdbfe; --acc-green:#bbf7d0; --acc-amber:#fde68a; --acc-red:#fecaca; --acc-purple:#ddd6fe; --acc-cyan:#a5f3fc;
  /* --- biçim --- */
  --radius:12px;
  --shadow:0 1px 2px rgba(15,27,45,.06),0 8px 22px rgba(15,27,45,.06);
  --shadow-lg:0 14px 40px rgba(15,27,45,.14);
  /* Legacy tema 'font-family: var(--okulsis-font) !important' ile HER yere Source Sans 3 dayatıyor;
     mockup ise Segoe UI kullanır. Değişkeni .okulsis kapsamında ez -> okulsis-ds ekranları mockup fontuyla birebir aynı. */
  --okulsis-font:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45;
  /* Sayfayı tam kapla: legacy 'body{height:98%}' + .okulsis'te yükseklik olmaması yüzünden gri arka plan
     yalnız içerik kadar oluyordu; min-height ile viewport'u doldurur (tüm .okulsis sayfaları). */
  display:block; min-height:100vh;
}
/* ---------- Ödevler modülü: kurumsal mavi ----------
   Ödevler ekranlarındaki maviler üst bardaki kurumsal maviyle aynı olsun (#255282 —
   bkz. _GNL/Container.aspx; DS'te aynı değer --title olarak da duruyor).
   Token modül kökünde yeniden tanımlanır: .btn-primary'nin yanı sıra sayfa içinde
   var(--primary) kullanan yerler (sayfalama aktif düğmesi, anahtar/switch, seçili
   satır vurgusu) da tek hamlede uyar. .okulsis.okulsis-odev iki sınıflı olduğu için
   .okulsis'teki tanımı kesin olarak ezer.
   Kapsam: _GNL/_OdevTakip altındaki DS ekranlarının kökleri (okulsis-odev sınıfı).

   TEK RENK KODU: #255282. Hem --primary hem --primary-d bu değere ayarlanır, çünkü DS
   .btn-primary'de kenarlığı var(--primary-d)'den alıyor; farklı bir ton verilirse buton
   üst bardan koyu görünür. Koyulaşan hover/active durumu için ikinci bir renk kodu
   TANIMLANMAZ, aynı renkten brightness ile türetilir. */
.okulsis.okulsis-odev { --primary:#255282; --primary-d:#255282; }
.okulsis.okulsis-odev .btn-primary {
  background:#255282; border-color:#255282; color:#fff;
  /* rgba(37,82,130) = #255282 — gölge de aynı renkten */
  box-shadow:0 4px 12px rgba(37,82,130,.22);
}
.okulsis.okulsis-odev .btn-primary:hover { background:#255282; filter:brightness(.92); }
.okulsis.okulsis-odev .btn-primary:active { background:#255282; filter:brightness(.86); }

/* ---------- Ödevler modülü: giriş kutularında TEK renk mantığı ----------
   Tüm kutucuklar (metin, tarih, combo, arama, textarea) BEYAZ zemin + ince DS çerçevesi;
   sayfada krem/sarı ton kalmaz — tarayıcının autofill vurgusu da beyaza sabitlenir.
   Salt okunur alanlar pasif tonunu (#eef2f7) korur ki düzenlenemez oldukları anlaşılsın. */
.okulsis.okulsis-odev .fv input,
.okulsis.okulsis-odev .fv select,
.okulsis.okulsis-odev .fv textarea,
.okulsis.okulsis-odev .field input,
.okulsis.okulsis-odev .field select,
.okulsis.okulsis-odev .field textarea,
.okulsis.okulsis-odev .combo-btn,
.okulsis.okulsis-odev .combo-search,
.okulsis.okulsis-odev .daterange input,
/* İşaretli/vurgulu (.on) satır kendi mavi tonunu korur — yalnız nötr olanlar beyazlar. */
.okulsis.okulsis-odev .check-row:not(.on) { background:#fff; background-image:none; }
.okulsis.okulsis-odev .fv input[readonly],
.okulsis.okulsis-odev .fv input.ro { background:#eef2f7; }
.okulsis.okulsis-odev input:-webkit-autofill,
.okulsis.okulsis-odev input:-webkit-autofill:hover,
.okulsis.okulsis-odev input:-webkit-autofill:focus,
.okulsis.okulsis-odev select:-webkit-autofill,
.okulsis.okulsis-odev textarea:-webkit-autofill {
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
}

.okulsis, .okulsis * { box-sizing:border-box; }
.okulsis .wrap { padding:14px 22px 40px; }
.okulsis .wrap-narrow { max-width:1180px; margin:0 auto; }

/* ---------- Başlık şeridi ---------- */
.okulsis .topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.okulsis h1.title { font-size:22px; font-weight:800; margin:0; color:var(--title); }
.okulsis .subtitle { font-size:13px; color:var(--muted); margin:4px 0 0; }
.okulsis .top-actions { display:flex; gap:8px; flex-wrap:wrap; }
.okulsis .crumb { font-size:12px; color:var(--muted); margin:0 0 2px; }

/* ---------- Butonlar ---------- */
/* TEK BOYUT: tüm aksiyon butonları 36px yüksekliktedir — .field input/select ve
   .combo-btn ile birebir hizalanır. Boy varyantı YOKTUR (.btn-sm/.btn-lg v2'de
   kaldırıldı); inline padding ile de küçültmeyin. Bileşen içi mikro kontroller
   (.rte-tools button, .pg, .seg button) .btn değildir, kendi boyutlarını korur. */
.okulsis .btn { border:0; border-radius:9px; height:36px; padding:0 16px; font-weight:600; cursor:pointer; font-family:inherit; font-size:13.5px; display:inline-flex; gap:7px; align-items:center; white-space:nowrap; text-decoration:none; transition:background .15s,border-color .15s,box-shadow .15s; }
.okulsis .btn-primary { background:var(--primary); color:#fff; border:1px solid var(--primary-d); box-shadow:0 4px 12px rgba(37,99,235,.22); }
.okulsis .btn-primary:hover { background:var(--primary-d); }
.okulsis .btn-secondary { background:#fff; border:1px solid var(--line); color:var(--slate); }
.okulsis .btn-secondary:hover { background:#f6f9fe; border-color:#c7d2e0; }
.okulsis .btn-ghost { background:transparent; border:1px solid transparent; color:var(--muted); }
.okulsis .btn-ghost:hover { background:#eef2f8; color:var(--slate); }
.okulsis .btn-danger { background:#fff; border:1px solid #fca5a5; color:var(--red); }
.okulsis .btn-danger:hover { background:var(--red-soft); }
.okulsis .btn-success { background:var(--green); color:#fff; border:1px solid #15803d; box-shadow:0 4px 12px rgba(22,163,74,.22); }
.okulsis .btn-success:hover { background:#15803d; }
.okulsis .btn:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- Filtre çubuğu ---------- */
.okulsis .filterbar { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 16px; margin-bottom:14px; display:grid; gap:12px; align-items:end; }
.okulsis .field label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:5px; }
.okulsis .field select, .okulsis .field input { width:100%; height:36px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; font-size:14px; font-family:inherit; color:var(--ink); outline:none; }
.okulsis .field textarea { width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; font-size:14px; font-family:inherit; color:var(--ink); outline:none; resize:vertical; }
.okulsis .field input:focus, .okulsis .field select:focus, .okulsis .field textarea:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* Aralık alanı (tarih/saat): başlangıç ve bitiş AYRI kutulardır, aralarında
   tire. Her kutu kendi kenarlığını ve odak halkasını .field input'tan devralır;
   burada yalnızca köşeler yumuşatılır ve esneme/taşma ayarlanır. */
.okulsis .daterange { display:flex; align-items:center; gap:6px; }
.okulsis .daterange input { flex:1; min-width:0; width:auto; border-radius:10px; }
.okulsis .daterange .sep { flex:0 0 auto; color:var(--muted); }
/* Native takvim/saat düğmesi: varsayılan koyu ikon kutu içinde ağır duruyor. */
.okulsis .daterange input::-webkit-calendar-picker-indicator { opacity:.5; cursor:pointer; padding:0; transition:opacity .15s; }
.okulsis .daterange input:hover::-webkit-calendar-picker-indicator,
.okulsis .daterange input:focus::-webkit-calendar-picker-indicator { opacity:1; }
.okulsis .fb-apply .btn { width:100%; height:36px; justify-content:center; }

/* ---------- Arama kutusu ---------- */
.okulsis .search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:0 11px; height:36px; min-width:220px; }
.okulsis .search:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.okulsis .search .ico { color:var(--muted); font-size:14px; flex-shrink:0; }
.okulsis .search input { flex:1; min-width:0; border:0; background:transparent; outline:0; font-size:14px; font-family:inherit; color:var(--ink); height:100%; }
.okulsis .search input::placeholder { color:#94a3b8; }
.okulsis .search .clear { color:var(--muted); cursor:pointer; font-size:15px; flex-shrink:0; }
.okulsis .search .clear:hover { color:var(--slate); }
.okulsis .search-grow { flex:1; }

/* ---------- Aranabilir açılır liste (combo) ---------- */
/* Uzun listeler (sınıf, ders, öğrenci, personel) için: tıklayınca içinde arama
   kutusu olan panel açılır. Gerçek ekrandaki karşılığı RadComboBox
   (Filter="Contains" / EnableLoadOnDemand) — mockup'ta yerini işaretler.
   Davranış tek kaynaktan gelir: ../genel/okulsis-ui.js (sayfaya ekleyin).
   Az seçenekli listelerde (≤ ~8) düz <select> yeterlidir, combo kullanmayın. */
.okulsis .combo { position:relative; }
.okulsis .combo-btn { width:100%; height:36px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; font-size:14px; font-family:inherit; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; }
.okulsis .combo-btn:focus { outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.okulsis .combo.open .combo-btn { border-color:var(--primary); background:#fff; }
.okulsis .combo.is-disabled { opacity:.6; }
.okulsis .combo.is-disabled .combo-btn { cursor:not-allowed; background:#f1f5f9; color:var(--muted); box-shadow:none; }
.okulsis .combo.is-disabled .combo-caret { opacity:.5; }
.okulsis .combo-val { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okulsis .combo-caret { color:var(--muted); font-size:11px; flex-shrink:0; transition:transform .15s; }
.okulsis .combo.open .combo-caret { transform:rotate(180deg); }
.okulsis .combo-pop { position:absolute; top:calc(100% + 4px); left:0; right:0; min-width:200px; z-index:40; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow-lg); overflow:hidden; }
.okulsis .combo-search { display:flex; align-items:center; gap:7px; padding:8px 10px; border-bottom:1px solid var(--line); background:#f8fafc; }
.okulsis .combo-search .ico { color:var(--muted); font-size:13px; flex-shrink:0; }
.okulsis .combo-search input { flex:1; min-width:0; border:0; background:transparent; outline:0; font-size:13.5px; font-family:inherit; color:var(--ink); }
.okulsis .combo-list { max-height:220px; overflow-y:auto; padding:4px 0; }
.okulsis .combo-opt { padding:7px 12px; font-size:13.5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okulsis .combo-opt:hover { background:#f8fafc; }
/* color/font-weight sıfırlaması: commonOrginal.css'teki genel ".active" kuralı
   (koyu kırmızı + kalın) klavyeyle gezilen seçeneğe sızıyordu. */
.okulsis .combo-opt.active { background:#eef2f7; color:inherit; font-weight:inherit; }
.okulsis .combo-opt.is-disabled { opacity:.5; cursor:default; }
.okulsis .combo-opt.is-disabled:hover { background:transparent; }
.okulsis .combo-opt.sel { background:var(--primary-soft); color:var(--primary-d); font-weight:600; position:relative; padding-right:28px; }
.okulsis .combo-opt.sel::after { content:"\2713"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--primary); }
/* altta yer yoksa panel yukarı açılır (okulsis-ui.js .up ekler) */
.okulsis .combo.up .combo-pop { top:auto; bottom:calc(100% + 4px); }
/* ince scrollbar — mevcut tasarımla uyumlu */
.okulsis .combo-list { scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.okulsis .combo-list::-webkit-scrollbar { width:8px; }
.okulsis .combo-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; border:2px solid #fff; }
.okulsis .combo-list::-webkit-scrollbar-track { background:transparent; }
.okulsis .combo-grp { padding:7px 12px 3px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.okulsis .combo-empty { padding:14px 12px; font-size:13px; color:var(--muted); text-align:center; }

/* ---------- KPI kartları ---------- */
.okulsis .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.okulsis .kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:13px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.okulsis .kpi::after { content:""; position:absolute; top:-18px; right:-18px; width:72px; height:72px; border-radius:50%; opacity:.45; }
.okulsis .kpi-blue::after { background:var(--acc-blue); }
.okulsis .kpi-green::after { background:var(--acc-green); }
.okulsis .kpi-amber::after { background:var(--acc-amber); }
.okulsis .kpi-red::after { background:var(--acc-red); }
.okulsis .kpi-purple::after { background:var(--acc-purple); }
.okulsis .kpi-cyan::after { background:var(--acc-cyan); }
.okulsis .kpi .lbl { color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; position:relative; z-index:1; }
.okulsis .kpi .val { display:block; font-size:26px; font-weight:800; line-height:1.1; margin-top:5px; position:relative; z-index:1; letter-spacing:-.02em; }
.okulsis .kpi .sub { display:block; font-size:12px; margin-top:4px; color:var(--muted); position:relative; z-index:1; }
.okulsis .trend-up { color:var(--green); font-weight:600; }
.okulsis .trend-down { color:var(--red); font-weight:600; }
.okulsis .trend-flat { color:var(--muted); font-weight:600; }

/* ---------- Panel ---------- */
.okulsis .panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
/* Kardeş seçiciyle otomatik boşluk VERİLMEZ: yan yana dizilen panelleri (grid/flex satırları)
   aşağı kaydırıp hizayı bozuyordu. Üst üste dizerken açık margin (.mt14 / style) kullanın;
   satırlarda konteynerin gap'i zaten boşluğu sağlar. */

/* ---------- Sekmeler (kategori) ---------- */
/* overflow-y:hidden ŞART: overflow-x:auto verildiğinde CSS, diğer eksenin 'visible'
   değerini 'auto'ya çevirir. Sekme metinlerindeki emoji ikonlar satır yüksekliğini
   birkaç piksel taşırdığı için şeritte gereksiz bir DİKEY kaydırma çubuğu çıkıyordu.
   Yatay kaydırma korunur (çok sekmeli ekranlar için gerekli). */
.okulsis .tabbar { display:flex; gap:2px; padding:0 8px; border-bottom:1px solid var(--line); background:#f8fafc; overflow-x:auto; overflow-y:hidden; }
/* text-decoration:none — sekmeler bazı ekranlarda <button>, bazılarında LinkButton
   (<a>) olarak render ediliyor; <a> hâlinde tarayıcının varsayılan alt çizgisi
   sekme görünümünü bozuyordu. Alt çizgi hover'da da istenmez. */
.okulsis .tab { border:none; background:transparent; font-family:inherit; cursor:pointer; padding:13px 15px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:color .15s; }
.okulsis .tab:hover, .okulsis .tab:focus, .okulsis .tab:active { text-decoration:none; }
.okulsis .tab:hover { color:var(--slate); }
.okulsis .tab.active { color:var(--title); border-bottom-color:var(--title); }
.okulsis .tab .count { font-size:11px; font-weight:700; background:#e2e8f0; color:var(--slate); padding:1px 8px; border-radius:20px; line-height:1.6; }
.okulsis .tab.active .count { background:var(--primary-soft); color:var(--primary-d); }

/* ---------- Alt piller (liste varyantı) ---------- */
.okulsis .subpills { display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:#fff; flex-wrap:wrap; }
.okulsis .pill { border:1px solid var(--line); background:#fff; border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--slate); cursor:pointer; font-family:inherit; white-space:nowrap; transition:all .15s; }
.okulsis .pill:hover { border-color:#94a3b8; }
.okulsis .pill.active { background:var(--primary-soft); border-color:var(--primary); color:var(--primary-d); }

/* ---------- Sekme başlığı + aksiyonlar ---------- */
.okulsis .tab-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 10px; flex-wrap:wrap; }
.okulsis .tab-head h3 { margin:0; font-size:15px; font-weight:700; color:var(--ink); }
.okulsis .tab-head .hint { font-size:12.5px; color:var(--muted); }
.okulsis .tab-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Özet şeridi ---------- */
.okulsis .summary-strip { display:flex; gap:22px; flex-wrap:wrap; padding:10px 18px; background:#fafcff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.okulsis .ss-item .ss-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; }
.okulsis .ss-item .ss-val { font-size:16px; font-weight:800; margin-top:2px; }
.okulsis .ss-val.blue { color:var(--primary); }
.okulsis .ss-val.green, .okulsis .ss-val.pos { color:var(--green); }
.okulsis .ss-val.red, .okulsis .ss-val.neg { color:var(--red); }
.okulsis .ss-val.amber { color:var(--amber); }

/* ---------- Veri tablosu ---------- */
.okulsis .table-wrap { overflow:auto; max-height:520px; }
.okulsis table.data { width:100%; border-collapse:collapse; font-size:13px; }
.okulsis table.data thead th { position:sticky; top:0; z-index:1; background:#f8fafc; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#000; padding:10px 14px; border-bottom:2px solid var(--line); font-weight:800; white-space:nowrap; }
.okulsis table.data tbody td { padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle; color:#0f1b2d; }
.okulsis table.data tbody tr:hover td { background:#f0f7ff; }
.okulsis table.data .num { text-align:right; font-variant-numeric:tabular-nums; }
.okulsis table.data .ctr { text-align:center; }
.okulsis table.data tfoot td { padding:10px 14px; font-weight:800; background:#f1f5f9; border-top:2px solid var(--line); }
.okulsis table.data .neg { color:var(--red); font-weight:700; }
.okulsis table.data .pos { color:var(--green); font-weight:600; }
.okulsis table.data tbody tr.sel td { background:#e7efff; }
.okulsis table.data tbody tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--primary); }
.okulsis table.data tbody tr.click { cursor:pointer; }

/* ---------- Öğrenci hücresi ---------- */
/* ---------- Satır aksiyonları (tablo hücresi içi buton grubu) ---------- */
/* <td class="ctr"><div class="row-acts">…</div></td>
   Buton yerine bağlantı gerekiyorsa <a class="btn btn-primary"> kullanın — .btn
   metin altı çizgisini zaten kaldırır. Satır tıklanabilirse (tr.click) aksiyonlara
   onclick="event.stopPropagation()" ekleyin ki satır açılmasın.
   Yazdırma motoru .row-acts içeren hücreyi tanır ve rapora BOŞ basar. */
.okulsis .row-acts { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }

/* Ad + alt satır (sınıf · no). AVATAR YOK — baş harf (örn. "MK") adın tekrarıydı,
   ad zaten hücrenin içinde yazılı. v2'de kaldırıldı: .avatar ve .av0–.av5.
   Kişi görseli gereken yerlerde .form-photo (form başlığı) / .subject-ico (özne şeridi). */
.okulsis .stu { min-width:0; }
.okulsis .stu-main { font-weight:600; line-height:1.25; }
.okulsis .stu-sub { font-size:12px; color:var(--muted); }

/* ---------- Rozetler ---------- */
.okulsis .badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.okulsis .badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.okulsis .b-onay,   .okulsis .b-kabul,   .okulsis .b-teslim  { background:var(--green-soft); color:var(--green); }
.okulsis .b-taslak, .okulsis .b-eksik,   .okulsis .b-bekliyor{ background:var(--amber-soft); color:var(--amber); }
.okulsis .b-iptal,  .okulsis .b-red,     .okulsis .b-gecikme, .okulsis .b-yapilmadi { background:var(--red-soft); color:var(--red); }
.okulsis .b-gorulen { background:var(--primary-soft); color:var(--primary-d); }
.okulsis .b-notlu   { background:var(--purple-soft); color:var(--purple); }
.okulsis .b-pasif   { background:#f1f5f9; color:var(--muted); }
.okulsis .b-proje   { background:var(--cyan-soft); color:var(--cyan); }

/* ---------- Sayfalama ---------- */
.okulsis .pager { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; gap:12px; flex-wrap:wrap; }
/* "N kayıt" sayaçları — sayfalama bilgisi (.pager .info) ve sekme başlığının
   sağındaki sayaç (.tab-actions .hint) — hiçbir mavi vurgu almaz:
     · Zemin/kenarlık sıfırlaması: ASP.NET tema klasöründeki TÜM CSS'leri yükler,
       ".info"/".hint" gibi yaygın adlar legacy dosyalardan sızabiliyor (ör. eskiden
       notifIt.css'in genel ".info" kuralı deepskyblue zemin basıyordu). !important,
       okulsis-ds.css'ten sonra yüklenen dosyalara (specific.css, table.css …) karşı.
     · Salt-okunur sayaç metni seçilemez; tıklama/çift tıklama sonrası tarayıcı
       seçim şeridi oluşmaz.
   Kapsam bilinçli olarak dar: .tab-head .hint (rapor açıklaması) ve tablo gövdesi
   hariç — onlar seçilebilir/kopyalanabilir kalmalı. */
.okulsis .pager .info,
.okulsis .tab-actions .hint {
  font-size:12.5px; color:var(--muted) !important;
  background:transparent !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
/* Alt öğeler de dahil: sayaç metni içinde <b>/<span> geçebiliyor (ör. Ödev
   raporlarındaki "… <b>Listele</b>'ye basın" bilgisi). */
.okulsis .pager .info::selection,
.okulsis .pager .info *::selection,
.okulsis .tab-actions .hint::selection,
.okulsis .tab-actions .hint *::selection { background:transparent; }
.okulsis .pager .info::-moz-selection,
.okulsis .pager .info *::-moz-selection,
.okulsis .tab-actions .hint::-moz-selection,
.okulsis .tab-actions .hint *::-moz-selection { background:transparent; }
.okulsis .pages { display:flex; gap:4px; }
.okulsis .pg { min-width:30px; height:30px; border:1px solid var(--line); background:#fff; border-radius:7px; font-size:13px; color:var(--slate); cursor:pointer; }
.okulsis .pg.active { background:var(--primary); color:#fff; border-color:var(--primary-d); font-weight:700; }

/* ---------- Sihirbaz başlığı (öğrenci/özne kimliği) ---------- */
.okulsis .form-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.okulsis .form-head-left { display:flex; align-items:center; gap:14px; min-width:0; }
.okulsis .form-photo { flex-shrink:0; width:64px; height:64px; border-radius:12px; background:linear-gradient(135deg,#e2e8f0,#f1f5f9); border:1px solid var(--line); display:grid; place-items:center; font-size:28px; color:#94a3b8; }
.okulsis .form-title { margin:0 0 4px; font-size:22px; font-weight:800; color:var(--title); line-height:1.15; }
.okulsis .form-meta { color:var(--muted); font-size:13px; line-height:1.4; }
.okulsis .form-head-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- Sihirbaz kartı + adım çubuğu ---------- */
.okulsis .form-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.okulsis .stepbar { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); background:#f8fafc; padding:0 8px; }
/* text-decoration:none — .tab ile aynı gerekçe: adımlar bazı ekranlarda <button>,
   bazılarında LinkButton (<a>) olarak render ediliyor; <a> hâlinde tarayıcının
   varsayılan alt çizgisi adım çubuğunun görünümünü bozuyordu. */
.okulsis .step { display:inline-flex; align-items:center; gap:8px; padding:12px 16px; font-size:13px; font-weight:600; color:var(--muted); border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font-family:inherit; cursor:pointer; white-space:nowrap; text-decoration:none; }
.okulsis .step:hover, .okulsis .step:focus, .okulsis .step:active { text-decoration:none; }
.okulsis .step:hover:not(.on) { color:var(--slate); }
.okulsis .step-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#e2e8f0; color:#64748b; font-size:11px; font-weight:700; flex-shrink:0; }
.okulsis .step.on { color:var(--title); border-bottom-color:var(--title); }
.okulsis .step.on .step-num { background:var(--title); color:#fff; }
.okulsis .step.done { color:var(--slate); }
.okulsis .step.done .step-num { background:var(--green); color:#fff; }
.okulsis .step-opt { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:#e8edf4; padding:2px 6px; border-radius:5px; }
.okulsis .tab-body { padding:22px 24px 26px; }
.okulsis .step-title { font-size:15px; font-weight:800; color:var(--ink); margin:0 0 3px; }
.okulsis .step-desc { font-size:12.5px; color:var(--muted); margin:0 0 16px; }
.okulsis .hidden { display:none !important; }

/* ---------- Akış şeridi (adım göstergesi) ---------- */
.okulsis .flow { display:flex; align-items:stretch; gap:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px 14px; margin-bottom:14px; }
.okulsis .fstep { flex:1; display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:8px; font-size:12.5px; color:var(--muted); }
.okulsis .fstep.active { background:var(--primary-soft); color:var(--primary-d); }
.okulsis .fstep.done { color:var(--green); }
.okulsis .fstep .n { width:24px; height:24px; border-radius:50%; background:#cbd5e1; color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; flex-shrink:0; }
.okulsis .fstep.active .n { background:var(--primary); }
.okulsis .fstep.done .n { background:var(--green); }
.okulsis .fstep b { display:block; color:inherit; }
.okulsis .fstep .st { font-size:10.5px; opacity:.85; }
.okulsis .farr { align-self:center; color:#cbd5e1; padding:0 4px; flex-shrink:0; }

/* ---------- Öğrenci/özne şeridi (form üstü) ---------- */
.okulsis .subject { display:flex; align-items:stretch; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px; }
.okulsis .subject.empty { border:2px dashed #93c5fd; background:#f8fbff; }
.okulsis .subject-ico { width:64px; display:grid; place-items:center; font-size:26px; color:#94a3b8; background:#f3f6fb; border-right:1px solid var(--line); }
.okulsis .subject-body { flex:1; padding:12px 16px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px 18px; align-items:center; }
.okulsis .subject-body .k { font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.okulsis .subject-body .v { font-size:13px; font-weight:600; margin-top:1px; }

/* ---------- Bölüm paneli (başlıklı) ---------- */
.okulsis .spanel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.okulsis .spanel-h { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--title); color:#fff; padding:9px 16px; font-size:13px; font-weight:700; }
.okulsis .spanel-h .sub { font-weight:500; opacity:.85; font-size:11.5px; }
.okulsis .spanel-b { padding:14px 16px; }
.okulsis .spanel.danger .spanel-h { background:#991b1b; }
.okulsis .spanel.accent .spanel-h { background:linear-gradient(135deg,#1e3a5f,var(--title)); }

/* ---------- İki/üç sütun düzeni ---------- */
/* Aynı satırdaki paneller aynı hizada başlar ve aynı hizada biter (eşit yükseklik) */
.okulsis .cols { display:flex; gap:14px; align-items:stretch; }
.okulsis .col { flex:1; min-width:0; display:flex; flex-direction:column; }
.okulsis .col > .spanel:last-child { flex:1; }
.okulsis .col-grow { flex:2; }

/* ---------- Liste + Detay (split) düzeni ---------- */
/* Solda aranabilir kayıt listesi, sağda seçili kaydın detayı.
   Çok kayıtlı, sık geçiş yapılan ekranlar için (CRM benzeri). */
.okulsis .split { display:flex; gap:14px; align-items:stretch; height:calc(100vh - 150px); min-height:520px; }
.okulsis .split-list { flex:0 0 340px; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.okulsis .split-list-head { padding:12px; border-bottom:1px solid var(--line); background:#f8fafc; }
.okulsis .split-list-body { overflow-y:auto; flex:1; }
.okulsis .split-item { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--line); cursor:pointer; border-left:3px solid transparent; }
.okulsis .split-item:hover { background:#f0f7ff; }
.okulsis .split-item.sel { background:var(--primary-soft); border-left-color:var(--primary); }
.okulsis .split-item-main { flex:1; min-width:0; }
.okulsis .split-item-title { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okulsis .split-item-sub { font-size:11.5px; color:var(--muted); margin-top:2px; }
.okulsis .split-detail { flex:1; min-width:0; overflow-y:auto; }
.okulsis .split-detail-inner { max-width:880px; margin:0 auto; }

/* ---------- Form ızgarası ---------- */
.okulsis .form-grid { display:grid; gap:12px 16px; }
.okulsis .fg-2 { grid-template-columns:1fr 1fr; }
.okulsis .fg-3 { grid-template-columns:1fr 1fr 1fr; }
.okulsis .fg-4 { grid-template-columns:repeat(4,1fr); }
.okulsis .fv label, .okulsis .fv .fv-lbl { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:5px; }
.okulsis .fv label .req { color:var(--red); }
.okulsis .fv input, .okulsis .fv select, .okulsis .fv textarea { width:100%; min-height:36px; padding:7px 11px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; font-size:14px; font-family:inherit; color:var(--ink); outline:none; }
.okulsis .fv textarea { resize:vertical; }
.okulsis .fv input:focus, .okulsis .fv select:focus, .okulsis .fv textarea:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.okulsis .fv input[readonly] { background:#eef2f7; color:var(--slate); }
.okulsis .fv .hint { font-size:11px; color:var(--muted); margin-top:4px; }
.okulsis .col-span-2 { grid-column:span 2; }
.okulsis .col-span-3 { grid-column:span 3; }

/* ---------- Onay kutusu satırı ---------- */
.okulsis .check-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; font-size:13px; }
.okulsis .check-row input { width:16px; height:16px; accent-color:var(--primary); }
.okulsis .check-row.on { background:var(--primary-soft); border-color:#bcd2f5; color:var(--primary-d); font-weight:600; }

/* ---------- Form alt aksiyon çubuğu ---------- */
.okulsis .form-footer { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--line); background:#f9fafb; }
.okulsis .form-footer .spacer { flex:1; }
.okulsis .form-net { font-size:12.5px; font-weight:700; padding:6px 12px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.okulsis .form-net b { color:var(--title); font-size:14px; }

/* Sabit (yapışkan) varyant — uzun formlarda tutar/aksiyonlar hep görünür kalır.
   .form-card içinde kullanın; kartın alt köşe yarıçapını devralır. */
.okulsis .form-footer.sticky { position:sticky; bottom:0; z-index:5; background:#fff; box-shadow:0 -6px 20px rgba(15,27,45,.07); border-radius:0 0 var(--radius) var(--radius); }

/* Büyük net tutar — sabit barda ana rakam olarak kullanılır. */
.okulsis .form-net.lg { border:0; background:transparent; padding:0; display:flex; flex-direction:column; }
.okulsis .form-net.lg .k { font-size:12px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
.okulsis .form-net.lg .v { font-size:26px; font-weight:800; color:var(--primary-d); line-height:1.1; font-variant-numeric:tabular-nums; }

/* ---------- Ağaç görünümü ---------- */
.okulsis .tree { font-size:13px; }
.okulsis .tree-node { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer; }
.okulsis .tree-node:hover { background:#f0f7ff; }
.okulsis .tree-node input { width:15px; height:15px; accent-color:var(--primary); }
.okulsis .tree-node.child { margin-left:24px; }
.okulsis .tree-node.gchild { margin-left:48px; color:var(--slate); }
.okulsis .tree-tw { color:#94a3b8; width:12px; display:inline-block; text-align:center; }

/* ---------- Segment / toggle ---------- */
.okulsis .seg { display:inline-flex; background:#eef2f8; border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; }
.okulsis .seg button { border:none; background:transparent; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--slate); padding:6px 13px; border-radius:6px; cursor:pointer; }
.okulsis .seg button.active { background:#fff; color:var(--primary-d); box-shadow:0 1px 3px rgba(15,27,45,.12); }

/* ---------- Anahtar (toggle switch) ---------- */
.okulsis .switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.okulsis .switch input { opacity:0; width:0; height:0; }
.okulsis .switch .track { position:absolute; inset:0; background:#cbd5e1; border-radius:20px; transition:background .18s; cursor:pointer; }
.okulsis .switch .track::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s; box-shadow:0 1px 3px rgba(15,27,45,.25); }
.okulsis .switch input:checked + .track { background:var(--primary); }
.okulsis .switch input:checked + .track::before { transform:translateX(18px); }
.okulsis .switch input:disabled + .track { opacity:.5; cursor:not-allowed; }
.okulsis .switch-row { display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line); }
.okulsis .switch-row:last-child { border-bottom:none; }
.okulsis .switch-row .sr-ico { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px; flex-shrink:0; background:#f1f5f9; }
.okulsis .switch-row .sr-main { flex:1; min-width:0; }
.okulsis .switch-row .sr-title { font-weight:700; font-size:14px; }
.okulsis .switch-row .sr-desc { font-size:12px; color:var(--muted); margin-top:2px; }

/* ---------- Zengin metin editörü (kabuk) ---------- */
/* Mockup'ta salt görsel kabuktur; gerçek ekranda Telerik RadEditor'ün yerini işaretler.
   Ödev açıklaması, mesaj gövdesi, geri bildirim gibi çok satırlı zengin metin alanları. */
.okulsis .rte { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.okulsis .rte-tools { display:flex; gap:2px; padding:6px 8px; background:#f8fafc; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.okulsis .rte-tools button { width:28px; height:28px; border:1px solid transparent; background:transparent; border-radius:6px; cursor:pointer; font-size:13px; color:var(--slate); }
.okulsis .rte-tools button:hover { background:var(--primary-soft); border-color:#bcd2f5; }
.okulsis .rte-body { padding:11px 13px; min-height:110px; font-size:13.5px; line-height:1.6; color:var(--ink); }
.okulsis .rte-body .ph { color:#9aa7b8; }

/* ---------- Dosya yükleme (bUpload/RadUpload yer tutucusu) ---------- */
.okulsis .dropzone { border:1.5px dashed #93c5fd; border-radius:9px; background:#f8fbff; padding:14px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--slate); }
.okulsis .dropzone .di { font-size:22px; }
.okulsis .attach { display:flex; align-items:center; justify-content:space-between; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12.5px; margin-top:8px; }
.okulsis .attach .fn { display:flex; align-items:center; gap:8px; }

/* ---------- Panel başlığı (kenarlıksız) ---------- */
/* .tab-head'in alt çizgisiz hafif varyantı: grafik/istatistik panellerinin üst şeridi. */
.okulsis .panel-title { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 0; }
.okulsis .panel-title h3 { margin:0; font-size:15px; font-weight:700; }

/* ---------- Donut sarmalayıcı ---------- */
.okulsis .donut-wrap { display:flex; align-items:center; gap:20px; padding:6px 4px; }

/* ---------- Çip listesi ---------- */
.okulsis .chips { display:flex; gap:6px; flex-wrap:wrap; }
.okulsis .chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; background:#f1f5f9; color:var(--slate); }
.okulsis .chip .x { color:var(--muted); cursor:pointer; }

/* ---------- Açılır pencere (modal / onay) ---------- */
/* Gerçek sistemde bunun karşılığı RadWindowManager pencereleridir (wndSozlesmeIptal vb.).
   Açma/kapama .hidden ile yapılır: el.classList.toggle('hidden').
   Yıkıcı işlemlerde (Sil / İptal Et) .modal.danger kullanın — asla onaysız silmeyin. */
.okulsis .modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; }
.okulsis .modal-backdrop { position:absolute; inset:0; background:rgba(15,27,45,.5); }
.okulsis .modal-card { position:relative; width:100%; max-width:440px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; }
.okulsis .modal-lg .modal-card { max-width:760px; }
.okulsis .modal-h { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--title); color:#fff; padding:11px 16px; font-size:14px; font-weight:700; }
.okulsis .modal-h .x { cursor:pointer; opacity:.85; font-size:16px; line-height:1; }
.okulsis .modal-h .x:hover { opacity:1; }
.okulsis .modal.danger .modal-h { background:#991b1b; }
.okulsis .modal.success .modal-h { background:#166534; }
.okulsis .modal-b { padding:18px 16px; font-size:13.5px; line-height:1.6; }
.okulsis .modal-b .lead { margin:0 0 6px; font-weight:700; font-size:14.5px; color:var(--ink); }

/* Sonuç penceresi gövdesi: büyük ikon + kayıt kimliği + sonraki adımlar.
   Boş bir "Tamam" penceresi kullanıcıya hiçbir şey vermez — kaydedilen kaydın
   numarasını gösterin ve .modal-f'te bir sonraki adımı sunun. */
.okulsis .modal-result { display:flex; gap:14px; align-items:flex-start; }
.okulsis .modal-result .ico { flex-shrink:0; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:var(--green-soft); color:var(--green); }
.okulsis .modal.danger .modal-result .ico { background:var(--red-soft); color:var(--red); }
.okulsis .modal-result .rid { display:inline-block; margin-top:7px; padding:4px 10px; border-radius:7px; background:#f1f5f9; font-weight:700; font-size:12.5px; color:var(--slate); }
.okulsis .modal-f { display:flex; align-items:center; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--line); background:#f9fafb; }
.okulsis .modal-f .spacer { flex:1; }

/* ---------- Kaydetme / işlem sonucu şeridi ---------- */
/* Kalıcı bilgi için .note kullanın; bu, işlemden SONRA beliren kapatılabilir şerittir.
   Açılışta .hidden ile gizli durur, işlem başarılıysa .hidden kaldırılır. */
.okulsis .savemsg { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--green-soft); border:1px solid #a7e3be; color:#166534; border-radius:10px; margin-bottom:14px; font-size:13.5px; font-weight:600; }
.okulsis .savemsg.err { background:var(--red-soft); border-color:#fca5a5; color:#991b1b; }

/* ---------- Not kutusu ---------- */
.okulsis .note { margin-top:14px; font-size:12.5px; color:var(--muted); padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.okulsis .note strong { color:var(--slate); }
.okulsis .note.info { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.okulsis .note.warn { background:#fffbeb; border-color:#fcd34d; color:#92400e; }

/* ---------- Mini istatistik şeridi ---------- */
.okulsis .mini-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.okulsis .mini-strip .it { padding:11px 14px; border-right:1px solid var(--line); background:#fafcff; }
.okulsis .mini-strip .it:last-child { border-right:none; }
.okulsis .mini-strip .l { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; }
.okulsis .mini-strip .v { font-size:17px; font-weight:800; margin-top:3px; }
.okulsis .mini-strip .v.blue { color:var(--primary); }
.okulsis .mini-strip .v.green { color:var(--green); }
.okulsis .mini-strip .v.amber { color:var(--amber); }
.okulsis .mini-strip .v.red { color:var(--red); }

/* ---------- Grafik: yatay bar ---------- */
.okulsis .bars { display:flex; flex-direction:column; gap:10px; }
.okulsis .bar-row { display:grid; grid-template-columns:130px 1fr 46px; align-items:center; gap:10px; font-size:12.5px; }
.okulsis .bar-track { height:14px; background:#eef2f8; border-radius:7px; overflow:hidden; }
.okulsis .bar-fill { height:100%; border-radius:7px; }
.okulsis .bar-fill.blue { background:var(--primary); }
.okulsis .bar-fill.green { background:var(--green); }
.okulsis .bar-fill.amber { background:var(--amber); }
.okulsis .bar-fill.red { background:var(--red); }
.okulsis .bar-fill.purple { background:var(--purple); }
.okulsis .bar-val { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Grafik: donut (conic-gradient) ---------- */
.okulsis .donut { width:150px; height:150px; border-radius:50%; display:grid; place-items:center; }
.okulsis .donut::after { content:""; width:96px; height:96px; background:var(--card); border-radius:50%; grid-area:1/1; }
.okulsis .donut .donut-c { grid-area:1/1; text-align:center; z-index:1; }
.okulsis .donut .donut-c .big { font-size:26px; font-weight:800; }
.okulsis .donut .donut-c .sm { font-size:11px; color:var(--muted); }
.okulsis .legend { display:flex; flex-direction:column; gap:7px; font-size:12.5px; }
.okulsis .legend .li { display:flex; align-items:center; gap:8px; }
.okulsis .legend .sw { width:11px; height:11px; border-radius:3px; }

/* ---------- Sütun grafik (dikey) ---------- */
.okulsis .colchart { display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:10px; }
.okulsis .colchart .cc { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.okulsis .colchart .cc-bar { width:100%; max-width:38px; border-radius:6px 6px 0 0; background:var(--primary); }
.okulsis .colchart .cc-lbl { font-size:11px; color:var(--muted); }

/* ---------- Boş durum ---------- */
.okulsis .empty-state { text-align:center; padding:40px 20px; color:var(--muted); }
.okulsis .empty-state .ico { font-size:34px; opacity:.5; }
.okulsis .empty-state .msg { margin-top:8px; font-size:13.5px; }

/* ---------- Yardımcılar ---------- */
.okulsis .muted { color:var(--muted); }
.okulsis .right { text-align:right; }
.okulsis .center { text-align:center; }
.okulsis .nowrap { white-space:nowrap; }
.okulsis .mt0 { margin-top:0; } .okulsis .mt8 { margin-top:8px; } .okulsis .mt14 { margin-top:14px; }
.okulsis .grow { flex:1; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .okulsis .kpis { grid-template-columns:repeat(2,1fr); }
  .okulsis .subject-body { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1100px) {
  .okulsis .fg-4 { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .okulsis .cols { flex-direction:column; }
  .okulsis .col, .okulsis .col-grow { width:100%; flex:none; }
  .okulsis .flow { flex-direction:column; gap:4px; }
  .okulsis .farr { transform:rotate(90deg); }
  .okulsis .split { flex-direction:column; height:auto; }
  .okulsis .split-list { flex:none; max-height:280px; }
}
@media (max-width:640px) {
  .okulsis .kpis { grid-template-columns:1fr; }
  .okulsis .fg-2, .okulsis .fg-3, .okulsis .fg-4 { grid-template-columns:1fr; }
  .okulsis .col-span-2, .okulsis .col-span-3 { grid-column:span 1; }
  .okulsis .subject-body { grid-template-columns:1fr; }
  .okulsis .wrap { padding:12px; }
}