@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800;900&display=swap');
:root{--blue:#0878e8;--cyan:#12b8df;--navy:#092e69;--pale:#effaff;--line:#cfeaff;--muted:#52739e;--green:#08b765}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--pale);color:var(--navy);font-family:'Nunito Sans',Arial,sans-serif;font-size:15px;line-height:1.65}a{color:inherit;text-decoration:none}.site-header{min-height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:10px clamp(20px,5vw,80px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--blue);font-size:28px;font-weight:900;letter-spacing:-1px}.brand img{width:48px;height:48px;border-radius:50%;object-fit:contain}.main-nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{font-size:13px;font-weight:800;padding:10px 11px;border-radius:14px;white-space:nowrap}.main-nav a:hover,.main-nav a.active{background:#dff4ff;color:#0067dc}.header-actions{display:flex;gap:8px;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:13px;padding:13px 18px;font-weight:900;line-height:1.2;border:1px solid transparent;transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #005bb31c}.btn-blue{background:linear-gradient(110deg,#0878e8,#0759dc);color:#fff}.btn-green{background:var(--green);color:#fff}.btn-light{background:#fff;color:var(--blue);border-color:#b9e2ff}.menu-toggle{display:none;background:#e3f6ff;border:0;border-radius:10px;padding:10px 12px;color:var(--blue);font-size:20px}.home-hero{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:center;padding:32px clamp(20px,4.5vw,70px) 18px;background:linear-gradient(110deg,#eefaff,#e0f7ff)}.hero-copy{max-width:650px}.eyebrow{color:#0075ed;font-weight:900;font-size:12px;letter-spacing:1.8px;margin:0 0 10px}.hero-copy h1{font-size:clamp(38px,4vw,58px);line-height:1.02;letter-spacing:-2px;margin:0 0 14px;color:var(--navy);font-weight:900}.hero-copy h1 span{color:var(--blue)}.lead{font-size:15px;line-height:1.8;max-width:590px;margin:0 0 20px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.tiny-note{font-size:10px;color:var(--muted);margin:10px 0 0}.hero-visual{position:relative;min-height:410px}.hero-image{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#0878e8,#8ce7fa);box-shadow:0 18px 35px #0969b51a}.hero-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}.hours-sticker{position:absolute;top:28px;left:5%;width:124px;height:124px;border-radius:50%;background:#092b68;border:7px solid #fff;outline:4px solid #05c5ff;box-shadow:0 8px 22px #00275d55;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);line-height:1.05}.hours-sticker strong{font-size:34px;color:#ffec35}.hours-sticker small{font-size:11px;font-weight:900}.vending-card{position:absolute;right:3%;top:15px;width:142px;padding:10px;background:linear-gradient(160deg,#005bd9,#09a7e8);border:4px solid white;outline:2px solid #6ee7ff;border-radius:18px;box-shadow:0 10px 22px #003d7e55;text-align:center;color:white;transform:rotate(2deg)}.vending-title{font-size:11px;font-weight:900;line-height:1.2}.vending-title small{display:block;color:#ffed3b;font-size:9px}.vending-shelves{margin:8px 0;background:#eafaff;border:2px solid #78e6ff;border-radius:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px 3px;font-size:20px}.vending-foot{font-size:8px;font-weight:900;color:#fff35a}.wifi-sticker{position:absolute;right:2%;bottom:16px;background:linear-gradient(100deg,#034aa9,#0784e9);color:#fff;border:3px solid #b8f3ff;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:10px;max-width:245px;box-shadow:0 8px 22px #003c7b55}.wifi-sticker>span{font-size:29px}.wifi-sticker strong,.wifi-sticker small{display:block;line-height:1.25}.wifi-sticker strong{font-size:12px}.wifi-sticker small{font-size:10px;margin-top:4px}.brand-sticker{position:absolute;left:16px;bottom:15px;background:#fff;padding:8px 14px;border-radius:16px;box-shadow:0 8px 20px #003b722b;display:flex;gap:9px;align-items:center;font-size:22px}.brand-sticker b,.brand-sticker small{display:block;line-height:1.2}.brand-sticker b{font-size:13px}.brand-sticker small{font-size:9px;color:var(--muted)}.quick-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 clamp(20px,4.5vw,70px);background:#e5f8ff}.benefit{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:13px 16px;min-height:70px}.benefit>span{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#e0f6ff;color:var(--blue);font-size:22px}.benefit b,.benefit small{display:block;line-height:1.35}.benefit b{font-size:13px}.benefit small{font-size:11px;color:var(--muted);margin-top:3px}.home-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;padding:42px clamp(20px,4.5vw,70px)}.feature-photo{height:290px;border-radius:23px;overflow:hidden;border:5px solid #fff;box-shadow:0 14px 32px #075aa51b;background:#bdeeff}.feature-photo img{width:100%;height:100%;object-fit:cover}.feature-copy h2,.section-heading h2{font-size:clamp(27px,3vw,40px);line-height:1.15;margin:0 0 13px;letter-spacing:-.7px}.feature-copy p:not(.eyebrow){color:var(--muted)}.home-links{padding:15px clamp(20px,4.5vw,70px) 55px}.section-heading{margin-bottom:20px}.link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.link-card,.panel{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 25px #0878e80a}.link-card{padding:22px;transition:transform .18s,box-shadow .18s}.link-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #0878e81a}.link-card>span{font-size:29px}.link-card h3{margin:8px 0 4px}.link-card p{color:var(--muted);font-size:13px}.link-card b{color:var(--blue);font-size:13px}.site-footer{background:#062b65;color:white;padding:30px clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-brand b,.footer-brand span{display:block}.footer-brand b{font-size:23px}.footer-brand span,.site-footer p{font-size:12px;color:#b7d9ff}.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}.inner-main{max-width:1420px;margin:auto;padding:28px clamp(20px,5vw,70px) 60px}.page-hero{padding:34px;border-radius:28px;background:linear-gradient(110deg,#0878e8,#12b8df);color:white;margin-bottom:30px}.page-hero .eyebrow{color:#e2f9ff}.page-hero h1{font-size:clamp(30px,3.5vw,46px);line-height:1.15;margin:0 0 10px;letter-spacing:-1px}.page-hero>p:last-child{max-width:760px;margin:0;line-height:1.8}.two-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.panel{padding:25px;min-width:0}.panel h2{font-size:23px;line-height:1.25;margin:12px 0}.panel p,.panel li{color:var(--muted)}.panel ul{padding-left:21px}.panel li{margin:8px 0}.pill{display:inline-block;background:#e2f6ff;color:#0073e6;border-radius:99px;padding:6px 12px;font-size:10px;font-weight:900}.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.steps article{border:1px solid var(--line);border-radius:20px;padding:18px}.step-num{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:var(--blue);color:white;font-weight:900}.steps h3{font-size:15px;margin:10px 0 5px}.steps p{font-size:13px;margin:0;line-height:1.7}.info-note{background:#e7f8ff;border-radius:15px;padding:13px 15px;color:#4c7099!important;font-size:12px}.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.price-card{min-height:300px}.price{display:block;color:var(--blue);font-size:32px;font-weight:900;margin:4px 0}.small{font-size:12px;color:var(--muted)}.mini-feature{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:13px;margin-top:10px}.mini-feature>span{width:42px;height:42px;display:grid;place-items:center;background:#e1f6ff;border-radius:13px;font-size:22px}.mini-feature b{font-size:13px}.mini-feature p{font-size:11px;margin:2px 0 0}.payment-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:18px 0}.payment-grid div{min-height:77px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--blue);font-size:21px}.payment-grid b{font-size:12px;color:var(--navy)}.emoji-big{font-size:28px}.vending-demo{max-width:250px;margin:20px auto 0;background:linear-gradient(150deg,#0562dc,#11b6e5);border:5px solid #e1fbff;outline:1px solid #9eeaff;border-radius:20px;padding:13px;color:#fff;text-align:center;box-shadow:0 12px 24px #0878e81b}.vending-demo .vending-title{font-size:13px}.vending-demo .vending-title small{font-size:10px}.vending-demo .vending-shelves{grid-template-columns:repeat(3,1fr);font-size:23px;padding:10px}.facility-card{min-height:285px}.map-frame{height:360px;border-radius:18px;overflow:hidden;background:#e0f3ff}.map-frame iframe{width:100%;height:100%;border:0}.member-banner{background:linear-gradient(110deg,#0a367a,#0878e8);color:#fff;border-radius:27px;padding:30px;margin-bottom:28px}.member-banner h2{font-size:30px;margin:10px 0}.member-banner p{line-height:1.8}.member-banner .pill{background:#e7f6ff}.timeline{border-left:3px solid #c7eaff;margin:20px 0 0 6px;padding-left:20px}.timeline>div{position:relative;margin:18px 0}.timeline>div:before{content:"";position:absolute;width:11px;height:11px;background:var(--blue);border:3px solid #d9f5ff;border-radius:50%;left:-28px;top:6px}.timeline p{margin:4px 0;font-size:13px}
@media(max-width:1150px){.site-header{gap:12px;padding:10px 20px}.main-nav a{padding:9px 7px;font-size:12px}.header-actions .btn{padding:11px 12px;font-size:12px}.brand{font-size:24px}.home-hero{gap:20px}.hero-visual{min-height:360px}.link-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.site-header{flex-wrap:wrap;position:sticky}.menu-toggle{display:block;margin-left:auto}.header-actions{margin-left:auto}.main-nav{display:none;order:4;flex-basis:100%;justify-content:flex-start;align-items:stretch}.main-nav.open{display:flex}.main-nav a{font-size:13px}.home-hero{grid-template-columns:1fr;padding-top:25px}.hero-copy{max-width:none}.hero-visual{min-height:380px}.quick-benefits{grid-template-columns:1fr;padding-top:10px}.home-feature{grid-template-columns:1fr}.two-cards{grid-template-columns:1fr}.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-hero{padding:26px}.inner-main{padding-top:22px}}
@media(max-width:520px){.brand img{width:39px;height:39px}.brand{font-size:22px}.header-actions .btn{padding:10px;font-size:11px}.header-actions .btn:first-child{display:none}.main-nav.open{display:grid;grid-template-columns:repeat(2,1fr)}.hero-copy h1{font-size:42px}.hero-visual{min-height:310px}.hours-sticker{width:95px;height:95px;top:15px}.hours-sticker strong{font-size:27px}.vending-card{width:118px;right:2%;top:10px}.vending-shelves{font-size:17px}.wifi-sticker{max-width:205px;padding:8px;bottom:10px}.wifi-sticker strong{font-size:10px}.brand-sticker{bottom:10px;left:8px}.hero-actions .btn{width:100%}.feature-photo{height:220px}.link-grid,.price-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.panel{padding:19px}.page-hero h1{font-size:31px}.page-hero{padding:23px}.payment-grid{grid-template-columns:repeat(3,1fr)}.map-frame{height:280px}.site-footer{display:block}.footer-links{margin:18px 0}.site-footer p{margin-bottom:0}}

/* Penyesuaian khusus halaman Tentang Nyuciin */
.about-page .about-hero{position:relative;overflow:hidden;padding:30px 34px;background:linear-gradient(110deg,rgba(0,104,225,.94),rgba(0,177,216,.91)),url('assets/foto-toko-banner.jpeg') center/cover}
.about-page .about-hero-brand{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:#fff;font-weight:900;font-size:11px;letter-spacing:1px}
.about-page .about-hero-brand img{width:62px;height:62px;object-fit:contain;background:#fff;border:3px solid #fff;border-radius:50%;box-shadow:0 5px 15px #003a8055}
.about-page .about-hero .eyebrow{margin-top:4px}
.about-page .about-hero>p:last-of-type{max-width:900px}
.about-page .about-motto{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.about-page .about-motto span{background:#fff;color:#075cc8;border:1px solid #c6f4ff;border-radius:99px;padding:7px 13px;font-size:11px;font-weight:900;box-shadow:0 4px 12px #003b7d22}
.about-page .story-panel{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.88)),url('assets/foto-lokasi-asli.jpeg') center/cover;border-color:#b9e4ff}
.about-page .story-panel p{color:#365a84}
.about-page .about-values{display:flex;gap:8px;flex-wrap:wrap}
.about-page .about-values b{display:inline-block;background:#e2f6ff;color:#006bdc;border-radius:99px;padding:5px 10px;font-size:12px}
@media(max-width:700px){.about-page .about-hero{padding:24px}.about-page .about-hero-brand img{width:52px;height:52px}}

/* Social media contact panels */
.nyuciin-social-panel { margin-top: 24px; }
.nyuciin-social-panel > p { color: #58769c; line-height: 1.7; }
.nyuciin-social-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.nyuciin-social-grid a { display:flex; align-items:center; gap:12px; min-width:0; padding:14px; border:1px solid #cfe7ff; border-radius:16px; background:#fff; color:#0a2e64; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.nyuciin-social-grid a:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,93,180,.10); }
.nyuciin-social-grid a span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }
.nyuciin-social-grid small { font-size:12px; color:#6682a6; }
.ns-icon { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:13px; color:#fff; font-size:25px; font-weight:800; }
.ns-icon.instagram { background:linear-gradient(135deg,#7454d8,#e44883,#ffad52); }
.ns-icon.facebook { background:#1877f2; }
.ns-icon.threads { background:#171717; }
.ns-icon.whatsapp { background:#08b86b; }
.ns-arrow { margin-left:auto; color:#6e91b8; font-size:18px; }
@media(max-width:600px) { .nyuciin-social-grid { grid-template-columns:1fr; } }


/* Shared header + Hubungi Kami dropdown, aligned with Beranda */

/* Menu Hubungi Kami: styling khusus Beranda, tidak memengaruhi halaman lain */
.social-popover {
  position:absolute; z-index:20; right:4%; top:7%; width:290px; padding:14px;
  background:rgba(255,255,255,.98); border:1px solid #cceaff; border-radius:18px;
  box-shadow:0 18px 48px rgba(0,43,105,.24); color:#082d69;
  font-family:Arial,Helvetica,sans-serif; line-height:1.35; backdrop-filter:blur(12px);
}
.social-popover[hidden] { display:none !important; }
.social-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 3px 10px; margin-bottom:6px; border-bottom:1px solid #e5f3ff; font-size:15px; font-weight:800; }
.social-close { border:0; background:#edf7ff; color:#0a3978; width:28px; height:28px; border-radius:50%; font-size:21px; line-height:1; cursor:pointer; }
.social-link { display:flex; align-items:center; gap:11px; margin:5px 0; padding:10px; border-radius:12px; text-decoration:none !important; color:#082d69 !important; background:#f7fbff; border:1px solid #edf5ff; transition:transform .15s,background .15s,box-shadow .15s; }
.social-link:hover { transform:translateY(-1px); background:#fff; box-shadow:0 5px 14px rgba(0,65,140,.1); }
.social-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:11px; color:#fff; }
.social-icon svg { width:23px; height:23px; fill:currentColor; display:block; }
.social-link.instagram .social-icon { background:linear-gradient(135deg,#6b45d8,#e1306c,#ffb347); }
.social-link.tiktok .social-icon { background:#111827; }
.social-link.facebook .social-icon { background:#1877f2; }
.social-link.threads .social-icon { background:#111; }
.social-link>span:nth-child(2) { display:flex; flex-direction:column; min-width:0; gap:3px; }
.social-link b { font-size:13px; }
.social-link small { font-size:11px; color:#6a82a4; }
.social-arrow { margin-left:auto; font-size:18px; color:#7190b4; }
.social-note { margin:10px 3px 1px; font-size:10px; color:#7186a5; }
@media(max-width:650px) { .social-popover { right:3%; top:9%; width:min(290px,90vw); } }

.site-header { position:sticky; top:0; z-index:100; min-height:78px; background:#fff; }
.site-header .header-actions { position:relative; }
.site-header .social-popover { position:absolute; top:calc(100% + 12px); right:0; width:290px; }
@media(max-width:1050px) {
 .site-header { gap:12px; padding:10px 18px; flex-wrap:wrap; }
 .site-header .brand { font-size:24px; }
 .site-header .main-nav { order:3; flex-basis:100%; }
}
@media(max-width:700px) {
 .site-header { min-height:68px; }
 .site-header .main-nav { display:none; }
 .site-header .main-nav.open { display:flex; flex-direction:column; align-items:stretch; }
 .site-header .header-actions .btn { padding:10px 12px; font-size:12px; }
 .site-header .social-popover { position:fixed; top:76px; right:12px; width:min(290px,calc(100vw - 24px)); }
}


/* Header mobile: tombol Hubungi Kami tetap tampil di samping WhatsApp */
@media (max-width: 520px) {
  .site-header {
    flex-wrap: nowrap;
    gap: 7px;
    padding: 8px 10px;
    min-height: 64px;
  }
  .site-header .brand {
    gap: 5px;
    min-width: 0;
    font-size: 19px;
    letter-spacing: -0.7px;
  }
  .site-header .brand img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  .site-header .menu-toggle {
    flex: 0 0 34px;
    width: 34px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    font-size: 18px;
  }
  .site-header .header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-left: 0;
  }
  .site-header .header-actions .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 9px 8px;
    font-size: 10px;
    line-height: 1.2;
    border-radius: 11px;
  }
  .site-header .header-actions .btn:first-child {
    display: inline-flex !important;
  }
}
@media (max-width: 370px) {
  .site-header {
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .site-header .brand {
    font-size: 17px;
    gap: 4px;
  }
  .site-header .brand img {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }
  .site-header .menu-toggle {
    flex-basis: 30px;
    width: 30px;
  }
  .site-header .header-actions {
    gap: 4px;
  }
  .site-header .header-actions .btn {
    padding: 8px 6px;
    font-size: 9px;
  }
}


/* FIX menu HP: navigasi menjadi dropdown overlay, tidak mendorong konten halaman */
@media (max-width: 820px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: nowrap;
  }
  .site-header .main-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    flex: none;
    order: initial;
    margin: 0;
    padding: 12px 14px 16px;
    background: #fff;
    border-top: 1px solid #cfeaff;
    border-bottom: 1px solid #cfeaff;
    box-shadow: 0 14px 24px rgba(0, 42, 100, .14);
    z-index: 101;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
  }
  .site-header .main-nav.open {
    display: flex !important;
  }
  .site-header .main-nav a {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.35;
  }
}
@media (max-width: 520px) {
  .site-header {
    min-height: 64px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .site-header .menu-toggle {
    position: relative;
    z-index: 102;
    flex: 0 0 34px;
    width: 34px;
    height: 36px;
    margin-left: auto;
  }
  .site-header .header-actions {
    position: relative;
    z-index: 102;
    flex: 0 0 auto;
    margin-left: 0;
  }
}