/* ============================================================
 * Sportal — Component CSS (FAZ 5.b)
 * ------------------------------------------------------------
 * 10 header/footer component için tema-aware stil kütüphanesi.
 * sportal-tokens.css + Theme v2 --fb-* değişkenleri üstüne kurulu.
 *
 * Component matrisi (slug → sınıflar):
 *   1. logo                → .sportal-component-logo .sportal-logo__*
 *   2. arama-ikonu         → .sportal-component-arama-ikonu .sportal-arama-ikonu__*
 *   3. arama-kutusu        → .sportal-component-arama-kutusu .sportal-arama-kutusu__*
 *   4. sosyal              → .sportal-component-sosyal .sportal-sosyal__*
 *   5. login               → .sportal-component-login .sportal-login__*
 *   6. dark-toggle         → .sportal-component-dark-toggle .sportal-dark-toggle__*
 *   7. breaking-ticker     → .sportal-component-breaking-ticker .sportal-breaking-ticker__*
 *   8. tarih               → .sportal-component-tarih .sportal-tarih__*
 *   9. kategori-mega-menu  → .sportal-component-kategori-mega .sportal-mega__*
 *  10. metin-buton         → .sportal-component-metin-buton .sportal-metin-btn
 *
 * Bölge wrapper: .sportal-bolge-{topbar|header|below-header|footer-top|footer-bottom}
 *
 * Sunai (Frontend/Sunum) — Sportal FAZ 5.b Task #2
 * ============================================================ */

/*
 * ISOLATION (P0-1 fix — 2026-04-20 Sunai):
 *   Tüm kurallar `body[data-sportal="aktif"]` scope'una sarıldı (native
 *   CSS nesting). @keyframes kural kümesi nested edilemediği için
 *   scope DIŞINA ama @layer İÇİNE alındı (dosya sonunda).
 *   Tarayıcı uyumu: Chrome 120+, Safari 17.2+, Firefox 117+
 */
