/* ==========================================================================
   OtoErtug — Site (frontend) stil dosyası  ·  Tema: "Karanlık Showroom"
   --------------------------------------------------------------------------
   Yalnızca site tarafı. Yönetim paneli app/assets/css/admin.css kullanır ve
   --pnl-* / .pnl-* ad alanıyla tamamen ayrıdır; ikisi asla aynı sayfada
   yüklenmez. Buradaki hiçbir kural paneli etkilemez.

   Katman haritası — hepsini listelemek için:  grep -n '@@' style.css
     01 TOKEN          02 SIFIRLAMA        03 YERLEŞİM       04 TİPOGRAFİ
     05 BUTON          06 FORM             07 HEADER         08 MOBİL MENÜ
     09 ORTAK BİLEŞEN  10 FOOTER           11 MODAL          12 HERO
     13 DEĞER KUTUSU   14 SİHİRBAZ         15 PARÇA SEÇİCİ   16 SONUÇ
     17 ARAÇ           18 BLOG             19 MAKALE         20 TALEP FORMU
     21 İÇERİK SAYFA   22 DUYARLI          23 ERİŞİLEBİLİRLİK

   Sıra kuralı: sonraki katman yalnızca öncekini geçersiz kılabilir.
   ========================================================================== */

/* @@ 01 · TOKEN ----------------------------------------------------------- */
:root {
    /* Tarayıcıya "bu sayfa koyu" der: select açılır listesi, autofill kutusu,
       kaydırma çubuğu ve tarih seçici otomatik koyuya döner. Bu satır
       kaldırılırsa select listeleri beyaz üstüne beyaz olur. */
    color-scheme: dark;

    /* ---- Yüzeyler ---- */
    --bg:            #0B0F14;
    --bg-alt:        #0F151D;
    --surface:       #151C26;
    --surface-2:     #1C2531;
    --surface-glass: rgba(21, 28, 38, .72);
    --scrim:         rgba(5, 8, 12, .74);

    /* Hasar şeması adacığı. app/assets/img/araba.svg dolguları #E9E9E9/#FFFFFF,
       çizgileri #D3D2D2 — koyu zeminde kaybolur. SVG'ye de main.js'teki
       STATE_COLORS'a da dokunmamak için şemanın arkasına açık panel konur. */
    --panel-light:     #EFF2F6;
    --panel-light-ink: #0C1119;

    /* ---- Metin ---- */
    --text:      #E7EAF0;   /* zemine 15.9:1 */
    --text-dim:  #9AA6B8;   /* zemine  7.8:1 */
    --text-mute: #7C899C;   /* zemine  5.4:1 — taban, daha soluğa inme */

    /* KURAL: amber ya da nane dolgunun üstüne ASLA beyaz metin (1.85:1).
       Bu iki renk ya zemindir (üstüne --on-accent) ya da koyunun üstünde
       metindir. Aradaki üçüncü seçenek yok. */
    --on-accent: #0B0F14;

    /* ---- Marka ---- */
    --accent:        #F5B301;
    --accent-strong: #FFC933;
    --accent-dim:    #C08D00;
    --accent-wash:   rgba(245, 179, 1, .12);
    --accent-line:   rgba(245, 179, 1, .34);
    --second:        #3DDC97;
    --second-wash:   rgba(61, 220, 151, .12);
    --second-line:   rgba(61, 220, 151, .34);

    /* ---- Durum ---- */
    --ok:        #3DDC97;
    --warn:      #F5B301;
    --err:       #FF6B7A;   /* #e11d48 koyuda 4.09:1 kalıyordu, AA'yı geçmiyordu */
    --info:      #5FB2FF;
    --ok-wash:   rgba(61, 220, 151, .10);
    --err-wash:  rgba(255, 107, 122, .10);
    --info-wash: rgba(95, 178, 255, .10);
    --ok-ink:    #C6F3DF;
    --err-ink:   #FFD3D8;
    --info-ink:  #CFE6FF;

    /* ---- Çizgiler — İKİSİ FARKLI İŞ YAPAR, KARIŞTIRMAYIN ----
       --line dekoratiftir (kart kenarı, ayraç); WCAG 1.4.11'e tabi değil.
       --control-line etkileşimli alanın sınırıdır ve yüzeye karşı en az
       3:1 olmalı. Koyu temada bunu dolgu kontrastıyla ikame edemezsiniz —
       --control-bg ile --surface arası yalnızca 1.08:1. Kenarlık zorunlu. */
    --line:         #212A36;
    --line-soft:    rgba(231, 234, 240, .07);
    --control-line: #5A6B82;
    --control-bg:   #10161F;

    /* ---- Köşeler — showroom dili 8px ----
       Siteyi tamamen köşeli yapmak için hepsini 0 yapmak yeterli. */
    --r-xs:   4px;    /* renk kutucuğu, minik rozet */
    --r-sm:   6px;    /* çip, etiket, ikon kutusu */
    --r:      8px;    /* buton, input, kart, panel, modal */
    --r-lg:  12px;    /* hero kabuğu, tam ekran görüntüleyici */
    --r-pill: 999px;  /* nokta, avatar, segment ucu */

    /* ---- Yükselti ----
       Koyu temada gölge tek başına işe yaramaz (siyah üstüne siyah).
       Derinlik üstten gelen 1px iç ışık + geniş yumuşak gölge ile kurulur. */
    --elev-1: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .45);
    --elev-2: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .55);
    --elev-accent: 0 8px 24px rgba(245, 179, 1, .20);
    --blur: saturate(140%) blur(14px);

    /* ---- Tipografi ölçeği ---- */
    --f-display: clamp(38px, 6.2vw, 76px);
    --f-h1:      clamp(30px, 4.4vw, 48px);
    --f-h2:      clamp(24px, 3.2vw, 36px);
    --f-h3:      20px;
    --f-lg:      17px;
    --f-base:    15.5px;
    --f-sm:      13.5px;
    --f-xs:      12px;
    --lh-tight:   1.06;
    --lh-head:    1.18;
    --lh-body:    1.65;
    --tr-tight:   -.03em;
    --tr-eyebrow: .14em;

    /* ---- Ritim ---- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --section-y:      clamp(64px, 8vw, 112px);
    --container:      1280px;
    --container-read: 760px;   /* blog makale ölçüsü */
    --header-h:       72px;

    /* ---- Hareket ---- */
    --t-fast: .16s cubic-bezier(.2, .7, .3, 1);
    --t:      .24s cubic-bezier(.2, .7, .3, 1);
    --t-slow: .42s cubic-bezier(.2, .7, .3, 1);

    /* ---- Katmanlar ---- */
    --z-header:   100;
    --z-menu:     200;
    --z-modal:   1000;
    --z-lightbox:1100;
}

/* @@ 02 · SIFIRLAMA & TEMEL ----------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--bg);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: var(--f-base);
    line-height: var(--lh-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobil menü açıkken arka planın kayması engellenir (main.js body'ye ekler). */
body.menu-open {
    overflow: hidden;
}

img,
svg,
video,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

table {
    border-collapse: collapse;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

/* Odak halkası — tek yerden yönetilir, ayrıntı için bkz. katman 23.
   outline-offset zorunlu: halkayı amber dolgunun üstünden çıkarıp zemine
   taşır, aksi hâlde amber üstünde amber 1.21:1 ile görünmez olur. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- SVG ikonlar (app/icons.php) ---------- */
/* icon() satır içi SVG döndürür; boyut ve renk buradan yönetilir. */
svg {
    flex: none;
}

.icon svg,
.ci svg,
.b-ico svg,
.item .ico svg {
    width: 22px;
    height: 22px;
}

/* @@ 03 · YERLEŞİM -------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

.section {
    padding: var(--section-y) 0;
}

.section.alt {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    max-width: 720px;
    margin: 0 auto var(--s-7);
    text-align: center;
}

.section-head h2 {
    font-size: var(--f-h2);
    font-weight: 800;
    line-height: var(--lh-head);
    letter-spacing: var(--tr-tight);
    margin-bottom: var(--s-3);
}

.section-head p {
    color: var(--text-dim);
    font-size: var(--f-lg);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    color: var(--accent);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

.eyebrow svg {
    width: 15px;
    height: 15px;
}

.grid {
    display: grid;
    gap: var(--s-5);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* @@ 04 · TİPOGRAFİ ------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    line-height: var(--lh-head);
    letter-spacing: var(--tr-tight);
}

h1 {
    font-size: var(--f-h1);
}

h2 {
    font-size: var(--f-h2);
}

h3 {
    font-size: var(--f-h3);
}

.lead {
    color: var(--text-dim);
    font-size: var(--f-lg);
}

/* Sayısal değerler hizalı dursun (fiyat, istatistik, tablo). */
.result-price,
.aa-price,
.oto-price,
.stat .num,
.b-num,
.veri-tablo td {
    font-variant-numeric: tabular-nums;
}

/* Uzun düz metin blokları (nasıl-çalışır, hakkımızda) */
.prose {
    max-width: var(--container-read);
    color: var(--text-dim);
}

.prose h2,
.prose h3 {
    color: var(--text);
    margin: var(--s-7) 0 var(--s-3);
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose p {
    margin-bottom: var(--s-4);
}

.prose ul {
    margin-bottom: var(--s-4);
}

.prose ul li {
    position: relative;
    margin-bottom: var(--s-2);
    padding-left: var(--s-6);
}

.prose ul li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--accent);
}

.prose ul.check li::before {
    top: .3em;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--second);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* @@ 05 · BUTON ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t),
                transform var(--t), box-shadow var(--t);
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--elev-accent);
}

.btn-primary:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(245, 179, 1, .28);
}

.btn-success {
    background: var(--second);
    color: var(--on-accent);
    box-shadow: 0 8px 24px rgba(61, 220, 151, .20);
}

.btn-success:hover {
    background: #5BE8AC;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--control-line);
}

.btn-outline:hover {
    background: var(--accent-wash);
    color: var(--accent);
    border-color: var(--accent);
}

/* .cta-band içinde kullanılan ters buton */
.btn-light {
    background: var(--text);
    color: var(--bg);
}

.btn-light:hover {
    background: #fff;
    transform: translateY(-1px);
}

.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* Amber/nane dolgunun üstünde amber halka görünmez (1.21:1) — beyaza çevir. */
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-light:focus-visible {
    outline-color: var(--text);
}

/* Metin görünümlü ikincil eylem (Sıfırla bağlantıları) */
.link-reset {
    color: var(--text-mute);
    font-size: var(--f-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-fast);
}

