/* Lonca — ortak stiller (tanitim sayfasi + uygulama)
   Palet "Lonca 2": notr komur/gri yuzeyler, tek zumrut vurgu, kehribar ikincil vurgu.
   Katmanlar: bg < surface (kart) ; surface-2 = girintili alan. Metin tokenlari
   (text/muted/faint/accent/wheat/err/shop/member) bg, surface ve surface-2 uzerinde WCAG AA >= 4.5:1.
   line-strong kontrol kenarlari icin >= 3:1. Ayrintilar: docs/renk-temasi.md */

:root {
  --bg: #f3f4f6;          /* notr acik gri */
  --surface: #ffffff;     /* kart / panel */
  --surface-2: #e8eaee;   /* girintili alan, secili satir */
  --line: #d8dbe1;
  --line-strong: #868c96; /* form ve dugme kenari, 3:1 */
  --text: #15171b;
  --muted: #4c525c;
  --faint: #5f6570;

  --accent: #00775a;      /* lonca zumrudu */
  --accent-hover: #00624a;
  --accent-soft: #d3f2e6;
  --on-accent: #ffffff;
  --sky: #2b6690;
  --wheat: #8f5a00;       /* kehribar — fiyat notu, bekleyen durum */
  --gold: var(--wheat);

  --shop: #3f6b2e;        /* yosun — Forest */
  --shop-soft: #dde9d6;
  --member: #2f6390;      /* gol mavisi — Island */
  --member-soft: #d8e5ef;
  --wa: #177a42;
  --on-wa: #ffffff;
  --err: #ab3a28;
  --err-soft: #f7e0da;
  --on-err: #ffffff;
  --focus: #00775a;
  --shadow: rgb(16 18 22 / .12);
  --scrim: rgb(12 14 18 / .6);

  --hill-1: #dfe3e8; --hill-2: #c3e6d8; --hill-3: #6fbf9f; --hill-4: #0b5e48;

  --display: 'Manrope', system-ui, -apple-system, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r: 6px;
  --r-sm: 4px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #17181b;        /* notr komur */
    --surface: #1f2125;
    --surface-2: #2a2c31;
    --line: #34373d;
    --line-strong: #6c7079;
    --text: #eceef1;
    --muted: #a9adb5;
    --faint: #9196a0;
    --accent: #2fd39f;
    --accent-hover: #5ee0b6;
    --accent-soft: #163a2f;
    --on-accent: #03261b;
    --sky: #8ab9da;
    --wheat: #f2b445;
    --shop: #a3cb8c;
    --shop-soft: #1d2e20;
    --member: #8fbde3;
    --member-soft: #172839;
    --wa: #3ccb78;
    --on-wa: #05210f;
    --err: #f2937f;
    --err-soft: #3a1f1a;
    --on-err: #2a0f0a;
    --focus: #2fd39f;
    --shadow: rgb(0 0 0 / .45);
    --scrim: rgb(6 7 9 / .72);
    --hill-1: #1d2023; --hill-2: #22272a; --hill-3: #1e3a32; --hill-4: #22463b;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent-soft); }
img { max-width: 100%; }

/* ---------- Tipografi ---------- */
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.serif { font-family: var(--display); font-weight: 800; }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
h2 { font-size: 28px; line-height: 1.1; margin: 8px 0 18px; }
h3 { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 32px 0 12px; display: flex; align-items: center; gap: 10px; }
h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
h3 .dot { width: 7px; height: 7px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Marka ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; border-radius: var(--r-sm); }
.brand b { font: 800 22px/1 var(--display); letter-spacing: -.04em; }
.brand small { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line-strong); padding-left: 10px; margin-left: 2px; }

/* ---------- Form ogeleri ---------- */
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--text); background: var(--surface); width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 13px; outline: none; transition: border-color .12s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
textarea { min-height: 130px; font-family: var(--mono); font-size: 13px; resize: vertical; }
button, .btn {
  font: 500 14px/1 var(--body); border-radius: var(--r-sm); padding: 12px 16px; cursor: pointer; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
button:hover, .btn:hover { border-color: var(--text); color: var(--text); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.dark { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.dark:hover { color: var(--bg); opacity: .9; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: var(--on-wa); }
.btn.wa:hover { color: var(--on-wa); filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { border-color: var(--line-strong); }
button:disabled { opacity: .5; cursor: progress; }
button.small, .btn.small { padding: 8px 11px; font-size: 13px; }
.btn svg, button svg { width: 16px; height: 16px; flex: none; }

/* Dokunma katmani (bkz. ui.css basligi): genel butonlar dolgulu ve kabarik, alanlar gomuk.
   Burada durur ki sonra gelen bilesen kurallari ayni ozgullukte yine kazansin. */
/* ---------- Butonlar: varsayilan dolgulu (tonal), birincil parlak ve golgeli ----------
   Bilesene ozel sinifli butonlar (arama sonucu, kart gorseli, can sayaci...) kendi
   gorunumlerini korur; yalnizca genel butonlar bu katmani alir. */

:is(button:not([class]), button.small, button.primary, button.ghost, .btn) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  min-height: var(--tap); padding: 0 18px; border: 0; border-radius: var(--r);
  background: var(--btn-bg); color: var(--text);
  font: 650 15px/1.15 var(--body); letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 var(--highlight), 0 1px 0 var(--btn-lip), 0 3px 8px var(--btn-glow);
  transition: transform .12s ease, background-color .15s, box-shadow .15s, filter .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
:is(button:not([class]), button.small, button.primary, button.ghost, .btn):hover { background: var(--btn-bg-hover); color: var(--text); border-color: transparent; }
:is(button:not([class]), button.small, button.primary, button.ghost, .btn):active:not(:disabled) {
  transform: translateY(1px) scale(.98); box-shadow: inset 0 1px 3px var(--btn-lip);
}
:is(button.primary, .btn.primary) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 55%);
  color: var(--on-accent); font-weight: 750;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000),
    0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
:is(button.primary, .btn.primary):hover { background: var(--accent-hover); color: var(--on-accent); }
:is(button.small, .btn.small) { min-height: 40px; padding: 0 14px; border-radius: var(--r-sm); font-size: 14px; }
.btn.ghost, button.ghost { background: transparent; color: var(--accent); box-shadow: none; }
.btn.ghost:hover, button.ghost:hover { background: var(--accent-soft); color: var(--accent); }
.btn.dark { background: var(--text); color: var(--bg); }
.btn.wa { background: var(--wa); color: var(--on-wa); }
:is(button, .btn):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
:is(button:not([class]), button.small, button.primary, .btn):disabled { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }

/* ---------- Yazma alanlari: gomuk, buton gibi gorunmez ---------- */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])), select, textarea {
  font-family: var(--body); min-height: var(--tap); border-radius: var(--r); background: var(--field);
  border: 1px solid var(--line); box-shadow: var(--field-sunk);
}
textarea { font-family: var(--mono); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); }
label.check input { width: 20px; height: 20px; }

