/* SURUM-ISARETI: OKULSIS-DS-2026-08-20-B */
/* ============================================================
   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; align-items:center; flex:0 0 auto; }
/* Başlık bloğu daralabilsin ki eylem düğmeleri (Yazdır / Excel / birincil işlem)
   aynı hizada kalsın; düğmeler min-width:max-content ile küçülmediğinden, esneme
   payı verilmeyen başlık uzun olduğunda sonuncusu alt satıra düşüyordu. */
.okulsis .topbar > :first-child { flex:1 1 auto; min-width:0; }
.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. */
/* DİKKAT — .btn'de flex-shrink:0 zorunlu: butonların yaşadığı kapların hepsi flex'tir
   (.top-actions, .tab-actions, .form-head-actions, .form-footer, .modal-f, .row-acts) ve
   flex öğesi varsayılan olarak İÇERİĞİNİN ALTINA sıkışır. Sıkışınca .btn'in boyalı kutusu
   daralıyor, white-space:nowrap yüzünden metin kutunun dışına taşıyor ve yandaki butonun
   üstüne biniyordu — "metin taşması + çift renk" görüntüsü buradan geliyordu.
   Kaplar flex-wrap:wrap olduğu için yer kalmadığında butonlar alt satıra iner. */
.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; flex-shrink:0; 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 1px 2px rgba(15,27,45,.10); }
.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 1px 2px rgba(15,27,45,.10); }
.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 { flex-shrink:0; 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; flex-wrap:wrap; 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); }
/* Sütun altındaki yıl ve sayı okunur olmalı: soluk gri yerine ana metin rengi,
   ve iki satır sütunun altında ortalanır (satır sonu ile alt alta yazılıyor). */
.okulsis .colchart .cc-lbl { font-size:11px; color:var(--ink); text-align:center; line-height:1.35; }

/* ---------- 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; }
}

/* ============================================================================
   v2.2 BİLEŞENLERİ — _Mockups/genel/okulsis-ds.css'ten temaya taşındı (PDR modülü).
   Tema kopyası ile mockup kaynağı zamanla ayrıştığı için dosya BİREBİR
   kopyalanmadı; yalnızca temada bulunmayan üç bileşen eklendi. Temanın kendi
   düzeltmeleri (combo kaydırma çubuğu, .is-disabled, .daterange, .pager .info
   vurgu nötrleme, .okulsis-odev override'ları) olduğu gibi korunmuştur.
   Eklenenler: .combo.multi (+ .combo-tag), .cal ailesi, .ctxmenu.
   ============================================================================ */

/* --- Çok seçimli combo (.combo.multi) --- */
/* RadComboBox CheckBoxes="true" yer tutucusu. Seçimler buton içinde .combo-tag
   çipleri olarak birikir; seçenek tıklandığında panel AÇIK kalır. Davranış:
   okulsis-ui.js. Boşken .combo-val içine <span class="ph">…</span> konur
   (data-ph özniteliği placeholder metnini taşır). */
