/* ══════════════════════════════════════════════════════════════════════
   OtoArena — public design system
   ----------------------------------------------------------------------
   Single source of truth for colour, type, shape, elevation and spacing
   across the public site, plus the components that appear on more than
   one page (vehicle card, badges, buttons, panels, states).

   Palette logic: magenta stays the brand accent but is reserved for the
   primary action and brand moments. Structure, headings and secondary
   actions use a dark navy so the page does not read as "everything is
   pink". Neutrals carry the rest.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────
       Marka rengi #ec3f9c. Hover/active tonları aynı renkten karartılarak
       türetildi; soft/tint/border ise aynı hue'nun açık uçları.
       --brand-rgb, kod boyunca dağılmış rgba(...) gölge ve focus halkaları
       tek yerden beslensin diye var: yeni bir rgba değeri yazarken
       rgba(var(--brand-rgb), .12) kullanın, sabit sayı yazmayın. */
    --brand-primary: #ec3f9c;
    --brand-primary-hover: #d92d88;
    --brand-primary-active: #c01f74;
    --brand-rgb: 236, 63, 156;
    --brand-soft: #fef2f8;
    --brand-tint: #fcdcec;
    --brand-border: #f7b7d7;
    --brand-glow: rgba(var(--brand-rgb), .22);

    /* ── Support colour: dark navy for structure and secondary weight ─ */
    --navy: #16233c;
    --navy-hover: #0f1a2e;
    --navy-soft: #eef1f6;
    --navy-border: #cdd5e2;

    /* ── Text ──────────────────────────────────────────────────────── */
    --text-primary: #0d1526;
    --text-secondary: #46536b;
    --text-muted: #68738a;
    --text-on-brand: #ffffff;

    /* ── Surfaces ──────────────────────────────────────────────────── */
    --surface-page: #e9edf3;
    --surface-card: #ffffff;
    --surface-subtle: #f4f6fa;
    --surface-sunken: #eaeef4;

    /* ── Borders ───────────────────────────────────────────────────── */
    /* Softened one step: dividers should describe structure, not draw
       attention to themselves. */
    --border-default: #dfe4ed;
    --border-subtle: #e9edf4;
    --border-strong: #c6cede;

    /* ── Status ────────────────────────────────────────────────────── */
    --success: #15803d;
    --success-bg: #e8f6ed;
    --success-border: #bfe3cc;
    --warning: #9a5b06;
    --warning-bg: #fdf3e0;
    --warning-border: #f0dcb4;
    --danger: #b3261e;
    --danger-bg: #fdecea;
    --danger-border: #f3cfcb;
    --info: #17558f;
    --info-bg: #eaf2fb;

    /* ── Shape ─────────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ── Elevation: thin border + very light shadow, never heavy blur ─ */
    --shadow-card: 0 1px 2px rgba(13, 21, 38, .05);
    --shadow-hover: 0 8px 24px rgba(13, 21, 38, .10);
    --shadow-raised: 0 12px 32px rgba(13, 21, 38, .13);

    /* ── Spacing: 8px base ─────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;

    /* ── Type scale ────────────────────────────────────────────────── */
    --fs-page-title: 32px;
    --fs-section-title: 24px;
    --fs-card-title: 18px;
    --fs-body: 15px;
    --fs-sm: 13px;
    --fs-xs: 12px;
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;

    /* ── Motion ────────────────────────────────────────────────────── */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 150ms;
    --dur-base: 190ms;
    --dur-slow: 220ms;

    /* ── Layout ────────────────────────────────────────────────────── */
    /* Two content widths only. The standard one is the page's grid line:
       header, section headings and body content all start on it. The wide
       one is reserved for image- or data-led bands (hero, feature strip).
       Backgrounds stay full-bleed; only the inner container is capped. */
    --container-max: 1360px;
    --container-wide: 1500px;
    --container-gutter: 16px;

    /* ── Vertical rhythm ───────────────────────────────────────────────
       These are half-gaps: two stacked sections each contribute their own
       padding, so the space a reader sees between them is the sum. Sized so
       normal+normal ≈ 80px (a major break) and tight+normal ≈ 64px. */
    --section-y: 32px;        /* normal section */
    --section-y-lg: 44px;     /* section that opens or closes a block */
    --section-y-sm: 20px;     /* strips that belong to the section above */
    --section-head-gap: 24px; /* heading block → content */

    /* ── Aliases kept so existing rules in car-details.css and the page
       style blocks resolve against the same values. ────────────────── */
    --oa-brand: var(--brand-primary);
    --oa-brand-strong: var(--brand-primary-hover);
    --oa-brand-deep: var(--brand-primary-active);
    --oa-brand-soft: var(--brand-soft);
    --oa-brand-tint: var(--brand-tint);
    --oa-brand-line: var(--brand-border);
    --oa-brand-glow: var(--brand-glow);
    --oa-ink: var(--text-primary);
    --oa-ink-2: var(--text-secondary);
    --oa-muted: var(--text-secondary);
    --oa-faint: var(--text-muted);
    --oa-surface: var(--surface-card);
    --oa-surface-2: var(--surface-subtle);
    --oa-surface-3: var(--surface-page);
    --oa-line: var(--border-default);
    --oa-line-2: var(--border-subtle);
    --oa-ok: var(--success);
    --oa-ok-bg: var(--success-bg);
    --oa-warn: var(--warning);
    --oa-warn-bg: var(--warning-bg);
    --oa-danger: var(--danger);
    --oa-danger-bg: var(--danger-bg);
    --oa-info: var(--info);
    --oa-info-bg: var(--info-bg);
    --oa-r-xs: var(--radius-sm);
    --oa-r-sm: 10px;
    --oa-r-md: var(--radius-md);
    --oa-r-lg: var(--radius-lg);
    --oa-r-xl: var(--radius-xl);
    --oa-sh-1: var(--shadow-card);
    --oa-sh-2: var(--shadow-hover);
    --oa-sh-3: var(--shadow-raised);
    --oa-ease: var(--ease);
}

/* Gutters grow with the viewport and then stop; past 1600px the container
   is already at its cap, so the extra width becomes margin, not content. */
@media (min-width: 768px) {
    :root {
        --container-gutter: 24px;
        --section-y: 40px;
        --section-y-lg: 56px;
        --section-y-sm: 24px;
        --section-head-gap: 32px;
    }
}

