/* ==========================================================================
   Raden Group — gaya bersama untuk semua halaman
   Warna diambil langsung dari logo resmi: kuning #FDCC02, hitam #111111.
   Tiap unit usaha menimpa --aksen lewat class di <body> (lihat "Tema brand").
   ========================================================================== */

:root {
  --kuning: #FDCC02;
  --kuning-tua: #E0A800;
  --kuning-muda: #FFF4CC;

  --hitam: #111111;
  --hitam-2: #1a1a1a;
  --hitam-3: #262626;

  --putih: #ffffff;
  --abu-terang: #f5f5f5;
  --abu: #6b6b6b;
  --abu-garis: #e5e5e5;

  /* Warna aksen — diganti per brand */
  --aksen: #FDCC02;
  --aksen-teks: #111111;

  --lebar: 1180px;
  --radius: 14px;
  --bayang: 0 4px 20px rgba(0, 0, 0, 0.08);
  --bayang-kuat: 0 12px 40px rgba(0, 0, 0, 0.15);
  --transisi: 0.25s ease;
}

/* Tema brand -------------------------------------------------------------- */
body.brand-bengkel { --aksen: #FDCC02; --aksen-teks: #111111; }
body.brand-wangi   { --aksen: #4CAF50; --aksen-teks: #ffffff; }
body.brand-studio  { --aksen: #FDCC02; --aksen-teks: #111111; }

/* Dasar ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--hitam);
  background: var(--putih);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

p { margin: 0 0 1rem; }

.wadah {
  width: 100%;
  max-width: var(--lebar);
  margin: 0 auto;
  padding: 0 24px;
}

.bagian { padding: clamp(56px, 9vw, 104px) 0; }
.bagian-gelap { background: var(--hitam); color: var(--putih); }
.bagian-abu { background: var(--abu-terang); }

/* Judul bagian ------------------------------------------------------------ */
.judul-bagian { text-align: center; max-width: 680px; margin: 0 auto clamp(36px, 5vw, 60px); }
.judul-bagian p { color: var(--abu); font-size: 1.05rem; }
.bagian-gelap .judul-bagian p { color: rgba(255, 255, 255, 0.7); }

.label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kuning-tua);
  margin-bottom: 12px;
}
.bagian-gelap .label { color: var(--kuning); }

/* Tombol ------------------------------------------------------------------ */
.tombol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transisi), box-shadow var(--transisi), background var(--transisi);
}
.tombol:hover { transform: translateY(-2px); }

.tombol-utama {
  background: var(--kuning);
  color: var(--hitam);
  box-shadow: 0 6px 18px rgba(253, 204, 2, 0.35);
}
.tombol-utama:hover { box-shadow: 0 10px 26px rgba(253, 204, 2, 0.45); }

.tombol-garis { border-color: currentColor; }
.tombol-garis:hover { background: rgba(255, 255, 255, 0.08); }

.bagian:not(.bagian-gelap) .tombol-garis:hover { background: rgba(0, 0, 0, 0.05); }

/* Header ------------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(17, 17, 17, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header .wadah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

.header-logo img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }

.nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  transition: color var(--transisi), background var(--transisi);
}
.nav a:hover { color: var(--kuning); background: rgba(255, 255, 255, 0.06); }
.nav a.aktif { color: var(--kuning); }

/* Submenu unit usaha */
.punya-submenu { position: relative; }

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--hitam-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--bayang-kuat);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--transisi);
}
.punya-submenu:hover .submenu,
.punya-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a { display: block; padding: 11px 14px; font-size: 0.88rem; }

.tombol-menu {
  display: none;
  background: none;
  border: 0;
  color: var(--putih);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--hitam);
  color: var(--putih);
  padding: clamp(72px, 12vw, 132px) 0;
  overflow: hidden;
}

/* semburat kuning lembut di latar */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(253, 204, 2, 0.16) 0%, transparent 68%);
  pointer-events: none;
}

.hero .wadah { position: relative; z-index: 1; }
.hero-isi { max-width: 720px; }
.hero h1 { margin-bottom: 20px; }
.hero h1 .sorot { color: var(--kuning); }
.hero p { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255, 255, 255, 0.78); max-width: 560px; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Hero khusus halaman brand */
.hero-brand { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
/* Sudut dibulatkan supaya logo yang latarnya masih padat (Raden Wangi)
   tidak terlihat seperti kotak yang ditempel di atas hero hitam.
   Untuk logo yang sudah transparan, radius ini tidak terlihat. */
.hero-brand .hero-gambar img {
  max-height: 380px;
  margin: 0 auto;
  border-radius: 14px;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.4));
}

/* Kartu unit usaha -------------------------------------------------------- */
.grid-unit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.kartu-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--putih);
  border: 1px solid var(--abu-garis);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi);
}
.kartu-unit:hover {
  transform: translateY(-6px);
  box-shadow: var(--bayang-kuat);
  border-color: transparent;
}

/* Tinggi dikunci supaya judul ketiga kartu tetap sejajar, walaupun
   rasio logonya beda-beda (Wangi melebar, dua lainnya menegak). */
