/* Pusat Gadai Indonesia — web, mengikuti Brand Guideline & template presentasi brand */
:root{
  --dark:#00477A; --mid:#0086BE; --cyan:#04BEE6; --light:#BBE6FB; --beige:#F6F9FC;
  --green:#5AD47E; --green-l:#DDF5E4; --ink:#242423; --muted:#6E6E6E; --line:#D0CECE; --red:#B42318; --red-l:#FDE2DF;
  --head:'Poppins',system-ui,sans-serif; --body:'Nunito Sans',system-ui,sans-serif;
  --r:24px; --grad:linear-gradient(135deg,#00477A 0%,#0086BE 55%,#04BEE6 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);line-height:1.18;color:var(--dark)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tombol: Poppins Bold */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--head);font-weight:700;font-size:15px;
  padding:14px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;line-height:1.2}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:#fff}.btn-dark:hover{box-shadow:0 10px 22px rgba(0,71,122,.28)}
.btn-cyan{background:var(--cyan);color:var(--dark)}.btn-cyan:hover{box-shadow:0 10px 22px rgba(4,190,230,.4)}
.btn-line{background:transparent;border-color:var(--dark);color:var(--dark)}.btn-line:hover{background:var(--dark);color:#fff}
.btn-line-w{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}.btn-line-w:hover{background:#fff;color:var(--dark)}
.btn-green{background:var(--green);color:#0B3D1F}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.eyebrow::before{content:"";width:26px;height:8px;background:url(dots-arrow.png) center/contain no-repeat;filter:none;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--mid))}
.on-dark .eyebrow,.eyebrow.w{color:var(--cyan)}
.section{padding:96px 0;position:relative;overflow:hidden}
.section.beige{background:var(--beige)}
.section-head{max-width:700px;margin-bottom:52px}
.section-head h2{font-size:clamp(28px,4vw,42px);font-weight:700;margin:12px 0 14px}
.section-head p{color:var(--muted);font-size:18px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* header */
header.top{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px}
.nav .logo img{height:42px;width:auto}
.nav ul{display:flex;gap:6px;list-style:none;align-items:center}
.nav ul>li>a,.nav ul>li>button.dd{font-family:var(--body);font-weight:700;font-size:15.5px;color:var(--dark);padding:10px 14px;border-radius:999px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav ul>li>a:hover,.nav ul>li>button.dd:hover,.nav a.act{background:var(--beige)}
.nav a.act{color:var(--mid)}
.dd-wrap{position:relative}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px;min-width:310px;box-shadow:0 18px 40px rgba(0,71,122,.14);display:none}
.dd-wrap.open .dd-menu,.dd-wrap:hover .dd-menu{display:block}
.dd-menu a{display:flex;flex-direction:column;padding:12px 16px;border-radius:14px}
.dd-menu a:hover{background:var(--beige)}
.dd-menu b{font-family:var(--head);font-size:15px;color:var(--dark)}
.dd-menu span{font-size:14px;color:var(--muted)}
.menu-btn{display:none;background:none;border:0;color:var(--dark);cursor:pointer}
@media(max-width:1000px){
  .menu-btn{display:block}
  .nav ul{position:absolute;top:80px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:14px 24px 24px;gap:2px;display:none;max-height:calc(100vh - 80px);overflow:auto}
  .nav ul.open{display:flex}
  .dd-menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0}
  .dd-wrap:hover .dd-menu{display:block}
  .nav .btn{margin-top:10px}
}

/* HERO — supergrafis dari template: krem→cyan, bentuk panah membulat, sudut biru tua */
.hero{position:relative;overflow:hidden;background:#F6F9FC url(hero-bg.jpg) center/cover no-repeat;min-height:640px;display:flex;align-items:center}
.hero .wrap{position:relative;width:100%;display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:end;padding-top:0;padding-bottom:0}
.hero-copy{max-width:560px;position:relative;z-index:2;align-self:center;padding:64px 0}
.pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);color:var(--dark);padding:7px 18px 7px 12px;border-radius:999px;font-family:var(--head);font-weight:600;font-size:13px;margin-bottom:24px}
.pill i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-l)}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;letter-spacing:-.015em;color:var(--dark)}
.hero h1 em{font-style:normal;color:var(--mid)}
.hero p.lead{font-size:20px;margin:22px 0 32px;color:var(--ink);max-width:500px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .trust{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:34px;font-size:15px;font-weight:700;color:var(--dark)}
.hero .trust span::before{content:"";display:inline-block;width:18px;height:18px;border-radius:50%;margin-right:8px;vertical-align:-3px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.hero-photo{position:relative;justify-self:end;width:min(112%,720px);aspect-ratio:16/10;
  -webkit-mask:url(shape.png) center/100% 100% no-repeat;mask:url(shape.png) center/100% 100% no-repeat;background:var(--cyan) center/cover no-repeat}
.hero-dots{position:absolute;right:2%;top:7%;width:110px;opacity:.9;pointer-events:none}
.hero-card{position:absolute;z-index:3;right:6%;bottom:12%;background:#fff;border-radius:18px;padding:14px 18px;display:flex;gap:12px;align-items:center;box-shadow:0 14px 30px rgba(0,71,122,.25);font-family:var(--head)}
.hero-card b{display:block;font-size:20px;color:var(--dark);line-height:1}
.hero-card span{font-size:12.5px;color:var(--muted);font-family:var(--body);font-weight:600}
.hero-card i{width:44px;height:44px;border-radius:14px;background:var(--green-l);display:grid;place-items:center}
.hero-card svg{width:24px;height:24px;stroke:#1E9E4C;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .hero{min-height:0;background:linear-gradient(180deg,#F6F9FC 0%,#F6F9FC 52%,#BBE6FB 78%,#04BEE6 100%)}
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:0}
  .hero-photo{justify-self:center;margin-bottom:-2px}
  .hero-card{right:4%}
}

/* HERO halaman dalam */
.phero{position:relative;overflow:hidden;background:#F6F9FC url(hero-bg.jpg) center/cover no-repeat}
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding-top:64px;padding-bottom:64px;min-height:440px}
.phero h1{font-size:clamp(32px,4.6vw,54px);font-weight:800;letter-spacing:-.01em;margin:6px 0 16px}
.phero p.lead{font-size:19px;max-width:540px;margin-bottom:28px}
.phero .crumb{font-size:14px;font-weight:700;color:var(--mid);margin-bottom:10px}
.phero .crumb a:hover{text-decoration:underline}
.phero .hero-photo{width:min(108%,600px)}
.phero.noimg .wrap{grid-template-columns:1fr;min-height:340px}
@media(max-width:900px){
  .phero{background:linear-gradient(180deg,#F6F9FC 0%,#F6F9FC 55%,#BBE6FB 100%)}
  .phero .wrap{grid-template-columns:1fr;padding-bottom:36px;min-height:0}
  .phero .hero-photo{justify-self:center}
}

/* strip fakta */
.strip{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:30px;padding-bottom:30px}
.strip b{display:block;font-family:var(--head);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--cyan);line-height:1.1}
.strip span{font-size:15px;color:#DCEFFA}
@media(max-width:800px){.strip .wrap{grid-template-columns:1fr 1fr}}

/* kartu & ikon */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;position:relative;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--mid)}
.beige .card{border-color:#E3ECF3}
.ico{width:60px;height:60px;border-radius:50%;background:var(--light);display:grid;place-items:center;margin-bottom:20px}
.ico svg{width:30px;height:30px;stroke:var(--dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;font-weight:600;margin-bottom:8px}
.card p{color:var(--muted);font-size:16.5px}
@media(max-width:960px){.grid3{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}
@media(max-width:620px){.grid3{grid-template-columns:1fr}}

/* trio foto kebutuhan */
.photos{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
.pcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff;background:#ccc center/cover no-repeat}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,71,122,0) 40%,rgba(0,71,122,.88) 100%)}
.pcard div{position:relative;z-index:1;padding:26px}
.pcard b{display:block;font-family:var(--head);font-size:22px;line-height:1.25}
.pcard span{font-size:15px;opacity:.92}
.pcard.tall{min-height:460px}
@media(max-width:900px){.photos{grid-template-columns:1fr}.pcard{min-height:300px!important}}

/* layanan */
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod a{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s;border:1px solid transparent}
.prod a:hover{transform:translateY(-5px);border-color:var(--mid)}
.prod .pic{background:linear-gradient(160deg,var(--light),#E6F6FE);height:220px;display:grid;place-items:center;padding:22px;position:relative;overflow:hidden}
.prod .pic::after{content:"";position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;background:url(icons-light.png) center/contain no-repeat;opacity:.9}
.prod .pic img{max-height:172px;width:auto;max-width:100%;object-fit:contain;position:relative;z-index:1}
.prod .txt{padding:26px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod h3{font-size:21px}.prod p{color:var(--muted);flex:1}
.more{font-family:var(--head);font-weight:600;color:var(--mid);font-size:15px;margin-top:8px}
@media(max-width:900px){.prod{grid-template-columns:1fr}}

/* simulator */
.sim{display:grid;grid-template-columns:1.05fr .95fr;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:#fff}
.sim .form{padding:42px}
.sim .out{background:var(--dark) url(dark-bg.jpg) center/cover;color:#fff;padding:42px;position:relative;overflow:hidden}
.sim .out::after{content:"";position:absolute;right:-90px;bottom:-110px;width:200px;height:220px;background:url(icons-cyan.png) center/contain no-repeat;opacity:.12;pointer-events:none}
.field{margin-bottom:26px}
.field>label,.field .lab{display:flex;justify-content:space-between;gap:10px;font-family:var(--head);font-weight:600;font-size:14.5px;color:var(--dark);margin-bottom:10px}
.field input[type=text]{width:100%;padding:15px 18px;border-radius:14px;border:2px solid var(--line);font:700 20px var(--head);color:var(--dark);background:#fff}
.field input:focus{outline:0;border-color:var(--mid);box-shadow:0 0 0 4px var(--light)}
.field input[type=range]{width:100%;accent-color:var(--mid);margin-top:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{padding:10px 20px;border-radius:999px;border:2px solid var(--line);background:#fff;font:700 14.5px var(--head);cursor:pointer;color:var(--dark)}
.chips button.on{background:var(--dark);border-color:var(--dark);color:#fff}
.out small{color:var(--light);font-size:14px;position:relative}
.out .big{font-family:var(--head);font-weight:800;font-size:clamp(32px,4.2vw,46px);color:var(--cyan);margin:4px 0 22px;position:relative;word-break:break-word}
.out dl{display:grid;gap:10px;position:relative;margin-bottom:22px}
.out dl div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:9px;font-size:15.5px}
.out dt{color:#DCEFFA}.out dd{font-weight:800;text-align:right}
.out .tot dd{color:var(--cyan)}
.note{font-size:13.5px;color:#DCEFFA;margin-top:16px;position:relative}
@media(max-width:900px){.sim{grid-template-columns:1fr}.sim .form,.sim .out{padding:30px 24px}}

/* band gelap */
.dark-band{background:var(--dark) url(dark-bg.jpg) center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band p{color:#DCEFFA}
.dark-band .deco{position:absolute;right:-30px;top:0;height:100%;width:300px;background:url(icons-cyan.png) right center/contain no-repeat;opacity:.28;pointer-events:none}
.gaolgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.gaolgrid h2{font-size:clamp(28px,4vw,44px);margin:12px 0 16px}
.ticks{list-style:none;display:grid;gap:12px;margin:24px 0 30px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:17px}
.ticks li::before{content:"";flex:none;margin-top:3px;width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stores img{height:46px;width:auto}
.gaolpic{position:relative;display:flex;justify-content:center}
.gaolpic .hero-photo{width:min(100%,520px)}
.gaolpic .phone{position:absolute;left:2%;bottom:-30px;width:150px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
@media(max-width:900px){.gaolgrid{grid-template-columns:1fr}.gaolpic .phone{width:110px}}

/* testimoni */
.testi{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
.testi-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4;background:var(--light) center/cover no-repeat}
.quote{background:#fff;border-radius:var(--r);padding:32px 34px 28px;margin-bottom:18px;position:relative}
.quote::before{content:"“";font-family:var(--head);font-weight:800;font-size:76px;line-height:1;color:var(--cyan);position:absolute;top:10px;left:26px}
.quote p{margin-top:36px;font-size:18px}
.who{display:flex;gap:12px;align-items:center;margin-top:18px}
.av{width:46px;height:46px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:600}
.who b{display:block;font-family:var(--head);font-size:15px;color:var(--dark)}
.who span{font-size:14px;color:var(--muted)}
@media(max-width:900px){.testi{grid-template-columns:1fr}}

/* CTA penutup */
.closing{background:linear-gradient(120deg,var(--cyan) 0%,var(--mid) 100%);color:#fff;position:relative;overflow:hidden;padding:84px 0}
.closing::before{content:"";position:absolute;left:-40px;bottom:-30px;width:300px;height:520px;background:url(icons-light.png) center/contain no-repeat;opacity:.28}
.closing::after{content:"";position:absolute;right:-1px;bottom:-1px;width:0;height:0;border-style:solid;border-width:0 0 170px 170px;border-color:transparent transparent var(--dark) transparent}
.closing .wrap{position:relative;z-index:1;text-align:center}
.closing h2{color:#fff;font-size:clamp(28px,4.4vw,48px);font-weight:800}
.closing p{max-width:580px;margin:16px auto 30px;font-size:19px}

/* footer */
footer.foot{background:var(--dark);color:#DCEFFA;padding:72px 0 28px;font-size:15.5px;position:relative;overflow:hidden}
footer.foot::before{content:"";position:absolute;right:0;top:0;width:260px;height:100%;background:url(icons-cyan.png) right top/contain no-repeat;opacity:.18}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;position:relative}
.f-grid h4{font-family:var(--head);color:#fff;font-size:15px;margin-bottom:16px}
.f-grid ul{list-style:none;display:grid;gap:9px}
.f-grid a:hover{color:var(--cyan)}
.chip-logo{display:inline-block;background:#fff;border-radius:20px;padding:14px 22px;margin-bottom:18px}
.chip-logo img{height:38px;width:auto}
.f-grid p{margin-bottom:8px}
.ojk{margin-top:20px;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;font-size:14.5px}
.copy{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;position:relative}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{padding:7px 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-weight:700;font-size:13.5px}
@media(max-width:800px){.f-grid{grid-template-columns:1fr}}

/* halaman produk */
.chipset{display:flex;flex-wrap:wrap;gap:12px}
.chipset span{display:inline-flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--light);padding:12px 20px;border-radius:999px;font-weight:800;color:var(--dark)}
.chipset span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cyan)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split h2{font-size:clamp(26px,3.6vw,38px);margin:10px 0 16px}
.split p{color:var(--muted);font-size:18px}
.split .vis{border-radius:var(--r);background:linear-gradient(160deg,var(--light),#E6F6FE);display:grid;place-items:center;padding:34px;min-height:320px;position:relative;overflow:hidden}
.split .vis::after{content:"";position:absolute;right:-20px;bottom:-30px;width:190px;height:190px;background:url(icons-light.png) center/contain no-repeat}
.split .vis img{position:relative;z-index:1;max-height:260px;width:auto}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.cta-card{background:var(--green-l);border-radius:var(--r);padding:32px 36px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:40px}
.cta-card h3{font-size:22px;margin-bottom:4px}
.cta-card p{color:#245A38}
.req{counter-reset:r;list-style:none;display:grid;gap:14px}
.req li{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:18px;padding:18px 22px;font-weight:700;color:var(--dark)}
.req li::before{counter-increment:r;content:counter(r);flex:none;width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font:700 15px var(--head)}
.steps{counter-reset:s;list-style:none;position:relative;display:grid;gap:0;max-width:760px}
.steps li{counter-increment:s;display:flex;gap:20px;position:relative;padding-bottom:26px;font-size:18px;font-weight:600;color:var(--ink)}
.steps li::before{content:counter(s);flex:none;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--cyan);color:var(--dark);display:grid;place-items:center;font:700 17px var(--head)}
.steps li::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--light)}
.steps li:last-child::after{display:none}
.steps li span{padding-top:8px}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.faq details[open]{border-color:var(--mid)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font:600 17px var(--head);color:var(--dark);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--light);display:grid;place-items:center;font-size:22px;line-height:1;color:var(--dark)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 24px 22px;color:var(--ink);white-space:pre-line;font-size:16.5px}

/* kontak */
.cards-c{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cards-c .card h3{font-size:19px}
.cards-c .card p{color:var(--ink);margin-bottom:4px}
.cards-c .card .k{color:var(--muted);font-size:15px;margin-bottom:10px}
.cards-c a.l{font-family:var(--head);font-weight:600;color:var(--mid)}
.cards-c a.l:hover{text-decoration:underline}
@media(max-width:800px){.cards-c{grid-template-columns:1fr}}
.hours{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between;background:var(--dark);color:#fff;border-radius:var(--r);padding:30px 36px;margin-top:24px}
.hours h3{color:#fff;font-size:20px}.hours b{font-family:var(--head);font-size:22px;color:var(--cyan)}

/* tentang */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tl{border-top:4px solid var(--cyan);padding-top:20px}
.tl b{display:block;font:800 40px var(--head);color:var(--dark);line-height:1}
.tl p{margin-top:10px;color:var(--ink)}
@media(max-width:800px){.timeline{grid-template-columns:1fr}}
.val h3{font-size:12px;letter-spacing:.2em;color:var(--mid);margin-bottom:6px}
.val h4{font-size:24px;margin-bottom:8px}
.val ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.val li{font-size:15.5px;color:var(--muted);padding-left:20px;position:relative}
.val li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.val li b{color:var(--dark)}
.vm{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}
.vm .v{background:var(--dark) url(dark-bg.jpg) center/cover;color:#fff;border-radius:var(--r);padding:40px}
.vm .v h3{color:var(--cyan);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.vm .v p{font:700 clamp(22px,2.6vw,30px) var(--head);line-height:1.3}
.vm .m{background:#fff;border-radius:var(--r);padding:40px}
.vm .m h3{color:var(--mid);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.vm .m li{margin:0 0 14px 20px;font-size:17px}
@media(max-width:900px){.vm{grid-template-columns:1fr}}

/* dokumen hukum */
.legal{max-width:860px;margin:0 auto}
.legal h2{font-size:22px;margin:40px 0 12px}
.legal p{margin-bottom:14px;color:var(--ink)}
.legal ul{margin:0 0 16px 22px}.legal li{margin-bottom:8px}
.legal .intro{background:var(--beige);border-radius:var(--r);padding:26px 30px}
.note-box{background:var(--red-l);border-left:5px solid var(--red);padding:16px 20px;border-radius:12px;margin:24px 0;font-size:15.5px;color:#5C1A12}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* potongan figur (background dihapus) berdiri di dasar hero */
.hero-fig{position:relative;justify-self:end;width:min(100%,600px);margin-right:2%}
.hero-fig .cut,.phero .cut{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 28px rgba(0,50,90,.22))}
.hero-fig .hero-dots{top:2%;left:-6%;right:auto;width:84px;opacity:.85}
.hero-fig .hero-card{right:-2%;left:auto;top:12%;bottom:auto}
.phero .cutwrap{align-self:end;justify-self:end;width:min(112%,600px);margin-right:-2%}
.phero.has-cut .wrap{padding-bottom:0}
.phero.has-cut .pcopy{padding-bottom:64px}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-copy{padding:44px 0 8px}
  .hero-fig{justify-self:center;width:min(100%,520px);margin:0}
  .hero-fig .hero-card,.hero-fig .hero-dots{display:none}
  .phero .cutwrap{justify-self:center;width:min(100%,460px);margin:0}
}

.phero .cutwrap.obj{align-self:center;justify-self:center;width:min(86%,430px);margin:0;padding:34px 0;position:relative}
.phero .cutwrap.obj::before{content:"";position:absolute;inset:6% -6% 2% -6%;background:url(shape.png) center/100% 100% no-repeat;opacity:1;z-index:0}
.phero .cutwrap.obj .cut{position:relative;z-index:1;filter:drop-shadow(0 16px 20px rgba(0,50,90,.28));max-height:330px;width:auto;margin:0 auto}
.dark-band .gaolpic{align-self:end;margin-bottom:-96px;justify-content:flex-end}
.dark-band .gaolpic .cut{display:block;width:min(100%,500px);height:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.3))}
@media(max-width:900px){.dark-band .gaolpic{margin-bottom:-96px;justify-content:center}.phero .cutwrap.obj{width:min(80%,340px)}}

/* band GAOL terang: logo GAOL berwarna gelap butuh latar terang */
.gaol-light{background:linear-gradient(135deg,#BBE6FB 0%,#E6F6FE 62%,#F6F9FC 100%);position:relative;overflow:hidden}
.gaol-light::before{content:"";position:absolute;right:-20px;top:0;width:320px;height:100%;background:url(icons-light.png) right center/contain no-repeat;opacity:.9;pointer-events:none}
.gaol-light .gaolgrid{position:relative}
.gaol-light .gaolgrid h2{color:var(--dark)}
.gaol-light .gaolgrid p{color:var(--ink)}
.gaol-logo{height:92px;width:auto;margin-bottom:22px}
.gaol-light .gaolpic{align-self:end;margin-bottom:-96px;justify-content:center}
.gaol-light .gaolpic .cut{display:block;width:min(100%,470px);height:auto;filter:drop-shadow(0 18px 26px rgba(0,71,122,.22))}
@media(max-width:900px){.gaol-light .gaolpic{margin-bottom:-96px}.gaol-logo{height:72px}}

/* gambar terpotong menempel ke sisi kanan box */
.split .vis.flush{padding:0;min-height:380px;overflow:hidden;display:flex;justify-content:flex-end;align-items:stretch}
.split .vis.flush img{height:430px;width:auto;max-height:none;margin:0;align-self:center}
.split .vis.flush::after{right:auto;left:-30px;bottom:-30px}

/* hero berfoto: foto di sisi kanan, tepi kirinya memudar halus ke latar krem (tanpa garis potong) */
.phero.has-bg{background:linear-gradient(90deg,#F6F9FC 0%,#F6F9FC 42%,#E3F2FA 100%)}
.phero.has-bg .wrap{grid-template-columns:1fr;position:relative;z-index:2;min-height:470px}
.phero.has-bg .pcopy{max-width:520px}
.pbg{position:absolute;top:0;right:0;bottom:0;width:64%;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.8) 30%,#000 46%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,rgba(0,0,0,.8) 30%,#000 46%)}
.pbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,243,235,.0) 40%,rgba(0,71,122,.10) 100%)}
@media(max-width:900px){
  .phero.has-bg{display:flex;flex-direction:column;background:#F6F9FC}
  .pbg{position:relative;width:100%;height:260px;order:-1;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .phero.has-bg .wrap{min-height:0;padding-top:8px;padding-bottom:40px}
}

.phero.long .pbg{width:56%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,rgba(0,0,0,.7) 26%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,rgba(0,0,0,.7) 26%,#000 42%)}
.phero.long h1{font-size:clamp(28px,3.4vw,42px)}
.phero.long .pcopy{max-width:520px}
@media(max-width:900px){.phero.long .pbg{width:100%}}

/* foto latar + figur di depannya (menyatu, tanpa potongan) */
.phero.has-fg .wrap{min-height:540px}
.phero.has-fg .pbg{width:72%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 12%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 12%,#000 34%)}
.phero.has-fg .pbg::after{background:linear-gradient(180deg,rgba(243,243,235,0) 55%,rgba(0,71,122,.35) 100%),linear-gradient(90deg,rgba(243,243,235,0) 50%,rgba(0,71,122,.08) 100%)}
.pfg{position:absolute;z-index:1;right:3%;bottom:0;width:min(46%,560px);height:auto;filter:drop-shadow(0 14px 22px rgba(0,30,60,.35))}
@media(max-width:900px){
  .phero.has-fg .pbg{width:100%;height:300px;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
  .pfg{position:relative;order:-1;right:auto;width:min(88%,420px);align-self:center;margin-top:-150px;margin-bottom:0;z-index:3;filter:drop-shadow(0 6px 10px rgba(0,30,60,.25))}
  .phero.has-fg .wrap{padding-top:24px}
}

/* header halaman dalam: biru lembut sesuai palet (bukan krem) */
.phero.has-bg{background:linear-gradient(90deg,#EAF6FD 0%,#E0F1FB 45%,#CFE9F8 100%)}
.phero.has-fg .pbg{opacity:.5}
.phero.has-fg .pbg::after{background:linear-gradient(180deg,rgba(234,246,253,0) 50%,rgba(207,233,248,.85) 100%)}
.pfg.emp{width:min(44%,540px);right:4%;filter:drop-shadow(0 12px 18px rgba(0,40,80,.22))}
@media(max-width:900px){
  .phero.has-bg{background:#E6F4FC}
  .pfg.emp{width:min(78%,380px);right:auto}
}

/* footer mobile: kolom Layanan/Perusahaan dan Kebijakan berdampingan (col-6), motif latar dikecilkan */
@media(max-width:800px){
  .f-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .f-grid>div:first-child{grid-column:1/-1}
  footer.foot::before{width:90px;opacity:.1}
  .closing::before{width:130px;height:240px;opacity:.16}
  .gaol-light::before{width:120px;opacity:.55}
  .dark-band .deco{width:110px;opacity:.16}
  .strip::after{display:none}
}

/* Karir: foto karyawan polos, tanpa gradasi/fade — panel dengan sudut kiri membulat */
.phero.long .pbg{-webkit-mask-image:none;mask-image:none;border-radius:44px 0 0 44px;width:54%}
.phero.long .pbg::after{display:none}
@media(max-width:900px){
  .phero.long .pbg{-webkit-mask-image:none;mask-image:none;border-radius:0 0 28px 28px;width:100%;height:230px}
}

/* Karir: karyawan (potongan) berdiri langsung di atas latar biru lembut header */
.phero.has-fg:not(.has-bg){background:linear-gradient(90deg,#EAF6FD 0%,#DFF1FB 55%,#CFE9F8 100%)}
.pfg[src*="tim"]{width:min(56%,690px);right:2%;filter:none}
@media(max-width:900px){
  .phero.has-fg:not(.has-bg){background:#E3F3FC}
  .phero.has-fg:not(.has-bg) .pfg{margin-top:8px;width:100%}
  .pfg[src*="tim"]{width:100%;right:auto}
}
@media(max-width:900px){
  .pfg[src*="tim"]{width:94%}
  .phero.has-fg:not(.has-bg) .wrap{min-height:0;padding-top:4px}
  .phero.has-fg:not(.has-bg) .pcopy{padding-bottom:36px}
}

/* Pemisah header → section: lekukan Supergrafis PGI, proporsi diambil dari gambar guideline lalu di-flip vertikal:
   section naik dari pojok kiri bawah mengikuti diagonal 45°, membulat besar di puncak, lalu turun landai ke kanan.
   Halaman dalam: semua ukuran. Beranda: hanya layar kecil. */
.phero::after{content:"";position:absolute;z-index:3;pointer-events:none;left:0;right:0;bottom:-1px;height:var(--sh,280px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 647 499' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,499 L0,493 L26,467 L290,203 L302,192 L314,183 L326,174 L338,166 L350,159 L362,153 L374,147 L386,142 L398,138 L410,134 L422,131 L434,128 L446,126 L458,124 L470,123 L482,122 L494,122 L506,122 L518,122 L530,124 L542,125 L554,127 L566,130 L578,133 L590,137 L602,141 L614,146 L647,159 L647,499 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hero .wrap,.phero .wrap{position:relative;z-index:2}
.hero-fig,.phero .cutwrap,.phero .hero-photo,.pfg{z-index:2}
.phero .pcopy,.phero.has-cut .pcopy,.phero.has-fg .pcopy{padding-bottom:210px}
.phero .wrap{padding-bottom:210px}
.phero.has-cut .wrap,.phero.has-fg .wrap{padding-bottom:0}
@media(max-width:900px){
  .hero::after{content:"";position:absolute;z-index:3;pointer-events:none;left:0;right:0;bottom:-1px;height:96px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 647 499' preserveAspectRatio='none'%3E%3Cpath fill='%2300477A' d='M0,499 L0,493 L26,467 L290,203 L302,192 L314,183 L326,174 L338,166 L350,159 L362,153 L374,147 L386,142 L398,138 L410,134 L422,131 L434,128 L446,126 L458,124 L470,123 L482,122 L494,122 L506,122 L518,122 L530,124 L542,125 L554,127 L566,130 L578,133 L590,137 L602,141 L614,146 L647,159 L647,499 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
  .phero::after{--sh:190px}
  .hero-copy{padding-bottom:12px}
  .phero .pcopy,.phero.has-cut .pcopy,.phero.has-fg .pcopy,.phero.has-fg:not(.has-bg) .pcopy{padding-bottom:160px}
  .phero .wrap{padding-bottom:160px}
  .phero.has-cut .wrap,.phero.has-fg .wrap{padding-bottom:0}
  /* Karir (mobile): kaki karyawan memudar halus agar tidak terlihat terputus */
  .pfg[src*="tim"]{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
}

/* Batik (pola ikon logo) transparan di header halaman dalam; mengecil di layar kecil */
.phero::before{content:"";position:absolute;z-index:2;pointer-events:none;top:6px;right:1.5%;width:250px;height:100%;
  background:url(icons-light.png) right top/contain no-repeat;opacity:.5;mix-blend-mode:screen}
@media(max-width:900px){.phero::before{width:92px;right:2%;opacity:.55}}

/* gambar lebar (mobil + motor): ditampilkan utuh di panel kanan, tepi kiri & atas memudar halus */
.phero.has-bg .pbg.fit{width:68%;background-position:right bottom;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%),linear-gradient(180deg,transparent 0%,#000 16%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 20%),linear-gradient(180deg,transparent 0%,#000 16%);mask-composite:intersect}
@media(max-width:900px){
  .phero.has-bg .pbg.fit{width:100%;height:260px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add;background-position:center bottom}
}
.phero.has-bg .pbg.fit{top:0;bottom:150px;width:72%}
@media(max-width:900px){.phero.has-bg .pbg.fit{bottom:auto;top:auto;width:100%}}
.phero.has-bg .pbg.fit{width:64%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(180deg,transparent 0%,#000 16%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(180deg,transparent 0%,#000 16%)}
@media(max-width:900px){.phero.has-bg .pbg.fit{width:100%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}}

/* Hubungi Kami: teller + nasabah setengah badan, naik ke atas & memudar halus ke background */
.phero .cutwrap:has(.cut[src*="teller-counter"]){width:min(122%,720px);margin-right:-5%}
.phero .cut[src*="teller-counter"]{
  transform:translateY(-150px);filter:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%),linear-gradient(90deg,transparent 0%,#000 14%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%),linear-gradient(90deg,transparent 0%,#000 14%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:900px){
  .phero .cutwrap:has(.cut[src*="teller-counter"]){width:min(100%,460px);margin:0}
  .phero .cut[src*="teller-counter"]{transform:translateY(-40px)}
}

/* ===== Tinggi header seragam di semua halaman (besar & mobile) ===== */
:root{--hh:600px;--hhm:820px}
@media(min-width:901px){
  .phero{height:var(--hh);min-height:0}
  .phero .wrap,.phero.has-bg .wrap,.phero.has-fg .wrap,.phero.has-cut .wrap{height:100%;min-height:0;padding-top:64px;padding-bottom:0}
  .phero .pcopy,.phero.has-cut .pcopy,.phero.has-fg .pcopy{padding-bottom:150px}
}
@media(max-width:900px){
  .phero{height:var(--hhm);min-height:0;display:flex;flex-direction:column}
  .phero .wrap{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .phero.has-cut .wrap{padding-bottom:0}
  .phero .cutwrap{align-self:end}
}
@media(min-width:901px){
  /* Gadai BPKB: foto diisi penuh & diangkat supaya roda mobil/motor tidak tertutup lengkung */
  .phero.has-bg .pbg[style*="bg-bpkb"]{width:67%;top:-50px;background-size:cover;background-position:center}
}
@media(max-width:900px){
  .phero .pfg{flex:none}
  .phero .cutwrap:has(.cut[src*="gaol-phone"]){width:min(78%,330px)}
}
@media(max-width:900px){
  .phero .pbg{flex:none}
  .phero .pcopy,.phero.has-cut .pcopy,.phero.has-fg .pcopy,.phero.has-fg:not(.has-bg) .pcopy{padding-bottom:24px}
  .phero .cutwrap{margin-bottom:96px}
  .phero .cut[src*="teller-counter"]{transform:none}
}
@media(max-width:900px){
  .pfg[src*="karyawan-2"]{width:min(64%,300px)}
}
@media(max-width:900px){
  .phero .cutwrap:has(.cut[src*="teller-counter"]){width:min(112%,440px);margin-right:0}
  .phero .cut[src*="teller-counter"]{transform:translateY(-52px)}
}

/* ===== Strip berjalan (gimmick slide) di dasar header ===== */
.pmarq{position:absolute;z-index:4;left:0;right:0;bottom:60px;pointer-events:none;display:flex;flex-direction:column;gap:10px}
.pmarq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.pmarq-track{display:flex;width:max-content;animation:pmarq 42s linear infinite;will-change:transform}
.pmarq-row.rev{display:none}
.pmarq-row.rev .pmarq-track{animation-direction:reverse;animation-duration:50s}
.pmarq-i{display:inline-flex;align-items:center;gap:9px;margin-right:12px;padding:10px 18px 10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(0,71,122,.10);box-shadow:0 6px 16px rgba(0,71,122,.10);font:700 14px/1 var(--head);color:var(--dark);white-space:nowrap}
.pmarq-i svg{width:20px;height:20px;flex:none;stroke:var(--mid);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes pmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  .pmarq{bottom:34px;gap:10px}
  .pmarq-row.rev{display:block}
  .pmarq-i{font-size:13px;padding:9px 15px 9px 12px}
}
@media(prefers-reduced-motion:reduce){.pmarq-track{animation:none}}

/* ===== Rapatkan: header lebih pendek, strip dinaikkan, section di bawahnya lebih dekat ===== */
:root{--hh:560px;--hhm:760px}
.pmarq{bottom:18px}
.phero + .section{padding-top:56px}
@media(min-width:901px){
  .phero .cut[src*="teller-counter"]{transform:translateY(-112px)}
}
@media(max-width:900px){
  .pmarq{bottom:30px}
  .phero + .section{padding-top:40px}
  .pbg{height:224px}
  .pfg[src*="karyawan-2"]{width:min(58%,270px)}
  .phero .cutwrap{margin-bottom:56px}
  .phero .cutwrap:has(.cut[src*="gaol-phone"]){width:min(74%,310px)}
  .phero .cut[src*="teller-counter"]{transform:translateY(-30px)}
}
:root{--hh:580px}
.pmarq{bottom:16px}
@media(min-width:901px){
  .phero .wrap,.phero.has-bg .wrap,.phero.has-fg .wrap,.phero.has-cut .wrap{padding-top:52px}
}
@media(max-width:900px){
  .pfg[src*="karyawan-2"]{width:min(52%,240px);margin-top:-165px}
}

/* Mobile: strip mengikuti tepat di bawah isi header (jarak tetap kecil di semua lebar layar) */
@media(max-width:900px){
  .phero{height:auto}
  .phero .wrap{flex:none}
  .pmarq{position:relative;left:auto;right:auto;bottom:auto;margin:14px 0 30px}
  .phero .cutwrap{margin-bottom:-24px}
}
@media(max-width:900px){
  .phero .wrap,.phero.has-fg .wrap,.phero.has-bg .wrap,.phero.has-cut .wrap{min-height:0}
}
@media(max-width:900px){
  .phero .wrap,.phero.has-fg .wrap,.phero.has-bg .wrap,.phero.has-cut .wrap{padding-bottom:0}
  .phero .pcopy,.phero.has-cut .pcopy,.phero.has-fg .pcopy,.phero.has-fg:not(.has-bg) .pcopy{padding-bottom:0}
  .pmarq{margin:20px 0 30px}
}

/* Desktop: header lebih pendek & strip dinaikkan agar area putih di bawah foto tidak kosong */
@media(min-width:901px){
  :root{--hh:540px}
  .pmarq{bottom:14px}
  .phero .wrap,.phero.has-bg .wrap,.phero.has-fg .wrap,.phero.has-cut .wrap{padding-top:40px}
  .phero + .section{padding-top:48px}
}
@media(min-width:901px){
  .phero{--sh:240px}
  .phero:has(.cut[src*="gaol-phone"]) .pcopy{transform:translateY(-14px)}
}

/* ===== Tentang Kami: karyawan lebih turun (desktop), lebih besar + memudar halus di bawah (mobile, seperti Karir) ===== */
@media(min-width:901px){
  .pfg[src*="karyawan-2"]{bottom:-44px}
}
@media(max-width:900px){
  .pfg[src*="karyawan-2"]{width:min(74%,300px);margin-top:-188px;filter:none;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}

  /* Hubungi Kami (mobile): foto di atas seperti header lain, tinggi area foto sama (224px), memudar ke bawah */
  .phero .cutwrap:has(.cut[src*="teller-counter"]){order:-1;position:relative;overflow:hidden;
    width:100vw;max-width:none;height:224px;margin:0 0 0 calc(50% - 50vw);align-self:start;
    background:url(hero-bg.jpg) 78% 0/cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .phero .cut[src*="teller-counter"]{width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 0;
    transform:none;filter:none;-webkit-mask-image:none;mask-image:none}
  .phero:has(.cut[src*="teller-counter"]) .wrap{padding-top:8px}
}
@media(max-width:900px){
  .phero:has(.cut[src*="teller-counter"]) .wrap{padding-top:0;row-gap:8px}
  .pfg[src*="karyawan-2"]{margin-bottom:-36px}
}

/* Desktop: teks header mulai dari titik yang sama di semua halaman (GAOL tidak lagi lebih rendah) */
@media(min-width:901px){
  .phero .pcopy{align-self:start;margin-top:24px}
  .phero:has(.cut[src*="gaol-phone"]) .pcopy{transform:none}
}

/* ===== Halaman Lokasi Kami (pencari cabang) ===== */
.lk-sec{padding-top:40px;overflow:visible}
.lk-bar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:stretch}
.lk-bar input,.lk-bar select{width:100%;height:54px;padding:0 18px;border-radius:16px;border:2px solid var(--line);background:#fff;font:600 16px var(--body);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.lk-bar select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%2300477A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 18px center}
.lk-bar select:disabled{background-color:var(--beige);color:var(--muted);cursor:not-allowed}
.lk-bar input:focus,.lk-bar select:focus{outline:0;border-color:var(--mid);box-shadow:0 0 0 4px var(--light)}
.lk-search{position:relative;display:block}
.lk-search svg{position:absolute;left:18px;top:50%;width:21px;height:21px;margin-top:-10.5px;fill:none;stroke:var(--mid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.lk-search input{padding-left:50px}
.lk-near{height:54px;padding:0 26px;white-space:nowrap}
.lk-near svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lk-near:disabled{opacity:.7;cursor:progress;transform:none}
.lk-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 2px 14px;color:var(--muted);font-size:15.5px}
.lk-meta b{color:var(--dark);font-family:var(--head)}
.lk-reset{background:none;border:0;color:var(--mid);font:700 14.5px var(--head);cursor:pointer;padding:6px 2px}
.lk-reset:hover{text-decoration:underline}
.lk-note{background:var(--red-l);color:var(--red);border-radius:14px;padding:12px 16px;font-size:15px;margin:0 0 14px}
.lk-tabs{display:none}
.lk-grid{display:grid;grid-template-columns:minmax(360px,420px) minmax(0,1fr);gap:22px;align-items:start}
.lk-list{height:640px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:2px 8px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--light) transparent;overscroll-behavior:contain}
.lk-list::-webkit-scrollbar{width:8px}.lk-list::-webkit-scrollbar-thumb{background:var(--light);border-radius:8px}
.lk-card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:18px 20px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;flex:none}
.lk-card:hover{border-color:var(--mid)}
.lk-card.on{border-color:var(--mid);box-shadow:0 0 0 4px var(--light)}
.lk-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lk-card h3{font-size:17.5px;font-weight:600;line-height:1.25}
.lk-where{font-size:13.5px;color:var(--muted);margin-top:2px}
.lk-dist{flex:none;background:var(--light);color:var(--dark);font:700 13px var(--head);padding:5px 11px;border-radius:999px}
.lk-addr,.lk-hrs{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink);margin-top:10px}
.lk-hrs{margin-top:6px;color:var(--muted);font-size:14px}
.lk-addr svg,.lk-hrs svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--mid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lk-act{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.lk-act a{flex:1 1 auto;text-align:center;font:700 13.5px var(--head);padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);color:var(--dark);background:#fff;transition:background .15s,color .15s,border-color .15s}
.lk-act a:hover{border-color:var(--dark);background:var(--dark);color:#fff}
.lk-act a.lk-b1{background:var(--dark);border-color:var(--dark);color:#fff}
.lk-act a.lk-b1:hover{background:var(--mid);border-color:var(--mid)}
.lk-more{align-self:center;margin:6px 0 10px}
.lk-empty{text-align:center;padding:48px 18px;border:2px dashed var(--line);border-radius:20px;display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--muted)}
.lk-empty b{font:600 18px var(--head);color:var(--dark)}
.lk-map{position:sticky;top:96px;height:640px;border-radius:24px;overflow:hidden;border:1.5px solid var(--line);background:var(--beige)}
.lk-mapbox{position:absolute;inset:0;z-index:0}
.lk-mapfail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--muted);font-size:16px;background:var(--beige);z-index:2}
.lk-foot{margin-top:22px;font-size:14px;color:var(--muted);max-width:760px}
.lk-pin{background:none;border:0;filter:drop-shadow(0 3px 4px rgba(0,40,70,.35))}
.lk-pin svg{display:block}
.lk-cl{background:var(--dark);color:#fff;border-radius:50%;border:4px solid rgba(255,255,255,.9);box-shadow:0 0 0 5px rgba(0,134,190,.35),0 4px 10px rgba(0,40,70,.3);display:flex;align-items:center;justify-content:center;font:700 14px var(--head)}
.lk-cl.big{background:var(--mid);font-size:13px}
.leaflet-container{font-family:var(--body);background:#E7EEF4}
.leaflet-popup-content-wrapper{border-radius:16px}
.leaflet-popup-content{margin:14px 16px}
.lk-pop b{display:block;font:600 15.5px var(--head);color:var(--dark);margin-bottom:4px}
.lk-pop p{font-size:13.5px;line-height:1.45;color:var(--ink);margin:0 0 10px}
.lk-pop-a{display:inline-block;background:var(--dark);color:#fff!important;font:700 13px var(--head);padding:8px 16px;border-radius:999px;margin-right:8px}
.lk-pop-t{font:700 13px var(--head);color:var(--mid)!important}
@media (max-width:1060px){.lk-grid{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}.lk-bar{grid-template-columns:1fr 1fr 1fr}.lk-search{grid-column:1/-1}.lk-near{grid-column:auto}}
@media (max-width:899px){
  .lk-sec{padding-top:30px}
  .lk-bar{grid-template-columns:1fr 1fr;gap:10px}
  .lk-near{grid-column:1/-1;width:100%}
  .lk-bar input,.lk-bar select{height:50px;font-size:15.5px}
  .lk-near{height:50px}
  .lk-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--beige);border-radius:999px;padding:5px;margin:0 0 14px}
  .lk-tabs button{border:0;background:none;border-radius:999px;padding:11px;font:700 14.5px var(--head);color:var(--muted);cursor:pointer}
  .lk-tabs button.on{background:var(--dark);color:#fff}
  .lk-grid{display:block}
  .lk-list{height:auto;max-height:none;overflow:visible;padding:0}
  .lk-map{position:relative;top:auto;height:min(68vh,520px);min-height:360px}
  .lk-grid.v-list .lk-map{display:none}
  .lk-grid.v-map .lk-list{display:none}
}
@media (max-width:480px){.lk-bar{grid-template-columns:1fr}.lk-meta{font-size:14.5px}.lk-act a{padding:9px 10px;font-size:13px}}
/* Lokasi: hanya pencarian + lokasi perangkat (maks. 5 cabang) */
.lk-bar,.lk-bar{grid-template-columns:minmax(0,1fr) auto}
.lk-search{grid-column:auto}
.lk-list{height:auto;min-height:0;max-height:640px}
@media (max-width:1060px){.lk-bar{grid-template-columns:minmax(0,1fr) auto}.lk-near{grid-column:auto}}
@media (max-width:899px){.lk-bar{grid-template-columns:1fr}.lk-near{grid-column:auto}}


/* Mengapa PGI: dua baris slide otomatis (keunggulan + barang diterima) */
.wm{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.wm-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);padding:6px 0 10px}
.wm-track{display:flex;width:max-content;gap:22px;animation:wm 48s linear infinite;will-change:transform}
.wm-track.slow{animation-duration:60s;animation-direction:reverse;gap:12px}
.wm-row:hover .wm-track{animation-play-state:paused}
.wm-card{flex:none;width:340px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;box-sizing:border-box}
.wm-card .ico{width:58px;height:58px;border-radius:50%;background:#BDE6FB;display:grid;place-items:center;margin-bottom:16px}
.wm-card .ico svg{width:28px;height:28px;stroke:var(--dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wm-card h3{margin:0 0 8px;font-size:20px}.wm-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.wm-label{font:700 13px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.wm-pill{flex:none;display:inline-flex;align-items:center;gap:10px;padding:13px 22px 13px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font:700 15px/1 var(--head);color:var(--dark);white-space:nowrap}
.wm-pill svg{width:22px;height:22px;stroke:var(--mid);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes wm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:620px){.wm-card{width:268px;padding:22px}.wm-track{gap:16px;animation-duration:40s}.wm-track.slow{animation-duration:48s}}
@media(prefers-reduced-motion:reduce){.wm-track{animation:none}.wm-row{overflow-x:auto}}

/* Beranda mobile: konten hero dinaikkan agar figur & produk tidak terpotong */
@media(max-width:900px){
  .hero .wrap{padding-top:10px;padding-bottom:0}
  .hero-copy{padding:14px 0 0}
  .hero p.lead{margin:16px 0 22px}
  .hero .trust{margin-top:22px}
  .hero-fig{margin-top:-6px}
  .hero::after{height:56px}
}

/* Karir: email tidak keluar kotak; segitiga biru penutup dikecilkan 50% di mobile */
.cta-card>div{min-width:0;flex:1 1 260px}
.cta-card h3{overflow-wrap:anywhere}
@media(max-width:800px){
  .cta-card{padding:26px 22px}
  .cta-card h3{font-size:clamp(13px,3.7vw,20px)}
  .closing::after{border-width:0 0 85px 85px}
}