/*!
 * RSDA Home Premium — tampilan beranda rsadhyatma.jatengprov.go.id
 * File ini HANYA berisi aturan tampilan (CSS). Tidak ada url(), @import,
 * expression(), atau pemanggilan ke server lain.
 */

:root{
  --rs-navy:#0f172a;
  --rs-muted:#56657b;
  --rs-blue:#1d4ed8;
  --rs-orange:#f59e0b;
  --rs-radius:20px;
  --rs-head:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rs-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html{overflow-x:clip}

/* =========================================================
   1. SECTION: tanpa gap, latar penuh selang-seling
   ========================================================= */
.rsda-sec{
  position:relative; isolation:isolate;
  margin:0 !important;
  padding:72px clamp(12px,3vw,28px) !important;
  background:transparent !important;
}
.rsda-sec::before,
.rsda-sec::after{
  content:""; position:absolute; top:0; bottom:0; left:-50vw; right:-50vw;
  z-index:-1; pointer-events:none;
}
.rsda-sec[data-tone="0"]{--bg:#ffffff}
.rsda-sec[data-tone="1"]{--bg:linear-gradient(180deg,#f7faff 0%,#edf3ff 100%)}
.rsda-sec::before{background:var(--bg)}
.rsda-sec::after{
  background:
    radial-gradient(520px 260px at 12% 0%,rgba(29,78,216,.07),transparent 70%),
    radial-gradient(520px 260px at 88% 100%,rgba(245,158,11,.09),transparent 70%);
}
.rsda-clear{background:transparent !important}

/* =========================================================
   2. SUSUNAN 1 KOLOM, RATA TENGAH
   ========================================================= */
.rsda-void{display:none !important}
.rsda-inner{display:block !important;float:none !important;width:100% !important;max-width:1180px;margin:0 auto !important}
.rsda-inner > *{float:none !important;width:100% !important;max-width:100% !important;flex:0 0 100% !important;margin-left:0 !important;margin-right:0 !important}
.rsda-pass{display:block !important;float:none !important;position:static !important;width:100% !important;max-width:100% !important;flex:0 0 100% !important;margin:0 !important;padding:0 !important;transform:none !important}

/* =========================================================
   3. JUDUL + CAPTION
   ========================================================= */
.rsda-head{text-align:center !important;max-width:760px;margin:0 auto 40px !important;padding:0 !important}
.rsda-head,.rsda-head > *{float:none !important;text-align:center !important}

.rsda-title{
  display:block; text-align:center !important; width:100%;
  font-family:var(--rs-head) !important; font-weight:800 !important;
  font-size:clamp(20px,2.4vw,30px) !important; line-height:1.3 !important;
  letter-spacing:.03em;
}
.rsda-title,.rsda-title *{color:var(--rs-navy) !important;text-decoration:none !important;border:0 !important}
.rsda-title::after{
  content:""; display:block; width:64px; height:4px; margin:14px auto 0;
  border-radius:99px; background:linear-gradient(90deg,var(--rs-orange),#fcd34d);
}
.rsda-title img{height:1.05em;width:auto;display:inline-block;vertical-align:-.12em;margin-right:.45em}

.rsda-sub,.rsda-sub *{
  font-family:var(--rs-body) !important; font-weight:400 !important;
  font-size:clamp(15px,1.4vw,17.5px) !important; line-height:1.75 !important;
  color:var(--rs-muted) !important; text-align:center !important;
  text-transform:none !important; letter-spacing:0 !important;
}
.rsda-sub{display:block;max-width:640px;margin:14px auto 0 !important}

/* =========================================================
   4. IFRAME (jadwal dokter, statistik, data obat)
   ========================================================= */
.rsda-sec iframe{
  display:block; width:100% !important; max-width:1180px; margin:0 auto !important;
  background:#fff; border:0 !important; border-radius:var(--rs-radius);
  box-shadow:0 0 0 1px rgba(148,163,184,.28),0 2px 4px rgba(15,23,42,.04),0 24px 48px -16px rgba(15,23,42,.18);
}

/* =========================================================
   5. KARTU APLIKASI (RSDAKU, SOKLAT, SPEAK UP, INSERTA)
   ========================================================= */
.rsda-card{
  background:#fff !important; border-radius:var(--rs-radius) !important;
  padding:22px 18px 18px !important; margin-bottom:24px; text-align:center; overflow:hidden;
  box-shadow:0 0 0 1px rgba(148,163,184,.25),0 12px 28px -12px rgba(15,23,42,.18);
  transition:transform .3s ease,box-shadow .3s ease;
}
.rsda-card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(29,78,216,.25),0 22px 44px -14px rgba(29,78,216,.28)}
.rsda-card .rsda-title{font-size:17px !important}
.rsda-card .rsda-title::after{width:36px;height:3px;margin-top:10px}
.rsda-card .rsda-sub,.rsda-card .rsda-sub *{font-size:13.5px !important;line-height:1.55 !important}
.rsda-card .rsda-sub{margin-top:10px !important}
.rsda-poster{display:block;width:100% !important;height:auto !important;border-radius:14px;margin-top:14px;transition:transform .5s ease}
.rsda-card:hover .rsda-poster{transform:scale(1.03)}

/* =========================================================
   6. BERITA KAMI
   ========================================================= */
.rsda-ngrid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;max-width:1180px;margin:0 auto !important}
.rsda-ngrid > *{float:none !important;width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column}
.rsda-ngrid > * > .rsda-ncard{flex:1}
.rsda-ncard{
  background:#f1f2f3a6  !important; border-radius:var(--rs-radius) !important;
  padding:18px !important; overflow:hidden;
  box-shadow:0 0 0 1px rgba(148,163,184,.25),0 12px 28px -12px rgba(15,23,42,.18) !important;
  transition:transform .3s ease,box-shadow .3s ease;
}
.rsda-ncard:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(29,78,216,.25),0 22px 44px -14px rgba(29,78,216,.28)}
.rsda-nimg{display:block;width:100% !important;height:auto !important;aspect-ratio:4/4;object-fit:cover;object-position:center top;border-radius:14px;margin:0 0 14px !important}
.rsda-ntitle{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px !important}
.rsda-ntitle,.rsda-ntitle *{font-family:var(--rs-head) !important;font-weight:700 !important;font-size:16px !important;line-height:1.4 !important;color:var(--rs-navy) !important;text-decoration:none !important}
.rsda-ntitle a:hover,a.rsda-ntitle:hover{color:var(--rs-blue) !important}
.rsda-nbody{margin:0 0 12px !important}
.rsda-nbody,.rsda-nbody *{font-family:var(--rs-body) !important;font-size:14px !important;line-height:1.65 !important;font-weight:400 !important;color:var(--rs-muted) !important}
.rsda-btn{
  display:inline-block !important; background:linear-gradient(135deg,#1d4ed8,#2563eb) !important;
  border:0 !important; border-radius:999px !important; padding:9px 20px !important;
  font:600 13px/1 var(--rs-body) !important; text-decoration:none !important;
  box-shadow:0 8px 18px -8px rgba(29,78,216,.6); transition:transform .2s,box-shadow .2s;
}
.rsda-btn,.rsda-btn *{color:#fff !important}
.rsda-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -8px rgba(29,78,216,.7)}
.rsda-meta{display:block;margin-top:12px !important}
.rsda-meta,.rsda-meta *{font-family:var(--rs-body) !important;font-size:12px !important;color:#7a8aa0 !important}
.rsda-meta a{color:var(--rs-blue) !important}

.rsda-btn2wrap{text-align:center !important;margin-top:36px !important}
.rsda-btn2{
  display:inline-flex !important; align-items:center; gap:8px;
  background:#fff !important; border:1.5px solid var(--rs-blue) !important; color:var(--rs-blue) !important;
  border-radius:999px !important; padding:11px 26px !important;
  font:700 14px/1 var(--rs-body) !important; text-decoration:none !important; transition:all .25s;
}
.rsda-btn2 *{color:inherit !important;font:inherit !important;background:none !important;text-decoration:none !important}
.rsda-btn2:hover{background:var(--rs-blue) !important;color:#fff !important;box-shadow:0 12px 24px -10px rgba(29,78,216,.6)}

/* =========================================================
   7. GALERI INFO + GALERI FOTO
   ========================================================= */
.rsda-lw2{border:0 !important}
.rsda-lw1{border:0 !important;border-bottom:1px solid #dbe4f3 !important;max-width:1180px;margin:0 auto 28px !important;padding:0 0 12px !important;text-align:left !important;background:none !important}
.rsda-label{display:inline-block;padding-left:12px;border-left:4px solid var(--rs-orange) !important;text-align:left !important}
.rsda-label,.rsda-label *{font-family:var(--rs-head) !important;font-weight:700 !important;font-size:15px !important;color:var(--rs-navy) !important;text-transform:none !important}
.rsda-gimg{border-radius:14px !important;box-shadow:0 10px 24px -12px rgba(15,23,42,.35);transition:transform .3s ease,box-shadow .3s ease}
.rsda-gimg:hover{transform:translateY(-4px);box-shadow:0 18px 36px -14px rgba(29,78,216,.35)}

/* =========================================================
   8. AKSESIBILITAS + ANIMASI + MOBILE
   ========================================================= */
.rsda-btn:focus-visible,.rsda-btn2:focus-visible,.rsda-ntitle:focus-visible,.rsda-ncard a:focus-visible,.rsda-card a:focus-visible{
  outline:3px solid #93c5fd; outline-offset:3px;
}

.rsda-pre{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rsda-pre.rsda-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rsda-pre{opacity:1;transform:none;transition:none}
  .rsda-card,.rsda-ncard,.rsda-gimg,.rsda-poster,.rsda-btn,.rsda-btn2{transition:none}
  .rsda-card:hover,.rsda-ncard:hover,.rsda-gimg:hover,.rsda-btn:hover,.rsda-card:hover .rsda-poster{transform:none}
}

@media (max-width:768px){
  .rsda-sec{padding-top:44px !important;padding-bottom:44px !important}
  .rsda-head{margin-bottom:26px !important}
  .rsda-sec iframe{border-radius:14px}
  .rsda-ngrid{grid-template-columns:1fr}
}