/* ============================================================================
   Araç bilgi formu (A4 PDF çıktısı) — Views/AracBilgiFormu/Index.cshtml, js/arac-bilgi-formu.js.
   MHMotors "Araç Bilgi Formu"ndan taşındı; görünüm Otocars token'larıyla (marka-renkleri.css).

   Sayfa 794×1123 px (A4 @96dpi) sabit bir "sheet"tir ve html2canvas ile resme çevrilir. Bu yüzden
   yerleşimde bilerek TABLO / FLOAT / INLINE-BLOCK kullanılır: CSS grid ve flex boşluğu html2canvas 1.4.x'te
   güvenilir basılmaz; fotoğraflar object-fit yerine background-size: cover ile basılır.
   Punto değerleri A4 baskı ölçeğindedir (ekran token'ları 12 px'ten başlar, A4'e sığmaz); renk, aile,
   ağırlık ve köşeler token'dandır. Uzun listelerde betik içeriği tek sayfaya sığacak kadar küçültür.

   Araç detayında form ekran dışı bir konağa (.abf-host) basılır; orada site CSS'i de geçerlidir. Bu yüzden
   .abf-sheet içi önce sıfırlanır (aynı özgüllükte sonraki kural kazanır: sıfırlama bileşenlerden ÖNCE).
   ========================================================================== */

/* ── Araç detayındaki düğmenin hata metni ─────────────────────────────── */
.arac-bilgi-formu-hata {
    max-width: 320px;
    margin: 0;
    color: var(--renk-hata);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

/* ── Doğrudan açılan sayfa ────────────────────────────────────────────── */
.abf-page {
    margin: 0;
    padding: 0 0 var(--b-6);
    background-color: var(--gri-200);
    overflow-x: auto;
    color: var(--renk-metin);
    font-family: var(--t-aile);
    -webkit-font-smoothing: antialiased;
}

/* Üst çubuk (PDF'e girmez) */
.abf-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-yapiskan-icerik);
    padding: var(--b-3) var(--b-5);
    border-bottom: var(--kenar);
    background-color: var(--renk-yuzey);
}

.abf-bar__in {
    max-width: 794px;
    margin: 0 auto;
}

.abf-bar__t {
    display: inline-block;
    padding-top: var(--b-2);
    font-size: var(--t-sm);
    font-weight: var(--t-kalin);
    vertical-align: middle;
}

.abf-bar__act {
    float: right;
}

.abf-btn {
    display: inline-block;
    min-height: 40px;
    margin-left: var(--b-2);
    padding: var(--b-2) var(--b-4);
    border: 1px solid var(--renk-marka);
    border-radius: var(--r-orta);
    background-color: var(--renk-marka);
    color: var(--renk-marka-uzeri);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
}

.abf-btn:hover {
    border-color: var(--renk-marka-koyu);
    background-color: var(--renk-marka-koyu);
    color: var(--renk-marka-uzeri);
}

.abf-btn--ghost,
.abf-btn--ghost:hover {
    border-color: var(--renk-kenar-guclu);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
}

.abf-btn--ghost:hover {
    border-color: var(--gri-900);
}

.abf-btn:focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

.abf-btn[disabled] {
    opacity: .55;
    cursor: default;
}

.abf-bar__st {
    display: block;
    clear: both;
    padding-top: var(--b-1);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
}

/* ── Ekran dışı konak ──
   Form araç detayında sayfa açılmadan üretilirken buraya basılır. display:none / visibility:hidden
   KULLANILAMAZ (html2canvas boş tuval üretir); yalnız kadraj dışına alınır. */
.abf-host {
    position: absolute;
    top: 0;
    left: -10000px;
    width: 794px;
    height: 1123px;
    overflow: hidden;
}

/* ── Sıfırlama (bileşen kurallarından ÖNCE) ── */
.abf-sheet,
.abf-sheet * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* :where() özgüllük eklemez: aşağıdaki sınıf kuralları bunları ezebilsin. */
.abf-sheet :where(ul) {
    list-style: none;
}

.abf-sheet :where(img) {
    max-width: none;
    border: 0;
    vertical-align: baseline;
}

.abf-sheet :where(table) {
    border-spacing: 0;
}