.link-reset:hover {
    color: var(--accent);
}

/* @@ 06 · FORM ------------------------------------------------------------ */
/* ---------- Select: yerel ok kapalı, özel chevron ----------
   Ok bir background-image olduğu için select'in üstünde tıklamayı yakalayan
   bir katman yok; yine de üzerine ikon koyan olursa pointer-events kapalı olmalı.
   ⚠ select'e `background` KISAYOLU yazan her kural bu görseli siler. Koyu tema
   `background: var(--control-bg)` yazmaya davet ettiği için tuzak burada daha
   da tehlikeli — bileşenlerde daima `background-color` kullanın.
   Denetim:  grep -n 'select[^{]*{[^}]*[^-]background:' style.css   → boş olmalı */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA6B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px;
    padding-right: 40px;
    cursor: pointer;
}

select:disabled {
    cursor: not-allowed;
}

/* color-scheme:dark çoğu tarayıcıda yeter; bu kural Firefox/Linux için emniyet. */
option {
    background: var(--surface);
    color: var(--text);
}

/* ---------- Ortak alan görünümü ----------
   Değerleme sihirbazı, iletişim, talep formu ve araç filtresi aynı dili
   paylaşır; her sayfada tekrar tanımlanmaz. */
.form-group input,
.form-group select,
.form-group textarea,
.contact-form input,
.contact-form textarea,
.tf-field input,
.tf-field select,
.tf-field textarea,
.aa-filter input,
.aa-filter select,
.bl-search input,
.valuation-box select {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--control-bg);
    border: 1px solid var(--control-line);
    border-radius: var(--r);
    color: var(--text);
    font-size: 15px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast),
                background-color var(--t-fast);
}

.form-group textarea,
.contact-form textarea,
.tf-field textarea {
    min-height: 110px;
    resize: vertical;
}

::placeholder {
    color: var(--text-mute);
    opacity: 1;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.tf-field input:focus,
.tf-field select:focus,
.tf-field textarea:focus,
.aa-filter input:focus,
.aa-filter select:focus,
.bl-search input:focus,
.valuation-box select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.form-group input:disabled,
.form-group select:disabled,
.tf-field select:disabled {
    opacity: .55;
    border-color: var(--line);
    background-color: rgba(16, 22, 31, .6);
}

/* Otomatik doldurmada tarayıcının açık sarı zemini koyu temayı bozar. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 40px var(--control-bg) inset;
    caret-color: var(--text);
}

.form-group,
.tf-field,
.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.form-group label,
.tf-field label,
.field label {
    color: var(--text-dim);
    font-size: var(--f-sm);
    font-weight: 600;
}

.req {
    color: var(--err);
}

.field-hint,
.form-hint {
    color: var(--text-mute);
    font-size: var(--f-xs);
    line-height: 1.5;
}

.form-hint strong,
.field-hint strong {
    color: var(--text-dim);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
}

.form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ---------- Segment (evet/hayır ikilisi) ----------
   Gizli radio + label çifti. seg-lg büyük varyantı (ağır hasar kaydı). */
.seg {
    /* Gizli radio'lar position:absolute — konumları bu kabın içinde kalsın,
       yoksa odaklandıklarında tarayıcı sayfayı başka yere kaydırabilir. */
    position: relative;
    display: inline-flex;
    background-color: var(--control-bg);
    border: 1px solid var(--control-line);
    border-radius: var(--r);
    overflow: hidden;
}

.seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.seg label {
    padding: 8px 18px;
    color: var(--text-dim);
    font-size: var(--f-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.seg label:hover {
    color: var(--text);
}

.seg input:checked + label {
    background: var(--accent);
    color: var(--on-accent);
}

.seg-lg label {
    padding: 11px 30px;
    font-size: 15px;
}

/* Amber dolgu üstünde amber odak halkası görünmez — beyaza çevir ve içeri al. */
.seg input:focus-visible + label {
    outline: 2px solid var(--text);
    outline-offset: -3px;
}

/* ---------- Uyarı / bildirim kutuları ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--text-mute);
    border-radius: var(--r);
    font-size: 14.5px;
}

.alert.is-ok {
    background: var(--ok-wash);
    border-color: var(--second-line);
    border-left-color: var(--second);
    color: var(--ok-ink);
}

.alert.is-err {
    background: var(--err-wash);
    border-color: rgba(255, 107, 122, .28);
    border-left-color: var(--err);
    color: var(--err-ink);
}

.alert.is-info {
    background: var(--info-wash);
    border-color: rgba(95, 178, 255, .28);
    border-left-color: var(--info);
    color: var(--info-ink);
}

/* @@ 07 · HEADER ---------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(11, 15, 20, .72);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--line-soft);
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

/* Anasayfada header hero'nun üzerinde şeffaf başlar, kaydırınca katılaşır.
   .is-home partials/header.php'den, .scrolled main.js'ten gelir. */
.site-header.is-home {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header.is-home.scrolled {
    background: rgba(11, 15, 20, .82);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom-color: var(--line-soft);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    height: var(--header-h);
}

.logo {
    display: flex;
    align-items: center;
    flex: 1;
}

/* ---------- Metin logo — tek kaynak: partials/logo.php ----------
   Aynı partial'ı panelin iki yazdırma görünümü de kullanır; onlar kendi
   satır içi stillerinde bu sınıfları beyaz kâğıda göre tanımlar. */
.brand-logo {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.brand-oto {
    color: var(--text);
}

.brand-ertug {
    color: var(--accent);
}

/* ---------- Ana menü ---------- */
.main-nav {
    flex: none;
}

/* Üst barda 5 madde var ("Anasayfa" yalnızca mobil menüde). */
.main-nav ul {
    display: flex;
    gap: var(--s-6);
}

.main-nav a {
    position: relative;
    display: block;
    padding: 9px 2px;
    color: var(--text-dim);
    font-size: 15px;
    font-weight: 500;
    transition: color var(--t);
}

.main-nav a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--accent);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

/* Menüye gelince, hover edilen dışındaki aktif linkin çizgisi sağa kayarak
   kaybolur — imleç nereye gidiyorsa vurgu onu takip eder. */
.main-nav:hover a.active:not(:hover)::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* ---------- Header eylemleri ----------
   Eskiden burada üç dolu buton vardı (Aracını Sat / Araç Al / Konsinye).
   Üçü de aslında gezinmeydi ve "Aracını Sat" logoyla aynı yere gidiyordu;
   menüye taşındılar. Yerlerine iki farklı niyeti ayıran bir çift geldi:
   aramak isteyen için telefon, kendi bakmak isteyen için tek birincil CTA. */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

/* Telefon — çerçevesiz, iki satır. Butonla yarışmaz. */
.header-tel {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    white-space: nowrap;
    transition: color var(--t-fast);
}

.ht-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    color: var(--accent);
    transition: background var(--t-fast), border-color var(--t-fast);
}

.ht-ico svg {
    width: 17px;
    height: 17px;
}

.ht-metin {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ht-metin small {
    color: var(--text-mute);
    font-size: 11px;
    letter-spacing: .04em;
}

.ht-metin strong {
    color: var(--text);
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color var(--t-fast);
}

.header-tel:hover .ht-ico {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.header-tel:hover .ht-metin strong {
    color: var(--accent);
}

/* Tek birincil çağrı. */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 11px 20px;
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: var(--elev-accent);
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.header-cta svg {
    width: 17px;
    height: 17px;
}

.header-cta:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(245, 179, 1, .28);
}

/* Amber dolgunun üstünde amber halka görünmez. */
.header-cta:focus-visible {
    outline-color: var(--text);
}

/* ---------- Hamburger ---------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}

.nav-toggle span {
    display: block;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--text);
    transition: transform var(--t), opacity var(--t);
}

.nav-toggle:hover {
    border-color: var(--accent-line);
}

/* @@ 08 · MOBİL MENÜ (soldan) --------------------------------------------- */
/* main.js #mobileMenu'ye .open ekler; kapatma [data-mm-close], link tıklaması
   ve Escape ile olur. */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.open {
    visibility: visible;
    pointer-events: auto;
}

.mm-overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--t);
}

.mobile-menu.open .mm-overlay {
    opacity: 1;
}

.mm-panel {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(340px, 88vw);
    height: 100%;
    padding: var(--s-5);
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: var(--elev-2);
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    overflow-y: auto;
}

.mobile-menu.open .mm-panel {
    transform: translateX(0);
}

.mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.mm-head .brand-logo {
    font-size: 26px;
}

.mm-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text-dim);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.mm-close:hover {
    background: var(--surface-2);
    border-color: var(--accent-line);
    color: var(--accent);
}

.mm-nav {
    display: flex;
    flex-direction: column;
    padding: var(--s-5) 0;
}

.mm-nav a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-dim);
    font-size: var(--f-lg);
    font-weight: 600;
    transition: color var(--t-fast), padding-left var(--t-fast);
}

.mm-nav a:hover,
.mm-nav a.active {
    padding-left: 10px;
    color: var(--accent);
}

.mm-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    margin-top: auto;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}

.mm-actions .header-cta {
    justify-content: center;
    padding: 14px 16px;
    font-size: 15px;
}

.mm-actions .header-tel {
    justify-content: center;
}

/* @@ 09 · ORTAK BİLEŞEN --------------------------------------------------- */
/* ---------- Kart ---------- */
.card {
    position: relative;
    padding: var(--s-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.card:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
    box-shadow: var(--elev-2);
}

.card .icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--s-4);
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    color: var(--accent);
}

.card h3 {
    margin-bottom: var(--s-2);
}

.card p {
    color: var(--text-dim);
}

/* ---------- Adım kartı (1-2-3) ---------- */
.step {
    position: relative;
    padding: var(--s-6);
    padding-top: var(--s-7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.step .num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--s-4);
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: var(--f-h3);
    font-weight: 800;
}

.step h3 {
    margin-bottom: var(--s-2);
}

.step p {
    color: var(--text-dim);
}

