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

:root{
  --hijau-tua:#0b3d2e;
  --hijau:#0f5c3f;
  --hijau-terang:#1f8a5f;
  --emas:#c9a13b;
  --emas-terang:#e8c765;
  --cream:#faf6ea;
  --abu:#6b7280;
  --merah:#c0392b;
  --radius:16px;
  --shadow:0 10px 30px rgba(11,61,46,.12);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Cairo',sans-serif;
  background:
    radial-gradient(circle at 0 0, rgba(201,161,59,.10) 0, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(15,92,63,.10) 0, transparent 45%),
    var(--cream);
  color:#1f2937;
  min-height:100vh;
}

.islamic-pattern{
  position:fixed; inset:0; z-index:-1; opacity:.06; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, var(--hijau) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(-45deg, var(--emas) 0 2px, transparent 2px 40px);
}

.ornament-line{display:flex; align-items:center; gap:10px; margin:14px 0;}
.ornament-line::before,.ornament-line::after{content:''; flex:1; height:2px; background:linear-gradient(90deg, transparent, var(--emas), transparent);}
.ornament-diamond{width:10px;height:10px; background:var(--emas); transform:rotate(45deg); flex-shrink:0;}

.arch-top{border-radius: 60px 60px var(--radius) var(--radius);}
a{color:inherit;text-decoration:none;}

.btn{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:15px;
  border:none; border-radius:12px; padding:13px 22px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg, var(--hijau-terang), var(--hijau-tua)); color:#fff; box-shadow:0 8px 20px rgba(15,92,63,.35);}
.btn-primary:hover{box-shadow:0 10px 26px rgba(15,92,63,.45);}
.btn-gold{background:linear-gradient(135deg, var(--emas-terang), var(--emas)); color:var(--hijau-tua); box-shadow:0 8px 20px rgba(201,161,59,.35);}
.btn-outline{background:transparent; border:2px solid var(--hijau); color:var(--hijau);}
.btn-outline:hover{background:var(--hijau); color:#fff;}
.btn-danger{background:#fdecea; color:var(--merah);}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:9px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:not-allowed;}

.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(201,161,59,.25);}

label{font-size:13px; font-weight:600; color:var(--hijau-tua); display:block; margin-bottom:6px;}
.field{margin-bottom:18px;}
input[type=text], input[type=tel], input[type=password], select, textarea{
  width:100%; padding:12px 14px; border-radius:11px; border:1.5px solid #e2e0d4;
  font-family:'Cairo',sans-serif; font-size:14.5px; background:#fff; color:#1f2937;
  transition:border .15s;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--hijau-terang);}
textarea{resize:vertical; min-height:90px;}

.toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-20px);
  background:var(--hijau-tua); color:#fff; padding:14px 22px; border-radius:12px;
  font-weight:600; font-size:14px; box-shadow:0 10px 25px rgba(0,0,0,.2);
  opacity:0; transition:all .3s ease; z-index:9999; pointer-events:none; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--merah);}

.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--emas); border-radius:10px;}
::-webkit-scrollbar-track{background:transparent;}