/* ===========================================================
   Tema halaman pemilih - Pilketos SMK Negeri 1 Jiwan
   Dirancang mobile-first: sebagian besar siswa memilih lewat HP.
   =========================================================== */

html {
   -webkit-text-size-adjust: 100%;
}

body {
   background: #011b3b;
   color: #fff;
   min-height: 100vh;
   overflow-x: hidden;
   -webkit-tap-highlight-color: rgba(255, 212, 94, .25);
}

/* Latar gradien dipasang sebagai lapisan tetap di belakang konten.
   Sengaja tidak memakai `background-attachment: fixed` — properti itu
   berat dan sering berkedip saat digulir di Safari iOS. */
body::before {
   content: '';
   position: fixed;
   top: 0; right: 0; bottom: 0; left: 0;
   background: linear-gradient(160deg, #01234d 0%, #011b3b 55%, #000f22 100%);
   z-index: -1;
}

/* jangan sampai ada yang menembus lebar layar HP */
img, table, pre {
   max-width: 100%;
}

/* ---------- kepala halaman ---------- */

.index-header {
   text-align: center;
   padding-top: 30px;
}

.index-header h1 {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: .3px;
   margin-bottom: 6px;
   line-height: 1.25;
}

.index-header h2 {
   font-size: 22px;
   color: #ffd45e;
   margin-top: 0;
   line-height: 1.3;
}

.index-header .periode {
   font-size: 16px;
   color: #9fb6d4;
   margin-bottom: 0;
}

hr {
   border-top: 1px solid rgba(255, 255, 255, .18);
}

/* ---------- kotak login ---------- */

.form {
   margin-top: 30px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 12px;
   padding: 26px 28px 22px;
}

.info-login {
   font-size: 19px;
   line-height: 1.5;
   display: block;
}

.help-login {
   color: #9fb6d4;
   font-size: 14px;
   margin-top: 8px;
}

label {
   font-size: 16px;
   color: #fff;
   font-weight: 600;
}

/* font-size 16px wajib: di bawah itu iOS Safari ikut memperbesar halaman
   begitu kolom disentuh, dan tata letak jadi berantakan */
.form-control,
input[type="text"],
input[type="password"],
select,
textarea {
   font-size: 16px;
}

#nisn {
   letter-spacing: 3px;
   font-weight: 700;
   text-align: center;
   height: 54px;
   font-size: 22px;
}

.btn-lg,
.btn-block {
   min-height: 48px;      /* nyaman ditekan dengan jempol */
   white-space: normal;
}

.ket-admin {
   margin-top: 22px;
   font-size: 14px;
}

.ket-admin a {
   color: #9fb6d4;
   display: inline-block;
   padding: 8px 0;
}

.ket-admin a:hover,
.ket-admin a:focus {
   color: #ffd45e;
}

/* ---------- slider gambar ---------- */

/* ---------- slider logo halaman depan ----------
   Wadah SENGAJA tanpa tinggi tetap dan tanpa overflow:hidden, sehingga
   logo mustahil terpotong berapa pun rasionya. Semua gambar ditumpuk di
   satu sel grid, jadi tinggi wadah otomatis mengikuti gambar tertinggi.
   Pergantian gambar memakai animasi CSS, tanpa pustaka JavaScript. */
#content-slider {
   display: grid;
   width: 100%;
   max-width: 340px;
   margin: 20px auto 0;
   overflow: visible;
}

#content-slider img {
   grid-area: 1 / 1;            /* semua gambar menempati sel yang sama */
   display: block;
   width: 100% !important;
   height: auto !important;     /* tinggi mengikuti gambar, tidak dipaksa */
   max-width: 100%;
   position: static !important; /* jaga-jaga bila ada skrip lama menimpa */
   opacity: 0;
   animation: gantiLogo 10s infinite;
}

/* dua gambar bergantian tiap 5 detik */
#content-slider img:nth-child(1) { animation-delay: 0s; }
#content-slider img:nth-child(2) { animation-delay: 5s; }