@media (min-width: 1440px) {
    :root { --container-gutter: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Layout primitives
   ----------------------------------------------------------------------
   .site-section is full width and owns the vertical rhythm plus any
   background band; .site-container is the centred content column inside
   it. Nothing else should set its own page-level width.
   ══════════════════════════════════════════════════════════════════════ */
.site-container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.site-container--wide { max-width: calc(var(--container-wide) + 2 * var(--container-gutter)); }

.site-section { width: 100%; padding-block: var(--section-y); }
.site-section--lg { padding-block: var(--section-y-lg); }
.site-section--tight { padding-block: var(--section-y-sm); }

/* Bands: the background runs edge to edge, the container does not. */
.site-section--band { background: var(--surface-card); border-block: 1px solid var(--border-subtle); }
.site-section--band + .site-section--band { border-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Typography primitives
   Weights stay 600–700 for headings and 400–500 for copy. Uppercase is
   reserved for short category labels, never for sentences.
   ══════════════════════════════════════════════════════════════════════ */
.oa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.oa-h1 {
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-page-title);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -.025em;
}

.oa-h2 {
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-section-title);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.02em;
}

.oa-sub {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
}

@media (min-width: 1024px) {
    .oa-h1 { font-size: 36px; }
    .oa-h2 { font-size: 26px; }
}

.oa-num { font-variant-numeric: tabular-nums; }

.oa-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════════════════════
   Section header
   ══════════════════════════════════════════════════════════════════════ */
.oa-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--section-head-gap);
}

.oa-section-head__text { min-width: 0; max-width: 68ch; }
.oa-section-head__text .oa-h2 { margin-top: var(--space-2); }

/* Right-hand slot: carousel arrows sit beside the "see all" link on the
   container's right edge instead of floating over the cards. */
.oa-section-head__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

.oa-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    background: var(--surface-card);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.oa-more:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: var(--shadow-card);
}

.oa-more .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--dur-base) var(--ease);
}

.oa-more:hover .material-symbols-outlined { transform: translateX(2px); }

/* ══════════════════════════════════════════════════════════════════════
   Badges
   ══════════════════════════════════════════════════════════════════════ */
.oa-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.oa-badge .material-symbols-outlined { font-size: 14px; }

.oa-badge--lot {
    background: #ea328e;
    color: #fff;
    letter-spacing: .04em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.oa-badge--brand { background: var(--brand-primary); color: #fff; }
.oa-badge--navy { background: var(--navy); color: #fff; }
.oa-badge--ok { background: var(--success-bg); color: var(--success); }
.oa-badge--warn { background: var(--warning-bg); color: var(--warning); }
.oa-badge--danger { background: var(--danger-bg); color: var(--danger); }
.oa-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.oa-badge--danger-solid { background: #c62828; color: #fff; }
/* Kişiye özel önerilen araç. Araç kartı listede ve anasayfada aynı olduğu
   için rozeti de ortak. */
.oa-badge--recommended { background: #e8f5ee; color: #17633a; border: 1px solid #b7e0c6; }

.oa-badge--live { background: var(--brand-primary); color: #fff; }
.oa-badge--live::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    animation: oa-pulse 1.8s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes oa-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .oa-badge--live::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Buttons — one height, one radius, one icon alignment everywhere.
   ══════════════════════════════════════════════════════════════════════ */
.oa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.oa-btn .material-symbols-outlined { font-size: 19px; }
.oa-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.oa-btn:disabled, .oa-btn[aria-disabled="true"] { cursor: not-allowed; }

.oa-btn--sm { height: 38px; padding: 0 var(--space-3); font-size: var(--fs-sm); }
.oa-btn--block { width: 100%; }

.oa-btn--primary { background: var(--brand-primary); color: var(--text-on-brand); }
.oa-btn--primary:hover { background: var(--brand-primary-hover); box-shadow: 0 6px 18px var(--brand-glow); }
.oa-btn--primary:active { background: var(--brand-primary-active); }

.oa-btn--navy { background: var(--navy); color: #fff; }
.oa-btn--navy:hover { background: var(--navy-hover); }

.oa-btn--ghost { border: 1px solid var(--border-default); color: var(--text-primary); background: var(--surface-card); }
.oa-btn--ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.oa-btn--muted { border: 1px solid var(--border-default); background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }

/* Loading state: the label is replaced by a spinner, width stays put. */
.oa-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.oa-btn.is-loading::after {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: inherit;
    content: "";
    animation: oa-spin .7s linear infinite;
}
.oa-btn--primary.is-loading::after, .oa-btn--navy.is-loading::after { border-color: #fff; border-top-color: transparent; }

@keyframes oa-spin { to { transform: rotate(360deg); } }

/* Live auction handoff: keep the CTA dimensions stable while attendee/flag/PIN
   creation and AuctionDB synchronization complete. */
.auction-join-button {
    min-width: 0;
    overflow: hidden;
}

.auction-join-button__idle,
.auction-join-button__busy {
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.auction-join-button__idle { display: inline-flex; }
.auction-join-button__busy { display: none; }

.auction-join-button.is-join-loading .auction-join-button__idle { display: none; }
.auction-join-button.is-join-loading .auction-join-button__busy { display: inline-flex; }

.auction-join-button__busy-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auction-join-button__spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid rgba(255, 255, 255, .48);
    border-top-color: #fff;
    border-radius: 50%;
    animation: oa-spin .7s linear infinite;
}

.auction-join-button.is-join-loading:disabled {
    cursor: wait;
    opacity: .78;
    box-shadow: none;
}

.ac-btn.auction-join-button .auction-join-button__busy {
    font-size: 10px;
    letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
    .auction-join-button__spinner { animation-duration: 1.4s; }
}

/* ══════════════════════════════════════════════════════════════════════
   Panel
   ══════════════════════════════════════════════════════════════════════ */
.oa-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.oa-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.oa-panel__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: -.01em;
}

.oa-panel__count {
    display: inline-grid;
    min-width: 26px;
    height: 24px;
    padding: 0 var(--space-2);
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--brand-tint);
    color: var(--brand-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oa-panel__body { flex: 1 1 auto; min-height: 0; padding: var(--space-3); }
.oa-panel__foot { padding: var(--space-3); border-top: 1px solid var(--border-subtle); }

/* ══════════════════════════════════════════════════════════════════════
   Trust strip
   ══════════════════════════════════════════════════════════════════════ */
.oa-trust {
    display: grid;
    gap: 1px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--border-subtle);
    overflow: hidden;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) { .oa-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .oa-trust { grid-template-columns: repeat(4, 1fr); } }

.oa-trust__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
}

.oa-trust__icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand-primary);
}

.oa-trust__icon .material-symbols-outlined { font-size: 21px; }
.oa-trust__body { min-width: 0; }
.oa-trust__body strong { display: block; color: var(--text-primary); font-size: var(--fs-body); font-weight: 700; letter-spacing: -.005em; }
.oa-trust__body span { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* ══════════════════════════════════════════════════════════════════════
   Skeletons
   ══════════════════════════════════════════════════════════════════════ */
.oa-skel {
    position: relative;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow: hidden;
}

.oa-skel::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: translateX(-100%);
    content: "";
    animation: oa-shimmer 1.4s infinite;
}

@keyframes oa-shimmer { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .oa-skel::after { animation: none; }
}

.oa-skel-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    overflow: hidden;
}

.oa-skel-card__media { aspect-ratio: 4 / 3; margin: var(--space-2) var(--space-2) 0; border-radius: var(--radius-md); }
.oa-skel-card__body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-3); }
.oa-skel-card__body > i { display: block; height: 12px; }
.oa-skel-card__body > i:nth-child(1) { width: 68%; height: 17px; }
.oa-skel-card__body > i:nth-child(2) { width: 45%; }
.oa-skel-card__body > i:nth-child(3) { width: 100%; height: 46px; border-radius: var(--radius-md); }
.oa-skel-card__body > i:nth-child(4) { width: 100%; height: 40px; border-radius: var(--radius-md); }

/* ══════════════════════════════════════════════════════════════════════
   Vehicle card
   ----------------------------------------------------------------------
   Information order: photo → lot → favourite → year/brand/model → trim →
   specs → location → expertise → auction → actions. Specs are icon+value
   rows rather than a grid of grey boxes, so the card reads as one object.
   ══════════════════════════════════════════════════════════════════════ */
.auction-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.auction-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .auction-card:hover { transform: none; }
}

