/* ==========================================================================
   UYG-1130 · ANA SAYFA HERO — tur 3 Seçenek 1 (patron 18.10.2026 seçti) · Sunai
   (1) h1 satır satır yükselir (yalnız transform → LCP h1 metni) · sonda dönen İSİM harf harf geçer (js/anasayfa-v3-hero.js)
   (2) arka plan: yavaş süzülen 3 ışık lekesi + kenara sönen 44 px ızgara (yalnız CSS gradient + transform; boylar SABİT px → CLS 0)
   (3) tipografi: 1. satır Inter 300 · "en uygun … bul" Inter 500 turuncu geçiş · dönen ürün kelimesi Inter 500 siyah (UYG-1137, patron 18.10)
   (4) arama kutusu görsel merkez: 80 px, buzlu cam, odakta ışıma
   Bu dosya SON stylesheet (tur 3 demosundaki sıranın aynısı; gezinme/takip/şerit kurallarının üstüne biner). reduced-motion → statik.
   Yüzde ya da fiyat YOK (patron 18.10). Kelimeler: onaylı sözlük + arama sırası (includes/hero_veri.php, Zekai).
   ========================================================================== */

/* ---------- tipografi + dönen isim ---------- */
.kahraman { position:relative; isolation:isolate; overflow:hidden; }
.kahraman-ic { position:relative; }
.hb-h1 { max-width:none !important; text-wrap:initial; font-size:clamp(2.25rem, 1.3rem + 3.4vw, 3.6rem) !important; line-height:1.02 !important; }
/* UYG-1137 (18.10 Sunai): 1. satır ("Market fiyatlarını karşılaştır,") Inter 300 + −0,045 em ile 11,14 em genişliğinde (canlıda, Inter yüklü ölçüldü).
   Boy SÜTUNA bağlı: 100cqi / 11,4 (≈ %2 pay) → 320–1920 her genişlikte TEK satır; üst sınır 3,6 rem. Sütun ızgarada minmax(0, fr), mobilde
   blok → genişliği içerikten bağımsız, inline-size kapsaması güvenli. Desteklemeyen tarayıcı eski clamp'ta kalır (yalnız satır kırılır). */
