/* Uygulamayla aynı renkler: marka mavisi geçişi, sıcak sarı imleç */
:root{
  --ust:#5FB6FF;--alt:#2E72F4;--mavi:#2E72F4;--ipucu:#2B6CEC;--ipucu-sec:#0F3F9E;--ipucu-sec-y:#fff;
  --zemin:#E9F2FF;--kart:#fff;--hucre:#fff;--cizgi:#123A82;--yazi:#0D2146;--soluk:#56688A;
  --kelime:#CFE5FF;--imlec:#FFC93C;--dogru:#D5F5DF;--dogru-y:#0E6B37;--hatali:#FFD9D6;--hatali-y:#C0241B;--gizli:#E5484D;--tus:#fff;
  --serif:"New York","Iowan Old Style",Georgia,serif;
  --sans:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dar:"SF Pro Display","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --mavi:#4C93FF;--ipucu:#2B62CF;--ipucu-sec:#8FC1FF;--ipucu-sec-y:#0B1A36;
  --zemin:#0A1730;--kart:#13264A;--hucre:#182C52;--cizgi:#061022;--yazi:#EAF2FF;--soluk:#9DB2D6;
  --kelime:#274C8F;--dogru:#174A33;--dogru-y:#8BEBB0;--hatali:#5C2024;--hatali-y:#FFA8A1;--gizli:#FF7B7F;--tus:#1C3564;color-scheme:dark;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--zemin);color:var(--yazi);font-family:var(--sans);overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--imlec);outline-offset:2px}
a{color:inherit}
#uyg{height:100%;display:flex;flex-direction:column}

/* Menü */
.kahraman{background:linear-gradient(var(--ust),var(--alt));color:#fff;padding:calc(env(safe-area-inset-top) + 22px) max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left))}
.icerik{max-width:680px;margin:0 auto;width:100%}
.ust{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font:700 32px/1.1 var(--serif);margin:0}
.alt{font-size:14px;opacity:.9;font-weight:500}
.yuvarlak{width:42px;height:42px;border-radius:50%;background:#ffffff2e;color:#fff;font-size:18px;display:grid;place-items:center}
.gunluk{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:16px;text-align:left;background:var(--kart);color:var(--yazi);border-radius:18px}
.gunluk b{font:700 22px var(--serif);display:block}
.gunluk small{color:var(--soluk);font-size:13px;display:block;margin:3px 0}
.seri{font-size:13px;font-weight:700}
.hap{margin-left:auto;background:var(--mavi);color:#fff;font-weight:700;padding:0 18px;line-height:44px;border-radius:22px;white-space:nowrap}
.kaydirma{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.bolum{padding:18px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
h2{font:700 20px var(--serif);margin:0 0 10px}
.liste{background:var(--kart);border-radius:14px;overflow:hidden}
.satir{display:flex;align-items:center;width:100%;padding:14px;text-align:left;gap:10px}
.satir+.satir{border-top:1px solid color-mix(in srgb,var(--soluk) 22%,transparent)}
.satir b{font-size:18px;display:block}
.satir small{color:var(--soluk);font-size:13px}
.satir span{margin-left:auto;color:var(--mavi);font-weight:700;font-variant-numeric:tabular-nums}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tema{background:var(--kart);border-radius:14px;padding:13px;text-align:left}
.tema b{display:block;font-size:16px}.tema small{display:block;color:var(--soluk);font-size:12px;margin:3px 0}
.tema span{color:var(--mavi);font-weight:700;font-size:13px}
.kutular{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px;padding:16px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
.kutu{height:62px;background:var(--kart);border-radius:11px;font-weight:700;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-variant-numeric:tabular-nums}
.kutu.kilit{color:var(--soluk)}.kutu.kilit small{color:var(--soluk)}
.kutu.bitti{background:var(--mavi);color:#fff}
.kutu small{font-size:10px;font-weight:700;color:var(--mavi)}.kutu.bitti small{color:#FFE27A;letter-spacing:1px}
.hesap{padding:14px;background:var(--kart);border-radius:14px}
.hesap p{margin:0 0 12px;color:var(--soluk);font-size:14px;line-height:1.4}
.giris{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:100%;max-width:400px;margin:0 auto}
#gbtn{display:flex;justify-content:center;min-height:48px}
.gbtn{height:44px;border-radius:7px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid color-mix(in srgb,var(--soluk) 50%,transparent)}
.gbtn.apple{background:var(--yazi);color:var(--zemin);border:0}
.notu{font-size:13px;color:var(--soluk);text-align:center;padding:18px 16px 30px}
.notu a{color:var(--mavi)}

/* Oyun */
.oust{display:flex;align-items:center;gap:8px;background:linear-gradient(var(--ust),var(--alt));color:#fff;padding:calc(env(safe-area-inset-top) + 4px) 6px 4px}
.oust .geri,.oust .mn{width:42px;height:42px;font-size:20px;font-weight:700}
.oust b{font-size:15px;display:block}.oust small{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}
.oust .mn{margin-left:auto}
.gizlis{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:5px;font-size:12px;color:var(--soluk);font-weight:600}
.gizlis div{display:flex;gap:3px}
.gizlis i{font-style:normal;width:20px;height:22px;border-radius:4px;background:var(--hucre);color:var(--yazi);font-weight:700;font-size:13px;display:grid;place-items:center;position:relative}
.gizlis i:after{content:"";position:absolute;inset:1px;border:1px solid var(--gizli);border-radius:50%}
.govde{flex:1;min-height:0;display:flex;flex-direction:column}
.sol{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.alan{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 6px}
.izgara{display:grid;gap:1px;padding:1px;background:var(--cizgi);border-radius:3px}
.h{position:relative;background:var(--hucre);display:grid;place-items:center;font-weight:700;overflow:hidden;width:100%;height:100%;user-select:none}
.h.kel{background:var(--kelime)}.h.dgr{background:var(--dogru);color:var(--dogru-y)}
.h.hat{background:var(--hatali);color:var(--hatali-y)}.h.iml{background:var(--imlec);color:#0D2146}
.h.giz:before{content:"";position:absolute;inset:6%;border:1px solid var(--gizli);border-radius:50%;opacity:.8}
.ok{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--mavi);stroke:var(--mavi)}
.ip{background:var(--ipucu);display:flex;flex-direction:column;height:100%;min-width:0}
.ip button{flex:1;min-height:0;color:#fff;font-family:var(--dar);font-weight:600;line-height:1.02;padding:0 1.5px;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;font-stretch:condensed}
.ip button+button{border-top:.5px solid #ffffff8c}
.ip button.sec{background:var(--ipucu-sec);color:var(--ipucu-sec-y)}
.ip button.tam{color:#ffffff9e}
.cubuk{display:flex;align-items:center;background:var(--mavi);color:#fff;min-height:58px}
.cubuk .yon{width:34px;height:58px;font-weight:700}
.metin{flex:1;text-align:center;min-width:0;padding:3px 0}
.metin b{display:block;font-size:17px;line-height:1.15}.metin small{font-size:11px;opacity:.85}
.yard{width:46px;height:46px;margin-right:6px;border-radius:11px;background:#ffffff33;font-size:11px;font-weight:700;line-height:1.2}
.klavye{padding:7px 4px calc(env(safe-area-inset-bottom) + 6px);display:flex;flex-direction:column;gap:6px;background:var(--zemin);max-width:760px;width:100%;margin:0 auto;touch-action:manipulation}
.ks{display:flex;gap:4px;justify-content:center}
.t{flex:1 1 0;min-width:0;height:50px;background:var(--tus);border-radius:7px;font-size:22px;font-weight:600;box-shadow:0 1px 0 color-mix(in srgb,var(--cizgi) 25%,transparent)}
.t:active{opacity:.55}.t.sil{flex:1.7 1 0;background:var(--mavi);color:#fff}
@media (min-height:900px) and (min-width:700px){.t{height:58px}}
.bitis{padding:14px 16px calc(env(safe-area-inset-bottom) + 14px)}
.bigb{display:block;width:100%;height:52px;line-height:52px;border-radius:13px;font-weight:700;font-size:17px;text-align:center;background:var(--kart);color:var(--mavi);text-decoration:none}
.bigb.dolu{background:var(--mavi);color:#fff}

/* Yatay ekran: ızgara solda bütün yüksekliği kullanır, ipucu ve klavye sağda büyür */
@media (min-aspect-ratio:5/4) and (min-width:760px){
  .govde{flex-direction:row}
  .alan{padding:6px 10px 12px}
  #alt{width:clamp(360px,38vw,640px);flex:none;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:12px 16px 12px 4px}
  .cubuk{border-radius:16px;min-height:120px;padding:10px 4px}
  .cubuk .yon{height:90px;width:44px;font-size:26px}
  .metin b{font-size:clamp(24px,2.3vw,34px)}.metin small{font-size:15px}
  .yard{width:58px;height:62px;font-size:14px}
  .klavye{padding:0;max-width:none;gap:8px}.ks{gap:6px}
  .t{height:clamp(52px,8.5vh,72px);font-size:clamp(22px,2vw,28px)}
  .gizlis{font-size:16px;gap:12px;padding-top:10px}
  .gizlis div{gap:5px}.gizlis i{width:30px;height:32px;font-size:18px}
  .oust b{font-size:18px}.oust small{font-size:14px}
  .bitis{padding:0}
}

/* Pencere */
.perde{position:fixed;inset:0;background:#0a173099;display:flex;align-items:flex-end;justify-content:center;z-index:9}
.pencere{background:var(--zemin);width:100%;max-width:560px;max-height:90%;overflow:auto;border-radius:18px 18px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:10px}
@media (min-width:600px){.perde{align-items:center}.pencere{border-radius:18px}}
.pencere h3{font:700 28px var(--serif);margin:0;text-align:center}
.bilgi{display:flex;justify-content:center;gap:28px;font-size:12px;color:var(--soluk);text-align:center;font-weight:500}
.bilgi b{display:block;font-size:20px;color:var(--yazi);font-variant-numeric:tabular-nums}
.gkart{background:linear-gradient(var(--ust),var(--alt));color:#fff;border-radius:16px;padding:16px;text-align:center}
.gkart b{display:block;font:700 30px var(--serif);letter-spacing:3px}
.yild{text-align:center;font-size:36px;color:#F5A524;letter-spacing:4px}
.kl{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:2px 0}.kl b{color:var(--mavi)}.kl span{color:var(--soluk);text-align:right}
.bild{position:fixed;top:calc(env(safe-area-inset-top) + 56px);left:50%;transform:translateX(-50%);background:var(--yazi);color:var(--zemin);padding:10px 16px;border-radius:20px;font-size:15px;font-weight:600;z-index:10;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
@keyframes titre{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.tit{animation:titre .12s 3}
@media (prefers-reduced-motion:reduce){.tit{animation:none}}