/* Bölüm: hero.
   Üç varyant: tam ekran video, metin+ekran görseli (split), ortalanmış.
   Video varyantında header şeffaf olarak bu bölümün üstünde durur. */

.hero {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem) clamp(4rem, 2.5rem + 6vw, 7rem);
    overflow: hidden;
}

/* ============================================================
   Arka plan varyantları (video dışı)
   ============================================================ */

.hero--bg-soft {
    background:
        radial-gradient(120% 80% at 85% -10%, var(--brand-50) 0%, transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--surface-soft) 100%);
}

.hero--bg-white { background: var(--surface); }
.hero--bg-mute  { background: var(--surface-mute); }

/* ============================================================
   Ortak metin bloğu
   ============================================================ */

.hero__kicker {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    color: var(--ink-600);
    letter-spacing: -0.01em;
}

.hero__title {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--ink-900);
    max-width: 16ch;
}

.hero__lead {
    max-width: 52ch;
    margin-top: var(--sp-6);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-600);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

.hero__trust {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    max-width: 54ch;
    margin-top: var(--sp-5);
    color: var(--ink-600);
    font-size: var(--fs-xs);
    line-height: 1.55;
}

.hero__trust svg {
    flex: none;
    margin-top: 1px;
    color: var(--success-600);
}

/* ============================================================
   Varyant: tam ekran video
   ============================================================ */

.hero--video {
    display: flex;
    align-items: center;
    /* Header mutlak konumda üstte durduğu için üstten pay bırakılır */
    padding-block: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 5rem)) clamp(4rem, 2rem + 6vw, 7rem);
    color: #fff;
}

.hero--h-tall { min-height: min(88vh, 780px); }
.hero--h-mid  { min-height: min(64vh, 580px); }

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video da kapak da yoksa bölüm boş görünmesin */
.hero__video--empty { background: var(--grad-deep); }

/* Karartma: metnin bulunduğu sol taraf daha koyu, sağ taraf görüntüyü bırakır */
.hero__scrim {
    position: absolute;
    inset: 0;
    display: block;
}

.hero--scrim-light .hero__scrim {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.28) 55%, rgba(15, 23, 42, 0.10) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, transparent 30%);
}

.hero--scrim-medium .hero__scrim {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.52) 55%, rgba(15, 23, 42, 0.28) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, transparent 32%);
}

.hero--scrim-dark .hero__scrim {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.72) 55%, rgba(15, 23, 42, 0.48) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, transparent 32%);
}

.hero--video .hero__inner {
    position: relative;
    z-index: 1;
    display: block;
}

.hero--video .hero__body { max-width: 40rem; }

.hero--video .hero__kicker { color: var(--brand-200); }
.hero--video .hero__title  { color: #fff; max-width: 15ch; }
.hero--video .hero__lead   { color: rgba(255, 255, 255, 0.88); }

.hero--video .hero__trust {
    color: rgba(255, 255, 255, 0.72);
}

.hero--video .hero__trust svg { color: var(--brand-300); }

/* Videonun üstünde beyaz birincil buton, degradeden daha okunur durur */
.hero--video .btn--primary {
    background-image: none;
    background-color: #fff;
    color: var(--brand-900);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
}

.hero--video .btn--primary:hover {
    background-color: var(--brand-50);
    color: var(--brand-900);
}

/* Videolu hero'da çip: beyaz kart olarak havada durmasın diye camsı koyu görünüm,
   ve hero'nun içinde sol alta, metin bloğuyla hizalı. */
.hero--video .hero__chip--float {
    position: static;
    display: inline-flex;
    margin-top: var(--sp-6);
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.hero--video .hero__chip--float::before {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.22);
}

/* ============================================================
   Varyant: split (metin solda, ürün ekranı sağda)
   ============================================================ */

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 5vw, 5rem);
    align-items: center;
}

.hero--centered .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

.hero--centered .hero__title { max-width: 20ch; }
.hero--centered .hero__lead  { margin-inline: auto; }
.hero--centered .hero__actions,
.hero--centered .hero__trust { justify-content: center; }
.hero--centered .hero__visual { width: 100%; max-width: 900px; margin-top: var(--sp-6); }
.hero--centered .hero__phone { left: auto; right: 2rem; }

.hero__visual {
    position: relative;
    isolation: isolate;
}

.hero__screen { position: relative; z-index: 1; }

/* Mobil mağaza önizlemesi — panel görselinin önünde, sol altta */
.hero__phone {
    position: absolute;
    z-index: 2;
    left: -1.5rem;
    bottom: -2rem;
    width: clamp(110px, 9vw, 148px);
    border: 6px solid var(--ink-900);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--sh-xl);
    overflow: hidden;
}

.hero__phone .screenshot__placeholder {
    aspect-ratio: 9 / 17;
    font-size: 11px;
    padding: var(--sp-3);
}

