/* ==========================================================================
   TEMA: KACA KRISTAL BIRU
   Premium Glassmorphism + Soft Neumorphism
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --biru-dalam:      #071B34;
  --biru-tengah:     #0E3358;
  --biru-kilau:      #3FD0FF;
  --putih-es:        #EAF6FF;
  --kaca-isi:        rgba(178, 221, 255, 0.14);
  --kaca-isi-kuat:   rgba(178, 221, 255, 0.22);
  --kaca-tepi:       rgba(255, 255, 255, 0.38);
  --bayangan-dalam:  rgba(3, 12, 26, 0.55);
  --bayangan-terang: rgba(255, 255, 255, 0.07);
  --teks-lembut:     rgba(234, 246, 255, 0.72);
  --emas:            #E3BE6C;
  --emas-redup:      rgba(227, 190, 108, 0.55);
}

/* ---------- Latar Kristal Biru ---------- */
body.color-body,
body.login-page{
  font-family: 'Inter', 'Arial', sans-serif !important;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(63,208,255,0.20), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(103,178,255,0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(30,90,150,0.30), transparent 65%),
    linear-gradient(160deg, var(--biru-dalam) 0%, var(--biru-tengah) 55%, #0A2647 100%) !important;
  color: var(--putih-es);
  position: relative;
  overflow-x: hidden;
}

body.color-body::before,
body.login-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 2px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 1px, transparent 2px);
  background-size: 260px 260px, 320px 320px, 300px 300px, 220px 220px;
  opacity: 0.5;
}

body.color-body .latar-bottom{ opacity:0.25; filter:saturate(0.4) brightness(1.4) hue-rotate(160deg); }

/* ---------- Motif geometris khas madrasah (girih bintang delapan) ---------- */
body.color-body::after,
body.login-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23E3BE6C' stroke-width='0.7'%3E%3Crect x='6' y='6' width='52' height='52'/%3E%3Cpath d='M32 6 L58 32 L32 58 L6 32 Z'/%3E%3Ccircle cx='32' cy='32' r='18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
}

/* ---------- Pita ornamen ubin (tepi khas arsitektur masjid/madrasah) ---------- */
.header-home,
.left-register-inner,
.form-register-inner,
.login-box-body{
  overflow: hidden;
}
.header-home::before,
.left-register-inner::before,
.form-register-inner::before,
.login-box-body::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background: repeating-linear-gradient(135deg, var(--emas) 0 8px, var(--biru-kilau) 8px 16px);
  z-index: 1;
}

/* ---------- Aksen bintang delapan di judul ---------- */
.header-home-title h1::before,
.judul h1::before,
.login-box-body h3::before{
  content:"✦";
  display:inline-block;
  color: var(--emas);
  margin-right:8px;
  text-shadow:0 0 10px rgba(227,190,108,0.6);
}

h1,h2,h3,h4,h5{ font-family:'Outfit','Arial',sans-serif !important; letter-spacing:.2px; }

/* ---------- Kartu Kaca (Glassmorphism inti) ---------- */
.header-home,
.left-register-inner,
.form-register-inner,
.box-kepuasan-title,
.box-jawaban,
.login-box-body{
  background: var(--kaca-isi) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--kaca-tepi) !important;
  box-shadow:
    0 8px 32px 0 rgba(3,12,26,0.45),
    inset 0 1px 0 0 rgba(255,255,255,0.35),
    inset 0 0 40px 0 rgba(120,190,255,0.06) !important;
  position: relative;
}

.header-home{ border-radius: 16px; margin-left:0; margin-right:0; }
.left-register-inner,
.form-register-inner{ border-radius: 20px !important; border-width: 1px !important; }

/* kilau tipis di tepi atas kartu, kesan pantulan cahaya pada kaca */
.header-home::after,
.left-register-inner::after,
.form-register-inner::after,
.login-box-body::after{
  content:"";
  position:absolute; top:0; left:6%; right:6%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  opacity:0.6;
}

.header-home-title h1{ color: var(--putih-es) !important; text-shadow:0 0 18px rgba(63,208,255,0.35); }
.header-home-title p{ color: var(--teks-lembut) !important; }
.tanggal p{ color: var(--teks-lembut) !important; }

