/* ===================================================================
   KATALOG JETJO — CSS Final
   -------------------------------------------------------------------
   - Warna sesuai katalog Jetjo (biru & merah)
   - Grid modern, card dengan hover
   - Hero elegan, Footer f3 modern
   =================================================================== */

/* ---------- Variabel Utama ---------- */
:root{
  /* Warna */
  --k-primary: #2568e4;      /* biru Jetjo */
  --k-primary-600: #1d4ed8;  /* biru lebih gelap */
  --k-accent: #111011;       /* merah Jetjo */
  --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;
}

/* ---------- 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); font-family: var(--k-font-body); }

/* ---------- Grid modern dengan GAP ---------- */
.k-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0;
}
.k-col{
  flex: 1 1 calc(25% - 24px);
  max-width: calc(25% - 24px);
  min-width: 260px;
}
@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 ---------- */
/* ---------- Hero ---------- */
/* ---------- Hero ---------- */
.k-hero {
  margin-top: 0 !important;
  min-height: 180px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  text-align: left; /* biar teks ke kiri */
}

.k-hero .k-container {
  max-width: 1200px;  /* samakan dengan konten utama */
  padding: 0 24px;    /* beri jarak kiri/kanan */
}

.k-hero h1 {
  font: 700 48px/1.2 var(--k-font-head);
  color: #facc15;
  margin-bottom: 2px;
}

.k-hero p {
  font: 400 18px/1.6 var(--k-font-body);
  color: var(--k-primary);
  margin-bottom: 25px; /* jarak ke bawah */
}




/* ---------- 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 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;
}
.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);
}
.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__actions{ margin-top:auto; display:flex; gap:8px; }

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

/* ---------- Footer Modern (f3) ---------- */
/* ---------- Footer 3 kolom (f4) ---------- */
.k-footer.f4 {
  background: #f9fafb;
  padding: 48px 0;
  border-top: 3px solid var(--k-primary);
}
.f4__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 768px) {
  .f4__grid { grid-template-columns: 1fr; text-align: center; }
}
/* Judul kolom footer biru */
.f4__title {
  display:inline-block;
  background: var(--k-primary);   /* biru Jetjo */
  color:#fff;
  font:700 14px/1 var(--k-font-body);
  padding:6px 14px;
  border-radius:6px;
  margin-bottom:16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Link di footer */
.f4__col a {
  color: var(--k-primary);
  text-decoration: none;
  border-bottom: 1px dashed rgba(229, 231, 235, 0.35); /* biru transparan */
}
.f4__col a:hover {
  color: var(--k-accent); /* merah saat hover */
  border-bottom-color: transparent;
}

.f4__bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.f4__bottom p {
  font-size: 14px;
  color: #2053b9;
}
.
}
.f3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 768px) {
  .f3__grid { grid-template-columns: 1fr; text-align: center; }
}
.f3__title {
  font: 700 18px/1.2 var(--k-font-head);
  color: var(--k-primary);
  margin-bottom: 16px;
  border-bottom: 2px solid var(--k-accent);
  display: inline-block;
  padding-bottom: 4px;
}
.f3__col p, .f3__center p {
  font-family: var(--k-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  margin: 8px 0;
}
.f3__col a, .f3__center a {
  color: var(--k-primary);
  text-decoration: none;
  border-bottom: 1px dashed rgba(37,104,228,0.35);
}
.f3__col a:hover, .f3__center a:hover {
  color: var(--k-accent);
  border-bottom-color: transparent;
}
.f3__bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.f3__bottom p {
  font-size: 14px;
  color: #6b7280;
}
.k-backtop{
  background: var(--k-primary);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
}
.k-backtop:hover{ background: var(--k-accent); }

/* ---------- Modal Detail ---------- */
.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__content{ padding:24px; text-align:center; }
.k-modal__content h3{ font:700 22px/1.3 var(--k-font-head); margin:12px 0; color: var(--k-text);}
.k-modal__content p{ font:400 15px/1.6 var(--k-font-body); color: var(--k-muted);}
.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; }