/* "Vitrin" karşılama düzeni — üç tasarımın ortak katmanı.

   Renkler tema değişkenlerinden (--heading, --surface, --text, --accent-color)
   gelir; burada sabit marka rengi yoktur, bu yüzden aynı dosya Klasik, Monolit
   ve Nova'da kendi renkleriyle görünür.

   Ölçü mantığı: bütün dar kartlar aynı genişliktedir, bu yüzden ray her adımda
   tam olarak (dar + ara) kadar kayar. Pencere genişliği de aynı değişkenlerden
   hesaplanır; böylece masaüstünde tam 3, mobilde tam 2 kart görünür. */

.hv {
    --hv-genis: clamp(220px, 24vw, 400px);
    --hv-dar: clamp(80px, 8vw, 132px);
    --hv-ara: 14px;
    --hv-yukseklik: clamp(340px, 58vh, 560px);
    --hv-radius: 18px;
    padding: clamp(32px, 6vh, 72px) 0 clamp(24px, 4vh, 48px);
    overflow: hidden;

    /* Kendi zeminini kendi çizer. Klasik tasarımın karşılama bölümü koyu
       gradyanlıdır ve yazıyı beyaz yapar; vitrin ise açık zeminli bir düzendir.
       Zemin ve yazı rengi aynı paletten (--bg / --heading / --text) geldiği
       için üç tasarımda da birbiriyle kontrastlı kalır. */
    background: var(--bg, #fff);
    color: var(--text, #4D545E);
}

/* Klasik tasarımın karşılama bölümü koyu gradyanlı ve iç boşlukludur; vitrin
   kendi zeminini taşıdığı için o gradyan yalnız üstte ince bir şerit olarak
   görünürdü. Bu düzende bölüm boşluksuz ve zeminsiz kalır. */
.hero.hero--vitrin {
    padding: 0;
    background: none;
}

/* Monolit'in site başlığı sabittir (position: fixed) ve akışta yer kaplamaz;
   kendi karşılaması tam ekran olduğu için altına girmesi istenen bir şeydi.
   Vitrin akan bir bölüm olduğundan başlığın altında kalıyordu. Buradaki değer
   Monolit'in hero'suz başlık yüksekliğidir; betik açılışta gerçek yüksekliği
   ölçüp bu değeri düzeltir, yani logo büyütülse de hizalama bozulmaz. */
.m-hero-vitrin {
    padding-top: var(--hv-header-boslugu, 76px);
}

.hv-kap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

/* Yazı sütununa alt sınır verilir: "auto" olan şerit sütunu sabit genişlikte
   olduğu için, ekran daraldıkça yazı sütunu eziliyor ve uzun bir kelime
   fotoğrafların altına taşıyordu. minmax alt sınırı o ezilmeyi durdurur. */
.hv-ic {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

/* Izgara hücresi varsayılan olarak içeriğinden küçülemez; bu ikisi olmadan
   uzun bir başlık sütunu genişletip yan sütunun üstüne biner. */
.hv-metin {
    min-width: 0;
}

.hv-baslik,
.hv-alt {
    overflow-wrap: break-word;
}

/* ---------- Sol sütun: yazılar ---------- */

.hv-baslik {
    font-family: var(--heading-font, inherit);
    color: var(--heading, #15181D);
    font-size: clamp(34px, 5.2vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.hv-alt {
    color: var(--text, #4D545E);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 0 26px;
}

/* Butonlar tema değişkenlerinden renk alır: üç tasarımda da kendi rengiyle
   çıkar, hiçbir tasarımın buton CSS'ine bağımlı değildir. */
.hv-butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.hv-btn:hover {
    opacity: 0.88;
}

.hv-btn-ana {
    background: var(--accent-color, #E30613);
    color: var(--contrast-color, #fff);
}

.hv-btn-ikincil {
    border-color: var(--heading, #15181D);
    color: var(--heading, #15181D);
}

.hv-btn-ikincil:hover {
    background: var(--heading, #15181D);
    color: var(--surface, #fff);
    opacity: 1;
}

/* ---------- Sağ sütun: kayan şerit ---------- */

/* Pencere tam kart sayısı kadar geniştir; taşan kartlar kırpılır.
   Masaüstünde 1 geniş + 2 dar: dördüncü kart hem yazı sütununu daraltıyor
   hem de şeridi kalabalık gösteriyordu. */
.hv-pencere {
    width: calc(var(--hv-genis) + 2 * var(--hv-dar) + 2 * var(--hv-ara));
    max-width: 100%;
    overflow: hidden;
}

/* Kaydırma adımının ölçüldüğü, görünmeyen ve yer kaplamayan öğe. Genişliği
   tam olarak bir adımdır; ekran boyutu değişince kendiliğinden güncellenir. */
.hv-olcu {
    display: block;
    width: calc(var(--hv-dar) + var(--hv-ara));
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

.hv-ray {
    display: flex;
    gap: var(--hv-ara);
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hv-kart {
    position: relative;
    flex: 0 0 auto;
    width: var(--hv-dar);
    height: var(--hv-yukseklik);
    border-radius: var(--hv-radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--surface, #fff);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hv-kart.is-genis {
    width: var(--hv-genis);
    cursor: default;
}

.hv-kart:focus-visible {
    outline: 3px solid var(--accent-color, #E30613);
    outline-offset: 3px;
}

/* Seçici bilerek iki sınıflı: tasarımlarda ".tema-monolit img { height: auto }"
   gibi kurallar var ve tek sınıflı ".hv-foto"yu özgüllükte geçip fotoğrafı
   kartın içinde kısa bırakıyordu. */
.hv .hv-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Dikey portrelerde yüz üst yarıda kalır; ortadan kırpınca çene kesiliyordu. */
    object-position: center 30%;
    display: block;
}

/* ---------- Etiket kutusu ---------- */

/* Geniş kartta yazı doğrudan fotoğrafın üstünde durur; okunabilirliği alttan
   yukarı silinen bir gölge sağlar. Dolu bir kutu kartın alt şeridini kaplıyor
   ve fotoğrafı kesiyordu. Dar kartlarda kutu KALIR: orada dikey yazının
   arkasında zemin olmazsa fotoğrafın deseni yazıyı yutuyor. */
.hv-etiket {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 40px 18px 16px;
}

.hv-etiket.is-koyu {
    background: linear-gradient(to top,
        color-mix(in srgb, var(--heading, #15181D) 92%, transparent) 0%,
        color-mix(in srgb, var(--heading, #15181D) 55%, transparent) 45%,
        transparent 100%);
    color: #fff;
}

.hv-etiket.is-acik {
    background: linear-gradient(to top,
        color-mix(in srgb, var(--surface, #fff) 94%, transparent) 0%,
        color-mix(in srgb, var(--surface, #fff) 60%, transparent) 45%,
        transparent 100%);
    color: var(--heading, #15181D);
}

/* color-mix desteklemeyen tarayıcıda gölge hiç çizilmez ve yazı okunmaz kalır;
   düz renkli yedek önce yazılır, destek varsa üstteki kurallar kazanır. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .hv-etiket.is-koyu { background: rgba(0, 0, 0, 0.55); }
    .hv-etiket.is-acik { background: rgba(255, 255, 255, 0.75); }
}

.hv-etiket-ad {
    font-family: var(--heading-font, inherit);
    font-size: clamp(17px, 1.6vw, 26px);
    line-height: 1.15;
    font-weight: 600;
    white-space: nowrap;
}

/* Küçük yazı geniş kartta sağ uca itilir (örnekteki "100 TOPICS" gibi). Kısa
   bir ibare beklenir ama panele cümle de girilebiliyor: tek satırda zorlanınca
   kartın dışına taşıp kesiliyordu, bu yüzden geniş kartta satır sarar. */
.hv-kart.is-genis .hv-etiket-metin {
    margin-left: auto;
    max-width: 58%;
    white-space: normal;
    text-align: right;
    line-height: 1.35;
}

/* Başlık uzunsa küçük yazıyı ezmesin; ikisi de kartın içinde kalır. */
.hv-kart.is-genis .hv-etiket-ad {
    min-width: 0;
    white-space: normal;
}

.hv-etiket-metin {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: nowrap;
}

/* Etiket yatayken dikeye (veya tersine) geçerken bu dönüş anlıktır: kart hâlâ
   genişlerken yazı bir anda döndüğü için sıçrıyor görünüyordu. Genişliği
   değişen iki kartta etiket kısaca sönüp yanar, dönüş sönük anda olur. */
@keyframes hv-etiket-degisim {
    0% { opacity: 1; }
    30% { opacity: 0; }
    60% { opacity: 0; }
    100% { opacity: 1; }
}

.hv-kart.is-degisiyor .hv-etiket {
    animation: hv-etiket-degisim 0.8s ease-in-out;
}

/* Dar kartta yatay yazı sığmaz: etiket dikey döner, küçük yazı gizlenir.
   Kutu da kartın altına değil ortasına yakın oturur. */
.hv-kart:not(.is-genis) .hv-etiket {
    flex-direction: column;
    align-items: center;
    right: auto;
    padding: 16px 10px;
    background: var(--heading, #15181D);
}

.hv-kart:not(.is-genis) .hv-etiket.is-acik {
    background: var(--surface, #fff);
}

.hv-kart:not(.is-genis) .hv-etiket-ad {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.hv-kart:not(.is-genis) .hv-etiket-metin {
    display: none;
}

/* ---------- Ara boy ekranlar (992-1300px) ----------
   İki sütun hâlâ sığar ama dar kalır; kartlar ve başlık küçülerek yer açar. */

@media (min-width: 992px) and (max-width: 1300px) {
    .hv {
        --hv-genis: clamp(200px, 20vw, 300px);
        --hv-dar: clamp(70px, 7vw, 104px);
        --hv-ara: 10px;
        --hv-yukseklik: clamp(300px, 48vh, 440px);
    }

    .hv-baslik {
        font-size: clamp(30px, 3.6vw, 46px);
    }

    .hv-ic {
        grid-template-columns: minmax(260px, 1fr) auto;
        gap: 24px;
    }
}

/* ---------- Mobil: tek sütun ---------- */

@media (max-width: 991.98px) {
    .hv-ic {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    /* Mobilde yazı ve kartlar alt alta gelir; kartlar masaüstündeki boyda
       kalırsa bölüm bir ekrandan uzun olur ve etiketler ilk bakışta
       görünmezdi. Daha kısa kart, ekranda kalan bir karşılama demek.

       Telefonda pencerede 2 kart var (1 geniş + 1 dar): dar ekranda dört kart
       yan yana sıkışıyor, fotoğraflar birer şeride dönüyordu. İki kart olunca
       geniş karta daha çok yer düştüğü için ölçüler de büyütüldü. */
    /* Telefonda ölçüler PENCEREYE ORANLI verilir. Sabit piksel/vw değerlerinde
       kartların toplamı ekranın tamamını doldurmuyor ve sağda ölü bir boşluk
       kalıyordu. Yüzdeyle geniş + dar + aralık tam olarak %100 eder. */
    .hv {
        --hv-dar: 26%;
        --hv-genis: calc(74% - var(--hv-ara));
        --hv-ara: 10px;
        --hv-yukseklik: clamp(260px, 42vh, 380px);
        padding: 24px 0 28px;
    }

    .hv-pencere {
        width: 100%;
    }

    .hv-alt {
        max-width: none;
    }
}

/* ---------- Hareketi azalt ---------- */

/* Betik bu tercihte zamanlayıcıyı hiç kurmaz; kartlar açılıştaki gibi
   kalır. Buradaki kural, betik yüklenene kadarki anı da sabitler. */
@media (prefers-reduced-motion: reduce) {
    .hv-ray,
    .hv-kart {
        transition: none;
    }

    .hv-kart.is-degisiyor .hv-etiket {
        animation: none;
    }
}