.judul h1{ color: var(--biru-kilau) !important; text-shadow:0 0 16px rgba(63,208,255,0.4); }
.judul h2{ color: var(--putih-es) !important; }
.judul h3{ color: var(--teks-lembut) !important; }
.judul p{ color: var(--teks-lembut) !important; }

/* ---------- Tombol Neumorfik-Kaca ---------- */
.link-top,
.ambil p,
.heading-register h2,
input[type="submit"],
.btn-info,
button[type="submit"]{
  background: linear-gradient(145deg, rgba(90,170,255,0.55), rgba(40,110,200,0.55)) !important;
  border: 1px solid var(--emas-redup) !important;
  color: var(--putih-es) !important;
  box-shadow:
    5px 5px 12px var(--bayangan-dalam),
    -4px -4px 10px var(--bayangan-terang),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  text-shadow: 0 0 10px rgba(63,208,255,0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.link-top:hover,
.ambil p:hover,
input[type="submit"]:hover,
.btn-info:hover,
button[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow:
    7px 7px 16px var(--bayangan-dalam),
    -5px -5px 12px var(--bayangan-terang),
    0 0 22px rgba(63,208,255,0.55) !important;
}
.link-top:active,
input[type="submit"]:active{
  transform: translateY(0);
  box-shadow: inset 3px 3px 8px var(--bayangan-dalam), inset -3px -3px 8px var(--bayangan-terang) !important;
}

.batal{ background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)) !important; }

.btn,
.ambilfoto,
.btn-success,
input[type="button"]{
  background: linear-gradient(145deg, rgba(90,170,255,0.55), rgba(40,110,200,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: var(--putih-es) !important;
  border-radius: 8px !important;
  box-shadow:
    5px 5px 12px var(--bayangan-dalam),
    -4px -4px 10px var(--bayangan-terang),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  text-shadow: 0 0 10px rgba(63,208,255,0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover,
.ambilfoto:hover,
.btn-success:hover,
input[type="button"]:hover{
  transform: translateY(-2px);
  box-shadow:
    7px 7px 16px var(--bayangan-dalam),
    -5px -5px 12px var(--bayangan-terang),
    0 0 22px rgba(63,208,255,0.55) !important;
}
.batal{ box-shadow:5px 5px 12px var(--bayangan-dalam), -4px -4px 10px var(--bayangan-terang) !important; }

/* ---------- Input Neumorfik terbenam di Kaca ---------- */
.form-control,
select.form-control:not([size]):not([multiple]){
  background: rgba(6,26,50,0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--putih-es) !important;
  box-shadow:
    inset 3px 3px 8px rgba(2,10,22,0.55),
    inset -3px -3px 8px rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
}
.form-control::placeholder{ color: rgba(234,246,255,0.45) !important; }
.form-control:focus{
  border-color: var(--biru-kilau) !important;
  box-shadow:
    inset 2px 2px 6px rgba(2,10,22,0.5),
    0 0 0 3px rgba(63,208,255,0.25) !important;
}

.isian-left label{
  background: rgba(90,170,255,0.28) !important;
  color: var(--putih-es) !important;
  box-shadow: 2px 2px 6px var(--bayangan-dalam), -2px -2px 6px var(--bayangan-terang);
}
.isian-left label:after{ border-left-color: rgba(90,170,255,0.28) !important; }

/* ---------- Survei kepuasan ---------- */
.box-kepuasan-title{ border-radius:14px !important; }
.box-kepuasan-nama{ color: var(--putih-es) !important; }
.pertanyaan h1{ color: var(--putih-es) !important; }
.box-jawaban{ border-radius:10px !important; }
.box-jawaban p{ color: var(--putih-es) !important; }
.kepuasan-judul h1{ color: var(--putih-es) !important; }

/* ---------- Login admin ---------- */
.login-box-body{ border-radius:20px !important; padding:28px 26px !important; }
.login-box-body h3,
.login-box-msg{ color: var(--putih-es) !important; }
.login-box-body b{ color: var(--biru-kilau) !important; }

::selection{ background: rgba(63,208,255,0.35); color:#fff; }