/* ============================================================
   246 Software — Giriş (hero) bölümü

   Ölçüler 1920px genişliğindeki tasarımdan türetildi ve `vw`
   cinsinden yazıldı: böylece 1366'da da 2560'ta da tasarımın
   oranları korunur, içerik ilk ekrana sığar.
   clamp(min, ideal, max) → min: küçük ekran tabanı,
   max: çok geniş ekranlarda büyümeyi durdurur.
   ============================================================ */

.hero {
    /* Tasarımdaki karşılıkları: 1920px'de sırasıyla 100 / 24 / 40 / 50 / 92 px */
    --hero-gap-top: clamp(2rem, calc(var(--vw) * 5.2), 6.25rem);
    --hero-gap-title: clamp(0.75rem, calc(var(--vw) * 1.25), 1.5rem);
    --hero-gap-lead: clamp(1.25rem, calc(var(--vw) * 2.1), 2.5rem);
    --hero-gap-actions: clamp(1.5rem, calc(var(--vw) * 2.6), 3.125rem);
    --hero-gap-contact: clamp(2rem, calc(var(--vw) * 4.8), 5.75rem);

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background-color: var(--c-black);
    background-image: url('../images/main-bg-mobile.webp');
    background-repeat: no-repeat;
    /* Mobil: gözlük sağ üstte kalsın diye görsel büyütülüp sağa yaslanıyor.
       Görselin geri kalanı zaten siyah olduğu için zeminle kusursuz birleşir. */
    background-size: 150% auto;
    background-position: right -0.625rem top 0.9375rem;
    color: var(--c-white);
}

.hero__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(var(--header-h) + var(--hero-gap-top)) clamp(1rem, calc(var(--vw) * 1.6), 2rem);
}


/* ---------- H1: üst etiket + slogan tek başlığın parçaları ---------- */
.hero__heading {
    margin: 0;
    font-size: inherit;
}

/* ---------- Üst etiket ---------- */
.hero__eyebrow {
    display: block;
    color: var(--c-yellow);
    font-size: clamp(0.75rem, calc(var(--vw) * 0.73), 0.9375rem);
    font-weight: var(--fw-bold);
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* ---------- Başlık ---------- */
.hero__title {
    display: block;
    margin-block-start: var(--hero-gap-title);
    /* Tasarım değerinin 0.9 katı */
    font-size: clamp(2.1375rem, calc(var(--vw) * 5.247), 6.3rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.035em;
    line-height: 1;
}

.hero__title-line {
    display: block;
}

/* Birinci satır gri — "Şablon yazmıyoruz." */
.hero__title-line--muted {
    color: var(--c-gray-500);
}


/* ---------- Açıklama ---------- */
.hero__lead {
    max-width: min(50vw, 60rem);
    margin-block-start: var(--hero-gap-lead);
    color: var(--c-gray-400);
    font-size: clamp(1rem, calc(var(--vw) * 1.1), 1.375rem);
    line-height: 1.75;
}


/* ---------- Butonlar ---------- */
.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-block-start: var(--hero-gap-actions);
}

.hero__actions .btn {
    height: clamp(3rem, calc(var(--vw) * 3.23), 3.875rem);
    padding-inline: clamp(1.5rem, calc(var(--vw) * 2.1), 2.5rem);
    font-size: clamp(0.9375rem, calc(var(--vw) * 0.89), 1.0625rem);
    font-weight: var(--fw-semibold);
}


/* ---------- İletişim satırı + telefon görseli ---------- */
.hero__contact {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, calc(var(--vw) * 0.85), 1rem);
    margin-block-start: var(--hero-gap-contact);
}

/* Negatif marj görseli tam olarak viewport'un sol kenarına oturtur:
   %50 = container içeriğinin yarısı, 50vw = ekranın yarısı → aradaki fark
   container'ın sol boşluğu kadar eder. Akışta kaldığı için yazıyı ezmez. */
.hero__phone {
    flex-shrink: 0;
    width: clamp(4.5rem, calc(var(--vw) * 6.77), 8.125rem);
    margin-inline-start: calc(50% - 50vw);
    /* Görsel yazı satırının altına ve üstüne taşar ama negatif blok marjları
       sayesinde satır yüksekliğini büyütmez — tasarımdaki gibi. Aksi halde
       ~85px fazladan yükseklik ekleyip alttaki şeridi ekran dışına itiyordu. */
    margin-block: clamp(-3.5625rem, calc(var(--vw) * -2.97), -1.75rem) clamp(-1.75rem, calc(var(--vw) * -1.46), -0.875rem);
    pointer-events: none;
    user-select: none;
}

.hero__contact-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.5rem, calc(var(--vw) * 0.83), 1rem);
    font-size: clamp(1rem, calc(var(--vw) * 1.3), 1.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.hero__contact-label { color: var(--c-yellow); }
.hero__contact-sep   { color: var(--c-gray-600); }

.hero__contact-info a {
    transition: color var(--t-fast);
}

.hero__contact-tel   { color: var(--c-white); }
.hero__contact-tel:hover { color: var(--c-yellow); }

.hero__contact-mail  { color: var(--c-yellow); }
.hero__contact-mail:hover { color: var(--c-white); }


/* ---------- EST. 2026 ---------- */
.hero__meta {
    padding-block-end: clamp(0.75rem, calc(var(--vw) * 1.25), 1.5rem);
    color: var(--c-gray-600);
    font-size: clamp(0.6875rem, calc(var(--vw) * 0.68), 0.8125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.18em;
    text-align: end;
    text-transform: uppercase;
}


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

/* Küçük mobilde ikinci cümle ve e-posta gizleniyor — tasarımdaki gibi */
@media (max-width: 767px) {
    .hero {
        --hero-gap-top: 5rem;
        --hero-gap-contact: 3.5rem;
    }

    .hero__lead {
        max-width: none;
        line-height: 1.7;
    }

    .hero__lead-extra,
    .hero__contact-mail,
    .hero__contact-info .hero__contact-sep:last-of-type {
        display: none;
    }
}

@media (min-width: 768px) {
    .hero {
        background-image: url('../images/main-bg.webp');
        background-size: cover;
        background-position: center right;

        /* Dikey ritim ekran YÜKSEKLİĞİNE bağlanıyor.
           Yazı boyutu --vw ile 1550px'de donuyor; boşluklar da onunla donsaydı
           uzun ekranlarda içerik sıkışıp üstte/altta ölü alan bırakırdı.
           Oranlar 1920x1030 tasarımından alındı. */
        --hero-gap-top: clamp(2rem, 10.1vh, 10rem);
        --hero-gap-title: clamp(0.75rem, 2.33vh, 2.25rem);
        --hero-gap-lead: clamp(1.25rem, 3.9vh, 3.75rem);
        --hero-gap-actions: clamp(1.5rem, 4.85vh, 4.5rem);
        --hero-gap-contact: clamp(2rem, 12vh, 11rem);
    }

    .hero__body {
        padding-block-end: clamp(1rem, 2.4vh, 2.5rem);
    }

    .hero__meta {
        padding-block-end: clamp(0.75rem, 1.8vh, 1.75rem);
    }

    /* Grid + fit-content: iki buton da en geniş olanın boyutuna eşitlenir.
       Sabit genişlik vermeye gerek yok, yazılar değişse de eşit kalırlar. */
    .hero__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: fit-content;
        gap: clamp(0.75rem, calc(var(--vw) * 0.85), 1rem);
    }
}