/* Bölüm: sayfa başlığı (alt sayfa açılışı). */

.ph-single {
    max-width: 64ch;
    margin-inline: auto;
    text-align: center;
}

.ph-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}

.ph-title {
    font-size: var(--fs-h1);
    line-height: 1.12;
    letter-spacing: var(--ls-display);
    color: var(--ink-900);
}

.ph-single .ph-title { max-width: 24ch; margin-inline: auto; }
.ph-split .ph-title  { max-width: 20ch; }

.ph-lead {
    margin-top: var(--sp-5);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-600);
}

.ph-single .ph-lead { max-width: 58ch; margin-inline: auto; }

.section--deep .ph-title { color: #fff; }
.section--deep .ph-lead  { color: var(--ink-300); }

@media (max-width: 900px) {
    .ph-split { grid-template-columns: minmax(0, 1fr); }
    .ph-split .ph-title { max-width: 24ch; }
}

/* Fotoğraf varyantı — ürün ekranı çerçevesi YOK.
   Görselin panel ekranı sanılmaması için bilinçli olarak sade. */
.ph-photo {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}

.ph-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ============================================================
   "banner" varyantı — her sayfanın ilk bandı

   Renkli degrade zemin, SOLDA başlık + kısa açıklama, SAĞDA konuyla
   ilgili içerik görseli. Görsel rastgele bir stok fotoğraf değil, o
   sayfanın anlattığı işi gösteren kare olmalıdır.

   Zemin bölüm ayarından bağımsız olarak degradedir: ilk bant her sayfada
   aynı görünsün diye. Bu yüzden metin renkleri de burada sabitlenir.
   ============================================================ */

/* Header bu bandın ÜSTÜNDE şeffaf duruyor (headerOverlay). Bant bu yüzden
   sayfanın en tepesinden başlar ve içeriğin header'ın altında kalmaması için
   üstten fazladan boşluk alır: üst şerit (~44px) + navigasyon (~72px). */
/* ------------------------------------------------------------------
   DİKEY GEÇİŞ: koyu → turkuaz → beyaz

   Bant artık yukarıdan aşağı açılıyor ve altta beyaza kavuşuyor; bir
   sonraki bölüme dikişsiz bağlanıyor.

   METİN NEREDE BİTİYOR — KURALIN TAMAMI BU.
   Beyaz metin #0e7490 üstünde 4,79:1 verir; ama açık turkuazın (#7dd3fc)
   üstünde 1,9:1'e düşer, yani okunmaz. Bu yüzden geçişin AÇIK KISMI
   yüzdeyle değil, ALTTAN PİKSELLE tanımlanıyor:

     · açık turkuaz, bandın son 140 px'inde başlar
     · beyaz, son 55 px'de tamamlanır
     · padding-bottom EN AZ 180 px

   İçerik kutusu bandın altından padding kadar yukarıda bittiği için,
   en alttaki metin her zaman koyu bölgede kalır. GÜVENLİ PAY = 180 − 140
   = 40 px ve bu paranın tamamı hesaplanmış: iki sayıdan biri değişirse
   diğeri de değişmeli. (İlk denemede pay 20 px'ti; ölçülüp açıldı.)
   ------------------------------------------------------------------ */
.sc-page-header--banner {
    padding-top: clamp(144px, 5vw + 108px, 168px);
    padding-bottom: clamp(180px, 12vw, 220px);
    background: linear-gradient(180deg,
                #0f172a 0%,
                #123c52 44%,
                #0e7490 calc(100% - 140px),
                #7dd3fc calc(100% - 55px),
                #ffffff 100%);
    color: #fff;
}

/* Dar ekranda bant çok uzun kalıyordu: içerik bittikten sonra 220 px boş
   zemin ölçüldü, üstüne bir sonraki bölümün dolgusu binince telefonda
   bariz bir boşluk oluyordu.

   Geçişin ÜÇ SAYISI BİRLİKTE küçültüldü — yukarıdaki kural gereği ikisi
   ayrı değiştirilemez:
     · açık turkuaz son 140 → 72 px
     · beyaz         son  55 → 28 px
     · padding-bottom    180 → 112 px
   Güvenli pay yine 112 − 72 = 40 px, yani en alttaki metin hâlâ koyu
   bölgede kalıyor. Üst dolguya DOKUNULMADI: mobil header 126 px ve
   başlıkla arasında yalnızca 18 px pay var. */
@media (max-width: 640px) {
    .sc-page-header--banner {
        padding-bottom: 112px;
        background: linear-gradient(180deg,
                    #0f172a 0%,
                    #123c52 44%,
                    #0e7490 calc(100% - 72px),
                    #7dd3fc calc(100% - 28px),
                    #ffffff 100%);
    }
}

.sc-page-header--banner .ph-title { color: #fff; }

/* Alt metin ARTIK ink-300 DEĞİL.
   Bant tek renk koyuyken ink-300 (#cbd5e1) yeterliydi; dikey geçişte
   metnin oturduğu en açık ton #0e7490'a çıktı ve ölçüm 3,61:1 verdi
   (20 px metin için eşik 4,5:1). %92 beyaz aynı yerde 4,80:1. */
.sc-page-header--banner .ph-lead { color: rgba(255, 255, 255, 0.92); }

/* Metin sütunu biraz dar: başlık iki-üç satırda kalsın */
.sc-page-header--banner .ph-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
}

.sc-page-header--banner .ph-split .ph-title { max-width: 18ch; }
.sc-page-header--banner .ph-lead { max-width: 46ch; }

/* Görsel: yuvarlatılmış kart, koyu zeminde yüzer gibi durur */
.ph-photo--banner {
    position: relative;
    border-radius: var(--r-xl);
    box-shadow: 0 30px 60px rgba(2, 6, 23, 0.45);
}

.ph-photo--banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: inherit;
}

/* ============================================================
   KESİM görseli — çerçeve YOK

   Arka planı kesilmiş (alfa kanallı) bir görsel kart çerçevesine
   konulmamalı. Ölçüldü: `.ph-photo` yuvarlak köşe + gölge + `overflow:
   hidden` ile kutu çiziyor, `img` da `aspect-ratio: 16/10` + `object-fit:
   cover` ile KIRPIYOR. 1,87 oranındaki bir kesimde bu, sağdaki yüzen kartı
   kesiyordu ve görsel "çerçeveye sıkışmış, kenarından kırpılmış" duruyordu.

   Burada üçü birden kapatılır: kutu, gölge ve oran zorlaması. Görsel kendi
   doğal oranıyla, koyu bandın üstünde serbest durur — sitenin geri kalanında
   kullanılan çerçevesiz figür diliyle aynı.
   ============================================================ */
.ph-photo--cutout,
.ph-photo--banner.ph-photo--cutout {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

.ph-photo--cutout img {
    width: 100%;
    height: auto;
    /* Doğal oranı korur: width/height nitelikleri media kaydından geliyor */
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    /*
     * DİKEY kesimler için tavan. Telefon mockup'ı 0,514 oranında; sütun
     * genişliğinde (493px) serbest bırakılsa 959px yükseklik isterdi ve bant
     * iki katına çıkardı. `contain` sayesinde görsel yüksekliğe sığar,
     * yatayda ortalanır — kırpılmaz.
     */
    max-height: 30rem;
}

/* .ph-badge KALDIRILDI — görselin üstünde yüzen etiket artık çizilmiyor.
   Çerçevenin dışına taşıyor, metni kırpılıyor ve sayfa başlığının zaten
   söylediğini tekrar ediyordu (bkz. page-header/render.php içindeki not). */

/* Bantta buton beyaz zeminli: degrade üstünde en yüksek kontrast */
.sc-page-header--banner .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--ink-900);
}

.sc-page-header--banner .btn--primary:hover {
    background: var(--brand-50);
    border-color: var(--brand-50);
    color: var(--ink-900);
}

.sc-page-header--banner .btn--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.sc-page-header--banner .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

@media (max-width: 900px) {
    .sc-page-header--banner .ph-split { grid-template-columns: minmax(0, 1fr); }
    .sc-page-header--banner .ph-split .ph-title { max-width: 22ch; }
}

/* Banttaki butonlar tek satırda kalsın: metin sütunu 454 px ve iki büyük buton
   yan yana sığmayıp alt alta düşüyordu. Bantta bir tık küçük kullanılır. */
.sc-page-header--banner .sc-actions {
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}

.sc-page-header--banner .sc-actions .btn {
    padding: 12px 20px;
    font-size: var(--fs-sm);
}

/* ============================================================
   Bantta form

   Form beyaz bir kart DEĞİL: bandın kendi degrade zeminine oturur.
   Beyaz kart, bandı hem gereksiz yükseltiyor hem de sayfanın açılışını
   iki ayrı bloğa bölüyordu.

   Alanlar iki sütuna dizilir:  ad soyad | telefon
                                e-posta  | buton
   DOM sırası da bu sırayla basılır (bkz. partials/lead-form.php), böylece
   klavye sırası gözle görülen sırayla aynı kalır.
   ============================================================ */

.ph-form { max-width: 30rem; }

.ph-form__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: #fff;
}