/* ---------- İstatistik bandı ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.stat {
    padding: var(--s-6) var(--s-4);
    background: var(--surface);
    text-align: center;
}

.stat .num {
    margin-bottom: var(--s-1);
    color: var(--accent);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    letter-spacing: var(--tr-tight);
}

.stat p {
    color: var(--text-dim);
    font-size: var(--f-sm);
}

/* ---------- Çağrı bandı ---------- */
.cta-band {
    position: relative;
    padding: clamp(40px, 6vw, 72px) var(--s-6);
    background: linear-gradient(140deg, var(--surface), #1A2432);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.cta-band::after {
    content: "";
    position: absolute;
    top: -60%;
    left: 50%;
    z-index: -1;
    width: 140%;
    height: 200%;
    transform: translateX(-50%);
    background: radial-gradient(45% 40% at 50% 50%, rgba(245, 179, 1, .14), transparent 70%);
    pointer-events: none;
}

.cta-band h2 {
    margin-bottom: var(--s-3);
}

.cta-band p {
    max-width: 560px;
    margin: 0 auto var(--s-6);
    color: var(--text-dim);
    font-size: var(--f-lg);
}

/* ---------- İç sayfa başlığı ----------
   Ortalanmış blok yerine asimetrik iki sütun: solda başlık, sağda sayfaya
   özel bir yan blok (hızlı bilgi / kısayol). Başlığın soluna dikey amber
   çizgi çekilir. */
.page-hero {
    position: relative;
    padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px);
    background:
        radial-gradient(90% 120% at 12% -20%, rgba(245, 179, 1, .12), transparent 62%),
        var(--bg);
    border-bottom: 1px solid var(--line);
}

/* Zemine ince ızgara dokusu — hero ile aynı dil, ek DOM yok. */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(231, 234, 240, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(231, 234, 240, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(70% 90% at 15% 0%, #000, transparent);
    mask-image: radial-gradient(70% 90% at 15% 0%, #000, transparent);
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
}

.page-hero-main {
    position: relative;
    padding-left: var(--s-5);
    border-left: 2px solid var(--accent);
}

.page-hero h1 {
    margin-bottom: var(--s-3);
}

.page-hero-main > p {
    max-width: 56ch;
    color: var(--text-dim);
    font-size: var(--f-lg);
}

.page-hero .breadcrumb {
    margin: 0 0 var(--s-4);
}

/* Sağdaki yan blok — sayfaya göre içeriği değişir. */
.page-hero-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--surface-glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.page-hero-side .phs-baslik {
    margin-bottom: var(--s-1);
    color: var(--text-mute);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

.phs-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 9px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}

.phs-satir:first-of-type {
    border-top: none;
}

.phs-satir span {
    color: var(--text-dim);
}

.phs-satir strong {
    color: var(--accent);
    font-weight: 700;
}

.phs-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 11px 12px;
    background: rgba(231, 234, 240, .035);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.phs-link svg {
    width: 17px;
    height: 17px;
    color: var(--accent);
}

.phs-link:hover {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.phs-link:hover svg {
    color: inherit;
}

.breadcrumb,
.bl-crumb,
.bd-crumb,
.oto-crumb {
    margin-top: var(--s-5);
    color: var(--text-mute);
    font-size: var(--f-sm);
}

.breadcrumb a,
.bl-crumb a,
.bd-crumb a,
.oto-crumb a {
    color: var(--text-dim);
    transition: color var(--t-fast);
}

.breadcrumb a:hover,
.bl-crumb a:hover,
.bd-crumb a:hover,
.oto-crumb a:hover {
    color: var(--accent);
}

/* ---------- Çip / sayfalama ----------
   Blog etiketleri, kategori rozetleri ve iki sayfalayıcı (.aa-pag, .bl-pag)
   aynı görsel dili paylaşır; tek blokta tanımlanır. */
.bl-cat,
.bl-etiket,
.bl-pag a,
.bl-pag span,
.aa-pag a,
.bd-etiket {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: var(--f-sm);
    font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.bl-cat:hover,
.bl-etiket:hover,
.bl-pag a:hover,
.aa-pag a:hover,
.bd-etiket:hover {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.bl-cat.is-active,
.bl-etiket.is-active,
.bl-pag .is-active,
.aa-pag a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.bl-pag,
.aa-pag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-7);
}

/* @@ 10 · FOOTER ---------------------------------------------------------- */
.site-footer {
    margin-top: var(--s-9);
}

/* Değerleme çağrısı bandı — footer.php'de $showFooterCta ile kapalı. */
.footer-cta {
    background: linear-gradient(140deg, var(--surface), #1A2432);
    border-top: 1px solid var(--accent-line);
    border-bottom: 1px solid var(--line);
}

.footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-7) 0;
}

.footer-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    color: var(--accent);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

.footer-cta-eyebrow svg {
    width: 15px;
    height: 15px;
}

.footer-cta-text h3 {
    margin-bottom: var(--s-2);
    font-size: var(--f-h3);
}

.footer-cta-text p {
    max-width: 620px;
    color: var(--text-dim);
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 14px 28px;
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-weight: 650;
    white-space: nowrap;
    transition: background var(--t), transform var(--t);
}

.footer-cta-btn:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.footer-cta-btn svg {
    width: 18px;
    height: 18px;
}

/* ---------- Ana footer ---------- */
.footer-main {
    position: relative;
    background: linear-gradient(180deg, var(--bg) 0%, #080B10 100%);
    border-top: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
}

/* Ambiyans: tek CSS katmanı, ek DOM yok. */
.footer-main::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 12%;
    z-index: -1;
    width: 700px;
    height: 700px;
    background: radial-gradient(45% 45% at 50% 50%, rgba(245, 179, 1, .09), transparent 70%);
    pointer-events: none;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--s-7);
    padding: var(--s-8) 0 var(--s-7);
}

.footer-brand .brand-logo {
    font-size: 28px;
}

.footer-about {
    max-width: 340px;
    margin: var(--s-4) 0 var(--s-5);
    color: var(--text-dim);
    font-size: 14.5px;
}

.footer-social {
    display: flex;
    gap: var(--s-2);
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text-dim);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.footer-social a:hover {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.footer-social svg {
    width: 18px;
    height: 18px;
}

.footer-col h4 {
    position: relative;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-3);
    font-size: 15px;
}

.footer-col h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--accent);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.footer-col ul a {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--s-3);
    color: var(--text-dim);
    font-size: 14.5px;
    transition: color var(--t-fast), transform var(--t-fast);
}

.footer-col ul a:hover {
    color: var(--accent);
    transform: translateX(2px);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    color: var(--text-dim);
    font-size: 14.5px;
}

.footer-contact li > a {
    gap: var(--s-3);
}

.footer-contact .ci {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--accent);
}

.footer-contact .ci svg {
    width: 16px;
    height: 16px;
}

.footer-bottom {
    background: #070A0E;
    border-top: 1px solid var(--line);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5) 0;
    color: var(--text-mute);
    font-size: var(--f-sm);
}

.footer-legal {
    display: flex;
    gap: var(--s-5);
}

.footer-legal a {
    transition: color var(--t-fast);
}

.footer-legal a:hover {
    color: var(--accent);
}

/* Geliştirici rozeti koyu mürekkeple çizilmiş — koyu footer'da ters çevrilir. */
.footer-dev-img {
    height: 20px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .5;
    transition: opacity var(--t-fast);
}

.footer-dev:hover .footer-dev-img {
    opacity: .85;
}

/* @@ 11 · MODAL (parça durumu) -------------------------------------------- */
.pm-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
}

/* ⚠ ZORUNLU: .pm-modal display:flex kuruyor ve bu, tarayıcının [hidden]
   kuralını yener. Bu satır silinirse modal kalıcı açık kalır ve sayfayı
   bloklar. main.js yalnızca hidden niteliğini kaldırıp ekliyor. */
.pm-modal[hidden] {
    display: none;
}

.pm-overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pm-card {
    position: relative;
    width: min(400px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-2);
    overflow: hidden;
}

.pm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
}

.pm-head h4 {
    font-size: var(--f-lg);
}

.pm-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    color: var(--text-mute);
    font-size: 24px;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}

.pm-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.pm-options {
    display: flex;
    flex-direction: column;
}

.pm-opt {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 14px var(--s-5);
    border-top: 1px solid var(--line);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.pm-opt:first-child {
    border-top: none;
}

.pm-opt:hover {
    background: var(--surface-2);
}

.pm-opt.is-current {
    background: var(--accent-wash);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* @@ 12 · HERO (anasayfa) ------------------------------------------------- */
/* Tamamen kodla kurulur: hiçbir görsel dosyasına bağlı değildir. */
.hero {
    position: relative;
    padding: clamp(96px, 12vw, 168px) 0 var(--section-y);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

/* Header anasayfada şeffaf duruyor; hero onun altına çekilir ki ışık
   sayfanın en tepesinden başlasın. Header sticky kaldığı için kaydırma
   davranışı (ve main.js'in .scrolled kancası) bozulmaz. */
.site-header.is-home ~ main .hero {
    margin-top: calc(var(--header-h) * -1);
    padding-top: calc(clamp(96px, 12vw, 168px) + var(--header-h));
}

/* Showroom spot ışığı — tek radial gradient. */
.hero-glow {
    position: absolute;
    top: -22%;
    right: -10%;
    left: -10%;
    z-index: -1;
    height: 78vh;
    background: radial-gradient(58% 58% at 50% 0%, rgba(245, 179, 1, .17), transparent 70%);
    pointer-events: none;
}

/* Koyu yüzeye doku veren ızgara; kenarlara doğru maskeyle söner. */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(231, 234, 240, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(231, 234, 240, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 18%, #000, transparent);
    mask-image: radial-gradient(72% 62% at 50% 18%, #000, transparent);
    pointer-events: none;
}

.hero-inner {
    position: relative;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    padding: 7px 16px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    color: var(--accent);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

.hero-eyebrow svg {
    width: 15px;
    height: 15px;
}

.hero-title {
    /* ch birimi font boyutu clamp ile değiştiği için öngörülemez oluyordu;
       piksel sınırı her ekranda 2-3 satırlık dengeli bir blok verir. */
    max-width: min(900px, 100%);
    margin: 0 auto var(--s-5);
    font-size: var(--f-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
}

.hero-title em {
    color: var(--accent);
    font-style: normal;
}

.hero-sub {
    max-width: 58ch;
    margin: 0 auto;
    color: var(--text-dim);
    font-size: var(--f-lg);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 8px 16px;
    background: rgba(231, 234, 240, .04);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: var(--f-sm);
    font-weight: 500;
}

.trust-chip svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

/* @@ 13 · DEĞER SORGU KUTUSU ---------------------------------------------- */
/* Hero'nun merkezi. #degerle çapası blog.php'den (/#degerle) hedefleniyor. */
.valuation-box {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: var(--s-4);
    align-items: end;
    max-width: 980px;
    margin: var(--s-7) auto 0;
    padding: var(--s-5);
    background: var(--surface-glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-2);
    text-align: left;
    scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Üst kenardaki 1px ışık — koyu zeminde "cam" hissini veren şey budur. */
.valuation-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
}

/* Başlık satırı: kutuyu sihirbazın 1. adımı olarak konumlandırır. */
.vb-bas {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
}

.vb-adim {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--accent);
    border-radius: var(--r-sm);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.vb-adim small {
    font-size: 10px;
    font-weight: 700;
    opacity: .65;
}

.vb-baslik {
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
}

.valuation-box .field {
    margin-bottom: 0;
}

.valuation-box .btn {
    height: 46px;
}

/* Alıcılar için ikincil çıkış — birincil eylemle yarışmayan düz metin. */
.vb-alt {
    grid-column: 1 / -1;
    margin-top: var(--s-1);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
    color: var(--text-mute);
    font-size: var(--f-sm);
}

.vb-alt a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    font-weight: 600;
    transition: gap var(--t-fast);
}

.vb-alt a svg {
    width: 14px;
    height: 14px;
}

.vb-alt a:hover {
    gap: 10px;
}

/* @@ 14 · DEĞERLEME SİHİRBAZI --------------------------------------------- */
.valu-section {
    padding-top: clamp(48px, 6vw, 80px);
}

.valu-head {
    max-width: 640px;
    margin: 0 auto var(--s-7);
    text-align: center;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.valu-head h1 {
    margin-bottom: var(--s-3);
}

.valu-head p {
    color: var(--text-dim);
}

.valu-head strong {
    color: var(--err);
}

/* ---------- Adım göstergesi ---------- */
.wiz-steps {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 56px);
    max-width: 720px;
    margin: 0 auto var(--s-6);
}

.wiz-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--text-mute);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--t);
}

/* Tamamlanmış adıma tıklanıp geri dönülebilir (main.js). */
.wiz-step.is-done {
    cursor: pointer;
}

.wiz-step.is-active,
.wiz-step.is-done {
    color: var(--text);
}

/* Adımlar arası bağlayıcı çizgi */
.wiz-step + .wiz-step::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    width: clamp(8px, 4vw, 48px);
    height: 2px;
    background: var(--line);
    transition: background var(--t);
}

.wiz-step.is-active::before,
.wiz-step.is-done::before {
    background: var(--accent);
}

.wiz-dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-mute);
    font-size: 14px;
    font-weight: 700;
    transition: background var(--t), border-color var(--t), color var(--t);
}

