/* Kovan Pano · koyu kip — MOTION-KITI paleti: krem #f9f3e5 · ahşap #532d14 · bal #f9ab00 · altın #c59b2c · çam yeşili #2e7849 */
:root{
  --zemin:#1a0f08; --kart:#24150b; --kart2:#2d1a0e; --cizgi:#4a2c16;
  --yazi:#f9f3e5; --soluk:#c9b79c; --bal:#f9ab00; --altin:#c59b2c; --cam:#2e7849; --cam-acik:#5fbf84;
  --kirmizi:#ff8a73; --r:18px;
}
*{box-sizing:border-box}
html{background:var(--zemin)}
body{margin:0;background:var(--zemin);color:var(--yazi);
  font:15px/1.45 Mulish,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
h1{font-family:Oswald,"Arial Narrow",sans-serif;font-size:22px;margin:0;font-weight:600;letter-spacing:.04em}
.vurgu{background:linear-gradient(transparent 55%,rgba(249,171,0,.55) 55%);padding:0 2px}
.canli{display:flex;align-items:center;gap:6px;color:var(--soluk);font-size:13px;margin-left:auto}
.canli.kopuk .nokta{background:var(--kirmizi);animation:none}
.nokta{width:8px;height:8px;border-radius:50%;background:var(--cam-acik);animation:nabiz 2s infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(95,191,132,.6)}70%{box-shadow:0 0 0 8px rgba(95,191,132,0)}100%{box-shadow:0 0 0 0 rgba(95,191,132,0)}}
.izgara{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(130px,auto)}
.kart{background:linear-gradient(180deg,var(--kart2),var(--kart));border:1px solid var(--cizgi);border-radius:var(--r);padding:16px;min-width:0;overflow:hidden}
.kart h2{margin:0 0 8px;font-family:Oswald,"Arial Narrow",sans-serif;font-size:13px;font-weight:600;color:var(--altin);text-transform:uppercase;letter-spacing:.08em}
.sayi{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05}
.sayi small{font-size:18px;color:var(--soluk);font-weight:600}
.alt{color:var(--soluk);font-size:13px;margin-top:4px}
.alt b{color:var(--yazi);font-variant-numeric:tabular-nums}
.g2{grid-column:span 2}.r2{grid-row:span 2}
.liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.liste li{background:#1d1109;border:1px solid var(--cizgi);border-radius:12px;padding:10px;min-width:0}
.liste b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.liste span{color:var(--soluk);font-size:12px}
.mini{list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--soluk);display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.cubuk{height:8px;background:#1d1109;border-radius:99px;overflow:hidden;margin-top:10px}
.cubuk i{display:block;height:100%;width:0;background:var(--bal);border-radius:99px;transition:width 1.2s ease}
.satirlar{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;margin-top:8px;font-size:13px;align-items:center}
.satirlar .ms{height:6px;background:#1d1109;border-radius:99px;overflow:hidden}
.satirlar .ms i{display:block;height:100%;background:var(--cam-acik)}
.etiket{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#3a2414;color:var(--soluk);margin:6px 6px 0 0}
.etiket.bayat{background:#4a1d14;color:var(--kirmizi)}
.etiket.iyi::before{content:"● ";color:var(--cam-acik)}
.etiket.kotu::before{content:"● ";color:var(--kirmizi)}
.akis{list-style:none;margin:8px 0 0;padding:0;font-size:13px;display:flex;flex-direction:column;gap:6px}
.akis li{display:flex;gap:8px;min-width:0}
.akis time{color:var(--soluk);font-variant-numeric:tabular-nums;flex:none}
.akis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akis .sus{color:var(--soluk);text-decoration:line-through}
.kapi{max-width:440px;margin:12vh auto 0;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:24px}
.kapi h2{font-family:Oswald,"Arial Narrow",sans-serif;margin:0 0 8px;letter-spacing:.04em}
.soluk{color:var(--soluk)}
.durum{min-height:1.4em;color:var(--soluk)}
button{font:inherit;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.birincil{background:var(--bal);color:#2a1606;width:100%;margin-top:8px}
.ikincil{background:#3a2414;color:var(--yazi);padding:6px 12px}
button:focus-visible,a:focus-visible{outline:2px solid var(--bal);outline-offset:2px}
a{color:var(--bal)}
footer{font-size:12px;margin-top:16px}
[hidden]{display:none!important}
@media (max-width:900px){.izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.izgara{grid-template-columns:1fr}.g2{grid-column:span 1}.r2{grid-row:span 1}.sayi{font-size:34px}}
@media (prefers-reduced-motion:reduce){.nokta{animation:none}.cubuk i{transition:none}}