/* İndirim Takip — sade, mobil öncelikli stil. Açık/koyu tema: data-theme veya sistem tercihi. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef0f4; --text: #1b1f24; --muted: #5d6673;
  --border: #dde1e7; --accent: #0b6bcb; --accent-text: #ffffff;
  --good: #1a7f37; --good-bg: #dcf5e3; --warn: #9a6700; --warn-bg: #fff4d4;
  --bad: #c62828; --bad-bg: #fde4e4; --new: #8250df; --new-bg: #efe6ff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --radius: 12px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216; --surface: #171b21; --surface-2: #222831; --text: #e6e9ee; --muted: #9aa4b1;
    --border: #2c333d; --accent: #4c9eea; --accent-text: #0b0f14;
    --good: #56d364; --good-bg: #12301b; --warn: #e3b341; --warn-bg: #33290d;
    --bad: #ff7b72; --bad-bg: #3a1614; --new: #c297ff; --new-bg: #2a1d45;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1216; --surface: #171b21; --surface-2: #222831; --text: #e6e9ee; --muted: #9aa4b1;
  --border: #2c333d; --accent: #4c9eea; --accent-text: #0b0f14;
  --good: #56d364; --good-bg: #12301b; --warn: #e3b341; --warn-bg: #33290d;
  --bad: #ff7b72; --bad-bg: #3a1614; --new: #c297ff; --new-bg: #2a1d45;
  --shadow: none; color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
header.top {
  position: sticky; top: 0; z-index: 10; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.top-inner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 17px; color: var(--text); text-decoration: none; margin-right: auto; }
@media (max-width: 480px) { .top-inner { gap: 8px; } .brand { width: calc(100% - 52px); } nav.tabs { order: 3; width: 100%; } }
nav.tabs { display: flex; gap: 4px; }
nav.tabs a {
  text-decoration: none; color: var(--muted); padding: 6px 10px; border-radius: 8px; font-size: 14px;
}
nav.tabs a[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
button, select, input { font: inherit; color: inherit; }
.btn {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; line-height: 1.2;
}
.btn:hover { border-color: var(--muted); }
.btn.icon { padding: 6px 8px; }
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.meta { color: var(--muted); font-size: 13px; }
.filters {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
}
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.filters select, .filters input[type="search"] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; width: 100%;
}
.filters .full { grid-column: 1 / -1; }
.filters .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
@media (min-width: 720px) { .filters { grid-template-columns: repeat(4, 1fr); } }
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px; display: flex; gap: 12px; position: relative;
}
.card.seen { opacity: .62; }
.card.hl { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.card img.thumb {
  width: 76px; height: 76px; object-fit: contain; border-radius: 8px; background: #fff; flex: none;
}
.card .body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.card h3 { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-new { font-weight: 700; font-size: 18px; }
.price-old { color: var(--muted); text-decoration: line-through; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.badge.disc { background: var(--good-bg); color: var(--good); }
.badge.new { background: var(--new-bg); color: var(--new); }
.badge.sus { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.ok { background: var(--good-bg); color: var(--good); }
.actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.actions .btn { font-size: 13px; padding: 4px 8px; }
.empty { text-align: center; color: var(--muted); padding: 40px 12px; }
.banner {
  background: var(--warn-bg); color: var(--warn); border-radius: var(--radius); padding: 10px 12px;
  margin-bottom: 12px; font-size: 14px;
}
table.status { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
table.status th, table.status td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 14px; overflow-wrap: anywhere; }
table.status th { background: var(--surface-2); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 640px) {
  table.status, table.status tbody { display: block; }
  table.status thead { display: none; }
  table.status tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
  table.status td { display: block; border: 0; padding: 4px 10px; }
  table.status td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
}
.errors { margin: 4px 0 0; padding-left: 18px; color: var(--bad); font-size: 13px; }
.wl-item { flex-direction: column; }
.wl-head { display: flex; gap: 12px; }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font-size: 13px; }
.kv div span { color: var(--muted); display: block; font-size: 11px; }
.kv div b { font-size: 15px; }
svg.chart { width: 100%; height: 140px; display: block; }
svg.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
svg.chart .area { fill: var(--accent); opacity: .08; }
svg.chart .target { stroke: var(--good); stroke-dasharray: 4 4; stroke-width: 1.5; }
svg.chart .grid { stroke: var(--border); stroke-width: 1; }
svg.chart text { fill: var(--muted); font-size: 10px; }
svg.chart circle { fill: var(--accent); }
.note { font-size: 12px; color: var(--muted); }
footer { max-width: 1100px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: 12px; }