/* HACK GOOGLE TRANSLATE — semua tampilan bawaan Google (banner, widget, tooltip saat hover, spinner, highlight) disembunyikan */
      iframe.goog-te-banner-frame, .goog-te-banner-frame,
      iframe.skiptranslate, body > .skiptranslate,
      .goog-te-balloon-frame, .goog-te-menu-frame, .goog-te-spinner-pos, .goog-logo-link, .goog-te-gadget-icon,
      #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover,
      [class^="VIpgJd-"], [class*=" VIpgJd-"] {
          display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
      }
      body, html { top: 0px !important; position: static !important; margin-top: 0px !important; }
      #google_translate_element { display: none !important; }
      .goog-text-highlight { background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: inherit !important; text-shadow: none !important; }
      /* Teks hasil terjemahan tidak boleh berubah tampilan saat di-hover */
      font[style*="vertical-align"], font[style*="vertical-align"]:hover { background: none !important; box-shadow: none !important; cursor: inherit; }

      /* Halaman tanpa tirai transisi: sembunyikan sebentar sampai terjemahan masuk (tidak ada kedipan teks Indonesia) */
      body[data-transition="off"] { transition: opacity .35s ease; }
      html.bp-translating body[data-transition="off"] { opacity: 0; }

      :root {
          --paper: #F6EDD9;
          --paper-dark: #EFE2C4;
          --ink: #2C2418;
          --clay: #8B2E2E;
          --clay-hover: #732424;
          --palm: #1F5C4E;
          --gold: #C9A24B;
          --text-soft: #6B5F49;
          --line: rgba(44,36,24,0.14);
          --font-main: 'Plus Jakarta Sans', sans-serif;
          --font-bali: 'Noto Sans Balinese', sans-serif;
          --shadow: 0 14px 34px rgba(44,36,24,0.10);
          --shadow-hover: 0 22px 46px rgba(44,36,24,0.16);
      }

      * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); scroll-behavior: smooth; }
      body {
          background-color: var(--paper);
          color: var(--ink);
          overflow-x: hidden;
          background-image:
              radial-gradient(circle at 8% 12%, rgba(139,46,46,0.05) 0, transparent 40%),
              radial-gradient(circle at 92% 30%, rgba(31,92,78,0.05) 0, transparent 45%),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      }

      .hidden { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
      .show { opacity: 1; transform: translateY(0); }
      .delay-1 { transition-delay: 0.1s; }
      .delay-2 { transition-delay: 0.2s; }
      .delay-3 { transition-delay: 0.3s; }
      .delay-4 { transition-delay: 0.4s; }
      .delay-5 { transition-delay: 0.5s; }

      /* Aksara Bali watermark utility */
      .bali-mark {
          font-family: var(--font-bali);
          color: var(--gold);
          opacity: 0.35;
          user-select: none;
          pointer-events: none;
          line-height: 1;
      }

      /* HEADER */
      header {
          position: fixed; top: 0; width: 100%; padding: 18px 6%;
          display: flex; justify-content: space-between; align-items: center;
          z-index: 1000; transition: all 0.35s cubic-bezier(.4,0,.2,1);
          background: rgba(44, 36, 24, 0.22); backdrop-filter: blur(14px);
          border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      header.scrolled {
          background: rgba(246, 237, 217, 0.96);
          box-shadow: 0 4px 24px rgba(44,36,24,0.08);
          padding: 13px 6%;
          border-bottom-color: var(--line);
      }
      header.scrolled .logo, header.scrolled .nav-links a { color: var(--ink); }
      header.scrolled .action-btn { color: var(--ink); border-color: var(--line); background: #fff; }
      header.scrolled .logo .bali-mark { opacity: 0.55; }

      .logo { font-size: 1.55rem; font-weight: 800; color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: 9px; letter-spacing: -0.5px; }
      .logo .bali-mark { font-size: 1.3rem; }

      .nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }
      .nav-links a { color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.35s cubic-bezier(.4,0,.2,1); position: relative; padding-bottom: 4px; }
      .nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .35s cubic-bezier(.4,0,.2,1); }
      .nav-links a:hover { color: var(--gold); }
      .nav-links a:hover::after, .nav-links a.active::after { right:0; }
      .nav-links a.active { color: var(--gold); }
      header.scrolled .nav-links a.active { color: var(--clay); }
      header.scrolled .nav-links a::after { background: var(--clay); }

      .nav-actions { display: flex; align-items: center; gap: 12px; }
      .action-btn {
          background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
          color: #fff; width: 40px; height: 40px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          cursor: pointer; position: relative; transition: all 0.3s cubic-bezier(.4,0,.2,1); text-decoration: none;
      }
      .action-btn:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
      .badge-counter {
          position: absolute; top: -3px; right: -3px; background: var(--clay);
          color: #fff; font-size: 0.65rem; width: 18px; height: 18px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center; font-weight: 700;
      }

      .lang-picker { position: relative; }
      .lang-btn {
          background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
          color: #fff; padding: 8px 16px; border-radius: 30px; cursor: pointer;
          display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s cubic-bezier(.4,0,.2,1);
      }
      header.scrolled .lang-btn { background: #fff; border-color: var(--line); color: var(--ink); }
      .lang-btn:hover { background: var(--clay); color: #fff; border-color: var(--clay); }

      .lang-dropdown {
          position: absolute; top: 130%; right: 0; background: #fff; border-radius: 14px;
          box-shadow: 0 15px 35px rgba(44,36,24,0.18); width: 260px; display: flex; flex-direction: column; overflow: hidden;
          z-index: 1001; opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98);
          transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
      }
      .lang-picker.active .lang-dropdown { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
      .lang-search-box { padding: 12px; border-bottom: 1px solid var(--line); background: #fff; }
      .lang-search-box input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; outline: none; font-size: 0.9rem; transition: border-color .25s ease, box-shadow .25s ease; }
      .lang-search-box input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(139,46,46,.12); }
      .lang-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
      .lang-list span { padding: 10px 16px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; transition: background .22s ease, color .22s ease, padding-left .22s ease; }
      .lang-list span:hover { background: var(--paper); color: var(--clay); padding-left: 20px; }
      .lang-list span.active { color: var(--clay); font-weight: 700; }

      /* HERO */
      section.hero {
          position: relative; height: 100vh; min-height: 640px; display: flex; align-items: center;
          justify-content: center; text-align: center; padding: 0 20px; overflow: hidden;
      }
      .hero-video {
          position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%;
          width: auto; height: auto; transform: translate(-50%, -50%);
          object-fit: cover; z-index: 0; filter: brightness(48%) saturate(1.08);
      }
      #bali-canvas {
          position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
      }
      .hero-overlay {
          position: absolute; top: 0; left: 0; width: 100%; height: 100%;
          background: linear-gradient(180deg, rgba(44,36,24,0.25) 0%, rgba(44,36,24,0.6) 75%, var(--paper) 100%);
          z-index: 2;
      }
      .hero-content { position: relative; z-index: 3; max-width: 880px; color: #fff; }
      .hero-eyebrow {
          font-family: var(--font-bali); font-size: 1.6rem; color: var(--gold); opacity: 0.85; margin-bottom: 6px;
      }
      .hero h1 { font-size: 3.6rem; font-weight: 800; margin-bottom: 18px; line-height: 1.14; letter-spacing: -1px; }
      .hero p { font-size: 1.15rem; margin-bottom: 32px; font-weight: 400; opacity: 0.92; line-height: 1.6; max-width: 620px; margin-left: auto; margin-right: auto; }

      .btn-primary {
          background: var(--clay); color: #fff; padding: 15px 34px; border-radius: 6px;
          text-decoration: none; font-size: 1.02rem; font-weight: 700; display: inline-block;
          border: none; cursor: pointer; transition: all 0.3s cubic-bezier(.4,0,.2,1); box-shadow: 0 10px 26px rgba(139,46,46,0.35);
          position: relative;
      }
      .btn-primary:hover { background: var(--clay-hover); transform: translateY(-3px); }

      .scroll-cue {
          position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3;
          color: #fff; opacity: 0.7; font-size: 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 6px;
      }
      .scroll-cue i { animation: bob 1.8s ease-in-out infinite; }
      @keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }

      /* torn paper divider between sections */
      .torn-divider {
          position: relative; height: 60px; margin-top: -1px; z-index: 5; pointer-events: none;
      }
      .torn-divider svg { width: 100%; height: 100%; display: block; }

      /* STATS */
      .stats-bar {
          background: #fff; padding: 32px 6%; margin-top: -60px; position: relative; z-index: 10;
          border-radius: 4px; box-shadow: var(--shadow); width: 88%; margin-left: auto; margin-right: auto;
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
          border: 1px solid var(--line);
      }
      .stat-item { position: relative; }
      .stat-item:not(:last-child)::after {
          content: ''; position: absolute; right: -10px; top: 10%; height: 80%; width: 1px; background: var(--line);
      }
      .stat-item h3 { font-size: 2.1rem; font-weight: 800; color: var(--clay); margin-bottom: 4px; }
      .stat-item p { color: var(--text-soft); font-size: 0.92rem; font-weight: 600; }

      /* SECTIONS */
      section { padding: 100px 6% 70px; position: relative; }
      .section-header { margin-bottom: 50px; }
      .section-header.center { text-align: center; }
      .section-subtitle {
          color: var(--clay); font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
      }
      .section-header.center .section-subtitle { justify-content: center; }
      .section-subtitle .bali-mark { font-size: 1.1rem; }
      .section-header h2 { font-size: 2.4rem; color: var(--ink); font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }

      /* CATEGORY FILTERS */
      .category-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
      .cat-btn { padding: 9px 20px; background: #fff; border: 1px solid var(--line); border-radius: 30px; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: 0.3s cubic-bezier(.4,0,.2,1); color: var(--ink); }
      .cat-btn.active, .cat-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

      /* CARDS */
      .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 28px; }
      .card { background: #fff; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: all 0.35s cubic-bezier(.4,0,.2,1); position: relative; }
      .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
      .card-img { height: 230px; position: relative; overflow: hidden; }
      .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
      .card:hover .card-img img { transform: scale(1.06); }
      .card-rating { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.94); padding: 5px 12px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 5px; }
      .card-rating i { color: var(--gold); }
      .card-tag {
          position: absolute; top: 14px; right: 14px; background: var(--clay); color: #fff;
          font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 20px;
      }

      .card-body { padding: 24px; }
      .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.83rem; color: var(--text-soft); margin-bottom: 10px; font-weight: 600; }
      .card-body h4 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
      .card-body p { color: var(--text-soft); font-size: 0.9rem; line-height: 1.6; margin-bottom: 18px; }

      .card-footer-action { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 16px; gap: 10px; }
      .price-box span { display: block; font-size: 0.73rem; color: var(--text-soft); font-weight: 600; }
      .price-box strong { font-size: 1.12rem; color: var(--ink); font-weight: 800; }

      .card-footer-action .card-actions { display: flex; align-items: center; gap: 8px; }
      .btn-add-cart, .btn-detail-link {
          background: var(--paper); color: var(--ink); border: 1px solid var(--line);
          padding: 10px 18px; border-radius: 25px; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: 0.3s cubic-bezier(.4,0,.2,1);
      }
      .btn-add-cart:hover, .btn-detail-link:hover { background: var(--clay); color: #fff; border-color: var(--clay); }
      .btn-detail-link { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
      .btn-cart-round {
          width: 42px; height: 42px; min-width: 42px; border-radius: 50%;
          background: var(--clay); color: #fff; border: none; cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
          box-shadow: 0 6px 14px rgba(139,46,46,.25); transition: 0.3s cubic-bezier(.4,0,.2,1);
      }
      .btn-cart-round:hover { background: var(--gold); transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 18px rgba(201,162,75,.3); }

      /* ABOUT */
      .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
      .about-img-wrap {
          border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-hover); position: relative;
          transform: rotate(-1.5deg);
      }
      .about-img-wrap::after {
          content: ''; position: absolute; inset: 0; border: 10px solid #fff; box-shadow: 0 0 0 1px var(--line);
      }
      .about-img-wrap img { width: 100%; height: auto; display: block; }
      .about-text .bali-mark { font-size: 3.5rem; display: block; margin-bottom: 10px; opacity: 0.5; }
      .about-text h3 { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; line-height: 1.25; }
      .about-text p { color: var(--text-soft); line-height: 1.8; margin-bottom: 20px; font-size: 1.02rem; }

      /* GALLERY - fun scattered layout */
      .gallery-wrap { position: relative; }
      .gallery-grid {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          grid-auto-rows: 130px;
          gap: 16px;
      }
      .gal-item {
          position: relative; overflow: hidden; border-radius: 6px; border: 6px solid #fff;
          box-shadow: var(--shadow); transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0s;
          cursor: pointer;
      }
      .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
      .gal-item:hover { transform: scale(1.04) rotate(0deg) !important; box-shadow: var(--shadow-hover); z-index: 5; }
      .gal-item:hover img { transform: scale(1.1); }
      .gal-item .gal-cap {
          position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 12px 10px;
          background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
          color: #fff; font-size: 0.8rem; font-weight: 700; opacity: 0; transition: opacity 0.3s;
      }
      .gal-item:hover .gal-cap { opacity: 1; }

      .g1 { grid-column: span 2; grid-row: span 2; transform: rotate(-1deg); }
      .g2 { grid-column: span 2; grid-row: span 1; transform: rotate(1.2deg); }
      .g3 { grid-column: span 2; grid-row: span 2; transform: rotate(0.6deg); }
      .g4 { grid-column: span 2; grid-row: span 1; transform: rotate(-1.4deg); }
      .g5 { grid-column: span 2; grid-row: span 1; transform: rotate(1deg); }
      .g6 { grid-column: span 2; grid-row: span 1; transform: rotate(-0.8deg); }
      .g7 { grid-column: span 3; grid-row: span 2; transform: rotate(0.9deg); }
      .g8 { grid-column: span 3; grid-row: span 2; transform: rotate(-1deg); }

      /* SLIDER */
      .slider-wrap { position: relative; max-width: 980px; margin: 0 auto; }
      .slider-track-outer { overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-hover); }
      .slider-track { display: flex; transition: transform 0.55s cubic-bezier(.65,0,.35,1); }
      .slide { min-width: 100%; position: relative; height: 460px; }
      .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .slide-caption {
          position: absolute; bottom: 0; left: 0; right: 0; padding: 34px 40px;
          background: linear-gradient(0deg, rgba(44,36,24,0.85), transparent);
          color: #fff;
      }
      .slide-caption .bali-mark { font-size: 1rem; opacity: 0.75; margin-bottom: 4px; display: block; }
      .slide-caption h4 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
      .slide-caption p { font-size: 0.92rem; opacity: 0.9; max-width: 520px; }

      .slider-nav {
          position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
          border-radius: 50%; background: rgba(255,255,255,0.85); border: none; cursor: pointer;
          display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 1rem;
          transition: 0.3s cubic-bezier(.4,0,.2,1); z-index: 5;
      }
      .slider-nav:hover { background: var(--clay); color: #fff; }
      .slider-prev { left: 16px; }
      .slider-next { right: 16px; }
      .slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
      .slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; transition: 0.3s cubic-bezier(.4,0,.2,1); }
      .slider-dots span.active { background: var(--clay); width: 24px; border-radius: 5px; }

      /* TESTIMONIALS */
      .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
      .testi-card { background: #fff; padding: 28px; border-radius: 4px; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
      .testi-card::before {
          content: '"'; position: absolute; top: 10px; right: 20px; font-size: 3.5rem; color: var(--paper-dark);
          font-family: Georgia, serif; line-height: 1; z-index: 0;
      }
      .testi-stars { color: var(--gold); margin-bottom: 15px; position: relative; z-index: 1; }
      .testi-card p { color: var(--text-soft); font-size: 0.93rem; line-height: 1.7; margin-bottom: 20px; font-style: italic; position: relative; z-index: 1; }
      .testi-author { display: flex; align-items: center; gap: 12px; }
      .testi-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
      .testi-author h5 { font-size: 0.94rem; font-weight: 700; color: var(--ink); }
      .testi-author span { font-size: 0.79rem; color: var(--text-soft); }

      /* FAQ */
      .faq-split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: start; padding: 0 24px; }
      .faq-split-img { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-hover); position: sticky; top: 100px; max-height: 640px; }
      .faq-split-img img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
      .faq-container { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 13px; max-height: 640px; overflow-y: auto; padding-right: 6px; }
      .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
      .faq-question { padding: 19px 24px; font-weight: 700; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 20px; }
      .faq-question i { color: var(--clay); transition: transform 0.3s; flex-shrink: 0; }
      .faq-item.active .faq-question i { transform: rotate(180deg); }
      .faq-answer { padding: 0 24px 20px; color: var(--text-soft); line-height: 1.7; font-size: 0.93rem; display: none; }
      .faq-item.active .faq-answer { display: block; }

      /* FOOTER */
      footer { background: var(--ink); color: #B8AD97; padding: 70px 6% 30px; position: relative; overflow: hidden; }
      footer .bali-mark-bg {
          position: absolute; right: -30px; bottom: -40px; font-size: 12rem; opacity: 0.05; color: var(--gold);
      }
      .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; position: relative; z-index: 1; }
      .footer-col h3 { color: #fff; font-size: 1.55rem; font-weight: 800; margin-bottom: 15px; }
      .footer-col h4 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; }
      .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
      .footer-links a { color: #B8AD97; text-decoration: none; font-weight: 500; transition: 0.3s cubic-bezier(.4,0,.2,1); }
      .footer-links a:hover { color: var(--gold); }
      .footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 25px; font-size: 0.85rem; position: relative; z-index: 1; }

      /* CART & MODAL */
      .cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44,36,24,0.5); z-index: 2000; display: none; opacity: 0; transition: 0.3s cubic-bezier(.4,0,.2,1); }
      .cart-overlay.active { display: block; opacity: 1; }
      .cart-drawer { position: fixed; top: 0; right: -420px; width: 400px; height: 100%; background: #fff; z-index: 2001; transition: right 0.4s ease; display: flex; flex-direction: column; padding: 30px; box-shadow: -10px 0 30px rgba(0,0,0,0.15); }
      .cart-drawer.active { right: 0; }
      .cart-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 15px; }
      .cart-items { flex-grow: 1; overflow-y: auto; padding: 20px 0; }
      .cart-item { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; }
      .cart-item img { width: 65px; height: 65px; border-radius: 8px; object-fit: cover; }
      .cart-footer { border-top: 1px solid var(--line); padding-top: 20px; }

      .modal-auth { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44,36,24,0.6); z-index: 2000; display: none; align-items: center; justify-content: center; }
      .modal-auth.active { display: flex; }
      .auth-card { background: #fff; width: 90%; max-width: 420px; border-radius: 6px; padding: 35px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
      .auth-card h3 { font-size: 1.75rem; font-weight: 800; margin-bottom: 20px; text-align: center; }
      .auth-input { width: 100%; padding: 12px 15px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 15px; outline: none; font-size: 0.95rem; }
      .auth-input:focus { border-color: var(--clay); }

      @media (max-width: 1024px) {
          .stats-bar { grid-template-columns: repeat(2, 1fr); margin-top: -30px; }
          .stat-item:nth-child(2)::after { display: none; }
          .testimonials-grid { grid-template-columns: 1fr; }
          .footer-grid { grid-template-columns: 1fr 1fr; }
          .gallery-grid { grid-template-columns: repeat(4, 1fr); }
          .g7, .g8 { grid-column: span 4; }
      }
      @media (max-width: 768px) {
          .about-grid { grid-template-columns: 1fr; }
          .hero h1 { font-size: 2.5rem; }
          .nav-links { display: none; }
          .footer-grid { grid-template-columns: 1fr; }
          .cart-drawer { width: 100%; right: -100%; }
          .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
          .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8 { grid-column: span 2; grid-row: span 1; transform: none; }
          .slide { height: 320px; }
          section { padding: 70px 6% 50px; }
      }

      /* ===== BALI LOADER ===== */
      body.is-loading { overflow: hidden; }
      #baliLoader {
          position: fixed; inset: 0; z-index: 99999;
          display: grid; place-items: center;
          background:
              radial-gradient(circle at 20% 20%, rgba(201,162,75,.12), transparent 30%),
              radial-gradient(circle at 80% 75%, rgba(31,92,78,.14), transparent 32%),
              var(--paper);
          transition: opacity .9s cubic-bezier(.65,0,.35,1), visibility .9s;
      }
      #baliLoader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
      .loader-scene { position: relative; width: min(330px, 78vw); text-align: center; }
      .loader-orchid { width: 148px; height: 148px; margin: 0 auto 22px; overflow: visible; }
      .orchid-spin { transform-origin: 80px 80px; animation: orchidSpin 6s linear infinite; }
      .orchid-petal {
          transform-origin: 80px 80px;
          animation: orchidBloom 2.6s cubic-bezier(.45,0,.2,1) infinite;
      }
      .orchid-petal.p1 { fill: var(--clay); animation-delay: 0s; }
      .orchid-petal.p2 { fill: var(--gold); animation-delay: .12s; }
      .orchid-petal.p3 { fill: #b8563f; animation-delay: .24s; }
      .orchid-petal.p4 { fill: var(--evergreen,#1f5c4e); animation-delay: .36s; opacity:.92; }
      .orchid-petal.p5 { fill: #d99a4e; animation-delay: .48s; }
      .orchid-core { fill: var(--gold); animation: orchidCorePulse 2.6s ease-in-out infinite; transform-origin: 80px 80px; }
      .loader-title { font-size: 1.08rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
      .loader-subtitle { margin-top: 7px; color: var(--text-soft); font-size: .82rem; }
      .loader-dots { margin-top: 16px; display:flex; justify-content:center; gap:7px; }
      .loader-dots i { width:6px; height:6px; border-radius:50%; background:var(--gold); animation: dotBounce 1.2s ease-in-out infinite; }
      .loader-dots i:nth-child(2){animation-delay:.16s}.loader-dots i:nth-child(3){animation-delay:.32s}
      @keyframes orchidSpin { to { transform: rotate(360deg); } }
      @keyframes orchidBloom {
          0%, 100% { transform: scale(.72); opacity: .55; }
          50% { transform: scale(1); opacity: 1; }
      }
      @keyframes orchidCorePulse {
          0%, 100% { transform: scale(.85); }
          50% { transform: scale(1.25); }
      }
      @keyframes gateFloat { 0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)} }
      @keyframes lotusPulse { 0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.08);opacity:1} }
      @keyframes dotBounce { 0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-5px);opacity:1} }

      /* ===== CONNECTED PAPER / ORGANIC SECTION SYSTEM ===== */
      body {
          background-color: var(--paper);
          background-attachment: fixed;
      }
      main { position: relative; overflow: hidden; }
      section {
          scroll-margin-top: 90px;
          isolation: isolate;
      }
      section:nth-of-type(even) { background-color: rgba(241,243,234,.62) !important; }
      section:nth-of-type(odd) { background-color: rgba(246,237,217,.72); }
      .torn-divider {
          height: 74px; margin: -1px 0 0; overflow: hidden;
          background: transparent; position: relative; z-index: 4;
      }
      .torn-divider::before {
          content:""; position:absolute; left:-5%; top:38%; width:110%; height:1px;
          background: linear-gradient(90deg, transparent, rgba(139,46,46,.18), rgba(201,162,75,.42), rgba(31,92,78,.18), transparent);
      }
      .torn-divider svg { position:relative; z-index:1; filter: drop-shadow(0 -2px 1px rgba(44,36,24,.035)); }
      .paper-divider { height: 88px; position:relative; overflow:hidden; z-index:4; }
      .paper-divider svg { width:100%; height:100%; display:block; }
      .paper-divider .divider-leaf {
          position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-2deg);
          width:50px; height:26px; border-radius:50% 0 50% 0;
          border:1px solid rgba(31,92,78,.25); background:rgba(246,237,217,.9);
          box-shadow: 0 8px 18px rgba(44,36,24,.08);
      }
      .paper-divider .divider-leaf::after {
          content:""; position:absolute; left:50%; top:4px; width:1px; height:18px;
          background:rgba(31,92,78,.28); transform:rotate(35deg);
      }

      /* ===== SECTION HEADERS ===== */
      .section-header { position:relative; padding-top:10px; }
      .section-header::before {
          content:""; position:absolute; left:50%; top:-24px; width:120px; height:1px;
          transform:translateX(-50%);
          background:linear-gradient(90deg, transparent, var(--gold), transparent);
      }
      .section-header .header-ornament {
          display:flex; justify-content:center; align-items:center; gap:14px;
          color:var(--gold); margin-bottom:10px; font-size:1rem;
      }
      .section-header .header-ornament::before,
      .section-header .header-ornament::after {
          content:""; width:42px; height:1px; background:currentColor; opacity:.45;
      }
      .section-header h2 { max-width:800px; margin-left:auto; margin-right:auto; }
      .section-header p.header-lead {
          max-width:650px; margin:12px auto 0; color:var(--text-soft);
          line-height:1.7; font-size:.96rem;
      }

      /* ===== ROUNDED CARDS ===== */
      .stats-bar, .card, .testi-card, .faq-item, .slider-track-outer, .auth-card,
      .cart-drawer, .about-img-wrap { border-radius: 22px; }
      .card { border-radius:24px; }
      .card-img { border-radius:24px 24px 0 0; }
      .card:hover { transform:translateY(-8px) rotate(.15deg); }
      .testi-card { border-radius:22px; }
      .faq-item { border-radius:18px; }
      .btn-primary { border-radius: 999px; }
      .btn-add-cart { border-radius:999px; }

      /* ===== MOVING PHOTO RIBBON ===== */
      .photo-ribbon-wrap {
          overflow:hidden; margin-top:55px; padding:8px 0 18px;
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
      }
      .photo-ribbon { display:flex; width:max-content; gap:16px; animation: ribbonMove 34s linear infinite; }
      .photo-ribbon:hover { animation-play-state:paused; }
      .ribbon-photo {
          width:190px; height:122px; flex:0 0 auto; border-radius:20px; overflow:hidden;
          border:6px solid rgba(255,255,255,.92); box-shadow:var(--shadow);
          transform:rotate(var(--r)); background:#fff;
      }
      .ribbon-photo img { width:100%; height:100%; object-fit:cover; display:block; }
      @keyframes ribbonMove { to { transform:translateX(-50%); } }

      /* ===== GALLERY PREVIEW ===== */
      .gallery-grid { gap:20px; }
      .gal-item { border-radius:22px; border:7px solid #fff; }
      .gal-item::after {
          content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900;
          position:absolute; top:14px; right:14px; width:36px; height:36px;
          display:grid; place-items:center; border-radius:50%; color:#fff;
          background:rgba(44,36,24,.5); backdrop-filter:blur(8px);
          opacity:0; transform:translateY(-5px); transition:.35s ease;
      }
      .gal-item:hover::after { opacity:1; transform:translateY(0); }
      .gallery-lightbox {
          position:fixed; inset:0; z-index:3000; background:rgba(22,17,12,.84);
          display:flex; align-items:center; justify-content:center; padding:30px;
          opacity:0; visibility:hidden; transition:.35s ease;
          backdrop-filter:blur(12px);
      }
      .gallery-lightbox.active { opacity:1; visibility:visible; }
      .lightbox-inner { width:min(1050px,94vw); position:relative; }
      .lightbox-media {
          width:100%; max-height:78vh; object-fit:contain; display:block;
          border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.4);
          background:#111;
      }
      .lightbox-caption { color:#fff; text-align:center; margin-top:14px; font-weight:700; }
      .lightbox-close,.lightbox-prev,.lightbox-next {
          position:absolute; z-index:2; border:0; cursor:pointer; color:#fff;
          background:rgba(255,255,255,.13); backdrop-filter:blur(10px);
          width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
          transition:.25s ease;
      }
      .lightbox-close { right:-10px; top:-10px; }
      .lightbox-prev { left:-62px; top:50%; transform:translateY(-50%); }
      .lightbox-next { right:-62px; top:50%; transform:translateY(-50%); }
      .lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { background:var(--clay); transform:translateY(-50%) scale(1.05); }
      .lightbox-close:hover { transform:scale(1.05); }

      /* ===== VIDEO STORY ===== */
      .story-video {
          max-width:1000px; margin:58px auto 0; position:relative; overflow:hidden;
          border-radius:26px; box-shadow:var(--shadow-hover); border:7px solid #fff;
      }
      .story-video video { width:100%; aspect-ratio:16/8; display:block; object-fit:cover; }
      .story-video-badge {
          position:absolute; left:22px; top:22px; padding:9px 14px; border-radius:999px;
          color:#fff; background:rgba(44,36,24,.55); backdrop-filter:blur(10px);
          font-size:.78rem; font-weight:800; letter-spacing:.04em;
      }
      .story-video-copy {
          position:absolute; left:0; right:0; bottom:0; padding:65px 30px 25px;
          color:#fff; background:linear-gradient(transparent,rgba(24,18,12,.82));
      }
      .story-video-copy h3 { font-size:1.55rem; margin-bottom:4px; }
      .story-video-copy p { font-size:.9rem; opacity:.88; }

      /* ===== FLOATING BALI MOTIFS ===== */
      .section-motif {
          position:absolute; pointer-events:none; z-index:-1; opacity:.16; color:var(--gold);
          font-size:5rem; line-height:1; filter:drop-shadow(0 8px 12px rgba(44,36,24,.05));
          animation: motifDrift 7s ease-in-out infinite;
      }
      .motif-left { left:2%; top:12%; transform:rotate(-8deg); }
      .motif-right { right:2%; bottom:10%; transform:rotate(9deg); animation-delay:-2.5s; }
      @keyframes motifDrift { 0%,100%{translate:0 0}50%{translate:0 -9px} }

      /* ===== MOBILE ===== */
      @media (max-width: 768px) {
          .paper-divider { height:58px; }
          .torn-divider { height:58px; }
          .ribbon-photo { width:145px; height:96px; border-width:5px; border-radius:16px; }
          .story-video { border-radius:20px; border-width:5px; }
          .story-video video { aspect-ratio:16/10; }
          .story-video-copy { padding:48px 18px 18px; }
          .story-video-copy h3 { font-size:1.15rem; }
          .lightbox-prev { left:8px; }
          .lightbox-next { right:8px; }
          .lightbox-close { right:8px; top:8px; }
      }
      @media (prefers-reduced-motion: reduce) {
          *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
      }


      /* =========================================================
         FINAL UI/UX POLISH — CONNECTED PAPER SYSTEM
         ========================================================= */

      /* One visual canvas: no harsh color seams between sections. */
      main {
          position: relative;
          overflow: clip;
          background: var(--paper);
      }

      main > section {
          background-color: var(--paper) !important;
          background-image:
              radial-gradient(circle at 8% 12%, rgba(139,46,46,.025), transparent 34%),
              radial-gradient(circle at 92% 72%, rgba(31,92,78,.025), transparent 38%);
      }

      /* Keep the intentionally cooler editorial sections subtle, not a hard block. */
      main > #packages,
      main > #gallery,
      main > #faq {
          background-color: #F2F3EA !important;
          background-image:
              radial-gradient(circle at 12% 18%, rgba(31,92,78,.028), transparent 34%),
              radial-gradient(circle at 88% 78%, rgba(201,162,75,.035), transparent 38%);
      }

      /* The divider itself must never introduce a third/darker color. */
      .paper-divider {
          height: 72px;
          margin: 0;
          position: relative;
          overflow: hidden;
          z-index: 8;
          color: var(--paper);
          background: var(--paper);
      }

      .paper-divider svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: block;
          overflow: visible;
      }

      .paper-divider svg path {
          fill: var(--paper) !important;
      }

      /* Divider gets the NEXT section's paper tone underneath the organic edge. */
      .paper-divider:has(+ #packages),
      .paper-divider:has(+ #gallery),
      .paper-divider:has(+ #faq) {
          background: #F2F3EA;
      }

      .paper-divider:has(+ #packages) svg path,
      .paper-divider:has(+ #gallery) svg path,
      .paper-divider:has(+ #faq) svg path {
          fill: #F2F3EA !important;
      }

      /* Divider from hero into stats stays completely neutral. */
      .paper-divider:first-of-type {
          background: var(--paper);
      }

      .paper-divider .divider-leaf {
          z-index: 5;
          width: 44px;
          height: 24px;
          top: 48%;
          border-color: rgba(31,92,78,.18);
          background: var(--paper);
          box-shadow: 0 7px 15px rgba(44,36,24,.06);
      }

      /* Soft "paper fiber" line instead of a hard SVG edge. */
      .paper-divider::after {
          content: "";
          position: absolute;
          left: 8%;
          right: 8%;
          top: 39%;
          height: 1px;
          background: linear-gradient(90deg,
              transparent,
              rgba(201,162,75,.22) 22%,
              rgba(139,46,46,.12) 50%,
              rgba(31,92,78,.18) 78%,
              transparent);
          opacity: .8;
      }

      /* Fix the stats overlap: hierarchy is cleaner and nothing collides. */
      .stats-bar {
          width: min(1120px, 88%);
          margin: -22px auto 0;
          position: relative;
          z-index: 20;
          border-radius: 24px;
      }

      /* Consistent section rhythm. */
      main > section {
          padding-top: 108px;
          padding-bottom: 82px;
      }

      main > section:first-of-type:not(.hero) {
          padding-top: 92px;
      }

      .section-header {
          margin-bottom: 54px;
      }

      .section-header h2 {
          text-wrap: balance;
      }

      .section-header p.header-lead {
          text-wrap: pretty;
      }

      /* Remove accidental visual collisions from floating ornaments. */
      .section-motif {
          z-index: 0;
          opacity: .085;
          pointer-events: none;
      }

      .section-header,
      .about-grid,
      .cards-grid,
      .category-filters,
      .slider-wrap,
      .gallery-wrap,
      .testimonials-grid,
      .faq-container {
          position: relative;
          z-index: 2;
      }

      /* Cards: premium but still light, with stable hover geometry. */
      .card,
      .testi-card,
      .faq-item,
      .slider-track-outer,
      .about-img-wrap {
          border-radius: 24px;
      }

      .card {
          transform: translateZ(0);
      }

      .card:hover {
          transform: translateY(-7px);
      }

      .card-img {
          border-radius: 24px 24px 0 0;
      }

      .about-img-wrap {
          transform: rotate(-1deg);
      }

      /* Interlude content must visually belong to the same paper canvas. */
      .photo-ribbon-wrap {
          width: 100%;
          margin: 0;
          padding: 28px 0 34px;
          background: var(--paper);
          position: relative;
          z-index: 2;
      }

      .photo-ribbon-wrap::before,
      .photo-ribbon-wrap::after {
          content: "";
          display: block;
          height: 1px;
          width: min(1100px, 86%);
          margin: 0 auto 24px;
          background: linear-gradient(90deg, transparent, rgba(44,36,24,.10), transparent);
      }

      .photo-ribbon-wrap::after {
          margin: 28px auto 0;
      }

      .story-video {
          width: min(1000px, 88%);
          margin: 30px auto 70px !important;
          position: relative;
          z-index: 3;
      }

      /* Gallery gets breathing room after the moving ribbon/video. */
      #gallery {
          padding-top: 104px !important;
      }

      /* Gallery preview: no clipping/overlap between rotated tiles. */
      .gallery-wrap {
          padding: 8px;
      }

      .gal-item {
          border-radius: 22px;
          transform-origin: center;
      }

      /* Lightbox buttons are always reachable on smaller screens. */
      .lightbox-inner {
          width: min(1050px, 92vw);
      }

      /* Footer separation is intentional and elegant. */
      footer {
          margin-top: 0;
          border-top: 1px solid rgba(201,162,75,.12);
      }

      /* Navbar doesn't fight the page content. */
      header {
          transition:
              background .35s ease,
              box-shadow .35s ease,
              padding .35s ease,
              backdrop-filter .35s ease;
      }

      /* Better keyboard/focus UX. */
      button:focus-visible,
      a:focus-visible,
      input:focus-visible,
      .gal-item:focus-visible {
          outline: 3px solid rgba(201,162,75,.55);
          outline-offset: 3px;
      }

      @media (max-width: 768px) {
          main > section {
              padding-top: 82px;
              padding-bottom: 62px;
          }

          main > section:first-of-type:not(.hero) {
              padding-top: 74px;
          }

          .paper-divider {
              height: 54px;
          }

          .paper-divider .divider-leaf {
              width: 38px;
              height: 21px;
          }

          .stats-bar {
              width: 90%;
              margin-top: -12px;
              padding: 24px 16px;
              border-radius: 20px;
          }

          .photo-ribbon-wrap {
              padding: 20px 0 24px;
          }

          .story-video {
              width: 90%;
              margin-top: 24px !important;
              margin-bottom: 52px !important;
          }

          #gallery {
              padding-top: 78px !important;
          }
      }

    

/* ===== SITE STRUCTURE / RESPONSIVE NAV ===== */
body { min-width: 320px; }
.site-mobile-toggle { display:none; }
.mobile-sidebar { position:fixed; inset:0; z-index:5000; pointer-events:none; }
.mobile-sidebar-backdrop { position:absolute; inset:0; background:rgba(25,19,13,.58); opacity:0; transition:.3s ease; backdrop-filter:blur(5px); }
.mobile-sidebar-panel { position:absolute; top:0; right:0; width:min(360px,88vw); height:100%; background:var(--paper); padding:28px 22px; transform:translateX(105%); transition:transform .38s cubic-bezier(.65,0,.35,1); box-shadow:-18px 0 45px rgba(0,0,0,.18); overflow-y:auto; }
.mobile-sidebar.open { pointer-events:auto; }
.mobile-sidebar.open .mobile-sidebar-backdrop { opacity:1; }
.mobile-sidebar.open .mobile-sidebar-panel { transform:translateX(0); }
.mobile-sidebar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.mobile-sidebar-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.mobile-sidebar-links a { display:flex; align-items:center; gap:12px; padding:14px 12px; border-radius:14px; color:var(--ink); text-decoration:none; font-weight:700; }
.mobile-sidebar-links a:hover,.mobile-sidebar-links a.active { background:var(--ink); color:#fff; }
.mobile-sidebar-extra { margin-top:25px; padding-top:20px; border-top:1px solid var(--line); }
.page-hero { min-height:390px; padding:145px 6% 85px; position:relative; display:flex; align-items:center; overflow:hidden; color:#fff; background-size:cover; background-position:center; }
.page-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,22,15,.78),rgba(30,22,15,.32)),linear-gradient(180deg,rgba(30,22,15,.15),rgba(30,22,15,.68)); }
.page-hero-content { position:relative; z-index:1; width:min(900px,100%); }
.page-hero h1 { font-size:clamp(2.3rem,5vw,4rem); line-height:1.08; margin:12px 0 14px; }
.page-hero p { max-width:680px; line-height:1.75; opacity:.92; }
.breadcrumb { display:flex; gap:9px; flex-wrap:wrap; font-size:.82rem; font-weight:700; opacity:.82; }
.breadcrumb a { color:#fff; text-decoration:none; }
.back-link { display:inline-flex; align-items:center; gap:9px; color:var(--clay); font-weight:800; text-decoration:none; margin-bottom:28px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:30px; align-items:start; }
.detail-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:var(--shadow); }
.detail-gallery { overflow:hidden; border-radius:20px; }
.detail-gallery img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.variant-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:15px; }
.variant-option { border:1px solid var(--line); border-radius:16px; padding:15px; cursor:pointer; transition:.25s; }
.variant-option:hover,.variant-option.active { border-color:var(--clay); box-shadow:0 8px 20px rgba(139,46,46,.09); transform:translateY(-2px); }
.price-big { font-size:2rem; font-weight:900; color:var(--clay); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.82rem; font-weight:800; color:var(--text-soft); }
.field input,.field textarea,.field select { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; outline:none; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--clay); box-shadow:0 0 0 3px rgba(139,46,46,.08); }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card { background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); transition:.3s; }
.article-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.article-card img { width:100%; height:220px; object-fit:cover; display:block; }
.article-card-body { padding:22px; }
.article-card-body a { color:var(--ink); text-decoration:none; }
.article-meta { color:var(--text-soft); font-size:.78rem; font-weight:700; margin-bottom:9px; }
.article-content { max-width:850px; margin:auto; }
.article-content img { width:100%; border-radius:22px; margin:20px 0 28px; }
.article-content p,.article-content li { color:var(--text-soft); line-height:1.85; font-size:1rem; }
.article-content h2 { margin:32px 0 12px; font-size:1.7rem; }
.account-layout { display:grid; grid-template-columns:260px 1fr; gap:25px; }
.account-nav { background:#fff; padding:15px; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); height:max-content; }
.account-nav a { display:block; padding:12px 13px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:700; }
.account-nav a:hover,.account-nav a.active { background:var(--ink); color:#fff; }
.cart-page-item { display:grid; grid-template-columns:90px 1fr auto; gap:15px; align-items:center; padding:18px 0; border-bottom:1px dashed var(--line); }
.cart-page-item img { width:90px; height:70px; object-fit:cover; border-radius:12px; }
.empty-state { text-align:center; padding:55px 20px; background:#fff; border:1px dashed var(--line); border-radius:22px; }
/* ===== Global page transition: loading -> tirai turun ke bawah (reveal) -> idle -> saat pindah, tirai turun lagi dari atas (leave) ===== */
.page-transition { position:fixed; inset:0; z-index:99998; pointer-events:none; overflow:hidden; transform:translateY(0); }
.page-transition .pt-bg { position:absolute; inset:0; background:var(--paper); }
.page-transition .pt-curtain,.page-transition .pt-wave,.page-transition .pt-plane,.page-transition .pt-bird { display:none; }
.page-transition .loader-scene { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); opacity:0; width:min(280px,72vw); transition:opacity .35s ease; }
/* Layar full ketutup + loading tampil. Setelah halaman ready + jeda 1 detik, tirai bergerak TURUN sampai keluar dari bawah layar (reveal halaman). */
.page-transition.pt-covering { transform:translateY(0); transition:transform .8s cubic-bezier(.65,0,.35,1); }
.page-transition.pt-covering .loader-scene { opacity:1; }
.page-transition.pt-covering.pt-anim-start { transform:translateY(100%); }
.page-transition.pt-covering.pt-anim-start .loader-scene { opacity:0; }
/* Setelah reveal selesai: tirai sudah lewat di bawah layar, halaman kelihatan normal, tidak menutupi apapun. */
.page-transition.pt-idle { transform:translateY(100%); transition:none; }
.page-transition.pt-idle .loader-scene { opacity:0; }
/* Saat mau pindah halaman: tirai posisi start dipaksa dari atas (translateY(-100%)) lalu turun ke translateY(0) menutup layar dari atas ke bawah. Selalu turun, tidak pernah balik ke atas. */
.page-transition.pt-leaving { transform:translateY(-100%); transition:transform .7s cubic-bezier(.65,0,.35,1); }
.page-transition.pt-leaving .loader-scene { opacity:1; }
.page-transition.pt-leaving.pt-anim-start { transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .page-transition.pt-covering, .page-transition.pt-leaving, .page-transition .loader-scene { transition-duration:.01s !important; }
}
.about-img-wrap { max-width: 380px; margin-left: auto; }
@media(max-width:900px){ .about-img-wrap { max-width: 300px; margin: 0 auto; } .faq-split { grid-template-columns: 1fr; } .faq-split-img { position: static; max-height: 260px; } .faq-container { max-height: none; overflow: visible; } }
@media(max-width:620px){ .nav-actions{gap:6px;} header{padding:12px 5%!important;}
  .logo{font-size:clamp(1.05rem,4.7vw,1.55rem);gap:7px;white-space:nowrap;min-width:0;}
  .logo .bali-mark{font-size:1.05rem;flex:none;}
  .nav-actions .action-btn{width:38px;height:38px;flex:none;}
  .nav-actions .site-mobile-toggle{width:42px;height:42px;}
  .nav-actions .lang-picker{position:static;flex:none;}
  .lang-btn{width:38px;height:38px;padding:0;justify-content:center;gap:0;border-radius:50%;font-size:1.05rem;}
  .lang-btn #activeLang,.lang-btn .fa-chevron-down{display:none;}
  .lang-dropdown{top:calc(100% + 8px);right:5%;width:min(300px,90vw);}
  .lang-list{max-height:min(280px,48vh);}
  .lang-search-box input{font-size:16px;} .site-mobile-toggle{width:42px;height:42px;} .page-hero{min-height:330px;padding:130px 6% 70px;} .form-grid,.variant-grid,.article-grid{grid-template-columns:1fr;} .detail-card{padding:20px;} .cart-page-item{grid-template-columns:70px 1fr;} .cart-page-item .item-price{grid-column:2;} }

@media(max-width:350px){ .logo .bali-mark{display:none;} }

/* ===== LOGIN / GOOGLE SIGN-IN ===== */
.btn-google { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 16px; font-weight:700; font-size:.95rem; color:var(--ink); cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); text-decoration:none; }
.btn-google:hover { border-color:var(--clay); box-shadow:0 8px 20px rgba(44,36,24,.1); transform:translateY(-2px); }
.btn-google svg { width:20px; height:20px; flex:none; }
.btn-google.is-loading { pointer-events:none; opacity:.75; }
.btn-google .g-spinner { display:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--clay); animation:loaderSpin .7s linear infinite; }
.btn-google.is-loading .g-spinner { display:inline-block; }
.btn-google.is-loading .g-label-default { display:none; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-soft); font-size:.82rem; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* ===== ACCOUNT PROFILE (with tabs) ===== */
.profile-header { display:flex; align-items:center; gap:18px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.profile-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--paper); box-shadow:0 4px 14px rgba(44,36,24,.15); flex:none; }
.profile-avatar-fallback { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--clay); color:#fff; font-weight:800; font-size:1.4rem; flex:none; }
.profile-header h3 { margin-bottom:4px; }
.profile-header .badge-google { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; color:var(--palm); background:rgba(31,92,78,.1); padding:4px 10px; border-radius:20px; margin-top:4px; }
.profile-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; border-bottom:1px solid var(--line); }
.profile-tab-btn { padding:11px 18px; border:none; background:none; font-weight:700; font-size:.9rem; color:var(--text-soft); cursor:pointer; position:relative; transition:color .3s cubic-bezier(.4,0,.2,1); }
.profile-tab-btn::after { content:""; position:absolute; left:50%; right:50%; bottom:-1px; height:2px; background:var(--clay); transition:left .3s cubic-bezier(.4,0,.2,1), right .3s cubic-bezier(.4,0,.2,1); }
.profile-tab-btn:hover { color:var(--ink); }
.profile-tab-btn.active { color:var(--clay); }
.profile-tab-btn.active::after { left:0; right:0; }
.profile-tab-panel { display:none; animation:fadeUpTab .4s cubic-bezier(.4,0,.2,1); }
.profile-tab-panel.active { display:block; }
@keyframes fadeUpTab { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.order-item { display:grid; grid-template-columns:70px 1fr auto; gap:15px; align-items:center; padding:16px 0; border-bottom:1px dashed var(--line); }
.order-item img { width:70px; height:60px; object-fit:cover; border-radius:10px; }
.order-status { font-size:.75rem; font-weight:800; padding:5px 12px; border-radius:20px; }
.order-status.done { background:rgba(31,92,78,.12); color:var(--palm); }
.order-status.upcoming { background:rgba(201,162,75,.16); color:#8a6b1f; }
.security-row { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); gap:15px; }
.security-row:last-child { border-bottom:none; }
.security-row strong { display:block; margin-bottom:3px; }
.security-row p { color:var(--text-soft); font-size:.85rem; }
.pref-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.pref-tag { padding:8px 16px; border-radius:20px; border:1px solid var(--line); font-size:.85rem; font-weight:700; cursor:pointer; transition:all .25s ease; background:#fff; }
.pref-tag.active,.pref-tag:hover { border-color:var(--clay); background:var(--clay); color:#fff; }


/* Styling & Animasi Loader BaliParadise (SVG) */
.loader-bp-logo {
  width: 110px; /* Sesuaikan ukuran */
  height: 110px;
  margin: 0 auto 16px;
  display: block;
  overflow: visible; /* Biar stroke ga kepotong */
}

/* Animasi Putaran Lingkaran Garis (Stroke) */
.bp-ring {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transform-origin: center;
  /* Animasi menggambar garis lingkaran */
  animation: bpOutlineDraw 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Animasi Kemunculan Smooth Fill & Pulse */
.bp-shape {
  transform-origin: center;
  /* Animasi logo muncul-hilang perlahan */
  animation: bpPulseFill 2.5s ease-in-out infinite;
}

@keyframes bpOutlineDraw {
  0% {
    stroke-dashoffset: 440;
    transform: rotate(0deg);
  }
  50% {
    stroke-dashoffset: 0;
    transform: rotate(180deg);
  }
  100% {
    stroke-dashoffset: -440;
    transform: rotate(360deg);
  }
}

@keyframes bpPulseFill {
  0%, 100% {
    opacity: 0.2; /* Lebih transparan saat hilang */
    transform: scale(0.9); /* Sedikit mengecil */
  }
  50% {
    opacity: 1; /* Muncul penuh */
    transform: scale(1); /* Ukuran normal */
  }
}



.loader-logo-box {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-logo-gif {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* Dimensi loader lebih besar dan presisi */
.loader-orchid-pro {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 8px 16px rgba(44, 36, 24, 0.18));
}

/* Kunci putaran smooth tanpa hentakan loop: timing-function linear */
.orchid-spin-pro {
  transform-origin: 80px 80px;
  animation: orchidInfiniteSpin 3s linear infinite;
  will-change: transform;
}

/* Pewarnaan helai bunga dengan variasi opacity natural */
.orchid-petal-pro {
  fill: url(#orchidGrad);
  transition: opacity 0.3s ease;
}

.orchid-petal-pro.p1 { opacity: 0.95; }
.orchid-petal-pro.p2 { opacity: 0.85; }
.orchid-petal-pro.p3 { opacity: 0.75; }
.orchid-petal-pro.p4 { opacity: 0.90; }
.orchid-petal-pro.p5 { opacity: 0.80; }

.orchid-core-pro {
  fill: #D4AF37; /* Aksen gold cerah di tengah */
}

/* Animasi putar terus-menerus tanpa jeda */
@keyframes orchidInfiniteSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}