/* =====================================================================
   Detay Depo — Ana Stil Dosyası
   Mobil öncelikli · Framework yok · Core Web Vitals odaklı

   MARKA PALETİ — doğrudan logo.png'den alınmıştır

     Lacivert   #00265B   logonun "D" harfi ve DETAY yazısı
     Turuncu    #FD6601   logonun yay çizgisi ve DEPOLAMA yazısı
     Beyaz      #FFFFFF

   İKİ RENKLİ SİSTEM. Koyu yüzeylerin tamamı LACİVERT ailesindendir
   (gri değil). Turuncu yalnız CTA butonlarında, ikonlarda, vurgu
   rakamlarında ve imza çizgilerinde görünür.

   YAZI RENGİ KURALI: lacivert ya da turuncu zemin üzerindeki yazı DAİMA
   beyazdır. Açık zeminde başlıklar lacivert, gövde metni lacivert-nötr
   karışımıdır; hiçbir metin soluk gri değildir (en düşük kontrast 4,9).

   BÖLÜM RİTMİ: beyaz → açık lacivert tint → lacivert → beyaz ... Ardışık
   iki bölüm asla aynı zemini kullanmaz; .bolum--alt ve .bolum--marka
   sınıfları bu geçişi sağlar.

   NOT: --mavi değişken adı tarihseldir, değeri turuncudur (bağlantı rengi).
   ===================================================================== */

/* ----------------------------------------------------------
   1. Değişkenler
   ---------------------------------------------------------- */
:root {
    /* --- Marka turuncusu (logodan) --- */
    --turuncu:         #FD6601;   /* butonlar, vurgular, ikonlar */
    --turuncu-koyu:    #ff8330;   /* hover — koyulaşmaz, AÇILIR */
    --turuncu-acik:    #fff1e6;   /* sıcak tint */
    --turuncu-cizgi:   #ffd0ac;

    /* --- Marka laciverti (logodan) — tüm koyu yüzeyler --- */
    --koyu:            #00265B;   /* ana koyu yüzey — beyaz yazı 14,7 */
    --koyu-orta:       #06356F;   /* gradyan üst ucu — beyaz yazı 11,6 */
    --koyu-derin:      #001A40;   /* footer ve gradyan alt ucu — 17,2 */

    /* --- Yazı renkleri --- */
    --lacivert:        #00265B;   /* başlıklar — marka laciverti */
    --lacivert-koyu:   #001A40;
    --lacivert-acik:   #06356F;
    --mavi:            #FD6601;   /* bağlantı rengi — marka turuncusu */
    --mavi-parlak:     #ffd0ac;   /* koyu zeminde bağlantı/vurgu */
    --mavi-acik:       #eef3fb;   /* tint — hover ve kutu zeminleri */

    --wa:              #25d366;
    --wa-koyu:         #1db954;

    /* Yalnızca "onaylanmış yorum" tikinde kullanılan yeşil.
       Marka rengi değildir; evrensel onay işareti olduğu için yeşildir. */
    --onay-yesil:      #15a34a;

    /* Gövde metinleri lacivert kırmalıdır; soluk gri kullanılmaz.
       En açık ton bile hem beyaz hem açık tint zeminde AA'yı geçer.
       Ölçülen (beyaz / tint): 11,34-10,37 · 7,69-7,03 · 5,60-5,12 */
    --metin:           #2A3B54;
    --metin-orta:      #3F5474;
    --metin-acik:      #556986;
    --cizgi:           #dbe4f0;
    --zemin:           #FFFFFF;
    --zemin-alt:       #F1F5FC;   /* lacivert kırmalı açık zemin */
    --zemin-koyu:      #001A40;

    --golge-sm:  0 1px 2px rgba(0, 26, 64, .08);
    --golge:     0 4px 16px rgba(0, 26, 64, .12);
    --golge-lg:  0 12px 34px rgba(0, 26, 64, .16);
    --golge-xl:  0 24px 56px rgba(0, 26, 64, .20);

    /* Nur Tesisat'ın tümüyle yuvarlak (pill) diline karşılık
       Detay Depo köşeli-yumuşak bir dil kullanır. */
    --yuvarlak-sm: 6px;
    --yuvarlak:    10px;
    --yuvarlak-lg: 16px;
    --yuvarlak-btn: 10px;
    --yuvarlak-tam: 999px;

    --kap: 1200px;
    --gecis: .22s cubic-bezier(.4, 0, .2, 1);

    --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Panelden renk değiştirilebilsin diye ikinci katman */
:root {
    --ana-renk: var(--lacivert);
    --vurgu-renk: var(--turuncu);
}

/* ----------------------------------------------------------
   2. Sıfırlama
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--yazi);
    font-size: 16px;
    line-height: 1.65;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

a { color: var(--mavi); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--lacivert); }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lacivert);
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 4.2vw, 2.85rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.05rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.08rem; }

p { text-wrap: pretty; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--lacivert);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 999;
    border-radius: 0 0 var(--yuvarlak-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ----------------------------------------------------------
   3. Yardımcılar
   ---------------------------------------------------------- */
.kap {
    width: 100%;
    max-width: var(--kap);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.bolum { padding-block: clamp(3rem, 7vw, 5.5rem); }
.bolum--alt { background: var(--zemin-alt); }
.bolum--koyu { background: var(--koyu); color: #fff; }
.bolum--koyu h2, .bolum--koyu h3 { color: #fff; }

/* ----------------------------------------------------------
   LACİVERT BÖLÜM
   Sayfanın beyaz akışını bölen marka rengi bant. Ardışık bölümler
   asla aynı zemini kullanmasın diye beyaz bölümlerin arasına girer.
   İçindeki her yazı beyaz ya da açık laciverttir; soluk gri yoktur.
   ---------------------------------------------------------- */
.bolum--marka {
    background:
        radial-gradient(900px 460px at 88% -20%, rgba(253,102,1,.16), transparent 62%),
        linear-gradient(160deg, var(--koyu-orta) 0%, var(--koyu) 55%, var(--koyu-derin) 100%);
    color: #fff;
    position: relative;
}
/* Üst kenarda ince turuncu imza çizgisi */
.bolum--marka::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--turuncu) 0%, rgba(253,102,1,.35) 45%, transparent 85%);
}
.bolum--marka h1,
.bolum--marka h2,
.bolum--marka h3,
.bolum--marka h4,
.bolum--marka strong { color: #fff; }
.bolum--marka p,
.bolum--marka li,
.bolum--marka .bolum-alt-baslik { color: #dbe6f7; }
.bolum--marka .bolum-baslik::after { background: var(--turuncu); }

/* Lacivert zeminde beyaz çerçeveli buton */
.bolum--marka .btn--cerceve {
    border-color: rgba(255,255,255,.55);
    color: #fff;
    background: transparent;
}
.bolum--marka .btn--cerceve:hover {
    background: var(--turuncu);
    border-color: var(--turuncu);
    color: #fff;
}

/* Lacivert zeminde ilçe bağlantı listesi */
.bolum--marka .ilce-izgara a {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.20);
    color: #eaf1fb;
}
.bolum--marka .ilce-izgara a:hover {
    background: var(--turuncu);
    border-color: var(--turuncu);
    color: #fff;
}
.bolum--marka .yaka-baslik { color: #fff; }
.bolum--marka .yaka-baslik::after { background: rgba(255,255,255,.22); }

/* Bölüm başlığının altındaki kısa turuncu çizgi, Detay Depo'nun
   görsel imzasıdır — kaynak sitede böyle bir öğe yoktur. */
.bolum-baslik {
    text-align: center;
    margin-bottom: 1.4rem;
}
.bolum-baslik::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: .85rem auto 0;
    border-radius: 2px;
    background: var(--turuncu);
}
.bolum--koyu .bolum-baslik::after,
.sayfa-basi .bolum-baslik::after { background: #fff; }

.bolum-alt-baslik {
    text-align: center;
    color: var(--metin-orta);
    max-width: 680px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    font-size: 1.05rem;
}

.gorsel-gizli {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------
   4. Butonlar
   ---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.5rem;
    border-radius: var(--yuvarlak-btn);
    font-weight: 700;
    font-size: .97rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
    white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

/* CTA butonları marka turuncusudur (#FD6601), yazı daima beyazdır.
   Büyük butonlar 18,9px/800 olduğundan WCAG "büyük yazı" sınıfına girer. */
.btn--vurgu {
    background: var(--vurgu-renk);
    color: #fff;
    box-shadow: 0 4px 14px rgba(248, 110, 38, .34);
}
.btn--vurgu:hover { background: var(--turuncu-koyu); color: #fff; box-shadow: 0 6px 20px rgba(248,110,38,.45); }
.btn--vurgu svg { color: #fff; }

.btn--ana { background: var(--ana-renk); color: #fff; }
.btn--ana:hover { background: var(--lacivert-koyu); color: #fff; }

.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.3); }
.btn--wa:hover { background: var(--wa-koyu); color: #fff; }

.btn--cerceve {
    background: transparent;
    color: var(--lacivert);
    border: 2px solid var(--lacivert-acik);
}
.btn--cerceve:hover { border-color: var(--lacivert); background: var(--mavi-acik); }

.btn--beyaz { background: #fff; color: var(--lacivert); }
.btn--beyaz:hover { background: var(--mavi-acik); color: var(--lacivert); }

/* 1.18rem = 18,9px + 800 ağırlık → WCAG "büyük yazı" sınıfına girer.
   Canlı turuncu zeminde beyaz yazı (3,84) böylece AA large eşiğini geçer. */
.btn--buyuk { padding: 1rem 1.9rem; font-size: 1.18rem; font-weight: 800; }
.btn--tam { width: 100%; }

/* 5. Üst şerit — KALDIRILDI. Çalışma saati ve telefonu taşıyan koyu bant
   başlığın üstünden çıkarıldı; sayfa doğrudan navbar ile başlar. */

/* ----------------------------------------------------------
   6. Başlık / Menü
   ---------------------------------------------------------- */
.baslik {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cizgi);
    transition: box-shadow var(--gecis);
}
.baslik.kaydi { box-shadow: var(--golge); }

.baslik__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 68px;
}

.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--lacivert); }
/* Logo yüksekliğe göre ölçeklenir; kaynak dosya 343x112 (oran 3,06). */
.logo picture { display: flex; }
.logo img { height: 46px; width: auto; max-width: calc(100vw - 6rem); }
@media (max-width: 640px) { .logo img { height: 40px; } }
.logo__ikon { color: var(--mavi); display: flex; }
.logo__yazi { display: flex; flex-direction: column; line-height: 1.15; }
.logo__yazi strong { font-size: 1.22rem; font-weight: 900; letter-spacing: -.03em; }
.logo__yazi small { font-size: .68rem; color: var(--metin-acik); font-weight: 600; letter-spacing: .02em; }

.menu { display: flex; align-items: center; gap: 1.25rem; }

.menu__liste { display: flex; align-items: center; gap: .25rem; }

.menu__liste > li > a {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .55rem .7rem;
    border-radius: var(--yuvarlak-sm);
    color: var(--metin);
    font-weight: 600;
    font-size: .93rem;
}
.menu__liste > li > a:hover { background: var(--mavi-acik); color: var(--lacivert); }
.menu__liste > li > a[aria-current] { color: var(--mavi); background: var(--mavi-acik); }

.menu__acilir { position: relative; }

.menu__alt {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 265px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-lg);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all var(--gecis);
}
.menu__acilir:hover .menu__alt,
.menu__acilir:focus-within .menu__alt {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.menu__alt a {
    display: block;
    padding: .55rem .75rem;
    border-radius: var(--yuvarlak-sm);
    color: var(--metin);
    font-size: .9rem;
    font-weight: 500;
}
.menu__alt a:hover { background: var(--mavi-acik); color: var(--lacivert); }
.menu__alt-tumu { border-top: 1px solid var(--cizgi); margin-top: .35rem; padding-top: .35rem; }
.menu__alt-tumu a { color: var(--mavi); font-weight: 700; }

.menu-dugme {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    color: var(--lacivert);
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    transition: color var(--gecis), background var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.menu-dugme span {
    display: block; width: 24px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--gecis), opacity var(--gecis);
}
.menu-dugme[aria-expanded="true"] {
    color: #fff;
    background: var(--lacivert);
    border-color: var(--lacivert);
    box-shadow: 0 8px 22px rgba(0,48,111,.22);
}
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu__mobil-baslik { display: none; }

.menu-perde {
    position: fixed; inset: 0;
    background: rgba(4,33,63,.50);
    backdrop-filter: blur(2px);
    z-index: 98;
    opacity: 0;
    transition: opacity var(--gecis);
    touch-action: none;
}
.menu-perde.acik { opacity: 1; }

@media (max-width: 1000px) {
    html.menu-acik { overscroll-behavior: none; }

    .baslik {
        background: #fff;
        backdrop-filter: none;
    }

    .menu-dugme { display: flex; }

    .menu {
        position: fixed;
        top: var(--menu-ust, 76px);
        right: .75rem;
        width: min(420px, calc(100vw - 1.5rem));
        max-height: calc(100dvh - var(--menu-ust, 76px) - .75rem);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: .6rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px) scale(.985);
        transform-origin: top right;
        transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis);
        z-index: 101;
        border: 1px solid var(--cizgi);
        border-radius: 18px;
        box-shadow: var(--golge-xl);
    }
    .menu.acik {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .menu__mobil-baslik {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem .55rem .7rem;
        margin-bottom: .2rem;
        border-bottom: 1px solid var(--cizgi);
    }
    .menu__mobil-baslik strong { color: var(--lacivert); font-size: 1.05rem; }
    .menu__mobil-baslik span { color: var(--metin-acik); font-size: .76rem; font-weight: 600; }

    .menu__liste { flex-direction: column; align-items: stretch; gap: .15rem; }
    .menu__liste > li > a {
        width: 100%;
        justify-content: space-between;
        padding: .78rem .65rem;
        font-size: .97rem;
        border-radius: 10px;
    }
    .menu__liste > li > a:hover { background: var(--zemin-alt); }
    .menu__liste > li > a[aria-current] {
        color: var(--mavi);
        background: transparent;
        font-weight: 800;
    }

    .menu__alt {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0;
        padding: .35rem;
        margin: 0 .25rem .35rem;
        min-width: 0;
        display: none;
        background: var(--zemin-alt);
        border-radius: 10px;
    }
    .menu__acilir.acik .menu__alt { display: block; }
    .menu__ok { transition: transform var(--gecis); }
    .menu__acilir.acik .menu__ok { transform: rotate(180deg); }

    .menu__cta { margin: .65rem .25rem .2rem; justify-content: center; }
}

/* ----------------------------------------------------------
   7. Kahraman (Hero)
   ---------------------------------------------------------- */
.kahraman {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1000px 520px at 86% -12%, rgba(255,255,255,.20), transparent 60%),
        linear-gradient(155deg, var(--koyu-orta) 0%, var(--koyu) 45%, var(--koyu-derin) 100%);
    color: #fff;
    overflow: hidden;
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

/* Arka plan görselini metnin arkasında sönümler — başlık her zaman net kalır. */
.kahraman::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(35,39,43,.94) 0%, rgba(35,39,43,.86) 38%, rgba(47,51,55,.62) 68%, rgba(58,64,70,.34) 100%);
    pointer-events: none;
}

/* Turuncu imza şeridi — sayfanın alt sınırını marka rengiyle kapatır */
.kahraman::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    height: 4px;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.5) 45%, transparent 92%);
    pointer-events: none;
}

