/* =========================================================
   OpenMoon — tasarım sistemi ve ortak stiller
   ---------------------------------------------------------
   Katmanlar:
     1. Token'lar (renk, boşluk, yarıçap, tipografi)
     2. Taban (reset, tipografi, odak stilleri)
     3. Kabuk (header, nav, mega menü, footer, toast)
     4. Bileşenler (buton, kart, bento, çip, rozet, boş durum)
     5. Sayfa bölümleri (hero, sayfa başlığı, CTA bandı)
     6. Eski araç sayfası sınıfları (Bootstrap ile birlikte
        çalışır; iki temada da token'lardan beslenir)
     7. Animasyonlar ve azaltılmış hareket desteği

   Tema: <html data-theme="dark|light"> (tema.js ayarlar).
   Varsayılan token seti koyudur.
   ========================================================= */

/* ---------- 1. TOKEN'LAR ---------- */
:root {
  /* Marka (eski adlar korunur — araç sayfaları kullanıyor olabilir) */
  --om-lacivert: #0a1128;
  --om-lacivert-2: #132352;
  --om-ay: #f4f6f9;
  --om-ay-2: #c9d3e0;
  --om-mavi: #8fa3c7;
  --om-soluk: #7d8db0;

  /* Koyu tema (varsayılan) */
  --bg: #070d1d;
  --bg-yumusak: #0a1128;
  --yuzey: #0f1a36;
  --yuzey-2: #16244a;
  --cizgi: rgba(150, 172, 214, .16);
  --cizgi-guclu: rgba(150, 172, 214, .34);
  --metin: #e9eef8;
  --metin-2: #a8b6d3;
  --metin-3: #7d8db0;
  --vurgu: #9db8e8;            /* ay mavisi — ikon ve detay vurgusu */
  --vurgu-metin: #b7cdf3;      /* koyu zeminde okunur bağlantı/vurgu metni */
  --vurgu-zemin: rgba(157, 184, 232, .14); /* vurgu'nun soluk zemin tonu (basari/hata/dikkat-zemin ile aynı desen) */
  --birincil-bg: linear-gradient(135deg, #f4f6f9, #c9d3e0);
  --birincil-bg-duz: #e3e9f4;
  --birincil-hover: linear-gradient(135deg, #ffffff, #dbe3ee);
  --birincil-metin: #0a1128;
  --basari: #4ade80;
  --basari-zemin: rgba(74, 222, 128, .12);
  --hata: #f87171;
  --hata-zemin: rgba(248, 113, 113, .12);
  --yildiz: #f5b942;            /* favori yıldızı rengi, iki temada da sabit */
  --toast-basari-bg: #14532d;
  --toast-basari-metin: #dcfce7;
  --toast-hata-bg: #7f1d1d;
  --toast-hata-metin: #fee2e2;
  --golge: 0 14px 44px rgba(2, 6, 18, .55);
  --golge-kucuk: 0 4px 16px rgba(2, 6, 18, .35);
  --ust-zemin: rgba(7, 13, 29, .88);

  /* Boşluk ölçeği */
  --b1: .25rem;   /* 4  */
  --b2: .5rem;    /* 8  */
  --b3: .75rem;   /* 12 */
  --b4: 1rem;     /* 16 */
  --b5: 1.5rem;   /* 24 */
  --b6: 2rem;     /* 32 */
  --b7: 3rem;     /* 48 */
  --b8: 4.5rem;   /* 72 */

  /* Yarıçap */
  --r1: 10px;
  --r2: 16px;
  --r3: 24px;
  --r-tam: 999px;

  /* Tipografi */
  --font-govde: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-baslik: "Space Grotesk", var(--font-govde);
}

[data-theme="light"] {
  --bg: #f5f7fc;
  --bg-yumusak: #eceff7;
  --yuzey: #ffffff;
  --yuzey-2: #f0f3fa;
  --cizgi: #dee5f1;
  --cizgi-guclu: #c2cee3;
  --metin: #101a33;
  --metin-2: #46536f;
  --metin-3: #586475;      /* WCAG AA: en koyu acik-tema zemininde 5.21:1 (eski #64748b 4.13'tu) */
  --vurgu: #22418f;
  --vurgu-metin: #1c3579;
  --vurgu-zemin: #eaeff9;
  --birincil-bg: linear-gradient(135deg, #132352, #22418f);
  --birincil-bg-duz: #132352;
  --birincil-hover: linear-gradient(135deg, #0a1128, #132352);
  --birincil-metin: #ffffff;
  --basari: #047857;
  --basari-zemin: #ecfdf5;
  --hata: #b91c1c;
  --hata-zemin: #fef2f2;
  --toast-basari-bg: #166534;
  --toast-basari-metin: #f0fdf4;
  --toast-hata-bg: #991b1b;
  --toast-hata-metin: #fef2f2;
  --golge: 0 14px 44px rgba(16, 26, 51, .12);
  --golge-kucuk: 0 4px 16px rgba(16, 26, 51, .08);
  --ust-zemin: rgba(245, 247, 252, .88);
}

/* ---------- 2. TABAN ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-govde);
  background: var(--bg);
  color: var(--metin);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--metin);
}
section { scroll-margin-top: 84px; }
::selection { background: var(--vurgu); color: var(--bg); }

a { color: var(--vurgu-metin); }
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Klavye kullanıcıları için "içeriğe geç" bağlantısı (site.js ekler) */
.om-atla-link {
  position: absolute;
  top: -100%;
  left: var(--b4);
  z-index: 999;
  background: var(--yuzey);
  color: var(--metin);
  padding: var(--b3) var(--b5);
  border-radius: var(--r1);
  border: 1px solid var(--cizgi-guclu);
  box-shadow: var(--golge);
  text-decoration: none;
  font-weight: 600;
  transition: top .2s ease;
}
.om-atla-link:focus { top: var(--b4); }

.om-kapsayici {
  width: min(1200px, 100% - 2.5rem);
  margin-inline: auto;
}

.om-ust-baslik { /* bölüm üstü küçük etiket */
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vurgu);
  margin-bottom: var(--b3);
}
.om-bolum { padding: var(--b8) 0; }
.om-bolum--yumusak { background: var(--bg-yumusak); }
.om-bolum-baslik { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 var(--b2); }
.om-bolum-alt { color: var(--metin-2); max-width: 60ch; margin: 0 0 var(--b6); }
.om-merkez { text-align: center; }
.om-merkez .om-bolum-alt { margin-inline: auto; }

/* ---------- 3. KABUK: HEADER ---------- */
#om-nav { position: sticky; top: 0; z-index: 1030; }

.om-ust {
  background: var(--ust-zemin);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow .25s ease;
}
.om-ust.kaydirildi { box-shadow: var(--golge-kucuk); }
.om-ust-ic {
  display: flex;
  align-items: center;
  gap: var(--b4);
  min-height: 64px;
}
.om-marka {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  min-height: 44px;
}
.om-marka img { display: block; }
.om-marka-yazi {
  font-family: var(--font-baslik);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--metin);
}
.om-marka-yazi b { font-weight: 700; color: var(--vurgu); }

.om-ust-eylemler {
  display: flex;
  align-items: center;
  gap: var(--b2);
  margin-left: auto;
}
.om-ikon-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-2);
  font-size: 1.15rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.om-ikon-dugme:hover { color: var(--metin); border-color: var(--cizgi-guclu); background: var(--yuzey-2); }

/* Dil değiştirici (TR/EN) — om-ikon-dugme ile aynı ölçü/çerçeve, ama metin
   taşıdığı için genişliği içeriğe göre (kare değil). Token tabanlı → dark/light
   otomatik uyum. */
.om-dil-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--b3);
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-2);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.om-dil-dugme:hover { color: var(--metin); border-color: var(--cizgi-guclu); background: var(--yuzey-2); }
.om-dil-dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Mobil öncelikli: nav gizli, hamburger görünür */
.om-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  padding: var(--b3) var(--b4) var(--b5);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.om-nav.acik { display: block; }
.om-nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .4rem .75rem;
  border-radius: var(--r1);
  font-weight: 500;
  color: var(--metin-2);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.om-nav-link:hover { color: var(--metin); background: var(--yuzey-2); }
.om-nav-link[aria-current="page"] { color: var(--metin); font-weight: 600; }
.om-nav-link[aria-current="page"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vurgu);
  flex-shrink: 0;
}
/* Uygulama girişi (Görevlerim) — ikon vurgu rengiyle bir bölüm değil, bir uygulama olduğunu belli eder */
.om-nav-link--uygulama .bi { color: var(--vurgu); font-size: 1.05em; }

/* Araçlar açılır menüsü */
.om-acilir { position: relative; }
.om-acilir-satir { display: flex; align-items: center; }
.om-acilir-satir .om-nav-link { flex: 1; }
.om-acilir-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-2);
  cursor: pointer;
  transition: transform .2s, color .2s;
}
.om-acilir.acik > .om-acilir-satir .om-acilir-dugme { transform: rotate(180deg); color: var(--metin); }

.om-mega { display: none; }
.om-acilir.acik > .om-mega { display: block; }
.om-mega-ic { padding: var(--b2) var(--b3); }
.om-mega-grup + .om-mega-grup { margin-top: var(--b3); }
.om-mega-baslik {
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-3);
  font-weight: 700;
  padding: .25rem .75rem .35rem;
}
.om-mega-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .35rem .75rem;
  border-radius: var(--r1);
  font-size: .92rem;
  color: var(--metin-2);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.om-mega-link:hover { color: var(--metin); background: var(--yuzey-2); }
.om-mega-link i { color: var(--vurgu); font-size: 1rem; width: 1.2rem; text-align: center; }
.om-mega-link.aktif { color: var(--metin); background: var(--yuzey-2); font-weight: 600; }
.om-mega-alt {
  display: block;
  margin-top: var(--b3);
  padding: .6rem .75rem;
  border-top: 1px solid var(--cizgi);
  font-weight: 600;
  font-size: .92rem;
  color: var(--vurgu-metin);
  text-decoration: none;
}
.om-mega-alt:hover { color: var(--metin); }

/* Masaüstü nav */
@media (min-width: 1024px) {
  .om-menu-dugme { display: none; }
  .om-nav {
    display: flex;
    align-items: center;
    gap: var(--b1);
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-left: auto;
    max-height: none;
    overflow: visible;
  }
  .om-ust-eylemler { margin-left: 0; }
  .om-nav-link { min-height: 44px; padding: .4rem .9rem; }
  .om-mega {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(880px, calc(100vw - 3rem));
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r2);
    box-shadow: var(--golge);
    padding: var(--b4);
  }
  .om-mega-ic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--b3);
    padding: 0;
  }
  .om-mega-grup + .om-mega-grup { margin-top: 0; }
  .om-mega-link { min-height: 40px; }
}

/* ---------- 3. KABUK: FOOTER ---------- */
.om-footer {
  background: var(--bg-yumusak);
  border-top: 1px solid var(--cizgi);
  padding: var(--b7) 0 var(--b5);
  color: var(--metin-2);
}
.om-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b6);
}
.om-footer-marka p { font-size: .92rem; max-width: 34ch; margin: var(--b3) 0; }
.om-footer-baslik {
  font-family: var(--font-baslik);
  color: var(--metin);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: var(--b3);
}
.om-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.om-footer a { color: var(--metin-2); text-decoration: none; font-size: .9rem; transition: color .2s; }
.om-footer a:hover { color: var(--metin); }
.om-footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--metin-2);
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}
.om-footer-link-btn:hover { color: var(--metin); }
.om-footer-link-btn:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
/* Sosyal medya ikon satırı (footer marka kolonu) — yalnız SOSYAL doluysa
   render edilir (site.js sosyalBaglantilarHtml). */
.om-sosyal { display: flex; gap: var(--b2); margin-top: var(--b3); flex-wrap: wrap; }
.om-sosyal-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: var(--r1);
  border: 1px solid var(--cizgi); color: var(--metin-2);
  font-size: 1.05rem; transition: color .15s, border-color .15s, background .15s;
}
.om-sosyal-link:hover { color: var(--vurgu); border-color: var(--vurgu); background: var(--vurgu-zemin); }
.om-sosyal-link:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.om-footer-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b2) var(--b4);
  justify-content: space-between;
  border-top: 1px solid var(--cizgi);
  margin-top: var(--b6);
  padding-top: var(--b4);
  font-size: .85rem;
}
@media (min-width: 640px) {
  .om-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .om-footer-marka { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .om-footer-grid { grid-template-columns: 2.4fr 1.1fr 1.3fr 1.3fr 1.3fr 1.1fr; }
  .om-footer-marka { grid-column: auto; }
}

/* ---------- 3. KABUK: TOAST ---------- */
.om-toast {
  position: fixed;
  bottom: var(--b5);
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: var(--r1);
  font-size: .92rem;
  font-weight: 500;
  box-shadow: var(--golge);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100vw - 2rem);
}
.om-toast.gorunur { opacity: 1; transform: translate(-50%, 0); }
.om-toast--basari { background: var(--toast-basari-bg); color: var(--toast-basari-metin); }
.om-toast--hata { background: var(--toast-hata-bg); color: var(--toast-hata-metin); }

/* ---------- 4. BİLEŞENLER: BUTONLAR ---------- */
.om-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .65rem 1.4rem;
  border-radius: var(--r1);
  border: 1px solid transparent;
  font-family: var(--font-govde);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.om-btn:hover { transform: translateY(-1px); }
.om-btn:active { transform: translateY(0); }
.om-btn--birincil { background: var(--birincil-bg); color: var(--birincil-metin); }
.om-btn--birincil:hover { background: var(--birincil-hover); color: var(--birincil-metin); box-shadow: var(--golge-kucuk); }
.om-btn--ikincil { background: transparent; border-color: var(--cizgi-guclu); color: var(--metin); }
.om-btn--ikincil:hover { background: var(--yuzey-2); border-color: var(--vurgu); color: var(--metin); }
.om-btn--kucuk { min-height: 40px; padding: .4rem 1rem; font-size: .9rem; }

/* ---------- 4. BİLEŞENLER: KARTLAR ve BENTO ---------- */
.om-kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b5);
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
a.om-kart { display: block; color: inherit; text-decoration: none; }
.om-kart--etkilesimli:hover {
  transform: translateY(-4px);
  border-color: var(--cizgi-guclu);
  box-shadow: var(--golge-kucuk);
}
.om-kart h3 { margin: 0 0 var(--b2); font-size: 1.15rem; }
.om-kart p { margin: 0; color: var(--metin-2); font-size: .95rem; }

