/* =============================================================================
   BUROQ TRANS — multi-page styles
   Loaded after css/style.css. Covers the shared Layanan dropdown, the inner
   page hero/breadcrumb, the service detail template and the Tentang Kami
   layout. All values reuse the tokens defined in css/style.css.
   ============================================================================= */

/* =============================================================================
   SHARED SHELL — Layanan dropdown (desktop panel + mobile accordion)
   ============================================================================= */
.nav-item--drop{ display:flex; align-items:center; gap:2px; position:relative }
.nav-item--drop > a{ flex:0 1 auto }

.nav-drop-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; border:0; border-radius:5px;
  background:none; color:#E9EEF8; cursor:pointer;
}
.nav-drop-toggle .ico{ width:14px; height:14px; transition:transform .2s ease }
.nav-drop-toggle:hover{ color:var(--gold-light) }
.nav-item--drop.is-open .nav-drop-toggle{ color:var(--gold) }
.nav-item--drop.is-open .nav-drop-toggle .ico{ transform:rotate(180deg) }

@media (min-width:1024px){
  .nav-dropdown{
    position:absolute; top:calc(100% + 26px); left:50%;
    transform:translate(-50%,8px); transform-origin:top center;
    width:296px; padding:10px; margin:0;
    background:#fff; border:1px solid #E6EAF1; border-radius:12px;
    box-shadow:0 30px 60px -36px rgba(4,16,40,.6);
    opacity:0; visibility:hidden; z-index:80;
    /* visibility is not transitioned: the panel must be focusable the moment
       it opens so keyboard users can move into the submenu */
    transition:opacity .18s ease, transform .18s ease;
  }
  /* invisible bridge so the pointer can travel from the link to the panel */
  .nav-dropdown::before{ content:""; position:absolute; left:0; right:0; top:-26px; height:26px }
  .nav-item--drop.is-open .nav-dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0) }

  .nav-dropdown a{
    display:block; padding:9px 12px; border-radius:7px;
    font-family:Inter,system-ui,sans-serif; font-size:13px; font-weight:500;
    letter-spacing:0; text-transform:none; color:#28374F;
  }
  .nav-dropdown a::after{ display:none }
  .nav-dropdown a:hover, .nav-dropdown a:focus-visible{ background:#F4F7FC; color:#B99212 }
  .nav-dropdown .is-all{
    margin-bottom:4px; padding:10px 12px 11px;
    font-family:Poppins,sans-serif; font-size:11.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:#0E1B33;
    border-bottom:1px solid var(--line); border-radius:7px 7px 0 0;
  }
  .nav-dropdown .is-all:hover, .nav-dropdown .is-all:focus-visible{ background:#fff; color:#B99212 }
}

@media (max-width:1023px){
  .nav-item--drop{ flex-wrap:wrap; align-items:center; gap:0 }
  .nav-item--drop > a{ flex:1 1 auto }
  .nav-drop-toggle{ width:44px; height:44px; margin-left:auto }
  .nav-dropdown{
    position:static; flex-basis:100%; width:100%; display:none;
    padding:2px 0 8px 12px; margin:0;
    background:transparent; border:0; border-left:1px solid rgba(217,181,43,.35);
    box-shadow:none; border-radius:0;
  }
  .nav-item--drop.is-open .nav-dropdown{ display:block }
  .nav-dropdown a{
    display:block; padding:10px 2px; font-size:12.8px;
    text-transform:none; color:#C8D2E4;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-dropdown a::after{ display:none }
  .nav-dropdown .is-all{ color:#fff; font-weight:600 }
}

/* =============================================================================
   INNER PAGES — shared hero, breadcrumb, sections
   ============================================================================= */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  padding:calc(var(--header-h) + clamp(30px,4.5vw,54px)) 0 clamp(38px,5vw,60px);
  background:
    radial-gradient(80% 70% at 78% 12%, rgba(41,78,158,.5), transparent 64%),
    linear-gradient(140deg,#0B2150 0%,#071B3D 54%,#041630 100%);
}
.page-hero::before{
  content:""; position:absolute; right:-90px; top:-70px;
  width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(217,181,43,.22); pointer-events:none;
}
.page-hero::after{
  content:""; position:absolute; right:clamp(10px,6vw,90px); bottom:-60px;
  width:190px; height:190px; transform:rotate(18deg); pointer-events:none;
  background:linear-gradient(150deg,rgba(217,181,43,.45),rgba(217,181,43,0) 70%);
}
.page-hero > .container-main{ position:relative; z-index:1 }

.breadcrumb{ margin-bottom:clamp(18px,2.4vw,26px) }
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:Poppins,sans-serif; font-size:12.5px; color:#8FA0BD;
}
.breadcrumb li{ display:flex; align-items:center; gap:8px }
.breadcrumb li + li::before{ content:"/"; color:#5D6C88 }
.breadcrumb a{ color:#C6D0E2 }
.breadcrumb a:hover{ color:var(--gold-light) }
.breadcrumb [aria-current="page"]{ color:var(--gold) }

.page-title{
  color:#fff; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(30px,4.6vw,52px); line-height:1.13;
  max-width:24ch; overflow-wrap:break-word;
}
.page-hero .eyebrow{ margin-bottom:12px }
.page-lead{
  margin-top:16px; max-width:64ch; color:#C3CCDE;
  font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.75;
}
.page-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.hero-chips{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-chips li{
  display:flex; align-items:center; gap:8px;
  font-family:Poppins,sans-serif; font-size:13px; color:#B7C4DA;
}
.hero-chips .ico{ width:15px; height:15px; color:var(--gold) }

.page-section{ padding:clamp(46px,5.5vw,74px) 0 }
.page-section--surface{ background:var(--surface) }

.page-head{ max-width:740px }
.page-head .h2{ margin-top:12px }
.page-head .body-text{ margin-top:12px; max-width:62ch }
.center-head{ margin-inline:auto; text-align:center }
.center-head .body-text{ margin-inline:auto }
.section-cta{ display:flex; justify-content:center; margin-top:32px }

.h3{
  font-family:Poppins,system-ui,sans-serif; font-weight:700;
  font-size:clamp(17px,1.7vw,20px); line-height:1.4; color:#0E1B33;
}

/* service cards rendered as links (directory + related) */
.svc-grid--related{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr }
.svc-photo-note{
  font-size:10.5px; line-height:1.4; color:#A3AFC2;
  text-align:center; max-width:22ch;
}

/* =============================================================================
   SERVICE DETAIL TEMPLATE
   ============================================================================= */
.detail-layout{
  display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,.9fr);
  gap:clamp(26px,3.5vw,46px); align-items:start;
}
.detail-main{ min-width:0 }

.service-figure{ margin:0 0 clamp(24px,3vw,34px) }
.service-photo{
  position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:#EEF2F8; display:flex; align-items:center; justify-content:center;
}
.service-photo:not(.is-empty){ background:#fff }
.service-photo img{ width:100%; height:100%; object-fit:contain }
.service-photo.is-empty::before{
  content:""; position:absolute; inset:10px; z-index:0;
  border:1px dashed #C9D3E2; border-radius:9px;
}
.service-photo .svc-photo-empty{ position:relative; z-index:1; padding:0 18px; text-align:center; gap:8px }
.service-photo .svc-photo-empty .ico{ width:26px; height:26px }
.service-photo .svc-photo-label{ font-size:11px }
.service-photo .svc-photo-note{ font-size:12px; max-width:34ch }
.service-figure figcaption{ margin-top:10px; font-size:12.4px; color:var(--muted) }

.prose .h2{ margin:10px 0 14px; max-width:22ch }
.prose .body-text + .body-text{ margin-top:12px }

.use-case-block{
  margin-top:clamp(24px,3vw,32px);
  padding-top:clamp(22px,2.6vw,28px);
  border-top:1px solid var(--line);
}
.use-case-block .h3{ margin-bottom:14px }
.check-list{ display:grid; gap:11px }
.check-list li{ display:flex; gap:10px; font-size:14.2px; line-height:1.65; color:#3E4C64 }
.check-list .ico{ width:16px; height:16px; flex:none; margin-top:3px; color:#C6971A }

.detail-aside{
  display:grid; gap:18px; align-content:start;
  position:sticky; top:calc(var(--header-h) + 18px);
}
.aside-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 24px; box-shadow:var(--shadow-card);
}
.aside-card--navy{
  background:linear-gradient(160deg,#0E2350,#071B3D); border-color:#0E2350;
  color:#C3CCDE; box-shadow:0 30px 50px -38px rgba(7,27,61,.9);
}
.aside-title{
  margin:0; font-family:Poppins,sans-serif; font-size:15.5px; font-weight:700;
  line-height:1.4; color:#fff;
}
.aside-title--dark{ color:#0E1B33; font-size:14.5px }
.aside-text{ margin-top:10px; font-size:13.2px; line-height:1.7; color:#B7C4DA }
.aside-card .btn{
  width:100%; margin-top:16px; height:46px; padding:8px 14px;
  font-size:12px; gap:8px; white-space:normal; text-align:center; line-height:1.25;
}
.aside-list{
  margin-top:16px; padding-top:14px; display:grid; gap:10px;
  border-top:1px solid rgba(255,255,255,.14);
}
.aside-list li{ display:flex; gap:9px; font-size:13px; line-height:1.5; color:#C3CCDE }
.aside-list .ico{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--gold) }
.aside-links{ margin-top:8px }
.aside-links li + li{ border-top:1px solid #EEF1F6 }
.aside-links a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; font-size:13.4px; color:#28374F;
}
.aside-links a:hover{ color:#B99212 }
.aside-links .ico{ width:13px; height:13px; flex:none; color:#B99212 }

.benefit-grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(26px,3vw,34px);
}

.cta-band{
  position:relative; overflow:hidden; background:var(--navy); color:#fff;
  padding:clamp(44px,5.5vw,68px) 0; text-align:center;
}
.cta-band::before{
  content:""; position:absolute; left:-80px; bottom:-120px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(41,78,158,.55),transparent 70%);
}
.cta-band > .container-main{ position:relative; z-index:1 }
.cta-band h2{
  color:#fff; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(23px,3vw,33px); line-height:1.3;
  max-width:28ch; margin-inline:auto;
}
.cta-band p{
  margin:14px auto 0; max-width:60ch;
  color:#AFBBD2; font-size:14.4px; line-height:1.75;
}
.cta-band .page-actions{ justify-content:center; margin-top:26px }

/* =============================================================================
   TENTANG KAMI
   ============================================================================= */
.about-intro{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,52px); align-items:start;
}
.about-intro .h2{ margin:12px 0 16px }
.about-intro .body-text + .body-text{ margin-top:12px }

.fact-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:clamp(20px,2.6vw,28px); box-shadow:var(--shadow-card);
}
.fact-list{ margin:16px 0 0; display:grid; gap:12px }
.fact-list > div + div{ border-top:1px solid #F0F3F8; padding-top:12px }
.fact-list dt{
  font-family:Poppins,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.fact-list dd{ margin:3px 0 0; font-size:14px; line-height:1.6; color:#1E2C44; overflow-wrap:anywhere }
.fact-list a:hover{ color:#B99212 }

.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,32px); margin-top:clamp(26px,3vw,36px); align-items:stretch;
}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-card);
}
.contact-list{ margin-top:18px; display:grid; gap:16px }
.contact-list li{ display:flex; gap:12px; align-items:flex-start }
.c-ico{
  width:38px; height:38px; flex:none; border-radius:10px;
  background:#FCF3D8; color:#C6971A; display:grid; place-items:center;
}
.c-ico .ico{ width:17px; height:17px }
.c-label{
  display:block; font-family:Poppins,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.c-value{ display:block; margin-top:2px; font-size:13.8px; line-height:1.6; color:#1E2C44; overflow-wrap:anywhere }
a.c-value:hover{ color:#B99212 }

.social-block{ margin-top:22px; padding-top:18px; border-top:1px solid #EEF1F6 }
.social-label{
  font-family:Poppins,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.social-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.social-link{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-family:Poppins,sans-serif; font-size:12.5px; font-weight:500; color:#28374F;
}
.social-link .ico{ width:15px; height:15px; color:#B99212 }
.social-link:hover{ border-color:var(--gold); color:#B99212 }
.social-empty{ margin-top:8px; font-size:13px; color:var(--muted) }

.map-panel{
  display:flex; flex-direction:column; min-height:340px; overflow:hidden;
  border:1px solid var(--line); border-radius:16px; background:#fff;
  box-shadow:var(--shadow-card);
}
.map-live{ flex:1 1 auto; display:flex; min-height:340px; background:#E7ECF3 }
.map-live iframe{ width:100%; min-height:340px; border:0; display:block; flex:1 1 auto }
/* bar di bawah peta: alamat + tombol rute ke kantor */
.map-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 18px; padding:14px 18px; background:#fff; border-top:1px solid var(--line);
}
.map-bar-info{
  display:flex; align-items:flex-start; gap:9px; flex:1 1 220px; min-width:0;
  font-size:12.8px; line-height:1.6; color:#4E5B72; overflow-wrap:anywhere;
}
.map-bar-info .ico{ width:16px; height:16px; margin-top:4px; color:var(--gold); flex:none }
.map-open{ height:44px; padding:0 18px; font-size:12px; gap:8px }
.map-open .ico{ width:15px; height:15px }
.map-slot{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:12px; padding:clamp(24px,3vw,34px); width:100%;
}
.map-slot-ico{
  width:44px; height:44px; border-radius:12px;
  background:var(--navy); color:var(--gold-light); display:grid; place-items:center;
}
.map-slot-ico .ico{ width:20px; height:20px }
.map-slot .body-text{ max-width:38ch }
.map-slot .btn{ margin-top:4px; height:44px; font-size:12px; gap:8px }
.map-slot-note{ font-size:11.8px; line-height:1.6; color:#8B99AE }

/* =============================================================================
   INNER PAGE RESPONSIVE
   ============================================================================= */
@media (max-width:1023px){
  .detail-layout{ grid-template-columns:minmax(0,1fr) }
  .detail-aside{ position:static }
  .benefit-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .svc-grid--related{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .about-intro{ grid-template-columns:minmax(0,1fr) }
  .contact-grid{ grid-template-columns:minmax(0,1fr) }
  .map-panel{ min-height:300px }
  .map-live, .map-live iframe{ min-height:300px }
}

@media (max-width:767px){
  .page-hero{ padding-top:calc(var(--header-h) + 26px) }
  .page-hero::after{ display:none }
  .page-title{ font-size:clamp(27px,7vw,36px) }
  .page-actions{ flex-direction:column; align-items:stretch }
  .page-actions .btn{ width:100% }
  .hero-chips{ gap:10px 16px; margin-top:22px; padding-top:18px }
  .hero-chips li{ font-size:12.4px }
  .page-section{ padding:38px 0 }
  .prose .h2{ max-width:none }
  .benefit-grid.cols-3{ grid-template-columns:minmax(0,1fr) }
  .svc-grid--related{ grid-template-columns:minmax(0,1fr); gap:12px }
  .aside-card .btn{ font-size:11.6px }
  .cta-band h2{ font-size:clamp(22px,6vw,28px) }
  .map-slot .btn{ width:100%; justify-content:center }
  .map-bar{ padding:14px 16px }
  .map-open{ width:100%; justify-content:center }
}

@media (max-width:479px){
  .breadcrumb ol{ font-size:11.8px }
  .hero-chips li{ font-size:12px }
}