:root {
  --bg-color: #1a1a1a;
  --text-color: #ffeb3b;
  --btn-color: #cc0000;
  --btn-hover-bg: #ffffff;
  --btn-hover-text: #1a1a1a;
  --btn-text-color: #ffeb3b;
  --gold-gradient: linear-gradient(to right, #d4af37, #ffd700);
  --silver-gradient: linear-gradient(to right, #c0c0c0, #f5f5f5);
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--bg-color);
color: var(--btn-text-color);
}

header {
  text-align: center;
  padding: 1rem;
  position: relative;
}

#btn-theme {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  background-color: var(--btn-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#btn-theme:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: scale(1.05);
}

#bkh-title {
  font-size: 2.5rem;
  font-weight: bold;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#app-title {
  font-size: 1.2rem;
  font-weight: bold;
  background: var(--silver-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

main {
  display: flex;
  min-height: 85vh;
}

.sidebar {
  width: 220px;
  background-color: #2c2c2c;
  padding: 1rem;
  overflow-y: auto;
}

.menu-btn {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background-color: var(--btn-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-btn:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: scale(1.05);
}

#content {
  flex: 1;
  padding: 1rem;
  background-color: #262626;
  overflow-y: auto;
}

textarea {
  width: 100%;
  min-height: 100px;
  background-color: #000;
  color: #0f0;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  resize: vertical;
  box-sizing: border-box;
}

button {
  font-weight: bold;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  background-color: var(--btn-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: scale(1.05);
}

.btn-salin {
  font-weight: bold;
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  background-color: var(--btn-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-salin:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: scale(1.05);
}

.fitur-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.hasil-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.hasil-col {
  background: #111;
  padding: 1rem;
  border-radius: 6px;
  box-sizing: border-box;
  min-width: 300px;
}

.hasil-col h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--text-color);
}

.footer-text {
  font-size: 0.75rem;
  opacity: 0.5;
  color: #fff;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  left: 1rem;
}

#btn-group-fixed {
  position: fixed;
  left: 1rem;
  bottom: 4.5rem; /* JAUHKAN DARI COPYRIGHT */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 999;
}

#btn-group-fixed button {
  width: 150px;
  padding: 0.6rem 0;
  font-weight: bold;
}

.glass-login-box {
  background: rgba(24, 24, 28, 0.7);
  border-radius: 26px;
  box-shadow: 0 4px 64px 6px #ffd70055, 0 1.5px 40px #1119;
  /* Batasi lebar & auto center */
  max-width: 370px;
  min-width: 300px;
  margin: auto;
  padding: 2.2rem 2.2rem 1.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo.gold-glow {
  width: 100px;
  height: 100px;
  margin-bottom: 18px;
  border-radius: 22px;
  padding: 4px;
  background: #000;
  position: relative;
  z-index: 1;
  border: 2px solid #ffd700; /* BORDER EMAS TIPIS */
}

.login-logo.gold-glow:hover,
.login-logo.gold-glow:focus {
  filter: drop-shadow(0 0 36px #ffd700bb) brightness(1.13);
  box-shadow: 0 0 48px 12px #ffd700bb, 0 0 10px #fff5;
}

#form-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  margin-top: 1rem;
}

.login-input {
  display: block;
  width: 90%;
  max-width: 270px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  font-size: 1.05rem;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  outline: none;
  box-shadow: 0 2px 12px #2224;
  transition: box-shadow 0.2s, background 0.2s;
  text-align: center; /* opsional kalau kamu mau teksnya di tengah */
}
.login-input:focus {
  background: rgba(255,255,255,0.25);
  box-shadow: 0 4px 16px #ffd70099, 0 2px 10px #2228;
}

.login-label {
  display: block;
  width: 90%;
  max-width: 270px;
  margin: 0 auto;
  font-size: 1.20rem;
  font-weight: 600;
  color: #ffd700;
  text-align: center;
  margin-bottom: 0.2rem;
  letter-spacing: 0.3px;
}

.login-btn-glass {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.7rem 0;
  font-size: 1.08rem;
  font-weight: bold;
  border: none;
  border-radius: 9px;
  background: linear-gradient(90deg, #ffd700 0%, #ff9900 100%);
  color: #111;
  box-shadow: 0 4px 28px #ffd70040, 0 1.5px 10px #1116;
  cursor: pointer;
  transition: box-shadow 0.25s, filter 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.login-btn-glass:before {
  content: "";
  position: absolute;
  left: -60px;
  top: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(120deg, #fff8 0%, #fff6 100%);
  filter: blur(5px);
  opacity: 0.38;
  transform: skewX(-24deg);
  transition: left 0.7s cubic-bezier(.61,-0.02,.6,1.2);
  pointer-events: none;
}
.login-btn-glass:hover:before,
.login-btn-glass:focus:before {
  left: 110%;
}
.login-btn-glass:active {
  filter: brightness(1.16) blur(0.2px);
  box-shadow: 0 4px 32px #ffd700a0, 0 0 16px #fff2;
}

.login-title.gold-text {
  font-size: 1.5rem;
  margin: 0.5rem 0 0.6rem 0;
}
.gold-text .subtitle {
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  margin-top: 2px;
  color: #fffbe4;
  opacity: 0.92;
}

.login-footer {
  color: #ffffff;
  font-size: 0.97rem;
  margin-top: 1.4rem;
  text-align: center;
  letter-spacing: 1px;
  opacity: 0.7;
  text-shadow: 0 1px 3px #0005;
  user-select: none;
  width: 100%;
}

@media (max-width: 420px) {
  .glass-login-box {
    padding: 1.1rem !important;
    max-width: 98vw;
    min-width: 0;
  }
  .login-logo.gold-glow {
    width: 66px;
    height: 66px;
  }
}

/* Animasi glossy emas (jika ingin versi hidup) */
@keyframes border-glow-loop {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* KOTAK LOGIN UTAMA TETAP */
.glass-login-box {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  padding: 2.2rem 2.2rem 1.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 370px;
  margin: auto;
  background: rgba(24, 24, 28, 0.85);
  box-shadow: 0 0 24px #000a;
}

/* BORDER TIPIS DI LUARNYA */
.glass-login-box::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  border-radius: 22px;
  border: 1.5px solid transparent;
  background: linear-gradient(120deg, #d4af37, #fbff03, #ffcc00, #ffffff);
  background-size: 300% 300%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: border-glow-loop 6s linear infinite;
  pointer-events: none;
}

@keyframes logo-border-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.login-logo.gold-glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: linear-gradient(120deg, #d4af37, #ffd700, #ffb300, #d4af37);
  background-size: 300% 300%;
  animation: logo-border-glow 6s linear infinite;
  z-index: -1;
}