/* main.js tamamlanan adımda rakamı stroke="currentColor" bir tik SVG'siyle
   değiştirir; renk buradan miras alınır, JS tarafında renk yok. */
.wiz-dot svg {
    width: 17px;
    height: 17px;
}

.wiz-step.is-active .wiz-dot,
.wiz-step.is-done .wiz-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* ---------- Sihirbaz gövdesi ---------- */
.detail-form {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
    transition: max-width var(--t-slow);
}

/* main.js 2. adımda .is-wide ekler — parça şeması iki sütun ister. */
.wiz-form.is-wide {
    max-width: 1080px;
}

/* ⚠ ZORUNLU İKİLİ: bu iki kural kaybolursa üç adım aynı anda görünür.
   Form yine gönderilir, hata da vermez — sihirbaz sessizce bozulur. */
.wiz-panel {
    display: none;
}

.wiz-panel.is-active {
    display: block;
}

.wiz-nav {
    margin-top: var(--s-6);
}

.wiz-nav-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.wiz-nav-right {
    display: flex;
    gap: var(--s-3);
}

/* ---------- Alım kriteri uyarısı (1. adım) ---------- */
.wiz-uyari {
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5);
    background: var(--err-wash);
    border: 1px solid rgba(255, 107, 122, .28);
    border-left: 3px solid var(--err);
    border-radius: var(--r);
    color: var(--err-ink);
    font-size: 14.5px;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.wiz-uyari strong {
    display: block;
    margin-bottom: var(--s-2);
    color: #FFE1E5;
}

.wiz-uyari ul {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.wiz-uyari li {
    position: relative;
    padding-left: var(--s-4);
}

.wiz-uyari li::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--err);
}

/* @@ 15 · PARÇA SEÇİCİ (2. adım) ------------------------------------------ */
.parca-head {
    margin-bottom: var(--s-6);
}

.parca-head h3 {
    margin-bottom: var(--s-2);
}

.parca-head p {
    color: var(--text-dim);
    font-size: 14.5px;
}

.parca-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-6);
    align-items: start;
}

.parca-left {
    min-width: 0;
}

/* ---------- Araç şeması: koyu sayfanın içinde kasıtlı aydınlık ada ----------
   app/assets/img/araba.svg dolguları #E9E9E9/#FFFFFF, çizgileri #D3D2D2.
   main.js seçilen parçaya el.style.fill yazar (STATE_COLORS, açık zemine
   göre ayarlı). SVG'ye de JS'e de dokunmamak için şemanın arkasına açık
   panel konur — showroom dilinde "ışıklı muayene kabini" gibi okunur. */
.car-panel {
    padding: var(--s-4);
    background: var(--panel-light);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--panel-light-ink);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.car-panel svg,
.damage-car {
    width: 100%;
    height: auto;
    max-height: 460px;
}

/* ⚠ [data-part] üzerinde ASLA fill tanımlanmaz: main.js satır içi
   el.style.fill yazıyor ve satır içi stil her CSS kuralını yener.
   Burada yalnızca imleç, geçiş ve çizgi güvenlidir. */
[data-part] {
    cursor: pointer;
    transition: opacity var(--t-fast), stroke var(--t-fast);
}

[data-part]:hover {
    opacity: .78;
    stroke: #111827;
}

/* ---------- Renk lejantı ---------- */
.car-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    margin-top: var(--s-4);
}

.car-legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-dim);
    font-size: var(--f-xs);
    font-weight: 500;
}

/* Kutucuk ve nokta renkleri main.js STATE_COLORS ile birebir aynı olmalı:
   ['#E9E9E9','#FACC15','#2563EB','#DC2626'] */
.sw,
.pm-opt .dot {
    display: inline-block;
    flex: none;
    border: 1px solid rgba(255, 255, 255, .22);
}

.sw {
    width: 14px;
    height: 14px;
    border-radius: var(--r-xs);
}

.pm-opt .dot {
    width: 16px;
    height: 16px;
    border-radius: var(--r-xs);
}

.s0 {
    background: #E9E9E9;
}

.s1 {
    background: #FACC15;
}

.s2 {
    background: #2563EB;
}

.s3 {
    background: #DC2626;
}

/* ---------- Durum satırı ---------- */
.parca-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 14px;
}

/* ---------- Ağır hasar kartı ---------- */
.hasar-card {
    margin-top: var(--s-5);
    padding: var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.hasar-label {
    margin-bottom: var(--s-3);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
}

.hasar-note {
    margin-top: var(--s-3);
    color: var(--text-mute);
    font-size: var(--f-xs);
}

/* ---------- Diğer bilgiler / şasi grupları ---------- */
.info-group {
    margin-bottom: var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.info-group-title {
    padding: 11px var(--s-4);
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--line);
    color: var(--text-mute);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 11px var(--s-4);
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}

.info-row:first-of-type {
    border-top: none;
}

.info-row > span {
    color: var(--text-dim);
}

.parca-right .form-group {
    margin-bottom: 0;
}

/* @@ 16 · SONUÇ SAYFASI --------------------------------------------------- */
.result-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px);
    background: linear-gradient(160deg, var(--surface), #10171F);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    box-shadow: var(--elev-2), 0 0 60px rgba(245, 179, 1, .06);
    text-align: center;
}

.result-price {
    margin: var(--s-2) 0 var(--s-4);
    color: var(--accent);
    font-size: clamp(38px, 7vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: var(--tr-tight);
}

/* Eski dosyada bu iki satır opacity ile soluklaştırılıyordu; koyu zeminde
   opacity beyazı çamurlaştırır — açık renk tokenı hem ölçülebilir hem daha
   temiz. */
.result-range {
    margin-bottom: var(--s-3);
    color: var(--text-dim);
    font-size: var(--f-lg);
}

.result-range strong {
    color: var(--text);
}

.result-note {
    color: var(--text-mute);
    font-size: 14px;
}

.result-note + .result-note {
    margin-top: var(--s-3);
}

/* ---------- Kırmızı durum (eksik alan / kriter dışı / engel / hız) ---------- */
.result-card.is-red {
    background: linear-gradient(160deg, #22131A, #180E13);
    border-color: rgba(255, 107, 122, .34);
    box-shadow: var(--elev-2);
    text-align: left;
}

.result-card.is-red .eyebrow {
    color: var(--err);
}

.result-red-title {
    margin-bottom: var(--s-4);
    color: var(--err-ink);
    font-size: var(--f-h2);
}

.result-red-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: var(--s-4) 0;
}

.result-red-list li {
    padding: 10px 14px;
    background: rgba(255, 107, 122, .10);
    border-left: 2px solid var(--err);
    border-radius: var(--r-xs);
    color: var(--err-ink);
    font-size: 14.5px;
}

.result-card.is-red .btn {
    margin-top: var(--s-4);
}

/* ---------- Özellik tablosu ----------
   Ayraçlar 1px boşluk + zemin rengi hilesiyle çizilir. */
.result-specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1px;
    max-width: 720px;
    margin: var(--s-6) auto 0;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.spec {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-4);
    background: var(--surface);
}

.spec span {
    color: var(--text-mute);
    font-size: var(--f-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.spec strong {
    color: var(--text);
    font-size: 15px;
}

/* ---------- Eylemler ---------- */
.result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

/* Randevu butonunun kabı. Satır içi JS başarıda bu kabın innerHTML'ini
   .randevu-ok markup'ıyla değiştirir — kap kalır, içerik değişir. */
.randevu-box {
    display: contents;
}

/* .randevu-ok sonuc.php içindeki satır içi JS tarafından DOM'a basılır;
   markup oradadır, stili burada. */
.randevu-ok {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: 14px 20px;
    background: var(--ok-wash);
    border: 1px solid var(--second-line);
    border-radius: var(--r);
    color: var(--second);
    font-size: 14.5px;
    text-align: left;
}

.randevu-ok span {
    color: var(--text-dim);
    font-size: var(--f-sm);
}

.randevu-ok b {
    color: var(--text);
}

/* @@ 17 · ARAÇ (listeleme + detay) ---------------------------------------- */
/* Bu katman iki sayfanın satır içi <style> bloklarından buraya taşındı:
   araba-al.php (.aa-*) ve arac-detay.php (.oto-*). */

/* ---------- Satıştaki araçlar ---------- */
.aa-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-7) clamp(20px, 4vw, 48px) var(--s-9);
}

