/* ==========================================================
   SIM-FMIPA — Beranda (tema Maroon & Hitam)
   Menggantikan nicepage.css + Home.css khusus untuk index.php
   ========================================================== */

@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --black: #000;
  --maroon-950: #1a0306;
  --maroon-900: #2e050b;
  --maroon-800: #4a0a12;
  --maroon-700: #6b0f1a;
  --maroon-600: #8a1426;
  --maroon-500: #b01c36;
  --ember: #e8445f;
  --text: #f6ecec;
  --muted: #b79da1;
  --line: rgba(255, 255, 255, .11);
  --font-head: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h2, h3 { margin: 0; }

/* ---------- Latar ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--maroon-900) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, var(--maroon-800) 0%, transparent 60%),
    var(--black);
}
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 68, 95, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 68, 95, .10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 30% 40%, #000 0%, transparent 100%);
}
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}
.bg-glow-a {
  width: 46vmax; height: 46vmax;
  left: -14vmax; top: -16vmax;
  background: radial-gradient(circle, var(--maroon-600), transparent 70%);
}
.bg-glow-b {
  width: 38vmax; height: 38vmax;
  right: -12vmax; bottom: -14vmax;
  background: radial-gradient(circle, var(--maroon-500), transparent 70%);
  opacity: .35;
}

/* ---------- Kerangka halaman ---------- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* ---------- Panel merek ---------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.brand-marks {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-plate {
  display: inline-flex;
  padding: .8rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, #f3e2e4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25),
    0 24px 70px -14px rgba(176, 28, 54, .65);
  transition: box-shadow .25s ease, transform .25s ease;
}
.logo-plate img { height: clamp(52px, 7vw, 80px); width: auto; }
.logo-plate:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .35),
    0 28px 80px -12px rgba(232, 68, 95, .75);
}

.faculty-chip {
  display: inline-flex;
  padding: .55rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
  transition: transform .2s ease;
}
.faculty-chip img { width: 40px; height: 40px; object-fit: contain; }
.faculty-chip:hover { transform: translateY(-2px); }

.tagline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: 16ch;
  background: linear-gradient(180deg, #fff 30%, #e9b3bb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.versions {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--maroon-500);
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

.btn-apk {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem 1.4rem .6rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 68, 95, .5);
  background: rgba(107, 15, 26, .38);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-apk-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
}
.btn-apk-icon img { width: 22px; height: 22px; object-fit: contain; }
.btn-apk:hover {
  background: rgba(138, 20, 38, .6);
  border-color: var(--ember);
  box-shadow: 0 10px 30px -10px rgba(232, 68, 95, .7);
  transform: translateY(-1px);
}

/* ---------- Kartu login ---------- */
.login-card {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(74, 10, 18, .66), rgba(6, 1, 2, .86));
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow:
    0 40px 120px -30px rgba(176, 28, 54, .55),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Satu momen gerak: cahaya maroon berputar di tepi kartu */
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ang),
              rgba(255, 255, 255, .08) 0 45%,
              var(--maroon-500) 68%,
              #ff7a90 82%,
              rgba(255, 255, 255, .08) 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: edge-spin 7s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes edge-spin { to { --ang: 360deg; } }

.login-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.field { margin-bottom: 1.15rem; }

.login-card label {
  display: block;
  margin-bottom: .4rem;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
}

.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .5);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-card input::placeholder { color: rgba(183, 157, 161, .55); }
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
  border-color: var(--ember);
  background: rgba(0, 0, 0, .65);
  box-shadow: 0 0 0 3px rgba(176, 28, 54, .38), 0 0 28px rgba(176, 28, 54, .3);
}
.login-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #14070a inset;
  caret-color: var(--text);
}

/* Kolom password + ikon mata */
.password-container { position: relative; }
.password-container input { padding-right: 3.1rem !important; }

