/* ============================================================
   kbd-modern-desktop.css
   ------------------------------------------------------------
   Lapisan CSS TAMBAHAN untuk kalenderbali.org (versi desktop),
   ditempel DI ATAS kalenderbaru.css tanpa mengubah HTML/PHP.
   Sama prinsipnya dengan kbd-modern.css di m.kalenderbali.org:
   additive, tidak menghapus/mengganti rule lama, hanya menimpa
   sebagian nilai supaya tampilan terasa lebih modern.

   Catatan: halaman index.php desktop ini otomatis redirect ke
   m.kalenderbali.org kalau diakses dari HP (lihat detect_hp.php
   di index.php baris 39-54) -- jadi file ini TIDAK perlu
   responsive untuk layar HP, cukup fokus memperhalus tampilan
   untuk layar desktop/laptop.
   ============================================================ */

:root {
  --kbd-navy: #073A61;
  --kbd-navy-dark: #052840;
  --kbd-yellow: #FFE066;
  --kbd-bg-soft: #EEF2F6;
  /* Tinggi standar select/input/tombol di SEMUA halaman -- dipakai baik
     oleh form tanggal di kalender.php (bagian #isiKalender) maupun form
     di halaman lain (rerainan, formwara, formdewasa, pilihdewasa, dst),
     supaya semua kontrol form di seluruh situs seragam tingginya. */
  --kbd-ctrl-padding: 6px 10px;
  --kbd-ctrl-font-size: 13px;
}

/* --- 1. Latar belakang halaman: dari abu-abu datar (#939393) jadi
   gradasi lembut bernuansa navy, lebih modern & tidak "polos" --- */
html, body {
  background: linear-gradient(180deg, #DCE4EC 0%, #C6D2DE 100%) !important;
  background-attachment: fixed !important;
}

/* --- 2. Container utama: shadow lebih halus + sudut membulat,
   terasa seperti "card" modern, bukan kotak tegas lama --- */
div#container {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(7, 58, 97, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
/* rerainan.php: div#container di sini isinya cuma tabel daftar +
   nav pil bawah (table.judulmenu1), BUKAN layout 3 kolom index.php/
   kalender.php -- jadi aman dilebarkan khusus di sini lewat :has().
   kalender.css lama membatasi lebar #container jadi sempit (kira2
   ikut lebar tabel 800px di dalamnya), sehingga nav pil kebagian
   ruang sempit dan labelnya kepaksa pecah 2 baris di tempat yang
   janggal (mis. "Kalender" / "Bali" saja). Diberi lebar eksplisit
   supaya konsisten sama lega dengan formwara.php. */
div#container:has(table.judulmenu1) {
  width: 100% !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* #container di halaman ini membungkus tabel daftar (putih, lewat
     bgcolor="#FFFFFF" langsung di HTML-nya) SEKALIGUS nav pil di
     bawahnya sebagai dua tabel bersaudara -- kalau #container sendiri
     ikut berwarna putih (peninggalan kalender.css lama), area kosong
     di sekitar/ di belakang nav pil ikut putih juga, jadi nav pil
     terlihat masih "menempel" di kotak putih, bukan mengambang bebas
     di atas gradasi halaman seperti di formwara.php. Dipaksa transparan
     di sini supaya nav pil terlihat lepas dari kartu putih di atasnya,
     senada formwara.php. */
  background: transparent !important;
  /* Lebar #container ini sengaja dilebarkan (960px) demi nav pil di
     bawah -- tapi kartu putihnya sendiri (tabel daftar) TETAP di lebar
     aslinya (800px, dari atribut HTML), tidak ikut melebar. Kalau
     #container sendiri masih tampil sebagai "kotak" terpisah (sudut
     membulat + shadow + border dari rule dasar div#container di atas),
     hasilnya jadi 2 kotak bersarang yang kelihatan -- kotak besar
     960px, kotak putih kecil 800px di dalamnya, dengan celah/garis
     tepi kotak besar yang janggal. Makanya "bingkai kotak" #container
     sendiri dinetralkan total di sini (dibuat sama seperti background
     polos halaman, tanpa sudut membulat/shadow/border sendiri) --
     yang tersisa cuma kartu putih 800px, mengambang langsung di atas
     gradasi halaman, seperti aslinya. */
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

/* --- 3. Header section (DAFTAR RERAINAN, HARI-HARI PENTING,
   BAHAN RENUNGAN, ALA-AYUNING DEWASA) -- ini di-styling lewat
   inline style di HTML (background-color:#073A61 dst), jadi
   perlu selector struktural + !important untuk menimpanya tanpa
   ubah PHP. Ditambah letter-spacing & sedikit gradasi supaya
   terasa seperti "label section" modern. --- */
/* Di-scope ke "#container ..." (bukan cuma "#left-sidebar ...") karena
   id "left-sidebar"/"midlle-content"/"right-sidebar" ternyata dipakai
   ulang di beberapa halaman lain (mis. kepribadian.php) dengan struktur
   & pembungkus BERBEDA (id="container1", bukan "container") -- tanpa
   scope ini rule "header section" di bawah bisa salah kena paragraf
   biasa di halaman lain, bukan cuma header section index.php */
