:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --brand:#0ea5e9;
  --brand-2:#22c55e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text); background:var(--bg);
}
.container{max-width:1200px; margin:0 auto; padding:56px 18px}
h1,h2,h3{margin:0 0 10px}
.lead{color:var(--muted); margin:0 0 24px}

/* Navbar */
.nav-wrap{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0px 18px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand img{height:120px}
.brand .title{font-weight:800; letter-spacing:.2px}
.menu{display:flex; align-items:center; gap:22px}
.menu a{color:inherit; text-decoration:none; font-weight:600; font-size:14px}
.menu a:hover{color:var(--brand)}
.menu a.active{color:var(--brand)}
.order-btn{padding:10px 14px; border-radius:999px; background:var(--brand); color:#041018; font-weight:800; text-decoration:none; border:1px solid #0a6e9d}
.hamb{display:none; background:none; border:0; font-size:26px}
@media (max-width:1024px){
  .hamb{display:block}
  .menu{position:fixed; inset:64px 12px auto 12px; background:#fff; border:1px solid var(--line); padding:16px; border-radius:12px; display:none; flex-direction:column}
  .menu.show{display:flex}
  .order-btn{width:100%; text-align:center}
}

/* Hero slider (home) */
.hero{position:relative; height:60vh; min-height:620px; max-height:720px}
.slides, .slide{position:absolute; inset:0}
.slide{opacity:0; transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover; filter:brightness(.9)}
.caption{position:absolute; left:6vw; bottom:10vh; max-width:min(680px,86vw); color:#062134; text-shadow:0 8px 30px rgba(255,255,255,.6)}
.caption h1{font-size:clamp(28px,4vw,50px)}
.caption p{font-size:clamp(14px,1.6vw,18px)}
.dots{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:10px}
.dot{width:10px; height:10px; border-radius:50%; background:#dbeafe; border:1px solid #93c5fd; cursor:pointer}
.dot.active{background:#60a5fa}
.arrow{position:absolute; top:50%; transform:translateY(-50%); left:14px; width:36px; height:36px; border-radius:8px; display:grid; place-items:center; color:#1f2937; background:#ffffffd9; border:1px solid var(--line); cursor:pointer}

/* Sections and grids */
.section-title{font-size:clamp(20px,2.6vw,32px)}
.grid{display:grid; gap:18px}
.brand-grid{grid-template-columns:repeat(6,1fr)}
.brand-item{border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; padding:18px; background:#fff}
.brand-item img{max-height:40px; width:auto; height:auto; filter:grayscale(1); opacity:.85}
@media (max-width:900px){.brand-grid{grid-template-columns:repeat(3,1fr)}}

.prod-grid{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
.card img{width:100%; height:220px; object-fit:cover}
.card .p{padding:16px}
.card h3{margin:0 0 6px; font-size:18px}
.tag{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #a7f3d0; background:#ecfdf5; color:#065f46; margin-top:6px}
@media (max-width:900px){.prod-grid{grid-template-columns:1fr}}

.service-grid{grid-template-columns:repeat(3,1fr)}
.service{border:1px solid var(--line); padding:20px; border-radius:14px; background:#fff}
.service b{display:block; margin-bottom:6px}
@media (max-width:900px){.service-grid{grid-template-columns:1fr}}

.news-grid{grid-template-columns:repeat(3,1fr)}
.news{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.news img{width:100%; height:160px; object-fit:cover}
.news .p{padding:14px}
@media (max-width:900px){.news-grid{grid-template-columns:1fr}}

.gallery{grid-template-columns:repeat(4,1fr)}
.gallery img{width:100%; height:190px; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}

.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.contact form{border:1px solid var(--line); padding:16px; border-radius:14px; background:#fff}
.field{display:grid; gap:6px; margin-bottom:12px}
.field input,.field textarea{background:#fff; border:1px solid #cbd5e1; color:var(--text); padding:12px 12px; border-radius:10px}
.btn{background:var(--brand); color:#041018; font-weight:800; border:none; padding:12px 16px; border-radius:10px; cursor:pointer}
.map{border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line); padding:28px 18px; color:var(--muted); background:#fff}
.ft-wrap{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px}
.soc{display:flex; gap:10px}
.soc a{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); color:var(--text); text-decoration:none; background:#fff}

/* Floating WA */
.wa-wrap{position:fixed; right:16px; bottom:24px; display:flex; flex-direction:column; gap:12px; z-index:60}
.wa{display:flex; align-items:center; gap:10px; background:var(--brand-2); color:#06260f; font-weight:800; padding:10px 14px; border-radius:999px; text-decoration:none; border:1px solid #1b7f3d}
.wa svg{width:18px; height:18px}

/* Page header (non-home) */
.page-hero{background:#f8fafc; border-bottom:1px solid var(--line)}
.page-hero .container{padding:28px 18px}
.breadcrumbs{font-size:14px; color:var(--muted)}


/* ==== NAVBAR tightening for consistency ==== */
nav{gap:24px}
.brand .title{font-weight:900; letter-spacing:.3px; font-size:16px}
.menu a{letter-spacing:.2px}
.order-btn{border-radius:20px}

/* ==== Footer revamp (dark) ==== */
.site-footer{background:#0b1421; color:#e6eef9; border-top:1px solid #0c1b2c}
.site-footer .container{padding:36px 18px}
.foot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.foot-col h3{margin:0 0 10px; font-size:16px; letter-spacing:.3px}
.foot-col b{display:block; margin-bottom:6px}
.foot-text{color:#c9d7ef; line-height:1.5; font-size:14px}
.foot-line{border-top:1px solid #0e2742; margin-top:22px; padding-top:18px; display:flex; align-items:center; justify-content:space-between; color:#9fb3cf}
.addr{margin:8px 0 14px}
.icon-row{display:flex; gap:10px; flex-wrap:wrap}
.icon-btn{display:flex; align-items:center; gap:8px; text-decoration:none; color:#0b1421; background:#e6eef9; padding:10px 12px; border-radius:12px; font-weight:700; border:1px solid #b7c9e6}
.icon-btn svg{width:18px; height:18px}
.small-soc a{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; border:1px solid #16314f; color:#e6eef9; text-decoration:none}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr}
}


/* =========================
   SOCIAL MEDIA — ONLY
   (safe: tidak mengubah navbar)
   ========================= */

/* Grid & ukuran seragam */
.icon-row{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:12px;
}
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%;
  min-height:52px; padding:10px 14px;
  border-radius:12px; border:1px solid transparent;
  font-weight:800; font-size:15px;
  text-decoration:none;
  color:#ffffff;
}
.icon-btn svg{width:20px; height:20px; fill:currentColor}

@media (max-width:560px){
  .icon-row{ grid-template-columns:1fr; }
}

/* Warna sesuai brand */
.icon-btn.btn-yt{ background:#FF0000; border-color:#cc0000; }
.icon-btn.btn-fb{ background:#1877F2; border-color:#0f5bd3; }
.icon-btn.btn-tt{ background:#000000; border-color:#222222; }
.icon-btn.btn-ig{
  background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  border-color:#d62976;
}

/* (Opsional) efek hover ringan */
.icon-btn:hover{ filter:brightness(1.05); }

/* Sembunyikan ikon kecil vertikal di kanan bawah (kalau ada) */
.small-soc{ display:none !important; }

/* ====== SECTIONS - HOMEPAGE ====== */
.sec-title{font-size:clamp(22px,3vw,36px); font-weight:900; letter-spacing:.6px; margin:0 0 8px}
.sec-sub{color:#64748b; margin:0 0 22px}
.sec-title.center,.sec-sub.center{text-align:center}
.sec-title.center::after{
  content:""; display:block; width:70px; height:6px; border-radius:6px;
  background:#e11d48; margin:10px auto 0;
}

/* WELCOME / ABOUT */
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center}
.about-photo img{width:100%; border-radius:16px; display:block}
.about-text p{line-height:1.8; margin:0 0 12px}
@media (max-width:980px){ .about-grid{grid-template-columns:1fr} }

/* PRODUCT CATEGORIES (6 kartu) */
.cats-grid{display:grid; grid-template-columns:repeat(3,minmax(260px,1fr)); gap:28px}
.cat-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(2,8,23,.08); text-decoration:none; color:inherit}
.cat-img{aspect-ratio: 4 / 3; display:grid; place-items:center; background:#fff}
.cat-img img{max-width:92%; max-height:92%; object-fit:contain}
.cat-cap{background:#0b1b34; color:#fff; text-align:center; font-weight:900; letter-spacing:.8px; padding:14px 10px}
@media (max-width:980px){ .cats-grid{grid-template-columns:repeat(2,minmax(220px,1fr))} }
@media (max-width:560px){ .cats-grid{grid-template-columns:1fr} }

/* PAKET AUDIO (3 kartu) */
.paket-grid{display:grid; grid-template-columns:repeat(3,minmax(260px,1fr)); gap:28px}
.paket-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(2,8,23,.08); text-decoration:none; color:inherit}
.paket-card img{width:100%; display:block}
.paket-card .cat-cap{padding:16px 12px}
@media (max-width:980px){ .paket-grid{grid-template-columns:repeat(2,minmax(220px,1fr))} }
@media (max-width:560px){ .paket-grid{grid-template-columns:1fr} }

/* KENAPA HARUS… (list + foto) */
.why-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.why-photo img{width:100%; border-radius:16px; display:block}
.why-text h2{margin-bottom:14px}
.why-text ul{margin:0; padding-left:20px; line-height:1.9}
@media (max-width:980px){ .why-grid{grid-template-columns:1fr} }

/* VIDEO */
.video-wrap{max-width:1200px; margin:0 auto}
.video-frame{border-radius:18px; overflow:hidden; box-shadow:0 18px 46px rgba(2,8,23,.18); background:#000}
.video-frame video{width:100%; height:auto; display:block}


/* === VIDEO (medium, center) === */
#video{padding:40px 0}
#video .video-title{
  text-align:center; font-weight:900; letter-spacing:.6px;
  font-size:clamp(22px,3vw,32px); margin:0 0 16px;
}
#video .video-title span{display:none} /* biar aman kalau ada span dekorasi */

.video-medium .svideo{
  max-width: 960px;              /* <- ukuran “sedang” */
  margin: 0 auto;                /* center */
  border-radius: 18px;
  overflow: hidden;
  background:#000;
  box-shadow: 0 18px 46px rgba(2,8,23,.18);
}

/* bikin proporsi 16:9 rapi */
.video-medium .svideo video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* responsif */
@media (max-width:1024px){
  .video-medium .svideo{max-width: 820px;}
}
@media (max-width:780px){
  .video-medium .svideo{max-width: 100%; margin:0 16px;}
}


/* Justify paragraf di section WELCOME */
.about-text p{
  text-align: justify;           /* rata kiri–kanan */
  text-justify: inter-word;      /* rapikan jarak antar-kata */
  line-height: 1.85;             /* biar enak dibaca */
}

/* Opsional: kalau mau juga di bagian "KENAPA HARUS…" */
.why-text p, .why-text li { text-align: justify; text-justify: inter-word; }