/* Ad/başlıklar: Manrope ince (300) + kalın (800); gövde 400-700 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/*
 * ATAUNİ OBS — Öğrenci modülleri kurumsal tasarımı (2026-10-24).
 * obs-info tasarımının OBS (Neon / Bootstrap 3) kabuğu içine uyarlanmışı; önek: oi-.
 * Bootstrap 3 html yazı boyutunu 10px yaptığı için bütün ölçüler pikseldir (rem yoktur).
 * Yalnız açık tema. Yapı: #oiKok > .oi > (.oi-ust > .oi-hero) + .oi-govde
 *
 * İki katman vardır:
 *   1) oi- bileşenleri   : yeni elle yazılmış HTML için.
 *   2) Uyum katmanı      : JavaScript'in ürettiği eski Bootstrap/Neon işaretlemesini
 *                          (.panel .table .btn .alert .tile-* .modal-* .nav-tabs ...)
 *                          yeni tasarım diline çeviren kurallar. Sınıf adları korunur.
 */

/* ═══════════════ 1. Temel ═══════════════ */
#oiKok { margin: 0; }
.oi {
  --oi-olcek: 1;
  --theme-light-page: #f7f7fa;
  --theme-light-page-soft: #fbfbfd;
  --theme-light-surface: #ffffff;
  --theme-light-ink: #171436;
  --theme-light-heading: #211261;
  --theme-light-muted: #666b7e;
  --theme-light-gold-text: #8d5c1f;
  --theme-light-line: rgba(33, 18, 97, .11);
  --theme-light-line-strong: rgba(33, 18, 97, .18);
  --theme-light-shadow-soft: rgba(33, 18, 97, .05);
  --theme-light-hover: #f3f0fa;
  --theme-focus-ring: rgba(91, 63, 208, .35);
  --oi-lacivert: #211261;
  --oi-altin: #e1b77e;
  --oi-altin-zemin: rgba(225, 183, 126, .18);
  --oi-yesil: #1f7a4d;
  --oi-yesil-zemin: rgba(31, 122, 77, .1);
  --oi-kirmizi: #a83232;
  --oi-kirmizi-zemin: rgba(168, 50, 50, .08);
  --oi-mavi: #2a4f8f;
  --oi-mavi-zemin: rgba(42, 79, 143, .09);
  --oi-vurgu: #211261;
  --oi-hero-zemin: linear-gradient(180deg, #fbfbfe 0%, #f1f1f9 100%);
  --oi-halka-cizgi: rgba(33, 18, 97, .07);
  --oi-ic: 1320px;
  --oi-kenar: 28px;
  position: relative; margin: 0 0 24px; padding: 0 0 8px; border-radius: 22px;
  background: var(--theme-light-page); color: var(--theme-light-ink);
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 960px) { .oi { --oi-kenar: 16px; border-radius: 16px; } }

/* Neon / Bootstrap sıfırlaması — yalnız bu sayfanın içinde, düşük özgüllükte */
:where(.oi) *, :where(.oi) *::before, :where(.oi) *::after { box-sizing: border-box; }
:where(.oi) :where(h1, h2, h3, h4, h5, h6) { font-family: inherit; text-transform: none; }
:where(.oi) a { color: inherit; }
:where(.oi) a:hover, :where(.oi) a:focus { text-decoration: none; }
:where(.oi) ul, :where(.oi) ol { margin: 0; }
:where(.oi) p { margin: 0; }
:where(.oi) code { font-family: inherit; white-space: nowrap; }
:where(.oi) svg { flex: none; vertical-align: middle; }
:where(.oi) img { max-width: 100%; }
.oi dil { display: inline; }
.oi center { text-align: left; }

/* ═══════════════ 2. Sayfa başlığı (hero) ═══════════════ */
.oi-ust { overflow: hidden; border: 1px solid var(--theme-light-line); border-radius: 22px 22px 0 0; background: var(--theme-light-surface); }
@media (max-width: 960px) { .oi-ust { border-radius: 16px 16px 0 0; } }

.oi-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 26px var(--oi-kenar) 24px; background: var(--oi-hero-zemin); border-bottom: 1px solid var(--theme-light-line);
}
.oi-hero::before, .oi-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid var(--oi-halka-cizgi); }
.oi-hero::before { width: 900px; height: 900px; right: -300px; top: -420px; box-shadow: 0 0 0 120px rgba(33, 18, 97, .018); }
.oi-hero::after { width: 560px; height: 560px; right: -120px; top: -240px; border-style: dashed; }
.oi-hero-ic {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px 20px;
  max-width: var(--oi-ic); margin: 0 auto;
}
.oi-hero-ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--oi-lacivert); color: var(--oi-altin); box-shadow: 0 10px 22px rgba(33, 18, 97, .18); }
.oi-hero-metin { min-width: 0; }
.oi-ust-cizgi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 7px;
  color: var(--oi-vurgu); font-size: 10.88px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.oi-ust-cizgi::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.oi-ust-cizgi i { font-style: normal; color: var(--theme-light-muted); opacity: .6; }