#container #left-sidebar > div:first-child,
#container #midlle-content > div:first-child,
#container #midlle-content > div:nth-child(4),
#container #right-sidebar > div:first-child {
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
  letter-spacing: 0.5px;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  font-size: 13px !important;
}

/* --- 3b. Isi tiap section (di bawah DAFTAR RERAINAN, HARI-HARI
   PENTING, BAHAN RENUNGAN, ALA-AYUNING DEWASA): dari abu-abu
   (#ECF0F3, inline style lama) jadi putih bersih. Header section
   sendiri (rule #3 di atas) tetap navy karena di-scope ke
   "> div:first-child" / "nth-child(4)" dengan !important, jadi
   aman ditimpa di sini tanpa bentrok. Ikut disamakan putih juga
   #container & #contentimage (pembungkus langsung ketiga kolom) --
   kalau cuma kolomnya yang diputihkan sementara pembungkusnya
   masih abu-abu, tinggi kolom kiri/tengah/kanan yang tidak sama
   persis (float, bukan flex) bikin sisa abu-abu "ngintip" tipis
   di bagian bawah kolom yang lebih pendek, jadi kurang bersih. */
#container,
#container #contentimage,
#container #left-sidebar,
#container #midlle-content,
#container #right-sidebar {
  background-color: #FFFFFF !important;
}

/* --- 4. Isi tiap section: sedikit padding ekstra & line-height
   lebih lega supaya tidak terasa sesak --- */
#left-sidebar .foresmall,
#midlle-content .foresmall,
#right-sidebar .foresmall {
  line-height: 145% !important;
}

/* --- 5. Link di dalam konten: transisi warna halus saat hover,
   bukan langsung "lompat" warna --- */
.foresmall a:link,
.foresmall a:visited {
  transition: color 0.15s ease;
}

/* --- 6. Sidebar kiri & kanan: pemisah antar kolom yang lebih
   halus (garis tipis abu-abu transparan, bukan solid navy tebal) --- */
div#left-sidebar {
  border-right: 1px solid rgba(7, 58, 97, 0.15) !important;
}
div#right-sidebar {
  border-left: 1px solid rgba(7, 58, 97, 0.15) !important;
}

/* --- 7. Footer: selaraskan sudut membulat dengan container, dan
   rapikan jarak antar baris copyright kiri/kanan --- */
div#footer {
  border-top: none !important;
  padding: 12px 16px !important;
  height: auto !important;
  overflow: hidden !important; /* clearfix: barisstatus di dalamnya pakai float,
                                   tanpa ini tinggi footer collapse ke 0 dan
                                   kena potong overflow:hidden di div#container */
}
div#footer::after {
  content: "";
  display: table;
  clear: both;
}
div#footer .barisstatus {
  padding: 6px 4px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #E8EEF4 !important;
}
div#footer {
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
}

/* --- 8. Blok AdSense: beri sedikit padding/border halus supaya
   tidak menempel mentah ke konten sekitarnya --- */
#right-sidebar > div[style*="min-width: 300px"] {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ============================================================
   BAGIAN TABEL KALENDER (kalender.php) -- dibungkus #isiKalender
   di index.php, jadi semua selector di bawah ini di-scope ke situ
   supaya tidak "bocor" ke elemen lain di halaman.
   ============================================================ */

#isiKalender table {
  border-collapse: separate;
  /* Tabel aslinya pakai cellspacing="1" bgcolor="#999999" (trik border
     lama: celah antar sel diisi warna abu gelap). Di sini border-spacing
     CSS menimpa cellspacing HTML, dan background-color di bawah ini yang
     "mengecat" celah itu jadi abu lembut (bukan #999999 gelap) --
     jadi cukup SATU sumber garis pemisah, bukan dobel dengan border
     per sel. */
  border-spacing: 1px;
  background-color: #CCCCCC !important;
  margin: 0 auto;
}

/* Tabel aslinya punya cellpadding="5" (atribut HTML, berlaku ke SEMUA
   sel) yang bikin setiap baris jadi tinggi. CSS padding di sini
   menimpanya jadi lebih ringkas -- baris judulkalender/wewaran yang
   butuh padding sendiri sudah punya rule override terpisah di bawah,
   jadi tidak kena angka ini. */
#isiKalender td {
  padding: 3px !important;
}

/* --- 9. Header judul (baris Caka + form pilih tanggal + nama bulan):
   gradasi navy + sudut membulat di ujung atas, senada dengan header
   section lain di halaman --- */
#isiKalender .judulkalender {
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
  border: none !important;
  padding: 8px 6px !important;
}
#isiKalender tr:first-child td.judulkalender:first-child { border-top-left-radius: 10px; }
#isiKalender tr:first-child td.judulkalender:last-child { border-top-right-radius: 10px; }

/* Form pemilih tanggal (select hari/bulan, input tahun, tombol OK):
   dari gaya kotak "outset" 3D lama jadi flat modern, transparan di
   atas latar navy */
#isiKalender select,
#isiKalender input.inputindex {
  background-color: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 6px !important;
  padding: var(--kbd-ctrl-padding) !important;
  font-size: var(--kbd-ctrl-font-size) !important;
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
/* Tombol OK: sebelumnya kuning mencolok (--kbd-yellow), diganti warna
   yang senada baris Wuku/Bhatara & Ingkel (#E7ECF2) supaya lebih halus */
