/* ===================================================================
   KATALOG DR. OSHA — CSS Kustom Mudah Dimodifikasi (v2)
   -------------------------------------------------------------------
   - Semua parameter (warna, spacing, radius, typo) via CSS variables
   - Grid modern dengan gap (bukan padding kolom) + center alignment
   - Kartu punya shadow halus & hover elevasi
   - Responsif: 4 kolom (desktop) → 2 (tablet) → 1 (mobile)
   =================================================================== */

/* ---------- Variabel Utama ---------- */
:root{
  /* Warna */
  --k-primary: #e50014;
  --k-primary-600: #bf0112;
  --k-bg: #ffffff;
  --k-surface: #ffffff;
  --k-border: #e5e7eb;
  --k-muted: #6b7280;
  --k-text: #111827;
  --k-shadow: 0 10px 30px rgba(0,0,0,.08);

  /* Spasi & Radius */
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 20px;
  --k-space-6: 24px;
  --k-rad-sm: 10px;
  --k-rad-md: 14px;
  --k-rad-lg: 18px;
  --k-rad-pill: 999px;

  /* Typography */
  --k-font-head: "PT Sans Narrow", Arial, sans-serif;
  --k-font-body: "Open Sans", Arial, sans-serif;
  --k-h1: 42px;
  --k-h2: 28px;
  --k-text-sm: 13px;
  --k-text: 14.5px;
}

/* Mode gelap opsional */
@media (prefers-color-scheme: dark){
  :root{
    --k-bg: #0b0d10;
    --k-surface: #111418;
    --k-border: #242a31;
    --k-muted: #9aa3ad;
    --k-text: #eef2f6;
    --k-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
}

/* ---------- Container ---------- */
.k-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--k-space-4); }
body{ background: var(--k-bg); color: var(--k-text); }

/* ---------- Grid modern dengan GAP ---------- */
.k-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* grid di tengah */
  gap: 24px;                 /* jarak antar kartu (atas-bawah & kiri-kanan) */
  margin: 0;                 /* no negative margin */
}
.k-col{
  flex: 1 1 calc(25% - 24px);
  max-width: calc(25% - 24px);
  min-width: 260px; /* supaya kartu tidak terlalu kecil di layar besar */
}
@media (max-width: 991px){
  .k-col{ flex: 1 1 calc(50% - 24px); max-width: calc(50% - 24px); }
}
@media (max-width: 639px){
  .k-col{ flex: 1 1 100%; max-width: 100%; }
}

/* ---------- Komponen kecil ---------- */
.k-badge{
  display:inline-block;
  font:600 var(--k-text-sm)/1 var(--k-font-body);
  padding: 4px 10px;
  border:1px solid var(--k-border);
  border-radius: var(--k-rad-pill);
  color: var(--k-text);
  background: var(--k-surface);
}
.k-btn{
  display:inline-block; text-decoration:none; text-align:center;
  font:600 var(--k-text)/1 var(--k-font-body);
  padding: 9px 14px; border-radius: var(--k-rad-pill);
  border:1px solid var(--k-border); background: var(--k-surface); color: var(--k-text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.k-btn:hover{ transform: translateY(-1px); box-shadow: var(--k-shadow); }
.k-btn.k-primary{ border-color: var(--k-primary); background: var(--k-primary); color:#fff; }
.k-btn.k-primary:hover{ background: var(--k-primary-600); }
.k-text-muted{ color: var(--k-muted); font-size: var(--k-text-sm); }

/* ---------- Hero ---------- */
.k-hero{
  margin-top: 90px;
  background: linear-gradient(135deg, #1f2937, #374151);
  color: #fff;
  padding: 40px 0;
}
.k-hero__title{
  font: 400 var(--k-h1)/1 var(--k-font-head);
  text-transform: uppercase;
  margin:0 0 8px;
}
.k-hero__subtitle{ margin:0; opacity:.92; font: 400 var(--k-text)/1.5 var(--k-font-body); }

/* ---------- Filter ---------- */
.k-filter{
  background: var(--k-surface);
  border:1px solid var(--k-border);
  border-radius: var(--k-rad-lg);
  padding: var(--k-space-4);
  margin-top: -28px;
  box-shadow: var(--k-shadow);
}
.k-filter .k-form-group{ margin:0 0 var(--k-space-3); }
.k-filter label{ display:block; margin-bottom:6px; font:600 var(--k-text-sm)/1 var(--k-font-body); }
.k-filter select, .k-filter input[type="search"]{
  width:100%; border:1px solid var(--k-border); border-radius: var(--k-rad-md);
  padding: 10px 12px; background: var(--k-surface); color: var(--k-text);
}
.k-filter__active{ margin-top:6px; font: 400 var(--k-text-sm)/1.4 var(--k-font-body); color: var(--k-muted); }
.k-filter__active b{ color: var(--k-text); }

/* ---------- Section Title ---------- */
.k-section-title{
  font:400 var(--k-h2)/1 var(--k-font-head);
  text-transform: uppercase;
  text-align:center;
  margin: 48px 0 24px; /* lebih lega */
}
.k-section-title strong{ color: var(--k-primary); }

/* ---------- Card Product ---------- */
.k-card{
  background: var(--k-surface);
  border:1px solid var(--k-border);
  border-radius: var(--k-rad-lg);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.05); /* shadow halus default */
}
.k-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

.k-card__thumb{
  background: #f3f4f6;
  aspect-ratio: 4 / 3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.k-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.k-card__body{ padding: 14px; flex:1; display:flex; flex-direction:column; }
.k-card__title{ font:700 18px/1.25 var(--k-font-body); margin:8px 0 4px; color: var(--k-text); }
.k-card__meta{ font: 400 var(--k-text-sm)/1.4 var(--k-font-body); color: var(--k-muted); }
.k-card__spec{ font: 400 var(--k-text-sm)/1.6 var(--k-font-body); color: var(--k-text); margin-top:8px; }
.k-card__note{ font: 400 var(--k-text-sm)/1.4 var(--k-font-body); color: var(--k-muted); margin-top:6px; }
.k-card__actions{ margin-top:auto; display:flex; gap:8px; }

/* ---------- Section padding ---------- */
#grid{ padding: 24px 0; }

.k-hero{
  margin-top: 0 !important;
  padding-top: 20px;
  padding-bottom: 30px;
}


/* === Footer v3: Katalog Style === */
.k-footer.f3{
  background:#2e3237;
  background-image: linear-gradient(180deg,#2e3237,#2b2f34);
  color:#f3f4f6;
  padding:36px 0;
  border-top:none;
}
.f3__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  justify-items:center;
  text-align:center;
}
@media (max-width: 1024px){
  .f3__grid{ grid-template-columns: 1fr; }
}
.f3__title{
  display:inline-block;
  background:#e50014;
  color:#fff;
  font:700 16px/1.2 "PT Sans Narrow", Arial, sans-serif;
  padding:8px 12px;
  border-radius:4px;
  margin-bottom:12px;
}
.f3__col p, .f3__center p{ color:#e5e7eb; margin:10px 0; }
.f3 a{ color:#ffffff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); }
.f3 a:hover{ border-bottom-color:transparent; }
.f3__bottom{
  margin-top:24px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.f3__bottom .k-backtop{
  background:rgba(255,255,255,.08); color:#fff; border:none;
  padding:6px 10px; border-radius:999px; text-decoration:none;
}
.f3__bottom .k-backtop:hover{ background:#e50014; }

/* Grid footer tetap center, tapi isi kolom rata kiri */
.f3__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  justify-items:center;   /* kolom tetap center di kontainer */
}

.f3__col, .f3__center{
  text-align:left;        /* isi teks rata kiri */
  max-width: 360px;       /* biar tidak terlalu melebar */
}
.f3__col p, .f3__center p{
  text-align:left;
}

/* Hero title styling */
.k-hero h1{
  font: 700 38px/1.2 "PT Sans Narrow", Arial, sans-serif;
  color:#fff;
  margin:0;
}
.k-hero h1 .highlight-red{
  color:#e50014;   /* merah sesuai tema */
}

/* Font & spacing untuk isi footer */
.f3__col p,
.f3__center p {
  font-family: "Open Sans", Arial, sans-serif;  /* font lebih modern */
  font-size: 15px;
  line-height: 1.4;          /* jarak antar baris lebih lega */
  color: #e5e7eb;
  margin: 12px 0;
}

.f3__col a,
.f3__center a {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

.f3__col p strong {
  color: #fff;   /* judul kecil seperti 'Office:' lebih tegas */
}


/* === Lightbox / Modal Detail Produk === */
.k-modal{ position:fixed; inset:0; z-index:2000; display:none; }
.k-modal.is-open{ display:block; }
.k-modal__backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.6); backdrop-filter: blur(2px);
}
.k-modal__dialog{
  position:relative; max-width:min(920px, 96vw); margin:5vh auto;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  animation:kModalIn .18s ease-out;
}
@keyframes kModalIn{ from{ transform:translateY(10px); opacity:.85 } to{ transform:none; opacity:1 } }

.k-modal__title{ margin:0; padding:14px 18px; font:700 18px/1.2 "PT Sans Narrow", Arial, sans-serif; background:#0f172a; color:#fff; }
.k-modal__imgwrap{ background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.k-modal__imgwrap img{ width:100%; max-height:70vh; object-fit:contain; display:block; }

.k-modal__meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; flex-wrap:wrap;
}
.k-modal__model{ font:600 14px/1.4 "Open Sans", Arial, sans-serif; color:#374151; }

.k-modal__close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:999px;
  background:#ffffff; color:#111827; font-size:22px; line-height:36px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.k-modal__close:hover{ background:#e5e7eb; }



/* === Override Terang untuk Hero & Footer === */

/* Hero Section */
.k-hero {
  margin-top: 0 !important;
  padding-top: 20px;
  padding-bottom: 30px;
  background: linear-gradient(135deg, #f9fafb, #f3f4f6); /* lebih terang */
  color: #111827;
}

.k-hero h1 {
  font: 700 38px/1.2 "PT Sans Narrow", Arial, sans-serif;
  color: #111827;
}

.k-hero h1 .highlight-red {
  color: #e50014;
  text-shadow: 1px 1px 2px #fff;
}

/* Footer */
.k-footer.f3 {
  background: #f3f4f6;
  background-image: none;
  color: #111827;
  padding: 36px 0;
  border-top: 1px solid #e5e7eb;
}

.f3__title {
  background: #e50014;
  color: #fff;
}

.f3__col p,
.f3__center p {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  margin: 12px 0;
}

.f3__col a,
.f3__center a {
  color: #e50014;
  text-decoration: none;
  border-bottom: 1px dashed rgba(229,0,20,.35);
}
.f3__col a:hover,
.f3__center a:hover {
  border-bottom-color: transparent;
}

ya