/* =========================
   Pulih Hati — Base Styles
   Mobile-first, pink accent
   ========================= */

#pulihhati{
  --bg:#ffffff;
  --paper:#fdf2f8;         /* soft pink paper */
  --text:#0f172a;          /* slate-900 */
  --muted:#64748b;         /* slate-500 */
  --border:#e2e8f0;        /* slate-200 */
  --accent:#ec4899;        /* pink-500 */
  --accent-2:#f472b6;      /* pink-400 */
  --good:#16a34a;
  --bad:#dc2626;
  --warn:#d97706;
  --ring: rgba(236,72,153,.35);

  --radius: 14px;
  --shadow: 0 6px 18px rgba(236,72,153,.12);
  --ph-header-h: 64px;      /* tinggi header */
}

/* Reset ringkas */
#pulihhati, #pulihhati * { box-sizing: border-box; }
#pulihhati { color:var(--text); background:var(--bg); line-height:1.65; }
#pulihhati a { color:inherit; text-decoration:none; transition:all .25s ease; }
#pulihhati img { max-width:100%; display:block; }

/* Layout util */
#pulihhati .wrap { max-width:1100px; margin:auto; padding:0 18px; }

/* =========================
   Header / Navigation
   ========================= */
#pulihhati .header{
  position: sticky;
  top: var(--ph-adminbar, 0px);  /* offset bila admin bar wujud */
  z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--border);
}
#pulihhati body { padding-top: calc(var(--ph-header-h)); } /* fallback kalau inline style tak guna */
#pulihhati .nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
#pulihhati .brand{ display:flex; gap:10px; align-items:center; font-weight:800; }
#pulihhati .brand .dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-block; }
#pulihhati .menu a{ display:inline-block; padding:8px 10px; border-radius:10px; }
#pulihhati .menu a:hover{ background:#fff0fb; }
#pulihhati .menu a.active{ background:#ffe4f3; border:1px solid var(--border); }

#pulihhati .menu-toggle{
  display:none;
  width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:12px; background:#fff;
}
#pulihhati .menu-toggle .hamburger{
  width:18px; height:2px; background:var(--text); position:relative; display:block;
}
#pulihhati .menu-toggle .hamburger::before,
#pulihhati .menu-toggle .hamburger::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--text);
}
#pulihhati .menu-toggle .hamburger::before{ top:-6px; }
#pulihhati .menu-toggle .hamburger::after{ top:6px; }

/* Mobile menu (hidden by default) */
@media (max-width: 719.98px){
  #pulihhati .menu{
    display:none;
    position:absolute; left:0; right:0; top:64px;
    background:var(--paper);
    border-bottom:1px solid var(--border);
    padding:12px 18px;
  }
  #pulihhati .menu.open{ display:block; }
  #pulihhati .menu a{ display:block; padding:12px 0; }
  #pulihhati .menu-toggle{ display:inline-flex; }
}
@media (min-width: 720px){
  #pulihhati .menu{ display:flex; gap:16px; }
  #pulihhati .menu-toggle{ display:none; }
}

/* CTA buttons on header (if any) */
#pulihhati .cta{ display:flex; gap:10px; align-items:center; }

/* =========================
   Hero
   ========================= */
#pulihhati .hero{ background:linear-gradient(135deg,#fff,#ffeaf6); border-bottom:1px solid var(--border); }
#pulihhati .hero .box{ display:grid; gap:18px; padding:28px 0; }
@media (min-width: 860px){
  #pulihhati .hero .box{ grid-template-columns: 1.2fr .8fr; align-items:center; }
}
#pulihhati .kicker{ font-weight:700; color:#ef5ca8; letter-spacing:.5px; text-transform:uppercase; font-size:12px; }
#pulihhati h1{ font-size: clamp(22px, 4.2vw, 36px); font-weight: 800; margin: 4px 0 10px; }
#pulihhati .sub{ color:var(--muted); }

/* Hero Cards */
#pulihhati .hero-card .hero-grid{ display:grid; gap:12px; }
@media (min-width:720px){ #pulihhati .hero-card .hero-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================
   Sections / Titles
   ========================= */
#pulihhati .sec-head{ display:flex; align-items:center; justify-content:space-between; margin: 22px 0 12px; }
#pulihhati .sec-title{ font-size:20px; font-weight:800; }
#pulihhati .link{ font-size:14px; color:#ef5ca8; }
#pulihhati .link:hover{ text-decoration:underline; }

/* =========================
   Cards / Utilities
   ========================= */
#pulihhati .card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:14px;
}
#pulihhati .muted{ color:var(--muted); }
#pulihhati .tag{
  font-size:12px; color:#fff; background:var(--accent);
  padding:4px 8px; border-radius:999px; display:inline-block; margin-bottom:8px;
}
#pulihhati .pill{
  font-size:12px; color:#ef5ca8; background:#ffe7f3; border:1px solid #ffd3ec;
  padding:4px 10px; border-radius:999px; display:inline-block;
}

