/* ==========================================================
   كۈنوخانا — 移动端优先 (Mobile First)
   先写手机样式，再用 min-width 媒体查询增强平板/电脑
   兼容 iPhone (Safari / 微信内置浏览器) 与各类安卓浏览器
   ========================================================== */

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

html {
    /* 防止 iPhone 横屏时自动放大字号 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Naskh Arabic',
                 'Segoe UI', 'Helvetica Neue', Arial,
                 'Microsoft YaHei', '微软雅黑', sans-serif;
    background: #000;
    color: #f3f3f5;
    line-height: 1.6;
    direction: rtl;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* iOS 上让背景铺满整屏（含地址栏收起时的高度） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(130% 90% at 50% -10%, #3a1450 0%, #1a0a2c 42%, #07030f 100%);
}

/* ---------- 背景漂浮光斑 ---------- */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.bg-decor .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.32;                 /* 3D 霓虹氛围光，比之前更明显一些 */
    will-change: transform;
    animation: blobFloat 14s ease-in-out infinite;
}

.bg-decor .b1 {
    width: 58vw; height: 58vw;
    max-width: 320px; max-height: 320px;
    top: -8%; left: -14%;
    background: radial-gradient(circle, #ffa8c8, rgba(255, 168, 200, 0));
}

.bg-decor .b2 {
    width: 52vw; height: 52vw;
    max-width: 300px; max-height: 300px;
    top: 18%; right: -16%;
    background: radial-gradient(circle, #ffcf9b, rgba(255, 207, 155, 0));
    animation-delay: -3s;
}

.bg-decor .b3 {
    width: 64vw; height: 64vw;
    max-width: 360px; max-height: 360px;
    bottom: -14%; left: -10%;
    background: radial-gradient(circle, #b9a7ff, rgba(185, 167, 255, 0));
    animation-delay: -6s;
}

.bg-decor .b4 {
    width: 46vw; height: 46vw;
    max-width: 260px; max-height: 260px;
    bottom: 12%; right: -12%;
    background: radial-gradient(circle, #9fe6d8, rgba(159, 230, 216, 0));
    animation-delay: -9s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(6%, -5%, 0) scale(1.12); }
    66%      { transform: translate3d(-5%, 4%, 0) scale(0.94); }
}

/* ---------- چاقناپ تۇرىدىغان يۇلتۇزلار ---------- */
.stars {
    position: fixed;
    inset: 0 0 auto 0;
    height: 42vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.65) 45%, transparent 75%);
    animation: starTwinkle 3s ease-in-out infinite;
}

/* ھەر بىر يۇلتۇزنىڭ ئورنى، چوڭلۇقى ۋە چاقنىشى ئوخشىمايدۇ */
.star.s1  { width: 3px; height: 3px; left: 7%;  top: 18%; animation-duration: 2.4s; animation-delay: -0.3s; }
.star.s2  { width: 2px; height: 2px; left: 15%; top: 42%; animation-duration: 3.6s; animation-delay: -1.2s; opacity: 0.8; }
.star.s3  { width: 4px; height: 4px; left: 24%; top: 10%; animation-duration: 2.8s; animation-delay: -2s; }
.star.s4  { width: 2px; height: 2px; left: 31%; top: 55%; animation-duration: 4.2s; animation-delay: -0.7s; opacity: 0.7; }
.star.s5  { width: 3px; height: 3px; left: 38%; top: 28%; animation-duration: 3s;   animation-delay: -1.6s; }
.star.s6  { width: 2px; height: 2px; left: 45%; top: 8%;  animation-duration: 3.8s; animation-delay: -2.4s; opacity: 0.85; }
.star.s7  { width: 4px; height: 4px; left: 52%; top: 36%; animation-duration: 2.6s; animation-delay: -0.9s; }
.star.s8  { width: 2px; height: 2px; left: 59%; top: 15%; animation-duration: 4s;   animation-delay: -3s;   opacity: 0.75; }
.star.s9  { width: 3px; height: 3px; left: 66%; top: 48%; animation-duration: 3.2s; animation-delay: -1.8s; }
.star.s10 { width: 2px; height: 2px; left: 73%; top: 22%; animation-duration: 3.5s; animation-delay: -0.4s; opacity: 0.8; }
.star.s11 { width: 4px; height: 4px; left: 80%; top: 40%; animation-duration: 2.9s; animation-delay: -2.2s; }
.star.s12 { width: 2px; height: 2px; left: 87%; top: 12%; animation-duration: 3.9s; animation-delay: -1.1s; opacity: 0.85; }
.star.s13 { width: 3px; height: 3px; left: 92%; top: 50%; animation-duration: 3.1s; animation-delay: -2.7s; }
.star.s14 { width: 2px; height: 2px; left: 11%; top: 68%; animation-duration: 4.4s; animation-delay: -1.5s; opacity: 0.6; }
.star.s15 { width: 3px; height: 3px; left: 49%; top: 62%; animation-duration: 3.3s; animation-delay: -0.2s; opacity: 0.7; }
.star.s16 { width: 2px; height: 2px; left: 85%; top: 70%; animation-duration: 4.1s; animation-delay: -2.9s; opacity: 0.65; }
.star.s17 { width: 3px; height: 3px; left: 68%; top: 4%;  animation-duration: 2.7s; animation-delay: -1.9s; }
.star.s18 { width: 2px; height: 2px; left: 4%;  top: 55%; animation-duration: 4.6s; animation-delay: -3.4s; opacity: 0.6; }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* ---------- ئۇچۇپ تۇرىدىغان بۇلۇتلار ---------- */
.clouds {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* بۇلۇت شەكلى: يۇمىلاق گەۋدە + ئىككى ئۇچلۇق چوققا */
.cloud {
    position: absolute;
    width: 170px;
    height: 52px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 60px;
    filter: blur(7px);
    opacity: 0.45;
    animation: cloudDrift 60s linear infinite;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud::before {
    width: 78px;
    height: 78px;
    top: -36px;
    left: 28px;
}

.cloud::after {
    width: 56px;
    height: 56px;
    top: -22px;
    right: 34px;
}

@keyframes cloudDrift {
    from { transform: translateX(-260px); }
    to   { transform: translateX(calc(100vw + 260px)); }
}

/* ھەر بىر بۇلۇتنىڭ ئېگىزلىكى، چوڭلۇقى ۋە سۈرئىتى ئوخشىمايدۇ */
.cloud.c1 { top: 12%; transform: scale(1.3); animation-duration: 75s;  animation-delay: -18s; opacity: 0.5; }
.cloud.c2 { top: 26%; transform: scale(0.9); animation-duration: 95s;  animation-delay: -55s; opacity: 0.35; }
.cloud.c3 { top: 44%; transform: scale(1.6); animation-duration: 65s;  animation-delay: -38s; opacity: 0.55; }
.cloud.c4 { top: 62%; transform: scale(1.1); animation-duration: 85s;  animation-delay: -10s; opacity: 0.4; }
.cloud.c5 { top: 74%; transform: scale(1.9); animation-duration: 55s;  animation-delay: -30s; opacity: 0.5; }
.cloud.c6 { top: 6%;  transform: scale(0.7); animation-duration: 110s; animation-delay: -70s; opacity: 0.28; }

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

img {
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------- 容器 ---------- */
.container {
    width: 100%;
    max-width: 640px;          /* 手机上单列铺满，电脑上居中收窄 */
    margin: 0 auto;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
}

/* ---------- 置顶提示（精致提示卡） ---------- */
.description {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.6vw, 8px);
    width: 100%;                     /* كەڭلىكى تولۇق، ئۇزۇن ئەسكەرتىش قۇر ئېتىپ تولۇق كۆرسىتىلىدۇ */
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 6px clamp(6px, 2vw, 12px);
    background: transparent;          /* ئاق تەگلىك يوق، بەتكە ماسلاشىدۇ */
    border: none;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
    position: relative;
    overflow: hidden;
}

.desc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(20px, 6vw, 30px);
    height: clamp(20px, 6vw, 30px);
    border-radius: clamp(7px, 2.2vw, 10px);
    background: linear-gradient(135deg, #fff0f4, #ffe1ea);
    box-shadow: 0 3px 9px rgba(255, 106, 136, 0.26);
}

.desc-icon svg {
    width: clamp(13px, 3.8vw, 19px);
    height: clamp(13px, 3.8vw, 19px);
    display: block;
    filter: drop-shadow(0 1px 2px rgba(255, 106, 136, 0.35));
    animation: iconSwing 2.4s ease-in-out infinite;
}

@keyframes iconSwing {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-2px); }
}

.desc-text {
    font-size: clamp(12px, 3.4vw, 20px);  /* يانفوندىن كومپيۇتېرغىچە ئۆزلۈكىدىن ماسلىشىدۇ */
    font-weight: 700;
    line-height: 1.65;
    white-space: normal;            /* يانفوندا قۇر ئاتلاپ تولۇق كۆرسىتىلىدۇ */
    overflow-wrap: anywhere;         /* ئۇزۇن سۆز/نومۇر تەگلىكتىن چىقىپ كەتمەيدۇ */
    text-align: right;              /* RTL — ئىككى قۇرنىڭ باشلىنىشى ئوڭ تەرەپتە تەڭ بولىدۇ */
    /* گىرادىئېنتلىق خەت + سۇس پارقىراق نۇر */
    background: linear-gradient(95deg, #ff7a9c 0%, #ff3d6a 38%, #ffd1dc 68%, #ff7a9c 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 122, 156, 0.45));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(3px, 1vw, 6px);
    animation: descShimmer 5s ease-in-out infinite;
}

/* خەت ئۈستىدىن ئۆتۈپ تۇرىدىغان پارقىراق نۇر */
@keyframes descShimmer {
    0%        { background-position: 0% 0; }
    55%, 100% { background-position: 220% 0; }
}

/* ھەر بىر قۇر ئايرىم كۆرسىتىلىدۇ */
.desc-line {
    display: block;
}

/* ---------- 进入按钮区域（直接融入背景） ---------- */
.featured-card {
    margin-top: clamp(40px, 10vw, 72px);
    background: transparent;
    border-radius: 24px;
    padding: 8px 4px;
    margin-bottom: 20px;
    position: relative;
}

/* 手机：纵向单列居中 */
.featured-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

/* ---------- Nawzat 3D ئالتۇن بېلەت رەسىمى ---------- */
.hero-ticket {
    position: relative;
    width: min(250px, 62vw);
    margin-top: clamp(-6px, 0.5vw, 4px);
    transform: translateY(clamp(-44px, -3vw, -22px));
}

/* رەسىم كەينىدىكى ئالتۇن غۇۋا چىراغ */
.hero-ticket::before {
    content: '';
    position: absolute;
    inset: -12%;
    background: radial-gradient(50% 50% at 50% 55%,
        rgba(255, 190, 90, 0.4) 0%,
        rgba(255, 150, 60, 0.14) 48%,
        transparent 75%);
    filter: blur(6px);
    z-index: -1;
    pointer-events: none;
}

.hero-ticket img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    border: 1px solid rgba(255, 210, 130, 0.45);
    transform: perspective(900px) rotateX(8deg) rotateY(-7deg);
    transform-style: preserve-3d;
    box-shadow:
        0 26px 40px rgba(0, 0, 0, 0.55),
        0 0 44px rgba(255, 180, 80, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* بېلەت رەسىمى ئەمدى ھەركەت قىلمايدۇ */

/* ---------- 进入按钮（现代柔和光感） ---------- */
.enter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 92vw;
    padding: clamp(11px, 3vw, 15px) clamp(22px, 5.6vw, 32px);
    border: none;
    border-radius: 999px;
    background:
        linear-gradient(135deg, #ffe0bd 0%, #ffc08a 50%, #ff9d5c 100%);
    color: #5c3a1e;
    text-decoration: none;
    font-family: inherit;
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    /* 现代柔和光感：柔和投影 + 顶部高光 + 霓虹光晕 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(200, 110, 40, 0.25),
        0 8px 22px rgba(255, 157, 92, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.2),
        0 0 28px rgba(255, 190, 130, 0.4);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

/* 图标与文字位于流光之上 */
.enter-btn-icon,
.enter-btn-text {
    position: relative;
    z-index: 2;
}

.enter-btn-icon {
    flex: 0 0 auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 流光扫过 — ئۆچۈرۈلدى */

.enter-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -2px 0 rgba(200, 110, 40, 0.25),
        0 12px 28px rgba(255, 157, 92, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.22),
        0 0 34px rgba(255, 190, 130, 0.55);
}

.enter-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(200, 110, 40, 0.3),
        0 4px 10px rgba(255, 157, 92, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================
   平板 / 电脑：在手机样式基础上增强
   ========================================================== */
/* 平板及以上：整体放大、按钮居中且更大气 */
@media (min-width: 768px) {
    .container {
        max-width: 760px;
        padding-top: 40px;
        padding-right: 24px;
        padding-bottom: 48px;
        padding-left: 24px;
    }

    .description {
        margin-bottom: 26px;
        padding: 12px 20px;
        border-radius: 16px;
    }

    .desc-text {
        font-size: clamp(17px, 2vw, 21px);
    }

    .featured-card {
        margin-top: clamp(40px, 7vw, 80px);
        margin-bottom: 28px;
    }

    /* 单按钮在桌面端保持居中，并适当放大 */
    .enter-btn {
        font-size: clamp(16px, 1.8vw, 20px);
        padding: 12px 30px;
    }
}

/* 大屏电脑：继续放大，避免内容过窄 */
@media (min-width: 1200px) {
    .container {
        max-width: 880px;
    }

    .enter-btn {
        font-size: clamp(18px, 1.6vw, 21px);
        padding: 14px 36px;
    }
}

/* 超大屏（≥1440px）：不再继续放大，保持稳定统一的版心 */
@media (min-width: 1440px) {
    .container {
        max-width: 920px;
    }

    .hero-ticket {
        width: 270px;
    }

    .ticket-slogan {
        font-size: 17px;
    }
}

/* 极小屏手机（≤380px）：整体再收一点，保证不挤、不溢出 */
@media (max-width: 380px) {
    .container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .description {
        margin-bottom: 14px;
    }

    .desc-text {
        font-size: clamp(11px, 3.2vw, 14px);
    }

    .hero-ticket {
        width: min(220px, 70vw);
    }

    .featured-card {
        margin-top: clamp(28px, 9vw, 44px);
    }

    .enter-btn {
        font-size: 15px;
        padding: 11px 26px;
    }

    .wechat-bar {
        padding: 7px 11px;
    }
}

/* 平板（768–1024px）：保持舒适，不盲目放大 */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-ticket {
        width: min(260px, 40vw);
    }

    .featured-card {
        margin-top: clamp(36px, 6vw, 64px);
    }
}

/* 手机横屏 / 矮屏：压缩纵向间距，保证单屏装下不滚动 */
@media (max-height: 560px) and (orientation: landscape) {
    .container {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: 12px;
    }

    .description {
        margin-bottom: 10px;
    }

    .featured-card {
        margin-top: clamp(14px, 4vh, 30px);
        margin-bottom: 10px;
    }

    .wechat-bar {
        margin-top: clamp(10px, 3vh, 20px);
    }
}

/* ---------- ئۈندىدار نومۇرى بالدىقى (چىرايلىق، ماسلاشقان) ---------- */
.wechat-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(4px, 1.2vw, 8px);
    width: fit-content;
    max-width: 100%;
    margin: clamp(34px, 9vw, 56px) auto 0;
    padding: clamp(7px, 2vw, 11px) clamp(12px, 3vw, 19px);
    border-radius: 999px;
    /* رامكىسىز، تەگلىكسىز — پەقەت بەلگە ۋە خەت */
    border: none;
    background: none;
    color: #fff;
    font-family: 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wechat-label {
    font-size: clamp(11px, 2.8vw, 15px);
    font-weight: 700;
    letter-spacing: 0.3px;
    background: linear-gradient(92deg, #d9fff0, #9fe8c0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.wechat-sep {
    font-size: clamp(12px, 3vw, 16px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

/* نومۇر گىرادىئېنتلىق، يېنىك پۇلسىمان */
.wechat-num {
    font-size: clamp(13px, 3.6vw, 19px);
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(92deg, #7ee0a0, #8fd4f0 50%, #ffb3c6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

/* كۆچۈرۈش بەلگىسى */
.wechat-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, 5vw, 26px);
    height: clamp(20px, 5vw, 26px);
    margin-inline-start: clamp(2px, 0.8vw, 5px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.wechat-copy:hover,
.wechat-copy:focus-visible {
    background: rgba(126, 224, 160, 0.3);
    outline: none;
}

/* نومۇرنى تاللاپ كۆچۈرۈشكىمۇ بولىدۇ */
.wechat-num {
    cursor: pointer;
    -webkit-user-select: text;
    user-select: text;
}

/* كۆچۈرۈلگەندە كۆرسىتىلىدىغان ئۆتۈش ئۇچۇرى */
.wechat-copy-hint {
    position: absolute;
    inset-inline-end: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(50%) translateY(6px);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(126, 224, 160, 0.95);
    color: #0c2a1a;
    font-size: clamp(12px, 3.2vw, 14px);
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.wechat-copy-hint.show {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

.wechat-bar.copied .wechat-num {
    background: linear-gradient(92deg, #7ee0a0, #7ee0a0);
    -webkit-background-clip: text;
    background-clip: text;
}

@keyframes wechatGlow {
    0%, 100% { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    50%      { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 18px rgba(126, 224, 160, 0.25); }
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    .description,
    .desc-icon svg,
    .desc-text,
    .enter-btn,
    .hero-ticket,
    .cloud,
    .wechat-bar,
    .star,
    .bg-decor .blob {
        animation: none;
    }
}

/* ---------- 文本选择 ---------- */
::selection {
    background: rgba(46, 204, 113, 0.3);
    color: #1a1a1a;
}