/* KOMUT ROTASI - ROTA-COMPONENTS.CSS v1.0 */

/* İÇERİĞE ATLA (B-20) — rota-ui.js icerigeAtlaKur() gövdenin başına ekler.
   Ekran dışında bekler; klavye odağında header'ın üstünde görünür. */
.rota-icerige-atla {
  position: fixed;
  top: clamp(.5rem, 1.5vw, .9rem);
  left: clamp(.5rem, 1.5vw, .9rem);
  z-index: 2147483647;
  padding: clamp(.55rem, 1.2vw, .75rem) clamp(.9rem, 2vw, 1.2rem);
  border-radius: 10px;
  background: var(--primary);
  color: var(--bg1);
  font-weight: 700;
  font-size: clamp(.9rem, 1.4vw, 1rem);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.rota-icerige-atla:focus,
.rota-icerige-atla:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Koyu temada ana renk zemin üzerinde koyu metin 4,31:1 kalıyordu; zemin biraz açılır. */
[data-theme="siber"] .rota-icerige-atla {
  background: color-mix(in srgb, var(--primary) 78%, white);
}
main[tabindex="-1"]:focus {
  outline: none;
}

/* HEADER */
header {
  position: sticky; top: 0; z-index: 1000;
  height: clamp(64px, 6vw, 90px) !important;
  padding-block: 0 !important;
  padding-inline: clamp(1rem, 2vw, 2rem);
  display: flex; align-items: center;
}

/* Font Awesome Free karsiligi olmayan (Pro) ikonlar icin takma ad katmani.
   Kaynak HTML/JS degistirilmeden en yakin Free ikonuna eslenir.
   FA CSS bu dosyadan once yuklendigi icin bu kurallar gecerli olur. */
.fa-arrow-up-right:before { content: "\f061"; } /* fa-arrow-right — modul karti yon oku */
.fa-chart-scatter:before { content: "\e473"; } /* fa-chart-simple — dagilim grafigi */
.fa-chart-candlestick:before { content: "\e0e3"; } /* fa-chart-column — mum grafigi */
.fa-chart-radar:before { content: "\f200"; } /* fa-chart-pie — radar grafigi */
.fa-filter-circle-bolt:before { content: "\f0b0"; } /* fa-filter — filtre */
.fa-function:before { content: "\f121"; } /* fa-code — fonksiyon */
.fa-maze:before { content: "\f12e"; } /* fa-puzzle-piece — labirent */

header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb, 0,212,255), .4), rgba(var(--primary-rgb, 0,212,255), .15), transparent);
}

.header-inner, .h-in {
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Logo */
.header-logo-link {
  display: flex !important;
  align-items: center !important;
  gap: clamp(6px, .8vw, 12px) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  position: relative;
}
.header-logo-ikon {
  height: clamp(40px, 5vw, 68px) !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.22));
}
.header-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  gap: 4px;
}
.header-logo-ad {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(.95rem, 1.15vw, 1.38rem);
  letter-spacing: .02em;
  background: linear-gradient(90deg, #2c1654 0%, #6b21a8 20%, #c0392b 55%, #e05a8a 80%, #f4a0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 8px 24px rgba(0,0,0,.12);
  position: relative;
}
.header-logo-slogan {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(.58rem, .68vw, .78rem);
  letter-spacing: .01em;
  color: var(--logo-slogan-color, var(--text3));
  opacity: .96;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
  position: relative;
  padding-left: .7rem;
}

.header-logo-slogan::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: .48rem;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(var(--primary-rgb, 0,212,255), .9), rgba(var(--primary-rgb, 0,212,255), .18));
}

/* Geçici yayın kapısı: kapalı alanlar tıklanabilir açıklama verir. */
.rota-yayin-kapali{
  cursor: not-allowed !important;
  opacity: .72;
  filter: saturate(.62);
}

.rota-yayin-kapali:hover,
.rota-yayin-kapali:focus-visible{
  transform: none !important;
  box-shadow: none !important;
}

button.rota-yayin-kapali{
  font: inherit;
}

.mod-card.rota-yayin-kapali{
  border-color: var(--border2) !important;
}

.mod-card.rota-yayin-kapali .mod-arrow{
  opacity: .45;
}

html body header .header-logo-link {
  display: flex !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 16px) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

html body header .header-logo-ikon {
  height: clamp(40px, 5vw, 68px) !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

html body header .header-logo-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.02 !important;
  gap: clamp(3px, .32vw, 6px) !important;
}

html body header .header-logo-ad {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.18rem, 1.65vw, 2rem) !important;
  letter-spacing: .015em !important;
}

html body header .header-logo-slogan {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: clamp(.72rem, .9vw, 1.02rem) !important;
  letter-spacing: .01em !important;
  color: var(--logo-slogan-color, var(--text3)) !important;
  opacity: .96 !important;
}

.logo { display: flex; align-items: center; gap: clamp(8px,1vw,14px); text-decoration: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-sub { font-size: clamp(.48rem,.52vw,.62rem); color: var(--text3); font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }

/* NAV */
.header-nav, .hnav { display: flex; align-items: center; gap: .15rem; }
/* Mobil "geri dön" bağlantısı masaüstünde gizli, hamburger menüde (≤768px)
   görünür. Önceden rota-hub.css, alt-sayfa-responsive.css ve TD alt sayfa
   CSS'inde ayrı ayrı tanımlıydı; hiçbirini yüklemeyen BD hafta sayfasında
   masaüstü menüsünde de görünüyordu (25 Eylül 2026). */
.header-nav .mobile-return-link, .hnav .mobile-return-link { display: none; }
.header-nav a, .hnav a {
  color: var(--text2); text-decoration: none;
  padding: .38rem clamp(.45rem,.75vw,.95rem);
  border-radius: 8px;
  font-size: clamp(.72rem,.82vw,.92rem); font-weight: 600;
  transition: all .2s; white-space: nowrap;
}

@media (min-width: 901px) {
  header .header-inner,
  header .h-in {
    display: grid !important;
    grid-template-columns: minmax(210px, auto) minmax(0, 1fr) minmax(0, auto) !important;
    align-items: center !important;
    gap: clamp(10px, 1.5vw, 24px) !important;
  }

  header .header-logo-link,
  header .logo-link,
  header .logo {
    justify-self: start !important;
    margin-right: 0 !important;
  }

  header .header-nav,
  header .hnav {
    justify-self: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-inline: auto !important;
    min-width: 0 !important;
  }

  header .header-right,
  header .hright,
  header .header-actions {
    justify-self: end !important;
    margin-left: 0 !important;
    min-width: 0 !important;
  }

  /* C11 (10 Ekim 2026): menü ile sağ alan çakışması. Sağ sütun minmax(0,
     auto) olduğunda sağ alan içeriğinden dar kalıyor, arama kutusu/geri
     düğmesi sola, son menü bağlantılarının üstüne taşıyordu (48 sayfa,
     1000–1440px). Sağ alan artık içeriği kadar yer alır; menü kalan alanı
     kullanır, sığmazsa (safe center ile başa hizalanıp) yatay kayar. */
  header .header-inner,
  header .h-in {
    grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto !important;
  }

  header .header-right,
  header .hright,
  header .header-actions {
    min-width: max-content !important;
  }

  /* justify-self:center iken öğe içerik genişliğinde boyutlanır ve
     sütunu aşar; max-width onu sütuna sığdırır, fazlası içeride kayar. */
  header .header-nav,
  header .hnav {
    max-width: 100% !important;
    justify-content: safe center !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  header .header-nav::-webkit-scrollbar,
  header .hnav::-webkit-scrollbar {
    display: none;
  }

}

/* Açılır alt menülü menü (Teknik Destek) kaydırılmaz: kaydırma alt
   menüyü kırpar. Bu menü kısa (4 öğe) olduğundan sığması yeterlidir;
   yer, aşağıdaki sağ alan kurallarıyla açılır. 769px'ten itibaren. */
@media (min-width: 769px) {
  header .header-nav:has(.ts-header-nav-drop) {
    overflow: visible;
  }
}

/* C11 — açılır menülü header (Teknik Destek): menü kaydırılamadığı için
   sağ alanda yer açılır. Ölçüm (10 Ekim 2026): 1000px'te 260px, 1100px'te
   74px, 1199px'te 21px açık vardı. Arama kutusu 769–905px'teki genel
   kuralda olduğu gibi gizlenir; dar bantta menüdeki "Çözüm Merkezi"
   bağlantısının tekrarı olan geri düğmesi de gizlenir. */
@media (min-width: 906px) and (max-width: 1199px) {
  header:has(.ts-header-nav-drop) .header-right .header-search {
    display: none;
  }
}

@media (min-width: 906px) and (max-width: 1099px) {
  header:has(.ts-header-nav-drop) .header-right .back-btn {
    display: none;
  }
}

/* Header sag */
.header-right {
  display: flex;
  align-items: center;
  gap: clamp(.35rem,.65vw,.8rem);
  min-width: 0;
}

/* Arama */
.header-search {
  display: flex; align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .4rem .8rem; gap: .5rem;
  min-width: clamp(120px, 12vw, 180px);
  max-width: clamp(150px, 18vw, 240px);
  flex: 1 1 clamp(120px, 14vw, 200px);
  color: inherit;
  text-decoration: none;
}
.header-search input {
  background: transparent; border: none; outline: none;
  color: var(--text1);
  font-size: clamp(.75rem,.85vw,.95rem);
  font-family: 'Sora', sans-serif; width: 100%;
}
.header-search input::placeholder { color: var(--text3); }
.header-search i { color: var(--text3); font-size: clamp(.78rem,.88vw,.98rem); }
.header-search-placeholder {
  color: var(--text3);
  font-size: clamp(.75rem,.85vw,.95rem);
  text-decoration: none;
  pointer-events: none;
}

.search-bar {
  display: flex; align-items: center; gap: .5rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: .38rem clamp(.5rem,.75vw,.9rem);
  transition: border-color .2s, box-shadow .2s;
}
.search-bar:focus-within { border-color: rgba(var(--primary-rgb),.35); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.06); }
.search-bar i { color: var(--text3); font-size: clamp(.68rem,.78vw,.88rem); }
.search-bar input {
  background: none; border: none; outline: none;
  color: var(--text1); font-family: 'Sora', sans-serif;
  font-size: clamp(.72rem,.82vw,.92rem); width: clamp(90px,11vw,190px);
}
.search-bar input::placeholder { color: var(--text3); }

/* Butonlar */
.btn-ghost {
  display: flex; align-items: center; gap: .45rem;
  padding: clamp(.28rem,.38vw,.48rem) clamp(.55rem,.85vw,1rem);
  border-radius: 9px; border: 1px solid var(--border);
  background: transparent; color: var(--text2);
  font-family: 'Sora', sans-serif;
  font-size: clamp(.72rem,.82vw,.92rem); font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-ghost:hover { border-color: rgba(var(--primary-rgb),.35); color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1)); }

.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .4rem .9rem; border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text2);
  font-size: clamp(.72rem,.8vw,.88rem); font-weight: 600;
  white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: all .2s;
}

/* ═══════════════════════════════════════════════════
   GİRİŞ YAP BUTONU — .bh-giris-btn  (desktop)
   Ateş / Crimson — tema renk değişkeninden bağımsız
   ═══════════════════════════════════════════════════ */
.rota-giris-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px 8px 14px;
  border-radius: 999px;
  /* Ateş kırmızısı — her temada sabit */
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 45%, #ff6b35 100%);
  border: 1.5px solid rgba(255, 107, 53, .55);
  color: #fff;
  font: 700 13px/1 'Sora', Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
  box-shadow:
    0 0 0 0 rgba(231,76,60,.0),
    0 4px 18px rgba(192,57,43,.38),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: box-shadow .28s ease, transform .2s ease, background .28s ease;
}

/* shimmer tarama efekti */
.rota-giris-btn::before{
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );
  transform: skewX(-15deg);
  transition: left .5s ease;
  pointer-events: none;
}

.rota-giris-btn:hover{
  background: linear-gradient(135deg, #a93226 0%, #c0392b 45%, #e05a1e 100%);
  box-shadow:
    0 0 0 4px rgba(231,76,60,.22),
    0 6px 28px rgba(192,57,43,.52),
    inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-2px);
  color: #fff;
}

.rota-giris-btn:hover::before{
  left: 115%;
}

.rota-giris-btn i{
  font-size: .88rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.5));
  color: #fff;
}

/* ═══════════════════════════════════════════════════
   MOBİL AUTH — Hamburger yanına sabitlenmiş pill + dropdown
   Hamburger: fixed top:12px right:12px  (42×42px)
   Auth pill:  fixed top:12px right:62px  (hamburger'ın solunda)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* —— Giriş Yap — ateş kırmızı floating buton (mobil) —— */
  .rota-giris-btn,
  #rota-header-auth > a{
    position: fixed !important;
    top: 12px !important;
    right: 62px !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
    /* Ateş kırmızısı — her temada okunur */
    background: linear-gradient(145deg, #c0392b, #e74c3c) !important;
    border: 2px solid rgba(255,107,53,.7) !important;
    box-shadow:
      0 0 0 3px rgba(231,76,60,.25),
      0 0 18px rgba(192,57,43,.55),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
    color: #fff !important;
    font-size: 0 !important;
    transform: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    animation: rotaGirisPulse 2.8s ease-in-out infinite !important;
  }

  /* shimmer efektini mobilde kapat */
  .rota-giris-btn::before,
  #rota-header-auth > a::before{
    display: none !important;
  }

  /* metin gizli, sadece ikon */
  .rota-giris-btn-metin{ display: none !important; }

  .rota-giris-btn i,
  #rota-header-auth > a > i{
    font-size: 1.05rem !important;
    color: #fff !important;
    filter: drop-shadow(0 0 6px rgba(255,120,80,.8)) !important;
  }
}

/* Mobil geri düğmesi (11 Ekim 2026): ≤768px'te Panelim (right:62px) ve
   hamburger (right:12px) sabit konumlanır ve sağdaki ~104px'i kaplar; akışta
   kalan .back-btn bu iki düğmenin altında kalıp tıklanamıyordu (65 sayfa).
   Geri düğmesi yalnız ok simgesine iner ve sabit düğmelerin soluna yer
   ayırır; metin DOM'da kaldığı için erişilebilir ad korunur. Logo
   bağlantısı zaten daralabildiği için başlık sıkışmaz. */
@media (max-width: 768px) {
  .header-right .back-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
    margin-right: 102px;
  }

  .header-right .back-btn i {
    font-size: .85rem;
  }
}

/* 400px ve altında logo + simge-geri düğmesi + iki sabit düğme tek satıra
   sığmıyordu; geri düğmesi olan sayfalarda slogan gizlenir, marka adı
   KOMUT ROTASI kalır ve 340px üstünde 1rem'e iner (340px altında zaten
   .72rem kuralı geçerlidir). */
@media (max-width: 400px) {
  html body header:has(.back-btn) .header-logo-slogan {
    display: none !important;
  }
}

@media (min-width: 340px) and (max-width: 400px) {
  html body header:has(.back-btn) .header-logo-ad {
    font-size: 1rem !important;
  }
}

/* Masaüstü menüsü sığmazsa (11 Ekim 2026): 769–1920px aralığında 34 sayfada
   menü bağlantıları sütuna sığmıyordu. rota-subpage.css bağlantılara
   min-width:0 verdiği için bağlantı kutuları metinden dar kalıp yazılar
   üst üste biniyor, hub ve genel sayfalarda ise son bağlantılar kırpılıyordu.
   Bağlantılar küçülmez (sığmayan kısım yatay kayar) ve sağ alan genişliğe
   göre kademeli daralır: 1799px altı arama kutusu daralır, 1439px altı geri
   düğmesi yalnız ok olur, 1279px altı Panelim yalnız ikon olur ve menü
   boşlukları kısılır, 1099px altı arama kutusu gizlenir. Arama kutusu için
   üç ayrı sınıf adı (.header-search, .search-bar, .sb-wrap) ve geri düğmesi
   için üç ayrı sınıf adı (.back-btn, .btn-ghost, .btn-bk) sayfa ailelerine
   göre kullanılıyor. 0'dan 768px'e kadar hamburger kuralları geçerlidir. */
@media (min-width: 769px) {
  header .header-nav a,
  header .hnav a {
    flex-shrink: 0;
  }
}

@media (min-width: 769px) and (max-width: 1799px) {
  header .header-search,
  header .search-bar,
  header .sb-wrap {
    min-width: 0;
    flex: 0 1 120px;
    max-width: 130px;
  }

  header .header-search input,
  header .search-bar input,
  header .sb-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1439px) {
  .header-right .back-btn,
  .header-right .btn-ghost,
  .header-right .btn-bk {
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
  }

  .header-right .back-btn i,
  .header-right .btn-ghost i,
  .header-right .btn-bk i {
    font-size: .85rem;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .rota-giris-btn-metin {
    display: none;
  }

  .rota-giris-btn {
    padding: 8px 12px;
    gap: 0;
  }

  .header-nav a,
  .hnav a {
    padding-inline: .4rem;
  }

  .header-nav,
  .hnav {
    gap: .05rem;
  }
}

@media (min-width: 769px) and (max-width: 1099px) {
  header .header-search,
  header .search-bar,
  header .sb-wrap {
    display: none;
  }
}

/* Ateş kırmızı pulse — tema bağımsız */
@keyframes rotaGirisPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(231,76,60,.25),
      0 0 18px rgba(192,57,43,.5);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(231,76,60,.12),
      0 0 30px rgba(231,76,60,.72);
  }
}

/* Hamburger menu */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text2); font-size: 1rem; cursor: pointer; transition: all .2s;
}
.menu-toggle:hover { color: var(--primary); border-color: rgba(var(--primary-rgb),.35); }

.subpage-menu-float {
  display: none !important;
}

