/*!
 * 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-max:none;                    /* batas lebar isi; none = penuh. Contoh: 1600px */
  --rs-pad:clamp(12px,2.5vw,40px);  /* jarak kiri-kanan section */
  --rs-appmin:200px;                /* lebar minimum kartu aplikasi */
  --rs-gap:24px;                    /* jarak antar kartu (aplikasi & berita) */
  --rs-appwrap:1400px;              /* lebar maksimum deretan kartu aplikasi (selalu di-center) */
  --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}
@supports not (overflow-x:clip){html{overflow-x:hidden}}

/* =========================================================
   1. SECTION: tanpa gap, latar penuh selang-seling
   ========================================================= */
.rsda-sec{
  position:relative; isolation:isolate; box-sizing:border-box !important;
  margin:0 !important;
  padding:72px var(--rs-pad) !important;
  background:transparent !important;
}
.rsda-sec::before,
.rsda-sec::after{
  content:""; position:absolute; top:0; bottom:0; left:0; right:0;
  z-index:-1; pointer-events:none;
}
/* pembungkus tema yang memotong (overflow) dilepas agar section bisa selebar layar */
.rsda-free{overflow:visible !important}
.rsda-flow{display:flow-root !important}
.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:var(--rs-max);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}
/* latar bawaan blok judul (mis. #f7f7f9) dihilangkan agar warna section terlihat */
.rsda-head,.rsda-head *{background-color:transparent !important}
.rsda-head .wpcrt-title{padding:0 !important;margin:0 !important;border:0 !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:#4687b3 !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}
/* ikon di samping judul (ikon font, svg, atau gambar kecil) selalu tampil */
.rsda-title svg,.rsda-title i,.rsda-title [class*="icon"]{display:inline-block !important;visibility:visible !important;opacity:1 !important;vertical-align:-.12em}
.rsda-title svg,.rsda-title i{margin-right:.45em}
.rsda-title svg{overflow:visible}
.rsda-title svg,.rsda-title i,.rsda-title [class*="icon"]{color:var(--rs-icon,var(--rs-blue)) !important}

.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-subc,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,
.rsda-sec embed,
.rsda-sec object{
  display:block; width:100% !important; max-width:var(--rs-max); 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:0 0 var(--rs-gap); 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)}

/* Isi kartu dikunci urutannya: judul -> caption -> poster (tidak turun/berpindah di HP & app) */
.rsda-card,.rsda-ncard{min-width:0;--rs-title:#0f172a;--rs-subc:#56657b}
.rsda-cardbody{display:flex !important;flex-direction:column;min-width:0}
.rsda-cardbody > *{order:2;min-width:0}
.rsda-cardbody > .rsda-o1{order:1; margin-bottom: 1px;}
.rsda-cardbody > .rsda-o2{order:2}
.rsda-cardbody > .rsda-o3{order:3;margin-top:auto}
.rsda-card .rsda-title,.rsda-card .rsda-sub,.rsda-ntitle{overflow-wrap:anywhere}

/* Grid kartu aplikasi: tinggi sama, otomatis 1/2/4 kolom */
.rsda-agrid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--rs-appmin)),1fr));gap:var(--rs-gap);align-items:stretch;justify-content:center;box-sizing:border-box}
.rsda-agrid:not(.rsda-sec){width:100% !important;max-width:var(--rs-appwrap) !important;flex:1 1 100%;margin:0 auto !important;padding:0 !important}   /* bila wadah = baris section, padding section dipertahankan */
.rsda-agrid:not(.rsda-sec)::before,.rsda-agrid:not(.rsda-sec)::after{display:none !important}
.rsda-agrid > *{float:none !important;width:auto !important;max-width:none !important;margin:0 !important;min-width:0}
.rsda-agrid > *:not(.rsda-card){padding:0 !important;display:flex;flex-direction:column}
.rsda-agrid > .rsda-agrid-full{grid-column:1 / -1}
.rsda-agrid > * > .rsda-card{flex:1}
.rsda-agrid .rsda-card{margin:0;box-sizing:border-box}

/* =========================================================
   6. BERITA KAMI
   ========================================================= */