/* ── Media ─────────────────────────────────────────────────────────── */
.ac-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--surface-sunken);
    overflow: hidden;
}

/* Mevcut fiyat, aracın adıyla doğrudan ilişkilensin diye başlığın hemen
   altında kısa bir satırda verilir. */
.ac-current-price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--text-muted);
}
.ac-current-price span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ac-current-price strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 16px; font-weight: 800; color: var(--brand-primary); font-variant-numeric: tabular-nums; }

/* Başlangıç fiyatı paket bilgisinin altında, abartısız ayrı bir bilgi
   yüzeyinde durur. Güncel tekliften görsel olarak geri plandadır. */
.ac-start-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding: 7px 9px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-primary);
}
.ac-start-price span { color: var(--text-primary); font-size: var(--fs-xs); font-weight: 700; }
.ac-start-price strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ac-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 600ms var(--ease);
}

.auction-card:hover .ac-media img { transform: scale(1.04); }

.ac-media__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
}

.ac-media__empty .material-symbols-outlined { font-size: 36px; }

/* ── Kart fotoğraf gezinmesi ────────────────────────────────────────────
   Ekspertizdeki profil ve araç dışı fotoğrafları kartın üzerinde gezilebilir
   kılar. Katman, kartın medya kutusunu (anasayfa/ızgara .ac-media, liste
   .al-media__frame) tümüyle kaplar; rozetler, favori kalbi ve başlık kutusu
   üstünde kardeş öğe olarak kalır. Fotoğraf kuralları çift sınıfla yazıldı:
   .ac-media img / .al-media__frame img kuralları aksi hâlde geçiş ayarını
   ezip yumuşak geçişi kaldırıyordu. */
/* Katmana z-index verilmiyor: verilse yeni bir yığın bağlamı açar ve oklar
   rozetlerin altında kalırdı. */
.oa-cg {
    position: absolute;
    inset: 0;
}

.oa-cg .oa-cg__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    /* Kart üzerine gelince çalışan yakınlaşma korunuyor. */
    transition: opacity 240ms var(--ease), transform 600ms var(--ease);
}

.oa-cg .oa-cg__img.is-active { opacity: 1; }

.oa-cg__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    color: var(--text-primary);
    background: rgba(255, 255, 255, .86);
    box-shadow: var(--shadow-card);
    opacity: .82;
    transition: opacity var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.oa-cg__nav--prev { left: var(--space-2); }
.oa-cg__nav--next { right: var(--space-2); }
.oa-cg__nav .material-symbols-outlined { font-size: 20px; }
.auction-card:hover .oa-cg__nav,
.al-row:hover .oa-cg__nav { opacity: 1; }
.oa-cg__nav:hover { background: #fff; opacity: 1; }
.oa-cg__nav:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; opacity: 1; }

.oa-cg__count {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    z-index: 4;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(13, 21, 38, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Tek fotoğraflı araçta ok ve sayaç görünmez: gezilecek bir şey yok. */
.oa-cg--single .oa-cg__nav,
.oa-cg--single .oa-cg__count { display: none; }

/* Liste görünümünde başlık kutusu medyanın altını kaplıyor; sayaç oraya
   girmesin diye biraz yukarı alınıyor. */
.al-media__frame .oa-cg__count { bottom: 64px; }

@media (prefers-reduced-motion: reduce) {
    .oa-cg .oa-cg__img { transition: none; }
}

.ac-badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    max-width: calc(100% - 60px);
}

.ac-media__top-actions {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: calc(100% - 60px);
}

/* "Kredi kartına uygun" işareti. 20-22 pikselde net okunması gerektiği için
   ince çizgili değil dolu bir kart: şerit ve numara alanı maskede boşluk
   olarak duruyor. Çizim tek yerde, rengini bulunduğu rozetten alır. */
.card-payment-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M3.4 4.4h17.2a2 2 0 0 1 2 2v11.2a2 2 0 0 1-2 2H3.4a2 2 0 0 1-2-2V6.4a2 2 0 0 1 2-2zM1.4 8.2h21.2v3.2H1.4zM4.6 14.4h5.6v2.2H4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M3.4 4.4h17.2a2 2 0 0 1 2 2v11.2a2 2 0 0 1-2 2H3.4a2 2 0 0 1-2-2V6.4a2 2 0 0 1 2-2zM1.4 8.2h21.2v3.2H1.4zM4.6 14.4h5.6v2.2H4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Araç listelerinde kredi kartı rozeti, fotoğrafın üstünde favori kalbiyle
   aynı beyaz yuvarlak içinde durur: aynı çap, aynı zemin ve gölge. */
.ac-card-payment-badge,
.al-card-payment-badge {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #176b45;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    box-shadow: var(--shadow-card);
}
/* Satır görünümünde kalp 32 piksel: rozet de onunla aynı ölçüde kalsın. */
.al-card-payment-badge {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 3px 10px rgba(20, 24, 31, .16);
}

.ac-card-payment-badge .card-payment-icon,
.al-card-payment-badge .card-payment-icon {
    width: 20px;
    height: 20px;
}

/* Açık artırma araç listesindeki ödeme rozeti gönderilen PNG ikonu taşır;
   ikon yuvarlağın içine sığacak kadar küçültülür. */
.auction-card-payment-icon {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}
/* Fotoğraf kuralları, rozetteki PNG'yi kapak görseli gibi tam boyuta
   genişletmesin; ikon yuvarlağın ortasında sabit durur. */
.ac-media img.auction-card-payment-icon,
.al-media__frame img.auction-card-payment-icon {
    position: static;
    inset: auto;
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    transform: none;
    transition: none;
}
.auction-card:hover .ac-media img.auction-card-payment-icon { transform: none; }

.ac-card-payment-badge__label,
.al-card-payment-badge__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ac-fav {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--shadow-card);
    transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.ac-fav .material-symbols-outlined { font-size: 20px; }
.ac-fav:hover { color: var(--brand-primary); transform: scale(1.08); }
.ac-fav.is-active { color: var(--brand-primary); }
.ac-fav.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.ac-fav:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.ac-media__top-actions .ac-fav {
    position: static;
    flex: 0 0 auto;
}

/* ── Body ──────────────────────────────────────────────────────────── */
.ac-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--space-4);
}

