/* ============================================================
   tambahan.css - hanya tambahan kecil.
   Semua gaya utama memakai assets/pddikti.css (CSS asli PDDikti).
   ============================================================ */

/* kolom pilih jenis pencarian: hilangkan tampilan bawaan peramban */
#jenis-cari {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  text-align-last: center;
  background: transparent;
}
#jenis-cari option {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  background: #fff;
  color: #111;
}
.custom-width-material-tailwind { min-height: 100%; }
@media (min-width: 768px) {
  .custom-width-material-tailwind { min-height: 88px; }
}

/* panel "Tentang PDDikti" */
#panel-tentang[hidden] { display: none; }
#menu-tentang.buka .ikon-panah { transform: rotate(180deg); }

/* panel menu HP */
#panel-hp[hidden] { display: none; }
#panel-hp { top: 0; }
#menu-hp-tentang .panah-buka { transform: rotate(270deg); }
#menu-hp-tentang.buka .panah-buka { transform: rotate(90deg); }
#panel-hp a, #panel-hp li { font-size: 18px; }

/* pemilih slide: gambar berganti halus */
#slide { transition: opacity .35s ease-in-out; }
#slide.redup { opacity: 0; }

/* kolom pencarian versi HP tetap terbaca */
@media (max-width: 767px) {
  .custom-ul-material-tailwind { display: none; }
}