#isiKalender input.inputindex[type="submit"] {
  background-color: #E7ECF2 !important;
  color: var(--kbd-navy) !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  padding: var(--kbd-ctrl-padding) !important;
  font-size: var(--kbd-ctrl-font-size) !important;
}

/* Form pilih tanggal (baris Caka .. nama bulan) ada di kolom tengah
   yang sempit (td colspan=4 width="300", di dalam #contentimage yang
   cuma 660px) -- 2 select + 1 input teks + tombol OK dengan ukuran
   standar (--kbd-ctrl-padding/--kbd-ctrl-font-size) kadang kepanjangan
   dan bikin tombol OK terdorong ke baris baru. Dikecilkan khusus di
   sini (lebih spesifik dari rule di atas, jadi menang) supaya kembali
   muat 1 baris seperti sebelumnya -- form lain di luar #isiKalender
   tidak kena, tetap pakai ukuran standar. */
#isiKalender form[name="inputtgl"] select,
#isiKalender form[name="inputtgl"] input.inputindex {
  padding: 3px 5px !important;
  font-size: 12px !important;
}

/* Daftar pilihan (option) saat dropdown select diklik/dibuka: browser
   selalu render list-nya dengan latar putih milik OS, terlepas dari
   warna yang di-set pada <select> itu sendiri. Kalau tidak di-set
   sendiri, teks putih (warisan dari style select di atas) jadi tidak
   kebaca di atas latar putih itu -- makanya perlu warna eksplisit di
   sini, terpisah dari style kotak select saat tertutup. */
#isiKalender select option {
  color: var(--kbd-navy) !important;
  background-color: #FFFFFF !important;
}

/* --- 10. Baris nama hari (Minggu-Sabtu) & header kolom Wuku/Ingkel --- */
#isiKalender .hari,
#isiKalender .judulwuku,
#isiKalender .judulingkel {
  background-color: var(--kbd-navy) !important;
  letter-spacing: 0.3px;
}

/* --- 11. Kolom Wuku & Ingkel: warna lembut, teks jelas, bukan navy
   pekat seperti sebelumnya --- */
#isiKalender .wuku,
#isiKalender .ingkel {
  background-color: #E7ECF2 !important;
  color: var(--kbd-navy) !important;
}
#isiKalender .wuku a, #isiKalender .wuku a:link, #isiKalender .wuku a:visited,
#isiKalender .ingkel a, #isiKalender .ingkel a:link, #isiKalender .ingkel a:visited {
  color: var(--kbd-navy) !important;
}

/* Font baris Ingkel disamakan dengan Wuku/Bhatara (Trebuchet MS),
   sebelumnya Ingkel pakai Courier New (monospace) dari kalenderbaru.css
   -- beda gaya dengan kolom Wuku di sebelahnya */
#isiKalender .ingkel,
#isiKalender .judulingkel {
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif !important;
}

/* Tambahan jarak antara baris nama Wuku dan baris nama Bhatara yang
   ditumpuk (dipisah <br>) di tiap sel kolom Wuku, supaya tidak
   berdempetan */
#isiKalender .wuku,
#isiKalender .judulwuku {
  line-height: 145% !important;
}

/* Baris Ingkel dibuat sedikit lebih tinggi dari sel tanggal biasa
   (padding default #isiKalender td terlalu mepet untuk baris ini) */
#isiKalender .ingkel,
#isiKalender .judulingkel {
  padding: 7px 6px !important;
}

/* --- 12. Panel Wewaran (info di sisi tabel): rapikan jarak antar baris --- */
#isiKalender .wewaran {
  background-color: var(--kbd-navy) !important;
  padding: 10px 8px !important;
}
#isiKalender .wewaran a, #isiKalender .wewaran a:link, #isiKalender .wewaran a:visited {
  color: #FFFFFF !important;
}

/* --- 13. Sel tanggal (bulan berjalan/bulan lain/libur): background
   lembut & konsisten, bukan abu-kebiruan pekat seperti sebelumnya --- */
#isiKalender td.bodikalender,
#isiKalender td.takaktif,
#isiKalender td.libur,
#isiKalender td.aktif,
#isiKalender td.liburaktif {
  background-color: #FFFFFF !important;
  border: none;
}
/* Tanggal "tidak aktif" (bulan sebelum/sesudah): background disamakan
   putih dengan sel tanggal biasa, cukup warna font yang dibuat kabur
   (lihat rule .takaktif div a di bawah) supaya bedanya tetap terlihat
   tanpa background abu terpisah */

/* Tanda kurung "(" ")" penanda hari fakultatif dipakai lewat <span> yang
   kebetulan memakai nama class yang sama dengan class sel (takaktif,
   libur, liburaktif) -- sama persis dengan bug yang sudah kita perbaiki
   di m.kalenderbali.org, jadi langsung ditangani di sini juga */
#isiKalender table div span {
  background: transparent !important;
}

/* --- 14. Pil tanggal aktif (hari yang sedang dilihat): dari sel penuh
   berwarna jadi pil kecil di tengah sel, senada tampilan
   m.kalenderbali.org --- */
