/* ===== assets/css/category.css ===== */
:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#172033;
  --muted:#667085;
  --line:#e6e9f0;
  --accent:#2563eb;
  --accent-soft:#eaf1ff;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.category-nav{width:min(1120px,92%);margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.category-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}
.category-brand img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.category-back,.category-wa{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font-weight:700;font-size:.92rem;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.category-wa{background:#111827;color:#fff;border-color:#111827}
.category-hero{width:min(1120px,92%);margin:28px auto 20px;padding:42px;border-radius:32px;background:linear-gradient(135deg,#fff 0%,#eef4ff 58%,#fff7ed 100%);box-shadow:var(--shadow);position:relative;overflow:hidden}
.category-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(37,99,235,.10)}
.eyebrow{display:inline-flex;border:1px solid rgba(37,99,235,.18);background:var(--accent-soft);color:#1d4ed8;border-radius:999px;padding:7px 13px;font-weight:800;font-size:.78rem;margin-bottom:14px}
h1{font-size:clamp(2rem,5vw,4.2rem);line-height:1.02;margin:0 0 14px;letter-spacing:-.06em;max-width:850px}
.category-hero p{max-width:760px;color:var(--muted);font-size:1.05rem;line-height:1.8;margin:0 0 22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-actions a{border-radius:16px;padding:13px 18px;font-weight:800}.primary{background:var(--accent);color:#fff}.ghost{background:#fff;border:1px solid var(--line)}
.category-wrap{width:min(1120px,92%);margin:0 auto 44px}.section-title{margin:34px 0 18px}.section-title span{color:#1d4ed8;font-weight:800;font-size:.84rem}.section-title h2{margin:8px 0 8px;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.04em}.section-title p{color:var(--muted);line-height:1.7;margin:0;max-width:760px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 12px 30px rgba(15,23,42,.05);min-height:230px;display:flex;flex-direction:column;transition:.2s ease}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(37,99,235,.25)}.service-icon{font-size:2rem;margin-bottom:14px}.service-card h3{font-size:1.22rem;margin:0 0 10px;letter-spacing:-.03em}.service-card p{color:var(--muted);line-height:1.65;margin:0 0 16px}.service-tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}.service-tags span{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:#475467;background:#fafafa}.footer-note{width:min(1120px,92%);margin:0 auto 34px;padding:24px;border:1px solid var(--line);background:#fff;border-radius:24px;color:var(--muted);line-height:1.7}.footer-note strong{color:var(--text)}
@media(max-width:900px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-hero{padding:30px}}
@media(max-width:620px){.category-nav{align-items:flex-start}.category-back,.category-wa{font-size:.82rem;padding:9px 12px}.service-grid{grid-template-columns:1fr}.category-hero{border-radius:24px;padding:26px}.hero-actions a{width:100%;text-align:center}}

/* REWORK 2026-06-07 — tambahan kecil untuk lorong utama baru */
.nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.category-hero{background:radial-gradient(circle at right top, rgba(236,72,153,.12), transparent 26%), linear-gradient(135deg,#ffffff 0%,#eef4ff 55%,#fff7ed 100%)}
.eyebrow{background:#eef4ff;color:#1e3a8a}
@media(max-width:620px){.nav-actions{width:100%;justify-content:flex-start}.category-nav{flex-wrap:wrap}}


/* ===== assets/css/undangan-main.css ===== */

.undangan-main-page {
  --text-main: #f7fbff;
  --text-soft: rgba(230,241,255,.78);
  background:
    radial-gradient(circle at 8% 10%, rgba(59,130,246,.18), transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(247,196,107,.15), transparent 20%),
    linear-gradient(180deg, #050c18 0%, #09172c 38%, #0d2041 100%);
  color: var(--text-main); overflow-x:hidden;
}
.undangan-main-page::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:46px 46px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 80%);
}
.invitation-nav { position:sticky; top:16px; z-index:25; padding:12px 14px; border-radius:24px; border:1px solid rgba(255,255,255,.12); background:rgba(5,12,24,.72); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); box-shadow:0 18px 48px rgba(0,0,0,.28); }
.invitation-nav .category-brand { color:#fff; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.invitation-nav .category-back { color:rgba(255,255,255,.86); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); box-shadow:none; }
.invitation-nav .category-wa { color:#082012; background: linear-gradient(135deg, #25d366, #b8ffd5); border:none; box-shadow:0 12px 28px rgba(37,211,102,.22); }
.invitation-hero,.invitation-wrap,.invitation-stats,.final-cta { position:relative; z-index:1; }
.invitation-hero {
  width:min(1160px,92%); margin:34px auto 0; padding:clamp(26px, 4.5vw, 56px); display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center;
  border-radius:38px; border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at 82% 14%, rgba(247,196,107,.16), transparent 22%), radial-gradient(circle at 18% 85%, rgba(59,130,246,.16), transparent 20%), linear-gradient(140deg, rgba(17,37,74,.94), rgba(5,12,24,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.34); overflow:hidden;
}
.invitation-hero::after { content:""; position:absolute; width:440px; height:440px; right:-180px; bottom:-220px; border-radius:999px; background:rgba(96,165,250,.12); filter:blur(12px); }
.premium-eyebrow,.mini-label,.path-meta,.section-kicker { display:inline-flex; align-items:center; gap:8px; width:max-content; padding:8px 13px; border-radius:999px; border:1px solid rgba(247,196,107,.22); background:rgba(247,196,107,.10); color:#ffe8b5; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.invitation-hero h1 { margin:16px 0 18px; color:#fff; font-size:clamp(2.55rem, 5vw, 5.2rem); line-height:.95; letter-spacing:-.07em; }
.invitation-hero p,.invitation-title p,.path-card p,.featured-copy p,.split-copy p,.process-grid p,.order-kit p,.final-cta p,.emphasis-card p,.support-card p { color:var(--text-soft); line-height:1.84; }
.invitation-hero .hero-actions { margin-top:28px; }
.invitation-hero .primary,.featured-actions .primary,.final-cta a,.path-card .path-cta { background:linear-gradient(135deg, #f6c56f, #f59e0b); color:#111827; box-shadow:0 14px 34px rgba(245,158,11,.22); }
.invitation-hero .ghost,.featured-actions .ghost { color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.trust-row,.featured-tags,.digital-pill-grid,.point-list,.support-tags { display:flex; flex-wrap:wrap; gap:10px; }
.trust-row { margin-top:22px; }
.trust-row span,.featured-tags span,.digital-pill-grid span,.point-list span,.support-tags span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.84); font-size:.82rem; font-weight:700; }
.hero-gallery { min-height:500px; position:relative; }
.gallery-card { position:absolute; overflow:hidden; border-radius:30px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); box-shadow:0 24px 65px rgba(0,0,0,.30); }
.gallery-card img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(2,6,23,.55) 100%); }
.gallery-card span { position:absolute; left:14px; bottom:14px; z-index:1; padding:8px 12px; border-radius:999px; background:rgba(7,17,31,.78); color:#fff; font-size:.78rem; font-weight:800; border:1px solid rgba(255,255,255,.12); }
.gallery-main { width:64%; height:400px; left:0; top:46px; transform:rotate(-4deg); }
.gallery-top { width:48%; height:240px; right:0; top:0; transform:rotate(5deg); }
.gallery-bottom { width:52%; height:260px; right:18px; bottom:0; transform:rotate(2deg); }
.invitation-stats { width:min(1080px,88%); margin:-28px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.invitation-stats div { padding:22px; border-radius:24px; color:#fff; background:rgba(5,12,24,.64); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); box-shadow:0 18px 44px rgba(0,0,0,.24); }
.invitation-stats strong { display:block; font-size:1.2rem; }
.invitation-stats span { display:block; margin-top:6px; color:rgba(230,241,255,.72); line-height:1.65; font-size:.92rem; }
.invitation-wrap { width:min(1160px,92%); margin:66px auto 0; }
.invitation-title { text-align:center; margin-bottom:26px; }
.invitation-title h2 { margin:12px 0 12px; font-size:clamp(2rem, 4vw, 3rem); letter-spacing:-.05em; }
.invitation-path-grid,.support-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.path-card,.support-card,.strip-card,.emphasis-card,.process-grid > div,.order-kit,.featured-invitation-card,.digital-focus,.final-cta { border-radius:30px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(17,37,74,.88), rgba(5,12,24,.94)); box-shadow:0 20px 50px rgba(0,0,0,.24); }
.path-card,.support-card,.emphasis-card { position:relative; overflow:hidden; }
.path-card::before,.support-card::before,.emphasis-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%); }
.path-card,.support-card { display:block; text-decoration:none; color:inherit; padding:22px; min-height:100%; }
.path-featured { background: radial-gradient(circle at 80% 20%, rgba(247,196,107,.12), transparent 24%), linear-gradient(180deg, rgba(20,45,92,.95), rgba(7,16,31,.98)); }
.path-icon,.support-icon { width:54px; height:54px; border-radius:18px; display:grid; place-items:center; font-size:1.45rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); margin:16px 0 14px; }
.path-card h3,.support-card h3 { margin:10px 0 10px; font-size:1.24rem; color:#fff; }
.path-card ul { margin:14px 0 0; padding-left:18px; color:var(--text-soft); line-height:1.75; font-size:.93rem; }
.path-card .path-cta { display:inline-flex; text-decoration:none; border-radius:999px; padding:10px 14px; font-size:.86rem; font-weight:800; margin-top:18px; }
.emphasis-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; }
.emphasis-card { padding:22px; }
.emphasis-card img { width:100%; height:260px; object-fit:cover; border-radius:24px; margin-top:14px; }
.emphasis-card h3 { margin:10px 0 10px; font-size:1.55rem; }
.featured-invitation-card { margin-top:36px; padding:28px; display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center; }
.featured-copy h2,.split-copy h2,.digital-focus h2,.order-kit h2,.final-cta h2,.process-copy h2 { margin:12px 0 14px; font-size:clamp(1.8rem, 3vw, 2.6rem); letter-spacing:-.04em; color:#fff; }
.featured-stack { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:center; }
.featured-stack img { height:330px; object-fit:cover; border-radius:24px; border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 44px rgba(0,0,0,.26); }
.featured-stack img:nth-child(1) { transform:rotate(-5deg) translateY(18px); }
.featured-stack img:nth-child(2) { transform:translateY(-16px); }
.featured-stack img:nth-child(3) { transform:rotate(4deg) translateY(8px); }
.showcase-spotlight { margin-top:34px; }
.showcase-grid { display:grid; grid-template-columns:1.15fr 1.15fr .9fr .9fr; gap:18px; }
.strip-card { display:block; text-decoration:none; color:inherit; overflow:hidden; position:relative; }
.strip-card img { width:100%; height:230px; object-fit:cover; display:block; }
.strip-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 34%, rgba(2,6,23,.72) 100%); }
.strip-card > div { position:absolute; left:16px; right:16px; bottom:16px; z-index:1; }
.strip-card strong { display:block; font-size:1.1rem; color:#fff; }
.strip-card span { display:block; margin-top:4px; color:rgba(230,241,255,.78); font-size:.92rem; }
.strip-card.big img { height:310px; }
.digital-focus,.order-kit,.final-cta { margin-top:38px; padding:28px; display:grid; gap:22px; }
.digital-focus { grid-template-columns:1.1fr .9fr; align-items:center; }
.process-section { margin-top:38px; }
.process-copy { text-align:center; margin-bottom:20px; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.process-grid > div { padding:22px; }
.process-grid strong { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:16px; background:rgba(247,196,107,.14); color:#ffe8b5; font-weight:800; letter-spacing:.05em; }
.process-grid h3 { margin:16px 0 10px; color:#fff; font-size:1.08rem; }
.order-kit { grid-template-columns:.9fr 1.1fr; }
.order-kit ul { margin:0; padding-left:20px; color:var(--text-soft); line-height:1.9; }
.final-cta { width:min(1160px,92%); margin:40px auto 44px; grid-template-columns:1fr auto; align-items:center; }
.final-cta a,.featured-actions .primary,.featured-actions .ghost { text-decoration:none; border-radius:999px; padding:14px 18px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:1080px) {
  .invitation-path-grid,.support-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-invitation-card,.digital-focus,.order-kit,.emphasis-grid,.final-cta { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .invitation-hero { grid-template-columns:1fr; }
  .hero-gallery { min-height:360px; }
  .invitation-stats { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .invitation-nav { top:8px; border-radius:18px; }
  .invitation-hero { padding:24px 18px; border-radius:28px; }
  .invitation-hero h1 { font-size:2.4rem; }
  .invitation-path-grid,.support-grid,.showcase-grid,.process-grid,.featured-stack { grid-template-columns:1fr; }
  .featured-stack img,.strip-card.big img { height:220px; transform:none !important; }
  .featured-invitation-card,.digital-focus,.order-kit,.final-cta,.emphasis-grid { padding:22px 18px; }
  .hero-gallery { min-height:280px; }
  .gallery-main { width:58%; height:210px; top:64px; }
  .gallery-top { width:48%; height:150px; }
  .gallery-bottom { width:50%; height:150px; }
}

/* =========================================================
   FIX AREA "SHOWCASE CETAK" - Versi Tidak Absurd
   Tempel di PALING BAWAH: assets/css/undangan-main.css
   Fungsi:
   - Menghapus efek kartu tinggi miring yang bikin gambar nyempil
   - Mengubah preview menjadi board horizontal yang lebih masuk akal
   - Tetap pakai tema deep blue navy
   ========================================================= */

/* Kontainer utama showcase cetak */
.featured-invitation-card {
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 34px;
}

/* Area gambar kanan jangan lagi jadi 3 kartu portrait miring */
.featured-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(96, 165, 250, .18), transparent 34%),
    radial-gradient(circle at 82% 85%, rgba(247, 196, 107, .13), transparent 30%),
    linear-gradient(180deg, rgba(3, 7, 18, .42), rgba(15, 23, 42, .72));
  border: 1px solid rgba(255,255,255,.08);
}

/* Paksa semua gambar preview jadi kartu horizontal, bukan portrait */
.featured-stack img,
.featured-stack img:nth-child(1),
.featured-stack img:nth-child(2),
.featured-stack img:nth-child(3) {
  width: 100%;
  height: 145px;
  object-fit: cover;
  object-position: center;
  padding: 0;
  transform: none !important;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

/* Biar showcase warna & hitam putih di atas tetap aman */
.emphasis-card img {
  height: 330px;
  object-fit: contain;
  object-position: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(96, 165, 250, .14), transparent 34%),
    linear-gradient(180deg, rgba(3, 7, 18, .48), rgba(15, 23, 42, .72));
}

/* Area grid bawah: jangan bikin gambar portrait tinggi */
.showcase-spotlight .showcase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.showcase-spotlight .strip-card,
.showcase-spotlight .strip-card.big {
  min-height: 320px;
}

.showcase-spotlight .strip-card img,
.showcase-spotlight .strip-card.big img {
  height: 320px;
  object-fit: cover;
  object-position: center;
  padding: 0;
}

/* Mobile */
@media (max-width: 900px) {
  .featured-invitation-card {
    grid-template-columns: 1fr;
  }

  .featured-stack {
    grid-template-columns: repeat(3, 1fr);
  }

  .featured-stack img,
  .featured-stack img:nth-child(1),
  .featured-stack img:nth-child(2),
  .featured-stack img:nth-child(3) {
    height: 160px;
  }
}

@media (max-width: 680px) {
  .featured-stack {
    grid-template-columns: 1fr;
  }

  .featured-stack img,
  .featured-stack img:nth-child(1),
  .featured-stack img:nth-child(2),
  .featured-stack img:nth-child(3) {
    height: 150px;
  }

  .showcase-spotlight .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-spotlight .strip-card,
  .showcase-spotlight .strip-card.big {
    min-height: 280px;
  }

  .showcase-spotlight .strip-card img,
  .showcase-spotlight .strip-card.big img {
    height: 280px;
  }
}