/* ==========================================================================
   Amara Coffee House - Company Profile
   Tema: Hitam & Emas Elegan
   ========================================================================== */

:root{
  --black: #0c0c0d;
  --black-soft: #17161a;
  --charcoal: #221f22;
  --cream: #f7f2e9;
  --cream-dim: #efe7d8;
  --gold: #cda45e;
  --gold-light: #e6c98a;
  --gold-deep: #a67c3d;
  --text-dark: #2a2622;
  --text-muted: #6f6a63;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,.45);
  --ff-serif: 'Playfair Display', serif;
  --ff-sans: 'Jost', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--ff-sans);
  color: var(--text-dark);
  background: var(--cream);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
h1,h2,h3,h4{ font-family: var(--ff-serif); font-weight:600; line-height:1.2; color:var(--black); }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-deep); font-weight:500; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head.light .eyebrow{ color: var(--gold-light); justify-content:center; }
.section-head.light h2{ color:var(--white); }
.section-head .eyebrow{ justify-content:center; }

/* ---------- Reveal animation ---------- */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px; border-radius:999px; font-size:.92rem; font-weight:500;
  letter-spacing:.03em; transition: all .35s var(--ease); white-space:nowrap;
}
.btn-gold{ background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color:var(--black); box-shadow:0 12px 30px -10px rgba(205,164,94,.6); }
.btn-gold:hover{ transform: translateY(-3px); box-shadow:0 18px 34px -10px rgba(205,164,94,.75); }
.btn-line{ border:1px solid rgba(255,255,255,.4); color:var(--white); }
.btn-line:hover{ background:rgba(255,255,255,.1); border-color:var(--gold); }
.btn-outline{ border:1px solid var(--gold-deep); color:var(--black); }
.btn-outline:hover{ background:var(--black); color:var(--gold-light); border-color:var(--black); }
.btn.full{ width:100%; }

/* ---------- Preloader ---------- */
.preloader{ position:fixed; inset:0; background:var(--black); z-index:9999; display:flex; align-items:center; justify-content:center; transition: opacity .6s ease, visibility .6s ease; }
.preloader-cup{ width:46px; height:46px; border:3px solid rgba(205,164,94,.25); border-top-color: var(--gold); border-radius:50%; animation: spin 0.9s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.preloader.done{ opacity:0; visibility:hidden; }

/* ---------- Header ---------- */
.header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 0; transition: all .4s var(--ease); }
.header.scrolled{ padding:12px 0; background: rgba(12,12,13,.92); backdrop-filter: blur(10px); box-shadow:0 10px 30px -15px rgba(0,0,0,.5); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:42px; height:42px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ff-serif); font-size:1.15rem; color:var(--gold-light);
}
.logo-text{ display:flex; flex-direction:column; font-family: var(--ff-serif); font-weight:600; font-size:1.15rem; letter-spacing:.06em; color:var(--white); line-height:1.1; }
.logo-text small{ font-family: var(--ff-sans); font-size:.55rem; letter-spacing:.32em; color:var(--gold-light); font-weight:400; margin-top:3px; }
.nav{ display:flex; gap:34px; }
.nav a{ color:rgba(255,255,255,.82); font-size:.92rem; letter-spacing:.02em; position:relative; padding:4px 0; transition:color .3s; }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease); }
.nav a:hover, .nav a.active{ color:var(--gold-light); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav-cta{ border-color: var(--gold); color:var(--gold-light); }
.nav-cta:hover{ background:var(--gold); color:var(--black); }
.hamburger{ display:none; flex-direction:column; gap:5px; width:26px; }
.hamburger span{ height:2px; background:var(--white); border-radius:2px; transition: all .3s var(--ease); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background:
  radial-gradient(ellipse at 75% 20%, rgba(205,164,94,.18), transparent 55%),
  linear-gradient(160deg, rgba(12,12,13,.94) 0%, rgba(26,23,18,.88) 55%, rgba(12,12,13,.97) 100%),
  url('https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&w=1600&q=70') center/cover no-repeat;
}
.hero-pattern{ position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(circle, rgba(205,164,94,.35) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.6) 40%, transparent 90%);
}
.hero-content{ position:relative; z-index:2; padding-top:110px; max-width:760px; }
.hero .eyebrow{ color: var(--gold-light); }
.hero h1{ color:var(--white); font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom:22px; }
.hero h1 span{ color:var(--gold-light); font-style:italic; }
.hero-desc{ color:rgba(255,255,255,.72); font-size:1.05rem; max-width:560px; margin-bottom:36px; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:70px; }
.hero-scroll{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.5); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.hero-scroll span{ width:1px; height:34px; background: linear-gradient(var(--gold-light), transparent); position:relative; }