.kahraman__ic {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Nur Tesisat'ın ortalanmış hero'sundan ayrışmak için sola yaslı blok */
.kahraman__metin {
    min-width: 0;
    width: min(100%, 720px);
    text-align: left;
}
@media (max-width: 900px) {
    .kahraman__ic { justify-content: center; }
    .kahraman__metin { text-align: center; }
}

.kahraman__gorsel {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--koyu);
}
.kahraman__gorsel picture { display: block; width: 100%; height: 100%; }
.kahraman__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.kahraman__rozet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    padding: .4rem 1rem;
    border-radius: var(--yuvarlak-tam);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.kahraman__rozet .nokta {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--turuncu);
    box-shadow: 0 0 0 0 rgba(248,110,38,.75);
    animation: nabiz-vurgu 2.4s infinite;
}
@keyframes nabiz-vurgu {
    0%   { box-shadow: 0 0 0 0 rgba(248,110,38,.75); }
    70%  { box-shadow: 0 0 0 9px rgba(248,110,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(248,110,38,0); }
}

.kahraman h1 { color: #fff; margin-bottom: 1rem; }
.kahraman h1 em {
    font-style: normal;
    color: var(--turuncu);
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.kahraman__ozet {
    font-size: clamp(1rem, 1.6vw, 1.13rem);
    color: #dfe4ea;
    margin-bottom: 1.6rem;
    max-width: 56ch;
}
.kahraman__ozet strong { color: #fff; }

.kahraman__butonlar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }

.kahraman__guven {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.18);
}
.kahraman__guven-oge { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.kahraman__guven-oge svg { color: var(--turuncu); }
.kahraman__guven-oge strong { display: block; font-size: 1.1rem; color: #fff; line-height: 1.1; }
.kahraman__guven-oge span { color: #dfe4ea; }

@media (max-width: 900px) {
    .kahraman__ozet { margin-inline: auto; }
    .kahraman__butonlar,
    .kahraman__guven { justify-content: center; }
}

/* ----------------------------------------------------------
   8. Hızlı cevap kutusu (GEO)
   ---------------------------------------------------------- */
.hizli-cevap {
    background: linear-gradient(135deg, var(--mavi-acik), #fff);
    border: 1px solid var(--turuncu-cizgi);
    border-left: 5px solid var(--mavi);
    border-radius: var(--yuvarlak);
    padding: 1.35rem 1.5rem;
    margin-block: 1.75rem;
}
.hizli-cevap__etiket {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mavi);
    margin-bottom: .5rem;
}
.hizli-cevap p { color: var(--metin); font-size: 1.02rem; margin: 0; }

.icerik-gorsel {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin: 0 0 2rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
    background: var(--zemin-alt);
}
.icerik-gorsel picture,
.icerik-gorsel img { display: block; width: 100%; height: 100%; }
.icerik-gorsel img { object-fit: cover; }

/* ----------------------------------------------------------
   9. Kartlar
   ---------------------------------------------------------- */
.izgara { display: grid; gap: 1.25rem; }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* auto-fit, geniş ekranda 285px'e sığdığı kadar sütun açıp 4'e çıkıyordu.
   Sınıf adının vaat ettiği gibi masaüstünde tam 3 sütun olsun. */
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
@media (min-width: 940px) {
    .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.izgara--4 { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.izgara--5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.kart {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 1.6rem;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
    display: flex;
    flex-direction: column;
}
.kart:hover { transform: translateY(-3px); box-shadow: var(--golge-lg); border-color: var(--turuncu-cizgi); }

.kart--hizmet { overflow: hidden; }

/* Öne çıkan (iki sütun kaplayan) hizmet kartı kaldırıldı: ızgarayı
   bozuyor ve yanındaki kartı dikey olarak uzatıyordu. Tüm kartlar eşit. */

.kart__gorsel {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin: -.55rem -.55rem 1rem;
    border-radius: calc(var(--yuvarlak) - 4px);
    background: var(--zemin-alt);
}
.kart__gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.kart:hover .kart__gorsel img { transform: scale(1.025); }

.kart--hizmet .kart__gorsel {
    margin: -1.6rem -1.6rem 1.1rem;
    border-radius: 0;
}

.kart__ikon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: var(--mavi-acik);
    color: var(--mavi);
    border-radius: var(--yuvarlak-sm);
    margin-bottom: 1rem;
}
.kart h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.kart p { color: var(--metin-orta); font-size: .94rem; flex: 1; }
.kart__link {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 1rem; font-weight: 700; font-size: .9rem; color: var(--mavi);
}
.kart__link:hover { gap: .6rem; }

.surec-gorsel {
    overflow: hidden;
    aspect-ratio: 2 / 1;
    margin: 0 0 2rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-lg);
    box-shadow: var(--golge);
    background: var(--zemin-alt);
}
.surec-gorsel picture,
.surec-gorsel img { display: block; width: 100%; height: 100%; }
.surec-gorsel img { object-fit: cover; object-position: center 48%; }

@media (max-width: 640px) {
    .izgara.ana-mobil-ikili {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }

    .ana-mobil-ikili .kart {
        min-width: 0;
        padding: 1rem .85rem;
        overflow-wrap: anywhere;
    }

    /* Görsel basıklaştırıldı (3:2 yerine 16:10), kart dikeyde kısalır. */
    .ana-mobil-ikili .kart--hizmet .kart__gorsel {
        margin: -1rem -.85rem .65rem;
        border-radius: 0;
        aspect-ratio: 16 / 10;
    }

    .ana-mobil-ikili .kart h3 {
        font-size: .93rem;
        line-height: 1.28;
    }

    /* Dar sütunda uzun açıklama kartı aşırı uzatıyordu. Metin iki satırda
       kesilir; HTML'de tam metin durduğu için arama motoru etkilenmez. */
    .ana-mobil-ikili .kart p {
        font-size: .79rem;
        line-height: 1.42;
        margin-top: .25rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* "Detayları gör" satırı mobilde gizlenir: hem kart görseli hem
       başlık zaten aynı hizmet sayfasına bağlantı, satır yalnızca
       kartı uzatıyordu. */
    .ana-mobil-ikili .kart--hizmet .kart__link { display: none; }
}

/* Rakam şeridi — koyu tam genişlik bant (kaynak sitede beyaz kart ızgarasıydı) */
.rakam-serit {
    background: linear-gradient(135deg, var(--koyu-orta) 0%, var(--koyu-derin) 100%);
    color: #fff;
    padding-block: clamp(2.25rem, 4vw, 3.25rem);
    position: relative;
}
.rakam-serit::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.45) 40%, transparent 88%);
}
.rakamlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
}
.rakam {
    text-align: center;
    padding: .5rem 1rem;
    border-left: 1px solid rgba(255,255,255,.14);
}
.rakam:first-child { border-left: 0; }
.rakam b {
    display: block;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    color: #fff;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.rakam span { font-size: .86rem; color: rgba(255,255,255,.92); }

@media (max-width: 620px) {
    .rakamlar { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
    .rakam { border-left: 0; }
    .rakam:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); }
}

/* ----------------------------------------------------------
   9B. Süreç — dikey zaman çizelgesi
   (kaynak sitede yatay kart dizisiydi)
   ---------------------------------------------------------- */
.zaman-cizelgesi {
    position: relative;
    max-width: 780px;
    margin-inline: auto;
    padding-left: 2.75rem;
}
.zaman-cizelgesi::before {
    content: "";
    position: absolute;
    left: 17px;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: linear-gradient(180deg, var(--turuncu), var(--turuncu-cizgi));
}
.zaman-adim { position: relative; padding-bottom: 1.9rem; }
.zaman-adim:last-child { padding-bottom: 0; }
.zaman-adim__no {
    position: absolute;
    left: -2.75rem;
    top: 0;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--turuncu);
    color: #fff;
    border: 3px solid var(--zemin);
    border-radius: 50%;
    font-weight: 900;
    font-size: .95rem;
    box-shadow: 0 0 0 1px var(--turuncu-cizgi);
}
.zaman-adim h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.zaman-adim p { color: var(--metin-orta); font-size: .95rem; }

@media (max-width: 520px) {
    .zaman-cizelgesi { padding-left: 2.35rem; }
    .zaman-cizelgesi::before { left: 14px; }
    .zaman-adim__no { left: -2.35rem; width: 30px; height: 30px; font-size: .85rem; }
}

/* ----------------------------------------------------------
   9C. İki sütunlu "neden biz" bloğu
   (kaynak sitede 6 kartlık ızgaraydı)
   ---------------------------------------------------------- */
/* Görsel sütunu, sağdaki metin sütunuyla AYNI yüksekliktedir:
   başlığın üst hizasından son maddenin alt hizasına kadar uzanır.
   Bu yüzden align-items: center değil, stretch (varsayılan) kullanılır. */
.neden-sarmal {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: stretch;
}
@media (max-width: 900px) { .neden-sarmal { grid-template-columns: 1fr; } }

.neden-gorsel {
    margin: 0;
    border-radius: var(--yuvarlak-lg);
    overflow: hidden;
    border: 1px solid var(--cizgi);
    box-shadow: var(--golge-lg);
    background: var(--zemin-alt);
    /* Sütun yüksekliğini birebir doldurur; oran sabitlenmez. */
    height: 100%;
    min-height: 380px;
}
.neden-gorsel picture, .neden-gorsel img { display: block; width: 100%; height: 100%; }

/* Kaynak fotoğraf YATAY (1200x675). Dikey çerçevede ortadan kırpılırsa
   iki yandaki işçi de kadraj dışında kalıp yalnızca boş oda görünüyor.
   Kırpma sola çekilerek koltuğu streçleyen işçi çerçevede tutulur.
   Dikey (portre) bir fotoğraf yüklenirse bu değer 'center' yapılabilir. */
.neden-gorsel img { object-fit: cover; object-position: 22% center; }

/* Tek sütuna düşen mobilde dikey görsel ekranı kaplamasın diye
   ölçülü bir oran verilir. */
@media (max-width: 900px) {
    .neden-gorsel {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

.neden-liste { display: grid; gap: 1.15rem; }
.neden-oge { display: flex; gap: .95rem; align-items: flex-start; }
.neden-oge__ikon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: var(--turuncu-acik);
    border: 1px solid var(--turuncu-cizgi);
    color: var(--turuncu);
    border-radius: var(--yuvarlak-sm);
}
.neden-oge h3 { font-size: 1.03rem; margin-bottom: .18rem; }
.neden-oge p { color: var(--metin-orta); font-size: .93rem; }

/* ----------------------------------------------------------
   10. İlçe / etiket bağlantıları
   ---------------------------------------------------------- */
.etiketler { display: flex; flex-wrap: wrap; gap: .5rem; }

.etiket {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .95rem;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-sm);
    font-size: .88rem;
    font-weight: 600;
    color: var(--metin);
    transition: all var(--gecis);
}
.etiket:hover { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.etiket--vurgu { background: var(--turuncu-acik); border-color: var(--turuncu-cizgi); color: var(--lacivert); }
.etiket--vurgu:hover { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }

.ilce-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .6rem;
}
.ilce-izgara a {
    display: block;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-sm);
    font-size: .9rem;
    font-weight: 600;
    color: var(--metin);
    transition: all var(--gecis);
}
.ilce-izgara a:hover { border-color: var(--mavi); color: var(--mavi); background: var(--mavi-acik); transform: translateX(2px); }

