/* YACIMA – Nuansa Navy & Gold */
:root{
  --navy:#011e44;
  --navy-2:#03306b;
  --gold:#c7993c;
  --gold-2:#e2b75a;
  --cream:#f4f4f3;
  --ink:#0b1220;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Tahoma,sans-serif}
html,body{min-height:100%}
body{
  min-height:100vh;color:#1f2937;padding:20px;position:relative;overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(199,153,60,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(3,48,107,.35), transparent 60%),
    linear-gradient(160deg, #021735 0%, #011e44 45%, #03306b 100%);
}
/* Islamic geometric pattern overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23c7993c' stroke-width='1'><path d='M60 4l14 24h28L88 52l10 28-38-18-38 18 10-28L18 28h28z'/><circle cx='60' cy='60' r='28'/><path d='M60 12a48 48 0 010 96 48 48 0 010-96z'/></g></svg>");
  background-size:160px 160px;
}
/* floating stars/sparkles */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(226,183,90,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(2px 2px at 30% 78%, rgba(226,183,90,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 70%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(2px 2px at 55% 40%, rgba(226,183,90,.5), transparent 60%);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.35}to{opacity:.9}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(199,153,60,.45),0 18px 50px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 14px rgba(199,153,60,0),0 22px 60px rgba(0,0,0,.55)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.container{max-width:560px;margin:0 auto;position:relative;z-index:1}
.admin-container{max-width:1100px;margin:0 auto;position:relative;z-index:1}

.card{
  background:linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  border-radius:22px;padding:30px 26px;margin-bottom:20px;position:relative;
  border:1px solid rgba(199,153,60,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7);
  animation:fadeUp .6s ease both;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(600px 200px at 50% -50px, rgba(199,153,60,.18), transparent 60%);
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  background-size:200% 100%;animation:shimmer 4s linear infinite;
}

.logo{
  display:block;max-width:170px;width:55%;margin:0 auto 14px;
  filter:drop-shadow(0 8px 20px rgba(199,153,60,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.25));
  animation:floatY 5s ease-in-out infinite;
}
h1{font-size:1.35rem;color:var(--navy);text-align:center;margin-bottom:6px;letter-spacing:.3px}
h2{font-size:1.05rem;color:var(--navy);margin-bottom:14px}
.subtitle{
  text-align:center;margin-bottom:18px;font-size:.95rem;font-weight:700;letter-spacing:.4px;
  background:linear-gradient(90deg,var(--navy),var(--gold),var(--navy));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}

/* Ornamental divider with crescent */
.subtitle + .steps{position:relative}
.subtitle + .steps::before{
  content:"";display:block;height:18px;margin:-6px auto 14px;width:120px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'><g fill='none' stroke='%23c7993c' stroke-width='1.2'><path d='M0 9h45'/><path d='M75 9h45'/><path d='M60 3a6 6 0 100 12 4.5 6 0 010-12z' fill='%23c7993c'/></g></svg>") center/contain no-repeat;
  position:absolute;left:50%;top:-26px;transform:translateX(-50%);
}

.steps{display:flex;justify-content:space-between;margin:24px 0 18px;gap:6px}
.step{flex:1;text-align:center;padding:10px 6px;border-radius:10px;background:#eef0f4;color:#94a3b8;font-size:.78rem;font-weight:700;border:1px solid transparent}
.step.active{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-color:var(--gold);
  box-shadow:0 6px 16px rgba(1,30,68,.35), inset 0 0 0 1px rgba(199,153,60,.5);
}

.field{margin-bottom:14px}
label{display:block;font-weight:700;margin-bottom:6px;font-size:.92rem;color:var(--navy)}

input[type=text],input[type=password],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;padding:12px 14px;border:1px solid #d8dde6;border-radius:10px;font-size:.95rem;background:#fff;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(199,153,60,.18)}

.radio-group{display:grid;gap:8px}
.radio-opt{display:flex;align-items:center;padding:11px 13px;border:1px solid #d8dde6;border-radius:10px;cursor:pointer;transition:.18s;background:#fff}
.radio-opt:hover{border-color:var(--gold);background:#fffaf0;transform:translateY(-1px)}
.radio-opt input{margin-right:10px;accent-color:var(--navy)}
.radio-opt.selected{border-color:var(--gold);background:linear-gradient(135deg,#fff7e6,#fff);box-shadow:0 4px 12px rgba(199,153,60,.18)}

.amount-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.btn{
  display:inline-block;width:100%;padding:14px;color:#fff;border:none;border-radius:12px;
  font-size:1rem;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;transition:.2s;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  box-shadow:0 8px 22px rgba(1,30,68,.35), inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(1,30,68,.45)}
.btn:hover::after{left:120%}
.btn-secondary{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1b1300;animation:glowPulse 2.6s ease-in-out infinite}
.btn-sm{padding:8px 14px;width:auto;font-size:.85rem}
.btn-row{display:flex;gap:10px}

.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:.92rem}
.alert-success{background:#fff7e6;color:var(--navy);border:1px solid var(--gold)}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

.bank-info{background:#fff;border:1px dashed var(--gold);border-radius:12px;padding:18px;margin-top:12px;text-align:center;position:relative}
.bank-info img{max-width:120px;margin:0 auto 8px;display:block}
.bank-info .rek{font-size:1.4rem;font-weight:800;color:var(--navy);letter-spacing:1.5px;margin:8px 0;
  background:linear-gradient(90deg,var(--navy),var(--gold),var(--navy));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}

.payment-tabs{display:flex;gap:8px;margin-bottom:14px}
.payment-tabs button{flex:1;padding:11px;border:1px solid #d8dde6;background:#fff;border-radius:10px;cursor:pointer;font-weight:700;color:#475569;transition:.15s}
.payment-tabs button:hover{border-color:var(--gold)}
.payment-tabs button.active{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-color:var(--gold)}

.qris-preview{text-align:center;padding:20px;background:#fff;border:1px dashed var(--gold);border-radius:12px}
.qris-preview img{max-width:280px;width:100%}

/* admin */
.admin-nav{background:#fff;border-radius:14px;padding:14px 18px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.18);border:1px solid rgba(199,153,60,.35)}
.admin-nav .brand{font-weight:800;color:var(--navy);margin-right:auto}
.admin-nav a{color:#374151;text-decoration:none;padding:7px 12px;border-radius:8px;font-size:.9rem}
.admin-nav a:hover,.admin-nav a.active{background:#fff7e6;color:var(--navy)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #e5e7eb}
th{background:#fff7e6;font-weight:700;color:var(--navy)}
tr:hover{background:#fbfaf7}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;padding:18px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.12);border-top:3px solid var(--gold)}
.stat .label{font-size:.78rem;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.stat .value{font-size:1.7rem;font-weight:800;color:var(--navy);margin-top:4px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:end}
.filter-row .field{margin-bottom:0;flex:1;min-width:140px}
@media(max-width:600px){.amount-grid{grid-template-columns:1fr}}