#isiKalender .bodikalender div,
#isiKalender .takaktif div,
#isiKalender .libur div,
#isiKalender .aktif div,
#isiKalender .liburaktif div {
  min-width: 34px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 3px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 20px;
}

/* Bulat tilem/purnama (img 15x15) diletakkan di samping angka tanggal,
   bukan di atasnya, supaya baris tabel tidak perlu tinggi */
#isiKalender table div img {
  width: 12px;
  height: 12px;
  flex: none;
}

#isiKalender .aktif div,
#isiKalender .liburaktif div {
  display: inline-flex;
  width: auto;
  min-width: 32px;
  padding: 1px 12px;
  border-radius: 17px;
}
#isiKalender .aktif div { background: var(--kbd-yellow) !important; font-weight: 700; }
#isiKalender .liburaktif div { background: #E15A4A !important; font-weight: 700; }

#isiKalender .aktif div a, #isiKalender .aktif div a:link, #isiKalender .aktif div a:visited {
  color: var(--kbd-navy) !important;
}
#isiKalender .liburaktif div a, #isiKalender .liburaktif div a:link, #isiKalender .liburaktif div a:visited {
  color: #FFFFFF !important;
}
#isiKalender .libur div a, #isiKalender .libur div a:link, #isiKalender .libur div a:visited {
  color: #D8362A !important;
}
#isiKalender .takaktif div a, #isiKalender .takaktif div a:link, #isiKalender .takaktif div a:visited {
  color: #B7C2CC !important;
}

/* Font angka tanggal: serif klasik, konsisten dengan angka tanggal di
   m.kalenderbali.org */
#isiKalender table div a {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 500;
}

/* ============================================================
   BAGIAN MENU NAVIGASI (menu.php, pakai #sddm dari kalenderbaru.css)
   -- murni polesan visual, JS/struktur dropdown tidak disentuh.
   ============================================================ */

#sddm li a {
  border-radius: 6px 6px 0 0 !important;
  transition: background-color 0.15s ease;
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
  /* Baris menu paling atas (Utama, Hari Baik, Konversi, Ramalan, dst)
     dari kalenderbaru.css aslinya cuma padding:4px 10px (pendek) --
     ditambah tinggi di sini lewat padding vertikal saja (BUKAN
     font-size/width) supaya label 2 kata seperti "Hari Baik" tidak
     terpaksa membungkus 2 baris. Dropdown di bawahnya (div#m1 dst)
     otomatis ikut turun sesuai posisi statis elemen setelah <a> ini
     di alur dokumen (tanpa top/left eksplisit dari menu.js), jadi
     aman menambah tinggi di sini tanpa bikin dropdown salah posisi. */
  padding: 10px 10px !important;
}

#sddm div {
  border-radius: 0 0 8px 8px !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  overflow: hidden;
}

#sddm div a {
  transition: background-color 0.15s ease;
}

/* Clearfix: <li> di dalam #sddm pakai float:left (dari kalenderbaru.css),
   tanpa ini elemen setelah menu (judul "KALENDER BALI DIGITAL") ikut naik
   menumpuk di sebelah menu alih-alih turun ke baris baru -- pola bug yang
   sama dengan footer yang sudah diperbaiki di atas */
#sddm::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================================================
   BAGIAN HALAMAN LAIN DI MENU (rerainan.php, formwara.php,
   formdewasa.php, pilihdewasa.php, kepribadian.php, dst) -- ini
   halaman-halaman terpisah dari index.php/kalender.php dan
   TIDAK selalu punya struktur div#container yang sama (beberapa
   pakai id="container1", beberapa tanpa container sama sekali,
   cuma <body> lalu <table> langsung). Tapi nama class-nya
   (juduldaftar, daftar, isidaftar, judulmenu, form, dst) dipakai
   ULANG persis sama di semua halaman ini lewat kalenderbaru.css,
   jadi cukup satu blok rule di sini yang otomatis berlaku ke
   semua halaman begitu link CSS ini ditambahkan -- tidak perlu
   rule per halaman. */

/* --- rerainan.php: form Bulan + judul + daftar dalam SATU tabel
   (kbd-card-table), tanpa jeda di antaranya (nempel jadi 1 kartu utuh,
   sesuai permintaan) -- cuma jeda tipis di BAWAH sebelum nav pil,
   bukan di atas. Lebar TETAP ikut atribut HTML width="800" (sengaja
   TIDAK dipaksa 100% lagi) -- #container di sekitarnya sudah dibuat
   transparan/tanpa bingkai sendiri (lihat rule div#container:has(...)
   di atas), jadi kartu 800px ini mengambang langsung di atas gradasi
   halaman, tanpa kotak besar lain yang bikin celah/garis janggal. */
table.kbd-card-table {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(7, 58, 91, 0.15) !important;
  margin: 0 auto 20px auto !important;
}

/* --- Header/judul tabel (juduldaftar, juduldaftar1, subjuduldaftar):
   dari solid navy polos jadi gradasi navy senada header lain --- */
