/* ═══════════════════════════════════════════════════════════════════════════
   VHENA — TASARIM SİSTEMİ
   ---------------------------------------------------------------------------
   🔴 K-028 (15.10.2026): BU SİTENİN GÖRSEL DÜZENİ https://beaconsdm.com
      sitesinin düzenidir. Müşteri "aynı böyle olsun" dedi. Bölüm ritmi,
      kahraman, ölçü panosu, hizmet kartları ızgarası, iki kolonlu bant,
      şerit, SSS akordeonu, iletişim bölümü ve dört kolonlu alt bilgi
      ORADAN alınmıştır; ölçüler o siteden OKUNARAK yazıldı:
        kap 1240px · H1/H2 40px · H3/H4 24px · gövde 15px/1.65
        düğme yarıçapı 5px, dolgu 10px 20px · bölüm dolgusu 100px 0
        Montserrat 700 (başlık) + Open Sans 400/600 (gövde)

   🔴 AYNI OLMAYAN ÜÇ ŞEY (ve nedeni):
      1) RENK VE YÜZEY. Beacon'un parlak mavisi #0085FF yerine MÜŞTERİNİN KENDİ
         resmî rengi — ufuk mavisi ailesi — AYNI ROLLERDE kullanılır (K-022).
         🔴 15.10.2026 AKŞAMI: müşteri "arka fon çok karanlık", "AÇIK MAVİ ZEMİN
         ÇOK DAHA İYİ" dedi. Yüzeyler ufuk mavisinin AÇIK basamaklarına taşındı:
         zemin #EEF4F8, ikinci bant #DCE8F0, kart kâğıt. Koyu basamaklar yalnız
         kahraman örtüsü, iç sayfa afişi, mavi panel ve alt bilgide kaldı.
         #5586A6 metin rengi DEĞİLDİR (beyazda 3.93); koyu yüzeyde aksan metni
         --ufuk-isik #79B2D4, açık yüzeyde --ufuk-derin #2F5A72.
      2) DİL. K-015 yürürlükte: birinci çoğul şahıs yok. Menüde "Hizmetler",
         "Hizmetlerimiz" DEĞİL.
      3) FOTOĞRAF. Beacon foto yoğun; Vhena'da yalnız müşterinin gönderdiği
         dört kare var. Fotoğrafı olmayan görsel yuvası MARKA RENKLİ PANEL
         olarak çizilir — stok fotoğraf konulmaz (K-002, K-024).

   🔴 SATIR İÇİ style= VE SAYFA İÇİ <style> YOKTUR (K-010): CSP'nin
      style-src 'self' kuralı buna dayanır.

   BÖLÜMLER
     01 YAZI TİPLERİ      06 BÖLÜM BAŞLIĞI      11 SSS AKORDEONU
     02 JETONLAR          07 HİZMET KARTLARI    12 İLETİŞİM BÖLÜMÜ
     03 TEMEL             08 İKİ KOLONLU BANT   13 ALT BİLGİ
     04 ÜST BANT          09 ŞERİT              14 İÇ SAYFALAR
     05 KAHRAMAN          10 ÖLÇÜ PANOSU        15 HAREKET · BASKI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════ 01 · YAZI TİPLERİ ══════════════════════════════════════
   🔴 KENDİ SUNUCUMUZDAN. Google Fonts bağlantısı YOK: ziyaretçinin IP adresi
      üçüncü tarafa gitmez ve CSP'de font-src 'self' kalır. İkisi de değişken
      yazı tipidir — tek dosya bütün kalınlıkları taşır.                      */

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-latin.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-latin-ext.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══════════════════ 02 · JETONLAR ══════════════════════════════════════════
   Beacon'un rol tablosu, Vhena'nın renkleriyle. Sağdaki değerler ölçülmüştür. */

:root {
    /* 🔴 TEK TEMA, AÇIK MAVİ YÜZEY (müşteri kararı 15.10.2026 akşamı:
       "arka fon çok karanlık", "AÇIK MAVİ ZEMİN ÇOK DAHA İYİ").
       Aynı günün sabahında konan koyu tema bu kararla değişti; Beacon'un
       bölüm RİTMİ aynen duruyor, yalnız yüzeyler ufuk mavisinin AÇIK
       basamaklarına taşındı. İşletim sistemi koyu temada olsa bile site
       açık kalır. */
    color-scheme: light;

    /* ── Açık yüzeyler — SİTENİN ZEMİNİ ─────────────────────────── */
    --zemin:       #EEF4F8;   /* ana zemin: açık mavi (ufuk-sis)      */
    --zemin-2:     #DCE8F0;   /* ikinci bant: bir basamak koyu (puslu) */
    --kagit:       #FFFFFF;   /* kart/kutu yüzeyi                     */

    /* ── Koyu basamaklar — YALNIZ AKSAN ─────────────────────────── */
    --gece:        #1B3A4D;   /* alt bilgi ve en koyu aksan bant      */
    --lacivert:    #24485C;   /* kahraman örtüsü, koyu aksan          */
    --lacivert-us: #2F5A72;

    /* ── Ufuk hüzmesi — müşterinin resmî rengi (K-022) ───────────── */
    --ufuk-gece:   #24485C;
    --ufuk-derin:  #2F5A72;   /* beyaz yazı 7.43 · açık zeminde başlık */
    --ufuk-koyu:   #47738F;   /* "parlak mavi panel" rolü · beyaz yazı 5.10 */
    --ufuk:        #5586A6;   /* YÜZEY/KENAR/GRAFİK — metin rengi DEĞİL */
    --ufuk-isik:   #79B2D4;   /* koyu ÖRTÜ üzerinde aksan metni (kahraman, afiş) */
    /* 🔴 İKİ KOLONLU BANDIN DÜZ KOYU ZEMİNİNDE (#24485C) --ufuk-isik 4.23
       ölçüyor, eşik 4.5 — göz kaşı dar ekranda 16 px'e indiği için "büyük
       metin" sayılmıyor. Bir basamak açık ton: 4.86 (15.10.2026 ölçüldü). */
    --ufuk-acik:   #8CBDDB;
    --ufuk-puslu:  #DCE8F0;
    --ufuk-sis:    #EEF4F8;

    /* ── Eylem ───────────────────────────────────────────────────── */
    --turuncu:     #FF9302;   /* zemin/aksan — ASLA yazı rengi (K-018) */
    --turuncu-koyu:#D97A00;

    /* ── Mürekkep ────────────────────────────────────────────────── */
    --murekkep:    #1A1D21;   /* açık mavi zeminde 15.6 */
    --kagit-yazi:  #3C4850;   /* ikincil satır · açık mavide 8.46 */
    --koyu-yazi:   #FFFFFF;   /* KOYU aksan bandında gövde */
    --koyu-sol:    #D4E3EC;   /* koyu aksan bandında ikincil satır */

    /* ── Kenar ───────────────────────────────────────────────────── */
    --kenar-koyu:  #BCD0DD;   /* açık yüzeydeki ayırıcı çizgi */
    --kenar-acik:  #D8E2E9;
    /* 🔴 ETKİLEŞİMLİ KENAR 3:1 OLMAK ZORUNDA ve en AÇIK zemine göre ölçülür.
       İlk değer #6E93AB, --ufuk-sis (#EEF4F8) üzerinde 2.95 ölçtü — eşiğin
       altı (15.10.2026 canli_denetim). İki basamak koyulaştırıldı: 3.11. */
    --kenar-et:    #648AA2;

    /* ── Ölçü ────────────────────────────────────────────────────── */
    --kap:         1240px;
    --bolum-dolgu: 100px;
    --yaricap:     5px;

    --golge:       0 14px 40px rgba(0, 0, 0, .28);
}