@media (min-width: 769px) {
  .menu-toggle,
  .subpage-menu-float {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .header-nav,
  .hnav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-nav::-webkit-scrollbar,
  .hnav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .subpage-menu-float {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2147483000 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(17, 24, 39, .28) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
  }
}

.menu-bars {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  flex: 0 0 auto;
}

/* Header responsive */
@media (max-width: 768px) {
  header {
    padding-inline: .625rem;
  }

  .header-inner,
  .h-in {
    gap: .6rem;
    min-width: 0;
  }

  .header-logo-link {
    min-width: 0;
    flex-shrink: 1 !important;
  }

  .header-logo-ikon {
    height: clamp(34px, 9vw, 42px) !important;
  }

  .header-logo-text {
    min-width: 0;
  }

  .header-logo-ad {
    font-size: clamp(.78rem, 3.4vw, 1rem);
    white-space: nowrap;
  }

  .header-logo-slogan {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .52rem;
  }

  .header-right {
    margin-left: auto;
    flex-shrink: 0;
  }

  .header-nav, .hnav, .search-bar, .header-search,
  .hright .sb-wrap, .hright .btn-bk,
  .header-right .sb-wrap, .header-right .btn-bk,
  .btn-ghost:not(.back-btn), header .btn-primary { display: none; }
  .menu-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    transform: none;
    z-index: 2147483000;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(17, 24, 39, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    color: #111827;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
    backdrop-filter: blur(12px);
  }

  .subpage-menu-toggle .menu-bars {
    display: block !important;
  }

  .subpage-menu-float {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2147483000 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(17, 24, 39, .28) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
  }

  .subpage-menu-float .menu-bars {
    display: block !important;
  }

  .menu-toggle .menu-bars + i {
    display: none;
  }

  .menu-toggle .menu-bars {
    display: block !important;
  }

  .menu-toggle::before {
    content: none;
  }

  .header-nav, .hnav {
    display: none !important;
    position: fixed;
    top: var(--rota-menu-panel-top);
    left: var(--rota-menu-panel-gap);
    right: var(--rota-menu-panel-gap);
    z-index: 2147482999;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    max-height: calc(100dvh - var(--rota-menu-panel-top) - var(--rota-menu-panel-gap) - var(--rota-safe-bottom));
    overflow-y: auto;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg1) 94%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  .header-nav::-webkit-scrollbar,
  .hnav::-webkit-scrollbar {
    display: none;
  }

  .header-nav.open, .hnav.open { display: flex !important; }
  .header-nav .mobile-return-link, .hnav .mobile-return-link { display: flex; }

  .header-nav a,
  .hnav a {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding: .7rem .75rem;
    border-radius: 8px;
    white-space: normal;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* 340px altı dar telefonlarda (ör. iPhone SE, 320px) logo sloganı
   #bh-header-auth pilinin (position:fixed, right:62px, 42px) altına
   giriyordu; slogan daraltıldı, marka adı da 1px paya düşmesin diye
   küçültüldü. */
@media (max-width: 339px) {
  .header-logo-slogan {
    max-width: 120px;
  }

  html body header .header-logo-ad {
    font-size: .72rem !important;
  }
}

/* 769-905px (tablet dikey) aralığında header-right içindeki
   .header-search sabit min-width'i büzülmüyor; nav + arama + auth +
   tema FAB toplamı viewport'u aşınca FAB (position:relative flex öğesi)
   ekranın sağından taşıp görünmez/tıklanamaz oluyordu. Yalnız bu dar
   bantta arama kutusu ≤768px'teki gibi gizlenir; genel navigasyon
   etkilenmez. */
@media (min-width: 769px) and (max-width: 905px) {
  .header-search {
    display: none;
  }

  /* Arama gizlemesi tek başına yetmedi: .back-btn içeren sayfalarda
     (ör. yz/ogrenme-yolu, teknik-destek/araclar) 769px sınırında hâlâ
     birkaç px taşma vardı. Buton kaldırılmadı, yalnız daraltıldı. */
  .header-right .back-btn {
    padding-inline: .45rem;
    gap: 4px;
  }

  .header-right {
    gap: .3rem;
  }

  /* RK-M-03 tamamlama (17 Eylül 2026): yukarıdaki iki daraltma HUB
     sayfalarında (Robotik_Kodlama.html/Yapay_Zeka.html/
     Mobil_Programlama.html vb.) yeterli değildi — hub navigasyonu alt
     sayfalardan daha uzun etiketler taşıyor ("Bileşen Sözlüğü" gibi),
     bu da header-right'a bırakılan alanı daha da daraltıyor. Ölçüldü:
     769px genişlikte header-right yalnızca ~186px alıyordu, ama
     .back-btn + #bh-header-auth + tema FAB toplamı ~222px istiyordu —
     36px'lik fark FAB'ı viewport dışına itiyordu. Panelim düğmesinin
     metni bu dar bantta gizlenir (yalnız ikon kalır, `title` özniteliği
     erişilebilirliği korur); bu tek başına ~57px kazandırıp taşmayı
     kapatıyor. Buton TAMAMEN kaldırılmadı, yalnız #bh-header-auth
     etkilendi — .bh-giris-btn'nin kendisi başka hiçbir yerde farklı
     bağlamda kullanılmıyor (RK-K çapraz taraması ile doğrulandı). */
  .rota-giris-btn-metin{
    display: none;
  }

  .rota-giris-btn{
    padding: 8px 12px;
    gap: 0;
  }
}

@media (min-width: 769px) {
  .subpage-menu-float {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   FOOTER — BH Footer
   Logo + Sosyal + Terminal Status + Copyright
   ═══════════════════════════════════════════════════ */

.rota-footer{
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 1.35rem;
  margin-bottom: clamp(28px, 2.3vw, 38px);
  padding: 0;
  overflow: hidden;

  /* ── 1. Gradient üst çizgi ── */
  border-top: none;
  background: color-mix(in srgb, var(--bg2) 97%, var(--card));
  color: var(--text2);
}

/* Gradient border-top — 3px kalınlığında, tema renklerine uyumlu */
.rota-footer::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--primary-rgb), .3) 15%,
    var(--primary) 50%,
    rgba(var(--primary-rgb), .3) 85%,
    transparent 100%
  );
}

/* ── 2. Hafif radial glow arka plan deseni ── */
.rota-footer::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 80% at 50% 0%,
      rgba(var(--primary-rgb), .04) 0%,
      transparent 70%
    );
}

.rota-footer a{
  color: inherit;
  text-decoration: none;
}

/* ── Footer iç kapsayıcı — logo + ikonlar aynı satır ── */
.rota-footer-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  width: min(94vw, 1440px);
  margin-inline: auto;
  padding: clamp(1rem, 1.6vw, 1.5rem) 0 clamp(.6rem, .9vw, .8rem);
}

/* ── 3. Logo bloğu — hover glow ── */
.rota-footer-logo{
  display: inline-flex;
  align-items: center;
  gap: clamp(.55rem, .9vw, 1rem);
  transition: opacity .25s, filter .35s;
}

.rota-footer-logo:hover{
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), .4));
}

.rota-footer-logo img{
  width: clamp(80px, 6vw, 100px);
  height: clamp(80px, 6vw, 100px);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
  transition: transform .3s ease;
}

.rota-footer-logo:hover img{
  transform: scale(1.08);
}

.rota-footer-logo span{
  display: grid;
  gap: clamp(.08rem, .22vw, .24rem);
  min-width: 0;
}

.rota-footer-logo strong{
  display: block;
  font: 900 clamp(1.18rem, 1.65vw, 2rem)/1.02 'Montserrat', sans-serif;
  color: var(--primary);
  letter-spacing: .015em;
  text-transform: uppercase;
}

/* Footer marka adı 4,2–4,3:1 kalıyordu: koyu temada metin biraz açılır, açık temada biraz koyulur. */
[data-theme="siber"] .rota-footer-logo strong {
  color: color-mix(in srgb, var(--primary) 78%, white);
}

[data-theme="corporate"] .rota-footer-logo strong {
  color: color-mix(in srgb, var(--primary) 82%, var(--text1));
}

.rota-footer-logo small{
  display: block;
  color: var(--logo-slogan-color, var(--text3));
  font: 600 clamp(.72rem, .9vw, 1.02rem)/1.18 'Inter', sans-serif;
  font-style: italic;
  opacity: .9;
}

/* ── 6. Sosyal medya ikonları — büyük, renkli ── */
.rota-footer-social{
  display: flex;
  align-items: center;
  gap: clamp(.5rem, .7vw, .7rem);
}

.rota-footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 2.8vw, 42px);
  height: clamp(36px, 2.8vw, 42px);
  border-radius: 50%;
  border: 1.5px solid transparent;
  font-size: clamp(.92rem, 1.1vw, 1.18rem);
  transition: all .3s ease;
}

/* YouTube — kırmızı */
.rota-footer-social a[aria-label="YouTube"]{
  background: rgba(255, 0, 0, .08);
  border-color: rgba(255, 0, 0, .2);
  color: #ff0000;
}
.rota-footer-social a[aria-label="YouTube"]:hover{
  background: rgba(255, 0, 0, .18);
  border-color: rgba(255, 0, 0, .45);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 14px rgba(255, 0, 0, .2);
}

/* Instagram — gradient pembe-mor-turuncu */
.rota-footer-social a[aria-label="Instagram"]{
  background: linear-gradient(135deg, rgba(253, 29, 29, .08), rgba(131, 58, 180, .08), rgba(252, 176, 69, .08));
  border-color: rgba(225, 48, 108, .22);
  color: #e1306c;
}
.rota-footer-social a[aria-label="Instagram"]:hover{
  background: linear-gradient(135deg, rgba(253, 29, 29, .16), rgba(131, 58, 180, .16), rgba(252, 176, 69, .16));
  border-color: rgba(225, 48, 108, .5);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 14px rgba(225, 48, 108, .2);
}

/* GitHub — tema uyumlu */
.rota-footer-social a[aria-label="GitHub"]{
  background: rgba(var(--primary-rgb), .06);
  border-color: rgba(var(--primary-rgb), .18);
  color: var(--text1);
}
.rota-footer-social a[aria-label="GitHub"]:hover{
  background: rgba(var(--primary-rgb), .16);
  border-color: rgba(var(--primary-rgb), .4);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .18);
}

/* ── Alt copyright satırı ── */
.rota-footer-bottom{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: min(94vw, 1440px);
  margin-inline: auto;
  padding: .42rem 0 .5rem;
  border-top: 1px solid var(--border2);
  color: var(--text3);
  font: 600 .64rem/1.35 'JetBrains Mono', monospace;
}

.rota-footer-bottom span:first-child strong{
  color: var(--primary);
}

/* ── 5. Terminal durum satırı ── */
.rota-footer-terminal{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: rgba(var(--primary-rgb), .05);
  border: 1px solid rgba(var(--primary-rgb), .1);
  color: var(--text3);
  font: 500 .6rem/1.3 'JetBrains Mono', monospace;
  letter-spacing: .02em;
}

.rota-footer-terminal i{
  font-size: .58em;
  opacity: .5;
}

/* Kontrast (10 Ekim 2026, kullanıcı onayı): renk tema yazı rengiyle
   karıştırılır, nabız en düşük .7 saydamlığa iner — .4'te işaret okunmuyordu. */