.ph-form__note {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.5;
    /* Degradenin açık ucunda (#0e7490) 4,79:1 */
    color: var(--brand-100);
}

/* --- Koyu zeminde alanlar --- */

.sc-page-header--banner .ph-form .field__label {
    margin-bottom: 6px;
    font-size: var(--fs-xs);
    color: var(--brand-100);
}

.sc-page-header--banner .ph-form .field__control {
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.1);
    /* Kenarlık, alanın nerede başladığını gösteren TEK işaret; degradenin en
       açık ucuna karşı 3:1 eşiğini geçmesi gerekiyor (WCAG 1.4.11).
       %32 opaklık 2,35:1 veriyordu, %45 ile 3,2:1 olur. */
    border-color: rgba(255, 255, 255, 0.45);
    font-size: var(--fs-sm);
    color: #fff;
}

.sc-page-header--banner .ph-form .field__control::placeholder {
    /* %60 opaklık alan zemininde 3,6:1 kalıyordu */
    color: rgba(255, 255, 255, 0.75);
}

.sc-page-header--banner .ph-form .field__control:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* Tarayıcı otomatik doldurunca alanı beyaz zemin + siyah yazıya çeviriyor;
   koyu bantta bu okunmaz bir kutu bırakıyordu. İkisini de geri alıyoruz. */