.toggle-password {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color .2s ease, background .2s ease;
}
.toggle-password:hover { color: #fff; background: rgba(255, 255, 255, .07); }

/* Ikon bawaan hanya dipakai jika tombol kosong (jika engine mengisi isinya, ikon engine yang tampil) */
.toggle-password:empty::before {
  content: "";
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Keadaan "password terlihat": saat input berubah menjadi type=text, atau tombol diberi kelas show/active/visible */
.password-container input[type="text"] ~ .toggle-password:empty::before,
.toggle-password.show:empty::before,
.toggle-password.active:empty::before,
.toggle-password.visible:empty::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-7 0-11-7-11-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-7 0-11-7-11-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
}

/* Checkbox */
.check-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .25rem 0 1.5rem;
}
.check-row input[type="checkbox"] {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin: 0;
  accent-color: var(--maroon-500);
  cursor: pointer;
}
.login-card .check-row label {
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

/* Tombol Login */
.btn-login {
  width: 100%;
  padding: .95rem 1rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
  cursor: pointer;
  background: linear-gradient(135deg, var(--maroon-600), var(--maroon-500) 55%, #d92b4b);
  box-shadow: 0 12px 32px -8px rgba(217, 43, 75, .7), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-login:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); filter: brightness(.95); }
.btn-login:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Bantuan masuk */
.help-block {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.help-title {
  margin-bottom: .75rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
}
.help-links { display: flex; gap: .75rem; }
.help-links a {
  flex: 1;
  padding: .65rem .5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.help-links a:hover {
  border-color: var(--ember);
  background: rgba(176, 28, 54, .22);
}

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.foot-id { display: flex; align-items: center; gap: 1.1rem; }
.foot-plate {
  flex: none;
  padding: .45rem .7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
}
.foot-plate img { height: 46px; width: auto; max-width: 180px; object-fit: contain; }
.foot-address { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }

.foot-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.social { display: flex; gap: .6rem; }
.social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.social svg { width: 22px; height: 22px; }
.social a:hover {
  color: #fff;
  background: var(--maroon-600);
  border-color: var(--ember);
  box-shadow: 0 0 22px rgba(232, 68, 95, .5);
}
.help-center {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--maroon-500);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.help-center:hover { color: var(--ember); border-color: var(--ember); }

/* ---------- Fokus keyboard ---------- */
a:focus-visible,
button:focus-visible,
.toggle-password:focus-visible,
.check-row input:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* ---------- Responsif ---------- */
@media (max-width: 920px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    gap: 2.25rem;
    align-items: start;
  }
  .tagline { max-width: 20ch; font-size: clamp(1.9rem, 8vw, 2.8rem); }
}

@media (max-width: 560px) {
  .login-card { border-radius: 22px; }
  .help-links { flex-direction: column; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot-id { flex-direction: column; align-items: flex-start; }
}

/* ---------- Kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  .login-card::before { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================
   Layar lebar (laptop/desktop): skala mengikuti tinggi layar
   agar seluruh beranda muat tanpa scroll.
   Semua ukuran berbasis rem ikut mengecil/membesar bersama
   tinggi jendela browser.
   ========================================================== */
@media (min-width: 921px) {
  html { font-size: clamp(12.5px, 2.05vh, 16px); }

  .stage {
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: clamp(2rem, 5vw, 5rem);
  }

  /* Panel merek */
  .brand { gap: 1.5rem; }
  .logo-plate { padding: .65rem 1rem; border-radius: 16px; }
  .logo-plate img { height: 4.5rem; }
  .faculty-chip { padding: .45rem; border-radius: 12px; }
  .faculty-chip img { width: 2.5rem; height: 2.5rem; }
  .tagline { font-size: 2.9rem; max-width: 18ch; }
  .versions { font-size: .9rem; line-height: 1.65; }
  .btn-apk { padding: .45rem 1.2rem .45rem .45rem; }
  .btn-apk-icon { width: 2.4rem; height: 2.4rem; }
  .btn-apk-icon img { width: 1.4rem; height: 1.4rem; }

  /* Kartu login */
  .login-card { padding: 1.75rem 2rem; border-radius: 24px; }
  .login-title { font-size: 1.9rem; margin-bottom: 1.1rem; }
  .field { margin-bottom: 1rem; }
  .login-card label { margin-bottom: .3rem; font-size: .85rem; }
  .login-card input[type="text"],
  .login-card input[type="password"] { padding: .7rem .95rem; border-radius: 11px; }
  .check-row { margin: .1rem 0 1.15rem; }
  .btn-login { padding: .8rem 1rem; font-size: 1.05rem; }
  .help-block { margin-top: 1.25rem; padding-top: 1rem; }
  .help-title { margin-bottom: .6rem; font-size: .85rem; }
  .help-links a { padding: .55rem .5rem; font-size: .85rem; }

  /* Footer */
  .foot { padding: .75rem clamp(1.25rem, 4vw, 3rem); gap: .75rem 2rem; }
  .foot-plate { padding: .3rem .6rem; border-radius: 10px; }
  .foot-plate img { height: 2.4rem; }
  .foot-address { font-size: .78rem; line-height: 1.5; }
  .social a { width: 2.4rem; height: 2.4rem; }
  .social svg { width: 1.25rem; height: 1.25rem; }
  .help-center { font-size: .85rem; }
}

/* ==========================================================
   Input saat fokus: latar hitam 100%, teks kuning
   (dipaksa dengan !important agar tidak tertimpa gaya bawaan
   browser / autofill maupun skrip lain)
   ========================================================== */
.login-card input[type="text"]:focus,
.login-card input[type="text"]:focus-visible,
.login-card input[type="text"]:active,
.login-card input[type="password"]:focus,
.login-card input[type="password"]:focus-visible,
.login-card input[type="password"]:active {
  background-color: #000 !important;
  background-image: none !important;
  color: #ffe600 !important;
  -webkit-text-fill-color: #ffe600 !important;
  caret-color: #ffe600;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(176, 28, 54, .45), 0 0 28px rgba(176, 28, 54, .35);
}

/* Autofill browser (Chrome/Edge/Safari) saat fokus maupun tidak */
.login-card input:-webkit-autofill:focus,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffe600 !important;
  caret-color: #ffe600;
  -webkit-box-shadow: 0 0 0 1000px #000 inset, 0 0 0 3px rgba(176, 28, 54, .45) !important;
          box-shadow: 0 0 0 1000px #000 inset, 0 0 0 3px rgba(176, 28, 54, .45) !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Firefox autofill */
.login-card input:autofill:focus {
  background-color: #000 !important;
  color: #ffe600 !important;
}

/* Teks yang diblok/seleksi tetap terbaca */
.login-card input::selection {
  background: var(--maroon-500);
  color: #ffe600;
}