/* ══════════════════ 03 · TEMEL ═════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* 🔴 `clip`, `hidden` DEĞİL: hidden olunca html/body kaydırma kabı olur ve
       sticky öğeler ile kaydırma çapası bozulur (ölçülmüş kusur). */
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;

    /* 🔴 YAPIŞKAN BANDIN YÜKSEKLİĞİ KADAR KAYDIRMA PAYI (WCAG 2.2 AA 2.4.11
       "Focus Not Obscured"). Bu satır olmadan Shift+Tab ile geri yürürken ya da
       bir çıpaya giderken hedef öğe 87 px'lik bandın TAM ALTINDA kalıyordu —
       teklif formunun konu seçicisi dahil (15.10.2026 ikinci denetim).
       🔴 Tek yerde durur: .hizmet-blok'taki ayrı scroll-margin-top bu yüzden
       kaldırıldı, iki ayrı sabit tutmak bandın yüksekliği değişince ikisini de
       güncellemeyi gerektiriyordu. */
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--zemin);
    color: var(--murekkep);
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', 'Open Sans', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(30px, 4.4vw, 40px); }
h2 { font-size: clamp(27px, 3.6vw, 40px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); }
h4 { font-size: clamp(18px, 2vw, 24px); }

p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child { margin-bottom: 0; }

/* 🔴 BAĞLANTI RENGİ --ufuk-derin: açık mavi zeminde 6.70, puslu bantta 5.88,
   beyazda 7.43 ölçer. --ufuk-koyu puslu bantta 4.04'e düşüyordu (eşik 4.5). */
a { color: var(--ufuk-derin); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

:focus-visible {
    outline: 3px solid var(--turuncu);
    outline-offset: 2px;
    border-radius: 2px;
}

.kap {
    max-width: var(--kap);
    margin-inline: auto;
    padding-inline: 20px;
    width: 100%;
}

/* Betiksiz "içeriğe atla" bağlantısı. */
.atla {
    position: absolute; left: -9999px; top: 0; z-index: 99;
    background: var(--turuncu); color: var(--murekkep);
    padding: 12px 20px; font-weight: 700;
}
.atla:focus { left: 0; }

/* Kaydırma ilerleme çizgisi — betiksiz (scroll-driven). */
.ilerleme {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
    background: var(--turuncu);
    transform-origin: 0 50%;
    animation: ilerle linear;
    animation-timeline: scroll(root block);
}
@keyframes ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Bal küpü — görünmez ama display:none DEĞİL (bazı botlar onu atlıyor). */
.bal {
    position: absolute !important;
    left: -9999px !important; top: auto !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ── DÜĞME ──────────────────────────────────────────────────────────────────
   Beacon: zemin dolu + beyaz yazı, yarıçap 5px, dolgu 10px 20px, 15px/500.
   Vhena'da birincil düğme TURUNCU: beyaz yazı turuncuda 2.1 ölçer (okunmaz),
   bu yüzden yazı mürekkep — ölçülen 9.4 (K-018).                            */

.dugme {
    display: inline-flex; align-items: center; gap: .5em;
    background: var(--turuncu); color: var(--murekkep);
    border: 1px solid var(--turuncu);
    border-radius: var(--yaricap);
    padding: 12px 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    cursor: pointer; text-align: center;
    transition: background .18s ease, transform .18s ease;
}
.dugme:hover { background: var(--turuncu-koyu); border-color: var(--turuncu-koyu); text-decoration: none; transform: translateY(-1px); }

/* İkincil: Beacon'un "BİZE ULAŞIN" çerçeveli düğmesi (1px beyaz, yarıçap 2px). */
.dugme.ikincil {
    background: transparent; color: var(--kagit);
    border: 1px solid var(--kagit); border-radius: 2px;
    padding: 14px 34px;
}
.dugme.ikincil:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }

/* Açık zeminde ikincil düğme: beyaz kenar görünmez olurdu. */
/* 🔴 İKİNCİL DÜĞME ARTIK AÇIK YÜZEY VARSAYILANINDA: site zemini açık mavi,
   beyaz çerçeveli düğme orada 1.11 ölçer — görünmez. Beyaz çerçeve YALNIZ
   koyu aksan bantlarında ve kahramanda kalır. */
.dugme.ikincil { color: var(--ufuk-derin); border-color: var(--kenar-et); }
.dugme.ikincil:hover { background: var(--kagit); }
/* 🔴 KAHRAMAN BU LİSTEDE YOK: 15.10.2026 akşamı açık mavi zemine geçti ve
   beyaz çerçeveli düğme orada görünmez oluyordu (ölçüldü: "Servis portalı"
   düğmesi açık zeminde 1.11). Beyaz çerçeve YALNIZ gerçekten koyu kalan
   yüzeylerde durur. */
.bolum.mavi .dugme.ikincil, .bolum.gece .dugme.ikincil,
.ikili-yuz .dugme.ikincil, .cagri .dugme.ikincil {
    color: var(--kagit); border-color: var(--kagit);
}
.bolum.mavi .dugme.ikincil:hover, .bolum.gece .dugme.ikincil:hover,
.ikili-yuz .dugme.ikincil:hover,
.cagri .dugme.ikincil:hover { background: rgba(255, 255, 255, .14); }

/* Beacon'un mavi panel içindeki BEYAZ düğmesi. */
.dugme.beyaz {
    background: var(--kagit); color: var(--ufuk-derin);
    border-color: var(--kagit);
}
.dugme.beyaz:hover { background: var(--ufuk-sis); border-color: var(--ufuk-sis); }

.dugme-grubu { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ══════════════════ 04 · ÜST BANT ══════════════════════════════════════════
   Beacon: beyaz zemin, solda logo, ortada/sağda menü, en sağda mavi düğme.
   Menü maddesi üstüne gelince turuncu olur.                                  */

.ust {
    position: sticky; top: 0; z-index: 50;
    background: var(--kagit);
    border-bottom: 1px solid var(--kenar-acik);
}

.ust-ic {
    display: flex; align-items: center; gap: 24px;
    min-height: 86px; padding-block: 10px;
}

.marka { display: flex; align-items: center; gap: 12px; color: var(--ufuk-derin); }
.marka:hover { text-decoration: none; }
.marka img { height: 46px; width: auto; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1.05; }
.marka-ad {
    font-family: 'Montserrat', sans-serif; font-weight: 800;
    font-size: 26px; letter-spacing: .06em; color: var(--ufuk-derin);
}
.marka-alt {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--kagit-yazi); font-weight: 600;
}

.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: nowrap; }

/* Düz menü maddeleri. Açılır grupların başlığı artık bağlantı değil
   <summary>; onun biçimi aşağıdaki .menu-grup > summary kuralında. */
.menu > a {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--murekkep);
    padding: 10px 12px; border-radius: 3px;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
/* 🔴 ETKİN/ÜSTÜNDE MADDE TURUNCU YAZI DEĞİLDİR (K-018: turuncu yazı rengi
   olmaz; beyazda 3.12 ölçüldü, eşik 4.5). İşaret RENKLE DEĞİL, koyu mavi yazı
   + 2 px turuncu alt çizgiyle verilir: hem ölçülebilir hem ekran okuyucuda
   aria-current ile zaten bildiriliyor. */
.menu > a:hover { color: var(--ufuk-derin); text-decoration: none; }
.menu > a[aria-current="page"] {
    color: var(--ufuk-derin);
    box-shadow: inset 0 -2px 0 var(--turuncu);
}
.menu > a .bi { font-size: 17px; }

/* Açılır menü — BETİKSİZ ve TIKLAMAYA BAĞLI.
   🔴 ÖNCE :hover + :focus-within İLE AÇILIYORDU; o kalıp WCAG 2.1 AA 1.4.13
      "Dismissable" maddesini çiğniyordu: panel sayfa içeriğini örtüyor ve
      betiksiz bir sitede Escape ile kapatılamıyordu (15.10.2026 denetimi).
      <details> ile içerik ETKİNLEŞTİRMEYLE açılır — 1.4.13 yalnız hover/odakla
      açılan içeriğe uygulandığı için tetik tamamen ortadan kalkar.
   🔴 BUNUN YAN FAYDASI: panel kapalıyken bağlantılar sekme sırasında yok,
      açıkken var — yani İKİ YÖNDE de doğru davranır. (opacity+clip-path
      numarasına artık gerek yok, o da bu yüzden kaldırıldı.)
   🔴 Beacon'da menü fareyle açılıyor, burada tıklamayla: ÖLÇÜLEBİLİR
      erişilebilirlik, taklidin önünde gelir. */
.menu-grup { position: relative; }
.menu-grup > summary {
    list-style: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--murekkep);
    padding: 10px 12px; border-radius: 3px;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.menu-grup > summary::-webkit-details-marker { display: none; }
.menu-grup > summary::after {
    content: ''; width: 7px; height: 7px; margin-left: 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}
.menu-grup > summary:hover { color: var(--ufuk-derin); }
.menu-grup[open] > summary { color: var(--ufuk-derin); }
.menu-grup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* Grubun bir alt maddesi etkinken başlık da işaretlenir. */
.menu-grup.etkin > summary { box-shadow: inset 0 -2px 0 var(--turuncu); }

/* 🔴 details name="ustmenu" DESTEKLEMEYEN tarayıcıda (Firefox 121-129,
   Safari 15.4-17.1) iki panel birden açık kalıyor ve 159x147 px ÜST ÜSTE
   biniyordu: Kurumsal panelinin üç bağlantısının tamamı Hizmetler panelinin
   altında kalıyordu (15.10.2026 ölçüldü — koddaki "kırılma olmaz" varsayımı
   ölçümle yanlışlandı). :has() desteği, name desteği olmayan sürümlerin
   TAMAMINI kapsıyor: sonrasında başka bir grup daha açıksa önceki gizlenir. */
.menu-grup[open]:has(~ .menu-grup[open]) > .menu-panel { display: none; }

/* 🔴 KAPALIYKEN AÇIKÇA GİZLENİR. <details>'in kapalı durumu tarayıcıya göre
   `display:none` ya da `content-visibility:hidden` ile sağlanıyor; .menu-panel'e
   `display: flex` yazmak o varsayılanı EZEBİLİR ve panel kapalıyken ekranda
   kalabilir. Bu satır davranışı tarayıcıdan bağımsız kılar (15.10.2026 ölçüldü:
   kapalı panelin bağlantıları hâlâ 'görünür' ölçüyordu). */
.menu-grup:not([open]) > .menu-panel { display: none; }

.menu-panel {
    position: absolute; top: 100%; left: 0; z-index: 70;
    min-width: 290px; padding: 10px;
    background: var(--kagit);
    border: 1px solid var(--kenar-acik);
    border-top: 3px solid var(--turuncu);
    box-shadow: 0 18px 44px rgba(17, 34, 45, .17);
    display: flex; flex-direction: column;
}
.menu-panel a {
    color: var(--murekkep); font-size: 14px; padding: 9px 12px; border-radius: 3px;
}
.menu-panel a:hover { background: var(--ufuk-sis); color: var(--ufuk-derin); text-decoration: none; }
.menu-panel a[aria-current="page"] { color: var(--ufuk-derin); box-shadow: inset 2px 0 0 var(--turuncu); }

.ust-eylem { display: flex; align-items: center; }
.ust-eylem .dugme { padding: 11px 22px; font-size: 13px; }

/* Telefon menüsü — yine <details>, betiksiz. */
.ust-dugme { display: none; margin-left: auto; position: relative; }
.ust-dugme > summary {
    list-style: none; cursor: pointer;
    width: 46px; height: 46px; border: 1px solid var(--kenar-et); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ufuk-derin); font-size: 22px;
}
.ust-dugme > summary::-webkit-details-marker { display: none; }
.ust-dugme .kapat { display: none; }
.ust-dugme[open] .ac { display: none; }
.ust-dugme[open] .kapat { display: inline; }

.mobil-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    width: min(84vw, 320px); max-height: 74vh; overflow-y: auto;
    background: var(--kagit);
    border: 1px solid var(--kenar-acik); border-top: 3px solid var(--turuncu);
    box-shadow: 0 18px 44px rgba(17, 34, 45, .22);
    display: flex; flex-direction: column; padding: 10px;
}
.mobil-panel a {
    color: var(--murekkep); padding: 12px 14px; border-radius: 3px;
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
}
.mobil-panel a:hover { background: var(--ufuk-sis); text-decoration: none; }
.mobil-panel a[aria-current="page"] { color: var(--ufuk-derin); box-shadow: inset 2px 0 0 var(--turuncu); }
.mobil-panel .grup-bas {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--kagit-yazi); padding: 14px 14px 6px; font-weight: 700;
}
/* 🔴 YAN BOŞLUK SIFIR: 640 px altında .dugme width:100% oluyor; üstüne 4 px yan
   boşluk eklenince düğme panelin içerik kutusundan 8 px taşıyor ve panel yatay
   kaydırma alanı kazanıyordu (15.10.2026 ölçüldü). Panelin kendi 10 px dolgusu
   zaten yeterli. */
.mobil-panel .dugme { margin: 10px 0 4px; justify-content: center; }

/* ══════════════════ 05 · KAHRAMAN ══════════════════════════════════════════
   🔴 AÇIK MAVİ ZEMİN, KOYU FOTOĞRAF ÖRTÜSÜ YOK (müşteri kararı 15.10.2026
      akşamı: "ilk sayfada mavi zemin yapalım lütfen", "bu zemin rengi çok daha
      iyi"). Beacon'un kahramanı tam genişlikte koyu bir fotoğraftır; burada
      aynı iki kolonlu kurgu AÇIK zeminde duruyor: solda başlık ve düğmeler,
      sağda fotoğraf. Yazı kendi zemininde okunur, fotoğraf da tam görünür —
      örtü altında kaybolmaz.                                                  */

