/* =====================================================
   asia.com.ge — K-POP AREA banner (2026-10-11)
   The old 565 KB picture as a live banner: the stars stay in a light WebP
   (uploads/kpop/kpop-bg.webp, 45 KB; -m.webp 24 KB for phones), the logo, the contacts and the
   lines are real HTML, and it moves with CSS only (sparkles, a passing shine, a beating heart).
   Sizes follow the banner's own width (container query units), so one banner fits every screen.
   ===================================================== */
.kp { --kp-v: #6A0DAD; position: relative; display: block; width: 100%; max-width: 720px; margin: 14px auto 4px; aspect-ratio: 1700 / 257; container-type: inline-size;
    border-radius: 14px; overflow: hidden; isolation: isolate; text-decoration: none !important; color: #fff;
    background: #5B0C9E url("/uploads/kpop/kpop-bg.webp") center / cover no-repeat;
    box-shadow: 0 10px 30px rgba(60, 10, 120, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset; font-family: "NxSite", "Noto Sans Georgian", "Inter", system-ui, sans-serif; }
.kp:hover { box-shadow: 0 14px 36px rgba(90, 20, 170, .5), 0 0 0 1px rgba(255, 255, 255, .14) inset; }
/* sparkles twinkling over the sequins */
.kp::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(circle, #fff 0 1px, transparent 1.6px) 6% 70% / 9% 60%,
        radial-gradient(circle, #fff 0 1px, transparent 1.6px) 38% 20% / 11% 70%,
        radial-gradient(circle, #FFD6FF 0 1.2px, transparent 2px) 60% 85% / 13% 55%,
        radial-gradient(circle, #fff 0 1px, transparent 1.6px) 92% 35% / 10% 65%;
    animation: kpTwinkle 3.2s ease-in-out infinite alternate; }
@keyframes kpTwinkle { 0% { opacity: .25; } 50% { opacity: .9; } 100% { opacity: .35; background-position: 8% 60%, 36% 30%, 62% 75%, 90% 45%; } }
/* a shine that passes now and then */
.kp::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, .05) 52%, transparent 62%) -150% 0 / 60% 100% no-repeat;
    animation: kpShine 6s ease-in-out infinite; }
@keyframes kpShine { 0%, 55% { background-position: -150% 0; } 85%, 100% { background-position: 250% 0; } }

/* contacts, top left */
.kp-con { position: absolute; z-index: 3; left: 13.2%; top: 6%; display: grid; grid-template-columns: auto auto; column-gap: 2.6cqw; row-gap: .7cqw; align-items: center; }
.kp-con span { display: inline-flex; align-items: center; gap: .7cqw; font-size: 1.12cqw; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(40, 0, 80, .6); white-space: nowrap; }
.kp-con svg { width: 1.9cqw; height: 1.9cqw; flex: 0 0 auto; filter: drop-shadow(0 0 .4cqw rgba(255, 255, 255, .45)); }
.kp-con .kp-ph { color: #fff; }

/* the round logo, centre */
.kp-logo { position: absolute; z-index: 3; left: 49.9%; top: 45%; width: 8.7cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    display: grid; place-items: center; align-content: center; gap: .25cqw; background: #fff; color: #7B1FA2;
    box-shadow: 0 0 0 .35cqw rgba(255, 255, 255, .25), 0 0 2.2cqw rgba(255, 190, 255, .55); }
.kp-logo::before { content: ""; position: absolute; inset: -.55cqw; border-radius: 50%; padding: .2cqw; background: conic-gradient(from 0deg, transparent 0 60%, #FFD6FF 75%, #fff 80%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kpSpin 3.5s linear infinite; }
@keyframes kpSpin { to { transform: rotate(360deg); } }
.kp-logo svg { width: 3.1cqw; height: 3.1cqw; animation: kpBeat 1.6s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes kpBeat { 0%, 60%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(.97); } 36% { transform: scale(1.08); } }
.kp-logo b { font-size: .95cqw; font-weight: 700; letter-spacing: .03em; color: #6A1B9A; font-family: "Inter", system-ui, sans-serif; }

/* the lines, top right */
.kp-tag { position: absolute; z-index: 3; left: 73.4%; top: 4.5%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.kp-tag p { margin: 0; font-size: 1.32cqw; font-weight: 800; letter-spacing: .01em; text-shadow: 0 1px 4px rgba(40, 0, 80, .7); }
.kp-tag b { display: block; margin-top: .5cqw; font-size: 1.75cqw; font-weight: 900; letter-spacing: .04em;
    background: linear-gradient(90deg, #fff 0%, #FFD6FF 35%, #fff 50%, #F3E5FF 70%, #fff 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 3px rgba(40, 0, 80, .6)); animation: kpText 4s linear infinite; }
@keyframes kpText { to { background-position: -200% 0; } }

/* narrow (phones): the phone picture, taller, bigger type — like the old mobile banner */
@container (max-width: 560px) {
    .kp-con { left: 3%; top: 7%; column-gap: 4cqw; row-gap: 1.4cqw; }
    .kp-con span { font-size: 2.3cqw; gap: 1.2cqw; }
    .kp-con svg { width: 3.4cqw; height: 3.4cqw; }
    .kp-logo { width: 15cqw; top: 50%; }
    .kp-logo svg { width: 5.4cqw; height: 5.4cqw; }
    .kp-logo b { font-size: 1.6cqw; }
    .kp-tag { left: auto; right: 3%; transform: none; top: 6%; }
    .kp-tag p { font-size: 2.3cqw; }
    .kp-tag b { font-size: 3cqw; margin-top: .8cqw; }
}
@media (max-width: 600px) { .kp { aspect-ratio: 730 / 146; background-image: url("/uploads/kpop/kpop-bg-m.webp"); border-radius: 12px; margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .kp::before, .kp::after, .kp-logo::before, .kp-logo svg, .kp-tag b { animation: none; } }
/* v2: Latin text in Inter (even spacing), a clear glossy heart, a phone layout that never overlaps */
.kp-con span, .kp-tag b, .kp-logo b { font-family: "Inter", "Noto Sans Georgian", system-ui, sans-serif; letter-spacing: 0; }
.kp-logo svg { width: 3.4cqw; height: 3.4cqw; filter: drop-shadow(0 .2cqw .5cqw rgba(123, 31, 162, .45)); }
@container (max-width: 560px) {
    .kp-con { grid-template-columns: auto; row-gap: 1cqw; left: 3%; top: 8%; }
    .kp-con span { font-size: 2.15cqw; gap: 1cqw; }
    .kp-con svg { width: 3cqw; height: 3cqw; }
    .kp-tag { right: 3%; top: 8%; max-width: 31%; white-space: normal; text-align: right; }
    .kp-tag p { font-size: 2.15cqw; line-height: 1.25; }
    .kp-tag b { font-size: 3cqw; margin-top: 1cqw; }
    .kp-logo { width: 14.5cqw; top: 52%; }
    .kp-logo svg { width: 5.6cqw; height: 5.6cqw; }
}
/* v3 (live): weights the site actually loads (Inter 500–700), never smaller than readable on phones */
.kp-con span, .kp-tag b, .kp-logo b { font-weight: 700; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.kp-tag p { font-weight: 700; }
@container (max-width: 560px) {
    .kp-con span { font-size: max(8.5px, 2.15cqw); }
    .kp-tag p { font-size: max(8.5px, 2.15cqw); }
    .kp-tag b { font-size: max(11px, 3cqw); }
    .kp-logo b { font-size: max(6.5px, 1.6cqw); }
}
.kp-con span, .kp-tag b, .kp-logo b { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }