:root {
      --gold: #c9a84c;
      --gold-light: #e8c97e;
      --gold-dark: #8a6a1f;
      --cream: #fdf6e9;
      --dark: #0d0b08;
      --dark-2: #1a1610;
      --dark-3: #2a2318;
    }

    * {
      box-sizing: border-box;
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--dark);
      color: var(--cream);
      font-family: 'DM Sans', sans-serif;
      overflow-x: hidden;
    }

    /* Grain overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 999;
      opacity: 0.3;
    }

    .font-display {
      font-family: 'Playfair Display', serif;
    }

    /* Gold gradient text */
    .text-gold-gradient {
      background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Hero section */
    .hero-bg {
      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 76, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
        var(--dark);
    }

    /* Bottle float animation */
    @keyframes floatY {

      0%,
      100% {
        transform: translateY(0px) rotate(-2deg);
      }

      50% {
        transform: translateY(-18px) rotate(2deg);
      }
    }

    @keyframes floatY2 {

      0%,
      100% {
        transform: translateY(-8px) rotate(1deg);
      }

      50% {
        transform: translateY(10px) rotate(-1deg);
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% center;
      }

      100% {
        background-position: 200% center;
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes pulse-gold {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4);
      }

      50% {
        box-shadow: 0 0 0 12px rgba(201, 168, 76, 0);
      }
    }

    .float-1 {
      animation: floatY 6s ease-in-out infinite;
    }

    .float-2 {
      animation: floatY2 7s ease-in-out infinite;
    }

    .animate-fade-up {
      animation: fadeUp 0.8s ease forwards;
      opacity: 0;
    }

    .delay-1 {
      animation-delay: 0.1s;
    }

    .delay-2 {
      animation-delay: 0.2s;
    }

    .delay-3 {
      animation-delay: 0.3s;
    }

    .delay-4 {
      animation-delay: 0.4s;
    }

    .delay-5 {
      animation-delay: 0.5s;
    }

    .delay-6 {
      animation-delay: 0.6s;
    }

    /* Gold divider line */
    .gold-line {
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      height: 1px;
    }

    /* Package card */
    .pkg-card {
      background: linear-gradient(135deg, rgba(201, 168, 76, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
      border: 1px solid rgba(201, 168, 76, 0.2);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .pkg-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(201, 168, 76, 0.12) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
      z-index: 0;
    }

    .pkg-card>* {
      position: relative;
      z-index: 1;
    }

    .pkg-card:hover {
      border-color: var(--gold);
      transform: translateY(-6px);
    }

    .pkg-card:hover::before {
      opacity: 1;
    }

    .pkg-card.featured {
      border-color: var(--gold);
      background: linear-gradient(135deg, rgba(201, 168, 76, 0.15) 0%, rgba(201, 168, 76, 0.05) 100%);
    }

    .bottle-card {
      min-height: 100%;
    }

    .bottle-image-wrap {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(201, 168, 76, 0.2);
      background: rgba(255, 255, 255, 0.03);
    }

    .bottle-image {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
    }

    .bottle-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(253, 246, 233, 0.45);
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* WA button */
    .wa-btn {
      background: linear-gradient(135deg, #25D366, #128C7E);
      transition: all 0.3s ease;
      animation: pulse-gold 2.5s infinite;
    }

    .wa-btn:hover {
      background: linear-gradient(135deg, #2de072, #16a086);
      transform: scale(1.04);
      animation: none;
      box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
    }

    .gold-btn {
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      color: var(--dark);
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .gold-btn:hover {
      background: linear-gradient(135deg, #f5d98a, var(--gold-light));
      transform: scale(1.03);
      box-shadow: 0 8px 30px rgba(201, 168, 76, 0.4);
    }

    /* Step circle */
    .step-circle {
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--dark);
      flex-shrink: 0;
    }

    /* Scent badge */
    .scent-badge {
      background: rgba(201, 168, 76, 0.1);
      border: 1px solid rgba(201, 168, 76, 0.25);
      transition: all 0.25s ease;
      cursor: default;
    }

    .scent-badge:hover {
      background: rgba(201, 168, 76, 0.2);
      border-color: var(--gold);
      transform: scale(1.05);
    }

    /* Quality card */
    .quality-card {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(201, 168, 76, 0.05));
      border: 1px solid rgba(255, 255, 255, 0.06);
      transition: all 0.3s ease;
    }

    .quality-card:hover {
      border-color: rgba(201, 168, 76, 0.4);
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(201, 168, 76, 0.1));
    }

    /* Sticky CTA */
    .sticky-cta {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 100;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: var(--dark-2);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--gold-dark);
      border-radius: 3px;
    }

    /* Nav glass */
    nav {
      background: rgba(13, 11, 8, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(201, 168, 76, 0.12);
    }

    /* Accordion */
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    .faq-content.open {
      max-height: 400px;
    }

    .faq-icon {
      transition: transform 0.3s ease;
    }

    .faq-icon.open {
      transform: rotate(45deg);
    }

    /* Section heading */
    .section-label {
      letter-spacing: 0.25em;
      text-transform: uppercase;
      font-size: 0.7rem;
      color: var(--gold);
    }

    /* Bottle SVG illustration */
    .bottle-svg-wrap {
      filter: drop-shadow(0 20px 40px rgba(201, 168, 76, 0.25));
    }

    @media (max-width: 768px) {
      .sticky-cta {
        bottom: 16px;
        right: 16px;
      }
    }

    .type-btn {
      color: rgba(253, 246, 233, 0.5);
    }

    .type-btn.active-type {
      background: var(--gold);
      color: var(--dark);
      font-weight: 600;
    }
    
    

/* Styling untuk container agar teks putih terlihat jelas */
.container-teks {
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.12em; /* Mengikuti jarak huruf dari kode Anda sebelumnya */
}

/* Styling untuk warna merah */
.merah {
    color: #e3000f; /* Kode warna merah bendera */
}

/* Styling untuk warna putih */
.putih {
    color: #ffffff;
}