/* Oyunlaştırma — yalnız tema token'ları; temalar ezebilir (tema CSS'i bundan sonra yüklenir). Sınıflar .epin-oy-… ve ortak çizim .oy-… */
.epin-oy-ozet{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 12px}
.epin-oy-ozet__kutu{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--renk-yuzey);border:1px solid var(--renk-kenar);border-radius:var(--kose-kart,12px)}
.epin-oy-buyuk{font-size:1.8rem;line-height:1.1}
.epin-oy-rozet{align-self:flex-start;display:inline-block;padding:2px 10px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--renk-ana-metin);background:var(--oy-rozet,var(--renk-ana))}
.epin-oy-ilerleme{display:block;height:8px;border-radius:999px;background:var(--renk-yuzey-2);overflow:hidden}
.epin-oy-ilerleme>span{display:block;height:100%;background:var(--renk-ana);border-radius:inherit}
.epin-oy-katalog{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.epin-oy-kart{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--renk-yuzey);border:1px solid var(--renk-kenar);border-radius:var(--kose-kart,12px)}
.epin-oy-kart form{margin-top:auto}
.epin-oy-fiyat{font-weight:700;color:var(--renk-ana)}
.epin-oy-liste{padding-left:20px;margin:0 0 16px}
.epin-oy-liste li{margin:0 0 4px}
.epin-oy-giris{color:var(--renk-basari)}
.epin-oy-cikis{color:var(--renk-hata)}
.epin-oy-haklar{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 14px}
.epin-oy-haklar div{display:flex;flex-direction:column}
.epin-oy-haklar dt{font-size:.85rem;color:var(--renk-metin-soluk)}
.epin-oy-haklar dd{margin:0;font-weight:700;font-size:1.2rem}
.epin-oy-cark-sayfa{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){.epin-oy-cark-sayfa{grid-template-columns:1fr}}
.epin-oy-cark-sag form{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.epin-oy-durum{min-height:1.4em;margin:0 0 8px;color:var(--renk-metin-soluk)}
.epin-oy-sonuc{padding:14px 16px;margin:0 0 14px;border-radius:var(--kose-kart,12px);background:var(--renk-yuzey);border:1px solid var(--renk-kenar);border-left:4px solid var(--renk-ana)}
.epin-oy-sonuc strong{display:block;font-size:1.15rem}
.epin-oy-sonuclar{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:10px}
.epin-oy-sonuclar li{display:grid;gap:4px}
.epin-oy-secenek{display:flex;gap:10px;align-items:center;min-height:44px}
.epin-oy-denetim{margin:16px 0;padding:12px 16px;background:var(--renk-yuzey);border:1px solid var(--renk-kenar);border-radius:var(--kose-kart,12px)}
.epin-oy-denetim code{word-break:break-all}

/* Ortak çark çizimi (oyunlastirma.partials.cark-cizim) */
.oy-cark{position:relative;width:100%;max-width:420px;margin:0 auto}
.oy-cark__svg{display:block;width:100%;height:auto;overflow:visible}
.oy-cark__dis{fill:var(--renk-yuzey-2);stroke:var(--renk-kenar);stroke-width:2}
.oy-cark__teker{transform-box:fill-box;transform-origin:center;transition:transform 5s cubic-bezier(.12,.8,.18,1)}
.oy-cark__dilim{stroke:var(--renk-yuzey);stroke-width:1.5}
.oy-d0{fill:var(--renk-ana)}
.oy-d1{fill:color-mix(in srgb,var(--renk-ana) 55%,var(--renk-yuzey))}
.oy-d2{fill:color-mix(in srgb,var(--renk-vurgu,var(--renk-ana)) 70%,var(--renk-metin))}
.oy-cark__dilim--bos{fill:var(--renk-yuzey-2)}
.oy-cark__yazi{font:700 8.5px/1 var(--font-govde,system-ui,sans-serif);fill:var(--renk-ana-metin,#fff);pointer-events:none}
.oy-cark__dilim--bos+.oy-cark__yazi{fill:var(--renk-metin)}
.oy-cark__gobek{fill:var(--renk-yuzey);stroke:var(--renk-kenar);stroke-width:2}
.oy-cark__ibre{fill:var(--renk-metin);stroke:var(--renk-yuzey);stroke-width:1.5}
.oy-sandik{position:relative;width:200px;height:170px;margin:20px auto}
.oy-sandik__govde{position:absolute;left:0;right:0;bottom:0;height:110px;border-radius:10px;background:color-mix(in srgb,var(--renk-ana) 70%,var(--renk-metin));border:3px solid var(--renk-metin)}
.oy-sandik__kapak{position:absolute;left:-6px;right:-6px;top:20px;height:50px;border-radius:14px 14px 4px 4px;background:var(--renk-ana);border:3px solid var(--renk-metin);transform-origin:0 100%;transition:transform .6s ease;z-index:1}
.oy-sandik--acik .oy-sandik__kapak{transform:rotate(-28deg) translateY(-18px)}
.oy-sandik--salla{animation:oy-salla .3s ease-in-out 4}
@keyframes oy-salla{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.oy-cark__teker,.oy-sandik__kapak{transition:none}.oy-sandik--salla{animation:none}}