/* ============================================================
   RSU WAJAK HUSADA — SISTEM DESAIN GLOBAL
   Komponen & utilitas bersama untuk semua halaman publik.
   Mempertahankan identitas brand oranye RSU Wajak Husada.
   ============================================================ */

:root{
  --primary:#ff650f;
  --primary-dark:#ed5700;
  --primary-light:#ff8b18;
  --primary-soft:#fff2e8;
  --primary-softer:#fff8f3;

  --yellow-orange:#ffa800;
  --green:#30a817;
  --whatsapp:#25d366;
  --red:#ef3338;
  --blue:#20aee5;
  --blue-dark:#168bea;

  --ink:#17304d;
  --text:#1f2937;
  --text-secondary:#5f6b7a;
  --text-muted:#8a95a3;

  --gray-50:#fafafa;
  --gray-100:#f5f6f8;
  --gray-200:#eceff3;
  --gray-300:#dde2e8;
  --white:#ffffff;

  --footer-dark:#343a40;

  --container-width:1280px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;

  --shadow-sm:0 1px 3px rgba(23,48,77,.06),0 1px 2px rgba(23,48,77,.04);
  --shadow-md:0 6px 18px rgba(23,48,77,.08);
  --shadow-lg:0 14px 36px rgba(23,48,77,.12);

  --ease:.25s cubic-bezier(.4,0,.2,1);

  --font-heading:'Oswald',sans-serif;
  --font-body:'Roboto',Arial,sans-serif;
}

/* ============================================================
   UTILITAS SECTION & HEADING
============================================================ */
.wh-section{padding:clamp(40px,6vw,72px) 0;}
.wh-section--tint{background:var(--gray-50);}
.wh-section--soft{background:linear-gradient(180deg,var(--primary-softer),var(--white));}

.wh-shell{width:min(var(--container-width),calc(100% - 48px));margin:0 auto;}

.wh-section-head{text-align:center;max-width:720px;margin:0 auto clamp(26px,4vw,44px);}
.wh-section-head .wh-eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:12px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--primary);
  margin-bottom:10px;
}
.wh-section-head h2{
  font-family:var(--font-heading);
  font-weight:700;text-transform:uppercase;
  color:var(--ink);
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.12;letter-spacing:.4px;
  margin:0 0 12px;
}
.wh-section-head h2 .accent{color:var(--primary);}
.wh-section-head p{
  color:var(--text-secondary);
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.65;margin:0;
}
.wh-section-head--left{text-align:left;margin-left:0;}

/* ============================================================
   TOMBOL
============================================================ */
.wh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:14px;
  padding:13px 26px;border-radius:var(--radius-pill,26px);border-radius:26px;
  cursor:pointer;text-decoration:none;border:2px solid transparent;
  transition:transform var(--ease),box-shadow var(--ease),background var(--ease),color var(--ease);
  white-space:nowrap;line-height:1;
}
.wh-btn i{font-size:13px;}
.wh-btn--primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(255,101,15,.28);}
.wh-btn--primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,101,15,.34);}
.wh-btn--ghost{background:#fff;color:var(--primary);border-color:var(--primary);}
.wh-btn--ghost:hover{background:var(--primary);color:#fff;transform:translateY(-2px);}
.wh-btn--white{background:#fff;color:var(--primary);}
.wh-btn--white:hover{background:var(--primary-soft);transform:translateY(-2px);}
.wh-btn--wa{background:var(--whatsapp);color:#fff;}
.wh-btn--wa:hover{filter:brightness(.95);transform:translateY(-2px);}
.wh-btn--lg{padding:16px 32px;font-size:15px;}
.wh-btn--sm{padding:9px 16px;font-size:12.5px;}

/* ============================================================
   KARTU LAYANAN UNGGULAN (Center of Excellence style)
============================================================ */
.wh-excellence-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:20px;
}
.wh-excellence-card{
  position:relative;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:28px 24px 24px;
  display:flex;flex-direction:column;gap:14px;
  overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  text-decoration:none;color:inherit;
  isolation:isolate;
}
.wh-excellence-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--primary),var(--yellow-orange));
  transform:scaleX(0);transform-origin:left;transition:transform var(--ease);
}
.wh-excellence-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.wh-excellence-card:hover::before{transform:scaleX(1);}
.wh-excellence-card .wh-ex-icon{
  width:62px;height:62px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--primary);
  background:var(--primary-soft);
  transition:background var(--ease),color var(--ease),transform var(--ease);
}
.wh-excellence-card:hover .wh-ex-icon{background:var(--primary);color:#fff;transform:scale(1.05) rotate(-4deg);}
.wh-excellence-card h3{
  font-family:var(--font-heading);font-weight:600;text-transform:uppercase;
  font-size:17px;color:var(--ink);line-height:1.2;letter-spacing:.3px;margin:0;
}
.wh-excellence-card p{
  font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:0;
  flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.wh-excellence-card .wh-ex-link{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:13px;color:var(--primary);margin-top:2px;
  transition:gap var(--ease);
}
.wh-excellence-card:hover .wh-ex-link{gap:12px;}

/* ============================================================
   KARTU STATISTIK / HIGHLIGHT
============================================================ */
.wh-stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
}
.wh-stat-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);
  padding:22px 20px;text-align:center;
  transition:transform var(--ease),box-shadow var(--ease);
}
.wh-stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.wh-stat-card .wh-stat-icon{font-size:26px;color:var(--primary);margin-bottom:10px;}
.wh-stat-card .wh-stat-number{font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--ink);line-height:1;}
.wh-stat-card .wh-stat-label{font-size:12.5px;color:var(--text-secondary);margin-top:6px;}