.om-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b4);
}
@media (min-width: 768px) { .om-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .om-bento { grid-template-columns: repeat(4, 1fr); }
  .om-bento .genis { grid-column: span 2; }
  .om-bento .yuksek { grid-row: span 2; }
}

.om-kart-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r1);
  font-size: 1.4rem;
  background: var(--yuzey-2);
  color: var(--vurgu);
  margin-bottom: var(--b4);
}
.om-kart-baglanti {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--b4);
  font-weight: 600;
  font-size: .95rem;
  color: var(--vurgu-metin);
}
.om-kart--etkilesimli:hover .om-kart-baglanti { text-decoration: underline; }

/* Ana sayfa bento kartlarında küçük bir "canlı durum" rozeti (ör. Sözyıldız
   günlük seri/oynandı-mı bilgisi, bkz. site.js sozyildizKartGuncelle()).
   JS veri bulamazsa elemanın "hidden" hâli korunur (varsayılan gizli). */
.om-kart-durum {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: var(--b3) 0 0;
  padding: .3rem .75rem;
  border-radius: 99px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  color: var(--metin-2);
  font-size: .82rem;
  font-weight: 600;
}
.om-kart-durum[hidden] { display: none; }

/* İstatistik kutusu */
.om-stat { display: flex; flex-direction: column; justify-content: center; }
.om-stat .deger {
  font-family: var(--font-baslik);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--metin);
  line-height: 1.1;
}
.om-stat .etiket { color: var(--metin-2); font-size: .92rem; margin-top: var(--b1); }

/* Araç kartı (katalog) */
.om-arac-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b3);
}
@media (min-width: 640px) { .om-arac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .om-arac-grid { grid-template-columns: repeat(3, 1fr); } }

.om-arac-kart {
  display: flex;
  align-items: flex-start;
  gap: var(--b4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b4);
  color: inherit;
  text-decoration: none;
  min-height: 44px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.om-arac-kart:hover {
  transform: translateY(-3px);
  border-color: var(--cizgi-guclu);
  box-shadow: var(--golge-kucuk);
}
.om-arac-kart .ikon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r1);
  font-size: 1.25rem;
  background: var(--yuzey-2);
  color: var(--vurgu);
  transition: background .2s, color .2s;
}
.om-arac-kart:hover .ikon { background: var(--vurgu); color: var(--bg); }
.om-arac-kart .baslik { display: block; font-weight: 600; font-size: .98rem; color: var(--metin); }
.om-arac-kart .aciklama { display: block; margin-top: 2px; font-size: .86rem; color: var(--metin-2); line-height: 1.45; }

/* Favori (yıldız) düğmesi — kart üstünde mutlak konum, başlıkta satır içi */
.om-arac-kart-kap { position: relative; display: block; }
.om-favori-dugme {
  position: absolute;
  top: var(--b2);
  right: var(--b2);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-tam);
  background: var(--yuzey-2);
  color: var(--metin-3);
  font-size: .95rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .15s;
}
.om-favori-dugme:hover { color: var(--yildiz); border-color: var(--cizgi-guclu); transform: scale(1.08); }
.om-favori-dugme.aktif { color: var(--yildiz); }
.om-favori-dugme--satirici {
  position: static;
  width: auto; height: auto;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: var(--b3);
  padding: .3em;
  background: transparent;
  border-color: transparent;
}
.om-favori-dugme--satirici:hover { background: var(--yuzey-2); border-color: var(--cizgi); }

.om-kat-grup { margin-bottom: var(--b7); }
.om-kat-grup:last-child { margin-bottom: 0; }
.om-kat-grup > h2 {
  font-size: 1.25rem;
  margin: 0 0 var(--b4);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.om-kat-grup > h2 .adet {
  font-family: var(--font-govde);
  font-size: .8rem;
  font-weight: 600;
  color: var(--metin-3);
  background: var(--yuzey-2);
  border-radius: var(--r-tam);
  padding: .1rem .6rem;
}
.gizli { display: none !important; }

/* Görsel-gizli ama ekran okuyucuya açık (Bootstrap'in .visually-hidden'ıyla
   AYNI ad/davranış — çoğu araç sayfası bunu zaten Bootstrap CSS'inden alıyor,
   ama Bootstrap yüklemeyen sayfalarda (ör. yapilacaklar.html) da kullanılabilsin
   diye burada tanımlı. .gizli'nin aksine `display:none` DEĞİL — ekran
   okuyucular `display:none` içeriği duyurmaz. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Rehber kartları */
.om-rehber-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b4);
}
@media (min-width: 768px) { .om-rehber-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .om-rehber-grid { grid-template-columns: repeat(3, 1fr); }
  .om-rehber-grid .om-rehber-kart--one { grid-column: span 2; grid-row: span 1; }
}
.om-rehber-kart {
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
a.om-rehber-kart:hover { transform: translateY(-4px); border-color: var(--cizgi-guclu); box-shadow: var(--golge-kucuk); }
.om-rehber-kapak {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  font-size: 2.6rem;
  color: var(--vurgu);
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(157, 184, 232, .22), transparent 55%),
    linear-gradient(135deg, var(--om-lacivert), var(--om-lacivert-2));
}
.om-rehber-kart--one .om-rehber-kapak { aspect-ratio: 21 / 8; font-size: 3.2rem; }
.om-rehber-kapak--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.om-rehber-kapak--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 17, 40, 0) 55%, rgba(10, 17, 40, .55) 100%);
  pointer-events: none;
}
a.om-rehber-kart:hover .om-rehber-kapak--foto img { transform: scale(1.05); }
.om-rehber-icerik { padding: var(--b4) var(--b5) var(--b5); display: flex; flex-direction: column; gap: var(--b2); flex: 1; }
.om-rehber-icerik h3 { margin: 0; font-size: 1.1rem; }
.om-rehber-icerik p { margin: 0; color: var(--metin-2); font-size: .92rem; flex: 1; }
.om-rehber-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b2);
  font-size: .82rem;
  color: var(--metin-3);
}

/* Rozet ve çipler */
.om-rozet {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  border-radius: var(--r-tam);
  font-size: .78rem;
  font-weight: 600;
  background: var(--yuzey-2);
  color: var(--metin-2);
  border: 1px solid var(--cizgi);
}
.om-rozet--vurgu { background: var(--vurgu); color: var(--bg); border-color: transparent; }
.om-rozet--yakinda { background: var(--basari-zemin); color: var(--basari); border-color: transparent; }
/* Doğrulanmamış/temkinli bilgi rozeti. --yakinda yeşil "başarı" tonu taşıdığı
   için "topluluk kaynaklı, resmen doğrulanmadı" gibi uyarı anlamında
   kullanılmamalı — aynı stil hem olumlu hem temkinli anlama gelirdi. */
.om-rozet--dikkat { background: var(--dikkat-zemin); color: var(--dikkat); border-color: transparent; }

.om-cipler { display: flex; flex-wrap: wrap; gap: var(--b2); }
.om-cip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem 1.1rem;
  border-radius: var(--r-tam);
  border: 1px solid var(--cizgi-guclu);
  background: transparent;
  color: var(--metin-2);
  font-family: var(--font-govde);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.om-cip:hover { color: var(--metin); border-color: var(--vurgu); }
.om-cip[aria-pressed="true"] { background: var(--birincil-bg-duz); color: var(--birincil-metin); border-color: transparent; font-weight: 600; }
.om-cip--kucuk { min-height: 30px; padding: .2rem .7rem; font-size: .78rem; }
.om-gorev-etiketler { margin-top: .5rem; }

/* Arama kutusu */
.om-arama {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-tam);
  padding: .35rem .5rem .35rem 1.2rem;
  max-width: 560px;
  transition: border-color .2s, box-shadow .2s;
}
.om-arama:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 3px rgba(157, 184, 232, .18); }
.om-arama i { color: var(--metin-3); font-size: 1.05rem; }
.om-arama input {
  flex: 1;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: 1rem;
  outline: none;
  min-width: 0;
}
.om-arama input::placeholder { color: var(--metin-3); }

/* Boş durum */
.om-bos {
  text-align: center;
  padding: var(--b7) var(--b4);
  border: 1px dashed var(--cizgi-guclu);
  border-radius: var(--r2);
  color: var(--metin-2);
}
.om-bos i { font-size: 2.4rem; color: var(--metin-3); display: block; margin-bottom: var(--b3); }
.om-bos strong { color: var(--metin); }
.om-bos p { max-width: 46ch; margin: var(--b2) auto 0; font-size: .95rem; }

/* ---------- 5. SAYFA BÖLÜMLERİ: HERO ---------- */
.om-hero {
  position: relative;
  overflow: hidden;
  padding: var(--b8) 0;
  background:
    radial-gradient(90% 70% at 80% -10%, rgba(157, 184, 232, .16), transparent 60%),
    radial-gradient(60% 50% at 10% 110%, rgba(19, 35, 82, .55), transparent 65%),
    var(--bg);
}
[data-theme="light"] .om-hero {
  background:
    radial-gradient(90% 70% at 80% -10%, rgba(34, 65, 143, .10), transparent 60%),
    radial-gradient(60% 50% at 10% 110%, rgba(201, 211, 224, .5), transparent 65%),
    var(--bg);
}
.om-hero-ic {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--b6);
  align-items: center;
}
@media (min-width: 1024px) { .om-hero-ic { grid-template-columns: 7fr 5fr; } }
.om-hero .eyebrow {
  font-size: .78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--metin-3);
  font-weight: 600;
  margin-bottom: var(--b4);
}
.om-hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  margin: 0 0 var(--b4);
}
.om-hero h1 .parlak {
  background: linear-gradient(120deg, var(--vurgu), #dbe6f8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .om-hero h1 .parlak {
  background: linear-gradient(120deg, #22418f, #0a1128);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.om-hero .om-lead {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--metin-2);
  max-width: 56ch;
  margin: 0 0 var(--b5);
}
.om-hero-eylemler { display: flex; flex-wrap: wrap; gap: var(--b3); margin-bottom: var(--b4); }
.privacy-note { color: var(--vurgu-metin); font-size: .9rem; }

/* Hero görseli: yörüngedeki ay */
.om-hero-gorsel { position: relative; display: none; }
@media (min-width: 1024px) { .om-hero-gorsel { display: flex; justify-content: center; } }
.om-hero-ay {
  position: relative;
  width: 300px; height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.om-hero-ay::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  border: 1px dashed var(--cizgi-guclu);
}
.om-hero-ay img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 60px rgba(157, 184, 232, .35));
}
.om-hero-cip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-tam);
  box-shadow: var(--golge-kucuk);
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--metin);
  white-space: nowrap;
}
.om-hero-cip i { color: var(--vurgu); }

/* Sayfa başlığı (iç sayfalar) */
.om-sayfa-hero {
  position: relative;
  overflow: hidden;
  padding: var(--b7) 0;
  background:
    radial-gradient(80% 90% at 85% -20%, rgba(157, 184, 232, .14), transparent 60%),
    var(--bg-yumusak);
}
[data-theme="light"] .om-sayfa-hero {
  background:
    radial-gradient(80% 90% at 85% -20%, rgba(34, 65, 143, .08), transparent 60%),
    var(--bg-yumusak);
}
.om-sayfa-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 var(--b3); }
.om-sayfa-hero .om-lead { color: var(--metin-2); max-width: 62ch; margin: 0; font-size: 1.05rem; }

/* CTA bandı */
.om-cta-band {
  background:
    radial-gradient(100% 160% at 90% 0%, rgba(157, 184, 232, .18), transparent 55%),
    linear-gradient(135deg, var(--om-lacivert), var(--om-lacivert-2));
  border-radius: var(--r3);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b4);
}
.om-cta-band h2 { color: #fff; margin: 0 0 var(--b1); font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.om-cta-band p { color: #c3cde0; margin: 0; }
.om-cta-band .om-btn--birincil {
  background: linear-gradient(135deg, var(--om-ay), var(--om-ay-2));
  color: var(--om-lacivert);
}
.om-cta-band .om-btn--birincil:hover { background: linear-gradient(135deg, #fff, #dbe3ee); }

/* Mini özellik listesi */
.om-ozellikler {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b4);
}
@media (min-width: 640px) { .om-ozellikler { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .om-ozellikler { grid-template-columns: repeat(4, 1fr); } }
.om-ozellik { display: flex; gap: var(--b3); align-items: flex-start; }
.om-ozellik i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r1);
  background: var(--yuzey-2);
  color: var(--vurgu);
  font-size: 1.15rem;
}
.om-ozellik strong { display: block; color: var(--metin); font-size: .98rem; margin-bottom: 2px; }
.om-ozellik span { color: var(--metin-2); font-size: .88rem; line-height: 1.5; }

/* ---------- 6. ESKİ ARAÇ SAYFASI SINIFLARI ----------
   Araç sayfaları Bootstrap 5.3 + bu sınıfları kullanır.
   data-bs-theme tema.js tarafından ayarlandığından Bootstrap
   bileşenleri kendiliğinden uyum sağlar; aşağıdakiler ise
   özel sınıfları token'lara bağlar. */

.btn-navy, .btn-moon {
  background: var(--birincil-bg);
  border-color: transparent;
  color: var(--birincil-metin);
  font-weight: 600;
}
.btn-navy:hover, .btn-navy:focus, .btn-moon:hover, .btn-moon:focus {
  background: var(--birincil-hover);
  border-color: transparent;
  color: var(--birincil-metin);
}
.btn-outline-navy { color: var(--vurgu-metin); border-color: var(--cizgi-guclu); }
.btn-outline-navy:hover { background: var(--yuzey-2); border-color: var(--vurgu); color: var(--metin); }
.text-navy { color: var(--vurgu-metin) !important; }
.badge-navy { background: var(--birincil-bg-duz); color: var(--birincil-metin); }

.section-soft { background: var(--bg-yumusak); }

.tool-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 85% -20%, rgba(157, 184, 232, .18), transparent 60%),
    linear-gradient(135deg, var(--om-lacivert) 0%, #0d1b3e 55%, var(--om-lacivert-2) 100%);
  color: #fff;
  padding: 3.25rem 0 2.75rem;
}
.tool-hero .container { position: relative; z-index: 1; }
.tool-hero h1 { letter-spacing: -.01em; color: #fff; }
.tool-hero .lead { color: #cbd5e1; font-size: 1.05rem; }
.tool-hero .privacy-note { color: var(--om-mavi); }

.converter-card {
  border: 1px solid var(--cizgi) !important;
  border-radius: var(--r3);
  box-shadow: var(--golge-kucuk);
  background: var(--yuzey);
}

.dropzone {
  border: 2px dashed var(--cizgi-guclu);
  border-radius: var(--r2);
  background: var(--yuzey-2);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--vurgu); background: var(--bg-yumusak); }
.dropzone .dz-icon { font-size: 2.4rem; color: var(--vurgu); }
.dropzone input[type="file"] { display: none; }

pre.json-out, pre.code-out {
  background: var(--om-lacivert);
  color: #e2e8f0;
  border-radius: var(--r1);
  padding: 1.25rem;
  overflow: auto;
  max-height: 480px;
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 0;
}
[data-theme="dark"] pre.json-out, [data-theme="dark"] pre.code-out {
  border: 1px solid var(--cizgi);
}
.mono-area {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .85rem;
  line-height: 1.5;
}

.nav-tabs .nav-link { color: var(--metin-2); }
.nav-tabs .nav-link.active { color: var(--vurgu-metin); font-weight: 600; }
.nav-pills .nav-link { color: var(--vurgu-metin); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--birincil-bg-duz); color: var(--birincil-metin); }

