/* GAYA BARU: FULL CARD FLIP (Sidebar + Form) */

/* --- Variabel Warna (Tema Light Mode) --- */
:root {
  --bg-color: #E6F7FF;         /* Biru Langit */
  --card-bg: #FFFFFF;         /* Putih */
  --text-color: #222222;       /* Hitam */
  --border-color: #222222;     /* Hitam */
  --shadow-color: #222222;     /* Hitam */
  --accent-green: #4C7F2F;     /* Hijau Grass */
  --accent-green-hover: #3B6324;
  --accent-brown: #854F2B;     /* Cokelat Dirt */
  --accent-red: #DD3C3C;       /* Merah Lava */
  --accent-red-bg: #FFEDED;
  --accent-green-bg: #EBFDEF;
}

body {
  font-family: "VT323", monospace;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* --- 1. Kontainer Flip Card (Dulu .login-container-grid) --- */
.auth-container {
  perspective: 1500px;
  width: 100%;
  max-width: 900px;
  margin: 2rem;
}

/* --- 2. Flipper (Kartu yang berputar) --- */
.flipper {
  position: relative;
  width: 100%;
  /* Atur tinggi flipper di sini agar konten di dalamnya memiliki batasan vertikal */
  min-height: 600px;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-style: preserve-3d;
  
  /* Tambahkan style border/shadow ke flipper (Efek Pixel Art) */
  border: 3px solid var(--border-color);
  box-shadow: 8px 8px 0px 0px var(--shadow-color);
  animation: pixel-breathe 4s infinite ease-in-out;
}

/* --- 3. Sisi Depan (Login) & Belakang (Register) --- */
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  /* Ubah height ke 100% untuk menutupi min-height flipper */
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  background-color: var(--card-bg); /* Latar belakang putih */

  /* KEDUA SISI SEKARANG ADALAH GRID */
  display: grid;
  grid-template-columns: 1fr; /* 1 kolom di HP */
}

/* 2 kolom di desktop */
@media (min-width: 768px) {
  .front, .back {
    grid-template-columns: 1fr 1.25fr; /* Sidebar lebih kecil */
  }
}

/* Sisi belakang diputar */
.back {
  transform: rotateY(180deg);
}

.flipper.is-flipped {
  transform: rotateY(180deg);
}


/* Animasi bayangan "bernapas" */
@keyframes pixel-breathe {
  0% { box-shadow: 8px 8px 0px 0px var(--shadow-color); }
  50% { box-shadow: 10px 10px 0px 0px var(--shadow-color); }
  100% { box-shadow: 8px 8px 0px 0px var(--shadow-color); }
}

/* --- 4. Sidebar Kiri (Gambar & Konten Overlay) --- */
.login-image-sidebar {
  /* NEW: Properti Gambar Latar (Harus diatur via inline style/JS di HTML) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* Penting untuk overlay */
  
  color: white;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Konten di bawah */
  overflow: hidden;
  border-right: 3px solid var(--border-color);
}

/* Efek Overlay Gelap untuk Keterbacaan Teks */
.login-image-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Overlay gelap */
  z-index: 1;
}

/* Sembunyikan sidebar di HP (Mobile First) */
.login-image-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .login-image-sidebar {
    display: flex; /* Tampilkan di desktop */
  }
}

/* Konten Sidebar (Teks) */
.sidebar-content {
  /* Konten harus di atas overlay */
  z-index: 3;
  padding: 2.5rem;
  max-height: 100%;
  overflow-y: auto;
  
  /* NEW: Style untuk Teks Putih Lebih Jelas */
  text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}

.sidebar-content h1 {
  font-size: 3rem;
  margin: 0 0 0.5rem 0;
  animation: text-flicker 3s infinite alternate;
}
.sidebar-content p {
  font-size: 1.5rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.sidebar-main-post {
  margin-bottom: 1.5rem;
}

.admin-news-item {
  margin-top: 1.0rem;
  padding-top: 1.0rem;
  border-top: 2px dashed rgba(255,255,255,0.5);
}
.admin-news-item h4 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
}
.admin-news-item p {
  font-size: 1.2rem;
  margin: 0;
}
.admin-news-item small {
  font-size: 1rem;
  opacity: 0.7;
  display: block;
}

/* Animasi teks kelip */
@keyframes text-flicker {
  0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff; }
  100% { text-shadow: 2px 2px 0px rgba(0,0,0,0.8); }
}


