/* Identitas AMP dan navigasi grup pada layar lebar. */
.brand__logo{width:54px;height:54px;object-fit:contain;flex:none;border-radius:12px;background:#fff}
.brand__copy{min-width:0}
.brand__copy strong{font-size:10px;letter-spacing:.105em}
.brand__copy small{font-size:9px;letter-spacing:.08em}
.drawer-head,.drawer-consult,.nav-home,.app-tabbar{display:none}
.nav-backdrop{display:none}
.amp-group{position:relative;flex:none}
.amp-group summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e5b9bf;border-radius:5px;color:var(--red);font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;user-select:none}
.amp-group summary::-webkit-details-marker{display:none}
.amp-group summary:hover,.amp-group[open] summary{background:#fff4f5;border-color:var(--red)}
.amp-group__chevron{width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.amp-group[open] .amp-group__chevron{transform:translateY(2px) rotate(225deg)}
.amp-group__panel{position:absolute;z-index:90;right:0;top:calc(100% + 13px);width:302px;padding:9px;background:#fff;border:1px solid #e9e7e5;border-radius:15px;box-shadow:0 22px 55px rgba(25,25,35,.14)}
.amp-group__panel:before{content:"";position:absolute;right:22px;top:-7px;width:12px;height:12px;background:#fff;border-top:1px solid #e9e7e5;border-left:1px solid #e9e7e5;transform:rotate(45deg)}
.amp-group__heading{display:block;padding:10px 11px 7px;color:#a2999b;font-size:9px;font-weight:900;letter-spacing:.16em}
.amp-group__panel a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;transition:background .2s,color .2s}
.amp-group__panel a:hover{background:#fff2f3;color:var(--red)}
.amp-group__panel a strong,.amp-group__panel a small{display:block}
.amp-group__panel a strong{font-size:12px;line-height:1.25;color:#292929}
.amp-group__panel a small{font-size:10px;line-height:1.4;color:#84858b;margin-top:4px;font-weight:500}
.amp-group__panel a>span:last-child{font-size:15px;color:#a3a2a3}
.amp-group__panel a:hover>span:last-child{color:var(--red)}
.brand--footer .brand__logo{width:55px;height:55px}

/* Layar ponsel memakai pola app bar, drawer, kartu, dan tab bar. */
@media(max-width:820px){
  :root{--appbar-height:68px;--tabbar-height:70px}
  html{scroll-padding-top:calc(var(--appbar-height) + 12px)}
  body{padding-bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom));background:#f6f6f8}
  body.menu-open{overflow:hidden}
  .container{width:min(100% - 32px,1200px)}
  .topbar{display:none}
  .site-header{height:var(--appbar-height);box-shadow:0 2px 18px rgba(26,25,29,.07);border-bottom:1px solid #eeebeb}
  .site-header__inner{height:var(--appbar-height);gap:10px}
  .brand{gap:9px;min-width:0;white-space:normal}
  .brand__logo{width:46px;height:46px;border:1px solid #f1e4d2;border-radius:12px}
  .brand__copy{border-left:0;padding-left:0;gap:3px}
  .brand__copy strong{font-size:11px;line-height:1.22;letter-spacing:.045em}
  .brand__copy small{font-size:9px;line-height:1.2;letter-spacing:.045em}
  .menu-toggle{width:44px;height:44px;border-radius:12px;margin-left:auto;flex:none;background:#faf8f8;border-color:#ece7e7}
  .header-cta{display:none}
  .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:70;background:rgba(21,19,24,.48);backdrop-filter:blur(2px)}
  .site-header{z-index:75}
  .site-nav{display:flex;position:fixed;z-index:80;top:0;bottom:0;left:0;right:auto;width:min(360px,88vw);height:100dvh;margin:0;padding:calc(18px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));background:#fff;border:0;border-radius:0 22px 22px 0;box-shadow:22px 0 60px rgba(0,0,0,.16);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:0;transform:translateX(-110%);visibility:hidden;pointer-events:none;transition:transform .25s ease,visibility .25s}
  .site-nav.is-open{display:flex;transform:translateX(0);visibility:visible;pointer-events:auto}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;min-height:58px;margin-bottom:13px;border-bottom:1px solid #eee8e8;color:#262326;font-size:16px;font-weight:850;letter-spacing:-.02em}
  .drawer-close{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:#f6f2f2;color:var(--red);font-size:27px;line-height:1}
  .site-nav>a{display:block;padding:15px 2px;border-bottom:1px solid #f0eded;font-size:14px;font-weight:700;color:#2f2c2d}
  .site-nav>a:hover{color:var(--red)}
  .site-nav .nav-home{display:block}
  .site-nav .drawer-consult{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:15px 17px;background:var(--red);border:0;border-radius:12px;color:#fff}
  .drawer-consult .icon{width:17px;height:17px}
  .amp-group{width:100%}
  .amp-group summary{justify-content:space-between;width:100%;padding:16px 2px;border:0;border-bottom:1px solid #f0eded;border-radius:0;color:#2f2c2d;font-size:14px}
  .amp-group summary:hover,.amp-group[open] summary{background:none;border-color:#f0eded;color:var(--red)}
  .amp-group__panel{position:static;width:auto;max-width:none;margin:9px 0 5px;padding:6px;border:0;border-radius:13px;background:#f8f6f6;box-shadow:none}
  .amp-group__panel:before{display:none}
  .amp-group__heading{padding:9px 9px 4px;font-size:9px}
  .amp-group__panel a{padding:11px 9px;border-radius:8px;min-height:52px}
  .amp-group__panel a strong{font-size:12px}
  .amp-group__panel a small{font-size:10px}
  .app-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;position:fixed;z-index:60;left:0;right:0;bottom:0;height:calc(var(--tabbar-height) + env(safe-area-inset-bottom));padding:4px 7px env(safe-area-inset-bottom);background:rgba(255,255,255,.98);border-top:1px solid #ece8e8;box-shadow:0 -8px 25px rgba(29,26,30,.07);backdrop-filter:blur(18px)}
  .app-tabbar a,.app-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:58px;padding:5px 0;border:0;background:none;color:#77747a;font-size:10px;font-weight:700;line-height:1.1;white-space:nowrap}
  .app-tabbar .icon{width:21px;height:21px;stroke-width:1.9}
  .app-tabbar .is-active,.app-tabbar [aria-expanded="true"]{color:var(--red)}
  .app-tabbar .is-active .icon{stroke-width:2.4}
  .app-tabbar__wa .icon{color:#199d5b}
  .floating-wa{display:none}
  .hero{background:#fff}
  .hero__grid{min-height:0;display:flex;flex-direction:column}
  .hero__copy{padding:36px 0 26px}
  .hero .eyebrow{margin-bottom:17px;font-size:9px;letter-spacing:.1em}
  .hero h1{max-width:560px;margin-bottom:18px;font-size:clamp(37px,9.7vw,48px);line-height:1.075}
  .hero__lead{max-width:570px;margin-bottom:21px;font-size:14px;line-height:1.68}
  .hero__actions{gap:16px}
  .hero__actions .button{width:100%;min-height:54px;border-radius:12px}
  .hero__actions .text-link{font-size:12px}
  .hero__micro,.hero__foot{display:none}
  .hero__visual{height:245px;min-height:245px;margin:0 0 22px}
  .hero__image-wrap{inset:0;border-radius:18px}
  .hero__image-wrap img{object-position:68% center}
  .hero__visual-label{right:11px;bottom:11px;min-height:0;width:min(240px,76%);padding:11px 13px;border-radius:10px;font-size:8px}
  .hero__visual-label strong{font-size:8px}
  .hero__photo-note{top:9px;right:9px;border-radius:6px}
  .confidence{background:#f6f6f8;border:0;padding:16px 0 4px}
  .confidence__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0}
  .confidence__intro{grid-column:1/-1;padding:4px 2px 9px}
  .confidence__intro strong{font-size:17px;max-width:310px}
  .confidence__item,.confidence__item:first-of-type{display:flex;gap:8px;min-height:90px;padding:16px 13px;border:1px solid #ece7e7;border-radius:15px;background:#fff;box-shadow:0 5px 15px rgba(35,27,31,.035)}
  .confidence__item:last-child{grid-column:1/-1;min-height:70px}
  .confidence__item strong{font-size:12px;line-height:1.3}
  .confidence__item small{font-size:10px}
  .section,.contact{padding:55px 0}
  .section--light,.section--white{background:#f6f6f8}
  .section-heading{margin-bottom:25px}
  .section-heading--split{gap:14px}
  .section-heading h2,.faq__intro h2,.contact__copy h2{font-size:clamp(33px,8.4vw,42px)}
  .section-heading>p{font-size:13px}
  .mode-grid,.work-grid,.steps{gap:12px}
  .mode-card{min-height:0;padding:26px 22px 0;border-radius:19px;box-shadow:0 9px 24px rgba(35,27,31,.04)}
  .mode-card h3{font-size:30px;margin:20px 0 10px}
  .mode-card>div:nth-child(2) p{font-size:13px;line-height:1.7}
  .mode-card__bottom{margin-top:26px}
  .keyword-link{min-height:36px;border-radius:8px;font-size:11px}
  .card-cta{margin-inline:-22px;padding:17px 22px;border-radius:0 0 19px 19px}
  .work-card{min-height:0;padding:23px;border-radius:18px;box-shadow:0 5px 16px rgba(35,27,31,.03)}
  .work-card__head{margin-bottom:20px}
  .work-card h3{font-size:20px}
  .work-card>p{font-size:12px}
  .keyword-list--work .keyword-link{min-height:34px;padding:7px 9px;font-size:10px}
  .step{border-radius:17px;box-shadow:0 5px 16px rgba(35,27,31,.03)}
  .compare{border-radius:17px;overflow:hidden}
  .region-card{border-radius:17px}
  .faq__items{border:0;display:grid;gap:9px}
  .faq-item{padding:0 16px;border:1px solid #eee9e9;border-radius:14px;background:#fff}
  .faq-item summary{min-height:58px;font-size:13px}
  .contact{background:#f3f1ef}
  .contact__copy{padding:0}
  .contact-form{padding:31px 23px;border-radius:19px;overflow:hidden}
  .contact-form:before{height:4px}
  .form-row input,.form-row select,.form-row textarea{min-height:48px;border-radius:10px}
  .form-submit{border-radius:11px}
  .footer{padding-top:52px}
  .footer__bottom{padding-bottom:30px}
  .privacy-page{padding:38px 0 55px;background:#f6f6f8}
  .privacy-page__box{border-radius:18px;padding:30px 23px}
}
@media(max-width:370px){.brand__copy strong{font-size:10px}.brand__copy small{font-size:8px}.app-tabbar a,.app-tabbar button{font-size:9px}.hero h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.site-nav{transition:none}}