.kahraman {
    position: relative;
    padding: 84px 0 92px;
    background: linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 100%);
    border-bottom: 1px solid var(--kenar-koyu);
    overflow: hidden;
}

.kahraman-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.sosyal {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-bottom: 30px;
}
.sosyal a {
    width: 34px; height: 34px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ufuk-koyu); color: var(--kagit); font-size: 16px;
}
.sosyal a:hover { background: var(--turuncu); color: var(--murekkep); text-decoration: none; }

.kahraman-bas { max-width: 640px; }

.kahraman h1 {
    color: var(--ufuk-derin);
    font-size: clamp(28px, 3.9vw, 40px);
    margin-bottom: .5em;
}
.kahraman-alt {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(16px, 1.75vw, 19px); font-weight: 600; line-height: 1.5;
    color: var(--murekkep);
    margin: 0 0 .8em;
}
.kahraman-not {
    font-size: 15px; color: var(--kagit-yazi);
    margin-bottom: 0;
}

/* 🔴 SİTEDEKİ TEK SÜREKLİ HAREKET: kahramanın karesi çok yavaş süzülür
   (müşteri isteği 15.10.2026 akşamı: "bir alana hareket ekleyebiliriz").
   🔴 transform: scale() KULLANILMAZ (K-026: ölçeklenen çocuk, üstündeki
      kutuda overflow:hidden DA olsa kaydırma alanını büyütüyor). Bunun
      yerine ÇERÇEVE 16/11, FOTOĞRAF 4/3: object-fit cover dikeyde kırpar ve
      geriye pay bırakır; `object-position` o payda gezer. Yerleşime hiç
      dokunmaz, yalnız boyar. İndirgenmiş harekette tamamen durur. */
.kahraman-gorsel {
    margin: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 6px;
    background: var(--ufuk-derin);
    box-shadow: 0 22px 54px rgba(31, 68, 92, .22);
}
.kahraman-gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

@media (prefers-reduced-motion: no-preference) {
    .kahraman-gorsel img { animation: kahraman-suzul 36s ease-in-out infinite alternate; }
}

@keyframes kahraman-suzul {
    from { object-position: 50% 28%; }
    to   { object-position: 50% 66%; }
}

/* İÇ SAYFA AFİŞİNİN MARKA DOKUSU — koyu afişin üstünde ince ızgara.
   (Kahraman artık açık zeminde ve fotoğrafı sağ kolonda; bu doku YALNIZ
   SayfaAfisi bileşeninde kullanılıyor.) */
.kahraman-desen {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image:
        linear-gradient(rgba(140, 189, 219, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 189, 219, .14) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px;
}

/* İki kolonlu bandın fotoğraflı yüzü — zemin karesi sınıfla verilir (K-010). */
.ikili-foto.k-surec { background-image: url('/img/saha/kesif-planlama.jpg'); }

/* ══════════════════ 06 · BÖLÜM BAŞLIĞI ════════════════════════════════════
   Beacon: küçük H4 "göz kaşı" (24px, mavi ya da beyaz) + altında 40px H2.    */

/* 🔴 BANT ADLARI 15.10.2026 AKŞAMI YENİDEN ANLAMLANDIRILDI (açık mavi karar):
   .sis = ana açık mavi zemin · .kagit = beyaz · .puslu = bir basamak koyu
   .mavi ve .gece = KOYU AKSAN (beyaz yazı), sitede sayılı yerde kullanılır. */
.bolum { padding: var(--bolum-dolgu) 0; position: relative; }
.bolum.sis   { background: var(--zemin); }
.bolum.kagit { background: var(--kagit); }
.bolum.puslu { background: var(--zemin-2); }
.bolum.mavi  { background: var(--ufuk-koyu); }
.bolum.gece  { background: var(--gece); }

/* Açık bantlarda başlık koyu mavi, gövde mürekkep. */
.bolum.sis, .bolum.kagit, .bolum.puslu { color: var(--murekkep); }
.bolum.sis h1, .bolum.sis h2, .bolum.sis h3, .bolum.sis h4,
.bolum.kagit h1, .bolum.kagit h2, .bolum.kagit h3, .bolum.kagit h4,
.bolum.puslu h1, .bolum.puslu h2, .bolum.puslu h3, .bolum.puslu h4 { color: var(--ufuk-derin); }

/* Koyu aksan bantlarda beyaz yazı. */
.bolum.mavi, .bolum.gece { color: var(--koyu-yazi); }
.bolum.mavi h1, .bolum.mavi h2, .bolum.mavi h3, .bolum.mavi h4,
.bolum.gece h1, .bolum.gece h2, .bolum.gece h3, .bolum.gece h4 { color: var(--kagit); }
.bolum.mavi a:not(.dugme), .bolum.gece a:not(.dugme) { color: var(--kagit); text-decoration: underline; }

.bolum-bas { margin-bottom: 52px; max-width: 880px; }
.bolum-bas.orta { margin-inline: auto; text-align: center; }

.gozkasi {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(16px, 1.8vw, 20px); font-weight: 700;
    color: var(--ufuk-koyu);
    margin: 0 0 .35em;
    display: block;
}
.bolum.puslu .gozkasi { color: var(--ufuk-derin); }
.bolum.mavi .gozkasi, .bolum.gece .gozkasi { color: var(--kagit); opacity: .9; }

.bolum-bas h2 { margin-bottom: .4em; }
.bolum-bas p { color: var(--kagit-yazi); max-width: 760px; }
.bolum-bas.orta p { margin-inline: auto; }
.bolum.mavi .bolum-bas p, .bolum.gece .bolum-bas p { color: var(--koyu-sol); }

/* ══════════════════ 07 · HİZMET KARTLARI ══════════════════════════════════
   Beacon: üç sütun, kartın üstünde görsel, altında 24px başlık ve gri özet.
   🔴 Vhena'da fotoğraf yoksa görsel yuvası MARKA RENKLİ PANEL olur: hizmetin
      kendi disiplin rengi + beyaz simge. Stok fotoğraf konulmaz (K-024).     */

.kart-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px 36px;
}
.kart-izgara.iki  { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.kart-izgara.dort { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }

/* 🔴 KART ARTIK BEYAZ YÜZEY: açık mavi zeminde kartın kendisi kâğıt olmazsa
   ızgara tek bir düz bloğa dönüşüyor ve Beacon'un kart ritmi kayboluyor. */
.kart {
    display: flex; flex-direction: column;
    background: var(--kagit);
    border: 1px solid var(--kenar-acik);
    border-radius: 4px;
    overflow: hidden;
}
.kart > h3, .kart > p, .kart > ul { padding-inline: 20px; }
.kart h3 { color: var(--ufuk-derin); margin: 18px 0 .5em; }
.kart p  { color: var(--kagit-yazi); margin: 0 0 20px; }
.kart .liste-isaretli { padding-bottom: 20px; }
.bolum.mavi .kart, .bolum.gece .kart { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.bolum.mavi .kart h3, .bolum.gece .kart h3 { color: var(--kagit); }
.bolum.mavi .kart p,  .bolum.gece .kart p  { color: var(--koyu-sol); }

/* 🔴 KARTIN TAMAMI TIKLANABİLİR AMA BAĞLANTI YALNIZ BAŞLIĞI SARAR.
   Bağlantı kartın tamamını sardığında erişilebilir adı başlık + özet oluyordu.
   Örtü, bağlantının ::after'ıdır: fare davranışı aynı, ad kısa. */
.kart-tik { position: relative; }
.kart-bag { color: inherit; }
.kart-bag::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.kart-tik:hover h3 a { color: var(--turuncu); text-decoration: none; }
.kart-tik { transition: box-shadow .22s ease, transform .22s ease; }
.kart-tik:hover { box-shadow: 0 14px 34px rgba(31, 68, 92, .16); transform: translateY(-3px); }
.kart-bag:focus-visible { outline-offset: 4px; }

.kart-gorsel {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ufuk-derin);
    transition: transform .22s ease;
}
.kart-gorsel img { transition: transform .4s ease; }
.kart-tik:hover .kart-gorsel img { transform: scale(1.045); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Panel hâli: disiplin rengi + ince ızgara dokusu + ortada simge.
   🔴 ÜSTÜNDEKİ KOYU GEÇİŞ ŞART. İlk denemede sekiz panel düz ve doygun renkti;
      yan yana geldiklerinde ızgara "boya kutusu" gibi görünüyordu, oysa
      Beacon'daki kartlar hep aynı tonda koyu depo fotoğraflarıdır. Koyu
      geçiş her paneli aynı laciverde çeker, renk yalnız kimlik olarak kalır. */
.kart-panel {
    display: flex; align-items: center; justify-content: center;
    color: var(--kagit); font-size: 60px;
    background-image:
        linear-gradient(158deg, rgba(17, 34, 45, .06) 0%, rgba(17, 34, 45, .66) 100%),
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: auto, 38px 38px, 38px 38px;
}
.kart-panel::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--turuncu);
}
.kart-panel .bi { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .38)); }