/* satu gambar saja: tampilkan terus, jangan dianimasikan */
#content-slider img:only-child {
   opacity: 1;
   animation: none;
}

@keyframes gantiLogo {
   0%   { opacity: 0; }
   6%   { opacity: 1; }
   44%  { opacity: 1; }
   50%  { opacity: 0; }
   100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
   #content-slider img { animation: none; }
   #content-slider img:nth-child(1) { opacity: 1; }
   #content-slider img:nth-child(n+2) { opacity: 0; }
}

.img {
   width: 100%;
   max-width: 300px;
   height: auto;
}

.img-thanks {
   max-width: 200px;
   width: 55%;
}

.alert {
   color: #2b2b2b;
   font-size: 15px;
}

footer {
   font-size: 13px;
   text-align: center;
   margin-top: 50px;
   padding: 22px 0;
   color: #9fb6d4;
   border-top: 1px solid rgba(255, 255, 255, .12);
}

footer a {
   color: #9fb6d4;
}

/* baris kredit pengembang di footer */
.kredit {
   margin-top: 6px;
   font-size: 12px;
   color: #7f96b5;
}

.kredit strong {
   color: #9fb6d4;
   font-weight: 600;
}


/* ---------- halaman vote.php ---------- */

.bar-atas {
   padding: 14px 0 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .12);
   margin-bottom: 22px;
}

.bar-atas .nama-siswa {
   font-size: 15px;
   color: #cfe0f5;
   line-height: 1.4;
}

.judul-vote h2 {
   font-size: 24px;
   margin-top: 0;
   line-height: 1.3;
}

.judul-vote p {
   color: #9fb6d4;
   font-size: 15px;
}

.kartu-kandidat {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   margin-bottom: 22px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
   color: #333;
}

/* Animasi masuk yang selalu berjalan. Sengaja tidak memakai library
   reveal-on-scroll: di HP kartu bisa tetap tersembunyi bila peristiwa
   scroll tidak terpicu, dan siswa melihat halaman kosong. */
.muncul {
   animation: munculKeAtas .45s ease both;
}

@keyframes munculKeAtas {
   from { opacity: 0; transform: translateY(14px); }
   to   { opacity: 1; transform: none; }
}

/* hormati pengaturan "kurangi animasi" di HP */
@media (prefers-reduced-motion: reduce) {
   .muncul { animation: none; }
}

.kartu-kandidat .foto-wrap {
   position: relative;
   background: #eef2f7;
}

.kartu-kandidat img.foto {
   width: 100%;
   height: 240px;
   object-fit: cover;
   display: block;
}

