/* ══════════════════════════════════════════════════════════════════════
   Vehicle detail page
   ----------------------------------------------------------------------
   The page used to carry its own palette (a fourth pink), its own radii
   and its own shell width. Everything now derives from the shared tokens
   in oa-ui.css, so the detail page reads as the same product as the home
   page and the listing. The --car-* names are kept as local aliases to
   avoid churning several hundred declarations.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --car-bg: var(--oa-surface-3);
    --car-surface: var(--oa-surface);
    --car-surface-soft: var(--oa-surface-2);
    --car-ink: var(--oa-ink);
    --car-muted: var(--oa-muted);
    --car-line: var(--oa-line);
    --car-line-neutral: var(--oa-line-2);
    --car-primary: var(--oa-brand);
    --car-primary-deep: var(--oa-brand-strong);
    --car-primary-soft: var(--oa-brand-soft);
    --car-radius: var(--oa-r-lg);
    --car-shadow: var(--oa-sh-2);
}

* { box-sizing: border-box; }

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Same page background as the home and listing pages. */
body.car-page { background: var(--car-bg); }

/* Matches the shell used by the header, footer and listing page. */
.car-container { width: min(94%, 1640px); margin: 0 auto; }

.car-content { width: min(94%, 1200px); padding-bottom: 24px; }
.car-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--car-muted); font-size: 12px; }
.car-breadcrumb a { transition: color .18s ease; }
.car-breadcrumb a:hover { color: var(--car-primary); }
.car-breadcrumb span:last-child { color: var(--car-ink); font-weight: 700; }

.back-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--car-primary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.back-link svg { transition: transform .18s ease; }
.back-link svg, .report-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover svg { transform: translateX(-3px); }

/* Dönüş bağlantısı ile filtrelenmiş sonuçlar arasındaki sayfalayıcı aynı
   şeritte durur: ziyaretçi "nereye dönerim" ve "sıradaki hangisi"
   sorularının cevabını tek bakışta görür. */
.car-return-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.car-return-bar .back-link { margin-top: 0; }
.car-pager { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--car-line); border-radius: 999px; background: var(--car-surface); box-shadow: var(--oa-sh-1); }
.car-pager__button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--car-ink); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease; }
.car-pager__button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-pager__button:hover { background: var(--car-primary-soft); color: var(--car-primary); }
.car-pager__button:focus-visible { outline: 2px solid var(--car-primary); outline-offset: 1px; }
.car-pager__button[aria-disabled="true"] { color: var(--car-muted); opacity: .42; pointer-events: none; }
.car-pager__position { padding: 0 8px; color: var(--car-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) {
    .car-pager__button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .car-pager__button { padding: 0 9px; }
}

.car-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 26px; margin-top: 20px; }
.car-details-main { display: grid; gap: 20px; min-width: 0; }
.car-details-aside { position: sticky; top: 92px; display: grid; gap: 16px; }
.car-details-aside.has-consumer-interest-modal { z-index: 1000; }
@media (min-width: 1440px) { .car-details-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } }

/* ── Ana fotoğraf çerçevesi ───────────────────────────────────────────
   Çerçeve, o an gösterilen fotoğrafın en-boy oranını alır: car-details.js
   yüklenen görselden `--stage-ar` değerini yazar, genişlik de yükseklik
   tavanından hesaplanır. Böylece fotoğrafın sağında solunda gri şerit
   kalmaz; araç çerçeveyi baştan başa doldurur ve büyük görünür. Oran
   okunana kadar 4/3 varsayılır. Küçük fotoğraf şeridi de aynı genişlikte
   hizalansın diye çerçeveyle birlikte tek sarmalayıcının içindedir.
   Çerçeve ana sütunda ortalanır; böylece büyük ekranlarda görsel, yanında
   duran ihale bilgi kartına yaslanmış gibi görünmez. */