.rsda-ngrid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--rs-gap);max-width:var(--rs-max);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:#c7e0f22e !important; border-radius:var(--rs-radius) !important;
  padding:14px 14px 18px !important; 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-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/3;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 rgba(100,116,139,.25) !important;max-width:var(--rs-max);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)}

/* =========================================================
   7b. TEMA WARNA PER SECTION
   ========================================================= */
.rsda-sec{--o1:rgba(29,78,216,.07);--o2:rgba(245,158,11,.09);--dot:rgba(15,23,42,.045)}
.rsda-sec::after{
  background:
    radial-gradient(520px 260px at 12% 0%,var(--o1),transparent 70%),
    radial-gradient(520px 260px at 88% 100%,var(--o2),transparent 70%),
    radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 1.6px) 0 0/26px 26px;
}
/* Dokter: biru langit lembut */
.rsda-sec[data-theme="dokter"]{--bg:linear-gradient(180deg,#eaf3ff 0%,#d6e7ff 100%);--o1:rgba(29,78,216,.18);--o2:rgba(14,165,233,.16)}
/* Statistik: lavender */
.rsda-sec[data-theme="statistik"]{--bg:linear-gradient(180deg,#f4f0ff 0%,#e2d9ff 100%);--o1:rgba(124,58,237,.16);--o2:rgba(29,78,216,.12)}
/* Informasi Obat: hijau mint */
.rsda-sec[data-theme="obat"]{--bg:linear-gradient(180deg,#eaf8f2 0%,#cdeee2 100%);--o1:rgba(13,148,136,.18);--o2:rgba(34,197,94,.14)}
/* Aplikasi: biru navy gelap, kartu putih */
.rsda-sec[data-theme="apps"]{--bg:linear-gradient(135deg,#0b2a66 0%,#1740b5 55%,#2563eb 100%);--o1:rgba(255,255,255,.10);--o2:rgba(245,158,11,.20);--dot:rgba(255,255,255,.08);--rs-title:#ffffff;--rs-subc:#d6e4ff}
/* Berita: putih bersih */
.rsda-sec[data-theme="berita"]{--bg:linear-gradient(180deg,#ffffff 0%,#f1f5fb 100%);--o1:rgba(29,78,216,.07);--o2:rgba(245,158,11,.10)}
/* Galeri Info: krem hangat */
.rsda-sec[data-theme="galinfo"]{--bg:linear-gradient(180deg,#fff6e6 0%,#ffe5bf 100%);--o1:rgba(245,158,11,.22);--o2:rgba(239,68,68,.10)}
/* Galeri Foto: abu kebiruan */
.rsda-sec[data-theme="galfoto"]{--bg:linear-gradient(180deg,#edf2fa 0%,#d9e3f2 100%);--o1:rgba(29,78,216,.14);--o2:rgba(100,116,139,.14)}

/* Lencana "New" ikut sebaris dengan judul (tidak menjatuhkan caption) */
.rsda-title .rsda-badge{display:inline-block !important;margin:0 0 0 .5em !important;vertical-align:middle !important;border:0 !important;line-height:1 !important}
.rsda-title img.rsda-badge,.rsda-title .rsda-badge img{height:1.35em !important;width:auto !important;max-width:none !important;vertical-align:middle !important;box-shadow:none !important}
.rsda-title .rsda-badge img{margin:0 !important}

/* Pembungkus tema (container/row) di dalam section dibuat selebar section */
.rsda-fluid{float:none !important;width:100% !important;max-width:none !important;min-width:0 !important;margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;background-color:transparent !important}

/* =========================================================
   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,.rsda-sec embed,.rsda-sec object{border-radius:14px}
  .rsda-ngrid{grid-template-columns:1fr}
  .rsda-title{font-size:clamp(18px,5vw,22px) !important}
  .rsda-sub,.rsda-sub *{font-size:14.5px !important}
  .rsda-agrid{gap:18px}
}
@media (max-width:480px){
  :root{--rs-pad:12px;--rs-gap:16px}
  .rsda-card{padding:18px 14px 14px !important}
  .rsda-card .rsda-title{font-size:16px !important}
  .rsda-ngrid{gap:16px}
}