.feature-card {
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  height: 100%;
  background: var(--yuzey);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--golge-kucuk); border-color: var(--cizgi-guclu); }
.feature-icon {
  width: 52px; height: 52px;
  border-radius: var(--r1);
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yuzey-2);
  color: var(--vurgu);
}
a.tool-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }

.step-no {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--birincil-bg-duz);
  color: var(--birincil-metin);
  font-weight: 700;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  padding: .65rem .9rem;
  background: var(--yuzey);
}
.file-row + .file-row { margin-top: .5rem; }
.file-row .fr-ad { font-weight: 600; word-break: break-all; }
.file-row .fr-detay { color: var(--metin-3); font-size: .85rem; }

.sonuc-kutu { border-radius: var(--r2); padding: 1.25rem 1.5rem; }
.sonuc-gecerli { background: var(--basari-zemin); border: 1px solid var(--basari); color: var(--basari); }
.sonuc-gecersiz { background: var(--hata-zemin); border: 1px solid var(--hata); color: var(--hata); }

.accordion-button:not(.collapsed) { background: var(--yuzey-2); color: var(--metin); }
.accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(157, 184, 232, .2); }

/* Bootstrap'in açık temaya sabitlenmiş yardımcıları — koyu temada düzelt */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white { background-color: var(--yuzey) !important; }
[data-theme="dark"] .text-bg-light {
  background-color: var(--yuzey-2) !important;
  color: var(--metin) !important;
}
[data-theme="dark"] .text-secondary { color: var(--metin-2) !important; }
[data-theme="dark"] .border { border-color: var(--cizgi) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: var(--golge-kucuk) !important; }

/* Tabulator (excel-json): CDN teması (tabulator_bootstrap5.min.css) Bootstrap
   değişkenlerini değil sabit hex renkleri kullanıyor, koyu temada beyaz kalıyordu. */
[data-bs-theme="dark"] .tabulator { border-color: var(--cizgi-guclu); background: var(--yuzey); color: var(--metin); }
[data-bs-theme="dark"] .tabulator .tabulator-header,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
  background: var(--yuzey-2) !important;
  border-color: var(--cizgi-guclu);
  color: var(--metin);
}
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table { background: var(--yuzey); color: var(--metin); }
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-placeholder-contents { color: var(--metin-3); }
[data-bs-theme="dark"] .tabulator-row { background: var(--yuzey); color: var(--metin); }
[data-bs-theme="dark"] .tabulator-row.tabulator-row-even { background: var(--bg); }
[data-bs-theme="dark"] .tabulator-row.tabulator-selectable:hover { background: var(--yuzey-2); }
[data-bs-theme="dark"] .tabulator-row .tabulator-cell { border-color: var(--cizgi); }
[data-bs-theme="dark"] .tabulator .tabulator-footer {
  background: var(--yuzey-2);
  border-color: var(--cizgi-guclu);
  color: var(--metin-2);
}
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page,
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size {
  background: var(--yuzey);
  border-color: var(--cizgi-guclu);
  color: var(--metin);
}
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator,
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page-counter { color: var(--metin-2); }

/* Eski footer/hero sınıfları (araç sayfaları #om-footer kullanır,
   yeni footer om- sınıflarıyla basılır; bunlar yalnız güvence) */
footer.om-footer a { text-decoration: none; }

/* ---------- 7. REHBER MAKALE BİLEŞENLERİ ----------
   rehberler/<slug>.html sayfaları kullanır (saf HTML, Bootstrap yok).
   Yeni rehber için rehberler/_sablon.html kopyalanır. */

/* Uyarı (amber) token'ları */
:root {
  --dikkat: #fbbf24;
  --dikkat-zemin: rgba(251, 191, 36, .1);
}
[data-theme="light"] {
  --dikkat: #92400e;
  --dikkat-zemin: #fef3c7;
}

/* Okuma ilerleme çubuğu (site.js basar) */
.om-ilerleme {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vurgu), #dbe6f8);
  transform: scaleX(0);
  transform-origin: 0 0;
  z-index: 1200;
  pointer-events: none;
}

/* Kırıntı (breadcrumb) */
.om-kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--metin-3);
  margin-bottom: var(--b4);
}
.om-kirinti a { color: var(--metin-2); text-decoration: none; }
.om-kirinti a:hover { color: var(--metin); text-decoration: underline; }

/* Makale üst bilgisi */
.om-makale-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b2) var(--b3);
  margin-top: var(--b4);
  font-size: .88rem;
  color: var(--metin-3);
}
.om-makale-meta i { color: var(--vurgu); }

/* Düzen: mobilde tek kolon (içindekiler üstte), masaüstünde sol sütun */
.om-makale-duzen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b6);
  align-items: start;
}
@media (min-width: 1100px) {
  .om-makale-duzen { grid-template-columns: 250px minmax(0, 1fr); gap: var(--b7); }
  .om-makale-yan { position: sticky; top: 96px; }
}

/* İçindekiler */
.om-icindekiler {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b4) var(--b5);
}
.om-icindekiler .baslik {
  font-family: var(--font-baslik);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: var(--b3);
}
.om-icindekiler ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .15rem;
  counter-reset: icindekiler;
}
.om-icindekiler a {
  display: flex;
  gap: .55rem;
  padding: .35rem .5rem;
  border-radius: 8px;
  font-size: .9rem;
  color: var(--metin-2);
  text-decoration: none;
  counter-increment: icindekiler;
  transition: color .15s, background .15s;
}
.om-icindekiler a::before {
  content: counter(icindekiler, decimal-leading-zero);
  font-size: .78rem;
  font-weight: 600;
  color: var(--metin-3);
  min-width: 1.4rem;
}
.om-icindekiler a:hover { color: var(--metin); background: var(--yuzey-2); }
.om-icindekiler a.aktif { color: var(--metin); background: var(--yuzey-2); font-weight: 600; }
.om-icindekiler a.aktif::before { color: var(--vurgu); }

/* Makale gövdesi tipografisi */
.om-makale { min-width: 0; }
.om-makale > p, .om-makale li { line-height: 1.75; color: var(--metin-2); }
.om-makale > p strong, .om-makale li strong { color: var(--metin); }
.om-makale h2 {
  font-size: 1.5rem;
  margin: var(--b7) 0 var(--b4);
  padding-bottom: var(--b2);
  border-bottom: 1px solid var(--cizgi);
  scroll-margin-top: 96px;
}
.om-makale h2:first-child { margin-top: 0; }
.om-makale h3 { font-size: 1.12rem; margin: var(--b5) 0 var(--b3); scroll-margin-top: 96px; }
.om-makale code {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .86em;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  padding: .08em .4em;
  color: var(--metin);
}

/* Bilgi kutuları */
.om-kutu {
  display: flex;
  gap: var(--b3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--vurgu);
  border-radius: var(--r1);
  padding: var(--b4);
  margin: var(--b4) 0;
  font-size: .95rem;
  color: var(--metin-2);
}
.om-kutu > i { flex-shrink: 0; font-size: 1.1rem; color: var(--vurgu); margin-top: .1rem; }
.om-kutu strong { color: var(--metin); }
.om-kutu--uyari { border-left-color: var(--dikkat); background: var(--dikkat-zemin); }
.om-kutu--uyari > i { color: var(--dikkat); }

/* Spoiler */
details.om-spoiler {
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  margin: var(--b4) 0;
  background: var(--yuzey);
}
details.om-spoiler summary {
  cursor: pointer;
  padding: .8rem var(--b4);
  font-weight: 600;
  color: var(--metin);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
}
details.om-spoiler summary::-webkit-details-marker { display: none; }
details.om-spoiler summary::before {
  content: "";
  border: solid var(--metin-3);
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(-45deg);
  transition: transform .2s;
}
details.om-spoiler[open] summary::before { transform: rotate(45deg); }
details.om-spoiler .icerik { padding: 0 var(--b4) var(--b4); color: var(--metin-2); }

/* Adım kartları */
.om-adimlar { counter-reset: adim; display: grid; gap: var(--b3); margin: var(--b4) 0; padding: 0; list-style: none; }
.om-adimlar > li {
  counter-increment: adim;
  display: flex;
  gap: var(--b4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b4);
}
.om-adimlar > li::before {
  content: counter(adim);
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--birincil-bg-duz);
  color: var(--birincil-metin);
  font-family: var(--font-baslik);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.om-adimlar strong { display: block; color: var(--metin); margin-bottom: .2rem; }

/* Kod bloğu + kopyalama */
.om-kod { position: relative; margin: var(--b4) 0; }
.om-kod pre {
  background: var(--om-lacivert);
  color: #e2e8f0;
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  padding: 1.1rem 1.25rem;
  padding-right: 3.4rem;
  overflow-x: auto;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .86rem;
  line-height: 1.6;
  margin: 0;
}
.om-kod .kopyala-dugme {
  position: absolute;
  top: .55rem; right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(150, 172, 214, .3);
  border-radius: 8px;
  background: rgba(10, 17, 40, .7);
  color: #c3cde0;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.om-kod .kopyala-dugme:hover { color: #fff; border-color: var(--om-mavi); }

/* Görsel / diyagram çerçevesi */
.om-figur {
  margin: var(--b5) 0;
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--yuzey);
}
/* Tam genişlik yalnız doğrudan çocuk görsele uygulanır; sarmalayıcı
   içindeki görseller (ikon kolajı gibi) kendi boyutunda kalır */
.om-figur > svg, .om-figur > img { display: block; width: 100%; height: auto; }
.om-figur img { max-width: 100%; }
.om-figur figcaption {
  padding: .7rem var(--b4);
  font-size: .85rem;
  color: var(--metin-3);
  border-top: 1px solid var(--cizgi);
}

/* Makale tablosu */
.om-tablo-kap {
  overflow-x: auto;
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  margin: var(--b4) 0;
  background: var(--yuzey);
}
table.om-tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.om-tablo th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--metin-3);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
.om-tablo td {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin-2);
  vertical-align: top;
}
.om-tablo tr:last-child td { border-bottom: 0; }
.om-tablo td:first-child { color: var(--metin); font-weight: 500; }
/* Satır başlığı (<th scope="row">, tbody içi) sütun başlığından (<th scope="col">,
   yukarıdaki .om-tablo th) AYRI ele alınır — o kural yalnız thead içindir ve
   büyük harf/soluk renk satır kimliğine (ör. bir tuş/sistem adı) uygun değil.
   Görsel olarak .om-tablo td:first-child ile eşleşir. */
.om-tablo tbody th[scope="row"] {
  text-align: left;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--metin);
  white-space: normal;
}

/* Etki puanı (tabloda: metin + noktalar — renk tek başına anlam taşımaz) */
.etki { white-space: nowrap; }
.etki .n { color: var(--vurgu); letter-spacing: 2px; }
.etki .s { color: var(--cizgi-guclu); letter-spacing: 2px; }

/* Etkileşimli bileşen (widget) */
.om-widget {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b5);
  margin: var(--b5) 0;
}
.om-widget-baslik {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-baslik);
  font-weight: 700;
  color: var(--metin);
  margin-bottom: var(--b4);
}
.om-widget-baslik i { color: var(--vurgu); }
.om-kontrol-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b3) var(--b4);
}
@media (min-width: 640px) { .om-kontrol-grid { grid-template-columns: repeat(2, 1fr); } }
.om-alan { display: grid; gap: .3rem; }
.om-alan > label { font-size: .84rem; font-weight: 500; color: var(--metin-2); }
.om-alan .deger-etiket { color: var(--vurgu-metin); font-weight: 600; }

.om-girdi, .om-secim {
  width: 100%;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r1);
  background: var(--bg);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.om-girdi:focus, .om-secim:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(157, 184, 232, .18);
}
.om-onay { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-size: .92rem; color: var(--metin-2); cursor: pointer; }
.om-onay input { width: 18px; height: 18px; accent-color: var(--vurgu); cursor: pointer; }

input[type="range"].om-kaydirici {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
}
.om-kaydirici::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
}
.om-kaydirici::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--vurgu);
  border: 2px solid var(--bg);
  margin-top: -8px;
}
.om-kaydirici::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
}
.om-kaydirici::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vurgu);
  border: 2px solid var(--bg);
}

/* Sonuç rakamları (hesaplayıcı çıktıları) */
.om-sonuc-satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--b3);
  margin-top: var(--b4);
}
.om-sonuc-kutu {
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  padding: var(--b3) var(--b4);
  text-align: center;
}
.om-sonuc-kutu .etiket { font-size: .78rem; color: var(--metin-3); }
.om-sonuc-kutu .deger {
  font-family: var(--font-baslik);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--metin);
}

