/* Erciyes — biçem. Renkler mürekkep takımından gelir (JS --kagit/--ana/--nokta yazar). */
:root { --kagit: #F3F0E8; --ana: #1F2F8C; --nokta: #F2553C; --dar: 'Archivo', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--kagit); color: var(--ana); -webkit-font-smoothing: antialiased; }
body { font: 400 15px/1.5 var(--dar); touch-action: none; }
#sahne, #sahne canvas { position: fixed; inset: 0; display: block; }
body:not(.hazir) #sahne { opacity: 0; }
#sahne { transition: opacity .6s; }
.gizli { display: none !important; }
button { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--kagit); color: var(--ana); border: 1.5px solid var(--ana); padding: 12px 14px; cursor: pointer; border-radius: 0; }
button:hover { background: color-mix(in srgb, var(--ana) 8%, var(--kagit)); }
button.birincil { background: var(--ana); color: var(--kagit); }
button:focus-visible { outline: 2px solid var(--nokta); outline-offset: 2px; }
.et { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.et.soluk { opacity: .7; }
.et.vurgu { color: var(--nokta); filter: saturate(1.2); margin-top: 6px; min-height: 1.3em; }

/* ---------- gösterge ---------- */
.hud { position: fixed; inset: 0; pointer-events: none; padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; }
.sat { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sat.alt { align-items: flex-end; }
.sag { text-align: right; }
.say { font-family: var(--dar); font-stretch: 62%; font-weight: 800; font-size: 64px; line-height: .86; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.harfler { display: flex; gap: 4px; }
.harfler i { font: normal 900 15px/1 var(--dar); font-stretch: 100%; width: 28px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--ana); background: var(--kagit); }
.harfler i.yanik { background: var(--ana); color: var(--kagit); }
.harfler.ters i { background: var(--nokta); border-color: var(--nokta); color: var(--kagit); }
.cubuk { width: min(32vw, 300px); height: 9px; border: 1.5px solid var(--ana); margin: 6px 0 0 auto; position: relative; background: var(--kagit); }
.cubuk i { position: absolute; inset: 0 auto 0 0; background: var(--nokta); width: 30%; transition: width .2s; }
.cubuk.dolu { outline: 2px solid var(--nokta); outline-offset: 2px; }
body[data-ekran="oyun"] .hud .et, body[data-ekran="oyun"] .say { text-shadow: 0 0 6px var(--kagit), 0 0 2px var(--kagit); }
/* ters baskı: koyu kâğıt, açık yazı */
body.ters .hud, body.ters .afis { color: var(--kagit); }
body.ters[data-ekran="oyun"] .hud .et, body.ters[data-ekran="oyun"] .say, body.ters .afis b { text-shadow: 0 0 6px var(--ana), 0 0 2px var(--ana); }
body.ters .afis span { background: var(--kagit); color: var(--ana); }
body.ters .cubuk { border-color: var(--kagit); background: var(--ana); }

/* ---------- akrobasi afişi ---------- */
.afis { position: fixed; left: 50%; top: 27%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .2s; width: min(92vw, 1100px); }
.afis.acik { opacity: 1; }
.afis b { display: block; font-family: var(--dar); font-stretch: 125%; font-weight: 900; font-size: clamp(30px, 5.6vw, 86px); line-height: .86; letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 0 10px var(--kagit); }
.afis.buyuk b { font-size: clamp(44px, 9vw, 140px); color: var(--nokta); }
.afis.kucuk b { font-size: clamp(18px, 2.4vw, 30px); }
.afis span { display: inline-block; margin-top: 10px; font: 600 13px var(--mono); letter-spacing: .16em; background: var(--ana); color: var(--kagit); padding: 5px 9px; }

/* ---------- ekranlar ---------- */
.ekran { position: fixed; inset: 0; }
.baslik-ekran .panel { position: absolute; inset: 0 auto 0 0; width: min(600px, 48vw); background: var(--kagit); border-right: 1.5px solid var(--ana); padding: 40px 40px 28px; overflow: auto; display: flex; flex-direction: column; gap: 22px; }
.baslik-ekran h1 { margin: 0; font-family: var(--dar); font-stretch: 125%; font-weight: 900; font-size: min(100px, calc((min(600px, 48vw) - 80px) / 5.5)); line-height: .78; letter-spacing: -.03em; }
.giris { margin: 0; font-size: 17px; line-height: 1.45; max-width: 42ch; }
.tuslar { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; padding: 16px 0; border-top: 1.5px solid var(--ana); border-bottom: 1.5px solid var(--ana); font-size: 14px; }
.tuslar dt { font: 600 12px/1.6 var(--mono); letter-spacing: .06em; }
.tuslar dd { margin: 0; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.dugmeler.dikey { flex-direction: column; }
.duraklat-ekran { background: color-mix(in srgb, var(--kagit) 55%, transparent); display: grid; place-items: center; }
.panel.dar { background: var(--kagit); border: 1.5px solid var(--ana); padding: 28px; width: min(360px, 90vw); }
.panel.dar h2 { margin: 0 0 18px; font-family: var(--dar); font-stretch: 125%; font-weight: 900; font-size: 34px; line-height: .9; text-transform: uppercase; }

.notlar { background: var(--kagit); overflow: auto; z-index: 10; }
.notlar-ic { max-width: 1240px; margin: 0 auto; padding: 36px 24px 64px; }
.nbas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid var(--ana); padding-bottom: 14px; flex-wrap: wrap; }
.nbas h2 { margin: 0; font: 900 clamp(46px, 8.5vw, 116px)/.8 var(--dar); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }
.nizgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 40px; }
.nizgara article { padding: 22px 0; border-bottom: 1.5px solid var(--ana); }
.nizgara h3 { margin: 0 0 12px; font: 900 26px/1 var(--dar); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; }
.nizgara h3 span { font: 500 12px var(--mono); color: var(--nokta); vertical-align: top; margin-right: 6px; }
.nizgara p, .nizgara li { font-size: 15px; line-height: 1.5; }
.nizgara ul { padding-left: 18px; margin: 0; }
.nizgara pre { font: 11px/1.6 var(--mono); white-space: pre-wrap; background: color-mix(in srgb, var(--ana) 6%, var(--kagit)); padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; border-left: 3px solid var(--nokta); }
.nizgara table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.nizgara td { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--ana) 25%, transparent); }
.nizgara td + td { font-family: var(--mono); font-size: 12px; text-align: right; }

