@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@600;700&display=swap");
/* Perkasa Racking — gaya situs rakgudangcustom.com (dibuat otomatis dari halaman-tahap-1) */
.tapic-isi .tapweb{margin:0 auto}

:root{--or:#ff5600;--bl:#1d51a3;--dk:#1c2128;--bg:#ffffff;--soft:#f3f6fb;--line:#dde3ec}
.tapweb,.site-head,.site-foot{background:var(--bg);color:var(--dk);font:16px/1.65 "Open Sans",sans-serif}
.tapweb{max-width:860px;margin:0 auto;padding:0 16px 48px}
h1,h2,h3{font-family:Poppins,sans-serif;line-height:1.25;color:var(--dk)}
h1{font-size:2rem;margin:0 0 12px}h2{font-size:1.45rem;margin:40px 0 12px;color:var(--bl)}h3{font-size:1.1rem;margin:20px 0 6px}
.hero{background:var(--bl);color:#fff;padding:40px 16px;margin:0 -16px 24px}.hero h1{color:#fff}.hero p{margin:0 0 16px;max-width:680px}
.tag{display:inline-block;background:var(--or);color:#fff;font:600 .8rem Poppins,sans-serif;padding:4px 10px;border-radius:4px;margin-bottom:12px}
.btn{display:inline-block;background:var(--or);color:#fff;font:600 1rem Poppins,sans-serif;padding:12px 22px;border-radius:6px;text-decoration:none}
.btn.alt{background:#fff;color:var(--bl)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:8px;padding:16px;background:#fff}.card h3{margin-top:0}.card a{color:var(--bl);font-weight:600}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;background:var(--soft);padding:16px;border-radius:8px}
.proof b{display:block;font:700 1.4rem Poppins,sans-serif;color:var(--or)}
table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}th{background:var(--soft);font-family:Poppins,sans-serif}
ol li,ul li{margin-bottom:6px}a{color:var(--bl)}
details{border:1px solid var(--line);border-radius:6px;padding:10px 14px;margin-bottom:8px}summary{font-weight:600;cursor:pointer}
.cta{background:var(--dk);color:#fff;padding:28px 20px;border-radius:8px;margin-top:40px}.cta h2{color:#fff;margin-top:0}



*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,table{max-width:100%}
.tapweb{overflow-wrap:break-word}
.skip{position:absolute;left:-9999px;top:0;background:var(--or);color:#fff;padding:10px 14px;z-index:100;font-weight:600}
.skip:focus{left:8px;top:8px}
.site-head{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-head .wrap{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{font:700 1.2rem Poppins,sans-serif;color:var(--dk);text-decoration:none;white-space:nowrap}
.logo span{color:var(--or)}
.menu-btn{display:none;background:var(--bl);color:#fff;border:0;border-radius:6px;padding:8px 14px;font:600 .95rem Poppins,sans-serif;cursor:pointer}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;padding:0;list-style:none}
.nav li{margin:0}
.nav a{color:var(--dk);text-decoration:none;font:600 .92rem Poppins,sans-serif;padding:6px 2px;display:block}
.nav a:hover,.nav a[aria-current=page]{color:var(--bl)}
.nav a.hl{background:var(--or);color:#fff;border-radius:6px;padding:8px 14px}
@media (max-width:900px){
.js .menu-btn{display:inline-block}
.js .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);padding-top:6px}
.js .nav.open{display:flex}
.nav{width:100%}
.nav a{padding:10px 4px;border-bottom:1px solid var(--line)}
.nav a.hl{margin-top:8px;text-align:center;border-bottom:0}
}
.site-foot{background:var(--dk);color:#d7dde6;margin-top:48px;font-size:.93rem}
.site-foot .wrap{max-width:1100px;margin:0 auto;padding:36px 16px 20px}
.site-foot a{color:#fff}
.site-foot .logo{color:#fff}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:28px;padding-top:20px;border-top:1px solid #39424e}
.site-foot .fh{color:#fff;font:600 1rem Poppins,sans-serif;margin:0 0 10px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:0 0 8px}
.site-foot address{font-style:normal}
.btn.wa{background:#1f9d55;color:#fff;margin-top:8px}
.copy{margin-top:24px;padding-top:14px;border-top:1px solid #39424e;font-size:.85rem;color:#aab4c2}
.wa-float{position:fixed;right:14px;bottom:14px;z-index:60;width:54px;height:54px;border-radius:50%;background:#1f9d55;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);text-decoration:none}
.wa-float svg{width:28px;height:28px;fill:#fff}
@media (max-width:420px){h1{font-size:1.6rem}.btn{margin-bottom:8px}}
@media (min-width:880px){table{display:table}}
@media (max-width:600px){.site-foot .wrap{padding-bottom:84px}}



/* Tata letak lebar khusus rakgudangcustom.com: konten 1240px, hero & CTA selebar layar, teks paragraf tetap nyaman dibaca */
:root{--wide:1240px;--read:820px;--gut:max(16px,env(safe-area-inset-left,0px))}
.tapweb{max-width:var(--wide);padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.site-head .wrap,.site-foot .wrap{max-width:var(--wide);padding-left:20px;padding-right:20px}
.tapweb>p,.tapweb>ul,.tapweb>ol,.tapweb>h3,.tapweb>nav{max-width:var(--read)}
h1{font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.45rem,2.4vw,2rem);margin-top:56px}

/* Hero selebar layar */
.hero{margin:0 calc(50% - 50vw) 0;padding:64px max(20px,calc(50vw - var(--wide)/2 + 20px)) 72px;
  background:linear-gradient(120deg,#163f80 0%,var(--bl) 55%,#2a66c4 100%);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-6%;top:0;bottom:0;width:46%;opacity:.12;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 120px),repeating-linear-gradient(0deg,#fff 0 4px,transparent 4px 70px)}
.hero>*{position:relative;z-index:1;max-width:760px}
.hero p{font-size:1.08rem;max-width:680px}
.hero .btn{margin:6px 8px 0 0;padding:14px 26px}

/* Bukti kepercayaan: kartu menempel di bawah hero */
.proof{position:relative;z-index:2;margin:-36px 0 0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;padding:0;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(20,40,80,.10);overflow:hidden}
.proof>div{padding:20px 22px;border-right:1px solid var(--line)}
.proof>div:last-child{border-right:0}
.proof b{font-size:1.55rem}

/* Kartu & tabel memakai lebar penuh */
.grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{padding:22px;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 8px 24px rgba(20,40,80,.12);transform:translateY(-2px)}
table{margin:12px 0 8px}
@media (min-width:880px){table{display:table}th,td{padding:11px 14px}}
details{max-width:var(--wide)}

/* FAQ dua kolom di layar lebar */
@media (min-width:1000px){
  .tapweb{display:block}
  .faq-2{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
}

/* CTA selebar layar */
.cta{margin:64px calc(50% - 50vw) -48px;border-radius:0;padding:56px max(20px,calc(50vw - var(--wide)/2 + 20px))}
.cta>*{max-width:820px}
.cta h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}

@media (max-width:700px){
  .hero{padding-top:40px;padding-bottom:56px}
  .proof{margin-top:-28px}
  .proof>div{border-right:0;border-bottom:1px solid var(--line)}
  .proof>div:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}


/* Logo gambar */
.logo-img{display:inline-flex;align-items:center;line-height:0}
.logo-img img{height:46px;width:auto;max-width:none}
.logo-foot{background:#fff;border-radius:8px;padding:8px 12px}
.logo-foot img{height:40px}
@media (max-width:420px){.logo-img img{height:36px}.logo-foot img{height:34px}}



/* Hero bergaya banner TAP: latar terang biru-putih, foto rak di kanan, judul navy, aksen merah, garis miring di sudut */
:root{--navy:#0b2a6f;--merah:#e30613;--langit:#f3f7fd}
.hero{color:var(--dk);min-height:500px;display:block;padding-top:88px !important;padding-bottom:96px !important;
  background:
    linear-gradient(90deg,var(--langit) 0%,var(--langit) 40%,rgba(243,247,253,.88) 50%,rgba(243,247,253,0) 64%),
    url(hero-rak-gudang.jpg) right center/max(60%,760px) auto no-repeat,
    var(--langit)}
.hero::after{content:"";position:absolute;left:0;bottom:0;width:190px;height:44px;opacity:1;top:auto;right:auto;
  background:linear-gradient(115deg,var(--navy) 0 55%,transparent 55% 62%,var(--merah) 62% 74%,transparent 74%)}
.hero::before{content:"";position:absolute;left:0;top:0;width:190px;height:44px;z-index:0;
  background:linear-gradient(115deg,transparent 0 22%,var(--navy) 22% 72%,transparent 72% 78%,var(--merah) 78% 92%,transparent 92%)}
.hero>*{max-width:min(640px,100%)}
.hero h1{color:var(--navy);text-transform:none;font-weight:700}
.hero p{color:#2c3746}
.hero .tag{background:var(--merah)}
.hero .btn.alt{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.hero a:not(.btn){color:var(--navy)}
.hero .crumb,.hero nav{color:#4a5668}
@media (max-width:800px){
  .hero{min-height:0;padding-top:250px !important;
    background:
      linear-gradient(180deg,rgba(243,247,253,0) 0,rgba(243,247,253,0) 150px,var(--langit) 240px),
      url(hero-rak-gudang-hp.jpg) center top/100% auto no-repeat,
      var(--langit)}
  .hero::before{display:none}
}


/* Hero khusus halaman rak mezzanine */
.hero.hero-mezz{background:
    linear-gradient(90deg,var(--langit) 0%,var(--langit) 40%,rgba(243,247,253,.88) 50%,rgba(243,247,253,0) 64%),
    url(hero-rak-mezzanine.jpg) right center/max(60%,760px) auto no-repeat,
    var(--langit)}
@media (max-width:800px){
  .hero.hero-mezz{background:
      linear-gradient(180deg,rgba(243,247,253,0) 0,rgba(243,247,253,0) 150px,var(--langit) 240px),
      url(hero-rak-mezzanine-hp.jpg) center top/100% auto no-repeat,
      var(--langit)}
}