.juduldaftar,
.juduldaftar1,
.subjuduldaftar {
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
  color: #FFFFFF !important;
  letter-spacing: 0.3px;
  padding: 10px 8px !important;
}
.juduldaftar a, .juduldaftar a:link, .juduldaftar a:visited,
.juduldaftar1 a, .juduldaftar1 a:link, .juduldaftar1 a:visited {
  color: #FFFFFF !important;
}

/* --- Isi tabel (daftar, isidaftarjudul, isidaftar): putih bersih,
   teks lebih lega, border lembut dari kalenderbaru.css yang tebal ---
   Catatan: padding/line-height SENGAJA cuma di-scope ke "td." (bukan
   ".isidaftarjudul" polos), karena class yang sama juga dipakai di
   <span> (formdewasa.php, dsb) -- padding vertikal di elemen inline
   seperti <span> tidak menambah tinggi baris, jadi bikin teksnya
   numpuk/nabrak baris di atas-bawahnya kalau di-scope tanpa tag. */
.daftar,
td.isidaftarjudul,
td.isidaftar,
tr.isidaftar,
tr.isidaftar td {
  background-color: #FFFFFF !important;
}
.daftar,
td.isidaftarjudul,
td.isidaftar {
  padding: 10px !important;
}
.daftar,
.isidaftarjudul,
.isidaftar {
  line-height: 155% !important;
}
.daftar li { padding-bottom: 4px; }

/* --- Legend 3 kolom Dewasa Ayu/Dipakai/Ala (pilihdewasa.php):
   warna kuning/hijau/merah terlalu terang di versi lama, dihalusin
   jadi versi pastel tapi tetap beda supaya masih gampang dibedakan --- */
/* width:33.33% disamakan di ketiganya supaya lebar 3 kolom (termasuk
   kotak hasil <div class="dewasa-list-box"> di bawahnya, yang ikut
   lebar kolom tabel) rata sama besar -- tanpa ini, kolom tengah
   ("Dewasa Dipakai") bisa jadi lebih sempit dari kiri-kanan kalau
   isinya kebetulan lebih pendek (lebar kolom auto ikut konten). */
.subjudulayu {
  background-color: #FFE9A8 !important;
  color: var(--kbd-navy) !important;
  width: 33.33% !important;
}
.subjudulalaayu {
  background-color: #D6EFC7 !important;
  color: var(--kbd-navy) !important;
  width: 33.33% !important;
}
.subjudulala {
  background-color: #F7C9C2 !important;
  color: var(--kbd-navy) !important;
  width: 33.33% !important;
}

/* --- pilihdewasa.php: 3 kotak hasil (Dewasa Ayu/Dipakai/Ala) diminta
   pakai bullet (<li>) senada halaman lain, tapi kotaknya semula
   <textarea readonly> -- tag HTML seperti <ul>/<li> TIDAK di-render
   sebagai elemen di dalam <textarea> (cuma tampil sebagai teks mentah
   "<li>...</li>"), jadi container-nya diganti jadi <div> biasa lewat
   PHP (bukan cuma CSS) supaya bullet-nya bisa muncul beneran. Class
   baru ".dewasa-list-box" (bukan numpuk ke ".isidaftarjudul" yang
   sudah dipakai widget/textarea lain) supaya efeknya cuma kena kotak
   ini, tetap dibuat mirip textarea lama: kotak putih berbingkai,
   tinggi tetap + scroll, supaya 3 kolom tetap sejajar rapi walau
   isinya panjang. --- */
.dewasa-list-box {
  display: block;
  background-color: #FFFFFF !important;
  border: 1px solid #C7D0DA !important;
  border-radius: 6px;
  height: 300px;
  overflow-y: auto;
  padding: 10px !important;
  box-sizing: border-box;
  text-align: left;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /* font-size & line-height disamakan dengan ".foredaftar" (13px /
     155%) yang dipakai list di forminfo.php/tampilkomentar.php/
     faq.php/pustaka.php/referensialaayu.php/pasangwidget.php, supaya
     font-nya standar juga di sini (pilihdewasa.php/tampildewasa.php).
     Semula 11px/135% -- beda sendiri karena kotak ini punya rule
     langsung sendiri, jadi tidak ikut ke-override walau ".foredaftar"
     ditambahkan ke elemen <th> pembungkusnya (rule langsung di elemen
     selalu menang atas inheritance dari induk, jadi diubah di sini). */
  font-size: 13px;
  /* parent <th> (default browser style) bikin teks di dalamnya
     bold+center secara default -- dipatahkan di sini karena isinya
     daftar hasil biasa, bukan judul kolom */
  font-weight: normal !important;
  text-align: left !important;
  color: var(--kbd-navy) !important;
}
.dewasa-list-box ul {
  margin: 0;
  padding-left: 18px;
}
.dewasa-list-box li {
  /* !important perlu di sini karena tiap <li> dari PHP masih bawa
     inline style="line-height: 135%" (peninggalan lama) -- inline
     style menang atas rule CSS biasa, jadi tanpa !important baris
     155% di atas tidak akan pernah kepakai. */
  line-height: 155% !important;
  padding-bottom: 8px;
  font-weight: normal !important;
}

