/* ===================================================================
   DESIGN TOKENS
   Semua warna, dikumpulkan jadi variabel supaya mudah diubah sekali
   saja tanpa perlu cari-cari di seluruh file (misal ganti warna brand).
=================================================================== */
:root{
  --bg:#F5F4F0;            /* warna dasar halaman, abu-abu terang bernuansa alumunium */
  --bg-panel:#ECEAE4;      /* warna latar untuk section selang-seling (stats, layanan) */
  --ink:#1B1C1D;           /* warna teks utama */
  --ink-soft:#55585B;      /* warna teks sekunder / deskripsi */
  --red:#E31E24;           /* warna merah brand, diambil dari logo */
  --red-dark:#A8171C;      /* merah lebih gelap untuk hover tombol */
  --aluminum:#AEB2B5;      /* abu-abu alumunium untuk elemen visual */
  --aluminum-light:#DADCD8;
  --glass:#D9E6E9;         /* biru pucat, kesan material kaca */
  --glass-line:#B7CBCF;
  --charcoal:#1F2123;      /* warna gelap untuk footer & callout */
  --line:#CFCDC6;          /* warna garis/border tipis */
}

/* ===================================================================
   RESET DASAR
   Menghilangkan margin/padding default browser agar layout konsisten.
=================================================================== */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; } /* efek scroll halus saat klik menu anchor (#layanan, dll) */

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Font khusus: Oswald untuk judul (kesan tegas/industrial), IBM Plex Mono untuk angka/label */
h1, h2, h3, .eyebrow{ font-family:'Oswald', sans-serif; text-transform:uppercase; }
.mono{ font-family:'IBM Plex Mono', monospace; }

a{ color:inherit; text-decoration:none; }

/* Container standar, membatasi lebar konten maksimal di layar besar */
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ===================================================================
   ELEMEN SIGNATURE: SUDUT TERPOTONG (CUT CORNER)
   Bentuk khas yang meniru sudut terpotong pada logo "PK".
   Dipakai berulang di tombol, kartu, dan panel supaya identitas brand
   terasa konsisten di seluruh halaman.
=================================================================== */
.cut{ clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.cut-sm{ clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }

/* ===================================================================
   NAVBAR
=================================================================== */
#site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,244,240,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}

#site-header nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 32px; max-width:1180px; margin:0 auto;
}

.nav-logo img{ height:40px; width:auto; display:block; }

.nav-links{ display:flex; gap:36px; font-size:14px; font-weight:500; letter-spacing:.02em; }
.nav-links a{ color:var(--ink-soft); transition:color .15s; }
.nav-links a:hover{ color:var(--red); }

/* Tombol hamburger, disembunyikan di desktop dan hanya tampil di mobile (lihat media query) */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); }

/* ===================================================================
   TOMBOL (dipakai ulang di berbagai section)
=================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-family:'Oswald', sans-serif;
  cursor:pointer; border:none; transition:transform .15s, background .15s;
}
.btn-sm{ padding:10px 18px; font-size:12px; }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-1px); }
.btn-outline{ background:transparent; border:1.5px solid var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--bg); }

/* ===================================================================
   HERO SECTION
=================================================================== */
.hero{ padding:88px 0 64px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }

.eyebrow{
  font-size:13px; font-weight:500; letter-spacing:.14em; color:var(--red);
  margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--red); display:inline-block; }

.hero h1{ font-size:52px; line-height:1.08; font-weight:700; letter-spacing:.01em; margin-bottom:22px; }
.hero h1 span{ color:var(--red); }
.hero p.lead{ font-size:16px; color:var(--ink-soft); max-width:460px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; margin-bottom:40px; }

.hero-trust{ display:flex; gap:28px; font-size:12px; color:var(--ink-soft); font-weight:500; }
.hero-trust .mono{ color:var(--ink); font-size:13px; font-weight:600; }