@layer sportal-components {
body[data-sportal="aktif"] {

  /* ==========================================================
     ORTAK — bölge container'ı + yardımcılar
     ----------------------------------------------------------
     P0-2 fix (2026-04-21 Sunai): Container pattern eksik idi.
     HeaderRenderService şimdi dış wrapper "<div class='sportal-bolge-cevrit'>"
     üretiyor → arkaplanlar (topbar/header/below-header) kenardan kenara
     full-bleed kalır. İÇERİK ise .sportal-bolge üzerine uygulanan
     max-width: 80rem ile merkeze sarılır. Tek kelimeyle:

       <div class="sportal-bolge-cevrit sportal-bolge-topbar">   ← full-bleed arka
         <div class="sportal-bolge" data-sportal-bolge="topbar">  ← centered içerik
           … component'ler …
         </div>
       </div>

     Eski CSS selector'leri (.sportal-bolge-topbar ile direkt arkaplan)
     geriye dönük uyumluluk için ALTTA hâlâ çalışıyor — HeaderRenderService
     yeni wrapper üretmediği eski cache dosyalarında bile renk görünür.
     ========================================================== */
  .sportal-bolge-cevrit {
    display: block;
    width: 100%;
  }

  .sportal-bolge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sportal-bosluk-4, 1rem);
    max-width: 80rem;                   /* Tailwind max-w-7xl = 1280px */
    margin-inline: auto;
    padding-block: var(--sportal-bosluk-3, 0.75rem);
    padding-inline: var(--sportal-bosluk-4, 1rem);
  }
  @media (min-width: 768px) {
    .sportal-bolge {
      padding-inline: var(--sportal-bosluk-6, 1.5rem);
    }
  }

  /* Full-bleed arkaplanlar — hem yeni cevrit wrapper'da hem legacy
     (doğrudan .sportal-bolge-TYPE class'ı .sportal-bolge ile birlikte)
     yapıda çalışır. İkisinde de padding-block zaten sportal-bolge'de. */
  .sportal-bolge-cevrit.sportal-bolge-topbar,
  .sportal-bolge-topbar {
    background: var(--sportal-bg-alt, #f7fafc);
    border-bottom: 1px solid var(--sportal-border, #e2e8f0);
    font-size: var(--sportal-small, 0.9rem);
    color: var(--sportal-text-muted, #64748b);
  }
  .sportal-bolge-cevrit.sportal-bolge-topbar > .sportal-bolge,
  .sportal-bolge-topbar {
    padding-block: var(--sportal-bosluk-2, 0.5rem);
  }

  .sportal-bolge-cevrit.sportal-bolge-header,
  .sportal-bolge-header {
    background: var(--sportal-bg, #fff);
    box-shadow: var(--sportal-shadow-sm, 0 1px 2px rgba(17, 24, 39, 0.05));
    position: relative;
    z-index: var(--sportal-z-sticky, 10);
  }
  .sportal-bolge-cevrit.sportal-bolge-header > .sportal-bolge,
  .sportal-bolge-header {
    padding-block: var(--sportal-bosluk-4, 1rem);
  }

  .sportal-bolge-cevrit.sportal-bolge-below-header,
  .sportal-bolge-below-header {
    background: var(--sportal-bg-alt, #f7fafc);
    border-block: 1px solid var(--sportal-border, #e2e8f0);
  }
  .sportal-bolge-cevrit.sportal-bolge-below-header > .sportal-bolge,
  .sportal-bolge-below-header {
    padding-block: var(--sportal-bosluk-2, 0.5rem);
  }

  .sportal-bolge-cevrit.sportal-bolge-footer-top,
  .sportal-bolge-cevrit.sportal-bolge-footer-bottom,
  .sportal-bolge-footer-top,
  .sportal-bolge-footer-bottom {
    background: var(--sportal-bg-deep, #edf0f5);
  }
  .sportal-bolge-cevrit.sportal-bolge-footer-top > .sportal-bolge,
  .sportal-bolge-cevrit.sportal-bolge-footer-bottom > .sportal-bolge,
  .sportal-bolge-footer-top,
  .sportal-bolge-footer-bottom {
    padding-block: var(--sportal-bosluk-8, 2rem);
    align-items: flex-start;
  }

  .sportal-component {
    display: inline-flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
  }

  .sportal-gorunmez {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  /* ==========================================================
     1) LOGO
     ========================================================== */
  .sportal-component-logo {
    flex-shrink: 0;
  }
  .sportal-logo__link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: opacity var(--sportal-gecis, 220ms);
  }
  .sportal-logo__link:hover { opacity: 0.82; }
  .sportal-logo__img {
    height: clamp(28px, 4vw, 40px);
    width: auto;
    display: block;
  }
  .sportal-logo__link--metin .sportal-logo__metin {
    font-family: var(--sportal-font-baslik);
    font-weight: 700;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    letter-spacing: var(--sportal-tracking-baslik, -0.015em);
    background: linear-gradient(135deg, var(--sportal-primary) 0%, var(--sportal-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ==========================================================
     2) ARAMA İKONU (flyout)
     ========================================================== */
  .sportal-component-arama-ikonu {
    position: relative;
  }
  .sportal-arama-ikonu__tetik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid transparent;
    border-radius: var(--sportal-radius, 10px);
    background: transparent;
    color: var(--sportal-text, #1a202c);
    cursor: pointer;
    transition: background var(--sportal-gecis-hizli, 120ms),
                border-color var(--sportal-gecis-hizli, 120ms),
                color var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-arama-ikonu__tetik:hover,
  .sportal-arama-ikonu__tetik:focus-visible {
    background: var(--sportal-primary-soft, rgba(84, 36, 251, 0.10));
    border-color: var(--sportal-border, #e2e8f0);
    color: var(--sportal-primary, #5424fb);
    outline: none;
  }
  .sportal-arama-ikonu__tetik[aria-expanded="true"] {
    background: var(--sportal-primary, #5424fb);
    color: var(--sportal-primary-fg, #fff);
  }

  .sportal-arama-ikonu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(420px, calc(100vw - 32px));
    background: var(--sportal-cam, rgba(255, 255, 255, 0.72));
    -webkit-backdrop-filter: blur(var(--sportal-cam-blur, 12px));
    backdrop-filter: blur(var(--sportal-cam-blur, 12px));
    border: 1px solid var(--sportal-cam-kenar, rgba(255, 255, 255, 0.55));
    border-radius: var(--sportal-radius-lg, 16px);
    box-shadow: var(--sportal-shadow-lg);
    padding: var(--sportal-bosluk-3, 0.75rem);
    z-index: var(--sportal-z-overlay, 40);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--sportal-gecis, 220ms),
                transform var(--sportal-gecis, 220ms);
  }
  .sportal-arama-ikonu__panel[hidden] { display: none; }
  .sportal-arama-ikonu--acik .sportal-arama-ikonu__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .sportal-arama-ikonu__form {
    display: flex;
    gap: var(--sportal-bosluk-2);
    align-items: center;
  }
  .sportal-arama-ikonu__input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius, 10px);
    background: var(--sportal-bg, #fff);
    color: var(--sportal-text, #1a202c);
    font-size: var(--sportal-body, 1rem);
  }
  .sportal-arama-ikonu__input:focus-visible {
    outline: 2px solid var(--sportal-primary-ring, rgba(84, 36, 251, 0.35));
    outline-offset: 1px;
    border-color: var(--sportal-primary, #5424fb);
  }
  .sportal-arama-ikonu__submit,
  .sportal-arama-ikonu__kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--sportal-radius, 10px);
    border: 1px solid var(--sportal-border, #e2e8f0);
    background: var(--sportal-bg, #fff);
    color: var(--sportal-text, #1a202c);
    cursor: pointer;
    flex-shrink: 0;
  }
  .sportal-arama-ikonu__submit:hover {
    background: var(--sportal-primary, #5424fb);
    color: var(--sportal-primary-fg, #fff);
    border-color: var(--sportal-primary, #5424fb);
  }
  .sportal-arama-ikonu__kapat:hover {
    background: var(--sportal-bg-alt, #f7fafc);
    color: var(--sportal-text, #1a202c);
  }

  /* ==========================================================
     3) ARAMA KUTUSU (inline)
     ========================================================== */
  .sportal-component-arama-kutusu {
    flex: 1 1 280px;
    max-width: 520px;
  }
  .sportal-arama-kutusu--genis { max-width: 100%; }

  .sportal-arama-kutusu__form {
    display: flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    width: 100%;
    position: relative;
    border-radius: var(--sportal-radius, 10px);
    border: 1px solid var(--sportal-border, #e2e8f0);
    background: var(--sportal-bg, #fff);
    padding: 0 0.5rem 0 2.5rem;
    transition: border-color var(--sportal-gecis-hizli, 120ms),
                box-shadow var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-arama-kutusu__form:focus-within {
    border-color: var(--sportal-primary, #5424fb);
    box-shadow: 0 0 0 3px var(--sportal-primary-ring, rgba(84, 36, 251, 0.35));
  }
  .sportal-arama-kutusu__ikon {
    position: absolute;
    left: 0.75rem;
    color: var(--sportal-text-muted, #64748b);
    display: inline-flex;
    pointer-events: none;
  }
  .sportal-arama-kutusu__input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.5625rem 0;
    font-size: var(--sportal-body, 1rem);
    color: var(--sportal-text, #1a202c);
    min-width: 0;
  }
  .sportal-arama-kutusu__input:focus-visible { outline: none; }
  .sportal-arama-kutusu__submit {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--sportal-radius-sm, 6px);
    background: var(--sportal-primary, #5424fb);
    color: var(--sportal-primary-fg, #fff);
    border: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--sportal-small, 0.9rem);
    transition: background var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-arama-kutusu__submit:hover {
    background: color-mix(in srgb, var(--sportal-primary) 88%, black);
  }

  /* varyant: cam */
  .sportal-arama-kutusu--cam .sportal-arama-kutusu__form {
    background: var(--sportal-cam, rgba(255, 255, 255, 0.72));
    -webkit-backdrop-filter: blur(var(--sportal-cam-blur, 12px));
    backdrop-filter: blur(var(--sportal-cam-blur, 12px));
    border-color: var(--sportal-cam-kenar, rgba(255, 255, 255, 0.55));
  }
  /* varyant: neon */
  .sportal-arama-kutusu--neon .sportal-arama-kutusu__form {
    border-color: var(--sportal-accent, #00d4ff);
    box-shadow: 0 0 0 1px var(--sportal-accent-soft, rgba(0, 212, 255, 0.12));
  }

  @media (max-width: 640px) {
    .sportal-arama-kutusu__submit-metin { display: none; }
    .sportal-arama-kutusu__submit::before {
      content: "";
      display: inline-block;
      width: 16px; height: 16px;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/></svg>") center/contain no-repeat;
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/></svg>") center/contain no-repeat;
    }
  }

  /* ==========================================================
     4) SOSYAL
     ========================================================== */
  .sportal-component-sosyal {
    display: inline-flex;
  }
  .sportal-sosyal__liste {
    list-style: none;
    padding: 0; margin: 0;
    display: inline-flex;
    gap: var(--sportal-bosluk-2, 0.5rem);
    flex-wrap: wrap;
  }
  .sportal-sosyal__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    width: 36px; height: 36px;
    border-radius: var(--sportal-radius, 10px);
    background: var(--sportal-bg-alt, #f7fafc);
    color: var(--sportal-text, #1a202c);
    text-decoration: none;
    transition: transform var(--sportal-gecis-hizli, 120ms),
                background var(--sportal-gecis-hizli, 120ms),
                color var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-sosyal__link:hover,
  .sportal-sosyal__link:focus-visible {
    background: var(--sportal-sosyal-marka, var(--sportal-primary));
    color: #fff;
    transform: translateY(-1px);
    outline: none;
  }

  .sportal-sosyal--icon-rounded .sportal-sosyal__link {
    border-radius: var(--sportal-radius-full, 9999px);
  }

  .sportal-sosyal--text .sportal-sosyal__link {
    width: auto;
    padding: 0.4375rem 0.75rem;
    border-radius: var(--sportal-radius, 10px);
  }
  .sportal-sosyal--text .sportal-sosyal__ad {
    font-size: var(--sportal-small, 0.9rem);
    font-weight: 500;
  }

  /* dropdown (mobil) */
  .sportal-sosyal__tetik {
    display: inline-flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius, 10px);
    background: transparent;
    color: var(--sportal-text, #1a202c);
    cursor: pointer;
  }
  .sportal-sosyal--dropdown .sportal-sosyal__liste {
    display: none;
    position: absolute;
    margin-top: 0.5rem;
    background: var(--sportal-bg, #fff);
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius-lg, 16px);
    padding: var(--sportal-bosluk-3, 0.75rem);
    box-shadow: var(--sportal-shadow-lg);
    z-index: var(--sportal-z-overlay, 40);
  }
  .sportal-sosyal--dropdown.sportal-sosyal--acik .sportal-sosyal__liste {
    display: inline-flex;
  }

  /* ==========================================================
     5) LOGIN
     ========================================================== */
  .sportal-component-login { position: relative; }

  .sportal-login--anonim .sportal-login__giris {
    display: inline-flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    padding: 0.5rem 0.875rem;
    border-radius: var(--sportal-radius, 10px);
    background: var(--sportal-primary, #5424fb);
    color: var(--sportal-primary-fg, #fff);
    font-weight: 600;
    font-size: var(--sportal-small, 0.9rem);
    text-decoration: none;
    box-shadow: var(--sportal-shadow-primary);
    transition: transform var(--sportal-gecis-hizli, 120ms),
                box-shadow var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-login--anonim .sportal-login__giris:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(84, 36, 251, 0.32);
  }
  .sportal-login__kayit {
    margin-left: var(--sportal-bosluk-2);
    font-size: var(--sportal-small);
    color: var(--sportal-text, #1a202c);
    text-decoration: none;
    padding: 0.5rem 0.5rem;
  }
  .sportal-login__kayit:hover { color: var(--sportal-primary, #5424fb); }

  .sportal-login__tetik {
    display: inline-flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius-full, 9999px);
    background: var(--sportal-bg, #fff);
    color: var(--sportal-text, #1a202c);
    cursor: pointer;
    font-size: var(--sportal-small, 0.9rem);
  }
  .sportal-login__tetik:hover {
    background: var(--sportal-bg-alt, #f7fafc);
  }
  .sportal-login__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sportal-primary, #5424fb);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
  }
  .sportal-login__ad {
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sportal-login__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--sportal-bg, #fff);
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius-lg, 16px);
    padding: 0.5rem;
    box-shadow: var(--sportal-shadow-lg);
    z-index: var(--sportal-z-overlay, 40);
  }
  .sportal-login__panel[hidden] { display: none; }
  .sportal-login__madde {
    display: flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    padding: 0.5rem 0.625rem;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: var(--sportal-radius-sm, 6px);
    color: var(--sportal-text, #1a202c);
    text-decoration: none;
    text-align: left;
    font-size: var(--sportal-small, 0.9rem);
    cursor: pointer;
  }
  .sportal-login__madde:hover {
    background: var(--sportal-primary-soft, rgba(84, 36, 251, 0.10));
    color: var(--sportal-primary, #5424fb);
  }
  .sportal-login__madde--cikis { color: #e53935; }
  .sportal-login__madde--cikis:hover {
    background: rgba(229, 57, 53, 0.10);
    color: #c62828;
  }
  .sportal-login__ayirac {
    border: 0;
    border-top: 1px solid var(--sportal-border, #e2e8f0);
    margin: 0.25rem 0;
  }
  .sportal-login__form { margin: 0; }

  @media (max-width: 640px) {
    .sportal-login__ad { display: none; }
  }

  /* ==========================================================
     6) DARK TOGGLE
     ========================================================== */
  .sportal-dark-toggle--segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--sportal-radius-full, 9999px);
    background: var(--sportal-bg-alt, #f7fafc);
    border: 1px solid var(--sportal-border, #e2e8f0);
    gap: 0;
  }
  .sportal-dark-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 30px;
    border: 0;
    border-radius: var(--sportal-radius-full, 9999px);
    background: transparent;
    color: var(--sportal-text-muted, #64748b);
    cursor: pointer;
    transition: background var(--sportal-gecis-hizli, 120ms),
                color var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-dark-toggle__btn:hover {
    color: var(--sportal-primary, #5424fb);
  }
  .sportal-dark-toggle__btn[aria-pressed="true"] {
    background: var(--sportal-bg, #fff);
    color: var(--sportal-primary, #5424fb);
    box-shadow: var(--sportal-shadow-sm);
  }

  .sportal-dark-toggle--icon .sportal-dark-toggle__btn--dongu {
    width: 40px; height: 40px;
    border-radius: var(--sportal-radius, 10px);
    border: 1px solid var(--sportal-border, #e2e8f0);
  }

  .sportal-dark-toggle--dropdown { position: relative; }
  .sportal-dark-toggle__tetik {
    display: inline-flex;
    align-items: center;
    gap: var(--sportal-bosluk-2);
    padding: 0.4375rem 0.75rem;
    border-radius: var(--sportal-radius, 10px);
    border: 1px solid var(--sportal-border, #e2e8f0);
    background: var(--sportal-bg, #fff);
    color: var(--sportal-text, #1a202c);
    cursor: pointer;
    font-size: var(--sportal-small, 0.9rem);
  }
  .sportal-dark-toggle__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--sportal-bg, #fff);
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius-lg, 16px);
    padding: 0.375rem;
    box-shadow: var(--sportal-shadow-lg);
    z-index: var(--sportal-z-overlay, 40);
  }
  .sportal-dark-toggle__panel[hidden] { display: none; }
  .sportal-dark-toggle__secenek {
    display: flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: transparent;
    color: var(--sportal-text, #1a202c);
    border-radius: var(--sportal-radius-sm, 6px);
    cursor: pointer;
    text-align: left;
    font-size: var(--sportal-small);
  }
  .sportal-dark-toggle__secenek:hover {
    background: var(--sportal-primary-soft, rgba(84, 36, 251, 0.10));
    color: var(--sportal-primary, #5424fb);
  }

  /* ==========================================================
     7) BREAKING TICKER
     ========================================================== */
  .sportal-component-breaking-ticker {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    border-radius: var(--sportal-radius, 10px);
    overflow: hidden;
    background: var(--sportal-bg-alt, #f7fafc);
    border: 1px solid var(--sportal-border, #e2e8f0);
  }

  .sportal-breaking-ticker__etiket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4375rem 0.875rem;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .sportal-breaking-ticker--primary .sportal-breaking-ticker__etiket {
    background: var(--sportal-primary, #5424fb);
  }
  .sportal-breaking-ticker--neon .sportal-breaking-ticker__etiket {
    background: var(--sportal-accent, #00d4ff);
    color: var(--sportal-accent-fg, #0b2d47);
  }

  .sportal-breaking-ticker__nokta {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    animation: sportal-breaking-pulse 1.4s ease-in-out infinite;
  }
  /* @keyframes sportal-breaking-pulse — scope dışına taşındı (native nesting ile @keyframes uyumsuz) */

  .sportal-breaking-ticker__ray {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 0 0.875rem;
  }
  .sportal-breaking-ticker__liste {
    list-style: none;
    padding: 0; margin: 0;
    position: relative;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  .sportal-breaking-ticker__ogr {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
  }
  .sportal-breaking-ticker__ogr--aktif {
    opacity: 1;
    pointer-events: auto;
  }
  /* CSS-only fallback: JS yoksa ilk item görünür kalır */
  .sportal-no-js .sportal-breaking-ticker__ogr { position: static; opacity: 1; }

  .sportal-breaking-ticker__link {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sportal-text, #1a202c);
    font-weight: 500;
    font-size: var(--sportal-small, 0.9rem);
    text-decoration: none;
    padding: 0.25rem 0;
  }
  .sportal-breaking-ticker__link:hover { color: var(--sportal-primary, #5424fb); }

  .sportal-breaking-ticker__kontrol {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    flex-shrink: 0;
  }
  .sportal-breaking-ticker__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border: 0;
    background: transparent;
    color: var(--sportal-text-muted, #64748b);
    cursor: pointer;
    border-radius: var(--sportal-radius-sm, 6px);
  }
  .sportal-breaking-ticker__btn:hover {
    background: var(--sportal-bg, #fff);
    color: var(--sportal-primary, #5424fb);
  }

  /* ==========================================================
     8) TARIH
     ========================================================== */
  .sportal-component-tarih {
    color: var(--sportal-text-muted, #64748b);
    font-size: var(--sportal-small, 0.9rem);
    font-weight: 500;
  }
  .sportal-tarih__ikon {
    opacity: 0.75;
  }
  .sportal-tarih__metin {
    font-variant-numeric: tabular-nums;
  }
  .sportal-tarih--iso .sportal-tarih__metin {
    font-family: var(--sportal-font-kod);
  }

  /* ==========================================================
     9) KATEGORİ MEGA MENÜ
     ========================================================== */
  .sportal-component-kategori-mega {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hamburger — desktop'ta gizli, @media (max-width: 960px) altında flex
     Jannah klasiği 3-çubuk + açıkken X dönüşümü */
  .sportal-mega__hamburger {
    display: none;                       /* desktop default */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius, 10px);
    background: transparent;
    color: var(--sportal-text, #1a202c);
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--sportal-gecis-hizli, 120ms),
                border-color var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-mega__hamburger:hover,
  .sportal-mega__hamburger:focus-visible {
    background: var(--sportal-primary-soft, rgba(84, 36, 251, 0.08));
    border-color: var(--sportal-primary-ring, rgba(84, 36, 251, 0.25));
    outline: none;
  }
  .sportal-mega__hamburger-cubuk {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--sportal-gecis, 220ms) var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1)),
                opacity var(--sportal-gecis-hizli, 120ms);
    transform-origin: center;
  }
  /* Açıkken X dönüşümü */
  .sportal-mega__hamburger[aria-expanded="true"] .sportal-mega__hamburger-cubuk:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .sportal-mega__hamburger[aria-expanded="true"] .sportal-mega__hamburger-cubuk:nth-child(2) {
    opacity: 0;
  }
  .sportal-mega__hamburger[aria-expanded="true"] .sportal-mega__hamburger-cubuk:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .sportal-mega__ust-liste {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    gap: var(--sportal-bosluk-2, 0.5rem);
    flex-wrap: wrap;
  }
  .sportal-mega__ust-ogr {
    position: relative;
  }
  .sportal-mega__ust-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.625rem 0.875rem;
    color: var(--sportal-text, #1a202c);
    font-weight: 600;
    font-size: var(--sportal-small, 0.9rem);
    text-decoration: none;
    border-radius: var(--sportal-radius, 10px);
    transition: background var(--sportal-gecis-hizli, 120ms),
                color var(--sportal-gecis-hizli, 120ms);
    border-bottom: 2px solid transparent;
  }
  .sportal-mega__ust-link:hover,
  .sportal-mega__ust-link:focus-visible,
  .sportal-mega__ust-link[aria-expanded="true"] {
    color: var(--sportal-kat-renk, var(--sportal-primary, #5424fb));
    border-bottom-color: var(--sportal-kat-renk, var(--sportal-primary, #5424fb));
    outline: none;
  }
  .sportal-mega__ok {
    transition: transform var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-mega__ust-link[aria-expanded="true"] .sportal-mega__ok {
    transform: rotate(180deg);
  }

  .sportal-mega__panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: clamp(480px, 60vw, 900px);
    background: var(--sportal-bg, #fff);
    border: 1px solid var(--sportal-border, #e2e8f0);
    border-radius: var(--sportal-radius-lg, 16px);
    box-shadow: var(--sportal-shadow-lg);
    margin-top: 8px;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    z-index: var(--sportal-z-overlay, 40);
    transition: opacity var(--sportal-gecis, 220ms) var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1)),
                transform var(--sportal-gecis, 220ms) var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1));
  }
  .sportal-mega__panel[hidden] { display: none; }
  .sportal-mega__ust-ogr--acik .sportal-mega__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .sportal-mega__panel-ic {
    display: grid;
    gap: var(--sportal-bosluk-6, 1.5rem);
    padding: var(--sportal-bosluk-6, 1.5rem);
  }
  .sportal-mega__panel-ic--kolon-2 { grid-template-columns: 1fr 1fr; }
  .sportal-mega__panel-ic--kolon-3 { grid-template-columns: 0.9fr 1fr 1fr; }
  .sportal-mega__panel-ic--kolon-4 { grid-template-columns: 0.9fr 1fr 1fr 1fr; }

  .sportal-mega__kolon-baslik {
    font-family: var(--sportal-font-baslik);
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--sportal-bosluk-3, 0.75rem) 0;
    color: var(--sportal-kat-renk, var(--sportal-text, #1a202c));
  }
  .sportal-mega__kolon-baslik a { color: inherit; text-decoration: none; }
  .sportal-mega__alt-liste {
    list-style: none;
    padding: 0; margin: 0 0 var(--sportal-bosluk-3) 0;
    display: grid;
    gap: 0.25rem;
  }
  .sportal-mega__alt-link {
    display: block;
    padding: 0.375rem 0;
    color: var(--sportal-text-muted, #64748b);
    font-size: var(--sportal-small, 0.9rem);
    text-decoration: none;
  }
  .sportal-mega__alt-link:hover {
    color: var(--sportal-kat-renk, var(--sportal-primary, #5424fb));
  }
  .sportal-mega__tumu {
    display: inline-block;
    margin-top: var(--sportal-bosluk-2);
    color: var(--sportal-kat-renk, var(--sportal-primary, #5424fb));
    font-weight: 600;
    font-size: var(--sportal-small);
    text-decoration: none;
  }
  .sportal-mega__bos {
    font-size: var(--sportal-small);
    color: var(--sportal-text-muted);
  }

  .sportal-mega__yazi-liste {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    gap: var(--sportal-bosluk-3, 0.75rem);
  }
  .sportal-mega__yazi-link {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--sportal-bosluk-3, 0.75rem);
    align-items: start;
    color: var(--sportal-text, #1a202c);
    text-decoration: none;
  }
  .sportal-mega__yazi-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--sportal-radius-sm, 6px);
    background: var(--sportal-bg-alt);
  }
  .sportal-mega__yazi-baslik {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sportal-mega__yazi-link:hover .sportal-mega__yazi-baslik {
    color: var(--sportal-kat-renk, var(--sportal-primary, #5424fb));
  }
  .sportal-mega__yazi--buyuk .sportal-mega__yazi-link {
    grid-template-columns: 1fr;
  }
  .sportal-mega__yazi--buyuk .sportal-mega__yazi-thumb img {
    aspect-ratio: 16 / 10;
  }
  .sportal-mega__yazi--buyuk .sportal-mega__yazi-baslik {
    font-size: 1rem;
    -webkit-line-clamp: 2;
  }

  /* Mobile: mega menü drawer + accordion
     (P0-3 fix 2026-04-21 Sunai — drawer default kapalı, hamburger açar) */
  @media (max-width: 960px) {
    /* Hamburger butonu görünür yap */
    .sportal-mega__hamburger {
      display: inline-flex;
    }

    /* <ul> drawer: default kapalı (max-height 0 + opacity 0),
       hamburger açıldığında --acik sınıfı ile açılır.
       CSS-only slide animasyonu — JS sadece class toggle eder. */
    .sportal-mega__ust-liste {
      display: flex;
      flex-direction: column;
      gap: 0;
      /* Drawer: flex-basis 100% ile bir sonraki satıra sarkar */
      flex-basis: 100%;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: max-height 280ms var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1)),
                  opacity 200ms var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1)),
                  visibility 0s linear 280ms;
      border-top: 1px solid var(--sportal-border, #e2e8f0);
      margin-top: var(--sportal-bosluk-2, 0.5rem);
    }
    .sportal-mega__ust-liste--acik {
      /* Practical cap: viewport minus header + topbar ≈ %70vh */
      max-height: 70vh;
      overflow-y: auto;
      opacity: 1;
      visibility: visible;
      transition: max-height 320ms var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1)),
                  opacity 240ms var(--sportal-ease-smooth, cubic-bezier(.16, 1, .3, 1)),
                  visibility 0s linear 0s;
    }

    /* Ana kategori linkleri: tam genişlik row */
    .sportal-mega__ust-ogr {
      width: 100%;
      border-bottom: 1px solid var(--sportal-border, #e2e8f0);
    }
    .sportal-mega__ust-ogr:last-child {
      border-bottom: 0;
    }
    .sportal-mega__ust-link {
      width: 100%;
      justify-content: space-between;
      padding: 0.875rem 0.75rem;
      border-bottom: 0;
      border-radius: 0;
    }

    /* Accordion panel */
    .sportal-mega__panel {
      position: static;
      width: auto;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      margin-top: 0;
      transform: none;
      opacity: 1;
      transition: none;
      background: var(--sportal-bg-alt, #f7fafc);
    }
    .sportal-mega__panel[hidden] { display: none; }
    .sportal-mega__ust-ogr--acik .sportal-mega__panel { pointer-events: auto; }
    .sportal-mega__panel-ic {
      grid-template-columns: 1fr !important;
      padding: var(--sportal-bosluk-3, 0.75rem);
    }
  }

  /* Reduced motion — drawer transition'ı kapat, anında göster/gizle */
  @media (prefers-reduced-motion: reduce) {
    .sportal-mega__ust-liste,
    .sportal-mega__ust-liste--acik,
    .sportal-mega__hamburger-cubuk {
      transition: none !important;
    }
  }

  /* ==========================================================
     10) METIN BUTON (CTA)
     ========================================================== */
  .sportal-component-metin-buton {
    display: inline-flex;
  }
  .sportal-metin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sportal-bosluk-2, 0.5rem);
    padding: 0.5rem 0.875rem;
    border-radius: var(--sportal-radius, 10px);
    font-weight: 600;
    font-size: var(--sportal-small, 0.9rem);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--sportal-gecis-hizli, 120ms),
                background var(--sportal-gecis-hizli, 120ms),
                border-color var(--sportal-gecis-hizli, 120ms),
                color var(--sportal-gecis-hizli, 120ms),
                box-shadow var(--sportal-gecis-hizli, 120ms);
    border: 1px solid transparent;
    line-height: 1.2;
  }
  .sportal-metin-btn:hover { transform: translateY(-1px); }

  .sportal-metin-btn--primary {
    background: var(--sportal-primary, #5424fb);
    color: var(--sportal-primary-fg, #fff);
    box-shadow: var(--sportal-shadow-primary);
  }
  .sportal-metin-btn--primary:hover {
    background: color-mix(in srgb, var(--sportal-primary) 88%, black);
  }
  .sportal-metin-btn--accent {
    background: var(--sportal-accent, #00d4ff);
    color: var(--sportal-accent-fg, #0b2d47);
  }
  .sportal-metin-btn--secondary {
    background: var(--sportal-bg-alt, #f7fafc);
    color: var(--sportal-text, #1a202c);
    border-color: var(--sportal-border, #e2e8f0);
  }
  .sportal-metin-btn--secondary:hover {
    background: var(--sportal-primary-soft);
    border-color: var(--sportal-primary-ring);
    color: var(--sportal-primary);
  }
  .sportal-metin-btn--outline {
    background: transparent;
    color: var(--sportal-primary, #5424fb);
    border-color: var(--sportal-primary, #5424fb);
  }
  .sportal-metin-btn--outline:hover {
    background: var(--sportal-primary, #5424fb);
    color: var(--sportal-primary-fg, #fff);
  }
  .sportal-metin-btn--ghost {
    background: transparent;
    color: var(--sportal-text, #1a202c);
  }
  .sportal-metin-btn--ghost:hover {
    background: var(--sportal-primary-soft, rgba(84, 36, 251, 0.10));
    color: var(--sportal-primary);
  }
  .sportal-metin-btn--link {
    background: transparent;
    color: var(--sportal-primary, #5424fb);
    padding-inline: 0;
    border-radius: 0;
  }
  .sportal-metin-btn--link:hover {
    text-decoration: underline;
    transform: none;
  }

  .sportal-metin-btn__ikon--arka {
    transition: transform var(--sportal-gecis-hizli, 120ms);
  }
  .sportal-metin-btn:hover .sportal-metin-btn__ikon--arka {
    transform: translateX(3px);
  }

  /* ==========================================================
     Footer özel davranışları
     ========================================================== */
  .sportal-bolge-footer-bottom,
  .sportal-bolge-footer-top {
    color: var(--sportal-text-muted, #64748b);
  }
  .sportal-bolge-footer-top .sportal-component-logo .sportal-logo__img,
  .sportal-bolge-footer-bottom .sportal-component-logo .sportal-logo__img {
    height: clamp(22px, 3vw, 32px);
  }
  .sportal-bolge-footer-top .sportal-component,
  .sportal-bolge-footer-bottom .sportal-component {
    flex-wrap: wrap;
  }

  /* ==========================================================
     Dark tema override'ları (sportal-tokens.css @layer zaten dark
     token'ı veriyor; burada explicit ince ayar)
     ========================================================== */
  :root[data-theme="dark"] .sportal-login__avatar {
    background: var(--sportal-primary, #7c55ff);
  }
  :root[data-theme="dark"] .sportal-sosyal__link {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sportal-text, #e8e8ec);
  }
  :root[data-theme="dark"] .sportal-dark-toggle--segmented {
    background: rgba(255, 255, 255, 0.04);
  }
  :root[data-theme="dark"] .sportal-bolge-cevrit.sportal-bolge-topbar,
  :root[data-theme="dark"] .sportal-bolge-topbar,
  :root[data-theme="dark"] .sportal-bolge-cevrit.sportal-bolge-below-header,
  :root[data-theme="dark"] .sportal-bolge-below-header,
  :root[data-theme="dark"] .sportal-bolge-cevrit.sportal-bolge-footer-top,
  :root[data-theme="dark"] .sportal-bolge-footer-top,
  :root[data-theme="dark"] .sportal-bolge-cevrit.sportal-bolge-footer-bottom,
  :root[data-theme="dark"] .sportal-bolge-footer-bottom {
    background: var(--sportal-bg-alt, #12121a);
    border-color: var(--sportal-border, rgba(255, 255, 255, 0.10));
  }
  :root[data-theme="dark"] .sportal-bolge-cevrit.sportal-bolge-header,
  :root[data-theme="dark"] .sportal-bolge-header {
    background: var(--sportal-bg, #0a0a0f);
    border-bottom: 1px solid var(--sportal-border);
  }

  /* ==========================================================
     Reduced motion — animasyonları sıfırla
     ========================================================== */
  @media (prefers-reduced-motion: reduce) {
    .sportal-breaking-ticker__nokta { animation: none !important; }
    .sportal-breaking-ticker__ogr { transition: none !important; }
    .sportal-mega__panel { transition: none !important; }
    .sportal-metin-btn__ikon--arka { transition: none !important; }
    .sportal-metin-btn:hover { transform: none !important; }
    .sportal-login--anonim .sportal-login__giris:hover { transform: none !important; }
  }

} /* /body[data-sportal="aktif"] */

/* @keyframes scope dışına taşındı — native nesting @keyframes uyumsuz.
   Layer içinde global tanımlı; animation: sportal-breaking-pulse çağrısı
   body[data-sportal="aktif"] .sportal-breaking-ticker__nokta içinde var. */
@keyframes sportal-breaking-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

} /* /@layer sportal-components */

/* ==========================================================
   CONTAINER MERKEZLEME OVERRIDE (2026-04-21 Sezai hotfix)
   ----------------------------------------------------------
   Native CSS nesting içinde `margin-inline: auto` bazı Chromium
   sürümlerinde layer cascade'de uygulanmıyor (computed 0/0).
   @layer DIŞINDA explicit override — kural ZORUNLU, specificity
   yüksek, tarayıcı garanti resolve eder.
   ========================================================== */
body[data-sportal="aktif"] .sportal-bolge {
  margin-left: auto !important;
  margin-right: auto !important;
}