/* Disiplin renkleri — müşterinin sekiz hizmet kalemi (K-012'den devralındı,
   laciverde doğru bir basamak koyulaştırıldı). */
.d-mimari  .kart-panel, .d-mimari.satir-gorsel  { background-color: #24485C; }
.d-kurulum .kart-panel, .d-kurulum.satir-gorsel { background-color: #1A5159; }
.d-kismi   .kart-panel, .d-kismi.satir-gorsel   { background-color: #3C4B36; }
.d-genel   .kart-panel, .d-genel.satir-gorsel   { background-color: #513823; }
.d-ince    .kart-panel, .d-ince.satir-gorsel    { background-color: #68301C; }
.d-bakim   .kart-panel, .d-bakim.satir-gorsel   { background-color: #453858; }
.d-yalitim .kart-panel, .d-yalitim.satir-gorsel { background-color: #5C4710; }
.d-tasima  .kart-panel, .d-tasima.satir-gorsel  { background-color: #7B2117; }

/* ══════════════════ 08 · İKİ KOLONLU BANT ═════════════════════════════════
   Beacon: solda fotoğraflı koyu panel (üstünde göz kaşı + 40px başlık +
   paragraf + düğme), sağda MAVİ panel (başlık + alıntı + dört simgeli satır).
   İki panel tam genişliktedir, kap kullanmaz.                                */

.ikili { display: grid; grid-template-columns: 1fr 1fr; }

/* 🔴 KOYU ZEMİN AÇIKÇA YAZILIR. Fotoğraf ve örtü ayrı KARDEŞ katmanlardır,
   ata değil: ne denetim aracı onları görebiliyor (beyaz yazıyı sayfanın açık
   mavi zeminine göre ölçüp 1.11 diyordu) ne de fotoğraf yüklenmezse panel
   koyu kalıyordu — açık zeminde beyaz yazı okunmaz olurdu. Açık zemine
   geçişte ortaya çıktı (15.10.2026 akşamı ölçüldü). */
.ikili-yuz {
    background: var(--lacivert);
    position: relative; isolation: isolate;
    padding: 84px clamp(24px, 5vw, 76px);
    display: flex; flex-direction: column; justify-content: center;
    min-height: 480px;
    overflow: hidden;
}
.ikili-yuz > * { position: relative; z-index: 1; }

.ikili-foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.ikili-ortu {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, rgba(10, 24, 33, .93), rgba(10, 24, 33, .74));
}
/* 🔴 İKİ KOLONLU BANDIN İKİ YÜZÜ DE KOYU: göz kaşı ve liste beyaz hüzmeden
   okunur. Varsayılan göz kaşı rengi (--ufuk-koyu) burada 1.91 ölçüyordu. */
.ikili-yuz .gozkasi { color: var(--ufuk-acik); }
.ikili-yuz.mavi { background: var(--ufuk-koyu); }
/* 🔴 Göz kaşı varsayılan rengi --ufuk-isik; mavi panelde 2.22 ölçüyor.
   Mavi yüzeyde beyaza döner (ölçülen kusur, 15.10.2026). */
.ikili-yuz.mavi .gozkasi { color: var(--kagit); opacity: .9; }
.ikili-yuz.mavi h3, .ikili-yuz.mavi h2 { color: var(--kagit); }
.ikili-yuz.mavi p, .ikili-yuz.mavi li { color: var(--kagit); }

.ikili-yuz h2 { color: var(--kagit); max-width: 14ch; }
.ikili-yuz p  { color: var(--koyu-sol); max-width: 48ch; }

/* Mavi paneldeki simgeli satırlar. */
.ozellik-liste { list-style: none; margin: 26px 0 0; padding: 0; }
.ozellik-liste li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
    margin: 0;
    /* 🔴 Yalnız koyu panellerde kullanılır; gövde rengini devralırsa açık
       mavi tema sonrası mürekkebe düşüyor ve 1.74 ölçüyor. */
    color: var(--kagit);
}
.ozellik-liste li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.ozellik-liste i { font-size: 19px; line-height: 1.4; flex: none; }

.alinti {
    font-style: italic; font-size: 15px;
    color: var(--kagit); opacity: .95;
    border-left: 3px solid var(--turuncu); padding-left: 18px; margin: 0;
}

/* ══════════════════ 09 · ŞERİT ════════════════════════════════════════════
   Beacon: dört fotoğraf karesi yan yana, her birinin altında beyaz başlık ve
   turuncu alt satır. Boşluk yok — kareler bitişik.                           */

/* 🔴 ALTI KARE 3x2 DİZİLİR, 5+1 DEĞİL. auto-fit minmax(250px) 1440'ta beş
   sütun üretiyor ve altıncı kare tek başına alt satırda kalıyordu. */
.serit { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .serit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .serit { grid-template-columns: 1fr; } }

.serit-kare {
    position: relative; isolation: isolate;
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px 26px;
    overflow: hidden;
    background: var(--ufuk-gece);
}
.serit-kare img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
.serit-kare::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 24, 33, .35) 0%, rgba(10, 24, 33, .9) 76%);
}
.serit-kare h3 { color: var(--kagit); margin: 0 0 .15em; font-size: 20px; }
.serit-kare span {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--turuncu);
}

/* ══════════════════ 10 · ÖLÇÜ PANOSU ═════════════════════════════════════
   Beacon: solda mavi kart (H4 + 40px H2 + paragraf + beyaz düğme),
   sağda 2x2 ölçü ızgarası, hücreler arasında ince ayırıcı çizgi.             */

.pano { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; align-items: stretch; }

.pano-kart {
    background: var(--ufuk-koyu);
    padding: 46px clamp(24px, 3vw, 44px);
    display: flex; flex-direction: column; justify-content: center;
}
/* 🔴 GÖZ KAŞI MAVİ PANELDE BEYAZA DÖNER. Varsayılan rengi --ufuk-isik;
   mavi kartta 2.22 ölçüyor (15.10.2026 canli_denetim). Aynı düzeltme
   .ikili-yuz.mavi için de yazılı. */
.pano-kart h4, .pano-kart h2 { color: var(--kagit); }
.pano-kart .gozkasi { color: var(--kagit); opacity: .9; }
.pano-kart h4 { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.4; margin-bottom: .5em; }
.pano-kart h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: .5em; }
.pano-kart p  { color: var(--kagit); font-size: 14px; }
.pano-kart .dugme { align-self: flex-start; margin-top: 22px; }

.olcu-izgara {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--kagit);
}
.olcu-hucre {
    padding: 38px clamp(20px, 3vw, 40px);
    border-left: 1px solid var(--kenar-koyu);
    border-bottom: 1px solid var(--kenar-koyu);
    display: flex; flex-direction: column; justify-content: center;
    min-height: 150px;
}
.olcu-hucre:nth-child(-n+2) { border-top: 1px solid var(--kenar-koyu); }
/* 🔴 IZGARA TAM GENİŞLİKTEYKEN SOL KENAR ÇİZGİSİ EKRANIN SOL KENARINA DÜŞER:
   sağda karşılığı olmayan 1 px'lik dikey çizgi kalıyordu (641–1120 px arasında
   ölçüldü, 15.10.2026). Tek sütunlu .pano'da ızgara tam genişliktedir. */
