/**
 * 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(112,0,12,0.90) 0%, rgba(180,0,18,0.78) 55%, rgba(112,0,12,0.92) 100%),
        radial-gradient(ellipse at 30% 20%, rgba(215,25,32,0.18), 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(112, 0, 12, 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.5.1 KURUMSAL TEMA REVİZYONU: Hero artık tam ekran DEĞİL — sayfa
       içine gömülü, container genişliğinde (max 1200px, "Menümüz" bölümüyle
       AYNI --container-max token'ı) premium bir kart. Yükseklikler talep
       edilen kesin değerlere göre: Desktop 540px (500-560 aralığında),
       Laptop 500px (sabit), Tablet 400-460px, Mobil 300-380px — clamp()
       ile viewport'a göre hafif esneklik, ama HER ZAMAN belirtilen aralıkta. */
    --carousel-height-desktop: clamp(500px, 50vh, 560px);  /* hedef ~540px */
    --carousel-height-laptop: 500px;                        /* sabit değer */
    --carousel-height-tablet: clamp(400px, 45vh, 460px);
    --carousel-height-mobile: clamp(300px, 42vh, 380px);
    --carousel-radius: 20px;
    --carousel-transition: 1100ms cubic-bezier(0.4, 0, 0.2, 1);
    --carousel-kenburns-duration: 7000ms;
}

.hero-carousel{
    position: relative;
    /* Container ile BİREBİR aynı genişlik mantığı (bkz. base.css .container) —
       padding'i genişlik hesabına önceden dahil ederek, görselin kartın
       kenarına kadar dolmasını sağlıyoruz (iç boşluk YOK, yalnızca dış ortalama). */
    width: min(100% - (var(--container-padding) * 2), var(--container-max));
    margin-inline: auto;
    margin-block: var(--space-10) var(--space-12); /* üstünde/altında boşluk */
    height: var(--carousel-height-desktop);
    overflow: hidden;
    border-radius: var(--carousel-radius);
    box-shadow: var(--shadow-lg), 0 1px 0 rgba(0,0,0,0.04); /* hafif gölge + ince alt çizgi hissi */
    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-height-laptop); }
}
/* Tablet: 641–899px */
@media (max-width: 899px) and (min-width: 641px){
    .hero-carousel{ height: var(--carousel-height-tablet); }
}
/* Mobil: ≤640px */
@media (max-width: 640px){
    .hero-carousel{
        height: var(--carousel-height-mobile);
        border-radius: 14px; /* mobilde kenara daha yakın, biraz daha ince köşe */
        margin-block: var(--space-6) var(--space-8);
    }
}

.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(112, 0, 12, 0.40);
    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(215, 25, 32, 0.90); /* canlı kırmızı 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(112, 0, 12, 0.35);
    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); }
}