/* Yanlış / Doğru (ve güçlü / zayıf) karşılaştırma blokları */
.om-vs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b3);
  margin: var(--b4) 0;
}
@media (min-width: 640px) { .om-vs { grid-template-columns: repeat(2, 1fr); } }
.om-vs-kutu {
  border: 1px solid var(--cizgi);
  border-left-width: 3px;
  border-radius: var(--r1);
  padding: var(--b4);
  font-size: .92rem;
  color: var(--metin-2);
}
.om-vs-kutu .ust {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.om-vs-kutu ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.om-vs-kutu--yanlis { border-left-color: var(--hata); background: var(--hata-zemin); }
.om-vs-kutu--yanlis .ust { color: var(--hata); }
.om-vs-kutu--dogru { border-left-color: var(--basari); background: var(--basari-zemin); }
.om-vs-kutu--dogru .ust { color: var(--basari); }

/* Sınıf / seçenek kaşifi (ikonlu seçim ızgarası + detay paneli) */
.om-secici-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--b2);
  margin: var(--b4) 0;
}
@media (min-width: 480px) { .om-secici-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .om-secici-grid { grid-template-columns: repeat(6, 1fr); } }
.om-secici-dugme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .7rem .3rem .6rem;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  color: var(--metin-2);
  font-family: var(--font-govde);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.om-secici-dugme img { width: 42px; height: 42px; object-fit: contain; }
.om-secici-dugme:hover { border-color: var(--cizgi-guclu); color: var(--metin); transform: translateY(-2px); }
.om-secici-dugme[aria-pressed="true"] {
  border-color: var(--vurgu);
  background: var(--yuzey-2);
  color: var(--metin);
  box-shadow: 0 0 0 1px var(--vurgu);
}
.om-detay-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b3);
  margin-bottom: var(--b3);
}
.om-detay-ust img { width: 56px; height: 56px; object-fit: contain; }
.om-detay-ust h3 { margin: 0; font-size: 1.3rem; }
.om-detay-ust .alt-ad { color: var(--metin-3); font-size: .88rem; }

/* Makale altı: ilgili bağlantılar */
.om-makale-alt { margin-top: var(--b7); padding-top: var(--b5); border-top: 1px solid var(--cizgi); }

/* ---------- 8. ANİMASYONLAR ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .js [data-anim].goster { opacity: 1; transform: none; }
  .js [data-anim="gec"] { transition-delay: .12s; }
  .js [data-anim="gec2"] { transition-delay: .24s; }

  .om-hero-ay { animation: om-suzul 7s ease-in-out infinite; }
  @keyframes om-suzul {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .om-btn:hover, .om-kart--etkilesimli:hover, .om-arac-kart:hover,
  a.om-rehber-kart:hover, .feature-card:hover { transform: none; }
}

/* ---------- 9. YAPILACAKLAR LİSTESİ ---------- */
.om-baglanti-buton {
  background: none;
  border: none;
  padding: 0;
  color: var(--vurgu-metin);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.om-baglanti-buton:hover { color: var(--vurgu); }

.om-gorev-satir {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: var(--b3) var(--b2);
  border-bottom: 1px solid var(--cizgi);
}
.om-gorev-satir:last-child { border-bottom: none; }
.om-gorev-satir.surukleniyor { opacity: .4; }
.om-gorev-satir.surukle-hedefi { border-top: 2px solid var(--vurgu); }

.om-gorev-tutamak {
  cursor: grab;
  color: var(--metin-3);
  padding-top: .3rem;
  touch-action: none;
}
.om-gorev-tutamak:active { cursor: grabbing; }

.om-gorev-onay {
  width: 20px;
  height: 20px;
  accent-color: var(--vurgu);
  cursor: pointer;
  margin-top: .25rem;
  flex-shrink: 0;
}

.om-gorev-govde { flex: 1; min-width: 0; }
.om-gorev-metin {
  font-size: .95rem;
  color: var(--metin);
  word-break: break-word;
  cursor: text;
}
.om-gorev-satir.tamamlandi .om-gorev-metin { color: var(--metin-3); text-decoration: line-through; }

.om-gorev-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; align-items: center; }
.om-gorev-meta select.om-secim { width: auto; min-height: 32px; padding: .25rem .5rem; font-size: .8rem; }

.om-gorev-eylemler { display: flex; gap: .25rem; flex-shrink: 0; }
.om-gorev-eylem-dugme {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--metin-3);
  border-radius: var(--r1);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.om-gorev-eylem-dugme:hover { background: var(--yuzey-2); color: var(--metin); }
.om-gorev-eylem-dugme--tehlike:hover { color: var(--hata); }

.om-alt-gorevler { margin-left: 2.2rem; margin-top: var(--b2); border-left: 2px solid var(--cizgi); padding-left: var(--b3); }
.om-alt-gorev-ekle-form { display: flex; gap: .4rem; margin-left: 2.2rem; margin-top: var(--b2); }
.om-alt-gorev-ekle-form .om-girdi { min-height: 36px; font-size: .85rem; }

.om-liste-sekme-kap { display: inline-flex; align-items: center; gap: .15rem; }
.om-liste-sil-dugme {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--metin-3);
  border-radius: var(--r-tam);
  cursor: pointer;
  font-size: .85rem;
}
.om-liste-sil-dugme:hover { background: var(--hata-zemin); color: var(--hata); }

/* ---- Kenar çubuğu (Bugün/Yaklaşan/Tüm Projeler + Projeler) ----
   .om-makale-duzen/.om-makale-yan'ın (rehber makale TOC'u) sticky-grid
   mekaniğiyle aynı desen, kasıtlı olarak AYRI sınıf adlarıyla — o sınıflar
   anlamsal olarak makale içindekiler'i ifade eder, burada değil. */
.om-yt-duzen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b5);
  align-items: start;
}
@media (min-width: 900px) {
  .om-yt-duzen { grid-template-columns: 240px minmax(0, 1fr); gap: var(--b6); }
  .om-yt-kenar { position: sticky; top: 96px; }
}
.om-yt-icerik { min-width: 0; }

.om-yt-gorunum-listesi {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
@media (max-width: 899px) {
  .om-yt-gorunum-listesi { flex-direction: row; flex-wrap: wrap; gap: var(--b2); }
}

.om-yt-gorunum-oge-kap { display: flex; align-items: center; gap: 0; }
.om-yt-gorunum-oge {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
  padding: .55rem .75rem;
  border-radius: var(--r1);
  border: none;
  background: transparent;
  color: var(--metin-2);
  font-family: var(--font-govde);
  font-size: .92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.om-yt-gorunum-oge i { color: var(--metin-3); font-size: 1rem; flex-shrink: 0; }
.om-yt-gorunum-oge:hover { background: var(--yuzey-2); color: var(--metin); }
.om-yt-gorunum-oge[aria-current="true"] { background: var(--birincil-bg-duz); color: var(--birincil-metin); font-weight: 600; }
.om-yt-gorunum-oge[aria-current="true"] i { color: inherit; }

.om-yt-projeler-baslik {
  font-family: var(--font-baslik);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--metin-3);
  margin: var(--b5) 0 var(--b2);
}

.om-yt-paylasildi-ikon { color: var(--metin-3); font-size: .85rem; flex-shrink: 0; margin-right: .3rem; }

/* ---- Proje başlığı + araçlar ---- */
.om-yt-proje-baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b3);
  margin-bottom: var(--b4);
}
.om-yt-proje-baslik h2 {
  font-family: var(--font-baslik);
  font-size: 1.3rem;
  margin: 0;
  cursor: text;
}
.om-yt-proje-eylemler { display: flex; gap: var(--b2); flex-wrap: wrap; }

/* ---- Bölümler (yalnızca üst seviye görevleri gruplar; .om-alt-gorevler'in
   girinti/kenar-çizgi stilini KASITLI OLARAK almaz — bölümler görevleri
   yan yana gruplar, bir üst görevin altına girintilemez) ---- */
.om-bolum-kap { margin-bottom: var(--b5); }
.om-yt-bolum-baslik {
  display: flex;
  align-items: center;
  gap: var(--b2);
  padding: var(--b2);
  color: var(--metin-2);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: .95rem;
}
.om-yt-bolum-baslik .sayac { color: var(--metin-3); font-weight: 400; font-size: .85rem; }
.om-bolum-baslik-eylemler { display: flex; gap: .1rem; margin-left: auto; }
.om-bolum-gorevler { border-top: 1px solid var(--cizgi); }

/* ---- Hızlı ekleme önizlemesi (doğal dil ayrıştırıcısının sonucu) ---- */
.om-hizli-onizleme {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: var(--b3);
}
.om-hizli-onizleme .om-rozet {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: var(--r-tam);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  font-size: .8rem;
  color: var(--metin-2);
}
.om-hizli-onizleme .om-rozet i { color: var(--vurgu); }

/* ---- Görünümlerde tarih/proje grup başlıkları (Yaklaşan/Tüm Projeler) ---- */
.om-yt-grup-baslik {
  font-family: var(--font-baslik);
  font-size: .8rem;
  font-weight: 700;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: var(--b4) 0 var(--b2);
}
.om-yt-grup-baslik:first-child { margin-top: 0; }
.om-yt-liste-etiketi {
  display: inline-block;
  font-size: .75rem;
  color: var(--vurgu-metin);
  background: var(--yuzey-2);
  padding: .15rem .5rem;
  border-radius: var(--r-tam);
  margin-left: .5rem;
}

/* ---- Sidebar arama (Modül 1) — .om-arama'nın (araclar/index.html'deki
   katalog aramasıyla aynı bileşen) sidebar'a sığacak kompakt varyantı ---- */
.om-yt-arama input { min-height: 40px; font-size: .88rem; }

/* ---- Proje nav rozeti: aktif (tamamlanmamış) görev sayısı ---- */
.om-yt-sayac-rozet {
  flex-shrink: 0;
  min-width: 1.4rem;
  padding: .1rem .4rem;
  border-radius: var(--r-tam);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  color: var(--metin-3);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.om-yt-gorunum-oge[aria-current="true"] .om-yt-sayac-rozet {
  background: var(--birincil-metin);
  color: var(--birincil-bg-duz);
  border-color: transparent;
}

/* ---- Görünüm/sıralama çubuğu (Liste/Pano/Takvim — Modül 8) ---- */
.om-yt-gorunum-cubugu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--b3);
  margin-bottom: var(--b4);
  padding-bottom: var(--b4);
  border-bottom: 1px solid var(--cizgi);
}
.om-yt-siralama-alan { display: flex; align-items: center; gap: var(--b2); font-size: .85rem; color: var(--metin-2); }
.om-yt-siralama-alan .om-secim { min-height: 36px; font-size: .85rem; }

/* ---- Pano (Kanban) — sütunlar = bölümler ---- */
.om-yt-pano {
  display: flex;
  gap: var(--b4);
  overflow-x: auto;
  padding-bottom: var(--b3);
  align-items: flex-start;
}
.om-yt-pano-sutun {
  flex: 0 0 280px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b3);
}
.om-yt-pano-sutun-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b2);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: var(--b3);
  color: var(--metin);
}
.om-yt-pano-sutun-baslik .sayac {
  font-size: .75rem;
  font-weight: 700;
  color: var(--metin-3);
  background: var(--yuzey-2);
  border-radius: var(--r-tam);
  padding: .05rem .45rem;
}
.om-yt-pano-sutun-govde {
  display: flex;
  flex-direction: column;
  gap: var(--b2);
  min-height: 40px;
  border-radius: var(--r1);
  transition: background .15s;
}
.om-yt-pano-sutun-govde.surukle-hedefi { background: var(--birincil-bg-duz); }
.om-yt-pano-sutun-govde .om-gorev-satir {
  background: var(--bg);
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  padding: var(--b2);
}

