/* ==========================================================================
   site.css — tasarım kitine SERVİSİNİ TAKİP ET eklentileri
   components.css'ten SONRA yüklenir.

   Kit (theme.css + components.css) olduğu gibi duruyor: tasarımcı bir güncelleme
   verirse iki dosya doğrudan değiştirilebilsin diye. Bu sitenin kitte karşılığı
   olmayan parçaları — servis föyü, tasarruf hesabı, demo modalı, video kapağı,
   hukuki metin — burada.
   ========================================================================== */

/* ── Marka ────────────────────────────────────────────────────────────────
   Kitteki iki satırlık kelime markası yerine sembol + ad. Sembolün beyaz
   sürümü kullanılıyor; header ve footer zemini lacivert. */

.brand {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    letter-spacing: -.01em;
}

.brand img {
    width: 30px;
    height: 30px;
    flex: none;
}

.brand span:last-child {
    margin-top: 0;
}

.brand .marka-alt {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: var(--brand-navy-300);
    letter-spacing: .02em;
    margin-top: 1px;
}

/* ── Font Awesome ikon karosu ─────────────────────────────────────────────
   Modül ve sektör kayıtlarında ikon bir FA sınıf adı olarak duruyor; kitin
   satır içi SVG'leri veritabanından gelemez. */

.ikon-karo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-accent-100);
    color: var(--brand-navy-900);
    display: grid;
    place-items: center;
    font-size: 17px;
    flex: none;
}

.ikon-karo--koyu {
    background: var(--brand-navy-900);
    color: var(--brand-accent-500);
}

.ikon-karo--sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 8px;
}

/* ── Servis föyü ──────────────────────────────────────────────────────────
   Sektör sekmesi değişince alan ADLARI değişiyor: araçta "Plaka / Şasi",
   medikalde "Seri No / Demirbaş No". Bu, sektör sayfalarının en somut kanıtı —
   ekran görüntüsü değil, gerçek alan adlarıyla kurulmuş bir kayıt kartı. */

.foy {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    padding: 22px;
    text-align: left;
}

.foy__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--brand-gray-100);
}

.foy__no {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--brand-navy-900);
    font-variant-numeric: tabular-nums;
}

.foy__durum {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 9999px;
    background: var(--brand-accent-100);
    color: var(--brand-navy-900);
}

.foy__izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.foy__alan--genis {
    grid-column: 1 / -1;
}

.foy__etiket {
    display: block;
    font-size: 12px;
    color: var(--brand-gray-500);
    margin-bottom: 3px;
}

.foy__deger {
    font-size: 15px;
    color: var(--brand-gray-900);
    background: var(--brand-gray-25);
    border-radius: 8px;
    padding: 9px 12px;
    min-height: 38px;
}

.foy__satirlar {
    margin-top: 16px;
    border-top: 1px solid var(--brand-gray-100);
    padding-top: 14px;
}

.foy__satir {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--brand-gray-700);
    padding: 6px 0;
}

.foy__satir span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--brand-gray-900);
}

.foy__toplam {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--brand-gray-100);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--brand-navy-900);
}

/* ── Zincir: Kabul → İş emri → Stok → Fatura → Memnuniyet ────────────────── */

.zincir {
    display: grid;
    /* Altı halka: kabul → servis kaydı → stok → sipariş → fatura → memnuniyet.
       Sipariş halkası sonradan eklendi; servis kaydı faturaya doğrudan
       bağlanmıyor, arada sipariş kaydı var ve tahsilat orada alınıyor. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    counter-reset: zincir;
}

.zincir__adim {
    position: relative;
    background: var(--brand-gray-25);
    border-radius: 16px;
    padding: 20px 18px;
    counter-increment: zincir;
}

.zincir__adim::before {
    content: counter(zincir);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-navy-900);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.zincir__adim h4 {
    font-size: 17px;
    margin: 0 0 6px;
}

.zincir__adim p {
    font-size: 14px;
    color: var(--brand-gray-600);
    margin: 0;
}

@media (max-width: 1199.98px) {
    .zincir {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .zincir {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .zincir {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Video kapağı ─────────────────────────────────────────────────────────
   iframe ancak oynat'a basılınca kuruluyor. Dört videoyu baştan yüklemek
   anasayfanın LCP'sini tek başına ikiye katlıyordu. */

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: var(--brand-gray-100);
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.video img,
.video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}