/* ---------------- halaman biodata ---------------- */
.biodata-nilai a { color: inherit; }
.teks-kosong { color: #E53935; }

/* kotak catatan bawah biodata sedikit dirapatkan di HP */
@media (max-width: 767px) {
  .kotak-catatan { margin-bottom: 24px; }
}

/* ---------------- dasbor internal ---------------- */
.dasbor-bungkus { max-width: 1200px; margin: 120px auto 60px; padding: 0 24px; }
.dasbor-kartu { background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(99, 23, 195, .10); padding: 22px; }
.dasbor-judul { font-size: 22px; font-weight: 600; color: #2b2235; margin-bottom: 4px; }
.dasbor-sub { font-size: 14px; color: #6b6477; margin-bottom: 18px; }
.dasbor-baris { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dasbor-baris label { display: block; font-size: 13px; font-weight: 500; color: #4a4453; margin-bottom: 6px; }
.dasbor-baris input, .dasbor-baris select {
  width: 100%; height: 44px; border: 1px solid #dcd6e6; border-radius: 8px;
  padding: 0 12px; font-family: Poppins, sans-serif; font-size: 14px; color: #2b2235; background: #fff;
}
.dasbor-baris input:focus, .dasbor-baris select:focus { outline: none; border-color: #BB3CC6; box-shadow: 0 0 0 3px rgba(187,60,198,.15); }
.tombol-utama {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #D942C0, #6317C3); color: #fff; border: 0; cursor: pointer;
  padding: 12px 22px; border-radius: 8px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px;
}
.tombol-utama:hover { filter: brightness(1.05); }
.tombol-kedua {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #6317C3; border: 1px solid #BB3CC6; cursor: pointer;
  padding: 11px 20px; border-radius: 8px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px;
}
.tabel-siswa { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel-siswa th { text-align: left; font-weight: 600; color: #4a4453; border-bottom: 1px solid #eae4f2; padding: 10px 8px; font-size: 13px; }
.tabel-siswa td { border-bottom: 1px solid #f2eef8; padding: 10px 8px; vertical-align: middle; color: #2b2235; }
.tabel-siswa tr:hover td { background: #fbf8ff; }
.kotak-qr { background: #fff; border: 1px solid #ece5f6; border-radius: 10px; padding: 6px; display: inline-block; }
.kotak-qr img, .kotak-qr canvas { display: block; }
.gerbang-masuk { max-width: 420px; margin: 140px auto 60px; }
.pesan-galat { background: #FDECEC; color: #B3261E; border: 1px solid #f7c9c6; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.pesan-ok { background: #E9F7EF; color: #1E7B4D; border: 1px solid #bfe6cf; border-radius: 8px; padding: 10px 12px; font-size: 13px; }


/* ---------- ikon kartu menu: gambar asli (menggantikan alamat /static/media) ---------- */
.book { background-image: url("books-book-1.99248ffa52355b5eb043.svg"); }
#book2 { background-image: url("books-book-2.5c7c1ae8c0aa21130f2c.svg"); }
#books-wrapper:hover #book2 { background-image: url("books-book-2-2.8fc24e9fc43e155c1a1f.svg"); }
#books-wrapper:hover #book3 { background-image: url("books-book-3-2.0368363fe224c5968c94.svg"); }


/* ikon kartu: bayangan halus pengganti bayangan-dalam bawaan yang bikin bercak gelap */
#book-wrapper svg, #buildings-wrapper svg, #sound-wrapper svg, #map-wrapper svg,
#bar-wrapper .bar-chart, #books-wrapper .book {
  filter: drop-shadow(0 1px 1px rgba(88, 28, 135, .18));
}

/* ================= TOMBOL "BERI ULASAN" + LENCANA reCAPTCHA ================= */
.ulasan-area {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ulasan-tombol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #D942C0;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ulasan-tombol:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.ulasan-ikon { width: 20px; height: 20px; flex: none; }


/* jendela survei */
.ulasan-modal { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.ulasan-modal[hidden] { display: none; }
.ulasan-latar { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); }
.ulasan-kotak {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 88vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.ulasan-tutup {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: #e5e7eb;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.ulasan-tutup:hover { background: #d1d5db; }

@media (max-width: 640px) {
  .ulasan-area { right: 24px; bottom: 24px; }
    .ulasan-tombol { padding: 8px 14px; font-size: 13px; }
}

/* isi form ulasan */
.ulasan-isi { padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.ulasan-isi h3 { font-size: 20px; font-weight: 600; color: #2b2235; margin: 0 0 2px; }
.ulasan-tanya { font-size: 14px; color: #5b5565; margin: 0 0 10px; }
.ulasan-bintang { display: flex; gap: 6px; }
.ulasan-bintang button {
  background: none; border: 0; padding: 0 2px; line-height: 1;
  font-size: 34px; color: #d8d3e0; cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.ulasan-bintang button:hover { transform: scale(1.15); color: #D942C0; }
.ulasan-bintang button.aktif { color: #6317C3; }
.ulasan-ket { font-size: 13px; color: #7a7385; margin: 4px 0 12px; }
#komentar-ulasan {
  width: 100%; border: 1px solid #d8d3e0; border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; color: #2b2235;
  resize: vertical; outline: none;
}
#komentar-ulasan:focus { border-color: #6317C3; box-shadow: 0 0 0 3px rgba(99, 23, 195, .12); }
.ulasan-kirim {
  margin-top: 14px; border: 0; border-radius: 10px; cursor: pointer;
  padding: 12px 16px; font: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #D942C0, #6317C3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ulasan-kirim:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -8px rgba(99, 23, 195, .55); }
.ulasan-pesan { font-size: 13px; margin: 10px 0 0; }
.ulasan-pesan.salah { color: #dc2626; }
.ulasan-terimakasih { align-items: center; justify-content: center; text-align: center; }
.ulasan-centang {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #D942C0, #6317C3); color: #fff;
  font-size: 32px; margin-bottom: 14px;
}
@media (max-width: 640px) {
  .ulasan-isi { padding: 22px 18px; }
  .ulasan-bintang button { font-size: 30px; }
}

/* ================= LENCANA reCAPTCHA (meniru badge resmi Google) ================= */
/* keadaan biasa: hanya logo yang kelihatan, sisa papan menjorok keluar layar.
   saat kursor menyentuh / disentuh di HP: papan bergeser masuk (animasi geser). */
.grecaptcha-badge {
  position: fixed;
  right: -186px;
  bottom: 14px;
  z-index: 5;
  width: 256px;
  height: 60px;
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(128, 128, 128, 1);
  overflow: hidden;
  transition: right .3s ease;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
.grecaptcha-badge:hover,
.grecaptcha-badge:focus,
.grecaptcha-badge:focus-within { right: 0; }

.grecaptcha-logo {
  flex: none;
  width: 70px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}
.grecaptcha-logo img { width: 48px; height: 48px; display: block; }

.grecaptcha-isi {
  flex: none;
  width: 172px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 14px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease .1s, transform .3s ease .1s;
}
.grecaptcha-badge:hover .grecaptcha-isi,
.grecaptcha-badge:focus .grecaptcha-isi,
.grecaptcha-badge:focus-within .grecaptcha-isi { opacity: 1; transform: none; }

.grecaptcha-isi b { font-size: 10px; font-weight: 500; color: #555; white-space: nowrap; }
.grecaptcha-tautan { display: flex; gap: 3px; font-size: 8px; color: #555; white-space: nowrap; }
.grecaptcha-tautan a { color: #555; text-decoration: none; }
.grecaptcha-tautan a:hover { text-decoration: underline; }
.grecaptcha-tautan i { font-style: normal; }