/* ====== Variabel Tema (mode terang dipaksa) ====== */
:root{
  --maroon:#7A1E1E;
  --maroon-deep:#531414;
  --gold:#D4A017;
  --gold-soft:#E6C45A;
  --cream:#FFF7EA;
  --ink:#1d1d1f;
  --muted:#616161;
  --card:#ffffff;
  --shadow:0 10px 25px rgba(0,0,0,.12);
}

/* Reset & dasar */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* Paksa tetap terang walau di dark mode OS/extension */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light; }
  body{ background:var(--cream); color:var(--ink); }
}

/* Latar motif halus */
.bg-texture{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(circle at 12% 10%, rgba(212,160,23,.12) 0 25%, transparent 26% 100%),
    radial-gradient(circle at 82% 22%, rgba(122,30,30,.10) 0 22%, transparent 23% 100%),
    radial-gradient(circle at 20% 80%, rgba(122,30,30,.08) 0 18%, transparent 19% 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 12px, rgba(0,0,0,.04) 12px 24px);
  filter: saturate(1.05);
}
.bg-overlay{
  position:fixed; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(255,247,234,.85), rgba(255,247,234,.97));
}

/* Kontainer */
.container{ width:min(1100px,92%); margin-inline:auto; }

/* Header */
.site-header{
  background: linear-gradient(90deg, var(--maroon-deep), var(--maroon));
  color:#fff; padding:18px 0; border-bottom:2px solid rgba(0,0,0,.05);
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width:44px; height:44px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, var(--gold) 0 35%, transparent 36% 100%),
    conic-gradient(from 45deg, var(--gold-soft), var(--gold), var(--gold-soft));
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.25);
}
.brand-text h1{ font-family:"Crimson Text", serif; font-size:28px; margin:0; letter-spacing:.3px; }
.brand-text h1 span{ color:var(--gold) }
.brand-text p{ margin:2px 0 0; opacity:.9; font-size:14px; }

/* Quick nav pills */
.quick-nav{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
/* Tombol Mall Budaya & Jejak Layar - Versi kontras dan elegan */

.pill{
  text-decoration: none;
  color: #fff; /* teks putih jelas */
  border: 2px solid rgba(255, 255, 255, 0.8); /* garis lebih terang */
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.22); /* tingkatkan opasitas background */
  backdrop-filter: blur(2px);
  transition: all 0.25s ease;
}

.pill:hover{
  background: #fff;               /* berubah jadi putih solid */
  color: var(--maroon-deep);      /* teks maroon saat hover */
  border-color: #fff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}




/* Hero */
.hero{ padding:48px 0 64px; }
.intro{ text-align:center; margin-bottom:26px; }
.intro h2{ font-family:"Crimson Text", serif; font-size:36px; margin:0 0 8px; color:var(--maroon-deep); }
.intro p{ color:var(--muted); margin:0 auto; max-width:780px }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:24px; }
.card{
  position:relative; background:var(--card); border-radius:18px; padding:22px 20px 20px;
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease; overflow:hidden;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.16); }
.card-ribbon{
  position:absolute; top:14px; left:-40px; background:var(--maroon); color:#fff;
  padding:6px 60px; transform:rotate(-12deg); font-weight:700; letter-spacing:.6px; font-size:12px;
  box-shadow:0 8px 14px rgba(122,30,30,.25);
}
.card-ribbon.gold{ background:var(--gold); color:#3a2a00; }
.card-icon{
  width:70px; height:70px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(180deg, #fff, #fff0); border:1px solid rgba(0,0,0,.06); margin-bottom:14px;
}
.icon{ width:38px; height:38px; fill:var(--maroon-deep); }
.card h3{ font-size:22px; margin:6px 0 6px; color:var(--maroon-deep); }
.card p{ color:#4a4a4f; margin:0 0 16px; min-height:44px; }

/* Tombol */
.btn{
  display:inline-block; text-decoration:none;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft)); color:#2b2100;
  padding:10px 16px; border-radius:12px; font-weight:700;
  box-shadow:0 8px 14px rgba(212,160,23,.25);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 20px rgba(212,160,23,.32); filter:saturate(1.05); }

/* Notice & footer */
.notice{ margin-top:28px; }
.notice-inner{ border:1px dashed rgba(83,20,20,.3); background:#fff8e6; border-radius:14px; padding:14px 16px; }
.notice h4{ margin:0 0 4px; color:var(--maroon-deep); }
.site-footer{ padding:32px 0 40px; text-align:center; color:#6b5b3a; }

/* Responsif */
@media (max-width:900px){ .cards{ grid-template-columns:1fr } .intro h2{ font-size:30px } }
@media (max-width:520px){ .brand-text h1{ font-size:24px } .card{ padding:18px } .btn{ width:100%; text-align:center } }

/* Pastikan link biasa tidak jadi ungu/gelap tak terbaca */
a{ color:var(--maroon-deep); }
a:visited{ color:var(--maroon); }