.video__oynat {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 29, 74, .25);
    transition: background .2s ease;
}

.video:hover .video__oynat {
    background: rgba(0, 29, 74, .4);
}

.video__oynat span {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--brand-accent-500);
    color: var(--brand-navy-900);
    display: grid;
    place-items: center;
    font-size: 20px;
    box-shadow: var(--shadow-float);
}

/* ── Demo modalı ──────────────────────────────────────────────────────────
   <dialog>.show() kullanılıyor, showModal() değil: görünmez reCAPTCHA bir
   bulmaca göstermek zorunda kalırsa showModal'ın üst katmanı bulmacayı modalın
   arkasına düşürüyor ve kullanıcı tıklayamıyor. Karartma bu yüzden elle. */

.modal-ort {
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(0, 29, 74, .55);
    display: none;
}

body.modal-acik .modal-ort {
    display: block;
}

body.modal-acik {
    overflow: hidden;
}

dialog.demo {
    position: fixed;
    z-index: 140;
    inset: 0;
    margin: auto;
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border: 0;
    border-radius: 24px;
    padding: 0;
    background: #fff;
    color: var(--brand-gray-900);
    box-shadow: 0 24px 60px rgba(0, 29, 74, .35);
}

.demo__basi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 26px 0;
}

.demo__basi h2 {
    font-size: 24px;
    margin: 0 0 6px;
}

.demo__basi p {
    font-size: 14px;
    color: var(--brand-gray-600);
    margin: 0;
}

.demo__kapat {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-gray-50);
    color: var(--brand-gray-700);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.demo__kapat:hover {
    background: var(--brand-gray-100);
}

.demo__govde {
    padding: 20px 26px 26px;
}

/* ── Form alanları ────────────────────────────────────────────────────────
   Kitte .form-control kenarlığı SAYDAM: tek alanlı e-posta yakalama kutusu
   renkli hero zemininde duruyor ve orada kenarlık gürültü. Beyaz bir kartın
   içinde ise alan tamamen kayboluyor — demo modalı ve referans formu tam da
   orada. Kenarlık hero dışında geri geliyor. */

.form-control,
.form-select {
    border-color: var(--brand-gray-100);
}

.hero-navy .form-control,
.hero-feature .form-control {
    border-color: transparent;
}

.alan-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.alan-izgara .genis {
    grid-column: 1 / -1;
}

@media (max-width: 479.98px) {
    .alan-izgara {
        grid-template-columns: minmax(0, 1fr);
    }
}

.alan-izgara label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-gray-700);
    margin-bottom: 4px;
}

.alan-izgara .form-control,
.alan-izgara .form-select {
    padding: 11px 13px;
    font-size: 15px;
}

/* Placeholder: örnek değer, etiketin söylemediği biçimi gösteriyor. Yeterince
   soluk olmalı ki dolu bir alanla karışmasın — kullanıcı "burası dolu mu" diye
   bakmak zorunda kalmasın. */
.alan-izgara .form-control::placeholder {
    color: var(--brand-gray-300);
    opacity: 1;
}

/* "isteğe bağlı" notu. Etiketin bir parçası gibi görünmemeli, yoksa alan adının
   devamı sanılıyor. */
.alan-not {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-gray-50);
    color: var(--brand-gray-500);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .01em;
    vertical-align: 1px;
}

/* Zorunlu alanların etiketinde ince bir işaret: hangisinin boş bırakılabileceği
   yalnız tek bir alanda "isteğe bağlı" yazarak anlatılmıyor, karşıtı da görünüyor. */
.alan-izgara label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.form-hata {
    background: #fbeceb;
    border: 1px solid #f0c4bf;
    color: #8e2a20;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 14px;
    margin-bottom: 14px;
}

/* Panelin reddettiği alan. Bootstrap'in kendi .is-invalid'i var ama arka plan
   ikonu ve .invalid-feedback beklentisiyle geliyor; burada yalnız kenarlık
   isteniyor ve rengi hata kutusuyla aynı olsun. */
.demo .form-control.is-invalid,
.demo .form-select.is-invalid {
    border-color: #d4544a;
    background-image: none;
    box-shadow: 0 0 0 3px rgba(212, 84, 74, .12);
}

.demo__kvkk {
    font-size: 12.5px;
    color: var(--brand-gray-500);
    margin: 12px 0 0;
}

