/* ============================================================
   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);
}

/* --- 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;
}

/* --- 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;
}

/* 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;
}

#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. */

/* --- 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 {
  background-color: #FFFFFF !important;
  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 --- */
.subjudulayu {
  background-color: #FFE9A8 !important;
  color: var(--kbd-navy) !important;
}
.subjudulalaayu {
  background-color: #D6EFC7 !important;
  color: var(--kbd-navy) !important;
}
.subjudulala {
  background-color: #F7C9C2 !important;
  color: var(--kbd-navy) !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;
  background: transparent !important;
  border: none !important;
  gap: 6px;
}
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;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
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). --- */
#container1 #body {
  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;
}