.rota-footer-online{
  color: color-mix(in srgb, #22c55e 58%, var(--text1));
  font-weight: 700;
  animation: rota-footer-pulse 2.5s ease-in-out infinite;
}

@keyframes rota-footer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* ── Footer badge ── */
.rota-footer-badge{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 20px;
  padding: .2rem .52rem;
  border: 1px solid rgba(var(--primary-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--primary-rgb), .06);
  color: color-mix(in srgb, var(--primary) 85%, var(--text1));
  white-space: nowrap;
  font: 600 .62rem/1.2 'JetBrains Mono', monospace;
}

.rota-footer-badge i{
  color: color-mix(in srgb, var(--primary) 85%, var(--text1));
  font-size: .68em;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .rota-footer-inner{
    flex-direction: column;
    gap: .65rem;
  }

  .rota-footer-bottom{
    flex-direction: column;
    gap: .3rem;
  }

  .rota-footer-logo img{
    width: 64px;
    height: 64px;
  }

  .rota-footer-social a{
    width: 34px;
    height: 34px;
    font-size: .88rem;
  }
}

/* TERMINAL */
.hero-terminal {
  width: clamp(400px, 46vw, 680px);
  flex-shrink: 0;
  background: #12151f;
  border: 1px solid var(--border);
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(var(--primary-rgb), .1), 0 40px 80px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
}
.terminal-bar, .t-bar {
  background: #1e2232;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: clamp(.5rem,.8vw,.8rem) clamp(.8rem,1.2vw,1.2rem);
  display: flex; align-items: center; gap: .75rem;
  flex-shrink: 0;
}
.terminal-dots { display: flex; align-items: center; gap: 6px; }
.terminal-dot { width: clamp(12px,1.2vw,14px); height: clamp(12px,1.2vw,14px); border-radius: 50%; flex-shrink: 0; }
.td-r { background: #ff5f57; }
.td-y { background: #febc2e; }
.td-g { background: #28c840; }
.terminal-title, .t-title {
  color: #8b9bb4;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(.65rem,.75vw,.85rem);
  flex: 1; text-align: center;
  margin-left: auto;
}
.terminal-body, #termBody, #heroTerminal {
  flex: 1;
  background: #12151f;
  color: #cdd5e0;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(.64rem, .74vw, .84rem) !important;
  line-height: 1.65 !important;
  padding: clamp(.75rem,1vw,1.2rem) clamp(.8rem,1.2vw,1.5rem);
  min-height: clamp(200px, 18vw, 300px);
  overflow-y: auto;
  overflow-x: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.terminal-body *, #termBody *, #heroTerminal * { background: transparent !important; }
.terminal-body .tl, #heroTerminal .tl {
  display: block !important;
  margin-bottom: 4px;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.tl {
  display: block !important;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.tl.show { opacity: 1; transform: translateY(0); }
.tl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .75rem;
  width: 100%;
  max-width: 100%;
}
.tl-row-main { min-width: 0; }
.tl-row-status { margin-left: auto; text-align: right; white-space: nowrap; }
.tl-cmd  { color: #e2e8f0; }
.tl-ok   { color: #10b981; }
.tl-warn { color: #f59e0b; }
.tl-muted{ color: #8b9bb4; }
.tl-info { color: #67e8f9; }
.tl-lock { color: #fb923c; }
.tl-p    { color: color-mix(in srgb, var(--primary) 70%, var(--text1)); font-weight: 700; }
.tl-cursor {
  display: inline-block;
  width: 10px; height: 1.2em;
  vertical-align: text-bottom;
  border-radius: 2px;
  animation: termBlink .9s step-end infinite;
}

[data-theme="corporate"] .hero-terminal { background: #12151f; box-shadow: 0 8px 40px rgba(0,0,0,.4); }

[data-theme="corporate"] .terminal-bar { background: #1e2232; }

[data-theme="corporate"] .terminal-body,
[data-theme="corporate"] #termBody,
[data-theme="corporate"] #heroTerminal { background: #12151f; color: #cdd5e0; }

/* TICKER */
.ticker-wrap {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  height: clamp(36px, 3vw, 48px) !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  background: linear-gradient(90deg, var(--ticker-bg-start, var(--bg1)), var(--ticker-bg-end, var(--bg2))) !important;
  border-top: 1px solid var(--ticker-border, var(--border)) !important;
  isolation: isolate !important;
}
.ticker-label {
  display: flex !important;
  align-items: center !important;
  padding: 0 clamp(.85rem, 1.5vw, 1.4rem) !important;
  color: var(--ticker-label-text, #fff) !important;
  background: var(--ticker-label-bg, var(--primary)) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: clamp(.72rem, .82vw, .9rem) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  min-width: max-content !important;
}
.ticker-label::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 100%;
  width: 34px;
  background: linear-gradient(to right, var(--ticker-label-fade-start, var(--primary)), var(--ticker-label-fade, transparent));
  pointer-events: none;
}
.ticker-track {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  padding-left: 2.2rem !important;
  animation: tickerMarquee 42s linear infinite !important;
  will-change: transform !important;
  position: relative !important;
  z-index: 1 !important;
}
.ticker-track:hover { animation-play-state: paused !important; }
.ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  color: var(--ticker-text, var(--text2)) !important;
  text-decoration: none !important;
  font-size: clamp(.72rem, .82vw, .9rem) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.ticker-item::after { content: none !important; }
.ticker-sep {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--ticker-sep, var(--text3)) !important;
  padding-inline: clamp(.75rem, 1.25vw, 1.35rem) !important;
  flex: 0 0 auto !important;
}
.ticker-all {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 clamp(.8rem, 1.2vw, 1.25rem) !important;
  color: var(--ticker-label-text, #fff) !important;
  /* --ticker-label-bg iki temada da bir degrade; color-mix degradeyle geçersiz
     olduğu için zemin boş kalıyor, koyu temanın krem ticker'ında açık yazı
     kayboluyordu (1.15). Düz renk olan --ticker-label-fade-start kullanılır
     (25 Eylül 2026). */
  background: color-mix(in srgb, var(--ticker-label-fade-start, var(--primary)) 70%, transparent) !important;
  text-decoration: none !important;
  font-size: clamp(.68rem, .78vw, .84rem) !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}
.tbadge {
  display: inline-flex !important;
  align-items: center !important;
  padding: .1rem .42rem !important;
  border-radius: 3px !important;
  font-size: clamp(.54rem, .6vw, .68rem) !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.tb-yeni   { background: rgba(16,185,129,.15);  color: #10b981; }
.tb-arac   { background: rgba(245,158,11,.15);  color: #fbbf24; }
.tb-ders   { background: rgba(99,102,241,.15);  color: #818cf8; }
.tb-duyuru { background: rgba(0,212,255,.15);   color: #00d4ff; }
@keyframes tickerMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

[data-theme=""],
[data-theme="siber"] {
  --ticker-bg-start: #f6ead7;
  --ticker-bg-end: #efe1cc;
  --ticker-border: rgba(120, 78, 33, .22);
  --ticker-label-bg: #f4e4cf;
  --ticker-label-text: #6f3d14;
  --ticker-label-fade-start: #f4e4cf;
  --ticker-label-fade: rgba(244, 228, 207, 0);
  --ticker-text: #5f5348;
  --ticker-sep: #9c8a75;
}
[data-theme=""], [data-theme="siber"] {
  /* Açık uçlarda (özellikle cyan) beyaz yazı 1.71 kalıyordu; iki uç da
     %50 siyahla karışır (en kötü durum ≥6.0). */
  --ticker-label-bg: linear-gradient(135deg, color-mix(in srgb, #00d4ff 50%, black), color-mix(in srgb, #7c3aed 50%, black));
  --ticker-label-text: #f8fbff;
  --ticker-label-fade-start: color-mix(in srgb, #7c3aed 50%, black);
  --ticker-label-fade: rgba(124, 58, 237, 0);
}

[data-theme="corporate"] {
  --ticker-bg-start: #0d111e;
  --ticker-bg-end: #111827;
  --ticker-border: rgba(0,212,255,.2);
  --ticker-label-bg: #161d31;
  --ticker-label-text: #f6ead7;
  --ticker-label-fade-start: #161d31;
  --ticker-label-fade: rgba(22, 29, 49, 0);
  --ticker-text: #94a3b8;
  --ticker-sep: #64748b;
}
[data-theme="corporate"] {
  --ticker-label-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
  --ticker-label-text: #eff6ff;
  --ticker-label-fade-start: #1d4ed8;
  --ticker-label-fade: rgba(29, 78, 216, 0);
}

/* ── BH TOAST SİSTEMİ v2.0 ────────────────────────────────────────────── */

/* Toast konteyner: sağ alt çetveye sabitlendi, stack için flex */
#rota-toast-konteyner{
  position: fixed;
  bottom: clamp(3.5rem, 5.5vw, 5.5rem); /* ticker'ın üstünde */
  right: clamp(1rem, 2vw, 1.75rem);
  z-index: 2147483000; /* maksimum — her stacking context'in üstünde */
  display: flex;
  flex-direction: column-reverse;
  gap: .55rem;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 2rem));
  width: 100%;
  isolation: isolate;
}

/* Her bir toast kartı */
.rota-toast{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .82rem 1rem .82rem .95rem;
  border-radius: 12px;
  border: 1px solid transparent;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 4px 24px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.06) inset;
  pointer-events: all;
  cursor: default;
  font-family: 'Sora', sans-serif;
  font-size: clamp(.78rem, .88vw, .9rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text1);
  background: color-mix(in srgb, var(--card2, #1a1f2e) 88%, transparent);
  border-color: var(--border, rgba(255,255,255,.08));
  /* Başlangıç durumu: gizli, sağda */
  opacity: 0;
  transform: translateX(calc(100% + 1.75rem));
  transition: opacity .32s cubic-bezier(.4,0,.2,1),
              transform .32s cubic-bezier(.4,0,.2,1);
}

/* Giriş: aktif durumu */
.rota-toast.rota-toast--girdi{
  opacity: 1;
  transform: translateX(0);
}

/* Çıkış: sağa kayar */
.rota-toast.rota-toast--cikiyor{
  opacity: 0;
  transform: translateX(calc(100% + 1.75rem));
  transition: opacity .36s ease, transform .36s cubic-bezier(.55,.06,.68,.19);
}

/* Tip: Başarı (çiçek yeşili) */
.rota-toast--basari{
  border-color: rgba(34,197,94,.28);
  background: color-mix(in srgb, #052e16 80%, transparent);
  box-shadow: 0 4px 24px rgba(34,197,94,.12), 0 1px 0 rgba(255,255,255,.04) inset;
}

[data-theme="corporate"] .rota-toast--basari{
  background: color-mix(in srgb, #dcfce7 92%, transparent);
  color: #14532d;
}
.rota-toast--basari .rota-toast__ikon{ color: #22c55e; }
.rota-toast--basari .rota-toast__prog-ic{ background: #22c55e; }
.rota-toast--basari::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.5px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-radius: 12px 0 0 12px;
}

/* Tip: Hata (kırmızı) */
.rota-toast--hata{
  border-color: rgba(239,68,68,.28);
  background: color-mix(in srgb, #2d0a0a 80%, transparent);
  box-shadow: 0 4px 24px rgba(239,68,68,.14), 0 1px 0 rgba(255,255,255,.04) inset;
}

[data-theme="corporate"] .rota-toast--hata{
  background: color-mix(in srgb, #fef2f2 92%, transparent);
  color: #7f1d1d;
}
.rota-toast--hata .rota-toast__ikon{ color: #ef4444; }
.rota-toast--hata .rota-toast__prog-ic{ background: #ef4444; }
.rota-toast--hata::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.5px;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  border-radius: 12px 0 0 12px;
}

/* Tip: Uyarı (sarı) */
.rota-toast--uyari{
  border-color: rgba(245,158,11,.28);
  background: color-mix(in srgb, #1c1200 80%, transparent);
  box-shadow: 0 4px 24px rgba(245,158,11,.12), 0 1px 0 rgba(255,255,255,.04) inset;
}

[data-theme="corporate"] .rota-toast--uyari{
  background: color-mix(in srgb, #fffbeb 92%, transparent);
  color: #78350f;
}
.rota-toast--uyari .rota-toast__ikon{ color: #f59e0b; }
.rota-toast--uyari .rota-toast__prog-ic{ background: #f59e0b; }
.rota-toast--uyari::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.5px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  border-radius: 12px 0 0 12px;
}

/* Tip: Bilgi (tema primary'si) */
.rota-toast--bilgi{
  border-color: rgba(var(--primary-rgb, 0,212,255), .26);
  background: color-mix(in srgb, var(--bg2, #111827) 84%, transparent);
  box-shadow: 0 4px 24px rgba(var(--primary-rgb, 0,212,255), .1), 0 1px 0 rgba(255,255,255,.04) inset;
}

[data-theme="corporate"] .rota-toast--bilgi{
  background: color-mix(in srgb, #eff6ff 92%, transparent);
  color: #1e3a5f;
}
.rota-toast--bilgi .rota-toast__ikon{ color: var(--primary); }
.rota-toast--bilgi .rota-toast__prog-ic{ background: var(--primary); }
.rota-toast--bilgi::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.5px;
  background: linear-gradient(180deg, var(--primary), var(--secondary, var(--primary)));
  border-radius: 12px 0 0 12px;
}

/* İkon */
.rota-toast__ikon{
  font-size: clamp(.9rem, 1.05vw, 1.1rem);
  flex-shrink: 0;
  margin-top: .08em;
}

/* Mesaj metni */
.rota-toast__mesaj{
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Kapatma butonu */
.rota-toast__kapat{
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3, #64748b);
  padding: 0 0 0 .35rem;
  font-size: .7rem;
  opacity: .55;
  transition: opacity .15s, transform .15s;
  line-height: 1;
  margin-top: .08em;
}
.rota-toast__kapat:hover{
  opacity: 1;
  transform: scale(1.15);
}

/* İlerleme çubuğu */
.rota-toast__prog{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: rgba(255,255,255,.08);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.rota-toast__prog-ic{
  height: 100%;
  width: 100%;
  border-radius: inherit;
  opacity: .75;
  transform-origin: left center;
  animation: rotaToastProg linear forwards;
}
@keyframes rotaToastProg {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Mobil: tam genişlik */
@media (max-width: 640px) {
  #rota-toast-konteyner{
    right: .75rem;
    left: .75rem;
    max-width: 100%;
    bottom: clamp(3rem, 5vh, 4rem);
  }
  .rota-toast{
    font-size: .82rem;
  }
}

/* Eski #toast elementi artık devre dışı — sakla (geriye uyumluluk için DOM'da tutulabilir) */
#toast { display: none !important; }

/* THEME FAB */
.theme-fab {
  position: fixed;
  bottom: clamp(1.2rem, 2vw, 2rem);
  right: clamp(1.2rem, 2vw, 2rem);
  z-index: 10002;
}
.theme-fab-btn {
  width: clamp(40px, 3vw, 52px);
  height: clamp(40px, 3vw, 52px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(.88rem, 1.05vw, 1.2rem);
  background: var(--primary, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: all .2s;
}
.theme-fab-btn:hover { transform: translateY(-2px) scale(1.04); }
.theme-tray, .tray {
  position: absolute;
  right: 0;
  bottom: calc(100% + .75rem);
  width: min(310px, calc(100vw - 2rem));
  padding: .8rem;
  border: 1.5px solid rgba(var(--primary-rgb), .32);
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, var(--bg1)), color-mix(in srgb, var(--card2) 92%, var(--bg2))),
    var(--card);
  box-shadow: 0 22px 58px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.theme-tray.open, .tray.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Tema seçici header içinde (standart header'ı olan tüm sayfalarda,
   bkz. rota-theme.js → fabEnjekteEt otomatik tespiti) */
.header-theme-fab.theme-fab {
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 5;
}
.header-theme-fab .theme-tray {
  bottom: auto;
  top: calc(100% + .75rem);
}
@media (max-width: 768px) {
  .header-theme-fab.theme-fab { display: none; }
}

/* Mobilde header ikonu gizlendiği için tema seçimi hamburger
   menüsüne (.header-nav) taşınır — rota-theme.js → navTemaSatiriEkle */
.header-nav-tema { display: none; }

/* Mobilde header araması gizlendiği için aynı arama hamburger menüsünün
   başına taşınır — rota-ui.js → initHeaderSearch (MU-07). Yazı 16 px:
   iOS Safari daha küçük girdide sayfayı yakınlaştırır. */
.header-nav-ara { display: none; }
@media (max-width: 768px) {
  .header-nav-ara {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
    padding: 0 .8rem;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
  }
  .header-nav-ara i { color: var(--text3); }
  .header-nav-ara input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text1);
    font: inherit;
    font-size: 16px;
    outline: none;
  }
  .header-nav-ara input::placeholder { color: var(--text3); }
  .header-nav-ara:focus-within { border-color: var(--primary); }
}
@media (max-width: 768px) {
  .header-nav-tema {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .35rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
  }
}
.tray-label {
  font: 900 .72rem/1 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--text2);
  opacity: 1;
  padding: .2rem .5rem .5rem;
}
.tray-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 54px;
  padding: .72rem .78rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  border: 1.5px solid transparent;
  background: color-mix(in srgb, var(--card) 48%, transparent);
  color: var(--text1);
  opacity: 1;
}
.tray-opt:hover {
  border-color: rgba(var(--primary-rgb), .3);
  background: color-mix(in srgb, var(--nav-hover, var(--bg3)) 72%, var(--card));
}
.tray-opt.act {
  border-color: rgba(var(--primary-rgb), .46);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  box-shadow: 0 10px 28px rgba(var(--primary-rgb), .12);
}
.tray-opt.act::after {
  content: "\f00c";
  margin-left: auto;
  color: var(--primary);
  font: 900 .78rem/1 "Font Awesome 6 Free";
}
.tray-swatches { display: flex; gap: 4px; flex-shrink: 0; }
.tray-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--text1) 16%, transparent);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

/* ═══════════════════════════════════════════════════
   TEMA TEPSİSİ RENK NOKTALARI — KANONİK PALET

   Neden burada: FAB ve tepsi 15 Eylül 2026 öncesinde rota-theme.js
   tarafından üretiliyordu ama renk noktalarının değerleri sayfa
   CSS'lerinde kalmıştı. Yalnız Mobil Programlama'da 12 dosyada 180
   kural ve ALTI FARKLI palet ölçüldü: aynı tema, sayfa değişince
   farklı renk gösteriyordu (ör. "siber" ilk noktası #ff4fa0 /
   #6366f1 / #00d4ff). Bir dosyada (mp-ogrenme-yolu.css) siber
   kuralları hiç yoktu ve noktalar boş daire olarak çıkıyordu.

   Değerler UYDURULMADI: her temanın bu dosyadaki (rota-theme.css)
   kendi --primary, --secondary ve --bg1 tanımlarından alındı.

   var() KULLANILAMAZ: nokta, o an etkin olan temanın değil,
   TEMSİL ETTİĞİ temanın rengini göstermek zorundadır; değişken
   etkin temaya çözülürdü. Bu yüzden sabit değer kuralın gereğidir.
   ═══════════════════════════════════════════════════ */
.tray-opt[data-theme="siber"] .tray-swatch:nth-child(1) { background: #00f5c4; }
.tray-opt[data-theme="siber"] .tray-swatch:nth-child(2) { background: #8b6fff; }
.tray-opt[data-theme="siber"] .tray-swatch:nth-child(3) { background: #0a0e1a; }

.tray-opt[data-theme="corporate"] .tray-swatch:nth-child(1) { background: #2563eb; }
.tray-opt[data-theme="corporate"] .tray-swatch:nth-child(2) { background: #16a34a; }
.tray-opt[data-theme="corporate"] .tray-swatch:nth-child(3) { background: #eef1f6; }
.tray-name {
  color: var(--text1);
  font: 900 .9rem/1.15 'Sora', sans-serif;
}
.tray-sub {
  margin-top: .2rem;
  color: var(--text2);
  font-size: .68rem;
  font-family: 'JetBrains Mono', monospace;
  opacity: 1;
}
.form-label {
  font-size: max(.75rem, 12px);
  font-weight: 700;
  color: var(--text2);
  margin-bottom: .4rem;
  display: block;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.form-input {
  width: 100%;
  padding: .65rem .9rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text1);
  font-family: 'Sora', sans-serif;
  font-size: max(.88rem, 12px);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus { border-color: rgba(var(--primary-rgb),.4); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.07); }
.form-input::placeholder { color: var(--text3); }

/* ═══════════════════════════════════════════════════════════════════════
   BH KİLİTLİ KURS BANNER TOAST
   Alt-orta, geniş, görsel açıdan zengin — kurs erişim engeli bildirimi
   ═══════════════════════════════════════════════════════════════════════ */

/* Banner: sabit, alt-orta */
.rota-kilitli-toast{
  position: fixed;
  bottom: clamp(3.8rem, 6vw, 5.8rem); /* ticker'ın üstünde */
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  z-index: 2147483001; /* toast konteynerinin üstünde */
  width: min(580px, calc(100vw - 2rem));
  border-radius: 20px;
  overflow: hidden;
  pointer-events: all;
  isolation: isolate;
  /* Gizli başlangıç */
  opacity: 0;
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    opacity   .35s ease;
}

/* Giriş */
.rota-kilitli-toast.rota-kilitli-toast--girdi{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Çıkış */
.rota-kilitli-toast.rota-kilitli-toast--cikiyor{
  opacity: 0;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  transition:
    transform .44s cubic-bezier(.55, .06, .68, .19),
    opacity   .38s ease;
}

/* Parlayan arka plan efekti */
.rota-klt__glow{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(var(--primary-rgb, 0,212,255), .18), transparent 65%),
    radial-gradient(ellipse 50% 80% at 85% 30%, rgba(249,115,22,.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Cam efektli ana kutu */
.rota-klt__ic{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1rem 1.3rem 1.15rem;
  background: color-mix(in srgb, var(--card2, #1a1f2e) 90%, transparent);
  border: 1px solid rgba(var(--primary-rgb, 0,212,255), .22);
  border-radius: 20px;
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    0 8px 40px rgba(0,0,0,.38),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 0 0 1px rgba(var(--primary-rgb, 0,212,255), .06);
}

/* İkon grubu */
.rota-klt__ikon-wrap{
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

/* Kurs emoji */
.rota-klt__kurs-ikon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(var(--primary-rgb, 0,212,255), .1);
  border: 1px solid rgba(var(--primary-rgb, 0,212,255), .18);
  font-size: 1.75rem;
  line-height: 1;
  animation: rota-klt-ikon-nefes 3s ease-in-out infinite;
}

@keyframes rota-klt-ikon-nefes {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Kilit rozeti — emoji'nin sağ alt köşesi */
.rota-klt__kilit{
  position: absolute;
  bottom: -5px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f97316, #dc2626);
  border: 2px solid var(--bg1, #0a0e1a);
  color: #fff;
  font-size: max(.65rem, 10px);
  box-shadow: 0 2px 8px rgba(249,115,22,.45);
  animation: rota-klt-kilit-titre .9s ease-in-out infinite alternate;
}

@keyframes rota-klt-kilit-titre {
  from { box-shadow: 0 2px 8px rgba(249,115,22,.45); }
  to   { box-shadow: 0 2px 18px rgba(249,115,22,.75); }
}

/* Metin alanı */
.rota-klt__metin{
  flex: 1;
  min-width: 0;
}

/* Rozet */
.rota-klt__rozet{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(220,38,38,.14));
  border: 1px solid rgba(249,115,22,.35);
  color: #f97316;
  font-family: 'JetBrains Mono', monospace;
  font-size: max(.6rem, 10px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .38rem;
}

.rota-klt__rozet i{
  font-size: .65em;
  animation: rota-klt-kum-saati 2.4s ease-in-out infinite;
}

@keyframes rota-klt-kum-saati {
  0%, 100% { transform: rotate(0deg); }
  45%       { transform: rotate(0deg); }
  50%       { transform: rotate(180deg); }
  95%       { transform: rotate(180deg); }
}

/* Kurs adı */
.rota-klt__baslik{
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  font-weight: 800;
  color: var(--text1);
  line-height: 1.25;
  margin-bottom: .22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Açıklama */
.rota-klt__aciklama{
  font-family: 'Sora', sans-serif;
  font-size: clamp(.72rem, .85vw, .8rem);
  font-weight: 400;
  color: var(--text3);
  line-height: 1.45;
}

/* Kapatma butonu */
.rota-klt__kapat{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: rgba(255,255,255,.04);
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(.75rem, 12px);
  transition: all .18s;
}
.rota-klt__kapat:hover{
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.3);
  color: #ef4444;
  transform: scale(1.1);
}

/* İlerleme çubuğu */
.rota-klt__prog{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

.rota-klt__prog-ic{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--primary, #00d4ff), #f97316);
  transform-origin: left center;
  animation: rotaKltProg linear forwards;
  border-radius: inherit;
  opacity: .8;
}

@keyframes rotaKltProg {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Açık tema uyumu ── */
[data-theme="corporate"] .rota-klt__ic{
  background: color-mix(in srgb, #fff 94%, transparent);
  border-color: rgba(var(--primary-rgb, 37,99,235), .22);
  box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.9) inset;
}

[data-theme="corporate"] .rota-klt__baslik{
  color: var(--text1);
}

[data-theme="corporate"] .rota-klt__aciklama{
  color: var(--text2);
}

[data-theme="corporate"] .rota-klt__kilit{
  border-color: rgba(255,255,255,.85);
}

/* ── Mobil ── */
@media (max-width: 640px) {
  .rota-kilitli-toast{
    width: calc(100vw - 1.5rem);
    bottom: clamp(3.2rem, 6vh, 4.5rem);
  }

  .rota-klt__ic{
    gap: .75rem;
    padding: .95rem .85rem 1.1rem .9rem;
  }

  .rota-klt__ikon-wrap,
  .rota-klt__kurs-ikon{
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .rota-klt__baslik{
    font-size: max(.88rem, 12px);
  }

  .rota-klt__aciklama{
    font-size: max(.7rem, 10px);
  }
}

/* SCROLL DOWN */
.scroll-down-btn {
  position: absolute;
  bottom: clamp(50px, 6vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  color: var(--text3, #64748b);
  transition: color .2s;
  z-index: 10;
}
.scroll-down-btn:hover { color: color-mix(in srgb, var(--accent, var(--primary, #00d4ff)) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.scroll-down-btn:hover .scroll-mouse { border-color: var(--accent, var(--primary, #00d4ff)); }
.scroll-chevrons { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.scroll-chevrons span {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: rota-chv 1.8s ease-in-out infinite;
}
.scroll-chevrons span:nth-child(1) { animation-delay: 0s; }
.scroll-chevrons span:nth-child(2) { animation-delay: .2s; }
@keyframes rota-chv {
  0%, 55%, 100% { opacity: .2; }
  25% { opacity: .9; }
}

/* ── Sosyal linkler: gercek adres yoksa gizle ── */
.rota-footer-social a[href="#"]{
  display: none !important;
}

/* ── Akilli Tahta (1920px+) ── */
@media (min-width: 1920px) {
  .header-inner,
  .h-in { width: 100%; max-width: none; margin-inline: 0; }
  .rota-footer-inner{ max-width: 1600px; margin-inline: auto; }
  .rota-footer-bottom{ max-width: 1600px; margin-inline: auto; }
}

/* Konu anlatımı: JSON ile seçilen etkileşimli bileşenler */
.tarih-seridi,
.karsilastirma-kartlari {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.25rem);
}

.tarih-seridi-ust,
.karsilastirma-ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
}

.tarih-seridi-ipucu,
.karsilastirma-ipucu {
  font-size: max(.72rem, 10px);
  color: var(--text3);
}

.tarih-seridi-kontroller,
.karsilastirma-kontroller {
  display: flex;
  gap: .45rem;
}

.tarih-seridi-ok,
.karsilastirma-kontroller button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .18s;
}

.tarih-seridi-ok:hover,
.karsilastirma-kontroller button:hover {
  border-color: var(--mod-color, var(--primary));
  color: var(--text1);
  transform: translateY(-1px);
}

.tarih-seridi-ray,
.karsilastirma-seciciler {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--mod-color, var(--primary)) transparent;
}

.tarih-seridi-ray {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, auto);
  align-items: start;
  gap: .35rem;
  padding: 0 .2rem .85rem;
}

.tarih-seridi-ray::before {
  content: "";
  position: absolute;
  left: .2rem;
  right: .2rem;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--mod-color, var(--primary)), var(--border2), var(--mod-color, var(--primary)));
  opacity: .45;
}

.tarih-seridi-durak {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 92px;
  padding: 0 .45rem;
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  scroll-snap-align: center;
}

.tarih-seridi-yil {
  font: 800 max(.66rem, 10px)/1 'JetBrains Mono', monospace;
  white-space: nowrap;
  transition: color .18s, transform .18s;
}

.tarih-seridi-nokta {
  width: 13px;
  height: 13px;
  border: 3px solid var(--bg2);
  border-radius: 50%;
  background: var(--border2);
  box-shadow: 0 0 0 1px var(--border);
  transition: background .18s, box-shadow .18s, transform .18s;
}

.tarih-seridi-durak:hover .tarih-seridi-yil,
.tarih-seridi-durak.aktif .tarih-seridi-yil {
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--rozet-yazi-orani, 100%), var(--text1));
  transform: translateY(-1px);
}

.tarih-seridi-durak.aktif .tarih-seridi-nokta {
  background: var(--mod-color, var(--primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod-color, var(--primary)) 20%, transparent);
  transform: scale(1.15);
}

.tarih-seridi-detay {
  min-height: clamp(150px, 18vw, 220px);
}

.tarih-seridi-kart {
  height: 100%;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 35%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mod-color, var(--primary)) 9%, var(--bg3)), var(--bg3));
  box-shadow: inset 3px 0 0 var(--mod-color, var(--primary));
}

.tarih-seridi-kart[hidden],
.karsilastirma-panel[hidden] {
  display: none;
}

.tarih-seridi-kart-baslik,
.karsilastirma-panel-baslik {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .8rem;
}

.tarih-seridi-kart-yil {
  flex: 0 0 auto;
  padding: .38rem .65rem;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, transparent);
  font: 800 max(.72rem, 10px)/1 'JetBrains Mono', monospace;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--rozet-yazi-orani, 100%), var(--text1));
}

.tarih-seridi-kart-sira,
.karsilastirma-panel-baslik small {
  font: 700 max(.62rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  color: var(--text3);
}

.tarih-seridi-kart-icerik {
  font-size: clamp(.82rem, 1.1vw, .95rem);
  line-height: 1.75;
  color: var(--text2);
}

.tarih-seridi-kart-icerik strong {
  color: var(--text1);
}

.karsilastirma-seciciler {
  display: flex;
  gap: .5rem;
  padding: .1rem .1rem .65rem;
}

.karsilastirma-secici {
  flex: 0 0 auto;
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg3);
  color: var(--text3);
  font-size: max(.7rem, 10px);
  font-weight: 700;
  cursor: pointer;
  scroll-snap-align: center;
}

.karsilastirma-secici.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, var(--bg3));
  color: var(--text1);
}

.karsilastirma-panel {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg3);
}

.karsilastirma-panel-baslik span {
  font-size: 1.35rem;
}

.karsilastirma-panel-baslik strong {
  flex: 1;
  font: 800 clamp(.9rem, 1.4vw, 1.1rem)/1.2 'Montserrat', sans-serif;
  color: var(--text1);
}

.karsilastirma-taraflar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.karsilastirma-taraf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: .3rem .65rem;
  min-width: 0;
  padding: clamp(.8rem, 1.5vw, 1.1rem);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg4);
}

.karsilastirma-taraf.insan {
  border-top: 3px solid var(--c4);
}

.karsilastirma-taraf.yapay-zeka {
  border-top: 3px solid var(--c6);
}

.karsilastirma-ikon {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.karsilastirma-taraf.insan .karsilastirma-ikon {
  color: color-mix(in srgb, var(--c4) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.karsilastirma-taraf.yapay-zeka .karsilastirma-ikon {
  color: color-mix(in srgb, var(--c6) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.karsilastirma-taraf strong {
  color: var(--text1);
}

.karsilastirma-taraf p {
  margin: 0;
  color: var(--text2);
  font-size: clamp(.75rem, 1vw, .86rem);
  line-height: 1.55;
}

.karsilastirma-sonuc {
  width: fit-content;
  margin: .9rem auto 0;
  padding: .45rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: max(.72rem, 10px);
  font-weight: 800;
}

.karsilastirma-sonuc.insan { color: color-mix(in srgb, var(--c4) var(--rozet-yazi-orani, 100%), var(--text1)); }
.karsilastirma-sonuc.yapay-zeka { color: color-mix(in srgb, var(--c6) var(--rozet-yazi-orani, 100%), var(--text1)); }
.karsilastirma-sonuc.berabere { color: color-mix(in srgb, var(--c2) var(--rozet-yazi-orani, 100%), var(--text1)); }

.ipucu-rotasi {
  display: grid;
  gap: 1rem;
}

.ipucu-rotasi-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--text3);
  font-size: max(.72rem, 10px);
}

.ipucu-rotasi-kontroller {
  display: flex;
  gap: .45rem;
}

.ipucu-rotasi-kontroller button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
}

.ipucu-rotasi-seciciler {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}

.ipucu-rotasi-secici {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .35rem;
  min-width: 0;
  min-height: 130px;
  padding: .85rem .65rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg4);
  color: var(--text2);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}

.ipucu-rotasi-secici:hover,
.ipucu-rotasi-secici.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 10%, var(--bg4));
  transform: translateY(-2px);
}

.ipucu-rotasi-no {
  position: absolute;
  top: .45rem;
  left: .5rem;
  font: 800 max(.54rem, 10px)/1 'JetBrains Mono', monospace;
  color: var(--text3);
}

.ipucu-rotasi-ikon {
  font-size: 1.45rem;
}

.ipucu-rotasi-secici strong {
  color: var(--text1);
  font-size: max(.72rem, 10px);
  line-height: 1.3;
}

.ipucu-rotasi-secici small {
  color: var(--text3);
  font-size: max(.62rem, 10px);
  line-height: 1.35;
}

.ipucu-rotasi-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 35%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mod-color, var(--primary)) 8%, var(--bg3)), var(--bg3));
  box-shadow: inset 3px 0 0 var(--mod-color, var(--primary));
}

.ipucu-rotasi-panel[hidden] {
  display: none;
}

.ipucu-rotasi-panel-ikon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, transparent);
  font-size: 1.55rem;
}

.ipucu-rotasi-adim {
  font: 800 max(.58rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--rozet-yazi-orani, 100%), var(--text1));
}

.ipucu-rotasi-panel h3 {
  margin: .35rem 0 .5rem;
  color: var(--text1);
  font: 800 clamp(.9rem, 1.5vw, 1.1rem)/1.25 'Montserrat', sans-serif;
}

.ipucu-rotasi-panel p {
  margin: 0;
  color: var(--text2);
  font-size: clamp(.78rem, 1.05vw, .9rem);
  line-height: 1.7;
}

.ozellik-panelleri {
  display: grid;
  gap: 1rem;
}

.ozellik-panelleri-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--text3);
  font-size: max(.72rem, 10px);
}

.ozellik-panel-kontroller {
  display: flex;
  gap: .45rem;
}

.ozellik-panel-kontroller button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
}

.ozellik-panel-seciciler {
  display: flex;
  gap: .5rem;
  padding: .1rem .1rem .65rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.ozellik-panel-secici {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg3);
  color: var(--text3);
  font-size: max(.7rem, 10px);
  font-weight: 700;
  cursor: pointer;
  scroll-snap-align: center;
}

.ozellik-panel-secici.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, var(--bg3));
  color: var(--text1);
}

.ozellik-panel {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 32%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mod-color, var(--primary)) 7%, var(--bg3)), var(--bg3));
}

.ozellik-panel[hidden] {
  display: none;
}

.ozellik-panel-baslik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}

.ozellik-panel-baslik > span {
  font-size: 1.5rem;
}

.ozellik-panel-baslik small {
  font: 800 max(.55rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--rozet-yazi-orani, 100%), var(--text1));
}

.ozellik-panel-baslik h3 {
  margin: .3rem 0 0;
  color: var(--text1);
  font: 800 clamp(.9rem, 1.5vw, 1.1rem)/1.2 'Montserrat', sans-serif;
}

.ozellik-panel-baslik em {
  font: 700 max(.6rem, 10px)/1 'JetBrains Mono', monospace;
  color: var(--text3);
  font-style: normal;
}

.ozellik-panel-alanlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .65rem;
}

.ozellik-panel-alan {
  display: grid;
  align-content: start;
  gap: .35rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg4);
}

.ozellik-panel-alan span {
  font: 800 max(.57rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
}

.ozellik-panel-alan strong {
  color: var(--text1);
  font-size: max(.78rem, 12px);
  line-height: 1.45;
}

.algoritma-akisi {
  display: grid;
  gap: 1rem;
}

.algoritma-semboller {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .65rem;
}

.algoritma-sembol {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg4);
}

.algoritma-sembol div {
  display: grid;
  gap: .25rem;
}

.algoritma-sembol strong {
  color: var(--text1);
  font-size: max(.75rem, 12px);
}

.algoritma-sembol small {
  color: var(--text3);
  font-size: max(.64rem, 10px);
  line-height: 1.4;
}

.algoritma-mini-sekil {
  width: 54px;
  height: 34px;
  display: block;
  border: 2px solid var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, var(--bg3));
}

.algoritma-ornek-seciciler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: .65rem;
}

.algoritma-ornek-secici {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
  color: var(--text2);
  text-align: left;
  cursor: pointer;
}

.algoritma-ornek-secici > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, transparent);
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-ornek-secici span {
  display: grid;
  gap: .2rem;
}

.algoritma-ornek-secici strong {
  color: var(--text1);
  font-size: max(.74rem, 10px);
}

.algoritma-ornek-secici small {
  color: var(--text3);
  font-size: max(.62rem, 10px);
}

.algoritma-ornek-secici:hover,
.algoritma-ornek-secici.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 9%, var(--bg3));
}

.algoritma-akis-panel {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 32%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mod-color, var(--primary)) 7%, var(--bg3)), var(--bg3));
}

.algoritma-akis-panel[hidden] {
  display: none;
}

.algoritma-akis-panel > header {
  position: static !important;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
  margin-bottom: 1rem;
  padding: clamp(.75rem, 1.6vw, 1rem) !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--text1) 14%, var(--bg3)) !important;
  box-sizing: border-box;
}

