/* Ikon garis */
.hs-i{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hs-wa{width:1.15rem;height:1.15rem;flex:none;fill:currentColor}
.hs-bulat{display:grid;place-items:center;flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--pasir2);color:var(--laut)}
.hs-bulat .hs-i{width:1.4rem;height:1.4rem}

/* Kepala halaman */
.hs-head .wrap{max-width:720px}
.hs-head h1{font-size:clamp(1.9rem,4.4vw,2.8rem)}
.hs-merek{display:flex;align-items:center;justify-content:center;gap:clamp(.7rem,2vw,1.1rem)}
.hs-merek img{flex:none;width:clamp(3.6rem,8vw,5rem);height:auto;filter:drop-shadow(0 6px 14px rgba(20,55,68,.15))}
.hs-merek>span{text-align:left}
.hs-merek small{display:block;margin-top:.3rem;font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--laut2)}
.hs-head .hs-tagline{font-family:var(--serif);font-size:1.2rem;color:var(--karang);margin-bottom:.9rem}
.hs-head p{max-width:600px;line-height:1.75;text-wrap:pretty}
.hs-btn-wa,.hs-btn-email{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.hs-btn-wa{background:var(--hijau)}
.hs-btn-wa:hover{background:#317E54;box-shadow:0 8px 20px rgba(58,145,97,.25)}
.hs-btn-email{background:var(--krem);color:var(--laut);border:1.5px solid #BFD9DF}
.hs-btn-email:hover{background:var(--laut);color:#fff;border-color:var(--laut);box-shadow:0 8px 20px rgba(27,85,102,.22)}
.hs-btn-email .hs-i{width:1.1rem;height:1.1rem}
.hs-lihat{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;color:var(--laut2);font-weight:600;font-size:.95rem;text-decoration:none}
.hs-lihat .hs-i{transform:rotate(90deg);width:1rem;height:1rem;transition:transform .25s var(--ease)}
.hs-lihat:hover .hs-i{transform:rotate(90deg) translateX(3px)}

/* Tata letak: menu bagian di kiri, isi di tengah, kotak pemesanan di kanan */
.hs-body{display:grid;grid-template-columns:220px minmax(0,1fr) 320px;gap:2.4rem;align-items:start;max-width:1440px;padding:2.4rem 1.2rem 5rem}
.hs-main{min-width:0;display:grid;gap:3.2rem}
#kamar,#fasilitas,#mandi,#makanan,#kafe,#galeri,#lokasi{scroll-margin-top:90px}

/* Menu bagian halaman */
.hs-nav{position:sticky;top:90px;display:grid;gap:.25rem;padding:.7rem;background:var(--krem);border:1px solid var(--line);border-radius:18px}
.hs-nav-judul{padding:.3rem .7rem .5rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hs-nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:12px;border-left:3px solid transparent;color:var(--ink);text-decoration:none;
  font-size:.92rem;font-weight:600;line-height:1.3;transition:background .2s,color .2s,border-color .2s}
.hs-nav a .hs-i{color:var(--laut2)}
.hs-nav a:hover{background:var(--pasir2)}
.hs-nav a.on{background:var(--pasir2);color:var(--laut);border-left-color:var(--karang)}
.hs-judul{margin-bottom:1.2rem}
.hs-judul h2{margin:0 0 .3rem;color:var(--laut)}
.hs-judul p{margin:0;color:var(--muted)}
h3 .hs-i{color:var(--laut2)}

/* Jarak */
.hs-jarak{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.hs-jarak>li{display:grid;gap:.9rem;align-content:start;padding:1.2rem;background:var(--krem);border:1px solid var(--line);border-radius:18px}
.hs-jarak>li>div b{display:block;line-height:1.3}
.hs-km{display:inline-block;margin-top:.3rem;font-family:var(--serif);font-size:1.5rem;color:var(--laut)}
.hs-jarak ul{list-style:none;padding:.8rem 0 0;border-top:1px dashed var(--line);display:grid;gap:.4rem;font-size:.9rem;color:var(--muted)}
.hs-jarak ul li{display:flex;align-items:center;gap:.5rem}

/* Pintasan ke tiap kamar */
.hs-pilih{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-bottom:1.6rem}
.hs-pilih a{display:flex;align-items:center;gap:.6rem;padding:.45rem;background:var(--krem);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;
  transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.hs-pilih a:hover{border-color:var(--laut2);transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,55,68,.1)}
.hs-pilih img{flex:none;width:3.2rem;height:3.2rem;border-radius:10px;object-fit:cover}
.hs-pilih span{display:grid;min-width:0;line-height:1.25}
.hs-pilih small{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--karang)}
.hs-pilih b{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-pilih em{display:flex;align-items:center;gap:.25rem;font-style:normal;font-size:.78rem;color:var(--muted)}
.hs-pilih em .hs-i{width:.85rem;height:.85rem}

/* Kartu kamar: galeri di atas, keterangan di bawah */
.hs-daftar-kamar{display:grid;gap:1.8rem}
.hs-room{scroll-margin-top:90px;overflow:hidden;background:var(--krem);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 30px rgba(20,55,68,.06)}
.hs-galeri{display:grid;gap:.5rem;padding:.6rem .6rem 0}
.hs-utama{position:relative;display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--pasir2);aspect-ratio:16/10}
.hs-utama img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),opacity .3s}
.hs-utama:hover img{transform:scale(1.03)}
.hs-nomor{position:absolute;top:.8rem;left:.8rem;padding:.3rem .8rem;border-radius:999px;background:rgba(255,253,248,.94);color:var(--laut);font-size:.8rem;font-weight:700;letter-spacing:.04em}
.hs-hitung{position:absolute;right:.8rem;bottom:.8rem;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:999px;font-size:.85rem;font-weight:600;
  color:#FFFDF8;background:rgba(14,40,50,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hs-hitung svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.hs-thumbs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
.hs-thumbs::-webkit-scrollbar{display:none}
.hs-thumbs button{position:relative;flex:none;width:5.2rem;height:3.9rem;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--pasir2);
  opacity:.65;transition:opacity .2s,border-color .2s}
.hs-thumbs button:hover,.hs-thumbs button.on{opacity:1}
.hs-thumbs button.on{border-color:var(--karang)}
.hs-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.hs-thumbs span{position:absolute;right:.2rem;bottom:.2rem;display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:rgba(255,253,248,.92);color:var(--laut)}
.hs-thumbs span .hs-i{width:.8rem;height:.8rem;stroke-width:2.2}

.hs-room-isi{padding:1.3rem 1.5rem 1.5rem}
.hs-room-isi header h3{font-size:1.55rem;color:var(--ink)}
.hs-room-isi header h3 span{color:var(--karang)}
.hs-room-isi header p{margin:.2rem 0 0;color:var(--muted)}
.hs-chip{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}
.hs-chip span{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:999px;background:var(--pasir2);color:var(--laut);font-size:.86rem;font-weight:600}
.hs-desk{margin:0 0 1.2rem;color:#45535A;line-height:1.8;text-wrap:pretty}
.hs-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;margin-bottom:1.3rem}
.hs-detail>div{padding:1rem 1.1rem;border-radius:16px;background:var(--pasir)}
.hs-detail>div:last-child{background:#EAF3F5}
.hs-detail h4{margin:0 0 .65rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--laut2)}
.hs-detail p{margin:0;color:#45535A;line-height:1.7;font-size:.95rem;text-wrap:pretty}
.hs-cek{list-style:none;padding:0;display:grid;gap:.45rem}
.hs-cek li{display:flex;align-items:flex-start;gap:.55rem;line-height:1.45;font-size:.95rem}
.hs-cek .hs-i{margin-top:.15rem;color:var(--hijau);stroke-width:2.4}
.hs-kartu-bawah{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.hs-harga{margin:0;color:var(--muted)}
.hs-harga b{font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.hs-catatan{margin:1rem 0 0;font-size:.85rem;color:var(--muted);font-style:italic}
@media (min-width:700px){.hs-desk{text-align:justify;text-justify:inter-word}}

/* Penampil foto layar penuh */
.hs-lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0C1C22;color:#FFFDF8}
.hs-lb::backdrop{background:#0C1C22}
.hs-lb[open]{display:grid;place-items:center;animation:hs-lb .3s ease}
@keyframes hs-lb{from{opacity:0}}
.hs-lb figure{margin:0;display:grid;justify-items:center;gap:.8rem;padding:3.5rem 1rem 1.2rem}
.hs-lb img{max-width:min(92vw,1100px);max-height:calc(100dvh - 8rem);border-radius:12px;object-fit:contain;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.hs-lb figcaption{font-size:.95rem;text-align:center}
.hs-lb figcaption span{opacity:.8}
.hs-lb figcaption small{margin-left:.5rem;padding:.15rem .6rem;border-radius:999px;background:rgba(255,253,248,.15);font-variant-numeric:tabular-nums}
.hs-lb button{position:fixed;display:grid;place-items:center;width:2.9rem;height:2.9rem;border:0;border-radius:50%;cursor:pointer;color:#FFFDF8;background:rgba(255,253,248,.14);transition:background .2s}
.hs-lb button:hover{background:rgba(255,253,248,.28)}
.hs-lb button svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-lb-tutup{top:1rem;right:1rem}
.hs-lb-geser{top:50%;transform:translateY(-50%)}
.hs-lb-geser.kiri{left:1rem}.hs-lb-geser.kanan{right:1rem}

/* Fasilitas */
.hs-fasilitas{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.hs-fasilitas li{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;background:var(--krem);border:1px solid var(--line);border-radius:14px;line-height:1.35;font-size:.95rem}
.hs-fasilitas .hs-i{color:var(--laut2);width:1.3rem;height:1.3rem}
.hs-mandi{margin-top:1rem;padding:1.2rem 1.3rem;background:var(--pasir2);border-radius:18px}
.hs-mandi h3{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;margin-bottom:.8rem}
.hs-mandi ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.hs-mandi li{padding:.3rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.88rem}


/* Lokasi dan kontak */
.hs-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hs-kotak{padding:1.3rem 1.4rem;background:var(--krem);border:1px solid var(--line);border-radius:18px}
.hs-kotak h3{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;margin-bottom:.7rem}
.hs-kotak>p{margin:0 0 .9rem;color:var(--muted);line-height:1.7}
.hs-tautan{display:inline-flex;align-items:center;gap:.4rem;color:var(--laut2);font-weight:600;text-decoration:none}
.hs-tautan:hover{color:var(--laut)}
.hs-tautan .hs-i{transition:transform .25s var(--ease)}
.hs-tautan:hover .hs-i{transform:translateX(3px)}
.hs-kontak{list-style:none;padding:0;display:grid;gap:.15rem}
.hs-kontak a{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.6rem;padding:.5rem .6rem;margin:0 -.6rem;border-radius:10px;color:var(--ink);text-decoration:none;transition:background .2s}
.hs-kontak a:hover{background:var(--pasir2)}
.hs-kontak a>svg{color:var(--laut2)}
.hs-kontak a>.hs-wa{color:var(--hijau)}
.hs-kontak span{font-size:.85rem;color:var(--muted)}
.hs-kontak b{justify-self:end;font-weight:600;font-size:.92rem;text-align:right;overflow-wrap:anywhere}

/* Kotak pemesanan */
.hs-pesan{position:sticky;top:90px}
.hs-pesan-kotak{padding:1.5rem;background:var(--krem);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 34px rgba(20,55,68,.08)}
.hs-pesan-merek{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;padding-bottom:1rem;border-bottom:1px dashed var(--line)}
.hs-pesan-merek img{flex:none;width:2.9rem;height:2.9rem}
.hs-pesan-merek span{display:grid;line-height:1.2}
.hs-pesan-merek b{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--laut)}
.hs-pesan-merek small{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hs-pesan-label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hs-harga-besar{margin:.2rem 0 0}
.hs-harga-besar b{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--laut)}
.hs-pesan-ket{margin:.1rem 0 1.1rem;font-size:.9rem;color:var(--muted)}
.hs-jam{display:grid;gap:.5rem;margin:0;padding:1rem 0 0;border-top:1px dashed var(--line)}
.hs-jam div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem}
.hs-jam .hs-i{color:var(--laut2)}
.hs-jam dt{color:var(--muted);font-size:.92rem}
.hs-jam dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* Tombol pesan di kartu kamar */
.hs-pesan-kamar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.hs-pesan-kamar>span{font-size:.82rem;color:var(--muted);margin-right:.15rem}
.hs-pesan-kamar .hs-wa,.hs-pesan-kamar .hs-i{width:1rem;height:1rem}

/* Muncul pelan saat digulir */
.js-muncul .muncul{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.js-muncul .muncul.in{opacity:1;transform:none}

@media (max-width:1200px){
  .hs-body{grid-template-columns:minmax(0,1fr) 320px;max-width:1120px}
  .hs-nav{grid-column:1/-1;top:60px;z-index:5;display:flex;overflow-x:auto;scrollbar-width:none;gap:.3rem;margin:0 -1.2rem;padding:.6rem 1.2rem;border:0;border-radius:0;
    background:linear-gradient(var(--pasir) 82%,rgba(248,246,240,0))}
  .hs-nav::-webkit-scrollbar{display:none}
  .hs-nav-judul{display:none}
  .hs-nav a{flex:none;border-left:0;border-radius:999px;padding:.45rem .9rem;background:var(--krem);border:1px solid var(--line);font-size:.88rem;white-space:nowrap}
  .hs-nav a.on{background:var(--laut);color:#fff;border-color:var(--laut)}
  .hs-nav a.on .hs-i{color:#fff}
  #kamar,#fasilitas,#mandi,#makanan,#kafe,#galeri,#lokasi{scroll-margin-top:130px}
}
@media (max-width:960px){
  .hs-body{grid-template-columns:minmax(0,1fr)}
  .hs-pesan{position:static;max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:700px){
  .hs-body{padding-top:1.6rem;gap:2.2rem}
  .hs-main{gap:2.6rem}
  .hs-jarak,.hs-info,.hs-detail{grid-template-columns:minmax(0,1fr)}
  .hs-pilih{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-room{border-radius:20px}
  .hs-room-isi{padding:1.1rem 1.1rem 1.2rem}
  .hs-utama{aspect-ratio:4/3}
  .hs-lb-geser{top:auto;bottom:1rem;transform:none}
  .hs-jarak>li{grid-template-columns:auto 1fr;align-items:center}
  .hs-jarak ul{grid-column:1/-1}
  .hs-fasilitas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-fasilitas li{flex-direction:column;align-items:flex-start;gap:.45rem}
}
@media (prefers-reduced-motion:reduce){
  .hs-utama img,.hs-pilih a,.hs-tautan .hs-i{transition:none}
  .hs-lb[open]{animation:none}
}

/* Menu makanan: tab kategori dan galeri foto */
.hs-menu{padding:1rem;background:var(--krem);border:1px solid var(--line);border-radius:24px}
.hs-menu-tab{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.5rem;margin-bottom:1rem}
.hs-menu-tab button{display:flex;align-items:center;gap:.65rem;padding:.5rem;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);text-align:left;
  transition:border-color .2s,background .2s,box-shadow .25s var(--ease)}
.hs-menu-tab button:hover{border-color:var(--laut2)}
.hs-menu-tab button[aria-selected=true]{border-color:var(--laut);background:var(--laut);color:#fff;box-shadow:0 10px 22px rgba(27,85,102,.2)}
.hs-menu-tab img{flex:none;width:2.6rem;height:2.6rem;border-radius:10px;object-fit:cover}
.hs-menu-tab span{display:grid;min-width:0;line-height:1.25}
.hs-menu-tab b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-menu-tab small{font-size:.78rem;opacity:.75}
.hs-menu-panel[hidden]{display:none}
.hs-menu-desk{margin:0 .2rem 1rem;color:#45535A;line-height:1.7;text-wrap:pretty}
.hs-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.hs-menu-grid button{position:relative;display:block;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:var(--pasir2);aspect-ratio:1}
.hs-menu-grid button:nth-child(n+7){display:none}
.hs-menu-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.hs-menu-grid button:hover img{transform:scale(1.05)}
.hs-menu-lagi{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,40,50,.55);color:#fff;font-weight:700;font-size:1.15rem;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media (max-width:700px){
  .hs-menu{padding:.7rem;border-radius:20px}
  .hs-menu-tab{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.35rem}
  .hs-menu-tab button{flex-direction:column;gap:.35rem;padding:.5rem .3rem;text-align:center}
  .hs-menu-tab small{display:none}
  .hs-menu-tab b{font-size:.85rem;white-space:normal}
  .hs-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .hs-menu-grid button{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){.hs-menu-grid img{transition:none}}

/* Galeri foto: satu foto besar dan lima foto kecil, keterangan muncul di bawah foto */
.hs-galeri-foto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(130px,14vw,190px);gap:.6rem}
.hs-galeri-foto button{position:relative;display:block;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--pasir2)}
.hs-galeri-foto button:first-child{grid-column:span 2;grid-row:span 2}
.hs-galeri-foto button:nth-child(n+7){display:none}
.hs-galeri-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.hs-galeri-foto button:hover img{transform:scale(1.05)}
.hs-galeri-ket{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .6rem;font-size:.82rem;font-weight:600;line-height:1.3;text-align:left;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,24,30,.72));opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.hs-galeri-foto button:first-child .hs-galeri-ket,.hs-galeri-foto button:hover .hs-galeri-ket,.hs-galeri-foto button:focus-visible .hs-galeri-ket{opacity:1;transform:none}
.hs-galeri-foto button:first-child .hs-galeri-ket{font-size:.95rem;padding:2.4rem 1rem .9rem}
@media (max-width:700px){
  .hs-galeri-foto{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:.45rem}
  .hs-galeri-foto button{border-radius:14px}
  .hs-galeri-foto button:first-child{grid-row:span 2}
  .hs-galeri-foto button:nth-child(6){grid-column:span 2}
  .hs-galeri-ket{display:none}
  .hs-galeri-foto button:first-child .hs-galeri-ket{display:block}
}
@media (prefers-reduced-motion:reduce){.hs-galeri-foto img,.hs-galeri-ket{transition:none}}

/* Kafe: foto senja dengan foto pojok kopi kecil, isi di panel krem hangat */
.hs-kafe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);overflow:hidden;border-radius:26px;background:#FFF6EC;border:1px solid #F1DCC6;
  box-shadow:0 20px 44px rgba(158,62,44,.12)}
.hs-kafe-foto{position:relative;margin:0;min-height:320px;background:linear-gradient(135deg,#E0895A,var(--karang))}
.hs-kafe-foto>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.hs-kafe:hover .hs-kafe-foto>img:first-child{transform:scale(1.04)}
.hs-kafe-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(158,62,44,0) 45%,rgba(120,40,25,.55))}
.hs-kafe-kecil{position:absolute;right:1rem;bottom:1rem;z-index:2;width:38%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:4px solid #FFF6EC;
  box-shadow:0 12px 26px rgba(0,0,0,.25);transform:rotate(3deg);transition:transform .5s var(--ease)}
.hs-kafe:hover .hs-kafe-kecil{transform:rotate(0) translateY(-4px)}
.hs-kafe-foto figcaption{position:absolute;left:1rem;bottom:1rem;z-index:2}
.hs-kafe-gratis{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;border-radius:999px;background:rgba(255,246,236,.95);color:var(--karang);
  font-size:.85rem;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.hs-kafe-gratis .hs-i{width:1rem;height:1rem}
.hs-kafe-isi{padding:2rem clamp(1.3rem,3vw,2.2rem)}
.hs-kafe-label{display:inline-block;padding:.25rem .8rem;border-radius:999px;background:rgba(210,83,58,.1);color:var(--karang);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hs-kafe h2{margin:.7rem 0 .4rem;font-size:clamp(1.5rem,3vw,1.95rem);color:#7A2E1F}
.hs-kafe-isi>p{margin:0 0 1.3rem;color:#7B5A4E;line-height:1.7;text-wrap:pretty}
.hs-kafe ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem}
.hs-kafe li{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:14px;background:#fff;border:1px solid #F1DCC6;font-size:.9rem;font-weight:600;color:var(--ink);
  line-height:1.3;transition:transform .25s var(--ease),border-color .25s}
.hs-kafe li:hover{transform:translateY(-2px);border-color:#E7B89C}
.hs-kafe li span{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:10px;background:#FBE6D9;color:var(--karang)}
.hs-kafe li svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .hs-kafe{grid-template-columns:1fr}
  .hs-kafe-foto{min-height:240px}
}
@media (max-width:520px){
  .hs-kafe ul{grid-template-columns:1fr 1fr}
  .hs-kafe li{font-size:.84rem;padding:.5rem}
}
@media (prefers-reduced-motion:reduce){.hs-kafe-foto>img:first-child,.hs-kafe-kecil,.hs-kafe li{transition:none}}