/* --- Menu navigasi bawah/tengah (judulmenu, judulmenu1): terinspirasi
   dari tab bar "bottom-nav.php" di m.kalenderbali.org (deretan pil
   bulat rapi dengan jarak antar tab, bukan kotak grid bergaris) --
   dipakai baik sebagai <table> (rerainan.php dst) maupun <div> berisi
   link dipisah "|" (kepribadian.php dst), jadi rule di bawah fokus ke
   selector yang aman untuk keduanya.

   Tabel <table class="judulmenu"> dipaksa jadi flex row lewat CSS
   (tanpa ubah HTML/PHP-nya) supaya tiap link jadi "pil" terpisah
   dengan jarak (gap), senada rasa tab bar mobile, bukan satu blok
   kotak dengan garis pembatas kaku. --- */
table.judulmenu,
table.judulmenu1 {
  display: flex !important;
  /* Lebar tetap HTML lama (width="800"/"900") diganti mengikuti lebar
     kartu/container-nya supaya lebih lega -- makin lebar, makin
     sedikit baris yang dibutuhkan tiap label pil (targetnya 2 baris).
     Dibatasi max-width + margin:auto (bukan width:100% polos) karena
     beberapa halaman (mis. rerainan.php) membungkus tabel ini dengan
     div#container yang lebarnya auto/mengikuti body -- tanpa batas
     atas, pil jadi jauh lebih lebar dari kartu putih di atasnya dan
     terlihat "nyeleneh"/meluber ke tepi halaman. */
  width: 100% !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  border: none !important;
  gap: 6px;
  box-sizing: border-box;
}
table.judulmenu tbody,
table.judulmenu1 tbody,
table.judulmenu tr,
table.judulmenu1 tr {
  display: flex !important;
  width: 100%;
  gap: 6px;
}
table.judulmenu td,
table.judulmenu1 td {
  flex: 1 1 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 10px !important;
  /* font-size dikecilkan supaya label 2-3 kata (mis. "Ala-Ayuning
     Dewasa") muat 2 baris, bukan meluber ke 3 baris yang bikin pil
     ini jadi lebih tinggi dari yang lain */
  font-size: 11px !important;
  line-height: 130% !important;
  /* kalenderbaru.css/rule di atas tidak pernah men-set font-family
     untuk pil nav ini, jadi selama ini jatuh ke default browser
     (serif/Times New Roman) -- beda sendiri dari font standar situs
     (Verdana/Arial) yang dipakai di judul & isi konten. Disamakan
     di sini. */
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* --- Nav pil isinya cuma SATU tautan (mis. "Kembali ke Kalender" di
   forminfo.php/tampilkomentar.php/faq.php/pustaka.php/referensialaayu.php/
   pasangwidget.php): kalau ikut aturan flex:1 1 0 di atas, satu-satunya
   <td> otomatis melar mengisi seluruh lebar baris (sampai 960px) --
   untuk kasus 1 item saja, pil dibuat secukupnya mengikuti lebar
   tulisan & diletakkan di tengah baris, bukan melar penuh selebar
   halaman. Dikenali otomatis lewat :only-child, tanpa perlu class/HTML
   tambahan, dan tidak menyentuh nav multi-item yang lain. */
table.judulmenu tr:has(td:only-child),
table.judulmenu1 tr:has(td:only-child) {
  justify-content: center !important;
}
table.judulmenu td:only-child,
table.judulmenu1 td:only-child {
  flex: 0 0 auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
table.judulmenu td:hover,
table.judulmenu1 td:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(7, 58, 97, 0.35);
}
div.judulmenu1 {
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
  border-radius: 8px;
  color: rgba(255,255,255,0.35);
}
.judulmenu a, .judulmenu1 a {
  transition: color 0.15s ease;
}
.judulmenu a:link, .judulmenu a:visited,
.judulmenu1 a:link, .judulmenu1 a:visited {
  color: #FFFFFF !important;
}

/* --- Form pencarian/pilihan (class="form", dipakai di rerainan.php,
   formwara.php, formdewasa.php, pilihdewasa.php dst): background tan
   solid (#D5D3C7) lama dibuat transparan supaya menyatu dengan
   gradasi latar baru, bukan kotak tan yang menabrak --- */
.form {
  background-color: transparent !important;
  color: var(--kbd-navy) !important;
}

/* --- Kontrol form (select/input) di luar #isiKalender: dari gaya
   "outset" 3D lama jadi flat modern senada dengan form tanggal di
   kalender.php, tapi versi terang (karena di sini latarnya putih/
   terang, bukan navy) --- */
body select,
body input[type="text"],
body input.inputindex {
  background-color: #FFFFFF !important;
  color: var(--kbd-navy) !important;
  border: 1px solid #C7D0DA !important;
  border-radius: 6px !important;
  padding: var(--kbd-ctrl-padding) !important;
  font-size: var(--kbd-ctrl-font-size) !important;
}
body input[type="submit"],
body input.inputindex[type="submit"] {
  background-color: #E7ECF2 !important;
  color: var(--kbd-navy) !important;
  font-weight: 700 !important;
  border: 1px solid #C7D0DA !important;
  border-radius: 6px !important;
  padding: var(--kbd-ctrl-padding) !important;
  font-size: var(--kbd-ctrl-font-size) !important;
  cursor: pointer;
}
body select option {
  color: var(--kbd-navy) !important;
  background-color: #FFFFFF !important;
}

/* --- Copyright di footer halaman-halaman ini: hapus kotak tan solid,
   biar menyatu dengan latar baru --- */
.copyright {
  background-color: transparent !important;
  color: #4A5A68 !important;
}

/* --- pilihdewasa.php: khusus halaman ini latar belakang di atas &
   bawah form diminta putih polos (bukan gradasi biru standar situs).
   formwara.php/formdewasa.php TIDAK ikut aturan ini -- keduanya pakai
   gradasi biru standar seperti rerainan.php. Dikenali lewat
   ".subjudulayu" yang cuma ada di pilihdewasa.php (legend Dewasa
   Ayu/Ala), supaya tidak "bocor" ke halaman form lain. --- */
body:has(.subjudulayu) {
  background: #FFFFFF !important;
}

/* --- Border sel tabel lama (atribut HTML border="1", dipakai di
   formwara.php/formdewasa.php/pilihdewasa.php dst): diganti jadi
   tipis & lembut senada tabel kalender.php, bukan border tebal
   default browser. Dikenali dari isinya (juduldaftar/isidaftarjudul/
   isidaftar) supaya tidak "bocor" ke tabel lain yang sudah ditangani
   terpisah (mis. tabel kalender). --- */
table:has(.juduldaftar),
table:has(.isidaftarjudul),
table:has(.isidaftar) {
  border: none !important;
  border-collapse: collapse !important;
}
table:has(.juduldaftar) td,
table:has(.juduldaftar) th,
table:has(.isidaftarjudul) td,
table:has(.isidaftarjudul) th,
table:has(.isidaftar) td,
table:has(.isidaftar) th {
  border: 1px solid #E3E8EE !important;
}

/* --- kepribadian.php dst: paksa #left-sidebar & #right-sidebar
   sejajar (flex), supaya konten "kanan" (mis. Garis Hidup/Ramalan
   Bintang terkait) tidak malah jatuh ke bawah kalau CSS asal
   halaman ini (kalender.css) tidak men-float dua kolom ini dengan
   benar. Di-scope ke #container1 supaya tidak menyentuh #body/
   #left-sidebar/#right-sidebar di index.php (yang scope-nya beda,
   yaitu #container). Rule flex-nya SENGAJA cuma dipasang kalau
   #body ini memang punya #left-sidebar di dalamnya (:has) --
   nasib.php pakai #body yang sama tapi TANPA left/right-sidebar
   (cuma grafik + beberapa div iklan berurutan ke bawah); kalau
   #body dipaksa flex tanpa syarat ini, isinya malah numpuk jadi
   satu baris ke samping (grafik jadi kecil, iklan-iklan ikut
   berjejer), bukan tersusun ke bawah seperti aslinya. */
#container1 #body:has(#left-sidebar) {
  display: flex !important;
  align-items: flex-start !important;
}
#container1 #left-sidebar {
  flex: 1 1 65% !important;
}
#container1 #right-sidebar {
  flex: 1 1 35% !important;
}

