:root{
  --paper:#EFE7D6;
  --paper-card:#F7F1E4;
  --ink:#15121C;
  --ink-soft:#4a4555;
  --pink:#FF2E7E;
  --blue:#1E3FE6;
  --yellow:#FFD23F;
  --line:#15121c1a;
  --shadow:#15121C;
  --topbar-bg:rgba(239,231,214,0.86);
  --kur-tint:#FFF6D6;
  --badge-ink:#15121C;
  --on-accent:#fff;
  --placeholder:#15121c80;
  --hover-tint:#15121c0d;
  --radius:14px;
}

/* ---------- dark mode: sistem tercihi (override edilmemişse) ---------- */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1A1620;
    --paper-card:#241F2C;
    --ink:#EDE6D6;
    --ink-soft:#A89FB8;
    --pink:#FF6FA0;
    --blue:#6C8CFF;
    --yellow:#E8B93D;
    --line:rgba(237,230,214,0.07);
    --shadow:#08060B;
    --topbar-bg:rgba(26,22,32,0.86);
    --kur-tint:#332A18;
    --placeholder:rgba(237,230,214,0.45);
    --hover-tint:rgba(237,230,214,0.08);
  }
  :root:not([data-theme="light"]) .icon-sun{display:none}
  :root:not([data-theme="light"]) .icon-moon{display:block}
}

/* ---------- dark mode: manuel seçim (sistem tercihini ezer) ---------- */
:root[data-theme="dark"]{
  --paper:#1A1620;
  --paper-card:#241F2C;
  --ink:#EDE6D6;
  --ink-soft:#A89FB8;
  --pink:#FF6FA0;
  --blue:#6C8CFF;
  --yellow:#E8B93D;
  --line:rgba(237,230,214,0.07);
  --shadow:#08060B;
  --topbar-bg:rgba(26,22,32,0.86);
  --kur-tint:#332A18;
  --placeholder:rgba(237,230,214,0.45);
  --hover-tint:rgba(237,230,214,0.08);
}
:root[data-theme="dark"] .icon-sun{display:none}
:root[data-theme="dark"] .icon-moon{display:block}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
  /* riso halftone grain */
  background-image:radial-gradient(var(--line) 0.5px, transparent 0.6px);
  background-size:7px 7px;
  min-height:100vh;
  min-height:100dvh;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--topbar-bg);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ink);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.brand b{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.5px;line-height:1}
.brand span{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:1px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;
  background:var(--paper-card);color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.theme-toggle:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
.theme-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}
.theme-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-moon{display:none}
.coffee{
  font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;text-decoration:none;
  color:var(--badge-ink);background:var(--yellow);
  border:2px solid var(--badge-ink);border-radius:999px;
  padding:7px 14px;box-shadow:2px 2px 0 var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.coffee:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
.coffee:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}

/* ---------- hero ---------- */
.hero{padding:54px 0 26px;position:relative}
.demo-tag{
  display:inline-block;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--blue);
  border:1.5px dashed var(--blue);border-radius:6px;padding:4px 9px;margin-bottom:18px;
}
.hero h1{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(46px,9vw,108px);line-height:.92;letter-spacing:-.5px;
  text-transform:uppercase;position:relative;display:inline-block;
}
/* riso misregistration ghosts */
.hero h1::before,.hero h1::after{
  content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;
  mix-blend-mode:multiply;pointer-events:none;
}
.hero h1::before{color:var(--pink);transform:translate(4px,3px)}
.hero h1::after{color:var(--blue);transform:translate(-4px,-2px)}
@media(max-width:600px){
  .hero h1::before{transform:translate(1.5px,1px)}
  .hero h1::after{transform:translate(-1.5px,-1px)}
}
.hero p{
  margin-top:18px;max-width:560px;font-size:17px;color:var(--ink-soft);
}
.hero p b{color:var(--ink);font-weight:600}

/* ---------- controls ---------- */
.controls{
  margin-top:30px;background:var(--paper-card);
  border:2px solid var(--ink);border-radius:var(--radius);
  box-shadow:5px 5px 0 var(--shadow);
  padding:16px;
}
.search-row{display:flex;gap:10px;flex-wrap:wrap}
.search{
  flex:1;min-width:200px;display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:9px;padding:0 12px;
}
.search svg{flex:none}
.search input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);padding:11px 0;
}
.search input::placeholder{color:var(--placeholder)}
.nbhood{
  border:1.5px solid var(--ink);border-radius:9px;background:var(--paper);
  font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);padding:0 12px;cursor:pointer;outline:none;
}
.nbhood:focus-visible,.search input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.chips .label{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-right:2px}
.chip{
  font-family:'Space Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);
  padding:7px 13px;cursor:pointer;transition:all .12s ease;white-space:nowrap;
}
.chip:hover{background:var(--hover-tint)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip.free[aria-pressed="true"]{background:var(--pink);color:var(--on-accent);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.divider{width:1.5px;height:22px;background:var(--line);margin:0 4px}

/* ---------- meta count ---------- */
.resultbar{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 16px;flex-wrap:wrap;gap:8px}
.resultbar .count{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px}
.resultbar .count b{color:var(--ink);font-size:15px}
.legend{display:flex;gap:14px;font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle;border:1px solid var(--ink)}
.legend .auto i{background:var(--paper-card)}
.legend .kur i{background:var(--yellow)}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:60px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:11px;
  box-shadow:4px 4px 0 var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease;
  position:relative;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.card.kur{box-shadow:4px 4px 0 var(--shadow);border-color:var(--ink);background:linear-gradient(180deg,var(--kur-tint) 0%,var(--paper-card) 60%)}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cat{
  font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--blue);
}
.stamp{
  font-family:'Space Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  background:var(--yellow);color:var(--badge-ink);border:1.5px solid var(--badge-ink);border-radius:5px;
  padding:3px 7px;transform:rotate(-3deg);white-space:nowrap;flex:none;
}
.card h3{font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.2px}
.card .desc{font-size:14px;color:var(--ink-soft);line-height:1.45;flex:1}
.meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink)}
.meta span{display:flex;align-items:center;gap:4px}
.price-free{color:var(--pink);font-weight:700}
.card .when{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.3px}
.go{
  margin-top:2px;align-self:flex-start;text-decoration:none;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--pink);padding-bottom:1px;
}
.go:hover{color:var(--pink)}

/* ---------- empty ---------- */
.empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  border:2px dashed var(--ink);border-radius:var(--radius);color:var(--ink-soft);
}
.empty b{display:block;font-family:'Anton',sans-serif;font-size:28px;color:var(--ink);text-transform:uppercase;margin-bottom:8px;letter-spacing:.5px}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);background:var(--paper-card)}
footer .wrap{padding:26px 20px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer p{font-size:13px;color:var(--ink-soft);max-width:560px;line-height:1.5}
footer p b{color:var(--ink)}

/* card entrance */
@media (prefers-reduced-motion:no-preference){
  .card{animation:pop .4s cubic-bezier(.2,.7,.3,1) backwards}
}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}