.kartu-kandidat .no-urut {
   position: absolute;
   top: 10px;
   left: 10px;
   background: #d9534f;
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   width: 42px;
   height: 42px;
   line-height: 42px;
   border-radius: 50%;
   text-align: center;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.kartu-kandidat .isi {
   padding: 15px;
   text-align: center;
}

.kartu-kandidat .nama {
   font-size: 17px;
   font-weight: 700;
   margin: 0 0 3px;
   color: #01234d;
   line-height: 1.3;
}

.kartu-kandidat .wakil {
   font-size: 14px;
   color: #6b7a8d;
   margin-bottom: 12px;
   min-height: 20px;
}

.kartu-kandidat .btn {
   margin-bottom: 8px;
}

/* ---------- halaman detail.php ---------- */

.tabel-profil {
   background: #fff;
   color: #333;
   font-size: 15px;
}

.tabel-profil td {
   word-break: break-word;
}

/* ===========================================================
   Penyesuaian layar kecil (HP)
   =========================================================== */

@media (max-width: 767px) {

   .container {
      padding-left: 16px;
      padding-right: 16px;
   }

   .index-header {
      padding-top: 22px;
   }

   .index-header h1 { font-size: 23px; }
   .index-header h2 { font-size: 18px; }
   .index-header .periode { font-size: 14px; }

   .form {
      margin-top: 22px;
      padding: 20px 18px 16px;
      border-radius: 10px;
   }

   .info-login { font-size: 17px; }

   #nisn {
      height: 56px;
      font-size: 24px;
      letter-spacing: 4px;
   }

   /* tombol login selebar layar supaya mudah ditekan */
   .tombol-login {
      width: 100%;
      display: block;
      font-size: 18px;
      padding: 14px;
   }

   .judul-vote h2 { font-size: 20px; }
   .judul-vote p  { font-size: 14px; }

   .bar-atas .nama-siswa,
   .bar-atas .tombol-keluar {
      float: none !important;
      display: block;
      text-align: center;
   }

   .bar-atas .tombol-keluar { margin-top: 10px; }

   /* kartu kandidat jadi mendatar: foto di kiri, tombol di kanan.
      Lebih banyak kandidat terlihat sekaligus tanpa banyak menggulir. */
   .kartu-kandidat {
      display: flex;
      align-items: stretch;
      margin-bottom: 16px;
   }

   .kartu-kandidat .foto-wrap {
      flex: 0 0 38%;
      max-width: 38%;
   }

   .kartu-kandidat img.foto {
      height: 100%;
      min-height: 170px;
   }

   .kartu-kandidat .no-urut {
      width: 34px;
      height: 34px;
      line-height: 34px;
      font-size: 16px;
      top: 8px;
      left: 8px;
   }

   .kartu-kandidat .isi {
      flex: 1 1 auto;
      text-align: left;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .kartu-kandidat .nama { font-size: 16px; }
   .kartu-kandidat .wakil { font-size: 13px; margin-bottom: 10px; min-height: 0; }

   .kartu-kandidat .btn {
      font-size: 15px;
      padding: 11px 10px;
   }

   /* Di halaman detail foto tampil penuh, tidak dipotong mendatar.
      Selektor sengaja memakai dua kelas agar tetap menang atas aturan
      kartu mendatar di media query layar yang lebih sempit. */
   .kartu-kandidat.kartu-detail { display: block; }
   .kartu-kandidat.kartu-detail .foto-wrap { max-width: 100%; flex: none; }
   .kartu-kandidat.kartu-detail img.foto { width: 100%; height: 300px; min-height: 0; }

   .tabel-profil { font-size: 14px; }
   .tabel-profil td { padding: 8px !important; }

   .aksi-detail .btn {
      display: block;
      width: 100%;
      margin-bottom: 10px;
   }

   .aksi-detail form { display: block !important; }

   footer { margin-top: 35px; font-size: 12px; }
}

/* layar sangat sempit (mis. iPhone SE) */
@media (max-width: 360px) {
   .index-header h1 { font-size: 21px; }
   #nisn { font-size: 21px; letter-spacing: 3px; }
   .kartu-kandidat .foto-wrap { flex-basis: 34%; max-width: 34%; }
   .kartu-kandidat .btn { font-size: 14px; }
}

/* ---------- spanduk situs demo ---------- */
.spanduk-demo {
   background: #ffd45e;
   color: #3a2c00;
   font-size: 13px;
   line-height: 1.6;
   padding: 10px 16px;
   text-align: center;
}
.spanduk-demo .isi { max-width: 1000px; margin: 0 auto; }
.spanduk-demo code {
   background: rgba(0, 0, 0, .12);
   color: #3a2c00;
   padding: 1px 6px;
   border-radius: 4px;
   font-weight: 700;
}
.spanduk-demo .akun { display: inline-block; }

@media (max-width: 767px) {
   .spanduk-demo { font-size: 12px; padding: 8px 12px; text-align: left; }
   .spanduk-demo .akun { display: block; margin-top: 4px; }
}

/* kolom token pada form login */
.kolom-token {
   text-transform: uppercase;
   letter-spacing: 4px;
   font-weight: 700;
   text-align: center;
   height: 54px;
   font-size: 22px;
}