.algoritma-akis-panel > header::after {
  display: none;
}

.algoritma-akis-panel > header > div {
  min-width: 0;
}

.algoritma-akis-panel > header > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, transparent);
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-akis-panel header small {
  font: 800 max(.56rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-akis-panel header h3 {
  margin: .3rem 0 .35rem;
  color: var(--text1);
  font: 800 clamp(.9rem, 1.5vw, 1.08rem)/1.2 'Montserrat', sans-serif;
  overflow-wrap: anywhere;
}

.algoritma-akis-panel header p {
  margin: 0;
  color: var(--text3);
  font-size: max(.72rem, 10px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.algoritma-adimlari {
  display: grid;
  justify-items: center;
}

.algoritma-adimi {
  width: min(100%, 560px);
  display: grid;
  justify-items: center;
}

.algoritma-baglanti {
  position: relative;
  width: 28px;
  height: 34px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-baglanti::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 26px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 45%, var(--border));
}

.algoritma-baglanti i {
  position: relative;
  margin-top: 18px;
  padding: 2px;
  background: var(--bg3);
  font-size: max(.65rem, 10px);
}

.algoritma-sekil {
  width: min(100%, 390px);
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .28rem;
  padding: .8rem 1.3rem;
  border: 2px solid var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 9%, var(--bg4));
  text-align: center;
}

.algoritma-sekil small {
  font: 800 max(.53rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-sekil strong {
  color: var(--text1);
  font-size: clamp(.74rem, 1vw, .84rem);
  line-height: 1.4;
}

.algoritma-sekil-basla-bitir {
  border-radius: 999px;
}

.algoritma-sekil-islem {
  border-radius: 8px;
}

/* Paralelkenar ve eşkenar dörtgen: clip-path öğenin kendisine uygulanınca
   çerçeveyi de kırpıyordu (eğik kenarlar hiç çizilmiyordu). Şekil artık iki
   katmanla çizilir: ::before çerçeve rengini, ::after iç dolguyu taşır. */
.algoritma-sekil-girdi-cikti,
.algoritma-sekil-karar {
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
}

.algoritma-sekil-girdi-cikti::before,
.algoritma-sekil-girdi-cikti::after,
.algoritma-sekil-karar::before,
.algoritma-sekil-karar::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.algoritma-sekil-girdi-cikti::before,
.algoritma-sekil-karar::before {
  inset: 0;
  background: var(--mod-color, var(--primary));
}

.algoritma-sekil-girdi-cikti::after,
.algoritma-sekil-karar::after {
  inset: 2px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 9%, var(--bg4));
}

.algoritma-mini-sekil.algoritma-sekil-girdi-cikti::after,
.algoritma-mini-sekil.algoritma-sekil-karar::after {
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, var(--bg3));
}

.algoritma-sekil-girdi-cikti {
  padding-inline: 2.2rem;
}

.algoritma-sekil-girdi-cikti::before,
.algoritma-sekil-girdi-cikti::after {
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.algoritma-sekil-karar {
  width: min(78vw, 230px);
  min-height: 150px;
  padding: 2.5rem;
}

.algoritma-sekil-karar::before,
.algoritma-sekil-karar::after {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Döngü: tekrarlanan adımlar bir grupta toplanır; son adımdan çıkan ok sağ
   kenardan yukarı çıkıp grubun ilk adımına geri döner. */
.algoritma-dongu {
  --dongu-bosluk: clamp(30px, 8vw, 52px);
  position: relative;
  width: min(100%, 560px);
  display: grid;
  justify-items: center;
  padding-inline: var(--dongu-bosluk);
}

.algoritma-dongu .algoritma-adimi { width: 100%; }

.algoritma-dongu::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 50%;
  right: calc(var(--dongu-bosluk) / 2);
  border: 2px solid var(--mod-color, var(--primary));
  border-left: 0;
  border-radius: 0 14px 14px 0;
  pointer-events: none;
}

.algoritma-dongu::after {
  content: '';
  position: absolute;
  top: 12px;
  left: calc(50% + 3px);
  border-block: 5px solid transparent;
  border-right: 8px solid var(--mod-color, var(--primary));
  pointer-events: none;
}

.algoritma-dongu-kuyruk {
  width: 2px;
  height: 26px;
  background: var(--mod-color, var(--primary));
}

.algoritma-dongu-etiket {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: min(100%, 460px);
  margin-top: .75rem;
  padding: .45rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.7rem, 10px);
  line-height: 1.45;
  text-align: center;
}

.algoritma-dongu-etiket i { color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1)); }