/* ---- Takvim — ay ızgarası ---- */
.om-yt-takvim-baslik-cubugu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b3);
  margin-bottom: var(--b4);
}
.om-yt-takvim-ay-baslik { font-family: var(--font-baslik); font-weight: 600; font-size: 1.05rem; min-width: 10ch; text-align: center; }
.om-yt-takvim-izgara {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  overflow: hidden;
}
.om-yt-takvim-gun-adi {
  background: var(--yuzey-2);
  padding: .5rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--metin-3);
  text-transform: uppercase;
}
.om-yt-takvim-hucre {
  background: var(--bg);
  min-height: 90px;
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.om-yt-takvim-hucre--bos { background: var(--yuzey); }
.om-yt-takvim-hucre--bugun { background: var(--birincil-bg-duz); }
.om-yt-takvim-hucre .gun-no { font-size: .78rem; font-weight: 600; color: var(--metin-2); }
.om-yt-takvim-gorev {
  font-size: .72rem;
  padding: .1rem .35rem;
  border-radius: var(--r-tam);
  background: var(--yuzey-2);
  color: var(--metin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.om-yt-takvim-gorev.tamamlandi { text-decoration: line-through; color: var(--metin-3); }
.om-yt-takvim-fazla { font-size: .7rem; color: var(--metin-3); }
@media (max-width: 640px) {
  .om-yt-takvim-hucre { min-height: 56px; }
  .om-yt-takvim-gorev { display: none; } /* dar ekranda yalnızca gün no + "+N daha" */
}

/* ---- Yaklaşan gün şeridi (Modül 5) ---- */
.om-yt-gun-seridi {
  display: flex;
  gap: var(--b2);
  overflow-x: auto;
  margin-bottom: var(--b5);
  padding-bottom: var(--b2);
}
.om-yt-gun-dugme {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 52px;
  padding: .5rem .3rem;
  border-radius: var(--r2);
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  color: var(--metin-2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.om-yt-gun-dugme:hover { border-color: var(--vurgu); }
.om-yt-gun-dugme .gun-adi { font-size: .7rem; text-transform: uppercase; color: var(--metin-3); }
.om-yt-gun-dugme .gun-no { font-family: var(--font-baslik); font-weight: 700; font-size: 1.05rem; }
.om-yt-gun-dugme--bugun { background: var(--birincil-bg-duz); border-color: transparent; color: var(--birincil-metin); }
.om-yt-gun-dugme--bugun .gun-adi { color: inherit; opacity: .8; }
.om-yt-gun-bolumu { margin-bottom: var(--b6); scroll-margin-top: 100px; }
.om-yt-gun-hizli-ekle {
  display: flex;
  gap: var(--b2);
  margin-top: var(--b2);
  padding-top: var(--b2);
}
.om-yt-gun-hizli-ekle input { flex: 1; min-height: 38px; font-size: .85rem; }
.om-yt-gun-hizli-ekle select { min-height: 38px; font-size: .85rem; max-width: 160px; }

/* ---- Filtreler & Etiketler paneli ---- */
.om-yt-panel-bos-metin { color: var(--metin-3); font-size: .85rem; margin: 0 0 var(--b4); }
.om-yt-filtre-olustur { margin-bottom: var(--b6); }
.om-yt-etiket-listesi { display: flex; flex-direction: column; }
.om-yt-etiket-satir {
  display: flex;
  align-items: center;
  gap: var(--b3);
  padding: .6rem 0;
  border-bottom: 1px solid var(--cizgi);
}
.om-yt-etiket-satir:last-child { border-bottom: none; }
.om-yt-etiket-ad {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  font-weight: 500;
}
.om-yt-etiket-ad:hover, .om-yt-etiket-ad:focus { color: var(--vurgu-metin); }

/* ---- Üye/paylaşım paneli ---- */
.om-yt-uyeler { margin-top: var(--b3); }
.om-yt-uye-satir {
  display: flex;
  align-items: center;
  gap: var(--b2);
  padding: .5rem 0;
  border-bottom: 1px solid var(--cizgi);
}
.om-yt-uye-satir:last-child { border-bottom: none; }
.om-yt-uye-satir .eposta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; color: var(--metin); }
.om-yt-uye-satir .rol-etiketi { font-size: .75rem; color: var(--metin-3); }

/* ---- Onay/girdi modalı (window.confirm/prompt'un yerini alır — tarayıcının
   varsayılan sistem popup'ı stillendirilemiyor, bu yüzden site tasarım
   dilinde kendi diyaloğumuz var) ---- */
.om-yt-modal-katman {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--b4);
  background: rgba(2, 6, 18, .6);
  backdrop-filter: blur(2px);
}
[data-theme="light"] .om-yt-modal-katman { background: rgba(16, 26, 51, .4); }

.om-yt-modal {
  width: 100%;
  max-width: 420px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b5);
  box-shadow: var(--golge);
}
@media (prefers-reduced-motion: no-preference) {
  .om-yt-modal-katman { animation: om-yt-modal-sonme .15s ease; }
  .om-yt-modal { animation: om-yt-modal-yukselme .18s ease; }
}
@keyframes om-yt-modal-sonme { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-yt-modal-yukselme { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.om-yt-modal-baslik { font-family: var(--font-baslik); font-weight: 700; font-size: 1.1rem; color: var(--metin); margin-bottom: var(--b2); }
.om-yt-modal-mesaj { color: var(--metin-2); font-size: .92rem; line-height: 1.5; margin: 0 0 var(--b4); }
.om-yt-modal-girdi { margin-bottom: var(--b4); }
.om-yt-modal-aksiyonlar { display: flex; justify-content: flex-end; gap: var(--b2); }

.om-btn--tehlike { background: var(--hata); color: #fff; border-color: var(--hata); }
.om-btn--tehlike:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* ---- Görev detay paneli (Modül 3) — .om-yt-modal-katman'ı (aynı overlay/
   backdrop) yeniden kullanır, yalnızca kendi geniş içerik kutusunu tanımlar ---- */
.om-yt-gorev-detay {
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--golge);
}
@media (prefers-reduced-motion: no-preference) {
  .om-yt-gorev-detay { animation: om-yt-modal-yukselme .18s ease; }
}
.om-yt-gorev-detay-ust {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--b3);
  padding: var(--b4) var(--b5);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.om-yt-gorev-detay-baslik-girdi {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--metin);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 1.15rem;
  padding: .4rem;
  border-radius: var(--r1);
}
.om-yt-gorev-detay-baslik-girdi:focus { outline: none; background: var(--yuzey-2); }
.om-yt-modal-kapat {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.om-yt-modal-kapat:hover { background: var(--yuzey-2); color: var(--metin); }

.om-yt-gorev-detay-govde {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--b5);
  padding: var(--b5);
}
@media (min-width: 720px) {
  .om-yt-gorev-detay-govde { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
.om-yt-gorev-detay-ana textarea#ytGorevDetayAciklama {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  margin-bottom: var(--b5);
}
.om-yt-gorev-detay-altbaslik {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--metin-3);
  margin: var(--b5) 0 var(--b3);
}
.om-yt-gorev-detay-ana > .om-yt-gorev-detay-altbaslik:first-of-type { margin-top: 0; }
.om-yt-gorev-detay-yan { display: flex; flex-direction: column; gap: var(--b2); }
.om-yt-gorev-detay-yan .om-gorev-meta { flex-direction: column; align-items: stretch; }
.om-yt-gorev-detay-yan .om-gorev-meta select,
.om-yt-gorev-detay-yan .om-gorev-meta input { width: 100%; }

.om-yt-yorum-satir { padding: var(--b3) 0; border-bottom: 1px solid var(--cizgi); }
.om-yt-yorum-satir:last-child { border-bottom: none; }
.om-yt-yorum-ust { display: flex; align-items: center; gap: var(--b2); margin-bottom: .3rem; }
.om-yt-yorum-yazan { font-weight: 600; font-size: .85rem; color: var(--metin); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-yt-yorum-tarih { font-size: .75rem; color: var(--metin-3); flex-shrink: 0; }
.om-yt-yorum-metin { margin: 0; font-size: .9rem; color: var(--metin-2); white-space: pre-wrap; word-break: break-word; }

.om-yt-hatirlatici-onay { margin-top: .2rem; }

/* ---- Özel tarih/saat seçici (native <input type="date"/"time"> yerine —
   Todoist tarzı, tema-kontrollü açılır takvim/saat popover'ı; native picker
   YOK). Tetikleyici düğmeler eski kompakt tarih input'uyla aynı boyutta;
   popover document.body'ye eklenir ve position:fixed ile konumlanır ki
   görev detay panelinin (.om-yt-modal-katman, z-index 1300) ÜSTÜnde
   çıkabilsin. ---- */
.om-yt-tarih-dugme, .om-yt-saat-dugme {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  width: auto;
  min-height: 32px;
  padding: .25rem .55rem;
  font-size: .8rem;
  font-family: var(--font-govde);
  color: var(--metin-2);
  background: var(--bg);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r1);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.om-yt-tarih-dugme:hover, .om-yt-saat-dugme:hover,
.om-yt-tarih-dugme:focus-visible, .om-yt-saat-dugme:focus-visible {
  border-color: var(--vurgu);
  color: var(--metin);
}
.om-yt-tarih-dugme i, .om-yt-saat-dugme i { font-size: .85rem; flex-shrink: 0; }
.om-yt-tarih-dugme.gecmis { border-color: var(--hata); color: var(--hata); }
.om-yt-gorev-detay-yan .om-gorev-meta .om-yt-tarih-dugme,
.om-yt-gorev-detay-yan .om-gorev-meta .om-yt-saat-dugme { width: 100%; justify-content: flex-start; }

.om-yt-pop {
  position: fixed;
  z-index: 1450;
  width: 280px;
  max-width: calc(100vw - 16px);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--golge);
  padding: var(--b3);
}
/* popover'ın kendisi (KRİTİK-4 için tabindex="-1" taşır) yalnızca ay
   değişimi gibi dahili bir DOM temizliği sırasında ÇOK KISA süreliğine
   programatik odak "park" noktası olarak kullanılır — görünür bir odak
   halkasına gerek yok, göz kırpması önlenir. */
.om-yt-pop:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .om-yt-pop { animation: om-yt-pop-yukselme .14s ease; }
}
@keyframes om-yt-pop-yukselme { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.om-yt-hazir { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--b3); }
.om-yt-hazir-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  font-size: .78rem;
  padding: .3rem .65rem;
  border-radius: var(--r1);
  border: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  color: var(--metin-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.om-yt-hazir-dugme:hover, .om-yt-hazir-dugme:focus-visible { border-color: var(--vurgu); color: var(--metin); }

.om-yt-pop-takvim-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--b2); }
.om-yt-pop-ay-baslik { font-family: var(--font-baslik); font-weight: 700; font-size: .9rem; color: var(--metin); }
.om-yt-pop-ay-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.om-yt-pop-ay-dugme:hover, .om-yt-pop-ay-dugme:focus-visible { background: var(--yuzey-2); color: var(--metin); }

.om-yt-pop-hafta-baslik { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: .2rem; }
.om-yt-pop-hafta-baslik span { font-size: .68rem; font-weight: 600; color: var(--metin-3); text-transform: uppercase; }

.om-yt-pop-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.om-yt-pop-gun {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: none;
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.om-yt-pop-gun:hover, .om-yt-pop-gun:focus-visible { background: var(--yuzey-2); }
/* Dış-ay (taşma) günleri: ÖNCEDEN opacity:.55 ile soluklaştırılıyordu, bu da
   --metin-3'ün (kendi başına ≥4.5:1 kontrast sağlayan) etkili kontrastını
   arka planla karıştırıp WCAG eşiğinin altına düşürüyordu (accessibility
   denetimi ORTA-7). Düzeltme: opaklığı kaldır, tam-opak --metin-3 kullan —
   ayrımı hâlâ renk farkıyla (ve aria-label'daki gerçek ay/yılla) sağlanır. */
.om-yt-pop-gun--dis { color: var(--metin-3); }
.om-yt-pop-gun--dis:hover, .om-yt-pop-gun--dis:focus-visible { color: var(--metin-2); }
.om-yt-pop-gun--bugun { box-shadow: inset 0 0 0 1px var(--vurgu); font-weight: 700; color: var(--vurgu-metin); }
.om-yt-pop-gun--secili, .om-yt-pop-gun--secili:hover { background: var(--vurgu); color: var(--bg); font-weight: 700; box-shadow: none; }

.om-yt-pop-kaldir {
  display: block;
  width: 100%;
  margin-top: var(--b3);
  padding: .4rem;
  text-align: center;
  font-size: .82rem;
  color: var(--hata);
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  cursor: pointer;
  transition: background .15s;
}
.om-yt-pop-kaldir:hover, .om-yt-pop-kaldir:focus-visible { background: var(--yuzey-2); }

.om-yt-pop--saat { width: 220px; }
.om-yt-pop-saat-girdi { width: 100%; margin-bottom: var(--b2); text-align: center; letter-spacing: .05em; }
.om-yt-pop-saat-liste { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.om-yt-pop-saat-secenek {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .6rem;
  text-align: left;
  font-size: .84rem;
  border: none;
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.om-yt-pop-saat-secenek:hover, .om-yt-pop-saat-secenek:focus-visible { background: var(--yuzey-2); }
.om-yt-pop-saat-secenek--secili, .om-yt-pop-saat-secenek--secili:hover { background: var(--vurgu); color: var(--bg); font-weight: 600; }

/* ---------- 10. OYUNLAR: SKOR TABLOSU + SKOR-KAYDETME MODALI ----------
   Sözyıldız / Ay İnişi / Yörünge Atışı arasında PAYLAŞILAN bileşenler —
   üç oyun sayfası da bunu kullanacağı için oyuna özel inline <style>
   YERİNE burada (om- bileşen kütüphanesinde) tanımlanır. Modal görünümü
   .om-yt-modal ile tutarlı tutuldu ama kasıtlı olarak AYRI sınıflar ve
   AYRI keyframe adları kullanıldı — oyunlar Yapılacaklar Listesi modülünden
   bağımsız, biri değişirse/kaldırılırsa diğeri etkilenmesin diye. */

/* ---- Skor kaydetme modalı ---- */
.om-skor-modal-katman {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--b4);
  background: rgba(2, 6, 18, .6);
  backdrop-filter: blur(2px);
}
[data-theme="light"] .om-skor-modal-katman { background: rgba(16, 26, 51, .4); }
.om-skor-modal-katman[hidden] { display: none; }

.om-skor-modal {
  width: 92%;
  max-width: 380px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b4);
  box-shadow: var(--golge);
}
@media (prefers-reduced-motion: no-preference) {
  .om-skor-modal-katman { animation: om-skor-modal-sonme .15s ease; }
  .om-skor-modal { animation: om-skor-modal-yukselme .18s ease; }
}
@keyframes om-skor-modal-sonme { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-skor-modal-yukselme { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.om-skor-modal-baslik {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--metin);
  margin: 0 0 var(--b2);
}
.om-skor-modal-aciklama {
  color: var(--metin-2);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 var(--b3);
}
.om-skor-modal label {
  display: block;
  font-size: .84rem;
  font-weight: 500;
  color: var(--metin-2);
  margin-bottom: .3rem;
}
.om-skor-ad-girdi {
  width: 100%;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r1);
  background: var(--bg);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.om-skor-ad-girdi::placeholder { color: var(--metin-3); }
.om-skor-ad-girdi:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(157, 184, 232, .18);
}

/* Küfür/geçersiz takma ad uyarısı — SADECE renkle değil, ikon + metinle
   birlikte (om-kutu--uyari'nin border-left + zemin desenine benzer,
   ama dikkat yerine hata token'ıyla — bu bir doğrulama HATASI, uyarı değil) */
.om-skor-uyari {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  background: var(--hata-zemin);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--hata);
  border-radius: var(--r1);
  padding: .6rem .8rem;
  margin: var(--b3) 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--hata);
}
.om-skor-uyari > i { flex-shrink: 0; font-size: 1rem; margin-top: .05rem; color: var(--hata); }
.om-skor-uyari[hidden] { display: none; }

.om-skor-modal-aksiyonlar {
  display: flex;
  justify-content: flex-end;
  gap: var(--b2);
  margin-top: var(--b4);
}
@media (max-width: 380px) {
  /* Çok dar ekranlarda (ör. eski küçük telefonlar) iki buton yan yana
     sıkışmasın diye alt alta ve tam genişlik olur. */
  .om-skor-modal-aksiyonlar { flex-direction: column-reverse; }
  .om-skor-modal-aksiyonlar .om-btn { width: 100%; }
}

/* ---- Skor tablosu (leaderboard) ---- */
.om-skor-tablo {
  min-width: 0; /* olası bir grid/flex ebeveyninde içerik-tabanlı taşmayı önler */
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  padding: var(--b4);
}
.om-skor-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b2);
  margin-bottom: var(--b3);
}
.om-skor-baslik h2, .om-skor-baslik h3, .om-skor-baslik .om-skor-baslik-metin {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--metin);
  margin: 0;
}
.om-skor-yenile-dugme {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-2);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.om-skor-yenile-dugme:hover { color: var(--metin); border-color: var(--cizgi-guclu); background: var(--yuzey-2); }

/* Sekmeler (Günlük/Haftalık/Aylık/Tüm Zamanlar) — .om-cip'in aktif-durum
   token'larıyla aynı (birincil-bg-duz/birincil-metin), ama pill sekme
   olarak; mobilde container kendi içinde yatay kayar, body etkilenmez
   (bkz. .om-skor-tablo'daki min-width:0 notu + burada flex-shrink:0). */