.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin: 0 0 16px; background: var(--surface); min-width: 0; }
legend { font: 800 17px var(--display); letter-spacing: -.02em; padding: 0 8px; margin-left: -8px; }
label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: grid; gap: 8px; }
label.check { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font: 400 14px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
label.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
code { font-family: var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: 12px; text-transform: none; letter-spacing: 0; }
details summary { cursor: pointer; }
.grid { display: grid; gap: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.err { color: var(--err); }
.msg { font-size: 14px; white-space: pre-wrap; }
.empty { color: var(--muted); padding: 22px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: 14px; }
.badge { background: var(--err); color: var(--on-err); border-radius: 3px; font: 600 10px/16px var(--mono); padding: 0 5px; min-width: 16px; text-align: center; }

.pips { display: inline-flex; gap: 5px; }
.pips i { width: 8px; height: 8px; display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.pips i:nth-child(3) { box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28); }

.spinner { width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Uygulama: ust bar + gezinme ----------
   Sade: metin linkleri, aktif sayfa ince alt cizgi; sagda mesaj ikonu ve avatar.
   Not: header'a backdrop-filter verme; mobilde sabit alt menuyu header'a hapseder. */
header.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--safe-t) 20px 0; }
header.top .in { max-width: 1080px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 28px; }
header.top .brand { flex: none; display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
header.top .brand img { width: 28px; height: 28px; }
header.top .brand b { font: 800 17px/1 var(--display); letter-spacing: -.02em; }

nav.tabs { display: flex; align-self: stretch; gap: 22px; }
nav.tabs a { position: relative; display: flex; align-items: center; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .12s; }
nav.tabs a svg { display: none; }
nav.tabs a:hover { color: var(--text); }
nav.tabs a.on { color: var(--text); }
nav.tabs a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
nav.tabs .tab-msg { display: none; }

.top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-link { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); }
.icon-link:hover, .icon-link.on { color: var(--text); background: var(--surface-2); }
.icon-link svg { width: 20px; height: 20px; }
.icon-link .badge { position: absolute; top: 3px; right: 2px; }
.account-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--on-accent); background: var(--accent); }
.account-link:hover { color: var(--on-accent); background: var(--accent-hover); }
.account-link.avatar-link { padding: 0; width: 34px; height: 34px; border-radius: 50%; justify-content: center; font-size: 14px; font-weight: 700; color: var(--member); background: var(--member-soft); box-shadow: 0 0 0 1px var(--line); }
.account-link.avatar-link.shop { color: var(--shop); background: var(--shop-soft); }
.account-link.avatar-link:hover, .account-link.avatar-link.on { box-shadow: 0 0 0 2px var(--accent); color: var(--member); background: var(--member-soft); }
.account-link.avatar-link.shop:hover, .account-link.avatar-link.shop.on { color: var(--shop); background: var(--shop-soft); }

@media (max-width: 860px) and (min-width: 721px) { header.top .in { gap: 18px; } nav.tabs { gap: 16px; } }
@media (max-width: 720px) {
  header.top { padding: var(--safe-t) 12px 0; }
  header.top .in { height: 56px; gap: 10px; }
  header.top .brand b { display: none; }
  .top-actions .icon-link { display: none; }
  .account-link:not(.avatar-link) { padding: 0 12px; font-size: 13px; }
  /* Alt sekme cubugu: ikon + kucuk etiket, aktif olan yalnizca renk */
  nav.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 0; height: auto; align-self: auto;
    border-top: 1px solid var(--line); background: var(--bg); padding: 0 0 var(--safe-b);
  }
  nav.tabs a { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 2px 7px; font-size: 10.5px; font-weight: 600; }
  nav.tabs a svg { display: block; width: 22px; height: 22px; }
  nav.tabs a.on { color: var(--accent); }
  nav.tabs a.on::after { left: 30%; right: 30%; top: -1px; bottom: auto; }
  nav.tabs .tab-msg:not([hidden]) { display: flex; }
  nav.tabs .dot-badge { position: absolute; top: 7px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px var(--bg); }
}

main.app { max-width: 1080px; margin: 0 auto; padding: 22px 20px calc(96px + var(--safe-b)); }