.ac-title {
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-title a,
.al-title a {
    color: inherit;
    text-decoration: none;
}

.ac-title a:hover,
.al-title a:hover {
    color: var(--brand-primary);
}

[data-detail-trigger] { cursor: pointer; }
[data-detail-trigger]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Reserved height keeps neighbouring cards on the same baseline when a
   vehicle has no trim name. */
.ac-sub {
    min-height: 20px;
    margin: var(--space-1) 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specs as icon + value pairs on a subtle divided band, not six boxes. */
.ac-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.ac-spec {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.ac-spec .material-symbols-outlined { flex: 0 0 auto; font-size: 17px; color: var(--text-muted); }
.ac-spec span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* Konum, araç listelerinde kesilmeden okunabilsin diye kendi satırını kullanır. */
.ac-spec--full { grid-column: 1 / -1; }
.ac-spec--full span:last-child {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Lokasyon, ızgaranın beşinci özelliği gibi okunmasın diye özelliklerden
   ayrılıp kendi ince şeridinde durur: çerçeveli ve zeminsiz kaldığı için
   altındaki dolgulu ihale bandıyla da karışmaz. */
.ac-place {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: var(--space-3) 0 var(--space-2);
    padding: 7px var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.25;
}

.ac-place .material-symbols-outlined { flex: 0 0 auto; font-size: 17px; color: var(--brand-primary); }
.ac-place__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ac-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 24px;
    margin: var(--space-3) 0;
}

.ac-loc {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    color: var(--brand-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-loc .material-symbols-outlined { flex: 0 0 auto; font-size: 17px; }

.ac-cond {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}

.ac-cond .material-symbols-outlined { font-size: 15px; }
.ac-cond--ok { background: var(--success-bg); color: var(--success); }
.ac-cond--warn { background: var(--warning-bg); color: var(--warning); }
.ac-cond--danger { background: var(--danger-bg); color: var(--danger); }

/* The auction band is separated by a surface shift, not another border. */
.ac-auction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.ac-auction__text { display: grid; gap: 2px; min-width: 0; }
.ac-auction__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }

.ac-auction__name {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-auction__price { display: grid; gap: 2px; flex: 0 0 auto; text-align: right; }
.ac-auction__price span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--text-muted); }

.ac-auction__price strong {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

/* Metin butonları kalan genişliği eşit paylaşır, ikon butonu sabit kalır:
   kartta bir ya da iki metin butonu bulunması düzeni bozmaz. */
.ac-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

.ac-actions > .ac-btn { flex: 1 1 0; min-width: 0; }
.ac-actions > .ac-btn--icon { flex: 0 0 44px; padding: 0; }

/* Açık artırma adı artık metin bandında değil, İncele'nin yanındaki bilgi
   simgesinde. Sadece tooltip/bilgi sunduğu için tıklanabilir düğme değildir. */
.ac-auction--price-only { justify-content: flex-end; }
.ac-auction-info {
    position: relative;
    display: inline-grid;
    flex: 0 0 44px;
    height: 44px;
    place-items: center;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: var(--surface);
    cursor: help;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.ac-auction-info .material-symbols-outlined { font-size: 18px; }
.ac-auction-info:hover,
.ac-auction-info:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    outline: none;
}

/* İhalenin adı: imleçle üstüne gelince ve simgeye tıklanınca (odak) açılan
   balonda. Simge kartın sağ ucunda durduğu için balon sağ kenarına
   yaslanıp sola doğru açılır, karttan taşıp kırpılmaz. */
.ac-auction-info__tip {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(240px, 68vw);
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    color: #f8fbff;
    background: #17223b;
    box-shadow: 0 12px 26px -13px rgba(12, 25, 47, .75);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px) scale(.97);
    transform-origin: bottom right;
    transition: opacity .16s ease, transform .16s ease;
}
.ac-auction-info__tip::after {
    position: absolute;
    right: 16px;
    bottom: -5px;
    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: rotate(45deg);
}
.ac-auction-info:is(:hover, :focus, :focus-within) .ac-auction-info__tip {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ac-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    height: 44px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.ac-btn .material-symbols-outlined { font-size: 18px; }
.ac-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.ac-btn--ghost { border: 1px solid var(--border-default); color: var(--text-primary); background: var(--surface-card); }
.ac-btn--ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.ac-btn--primary { background: var(--brand-primary); color: var(--text-on-brand); }
.ac-btn--primary:hover { background: var(--brand-primary-hover); box-shadow: 0 4px 14px var(--brand-glow); }
.ac-btn--muted { border: 1px solid var(--border-default); background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }
.ac-btn--icon { border: 1px solid var(--border-default); color: var(--text-secondary); background: var(--surface-card); }
.ac-btn--icon:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* ══════════════════════════════════════════════════════════════════════
   States: empty, error, notice
   ══════════════════════════════════════════════════════════════════════ */
.oa-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    /* Capped so a one-line "no results" message does not span 1300px. */
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    padding: var(--space-7) var(--space-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    text-align: center;
}

.oa-empty__icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-2);
    place-items: center;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--text-muted);
}

.oa-empty__icon .material-symbols-outlined { font-size: 28px; }
.oa-empty strong { color: var(--text-primary); font-size: var(--fs-card-title); font-weight: 700; }
.oa-empty p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--fs-body); }
.oa-empty .oa-btn { margin-top: var(--space-4); }

