/* ==========================================================================
   RRS Redesign v2 — perbaikan menyeluruh setelah audit bug v1:
   - #hero .container masih mewarisi kartu putih 90% opacity dari style.css
     asli (background/border/max-width), sementara teks di-set putih -> teks
     hilang di atas kartu putih. DIPERBAIKI: kartu putih dimatikan, hero jadi
     foto penuh + overlay gradient + teks putih asli.
   - a { color:#c0392b } global (style.css baris 15) bentrok dengan
     .cta { background:#c0392b }: tombol .btn-get-started tanpa class warna
     sendiri mewarisi merah-di-atas-merah (teks = background). DIPERBAIKI:
     .btn-get-started diberi definisi lengkap (bg, warna, border) di SEMUA
     konteks, bukan cuma di dalam #hero.
   - Dropdown submenu dirapikan (padding, hover, divider, max-height+scroll
     untuk menu dengan banyak sub-item).
   - Musik: indikator "klik untuk lanjutkan" saat browser blokir auto-resume.
   ========================================================================== */

:root{
  --rrs-red: #c0392b;
  --rrs-red-dark: #a53125;
  --rrs-green: #1f4d3a;
  --rrs-ink: #1a1a2e;
  --rrs-sub: #6b6f76;
  --rrs-line: #ececec;
  --rrs-radius: 14px;
}

/* ---------- Reset dasar tambahan ------------------------------------------ */
img{ max-width: 100%; }

/* ---------- Tipografi & spacing section (konsisten, max 2 font family) --- */
body{ font-family: "Open Sans", Arial, sans-serif; }
h1, h2, h3, h4, .navbar a{ font-family: "Poppins", "Open Sans", Arial, sans-serif; }

#main > section{ padding: 60px 0; }
.section-title{ margin-bottom: 36px; }
.section-title h2{
  font-size: 28px;
  font-weight: 700;
  color: var(--rrs-ink);
  position: relative;
  padding-bottom: 14px;
}
.section-title h2::after{
  content: "";
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: var(--rrs-red);
  border-radius: 2px;
}
.section-title p{ color: var(--rrs-sub); font-size: 15px; max-width: 640px; margin: 0 auto; }

/* ==========================================================================
   NAVBAR — responsive drawer tablet (<=1199px) & desktop rapi (>=1200px)
   ========================================================================== */
header#header .logo img{ max-height: 46px; width: auto; }

/* Desktop Navigation (>= 1200px) */
@media (min-width: 1200px){
  header#header .container{ overflow: visible !important; }
  .navbar a{ padding-left: 14px; font-size: 12px; letter-spacing: .2px; }
  .navbar li:first-child > a{ padding-left: 0; }
  #navbar .btn-cta-nav{ padding: 6px 12px !important; font-size: 11.8px; margin-left: 4px; }
}
@media (min-width: 1400px){
  .navbar a{ padding-left: 18px; font-size: 13px; }
  #navbar .btn-cta-nav{ padding: 7px 14px !important; font-size: 12.5px; }
}

