/* ==========================================================
   PRIME 28 — Shared Stylesheet
   Dipakai oleh semua halaman Produk (dan bisa dipakai ulang
   untuk halaman Home / Tentang Kami / Project / Kontak nanti).
   ========================================================== */

:root{
  --red:#E3372B;
  --red-deep:#C42419;
  --red-soft:#FFE6E2;
  --blue:#2B6CB0;
  --blue-deep:#1E4E85;
  --blue-soft:#E3EEFB;
  --amber:#B9700F;
  --amber-soft:#FDEFD8;
  --ink:#20242E;
  --ink-soft:#5B6270;
  --paper:#FFFDFB;
  --cream:#FFF6F1;
  --line:#F1E7E1;
  --radius:22px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  opacity:0;
  transition:opacity .28s ease;
}
body.page-loaded{opacity:1;}
body.fade-out{opacity:0 !important;}
h1,h2,h3{font-family:'Sora', sans-serif; font-weight:800; color:var(--ink);}
a{color:inherit; text-decoration:none; cursor:pointer;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,251,0.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:78px;}

/* GANTI LOGO DI SINI:
   Elemen <img class="brand-logo"> di setiap file HTML mengambil
   gambar dari assets/img/logo-prime28.svg.
   Ganti file tersebut dengan logo resmi (format .svg atau .png,
   disarankan tinggi ~40px, latar transparan). */
.brand-logo{height:38px; width:auto;}

.nav-links{display:flex; gap:6px; font-weight:600; font-size:14.5px;}
.nav-links a{padding:10px 18px; border-radius:999px;}
.nav-links a:hover, .nav-links a.on{background:var(--red-soft); color:var(--red-deep);}
.nav-cta{
  background:var(--red); color:#fff; font-weight:700; font-size:13.5px;
  padding:12px 24px; border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(227,55,43,0.55);
}
.nav-cta:hover{background:var(--red-deep);}
@media(max-width:920px){.nav-links{display:none;} .nav-cta{display:none;}}

/* ---------- SHARED UI ---------- */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--red-soft); color:var(--red-deep); font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; margin-bottom:18px;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--red);}
.pill.blue{background:var(--blue-soft); color:var(--blue-deep);}
.pill.blue .dot{background:var(--blue);}
.pill.amber{background:var(--amber-soft); color:var(--amber);}
.pill.amber .dot{background:var(--amber);}