/* ---------- Uygulama: arama ---------- */
.app-hero { padding: 26px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.app-hero h1 { font-size: clamp(30px, 5.5vw, 44px); line-height: 1.05; margin: 14px 0 10px; }
.app-hero h1 em { color: var(--accent); }
.app-hero p { color: var(--muted); margin: 0; max-width: 480px; }
.searchbar { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); transition: border-color .12s; }
.searchbar:focus-within { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.searchbar input { flex: 1; border: 0; background: transparent; outline: none !important; padding: 14px 14px; min-width: 0; }
.searchbar button { border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.searchbar button.primary { border-radius: 0 3px 3px 0; padding: 0 22px; }
.searchbar .icon-btn { padding: 0 14px; background: transparent; color: var(--muted); }
.searchbar .icon-btn:hover { color: var(--accent); }
.searchbar .icon-btn svg { width: 19px; height: 19px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip { font: 400 13px/1 var(--body); padding: 7px 10px; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.chip:hover { color: var(--accent); border-color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); margin-top: 22px; background: var(--surface); }
.stat { padding: 14px 16px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 800 26px/1 var(--display); letter-spacing: -.03em; margin-bottom: 6px; }
.stat span { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.card-head { display: grid; grid-template-columns: 116px 1fr; gap: 20px; align-items: center; margin: 22px 0 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.card-head img { width: 116px; border-radius: 5px; display: block; }
.card-head h2 { margin: 0 0 10px; font-size: 28px; }
.counts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; }
.pill.shop { color: var(--shop); background: var(--shop-soft); }
.pill.member { color: var(--member); background: var(--member-soft); }
.ck { font-size: 13px; color: var(--muted); }
.ck b { color: var(--text); font-family: var(--mono); font-weight: 500; }
@media (max-width: 480px) { .card-head { grid-template-columns: 88px 1fr; gap: 14px; padding: 12px; } .card-head img { width: 88px; } .card-head h2 { font-size: 22px; } }

.owner { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--member); border-radius: var(--r); padding: 16px 16px 14px; margin-bottom: 10px; }
.owner.shop { border-left-color: var(--shop); }
.owner-top { display: flex; gap: 12px; align-items: center; }
.avatar { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; font: 800 17px var(--display); color: var(--member); background: var(--member-soft); flex: none; }
.owner.shop .avatar { color: var(--shop); background: var(--shop-soft); }
.owner-name { font-weight: 600; font-size: 15px; }
.owner-sub { font-size: 13px; color: var(--muted); }
.items { margin-top: 12px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.item .meta { color: var(--muted); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item .qty { font: 500 15px var(--mono); text-align: right; }
.item .price { text-align: right; font: 600 14px var(--mono); }
.cond { font: 600 10px/1 var(--mono); padding: 3px 5px; border-radius: 3px; border: 1px solid var(--line-strong); color: var(--text); }
.foil { font: 600 10px/1 var(--mono); padding: 4px 6px; border-radius: 3px; color: #fff; background: linear-gradient(90deg, #6f9fc4, #7fb7a5, #c2b26b); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.photo-status { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; }
.photo-status img { width: 50px; height: 70px; object-fit: cover; border-radius: 3px; }
.install { margin-top: 26px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--r); font-size: 14px; color: var(--text); background: var(--accent-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Uygulama: envanter ---------- */
.src { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.src:first-child { border-top: 0; padding-top: 0; }
.src .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.status { font: 600 10px/1 var(--mono); text-transform: uppercase; padding: 3px 6px; border-radius: 3px; }
.status.error { color: var(--err); background: var(--err-soft); }

/* ---------- Uygulama: mesajlar ---------- */
.thread { display: flex; gap: 12px; align-items: center; padding: 14px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.thread:hover { color: inherit; background: var(--surface); }
.thread .body { flex: 1; min-width: 0; }
.thread .last { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.unread .last { color: var(--text); font-weight: 500; }
.chat-head { display: flex; gap: 12px; align-items: center; margin: 10px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0; font-size: 22px; }
.chat { display:flex; flex-direction:column; gap:6px; margin:18px 0 calc(var(--composer-height,76px) + 20px); min-width:0; }
.bubble { max-width: 78%; padding: 9px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.bubble.me { align-self: flex-end; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bubble .t { font: 400 10px var(--mono); opacity: .65; margin-top: 4px; text-align: right; }
.bubble .card-ref { font: 600 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 4px; }
.composer { position: fixed; left: 0; right: 0; bottom:var(--bottom-nav-height,0px); z-index:40; padding:10px 16px calc(10px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); }
.composer .in { max-width:1040px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-width:0; min-height:46px; max-height: 140px; font-family: var(--body); font-size: 16px; resize: none; }
.composer button { height:46px; flex:none; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Otomatik tamamlama listesi ---------- */
.ac-host { position: relative; }
.ac {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 60;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  max-height: 340px; overflow-y: auto; padding: 4px 0;
  box-shadow: 0 12px 28px -14px var(--shadow);
}
.ac-head { display: flex; justify-content: space-between; padding: 8px 14px 6px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font: 500 15px/1.3 var(--body); color: var(--text); cursor: pointer; border-left: 2px solid transparent; }
.ac-item svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.ac-item mark { background: none; color: var(--accent); font-weight: 800; }
.ac-item.on { background: var(--accent-soft); border-left-color: var(--accent); }
.ac-item.on svg { color: var(--accent); }
:root[data-theme="dark"] .ac { box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7); }

/* Account card lists */
.list-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.list-actions button[aria-pressed="true"] { color:var(--on-accent); background:var(--accent); }
.saved-card { margin:20px 0; padding-bottom:16px; border-bottom:1px solid var(--line); }
.saved-card summary { cursor:pointer; padding:12px 0; }

/* Visual collection and accessible card details */
.collection-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:22px 0; }
.collection-heading h2 { margin:4px 0; }
.collection-summary { display:grid; grid-template-columns:1fr 2fr; gap:16px; margin-bottom:24px; }
.collection-summary > div { border:1px solid var(--line); background:var(--surface); padding:18px; border-radius:12px; display:grid; gap:4px; }
.collection-summary span,.collection-summary small { color:var(--muted); }
.collection-summary b { font-size:26px; letter-spacing:-.03em; }
.card-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:16px; border:1px solid var(--line); background:var(--surface); border-radius:12px; }
.card-filters label { flex:1 1 130px; min-width:0; font-size:12px; }
.card-filters label:first-child { flex-basis:220px; }
.card-filters input,.card-filters select { width:100%; min-height:44px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin:20px 0; }
.card-tile { min-width:0; border:1px solid var(--line); background:var(--surface); border-radius:14px; overflow:hidden; }
.card-art { display:block; width:100%; padding:0; border:0; position:relative; background:var(--surface-2); border-radius:8px; overflow:hidden; cursor:zoom-in; }
.card-art img { display:block; width:100%; height:auto; aspect-ratio:488 / 680; object-fit:contain; transition:transform .18s; }
.card-art:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.zoom-hint { position:absolute; bottom:8px; right:8px; background:var(--surface); color:var(--text); padding:3px 8px; border-radius:20px; font-size:11px; }
.no-art { display:grid; place-content:center; gap:12px; min-height:220px; padding:16px; }
.no-art small { display:block; color:var(--muted); }
.tile-body { padding:12px; }
.tile-body h3 { font-size:15px; margin:0; min-height:2.8em; line-height:1.4; }
.tile-meta { color:var(--muted); font-size:12px; margin:8px 0; }
.ck-price { display:grid; gap:2px; padding:10px 0; }
.ck-price > span { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.03em; }
.ck-price strong { font-family:var(--mono); font-size:17px; color:var(--text); }
.ck-price small,.ck-price a { font-size:11px; color:var(--muted); }
.ck-price.price-reference { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.ck-price.price-reference .price-reference-link { color:var(--accent); width:fit-content; padding:8px 0 0; font-weight:600; }
.po-reference { max-width:125px; text-align:right; color:var(--muted); font-size:10px; line-height:1.4; white-space:normal; }
.list-actions .save-action { border-radius:20px; min-height:40px; padding:8px 12px; background:var(--surface); color:var(--text); }
.list-actions .save-action[data-list-kind="favorites"][aria-pressed="true"] { background:var(--err-soft); color:var(--err); border-color:var(--err); }
.list-actions .save-action[data-list-kind="wishlist"][aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.card-tile .list-actions { display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:0; }
.pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin:24px 0; }
.source-actions { display:flex; flex-wrap:wrap; gap:8px; }
.src { flex-wrap:wrap; gap:16px; }
.card-dialog { max-width:900px; width:calc(100% - 24px); max-height:92dvh; border:1px solid var(--line); border-radius:18px; padding:28px; background:var(--surface); color:var(--text); }
.card-dialog::backdrop { background:var(--scrim); }
.dialog-close { position:absolute; top:10px; right:10px; width:44px; height:44px; z-index:1; border-radius:50%; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; }
.detail-art { width:100%; height:auto; border-radius:16px; }
.detail-layout h2 { line-height:1.15; font-size:28px; }
.detail-layout dt { color:var(--muted); font-size:12px; margin-top:14px; }
.detail-layout dd { margin:0; }
.card-head .card-art img { width:100%; }
.saved-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; }
.saved-card .card-head { margin:0; border:0; grid-template-columns:150px 1fr; }
.saved-card details { padding:0 12px; }
@media(max-width:600px) {
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tile-body { padding:10px; }
  .tile-body .save-action { font-size:11px; padding:6px; }
  .tile-body h3 { font-size:13px; }
  .collection-summary { gap:10px; }
  .collection-summary > div { padding:12px; }
  .collection-summary b { font-size:22px; }
  .detail-layout { grid-template-columns:1fr; gap:16px; }
  .detail-art { max-width:330px; margin:auto; }
  .card-dialog { padding:22px 16px; }
  .saved-card .card-head { grid-template-columns:100px minmax(0,1fr); gap:12px; padding:0; }
  .saved-card .card-head img { width:100%; }
  .saved-card h3 { font-size:17px; }
  nav.tabs a { min-width:0; }
}
@media(prefers-reduced-motion:reduce) { .card-art img { transition:none; } }

.filter-panel { border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.filter-panel summary { padding:14px 16px; font-weight:700; cursor:pointer; }
.filter-panel .card-filters { border:0; padding-top:4px; }
.tile-body h3 { text-transform:none; letter-spacing:0; }
/* Baski / foil secici */
.variant-btn { display:inline-flex; align-items:center; gap:10px; padding:7px 10px 7px 7px; border-radius:12px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--text); text-align:left; white-space:normal; max-width:100%; margin-top:12px; }
.variant-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
.variant-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.vb-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:8px; background:var(--accent); color:var(--on-accent); }
.vb-icon svg { width:18px; height:18px; }
.vb-text { display:grid; gap:3px; min-width:0; }
.vb-text small { font:600 13px/1.2 var(--body); color:var(--text); }
.vb-text b { font-size:11px; font-weight:400; line-height:1.3; color:var(--muted); overflow-wrap:anywhere; }
.variant-btn .vb-chev { width:14px; height:14px; color:var(--muted); flex:none; }
.card-tile .variant-btn { width:100%; }
.card-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card-title-row h2 { flex:1; min-width:0; margin:0; }
.card-title-row .variant-btn { margin:0; flex:none; max-width:55%; }
.print-line { margin:6px 0 0; font-size:13px; color:var(--muted); }
.ck-finishes { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; }
.ck-finishes span { font:500 11px/1 var(--mono); padding:4px 7px; border-radius:6px; border:1px solid var(--line); color:var(--muted); }
.ck-finishes span.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
@media (max-width:480px) {
  .card-title-row .variant-btn { padding:10px; border-radius:10px; }
  .card-title-row .vb-text b { display:none; }
}

.variant-dialog { width:calc(100% - 24px); max-width:600px; height:min(780px, 90dvh); max-height:90dvh; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--text); padding:0; overflow:hidden; box-sizing:border-box; }
.variant-dialog[open] { display:flex; flex-direction:column; }
.variant-dialog::backdrop { background:var(--scrim); }
.vd-head { display:flex; flex:none; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 20px 8px; }
.vd-head > div { min-width:0; }
.vd-head h2 { margin:6px 0 0; font-size:22px; line-height:1.2; overflow-wrap:anywhere; }
.vd-head .dialog-close { position:static; flex:none; }
#variantContent { min-height:0; flex:1; display:flex; flex-direction:column; }
.variant-form { display:flex; flex-direction:column; min-height:0; flex:1; }
.vd-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 20px 16px; display:flex; flex-direction:column; gap:14px; }
#variantContent > p { padding:12px 20px 20px; }
.variant-form fieldset { border:0; padding:0; margin:0; min-width:0; }
.variant-form legend { font:700 13px/1.3 var(--body); letter-spacing:0; margin:0 0 8px; padding:0; }
.finish-seg { display:flex; flex:none; flex-wrap:wrap; gap:6px; }
.variant-form label { font:400 14px/1.3 var(--body); letter-spacing:0; text-transform:none; color:var(--text); }
.finish-seg label { position:relative; display:block; }
.finish-seg input { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
.finish-seg span { display:inline-block; padding:8px 14px; border:1px solid var(--line-strong); border-radius:20px; font-size:13px; cursor:pointer; }
.finish-seg input:checked + span { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.finish-seg input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.finish-seg input:disabled + span { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.print-list { flex:none; }
.print-filter { width:100%; margin-bottom:8px; box-sizing:border-box; }
.print-options { display:grid; align-content:start; gap:6px; padding:2px; }
.variant-form .print-opt { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; cursor:pointer; position:relative; }
.print-opt:hover { border-color:var(--line-strong); background:var(--surface-2); }
.print-opt input { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
.print-opt:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.print-opt:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; }
.po-thumb { width:40px; aspect-ratio:488/680; border-radius:3px; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; }
.po-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.po-thumb.all svg { width:20px; height:20px; color:var(--accent); }
.po-main { display:grid; gap:3px; min-width:0; }
.po-main b { font-size:14px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.po-main small { font:500 11px/1 var(--mono); color:var(--muted); }
.po-prices { display:grid; gap:3px; justify-items:end; }
.pp { font:500 12px/1.1 var(--mono); color:var(--muted); white-space:nowrap; }
.pp i { font:600 9px/1 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; margin-right:5px; }
.variant-form[data-finish="nonfoil"] .pp[data-f="nonfoil"],.variant-form[data-finish="foil"] .pp[data-f="foil"],.variant-form[data-finish="etched"] .pp[data-f="etched"] { color:var(--accent); font-weight:700; }
.vd-foot { flex:none; background:var(--surface); border-top:1px solid var(--line); padding:12px 20px max(18px, env(safe-area-inset-bottom)); display:grid; gap:8px; }
.vd-foot p { margin:0; font-size:12px; }
.vd-foot p:empty { display:none; }
.vd-foot button { width:100%; }
@media (max-width:480px) {
  .variant-form .print-opt { grid-template-columns:34px minmax(0,1fr) auto; gap:8px; padding:7px 8px; }
  .po-thumb { width:34px; }
}

.save-login { min-width:0; max-width:100%; margin:12px 0; }
.save-login p { margin:0 0 8px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.save-login .btn { white-space:normal; max-width:100%; }
.card-head > div,.detail-layout > div { min-width:0; overflow-wrap:anywhere; }
.card-dialog { box-sizing:border-box; overflow-x:hidden; }
.card-dialog .save-login p { white-space:normal; word-break:break-word; }
.detail-layout .btn,.card-head .btn { white-space:normal; max-width:100%; text-align:center; }

/* Istek listesi: yalnizca gorseller, uzerine gelince fiyat */
.wish-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin:20px 0; }
.wish-card { position:relative; display:block; padding:0; border:0; border-radius:4.5% / 3.2%; overflow:hidden; background:var(--surface-2); cursor:pointer; aspect-ratio:488/680; white-space:normal; transition:transform .15s, box-shadow .15s; }
.wish-card:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.wish-card img { display:block; width:100%; height:100%; object-fit:cover; }
.wish-card .no-art { height:100%; text-align:center; }
.wish-owners { position:absolute; top:8px; right:8px; min-width:24px; height:24px; padding:0 6px; border-radius:12px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font:700 12px/1 var(--mono); box-shadow:0 2px 6px rgba(0,0,0,.4); }
.wish-hover { position:absolute; inset:auto 0 0 0; display:grid; gap:4px; padding:36px 10px 10px; text-align:left; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 55%, transparent); opacity:0; transform:translateY(8px); transition:opacity .15s, transform .15s; }
.wish-hover b { font-size:13px; line-height:1.25; }
.wish-hover small { font-size:11px; opacity:.8; }
.wish-price { font:700 18px/1 var(--mono); }
.wish-price small { font:600 10px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.wish-card:hover .wish-hover,.wish-card:focus-visible .wish-hover { opacity:1; transform:none; }
/* Dokunmatikte hover yok: fiyat surekli gorunur, kompakt */
@media (hover:none) {
  .wish-hover { opacity:1; transform:none; padding:24px 8px 8px; }
  .wish-hover b,.wish-hover > small { display:none; }
  .wish-price { font-size:14px; }
}
@media (max-width:600px) { .wish-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } }
@media (prefers-reduced-motion:reduce) { .wish-card,.wish-hover { transition:none; } }
.wish-detail { align-items:start; }
.wish-item { margin:0; min-width:0; display:grid; gap:6px; }
.wish-item figcaption { font-size:12px; font-weight:600; line-height:1.3; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.wish-card:hover + figcaption { color:var(--text); }
.pp em,.ck-finishes em { font:700 8px/1 var(--mono); font-style:normal; letter-spacing:.06em; padding:2px 3px; margin-right:4px; border-radius:3px; background:var(--surface-2); color:var(--muted); vertical-align:1px; }
.ck-finishes em { margin:0 0 0 4px; }
.wish-detail .variant-btn { margin-top:4px; }
.wish-owners-list { margin-top:20px; border-top:1px solid var(--line); }
.wish-owners-list h3 { margin-top:18px; }

/* Arama sonucu: buyuk kart gorseli */
#results .card-head { grid-template-columns: 240px minmax(0,1fr); gap: 28px; align-items: start; padding: 20px; }
#results .card-head img { width: 100%; border-radius: 4.5% / 3.2%; }
#results .card-head .card-art { border-radius: 4.5% / 3.2%; }
@media (max-width: 720px) { #results .card-head { grid-template-columns: 170px minmax(0,1fr); gap: 18px; } }
@media (max-width: 480px) {
  #results .card-head { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  #results .card-head > .card-art { width: min(70%, 260px); justify-self: center; }
}

/* ---------- Satin alma istekleri ---------- */
.item .req-row { grid-column: 1 / -1; }
.req-btn { gap: 7px; border-radius: 999px; color: var(--accent); border-color: var(--accent); background: transparent; }
.req-btn:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.req-btn svg { width: 15px; height: 15px; }

.request-dialog { width: calc(100% - 24px); max-width: 520px; max-height: 92dvh; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); padding: 20px; box-sizing: border-box; }
.request-dialog::backdrop { background: var(--scrim); }
.rq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rq-head h2 { margin: 6px 0 0; font-size: 22px; line-height: 1.2; }
.rq-head .dialog-close { position: static; }
.rq-form { display: grid; gap: 14px; }
.rq-form label { font: 600 12px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.rq-item { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rq-item img { width: 84px; border-radius: 4.5% / 3.2%; display: block; }
.rq-item b { font-size: 15px; }
.rq-item .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; font-size: 12px; color: var(--muted); align-items: center; }
.rq-seller { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 4px; }
.rq-seller .avatar { width: 22px; height: 22px; font-size: 11px; }
.rq-prices { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.rq-prices b { font-family: var(--mono); color: var(--text); }
.stepper { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.stepper button { border: 0; border-radius: 0; width: 44px; padding: 0; font-size: 18px; background: transparent; }
.stepper button:hover { background: var(--surface-2); }
.stepper input { flex: 1; min-width: 0; border: 0; border-radius: 0; text-align: center; font: 600 16px var(--mono); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.money-in { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
.money-in:focus-within { border-color: var(--accent); }
.money-in input { flex: 1; min-width: 0; border: 0; outline: none !important; font: 600 16px var(--mono); }
.money-in span { padding: 0 12px; color: var(--muted); font-weight: 600; }
.rq-form textarea { width: 100%; resize: vertical; font: 400 15px/1.4 var(--body); }
.rq-hint { margin: 0; font-size: 12px; }
.rq-form p:empty { display: none; }
.rq-form [type=submit] { gap: 8px; height: 48px; font-size: 15px; }
.rq-form [type=submit] svg { width: 18px; height: 18px; }
.rq-done { text-align: center; padding: 18px 8px 8px; }
.rq-check { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--on-accent); background: var(--accent); }
.rq-done h2 { margin: 0 0 6px; }
.rq-done-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.req-card { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; text-align: left; white-space: normal; }
.req-card:not(:has(img)) { grid-template-columns: 1fr; }
.req-card img { width: 64px; border-radius: 4.5% / 3.2%; display: block; }
.req-body { display: grid; gap: 4px; min-width: 0; font-size: 14px; }
.req-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.req-kind { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.req-status { font: 700 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.req-status.pending { color: var(--wheat); background: color-mix(in srgb, var(--wheat) 16%, transparent); }
.req-status.ok { color: var(--shop); background: var(--shop-soft); }
.req-status.no { color: var(--err); background: var(--err-soft); }
.req-body .meta { font-size: 12px; opacity: .8; }
.req-offer b { font-family: var(--mono); }
.req-note { margin: 2px 0 0; font-style: italic; opacity: .9; }
.req-who { font-size: 12px; }
.req-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.bubble.req { max-width: min(420px, 92%); background: var(--surface); color: var(--text); border-color: var(--line-strong); padding: 12px; }
.bubble.req.me { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.bubble.req .muted { color: var(--muted); }
.bubble.notice { align-self: center; max-width: 90%; background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13px; text-align: center; }
.bubble.notice.me { background: transparent; border-color: var(--line-strong); color: var(--muted); }

.msg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.msg-head h2 { margin: 0; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); }
.seg a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.seg a:hover { color: var(--text); }
.seg a.on { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.req-list { display: grid; gap: 10px; }
.req-item { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; gap: 10px; }
.req-chat { font-size: 13px; justify-self: end; }

/* ---------- 3B kart egimi + foil parlamasi ---------- */
.tilt { position:relative; display:block; isolation:isolate; overflow:hidden; border-radius:4.5% / 3.2%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s; }
.tilt.tilting { transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04); transition:transform .08s linear, box-shadow .2s;
  box-shadow:0 22px 45px -14px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .06); z-index:3; will-change:transform; }
:is(.tilt, .detail-tilt) :is(.glare, .shine) { position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:1; opacity:0; transition:opacity .35s; }
/* Isik yansimasi: tum kartlarda */
.tilt .glare { background:radial-gradient(circle at calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%), rgb(255 255 255 / .45), rgb(255 255 255 / .08) 35%, transparent 62%); mix-blend-mode:overlay; }
.tilt.tilting .glare { opacity:1; }
/* Foil: gokkusagi holografik bant + ince parilti cizgileri, isikla birlikte kayar */
:is(.tilt, .detail-tilt)[data-foil] .shine {
  background-image:
    repeating-linear-gradient(115deg, transparent 0 6px, rgb(255 255 255 / .07) 6px 7px),
    linear-gradient(115deg, transparent 15%, hsl(0 100% 65% / .75) 28%, hsl(50 100% 60% / .75) 36%, hsl(120 90% 60% / .75) 44%, hsl(190 100% 60% / .75) 52%, hsl(260 100% 70% / .75) 60%, hsl(320 100% 65% / .75) 68%, transparent 82%);
  background-size:100% 100%, 260% 260%;
  background-position:0 0, calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%);
  mix-blend-mode:color-dodge; filter:brightness(.75) contrast(1.35) saturate(1.25);
}
:is(.tilt, .detail-tilt)[data-foil] .shine { opacity:.14; }                /* durgunken hafif foil izi */
.tilt[data-foil].tilting .shine { opacity:.62; }
/* Etched: daha metalik, altin-gumus tonlu */
:is(.tilt, .detail-tilt)[data-foil="etched"] .shine {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 3px, rgb(255 255 255 / .06) 3px 4px),
    linear-gradient(115deg, transparent 20%, hsl(45 80% 70% / .7) 38%, hsl(0 0% 92% / .75) 50%, hsl(35 70% 60% / .7) 62%, transparent 80%);
  filter:brightness(.8) contrast(1.2) saturate(.9);
}
.tilt[data-foil] .zoom-hint,.tilt .wish-hover,.tilt .wish-owners { z-index:2; }
/* Foil rozeti: kartin foil oldugunu durgunken de belli et */
:is(.tilt, .detail-tilt)[data-foil]::after { content:'Foil'; position:absolute; left:8px; top:8px; z-index:2; padding:3px 7px; border-radius:999px; font:700 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:#1a1a1a; background:linear-gradient(110deg, #ffd6e8, #fff2b8, #c8ffd9, #c2e6ff, #e3ccff); box-shadow:0 1px 4px rgb(0 0 0 / .35); }
:is(.tilt, .detail-tilt)[data-foil="etched"]::after { content:'Etched'; background:linear-gradient(110deg, #f3e2b5, #ffffff, #d9c08a); }
.detail-tilt { position:relative; display:block; isolation:isolate; overflow:hidden; border-radius:4.5% / 3.2%; width:100%; max-width:100%; }
.detail-tilt .glare { display:none; }
/* Enlarged cards stay flat until phone motion data is available. */
.detail-tilt { transform:perspective(1000px) rotateX(0deg) rotateY(0deg); transform-origin:center; transition:transform .3s ease,box-shadow .3s ease; }
.detail-tilt.motion-active { transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.96); transition:transform .12s linear,box-shadow .2s; box-shadow:0 20px 35px -15px rgb(0 0 0 / .5),0 0 0 1px rgb(255 255 255 / .18),1px 2px 0 rgb(0 0 0 / .5); }
.motion-permission { position:absolute; z-index:3; bottom:10px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12px; background:var(--surface); color:var(--text); box-shadow:0 4px 16px rgb(0 0 0 / .25); }
:is(.tilt,.detail-tilt)[data-foil] .shine { opacity:.3; mix-blend-mode:screen; filter:none; animation:foil-sweep 6s ease-in-out infinite alternate; }
:is(.tilt,.detail-tilt)[data-foil] .glare { display:block; opacity:.55; mix-blend-mode:screen; background:linear-gradient(112deg,transparent 30%,rgb(255 255 255 / .08) 40%,rgb(255 255 255 / .55) 48%,rgb(255 255 255 / .08) 56%,transparent 66%); background-size:260% 100%; animation:foil-reflection 6s ease-in-out infinite alternate; }
@keyframes foil-reflection { from { background-position:150% 0; } to { background-position:-100% 0; } }
@keyframes foil-sweep {
  from { background-position:0 0, 0% 10%; }
  to   { background-position:0 0, 100% 90%; }
}
.detail-tilt .detail-art { display:block; border-radius:0; }
.detail-tilt.motion-active[data-foil] .shine { animation:none; opacity:.42; background-position:0 0,calc(var(--px,50)*1%) calc(var(--py,50)*1%); }
.detail-tilt.motion-active .glare { display:block; opacity:.5; animation:none; background:radial-gradient(circle at calc(var(--px,50)*1%) calc(var(--py,50)*1%),rgb(255 255 255 / .4),transparent 65%); background-size:100% 100%; }
.has-foil-visibility .tilt[data-foil] :is(.shine,.glare) { animation-play-state:paused; }
.has-foil-visibility .tilt.foil-visible[data-foil] :is(.shine,.glare) { animation-play-state:running; }
dialog:not([open]) .detail-tilt[data-foil] :is(.shine,.glare) { animation-play-state:paused; }
.tilt img { position:relative; z-index:0; }
@media (prefers-reduced-motion: reduce) { .tilt, .tilt.tilting { transform:none; transition:none; } .detail-tilt[data-foil] .shine { animation:none; opacity:.25; } .detail-tilt[data-foil] .glare { animation:none; opacity:.18; } }
@media (max-width:600px) { .detail-tilt { max-width:330px; margin:auto; } }
@media (prefers-reduced-motion:reduce) { .detail-tilt,.detail-tilt.motion-active { transform:none; transition:none; } }

/* CK sabit fiyat */
.ck-fixed-tag { display:inline-block; vertical-align:2px; margin-left:6px; padding:3px 7px; border-radius:999px; font:700 9px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); }
.fixed-price { display:grid; gap:4px; align-content:start; }
.fixed-price > span { font:600 12px/1.3 var(--body); color:var(--muted); }
.fixed-price > b { display:flex; align-items:center; height:46px; padding:0 12px; border:1px solid var(--accent); border-radius:10px; background:var(--accent-soft); font:700 18px var(--mono); color:var(--text); }
.fixed-price small { font-size:12px; color:var(--muted); }
.fixed-price small b { font-family:var(--mono); color:var(--text); }
.fixed-note { margin:0; padding:10px 12px; border-radius:10px; font-size:13px; background:var(--surface-2); color:var(--muted); }
.rq-form textarea { min-height:64px; height:64px; }

/* CK fiyat durumu */
.ck-price .ck-note, .ck-note { color:var(--wheat); font-size:11px; }
.ck-price.stale strong, .ck-stale { color:var(--muted); }
.ck-price.stale strong { text-decoration:underline dotted; text-underline-offset:3px; }
.ck-price.tcg strong::after { content:'TCG'; margin-left:6px; vertical-align:2px; padding:2px 4px; border-radius:3px; font:700 9px/1 var(--mono); letter-spacing:.06em; background:var(--surface-2); color:var(--muted); }

.scan-result { margin:18px 0; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.scan-candidates { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:16px 0; }
.scan-candidates button { display:flex; text-align:left; white-space:normal; gap:12px; padding:12px; border-radius:12px; }
.scan-candidates img { width:64px; height:auto; border-radius:4px; align-self:start; }
.scan-candidates span { display:grid; gap:6px; }
.scan-candidates small { color:var(--muted); line-height:1.4; }

.transfer-warning { padding:10px 12px; border-left:3px solid var(--wheat); background:var(--surface-2); font-size:13px; }
.transfer-changes { padding-left:20px; max-height:280px; overflow:auto; font-size:13px; }
.transfer-changes li { padding:6px 0; border-bottom:1px solid var(--line); }
.transfer-changes li span { font-family:var(--mono); margin-left:8px; }

/* cardLonca wordmark: the small prefix leaves Lonca as the familiar name. */
.brand img.brand-logo { width:144px; height:auto; aspect-ratio:248/80; border-radius:0; display:block; }
header.top .brand img.brand-logo { width:124px; height:auto; }
@media(max-width:720px) { header.top .brand img.brand-logo { width:108px; height:auto; } }


/* Icon entry point and visual card search. A definite height also works in WKWebView. */
.search-toggle { width:42px; height:42px; padding:0; flex:none; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--text); }
.search-toggle:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.search-toggle svg { width:21px; height:21px; }
header.top .search-toggle { margin-left:auto; }
.hero-search { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:15px; }
.hero-search .search-toggle { width:56px; height:56px; color:var(--on-accent); background:var(--accent); border:0; }
.hero-search .search-toggle svg { width:25px; height:25px; }
.search-dialog { position:fixed; inset:var(--search-top, 40px) 0 auto; margin:0 auto; width:calc(100% - 24px); max-width:660px; height:min(660px, var(--search-height, 88dvh)); max-height:var(--search-height, 88dvh); padding:0; border:1px solid var(--line-strong); border-radius:20px; box-sizing:border-box; background:var(--surface); color:var(--text); overflow:hidden; }
.search-dialog[open] { display:flex; flex-direction:column; }
.search-dialog::backdrop { background:var(--scrim); }
.search-head { flex:none; padding:18px 20px 0; }
.search-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.search-heading h2 { font-size:21px; margin:0; }
.search-close { width:38px; height:38px; padding:0; border-radius:50%; background:transparent; }
.search-field { display:flex; align-items:center; min-width:0; gap:10px; padding:6px 10px 6px 14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg); }
.search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.search-field > svg { width:20px; height:20px; color:var(--muted); flex:none; }
.search-field input { min-width:0; flex:1; padding:10px 0; background:transparent; border:0; outline:none; box-shadow:none; font-size:17px; }
.search-field input:focus { border:0; outline:none; }
.search-field input::-webkit-search-cancel-button { display:none; }
.search-camera { flex:none; padding:0; width:38px; height:38px; border:0; background:transparent; border-radius:8px; color:var(--muted); }
.search-camera svg { width:21px; height:21px; }
.search-caption { margin:12px 0; color:var(--muted); font-size:12px; line-height:1.4; }
.search-results { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 12px 12px; }
.search-result { width:100%; display:flex; align-items:center; gap:16px; padding:12px; border:1px solid transparent; border-radius:12px; background:transparent; text-align:left; white-space:normal; justify-content:flex-start; }
.search-result:hover,.search-result[aria-selected=true] { border-color:var(--line); background:var(--accent-soft); }
.search-thumb { display:grid; place-items:center; width:64px; aspect-ratio:488/680; flex:none; border-radius:5px; overflow:hidden; background:var(--surface-2); color:var(--muted); }
.search-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.search-card-name { display:grid; gap:7px; min-width:0; flex:1; }
.search-card-name b { font-size:16px; line-height:1.3; overflow-wrap:anywhere; }
.search-card-name small { font-size:12px; line-height:1.4; color:var(--muted); }
.search-card-name > span { font:500 11px/1.3 var(--mono); color:var(--faint); }
.search-result-arrow { color:var(--muted); font-size:20px; flex:none; }
.search-empty { padding:38px 18px; color:var(--muted); font-size:14px; line-height:1.6; text-align:center; }
.search-foot { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.search-foot > span { font-size:11px; color:var(--muted); }
.search-submit { border:0; padding:9px 12px; color:var(--accent); background:var(--accent-soft); font-weight:700; }
@media(max-width:480px) {
 .search-head { padding:14px 14px 0; }
 .search-results { padding:4px 6px 8px; }
 .search-result { gap:12px; padding:10px 8px; }
 .search-thumb { width:58px; }
 .search-card-name b { font-size:15px; }
 .search-foot { padding-inline:14px; }
 .search-foot > span { font-size:10px; }
 .lnav .wrap { gap:12px; padding-inline:12px; }
 .lnav .brand img.brand-logo { width:104px; }
 .lnav .cta { align-items:center; gap:6px; }
 .lnav .cta .btn { font-size:12px; padding:9px 10px; }
 .lnav .search-toggle { width:38px; height:38px; }
}

/* Ambient foil on the first card view and saved-card grids; hover still follows the pointer. */
.tilt[data-foil].tilting .shine { animation:none; opacity:.42; }
.tilt[data-foil].tilting .glare { animation:none; background:radial-gradient(circle at calc(var(--px,50)*1%) calc(var(--py,50)*1%),rgb(255 255 255 / .38),transparent 65%); background-size:100% 100%; }

/* Message actions stay with their card; profile actions live in the chat menu. */
.chat-identity { flex:1; min-width:0; overflow-wrap:anywhere; }
.chat-head > .avatar { flex:none; }
.chat-tools { position:relative; flex:none; }
.chat-tools summary { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; cursor:pointer; list-style:none; }
.chat-tools summary::-webkit-details-marker { display:none; }
.chat-tools summary svg { width:22px; height:22px; }
.chat-tools[open] summary { border-color:var(--accent); background:var(--accent-soft); }
.chat-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:45; display:grid; gap:4px; width:210px; max-width:calc(100vw - 40px); padding:8px; background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 12px 28px rgb(0 0 0 / .14); }
.chat-menu button,.chat-menu .btn { justify-content:flex-start; border:0; padding:12px; background:transparent; }
.chat-menu button:hover { background:var(--surface-2); }
.req-actions { grid-column:1/-1; margin-top:10px; }
.req-actions button { flex:1; min-width:0; max-width:100%; white-space:normal; line-height:1.35; }
.req-top { flex-wrap:wrap; }
.bubble.req { width:min(420px,94%); min-width:0; }
.page-down { position:fixed; right:max(16px,calc((100vw - 1080px)/2 + 16px)); z-index:35; display:flex; gap:6px; padding:10px 14px; border-radius:999px; background:var(--surface); color:var(--accent); border:1px solid var(--line-strong); box-shadow:0 4px 16px rgb(0 0 0 / .1); }
.page-down svg { width:18px; height:18px; }
.page-down span { font-size:12px; }
body:has(dialog[open]) .page-down { display:none; }
@media(max-width:720px) { .composer { padding-bottom:10px; } }

/* Appearance settings and small, non-blocking transitions. */
.app-startup { position:fixed; inset:0; z-index:1000; background:var(--bg); color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity .18s; }
.app-startup img { width:192px; height:192px; border-radius:38px; }
.app-startup b { font-size:26px; margin-top:14px; letter-spacing:-.03em; }
.app-startup p { margin:0; color:var(--muted); font-size:14px; }
.app-startup.leaving { opacity:0; pointer-events:none; }
.app-startup-complete .app-startup { display:none; }
.theme-settings { max-width:650px; padding:24px; }
.theme-settings > p:first-of-type { margin:0 0 20px; }
.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme-option { position:relative; padding:20px 12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); cursor:pointer; text-align:center; justify-items:center; gap:10px; text-transform:none; letter-spacing:0; font:600 14px/1.4 var(--body); color:var(--text); transition:background .2s,border-color .2s,color .2s; }
.theme-option input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; padding:0; cursor:pointer; }
.theme-option svg { width:28px; height:28px; margin-bottom:4px; }
.theme-option small { font:400 12px/1.5 var(--body); color:var(--muted); }
.theme-option:has(input:checked) { background:var(--accent-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); }
.theme-option:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.theme-option:hover { border-color:var(--accent); }
.settings-note { color:var(--muted); font-size:12px; margin:20px 0 0; line-height:1.6; }
nav.tabs { position:relative; }
.nav-indicator { position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px; pointer-events:none; transition:transform .24s cubic-bezier(.2,.7,.3,1),width .24s cubic-bezier(.2,.7,.3,1),background-color .2s; }
nav.tabs.has-indicator a.on::after { display:none; }
nav.tabs a, .ws-tabs a, .list-actions .btn, .icon-link { transition:color .2s,background-color .2s,border-color .2s,box-shadow .2s; }
.theme-ready body, .theme-ready header.top, .theme-ready nav.tabs, .theme-ready .lnav, .theme-ready fieldset, .theme-ready input, .theme-ready textarea, .theme-ready select, .theme-ready .composer { transition:background-color .22s,color .22s,border-color .22s; }
dialog { opacity:0; translate:0 6px; transition:opacity .16s ease,translate .18s cubic-bezier(.2,.7,.3,1),overlay .18s allow-discrete,display .18s allow-discrete; }
dialog[open] { opacity:1; translate:0 0; }
dialog::backdrop { opacity:0; transition:opacity .18s,overlay .18s allow-discrete,display .18s allow-discrete; }
dialog[open]::backdrop { opacity:1; }
@starting-style { dialog[open] { opacity:0; translate:0 6px; } dialog[open]::backdrop { opacity:0; } }
@media(max-width:720px) { nav.tabs { position:fixed; } .nav-indicator { top:-1px; bottom:auto; } }
@media(max-width:400px) { .theme-settings { padding:18px 12px; } .theme-options { gap:8px; } .theme-option { padding:18px 8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } dialog { translate:none; } }