/* Tablet & Mobile Navigation (<= 1199px) — hamburger drawer ramah sentuh */
@media (max-width: 1199px){
  .mobile-nav-toggle{ display: block !important; }
  .navbar ul{ display: none; }
  .navbar-mobile > ul{
    display: block !important;
    position: absolute;
    top: 55px; right: 15px; bottom: 15px; left: 15px;
    padding: 14px 0;
    border-radius: 12px;
    background-color: #fff;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  }
  .navbar-mobile a{
    padding: 12px 24px !important;
    font-size: 15px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar-mobile .dropdown ul{
    position: static;
    display: none;
    margin: 6px 20px 10px 20px;
    padding: 6px 0;
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    box-shadow: none;
  }
  .navbar-mobile .dropdown ul.dropdown-active{
    display: block !important;
  }
  .navbar-mobile .dropdown ul li{ min-width: 0; }
  .navbar-mobile .dropdown ul a{
    padding: 10px 18px !important;
    font-size: 13.5px;
    color: #555 !important;
    display: block !important;
  }
  .navbar-mobile .dropdown ul a:hover{
    color: var(--rrs-red) !important;
    background: #fff;
  }
  .navbar-mobile .btn-cta-nav{
    margin: 8px 20px !important;
    display: inline-block;
    text-align: center;
  }
  .navbar-mobile .dropdown > a i{
    transition: transform .3s ease;
  }
  .navbar-mobile .dropdown > a.dropdown-open i{
    transform: rotate(180deg);
  }
}

/* Dropdown submenu desktop: rapikan spacing, hover, dan batasi tinggi bila panjang */
.navbar .dropdown ul{
  padding: 8px 0;
  max-height: 70vh;
  overflow-y: auto;
}
.navbar .dropdown ul li{ min-width: 230px; }
.navbar .dropdown ul li + li{ border-top: 1px solid #f2f2f2; }
.navbar .dropdown ul a{
  padding: 11px 20px !important;
  font-size: 13.5px;
  color: #444 !important;
  display: block !important;
}
.navbar .dropdown ul a:hover{
  background: #fdf3f2;
  color: var(--rrs-red) !important;
}
.navbar-mobile .dropdown ul li + li{ border-top: 1px solid #f2f2f2; }

/* ==========================================================================
   TOMBOL — .btn-get-started dipakai di luar #hero juga (H06/H10/H15/CTA)
   ========================================================================== */
.btn-get-started{
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .4px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 30px;
  border: 2px solid #fff;
  background: #fff;
  color: var(--rrs-red) !important;
  transition: .3s;
}
.btn-get-started:hover{
  background: transparent;
  color: #fff !important;
}

/* Varian outline default */
.btn-get-started[style*="transparent"],
.btn-get-started.btn-cta-outline{
  background: transparent !important;
  color: #fff !important;
}
.btn-get-started[style*="transparent"]:hover,
.btn-get-started.btn-cta-outline:hover{
  background: #fff !important;
  color: var(--rrs-red) !important;
}

/* Di dalam #hero */
#hero .btn-get-started{
  background: var(--rrs-red);
  color: #fff !important;
  border: 2px solid var(--rrs-red);
}
#hero .btn-get-started:hover{
  background: var(--rrs-red-dark);
  border-color: var(--rrs-red-dark);
  color: #fff !important;
}
#hero .btn-get-started.btn-cta-outline,
#hero .btn-get-started[style*="transparent"]{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff;
}
#hero .btn-get-started.btn-cta-outline:hover,
#hero .btn-get-started[style*="transparent"]:hover{
  background: #fff !important;
  color: var(--rrs-red) !important;
}

/* Tombol di section merah (.cta): Kontras tinggi di keadaan biasa dan hover */
.cta a{ color: #fff; }
.cta a.btn-get-started{
  background: #fff !important;
  color: var(--rrs-red) !important;
  border: 2px solid #fff !important;
}
.cta a.btn-get-started:hover{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.cta a.btn-get-started.btn-cta-outline,
.cta a.btn-get-started[style*="transparent"]{
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.cta a.btn-get-started.btn-cta-outline:hover,
.cta a.btn-get-started[style*="transparent"]:hover{
  background: #fff !important;
  color: var(--rrs-red) !important;
  border: 2px solid #fff !important;
}

/* ==========================================================================
   H03 HERO — Carousel slide foto penuh + overlay gradient
   ========================================================================== */
#hero {
  width: 100%;
  height: 100vh;
  min-height: 580px;
  background-color: #1a1a2e;
  overflow: hidden;
  position: relative;
}

#hero #heroCarousel,
#hero .carousel-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#hero .carousel-item {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  /* Foto slide TIDAK PERNAH terpotong dan TIDAK ada bar warna di sisi —
     gambar diregangkan penuh mengisi kotak (boleh sedikit gepeng kalau
     rasio foto tidak persis sama dengan kotak). */
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: block !important;
}

#hero .carousel-item.active {
  opacity: 1 !important;
  z-index: 1;
}