@media (max-width: 1120px) {
    .olcu-izgara > .olcu-hucre:nth-child(odd) { border-left: 0; }
}
.olcu-deger {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1;
    color: var(--ufuk-derin);
}
.olcu-etiket { color: var(--kagit-yazi); font-size: 14px; margin-top: 6px; }
/* Koyu aksan bant icindeyse (ör. /misyon-vizyon kartlari) beyaza doner. */
.bolum.mavi .olcu-deger, .bolum.gece .olcu-deger { color: var(--kagit); }

/* ══════════════════ 11 · SSS AKORDEONU ════════════════════════════════════
   Beacon: mavi bantta beyaz başlık, altında koyu satırlar; her satırın
   sağında + işareti. 🔴 BETİKSİZ: <details>/<summary>.                        */

.sss { display: flex; flex-direction: column; gap: 12px; }

/* 🔴 AÇIK MAVİ BANTTA SATIRLAR BEYAZ. Beacon'da canlı mavi bant + koyu satır
   vardı; burada bant açık mavi, satır kâğıt — aynı ritim, açık yüzeyde. */
.sss > details {
    background: var(--kagit);
    border: 1px solid var(--kenar-acik);
    border-radius: 3px;
}
.sss > details[open] { border-color: var(--turuncu); box-shadow: 0 8px 24px rgba(31, 68, 92, .10); }

.sss summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 17px 22px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
    color: var(--ufuk-derin);
}
.sss summary::-webkit-details-marker { display: none; }
/* 🔴 İŞARET METİN DEĞİL ÇİZİMDİR. content:'+' yazıldığında glif, özetin
   ERİŞİLEBİLİR ADINA giriyordu: ekran okuyucu her soruyu "... nedir? artı"
   diye okuyordu (15.10.2026 ölçüldü). Durum zaten expanded=true/false ile
   doğru bildiriliyor, işaretin ada girmesine gerek yok.
   Aynı dosyada doğru kalıp .menu-grup > a::after'da da kullanılıyor. */
.sss summary::after {
    content: ''; flex: none;
    width: 14px; height: 14px; position: relative;
    background:
        linear-gradient(var(--turuncu), var(--turuncu)) center / 14px 2px no-repeat,
        linear-gradient(var(--turuncu), var(--turuncu)) center / 2px 14px no-repeat;
    transition: transform .18s ease;
}
.sss > details[open] summary::after {
    /* açıkken yalnız yatay çizgi kalır: artı -> eksi */
    background: linear-gradient(var(--turuncu), var(--turuncu)) center / 14px 2px no-repeat;
    transform: rotate(180deg);
}
.sss summary:hover { color: var(--turuncu); }

.sss-govde {
    padding: 16px 22px 20px;
    color: var(--kagit-yazi);
    border-top: 1px solid var(--kenar-acik);
}
.sss-govde p:last-child { margin-bottom: 0; }

/* ══════════════════ 12 · İLETİŞİM BÖLÜMÜ ══════════════════════════════════
   Beacon: beyaz zemin; solda amblem + mavi başlık + açıklama + turuncu
   ayırıcı + sosyal simgeler, sağda form.                                     */

.iletisim-bolum { background: var(--kagit); color: var(--kagit-yazi); padding: var(--bolum-dolgu) 0; }
.iletisim-bolum h2, .iletisim-bolum h3 { color: var(--ufuk-derin); }
/* 🔴 Beyaz yüzeyde bağlantı --ufuk-isik kalırsa 2.3 ölçer (KVKK bağlantısı,
   15.10.2026). Açık zeminde --ufuk-koyu (5.10) kullanılır. */
.iletisim-bolum a:not(.dugme) { color: var(--ufuk-koyu); }

.iletisim-izgara {
    display: grid; grid-template-columns: minmax(280px, 440px) 1fr;
    gap: 60px; align-items: start;
}

.iletisim-sol { text-align: center; }
.iletisim-sol img.amblem { height: 96px; width: auto; margin: 0 auto 22px; }
.iletisim-sol h2 { font-size: clamp(25px, 3vw, 34px); }
.iletisim-sol h3 { font-size: clamp(17px, 1.9vw, 20px); }
.ayirici { height: 2px; background: var(--turuncu); width: 78%; margin: 30px auto; border: 0; }
.iletisim-sol .sosyal { justify-content: center; margin: 18px 0 0; }
.iletisim-sol .sosyal a { background: var(--ufuk-derin); }

/* ── Form ───────────────────────────────────────────────────────────────── */
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.alan { display: flex; flex-direction: column; gap: 7px; }
.alan.tam, .form-izgara > .tam { grid-column: 1 / -1; }

label {
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px;
    color: var(--ufuk-derin);
}

input, select, textarea {
    font-family: inherit; font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--kenar-et);
    border-radius: var(--yaricap);
    background: var(--ufuk-sis);
    color: var(--murekkep);
    width: 100%;
}
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ufuk-derin); background: var(--kagit); }

.form-not { font-size: 13px; color: var(--kagit-yazi); margin: 12px 0 0; }

