/* =====================================================================
   TEMA MERAH-HIJAU + BATIK + BENDERA  (template4 / Beranda)
   Hanya CSS & dekorasi. Tidak menyentuh data / database.
   Muat file ini PALING AKHIR di @section('css') (setelah semua <style>).
   ===================================================================== */
:root{
  --merah:#C8102E; --merah-tua:#8E0B20; --merah-gelap:#5E0614;
  --hijau:#C8102E; --hijau-tua:#8E0B20;
  --emas:#F2C94C; --garis:#F1E2DE;
  --merah-muda:#FDECEE; --hijau-muda:#FDECEE;
  --radius:22px; --shadow:0 16px 44px rgba(142,11,32,.12);
  --grad-merah:linear-gradient(135deg,var(--merah),var(--merah-tua));
  --grad-hijau:linear-gradient(135deg,var(--hijau),var(--hijau-tua));
  /* Batik motif Kawung (putih untuk latar gelap, merah untuk latar terang) */
  --batik-putih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' opacity='.55'%3E%3Cellipse cx='20' cy='10' rx='5' ry='10'/%3E%3Cellipse cx='20' cy='30' rx='5' ry='10'/%3E%3Cellipse cx='10' cy='20' rx='10' ry='5'/%3E%3Cellipse cx='30' cy='20' rx='10' ry='5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
  --batik-merah:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23C8102E' stroke-width='1' opacity='.5'%3E%3Cellipse cx='20' cy='10' rx='5' ry='10'/%3E%3Cellipse cx='20' cy='30' rx='5' ry='10'/%3E%3Cellipse cx='10' cy='20' rx='10' ry='5'/%3E%3Cellipse cx='30' cy='20' rx='10' ry='5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23C8102E'/%3E%3C/svg%3E");
}

/* ---------- Bendera & pita batik ---------- */
.tpl4-flag-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.tpl4-flag{display:inline-block;width:34px;height:23px;border-radius:3px;
  background:linear-gradient(180deg,#E70011 50%,#fff 50%);
  box-shadow:0 3px 10px rgba(0,0,0,.35);transform-origin:left center;animation:tpl4Wave 3s ease-in-out infinite}
@keyframes tpl4Wave{0%,100%{transform:perspective(200px) rotateY(0)}50%{transform:perspective(200px) rotateY(-14deg)}}
.tpl4-batik-band{height:30px;background:var(--grad-merah);position:relative;border-bottom:4px solid var(--hijau)}
.tpl4-batik-band::before{content:"";position:absolute;inset:0;background:var(--batik-putih) repeat-x center/auto 30px;opacity:.55}
.tpl4-batik-band.is-green{background:var(--grad-hijau);border-bottom-color:var(--merah)}

/* ---------- Hero ---------- */
.tpl4-hero .carousel-item::before{
  background:linear-gradient(180deg,rgba(142,11,32,.9) 0%,rgba(110,10,28,.85) 55%,rgba(142,11,32,.92) 100%)}
.tpl4-hero .carousel-item::after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--batik-putih) repeat;opacity:.12;pointer-events:none}
.tpl4-hero-title span{color:var(--emas)}
.tpl4-hero-search .search-content-button{background:var(--grad-hijau)}
.tpl4-hero-search .search-content-button:hover{background:var(--hijau-tua)}
.tpl4-hero-quicklinks a:hover{background:var(--hijau);border-color:var(--hijau)}
.tpl4-hero .carousel-control-prev:hover,.tpl4-hero .carousel-control-next:hover{background:var(--hijau)}

/* ---------- Running text ---------- */
#tpl4-running-text .tpl4-rt-bar{box-shadow:var(--shadow);border-color:var(--garis)}
#tpl4-running-text .tpl4-rt-label{background:var(--grad-hijau)}
#tpl4-running-text .tpl4-rt-label::after{background:var(--hijau-tua)}
#tpl4-running-text .tpl4-rt-item i{color:var(--merah)!important}
#tpl4-running-text .tpl4-rt-item:hover{color:var(--hijau)!important}
#tpl4-running-text .tpl4-rt-sep{background:var(--hijau)}