.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; padding:15px 26px; border-radius:999px; cursor:pointer; border:2px solid transparent;}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 10px 24px -8px rgba(227,55,43,0.6);}
.btn-primary:hover{background:var(--red-deep);}
.btn-outline{border-color:var(--line); color:var(--ink); background:#fff;}
.btn-outline:hover{border-color:var(--blue); color:var(--blue-deep);}
.btn-sm{padding:10px 18px; font-size:13px;}

section{padding:80px 0;}
.sec-head{text-align:center; max-width:620px; margin:0 auto 48px;}
.sec-head h1, .sec-head h2{font-size:clamp(26px,3.2vw,38px);}
.sec-head p{color:var(--ink-soft); margin-top:14px; font-size:15.5px;}

/* ---------- GRID / CARDS ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:820px){.grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid3{grid-template-columns:1fr;}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -20px rgba(32,36,46,0.22);}
.card-media{width:100%; height:190px; object-fit:cover; background:var(--cream);}
.card-body{padding:24px 24px 28px;}
.card h3{font-size:19px; margin-bottom:8px;}
.card p{font-size:14px; color:var(--ink-soft);}
.card-link{display:inline-block; margin-top:16px; font-weight:700; font-size:13.5px; color:var(--red-deep);}

/* ---------- PRODUCT DETAIL BANNER ---------- */
.detail-banner{
  position:relative; border-radius:32px; overflow:hidden; margin-bottom:48px;
  min-height:320px;
}
.detail-banner img{
  width:100%; height:320px; object-fit:cover; display:block;
}
.detail-banner .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.65) 100%);
}
.detail-banner.beton .overlay{background:linear-gradient(150deg, rgba(227,55,43,0.55), rgba(196,36,25,0.85));}
.detail-banner.mortar .overlay{background:linear-gradient(150deg, rgba(43,108,176,0.55), rgba(30,78,133,0.85));}
.detail-banner.minimix .overlay{background:linear-gradient(150deg, rgba(240,169,59,0.55), rgba(185,112,15,0.85));}
.detail-banner .content{
  position:absolute; left:0; right:0; bottom:0; padding:44px;
  color:#fff;
}
.detail-banner h1{color:#fff; font-size:clamp(26px,3.6vw,40px); max-width:16ch;}
.detail-banner p{color:rgba(255,255,255,0.9); margin-top:14px; max-width:52ch; font-size:15.5px;}
.back-link{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:rgba(255,255,255,0.9); margin-bottom:18px;}
.back-link:hover{color:#fff;}

/* ---------- MUTU (grade) CARDS ---------- */
.mutu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:820px){.mutu-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.mutu-grid{grid-template-columns:1fr;}}
.mutu-card{border-radius:20px; padding:24px 22px; background:var(--cream); border:1px solid var(--line);}
.mutu-card.blue-tone{background:var(--blue-soft);}
.mutu-card.amber-tone{background:var(--amber-soft);}
.mutu-card .code{font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:var(--red-deep);}
.mutu-card.blue-tone .code{color:var(--blue-deep);}
.mutu-card.amber-tone .code{color:var(--amber);}
.mutu-card .strength{font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:6px 0 10px;}
.mutu-card p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- WHATSAPP WIDGET ---------- */
.wa-fab{
  position:fixed; right:26px; bottom:26px; z-index:100;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,0.6);
  cursor:pointer; border:none;
}
.wa-fab svg{width:28px; height:28px;}
.wa-popup{
  position:fixed; right:26px; bottom:98px; z-index:100;
  width:300px; background:#fff; border-radius:20px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,0.35);
  overflow:hidden; display:none;
}
.wa-popup.open{display:block;}
.wa-head{background:#25D366; color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px;}
.wa-avatar{width:40px; height:40px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,0.25);}
.wa-avatar img{width:100%; height:100%; object-fit:cover;}
.wa-head b{display:block; font-size:14px;}
.wa-head span{font-size:11.5px; opacity:.9;}
.wa-body{padding:16px 18px; background:#EAF7EF;}
.wa-bubble{background:#fff; border-radius:14px 14px 14px 4px; padding:12px 14px; font-size:13.5px; box-shadow:0 4px 10px -4px rgba(0,0,0,0.12);}
.wa-cta{display:block; text-align:center; margin:14px 18px 18px; background:#25D366; color:#fff; font-weight:700; font-size:13.5px; padding:12px; border-radius:999px;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:#B7BCC7; padding:70px 0 30px; margin-top:20px; border-radius:36px 36px 0 0;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid #333949;}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr;}}
.foot-brand{display:flex; align-items:center; gap:10px;}
.foot-brand img{height:30px; width:auto;}
.foot-grid p{margin-top:14px; font-size:14px; max-width:36ch;}
.foot-col h4{color:#fff; font-size:13.5px; margin-bottom:14px; font-family:'Sora',sans-serif;}
.foot-col a{display:block; font-size:14px; margin-bottom:10px;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* ---------- HOME: HERO ---------- */
.hero{position:relative; overflow:hidden; padding-top:26px;}
.blob{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;}
.hero .blob-red{width:520px; height:520px; background:var(--red); opacity:.16; top:-180px; right:-140px;}
.hero .blob-blue{width:420px; height:420px; background:var(--blue); opacity:.14; bottom:-160px; left:-120px;}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; padding:56px 0 80px;}
.hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.06; max-width:12ch;}
.hero h1 .accent{color:var(--red);}
.hero p{margin-top:22px; font-size:16.5px; color:var(--ink-soft); max-width:44ch;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

/* real-photo hero card (right side of Home hero) */
.hero-photo{position:relative; border-radius:32px; overflow:hidden; min-height:420px; box-shadow:0 30px 60px -24px rgba(30,78,133,0.45);}
.hero-photo img{width:100%; height:100%; min-height:420px; object-fit:cover; position:absolute; inset:0;}
.hero-photo .overlay{position:absolute; inset:0; background:linear-gradient(200deg, rgba(30,78,133,0.15) 10%, rgba(20,24,34,0.75) 100%);}
.hero-photo .chip{position:absolute; top:26px; left:26px; z-index:2; background:rgba(255,255,255,0.18); backdrop-filter:blur(6px); color:#fff; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px;}
.hero-photo .float-card{position:absolute; left:24px; bottom:24px; right:24px; z-index:2; background:#fff; border-radius:20px; padding:20px 22px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.3);}
.hero-photo .float-card b{display:block; font-family:'Sora',sans-serif; font-size:16px; margin-bottom:4px;}
.hero-photo .float-card span{font-size:13px; color:var(--ink-soft);}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;} .hero-photo, .hero-photo img{min-height:280px;}}

/* trust strip */
.trust{padding:0 0 20px;}
.trust .wrap{display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; background:var(--cream); border-radius:24px; padding:26px 36px;}
.trust .stat b{display:block; font-family:'Sora',sans-serif; font-size:26px; color:var(--red);}
.trust .stat span{font-size:13px; color:var(--ink-soft); font-weight:600;}

/* ---------- TENTANG KAMI ---------- */
.about-visual{position:relative; aspect-ratio:16/9; border-radius:28px; overflow:hidden; margin-bottom:40px;}
.about-visual img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.about-visual .overlay{position:absolute; inset:0; background:linear-gradient(200deg, rgba(227,55,43,0.12) 10%, rgba(30,78,133,0.55) 100%);}
.about-visual .badge{position:absolute; bottom:20px; left:20px; z-index:2; background:rgba(255,255,255,0.94); border-radius:18px; padding:16px 18px;}
.about-visual .badge b{font-family:'Sora',sans-serif; font-size:22px; color:var(--red-deep);}
.about-visual .badge span{font-size:12.5px; color:var(--ink-soft);}
.about-facts{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap;}
.about-facts div{background:#fff; border-radius:16px; padding:16px 20px; border:1px solid var(--line);}
.about-facts div b{display:block; font-family:'Sora',sans-serif; font-size:22px; color:var(--blue-deep);}
.about-facts div span{font-size:12.5px; color:var(--ink-soft);}

/* ---------- PROJECT PAGE ---------- */
.client-block{margin-bottom:56px;}
.client-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.client-head h3{font-size:20px;}
.proj-list-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:820px){.proj-list-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.proj-list-grid{grid-template-columns:1fr;}}
.proj-item{border-radius:18px; padding:20px 18px; background:var(--red-soft); display:flex; flex-direction:column; gap:10px; min-height:96px; justify-content:space-between;}
.client-block.blue .proj-item{background:var(--blue-soft);}
.proj-item .idx{font-family:'Sora',sans-serif; font-weight:800; font-size:12.5px; color:var(--ink-soft);}
.proj-item .name{font-family:'Sora',sans-serif; font-weight:700; font-size:15.5px;}

/* ---------- KONTAK PAGE ---------- */
.connect-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.connect-item{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 20px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:12px;}
.connect-item .ic{width:38px; height:38px; border-radius:12px; background:var(--red-soft); color:var(--red-deep); display:flex; align-items:center; justify-content:center; font-size:15px;}
.connect-item:nth-child(2n) .ic{background:var(--blue-soft); color:var(--blue-deep);}
@media(max-width:820px){.connect-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.connect-grid{grid-template-columns:1fr;}}

.kontak-panel{background:var(--cream); border-radius:28px; padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:44px;}
@media(max-width:820px){.kontak-panel{grid-template-columns:1fr;}}
.kontak-panel h3{font-size:18px; margin-bottom:6px;}
.kontak-panel .addr{font-size:14.5px; color:var(--ink-soft); line-height:1.7;}

.map-frame{border-radius:24px; overflow:hidden; border:1px solid var(--line); margin-bottom:44px;}
.map-frame img, .map-frame iframe{width:100%; height:340px; object-fit:cover; display:block; border:0;}