.aa-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.aa-head h1 {
    font-size: clamp(24px, 3vw, 32px);
}

.aa-head p {
    margin-top: var(--s-1);
    color: var(--text-dim);
    font-size: 14px;
}

.aa-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.aa-filter input {
    flex: 1;
    min-width: 180px;
}

.aa-filter select {
    min-width: 180px;
}

.aa-filter button {
    padding: 12px 24px;
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 650;
    transition: background var(--t);
}

.aa-filter button:hover {
    background: var(--accent-strong);
}

.aa-filter button:focus-visible {
    outline-color: var(--text);
}

.aa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-5);
}

.aa-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: inherit;
    overflow: hidden;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.aa-card:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
    box-shadow: var(--elev-2);
}

.aa-photo {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
    overflow: hidden;
}

.aa-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Koyu zeminde fotoğrafın kenarı kaybolmasın diye ince iç halka. */
.aa-photo::after,
.bl-card-img::after,
.bd-kapak::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    pointer-events: none;
}

.aa-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-mute);
}

.aa-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: var(--accent);
    border-radius: var(--r-xs);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
}

.aa-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--s-4);
}

.aa-title {
    display: -webkit-box;
    min-height: 41px;
    margin-bottom: var(--s-2);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aa-meta {
    margin-bottom: var(--s-3);
    color: var(--text-dim);
    font-size: 13px;
}

.aa-price {
    margin-top: auto;
    color: var(--accent);
    font-size: 20px;
    font-weight: 800;
}

.aa-empty {
    padding: var(--s-9) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text-dim);
    text-align: center;
}

/* ---------- Araç detay ---------- */
.oto-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) clamp(20px, 4vw, 48px) var(--s-9);
}

.oto-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: 0;
    margin-bottom: var(--s-4);
}

.oto-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.oto-title {
    font-size: clamp(21px, 2.6vw, 28px);
    font-weight: 800;
    line-height: 1.3;
}

.oto-sub {
    margin-top: var(--s-1);
    color: var(--text-dim);
    font-size: 14px;
}

/* Durum rozeti — renk artık satır içi style ile değil sınıfla gelir. */
.oto-durum {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
}

.oto-durum.is-rezerve {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.oto-durum.is-satildi {
    background: var(--err-wash);
    border-color: rgba(255, 107, 122, .34);
    color: var(--err);
}

.oto-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: var(--s-6);
    align-items: start;
}

/* ---------- Galeri ---------- */
.oto-gal {
    background: #0D131B;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

.oto-gal-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: #0A0F16;
}

.oto-gal-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.oto-noimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    color: var(--text-mute);
    font-size: 14px;
}

.oto-nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: rgba(231, 234, 240, .12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-pill);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    transform: translateY(-50%);
    transition: background var(--t), transform var(--t);
}

.oto-nav:hover {
    background: rgba(231, 234, 240, .26);
    transform: translateY(-50%) scale(1.06);
}

.oto-nav.prev {
    left: 14px;
}

.oto-nav.next {
    right: 14px;
}

.oto-sayac {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 5px 11px;
    background: rgba(5, 8, 12, .78);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
}

.oto-one {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    background: var(--accent);
    border-radius: var(--r-xs);
    color: var(--on-accent);
    font-size: 11.5px;
    font-weight: 800;
}

.oto-thumbs {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface);
    border-top: 1px solid var(--line);
    overflow-x: auto;
}

.oto-thumbs img {
    flex: none;
    width: 88px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: var(--r-xs);
    object-fit: cover;
    opacity: .6;
    cursor: pointer;
    transition: opacity var(--t-fast), border-color var(--t-fast);
}

.oto-thumbs img:hover {
    opacity: 1;
}

.oto-thumbs img.is-active {
    border-color: var(--accent);
    opacity: 1;
}

/* ---------- Yapışkan fiyat / iletişim kartı ---------- */
.oto-side {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
}

.oto-price {
    color: var(--accent);
    font-size: clamp(27px, 3.4vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--tr-tight);
}

.oto-price small {
    display: block;
    margin-top: var(--s-1);
    color: var(--text-mute);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}

.oto-cips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin: var(--s-5) 0;
}

.oto-cip {
    padding: 9px 12px;
    background: var(--control-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.oto-cip span {
    display: block;
    color: var(--text-mute);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oto-cip strong {
    font-size: 14px;
    font-weight: 700;
}

.oto-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-size: 14.5px;
    font-weight: 700;
    transition: background var(--t), transform var(--t), border-color var(--t);
}

.oto-cta svg {
    width: 18px;
    height: 18px;
}

/* WhatsApp yeşilinin üstünde beyaz metin 1.98:1 — okunmuyordu, koyu mürekkep
   ile 9.7:1'e çıkıyor. */
.oto-cta.wp {
    background: #25D366;
    color: #06210F;
}

.oto-cta.wp:hover {
    background: #34E27A;
    transform: translateY(-2px);
}

.oto-cta.call {
    background: var(--accent);
    color: var(--on-accent);
}

.oto-cta.call:hover {
    background: var(--accent-strong);
    transform: translateY(-2px);
}

.oto-cta.alt {
    background: transparent;
    border-color: var(--control-line);
    color: var(--text);
}

.oto-cta.alt:hover {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent);
}

.oto-cta.wp:focus-visible,
.oto-cta.call:focus-visible {
    outline-color: var(--text);
}

.oto-cta-mt {
    margin-top: var(--s-3);
}

/* Satıldı / rezerve bilgi kutusu — renkler satır içi style'dan sınıfa taşındı. */
.oto-uyari {
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

.oto-uyari.is-satildi {
    background: var(--err-wash);
    border-color: rgba(255, 107, 122, .28);
    color: var(--err-ink);
}

.oto-uyari.is-rezerve {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.oto-sat-notu {
    margin-top: var(--s-4);
    color: var(--text-mute);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.oto-sat-notu a {
    color: var(--accent);
    font-weight: 600;
}

/* ---------- Bölümler ---------- */
.oto-section {
    margin-top: var(--s-6);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
}

.oto-section h2 {
    margin-bottom: var(--s-1);
    font-size: 18px;
    font-weight: 700;
}

.oto-desc-sub {
    margin-bottom: var(--s-5);
    color: var(--text-dim);
    font-size: 13px;
}

.oto-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-7);
}

.oto-spec {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}

.oto-spec span {
    color: var(--text-dim);
}

.oto-spec strong {
    font-weight: 600;
    text-align: right;
}

/* ---------- Kaporta ----------
   Nokta doygun rengi korur (metin dışı öğe, 3:1 yeter); ETİKET metni ise
   koyu zeminde okunabilir tona çevrilir. Eskiden ikisi de satır içi
   style="color:$renk" ile aynı doygun rengi alıyordu ve #2563EB 3.31:1,
   #DC2626 3.55:1 ile normal metin eşiğinin altında kalıyordu. */
.oto-kaporta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 9px;
}

.oto-kap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 10px 13px;
    background: var(--control-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 13.5px;
}

.oto-kap span {
    color: var(--text-dim);
}

.oto-kap b {
    font-size: 12.5px;
    font-weight: 700;
}

.oto-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: var(--r-pill);
}

.d-orijinal .oto-dot {
    background: #16A34A;
}

.d-lokal_boyali .oto-dot {
    background: #FACC15;
}

.d-boyali .oto-dot {
    background: #2563EB;
}

.d-degisen .oto-dot {
    background: #DC2626;
}

.d-orijinal b {
    color: var(--second);
}

.d-lokal_boyali b {
    color: var(--accent-strong);
}

.d-boyali b {
    color: var(--info);
}

.d-degisen b {
    color: var(--err);
}

.oto-kap-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.oto-kap-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--control-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
}

.oto-desc {
    color: var(--text-dim);
    font-size: 14.5px;
    line-height: 1.75;
    white-space: pre-wrap;
}

/* ---------- Benzer araçlar ---------- */
.oto-benzer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--s-5);
}

.oto-bcard {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.oto-bcard:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
    box-shadow: var(--elev-2);
}

.oto-bcard .ph {
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
}

.oto-bcard .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oto-bcard .bd {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-4);
}

.oto-bcard .bt {
    display: -webkit-box;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oto-bcard .bm {
    color: var(--text-dim);
    font-size: 12.5px;
}

.oto-bcard .bp {
    margin-top: auto;
    color: var(--accent);
    font-size: 17px;
    font-weight: 800;
}

/* ---------- Tam ekran görüntüleyici ---------- */
.oto-lb {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-7) var(--s-5);
    background: rgba(5, 8, 12, .96);
}

.oto-lb.is-open {
    display: flex;
}

.oto-lb img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--r);
    object-fit: contain;
}

.oto-lb-kapat {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 42px;
    height: 42px;
    background: rgba(231, 234, 240, .14);
    border-radius: var(--r-pill);
    color: var(--text);
    font-size: 24px;
    transition: background var(--t-fast);
}

.oto-lb-kapat:hover {
    background: rgba(231, 234, 240, .28);
}

.oto-lb .oto-nav {
    background: rgba(231, 234, 240, .16);
}

.oto-lb .oto-nav:hover {
    background: rgba(231, 234, 240, .3);
}

/* @@ 18 · BLOG (liste) ---------------------------------------------------- */
/* blog.php'nin satır içi <style> bloğundan buraya taşındı. */
.bl-hero {
    padding: clamp(48px, 6vw, 72px) 0 clamp(36px, 4vw, 56px);
    background:
        radial-gradient(110% 130% at 20% -10%, rgba(245, 179, 1, .12), transparent 62%),
        var(--bg);
    border-bottom: 1px solid var(--line);
}

.bl-hero .container {
    max-width: var(--container);
}

.bl-crumb {
    margin-top: 0;
    margin-bottom: var(--s-4);
}

.bl-hero h1 {
    margin-bottom: var(--s-3);
    font-size: clamp(28px, 4vw, 42px);
}

.bl-hero p {
    max-width: 760px;
    color: var(--text-dim);
    font-size: var(--f-lg);
}

.bl-search {
    display: flex;
    gap: var(--s-3);
    max-width: 520px;
    margin-top: var(--s-6);
}

.bl-search input {
    flex: 1;
}

.bl-search button {
    padding: 13px 24px;
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
    transition: background var(--t);
}

.bl-search button:hover {
    background: var(--accent-strong);
}