/* --- Baris kata kunci SEO (class="keyword", isinya include keyword.php)
   di paling bawah halaman-halaman ramalan (kepribadian.php dst):
   diminta dihilangkan -- disembunyikan lewat CSS supaya otomatis
   hilang juga di halaman lain yang masih memakai include yang sama,
   tanpa perlu edit PHP satu-satu. --- */
.keyword {
  display: none !important;
}

/* --- div#container1 (kepribadian.php dst): "kembaran" div#container
   tapi id-nya beda -- kasih polesan card yang sama (radius, shadow)
   supaya terasa konsisten dengan index.php/kalender.php --- */
div#container1 {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(7, 58, 97, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 10px;
}

/* ============================================================
   formwara.php (desktop) kini pakai markup yang sama dengan versi
   m.kalenderbali.org (form lebih sederhana, 1 checkbox per baris
   -- bukan 2 -- sesuai permintaan). Class-class di bawah ini
   (kbd-card, kbd-form-card, backtitle, foredaftar) berasal dari
   kbd-modern.css milik mobile dan belum ada definisinya sama sekali
   di sisi desktop (kalenderbaru.css tidak mengenal nama-nama ini),
   jadi diberi tampilan versi desktop di sini -- senada kartu putih
   yang sudah dipakai di halaman lain (rerainan.php dst).
   ============================================================ */
.kbd-card {
  background-color: #FFFFFF !important;
  border-radius: 14px !important;
  /* .backtitle di dalam kartu ini "bleed" ke tepi lewat margin negatif
     (-24px, menyamai padding kartu) supaya bar navy-nya nempel pas ke
     sudut kartu. Kalau sedikit saja meleset (pembulatan sub-pixel di
     browser, dll), bar itu bisa nongol tipis melewati sudut membulat
     kartu (persis kotak merah yang ditandai user). overflow:hidden di
     sini jadi jaring pengaman -- apa pun yang "bleed" ke tepi pasti
     kepotong rapi mengikuti border-radius kartu, sama seperti trik
     yang sudah dipakai di div#container. */
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(7, 58, 91, 0.15);
  padding: 24px !important;
  margin: 24px auto !important;
  max-width: 720px;
}
/* Tiap baris form (select wewaran + checkbox "selain", atau baris
   tahun+tombol) dibuat sejajar rapi lewat flex -- sebelumnya lebar
   tiap <select> mengikuti panjang teks opsi yang sedang terpilih
   ("Sapta Wara | Redite" vs "Biarkan bila sudah cukup..."), jadi
   kolomnya "meloncat-loncat" dan terlihat berantakan. */