.oa-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.oa-notice .material-symbols-outlined { flex: 0 0 auto; font-size: 20px; }
.oa-notice--ok { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.oa-notice--warn { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); }
.oa-notice--danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════
   Content pages (blog, FAQ, contact, legal)
   ══════════════════════════════════════════════════════════════════════ */
.oa-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.oa-breadcrumb a { transition: color var(--dur-base) var(--ease); }
.oa-breadcrumb a:hover { color: var(--brand-primary); }
.oa-breadcrumb .material-symbols-outlined { font-size: 17px; opacity: .6; }
.oa-breadcrumb [aria-current] { color: var(--text-primary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   Hesap bölümü gezintisi (_AccountSectionNav)
   ----------------------------------------------------------------------
   Sayfa yolu bölümde biter (Anasayfa › Açık Artırma İşlemleri); altındaki
   şerit o bölümün bütün sayfalarını yan yana verir. Açık olan sayfa dolu
   pembe, diğerleri çerçeveli durur — kullanıcı menüyü açmadan geçiş yapar.
   Bölüm başlığı aynı adı taşıyan çekmeceyi açar.
   ══════════════════════════════════════════════════════════════════════ */
.oa-sectionnav { margin-bottom: var(--space-5); }

.oa-sectionnav__crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Sayfa kabuklarının çoğunda ".app-body a { color: inherit }" gibi kurallar
   var; şeridin renkleri bunların altında kalmasın diye seçiciler bileşen
   adıyla birlikte yazılır. */
.oa-sectionnav .oa-sectionnav__crumb > a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease); }
.oa-sectionnav .oa-sectionnav__crumb > a:hover { color: var(--brand-primary); }
.oa-sectionnav__crumb > .material-symbols-outlined { font-size: 17px; opacity: .6; }

.oa-sectionnav .oa-sectionnav__section {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    padding: 0;
    background: none;
    color: var(--brand-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease);
}

.oa-sectionnav__section .material-symbols-outlined { font-size: 18px; }
.oa-sectionnav .oa-sectionnav__section:hover { color: var(--brand-primary-hover); }
.oa-sectionnav .oa-sectionnav__section:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.oa-sectionnav__page { color: var(--text-secondary); font-weight: 700; }

/* Çekmecesi olmayan bölümlerde (kurumsal sayfalar) başlık düz metindir. */
.oa-sectionnav .oa-sectionnav__section--static { cursor: default; }
.oa-sectionnav__page { color: var(--text-primary); font-weight: 600; }

.oa-sectionnav .oa-sectionnav__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.oa-sectionnav .oa-sectionnav__tabs > li { margin: 0; padding: 0; }
.oa-sectionnav .oa-sectionnav__tabs > li::before { content: none; }

.oa-sectionnav .oa-sectionnav__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.oa-sectionnav__tab .material-symbols-outlined { font-size: 18px; color: var(--text-muted); transition: color var(--dur-base) var(--ease); }
.oa-sectionnav .oa-sectionnav__tab:hover { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand-primary); }
.oa-sectionnav .oa-sectionnav__tab:hover .material-symbols-outlined { color: var(--brand-primary); }
.oa-sectionnav .oa-sectionnav__tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.oa-sectionnav .oa-sectionnav__tab.is-active {
    border-color: transparent;
    background: var(--brand-primary);
    color: var(--text-on-brand);
    box-shadow: 0 2px 10px var(--brand-glow);
}

.oa-sectionnav .oa-sectionnav__tab.is-active .material-symbols-outlined { color: var(--text-on-brand); }

.oa-sectionnav__new {
    border-radius: var(--radius-pill);
    padding: 1px 6px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.5;
}

.oa-sectionnav__tab.is-active .oa-sectionnav__new { background: rgba(255, 255, 255, .24); }

/* Dar ekranda şerit alt satıra sarmak yerine yatay kayar; sayfanın
   tamamı yana kaymasın diye kaydırma yalnızca şeritte olur. */
@media (max-width: 760px) {
    .oa-sectionnav .oa-sectionnav__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--space-1);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .oa-sectionnav__tabs::-webkit-scrollbar { display: none; }
}

.oa-page-head { margin-bottom: var(--space-6); }
.oa-page-head .oa-h1 { margin: var(--space-2) 0 0; }
.oa-page-head .oa-sub { max-width: 62ch; }

/* Readable measure for long-form copy. */
.oa-narrow { width: min(100%, 820px); margin-inline: auto; }

.oa-card {
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

@media (min-width: 768px) { .oa-card { padding: var(--space-6); } }

/* Rich HTML coming from the CMS. */
.oa-prose { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.oa-prose > :first-child { margin-top: 0; }
.oa-prose > :last-child { margin-bottom: 0; }
.oa-prose h1, .oa-prose h2, .oa-prose h3, .oa-prose h4 {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}
.oa-prose h1 { font-size: var(--fs-page-title); }
.oa-prose h2 { font-size: var(--fs-section-title); }
.oa-prose h3 { font-size: var(--fs-card-title); }
.oa-prose h4 { font-size: var(--fs-body); }
.oa-prose p, .oa-prose ul, .oa-prose ol, .oa-prose blockquote, .oa-prose table { margin: 0 0 var(--space-4); }
.oa-prose ul, .oa-prose ol { padding-left: var(--space-5); }
.oa-prose li { margin-bottom: var(--space-2); }
.oa-prose a { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.oa-prose strong { color: var(--text-primary); font-weight: 700; }
.oa-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.oa-prose blockquote {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-subtle);
    color: var(--text-primary);
}
.oa-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.oa-prose th, .oa-prose td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); text-align: left; }
.oa-prose th { background: var(--surface-subtle); color: var(--text-primary); font-weight: 700; }
/* Wide tables scroll inside their own box instead of stretching the page. */
.oa-prose__scroll { overflow-x: auto; }