.bl-search button:focus-visible {
    outline-color: var(--text);
}

.bl-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-7) clamp(20px, 4vw, 48px) var(--s-9);
}

.bl-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
}

.bl-sonuc {
    margin-bottom: var(--s-5);
    color: var(--text-dim);
    font-size: 15px;
}

.bl-sonuc strong {
    color: var(--text);
}

.bl-sonuc a,
.bl-bos a {
    color: var(--accent);
    font-weight: 600;
}

.bl-cat span {
    color: var(--text-mute);
    font-weight: 500;
}

.bl-cat.is-active span {
    color: inherit;
    opacity: .7;
}

/* ---------- Vitrin (ilk yazı) ---------- */
.bl-vitrin {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    margin-bottom: var(--s-7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

/* Kapaklar 1200x630 üretiliyor; kırpma olmasın diye oran korunur. */
.bl-vitrin-img {
    position: relative;
    background: var(--surface-2);
    overflow: hidden;
}

.bl-vitrin-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-vitrin-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3vw, 40px);
}

.bl-rozet {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: var(--s-4);
    padding: 5px 10px;
    background: var(--accent);
    border-radius: var(--r-xs);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bl-vitrin-body h2 {
    margin-bottom: var(--s-3);
    font-size: clamp(21px, 2.6vw, 26px);
    line-height: 1.3;
}

.bl-vitrin-body h2 a {
    transition: color var(--t-fast);
}

.bl-vitrin-body h2 a:hover {
    color: var(--accent);
}

.bl-vitrin-body p {
    margin-bottom: var(--s-5);
    color: var(--text-dim);
    font-size: 15px;
}

/* ---------- Yazı kartları ---------- */
.bl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--s-5);
}

.bl-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.bl-card:hover {
    border-color: var(--accent-line);
    transform: translateY(-4px);
    box-shadow: var(--elev-2);
}

.bl-card-img {
    position: relative;
    display: block;
    background: var(--surface-2);
    overflow: hidden;
}

.bl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.bl-card:hover .bl-card-img img {
    transform: scale(1.04);
}

.bl-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--s-5);
}

.bl-card-kat {
    color: var(--accent);
    font-weight: 700;
}

.bl-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    color: var(--text-mute);
    font-size: 12.5px;
}

.bl-meta i {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--text-mute);
}

.bl-card-body h3 {
    margin-bottom: var(--s-3);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.bl-card-body h3 a {
    transition: color var(--t-fast);
}

.bl-card-body h3 a:hover {
    color: var(--accent);
}

.bl-card-body p {
    margin-bottom: var(--s-4);
    color: var(--text-dim);
    font-size: 14.5px;
}

.bl-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    transition: gap var(--t-fast);
}

.bl-read svg {
    width: 16px;
    height: 16px;
}

.bl-read:hover {
    gap: 11px;
}

.bl-bos {
    padding: var(--s-9) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text-dim);
    text-align: center;
}

.bl-bos strong {
    display: block;
    margin-bottom: var(--s-2);
    color: var(--text);
    font-size: 18px;
}

/* ---------- Etiket bulutu (yan sütunda) ---------- */
.bl-etiket-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.bl-etiket b {
    color: inherit;
    font-weight: 600;
    opacity: .6;
}

/* @@ 19 · MAKALE (blog detay) --------------------------------------------- */
/* ⚠ .giris .oz-kutu .not-kutu .uyari-kutu .kontrol-listesi .adim-listesi
   .tablo-sarmal .veri-tablo .cta-kutu .cta-btn — bu on sınıf panelde
   yazılan yazıların HTML'ine gömülü ve veritabanında duruyor. Adları
   DEĞİŞTİRİLEMEZ; yalnızca renkleri koyu temaya uyarlanır. */
.bd-hero {
    padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
    background:
        radial-gradient(110% 130% at 20% -10%, rgba(245, 179, 1, .12), transparent 62%),
        var(--bg);
    border-bottom: 1px solid var(--line);
}

.bd-hero .container {
    max-width: 900px;
}

.bd-crumb {
    margin-top: 0;
    margin-bottom: var(--s-4);
}

.bd-kat {
    display: inline-block;
    margin-bottom: var(--s-4);
    padding: 5px 11px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background var(--t-fast), color var(--t-fast);
}

.bd-kat:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.bd-hero h1 {
    margin-bottom: var(--s-4);
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.25;
}

.bd-hero .bd-ozet {
    margin-bottom: var(--s-5);
    color: var(--text-dim);
    font-size: var(--f-lg);
}

.bd-hmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    color: var(--text-mute);
    font-size: 13.5px;
}

.bd-hmeta i {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--text-mute);
}

.bd-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px) var(--s-9);
}

.bd-kapak {
    position: relative;
    margin: -28px 0 var(--s-7);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-2);
    overflow: hidden;
}

.bd-kapak img {
    width: 100%;
    height: auto;
}

/* ---------- Makale gövdesi ---------- */
.bd-icerik {
    color: var(--text-dim);
    font-size: 16.5px;
    line-height: 1.8;
}

.bd-icerik p {
    margin: 0 0 20px;
}

.bd-icerik p.giris {
    margin-bottom: 26px;
    color: var(--text);
    font-size: 18.5px;
    font-weight: 500;
    line-height: 1.75;
}

.bd-icerik h2 {
    margin: 42px 0 16px;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-size: clamp(21px, 2.6vw, 25px);
    font-weight: 800;
    line-height: 1.3;
}

.bd-icerik h3 {
    margin: 30px 0 12px;
    color: var(--text);
    font-size: 19px;
    font-weight: 700;
}

.bd-icerik a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: 3px;
    transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.bd-icerik a:hover {
    color: var(--accent-strong);
    text-decoration-color: var(--accent-strong);
}

.bd-icerik strong {
    color: var(--text);
    font-weight: 600;
}

.bd-icerik ul,
.bd-icerik ol {
    margin: 0 0 22px;
    padding-left: 22px;
    list-style: revert;
}

.bd-icerik li {
    margin-bottom: 9px;
}

.bd-icerik blockquote {
    margin: 26px 0;
    padding: 18px 24px;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--text);
    font-size: var(--f-lg);
    font-style: italic;
}

.bd-icerik figure {
    margin: 26px 0;
}

.bd-icerik figcaption {
    margin-top: var(--s-2);
    color: var(--text-mute);
    font-size: 13.5px;
    text-align: center;
}

/* ---------- Öz kutusu ---------- */
.bd-icerik .oz-kutu {
    margin: 0 0 30px;
    padding: 24px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--r);
}

.bd-icerik .oz-kutu h4 {
    margin: 0 0 12px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bd-icerik .oz-kutu ul {
    margin: 0;
    padding-left: 20px;
}

.bd-icerik .oz-kutu li {
    margin-bottom: 7px;
    color: var(--text-dim);
    font-size: 15.5px;
}

/* ---------- Not / uyarı kutuları ---------- */
.bd-icerik .not-kutu,
.bd-icerik .uyari-kutu {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 3px solid;
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 15.5px;
    line-height: 1.7;
}

.bd-icerik .not-kutu {
    background: var(--info-wash);
    border-color: var(--info);
    color: var(--info-ink);
}

.bd-icerik .uyari-kutu {
    background: var(--err-wash);
    border-color: var(--err);
    color: var(--err-ink);
}

.bd-icerik .not-kutu strong,
.bd-icerik .uyari-kutu strong {
    color: inherit;
}

/* ---------- Kontrol listesi ---------- */
.bd-icerik .kontrol-listesi {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.bd-icerik .kontrol-listesi li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 32px;
}

.bd-icerik .kontrol-listesi li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--second);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Adım listesi ---------- */
.bd-icerik .adim-listesi {
    margin: 0 0 26px;
    padding: 0;
    counter-reset: adim;
    list-style: none;
}

.bd-icerik .adim-listesi li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 48px;
    counter-increment: adim;
}

.bd-icerik .adim-listesi li::before {
    content: counter(adim);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: var(--r-sm);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
}

/* ---------- Veri tablosu ---------- */
.bd-icerik .tablo-sarmal {
    margin: 26px 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow-x: auto;
}

.bd-icerik .veri-tablo {
    width: 100%;
    min-width: 520px;
    background: var(--surface);
    border-collapse: collapse;
    font-size: 15px;
}

.bd-icerik .veri-tablo th {
    padding: 13px 16px;
    background: var(--surface-2);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.bd-icerik .veri-tablo td {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    color: var(--text-dim);
}

.bd-icerik .veri-tablo tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .02);
}

/* ---------- Makale içi CTA ---------- */
.bd-icerik .cta-kutu {
    margin: 36px 0 10px;
    padding: clamp(24px, 3vw, 32px);
    background: linear-gradient(140deg, var(--surface), #1A2432);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
}

.bd-icerik .cta-kutu h4 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
}

.bd-icerik .cta-kutu p {
    margin: 0 0 18px;
    color: var(--text-dim);
    font-size: 15.5px;
}

.bd-icerik .cta-kutu .cta-btn {
    display: inline-block;
    padding: 13px 26px;
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 700;
    transition: background var(--t);
}

.bd-icerik .cta-kutu .cta-btn:hover {
    background: var(--accent-strong);
}

/* ---------- Etiket / paylaşım / SSS / ilgili ---------- */
.bd-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-5);
    margin-top: var(--s-7);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}

.bd-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.bd-paylas {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.bd-paylas span {
    margin-right: 2px;
    color: var(--text-mute);
    font-size: 13px;
}

.bd-paylas a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.bd-paylas a:hover {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.bd-paylas svg {
    width: 18px;
    height: 18px;
}

.bd-sss {
    margin-top: var(--s-8);
}

.bd-sss h2 {
    margin-bottom: var(--s-5);
    font-size: clamp(21px, 2.6vw, 25px);
}

.bd-sss details {
    margin-bottom: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.bd-sss summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 17px 20px;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.bd-sss summary::-webkit-details-marker {
    display: none;
}

.bd-sss summary::after {
    content: "+";
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.bd-sss details[open] summary::after {
    content: "−";
}

.bd-sss p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--text-dim);
    font-size: 15.5px;
    line-height: 1.75;
}

.bd-ilgili {
    margin-top: var(--s-8);
}

.bd-ilgili h2 {
    margin-bottom: var(--s-5);
    font-size: clamp(21px, 2.6vw, 25px);
}

.bd-ilgili-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-5);
}

.bd-ic {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.bd-ic:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
    box-shadow: var(--elev-2);
}