/* Komposisi panel kaca/alumunium bertumpuk di sisi kanan hero */
.hero-visual{ position:relative; height:420px; }
.panel{ position:absolute; box-shadow:0 18px 40px -18px rgba(0,0,0,0.25); }
.panel-alu{ width:78%; height:280px; background:linear-gradient(135deg, var(--aluminum-light), var(--aluminum)); top:0; right:0; }
.panel-glass{ width:62%; height:200px; background:var(--glass); border:1px solid var(--glass-line); left:0; bottom:56px; }
.panel-red{ width:150px; height:150px; background:var(--red); left:36px; top:36px; display:flex; align-items:center; justify-content:center; }
.panel-red img{ width:96px; height:96px; object-fit:contain; }
.panel-tag{ position:absolute; right:20px; bottom:0; background:var(--charcoal); color:#fff; padding:14px 20px; font-size:11px; letter-spacing:.08em; }
.panel-tag b{ display:block; font-family:'Oswald'; font-size:20px; text-transform:uppercase; margin-top:2px; }

/* ===================================================================
   STATS BAND (2018 / 10+ Tahun / 2 Cabang)
=================================================================== */
.stats-band{ background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); padding:34px 0; }
.stat{ text-align:center; border-right:1px solid var(--line); padding:0 20px; }
.stat:last-child{ border-right:none; }
.stat-num{ font-size:34px; font-weight:600; color:var(--red); }
.stat-label{ font-size:12px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }

/* ===================================================================
   HEADER SECTION UMUM (dipakai di Tentang, Layanan, Lokasi)
=================================================================== */
.section{ padding:88px 0; }
.sec-head{ max-width:560px; margin-bottom:52px; }
.sec-eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--red); margin-bottom:12px; }
.sec-head h2{ font-size:32px; font-weight:600; line-height:1.2; }
.sec-head p{ color:var(--ink-soft); margin-top:14px; font-size:15px; }

/* ===================================================================
   TENTANG KAMI
=================================================================== */
.about-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:56px; align-items:start; }
.about-grid p{ margin-bottom:16px; color:var(--ink-soft); font-size:15px; }

.about-callout{ background:var(--charcoal); color:#fff; padding:36px 32px; }
.about-callout .mono{ font-size:12px; color:var(--aluminum); letter-spacing:.08em; margin-bottom:14px; display:block; }
.about-callout p{ font-family:'Oswald'; font-size:22px; line-height:1.4; text-transform:none; font-weight:500; }
.about-callout .sign{ margin-top:22px; font-size:13px; color:var(--aluminum); font-family:'Work Sans'; }

/* ===================================================================
   LAYANAN
=================================================================== */
.services{ background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }

.service-card{
  background:var(--bg); border:1px solid var(--line); padding:28px 22px;
  position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s;
}
/* Aksen merah kecil di sudut kartu, membesar sedikit saat hover */
.service-card::after{
  content:""; position:absolute; top:-14px; right:-14px;
  width:28px; height:28px; background:var(--red); transform:rotate(45deg);
  transition:top .18s, right .18s;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(0,0,0,0.3); }
.service-card:hover::after{ top:-10px; right:-10px; }

.service-icon{ width:38px; height:38px; margin-bottom:18px; }
.service-icon svg{ width:100%; height:100%; stroke:var(--red); fill:none; stroke-width:1.6; }
.service-card h3{ font-size:16px; font-weight:600; letter-spacing:.02em; margin-bottom:8px; }
.service-card p{ font-size:13px; color:var(--ink-soft); text-transform:none; font-family:'Work Sans'; }

/* ===================================================================
   SEGMEN PASAR (perumahan / komersial / custom)
=================================================================== */
.market-section{ padding-top:56px; padding-bottom:56px; }
.market{ display:flex; align-items:center; justify-content:space-between; gap:40px; }
.market-item{ display:flex; align-items:center; gap:16px; flex:1; }
.market-num{ font-size:13px; color:var(--red); font-weight:600; }
.market-text h4{ font-size:15px; font-weight:600; margin-bottom:2px; }
.market-text p{ font-size:13px; color:var(--ink-soft); }
.market-div{ width:1px; height:44px; background:var(--line); }

/* ===================================================================
   LOKASI TOKO
=================================================================== */
.loc-section{ padding-top:0; }
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }

/* .loc-card sekarang elemen <a> (link ke Google Maps), jadi perlu
   reset tampilan default link + efek hover supaya terasa interaktif */
.loc-card{
  display:block; border:1px solid var(--line); background:var(--bg);
  transition:box-shadow .18s, transform .18s;
}
.loc-card:hover{ box-shadow:0 16px 30px -18px rgba(0,0,0,0.3); transform:translateY(-3px); }

/* Placeholder peta bergaya blueprint (garis grid) + pin lokasi */
.loc-map{
  height:150px; position:relative;
  background:
    repeating-linear-gradient(0deg, var(--glass-line) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--glass-line) 0 1px, transparent 1px 24px),
    var(--glass);
}
.loc-map::after{
  content:""; position:absolute; width:14px; height:14px; background:var(--red);
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  top:50%; left:50%; margin:-18px 0 0 -7px;
}
/* Label kecil "Buka di Google Maps" yang muncul di tengah area peta */
.loc-map-label{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:var(--charcoal); color:#fff; font-size:11px;
  padding:6px 14px; letter-spacing:.06em; white-space:nowrap;
}
.loc-body{ padding:24px; }
.loc-body .mono{ font-size:11px; color:var(--red); letter-spacing:.1em; margin-bottom:6px; display:block; }
.loc-body h3{ font-size:20px; font-weight:600; margin-bottom:10px; }
.loc-body p{ font-size:14px; color:var(--ink-soft); margin-bottom:4px; }
/* Teks "Lihat rute" di bagian bawah kartu, dipertegas warna merah brand */
.loc-link{ display:inline-block; margin-top:10px; font-size:12px; color:var(--red); font-weight:600; letter-spacing:.04em; }