body.temiz .hud, body.temiz .afis, body.temiz .dokunmatik { display: none !important; }

/* ---------- dokunmatik ---------- */
.dokunmatik { display: none; }
@media (pointer: coarse) {
  body[data-ekran="oyun"] .dokunmatik { display: block; position: fixed; inset: 0; pointer-events: none; }
  .surukle { position: absolute; left: 0; top: 30%; bottom: 0; width: 50%; pointer-events: auto; display: grid; place-items: end start; padding: 0 0 110px 20px; }
  .surukle span { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
  .dugmeler-d { position: absolute; right: 14px; bottom: max(70px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 48px); gap: 6px; pointer-events: auto; }
  .dugmeler-d button { height: 48px; padding: 0; font-size: 14px; background: color-mix(in srgb, var(--kagit) 85%, transparent); }
  .dugmeler-d button.genis { grid-column: span 2; }
  .dugmeler-d button.birincil { background: var(--ana); color: var(--kagit); }
  .dugmeler-d button.basili { background: var(--nokta); color: var(--kagit); border-color: var(--nokta); }
  .dugmeler-d .kose { position: fixed; top: max(96px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .baslik-ekran h1 { font-size: calc((100vw - 36px) / 5.5); }
  .hud #alt2 { display: none; }
  .hud .et { font-size: 10px; }
  .baslik-ekran .panel { width: 100%; border-right: 0; background: color-mix(in srgb, var(--kagit) 92%, transparent); padding: 24px 18px; gap: 16px; }
  .say { font-size: 46px; }
  .harfler i { width: 22px; height: 24px; font-size: 12px; }
  .tuslar { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { #sahne, .afis, .cubuk i { transition: none; } }