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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #05070f;
    color: #ffffff;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: min(1120px, 92%);
    margin: auto;
}

/* HEADER */
header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(5, 7, 15, 0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 34px;
    width: auto;
    display: block;
}

.menu {
    display: flex;
    align-items: center;
    gap: 18px;
}

.menu-link,
.nav a.btn {
    font-size: 14px;
    color: #e6e8f0;
}

.nav a.btn {
    padding: 10px 18px;
    border: 1px solid #c9c9c9;
    border-radius: 999px;
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #e6e8f0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: .25s;
}

.dropdown-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.dropdown-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .85;
    transition: .25s;
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(225deg) translateY(-1px);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 190px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(9, 12, 24, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: #d8dbe7;
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* BURGER DEFAULT */
.burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.burger span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: #ffffff;
    border-radius: 999px;
    transition: 0.25s ease;
}

.burger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    display: none;
}

/* HERO */
.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 75% 20%, rgba(110, 130, 255, .28), transparent 32%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .09), transparent 30%),
        linear-gradient(135deg, #05070f 0%, #101529 55%, #05070f 100%);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.home-hero-content {
    max-width: 820px;
    padding: 90px 0;
}

.home-hero-content h1 {
    max-width: 780px;
}

.home-hero-content .subtitle {
    max-width: 720px;
}

.tag {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #d8d8d8;
    font-size: 13px;
    letter-spacing: 1px;
}

h1,
.product-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(44px, 7vw, 84px);
    line-height: .95;
    margin-bottom: 24px;
    letter-spacing: 1px;
    font-weight: 700;
}

.subtitle {
    font-size: 20px;
    color: #d5d7df;
    max-width: 620px;
    margin-bottom: 34px;
}

.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 700;
    transition: .25s;
    display: inline-block;
}

.btn-primary {
    background: #ffffff;
    color: #05070f;
}

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, .25);
    color: #ffffff;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
}

/* PRODUCT / VISUAL */
.product-card,
.series-visual {
    position: relative;
    min-height: 520px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 32px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.series-visual {
    background:
        radial-gradient(circle at 50% 50%, rgba(90, 110, 255, .18), transparent 34%),
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .08), transparent 24%),
        linear-gradient(160deg, #070914, #03040a 70%);
}

.product-photo-card {
    position: relative;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 35%, rgba(110, 130, 255, .18), transparent 42%),
        linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    overflow: hidden;
    padding: 0;
}

.product-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* SERIES SHOWCASE */
.series-showcase {
    padding: 70px 0 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(110, 130, 255, .16), transparent 38%),
        #05070f;
}

.series-showcase-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
}

.series-showcase-header .tag {
    margin-bottom: 18px;
}

.series-showcase-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 5vw, 62px);
    line-height: .95;
    margin-bottom: 14px;
}

.series-showcase-header p {
    color: #c8cad2;
    font-size: 18px;
}

.series-showcase-card {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

.series-showcase-card img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

/* GALAXY EFFECT */
.star-field,
.star-field::before,
.star-field::after {
    position: absolute;
    inset: 0;
    content: "";
    background-repeat: repeat;
    opacity: .65;
}

.star-field {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .9) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(170, 190, 255, .7) 1px, transparent 1.5px);
    background-size: 90px 90px, 140px 140px;
    background-position: 10px 20px, 40px 60px;
    animation: starsDrift 38s linear infinite;
}

.star-field::before {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1.5px);
    background-size: 180px 180px;
    background-position: 70px 30px;
    opacity: .35;
    animation: starsDrift 60s linear infinite reverse;
}

.star-field::after {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .45) 1px, transparent 1.5px);
    background-size: 260px 260px;
    background-position: 120px 90px;
    opacity: .28;
}

.galaxy-orb {
    position: relative;
    width: min(390px, 78vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, .95) 0 2%, rgba(225, 230, 255, .8) 3%, transparent 8%),
        radial-gradient(ellipse at center, rgba(160, 170, 255, .55) 0 10%, transparent 34%),
        conic-gradient(from 18deg,
            transparent 0deg,
            rgba(70, 95, 220, .05) 36deg,
            rgba(210, 220, 255, .65) 72deg,
            rgba(120, 145, 255, .2) 104deg,
            transparent 142deg,
            rgba(255, 255, 255, .45) 185deg,
            rgba(110, 130, 255, .18) 222deg,
            transparent 300deg,
            rgba(210, 220, 255, .55) 330deg,
            transparent 360deg);
    filter:
        blur(.2px) drop-shadow(0 0 28px rgba(120, 145, 255, .35)) drop-shadow(0 0 70px rgba(80, 110, 255, .22));
    transform: rotate(-15deg);
    animation: galaxyRotate 42s linear infinite;
}

.galaxy-orb::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 1) 0 1.5%, transparent 3%),
        radial-gradient(circle at 42% 47%, rgba(255, 255, 255, .8) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 54%, rgba(180, 195, 255, .85) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 58%, rgba(255, 255, 255, .65) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 43%, rgba(255, 255, 255, .55) 0 1px, transparent 2px);
    opacity: .9;
}

.galaxy-orb::after {
    content: "";
    position: absolute;
    left: -18%;
    right: -18%;
    top: 47%;
    height: 18%;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), rgba(200, 210, 255, .7), rgba(130, 155, 255, .24), transparent);
    transform: rotate(-9deg);
    filter: blur(4px);
    opacity: .9;
}