.om-skor-sekmeler {
  display: flex;
  gap: var(--b1);
  margin-bottom: var(--b4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.om-skor-sekme-dugme {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border-radius: var(--r-tam);
  border: 1px solid var(--cizgi-guclu);
  background: transparent;
  color: var(--metin-2);
  font-family: var(--font-govde);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.om-skor-sekme-dugme:hover { color: var(--metin); border-color: var(--vurgu); }
.om-skor-sekme-dugme[aria-selected="true"] {
  background: var(--birincil-bg-duz);
  color: var(--birincil-metin);
  border-color: transparent;
  font-weight: 600;
}

.om-skor-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  border-radius: var(--r1);
  overflow: hidden;
}
.om-skor-satir {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--b3);
  padding: .6rem var(--b3);
  background: var(--yuzey);
}
.om-skor-sira {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: .95rem;
  color: var(--metin-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.om-skor-ad {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: .92rem;
  color: var(--metin);
}
.om-skor-puan {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: .95rem;
  color: var(--metin);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* İlk 3 sıraya hafif vurgu — sıra numarası zaten metin olduğundan renk
   burada TEK anlam taşıyıcı değil, yalnızca pekiştirici (om-vs-kutu'daki
   border-left + zemin desenine benzer). Yalnızca 1. (altın) yeni bir
   renk (--dikkat) alır; 2./3. (gümüş/bronz) için yeni bir token icat
   etmek yerine mevcut nötr token'lardan (--cizgi-guclu/--cizgi/--metin)
   "ince" bir vurgu kuruldu. */
.om-skor-satir--altin { background: var(--dikkat-zemin); border-left: 3px solid var(--dikkat); }
.om-skor-satir--altin .om-skor-sira { color: var(--dikkat); }
.om-skor-satir--gumus { border-left: 3px solid var(--cizgi-guclu); }
.om-skor-satir--bronz { border-left: 3px solid var(--cizgi); }
.om-skor-satir--gumus .om-skor-sira,
.om-skor-satir--bronz .om-skor-sira { color: var(--metin); }

.om-skor-bos {
  text-align: center;
  padding: var(--b6) var(--b4);
  color: var(--metin-3);
  font-size: .92rem;
}
.om-skor-yukleniyor {
  text-align: center;
  padding: var(--b6) var(--b4);
  color: var(--metin-3);
  font-size: .92rem;
}
.om-skor-yukleniyor i { display: block; font-size: 1.6rem; margin-bottom: var(--b2); }
@media (prefers-reduced-motion: no-preference) {
  .om-skor-yenile-dugme.donuyor i,
  .om-skor-yukleniyor i { animation: om-skor-donme .9s linear infinite; }
}
@keyframes om-skor-donme { to { transform: rotate(360deg); } }

/* ---------- 11. REKLAM SLOTLARI (AdSense ad unit) ----------
   Yalnızca REKLAM_SLOTLARI (site.js) doluyken reklamSlot() tarafından
   DOM'a eklenir; slot ID'si boş olduğu sürece bu kurallar hiçbir zaman
   tetiklenmez (deploy görsel bir no-op'tur). ".dolu" sınıfı yalnızca
   reklamSlot()'un gerçekten bir <ins> ekleyerek oluşturduğu kapsayıcıda
   bulunur — CLS'i (yerleşim sıçraması) önlemek için reklam yüklenene
   kadar bir minimum yükseklik ayırır; boş bir ".om-reklam-kap" (şu an
   sitede hiç var olmayan bir durum) yer kaplamaz. */
.om-reklam-kap {
  margin: var(--b6) auto;
  max-width: 860px;
  text-align: center;
}
.om-reklam-etiket {
  display: block;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: var(--b2);
}
.om-reklam { display: block; }
.om-reklam-kap.dolu { min-height: 280px; }

/* =========================================================
   BÖLÜM 12 — Global arama (komut paleti)
   Header'daki arama düğmesi / Cmd·Ctrl+K / "/" ile açılan, her sayfada
   çalışan overlay. site.js globalAramaKur() üretir; ARACLAR + yayındaki
   REHBERLER üzerinde arar. Token-tabanlı, dark/light otomatik.
   ========================================================= */
.om-garama-katman {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: max(8vh, var(--b6)) var(--b4) var(--b4);
  background: rgba(4, 8, 20, .62);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
[data-theme="light"] .om-garama-katman { background: rgba(16, 26, 51, .38); }
.om-garama-katman[hidden] { display: none; }
body.om-garama-acik { overflow: hidden; }

.om-garama-kutu {
  width: 100%;
  max-width: 620px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r3);
  box-shadow: var(--golge);
  overflow: hidden;
  animation: om-garama-gir .16s ease;
}
@keyframes om-garama-gir { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .om-garama-kutu { animation: none; } }

.om-garama-ust {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--cizgi);
}
.om-garama-ust > i { color: var(--metin-3); font-size: 1.1rem; flex: 0 0 auto; }
.om-garama-girdi {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: 1.05rem;
  outline: none;
}
.om-garama-girdi::placeholder { color: var(--metin-3); }
.om-garama-girdi::-webkit-search-cancel-button { display: none; }
.om-garama-kapat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--metin-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.om-garama-kapat:hover { background: var(--yuzey-2); color: var(--metin); }

.om-garama-sonuc { max-height: min(60vh, 460px); overflow-y: auto; padding: var(--b2); }

.om-garama-grup + .om-garama-grup { margin-top: var(--b2); }
.om-garama-grup-bas {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--metin-3);
  padding: var(--b2) var(--b3) var(--b1);
}

.om-garama-satir {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem var(--b3);
  border-radius: var(--r2);
  color: var(--metin);
  text-decoration: none;
  transition: background .12s;
}
.om-garama-satir:hover,
.om-garama-satir.secili { background: var(--vurgu-zemin); }
.om-garama-satir.secili { outline: 1px solid var(--vurgu); outline-offset: -1px; }
.om-garama-ikon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r1);
  background: var(--yuzey-2);
  color: var(--vurgu);
  font-size: 1.05rem;
}
.om-garama-metin { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.om-garama-ad { font-weight: 600; font-size: .96rem; }
.om-garama-ack {
  font-size: .82rem;
  color: var(--metin-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.om-garama-ipucu,
.om-garama-bos { padding: var(--b5) var(--b4); text-align: center; color: var(--metin-3); }
.om-garama-bos strong { display: block; color: var(--metin-2); margin-bottom: var(--b1); }
.om-garama-bos p { margin: 0; font-size: .9rem; }

/* =========================================================
   BÖLÜM 13 — Baldur's Gate 3 sınıf rehberi
   ---------------------------------------------------------
   13 sayfa (hub + 12 sınıf) bu bloğu paylaşır; bu yüzden
   oyun sayfalarındaki gibi sayfa-içi inline <style> DEĞİL,
   burada tanımlıdır. Tüm renkler token tabanlıdır; her sınıf
   kendi vurgu rengini --sinif-renk custom property'siyle
   verir (bg3.js hero üzerinde set eder).
   ========================================================= */
.om-bg3 { --sinif-renk: var(--vurgu); }

/* ---- hero ---- */
.om-bg3-hero {
  display: flex; gap: var(--b4); align-items: center; flex-wrap: wrap;
  padding: var(--b5); border-radius: var(--r3);
  border: 1px solid var(--cizgi);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--sinif-renk) 26%, transparent), transparent 62%),
    var(--yuzey);
  margin-bottom: var(--b4);
}
.om-bg3-hero-ikon {
  width: 72px; height: 72px; flex: none; border-radius: var(--r2);
  background: var(--yuzey-2); padding: 6px;
  border: 1px solid color-mix(in srgb, var(--sinif-renk) 45%, var(--cizgi));
}
.om-bg3-hero-metin { min-width: 0; flex: 1 1 260px; }
.om-bg3-hero h1 { margin: 0 0 var(--b2); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; }
.om-bg3-tekcumle { margin: 0 0 var(--b3); color: var(--metin-2); max-width: 62ch; }
.om-bg3-rozetler { display: flex; flex-wrap: wrap; gap: var(--b2); align-items: center; }

/* ---- zorluk göstergesi (renk tek başına anlam taşımaz: aria-label var) ---- */
.om-bg3-zorluk { display: inline-flex; gap: 3px; align-items: center; }
.om-bg3-zorluk-nokta {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--metin-3); display: block;
}
.om-bg3-zorluk-nokta.dolu { background: var(--sinif-renk, var(--vurgu)); border-color: var(--sinif-renk, var(--vurgu)); }

/* ---- rol etiketleri (site geneli sabit renk kodu) ---- */
.om-bg3-rol {
  font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--metin-2);
}
.om-bg3-rol--onSaf         { border-color: var(--hata);   color: var(--hata); }
.om-bg3-rol--yakinHasar,
.om-bg3-rol--menzilliHasar { border-color: var(--dikkat); color: var(--dikkat); }
.om-bg3-rol--iyilestirme   { border-color: var(--basari); color: var(--basari); }
.om-bg3-rol--alanKontrol   { border-color: #9b7bd4;       color: #9b7bd4; }
.om-bg3-rol--guclendirme   { border-color: var(--vurgu);  color: var(--vurgu); }
.om-bg3-rol--ikna          { border-color: #d8a13a;       color: #d8a13a; }
/* Açık temada bu iki ton --yuzey-2 üzerinde 2.1:1 / 3.1:1'e düşüyordu
   (WCAG 1.4.3). Site zaten --basari/--hata için aynı deseni kullanıyor. */
[data-theme="light"] .om-bg3-rol--alanKontrol { border-color: #6a4aa8; color: #5c3f95; }
[data-theme="light"] .om-bg3-rol--ikna        { border-color: #8a6410; color: #7a5709; }

/* ---- Kolay / Güçlü yol ---- */
.om-bg3-hat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); margin-bottom: var(--b4); }
.om-bg3-hat-dugme {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: var(--b3) var(--b4); border-radius: var(--r2); cursor: pointer;
  border: 1.5px solid var(--cizgi); background: var(--yuzey); color: var(--metin-2);
  font: inherit; transition: border-color .15s, background .15s;
  touch-action: manipulation;
}
.om-bg3-hat-dugme strong { color: var(--metin); font-size: .95rem; }
.om-bg3-hat-dugme span { font-size: .84rem; }
.om-bg3-hat-dugme:hover { border-color: var(--cizgi-guclu); }
.om-bg3-hat-dugme.aktif {
  border-color: var(--sinif-renk, var(--vurgu));
  border-width: 2px;
  background: color-mix(in srgb, var(--sinif-renk, var(--vurgu)) 20%, var(--yuzey));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sinif-renk, var(--vurgu)) 16%, transparent);
}
.om-bg3-hat-dugme.aktif strong::before {
  content: "\2713\00a0";
  color: var(--sinif-renk, var(--vurgu));
}

/* ---- sekmeler ---- */
/* Kaydırma ipucu (Faz 1-3): 390px'te 4. sekme ("Ekipman") ekran dışında
   kalıyor ve şeridin kaydırılabildiğine dair görsel bir işaret yoktu.
   Sağ kenardaki soluklaşma maskesi + kaydırma tutunması bunu görünür
   kılar. Maske SABİT RENK KULLANMAZ: mask-image'da renk yalnızca alfa
   kaynağıdır, currentColor opak olduğu için "göster", transparent
   "gizle" demektir → tema token'ına ihtiyaç duymaz, dark ve light'ta
   birebir aynı davranır. İçerik taşmıyorsa (masaüstü) şeridin sağı
   zaten boş olduğundan görünür bir etkisi olmaz. */
.om-bg3-sekme-serit {
  display: flex; gap: var(--b1); overflow-x: auto; margin-bottom: var(--b4);
  border-bottom: 1px solid var(--cizgi); padding-bottom: 2px;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--b1);
  -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent 100%);
}
.om-bg3-sekme {
  flex: none; padding: var(--b2) var(--b4); cursor: pointer; font: inherit;
  border: none; background: none; color: var(--metin-3);
  border-bottom: 2px solid transparent; touch-action: manipulation;
  scroll-snap-align: start;
}
.om-bg3-sekme.aktif { color: var(--metin); border-bottom-color: var(--sinif-renk, var(--vurgu)); font-weight: 600; }
/* Tutunma (snap), kaydırma sırasında beklenmedik sıçrama olarak
   algılanabilir; hareket azaltma tercihinde kapatılır. Maske statiktir,
   hareket içermez, bu yüzden korunur. */
@media (prefers-reduced-motion: reduce) {
  .om-bg3-sekme-serit { scroll-snap-type: none; }
  .om-bg3-sekme { scroll-snap-align: none; }
}
.om-bg3-panel:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; border-radius: var(--r1); }

/* ---- "kaçıncı seviyedeyim" ---- */
.om-bg3-seviye-secici { margin-bottom: var(--b4); }
.om-bg3-seviye-etiket { display: block; font-size: .86rem; color: var(--metin-3); margin-bottom: var(--b2); }
.om-bg3-seviye-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.om-bg3-seviye-dugme {
  min-width: 38px; padding: 7px 10px; border-radius: var(--r1); cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin-2);
  font: inherit; font-size: .9rem; touch-action: manipulation;
}
.om-bg3-seviye-dugme.aktif {
  background: var(--sinif-renk, var(--vurgu)); border-color: var(--sinif-renk, var(--vurgu));
  /* Sabit #fff DEĞİL: açık sınıf renklerinde (Paladin/Ruhban/Keşiş…) beyaz
     metin 2:1'e kadar düşüyordu. --sinif-metin her sınıf için WCAG 1.4.3
     hesaplanarak sayfanın <body>'sinde veriliyor. */
  color: var(--sinif-metin, #fff); font-weight: 700;
}

/* ---- seviye satırı ---- */
.om-bg3-giris { color: var(--metin-2); max-width: 68ch; margin: 0 0 var(--b4); }
.om-bg3-kurgu-ozet { color: var(--metin-2); margin: 0 0 var(--b4); }
.om-bg3-seviye-liste { display: flex; flex-direction: column; gap: var(--b3); }
.om-bg3-seviye {
  display: grid; grid-template-columns: 74px 1fr; gap: var(--b4);
  padding: var(--b4); border-radius: var(--r2);
  border: 1px solid var(--cizgi); background: var(--yuzey);
}
.om-bg3-seviye.tek { border-color: var(--sinif-renk, var(--vurgu)); box-shadow: var(--golge-kucuk); }
.om-bg3-seviye.tek .om-bg3-seviye-no strong { font-size: 3rem; }
.om-bg3-seviye.tek .om-bg3-secim-metin { font-size: 1.25rem; }
.om-bg3-seviye.gecis { border-left: 4px solid var(--dikkat); }
.om-bg3-seviye-no { display: flex; flex-direction: column; align-items: center; text-align: center; }
.om-bg3-seviye-no .kucuk { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-3); }
.om-bg3-seviye-no strong { font-size: 2rem; line-height: 1; color: var(--sinif-renk, var(--vurgu)); font-family: "Space Grotesk", sans-serif; }
.om-bg3-gecis-rozet {
  margin-top: 6px; font-size: .68rem; font-weight: 700; padding: 2px 6px;
  border-radius: 999px; background: var(--dikkat-zemin, var(--yuzey-2)); color: var(--dikkat);
}
.om-bg3-seviye-govde { min-width: 0; display: flex; flex-direction: column; gap: var(--b3); }