/* ---------- Judul seksi (seragam) ---------- */
.lip-eyebrow,.tpl4-section-label,.pres-eyebrow{background:var(--merah-muda)!important;color:var(--merah)!important;
  border:1px solid #f6c9d0}
#tpl4-layanan-informasi .lip-title,#tpl4-statistik .tpl4-section-title,.tpl4-section-title,.pres-title{
  color:#2b2b2b;position:relative;padding-bottom:16px}
.lip-title::after,.tpl4-section-title::after,.pres-title::after{content:"";display:block;width:90px;height:8px;margin:12px auto 0;
  background:var(--batik-merah) repeat-x center/auto 8px;border-top:3px solid var(--hijau)}
.tpl4-profil-grid .tpl4-section-title::after{margin-left:0}

/* ---------- Layanan & Informasi ---------- */
#tpl4-layanan-informasi .lip-box{border-color:var(--garis);box-shadow:var(--shadow);border-radius:var(--radius)}
#tpl4-layanan-informasi .lip-box::before{width:340px;height:340px;background:var(--batik-merah) repeat;opacity:.35;
  border-radius:0 var(--radius) 0 100%;-webkit-mask-image:linear-gradient(225deg,#000,transparent 70%);mask-image:linear-gradient(225deg,#000,transparent 70%)}
#tpl4-layanan-informasi .lip-sidebar-item{background:#fcf7f6}
#tpl4-layanan-informasi .lip-sidebar-item .lip-tab-ico{color:var(--hijau)}
#tpl4-layanan-informasi .lip-sidebar-item .lip-tab-count{background:var(--hijau-muda);color:var(--hijau-tua)}
#tpl4-layanan-informasi .lip-sidebar-item:hover{border-color:#f0c4cb}
#tpl4-layanan-informasi .lip-sidebar-item.active{background:var(--grad-merah);box-shadow:0 12px 26px rgba(142,11,32,.35)}
#tpl4-layanan-informasi .lip-item-row,#tpl4-layanan-informasi .lip-card{border-color:var(--garis);border-radius:var(--radius)}
#tpl4-layanan-informasi .lip-item-row::before{background:linear-gradient(90deg,var(--merah),var(--hijau))}
#tpl4-layanan-informasi .lip-item-row:hover,#tpl4-layanan-informasi .lip-card:hover{border-color:#efb7c0;box-shadow:0 18px 38px rgba(142,11,32,.18)}
#tpl4-layanan-informasi .lip-item-icon{background:linear-gradient(135deg,var(--merah-muda),var(--hijau-muda));color:var(--merah)}
#tpl4-layanan-informasi .lip-item-row:hover .lip-item-icon{background:var(--grad-hijau);color:#fff}
#tpl4-layanan-informasi .lip-item-cta{color:var(--hijau);border-top-color:#f6c9d0}
#tpl4-layanan-informasi .lip-item-cta i{background:var(--hijau-muda)}
#tpl4-layanan-informasi .lip-item-row:hover .lip-item-cta i{background:var(--hijau)}
#tpl4-layanan-informasi .lip-card-icon{background:#fcf7f6}
#tpl4-layanan-informasi .lip-link-more{background:var(--grad-hijau);box-shadow:0 10px 24px rgba(142,11,32,.3)}
.info-layanan-expand .modal-header{background:var(--grad-merah);position:relative}
.info-layanan-expand .modal-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--batik-putih) repeat-x/auto 6px;opacity:.6}

