/* Kaç Lira? ortak taban: BRIEF-FAZ-A tokenları, .dugme, .kart, .cip, logo, hap, saat. Sahibi B3 (değişiklik: herkese not).
   Ekran CSS'leri yalnız kendi kök sınıfı altında yazılır (.e-tur ..., .e-lobi ...). */
:root {
  --zemin: #EE6A3F; --zemin-koyu: #D85A31;
  --krem: #FFF7EC; --krem-2: #F5E8D6; --krem-3: #E9D8C0;
  --murekkep: #22182E; --murekkep-2: #5B4E66; --murekkep-3: #8E8295;
  --gunes: #FFCF3F; --gunes-koyu: #A9761A; --yesil: #23A867; --kirmizi: #E5484D;
  --font: 'Bricolage Grotesque', system-ui, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); --yay: cubic-bezier(.34, 1.45, .64, 1);
  --yer: cubic-bezier(.65, 0, .25, 1);
  --r-kart: 26px; --r-dugme: 22px;
  --golge: 0 6px 0 var(--zemin-koyu);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--zemin); color: var(--murekkep); font: 500 17px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 3px; }
[hidden] { display: none !important; }
#ekran { position: fixed; inset: 0; }
.ekran-kok { position: absolute; inset: 0; }
/* Kayan sayfalar (ana sayfa, profil, VIP, metin sayfaları): ekran kökü kendi içinde kayar */
.ekran-kok.kayar { overflow-x: hidden; overflow-y: auto; }
#katman-gecis { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#katman-durust { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#katman-tost { position: fixed; left: 50%; top: 24px; z-index: 70; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
#katman-pencere { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#katman-gecis > *, #katman-durust > *, #katman-pencere > * { pointer-events: auto; }

/* Yüzeyler */
.kart { background: var(--krem); border-radius: var(--r-kart); box-shadow: var(--golge); }
.cip { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--murekkep); color: var(--krem); display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; white-space: nowrap; }
.cip.acik { background: var(--krem-2); color: var(--murekkep-2); }
.hap { height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(34, 24, 46, .16); color: var(--krem); display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 17px; white-space: nowrap; }

/* Düğmeler: basınca aşağı iner, gölge kısalır */
.dugme { height: 68px; padding: 0 26px; border: 0; border-radius: var(--r-dugme); font: 800 22px var(--font); letter-spacing: -.01em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); white-space: nowrap; }
.dugme.ana { background: var(--murekkep); color: var(--krem); box-shadow: 0 6px 0 #0F0A16; }
.dugme.ana:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 1px 0 #0F0A16; }
.dugme.ikinci { background: var(--krem); color: var(--murekkep); box-shadow: 0 6px 0 var(--zemin-koyu); font-size: 19px; }
.dugme.ikinci:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 1px 0 var(--zemin-koyu); }
.dugme.ikinci[aria-pressed="true"] { background: var(--gunes); }
.dugme.kucuk { height: 52px; font-size: 17px; border-radius: 16px; padding: 0 20px; }
.dugme[disabled] { background: rgba(255, 247, 236, .3); color: var(--krem); box-shadow: none; cursor: default; }
.dugme svg { width: 20px; height: 20px; }
.baglanti { border: 0; background: none; padding: 0; font: 700 15px var(--font); color: var(--murekkep-3); text-decoration: underline; text-underline-offset: 3px; }

/* Logo: beyaz yazı + elle çizilmiş ok (logo-beyaz.html 6. örnek) */
.logo-ok { position: relative; display: inline-block; color: #fff; font: 800 33px/1 var(--font); letter-spacing: -.03em; padding-bottom: 4px; white-space: nowrap; text-decoration: none; }
.logo-ok svg { position: absolute; left: -4px; bottom: -13px; width: 176px; height: 18px; overflow: visible; }
.logo-ok path { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: ok-ciz .9s .2s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes ok-ciz { to { stroke-dashoffset: 0; } }

/* Ekran iskeleti: üst şerit + gövde */
.ekran-ic { position: absolute; inset: 0; display: grid; grid-template-rows: 88px minmax(0, 1fr); }
.ust { display: flex; align-items: center; gap: 16px; padding: 0 44px; min-width: 0; }
.ust .bosluk { flex: 1; }

/* Saat halkası */
.saat { position: relative; width: 60px; height: 60px; flex: none; }
.saat svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.saat .iz { fill: none; stroke: rgba(34, 24, 46, .18); stroke-width: 6; }
.saat .kalan { fill: none; stroke: var(--krem); stroke-width: 6; stroke-linecap: round; }
.saat span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--krem); font: 800 22px var(--font); font-variant-numeric: tabular-nums; }

/* Avatar animasyonları (masada nefes) */
.avatar-svg .a-govde { transform-origin: 60px 120px; animation: nefes 3.4s ease-in-out infinite; }
.avatar-svg .a-bas { transform-origin: 60px 84px; animation: bas 3.4s ease-in-out infinite; }
.avatar-svg .a-goz { transform-box: fill-box; transform-origin: center; animation: kirp 5.2s infinite; }
.durgun .avatar-svg .a-govde, .durgun .avatar-svg .a-bas, .durgun .avatar-svg .a-goz, .avatar-svg.durgun .a-govde, .avatar-svg.durgun .a-bas, .avatar-svg.durgun .a-goz { animation: none; }
@keyframes nefes { 50% { transform: scaleY(1.025); } }
@keyframes bas { 50% { transform: translateY(-1.2px) rotate(.6deg); } }
@keyframes kirp { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}