/* =========================
   SERHENDI ITIKAF - APP.CSS (FINAL)
   Yeşil + Gold / Ramazan motifli
   ========================= */

:root{
  --green:#0f6d3b;
  --green2:#083b22;
  --gold:#d4af37;
  --gold2:#b8871a;

  --bg1:#f4fbf6;
  --card: rgba(255,255,255,.92);
  --text:#0b1b12;
  --muted:#51645b;

  --border: rgba(15,109,59,.18);

  --danger:#b42318;
  --dangerBg: rgba(180,35,24,.10);

  --ok:#067647;
  --okBg: rgba(6,118,71,.10);
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  padding:18px 12px;

  /* ana arka plan (gold + green ışık) */
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(15,109,59,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), #ffffff);
}

/* Islamî geometrik pattern (dosyasız overlay) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Cpath d='M130 10 L170 50 L130 90 L90 50 Z'/%3E%3Cpath d='M130 90 L170 130 L130 170 L90 130 Z'/%3E%3Cpath d='M130 170 L170 210 L130 250 L90 210 Z'/%3E%3Cpath d='M10 130 L50 90 L90 130 L50 170 Z'/%3E%3Cpath d='M250 130 L210 90 L170 130 L210 170 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
}

/* İçerik overlay üstünde kalsın */
.wrap{
  max-width:460px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* =========================
   TOP BAR
   ========================= */
.topbar{
  border-radius:20px;
  padding:18px 18px;
  background: linear-gradient(120deg, var(--green2), var(--green));
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}

/* gold ışık halesi */
.topbar::before{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:280px;
  height:280px;
  background: radial-gradient(circle, rgba(212,175,55,.35), transparent 62%);
  transform: rotate(25deg);
  opacity:.95;
}

/* alt gold çizgi */
.topbar::after{
  content:"";
  position:absolute;
  left:-40px;
  right:-40px;
  bottom:0;
  height:3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.95;
}

.title{
  font-size:20px;
  font-weight:950;
  letter-spacing:.2px;
  color:#fff;
  position:relative;
}

.subtitle{
  font-size:13px;
  color:rgba(255,255,255,.86);
  margin-top:6px;
  position:relative;
}

.goldline{
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  border-radius:999px;
  margin-top:12px;
  position:relative;
}

/* =========================
   CARD / FORM
   ========================= */
.card{
  margin-top:16px;
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  padding:16px;
  backdrop-filter: blur(8px);
}

label{
  display:block;
  margin-top:10px;
  font-weight:900;
  font-size:13px;
  color:var(--green2);
}

input, select{
  width:100%;
  padding:13px 14px;
  font-size:16px;
  border-radius:14px;
  border:1px solid rgba(15,109,59,.22);
  margin-top:6px;
  outline:none;
  background:#fff;
}

input:focus, select:focus{
  border-color: rgba(212,175,55,.70);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}

/* =========================
   BUTTON
   ========================= */
.btn{
  width:100%;
  padding:14px;
  margin-top:14px;
  border:0;
  border-radius:16px;
  cursor:pointer;
  font-size:16px;
  font-weight:950;
  color:#fff;
  background: linear-gradient(135deg, var(--green), var(--green2));
  box-shadow: 0 14px 24px rgba(15,109,59,.20);
  position:relative;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  border:1px solid rgba(212,175,55,.55);
  pointer-events:none;
}

.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Secondary buton (istersen kullan) */
.btn.secondary{
  background: rgba(255,255,255,.85);
  color: var(--green2);
  border: 1px solid var(--border);
  box-shadow:none;
}
.btn.secondary::before{ display:none; }

/* =========================
   MESSAGE BOX
   ========================= */
.msg{
  display:none;
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  line-height:1.35;
}

.msg.ok{
  display:block;
  background: var(--okBg);
  border-color: rgba(6,118,71,.20);
  color: var(--ok);
}

.msg.bad{
  display:block;
  background: var(--dangerBg);
  border-color: rgba(180,35,24,.20);
  color: var(--danger);
}

.small{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

/* =========================
   LOGIN RAMAZAN LAYER
   (login.html içinde .ramadan-bg kullanıyorsun)
   ========================= */
.ramadan-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* sol-sağ desen bandı (login’e ekstra hava) */
.ramadan-bg::before,
.ramadan-bg::after{
  content:"";
  position:absolute;
  top:-10%;
  bottom:-10%;
  width:140px;
  opacity:.22;
  background-size: 28px 28px;
  background-repeat: repeat;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(212,175,55,.20) 2px, transparent 3px),
    radial-gradient(circle at 0 0, rgba(15,109,59,.12) 2px, transparent 3px),
    radial-gradient(circle at 28px 0, rgba(15,109,59,.12) 2px, transparent 3px),
    radial-gradient(circle at 0 28px, rgba(15,109,59,.12) 2px, transparent 3px),
    radial-gradient(circle at 28px 28px, rgba(15,109,59,.12) 2px, transparent 3px);
  filter:saturate(1.05);
}
.ramadan-bg::before{ left:0; }
.ramadan-bg::after{ right:0; transform: scaleX(-1); }

.ramadan-orn{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  width:min(880px, 92vw);
  opacity:.24;
}

/* =========================
   LOGO FOOTER
   ========================= */
.brand-footer{
  margin-top: 16px;
  text-align: center;
  opacity: .95;
}

.brand-logo{
  width: 180px;
  max-width: 65vw;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.10));
  border-radius: 14px;
}

.brand-note{
  margin-top: 8px;
  font-weight: 800;
  color: rgba(10, 78, 42, .78);
  font-size: 12px;
}

/* =========================
   MOBILE TWEAK
   ========================= */
@media (max-width:420px){
  body{ padding:14px 10px; }
  .wrap{ max-width: 440px; }
  .topbar{ padding:16px 16px; border-radius:18px; }
  .card{ border-radius:18px; }
}

/* 🌙 SULTAN WELCOME */

.sultan-bg{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg,#0b3d2b,#0f6d3b);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.sultan-text{
  text-align:center;
  color:#ffd700;
  font-family: 'Great Vibes', cursive;
  font-size:42px;
  line-height:1.8;
  text-shadow:0 0 18px rgba(255,215,0,.4);
}

.sultan-text div{
  margin:12px 0;
  opacity:0;
}