/* ---------- Kalender ---------- */
#tpl4-kalender .kal-day.is-today{background:var(--grad-merah)!important;box-shadow:0 6px 16px rgba(142,11,32,.4)}
#tpl4-kalender .kal-day.has-event{color:var(--hijau-tua);font-weight:800}
#tpl4-kalender .kal-today-btn{color:var(--merah);border-color:#f0c4cb}
#tpl4-kalender .kal-today-btn:hover{background:var(--merah)}
#tpl4-kalender .kal-live-badge{background:var(--hijau-muda);color:var(--hijau-tua)}
#tpl4-kalender .kal-live-dot,#tpl4-kalender .kal-live-badge i{background:var(--hijau)}
.kal-card,.kal-detail-card,.kal-list-item{border-radius:var(--radius);border:1px solid var(--garis);box-shadow:var(--shadow)}
.kal-detail-btn{background:var(--grad-hijau)!important;color:#fff!important;border-radius:50px}
.kal-list-badge,.kal-detail-badge{background:var(--merah)!important;color:#fff!important}

/* ---------- Statistika ---------- */
#tpl4-statistik{background:linear-gradient(180deg,#fff 0%,#fdf4f3 100%)}
#tpl4-statistik::before{width:420px;height:420px;border-radius:0;background:var(--batik-merah) repeat;opacity:.3;
  -webkit-mask-image:radial-gradient(circle at 0 0,#000,transparent 70%);mask-image:radial-gradient(circle at 0 0,#000,transparent 70%)}
#tpl4-statistik .sgm-map-card,#tpl4-statistik .tpl4-stat-card{border-color:var(--garis);box-shadow:var(--shadow)}
#tpl4-statistik .sgm-map-wrap{background:radial-gradient(circle at 50% 40%,#fffafa,#f6ece9)}
#tpl4-statistik .sgm-district{fill:#f6c9d0}
#tpl4-statistik .sgm-district:hover{fill:#e8737f;filter:drop-shadow(0 6px 10px rgba(142,11,32,.3))}
#tpl4-statistik .sgm-district.active{fill:var(--merah);filter:drop-shadow(0 10px 16px rgba(142,11,32,.45))}
#tpl4-statistik .sgm-center-dot{stroke:var(--merah-tua)}
#tpl4-statistik .sgm-legend-swatch{background:#f6c9d0}
#tpl4-statistik .sgm-legend-item.active{background:var(--grad-merah);box-shadow:0 8px 18px rgba(142,11,32,.3)}
#tpl4-statistik .sgm-legend-item.active .sgm-legend-swatch{background:var(--emas)}
#tpl4-statistik .sgm-info-card{background:linear-gradient(145deg,var(--hijau),var(--hijau-tua));box-shadow:0 24px 50px rgba(142,11,32,.35)}
#tpl4-statistik .sgm-info-card::after{width:100%;height:100%;right:0;bottom:0;border-radius:0;background:var(--batik-putih) repeat;opacity:.1}
#tpl4-statistik .sgm-bar-fill{background:var(--emas)}
#tpl4-statistik .sgm-bar-fill-blue{background:#fff}
#tpl4-statistik .tpl4-stat-card::before{background:linear-gradient(90deg,var(--merah),var(--hijau))}
#tpl4-statistik .tpl4-stat-icon{background:linear-gradient(135deg,var(--merah-muda),var(--hijau-muda));color:var(--merah)}
#tpl4-statistik .tpl4-stat-card:hover .tpl4-stat-icon{background:var(--grad-hijau);color:#fff}
#tpl4-statistik .tpl4-stat-num{color:var(--merah-tua)}

/* ---------- Komponen lain di index.css (best-effort) ---------- */
.color-red-theme{color:var(--merah)!important}
.tpl4-btn-primary,.polling-popup-btn,.pres-card-btn,.insta-visit-btn,.btn-portal-berita{background:var(--grad-hijau)!important;color:#fff!important;border:0!important}
.tpl4-berita-badge,.tpl4-berita-card-cat,.tpl4-berita-aside-cat{color:#fff;background:var(--merah)}
.tpl4-berita-card-cat,.tpl4-berita-aside-cat{background:none;color:var(--merah)}
.tpl4-berita-tab.active{color:var(--merah)!important;border-color:var(--merah)!important}
.tpl4-profil-tab.active{background:var(--grad-merah)!important;color:#fff!important}
.btn-kategori-berita.active,.btn-galeri-filter.active,.btn-rubrik-masyarakat.active{background:var(--grad-merah)!important;color:#fff!important;border-color:transparent!important}
.rubrik-masyarakat-container{background:var(--grad-merah)!important;position:relative}
.rubrik-masyarakat-container::before{content:"";position:absolute;inset:0;background:var(--batik-putih) repeat;opacity:.1;pointer-events:none}
.rubrik-masyarakat-container>.container{position:relative}
.pres-section{background:linear-gradient(180deg,#fff,#fdf4f3)}
.pres-card-badge{background:var(--grad-merah)!important}
.pres-card-meta i,.kontak-kami .border-card i{color:var(--hijau)!important}
.pres-nav{background:var(--grad-merah)!important;color:#fff!important}
.bg-kontak-kami{background:var(--grad-merah)!important;position:relative}
.bg-kontak-kami::before{content:"";position:absolute;inset:0;background:var(--batik-putih) repeat;opacity:.1;pointer-events:none}
.bg-kontak-kami .container{position:relative}
.slider-link-sosmet{background:var(--grad-hijau)!important;border-top:5px solid var(--merah)}
.social-icon-btn{background:#fff!important;color:var(--merah)!important}
.social-icon-btn:hover{background:var(--merah)!important;color:#fff!important}
.mahardika-floating-player{background:var(--grad-hijau)!important;border:2px solid #fff}
.mp-play-btn{background:var(--merah)!important;color:#fff!important}

/* ---------- Popup polling ---------- */
.tpl4-poll-box{border-color:var(--garis);border-radius:var(--radius);border-top:6px solid var(--merah)}
.tpl4-poll-x:hover{color:var(--merah)}
.polling-scale-circle{border-color:var(--merah)}
.polling-scale-item input:checked+.polling-scale-circle{background:var(--grad-merah)!important;color:#fff}

/* ---------- Konsistensi spasi antar seksi ---------- */
.tpl4-section{padding-top:56px;padding-bottom:56px}
@media(max-width:575px){.tpl4-section{padding-top:36px;padding-bottom:36px}.tpl4-flag{width:28px;height:19px}}

/* ---------- Ganti sisa warna biru (dari CSS lama) -> MERAH ---------- */
.link-click:hover *{color:var(--merah)!important}
.text-blue{color:var(--merah)!important}
.p1 a.is-active-blue{background-color:var(--merah);border:1px solid var(--merah);color:#fff}


/* =====================================================================
   OVERRIDE GLOBAL: SEMUA HIJAU & BIRU -> MERAH
   Pakai "body" + !important supaya menang atas CSS halaman lain
   (list-berita.css, album.css, list-agenda.css, berita.css, dll).
   Muat page.css PALING AKHIR di @section('css') / layout.
   ===================================================================== */
:root{
  /* variabel template4/header-footer */
  --tpl1-red:#C8102E; --tpl1-red-dark:#8E0B20; --tpl1-red-light:rgba(200,16,46,.14); --tpl1-navy-light:#A30D26;
  /* variabel album / playlist / agenda / opd */
  --alb-blue:#C8102E; --alb-blue-dark:#5E0614; --alb-blue-tint:#FDECEE;
  --pl-blue:#C8102E;  --pl-blue-dark:#5E0614;  --pl-blue-tint:#FDECEE;
  --album-blue:#C8102E; --album-blue-dark:#8E0B20; --album-blue-darker:#5E0614;
  --album-blue-light:#FDECEE; --album-blue-soft:#F6C9D0;
  --opd-blue:#F6C9D0; --opd-blue-accent:#C8102E;
}

/* Teks & link */
body .text-blue,
body .text-primary,
body .text-info,
body .text-success,
body .text-danger-blue,
body .color-blue-theme,
body .headers-banner .text-blue,
body .headers-banner .breadcrumb.navigate-menu .text-blue,
body .text-blue.font-weight-bold{color:#C8102E!important}
body .link-click:hover *,
body .card-customes .link-title:hover h5,
body .link-title:hover .card-title{color:#C8102E!important}
body a.text-primary:hover,body a.text-info:hover,body a.text-success:hover{color:#8E0B20!important}

/* Background Bootstrap */
body .bg-primary,body .bg-info,body .bg-success{background-color:#C8102E!important}
body .border-primary,body .border-info,body .border-success{border-color:#C8102E!important}

/* Tombol Bootstrap */
body .btn-primary,body .btn-info,body .btn-success,
body .table .btn-danger,body .btn-blue-rounded,body .btn-portal-login{
  background-color:#C8102E!important;border-color:#C8102E!important;color:#fff!important}
body .btn-primary:hover,body .btn-info:hover,body .btn-success:hover,
body .table .btn-danger:hover,body .btn-blue-rounded:hover,body .btn-portal-login:hover{
  background-color:#8E0B20!important;border-color:#8E0B20!important;color:#fff!important}
body .btn-outline-primary,body .btn-outline-info,body .btn-outline-success{color:#C8102E!important;border-color:#C8102E!important}
body .btn-outline-primary:hover,body .btn-outline-info:hover,body .btn-outline-success:hover{background-color:#C8102E!important;color:#fff!important}

/* Tombol "Baca" / "Pause" & navigasi kategori */
body .btn-berita-action,
body .btn-portal-berita-nav{border-color:#C8102E!important}
body .btn-berita-action:hover,body .btn-berita-action:focus,
body .btn-portal-berita-nav:hover{background-color:#C8102E!important;border-color:#C8102E!important;color:#fff!important}
body .btn-kategori-berita.active,body .btn-nav-kategori:hover{background:#C8102E!important;border-color:#C8102E!important;color:#fff!important}

/* Pagination */
body .pagination .page-link{color:#C8102E!important;border-color:#F6C9D0!important}
body .pagination .page-item.active .page-link,
body .pagination.p1 .page-item.active a.text-15.is-active,
body .p1 a.is-active-blue{background-color:#C8102E!important;border:1px solid #C8102E!important;color:#fff!important}
body .pagination .page-link:hover{background-color:#FDECEE!important;color:#8E0B20!important}

/* Banner halaman (garis & latar) */
body .headers-banner .gray-line,body .gray-line{background:#C8102E!important}
body .headers-banner .bg-gray-img{background-color:#FDECEE}
body .headers-banner .breadcrumb.navigate-menu a:hover{color:#C8102E!important}

/* Kartu, kalender, sidebar (album / agenda / playlist) */
body .calendar-container .header{background:linear-gradient(135deg,#C8102E,#8E0B20)!important}
body .calendar-container .body .date{color:#C8102E!important}
body .calendar-container{border-color:#F6C9D0!important}
body .card-customes{border-color:#F6C9D0!important}
body .card-customes.tab-item-transition:hover{border-color:#C8102E!important}
body .alb-card-fold{border-color:transparent #C8102E transparent transparent!important}
body .alb-cc-btn:hover,body .pl-cc-btn:hover,body .pl-card:hover .pl-play-btn{background:#C8102E!important}
body .alb-hero,body .pl-hero{background:linear-gradient(160deg,#5E0614 0%,#8E0B20 55%,#C8102E 130%)!important}

/* Peta statistik & elemen hijau/biru yang hardcoded */
body #tpl4-statistik .sgm-district{fill:#f6c9d0!important}
body #tpl4-statistik .sgm-district:hover{fill:#e8737f!important}
body #tpl4-statistik .sgm-legend-swatch{background:#f6c9d0!important}