.bildirim {
    border: 1px solid var(--kenar-et); border-left: 4px solid var(--turuncu);
    background: var(--ufuk-sis); color: var(--murekkep);
    padding: 14px 18px; border-radius: var(--yaricap);
    margin-bottom: 22px;
}
.bildirim.olumlu { border-left-color: #1F6B73; }

/* Beacon'un iletişim kutuları (İletişim sayfası). */
.iletisim-kutu {
    background: var(--ufuk-sis);
    border: 1px solid var(--kenar-acik);
    border-top: 3px solid var(--turuncu);
    padding: 26px 28px; border-radius: 3px;
}
.iletisim-kutu + .iletisim-kutu { margin-top: 22px; }
.iletisim-kutu h3 { font-size: 20px; margin-bottom: .5em; }
.iletisim-kutu dl { margin: 0; }
.iletisim-kutu dt {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px;
    color: var(--ufuk-derin); margin-top: 18px;
}
.iletisim-kutu dt:first-child { margin-top: 0; }
.iletisim-kutu dd { margin: 4px 0 0; color: var(--kagit-yazi); }
.iletisim-kutu dd a { color: var(--ufuk-koyu); }
.iletisim-kutu hr { border: 0; border-top: 2px solid var(--turuncu); margin: 18px 0 0; }

/* ══════════════════ 13 · ALT BİLGİ ════════════════════════════════════════
   Beacon: koyu lacivert, dört kolon (amblem + kısa metin · hizmetler ·
   iletişim · harita), altında ince şerit: telif solda, sosyal sağda.
   🔴 K-023: amblem taşıyan yüzey koyu MAVİ yapılmaz — burada en koyu
      lacivert kullanılıyor ve amblem beyaz zeminli kutu içinde duruyor.      */

.alt { background: var(--gece); padding: 76px 0 0; }

.alt-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 44px 40px;
    padding-bottom: 56px;
}
.alt h2 {
    font-size: 20px; color: var(--kagit); margin-bottom: 1em;
    letter-spacing: .02em;
}
.alt p, .alt li { color: var(--koyu-sol); font-size: 14px; }
.alt a { color: var(--koyu-sol); }
.alt a:hover { color: var(--turuncu); text-decoration: none; }

.alt-marka {
    display: inline-flex; background: var(--kagit);
    padding: 14px 18px; border-radius: 4px; margin-bottom: 20px;
}
.alt-marka img { height: 52px; }

.alt-liste { list-style: none; margin: 0; padding: 0; }
.alt-liste li { margin-bottom: .55em; }

.alt-serit {
    border-top: 1px solid var(--kenar-koyu);
    padding: 22px 0 26px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
    font-size: 13px; color: var(--koyu-sol);
}
.alt-serit .sosyal { margin: 0 0 0 auto; }
.alt-serit .sosyal a { width: 30px; height: 30px; font-size: 14px; }
.hukuk { display: flex; gap: 18px; flex-wrap: wrap; }

/* ══════════════════ 14 · İÇ SAYFALAR ══════════════════════════════════════
   Beacon: her iç sayfanın üstünde tam genişlikte koyu afiş; ortada büyük
   beyaz sayfa adı, sağ üstte sosyal simgeler. Altında dönüşümlü
   görsel/metin satırları.                                                    */

.sayfa-afis {
    position: relative; isolation: isolate;
    background: var(--gece);
    padding: 54px 0 90px;
    overflow: hidden;
    text-align: center;
}
.sayfa-afis .sosyal { margin-bottom: 36px; }
.sayfa-afis h1 {
    color: var(--kagit);
    font-size: clamp(34px, 6vw, 64px);
    margin: 0;
}
.sayfa-afis p {
    color: var(--koyu-sol); max-width: 70ch; margin: 18px auto 0;
}
.sayfa-afis .kirinti { justify-content: center; }

.kirinti { font-size: 13px; color: var(--koyu-sol); margin-bottom: 14px; }
.kirinti ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.kirinti li { margin: 0; display: flex; gap: 8px; align-items: center; }
.kirinti li + li::before { content: '/'; opacity: .6; }
.kirinti a { color: var(--ufuk-isik); }
.kirinti [aria-current="page"] { color: var(--kagit); }

.zorunlu-not { margin: 0 0 16px; }

/* Dönüşümlü görsel/metin satırı. */
.satir {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 70px); align-items: center;
    margin-bottom: 84px;
}
.satir:last-child { margin-bottom: 0; }
.satir.ters .satir-gorsel { order: 2; }
.satir.ters .satir-metin  { order: 1; text-align: right; }
.satir.ters .satir-metin .liste-isaretli li { flex-direction: row-reverse; text-align: right; }
.satir.ters .satir-metin .dugme-grubu { justify-content: flex-end; }

.satir-gorsel {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px;
    background: var(--ufuk-derin);
}
.satir-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.satir-gorsel.panel {
    display: flex; align-items: center; justify-content: center;
    color: var(--kagit); font-size: 90px;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 44px 44px, 44px 44px;
}
.satir-metin h2 { font-size: clamp(24px, 3.2vw, 36px); color: var(--ufuk-derin); }
.satir-metin p { color: var(--kagit-yazi); }
.satir-gorsel { box-shadow: 0 14px 38px rgba(31, 68, 92, .14); }

/* İşaretli liste (Beacon'un mavi tik satırları). */
.liste-isaretli { list-style: none; margin: 0; padding: 0; }
.liste-isaretli li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 8px 0; margin: 0;
    color: var(--kagit-yazi);
}
.bolum.mavi .liste-isaretli li, .bolum.gece .liste-isaretli li { color: var(--koyu-sol); }
.liste-isaretli i { color: var(--turuncu); font-size: 15px; line-height: 1.6; flex: none; }

/* Künye listesi. */
.kunye { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 36px; margin: 0; }
.kunye > div {
    display: flex; justify-content: space-between; gap: 18px;
    padding: 13px 0; border-bottom: 1px solid var(--kenar-koyu);
}
.kunye dt { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--kagit-yazi); margin: 0; }
.kunye dd { margin: 0; color: var(--murekkep); text-align: right; font-weight: 600; }

/* Referans listesi — YALNIZ AD, logo yok (üçüncü tarafın marka hakkı). */
.referanslar {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.referanslar li {
    background: var(--kagit);
    border: 1px solid var(--kenar-acik);
    border-left: 3px solid var(--turuncu);
    border-radius: 3px;
    padding: 22px 24px; margin: 0;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px;
    color: var(--ufuk-derin);
}

/* Süreç adımları — numaralı. */
.eksen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.adim { border-top: 3px solid var(--turuncu); padding-top: 22px; }
.adim-no {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 40px;
    color: var(--ufuk-koyu); line-height: 1; display: block; margin-bottom: 12px;
}
.adim h3 { color: var(--ufuk-derin); font-size: 20px; }
.adim p  { color: var(--kagit-yazi); margin: 0; }

/* Hizmet ayrıntı bloğu (/hizmetler). */
.hizmet-blok {
    display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
    gap: clamp(24px, 4vw, 54px);
    padding: 44px 0;
    border-top: 1px solid var(--kenar-koyu);
    /* kaydırma payı artık kökte: html { scroll-padding-top: 96px } */
}
.hizmet-blok:first-of-type { border-top: 0; padding-top: 0; }
.hizmet-blok h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--ufuk-derin); margin-bottom: .4em; }
.hizmet-blok .ozet { color: var(--ufuk-koyu); font-family: 'Montserrat', sans-serif; font-weight: 600; }
.hizmet-blok .zaman {
    display: inline-block; margin-top: 14px;
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--ufuk-derin); color: var(--kagit);
    border-left: 3px solid var(--turuncu);
    padding: 7px 14px;
}