.algoritma-mini-sekil.algoritma-sekil-karar {
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
}

.algoritma-karar-etiketleri {
  width: min(100%, 390px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .55rem;
}

.algoritma-karar-etiketleri span {
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.66rem, 10px);
  font-weight: 700;
  text-align: center;
}

.algoritma-karar-etiketleri span:first-child i {
  color: color-mix(in srgb, var(--c3) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-karar-etiketleri span:last-child i {
  color: color-mix(in srgb, var(--c1) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-deneyleri {
  display: grid;
  gap: 1rem;
}

.algoritma-deney-seciciler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: .65rem;
}

.algoritma-deney-secici {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .3rem;
  min-height: 110px;
  padding: .75rem .6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg4);
  color: var(--text2);
  text-align: center;
  cursor: pointer;
}

.algoritma-deney-secici:hover,
.algoritma-deney-secici.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 10%, var(--bg4));
  transform: translateY(-2px);
}

.algoritma-deney-secici > span {
  font-size: 1.35rem;
}

.algoritma-deney-secici strong {
  color: var(--text1);
  font-size: max(.72rem, 10px);
  line-height: 1.3;
}

.algoritma-deney-secici small {
  color: var(--text3);
  font-size: max(.6rem, 10px);
  line-height: 1.35;
}

.algoritma-deney-panel {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 32%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mod-color, var(--primary)) 7%, var(--bg3)), var(--bg3));
}

.algoritma-deney-panel[hidden],
.algoritma-dizi-durum[hidden] {
  display: none;
}

.algoritma-deney-panel > header {
  position: static !important;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
  margin-bottom: 1rem;
  padding: clamp(.75rem, 1.6vw, 1rem) !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--text1) 14%, var(--bg3)) !important;
  box-sizing: border-box;
}

.algoritma-deney-panel > header::after {
  display: none;
}

.algoritma-deney-panel > header > div {
  min-width: 0;
}

.algoritma-deney-panel > header > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, transparent);
  font-size: 1.4rem;
}

.algoritma-deney-panel header small {
  font: 800 max(.55rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-deney-panel header h3 {
  margin: .32rem 0 .35rem;
  color: var(--text1);
  font: 800 clamp(.9rem, 1.5vw, 1.08rem)/1.2 'Montserrat', sans-serif;
  overflow-wrap: anywhere;
}

.algoritma-deney-panel header p {
  margin: 0;
  color: var(--text3);
  font-size: max(.72rem, 10px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.algoritma-deney-adimlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: .65rem;
}

.algoritma-deney-adim {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .6rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg4);
}

.algoritma-deney-adim > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, transparent);
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  font: 800 max(.57rem, 10px)/1 'JetBrains Mono', monospace;
}

.algoritma-deney-adim div {
  display: grid;
  gap: .3rem;
}

.algoritma-deney-adim strong {
  color: var(--text1);
  font-size: max(.72rem, 10px);
  line-height: 1.4;
}

.algoritma-deney-adim small {
  color: var(--text3);
  font-size: max(.62rem, 10px);
  line-height: 1.4;
}

.algoritma-deney-karar {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.algoritma-deney-kosul {
  width: min(78vw, 250px);
  min-height: 155px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .35rem;
  padding: 2.5rem;
  border: 2px solid var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 10%, var(--bg4));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  text-align: center;
}

.algoritma-deney-kosul small {
  font: 800 max(.55rem, 10px)/1 'JetBrains Mono', monospace;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-deney-kosul strong {
  color: var(--text1);
  font-size: max(.76rem, 12px);
  line-height: 1.35;
}

.algoritma-deney-dallar {
  width: min(100%, 650px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.algoritma-deney-dallar > div {
  display: grid;
  gap: .45rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg4);
  text-align: center;
}

.algoritma-deney-dallar span {
  font: 800 max(.58rem, 10px)/1 'JetBrains Mono', monospace;
}

.algoritma-deney-dallar .evet span { color: color-mix(in srgb, var(--c3) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.algoritma-deney-dallar .hayir span { color: color-mix(in srgb, var(--c1) var(--kimlik-yazi-orani, 100%), var(--text1)); }

.algoritma-deney-dallar strong {
  color: var(--text1);
  font-size: max(.72rem, 10px);
  line-height: 1.4;
}

.algoritma-dizi-deneyi {
  display: grid;
  gap: .85rem;
}

.algoritma-dizi-sahne {
  min-height: 145px;
  display: grid;
  align-items: center;
  padding: clamp(.8rem, 2vw, 1.2rem);
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg4);
}

.algoritma-dizi-durum {
  display: grid;
  gap: .85rem;
}

.algoritma-dizi-kutular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.algoritma-dizi-kutular span {
  min-width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  padding-inline: .45rem;
  border: 1px solid var(--border2);
  border-radius: 9px;
  background: var(--bg3);
  color: var(--text2);
  font: 800 max(.72rem, 10px)/1 'JetBrains Mono', monospace;
}

.algoritma-dizi-kutular span.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 18%, var(--bg3));
  color: var(--text1);
  transform: translateY(-4px);
}

.algoritma-dizi-kutular span.isaretli {
  border-color: var(--c3);
  color: color-mix(in srgb, var(--c3) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.algoritma-dizi-durum p {
  margin: 0;
  color: var(--text2);
  font-size: max(.72rem, 10px);
  line-height: 1.5;
  text-align: center;
}

.algoritma-dizi-kontroller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.algoritma-dizi-kontroller button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg3);
  color: var(--text2);
  font-size: max(.66rem, 10px);
  font-weight: 700;
  cursor: pointer;
}

.algoritma-dizi-kontroller span {
  font: 800 max(.6rem, 10px)/1 'JetBrains Mono', monospace;
  color: var(--text3);
}

.algoritma-karmasiklik {
  display: grid;
  gap: .9rem;
}

.algoritma-karmasiklik-veri {
  width: fit-content;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.68rem, 10px);
  font-weight: 700;
}

.algoritma-karmasiklik-cubuklar {
  display: grid;
  gap: .65rem;
}

.algoritma-karmasiklik-satir {
  display: grid;
  grid-template-columns: 75px minmax(80px, 1fr) minmax(90px, auto);
  align-items: center;
  gap: .65rem;
}

.algoritma-karmasiklik-satir strong {
  color: var(--text1);
  font: 800 max(.68rem, 10px)/1 'JetBrains Mono', monospace;
}

.algoritma-karmasiklik-satir > div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg4);
}

.algoritma-karmasiklik-satir > div span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mod-color, var(--primary)), var(--secondary));
}

.algoritma-karmasiklik-satir em {
  color: var(--text3);
  font-size: max(.62rem, 10px);
  font-style: normal;
  text-align: right;
}

.gunluk-hikaye {
  display: grid;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 32%, var(--border));
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mod-color, var(--primary)) 8%, var(--bg3)), var(--bg3));
}

.gunluk-hikaye-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 0;
}

.gunluk-hikaye-baslik > div {
  display: grid;
  gap: .3rem;
}

.gunluk-hikaye-baslik small,
.gunluk-sahne-ust > div:last-child > small,
.gunluk-nesne-detay small,
.gunluk-karar-soru small {
  font: 800 max(.55rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.gunluk-hikaye-baslik strong {
  color: var(--text1);
  font: 800 clamp(1rem, 2vw, 1.3rem)/1.2 'Montserrat', sans-serif;
}

.gunluk-hikaye-baslik > span {
  flex: 0 0 auto;
  padding: .48rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.66rem, 10px);
}

.gunluk-hikaye-duraklar {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(115px, 1fr);
  gap: .45rem;
  padding: 0 1.1rem .15rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.gunluk-hikaye-duraklar::before {
  content: '';
  position: absolute;
  right: 1.1rem;
  bottom: 7px;
  left: 1.1rem;
  height: 2px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 25%, var(--border));
}

.gunluk-hikaye-durak {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .3rem;
  min-width: 110px;
  padding: .65rem .45rem .9rem;
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  scroll-snap-align: center;
}

.gunluk-hikaye-durak::after {
  content: '';
  position: absolute;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border: 3px solid var(--bg3);
  border-radius: 50%;
  background: var(--border2);
  box-shadow: 0 0 0 1px var(--border);
}

.gunluk-hikaye-durak span {
  font: 800 max(.62rem, 10px)/1 'JetBrains Mono', monospace;
}

.gunluk-hikaye-durak strong {
  font-size: max(.68rem, 10px);
  line-height: 1.25;
  text-align: center;
}

.gunluk-hikaye-durak.aktif {
  color: var(--text1);
}

.gunluk-hikaye-durak.aktif::after {
  background: var(--mod-color, var(--primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod-color, var(--primary)) 20%, transparent);
}

.gunluk-hikaye-sahne {
  margin: 0 1.1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg4);
}

.gunluk-hikaye-sahne[hidden],
.gunluk-nesne-detay[hidden] {
  display: none;
}

.gunluk-sahne-ust {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: linear-gradient(120deg, color-mix(in srgb, var(--mod-color, var(--primary)) 16%, var(--bg3)), var(--bg3));
}

.gunluk-sahne-zaman {
  width: 78px;
  min-height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .25rem;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 36%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, var(--bg4));
  text-align: center;
}

.gunluk-sahne-zaman span {
  color: var(--text1);
  font: 800 max(.85rem, 12px)/1 'JetBrains Mono', monospace;
}

.gunluk-sahne-zaman small {
  color: var(--text3);
  font-size: max(.55rem, 10px);
}

.gunluk-sahne-ust h3 {
  margin: .35rem 0 .4rem;
  color: var(--text1);
  font: 800 clamp(1rem, 2vw, 1.3rem)/1.2 'Montserrat', sans-serif;
}

.gunluk-sahne-ust p {
  margin: 0;
  color: var(--text2);
  font-size: clamp(.75rem, 1vw, .86rem);
  line-height: 1.6;
}

.gunluk-sahne-icerik {
  display: grid;
  gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.25rem);
}

.gunluk-nesneler {
  display: grid;
  gap: .65rem;
}

.gunluk-kesif-etiketi {
  color: var(--text3);
  font-size: max(.66rem, 10px);
}

.gunluk-nesne-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(125px, 100%), 1fr));
  gap: .55rem;
}

.gunluk-nesne {
  display: grid;
  justify-items: center;
  gap: .35rem;
  min-height: 85px;
  padding: .65rem .5rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
}

.gunluk-nesne span {
  font-size: 1.35rem;
}

.gunluk-nesne strong {
  font-size: max(.68rem, 10px);
  line-height: 1.25;
}

.gunluk-nesne:hover,
.gunluk-nesne.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, var(--bg3));
  color: var(--text1);
  transform: translateY(-2px);
}

.gunluk-nesne-detay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  padding: clamp(.85rem, 1.6vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 25%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--text1) 10%, var(--bg3));
}

.gunluk-nesne-detay > div:last-child {
  min-width: 0;
}

.gunluk-nesne-detay-ikon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 14%, transparent);
  font-size: 1.4rem;
}

.gunluk-nesne-detay h3 {
  margin: .3rem 0 .4rem;
  color: var(--text1);
  font: 800 max(.9rem, 12px)/1.2 'Montserrat', sans-serif;
}

.gunluk-nesne-detay p {
  margin: 0 0 .75rem;
  color: var(--text2);
  font-size: max(.72rem, 10px);
  line-height: 1.55;
}

.gunluk-nesne-veri,
.gunluk-nesne-sonuc {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: .6rem;
  padding: .55rem 0;
  border-top: 1px solid var(--border);
}

.gunluk-nesne-veri span,
.gunluk-nesne-sonuc span {
  color: var(--text3);
  font-size: max(.62rem, 10px);
}

.gunluk-nesne-veri strong,
.gunluk-nesne-sonuc strong {
  color: var(--text1);
  font-size: max(.68rem, 10px);
  line-height: 1.4;
}

.gunluk-karar {
  display: grid;
  gap: .75rem;
  padding: .85rem;
  border: 1px dashed color-mix(in srgb, var(--mod-color, var(--primary)) 45%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 6%, var(--bg3));
}

.gunluk-karar-soru {
  display: grid;
  gap: .35rem;
}

.gunluk-karar-soru strong {
  color: var(--text1);
  font-size: max(.78rem, 12px);
  line-height: 1.4;
}

.gunluk-karar-secenekler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.gunluk-karar-secenekler button {
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.68rem, 10px);
  font-weight: 700;
  cursor: pointer;
}

.gunluk-karar-secenekler button:hover,
.gunluk-karar-secenekler button.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, var(--bg4));
  color: var(--text1);
}

.gunluk-karar-sonuc {
  padding: .7rem .8rem;
  border-left: 3px solid var(--mod-color, var(--primary));
  border-radius: 8px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.7rem, 10px);
  line-height: 1.55;
}

.gunluk-hikaye-alt {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  padding: 0 1.1rem 1.1rem;
}

.gunluk-hikaye-alt button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.67rem, 10px);
  font-weight: 700;
  cursor: pointer;
}

.yetenek-arenasi {
  display: grid;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 34%, var(--border));
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mod-color, var(--primary)) 7%, var(--bg3)), var(--bg3));
}

.arena-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 0;
}

.arena-ust > div:first-child {
  display: grid;
  gap: .3rem;
}

.arena-ust small,
.arena-gorev small,
.arena-sonuc-etiket small,
.arena-final small {
  font: 800 max(.55rem, 10px)/1 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.arena-ust > div:first-child > strong {
  color: var(--text1);
  font: 800 clamp(.95rem, 2vw, 1.25rem)/1.25 'Montserrat', sans-serif;
}

.arena-skorlar {
  display: flex;
  gap: .4rem;
}

.arena-skorlar span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg4);
  font-size: max(.6rem, 10px);
  font-weight: 700;
}

.arena-skorlar .insan { color: color-mix(in srgb, var(--c4) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.arena-skorlar .yapay-zeka { color: color-mix(in srgb, var(--c6) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.arena-skorlar .birlikte { color: color-mix(in srgb, var(--c3) var(--kimlik-yazi-orani, 100%), var(--text1)); }

.arena-tur-duraklari {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(105px, 1fr);
  gap: .45rem;
  padding: 0 1.1rem .2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.arena-tur-duragi {
  display: grid;
  justify-items: center;
  gap: .3rem;
  min-width: 100px;
  padding: .65rem .45rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg4);
  color: var(--text3);
  cursor: pointer;
  scroll-snap-align: center;
}

.arena-tur-duragi span {
  font: 800 max(.55rem, 10px)/1 'JetBrains Mono', monospace;
}

.arena-tur-duragi strong {
  font-size: max(.65rem, 10px);
  line-height: 1.25;
  text-align: center;
}

.arena-tur-duragi.aktif {
  border-color: var(--mod-color, var(--primary));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 13%, var(--bg4));
  color: var(--text1);
}

.arena-tur-panel {
  display: grid;
  gap: 1rem;
  margin: 0 1.1rem;
  padding: clamp(.9rem, 2vw, 1.25rem);
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg4);
}

.arena-tur-panel[hidden],
.arena-tur-sonuc[hidden],
.arena-final[hidden] {
  display: none;
}

.arena-gorev {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
  padding: clamp(.8rem, 1.6vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 25%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--text1) 10%, var(--bg3));
}

.arena-gorev-ikon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 14%, transparent);
  font-size: 1.5rem;
}

.arena-gorev h3 {
  margin: .35rem 0 .4rem;
  color: var(--text1);
  font: 800 clamp(.9rem, 1.5vw, 1.1rem)/1.25 'Montserrat', sans-serif;
}

.arena-gorev p {
  margin: 0;
  color: var(--text2);
  font-size: max(.72rem, 10px);
  line-height: 1.55;
}

.arena-secim-baslik {
  color: var(--text3);
  font-size: max(.66rem, 10px);
}

.arena-secimler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.arena-secimler button {
  display: grid;
  justify-items: center;
  gap: .3rem;
  min-height: 120px;
  padding: .8rem .6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
  color: var(--text2);
  text-align: center;
  cursor: pointer;
}

.arena-secimler button > span {
  font-size: 1.65rem;
}

.arena-secimler button strong {
  color: var(--text1);
  font-size: max(.75rem, 12px);
}

.arena-secimler button small {
  color: var(--text3);
  font-size: max(.6rem, 10px);
  line-height: 1.35;
}

.arena-secimler button:hover,
.arena-secimler button.secildi {
  transform: translateY(-2px);
}

.arena-secimler button[data-arena-secim="insan"]:hover,
.arena-secimler button[data-arena-secim="insan"].secildi,
.arena-secimler button[data-arena-secim="insan"].dogru {
  border-color: var(--c4);
  background: color-mix(in srgb, var(--c4) 12%, var(--bg3));
}

.arena-secimler button[data-arena-secim="yapay-zeka"]:hover,
.arena-secimler button[data-arena-secim="yapay-zeka"].secildi,
.arena-secimler button[data-arena-secim="yapay-zeka"].dogru {
  border-color: var(--c6);
  background: color-mix(in srgb, var(--c6) 12%, var(--bg3));
}

.arena-secimler button[data-arena-secim="birlikte"]:hover,
.arena-secimler button[data-arena-secim="birlikte"].secildi,
.arena-secimler button[data-arena-secim="birlikte"].dogru {
  border-color: var(--c3);
  background: color-mix(in srgb, var(--c3) 12%, var(--bg3));
}