/* Görselli ilçe kartları — ŞU AN KULLANILMIYOR.
   /bolgeler sayfası sade metin listesine (.ilce-izgara) döndürüldü.
   Stiller duruyor: görselli görünüme dönmek istenirse districts.php'de
   .ilce-izgara yerine .ilce-kart-izgara işaretlemesi yeterli. */
.ilce-kart-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.ilce-kart {
    position: relative;
    min-height: 170px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--yuvarlak);
    border: 1px solid var(--cizgi);
    box-shadow: var(--golge);
    background: var(--lacivert);
    color: #fff;
}
.ilce-kart img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gecis);
}
.ilce-kart::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(transparent, rgba(10,26,39,.92));
}
.ilce-kart span {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1rem;
    font-weight: 800;
    line-height: 1.25;
}
.ilce-kart:hover { color: #fff; border-color: var(--turuncu); }
.ilce-kart:hover img { transform: scale(1.035); }

.yaka-baslik {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.05rem; font-weight: 800; color: var(--lacivert);
    margin: 2rem 0 .9rem;
}
.yaka-baslik::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.yaka-baslik:first-child { margin-top: 0; }

/* ----------------------------------------------------------
   11. İçerik gövdesi (makale)
   ---------------------------------------------------------- */
.icerik { font-size: 1.03rem; color: var(--metin); line-height: 1.8; }
.icerik > * + * { margin-top: 1.15rem; }
.icerik h2 { margin-top: 2.5rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.icerik h3 { margin-top: 1.9rem; }
.icerik h2:first-child, .icerik h3:first-child { margin-top: 0; }
.icerik p { color: var(--metin-orta); }
.icerik strong { color: var(--metin); font-weight: 700; }

.icerik ul, .icerik ol { padding-left: 1.4rem; }
.icerik ul li, .icerik ol li { margin-bottom: .55rem; color: var(--metin-orta); }
.icerik ul li { list-style: none; position: relative; padding-left: 1.1rem; }
.icerik ul li::before {
    content: "";
    position: absolute; left: 0; top: .72em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--turuncu);
}
.icerik ol { list-style: decimal; }
.icerik ol li { padding-left: .35rem; }
.icerik ol li::marker { color: var(--mavi); font-weight: 800; }

/* Makale içi bağlantılar: koyu yazı + turuncu alt çizgi.
   Turuncu YAZI beyaz zeminde 2,90 kaldığı için gövde metninde renk yerine
   çizgi ile ayrışır; renk paleti yine tek turuncudan ibarettir. */
.icerik a {
    color: var(--metin);
    text-decoration: underline;
    text-decoration-color: var(--turuncu);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
}
.icerik a:hover { color: var(--turuncu); }
.icerik a:hover { color: var(--lacivert); }

.icerik blockquote {
    border-left: 4px solid var(--turuncu);
    background: var(--turuncu-acik);
    padding: 1.1rem 1.4rem;
    border-radius: 0 var(--yuvarlak-sm) var(--yuvarlak-sm) 0;
    font-style: italic;
}

.icerik table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.icerik th, .icerik td { padding: .7rem .9rem; border: 1px solid var(--cizgi); text-align: left; }
.icerik th { background: var(--zemin-alt); font-weight: 700; }

.icerik img { border-radius: var(--yuvarlak); margin-inline: auto; }

.icerik .mahalle-listesi {
    background: var(--zemin-alt);
    padding: 1rem 1.25rem;
    border-radius: var(--yuvarlak-sm);
    font-size: .93rem;
    line-height: 1.9;
}

/* Kenar çubuğu SOLDA — kaynak sitede sağdaydı. İçerik DOM'da önce geldiği
   için sıra `order` ile çevrilir; böylece ekran okuyucu ve mobil sırası
   (önce içerik) bozulmaz. */
.icerik-sarmal {
    display: grid;
    grid-template-columns: 330px minmax(0,1fr);
    gap: clamp(2rem,4vw,3.5rem);
    align-items: start;
}
.icerik-sarmal > *:first-child { order: 2; }
.icerik-sarmal > .kenar { order: 1; }

@media (max-width: 960px) {
    .icerik-sarmal { grid-template-columns: 1fr; }
    /* Mobilde önce içerik, sonra kenar çubuğu */
    .icerik-sarmal > *:first-child { order: 1; }
    .icerik-sarmal > .kenar { order: 2; }
}

/* ----------------------------------------------------------
   12. Kenar çubuğu
   ---------------------------------------------------------- */
.kenar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1.25rem; }