@supports (container-type: inline-size) {
  .kahraman-sol.hb { container-type: inline-size; }
  .hb-h1 { font-size:min(3.6rem, calc(100cqi / 11.4)) !important; }
}
.hb-s1, .hb-s2 { display:block; animation:hb-yuksel 1.1s cubic-bezier(.16,.84,.24,1) both; }
.hb-s2 { animation-delay:.12s; white-space:nowrap; margin-top:.06em; }
@keyframes hb-yuksel { from { transform:translateY(.32em); } to { transform:none; } }   /* yalnız transform → h1 ilk boyamada tam görünür (LCP) */
.hb-s1 { font-weight:300; letter-spacing:-.045em; color:var(--murekkep,#0f172a); }
.hb-s2 { font-weight:500; letter-spacing:-.04em; color:var(--turuncu-koyu,#c2410c); }   /* UYG-1137 patron: 800 → 500 */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hb-g { background-image:linear-gradient(100deg, #c2410c 0%, #ea580c 45%, #f97316 75%, #fb923c 100%); background-size:var(--gw, 100%) 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}
.hb-g { padding-bottom:.16em; margin-bottom:-.16em; }
/* UYG-1137 patron: dönen ürün kelimesi Inter 500, düz, SİYAH mürekkep; geçiş yok (Instrument Serif kalktı) */
.hb-ad { color:var(--murekkep,#0f172a); -webkit-text-fill-color:currentColor; background:none; font-style:normal; }
/* Kutu YÜKSEKLİĞİ SABİT (UYG-1130 dersi: farklı metrikli kelime satırı uzatıp alttakini kaydırıyordu) */
.hb-don { display:inline-block; vertical-align:baseline; height:1em; line-height:1; }   /* overflow:hidden YOK: kırpan satır içi bloğun taban çizgisi kutunun altına iner → 'sütü bul' 'en uygun'dan aşağıda kalıyordu (görüldü). Geçişler opaklıkla söner, kırpma gereksiz */
.hb-don-ic { display:inline-block; white-space:pre; }
/* UYG-1138 (patron 18.10 ~23:2x): tek parça kayma. Kutu tek hücreli inline-grid (eski + yeni kelime üst üste), genişliği JS'te SABİT;
   "bul" kutunun dışında, yalnız transform ile kayar → düzen değişmez, CLS 0. inline-grid taban çizgisini ilk öğeden alır (kırpma yok). */
.hb-kutu { display:inline-grid; vertical-align:baseline; justify-items:start; }
.hb-kutu > .hb-kel { grid-area:1 / 1; white-space:pre; }
.hb-bul { display:inline-block; }
/* dönen kelime = yalın arama bağlantısı: görünüm aynı (siyah, alt çizgi yok); üstünde ince alt çizgi, odakta görünür halka */
a.hb-ad { text-decoration:none; border-radius:6px; cursor:pointer; }
a.hb-ad:hover { text-decoration:underline; text-decoration-thickness:.05em; text-underline-offset:.14em; }
a.hb-ad:focus-visible { outline:3px solid #ea580c; outline-offset:4px; }
/* (4) Arama kutusu — görsel merkez */
.hb .arama { position:relative; margin-top:40px; max-width:640px; }
.hb .arama::before { content:""; position:absolute; z-index:0; left:6%; right:6%; top:24px; height:70px; border-radius:40px; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 50%, rgb(249 115 22 / .28), transparent 70%); transform:translateY(16px) scale(1.04); opacity:.7;
  transition:opacity .4s ease, transform .4s ease; }
.hb .arama:focus-within::before { opacity:1; transform:translateY(18px) scale(1.1); }
/* UYG-1140 (patron 19.10): etiket GÖRSEL olarak yok; <label for=ara-girdi> erişilebilir ad olarak kalır (sr-only) */
.hb .arama-etiket { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.hb .arama-kutu { position:relative; z-index:1; min-height:72px; border:1px solid rgb(15 23 42 / .1); border-radius:24px; background:rgb(255 255 255 / .92);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 1px 2px rgb(15 23 42 / .05), 0 18px 44px -18px rgb(15 23 42 / .22); transition:box-shadow .3s ease, border-color .3s ease; }
.hb .arama-kutu:hover { border-color:rgb(15 23 42 / .18); }
.hb .arama-kutu:focus-within { outline:none; border-color:rgb(234 88 12 / .55);
  box-shadow:0 0 0 6px rgb(249 115 22 / .12), 0 0 0 1px rgb(234 88 12 / .35), 0 22px 48px -18px rgb(234 88 12 / .4); }
.hb .arama-kutu input { padding:0 20px 0 26px; font-size:1.125rem; }   /* UYG-1140: etiketsiz → dikeyde ortada */
.hb .arama-kutu input::placeholder { color:#94a3b8; }
.hb .arama-dugme--ikon { width:60px; height:60px; margin-right:10px; border-radius:18px; box-shadow:0 8px 20px -8px rgb(234 88 12 / .6); }
.hb .tk-satir--kahraman { position:relative; z-index:1; margin-top:22px; font-size:.8125rem; color:#64748b; font-weight:400; }
.hb .tk-satir--kahraman .tk-sayi { color:var(--murekkep,#0f172a); font-weight:600; font-variant-numeric:tabular-nums; }
/* UYG-1140: sayan sayı — eşit rakam genişliği + sağa yaslı; JS sayma süresince genişliği son sayıya SABİTLER (CLS 0) */
.hb .tk-say { display:inline-block; font-variant-numeric:tabular-nums; text-align:right; }
@media (max-width: 640px) {
  .hb .arama { margin-top:30px; } .hb .arama-kutu { min-height:64px; border-radius:20px; }
  .hb .arama-kutu input { font-size:1rem; padding:0 12px 0 20px; }
  .hb .arama-dugme--ikon { width:54px; height:54px; margin-right:8px; border-radius:16px; }
}
@media (prefers-reduced-motion: reduce) { .hb-s1, .hb-s2 { animation:none; } .hb .arama::before, .hb .arama-kutu { transition:none; } }

/* ---------- arka plan: ışık ---------- */
/* (2a) IŞIK: yavaş süzülen yumuşak ışık lekeleri (3 radyal) + kenarlara doğru sönen çok ince ızgara. Boylar SABİT px (CLS). Yalnız transform. */
.kahraman::before { content:""; position:absolute; z-index:-2; top:-160px; left:-12%; right:-12%; height:980px; pointer-events:none;
  background: radial-gradient(28% 34% at 16% 36%, rgb(254 215 170 / .9), transparent 70%),
              radial-gradient(24% 30% at 62% 14%, rgb(253 186 116 / .38), transparent 72%),
              radial-gradient(30% 34% at 88% 62%, rgb(255 237 213 / .85), transparent 70%);
  animation:hb-suz 34s ease-in-out infinite alternate; will-change:transform; }
.kahraman::after { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:820px; pointer-events:none;
  background-image:linear-gradient(rgb(15 23 42 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(15 23 42 / .045) 1px, transparent 1px);
  background-size:44px 44px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 75%); mask-image:radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 75%); }
@keyframes hb-suz { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(3%, 4%, 0) scale(1.05); } 100% { transform:translate3d(-4%, 2%, 0) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .kahraman::before { animation:none; } }