/* =====================================================
   كىرىش بېتى — نېئون چۆرگىلىمە رامكا
   ===================================================== */

@font-face {
    font-family: 'ALKATIP';
    src: url('AlpsoftKey.ttf') format('truetype'),
         url('ALKATIP.TTF') format('truetype');
    font-display: swap;
}

:root {
    --neon-1: #35eaff;      /* كۆك */
    --neon-2: #ff0a6c;      /* قىزغۇچ */

    --ink:    #0b0d13;      /* بەت ئارقىسى */
    --frame:  #23262e;      /* رامكا رەڭگى */
    --inner:  #16181f;      /* ئىچكى قارا */
    --field:  #1c1f27;
    --line:   #2b2f3a;
    --txt:    #eef1f8;
    --dim:    #868da0;

    --ok:   #22c55e;
    --bad:  #ff3b5c;
    --warn: #ffb020;

    --pad:  13px;           /* رامكا قېلىنلىقى */
    --r:    22px;
    --ease: cubic-bezier(.2, .9, .25, 1);

    /* ئەسكەرتىش كۆزنىكى ئۈچۈن (notice.css) */
    --surface:   #16181f;
    --surface-2: #1c1f27;
    --text:      #eef1f8;
    --text-soft: #b9c0d0;
    --muted:     #868da0;
    --brand:     #35eaff;
    --overlay:   rgba(4, 7, 18, .74);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: 'ALKATIP', 'UKIJ Tuz Tom', Tahoma, 'Segoe UI', sans-serif;
    background: var(--ink);
    color: var(--txt);
    direction: rtl;
    display: grid;
    place-items: center;
    padding: 30px 20px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--neon-1); color: #00131a; }

/* ---------------- ئارقا كۆرۈنۈش ---------------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg::before {
    content: '';
    position: absolute;
    inset: -25%;
    background-image:
        linear-gradient(rgba(53,234,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53,234,255,.05) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 48%, #000 12%, transparent 70%);
            mask-image: radial-gradient(ellipse 58% 52% at 50% 48%, #000 12%, transparent 70%);
}

.bg span { position: absolute; border-radius: 50%; filter: blur(100px); }
.bg span:nth-child(1) { width: 460px; height: 460px; background: var(--neon-1); top: -160px; right: -130px; opacity: .13; }
.bg span:nth-child(2) { width: 400px; height: 400px; background: var(--neon-2); bottom: -150px; left: -110px; opacity: .12; }

/* ---------------- سەھنە ---------------- */
.stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* =====================================================
   نېئون رامكا
   ===================================================== */
.box {
    position: relative;
    width: 300px;
    padding: var(--pad);
    border-radius: var(--r);
    background: transparent;
    overflow: hidden;              /* نېئوننى رامكا ئىچىدە كېسىدۇ */
    isolation: isolate;
    cursor: pointer;

    /* تاشقى نۇر */
    box-shadow:
        0 0 34px -6px rgba(53,234,255,.34),
        0 0 34px -6px rgba(255,10,108,.28),
        0 30px 70px rgba(0,0,0,.72);

    transition:
        width .5s var(--ease),
        padding .4s var(--ease),
        border-radius .4s var(--ease),
        box-shadow .5s ease;
}

/* ——— چۆرگىلەيدىغان 4 بۆلەكلىك conic-gradient ———
   (رامكا ئارقىسىدا, .inner ئۇنى ئوتتۇرىدىن قاپلايدۇ) */
.box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 780px;
    height: 780px;
    margin: -390px 0 0 -390px;
    background: conic-gradient(
        from 0deg,
        transparent   0deg   36deg,
        var(--neon-1) 36deg   48deg,
        transparent   48deg  126deg,
        var(--neon-2) 126deg 138deg,
        transparent   138deg 216deg,
        var(--neon-1) 216deg 228deg,
        transparent   228deg 306deg,
        var(--neon-2) 306deg 318deg,
        transparent   318deg 360deg
    );
    filter: blur(1px) drop-shadow(0 0 12px var(--neon-1));
    animation: neon-rotate 5s linear infinite;
    z-index: 0;
}

/* رامكا رەڭگى — نېئوننى پەقەت 3px گىرۋەكتە قالدۇرىدۇ */
.box::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: calc(var(--r) - 3px);
    background: var(--frame);
    z-index: 1;
}

@keyframes neon-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* رامكا ئىچىدىكى مەزمۇن ھەممىدىن ئۈستىدە */
.box > .inner { position: relative; z-index: 2; }