.demo__kvkk a {
    color: var(--brand-navy-900);
}

/* ── Hukuki metin / uzun içerik ───────────────────────────────────────────
   .prose kitten geliyor; buradakiler o metinlerin içinde geçen kutular. */

.prose .bilgi-kutu,
.prose .uyari-kutu,
.prose .taraf-kutu {
    border-radius: 12px;
    padding: 16px 18px;
    margin: 22px 0;
    font-size: 15px;
}

.prose .bilgi-kutu {
    background: var(--brand-accent-100);
    border-left: 3px solid var(--brand-accent-500);
}

.prose .uyari-kutu {
    background: #fdf6e9;
    border-left: 3px solid var(--brand-warning);
}

.prose .taraf-kutu {
    background: var(--brand-gray-25);
    border: 1px solid var(--brand-gray-100);
}

.prose .bilgi-kutu p:last-child,
.prose .uyari-kutu p:last-child,
.prose .taraf-kutu p:last-child {
    margin-bottom: 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 14px;
}

.prose th,
.prose td {
    border: 1px solid var(--brand-gray-100);
    padding: 9px 12px;
    text-align: left;
}

.prose th {
    background: var(--brand-gray-25);
    font-family: var(--font-heading);
    font-weight: 500;
}

/* ── Site haritası ────────────────────────────────────────────────────── */

.harita {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.harita a {
    color: var(--brand-gray-700);
    text-decoration: none;
    font-size: 15px;
}

.harita a:hover {
    color: var(--brand-navy-900);
    text-decoration: underline;
}

/* ── Teşekkür sayfası ─────────────────────────────────────────────────── */

.tesekkur-ikon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--brand-accent-500);
    color: var(--brand-navy-900);
    display: grid;
    place-items: center;
    font-size: 30px;
    margin-inline: auto;
}

.ref-kutu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-gray-25);
    border: 1px dashed var(--brand-gray-300);
    border-radius: 10px;
    padding: 9px 16px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 15px;
    color: var(--brand-navy-900);
}

/* ── Modül dizini ────────────────────────────────────────────────────── */

.modul-grup {
    background: var(--brand-gray-25);
    border-radius: 20px;
    padding: 24px;
    height: 100%;
}

.modul-grup h3 {
    font-size: 20px;
    margin: 0 0 4px;
}

.modul-grup>p {
    font-size: 14px;
    color: var(--brand-gray-600);
    margin: 0 0 16px;
}

.modul-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.modul-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--brand-gray-700);
}

.modul-liste li i {
    color: var(--brand-navy-900);
    width: 17px;
    text-align: center;
    font-size: 14px;
}

.modul-liste a {
    color: var(--brand-gray-900);
    text-decoration: none;
}

.modul-liste a:hover {
    color: var(--brand-navy-900);
    text-decoration: underline;
}

/* Açıklama satırı: modül adının altına, ikon hizasından girintili.
   li flex olduğu için satır atlaması gerekiyor — flex-wrap + tam genişlik. */
.modul-liste li {
    flex-wrap: wrap;
    align-items: baseline;
}

.modul-liste__aciklama {
    flex: 0 0 100%;
    margin-left: 27px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--brand-gray-500);
}

/* ── Yer tutucu görsel ───────────────────────────────────────────────────
   Gerçek fotoğraf gelene kadar ölçüyü koruyan zemin. Panelde "yer tutucu
   görsel yayında" uyarısı bunu sayıyor. */

.yer-tutucu {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg, var(--brand-gray-50) 0 12px, var(--brand-gray-25) 12px 24px);
    color: var(--brand-gray-400);
    font-size: 13px;
    text-align: center;
    padding: 12px;
}

/* ── Atlama bağlantısı sabit header'ı hesaba katsın ────────────────────── */

[id] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Hukuki metinlerin gövdesi eski siteden HTML olarak aktarıldı; sınıf adları
   içerikte gömülü. Yeniden yazmak yerine burada eşleniyor. */
.prose .info-box {
    background: var(--brand-accent-100);
    border-left: 3px solid var(--brand-accent-500);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 22px 0;
}

.prose .warn-box {
    background: #fdf6e9;
    border-left: 3px solid var(--brand-warning);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 22px 0;
}