.vehicle-gallery { --stage-ar: 1.3333; --stage-h: min(66vh, 660px); --stage-mw: 100%; display: grid; gap: 12px; }
.vehicle-gallery__title { padding: 0 2px; }
.vehicle-gallery__title h1 { margin: 0; color: var(--car-ink); font-family: "Hanken Grotesk", sans-serif; font-size: clamp(22px, 2vw, 31px); font-weight: 800; letter-spacing: -.035em; line-height: 1.16; }
.vehicle-gallery__frame { display: grid; gap: 12px; width: min(100%, calc(var(--stage-h) * var(--stage-ar)), max(360px, var(--stage-mw))); min-width: 0; margin-inline: auto; }
.vehicle-gallery__stage { position: relative; width: 100%; aspect-ratio: var(--stage-ar); overflow: hidden; border: 1px solid var(--car-line); border-radius: var(--car-radius); background: #f2f4f7; box-shadow: var(--car-shadow); }
.vehicle-gallery__stage > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; transition: opacity .18s ease; }
.vehicle-gallery__stage > img.is-changing { opacity: .45; }
.vehicle-gallery:fullscreen { --stage-h: min(80vh, 940px); display: grid; place-items: center; align-content: center; padding: 24px; background: #12131a; }
.vehicle-gallery:fullscreen .vehicle-gallery__frame { width: min(100%, calc(var(--stage-h) * var(--stage-ar))); margin-inline: auto; }
.vehicle-gallery:fullscreen .vehicle-gallery__stage { border: 0; border-radius: 14px; }

.vehicle-gallery__empty { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; align-content: center; gap: 14px; color: #8c526d; background: radial-gradient(circle at 72% 23%, #fff 0, transparent 22%), linear-gradient(135deg, #f5e8ee, #edf0f4); font-weight: 700; }
.vehicle-gallery__empty svg { width: min(72%, 440px); fill: #fff; stroke: #d78cad; stroke-width: 4; }
.gallery-badge, .gallery-count { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 800; pointer-events: none; }
.gallery-badge { top: 16px; left: 16px; padding: 7px 10px; background: var(--car-primary); box-shadow: 0 7px 18px var(--oa-brand-glow); }
.gallery-badge > span { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.gallery-count { right: 16px; bottom: 16px; padding: 7px 10px; background: rgba(20, 21, 29, .66); backdrop-filter: blur(8px); }
.gallery-count svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gallery-actions { position: absolute; z-index: 7; top: 14px; right: 14px; display: flex; gap: 7px; }
.gallery-action { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px; color: #23232a; background: rgba(255, 255, 255, .9); font-size: 11px; font-weight: 800; box-shadow: 0 5px 14px rgba(0, 0, 0, .08); transition: transform .16s ease, background .16s ease; }
.gallery-action:hover { transform: translateY(-1px); background: #fff; }
.gallery-action > span { color: var(--car-primary); font-family: "JetBrains Mono", monospace; font-weight: 700; }
.gallery-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gallery-action--icon { width: 34px; padding: 7px; justify-content: center; }
.card-payment-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(21, 113, 73, .24); border-radius: 8px; color: #176b45; background: rgba(245, 255, 249, .96); box-shadow: 0 5px 14px rgba(0, 0, 0, .08); font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card-payment-badge .card-payment-icon { width: 19px; height: 19px; }
@media (max-width: 479px) { .card-payment-badge { width: 34px; padding: 0; justify-content: center; } .card-payment-badge > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

.gallery-thumbnails { display: flex; flex-wrap: nowrap; gap: 10px; max-width: 100%; padding: 1px 1px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--car-primary) #e9ebf0; scrollbar-width: thin; }
.gallery-thumbnail { position: relative; flex: 0 0 clamp(106px, 10vw, 128px); aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 1px solid var(--car-line-neutral); border-radius: 9px; background: #f2f4f7; scroll-snap-align: start; }
.gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gallery-thumbnail::after { position: absolute; inset: 0; border: 2px solid transparent; border-radius: 8px; content: ""; transition: border-color .15s ease; }
.gallery-thumbnail:hover::after, .gallery-thumbnail.is-active::after { border-color: var(--car-primary); }
.gallery-thumbnail__more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(17, 18, 23, .58); font-size: 16px; font-weight: 800; }

.detail-card, .kroki-summary-card, .tramer-card, .auction-start-price-card { border: 1px solid var(--car-line); border-radius: var(--car-radius); background: var(--car-surface); box-shadow: var(--oa-sh-1); }
.detail-card { padding: 22px 24px; }
.detail-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; }
.detail-card__heading--compact { align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--car-line-neutral); }
.section-kicker { margin: 0 0 5px; color: var(--car-primary); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detail-card h1, .detail-card h2 { margin: 0; color: var(--car-ink); font-family: "Hanken Grotesk", sans-serif; letter-spacing: -.032em; }
.detail-card h1 { font-size: 26px; line-height: 1.12; letter-spacing: -.028em; }
.detail-card h2 { font-size: 20px; letter-spacing: -.025em; }
.vehicle-specifications .vehicle-plate { margin: 0 0 8px; }
.stock-number { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 9px; border: 1px solid var(--car-line-neutral); border-radius: 6px; color: var(--oa-ink-2); background: var(--car-surface-soft); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; white-space: nowrap; }
.stock-number--plate { gap: 5px; color: var(--car-primary-deep); border-color: rgba(236, 63, 156, .28); background: #fff1f7; }
.stock-number--plate .material-symbols-outlined { font-size: 15px; }
/* Başlık sağındaki stok rozeti + favori kalbi; kart üzerindeki .ac-fav ile
   aynı dil, ama burada yüzen değil satır içi bir düğme. */
.detail-card__heading-actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.car-fav { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--car-line-neutral); border-radius: 50%; color: var(--oa-ink-2); background: #fff; cursor: pointer; transition: color .18s ease, transform .18s ease, border-color .18s ease; }
.car-fav .material-symbols-outlined { font-size: 20px; }
.car-fav:hover { color: var(--car-primary); border-color: var(--car-primary); transform: scale(1.06); }
.car-fav.is-active { color: var(--car-primary); border-color: var(--car-primary); }
.car-fav.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.car-fav:focus-visible { outline: 2px solid var(--car-primary); outline-offset: 2px; }
.car-fav--gallery { width: 34px; height: 34px; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .9); box-shadow: 0 5px 14px rgba(0, 0, 0, .08); }
.car-fav--gallery:hover, .car-fav--gallery.is-active { background: #fff; }

.specification-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px 15px; }
.specification-item { display: grid; gap: 4px; min-width: 0; }
.specification-item span { color: var(--car-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .065em; }
.specification-item strong { overflow: hidden; color: #2c2f3a; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.report-link { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; border: 0; color: var(--car-primary); background: transparent; font-size: 11px; font-weight: 800; }
.report-link:hover { color: var(--car-primary-deep); }
.inspection-card__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(230px, .95fr); gap: 20px; padding-top: 18px; }
.inspection-list { display: grid; gap: 8px; margin: 0; }
.inspection-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px; background: var(--car-surface-soft); }
.inspection-list dt { color: #666b78; font-size: 11px; }
.inspection-list dd { margin: 0; color: #232630; font-size: 11px; font-weight: 800; text-align: right; }
.damage-assurance { display: grid; place-items: center; align-content: center; padding: 16px; border-radius: 12px; color: #555a66; background: #f2f3f6; text-align: center; }
.damage-assurance svg { width: 36px; height: 36px; margin-bottom: 8px; fill: none; stroke: var(--car-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.damage-assurance strong { color: #2a2d36; font-size: 12px; }
.damage-assurance p { margin: 5px 0 0; max-width: 265px; font-size: 10px; line-height: 1.45; }
.damage-assurance--warning { background: #fff6ec; }
.damage-assurance--warning svg { stroke: #d57611; }
.declaration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.declaration-item { min-width: 0; padding: 14px; border: 1px solid var(--car-line-neutral); border-radius: 10px; background: var(--car-surface-soft); }
.declaration-item h3 { margin: 0 0 7px; color: #363944; font-size: 12px; }
.declaration-item p { margin: 0; color: #626775; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.equipment-card__heading { display: flex; align-items: center; gap: 7px; }
.equipment-card__heading h2 { margin: 0; }
.equipment-card__info { display: inline-grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #57708f; background: #eaf2fb; font-size: 15px; cursor: help; }
.equipment-card__items { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.equipment-card__item { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 9px 12px; border-radius: 8px; color: #5c4550; background: var(--car-surface-soft); font-size: 12px; line-height: 1.2; }
.equipment-card__item--info { padding-right: 9px; cursor: help; }
.equipment-card__item--info:focus-visible { outline: 3px solid rgba(236, 63, 156, .3); outline-offset: 2px; }
.equipment-card__item-info { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #597498; background: #e8f0fb; font-size: 13px; }
.equipment-card__tooltip { position: absolute; z-index: 14; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: min(280px, calc(100vw - 42px)); padding: 9px 11px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; color: #f8fbff; background: #17223b; box-shadow: 0 12px 26px -13px rgba(12, 25, 47, .75); font-size: 12px; font-weight: 500; line-height: 1.45; opacity: 0; pointer-events: none; text-align: left; transform: translate(-50%, 5px) scale(.96); transform-origin: bottom center; transition: opacity .16s ease, transform .16s ease; }
.equipment-card__tooltip::after { position: absolute; bottom: -5px; left: 50%; width: 9px; height: 9px; border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); background: #17223b; content: ""; transform: translateX(-50%) rotate(45deg); }
.equipment-card__item--info:is(:hover, :focus-visible) .equipment-card__tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.detail-card__empty { margin: 14px 0 0; color: var(--car-muted); font-size: 13px; }

@media (max-width: 760px) {
    .vehicle-gallery { --stage-h: min(54vw, 430px); }
    .specification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inspection-card__body, .declaration-grid { grid-template-columns: 1fr; }
    .detail-card__heading-actions { gap: 6px; }
}

.fixed-specification-groups { display: grid; gap: 12px; }
.fixed-specification-group { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--car-line-neutral); }
.fixed-specification-group:last-child { border-bottom: 0; padding-bottom: 0; }
.fixed-specification-group h3 { margin: 0; color: #444854; font-size: 12px; }
.fixed-specification-group h3 span { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 4px; border-radius: 50%; color: var(--car-primary); background: var(--car-primary-soft); font-size: 10px; }
.fixed-specification-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.fixed-specification-group > div > span { padding: 5px 8px; border-radius: 6px; color: #5c4550; background: #f7f0f4; font-size: 11px; }

.kroki-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--car-line); }
.kroki-summary-stats > div { display: grid; gap: 1px; padding: 11px 5px; color: var(--oa-faint); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.kroki-summary-stats > div + div { border-left: 1px solid var(--car-line); }
.kroki-summary-stats span { color: var(--car-ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Krokinin altındaki üç düğme: OPS hasar/fiyat listesi, araç videosu ve detaylı
   ekspertiz raporu. Kaydı olmayan düğme çizilmez; erişimi olmayan üyede
   kilitli görünür (kilit sunucuda, veri HTML'e hiç yazılmaz). */
.kroki-actions { display: grid; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--car-line); }
.kroki-action { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface-card); font-weight: 400; text-align: left; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.kroki-action:hover { border-color: var(--brand-border); background: var(--brand-soft); }
.kroki-action:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.kroki-action__icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #fff; background: var(--brand-primary); font-size: 19px; }
.kroki-action__copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.kroki-action__copy strong { color: var(--text-primary); font-size: 13px; font-weight: 700; line-height: 1.3; }
.kroki-action__copy small { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.kroki-action__arrow { flex: 0 0 auto; color: var(--text-muted); font-size: 18px; transition: color .15s ease, transform .15s ease; }
.kroki-action:hover .kroki-action__arrow { color: var(--brand-primary); transform: translateX(2px); }
.kroki-action--locked { border-style: dashed; background: var(--surface-subtle); }
.kroki-action--locked .kroki-action__icon { color: #6d7787; background: #e7eaf0; }
.kroki-action--locked .kroki-action__copy strong { color: var(--text-secondary); }
.kroki-action--locked .kroki-action__copy small { color: #8a94a5; font-weight: 700; }
.kroki-action--locked:hover { border-color: #c9d1dd; background: #eef1f6; }
.kroki-action--locked:hover .kroki-action__arrow { color: var(--text-secondary); transform: none; }

/* Kroki/ekspertiz kartının altındaki başlangıç fiyatı: teklif çağrısından
   ayrılır, fakat ana fiyat hiyerarşisini gölgelemeyen kısa bir özet kalır. */
.auction-start-price-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.auction-start-price-card[hidden] { display: none; }
.auction-start-price-card__icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 9px; color: var(--car-primary); background: var(--car-primary-soft); font-size: 19px; }
.auction-start-price-card__copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; flex: 1; }
.auction-start-price-card__copy > span { color: var(--car-muted); font-size: 12px; font-weight: 700; }
.auction-start-price-card__copy strong { color: var(--car-ink); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tramer satırları hasar ayrıntısı ve tramer penceresinde aynı sırayı
   korur. */
.kroki-tramer-info { display: grid; gap: 0; padding: 13px 16px 14px; border-top: 1px solid var(--car-line); }
.kroki-tramer-info > strong { margin-bottom: 7px; color: var(--car-ink); font-size: 12px; font-weight: 800; }
.kroki-tramer-info > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.kroki-tramer-info span { color: var(--car-muted); font-size: 11px; }
.kroki-tramer-info b { color: var(--car-ink); font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.tramer-card { padding: 19px 20px; border-color: var(--car-line-neutral); }
.tramer-card > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--car-line-neutral); }.tramer-card > .section-kicker + div { margin-top: 8px; }.tramer-card span { color: var(--car-muted); font-size: 12px; }.tramer-card strong { color: var(--car-ink); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

.vehicle-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s ease; }.vehicle-modal.is-open { visibility: visible; opacity: 1; }.vehicle-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 16, 23, .62); backdrop-filter: blur(5px); }.vehicle-modal__panel { position: relative; z-index: 1; width: min(100%, 960px); max-height: min(850px, calc(100vh - 44px)); overflow: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.34); transform: translateY(12px) scale(.985); transition: transform .2s ease; }.vehicle-modal.is-open .vehicle-modal__panel { transform: translateY(0) scale(1); }.vehicle-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid var(--car-line-neutral); }.vehicle-modal__header h2 { margin: 0; font-family: "Hanken Grotesk", sans-serif; font-size: 23px; letter-spacing: -.035em; }.modal-header-actions { display: flex; align-items: center; gap: 10px; }.modal-close { display: grid; width: 35px; height: 35px; place-items: center; padding: 0; border: 1px solid #e4e5eb; border-radius: 9px; color: #5c5f6a; background: #fff; }.modal-close:hover { color: var(--car-primary); border-color: var(--car-line); }.modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.kroki-modal__content { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(270px, .82fr); min-height: 510px; }.kroki-visual { padding: 22px; background: linear-gradient(145deg, #fbfbfd, #f5f6f9); }.kroki-legend { display: flex; flex-wrap: wrap; gap: 7px; }.kroki-legend span { padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; }.kroki-legend .original { color: #257d3a; background: #e8f7eb; }.kroki-legend .painted { color: #277f3d; background: #e8f7eb; }.kroki-legend .local-painted { color: #675700; background: #fff9ce; }.kroki-legend .changed { color: #1165a2; background: #e3f4ff; }.kroki-legend .chassis { color: #b22323; background: #ffe8e8; }
#vehicleDamageSketch { display: block; width: 100%; max-width: 520px; height: 430px; margin: 16px auto 0; }.car-base { fill: #e6e8ec; stroke: #c2c7d0; stroke-width: 1; }.car-side { fill: #eef0f3; stroke: #c2c7d0; stroke-width: 1; }.car-detail { fill: #dce0e5; stroke: #c2c7d0; stroke-width: .5; }.car-part { fill: #fff; stroke: #abb3bf; stroke-width: 1; }.car-part.is-damaged { stroke: #2b2e37; stroke-width: 1.8; }.damage-indicator circle { stroke: #fff; stroke-width: 1.5; }.damage-indicator text { font-family: Inter, sans-serif; font-size: 14px; font-weight: 800; }
.kroki-details { display: flex; flex-direction: column; min-height: 0; padding: 23px; border-left: 1px solid var(--car-line-neutral); }.kroki-details__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--car-line-neutral); }.kroki-details__heading span { font-family: "Hanken Grotesk", sans-serif; font-size: 17px; font-weight: 800; }.kroki-details__heading strong { color: var(--car-primary); font-size: 11px; }.kroki-damage-list { display: grid; gap: 8px; margin-top: 14px; overflow: auto; }.kroki-damage-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--car-line-neutral); border-radius: 9px; }.kroki-damage-row__badge { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; }.kroki-damage-row__copy { display: grid; gap: 1px; }.kroki-damage-row__copy strong { color: #31343e; font-size: 11px; }.kroki-damage-row__copy span { color: #7a7d87; font-size: 10px; }.kroki-damage-row.original .kroki-damage-row__badge, .kroki-damage-row.painted .kroki-damage-row__badge { background: #42a657; }.kroki-damage-row.local-painted .kroki-damage-row__badge { color: #201d00; background: #f4da24; }.kroki-damage-row.changed .kroki-damage-row__badge { background: #3099dc; }.kroki-damage-row.chassis .kroki-damage-row__badge { background: #e65050; }.kroki-empty { padding: 24px 8px; color: #6d717c; font-size: 12px; text-align: center; }

.viewer360-modal__panel { width: min(100%, 1080px); }.viewer360-modal__body { padding: 20px; background: #15161d; }.viewer360 { position: relative; display: grid; min-height: min(64vh, 620px); place-items: center; overflow: hidden; border-radius: 11px; background: radial-gradient(circle at center, #353744, #191a22 70%); cursor: grab; touch-action: none; user-select: none; }.viewer360.is-dragging { cursor: grabbing; }.viewer360 img { display: block; width: 100%; height: min(64vh, 620px); object-fit: contain; pointer-events: none; }.viewer360__loader, .viewer360__error { position: absolute; z-index: 1; left: 50%; top: 50%; padding: 10px 14px; border-radius: 8px; color: #fff; background: rgba(16,16,22,.72); font-size: 12px; font-weight: 700; transform: translate(-50%, -50%); }.viewer360__loader { display: inline-flex; align-items: center; gap: 8px; }.viewer360__loader span { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; }.viewer360__error { color: #ffe4f0; text-align: center; }.viewer360-modal__hint { margin: 12px 0 0; color: #c5c7d0; font-size: 12px; text-align: center; }@@keyframes spin { to { transform: rotate(360deg); } }

body.modal-is-open { overflow: hidden; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--oa-brand-glow); outline-offset: 3px; }

@media (max-width: 1180px) { .car-details-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }.specification-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .car-details-grid { grid-template-columns: 1fr; }.car-details-aside { position: static; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); }.kroki-summary-card { grid-row: span 2; }.vehicle-gallery { --stage-h: min(58vw, 500px); }.kroki-modal__content { grid-template-columns: 1fr; }.kroki-details { border-top: 1px solid var(--car-line-neutral); border-left: 0; }.kroki-damage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .car-container { width: 100%; padding: 0 16px; }.car-details-grid { margin-top: 15px; gap: 17px; }.vehicle-gallery { --stage-h: 96vw; }.gallery-actions { top: 10px; right: 10px; }.gallery-badge { top: 11px; left: 11px; }.gallery-count { right: 10px; bottom: 10px; }.gallery-thumbnails { gap: 6px; }.gallery-thumbnail { width: calc((100% - 12px) / 3); }.detail-card { padding: 18px; }.detail-card__heading { gap: 12px; }.detail-card h1 { font-size: 21px; }.detail-card h2 { font-size: 18px; }.specification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 14px; }.inspection-card__body { grid-template-columns: 1fr; }.damage-assurance { min-height: 120px; }.fixed-specification-group { grid-template-columns: 1fr; gap: 8px; }.car-details-aside { grid-template-columns: 1fr; }.kroki-summary-card { grid-row: auto; }.tramer-card { order: 2; }.report-link { font-size: 11px; }.kroki-damage-list { grid-template-columns: 1fr; }.vehicle-modal { padding: 12px; }.vehicle-modal__header { padding: 16px; }.vehicle-modal__header h2 { font-size: 20px; }.kroki-visual, .kroki-details { padding: 16px; }#vehicleDamageSketch { height: 360px; }.auction-start-price-card { padding: 13px 14px; }.auction-start-price-card__copy strong { font-size: 15px; }.viewer360-modal__body { padding: 12px; }.viewer360, .viewer360 img { min-height: 46vh; height: 46vh; } }
@media (max-width: 420px) { .gallery-action:not(.gallery-action--icon) { padding: 7px; font-size: 0; }.gallery-action:not(.gallery-action--icon) > span { font-size: 11px; }.gallery-actions { gap: 5px; }.detail-card__heading--compact { align-items: flex-start; flex-direction: column; }.report-link { margin-top: -6px; }.gallery-count { font-size: 10px; } }

/* Full gallery: mouse wheel zoom and drag-to-pan are handled in car-details.js. */
.gallery-modal__panel { display: flex; width: min(100%, 1180px); height: min(92vh, 850px); max-height: calc(100vh - 44px); flex-direction: column; overflow: hidden; background: #15161d; }
.gallery-modal__header { border-color: rgba(255,255,255,.13); color: #fff; }
.gallery-modal__header .section-kicker { color: #f0a1c6; }
.gallery-modal__header .modal-close { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.08); }
.gallery-modal__counter { padding: 7px 9px; border-radius: 7px; color: #e6e7ed; background: rgba(255,255,255,.09); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; white-space: nowrap; }
.gallery-modal__body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 16px; }
.gallery-modal__toolbar { display: flex; justify-content: center; gap: 7px; margin-bottom: 11px; }
.gallery-modal__toolbar button { min-width: 35px; height: 32px; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; color: #fff; background: rgba(255,255,255,.08); font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; }
.gallery-modal__toolbar button:hover { border-color: #ee93bb; background: var(--oa-brand-glow); }
.gallery-modal__canvas { position: relative; display: grid; min-height: 0; flex: 1; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: radial-gradient(circle at 50% 45%, #353744, #111218 72%); outline: none; touch-action: none; }
.gallery-modal__canvas.is-zoomed { cursor: grab; }
.gallery-modal__canvas.is-zoomed:active { cursor: grabbing; }
/* Görsel pencereyi baştan başa kaplar, fotoğraf bu kutuya contain ile
   sığar: çözünürlük ve ekran boyu ne olursa olsun araç kırpılmaz. Önceki
   max-height: 100% ızgaranın auto satırına göre hesaplanıyordu; satır
   fotoğrafın kendi yüksekliğine uzadığından sınır işlemiyor, büyük
   fotoğrafta ve kısa ekranda aracın alt yarısı pencerenin dışında
   kalıyordu. Yakınlaştırma bu kutuya transform uygular (car-details.js,
   online-auction-gallery.js). */
.gallery-modal__canvas img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; transition: transform .13s ease; user-select: none; }
.gallery-modal__nav { position: absolute; top: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; background: rgba(15,16,21,.62); transform: translateY(-50%); }
.gallery-modal__nav:hover { border-color: #ef9cc2; background: var(--car-primary); }
.gallery-modal__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gallery-modal__nav--previous { left: 15px; }.gallery-modal__nav--next { right: 15px; }
.gallery-modal__hint { margin: 10px 0; color: #babcc7; font-size: 11px; text-align: center; }
.gallery-modal__thumbnails { display: flex; min-height: 58px; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 4px; scrollbar-color: #ba5b86 #25262e; }
.gallery-modal__thumbnails button { width: 72px; height: 52px; flex: 0 0 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 7px; background: #30313a; opacity: .66; }
.gallery-modal__thumbnails button:hover, .gallery-modal__thumbnails button.is-active { border-color: #ef8fbc; opacity: 1; }
.gallery-modal__thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .gallery-modal__panel { height: min(94vh, 850px); }.gallery-modal__body { padding: 10px; }.gallery-modal__canvas { height: auto; }.gallery-modal__nav { width: 36px; height: 36px; }.gallery-modal__nav--previous { left: 8px; }.gallery-modal__nav--next { right: 8px; }.gallery-modal__hint { padding: 0 10px; line-height: 1.45; }.gallery-modal__thumbnails button { width: 62px; height: 46px; flex-basis: 62px; } }
/* Kısa ekranda (küçük dizüstü, telefon) dikey alan fotoğrafa kalır: fare
   tekerleği ipucu gizlenir, başlık en çok iki satır olur; yakınlaştırma
   düğmeleri yerinde durur. */
@media (max-height: 760px) {
    .gallery-modal__header > div:first-child { min-width: 0; }
    .gallery-modal__header h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .gallery-modal__hint { display: none; }
    .gallery-modal__thumbnails { margin-top: 10px; }
}
/* Yatay telefonda pencere ekranı doldurur, başlık tek satıra iner ve
   küçük resim şeridi kalkar; gezinme okları ve sayaç kalır. */
@media (max-height: 480px) {
    .vehicle-modal:has(> .gallery-modal__panel) { padding: 8px; }
    .vehicle-modal .gallery-modal__panel { height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; border-radius: 12px; }
    .gallery-modal__header { gap: 12px; padding: 8px 12px; }
    .gallery-modal__header .section-kicker { display: none; }
    .gallery-modal__header h2 { font-size: 16px; line-height: 1.3; -webkit-line-clamp: 1; }
    .gallery-modal__body { padding: 8px; }
    .gallery-modal__toolbar { margin-bottom: 8px; }
    .gallery-modal__toolbar button { height: 30px; }
    .gallery-modal__thumbnails { display: none; }
}

.vehicle-gallery__magnifier { position: absolute; z-index: 5; width: 154px; height: 154px; border: 3px solid rgba(255,255,255,.96); border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 10px 26px rgba(16,16,23,.36), 0 0 0 1px rgba(32,28,34,.32); background-color: #eee; background-repeat: no-repeat; transform: translate(-50%, -50%) scale(.88); transition: opacity .13s ease, transform .13s ease; }
.vehicle-gallery__magnifier.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 700px), (hover: none) { .vehicle-gallery__magnifier { display: none; } }

/* ── Auction information card ──────────────────────────────────────
   The primary CTA block of the page. Sticky on desktop via the aside. */
.auction-info-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.auction-info-card[hidden] { display: none; }
.auction-info-card__head { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.auction-info-card__eyebrow {
    display: block; margin-bottom: var(--space-2);
    color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.auction-info-card__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.auction-info-card__lot {
    display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-2);
    border-radius: var(--radius-sm); background: var(--navy); color: #fff;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em;
}
.auction-info-card__lot[hidden], .auction-info-card__status[hidden] { display: none; }
.auction-info-card__status {
    display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2);
    border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700;
}
.auction-info-card__status[data-state="live"] { background: var(--brand-primary); color: #fff; }
.auction-info-card__status[data-state="upcoming"] { background: var(--warning-bg); color: var(--warning); }
.auction-info-card__status[data-state="ended"] { background: var(--surface-sunken); color: var(--text-secondary); }
.auction-info-card__name {
    margin: var(--space-2) 0 0;
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3; letter-spacing: -.015em;
}
.auction-info-card__name:empty { display: none; }
.auction-info-card__rows { display: grid; margin: 0; padding: var(--space-2) var(--space-4); }
.auction-info-card__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.auction-info-card__rows > div + div { border-top: 1px solid var(--border-subtle); }
.auction-info-card__rows > div[hidden] { display: none; }
.auction-info-card__rows dt { color: var(--text-secondary); font-size: var(--fs-sm); }
.auction-info-card__rows dd { margin: 0; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.auction-info-card__timer { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; }
.auction-info-card__price { color: var(--brand-primary); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--fs-body); }
/* Başlangıç fiyatı bilgi satırıdır, çağrı değil: pembe güncel teklife
   bırakılır, tutar nötr renkte durur. */
.auction-info-card__price--start { color: var(--text-primary); }
.auction-info-card__action { padding: var(--space-3) var(--space-4) var(--space-4); }
.auction-info-card__action:empty { display: none; }
.auction-info-card__action .oa-btn { width: 100%; }

/* ── Inline damage sketch in the aside ─────────────────────────────── */
.kroki-summary-card { overflow: hidden; }
.kroki-summary-card--interactive { cursor: pointer; }
/* Kart overflow:hidden olduğu için odak halkası içe çizilir. */
.kroki-summary-card--interactive:focus-visible { outline: 3px solid var(--car-primary); outline-offset: -3px; }
/* Açıklamalar ve "Büyüt" düğmesi aynı üst sırada durur. */
.kroki-summary-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.kroki-summary-card__head .kroki-legend { min-width: 0; }
.kroki-summary-card__title { display: block; margin-top: 5px; color: #22242e; font-family: "Hanken Grotesk", sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.kroki-expand { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--car-line); border-radius: 9px; color: #7d7885; background: #fff; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.kroki-expand:hover { color: var(--car-primary); border-color: #eda6c8; background: #fff5f9; }
.kroki-expand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kroki-legend--inline { padding: 0; gap: 5px; }
.kroki-legend--inline span { padding: 3px 6px; font-size: 10px; }
/* Hasar penceresindeki kroki kartında başlık şeridi yok; açıklamalar kartın
   ilk satırı olduğu için üst boşluğu kendi taşır. */
.kroki-legend--top { padding-top: 16px; }
.kroki-summary-card__canvas { position: relative; padding: 4px 12px 14px; background: linear-gradient(160deg, #fbfbfd, #f5f6f9); border-top: 1px solid var(--car-line); }
.kroki-summary-card__canvas .damage-sketch-svg { display: block; width: 100%; height: 300px; }
/* Ağır hasarlı araçta kroki üzerinden çapraz geçen uyarı. Etkileşimleri
   kapatmaz; krokideki büyütme/tıklama davranışı korunur. */
.kroki-heavy-damage-banner { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; }
.kroki-heavy-damage-banner span { display: block; padding: 0; border: 0; color: #d12635; background: transparent; box-shadow: none; font-family: Inter, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: .1em; line-height: 1.15; text-align: center; text-transform: uppercase; transform: rotate(-32deg); }
.kroki-summary-card__canvas--with-plates { padding-bottom: 52px; }
.kroki-plate { position: absolute; z-index: 2; left: 50%; display: inline-flex; align-items: stretch; height: 32px; padding: 0; overflow: visible; border: 2px solid #17223b; border-radius: 7px; color: #0b1220; background: linear-gradient(180deg, #fff 0%, #edf0f5 100%); box-shadow: 0 7px 15px -8px rgba(10, 21, 42, .9); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; font-weight: 800; letter-spacing: .09em; line-height: 1; cursor: copy; transform: translateX(-50%); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; user-select: text; -webkit-user-select: text; white-space: nowrap; }
.kroki-plate:hover { border-color: var(--car-primary); box-shadow: 0 9px 18px -8px rgba(217, 43, 133, .7); transform: translateX(-50%) translateY(-1px); }
.kroki-plate:focus-visible { outline: 3px solid rgba(236, 63, 156, .35); outline-offset: 3px; }
.kroki-plate.is-copied { border-color: #1f8b52; background: #effaf3; }
.kroki-plate.is-copy-failed { border-color: #b74949; background: #fff5f5; }
.kroki-plate--rear { bottom: 14px; }
.kroki-plate__country { display: grid; width: 22px; place-items: end center; padding-bottom: 5px; border-radius: 4px 0 0 4px; color: #fff; background: linear-gradient(180deg, #2961cf, #123d98); font-family: Inter, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.kroki-plate__number { display: grid; place-items: center; padding: 0 11px; cursor: text; user-select: text; -webkit-user-select: text; }
.kroki-plate__position { position: absolute; left: 50%; color: #7b8493; font-family: Inter, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }
.kroki-plate--rear .kroki-plate__position { bottom: -13px; }
.kroki-plate__feedback { position: absolute; bottom: calc(100% + 9px); left: 50%; padding: 6px 9px; border-radius: 999px; color: #fff; background: #1f8b52; box-shadow: 0 9px 18px -11px rgba(17, 76, 45, .92); font-family: Inter, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0; line-height: 1; opacity: 0; pointer-events: none; transform: translate(-50%, 7px) scale(.88); transform-origin: bottom center; white-space: nowrap; }
.kroki-plate.is-copy-failed .kroki-plate__feedback { background: #b74949; }
.kroki-plate.has-copy-feedback .kroki-plate__feedback { animation: kroki-plate-feedback 1.8s ease both; }
@keyframes kroki-plate-feedback { 0% { opacity: 0; transform: translate(-50%, 7px) scale(.88); } 14%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -5px) scale(.96); } }
.kroki-summary-card__prompt { display: grid; gap: 13px; padding: 18px; }
.kroki-summary-card__prompt p { margin: 0; color: var(--car-muted); font-size: 13px; line-height: 1.6; }
.kroki-summary-card__login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 9px; color: #fff; background: var(--car-primary); font-size: 13px; font-weight: 800; }
.kroki-summary-card__login .material-symbols-outlined { font-size: 18px; }
.kroki-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--car-line); }

/* ── Main stage navigation ─────────────────────────────────────────── */
.vehicle-gallery__stage > img { cursor: zoom-in; }
.stage-nav { position: absolute; top: 50%; z-index: 4; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #23232a; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); box-shadow: 0 5px 16px rgba(0,0,0,.12); opacity: 0; transform: translateY(-50%); transition: opacity .22s ease, background .2s ease, color .2s ease; }
.vehicle-gallery__stage:hover .stage-nav, .stage-nav:focus-visible { opacity: 1; }
.stage-nav:hover { color: #fff; background: var(--car-primary); border-color: transparent; }
.stage-nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage-nav--previous { left: 14px; }
.stage-nav--next { right: 14px; }
@media (max-width: 700px), (hover: none) { .stage-nav { opacity: 1; width: 34px; height: 34px; } .stage-nav--previous { left: 8px; } .stage-nav--next { right: 8px; } }

/* ── Damage sketch shared visuals ──────────────────────────────────── */
.damage-sketch-svg .damage-indicator text { font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; }
.damage-sketch-svg .car-part { transition: fill .2s ease; }

/* ── Künye şeridi: plaka rozeti ve lokasyon ────────────────────────────
   Plaka daha önce başlık kartının sağındaki küçük etiketteydi ve gözden
   kaçıyordu. Artık başlığın hemen altında, gerçek tescil plakası gibi
   okunuyor; yanında aracın bulunduğu şehir ve iki temel künye bilgisi var. */
.vehicle-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.vehicle-plate { display: inline-flex; align-items: stretch; height: 36px; overflow: hidden; border: 2px solid #101828; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(13, 21, 38, .14); }
.vehicle-plate__country { display: grid; width: 23px; place-items: center; background: #0b3fa8; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.vehicle-plate__number { display: grid; place-items: center; padding: 0 11px; color: #101828; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.vehicle-plate--sm { height: 28px; border-width: 1.5px; }
.vehicle-plate--sm .vehicle-plate__country { width: 18px; font-size: 8px; }
.vehicle-plate--sm .vehicle-plate__number { padding: 0 8px; font-size: 13px; letter-spacing: .07em; }
.vehicle-meta__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--car-line-neutral); border-radius: 999px; color: var(--car-muted); background: var(--car-surface); font-size: 12px; font-weight: 600; white-space: nowrap; }
.vehicle-meta__chip strong { color: var(--car-ink); font-weight: 800; }
.vehicle-meta__chip .material-symbols-outlined { color: var(--car-primary); font-size: 17px; }
@media (max-width: 700px) {
    .vehicle-meta { gap: 7px; margin-top: 9px; }
    .vehicle-plate { height: 32px; }
    .vehicle-plate__number { font-size: 15px; }
    .vehicle-meta__chip { height: 28px; padding: 0 10px; font-size: 11px; }
}

/* ── Paylaşım penceresi ───────────────────────────────────────────────
   Galerideki "Paylaş" düğmesi buraya açılır: üstte aracın küçük künyesi,
   altında iki sekme — hazır metinli bağlantı paylaşımı ve kurumsal PDF. */
/* `.gallery-action > span` 360° etiketi için JetBrains Mono uyguluyor; ikon
   spanı ligatürünü kaybetmesin diye kendi yazı tipini geri alır. */
.gallery-action > span.material-symbols-outlined { color: var(--car-primary); font-family: "Material Symbols Outlined"; font-size: 18px; font-weight: normal; }
.share-modal__panel { width: min(100%, 620px); }
.share-modal__body { display: grid; gap: 16px; padding: 20px 22px 22px; }
.share-preview { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--car-line-neutral); border-radius: 12px; background: var(--car-surface-soft); }
.share-preview img { width: 104px; height: 72px; flex: 0 0 104px; border-radius: 9px; object-fit: cover; background: #e7e9ee; }
.share-preview__copy { display: grid; gap: 8px; min-width: 0; }
.share-preview__copy strong { color: var(--car-ink); font-family: "Hanken Grotesk", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.share-preview__facts { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.share-preview__chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--car-line-neutral); border-radius: 999px; color: var(--car-muted); background: #fff; font-size: 11px; font-weight: 700; }
.share-preview__chip .material-symbols-outlined { color: var(--car-primary); font-size: 15px; }

.share-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 12px; background: var(--car-surface-soft); }
.share-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; color: var(--car-muted); background: transparent; font-size: 12px; font-weight: 700; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.share-tab .material-symbols-outlined { font-size: 18px; }
.share-tab:hover { color: var(--car-primary); }
.share-tab.is-active { color: var(--car-primary-deep); border-color: var(--car-line); background: #fff; box-shadow: var(--oa-sh-1); }

.share-panel { display: none; gap: 14px; }
.share-panel.is-active { display: grid; }
.share-panel__lead { margin: 0; color: var(--car-muted); font-size: 12px; line-height: 1.55; }
.share-message { max-height: 148px; padding: 13px 14px; overflow: auto; border: 1px dashed var(--car-line); border-radius: 11px; color: #3a3f4d; background: #fdf7fa; font-size: 12px; line-height: 1.65; white-space: pre-line; }
.share-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 9px; }
.share-target { display: grid; gap: 8px; justify-items: center; padding: 13px 8px; border: 1px solid var(--car-line-neutral); border-radius: 12px; color: #3a3f4d; background: #fff; font-size: 11px; font-weight: 700; text-align: center; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.share-target:hover { border-color: var(--car-line); box-shadow: var(--oa-sh-2); transform: translateY(-2px); }
.share-target[disabled] { opacity: .55; pointer-events: none; }
/* `display: grid` UA stilindeki [hidden] kuralını ezdiği için gizleme burada tekrar yazılır. */
.share-target[hidden] { display: none; }
.share-target__mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; }
.share-target__mark .material-symbols-outlined { font-size: 20px; }
.share-target__mark[data-brand="whatsapp"] { background: #25d366; }
.share-target__mark[data-brand="email"] { background: var(--navy); }
.share-target__mark[data-brand="sms"] { background: #6b7488; }
.share-target__mark[data-brand="telegram"] { background: #229ed9; }
.share-target__mark[data-brand="device"] { background: var(--car-primary); }
.share-target__mark[data-brand="pdf"] { background: #c8362b; }
.share-target__mark[data-brand="preview"] { background: #3f4a60; }

.share-copy { display: flex; gap: 8px; }
.share-copy input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; border: 1px solid var(--car-line-neutral); border-radius: 10px; color: var(--car-muted); background: var(--car-surface-soft); font-size: 12px; }
.share-copy__button { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; background: var(--car-primary); font-size: 12px; font-weight: 800; white-space: nowrap; transition: background .16s ease; }
.share-copy__button:hover { background: var(--car-primary-deep); }
.share-copy__button.is-done { background: #15803d; }
.share-copy__button .material-symbols-outlined { font-size: 18px; }

.share-pdf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.share-pdf-facts li { display: flex; align-items: center; gap: 8px; color: #4a5061; font-size: 12px; font-weight: 600; }
.share-pdf-facts .material-symbols-outlined { color: var(--car-primary); font-size: 18px; }
.share-hint { margin: 0; color: var(--car-muted); font-size: 11px; line-height: 1.6; }
.share-hint.is-busy { color: var(--car-primary-deep); font-weight: 700; }
.share-hint.is-error { color: #b3261e; font-weight: 700; }
@media (max-width: 560px) {
    .share-modal__body { padding: 16px; }
    .share-preview { flex-direction: column; align-items: flex-start; }
    .share-preview img { width: 100%; height: 132px; flex: none; }
    .share-pdf-facts { grid-template-columns: 1fr; }
    .share-copy { flex-wrap: wrap; }
    .share-copy input { flex-basis: 100%; }
    .share-copy__button { width: 100%; justify-content: center; }
}

/* Keep the gallery, vehicle facts and auction panel on one shared grid. */
.car-details-grid { grid-template-columns: minmax(0, var(--media-width, 800px)) 360px; justify-content: center; gap: 24px; }
.vehicle-gallery__frame { width: 100%; margin-inline: 0; }
.car-details-aside { min-width: 0; }
.car-content > .vehicle-gallery__title { margin-top: 24px; max-width: 1200px; }
.inspection-card__body { grid-template-columns: 1fr; padding-top: 0; }
.declarations-card h2 { margin: 0; }
.declaration-grid { grid-template-columns: 1fr; gap: 20px; }
.declaration-item { padding: 0; background: transparent; border: 0; }
.declaration-item p { font-size: 14px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.declaration-item--expertise p { color: #d93460; }
.fixed-specification-group { grid-template-columns: 1fr; gap: 12px; }
.fixed-specification-group h3 { font-size: 16px; color: var(--car-ink); }
.fixed-specification-group > div > span { padding: 9px 12px; font-size: 12px; background: var(--car-surface-soft); }
.vehicle-detail-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vehicle-detail-actions :is(button, a) { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 20px; border: 0; border-radius: 12px; color: #fff; background: var(--car-primary); font: inherit; font-weight: 700; cursor: pointer; }
.vehicle-detail-actions :is(button, a):hover { filter: brightness(.94); }
.vehicle-detail-actions :is(button, a):focus-visible { outline: 3px solid var(--car-ink); outline-offset: 3px; }
.damage-history-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; padding: 24px; }
.damage-history-details { display: grid; align-content: start; gap: 16px; min-width: 0; }
.damage-history-note { margin: 0; color: var(--car-muted); font-size: 13px; line-height: 1.7; }
.vehicle-video-panel { background: #111827; color: #fff; }
.vehicle-video-panel .vehicle-modal__header { border-color: #ffffff20; }
.vehicle-video-panel video { display: block; width: 100%; max-height: 70dvh; aspect-ratio: 16 / 9; background: #060a12; object-fit: contain; }
.vehicle-video-error { padding: 0 22px 16px; }
.vehicle-video-error a { color: #ff9ece; }

/* Hasar ve Fiyat Listesi, ekspertiz raporu ve kilit gerekçesi pencereleri. */
.vehicle-modal__panel--narrow { width: min(100%, 520px); }
.vehicle-modal__panel--wide { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, 1100px); height: min(900px, calc(100vh - 44px)); overflow: hidden; }
.damage-price-detail { display: grid; gap: 16px; padding: 20px 22px 22px; }
.damage-price-list { overflow: hidden; border: 1px solid var(--car-line); border-radius: var(--radius-md); }
.damage-price-list__item, .damage-price-list__total { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; }
.damage-price-list__item + .damage-price-list__item, .damage-price-list__total { border-top: 1px solid var(--car-line); }
.damage-price-list__meta { display: grid; gap: 4px; min-width: 0; }
.damage-price-list__meta strong { color: var(--text-secondary); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.damage-price-list__meta time { color: var(--car-muted); font-size: 12px; }
.damage-price-list__item > b, .damage-price-list__total strong { flex: 0 0 auto; color: #17765f; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.damage-price-list__total { background: var(--surface-subtle); }
.damage-price-list__total span { color: var(--car-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.damage-price-list__total strong { color: var(--brand-primary-active); }
.damage-price-list__total--count strong { color: var(--text-primary); }
.damage-price-list__empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 14px; color: #17765f; font-size: 15px; font-weight: 800; }
.damage-price-list__empty .material-symbols-outlined { font-size: 22px; }
/* Stok kartı özeti "Hasar yok" satırı olmadan başlarsa ilk toplam satırı
   kutunun kenarlığıyla çift çizgi oluşturmasın. */
.damage-price-list > .damage-price-list__total:first-child { border-top: 0; }
.damage-price-list__total strong.is-unspecified { color: var(--car-muted); font-size: 13px; font-weight: 700; }
/* Tramer okunmamış, stok kartında da hasar değeri girilmemiş araç. */
.damage-record-notice { display: grid; justify-items: center; gap: 12px; padding: 28px 24px 30px; text-align: center; }
.damage-record-notice__icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #6d7787; background: #eef1f6; font-size: 26px; }
.damage-record-notice__title { margin: 0; color: var(--car-ink); font-size: 16px; font-weight: 800; line-height: 1.5; }
.pdf-frame { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--car-line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.pdf-frame__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--car-line); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.pdf-frame__bar a { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-primary); font-size: 12px; font-weight: 700; }
.pdf-frame__bar a .material-symbols-outlined { font-size: 16px; }
.pdf-frame iframe { display: block; width: 100%; height: 46vh; border: 0; background: #f3f4f7; }
/* Çubuksuz tam pencere: tek satır; aksi halde iframe "auto" satıra düşüp 150px kalıyordu. */
.pdf-frame--full { grid-template-rows: minmax(0, 1fr); border: 0; border-radius: 0; }
.pdf-frame.pdf-frame--full iframe { height: 100%; min-height: 0; }
.feature-lock { display: grid; justify-items: center; gap: 10px; padding: 26px 24px 28px; text-align: center; }
.feature-lock__icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #6d7787; background: #eef1f6; font-size: 26px; }
.feature-lock__feature { margin: 4px 0 0; color: var(--car-ink); font-size: 16px; font-weight: 800; }
.feature-lock__lead { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.feature-lock__note { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.feature-lock__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; min-height: 44px; padding: 0 20px; border-radius: 10px; color: #fff; background: var(--car-primary); font-size: 14px; font-weight: 800; }
.feature-lock__cta:hover { filter: brightness(.94); }
.feature-lock__cta .material-symbols-outlined { font-size: 19px; }
@media (max-width: 1180px) and (min-width: 961px) { .car-details-grid { grid-template-columns: minmax(0, var(--media-width, 800px)) 320px; gap: 20px; } }
@media (max-width: 960px) {
    .car-details-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .car-details-main { display: contents; }
    .vehicle-gallery { order: -2; }
    .car-details-aside { order: -1; position: static; grid-template-columns: 1fr; }
    .car-details-grid > *, .car-details-main > * { min-width: 0; }
    .vehicle-gallery__frame { width: 100%; }
    .car-details-main > .detail-card, .vehicle-detail-actions, .car-details-aside { width: 100%; }
}
@media (max-width: 700px) {
    .car-content > .vehicle-gallery__title { margin-top: 18px; }
    .vehicle-gallery__title h1 { font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
    .vehicle-gallery__frame { width: 100%; }
    .damage-history-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
    .vehicle-modal__panel { max-height: calc(100dvh - 24px); }
    .vehicle-modal__panel--wide { height: calc(100dvh - 24px); }
    .damage-price-detail { padding: 16px; }
    .pdf-frame iframe { height: 52vh; }
    .feature-lock { padding: 22px 18px 24px; }
    .damage-record-notice { padding: 22px 18px 24px; }
    .vehicle-detail-actions { grid-template-columns: 1fr; }
    .inspection-list > div { gap: 12px; }
    .inspection-list dd { overflow-wrap: anywhere; }
    .modal-close { flex-shrink: 0; min-width: 44px; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════
   İkinci el araç detayı — başlık kartı, künye, muayene şeridi, OtoSor
   ----------------------------------------------------------------------
   Bu blok yalnızca Views/Car/CarDetails.cshtml'deki cd-* sınıflarını
   biçimler; bu dosyayı paylaşan online açık artırma detayı (oad-*) bu
   kurallardan etkilenmez. Boya & hasar kartı (kroki-summary-card)
   bilerek değiştirilmedi.
   ══════════════════════════════════════════════════════════════════════ */
.cd-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Genişlik ekranla orantılıdır: içerik ekranın %75'ini kaplar. Dar
   ekranlarda 1152 pikselin (ya da ekranın) altına inmez, çok geniş
   ekranlarda 1920 pikselde durur. Yan sütun da aynı oranla büyür; ana
   sütun fotoğraf oranına değil kalan alana göre boyutlanır. */
@media (min-width: 701px) {
    .car-content { width: min(max(75%, min(100% - 40px, 1152px)), 1920px); }
}
.car-details-grid { grid-template-columns: minmax(0, 1fr) clamp(360px, 27%, 440px); justify-content: stretch; row-gap: 16px; margin-top: 16px; }
@media (max-width: 1180px) and (min-width: 961px) {
    .car-details-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
}

/* ── Başlık kartı ───────────────────────────────────────────────────── */
.cd-hero { grid-column: 1 / -1; min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-card); }
.cd-hero__bar.car-return-bar { margin: 0; padding: 7px 20px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.cd-hero__trail { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.cd-hero__trail .back-link { margin: 0; padding-right: 14px; border-right: 1px solid var(--border-default); }
.cd-hero__trail .car-breadcrumb { gap: 6px; font-size: 12px; }
.cd-hero .car-pager { padding: 3px; box-shadow: none; }
.cd-hero .car-pager__button { height: 30px; }
.cd-hero__body { display: flex; align-items: center; gap: 16px; padding: 14px 22px; }
.cd-hero__lot { display: grid; flex: 0 0 auto; min-width: 66px; height: 62px; margin: 0; padding: 0 12px; place-content: center; justify-items: center; gap: 2px; border-radius: 14px; color: #fff; background: var(--navy); box-shadow: 0 12px 24px -16px rgba(22, 35, 60, .9); text-align: center; }
.cd-hero__lot span { color: rgba(255, 255, 255, .7); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.cd-hero__lot strong { font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cd-hero__title-row { display: flex; align-items: center; flex: 1 1 auto; gap: 16px; min-width: 0; }
.cd-hero__title { min-width: 0; margin: 0; color: var(--text-primary); font-family: "Hanken Grotesk", Inter, sans-serif; font-size: clamp(21px, .8vw + 14px, 27px); font-weight: 800; line-height: 1.22; letter-spacing: -.03em; overflow-wrap: anywhere; }

/* ── Kart başlığı ve plaka ──────────────────────────────────────────── */
.cd-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; }
.cd-card-head h2 { margin: 0; }
/* Plaka özellik kartında ortada, lokasyon ise sağda ancak kenardan %10 içeride. */
.cd-card-head--plate { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; margin-bottom: 14px; }

.cd-plate { margin: 0; line-height: 1; }
.cd-plate__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cd-plate__body { display: inline-flex; align-items: stretch; height: 36px; overflow: hidden; border: 2px solid #0b1220; border-radius: 7px; background: linear-gradient(180deg, #fff 0%, #f1f3f8 100%); box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 2.5px rgba(11, 18, 32, .14), 0 8px 18px -12px rgba(13, 21, 38, .6); }
.cd-plate__band { display: flex; align-items: flex-end; justify-content: center; width: 22px; padding-bottom: 5px; color: #fff; background: linear-gradient(180deg, #2a5fd1 0%, #0b3a9e 100%); font-family: Inter, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
/* Plaka tıklanınca kopyalanır; geri bildirim krokideki plakayla aynı. */
.cd-plate { position: relative; grid-column: 2; cursor: pointer; }
.cd-plate:focus-visible { border-radius: 9px; outline: 3px solid rgba(236, 63, 156, .35); outline-offset: 3px; }
.cd-plate:hover .cd-plate__body { border-color: var(--brand-primary); }
.cd-plate.is-copied .cd-plate__body { border-color: #1f8b52; }
.cd-plate.is-copy-failed .cd-plate__body { border-color: #b74949; }
.cd-plate.is-copy-failed .kroki-plate__feedback { background: #b74949; }
.cd-plate.has-copy-feedback .kroki-plate__feedback { animation: kroki-plate-feedback 1.8s ease both; }
.cd-plate__number { display: flex; align-items: center; padding: 0 12px 0 11px; color: #0b1220; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-plate-location { display: inline-flex; grid-column: 3; align-items: center; justify-self: end; gap: 6px; min-height: 36px; margin: 0 10% 0 0; padding: 0; border: 0; color: var(--brand-primary-active); background: transparent; font-size: 13px; font-weight: 800; line-height: 1.3; text-align: right; }
.cd-plate-location .material-symbols-outlined { font-size: 18px; }

/* ── Temel özellikler: iki satırlık özellik tablosu ─────────────────── */
.cd-specs { container-type: inline-size; }
/* Hücre aralarındaki 1px çizgiyi hücrelerin kendi gölgesi çizer; ızgaranın
   zemini kart rengindedir. Böylece bandrol gibi bir alan gizlendiğinde satır
   sonunda kalan boşluk gri kutu gibi durmaz. */
.cd-specs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.cd-spec { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 14px 16px 15px; background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle); }
.cd-spec--wide { grid-column: span 2; }
/* Bandrol gizlenince tek kalan son hücre dört sütunlu ızgarada satırı tamamlar. */
.cd-spec--fill-row { grid-column: span 2; }
.cd-spec__label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }
.cd-spec__label .material-symbols-outlined { color: var(--navy); font-size: 17px; opacity: .78; }
.cd-spec__value { color: var(--text-primary); font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
@container (max-width: 540px) {
    .cd-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* İki sütunlu düzende son hücre yayılmaz; kendi yarım genişliğinde kalır. */
    .cd-spec--fill-row { grid-column: auto; }
    .cd-card-head--plate { grid-template-columns: 1fr; justify-items: center; }
    .cd-plate { grid-column: 1; }
    .cd-plate-location { grid-column: 1; justify-self: center; margin-right: 0; }
}

/* ── Muayene, yedek anahtar, noter: dar şerit ───────────────────────── */
.cd-docs { container-type: inline-size; padding: 12px; }
.cd-docs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cd-doc { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 14px; border-radius: var(--radius-md); background: var(--surface-subtle); }
.cd-doc__icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--navy); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 21px; }
.cd-doc__copy { display: grid; gap: 2px; min-width: 0; }
.cd-doc__label { color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
.cd-doc__copy strong { color: var(--text-primary); font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cd-doc__flag { justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; color: var(--warning); background: var(--warning-bg); font-size: 11px; font-weight: 700; }
.cd-doc--positive .cd-doc__icon { color: var(--success); background: var(--success-bg); box-shadow: none; }
.cd-doc--warning .cd-doc__icon { color: var(--warning); background: var(--warning-bg); box-shadow: none; }
.cd-doc--danger .cd-doc__icon { color: var(--danger); background: #fef3f2; box-shadow: none; }
.cd-doc--danger .cd-doc__copy strong { color: var(--danger); }
/* Dar alanda da üç bilgi yan yana kalır; kutular dikey dizilime geçer. */
@container (max-width: 620px) {
    .cd-docs__list { gap: 6px; }
    .cd-doc { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
    .cd-doc__icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
    .cd-doc__label { font-size: 11px; }
    .cd-doc__copy strong { font-size: 13px; }
    .cd-doc__flag { padding: 1px 6px; font-size: 10px; }
}

/* ── OtoSor taksit kartı ────────────────────────────────────────────── */
/* Kartta kalın yazı yok: başlık ve öne çıkan tutar 600, geri kalanı 500.
   Açılır ödeme listesi kartın dışına taşabilsin diye overflow açık; üst
   bölümün köşeleri kendi yuvarlatmasıyla kartı izler. */
.cd-otosor { position: relative; min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-card); }
.cd-otosor__head { display: grid; gap: 8px; padding: 18px 18px 16px; border-bottom: 1px solid var(--border-subtle); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: linear-gradient(155deg, #f1f7fd 0%, #fbfcfe 58%, #fff6fa 100%); }
.cd-otosor__cobrand { display: inline-flex; align-items: center; justify-self: start; gap: 7px; height: 30px; margin: 0 0 2px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); white-space: nowrap; }
.cd-otosor__head h2 { margin: 0; color: var(--text-primary); font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.cd-otosor__lead { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.cd-otosor__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cd-otosor__done strong { font-weight: 600; }
.cd-otosor__done p b { color: var(--text-primary); font-weight: 500; }
.cd-otosor__body { display: grid; gap: 16px; padding: 16px 18px 18px; }
.cd-otosor__field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cd-otosor__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--text-primary); font-size: 13px; font-weight: 500; }
.cd-otosor__step { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); font-size: 11px; font-weight: 600; line-height: 1; }

.cd-otosor__money { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); transition: border-color .16s ease, box-shadow .16s ease; }
.cd-otosor__money:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14); }
.cd-otosor__money > span { color: var(--text-muted); font-size: 15px; font-weight: 500; }
.cd-otosor__money input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--text-primary); background: transparent; box-shadow: none; font-size: 19px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cd-otosor__money input:focus { outline: 0; box-shadow: none; }
.cd-otosor__money input::placeholder { color: #a3acbc; font-weight: 400; }

.cd-otosor__rate-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; box-sizing: border-box; gap: 6px 10px; }
.cd-otosor__rate-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border: 1px solid rgba(var(--brand-rgb), .1); border-radius: 999px; color: var(--brand-primary); background: var(--brand-soft); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.cd-otosor__rate-pill i { color: var(--brand-primary); font-size: 10px; font-style: normal; }
.cd-otosor__rate-pill strong { color: var(--text-primary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-otosor__rate-control { padding: 10px 13px 8px; border: 1px solid var(--border-subtle); border-radius: 12px; background: linear-gradient(135deg, var(--surface-subtle), rgba(var(--brand-rgb), .035)); }
/* Kaydırıcı: ince pembe dolgu çizgisi, üzerinde beyaz halkalı lacivert düğme. */
/* Ray ve %10 durak noktaları kaydırıcının arkasındaki katmanda çizilir;
   kaydırıcının zemini saydam olduğu için düğme hep noktaların üstünde kalır.
   Dolgu oranını (--cd-range-value) betik bu kaba yazar. */
.cd-otosor__rail { --cd-range-value: 0%; position: relative; height: 4px; margin: 14px 0 12px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-primary) var(--cd-range-value), var(--border-strong) var(--cd-range-value)); }
.cd-otosor__stops { position: absolute; inset: 0; pointer-events: none; }
.cd-otosor__stops i { position: absolute; top: 50%; left: calc(14px + (100% - 28px) * var(--cd-rate-stop, 0) / 10); width: 6px; height: 6px; border-radius: 50%; background: #8792a6; transform: translate(-50%, -50%); transition: background-color .16s ease; }
/* Dolgunun üstündeki noktalar dolguyla aynı renkte: çizgi kesik görünmesin. */
.cd-otosor__stops i.is-filled { background: var(--brand-primary); }
.cd-otosor__range { position: relative; display: block; width: 100%; height: 4px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.cd-otosor__range:focus { outline: 0; }
.cd-otosor__range::-webkit-slider-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; -webkit-appearance: none; appearance: none; background: var(--navy, #16233c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cg stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M13.5 16.06A7 7 0 1 1 16.06 13.5'/%3E%3Cpath d='M13.2 13.2L17 17'/%3E%3Ccircle cx='10' cy='10' r='3.8'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='1.4' fill='%23fff'/%3E%3C/svg%3E") center / 18px 18px no-repeat; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(13, 21, 38, .28); transition: box-shadow .16s ease, transform .16s ease; }
.cd-otosor__range:active::-webkit-slider-thumb { transform: scale(1.06); }
.cd-otosor__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(var(--brand-rgb), .25); }
.cd-otosor__range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--navy, #16233c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cg stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M13.5 16.06A7 7 0 1 1 16.06 13.5'/%3E%3Cpath d='M13.2 13.2L17 17'/%3E%3Ccircle cx='10' cy='10' r='3.8'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='1.4' fill='%23fff'/%3E%3C/svg%3E") center / 18px 18px no-repeat; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(13, 21, 38, .28); }
.cd-otosor__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(var(--brand-rgb), .25); }
.cd-otosor__rate-ticks { position: relative; height: 16px; color: var(--text-muted); font-size: 10px; font-weight: 500; letter-spacing: -.01em; }
/* 6 etiket (%0–%100, %20 adımlar); uçtaki etiketler 28px düğmenin merkezine hizalanır. */
.cd-otosor__rate-ticks span { position: absolute; top: 0; left: calc(14px + (100% - 28px) * var(--cd-rate-tick, 0) / 5); transform: translateX(-50%); white-space: nowrap; transition: color .16s ease; }
.cd-otosor__rate-ticks span.is-locked { opacity: .45; }
.cd-otosor__rate-ticks span.is-active { color: var(--brand-primary); font-weight: 600; }

/* Ödeme seçeneği: açılır liste. Kapalıyken seçili plan (ad + açıklama),
   açıkken seçenekler tetikleyicinin altında kartın üstüne açılır. */
.cd-otosor__select { position: relative; }
.cd-otosor__select-trigger { display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; align-items: center; gap: 11px; width: 100%; margin: 0; padding: 10px 12px 10px 10px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface-card); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.cd-otosor__select-trigger:hover { border-color: var(--brand-border); }
.cd-otosor__select-trigger:focus-visible, .cd-otosor__select.is-open .cd-otosor__select-trigger { border-color: var(--brand-primary); outline: 0; box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14); }
.cd-otosor__select-value { display: grid; gap: 2px; min-width: 0; }
.cd-otosor__select-value strong { color: var(--text-primary); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.cd-otosor__select-value small { color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.cd-otosor__select-chevron { color: var(--text-muted); font-size: 22px; transition: transform .18s ease, color .18s ease; }
.cd-otosor__select.is-open .cd-otosor__select-chevron { color: var(--brand-primary); transform: rotate(180deg); }
.cd-otosor__plan-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #fff; background: var(--brand-primary); font-size: 20px; transition: background .15s ease, color .15s ease; }

.cd-otosor__select-menu { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 40; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); box-shadow: 0 18px 40px -16px rgba(13, 21, 38, .32), 0 2px 6px rgba(13, 21, 38, .06); }
.cd-otosor__select-menu[hidden] { display: none; }
.cd-otosor__option { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: start; gap: 11px; margin: 0; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .15s ease; }
.cd-otosor__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cd-otosor__option .cd-otosor__plan-icon { color: var(--navy); background: var(--surface-sunken); }
.cd-otosor__option-copy { display: grid; gap: 2px; min-width: 0; }
.cd-otosor__option-copy strong { color: var(--text-primary); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.cd-otosor__option-copy small { color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 1.4; }
.cd-otosor__plan-tag { margin-top: 2px; color: var(--text-muted); font-size: 11.5px; font-style: normal; font-weight: 500; line-height: 1.3; }
.cd-otosor__option-check { align-self: center; color: var(--brand-primary); font-size: 20px; opacity: 0; transition: opacity .15s ease; }
.cd-otosor__option:hover { background: var(--surface-subtle); }
.cd-otosor__option.is-selected { background: var(--brand-soft); }
.cd-otosor__option.is-selected .cd-otosor__plan-icon { color: #fff; background: var(--brand-primary); }
.cd-otosor__option.is-selected .cd-otosor__plan-tag { color: var(--brand-primary-active); }
.cd-otosor__option.is-selected .cd-otosor__option-check { opacity: 1; }
.cd-otosor__option:has(input:focus-visible) { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.cd-otosor__status { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.cd-otosor__status[hidden] { display: none; }
.cd-otosor__status.is-busy { display: flex; align-items: center; gap: 8px; }
.cd-otosor__status.is-busy::before { flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--brand-primary); border-radius: 50%; content: ""; animation: cd-spin .7s linear infinite; }
.cd-otosor__status.is-error { color: var(--danger); font-weight: 600; }
@keyframes cd-spin { to { transform: rotate(360deg); } }

.cd-otosor__terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cd-otosor__terms:empty { display: none; }
.cd-otosor__term { position: relative; display: grid; gap: 3px; min-width: 0; margin: 0; padding: 10px 12px 11px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.cd-otosor__term::after { position: absolute; top: 11px; right: 11px; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface-card); content: ""; transition: border .15s ease; }
.cd-otosor__term input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cd-otosor__term strong { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.cd-otosor__term > span { color: var(--text-primary); font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-otosor__term small { color: var(--text-muted); font-size: 11px; font-weight: 400; }
.cd-otosor__term:hover { border-color: var(--brand-border); }
.cd-otosor__term.is-selected { border-color: var(--brand-primary); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .1); }
.cd-otosor__term.is-selected::after { border: 4px solid var(--brand-primary); }
.cd-otosor__term.is-selected strong { color: var(--brand-primary-active); }
.cd-otosor__term:has(input:focus-visible) { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* Kademeli plan: vade kartı tam genişlik, her yılın aylık taksiti bir satır. */
.cd-otosor__terms.is-incremental { grid-template-columns: minmax(0, 1fr); }
.cd-otosor__term > .cd-otosor__schedule { display: grid; gap: 5px; margin-top: 5px; padding-top: 7px; border-top: 1px dashed var(--border-default); white-space: normal; }
.cd-otosor__schedule > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cd-otosor__schedule b { color: var(--text-primary); font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-otosor__term.is-selected .cd-otosor__schedule { border-top-color: var(--brand-border); }

.cd-otosor__summary { display: grid; margin: 0; padding: 2px 14px; border-radius: var(--radius-md); background: var(--surface-subtle); }
.cd-otosor__summary[hidden] { display: none; }
.cd-otosor__summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; }
.cd-otosor__summary > div + div { border-top: 1px dashed var(--border-default); }
.cd-otosor__summary dt { color: var(--text-secondary); font-size: 12px; }
.cd-otosor__summary dt span { color: var(--text-muted); }
.cd-otosor__summary dd { margin: 0; color: var(--text-primary); font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-otosor__summary .is-highlight dt { color: var(--text-primary); font-weight: 500; }
.cd-otosor__summary .is-highlight dd { color: var(--text-muted); font-size: 16px; }
.cd-otosor__summary.is-ready .is-highlight dd { color: var(--brand-primary); font-size: 19px; font-weight: 600; }

.cd-otosor__cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: var(--radius-md); color: #fff; background: var(--brand-primary); box-shadow: 0 12px 24px -14px rgba(var(--brand-rgb), .9); font-size: 15px; font-weight: 500; text-align: center; transition: background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.cd-otosor__cta:hover { color: #fff; background: var(--brand-primary-hover); transform: translateY(-1px); }
.cd-otosor__cta .material-symbols-outlined { font-size: 19px; }
.cd-otosor__cta.is-disabled { box-shadow: none; opacity: .45; cursor: not-allowed; transform: none; }
.cd-otosor__cta.is-disabled:hover { background: var(--brand-primary); }
/* site.css'teki `.app-body a { color: inherit }` tek sınıflı kuralı eziyordu;
   düğme yazısı her durumda beyaz. */
.cd-otosor a.cd-otosor__cta,
.cd-otosor a.cd-otosor__cta:hover,
.cd-otosor a.cd-otosor__cta:focus-visible { color: #fff; }

.cd-otosor__note { display: flex; gap: 6px; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.cd-otosor__note .material-symbols-outlined { flex: 0 0 auto; margin-top: 1px; font-size: 15px; }

.cd-otosor__done { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--success-border); border-radius: var(--radius-md); background: var(--success-bg); }
.cd-otosor__done > .material-symbols-outlined { flex: 0 0 auto; color: var(--success); font-size: 26px; }
.cd-otosor__done strong { display: block; color: var(--text-primary); font-size: 14px; }
.cd-otosor__done p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

/* ── Galeri kartı: kategori sekmeleri + sahne + küçük resimler ──────── */
.cd-gallery .vehicle-gallery__frame { gap: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-card); }
.cd-gallery__tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
.cd-gallery__tab { display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 10px 0 9px; border: 1px solid transparent; border-radius: 10px; color: var(--text-secondary); background: transparent; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.cd-gallery__tab .material-symbols-outlined { color: var(--text-muted); font-size: 19px; transition: color .15s ease; }
.cd-gallery__tab em { display: inline-grid; min-width: 22px; height: 20px; padding: 0 6px; place-items: center; border-radius: 999px; color: var(--text-secondary); background: var(--surface-sunken); font-size: 11px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .15s ease, color .15s ease; }
.cd-gallery__tab:not(:disabled):hover { color: var(--brand-primary-active); background: var(--brand-soft); }
.cd-gallery__tab:not(:disabled):hover .material-symbols-outlined { color: var(--brand-primary); }
.cd-gallery__tab.is-active,
.cd-gallery__tab.is-active:not(:disabled):hover { color: #fff; background: var(--brand-primary); box-shadow: 0 6px 14px -8px rgba(var(--brand-rgb), .9); }
.cd-gallery__tab.is-active .material-symbols-outlined,
.cd-gallery__tab.is-active:not(:disabled):hover .material-symbols-outlined { color: #fff; }
.cd-gallery__tab.is-active em { color: var(--brand-primary-active); background: #fff; }
.cd-gallery__tab:disabled { opacity: .42; cursor: not-allowed; }
.cd-gallery__tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.cd-gallery__tab--video { margin-left: auto; padding-right: 12px; border-color: var(--border-default); color: var(--text-primary); background: var(--surface-card); }
.cd-gallery__tab--video .material-symbols-outlined { color: var(--brand-primary); }
.cd-gallery__tab--video:not(:disabled):hover { border-color: var(--brand-border); }
/* Videosu olan ama erişimi olmayan üyede sekme kilitli görünür; adres
   yazılmadığı için tıklama yalnızca gerekçeyi açar. */
.cd-gallery__tab--locked { border-style: dashed; color: var(--text-muted); background: var(--surface-subtle); }
.cd-gallery__tab--locked .material-symbols-outlined { color: #8a94a5; }
.cd-gallery__tab--locked:not(:disabled):hover { border-color: #c9d1dd; color: var(--text-secondary); background: #eef1f6; }

/* Sahne yüksekliği car-details.js'teki fitStage ile ekrana sığdırılır. */
.cd-gallery .vehicle-gallery__stage { max-height: var(--cd-stage-max, 78vh); border: 0; border-radius: 0; background: #151a23; box-shadow: none; }
.cd-gallery .vehicle-gallery__stage > .cd-gallery__backdrop { position: absolute; inset: -32px; z-index: 0; width: calc(100% + 64px); height: calc(100% + 64px); object-fit: cover; filter: blur(28px) saturate(1.05) brightness(.62); pointer-events: none; cursor: default; }
.cd-gallery .vehicle-gallery__stage > #vehicleMainImage { position: relative; z-index: 1; }
.cd-gallery .gallery-thumbnails { display: flex; flex-wrap: nowrap; gap: 8px; padding: 10px; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--border-subtle); scroll-snap-type: x proximity; scrollbar-color: var(--brand-primary) var(--surface-sunken); scrollbar-width: thin; }
.cd-gallery .gallery-thumbnail { width: auto; flex: 0 0 clamp(92px, 9vw, 126px); aspect-ratio: 4 / 3; scroll-snap-align: start; }
.cd-gallery .gallery-thumbnail[hidden],
.cd-gallery .stage-nav[hidden] { display: none; }

/* Alt aksiyon kartları krokinin altına taşındı: .kroki-actions */

/* ── Ek beyanlar ────────────────────────────────────────────────────── */
.cd-declarations .cd-card-head { margin-bottom: 0; padding-bottom: 17px; border-bottom: 1px solid var(--border-subtle); }
.cd-declarations__head { align-items: center; }
.cd-declarations__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cd-declarations__title h2 { margin: 0; }
.cd-declarations__title > .material-symbols-outlined { display: inline-grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #68809e; background: #edf3fa; font-size: 15px; cursor: help; }
.cd-declarations__summary { margin: 0; color: #8a9ab1; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cd-declarations__summary strong { color: #62738d; font-weight: 800; }
.cd-declarations__list { display: grid; }
.cd-declaration { display: grid; grid-template-columns: minmax(190px, .74fr) minmax(0, 1.55fr); align-items: center; gap: 22px; padding: 17px 0; }
.cd-declaration + .cd-declaration { border-top: 1px solid var(--border-subtle); }
.cd-declaration:last-child { padding-bottom: 2px; }
.cd-declaration__title { display: flex; align-items: center; gap: 11px; margin: 0; min-width: 0; color: var(--text-secondary); font-size: 14px; font-weight: 800; line-height: 1.35; }
.cd-declaration__title .material-symbols-outlined { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #6a7f9a; background: #f1f5fa; font-size: 19px; }
.cd-declaration__content { display: flex; justify-content: flex-start; min-width: 0; }
.cd-declaration__tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.cd-declaration__tag { display: inline-flex; align-items: center; min-height: 33px; padding: 7px 11px; border: 1px solid #e8eef6; border-radius: 9px; color: #5e6d84; background: #f2f6fa; font-size: 13px; font-weight: 700; line-height: 1.25; }
.cd-declaration__text, .cd-declaration__empty { margin: 0; max-width: 100%; color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1.65; text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
.cd-declaration__empty { color: #9aa8bb; font-style: italic; }
.cd-declaration--expertise .cd-declaration__title, .cd-declaration--expertise .cd-declaration__text { color: var(--danger); }
.cd-declaration--expertise .cd-declaration__title .material-symbols-outlined, .cd-declaration--attention .cd-declaration__title .material-symbols-outlined { color: #c24762; background: #fff0f3; }
/* Ekspertiz açıklaması dolgulu değil çerçeveli okunur: zemin kalktı, metni
   ayıran yalnızca ince kenarlık. */
.cd-declaration--expertise .cd-declaration__text { padding: 8px 11px; border: 1px solid #f4d6dd; border-radius: 9px; background: transparent; }
.cd-declaration--dismantled .cd-declaration__tag { color: #60738f; background: #edf3f9; }
.cd-declaration--attention .cd-declaration__tag { color: #bd4760; border-color: #f4d9df; background: #fff3f5; }
.cd-declaration--review .cd-declaration__tag { color: #a36b18; border-color: #f5e1b5; background: #fff8e9; }
.cd-declaration--muted .cd-declaration__tag { color: #7e8998; background: #f4f6f8; }
@container (max-width: 560px) {
    .cd-declarations__summary { width: 100%; font-size: 12px; }
    .cd-declaration { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cd-declaration__content, .cd-declaration__tags { justify-content: flex-start; }
    .cd-declaration__text, .cd-declaration__empty { text-align: left; }
}
.cd-declarations { container-type: inline-size; }

/* ── Galeri ve video penceresinde Paylaş ────────────────────────────── */
.modal-share { display: inline-flex; align-items: center; gap: 6px; height: 35px; padding: 0 12px 0 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px; color: #fff; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .16s ease, border-color .16s ease; }
.modal-share .material-symbols-outlined { font-size: 18px; }
.modal-share:hover { border-color: transparent; background: var(--brand-primary); }
/* Beyaz zeminli pencerelerde (ekspertiz raporu) aynı düğme koyu okunur. */
.modal-share--light { border-color: var(--border-default); color: var(--text-secondary); background: var(--surface-subtle); }
.modal-share--light:hover { border-color: transparent; color: #fff; background: var(--brand-primary); }
/* Paylaşım penceresi galeri/video penceresinin üstünde açılır. */
.share-modal { z-index: 120; }
.share-tabs[hidden] { display: none; }
.share-preview__chip--context { color: var(--brand-primary-active); border-color: var(--brand-border); background: var(--brand-soft); }
.share-preview__chip--context[hidden] { display: none; }
@media (max-width: 560px) {
    .modal-share span:last-child { display: none; }
    .modal-share { width: 44px; height: 44px; padding: 0; justify-content: center; }
}

/* ── Yazı ağırlığı ──────────────────────────────────────────────────── */
/* Araç detayında kalın (700–800) yazı kullanılmaz: değer ve etiketler 500,
   sayfa başlığı ve öne çıkan sayılar 600. Yalnızca bu görünümün ızgarasına
   uygulanır; car-details.css'i paylaşan açık artırma detayı etkilenmez.
   Plakalar gerçek plaka görünümünü korur. 600'lük blok sonra gelir: aynı
   öğeye iki blok da uyduğunda (özgüllük eşit) başlık ağırlığı kazanır. */
.car-details-grid :is(
    .car-breadcrumb span:last-child, .back-link, .car-pager__button, .car-pager__position,
    .cd-hero__lot span, .cd-hero__location,
    .cd-gallery__tab, .cd-gallery__tab em, .gallery-badge, .gallery-count, .gallery-action, .gallery-action > span,
    .card-payment-badge, .gallery-thumbnail__more,
    .cd-spec__label, .cd-spec__value, .cd-doc__copy strong, .cd-doc__flag,
    .equipment-card__item, .cd-declarations__summary strong, .cd-declaration__title, .cd-declaration__tag,
    .kroki-action__copy strong,
    .kroki-summary-card__login, .kroki-legend span,
    .kroki-summary-stats > div, .kroki-tramer-info b,
    .auction-info-card__eyebrow, .auction-info-card__lot, .auction-info-card__status,
    .auction-info-card__name, .auction-info-card__rows dd
) { font-weight: 500; }
.car-details-grid :is(
    .cd-hero__title, .cd-hero__lot strong,
    .kroki-summary-stats span, .kroki-tramer-info > strong
) { font-weight: 600; }

/* ── Yerleşim ───────────────────────────────────────────────────────── */
/* Masaüstünde yan sütun, ekrandan uzunsa sayfayla birlikte kayar ve alt
   kenarı göründüğünde sabitlenir (yükseklik car-details.js'ten gelir). */
@media (min-width: 961px) {
    .car-details-aside { top: min(92px, calc(100vh - var(--cd-aside-h, 0px) - 16px)); }
}

/* Tek sütunda sıra: başlık → galeri → ilgi/ihale/kroki → künye → muayene
   → taksit kartı → donanım ve beyanlar. */
@media (max-width: 960px) {
    .car-details-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cd-hero { order: -6; }
    .car-details-grid .vehicle-gallery { order: -5; }
    .car-details-grid .car-details-aside { display: contents; }
    .car-details-aside > * { order: -4; min-width: 0; }
    .car-details-main > .cd-specs { order: -3; }
    .car-details-main > .cd-docs { order: -2; }
    .car-details-aside > .cd-otosor { order: -1; }
    .car-details-aside.has-consumer-interest-modal > * { position: relative; z-index: 1000; }
}

@media (max-width: 700px) {
    .car-details-grid { margin-top: 12px; }
    .cd-hero__bar.car-return-bar { padding: 8px 12px; }
    .cd-hero__trail .back-link { padding-right: 0; border-right: 0; }
    .cd-hero__trail .car-breadcrumb { display: none; }
    .car-details-grid { gap: 14px; }
    .cd-hero__body { gap: 12px; padding: 14px 16px; }
    .cd-hero__lot { min-width: 56px; height: 58px; padding: 0 8px; border-radius: 12px; }
    .cd-hero__lot span { font-size: 9px; }
    .cd-hero__lot strong { font-size: 24px; }
    .cd-hero__title { font-size: 19px; line-height: 1.28; }
    .cd-hero__title-row { align-items: flex-start; gap: 10px; }
    .cd-hero__location { min-height: 36px; max-width: 40%; padding: 0 10px; font-size: 12px; }
    .cd-hero__location .material-symbols-outlined { font-size: 17px; }
    /* Sekmeler kaymaz; üç sütunluk ızgarada iki satıra yerleşir. */
    .cd-gallery__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; }
    .cd-gallery__tab { justify-content: center; gap: 5px; height: 36px; padding: 0 6px; font-size: 12px; }
    .cd-gallery__tab .material-symbols-outlined { display: none; }
    .cd-gallery__tab em { min-width: 20px; height: 18px; padding: 0 5px; font-size: 10px; }
    .cd-gallery__tab--video { margin-left: 0; padding-right: 6px; }
    .cd-gallery__tab--video .material-symbols-outlined { display: inline-block; font-size: 17px; }
    .cd-gallery .gallery-thumbnails { gap: 6px; padding: 8px; }
    .cd-gallery .gallery-thumbnail { flex-basis: 82px; }
    .kroki-actions { padding: 10px 12px 12px; }
    .kroki-action__icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 18px; }
    .cd-plate__body { height: 34px; }
    .cd-plate__band { width: 20px; padding-bottom: 4px; font-size: 8px; }
    .cd-plate__number { padding: 0 10px 0 9px; font-size: 16px; }
    .cd-spec { padding: 12px 13px 13px; }
    .cd-spec__value { font-size: 14px; }
    .cd-otosor__head { padding: 16px; }
    .cd-otosor__body { padding: 14px 16px 16px; }
}