/* ---------- About ---------- */
.about{ padding:130px 0; background: var(--cream); }
.about-inner{ display:grid; grid-template-columns: .85fr 1.15fr; gap:80px; align-items:center; }
.about-visual{ position:relative; height:460px; }
.frame{ position:absolute; border-radius: var(--radius); box-shadow: var(--shadow); background-size:cover; background-position:center; }
.frame-1{ width:78%; height:82%; top:0; left:0; background-image: linear-gradient(150deg, rgba(12,12,13,.15), rgba(12,12,13,.5)), url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=900&q=70'); }
.frame-2{ width:56%; height:52%; bottom:0; right:0; border:6px solid var(--cream); background-image: linear-gradient(150deg, rgba(12,12,13,.05), rgba(12,12,13,.35)), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=700&q=70'); }
.about-badge{ position:absolute; left:-10px; bottom:14%; background:var(--black); color:var(--white); border-radius:50%; width:118px; height:118px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow: var(--shadow); border:1px solid rgba(205,164,94,.4); }
.about-badge strong{ font-family:var(--ff-serif); font-size:1.7rem; color:var(--gold-light); }
.about-badge span{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:4px; }
.about-text p{ color: var(--text-muted); margin-bottom:16px; max-width:560px; }
.about-points{ margin:26px 0 34px; display:flex; flex-direction:column; gap:16px; }
.about-points li{ display:flex; gap:16px; align-items:flex-start; color:var(--text-dark); font-size:.98rem; }
.about-points li span{ flex:none; width:34px; height:34px; border-radius:50%; background: var(--black); color:var(--gold-light); font-family:var(--ff-serif); font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.about-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; border-top:1px solid rgba(0,0,0,.1); padding-top:28px; }
.about-stats strong{ display:block; font-family:var(--ff-serif); font-size:1.7rem; color:var(--gold-deep); }
.about-stats span{ font-size:.78rem; color:var(--text-muted); }

/* ---------- Menu ---------- */
.menu{ padding:130px 0; background: var(--white); }
.menu-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:50px; }
.tab-btn{ padding:12px 26px; border-radius:999px; border:1px solid rgba(0,0,0,.12); color:var(--text-muted); font-size:.9rem; letter-spacing:.02em; transition:all .3s var(--ease); }
.tab-btn:hover{ border-color: var(--gold-deep); color:var(--text-dark); }
.tab-btn.active{ background:var(--black); border-color:var(--black); color:var(--gold-light); }
.menu-panel{ display:none; }
.menu-panel.active{ display:block; animation: fadeIn .5s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.menu-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1px; background: rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.08); border-radius: var(--radius); overflow:hidden; }
.menu-item{ display:flex; align-items:center; gap:18px; background:var(--white); padding:24px; transition: background .3s; }
.menu-item:hover{ background: var(--cream); }
.menu-icon{ flex:none; width:46px; height:46px; border-radius:50%; background: linear-gradient(150deg, var(--gold-light), var(--gold-deep)); position:relative; }
.menu-icon::after{ content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px; background-color:var(--black); }
.menu-info{ flex:1; }
.menu-info h4{ font-size:1.05rem; margin-bottom:4px; }
.menu-info p{ font-size:.85rem; color:var(--text-muted); }
.menu-price{ flex:none; font-family:var(--ff-serif); color:var(--gold-deep); font-weight:600; }