.prose .contact-box,
.prose .party-box {
    background: var(--brand-gray-25);
    border: 1px solid var(--brand-gray-100);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 22px 0;
}

.prose .parties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 16px;
    margin: 22px 0;
}

.prose .parties-grid .party-box {
    margin: 0;
}

.prose .info-box> :last-child,
.prose .warn-box> :last-child,
.prose .contact-box> :last-child,
.prose .party-box> :last-child {
    margin-bottom: 0;
}

/* ── Dar ekran düzeltmeleri ────────────────────────────────────────────── */

@media (max-width: 479.98px) {

    /* Föyün iki sütunu 400px'te sıkışıyor; alan adları kısalmasın diye tek
       sütuna iniyor — kısalan alan adı bu bileşenin bütün anlamını götürür. */
    .foy__izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    .foy {
        padding: 18px;
    }
}

@media (max-width: 991.98px) {

    /* Mobilde marka alt satırı yer kaplıyor, ad zaten anlaşılıyor. */
    .brand .marka-alt {
        display: none;
    }
}

/* ── Görüş kartı ──────────────────────────────────────────────────────────
   Kitteki .testimonial-card 3/4 oranında bir FOTOĞRAF/VİDEO kartı: adı altta,
   koyu degradenin üstüne basıyor. Bizde müşteri fotoğrafı yok — o kartı metinle
   doldurunca üstteki %60 boş kalıyor ve yazı degradenin dışına taşıp okunmaz
   hale geliyordu. Metin için kurulmuş ayrı bir kart. */

.gorus-kart {
    flex: 0 0 340px;
    max-width: 340px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 419.98px) {
    .gorus-kart {
        flex-basis: 280px;
        max-width: 280px;
    }
}

.gorus-kart__tirnak {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
    color: var(--brand-accent-500);
}

.gorus-kart p {
    margin: 0;
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--brand-gray-700);
    word-wrap: break-word;
}

.gorus-kart__kim {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-gray-100);
}

.gorus-kart__bas {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--brand-accent-100);
    color: var(--brand-navy-900);
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 500;
}

.gorus-kart__ad {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--brand-gray-900);
}

.gorus-kart__alt {
    display: block;
    font-size: 13px;
    color: var(--brand-gray-500);
}

/* Sektör sayfasında ızgarada duruyor, kaydırma şeridinde değil. */
.gorus-kart--izgara {
    flex: none;
    max-width: none;
    height: 100%;
}

/* ── Puan ─────────────────────────────────────────────────────────────────
   Girdi tarafı radio + label: JS olmadan da çalışıyor ve klavyeyle
   gezilebiliyor. Yıldızlar ters sırada basılıp `direction: rtl` ile
   düzeltiliyor — CSS'te "solundaki kardeş" seçicisi yok, ancak böyle
   seçilenin SOLUNDAKİLERİ de boyayabiliyoruz. */

.puan-sec {
    display: inline-flex;
    direction: rtl;
    gap: 4px;
}

.puan-sec input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.puan-sec label {
    margin: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--brand-gray-300);
    cursor: pointer;
    transition: color .12s ease;
}

.puan-sec label:hover,
.puan-sec label:hover~label,
.puan-sec input:checked~label {
    color: #e8a33d;
}

