:root{
    --bg:#0F241F;
    --panel:#173730;
    --panel-alt:#1E453B;
    --gold:#CBA135;
    --gold-bright:#E7BE4A;
    --gold-soft:#E8D9A8;
    --ivory:#F6F1E4;
    --muted:#93B2A6;
    --male:#2F6E5D;
    --female:#C97B82;
    --female-soft:#DB9AA0;
    --hairline: rgba(232,217,168,0.16);
    --radius: 18px;
    --sky:#AFCBE8;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ivory);
    font-family:'Manrope', sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:86px; /* space for fixed bottom nav */
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  .frame{max-width:560px; margin:0 auto; position:relative;}
  .wrap{padding:0 20px 50px;}

  /* ================= TOPBAR ================= */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 18px 0;
    position:relative; z-index:3;
  }
  .brand-badge{
    display:flex; align-items:center; gap:8px;
    background:rgba(15,36,31,0.55);
    border:1px solid var(--hairline);
    padding:6px 12px 6px 6px;
    border-radius:999px;
    backdrop-filter:blur(6px);
  }
  .brand-badge .mark{
    width:26px; height:26px; border-radius:50%;
    background:var(--panel);
    display:flex; align-items:center; justify-content:center;
  }
  .brand-badge .mark svg{width:14px; height:14px;}
  .brand-badge span{font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--gold-soft);}
  .brand-badge-logo{ padding:6px 14px; background:transparent; border:none; backdrop-filter:none; }
  .brand-logo-img{ height:34px; width:auto; display:block; }

  .topbar-actions{display:flex; gap:8px;}
  .pill-btn{
    display:flex; align-items:center; gap:6px;
    background:rgba(15,36,31,0.55);
    border:1px solid var(--hairline);
    color:var(--ivory);
    font-size:11.5px; font-weight:700;
    padding:8px 13px;
    border-radius:999px;
    backdrop-filter:blur(6px);
  }
  .pill-btn svg{width:13px; height:13px; fill:var(--gold-soft);}

  /* ================= HERO ================= */
  .hero2{
    position:relative;
    padding:0 20px 46px;
    text-align:center;
    overflow:hidden;
  }
 .hero-slider{
    position:relative;
    aspect-ratio: 1 / 1;
    width:100%;
    border-radius:20px;
    overflow:hidden;
    margin:2px 0 16px;
    border:1px solid var(--hairline);
    background:var(--panel);
  }
 .hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .6s ease;
  background-size:100% 100%; background-position:center; background-repeat:no-repeat; transform:scale(1.5); transform:scale(1.3); transform:scale(1.2); transform:scale(1.1); transform:scale(1); transform:scale(1.08); transform:scale(1.08); transform:scale(1.03);
}
  .hero-slide.active{opacity:1;}
  .hero-slide.g1{background:linear-gradient(135deg, #1E453B, #173730);}
  .hero-slide.g2{background:linear-gradient(135deg, #2F6E5D, #0F241F);}
  .hero-slide.g3{background:linear-gradient(135deg, #173730, #3D8570);}
  .slide-placeholder{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--gold-soft); font-size:11px; font-weight:600; letter-spacing:.04em;
    opacity:.75;
  }
  .slide-placeholder svg{width:26px; height:26px; stroke:var(--gold-soft); fill:none; stroke-width:1.4;}
  .slider-dots{
    position:absolute; bottom:10px; left:0; right:0;
    display:flex; justify-content:center; gap:6px; z-index:2;
  }
  .slider-dots .dot{width:6px; height:6px; border-radius:50%; background:rgba(246,241,228,0.35); border:none; padding:0; cursor:pointer;}
  .slider-dots .dot.active{background:var(--gold-bright); width:16px; border-radius:4px;}
  .hero-motif{
    height:14px;
    margin:0 0 20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 14 L10 0 L20 14 L30 0 L40 14' fill='none' stroke='%23CBA135' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:40px 14px;
    background-position:center;
  }
  .hero2 > *{position:relative; z-index:1;}
  h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:42px;
    line-height:1.08;
    margin:0 0 16px;
    color:var(--ivory);
  }
  h1 .gold{color:var(--gold-bright);}
  .hero2-sub-strong{
    font-weight:800;
    font-size:15px;
    margin:0 0 4px;
    color:var(--ivory);
  }
  .hero2-hint{
    font-size:13.5px;
    color:var(--sky);
    font-style:italic;
    margin:14px 0 22px;
  }

  /* ================= CTA STACK ================= */
  .cta-stack{display:flex; flex-direction:column; gap:12px;}
  .cta-pill{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:100%;
    padding:17px 20px;
    border-radius:999px;
    font-weight:800;
    font-size:14.5px;
    border:none;
    text-align:center;
  }
  .cta-pill.gold{
    background:linear-gradient(180deg, var(--gold-bright), #B98B23);
    color:#132720;
    box-shadow:0 10px 22px rgba(203,161,53,0.25);
  }
  .cta-pill.jade{
    background:linear-gradient(180deg, #3D8570, var(--male));
    color:#EFFAF5;
  }
  .cta-pill.jade-soft{
    background:rgba(62,133,112,0.18);
    border:1px solid rgba(62,133,112,0.5);
    color:var(--ivory);
  }
  .cta-pill.muted{
    background:rgba(147,178,166,0.14);
    color:var(--muted);
    border:1px solid var(--hairline);
  }
  .cta-badge{
    position:absolute; top:-10px; right:14px;
    display:flex; align-items:center; gap:3px;
    font-size:9.5px; font-weight:800; letter-spacing:.03em;
    padding:4px 9px;
    border-radius:999px;
    text-transform:uppercase;
  }
  .cta-badge.flash{background:#F3C948; color:#3A2A05;}
  .cta-badge.soon{background:#7C93A8; color:#0F241F;}

  /* ================= SECTION HEADS ================= */
  .section-head{
    text-align:center;
    margin:44px 0 20px;
  }
  .section-head .eyebrow{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold); font-weight:700; margin-bottom:8px;
  }
  .section-head h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:30px;
    margin:0;
  }

  .quicknav{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:4px 20px 4px;
  }
  .quicknav a{
    flex:0 0 auto;
    font-size:12.5px; font-weight:600;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid var(--hairline);
    color:var(--gold-soft);
    background:var(--panel);
    white-space:nowrap;
  }

  .motif-divider{
    height:16px;
    margin:30px 0 22px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Cpath d='M0 16 L10 0 L20 16 L30 0 L40 16' fill='none' stroke='%23CBA135' stroke-width='1' opacity='0.35'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:40px 16px;
  }

  /* ================= BRANCH CARD ================= */
  .branch{
    scroll-margin-top:70px;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:var(--radius);
    padding:22px 20px 20px;
    margin-bottom:16px;
  }
  .branch.alt{background:var(--panel-alt);}
  .branch-name{
    font-family:'Cormorant Garamond', serif;
    font-size:24px;
    font-weight:600;
    color:var(--ivory);
    margin-bottom:2px;
  }
  .branch-tag{
    font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin-bottom:14px;
  }
  .gender-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
  .gbtn{
    display:flex; align-items:center; gap:9px;
    padding:12px 12px;
    border-radius:14px;
    font-weight:700;
    font-size:13px;
  }
  .gbtn .label-stack{display:flex; flex-direction:column; align-items:flex-start; gap:1px;}
  .gbtn .wa-icon{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .gbtn .wa-icon svg{width:18px; height:18px;}
  .gbtn .sub{font-weight:500; font-size:10.5px; opacity:.85;}
  .gbtn.male{background:linear-gradient(180deg, #3D8570, var(--male)); color:#EFFAF5;}
  .gbtn.female{background:linear-gradient(180deg, var(--female-soft), var(--female)); color:#3A1418;}
  .gbtn.male .wa-icon{background:rgba(255,255,255,0.16);}
  .gbtn.female .wa-icon{background:rgba(58,20,24,0.16);}
  .gbtn.male .wa-icon svg{fill:#EFFAF5;}
  .gbtn.female .wa-icon svg{fill:#3A1418;}

  .util-row{display:flex; gap:9px;}
  .util-btn{
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:10px 6px;
    border-radius:12px;
    border:1px solid var(--hairline);
    font-size:12px; font-weight:600;
    color:var(--gold-soft);
    background:rgba(0,0,0,0.12);
  }
  .util-btn.disabled{color:var(--muted); opacity:.45;}

  /* ================= FOOTER ================= */
  footer{
    text-align:center;
    padding:16px 20px 6px;
    color:var(--muted);
    font-size:11.5px;
  }
  footer .handle{color:var(--gold-soft); font-weight:700; display:block; margin-bottom:6px; font-size:13px;}

  /* ================= BOTTOM NAV ================= */
  .bottom-nav{
    position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
    width:calc(100% - 24px); max-width:536px;
    background:rgba(15,36,31,0.88);
    border:1px solid var(--hairline);
    border-radius:22px;
    backdrop-filter:blur(10px);
    display:flex; justify-content:space-between;
    padding:9px 6px;
    z-index:20;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
  }
  .nav-item{
    flex:1;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px;
    border-radius:14px;
    color:var(--muted);
    position:relative;
  }
  .nav-item svg{width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:1.8;}
  .nav-item span{font-size:9.5px; font-weight:700;}
  .nav-item.active{color:var(--gold-bright);}
  .nav-item.active svg{stroke:var(--gold-bright); fill:none;}
  .nav-item .nsoon{
    position:absolute; top:-2px; right:6px;
    background:var(--gold-bright); color:#132720;
    font-size:6.5px; font-weight:800; letter-spacing:.03em;
    padding:1.5px 4px; border-radius:6px;
  }

  @media (min-width:600px){ h1{font-size:48px;} }

  /* ================= LOCATE / MAP PAGE ================= */
  .locate-head{ text-align:center; margin:30px 0 18px; }
  .locate-head .locate-icon{
    width:54px; height:54px; margin:0 auto 12px;
    border-radius:16px; background:var(--panel);
    border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center;
  }
  .locate-head .locate-icon svg{ width:26px; height:26px; stroke:var(--gold-soft); fill:none; stroke-width:1.6; }
  .locate-head h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:600; font-size:28px; margin:0 0 6px;
  }
  .locate-head p{ font-size:13px; color:var(--muted); margin:0; }

  .locate-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:16px 20px; margin:4px 0 18px;
    border:none; border-radius:999px;
    background:linear-gradient(180deg, var(--gold-bright), #B98B23);
    color:#132720; font-weight:800; font-size:14.5px;
    box-shadow:0 10px 22px rgba(203,161,53,0.25);
    cursor:pointer;
  }
  .locate-btn svg{ width:17px; height:17px; fill:#132720; stroke:none; }

  .location-status{
    margin:16px 0 0;
    padding:12px 16px;
    border-radius:14px;
    font-size:12.5px; font-weight:600;
    text-align:center;
  }
  .location-status.status-info{ background:rgba(62,133,112,0.16); color:var(--ivory); border:1px solid rgba(62,133,112,0.4); }
  .location-status.status-warn{ background:rgba(201,123,130,0.16); color:var(--gold-soft); border:1px solid rgba(201,123,130,0.4); }
  .location-status.status-ok{ background:rgba(203,161,53,0.16); color:var(--gold-soft); border:1px solid rgba(203,161,53,0.4); }

  .branch-distance{
    display:none;
    margin-left:8px;
    font-size:10.5px; font-weight:700;
    color:var(--gold-bright);
    background:rgba(203,161,53,0.14);
    padding:3px 9px; border-radius:999px;
    vertical-align:middle;
  }
  .branch.nearest{ border-color:var(--gold-bright); box-shadow:0 0 0 1px var(--gold-bright) inset; }

  .util-btn.primary{
    background:linear-gradient(180deg, var(--gold-bright), #B98B23);
    color:#132720; border:none; font-weight:800;
  }

  /* ================= GOOGLE REVIEWS ================= */
  .review-summary{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin:2px 0 14px;
  }
  .review-stars{ display:inline-flex; gap:1px; }
  .star{ color:rgba(232,217,168,0.25); font-size:15px; line-height:1; }
  .star.filled{ color:var(--gold-bright); }
  .star.sm{ font-size:11px; }
  .review-score{ font-weight:800; font-size:13px; color:var(--gold-soft); }
  .review-count{ font-size:11.5px; color:var(--muted); }

  .review-list{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
  .review-card{
    background:rgba(0,0,0,0.14);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:12px 14px;
  }
  .review-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .review-avatar{
    width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  }
  .review-avatar-fallback{
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-alt); color:var(--gold-soft);
    font-weight:800; font-size:13px;
  }
  .review-author{ font-size:12.5px; font-weight:700; color:var(--ivory); }
  .review-meta{ display:flex; align-items:center; gap:6px; margin-top:2px; }
  .review-time{ font-size:10.5px; color:var(--muted); }
  .review-text{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:0; }

  .review-attribution{
    margin-top:10px; text-align:right;
    font-size:10.5px; color:var(--muted);
  }
  .review-attribution a{ color:var(--gold-soft); font-weight:700; }

  /* ================= BRANCH PHOTO SLIDER (per cawangan) ================= */
  .branch-photos{
    position:relative;
    height:150px;
    border-radius:14px;
    overflow:hidden;
    margin:2px 0 14px;
    border:1px solid var(--hairline);
    background:var(--panel-alt);
  }
  .branch-photo-slide{
    position:absolute; inset:0;
    background-size:100% 100%; background-position:center; background-repeat:no-repeat; transform:scale(1.5); transform:scale(1.3); transform:scale(1.2); transform:scale(1.1); transform:scale(1); transform:scale(1.08); transform:scale(1.08); transform:scale(1.03);
    opacity:0; transition:opacity .6s ease;
  }
  .branch-photo-slide.active{ opacity:1; }
  .branch-photo-dots{
    position:absolute; bottom:8px; left:0; right:0;
    display:flex; justify-content:center; gap:5px; z-index:2;
  }
  .branch-photo-dots .bp-dot{
    width:5px; height:5px; border-radius:50%;
    background:rgba(246,241,228,0.4); border:none; padding:0; cursor:pointer;
  }
  .branch-photo-dots .bp-dot.active{ background:var(--gold-bright); width:13px; border-radius:4px; }

  /* ================= ADMIN: PHOTO GALLERY (branch form) ================= */
  .photo-gallery{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;
  }
  .photo-gallery-item{
    position:relative; width:96px; height:96px; border-radius:10px; overflow:hidden;
    border:1px solid var(--hairline);
  }
  .photo-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo-gallery-item form{ position:absolute; top:4px; right:4px; margin:0; }
  .photo-remove-btn{
    width:20px; height:20px; border-radius:50%; border:none;
    background:rgba(0,0,0,0.6); color:#fff; font-size:14px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }