/**
 * themes/ala/assets/css/hero.css
 * ÂLÂ Design System — Katman 5: Hero
 *
 * Arka plan şu an gerçek bir fotoğraf DEĞİL, marka renkleriyle üretilmiş bir
 * CSS gradyanıdır (placeholder). Bu kasıtlıdır: gerçek bir <img> kullanmak,
 * görsel yüklenene kadar rezerve edilmemiş bir alan yüzünden CLS (Cumulative
 * Layout Shift) riski taşır. CSS arka planı hem CLS riskini sıfırlar hem de
 * ileride tek satırlık bir değişiklikle gerçek fotoğrafla değiştirilebilir
 * (bkz. .hero { background-image: ... } — img yerine background-image kullanımı).
 */

.hero{
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-on-dark);
    background:
        linear-gradient(160deg, rgba(8,59,115,0.88) 0%, rgba(13,94,168,0.80) 55%, rgba(8,59,115,0.92) 100%),
        radial-gradient(ellipse at 30% 20%, rgba(45,140,255,0.25), transparent 60%);
    background-color: var(--color-secondary); /* görsel yüklenmeden önceki/olmadığı an için katı zemin, CLS'siz */
    overflow: hidden;
}

/* İleride gerçek fotoğraf eklendiğinde koyu okunabilirlik overlay'i (metin kontrastını korur) */
.hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 59, 115, 0.35);
    pointer-events: none;
}

.hero__content{
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding: var(--space-8) var(--container-padding);
}

.hero__eyebrow{
    display: inline-block;
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-caption);
    text-transform: uppercase;
    color: var(--color-tint);
    margin-bottom: var(--space-4);
}

.hero__title{
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-4);
}

.hero__slogan{
    font-size: 1.25rem;
    color: rgba(255,255,255,0.92);
    margin-bottom: var(--space-3);
}

.hero__description{
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.78);
    max-width: 560px;
    margin: 0 auto var(--space-8);
}

.hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

@media (max-width: 480px){
    .hero{ min-height: 80vh; }
    .hero__actions{ flex-direction: column; align-items: stretch; }
    .hero__actions .btn{ width: 100%; }
}


/* =========================================================
   HERO CAROUSEL (v1.3) — Tamamen yeniden yazılmış frontend motoru.
   KESİNLİKLE metinsiz, saf görsel karusel: <img> tabanlı, glassmorphism
   kontroller, lacivert/beyaz/altın kimlik, Ken Burns zoom + smooth fade.
   ========================================================= */
:root{
    /* v1.3.3 — Kullanıcı artık "sayfanın devamı ilk ekranda hafif görünsün" (premium,
       tam ekran olmayan hero) istiyor; bu, önceki turun "vh kullanma" kısıtını
       KASITLI olarak tersine çeviren yeni, açık bir talep. 4 katmanlı vh yüzdesi:
       Desktop ≥1200px: %70 · Laptop 900–1199px: %64 · Tablet 641–899px: %58 ·
       Mobil ≤640px: %48-50 (49 seçildi, aralığın ortası).
       Aşırı uç viewport'larda (çok kısa/çok uzun ekranlar) tamamen absürt bir
       yüksekliğe düşmesin diye saf piksel min/max-height GÜVENLİK KEMERİ olarak
       korunuyor (vh'nin YERİNE değil, YANINDA). */
    --carousel-vh-desktop: 70vh;
    --carousel-vh-laptop: 64vh;
    --carousel-vh-tablet: 58vh;
    --carousel-vh-mobile: 49vh;
    --carousel-min-height-desktop: 460px;
    --carousel-max-height-desktop: 820px;
    --carousel-min-height-laptop: 420px;
    --carousel-max-height-laptop: 760px;
    --carousel-min-height-tablet: 360px;
    --carousel-max-height-tablet: 620px;
    --carousel-min-height-mobile: 260px;
    --carousel-max-height-mobile: 460px;
    --carousel-transition: 1100ms cubic-bezier(0.4, 0, 0.2, 1);
    --carousel-kenburns-duration: 7000ms;
}

.hero-carousel{
    position: relative;
    width: 100%;
    height: var(--carousel-vh-desktop);
    min-height: var(--carousel-min-height-desktop);
    max-height: var(--carousel-max-height-desktop);
    overflow: hidden;
    background: var(--color-secondary); /* görsel yüklenene kadar CLS'siz katı zemin */
    isolation: isolate; /* iç katmanların z-index'i sayfanın geri kalanına sızmasın */
}
/* Laptop: 900–1199px */
@media (max-width: 1199px) and (min-width: 900px){
    .hero-carousel{
        height: var(--carousel-vh-laptop);
        min-height: var(--carousel-min-height-laptop);
        max-height: var(--carousel-max-height-laptop);
    }
}
/* Tablet: 641–899px */
@media (max-width: 899px) and (min-width: 641px){
    .hero-carousel{
        height: var(--carousel-vh-tablet);
        min-height: var(--carousel-min-height-tablet);
        max-height: var(--carousel-max-height-tablet);
    }
}
/* Mobil: ≤640px */
@media (max-width: 640px){
    .hero-carousel{
        height: var(--carousel-vh-mobile);
        min-height: var(--carousel-min-height-mobile);
        max-height: var(--carousel-max-height-mobile);
    }
}

