/* =========================================
   LUXE – Obsidian & Gold UI  (RTL Persian)
   نسخه‌ی لوکس با کانتینر باریک‌تر + بک‌گراند 1920×1080
   ========================================= */

@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&family=Cinzel:wght@500;700&display=swap");

:root{
  /* پالت لوکس */
  --onyx:#0a0b0d;              /* پس‌زمینه آبسیدین */
  --onyx-2:#0f1114;
  --ink:#15181d;               /* لایه‌ی تیره‌تر کارت */
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:#ededf1;
  --text-dim:#a7adb9;

  /* طلایی‌ها */
  --gold:#d4af37;
  --gold-soft:#f0d98a;
  --champagne:#f7eed3;

  /* وضعیت‌ها */
  --success:#1ecb9c;
  --error:#ef3e5c;
  --warn:#ffcc66;

  /* ابعاد/سایه‌ها */
  --radius:22px;
  --blur:16px;
  --shadow-xl:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md:0 14px 34px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);

  /* کانتینر باریک‌تر برای کوتاه شدن طول باکس‌ها (عرض) */
  --container: 520px; /* قبلاً 760px بود */
}

/* ریست نرم */
*,*:before,*:after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html[dir="rtl"] body{ direction:rtl }

body{
  margin:0;
  min-height:100dvh;
  color:var(--text);
  font-family:"Vazirmatn",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Arabic","IRANSans",sans-serif;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(900px 520px at 10% 0%, rgba(240,217,138,.12), transparent 55%),
    linear-gradient(180deg, var(--onyx) 0%, var(--onyx-2) 100%);
  overflow-x:hidden;
}

/* نویز لطیف + هاله چرخان */
body::before{
  content:"";
  position:fixed; inset:-40vmax;
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.06) 0 12%, transparent 12% 25%, rgba(255,255,255,.04) 25% 37%, transparent 37% 50%, rgba(255,255,255,.03) 50% 62%, transparent 62% 75%, rgba(255,255,255,.02) 75% 87%, transparent 87% 100%);
  filter:blur(80px) saturate(120%);
  opacity:.28; pointer-events:none;
  animation:halo 28s linear infinite;
}
@keyframes halo{ to{ transform:rotate(360deg) } }

/* کانتینر مرکزی – عرض کوتاه‌تر */
body>h1, form, form + p{
  width:min(var(--container), 92vw);
  margin-inline:auto;
}

/* تیتر لوکس */
h1{
  margin-top:clamp(22px, 5dvh, 60px);
  margin-bottom:18px;
  font-family:"Cinzel","Vazirmatn",serif;
  font-weight:700;
  letter-spacing:.5px;
  text-align:center;
  font-size: clamp(24px, 3.4vw, 40px);
  background: linear-gradient(90deg, var(--champagne), var(--gold), var(--gold-soft));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow: 0 0 18px rgba(212,175,55,.15);
}

/* کارت شیشه‌ای */
form{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px; /* کمی جمع‌وجورتر */
  padding: clamp(16px, 2.8vw, 24px);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--glass-2), var(--glass)),
    radial-gradient(1200px 220px at 10% 0%, rgba(212,175,55,.12), transparent 60%);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: var(--shadow-xl);
  overflow:hidden;
}