/* ── Article cards (blog index) ────────────────────────────────────── */
.oa-article-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .oa-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .oa-article-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.oa-article {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.oa-article:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* The media box is a flex item, and a flex item's automatic minimum size is
   its content's min-content height — which for a portrait photo is the full
   image height, overriding the aspect-ratio and blowing the card up. The
   `overflow: hidden` + `min-height: 0` pair is what makes the ratio bind.
   `display: block` is belt-and-braces: this element is a <span>, so it only
   blockifies while it happens to be a flex item. */
.oa-article__media {
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    background: var(--surface-sunken);
}
.oa-article__media img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
    transition: transform 500ms var(--ease);
}
.oa-article:hover .oa-article__media img { transform: scale(1.04); }
.oa-article__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--space-4); }
.oa-article__date { margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
/* Title and summary are clamped and given a reserved height so cards in a
   row end their meta line on the same baseline whatever the CMS supplies. */
.oa-article__title {
    margin: 0 0 var(--space-2);
    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;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * 1.3em);
}
.oa-article:hover .oa-article__title { color: var(--brand-primary); }
.oa-article__summary {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * var(--lh-normal) * 1em);
}
.oa-article__more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); color: var(--brand-primary); font-size: var(--fs-sm); font-weight: 600; }
.oa-article__more .material-symbols-outlined { font-size: 17px; transition: transform var(--dur-base) var(--ease); }
.oa-article:hover .oa-article__more .material-symbols-outlined { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .oa-article:hover { transform: none; }
    .oa-article__media img, .oa-article:hover .oa-article__media img { transition: none; transform: none; }
}

/* ── Forms ─────────────────────────────────────────────────────────── */
.oa-form { display: grid; gap: var(--space-4); }
.oa-form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .oa-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.oa-form__summary:empty { display: none; }
.oa-form__summary ul { margin: 0; padding-left: var(--space-5); }
.oa-form__summary { color: var(--danger); font-size: var(--fs-sm); }

.oa-field { display: grid; gap: var(--space-2); min-width: 0; }
.oa-field > label { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; }

.oa-field input,
.oa-field select,
.oa-field textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-body);
    transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.oa-field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }
.oa-field select {
    appearance: none; -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2368738a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 18px 18px;
    cursor: pointer;
}
.oa-field input::placeholder, .oa-field textarea::placeholder { color: var(--text-muted); }
.oa-field input:hover, .oa-field select:hover, .oa-field textarea:hover { border-color: var(--border-strong); }
.oa-field input:focus, .oa-field select:focus, .oa-field textarea:focus {
    outline: none;
    background: var(--surface-card);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.oa-field input.input-validation-error,
.oa-field select.input-validation-error,
.oa-field textarea.input-validation-error { border-color: var(--danger); }

.oa-field__error { color: var(--danger); font-size: var(--fs-xs); line-height: 1.4; }
.oa-field__error:empty { display: none; }

.oa-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    cursor: pointer;
}

.oa-consent input[type="checkbox"] {
    position: relative;
    width: 20px; height: 20px; flex: 0 0 20px;
    margin: 0;
    appearance: none; -webkit-appearance: none;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-card);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.oa-consent input[type="checkbox"]::after {
    position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(.4);
    opacity: 0; content: "";
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.oa-consent input[type="checkbox"]:checked { background: var(--brand-primary); border-color: var(--brand-primary); }
.oa-consent input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.oa-consent input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-glow); }

/* ── Contact list ──────────────────────────────────────────────────── */
.oa-contact-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.oa-contact-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.oa-contact-list__icon {
    display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center;
    border-radius: var(--radius-md); background: var(--navy-soft); color: var(--navy);
}
.oa-contact-list__icon .material-symbols-outlined { font-size: 20px; }
.oa-contact-list li > span:last-child { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.oa-contact-list strong { display: block; margin-bottom: 2px; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; }
.oa-contact-list a { color: var(--brand-primary); font-weight: 600; }
.oa-contact-list a:hover { text-decoration: underline; }

.oa-details { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.oa-details > summary { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.oa-details > summary::marker { color: var(--brand-primary); }
.oa-details .oa-prose { margin-top: var(--space-3); font-size: var(--fs-sm); }

/* ── Corporate contact ─────────────────────────────────────────────── */
.oa-contact-page-head { margin-bottom: var(--space-7); }

.oa-section-kicker {
    display: inline-flex;
    margin-bottom: var(--space-2);
    color: var(--brand-primary-hover);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Temsilci bölümü: sayfa zemini gri olduğu için kartlar panel içine değil
   doğrudan zemine oturur; başlıklar ince bir çizgiyle ayrılır. */
.oa-representative-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

.oa-representative-section__heading .oa-h2,
.oa-corporate-contact__heading .oa-h2 { margin: 0; }
.oa-representative-section__heading p {
    max-width: 460px;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.oa-representative-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.oa-rep-card {
    display: flex;
    flex-direction: column;
    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);
}

.oa-rep-card__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}

.oa-rep-card__photo,
.oa-rep-card__avatar {
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid var(--navy-border);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--navy);
    font-size: var(--fs-card-title);
    font-weight: 800;
    object-fit: cover;
}

.oa-rep-card__titles { min-width: 0; }
.oa-rep-card__role {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.oa-rep-card__name {
    margin: 0;
    color: var(--text-primary);
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: var(--fs-card-title);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.oa-rep-card__actions { display: grid; }

/* İletişim satırının tamamı dokunma hedefidir: mobilde telefon satırına
   dokunmak aramayı, e-posta satırına dokunmak posta uygulamasını açar.
   Bu yüzden satır yüksekliği 44px'in altına düşürülmemeli. */
.oa-contact-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 62px;
    padding: var(--space-3) var(--space-5);
    color: var(--text-primary);
    transition: background var(--dur-base) var(--ease);
}

.oa-contact-action + .oa-contact-action { border-top: 1px solid var(--border-subtle); }
a.oa-contact-action:hover { background: var(--surface-subtle); }
a.oa-contact-action:active { background: var(--navy-soft); }

.oa-contact-action__icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--navy-soft);
    color: var(--navy);
    font-size: 20px;
}

.oa-contact-action__text { min-width: 0; }
.oa-contact-action__label {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.oa-contact-action__value {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

a.oa-contact-action:hover .oa-contact-action__value { color: var(--brand-primary-hover); }
.oa-contact-action__cue { margin-left: auto; color: var(--text-muted); font-size: 20px; }

.oa-contact-action--empty .oa-contact-action__icon { background: var(--surface-sunken); color: var(--text-muted); }
.oa-contact-action--empty .oa-contact-action__value { color: var(--text-muted); font-weight: 600; }

.oa-representative-empty {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

.oa-representative-empty__icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--navy-soft);
    color: var(--navy);
}

.oa-representative-empty h3 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: var(--fs-body);
}
.oa-representative-empty p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.oa-representative-empty .oa-btn { flex: 0 0 auto; margin-left: auto; }

.oa-corporate-contact { margin-top: var(--space-7); }
.oa-corporate-contact__heading {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

.oa-department-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* Departman kartının tamamı mailto bağlantısıdır. */
.oa-department-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 84px;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.oa-department-card:hover { border-color: var(--navy-border); box-shadow: var(--shadow-hover); }
.oa-department-card:active { background: var(--surface-subtle); }

.oa-department-card__icon,
.oa-company-card__icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--navy-soft);
    color: var(--navy);
}