/* Hukuk metinleri (KVKK, çerez). */
.metin { max-width: 78ch; }
.metin h2 { color: var(--ufuk-derin); margin-top: 1.8em; }
.metin h2:first-child { margin-top: 0; }
.metin h3 { color: var(--ufuk-koyu); font-size: 19px; margin-top: 1.4em; }
.metin p, .metin li { color: var(--kagit-yazi); }

/* Kapanış çağrısı. */
.cagri { background: var(--ufuk-derin); padding: 76px 0; text-align: center; }
.cagri h2 { color: var(--kagit); max-width: 24ch; margin-inline: auto; }
.cagri p  { color: var(--kagit); max-width: 68ch; margin-inline: auto; }
.cagri .dugme-grubu { justify-content: center; }

/* ══════════════════ 15 · HAREKET · ÖLÇÜ · BASKI ═══════════════════════════
   🔴 BETİK YOK. Beacon'daki "kaydırınca belirme" etkisi burada scroll-driven
      CSS ile yapılır; indirgenmiş hareket tercihinde kendiliğinden kapanır.
   🔴 SÜREKLİ KOŞAN ANİMASYON YOK (eski pafta taraması K-028 ile kaldırıldı).  */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bolum-bas, .kart, .olcu-hucre, .serit-kare, .satir, .referanslar li,
        .adim, .hizmet-blok, .sss > details, .ikili-yuz {
            animation: belir both;
            animation-timeline: view();
            animation-range: entry 0% entry 56%;
        }
    }
}
@keyframes belir {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* Sayfalar arası geçiş (belgeler arası). */
@view-transition { navigation: auto; }

/* ── Ölçüler ─────────────────────────────────────────────────────────────── */

@media (max-width: 1120px) {
    .pano { grid-template-columns: 1fr; }
    .ikili { grid-template-columns: 1fr; }
    .ikili-yuz { min-height: 0; padding: 60px clamp(20px, 6vw, 44px); }
    .iletisim-izgara { grid-template-columns: 1fr; gap: 44px; }
    .hizmet-blok { grid-template-columns: 1fr; gap: 18px; }
}

/* 🔴 EŞİK 980 DEĞİL 1148. Masaüstü menüsünün sığdığı en küçük genişlik ölçüldü:
   1149 px. 981–1148 arasında menü ikinci satıra düşüyor, TEKLİF AL düğmesi iki
   satıra bölünüyor ve yapışkan bandın yüksekliği %33 büyüyordu (15.10.2026).
   `.menu`deki flex-wrap da nowrap yapıldı: sığmama bir daha sessizce sarmasın. */
@media (max-width: 1148px) {
    :root { --bolum-dolgu: 68px; }
    .menu, .ust-eylem { display: none; }
    .ust-dugme { display: block; }
    .ust-ic { min-height: 72px; }
    .marka img { height: 38px; }
    .marka-ad { font-size: 21px; }
    .kahraman { padding: 72px 0 64px; }
    .satir { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
    .satir.ters .satir-gorsel { order: 0; }
    .satir.ters .satir-metin  { order: 0; text-align: left; }
    .satir.ters .satir-metin .liste-isaretli li { flex-direction: row; text-align: left; }
    .satir.ters .satir-metin .dugme-grubu { justify-content: flex-start; }
    .bolum-bas { margin-bottom: 36px; }
}

/* 🔴 DEKORATİF PANEL FOTOĞRAF DEĞİL: 4/3 oranını taşımak zorunda değil.
   Tek sütuna düştüğünde 940x705 px'lik boş bir kutunun ortasında tek bir 90 px
   simge kalıyordu — ekranın %71-86'sı (820-980 px arasında ölçüldü, 15.10.2026).
   Fotoğraflı .satir-gorsel'e DOKUNULMAZ, yalnız .panel sınırlanır. */
@media (max-width: 1120px) {
    .satir-gorsel.panel { aspect-ratio: auto; min-height: 200px; max-height: 38vh; }
}

@media (max-width: 640px) {
    /* 🔴 Marka altı satırı ("MİMARLIK, İNŞAAT VE TEKNİK HİZMETLER") 375 px'te
       iki satıra sarıyor ve üst bandı büyütüyordu (15.10.2026 ölçüldü).
       Telefonda amblem + marka adı zaten yetiyor. */
    .marka-alt { display: none; }
    .olcu-izgara { grid-template-columns: 1fr; }
    .olcu-hucre { border-left: 0; }
    .olcu-hucre:nth-child(2) { border-top: 0; }
    .form-izgara { grid-template-columns: 1fr; }
    .sosyal { justify-content: flex-start; }
    .sayfa-afis .sosyal { justify-content: center; }
    .alt-serit .sosyal { margin-left: 0; }
    .dugme { width: 100%; justify-content: center; }
    .dugme-grubu { gap: 10px; }
    .ikili-yuz h2 { max-width: none; }
    .kunye > div { flex-direction: column; gap: 2px; }
    .kunye dd { text-align: left; }
}

@media print {
    /* 🔴 ALT BİLGİ BASKIDA GİZLENMEZ. Eskiden `.alt` tümden gizleniyordu ve
       basılan sayfada firma adı, telefon, e-posta, amblem ve telif satırı
       KALMIYORDU — bir bankanın satın alma birimi sayfayı PDF'e bastığında
       kâğıtta kimin verdiği belli olmuyordu (15.10.2026 ikinci denetim).
       Gezinti listeleri gizlenir, KİMLİK bloğu ve iletişim sütunu kalır. */
    .ust, .ilerleme, .atla, .sosyal, .dugme-grubu, .sss summary::after { display: none !important; }
    .alt { display: block !important; padding: 18px 0 0 !important; border-top: 1px solid #999 !important; }
    .alt-izgara {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 24px !important;
        padding-bottom: 10px !important;
    }
    /* Hizmet ve Kurumsal gezinti sütunları kâğıtta işe yaramaz: yalnız kimlik
       (1. sütun) ve iletişim (4. sütun) kalır. */
    .alt-izgara > div:nth-child(2), .alt-izgara > div:nth-child(3) { display: none !important; }
    .alt h2 { font-size: 13px !important; }
    .alt p, .alt li, .alt a, .alt-serit { color: #222 !important; font-size: 11px !important; }
    .alt-marka { background: none !important; padding: 0 !important; }
    .alt-serit .hukuk, .alt-serit .sosyal { display: none !important; }
    body, .bolum, .kahraman, .sayfa-afis { background: #FFF !important; color: #000 !important; }
    h1, h2, h3, h4, .kart h3, .bolum-bas h2 { color: #000 !important; }
    p, li, .olcu-etiket, .bolum-bas p { color: #222 !important; }
    .sss-govde { display: block !important; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 11px; }
}