/* ============================================================
   site.css — Maulana Abdur Rofik
   Efek: claymorphism (tombol), neumorphism (kartu),
   glassmorphism (navbar), glow / soft colored shadow, float.
   ============================================================ */

/* ---------- Glassmorphism ---------- */
.glass {
    background: rgba(250, 247, 242, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.dark .glass {
    background: rgba(10, 15, 30, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ---------- Claymorphism (tombol / CTA) ---------- */
.btn-clay {
    border-radius: 1.25rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
    /* light: clay di atas cream */
    background: #1D4ED8;
    color: #fff;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, .35),
        inset -2px -2px 6px rgba(0, 0, 0, .18),
        6px 6px 14px rgba(29, 78, 216, .30),
        -4px -4px 10px rgba(255, 255, 255, .7);
}
.btn-clay:hover { transform: translateY(-2px) scale(1.02); }
.btn-clay:active {
    transform: translateY(1px) scale(.99);
    box-shadow:
        inset 3px 3px 8px rgba(0, 0, 0, .22),
        inset -2px -2px 5px rgba(255, 255, 255, .25),
        2px 2px 6px rgba(29, 78, 216, .25);
}
.dark .btn-clay {
    background: linear-gradient(135deg, #38BDF8, #818CF8);
    color: #0A0F1E;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, .45),
        inset -2px -2px 6px rgba(0, 0, 0, .25),
        6px 6px 16px rgba(56, 189, 248, .35),
        0 0 24px rgba(167, 139, 250, .25);
}
.btn-clay-outline {
    border-radius: 1.25rem;
    font-weight: 600;
    background: transparent;
    color: #1D4ED8;
    border: 2px solid #1D4ED8;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, .5),
        4px 4px 10px rgba(29, 78, 216, .18);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-clay-outline:hover { transform: translateY(-2px); background: rgba(29, 78, 216, .08); }
.dark .btn-clay-outline {
    color: #38BDF8;
    border-color: #38BDF8;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, .08),
        0 0 18px rgba(56, 189, 248, .25);
}
.dark .btn-clay-outline:hover { background: rgba(56, 189, 248, .12); }

/* ---------- Neumorphism (kartu) ---------- */
.card-neu {
    border-radius: 1.5rem;
    background: #FAF7F2;
    box-shadow:
        8px 8px 20px rgba(120, 100, 80, .16),
        -8px -8px 20px rgba(255, 255, 255, .95),
        inset 1px 1px 2px rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .6);
}
.dark .card-neu {
    background: #101728;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow:
        10px 10px 28px rgba(0, 0, 0, .55),
        -6px -6px 18px rgba(255, 255, 255, .04),
        inset 1px 1px 2px rgba(255, 255, 255, .06);
}
.card-neu-flat {
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 4px 4px 14px rgba(120, 100, 80, .12);
    border: 1px solid rgba(0, 0, 0, .04);
}
.dark .card-neu-flat {
    background: #0E1526;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 6px 6px 18px rgba(0, 0, 0, .5);
}

/* ---------- Glow (dark) / soft colored shadow (light) ---------- */
.glow { transition: box-shadow .25s ease, transform .25s ease; }
.glow:hover {
    box-shadow:
        0 12px 32px rgba(29, 78, 216, .25),
        0 0 0 1px rgba(29, 78, 216, .15);
    transform: translateY(-4px);
}
.dark .glow:hover {
    box-shadow:
        0 12px 40px rgba(56, 189, 248, .28),
        0 0 32px rgba(167, 139, 250, .28);
    transform: translateY(-4px);
}
.glow-sm { box-shadow: 0 0 12px rgba(56, 189, 248, .55); }

/* ---------- Navigasi ---------- */
.nav-link {
    position: relative;
    color: #475569;
    transition: color .2s;
    padding: .25rem 0;
}
.dark .nav-link { color: #CBD5E1; }
.nav-link:hover { color: #1D4ED8; }
.dark .nav-link:hover { color: #38BDF8; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    border-radius: 2px;
    background: #1D4ED8;
    transition: width .25s ease;
}
.dark .nav-link::after { background: linear-gradient(90deg, #38BDF8, #A78BFA); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: #1D4ED8; font-weight: 600; }
.dark .nav-link.active { color: #38BDF8; }

.mobile-link {
    display: block;
    padding: .75rem 1rem;
    border-radius: .9rem;
    color: #475569;
}
.dark .mobile-link { color: #CBD5E1; }
.mobile-link:hover { background: rgba(29, 78, 216, .08); color: #1D4ED8; }
.dark .mobile-link:hover { background: rgba(56, 189, 248, .1); color: #38BDF8; }

.footer-link { color: #64748B; transition: color .2s; }
.dark .footer-link { color: #94A3B8; }
.footer-link:hover { color: #1D4ED8; }
.dark .footer-link:hover { color: #38BDF8; }

/* ---------- Form ---------- */
.input-neu {
    width: 100%;
    border-radius: 1rem;
    padding: .8rem 1.1rem;
    font-size: .95rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: inset 3px 3px 8px rgba(120, 100, 80, .08), inset -3px -3px 8px rgba(255, 255, 255, .9);
    color: #0f172a;
    transition: border-color .2s, box-shadow .2s;
}
.dark .input-neu {
    background: #0E1526;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .5), inset -2px -2px 6px rgba(255, 255, 255, .03);
    color: #e2e8f0;
}
.input-neu:focus {
    outline: none;
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
.dark .input-neu:focus {
    border-color: #38BDF8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18), 0 0 16px rgba(56, 189, 248, .15);
}
.input-neu::placeholder { color: #94a3b8; }

/* ---------- FAQ accordion ---------- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* ---------- Tilt 3D ---------- */
.tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tilt-inner { transform: translateZ(30px); }

/* ---------- Floating shapes ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(8deg); }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-28px) scale(1.05); }
}
.animate-float { animation: float 7s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 11s ease-in-out infinite; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .5); }
    50% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
}
.wa-float { animation: pulse-glow 2.6s ease-out infinite; }

/* ---------- Hero canvas ---------- */
#hero-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---------- Body artikel ---------- */
.article-body { line-height: 1.85; }
.article-body p { margin-bottom: 1.1rem; }
.article-body h2, .article-body h3 { font-family: "Space Grotesk", sans-serif; font-weight: 700; margin: 1.8rem 0 .8rem; }
.article-body h2 { font-size: 1.4rem; }
.article-body h3 { font-size: 1.15rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem 1.4rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body a { color: #1D4ED8; text-decoration: underline; }
.dark .article-body a { color: #38BDF8; }
.article-body blockquote {
    border-left: 4px solid #1D4ED8;
    padding: .6rem 1rem;
    margin: 1.2rem 0;
    background: rgba(29, 78, 216, .06);
    border-radius: 0 .8rem .8rem 0;
    font-style: italic;
}
.dark .article-body blockquote { border-color: #38BDF8; background: rgba(56, 189, 248, .08); }
.article-body img { border-radius: 1rem; margin: 1.2rem 0; max-width: 100%; }

/* ---------- Badge kategori ---------- */
.badge-cat {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .28rem .8rem;
    border-radius: 999px;
    letter-spacing: .02em;
}

/* ---------- Stepper keranjang ---------- */
.qty-btn {
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    border-radius: .8rem;
    font-weight: 700;
    user-select: none;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .animate-float, .animate-float-slow, .wa-float { animation: none; }
}

/* ============================================================
   TAMBAHAN — penyempurnaan ala kreator UI (frontend specialist)
   Semua di bawah ini class/utilitas BARU. Class existing di atas
   tidak diubah perilakunya.
   ============================================================ */

/* ---------- 1. Floating pill navbar (glassmorphism premium) ---------- */
.nav-pill {
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow:
        0 12px 32px rgba(15, 23, 42, .14),
        0 2px 8px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .65);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.dark .nav-pill {
    border-color: rgba(255, 255, 255, .1);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, .55),
        0 0 28px rgba(56, 189, 248, .07),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Efek scroll: pill sedikit mengecil + shadow terangkat */
#navbar.nav-scrolled .nav-pill {
    transform: scale(.965);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, .2),
        0 4px 12px rgba(15, 23, 42, .1),
        inset 0 1px 0 rgba(255, 255, 255, .65);
}
.dark #navbar.nav-scrolled .nav-pill {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .65),
        0 0 36px rgba(56, 189, 248, .12),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Dropdown glass untuk menu mobile (di bawah pill) */
.nav-dropdown {
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, .16),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}
.dark .nav-dropdown {
    border-color: rgba(255, 255, 255, .1);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .6),
        0 0 24px rgba(56, 189, 248, .06),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---------- 2. Tooltip reusable [data-tooltip] ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px) scale(.96);
    padding: .35rem .7rem;
    border-radius: .65rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #0f172a;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 60;
}
.dark [data-tooltip]::after {
    color: #e2e8f0;
    background: rgba(16, 23, 40, .94);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- 3. Search expandable (katalog) ---------- */
.search-expand {
    display: flex;
    align-items: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 4px 4px 12px rgba(120, 100, 80, .12);
    transition: width .35s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, border-color .25s ease;
}
.dark .search-expand {
    background: #0e1526;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 4px 4px 14px rgba(0, 0, 0, .5);
}
.search-expand input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font-size: .85rem;
    color: inherit;
    opacity: 0;
    padding: 0;
    transition: opacity .25s ease .06s, padding .3s ease;
}
.search-expand input::placeholder { color: #94a3b8; }
.search-expand .search-btn {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    color: #475569;
    border-radius: 999px;
    transition: color .2s ease, background .2s ease;
}
.dark .search-expand .search-btn { color: #cbd5e1; }
.search-expand:hover, .search-expand:focus-within, .search-expand.has-value {
    width: 13rem;
    border-color: rgba(29, 78, 216, .35);
    box-shadow: 4px 4px 14px rgba(29, 78, 216, .18);
}
.dark .search-expand:hover, .dark .search-expand:focus-within, .dark .search-expand.has-value {
    border-color: rgba(56, 189, 248, .4);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(56, 189, 248, .12);
}
.search-expand:hover input, .search-expand:focus-within input, .search-expand.has-value input {
    opacity: 1;
    padding-left: 1rem;
}
.search-expand:hover .search-btn, .search-expand:focus-within .search-btn { color: #1d4ed8; }
.dark .search-expand:hover .search-btn, .dark .search-expand:focus-within .search-btn { color: #38bdf8; }

/* ---------- 4. Micro-interaction kartu: shine sweep + zoom gambar ---------- */
.card-shine { position: relative; }
.card-shine::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%);
    transform: translateX(-130%) skewX(-8deg);
    transition: transform .9s ease;
    pointer-events: none;
    z-index: 5;
}
.card-shine:hover::before { transform: translateX(130%) skewX(-8deg); }
.card-shine img { transition: transform .6s ease; }
.card-shine:hover img { transform: scale(1.06); }

/* ---------- 5. Ripple halus untuk .btn-clay ---------- */
.btn-clay { position: relative; overflow: hidden; }
.btn-ripple {
    position: absolute;
    border-radius: 9999px;
    background: currentColor;
    opacity: .25;
    transform: scale(0);
    pointer-events: none;
    animation: btn-ripple .65s ease-out forwards;
}
@keyframes btn-ripple {
    to { transform: scale(3.2); opacity: 0; }
}

/* ---------- 6. State machine tombol submit (idle → loading → terkirim) ---------- */
.btn-clay.is-loading, .btn-clay.is-sent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    pointer-events: none; /* cegah double-submit; submit form tetap berjalan */
}
.btn-spinner {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    border-radius: 9999px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: .85;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- 7. Tombol play neumorphic (soft/subtle, siap pakai) ---------- */
.play-neu {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: inline-grid;
    place-items: center;
    background: #faf7f2;
    color: #1d4ed8;
    box-shadow:
        6px 6px 14px rgba(120, 100, 80, .18),
        -6px -6px 14px rgba(255, 255, 255, .9),
        inset 1px 1px 2px rgba(255, 255, 255, .8);
    transition: transform .2s ease, box-shadow .2s ease;
}
.play-neu:hover { transform: scale(1.06); }
.play-neu:active {
    transform: scale(.96);
    box-shadow:
        inset 4px 4px 10px rgba(120, 100, 80, .2),
        inset -3px -3px 8px rgba(255, 255, 255, .8);
}
.dark .play-neu {
    background: #101728;
    color: #38bdf8;
    box-shadow:
        6px 6px 16px rgba(0, 0, 0, .55),
        -4px -4px 12px rgba(255, 255, 255, .05),
        inset 1px 1px 2px rgba(255, 255, 255, .06);
}
.dark .play-neu:active {
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, .55),
        inset -2px -2px 6px rgba(255, 255, 255, .04);
}

/* ---------- Hormati prefers-reduced-motion untuk semua tambahan ---------- */
@media (prefers-reduced-motion: reduce) {
    .nav-pill, #navbar.nav-scrolled .nav-pill { transition: none; }
    #navbar.nav-scrolled .nav-pill { transform: none; }
    [data-tooltip]::after { transition: none; }
    .search-expand, .search-expand input { transition: none; }
    .card-shine::before { display: none; }
    .card-shine img, .card-shine:hover img { transform: none; transition: none; }
    .btn-ripple { display: none; }
    .btn-spinner { animation: none; border-top-color: currentColor; opacity: .5; }
}