.oa-department-card__text { min-width: 0; }
.oa-department-card__title {
    display: block;
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.oa-department-card__value {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.oa-department-card:hover .oa-department-card__value { color: var(--brand-primary-hover); text-decoration: underline; }
.oa-department-card__cue { margin-left: auto; color: var(--text-muted); font-size: 20px; }

.oa-company-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.oa-company-card__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.oa-company-card__icon { background: var(--navy); color: var(--text-on-brand); }
.oa-company-card__text { min-width: 0; }
.oa-company-card__text h3 {
    margin: 0 0 var(--space-1);
    color: var(--text-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

.oa-company-card address {
    max-width: 48ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-style: normal;
    line-height: var(--lh-normal);
}

/* Çağrı merkezi numarası sayfanın ana eylemi: büyük, yüksek kontrastlı ve
   tel: bağlantısı olduğu için mobilde dokunulduğunda arama başlar. */
.oa-phone-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 72px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--navy);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-card);
    transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

/* site.css'teki `.app-body a` kurali (tip + sinif) tek sinifli kuraldan guclu
   oldugu icin numara lacivert zeminde koyu gorunuyordu; renk ayni kalipla
   yeniden yaziliyor. */
.app-body .oa-phone-cta { color: var(--text-on-brand); }
.oa-phone-cta:hover { background: var(--navy-hover); box-shadow: var(--shadow-hover); }
.oa-phone-cta:active { transform: translateY(1px); }

.oa-phone-cta__icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 22px;
}

.oa-phone-cta__text { min-width: 0; }
.oa-phone-cta__label {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.oa-phone-cta__number {
    display: block;
    margin-top: 2px;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.15;
    white-space: nowrap;
}

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

@media (min-width: 900px) {
    .oa-representative-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oa-phone-cta__number { font-size: 30px; }

    /* Tek temsilcide iki sütunluk ızgara yarısı boş görünüyordu: kart satırın
       tamamını kaplar, kimlik sola alınır, telefon ve e-posta sağda yan yana
       iki dokunma hedefi olur. */
    .oa-representative-grid--single { grid-template-columns: minmax(0, 1fr); }
    .oa-representative-grid--single .oa-rep-card { flex-direction: row; align-items: stretch; }
    .oa-representative-grid--single .oa-rep-card__identity {
        flex: 0 0 clamp(260px, 30%, 360px);
        border-right: 1px solid var(--border-subtle);
        border-bottom: 0;
    }
    .oa-representative-grid--single .oa-rep-card__actions {
        flex: 1 1 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .oa-representative-grid--single .oa-rep-card__identity { padding: var(--space-5); }
    .oa-representative-grid--single .oa-rep-card__photo,
    .oa-representative-grid--single .oa-rep-card__avatar { flex: 0 0 64px; width: 64px; height: 64px; }
    .oa-representative-grid--single .oa-contact-action { min-height: 76px; padding: var(--space-4) var(--space-5); }
    .oa-representative-grid--single .oa-contact-action + .oa-contact-action {
        border-top: 0;
        border-left: 1px solid var(--border-subtle);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oa-contact-action,
    .oa-department-card,
    .oa-phone-cta { transition: none; }
    .oa-phone-cta:active { transform: none; }
}

@media (max-width: 639px) {
    .oa-representative-section__heading { display: block; }
    .oa-representative-section__heading p { margin-top: var(--space-3); }
    .oa-representative-empty { align-items: flex-start; flex-wrap: wrap; padding: var(--space-4); }
    .oa-representative-empty .oa-btn { width: 100%; margin-left: 0; }
    .oa-rep-card__identity,
    .oa-contact-action,
    .oa-department-card { padding-inline: var(--space-4); }
    /* Uzun e-posta adresi dar ekranda satır ortasından bölünmesin diye bir tık küçültülüyor. */
    .oa-contact-action__value { font-size: 15px; letter-spacing: -.01em; }
    .oa-company-card { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4); }
    .oa-phone-cta { justify-content: center; width: 100%; }
    .oa-phone-cta__number { font-size: 24px; }
}

/* ── Pagination ────────────────────────────────────────────────────── */
.oa-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-6); }
.oa-pagination a, .oa-pagination button {
    display: grid; min-width: 44px; height: 44px; padding: 0 var(--space-3); place-items: center;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-card); color: var(--text-primary);
    font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.oa-pagination a:hover, .oa-pagination button:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.oa-pagination .is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   Toasts — container is created on demand by site.js
   ══════════════════════════════════════════════════════════════════════ */
.oa-toasts {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 300;
    display: grid;
    gap: var(--space-2);
    width: min(360px, calc(100vw - 32px));
}

.oa-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-raised);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    animation: oa-toast-in var(--dur-slow) var(--ease);
}

.oa-toast .material-symbols-outlined { flex: 0 0 auto; font-size: 20px; }
.oa-toast--ok { border-left-color: var(--success); }
.oa-toast--ok .material-symbols-outlined { color: var(--success); }
.oa-toast--warn { border-left-color: var(--warning); }
.oa-toast--warn .material-symbols-outlined { color: var(--warning); }
.oa-toast--danger { border-left-color: var(--danger); }
.oa-toast--danger .material-symbols-outlined { color: var(--danger); }

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