.kenar-kutu {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 1.35rem;
}
.kenar-kutu h3 { font-size: 1.02rem; margin-bottom: .9rem; }
.kenar-kutu ul li { margin-bottom: .45rem; }
.kenar-kutu ul li a { font-size: .92rem; color: var(--metin-orta); font-weight: 500; }
.kenar-kutu ul li a:hover { color: var(--mavi); }

/* Kenar CTA kutusu marka yeşiliyle dolar; üzerine koyu yazı gelir (6,6). */
.kenar-cta {
    background: linear-gradient(155deg, var(--koyu-orta), var(--koyu));
    border-color: var(--koyu);
    color: #fff;
    text-align: center;
}
.kenar-cta h3 { color: #fff; }
.kenar-cta p { font-size: .92rem; color: #dfe4ea; margin-bottom: 1.1rem; }
.kenar-cta .btn { width: 100%; }
.kenar-cta .btn + .btn { margin-top: .55rem; }

@media (max-width: 960px) { .kenar { position: static; } }

/* ----------------------------------------------------------
   13. SSS
   ---------------------------------------------------------- */
.sss-bolum { padding-block: clamp(3rem, 6vw, 4.5rem); }
.sss-liste { max-width: 840px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: .7rem; }

.sss {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sss[open] { border-color: var(--turuncu-cizgi); box-shadow: var(--golge); }

.sss summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--lacivert);
    cursor: pointer;
    list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary:hover { background: var(--zemin-alt); }
.sss__ok { color: var(--mavi); transition: transform var(--gecis); }
.sss[open] .sss__ok { transform: rotate(180deg); }

.sss__cevap { padding: 0 1.35rem 1.25rem; }
.sss__cevap p { color: var(--metin-orta); font-size: .97rem; }

/* ----------------------------------------------------------
   14. Yorumlar
   ---------------------------------------------------------- */
.yorum {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.yorum__yildiz { display: flex; gap: 2px; color: #fbbf24; margin-bottom: .8rem; }
.yorum__metin { color: var(--metin-orta); font-size: .96rem; flex: 1; }
.yorum__metin::before { content: "“"; }
.yorum__metin::after { content: "”"; }
.yorum__kisi { display: flex; align-items: center; gap: .75rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--cizgi); }
.yorum__harf {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--mavi-acik); color: var(--mavi);
    display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.yorum__ad { font-weight: 700; font-size: .93rem; }
.yorum__yer { font-size: .8rem; color: var(--metin-acik); }

.yorum-carousel {
    position: relative;
    overflow: hidden;
}

.yorum-carousel__iz {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(72%, 720px);
    gap: clamp(.85rem, 2vw, 1.4rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(14%, calc((100% - 720px) / 2));
    padding: .25rem max(14%, calc((100% - 720px) / 2)) 1.25rem;
    scrollbar-width: none;
    touch-action: pan-x pan-y pinch-zoom;
}

.yorum-carousel__iz::-webkit-scrollbar {
    display: none;
}

.yorum-carousel__kart {
    min-width: 0;
    min-height: 280px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-shadow: var(--golge);
}

.yorum-carousel__ok {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--lacivert);
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--cizgi);
    border-radius: 50%;
    box-shadow: var(--golge-lg);
    transform: translateY(-50%);
    transition: color var(--gecis), background var(--gecis), opacity var(--gecis);
}

.yorum-carousel__ok:hover {
    color: #fff;
    background: var(--mavi);
}

.yorum-carousel__ok:disabled {
    opacity: .35;
    cursor: default;
}

.yorum-carousel__ok--geri { left: .75rem; }
.yorum-carousel__ok--ileri { right: .75rem; }

@media (max-width: 640px) {
    .yorum-carousel__iz {
        grid-auto-columns: 78%;
        scroll-padding-inline: 11%;
        padding-inline: 11%;
    }

    .yorum-carousel__kart {
        min-height: 300px;
        padding: 1.25rem;
    }

    .yorum-carousel__ok {
        width: 42px;
        height: 42px;
    }

    .yorum-carousel__ok--geri { left: .35rem; }
    .yorum-carousel__ok--ileri { right: .35rem; }
}

.puan-ozet {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak); padding: 1.25rem 1.75rem;
    max-width: 460px; margin: 0 auto 2.5rem;
}
.puan-ozet__buyuk { font-size: 2.6rem; font-weight: 900; color: var(--lacivert); line-height: 1; }

/* ----------------------------------------------------------
   15. Blog
   ---------------------------------------------------------- */
.yazi-kart {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.yazi-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-lg); }
.yazi-kart__gorsel { display: block; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--mavi-acik), #e3ecf7); overflow: hidden; }
.yazi-kart__gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yazi-kart__ic { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.yazi-kart__kat {
    display: inline-block; align-self: flex-start;
    background: var(--mavi-acik); color: var(--mavi);
    font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: .25rem .7rem; border-radius: var(--yuvarlak-tam); margin-bottom: .7rem;
}
.yazi-kart h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.yazi-kart h3 a { color: var(--lacivert); }
.yazi-kart h3 a:hover { color: var(--mavi); }
.yazi-kart p { color: var(--metin-orta); font-size: .9rem; flex: 1; }
.yazi-kart__alt { display: flex; gap: .75rem; margin-top: 1rem; font-size: .8rem; color: var(--metin-acik); }

.yazi-basi { max-width: 800px; margin: 0 auto; text-align: center; padding-block: clamp(2rem,4vw,3rem); }
.yazi-basi h1 { margin-bottom: 1rem; }
.yazi-basi__bilgi { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; font-size: .88rem; color: var(--metin-acik); }

.sayfalama { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
    min-width: 42px; height: 42px;
    display: grid; place-items: center;
    padding-inline: .75rem;
    border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-sm);
    font-weight: 600; font-size: .92rem; color: var(--metin);
}
.sayfalama a:hover { border-color: var(--mavi); color: var(--mavi); background: var(--mavi-acik); }
.sayfalama .aktif { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }

/* ----------------------------------------------------------
   16. Uyarılar
   ---------------------------------------------------------- */
.uyari {
    padding: .9rem 1.15rem;
    border-radius: var(--yuvarlak-sm);
    margin-bottom: 1rem;
    font-size: .93rem;
    font-weight: 600;
}
.uyari--hata { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.uyari--basari { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.uyari--bilgi { background: var(--mavi-acik); border: 1px solid var(--turuncu-cizgi); color: var(--lacivert); }

/* ----------------------------------------------------------
   17. Kırıntı (breadcrumb)
   ---------------------------------------------------------- */
.kirinti { background: var(--zemin-alt); border-bottom: 1px solid var(--cizgi); padding-block: .7rem; }
.kirinti__liste { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .84rem; }
.kirinti__liste li { display: flex; align-items: center; gap: .35rem; }
.kirinti__liste a { color: var(--metin-orta); }
.kirinti__liste a:hover { color: var(--mavi); }
.kirinti__liste [aria-current] { color: var(--lacivert); font-weight: 600; }
.kirinti__ok { color: var(--metin-acik); }

/* ----------------------------------------------------------
   18. Sayfa başlığı bandı
   ---------------------------------------------------------- */
.sayfa-basi {
    position: relative;
    background:
        radial-gradient(820px 360px at 85% -25%, rgba(255,255,255,.13), transparent 62%),
        linear-gradient(110deg, rgba(10,26,39,.96), rgba(18,75,111,.84)),
        url('../img/depo-genel-960.webp') center 48% / cover no-repeat;
    color: #fff;
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
    text-align: center;
}
.sayfa-basi::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 4px;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.5) 45%, transparent 92%);
}
.sayfa-basi h1 { color: #fff; margin-bottom: .75rem; }
.sayfa-basi p { color: #dfe4ea; max-width: 720px; margin-inline: auto; }
.sayfa-basi p strong { color: #fff; }
.sayfa-basi__ikon {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    border-radius: var(--yuvarlak);
}
.sayfa-basi__butonlar { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* ----------------------------------------------------------
   19. Son çağrı bandı
   ---------------------------------------------------------- */
/* Son çağrı bandı marka yeşilidir; koyu yazı + turuncu buton. */
.son-cagri {
    background: linear-gradient(135deg, var(--koyu) 0%, var(--koyu-derin) 100%);
    color: #fff;
    padding-block: clamp(2.25rem, 4vw, 3rem);
}
.son-cagri__ic {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.75rem; flex-wrap: wrap;
}
.son-cagri h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.son-cagri p { color: #dfe4ea; margin-top: .35rem; font-size: 1.05rem; font-weight: 600; }
.son-cagri__butonlar { display: flex; gap: .7rem; flex-wrap: wrap; }

/* Dar ekranda iki buton YAN YANA kalır. btn--buyuk mobilde çok geniş
   olduğu için alt alta düşüyordu; burada küçültülüp eşit paylaştırılır. */
@media (max-width: 560px) {
    /* Telefon numarası "WhatsApp" yazısından uzun olduğu için sütunlar
       eşit değil; eşit olduğunda numara iki satıra bölünüyordu. */
    .son-cagri__butonlar {
        display: grid;
        grid-template-columns: 1.42fr 1fr;
        gap: .5rem;
        width: 100%;
    }
    .son-cagri__butonlar .btn {
        width: 100%;
        min-width: 0;
        padding: .8rem .4rem;
        font-size: .87rem;
        gap: .3rem;
        white-space: nowrap;
    }
    .son-cagri__butonlar .btn svg { width: 16px; height: 16px; }
}
.son-cagri .btn--vurgu { background: var(--turuncu); color: #fff; box-shadow: 0 4px 14px rgba(35,39,43,.35); }
.son-cagri .btn--vurgu:hover { background: var(--turuncu-koyu); color: #fff; }
.son-cagri .btn--vurgu svg { color: #fff; }
.son-cagri .btn--wa { background: var(--wa); color: #fff; box-shadow: 0 4px 14px rgba(35,39,43,.35); }
.son-cagri .btn--wa:hover { background: var(--wa-koyu); color: #fff; }

/* ----------------------------------------------------------
   20. Ayak (footer)
   ---------------------------------------------------------- */
.ayak {
    background: var(--koyu-derin);
    color: #c9ced6;
    font-size: .92rem;
}
/* Dört sütun tek blok: marka | hizmetler | kurumsal | ilçeler */
.ayak__ust {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
    gap: 2.5rem;
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
@media (max-width: 900px) {
    .ayak__ust { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .ayak__blok--marka { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ayak__ust { grid-template-columns: 1fr; } }

.ayak h3 { color: #fff; font-size: .98rem; margin-bottom: 1rem; }
.ayak a { color: #c9ced6; }
.ayak a:hover { color: var(--turuncu); }
.ayak ul li { margin-bottom: .5rem; }

.logo--ayak { color: #fff; margin-bottom: 1.15rem; display: block; }
.logo--ayak img { height: 44px; width: auto; max-width: 100%; }
.logo--ayak .logo__ikon { color: var(--turuncu); }
.ayak__aciklama { margin-bottom: 1.25rem; font-size: .89rem; line-height: 1.7; }

.ayak__adres { font-style: normal; }
.ayak__adres p { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .55rem; font-size: .88rem; }
.ayak__adres svg { color: var(--turuncu); margin-top: .25rem; flex-shrink: 0; }

.ayak__sosyal { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.ayak__sosyal a {
    padding: .35rem .85rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--yuvarlak-sm);
    font-size: .8rem; font-weight: 600;
}
.ayak__sosyal a:hover { background: rgba(255,255,255,.08); border-color: var(--turuncu); }

/* İlçeler: kendi sütunu içinde iki kolonlu kompakt liste */
.ayak__ilceler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 .75rem; }
.ayak__ilceler li { margin-bottom: .4rem; }
.ayak__ilceler a { font-size: .85rem; }
.ayak__tumu { display: inline-block; margin-top: .75rem; color: var(--turuncu); font-weight: 700; font-size: .87rem; }
.ayak__tumu:hover { color: #fff; }

.ayak__alt { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.25rem; }
/* Tek satır kaldığı için ortalanır (yapımcı imzası kaldırıldı). */
.ayak__alt-ic { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; font-size: .84rem; text-align: center; }
.ayak__not { color: #aab2bd; }


/* ----------------------------------------------------------
   21. Yüzen butonlar (sağ alt köşe)
   ---------------------------------------------------------- */
.yuzen-butonlar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: flex-end;
}

.yuzen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 58px;
    padding: 0;
    border-radius: var(--yuvarlak-tam);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: var(--golge-lg);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), gap var(--gecis);
}
.yuzen-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--golge-xl); }

.yuzen-btn__ikon {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.yuzen-btn__yazi {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .3s cubic-bezier(.4,0,.2,1), opacity .2s, padding .3s;
}
.yuzen-btn:hover .yuzen-btn__yazi,
.yuzen-btn:focus-visible .yuzen-btn__yazi {
    max-width: 220px;
    opacity: 1;
    padding-right: 1.35rem;
}

.yuzen-btn--wa { background: var(--wa); }
.yuzen-btn--wa:hover { background: var(--wa-koyu); }
.yuzen-btn--ara { background: var(--turuncu); color: #fff; }
.yuzen-btn--ara:hover { background: var(--turuncu); color: #fff; }

/* Ara butonundaki nabız efekti — dikkat çeker */
.nabiz {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--turuncu);
    animation: nabiz-halka 2.2s ease-out infinite;
    z-index: -1;
}
@keyframes nabiz-halka {
    0%   { transform: scale(1); opacity: .65; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* Mobil alt çubuk */
.mobil-cubuk { display: none; }

@media (max-width: 768px) {
    .yuzen-butonlar { display: none; }

    .mobil-cubuk {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 95;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: rgba(0,0,0,.08);
        box-shadow: 0 -4px 20px rgba(4,33,63,.18);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobil-cubuk__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .95rem .5rem;
        color: #fff;
        font-weight: 700;
        font-size: .93rem;
    }
    .mobil-cubuk__btn:hover { color: #fff; }
    .mobil-cubuk__btn--ara { background: var(--turuncu); color: #fff; }
    .mobil-cubuk__btn--wa { background: var(--wa); color: #fff; }

    /* Alt çubuk içeriği kapatmasın */
    body { padding-bottom: 56px; }
}

/* ----------------------------------------------------------
   22. Harita
   ---------------------------------------------------------- */
.harita {
    border-radius: var(--yuvarlak);
    overflow: hidden;
    border: 1px solid var(--cizgi);
    line-height: 0;
}
.harita iframe { width: 100%; height: 380px; border: 0; }

.bolum--konum { background: var(--zemin); }
.bolge-konum__harita { box-shadow: var(--golge); }
.bolge-konum__baglanti { margin-top: 1rem; text-align: right; }
.bolge-konum__baglanti a { font-size: .92rem; font-weight: 700; }

@media (max-width: 640px) {
    .surec-gorsel { aspect-ratio: 16 / 9; }
    .icerik-gorsel { margin-bottom: 1.5rem; }
    .harita iframe { height: 310px; }
    .bolge-konum__baglanti { text-align: left; }
}

/* ----------------------------------------------------------
   23. İletişim sayfası
   ---------------------------------------------------------- */
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (max-width: 900px) { .iletisim-izgara { grid-template-columns: 1fr; } }

.iletisim-kart {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.25rem;
    background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
    margin-bottom: .9rem;
}
.iletisim-kart__ikon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--yuvarlak-sm);
    background: var(--mavi-acik); color: var(--mavi);
}
.iletisim-kart h3 { font-size: 1rem; margin-bottom: .2rem; }
.iletisim-kart p, .iletisim-kart a { font-size: .93rem; color: var(--metin-orta); }
.iletisim-kart a:hover { color: var(--mavi); }

/* ----------------------------------------------------------
   24. 404
   ---------------------------------------------------------- */
.hata-sayfa { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.hata-sayfa__kod { font-size: clamp(4rem, 14vw, 8rem); font-weight: 900; color: var(--mavi-acik); line-height: 1; }
.hata-sayfa h1 { margin-top: -.5rem; }

/* ----------------------------------------------------------
   25. Google düzeninde yorumlar
   ---------------------------------------------------------- */
.gy { display: block; }

.gy-yildiz { color: var(--turuncu); }
.gy-yildiz--bos { color: var(--cizgi); }

/* --- Yorum kartları --- */
.gy__liste--izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Kaydırmalı şerit.
   Mobil: liste tam genişlikte, oklar ALTTA ortada. (Okları yanlara koymak
   335px'lik alandan 80px götürüp kartın tamamının görünmesini engelliyordu.)
   ≥760px: oklar listenin iki yanına geçer. */
.gy--kaydir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "liste liste"
        "geri  ileri";
    align-items: center;
    gap: .5rem;
}
.gy--kaydir .gy__liste--kaydir { grid-area: liste; }
.gy__ok--geri  { grid-area: geri;  justify-self: end; }
.gy__ok--ileri { grid-area: ileri; justify-self: start; }

@media (min-width: 760px) {
    .gy--kaydir {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "geri liste ileri";
    }
    .gy__ok--geri, .gy__ok--ileri { justify-self: center; }
}

.gy__ok {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    color: var(--lacivert);
    box-shadow: var(--golge-sm);
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis), opacity var(--gecis);
}
.gy__ok:hover { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
/* Şeridin ucuna gelindiğinde ok soluklaşır ama yerinde kalır —
   düzen kaymasın diye display:none kullanılmaz. */
.gy__ok[disabled] { opacity: .35; cursor: default; pointer-events: none; }

.gy__liste--kaydir {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    scrollbar-width: thin;
    /* Kart sola yaslanınca öncekinin bir parçası görünür kalsın diye
       snap noktası içeri alınır; şerit kesilmiş gibi durmaz.
       Görünen pay = bu değer eksi kartlar arası boşluk (1rem). */
    scroll-padding-inline-start: 2.75rem;
}
.gy__liste--kaydir .gy-kart {
    flex: 0 0 min(330px, 78vw);
    scroll-snap-align: start;
}

.gy-kart {
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-lg);
    padding: 1.2rem;
    box-shadow: var(--golge-sm);
    display: flex;
    flex-direction: column;
}

.gy-kart__ust { display: flex; align-items: center; gap: .7rem; }

.gy-kart__avatar {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
}

.gy-kart__kimlik { display: flex; flex-direction: column; min-width: 0; }
.gy-kart__ad {
    font-weight: 700;
    font-size: .95rem;
    color: var(--lacivert);
    line-height: 1.35;
}
.gy-kart__alt { font-size: .8rem; color: var(--metin-acik); }

.gy-kart__yildiz { display: flex; gap: 1px; margin-top: .8rem; }

.gy-kart__metin {
    margin-top: .55rem;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--metin-orta);
    flex: 1;
}

/* Şeridin altındaki "tümünü gör" butonu — bölümün içinde kalır */
.gy__tumu { text-align: center; margin-top: 2rem; }

/* Onay rozeti — yeşil tik, kartın alt kenarında */
.gy-kart__onay {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .95rem;
    padding-top: .75rem;
    border-top: 1px solid var(--cizgi);
    font-size: .78rem;
    font-weight: 600;
    color: var(--metin-acik);
}
.gy-kart__onay svg { color: var(--onay-yesil); flex-shrink: 0; }

@media (min-width: 700px) {
    .gy__liste--izgara { grid-template-columns: repeat(var(--gy-sutun, 3), minmax(0, 1fr)); }
}

/* ----------------------------------------------------------
   25b. Fiyat hesaplama aracı
   ---------------------------------------------------------- */
/* Tek sütun: soru kartı üstte, sonuç panosu altında açılır. */
.hesap {
    display: grid;
    gap: 1.1rem;
    max-width: 780px;
    margin-inline: auto;
}

.hesap__grup {
    background: var(--zemin);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-lg);
    padding: 1.25rem;
    box-shadow: var(--golge-sm);
}
.bolum--alt .hesap__grup { background: var(--zemin); }

.hesap__grup legend {
    font-weight: 800;
    font-size: 1rem;
    color: var(--lacivert);
    padding-inline: .4rem;
    margin-left: -.4rem;
}

/* --- Hazır hacim seçenekleri --- */
.hesap__secenekler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .55rem;
    margin-top: .9rem;
}

.hesap__secenek { position: relative; display: block; cursor: pointer; }
.hesap__secenek input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}

.hesap__secenek-ic {
    display: block;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: .7rem .8rem;
    transition: border-color var(--gecis), background var(--gecis);
    height: 100%;
}
.hesap__secenek:hover .hesap__secenek-ic { border-color: var(--turuncu-cizgi); }
.hesap__secenek input:checked + .hesap__secenek-ic {
    border-color: var(--turuncu);
    background: var(--turuncu-acik);
}
.hesap__secenek input:focus-visible + .hesap__secenek-ic {
    outline: 3px solid var(--turuncu);
    outline-offset: 2px;
}

.hesap__secenek-ad {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    color: var(--lacivert);
}
.hesap__secenek-m3 {
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--turuncu);
    margin-top: .1rem;
}
.hesap__secenek-not {
    display: block;
    font-size: .78rem;
    color: var(--metin-orta);
    line-height: 1.45;
    margin-top: .15rem;
}

/* Süre ve ek hizmet adımları kaldırıldı; stilleri de silindi.
   Araç tek soruya (hacim) indirgendi. */

.hesap__ince {
    display: block;
    margin-top: 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--metin-orta);
}
.hesap__sayi {
    width: 100%;
    margin-top: .35rem;
    padding: .7rem .85rem;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--zemin);
    font-weight: 700;
    color: var(--lacivert);
}
.hesap__sayi:focus {
    outline: 0;
    border-color: var(--turuncu);
    box-shadow: 0 0 0 3px var(--turuncu-acik);
}

/* Hesapla butonu — ok işareti pano açılınca yukarı döner. */
.hesap__buton {
    width: 100%;
    margin-top: 1.1rem;
    font-size: 1.05rem;
    padding-block: .95rem;
}
.hesap__buton svg { transition: transform var(--gecis); }
.hesap__buton--acik svg { transform: rotate(180deg); }

/* --- Sonuç paneli — koyu gri, turuncu vurgulu --- */
.hesap__sonuc {
    animation: hesapAcil .28s cubic-bezier(.4, 0, .2, 1);
    background: linear-gradient(155deg, var(--koyu-orta), var(--koyu-derin));
    color: #dfe4ea;
    border-radius: var(--yuvarlak-lg);
    padding: 1.5rem;
    box-shadow: var(--golge-lg);
}

.hesap__sonuc-etiket {
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #aab2bd;
    font-weight: 700;
}

.hesap__tutar {
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--turuncu);
    letter-spacing: -.03em;
    margin-top: .15rem;
}
.hesap__tutar-birim {
    font-size: .95rem;
    font-weight: 700;
    color: #dfe4ea;
    letter-spacing: 0;
}
.hesap__kdv { font-size: .88rem; color: #aab2bd; margin-top: .1rem; }
.hesap__kdv strong { color: #fff; }

.hesap__dokum {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: .9rem;
}
.hesap__dokum > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .38rem 0;
}
.hesap__dokum dt { color: #c9ced6; }
.hesap__dokum dd { font-weight: 700; color: #fff; white-space: nowrap; }
.hesap__indirim { color: var(--turuncu) !important; }

.hesap__toplam {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
}
.hesap__toplam strong { font-size: 1.3rem; font-weight: 900; white-space: nowrap; }

.hesap__taban {
    margin-top: .6rem;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--turuncu);
    font-weight: 600;
}

.hesap__uyari {
    margin-top: 1rem;
    font-size: .8rem;
    line-height: 1.6;
    color: #aab2bd;
}
.hesap__uyari strong { color: #fff; }

.hesap__butonlar {
    display: grid;
    gap: .55rem;
    margin-top: 1.1rem;
}
.hesap__butonlar .btn { width: 100%; }

@keyframes hesapAcil {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (min-width: 620px) {
    .hesap__butonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ----------------------------------------------------------
   26. Baskı
   ---------------------------------------------------------- */
@media print {
    .baslik, .ayak, .yuzen-butonlar, .mobil-cubuk,
    .son-cagri, .kenar, .hesap__butonlar { display: none !important; }
    body { padding: 0; font-size: 12pt; }
    .icerik-sarmal { grid-template-columns: 1fr; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}