html{font-family:"Segoe UI",Arial,sans-serif;color:#222;background:#fff}body{margin:0}#error-screen{margin:10px;max-width:1100px}h1{font-size:28px;font-weight:400;margin:0 0 24px}h2{font-size:20px;font-weight:400;margin:24px 0 10px}li{line-height:1.7;font-size:14px}p{font-size:14px;line-height:1.6}.fake-link{color:#0078d4}.secret-start{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:0}#preview-form{max-width:360px;margin-top:28px}#preview-form label{display:block;margin-bottom:8px}#preview-form input:not(.secret-start){padding:10px;border:1px solid #aaa;border-radius:3px;box-sizing:border-box;width:100%;font:inherit}button{font:inherit;border:1px solid #999;background:#f4f4f4;padding:9px 18px;margin-top:10px;cursor:pointer}button:disabled{opacity:.5}#entry-status{min-height:22px;color:#8b2424}[hidden]{display:none!important}#space-screen{position:fixed;inset:0;background:#02050d;color:#e8faff;overflow:hidden}#space-canvas{position:absolute;inset:0}#space-canvas canvas{display:block;width:100%;height:100%}.space-caption{position:absolute;bottom:5vh;left:20px;right:20px;text-align:center;pointer-events:none}.space-caption p:first-child{font-size:10px;letter-spacing:.4em;color:#87c7c8}#skyra-letters{font-size:clamp(30px,6vw,62px);letter-spacing:.42em;margin:12px 0;color:#dcfff6;text-shadow:0 0 22px #53ffc4,0 0 55px #8472ed;min-height:1.3em}#space-status{color:#7e9caf;font-size:12px}.space-caption button{pointer-events:auto;background:#122333;color:white;border-color:#6be3ce}.space-fallback{position:absolute;inset:0;display:grid;place-items:center}.space-fallback .planet{width:min(46vw,290px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,transparent 20%,#000c 80%),url('/images/cosmic/earth-equirect.jpg') center/cover;box-shadow:0 0 35px #3cabe666}.space-fallback .planet:after{content:"";display:block;margin:-15% 0 0 70%;width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ddd,#777 55%,#111)}@media(max-width:600px){#error-screen{margin:28px 20px}h1{font-size:23px;line-height:1.4}h2{font-size:18px}.space-caption{bottom:8vh}}
/* Line-art lettering and reduced-motion fallback. */
#skyra-letters{letter-spacing:0;display:flex;justify-content:center;gap:.38em;font-weight:300}
.skyra-letter{position:relative;display:inline-block;animation:letter-emerge 1.35s linear both}.skyra-letter:after{content:"";position:absolute;top:12%;left:55%;width:.6em;height:.8em;background:#fff;clip-path:polygon(50% 0,57% 42%,100% 50%,57% 58%,50% 100%,43% 58%,0 50%,43% 42%);filter:drop-shadow(0 0 7px #a4ffe4);animation:letter-star 1.35s linear both;pointer-events:none}
@keyframes letter-emerge{0%{opacity:0;transform:translateY(26px) scale(.18);filter:blur(7px);text-shadow:0 0 8px #80ffdc}25%{opacity:.65;transform:translateY(11px) scale(.74);filter:blur(3px)}50%{opacity:1;transform:translateY(3px) scale(1.02);filter:blur(.5px);text-shadow:0 0 18px #fff,0 0 38px #80ffdc,0 0 65px #bba6ff}75%{transform:translateY(.4px) scale(1.07);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);text-shadow:0 0 12px #80ffdc55}}
@keyframes letter-star{0%,100%{opacity:0;transform:translateX(-.5em) scale(.1) rotate(-20deg)}25%{opacity:.5;transform:translateX(-.2em) scale(.6) rotate(-10deg)}50%{opacity:1;transform:translateX(0) scale(1) rotate(0)}75%{opacity:.5;transform:translateX(.1em) scale(.6) rotate(10deg)}100%{transform:translateX(.15em) scale(.1) rotate(20deg)}}
.space-fallback .planet{border:1px solid #87e9e0;background:repeating-linear-gradient(0deg,transparent 0 29px,#87e9e055 30px 31px);box-shadow:none;position:relative}
.space-fallback .planet:before{content:'';position:absolute;inset:0 25%;border:1px solid #87e9e088;border-radius:50%}
.space-fallback .planet:after{border:1px solid #d9e7f5;background:#02050d;box-shadow:none}
@media(prefers-reduced-motion:reduce){.skyra-letter{animation:none}.skyra-letter:after{display:none}}

#entry-dialog{position:fixed;inset:0;margin:auto;width:min(360px,calc(100vw - 64px));padding:28px;border:1px solid #ccd4dc;border-radius:12px;background:#fff;color:#222;box-shadow:0 20px 80px #0004}
#entry-dialog::backdrop{background:#080e1a66;backdrop-filter:blur(5px)}
#entry-dialog h2{margin:0 0 20px}#entry-dialog #preview-form{margin:0}#entry-dialog button{width:100%;border-radius:5px}
#space-screen:not(.static-fallback) #skyra-letters{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skyra-letter:after{display:none}

/* ── Doğrulama modalı: kozmik tasarım (20.09) ─────────────────────────────
   Arka plan sayfası bilerek sahte bir IIS hata ekranı; doğru kelime yazılınca açılan bu modal
   ilk 'gerçek' Skyra anı oluyor. Marka adı bilinçli olarak YOK — sürpriz sahneye saklanıyor.
   Yapı ve id'ler değişmedi (private-preview.js aynı elemanları kullanıyor). */
#entry-dialog{
    width:min(420px,calc(100vw - 40px));padding:0;border:0;border-radius:20px;background:transparent;color:#dff3ff;
    box-shadow:0 30px 90px #000a,0 0 0 1px #6be3ce33;overflow:hidden;
}
#entry-dialog::backdrop{background:radial-gradient(circle at 50% 40%,#0b1b3aee,#01030acc 70%);backdrop-filter:blur(6px)}
/* kart gövdesi: derin uzay + yıldız serpintisi + üstte aurora */
#entry-dialog #preview-form{
    position:relative;margin:0;padding:26px 26px 24px;max-width:none;
    background:
        radial-gradient(1.4px 1.4px at 18% 22%,#ffffffcc,transparent 60%),
        radial-gradient(1.2px 1.2px at 72% 16%,#cfe9ffaa,transparent 60%),
        radial-gradient(1.6px 1.6px at 34% 72%,#ffffff99,transparent 60%),
        radial-gradient(1.1px 1.1px at 86% 62%,#bfe6ff99,transparent 60%),
        radial-gradient(1.3px 1.3px at 56% 44%,#ffffff77,transparent 60%),
        radial-gradient(120% 90% at 50% -10%,#1b2f66 0%,#0a1330 45%,#050a1c 100%);
}
/* ince yörünge halkası — kartın sağ üstünde, dekoratif */
#entry-dialog #preview-form::before{
    content:'';position:absolute;top:-96px;right:-86px;width:210px;height:210px;border-radius:50%;z-index:0;
    border:1px solid #6be3ce2e;box-shadow:0 0 60px #6be3ce14 inset;pointer-events:none;
}
/* üstte akan aurora çizgisi */
#entry-dialog #preview-form::after{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
    background:linear-gradient(90deg,transparent,#6be3ce,#8472ed,transparent);
    background-size:220% 100%;animation:pv-aurora 5.5s linear infinite;
}
@keyframes pv-aurora{from{background-position:120% 0}to{background-position:-120% 0}}
#entry-dialog h2{
    margin:0;padding:22px 26px 0;font:600 15px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:.34em;text-transform:uppercase;
    color:#eafdff;text-shadow:0 0 18px #6be3ce66;
    background:linear-gradient(180deg,#0a1330,#0a1330);position:relative;z-index:1;
}
/* başlığın altındaki küçük yıldız çizgisi */
#entry-dialog h2::after{content:'';display:block;width:34px;height:1px;margin-top:12px;background:linear-gradient(90deg,#6be3ce,transparent)}
#entry-dialog label{display:block;margin-bottom:9px;color:#8fb6cf;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
#entry-dialog input:not(.secret-start){
    width:100%;box-sizing:border-box;padding:13px 14px;border-radius:11px;
    border:1px solid #2b4a6b;background:#050c1fd9;color:#eafdff;font:inherit;letter-spacing:.22em;text-align:center;
    transition:border-color .2s,box-shadow .2s,background .2s;
}
#entry-dialog input:not(.secret-start)::placeholder{color:#43607a;letter-spacing:.1em}
#entry-dialog input:not(.secret-start):focus{outline:none;border-color:#6be3ce;background:#071433;box-shadow:0 0 0 3px #6be3ce26,0 0 28px #6be3ce2e}
#entry-dialog button{
    width:100%;margin-top:14px;padding:12px 18px;border-radius:11px;cursor:pointer;
    border:1px solid #6be3ce66;color:#03121a;font:600 14px/1 'Segoe UI',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
    background:linear-gradient(135deg,#7ef0d4,#6bb8ff 55%,#9d8bff);box-shadow:0 10px 26px #6be3ce2b;
    transition:transform .15s,box-shadow .2s,filter .2s;
}
#entry-dialog button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 32px #6be3ce3d;filter:brightness(1.06)}
#entry-dialog button:active:not(:disabled){transform:translateY(0)}
#entry-dialog button:focus-visible{outline:2px solid #eafdff;outline-offset:2px}
#entry-dialog button:disabled{opacity:.45;cursor:default}
#entry-dialog #entry-status{margin:14px 0 0;min-height:20px;color:#ff9aa6;font-size:13px;letter-spacing:.04em;text-align:center}
@media(prefers-reduced-motion:reduce){#entry-dialog #preview-form::after{animation:none}#entry-dialog button{transition:none}}
@media(max-width:480px){#entry-dialog h2{font-size:13px;padding:18px 20px 0}#entry-dialog #preview-form{padding:20px}}

/* içerik halkanın üstünde kalsın */
#entry-dialog #preview-form > *{position:relative;z-index:1}
/* Başlık zaten aynı kelimeyi yazıyor → etiket yalnız ekran okuyucuda kalsın */
#entry-dialog label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#entry-dialog #preview-form input:not(.secret-start){margin-top:2px;caret-color:#6be3ce}

/* ── Kaos modu (20.09): modalın arkasında three.js tüneli (preview-chaos.js) ────────────
   Kart artık kozmik bir vitrin değil, bozulan bir ekran: sahne canlı, üstünde tarama çizgileri,
   başlıkta kanal kayması. Metin okunurluğu için yalnız girdi/uyarı alanlarının arkasına koyu perde. */
#entry-dialog{background:#04070f;border:1px solid #6be3ce2e;box-shadow:0 30px 90px #000c,0 0 0 1px #ff3b5c14}
#entry-dialog::backdrop{background:radial-gradient(circle at 50% 45%,#0a0f22e6,#01020699 70%);backdrop-filter:blur(7px) saturate(.6)}
#entry-chaos{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* tarama çizgileri + köşe karartma: CRT hissi */
#entry-dialog::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px),radial-gradient(130% 100% at 50% 50%,#0000 55%,#00000073 100%);
    animation:pv-flicker 3.7s steps(2) infinite;
}
@keyframes pv-flicker{0%,93%,100%{opacity:.7}94%{opacity:.25}96%{opacity:.9}98%{opacity:.45}}
#entry-dialog h2{position:relative;z-index:3;background:transparent;color:#f2fbff;animation:pv-shift 4.3s steps(1) infinite}
@keyframes pv-shift{0%,88%,100%{text-shadow:0 0 18px #6be3ce55}90%{text-shadow:-2px 0 #ff3b5ccc,2px 0 #6be3cecc}92%{text-shadow:2px 0 #ff3b5ccc,-2px 0 #6be3cecc}94%{text-shadow:0 0 18px #6be3ce55}}
#entry-dialog #preview-form{position:relative;z-index:3;background:transparent}
#entry-dialog #preview-form::before,#entry-dialog #preview-form::after{content:none}
#entry-dialog input:not(.secret-start){background:#02060fd9;border-color:#ff3b5c3d;backdrop-filter:blur(2px)}
#entry-dialog input:not(.secret-start):focus{border-color:#6be3ce;background:#02060ff2;box-shadow:0 0 0 3px #6be3ce26,0 0 30px #6be3ce33}
#entry-dialog button{background:linear-gradient(135deg,#7ef0d4,#6bb8ff 55%,#9d8bff);border-color:#ffffff26}
#entry-dialog #entry-status{color:#ff8b9b;text-shadow:0 0 14px #ff3b5c5c}
@media(prefers-reduced-motion:reduce){#entry-dialog::after,#entry-dialog h2{animation:none}}

/* ── Doğrulama modalı — SADE (20.09, ikinci tur) ─────────────────────────────
   Önceki kaotik CRT vazgeçildi. Kart neredeyse boş: küçük bir etiket, aralıklı tek bir girdi ve
   altında sinyal çizgisi (preview-chaos.js). Ne parlama ne tarama çizgisi — bütün ifade çizgide. */
#entry-dialog{width:min(380px,calc(100vw - 40px));padding:0;border:1px solid #6be3ce24;border-radius:16px;
    background:#060910;color:#dfeaf5;box-shadow:0 24px 70px #000000b3;overflow:hidden}
#entry-dialog::backdrop{background:#01030acc;backdrop-filter:blur(4px)}
#entry-dialog::after{content:none}                       /* CRT katmanı kaldırıldı */
#entry-dialog h2{margin:0;padding:24px 26px 0;background:none;animation:none;
    font:500 11px/1 var(--pv-mono,ui-monospace,'Cascadia Mono',Consolas,monospace);letter-spacing:.36em;text-transform:uppercase;
    color:#6f8599;text-shadow:none}
#entry-dialog h2::after{content:none}
#entry-dialog #preview-form{padding:20px 26px 24px;background:none}
#entry-dialog #preview-form::before,#entry-dialog #preview-form::after{content:none}
#entry-dialog label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
/* Girdi: kutu yok — alt çizgisi sinyal şeridinin kendisi */
#entry-dialog input:not(.secret-start){width:100%;box-sizing:border-box;padding:6px 0 4px;border:0;border-radius:0;
    background:none;color:#f2fbff;text-align:center;caret-color:#6be3ce;backdrop-filter:none;
    font:400 19px/1.4 var(--pv-mono,ui-monospace,'Cascadia Mono',Consolas,monospace);letter-spacing:.42em;text-indent:.42em}
#entry-dialog input:not(.secret-start):focus{outline:none;border:0;background:none;box-shadow:none}
#entry-chaos{display:block;width:100%;height:34px;margin:2px 0 18px}
#entry-chaos{height:52px;margin:0 0 16px}   /* nabız hattı: diken için daha yüksek şerit */
/* Düğme: dolgu yok, yalnız ince çerçeve */
#entry-dialog button{width:100%;margin:0;padding:11px 16px;border:1px solid #ffffff1f;border-radius:10px;
    background:none;color:#cfe3f2;box-shadow:none;transition:border-color .2s,color .2s;
    font:500 11px/1 var(--pv-mono,ui-monospace,'Cascadia Mono',Consolas,monospace);letter-spacing:.28em;text-transform:uppercase}
#entry-dialog button:hover:not(:disabled){border-color:#6be3ce80;color:#f2fbff;transform:none;filter:none}
#entry-dialog button:focus-visible{outline:1px solid #6be3ce;outline-offset:3px}
#entry-dialog #entry-status{margin:14px 0 0;min-height:15px;text-align:center;color:#ff8b9b;text-shadow:none;
    font:400 11px/1.4 var(--pv-mono,ui-monospace,'Cascadia Mono',Consolas,monospace);letter-spacing:.1em}

/* ── BEYAZ KART + SAHNE GEÇİŞLERİ (20.09, üçüncü tur) ───────────────────────
   İlk kelime: sayfanın harfleri yağmur gibi düşer (private-preview.js → rainAway), sonra beyaz kart
   aşağıdan yükselip ortaya oturur. İkinci kelimede kart yukarı uçar, yenisi yine aşağıdan gelir. */
.pv-ch{display:inline-block;will-change:transform,opacity}
#entry-dialog{background:#fff;color:#131920;border:0;border-radius:18px;box-shadow:0 26px 90px #000000a6}
#entry-dialog::backdrop{background:#01030ab8;backdrop-filter:blur(3px)}
#entry-dialog h2{color:#8d97a3}
#entry-dialog input:not(.secret-start){color:#10161e;caret-color:#0f766e}
#entry-dialog button{border-color:#00000024;color:#131920}
#entry-dialog button:hover:not(:disabled){border-color:#0f766e;color:#0b1016}
#entry-dialog button:focus-visible{outline:1px solid #0f766e}
#entry-dialog #entry-status{color:#c23a4b}
/* Aşağıdan yüksel · yukarı uç */
@keyframes pv-rise{from{transform:translateY(64vh) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes pv-leave{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-64vh) scale(.96);opacity:0}}
@keyframes pv-fade{from{opacity:0}to{opacity:1}}
#entry-dialog[open]{animation:pv-rise .72s cubic-bezier(.16,.84,.26,1) both}
#entry-dialog[open]::backdrop{animation:pv-fade .55s ease both}
#entry-dialog.is-in{animation:pv-rise .72s cubic-bezier(.16,.84,.26,1) both}
#entry-dialog.is-up{animation:pv-leave .46s cubic-bezier(.5,0,.75,0) both}
@media(prefers-reduced-motion:reduce){#entry-dialog[open],#entry-dialog.is-in,#entry-dialog.is-up{animation:none}}

/* Düğme artık zorunlu değil: yazmayı bırakınca kelime kendiliğinden denenir (private-preview.js).
   Bu yüzden silik durur — odaklanınca ya da üstüne gelince görünür olur. */
#entry-dialog button{opacity:.38;transition:opacity .25s,border-color .2s,color .2s}
#entry-dialog button:hover:not(:disabled),#entry-dialog button:focus-visible{opacity:1}