@media (prefers-reduced-motion: reduce) {
    .oa-toast { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Kart üzerindeki mini galeri (vehicle-card-gallery.js)
   ----------------------------------------------------------------------
   Detaya girmeden fotoğraf gezinmek için. Oklar masaüstünde karta gelince
   belirir, dokunmatikte sürekli görünür — parmakla kaydırma da çalışır.
   Kart medyası zaten `position: relative; overflow: hidden`, bu katman
   onun üzerine biner; kartın yerleşimini değiştirmez.
   ══════════════════════════════════════════════════════════════════════ */
.oa-cg__image--changing { opacity: .35; }
.oa-cg-legacy img { transition: transform 600ms var(--ease), opacity 180ms var(--ease); }

.oa-cg__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    color: #1d2430;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(16, 20, 28, .22);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.oa-cg__nav--previous { left: 10px; }
.oa-cg__nav--next { right: 10px; }
.oa-cg__nav svg { width: 17px; height: 17px; }
.oa-cg__nav:hover { background: #fff; }
.oa-cg__nav:focus-visible { opacity: 1; outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.oa-cg__nav:disabled { opacity: 0 !important; pointer-events: none; }

.auction-card:hover .oa-cg__nav,
.al-row:hover .oa-cg__nav,
.online-auction-card:hover .oa-cg__nav { opacity: 1; }

/* Dokunmatikte hover yok: oklar her zaman görünür. */
@media (hover: none) {
    .oa-cg__nav { opacity: 1; }
}

.oa-cg__dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 3;
    display: flex;
    gap: 5px;
    padding: 4px 7px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(20, 24, 32, .42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

.oa-cg__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: background var(--dur-base) var(--ease), width var(--dur-base) var(--ease);
}

.oa-cg__dots i.is-active { width: 14px; border-radius: 999px; background: #fff; }

/* Liste satırında alt şerit başlık ve canlı sayaçlarla dolu; noktalar
   onların üstüne binmesin diye biraz yukarı alınır. */
.al-media__frame.oa-cg-legacy .oa-cg__dots { bottom: auto; top: 12px; }

@media (prefers-reduced-motion: reduce) {
    .oa-cg-legacy img, .oa-cg__nav, .oa-cg__dots i { transition: none; }
}

/* ── İlgileniyorum bloğu ────────────────────────────────────────────
   Araç detayı ve online lot detayı aynı partial'ı kullanır; blok iki
   sayfada da aynı görünsün diye stili burada durur. */

.consumer-interest {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    width: 100%;
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.consumer-interest .online-auction-primary-button,
.consumer-interest .online-auction-secondary-button {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.consumer-interest .online-auction-primary-button {
    border: 0;
    color: var(--text-on-brand);
    background: var(--brand-primary);
}

.consumer-interest .online-auction-primary-button:hover {
    background: var(--brand-primary-hover);
    box-shadow: 0 6px 18px var(--brand-glow);
}

.consumer-interest .online-auction-secondary-button {
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    background: var(--surface-card);
}

.consumer-interest .online-auction-secondary-button:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Author-level display rules otherwise override the browser's [hidden] rule. */
.consumer-interest [hidden] {
    display: none !important;
}

.consumer-interest__installment {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}

.consumer-interest__installment:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

.consumer-interest__installment .material-symbols-outlined {
    font-size: 18px;
}

.consumer-interest-confirm__panel {
    width: min(100%, 540px);
}

.consumer-interest-confirm__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.consumer-interest-confirm__body > p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.consumer-interest-confirm__body dl,
.consumer-interest-confirm__body dd {
    margin: 0;
}

.consumer-interest-confirm__body dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.consumer-interest-confirm__body dd {
    font-weight: 800;
}

.consumer-interest-confirm__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 520px) {
    .consumer-interest-confirm__actions { grid-template-columns: 1fr; }
}

/* Pencerelerdeki sözleşme onay listesi (contract-checklist.js).
   Teminat, "Şimdi Al" ödemesi, teslimat talebi ve ikinci el detayında aynı
   görünsün diye global dosyada: online-auction.css ikinci el sayfasında
   yüklenmiyor. Satır biçimi form sayfalarındaki _ContractConsents ile aynıdır;
   metin satır içinde değil, aşağıdaki .oa-contract-dialog penceresinde açılır. */
.oa-contract-checklist {
    display: grid;
    gap: var(--space-2, 8px);
}

.oa-contract-checklist[hidden] {
    display: none;
}

.oa-contract-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.oa-contract-consent__checkbox {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 1px 0 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.oa-contract-consent__text {
    min-width: 0;
    color: var(--text-secondary, #354157);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
}

.oa-contract-consent__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-primary);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.oa-contract-consent__required {
    color: var(--brand-primary);
    font-style: normal;
    font-weight: 700;
}

/* Sözleşme metni penceresi. Teminat/ödeme pencerelerinin üstünde açıldığı için
   native <dialog>: tarayıcının üst katmanında durur, alttaki pencerenin
   yığılma bağlamından etkilenmez. */
.oa-contract-dialog {
    width: min(100% - 32px, 960px);
    max-height: min(88vh, 780px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 56px rgba(16, 24, 39, .28);
}

.oa-contract-dialog::backdrop {
    background: rgba(10, 18, 32, .58);
}

.oa-contract-dialog__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: inherit;
}

.oa-contract-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 30px 14px;
}

.oa-contract-dialog__head h2 {
    margin: 0;
    color: #101827;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.oa-contract-dialog__close {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-primary);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.oa-contract-dialog__body {
    overflow-y: auto;
    padding: 6px 30px 18px;
    color: #354157;
    font-size: 13.5px;
    line-height: 1.6;
}

.oa-contract-dialog__body h1,
.oa-contract-dialog__body h2,
.oa-contract-dialog__body h3,
.oa-contract-dialog__body h4 {
    margin: 18px 0 6px;
    color: #101827;
    font-size: 15px;
}

.oa-contract-dialog__body p { margin: 0 0 10px; }

.oa-contract-dialog__body table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
}

.oa-contract-dialog__body td,
.oa-contract-dialog__body th {
    border: 1px solid #e2e6ed;
    padding: 7px;
}

/* Düğme her zaman sağda kalır: ipucu gizlendiğinde sola kaymaması için
   hizalama flex-end, boşluğu ipucunun kendisi (margin-right: auto) açar. */
.oa-contract-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 30px 26px;
    border-top: 1px solid #eef0f4;
}

.oa-contract-dialog__hint {
    margin-right: auto;
    color: #d97706;
    font-size: 12.5px;
}

.oa-contract-dialog__hint[hidden] { display: none; }

.oa-contract-dialog__accept {
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .16s ease, background .16s ease;
}

.oa-contract-dialog__accept:hover:not(:disabled) {
    background: var(--brand-primary-hover, var(--brand-primary));
}

.oa-contract-dialog__accept:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .oa-contract-dialog__head { padding: 20px 18px 12px; }
    .oa-contract-dialog__body { padding: 4px 18px 14px; }
    .oa-contract-dialog__foot { padding: 14px 18px 20px; }
}

/* Zorunlu sözleşme onaylanmadan pasif kalan teminat butonları. */
.online-auction-provision-modal .online-auction-primary-button:disabled,
.consumer-interest-confirm__actions .online-auction-primary-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}