.galaxy-core {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #ffffff 0 8%, #dfe5ff 18%, rgba(150, 170, 255, .55) 42%, transparent 70%);
    box-shadow:
        0 0 18px rgba(255, 255, 255, .8),
        0 0 55px rgba(130, 155, 255, .55),
        0 0 110px rgba(70, 95, 220, .35);
    animation: corePulse 4s ease-in-out infinite;
}

@keyframes galaxyRotate {
    to {
        transform: rotate(345deg);
    }
}

@keyframes corePulse {
    0%,
    100% {
        transform: scale(1);
        opacity: .95;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes starsDrift {
    to {
        background-position: 300px 220px, 420px 360px;
    }
}

/* SERIES CARD */
.series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.series-card {
    min-height: 320px;
    padding: 32px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 80% 20%, rgba(120, 145, 255, .18), transparent 38%),
        linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.series-card h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    letter-spacing: 1px;
}

.series-card p {
    color: #c8cad2;
    margin: 12px 0 24px;
}

/* BOTTLE */
.bottle {
    width: 190px;
    height: 340px;
    border-radius: 28px 28px 42px 42px;
    background: linear-gradient(145deg, #141722, #05060a);
    border: 1px solid rgba(255, 255, 255, .25);
    position: relative;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, .07), 0 30px 80px rgba(0, 0, 0, .65);
}

.cap {
    width: 120px;
    height: 72px;
    background: #020205;
    border-radius: 14px 14px 6px 6px;
    position: absolute;
    top: -78px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .15);
}

.label {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 90px;
    height: 150px;
    border: 1px solid #c9c9c9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    background: rgba(255, 255, 255, .03);
}

.label strong {
    font-family: 'Lexend Deca', Arial, Helvetica, sans-serif;
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.label span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* SECTION */
section {
    padding: 90px 0;
}

.section-title {
    font-size: clamp(32px, 4vw, 52px);
    margin-bottom: 18px;
    letter-spacing: -1px;
}

.section-desc {
    color: #c8cad2;
    max-width: 760px;
    font-size: 18px;
    margin-bottom: 44px;
}

.features,
.notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature,
.note-box,
.detail-card {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    background: rgba(255, 255, 255, .04);
}

.feature p,
.note-box p,
.detail-card li {
    color: #c8cad2;
}

.note-box small {
    color: #aeb3c5;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.note-box h3 {
    margin: 12px 0;
    font-size: 24px;
}

.details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.detail-card ul {
    list-style: none;
}

.detail-card li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.detail-card li:last-child {
    border-bottom: none;
}

/* FINAL CTA */
.final-cta {
    text-align: center;
    padding: 90px 24px;
    border-radius: 36px;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .12), transparent 55%),
        linear-gradient(135deg, #11162b, #05070f);
    border: 1px solid rgba(255, 255, 255, .1);
}

.final-cta h2 {
    font-size: clamp(34px, 5vw, 58px);
    margin-bottom: 18px;
}

.final-cta p {
    color: #d5d7df;
    margin-bottom: 30px;
    font-size: 18px;
}

/* FOOTER */
footer {
    padding: 34px 0;
    text-align: center;
    color: #8d93a6;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* GALAXY CANVAS */
.galaxy-stage {
    position: relative;
    cursor: grab;
    background:
        radial-gradient(circle at center, rgba(80, 100, 255, .16), transparent 34%),
        linear-gradient(160deg, #060814, #02030a 75%);
}

.galaxy-stage:active {
    cursor: grabbing;
}

#galaxyCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.galaxy-caption {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 2;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .24);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}

.galaxy-caption span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
}

.galaxy-caption small {
    display: block;
    color: #b9bed4;
    font-size: 11px;
    margin-top: 1px;
}

/* RESPONSIVE */
@media (max-width: 860px) {
    .home-hero-content {
        padding: 56px 0;
    }

    .nav {
        gap: 12px;
    }

    .logo img {
        height: 28px;
    }

    .hero {
        min-height: auto;
    }

    .hero-grid,
    .details,
    .series-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        gap: 34px;
    }

    .features,
    .notes {
        grid-template-columns: 1fr;
    }

    .product-card,
    .series-visual {
        min-height: 430px;
    }

    .product-photo-card {
        height: 430px;
        min-height: unset;
    }

    .product-photo {
        width: 100%;
        height: 100%;
        min-height: unset;
        object-fit: cover;
        object-position: center;
    }

    .bottle {
        width: 160px;
        height: 290px;
    }

    section {
        padding: 64px 0;
    }

    .series-showcase {
        padding: 50px 0 10px;
    }

    .series-showcase-header {
        text-align: left;
        margin-bottom: 24px;
    }

    .series-showcase-card {
        border-radius: 28px;
    }

    .series-showcase-card img {
        aspect-ratio: 4 / 5;
        object-position: center;
    }
}

/* MOBILE MENU - TARUH PALING BAWAH SUPAYA TIDAK KETIMPA */
@media (max-width: 768px) {
    header {
        z-index: 1000;
    }

    .nav {
        height: 68px;
    }

    .menu {
        display: none !important;
    }

    .burger {
        display: block;
        flex-shrink: 0;
    }

    .mobile-menu {
        display: none;
        padding: 10px 4%;
        background: rgba(5, 7, 15, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-menu.active {
        display: block;
    }

    .mobile-menu a {
        display: block;
        padding: 16px 0;
        font-size: 15px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.88);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-menu a:last-child {
        border-bottom: 0;
    }
}