/* قاب طلایی */
form::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  padding:1px;
  background:
    linear-gradient(135deg, rgba(247,238,211,.85), rgba(212,175,55,.65) 40%, rgba(240,217,138,.7) 70%, rgba(212,175,55,.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55;
}

/* برچسب و ورودی */
label{
  display:grid; gap:8px;
  font-weight:700; color:var(--text-dim); margin:0;
  font-size:13px; letter-spacing:.2px;
}

input[name="steam"]{
  appearance:none; width:100%;
  border-radius:14px; /* کوچیک‌تر */
  border:1px solid rgba(247,238,211,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    radial-gradient(600px 140px at 10% 0%, rgba(240,217,138,.1), transparent 60%);
  color:var(--text);
  /* ارتفاع کوتاه‌تر */
  padding:10px 14px;
  font-size:14px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .06s ease, background .3s ease;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,.015);
}
input[name="steam"]::placeholder{ color: color-mix(in oklab, var(--text-dim) 72%, transparent) }
input[name="steam"]:hover{
  border-color: color-mix(in oklab, var(--gold) 50%, rgba(247,238,211,.2));
}
input[name="steam"]:focus{
  border-color: var(--gold);
  box-shadow:
    0 0 0 6px color-mix(in oklab, var(--gold) 22%, transparent),
    0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* دکمه طلایی – کوچیک‌تر */
button[type="submit"]{
  all:unset; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; user-select:none;
  border-radius:14px;
  padding:9px 16px;           /* کوچیک‌تر */
  font-weight:800; letter-spacing:.3px;
  font-size:14px;             /* کوچیک‌تر */
  color:#0b0f12;
  background:
    linear-gradient(180deg, #fff8e6, #f4e4b0 38%, #daba49 70%, #b88f1b 100%);
  border: 1px solid rgba(184,143,27,.65);
  box-shadow:
    0 8px 22px rgba(212,175,55,.33),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(160,120,18,.35);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
button[type="submit"]:hover{
  filter: brightness(1.06);
  box-shadow:
    0 12px 28px rgba(212,175,55,.44),
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(160,120,18,.45);
}
button[type="submit"]:active{
  transform: translateY(1px) scale(.99);
}

/* ریسپانسیو */
@media (max-width:640px){
  form{ grid-template-columns:1fr }
  button[type="submit"]{ width:100% }
}

/* باکس نتیجه */
form + p{
  margin-top:12px;
  background:
    linear-gradient(180deg, var(--glass-2), var(--glass)),
    radial-gradient(900px 200px at 100% 0%, rgba(212,175,55,.12), transparent 55%);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) - 6px);
  padding:12px 14px;
  line-height:1.7; color:var(--text);
  box-shadow: var(--shadow-md);
  position:relative; overflow:hidden;
}

/* خط وضعیت طلایی در حاشیه */
form + p::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:6px;
  background: linear-gradient(180deg, var(--champagne), var(--gold));
  opacity:.9;
}

/* رنگ وضعیت‌ها */
p[data-state="success"]{ border-color: color-mix(in oklab, var(--success) 40%, var(--border)) }
p[data-state="success"]::before{ background: var(--success) }
p[data-state="error"]{ border-color: color-mix(in oklab, var(--error) 40%, var(--border)) }
p[data-state="error"]::before{ background: var(--error) }
p[data-state="warn"]{ border-color: color-mix(in oklab, var(--warn) 40%, var(--border)) }
p[data-state="warn"]::before{ background: var(--warn) }

/* لینک‌ها */
a{
  color:var(--gold-soft); text-decoration:none;
  border-bottom:1px dashed color-mix(in oklab, var(--gold) 60%, transparent);
  transition: color .15s ease, border-color .15s ease, text-shadow .2s ease;
}
a:hover{
  color:var(--gold);
  text-shadow: 0 0 10px rgba(212,175,55,.35);
  border-color: color-mix(in oklab, var(--gold) 80%, transparent);
}

/* انتخاب متن */
::selection{ background: color-mix(in oklab, var(--gold) 28%, transparent); color:var(--onyx) }

/* اسکرول‌بار لوکس */
*::-webkit-scrollbar{ width:12px; height:12px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--champagne), var(--gold));
  border-radius:999px; border:3px solid transparent; background-clip:content-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Arabic","IRANSans", sans-serif;
  
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(900px 520px at 10% 0%, rgba(240,217,138,.12), transparent 55%),
    linear-gradient(180deg, var(--onyx) 0%, var(--onyx-2) 100%);
  overflow-x: hidden;
  position: relative;
}

/* لایه عکس با شفافیت */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("bg.jpg") center/cover no-repeat;
  opacity: 0.18; /* 🔹 غلظت عکس (۰.۱۶ تا ۰.۲۵ تست کن) */
  filter: brightness(0.9) contrast(1.1); /* 🔹 می‌تونی کم/زیاد کنی */
  z-index: -1; /* پشت همه چیز بمونه */
}