.om-bg3-secim { display: flex; flex-direction: column; gap: 3px; }
.om-bg3-secim-etiket { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-3); }
.om-bg3-secim-metin { font-size: 1.05rem; line-height: 1.35; color: var(--metin); }
.om-bg3-secim.bos .om-bg3-secim-etiket { color: var(--metin-3); font-style: italic; text-transform: none; letter-spacing: 0; }

.om-bg3-ozellik { display: flex; gap: var(--b3); align-items: flex-start; }
.om-bg3-ozellik > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.om-bg3-ozellik-ad { font-weight: 600; font-size: .93rem; }
.om-bg3-ozellik-ne { font-size: .88rem; color: var(--metin-2); }
.om-bg3-ikon { border-radius: 8px; background: var(--yuzey-2); flex: none; }

/* ---- seviyede tek tek SEÇİLECEKLER ----
   .om-bg3-ozellik deseninin (ikon + iki satır metin) kardeşi; sınıfı
   doğrudan paylaşmıyor çünkü 40px ikon + --b3 boşluk 5+ maddelik bir
   listede 390px'te fazla ağır kalıyor, ayrıca ".om-bg3-ozellik > div"
   seçicisi yeni bir kardeş eklenirse kırılır. .om-bg3-ikon paylaşılır. */
.om-bg3-secimler, .om-bg3-hazirlik { display: flex; flex-direction: column; gap: 6px; }
.om-bg3-secenekler {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--b2);
}
.om-bg3-secenek {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--b2);
  align-items: start;
}
/* min-width:0 ŞART: grid child varsayılan min-content genişliğiyle taşar.
   390px'te metne 221px kalıyor, en uzun ad ~273px istiyor → sarma zorunlu. */
.om-bg3-secenek-govde { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.om-bg3-secenek-ust { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.om-bg3-secenek-ad { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.om-bg3-secenek-ne { font-size: .85rem; color: var(--metin-2); }

/* Rozetler RAKAM/METİN taşır — renk tek başına anlam taşımaz (WCAG 1.4.1). */
.om-bg3-sv-rozet, .om-bg3-tur-rozet {
  flex: none; font-size: .7rem; font-weight: 700; line-height: 1.7;
  padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--metin-2);
}
.om-bg3-sv-rozet { border-color: var(--sinif-renk, var(--vurgu)); }
.om-bg3-sv-rozet.kantrip { font-size: .66rem; padding: 0 6px; font-weight: 600; }

/* ---- seviyenin YILDIZI: göz önce buraya gitsin ---- */
.om-bg3-yildiz {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--b3); align-items: center;
  padding: var(--b3); border-radius: var(--r2);
  border: 1px solid var(--sinif-renk, var(--vurgu));
  background: color-mix(in srgb, var(--sinif-renk, var(--vurgu)) 13%, var(--yuzey));
}
.om-bg3-yildiz .om-bg3-ikon { border-radius: 10px; }
.om-bg3-yildiz-govde { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.om-bg3-yildiz-ust { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.om-bg3-yildiz-ad { font-size: 1.12rem; line-height: 1.2; overflow-wrap: anywhere; }
.om-bg3-yildiz-ne { font-size: .9rem; color: var(--metin-2); }
.om-bg3-yildiz-etiket {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--sinif-renk, var(--vurgu)); font-weight: 700; margin-top: 2px;
}

/* ---- "oyunda şu paneli göreceksin": seviye atlama ekranının taklidi ---- */
/* NOT: bu blok eskiden .om-bg3-panel adını kullanıyordu — sekme
   panelinin (role="tabpanel", bg3.js) sınıfıyla AYNI. Kesikli çerçeve
   ve zemin böylece tüm sekme içeriğine sızıyordu. Ad alanı ayrıldı:
   .om-bg3-oyun-panel* yalnızca oyun ekranı taklidine aittir. */
.om-bg3-ekran { display: flex; flex-direction: column; gap: 6px; }
.om-bg3-oyun-panel {
  border: 1px dashed var(--cizgi-guclu); border-radius: var(--r1);
  padding: var(--b2) var(--b3); background: var(--bg-yumusak, var(--yuzey-2));
}
.om-bg3-oyun-panel-ust {
  display: flex; justify-content: space-between; gap: var(--b2);
  align-items: baseline; flex-wrap: wrap; margin-bottom: 6px;
}
.om-bg3-oyun-panel-ad { font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.om-bg3-oyun-panel-sayac { font-size: .72rem; color: var(--metin-3); }
.om-bg3-oyun-panel-kutular { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.om-bg3-kutucuk { font-size: .8rem; color: var(--metin-3); }
.om-bg3-kutucuk.secili { color: var(--metin); font-weight: 600; }
.om-bg3-kutucuk-im { color: var(--metin-3); }
.om-bg3-kutucuk.secili .om-bg3-kutucuk-im { color: var(--sinif-renk, var(--vurgu)); }
.om-bg3-kutucuk-daha { font-size: .76rem; color: var(--metin-3); font-style: italic; }
.om-bg3-oyun-panel-not { margin: 6px 0 0; font-size: .74rem; color: var(--metin-3); }

/* ---- uzun dinlenmede hazırla (çip şeridi, gerekçesiz) ---- */
.om-bg3-hazirlik-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.om-bg3-hazirlik-cip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 4px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--yuzey-2);
  font-size: .82rem; color: var(--metin-2); max-width: 100%;
}
.om-bg3-hazirlik-cip .om-bg3-ikon { border-radius: 50%; }
.om-bg3-hazirlik-not { margin: 2px 0 0; font-size: .78rem; color: var(--metin-3); font-style: italic; }

.om-bg3-ipucu { margin: 0; font-size: .87rem; color: var(--metin-2); }
.om-bg3-ipucu .bi { color: var(--dikkat); }

.om-bg3-uyari {
  display: flex; gap: var(--b2); align-items: flex-start; margin-bottom: var(--b4);
  padding: var(--b3) var(--b4); border-radius: var(--r2);
  border: 1px solid var(--dikkat); background: var(--dikkat-zemin, var(--yuzey-2));
}
.om-bg3-uyari .bi { color: var(--dikkat); }

/* ---- genel bilgi / kartlar ---- */
.om-bg3-genel h2, .om-bg3-taktik h2, .om-bg3-ekipman h2 { font-size: 1.15rem; margin: var(--b5) 0 var(--b3); }
.om-bg3-genel h2:first-child, .om-bg3-taktik h2:first-child, .om-bg3-ekipman h2:first-child { margin-top: 0; }
.om-bg3-tanim { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--b2) var(--b4); margin: 0; }
.om-bg3-tanim dt { color: var(--metin-3); font-size: .88rem; }
.om-bg3-tanim dd { margin: 0; color: var(--metin); font-size: .93rem; }

.om-bg3-puanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--b2); }
.om-bg3-puan {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--b3) var(--b2); border-radius: var(--r1);
  border: 1px solid var(--cizgi); background: var(--yuzey);
}
.om-bg3-puan .ad { font-size: .74rem; color: var(--metin-3); }
.om-bg3-puan strong { font-size: 1.4rem; font-family: "Space Grotesk", sans-serif; color: var(--sinif-renk, var(--vurgu)); }
.om-bg3-not { font-size: .88rem; color: var(--metin-2); margin-top: var(--b2); }

.om-bg3-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--b3); }
.om-bg3-kart { padding: var(--b4); border-radius: var(--r2); border: 1px solid var(--cizgi); background: var(--yuzey); }
.om-bg3-kart h3 { margin: 0 0 var(--b2); font-size: 1rem; }
.om-bg3-kart p { margin: 0 0 var(--b2); font-size: .89rem; color: var(--metin-2); }
.om-bg3-kart--alt.onerilen { border-color: var(--sinif-renk, var(--vurgu)); }
.om-bg3-kart-ust { display: flex; gap: var(--b3); align-items: flex-start; margin-bottom: var(--b2); }
.om-bg3-kart-ust h3 { margin: 0 0 4px; }
.om-bg3-kart-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .76rem; color: var(--metin-3); }
.om-bg3-etiket { padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.om-bg3-etiket.onerilen { background: color-mix(in srgb, var(--basari) 18%, transparent); color: var(--basari); }
.om-bg3-etiket.yeni { background: color-mix(in srgb, var(--vurgu) 18%, transparent); color: var(--vurgu); }

/* ---- arka plan (Background) yeterlilik çipleri — Faz 2 ----
   Hub'daki .om-bg3-cip-kapsama'dan AYRI: orası bir DURUM göstergesi
   (kapsanıyor/kapsanmıyor, renk + görsel-gizli metin), burası yalnızca
   bir etiket listesi — durum taşımadığı için renk kodlaması da yok. */
.om-bg3-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--b2); }
.om-bg3-cip {
  padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  border: 1px solid var(--cizgi-guclu); color: var(--metin-2); background: var(--yuzey-2);
}

/* Faz 4: koşullu eşya rozeti — kısıt metinle verilir, renkle değil. */
.om-bg3-etiket--kosul {
  background: color-mix(in srgb, var(--dikkat) 18%, transparent);
  color: var(--dikkat); font-size: .72rem; vertical-align: middle;
}
.om-bg3-kart--kosullu { border-style: dashed; }

/* Faz 4: ekipman kartındaki "nerede bulunur" satırı. İkon dekoratif
   (aria-hidden), bilgi metinde — renk/ikon tek başına anlam taşımıyor. */
.om-bg3-nerede { font-size: .82rem; color: var(--metin-3); margin: 0; }
.om-bg3-nerede .bi { color: var(--vurgu); margin-right: 2px; }

/* ---- Faz 5: sınıf seçme testi ----
   Seçenekler <button aria-pressed> — radio DEĞİL, çünkü ikinci tık seçimi
   kaldırıyor (kullanıcı fikrini "cevapsız"a döndürebilmeli). Durum RENKLE
   DEĞİL aria-pressed + kalın kenarlıkla veriliyor (WCAG 1.4.1). */
.om-bg3-test-bolum { margin-top: var(--b6); }
.om-bg3-test-soru { border: 0; padding: 0; margin: 0 0 var(--b4); }
.om-bg3-test-soru legend { padding: 0; margin-bottom: var(--b2); font-weight: 600; font-size: .95rem; }
.om-bg3-test-cip { cursor: pointer; font-weight: 500; }
.om-bg3-test-cip.aktif {
  border-color: var(--sinif-renk, var(--vurgu)); border-width: 2px;
  color: var(--metin); font-weight: 700;
}
.om-bg3-test-cip:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.om-bg3-test-sonuc-baslik { margin: var(--b4) 0 var(--b2); font-size: 1rem; }

/* ---- Faz 5: iki sınıfı karşılaştırma ----
   390px'te iki sütun yan yana TAŞIYOR; çözüm öznitelik satırlı tek tablo +
   yatay kaydırılabilir sarmalayıcı. Sarmalayıcı odaklanabilir (tabindex=0
   JS'te değil, burada gerekmez) — klavye kullanıcısı kaydırma için ok
   tuşlarını tablo içindeyken kullanabilir. */
.om-bg3-karsilastir-bolum { margin-top: var(--b6); }
.om-bg3-kars-secim { display: flex; gap: var(--b3); flex-wrap: wrap; margin-bottom: var(--b3); }
.om-bg3-kars-select {
  padding: 8px 10px; border-radius: var(--r1); min-width: 150px;
  border: 1px solid var(--cizgi-guclu); background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: .9rem;
}
.om-bg3-kars-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.om-bg3-kars-tablo { border-collapse: collapse; width: 100%; font-size: .86rem; }
.om-bg3-kars-tablo th, .om-bg3-kars-tablo td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}
.om-bg3-kars-tablo thead th { color: var(--sinif-renk, var(--vurgu)); font-size: .9rem; }
.om-bg3-kars-tablo tbody th { color: var(--metin-2); font-weight: 600; white-space: nowrap; }
.om-bg3-kars-tablo tbody tr:nth-child(odd) { background: var(--yuzey); }
.om-bg3-kars-git { display: flex; gap: var(--b2); flex-wrap: wrap; margin-top: var(--b3); }

/* ---- Faz 3: çoklu sınıf + Illithid (hub) ---- */
.om-bg3-coksinif-bolum, .om-bg3-illithid-bolum { margin-top: var(--b6); }
.om-bg3-coksinif-ad { color: inherit; text-decoration: none; }
.om-bg3-coksinif-ad:hover, .om-bg3-coksinif-ad:focus-visible { text-decoration: underline; }
.om-bg3-illithid-kademe { margin: var(--b4) 0 var(--b2); font-size: .95rem; color: var(--metin-2); }
.om-bg3-kart h4 { margin: 0; font-size: .95rem; }
/* Illithid kartında ikon + başlık aynı satırda; om-bg3-kart-ust zaten flex. */
.om-bg3-kart-ust h4 { align-self: center; }
/* Spoiler kapısı: kullanıcı açmayı kendi seçer. */
.om-bg3-spoiler {
  border: 1px dashed var(--cizgi-guclu); border-radius: var(--r2);
  padding: var(--b3) var(--b4); background: var(--yuzey);
}
.om-bg3-spoiler > summary {
  cursor: pointer; font-weight: 600; color: var(--dikkat);
}
.om-bg3-spoiler > summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.om-bg3-spoiler[open] > summary { margin-bottom: var(--b3); }

/* ---- taktik / hatalar ---- */
.om-bg3-ipuclari, .om-bg3-hatalar { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--b2); }
.om-bg3-ipuclari li {
  padding: var(--b3) var(--b4); border-radius: var(--r1);
  border-left: 3px solid var(--vurgu); background: var(--yuzey);
}
.om-bg3-hatalar li {
  padding: var(--b3) var(--b4); border-radius: var(--r1);
  border-left: 3px solid var(--hata); background: color-mix(in srgb, var(--hata) 8%, var(--yuzey));
}
.om-bg3-hatalar .bi { color: var(--hata); }

