/* Lonca bilesen katmani — en son yuklenir.
   Bir web sitesi gibi: butonlar tek bir olcekte (40 px, kucuk 32 px), net hover / active /
   focus-visible / disabled durumlariyla; birincil, ikincil, hayalet ve tehlike turleri.
   Yazilan alanlar kenarlikli; yalnizca bilgi veren kutular duz. Kart gorselleri cerceve ve
   kirpma olmadan durur (bkz. "Kart gorselleri" ve "3B kart egimi"). */

:root {
  --r: 12px;
  --r-sm: 10px;
  --r-lg: 18px;
  --tap: 40px;
  --btn-bg: #e2e5ea;
  --btn-bg-hover: #d6dae1;
  --btn-lip: rgb(16 18 22 / .16);
  --btn-glow: rgb(16 18 22 / .08);
  --highlight: rgb(255 255 255 / .9);
  --field: #ffffff;
  --field-sunk: inset 0 1px 2px rgb(16 18 22 / .08);
  --raised: 0 1px 2px rgb(16 18 22 / .06), 0 4px 14px rgb(16 18 22 / .07);
  --raised-hover: 0 2px 4px rgb(16 18 22 / .08), 0 10px 26px rgb(16 18 22 / .11);
  --glass: rgb(243 244 246 / .82);
}
:root[data-theme="dark"] {
  --btn-bg: #33363d;
  --btn-bg-hover: #3c4048;
  --btn-lip: rgb(0 0 0 / .55);
  --btn-glow: rgb(0 0 0 / .3);
  --highlight: rgb(255 255 255 / .08);
  --field: #111214;
  --field-sunk: inset 0 1px 3px rgb(0 0 0 / .5);
  --raised: inset 0 1px 0 rgb(255 255 255 / .04), 0 2px 12px rgb(0 0 0 / .32);
  --raised-hover: inset 0 1px 0 rgb(255 255 255 / .06), 0 8px 26px rgb(0 0 0 / .45);
  --glass: rgb(23 24 27 / .78);
}

/* Etiketler: okunur govde yazisi (daktilo harfli buyuk etiketler uygulamayi terminal gibi gosteriyordu). */
label { font: 600 13px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); gap: 7px; }

/* ---------- Oneri cipleri: arama ikonlu dolgulu haplar ---------- */
.chips { gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px/1 var(--body);
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.chip::before {
  content: ''; width: 15px; height: 15px; flex: none; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--text); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Bilgi kutulari: duz, kenarliksiz, dokunulamaz gorunur ---------- */
.stats, .ws-metrics { border: 0; border-radius: var(--r-lg); background: transparent; gap: 8px; overflow: visible; }
.stats { display: grid; }
.stat, .ws-metrics > div { border: 0; border-radius: 14px; background: var(--surface-2); }
.stat:first-child { border-left: 0; }
:root[data-theme="dark"] :is(.stat, .ws-metrics > div) { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.empty { grid-column: 1 / -1; border: 0; border-radius: var(--r-lg); background: var(--surface-2); padding: 26px 20px; }

/* ---------- Paneller: yumusak golgeli yuzeyler ---------- */
.card-head, .owner, .ws-item, .ws-deck-row, .ws-match, .ws-offline, .card-tile, .ws-notifications a {
  border-radius: var(--r-lg); border-color: transparent; box-shadow: var(--raised);
}
.owner { border-left: 4px solid var(--member); }
.owner.shop { border-left-color: var(--shop); }
.ws-offline { background: var(--surface); }
.ws-offline summary { display: flex; align-items: center; gap: 8px; min-height: 30px; list-style: none; }
.ws-offline summary::-webkit-details-marker { display: none; }
.ws-offline summary::after { content: '›'; margin-left: auto; font-size: 22px; color: var(--muted); transition: transform .2s; }
.ws-offline[open] summary::after { transform: rotate(90deg); }

/* ---------- Dokunulan kartlar: kaldirilmis + ok isareti + basinca cokme ---------- */
.discover-shortcuts a, .scan-candidates button {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: none; transition: border-color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.discover-shortcuts a:hover, .scan-candidates button:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: 0 6px 18px -12px var(--shadow); }
.discover-shortcuts a:focus-visible, .scan-candidates button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.discover-shortcuts a > span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); font-size: 20px;
}
.discover-shortcuts a::after, .scan-candidates button::after {
  content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 24px; line-height: 1; color: var(--muted);
}
.scan-candidates button { padding-right: 36px; }
.search-result-arrow { color: var(--accent); }
@media (max-width: 600px) {
  .discover-shortcuts a { padding: 14px 12px 16px; align-content: start; }
  .discover-shortcuts a::after { top: 26px; right: 10px; transform: none; }
}

/* ---------- Sekmeler: sayfa ici sekme cubugu, secili sekmede alt cizgi ---------- */
.ws-tabs, .page-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0; margin: 24px 0 18px; background: transparent; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
.ws-tabs::-webkit-scrollbar, .page-tabs::-webkit-scrollbar { display: none; }
.ws-tabs a, .page-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: 0; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ws-tabs a:hover, .page-tabs a:hover { color: var(--text); }
.ws-tabs [aria-current], .page-tabs [aria-current] { color: var(--text); background: transparent; border-bottom-color: var(--accent); padding-bottom: 0; font-weight: 700; box-shadow: none; }
.ws-tabs a:focus-visible, .page-tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.collection-games button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: none; font: 600 13px/1 var(--body); color: var(--text); }
.collection-games button:hover { background: var(--surface-2); }
.collection-games button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.collection-games button[aria-pressed=true] small { color: inherit; opacity: .8; }

/* ---------- Ust bar: cam efektli; ikon butonlari dolu daireler ---------- */
/* Blur sits on a pseudo-element: backdrop-filter on the header itself would become the
   containing block of the fixed bottom tab bar inside it and pull the bar to the top. */
header.top { background: transparent; border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
header.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--glass); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }

.account-link.avatar-link { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--member) 40%, transparent); }