/* ===================================================================
   CTA + FOOTER
=================================================================== */
footer{ background:var(--charcoal); color:#fff; }

.cta-block{ padding:80px 0; text-align:center; border-bottom:1px solid rgba(255,255,255,0.12); }
.cta-block h2{ font-size:34px; font-weight:600; max-width:600px; margin:0 auto 30px; color:#fff; }

.footer-bottom{ padding:48px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 0.8fr 1fr; gap:32px; margin-bottom:44px; }
.footer-logo{ height:34px; margin-bottom:14px; } /* logo dibuat putih agar kontras di footer gelap */
.footer-grid p{ font-size:13px; color:var(--aluminum); max-width:220px; }
.footer-col h4{ font-family:'Oswald'; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--aluminum); margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:#fff; margin-bottom:10px; opacity:.85; }
.footer-legal{ border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; display:flex; justify-content:space-between; font-size:12px; color:var(--aluminum); }

/* ===================================================================
   RESPONSIVE / MOBILE (di bawah 900px)
=================================================================== */
/* ===================================================================
   PAGE HERO
   Header kecil dipakai di halaman selain beranda (FAQ, Tentang, Layanan).
=================================================================== */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.page-hero .sec-eyebrow{ margin-bottom:14px; }
.page-hero h1{ font-size:38px; font-weight:600; line-height:1.15; max-width:680px; }
.page-hero p{ color:var(--ink-soft); margin-top:16px; max-width:600px; font-size:15px; }
.breadcrumb{ font-size:12px; color:var(--ink-soft); margin-bottom:18px; letter-spacing:.04em; }
.breadcrumb a{ color:var(--red); }
.breadcrumb span{ margin:0 6px; }

/* ===================================================================
   FAQ ACCORDION
=================================================================== */
.faq-list{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:22px 4px; font-size:16px; font-weight:500; color:var(--ink); font-family:'Work Sans';
}
.faq-question .faq-plus{
  font-family:'Oswald'; font-size:20px; color:var(--red); flex-shrink:0;
  transition:transform .2s;
}
/* Saat item terbuka (class is-open ditambahkan lewat script.js), tanda + berputar jadi x */
.faq-item.is-open .faq-plus{ transform:rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.faq-answer p{ color:var(--ink-soft); font-size:14px; padding:0 4px 22px; max-width:640px; }
.faq-item.is-open .faq-answer{ max-height:400px; }

/* ===================================================================
   DETAIL LAYANAN (struktur 5W1H)
=================================================================== */
.service-hero{ display:grid; grid-template-columns:1fr 0.7fr; gap:48px; align-items:center; }
.service-hero-badge{
  width:120px; height:120px; background:var(--red); display:flex; align-items:center; justify-content:center;
}
.service-hero-badge svg{ width:56px; height:56px; stroke:#fff; fill:none; stroke-width:1.4; }

.w1h-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px; }
.w1h-card{ background:var(--bg-panel); border:1px solid var(--line); padding:26px 24px; }
.w1h-card .w1h-label{ font-size:11px; color:var(--red); letter-spacing:.1em; margin-bottom:10px; display:block; }
.w1h-card h3{ font-size:18px; font-weight:600; text-transform:none; font-family:'Work Sans'; margin-bottom:10px; }
.w1h-card p{ font-size:14px; color:var(--ink-soft); }

.service-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.service-nav a{
  font-size:12px; font-weight:600; letter-spacing:.03em; padding:9px 16px;
  border:1px solid var(--line); color:var(--ink-soft); font-family:'Oswald'; text-transform:uppercase;
}
.service-nav a.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.service-nav a:hover{ border-color:var(--red); color:var(--red); }

/* ===================================================================
   HALAMAN TENTANG BISNIS
=================================================================== */
.tentang-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start; }
.tentang-grid p{ margin-bottom:16px; color:var(--ink-soft); font-size:15px; }

/* Bingkai foto owner, siap diganti pengguna dengan foto asli */
.photo-frame{ border:1px solid var(--line); overflow:hidden; }
.photo-frame img{ width:100%; height:auto; display:block; }
.photo-caption{ padding:16px 4px 0; }
.photo-caption b{ display:block; font-size:15px; font-weight:600; }
.photo-caption span{ font-size:13px; color:var(--ink-soft); }

/* ===================================================================
   IKON SOSIAL MEDIA (Facebook & Instagram di footer)
=================================================================== */
.social-links{ display:flex; gap:12px; margin-top:14px; }
.social-links a{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.25); transition:background .15s, border-color .15s;
}
.social-links a:hover{ background:var(--red); border-color:var(--red); }
.social-links svg{ width:16px; height:16px; fill:#fff; }

/* Footer contact list: gaya untuk link telepon & email agar tetap konsisten dengan teks biasa */
.footer-col a.footer-contact-link{ margin-bottom:10px; }

@media (max-width:900px){
  .service-hero{ grid-template-columns:1fr; }
  .w1h-grid{ grid-template-columns:1fr; }
  .tentang-grid{ grid-template-columns:1fr; }

  .nav-links{
    /* Menu berubah jadi dropdown vertikal, disembunyikan sampai tombol hamburger diklik */
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line);
  }
  .nav-links.is-open{ display:flex; } /* class ini ditambahkan lewat script.js */
  .nav-links a{ padding:14px 32px; border-top:1px solid var(--line); }
  .nav-toggle{ display:flex; }

  .hero-grid, .about-grid, .loc-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:38px; }
  .hero-visual{ height:320px; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); padding:16px 0; }
  .market{ flex-direction:column; align-items:flex-start; }
  .market-div{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}