/* ---------------- ئىچكى رايون ---------------- */
.inner {
    position: relative;
    border-radius: calc(var(--r) - var(--pad) + 3px);
    background:
        radial-gradient(130% 150% at 50% 0%, #22262f 0%, var(--inner) 58%, #101218 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 22px rgba(0,0,0,.55);
    overflow: hidden;
    transition: border-radius .4s var(--ease);
}

/* =====================================================
   يىغىلغان ھالەت — LOGIN كۇنۇپكىسى
   ===================================================== */
.pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    height: 52px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 6px;
    transition: opacity .28s ease, height .5s var(--ease);
}

.pill i.p-ico {
    width: 19px; height: 19px;
    background-color: var(--neon-2);
    filter: drop-shadow(0 0 7px var(--neon-2));
}

.pill i.p-lock {
    width: 16px; height: 16px;
    background-color: var(--neon-1);
    filter: drop-shadow(0 0 7px var(--neon-1));
}

.pill .p-txt {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: linear-gradient(92deg, var(--neon-1), #ffffff 48%, var(--neon-2));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 26px rgba(53,234,255,.32);
}

/* =====================================================
   يېيىلغان مەزمۇن
   ===================================================== */
.panel {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 20px;
    text-align: right;
    cursor: default;
    transition:
        height .5s var(--ease),
        opacity .3s ease,
        padding .4s var(--ease);
}

/* ——— ئېچىلىش ——— */
.box.open,
.box.locked {
    width: 396px;
    cursor: default;
}

.box.open .pill,
.box.locked .pill {
    height: 0;
    opacity: 0;
}

.box.open .panel,
.box.locked .panel {
    height: auto;
    opacity: 1;
    padding: 24px 20px 20px;
    overflow: visible;
}

/* چاشقىنەك تەگسە (كومپيۇتېر) */
@media (hover: hover) and (pointer: fine) {
    .box:not(.locked):hover { width: 396px; }
    .box:not(.locked):hover .pill  { height: 0; opacity: 0; }
    .box:not(.locked):hover .panel { height: auto; opacity: 1; padding: 24px 20px 20px; overflow: visible; }
}

/* ---------------- پانېل باشچىسى ---------------- */
.p-head { text-align: center; margin-bottom: 20px; }

.p-logo {
    width: 52px; height: 52px;
    margin: 0 auto 12px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, rgba(53,234,255,.16), rgba(255,10,108,.14));
    border: 1px solid rgba(53,234,255,.3);
    box-shadow: inset 0 0 20px rgba(53,234,255,.14), 0 0 18px rgba(53,234,255,.12);
}

.p-logo i {
    width: 25px; height: 25px;
    background-color: var(--neon-1);
    filter: drop-shadow(0 0 7px var(--neon-1));
}

.p-head h1 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }

.tag-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--dim);
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
}

.tag-line i { width: 10px; height: 10px; background-color: var(--ok); }

/* ---------------- گىرامكا ---------------- */
.f { margin-bottom: 13px; }

.f label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--dim);
    margin-bottom: 6px;
}

.f label i { width: 12px; height: 12px; background-color: var(--neon-1); opacity: .85; }

.i-wrap { position: relative; }

.inp {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    color: var(--txt);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    text-align: right;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.inp::placeholder { color: #5a6274; }

.inp:focus {
    border-color: var(--neon-1);
    background: #202531;
    box-shadow: 0 0 0 3px rgba(53,234,255,.12);
}

.inp.bad { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255,59,92,.12); }

.i-wrap .inp { padding-left: 40px; }

.eye {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    border-radius: 8px;
    cursor: pointer;
}

.eye i { width: 15px; height: 15px; background-color: var(--dim); transition: background-color .2s; }
.eye:hover i { background-color: var(--neon-1); }

.hint { display: block; font-size: 10.5px; color: #545c6e; margin-top: 5px; }

/* ---------------- دەلىللەش كودى ---------------- */
.cap { display: flex; gap: 8px; align-items: stretch; }

.cap .inp {
    flex: 1;
    min-width: 0;
    text-align: center;
    letter-spacing: 6px;
    font-size: 17px;
    font-weight: 700;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.cap-pic {
    position: relative;
    width: 126px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #eef1f8;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s;
}

.cap-pic:hover { border-color: var(--neon-1); }
.cap-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }

.cap-pic > span {
    position: absolute;
    bottom: 3px; left: 4px;
    width: 16px; height: 16px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: rgba(11,13,19,.82);
}

.cap-pic > span i { width: 9px; height: 9px; background-color: var(--neon-1); }

/* ---------------- كىرىش كۇنۇپكىسى ---------------- */
.go {
    width: 100%;
    margin-top: 5px;
    padding: 12px 18px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #04121a;
    background: linear-gradient(100deg, var(--neon-1), #86f2ff 52%, var(--neon-1));
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 7px 22px rgba(53,234,255,.3);
    transition: transform .18s, box-shadow .25s;
}

.go:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(53,234,255,.44); }
.go:active { transform: translateY(0); }
.go:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.go i { width: 15px; height: 15px; background-color: #04121a; }

/* ---------------- ئۇقتۇرۇش ---------------- */
.msg {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.75;
    margin-bottom: 14px;
    border: 1px solid;
}

.msg i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

.msg.err  { background: rgba(255,59,92,.09);  border-color: rgba(255,59,92,.35);  color: #ff92a5; }
.msg.err  i { background-color: var(--bad); }
.msg.info { background: rgba(53,234,255,.07); border-color: rgba(53,234,255,.28); color: #8ce7f8; }
.msg.info i { background-color: var(--neon-1); }
.msg.warn { background: rgba(255,176,32,.08); border-color: rgba(255,176,32,.32); color: #ffd68f; }
.msg.warn i { background-color: var(--warn); }

/* ---------------- ئاستى ئۇچۇر ---------------- */
.p-foot {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p-foot div { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #545c6e; }
.p-foot i { width: 11px; height: 11px; background-color: var(--neon-1); opacity: .6; flex-shrink: 0; }

.foot-note { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #464e60; }
.foot-note i { width: 10px; height: 10px; background-color: #464e60; }

/* =====================================================
   قۇلۇپلانغان ھالەت
   ===================================================== */
.box.locked::before {
    background: conic-gradient(
        from 0deg,
        transparent 0deg   36deg,
        var(--bad)  36deg   48deg,
        transparent 48deg  126deg,
        #ff8a00     126deg 138deg,
        transparent 138deg 216deg,
        var(--bad)  216deg 228deg,
        transparent 228deg 306deg,
        #ff8a00     306deg 318deg,
        transparent 318deg 360deg
    );
    filter: blur(1px) drop-shadow(0 0 13px var(--bad));
    animation-duration: 2.4s;
}

.box.locked {
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 0 36px -6px rgba(255,59,92,.4),
        0 30px 70px rgba(0,0,0,.72);
}

.lk { text-align: center; }

.lk-ring {
    width: 74px; height: 74px;
    margin: 4px auto 15px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,59,92,.09);
    border: 2px solid rgba(255,59,92,.48);
    position: relative;
}

.lk-ring i {
    width: 29px; height: 29px;
    background-color: var(--bad);
    filter: drop-shadow(0 0 9px var(--bad));
}

.lk-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid var(--bad);
    opacity: .25;
    animation: lk-pulse 2s ease-out infinite;
}

@keyframes lk-pulse {
    0%   { transform: scale(1);    opacity: .35; }
    70%  { transform: scale(1.2);  opacity: 0; }
    100% { transform: scale(1.2);  opacity: 0; }
}

.lk h2 { font-size: 16.5px; margin-bottom: 8px; }
.lk p  { font-size: 12px; color: var(--dim); line-height: 1.85; margin-bottom: 16px; }

.lk-timer {
    font-size: 38px;
    font-weight: 800;
    color: var(--bad);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    line-height: 1.1;
    margin-bottom: 14px;
    text-shadow: 0 0 24px rgba(255,59,92,.5);
}

.lk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }

.lk-steps div {
    padding: 8px 4px;
    border-radius: 9px;
    background: var(--field);
    border: 1px solid var(--line);
    font-size: 10.5px;
}

.lk-steps b     { display: block; font-size: 12px; }
.lk-steps small { color: #545c6e; font-size: 10px; }

.lk-steps div.on {
    background: rgba(255,59,92,.11);
    border-color: rgba(255,59,92,.42);
    color: #ff92a5;
}

.lk-steps div.on small { color: #ff92a5; opacity: .72; }

.retry {
    width: 100%;
    padding: 11px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--txt);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color .2s, background .2s;
}

.retry:disabled { opacity: .5; cursor: not-allowed; }
.retry:not(:disabled):hover { border-color: var(--neon-1); background: #232935; }
.retry i { width: 13px; height: 13px; background-color: var(--dim); }

/* ---------------- كىچىك ئېكران ---------------- */
@media (max-width: 460px) {
    :root { --pad: 10px; }
    .box       { width: 268px; }
    .box.open,
    .box.locked { width: calc(100vw - 36px); }
    @media (hover: hover) and (pointer: fine) {
        .box:not(.locked):hover { width: calc(100vw - 36px); }
    }
    .cap { flex-direction: column; }
    .cap-pic { width: 100%; height: 46px; }
    .lk-timer { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .box::before { animation: none; }
    .box, .pill, .panel { transition-duration: .01ms; }
}