/* ============================================================================
   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)}