:root {
    --gold: #c9a84c;
    --gold-light: #e8d08a;
    --gold-dim: #8a6e2a;
    --dark: #0d0c0a;
    --dark2: #151410;
    --dark3: #1e1c17;
    --dark4: #272420;
    --cream: #f5f0e8;
    --cream2: #e8e0d0;
    --text-muted: #9a9180;
    --text-dim: #6a6358;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--dark);
    color: var(--cream);
    font-family: 'Jost', sans-serif;
    overflow-x: hidden;
    cursor: none;
  }
  a, button, [onclick], select, input, textarea, label { cursor: none; }

  #cursor {
    position: fixed; width: 10px; height: 10px;
    background: var(--gold); border-radius: 50%;
    pointer-events: none; z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease, background 0.2s, width 0.25s cubic-bezier(.34,1.56,.64,1), height 0.25s cubic-bezier(.34,1.56,.64,1);
  }
  #cursor-ring {
    position: fixed; width: 36px; height: 36px;
    border: 1.5px solid rgba(201,168,76,0.6); border-radius: 50%;
    pointer-events: none; z-index: 99998;
    transform: translate(-50%, -50%);
    transition: transform 0.18s cubic-bezier(.25,.46,.45,.94), width 0.3s cubic-bezier(.34,1.56,.64,1), height 0.3s cubic-bezier(.34,1.56,.64,1), border-color 0.2s, opacity 0.2s;
  }
  body.cursor-hover #cursor { width: 6px; height: 6px; background: var(--gold-light); }
  body.cursor-hover #cursor-ring { width: 54px; height: 54px; border-color: rgba(201,168,76,0.9); }
  body.cursor-click #cursor { width: 14px; height: 14px; background: white; }
  body.cursor-click #cursor-ring { width: 28px; height: 28px; border-color: white; opacity: 0.5; }

  .ripple-container { position: fixed; inset: 0; pointer-events: none; z-index: 99990; }
  .ripple-dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold); transform: translate(-50%, -50%) scale(0);
    animation: ripplePop 0.6s cubic-bezier(.25,.46,.45,.94) forwards; pointer-events: none;
  }
  @keyframes ripplePop {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
    60% { transform: translate(-50%,-50%) scale(4); opacity: 0.5; }
    100% { transform: translate(-50%,-50%) scale(8); opacity: 0; }
  }
  .click-ring {
    position: absolute; width: 40px; height: 40px;
    border: 1.5px solid var(--gold); border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: clickRing 0.7s cubic-bezier(.25,.46,.45,.94) forwards; pointer-events: none;
  }
  @keyframes clickRing {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
  }

  #page-transition {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--dark); pointer-events: none; opacity: 0;
    transition: opacity 0.35s ease;
  }
  #page-transition.in { opacity: 1; pointer-events: all; }

  nav {
    position: fixed; top:0; left:0; right:0; z-index:100;
    padding: 0 40px;
    display: flex; align-items: center; justify-content: space-between;
    height: 80px;
    background: linear-gradient(180deg, rgba(13,12,10,0.97) 0%, rgba(13,12,10,0) 100%);
    border-bottom: 0.5px solid rgba(201,168,76,0.15);
    backdrop-filter: blur(12px);
  }
  .nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
  .nav-logo-icon {
    width:44px; height:44px; border:1.5px solid var(--gold);
    transform: rotate(45deg); display:flex; align-items:center; justify-content:center;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.3s;
  }
  .nav-logo:hover .nav-logo-icon { transform: rotate(135deg); background: rgba(201,168,76,0.1); }
  .nav-logo-icon span { transform: rotate(-45deg); font-family:'Cinzel',serif; font-size:14px; color:var(--gold); display:block; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1); }
  .nav-logo:hover .nav-logo-icon span { transform: rotate(-135deg); }
  .nav-logo-text h1 { font-family:'Cinzel',serif; font-size:16px; font-weight:600; color:var(--cream); letter-spacing:1px; }
  .nav-logo-text p { font-size:10px; letter-spacing:3px; color:var(--gold); font-weight:300; }
  .nav-links { display:flex; align-items:center; gap:8px; }
  .nav-links a {
    font-family:'Jost',sans-serif; font-size:12px; font-weight:500;
    letter-spacing:2px; text-transform:uppercase; text-decoration:none;
    color:var(--cream2); padding:8px 14px;
    transition: color 0.3s; position: relative; overflow: hidden;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: right;
    transition: transform 0.3s cubic-bezier(.25,.46,.45,.94);
  }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav-links a:hover { color:var(--gold); }
  .btn-tiket {
    border:1px solid var(--gold); color:var(--gold) !important;
    padding:10px 24px !important;
    transition: background 0.3s, color 0.3s, transform 0.2s !important;
  }
  .btn-tiket:hover { background:var(--gold) !important; color:var(--dark) !important; transform: translateY(-1px); }

  .page { display:none; min-height:100vh; }
  .page.active { display:block; }
  .page-enter { animation: pageEnter 0.6s cubic-bezier(.25,.46,.45,.94) both; }
  @keyframes pageEnter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

  /* HERO */
  #page-home { position:relative; overflow:hidden; }
  .hero {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 80px 100px; position: relative; overflow: hidden;
  }
  .hero-bg { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(13,12,10,0.3) 0%, rgba(13,12,10,0.5) 40%, rgba(13,12,10,0.95) 100%); z-index: 1; }
  .hero-bg-img {
    position: absolute; inset: 0;
    background-image: url('https://i1-c.pinimg.com/1200x/1f/ec/bc/1fecbc4c0029a5a7b683e3a22d8d5b95.jpg');
    background-size: cover; background-position: center 30%;
    transform-origin: center;
    animation: heroZoom 18s ease-in-out infinite alternate;
  }
  @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
  .hero-pattern { position:absolute; inset:0; z-index:1; background-image: radial-gradient(circle at 70% 30%, rgba(201,168,76,0.04) 0%, transparent 60%); }
  .hero-lines { position:absolute; right:0; top:0; bottom:0; width:50%; z-index:1; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(201,168,76,0.025) 60px, rgba(201,168,76,0.025) 61px); }
  .hero-content { position:relative; z-index:2; max-width:900px; }
  .hero-eyebrow { display:flex; align-items:center; gap:16px; margin-bottom:24px; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); animation: fadeSlideUp 0.8s 0.2s both; }
  .hero-eyebrow::before { content:''; width:48px; height:1px; background:var(--gold); }
  .hero-title { font-family:'Cormorant Garamond',serif; font-size: clamp(64px, 10vw, 120px); line-height:0.9; font-weight:300; margin-bottom:24px; animation: fadeSlideUp 0.8s 0.35s both; }
  .hero-title em { font-style:italic; color:var(--gold-light); }
  .hero-sub { font-family:'Cinzel',serif; font-size:13px; letter-spacing:5px; color:var(--text-muted); margin-bottom:32px; animation: fadeSlideUp 0.8s 0.5s both; }
  .hero-desc { font-family:'Cormorant Garamond',serif; font-size:19px; font-style:italic; color:var(--cream2); max-width:500px; line-height:1.7; margin-bottom:48px; animation: fadeSlideUp 0.8s 0.65s both; }
  .hero-btns { display:flex; gap:16px; flex-wrap:wrap; animation: fadeSlideUp 0.8s 0.8s both; }
  @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

  /* REVIEW STRIP di HERO */
  .hero-review-strip {
    position: relative; z-index: 2; margin-top: 48px;
    display: flex; align-items: center; gap: 24px;
    animation: fadeSlideUp 0.8s 1s both;
  }
  .hero-review-strip .avg-score { font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:300; color:var(--gold); line-height:1; }
  .hero-review-strip .stars { color:var(--gold); font-size:16px; letter-spacing:2px; }
  .hero-review-strip .review-count { font-size:11px; letter-spacing:2px; color:var(--text-muted); text-transform:uppercase; }
  .hero-review-strip .sep { width:1px; height:40px; background:rgba(201,168,76,0.3); }
  .hero-review-mini { display:flex; flex-direction:column; gap:4px; }
  .hero-review-mini-item { font-size:12px; color:var(--cream2); font-style:italic; font-family:'Cormorant Garamond',serif; }

  .btn-primary {
    background:var(--gold); color:var(--dark); border:none; padding:16px 36px;
    font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden;
  }
  .btn-primary::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.2); transform: translateX(-100%); transition: transform 0.4s ease; }
  .btn-primary:hover::after { transform: translateX(100%); }
  .btn-primary:hover { background:var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.3); }
  .btn-outline { background:transparent; color:var(--cream); border:1px solid rgba(245,240,232,0.3); padding:16px 36px; font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase; transition: all 0.3s cubic-bezier(.34,1.56,.64,1); }
  .btn-outline:hover { border-color:var(--gold); color:var(--gold); transform: translateY(-2px); }
  .scroll-indicator { position:absolute; right:40px; bottom:0; top:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; animation: fadeSlideUp 0.8s 1s both; }
  .scroll-indicator span { writing-mode:vertical-rl; font-size:10px; letter-spacing:3px; color:var(--text-dim); }
  .scroll-indicator::after { content:''; width:1px; height:60px; margin-top:8px; background: linear-gradient(180deg, var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; }
  @keyframes scrollPulse { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.6); opacity: 0.4; } }

  .section { padding:100px 80px; }
  .section-header { margin-bottom:60px; }
  .section-eyebrow { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  .section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(40px,5vw,64px); font-weight:300; line-height:1.1; }
  .section-title em { font-style:italic; color:var(--gold-light); }
  .divider { width:48px; height:1px; background:var(--gold); margin:24px 0; }

  .info-card { text-align:center; padding:24px; border:0.5px solid rgba(201,168,76,0.1); transition: border-color 0.3s, transform 0.3s, background 0.3s; position: relative; overflow: hidden; }
  .info-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(201,168,76,0.06) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; }
  .info-card:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-4px); }
  .info-card:hover::before { opacity: 1; }
  .info-card-icon { font-size:28px; margin-bottom:8px; display:block; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
  .info-card:hover .info-card-icon { transform: scale(1.2) rotate(-5deg); }

  /* GALLERY */
  .gallery-tabs { display:flex; gap:0; margin-bottom:48px; border-bottom:1px solid rgba(201,168,76,0.2); }
  .gallery-tab { padding:14px 32px; font-size:11px; letter-spacing:3px; text-transform:uppercase; border:none; background:transparent; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.3s; position: relative; overflow: hidden; }
  .gallery-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
  .gallery-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:3px; }
  .gallery-item { aspect-ratio:1; position:relative; overflow:hidden; background: var(--dark3); }
  .gallery-item:first-child { grid-column: span 2; aspect-ratio:2; }
  .gallery-item-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(.25,.46,.45,.94); }
  .gallery-item:hover .gallery-item-img { transform: scale(1.07); }
  .gallery-item-inner { position: absolute; inset: 0; display:flex; align-items:flex-end; padding:20px; background: linear-gradient(0deg, rgba(13,12,10,0.85) 0%, rgba(13,12,10,0.2) 50%, transparent 100%); }
  .gallery-label { font-size:12px; color:var(--cream); z-index:2; position:relative; transform: translateY(8px); opacity: 0.85; transition: transform 0.3s, opacity 0.3s; }
  .gallery-item:hover .gallery-label { transform: translateY(0); opacity: 1; }
  .gallery-label strong { display:block; font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:400; }
  .gallery-zoom-btn { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; background: rgba(13,12,10,0.7); border: 0.5px solid rgba(201,168,76,0.4); color: var(--gold); font-size: 16px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: scale(0.8); }
  .gallery-item:hover .gallery-zoom-btn { opacity: 1; transform: scale(1); }

  /* VIDEO GALLERY */
  .video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  .video-card { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.1); overflow:hidden; transition:all 0.4s cubic-bezier(.25,.46,.45,.94); }
  .video-card:hover { border-color:rgba(201,168,76,0.4); transform:translateY(-6px); }
  .video-thumb { height:220px; position:relative; overflow:hidden; }
  .video-thumb-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.5s; }
  .video-card:hover .video-thumb-bg { transform:scale(1.06); }
  .video-thumb-overlay { position:absolute;inset:0;background:rgba(13,12,10,0.4); }
  .video-play-btn { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
  .video-play-circle { width:64px;height:64px;border:2.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--gold);background:rgba(13,12,10,0.5);transition:all 0.3s cubic-bezier(.34,1.56,.64,1); }
  .video-card:hover .video-play-circle { transform:scale(1.15);background:rgba(201,168,76,0.2); }
  .video-info { padding:20px; }
  .video-info h3 { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;margin-bottom:6px; }
  .video-meta { font-size:12px;color:var(--text-muted); }
  /* YOUTUBE EMBED MODAL */
  .video-modal-overlay { display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0.92);backdrop-filter:blur(8px);align-items:center;justify-content:center; }
  .video-modal-overlay.show { display:flex; }
  .video-modal { width:min(860px,90vw);position:relative; }
  .video-modal-close { position:absolute;top:-44px;right:0;background:transparent;border:none;color:var(--cream);font-size:28px;opacity:0.8;transition:opacity 0.2s,transform 0.3s; }
  .video-modal-close:hover { opacity:1;transform:rotate(90deg); }
  .video-iframe-wrap { position:relative;width:100%;padding-top:56.25%;background:var(--dark); }
  .video-iframe-wrap iframe { position:absolute;inset:0;width:100%;height:100%;border:none; }

  /* UMKM */
  .umkm-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
  .umkm-card { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.15); overflow:hidden; transition: border-color 0.3s, transform 0.4s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s; }
  .umkm-card:hover { border-color:var(--gold); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
  .umkm-img { height:200px; background:var(--dark4); display:flex; align-items:center; justify-content:center; font-size:64px; position:relative; overflow:hidden; }
  .umkm-img-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s cubic-bezier(.25,.46,.45,.94); }
  .umkm-card:hover .umkm-img-photo { transform: scale(1.08); }
  .umkm-badge { position:absolute; top:12px; left:12px; z-index:2; background:var(--gold); color:var(--dark); font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; font-weight:500; }
  .umkm-info { padding:20px; }
  .umkm-info h3 { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; margin-bottom:6px; }
  .umkm-info p { font-size:13px; color:var(--text-muted); margin-bottom:12px; line-height:1.6; }
  .umkm-price { color:var(--gold); font-size:14px; font-weight:500; }
  .umkm-seller { font-size:11px; color:var(--text-dim); margin-top:6px; }
  .umkm-actions { display:flex; gap:8px; margin-top:16px; }
  .btn-sm { padding:8px 16px; font-size:10px; letter-spacing:2px; text-transform:uppercase; border:none; font-family:'Jost',sans-serif; font-weight:500; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); }
  .btn-sm:hover { transform: translateY(-1px); }
  .btn-sm-gold { background:var(--gold); color:var(--dark); }
  .btn-sm-gold:hover { background:var(--gold-light); }
  .btn-sm-outline { background:transparent; color:var(--cream); border:1px solid rgba(245,240,232,0.2); }
  .btn-sm-outline:hover { border-color:var(--gold); color:var(--gold); }

  /* ARTIKEL */
  .artikel-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; flex-wrap:wrap; gap:16px; }
  .artikel-search { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.2); color:var(--cream); padding:12px 20px; font-family:'Jost',sans-serif; font-size:13px; width:300px; outline:none; transition:border-color 0.3s; }
  .artikel-search:focus { border-color:var(--gold); }
  .artikel-search::placeholder { color:var(--text-dim); }
  .btn-add-artikel { background:var(--gold); color:var(--dark); border:none; padding:12px 24px; font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; transition:all 0.3s cubic-bezier(.34,1.56,.64,1); }
  .btn-add-artikel:hover { background:var(--gold-light); transform: translateY(-2px); }
  .artikel-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:32px; }
  .artikel-card { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.1); overflow:hidden; transition: border-color 0.3s, transform 0.4s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s; }
  .artikel-card:hover { border-color:rgba(201,168,76,0.4); transform:translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.4); }
  .artikel-img { height:200px; background:var(--dark4); display:flex; align-items:center; justify-content:center; font-size:48px; position:relative; overflow:hidden; }
  .artikel-img-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(.25,.46,.45,.94); }
  .artikel-card:hover .artikel-img-photo { transform: scale(1.07); }
  .artikel-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,12,10,0.1) 0%, rgba(13,12,10,0.5) 100%); }
  .artikel-kategori { position:absolute; top:12px; left:12px; z-index:2; background:rgba(201,168,76,0.9); color:var(--dark); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; font-weight:500; }
  .artikel-body { padding:24px; }
  .artikel-meta { font-size:11px; color:var(--text-dim); letter-spacing:1px; margin-bottom:12px; }
  .artikel-body h3 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; margin-bottom:10px; color:var(--cream); line-height:1.3; transition:color 0.3s; }
  .artikel-card:hover .artikel-body h3 { color:var(--gold-light); }
  .artikel-body p { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:16px; }
  .artikel-footer { display:flex; justify-content:space-between; align-items:center; }
  .artikel-author { font-size:11px; color:var(--text-dim); }
  .artikel-actions { display:flex; gap:8px; }
  .btn-icon { background:transparent; border:0.5px solid rgba(201,168,76,0.2); color:var(--text-muted); padding:6px 10px; font-size:12px; transition:all 0.25s cubic-bezier(.34,1.56,.64,1); }
  .btn-icon:hover { border-color:var(--gold); color:var(--gold); transform: scale(1.1); }

  /* RESERVASI */
  .reservasi-wrapper { display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:start; }
  .reservasi-form { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.2); padding:48px; }
  .form-group { margin-bottom:28px; }
  .form-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:block; }
  .form-input, .form-select, .form-textarea { width:100%; background:var(--dark4); border:0.5px solid rgba(201,168,76,0.2); color:var(--cream); padding:14px 18px; font-family:'Jost',sans-serif; font-size:14px; outline:none; transition:border-color 0.3s, box-shadow 0.3s; appearance:none; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.12); }
  .form-input::placeholder, .form-textarea::placeholder { color:var(--text-dim); }
  .form-select option { background:var(--dark3); }
  .form-textarea { min-height:100px; resize:vertical; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

  /* PAYMENT */
  .payment-box { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.2); padding:32px; margin-bottom:24px; }
  .payment-box h3 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; margin-bottom:24px; }
  .payment-method { margin-bottom:20px; padding-bottom:20px; border-bottom:0.5px solid rgba(201,168,76,0.1); }
  .payment-method:last-child { border:none; margin:0; padding:0; }
  .payment-method-title { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
  .qris-box { background:white; padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px; border:2px solid rgba(201,168,76,0.3); }
  .qris-code { width:140px; height:140px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; position:relative; }
  .qris-inner { width:120px; height:120px; position:relative; }
  .qris-corner { position:absolute; width:20px; height:20px; border:3px solid #333; }
  .qris-corner.tl { top:0; left:0; border-right:none; border-bottom:none; }
  .qris-corner.tr { top:0; right:0; border-left:none; border-bottom:none; }
  .qris-corner.bl { bottom:0; left:0; border-right:none; border-top:none; }
  .qris-corner.br { bottom:0; right:0; border-left:none; border-top:none; }
  .qris-dots { position:absolute; inset:24px; background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 4px, #333 4px, #333 5px), repeating-linear-gradient(90deg, transparent 0px, transparent 4px, #333 4px, #333 5px); opacity:0.4; }
  .qris-label { font-size:10px; color:#333; font-weight:600; letter-spacing:1px; }
  .qris-caption { font-size:10px; color:var(--text-muted); text-align:center; }
  .rekening-item { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--dark4); margin-bottom:8px; }
  .rekening-bank { font-size:11px; font-weight:500; color:var(--gold); }
  .rekening-no { font-size:13px; color:var(--cream); font-family:monospace; letter-spacing:1px; }
  .rekening-name { font-size:10px; color:var(--text-dim); }
  .copy-btn { background:transparent; border:0.5px solid rgba(201,168,76,0.3); color:var(--gold); padding:4px 10px; font-size:10px; transition:all 0.25s; }
  .copy-btn:hover { background:var(--gold); color:var(--dark); }
  .wa-btn { display:flex; align-items:center; justify-content:center; gap:10px; background:#25D366; color:white; border:none; width:100%; padding:14px; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:1px; margin-top:20px; transition:all 0.3s cubic-bezier(.34,1.56,.64,1); }
  .wa-btn:hover { background:#128C7E; transform: translateY(-2px); }

  /* PENGINAPAN */
  .penginapan-hero { background:var(--dark2); border:0.5px solid rgba(201,168,76,0.15); padding:60px; margin-bottom:60px; position:relative; overflow:hidden; }
  .penginapan-hero::before { content:''; position:absolute; right:-60px; top:-60px; width:300px; height:300px; border:1px solid rgba(201,168,76,0.1); border-radius:50%; animation: rotateSlow 20s linear infinite; }
  @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .penginapan-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
  .penginapan-card { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.1); overflow:hidden; transition:all 0.4s cubic-bezier(.25,.46,.45,.94); }
  .penginapan-card:hover { border-color:rgba(201,168,76,0.5); transform:translateY(-8px); box-shadow: 0 24px 56px rgba(0,0,0,0.5); }
  .penginapan-img { height:220px; background:var(--dark4); position:relative; display:flex; align-items:center; justify-content:center; font-size:56px; overflow: hidden; }
  .penginapan-img-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(.25,.46,.45,.94); }
  .penginapan-card:hover .penginapan-img-photo { transform: scale(1.1); }
  .penginapan-badge { position:absolute; top:0; right:0; background:var(--gold); color:var(--dark); font-size:9px; letter-spacing:2px; text-transform:uppercase; padding:6px 14px; font-weight:500; z-index:2; }
  .penginapan-rating { position:absolute; bottom:12px; left:12px; background:rgba(13,12,10,0.85); padding:6px 10px; font-size:12px; color:var(--gold); z-index:2; }
  .penginapan-info { padding:24px; }
  .penginapan-info h3 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; margin-bottom:6px; }
  .penginapan-loc { font-size:11px; color:var(--text-dim); letter-spacing:1px; margin-bottom:16px; }
  .penginapan-features { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .feature-pill { font-size:10px; letter-spacing:1px; color:var(--gold-dim); border:0.5px solid rgba(201,168,76,0.2); padding:4px 10px; transition: all 0.2s; }
  .feature-pill:hover { border-color: var(--gold); color: var(--gold); }
  .penginapan-price { display:flex; justify-content:space-between; align-items:flex-end; }
  .price-main { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:300; color:var(--gold); }
  .price-sub { font-size:11px; color:var(--text-dim); }

  .penginapan-detail-overlay { display:none; position:fixed; inset:0; z-index:200; overflow-y:auto; }
  .penginapan-detail-overlay.show { display:flex; align-items:center; justify-content:center; padding:40px; background:rgba(0,0,0,0.85); backdrop-filter:blur(6px); }
  .penginapan-detail { background:var(--dark2); border:0.5px solid rgba(201,168,76,0.3); max-width:800px; width:100%; overflow:hidden; position:relative; animation: modalIn 0.4s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  .detail-close { position:absolute; top:20px; right:20px; z-index:10; background:rgba(13,12,10,0.8); border:0.5px solid rgba(201,168,76,0.3); color:var(--cream); width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:18px; transition: all 0.25s; }
  .detail-close:hover { transform: rotate(90deg); border-color: var(--gold); color: var(--gold); }
  .detail-img { height:280px; background:var(--dark4); overflow:hidden; position:relative; }
  .detail-img-photo { position:absolute; inset:0; background-size:cover; background-position:center; }
  .detail-img-overlay { position:absolute; inset:0; background: linear-gradient(to bottom, transparent 40%, rgba(13,12,10,0.8)); }
  .detail-body { padding:40px; }
  .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  .detail-amenities h4 { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  .amenity-list { list-style:none; }
  .amenity-list li { padding:8px 0; border-bottom:0.5px solid rgba(201,168,76,0.08); font-size:13px; color:var(--cream2); display:flex; align-items:center; gap:8px; }
  .amenity-list li::before { content:'◆'; font-size:6px; color:var(--gold); }
  .detail-booking { background:var(--dark3); border:0.5px solid rgba(201,168,76,0.2); padding:24px; }
  .detail-booking .price-main { font-size:32px; margin-bottom:4px; }

  /* MODAL */
  .modal-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.85); overflow-y:auto; backdrop-filter:blur(6px); }
  .modal-overlay.show { display:flex; align-items:center; justify-content:center; padding:40px; }
  .modal { background:var(--dark2); border:0.5px solid rgba(201,168,76,0.3); max-width:640px; width:100%; padding:48px; position:relative; animation: modalIn 0.4s cubic-bezier(.34,1.56,.64,1) both; }
  .modal-close { position:absolute; top:20px; right:20px; background:transparent; border:0.5px solid rgba(201,168,76,0.3); color:var(--cream); width:36px; height:36px; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all 0.25s; }
  .modal-close:hover { border-color:var(--gold); color:var(--gold); transform: rotate(90deg); }
  .modal h2 { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:300; margin-bottom:32px; }

  /* BUKU TAMU & REVIEW */
  .review-section { padding: 80px; background: var(--dark2); border-top: 0.5px solid rgba(201,168,76,0.1); }
  .review-summary { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: center; margin-bottom: 60px; }
  .review-score-big { text-align: center; padding: 40px; border: 0.5px solid rgba(201,168,76,0.2); background: var(--dark3); }
  .review-score-num { font-family:'Cormorant Garamond',serif; font-size:80px; font-weight:300; color:var(--gold); line-height:1; }
  .review-score-stars { font-size:24px; color:var(--gold); letter-spacing:4px; margin:12px 0; }
  .review-score-sub { font-size:11px; letter-spacing:3px; color:var(--text-muted); text-transform:uppercase; }
  .review-bars { display: flex; flex-direction: column; gap: 12px; }
  .review-bar-row { display: flex; align-items: center; gap: 16px; }
  .review-bar-label { font-size:11px; color:var(--text-muted); width:80px; letter-spacing:1px; }
  .review-bar-track { flex:1; height:4px; background:rgba(201,168,76,0.15); border-radius:2px; overflow:hidden; }
  .review-bar-fill { height:100%; background:var(--gold); border-radius:2px; transition: width 1s cubic-bezier(.25,.46,.45,.94); }
  .review-bar-count { font-size:11px; color:var(--text-dim); width:20px; text-align:right; }
  .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
  .review-card { background: var(--dark3); border: 0.5px solid rgba(201,168,76,0.1); padding: 28px; transition: border-color 0.3s, transform 0.3s; position: relative; }
  .review-card:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-4px); }
  .review-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
  .review-avatar { width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(201,168,76,0.3); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--gold); flex-shrink:0; background:var(--dark4); }
  .review-name { font-size:14px; color:var(--cream); font-weight:500; margin-bottom:2px; }
  .review-date { font-size:11px; color:var(--text-dim); }
  .review-stars { color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:12px; }
  .review-text { font-family:'Cormorant Garamond',serif; font-size:16px; font-style:italic; color:var(--cream2); line-height:1.7; }
  .review-verified { position:absolute; top:16px; right:16px; font-size:10px; color:var(--gold); letter-spacing:1px; border:0.5px solid rgba(201,168,76,0.3); padding:3px 8px; }
  .btn-tulis-review { background: transparent; border: 1px solid var(--gold); color: var(--gold); padding: 16px 36px; font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase; transition:all 0.3s cubic-bezier(.34,1.56,.64,1); }
  .btn-tulis-review:hover { background: var(--gold); color: var(--dark); transform: translateY(-2px); }

  /* BUKU TAMU FORM */
  .buku-tamu-section { padding: 80px; background: var(--dark); border-top: 0.5px solid rgba(201,168,76,0.1); }
  .buku-tamu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  .buku-tamu-entries { display: flex; flex-direction: column; gap: 20px; max-height: 560px; overflow-y: auto; padding-right: 8px; }
  .buku-tamu-entries::-webkit-scrollbar { width: 3px; }
  .buku-tamu-entries::-webkit-scrollbar-track { background: var(--dark3); }
  .buku-tamu-entries::-webkit-scrollbar-thumb { background: var(--gold-dim); }
  .buku-entry { background: var(--dark3); border: 0.5px solid rgba(201,168,76,0.1); padding: 24px; border-left: 3px solid var(--gold-dim); transition: border-color 0.3s, transform 0.3s; }
  .buku-entry:hover { border-left-color: var(--gold); transform: translateX(4px); }
  .buku-entry-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  .buku-entry-name { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); }
  .buku-entry-asal { font-size:10px; color:var(--text-dim); letter-spacing:1px; margin-top:2px; }
  .buku-entry-date { font-size:10px; color:var(--text-dim); text-align:right; }
  .buku-entry-pesan { font-family:'Cormorant Garamond',serif; font-size:16px; font-style:italic; color:var(--cream2); line-height:1.7; }
  .star-rating-input { display:flex; gap:8px; margin-bottom:8px; }
  .star-btn { background:none; border:none; font-size:28px; color:rgba(201,168,76,0.3); transition:color 0.2s, transform 0.2s; }
  .star-btn.active, .star-btn:hover { color:var(--gold); transform: scale(1.2); }

  /* KONTAK */
  .kontak-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  .kontak-info h3 { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:300; margin-bottom:32px; }
  .kontak-item { display:flex; gap:16px; margin-bottom:28px; padding-bottom:28px; border-bottom:0.5px solid rgba(201,168,76,0.1); transition: transform 0.3s; }
  .kontak-item:hover { transform: translateX(4px); }
  .kontak-icon { width:44px; height:44px; border:0.5px solid rgba(201,168,76,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; color:var(--gold); transition: all 0.3s; }
  .kontak-item:hover .kontak-icon { background: rgba(201,168,76,0.1); transform: scale(1.1) rotate(-5deg); }
  .kontak-item-text p:first-child { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
  .kontak-item-text p:last-child { font-size:14px; color:var(--cream2); line-height:1.6; }

  /* TENTANG */
  .tentang-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .tentang-visual { position:relative; height:500px; background:var(--dark3); border:0.5px solid rgba(201,168,76,0.2); display:flex; align-items:center; justify-content:center; font-size:100px; overflow: hidden; }
  .tentang-visual::before { content:''; position:absolute; inset:-16px; border:0.5px solid rgba(201,168,76,0.1); pointer-events:none; z-index:2; }
  .tentang-visual-img { position:absolute; inset:0; background-size:cover; background-position:center; transition: transform 0.6s; }
  .tentang-visual:hover .tentang-visual-img { transform: scale(1.04); }
  .tentang-visual-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 50%, rgba(13,12,10,0.7)); z-index:1; }
  .stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px; }
  .stat-item { border-left:2px solid var(--gold); padding-left:20px; transition: transform 0.3s; }
  .stat-item:hover { transform: translateX(4px); }
  .stat-num { font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:300; color:var(--gold-light); }
  .stat-lbl { font-size:11px; letter-spacing:2px; color:var(--text-dim); text-transform:uppercase; }

  /* TOAST */
  .toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--gold); color:var(--dark); padding:14px 32px; font-size:13px; font-weight:500; letter-spacing:1px; z-index:999; opacity:0; transition: opacity 0.3s, transform 0.4s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  .notif { background:var(--dark4); border:0.5px solid rgba(201,168,76,0.15); padding:10px 18px; font-size:12px; color:var(--text-muted); margin-bottom:24px; display:flex; align-items:center; gap:10px; }
  .notif span { color:var(--gold); }

  #lightbox { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; }
  #lightbox.show { display:flex; background:rgba(0,0,0,0.92); backdrop-filter:blur(8px); }
  #lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; animation: modalIn 0.4s cubic-bezier(.34,1.56,.64,1) both; border:0.5px solid rgba(201,168,76,0.3); }
  #lightbox-close { position:fixed; top:24px; right:32px; color:var(--cream); font-size:32px; opacity:0.7; transition:opacity 0.2s, transform 0.3s; z-index:1001; }
  #lightbox-close:hover { opacity:1; transform: rotate(90deg); }

  @media(max-width:900px) {
    nav { padding:0 20px; } .section { padding:80px 24px; } .hero { padding:0 24px 80px; }
    .gallery-grid, .umkm-grid, .penginapan-grid, .artikel-grid, .review-grid { grid-template-columns:1fr; }
    .gallery-item:first-child { grid-column:span 1; aspect-ratio:1; }
    .reservasi-wrapper, .kontak-grid, .tentang-grid, .buku-tamu-grid, .review-summary { grid-template-columns:1fr; }
    .form-row, .detail-grid { grid-template-columns:1fr; }
    .video-grid { grid-template-columns:1fr; }
    .review-section, .buku-tamu-section { padding:60px 24px; }
    body { cursor: auto; } #cursor, #cursor-ring { display:none; }
  }

  /* TOMBOL ADMIN DI NAVBAR */
  .btn-admin {
    border: 1px solid rgba(201,168,76,0.35) !important;
    color: var(--text-muted) !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s !important;
  }
  .btn-admin:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
  }
  .btn-admin::after { display: none !important; }

  /* MOBILE NAV HAMBURGER */
  .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--cream);
    transition: all 0.3s;
  }
  @media(max-width:900px) {
    .nav-toggle { display: flex; }
    .nav-links {
      display: none;
      position: absolute;
      top: 80px; left: 0; right: 0;
      background: rgba(13,12,10,0.98);
      flex-direction: column;
      padding: 20px 24px 28px;
      border-bottom: 0.5px solid rgba(201,168,76,0.15);
      gap: 4px !important;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 0 !important; border-bottom: 0.5px solid rgba(201,168,76,0.07); }
    .btn-tiket, .btn-admin { margin-top: 8px; text-align: center; }
  }