/* ============================================================
   ANIMASI REVEAL ON SCROLL
============================================================ */
.wh-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.wh-reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .wh-reveal{opacity:1;transform:none;transition:none;}
  .wh-excellence-card,.wh-btn,.wh-stat-card{transition:none;}
}

/* ============================================================
   FLOATING QUICK CONTACT (WhatsApp)
============================================================ */
.wh-float-wa{
  position:fixed;right:18px;bottom:18px;z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:var(--whatsapp);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;text-decoration:none;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform var(--ease);
  animation:wh-wa-pulse 2.4s infinite;
}
.wh-float-wa:hover{transform:scale(1.08);}
@keyframes wh-wa-pulse{
  0%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.4);}
  70%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 8px 24px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0);}
}
@media (max-width:600px){
  .wh-float-wa{width:50px;height:50px;font-size:23px;right:14px;bottom:14px;}
}

/* ============================================================
   RESPONSIF
============================================================ */
@media (max-width:767px){
  .wh-shell{width:calc(100% - 32px);}
  .wh-excellence-grid{grid-template-columns:1fr;gap:14px;}
  .wh-excellence-card{padding:22px 20px;}
}

/* ============================================================
   PENINGKATAN HERO / HEADER CAROUSEL (SLIDER CMS)
   Latar brand ketika gambar belum tersedia + keterbacaan teks
============================================================ */
.rsu-full-header{
  position:relative;
  background:linear-gradient(120deg,var(--primary) 0%,var(--primary-light) 45%,var(--yellow-orange) 100%);
}
/* Overlay gradient supaya teks selalu terbaca di atas foto apa pun */
.rsu-full-header .rsu-full-overlay{
  background:linear-gradient(90deg,rgba(23,48,77,.55) 0%,rgba(23,48,77,.25) 55%,rgba(23,48,77,.05) 100%)!important;
}
.rsu-full-header .rsu-full-content h1{
  font-family:var(--font-heading);
  text-shadow:0 2px 12px rgba(0,0,0,.28);
  letter-spacing:.3px;
}
.rsu-full-header .rsu-full-content p{
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
/* Panah & dot navigasi hero lebih jelas */
.rsu-header-arrow{
  background:rgba(255,255,255,.9)!important;color:var(--primary)!important;
  box-shadow:var(--shadow-md)!important;transition:background var(--ease),transform var(--ease);
}
.rsu-header-arrow:hover{background:#fff!important;transform:translateY(-50%) scale(1.08)!important;}

/* ============================================================
   FALLBACK GAMBAR YANG LEBIH ELEGAN
   (menggantikan kotak abu-abu polos pada kartu)
============================================================ */
.img-fallback{
  background:linear-gradient(135deg,var(--primary-soft),var(--gray-100))!important;
  color:var(--primary)!important;
}
.img-fallback i{opacity:.55;}