.oi .oi-ad {
  position: relative; margin: 0; padding-bottom: 12px; color: var(--theme-light-ink);
  font-size: 32px; font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
}
.oi .oi-ad b, .oi .oi-ad strong { font-weight: 800; letter-spacing: -.01em; }
.oi-ad::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 240px; max-width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #8b5cf6 0%, #5b3fd0 42%, var(--theme-light-line) 46%, transparent 100%);
}
@media (max-width: 1100px) { .oi .oi-ad { font-size: 27.2px; } }
.oi-aciklama { margin: 12px 0 0; max-width: 820px; color: var(--theme-light-muted); font-size: 13.44px; line-height: 1.6; }
.oi-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--theme-light-muted); font-size: 12.8px; }
.oi-meta:empty { display: none; }
.oi-meta li { display: inline-flex; align-items: center; gap: 7px; }
.oi-meta svg { color: var(--oi-vurgu); opacity: .8; }
.oi-hero-islem { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

@media (max-width: 760px) {
  .oi-hero { padding: 20px var(--oi-kenar); }
  .oi-hero-ic { grid-template-columns: 44px minmax(0, 1fr); }
  .oi-hero-ikon { width: 44px; height: 44px; border-radius: 13px; }
  .oi .oi-ad { font-size: 22.4px; }
  .oi-hero-islem { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ═══════════════ 3. Gövde ═══════════════ */
.oi-govde {
  display: flex; flex-direction: column; gap: 16px;
  max-width: var(--oi-ic); margin: 0 auto; padding: 22px var(--oi-kenar) 24px; box-sizing: content-box;
}
.oi .oi-govde { box-sizing: content-box; }
.oi-panel { min-width: 0; }
.oi-panel > * + * { margin-top: 16px; }
@media (max-width: 760px) { .oi-govde { padding-top: 18px; gap: 14px; } }

/* Kart */
.oi-kart {
  position: relative; overflow: hidden; padding: 22px 26px 24px;
  border: 1px solid var(--theme-light-line); border-radius: 18px; background: var(--theme-light-surface);
  box-shadow: 0 6px 18px var(--theme-light-shadow-soft);
}
.oi-kart::after {
  content: ""; position: absolute; right: -180px; top: -200px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid var(--oi-halka-cizgi); pointer-events: none;
}
.oi-kart > * { position: relative; }
.oi .oi-kart-baslik {
  position: relative; margin: 0 0 16px; color: var(--theme-light-heading); font-size: 22.4px;
  font-weight: 700; line-height: 1.15; letter-spacing: -.025em;
}
.oi .oi-kart-baslik small { display: block; margin-top: 5px; color: var(--theme-light-muted); font-size: 12.8px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 1100px) { .oi .oi-kart-baslik { font-size: 19.2px; } }
.oi-kart-ust { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.oi .oi-kart-ust .oi-kart-baslik { margin: 0; }
.oi-kart-islem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 760px) { .oi-kart { padding: 18px 16px; border-radius: 16px; } }

/* Bölüm başlığı (kart içindeki ara başlıklar) */
.oi .oi-bolum-baslik {
  display: flex; align-items: center; gap: 9px; margin: 22px 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--theme-light-line);
  color: var(--theme-light-heading); font-size: 13.12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.oi .oi-bolum-baslik:first-child { margin-top: 0; }
.oi .oi-bolum-baslik::before { content: ""; flex: none; width: 4px; height: 15px; border-radius: 2px; background: var(--oi-altin); }
.oi .oi-bolum-baslik svg { color: var(--oi-vurgu); }

/* ═══════════════ 4. Rozet, durum, boş durum ═══════════════ */
.oi-durum { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--theme-light-hover); color: var(--oi-vurgu); font-size: 10.88px; font-weight: 700; white-space: nowrap; }
.oi-durum-olumlu { background: var(--oi-yesil-zemin); color: var(--oi-yesil); }
.oi-durum-bekleyen { background: var(--oi-altin-zemin); color: var(--theme-light-gold-text); }
.oi-durum-olumsuz { background: var(--oi-kirmizi-zemin); color: var(--oi-kirmizi); }
.oi-etiket { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--theme-light-hover); color: var(--oi-vurgu); font-size: 9.92px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.oi-sayi { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--theme-light-hover); color: var(--theme-light-muted); font-size: 10.88px; line-height: 18px; text-align: center; }
.oi-sayi.is-var { background: #e1b77e; color: #1b1a4b; }
.oi-bos { padding: 26px 16px; border: 1px dashed var(--theme-light-line-strong); border-radius: 14px; background: var(--theme-light-page-soft); color: var(--theme-light-muted); font-size: 13.44px; text-align: center; }
.oi-bos b { display: block; margin-bottom: 4px; color: var(--theme-light-heading); font-size: 14.4px; }
.oi-bos-satir { padding: 12px 0; color: var(--theme-light-muted); font-size: 13.76px; }

/* ═══════════════ 5. Satır listesi ═══════════════ */
.oi .oi-satirlar { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.oi-satir {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1px solid var(--theme-light-line); border-radius: 12px; background: var(--theme-light-page-soft);
  transition: border-color .15s ease, background .15s ease;
}
.oi-satir:hover { border-color: var(--theme-light-line-strong); background: var(--theme-light-surface); }
.oi-satir-acil { border-color: rgba(225, 183, 126, .7); background: linear-gradient(100deg, var(--oi-altin-zemin), transparent 70%), var(--theme-light-surface); }
.oi-satir-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--theme-light-hover); color: var(--oi-vurgu); }
.oi-satir-acil .oi-satir-ikon { background: #e1b77e; color: #1b1a4b; }
.oi-satir-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.4; }
.oi-satir-metin b { color: var(--theme-light-heading); font-size: calc(14.4px * var(--oi-olcek)); font-weight: 700; }
.oi-satir-metin small { color: var(--theme-light-muted); font-size: calc(12.48px * var(--oi-olcek)); }
.oi-tarih { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.oi-tarih small { color: var(--theme-light-muted); font-size: 9.92px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.oi-tarih b { color: var(--theme-light-heading); font-size: 13.44px; }
.oi-tarih em { font-style: normal; color: var(--theme-light-gold-text); font-size: 10.88px; font-weight: 700; }
.oi .oi-no { padding: 2px 7px; border-radius: 6px; background: var(--theme-light-surface); border: 1px solid var(--theme-light-line); color: var(--theme-light-muted); font-size: 11.84px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .oi-satir { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; padding: 12px; }
  .oi-satir > .oi-tarih, .oi-satir > .oi-durum { grid-column: 2; justify-self: start; align-items: flex-start; text-align: left; }
  .oi-satir > .oi-dugme, .oi-satir > .oi-no { grid-column: 2; justify-self: start; }
  .oi-satir > span:empty { display: none; }
  .oi-satir-ikon { width: 32px; height: 32px; }
}

/* ═══════════════ 6. Ölçü kutuları (istatistik) ═══════════════ */
.oi-olculer { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.oi-olcu {
  position: relative; overflow: hidden; padding: 14px 16px; border: 1px solid var(--theme-light-line); border-radius: 14px;
  background: var(--theme-light-page-soft);
}
.oi-olcu::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--oi-altin); }
.oi-olcu small { display: block; color: var(--theme-light-muted); font-size: 10.88px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.oi-olcu b { display: block; margin-top: 5px; color: var(--theme-light-heading); font-size: 25.6px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oi-olcu b:empty::after { content: "—"; color: var(--theme-light-muted); font-weight: 400; }
.oi-olcu-vurgu { background: linear-gradient(120deg, var(--oi-altin-zemin), transparent 70%), var(--theme-light-surface); border-color: rgba(225, 183, 126, .55); }

/* ═══════════════ 7. Kısayollar / döşeme kartları ═══════════════ */
.oi-kisayollar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.oi-kisayollar:empty { display: none; }
@media (max-width: 1100px) { .oi-kisayollar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .oi-kisayollar { grid-template-columns: minmax(0, 1fr); } }
.oi-kisayol {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--theme-light-line); border-radius: 14px; background: var(--theme-light-surface);
  box-shadow: 0 4px 14px var(--theme-light-shadow-soft); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.oi-kisayol-ikon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--theme-light-hover); color: var(--oi-vurgu); transition: background .15s ease, color .15s ease;
}
.oi-kisayol-metin { display: block; min-width: 0; line-height: 1.3; }
.oi-kisayol-metin b { display: block; color: var(--theme-light-heading); font-size: 13.44px; font-weight: 700; }
.oi-kisayol-metin small { display: block; color: var(--theme-light-muted); font-size: 11.52px; }
.oi-kisayol:hover { border-color: rgba(225, 183, 126, .7); box-shadow: 0 8px 20px var(--theme-light-shadow-soft); transform: translateY(-1px); }
.oi-kisayol:hover .oi-kisayol-ikon { background: #e1b77e; color: #1b1a4b; }
.oi-kisayol:focus-visible { outline: 3px solid var(--theme-focus-ring); outline-offset: 2px; }

/* ═══════════════ 8. Düğmeler ═══════════════ */
.oi .oi-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--theme-light-line-strong); background: var(--theme-light-surface); color: var(--oi-vurgu);
  font-family: inherit; font-size: 12.48px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.oi .oi-dugme:hover { background: var(--theme-light-hover); border-color: var(--oi-vurgu); color: var(--oi-vurgu); }
.oi .oi-dugme-ana { border-color: #211261; background: #211261; color: #fff; box-shadow: 0 4px 10px rgba(33, 18, 97, .18); }
.oi .oi-dugme-ana:hover { border-color: #1b1a4b; background: #1b1a4b; color: #e1b77e; }
.oi .oi-dugme-altin { border-color: #e1b77e; background: #e1b77e; color: #1b1a4b; }
.oi .oi-dugme-altin:hover { border-color: #d3a365; background: #d3a365; color: #1b1a4b; }
.oi .oi-dugme-tehlike { border-color: rgba(168, 50, 50, .4); background: var(--oi-kirmizi-zemin); color: var(--oi-kirmizi); }
.oi .oi-dugme-tehlike:hover { border-color: var(--oi-kirmizi); background: var(--oi-kirmizi); color: #fff; }
.oi-dugme:focus-visible { outline: 3px solid var(--theme-focus-ring); outline-offset: 2px; }

/* ═══════════════ 9. Uyarı kutuları ═══════════════ */
.oi-uyari {
  position: relative; padding: 14px 16px 14px 44px; border: 1px solid var(--theme-light-line); border-radius: 12px;
  background: var(--theme-light-page-soft); color: var(--theme-light-ink); font-size: 13.12px; line-height: 1.6;
}
.oi-uyari::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--oi-vurgu); }
.oi-uyari-ikon { position: absolute; left: 16px; top: 15px; color: var(--oi-vurgu); }
.oi .oi-uyari b { color: var(--theme-light-heading); }
.oi .oi-uyari ul, .oi .oi-uyari ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.oi .oi-uyari li::marker { color: var(--oi-altin); }
.oi .oi-uyari p + p { margin-top: 6px; }
.oi .oi-uyari a { color: var(--oi-vurgu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.oi-uyari-dikkat { background: linear-gradient(100deg, var(--oi-altin-zemin), transparent 70%), var(--theme-light-surface); border-color: rgba(225, 183, 126, .55); }
.oi-uyari-dikkat::before, .oi-uyari-dikkat .oi-uyari-ikon { background: #e1b77e; color: var(--theme-light-gold-text); }
.oi-uyari-dikkat .oi-uyari-ikon { background: none; }
.oi-uyari-hata { background: linear-gradient(100deg, var(--oi-kirmizi-zemin), transparent 70%), var(--theme-light-surface); border-color: rgba(168, 50, 50, .3); }
.oi-uyari-hata::before { background: var(--oi-kirmizi); }
.oi-uyari-hata .oi-uyari-ikon { color: var(--oi-kirmizi); }
.oi-uyari-olumlu { background: linear-gradient(100deg, var(--oi-yesil-zemin), transparent 70%), var(--theme-light-surface); border-color: rgba(31, 122, 77, .3); }
.oi-uyari-olumlu::before { background: var(--oi-yesil); }
.oi-uyari-olumlu .oi-uyari-ikon { color: var(--oi-yesil); }

/* ═══════════════ 10. Form alanları (yeni) ═══════════════ */
.oi-izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.oi-izgara > .oi-alan { grid-column: span 6; }
.oi-izgara > .oi-g3 { grid-column: span 3; }
.oi-izgara > .oi-g4 { grid-column: span 4; }
.oi-izgara > .oi-g6 { grid-column: span 6; }
.oi-izgara > .oi-g8 { grid-column: span 8; }
.oi-izgara > .oi-g12 { grid-column: span 12; }
@media (max-width: 1100px) { .oi-izgara > .oi-alan, .oi-izgara > .oi-g3, .oi-izgara > .oi-g4 { grid-column: span 6; } }
@media (max-width: 760px) { .oi-izgara > * { grid-column: span 12 !important; } }
.oi-alan { min-width: 0; }
.oi .oi-alan > label, .oi .oi-etiket-alan { display: block; margin: 0 0 6px; color: var(--theme-light-heading); font-size: 11.84px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.oi-alan-ipucu { display: block; margin-top: 5px; color: var(--theme-light-muted); font-size: 11.52px; line-height: 1.5; }

/* ═══════════════ 11. Tablo sarmalı ═══════════════ */
.oi-tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--theme-light-line); border-radius: 14px; background: var(--theme-light-surface); }
.oi-cerceve { overflow: hidden; border: 1px solid var(--theme-light-line); border-radius: 18px; background: var(--theme-light-surface); box-shadow: 0 6px 18px var(--theme-light-shadow-soft); }
.oi-cerceve:empty { display: none; }
.oi-cerceve iframe { display: block; width: 100%; border: 0; }

/* ═══════════════ 12. Süzgeç çubuğu ═══════════════ */
.oi-suzgec-cubugu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.oi-suzgec-cubugu > .oi-alan { flex: 1 1 240px; min-width: 0; }
.oi-suzgec { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--theme-light-page-soft); border: 1px solid var(--theme-light-line); }
.oi-suzgec button, .oi-suzgec label {
  margin: 0; padding: 5px 13px; border: 0; border-radius: 999px; background: none; color: var(--theme-light-muted);
  font: inherit; font-size: 11.84px; font-weight: 600; line-height: 1.5; cursor: pointer;
}
.oi-suzgec button:hover, .oi-suzgec label:hover { color: var(--theme-light-heading); }
.oi-suzgec button.is-secili, .oi-suzgec label.active { background: var(--theme-light-surface); color: var(--theme-light-heading); box-shadow: 0 2px 8px var(--theme-light-shadow-soft), 0 0 0 1px var(--theme-light-line); }
.oi-suzgec input[type="radio"], .oi-suzgec input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

/* ═══════════════ 13. Ayrıntı (açılır metin) ═══════════════ */
.oi-ayrinti summary { display: inline-flex; align-items: center; gap: 4px; color: var(--oi-vurgu); font-size: 12.48px; font-weight: 700; cursor: pointer; list-style: none; }
.oi-ayrinti summary::-webkit-details-marker { display: none; }
.oi-ayrinti summary svg { transition: transform .15s ease; }
.oi-ayrinti[open] summary svg { transform: rotate(180deg); }
.oi-ayrinti-metin { margin-top: 10px; color: var(--theme-light-muted); font-size: 13.12px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
 *  UYUM KATMANI — eski Bootstrap 3 / Neon işaretlemesi
 *  (JavaScript'in ürettiği HTML dâhil) yeni tasarım diline çevrilir.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Izgara: Bootstrap float ızgarası korunur, boşluklar yumuşatılır ── */
.oi .row { margin-left: -8px; margin-right: -8px; }
.oi [class*="col-xs-"], .oi [class*="col-sm-"], .oi [class*="col-md-"], .oi [class*="col-lg-"] { padding-left: 8px; padding-right: 8px; }
.oi .row:not(.oi-ham)::before, .oi .row:not(.oi-ham)::after { content: " "; display: table; }
.oi .row:not(.oi-ham)::after { clear: both; }
.oi .clearfix::after { content: " "; display: table; clear: both; }

/* ── Başlıklar ── */
.oi h1, .oi h2, .oi h3 { color: var(--theme-light-heading); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.oi h1 { margin: 0 0 12px; font-size: 25.6px; }
.oi h2 { margin: 0 0 12px; font-size: 22.4px; }
.oi h3 { margin: 0 0 10px; font-size: 19.2px; }
.oi h1 > small, .oi h2 > small, .oi h3 > small { display: block; color: var(--theme-light-heading); font-size: inherit; font-weight: 700; }
.oi h1 > i[class^="entypo-"], .oi h2 > i[class^="entypo-"], .oi h3 > i[class^="entypo-"] { margin-right: 8px; color: var(--oi-vurgu); opacity: .8; }
/* h4/h5: bölüm başlığı görünümü (eski şablonlarda bölüm ayırıcı olarak kullanılır) */
.oi h4, .oi h5 {
  display: flex; align-items: center; gap: 9px; margin: 20px 0 12px; padding-bottom: 8px; min-height: 0;
  border-bottom: 1px solid var(--theme-light-line);
  color: var(--theme-light-heading); font-size: 13.12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; line-height: 1.35;
}
.oi h4::before, .oi h5::before { content: ""; flex: none; width: 4px; height: 15px; border-radius: 2px; background: var(--oi-altin); }
.oi h4.modal-title, .oi h5.modal-title { margin: 0; padding: 0; border: 0; }
.oi h4.modal-title::before, .oi h5.modal-title::before { display: none; }
.oi h4 > small, .oi h5 > small { color: inherit; font-size: inherit; font-weight: inherit; }
.oi hr { margin: 14px 0; border: 0; border-top: 1px solid var(--theme-light-line); }
/* Başlıktan hemen sonra gelen ayırıcı çizgi gereksizdir */
.oi h1 + hr, .oi h2 + hr, .oi h3 + hr, .oi h4 + hr, .oi h5 + hr { display: none; }
.oi p { line-height: 1.6; }
.oi label { font-weight: 600; }
.oi strong, .oi b { font-weight: 700; }
.oi a:not(.btn):not(.oi-dugme):not(.oi-kisayol) { color: var(--oi-vurgu); }
.oi a:not(.btn):not(.oi-dugme):not(.oi-kisayol):hover { color: #4a2fb0; text-decoration: underline; text-underline-offset: 2px; }

/* ── Uyarı kutuları (.alert) ── */
.oi .alert {
  position: relative; margin: 0 0 14px; padding: 14px 16px 14px 18px; border: 1px solid var(--theme-light-line); border-radius: 12px;
  background: var(--theme-light-page-soft); color: var(--theme-light-ink);
  font-size: 13.12px; line-height: 1.6; text-shadow: none; box-shadow: none;
}
.oi .alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: var(--oi-vurgu); }
.oi .alert:last-child { margin-bottom: 0; }
.oi .alert > center { text-align: left; }
.oi .alert strong, .oi .alert b { color: var(--theme-light-heading); font-weight: 700; }
.oi .alert ul, .oi .alert ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; list-style: disc; }
.oi .alert li { list-style: disc; }
.oi .alert li::marker { color: var(--oi-altin); }
.oi .alert a { color: var(--oi-vurgu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.oi .alert-danger, .oi .alert-error { background: linear-gradient(100deg, var(--oi-kirmizi-zemin), transparent 72%), var(--theme-light-surface); border-color: rgba(168, 50, 50, .3); color: var(--theme-light-ink); }
.oi .alert-danger::before, .oi .alert-error::before { background: var(--oi-kirmizi); }
.oi .alert-danger strong, .oi .alert-error strong { color: var(--oi-kirmizi); }
.oi .alert-warning { background: linear-gradient(100deg, var(--oi-altin-zemin), transparent 72%), var(--theme-light-surface); border-color: rgba(225, 183, 126, .55); color: var(--theme-light-ink); }
.oi .alert-warning::before { background: #e1b77e; }
.oi .alert-warning strong { color: var(--theme-light-gold-text); }
.oi .alert-success { background: linear-gradient(100deg, var(--oi-yesil-zemin), transparent 72%), var(--theme-light-surface); border-color: rgba(31, 122, 77, .3); color: var(--theme-light-ink); }
.oi .alert-success::before { background: var(--oi-yesil); }
.oi .alert-success strong { color: var(--oi-yesil); }
.oi .alert-info { background: var(--theme-light-page-soft); border-color: var(--theme-light-line); }
.oi .alert-info::before { background: var(--oi-vurgu); }
/* Izgara sınıfı da taşıyan uyarılar taşmasın */
.oi .row.alert { margin-left: 0; margin-right: 0; }

/* ── Düğmeler (.btn) ── */
.oi .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 15px;
  border: 1px solid var(--theme-light-line-strong); border-radius: 999px;
  background: var(--theme-light-surface); background-image: none; color: var(--oi-vurgu);
  font-family: inherit; font-size: 12.48px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  text-shadow: none; text-transform: none; box-shadow: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.oi .btn:hover, .oi .btn:focus { background: var(--theme-light-hover); border-color: var(--oi-vurgu); color: var(--oi-vurgu); box-shadow: none; }
.oi .btn > i, .oi .btn > span > i { margin: 0; font-size: 13.6px; }
.oi .btn.btn-icon { padding-left: 15px; padding-right: 15px; }
.oi .btn.btn-icon::after, .oi .btn.btn-icon::before { display: none; }
.oi .btn-lg { min-height: 40px; padding: 7px 20px; font-size: 13.44px; }
.oi .btn-sm, .oi .btn-xs { min-height: 28px; padding: 2px 11px; font-size: 11.52px; }
.oi .btn-block { display: flex; width: 100%; }
.oi .btn[disabled], .oi .btn.disabled { opacity: .5; cursor: not-allowed; }
.oi .btn:focus-visible { outline: 3px solid var(--theme-focus-ring); outline-offset: 2px; }
/* Birincil (kurumsal lacivert) */
.oi .btn-primary, .oi .btn-blue, .oi .btn-info, .oi .btn-purple, .oi .btn-dark, .oi .btn-secondary {
  border-color: #211261; background: #211261; color: #fff; box-shadow: 0 4px 10px rgba(33, 18, 97, .18);
}
.oi .btn-primary:hover, .oi .btn-blue:hover, .oi .btn-info:hover, .oi .btn-purple:hover, .oi .btn-dark:hover, .oi .btn-secondary:hover,
.oi .btn-primary:focus, .oi .btn-blue:focus, .oi .btn-info:focus, .oi .btn-purple:focus, .oi .btn-dark:focus, .oi .btn-secondary:focus {
  border-color: #1b1a4b; background: #1b1a4b; color: #e1b77e;
}
/* Onay / kaydet (yeşil) */
.oi .btn-success, .oi .btn-green, .oi .btn-teal {
  border-color: var(--oi-yesil); background: var(--oi-yesil); color: #fff; box-shadow: 0 4px 10px rgba(31, 122, 77, .18);
}
.oi .btn-success:hover, .oi .btn-green:hover, .oi .btn-teal:hover,
.oi .btn-success:focus, .oi .btn-green:focus, .oi .btn-teal:focus { border-color: #18613d; background: #18613d; color: #fff; }
/* Tehlike (kırmızı) */
.oi .btn-danger, .oi .btn-red, .oi .btn-pink {
  border-color: var(--oi-kirmizi); background: var(--oi-kirmizi); color: #fff; box-shadow: 0 4px 10px rgba(168, 50, 50, .18);
}
.oi .btn-danger:hover, .oi .btn-red:hover, .oi .btn-pink:hover,
.oi .btn-danger:focus, .oi .btn-red:focus, .oi .btn-pink:focus { border-color: #8c2828; background: #8c2828; color: #fff; }
/* Uyarı (altın) */
.oi .btn-warning, .oi .btn-orange, .oi .btn-gold {
  border-color: #e1b77e; background: #e1b77e; color: #1b1a4b; box-shadow: 0 4px 10px rgba(225, 183, 126, .25);
}
.oi .btn-warning:hover, .oi .btn-orange:hover, .oi .btn-gold:hover,
.oi .btn-warning:focus, .oi .btn-orange:focus, .oi .btn-gold:focus { border-color: #d3a365; background: #d3a365; color: #1b1a4b; }
/* İkincil */
.oi .btn-default, .oi .btn-white, .oi .btn-gray, .oi .btn-grey { border-color: var(--theme-light-line-strong); background: var(--theme-light-surface); color: var(--oi-vurgu); }
.oi .btn-link { border-color: transparent; background: none; color: var(--oi-vurgu); box-shadow: none; text-decoration: underline; }
.oi .btn-link:hover { border-color: transparent; background: none; }
/* Düğme kümesi */
.oi .btn-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--theme-light-page-soft); border: 1px solid var(--theme-light-line); vertical-align: middle; }
.oi .btn-group > .btn { min-height: 28px; padding: 3px 13px; border: 0; background: none; box-shadow: none; color: var(--theme-light-muted); font-size: 11.84px; font-weight: 600; }
.oi .btn-group > .btn:hover { background: none; color: var(--theme-light-heading); }
.oi .btn-group > .btn.active { background: var(--theme-light-surface); color: var(--theme-light-heading); font-weight: 700; box-shadow: 0 2px 8px var(--theme-light-shadow-soft), 0 0 0 1px var(--theme-light-line); }
.oi .btn-group > .btn > input[type="radio"], .oi .btn-group > .btn > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.oi .pull-right { float: right; }
.oi .pull-left { float: left; }
.oi .right { float: right; }
.oi p.right, .oi p.pull-right { margin-bottom: 10px; }

/* ── Form denetimleri ── */
.oi .form-group { margin: 0 0 14px; }
.oi .form-group:last-child { margin-bottom: 0; }
.oi .control-label, .oi .form-group > label {
  display: block; margin: 0 0 6px; padding: 0; color: var(--theme-light-heading);
  font-size: 11.84px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; line-height: 1.4;
}
.oi .form-control, .oi input[type="text"]:not(.oi-ham), .oi input[type="password"], .oi input[type="email"],
.oi input[type="number"], .oi input[type="tel"], .oi input[type="date"], .oi textarea, .oi select {
  display: block; width: 100%; min-height: 38px; padding: 7px 12px;
  border: 1px solid var(--theme-light-line-strong); border-radius: 10px;
  background: var(--theme-light-surface); background-image: none; color: var(--theme-light-ink);
  font-family: inherit; font-size: 13.44px; line-height: 1.5; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.oi select:not([multiple]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23211261' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.oi textarea, .oi textarea.form-control { min-height: 86px; resize: vertical; line-height: 1.6; }
.oi .form-control:focus, .oi textarea:focus, .oi select:focus, .oi input:focus {
  border-color: var(--oi-vurgu); box-shadow: 0 0 0 3px var(--theme-focus-ring); outline: 0;
}
.oi .form-control[disabled], .oi .form-control[readonly], .oi select[disabled], .oi textarea[disabled], .oi input[disabled] {
  background: var(--theme-light-page-soft); border-color: var(--theme-light-line); color: var(--theme-light-muted); cursor: default;
}
.oi .form-control::placeholder { color: var(--theme-light-muted); opacity: .75; }
.oi .input-lg, .oi .form-control.input-lg { min-height: 42px; padding: 9px 13px; font-size: 13.76px; }
.oi .input-sm, .oi .form-control.input-sm { min-height: 32px; padding: 4px 10px; font-size: 12.48px; }
.oi input[type="file"] {
  display: block; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px dashed var(--theme-light-line-strong);
  border-radius: 10px; background: var(--theme-light-page-soft); color: var(--theme-light-muted);
  font-family: inherit; font-size: 12.8px; cursor: pointer;
}
.oi input[type="file"]:hover { border-color: var(--oi-altin); background: var(--oi-altin-zemin); }
.oi input[type="checkbox"], .oi input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 0 6px 0 0; padding: 0; accent-color: #211261; vertical-align: middle; cursor: pointer; }
.oi .checkbox, .oi .radio { position: relative; display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; min-height: 0; }
.oi .checkbox label, .oi .radio label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; color: var(--theme-light-ink); font-size: 13.12px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.oi .help-block { margin: 5px 0 0; color: var(--theme-light-muted); font-size: 11.52px; line-height: 1.5; }
.oi .has-error .form-control, .oi .form-control.hata, .oi .form-control[data-hata="1"] { border-color: var(--oi-kirmizi); }
.oi .has-error .control-label { color: var(--oi-kirmizi); }
/* Yatay form (portfolyo vb.) */
.oi .form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--theme-light-line); }
.oi .form-horizontal .form-group:last-child { border-bottom: 0; }
.oi .form-horizontal .control-label { margin: 0; flex: 1 1 200px; }
.oi .form-groups-bordered .form-group { border-bottom: 1px solid var(--theme-light-line); }
.oi .input-group { display: flex; width: 100%; }
.oi .input-group .form-control { border-radius: 10px 0 0 10px; }
.oi .input-group-btn .btn, .oi .input-group-addon { border-radius: 0 10px 10px 0; }

/* select2 / selectBoxIt uyumu */
.oi .select2-container { width: 100% !important; }
.oi .select2-container .select2-choice, .oi .select2-container-multi .select2-choices {
  min-height: 38px; padding: 6px 12px; border: 1px solid var(--theme-light-line-strong); border-radius: 10px;
  background: var(--theme-light-surface); background-image: none; box-shadow: none; color: var(--theme-light-ink);
  font-size: 13.44px; line-height: 24px;
}
.oi .select2-container .select2-choice > .select2-chosen { margin-right: 30px; color: var(--theme-light-ink); }
.oi .select2-container .select2-choice .select2-arrow { border: 0; background: none; border-radius: 0; }
.oi .select2-container .select2-choice abbr { top: 12px; }
.oi .select2-container-active .select2-choice { border-color: var(--oi-vurgu); box-shadow: 0 0 0 3px var(--theme-focus-ring); }
.oi .selectboxit-container, .oi .selectboxit-container .selectboxit { width: 100% !important; }
.oi .selectboxit-container .selectboxit {
  height: 38px; border: 1px solid var(--theme-light-line-strong); border-radius: 10px;
  background: var(--theme-light-surface); background-image: none; box-shadow: none;
}
.oi .selectboxit-container .selectboxit-text { color: var(--theme-light-ink); font-family: inherit; font-size: 13.44px; line-height: 36px; }
.oi .selectboxit-container .selectboxit-arrow-container { width: 30px; }
/* bootstrap-switch (.make-switch) */
.oi .make-switch { display: inline-block; vertical-align: middle; }
.oi .make-switch .switch-animate { border-radius: 999px; }

/* ── Paneller ── */
.oi .panel {
  position: relative; margin: 0 0 16px; border: 1px solid var(--theme-light-line); border-radius: 18px;
  background: var(--theme-light-surface); box-shadow: 0 6px 18px var(--theme-light-shadow-soft);
}
.oi .panel:last-child { margin-bottom: 0; }
.oi .panel > .panel-heading {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 22px 14px;
  border: 0; border-bottom: 1px solid var(--theme-light-line); border-radius: 18px 18px 0 0;
  background: var(--theme-light-page-soft); background-image: none; box-shadow: none; color: var(--theme-light-heading);
}
.oi .panel > .panel-heading .panel-title {
  margin: 0; padding: 0; border: 0; color: var(--theme-light-heading);
  font-size: 14.4px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35;
}
.oi .panel > .panel-heading .panel-title::before { content: none; }
.oi .panel > .panel-heading .panel-options { margin-left: auto; }
.oi .panel > .panel-body { padding: 20px 22px 22px; background: none; }
.oi .panel > .panel-footer { padding: 14px 22px; border-top: 1px solid var(--theme-light-line); border-radius: 0 0 18px 18px; background: var(--theme-light-page-soft); }
.oi .panel-shadow { box-shadow: 0 6px 18px var(--theme-light-shadow-soft); }
.oi .panel-gray, .oi .panel-grey { background: var(--theme-light-page-soft); }
@media (max-width: 760px) {
  .oi .panel > .panel-heading { padding: 14px 16px 12px; }
  .oi .panel > .panel-body { padding: 16px; }
}

/* ── Tablolar ── */
.oi .table {
  width: 100%; max-width: 100%; margin: 0 0 14px; border: 0; border-collapse: separate; border-spacing: 0;
  background: var(--theme-light-surface); color: var(--theme-light-ink); font-size: 12.8px;
}
.oi .table:last-child { margin-bottom: 0; }
.oi .table > thead > tr > th, .oi .table > thead > tr > td,
.oi .table > tbody > tr > th, .oi .table > tbody > tr > td,
.oi .table > tfoot > tr > th, .oi .table > tfoot > tr > td,
.oi .table > tr > th, .oi .table > tr > td {
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--theme-light-line); vertical-align: middle; line-height: 1.45;
}
.oi .table > thead > tr > th, .oi .table > tbody > tr:first-child > th, .oi .table > tr:first-child > th {
  background: var(--theme-light-page-soft); border-bottom: 1px solid var(--theme-light-line-strong);
  color: var(--theme-light-heading); font-size: 10.88px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-align: left; white-space: nowrap;
}
.oi .table > thead > tr > th > strong, .oi .table > tbody > tr:first-child > th > strong { font-weight: 800; }
.oi .table > tbody > tr:last-child > td { border-bottom: 0; }
.oi .table-striped > tbody > tr:nth-child(odd), .oi .table-striped > tbody > tr:nth-child(odd) > td { background: var(--theme-light-page-soft); }
.oi .table-hover > tbody > tr:hover, .oi .table-hover > tbody > tr:hover > td { background: var(--theme-light-hover); }
.oi .table-bordered, .oi .table-bordered > thead > tr > th, .oi .table-bordered > tbody > tr > td, .oi .table-bordered > tbody > tr > th, .oi .table-bordered > tr > td, .oi .table-bordered > tr > th { border-left: 0; border-right: 0; }
.oi .table-condensed > thead > tr > th, .oi .table-condensed > tbody > tr > td { padding: 7px 10px; }
.oi .table a { color: var(--oi-vurgu); font-weight: 600; }
/* Tablolar yuvarlak çerçeve içinde dursun */
.oi .table-responsive, .oi .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── DataTables kabuğu ── */
.oi .dataTables_wrapper { padding: 0; }
.oi .dataTables_wrapper .row { margin: 0 0 10px; }
.oi .dataTables_length, .oi .dataTables_filter { color: var(--theme-light-muted); font-size: 12.16px; }
.oi .dataTables_length label, .oi .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--theme-light-muted); font-size: 12.16px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.oi .dataTables_length select, .oi .dataTables_filter input { display: inline-block; width: auto; min-width: 72px; min-height: 32px; padding: 3px 28px 3px 10px; font-size: 12.48px; }
.oi .dataTables_filter input { min-width: 180px; padding-right: 10px; }
.oi .dataTables_info { padding-top: 10px; color: var(--theme-light-muted); font-size: 11.84px; }
.oi .dataTables_paginate { padding-top: 8px; }
.oi .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; border-radius: 0; }
.oi .pagination > li { display: inline-block; }
.oi .pagination > li > a, .oi .pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; padding: 0 9px;
  border: 1px solid var(--theme-light-line); border-radius: 9px; background: var(--theme-light-surface);
  color: var(--theme-light-muted); font-size: 12.16px; font-weight: 700;
}
.oi .pagination > li > a:hover { border-color: var(--oi-vurgu); background: var(--theme-light-hover); color: var(--oi-vurgu); }
.oi .pagination > .active > a, .oi .pagination > .active > span { border-color: #211261; background: #211261; color: #fff; }
.oi .pagination > .disabled > a, .oi .pagination > .disabled > span { opacity: .45; }
.oi table.dataTable thead .sorting, .oi table.dataTable thead .sorting_asc, .oi table.dataTable thead .sorting_desc { cursor: pointer; }
.oi .DTTT.btn-group, .oi .DTTT_container { margin-bottom: 10px; }

/* ── Döşeme kartları (.tile-progress / .tile-stats) ── */
.oi .tile-progress, .oi .tile-stats {
  position: relative; overflow: hidden; margin: 0 0 16px; padding: 0;
  border: 1px solid var(--theme-light-line); border-radius: 16px; background: var(--theme-light-surface);
  box-shadow: 0 6px 18px var(--theme-light-shadow-soft); color: var(--theme-light-ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.oi .tile-progress::before, .oi .tile-stats::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--oi-tile-renk, var(--oi-lacivert));
}
.oi .tile-progress:hover, .oi .tile-stats:hover { border-color: rgba(225, 183, 126, .75); box-shadow: 0 12px 26px var(--theme-light-shadow-soft); transform: translateY(-1px); }
.oi .tile-progress > .tile-header, .oi .tile-stats > .tile-header {
  display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 12px; min-height: 0 !important;
  background: none; color: var(--theme-light-heading);
}
.oi .tile-progress .tile-header h3, .oi .tile-stats .tile-header h3, .oi .tile-stats h3 {
  margin: 0; padding: 0; border: 0; color: var(--theme-light-heading);
  font-size: 15.36px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; text-transform: none;
}
.oi .tile-progress .tile-header h3::before, .oi .tile-stats h3::before { display: none; }
.oi .tile-progress .tile-header a, .oi .tile-stats .tile-header a { color: inherit; }
.oi .tile-progress > .tile-progressbar { height: 5px; margin: 0 18px; border-radius: 999px; background: var(--theme-light-hover); }
.oi .tile-progress > .tile-progressbar > span { display: block; height: 5px; border-radius: 999px; background: var(--oi-tile-renk, var(--oi-lacivert)); }
.oi .tile-progress > .tile-footer, .oi .tile-stats > .tile-footer {
  min-height: 0 !important; padding: 12px 18px 16px; background: none; color: var(--theme-light-muted); font-size: 12.16px;
}
.oi .tile-progress > .tile-footer:empty, .oi .tile-stats > .tile-footer:empty { padding: 0 0 8px; }
.oi .tile-progress > .tile-footer h4, .oi .tile-stats > .tile-footer h4 { margin: 0; padding: 0; border: 0; color: var(--theme-light-gold-text); font-size: 11.52px; letter-spacing: .05em; }
.oi .tile-progress > .tile-footer h4::before { display: none; }
.oi .tile-progress > .tile-footer .btn { margin-top: 4px; }
.oi .tile-stats > .icon, .oi .tile-progress > .icon {
  position: absolute; right: 14px; top: 14px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--theme-light-hover); color: var(--oi-tile-renk, var(--oi-lacivert)); opacity: 1;
}
.oi .tile-stats > .icon i, .oi .tile-progress > .icon i { font-size: 16px; }
.oi .tile-stats .num, .oi .tile-stats .count { color: var(--theme-light-heading); font-size: 25.6px; font-weight: 800; }
/* Döşeme renk çeşitleri: üst şerit + ilerleme rengi */
.oi .tile-green, .oi .tile-teal { --oi-tile-renk: var(--oi-yesil); }
.oi .tile-red, .oi .tile-pink { --oi-tile-renk: var(--oi-kirmizi); }
.oi .tile-orange, .oi .tile-gold { --oi-tile-renk: #c9933f; }
.oi .tile-blue, .oi .tile-cyan, .oi .tile-aqua { --oi-tile-renk: var(--oi-mavi); }
.oi .tile-purple, .oi .tile-plum, .oi .tile-magenta { --oi-tile-renk: #5b3fd0; }
.oi .tile-gray, .oi .tile-grey { --oi-tile-renk: #8d90a1; }
.oi .tile-gray .tile-header h3, .oi .tile-grey .tile-header h3 { color: var(--theme-light-muted); }
/* Başvuru döşemeleri tıklanabilir sütunlar */
.oi .onkayitlar, .oi .talep { cursor: pointer; }
.oi .onkayitlar .tile-progress { height: 100%; }

/* ── Sekmeler ── */
.oi .nav-tabs {
  display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 16px; padding: 0;
  border: 0; border-bottom: 1px solid var(--theme-light-line); list-style: none;
}
.oi .nav-tabs::before, .oi .nav-tabs::after { display: none; }
.oi .nav-tabs > li { float: none; flex: none; margin: 0; }
.oi .nav-tabs > li > a {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 10px 0 10px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  color: var(--theme-light-muted); font-size: 13.44px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer;
}
.oi .nav-tabs > li > a:hover, .oi .nav-tabs > li > a:focus { border-color: transparent; background: none; color: var(--theme-light-heading); }
.oi .nav-tabs > li.active > a, .oi .nav-tabs > li.active > a:hover, .oi .nav-tabs > li.active > a:focus {
  border: 0; border-bottom: 2px solid var(--oi-vurgu); background: none; color: var(--theme-light-heading); font-weight: 800;
}
.oi .nav-tabs > li > a i { margin: 0; color: var(--oi-vurgu); opacity: .8; }
.oi .nav-tabs.bordered { border-bottom: 1px solid var(--theme-light-line); }
.oi .tab-content { padding: 0; }
.oi .tab-content > .tab-pane { display: none; }
.oi .tab-content > .tab-pane.active { display: block; }

/* ── İlerleme çubuğu ── */
.oi .progress {
  display: flex; height: 22px; margin: 0 0 12px; overflow: hidden; border-radius: 999px;
  background: var(--theme-light-hover); box-shadow: none;
}
.oi .progress:last-child { margin-bottom: 0; }
.oi .progress > .progress, .oi .progress .progress { height: 100%; margin: 0; border-radius: 0; background: none; flex: 1; }
.oi .progress-bar {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px;
  background-image: none; box-shadow: none; color: #fff; font-size: 10.88px; font-weight: 700; line-height: 1;
  text-shadow: none; white-space: nowrap; overflow: hidden;
}
.oi .progress-bar span { overflow: hidden; text-overflow: ellipsis; }

/* ── Etiket / rozet ── */
.oi .label, .oi .badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--theme-light-hover); background-image: none; color: var(--oi-vurgu);
  font-size: 10.88px; font-weight: 700; line-height: 1.5; text-shadow: none; box-shadow: none; vertical-align: middle;
}
.oi .label-primary, .oi .badge-primary, .oi .label-info, .oi .badge-info { background: var(--oi-lacivert); color: #fff; }
.oi .label-success, .oi .badge-success { background: var(--oi-yesil-zemin); color: var(--oi-yesil); }
.oi .label-danger, .oi .badge-danger, .oi .label-important { background: var(--oi-kirmizi); color: #fff; }
.oi .label-warning, .oi .badge-warning { background: var(--oi-altin-zemin); color: var(--theme-light-gold-text); }
.oi .label-secondary, .oi .label-default, .oi .badge-default { background: var(--theme-light-hover); color: var(--theme-light-muted); }
.oi a.badge, .oi a.label { text-decoration: none; }
.oi a.badge:hover, .oi a.label:hover { text-decoration: none; opacity: .9; }

/* ── Kipler (modal) ── */
.oi .modal-dialog { margin: 30px auto; }
.oi .modal-content {
  border: 1px solid var(--theme-light-line); border-radius: 18px; background: var(--theme-light-surface);
  box-shadow: 0 24px 60px rgba(33, 18, 97, .28); font-family: inherit; font-size: 16px; line-height: 1.5;
  color: var(--theme-light-ink);
}
.oi .modal-header {
  display: flex; align-items: center; gap: 10px; padding: 18px 24px 15px; border-bottom: 1px solid var(--theme-light-line);
  border-radius: 18px 18px 0 0; background: var(--theme-light-page-soft);
}
.oi .modal-header::before { content: ""; flex: none; width: 4px; height: 17px; border-radius: 2px; background: var(--oi-altin); }
.oi .modal-header .modal-title {
  margin: 0; padding: 0; border: 0; color: var(--theme-light-heading);
  font-size: 15.36px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.35;
}
.oi .modal-header .close { margin-left: auto; opacity: .5; font-size: 22px; }
.oi .modal-body { padding: 22px 24px; }
.oi .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 15px 24px 18px; margin: 0; border-top: 1px solid var(--theme-light-line); border-radius: 0 0 18px 18px; background: var(--theme-light-page-soft); }
.oi .modal-footer .btn + .btn { margin: 0; }
@media (max-width: 760px) {
  .oi .modal-dialog { width: auto !important; margin: 14px; }
  .oi .modal-header, .oi .modal-footer { padding-left: 16px; padding-right: 16px; }
  .oi .modal-body { padding: 16px; }
}

/* ── Zaman çizelgesi (mesajlaşma) ── */
.oi .cbp_tmtimeline, .oi .timeline-centered { position: relative; margin: 0; padding: 0; list-style: none; }
.oi .cbp_tmtimeline::before, .oi .timeline-centered::before { display: none; }
.oi .cbp_tmtimeline > li { position: relative; display: block; margin: 0 0 12px; padding: 0; }
.oi .cbp_tmtimeline > li::before, .oi .cbp_tmtimeline > li::after { display: none; }
.oi .cbp_tmtimeline > li .cbp_tmtime, .oi .timeline-entry .timeline-time {
  position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: auto; padding: 0 0 5px;
  color: var(--theme-light-muted); font-size: 11.2px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left;
}
.oi .cbp_tmtimeline > li .cbp_tmtime span, .oi .timeline-entry .timeline-time span { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.oi .cbp_tmtimeline > li .cbp_tmicon, .oi .timeline-entry .timeline-icon {
  position: absolute; right: 0; top: 0; left: auto; display: grid; place-items: center; width: 30px; height: 30px; margin: 0;
  border: 0; border-radius: 10px; background: var(--theme-light-hover); color: var(--oi-vurgu);
  box-shadow: none; font-size: 15px; text-align: center; line-height: 30px;
}
.oi .cbp_tmtimeline > li .cbp_tmlabel, .oi .timeline-entry .timeline-label {
  position: relative; width: auto; margin: 0 0 0 0; padding: 14px 16px;
  border: 1px solid var(--theme-light-line); border-radius: 14px; background: var(--theme-light-surface);
  box-shadow: 0 4px 14px var(--theme-light-shadow-soft); color: var(--theme-light-ink); font-size: 13.44px; line-height: 1.6;
}
.oi .cbp_tmtimeline > li .cbp_tmlabel::after, .oi .timeline-entry .timeline-label::after,
.oi .cbp_tmtimeline > li .cbp_tmlabel::before, .oi .timeline-entry .timeline-label::before { display: none; }
.oi .cbp_tmtimeline > li .cbp_tmlabel h2, .oi .timeline-entry .timeline-label h2 { margin: 0 0 6px; padding: 0 44px 0 0; border: 0; color: var(--theme-light-heading); font-size: 13.44px; font-weight: 800; }
.oi .timeline-entry { position: relative; display: block; margin: 0 0 12px; padding: 0; }
.oi .timeline-entry::before, .oi .timeline-entry::after { display: none; }
.oi .timeline-entry-inner { position: relative; margin: 0; }
.oi .timeline-entry-inner::before, .oi .timeline-entry-inner::after { display: none; }
.oi .bg-secondary, .oi .bg-danger { background: var(--theme-light-hover) !important; color: var(--oi-vurgu) !important; }

/* ── Profil kabuğu (portfolyo) ── */
.oi .profile-env { margin: 0; padding: 0; background: none; border: 0; }
.oi .profile-env > header { margin: 0; padding: 0; border: 0; background: none; }
.oi .profile-info-sections { margin: 0; padding: 0; border: 0; list-style: none; }
.oi .profile-info-sections > li { margin: 0; padding: 0; border: 0; }
.oi .profile-name { margin: 0; }
.oi .profile-name > strong { display: block; color: var(--theme-light-heading); font-size: 25.6px; font-weight: 800; letter-spacing: -.02em; }
.oi .profile-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.oi .user-status { display: inline-block; }
.oi .profile-feed { margin: 0; }
.oi .profile-post-form { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--theme-light-line); border-radius: 14px; background: var(--theme-light-page-soft); }
.oi .profile-post-form .form-options { display: flex; justify-content: flex-end; margin-top: 10px; padding: 0; border: 0; background: none; }
.oi .profile-post-form .post-submit { margin: 0; }

/* ── Yardımcılar ── */
.oi .text-danger { color: var(--oi-kirmizi) !important; }
.oi .text-success { color: var(--oi-yesil) !important; }
.oi .text-warning { color: var(--theme-light-gold-text) !important; }
.oi .text-info, .oi .text-primary { color: var(--oi-vurgu) !important; }
.oi .text-muted { color: var(--theme-light-muted) !important; }
.oi .bs-example { margin: 0 0 12px; padding: 0; border: 0; background: none; }
.oi blockquote {
  margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--theme-light-line); border-left: 3px solid var(--oi-vurgu);
  border-radius: 12px; background: var(--theme-light-page-soft); font-size: 13.44px; line-height: 1.6;
}
.oi blockquote p { margin: 0; }
.oi .well { margin: 0 0 14px; padding: 16px; border: 1px solid var(--theme-light-line); border-radius: 14px; background: var(--theme-light-page-soft); box-shadow: none; }
.oi .cerceve { min-width: 0; }
.oi [class^="entypo-"], .oi [class*=" entypo-"] { vertical-align: middle; }
.oi .ui-autocomplete {
  z-index: 10000; padding: 6px; border: 1px solid var(--theme-light-line); border-radius: 12px;
  background: var(--theme-light-surface); box-shadow: 0 16px 40px rgba(33, 18, 97, .18); font-family: inherit; font-size: 13.12px;
}
.oi .ui-autocomplete .ui-menu-item a, .oi .ui-autocomplete .ui-menu-item { padding: 7px 10px; border: 0; border-radius: 9px; color: var(--theme-light-ink); }
.oi .ui-autocomplete .ui-state-focus, .oi .ui-autocomplete .ui-menu-item a.ui-state-focus { margin: 0; border: 0; background: var(--theme-light-hover); color: var(--theme-light-heading); }

/* ── Eski karteks/not kartı renk kodları (JS üretir) ── */
.oi table.yeniTable { border-radius: 0; }
.oi table.yeniTable thead tr th { background-color: transparent; }
.oi table.yeniTable tr td { color: var(--theme-light-ink); }
.oi table.yeniTable .mavi { background-color: var(--oi-mavi-zemin) !important; color: var(--oi-mavi) !important; font-weight: 700; }
.oi table.yeniTable .koyu_mavi { background-color: rgba(42, 79, 143, .16) !important; color: #1d3a6b !important; font-weight: 700; }
.oi table.yeniTable .yesil { background-color: var(--oi-yesil-zemin) !important; color: var(--oi-yesil) !important; font-weight: 700; }
.oi table.yeniTable .kirmizi { background-color: var(--oi-kirmizi-zemin) !important; color: var(--oi-kirmizi) !important; font-weight: 700; }
.oi table.yeniTable .mavi > td, .oi table.yeniTable .yesil > td, .oi table.yeniTable .koyu_mavi > td, .oi table.yeniTable .kirmizi > td { color: inherit !important; }
.oi table.yeniTable .harf_not { text-align: center; font-weight: 800; }
.oi .yeniTable2 { width: 100%; }
.oi .yeniTable2 td { padding: 10px; border: 0; border-bottom: 1px solid var(--theme-light-line); vertical-align: middle; }
.oi .yeniTable2 tr:nth-child(odd) { background: var(--theme-light-page-soft); }
.oi .acKapaTR { cursor: pointer; }
.oi .acKapaTR th { padding: 0 !important; border-bottom: 1px solid var(--theme-light-line-strong) !important; background: none !important; }
.oi .acKapaTR th h3 { user-select: none; -moz-user-select: none; -webkit-user-select: none; }
.oi .altBaslik th { background: var(--theme-light-page-soft) !important; color: var(--theme-light-heading) !important; }
.oi .select_notlar {
  display: inline-block; width: auto; min-width: 66px; min-height: 30px; padding: 3px 26px 3px 9px;
  border: 1px solid var(--theme-light-line-strong); border-radius: 8px; background-color: var(--theme-light-surface);
  color: var(--theme-light-ink) !important; font-size: 12.16px; font-weight: 700;
}
.oi .agno_onizleme { margin-left: 6px; color: var(--oi-kirmizi) !important; font-weight: 800; }

/* ── Yazdırma ── */
@media print {
  .oi { margin: 0; padding: 0; border-radius: 0; background: #fff; }
  .oi-ust, .oi .oi-hero { border: 0; border-radius: 0; background: #fff; }
  .oi-hero::before, .oi-hero::after, .oi-kart::after { display: none; }
  .oi-govde { padding: 0; }
  .oi-kart, .oi .panel, .oi .tile-progress, .oi .tile-stats { border-color: #ddd; box-shadow: none; }
  .oi .btn, .oi .oi-dugme, .oi .oi-hero-islem { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .oi .oi-kisayol, .oi .oi-kisayol-ikon, .oi .oi-satir, .oi .oi-dugme, .oi .btn,
  .oi .tile-progress, .oi .tile-stats, .oi .oi-ayrinti summary svg { transition: none; }
  .oi .oi-kisayol:hover, .oi .tile-progress:hover, .oi .tile-stats:hover { transform: none; }
}

/* ═══════ Başvuru döşemeleri (index.js üretir: .col-md-3.onkayitlar > .tile-progress) ═══════ */
.oi .oi-dosemeler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .oi .oi-dosemeler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .oi .oi-dosemeler { grid-template-columns: minmax(0, 1fr); } }
.oi .oi-dosemeler > [class*="col-"] { float: none; width: auto; min-width: 0; padding: 0; }
.oi .oi-dosemeler .tile-progress, .oi .oi-dosemeler .tile-stats { height: 100%; margin: 0; }
.oi .oi-dosemeler .tile-progress > .tile-header { padding-bottom: 14px; }
.oi .oi-dosemeler .tile-progress .tile-header h3 { font-size: 14.4px; }
/* Hiç kayıt yoksa data-bos metni gösterilir */
.oi .oi-dosemeler:empty { display: block; }
.oi .oi-dosemeler:empty::before {
  content: attr(data-bos); display: block; padding: 24px 16px;
  border: 1px dashed var(--theme-light-line-strong); border-radius: 14px; background: var(--theme-light-page-soft);
  color: var(--theme-light-muted); font-size: 13.44px; text-align: center;
}

/* ═══════════════ Eski işaretleme ince ayarları ═══════════════
 * Eski şablonlarda bölüm başlıkları ızgara sınıfı da taşır (ör. <h4 class="row col-md-12">),
 * bazı başlıklar aynı anda .alert olur. Bu kurallar o durumları düzeltir. */
.oi h4[class*="col-"], .oi h5[class*="col-"], .oi h4.row, .oi h5.row { float: none; width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.oi h4.alert, .oi h5.alert, .oi h3.alert, .oi h2.alert, .oi h1.alert {
  display: block; margin: 0 0 14px; padding: 14px 16px 14px 18px; border-bottom: 0;
  font-size: 13.12px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.oi h4.alert::before, .oi h5.alert::before, .oi h3.alert::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; height: auto;
  border-radius: 12px 0 0 12px; background: var(--oi-vurgu);
}
/* Izgara sınıfı ile .row'un birlikte kullanıldığı sarmallarda çift negatif kenar oluşmasın */
.oi .row[class*="col-"] { margin-left: 0; margin-right: 0; }

/* ── Form kartı ── */
.oi-form form { margin: 0; }
.oi-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.oi .oi-form .form-group { margin-bottom: 16px; }
.oi .oi-form .form-group > div { min-width: 0; }
.oi .oi-form > .row:last-child, .oi .oi-form form > .row:last-child { margin-bottom: 0; }
/* Yalnız okunabilir (sunucudan gelen) kimlik alanları donuk görünür */
.oi .oi-form .form-control[disabled] { font-weight: 600; }
/* Dosya yükleme satırları */
.oi .oi-form .form-group input[type="file"] { margin-top: 2px; }
/* Buton grubu satırı (çoğu formda #buttonlar) */
.oi #buttonlar, .oi .oi-form .form-group:has(> .btn):not(:has(> label)):not(:has(> div)):not(:has(> input)):not(:has(> select)) { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.oi #buttonlar .btn { float: none !important; margin: 0 !important; }

/* ── Neon profil kabuğu kullanan eski ekranlar (ön kayıt, kesin kayıt) ── */
.oi .profile-env > header, .oi .profile-info-tabs, .oi .profile-feed, .oi .profile-stories { margin: 0; padding: 0; border: 0; background: none; }
.oi .profile-info-tabs { border-bottom: 0; }
.oi .user-details { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; padding: 0; list-style: none; }
.oi .user-details > li { margin: 0; padding: 0; border: 0; }
.oi .user-details > li > a { display: inline-flex; align-items: center; gap: 7px; color: var(--theme-light-muted); font-size: 12.8px; font-weight: 600; }
.oi .user-details > li > a i { color: var(--oi-vurgu); opacity: .8; }
.oi .profile-picture, .oi .image-thumb { display: inline-block; margin: 0; padding: 0; border: 0; background: none; }
.oi .profile-picture img { border-radius: 16px; }

/* ── Takvim / tarih seçici alanları ── */
.oi .datepicker, .oi .form-control.datepicker { background-image: none; }
.oi .ui-datepicker { z-index: 10000 !important; font-family: inherit; font-size: 12.8px; }

/* ── Onay kutusu listeleri (anket ekranları) ── */
.oi .oi-form .checkbox + .checkbox, .oi .oi-form .radio + .radio { margin-top: 7px; }
.oi .oi-form .radio label, .oi .oi-form .checkbox label { font-size: 13.12px; }

/* ── Yardımcı: içerik kartı içinde kalan eski "bs-example" ve boşluk düzelticiler ── */
.oi br + br { display: none; }
.oi .oi-form > .row > .col-md-12:only-child, .oi .oi-form > .row[class*="col-"] { padding-left: 0; padding-right: 0; }

/* ═══════════════ Güvence katmanı ═══════════════
 * Neon temasının bazı bileşenlerinde renkler !important ile tanımlı olabilir.
 * Aşağıdaki kurallar yalnız .oi içinde ve yalnız renk/zemin için zorlayıcıdır;
 * ölçü ve yerleşim yukarıdaki kurallarla yönetilir. */
.oi .tile-progress, .oi .tile-stats { background-color: var(--theme-light-surface) !important; color: var(--theme-light-ink) !important; }
.oi .tile-progress > .tile-header, .oi .tile-stats > .tile-header,
.oi .tile-progress > .tile-footer, .oi .tile-stats > .tile-footer { background-color: transparent !important; border: 0 !important; }
.oi .tile-progress .tile-header h3, .oi .tile-stats .tile-header h3, .oi .tile-stats > h3 { color: var(--theme-light-heading) !important; }
.oi .tile-gray .tile-header h3, .oi .tile-grey .tile-header h3 { color: var(--theme-light-muted) !important; }
.oi .tile-progress > .tile-footer, .oi .tile-stats > .tile-footer { color: var(--theme-light-muted) !important; }
.oi .tile-progress > .tile-footer h4, .oi .tile-stats > .tile-footer h4 { color: var(--theme-light-gold-text) !important; }
.oi .tile-progress > .tile-progressbar { background-color: var(--theme-light-hover) !important; }
.oi .tile-progress > .tile-progressbar > span { background-color: var(--oi-tile-renk, var(--oi-lacivert)) !important; }
.oi .tile-stats > .icon, .oi .tile-progress > .icon { background-color: var(--theme-light-hover) !important; color: var(--oi-tile-renk, var(--oi-lacivert)) !important; opacity: 1 !important; }

.oi .panel { background-color: var(--theme-light-surface) !important; }
.oi .panel > .panel-heading { background-color: var(--theme-light-page-soft) !important; background-image: none !important; color: var(--theme-light-heading) !important; }
.oi .panel > .panel-heading .panel-title { color: var(--theme-light-heading) !important; }

.oi .alert { color: var(--theme-light-ink) !important; text-shadow: none !important; }
.oi .alert a { color: var(--oi-vurgu) !important; }

.oi .btn { background-image: none !important; text-shadow: none !important; }
.oi .btn-primary, .oi .btn-blue, .oi .btn-info, .oi .btn-purple, .oi .btn-dark, .oi .btn-secondary { background-color: #211261 !important; color: #fff !important; }
.oi .btn-success, .oi .btn-green, .oi .btn-teal { background-color: #1f7a4d !important; color: #fff !important; }
.oi .btn-danger, .oi .btn-red, .oi .btn-pink { background-color: #a83232 !important; color: #fff !important; }
.oi .btn-warning, .oi .btn-orange, .oi .btn-gold { background-color: #e1b77e !important; color: #1b1a4b !important; }
.oi .btn-default, .oi .btn-white, .oi .btn-gray, .oi .btn-grey { background-color: #fff !important; color: #211261 !important; }
.oi .btn-group { background-color: var(--theme-light-page-soft) !important; }
.oi .btn-group > .btn { background-color: transparent !important; color: var(--theme-light-muted) !important; }
.oi .btn-group > .btn.active { background-color: #fff !important; color: var(--theme-light-heading) !important; }

.oi .nav-tabs > li > a { background-color: transparent !important; color: var(--theme-light-muted) !important; }
.oi .nav-tabs > li.active > a { background-color: transparent !important; color: var(--theme-light-heading) !important; }

.oi .label, .oi .badge { background-image: none !important; text-shadow: none !important; }
.oi .label-primary, .oi .badge-primary, .oi .label-info, .oi .badge-info { background-color: #211261 !important; color: #fff !important; }
.oi .label-danger, .oi .badge-danger, .oi .label-important { background-color: #a83232 !important; color: #fff !important; }
.oi .label-secondary, .oi .label-default, .oi .badge-default { background-color: var(--theme-light-hover) !important; color: var(--theme-light-muted) !important; }

.oi .progress { background-color: var(--theme-light-hover) !important; box-shadow: none !important; }
.oi .progress-bar { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }

.oi .cbp_tmtimeline > li .cbp_tmlabel, .oi .timeline-entry .timeline-label { color: var(--theme-light-ink) !important; }
.oi .cbp_tmtimeline > li .cbp_tmtime, .oi .timeline-entry .timeline-time { color: var(--theme-light-muted) !important; }

.oi .form-control, .oi textarea, .oi select { background-image: none !important; box-shadow: none !important; }
.oi .form-control:focus, .oi textarea:focus, .oi select:focus { box-shadow: 0 0 0 3px var(--theme-focus-ring) !important; }

/* ── Güvence: ETKİN sayfa düğmesi lacivert zemin üzerinde BEYAZ yazı ──
 * Temel kural etkin sayfa numarasına lacivert zemin + beyaz yazı veriyor, ama
 * Neon/DataTables kendi sayfalama kurallarında yazı rengini ayrı seçicilerle
 * (yerine göre !important ile) verdiği için zemin lacivert kalırken yazı SİYAHA
 * dönüyordu — lacivert/siyah ikilisi okunmuyor. Zemin ve yazı rengini BİRLİKTE,
 * aynı ağırlıkta ve hover/focus/active dâhil yazıyoruz. Seçiciler torun biçimde
 * kurulu, böylece bileşen araya bir sarmalayıcı koysa da kural ıskalamaz;
 * DataTables'ın bootstrap dışı sayfalama biçimleri (.paginate_active,
 * .paginate_button.current) de kapsanır. Kural yalnız EYLEM öğelerini (sayfalama
 * düğmeleri) kapsar; sekmelere (.nav-tabs li.active) ve durum anlatan rozetlere
 * dokunmaz. */
.oi .dataTables_paginate .pagination li.active > a,
.oi .dataTables_paginate .pagination li.active > span,
.oi .pagination li.active > a,
.oi .pagination li.active > span,
.oi .pagination li.active > a:hover,
.oi .pagination li.active > span:hover,
.oi .pagination li.active > a:focus,
.oi .pagination li.active > span:focus,
.oi .pagination li.active > a:active,
.oi .dataTables_paginate .paginate_active,
.oi .dataTables_paginate a.paginate_active,
.oi .dataTables_paginate .paginate_button.current,
.oi .dataTables_paginate .paginate_button.current:hover,
.oi .dataTables_paginate .paginate_button.current:focus {
  border-color: #211261 !important;
  background-color: #211261 !important;
  background-image: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
/* Etkin düğmenin içinde metni saran bir öğe varsa (bazı temalar span/b ekler)
   rengi oradan da miras alsın; yoksa yazı yine koyu kalır. */
.oi .pagination li.active > a *,
.oi .pagination li.active > span *,
.oi .dataTables_paginate .paginate_active *,
.oi .dataTables_paginate .paginate_button.current * { color: #ffffff !important; }
/* İkinci kemer: tema kuralı da !important taşıyorsa özgüllüğe bakılır — sayfa
   kimliğiyle açıkça üste çıkıyoruz. Şablonlar modüle göre #oiKok ya da #oiSayfa
   kabuğunu kullanıyor; ikisi de yazılı, böylece hangi kabuk varsa kural tutar. */
#oiKok .pagination li.active > a,
#oiKok .pagination li.active > span,
#oiKok .pagination li.active > a:hover,
#oiKok .pagination li.active > a:focus,
#oiKok .dataTables_paginate .paginate_active,
#oiKok .dataTables_paginate .paginate_button.current,
#oiSayfa .pagination li.active > a,
#oiSayfa .pagination li.active > span,
#oiSayfa .pagination li.active > a:hover,
#oiSayfa .pagination li.active > a:focus,
#oiSayfa .dataTables_paginate .paginate_active,
#oiSayfa .dataTables_paginate .paginate_button.current {
  border-color: #211261 !important;
  background-color: #211261 !important;
  color: #ffffff !important;
}
#oiKok .pagination li.active > a *,
#oiKok .pagination li.active > span *,
#oiKok .dataTables_paginate .paginate_button.current *,
#oiSayfa .pagination li.active > a *,
#oiSayfa .pagination li.active > span *,
#oiSayfa .dataTables_paginate .paginate_button.current * { color: #ffffff !important; }