/* ==========================================================================
   hero.css — anasayfa hero'su (Swiper).
   Swiper'ın kendi CSS'i wwwroot/lib/swiper/swiper-bundle.min.css'ten gelir;
   burada yalnızca Swiper'ın açtığı değişkenler ezilir ve kendi yerleşimimiz
   yazılır. Renkler tokens.css'ten; sabit marka rengi yok.

   İSKELET NOTU: gerçek hero görselleri gelmedi. Görseli olmayan slayt
   marka renginden üretilen çizgili yer tutucu zeminle basılır.
   ========================================================================== */

.hero {
    position: relative;

    /* Swiper'ın kendi değişkenleri — tema rengini kendi token'larımıza bağlar. */
    --swiper-theme-color: var(--color-text-invert);
    --swiper-navigation-size: 22px;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-horizontal-gap: 5px;
    --swiper-pagination-bullet-inactive-color: var(--color-text-invert);
    --swiper-pagination-bullet-inactive-opacity: 0.45;
}

/* Yükseklik: ekranın header'dan artan kısmı, ama belirlenen aralıkta kalır.
   svh (small viewport height) mobil tarayıcı çubuğu yüzünden zıplamayı önler. */
.hero__swiper {
    height: 420px;
    height: clamp(380px, calc(100svh - var(--header-height)), 600px);
}

/* ---------- Slayt ---------- */

.hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-primary-dark);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Görsel yokken: marka renginden yer tutucu zemin (çizgi deseni geçici
   olduğunu belli etsin diye). Gerçek görsel gelince bu sınıf düşer. */
.hero__slide--placeholder {
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05) 0 14px,
            rgba(255, 255, 255, 0) 14px 28px),
        linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

/* Görsel üstünde metnin okunabilmesi için koyu perde.
   Bu siyah marka rengi değil, kontrast perdesi — token'a bağlanmaz. */
.hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.42) 55%,
        rgba(0, 0, 0, 0.22) 100%);
}

/* Perdenin üstünde kalması gerekenler. */
.hero__content,
.hero__figure-note {
    position: relative;
    z-index: var(--z-base);
}

/* ---------- Slayt içeriği ---------- */

.hero__content {
    width: 100%;
    color: var(--color-text-invert);
}

.hero__body {
    max-width: 46ch;
}

.hero__eyebrow {
    color: var(--color-text-invert);
    opacity: 0.85;
}

.hero__title {
    color: var(--color-text-invert);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

.hero__text {
    color: var(--color-text-invert);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-5);
    opacity: 0.92;
}

.hero__actions {
    --cluster-gap: var(--space-3);
}

/* Görsel beklediğini söyleyen küçük işaret (yalnızca iskelet aşamasında).
   Üst sağda: alt sağ köşe oklara ayrıldı. */
.hero__figure-note {
    position: absolute;
    right: var(--space-4);
    top: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border: 1px dashed rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-sm);
    color: var(--color-text-invert);
    font-size: var(--fs-xs);
    font-style: italic;
    opacity: 0.75;
}

/* ---------- Kontroller (oklar + noktalar) ----------
   Oklar dikey ortada DEĞİL, altta sağda durur: ortada dururlarsa dar
   masaüstü genişliklerinde (container kenara dayandığında) slayt metninin
   üstüne binerler. Noktalar solda, oklar sağda — tek bir kontrol satırı.

   --hero-edge: container'ın iç kenarı. Geniş ekranda metinle aynı hizaya
   gelir, dar ekranda gutter kadar boşluk bırakır. */
.hero {
    --hero-edge: max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter)));
}

.hero .swiper-button-prev,
.hero .swiper-button-next {
    display: none;                     /* mobilde kaydırma + noktalar yeterli */
    top: auto;
    bottom: var(--space-5);
    margin-top: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.hero .swiper-button-prev:hover,
.hero .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.55);
    border-color: var(--color-text-invert);
}

    /* Swiper'ın kendi "prev/next" metnini gizle; ok'u butonun içindeki SVG çiziyor. */
    .hero .swiper-button-prev::after,
    .hero .swiper-button-next::after {
        content: "";
    }

    /* SVG butonun tam ortasında dursun ve rengi beyaz olsun. */
    .hero .swiper-button-prev,
    .hero .swiper-button-next {
        align-items: center;
        justify-content: center;
        color: var(--color-text-invert);
    }

        .hero .swiper-button-prev svg,
        .hero .swiper-button-next svg {
            display: block;
        }

/* ---------- Noktalar ---------- */

.hero .swiper-pagination {
    bottom: var(--space-4);
}

.hero .swiper-pagination-bullet {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.hero .swiper-pagination-bullet-active {
    transform: scale(1.15);
}

/* ---------- Masaüstü ---------- */

@media (min-width: 768px) {
    .hero__body {
        max-width: 52ch;
    }

    .hero__text {
        font-size: var(--fs-lg);
    }

    /* Oklar görünür ve alt sağ köşeye yerleşir. */
    .hero .swiper-button-prev,
    .hero .swiper-button-next {
        display: flex;
    }

    .hero .swiper-button-next {
        left: auto;
        right: var(--hero-edge);
    }

    .hero .swiper-button-prev {
        left: auto;
        right: calc(var(--hero-edge) + 44px + var(--space-2));
    }

    /* Noktalar solda, okların dikey ortasıyla aynı hizada
       (24px alt boşluk + 44px düğmenin yarısı ≈ 17px kaydırma). */
    .hero .swiper-pagination {
        bottom: calc(var(--space-5) + 17px);
        text-align: left;
        padding-inline: var(--hero-edge);
    }
}