.sc-page-header--banner .ph-form .field__control:-webkit-autofill,
.sc-page-header--banner .ph-form .field__control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 100px #1c3f5c inset;
    caret-color: #fff;
}

.sc-page-header--banner .ph-form .fs-optional { color: rgba(255, 255, 255, 0.65); }

/* --- İki sütunlu ızgara --- */

.ph-form .fs-form--compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-5);
    align-items: end;
}

/* Yığılmış düzenin alan aralığı ızgarada gereksiz boşluk yapıyor */
.ph-form .fs-form--compact > .field + .field { margin-top: 0; }

.ph-form .fs-form--compact .fs-submit {
    margin-top: 0;
    padding: 10px var(--sp-5);
    font-size: var(--fs-sm);
}

.ph-form .fs-form--compact .fs-consent {
    grid-column: 1 / -1;
    margin-top: var(--sp-1);
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}

/* Turnstile kutusu iki sütunu birden kaplasın */
.ph-form .fs-form--compact .cf-turnstile { grid-column: 1 / -1; }

/* Gönderildi mesajı da bandın zemininde kalır */
.sc-page-header--banner .ph-form .fs-success {
    padding: var(--sp-5);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--r-lg);
}

.sc-page-header--banner .ph-form .fs-success__title { color: #fff; }
.sc-page-header--banner .ph-form .fs-success__text  { color: var(--brand-100); }

.sc-page-header--banner .ph-form .fs-error {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* --- Formlu bantta yükseklik --- */

/* Sağdaki içerik artık fotoğraf değil kısa bir form; bandın alt boşluğu ve
   metin sütunu buna göre daralır. */
.sc-page-header--banner:has(.ph-form) {
    padding-bottom: clamp(var(--sp-10), 3vw, var(--sp-12));
}

.sc-page-header--banner:has(.ph-form) .ph-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.sc-page-header--banner:has(.ph-form) .ph-title {
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
}

.sc-page-header--banner:has(.ph-form) .ph-lead {
    margin-top: var(--sp-4);
    font-size: var(--fs-body);
    max-width: 46ch;
}

@media (max-width: 900px) {
    /* Yukarıdaki :has() kuralı, bandın genel mobil yığılma kuralından daha
       özgül olduğu için onu eziyordu ve form dar ekranda 138 px'lik bir şeride
       sıkışıyordu. Aynı özgüllükte geri alıyoruz. */
    .sc-page-header--banner:has(.ph-form) .ph-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
    }

    /* Yığılmış düzende form bandın tamamına yayılmasın; iki alan yan yana
       dururken 681 px'lik bir satır okumayı zorlaştırıyor. */
    .ph-form { max-width: 34rem; }
}

@media (max-width: 560px) {
    /* Dar ekranda iki sütun sığmaz; sıra zaten doğru olduğu için tek sütuna
       düşmek yeterli. */
    .ph-form .fs-form--compact { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   "banner-light" varyantı — koyu zemin olmadan aynı düzen

   Koyu bant her sayfada aynı ağırlıkta bir giriş yapar; bazı sayfalarda
   (fiyatlandırma gibi) bu ağırlık istenmiyor. Bu varyant aynı iki sütunlu
   düzeni açık zeminde kurar:

     · zemin degrade DEĞİL, bölüm ayarından gelir (beyaz/açık)
     · şeffaf header YOK — beyaz header yazısı açık zeminde okunmaz,
       bu yüzden render tarafında headerOverlay verilmiyor
     · kapsayıcı geniş, başlık daha küçük ve daha uzun satırlı
   ============================================================ */

.sc-page-header--banner-light {
    padding-top: clamp(var(--sp-12), 4vw, var(--sp-16));
    padding-bottom: clamp(var(--sp-12), 4vw, var(--sp-16));
    /* Koyu bant gibi bu da altta beyaza kavuşur; farkı üstte koyu ton
       olmaması. Metin zaten koyu olduğu için burada kontrast riski yok. */
    background-image: linear-gradient(180deg, transparent 55%, #ffffff 100%);
}

/* Başlık koyu banttakinden bir kademe küçük ve daha geniş yayılır:
   "yay ve küçült" — dört satıra bölünen bir başlık bandı gereksiz uzatıyor. */
.sc-page-header--banner-light .ph-title {
    max-width: 26ch;
    font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
}

.sc-page-header--banner-light .ph-lead { max-width: 52ch; }

/* Geniş kapsayıcıda metin sütunu görselden biraz dar kalsın: yatay
   görselin nefes alacak yeri olsun. */
.sc-page-header--banner-light .ph-split {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
}

/* Yatay logo panosu çerçevesiz durur; kart gölgesi ve 16:9 kırpma
   panoyu kesiyordu (bkz. ph-photo--cutout). */
.sc-page-header--banner-light .ph-photo--cutout img { max-height: 22rem; }

@media (max-width: 900px) {
    /* Tek sütuna DÜŞÜRÜLMESİ gerekiyor: dosyanın başındaki
       `@media .ph-split { 1fr }` kuralı 0-1-0 özgüllükte, buradaki
       `.sc-page-header--banner-light .ph-split` ise 0-2-0 — özgül olan
       medya sorgusunun içinde de kazanıyor ve mobilde iki sütun kalıyordu.
       Ölçüldü: 375 px'te logo panosu 153 px'e düşüyordu. */
    .sc-page-header--banner-light .ph-split { grid-template-columns: minmax(0, 1fr); }
    .sc-page-header--banner-light .ph-title { max-width: 24ch; }
}

/* ------------------------------------------------ açık bantta form kartı */

/* Koyu bantta form zemine oturuyor (yukarıdaki nota bkz.). Açık bantta bu
   çalışmıyor: alanlar da zemin de açık, formun nerede başladığı belli
   olmuyor. Açık bantta form BEYAZ KART olur; bölüm zemini `soft` seçilirse
   kart zeminden ayrılır.

   Başlık ve not renkleri koyu banta göre yazılmıştı (#fff / brand-100);
   burada koyu metne çevriliyor. */

.sc-page-header--banner-light .ph-form {
    max-width: none;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
    border: 1px solid var(--border);
}

/* Beyaz üstünde ink-900 → 17,9:1 */
.sc-page-header--banner-light .ph-form__title { color: var(--ink-900); }

/* Beyaz üstünde ink-600 → 7,4:1 */
.sc-page-header--banner-light .ph-form__note { color: var(--ink-600); }