/* ===== Style Parfumexo (gaya portal institusi: header biru tua, kartu putih membulat, aksen hijau) =====
   HTML + CSS biasa, tanpa framework */

:root {
  --navy: #0a2a7a;
  --navy-tua: #0f1f6b;
  --hijau: #1f7a24;
  --hijau-tombol: #2e8b32;
  --biru: #2b4bf2;
  --biru-muda: #eceffd;
  --latar: #f3f6fc;
  --teks: #1c2540;
  --abu: #5d6784;
  --garis: #e1e6f3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Poppins', Arial, sans-serif;
  background-color: var(--latar);
  color: var(--teks);
  line-height: 1.7;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: var(--biru); text-decoration: none; }
a:hover { text-decoration: underline; }

.isi { width: 92%; max-width: 1270px; margin: 0 auto; }

/* ===== Header ===== */
header {
  background-color: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-isi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  height: 104px;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .3px;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.logo:hover { text-decoration: none; }
.logo-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.logo-wordmark__text {
  display: inline-block;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(18px, 1.5vw, 28px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  transform: translateY(1px);
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.logo svg { width: 38px; height: 38px; flex: none; }
.logo small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  text-transform: none;
  font-style: italic;
  opacity: .85;
}
nav { display: flex; align-items: center; gap: 30px; }
nav a {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 6px 0;
  border-bottom: 3px solid transparent;
}
nav a:hover, nav a.aktif { text-decoration: none; border-bottom-color: #fff; }
.bahasa {
  background-color: var(--hijau-tombol);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  height: 52px;
  padding: 0 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bahasa:hover { background-color: #25762a; text-decoration: none; }
.menu-tombol {
  display: none;
  background: none;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 8px;
  width: 44px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
}

/* ===== Hero slider ===== */
.slider {
  position: relative;
  height: 628px;
  overflow: hidden;
  background: #1b2a55;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.slide.aktif { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 20, 70, .78) 0%, rgba(8, 20, 70, .35) 55%, rgba(8, 20, 70, 0) 100%);
}
.slide-teks {
  position: absolute;
  z-index: 2;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  max-width: 620px;
}
.slide-teks .tag {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 30px;
  color: #cfe0ff;
  margin-bottom: 4px;
}
.slide-teks h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 76px;
  line-height: 1.05;
  font-weight: 600;
  margin-bottom: 18px;
}
.slide-teks h1 span { color: #e3c78a; display: block; }
.slide-teks p { font-size: 18px; margin-bottom: 26px; max-width: 480px; }
.slide-bawah {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 22px 16px;
  color: #fff;
  font-weight: 600;
  font-size: 19px;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.slide-bawah span { display: inline-flex; align-items: center; gap: 8px; }
.slide-bawah i {
  width: 34px; height: 34px;
  border: 2px solid #fff;
  border-radius: 9px;
  display: inline-block;
  font-style: normal;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  font-weight: 800;
}
.panah {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  width: 56px;
  height: 80px;
  cursor: pointer;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.panah:hover { color: #cfe0ff; }
.panah.kiri { left: 10px; }
.panah.kanan { right: 10px; }

/* ===== Tombol ===== */
.tombol {
  display: inline-block;
  background-color: var(--hijau-tombol);
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid var(--hijau-tombol);
  cursor: pointer;
  font-family: inherit;
}
.tombol:hover { background-color: #25762a; text-decoration: none; }
.tombol-garis {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  margin-left: 8px;
}
.tombol-garis:hover { background-color: #fff; color: var(--navy); }
section .tombol-garis, .kartu .tombol-garis { color: var(--navy); border-color: var(--navy); }

/* ===== Section & judul ===== */
section { padding: 70px 0; }
.judul { text-align: center; margin-bottom: 40px; }
.judul h2 {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--navy-tua);
  margin-bottom: 6px;
}
.judul p { color: var(--abu); font-size: 17px; }
.garis { display: none; }
.sub-hijau {
  text-align: center;
  color: var(--hijau);
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 30px;
}
.putih { background-color: #fff; }

/* ===== Kartu layanan (ikon + judul) ===== */
.grid-layanan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1270px;
  margin: 0 auto 64px;
}
.layanan {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 28px;
  min-height: 128px;
  font-weight: 800;
  font-size: 21px;
  color: var(--navy-tua);
  box-shadow: 0 2px 10px rgba(20, 40, 110, .05);
  transition: transform .2s, box-shadow .2s;
}
.layanan:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 40, 110, .12); }
.ikon {
  flex: none;
  width: 70px; height: 70px;
  border-radius: 14px;
  background: var(--biru-muda);
  display: grid;
  place-items: center;
  color: var(--biru);
}
.ikon svg { width: 36px; height: 36px; }
.ikon.solid { background: var(--biru); color: #fff; }

/* ===== Daftar unit (koleksi) ===== */
.unit-wadah {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1270px;
  margin: 0 auto;
}
.unit-gambar { flex: 0 0 300px; }
.unit-gambar img { border-radius: 24px; }
.unit-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.unit {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  min-height: 92px;
  font-size: 18px;
  color: #26304f;
  box-shadow: 0 4px 14px rgba(20, 40, 110, .08);
}
.unit:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(20, 40, 110, .16); }
.unit .ikon { width: 56px; height: 56px; border-radius: 10px; background: var(--biru); color: #fff; }
.unit .ikon svg { width: 30px; height: 30px; }

/* ===== Kartu berita ===== */
.grid-berita {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.berita {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  overflow: hidden;
  color: var(--teks);
  display: flex;
  flex-direction: column;
}
.berita:hover { text-decoration: none; box-shadow: 0 10px 26px rgba(20, 40, 110, .12); }
.berita img { width: 100%; height: 228px; object-fit: cover; background: #e8ecf8; }
.berita-isi { padding: 20px 26px 26px; }
.meta { font-size: 16px; color: var(--abu); margin-bottom: 8px; }
.meta b { color: var(--biru); margin-left: 6px; font-weight: 600; }
.berita h3 { font-size: 22px; line-height: 1.35; font-weight: 800; color: var(--navy-tua); }
.lihat-semua { text-align: center; margin-top: 36px; }

/* ===== Kartu umum (halaman lain) ===== */
.kartu-wadah {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.kartu {
  background-color: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 28px 26px;
  width: calc(33.333% - 16px);
  min-width: 260px;
  box-shadow: 0 2px 10px rgba(20, 40, 110, .05);
}
.putih .kartu { background-color: var(--latar); }
.kartu h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: var(--navy-tua); }
.kartu .nomor {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--biru-muda);
  color: var(--biru);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
}
.produk {
  background-color: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  overflow: hidden;
  width: calc(33.333% - 16px);
  min-width: 260px;
  box-shadow: 0 2px 10px rgba(20, 40, 110, .05);
}
.produk img { width: 100%; }
.produk-info { padding: 16px 22px 22px; }
.produk-info h3 { font-size: 20px; font-weight: 800; color: var(--navy-tua); }
.produk-info p { font-size: 14px; color: var(--abu); }
.harga { color: var(--hijau) !important; font-weight: 800; margin-top: 6px; font-size: 16px !important; }

/* ===== Dua kolom ===== */
.dua-kolom { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.dua-kolom > div { flex: 1; min-width: 280px; }
.dua-kolom img { border-radius: 24px; }
.dua-kolom h2 { font-size: 36px; font-weight: 800; color: var(--navy-tua); margin-bottom: 12px; line-height: 1.2; }
.dua-kolom p { margin-bottom: 12px; color: #39425f; }
ul.centang { list-style: none; margin: 10px 0; }
ul.centang li { padding-left: 28px; position: relative; margin-bottom: 8px; }
ul.centang li::before { content: "\2713"; position: absolute; left: 0; color: var(--hijau); font-weight: 800; }

/* ===== Judul halaman (bukan homepage) ===== */
.judul-halaman {
  background: linear-gradient(120deg, var(--navy) 0%,  #e3c78a 100%);
  color: #fff;
  text-align: center;
  padding: 64px 0 56px;
}
.judul-halaman h1 { font-size: 46px; font-weight: 800; }
.judul-halaman p { color: #cfdcff; font-size: 18px; }

/* ===== Galeri ===== */
.galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.galeri figure {
  background-color: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 40, 110, .05);
}
.galeri figcaption { padding: 14px 22px 22px; font-size: 15px; color: var(--abu); }
.galeri figcaption strong { display: block; color: var(--navy-tua); font-size: 20px; font-weight: 800; }

/* ===== Blog ===== */
.artikel {
  background-color: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 26px;
  box-shadow: 0 2px 10px rgba(20, 40, 110, .05);
}
.artikel h2 { font-size: 28px; font-weight: 800; color: var(--navy-tua); line-height: 1.3; margin-bottom: 4px; }
.artikel .tanggal { font-size: 14px; color: var(--abu); margin-bottom: 14px; }
.artikel .gambar-artikel {
  display: block;
  width: 100%;
  height: auto; /* Ikuti rasio asli agar gambar memenuhi lebar tanpa ruang kosong di sisi */
  max-height: none;
  object-fit: contain; /* Seluruh gambar tetap terlihat, tidak terpotong */
  object-position: center;
  background: transparent;
  border-radius: 16px;
  margin: 12px 0 20px;
  box-sizing: border-box;
}
.artikel p { margin-bottom: 12px; }
.artikel ul { margin: 0 0 12px 22px; }
.artikel li { margin-bottom: 4px; }

/* ===== Kontak & form ===== */
.kontak-wadah { display: flex; gap: 40px; flex-wrap: wrap; }
.kontak-info, .kontak-form {
  flex: 1;
  min-width: 290px;
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 32px;
}
.kontak-info h2, .kontak-form h2 { font-size: 28px; font-weight: 800; color: var(--navy-tua); margin-bottom: 14px; }
.kontak-info p { margin-bottom: 10px; }
form label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; }
form input, form select, form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #ccd5ee;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  background-color: #fff;
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--biru); box-shadow: 0 0 0 3px var(--biru-muda); }

/* ===== FAQ ===== */
details {
  background-color: #fff;
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 12px;
}
summary { cursor: pointer; font-weight: 800; color: var(--navy-tua); }
details p { margin-top: 8px; color: var(--abu); }

/* ===== Ajakan (CTA) ===== */
.ajakan {
  background: linear-gradient(120deg, var(--navy) 0%, #e3c78a 100%);
  color: #fff;
  text-align: center;
  padding: 60px 0;
}
.ajakan h2 { font-size: 34px; font-weight: 800; margin-bottom: 8px; }
.ajakan p { margin-bottom: 22px; color: #cfdcff; }

/* ===== Footer ===== */
footer {
  background-color: var(--navy);
  color: #c4d0f2;
  padding: 48px 0 20px;
  font-size: 15px;
}
.footer-isi { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
footer h4 { color: #fff; margin-bottom: 8px; font-size: 17px; }
footer a { color: #fff; }
.hak-cipta {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 14px;
}

/* ===== Chat melayang ===== */
.chat { position: fixed; right: 26px; bottom: 26px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chat-balon {
  position: relative;
  background: var(--navy);
  color: #fff;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  max-width: 140px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.chat-balon button {
  position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: var(--biru); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.chat-tombol {
  width: 62px; height: 62px; border-radius: 50%;
  background: #1db954;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.chat-tombol:hover { background: #17a34a; text-decoration: none; }
.chat-tombol svg { width: 32px; height: 32px; color: #fff; }

/* ===== Responsif ===== */
@media (max-width: 1150px) {
  .header-isi { gap: 24px; }
  nav { gap: 18px; }
  nav a { font-size: 15px; }
  .unit-wadah { flex-direction: column; }
  .unit-gambar { display: none; }
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-layanan, .grid-berita { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .header-isi { height: auto; padding: 14px 0; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .menu-tombol { display: block; }
  nav { display: none; flex-direction: column; align-items: flex-start; width: 100%; order: 5; gap: 6px; padding-bottom: 8px; }
  nav.buka { display: flex; }
  .bahasa { height: 40px; padding: 0 16px; font-size: 15px; }
  .slider { height: 520px; }
  .slide-teks { left: 6%; right: 6%; max-width: none; }
  .slide-teks h1 { font-size: 46px; }
  .slide-teks .tag { font-size: 22px; }
  .slide-bawah { display: none; }
  .panah { width: 36px; font-size: 30px; }
  .judul h2 { font-size: 34px; }
  .sub-hijau { font-size: 24px; }
  .galeri { grid-template-columns: repeat(2, 1fr); }
  .kartu, .produk { width: 100%; }
  section { padding: 48px 0; }
}

@media (max-width: 600px) {
  .grid-layanan, .grid-berita, .unit-grid, .galeri { grid-template-columns: 1fr; }
  .slider { height: 480px; }
  .slide-teks h1 { font-size: 38px; }
  .judul-halaman h1 { font-size: 32px; }
  .artikel { padding: 24px 20px; }
  .chat { right: 14px; bottom: 14px; }
}


/* ===== Parfumexo 2.0 — warm editorial luxury ===== */
:root{--navy:#30251f;--navy-tua:#241b17;--hijau:#6f7652;--hijau-tombol:#737a50;--biru:#737a50;--biru-muda:#f4eee6;--latar:#faf7f2;--teks:#30251f;--abu:#81766c;--garis:#e8ded2;--cream:#f2e8dc;--gold:#c5a46d}
body{background:var(--latar);color:var(--teks);font-size:15px}
a{color:var(--hijau)}
.site-header{background:rgba(48,37,31,.97);box-shadow:0 8px 30px #21160e12;backdrop-filter:blur(14px)}
.header-isi{height:82px;justify-content:space-between;gap:24px}
.logo{font-size:17px;letter-spacing:.6px;text-transform:none;gap:10px}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px 13px 13px 3px;background:var(--gold);color:#30251f;font-family:Georgia,serif;font-size:25px}
.logo small{font-size:9px;letter-spacing:2px;font-style:normal;color:#d9c7ad;margin-top:4px}
nav{gap:22px}nav a{font-size:13px;font-weight:600;color:#f9f3e9;border:0!important;position:relative}
nav a:after{content:"";height:2px;position:absolute;bottom:-7px;left:0;width:0;background:var(--gold);transition:width .25s}
nav a:hover:after,nav a.aktif:after{width:100%}
.header-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.nav-login{color:#f8f1e7;font-weight:700;font-size:13px;padding:10px}
.tombol{background:var(--hijau-tombol);border-color:var(--hijau-tombol);border-radius:999px;padding:13px 25px;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 7px 18px #737a5026}
.tombol:hover{background:#5e6541;transform:translateY(-2px);box-shadow:0 10px 22px #737a5030}
.tombol-kecil{padding:10px 18px;font-size:12px}
.slider{height:clamp(460px,58vw,650px);background:#30251f}
.slide::after{background:linear-gradient(90deg,rgba(32,23,18,.82),rgba(32,23,18,.38) 55%,rgba(32,23,18,.03))}
.slide-teks{max-width:650px;left:8%}
.slide-teks .tag{font-size:21px;color:#e1c69a;letter-spacing:1px}
.slide-teks h1{font-size:clamp(42px,5.4vw,72px);line-height:1.08}
.slide-teks h1 span{color:#dfc18e}
section{padding:76px 0}
.judul h2,.isi h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(30px,4vw,44px);color:#34271f}
.judul p{color:var(--abu)}
.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:800;color:var(--hijau);display:block;margin-bottom:10px}
.produk-section{background:#f1e9df}
.produk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.produk-card{background:#fffdfa;border:1px solid #e9ded2;border-radius:18px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.produk-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #39291b12}
.produk-image{height:245px;background:#f0e8df;position:relative;display:grid;place-items:center;overflow:hidden}
.produk-image img{width:100%;height:100%;object-fit:contain;padding:22px;transition:transform .4s}
.produk-card:hover .produk-image img{transform:scale(1.05)}
.produk-tag{position:absolute;top:14px;left:14px;background:#fffaf2e8;color:#625b44;border-radius:99px;padding:6px 11px;font-size:10px;letter-spacing:.5px;font-weight:800}
.produk-info{padding:21px}
.produk-info h3{font-family:'Playfair Display',Georgia,serif;font-size:22px;margin-bottom:7px}
.produk-info p{color:var(--abu);font-size:13px;min-height:44px;line-height:1.7}
.produk-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:17px}
.produk-bottom strong{font-size:15px;color:#655b3c}
.center-action{text-align:center;margin-top:34px}
.site-footer{background:#30251f;color:#e9ded0;padding:48px 0 18px}
.footer-isi{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:38px;padding-bottom:35px}
.footer-brand{font-family:'Playfair Display',Georgia,serif;font-size:29px;color:#fff8ed;font-weight:700}
.footer-brand span{color:var(--gold)}
.site-footer p{font-size:13px;color:#c4b6a6;margin-top:10px}
.site-footer h4{color:#fff4e5;margin-bottom:13px}
.site-footer a:not(.footer-brand){display:block;color:#d8cbbd;font-size:13px;margin:7px 0}
.footer-bottom{border-top:1px solid #ffffff20;padding-top:18px;display:flex;justify-content:space-between;color:#b6a697;font-size:11px}
.auth-page{background:#f6f0e8}
.auth-wrap{width:min(1120px,92%);margin:54px auto 70px;display:grid;grid-template-columns:1fr .85fr;min-height:570px;background:#fffdfa;border:1px solid var(--garis);border-radius:24px;overflow:hidden;box-shadow:0 24px 70px #34271f0d}
.auth-art{padding:55px 45px;background:linear-gradient(145deg,#e7d7c5,#f3e9dc);display:flex;flex-direction:column;justify-content:center}
.auth-art h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(34px,4vw,50px);line-height:1.13;margin-bottom:16px}
.auth-art p{color:#76685a;max-width:360px}
.auth-art img{width:90%;height:200px;object-fit:contain;margin:25px auto 0;mix-blend-mode:multiply}
.auth-card{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.auth-card h2{font-family:'Playfair Display',Georgia,serif;font-size:34px;margin-bottom:5px}
.muted{color:var(--abu);font-size:13px;margin-bottom:24px}
.auth-card label,.admin-form label{font-size:12px;font-weight:800;margin:13px 0 7px;display:block}
.auth-card label small{font-weight:500;color:var(--abu)}
.auth-card input,.admin-form input,.admin-form select,.admin-form textarea{width:100%;border:1px solid #e4d9cc;border-radius:10px;padding:13px 14px;background:#fffdfa;color:var(--teks);font:inherit;outline:none;transition:border .2s,box-shadow .2s}
.auth-card input:focus,.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{border-color:#92976c;box-shadow:0 0 0 3px #737a5017}
.full{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:23px}
.auth-switch{text-align:center;font-size:12px;color:var(--abu);margin-top:20px}
.auth-switch a{font-weight:800}
.alert,.success{padding:12px 14px;border-radius:10px;font-size:13px;margin:14px 0}
.alert{background:#fff0ed;color:#9d4034;border:1px solid #f3d1cb}
.success{background:#eef5e8;color:#45633c;border:1px solid #d6e7cb}
.admin-page{background:#f6f3ee;min-height:100vh}
.admin-top{height:74px;background:#30251f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(4%,calc((100% - 1400px)/2))}
.admin-top>div{display:flex;align-items:center;gap:22px;font-size:12px}.admin-top>div a{color:#e0c48f;font-weight:700}
.admin-main{max-width:1450px;width:92%;margin:38px auto 70px}
.admin-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:20px}
.admin-heading h1{font-family:'Playfair Display',Georgia,serif;font-size:40px;margin:0}
.admin-heading p{color:var(--abu);margin-top:5px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.stat-card,.admin-panel{background:#fff;border:1px solid #e8e0d6;border-radius:16px;padding:22px}
.stat-card span,.stat-card small{display:block;color:var(--abu);font-size:12px}
.stat-card strong{display:block;font-size:31px;margin:8px 0;color:#3b2c23}
.admin-columns{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.6fr);gap:20px;align-items:start}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.panel-title h2{font-family:'Playfair Display',Georgia,serif;font-size:25px;margin:0}
.admin-form label{margin-top:14px}
.check-label{display:flex!important;align-items:center;gap:9px}.check-label input{width:auto}
.cancel-link{display:block;text-align:center;margin-top:12px;font-size:12px}
.count-pill,.status{border-radius:99px;padding:6px 10px;font-size:10px;font-weight:800;background:#f1eadf;color:#6d604e;white-space:nowrap}
.table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse;font-size:12px}.admin-table th{text-align:left;background:#faf7f2;color:#81766c;font-size:10px;letter-spacing:.8px;text-transform:uppercase}.admin-table th,.admin-table td{padding:13px 10px;border-bottom:1px solid #eee7df;vertical-align:middle}
.table-product{display:flex;align-items:center;gap:10px;min-width:170px}.table-product img{width:45px;height:45px;object-fit:contain;background:#f5eee5;border-radius:9px}.table-product strong,.table-product small{display:block}.table-product small{color:var(--abu);margin-top:3px}.status-on{background:#eaf3e4;color:#4e713c}.status-off{background:#f8e8e3;color:#9b4a39}
.row-actions{display:flex;gap:9px;align-items:center}.row-actions a,.delete-link{font-size:11px;font-weight:800;color:#677045;background:none;border:0;cursor:pointer}.delete-link{color:#a54b3b}
@media(max-width:1050px){.header-isi{gap:15px}.header-isi nav{gap:13px}nav a{font-size:12px}.logo{font-size:14px}.header-actions{gap:2px}.produk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-columns{grid-template-columns:1fr}}
@media(max-width:760px){.header-isi{height:74px;justify-content:space-between}.menu-tombol{display:block;order:3;border-color:#d8c5ad;color:#fff}.header-isi nav{display:none;position:absolute;top:74px;left:0;right:0;background:#30251f;padding:20px 5%;align-items:stretch;flex-direction:column;gap:12px}.header-isi nav.buka{display:flex}.header-isi nav a{font-size:14px}.header-actions{margin-left:auto}.nav-login{padding:8px;font-size:12px}.header-actions .tombol{padding:9px 12px}.slider{height:510px}.slide-teks{left:7%;right:7%}.slide-teks h1{font-size:43px}.slide-teks p{font-size:15px}.produk-grid{grid-template-columns:1fr}.produk-image{height:260px}.footer-isi{grid-template-columns:1fr;gap:22px}.footer-bottom{gap:8px;flex-direction:column}.auth-wrap{grid-template-columns:1fr;margin:25px auto 45px}.auth-art{padding:30px}.auth-art img{height:125px}.auth-card{padding:30px 25px}.stats-grid{grid-template-columns:1fr}.admin-heading{align-items:flex-start;flex-direction:column}.admin-heading h1{font-size:34px}.admin-main{margin-top:25px}.admin-panel{padding:16px}}


/* ===== Perbaikan gambar koleksi pada halaman Gallery ===== */
/* Gambar produk berbentuk persegi; tampilkan seluruh gambar agar botol parfum tidak terpotong. */
.gallery-page .produk-image {
  height: 270px;
  background: linear-gradient(135deg, #f4e8d4 0%, #ead5b2 100%);
  overflow: hidden;
}
.gallery-page .produk-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center;
  padding: 8px !important;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .gallery-page .produk-image { height: 280px; }
}


/* Gambar artikel mengikuti lebar layar, tanpa tinggi tetap agar tidak menyisakan ruang kosong */


/* ===== Blog: perluas konten agar ruang kosong kiri/kanan berkurang ===== */
.blog-section {
  padding-top: 24px;
  padding-bottom: 48px;
}
.blog-isi {
  width: min(94%, 1450px);
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
}
.blog-isi .artikel {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .blog-isi {
    width: 94%;
  }
  .blog-section {
    padding-top: 18px;
    padding-bottom: 32px;
  }
}


/* ===== Blog: susunan editorial, teks kiri dan foto kanan ===== */
.blog-isi .artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 52px);
}
.blog-isi .artikel-konten {
  min-width: 0;
}
.blog-isi .artikel .gambar-artikel {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  margin: 0;
  align-self: center;
}
@media (max-width: 760px) {
  .blog-isi .artikel {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .blog-isi .artikel .gambar-artikel {
    width: 100%;
    max-height: none;
    margin-top: 4px;
  }
}


/* ===== Banner judul halaman: ukuran lebih ringkas di semua halaman ===== */
.judul-halaman {
  padding: 38px 20px 32px;
}
.judul-halaman h1 {
  font-size: 38px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.judul-halaman p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.judul-halaman p + p {
  margin-top: 10px;
}
@media (max-width: 600px) {
  .judul-halaman {
    padding: 30px 16px 26px;
  }
  .judul-halaman h1 {
    font-size: 30px;
  }
  .judul-halaman p {
    font-size: 14px;
  }
}