.okulsis .combo.multi .combo-btn { height:auto; min-height:36px; padding:4px 11px; }
.okulsis .combo.multi .combo-val { display:flex; flex-wrap:wrap; gap:4px; white-space:normal; align-items:center; min-height:26px; }
.okulsis .combo-val .ph { color:#94a3b8; }
.okulsis .combo-tag { display:inline-flex; align-items:center; gap:6px; background:var(--primary-soft); color:var(--primary-d); border-radius:6px; padding:2px 8px; font-size:12px; font-weight:600; line-height:1.6; max-width:100%; }
.okulsis .combo-tag .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okulsis .combo-tag .x { cursor:pointer; opacity:.65; font-size:11px; flex-shrink:0; }
.okulsis .combo-tag .x:hover { opacity:1; }
.okulsis .combo.multi .combo-opt { display:flex; align-items:center; gap:9px; }
.okulsis .combo.multi .combo-opt::before { content:""; width:15px; height:15px; border:1.5px solid #cbd5e1; border-radius:4px; background:#fff; flex-shrink:0; display:grid; place-items:center; font-size:10px; line-height:1; }
.okulsis .combo.multi .combo-opt.sel { background:transparent; color:inherit; font-weight:500; }
.okulsis .combo.multi .combo-opt.sel:hover { background:#f0f7ff; }
.okulsis .combo.multi .combo-opt.sel::before { content:"✓"; background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---------- Takvim (ay görünümü) ---------- */
/* RadScheduler ay görünümünün yer tutucusu (GorusmeZamanCizelgesi vb.).
   .panel içinde kullanın. Gün hücresine sağ tıklandığında .ctxmenu açmak için
   hücreye data-ctx="#menuId" verin (davranış: okulsis-ui.js). */
.okulsis .cal-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; flex-wrap:wrap; }
.okulsis .cal-title { font-size:15px; font-weight:800; color:var(--title); }
.okulsis .cal-nav { display:flex; gap:6px; align-items:center; }
.okulsis .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); }
.okulsis .cal-dow { background:#f8fafc; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.okulsis .cal-dow:nth-child(7n) { border-right:none; }
.okulsis .cal-day { min-height:96px; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 7px; }
.okulsis .cal-day:nth-child(7n) { border-right:none; }
.okulsis .cal-day:hover { background:#f8fbff; }
.okulsis .cal-day .d { font-size:12px; font-weight:700; color:var(--slate); }
.okulsis .cal-day.out { background:#fafbfd; }
.okulsis .cal-day.out .d { color:#b6c2d4; }
.okulsis .cal-day.today { background:#f5f9ff; box-shadow:inset 0 2px 0 var(--primary); }
.okulsis .cal-day.today .d { color:var(--primary-d); }
.okulsis .cal-evt { display:block; margin-top:4px; padding:3px 7px; border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; background:var(--primary-soft); color:var(--primary-d); border-left:3px solid var(--primary); }
.okulsis .cal-evt.green { background:var(--green-soft); color:var(--green); border-left-color:var(--green); }
.okulsis .cal-evt.amber { background:var(--amber-soft); color:var(--amber); border-left-color:var(--amber); }
.okulsis .cal-evt.red { background:var(--red-soft); color:var(--red); border-left-color:var(--red); }
.okulsis .cal-evt.purple { background:var(--purple-soft); color:var(--purple); border-left-color:var(--purple); }
.okulsis .cal-evt.cyan { background:var(--cyan-soft); color:var(--cyan); border-left-color:var(--cyan); }
.okulsis .cal-more { display:block; margin-top:3px; font-size:11px; color:var(--muted); font-weight:600; cursor:pointer; }
.okulsis .cal-more:hover { color:var(--primary-d); }

/* ---------- Sağ tık / bağlam menüsü ---------- */
/* Takvim hücresi, tablo satırı gibi öğelerde sağ tık aksiyonları. Sayfada
   .okulsis kökü içinde .hidden olarak durur; data-ctx="#menuId" verilen öğeye
   sağ tıklanınca imleç konumunda açılır (davranış: okulsis-ui.js). */
.okulsis .ctxmenu { position:fixed; z-index:60; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow-lg); padding:5px; }
.okulsis .ctxmenu .ci { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:7px; font-size:13px; font-weight:600; color:var(--slate); cursor:pointer; white-space:nowrap; }
.okulsis .ctxmenu .ci:hover { background:var(--primary-soft); color:var(--primary-d); }
.okulsis .ctxmenu .ci.danger:hover { background:var(--red-soft); color:var(--red); }
.okulsis .ctxmenu .sep { height:1px; background:var(--line); margin:4px 6px; }


/* ============================================================================
   v2.3 — ÇİZGİ GRAFİK (.linechart)
   PDR Test Sonuçları ekranının "Grafik Tipi: Sütun | Çizgi" seçimi için eklendi
   (_Mockups/PDR/test-sonuclar.html). Sistemde dikey sütun (.colchart) ve yatay
   şerit (.bars) vardı, çizgi yoktu. SVG tabanlıdır: nokta dizisi <polyline>,
   dolgu <polygon> ile verilir; ölçekleme sayfada 0-100 arası yüzdeye çevrilir.
   ============================================================================ */
.okulsis .linechart { display:block; }
.okulsis .linechart svg { display:block; width:100%; height:150px; }
.okulsis .linechart .lc-grid { stroke:var(--line); stroke-width:1; }
.okulsis .linechart .lc-area { fill:var(--primary-soft); }
.okulsis .linechart .lc-line { fill:none; stroke:var(--primary); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.okulsis .linechart .lc-dot { fill:#fff; stroke:var(--primary); stroke-width:2.5; }
.okulsis .linechart .lc-val { fill:var(--slate); font-size:9px; font-weight:700; text-anchor:middle; }
.okulsis .linechart .lc-lbls { display:flex; gap:10px; margin-top:6px; }
.okulsis .linechart .lc-lbl { flex:1; text-align:center; font-size:11px; color:var(--muted); }
@media (max-width:640px) {
  .okulsis .linechart svg { height:120px; }
  .okulsis .linechart .lc-lbl { font-size:10px; }
}

/* ============================================================================
   v2.4 — PDR EKRAN ÖLÇEĞİ (.okulsis.okulsis-pdr)
   PDR modülünün yeni ekranları geniş monitörde ortada dar bir kolonda kalıyor ve
   14px taban ölçüsü uzun tablolarda okumayı zorluyordu. Bu blok YALNIZCA PDR
   sayfalarını (_RHB) büyütür; Ödev / Sözleşme ekranları etkilenmez — DS'teki
   .okulsis-odev override'larıyla aynı desen.

   İki değişiklik: içerik genişliği 1180 → 1600px, taban ölçü 14 → 15.5px (~%10).
   DS ölçüleri mutlak px olduğu için taban ölçüyü değiştirmek yetmiyor; büyüyen
   her kontrol aşağıda tek tek oranlanır.
   ============================================================================ */
.okulsis.okulsis-pdr { font-size:15.5px; }
.okulsis.okulsis-pdr .wrap { padding:16px 26px 44px; }
.okulsis.okulsis-pdr .wrap-narrow { max-width:1600px; }

/* --- Başlık şeridi --- */
.okulsis.okulsis-pdr h1.title { font-size:24px; }
.okulsis.okulsis-pdr .subtitle { font-size:14px; }
.okulsis.okulsis-pdr .crumb { font-size:13px; }

/* --- Buton --- */
.okulsis.okulsis-pdr .btn { height:40px; padding:0 18px; font-size:15px; }

/* --- Girdiler (filtre + form + combo + arama) --- */
.okulsis.okulsis-pdr .field select,
.okulsis.okulsis-pdr .field input,
.okulsis.okulsis-pdr .combo-btn,
.okulsis.okulsis-pdr .search { height:40px; font-size:15.5px; }
.okulsis.okulsis-pdr .field textarea { font-size:15.5px; }
.okulsis.okulsis-pdr .search input { font-size:15.5px; }
.okulsis.okulsis-pdr .fv input,
.okulsis.okulsis-pdr .fv select,
.okulsis.okulsis-pdr .fv textarea { min-height:40px; font-size:15.5px; }
.okulsis.okulsis-pdr .field label,
.okulsis.okulsis-pdr .fv label,
.okulsis.okulsis-pdr .fv .fv-lbl { font-size:12px; }
.okulsis.okulsis-pdr .combo-opt { font-size:14.5px; }
.okulsis.okulsis-pdr .combo-search input { font-size:14.5px; }
.okulsis.okulsis-pdr .check-row { font-size:14.5px; padding:9px 12px; }
.okulsis.okulsis-pdr .check-row input { width:17px; height:17px; }

/* --- Tablo --- */
.okulsis.okulsis-pdr table.data { font-size:14.5px; }
.okulsis.okulsis-pdr table.data thead th { font-size:12px; padding:11px 16px; }
.okulsis.okulsis-pdr table.data tbody td { padding:11px 16px; }
.okulsis.okulsis-pdr table.data tfoot td { padding:11px 16px; }
.okulsis.okulsis-pdr .stu-sub { font-size:13px; }

/* --- Rozet --- */
.okulsis.okulsis-pdr .badge { font-size:12.5px; padding:4px 11px; }
.okulsis.okulsis-pdr .badge .dot { width:7px; height:7px; }

/* --- KPI --- */
.okulsis.okulsis-pdr .kpi { padding:15px 18px; }
.okulsis.okulsis-pdr .kpi .lbl { font-size:13px; }
.okulsis.okulsis-pdr .kpi .val { font-size:29px; }
.okulsis.okulsis-pdr .kpi .sub { font-size:13px; }

/* --- Sekme ve panel başlıkları --- */
.okulsis.okulsis-pdr .tab { font-size:15px; padding:14px 17px; }
.okulsis.okulsis-pdr .tab .count { font-size:12px; }
.okulsis.okulsis-pdr .tab-head h3 { font-size:16.5px; }
.okulsis.okulsis-pdr .tab-head .hint { font-size:13.5px; }
.okulsis.okulsis-pdr .spanel-h { font-size:14.5px; padding:10px 18px; }
.okulsis.okulsis-pdr .spanel-h .sub { font-size:12.5px; }

/* --- Form başlığı ve özne şeridi --- */
.okulsis.okulsis-pdr .form-title { font-size:24px; }
.okulsis.okulsis-pdr .form-meta { font-size:14px; }
.okulsis.okulsis-pdr .subject-ico { width:70px; font-size:29px; }
.okulsis.okulsis-pdr .subject-body .k { font-size:11px; }
.okulsis.okulsis-pdr .subject-body .v { font-size:14.5px; }

/* --- Sayfalama --- */
.okulsis.okulsis-pdr .pager { padding:13px 20px; }
.okulsis.okulsis-pdr .pg { min-width:33px; height:33px; font-size:14px; }

/* --- Pencere, şerit, boş durum --- */
.okulsis.okulsis-pdr .modal-card { max-width:480px; }
.okulsis.okulsis-pdr .modal-lg .modal-card { max-width:840px; }
.okulsis.okulsis-pdr .modal-h { font-size:15.5px; }
.okulsis.okulsis-pdr .modal-b { font-size:14.5px; }
.okulsis.okulsis-pdr .savemsg { font-size:15px; }
.okulsis.okulsis-pdr .empty-state .ico { font-size:38px; }
.okulsis.okulsis-pdr .empty-state .msg { font-size:14.5px; }

/* Dar ekranda ölçek geri çekilir: 15.5px + 40px kontroller sığmıyor. */
@media (max-width:900px) {
  .okulsis.okulsis-pdr { font-size:14px; }
  .okulsis.okulsis-pdr .btn { height:36px; padding:0 16px; font-size:13.5px; }
  .okulsis.okulsis-pdr .field select,
  .okulsis.okulsis-pdr .field input,
  .okulsis.okulsis-pdr .combo-btn,
  .okulsis.okulsis-pdr .search { height:36px; font-size:14px; }
  .okulsis.okulsis-pdr .fv input,
  .okulsis.okulsis-pdr .fv select,
  .okulsis.okulsis-pdr .fv textarea { min-height:36px; font-size:14px; }
  .okulsis.okulsis-pdr table.data { font-size:13px; }
  .okulsis.okulsis-pdr table.data thead th,
  .okulsis.okulsis-pdr table.data tbody td { padding:9px 12px; }
}

/* Alt bar / başlık şeridindeki açıklama metni daralabilsin ki butonlar gereksiz yere
   alt satıra inmesin (flex öğesi min-width:auto ile en uzun kelimesinin altına inmez). */
.okulsis .form-footer > .muted,
.okulsis .modal-f > .muted { min-width:0; }

/* Buton kutusu metninden dar kalamaz: boyalı zemin metnin tamamını kaplar.
   flex-shrink:0 tek başına yetmediği için (kutuyu daraltan başka bir kısıt varsa
   yine sıkışıyordu) alt sınır doğrudan içerik genişliğine bağlandı. */
.okulsis .btn { min-width:max-content; }
.okulsis .fb-apply .btn { min-width:0; }

/* ============================================================
   TARİH ALANI (.otarih -> .odate)  ·  DS v2.5
   Yerleşik <input type="date"> KULLANILMAZ: hem gösterim biçimi hem açılan
   takvim TARAYICININ diline göre gelir (en-US tarayıcıda aa/gg/yyyy ve İngilizce
   ay adları), sayfanın diline göre değil. Bu yüzden alan gg.aa.yyyy maskeli bir
   metin kutusu, takvim de kendi çizdiğimiz Türkçe panel.

   Kullanım: metin kutusuna class="otarih" verin — okulsis-ui.js sarmalayıcıyı,
   düğmeyi ve paneli kendisi kurar. Seçim yapılınca alan "change" olayı yayar.
   ============================================================ */
.okulsis .odate { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
.okulsis .odate > input.otarih { flex:1; min-width:0; padding-right:32px; }
.okulsis .odate-btn {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer; padding:2px 4px;
  font-size:14px; line-height:1; opacity:.5; border-radius:6px;
}
.okulsis .odate-btn:hover, .okulsis .odate.open .odate-btn { opacity:1; background:rgba(0,0,0,.06); }

.okulsis .odate-pop {
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:252px;
  background:#fff; border:1px solid var(--line,#e2e8f0); border-radius:12px;
  box-shadow:0 12px 28px rgba(15,23,42,.16); padding:10px;
}
.okulsis .odate-pop.up { top:auto; bottom:calc(100% + 6px); }
.okulsis .odate-pop.hidden { display:none; }

.okulsis .odate-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.okulsis .odate-t { font-weight:700; font-size:13.5px; color:var(--ink,#0f172a); }
.okulsis .odate-nav {
  border:1px solid var(--line,#e2e8f0); background:#fff; cursor:pointer;
  width:26px; height:26px; border-radius:8px; line-height:1; font-size:15px; color:var(--slate,#64748b);
}
.okulsis .odate-nav:hover { background:var(--bg,#f7f8fa); color:var(--ink,#0f172a); }

.okulsis .odate-g { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.okulsis .odate-w { text-align:center; font-size:11px; font-weight:700; color:var(--muted,#94a3b8); padding:3px 0; }
.okulsis .odate-b { height:30px; }
.okulsis .odate-d {
  height:30px; border:0; background:transparent; cursor:pointer; border-radius:8px;
  font-size:12.5px; color:var(--ink,#0f172a); padding:0;
}
.okulsis .odate-d:hover { background:var(--bg,#f1f5f9); }
.okulsis .odate-d.bugun { box-shadow:inset 0 0 0 1px var(--brand,#255282); font-weight:700; }
.okulsis .odate-d.sel { background:var(--brand,#255282); color:#fff; font-weight:700; }

.okulsis .odate-f { display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line,#e2e8f0); }
.okulsis .odate-a {
  flex:1; border:1px solid var(--line,#e2e8f0); background:#fff; cursor:pointer;
  border-radius:8px; padding:5px 0; font-size:12px; color:var(--slate,#64748b);
}
.okulsis .odate-a:hover { background:var(--bg,#f7f8fa); color:var(--ink,#0f172a); }

/* ============================================================
   BİLGİ ŞERİDİ (.obilgi)  ·  DS v2.6
   Ekranın KALICI açıklaması — "bu hesaplama türü için tanımlama yapılmaz" gibi,
   son kullanıcıya her zaman gösterilen bilgi. Mockup açıklaması olan .note ile
   karıştırmayın: .note canlı koda taşınmaz (KILAVUZ §5), .obilgi ekranın kendi
   metnidir.

     <div class="obilgi"><span class="ico">&#9432;</span><span>Metin...</span></div>
   ============================================================ */
.okulsis .obilgi {
  display:flex; align-items:flex-start; gap:9px; margin-top:14px;
  padding:12px 14px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px;
  color:#1e40af; font-size:13px; font-weight:600; line-height:1.55;
}
.okulsis .obilgi .ico { flex:0 0 auto; font-size:14px; line-height:1.45; opacity:.85; }

/* ============================================================
   AÇILIR PANEL TAŞMASI (.otasma)  ·  DS v2.7
   .panel / .form-card / .spanel / .modal-card köşeleri yuvarlak dursun diye
   overflow:hidden taşır. Bu, kabın ALT KENARINA yakın bir açılır listenin
   (.combo-pop, .odate-pop) panelin dışına taşan kısmını KESİYORDU.

   okulsis-ui.js, bir liste açılırken kırpan üst kapları bu sınıfla işaretler ve
   kapanınca geri alır — yani kırpma yalnızca liste açıkken kalkar, kapalıyken
   köşeler bozulmaz. Kaydırılabilir kaplara (overflow:auto/scroll) dokunulmaz;
   orada listenin kapla birlikte kaydırılması doğrudur.
   ============================================================ */
.okulsis .otasma { overflow: visible !important; }

/* ============================================================
   SAAT ALANI (.osaat)  ·  DS v2.8
   Yerleşik <input type="time"> saati TARAYICININ diline göre gösterir; en-US
   tarayıcıda "09:00 AM" biçiminde çıkar ve sayfadan değiştirilemez. Türkiye'de
   kullanım 24 SAAT esaslı olduğundan alan maskeli bir metin kutusudur: ss:dd.

   okulsis-ui.js yazarken iki noktayı kendisi koyar, 24 saati aşan değeri kabul
   etmez ve alandan çıkarken eksik girişi tamamlar/temizler.
   ============================================================ */
.okulsis input.osaat { width:100%; text-align:center; font-variant-numeric:tabular-nums; }
.okulsis .daterange input.osaat { flex:0 0 92px; width:92px; }