/* ---------- Gallery ---------- */
.gallery{ padding:130px 0; background: var(--black); }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 220px); gap:16px; }
.gallery-item{ position:relative; border-radius: var(--radius); overflow:hidden; background-size:cover; background-position:center; transition: transform .5s var(--ease); }
.gallery-item:hover{ transform: scale(1.015); }
.g-1{ grid-column:span 2; background-image:url('https://images.unsplash.com/photo-1481833761820-0509d3217039?auto=format&fit=crop&w=1000&q=70'); }
.g-2{ background-image:url('https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=700&q=70'); }
.g-3{ background-image:url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=700&q=70'); }
.g-4{ background-image:url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=700&q=70'); }
.g-5{ grid-column:span 2; background-image:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1000&q=70'); }
.g-6{ background-image:url('https://images.unsplash.com/photo-1453614512568-c4024d13c247?auto=format&fit=crop&w=700&q=70'); }
.gallery-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:20px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 60%); opacity:0; transition: opacity .35s; }
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{ color:var(--gold-light); font-family:var(--ff-serif); font-size:1.1rem; }

/* ---------- Testimoni ---------- */
.testimoni{ padding:130px 0; background: var(--cream); }
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.testi-card{ background:var(--white); border-radius: var(--radius); padding:36px 30px; box-shadow: var(--shadow); }
.stars{ color:var(--gold); letter-spacing:2px; margin-bottom:16px; }
.testi-card p{ color:var(--text-dark); font-size:.98rem; margin-bottom:26px; font-style:italic; }
.testi-person{ display:flex; align-items:center; gap:14px; }
.avatar{ width:44px; height:44px; border-radius:50%; background: var(--black); color:var(--gold-light); display:flex; align-items:center; justify-content:center; font-family:var(--ff-serif); font-size:.85rem; }
.testi-person strong{ display:block; font-size:.92rem; }
.testi-person small{ color:var(--text-muted); font-size:.78rem; }

/* ---------- Lokasi ---------- */
.lokasi{ padding:130px 0; background: var(--white); }
.lokasi-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
.info-row{ display:flex; gap:18px; margin-bottom:26px; }
.info-icon{ flex:none; width:46px; height:46px; border-radius:50%; background: var(--black); position:relative; }
.info-icon::after{ content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px; background-color: var(--gold-light); }
.info-icon.small{ width:34px; height:34px; display:inline-flex; vertical-align:middle; margin-right:10px; }
.info-icon.small::after{ width:15px; height:15px; }
.info-row strong{ display:block; margin-bottom:4px; }
.info-row p{ color:var(--text-muted); }
.hours{ margin-top:6px; border-collapse:collapse; }
.hours td{ padding:2px 0; color:var(--text-muted); font-size:.92rem; }
.hours td:first-child{ padding-right:18px; color:var(--text-dark); }
.lokasi-map{ height:420px; }
.map-embed{ height:100%; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.08); }
.map-embed iframe{ width:100%; height:100%; border:0; filter: grayscale(45%) contrast(1.08) brightness(.97); }

/* ---------- Kontak ---------- */
.kontak{ padding:130px 0; background: var(--cream-dim); }
.kontak-inner{ display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; }
.kontak-text p{ color:var(--text-muted); margin-bottom:30px; max-width:440px; }
.contact-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:30px; }
.contact-list a{ display:flex; align-items:center; color:var(--text-dark); font-size:.95rem; transition:color .3s; }
.contact-list a:hover{ color:var(--gold-deep); }
.socials{ display:flex; gap:12px; }
.social-icon{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(0,0,0,.15); position:relative; transition: all .3s var(--ease); }
.social-icon::after{ content:''; position:absolute; inset:0; margin:auto; width:18px; height:18px; background-color: var(--text-dark); transition: background-color .3s; }
.social-icon:hover{ background:var(--black); border-color:var(--black); }
.social-icon:hover::after{ background-color: var(--gold-light); }
.footer .social-icon{ border-color:rgba(255,255,255,.2); }
.footer .social-icon::after{ background-color: rgba(255,255,255,.75); }
.kontak-form{ background:var(--white); border-radius: var(--radius); padding:40px; box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; color:var(--text-muted); margin-bottom:8px; letter-spacing:.02em; }
.field input, .field textarea{ width:100%; padding:13px 16px; border:1px solid rgba(0,0,0,.15); border-radius:10px; font-family:inherit; font-size:.92rem; color:var(--text-dark); background:var(--cream); transition: border-color .3s; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--gold-deep); }
.form-note{ margin-top:14px; font-size:.85rem; color: var(--gold-deep); text-align:center; min-height:1.2em; }