#hero .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,20,.35) 0%, rgba(10,10,20,.55) 50%, rgba(10,10,20,.82) 100%);
  z-index: 2;
}

#hero .container.hero-content-overlay,
#hero .container {
  background: transparent !important;
  border-top: none !important;
  max-width: 780px !important;
  margin-bottom: 0 !important;
  padding: 0 20px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  z-index: 5 !important;
  text-align: center !important;
}

#hero .container h2{
  color: #fff !important;
  font-size: 42px;
  font-weight: 800;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  margin-bottom: 16px;
}
#hero .container p{
  color: #f2f2f2 !important;
  max-width: 700px;
  margin: 0 auto 24px;
  font-size: 16px;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
#hero .container > div:not(.section-title){ position: relative; z-index: 5; }
#hero .container a[style*="underline"]{ text-shadow: 0 1px 6px rgba(0,0,0,.5); }

#hero .carousel-control-prev,
#hero .carousel-control-next {
  z-index: 6 !important;
}

#hero .carousel-indicators {
  z-index: 6 !important;
  bottom: 25px;
}

@media (max-width: 768px){
  #hero .container h2{ font-size: 26px; }
  #hero .container p{ font-size: 14px; }
  #hero .btn-get-started{ display: block; margin: 8px auto !important; max-width: 260px; padding: 10px 20px; }
}

/* ==========================================================================
   H07 Project Explorer — kartu modern
   ========================================================================== */
#proyek .card{
  border-radius: var(--rrs-radius) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 16px rgba(20,20,30,.06) !important;
}
#proyek .card:hover{ transform: translateY(-6px); box-shadow: 0 16px 32px rgba(20,20,30,.14) !important; }
#proyek .card-img-top{ border-radius: 0; }
#proyek .badge{
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: 6px 12px; border-radius: 20px;
}
#proyek .card-body .card-title{ font-weight: 700; font-size: 17px; color: var(--rrs-ink); margin: 10px 0 6px; }
#proyek .card-body .card-title a{ color: inherit; }
#proyek .card-text strong{ font-size: 20px; font-weight: 800; }
#proyek .card-footer{ display:flex; flex-wrap:wrap; gap:6px; background:#fff; }
#proyek .card-footer .btn{ border-radius: 20px; font-size: 12.5px; }
#proyek h4{ font-size: 19px; }

/* ---------- H04/H11 icon box ---------------------------------------------- */
.icon-box{ border-radius: var(--rrs-radius); transition: transform .25s ease, box-shadow .25s ease; }
.icon-box:hover{ transform: translateY(-4px); }

/* ---------- H13 Berita cards ----------------------------------------------- */
#contact .card{
  border: none; border-radius: var(--rrs-radius); overflow: hidden;
  box-shadow: 0 4px 16px rgba(20,20,30,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
#contact .card:hover{ transform: translateY(-6px); box-shadow: 0 16px 32px rgba(20,20,30,.12); }
#contact .card .card-body h3{ font-size: 18px; font-weight: 700; }
#contact .card .btn-success{ background: var(--rrs-red); border-color: var(--rrs-red); border-radius: 20px; }

/* ---------- H14 FAQ bernomor ------------------------------------------------ */
.rrs-faq-item{ display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--rrs-line); }
.rrs-faq-num{
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rrs-red); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.rrs-faq-item h5{ font-size: 15.5px; font-weight: 700; margin-bottom: 4px; color: var(--rrs-ink); }
.rrs-faq-item p{ font-size: 14px; color: var(--rrs-sub); margin: 0; }

/* ==========================================================================
   FLOATING BUTTONS — musik & chat, rapi di semua ukuran layar
   ========================================================================== */
#rrs-music-btn.rrs-needs-click{
  animation: rrs-music-pulse 1.6s infinite;
}
@keyframes rrs-music-pulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 0 rgba(192,57,43,.55); }
  50%{ box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 8px rgba(192,57,43,0); }
}
#rrs-music-label.rrs-resume-hint{ background: var(--rrs-red); }