.kartu-unit .gambar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  height: 230px;
  background: var(--kuning);
}
.kartu-unit .gambar img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* latar khas tiap unit */
.kartu-unit.u-bengkel .gambar { background: linear-gradient(140deg, #1a1a1a, #2e2a12); }
.kartu-unit.u-wangi   .gambar { background: linear-gradient(140deg, #FDCC02, #F5B800); }
.kartu-unit.u-studio  .gambar { background: linear-gradient(140deg, #FDCC02, #FFD84D); }

.kartu-unit .isi { padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.kartu-unit .isi p { color: var(--abu); font-size: 0.95rem; flex: 1; }

.pil {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--abu-terang);
  color: var(--abu);
  margin-bottom: 12px;
}
.kartu-unit.u-bengkel .pil { background: #FFF4CC; color: #8a6d00; }
.kartu-unit.u-wangi   .pil { background: #E8F5E9; color: #2E7D32; }
.kartu-unit.u-studio  .pil { background: #E1F5FE; color: #0277BD; }

.tautan-panah {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--hitam);
}
.tautan-panah span { transition: transform var(--transisi); }
.kartu-unit:hover .tautan-panah span { transform: translateX(5px); }

/* Grid nilai / fitur ------------------------------------------------------ */
.grid-nilai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}

.nilai { text-align: center; padding: 8px; }
.nilai .ikon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kuning);
  color: var(--hitam);
  font-size: 1.5rem;
}
.nilai h3 { font-size: 1.05rem; margin-bottom: 6px; }
.nilai p { font-size: 0.92rem; color: var(--abu); margin: 0; }
.bagian-gelap .nilai p { color: rgba(255, 255, 255, 0.68); }

/* Daftar layanan ---------------------------------------------------------- */
.grid-layanan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.layanan {
  background: var(--putih);
  border: 1px solid var(--abu-garis);
  border-left: 4px solid var(--aksen);
  border-radius: 10px;
  padding: 24px 24px 22px;
  transition: transform var(--transisi), box-shadow var(--transisi);
}
.layanan:hover { transform: translateY(-4px); box-shadow: var(--bayang); }
.layanan h3 { font-size: 1.05rem; margin-bottom: 6px; }
.layanan p { font-size: 0.92rem; color: var(--abu); margin: 0; }

/* Dua kolom teks + gambar ------------------------------------------------- */
.dua-kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

/* Galeri ------------------------------------------------------------------ */
.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.galeri .bingkai {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--abu-terang);
  display: grid;
  place-items: center;
  color: var(--abu);
  font-size: 0.85rem;
  border: 2px dashed var(--abu-garis);
}
.galeri .bingkai img { width: 100%; height: 100%; object-fit: cover; }

/* Kontak ------------------------------------------------------------------ */
.grid-kontak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}

.kartu-kontak {
  background: var(--putih);
  border: 1px solid var(--abu-garis);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: center;
}
.kartu-kontak .ikon {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kuning-muda);
  font-size: 1.3rem;
}
.kartu-kontak h3 { font-size: 1rem; margin-bottom: 4px; }
.kartu-kontak p { font-size: 0.93rem; color: var(--abu); margin: 0; }

/* Ajakan (CTA) ------------------------------------------------------------ */
.ajakan {
  background: var(--kuning);
  color: var(--hitam);
  border-radius: var(--radius);
  padding: clamp(36px, 6vw, 58px);
  text-align: center;
}
.ajakan h2 { margin-bottom: 10px; }
.ajakan p { max-width: 520px; margin: 0 auto 26px; opacity: 0.8; }
.ajakan .tombol-utama { background: var(--hitam); color: var(--putih); box-shadow: none; }

/* Footer ------------------------------------------------------------------ */
.footer { background: var(--hitam); color: rgba(255, 255, 255, 0.66); padding: 64px 0 28px; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.footer img.footer-logo { height: 54px; width: auto; margin-bottom: 18px; }
.footer h4 { color: var(--putih); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a:hover { color: var(--kuning); }
.footer-bawah {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Penanda isi sementara --------------------------------------------------- */
/* Dipakai untuk data yang belum diisi (alamat, telepon, jam buka).
   Cari kata "isi-sementara" untuk menemukan semuanya. */
.isi-sementara {
  background: rgba(253, 204, 2, 0.22);
  border-bottom: 1px dashed var(--kuning-tua);
  padding: 0 3px;
  border-radius: 2px;
}

/* Responsif --------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-brand { grid-template-columns: 1fr; text-align: center; }
  .hero-brand .hero-isi { max-width: none; }
  .hero-brand .hero-aksi { justify-content: center; }
  .hero-brand .hero-gambar { order: -1; }
  .hero-brand .hero-gambar img { max-height: 260px; }
  .dua-kolom { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .tombol-menu { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--hitam-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    display: none;
  }
  .nav.terbuka { display: flex; }
  .nav a { padding: 13px 16px; }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    margin: 0 0 6px 16px;
    padding: 0;
  }
  .submenu a { padding: 10px 14px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bawah { justify-content: center; text-align: center; }
}

/* Katalog pilihan desain Raden Studio ----------------------------------- */
.alat-katalog-studio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid #d9dde2;
}

.filter-katalog-studio { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-katalog-studio button {
  appearance: none;
  padding: 11px 17px;
  border: 1px solid #d7dce2;
  border-radius: 999px;
  background: #fff;
  color: #3d4651;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transisi), background var(--transisi), color var(--transisi);
}
.filter-katalog-studio button:hover { border-color: #7e8a99; }
.filter-katalog-studio button.aktif { border-color: var(--hitam-studio); background: var(--hitam-studio); color: #fff; }

.pencarian-katalog-studio { width: min(100%, 300px); }
.pencarian-katalog-studio input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d7dce2;
  border-radius: 999px;
  background: #fff;
  color: #1b222b;
  font: inherit;
  font-size: 0.78rem;
  outline: none;
}
.pencarian-katalog-studio input:focus { border-color: #9a7600; box-shadow: 0 0 0 3px rgba(253,204,2,0.2); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.jumlah-katalog-studio { margin: 0 0 30px; color: #69727e; font-size: 0.75rem; }
.jumlah-katalog-studio strong { color: #7a5d00; }

.grid-katalog-studio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.kartu-katalog-studio { overflow: hidden; background: #fff; border: 1px solid #dfe3e8; transition: transform var(--transisi), box-shadow var(--transisi); }
.kartu-katalog-studio:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(14,24,40,0.11); }
.kartu-katalog-studio[hidden] { display: none; }
.pratinjau-hidup-studio { position: relative; display: block; height: 350px; overflow: hidden; background: #cfd5dc; }
.pratinjau-hidup-studio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  pointer-events: none;
  transform: scale(0.44);
  transform-origin: top left;
}
.pratinjau-hidup-studio::after { content: ''; position: absolute; inset: 0; border-bottom: 1px solid rgba(8,18,30,0.12); }
.lencana-demo-studio { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 9px 12px; background: rgba(7,14,24,0.86); color: #fff; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(8px); }
.isi-kartu-katalog-studio { padding: 30px 32px 34px; }
.meta-katalog-studio { display: flex; align-items: center; gap: 8px; }
.meta-katalog-studio span { padding: 5px 8px; background: #edf1f4; color: #65707d; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.meta-katalog-studio span:first-child { background: var(--kuning-studio-muda); color: #6f5500; }
.isi-kartu-katalog-studio h3 { margin: 17px 0 9px; font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.isi-kartu-katalog-studio > p { min-height: 52px; margin: 0; color: var(--abu); font-size: 0.88rem; }
.aksi-katalog-studio { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.tombol-demo-studio { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--hitam-studio); color: #fff; font-size: 0.75rem; font-weight: 800; }
.tombol-demo-studio span { color: var(--kuning-studio); }
.tombol-demo-studio:hover { background: #242b36; }
.pilih-demo-studio { padding-bottom: 3px; border-bottom: 1px solid #87919d; color: #25303c; font-size: 0.73rem; font-weight: 700; }
.katalog-kosong-studio { padding: 54px 24px; background: #fff; border: 1px dashed #b9c0c9; color: #68727e; text-align: center; }

@media (max-width: 900px) {
  .pratinjau-hidup-studio { height: 280px; }
  .pratinjau-hidup-studio iframe { transform: scale(0.36); }
}

@media (max-width: 760px) {
  .alat-katalog-studio { align-items: stretch; flex-direction: column; }
  .pencarian-katalog-studio { width: 100%; }
  .grid-katalog-studio { grid-template-columns: 1fr; }
  .pratinjau-hidup-studio { height: 245px; }
  .pratinjau-hidup-studio iframe { transform: scale(0.31); }
  .isi-kartu-katalog-studio { padding: 26px; }
  .isi-kartu-katalog-studio > p { min-height: auto; }
  .aksi-katalog-studio { align-items: flex-start; flex-direction: column; gap: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Halaman Bengkel Raden --------------------------------------------------- */
.halaman-bengkel {
  --kuning-bengkel: #FDCC02;
  --kuning-bengkel-muda: #FFE36C;
  --hitam-bengkel: #0d0e0f;
  --garis-bengkel: rgba(253, 204, 2, 0.22);
}

.hero-bengkel {
  min-height: 690px;
  display: grid;
  align-items: center;
  padding: clamp(72px, 10vw, 118px) 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    var(--hitam-bengkel);
  background-size: 72px 72px;
}

.hero-bengkel::before {
  top: -15%;
  right: -4%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(253, 204, 2, 0.19) 0%, transparent 66%);
}

.hero-bengkel-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
}

.hero-bengkel h1 {
  max-width: 700px;
  font-size: clamp(3rem, 6.2vw, 5.45rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin-bottom: 28px;
}

.hero-bengkel p { max-width: 610px; font-size: clamp(1rem, 1.5vw, 1.16rem); }
.hero-bengkel .label { letter-spacing: 0.16em; }

.lencana-bengkel {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
}

.lencana-bengkel::before,
.lencana-bengkel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(253, 204, 2, 0.2);
}
.lencana-bengkel::before { width: 440px; height: 440px; }
.lencana-bengkel::after { width: 365px; height: 365px; border-style: dashed; }
.lencana-bengkel img { position: relative; z-index: 2; max-height: 440px; filter: drop-shadow(0 24px 44px rgba(0,0,0,0.45)); }

.garis-teknis { position: absolute; width: 120px; height: 2px; background: var(--kuning-bengkel); }
.garis-teknis::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--kuning-bengkel); top: -3px; }
.garis-teknis-atas { top: 58px; right: -12px; }
.garis-teknis-atas::after { left: 0; }
.garis-teknis-bawah { bottom: 54px; left: -18px; }
.garis-teknis-bawah::after { right: 0; }

.pita-informasi { background: var(--kuning-bengkel); color: var(--hitam); }
.grid-informasi-bengkel { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0; padding-bottom: 0; }
.grid-informasi-bengkel > div { position: relative; padding: 28px 34px 30px 54px; border-right: 1px solid rgba(17,17,17,0.18); }
.grid-informasi-bengkel > div:first-child { border-left: 1px solid rgba(17,17,17,0.18); }
.grid-informasi-bengkel strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.grid-informasi-bengkel p { margin: 0; font-size: 0.82rem; line-height: 1.5; opacity: 0.72; }
.nomor-informasi { position: absolute; left: 18px; top: 30px; font-size: 0.67rem; font-weight: 800; opacity: 0.55; }

.bagian-pengantar-bengkel { padding: clamp(80px, 10vw, 130px) 0; }
.pengantar-bengkel { align-items: start; }
.pengantar-bengkel h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); max-width: 690px; }
.salinan-pengantar { padding-top: 30px; font-size: 1.04rem; color: #414141; }

.bagian-layanan-bengkel { background: #f0f0ee; }
.kepala-layanan-bengkel { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: end; margin-bottom: clamp(42px, 6vw, 72px); }
.kepala-layanan-bengkel h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0; }
.kepala-layanan-bengkel > p { color: var(--abu); max-width: 470px; margin: 0 0 8px; }
.daftar-layanan-bengkel { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfcfca; border-left: 1px solid #cfcfca; }
.layanan-bengkel { min-height: 225px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: rgba(255,255,255,0.55); border-right: 1px solid #cfcfca; border-bottom: 1px solid #cfcfca; transition: background var(--transisi), transform var(--transisi); }
.layanan-bengkel:hover { background: var(--putih); transform: translateY(-3px); }
.layanan-bengkel-utama { background: var(--hitam); color: var(--putih); }
.layanan-bengkel-utama:hover { background: var(--hitam-2); }
.angka-layanan { color: var(--kuning-tua); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; }
.layanan-bengkel h3 { margin-bottom: 8px; }
.layanan-bengkel p { color: var(--abu); font-size: 0.9rem; line-height: 1.65; margin: 0; }
.layanan-bengkel-utama p { color: rgba(255,255,255,0.65); }

.bagian-prinsip-bengkel { background: var(--hitam-bengkel); color: var(--putih); }
.judul-prinsip-bengkel { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 58px; }
.judul-prinsip-bengkel h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0; }
.grid-prinsip-bengkel { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--garis-bengkel); }
.grid-prinsip-bengkel > div { padding: 30px 28px 6px 0; border-right: 1px solid var(--garis-bengkel); }
.grid-prinsip-bengkel > div + div { padding-left: 28px; }
.grid-prinsip-bengkel > div:last-child { border-right: 0; }
.grid-prinsip-bengkel span { color: var(--kuning-bengkel); font-size: 0.72rem; font-weight: 800; }
.grid-prinsip-bengkel h3 { margin-top: 48px; font-size: 1.05rem; }
.grid-prinsip-bengkel p { color: rgba(255,255,255,0.62); font-size: 0.88rem; margin: 0; }

.bagian-lokasi-bengkel { padding: 0; background: var(--putih); }
.grid-lokasi-bengkel { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.keterangan-lokasi-bengkel { padding: clamp(64px, 8vw, 112px) max(32px, calc((100vw - var(--lebar)) / 2)); padding-right: clamp(40px, 7vw, 94px); }
.keterangan-lokasi-bengkel h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.keterangan-lokasi-bengkel address { font-style: normal; color: var(--abu); margin: 24px 0 34px; }
.jadwal-bengkel { border-top: 1px solid var(--abu-garis); margin-bottom: 34px; }
.jadwal-bengkel div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--abu-garis); font-size: 0.9rem; }
.jadwal-bengkel span { color: var(--abu); }
.aksi-lokasi-bengkel { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.tautan-instagram { font-weight: 700; font-size: 0.86rem; border-bottom: 1px solid currentColor; }
.peta-bengkel { min-height: 660px; background: var(--abu-terang); }
.peta-bengkel iframe { display: block; width: 100%; height: 100%; min-height: 660px; border: 0; filter: grayscale(1) contrast(1.03); }

.bagian-ajakan-bengkel { background: var(--kuning-bengkel); }
.ajakan-bengkel { max-width: 870px; }
.ajakan-bengkel .label { color: rgba(17,17,17,0.62); }
.ajakan-bengkel h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-bottom: 18px; }
.ajakan-bengkel p { max-width: 650px; font-size: 1.05rem; }
.ajakan-bengkel .tombol-utama { background: var(--hitam); color: var(--putih); box-shadow: none; }
.ajakan-bengkel .tombol-garis:hover { background: rgba(17,17,17,0.08); }

@media (max-width: 900px) {
  .hero-bengkel { min-height: auto; }
  .hero-bengkel-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-bengkel .hero-isi { max-width: 760px; margin: 0 auto; }
  .hero-bengkel .hero-aksi { justify-content: center; }
  .lencana-bengkel { order: -1; min-height: 330px; }
  .lencana-bengkel::before { width: 315px; height: 315px; }
  .lencana-bengkel::after { width: 260px; height: 260px; }
  .lencana-bengkel img { max-height: 310px; }
  .grid-informasi-bengkel { grid-template-columns: 1fr; }
  .grid-informasi-bengkel > div { border: 0; border-bottom: 1px solid rgba(17,17,17,0.18); }
  .grid-informasi-bengkel > div:first-child { border-left: 0; }
  .kepala-layanan-bengkel { grid-template-columns: 1fr; gap: 20px; }
  .daftar-layanan-bengkel { grid-template-columns: repeat(2, 1fr); }
  .grid-prinsip-bengkel { grid-template-columns: repeat(2, 1fr); }
  .grid-prinsip-bengkel > div:nth-child(2) { border-right: 0; }
  .grid-prinsip-bengkel > div:nth-child(n+3) { border-top: 1px solid var(--garis-bengkel); }
  .grid-lokasi-bengkel { grid-template-columns: 1fr; }
  .keterangan-lokasi-bengkel { padding-left: 24px; padding-right: 24px; }
  .peta-bengkel, .peta-bengkel iframe { min-height: 480px; }
}

@media (max-width: 760px) {
  .hero-bengkel { padding-top: 56px; }
  .hero-bengkel h1 { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  .lencana-bengkel { min-height: 250px; }
  .lencana-bengkel::before { width: 245px; height: 245px; }
  .lencana-bengkel::after { width: 205px; height: 205px; }
  .lencana-bengkel img { max-height: 240px; }
  .garis-teknis { display: none; }
  .daftar-layanan-bengkel { grid-template-columns: 1fr; }
  .layanan-bengkel { min-height: 190px; }
  .judul-prinsip-bengkel { display: block; }
  .grid-prinsip-bengkel { grid-template-columns: 1fr; }
  .grid-prinsip-bengkel > div,
  .grid-prinsip-bengkel > div + div { padding: 26px 0; border-right: 0; border-top: 1px solid var(--garis-bengkel); }
  .grid-prinsip-bengkel h3 { margin-top: 24px; }
  .peta-bengkel, .peta-bengkel iframe { min-height: 380px; }
}

/* Beranda Raden Group ----------------------------------------------------- */
.halaman-grup {
  --hitam-grup: #0c0d0e;
  --putih-hangat: #f7f6f1;
  --garis-grup: rgba(17, 17, 17, 0.14);
}

.hero-grup {
  min-height: 760px;
  display: grid;
  align-items: center;
  padding: clamp(84px, 11vw, 132px) 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    var(--hitam-grup);
  background-size: 84px 84px;
}

.hero-grup::before {
  top: -8%;
  right: -2%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(253, 204, 2, 0.18) 0%, transparent 67%);
}

.grid-hero-grup {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: clamp(42px, 7vw, 100px);
}

.hero-grup h1 {
  font-size: clamp(3.4rem, 7vw, 6.25rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
  margin-bottom: 30px;
}
.hero-grup p { max-width: 600px; font-size: clamp(1rem, 1.6vw, 1.17rem); }

.simbol-grup { position: relative; min-height: 520px; display: grid; place-items: center; }
.simbol-grup img { position: relative; z-index: 3; max-height: 455px; filter: drop-shadow(0 28px 50px rgba(0,0,0,0.5)); }
.lingkar-grup { position: absolute; border-radius: 50%; }
.lingkar-grup-luar { width: 500px; height: 500px; border: 1px solid rgba(253,204,2,0.24); }
.lingkar-grup-dalam { width: 410px; height: 410px; border: 1px dashed rgba(253,204,2,0.3); }
.penanda-unit { position: absolute; z-index: 4; padding: 7px 12px; background: var(--hitam); border: 1px solid rgba(253,204,2,0.32); color: rgba(255,255,255,0.72); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.penanda-bengkel { top: 48px; left: 8px; }
.penanda-wangi { right: -14px; top: 210px; }
.penanda-studio { bottom: 54px; left: 22px; }

.pita-bidang { background: var(--kuning); color: var(--hitam); }
.isi-pita-bidang { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.isi-pita-bidang span { font-size: 0.65rem; font-weight: 800; opacity: 0.55; }
.isi-pita-bidang strong { font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; }
.isi-pita-bidang i { width: 10px; height: 10px; border: 2px solid var(--hitam); transform: rotate(45deg); opacity: 0.38; }

.bagian-portofolio-grup { padding: clamp(88px, 11vw, 142px) 0; background: var(--putih-hangat); }
.kepala-portofolio-grup { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 70px; align-items: end; margin-bottom: clamp(52px, 8vw, 92px); }
.kepala-portofolio-grup h2 { max-width: 760px; font-size: clamp(2.35rem, 5vw, 4.4rem); margin: 0; }
.kepala-portofolio-grup > p { color: var(--abu); margin: 0 0 10px; max-width: 440px; }
.daftar-unit-grup { border-top: 1px solid var(--garis-grup); }
.unit-grup { display: grid; grid-template-columns: 70px minmax(260px, 0.78fr) 1.22fr; min-height: 350px; border-bottom: 1px solid var(--garis-grup); align-items: stretch; }
.nomor-unit-grup { padding-top: 34px; font-size: 0.68rem; font-weight: 800; color: var(--abu); }
.visual-unit-grup { display: grid; place-items: center; margin: 24px 48px 24px 0; border-radius: 3px; overflow: hidden; }
.visual-unit-grup img { max-height: 240px; object-fit: contain; }
.unit-grup-bengkel .visual-unit-grup { background: linear-gradient(145deg, #121212, #302d1b); }
.unit-grup-wangi .visual-unit-grup { background: linear-gradient(145deg, #FDCC02, #efb70b); }
.unit-grup-studio .visual-unit-grup { background: linear-gradient(145deg, #FDCC02, #ffe168); }
.unit-grup-wangi .visual-unit-grup img { border-radius: 10px; }
.isi-unit-grup { display: flex; flex-direction: column; justify-content: center; padding: 42px 0; }
.kategori-unit-grup { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kuning-tua); }
.isi-unit-grup h3 { font-size: clamp(1.9rem, 3.5vw, 3.2rem); margin: 15px 0 12px; }
.isi-unit-grup p { max-width: 590px; color: var(--abu); }
.isi-unit-grup a { width: fit-content; margin-top: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--hitam); font-size: 0.85rem; font-weight: 700; }
.isi-unit-grup a span { display: inline-block; margin-left: 8px; transition: transform var(--transisi); }
.isi-unit-grup a:hover span { transform: translate(3px, -3px); }

.bagian-cerita-grup { background: var(--hitam-grup); color: var(--putih); overflow: hidden; }
.grid-cerita-grup { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(60px, 10vw, 150px); align-items: center; }
.visual-cerita-grup { position: relative; min-height: 560px; display: grid; place-items: center; }
.visual-cerita-grup::before { content: ''; position: absolute; width: 470px; height: 470px; border-radius: 50%; border: 1px solid rgba(253,204,2,0.2); }
.visual-cerita-grup img { position: relative; z-index: 2; max-height: 500px; filter: drop-shadow(0 24px 42px rgba(0,0,0,0.48)); }
.garis-cerita { position: absolute; z-index: 3; width: 140px; height: 2px; background: var(--kuning); }
.garis-cerita-atas { top: 46px; right: -34px; }
.garis-cerita-bawah { bottom: 42px; left: -38px; }
.isi-cerita-grup h2 { font-size: clamp(2.35rem, 4.7vw, 4.25rem); }
.isi-cerita-grup p { color: rgba(255,255,255,0.65); }
.tautan-cerita-grup { display: inline-block; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid var(--kuning); color: var(--putih); font-size: 0.88rem; font-weight: 700; }
.tautan-cerita-grup span { color: var(--kuning); margin-left: 8px; }

.bagian-nilai-grup { padding: clamp(88px, 11vw, 142px) 0; }
.kepala-nilai-grup { margin-bottom: clamp(50px, 7vw, 78px); }
.kepala-nilai-grup h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.daftar-nilai-grup { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--garis-grup); }
.daftar-nilai-grup article { min-height: 300px; padding: 28px 42px 18px 0; border-right: 1px solid var(--garis-grup); }
.daftar-nilai-grup article + article { padding-left: 42px; }
.daftar-nilai-grup article:last-child { border-right: 0; }
.daftar-nilai-grup span { color: var(--kuning-tua); font-size: 0.7rem; font-weight: 800; }
.daftar-nilai-grup h3 { max-width: 280px; margin-top: 64px; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.daftar-nilai-grup p { color: var(--abu); font-size: 0.92rem; }

.bagian-ajakan-grup { background: var(--kuning); color: var(--hitam); }
.ajakan-grup { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 70px; align-items: end; }
.ajakan-grup .label { color: rgba(17,17,17,0.58); }
.ajakan-grup h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin: 0; }
.ajakan-grup p { margin-bottom: 28px; }
.ajakan-grup .tombol-utama { background: var(--hitam); color: var(--putih); box-shadow: none; }

@media (max-width: 900px) {
  .hero-grup { min-height: auto; }
  .grid-hero-grup { grid-template-columns: 1fr; text-align: center; }
  .hero-grup .hero-isi { max-width: 760px; margin: 0 auto; }
  .hero-grup .hero-aksi { justify-content: center; }
  .simbol-grup { order: -1; min-height: 380px; }
  .simbol-grup img { max-height: 350px; }
  .lingkar-grup-luar { width: 370px; height: 370px; }
  .lingkar-grup-dalam { width: 305px; height: 305px; }
  .penanda-bengkel { left: 12%; }
  .penanda-wangi { right: 8%; top: 160px; }
  .penanda-studio { left: 16%; bottom: 20px; }
  .kepala-portofolio-grup { grid-template-columns: 1fr; gap: 24px; }
  .unit-grup { grid-template-columns: 52px minmax(230px, 0.8fr) 1.2fr; }
  .visual-unit-grup { margin-right: 30px; }
  .grid-cerita-grup { grid-template-columns: 1fr; }
  .visual-cerita-grup { min-height: 440px; }
  .visual-cerita-grup img { max-height: 410px; }
  .ajakan-grup { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 760px) {
  .hero-grup { padding-top: 60px; }
  .hero-grup h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .simbol-grup { min-height: 300px; }
  .simbol-grup img { max-height: 280px; }
  .lingkar-grup-luar { width: 290px; height: 290px; }
  .lingkar-grup-dalam { width: 240px; height: 240px; }
  .penanda-unit { font-size: 0.55rem; }
  .penanda-bengkel { top: 16px; left: 0; }
  .penanda-wangi { right: 0; top: 125px; }
  .penanda-studio { left: 4px; bottom: 6px; }
  .isi-pita-bidang { justify-content: center; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
  .isi-pita-bidang i { display: none; }
  .isi-pita-bidang strong { margin-right: 18px; }
  .unit-grup { grid-template-columns: 1fr; padding: 30px 0; }
  .nomor-unit-grup { padding: 0 0 14px; }
  .visual-unit-grup { min-height: 260px; margin: 0 0 28px; }
  .visual-unit-grup img { max-height: 210px; }
  .isi-unit-grup { padding: 0; }
  .visual-cerita-grup { min-height: 350px; }
  .visual-cerita-grup::before { width: 320px; height: 320px; }
  .visual-cerita-grup img { max-height: 330px; }
  .garis-cerita { display: none; }
  .daftar-nilai-grup { grid-template-columns: 1fr; }
  .daftar-nilai-grup article,
  .daftar-nilai-grup article + article { min-height: 230px; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--garis-grup); }
  .daftar-nilai-grup article:last-child { border-bottom: 0; }
  .daftar-nilai-grup h3 { margin-top: 36px; }
}

/* Halaman Raden Studio ---------------------------------------------------- */
.halaman-studio {
  --kuning-studio: #FDCC02;
  --kuning-studio-muda: #fff5c7;
  --hitam-studio: #0b0d12;
  --garis-studio: rgba(253, 204, 2, 0.24);
}

.hero-studio {
  min-height: 750px;
  display: grid;
  align-items: center;
  padding: clamp(84px, 11vw, 132px) 0;
  background:
    linear-gradient(90deg, rgba(253,204,2,0.045) 1px, transparent 1px),
    linear-gradient(rgba(253,204,2,0.045) 1px, transparent 1px),
    var(--hitam-studio);
  background-size: 74px 74px;
}
.hero-studio::before { top: -6%; right: -2%; width: 780px; height: 780px; background: radial-gradient(circle, rgba(253,204,2,0.12), transparent 67%); }
.grid-hero-studio { position: relative; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: clamp(50px, 8vw, 110px); }
.hero-studio h1 { max-width: 760px; font-size: clamp(3.2rem, 6.5vw, 5.7rem); line-height: 0.98; letter-spacing: -0.055em; }
.hero-studio p { max-width: 620px; }
.hero-studio .label { color: var(--kuning-studio); }
.sorot-studio { color: var(--kuning-studio); }
.tombol-studio { background: var(--kuning-studio); color: var(--hitam); box-shadow: 0 7px 22px rgba(253,204,2,0.2); }
.tombol-studio:hover { box-shadow: 0 11px 30px rgba(253,204,2,0.3); }

.panggung-studio { position: relative; min-height: 520px; display: grid; place-items: center; perspective: 1200px; }
.jendela-studio { width: min(100%, 620px); border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 34px 70px rgba(0,0,0,0.45); transform: rotateY(-4deg) rotateX(2deg); }
.bilah-jendela-studio { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 13px; background: #20242d; }
.bilah-jendela-studio i { width: 7px; height: 7px; border-radius: 50%; background: #616978; }
.bilah-jendela-studio span { margin-left: 14px; color: #8992a4; font-size: 0.5rem; }
.kanvas-jendela-studio { min-height: 390px; padding: 20px; background: #f7f9fb; }
.navigasi-mockup { height: 30px; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.navigasi-mockup b { width: 54px; height: 9px; background: #111827; margin-right: auto; }
.navigasi-mockup span { width: 34px; height: 5px; background: #aeb5c0; }
.hero-mockup-studio { min-height: 220px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; padding: 30px 20px; }
.hero-mockup-studio small { display: block; width: 58px; height: 6px; background: var(--kuning-studio); margin-bottom: 15px; }
.hero-mockup-studio strong { display: block; width: 90%; height: 20px; background: #101521; margin-bottom: 8px; }
.hero-mockup-studio strong:nth-child(3) { width: 68%; }
.hero-mockup-studio p { width: 86%; height: 30px; background: linear-gradient(#cbd2dc 4px, transparent 4px) 0 0 / 100% 10px; margin: 16px 0; }
.hero-mockup-studio button { width: 72px; height: 22px; border: 0; border-radius: 10px; background: var(--kuning-studio); }
.hero-mockup-studio aside { height: 170px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #10141c, #1f2b39); }
.hero-mockup-studio aside img { max-height: 140px; }
.kartu-mockup-studio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kartu-mockup-studio span { height: 76px; border-radius: 8px; background: #fff; border: 1px solid #e5e9ef; box-shadow: 0 8px 20px rgba(10,20,35,0.05); }
.catatan-studio { position: absolute; z-index: 2; padding: 9px 13px; border-radius: 7px; background: var(--kuning-studio); color: #111; font-size: 0.68rem; font-weight: 800; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.catatan-studio-atas { top: 46px; right: -4px; }
.catatan-studio-bawah { bottom: 38px; left: -18px; background: #fff; }

.pita-studio { background: var(--kuning-studio); color: #111; }
.isi-pita-studio { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.isi-pita-studio span { font-size: 0.76rem; font-weight: 800; }
.isi-pita-studio i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.36; }

.bagian-pilihan-studio { padding: clamp(90px, 11vw, 142px) 0; background: #f3f5f7; }
.kepala-pilihan-studio { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 70px; align-items: end; margin-bottom: clamp(56px, 8vw, 92px); }
.kepala-pilihan-studio h2 { max-width: 780px; font-size: clamp(2.3rem, 5vw, 4.35rem); margin: 0; }
.kepala-pilihan-studio > p { max-width: 470px; color: var(--abu); margin: 0 0 8px; }
.halaman-studio .bagian-pilihan-studio .label { color: #7a5d00; }
.grid-opsi-template { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.opsi-template { background: #fff; border: 1px solid #dfe3e8; transition: transform var(--transisi), box-shadow var(--transisi); }
.opsi-template:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(14,24,40,0.1); }
.pratinjau-template { padding: clamp(24px, 4vw, 42px); background: #e8ebef; }
.opsi-template-kuliner .pratinjau-template { background: #e6d8c7; }
.opsi-template-katalog .pratinjau-template { background: #dce3ed; }
.opsi-template-layanan .pratinjau-template { background: #d9ebe9; }
.bingkai-browser-template { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 20px 45px rgba(24,32,45,0.18); }
.atas-browser-template { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #20242b; }
.atas-browser-template i { width: 6px; height: 6px; border-radius: 50%; background: #646b76; }
.layar-template { height: 270px; overflow: hidden; }

.layar-template-profil { padding: 14px 18px; background: #f8f7f2; }
.layar-template-profil header { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 25px; }
.layar-template-profil header b { width: 48px; height: 8px; background: #191919; margin-right: auto; }
.layar-template-profil header span { width: 24px; height: 4px; background: #888; }
.layar-template-profil main { min-height: 165px; padding: 35px 8px 20px; background: #191919; }
.layar-template-profil main small { display: block; width: 46px; height: 5px; background: #d9aa2e; margin-bottom: 10px; }
.layar-template-profil main strong { display: block; width: 65%; height: 16px; background: #fff; margin-bottom: 7px; }
.layar-template-profil main p { width: 52%; height: 22px; background: linear-gradient(#777 3px, transparent 3px) 0 0 / 100% 8px; }
.layar-template-profil main button { width: 60px; height: 18px; background: #d9aa2e; border: 0; }
.layar-template-profil footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding-top: 12px; }
.layar-template-profil footer i { height: 43px; background: #e1ded5; }

.layar-template-kuliner { padding: 14px 18px; background: #fff9ef; }
.layar-template-kuliner header { display: flex; gap: 10px; align-items: center; height: 26px; }
.layar-template-kuliner header b { width: 45px; height: 8px; border-radius: 8px; background: #6b2d1f; margin-right: auto; }
.layar-template-kuliner header span { width: 28px; height: 4px; background: #a48e7e; }
.layar-template-kuliner main { min-height: 170px; display: grid; grid-template-columns: 1fr 0.8fr; gap: 16px; align-items: center; }
.layar-template-kuliner main small { display: block; width: 45px; height: 5px; background: #e77b36; margin-bottom: 10px; }
.layar-template-kuliner main strong { display: block; width: 88%; height: 28px; background: #56271f; }
.layar-template-kuliner main p { width: 75%; height: 28px; background: linear-gradient(#b59f8d 3px, transparent 3px) 0 0 / 100% 9px; }
.layar-template-kuliner main button { width: 65px; height: 19px; border-radius: 12px; border: 0; background: #e77b36; }
.layar-template-kuliner main aside { height: 128px; border-radius: 50% 50% 12px 50%; background: radial-gradient(circle at 45% 45%, #f2b34d 0 12%, #a34528 13% 36%, #efd7a5 37%); }
.layar-template-kuliner footer { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.layar-template-kuliner footer i { height: 54px; border-radius: 7px; background: #efe4cf; }

.layar-template-katalog { padding: 14px 18px; background: #fafafa; }
.layar-template-katalog header { display: flex; align-items: center; gap: 10px; height: 28px; }
.layar-template-katalog header b { width: 45px; height: 8px; background: #141414; margin-right: auto; }
.layar-template-katalog header span { width: 27px; height: 4px; background: #999; }
.layar-template-katalog header button { width: 35px; height: 14px; border: 0; background: #2761e8; }
.layar-template-katalog main { padding-top: 24px; }
.layar-template-katalog main small { display: block; width: 48px; height: 5px; background: #2761e8; margin: 0 auto 10px; }
.layar-template-katalog main strong { display: block; width: 48%; height: 20px; background: #161616; margin: 0 auto 24px; }
.layar-template-katalog main div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.layar-template-katalog main i { height: 120px; background: linear-gradient(#e4e7ed 0 78%, #fff 78%); border: 1px solid #e2e2e2; }

.layar-template-layanan { display: grid; grid-template-columns: 0.34fr 0.66fr; background: #f7faf9; }
.layar-template-layanan aside { padding: 22px 14px; background: #102c2b; }
.layar-template-layanan aside b { display: block; width: 50px; height: 9px; background: #6ed4cb; margin-bottom: 35px; }
.layar-template-layanan aside span { display: block; width: 74%; height: 5px; background: rgba(255,255,255,0.45); margin-bottom: 15px; }
.layar-template-layanan main { padding: 38px 24px; }
.layar-template-layanan main small { display: block; width: 48px; height: 5px; background: #38a99f; margin-bottom: 12px; }
.layar-template-layanan main strong { display: block; width: 78%; height: 22px; background: #152c2b; }
.layar-template-layanan main p { width: 68%; height: 30px; background: linear-gradient(#a5b8b5 3px, transparent 3px) 0 0 / 100% 9px; margin: 14px 0 20px; }
.layar-template-layanan main div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.layar-template-layanan main i { height: 72px; border-radius: 6px; background: #dcecea; }

.isi-opsi-template { padding: 34px 36px 38px; }
.nomor-template { color: #7a5d00; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.isi-opsi-template h3 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); margin: 16px 0 10px; }
.isi-opsi-template > p { color: var(--abu); min-height: 58px; }
.isi-opsi-template ul { list-style: none; padding: 18px 0 0; margin: 0 0 26px; border-top: 1px solid #e6e8eb; }
.isi-opsi-template li { position: relative; padding: 6px 0 6px 18px; color: #454b54; font-size: 0.85rem; }
.isi-opsi-template li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 2px; background: var(--kuning-studio); }
.isi-opsi-template a { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid #111; font-weight: 700; font-size: 0.84rem; }
.isi-opsi-template a span { color: #7a5d00; margin-left: 7px; }

.bagian-penyesuaian-studio { background: var(--hitam-studio); color: #fff; }
.grid-penyesuaian-studio { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(60px, 10vw, 140px); align-items: start; }
.grid-penyesuaian-studio h2 { font-size: clamp(2.3rem, 4.6vw, 4.1rem); }
.grid-penyesuaian-studio .label { color: var(--kuning-studio); }
.daftar-penyesuaian-studio { border-top: 1px solid var(--garis-studio); }
.daftar-penyesuaian-studio article { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--garis-studio); }
.daftar-penyesuaian-studio span { color: var(--kuning-studio); font-size: 0.68rem; font-weight: 800; }
.daftar-penyesuaian-studio h3 { font-size: 1rem; margin: 0 0 5px; }
.daftar-penyesuaian-studio p { color: rgba(255,255,255,0.56); font-size: 0.85rem; margin: 0; }

.bagian-layanan-studio { background: #fff; }
.kepala-layanan-studio { max-width: 760px; margin-bottom: clamp(50px, 7vw, 80px); }
.kepala-layanan-studio .label { color: #7a5d00; }
.kepala-layanan-studio h2 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); }
.kepala-layanan-studio p { color: var(--abu); }
.baris-layanan-studio { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #dfe3e8; }
.baris-layanan-studio article { min-height: 260px; padding: 28px 26px 16px 0; border-right: 1px solid #dfe3e8; }
.baris-layanan-studio article + article { padding-left: 26px; }
.baris-layanan-studio article:last-child { border-right: 0; }
.baris-layanan-studio span { color: #7a5d00; font-size: 0.68rem; font-weight: 800; }
.baris-layanan-studio h3 { margin-top: 60px; font-size: 1.08rem; }
.baris-layanan-studio p { color: var(--abu); font-size: 0.86rem; }

.bagian-proses-studio { background: #f7f3e3; }
.kepala-proses-studio { max-width: 790px; margin-bottom: clamp(52px, 7vw, 82px); }
.kepala-proses-studio .label { color: #7a5d00; }
.kepala-proses-studio h2 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); }
.alur-studio { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.alur-studio li { min-height: 250px; padding: 28px 28px 12px 0; border-top: 2px solid #d0b74e; border-right: 1px solid #e1d7ac; }
.alur-studio li + li { padding-left: 28px; }
.alur-studio li:last-child { border-right: 0; }
.alur-studio span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #7a5d00; font-size: 0.68rem; font-weight: 800; }
.alur-studio h3 { margin-top: 48px; font-size: 1.05rem; }
.alur-studio p { color: #675f4d; font-size: 0.86rem; }

.bagian-ajakan-studio { background: var(--kuning-studio); color: #111; }
.ajakan-studio { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 70px; align-items: end; }
.ajakan-studio .label { color: rgba(7,16,24,0.6); }
.ajakan-studio h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); margin: 0; }
.ajakan-studio p { margin-bottom: 26px; }
.ajakan-studio .tombol-studio { background: #071018; color: #fff; box-shadow: none; }

@media (max-width: 900px) {
  .hero-studio { min-height: auto; }
  .grid-hero-studio { grid-template-columns: 1fr; text-align: center; }
  .hero-studio .hero-isi { max-width: 760px; margin: 0 auto; }
  .hero-studio .hero-aksi { justify-content: center; }
  .panggung-studio { order: -1; min-height: 430px; }
  .kepala-pilihan-studio { grid-template-columns: 1fr; gap: 24px; }
  .grid-penyesuaian-studio { grid-template-columns: 1fr; }
  .baris-layanan-studio, .alur-studio { grid-template-columns: repeat(2, 1fr); }
  .baris-layanan-studio article:nth-child(2), .alur-studio li:nth-child(2) { border-right: 0; }
  .baris-layanan-studio article:nth-child(n+3), .alur-studio li:nth-child(n+3) { border-top: 1px solid #dfe3e8; }
  .ajakan-studio { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 760px) {
  .hero-studio { padding-top: 60px; }
  .hero-studio h1 { font-size: clamp(2.9rem, 14vw, 4.25rem); }
  .panggung-studio { min-height: 330px; }
  .jendela-studio { transform: none; }
  .kanvas-jendela-studio { min-height: 290px; padding: 14px; }
  .hero-mockup-studio { min-height: 170px; padding: 18px 8px; }
  .hero-mockup-studio aside { height: 130px; }
  .hero-mockup-studio aside img { max-height: 105px; }
  .kartu-mockup-studio span { height: 52px; }
  .catatan-studio { display: none; }
  .isi-pita-studio { flex-wrap: wrap; justify-content: center; padding-top: 20px; padding-bottom: 20px; }
  .isi-pita-studio i { display: none; }
  .isi-pita-studio span { width: calc(50% - 12px); text-align: center; }
  .grid-opsi-template { grid-template-columns: 1fr; }
  .layar-template { height: 235px; }
  .isi-opsi-template { padding: 28px; }
  .isi-opsi-template > p { min-height: auto; }
  .baris-layanan-studio, .alur-studio { grid-template-columns: 1fr; }
  .baris-layanan-studio article,
  .baris-layanan-studio article + article,
  .alur-studio li,
  .alur-studio li + li { min-height: 210px; padding: 26px 0; border-right: 0; border-top: 1px solid #d3dce2; }
  .baris-layanan-studio h3, .alur-studio h3 { margin-top: 32px; }
}