/* ---------- Footer ---------- */
.footer{ background: var(--black); color:rgba(255,255,255,.7); padding:90px 0 0; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand p{ margin:18px 0 22px; font-size:.9rem; max-width:320px; color:rgba(255,255,255,.55); }
.footer-links h5, .footer-newsletter h5{ color:var(--white); font-family:var(--ff-serif); font-size:1rem; margin-bottom:20px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; font-size:.9rem; }
.footer-links a:hover{ color: var(--gold-light); }
.footer-links p{ font-size:.9rem; margin-bottom:14px; color:rgba(255,255,255,.55); }
.footer-newsletter p{ font-size:.88rem; margin-bottom:18px; color:rgba(255,255,255,.55); }
.newsletter-form{ display:flex; border:1px solid rgba(255,255,255,.2); border-radius:999px; overflow:hidden; }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:13px 18px; color:var(--white); font-family:inherit; }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ padding:0 20px; background: var(--gold); color:var(--black); font-size:1.1rem; }
.footer .form-note{ text-align:left; color: var(--gold-light); margin-top:12px; }
.footer-bottom{ text-align:center; padding:26px 0; font-size:.82rem; color:rgba(255,255,255,.45); }

/* ---------- Floating buttons ---------- */
.whatsapp-float{ position:fixed; right:26px; bottom:26px; width:58px; height:58px; border-radius:50%; background:#25D366; z-index:900; box-shadow:0 12px 26px -8px rgba(37,211,102,.6); display:flex; align-items:center; justify-content:center; }
.whatsapp-float::after{ content:''; width:26px; height:26px; background-color:#fff; }
.to-top{ position:fixed; right:26px; bottom:96px; width:44px; height:44px; border-radius:50%; background:var(--black); color:var(--gold-light); font-size:1.1rem; z-index:900; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .35s var(--ease); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }

/* ---------- Icon shapes (mask-based) ---------- */
.icon-cup, .icon-leaf, .icon-wheat, .icon-cake,
.icon-pin, .icon-clock, .icon-phone, .icon-mail,
.icon-instagram, .icon-facebook, .icon-whatsapp{
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.info-icon.icon-pin::after, .info-icon.icon-clock::after, .info-icon.icon-phone::after, .info-icon.icon-mail::after{
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
}
.icon-pin::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.4 6.5 11.1 7.3 11.8.4.3 1 .3 1.4 0C13.5 21.1 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.4 6.5 11.1 7.3 11.8.4.3 1 .3 1.4 0C13.5 21.1 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E"); }
.icon-clock::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10.4l4 2.4-.8 1.3-4.7-2.8V7h1.5v5.4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10.4l4 2.4-.8 1.3-4.7-2.8V7h1.5v5.4z'/%3E%3C/svg%3E"); }
.icon-phone::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.4 2.7 3.6 4.9 6.3 6.3l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.4 2.7 3.6 4.9 6.3 6.3l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z'/%3E%3C/svg%3E"); }
.icon-mail::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 5h18a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm1.5 2.3V17h17V7.3l-8.5 6-8.5-6zm.7-.3l7.8 5.5L20.8 7H5.2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 5h18a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm1.5 2.3V17h17V7.3l-8.5 6-8.5-6zm.7-.3l7.8 5.5L20.8 7H5.2z'/%3E%3C/svg%3E"); }

.social-icon.icon-instagram::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm5 3.5A5.5 5.5 0 1112 18a5.5 5.5 0 010-11zm0 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm5.8-1.2a1.2 1.2 0 11-2.4 0 1.2 1.2 0 012.4 0z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm5 3.5A5.5 5.5 0 1112 18a5.5 5.5 0 010-11zm0 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm5.8-1.2a1.2 1.2 0 11-2.4 0 1.2 1.2 0 012.4 0z'/%3E%3C/svg%3E"); }
.social-icon.icon-facebook::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.2h-3V7.7c0-.9.2-1.6 1.6-1.6h1.5V3.2C16.4 3.1 15.3 3 14 3c-2.6 0-4.4 1.6-4.4 4.5v2.3H7v3.2h2.6V21h3.9z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.2h-3V7.7c0-.9.2-1.6 1.6-1.6h1.5V3.2C16.4 3.1 15.3 3 14 3c-2.6 0-4.4 1.6-4.4 4.5v2.3H7v3.2h2.6V21h3.9z'/%3E%3C/svg%3E"); }
.social-icon.icon-whatsapp::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15.1L2 22l5.1-1.3A10 10 0 1012 2zm0 18a8 8 0 01-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1112 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1s-.6.8-.7.9c-.1.1-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.2-.4.1-.1 0-.3 0-.4 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.5-.4h-.5c-.1 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.1 1.6 2.5 3.9 3.4.6.2 1 .4 1.3.5.5.2 1 .1 1.4.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15.1L2 22l5.1-1.3A10 10 0 1012 2zm0 18a8 8 0 01-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1112 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1s-.6.8-.7.9c-.1.1-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.2-.4.1-.1 0-.3 0-.4 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.5-.4h-.5c-.1 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.1 1.6 2.5 3.9 3.4.6.2 1 .4 1.3.5.5.2 1 .1 1.4.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E"); }

.whatsapp-float::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15.1L2 22l5.1-1.3A10 10 0 1012 2zm0 18a8 8 0 01-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1112 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1s-.6.8-.7.9c-.1.1-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.2-.4.1-.1 0-.3 0-.4 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.5-.4h-.5c-.1 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.1 1.6 2.5 3.9 3.4.6.2 1 .4 1.3.5.5.2 1 .1 1.4.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15.1L2 22l5.1-1.3A10 10 0 1012 2zm0 18a8 8 0 01-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1112 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1s-.6.8-.7.9c-.1.1-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.2-.4.1-.1 0-.3 0-.4 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.5-.4h-.5c-.1 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.1 1.6 2.5 3.9 3.4.6.2 1 .4 1.3.5.5.2 1 .1 1.4.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E"); }

.menu-icon::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 3h13v9a5 5 0 01-5 5H9a5 5 0 01-5-5V3zm13 3h2a3 3 0 013 3 4 4 0 01-4 4h-1V6zm0 2v4h1a2 2 0 002-2 1 1 0 00-1-1h-2zM4 19h13v2H4v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 3h13v9a5 5 0 01-5 5H9a5 5 0 01-5-5V3zm13 3h2a3 3 0 013 3 4 4 0 01-4 4h-1V6zm0 2v4h1a2 2 0 002-2 1 1 0 00-1-1h-2zM4 19h13v2H4v-2z'/%3E%3C/svg%3E"); }
.menu-icon.icon-leaf::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 4c-8.8 0-16 5.4-16 14 0 .8.7 1.4 1.5 1.3C6.9 12 12.6 6.9 20 5.5c.7-.1 1.1-1-.1-1.4A9 9 0 0020 4z'/%3E%3Cpath d='M4.5 20.8c4-4 8-7 14-10-4.5 6-9 10-14 10z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 4c-8.8 0-16 5.4-16 14 0 .8.7 1.4 1.5 1.3C6.9 12 12.6 6.9 20 5.5c.7-.1 1.1-1-.1-1.4A9 9 0 0020 4z'/%3E%3Cpath d='M4.5 20.8c4-4 8-7 14-10-4.5 6-9 10-14 10z'/%3E%3C/svg%3E"); }
.menu-icon.icon-wheat::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2v20M8 6c0 2 2 3 4 3s4-1 4-3M7 11c0 2 2 3 5 3s5-1 5-3M6.5 16c0 2 2.3 3 5.5 3s5.5-1 5.5-3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2v20M8 6c0 2 2 3 4 3s4-1 4-3M7 11c0 2 2 3 5 3s5-1 5-3M6.5 16c0 2 2.3 3 5.5 3s5.5-1 5.5-3'/%3E%3C/svg%3E"); }
.menu-icon.icon-cake::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l1.5 3H10.5L12 2zM5 10a7 7 0 0114 0v2H5v-2zm-1 4h16v2H4v-2zm1 4h14v2a2 2 0 01-2 2H7a2 2 0 01-2-2v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l1.5 3H10.5L12 2zM5 10a7 7 0 0114 0v2H5v-2zm-1 4h16v2H4v-2zm1 4h14v2a2 2 0 01-2 2H7a2 2 0 01-2-2v-2z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .about-inner, .lokasi-inner, .kontak-inner{ grid-template-columns:1fr; }
  .about-visual{ height:380px; margin-bottom:20px; }
  .footer-inner{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .testi-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-rows: repeat(2, 200px); }
}

@media (max-width: 860px){
  .nav, .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  .header.open .nav{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background: rgba(12,12,13,.97); padding:24px; gap:0; backdrop-filter: blur(10px);
  }
  .header.open .nav a{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .header.open .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .header.open .hamburger span:nth-child(2){ opacity:0; }
  .header.open .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .menu-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:repeat(2,1fr); row-gap:22px; }
}

@media (max-width: 600px){
  .container{ padding:0 18px; }
  .about, .menu, .gallery, .testimoni, .lokasi, .kontak{ padding:90px 0; }
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, 160px); }
  .g-1, .g-5{ grid-column:span 2; }
  .footer-inner{ grid-template-columns:1fr; }
  .kontak-form{ padding:28px; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
}