.puan-sec input:focus-visible+label {
    outline: 3px solid var(--brand-accent-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Gösterim tarafı — kart ve yönetim listesi. */
.puan {
    display: inline-flex;
    gap: 2px;
    color: #e8a33d;
    font-size: 14px;
    line-height: 1;
}

.puan i.bos {
    color: var(--brand-gray-300);
}

.puan--sm {
    font-size: 12px;
}

/* ── Kaydırınca küçülen header ────────────────────────────────────────────
   136px, sayfanın altıncı bölümüne gelmiş bir ziyaretçi için fazla: üst şerit
   (telefon, e-posta) ilk ekranda işe yarıyor, aşağıda yalnız yer kaplıyor.
   Kaydırınca üst şerit kapanıp ana bar 96'dan 64'e iniyor.

   Ölçüler değişkenler üzerinden geçiyor — .topbar ve .navbar-main
   yüksekliklerini components.css zaten oradan okuyor, yani kit dosyasına
   dokunmadan çalışıyor.

   main'in padding-top'u DEĞİŞMİYOR: header sabit konumlu, o boşluk yalnız
   ilk yerleşimi karşılıyor. Küçülürken de değiştirseydik sayfa zıplardı. */

.site-header {
    transition: box-shadow .22s ease;
}

.topbar {
    overflow: hidden;
    transition: height .22s ease;
}

.topbar-inner {
    transition: opacity .14s ease;
}

.navbar-main {
    transition: height .22s ease;
}

.brand,
.brand img {
    transition: font-size .22s ease, width .22s ease, height .22s ease;
}

.site-header.is-kucuk {
    --topbar-h: 0px;
    --navbar-h: 64px;
    box-shadow: 0 6px 24px rgba(0, 29, 74, .3);
}

.site-header.is-kucuk .topbar-inner {
    opacity: 0;
    pointer-events: none;
}

.site-header.is-kucuk .brand {
    font-size: 17px;
}

.site-header.is-kucuk .brand img {
    width: 26px;
    height: 26px;
}

.site-header.is-kucuk .brand .marka-alt {
    display: none;
}

@media (max-width: 991.98px) {

    /* Mobilde üst şerit zaten kapalı; yalnız ana bar 80'den 60'a iniyor.
       components.css orada --navbar-h değil --header-h-mobile okuyor. */
    .site-header.is-kucuk .navbar-main {
        height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .topbar,
    .topbar-inner,
    .navbar-main,
    .brand,
    .brand img {
        transition: none;
    }
}

/* İçeriğin üstündeki sabit boşluk. Header'ın ilk yüksekliğini karşılıyor ve
   küçülme sırasında DEĞİŞMİYOR — değişseydi her küçülmede sayfa zıplardı. */
:root {
    --icerik-ust: 136px;
}

@media (max-width: 991.98px) {
    :root {
        --icerik-ust: var(--header-h-mobile);
    }
}

/* Header küçülünce --header-h de küçülüyor. Buna bağlı olan iki şey var ve
   ikisi de doğru davranışı istiyor:
     • [id] scroll-margin-top — çapaya atlarken başlık header'ın altında kalmasın
     • .toc sticky top       — içindekiler listesi header'a yapışsın
   İçeriğin üst boşluğu bunlara bağlı DEĞİL (yukarıdaki --icerik-ust). */
html.header-kucuk {
    --header-h: 64px;
}

@media (max-width: 991.98px) {
    html.header-kucuk {
        --header-h: 60px;
    }
}

/* İçeriğin üst boşluğu, altındaki ilk bölümün rengini alıyor.
   ------------------------------------------------------------------------
   O boşluk main'in kendi kutusu ve varsayılan olarak BEYAZ. Header 136px
   iken tam üstünü kapatıyordu; küçülüp 64'e inince altında 72px'lik beyaz
   bir bant açığa çıkıyordu — özellikle yukarı çıkarken, header henüz büyüme
   geçişini tamamlamamışken.

   Eşikler bu bandın ekran dışında kalmasını garantiliyor; buradaki renk de
   geçiş anındaki tek kareyi kapatıyor. İkisi birlikte sorunu tamamen bitiriyor.

   ::before kullanılıyor, main'e doğrudan background DEĞİL: arka plan bütün
   içeriğin arkasına geçerdi ve zemini olmayan bölümler (beyaz section'lar)
   lacivert görünürdü. */

#icerik {
    position: relative;
}

#icerik::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--icerik-ust);
    background: #fff;
    pointer-events: none;
}

/* Sayfanın ilk bölümü hangi zemindeyse şerit de o. :has() zaten kitin mega
   menüsünün açılma mekanizması — yeni bir bağımlılık değil. */
#icerik:has(> .hero-navy:first-child)::before {
    background: var(--brand-navy-900);
}

#icerik:has(> .hero-feature:first-child)::before {
    background: var(--brand-accent-200);
}

#icerik:has(> .article-head:first-child)::before {
    background: #fff;
}

/* ── Referans formu: fotoğraf önizlemesi ─────────────────────────────────
   Seçilen dosya gönderilmeden önce görünüyor. Yanlış fotoğrafı yükleyip
   sonra "kaldırın" diye yazmak zorunda kalmak, formu dolduran müşteri için
   en can sıkıcı son olurdu. */

.ref-onizleme {
    position: relative;
    margin-top: 8px;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--brand-gray-50);
    border: 1px solid var(--brand-gray-100);
}