.kbd-form-card p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.kbd-form-card select {
  width: 320px;
  max-width: 70vw;
  flex: none;
}
/* font-size disamakan proporsinya dengan isi di bawahnya (.foredaftar,
   13px) -- sebelumnya ikut ukuran default (lebih besar dari isi),
   jadi judul terkesan berat sendiri dibanding daftar hasil di
   bawahnya yang kecil & ringan */
.backtitle {
  background: linear-gradient(135deg, var(--kbd-navy) 0%, var(--kbd-navy-dark) 100%) !important;
  color: #FFFFFF !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 135%;
  margin: -24px -24px 18px -24px !important;
  width: auto;
  /* Sebelumnya mengandalkan atribut HTML align="center" di div-nya
     supaya rata tengah -- ternyata tidak selalu konsisten kena timpa,
     jadi rata tengahnya dipastikan langsung lewat CSS di sini. */
  text-align: center !important;
}
/* Ketemu akar masalah kenapa judul FORM ("Isikan Wewaran...", anak
   langsung .kbd-card) rata tengah dengan benar, sementara judul HASIL
   ("Anggara + Wage...") tidak -- padahal keduanya sama-sama .backtitle:
   judul hasil dibungkus div#header (peninggalan struktur mobile),
   sedangkan judul form tidak. id="header" kemungkinan masih kena
   gaya dari CSS lama (kalenderbaru.css punya rule sendiri untuk
   "#header" dari desain lawas), sehingga box induk langsung dari
   .backtitle di sini beda ukuran/posisi dari yang diasumsikan trik
   margin negatif -24px, dan bikin bar+teksnya kegeser. Dinetralkan
   di sini (di-scope ke ".kbd-card #header" saja, supaya TIDAK
   menyentuh #header versi lain seperti di kepribadian.php yang
   pakai div#container1, bukan .kbd-card). */
.kbd-card #header {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  float: none !important;
  text-align: center !important;
}
/* Sama akar masalahnya dengan #header di atas, tapi untuk "div#body":
   kalenderbaru.css punya rule ID polos "div#body { width:1018px;
   overflow:hidden }" yang aslinya dimaksudkan cuma untuk index.php/
   kalender.php -- tapi karena ID selector, otomatis "bocor" ke SEMUA
   halaman lain yang kebetulan juga pakai id="body" (formwara.php,
   forminfo.php, tampilkomentar.php, dst, peninggalan struktur
   mobile). Akibatnya isi kartu dipaksa selebar 1018px lalu terpotong
   overflow:hidden di 1018px itu -- bukan mengikuti lebar kartu
   ".kbd-card" (max-width 720px) seperti seharusnya, dan teks yang
   tidak sempat wrap sebelum overflow:hidden memotongnya terlihat
   "bocor"/kepotong aneh di tepi kartu. Dinetralkan di sini supaya
   #body ikut lebar wajar kartu induknya. */
.kbd-card #body {
  width: auto !important;
  overflow: visible !important;
}
/* Judul kartu HASIL (mis. "Anggara + Wage Tahun 2026" di formwara.php):
   diminta persis senada dengan judul FORM di atasnya ("Isikan Wewaran
   yang Ingin Dicari") -- jadi sengaja TIDAK di-scope/override lagi di
   sini, keduanya sama-sama pakai gaya dasar .backtitle apa adanya
   (bar navy penuh lebar, bold, rata tengah, nempel ke tepi kartu). */
.foredaftar {
  color: var(--kbd-navy) !important;
  line-height: 155% !important;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.foredaftar ul { padding-left: 20px; margin: 0; }

/* ============================================================
   tampilkomentar.php (desktop) -- diambil dari markup m. (class
   "kbd-list-card" pembungkus daftar komentar + pagination), sama
   prinsipnya dengan formwara.php di atas: class-nya belum dikenal
   sisi desktop, jadi diberi tampilan kartu putih senada ".kbd-card"
   di sini. Warna navy + teks putih judul "ADA X KOMENTAR..." sudah
   otomatis kena lewat rule ".juduldaftar" yang sudah ada (tr-nya
   sudah pakai class itu) -- tapi tingginya masih ikut cellpadding="5"
   HTML lama (padding di ".juduldaftar" sendiri tidak kepakai karena
   di-set di elemen <tr>, bukan <td>/<th>, dan browser mengabaikan
   padding di <tr>). Ditambah padding sendiri di sini supaya judulnya
   terasa lebih tinggi/lega. */
.backtitle1 {
  padding: 16px 8px !important;
}
.kbd-list-card {
  background-color: #FFFFFF !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(7, 58, 91, 0.15);
  margin: 0 auto 24px auto !important;
  max-width: 720px;
}