/* =========================
   Buttons
   ========================= */
#pulihhati .btn{
  position:relative; overflow:hidden;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff;
  min-height:44px; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 3px 10px rgba(236,72,153,.10);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
#pulihhati .btn:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(244,114,182,.25); border-color:#f3b5da; }
#pulihhati .btn:active{ transform: translateY(0); }
#pulihhati .btn.primary{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:#fff; border-color:transparent;
  box-shadow:0 10px 20px rgba(236,72,153,.25);
  animation:pulseGlow 4s ease-in-out infinite;
}
#pulihhati .btn.primary::before{
  content:""; position:absolute; top:0; left:-50%; width:50%; height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg); opacity:0;
}
#pulihhati .btn.primary:hover::before{ animation:shine .9s ease forwards; }

/* Ripple */
#pulihhati .btn.ripple{ --ripple-x:50%; --ripple-y:50%; }
#pulihhati .btn.ripple::after{
  content:""; position:absolute; left:var(--ripple-x); top:var(--ripple-y);
  width:8px; height:8px; background:rgba(255,255,255,.45); border-radius:50%;
  transform:translate(-50%,-50%); opacity:0;
}
#pulihhati .btn.ripple.is-animating::after{ animation:ripple .6s ease-out; }

/* =========================
   Grids (mobile-first)
   ========================= */
#pulihhati .grid{ display:grid; gap:16px; }

/* Phone: 1 kolum */
#pulihhati .grid.g3{ grid-template-columns: 1fr; }
#pulihhati .grid.g2{ grid-template-columns: 1fr; }

/* Tablet: 2 kolum */
@media (min-width:720px){
  #pulihhati .grid.g3{ grid-template-columns: repeat(2,1fr); }
  #pulihhati .grid.g2{ grid-template-columns: repeat(2,1fr); }
}

/* Desktop: 3 kolum */
@media (min-width:960px){
  #pulihhati .grid.g3{ grid-template-columns: repeat(3,1fr); }
}

/* =========================
   Khusus seksyen
   ========================= */
#pulihhati .daily{ padding: 18px 0 8px; }
#pulihhati .story{ padding: 18px 0 8px; }
#pulihhati .ebook{ padding: 18px 0 8px; }
#pulihhati .dua{ padding: 18px 0 28px; }
#pulihhati .thumb{ border-radius:10px; overflow:hidden; }

/* Servis (cards) */
#pulihhati .badge{
  display:inline-block; font-size:12px; background:#fff0fb; color:#ef5ca8;
  border:1px solid #ffd3ec; padding:3px 8px; border-radius:999px; margin-bottom:8px;
}
#pulihhati .price{ font-size:22px; font-weight:800; margin:6px 0 10px; color:#ef5ca8; }
#pulihhati .list{ padding-left:18px; margin:0 0 12px; }
#pulihhati .list li{ margin:6px 0; }

/* Doa */
#pulihhati .dua .card{ display:flex; gap:12px; align-items:center; }
#pulihhati .dua audio{ width:100%; }

/* =========================
   Subscribe (optional)
   ========================= */
#pulihhati #subscribe .subscribe{
  display:flex; gap:10px; flex-wrap:wrap;
}
#pulihhati #subscribe input[type="email"]{
  flex:1 1 220px; min-height:44px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px;
}

/* =========================
   Footer
   ========================= */
#pulihhati .footer{ background:var(--paper); padding:28px 0; }
#pulihhati .foot-grid{ display:grid; gap:16px; }
@media (min-width: 860px){
  #pulihhati .foot-grid{ grid-template-columns: 1.2fr .8fr .8fr; }
}
#pulihhati .copy{
  border-top:1px solid var(--border); margin-top:18px; padding-top:12px;
  color:#64748b; font-size:14px;
}
#pulihhati .to-top{ float:right; }

/* =========================
   Utilities
   ========================= */
#pulihhati .hide-sm{ display:none; }
@media (min-width:720px){ #pulihhati .hide-sm{ display:block; } }

/* =========================
   Animations
   ========================= */
@keyframes shine{
  0% { left:-60%; opacity:0; }
  40% { opacity:1; }
  100% { left:120%; opacity:0; }
}
@keyframes ripple{
  0% { transform:translate(-50%,-50%) scale(0.3); opacity:.55; }
  100% { transform:translate(-50%,-50%) scale(12); opacity:0; }
}
@keyframes pulseGlow{
  0%,100% { box-shadow:0 10px 20px rgba(236,72,153,.20); }
  50% { box-shadow:0 14px 28px rgba(236,72,153,.35); }
}