@media (max-width:480px){
  #rrs-music-wrap{ bottom:172px; right:16px; }
  #rrs-music-label{ font-size:11px; padding:4px 9px; }
}

/* ---------- Folder Galeri (gaya Google Drive) ------------------------------ */
.rrs-folder-card{ transition: transform .2s ease, box-shadow .2s ease; border-radius: 10px; overflow: hidden; }
.rrs-folder-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* ---------- Mobile: rapikan tombol CTA & hero pada 375–480px -------------- */
@media (max-width: 480px){
  .section-title h2{ font-size: 22px; }
  #main > section{ padding: 40px 0; }
}

/* ==========================================================================
   MENU NAVIGASI DINAMIS — .rrs-dropdown
   Sengaja pakai class BARU (bukan .dropdown bawaan tema) supaya tidak
   bentrok dengan binding JS lama di main.js yang query .dropdown saat
   load (rapuh terhadap struktur menu dinamis). Toggle mobile ditangani
   sendiri lewat event delegation di footer.php (lihat #rrs-nav-script).
   Perilaku desktop & mobile direplikasi persis dari tema asli.
   ========================================================================== */
.navbar .rrs-dropdown ul{
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, .25);
  transition: .3s;
  border-radius: 4px;
}
.navbar .rrs-dropdown ul li{ min-width: 230px; border-top: 1px solid #f2f2f2; }
.navbar .rrs-dropdown ul li:first-child{ border-top: none; }
.navbar .rrs-dropdown ul a{
  padding: 11px 20px !important;
  font-size: 13.5px;
  text-transform: none;
  color: #444 !important;
  display: block !important;
}
.navbar .rrs-dropdown ul a:hover{ background: #fdf3f2; color: var(--rrs-red) !important; }
.navbar .rrs-dropdown:hover > ul{ opacity: 1; top: 100%; visibility: visible; }

@media (max-width: 991px){
  .navbar-mobile .rrs-dropdown ul{
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127,137,161,.25);
  }
  .navbar-mobile .rrs-dropdown ul li{ min-width: 200px; }
  .navbar-mobile .rrs-dropdown ul a{
    padding: 10px 20px !important;
    white-space: normal;
    color: #555 !important;
  }
  .navbar-mobile .rrs-dropdown ul a:hover{ color: var(--rrs-red) !important; }
  .navbar-mobile .rrs-dropdown > .rrs-dropdown-active{ display: block; }
}

/* ===== H01 Utility Bar =====
   - <p> dari konten CMS (TinyMCE selalu bungkus teks polos dengan <p>) masih
     bawa margin bawaan browser, bikin teksnya keliatan naik/turun dibanding
     ikon di sampingnya karena parent-nya flex+align-items:center ikut
     menghitung margin itu. Reset ke 0.
   - Tinggi topbar di mobile bisa berubah-ubah (teks wrap ke 2-3 baris
     tergantung panjang konten CMS), jadi offset #header TIDAK di-hardcode
     lewat media query (rawan pecah lagi kalau teksnya berubah) — diukur
     otomatis lewat JS di footer.php (lihat #rrs-topbar-offset-script) dan
     ditulis ke CSS variable --rrs-topbar-h di bawah ini. */
#topbar p,
#topbar span{ margin: 0; }
@media (max-width: 767px){
  #topbar{ height: auto; min-height: 40px; padding: 8px 0; line-height: 1.35; }
}
#header{ top: var(--rrs-topbar-h, 40px); }
#topbar.topbar-scrolled{ top: calc(var(--rrs-topbar-h, 40px) * -1); }
#header.header-scrolled{ top: 0; }

/* ===== Halaman Detail Berita (gaya artikel/majalah) ===== */
.rrs-artikel-cover{
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #eee;
}
.rrs-artikel-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px){
  .rrs-artikel-cover{ height: 220px; }
}
.rrs-artikel-kategori{
  display: inline-block;
  background: var(--rrs-red, #c0392b);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.rrs-artikel-judul{
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
  color: #222;
}
.rrs-artikel-meta{
  color: #888;
  font-size: 14px;
  margin-bottom: 4px;
}
.rrs-artikel-meta span{ margin-right: 18px; }
.rrs-artikel-meta i{ margin-right: 5px; color: var(--rrs-red, #c0392b); }
.rrs-artikel-isi{
  font-size: 17px;
  line-height: 1.9;
  color: #333;
}
.rrs-artikel-isi p{ margin-bottom: 1.2em; }
.rrs-artikel-isi img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.rrs-artikel-isi h1,
.rrs-artikel-isi h2,
.rrs-artikel-isi h3,
.rrs-artikel-isi h4{
  margin-top: 1.4em;
  margin-bottom: .6em;
  font-weight: 700;
}
/* ===== FAQ Accordion ===== */
.rrs-faq-accordion .accordion-item{
  border: none;
  border-bottom: 1px solid #eee;
  border-radius: 0;
}
.rrs-faq-accordion .accordion-item:first-of-type,
.rrs-faq-accordion .accordion-item:last-of-type{ border-radius: 0; }
.rrs-faq-accordion .accordion-button{
  font-weight: 700;
  font-size: 16px;
  color: #222;
  padding: 18px 4px;
  background: transparent;
  box-shadow: none;
}
.rrs-faq-accordion .accordion-button:not(.collapsed){
  color: var(--rrs-red, #c0392b);
  background: transparent;
  box-shadow: none;
}
.rrs-faq-accordion .accordion-button:focus{ box-shadow: none; }
.rrs-faq-accordion .accordion-button::after{
  flex-shrink: 0;
}
.rrs-faq-accordion .accordion-body{
  padding: 0 4px 20px;
  color: #555;
  line-height: 1.8;
  font-size: 15px;
}

/* ===== Tombol "Baca Selengkapnya" di kartu berita ===== */
.rrs-baca-selengkapnya{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rrs-red, #c0392b);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-top: 4px;
}
.rrs-baca-selengkapnya i{
  transition: transform .2s;
}
.rrs-baca-selengkapnya:hover{
  color: #8e2a1f;
}
.rrs-baca-selengkapnya:hover i{
  transform: translateX(4px);
}

.rrs-sidebar-judul{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #222;
}
.rrs-sidebar-judul:hover{ color: var(--rrs-red, #c0392b); }
.rrs-artikel-isi blockquote{
  border-left: 4px solid var(--rrs-red, #c0392b);
  background: #fafafa;
  padding: 12px 20px;
  margin: 1.5em 0;
  font-style: italic;
  color: #555;
}

/* ===== Halaman statis dengan logo/gambar (gaya koran: gambar mengambang di kiri) ===== */
/* Mobile-first: logo tampil penuh di atas, teks mengalir di bawahnya (tanpa float) */
.rrs-halaman-koran img.rrs-halaman-gambar{
  float: none;
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 20px auto;
  border-radius: 8px;
}
/* Desktop/tablet: logo lebih besar & mengambang di kiri, teks membungkus di sampingnya */
@media (min-width: 768px){
  .rrs-halaman-koran img.rrs-halaman-gambar{
    float: left;
    width: 420px;
    max-width: 48%;
    margin: 0 32px 20px 0;
  }
}
.rrs-halaman-koran::after{ content:""; display:block; clear:both; }

.page-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2em auto;
  border-radius: 8px;
}

/* ===== Kartu Mitra & Lembaga ===== */
.rrs-mitra-card{
  background: #fff;
  border-radius: 12px;
  padding: 28px 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.rrs-mitra-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.rrs-mitra-logo{
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.rrs-mitra-logo img{
  max-height: 90px;
  max-width: 100%;
  object-fit: contain;
}
.rrs-mitra-nama{
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}
.rrs-mitra-jenis{
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rrs-mitra-alamat{
  font-size: 12.5px;
  color: #777;
  margin: 10px 0 0;
  line-height: 1.5;
}
.rrs-mitra-website{
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rrs-red, #c0392b);
}
.rrs-mitra-website:hover{ text-decoration: underline; }