.om-bg3-kaynaklar { margin-top: var(--b5); font-size: .84rem; color: var(--metin-3); }
.om-bg3-kaynaklar summary { cursor: pointer; }
.om-bg3-kaynaklar ul { margin: var(--b2) 0 0; padding-left: 1.1rem; }
.om-bg3-kaynaklar a { color: var(--metin-2); }

/* ---- fan içeriği künyesi (WotC Fan Content Policy'nin istediği metin) ---- */
.om-bg3-kunye {
  margin-top: var(--b5); padding: var(--b4); border-radius: var(--r2);
  border: 1px dashed var(--cizgi); background: var(--bg-yumusak);
  font-size: .8rem; color: var(--metin-3); line-height: 1.55;
}
.om-bg3-kunye a { color: var(--metin-2); }

@media (max-width: 640px) {
  .om-bg3-hat { grid-template-columns: 1fr; }
  .om-bg3-seviye { grid-template-columns: 56px 1fr; gap: var(--b3); padding: var(--b3); }
  .om-bg3-seviye-no strong { font-size: 1.6rem; }
  .om-bg3-tanim { grid-template-columns: 1fr; gap: 2px var(--b2); }
  .om-bg3-tanim dd { margin-bottom: var(--b2); }
  .om-bg3-secenek { grid-template-columns: 28px 1fr; gap: 7px; }
  .om-bg3-secenek-ne { font-size: .82rem; }
  .om-bg3-hazirlik-cip { font-size: .78rem; }
  .om-bg3-yildiz { grid-template-columns: 44px 1fr; gap: var(--b2); }
  .om-bg3-yildiz-ad { font-size: 1rem; }
}

/* ---------- BÖLÜM 13b — BG3 hub: katalog + parti seçici ---------- */
.om-bg3-parti-bolum, .om-bg3-katalog-bolum { margin-bottom: var(--b7); }
.om-bg3-parti-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); flex-wrap: wrap; }
.om-bg3-parti-ust h2, .om-bg3-katalog-bolum h2 { margin: 0 0 var(--b2); font-size: 1.3rem; }
.om-bg3-katalog-bolum h2 { margin-top: 0; }

/* --- 4 slot --- */
.om-bg3-slotlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b3); margin: var(--b4) 0; }
/* Slot artık bir KARAKTER kartı: isim + sınıf + alt sınıf/yol + roller.
   Boş slot ortalanır, dolu slot sola hizalı bir kart olur. */
.om-bg3-slot {
  position: relative; display: flex; flex-direction: column; gap: var(--b2);
  min-height: 116px; padding: var(--b3); text-align: center;
  align-items: center; justify-content: center;
  border: 1.5px dashed var(--cizgi); border-radius: var(--r2); background: var(--yuzey);
}
.om-bg3-slot.dolu {
  align-items: stretch; justify-content: flex-start; text-align: left;
  border-style: solid; border-color: var(--sinif-renk, var(--vurgu));
  background: color-mix(in srgb, var(--sinif-renk, var(--vurgu)) 12%, var(--yuzey));
}
.om-bg3-slot-siluet {
  font-size: 1.5rem; font-family: "Space Grotesk", sans-serif;
  color: var(--metin-3); line-height: 1; opacity: .5;
}
.om-bg3-slot-bos { font-size: .78rem; color: var(--metin-3); }
.om-bg3-slot-ust { display: flex; gap: var(--b2); align-items: flex-start; padding-right: 20px; }
.om-bg3-slot-baslik { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
/* İsim alanı: dolana kadar girdi gibi görünmez, tıklayınca belli olur. */
.om-bg3-slot-isim {
  font: 700 .95rem/1.2 "Space Grotesk", sans-serif; color: var(--metin);
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 4px; width: 100%; min-width: 0;
}
.om-bg3-slot-isim::placeholder { color: var(--metin-3); font-weight: 500; font-size: .84rem; }
.om-bg3-slot-isim:hover { border-color: var(--cizgi); }
.om-bg3-slot-isim:focus { border-color: var(--sinif-renk, var(--vurgu)); background: var(--yuzey); outline: none; }
.om-bg3-slot-sinif { font-size: .78rem; color: var(--metin-2); padding: 0 4px; }
.om-bg3-slot-kurgu {
  width: 100%; font-size: .8rem; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin);
}
.om-bg3-slot-roller { display: flex; flex-wrap: wrap; gap: 4px; }
.om-bg3-slot-roller .om-bg3-rol { font-size: .66rem; padding: 0 5px; }
.om-bg3-slot-link { font-size: .78rem; color: var(--vurgu); margin-top: auto; }
.om-bg3-slot-sil {
  position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; line-height: 1;
  border: none; background: none; color: var(--metin-3); cursor: pointer; font-size: 1.2rem;
  border-radius: 50%; touch-action: manipulation;
}
.om-bg3-slot-sil:hover { color: var(--hata); background: var(--yuzey-2); }
.om-bg3-parti-eylem { display: flex; gap: var(--b2); flex-wrap: wrap; }
/* Boş slotun kendisi bir düğme: tıklayınca katalog'a götürür. */
.om-bg3-slot-bos-dugme {
  display: flex; flex-direction: column; align-items: center; gap: var(--b2);
  width: 100%; padding: var(--b3) 0; border: none; background: none;
  color: inherit; cursor: pointer; touch-action: manipulation; border-radius: var(--r1);
}
.om-bg3-slot-bos-dugme:hover .om-bg3-slot-bos { color: var(--vurgu); }
.om-bg3-slot-bos-dugme:hover .om-bg3-slot-siluet { opacity: .9; }
.om-bg3-slot-bos-dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* --- ROL MATRİSİ: eksik VE fazla tek bakışta --- */
.om-bg3-matris { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.om-bg3-matris-satir {
  display: grid; grid-template-columns: 1fr auto 1.4em auto; gap: var(--b2);
  align-items: center; padding: 5px var(--b2); border-radius: 7px;
  border-left: 3px solid var(--cizgi); background: var(--yuzey);
}
.om-bg3-matris-satir.eksik  { border-left-color: var(--hata); }
.om-bg3-matris-satir.tamam  { border-left-color: var(--basari); }
.om-bg3-matris-satir.fazla  { border-left-color: var(--dikkat); }
.om-bg3-matris-satir.ekstra { border-left-color: var(--vurgu); }
.om-bg3-matris-satir.yok    { opacity: .62; }
.om-bg3-matris-ad { font-size: .86rem; font-weight: 600; }
.om-bg3-matris-serit { display: inline-flex; gap: 3px; }
.om-bg3-matris-nokta {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--cizgi-guclu); background: transparent;
}
.om-bg3-matris-nokta.dolu { background: currentColor; border-color: currentColor; }
.om-bg3-matris-satir.eksik  .om-bg3-matris-nokta.dolu { color: var(--hata); }
.om-bg3-matris-satir.tamam  .om-bg3-matris-nokta.dolu { color: var(--basari); }
.om-bg3-matris-satir.fazla  .om-bg3-matris-nokta.dolu { color: var(--dikkat); }
.om-bg3-matris-satir.ekstra .om-bg3-matris-nokta.dolu { color: var(--vurgu); }
.om-bg3-matris-sayi {
  font: 700 .82rem/1 "Space Grotesk", sans-serif; text-align: right; color: var(--metin-2);
}
.om-bg3-matris-etiket { font-size: .74rem; color: var(--metin-2); white-space: nowrap; }
.om-bg3-matris-im { font-weight: 700; }
.om-bg3-matris-satir.eksik .om-bg3-matris-im { color: var(--hata); }
.om-bg3-matris-satir.tamam .om-bg3-matris-im { color: var(--basari); }
.om-bg3-matris-satir.fazla .om-bg3-matris-im { color: var(--dikkat); }
.om-bg3-matris-ozet {
  margin: var(--b3) 0 0; padding: var(--b2) var(--b3); border-radius: var(--r1);
  font-size: .86rem; color: var(--metin-2);
  background: var(--yuzey-2); border-left: 3px solid var(--cizgi-guclu);
}
.om-bg3-matris-ozet.iyi { border-left-color: var(--basari); color: var(--metin); }

/* Parti dolu ama rol açıkta: ne takas edileceğini söyleyen kutu. */
.om-bg3-takas {
  display: flex; flex-direction: column; gap: var(--b2); align-items: flex-start;
  padding: var(--b3) var(--b4); border-radius: var(--r2);
  border: 1px solid var(--dikkat); background: var(--dikkat-zemin, var(--yuzey-2));
}
.om-bg3-takas p { margin: 0; font-size: .88rem; color: var(--metin-2); }

.om-bg3-parti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b5); margin-top: var(--b4); }
.om-bg3-parti-grid h3, .om-bg3-sinerji-bolum h3, .om-bg3-dortlu-bolum h3 { font-size: 1.02rem; margin: 0 0 var(--b3); }

/* --- kapsama karnesi (renk TEK BAŞINA anlam taşımaz: metin de var) --- */
.om-bg3-karne { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--b2); }
.om-bg3-karne-satir {
  display: flex; gap: var(--b3); align-items: flex-start;
  padding: var(--b3); border-radius: var(--r1); background: var(--yuzey); border: 1px solid var(--cizgi);
}
.om-bg3-karne-satir.tamam { border-left: 3px solid var(--basari); }
.om-bg3-karne-satir.eksik { border-left: 3px solid var(--hata); }
.om-bg3-karne-im { font-weight: 700; line-height: 1.4; }
.om-bg3-karne-satir.tamam .om-bg3-karne-im { color: var(--basari); }
.om-bg3-karne-satir.eksik .om-bg3-karne-im { color: var(--hata); }
.om-bg3-karne-durum { font-size: .78rem; color: var(--metin-3); margin-left: 6px; }
.om-bg3-karne-satir p { margin: 4px 0 0; font-size: .84rem; color: var(--metin-2); }
.om-bg3-ek-kapsama { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--b3); }
.om-bg3-cip-kapsama {
  font-size: .74rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--cizgi); color: var(--metin-3); background: var(--yuzey);
}
.om-bg3-cip-kapsama.dolu { border-color: var(--basari); color: var(--basari); }

/* --- öneriler --- */
.om-bg3-oneriler { display: flex; flex-direction: column; gap: var(--b2); }
.om-bg3-oneri {
  display: flex; gap: var(--b3); align-items: center;
  padding: var(--b3); border-radius: var(--r1); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--sinif-renk, var(--vurgu));
}
.om-bg3-oneri > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.om-bg3-oneri strong { font-size: .93rem; }
.om-bg3-oneri span { font-size: .84rem; color: var(--metin-2); }
.om-bg3-parti-tamam {
  margin: 0; padding: var(--b3) var(--b4); border-radius: var(--r1);
  border: 1px solid var(--basari); background: color-mix(in srgb, var(--basari) 10%, var(--yuzey));
  color: var(--basari); font-weight: 600;
}

/* --- sinerjiler --- */
.om-bg3-sinerji-bolum { margin-top: var(--b5); }
.om-bg3-sinerjiler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--b2); }
.om-bg3-sinerjiler li {
  padding: var(--b3) var(--b4); border-radius: var(--r1); font-size: .88rem;
  background: var(--yuzey); border-left: 3px solid var(--vurgu);
}
.om-bg3-sinerjiler span { color: var(--metin-2); }

/* --- hazır dörtlüler --- */
.om-bg3-dortlu-bolum { margin-top: var(--b5); }
.om-bg3-dortluler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--b3); }
.om-bg3-dortlu { padding: var(--b4); border-radius: var(--r2); border: 1px solid var(--cizgi); background: var(--yuzey); }
.om-bg3-dortlu h4 { margin: 0 0 var(--b2); font-size: .98rem; }
.om-bg3-dortlu p { margin: 0 0 var(--b3); font-size: .85rem; color: var(--metin-2); }
.om-bg3-dortlu-ikonlar { display: flex; gap: 6px; margin-bottom: var(--b3); }

/* --- filtreler + sınıf kartları --- */
.om-bg3-filtre { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--b3); }
.om-bg3-sinif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--b3); margin-top: var(--b4); }
.om-bg3-sinif-kart {
  display: flex; flex-direction: column; gap: var(--b3);
  padding: var(--b4); border-radius: var(--r2); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-top: 3px solid var(--sinif-renk, var(--vurgu));
}
.om-bg3-sinif-kart.secili {
  border-color: var(--sinif-renk, var(--vurgu));
  background: color-mix(in srgb, var(--sinif-renk, var(--vurgu)) 10%, var(--yuzey));
}
.om-bg3-sinif-ust { display: flex; gap: var(--b3); align-items: center; }
.om-bg3-sinif-ust h3 { margin: 0 0 4px; font-size: 1.02rem; }
.om-bg3-sinif-kart p { margin: 0; font-size: .87rem; color: var(--metin-2); flex: 1; }
.om-bg3-sinif-eylem { display: flex; gap: var(--b2); flex-wrap: wrap; }

@media (max-width: 720px) {
  .om-bg3-parti-grid { grid-template-columns: 1fr; }
  .om-bg3-slotlar { grid-template-columns: repeat(2, 1fr); }
}

/* Sınıf/hub özeti: <noscript> yerine <details> (bkz. sayfa içi yorum) */
.om-bg3-ozet {
  margin: var(--b5) 0 0; padding: var(--b3) var(--b4);
  border: 1px solid var(--cizgi); border-radius: var(--r2); background: var(--yuzey);
  font-size: .9rem;
}
.om-bg3-ozet summary { cursor: pointer; font-weight: 600; color: var(--metin-2); }
.om-bg3-ozet h2 { font-size: 1rem; margin: var(--b3) 0 var(--b2); }
.om-bg3-ozet ul { margin: 0 0 var(--b2); padding-left: 1.1rem; }
.om-bg3-ozet li { margin-bottom: 4px; color: var(--metin-2); }

/* C3: "ek kapsama" çiplerinde durum artık renk TEK BAŞINA değil —
   görsel-gizli bir "var/eksik" metni de taşıyorlar. */
.om-bg3-cip-kapsama .om-bg3-gizli-durum {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* O1: parti doluyken kalan kartların ekleme düğmesi sessizce no-op
   oluyordu; artık görsel + programatik olarak devre dışı görünüyor. */
.om-bg3-sinif-eylem .om-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }