/* ============================================================================
   WIDGET COMPAT PATCH (widget-compat.css)
   ============================================================================
   Amaç: app.min.css derlemesi, şablonlarda kullanılan bazı Tailwind sınıflarını
   içermiyor (derleme dosya seti eksik/tarihi geçmiş). Bu dosya YALNIZCA eksik
   sınıfları additive (üzerine yazmadan) tanımlar; mevcut kuralları asla
   ezmez. Stitcher.php tarafından app.min.css'ten HEMEN SONRA yüklenir.

   Uzun vadeli çözüm: Tailwind derlemesi (v3.4.17) app/components/**/views/**
   şablonlarını content kaynağı olarak tarayacak şekilde yeniden çalıştırılıp
   app.min.css yeniden üretilmelidir; bu dosya o zamana kadar köprüdür.

   Eklenen sınıflar (kaynak şablon parantez içinde):
   - self-stretch            (article_hero — yan kart görsel kabı)
   - md:gap-5, md:mb-5       (grid/magazine/masonry/carousel)
   - p-3.5                   (author kart)
   - sm:text-xl, sm:-left-3.5, sm:-right-3.5  (author widget)
   - ring-2, ring-slate-100  (author avatar)
   - border-slate-200/80, bg-white/95         (author kart/oklar)
   - group/item + group-hover/item:* varyantları (author kart)
   - bg-brand-primary/10, /60, text-brand-primary/20,
     hover:bg-brand-primary/5                  (weather/economy/ticker/numbered)
   - bg-brand-50, border-brand-500/30          (article_ticker, info_ticker)
   - group-hover:text-brand-300                (interview_slider)
   - min-h-[40px], md:min-h-[48px], md:gap-2, md:px-4, md:text-[12px],
     md:tracking-widest, md:w-2, md:h-2        (ticker)
   - min-h-[250px]                             (article_slider, slider_v2)
   - min-h-[440px], md:min-h-[500px], md:flex-1 (interview_slider)
   - md:text-[11px], md:text-xs, max-w-[220px] (slider_v2 kicker/kategori)
   - bg-slate-950/80                           (slider_v2 önceki/sonraki)
   - bg-rose-700, bg-amber-700, bg-emerald-900, bg-indigo-950 (slider_v2 canlı)

   Marka renkleri --brand-primary / --brand-secondary CSS değişkenlerinden
   okunur (Stitcher.php tenant temasını enjekte eder). Opaklık karışımı için
   color-mix() kullanılır; desteklenmeyen tarayıcılarda yumuşak yedek renk.
   ========================================================================== */

/* ---- Yerleşim / aralık ---------------------------------------------------- */
.self-stretch{align-self:stretch}
.p-3\.5{padding:.875rem}
.min-h-\[40px\]{min-height:40px}
.min-h-\[250px\]{min-height:250px}
.min-h-\[440px\]{min-height:440px}
.max-w-\[220px\]{max-width:220px}

@media (min-width:640px){
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:-left-3\.5{left:-.875rem}
  .sm\:-right-3\.5{right:-.875rem}
}

@media (min-width:768px){
  .md\:gap-5{gap:1.25rem}
  .md\:mb-5{margin-bottom:1.25rem}
  .md\:gap-2{gap:.5rem}
  .md\:px-4{padding-left:1rem;padding-right:1rem}
  .md\:w-2{width:.5rem}
  .md\:h-2{height:.5rem}
  .md\:flex-1{flex:1 1 0%}
  .md\:text-xs{font-size:.75rem;line-height:1rem}
  .md\:tracking-widest{letter-spacing:.1em}
  .md\:text-\[12px\]{font-size:12px;line-height:1.35rem}
  .md\:text-\[11px\]{font-size:11px;line-height:1.2rem}
  .md\:min-h-\[48px\]{min-height:48px}
  .md\:min-h-\[500px\]{min-height:500px}
}

/* ---- Ring (Tailwind v3.4 derleme çıktısıyle birebir aynı desen) ---------- */
.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentColor);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.ring-slate-100{--tw-ring-opacity:1;--tw-ring-color:rgb(241 245 249/var(--tw-ring-opacity,1))}
.group\/item:hover .group-hover\/item\:ring-brand-primary\/40{--tw-ring-color:rgba(100,116,139,.4);--tw-ring-color:color-mix(in srgb,var(--brand-primary) 40%,transparent)}
.group\/item:hover .group-hover\/item\:text-brand-primary{color:var(--brand-primary)}
.group:hover .group-hover\:text-brand-300{color:var(--brand-primary);color:color-mix(in srgb,var(--brand-primary) 65%,#fff)}

/* ---- Slate / beyaz opaklık ------------------------------------------------ */
.bg-slate-950\/80{background-color:rgba(2,6,23,.8)}
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.border-slate-200\/80{border-color:rgba(226,232,240,.8)}

/* ---- Sabit renkler (Tailwind v3.4 palette değerleri) ---------------------- */
.bg-rose-700{background-color:#be123c}
.bg-amber-700{background-color:#b45309}
.bg-emerald-900{background-color:#064e3b}
.bg-indigo-950{background-color:#1e1b4b}

/* ---- Marka renk opaklıkları (CSS değişkeni + color-mix yedekli) ---------- */
.bg-brand-primary\/10{background-color:rgba(148,163,184,.1);background-color:color-mix(in srgb,var(--brand-primary) 10%,transparent)}
.bg-brand-primary\/60{background-color:rgba(100,116,139,.6);background-color:color-mix(in srgb,var(--brand-primary) 60%,transparent)}
.text-brand-primary\/20{color:rgba(148,163,184,.2);color:color-mix(in srgb,var(--brand-primary) 20%,transparent)}
.hover\:bg-brand-primary\/5:hover{background-color:rgba(148,163,184,.05);background-color:color-mix(in srgb,var(--brand-primary) 5%,transparent)}
.bg-brand-50{background-color:#f8fafc;background-color:color-mix(in srgb,var(--brand-primary) 4%,#fff)}
.border-brand-500\/30{border-color:rgba(100,116,139,.3);border-color:color-mix(in srgb,var(--brand-primary) 30%,transparent)}

/* ============================================================================
   WIDGET İÇİ PADDING ARTIŞI (kullanıcı talebi)
   ============================================================================
   Widget ARASI boşluk gap-6 (24px mobil) / gap-8 (32px masaüstü) seviyesine
   çıkarıldı; widgetların KENDİ İÇLERİNDEKİ nefes alanı da aynı oranda artırılır.
   Kapsam yalnızca widget sarmalayıcılarıdır ([class*="ha-w-"]); sayfanın
   header/footer/makale detayı gibi alanları bu kurallardan etkilenmez.
   Spesifiklik (0,2,0) > tekil Tailwind yardımcı sınıfları (0,1,0) olduğundan
   kural güvenle uygulanır; yan etkisi olabilecek inline stil kullanılmaz.
   ========================================================================== */
/* Widget başlık şeridi: pl-3 (12px) → 16px; başlık-altı boşluk mb-4/mb-5 → 24px */
[class*="ha-w-"] > .border-l-4{padding-left:1rem;margin-bottom:1.5rem}
/* Kart metin alanları: p-4 (16px) → 20px */
[class*="ha-w-"] .p-4{padding:1.25rem}
/* Masaüstünde kart metin alanları: 24px (lg:p-5'i de kapsar) */
@media (min-width:1024px){
  [class*="ha-w-"] .p-4{padding:1.5rem}
}

/* ============================================================================
   KAYAN YAZI (SON DAKİKA BANDI) v2 — eksik sınıf köprüsü
   =========================================================================
   Kaynak: Widgets/Content/views/parts/article_ticker.php (app + yonetimapp).
   app.min.css derlemesinde bulunmayan stil varyantı sınıfları additive olarak
   tanımlanır (mevcut kurallar ezilmez). Marka renkleri --brand-primary /
   --brand-secondary değişkenlerinden color-mix ile türetilir.
   ========================================================================== */
/* Zaman çipi: klasik (koyu zemin) */
.bg-slate-950\/85{background-color:rgba(2,6,23,.85)}
/* Zaman çipi: modern (marka tonu) — bg-brand-primary/10 zaten yukarıda */
/* Duraklat düğmesi: klasik varyant */
.bg-white\/70{background-color:rgba(255,255,255,.7)}
.border-brand-500\/20{border-color:rgba(100,116,139,.2);border-color:color-mix(in srgb,var(--brand-primary) 20%,transparent)}
/* Nokta ayırıcılar: modern (marka 50) ve koyu (kırmızı 80) */
.bg-brand-primary\/50{background-color:rgba(148,163,184,.5);background-color:color-mix(in srgb,var(--brand-primary) 50%,transparent)}
.bg-red-500\/80{background-color:rgba(239,68,68,.8)}
/* Modern varyant: etiket gradyanı + kutu köşesi + kenarlık */
.to-brand-secondary{--tw-gradient-to:var(--brand-secondary)}
.md\:rounded-lg{border-radius:0.5rem}
@media (min-width:768px){.md\:rounded-lg{border-radius:0.5rem}}
.border-slate-200\/90{border-color:rgba(226,232,240,.9)}
/* Bant etiketi: masaüstü punto (md:text-xs) */
@media (min-width:768px){.md\:text-xs{font-size:0.75rem;line-height:1rem}}

/* ============================================================================
   GLOBAL HEADER & TOP BAR STYLES (Zero TBT, FCP & CLS Optimization)
   ============================================================================ */
.desktop-main-menu { scrollbar-width: none; -ms-overflow-style: none; }
.desktop-main-menu::-webkit-scrollbar { display: none; }
.desktop-main-menu > li > a {
    color: var(--menu-text, #0f172a) !important;
    font-size: 16px !important;
    font-family: var(--menu-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.desktop-main-menu > li > a:hover,
.desktop-main-menu > li:hover > a {
    color: var(--menu-active-color, var(--brand-primary, #991b1b)) !important;
    opacity: 1 !important;
}
.desktop-main-menu > li > a:hover span,
.desktop-main-menu > li:hover > a span,
.desktop-main-menu > li > a:hover svg,
.desktop-main-menu > li:hover > a svg {
    color: var(--menu-active-color, var(--brand-primary, #991b1b)) !important;
}
.desktop-main-menu > li > a.is-active,
.desktop-main-menu > li > a.menu-accent-item {
    color: var(--menu-active-color, #991b1b) !important;
}

/* Menü Font Ailesi Seçenekleri (Sıfır Harici İstek, Sıfır Gecikme) */
.desktop-main-menu.menu-font-system > li > a,
.menu-font-system > li > a {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.desktop-main-menu.menu-font-segoe > li > a,
.menu-font-segoe > li > a {
    font-family: "Segoe UI", "Trebuchet MS", Roboto, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.desktop-main-menu.menu-font-geometric > li > a,
.menu-font-geometric > li > a {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}
.desktop-main-menu.menu-font-arial > li > a,
.menu-font-arial > li > a {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}
.desktop-main-menu.menu-font-serif > li > a,
.menu-font-serif > li > a {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}
.desktop-main-menu.menu-font-condensed > li > a,
.menu-font-condensed > li > a {
    font-family: "Arial Narrow", Arial, "Helvetica Condensed", "Nimbus Sans L", sans-serif-condensed, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Menü Harf Dönüşümü */
.desktop-main-menu.menu-transform-uppercase > li > a,
.menu-transform-uppercase > li > a { text-transform: uppercase !important; }
.desktop-main-menu.menu-transform-none > li > a,
.menu-transform-none > li > a { text-transform: none !important; }
.desktop-main-menu.menu-transform-capitalize > li > a,
.menu-transform-capitalize > li > a { text-transform: capitalize !important; }

/* Menü Çizgi Efekti */
.menu-style-underline > li > a { position: relative; }
.menu-style-underline > li > a::after {
    content: ""; position: absolute; bottom: 0; left: 10px; right: 10px; height: 3px;
    background-color: var(--menu-active-color, var(--brand-primary, #0284c7)); opacity: 0; transition: opacity 0.2s ease;
}
.menu-style-underline > li > a:hover {
    color: var(--menu-active-color, var(--brand-primary, #0284c7)) !important;
}
.menu-style-underline > li > a.is-active::after,
.menu-style-underline > li > a:hover::after { opacity: 1; }

/* Menü Stili: Çift Çerçeve (Kullanıcının Görselindeki Tasarım) */
.menu-style-double_border {
    border-top: 1px solid var(--menu-border-color, #1e293b);
    border-bottom: 2px solid var(--menu-border-color, #1e293b);
}
.menu-style-double_border > li > a {
    position: relative;
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.menu-style-double_border > li > a.is-active,
.menu-style-double_border > li > a.is-active span {
    color: var(--menu-active-color, #991b1b) !important;
}
.menu-style-double_border > li > a:hover,
.menu-style-double_border > li > a:hover span {
    color: var(--menu-active-color, #991b1b) !important;
}
.menu-style-double_border > li > a.is-active::after,
.menu-style-double_border > li > a:hover::after {
    content: ""; position: absolute; bottom: 0; left: 12px; right: 12px; height: 3px;
    background-color: var(--menu-active-color, #991b1b);
}
.menu-style-double_border > li > a.menu-accent-item {
    color: var(--menu-active-color, #991b1b) !important;
    font-weight: 900 !important;
}

/* Menü Stili: Noktalı / Editoryal Ayraçlı (Dot Separated) */
.menu-style-dot_separated,
.menu-style-double_border_center {
    border-top: none;
    border-bottom: none;
}
.menu-style-dot_separated > li,
.menu-style-double_border_center > li {
    display: inline-flex;
    align-items: center;
}
.menu-style-dot_separated > li > a,
.menu-style-double_border_center > li > a {
    position: relative;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.menu-style-dot_separated > li:not(:last-child)::after,
.menu-style-double_border_center > li:not(:last-child)::after {
    content: "·";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    margin-left: 4px;
    margin-right: 4px;
    opacity: 0.35;
    color: var(--menu-text, currentColor);
    pointer-events: none;
}
.menu-style-dot_separated > li > a.is-active,
.menu-style-dot_separated > li > a:hover,
.menu-style-double_border_center > li > a.is-active,
.menu-style-double_border_center > li > a:hover {
    color: var(--menu-active-color, #991b1b) !important;
}
.menu-style-dot_separated > li > a.menu-accent-item,
.menu-style-double_border_center > li > a.menu-accent-item {
    color: var(--menu-active-color, #991b1b) !important;
    font-weight: 900 !important;
}

/* Menü Stili: Vurgulu Rozet (Accent Badge) */
.menu-style-accent_badge > li > a:hover {
    color: var(--menu-active-color, #dc2626) !important;
}
.menu-style-accent_badge > li > a.menu-accent-item {
    background-color: color-mix(in srgb, var(--menu-active-color, #dc2626) 12%, transparent);
    color: var(--menu-active-color, #dc2626) !important;
    border-radius: 9999px;
    padding: 4px 12px !important;
}

/* Menü Hizalama Seçenekleri */
.desktop-main-menu {
    width: 100% !important;
}
.desktop-main-menu.menu-align-left,
.menu-align-left {
    justify-content: flex-start !important;
}
.desktop-main-menu.menu-align-center,
.menu-align-center {
    justify-content: center !important;
    text-align: center !important;
}
.desktop-main-menu.menu-align-right,
.menu-align-right {
    justify-content: flex-end !important;
    padding-right: 48px !important;
}

/* Menü Hap (Pill) Efekti */
.menu-style-pills > li > a {
    padding: 5px 12px !important; border-radius: 9999px; margin: 4px 2px;
}
.menu-style-pills > li > a.is-active,
.menu-style-pills > li > a:hover {
    background-color: color-mix(in srgb, var(--menu-active-color, var(--brand-primary, #0284c7)) 12%, transparent);
    color: var(--menu-active-color, var(--brand-primary, #0284c7)) !important;
}

/* Menü Kutulu Efekti */
.menu-style-bordered > li {
    border-right: 1px solid var(--menu-border-color, rgba(0,0,0,0.07));
}
.menu-style-bordered > li:last-child { border-right: none; }
.menu-style-bordered > li > a.is-active,
.menu-style-bordered > li > a:hover {
    color: var(--menu-active-color, var(--brand-primary, #0284c7)) !important;
}

/* Alt Açılır Menü (Dropdown) Hover */
.desktop-main-menu li ul li a:hover {
    color: var(--menu-active-color, var(--brand-primary, #0284c7)) !important;
    background-color: color-mix(in srgb, var(--menu-active-color, var(--brand-primary, #0284c7)) 8%, transparent) !important;
}

/* Top Bar Renk ve Tema Desteği */
.ha-topbar {
    background-color: var(--topbar-bg, #f8fafc) !important;
    color: var(--topbar-text, #334155) !important;
    border-color: var(--topbar-border, #e2e8f0) !important;
}
.ha-topbar span,
.ha-topbar a,
.ha-topbar .font-bold,
.ha-topbar .font-mono,
.ha-topbar .text-slate-800,
.ha-topbar .text-slate-700,
.ha-topbar .text-slate-600,
.ha-topbar .text-slate-500 {
    color: var(--topbar-text, #334155);
}

#mobileDrawerMenuWrap a,
.mobile-scroll-nav a {
    font-family: var(--menu-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* Top Bar Marquee / Ticker CSS (Seamless Dual-Track Infinite Loop, Zero Jitter, Zero TBT) */
.ha-topbar-ticker {
    display: flex !important;
    align-items: center;
    overflow: hidden !important;
    position: relative;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ha-topbar-ticker::-webkit-scrollbar { display: none; }

@keyframes ha-topbar-marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

.ha-topbar-track {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    animation: ha-topbar-marquee 50s linear infinite !important;
    will-change: transform;
}
.ha-topbar-ticker:hover .ha-topbar-track {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .ha-topbar-track {
        animation: none !important;
    }
}