/* Ürün gerçekliğini hissettiren küçük durum çipi (kargo kodu akışı) */
.hero__chip {
    position: absolute;
    z-index: 3;
    right: -0.75rem;
    top: 18%;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
    white-space: nowrap;
}

.hero__chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-600);
    box-shadow: 0 0 0 4px var(--success-50);
}

/* ============================================================
   Kırılımlar
   ============================================================ */

@media (max-width: 1080px) {
    .hero--split .hero__inner,
    .hero--centered .hero__inner { grid-template-columns: minmax(0, 1fr); }

    .hero__visual { margin-top: var(--sp-6); }
    .hero__phone { left: auto; right: 1rem; bottom: -1.25rem; }

    .hero--video { min-height: 0; padding-block: calc(var(--header-h) + 2.5rem) 4rem; }
}

@media (max-width: 640px) {
    .hero__phone,
    .hero__chip { display: none; }

    .hero__actions .btn { flex: 1 1 100%; }
    .hero--video .hero__title { max-width: none; }
}

/* Hareket azaltma tercihi: video oynatılmaz, kapak karesi kalır */
@media (prefers-reduced-motion: reduce) {
    .hero__video { animation: none !important; }
}

/* ------------------------------------------------- Video hero: yükseklik ayarı

   SORUN: Bölüm 1280×720 ekranda 908px yükseliyordu — görüntü alanının 1,26 katı.
   Yükün yarısı BAŞLIKTAN geliyordu: 68px punto, 16ch genişlikte 4 satıra sarıyor
   ve tek başına 286px yer kaplıyordu.

   ÇÖZÜM: Punto küçültüldü, satır genişliği artırıldı (4 satır → 3), dikey
   ritim ve bölüm dolgusu sıkılaştırıldı. Yalnızca video varyantını kapsar;
   diğer sayfalardaki hero'lar değişmez. */

.hero--video {
    padding-block:
        calc(var(--header-h) + clamp(1rem, 0.25rem + 1.6vw, 2rem))
        clamp(2rem, 1rem + 2.6vw, 3.5rem);
}

.hero--video.hero--h-tall { min-height: min(62vh, 560px); }
.hero--video.hero--h-mid  { min-height: min(50vh, 440px); }

.hero--video .hero__kicker { margin-bottom: var(--sp-2); }

.hero--video .hero__title {
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
    /* Daha geniş satır: küçülen puntoyla birlikte satır sayısını düşürür */
    max-width: 21ch;
}

.hero--video .hero__lead {
    max-width: 50ch;
    margin-top: var(--sp-4);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.hero--video .hero__actions { margin-top: var(--sp-5); }
.hero--video .hero__trust   { margin-top: var(--sp-2); }

/* ============================================================
   DAR EKRAN — hero'daki metin ve buton yığılması

   Ölçüldü (375 px): bölüm 623 px, ekranın dörtte üçü. İçinden
   194 px'i İKİNCİL METİN (üst etiket 29, alt metin 105, güvence
   notu 60), 118 px'i de üst üste binmiş iki tam genişlik buton.
   Başlığın kendisi 95 px — yani asıl mesaj, kendisine eşlik eden
   yazıların yarısı kadar yer kaplıyordu.

   İki müdahale:

   1) İKİNCİL BUTON BAĞLANTIYA DÖNÜYOR. Alt alta iki dolu buton
      ikisini de zayıflatıyor: hangisinin asıl adım olduğu
      anlaşılmıyor. Birincil dolu kalır, ikincil altı çizili
      bağlantı olur — yol kapanmaz, ağırlık düşer. Dokunma hedefi
      44 px'de tutuluyor.

   2) GÜVENCE NOTU GİZLENİYOR. Üç satır ince yazı, iki butonun
      hemen altında. Söylediği şey ("başvuru güvenli") kayıt
      adımına ait; hero'da karar verdirmiyor, yalnız yer kaplıyor.
      Geniş ekranda duruyor — orada boşluk zaten var.
   ============================================================ */

@media (max-width: 720px) {
    /*
     * ÜST ETİKET GİZLENİYOR. "Dakikalar içinde" başlığın üstünde ayrı
     * bir satır; söylediğini başlığın kendisi ("Kolayca Açın") zaten
     * söylüyor. Dar ekranda başlıktan önce okunacak dördüncü bir metin
     * bloğu olmamalı.
     */
    .hero__kicker { display: none; }

    .hero__actions { margin-top: var(--sp-5); }

    .hero__actions .btn { flex: 1 1 100%; }

    .hero__actions .btn--onDark,
    .hero__actions .btn--secondary {
        min-height: 44px;
        padding-block: 0;
        background: none;
        border-color: transparent;
        box-shadow: none;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1px;
    }

    .hero__actions .btn--onDark { color: #fff; }
    .hero__actions .btn--secondary { color: var(--brand-800); }

    .hero__actions .btn--onDark:hover,
    .hero__actions .btn--secondary:hover { background: none; }

    .hero__trust { display: none; }
}