/* --- 5. Wrapper Form Kanan --- */
.auth-form-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem; /* Padding untuk HP */
  width: 100%;
  max-width: 450px;
  margin: 0 auto; /* Pusatkan form di HP */
}

@media (min-width: 768px) {
  .auth-form-wrapper {
    padding: 0;
    max-width: none; /* Biarkan mengisi area grid di desktop */
  }
}

/* --- 6. Konten Form (Sebagian besar sama) --- */
.auth-box {
  padding: 2.5rem;
  width: 100%;
  box-sizing: border-box;
}

.auth-box h2 {
  font-size: 2.5rem;
  color: var(--text-color);
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  display: block;
  font-size: 1.5rem;
  color: var(--accent-brown);
  margin-bottom: 0.5rem;
}

.input-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1.5rem;
  font-family: "VT323", monospace;
  color: var(--text-color);
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  box-shadow: 4px 4px 0px 0px var(--shadow-color);
  box-sizing: border-box;
  transition: all 0.1s ease;
}

.input-group input:focus {
  outline: none;
  box-shadow: 2px 2px 0px 0px var(--shadow-color);
  transform: translate(2px, 2px);
}

/* --- PERUBAHAN: Grid untuk Form Registrasi --- */
.form-grid-register {
  display: grid;
  grid-template-columns: 1fr; /* 1 kolom di HP */
  gap: 0 1.5rem; /* Jarak antar kolom (hanya horizontal) */
}

@media (min-width: 768px) {
  /* 2 kolom di desktop */
  .form-grid-register {
    grid-template-columns: 1fr 1fr;
  }

  /* TATA LETAK BARU SESUAI PERMINTAAN: 
    [Username] [Email]
    [Pass]     [Confirm Pass]
  */
  .form-grid-register .input-group:nth-child(1) { grid-column: 1 / 2; grid-row: 1; } /* Username */
  .form-grid-register .input-group:nth-child(2) { grid-column: 2 / 3; grid-row: 1; } /* Email */
  .form-grid-register .input-group:nth-child(3) { grid-column: 1 / 2; grid-row: 2; } /* Password */
  .form-grid-register .input-group:nth-child(4) { grid-column: 2 / 3; grid-row: 2; } /* Konfirmasi Password */
}
/* --- END PERUBAHAN --- */


.btn-auth {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 1.8rem;
  font-family: "VT323", monospace;
  border: 2px solid var(--border-color);
  background: var(--accent-green);
  color: white;
  cursor: pointer;
  box-shadow: 4px 4px 0px 0px var(--shadow-color);
  transition: all 0.1s ease;
  margin-top: 1.5rem;
}

.btn-auth:hover {
  background-color: var(--accent-green-hover);
  box-shadow: 2px 2px 0px 0px var(--shadow-color);
  transform: translate(2px, 2px);
}

.auth-link {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.3rem;
  color: var(--accent-brown);
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "VT323", monospace;
}
.auth-link:hover {
  color: var(--accent-green);
}

/* Pesan Error/Sukses */
.auth-message {
  padding: 1rem;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  box-shadow: none;
  border-radius: 0; /* Pastikan tidak ada border radius tersembunyi */
}

.auth-message.error {
  background: var(--accent-red-bg);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}

.auth-message.success {
  background: var(--accent-green-bg);
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
}

/* --- PERBAIKAN: Membuat Sisi Register FULL SPAN --- */
/* Ketika kartu diputar, kita ubah layout grid untuk sisi belakang */
.flipper.is-flipped .back {
  /* Layout sisi belakang (register) menjadi 1 kolom di desktop */
  grid-template-columns: 1fr;
}

/* Sembunyikan sidebar di sisi register */
.flipper.is-flipped .back .login-image-sidebar {
  display: none;
}

/* Ini menargetkan wrapper form di sisi belakang (registrasi) */
.flipper.is-flipped .back .auth-form-wrapper {
  max-width: none; /* Memungkinkan form mengambil lebar container (900px) */
  width: 100%;
  margin: 0 auto;
  padding: 2rem; /* Tambahkan padding ke wrapper */
}

/* Perbaikan: Batasi konten form di sisi belakang agar tidak terlalu melebar */
.flipper.is-flipped .back .auth-box {
  max-width: 650px; /* Batasi lebar form internal */
  width: 100%;
  margin: 0 auto; /* Pusatkan form internal */
  padding: 2.5rem;
}