.hero-carousel__list{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
    /* Mouse drag sırasında metin seçimi/görsel sürüklemesi olmasın */
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y; /* dikey sayfa kaydırmasını bozmadan yatay swipe'ı JS'e bırak */
}

.hero-carousel__slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--carousel-transition);
    will-change: opacity;
}
.hero-carousel__slide.is-active{
    opacity: 1;
    position: relative; /* aktif slayt akışa katılır, diğerleri absolute kalır (CLS'siz) */
    /* v1.3.4 SORUN 2 DÜZELTMESİ: position:relative'te `inset:0` (taban kuraldan miras)
       artık boyutlandırma YAPMAZ — yalnızca absolute/fixed elemanları ebeveyne göre
       doldurur. Bu satır olmadan bu <li>'nin yüksekliği içeriğine (img) göre "auto"
       oluyordu, img'nin height:100%'ü de ebeveynde açık yükseklik olmadığı için geçersiz
       sayılıp görsel kendi doğal oranında render oluyordu — container'dan kısa kalıp
       altında boşluk (mobilde ~250-300px) bırakıyordu. Açık height:100% bunu düzeltir. */
    height: 100%;
    z-index: 1;
}

.hero-carousel__image{
    width: 100%;
    height: 100%;
    /* v1.3.3 KÖK NEDEN DÜZELTMESİ: contain -> cover'a geri dönüldü (kullanıcı artık
       küçük bir hero + "cover" dolgusuyla premium, boşluksuz bir görünüm istiyor).
       Ancak "cover" kutuyu doldururken taşan kısmı kırpar — bu yüzden tek başına
       object-fit:cover yeterli değil: object-position, banner'ın ÖNEMLİ bölgesini
       (genellikle üst/orta alan — logo, ana görsel, ürün) korurken kırpmanın daha
       önemsiz alt/kenar bölgeden yapılmasını sağlayacak şekilde ayarlandı.
       Yükseklik küçüldükçe (mobilde) kırpma oranı artacağından, object-position da
       kademeli olarak yukarı kaydırılıyor ki önemli içerik her zaman kadrajda kalsın. */
    object-fit: cover;
    object-position: center 30%;
    display: block;
    /* Ken Burns: yalnızca aktifken hafif zoom — prefers-reduced-motion'da devre dışı */
    transform: scale(1);
    transition: transform var(--carousel-kenburns-duration) ease-out;
}
@media (max-width: 899px) and (min-width: 641px){
    .hero-carousel__image{ object-position: center 22%; }
}
@media (max-width: 640px){
    .hero-carousel__image{ object-position: center 15%; }
}
.hero-carousel__slide.is-active .hero-carousel__image{
    animation: heroKenBurns var(--carousel-kenburns-duration) ease-out forwards;
}
@keyframes heroKenBurns{
    from{ transform: scale(1); }
    to{ transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
    .hero-carousel__slide.is-active .hero-carousel__image{ animation: none; transform: none; }
    .hero-carousel__slide{ transition-duration: 1ms; }
}

/* ---------- Glassmorphism ok butonları ---------- */
.hero-carousel__arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(8, 59, 115, 0.35);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    /* Safe-area: çentikli/yuvarlak köşeli ekranlarda kenara yapışmasın */
    margin-inline: max(var(--space-4), env(safe-area-inset-left));
}
.hero-carousel__arrow svg{ width: 20px; height: 20px; }
.hero-carousel__arrow:hover{
    background: rgba(201, 162, 75, 0.85); /* altın vurgu */
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-50%) scale(1.06);
}
.hero-carousel__arrow:focus-visible{ outline: 2px solid var(--color-gold); outline-offset: 2px; }
.hero-carousel__arrow--prev{ left: var(--space-6); }
.hero-carousel__arrow--next{ right: var(--space-6); }
@media (max-width: 640px){
    .hero-carousel__arrow{ width: 40px; height: 40px; }
    .hero-carousel__arrow--prev{ left: var(--space-3); }
    .hero-carousel__arrow--next{ right: var(--space-3); }
}

/* ---------- İnce, altın rengi progress bar ---------- */
.hero-carousel__progress{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,0.2);
    z-index: 3;
}
.hero-carousel__progress-bar{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-gold), #fff);
    transition: width linear;
}

/* ---------- Nokta göstergesi (glassmorphism pill) ---------- */
.hero-carousel__dots{
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: rgba(8, 59, 115, 0.30);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-full, 999px);
    /* Safe-area: alt çentik/home-bar'a yapışmasın */
    margin-bottom: env(safe-area-inset-bottom);
}
.hero-carousel__dot{
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.hero-carousel__dot:hover{ background: rgba(255,255,255,0.8); }
.hero-carousel__dot.is-active{ background: var(--color-gold); transform: scale(1.3); }
.hero-carousel__dot:focus-visible{ outline: 2px solid var(--color-gold); outline-offset: 2px; }

@media (max-width: 640px){
    .hero-carousel__dots{ bottom: var(--space-4); gap: var(--space-2); }
}