/* Layout: night top bar + aurora hero band. Two pages: "Kendini anlat" (#anlat: hero, full-width wizard with a sticky foot, best-sellers) and "İlanlar" (#ilanlar: answer chips, toolbar, cards 1/2/3-up). Listing detail slides in from the right; compare and sell views replace the page */
:root {
  --bg: #F1F6F3;
  --surface: #FAFCFB;
  --ink: #10231D;
  --muted: #4A5E56;
  --line: #D5E1DB;
  --primary: #1E6B52;
  --on-primary: #F4FBF7;
  --accent: #9E6010;
  --chip: #E3EDE8;
  --error: #B3261E;
  --mark-outer: #1E6B52;
  --mark-inner: #9E6010;
  --yl-ev: #1E6B52; --yl-cizgi: url(#yl-aurora-acik);
  --scrim: rgba(14, 24, 27, .55);
  --shadow: 0 12px 32px rgba(16, 35, 29, .14);

  /* night tokens: identical in both themes (top bar, hero, listing media) */
  --n-bg: #0E181B; --n-surface: #16242A; --n-ink: #E6F0EB; --n-muted: #9DB2A9;
  --n-mint: #86D0AE; --n-amber: #F2B45A; --n-line: #263A40;
  --n-cizgi: url(#yl-aurora-koyu);

  /* alan kenarlığı: yüzeye karşı en az 3:1 (açık 3,3:1, koyu 4,0:1) */
  --field: color-mix(in srgb, var(--muted) 62%, var(--line));
  --hover: color-mix(in srgb, var(--primary) 8%, transparent);

  --display: "Bricolage Grotesque", "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: .875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.2rem; --step-4: clamp(2.6rem, 6vw, 4.2rem);

  --stat: clamp(1.35rem, 1.05rem + 1.2vw, 1.6rem); /* bilgi şeridi rakamı; şerit dışındaki .menzil de aynı boyu alır */
  --bar-h: 0px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E181B; --surface: #16242A; --ink: #E6F0EB; --muted: #9DB2A9; --line: #263A40;
    --primary: #86D0AE; --on-primary: #0B2A1F; --accent: #F2B45A; --chip: #1D2F35; --error: #F2A39C;
    --mark-outer: #E6F0EB; --mark-inner: #F2B45A; --shadow: 0 12px 32px rgba(0, 0, 0, .4);
    --yl-ev: #86D0AE; --yl-cizgi: url(#yl-aurora-koyu);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E181B; --surface: #16242A; --ink: #E6F0EB; --muted: #9DB2A9; --line: #263A40;
  --primary: #86D0AE; --on-primary: #0B2A1F; --accent: #F2B45A; --chip: #1D2F35; --error: #F2A39C;
  --mark-outer: #E6F0EB; --mark-inner: #F2B45A; --shadow: 0 12px 32px rgba(0, 0, 0, .4);
    --yl-ev: #86D0AE; --yl-cizgi: url(#yl-aurora-koyu);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.kilit { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
#app { padding-bottom: var(--bar-h); min-height: 100vh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
h1 { font-size: var(--step-4); font-weight: 600; font-variation-settings: "opsz" 96; }
h2 { font-size: var(--step-3); font-weight: 650; font-variation-settings: "opsz" 64; }
h3 { font-size: var(--step-1); font-weight: 600; font-variation-settings: "opsz" 24; }
p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1.4; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; }
.anywhere { overflow-wrap: anywhere; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.skip:focus { top: 12px; }

/* ---------- prototype strip + top bar ---------- */
.proto-strip { background: var(--chip); color: var(--muted); font-size: var(--step--1); text-align: center; line-height: 1.45; }
.proto-strip .wrap { padding-block: 6px; }
.topbar {
  background: var(--n-bg); color: var(--n-ink); border-bottom: 1px solid var(--n-line);
  --mark-outer: var(--n-ink); --mark-inner: var(--n-amber);
  --yl-ev: var(--n-mint); --yl-cizgi: var(--n-cizgi);
}
.topbar .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo-link { display: inline-flex; padding: 12px 8px; margin-left: -8px; color: var(--n-ink); border-radius: 8px; flex: none; }
.logo-link svg { width: 116px; height: auto; display: block; }
.nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav a, .theme-btn {
  color: var(--n-ink); text-decoration: none; font-weight: 500; font-size: var(--step--1);
  min-height: 40px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.nav a:hover { background: var(--n-surface); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--n-mint); border-radius: 0; }
.nav .nav-ilanver { border: 1px solid var(--n-mint); color: var(--n-mint); }
.nav .nav-ilanver[aria-current="page"] { background: var(--n-mint); color: var(--n-bg); box-shadow: none; border-radius: 999px; }
.nav .cnt { background: var(--n-mint); color: var(--n-bg); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.nav .cmp-ic { display: none; width: 20px; height: 20px; }
.nav-n { color: var(--n-muted); font-weight: 500; }
.nav a[aria-current="page"] .nav-n { color: inherit; }
/* dar ekranda "Kendini anlat | İlanlar | Rehber" üst çubuğun altında eşit sekmeler olur (üç sütun: Rehber bölümünde); geniş ekranda üst menüde durur */
.sekmeler { display: none; border-top: 1px solid var(--n-line); }
.sekmeler .wrap { display: grid; grid-template-columns: 1fr 1fr; }
.sekme { color: var(--n-ink); text-decoration: none; font-weight: 600; font-size: var(--step--1); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.sekme[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--n-mint); color: var(--n-mint); }
.sekme[aria-current="page"] .nav-n { color: inherit; }
.sekme:hover { background: var(--n-surface); }
.sekme:focus-visible { outline-offset: -3px; }
.theme-btn { background: none; border: 0; width: 44px; padding: 0; justify-content: center; cursor: pointer; }
.theme-btn:hover { background: var(--n-surface); }
.theme-btn svg { width: 20px; height: 20px; display: block; }
#tema-ikon { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767px) {
  .topbar .wrap { height: 56px; }
  .logo-link svg { width: 104px; }
  .nav .nav-sayfa { display: none; }
  .sekmeler { display: block; }
  .nav a { padding: 0 10px; }
}
@media (max-width: 400px) {
  .logo-link svg { width: 96px; }
  .nav { gap: 2px; }
  .nav a { padding: 0 8px; }
  .theme-btn { width: 44px; }
}
@media (max-width: 359px) {
  .logo-link svg { width: 88px; }
  .nav .nav-karsilastir .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav .cmp-ic { display: block; }
  .nav a { gap: 4px; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--n-bg); color: var(--n-ink); }
.hero .wrap { position: relative; padding-block: 56px 48px; display: grid; gap: 16px; justify-items: start; }
.aurora { position: absolute; inset: 0; pointer-events: none; }
.aurora span { position: absolute; left: -10%; width: 120%; height: 34%; border-radius: 50%; filter: blur(48px); animation: drift 22s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { top: 6%; background: var(--n-mint); opacity: .22; transform: rotate(-4deg); }
.aurora span:nth-child(2) { top: 26%; background: var(--n-amber); opacity: .12; transform: rotate(3deg); animation-duration: 28s; }
.aurora span:nth-child(3) { top: 48%; background: var(--n-mint); opacity: .10; transform: rotate(-2deg); animation-duration: 34s; }
@keyframes drift { from { translate: -4% 0; } to { translate: 4% 6px; } }
.hero .eyebrow { color: var(--n-muted); text-wrap: balance; }
.hero h1 { max-width: 22ch; }
.hero h1:focus { outline: none; }
.hero h1 b { color: var(--n-mint); font-weight: 760; font-size: 1.1em; }
.hero h1 .evq { font-weight: 400; opacity: 0.55; }
.hero .lede { color: var(--n-muted); font-size: var(--step-1); max-width: 56ch; line-height: 1.5; }
.trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--step--1); color: var(--n-muted); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { width: 14px; height: 14px; color: var(--n-mint); }
@media (max-width: 767px) {
  .hero .wrap { padding-block: 32px 28px; gap: 12px; }
  .hero .lede { font-size: 1.0625rem; }
  .trust { flex-direction: column; gap: 4px; }
  .aurora span:nth-child(1) { opacity: .154; }
  .aurora span:nth-child(2) { opacity: .084; }
  .aurora span:nth-child(3) { opacity: .07; }
}

/* ---------- workspace ---------- */
.ara-main .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; padding-block: 0 56px; }

/* ---------- wizard ---------- */
.wizard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px 0; position: relative; z-index: 1; min-width: 0; }
@media (min-width: 768px) { .wizard { margin-top: -24px; } }
@media (max-width: 767px) { .wizard { padding: 16px 16px 0; margin-top: 16px; } }
.wiz-head { display: grid; gap: 4px; }
.wiz-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.wiz-head h2 { font-size: var(--step-2); font-variation-settings: "opsz" 40; }
.wiz-head p { color: var(--muted); font-size: var(--step--1); max-width: 72ch; }
.qs { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
@media (min-width: 768px) {
  .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs > .q:last-child, .qs > .q-tam { grid-column: 1 / -1; }
}
.q { border: 0; border-top: 1px solid var(--line); margin: 16px 0 0; padding: 16px 0 0; min-width: 0; }
.q > legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; }
.q-lg { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; }
.q-text { font-weight: 600; font-size: var(--step-0); line-height: 1.35; }
.q-val { color: var(--primary); font-weight: 600; font-size: var(--step--1); white-space: nowrap; }
.q-body { clear: both; display: grid; gap: 10px; }
.q-note { color: var(--muted); font-size: var(--step--1); margin-top: -4px; }
.help { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.help:empty { display: none; }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; --pct: 50%; border-radius: 6px; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--primary) 0 var(--pct), var(--line) var(--pct) 100%); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--primary) 0 var(--pct), var(--line) var(--pct) 100%); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: var(--shadow); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: var(--shadow); }
.range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.range-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--step--1); margin-top: -6px; }
.butce-row { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 14px; align-items: center; }
@media (max-width: 379px) { .butce-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .butce-row .affix { max-width: 180px; } }

.inp, .sel, .ta {
  width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--field); background: var(--surface); color: var(--ink);
}
.ta { padding: 10px 12px; line-height: 1.55; resize: vertical; min-height: 120px; }
.sel { padding-right: 32px; cursor: pointer; }
.inp:focus-visible, .sel:focus-visible, .ta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inp::placeholder, .ta::placeholder { color: var(--muted); opacity: 1; }
.affix { position: relative; display: block; }
.affix .inp { padding-right: 44px; }
.affix.pre .inp { padding-right: 12px; padding-left: 34px; }
.affix > span { position: absolute; top: 50%; transform: translateY(-50%); right: 12px; color: var(--muted); font-size: var(--step--1); pointer-events: none; }
.affix.pre > span { right: auto; left: 13px; }

.stepper { display: inline-flex; align-items: center; gap: 8px; }
.step-btn { width: 44px; height: 44px; border-radius: 999px; background: var(--chip); border: 1px solid var(--field); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.step-btn:hover:not(:disabled) { border-color: var(--line); }
.step-btn:disabled { opacity: .5; cursor: not-allowed; }
.step-btn svg { width: 20px; height: 20px; }
.stepper .inp { width: 56px; text-align: center; padding: 0 4px; -moz-appearance: textfield; font-weight: 600; }
.stepper .inp::-webkit-outer-spin-button, .stepper .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* sihirbazın alt satırı ekranın altına yapışır: cevaplar değiştikçe uyan ilan sayısı hep görünür */
.wiz-foot {
  position: sticky; bottom: var(--bar-h); z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin: 16px -24px 0; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-radius: 0 0 14px 14px;
}
@media (max-width: 767px) { .wiz-foot { margin-inline: -16px; padding-inline: 16px; } }
.wiz-say { color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.wiz-say b { color: var(--ink); }
.wiz-foot .btn { margin-left: auto; }
/* telefonda tek satıra sığsın */
@media (max-width: 479px) { .wiz-say .ws-uzun { display: none; } .wiz-foot { gap: 8px 12px; } .wiz-foot .btn { padding-inline: 16px; } }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); line-height: 1.4;
  padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; min-width: 0;
}
.chip > svg { width: 14px; height: 14px; }
.chip-sec { background: var(--chip); color: var(--ink); cursor: pointer; min-height: 36px; text-align: left; border-color: var(--field); }
.chip-sec[aria-checked="true"] { border-color: var(--primary); }
.chip-sec:hover { border-color: var(--line); }
.chip-sec .chk { display: none; }
.chip-sec[aria-checked="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.chip-sec[aria-checked="true"] .chk { display: block; }
.chip-sec .chip-txt { display: grid; }
.chip-sec small { font-size: .75rem; color: var(--muted); font-weight: 500; }
.chip-sec[aria-checked="true"] small { color: var(--on-primary); }
/* tarz sorusu: en fazla iki seçim; dolunca diğerleri pasif görünür ama odaklanabilir kalır */
.chip-sec[aria-disabled="true"] { opacity: .55; cursor: not-allowed; border-style: dashed; }
.chip-sec[aria-disabled="true"]:hover { border-color: var(--field); }
.chip-ozet { background: var(--surface); border-color: var(--line); color: var(--ink); cursor: pointer; min-height: 34px; }
.chip-ozet:hover { border-color: var(--primary); }
.chip-ozet svg { color: var(--muted); }
.chip-neden { background: var(--chip); color: var(--ink); }
.chip-neden svg { color: var(--primary); }
.chip-dikkat { background: transparent; border-color: var(--accent); color: var(--ink); }
.chip-dikkat svg { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px;
  border-radius: 999px; border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 88%, var(--ink)); }
.btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); }
.btn-secondary[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--step--1); }
.btn-text { background: none; border: 0; padding: 4px 0; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.btn-text:hover { text-decoration-thickness: 2px; }
.btn:disabled, .btn-text:disabled { opacity: .5; cursor: not-allowed; }
.btn-press .chk { display: none; }
.btn-press[aria-pressed="true"] .chk { display: inline-block; }
.why { color: var(--muted); font-size: var(--step--1); }

/* ---------- results ---------- */
.ilanlar-main .wrap { padding-block: 24px 56px; }
.results { min-width: 0; display: grid; gap: 24px; align-content: start; }
.res-head { display: grid; gap: 6px; scroll-margin-top: calc(16px + env(safe-area-inset-top, 0px)); }
.res-head h1 { font-size: var(--step-3); font-weight: 650; font-variation-settings: "opsz" 64; }
/* İlanlar sayfasının başı: cevapların küçük chip'ler halinde, yanında Kendini anlat sayfasına dönüş */
.cevaplar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cevaplar .ozet { min-width: 0; }
.cevap-duzenle { font-size: var(--step--1); white-space: nowrap; margin-top: 2px; }
@media (max-width: 599px) { .cevaplar { grid-template-columns: minmax(0, 1fr); } .cevap-duzenle { justify-self: start; margin-top: 0; } }
.cevap-duzenle svg { width: 14px; height: 14px; }
.res-head .sub { color: var(--muted); max-width: 62ch; }
.hepsi { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 10px 10px 0; }
.hepsi svg { width: 16px; height: 16px; color: var(--primary); margin-top: 5px; }
.hepsi span { max-width: 62ch; }
.ozet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ozet-label { color: var(--muted); font-size: var(--step--1); font-weight: 600; margin-right: 2px; }
.toolbar { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.tb-grp { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.toolbar-label { color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--field); border-radius: 999px; padding: 3px; background: var(--surface); gap: 2px; }
.seg button { border: 0; background: none; padding: 0 14px; min-height: 34px; border-radius: 999px; font-size: var(--step--1); color: var(--ink); cursor: pointer; font-weight: 500; }
.seg button:hover { background: var(--hover); }
.seg button[aria-checked="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.seg-n { margin-left: 6px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.seg button[aria-checked="true"] .seg-n { color: inherit; }
.sort-select { display: none; max-width: 220px; }
@media (max-width: 767px) { .seg { display: none; } .seg.seg-durum { display: inline-flex; } .sort-select { display: block; } }
.az { background: var(--chip); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.az .row { display: flex; flex-wrap: wrap; gap: 8px; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.list > li { min-width: 0; display: flex; }

/* ---------- card ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; width: 100%; min-width: 0; transition: border-color .15s; }
@media (pointer: fine) { .card:hover { border-color: var(--primary); } }
.card.is-cmp { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.media { position: relative; aspect-ratio: 16 / 7; max-width: 100%; background: var(--n-surface); color: var(--n-muted); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.media-img { width: 100%; height: 100%; display: grid; place-items: center; }
/* temsili fotoğraf (Wikimedia Commons): 16:7 kırpılmış, kutuyu doldurur; rozetler üstünde kalır */
.media.media-foto { display: block; }
.media img.foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-atif { color: var(--muted); font-size: .75rem; line-height: 1.45; margin-top: -4px; }
.media .car { width: 66%; max-width: 340px; height: auto; }
/* silüet: dolu gövde gece gri tonunda; camlar ve tekerlek yuvaları medya zemini renginde oyuk */
.car .bd, .car .wh { fill: var(--n-muted); }
.car .cam, .car .ark, .car .gob { fill: var(--n-surface); }
.badge-ex { position: absolute; top: 12px; left: 12px; background: var(--n-bg); color: var(--n-ink); border: 1px solid var(--n-line); border-radius: 999px; padding: 2px 10px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.badge-match { background: var(--primary); color: var(--on-primary); font-family: var(--display); font-weight: 650; font-size: var(--step--1); padding: 4px 12px; border-radius: 999px; line-height: 1.3; white-space: nowrap; }
.media > .badge-match-pos, .media > .badge-match { position: absolute; top: 12px; right: 12px; }
.badge-match-pos { display: flex; }
.media .badge-match { box-shadow: 0 0 0 1px var(--n-line); }
.badge-cmp { position: absolute; right: 12px; bottom: 10px; background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.badge-cmp svg { width: 12px; height: 12px; }
/* sıfır araç: sade nane rozet, medya alanının sol altında (sağ alt karşılaştırma rozetine ait) */
.badge-sifir { position: absolute; left: 12px; bottom: 10px; background: var(--n-mint); color: var(--n-bg); border-radius: 999px; padding: 2px 10px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; line-height: 1.6; }
/* phones: a slightly taller frame and smaller car so the roofline clears the match badge and the wheels clear the compare pill */
@media (max-width: 479px) {
  .card .media .car { width: 60%; }
}
/* kart gövdesi (melez): başlık | fiyat, altında bilgi şeridi, onay listesi, eylemler; 8 px ritmi, 16 px blok aralığı */
.cbody { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.c-top { display: grid; gap: 4px; }
.c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 12px; flex-wrap: wrap; }
.c-title { font-family: var(--display); font-size: 1.2rem; font-weight: 620; font-variation-settings: "opsz" 24; line-height: 1.15; letter-spacing: -.01em; margin: 0; flex: 1 1 auto; min-width: 0; }
.c-title a { color: var(--ink); text-decoration: none; }
.c-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-trim { color: var(--muted); font-size: var(--step--1); }
.c-sub { color: var(--muted); font-size: var(--step--1); line-height: 1.45; margin-top: -10px; }
.c-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; } /* ilan ver önizlemesi */
.c-meta { color: var(--muted); font-size: var(--step--1); }
.c-price { font-family: var(--display); font-size: 1.125rem; font-weight: 650; font-variation-settings: "opsz" 24; white-space: nowrap; flex: none; margin-left: auto; }
.c-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* bilgi şeridi: Uyum | Batarya | Kış menzili, büyük rakam + küçük etiket, ince ayraç; çit şeridin altında tam genişlikte.
   .fence display:contents ile .read 2. hücre, .posts-wrap 2. satır olur (DOM ve ARIA aynı kalır). */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 0; align-items: start; }
.stats > .stat, .stats > .fence > .read, .stats > .menzil { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; padding: 0 10px; }
.stats > .stat-uyum { grid-column: 1; grid-row: 1; padding-left: 0; }
.stats > .fence { display: contents; }
.stats > .fence > .read { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
.stats > .menzil { grid-column: 3; grid-row: 1; border-left: 1px solid var(--line); padding-right: 0; }
.stats > .fence > .posts-wrap { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
/* detay başlığı: aynı şerit, kazıksız (büyük çit hemen altındaki Batarya bölümünde) */
.stats > .stat-bat { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
.d-stats { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-v, .stats .read b, .menzil b { font-family: var(--display); font-size: var(--stat); font-weight: 650; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 40; color: var(--ink); white-space: nowrap; }
.stats .badge-match { background: none; color: var(--ink); padding: 0; border-radius: 0; box-shadow: none; display: block; }
.stat-l, .stats .read .lbl, .menzil small, .menzil .yaz { color: var(--muted); font-size: .75rem; line-height: 1.35; font-weight: 500; }
.stats .read .lbl { display: inline; }
.stats .read .lbl .sep { display: none; }
.stats .read .lbl .kay, .stat-bat .kay { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.stat-bat .ok svg { width: 12px; height: 12px; }
.stats .read .ok svg { width: 12px; height: 12px; vertical-align: -1px; }
.stats .read .btn-text { font-size: .8125rem; min-height: 24px; display: flex; }
/* 320 px: hücreler ~73px; küçük ikonlar kelimeyi alt satıra itmesin (ikonlar aria-hidden, anlam metinde) */
@media (max-width: 359px) {
  .stats { --stat: 1.2rem; }
  .stats > .stat, .stats > .fence > .read, .stats > .menzil { padding: 0 6px; }
  .stats .ok svg, .stats .menzil svg { display: none; }
}

/* nedenler: pul yerine sıkı onay listesi (14 px); dikkat satırı kehribar ikonla */
.chips.nedenler { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nedenler > li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--step--1); line-height: 1.4; color: var(--ink); background: none; border: 0; min-width: 0; }
.nedenler > li > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.nedenler .chip-neden svg { color: var(--primary); }
.nedenler .chip-dikkat svg { color: var(--accent); }

/* ---------- health fence (signature): 10 direk, her direk %10; ince direkler, yuvarlak tepe, belirgin ray; değer hep rakam + etiket ---------- */
/* ray: direklerin üstünden geçen zemin renginde bir yarık; aralıklarla birleşip kesintisiz tek çizgi okunur, iki temada da belirgin */
.fence { display: grid; gap: 8px; min-width: 0; --ray: var(--surface); }
.k-yok { --ray: var(--field); }
.posts { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; height: 30px; align-items: end; padding-top: 4px; --rail: 11px; }
.posts::before { content: ""; position: absolute; left: 0; right: 0; top: var(--rail); height: 3px; background: var(--ray); z-index: 1; pointer-events: none; }
.p { position: relative; height: 26px; border-radius: 5px 5px 2px 2px; background: var(--chip); overflow: hidden; box-shadow: inset 0 0 0 1px var(--field); }
.p i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--primary); }
.k-satici .p, .k-bekliyor .p { box-shadow: inset 0 0 0 1px var(--primary); }
.k-satici .p i, .k-bekliyor .p i { background: repeating-linear-gradient(135deg, var(--primary) 0 3px, transparent 3px 6px); }
.k-yok .p { background: transparent; border: 1.5px dashed var(--muted); box-shadow: none; }
.sz-detay .posts { height: 64px; padding-top: 16px; --rail: 25px; }
.sz-detay .p { height: 48px; border-radius: 7px 7px 2px 2px; }
.sz-cmp .posts { height: 26px; gap: 3px; padding-top: 2px; --rail: 8px; }
.sz-cmp .p { height: 22px; border-radius: 4px 4px 1px 1px; }
.ort-mark { position: absolute; top: 2px; width: 14px; height: 9px; transform: translateX(-50%); color: var(--accent); z-index: 2; }
.read { display: flex; gap: 2px 10px; align-items: baseline; flex-wrap: wrap; }
.read b { font-family: var(--display); font-size: 1.75rem; font-weight: 700; font-variation-settings: "opsz" 32; line-height: 1; letter-spacing: -.02em; }
.read .lbl { color: var(--muted); font-size: var(--step--1); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.read .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; }
.read .ok svg { width: 14px; height: 14px; color: var(--primary); }
.read .btn-text { font-size: var(--step--1); min-height: 28px; padding: 0; }
.ort-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--step--1); }
.ort-lbl svg { width: 12px; height: 8px; color: var(--accent); }
.sz-cmp .read b { font-size: var(--step-0); font-weight: 650; }
/* tek mikro etkileşim: ihtiyaç değişip liste yeniden çizilince direkler raydan yükselir (240 ms, direk başına 30 ms) */
.yukselt .p { transform-origin: 50% 7px; animation: direk-yuksel .24s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes direk-yuksel { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- range (bilgi şeridi hücresi: kış büyük, yaz küçük) ---------- */
.menzil { display: grid; gap: 2px; min-width: 0; align-content: start; }
.menzil small { display: flex; gap: 0 4px; align-items: center; flex-wrap: wrap; }
.menzil small svg, .menzil .yaz svg { width: 12px; height: 12px; }
.menzil .yaz { display: inline-flex; gap: 4px; align-items: center; }
.menzil .tah { color: var(--muted); font-size: .75rem; flex-basis: 100%; }
.menzil-yok { color: var(--muted); font-size: var(--step--1); }

/* ---------- empty state ---------- */
.empty { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.empty .fence { width: 100%; max-width: 240px; }
.empty p { max-width: 52ch; color: var(--muted); }
.empty .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 767px) { .empty { padding: 24px 16px; } }

/* ---------- bottom bar ---------- */
.bbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 12px var(--gut-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gut-l);
}
.bbar-in { max-width: 1208px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.bbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.bbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.minis { display: flex; gap: 6px; }
.mini { width: 40px; height: 26px; border-radius: 6px; background: var(--n-surface); color: var(--n-muted); display: grid; place-items: center; }
.mini svg { width: 34px; height: auto; }
@media (max-width: 400px) {
  .bbar-in { flex-wrap: nowrap; gap: 10px; }
  .bbar-left { font-size: var(--step--1); }
  .bbar .btn { padding: 0 14px; }
  .bbar-right { gap: 8px; flex-wrap: nowrap; }
  .bbar .why { display: none; }
  .bbar-left > span:last-child { white-space: nowrap; }
  .minis { gap: 4px; }
  .mini { width: 30px; height: 22px; }
  .mini svg { width: 26px; }
}
@media (max-width: 359px) { .minis { display: none; } }

/* ---------- toast + live ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + 12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); border-radius: 10px; padding: 10px 16px; z-index: 90; font-size: var(--step--1); font-weight: 500;
  width: max-content; max-width: min(480px, calc(100vw - 32px)); box-shadow: var(--shadow);
}
.toast:empty { display: none; }
#app.detay-acik-mobil .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---------- popover / sheet ---------- */
.pop-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 59; display: none; }
.pop {
  position: absolute; z-index: 60; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line);
  border-radius: 14px; width: min(320px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 12px;
}
.pop h2 { font-size: var(--step-1); font-variation-settings: "opsz" 24; font-weight: 600; }
.pop .pop-foot { display: flex; justify-content: flex-end; }
@media (max-width: 767px) {
  .pop-scrim { display: block; }
  .pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 14px 14px 0 0; max-height: 85vh; overflow: auto;
    padding: 20px var(--gut-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gut-l); }
}

/* ---------- confirm dialog ---------- */
.dlg-root { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; }
.dlg-root .scrim { position: absolute; inset: 0; background: var(--scrim); }
.dlg { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 20px; max-width: 420px; width: 100%; display: grid; gap: 16px; }
.dlg p { font-weight: 600; }
.dlg .row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- detail panel ---------- */
.detail-root { position: fixed; inset: 0; z-index: 50; }
.detail-root .scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .22s; }
.detail-root.acik .scrim { opacity: 1; }
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 92vw); background: var(--bg); box-shadow: var(--shadow);
  overflow: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .22s ease-out;
  padding-right: env(safe-area-inset-right, 0px);
}
.detail-root.acik .panel { transform: none; }
.d-top {
  position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px 24px; min-height: 56px;
}
.d-top .d-back { display: none; }
.d-top .d-ttl { flex: 1; min-width: 0; font-weight: 600; font-size: var(--step--1); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--chip); }
.icon-btn svg { width: 20px; height: 20px; }
.d-body { padding: 0 24px 40px; }
.d-sec { padding-block: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; min-width: 0; }
.d-sec:first-child { border-top: 0; padding-top: 20px; }
.d-sec > h3 { scroll-margin-top: 72px; }
.d-head .media { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.d-head { gap: 16px; }
.d-head h2 { font-size: var(--step-2); font-variation-settings: "opsz" 40; flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.d-head .c-head { gap: 4px 16px; }
.d-head .c-price { font-size: 1.35rem; font-variation-settings: "opsz" 40; }
.d-head .c-meta { margin-top: -4px; }
/* detay başlığında nedenler ve dikkat satırları karttaki gibi liste olarak */
.d-head .chips { display: grid; gap: 6px; }
.d-head .chip { background: none; border: 0; padding: 0; border-radius: 0; gap: 8px; align-items: flex-start; line-height: 1.4; }
.d-head .chip > svg { width: 16px; height: 16px; margin-top: 2px; }
.d-head .chip-dikkat { font-weight: 600; }
.h-sub { font-family: var(--body); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; margin-top: 6px; }
.info { background: var(--chip); border-radius: 14px; padding: 14px; display: flex; gap: 10px; align-items: flex-start; }
.info svg { width: 16px; height: 16px; color: var(--muted); margin-top: 5px; } /* kehribar yalnız dikkat satırı ve ortalama işareti */
.bilmen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bilmen li { display: grid; gap: 6px; justify-items: start; }
.bilmen p { color: var(--muted); font-size: var(--step--1); max-width: 62ch; }
.d-sec > p, .info p { max-width: 62ch; }
.d-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.d-fence-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
@media (max-width: 359px) {
  .d-fence-row { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
  .d-fence-row .src { justify-self: start; }
}
.src { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.src svg { width: 14px; height: 14px; }
.src-dogrulandi, .src-sifir { background: var(--primary); color: var(--on-primary); }
.src-satici { border: 1px solid var(--primary); color: var(--ink); }
.src-satici .sq { width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--primary); background: repeating-linear-gradient(135deg, var(--primary) 0 2px, transparent 2px 4px); }
.src-yok { border: 1px dashed var(--muted); color: var(--muted); }
.lead-strong { font-weight: 600; font-size: var(--step-1); font-family: var(--display); font-variation-settings: "opsz" 24; line-height: 1.3; }
.dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; margin: 0; }
@media (min-width: 480px) { .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl > div { display: grid; gap: 2px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.dl dt { color: var(--muted); font-size: var(--step--1); }
.dl dd { margin: 0; font-weight: 600; }
.dl dd small { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--1); }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; gap: 4px; }
.bar-row span { font-size: var(--step--1); }
.bar-row .tr { height: 8px; border-radius: 4px; background: var(--chip); position: relative; overflow: hidden; }
.bar-row .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.bar-row.me .tr i { background: var(--primary); }
.bar-row.avg .tr i { background: var(--muted); }
.bar-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.foot { color: var(--muted); font-size: var(--step--1); }
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 479px) { .grid4 { grid-template-columns: minmax(0, 1fr); } }
.cell { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; background: var(--surface); min-width: 0; }
.cell .k { color: var(--muted); font-size: var(--step--1); display: flex; gap: 6px; align-items: center; }
.cell .k svg { width: 14px; height: 14px; }
.cell .v { font-family: var(--display); font-size: var(--step-1); font-weight: 620; line-height: 1.25; }
.cell .d { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.ritim { display: grid; gap: 6px; }
.ritim-h { font-weight: 600; font-size: var(--step--1); }
.days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.days span { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--chip); display: grid; place-items: center; color: var(--on-primary); }
.days span.on { background: var(--primary); }
.days svg { width: 12px; height: 12px; }
.days-n { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; color: var(--muted); font-size: .75rem; text-align: center; }
.dc-big { font-family: var(--display); font-size: var(--step-2); font-weight: 650; line-height: 1.15; }
.tech { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tech th, .tech td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tech th { font-weight: 500; color: var(--muted); width: 48%; padding-right: 12px; }
.tech td { font-weight: 600; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.yaz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tag-chip { background: var(--chip); color: var(--ink); font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; letter-spacing: .02em; }
.ta-draft { min-height: 210px; }
.copy-err { color: var(--error); font-size: var(--step--1); }
.d-bottom { display: none; }

@media (max-width: 767px) {
  .panel { width: 100%; padding-left: env(safe-area-inset-left, 0px); }
  .d-top { padding: calc(6px + env(safe-area-inset-top, 0px)) var(--gut-r) 6px 8px; gap: 4px; }
  .d-top .d-back { display: inline-flex; }
  .d-top .d-close { display: none; }
  .d-top .d-ttl { color: var(--ink); font-size: var(--step-0); }
  .d-body { padding: 0 16px 24px; }
  .d-head .d-actions { display: none; }
  .d-bottom {
    display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 3; background: var(--surface); border-top: 1px solid var(--line);
    padding: 12px var(--gut-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gut-l);
  }
  .d-bottom .btn { flex: 1; }
}
.d-back { gap: 2px; align-items: center; background: none; border: 0; color: var(--primary); font-weight: 600; min-height: 44px; padding: 0 8px; border-radius: 999px; cursor: pointer; flex: none; }
.d-back svg { width: 20px; height: 20px; }

/* centered message card (404 / missing listing) */
.msg-wrap { display: grid; place-items: center; padding-block: 64px 96px; }
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; max-width: 520px; width: 100%; display: grid; gap: 14px; justify-items: start; position: relative; }
.msg h1 { font-size: var(--step-3); font-variation-settings: "opsz" 64; }
.msg p { color: var(--muted); }
.detail-root .msg-wrap { position: absolute; inset: 0; padding: 16px; }
.detail-root .msg { box-shadow: var(--shadow); }

/* ---------- compare ---------- */
.view-head { display: grid; gap: 10px; padding-block: 28px 20px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; justify-self: start; min-height: 40px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link svg { width: 20px; height: 20px; }
.view-head h1 { font-size: var(--step-3); font-variation-settings: "opsz" 64; }
.cmp-headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; cursor: pointer; font-weight: 600; color: var(--ink); min-height: 44px; }
.switch .tr { width: 42px; height: 24px; border-radius: 999px; background: var(--field); position: relative; transition: background .15s; flex: none; } /* zemine karşı açık 3,07:1, koyu 4,55:1 */
.switch .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch[aria-checked="true"] .tr { background: var(--primary); }
.switch[aria-checked="true"] .tr::after { transform: translateX(18px); }
.cmp-wrap { padding-bottom: 64px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp col.lab { width: 180px; }
.cmp thead th, .cmp thead td { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; padding: 8px 10px 14px; font-weight: 400; }
.cmp-h { display: grid; gap: 6px; min-width: 0; }
.cmp-h .media { border-radius: 10px; border: 1px solid var(--line); width: 100%; max-width: 220px; }
.cmp-h .media .car { width: 74%; }
.cmp-h .t { font-family: var(--display); font-weight: 620; font-size: var(--step-0); line-height: 1.25; overflow-wrap: anywhere; }
.cmp-h .m { color: var(--muted); font-size: var(--step--1); }
.cmp-h .pr { font-family: var(--display); font-weight: 650; }
.cmp-h .acts { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; font-size: var(--step--1); }
.cmp-h .acts a { font-weight: 600; }
.cmp-h .acts .btn-text { font-size: var(--step--1); }
.cmp-h .unfit { display: grid; gap: 4px; justify-items: start; }
.cmp-h .badge-match { justify-self: start; }
.cmp tbody th, .cmp tbody td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; min-width: 0; overflow-wrap: anywhere; }
.cmp tbody th[scope="row"] { font-weight: 500; color: var(--muted); font-size: var(--step--1); }
.cmp tbody th[scope="row"] { position: relative; }
.cmp tr.farkli th[scope="row"] { color: var(--ink); padding-left: 14px; }
.cmp tr.farkli th[scope="row"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--accent); }
.cmp tr.ayni td { color: var(--muted); }
.cmp tr.grp th { padding: 22px 10px 8px; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.cmp td .best { font-weight: 600; }
.cmp td .v { display: block; }
.enIyi { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--primary); color: var(--primary); border-radius: 999px; font-size: .75rem; font-weight: 600; padding: 0 8px; margin-top: 4px; white-space: nowrap; }
.enIyi svg { width: 12px; height: 12px; }
.cmp td .chips { gap: 6px; }
.cmp td .chip { font-size: .8125rem; padding: 3px 10px; }
.cmp.only-diff tr.ayni { display: none; }
.cmp-sticky { display: none; }
.cmp-empty { display: grid; gap: 16px; justify-items: start; padding-bottom: 64px; }
.cmp-empty .one { width: 100%; max-width: 440px; }
@media (max-width: 767px) {
  .cmp, .cmp thead, .cmp tbody { display: block; }
  .cmp colgroup { display: none; }
  .cmp tr { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .cmp thead tr { padding-top: 0; }
  .cmp thead th, .cmp thead td { position: static; border: 0; padding: 0; }
  .cmp thead .corner { display: none; }
  .cmp tbody th, .cmp tbody td { padding: 0; border: 0; font-size: var(--step--1); }
  .cmp tbody th[scope="row"] { grid-column: 1 / -1; }
  .cmp tr.farkli th[scope="row"] { padding-left: 10px; }
  .cmp tr.grp { border-bottom: 0; padding: 18px 0 0; }
  .cmp tr.grp th { grid-column: 1 / -1; padding: 0; border: 0; }
  .cmp-h .media { display: grid; }
  .cmp-h .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp tr.farkli th[scope="row"]::before { top: 2px; bottom: 2px; }
  .cmp td .chip { font-size: .75rem; padding: 2px 8px; }
  .cmp-sticky { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 0; font-family: var(--display); font-weight: 620; font-size: var(--step--1); line-height: 1.25; }
  .cmp-sticky span { min-width: 0; overflow-wrap: anywhere; }
}
/* very narrow phones: 3 columns of ~85px — keep words whole, stack year/city, slimmer chips */
@media (max-width: 359px) {
  .cmp tr, .cmp-sticky { column-gap: 12px; }
  .cmp-h .m { display: flex; flex-direction: column; line-height: 1.35; }
  .cmp-h .m-sep { display: none; }
  .cmp-h .badge-match { padding: 2px 8px; font-size: .75rem; }
  .cmp td .chip { display: block; padding: 3px 7px; border-radius: 8px; line-height: 1.35; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  .cmp td .chip > svg { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
}

/* ---------- sell form ---------- */
.sell { max-width: 720px; margin: 0 auto; padding-bottom: 72px; }
.sell .view-head p { color: var(--muted); max-width: 60ch; }
.form { display: grid; gap: 24px; }
.fs { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 20px; margin: 0; min-width: 0; display: grid; gap: 16px; }
.fs > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-family: var(--display); font-size: var(--step-1); font-weight: 600; font-variation-settings: "opsz" 24; }
.fs > legend + * { clear: both; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599px) { .fgrid { grid-template-columns: minmax(0, 1fr); } .fs { padding: 16px; } }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label, .field .lbl { font-weight: 600; font-size: var(--step--1); }
.field .opt { color: var(--muted); font-weight: 400; }
.field.full { grid-column: 1 / -1; }
.fs-in { display: grid; gap: 16px; min-width: 0; }
.note-ok { display: flex; gap: 8px; align-items: flex-start; background: var(--chip); border-radius: 10px; padding: 12px 14px; }
.note-ok svg { width: 16px; height: 16px; color: var(--primary); margin-top: 4px; }
.err { color: var(--error); font-size: var(--step--1); display: flex; gap: 6px; align-items: flex-start; }
.err svg { width: 16px; height: 16px; margin-top: 2px; }
.warn { color: var(--muted); font-size: var(--step--1); display: flex; gap: 6px; align-items: flex-start; }
.warn svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
[aria-invalid="true"] { border: 2px solid var(--error) !important; }
.err-sum { border: 2px solid var(--error); border-radius: 14px; padding: 16px; background: var(--surface); display: grid; gap: 8px; }
.err-sum h2 { font-size: var(--step-1); font-variation-settings: "opsz" 24; }
.err-sum ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.err-sum .btn-text { color: var(--error); min-height: 28px; }
.drop { border: 1.5px dashed var(--field); border-radius: 10px; padding: 18px; display: grid; gap: 8px; justify-items: center; text-align: center; background: var(--bg); }
.drop.over { border-color: var(--primary); background: var(--hover); }
.drop svg { width: 20px; height: 20px; color: var(--muted); }
.drop p { color: var(--muted); font-size: var(--step--1); }
.file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.file-row .fn { font-weight: 600; overflow-wrap: anywhere; min-width: 0; flex: 1 1 160px; }
.file-row svg { width: 16px; height: 16px; color: var(--primary); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.counter { color: var(--muted); font-size: var(--step--1); justify-self: end; }
.submit-row { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 599px) { .submit-row .btn { width: 100%; } }
.preview { display: grid; gap: 20px; padding-bottom: 72px; }
.preview .card { max-width: 460px; }
.preview .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ipuclari { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; max-width: 62ch; line-height: 1.5; }

/* ---------- footer ---------- */
.foot-site { background: var(--bg); border-top: 1px solid var(--line); }
.foot-site .wrap { padding-block: 32px 48px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { display: grid; gap: 10px; color: var(--ink); }
.foot-brand svg { width: 104px; height: auto; display: block; }
.foot-brand p { color: var(--muted); font-size: var(--step--1); }
.foot-notes { color: var(--muted); font-size: var(--step--1); display: grid; gap: 4px; max-width: 52ch; }
@media (max-width: 767px) { .foot-site .wrap { flex-direction: column; } }

/* dokunmatik: 44 px hedef; masaüstü görünümü değişmez */
@media (pointer: coarse) {
  .chip-sec, .chip-ozet { min-height: 44px; }
  .seg { padding: 2px; }
  .seg button { min-height: 44px; }
  .btn-sm, .c-actions .btn-text, .cmp-h .acts .btn-text, .back-link, #w-bastan, .cevap-duzenle { min-height: 44px; }
  .stats .read .btn-text { min-height: 32px; }
  .c-title a, .cmp-h .acts a, .stats .read .btn-text { position: relative; }
  .c-title a::after, .cmp-h .acts a::after, .stats .read .btn-text::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .range { height: 44px; }
  .range-ends { margin-top: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span { animation: none; }
  .panel, .detail-root .scrim, .switch .tr, .switch .tr::after, .card { transition: none; }
  .yukselt .p { animation: none; }
}

/* ===================== içerik dalı: yeni bileşenler =====================
   Yalnızca mevcut token'lar ve bileşen dili (chip, btn-text, cell, bar-row, tech, hepsi notu) kullanılır.
   Birleşmede Fable'ın tasarım diline uyarlandı: bilgi şeridi (büyük rakam + .75rem etiket + ince ayraç), --field kontrastı,
   ikon seti (16 kutu, 1.6 kalem), kehribar yalnız dikkat ve "senin için değil" işaretlerinde. */

/* Yoldaşlık hücresi (kart ve detay şeridi): "%NN" büyük; "yoldaşlık" sözcüğü etiket satırı; seviye altında,
   batarya hücresindeki "doğrulandı" gibi koyu. Rozetin metni ve ekran okuyucu metni aynı kalır. */
.stats .badge-match .bm-w { display: block; margin-top: 2px; font-family: var(--body); font-size: .75rem; line-height: 1.35; font-weight: 500; letter-spacing: 0; font-variation-settings: normal; color: var(--muted); }
.stats .yol-sev { color: var(--ink); font-weight: 600; }

/* yaşam tarzı soruları (sihirbazda, kapalı başlar) */
.yasam { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.yasam-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.yasam-ac { text-align: left; }
.yasam-ac .yasam-ic { width: 16px; height: 16px; align-self: center; }
.yasam-ek { color: var(--muted); font-size: var(--step--1); }
.yasam-help { margin-top: 6px; }
.chip-ekle { border-style: dashed; color: var(--primary); font-weight: 600; }
.chip-ekle svg { color: var(--primary); }

/* sonuç başlığı, model süzgeci, liste parçaları */
.btn-satir { display: inline; min-height: 0; padding: 0; font-size: var(--step--1); vertical-align: baseline; }
.yol-nedir { color: var(--muted); font-size: var(--step--1); max-width: 60ch; }
#model-slot:empty { display: none; }
.chip-model { border-color: var(--primary); font-weight: 600; }
.chip-model svg { color: var(--primary); }
#liste-slot > * + * { margin-top: 20px; }
.elenen-not { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.zayif-not { color: var(--muted); font-size: var(--step--1); line-height: 1.5; padding-top: 14px; border-top: 1px dashed var(--line); }
.zayif-not b { color: var(--ink); font-weight: 600; }
.list.soluk .card { border-style: dashed; }
.list.soluk .media { opacity: .6; }

/* Yoldaşlık (detay) */
.yol-ozet { display: grid; gap: 6px; }
/* büyük puan başlık şeridinde; burada yalnızca kısa bir özet satırı (tekrar etmesin) */
.yol-skor { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.yol-skor b { font-family: var(--display); font-size: var(--step-0); font-weight: 650; color: var(--ink); line-height: 1.2; font-variation-settings: "opsz" 24; }
.yol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.yol-li { display: grid; gap: 4px; min-width: 0; }
.yol-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.yol-ad { font-weight: 600; }
.yol-et { font-size: .75rem; line-height: 1.5; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.yol-eleyen { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.yol-n { margin-left: auto; font-family: var(--display); font-size: var(--step-1); font-weight: 650; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 40; }
/* çubuk: çit direkleri gibi --field kenarlı iz (zemine karşı 3:1), yuvarlak uç */
.yol .bar-row .tr { height: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--field); }
.yol .bar-row .tr i { background: var(--primary); border-radius: 999px; }
.yol-li.dusuk .bar-row .tr i { background: var(--accent); }
.yol-li.yol-az .yol-ad, .yol-li.yol-az .yol-n { color: var(--muted); }
.yol-li.yol-az .bar-row .tr i { opacity: .5; }
.yol-c { max-width: 62ch; }
.yol-li > .btn-text, .yol-nasil-w > .btn-text { justify-self: start; font-size: var(--step--1); min-height: 28px; padding: 0; }
.yol-nasil-w { display: grid; gap: 6px; justify-items: start; }
.yol-nasil { display: grid; gap: 6px; font-size: var(--step--1); max-width: 62ch; }

/* öne çıkanlar: başlıktaki bilgi şeridinin dili; kutu yok, önce rakam sonra küçük etiket, sütunlar arasında ince ayraç.
   Telefonda 2, genişte 3 sütun. */
.grid4.one-cikan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
.one-cikan .cell { border: 0; border-radius: 0; background: none; padding: 0 12px; border-left: 1px solid var(--line); }
.one-cikan .cell:nth-child(2n+1) { border-left: 0; padding-left: 0; }
@media (min-width: 560px) {
  .grid4.one-cikan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .one-cikan .cell:nth-child(2n+1) { border-left: 1px solid var(--line); padding-left: 12px; }
  .one-cikan .cell:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
.one-cikan .v { order: -1; font-size: var(--step-1); font-weight: 650; line-height: 1.15; letter-spacing: -.01em; font-variation-settings: "opsz" 40; }
.one-cikan .k, .one-cikan .d { font-size: .75rem; line-height: 1.35; font-weight: 500; }
.one-cikan .k { color: var(--muted); gap: 4px; }
.one-cikan .k svg { width: 12px; height: 12px; }

/* tüm teknik bilgiler (katlanır) */
.tek > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 8px; min-height: 44px; }
.tek > summary::-webkit-details-marker { display: none; }
.tek > summary .muted { margin-right: auto; }
.tek-ok { width: 20px; height: 20px; color: var(--primary); margin-right: 4px; transition: transform .16s; }
.tek[open] .tek-ok { transform: rotate(180deg); }
.tek-in { display: grid; gap: 8px; padding-top: 8px; }
.tek-in h4 { font-family: var(--body); font-size: var(--step-0); font-weight: 600; margin: 14px 0 0; }
.tech td small { display: block; font-weight: 400; color: var(--muted); }
.bilgi-yok { color: var(--muted); font-weight: 500; }
.tah-et { color: var(--muted); font-weight: 400; }
.terim { display: block; font-weight: 400; font-style: normal; color: var(--muted); font-size: var(--step--1); line-height: 1.45; margin-top: 2px; }
.tek-sor { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.tek-sor-k { font-weight: 600; }
.tek-eksik { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 8px; }
.tek-eksik .btn-text { font-size: var(--step--1); min-height: 28px; }

/* Türkiye'de en çok satanlar: sonuçlardan sonra sakin bir bant */
.tops { background: var(--surface); border-top: 1px solid var(--line); }
.tops > .wrap { padding-block: 40px 48px; display: grid; gap: 20px; }
.tops-head { display: grid; gap: 8px; max-width: 72ch; }
.tops-head h2 { font-size: var(--step-2); font-variation-settings: "opsz" 40; }
.tops-et { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tops-et .btn-text { font-size: var(--step--1); }
.tops-list { position: relative; list-style: none; margin: 0; padding: 0 0 8px; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 260px; gap: 14px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
@media (min-width: 1100px) { .tops-list { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } }
.top { scroll-snap-align: start; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.top-bas { display: flex; gap: 12px; align-items: flex-start; }
.top-sira { font-family: var(--display); font-size: var(--step-3); font-weight: 650; font-variation-settings: "opsz" 64; color: var(--muted); line-height: 1; min-width: 1ch; }
.top-ust { display: grid; gap: 2px; min-width: 0; }
.top-ad { font-size: var(--step-1); }
.top-adet { color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.35; }
.top-adet b { font-family: var(--display); font-size: var(--stat); color: var(--ink); font-weight: 650; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 40; margin-right: 2px; }
.top-yorum { font-size: var(--step--1); }
.yz { display: inline-block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.top > .btn-text { justify-self: start; font-size: var(--step--1); }
.top-neden { display: grid; gap: 8px; font-size: var(--step--1); }
.top-neden ul { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
.top-neden li { display: grid; gap: 2px; }
.nv, .ny { font-weight: 600; }
.ny { color: var(--accent); }
/* Yorum, veriden ayrı okunsun: soluk metin ve ince amber kenar (YZ etiketiyle aynı renk ailesi) */
.top-yz { color: var(--muted); border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); padding-left: 10px; }
.top-benzer { display: grid; gap: 8px; }
.top-benzer .row { display: flex; flex-wrap: wrap; gap: 8px; }
.top-kaynak a { overflow-wrap: anywhere; }
.top-gor { justify-self: start; }

/* "Biliyor muydun?": sakin, bir-iki satırlık şerit. Kutu yok; ince amber kenar, küçük etiket, kalın kısa başlık, tek cümle.
   Kartlardan ve "senin için" notlarından (nane kenarlı .hepsi) ayrışır ama göz yormaz. */
.bilgi { border-left: 2px solid var(--accent); padding: 2px 0 2px 12px; font-size: var(--step--1); line-height: 1.55; color: var(--muted); }
.bilgi-p { max-width: 96ch; }
.bilgi-et { color: var(--accent); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; white-space: nowrap; }
.bilgi-ic { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.bilgi .yil { font-family: var(--display); letter-spacing: .02em; }
.bilgi-t { transition: opacity .16s; }
.bilgi-t.degis { opacity: 0; }
.bilgi-b { color: var(--ink); font-weight: 600; }
.bilgi-t a { font-weight: 600; white-space: nowrap; }
.bilgi .bilgi-daha { font-size: var(--step--1); min-height: 0; padding: 0; margin-left: 6px; display: inline; font-weight: 600; white-space: nowrap; }
.empty .bilgi { text-align: left; width: 100%; max-width: 560px; }
.bilgi-alt { padding-block: 16px 28px; }
.bilgi-alt:empty, #bilgi-ilanver:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bilgi-t, .tek-ok { transition: none; }
  .tops-list { scroll-behavior: auto; }
}
/* dokunmatik: içerik bileşenlerindeki metin düğmeleri de 44 px hedef (Fable'ın kuralı) */
@media (pointer: coarse) {
  .yol-li > .btn-text, .yol-nasil-w > .btn-text, .tek-eksik .btn-text, .top > .btn-text, .tops-et .btn-text, .yasam-ac, .elenen-not .btn-text { min-height: 44px; }
/* dokunmatik: satır içi "Bir tane daha" düğmesinin dokunma alanı dikey dolguyla 44 px; satır içi öğede dolgu satır yüksekliğini değiştirmez */
@media (pointer: coarse) { .bilgi .bilgi-daha { padding-block: 12px; } }
}
/* dar ekranda karşılaştırma başlığında üç rozet yan yana sığsın: satır adı zaten "Yoldaşlık %" */
@media (max-width: 767px) { .cmp-h .badge-match .bm-w { display: none; } }

/* ===================== 2. tur: Yoldaşlık vurgusu, performans ve güvenlik ===================== */
/* Yoldaşlık hücresi seviyeye göre renklenir: "Can yoldaşı" en canlı (nane geçişli, hafif ışıltı), "İyi yoldaş" yumuşak,
   alt seviyeler sakin. Seviye adı ve yüzde her zaman yazılı; renk tek başına anlam taşımaz. */
:root { --yol-can-b: color-mix(in srgb, var(--primary) 84%, var(--n-mint)); }
.stats > .stat-uyum { border-radius: 12px; padding: 8px 10px; margin-right: 10px; align-self: stretch; }
.stats > .stat-uyum.sev-yok { padding-left: 0; }
.stats > .stat-uyum.sev-can { background: linear-gradient(135deg, var(--primary), var(--yol-can-b)); box-shadow: 0 8px 20px -10px var(--primary), 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent); }
.stats > .stat-uyum.sev-can .stat-v, .stats > .stat-uyum.sev-can .bm-w, .stats > .stat-uyum.sev-can .yol-sev, .stats > .stat-uyum.sev-can .stat-l { color: var(--on-primary); }
.stats > .stat-uyum.sev-iyi { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent); }
.stats > .stat-uyum.sev-orta { background: var(--chip); }
.stats > .stat-uyum.sev-zayif { box-shadow: inset 0 0 0 1px var(--field); }
.stats > .stat-uyum.sev-zayif .stat-v { color: var(--muted); }
.yol-metre { display: block; width: 100%; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; margin: 3px 0 1px; }
.yol-metre i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.sev-can .yol-metre { background: color-mix(in srgb, var(--on-primary) 30%, transparent); }
.sev-can .yol-metre i { background: var(--on-primary); }
.sev-orta .yol-metre i, .sev-zayif .yol-metre i { background: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --yol-can-b: color-mix(in srgb, var(--primary) 78%, #D9FFEE); } }
:root[data-theme="dark"] { --yol-can-b: color-mix(in srgb, var(--primary) 78%, #D9FFEE); }
@media (max-width: 479px) { .stats > .stat-uyum { padding: 6px 8px; margin-right: 6px; } }
/* "Sana uyanlar" başlığı biraz daha belirgin */
.results > .res-head { padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), var(--surface) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, var(--line)); }
.results > .res-head h1 { color: var(--ink); }
@media (max-width: 599px) { .results > .res-head { padding: 14px 16px; } }
/* kartta tek sakin satır: 0–100 ve Euro NCAP */
.c-perf { color: var(--muted); font-size: .8125rem; line-height: 1.4; margin-top: -10px; }
.c-yildiz, .d-yildiz { color: var(--accent); letter-spacing: 1px; }
.d-yildiz { font-size: 1.05rem; letter-spacing: 2px; }
.perf-grid .v { white-space: nowrap; }
.d-model .btn { margin-top: 2px; }
/* ---------- Rehber: model ızgarası, model sayfası, yazılar ---------- */
.sekmeler .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 359px) { .sekme { font-size: .8125rem; gap: 4px; } .sekme .nav-n { font-size: .75rem; } }
.rehber, .model-sayfa, .yazi { padding-bottom: 40px; }
.rh-giris { max-width: 62ch; }
.rh-bolum { display: grid; gap: 16px; padding-block: 8px 32px; }
.rh-bolum > h2, .rh-model-bas h2, .md-sec > h2 { font-size: var(--step-2); }
.rh-model-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rh-model-bas p { margin: 0; }
.rh-yazilar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .rh-yazilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rh-yazilar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rh-yazilar > li { display: flex; min-width: 0; }
.rh-yazi { display: grid; gap: 6px; align-content: start; width: 100%; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.rh-yazi:hover { border-color: var(--primary); }
.rh-yazi:hover .rh-yazi-b { text-decoration: underline; text-underline-offset: 3px; }
.rh-yazi-b { font-family: var(--display); font-weight: 620; font-variation-settings: "opsz" 24; font-size: 1.08rem; line-height: 1.25; }
.rh-yazi-o { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.rh-yazi-s { color: var(--primary); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.rh-suzgec { display: grid; gap: 10px; }
.rh-grup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.rh-grup-ad { font-size: var(--step--1); color: var(--muted); font-weight: 600; min-width: 52px; }
.rh-sec { border: 1px solid var(--field); background: var(--surface); color: var(--ink); border-radius: 999px; min-height: 36px; padding: 0 12px; font: inherit; font-size: var(--step--1); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rh-sec:hover { border-color: var(--primary); }
.rh-sec[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.rh-sec:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }
.rh-sec:disabled:hover { border-color: var(--field); }
.rh-n { color: var(--muted); font-size: .75rem; font-weight: 600; }
.rh-sec[aria-pressed="true"] .rh-n { color: inherit; }
@media (pointer: coarse) { .rh-sec { min-height: 44px; } }
.rh-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .rh-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .rh-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .rh-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rh-liste > li { display: flex; min-width: 0; }
.rh-kart { display: flex; flex-direction: column; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.rh-kart:hover { border-color: var(--primary); }
.rh-kart:hover .rh-ad { text-decoration: underline; text-underline-offset: 3px; }
.rh-govde { display: grid; gap: 8px; padding: 14px 16px 16px; flex: 1; align-content: start; }
.rh-ad { font-family: var(--display); font-weight: 620; font-variation-settings: "opsz" 24; font-size: 1.15rem; line-height: 1.2; }
.rh-alt { color: var(--muted); font-size: var(--step--1); }
.rh-deger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.rh-deger > span { display: grid; gap: 1px; min-width: 0; align-content: start; }
.rh-deger .k { color: var(--muted); font-size: .75rem; }
.rh-deger .v { font-weight: 600; font-size: var(--step--1); overflow-wrap: anywhere; }
.rh-ilan { color: var(--primary); font-size: .8125rem; font-weight: 600; }
.rh-ncap-yok { color: var(--muted); font-weight: 500; }
.md-tarz { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.md-ust { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); padding-bottom: 28px; }
@media (min-width: 900px) { .md-ust { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } }
.md-foto { margin: 0; display: grid; gap: 8px; min-width: 0; }
.md-foto .media { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.md-ozet { display: grid; gap: 18px; align-content: start; min-width: 0; }
.md-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.md-cta p { margin: 0; }
.md-yorum { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .md-yorum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.md-yorum-k { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); min-width: 0; }
.md-yorum-k h3 { font-size: 1.05rem; margin-bottom: 8px; }
.md-yorum-k ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.md-tablo { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--step--1); }
.md-tablo th, .md-tablo td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.md-tablo tbody th { color: var(--muted); font-weight: 500; width: 42%; }
.md-cok tbody th { width: 30%; }
.md-tablo thead th { font-family: var(--display); font-weight: 620; font-size: .95rem; line-height: 1.25; }
.md-yil { display: block; color: var(--muted); font-family: var(--body); font-weight: 500; font-size: .75rem; }
.md-tah { color: var(--muted); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.md-ncap { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); display: grid; gap: 10px; max-width: 640px; min-width: 0; }
.md-ncap p { margin: 0; }
.md-ncap-bas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; }
.md-yuzde { margin: 0; display: grid; gap: 8px; }
.md-yuzde-s { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; }
.md-yuzde dt { font-size: var(--step--1); color: var(--muted); }
.md-yuzde dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.md-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.md-bar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.md-yuzde-v { font-weight: 600; font-size: var(--step--1); min-width: 3.4ch; text-align: right; }
.md-alt-b { font-size: 1.05rem; margin-top: 6px; }
.md-kaynak { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--step--1); }
.md-kaynak a, .yz-kaynak a { overflow-wrap: anywhere; }
.yz-govde { display: grid; gap: 4px; max-width: 70ch; }
.yz-govde section { display: grid; gap: 12px; padding-block: 14px; min-width: 0; }
.yz-govde h2 { font-size: var(--step-2); }
.yz-govde p, .yz-govde ul { margin: 0; line-height: 1.65; }
.yz-govde ul { padding-left: 20px; display: grid; gap: 8px; }
.yz-yorum { border-left: 3px solid var(--primary); background: var(--chip); padding: 12px 14px; border-radius: 0 10px 10px 0; }
.yz-yorum-e { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.yz-tablo { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--step--1); line-height: 1.45; }
.yz-tablo th, .yz-tablo td { text-align: left; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.yz-tablo thead th { color: var(--muted); font-weight: 600; font-size: .8125rem; }
.yz-tablo tbody th { font-weight: 600; }
.yz-kaynak, .yz-diger { display: grid; gap: 12px; padding-block: 20px; border-top: 1px solid var(--line); margin-top: 12px; }
.yz-kaynak { max-width: 70ch; }
.yz-kaynak h2, .yz-diger h2 { font-size: var(--step-1); }
.yz-kaynak ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: var(--step--1); }
.grid4.md-ana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-lead { margin: 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.55; font-weight: 500; }
.md-tablo { max-width: 680px; }
.md-tablo.md-cok { max-width: 920px; }
/* Rehber süzgeci telefonda: her grup tek satır, yatay kayar; grup adı solda sabit, sağ kenarda solma "devamı var" der */
@media (max-width: 599px) {
  .rh-suzgec { gap: 4px; margin-inline: -16px; }
  .rh-grup { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 40px 6px 0; scroll-padding-inline: 80px 40px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .rh-grup::-webkit-scrollbar { display: none; }
  .rh-grup-ad { position: sticky; left: 0; z-index: 1; flex: none; min-width: 0; align-self: stretch; display: flex; align-items: center; padding: 0 8px 0 16px; background: var(--bg); box-shadow: 8px 0 8px -4px var(--bg); }
  .rh-sec { flex: none; }
}

/* ===================== platform.css: gerçek web uygulamasının ekleri (yalnızca dist/) =====================
   Yalnızca style.css'teki token'lar ve bileşen dili: gece üst çubuğu, nane vurgu, kehribar dikkat, 999px düğmeler, 14px kartlar. */

/* ---------- demo şeridi ---------- */
.demo-serit .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; }
.demo-hesaplar { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.demo-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--field); border-radius: 999px; min-height: 28px; padding: 0 10px; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.demo-btn:hover { border-color: var(--primary); }
.demo-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
@media (pointer: coarse) { .demo-btn { min-height: 44px; } .il-sil { min-height: 44px; } }

/* ---------- hesap alanı (üst çubuk) ---------- */
.hesap { position: relative; display: flex; align-items: center; }
.hesap-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--n-line); background: none; color: var(--n-ink); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; white-space: nowrap; }
.hesap-btn:hover { background: var(--n-surface); }
.hesap-btn > svg { width: 16px; height: 16px; }
.hesap-ac { padding: 0 10px 0 4px; }
.hesap-ac .hesap-lbl { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--n-mint); color: var(--n-bg); display: inline-grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .875rem; flex: none; }
.nokta { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--n-muted); }
.nokta.d-onayli { background: var(--n-mint); }
.nokta.d-bekliyor { background: var(--n-amber); }
.nokta.d-red, .nokta.d-askida { background: #F2A39C; }
@media (max-width: 1099px) { .hesap-ek { display: none; } }
@media (max-width: 559px) {
  .hesap-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; }
  .hesap-btn .hesap-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hesap-ac .nokta { position: absolute; right: 6px; top: 7px; box-shadow: 0 0 0 2px var(--n-bg); }
  .avatar { width: 32px; height: 32px; }
}
@media (max-width: 400px) { .nav .nav-ilanver { padding: 0 8px; } }
@media (max-width: 359px) { .nav { gap: 0; } .nav .nav-ilanver { padding: 0 6px; } .hesap-btn { width: 40px; } }
.hesap-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(280px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px;
}
@media (max-width: 559px) { .hesap-menu { position: fixed; left: var(--gut-l); right: var(--gut-r); width: auto; top: 64px; } }
.hm-bas { padding: 8px 10px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; justify-items: start; }
.hm-ad { font-weight: 600; overflow-wrap: anywhere; }
.hm-alt { color: var(--muted); font-size: var(--step--1); overflow-wrap: anywhere; }
.hm-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.hm-ogeler { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 0; background: none; color: var(--ink); text-decoration: none; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.hm-ogeler:hover, .hm-ogeler:focus-visible { background: var(--chip); }
.hm-ogeler svg { width: 16px; height: 16px; color: var(--muted); }

/* ---------- üyelik durumu çipi ---------- */
.durum-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; line-height: 1.5; white-space: nowrap; }
.durum-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.durum-chip.d-onayli { background: var(--primary); color: var(--on-primary); }
.durum-chip.d-bekliyor { border-color: var(--accent); color: var(--ink); }
.durum-chip.d-bekliyor::before { background: var(--accent); }
.durum-chip.d-red { border-color: var(--error); color: var(--error); }
.durum-chip.d-askida { border: 1px dashed var(--muted); color: var(--muted); }
.durum-chip.d-taslak { background: var(--chip); color: var(--ink); }
.durum-chip.d-taslak::before { background: var(--muted); }

/* ---------- giriş penceresi ---------- */
.gp-root { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.gp-root .scrim { position: absolute; inset: 0; background: var(--scrim); }
.gp {
  position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; padding: 20px 24px 24px; display: grid; gap: 16px;
}
.gp-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-right: -12px; margin-top: -4px; }
.gp-ust h2 { font-size: var(--step-2); font-variation-settings: "opsz" 48; padding-top: 6px; }
.gp-alt { color: var(--muted); }
.gp-alt b { color: var(--ink); }
.gp-yollar { display: grid; gap: 10px; }
.btn-gp { background: var(--surface); color: var(--ink); border-color: var(--field); width: 100%; justify-content: center; gap: 10px; }
.btn-gp:hover:not(:disabled) { border-color: var(--primary); background: var(--hover); }
.btn-gp svg { width: 18px; height: 18px; }
.btn-gp .g-logo { width: 18px; height: 18px; }
.gp-ayrac { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--step--1); }
.gp-ayrac::before, .gp-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gp-seg { justify-self: start; }
.gp-seg button { min-height: 40px; padding: 0 18px; }
@media (max-width: 767px) { .seg.gp-seg { display: inline-flex; } }
.gp-form { display: grid; gap: 14px; }
.gp-tam { width: 100%; }
.gp-unuttum { justify-self: center; min-height: 44px; }
.gp-geri { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.gp-geri svg { width: 14px; height: 14px; }
.gp-tekrar { justify-self: center; min-height: 44px; }
.gp-hata { color: var(--error); font-size: var(--step--1); font-weight: 600; }
.gp-hata:empty { display: none; }
.gp-demo { background: var(--chip); color: var(--muted); border-radius: 10px; padding: 8px 12px; }
.gp-amac-dugme { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sifre-w { position: relative; }
.sifre-w .inp { padding-right: 48px; }
.sifre-goster { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.sifre-goster svg { width: 18px; height: 18px; }
.sifre-goster[aria-pressed="true"] { color: var(--primary); }
.tel-affix.pre .inp { padding-left: 48px; letter-spacing: .02em; }
.tel-affix.pre > span { color: var(--ink); font-weight: 600; font-size: var(--step-0); }
.kod-inp { font-family: var(--display); font-size: 1.6rem; letter-spacing: .5em; text-align: center; min-height: 56px; padding-left: .5em; }
.kod-inp::placeholder { letter-spacing: .3em; }
@media (max-width: 559px) {
  .gp-root { padding: 0; place-items: end stretch; }
  .gp { max-width: none; border-radius: 14px 14px 0 0; max-height: 94vh; padding: 16px var(--gut-r) calc(20px + env(safe-area-inset-bottom, 0px)) var(--gut-l); }
}

/* ---------- amaç seçimi ---------- */
.amac-secenek { display: grid; gap: 8px; }
.amac-btn { display: grid; gap: 2px; text-align: left; padding: 12px 14px 12px 44px; border-radius: 14px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; position: relative; min-height: 56px; }
.amac-btn::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--field); background: var(--surface); }
.amac-btn:hover { border-color: var(--primary); }
.amac-btn[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--hover); }
.amac-btn[aria-checked="true"]::before { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 45%, transparent 50%); }
.amac-ad { font-weight: 600; }
.amac-ip { color: var(--muted); font-size: var(--step--1); }
.arac-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.arac-fs > legend { float: left; width: 100%; padding: 0; font-weight: 600; }
.arac-fs > legend + * { clear: both; }

/* ---------- beğeni düğmesi ---------- */
.begen-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; font: inherit; font-weight: 600; font-size: var(--step--1); padding: 0 10px; }
.begen-btn svg { width: 20px; height: 20px; transition: transform .15s; }
.begen-btn:hover { color: var(--primary); background: var(--hover); }
.begen-btn[aria-pressed="true"] { color: var(--primary); }
.begen-btn[aria-pressed="true"] svg path { fill: currentColor; }
.begen-btn:active svg { transform: scale(.88); }
.begen-btn.begen-genis { border-color: var(--field); color: var(--ink); padding: 0 16px; }
.begen-btn.begen-genis[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.c-actions .begen-btn { margin-left: auto; margin-right: -8px; }
@media (prefers-reduced-motion: reduce) { .begen-btn svg { transition: none; } }

/* ---------- Sana uyanlar / Tüm ilanlar ---------- */
.ilan-sekmeler-w { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ilan-sekmeler { display: inline-flex; border: 1px solid var(--field); border-radius: 999px; padding: 3px; background: var(--surface); gap: 2px; }
.ilan-sekme { border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; min-height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ilan-sekme:hover { background: var(--hover); }
.ilan-sekme[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
.ilan-sekme[aria-selected="true"] .seg-n { color: inherit; }
.sekme-not { flex: 1 1 220px; }
@media (pointer: coarse) { .ilan-sekme { min-height: 44px; } }
@media (max-width: 479px) { .ilan-sekmeler { display: flex; width: 100%; } .ilan-sekme { flex: 1; justify-content: center; padding: 0 10px; } }
#sekme-panel { display: grid; gap: 20px; min-width: 0; }
#sekme-panel:focus { outline: none; }
#yol-blok, #tum-slot { display: grid; gap: 20px; min-width: 0; }
#tum-slot[hidden] { display: none; }
.avatar svg { width: 16px; height: 16px; }
.blok-h { font-size: var(--step-1); font-variation-settings: "opsz" 24; font-weight: 650; padding-top: 8px; }
.satici-blok { display: grid; gap: 16px; min-width: 0; }
#yol-blok:not([hidden]) + .satici-slot-bos { display: none; }
#yol-blok:not([hidden]) ~ #satici-slot:not([hidden]) { border-top: 1px solid var(--line); padding-top: 12px; }
.fiyat-ozet { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 14px; padding: 16px 18px; display: grid; gap: 6px; }
.fiyat-ozet .fo-b { font-family: var(--display); font-size: var(--step-1); font-weight: 650; font-variation-settings: "opsz" 24; line-height: 1.25; }
.fiyat-ozet .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- ilan detayı: galeri ---------- */
.galeri { position: relative; border-radius: 14px; overflow: hidden; background: var(--n-bg); }
.galeri-iz { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 3 / 2; }
.galeri-iz::-webkit-scrollbar { display: none; }
.galeri-iz:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.galeri-k { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; }
.galeri-k img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeri-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--n-line); background: color-mix(in srgb, var(--n-bg) 78%, transparent); color: var(--n-ink); display: grid; place-items: center; cursor: pointer; }
.galeri-ok svg { width: 18px; height: 18px; }
.galeri-ok:hover { background: var(--n-bg); }
.g-onceki { left: 10px; } .g-sonraki { right: 10px; }
.galeri-say { position: absolute; right: 12px; bottom: 10px; background: var(--n-bg); color: var(--n-ink); border: 1px solid var(--n-line); border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; }
.galeri .badge-ex { top: 12px; left: 12px; }
.galeri .badge-sifir { left: 12px; bottom: 10px; }
.galeri .badge-cmp { right: auto; left: 12px; bottom: 40px; }

/* ---------- kapılar (giriş / onay bekleniyor) ---------- */
.kapi-kart { background: var(--chip); border-radius: 14px; padding: 16px; display: grid; gap: 8px; justify-items: start; }
.kapi-kart .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 4px; }
.kapi-b { font-weight: 600; }
.kapi-buyuk { background: var(--surface); border: 1px solid var(--line); padding: 28px; gap: 12px; }
.kapi-buyuk h2.kapi-b, .kapi-buyuk h2 { font-size: var(--step-2); font-variation-settings: "opsz" 48; font-weight: 650; font-family: var(--display); }
.kapi-buyuk p { max-width: 60ch; }
.kapi-ic { width: 28px; height: 28px; color: var(--primary); }
@media (max-width: 599px) { .kapi-buyuk { padding: 20px 16px; } }

/* ---------- İlan ver (web) ---------- */
.fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .fgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399px) { .fgrid-3 { grid-template-columns: minmax(0, 1fr); } }
.field > .inp[hidden] + .err, .field > .sel + .inp { margin-top: 0; }
.cb-satir { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cb { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.cb input { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.counter { color: var(--muted); font-size: .75rem; text-align: right; }
.ivw-red { border: 1px solid var(--error); }
.ivw-red svg { color: var(--error); }
.ivw-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.ivw-neden { color: var(--ink); font-weight: 500; }
.ivw-neden:empty { display: none; }
@media (max-width: 599px) { .ivw-dugmeler { width: 100%; } .ivw-dugmeler .btn { flex: 1 1 100%; } }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-sayac { font-weight: 600; font-size: var(--step--1); }
.foto-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.foto-izgara:empty { display: none; }
.foto-oge { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; min-width: 0; align-self: start; }
.foto-oge.kapak { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.foto-on { position: relative; aspect-ratio: 4 / 3; background: var(--n-surface); display: grid; place-items: center; }
.foto-on img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-yer svg { width: 28px; height: 28px; color: var(--n-muted); }
.foto-no { position: absolute; left: 8px; top: 8px; background: var(--n-bg); color: var(--n-ink); border-radius: 999px; padding: 0 8px; font-size: .75rem; font-weight: 700; line-height: 22px; min-width: 22px; text-align: center; }
.foto-oge.kapak .foto-no { background: var(--n-mint); color: var(--n-bg); }
.foto-oge.islem .foto-on img { opacity: .55; }
.foto-alt { padding: 6px 6px 8px; display: grid; gap: 4px; min-width: 0; }
.foto-ilerleme { width: 100%; height: 6px; accent-color: var(--primary); }
.foto-d { color: var(--muted); padding: 0 4px; }
.foto-eylem { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "sol sag . sil" "kapak kapak kapak kapak"; align-items: center; gap: 0 2px; }
.foto-eylem [data-act="iv-sol"] { grid-area: sol; } .foto-eylem [data-act="iv-sag"] { grid-area: sag; } .foto-eylem [data-act="iv-sil"] { grid-area: sil; }
.foto-eylem .foto-kapak, .foto-eylem .foto-kapak-et { grid-area: kapak; justify-self: start; }
.foto-kapak-et { color: var(--primary); font-size: .8125rem; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; gap: 4px; padding: 0 2px; }
.foto-kapak-et svg { width: 14px; height: 14px; }
@media (pointer: coarse) { .foto-kapak-et { min-height: 44px; } }
.icon-btn.ib-k { width: 40px; height: 40px; }
.icon-btn.ib-k svg { width: 16px; height: 16px; }
.icon-btn.ib-k:disabled { opacity: .35; cursor: default; }
.icon-btn.ib-sil:hover { color: var(--error); }
.foto-kapak { font-size: .8125rem; min-height: 40px; padding: 0 2px; }
@media (pointer: coarse) { .icon-btn.ib-k { width: 44px; height: 44px; } .foto-kapak { min-height: 44px; } }
.ivw-foto-hata ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.ivw-sonuc { padding-bottom: 72px; }
.ivw-tamam .kapi-ic { width: 32px; height: 32px; }
#ivw-taslak-durum:empty { display: none; }

/* ---------- İlanlarım ---------- */
.hesap-sayfa { max-width: 820px; margin: 0 auto; padding-bottom: 72px; display: grid; gap: 4px; }
.il-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.il-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.il-oge { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 168px minmax(0, 1fr); overflow: hidden; }
.il-medya { background: var(--n-surface); display: grid; place-items: center; min-height: 120px; }
.il-medya img { width: 100%; height: 100%; object-fit: cover; display: block; }
.km-yok { width: 80%; display: block; color: var(--n-muted); }
.km-yok .car { width: 100%; height: auto; }
.km-yok .car .bd { fill: var(--n-muted); } .km-yok .car .cam, .km-yok .car .ark { fill: var(--n-surface); } .km-yok .car .wh { fill: var(--n-muted); } .km-yok .car .gob { fill: var(--n-surface); }
.il-govde { padding: 16px 18px; display: grid; gap: 6px; min-width: 0; align-content: start; }
.il-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.il-ad { font-size: 1.2rem; font-variation-settings: "opsz" 24; font-weight: 620; }
.il-meta { color: var(--muted); }
.il-red { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--error); border-radius: 10px; padding: 10px 12px; font-size: var(--step--1); }
.il-red svg { width: 16px; height: 16px; color: var(--error); margin-top: 3px; }
.il-eylem { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.il-eylem .btn svg { width: 14px; height: 14px; }
.il-sil { color: var(--error); min-height: 40px; }
@media (max-width: 599px) { .il-oge { grid-template-columns: minmax(0, 1fr); } .il-medya { aspect-ratio: 16 / 7; min-height: 0; } }

/* ---------- Hesabım ---------- */
.hb-blok { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 12px; margin-bottom: 16px; min-width: 0; }
.hb-blok h2 { font-size: var(--step-1); font-variation-settings: "opsz" 24; font-weight: 650; }
.hb-satir { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hb-satir .field { flex: 1 1 240px; }
.hb-son { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; }
.hb-son .btn-text { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.beg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.beg-liste li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 6px; }
.beg-liste a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.beg-liste a:hover b { text-decoration: underline; }
.beg-liste a > span:last-child { display: grid; min-width: 0; }
.beg-medya { width: 88px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--n-surface); flex: none; display: grid; place-items: center; }
.beg-medya img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .hb-blok { padding: 16px; } }

/* ===================== yönetim paneli (admin.html) ===================== */
.ad-ust .wrap { height: 64px; }
.ad-ust .ad-ad { color: var(--n-muted); font-weight: 600; font-size: var(--step--1); margin-right: auto; padding-left: 12px; border-left: 1px solid var(--n-line); margin-left: 4px; }
.ad-ust .nav a { border: 1px solid var(--n-line); }
.ad-main { padding-block: 24px 72px; display: grid; gap: 20px; align-content: start; width: 100%; }
.ad-sayi { align-content: start; }
.ad-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ad-bas h1 { font-size: var(--step-3); font-variation-settings: "opsz" 64; }
.ad-yenile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: var(--step--1); }
.ad-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) { .ad-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-sayi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.ad-sayi b { font-family: var(--display); font-size: var(--stat); font-weight: 650; line-height: 1.1; }
.ad-sayi span { color: var(--muted); font-size: var(--step--1); }
.ad-sayi.vurgu { border-color: var(--accent); }
.ad-sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ad-sekme { border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; min-height: 48px; padding: 0 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ad-sekme:hover { background: var(--hover); }
.ad-sekme[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--primary); }
.rozet-n { background: var(--accent); color: var(--bg); border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.rozet-n.sifir { background: var(--chip); color: var(--muted); }
.ad-panel { display: grid; gap: 16px; min-width: 0; }
.ad-panel:focus { outline: none; }
.ad-alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 767px) { .ad-alt .seg { display: inline-flex; } }
.ad-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-oge { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ad-oge-bas { display: grid; gap: 2px; min-width: 0; }
.ad-oge-bas b { overflow-wrap: anywhere; }
.ad-meta { color: var(--muted); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.ad-eylem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.ad-not { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ad-not .inp { flex: 1 1 220px; min-height: 40px; }
.ad-ilan { grid-template-columns: 120px minmax(0, 1fr) auto; }
.ad-thumb { width: 120px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--n-surface); display: grid; place-items: center; color: var(--n-muted); }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ad-thumb svg { width: 28px; height: 28px; }
@media (max-width: 699px) {
  .ad-oge, .ad-ilan { grid-template-columns: minmax(0, 1fr); }
  .ad-thumb { width: 100%; aspect-ratio: 16 / 7; }
  .ad-eylem { justify-content: flex-start; }
}
.ad-bos { background: var(--surface); border: 1px dashed var(--field); border-radius: 14px; padding: 24px; text-align: center; color: var(--muted); }
.ad-kapi { max-width: 560px; margin: 48px auto; }
.ad-detay-root { position: fixed; inset: 0; z-index: 50; }
.ad-detay-root .scrim { position: absolute; inset: 0; background: var(--scrim); }
.ad-detay { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--bg); box-shadow: var(--shadow); overflow: auto; overscroll-behavior: contain; }
.ad-detay .d-top { padding-left: 20px; }
.ad-detay-ic { padding: 16px 20px 40px; display: grid; gap: 20px; }
.ad-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ad-galeri a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--n-surface); position: relative; }
.ad-galeri img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-galeri .foto-no { left: 6px; top: 6px; }
.ad-kutu { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 10px; min-width: 0; }
.ad-kutu h3 { font-size: var(--step-1); }
.ad-tablo { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ad-tablo th, .ad-tablo td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ad-tablo th { color: var(--muted); font-weight: 600; width: 42%; }
.ad-sablonlar { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-karar { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.ad-karar .row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-tehlike { background: transparent; color: var(--error); border-color: var(--error); }
.btn-tehlike:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 8%, transparent); }
.ad-ornek .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ad-ilerleme { width: min(320px, 100%); height: 8px; accent-color: var(--primary); }

/* küçük resim kutuları: resim kutuyu doldurur, taşmaz (dar ekranda metnin üstüne binmesin) */
.il-medya, .ad-thumb, .beg-medya, .foto-on, .ad-galeri a { position: relative; overflow: hidden; }
.il-medya > img, .ad-thumb > img, .beg-medya > img, .foto-on > img, .ad-galeri a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ziyaretçiye "Örnek bir profille sıraladık" notu */
.sekme-not.ornek-not { display: flex; gap: 8px; align-items: flex-start; background: var(--chip); color: var(--ink); border-radius: 10px; padding: 8px 12px; }
.sekme-not.ornek-not svg { width: 16px; height: 16px; color: var(--primary); margin-top: 3px; flex: none; }
.sekme-not.ornek-not a { font-weight: 600; }
.hb-amac-dugme { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- ilan filtreleri ---------- */
.filtre-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.filtre-ac .f-ic { width: 16px; height: 16px; }
.filtre-ac[aria-expanded="true"] { background: var(--primary); color: var(--on-primary); }
.filtre-say { color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.filtre-cipler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fcip-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fcip-x { gap: 6px; }
.fcip-x svg { width: 12px; height: 12px; color: var(--muted); }
.fcip-x:hover svg { color: var(--error); }
.ftemizle { min-height: 36px; }
.filtre-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 12px; display: grid; gap: 12px; }
.filtre-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filtre-ust h2 { font-size: var(--step-1); font-variation-settings: "opsz" 24; font-weight: 650; }
.filtre-govde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
@media (max-width: 1099px) { .filtre-govde { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fgrup { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.fgrup > legend { float: left; width: 100%; padding: 0; font-weight: 650; font-size: var(--step--1); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.fgrup > legend + * { clear: both; }
.fsec-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-height: 212px; overflow: auto; overscroll-behavior: contain; border-radius: 8px; }
.fsec-alt { font-weight: 600; font-size: var(--step--1); margin-top: 4px; }
.fcb { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.fcb:hover { background: var(--hover); }
.fcb input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; flex: none; }
.fcb.bos { color: var(--muted); cursor: default; }
.fsec-n { color: var(--muted); font-size: .8125rem; font-weight: 500; }
.fikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fcip { display: flex; flex-wrap: wrap; gap: 6px; }
.fcip-o { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field); cursor: pointer; font-size: var(--step--1); }
.fcip-o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fcip-o:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.fcip-o:has(input:checked) .fsec-n { color: inherit; }
.fcip-o:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fhizli { justify-self: start; }
.fhizli svg { width: 14px; height: 14px; color: var(--accent); }
.fhizli[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.fhizli[aria-pressed="true"] svg, .fhizli[aria-pressed="true"] .fsec-n { color: inherit; }
.filtre-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.filtre-kok:not(.sheet) #filtre-gor { display: none; }
.filtre-kok:not(.sheet) .filtre-scrim { display: none; }
.filtre-bos h3 { font-size: var(--step-1); }
@media (pointer: coarse) { .fcb, .fcip-o, .ftemizle { min-height: 44px; } }
/* telefonda alt sayfa */
.filtre-kok.sheet { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; justify-content: flex-end; }
.filtre-kok.sheet .filtre-scrim { position: absolute; inset: 0; background: var(--scrim); }
.filtre-kok.sheet .filtre-panel { position: relative; border-radius: 16px 16px 0 0; max-height: 88vh; display: flex; flex-direction: column; padding: 14px var(--gut-r) 0 var(--gut-l); box-shadow: var(--shadow); }
.filtre-kok.sheet .filtre-govde { grid-template-columns: minmax(0, 1fr); overflow: auto; overscroll-behavior: contain; flex: 1; padding-bottom: 8px; }
.filtre-kok.sheet .fsec-liste { max-height: none; }
.filtre-kok.sheet .filtre-alt { padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.filtre-kok.sheet #filtre-gor { flex: 1; max-width: 260px; }
/* katlanan sıfır sayılı seçenekler (şehir, gövde) */
.ftumu { justify-self: start; margin-top: 4px; min-height: 36px; font-size: var(--step--1); }
@media (pointer: coarse) { .ftumu { min-height: 44px; } }

/* ---------- İlanlar vitrini: sol sütun (kategori, filtreler), arama, kırıntı, liste/kart, bantlar ---------- */
.vitrin { display: grid; gap: 20px 28px; grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
@media (min-width: 768px) { .vitrin { grid-template-columns: 232px minmax(0, 1fr); align-items: start; } }
@media (min-width: 1100px) { .vitrin { grid-template-columns: 260px minmax(0, 1fr); } }
.vitrin-yan { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (max-width: 767px) { .vitrin-yan { display: none; } }
.vitrin-ana { display: grid; gap: 14px; min-width: 0; align-content: start; }
#vitrin-bas .res-head h1 { font-size: var(--step-2); }
.kat-agac { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px 10px; }
.kat-h { font-size: var(--step--1); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin: 0 8px 6px; font-family: var(--body); }
.kat-agac ul { list-style: none; margin: 0; padding: 0; }
.kat-agac .kat-alt { margin-left: 10px; padding-left: 6px; border-left: 1px solid var(--line); }
.kat-agac a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: var(--step--1); }
.kat-agac a:hover { background: var(--hover); }
.kat-agac a[aria-current="page"] { background: var(--chip); font-weight: 650; box-shadow: inset 3px 0 0 var(--primary); }
.kat-agac .kat-acik > a { font-weight: 650; }
.kat-n { color: var(--muted); font-weight: 500; font-size: .8125rem; flex: none; }
@media (pointer: coarse) { .kat-agac a { min-height: 44px; } }
.vitrin-yan .filtre-panel { padding: 14px; }
.vitrin-yan .filtre-govde { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vitrin-yan #filtre-kapat { display: none; }
/* arama kutusu ve öneriler (combobox) */
.ara-form { position: relative; }
.ara-kutu { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--field); border-radius: 12px; padding: 4px 4px 4px 12px; }
.ara-kutu:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.ara-ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ara-q { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); min-height: 40px; outline: none; }
.ara-q::placeholder { color: var(--muted); }
.ara-git { flex: none; }
.ara-liste { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 360px; overflow: auto; }
.ara-o { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ara-o:hover { background: var(--hover); }
.ara-o[aria-selected="true"] { background: var(--chip); box-shadow: inset 3px 0 0 var(--primary); }
.ara-o-ad { min-width: 0; }
.ara-o-bag { color: var(--muted); }
.ara-o-n { color: var(--muted); font-size: .8125rem; flex: none; }
.ara-o-hepsi { border-top: 1px solid var(--line); margin-top: 4px; font-weight: 600; border-radius: 0 0 8px 8px; }
@media (pointer: coarse) { .ara-o { min-height: 44px; } }
/* kırıntı yolu */
.kirinti ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: var(--step--1); color: var(--muted); }
.kirinti li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.kirinti a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.kirinti [aria-current="page"] { color: var(--ink); font-weight: 650; }
@media (pointer: coarse) { .kirinti a { display: inline-flex; min-height: 44px; align-items: center; } }
/* araç çubuğu: telefonda Marka / Model ve Filtrele; her yerde Sırala ve görünüm */
.vitrin-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.kat-ac, .filtre-ac { display: none; }
.kat-ac svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .kat-ac, .filtre-ac { display: inline-flex; }
  .kat-ac { max-width: 100%; min-width: 0; }
  .kat-ac-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}
.sira-w { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sira-sel { min-height: 40px; width: auto; max-width: 100%; }
@media (max-width: 767px) { .sira-w { margin-left: 0; } }
.gorunum { display: inline-flex; border: 1px solid var(--field); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); }
.gorunum button { border: 0; background: none; font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink); min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; }
.gorunum button:hover { background: var(--hover); }
.gorunum button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
@media (pointer: coarse) { .gorunum button, .sira-sel { min-height: 44px; } }
/* ziyaretçiye davet */
.davet { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px; background: var(--chip); border-radius: 12px; font-size: var(--step--1); }
.davet svg { width: 16px; height: 16px; color: var(--primary); flex: none; }
.davet a { font-weight: 650; }
.davet-sure { font-weight: 500; }
/* bantlar: Sana önerilenler, Aracına benzeyenler (yatay kayar) */
.bant { display: grid; gap: 10px; min-width: 0; }
.bant-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.bant-bas h2 { font-size: var(--step-1); font-variation-settings: "opsz" 24; font-weight: 650; }
.bant-bas p { margin: 0; }
.bant-liste { list-style: none; margin: 0; padding: 2px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(188px, 220px); justify-content: start; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.bant-liste > li { scroll-snap-align: start; min-width: 0; display: flex; }
.bant-kart { display: flex; flex-direction: column; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.bant-kart:hover { border-color: var(--primary); }
.bant-kart:hover .bk-ad { text-decoration: underline; text-underline-offset: 3px; }
.bk-foto { display: block; aspect-ratio: 4 / 3; background: var(--n-surface); }
.kf { display: block; width: 100%; height: 100%; object-fit: cover; }
.kf-yok { display: grid; place-items: center; color: var(--n-muted); }
.kf-yok svg { width: 72%; height: auto; }
.bk-govde { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 3px; padding: 10px 12px 12px; }
.bk-ad { font-weight: 650; line-height: 1.25; }
.bk-alt, .bk-neden { color: var(--muted); font-size: .8125rem; }
.bk-fiyat { font-family: var(--display); font-weight: 650; margin-top: auto; } /* adres iki satıra inse de fiyat ve rozet hizalı kalsın */
.satici-blok .fiyat-ozet { margin: 0; }
/* küçük Yoldaşlık rozeti (liste satırı ve bantlar); 55'in altı soluk */
.yol-rozet { display: inline-flex; align-items: center; justify-self: start; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .8125rem; font-weight: 700; background: var(--chip); color: var(--ink); }
.yol-rozet.sev-can { background: var(--primary); color: var(--on-primary); }
.yol-rozet.sev-iyi { background: color-mix(in srgb, var(--primary) 24%, var(--surface)); }
.yol-rozet.soluk { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--field); font-weight: 600; }
/* kart görünümü vitrinin dar ana sütununda: kart en az ~330 px ister, ana sütun en çok ~900 px, en fazla iki sütun */
.vitrin-ana .list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .vitrin-ana .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* liste görünümü: sahibinden satırları */
.satirlar { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.satir-bas, .satir { display: grid; grid-template-columns: 112px minmax(0, 1fr) 48px 88px 120px 72px 80px 44px; gap: 12px; align-items: center; }
.satir-bas { padding: 0 13px 6px; color: var(--muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.satir { position: relative; padding: 10px 12px; border-top: 1px solid var(--line); font-size: var(--step--1); }
.satir:first-child { border-top: 0; }
.satir:hover { background: var(--hover); }
.satir:has(.s-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.s-bilgi { display: contents; }
.s-foto { display: block; width: 112px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--n-surface); }
.s-ad { display: grid; gap: 2px; min-width: 0; }
.s-link { font-weight: 650; color: var(--ink); text-decoration: none; font-size: var(--step-0); line-height: 1.3; }
.s-link::after { content: ""; position: absolute; inset: 0; }
.s-link:focus-visible { outline: none; }
.satir:hover .s-link { text-decoration: underline; text-underline-offset: 3px; }
.s-paket { color: var(--muted); }
.s-roz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.s-roz:empty { display: none; }
.s-roz .badge-sifir { position: static; }
.s-fiyat { font-weight: 700; font-family: var(--display); font-size: var(--step-0); white-space: nowrap; }
.s-tarih > span { display: block; }
.s-tarih { color: var(--muted); line-height: 1.35; }
@media (max-width: 1199px) {
  .satir-bas { display: none; }
  .s-begen { position: absolute; right: 6px; bottom: 6px; z-index: 1; }
  .satir { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 4px 12px; }
  .s-foto { width: 104px; grid-row: 1 / span 2; }
  .s-bilgi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; grid-column: 2; color: var(--muted); padding-right: 42px; } /* sağ altta beğen düğmesi (44 px) */
  .s-fiyat { order: -1; flex-basis: 100%; color: var(--ink); }
  .s-tarih > span { display: inline; }
  .s-tarih { order: 5; }
}
@media (max-width: 359px) { .satir { grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; } .s-foto { width: 84px; } }
/* telefonda "Marka / Model" katmanlı alt sayfa */
.kat-panel .filtre-ust { gap: 8px; }
.kat-panel .filtre-ust h2 { flex: 1; min-width: 0; }
.kat-geri { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 600; }
.kat-geri svg { width: 18px; height: 18px; }
.kat-sliste { list-style: none; margin: 0; padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; flex: 1; }
.kat-sec { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.kat-sliste li:first-child .kat-sec { border-top: 0; }
.kat-sec > span:first-child { flex: 1; min-width: 0; }
.kat-sec:hover { background: var(--hover); }
.kat-sec[aria-current="true"] { font-weight: 650; }
.kat-tumu { color: var(--primary); font-weight: 600; }
.kat-sec .kat-ileri { width: 16px; height: 16px; transform: rotate(180deg); color: var(--muted); }
.kat-sec .kat-ok { width: 16px; height: 16px; color: var(--primary); }
.satir-bas .s-foto { background: none; aspect-ratio: auto; height: 1px; }
.satir-bas > span { font: inherit; color: inherit; }
.satir-bas { padding: 0 12px 6px; }
.vitrin-yan .fikili { grid-template-columns: minmax(0, 1fr); }
.vitrin-ana > *, .vitrin-yan > * { min-width: 0; }
.bant-liste { position: relative; } /* içindeki sr-only (absolute) kaydırma alanında kırpılsın, sayfayı genişletmesin */
@media (min-width: 1200px) { .s-begen { position: relative; z-index: 1; } } /* dar satırda absolute (yukarıda); burada ezilmesin */
.s-ornek { font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; line-height: 1.6; }
/* "Cevaplarını düzenle" bandda yalnızca telefonda (masaüstünde cevap çipleri görünür) */
@media (min-width: 768px) { .bant-duzenle { display: none; } }
@media (max-width: 767px) { #vitrin-cevap { display: none; } .sira-sel { max-width: 170px; } }

/* ---------- 3. tur QA düzeltmeleri (18.10) ---------- */
/* DOM'da ana sütun önce (Tab önce aramaya, başlıklar sırayla); görselde sol sütun yine solda */
@media (min-width: 768px) { .vitrin > .vitrin-yan { grid-column: 1; grid-row: 1; } .vitrin > .vitrin-ana { grid-column: 2; grid-row: 1; } }
/* ziyaretçi kartı ve detayı: Yoldaşlık hücresi yok, şerit iki sütun (Batarya | Kış menzili), solda boşluk ve yalnız ayraç kalmaz */
.stats.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.stats-2 > .fence > .read, .stats.stats-2 > .stat-bat { grid-column: 1; border-left: 0; padding-left: 0; }
.stats.stats-2 > .menzil { grid-column: 2; }
.d-davet { margin: 0; }
/* bant kartının odak halkası kaydırma alanında kırpılmasın */
.bant-liste { padding: 6px 6px 10px; scroll-padding-inline: 6px; }
/* arama kutusunun odağı sitenin geri kalanı gibi 2 px kehribar halka */
.ara-kutu:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* kategori içinde arama seçeneği (öneri listesinin başı) */
.ara-o-icinde { font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 4px; border-radius: 8px 8px 0 0; }
/* donanımı yazılmamış paket: bağlantısız, yalnız sayı */
.kat-bos { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; color: var(--muted); font-size: var(--step--1); }
.kat-sec.kat-bos { cursor: default; color: var(--muted); }
.kat-sec.kat-bos:hover { background: none; }
.kat-ara-kaldir { margin: 8px 8px 0; font-size: var(--step--1); }
.kat-ara-kaldir a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
/* Marka / Model alt sayfası: uzun marka adı geri düğmesinde kısalır, başlığı sıkıştırmaz */
.kat-panel .kat-geri { flex: 0 1 auto; max-width: 40%; min-width: 0; }
.kat-geri-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* masaüstü satırı: Şehir sütunu uzun il adlarına yetsin (Kahramanmaraş, Afyonkarahisar), sığmazsa üç nokta ve title */
@media (min-width: 1200px) {
  .satir-bas, .satir { grid-template-columns: 112px minmax(0, 1fr) 48px 88px 120px 72px 108px 44px; }
  .s-sehir { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
/* dar satır: "yıl · km" ayraçlı (her genişlikte tek satıra sığar), şehir ve ilan tarihi ayrı satırlarda (tarih daha küçük);
   ayraç satır başında asılı kalmaz, "İstanbul 16 Ekim 2026" tek metin gibi okunmaz */
@media (max-width: 1199px) {
  .s-km::before { content: "·"; content: "·" / ""; margin-right: 10px; color: var(--muted); }
  .s-sehir { flex-basis: 100%; }
  .s-tarih { flex-basis: 100%; font-size: .75rem; }
}
/* dokunmatikte 44 px hedefler */
@media (pointer: coarse) {
  #vitrin-bas [data-act="ac-kapa"], .davet a, .filtre-alt .btn-text, .kat-ara-kaldir a { display: inline-flex; align-items: center; min-height: 44px; }
  .ara-q { min-height: 44px; }
  .hk-o { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 767px) { .bant-duzenle { display: inline-flex; align-items: center; min-height: 44px; } }
/* 320 px: "Ara" simgeye döner (ad ekran okuyucuda kalır), filtrede yıllar alt alta, düğme tek satır */
.ara-git-ic { display: none; width: 16px; height: 16px; }
#filtre-gor { white-space: nowrap; }
@media (max-width: 359px) {
  .ara-kutu { gap: 6px; padding-left: 10px; }
  .ara-q::placeholder { font-size: .875rem; }
  .filtre-alt .btn-text { white-space: nowrap; }
  .ara-git { padding-inline: 10px; }
  .ara-git-ic { display: block; }
  .ara-git-m { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .filtre-kok.sheet .fikili { grid-template-columns: minmax(0, 1fr); }
  .filtre-kok.sheet #filtre-gor { padding-inline: 12px; }
}
/* 768–859 px: üst menü sığsın (tema düğmesi dışarı itilmesin) */
@media (min-width: 768px) and (max-width: 859px) { .nav .nav-n { display: none; } }
/* açılış: arama kutusu ve hızlı bağlantılar (ilan bakmaya gelen doğrudan gezsin). Öneri listesi hero'da kırpılmasın. */
#v-anlat .hero { overflow: visible; }
#v-anlat .hero .aurora { overflow: hidden; }
.hero-ara { display: grid; gap: 12px; width: 100%; max-width: 640px; margin-top: 4px; position: relative; z-index: 5; }
.hero-ara .ara-form { color: var(--ink); }
.hero-ara .ara-kutu { border-color: var(--n-line); box-shadow: var(--shadow); }
.hero-kisa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hk-o { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--n-line); color: var(--n-ink); text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.hk-o:hover { background: var(--n-surface); }
.hk-o .kat-n { color: var(--n-muted); }
.hk-tum { border-color: var(--n-mint); color: var(--n-mint); }

/* ===================== Açık web teması (19.10.2026; sözleşme: "Açık web teması") =====================
   Web varsayılan olarak açık açılır (işletim sistemi koyu olsa da): <html data-theme="light"> boyamadan önce yazılır,
   kullanıcı başlıktaki düğmeyle koyuya geçerse localStorage['evegard-tema'] = 'dark'. Koyu tema eskisi gibi kalır.
   Açıkta "gece" belirteçleri (üst çubuk, açılış bandı, fotoğraf yer tutucuları) de açık olur; koyu zemin yalnızca küçük
   alanlarda (fotoğraf üstü rozetler) kalır. Renkler: zemin #F6F9F7, yüzey #FFFFFF, metin #10231D, ikincil #4A5E56,
   çizgi #D5E1DB, çam yeşili #1E6B52, kehribar #9E6010 / #F2B45A, nane #86D0AE yalnızca küçük vurgularda. */
:root[data-theme="light"] {
  --bg: #F6F9F7; --surface: #FFFFFF; --chip: #E7F0EB; color-scheme: light;
  --n-bg: #FFFFFF; --n-surface: #EAF2EE; --n-ink: #10231D; --n-muted: #4A5E56; --n-mint: #1E6B52; --n-amber: #9E6010; --n-line: #D5E1DB;
  --n-cizgi: url(#yl-aurora-acik);
  --yol-can-b: color-mix(in srgb, #1E6B52 82%, #86D0AE);
  --shadow: 0 10px 28px rgba(16, 35, 29, .10);
}
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(16, 35, 29, .35); border-bottom-color: transparent; position: relative; z-index: 20; }
:root[data-theme="light"] .nav a:hover, :root[data-theme="light"] .theme-btn:hover, :root[data-theme="light"] .hesap-btn:hover, :root[data-theme="light"] .sekme:hover { background: var(--chip); }
:root[data-theme="light"] .proto-strip { background: #EEF5F1; }
/* açılış bandı: yumuşak nane ışığı, koyu değil */
:root[data-theme="light"] .hero { background: radial-gradient(120% 90% at 85% 0%, #DFF1E8 0%, rgba(223, 241, 232, 0) 60%), linear-gradient(180deg, #F1F8F4 0%, #F6F9F7 100%); }
:root[data-theme="light"] .aurora span:nth-child(1) { background: #86D0AE; opacity: .32; }
:root[data-theme="light"] .aurora span:nth-child(2) { background: #F2B45A; opacity: .16; }
:root[data-theme="light"] .aurora span:nth-child(3) { background: #86D0AE; opacity: .18; }
:root[data-theme="light"] .hero h1 { color: #0F2A21; }
:root[data-theme="light"] .hero-ara .ara-kutu { background: var(--surface); }
:root[data-theme="light"] .hk-o { background: rgba(255, 255, 255, .7); }
:root[data-theme="light"] .hk-tum { background: var(--surface); }
/* sıfır rozeti: nane zemin, koyu yazı (8,9:1) */
:root[data-theme="light"] .badge-sifir { background: #86D0AE; color: #0B2A1F; }
:root[data-theme="light"] .avatar { background: #86D0AE; color: #0B2A1F; }
:root[data-theme="light"] .nokta.d-red, :root[data-theme="light"] .nokta.d-askida { background: #B3261E; }
/* kartlar ve paneller beyaz yüzeyde ince gölgeyle ayrışsın */
:root[data-theme="light"] .card, :root[data-theme="light"] .satirlar, :root[data-theme="light"] .kat-agac, :root[data-theme="light"] .filtre-panel, :root[data-theme="light"] .wizard { box-shadow: 0 1px 2px rgba(16, 35, 29, .05), 0 8px 24px -18px rgba(16, 35, 29, .25); }
.theme-btn { position: relative; }

/* ===================== Kurumsal hesap, il/ilçe, ilan hakkı, Mağazam (19.10.2026) ===================== */
/* satıcı rozeti: "Galeri · Firma", "Yetkili bayi · Firma", "Bireysel" (kart, satır, detay) */
.satici-rozet { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; font-size: .75rem; font-weight: 600; line-height: 1.6; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.satici-rozet .ic { width: 12px; height: 12px; flex: none; }
.satici-rozet .sr-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.satici-rozet.sr-galeri, .satici-rozet.sr-bayi { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.satici-satir { margin: 2px 0 0; display: flex; min-width: 0; }
.satici-kart { margin-top: -2px; }
.satici-detay { margin-top: 4px; }
/* onaylı firma rozeti (başlık, menü, Hesabım, Mağazam) */
.kurumsal-rozet { display: inline-flex; align-items: center; gap: 2px; font-size: .8125rem; font-weight: 700; padding: 1px 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); line-height: 1.5; white-space: nowrap; }
.kurumsal-rozet.kr-kucuk { font-size: .6875rem; padding: 0 7px; }
.hesap-rozet { display: inline-flex; }
.hesap-rozet .kurumsal-rozet { background: var(--n-mint); color: var(--n-bg); }
.avatar-firma .ic { width: 16px; height: 16px; }
.hesap-kurumsal .hesap-lbl { max-width: 16ch; }
.hm-bas .kurumsal-rozet { justify-self: start; }
@media (max-width: 1099px) { .hesap-rozet { display: none; } }
/* il seçici (combobox) */
.il-sec { position: relative; }
.il-sec .il-q { padding-right: 36px; }
.il-sec .il-ok { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.il-liste { max-height: 264px; overflow: auto; overscroll-behavior: contain; }
.il-liste .ara-o { min-height: 36px; padding: 6px 10px; }
.il-yok { color: var(--muted); cursor: default; }
/* filtre: Tüm iller araması ve ilçe grubu */
.il-ara { display: grid; gap: 4px; margin-top: 4px; }
.il-ara label { font-size: var(--step--1); font-weight: 600; }
.il-ara-kutu { position: relative; display: block; }
.il-ara-kutu .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.il-ara-kutu .inp { padding-left: 30px; min-height: 40px; }
.il-sonuc:empty { display: none; }
.il-sonuc .fsec-liste { border: 1px solid var(--line); padding: 4px; }
.fgrup-ilce { padding: 10px 10px 8px; margin: -4px -6px 0; border-radius: 10px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, var(--line)); }
.ilce-il { margin: 6px 0 0; font-weight: 650; font-size: var(--step--1); }
.ilce-liste { max-height: 260px; }
.fgrup-ilce .fcb.bos input { opacity: .75; }
/* kurumsal başvuru şeridi */
.kurumsal-yuva { margin-bottom: 16px; }
.kurumsal-serit p { margin: 0; }
.kurumsal-serit a { font-weight: 600; }
.ks-bekliyor { box-shadow: inset 3px 0 0 var(--accent); }
.ks-bekliyor svg { color: var(--accent); }
.info-red { background: color-mix(in srgb, var(--error) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--error); }
.info-red svg { color: var(--error); }
/* İlan ver: ilan hakkı satırı ve hakkı biten bireysel üye */
.ivw-hak { margin-bottom: 4px; }
.ivw-hak p { margin: 0; }
.ivw-hak.hak-uyari { box-shadow: inset 3px 0 0 var(--accent); }
.ivw-hak.hak-uyari svg { color: var(--accent); }
.hak-dolu .row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.ivw-satici-not { margin-top: 4px; }
/* firma formu */
.firma-form { display: grid; gap: 14px; }
.firma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .firma-grid { grid-template-columns: minmax(0, 1fr); } }
.gp .firma-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .gp[data-adim="firma"] { width: min(640px, calc(100vw - 32px)); max-width: none; } .gp .firma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gp-tur-w { margin: 4px 0 2px; }
.gp-tur-w .help { margin-top: 4px; }
.firma-dl { margin-top: 4px; }
#hb-kurumsal .row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
/* Mağazam */
.mg-ust { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 767px) { .mg-ust { grid-template-columns: minmax(0, 1fr); } }
.mg-firma, .mg-paket { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.mg-unvan { font-size: var(--step-2); font-variation-settings: "opsz" 48; font-weight: 650; overflow-wrap: anywhere; }
.mg-paket { background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.mg-paket-ad { font-family: var(--display); font-weight: 650; font-size: var(--step-1); line-height: 1.3; }
.mg-paket-alt { color: var(--muted); }
.mg-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mg-bas h2 { font-size: var(--step-1); font-variation-settings: "opsz" 24; font-weight: 650; }
.mg-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 559px) { .mg-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mg-sayi { display: grid; gap: 0; justify-items: start; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-height: 44px; }
.mg-sayi b { font-family: var(--display); font-size: var(--step-2); font-weight: 650; line-height: 1.1; }
.mg-sayi span { color: var(--muted); font-size: var(--step--1); }
.mg-sayi:hover { border-color: var(--primary); }
.mg-sayi.secili { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.mg-suz { margin-bottom: 12px; overflow-x: auto; }
.mg-tablo { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mg-tablo th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mg-tablo td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mg-tablo tr:last-child td { border-bottom: 0; }
.mg-ilan { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mg-foto { width: 88px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--n-surface); flex: none; display: grid; place-items: center; }
.mg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-ad { display: grid; gap: 1px; min-width: 0; }
.mg-ad b { overflow-wrap: anywhere; }
.mg-fiyat { font-weight: 650; white-space: nowrap; }
.mg-durum .mg-red { display: block; margin-top: 4px; }
.mg-red { color: var(--error); max-width: 28ch; }
.mg-tarih { color: var(--muted); font-size: var(--step--1); white-space: nowrap; }
.mg-eylem { text-align: right; white-space: nowrap; }
.mg-eylem > * + * { margin-left: 8px; }
.mg-et { display: none; }
.mg-bos { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
@media (max-width: 767px) {
  .mg-tablo, .mg-tablo tbody, .mg-tablo tr, .mg-tablo td { display: block; }
  .mg-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mg-tablo tr { padding: 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .mg-tablo tr:last-child { border-bottom: 0; }
  .mg-tablo td { border: 0; padding: 0; }
  .mg-ilan { grid-column: 1 / -1; }
  .mg-foto { width: 72px; }
  .mg-et { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; }
  .mg-tablo td.mg-ilan { display: flex; }
  .mg-eylem { grid-column: 1 / -1; text-align: left; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .mg-eylem > * + * { margin-left: 0; }
}
@media (max-width: 767px) { .mg-suz .seg { display: inline-flex; border-radius: 18px; } }

/* ---------- Kendini anlat: sohbet gibi adım adım (22.10.2026) ---------- */
.wizard.sohbet { padding-bottom: 0; }
.wizard.sohbet .qs { gap: 0; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sohbet #w-say, .sohbet #w-gor { display: none; }
.sh-satir { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.sh-satir:first-child { border-top: 0; margin-top: 8px; }
.sh-tik { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.sh-tik .ic { width: 14px; height: 14px; }
.sh-ad { flex: none; color: var(--muted); font-size: var(--step--1); font-weight: 600; min-width: 7.5em; }
.sh-deger { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-degistir { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--step--1); }
.sh-degistir .ic { width: 13px; height: 13px; }
.sohbet .q.sh-aktif { border-top: 1px solid var(--line); margin-top: 8px; padding: 18px 0 4px; }
.sohbet .q.sh-aktif > legend .q-text { font-family: var(--display); font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
.sh-no { display: block; width: 100%; color: var(--primary); font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; }
.sohbet .q:not(.sh-aktif) .sh-no { display: none; }
.sohbet .q.sh-aktif .q-val { font-size: var(--step-0); }
.sh-eylem { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 14px; }
.sh-geri { display: inline-flex; align-items: center; gap: 4px; font-size: var(--step--1); }
.sh-geri .ic { width: 13px; height: 13px; }
.sh-siradaki { color: var(--muted); font-size: var(--step--1); margin: 6px 0 2px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sh-kart { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 14px 0 6px; background: var(--bg); display: grid; gap: 8px; }
.sh-kart .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sh-kart-h { font-family: var(--display); font-size: var(--step-1); font-weight: 700; line-height: 1.25; margin: 0; }
.sh-sonuc { border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 16px; padding: 18px; margin: 14px 0 6px; display: grid; gap: 12px; min-width: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface) 60%); }
.sh-sonuc-bas { display: flex; gap: 12px; align-items: flex-start; }
.sh-sonuc-bas p { margin: 4px 0 0; }
.sh-yildiz { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.sh-yildiz .ic { width: 18px; height: 18px; }
.sh-liste { grid-auto-columns: minmax(176px, 1fr); }
.sh-sonuc-alt { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; }
.sohbet .wiz-foot { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.sh-ilerleme { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: var(--step--1); font-weight: 600; flex: 1 1 200px; min-width: 0; }
.sh-cubuk { flex: 0 1 160px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sh-cubuk > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .35s ease; }
.sh-simdi { margin-left: auto; }
@keyframes sh-gel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sh-gel { animation: sh-gel .38s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .sh-gel { animation: none; } .sh-cubuk > span { transition: none; } }
@media (max-width: 560px) {
  /* telefonda: onay işareti | başlık üstte, değer altta | Değiştir sağda (tek satır yüksekliği az) */
  .sh-satir { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "tik ad btn" "tik deger btn"; column-gap: 10px; row-gap: 0; padding: 9px 0; }
  .sh-tik { grid-area: tik; }
  .sh-ad { grid-area: ad; min-width: 0; font-size: 12.5px; }
  .sh-deger { grid-area: deger; white-space: normal; }
  .sh-degistir { grid-area: btn; }
  .sh-simdi { margin-left: 0; }
}

/* ---------- "Sana en çok hangisi uyuyor?": Bifröst kemeri rozetleri (22.10.2026) ----------
   Çizimler ortak/simgeler.js'te (uygulamayla aynı): logodaki kemer biçiminde rozet, içinde tarzın sembolü. Her tarzın
   kendi yumuşak rengi var (--tz rozet, --tz-k sembol). Seçilince rozet zıplar, sembol kendi hareketini yapar: şimşek
   çakar, hız okları ileri kayar, kalp atar, binalar yükselir, hilal sallanır. Azaltılmış harekette animasyon yok. */
[data-tz="genc"], .chip-sec:has(> [data-tz="genc"]) { --tz: #F2B45A; --tz-k: #8A520C; }
[data-tz="sportif"], .chip-sec:has(> [data-tz="sportif"]) { --tz: #F2937A; --tz-k: #A63E24; }
[data-tz="aile"], .chip-sec:has(> [data-tz="aile"]) { --tz: #86D0AE; --tz-k: #1E6B52; }
[data-tz="sehirli"], .chip-sec:has(> [data-tz="sehirli"]) { --tz: #94C6EA; --tz-k: #245E88; }
[data-tz="konfor"], .chip-sec:has(> [data-tz="konfor"]) { --tz: #BCAEF0; --tz-k: #52409C; }
.tz-yuvar { flex: none; display: inline-grid; place-items: center; }
.tz-yuvar .tz-ic { width: 20px; height: 20px; display: block; overflow: visible; }

/* Kendini anlat'taki tarz sorusu: çizimli kartlar */
#w-q-tarz .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
#w-q-tarz .chip-sec { position: relative; display: grid; justify-items: start; align-content: start; gap: 8px; padding: 10px 12px 13px; border-radius: 16px; min-height: 0;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); font-size: var(--step-0); font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
#w-q-tarz .chip-sec:hover:not([aria-disabled="true"]) { transform: translateY(-2px); border-color: var(--tz-k); box-shadow: 0 12px 24px -18px rgba(16, 35, 29, .55); }
:root[data-theme="dark"] #w-q-tarz .chip-sec:hover:not([aria-disabled="true"]) { border-color: var(--tz); }
#w-q-tarz .chip-sec:active:not([aria-disabled="true"]) { transform: translateY(0) scale(.98); }
#w-q-tarz .chip-sec .tz-yuvar { width: 100%; height: 74px; border-radius: 12px; transition: background-color .2s ease; }
#w-q-tarz .chip-sec .tz-yuvar .tz-ic { width: 64px; height: 64px; }
#w-q-tarz .chip-txt { gap: 2px; }
#w-q-tarz .chip-txt > span { font-weight: 650; line-height: 1.25; }
#w-q-tarz .chip-sec small { font-size: 12.5px; color: var(--muted); }
#w-q-tarz .chip-sec[aria-checked="true"] { background: color-mix(in srgb, var(--tz) 14%, var(--surface)); color: var(--ink); border-color: var(--tz-k); box-shadow: 0 0 0 1px var(--tz-k) inset; }
#w-q-tarz .chip-sec[aria-checked="true"] .tz-yuvar { background: color-mix(in srgb, var(--tz) 34%, var(--surface)); }
:root[data-theme="dark"] #w-q-tarz .chip-sec[aria-checked="true"] { background: color-mix(in srgb, var(--tz) 12%, var(--surface)); border-color: var(--tz); box-shadow: 0 0 0 1px var(--tz) inset; }
:root[data-theme="dark"] #w-q-tarz .chip-sec[aria-checked="true"] .tz-yuvar { background: color-mix(in srgb, var(--tz) 20%, var(--surface)); }
#w-q-tarz .chip-sec[aria-checked="true"] small { color: var(--muted); }
#w-q-tarz .chip-sec .chk { position: absolute; top: 9px; right: 9px; z-index: 1; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--tz-k); color: #fff; }
:root[data-theme="dark"] #w-q-tarz .chip-sec .chk { background: var(--tz); color: #0E181B; }
#w-q-tarz .chip-sec[aria-disabled="true"] { opacity: .5; border-style: dashed; }

/* seçilince: rozet zıplar, sembol kendi hareketini yapar */
@keyframes tz-zipla { 0% { transform: scale(.86); } 55% { transform: scale(1.1); } 100% { transform: none; } }
@keyframes tz-cak { 0%, 100% { opacity: 1; transform: none; } 20% { opacity: .2; } 35% { opacity: 1; transform: scale(1.18); } 50% { opacity: .35; } 65% { opacity: 1; } }
@keyframes tz-ok { 0%, 100% { transform: none; } 45% { transform: translateX(3.5px); } }
@keyframes tz-kalp { 0%, 100% { transform: none; } 25% { transform: scale(1.28); } 50% { transform: scale(.95); } 75% { transform: scale(1.16); } }
@keyframes tz-yuksel { from { transform: scaleY(.3); } to { transform: none; } }
@keyframes tz-salla { 0%, 100% { transform: none; } 30% { transform: rotate(-16deg); } 65% { transform: rotate(9deg); } }
@keyframes tz-parla { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .2; transform: scale(.5); } }
.tz-ic .t-kemer, .tz-ic .t-simsek, .tz-ic .t-ok1, .tz-ic .t-ok2, .tz-ic .t-kalp, .tz-ic .t-bina1, .tz-ic .t-bina2, .tz-ic .t-bina3, .tz-ic .t-ay, .tz-ic .t-yildiz { transform-box: view-box; }
.tz-ic .t-kemer { transform-origin: 24px 45px; }
.tz-ic .t-simsek { transform-origin: 24px 32.5px; }
.tz-ic .t-kalp { transform-origin: 24px 36px; }
.tz-ic .t-bina1, .tz-ic .t-bina2, .tz-ic .t-bina3 { transform-origin: 24px 42px; }
.tz-ic .t-ay { transform-origin: 28px 33px; }
.tz-ic .t-yildiz { transform-origin: 31.8px 28.8px; }
.chip-sec[aria-checked="true"] .t-kemer { animation: tz-zipla .45s cubic-bezier(.2, .8, .2, 1); }
.chip-sec[aria-checked="true"] .t-simsek { animation: tz-cak .7s ease-out .1s; }
.chip-sec[aria-checked="true"] .t-ok1 { animation: tz-ok .5s ease-in-out .08s 2; }
.chip-sec[aria-checked="true"] .t-ok2 { animation: tz-ok .5s ease-in-out .16s 2; }
.chip-sec[aria-checked="true"] .t-kalp { animation: tz-kalp .8s ease-in-out .1s; }
.chip-sec[aria-checked="true"] .t-bina1 { animation: tz-yuksel .45s .05s cubic-bezier(.2, .8, .2, 1) both; }
.chip-sec[aria-checked="true"] .t-bina2 { animation: tz-yuksel .45s .13s cubic-bezier(.2, .8, .2, 1) both; }
.chip-sec[aria-checked="true"] .t-bina3 { animation: tz-yuksel .45s .21s cubic-bezier(.2, .8, .2, 1) both; }
.chip-sec[aria-checked="true"] .t-ay { animation: tz-salla .8s ease-in-out .05s; }
.chip-sec[aria-checked="true"] .t-yildiz { animation: tz-parla .7s ease-in-out .2s; }
@media (prefers-reduced-motion: reduce) {
  .chip-sec[aria-checked="true"] .tz-ic * { animation: none !important; }
  #w-q-tarz .chip-sec, #w-q-tarz .chip-sec:hover, #w-q-tarz .chip-sec:active { transform: none; transition: none; }
}

/* ---------- Türkiye'de en çok satanlar: kompakt ilk 10 (22.10.2026) ---------- */
.tops > .wrap.tops-kompakt { padding-block: 30px 32px; gap: 14px; }
.tops-kompakt .tops-head { max-width: none; gap: 6px; }
.tops-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.tops-kompakt .tops-head .btn-satir { font-size: inherit; }
.tops-kompakt .tops-pazar { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tops-kompakt .tops-pazar li { font-size: var(--step--1); color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.tops-kompakt .tops-pazar b { color: var(--ink); font-family: var(--display); font-weight: 700; margin-right: 2px; }
.tops-list.tops-ilk10 { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: 6px 22px; overflow: visible; padding: 0; align-items: start; }
@media (min-width: 860px) { .tops-list.tops-ilk10 { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); } }
.tops-ilk10 > .top { background: transparent; border: 0; border-radius: 12px; padding: 0; gap: 0; scroll-snap-align: none; }
.top-satir { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; align-items: center; column-gap: 12px; row-gap: 5px; padding: 9px 12px; border-radius: 12px;
  grid-template-columns: 30px minmax(0, 1fr) auto 16px; grid-template-areas: "sira ad adet ok" "sira cubuk ilan ok"; transition: background-color .15s ease; }
.top-satir:hover { background: var(--bg); }
.top-satir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.top-satir[aria-expanded="true"] { background: var(--bg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tops-ilk10 .top-sira { grid-area: sira; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--muted); background: var(--chip); font-variation-settings: normal; line-height: 1; }
.tops-ilk10 .top-1 .top-sira { background: #F2B45A; color: #3B2504; }
.tops-ilk10 .top-2 .top-sira, .tops-ilk10 .top-3 .top-sira { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--primary); }
.tops-ilk10 .top-ad { grid-area: ad; min-width: 0; font-size: var(--step-0); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-marka { color: var(--muted); font-weight: 500; }
.tops-ilk10 .top-ad b { font-weight: 650; }
.tops-ilk10 .top-adet { grid-area: adet; font-size: var(--step--1); color: var(--muted); line-height: 1.2; text-align: right; }
.tops-ilk10 .top-adet b { font-family: var(--display); font-size: var(--step-1); color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.top-cubuk { grid-area: cubuk; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.top-cubuk > span { display: block; height: 100%; width: var(--oran); border-radius: inherit; background: var(--primary); }
.top-1 .top-cubuk > span { background: linear-gradient(90deg, #F2B45A, #9E6010); }
.top-ilan { grid-area: ilan; justify-self: end; font-size: 12px; font-weight: 600; color: var(--primary); }
.top-ok { grid-area: ok; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.top-satir[aria-expanded="true"] .top-ok { transform: rotate(180deg); }
.tops-ilk10 .top-neden { background: var(--bg); border-radius: 0 0 12px 12px; padding: 4px 14px 14px 54px; gap: 8px; }
.top-neden-h { font-weight: 650; font-size: var(--step--1); margin: 2px 0 0; }
.tops-kompakt .foot { margin: 0; }
@media (max-width: 520px) { .tops-ilk10 .top-neden { padding-left: 14px; } }
@media (prefers-reduced-motion: reduce) { .top-ok, .top-satir { transition: none; } }
/* marka logoları (22.10.2026): sıranın yanında 44×28 açık rozet, logo kendi renkleriyle; koyu temada da zemin açık kalır */
.top-satir.logolu { grid-template-columns: 30px 44px minmax(0, 1fr) auto 16px; grid-template-areas: "sira logo ad adet ok" "sira logo cubuk ilan ok"; }
.top-logo { grid-area: logo; display: grid; place-items: center; width: 44px; height: 28px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 35, 29, .12); }
.top-logo.bos { visibility: hidden; }
.top-logo img { display: block; width: auto; height: auto; max-width: 34px; max-height: 18px; }
:root[data-theme="dark"] .top-logo { background: #EDF3EF; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top-logo { background: #EDF3EF; box-shadow: none; } }
/* İlanlar'da marka logosu rozeti (22.10.2026): kategori ağacı, "Marka seç", liste satırı, kart, öneri bandı, detay */
.m-rozet { display: inline-grid; place-items: center; flex: none; vertical-align: middle; margin-right: 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 35, 29, .12); position: relative; top: -1px; }
.m-rozet img { display: block; }
.m-rozet.bos { visibility: hidden; }
.m-rozet-k { width: 30px; height: 20px; }
.m-rozet-o { width: 36px; height: 24px; border-radius: 7px; margin-right: 10px; }
:root[data-theme="dark"] .m-rozet { background: #EDF3EF; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-rozet { background: #EDF3EF; box-shadow: none; } }
.kat-agac .kat-ad { display: inline-flex; align-items: center; min-width: 0; }
.kat-agac .kat-ad .m-rozet { top: 0; }
.bk-ad .m-rozet { margin-right: 6px; }
/* telefonda ad sığsın: sıra ve rozet küçülür, adet bir boy küçülür, ad iki satıra kadar kırılır */
@media (max-width: 520px) {
  .top-satir.logolu { grid-template-columns: 26px 36px minmax(0, 1fr) auto 16px; column-gap: 8px; padding-inline: 8px; }
  .top-satir.logolu .top-sira { width: 26px; height: 26px; font-size: 13px; }
  .top-logo { width: 36px; height: 24px; border-radius: 7px; }
  .top-logo img { max-width: 28px; max-height: 15px; }
  .top-satir.logolu .top-ad { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .top-satir.logolu .top-adet b { font-size: var(--step-0); }
}

/* ---------- Üstteki "Biliyor muydun?" şeridi ---------- */
/* 22.10.2026: şerit sitenin en üstünde, menünün hemen altında ve açılış bölümünün üstünde */
.bilgi-ust-w { padding-block: 12px; }
.bilgi-ust-w .bilgi { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; padding: 10px 14px; }
/* sihirbaz başlığının altında kullanıcının cümlesi; altında küçük açıklama */
/* telefonda "Baştan al" başlığın sağ üstünde; başlıkla altındaki cümlenin arasına düşmesin */
@media (max-width: 520px) {
  .wizard .wiz-ust { position: relative; padding-right: 88px; }
  .wizard .wiz-ust #w-bastan { position: absolute; top: 4px; right: 0; }
}

/* ===================== Rehber · Sıfır fiyatlar (#fiyatlar, 22.10.2026) ===================== */
.fl-secimler { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 6px 0 4px; }
.fl-sec-k { display: grid; gap: 4px; font-size: var(--step--1); color: var(--muted); min-width: 220px; }
.fl-bas { margin: 8px 0 6px; }
.fl-tablo { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fl-tablo thead th { text-align: left; font-size: var(--step--1); font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.fl-tablo tbody th, .fl-tablo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 400; }
.fl-tablo tbody tr:last-child > * { border-bottom: 0; }
.fl-tablo tbody tr:hover { background: var(--bg); }
.fl-model { display: flex; align-items: center; gap: 0; }
.fl-model > span:last-child { display: grid; gap: 2px; min-width: 0; }
.fl-don { font-size: var(--step--1); color: var(--muted); }
.fl-fiyat, .fl-tablo td[data-k="Güç"], .fl-tablo td[data-k="Batarya"] { white-space: nowrap; }
.fl-fiyat b { font-family: var(--display); font-size: var(--step-0); margin-right: 8px; }
.fl-otv { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; }
.fl-otv-25 { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.fl-otv-55 { background: color-mix(in srgb, #F2B45A 26%, var(--surface)); color: #7A4A08; }
.fl-otv-65 { background: color-mix(in srgb, #F2B45A 40%, var(--surface)); color: #6A3E04; }
.fl-otv-75 { background: var(--chip); color: var(--ink); }
:root[data-theme="dark"] .fl-otv-55, :root[data-theme="dark"] .fl-otv-65 { color: #F2B45A; background: color-mix(in srgb, #F2B45A 16%, var(--surface)); }
.fl-ikinci .btn-text { font-size: var(--step--1); text-align: left; }
.fl-otv-kutu { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.fl-otv-kutu h2 { font-size: var(--step-1); margin: 0 0 8px; }
.fl-otv-kutu .yz-tablo { margin: 12px 0 6px; }
/* Rehber · güncel veri rozeti, eskime uyarısı, "doğrulanıyor" işareti, kalem kaynağı (23.10.2026) */
.gv-rozet { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--step--1); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 5px 12px; }
.gv-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.gv-eski .gv-nokta { background: #F2B45A; }
.gv-cok-eski .gv-nokta { background: #D9534F; }
.gv-uyari { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; font-size: var(--step--1); background: color-mix(in srgb, #F2B45A 18%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, #F2B45A 45%, var(--line)); }
.gv-dog { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.gv-kay { font-size: 11px; color: var(--muted); white-space: nowrap; }
a.gv-kay { text-decoration: underline; text-underline-offset: 2px; }
/* Yönetim · Veri güncelleme bölümü */
.ad-vg { margin-top: 20px; }
.ad-vg .ad-alt-h { font-size: var(--step-0); margin: 16px 0 6px; }
.vg-taz { font-weight: 600; }
.vg-taze { color: var(--primary); }
.vg-eski { color: #9A5B00; }
.vg-cok-eski { color: #B3261E; }
:root[data-theme="dark"] .vg-eski { color: #F2B45A; }
:root[data-theme="dark"] .vg-cok-eski { color: #FF8A80; }
.vg-liste { margin: 0; padding-left: 18px; }
.vg-tablo { width: 100%; }
.vg-ayrinti { margin-top: 10px; }
.vg-ayrinti summary { cursor: pointer; font-weight: 600; }
.fiyatlar > .foot { margin-top: 14px; }
/* telefonda tablo satırları kart olur */
@media (max-width: 760px) {
  .fl-tablo, .fl-tablo tbody, .fl-tablo tr, .fl-tablo th, .fl-tablo td { display: block; }
  .fl-tablo thead { display: none; }
  .fl-tablo tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .fl-tablo tbody tr:last-child { border-bottom: 0; }
  .fl-tablo tbody th, .fl-tablo td { padding: 0; border: 0; }
  .fl-tablo tbody th.fl-ad, .fl-tablo td.fl-fiyat, .fl-tablo td.fl-ikinci { grid-column: 1 / -1; }
  .fl-tablo td[data-k]:not(.fl-fiyat)::before { content: attr(data-k); display: block; font-size: 12px; color: var(--muted); }
  .fl-sec-k { min-width: 0; flex: 1 1 160px; }
}
/* Rehber girişi: fiyat listesine kısa bağlantı */
.fl-giris-ic { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; padding: 16px 20px; }
.fl-giris h2 { margin: 2px 0 4px; }
.fl-giris .muted { margin: 0; }
.fl-giris-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fl-giris-liste li { display: flex; align-items: center; gap: 0; font-size: var(--step--1); }
.fl-giris-liste li > span:not(.m-rozet) { flex: 1; min-width: 0; }
.fl-giris-liste b { font-family: var(--display); white-space: nowrap; margin-left: 10px; }
@media (max-width: 760px) { .fl-giris-ic { grid-template-columns: 1fr; } }

/* ===================== Rehber · Şarj kaça gelir? (#sarj-maliyeti, 22.10.2026) ===================== */
.sm-duzen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sm-form { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.sm-alan { display: grid; gap: 8px; }
.sm-lbl { font-weight: 650; }
.sm-km { display: flex; align-items: center; gap: 10px; }
.sm-km .inp { max-width: 160px; }
.sm-hizli { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-km-sec { all: unset; box-sizing: border-box; cursor: pointer; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--step--1); display: inline-flex; align-items: center; }
.sm-km-sec[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.sm-km-sec:focus-visible, .sm-sec:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sm-secler { display: grid; gap: 8px; }
.sm-uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-sec { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-height: 44px; }
.sm-sec[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.sm-sec-ad { font-weight: 650; }
.sm-sec-alt { font-size: 12px; color: var(--muted); }
.sm-fiyat summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.sm-fiyat-ic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 8px; }
.sm-f { display: grid; gap: 4px; font-size: var(--step--1); }
.sm-sonuc { position: sticky; top: 16px; display: grid; gap: 14px; }
.sm-kiyas { display: grid; gap: 12px; }
.sm-kutu { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sm-ev { border-left: 3px solid var(--primary); }
.sm-benzin { border-left: 3px solid var(--muted); }
.sm-k-bas { margin: 0; font-size: var(--step--1); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sm-k-ay { margin: 2px 0; font-size: var(--step-0); }
.sm-k-ay b { font-family: var(--display); font-size: var(--step-2); }
.sm-cubuk { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line); margin-top: 10px; }
.sm-cub-ev { background: var(--primary); }
.sm-cub-ac { background: #86D0AE; }
.sm-cub-dc { background: #F2B45A; }
.sm-dagilim { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--step--1); color: var(--muted); }
.sm-dagilim b { color: var(--ink); font-weight: 600; }
.sm-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.sm-fark { margin: 0; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-radius: 12px; padding: 12px 14px; }
.sm-fark b { font-family: var(--display); }
.sm-fark-eksi { background: color-mix(in srgb, #F2B45A 18%, var(--surface)); }
.sm-sirket { margin-top: 24px; }
.sm-giris { margin-top: 12px; }
@media (max-width: 860px) {
  .sm-duzen { grid-template-columns: 1fr; }
  .sm-sonuc { position: static; }
}
@media (max-width: 520px) {
  .sm-uc { grid-template-columns: 1fr 1fr 1fr; }
  .sm-dort, .sm-fiyat-ic { grid-template-columns: 1fr; }
  .sm-form { padding: 14px; }
}

/* ======================================================================
   1.3.0 (22.10.2026): giriş sekmeleri, iki adımlı doğrulama, site ayarlarının görünümü, yönetim paneli
   ====================================================================== */
/* giriş penceresi: Bireysel | Galeri · Bayi */
.gp-sekmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--chip); border-radius: 14px; }
.gp-sekme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; padding: 0 10px; }
.gp-sekme svg { width: 16px; height: 16px; flex: none; }
.gp-sekme:hover { background: var(--hover); }
.gp-sekme[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(16, 35, 29, .14); }
.gp-gt-panel { display: grid; gap: 14px; }
.gp-kur-ac { margin: -6px 0 0; }
.gp-kur-ac .btn-text { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.gp-kur-ac svg { width: 16px; height: 16px; }
.info-uyari { background: color-mix(in srgb, #F2B45A 16%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.info-uyari svg { color: var(--accent); }
.gp-kapali p { margin: 0; }
/* duyuru şeridi (yönetimden; web ve uygulama) */
.site-duyuru { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-bottom: 1px solid var(--line); color: var(--ink); }
.site-duyuru.sd-uyari { background: color-mix(in srgb, #F2B45A 20%, var(--surface)); }
.sd-ic { display: flex; gap: 10px; align-items: flex-start; padding-block: 10px; font-size: var(--step--1); line-height: 1.5; }
.sd-ic p { margin: 0; overflow-wrap: anywhere; }
.sd-ic svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--primary); }
.sd-uyari .sd-ic svg { color: var(--accent); }
.sd-bakim { border-top: 1px dashed var(--line); }
/* bakım ekranı: ziyaretçi ve üyeye (yönetim rolü siteyi kullanır) */
.bakim-ekran { position: fixed; inset: 0; z-index: 120; background: var(--bg); display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.bakim-ic { max-width: 520px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.bakim-logo { width: min(220px, 60vw); height: auto; color: var(--ink); }
.bakim-ic h1 { font-size: var(--step-3); }
.bakim-m { font-size: var(--step-1); overflow-wrap: anywhere; }
html.bakim-modu { overflow: hidden; }
/* İlanlarım: gönderilmiş ilan silinmez */
.il-silinmez { margin: 6px 0 0; }
.durum-chip.d-yonetim { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); border-color: var(--primary); }
/* Hesabım → İki adımlı doğrulama; panelin kurulum ekranı */
.mfa-adim { margin: 0; padding-left: 1.3em; display: grid; gap: 16px; }
.mfa-adim li p { margin: 0 0 6px; }
.mfa-qr { display: block; width: 180px; height: 180px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.mfa-anahtar { display: inline-block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1rem; letter-spacing: .06em; background: var(--chip); padding: 6px 10px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }

/* ---------- yönetim paneli ---------- */
.ad-ust .nav { gap: 8px; }
.ad-kim { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--step--1); min-width: 0; }
.ad-kim > span:first-of-type { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-kim svg { width: 16px; height: 16px; flex: none; }
.ad-ust-btn { border: 1px solid var(--n-line); background: none; color: var(--ink); font: inherit; font-size: var(--step--1); font-weight: 600; min-height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.ad-ust-btn:hover { background: var(--hover); }
.ad-kapi { display: grid; gap: 14px; }
.ad-kapi h1 { font-size: var(--step-3); }
.ad-kapi-ic { width: 32px; height: 32px; color: var(--primary); }
.ad-giris { max-width: 420px; }
.ad-satir { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ad-diger summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ad-diger[open] { display: grid; gap: 12px; }
.ad-yetkisiz { text-align: center; justify-items: center; display: grid; gap: 10px; background: var(--surface); border: 1px dashed var(--field); border-radius: 14px; padding: 32px 20px; }
.ad-yetkisiz h2 { font-size: var(--step-1); }
.ad-uyari { align-items: center; }
.ad-uyari p { flex: 1; margin: 0; }
.ad-uyari .icon-btn { flex: none; }
.ad-seg { flex: 0 1 auto; max-width: 100%; min-width: 0; }
@media (max-width: 767px) { .ad-seg { display: inline-flex; border-radius: 18px; } .ad-seg button { padding: 0 10px; } }
.ad-ara { position: relative; flex: 1 1 240px; min-width: 0; max-width: 420px; }
.ad-ara svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ad-ara .inp { padding-left: 36px; width: 100%; min-height: 44px; }
.ad-sec .inp { min-height: 44px; }
.ad-daha { text-align: center; }
.ad-maske-not { display: flex; gap: 6px; align-items: center; margin: 0; }
.ad-maske-not svg { width: 14px; height: 14px; flex: none; }
.tag-chip.ad-rol { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.tag-chip.ad-kurucu { background: color-mix(in srgb, #F2B45A 26%, var(--surface)); color: var(--ink); }
.tag-chip.ad-maske { background: var(--chip); color: var(--muted); }
.btn-tehlike-dolu { background: var(--error); color: #fff; border-color: var(--error); }
:root[data-theme="dark"] .btn-tehlike-dolu { color: #2A0A07; }
.btn-tehlike-dolu:hover:not(:disabled) { filter: brightness(.94); }
.ad-dlg { max-width: 520px; display: grid; gap: 12px; }
.dlg-b { font-size: var(--step-1); }
.dlg-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; overflow-wrap: anywhere; }
.ad-dlg .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* özet */
.ad-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .ad-ozet { grid-template-columns: minmax(0, 1fr); } }
.ad-ozet .ad-kutu { align-content: start; }
.ad-ayar .ad-seg { justify-self: start; }
.ad-is-liste, .ad-durum-liste, .ad-son-liste, .ad-yetki-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ad-yetki-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-is { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ad-is:hover { border-color: var(--primary); }
.ad-is.vurgu { border-color: var(--accent); }
.ad-is svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ad-durum-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.ad-duyuru-ozet { color: var(--muted); font-size: var(--step--1); overflow-wrap: anywhere; text-align: right; max-width: 60%; }
.ad-son-liste li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px; overflow-wrap: anywhere; }
.ad-son-liste li.dk-red { box-shadow: inset 3px 0 0 var(--error); padding-left: 8px; }
/* ekip ve yetkiler */
.ad-ekip { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 699px) { .ad-ekip { grid-template-columns: minmax(0, 1fr); } }
.ad-oge-bas b .tag-chip, .ad-meta .tag-chip { display: inline-block; white-space: nowrap; margin: 2px 4px 2px 0; vertical-align: middle; }
.ad-yetkiler { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.ad-yetkiler legend { font-weight: 600; padding: 0 6px; }
.ad-paket { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.ad-yetki-anahtar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.ad-yetki { min-width: 0; }
.ad-yetki .switch { text-align: left; }
.ad-yetki .help { margin: -6px 0 6px 52px; }
.ad-ekip-not { grid-column: 1 / -1; margin: 0; }
.ad-aday { margin-top: 4px; }
/* site ayarları */
.ad-ayar { display: grid; gap: 16px; max-width: 760px; }
.ad-ayar fieldset { margin: 0; }
.ad-ayar legend { padding: 0 6px; }
.ad-anahtar .help { margin: -4px 0 0; }
.sa-onizleme-w { display: grid; gap: 6px; }
.sa-onizleme-w .site-duyuru { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.sd-bos { margin: 0; padding: 10px 0; }
.ad-ayar-dugme { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ad-sonuc { margin: 0; font-weight: 600; color: var(--primary); }
.ad-sonuc:empty { display: none; }
/* denetim kaydı */
.ad-kayit-suz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.ad-kayit-suz .inp { min-height: 44px; width: 100%; }
.ad-kayit-dugme { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 860px) { .ad-kayit-suz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ad-kayit-suz { grid-template-columns: minmax(0, 1fr); } }
.dk-kap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.dk-tablo { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.dk-tablo th, .dk-tablo td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.dk-tablo th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.dk-tablo td:first-child { white-space: nowrap; }
.dk-ayrinti { max-width: 360px; color: var(--muted); }
.dk-tablo tr.dk-red td { background: color-mix(in srgb, var(--error) 6%, var(--surface)); }
.dk-tablo tr.dk-red td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.dk-red-rozet { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--error); border: 1px solid var(--error); border-radius: 999px; padding: 0 8px; margin-right: 4px; }
@media (max-width: 767px) {
  .dk-kap { overflow: visible; border: 0; background: none; }
  .dk-tablo, .dk-tablo tbody, .dk-tablo tr, .dk-tablo td { display: block; width: 100%; }
  .dk-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dk-tablo tr { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; }
  .dk-tablo td { border: 0; padding: 3px 0; white-space: normal !important; max-width: none; }
  .dk-tablo td::before { content: attr(data-et) ": "; color: var(--muted); font-weight: 600; }
  .dk-tablo tr.dk-red { box-shadow: inset 3px 0 0 var(--error); }
  .dk-tablo tr.dk-red { background: color-mix(in srgb, var(--error) 6%, var(--surface)); }
  .dk-tablo tr.dk-red td, .dk-tablo tr.dk-red td:first-child { background: none; box-shadow: none; }
  .ad-ust .ad-kim { display: none; }
  .ad-ust .nav a#ad-siteye { display: none; }
  .ad-yetki-anahtar { grid-template-columns: minmax(0, 1fr); }
  .ad-ara { max-width: none; }
}
@media (max-width: 400px) {
  .ad-ust-btn { padding: 0 10px; }
  .ad-ust .ad-ad { display: none; }
}

/* ---------- Faz 0: ilansız ilk yayın (23.10.2026; faz0.js, yasal.js) ---------- */
.faz0-ilanlar { padding-block: 32px 64px; }
.f0-bilgi { max-width: 720px; display: grid; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.f0-bilgi h1 { font-size: var(--step-2); font-variation-settings: "opsz" 48; margin: 0; }
.f0-bilgi p { margin: 0; }
.f0-bilgi-m { font-size: 1.125rem; }
.f0-bilgi .row { margin-top: 8px; }
.f0-oneri { margin-top: 40px; }
.f0-oneri-bas h2, .f0-begeni h2 { margin: 0 0 4px; font-size: var(--step-1); }
.f0-oneri .cevaplar { margin: 16px 0 8px; }
.f0-yol-nedir { max-width: 72ch; margin: 0 0 20px; }
.f0-begeni { margin-top: 32px; }
.f0-begeni p { margin: 0; }
.f0-begeni-l { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.f0-begeni-l a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.f0-begeni-l a:hover { background: var(--hover); }
.f0-fiyat { margin: 2px 0 10px; }
.f0-fiyat b { font-family: var(--display); font-size: 1.125rem; font-weight: 650; }
.f0-yok { color: var(--muted); font-weight: 600; }
.f0-not { display: flex; gap: 8px; align-items: flex-start; max-width: 72ch; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--chip); }
.f0-not .ic { flex: none; margin-top: 3px; }
.f0-kart .c-head { align-items: flex-start; flex-wrap: nowrap; }
.f0-kart .c-head .begen-btn { flex: none; margin-top: -4px; }
.f0-kart .c-title { flex: 1 1 0; }
.f0-kart .c-actions { margin-top: auto; }
.f0-sh-liste { margin: 16px 0; }
.f0-md-fiyat, .f0-md-yol { width: 100%; }
button.hk-o { background: transparent; font-family: inherit; cursor: pointer; }
.ara-o-yok { color: var(--muted); cursor: default; }
.ara-o-n b { font-weight: 600; }
.foot-yasal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.foot-yasal a { color: inherit; text-underline-offset: 3px; }
.yasal { padding-bottom: 64px; }
.ys-metin { max-width: 72ch; }
.ys-metin h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.ys-metin p, .ys-metin li { line-height: 1.6; }
.ys-metin ul { padding-left: 1.2em; }
.taslak-uyari { max-width: 72ch; margin: 0 0 20px; padding: 12px 16px; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.yer-tutucu { background: #FFF1A8; color: #3D3200; padding: 0 3px; border-radius: 3px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .yer-tutucu { background: #5A4A08; color: #FFF1A8; }
.ys-tablo { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: var(--step--1); }
.ys-tablo th, .ys-tablo td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.ys-tablo code { font-size: .8125rem; overflow-wrap: anywhere; }
.ys-kunye { margin: 12px 0 20px; }
.ys-kunye > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ys-kunye dt { font-weight: 600; }
.ys-kunye dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .ys-kunye > div { grid-template-columns: minmax(0, 1fr); } .ys-tablo th { width: 40%; } }
.ys-diger ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

img { max-width: 100%; }