.arena-tur-sonuc {
  display: grid;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--primary)) 28%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 6%, var(--bg3));
}

.arena-sonuc-etiket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
}

.arena-sonuc-etiket > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--bg4);
  font-size: 1.25rem;
}

.arena-sonuc-etiket > div {
  display: grid;
  gap: .3rem;
}

.arena-sonuc-etiket strong {
  color: var(--text1);
  font-size: max(.78rem, 12px);
}

.arena-tur-sonuc > p {
  margin: 0;
  color: var(--text2);
  font-size: max(.72rem, 10px);
  line-height: 1.55;
}

.arena-taraf-notlari {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.arena-taraf-notlari > div {
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg4);
}

.arena-taraf-notlari span {
  color: var(--text1);
  font-size: max(.66rem, 10px);
  font-weight: 800;
}

.arena-taraf-notlari p {
  margin: .35rem 0 0;
  color: var(--text3);
  font-size: max(.64rem, 10px);
  line-height: 1.45;
}

.arena-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: 0 1.1rem;
}

.arena-alt button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .58rem .75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg4);
  color: var(--text2);
  font-size: max(.66rem, 10px);
  font-weight: 700;
  cursor: pointer;
}

.arena-alt > span {
  color: var(--text3);
  font: 800 max(.6rem, 10px)/1 'JetBrains Mono', monospace;
}

.arena-final {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  margin: 0 1.1rem 1.1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--c3) 45%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--c3) 10%, var(--bg3));
}

.arena-final > span {
  font-size: 1.8rem;
}

.arena-final h3 {
  margin: .35rem 0 .4rem;
  color: var(--text1);
  font: 800 max(.9rem, 12px)/1.25 'Montserrat', sans-serif;
}

.arena-final p {
  margin: 0;
  color: var(--text2);
  font-size: max(.7rem, 10px);
  line-height: 1.55;
}

