/*!
 * RSDA Home Premium — tampilan beranda rsadhyatma.jatengprov.go.id
 * File ini HANYA berisi aturan tampilan (CSS). 
 */

:root{
  /* =====================  PENGATURAN CEPAT  =====================
     Ubah nilai di bawah ini untuk menyesuaikan tampilan tanpa menyentuh bagian lain.
     Warna latar tiap section: lihat "7b. TEMA WARNA PER SECTION" (--bg) di bawah.
     Judul & teks "Aplikasi Layanan": ada di rsda-home.js, blok CONFIG.
     Panduan lengkap: PANDUAN-KUSTOMISASI.md
     ============================================================== */
  --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) */
  /* Banner ajakan "Klik Kontak Kami": biru transparan. Ganti nilai rgba(...) untuk mengubah warna */
  --rs-cta-bg:linear-gradient(115deg,rgba(10,37,100,.96) 0%,rgba(29,78,216,.90) 48%,rgba(56,189,248,.82) 100%);
  --rs-cta-btn:linear-gradient(135deg,#f59e0b,#fbbf24);   /* warna tombol "Kontak Kami" */
  --rs-cta-btn-text:#0f172a;                              /* warna tulisan tombol */
  --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;
}
.rsda-sec:not([data-keepbg]){background:transparent !important}   /* section ber-data-keepbg (Link Terkait) mempertahankan gambar latar bawaan tema */
.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:#276dab !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:680px;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}
.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:#82b9bd2e !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;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:#0c66a3 --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}

/* =========================================================
   7c. LINK TERKAIT — gambar peta bawaan tema dipertahankan, diberi warna biru lembut
   ========================================================= */
.rsda-sec[data-theme="linkterkait"]{--bg:linear-gradient(180deg,#e6f0ff 0%,#c8dcfa 100%);--o1:rgba(29,78,216,.16);--o2:rgba(56,189,248,.18);--dot:transparent}
.rsda-sec[data-keepbg]::before{mix-blend-mode:multiply}   /* warna biru "menyatu" dengan gambar peta di bawahnya */
.rsda-bgc{background-color:transparent !important}
.rsda-links .rsda-limg{border-radius:14px;filter:drop-shadow(0 10px 18px rgba(15,23,42,.18));transition:transform .3s ease}
.rsda-links .rsda-limg:hover{transform:scale(1.04)}
/* panah slider (owl / slick / swiper / flexslider) */
.rsda-links :is(.owl-prev,.owl-next,.slick-prev,.slick-next,.swiper-button-prev,.swiper-button-next,.flex-prev,.flex-next){
  background:linear-gradient(135deg,#1d4ed8,#2563eb) !important; color:#fff !important; border:0 !important;
  border-radius:50% !important; opacity:1 !important; box-shadow:0 10px 20px -8px rgba(29,78,216,.8) !important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.rsda-links :is(.owl-prev,.owl-next,.slick-prev,.slick-next,.swiper-button-prev,.swiper-button-next,.flex-prev,.flex-next):hover{transform:scale(1.08)}

/* =========================================================
   7d. BANNER AJAKAN (CTA) "Klik Kontak Kami" — hijau menjadi biru transparan
   ========================================================= */
.rsda-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--rs-cta-bg) !important;
  box-shadow:0 18px 36px -22px rgba(10,37,100,.7);
}
.rsda-cta::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(520px 220px at 10% 0%,rgba(255,255,255,.24),transparent 70%),
    radial-gradient(420px 200px at 92% 100%,rgba(245,158,11,.28),transparent 70%);
}
.rsda-ctatext,.rsda-ctatext *{
  color:#fff !important; font-family:var(--rs-head) !important; font-weight:700 !important;
  font-size:clamp(17px,1.7vw,21px) !important; letter-spacing:-.005em; text-shadow:0 1px 2px rgba(10,37,100,.35);
}
.rsda-ctabtn{
  display:inline-flex !important; align-items:center; gap:8px; padding:12px 26px !important;
  border:0 !important; border-radius:999px !important; background:var(--rs-cta-btn) !important;
  font:800 13px/1 var(--rs-body) !important; letter-spacing:.06em; text-transform:uppercase; text-decoration:none !important;
  box-shadow:0 12px 24px -10px rgba(245,158,11,.85) !important; transition:transform .2s ease,box-shadow .2s ease;
}
.rsda-ctabtn,.rsda-ctabtn *{color:var(--rs-cta-btn-text) !important}
.rsda-ctabtn::after{content:"\2192";font-size:15px;line-height:1;transition:transform .2s ease}
.rsda-ctabtn:hover{transform:translateY(-2px);box-shadow:0 16px 28px -10px rgba(245,158,11,.95) !important}
.rsda-ctabtn:hover::after{transform:translateX(3px)}
.rsda-ctabtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:640px){
  .rsda-cta{text-align:center}
  .rsda-ctabtn{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .rsda-ctabtn,.rsda-ctabtn::after,.rsda-links .rsda-limg{transition:none}
  .rsda-ctabtn:hover,.rsda-ctabtn:hover::after,.rsda-links .rsda-limg:hover{transform:none}
}

/* =========================================================
   7e. JUDUL "APLIKASI LAYANAN" (dibuat oleh rsda-home.js; teksnya diatur di CONFIG.appsHeading)
   ========================================================= */
.rsda-head--apps{width:100% !important;flex:0 0 100%;margin:0 auto 44px !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}
}