.ref-onizleme img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ref-onizleme button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 29, 74, .78);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ref-onizleme button:hover {
    background: var(--brand-navy-900);
}

/* ── Görüş kartı: fotoğraflı hâli ────────────────────────────────────────
   İşyeri fotoğrafı kartın üstünde geniş, kişi fotoğrafı altta baş harfin
   yerinde. İkisi de yoksa kart eskisi gibi çalışıyor. */

.gorus-kart__isyeri {
    margin: -24px -24px 4px;
    aspect-ratio: 16 / 10;
    background: var(--brand-gray-50);
    overflow: hidden;
}

.gorus-kart__isyeri img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gorus-kart__bas img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.gorus-kart__bas--foto {
    background: none;
    padding: 0;
    overflow: hidden;
}

.gorus-kart__site {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--brand-navy-700);
    text-decoration: none;
}

.gorus-kart__site:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero kayıt kartı
   .stat-card tasarım kitinden geliyor (components.css) ve orası el değmemiş
   kalıyor; buradaki tek iş, sayı yerine liste gösteren varyantı eklemek.
   -------------------------------------------------------------------------- */
.kayit-kart {
    max-width: 300px;
}

.kayit-kart__liste {
    list-style: none;
    margin: 12px 0 10px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.kayit-kart__liste li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.35;
    color: #fff;
}

/* Tik işareti maskeyle: ayrı bir istek ya da ikon bağımlılığı olmasın. */
.kayit-kart__liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background: var(--brand-accent-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Bölüm yığınının altındaki CTA şeridi
   .section-stack boşluğu yalnız KENDİ ÇOCUKLARI ARASINA koyuyor (flex gap).
   Şerit yığının dışında olduğu için son bölüm ona yapışıyordu — sektör ve
   modül sayfalarında "Diğer sektörler" bloğu şeridin üstüne biniyor gibi
   duruyordu.
   Boşluk şeride veriliyor, yığına değil: yığının son çocuğuna padding
   eklemek, o çocuk zaten .section-gap taşıyorsa boşluğu ikiye katlıyor.

   Değer bölüm aralığından (144px) belirgin şekilde KÜÇÜK. Sebebi şeridin
   kendi 64px iç boşluğu ve ayrı zemin rengi olması: ikisi zaten ayrımı
   kuruyor, üstüne tam bölüm aralığı koyunca arada 200px'i aşan bir boşluk
   çıkıyordu.
   -------------------------------------------------------------------------- */
.section-stack+.cta-strip {
    margin-top: clamp(28px, 3vw, 48px);
}

/* --------------------------------------------------------------------------
   İletişim: sosyal bağlantılar ve harita
   -------------------------------------------------------------------------- */

.sosyal {
    margin-top: 20px;
}

.sosyal__etiket {
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-navy-300);
    margin-bottom: 10px;
}

.sosyal__baglar {
    display: flex;
    gap: 10px;
}

.sosyal__baglar a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.sosyal__baglar a:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}

/* Harita bloğu: solda adres, sağda harita. Dar ekranda alt alta. */
.harita-blok {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 32px;
    align-items: start;
}

@media (max-width: 767.98px) {
    .harita-blok {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

.harita-cerceve {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--brand-gray-50);
    box-shadow: var(--shadow-card);
}

.harita-cerceve iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ==========================================================================
   ANLATIM BLOKLARINDA EKRAN GÖRÜNTÜSÜ
   components.css'teki yuva 710/555 (≈1,28). Uygulamadan alınan görüntüler
   1920×855, yani ≈20/9. object-fit: cover 1,28'lik yuvaya sığdırırken
   genişliğin %43'ünü kırpıyordu — servis kaydı ekranında sağdaki "Kullanılan
   Ürünler" paneli, ürün listesinde stok ve fiyat sütunları tamamen gidiyordu.
   Yuva görüntünün kendi oranına çekildi; kırpma yok.

   Tasarım kiti dosyalarına dokunulmuyor, bu yüzden geçersiz kılma burada.
   ========================================================================== */
.feature-row .feature-media {
    aspect-ratio: 20 / 9;
    /* Ekran görüntüsü açık zeminli; lacivert sayfa üstünde kenarı belirsiz
       kalmasın diye ince bir çerçeve. */
    border: 1px solid var(--brand-gray-200, rgba(15, 23, 42, .10));
    background: var(--brand-gray-100);
}