/* ── A4 sayfa ── */
.abf-sheet {
    width: 794px;
    height: 1123px;
    margin: var(--b-5) auto;
    overflow: hidden;
    background-color: var(--gri-0);
    box-shadow: var(--golge-3);
    color: var(--renk-metin);
    font-family: var(--t-aile);
    font-size: 11px;
    font-weight: var(--t-normal);
    line-height: 1.35;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.abf-sheet--pdf {
    margin: 0;
    box-shadow: none;
}

.abf-inner {
    width: 794px;
    padding: 22px 22px 24px;
    transform-origin: 0 0;
}

.abf-kalin {
    font-weight: var(--t-kalin);
}

/* ── Başlık ── */
.abf-head {
    padding-bottom: 10px;
}

.abf-head__logo {
    display: inline-block;
    width: auto;
    height: 28px;
    vertical-align: middle;
}

.abf-head__t {
    float: right;
    padding-top: 6px;
    font-size: 13px;
    font-weight: var(--t-kalin);
}

/* ── Araç kimliği ── */
.abf-card {
    padding: 11px 13px 10px;
    border: var(--kenar);
    border-radius: var(--r-orta);
}

.abf-card__top {
    padding-bottom: 9px;
    border-bottom: var(--kenar);
}

.abf-card__ttl {
    display: block;
    font-size: 15px;
    font-weight: var(--t-kalin);
    line-height: 1.2;
}

.abf-card__sub {
    display: block;
    padding-top: 2px;
    color: var(--renk-metin-soluk);
    font-size: 10px;
}

.abf-card__no {
    float: right;
    padding-top: 3px;
    color: var(--renk-metin-soluk);
    font-size: 10px;
}

.abf-card__no .abf-kalin {
    padding-left: 4px;
    color: var(--renk-metin);
    font-size: 11px;
}

.abf-idtbl {
    width: 100%;
    margin-top: 9px;
    border-collapse: collapse;
    table-layout: fixed;
}

.abf-idtbl td {
    padding: 0 13px 0 0;
    border-right: var(--kenar);
    vertical-align: top;
}

.abf-idtbl td + td {
    padding-left: 15px;
}

.abf-idtbl td:last-child {
    padding-right: 0;
    border-right: 0;
}

.abf-lbl {
    display: block;
    padding-bottom: 2px;
    color: var(--renk-metin-soluk);
    font-size: 9px;
}

.abf-val {
    display: block;
    font-size: 11.5px;
    font-weight: var(--t-kalin);
    line-height: 1.25;
    word-break: break-word;
}

/* ── Dörtlü özet ── */
.abf-stats {
    width: calc(100% + 16px);
    margin: 10px -8px 0;
    border-collapse: separate;
    border-spacing: 8px 0;
    table-layout: fixed;
}

.abf-stats td {
    padding: 6px 11px;
    border: var(--kenar);
    border-radius: var(--r-kucuk);
    background-color: var(--renk-yuzey-ikincil);
}

/* ── Fotoğraflar ── */
.abf-shots {
    width: calc(100% + 16px);
    margin: 11px -8px 0;
    border-collapse: separate;
    border-spacing: 8px 0;
    table-layout: fixed;
}

.abf-shot {
    height: 200px;
    border-radius: var(--r-kucuk);
    background-color: var(--gri-100);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.abf-shot--bos {
    background-image: none;
}

/* ── Bölüm bandı (nötr) ── */
.abf-band {
    margin-top: 12px;
    padding: 6px 13px;
    border-left: 3px solid var(--renk-marka);
    border-radius: var(--r-kucuk);
    background-color: var(--gri-100);
    font-size: 11.5px;
    font-weight: var(--t-kalin);
}

.abf-band--ust {
    margin-bottom: 0;
    border-radius: var(--r-kucuk) var(--r-kucuk) 0 0;
}

/* ── İki kolonlu bloklar ── */
.abf-cols {
    width: calc(100% + 56px);
    margin: 2px -28px 0;
    border-collapse: separate;
    border-spacing: 28px 0;
    table-layout: fixed;
}

.abf-cols > tbody > tr > td {
    vertical-align: top;
}

.abf-kv {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.abf-kv td {
    padding: 4px 0 3px;
    border-bottom: var(--kenar);
    font-size: 10.5px;
    line-height: 1.25;
}

.abf-kv tr:last-child td {
    border-bottom: 0;
}

.abf-kv .abf-kv__k {
    color: var(--renk-metin-ikincil);
}

.abf-kv .abf-kv__v {
    font-weight: var(--t-kalin);
    text-align: right;
    word-break: break-word;
}

/* ── Ekspertiz + açıklama ── */
.abf-sec {
    margin-top: 12px;
}

.abf-sec__t {
    padding-bottom: 6px;
    font-size: 11.5px;
    font-weight: var(--t-kalin);
}

.abf-eks {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.abf-eks > tbody > tr > td {
    vertical-align: top;
}

.abf-eks__diag {
    width: 44%;
    padding-right: 8px;
}

/* Şema: kasa görseli + yüzdeyle konumlanan bölgeler (konum betikten, data-konum). */
.abf-sema {
    position: relative;
    width: 100%;
}

.abf-sema .abf-sema__kasa {
    display: block;
    width: 100%;
    height: auto;
}

.abf-bolge {
    position: absolute;
}

.abf-bolge span {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -6px;
    line-height: 0;
    text-align: center;
}

.abf-sheet .abf-bolge img {
    display: inline-block;
    width: 12px;
    height: 12px;
}

.abf-parts {
    padding: 6px 8px;
    border: var(--kenar);
    border-radius: var(--r-kucuk);
}

.abf-parts__h {
    padding-bottom: 4px;
    font-size: 10.5px;
    font-weight: var(--t-kalin);
}

.abf-lg {
    padding-bottom: 4px;
    border-bottom: var(--kenar);
    color: var(--renk-metin-ikincil);
    font-size: 8.5px;
    line-height: 1.5;
}

.abf-lg span {
    display: inline-block;
    margin-right: 7px;
    white-space: nowrap;
}

.abf-sheet .abf-lg img {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    vertical-align: -1px;
}

.abf-parts__l {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.abf-parts__l td {
    padding: 2px 0;
    border-bottom: 1px solid var(--gri-100);
    font-size: 9px;
    line-height: 1.2;
}

.abf-parts__l tr:last-child td {
    border-bottom: 0;
}

.abf-parts__l .abf-pv {
    width: 42%;
    font-weight: var(--t-kalin);
    text-align: right;
}

.abf-pr--uyari {
    background-color: var(--renk-uyari-zemin);
}

.abf-pr--uyari .abf-pv {
    color: var(--renk-uyari);
}

.abf-pr--hata {
    background-color: var(--renk-hata-zemin);
}

.abf-pr--hata .abf-pv {
    color: var(--renk-hata);
}

.abf-pr--notr .abf-pv {
    color: var(--renk-metin-ikincil);
}

.abf-tramer {
    width: 100%;
    margin-top: 8px;
    border: var(--kenar);
    border-collapse: separate;
    border-radius: var(--r-kucuk);
    table-layout: fixed;
}

.abf-tramer td {
    padding: 4px 11px;
    font-size: 10px;
}

.abf-tramer .abf-tramer__k {
    width: 46%;
    background-color: var(--gri-100);
    color: var(--renk-metin-ikincil);
}

.abf-tramer .abf-tramer__v {
    font-weight: var(--t-kalin);
    text-align: right;
}

.abf-note {
    padding-top: 5px;
    color: var(--renk-metin-soluk);
    font-size: 8.5px;
    line-height: 1.3;
}

/* Donanım (✓ listesi, üç kolon) */
.abf-don {
    width: 100%;
    margin-bottom: 6px;
    border-collapse: collapse;
    table-layout: fixed;
}

.abf-don td {
    width: 33.33%;
    padding: 0 5px 0 0;
    vertical-align: top;
}

.abf-don li {
    padding: 0 0 3.5px 10px;
    color: var(--renk-metin-ikincil);
    font-size: 8.5px;
    line-height: 1.2;
    text-indent: -10px;
}

.abf-don .abf-tik {
    display: inline-block;
    width: 10px;
    color: var(--gri-600);
    font-weight: var(--t-kalin);
    text-indent: 0;
}

.abf-desc {
    color: var(--renk-metin-ikincil);
    font-size: 9.5px;
    line-height: 1.45;
    white-space: pre-line;
}

.abf-empty {
    color: var(--renk-metin-soluk);
    font-size: 10px;
}

/* ── Fiyat ── */
.abf-fiyat {
    padding: 8px 13px 0;
    border: var(--kenar);
    border-top: 0;
    border-radius: 0 0 var(--r-kucuk) var(--r-kucuk);
}

.abf-fiyat__d {
    color: var(--renk-metin-ikincil);
    font-size: 8.5px;
    line-height: 1.45;
}

.abf-fiyat__r {
    margin-top: 7px;
    padding: 8px 0 9px;
    border-top: var(--kenar);
}

.abf-fiyat__k {
    display: inline-block;
    padding-top: 3px;
    font-size: 12px;
    font-weight: var(--t-kalin);
}

.abf-fiyat__v {
    float: right;
    color: var(--renk-marka);
    font-size: 16px;
    font-weight: var(--t-kalin);
    font-feature-settings: var(--t-sayi);
}

/* ── Sayfa altı ── */
.abf-foot {
    margin-top: 7px;
    padding-top: 5px;
    border-top: var(--kenar);
    color: var(--renk-metin-soluk);
    font-size: 8.5px;
    line-height: 1.3;
}

.abf-foot__note {
    float: left;
    max-width: 68%;
}

.abf-foot__date {
    float: right;
    white-space: nowrap;
}

/* ── Yardımcılar ── */
.abf-clear::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 575.98px) {
    .abf-bar__act {
        float: none;
        display: block;
        padding-top: var(--b-2);
    }

    .abf-btn {
        margin: 0 var(--b-2) 0 0;
    }
}

@media print {
    .abf-bar {
        display: none;
    }

    .abf-page {
        padding: 0;
        background-color: var(--gri-0);
    }

    .abf-sheet {
        margin: 0;
        box-shadow: none;
    }
}