/* =========================================================
   DESAIN KARTU PROMO (.pa / .pa-t-*)
   Markup : resources/views/components/promo-art.blade.php
   Daftar : config/promo_art.php
   Ukuran teks memakai container query (cqw) -> ikut skala kotaknya,
   jadi sama bagusnya di kartu beranda maupun pratinjau kecil di admin.
   ========================================================= */

.pa {
    position: relative;
    container-type: inline-size;   /* semua ukuran cqw di dalamnya = % lebar kartu */
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #fff;
    isolation: isolate;
    text-align: left;
}
.pa-in {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5cqw;
    padding: 0 7cqw;
}

.pa-offer { position: relative; z-index: 2; display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.pa-unit  { white-space: nowrap; font-size: 3.4cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.pa-value { font-size: 15cqw; font-weight: 800; letter-spacing: -.04em; line-height: .95; white-space: nowrap; }

.pa-info  { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2.2cqw; min-width: 0; }
.pa-title {
    font-size: 4.4cqw;
    font-weight: 800;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pa-code {
    align-self: flex-start;
    font-size: 3.1cqw;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 1cqw 2.4cqw;
    border-radius: 1.6cqw;
    border: .4cqw dashed currentColor;
    white-space: nowrap;
}

.pa-deco { position: absolute; z-index: 0; pointer-events: none; }

/* ---------- Gambar upload ---------- */
.pa-t-image { background: #e6f7f8; display: flex; }
.pa-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-img-empty {
    margin: auto;
    display: inline-flex;
    align-items: center;
    gap: 2cqw;
    font-size: 4cqw;
    font-weight: 700;
    color: #0b7f84;
}

/* ---------- 1. Tosca Wave ---------- */
.pa-t-tosca { background: linear-gradient(120deg, #14b8bd 0%, #0f9ea3 50%, #0b6f74 100%); }
.pa-t-tosca .pa-deco-1 {
    right: -12cqw; bottom: -38cqw; width: 70cqw; height: 70cqw; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22) 0 40%, transparent 41% 52%, rgba(255,255,255,.12) 53% 60%, transparent 61%);
}
.pa-t-tosca .pa-deco-2 {
    left: -6cqw; top: -14cqw; width: 30cqw; height: 30cqw; border-radius: 50%;
    background: rgba(255,255,255,.1);
}
.pa-t-tosca .pa-code { background: rgba(255,255,255,.14); }

/* ---------- 2. Sunset ---------- */
.pa-t-sunset { background: linear-gradient(115deg, #ff7a59 0%, #ff4d6d 55%, #c9184a 100%); }
.pa-t-sunset .pa-deco-1 {
    right: -10cqw; top: -22cqw; width: 42cqw; height: 42cqw; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,209,102,.55) 0 45%, rgba(255,209,102,.18) 46% 60%, transparent 61%);
}
.pa-t-sunset .pa-deco-2 {
    left: 0; right: 0; bottom: 0; height: 9cqw;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6cqw, transparent 6cqw 9cqw);
}
.pa-t-sunset .pa-value { text-shadow: .6cqw .6cqw 0 rgba(120, 0, 40, .35); }

/* ---------- 3. Midnight Neon ---------- */
.pa-t-midnight { background: radial-gradient(120% 140% at 0% 0%, #1f2a5a 0%, #0b1026 60%); }
.pa-t-midnight .pa-value {
    color: #5ef2e8;
    text-shadow: 0 0 2cqw rgba(94, 242, 232, .8), 0 0 6cqw rgba(94, 242, 232, .45);
}
.pa-t-midnight .pa-unit { color: #ff5ec4; text-shadow: 0 0 2cqw rgba(255, 94, 196, .7); }
.pa-t-midnight .pa-code { color: #ff5ec4; box-shadow: 0 0 2cqw rgba(255, 94, 196, .5); }
.pa-t-midnight .pa-deco-1 {
    inset: 0;
    background-image: linear-gradient(rgba(94,242,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(94,242,232,.08) 1px, transparent 1px);
    background-size: 6cqw 6cqw;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
            mask-image: linear-gradient(90deg, transparent, #000 60%);
}

/* ---------- 4. Tiket ---------- */
.pa-t-ticket { color: #0b4f52; background: #fff; }
.pa-t-ticket .pa-in { gap: 0; padding: 0; }
.pa-t-ticket .pa-offer {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    width: 36%;
    color: #fff;
    background: linear-gradient(160deg, #14b8bd, #0b7f84);
    border-right: .6cqw dashed rgba(255,255,255,.7);
}
.pa-t-ticket .pa-value { font-size: 12cqw; }
.pa-t-ticket .pa-info { padding: 0 6cqw; }
.pa-t-ticket .pa-code { color: #0f9ea3; background: #e6f7f8; }
.pa-t-ticket .pa-deco-1,
.pa-t-ticket .pa-deco-2 {
    left: 36%; width: 6cqw; height: 6cqw; margin-left: -3cqw; border-radius: 50%;
    background: #f1f5f6; z-index: 3;
}
.pa-t-ticket .pa-deco-1 { top: -3cqw; }
.pa-t-ticket .pa-deco-2 { bottom: -3cqw; }

/* ---------- 5. Confetti ---------- */
.pa-t-confetti { color: #3a1d00; background: linear-gradient(135deg, #ffe066 0%, #ffc43d 100%); }
/* titik confetti di pseudo-element supaya ukuran cqw mengikuti lebar kartu */
.pa-t-confetti::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle, rgba(255,77,109,.55) 0 .6cqw, transparent .7cqw) 0 0 / 11cqw 11cqw,
        radial-gradient(circle, rgba(20,184,189,.55) 0 .5cqw, transparent .6cqw) 5cqw 6cqw / 13cqw 13cqw,
        radial-gradient(circle, rgba(124,58,237,.5) 0 .45cqw, transparent .55cqw) 8cqw 2cqw / 17cqw 17cqw;
}
.pa-t-confetti .pa-value { color: #c9184a; text-shadow: .6cqw .6cqw 0 #fff; }
.pa-t-confetti .pa-code { background: #fff; border-color: #3a1d00; }

/* ---------- 6. Split Block ---------- */
.pa-t-split { color: #0b2b2c; background: linear-gradient(100deg, #0b7f84 0 45%, #f4fbfb 45% 100%); }
.pa-t-split .pa-in { gap: 6cqw; }
.pa-t-split .pa-offer { width: 36cqw; color: #fff; }
.pa-t-split .pa-value { font-size: 12cqw; }
.pa-t-split .pa-deco-1 {
    left: 45%; top: 0; bottom: 0; width: 3cqw; margin-left: -1.5cqw;
    background: #ffd166; transform: skewX(-12deg);
}
.pa-t-split .pa-code { color: #0b7f84; }

/* ---------- 7. Stempel ---------- */
.pa-t-stamp { color: #7a1d12; background: #fff7ef; }
.pa-t-stamp .pa-offer {
    justify-content: center;
    align-items: center;
    width: 30cqw;
    height: 30cqw;
    border-radius: 50%;
    color: #fff;
    background: #d62828;
    box-shadow: 0 0 0 1.2cqw #fff7ef, 0 0 0 1.8cqw #d62828;
    transform: rotate(-12deg);
}
.pa-t-stamp .pa-value { font-size: 10cqw; }
.pa-t-stamp .pa-unit { font-size: 2.8cqw; }
.pa-t-stamp .pa-deco-1 {
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(214,40,40,.05) 0 2cqw, transparent 2cqw 4cqw);
}

/* ---------- 8. Minimal ---------- */
.pa-t-minimal { color: #111827; background: #fff; }
.pa-t-minimal::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    box-shadow: inset 0 0 0 .5cqw #111827;
}
.pa-t-minimal .pa-value { font-weight: 800; }
.pa-t-minimal .pa-unit { color: #0f9ea3; }
.pa-t-minimal .pa-deco-1 {
    right: 5cqw; top: 5cqw; width: 5cqw; height: 5cqw;
    border-top: .5cqw solid #0f9ea3; border-right: .5cqw solid #0f9ea3;
}
.pa-t-minimal .pa-deco-2 {
    left: 5cqw; bottom: 5cqw; width: 5cqw; height: 5cqw;
    border-bottom: .5cqw solid #0f9ea3; border-left: .5cqw solid #0f9ea3;
}

/* ---------- 9. Imlek 优惠 ---------- */
.pa-t-hanzi {
    color: #ffe8a3;
    background: radial-gradient(120% 140% at 100% 0%, #e63946 0%, #a4161a 55%, #6a040f 100%);
}
.pa-t-hanzi .pa-value { color: #ffd166; text-shadow: .5cqw .5cqw 0 #6a040f; }
.pa-t-hanzi .pa-hanzi {
    position: absolute; z-index: 1; right: 4cqw; top: 50%; transform: translateY(-50%);
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 30cqw; line-height: 1; color: rgba(255, 209, 102, .16);
}
.pa-t-hanzi .pa-deco-1 {
    inset: 2cqw;
    border: .4cqw solid rgba(255, 209, 102, .55);
    border-radius: 2cqw;
}
.pa-t-hanzi .pa-code { color: #ffd166; }

/* ---------- 10. Glass Ungu ---------- */
.pa-t-glass { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #06b6d4 100%); }
.pa-t-glass .pa-deco-1 {
    right: -8cqw; top: -14cqw; width: 42cqw; height: 42cqw; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.pa-t-glass .pa-deco-2 {
    left: 30cqw; bottom: -18cqw; width: 32cqw; height: 32cqw; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}
.pa-t-glass .pa-info {
    padding: 2.6cqw 3.4cqw;
    border-radius: 3cqw;
    background: rgba(255, 255, 255, .16);
    border: .3cqw solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}


/* =========================================================
   Ilustrasi orang 2D (gambar statis) — .pa-fig
   Markup: resources/views/components/promo-figure.blade.php (karakter rig Mandarin Corner,
   digambar & dibekukan oleh public/js/promo-figure.js)
   ========================================================= */
.pa-fig {
    position: absolute;
    z-index: 1;
    right: 2cqw;
    bottom: 0;
    height: 96%;
    aspect-ratio: 240 / 292;      /* ukuran kanvas rig Mandarin Corner */
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, .16));
}
.pa-fig > svg,
.pa-fig .mcr-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ruang untuk ilustrasi di sisi kanan */
.pa-has-fig .pa-in { padding-right: 27cqw; gap: 4cqw; }
.pa-has-fig .pa-value { font-size: 13cqw; }
.pa-has-fig .pa-title { font-size: 4cqw; }

/* warna karakter per desain */
.pa-t-tosca    { --pa-shirt: #ffd166; --pa-pants: #0b4f52; --pa-hair: #1f2937; --pa-badge: #ff6b8a; --pa-collar: rgba(11,79,82,.35); }
.pa-t-sunset   { --pa-shirt: #ffffff; --pa-pants: #6a040f; --pa-hair: #3d1f12; --pa-badge: #ff7a59; --pa-collar: rgba(201,24,74,.35); --pa-spark: #fff3b0; }
.pa-t-midnight { --pa-shirt: #ff5ec4; --pa-pants: #1e3a8a; --pa-hair: #111827; --pa-badge: #5ef2e8; --pa-spark: #5ef2e8; --pa-shoe: #5ef2e8; }
.pa-t-ticket   { --pa-shirt: #14b8bd; --pa-pants: #0b4f52; --pa-hair: #1f2937; --pa-badge: #ffd166; --pa-spark: #0f9ea3; }
.pa-t-confetti { --pa-shirt: #7c3aed; --pa-pants: #3a1d00; --pa-hair: #3a1d00; --pa-badge: #ffd166; --pa-spark: #c9184a; }
.pa-t-split    { --pa-shirt: #0f9ea3; --pa-pants: #0b2b2c; --pa-hair: #1f2937; --pa-badge: #ffd166; --pa-string: rgba(11,43,44,.45); }
.pa-t-stamp    { --pa-shirt: #d62828; --pa-pants: #3d1f12; --pa-hair: #3d1f12; --pa-badge: #ffd166; --pa-spark: #f4a261; --pa-shoe: #3d1f12; }
.pa-t-minimal  { --pa-shirt: #111827; --pa-pants: #0f9ea3; --pa-hair: #111827; --pa-badge: #0f9ea3; --pa-spark: #0f9ea3; --pa-shoe: #e5e7eb; }
.pa-t-hanzi    { --pa-shirt: #ffd166; --pa-pants: #6a040f; --pa-hair: #111827; --pa-badge: #e63946; --pa-collar: rgba(164,22,26,.4); --pa-spark: #ffd166; }
.pa-t-glass    { --pa-shirt: #ffffff; --pa-pants: #312e81; --pa-hair: #1e1b4b; --pa-badge: #06b6d4; --pa-collar: rgba(79,70,229,.35); }

/* penyesuaian tata letak per desain saat ada ilustrasi */
.pa-has-fig.pa-t-ticket .pa-in { padding-right: 25cqw; }
.pa-has-fig.pa-t-ticket .pa-value { font-size: 9.5cqw; }
.pa-has-fig.pa-t-ticket .pa-unit { font-size: 2.6cqw; letter-spacing: .08em; }
.pa-has-fig.pa-t-stamp .pa-offer { width: 24cqw; height: 24cqw; }
.pa-has-fig.pa-t-stamp .pa-value { font-size: 8cqw; }
.pa-has-fig.pa-t-split .pa-in { gap: 6cqw; }
.pa-has-fig.pa-t-split .pa-offer { width: 34cqw; }
.pa-has-fig.pa-t-split .pa-value { font-size: 9.5cqw; }
.pa-has-fig.pa-t-split .pa-unit { font-size: 2.6cqw; letter-spacing: .08em; }
.pa-has-fig.pa-t-hanzi .pa-hanzi { right: 26cqw; font-size: 24cqw; }
.pa-has-fig.pa-t-glass .pa-info { max-width: 23cqw; }


/* ---------- di kartu promo beranda (public/partials/promo-strip: .pv-card-media) ---------- */
.pv-card-media > .pa { position: absolute; inset: 0; }
.pv-card-media > .pv-card-ended { z-index: 3; }

/* ==========================================================================
   BERANDA: panel promo TANPA latar (public/partials/promo-strip.blade.php -> .pv-panel--clean)
   kiri = teks ajakan langsung di atas halaman, kanan = banner desain Promo Management.
   ========================================================================== */
.pv-panel.pv-panel--clean {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0;
    color: #0f2e30;
    overflow: visible;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
}
.pv-panel--clean::before,
.pv-panel--clean .pv-panel-mark { display: none; }

.pv-panel--clean .pv-panel-lead {
    font-size: 17px;
    line-height: 1.3;
    color: #3d5a5c;
    margin-bottom: 8px;
}
.pv-panel--clean .pv-panel-lead b {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0b6f74;
    background: linear-gradient(90deg, #0b7f84, #14b8bd);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pv-panel--clean .pv-panel-lead b:last-child { font-size: 34px; line-height: 1.05; }
.pv-panel--clean .pv-panel-sub { color: #6b8183; font-size: 13px; margin-bottom: 14px; }

.pv-panel--clean .pv-panel-link {
    color: #fff;
    background: linear-gradient(120deg, #14b8bd, #0b7f84);
    box-shadow: 0 6px 16px rgba(11, 127, 132, .28);
}
.pv-panel--clean .pv-panel-link:hover { color: #fff; filter: brightness(1.06); }

.pv-panel--clean .pv-arrow {
    color: #0b7f84;
    background: #fff;
    border: 1.5px solid rgba(11, 127, 132, .35);
}
.pv-panel--clean .pv-arrow:hover:not(:disabled) { color: #fff; background: #0f9ea3; border-color: #0f9ea3; }

/* track: pas 2 banner per layar (1 di HP), tanpa ada yang kepotong */
.pv-panel--clean .pv-panel-track { padding: 6px 0 14px; scroll-padding-left: 0; gap: 16px; }

@media (max-width: 767.98px) {
    .pv-panel.pv-panel--clean { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- kartu = BANNER SAJA (public/partials/promo-card.blade.php) ---------- */
.pv-card.pv-card--art {
    flex: 0 0 calc((100% - 16px) / 2);
    align-self: center;
    background: transparent;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(11, 79, 82, .16);
}
a.pv-card.pv-card--art:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(11, 79, 82, .22); }
.pv-card--art .pv-card-media { aspect-ratio: 16 / 7; flex: none; width: 100%; border-radius: inherit; background: transparent; }
@media (max-width: 767.98px) { .pv-card.pv-card--art { flex-basis: 100%; } }

/* karakter dikunci lebarnya supaya tidak menutupi teks */
.pv-card--art .pa-fig { height: auto; width: 29cqw; max-height: 100%; }
.pv-card--art .pa-has-fig .pa-in { padding-right: 32cqw; padding-bottom: 5cqw; }
.pv-card--art .pa-code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* hitung mundur kecil di dalam banner, pojok kiri bawah */
.pa-timer {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 600 11px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #fff;
    background: rgba(10, 20, 28, .55);
    backdrop-filter: blur(4px);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.pa-timer b { font-weight: 800; }
.pv-card.is-urgent .pa-timer { background: rgba(232, 89, 12, .92); }
.pa-timer.is-ended { background: rgba(10, 20, 28, .7); }
.pv-card--art.is-disabled .pa { filter: grayscale(.85) brightness(.95); }