/* ---------- Alt sekme cubugu (telefon): cam zemin, secili sekmede dolu hap ---------- */
@media (max-width: 720px) {
  header.top { padding-inline: 16px; }
  nav.tabs { background: var(--glass); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
  nav.tabs a { gap: 4px; }
  nav.tabs a svg { box-sizing: content-box; padding: 5px 18px; border-radius: 999px; transition: background-color .2s; }
  nav.tabs a.on svg { background: var(--accent-soft); }
  nav.tabs a.on::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(button, .btn, .chip, .discover-shortcuts a, .scan-candidates button, .search-result) { transition: none; }
}

:root { --tap-sm: 32px; --gap: 12px; --gap-lg: 20px; }

/* ---------- Kart detayi: bloklar arasi esit ritim ---------- */
.card-head { gap: var(--gap-lg); padding: 20px; }
.card-head > div:last-child { display: grid; gap: 14px; align-content: start; min-width: 0; }
.card-head > div:last-child > * { margin: 0; }
.card-head .print-line { margin-top: -8px; }
.card-head .counts { margin: 2px 0 0; gap: 8px; }
.card-head .counts .pill { padding: 7px 10px; border-radius: 999px; font-size: 11px; }
.card-head .ck-price { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.card-head .sq-owned { padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
@media (max-width: 480px) { .card-head { grid-template-columns: 1fr; padding: 16px; } .card-head > img, .card-head > .tilt, .card-head > button { justify-self: center; } }

/* ---------- Dukkan / oyuncu kartlari: tutarli ic bosluk ve buton duzeni ---------- */
.owner { padding: 18px 18px 16px; margin-bottom: 16px; }
.owner .items { margin-top: 14px; }
.owner .item { gap: 8px 12px; padding: 14px 0; }
/* Listing actions sit on one aligned row: the purchase request first, the rest beside it. */
.owner .item .req-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.owner .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.owner-top [data-reputation] { margin-top: 6px; }

/* ---------- Yukleniyor: sonuc seklinde iskelet ---------- */
.sk { background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--text) 8%) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: sk-shine 1.3s ease-in-out infinite; border-radius: 10px; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-lines { display: grid; gap: 10px; align-content: center; min-width: 0; flex: 1; }
.sk-line { height: 14px; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w55 { width: 55%; } .w60 { width: 60%; } .w70 { width: 70%; }
.sk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sk-btn { height: 32px; border-radius: 6px; }
.loading-title { display: flex; align-items: center; gap: 4px; margin: 6px 0 16px; font-weight: 700; font-size: 17px; color: var(--text); }
.skeleton-head .sk-art { width: 100%; max-width: 220px; aspect-ratio: 63 / 88; border-radius: 14px; justify-self: center; }
.sk-owner { display: flex; gap: 14px; align-items: center; padding: 18px; margin-top: 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raised); }
.sk-avatar { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.search-loading { display: grid; gap: 6px; padding: 6px 0; }
.sk-result { display: flex; gap: 14px; align-items: center; padding: 10px 12px; }
.sk-thumb { width: 44px; height: 62px; border-radius: 6px; flex: none; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- One cikan kartlar: cerceveli kutu, kart icinde serbest egilir ---------- */
.discover-cards { align-items: stretch; }
.discover-card { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--frame, #cfd3da); border-radius: 12px; box-shadow: 0 1px 2px rgb(16 18 22 / .05); background: var(--surface); overflow: visible; }
.discover-card > div { display: flex; flex-direction: column; flex: 1; }
.discover-card > div > .btn { margin-top: auto; }
:root[data-theme="dark"] { --frame: #3f434b; }
.discover-card > .card-art { aspect-ratio: auto; background: transparent; }
.discover-card > .card-art img { width: 100%; height: auto; aspect-ratio: 488 / 680; object-fit: contain; }

/* ---------- Tarama sirasi: ad tam okunur, ✎ / ✕ ikonlari, tek dokunusla onay ---------- */
.sq-row { border: 0; border-radius: var(--r-lg); box-shadow: var(--raised); padding: 14px; gap: 14px; }
.sq-row[data-confirmed="false"]:not(:has(.sq-confirm-row)) { box-shadow: var(--raised); }
.sq-row[data-confirmed="false"]:has(.sq-confirm-row) { box-shadow: var(--raised), inset 3px 0 0 var(--wheat); }
.sq-title { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.sq-title b { flex: 1; min-width: 0; font-size: 16px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-tools { display: flex; gap: 6px; flex: none; }
.sq-icon { width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; display: grid; place-items: center;
  background: var(--surface); color: var(--text); font: 700 15px/1 var(--body); box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.sq-icon:hover { background: var(--surface-2); }
.sq-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sq-icon[data-sq-remove] { color: var(--err); }
.sq-icon[data-sq-remove]:hover { background: var(--err-soft); border-color: var(--err); }
.sq-icon[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sq-print { color: var(--muted); font: 600 13px/1.3 var(--mono) !important; margin: -4px 0 0 !important; }
.sq-confirm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-alt { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 14px/1.2 var(--body); box-shadow: none; cursor: pointer; }
.sq-alt:hover { background: var(--surface-2); }
.sq-alt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Closed rows show the card, its printing and the one action that matters; ✎ opens the rest. */
.sq-row:not(.editing) .sq-fields > :not(.sq-title):not(.sq-print):not(.sq-owned):not(.sq-confirm-row):not(.muted) { display: none; }
.sq-row[data-mode="auto"]:not(.editing) .sq-fields > :not(.sq-title):not(.sq-owned):not(.sq-print) { display: none; }
.sq-row.editing { box-shadow: var(--raised-hover), inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.sq-save { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.sq-save #sqStatus { flex: 1 1 100%; margin: 0; }
.sq-row > .sq-art { width: 130px; }
@media (min-width: 721px) { .sq-save { position: static; border-top: 1px solid var(--line); background: transparent; } }
@media (max-width: 600px) { .sq-row { grid-template-columns: 64px 1fr; } .sq-row > img, .sq-row > .sq-art, .sq-placeholder { width: 64px; } .sq-head + .muted { display: none; } }
.sq-row[data-mode="auto"]:not(.editing) .sq-fields > .sq-print { display: block; }

/* Tarama hedefleri: en fazla bir koleksiyon, istenen kadar deste ve liste. Kapaliyken ozet satiri. */
.sq-destination { padding: 0; gap: 0; }
.sq-targets > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none; border-radius: var(--r); }
.sq-targets > summary::-webkit-details-marker { display: none; }
.sq-targets > summary:hover { background: var(--surface-2); }
.sq-targets > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sq-targets-title { font: 700 14px/1.3 var(--body); color: var(--muted); }
.sq-targets-summary { flex: 1 1 220px; min-width: 0; color: var(--text); font: 700 14px/1.4 var(--body); overflow-wrap: anywhere; }
.sq-target-none { color: var(--err); }
.sq-targets-edit { color: var(--accent); font: 700 13px/1.2 var(--body); }
.sq-targets-edit::after { content: " ▾"; }
.sq-targets[open] .sq-targets-edit::after { content: " ▴"; }
.sq-target-groups { display: grid; gap: 14px; padding: 6px 16px 0; }
.sq-target-group { display: grid; gap: 2px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.sq-target-group legend { padding: 0; margin: 0 0 6px; font: 700 13px/1.2 var(--body); color: var(--text); }
.sq-target-group legend small { color: var(--muted); font-weight: 500; }
.sq-target { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 8px; color: var(--text); font: 600 14px/1.3 var(--body); cursor: pointer; }
.sq-target:hover { background: var(--surface-2); }
.sq-target:has(input:checked) { background: var(--accent-soft); }
.sq-destination .sq-target input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.sq-target span { min-width: 0; overflow-wrap: anywhere; }
.sq-target-name { margin: 4px 0 8px 38px; }
.sq-target-name[hidden] { display: none; }
.sq-targets > .muted { margin: 12px 16px 16px; }
.sq-save #sqStatus p { margin: 0 0 4px; }
.sq-result { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.sq-result a { font-weight: 700; }
@media (min-width: 721px) { .sq-target-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Koleksiyon ve desteler: kartlar once, gorselli / liste ---------- */
.ws-top { margin-bottom: 4px; }
.ws-top + .ws-tabs { margin-top: 12px; }
.ws-summary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; margin: 4px 0 14px; }
.ws-summary > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 2px; min-width: 0; }
:root[data-theme="dark"] .ws-summary > div { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.ws-summary b { font: 800 20px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ws-summary small { color: var(--muted); font-size: 12px; }
.ws-share-btn { align-self: stretch; height: auto; }
.ws-summary > .ws-summary-actions { display: grid; gap: 6px; padding: 0; background: none; border-radius: 0; }
:root[data-theme="dark"] .ws-summary > .ws-summary-actions { background: none; }
.ws-summary-actions .ws-share-btn { min-height: 0; }
.ws-toolbar .ws-search { flex: 1; min-width: 0; width: 100%; }
.ws-cards-bar { display: flex; align-items: end; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; }
.ws-cards-bar .ws-sort { flex: 1 1 130px; min-width: 0; }
.ws-cards-bar > span:first-child { flex: 1; }
.ws-view { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--surface-2); margin-left: auto; }
.ws-view { padding: 0; gap: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.ws-view button { width: 36px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 17px; cursor: pointer; }
.ws-view button + button { border-left: 1px solid var(--line); }
.ws-view button:hover { background: var(--surface-2); color: var(--text); }
.ws-view button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.ws-view button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ws-tile { display: grid; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--text); min-width: 0; cursor: pointer; }
.ws-tile-art { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; overflow: hidden; background: transparent; box-shadow: 0 1px 2px rgb(16 18 22 / .14), 0 8px 18px -12px rgb(16 18 22 / .5); transition: box-shadow .2s; }
.ws-tile:hover .ws-tile-art { box-shadow: 0 2px 4px rgb(16 18 22 / .16), 0 14px 28px -14px rgb(16 18 22 / .55); }
.ws-tile:hover b { color: var(--accent); }
.ws-tile:focus-visible { outline: none; }
.ws-tile:focus-visible .ws-tile-art { outline: 2px solid var(--focus); outline-offset: 3px; }
.ws-tile-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ws-tile-art .ws-thumb { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 28px; }
.ws-tile .ws-qty { color: var(--text); font-weight: 800; }
.ws-tile b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-tile small, .ws-row small { color: var(--muted); font: 500 11px/1.3 var(--mono); overflow-wrap: anywhere; }
.ws-list { display: grid; gap: 8px; }
.ws-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; text-align: left; color: var(--text); cursor: pointer; min-height: 64px; transition: border-color .15s, background-color .15s; }
.ws-row:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 92%, var(--text) 3%); }
.ws-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-row-art { width: 40px; flex: none; }
.ws-row .ws-row-art img { width: 100%; height: auto; background: transparent; }
.ws-row img, .ws-row .ws-thumb { width: 40px; height: 56px; border-radius: 4px; object-fit: contain; flex: none; display: grid; place-items: center; background: var(--surface-2); }
.ws-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-row-main b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-row .ws-qty { font: 800 15px/1 var(--mono); color: var(--text); flex: none; }
.ws-badge { padding: 3px 8px; border-radius: 999px; font: 800 11px/1.3 var(--body); flex: none; }
.ws-badge.miss { background: var(--wheat); color: #241500; }
.ws-badge.ok { background: var(--accent); color: var(--on-accent); }
@media (max-width: 480px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ws-summary b { font-size: 18px; } }

/* Deste secici: adlariyla yatay kartlar, sonda "+ Yeni deste" */
.ws-deck-picker { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.ws-deck-picker::-webkit-scrollbar { display: none; }
.ws-deck-chip { flex: none; display: grid; gap: 2px; min-width: 120px; max-width: 200px; padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: none; border: 1px solid var(--line-strong); text-align: left; font: inherit; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ws-deck-chip:hover { background: var(--surface-2); color: var(--text); }
.ws-deck-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-deck-chip b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-deck-chip small { color: var(--muted); font-size: 12px; }
.ws-deck-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ws-deck-chip[aria-selected="true"] small { color: inherit; opacity: .8; }
.ws-deck-chip.ws-new { place-content: center; min-width: 130px; font-weight: 750; color: var(--accent); }
/* Tum desteler: deck values, the sum on top; bars compare each deck with the most valuable one */
.ws-all-chip small { font-variant-numeric: tabular-nums; }
.ws-deck-value { font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.ws-totals-sum { display: grid; gap: 2px; text-align: right; }
.ws-totals-sum small { color: var(--muted); font-size: 12px; }
.ws-totals-sum b { font: 800 26px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ws-deck-totals .ws-cards-bar .ws-sort { flex: 0 1 280px; }
.ws-totals-list { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 8px; }
.ws-totals-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--raised); color: var(--text); text-decoration: none; }
.ws-totals-row:hover { background: var(--surface-2); color: var(--text); }
.ws-totals-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-totals-name { display: grid; gap: 2px; min-width: 0; }
.ws-totals-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-totals-name small { color: var(--muted); font-size: 12px; }
.ws-totals-value { font: 800 17px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ws-totals-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ws-totals-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ws-totals-note { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 480px) { .ws-totals-sum { text-align: left; } .ws-totals-sum b { font-size: 22px; } }
.ws-new-form { display: grid; gap: 10px; padding: 16px; margin: 4px 0 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raised); }
.ws-new-actions { display: flex; gap: 8px; }
.ws-deck-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 8px; }
.ws-deck-title { margin: 0; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--text); display: block; }
.ws-deck-title::after { display: none; }
.ws-deck-head .muted { margin: 2px 0 0; }
.ws-deck-actions { display: flex; gap: 8px; }
.ws-add-menu { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ws-card-sheet { max-width: 520px; }
.ws-card-sheet form { display: grid; gap: 10px; margin: 12px 0; }
.ws-card-sheet > button { margin-top: 8px; }

/* Paylasimlar: tek dokunusla paylas, paylasimlarim, takip ettiklerim */
.ws-share-quick { padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raised); }
.ws-share-quick h3 { margin-top: 0; }
.ws-quick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.ws-quick-row select { min-width: 0; }
@media (max-width: 480px) { .ws-quick-row { grid-template-columns: 1fr 1fr; } .ws-quick-row select:first-child { grid-column: 1 / -1; } }
.ws-shares { display: grid; gap: 8px; }
.ws-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--raised); flex-wrap: wrap; }
.ws-share > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ws-share small { color: var(--muted); font-size: 12px; }
.ws-share-actions { display: flex; gap: 6px; }
.ws-more { margin: 22px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raised); }
.ws-more > summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.ws-more h4 { margin: 16px 0 4px; }

.ws-count-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.ws-count-bar p { margin: 0; }
.ws-cards-bar .ws-sort { flex: 1 1 0; }
@media (max-width: 720px) {
  .ws-top .eyebrow { display: none; }
  .ws-top h2 { font-size: 26px; margin: 0; }
  .ws-top { align-items: center; }
  .ws-heading.ws-top .source-actions { width: auto; display: flex; gap: 6px; }
  .ws-heading.ws-top .source-actions .btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .ws-cards-bar .ws-sort { font-size: 12px; }
}
.ws-tile .ws-price, .ws-row .ws-price { font-family: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-tile .ws-location { color: var(--accent); font-family: var(--body); }

/* Filtreler ve siralama (card-filters.js): koleksiyon ve deste ayni paneli kullanir.
   Secenekler gercek onay kutulari; etkin filtreler kaldirilabilir cipler. */
.ws-cards-bar button.cf-toggle { flex: none; padding: 0 14px; }
.ws-cards-bar button.cf-toggle.on { border-color: var(--accent); color: var(--accent); }
.cf-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 12px/20px var(--body); text-align: center; }
.cf-badge[hidden], .cf-panel[hidden], .cf-active[hidden], .cf-summary[hidden], .cf-opt[hidden] { display: none; }
.cf-panel { display: grid; gap: 16px; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--raised); }
.cf-panel > .muted { margin: 0; }
.cf-group { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-group legend { padding: 0; margin: 0 0 8px; font: 700 13px/1.2 var(--body); color: var(--text); }
.cf-options { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-opt { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px/1.2 var(--body); cursor: pointer; }
.cf-opt:hover { background: var(--surface-2); }
.cf-opt:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.cf-opt input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.cf-opt input:focus { outline: none; }
.cf-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cf-opt small { color: var(--muted); font: 500 12px/1 var(--mono); }
.cf-sets { flex-direction: column; flex-wrap: nowrap; gap: 2px; max-height: 232px; overflow-y: auto; overscroll-behavior: contain; }
.cf-sets .cf-opt { width: 100%; border-color: transparent; border-radius: 8px; }
.cf-sets .cf-opt:has(input:checked) { border-color: var(--accent); }
.cf-sets .cf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-find { width: 100%; font-size: 16px; }
.cf-mana { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); }
.cf-mana[data-color="W"] { background: #f6efc9; }
.cf-mana[data-color="U"] { background: #2d7cc4; }
.cf-mana[data-color="B"] { background: #2a2420; }
.cf-mana[data-color="R"] { background: #d4402c; }
.cf-mana[data-color="G"] { background: #2b8a4c; }
.cf-mana[data-color="M"] { background: conic-gradient(#f6efc9 0 20%, #2d7cc4 0 40%, #2a2420 0 60%, #d4402c 0 80%, #2b8a4c 0); }
.cf-mana[data-color="C"] { background: #bdb7ae; }
.cf-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.cf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 0 10px 0 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--text); font: 600 13px/1.2 var(--body); box-shadow: none; cursor: pointer; }
.cf-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
.cf-clear { min-height: 32px; padding: 0 8px; border: 0; background: none; box-shadow: none; color: var(--accent); font: 700 13px/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cf-clear:hover { background: none; border: 0; color: var(--accent-hover); }
.cf-summary { margin: -4px 0 10px; }
.ws-deck-bar .cf-sort { flex: 0 1 260px; }
@media (min-width: 721px) {
  .cf-panel { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .cf-group[data-cf-group="set"] { grid-row: span 2; }
}
@media (max-width: 600px) {
  .ws-deck-bar .cf-sort { flex: 1 1 100%; }
  /* Next to two selects the button keeps its icon and count; the name stays for screen readers. */
  .ws-cards-bar:not(.ws-deck-bar) button.cf-toggle { padding: 0 12px; }
  .ws-cards-bar:not(.ws-deck-bar) .cf-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cf-panel { padding: 12px; }
}

/* Deste: tur bolumleri (Creature, Instant, Land…), secim modu */
.ws-type { margin: 6px 0 18px; }
.ws-type h4 { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 10px; font: 800 16px/1.2 var(--display); letter-spacing: -.01em; color: var(--text); }
.ws-type h4 small { color: var(--muted); font: 600 13px/1 var(--mono); }
.ws-type h4::after { content: ''; flex: 1; height: 1px; background: var(--line); align-self: center; }
.selecting .ws-tile, .selecting .ws-row { position: relative; }
.selecting .ws-tile .ws-tile-art::after, .selecting .ws-row::after { content: ''; position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgb(0 0 0 / .45); box-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.selecting .ws-row::after { top: 50%; bottom: auto; transform: translateY(-50%); right: 56px; border-color: var(--line-strong); background: transparent; }
.selecting .is-selected .ws-tile-art::after, .selecting .ws-row.is-selected::after { content: '✓'; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); border-color: var(--accent); font: 900 14px/1 var(--body); }
.selecting .is-selected .ws-tile-art { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Selection toolbar: on the desktop it sits above the cards and stays under the header while
   scrolling; on phones it follows the list near the thumb, above the tab bar. */
.ws-select-bar { position: sticky; bottom: calc(var(--bottom-nav-height, 0px) + 12px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px -16px var(--shadow); }
.ws-select-bar #wsSelected { font-weight: 700; margin-right: auto; }
@media (min-width: 721px) {
  #wsDeck { display: flex; flex-direction: column; }
  #wsDeck > .ws-select-bar { order: 1; position: sticky; top: 72px; bottom: auto; margin: 0 0 12px; box-shadow: 0 6px 16px -12px var(--shadow); }
  #wsDeck > #wsDeckCards { order: 2; }
#wsDeck > #wsDeckTokens { order: 3; }
}
.ws-selecting .page-up { display: none !important; }

/* =====================================================================================
   Web sitesi katmani: butonlar, arama, kart gorselleri, 3B egim, hesap sayfalari, alt bilgi
   ===================================================================================== */

/* ---------- Butonlar: tek olcek (40 / 32 px), dort tur ----------
   Varsayilan = ikincil (kenarlikli). .primary dolu vurgu, .ghost metin, .danger tehlike
   (kenarlikli; .danger.primary dolu kirmizi). Basinca olcek/ziplama yok; durumlar renkle. */
:root { --btn-h: 40px; --btn-h-sm: 32px; --btn-r: 8px; --btn-r-sm: 6px; }
:is(button:not([class]), button.small, button.primary, button.secondary, button.ghost, button.danger, button.block, a.btn, button.btn, label.btn, span.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; min-height: var(--btn-h); max-width: 100%; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--btn-r);
  background: var(--surface); color: var(--text);
  font: 600 14px/1.2 var(--body); letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 1px rgb(16 18 22 / .05); cursor: pointer; user-select: none;
  transform: none; filter: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
:is(button:not([class]), button.small, button.primary, button.secondary, button.ghost, button.danger, button.block, a.btn, button.btn, label.btn, span.btn):hover {
  background: var(--surface-2); border-color: color-mix(in srgb, var(--line-strong) 55%, var(--text)); color: var(--text);
}
:is(button:not([class]), button.small, button.primary, button.secondary, button.ghost, button.danger, button.block, a.btn, button.btn, label.btn, span.btn):active:not(:disabled) {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--text) 8%); box-shadow: none; transform: none;
}
:is(button, a.btn, label.btn, .chip, .link-button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(button.primary, a.btn.primary, label.btn.primary, span.btn.primary) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
:is(button.primary, a.btn.primary, label.btn.primary, span.btn.primary):hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
:is(button.primary, a.btn.primary):active:not(:disabled) { background: color-mix(in srgb, var(--accent-hover) 85%, #000); }
:is(button.ghost, a.btn.ghost) { background: transparent; border-color: transparent; box-shadow: none; color: var(--text); }
:is(button.ghost, a.btn.ghost):hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
:is(button.danger, a.btn.danger) { background: var(--surface); border-color: color-mix(in srgb, var(--err) 70%, var(--line-strong)); color: var(--err); }
:is(button.danger, a.btn.danger):hover { background: var(--err-soft); border-color: var(--err); color: var(--err); }
:is(button.danger.primary, a.btn.danger.primary) { background: var(--err); border-color: var(--err); color: var(--on-err); }
:is(button.danger.primary, a.btn.danger.primary):hover { background: color-mix(in srgb, var(--err) 86%, #000); border-color: color-mix(in srgb, var(--err) 86%, #000); color: var(--on-err); }
a.btn.wa, button.wa { background: var(--wa); border-color: var(--wa); color: var(--on-wa); }
a.btn.wa:hover { background: color-mix(in srgb, var(--wa) 88%, #000); border-color: transparent; color: var(--on-wa); }
a.btn.dark { background: var(--text); border-color: var(--text); color: var(--bg); }
:is(button.small, a.btn.small, label.btn.small, span.btn.small) { min-height: var(--btn-h-sm); padding: 0 12px; gap: 6px; border-radius: var(--btn-r-sm); font-size: 13px; }
:is(button.block, a.btn.block) { display: flex; width: 100%; }
:is(button, .btn) svg { width: 16px; height: 16px; flex: none; }
:is(button.small, .btn.small) svg { width: 14px; height: 14px; }
:is(button:not([class]), button.small, button.primary, button.secondary, button.ghost, button.danger, button.block, a.btn, button.btn):disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; pointer-events: none; }
:is(button, .btn)[aria-busy="true"] { cursor: progress; opacity: .8; }
:is(button, .btn) .spinner { margin-right: 0; width: 14px; height: 14px; border-color: currentColor; border-top-color: transparent; opacity: .8; }
/* Toggle buttons show their state, not just their label. */
button.small[data-select][aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.icon-btn { display: inline-grid; place-items: center; width: var(--btn-h); height: var(--btn-h); min-height: 0; padding: 0; border-radius: var(--btn-r); font-size: 16px; }
button.icon-btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.icon-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.link-button { display: inline; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { color: var(--accent-hover); background: none; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(2px); }
.dialog-close { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
/* Aligned toolbars: natural-width buttons in a wrapping row, never stretched full width. */
.button-row, .source-actions, .actions, .req-row, .ws-deck-actions, .ws-share-actions, .ws-new-actions, .rq-done-actions, .swap-actions, .req-actions, .list-actions:not(.page-tabs) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.card-head .list-actions, .card-head .source-actions { margin: 0; }
.card-head .list-actions .save-action { padding: 0 12px; box-shadow: none; }
.list-actions .save-action { border-radius: var(--btn-r-sm); min-height: var(--btn-h-sm); padding: 0 12px; background: var(--surface); color: var(--text); }
.list-actions .save-action:hover { background: var(--surface-2); }
.card-tile .list-actions { display: flex; }
.req-actions button, .swap-actions button { flex: 0 1 auto; white-space: nowrap; }
.ws-share-btn { align-self: center; }
.ws-heading .source-actions .btn { white-space: nowrap; }
.chat-menu button, .chat-menu .btn { justify-content: flex-start; width: 100%; border: 0; min-height: 36px; padding: 0 12px; background: transparent; box-shadow: none; }
.chat-menu button:hover, .chat-menu .btn:hover { background: var(--surface-2); }
.chat-menu .btn.wa { background: var(--wa); color: var(--on-wa); }
/* Chat composer: the linked card (removable) and optional starters, shown while the field is empty. */
.composer-extras { max-width: 1040px; margin: 0 auto 8px; display: grid; gap: 8px; }
.composer-card { justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.composer-card > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-card button { width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; box-shadow: none; }
.composer-starters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.composer-starters::-webkit-scrollbar { display: none; }
.composer-starters button { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); box-shadow: none; }
@media (max-width: 720px) {
  .ws-heading .source-actions { width: auto; }
  .owner .actions { justify-content: flex-start; }
}

/* ---------- Ust bar: site aramasi alanda, oneriler altinda ---------- */
header.top .in { gap: 16px; }
form.site-search {
  position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 180px; max-width: 560px;
  height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); box-shadow: none;
}
form.site-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.site-search-icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.site-search input { flex: 1; min-width: 0; height: 38px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; font-size: 16px; }
.site-search input::-webkit-search-cancel-button { cursor: pointer; }
.site-search .site-search-submit { flex: none; min-height: 30px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--surface-2); color: var(--text); font: 600 13px/1 var(--body); box-shadow: none; cursor: pointer; }
.site-search .site-search-submit:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--text) 10%); }
header.top .search-toggle { display: none; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; }
header.top .search-toggle:hover { background: var(--surface-2); color: var(--text); }
header.top .search-toggle svg { width: 20px; height: 20px; }
.lnav .search-toggle { border-radius: 8px; border-color: var(--line-strong); color: var(--text); text-decoration: none; }
.lnav .search-toggle:hover { background: var(--surface-2); color: var(--text); }
.lnav .site-search { max-width: 300px; }
.lang-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; flex: none; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: 700 12px/1 var(--body); letter-spacing: .04em; box-shadow: none; cursor: pointer; transition: background-color .15s; }
.lang-toggle:hover { background: var(--surface-2); color: var(--text); }
header.top .search-toggle + .lang-toggle { margin-left: 8px; }
@media (min-width: 721px) { header.top .search-toggle + .lang-toggle { margin-left: auto; } header.top .top-actions { margin-left: 0; } }
.discover-shortcuts a { padding-left: 72px; }
@media (max-width: 800px) { .discover-shortcuts a { padding-left: 62px; } }
@media (max-width: 600px) { .discover-shortcuts a { padding-left: 12px; } }
.top-actions .icon-link { width: 40px; height: 40px; border-radius: 8px; }
.top-actions .header-register { flex: none; min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; }
.account-link:not(.avatar-link) { height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; }
.account-link:not(.avatar-link):hover { background: var(--surface-2); color: var(--text); }
.account-dropdown { top: 46px; min-width: 240px; padding: 6px; border-radius: 10px; }
.account-dropdown a, .account-dropdown button { display: flex; width: 100%; min-height: 36px; align-items: center; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font: 500 14px/1.2 var(--body); text-align: left; text-decoration: none; cursor: pointer; justify-content: flex-start; }
.account-dropdown a:hover, .account-dropdown button:hover, .account-dropdown a:focus-visible, .account-dropdown button:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.account-dropdown hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .top-actions .header-register { display: none; } }
@media (max-width: 720px) {
  header.top .search-toggle { display: grid; }
  header.top .site-search, .lnav .site-search { display: none; }
  .account-link:not(.avatar-link) { padding: 0 12px; }
}
@media (max-width: 360px) {
  header.top { padding-inline: 10px; }
  header.top .in { gap: 6px; }
  header.top .brand img.brand-logo { width: 88px; }
  header.top .search-toggle, header.top .lang-toggle { width: 36px; height: 36px; }
  header.top .search-toggle + .lang-toggle { margin-left: 4px; }
  .account-link:not(.avatar-link) { height: 36px; padding: 0 10px; font-size: 13px; }
}

/* Suggestions under a search field (combobox listbox, not a dialog). */
.suggest-host { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; box-sizing: border-box;
  min-width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 18px 40px -16px var(--shadow), 0 2px 6px rgb(16 18 22 / .06);
}
.suggest .search-game-separator { padding: 10px 10px 4px; border-top: 1px solid var(--line); color: var(--muted); font: 700 11px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.suggest .search-game-separator:first-child { border-top: 0; padding-top: 6px; }
.suggest .search-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); text-decoration: none; text-align: left; }
.suggest .search-result:hover, .suggest .search-result[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.suggest .search-thumb { width: 36px; aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: transparent; flex: none; }
.search-thumb > .card-img { width: 100%; height: 100%; object-fit: contain; }
.search-thumb > .card-text-art { height: 100%; border-radius: 3px; }
.suggest .search-card-name { display: grid; gap: 1px; min-width: 0; }
.suggest .search-card-name b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.suggest .search-card-name b mark { background: none; color: inherit; font-weight: 800; }
.suggest .search-card-name small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .search-card-name > span { font: 500 11px/1.3 var(--mono); color: var(--faint); }
.suggest-all { display: flex; width: 100%; justify-content: flex-start; min-height: 40px; margin-top: 4px; padding: 0 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; background: transparent; box-shadow: none; color: var(--accent); font: 600 14px/1 var(--body); cursor: pointer; }
.suggest-all:hover { background: var(--surface-2); color: var(--accent); }
.suggest-empty { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 14px; }

/* ---------- Arama sayfasi ---------- */
.page-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; max-width: 760px; margin: 22px 0 6px; }
.page-search-field { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field); }
.page-search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.page-search-field > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.page-search-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; font-size: 17px; }
.page-search-field input:focus { outline: none; border: 0; }
.page-search select { flex: 0 0 auto; width: auto; min-height: 48px; border-radius: 10px; }
.page-search > button { min-height: 48px; padding: 0 24px; border-radius: 10px; font-size: 15px; }
.page-search .suggest { top: calc(100% + 6px); }
.results-form { display: none; margin-top: 4px; }
@media (max-width: 720px) {
  .results-form { display: flex; }
  .page-search select { flex: 1 1 auto; }
  .page-search > button { flex: 0 0 auto; }
}
.app-hero .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.app-hero .chips .muted { font-size: 13px; }
.discover-more { margin: 0 0 8px; font-weight: 600; }
.need-login { border: 0; }
.need-login p { margin-bottom: 22px; }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 18px 0 12px; }
.results-head h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; overflow-wrap: anywhere; }
.results-head p { margin: 0; font-size: 14px; }
.search-games { display: flex; gap: 2px; margin: 0 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.search-games::-webkit-scrollbar { display: none; }
.search-game { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px/1 var(--body); text-decoration: none; white-space: nowrap; }
.search-game:hover { color: var(--text); }
.search-game[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.results-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 28px 20px; }
.result-card { display: grid; gap: 10px; color: var(--text); text-decoration: none; }
.result-card:hover { color: var(--text); }
.result-art { display: block; }
.result-art > .card-img, .result-art > .card-text-art { width: 100%; border-radius: 4.5% / 3.2%; box-shadow: 0 1px 2px rgb(16 18 22 / .14), 0 8px 18px -12px rgb(16 18 22 / .5); transition: box-shadow .2s; }
.result-card:hover .result-art > * { box-shadow: 0 2px 4px rgb(16 18 22 / .16), 0 16px 30px -14px rgb(16 18 22 / .6); }
.result-card:focus-visible { outline: none; }
.result-card:focus-visible .result-art > * { outline: 2px solid var(--focus); outline-offset: 3px; }
.result-body { display: grid; gap: 2px; min-width: 0; }
.result-body small { color: var(--muted); font-size: 12px; font-weight: 600; }
.result-body b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.result-card:hover .result-body b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.result-body span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.result-body .mono { font: 500 12px/1.3 var(--mono); color: var(--faint); }
.results-empty { text-align: left; display: grid; gap: 6px; justify-items: start; padding: 22px; }
.results-empty p { margin: 0; }
.price-source-note { font-size: 12px; text-align: center; margin-top: 20px; }
.owner-section h3 { margin-top: 32px; }
@media (max-width: 600px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }

/* Pagination with page numbers. */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 28px 0; }
.pagination > span { font-size: 14px; color: var(--muted); }
.pager-pages { display: inline-flex; gap: 4px; align-items: center; }
.pager-page { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 6px; color: var(--text); font: 600 14px/1 var(--body); text-decoration: none; }
a.pager-page:hover { background: var(--surface-2); color: var(--text); }
.pager-page[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.pager-gap { color: var(--muted); padding: 0 2px; }

/* Single card page: the card, its facts and actions in rows. */
.card-head .card-tools { gap: 8px; }
.card-head .counts { order: 0; }
#results .card-head > div:last-child { gap: 14px; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 4px; color: var(--muted); font: 600 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; text-decoration: none; }
.back:hover { color: var(--accent); text-decoration: underline; }
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- Kart gorselleri ----------
   Magic gorselleri hicbir yerde kirpilmaz, bulaniklastirilmaz, renklendirilmez. */
img.card-img { display: block; width: 100%; height: auto; aspect-ratio: 488 / 680; object-fit: contain !important; filter: none !important; }
/* Text card for games whose publisher artwork we do not show: a real 63:88 card with the game's
   colour band, name, set and number. Plain colours and px sizes so it renders everywhere
   (older WebKit included); container units only refine the type where supported. */
.card-text-art {
  --game: #6b7280; --game-ink: #ffffff; --game-soft: #f1f2f4; --game-edge: #9aa0a8; --game-mark: '◆';
  position: relative; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box;
  width: 100%; min-width: 0; aspect-ratio: 63 / 88; overflow: hidden; padding: 0 10px 0;
  border: 2px solid var(--game-edge); border-radius: 4.5% / 3.2%;
  background: var(--game-soft); color: var(--text); text-align: left; line-height: 1.2; font-size: 13px;
}
@supports not (aspect-ratio: 1) { .card-text-art { height: 0; padding-bottom: 139.7%; } }
.card-text-art[data-game="pokemon"] { --game: #f0c400; --game-ink: #1f1a00; --game-soft: #fff8d9; --game-edge: #d9ad00; --game-mark: '◓'; }
.card-text-art[data-game="onepiece"] { --game: #c8102e; --game-ink: #ffffff; --game-soft: #fdecee; --game-edge: #b30f29; --game-mark: '☠'; }
.card-text-art[data-game="cyberpunk"] { --game: #00a9ba; --game-ink: #001c20; --game-soft: #e2f7f9; --game-edge: #0093a2; --game-mark: '◈'; }
.card-text-art[data-game="magic"] { --game: #8a6a3a; --game-ink: #ffffff; --game-soft: #f6efe3; --game-edge: #7a5c30; --game-mark: '✦'; }
:root[data-theme="dark"] .card-text-art { --game-soft: #2a2c31; }
:root[data-theme="dark"] .card-text-art[data-game="pokemon"] { --game-soft: #322c12; }
:root[data-theme="dark"] .card-text-art[data-game="onepiece"] { --game-soft: #351a1e; }
:root[data-theme="dark"] .card-text-art[data-game="cyberpunk"] { --game-soft: #11302f; }
:root[data-theme="dark"] .card-text-art[data-game="magic"] { --game-soft: #30291f; }
/* Faint game mark in the art area, so the text card reads as a card at any size. */
.card-text-art::after { content: var(--game-mark); position: absolute; right: 8%; bottom: 14%; color: var(--game); opacity: .28; font: 400 64px/1 var(--body); pointer-events: none; }
.card-text-band { display: block; flex: none; margin: 0 -10px 4px; padding: 7px 10px 6px; background: var(--game); color: var(--game-ink); font: 800 10px/1.1 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-text-art > b { position: relative; z-index: 1; font: 800 15px/1.15 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-text-art > small { position: relative; z-index: 1; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-text-art > .card-text-print { margin: auto -10px 0; padding: 6px 10px 7px; border-top: 1px solid var(--game-edge); background: var(--surface); color: var(--text); font: 600 10px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@supports (container-type: inline-size) {
  .card-text-art { container-type: inline-size; }
  .card-text-art > b { font-size: clamp(9px, 10.5cqi, 26px); }
  .card-text-art > small { font-size: clamp(8px, 6.8cqi, 15px); }
  .card-text-band, .card-text-art > .card-text-print { font-size: clamp(7px, 6.2cqi, 14px); }
  .card-text-art::after { font-size: clamp(18px, 34cqi, 120px); }
}
/* Thumbnails (list rows, suggestions, small previews) keep the band, name and mark only. */
:is(.search-thumb, .ws-row-art, .po-thumb, .discover-preview, .swap-sides li, .swap-choice label, .req-card, .scan-candidates button, .rq-item, .wanted-art) > .card-text-art { gap: 2px; padding: 0 4px; border-width: 1px; font-size: 8px; }
:is(.search-thumb, .ws-row-art, .po-thumb, .discover-preview, .swap-sides li, .swap-choice label, .req-card, .scan-candidates button, .rq-item, .wanted-art) > .card-text-art > :is(small, .card-text-print) { display: none; }
:is(.search-thumb, .ws-row-art, .po-thumb, .discover-preview, .swap-sides li, .swap-choice label, .req-card, .scan-candidates button, .rq-item, .wanted-art) > .card-text-art > b { font-size: 8px; -webkit-line-clamp: 3; }
:is(.search-thumb, .ws-row-art, .po-thumb, .discover-preview, .swap-sides li, .swap-choice label, .req-card, .scan-candidates button, .rq-item, .wanted-art) > .card-text-art > .card-text-band { margin: 0 -4px 2px; padding: 3px 4px; font-size: 6px; letter-spacing: .02em; }
:is(.search-thumb, .ws-row-art, .po-thumb, .discover-preview, .swap-sides li, .swap-choice label, .req-card, .scan-candidates button, .rq-item, .wanted-art) > .card-text-art::after { font-size: 20px; right: 6%; bottom: 6%; }
img.card-photo { object-fit: contain !important; background: var(--surface-2); }
.rq-item > :is(.card-img, .card-text-art) { width: 84px; }
.req-card > :is(.card-img, .card-text-art) { width: 64px; border-radius: 4.5% / 3.2%; }
.req-card:not(:has(img)) { grid-template-columns: 64px minmax(0, 1fr); }
.swap-sides li > :is(.card-img, .card-text-art) { width: 42px; flex: none; border-radius: 4px; }
.swap-choice label > :is(.card-img, .card-text-art) { width: 36px; flex: none; border-radius: 3px; }
.scan-candidates button > :is(.card-img, .card-text-art) { width: 64px; flex: none; align-self: start; border-radius: 4px; }
.wanted-card .wanted-art { width: 80px; flex: none; }
.wanted-card .wanted-art img { width: 100%; height: auto; }
.discover-preview > :is(.card-img, .card-text-art) { width: calc((100% - 18px) / 4); max-width: 65px; border-radius: 3px; }
.po-thumb > .card-img { width: 100%; height: 100%; object-fit: contain; }
.po-thumb > .card-text-art { height: 100%; border-radius: 3px; }
.ws-tile-art > .card-text-art { height: 100%; }
.card-text-art.detail-art { max-width: 360px; justify-self: center; }
.ws-edit-layout .card-text-art { max-width: 200px; }
@media (max-width: 720px) { .swap-card .swap-sides li > :is(.card-img, .card-text-art) { width: 32px; } .swap-choice label > :is(.card-img, .card-text-art) { width: 28px; } }
@media (max-width: 600px) { .sq-row > .sq-art { width: 64px; } }

/* ---------- 3B kart egimi: cerceve yok, kart golgesiyle birlikte serbestce egilir ----------
   Egilen oge kartin kendisidir; arkasinda kutu, kenarlik veya kirpan kap yoktur. Isik ve foil
   katmanlari kartin kendi koselerine yuvarlanir, komsu kartlar kirpilmaz. */
.tilt {
  position: relative; display: block; isolation: isolate; overflow: visible;
  padding: 0; border: 0; background: transparent; border-radius: 4.5% / 3.2%;
  box-shadow: 0 1px 2px rgb(16 18 22 / .16), 0 10px 22px -14px rgb(16 18 22 / .55);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}
.tilt > :is(img, .card-text-art) { border-radius: inherit; }
.tilt.tilting {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);
  box-shadow: 0 30px 46px -20px rgb(0 0 0 / .6), 0 8px 16px -8px rgb(0 0 0 / .32);
  z-index: 5; transition: transform .08s linear, box-shadow .2s; will-change: transform;
}
.card-art { background: transparent; border-radius: 4.5% / 3.2%; overflow: visible; cursor: zoom-in; }
.card-art img { transition: none; }
.card-art:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.card-tile { border: 0; background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
.card-tile .tile-body { padding: 12px 2px 0; }
.discover-card > div { padding: 12px 0 0; }
.discover-card > .card-art { border-radius: 4.5% / 3.2%; }
.wish-card { background: transparent; overflow: visible; aspect-ratio: auto; border-radius: 4.5% / 3.2%; }
.wish-card > img { width: 100%; height: auto; aspect-ratio: 488 / 680; object-fit: contain; }
.wish-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wish-item figcaption { display: grid; gap: 2px; text-align: left; white-space: normal; }
.wish-item figcaption b { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wish-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.wish-meta .wish-price { font: 700 13px/1.2 var(--mono); color: var(--text); }
.wish-meta .wish-price small { font-size: 10px; color: var(--muted); }
.ws-public-card > .tilt { border-radius: 4.5% / 3.2%; }
.ws-public-card > .tilt img { height: auto; border-radius: inherit; }
/* Foil badge rides the top edge of the card so it never covers the card name or the art. */
:is(.tilt, .detail-tilt)[data-foil]::after { top: -9px; left: 10px; }
.detail-tilt { overflow: visible; }
.detail-tilt > img { border-radius: 4.5% / 3.2%; }
@media (prefers-reduced-motion: reduce) {
  .tilt, .tilt.tilting { transform: none; transition: none; box-shadow: 0 1px 2px rgb(16 18 22 / .16), 0 10px 22px -14px rgb(16 18 22 / .55); }
}

/* ---------- Ortak sayfa bilesenleri ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 12px 0 22px; }
.page-head h1 { margin: 6px 0 4px; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; }
.page-head p { margin: 0; max-width: 640px; }
.panel { margin: 0 0 18px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.panel > h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; }
.panel > h2 + .muted { margin-top: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 20px; }
details.panel > summary { font-weight: 700; min-height: 24px; }
details.panel[open] > summary { margin-bottom: 14px; }
.notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); font-size: 14px; }
.notice.success { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--text); }
.notice.error { border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); color: var(--text); }
.notice ul { margin: 8px 0 0; padding-left: 18px; }
.notice .button-row { margin-top: 10px; }
.verify-banner { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.verify-banner p { margin: 0; }
.verify-banner [data-verify-status] { margin-top: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); font: 700 11px/1 var(--body); }
.tag.status-new { background: var(--accent-soft); color: var(--accent); }
.tag.status-done { color: var(--muted); }
.tag.kind-bug, .tag.kind-complaint, .tag.banned { background: var(--err-soft); color: var(--err); }
.tag.kind-report { background: var(--member-soft); color: var(--member); }
.segmented { display: inline-flex; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); margin: 0; min-width: 0; }
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented > label, .segmented > a { position: relative; display: inline-flex; align-items: center; margin: 0; color: var(--text); font: 600 14px/1 var(--body); text-decoration: none; cursor: pointer; }
.segmented > label + label, .segmented > a + a { border-left: 1px solid var(--line); }
.segmented > label input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented > label span, .segmented > a { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; }
.segmented > label:has(input:checked) span, .segmented > a.on { background: var(--accent-soft); color: var(--accent); }
.segmented > label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.segmented > label:hover span, .segmented > a:hover { background: var(--surface-2); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }

/* Forms: 40 px fields like the buttons; labels above, hints and errors under them. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])), select {
  min-height: 40px; padding: 8px 12px; line-height: 1.4; border-radius: 8px; border-color: var(--line-strong); box-shadow: none;
}
textarea { border-radius: 8px; border-color: var(--line-strong); box-shadow: none; padding: 10px 12px; }
input:where(:not([type="checkbox"]):not([type="radio"])):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text)); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 0; }
select { cursor: pointer; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font: 600 14px/1.3 var(--body); color: var(--text); letter-spacing: 0; text-transform: none; display: block; }
.field .optional { color: var(--muted); font-weight: 500; }
.field-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.field-error { margin: 0; color: var(--err); font-size: 13px; font-weight: 600; line-height: 1.4; }
.field-error:empty { display: none; }
.field-meta { display: flex; justify-content: space-between; gap: 12px; }
:is(input, textarea, select)[aria-invalid="true"] { border-color: var(--err) !important; }
:is(input, textarea, select)[aria-invalid="true"]:focus { outline-color: color-mix(in srgb, var(--err) 30%, transparent) !important; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-alert { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); color: var(--text); font-size: 14px; line-height: 1.45; }
.form-alert[data-kind="success"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.form-alert:focus { outline: none; }
.form-status { color: var(--accent); font-size: 14px; font-weight: 600; }
.password-field { position: relative; display: flex; align-items: center; }
.password-field input { padding-right: 96px; }
.password-field .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 0 10px; color: var(--muted); }
.password-field .password-toggle:hover { color: var(--text); }
.strength { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.strength-bar { display: inline-grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
.strength-bar i { height: 4px; border-radius: 2px; background: var(--line); }
.strength[data-level="1"] .strength-bar i:nth-child(-n+1) { background: var(--err); }
.strength[data-level="2"] .strength-bar i:nth-child(-n+2) { background: var(--wheat); }
.strength[data-level="3"] .strength-bar i { background: var(--accent); }
.strength[data-level="3"] .strength-text { color: var(--accent); }
label.check { align-items: flex-start; }
label.check input { width: 18px; height: 18px; margin-top: 1px; }
label.check a { font-weight: 600; }

/* ---------- Giris, kayit, parola sayfalari ---------- */
.auth-page { display: grid; justify-content: center; grid-template-columns: minmax(0, 440px); gap: 32px; padding: 24px 0 12px; }
.auth-page.wide { grid-template-columns: minmax(0, 560px) minmax(0, 320px); align-items: start; }
.auth-card { padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -32px var(--shadow); min-width: 0; }
.auth-card h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.1; }
.auth-lead { margin: 0 0 22px; color: var(--muted); }
.auth-form { display: grid; gap: 18px; }
.auth-row { display: flex; justify-content: flex-end; margin-top: -8px; font-size: 14px; }
.auth-row a, .auth-switch a { font-weight: 600; }
.auth-switch { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; }
.auth-aside { padding: 8px 4px; }
.auth-aside h2 { margin: 8px 0 14px; font-size: 20px; }
.auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-aside li { padding-left: 26px; position: relative; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-aside li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.auth-aside li b { display: block; color: var(--text); }
.auth-done { display: grid; gap: 10px; justify-items: start; }
.auth-done p { margin: 0; }
.done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 22px; font-weight: 800; }
.account-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.account-types legend { margin: 0 0 8px; padding: 0; font: 600 14px/1.3 var(--body); letter-spacing: 0; }
.account-type { position: relative; display: block; cursor: pointer; text-transform: none; letter-spacing: 0; }
.account-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.account-type-card { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.account-type-card b { font-size: 16px; }
.account-type-card small { color: var(--muted); font: 400 13px/1.45 var(--body); }
.account-type-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 8px; background: var(--surface-2); font-size: 18px; color: var(--muted); }
.account-type:hover .account-type-card { border-color: var(--text); }
.account-type input:checked + .account-type-card { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.account-type input:checked + .account-type-card .account-type-icon { background: var(--accent); color: var(--on-accent); }
.account-type input:focus-visible + .account-type-card { outline: 2px solid var(--focus); outline-offset: 2px; }
.field > label.check { display: flex; font: 400 14px/1.45 var(--body); }
@media (max-width: 860px) { .auth-page.wide { grid-template-columns: minmax(0, 560px); } .auth-aside { display: none; } }
@media (max-width: 600px) {
  .auth-page { padding-top: 4px; grid-template-columns: minmax(0, 1fr); }
  .auth-card { padding: 22px 18px; border-radius: 12px; }
  .auth-card h1 { font-size: 26px; }
  .account-types { grid-template-columns: 1fr 1fr; gap: 8px; }
  .account-type-card { padding: 12px; }
}

/* ---------- Hesabim ---------- */
.account-head { align-items: center; }
.account-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.account-id .avatar { width: 52px; height: 52px; border-radius: 12px; font-size: 22px; }
.account-id h1 { margin: 0; font-size: 28px; overflow-wrap: anywhere; }
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-nav { position: sticky; top: 80px; display: grid; gap: 2px; }
.settings-nav a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.settings-nav a:hover { background: var(--surface-2); color: var(--text); }
.settings-sections { min-width: 0; }
.settings-sections > section { scroll-margin-top: 80px; }
.settings-sections .theme-settings { max-width: none; margin-bottom: 18px; border-radius: 12px; }
.settings-form { display: grid; gap: 16px; margin-top: 16px; }
.settings-form.narrow { max-width: 440px; }
.link-list { margin: 8px 0 18px; padding-left: 18px; display: grid; gap: 6px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px; border: 1px solid color-mix(in srgb, var(--err) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--err-soft) 45%, var(--surface)); }
.danger-zone h3 { margin: 0 0 4px; font: 700 16px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); display: block; }
.danger-zone h3::after { display: none; }
.danger-zone p { margin: 0; color: var(--muted); font-size: 14px; }
.muted-link { color: var(--muted); font-size: 14px; }
.language-settings { max-width: 650px; }
@media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } }

/* ---------- Diyaloglar: geri bildirim, hesap silme ---------- */
.form-dialog { width: min(560px, calc(100% - 24px)); max-height: 92dvh; overflow-y: auto; padding: 24px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.form-dialog::backdrop { background: var(--scrim); }
.dialog-form { display: grid; gap: 16px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h2 { margin: 0; font-size: 22px; }
.dialog-form > .muted { margin: -6px 0 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dialog-done { display: grid; gap: 10px; justify-items: start; }
.dialog-done h2 { margin: 6px 0 0; }
.dialog-done p { margin: 0; color: var(--muted); }
.dialog-done .dialog-actions { width: 100%; }
.choice-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-row legend { margin: 0 0 8px; padding: 0; font: 600 14px/1.3 var(--body); letter-spacing: 0; }
.choice { position: relative; display: block; cursor: pointer; text-transform: none; letter-spacing: 0; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: grid; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); }
.choice b { font-size: 14px; }
.choice small { color: var(--muted); font: 400 12px/1.35 var(--body); }
.choice:hover span { border-color: var(--text); }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.feedback-dialog textarea { min-height: 140px; font-family: var(--body); font-size: 15px; }
.danger-dialog .notice { margin: 0; }
@media (max-width: 600px) { .choice-row { grid-template-columns: 1fr 1fr; } .form-dialog { padding: 18px 16px; } }

/* ---------- Dışa aktar: CSV / metin, indir veya kopyala ---------- */
.export-dialog .dialog-head { align-items: flex-start; }
.export-what { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.export-what b { color: var(--text); }
.export-formats { grid-template-columns: 1fr 1fr; }
.export-formats .choice small code { font: 500 11.5px/1.35 var(--mono); color: var(--muted); background: none; padding: 0; overflow-wrap: anywhere; }
.export-preview { display: grid; gap: 6px; }
.export-preview textarea { min-height: 150px; max-height: 40dvh; resize: vertical; font: 13px/1.55 var(--mono); white-space: pre; overflow: auto; background: var(--surface-2); }
.export-status { margin: 0; min-height: 1.3em; font-size: 13px; }
.export-status.err { color: var(--err); }
.export-dialog .dialog-actions .btn[aria-disabled=true] { opacity: .5; pointer-events: none; }
.export-toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 70; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.export-toast { padding: 11px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font: 600 14px/1.35 var(--body); box-shadow: 0 10px 30px -10px var(--shadow); animation: live-toast-in .18s ease-out; }
@media (max-width: 600px) { .export-formats { grid-template-columns: 1fr; } .export-toasts { bottom: calc(var(--bottom-nav-height, 64px) + 16px + env(safe-area-inset-bottom)); } }

/* ---------- Aktar ve kaynaklar ---------- */
.import-panel { max-width: 860px; }
.import-form { display: grid; gap: 16px; margin-top: 14px; }
.import-form .form-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.import-form textarea { min-height: 180px; font-family: var(--mono); font-size: 13px; }
.import-form .segmented { align-self: end; }
.file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.file-pick { position: relative; }
.import-help { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.import-help summary { font-weight: 600; color: var(--accent); }
.import-help p { margin: 10px 0 0; }
.import-example { margin: 10px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); font: 13px/1.6 var(--mono); white-space: pre; overflow-x: auto; }
#importResult:not(:empty) { margin-top: 18px; }
.import-preview { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.import-preview h3 { margin: 0; font: 700 17px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); display: block; }
.import-preview h3::after { display: none; }
.import-preview > p { margin: 0; }
.import-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.import-summary > div { padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.import-summary dt { color: var(--muted); font-size: 12px; }
.import-summary dd { margin: 2px 0 0; font: 800 20px/1.1 var(--display); }
.transfer-changes { list-style: none; padding: 0; margin: 8px 0 0; max-height: 320px; }
.transfer-changes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.transfer-changes li .mono { margin-left: auto; }
.change-type { display: inline-flex; min-width: 92px; font: 700 11px/1.4 var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
[data-change="added"] .change-type { color: var(--accent); }
[data-change="removed"] .change-type { color: var(--err); }
.transfer-errors { margin: 8px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.transfer-errors .mono { font-weight: 700; margin-right: 6px; }
.source-list { display: grid; }
.src { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); }
.src:first-child { border-top: 0; padding-top: 4px; }
.src-main { min-width: 0; display: grid; gap: 2px; }
.src .u { font-size: 15px; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.src-meta { font-size: 13px; }
.manual-add textarea { min-height: 110px; }
@media (max-width: 600px) { .import-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .import-form .form-row { grid-template-columns: 1fr; } }

/* ---------- Yonetim ---------- */
.inbox-list { display: grid; gap: 12px; }
.inbox-item { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.inbox-item[data-status="done"] { opacity: .75; }
.inbox-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inbox-item header small { margin-left: auto; }
.inbox-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.inbox-from { margin: 0; font-size: 13px; }
.inbox-context { display: grid; gap: 4px; margin: 8px 0 0; font-size: 12px; }
.inbox-context div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
.inbox-context dt { color: var(--muted); }
.inbox-context dd { margin: 0; overflow-wrap: anywhere; font-family: var(--mono); }

/* ---------- Alt bilgi: her sayfada ---------- */
main.app { padding-bottom: 40px; }
body[data-route="chat"] main.app { padding-bottom: calc(96px + var(--safe-b)); }
.site-footer { margin-top: 56px; padding: 28px 20px calc(28px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; }
.site-footer .in { max-width: 1040px; margin: 0 auto; }
/* Short pages keep the footer at the bottom of the window. */
body.site-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.site-app > main.app { flex: 1 0 auto; width: 100%; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 32px; flex-wrap: wrap; }
.footer-brand .brand img.brand-logo { width: 116px; }
.footer-brand p { margin: 10px 0 0; max-width: 380px; line-height: 1.5; }
.site-footer .brand img.logo-on-dark { display: none; }
:root[data-theme="dark"] .site-footer .brand img.logo-on-light { display: none; }
:root[data-theme="dark"] .site-footer .brand img.logo-on-dark { display: block; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer-links a, .footer-links .link-button { color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.footer-links a:hover, .footer-links .link-button:hover { color: var(--accent); text-decoration: underline; }
.footer-legal { display: grid; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.footer-legal p { margin: 0; max-width: 880px; }
.footer-legal a { color: inherit; text-decoration: underline; }
/* App-like tools (conversations, trades, the scan queue, the game table) end without the site footer;
   their own fixed composer / action bar owns the bottom of the screen. */
body[data-route="chat"] .site-footer, body[data-route="messages"] .site-footer, body[data-route="swaps"] .site-footer,
body[data-route="scan"] .site-footer, body[data-route="life"] .site-footer, .life-fullscreen .site-footer { display: none; }
@media (max-width: 720px) {
  .site-footer { padding: 24px 16px calc(var(--bottom-nav-height, 64px) + 24px); }
  .footer-links { gap: 10px 18px; }
}
.tile-body h3 { display: block; margin: 0; font: 700 15px/1.35 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); min-height: 0; }
.tile-body h3::after { display: none; }

/* Card art boxes show a quiet placeholder until the (lazy) image arrives. */
.ws-tile-art { background: var(--surface-2); }
/* Game table setup uses the site's button scale; the live table keeps large counters for play. */
.ll .ll-setup .ll-btn:not(.ll-game) { min-height: 40px; padding: 0 16px; border-radius: 8px; }
.ll .ll-setup .ll-segment .ll-btn { min-width: 40px; }
.ll .ll-start-row .ll-primary { min-height: 48px; border-radius: 10px; }
.ll .ll-btn:active:not(:disabled) { transform: none; }
.ll .ll-game { border-radius: 10px; }
.card-text-art.detail-art > b { font-size: 24px; }
.card-text-art.detail-art > small { font-size: 14px; }
.card-text-art.detail-art > :is(.card-text-band, .card-text-print) { font-size: 12px; }
/* Landing header: links never wrap; the header field gives way to the hero search on mid widths. */
.lnav .links a { white-space: nowrap; }
.lnav .site-search { min-width: 160px; max-width: 260px; }
@media (max-width: 1199px) { .lnav .site-search { display: none; } .lnav .cta .search-toggle { display: grid; } }
.hero .hero-search .page-search { flex-wrap: nowrap; }
.hero .hero-search .page-search-field { flex: 1 1 auto; }
.lnav .cta { margin-left: auto; }
/* Search fields show focus on their frame, not a second ring inside it. */
.site-search input:focus, .page-search-field input:focus, .password-field input:focus { outline-offset: 0; }
.site-search input:focus, .page-search-field input:focus { outline: none; }

/* ---------- Uygulama kabugundaki arama penceresi (iOS / Android) ----------
   Yalnizca window.ReactNativeWebView varken kullanilir; gorunumu onceki haliyle aynidir. */
.search-dialog .search-field { border: 0; background: var(--surface-2); box-shadow: var(--field-sunk); border-radius: 14px; }
.search-dialog .search-field:focus-within { border: 0; box-shadow: var(--field-sunk); background: color-mix(in srgb, var(--surface-2) 85%, var(--text) 6%); }
.search-dialog .search-field input, .search-dialog .search-field input:focus { box-shadow: none; background: transparent; min-height: 0; border: 0; outline: none; }
.search-dialog .search-games { display: flex; gap: 8px; margin: 12px 0 0; padding: 2px 0 4px; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.search-dialog .search-game { flex: none; min-height: 38px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px; font: 600 14px/1 var(--body); background: var(--btn-bg); color: var(--muted); box-shadow: inset 0 1px 0 var(--highlight), 0 1px 0 var(--btn-lip); cursor: pointer; }
.search-dialog .search-game:hover { background: var(--btn-bg-hover); color: var(--text); }
.search-dialog .search-game[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.search-dialog .search-game:active { transform: scale(.96); }
.search-dialog .search-result { position: relative; background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--raised); transition: transform .14s ease, box-shadow .2s, background-color .2s; }
.search-dialog .search-result:hover, .search-dialog .search-result[aria-selected="true"] { background: var(--surface); box-shadow: var(--raised-hover); }
.search-dialog .search-result:active { transform: scale(.975); }
.search-dialog .search-thumb > .card-text-art { border-radius: 5px; }

/* ---------- Desteler: cerceveli kart kutulari, net tur bolumleri, komutan en ustte ---------- */
:is(#wsDeckCards, #wsDeckTokens) .ws-type { margin: 0 0 30px; }
:is(#wsDeckCards, #wsDeckTokens) .ws-type h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 0 10px; border-bottom: 2px solid var(--line); font: 800 18px/1.2 var(--display); letter-spacing: -.01em; color: var(--text); text-transform: none; }
:is(#wsDeckCards, #wsDeckTokens) .ws-type h4::after { display: none; }
:is(#wsDeckCards, #wsDeckTokens) .ws-type h4 small { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 700 12px/1 var(--body); }
:is(#wsDeckCards, #wsDeckTokens) .ws-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 18px; }
#wsDeckCards .ws-tile { padding: 8px 8px 10px; border: 1px solid var(--frame, #cfd3da); border-radius: 10px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
#wsDeckCards .ws-tile:hover { border-color: var(--line-strong); box-shadow: 0 10px 22px -16px var(--shadow); }
#wsDeckCards .ws-tile .ws-tile-art { box-shadow: none; }
#wsDeckCards .ws-list { gap: 10px; }
#wsDeckCards .ws-row { border-color: var(--frame, #cfd3da); }
#wsDeckCards .ws-commander { padding: 16px 16px 4px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
#wsDeckCards .ws-commander h4 { border-bottom-color: var(--accent); color: var(--accent); }
#wsDeckCards .ws-commander h4 small { background: var(--surface); color: var(--accent); }
#wsDeckCards .ws-commander > .muted { margin: 0 0 12px; }
#wsDeckCards .ws-commander-cards .ws-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); }
#wsDeckCards .ws-commander-cards .ws-tile b { font-size: 15px; }
.ws-deck-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-format-tag { background: var(--accent-soft); color: var(--accent); }
.ws-format-label { color: inherit; font-weight: 700; }
.ws-format-field select { width: auto; min-width: 150px; }
.ws-deck-actions { align-items: center; flex-wrap: wrap; }
.ws-new-form .form-row { align-items: end; }
.import-commanders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ws-commander-toggle { margin-top: 12px; }
.ws-commander-toggle .err:empty { display: none; }
@media (max-width: 480px) {
  :is(#wsDeckCards, #wsDeckTokens) .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  #wsDeckCards .ws-commander-cards .ws-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); justify-content: center; }
  #wsDeckCards .ws-commander { padding: 12px 12px 2px; }
  .ws-format-field, .ws-format-field select { width: 100%; }
}

/* ---------- Profil baglantilari: hesap formu ve herkese acik cipler ---------- */
:root { --fresh: #177a42; --on-fresh: #ffffff; --fresh-soft: #dcf1e4; }
:root[data-theme="dark"] { --fresh: #3ccb78; --on-fresh: #05210f; --fresh-soft: #16301f; }
.links-form { gap: 20px; }
.links-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.links-group legend { margin: 0 0 10px; padding: 0; font: 700 15px/1.3 var(--body); color: var(--text); }
.links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 600px) { .links-grid { grid-template-columns: 1fr; } }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.profile-links .profile-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px/1 var(--body); text-decoration: none; white-space: nowrap; box-shadow: none; cursor: pointer; }
.profile-links .profile-link:hover { border-color: var(--text); background: var(--surface-2); color: var(--text); }
.profile-links .profile-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.profile-link-site { color: var(--muted); }
.profile-link-value { min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.profile-link-mark { color: var(--muted); font-size: 12px; }
.profile-links .profile-link.copied { border-color: var(--accent); }
.profile-links .profile-link.copied .profile-link-mark { color: var(--accent); }
.profile-links-status { margin: 8px 0 0; font-size: 13px; color: var(--accent); }
.profile-links-status:empty { display: none; }
.showcase-owner { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; }
.showcase-owner .avatar { width: 40px; height: 40px; border-radius: 10px; }
.showcase-owner-main { display: grid; gap: 8px; min-width: 0; }
.showcase-owner-main > p { margin: 8px 0 0; }
.reputation { display: grid; gap: 10px; }
.reputation h3 { margin: 6px 0 0; font: 700 15px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); }
.reputation h3::after { display: none; }
.reputation article { display: grid; gap: 4px; padding: 10px 0 0; border-top: 1px solid var(--line); }
.reputation article p { margin: 0; }
.reputation article small { color: var(--muted); }
.reputation-summary { margin: 0; }
.reputation-summary b { font-size: 18px; }

/* ---------- "Yeni": takip edilen paylasimda son ziyaretten beri eklenen kartlar ---------- */
.new-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--fresh); color: var(--on-fresh); font: 800 11px/1 var(--body); letter-spacing: .02em; }
/* On the card it rides the top edge (right side; the foil badge has the left), never over the art. */
.new-pill-card { position: absolute; top: -9px; right: 10px; z-index: 3; box-shadow: 0 1px 3px rgb(0 0 0 / .25); pointer-events: none; }
.showcase-new-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--fresh) 45%, transparent); border-radius: 10px; background: var(--fresh-soft); color: var(--text); font-weight: 600; font-size: 14px; }

/* ---------- Tokenler: destenin yarattigi kartlar, deste sayisina dahil degil ---------- */
.ws-tokens-note { margin: -6px 0 14px; font-size: 13px; }
.ws-tokens-loading { display: flex; align-items: center; gap: 8px; margin: 0; }
.ws-token { display: grid; align-content: start; gap: 6px; margin: 0; min-width: 0; }
.ws-token figcaption { display: grid; gap: 2px; min-width: 0; }
.ws-token b { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.ws-made-by { color: var(--muted); font: 500 12px/1.35 var(--body); }
#wsDeckTokens .ws-token { padding: 8px 8px 10px; border: 1px dashed var(--frame, #cfd3da); border-radius: 10px; background: var(--surface); }
#wsDeckTokens .ws-token .ws-tile-art { box-shadow: none; }
.ws-public-grid + .ws-tokens { margin-top: 36px; }
.ws-tokens > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 0 10px; border-bottom: 2px solid var(--line); font: 800 20px/1.2 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--text); }
.ws-tokens > h3::after { display: none; }
.ws-tokens > h3 small { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 700 12px/1 var(--body); }
.ws-tokens .ws-public-card.ws-token > .tilt { max-width: 200px; }

/* ---------- Deste adi: yerinde yeniden adlandirma ---------- */
.ws-deck-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ws-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; }
.ws-rename input { flex: 1 1 220px; min-width: 0; font: 700 17px/1.2 var(--display); }

/* ---------- Kart duzenleme: tasi veya kaldir ---------- */
.ws-move { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.ws-move h3 { margin: 0 0 4px; }
.ws-move > .muted { margin: 0 0 12px; font-size: 13px; }

/* ---------- Kart sayfasindan koleksiyona / desteye ekle ---------- */
.add-card-item { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; }
.add-card-item > :is(.card-img, .card-text-art) { width: 54px; flex: none; border-radius: 4px; }
.add-card-item > div { display: grid; gap: 2px; min-width: 0; }
.add-card-item b { overflow-wrap: anywhere; }
.add-card-item small { color: var(--muted); }
.add-card-item > .card-text-art { gap: 2px; padding: 0 4px; border-width: 1px; font-size: 8px; }
.add-card-item > .card-text-art > :is(small, .card-text-print) { display: none; }
.add-card-item > .card-text-art > b { font-size: 8px; -webkit-line-clamp: 3; }
.add-card-item > .card-text-art > .card-text-band { margin: 0 -4px 2px; padding: 3px 4px; font-size: 6px; }
.add-card-options { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 12px; }
.add-card-options .stepper { min-height: 40px; }
@media (max-width: 600px) { .add-card-options { grid-template-columns: 1fr 1fr; } .add-card-options > .field:first-child { grid-column: 1 / -1; } }

/* ---------- Geri bildirim: tur, bolum, onem, gorsel, teknik bilgiler ---------- */
.option-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.option-chips legend { margin: 0 0 8px; padding: 0; font: 600 14px/1.3 var(--body); color: var(--text); letter-spacing: 0; }
.option-chips legend .optional { color: var(--muted); font-weight: 500; }
.option-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; letter-spacing: 0; text-transform: none; }
.option-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.option-chip span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px/1 var(--body); }
.option-chip:hover span { border-color: var(--text); }
.option-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.option-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.feedback-bug { display: grid; gap: 16px; }
.feedback-bug > .field-hint { margin-top: -8px; }
.feedback-dialog textarea#feedbackMessage { min-height: 120px; }
.feedback-dialog textarea:not(#feedbackMessage) { min-height: 0; }
.field-label { font: 600 14px/1.3 var(--body); color: var(--text); }
.feedback-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--bg); }
.feedback-drop.dragging { border-color: var(--accent); background: var(--accent-soft); }
.feedback-drop .field-hint { flex: 1 1 220px; }
.file-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.feedback-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.feedback-preview img { display: block; max-width: 160px; max-height: 120px; border-radius: 6px; object-fit: contain; background: var(--surface-2); }
.feedback-preview figcaption { display: grid; justify-items: start; gap: 6px; font-size: 13px; }
.feedback-contact { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.feedback-tech { display: grid; gap: 8px; }
.feedback-tech-list { display: grid; gap: 4px; margin: 0 0 0 28px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.feedback-tech-list div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.feedback-tech-list dt { color: var(--muted); }
.feedback-tech-list dd { margin: 0; overflow-wrap: anywhere; font-family: var(--mono); }
.dialog-done h2:focus { outline: none; }
.dialog-done .feedback-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text); }
.feedback-ref b { font-size: 20px; }
@media (max-width: 600px) { .feedback-tech-list { margin-left: 0; } }

/* ---------- Yonetim: geri bildirim alanlari ve ekran goruntusu ---------- */
.inbox-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.inbox-text { display: grid; gap: 10px; min-width: 0; }
.inbox-field b { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; }
.inbox-shot { display: block; width: 132px; height: 96px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.inbox-shot:hover { border-color: var(--line-strong); }
.inbox-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tag.severity-high, .tag.severity-blocker { background: var(--err-soft); color: var(--err); }
.tag.severity-low { color: var(--muted); }
.tag.area-tag { background: var(--member-soft); color: var(--member); }
.tag.contact-ok { background: var(--accent-soft); color: var(--accent); }
.inbox-shot-dialog { width: min(1100px, calc(100% - 24px)); }
.inbox-shot-dialog img { display: block; max-width: 100%; max-height: 74dvh; margin: 14px auto 10px; object-fit: contain; border-radius: 8px; }
.inbox-shot-dialog p { margin: 0; }
@media (max-width: 600px) { .inbox-body { grid-template-columns: 1fr; } }

/* ---------- Canli bildirimler: sayfa ici kucuk toast ---------- */
.live-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.live-toast { position: relative; pointer-events: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 10px 30px -10px var(--shadow), 0 2px 6px rgb(0 0 0 / .08); animation: live-toast-in .18s ease-out; }
.live-toast-link { display: flex; align-items: flex-start; gap: 12px; padding: 12px 44px 12px 14px; color: inherit; text-decoration: none; border-radius: inherit; }
.live-toast-link:hover { color: inherit; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.live-toast-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.live-toast .avatar { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
.live-toast-dot { flex: none; width: 10px; height: 10px; margin: 5px 4px 0; border-radius: 50%; background: var(--accent); }
.live-toast-text { display: grid; gap: 2px; min-width: 0; }
.live-toast-text b { font-size: 14px; overflow-wrap: anywhere; }
.live-toast-body { color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.live-toast-action { margin-top: 2px; color: var(--accent); font-size: 13px; font-weight: 700; }
.live-toasts .live-toast-close { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; box-shadow: none; }
.live-toasts .live-toast-close:hover { background: var(--surface-2); color: var(--text); }
@keyframes live-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-toast { animation: none; } }
@media (max-width: 720px) { .live-toasts { left: 16px; right: 16px; top: calc(var(--safe-t) + 66px); bottom: auto; width: auto; } }

/* ---------- Herkese acik profil (#user/…) ve etkinlikler (#event/…) ---------- */
.profile-name-link { color: inherit; font-weight: inherit; text-decoration: none; }
.profile-name-link:hover { color: var(--accent); text-decoration: underline; }
.profile-page { display: grid; gap: 18px; }
.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 18px 22px; margin: 12px 0 0; }
.profile-avatar { width: 72px; height: 72px; border-radius: 16px; font-size: 30px; }
.profile-id { display: grid; gap: 8px; min-width: 0; }
.profile-id h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--muted); font-size: 14px; }
.tag.profile-shop { background: var(--shop-soft); color: var(--shop); }
.tag.profile-member { background: var(--member-soft); color: var(--member); }
.profile-bio { margin: 0; max-width: 640px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-actions { display: grid; justify-items: end; gap: 6px; }
.profile-contact { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.profile-action-status { margin: 0; color: var(--err); font-size: 13px; }
.profile-action-status:empty { display: none; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.profile-stats > div { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); }
.profile-stats dt { color: var(--muted); font-size: 12px; }
.profile-stats dd { margin: 0; font: 800 20px/1.2 var(--display); }
.profile-stats dd small { color: var(--muted); font: 500 13px/1 var(--body); }
.profile-stats .link-button { font: inherit; text-decoration: none; }
.profile-shop-info { margin: 0; }
.profile-shop-info h2 { margin: 0 0 12px; font-size: 18px; }
.profile-shop-info dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin: 0; }
.profile-shop-info dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.profile-shop-info dd { margin: 0; overflow-wrap: anywhere; }
.profile-hours { white-space: pre-wrap; }
.profile-tabs { margin: 4px 0 0; }
.profile-tabs small { margin-left: 6px; color: var(--muted); font-weight: 600; }
.profile-pane { min-width: 0; }
.profile-filter { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin: 0 0 12px; }
.profile-filter .field { font-size: 13px; }
.profile-products .profile-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.profile-products .profile-price b { font: 800 16px/1.2 var(--mono); }
.profile-product-actions { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.profile-product-actions > * { max-width: 100%; }
.profile-products small { overflow-wrap: anywhere; }
.profile-more { justify-content: center; margin-top: 18px; }
.profile-showcases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.profile-showcase { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.profile-showcase:hover { border-color: var(--accent); color: var(--text); }
.profile-showcase-cover { display: grid; place-items: center; aspect-ratio: 63 / 88; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: 22px; overflow: hidden; }
.profile-showcase-cover > .card-img { width: 100%; height: 100%; object-fit: contain; }
.profile-showcase-cover > .card-text-art { width: 100%; height: 100%; gap: 2px; padding: 0 4px; border-width: 1px; font-size: 8px; }
.profile-showcase-cover > .card-text-art > :is(small, .card-text-print) { display: none; }
.profile-showcase-cover > .card-text-art > b { font-size: 8px; -webkit-line-clamp: 3; }
.profile-showcase-cover > .card-text-art > .card-text-band { margin: 0 -4px 2px; padding: 3px 4px; font-size: 6px; }
.profile-showcase-text { display: grid; gap: 4px; min-width: 0; }
.profile-showcase-text b { overflow-wrap: anywhere; }
.profile-showcase-text small { color: var(--muted); font-size: 12px; }
.profile-past { margin-top: 18px; }
.profile-past > summary { font-weight: 700; cursor: pointer; }
.profile-past[open] > summary { margin-bottom: 12px; }
.event-list { display: grid; gap: 10px; }
.event-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.event-card.is-past, .event-card.is-cancelled { opacity: .78; }
.event-date { display: grid; justify-items: center; align-content: center; gap: 2px; height: 58px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.event-date b { font: 800 22px/1 var(--display); }
.event-date span { font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.event-main { display: grid; gap: 3px; min-width: 0; }
.event-main h3 { display: block; margin: 0; font: 700 16px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.event-main h3::after { display: none; }
.event-main h3 a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.event-main h3 a:hover { color: var(--accent); text-decoration: underline; }
.event-meta { margin: 0; color: var(--muted); font-size: 13px; }
.event-status { margin: 0; font-size: 13px; }
.event-status:empty { display: none; }
.event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; }
.event-facts dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.event-facts dd { margin: 0; font-weight: 600; }
.event-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.event-page .page-head .event-actions { justify-content: flex-start; }
.event-fee { display: flex; gap: 8px; }
.event-fee input { flex: 1 1 auto; min-width: 0; }
.event-fee select { flex: 0 0 auto; width: auto; }
.shop-fields .form-row { margin-bottom: 14px; }
.shop-fields > .field + .field { margin-top: 14px; }
@media (max-width: 720px) {
  .profile-head { grid-template-columns: auto minmax(0, 1fr); }
  .profile-actions { grid-column: 1 / -1; justify-items: start; }
  .profile-avatar { width: 56px; height: 56px; font-size: 24px; border-radius: 14px; }
  .profile-filter { grid-template-columns: 1fr 1fr; }
  .profile-filter .field:first-child { grid-column: 1 / -1; }
  .profile-filter > button { grid-column: 1 / -1; }
  .event-card { grid-template-columns: 50px minmax(0, 1fr); }
  .event-card .event-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .event-date { height: 50px; }
}
.event-dialog textarea, #pBio, #pHours { font-family: var(--body); font-size: 15px; }
.event-page .page-head .event-actions :is(button, .btn).small { min-height: var(--btn-h); padding: 0 18px; font-size: 14px; }

/* ---------- Wizards Play Network: metin rozeti, hesap alani, yonetim listesi ---------- */
.profile-wpn { display: grid; gap: 4px; margin: 0; }
.profile-wpn p { margin: 0; }
.profile-wpn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.wpn-badge { display: inline-block; max-width: 100%; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--shop) 45%, var(--line)); border-radius: 14px; background: var(--shop-soft); color: var(--text); font: 700 13px/1.35 var(--body); overflow-wrap: anywhere; }
.wpn-badge > span[aria-hidden] { margin-right: 2px; color: var(--shop); font-weight: 800; }
.profile-wpn:is(.is-pending, .is-rejected) .wpn-badge { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
.profile-wpn.is-rejected .wpn-badge { color: var(--err); }
.wpn-locator { font-weight: 600; }
.wpn-disclaimer { color: var(--muted); font-size: 12px; line-height: 1.45; }
.wpn-state { display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.wpn-state p { margin: 0; }
.wpn-state .button-row { margin: 2px 0 0; }
.wpn-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; }
.wpn-state-text { font-size: 14px; }
.wpn-state-empty { margin: 12px 0 0; font-size: 14px; }
.wpn-note { padding: 8px 10px; border-left: 3px solid var(--err); background: var(--surface); font-size: 14px; overflow-wrap: anywhere; }
.tag.wpn-status-pending { background: color-mix(in srgb, var(--wheat) 16%, transparent); color: var(--wheat); }
.tag.wpn-status-verified { background: var(--shop-soft); color: var(--shop); }
.tag.wpn-status-rejected { background: var(--err-soft); color: var(--err); }
.tag.kind-wpn { background: var(--shop-soft); color: var(--shop); }
.wpn-howto { display: grid; gap: 6px; }
.wpn-howto p { margin: 0; }
.wpn-howto ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; color: var(--text); font-size: 14px; line-height: 1.5; }
.wpn-howto a { font-weight: 600; }
#wpnForm { max-width: 640px; }
.inbox-lead { margin: -6px 0 14px; max-width: 720px; font-size: 14px; }
.wpn-item p { margin: 0; }
.wpn-facts dd { font-family: var(--body); font-size: 13px; }
.wpn-facts dd.mono { font-family: var(--mono); }
.wpn-check { font-size: 13px; }
.wpn-reject { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--err) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--err-soft) 40%, var(--surface)); }
.wpn-reject[hidden] { display: none; }
.wpn-reject textarea { font-family: var(--body); font-size: 15px; }

/* ---------- Haftalik etkinlikler, sablonlar, takvim ---------- */
.tag.event-weekly { background: var(--member-soft); color: var(--member); vertical-align: middle; }
.event-meta .tag.event-weekly { margin-left: 4px; }
.event-repeat { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.event-repeat-body { display: grid; gap: 8px; padding-left: 28px; }
.event-repeat-body[hidden] { display: none; }
.event-weeks { max-width: 260px; }
.event-weeks-input { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.event-weeks-input input { width: 88px; }
.event-repeat-preview { margin: 0; color: var(--text); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.event-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-series-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.event-cancel-dialog p { margin: 0; }
.event-calendar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.event-calendar h2 { margin: 0 0 2px; font: 700 15px/1.3 var(--body); letter-spacing: 0; }
.event-calendar-text p { margin: 0; font-size: 13px; }
.event-calendar .button-row { justify-content: flex-end; }
.event-calendar > .field-hint, .event-calendar-status { grid-column: 1 / -1; }
.event-calendar-status { margin: 0; color: var(--accent); font-size: 13px; overflow-wrap: anywhere; }
.event-calendar-status:empty { display: none; }
.event-calendar-status .mono { color: var(--text); font-size: 12px; }
@media (max-width: 720px) {
  .event-calendar { grid-template-columns: 1fr; }
  .event-calendar .button-row { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .event-scope { grid-template-columns: 1fr; }
  .event-repeat-body { padding-left: 0; }
}

/* Shop directory (#shops) and the clickable shop count on Discover. */
a.stat { color: inherit; text-decoration: none; }
a.stat:hover b { color: var(--accent); }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-top: 8px; }
.shop-card { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); min-width: 0; }
.shop-card-head { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.shop-card-head .avatar { flex: none; }
.shop-card-id { display: grid; gap: 2px; min-width: 0; }
.shop-card-id b { font-size: 17px; overflow-wrap: anywhere; }
.shop-card-id small { color: var(--muted); }
.shop-card-head:hover b { color: var(--accent); }
.shop-card-stats, .shop-card-games { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 13px; color: var(--muted); }
.shop-card-games { gap: 6px; }
.shop-card-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.shop-card-preview > span { display: block; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.shop-card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-event, .shop-card-empty { margin: 0; font-size: 13px; }
.shop-card > .btn { justify-self: start; }