.bd-ic img {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.bd-ic-body {
    padding: 16px 18px 20px;
}

.bd-ic-kat {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bd-ic h3 {
    margin-top: 7px;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.45;
}

/* @@ 21b · İÇ SAYFA YERLEŞİMLERİ ------------------------------------------
   Bu katman iç sayfaların iskeletini kurar. Hepsi aynı "başlık + ortalanmış
   bölümler" kalıbını paylaşmasın diye her sayfa kendi düzenini alır:
     hakkımızda      → metin + yapışkan yan sütun, değerler numaralı satır
     nasıl-çalışır   → dikey zaman çizelgesi
     iletişim        → tam genişlik bilgi bandı + ortalanmış form
     blog            → içerik + yapışkan yan sütun
     araç al         → yapışkan filtre sütunu + sonuç ızgarası
     sonuç           → sonuç kartı + araç özeti rayı
     değerleme       → solda dikey adım rayı
   ------------------------------------------------------------------------ */

/* Izgara sütunlarının içerik sütunları. min-width:0 şart: grid öğeleri
   varsayılan olarak min-width:auto alır ve uzun bir başlık ya da tablo
   sütunu daraltmak yerine düzeni taşırır. */
.ab-metin,
.bl-ana,
.aa-ana,
.sn-ana {
    min-width: 0;
}

/* ---------- HAKKIMIZDA ---------- */
.ab-govde {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.ab-metin p {
    margin-bottom: var(--s-4);
    color: var(--text-dim);
}

.ab-metin .lead {
    color: var(--text);
    font-size: var(--f-lg);
}

.ab-metin strong {
    color: var(--text);
}

.ab-metin em {
    color: var(--accent);
    font-style: normal;
}

.ab-yan {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.ab-baslik {
    max-width: 620px;
    margin-bottom: var(--s-7);
}

.ab-baslik h2 {
    font-size: var(--f-h2);
}

/* Değerler: altı kutuluk ızgara değil, numaralı satır listesi. */
.ab-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.ab-satir {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-5);
    background: var(--surface);
    transition: background var(--t-fast);
}

.ab-satir:hover {
    background: var(--surface-2);
}

.ab-no {
    color: var(--accent-dim);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.ab-ikon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: -6px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    color: var(--accent);
}

.ab-ikon svg {
    width: 18px;
    height: 18px;
}

.ab-icerik h3 {
    margin-bottom: 6px;
    font-size: 16.5px;
}

.ab-icerik p {
    color: var(--text-dim);
    font-size: 14.5px;
}

/* Misyon & vizyon: iki kart değil, ortadan bölünmüş tek blok. */
.ab-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 72px);
    padding: clamp(32px, 4vw, 56px);
    background: linear-gradient(140deg, var(--surface), #10171F);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.ab-yarim + .ab-yarim {
    position: relative;
}

.ab-yarim + .ab-yarim::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(clamp(32px, 5vw, 72px) / -2);
    width: 1px;
    height: 100%;
    background: var(--line);
}

.ab-yarim p {
    color: var(--text-dim);
}

/* ---------- NASIL ÇALIŞIR: dikey zaman çizelgesi ---------- */
.nc-akis {
    max-width: 860px;
    margin: 0 auto;
}

.nc-adim {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--s-5);
    padding-bottom: var(--s-8);
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.nc-adim:last-child {
    padding-bottom: 0;
}

/* Numara + adımları birbirine bağlayan dikey çizgi */
.nc-isaret {
    position: relative;
    display: flex;
    justify-content: center;
}

.nc-isaret::after {
    content: "";
    position: absolute;
    top: 56px;
    bottom: calc(var(--s-8) * -1);
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-line), var(--line));
    transform: translateX(-50%);
}

.nc-adim:last-child .nc-isaret::after {
    display: none;
}

.nc-no {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: 22px;
    font-weight: 800;
    box-shadow: var(--elev-accent);
}

.nc-govde {
    padding: var(--s-5) var(--s-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.nc-ikon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: var(--s-3);
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    color: var(--accent);
}

.nc-ikon svg {
    width: 17px;
    height: 17px;
}

.nc-govde h2 {
    margin-bottom: var(--s-2);
    font-size: 22px;
}

.nc-govde > p {
    color: var(--text-dim);
}

.nc-maddeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
}