@media (max-width: 767px) {
  .tarih-seridi-ust,
  .karsilastirma-ust {
    grid-template-columns: 1fr;
  }

  .tarih-seridi-kontroller,
  .karsilastirma-kontroller {
    display: none;
  }

  .tarih-seridi-ray {
    grid-auto-columns: 82px;
    margin-inline: -.15rem;
  }

  .tarih-seridi-durak {
    min-width: 82px;
    padding-inline: .25rem;
  }

  .tarih-seridi-detay {
    min-height: 0;
  }

  .tarih-seridi-kart,
  .karsilastirma-panel {
    padding: 1rem;
  }

  .karsilastirma-taraflar {
    gap: .55rem;
  }

  .karsilastirma-taraf {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: .75rem .55rem;
  }

  .karsilastirma-ikon {
    grid-row: auto;
  }

  .ipucu-rotasi-ust {
    display: block;
  }

  .ipucu-rotasi-kontroller {
    display: none;
  }

  .ipucu-rotasi-seciciler {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(150px, 46vw, 190px);
    grid-template-columns: none;
    gap: .65rem;
    padding: .1rem .1rem .7rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .ipucu-rotasi-secici {
    min-height: 125px;
    scroll-snap-align: start;
  }

  .ipucu-rotasi-panel {
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .ipucu-rotasi-panel-ikon {
    width: 44px;
    height: 44px;
  }

  .ozellik-panelleri-ust {
    display: block;
  }

  .ozellik-panel-kontroller {
    display: none;
  }

  .ozellik-panel {
    padding: .9rem;
  }

  .ozellik-panel-alanlar {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .ozellik-panel-alan {
    padding: .7rem;
  }

  .algoritma-semboller {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .algoritma-sembol {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .algoritma-ornek-seciciler {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(180px, 65vw, 230px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .algoritma-ornek-secici {
    scroll-snap-align: start;
  }

  .algoritma-akis-panel {
    padding: .9rem .7rem;
  }

  .algoritma-akis-panel > header {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .65rem;
    padding: .7rem !important;
  }

  .algoritma-akis-panel > header > span {
    width: 40px;
    height: 40px;
  }

  .algoritma-sekil {
    width: min(100%, 310px);
  }

  .algoritma-sekil-karar {
    width: 210px;
    min-height: 140px;
  }

  .algoritma-deney-seciciler {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(145px, 45vw, 180px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .algoritma-deney-secici {
    scroll-snap-align: start;
  }

  .algoritma-deney-panel {
    padding: .9rem .7rem;
  }

  .algoritma-deney-panel > header {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .65rem;
    padding: .7rem !important;
  }

  .algoritma-deney-panel > header > span {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  .algoritma-deney-adimlari {
    grid-template-columns: 1fr;
  }

  .algoritma-karmasiklik-satir {
    grid-template-columns: 62px minmax(55px, 1fr) 78px;
    gap: .45rem;
  }

  .gunluk-hikaye-baslik {
    align-items: flex-start;
    padding: .9rem .8rem 0;
  }

  .gunluk-hikaye-baslik > span {
    padding: .4rem .55rem;
    font-size: max(.58rem, 10px);
  }

  .gunluk-hikaye-duraklar {
    grid-auto-columns: 105px;
    padding-inline: .8rem;
  }

  .gunluk-hikaye-duraklar::before {
    right: .8rem;
    left: .8rem;
  }

  .gunluk-hikaye-sahne {
    margin-inline: .7rem;
  }

  .gunluk-sahne-ust {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: .7rem;
    padding: .85rem .7rem;
  }

  .gunluk-sahne-zaman {
    width: 58px;
    min-height: 58px;
  }

  .gunluk-sahne-icerik {
    padding: .75rem .65rem;
  }

  .gunluk-nesne-listesi {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(120px, 38vw, 150px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .gunluk-nesne {
    scroll-snap-align: start;
  }

  .gunluk-nesne-detay {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: .75rem .65rem;
  }

  .gunluk-nesne-detay-ikon {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  .gunluk-nesne-veri,
  .gunluk-nesne-sonuc {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .gunluk-karar-secenekler {
    grid-template-columns: 1fr;
  }

  .gunluk-hikaye-alt {
    padding: 0 .7rem .8rem;
  }

  .arena-ust {
    display: grid;
    padding: .9rem .8rem 0;
  }

  .arena-skorlar {
    overflow-x: auto;
  }

  .arena-tur-duraklari {
    grid-auto-columns: 98px;
    padding-inline: .8rem;
  }

  .arena-tur-panel {
    margin-inline: .7rem;
    padding: .75rem .65rem;
  }

  .arena-gorev {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: .75rem .65rem;
  }

  .arena-gorev-ikon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }

  .arena-secimler {
    grid-template-columns: 1fr;
  }

  .arena-secimler button {
    grid-template-columns: 42px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    min-height: 0;
    text-align: left;
  }

  .arena-secimler button > span {
    grid-row: span 2;
  }

  .arena-taraf-notlari {
    grid-template-columns: 1fr;
  }

  .arena-alt {
    padding-inline: .7rem;
  }

  .arena-final {
    margin: 0 .7rem .8rem;
  }
}

.tarih-rotasi-panel > header::after {
  display: none;
}

/* Yapay zeka tarihi dönem rotası */
.tarih-rotasi {
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: 22px;
  background: var(--card2);
}

.tarih-rotasi-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(15px, 2.2vw, 22px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(var(--primary-rgb), .16), transparent);
}

.tarih-rotasi-ust small,
.tarih-rotasi-ust strong {
  display: block;
}

.tarih-rotasi-ust small {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--secondary) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-size: max(.68rem, 10px);
  font-weight: 800;
  letter-spacing: .14em;
}

.tarih-rotasi-ust > span {
  flex: 0 0 auto;
  color: var(--text3);
  font-size: max(.8rem, 12px);
}

.tarih-rotasi-duraklar {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 12px;
  scrollbar-width: thin;
}

.tarih-rotasi-durak {
  min-width: 130px;
  padding: 11px 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text2);
  background: var(--bg3);
  cursor: pointer;
}

.tarih-rotasi-durak span,
.tarih-rotasi-durak small,
.tarih-rotasi-durak strong {
  display: block;
}

.tarih-rotasi-durak span {
  margin-bottom: 5px;
  font-size: 1.25rem;
}

.tarih-rotasi-durak small {
  color: var(--text3);
  font-size: max(.65rem, 10px);
}

.tarih-rotasi-durak strong {
  margin-top: 3px;
  font-size: max(.78rem, 12px);
}

.tarih-rotasi-durak.aktif {
  border-color: var(--primary);
  color: var(--text1);
  background: rgba(var(--primary-rgb), .13);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .08);
}

.tarih-rotasi-paneller {
  padding: clamp(14px, 2vw, 22px);
}

.tarih-rotasi-panel > header {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: auto;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tarih-rotasi-panel > header > div,
.tarih-rotasi-gorev > div,
.tarih-rotasi-olay > div {
  min-width: 0;
}

.tarih-rotasi-panel > header > span {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.tarih-rotasi-panel > header small {
  color: color-mix(in srgb, var(--secondary) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-weight: 800;
}

.tarih-rotasi-panel > header h3 {
  margin: 3px 0 5px;
}

.tarih-rotasi-panel > header p {
  margin: 0;
  color: var(--text2);
  line-height: 1.6;
}

.tarih-rotasi-gorev {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg3);
}

.tarih-rotasi-gorev > i {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.tarih-rotasi-gorev small,
.tarih-rotasi-gorev strong {
  display: block;
  overflow-wrap: anywhere;
}

.tarih-rotasi-gorev small {
  color: var(--text3);
  font-size: max(.64rem, 10px);
  letter-spacing: .1em;
}

.tarih-rotasi-olaylar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 10px;
}

.tarih-rotasi-olay {
  display: grid;
  grid-template-columns: minmax(58px, auto) 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

.tarih-rotasi-olay time {
  color: color-mix(in srgb, var(--primary) var(--rozet-yazi-orani, 100%), var(--text1));
  font-size: max(.76rem, 12px);
  font-weight: 800;
}

.tarih-rotasi-olay p {
  margin: 4px 0 0;
  color: var(--text3);
  font-size: max(.78rem, 12px);
  line-height: 1.45;
}

.tarih-rotasi-cikarim {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--text2);
  background: var(--bg4);
}

.tarih-rotasi-cikarim i {
  margin-top: 3px;
  color: color-mix(in srgb, var(--secondary) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.tarih-rotasi-cikarim p {
  margin: 0;
}

.tarih-rotasi-kontroller {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--border);
}

.tarih-rotasi-kontroller button {
  padding: 9px 13px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text2);
  background: var(--bg3);
  cursor: pointer;
}

/* Ayrıntılı konu anlatımı keşif rotası */
.konu-kesif {
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: 22px;
  background: var(--card2);
}

.konu-kesif-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(15px, 2vw, 22px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(125deg, rgba(var(--primary-rgb), .15), transparent);
}

.konu-kesif-ust small,
.konu-kesif-ust strong {
  display: block;
}

.konu-kesif-ust small {
  margin-bottom: 4px;
  /* Küçük büyük harf etiket → rozet oranı (koyu temada %65; 2.98'di). */
  color: color-mix(in srgb, var(--secondary) var(--rozet-yazi-orani, 100%), var(--text1));
  font-size: max(.67rem, 10px);
  font-weight: 800;
  letter-spacing: .13em;
}

.konu-kesif-ust > span {
  flex: 0 0 auto;
  color: var(--text3);
  font-size: max(.78rem, 12px);
}

.konu-kesif-duraklar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.konu-kesif-durak {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text2);
  text-align: left;
  background: var(--bg3);
  cursor: pointer;
}

.konu-kesif-durak > span {
  display: grid;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  background: rgba(var(--primary-rgb), .12);
}

.konu-kesif-durak small {
  color: var(--text3);
  font-size: max(.6rem, 10px);
}

.konu-kesif-durak strong {
  overflow: hidden;
  font-size: max(.74rem, 10px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konu-kesif-durak.aktif {
  border-color: var(--primary);
  color: var(--text1);
  background: rgba(var(--primary-rgb), .13);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .07);
}

.konu-kesif-paneller {
  padding: clamp(14px, 2.2vw, 24px);
}

.konu-kesif-panel[hidden] {
  display: none;
}

.konu-kesif-panel > header {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: auto;
  height: auto !important;
  min-height: 0;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.konu-kesif-panel > header::after {
  display: none;
}

.konu-kesif-panel > header > span {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 14px;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  background: rgba(var(--primary-rgb), .13);
}

.konu-kesif-panel > header > div {
  min-width: 0;
}

.konu-kesif-panel > header small {
  color: color-mix(in srgb, var(--secondary) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-size: max(.65rem, 10px);
  font-weight: 800;
  letter-spacing: .11em;
}

.konu-kesif-panel > header h3 {
  margin: 3px 0;
  color: var(--text1);
}

.konu-kesif-panel > header p {
  margin: 4px 0 0;
  color: var(--text3);
}

.konu-kesif-metin {
  padding-top: 12px;
  color: var(--text2);
}

.konu-kesif-metin p {
  position: relative;
  margin: 0;
  padding: 8px 0;
  overflow-wrap: anywhere;
  font-size: clamp(.82rem, .92vw, .98rem);
  line-height: 1.78;
}

.konu-kesif-metin p + p {
  border-top: 1px dashed var(--border);
}

.konu-kesif-metin strong {
  color: var(--text1);
}

.konu-kesif-madde {
  display: inline-grid;
  width: 18px;
  place-items: center;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  font-size: max(.35rem, 10px);
  vertical-align: middle;
}

.konu-kesif-kontroller {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--border);
}

.konu-kesif-kontroller > span {
  color: var(--text3);
  font-size: max(.72rem, 10px);
  text-align: center;
}

.konu-kesif-kontroller button {
  padding: 9px 13px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text2);
  background: var(--bg3);
  cursor: pointer;
}

.konu-kesif-ornekler {
  padding: clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--border);
  background: var(--bg4);
}

.konu-kesif-alt-baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.konu-kesif-alt-baslik > i {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.konu-kesif-alt-baslik small,
.konu-kesif-alt-baslik strong {
  display: block;
}

.konu-kesif-alt-baslik small {
  color: var(--text3);
  font-size: max(.62rem, 10px);
  letter-spacing: .1em;
}

.konu-kesif-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 9px;
}

.konu-kesif-kart {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg3);
}

.konu-kesif-kart > span {
  flex: 0 0 auto;
  font-size: 1.35rem;
}

.konu-kesif-kart > div {
  min-width: 0;
}

.konu-kesif-kart strong {
  display: block;
  color: var(--text1);
  font-size: max(.78rem, 12px);
}

.konu-kesif-kart p {
  margin: 4px 0 0;
  color: var(--text3);
  font-size: max(.72rem, 10px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.konu-kesif > .vurgu {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 clamp(12px, 1.8vw, 20px) clamp(12px, 1.8vw, 20px);
  padding: clamp(10px, 1.4vw, 13px) clamp(12px, 1.8vw, 16px);
  min-height: 0;
  border: 1px solid var(--border2);
  border-left-width: 4px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), var(--card2));
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .08);
  line-height: 1.55;
}

.konu-kesif > .vurgu strong {
  color: var(--text1);
  white-space: nowrap;
}

.ayrintili-anlatim {
  margin-top: clamp(14px, 2vw, 22px);
  border: 1px solid var(--border2);
  border-radius: 18px;
  background: var(--bg3);
  overflow: hidden;
}

.ayrintili-anlatim-ust {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--border);
  background: var(--bg4);
}

.ayrintili-anlatim-ust > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: 12px;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  background: var(--card2);
}

.ayrintili-anlatim-ust small,
.ayrintili-anlatim-ust strong {
  display: block;
}

.ayrintili-anlatim-ust small {
  color: var(--text3);
  font-size: max(.62rem, 10px);
  letter-spacing: .1em;
}

.ayrintili-anlatim-ust strong {
  margin-top: 3px;
  color: var(--text1);
  font-size: clamp(.84rem, 1.4vw, 1rem);
}

.ayrintili-anlatim-bolumler {
  display: grid;
  gap: 10px;
  padding: clamp(12px, 2vw, 18px);
}

.ayrintili-anlatim-bolum {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg4);
  overflow: hidden;
}

.ayrintili-anlatim-bolum > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  color: var(--text1);
  font-size: max(.82rem, 12px);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ayrintili-anlatim-bolum > summary::-webkit-details-marker {
  display: none;
}

.ayrintili-anlatim-bolum > summary::after {
  content: "+";
  margin-left: auto;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  font-size: 1.15rem;
  font-weight: 500;
}

.ayrintili-anlatim-bolum[open] > summary {
  border-bottom: 1px solid var(--border);
  background: var(--card2);
}

.ayrintili-anlatim-bolum[open] > summary::after {
  content: "−";
}

.ayrintili-anlatim-bolum > summary i {
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.ayrintili-anlatim-icerik {
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
}

.ayrintili-anlatim-senaryo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: color-mix(in srgb, var(--secondary) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-size: max(.76rem, 12px);
  font-weight: 700;
}

.ayrintili-anlatim-metin {
  min-width: 0;
  color: var(--text2);
  font-size: clamp(.78rem, 1.25vw, .9rem);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.ayrintili-anlatim-metin p {
  margin: 0;
}

.ayrintili-anlatim-metin p + p {
  margin-top: 10px;
}

.ayrintili-anlatim-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 9px;
  margin-top: 15px;
}

.ayrintili-anlatim-kart {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
}

.ayrintili-anlatim-kart > span {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.ayrintili-anlatim-kart > div {
  min-width: 0;
}

.ayrintili-anlatim-kart strong {
  display: block;
  color: var(--text1);
  font-size: max(.76rem, 12px);
}

.ayrintili-anlatim-kart p {
  margin: 4px 0 0;
  color: var(--text3);
  font-size: max(.7rem, 10px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ayrintili-anlatim-icerik > .vurgu {
  margin: 15px 0 0;
}

.devre-tasarimi {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.devre-tasarimi-gorsel {
  display: grid;
  min-height: clamp(220px, 34vw, 460px);
  place-items: center;
  padding: clamp(12px, 2vw, 20px);
  border: 1px dashed var(--border2);
  border-radius: 16px;
  background: var(--bg3);
  overflow: hidden;
}

.devre-tasarimi-gorsel img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.devre-tasarimi-yer-tutucu {
  display: grid;
  justify-items: center;
  max-width: 430px;
  gap: 9px;
  color: var(--text3);
  text-align: center;
}

.devre-tasarimi-yer-tutucu > i {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: 16px;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  background: var(--bg4);
  font-size: 1.3rem;
}

.devre-tasarimi-yer-tutucu strong {
  color: var(--text1);
  font-size: clamp(.84rem, 1.5vw, 1rem);
}

.devre-tasarimi-yer-tutucu p {
  margin: 0;
  font-size: max(.75rem, 12px);
  line-height: 1.6;
}

.devre-tasarimi-baglantilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 9px;
}

.devre-tasarimi-baglanti {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg4);
}

.devre-tasarimi-baglanti > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  background: color-mix(in srgb, var(--mod-color, var(--primary)) 12%, var(--bg3));
  font: 700 max(.62rem, 10px)/1 'JetBrains Mono', monospace;
}

.devre-tasarimi-baglanti div,
.devre-tasarimi-baglanti em {
  min-width: 0;
}

.devre-tasarimi-baglanti strong,
.devre-tasarimi-baglanti small {
  display: block;
  overflow-wrap: anywhere;
}

.devre-tasarimi-baglanti strong {
  color: var(--text1);
  font-size: max(.74rem, 10px);
}

.devre-tasarimi-baglanti small {
  margin-top: 3px;
  color: var(--text3);
  font-size: max(.64rem, 10px);
}

.devre-tasarimi-baglanti > i {
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-size: max(.7rem, 10px);
}

.devre-tasarimi-baglanti em {
  color: var(--text2);
  font-size: max(.7rem, 10px);
  font-style: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kod-dosyalari {
  display: grid;
  gap: 10px;
}

.kod-dosyasi-blok {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
  overflow: hidden;
}

.kod-dosyasi-blok > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  color: var(--text1);
  cursor: pointer;
  list-style: none;
}

.kod-dosyasi-blok > summary::-webkit-details-marker {
  display: none;
}

.kod-dosyasi-blok > summary > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: 11px;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  background: var(--bg4);
}

.kod-dosyasi-blok > summary > div {
  min-width: 0;
}

.kod-dosyasi-blok > summary strong,
.kod-dosyasi-blok > summary small {
  display: block;
  overflow-wrap: anywhere;
}

.kod-dosyasi-blok > summary strong {
  font-size: max(.8rem, 12px);
}

.kod-dosyasi-blok > summary small {
  margin-top: 3px;
  color: var(--text3);
  font-size: max(.64rem, 10px);
}

.kod-dosyasi-blok > summary > em {
  margin-left: auto;
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
  font-style: normal;
  transition: transform .2s;
}

.kod-dosyasi-blok[open] > summary {
  border-bottom: 1px solid var(--border);
  background: var(--bg4);
}

.kod-dosyasi-blok[open] > summary > em {
  transform: rotate(180deg);
}

.kod-dosyasi-icerik {
  min-width: 0;
  padding: clamp(11px, 2vw, 16px);
}

.kod-dosyasi-icerik > p {
  margin: 0 0 10px;
  color: var(--text2);
  font-size: max(.75rem, 12px);
  line-height: 1.6;
}

.kod-dosyasi-araclar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--bg2);
  color: var(--text2);
  font: 600 max(.65rem, 10px)/1.3 'JetBrains Mono', monospace;
}

.kod-dosyasi-araclar span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kod-dosyasi-araclar button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text1);
  font: inherit;
  cursor: pointer;
}

.kod-dosyasi-araclar button:hover {
  border-color: var(--mod-color, var(--primary));
  color: color-mix(in srgb, var(--mod-color, var(--primary)) var(--kimlik-yazi-orani, 100%), var(--text1));
}

.kod-dosyasi-icerik pre {
  max-width: 100%;
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  border-radius: 0 0 10px 10px;
  background: var(--bg1);
  color: var(--text1);
  overflow: auto;
}

.kod-dosyasi-icerik code {
  font: max(.74rem, 10px)/1.75 'JetBrains Mono', monospace;
  white-space: pre;
}

@media (max-width: 640px) {
  .tarih-rotasi-ust {
    align-items: flex-start;
  }

  .tarih-rotasi-duraklar {
    display: flex;
  }

  .tarih-rotasi-durak {
    flex: 0 0 142px;
  }

  .tarih-rotasi-panel > header {
    display: block;
    height: auto !important;
    min-height: 0;
    overflow: visible;
  }

  .tarih-rotasi-panel > header > span {
    display: block;
    margin-bottom: 6px;
  }

  .tarih-rotasi-olaylar {
    grid-template-columns: 1fr;
  }

  .tarih-rotasi-paneller {
    overflow: visible;
  }

  .tarih-rotasi-panel,
  .tarih-rotasi-gorev,
  .tarih-rotasi-olay,
  .tarih-rotasi-cikarim {
    position: static;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .tarih-rotasi-gorev {
    align-items: flex-start;
    margin-block: 14px;
  }

  .tarih-rotasi-kontroller button {
    flex: 1;
    padding-inline: 8px;
    font-size: max(.75rem, 12px);
  }

  .konu-kesif-ust {
    align-items: flex-start;
  }

  .konu-kesif-duraklar {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .konu-kesif-durak {
    flex: 0 0 min(190px, 72vw);
  }

  .konu-kesif-panel,
  .konu-kesif-metin,
  .konu-kesif-kart {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .konu-kesif-panel > header {
    height: auto !important;
    overflow: visible;
  }

  .konu-kesif-kontroller {
    grid-template-columns: 1fr 1fr;
  }

  .konu-kesif-kontroller > span {
    display: none;
  }

  .konu-kesif-kontroller button {
    width: 100%;
    padding-inline: 8px;
  }

  .konu-kesif-kartlar {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .konu-kesif-kart {
    flex: 0 0 min(230px, 82vw);
  }

  .ayrintili-anlatim,
  .ayrintili-anlatim-bolum,
  .ayrintili-anlatim-icerik,
  .ayrintili-anlatim-metin,
  .ayrintili-anlatim-kart {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .ayrintili-anlatim-ust {
    align-items: flex-start;
  }

  .ayrintili-anlatim-bolum > summary {
    align-items: flex-start;
    overflow-wrap: anywhere;
  }

  .ayrintili-anlatim-kartlar {
    grid-template-columns: 1fr;
  }

  .devre-tasarimi-gorsel {
    min-height: 210px;
  }

  .devre-tasarimi-baglantilar {
    grid-template-columns: 1fr;
  }

  .devre-tasarimi-baglanti {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .devre-tasarimi-baglanti > i {
    display: none;
  }

  .devre-tasarimi-baglanti > em {
    grid-column: 2;
  }

  .kod-dosyasi-araclar {
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BH YEDEK BİLEŞENİ
   Öğrenci Merkezi ortak yedek alma / geri yükleme bileşeni (F4-09).
   assets/js/rota-yedek-bileseni.js tarafından yalnız createElement ile
   kurulur; burada üretilmeyen bir sınıf adına karşılık gelen kural
   YOKTUR. Renkler yalnız tema değişkenlerinden veya sitenin mevcut
   toast sisteminde (bkz. .bh-toast--basari/--hata/--uyari) zaten
   kullanılan başarı/hata/uyarı tonlarından — YENİ bir renk hard-code
   edilmedi.
   ═══════════════════════════════════════════════════════════════════════ */

.rota-yedek-bileseni{
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.rota-yb-disa-aktar,
.rota-yb-ice-aktar{
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.rota-yedek-bileseni h3{
  margin: 0 0 .85rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--text1);
}

.rota-yb-bilgi{
  margin: 0 0 .85rem;
  color: var(--text2);
  font-size: max(.92rem, 12px);
  line-height: 1.55;
}

.rota-yb-uyari{
  margin: .6rem 0;
  padding: .7rem .9rem;
  border-radius: 10px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .32);
  color: var(--text1);
  font-size: max(.88rem, 12px);
  line-height: 1.55;
}

.rota-yb-secenek{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .6rem 0;
}

.rota-yb-secenek input[type="checkbox"]{
  margin-top: .2rem;
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rota-yb-secenek label{
  color: var(--text2);
  font-size: max(.9rem, 12px);
  line-height: 1.5;
  cursor: pointer;
}

.rota-yb-parola-alani,
.rota-yb-parola-istem{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: .75rem 0;
}

.rota-yb-parola-alani[hidden],
.rota-yb-parola-istem[hidden]{
  display: none;
}

.rota-yedek-bileseni input[type="password"],
.rota-yedek-bileseni input[type="file"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: .65rem .85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text1);
  font-size: max(.92rem, 12px);
  font-family: inherit;
}

.rota-yedek-bileseni input[type="password"]:focus,
.rota-yedek-bileseni input[type="file"]:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

.rota-yb-buton,
.rota-yb-buton-ikincil{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.15rem;
  border-radius: 10px;
  font-size: max(.92rem, 12px);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  margin: .35rem .5rem .35rem 0;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.rota-yb-buton{
  background: var(--primary);
  color: var(--bg1);
}

.rota-yb-buton:hover{ transform: translateY(-1px); }

.rota-yb-buton:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.rota-yb-buton-ikincil{
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}

.rota-yb-buton-ikincil:hover{
  border-color: var(--primary);
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
}

.rota-yb-onizleme{
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
}

.rota-yb-onizleme-liste{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .6rem 1rem;
  margin: .85rem 0;
}

.rota-yb-onizleme-liste dt{
  margin: 0;
  color: var(--text3);
  font-size: max(.78rem, 12px);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.rota-yb-onizleme-liste dd{
  margin: .15rem 0 0;
  color: var(--text1);
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.rota-yb-durum{
  margin: .75rem 0 0;
  min-height: 1.2em;
  font-size: max(.88rem, 12px);
  line-height: 1.5;
}

/* Sitenin mevcut toast sisteminde zaten kullanılan başarı/hata tonları
   (bkz. .bh-toast--basari .bh-toast__ikon / .bh-toast--hata .bh-toast__ikon)
   — burada YENİ bir renk TANIMLANMADI, aynı iki ton yeniden kullanıldı. */
.rota-yb-durum-basari{ color: #22c55e; }
.rota-yb-durum-hata{ color: #ef4444; }

@media (max-width: 640px) {
  .rota-yb-buton,
  .rota-yb-buton-ikincil{
    width: 100%;
    margin: .35rem 0;
  }

  .rota-yb-onizleme-liste{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BH YEDEK HATIRLATMA BANNER
   İlk yedek hatırlatması (F4-11). assets/js/rota-yedek-hatirlatma.js
   tarafından yalnız createElement ile kurulur; burada üretilmeyen bir
   sınıf adına karşılık gelen kural YOKTUR. Renk yalnız tema
   değişkenlerinden veya sitenin mevcut uyarı tonundan (F4-09B'deki
   .bh-yb-uyari ile aynı amber — rgba(245,158,11,...)) — yeni bir renk
   hard-code edilmedi.
   ═══════════════════════════════════════════════════════════════════════ */

.rota-yh-banner{
  position: relative;
  margin: clamp(.75rem, 2vw, 1.25rem) auto;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  max-width: min(760px, calc(100% - 2rem));
  border-radius: 16px;
  background: var(--card2);
  border: 1px solid rgba(245, 158, 11, .3);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

.rota-yh-baslik{
  display: block;
  margin-bottom: .6rem;
  color: var(--text1);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.rota-yh-liste{
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--text2);
  font-size: max(.88rem, 12px);
  line-height: 1.6;
}

.rota-yh-liste li{
  margin-bottom: .4rem;
}

.rota-yh-liste li:last-child{
  margin-bottom: 0;
}

.rota-yh-kapat{
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--primary);
  background: transparent;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1));
  font: 600 max(.85rem, 12px)/1 'Sora', sans-serif;
  cursor: pointer;
  transition: all .2s;
}

.rota-yh-kapat:hover{
  background: rgba(var(--primary-rgb), .12);
}

@media (max-width: 640px) {
  .rota-yh-kapat{
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════
   HAREKET AZALTMA TERCİHİ
   İşletim sisteminde "hareketi azalt" seçen kullanıcılar için
   animasyon ve geçişleri etkisiz kılar. WCAG 2.3.3.

   Konum notu: Bu blok bilerek dosyanın sonundadır. CSS yükleme
   sırası bh-core -> bh-theme -> bh-compat -> bh-components -> sayfa.css
   olduğu için buraya konulduğunda ticker dahil bu dosyadaki
   !important animasyonlarını da yener. Yalnız pages/*.css içindeki
   !important kuralları hayatta kalır; onlar kendi dosyalarında
   ayrıca ele alınır.
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   F6-14-J003: rota-ui.js style-src temizliği — statik sınıflar.
   NOT: Bu sınıflar mevcut .bh-klt__* kurallarını DEĞİŞTİRMEZ/SİLMEZ;
   rota-ui.js'in ŞU AN GÖRÜNÜR (inline kaynaklı) tasarımını BİREBİR
   korumak için AYRI adlarla eklenmiştir (bkz. LOCK-F6-14-J003 — bu,
   kasıtlı bir tasarım kararı DEĞİL, CSP uyumluluğu için mevcut
   davranışın korunmasıdır). Header kullanıcı dropdown'ına ait
   .bh-hdr-* sınıfları, hesap sistemi olmadığı için kaldırıldı.
   ═══════════════════════════════════════════════════════════ */

/* F6-14-J003 ayristirici tampon kurali: bu blogun bir onceki 

/* F6-14-J001: rota-app.js hub veri yükleme hata metni */
.rota-hub-hata-metni{
  color: var(--text2);
  padding: 2rem;
  text-align: center;
}

/* Kilitli kurs banner'ı (RotaToast.kilitliGoster) */
.rota-klt-inline-ic{
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 18px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(21,27,42,.98), rgba(35,42,62,.98));
  border: 1px solid rgba(249,115,22,.45);
  box-shadow: 0 18px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06) inset;
  font-family: Sora, Arial, sans-serif; color: #f8fafc; overflow: hidden;
}
.rota-klt-inline-ikon-wrap{ position: relative; flex: 0 0 auto; width: 50px; height: 50px; }
.rota-klt-inline-kurs-ikon{
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px;
  background: rgba(249,115,22,.16); border: 1px solid rgba(249,115,22,.32);
  font-size: 1.55rem; line-height: 1;
}
.rota-klt-inline-kilit{
  position: absolute; right: -7px; bottom: -6px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #dc2626);
  border: 2px solid #151b2a; color: #fff; font-size: max(.62rem, 10px);
}
.rota-klt-inline-metin{ min-width: 0; flex: 1; }
.rota-klt-inline-rozet{
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.35);
  color: #fdba74; font: 700 10px/1 'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: .08em;
}
.rota-klt-inline-baslik{
  font: 800 16px/1.25 Sora, Arial, sans-serif; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rota-klt-inline-aciklama{ margin-top: 4px; font: 500 13px/1.45 Sora, Arial, sans-serif; color: #cbd5e1; }
.rota-klt-inline-kapat{
  display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #e2e8f0; cursor: pointer;
}
.rota-klt-inline-prog{
  height: 3px; margin-inline: 14px; margin-top: -3px; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.rota-klt-inline-prog-ic{
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #f97316, #22c55e);
  transform-origin: left center;
}

/* Toast konteyneri (eskiden el.style.cssText ile atanıyordu) */
#rota-toast-konteyner{
  position: fixed;
  bottom: clamp(3.5rem, 5.5vw, 5.5rem);
  right: clamp(1rem, 2vw, 1.75rem);
  z-index: 2147483000;
  display: flex; flex-direction: column-reverse; gap: .55rem;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 2rem));
  width: 100%;
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   KONU İÇİ SORULAR — RK, MP ve YZ konu sayfalarında ortak (rehber §10.2).
   rk-konu.css içinden taşındı; sınıflar rota-konu-sorulari.js ve
   rota-konu-kilidi.js tarafından üretilir.
═════════════════════════════════════════════════════════════ */
/* ── Konu içi sorular (rota-konu-sorulari.js, rehber §10.2) ──
   Başarı: --c4 (iki temada yeşil), hata: --c8 (kırmızı). */
.rks-havuz { display: grid; gap: .75rem; }
.rks-giris { margin: 0; color: var(--text2); font: 500 max(.8rem, 12px)/1.55 'Inter', sans-serif; }
/* minmax(0, 1fr): uzun kod satırı ya da uzun seçenek kartı genişletmez;
   kod kutusu kendi içinde kaydırılır, açılır liste satıra sığar. */
.rks-sorular { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.rks-yukleniyor { margin: 0; color: var(--text3); }
.rks-kart { border: 2px dashed var(--border2); border-radius: 10px; padding: .85rem 1rem; background: var(--card2); }
.rks-kart[hidden] { display: none; }
.rks-kart.rks-cozuldu { border-style: solid; border-color: var(--c4); }
.rks-kart.rks-katli { padding: .45rem 1rem; }
.rks-kart.rks-katli .rks-govde,
.rks-kart.rks-katli .rks-geri,
.rks-kart.rks-katli .rks-ipucu,
.rks-kart.rks-katli .rks-alt { display: none; }
.rks-bas { display: flex; justify-content: space-between; gap: .6rem; width: 100%; padding: 0; margin: 0 0 .35rem; border: 0; background: none; text-align: left; color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1)); font: 800 max(.66rem, 10px)/1.3 'Inter', sans-serif; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.rks-bas:disabled { cursor: default; opacity: 1; }
.rks-kart.rks-katli .rks-bas { margin: 0; }
.rks-cozuldu .rks-bas { color: color-mix(in srgb, var(--c4) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.rks-ac-kapa { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text3); }
.rks-olcut { margin: 0 0 .35rem; color: var(--text3); font: 500 max(.74rem, 12px)/1.45 'Inter', sans-serif; }
.rks-soru { margin: 0 0 .6rem; color: var(--text1); font: 650 max(.86rem, 13px)/1.5 'Inter', sans-serif; }
.rks-secenekler { display: grid; gap: .4rem; }
.rks-secenek,
.rks-dugme,
.rks-ikili button,
.rks-oklar button { font: 600 max(.8rem, 12px)/1.4 'Inter', sans-serif; color: var(--text1); background: var(--card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.rks-secenek { display: block; width: 100%; padding: .55rem .8rem; text-align: left; font-weight: 500; }
.rks-dugme { padding: .4rem .85rem; }
.rks-secenek:hover:not(:disabled),
.rks-dugme:hover:not(:disabled),
.rks-ikili button:hover:not(:disabled) { border-color: var(--primary); }
.rks-dugme.rks-ana { background: var(--primary); border-color: var(--primary); color: var(--bg1); }
/* Koyu temada ana renk zemin üzerinde koyu metin 4,31:1 kalıyordu; zemin biraz açılır. */
[data-theme="siber"] .rks-dugme.rks-ana { background: color-mix(in srgb, var(--primary) 78%, white); border-color: color-mix(in srgb, var(--primary) 78%, white); }
.rks-secenek:disabled,
.rks-dugme:disabled { cursor: default; }
.rks-secenek.rks-dogru { border-color: var(--c4); background: color-mix(in srgb, var(--c4) 14%, var(--card)); }
.rks-secenek.rks-yanlis { border-color: var(--c8); background: color-mix(in srgb, var(--c8) 10%, var(--card)); text-decoration: line-through; text-decoration-color: var(--c8); }
.rks-satir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .6rem; padding: .45rem .65rem; margin-bottom: .35rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.rks-satir.rks-dogru { border-color: var(--c4); }
.rks-satir.rks-yanlis { border-color: var(--c8); }
.rks-ad { color: var(--text1); font: 600 max(.8rem, 12px)/1.4 'Inter', sans-serif; }
.rks-satir small { flex-basis: 100%; color: var(--text2); font: 500 max(.74rem, 11px)/1.45 'Inter', sans-serif; }
.rks-satir select { max-width: 100%; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card2); color: var(--text1); font: 500 max(.78rem, 12px)/1.3 'Inter', sans-serif; }
.rks-ikili { display: flex; gap: .35rem; }
.rks-ikili button { padding: .3rem .7rem; }
.rks-ikili button:disabled { opacity: .4; cursor: default; }
.rks-ikili button.rks-dogru-secim { opacity: 1; border-color: var(--c4); background: color-mix(in srgb, var(--c4) 16%, var(--card)); }
.rks-sira { display: grid; gap: .35rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.rks-sira li { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text1); }
.rks-sira li.rks-dogru { border-color: var(--c4); }
.rks-metin { flex: 1; min-width: 0; font: 600 max(.8rem, 12px)/1.4 'Inter', sans-serif; }
.rks-metin small { display: block; color: var(--text2); font-weight: 500; }
.rks-oklar { display: flex; gap: .25rem; }
.rks-oklar button { width: 2rem; height: 2rem; }
.rks-oklar button:disabled { opacity: .35; cursor: default; }
.rks-sayi { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--text2); }
.rks-sayi input { width: 7rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text1); font: 500 max(.82rem, 12px)/1.3 'Inter', sans-serif; }
.rks-hata-mesaji { margin: 0 0 .5rem; padding: .4rem .65rem; border: 1px solid color-mix(in srgb, var(--c8) 50%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--c8) 9%, var(--card)); color: var(--text1); font: 500 max(.74rem, 11px)/1.45 'JetBrains Mono', monospace; }
.rks-kod-satirlari { margin: 0 0 .4rem; padding: .35rem 0; overflow-x: auto; border-radius: 8px; background: var(--bg1); border: 1px solid var(--border); }
.rks-kod-satirlari button { display: flex; gap: .8rem; width: 100%; min-width: max-content; padding: .05rem .8rem; border: 0; background: none; color: var(--text1); text-align: left; white-space: pre; cursor: pointer; font: 500 max(.76rem, 11px)/1.55 'JetBrains Mono', monospace; }
.rks-kod-satirlari button:hover:not(:disabled) { background: var(--nav-hover); }
.rks-kod-satirlari button:disabled { cursor: default; }
.rks-kod-satirlari button.rks-dogru { background: color-mix(in srgb, var(--c4) 22%, transparent); }
.rks-kod-satirlari button.rks-yanlis { background: color-mix(in srgb, var(--c8) 18%, transparent); }
/* Dokunmatik ekranda kod satırı ve katlanan soru başlığı parmakla seçilebilir
   yükseklikte olur (fare ile sıkı satır aralığı korunur). */
@media (pointer: coarse) {
  .rks-kod-satirlari button { align-items: center; min-height: 40px; }
  .rks-bas:not(:disabled) { align-items: center; min-height: 40px; }
  .rks-ikili button { min-height: 36px; }
}
.rks-sn { width: 1.4rem; flex-shrink: 0; text-align: right; color: var(--text3); }
.rks-geri { margin: .5rem 0 0; font: 600 max(.8rem, 12px)/1.5 'Inter', sans-serif; }
.rks-geri:empty { display: none; }
.rks-geri.rks-olumlu { color: color-mix(in srgb, var(--c4) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.rks-geri.rks-olumsuz { color: color-mix(in srgb, var(--c8) var(--kimlik-yazi-orani, 100%), var(--text1)); }
.rks-geri.rks-notr { color: var(--text1); }
.rks-aciklama { display: block; margin-top: .2rem; color: var(--text2); font-weight: 500; }
.rks-ipucu { margin: .5rem 0 0; padding: .4rem .65rem; border: 1px solid var(--border2); border-radius: 6px; background: var(--card); color: var(--text2); font: 500 max(.78rem, 12px)/1.5 'Inter', sans-serif; }
.rks-alt { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.rks-alt:empty { display: none; }
.rks-bitis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .75rem 1rem; border: 2px solid var(--c4); border-radius: 10px; background: color-mix(in srgb, var(--c4) 8%, var(--card)); color: var(--text1); font: 500 max(.82rem, 12px)/1.5 'Inter', sans-serif; }
.rks-bitis[hidden] { display: none; }
.rks-bitis .rks-konu-tamamla { margin-left: auto; }
.rks-titre { animation: rks-titre .35s; }
@keyframes rks-titre { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.chip-tamamla.kilitli { border-style: dashed; color: var(--text3); }
@media (prefers-reduced-motion: reduce) { .rks-titre { animation: none; } }

/* ═══════════════════════════════════════════════════════════
   MASKOT — PUSULA  (MASKOT-BILESEN-STILI-03)

   KONUM KARARI: Maskot FAB'ı SOL alttadır, sağ alt değil.
   Sağ alt üç bileşenle doludur ve çakışırdı:
     .theme-fab            sağ alt köşe, z-index 10002
     .theme-tray           tema FAB'ının ÜSTÜNE doğru açılır
                           (bottom: calc(100% + .75rem))
     #bh-toast-konteyner   sağ alt, z-index 2147483000
   Planda maskotun tema FAB'ının üstüne konması yazıyordu; tepsi tam
   o alanı kapladığı için sol alta alındı. Böylece hiçbir bileşenle
   z-index veya JS koordinasyonu gerekmez.

   RENK: Panel çerçevesi tema değişkenlerini kullanır (beş temada da
   doğru görünür). Maskot GÖRSELİ sabit renklidir ve <img> ile yüklenir;
   logo gibi tema değişiminden etkilenmez (bkz. plan §2.1).
═════════════════════════════════════════════════════════════ */

/* DİKEY KONUM: .ticker-wrap sayfanın altına sabitlenmiştir
   (position: fixed; bottom: 0; height: clamp(36px, 3vw, 48px)).
   Maskot onun ÜSTÜNDE durmalıdır; ilk denemede FAB ticker'ın üzerine
   binmişti. #bh-toast-konteyner de aynı nedenle 3.5-5.5rem yukarıdadır. */
.rota-maskot{
  position: fixed;
  bottom: calc(clamp(36px, 3vw, 48px) + clamp(.9rem, 1.5vw, 1.4rem));
  left: clamp(1.2rem, 2vw, 2rem);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

/* Pusula sağ-alt: yalnız tema FAB'ı header'da olan sayfalarda (sağ-alt
   köşe orada boşalmıştır). `data-module` ile DEĞİL, tema FAB'ının fiilen
   header'a enjekte edildiği sayfalarla eşleşir — aksi hâlde bir modülün
   alt sayfalarında hem maskot hem düz FAB aynı
   köşede çakışır. */
body:has(.header-theme-fab) .rota-maskot{
  left: auto;
  right: clamp(1.2rem, 2vw, 2rem);
  align-items: flex-end;
}

.rota-maskot-fab{
  width: clamp(52px, 4vw, 64px);
  height: clamp(52px, 4vw, 64px);
  padding: 0;
  border: 1.5px solid rgba(var(--primary-rgb, 0,212,255), .35);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--card), var(--card2));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: rota-maskot-suzul 4s ease-in-out infinite;
}
.rota-maskot-fab img{
  width: 78%;
  height: 78%;
  pointer-events: none;
}
.rota-maskot-fab:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}
.rota-maskot-fab:focus-visible{
  outline: 3px solid var(--primary, #00d4ff);
  outline-offset: 3px;
}

@keyframes rota-maskot-suzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.rota-maskot-panel{
  width: min(330px, calc(100vw - 2.4rem));
  padding: .9rem;
  border: 1.5px solid rgba(var(--primary-rgb, 0,212,255), .32);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, var(--bg1)), color-mix(in srgb, var(--card2) 92%, var(--bg2))),
    var(--card);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px);
  color: var(--text1);
  animation: rota-maskot-acil .22s ease-out;
}
.rota-maskot-panel[hidden]{ display: none; }

@keyframes rota-maskot-acil {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rota-maskot-baslik{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border2);
}
.rota-maskot-gorsel{
  width: 46px;
  height: 46px;
  flex: none;
}
.rota-maskot-ad{
  flex: 1;
  font: 900 .92rem/1 'Sora', sans-serif;
  color: var(--text1);
}
.rota-maskot-kapat{
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.rota-maskot-kapat:hover{ background: var(--nav-hover); color: var(--text1); }
.rota-maskot-kapat:focus-visible{ outline: 2px solid var(--primary, #00d4ff); outline-offset: 2px; }

.rota-maskot-sonuc{
  min-height: 62px;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  margin: .7rem 0;
}
.rota-maskot-metin{
  margin: 0 0 .5rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text2);
}
.rota-maskot-liste{
  margin: 0 0 .55rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.rota-maskot-liste li{
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .5rem .6rem;
  border: 1px solid var(--border2);
  border-left: 3px solid var(--primary, #00d4ff);
  border-radius: 10px;
  background: var(--card2);
}
.rota-maskot-liste a{
  font-size: .78rem;
  font-weight: 700;
  color: var(--text1);
  text-decoration: none;
}
.rota-maskot-liste a:hover{ color: var(--primary, #00d4ff); text-decoration: underline; }
.rota-maskot-etiket{
  font: 700 .6rem/1 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
}

/* Bulunduğu sayfadan gelen sonuçlarda kısa cevap metni; sözlük gibi
   bağlantısız kayıtlarda başlık düz metin olarak çizilir. */
.rota-maskot-baslik-metni{
  font-size: .78rem;
  font-weight: 700;
  color: var(--text1);
}
.rota-maskot-cevap{
  margin: .2rem 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--text2);
}

/* Konu sayfasında karşılamanın altındaki örnek soru: tıklanınca sorulur. */
.rota-maskot-ornek-etiket{ margin-bottom: .3rem; }
.rota-maskot-ornek{
  display: block;
  width: 100%;
  margin: 0 0 .6rem;
  padding: .5rem .65rem;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  background: var(--card2);
  color: var(--text1);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.rota-maskot-ornek:hover,
.rota-maskot-ornek:focus-visible{
  border-color: var(--primary, #00d4ff);
  outline: none;
}

/* Yönlendirme bloğu KALDIRILAMAZ — sitenin yasal iletişim kanalının
   maskot içinde de görünür kalmasını sağlar (bkz. rota-maskot.js). */
.rota-maskot-yonlendirme{
  margin: 0;
  padding-top: .55rem;
  border-top: 1px dashed var(--border2);
  font-size: .7rem;
  line-height: 1.5;
  color: var(--text3);
}
.rota-maskot-yonlendirme a{
  color: var(--primary, #00d4ff);
  font-weight: 700;
  word-break: break-all;
}

.rota-maskot-form{ display: flex; gap: .45rem; }
.rota-maskot-girdi{
  flex: 1;
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text1);
  font-size: .8rem;
  font-family: inherit;
}
.rota-maskot-girdi:focus{
  outline: none;
  border-color: rgba(var(--primary-rgb, 0,212,255), .55);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0,212,255), .12);
}
.rota-maskot-gonder{
  flex: none;
  padding: .55rem .9rem;
  border: none;
  border-radius: 10px;
  background: var(--primary, #00d4ff);
  color: #fff;
  font: 700 .78rem/1 'Sora', sans-serif;
  cursor: pointer;
}
.rota-maskot-gonder:hover{ filter: brightness(1.08); }
.rota-maskot-gonder:focus-visible{ outline: 2px solid var(--text1); outline-offset: 2px; }

@media (max-width: 640px) {
  .rota-maskot{ bottom: calc(clamp(36px, 3vw, 48px) + .7rem); left: .75rem; }
  .rota-maskot-panel{ width: min(320px, calc(100vw - 1.5rem)); }

  body:has(.header-theme-fab) .rota-maskot{
    left: auto;
    right: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rota-maskot-fab{ animation: none; }
  .rota-maskot-fab:hover{ transform: none; }
  .rota-maskot-panel{ animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   TD alt sayfa header nav varyantı (25 Eylül 2026)
   teknik-destek-subpages.css'ten birebir taşındı: iki açılır menülü TD nav'ı
   geniş ekranda sıkıştırılır, tablette (768–1199px) hamburger yerine yatay
   kaydırılan nav gösterilir. Sayfa CSS'i header'ı ezmesin diye burada
   (CLAUDE.md §9.1). Seçiciler .ts-subpage-body ile yalnız TD alt sayfalarına
   kapsanır.
   ═══════════════════════════════════════════════════════════ */
/* rota-subpage.css'teki header grid'i orta sutunu (nav) icerigine gore
   auto genislikte ayirir; iki acilir menu eklenince nav genisligi
   header-right sutunuyla cakisiyordu. Nav ogelerinin yatay bosluklarini
   biraz daraltarak toplam genisligi guvenli araliga cekilir. */
@media (min-width: 1200px) {
  .ts-subpage-body .header-nav {
    gap: 0;
  }

  .ts-subpage-body .header-nav > a,
  .ts-subpage-body .ts-header-nav-drop-trigger {
    padding-left: .15rem;
    padding-right: .15rem;
  }

  .ts-subpage-body .ts-header-nav-drop-trigger {
    gap: .15rem;
  }

  .ts-subpage-body .ts-header-nav-drop-caret {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .ts-subpage-body .header-inner {
    gap: clamp(.7rem, 1.4vw, 1.2rem);
  }

  .ts-subpage-body .header-nav .ts-header-nav-drop {
    flex: 0 0 auto !important;
  }

  .ts-subpage-body .header-nav .ts-header-nav-drop-trigger {
    display: inline-flex !important;
    width: auto !important;
    padding: .45rem .72rem !important;
    white-space: nowrap !important;
  }

  .ts-subpage-body .header-nav {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Açılır alt menüler (Rehberler, Araçlar) menünün altına açılır;
     kaydırma/kırpma onları görünmez yapıyordu (10 Ekim 2026 ölçümü:
     800 ve 1000px'te alt menü kırpılıyordu). Açılır menülü TD menüsü
     kaydırılmaz; yer, sağ alan kurallarıyla açılır. Açılır menüsü
     olmayan alt sayfa menüsü kaydırılmaya devam eder. */
  .ts-subpage-body .header-nav:has(.ts-header-nav-drop) {
    overflow: visible !important;
  }

  .ts-subpage-body .header-nav a {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: .45rem .72rem !important;
    white-space: nowrap !important;
  }

  /* Geri bağlantısı: yukarıdaki ".header-nav a { display:inline-flex
     !important }" kuralını yenecek özgüllükte (tablette nav açık kalıyor). */
  .ts-subpage-body .menu-toggle,
  .ts-subpage-body .header-nav a.mobile-return-link {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PE header/footer politikası (25 Eylül 2026)
   programlama-egitimi(-responsive).css'ten taşındı (CLAUDE.md §9.1):
   PE sayfalarında tablette (768–1199px) header araması gizli, hamburger
   yalnız telefonda (≤767px); PE ana ekranında ders paneli açıkken footer
   gizlenir.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1199px) {
  html[data-module="pe"] .header-search {
    display: none !important;
  }
}
@media (min-width: 769px) {
  html[data-module="pe"] #menuToggle,
  html[data-module="pe"] .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
@media (max-width: 768px) {
  html[data-module="pe"] #menuToggle,
  html[data-module="pe"] .menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
html[data-module="pe"] body.pe-panel-open .rota-footer {
  display: none;
}
/* Salt-okunur girdili header araması bir başlatıcıdır (tıklanınca sayfa
   JS'i yönlendirir): imleç el olur. */
.header-search:has(input[readonly]) {
  cursor: pointer;
}

/* Klavyeyle açılan kartlar (hub modül kartları ve modül sayfası konu
   kartları role="link" tabindex="0" taşır): odak halkası görünür olmalı. */
.tl-card[role="link"]:focus-visible,
.pipeline-card[role="link"]:focus-visible {
  outline: 3px solid var(--text1);
  outline-offset: 3px;
}