.nc-maddeler li {
    padding: 6px 12px;
    background: var(--control-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: 13px;
}

/* Açıklama: solda yapışkan başlık, sağda metin */
.nc-aciklama {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.nc-aciklama-bas {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.nc-aciklama-bas h2 {
    font-size: var(--f-h2);
}

.nc-aciklama-metin p {
    margin-bottom: var(--s-5);
    color: var(--text-dim);
    font-size: var(--f-lg);
}

/* prose dışında da işaretli liste kullanılabilsin */
.nc-aciklama-metin ul.check li {
    position: relative;
    margin-bottom: var(--s-3);
    padding-left: var(--s-6);
    color: var(--text-dim);
}

.nc-aciklama-metin ul.check li::before {
    content: "";
    position: absolute;
    top: .3em;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--second);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- İLETİŞİM: tam genişlik bilgi bandı ---------- */
.il-bant {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

/* Yatay boşluğu .container veriyor, burada tekrarlanmaz. */
.il-bant-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.il-bant .item {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5) var(--s-6) 0;
    border-left: 1px solid var(--line);
    padding-left: var(--s-5);
}

.il-bant .item:first-child {
    border-left: none;
    padding-left: 0;
}

.il-bant .ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    color: var(--accent);
}

.il-bant h4 {
    margin-bottom: var(--s-1);
    font-size: 14px;
}

.il-bant p {
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.55;
}

.il-bant a {
    transition: color var(--t-fast);
}

.il-bant a:hover {
    color: var(--accent);
}

/* Form: ortalanmış tek kart, alanlar iki sütun */
.contact-form {
    max-width: 760px;
    margin: 0 auto;
}

.cf-bas {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.cf-bas h2 {
    margin-bottom: var(--s-2);
    font-size: 24px;
}

.cf-bas p {
    color: var(--text-dim);
    font-size: 14.5px;
}

.cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-4);
}

.cf-full {
    grid-column: 1 / -1;
}

/* ---------- BLOG: içerik + yapışkan yan sütun ---------- */
.bl-duzen {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.bl-yan {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.bl-yan-blok {
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.bl-yan-baslik {
    margin-bottom: var(--s-4);
    color: var(--text-mute);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

/* Yan sütunda kategoriler yatay dizi değil, dikey liste. */
.bl-yan .bl-cats {
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: 0;
}

.bl-yan .bl-cat {
    justify-content: space-between;
    width: 100%;
}

.bl-yan .bl-search {
    flex-direction: column;
    max-width: none;
    margin-top: 0;
}

.bl-yan-cta {
    padding: var(--s-5);
    background: linear-gradient(140deg, var(--surface), #1A2432);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
}

.bl-yan-cta strong {
    display: block;
    margin-bottom: var(--s-2);
    font-size: 16px;
}

.bl-yan-cta p {
    margin-bottom: var(--s-4);
    color: var(--text-dim);
    font-size: 13.5px;
}

/* Yan sütunlu düzende vitrin dar kalır — tek sütuna iner. */
.bl-duzen .bl-vitrin {
    grid-template-columns: 1fr;
}

.bl-duzen .bl-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- ARAÇ AL: yapışkan filtre sütunu ---------- */
.aa-duzen {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
    padding-top: var(--s-7);
}

.aa-yan {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.aa-duzen .aa-filter {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    padding: var(--s-5);
}

.aa-filter-baslik {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    color: var(--text-mute);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

.aa-filter-baslik svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
}

.aa-duzen .aa-filter input,
.aa-duzen .aa-filter select {
    min-width: 0;
}

.aa-duzen .aa-filter button {
    width: 100%;
}

.aa-temizle {
    display: block;
    margin-top: var(--s-3);
    color: var(--text-mute);
    font-size: 13px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aa-temizle:hover {
    color: var(--accent);
}

.aa-duzen .aa-head {
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 14px;
}

.aa-duzen .aa-head strong {
    color: var(--text);
}

.aa-duzen .aa-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ---------- SONUÇ: kart + araç özeti rayı ---------- */
.sn-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.sn-duzen .result-card,
.sn-duzen .result-specs {
    max-width: none;
    margin: 0;
}

.sn-yan {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.sn-yan-baslik {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    color: var(--text-mute);
    font-size: var(--f-xs);
    font-weight: 700;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
}

.sn-yan-baslik svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
}

/* Rayda özellikler ızgara değil, alt alta satır. */
.sn-yan .result-specs {
    grid-template-columns: 1fr;
}

.sn-yan .spec {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 11px var(--s-4);
}

.sn-yan .spec strong {
    text-align: right;
}

.sn-duzen .result-actions {
    justify-content: flex-start;
}

/* ---------- DEĞERLEME: solda dikey adım rayı ---------- */
.valu-duzen {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    max-width: 1140px;
    margin: 0 auto;
}

.valu-duzen .wiz-steps {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    flex-direction: column;
    gap: var(--s-5);
    max-width: none;
    margin: 0;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.valu-duzen .wiz-step {
    justify-content: flex-start;
}

/* Dikey rayda bağlayıcı çizgi de dikey olur. */
.valu-duzen .wiz-step + .wiz-step::before {
    top: auto;
    right: auto;
    bottom: calc(100% + 8px);
    left: 17px;
    width: 2px;
    height: var(--s-5);
}

/* Ray zaten yeterli genişlik bıraktığı için formun kendi üst sınırı kalkar;
   main.js'in 2. adımda eklediği .is-wide sınıfı dokunulmadan kalır ama bu
   düzende görsel bir etkisi olmaz (dar ekranda yeniden devreye girer). */
.valu-duzen .detail-form {
    max-width: none;
}

/* @@ 20 · TALEP FORMU (aracımı sat / konsinye) ---------------------------- */
/* talep-form.php'nin satır içi <style> bloğundan taşındı. Eski blok tema
   rengini PHP ile enterpolasyon yapıyordu; artık .tf-wrap üstündeki
   .is-alim / .is-konsinye sınıfı belirliyor. */
.tf-wrap {
    max-width: 660px;
    margin: 0 auto;
    padding: var(--s-7) clamp(20px, 4vw, 32px) var(--s-9);
}

.tf-head {
    margin-bottom: var(--s-6);
    text-align: center;
}

.tf-head .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--r);
}

.tf-wrap.is-alim .tf-head .ico {
    background: var(--accent-wash);
    border-color: var(--accent-line);
    color: var(--accent);
}

.tf-wrap.is-konsinye .tf-head .ico {
    background: var(--second-wash);
    border-color: var(--second-line);
    color: var(--second);
}

.tf-head h1 {
    margin-bottom: var(--s-2);
    font-size: clamp(22px, 3vw, 28px);
}

.tf-head p {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.6;
}

.tf-card {
    padding: clamp(20px, 3vw, 28px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
}

.tf-ok {
    padding: var(--s-5);
    background: var(--ok-wash);
    border: 1px solid var(--second-line);
    border-radius: var(--r);
    color: var(--ok-ink);
    font-weight: 600;
    text-align: center;
}

.tf-ok-link {
    display: inline-block;
    margin-top: var(--s-4);
    color: var(--accent);
    font-weight: 700;
}

.tf-err {
    margin-bottom: var(--s-5);
    padding: 16px 18px;
    background: var(--err-wash);
    border: 1px solid rgba(255, 107, 122, .28);
    border-radius: var(--r);
    color: var(--err-ink);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.tf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.tf-field {
    gap: 6px;
    margin-bottom: 0;
}

.tf-field.full {
    grid-column: 1 / -1;
}

.tf-btn {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 14px;
    border-radius: var(--r);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 700;
    transition: background var(--t), transform var(--t);
}

.tf-wrap.is-alim .tf-btn {
    background: var(--accent);
}

.tf-wrap.is-alim .tf-btn:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.tf-wrap.is-konsinye .tf-btn {
    background: var(--second);
}

.tf-wrap.is-konsinye .tf-btn:hover {
    background: #5BE8AC;
    transform: translateY(-1px);
}

.tf-btn:focus-visible {
    outline-color: var(--text);
}

/* ⚠ Bot tuzağı. display:none ya da hidden niteliği KULLANILMAZ — basit
   botlar o alanları atlar ve tuzak işlevini yitirir. Ekran dışına
   taşınmalı ki bot doldursun, insan görmesin. */
.tf-hp {
    position: absolute;
    left: -9999px;
}

/* @@ 21 · İÇERİK SAYFALARI ------------------------------------------------ */
/* ---------- Hakkımızda: bilgi paneli ----------
   Eski tasarımda burada markalı bir fotoğraf vardı; hero ile aynı dilde
   kodla kurulmuş panele çevrildi, dış görsele bağımlılık yok.
   Sayfanın sütun düzeni katman 21b'de (.ab-govde). */
.panel {
    position: relative;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px);
    background:
        radial-gradient(80% 70% at 70% 0%, rgba(245, 179, 1, .14), transparent 65%),
        linear-gradient(160deg, var(--surface), #10171F);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-2);
    overflow: hidden;
    isolation: isolate;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(231, 234, 240, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(231, 234, 240, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent);
    mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent);
}

.panel-rows {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 13px 16px;
    background: rgba(231, 234, 240, .035);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 14px;
}

.panel-row span {
    color: var(--text-dim);
}

.panel-row strong {
    color: var(--accent);
    font-weight: 700;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    color: var(--text);
    font-size: var(--f-h3);
    font-weight: 800;
}

.panel-title svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.badge {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--accent-line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
}

.b-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    background: var(--accent-wash);
    border-radius: var(--r);
    color: var(--accent);
}

.b-num {
    color: var(--accent);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.b-lbl {
    color: var(--text-dim);
    font-size: var(--f-sm);
}

/* ---------- İletişim formu ----------
   İletişim bilgileri artık dar bir sol sütunda değil, tam genişlik bir
   bantta duruyor (.il-bant, katman 21b). */
.contact-form {
    padding: clamp(24px, 3vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--elev-1);
}

/* ---------- 404 ---------- */
.notfound {
    padding: clamp(80px, 12vw, 160px) 0;
    text-align: center;
}

.notfound .code {
    color: var(--accent);
    font-size: clamp(96px, 18vw, 180px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tr-tight);
}

/* Degrade metin dolgusu — desteklenmeyen tarayıcıda üstteki düz renk kalır. */
@supports (-webkit-background-clip: text) {
    .notfound .code {
        background: linear-gradient(180deg, var(--accent), rgba(245, 179, 1, .16));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.notfound h1,
.notfound h2 {
    margin: var(--s-4) 0 var(--s-3);
    font-size: var(--f-h2);
}

.notfound p {
    margin-bottom: var(--s-6);
    color: var(--text-dim);
    font-size: var(--f-lg);
}

/* @@ 22 · DUYARLI --------------------------------------------------------- */
/* Geniş → dar sırayla. Aynı seçici birden çok eşikte geçiyorsa son yazan
   kazanır; bu yüzden sıra bozulmamalı. */

@media (max-width: 1120px) {
    /* Menü hamburgere iner. Telefon header'da KALIR — en değerli eylem o ve
       kullanıcının menüyü açmasını beklemek istemiyoruz. CTA mobil menüde. */
    .main-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .logo {
        flex: 1;
    }
}

@media (max-width: 1180px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-6);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1080px) {
    /* İç sayfa yerleşimleri: yan sütunlar içeriğin altına iner. */
    .ab-govde,
    .nc-aciklama,
    .bl-duzen,
    .aa-duzen,
    .sn-duzen,
    .page-hero-inner {
        grid-template-columns: 1fr;
    }

    .ab-yan,
    .bl-yan,
    .aa-yan,
    .sn-yan,
    .nc-aciklama-bas {
        position: static;
    }

    /* Yan sütun içeriğin ÜSTÜNE alınır (filtre ve arama önce görünsün). */
    .bl-yan,
    .aa-yan {
        order: -1;
    }

    .bl-duzen,
    .aa-duzen {
        display: flex;
        flex-direction: column;
    }

    .bl-yan {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bl-yan > * {
        flex: 1 1 260px;
    }

    .il-bant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Değerleme rayı yeniden yatay banda döner. */
    .valu-duzen {
        grid-template-columns: 1fr;
    }

    .valu-duzen .wiz-steps {
        position: static;
        flex-direction: row;
        justify-content: center;
        gap: clamp(16px, 4vw, 56px);
        background: none;
        border: none;
        padding: 0;
        margin-bottom: var(--s-6);
    }

    .valu-duzen .wiz-step + .wiz-step::before {
        top: 50%;
        right: calc(100% + 8px);
        bottom: auto;
        left: auto;
        width: clamp(8px, 4vw, 48px);
        height: 2px;
    }

    .valu-duzen .detail-form {
        max-width: 720px;
        margin: 0 auto;
    }

    .valu-duzen .wiz-form.is-wide {
        max-width: 1080px;
    }
}

@media (max-width: 980px) {
    .parca-grid {
        grid-template-columns: 1fr;
    }

    .ab-liste {
        grid-template-columns: 1fr;
    }

    .ab-ikili {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    .ab-yarim + .ab-yarim::before {
        top: calc(var(--s-6) / -2);
        left: 0;
        width: 100%;
        height: 1px;
    }

    .valuation-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .valuation-box .btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .oto-top {
        grid-template-columns: 1fr;
    }

    .oto-side {
        position: static;
    }

    .oto-specs {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .bl-vitrin {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 720px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .valuation-box {
        grid-template-columns: 1fr;
        padding: var(--s-4);
    }

    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .wiz-steps {
        gap: var(--s-3);
    }

    .wiz-name {
        display: none;
    }

    .wiz-step + .wiz-step::before {
        width: 24px;
        right: calc(100% + 6px);
    }

    .wiz-nav-2 {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .wiz-nav-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .wiz-nav-right .btn {
        width: 100%;
    }

    .result-specs {
        grid-template-columns: 1fr 1fr;
    }

    .footer-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .bd-alt {
        flex-direction: column;
    }

    .bd-kapak {
        margin-top: -20px;
    }

    .bd-icerik {
        font-size: 16px;
    }

    .bd-icerik .cta-kutu {
        padding: 24px 20px;
    }

    .oto-cips {
        grid-template-columns: 1fr;
    }

    .il-bant-grid {
        grid-template-columns: 1fr;
    }

    .il-bant .item {
        padding: var(--s-4) 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .il-bant .item:first-child {
        border-top: none;
    }

    .cf-grid {
        grid-template-columns: 1fr;
    }

    .nc-adim {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: var(--s-4);
    }

    .nc-no {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .nc-isaret::after {
        top: 44px;
    }

    .nc-govde {
        padding: var(--s-4);
    }

    .ab-satir {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--s-3);
    }

    .ab-no {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .stats {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .aa-head h1 {
        font-size: 22px;
    }

    .aa-filter input,
    .aa-filter select,
    .aa-filter button {
        width: 100%;
        min-width: 0;
    }

    .bl-search {
        flex-direction: column;
    }

    .result-specs {
        grid-template-columns: 1fr;
    }

    .tf-grid {
        grid-template-columns: 1fr;
    }

    .car-legend {
        gap: var(--s-2) var(--s-4);
    }

    .brand-logo {
        font-size: 26px;
    }

    /* Dar ekranda telefon yalnız ikona iner; numara mobil menüde tam hâliyle. */
    .header-actions .ht-metin {
        display: none;
    }
}

/* @@ 23 · ERİŞİLEBİLİRLİK & ÜÇÜNCÜ TARAF ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }
}

@media (prefers-contrast: more) {
    :root {
        --text-dim:     #C7CEDA;
        --text-mute:    #AEB8C6;
        --line:         #3A4658;
        --control-line: #8A99AE;
        --accent-line:  rgba(245, 179, 1, .60);
    }

    .card,
    .detail-form,
    .pm-card,
    .result-card,
    .bl-card,
    .aa-card,
    .oto-side,
    .tf-card,
    .contact-form {
        border-color: var(--control-line);
    }

    a:not(.btn):not(.header-cta):not(.header-tel):not(.phs-link) {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ---------- mail-menu.js açılır kutusu ----------
   app/assets/js/mail-menu.js panelle PAYLAŞILIR ve düzenlenmez. Kendi
   <style> bloğunu çalışma anında <head>'e ekler — yani bu dosyadan SONRA
   gelir ve eşit özgüllükte kazanır. `body ` önekiyle özgüllük artırılır;
   bu blok yalnızca site tarafına uygulanır, panel etkilenmez.
   Bu yüzden dosyanın en sonunda durur. */
body .mm-pop {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--elev-2) !important;
}

body .mm-pop-head {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--text-mute) !important;
}

body .mm-pop-item {
    color: var(--text) !important;
    border-color: var(--line-soft) !important;
}

body .mm-pop-item:hover,
body .mm-pop-item:focus {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}