@font-face {
  font-family: "IRANBLACK";
  src: url("fonts/IRANBlack.woff2") format("woff2"),
       url("fonts/IRANBlack.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

*, *:after, *:before {
  box-sizing: border-box;
}

:root {
  --cord: hsl(210, 0%, calc((40 + (var(--on, 0) * 50)) * 1%));
  --opening: hsl(50, calc((10 + (var(--on, 0) * 80)) * 1%), calc((20 + (var(--on, 0) * 70)) * 1%));
  --feature: #0a0a0a;
  --accent: 210;
  --tongue: #e06952;
  --base-top: hsl(var(--accent), 0%, calc((40 + (var(--on, 0) * 40)) * 1%));
  --base-side: hsl(var(--accent), 0%, calc((20 + (var(--on, 0) * 40)) * 1%));
  --post: hsl(var(--accent), 0%, calc((20 + (var(--on, 0) * 40)) * 1%));
  --b-1: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
  --b-2: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.25);
  --b-3: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.5);
  --b-4: hsla(45, calc((0 + (var(--on, 0) * 0)) * 1%), calc((20 + (var(--on, 0) * 30)) * 1%), 0.25);
  --l-1: hsla(45, calc((0 + (var(--on, 0) * 20)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
  --l-2: hsla(45, calc((0 + (var(--on, 0) * 20)) * 1%), calc((50 + (var(--on, 0) * 50)) * 1%), 0.85);
  --shade-hue: 320;
  --t-1: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((30 + (var(--on, 0) * 60)) * 1%));
  --t-2: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((20 + (var(--on, 0) * 35)) * 1%));
  --t-3: hsl(var(--shade-hue), calc((0 + (var(--on, 0) * 20)) * 1%), calc((10 + (var(--on, 0) * 20)) * 1%));
}

body {
  min-height: 100vh;
  margin: 0;
  background: #121921;
  font-family: "IRANBLACK", sans-serif;
  overflow: hidden;
  direction: rtl; /* بۆ کوردی */
}

/* شاردنەوەی ڕادیۆ بەتنەکان */
label, input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =========================================
   💡 ستایلەکانی گڵۆپەکەی کۆدەکە
   ========================================= */
.lamp {
  display: none;
  height: 75vh;
  position: absolute;
  top: 50%;
  left: 10%; /* لەلای چەپی شاشەکە دەبێت */
  transform: translateY(-50%);
  overflow: visible !important;
  z-index: 1000;
}
.cord { stroke: var(--cord); }
.cord--rig { display: none; }
.lamp__tongue { fill: var(--tongue); }
.lamp__hit { cursor: pointer; opacity: 0; }
.lamp__feature { fill: var(--feature); }
.lamp__stroke { stroke: var(--feature); }
.lamp__mouth, .lamp__light { opacity: var(--on, 0); }
.shade__opening { fill: var(--opening); }
.shade__opening-shade { opacity: calc(1 - var(--on, 0)); }
.post__body { fill: var(--post); }
.base__top { fill: var(--base-top); }
.base__side { fill: var(--base-side); }
.top__body { fill: var(--t-3); }

/* =========================================
   🔐 فۆڕمی لۆگین (KKA2009)
   ========================================= */
.login-box {
  background: rgba(17, 24, 39, 0.9);
  border: 2px solid #facc15;
  border-radius: 24px;
  padding: 50px 80px;
  box-shadow: 0 0 50px rgba(250, 204, 21, 0.25);
  backdrop-filter: blur(6px);
  position: absolute;
  top: 50%;
  right: -800px; /* لە سەرەتادا شاردراوەتەوە لەلای ڕاست */
  transform: translateY(-50%);
  transition: right 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.3s ease;
  z-index: 5;
  text-align: center;
}

/* کاتێک گڵۆپەکە هەڵدەبێت کلاسێکی نوێ دەچێتە سەر body */
body.light-on .login-box {
  right: 50%;
  transform: translate(50%, -50%);
}

.login-box:hover { box-shadow: 0 0 80px rgba(250, 204, 21, 0.45); }
.logo { width: 140px; border-radius: 14px; margin-bottom: 20px; box-shadow: 0 0 35px rgba(250, 204, 21, 0.4); }
h3 { color: #facc15; margin: 0 0 10px 0; font-size: 26px; }
h2 { color: #facc15; margin: 5px 0; font-size: 30px; }
p.sub { font-size: 18px; color: #d1d5db; margin-bottom: 25px; }

.input-container { position: relative; margin-bottom: 20px; text-align: right; }
.input-container input { width: 340px; height: 50px; padding: 10px 45px 10px 15px; border-radius: 10px; border: 1px solid #facc15; background: #0f172a; color: #fff; font-size: 18px; outline: none; transition: 0.3s; font-family: "IRANBLACK", sans-serif; box-sizing: border-box; }
.input-container input:focus { border-color: #fde047; box-shadow: 0 0 15px #fde047; }
.input-container .icon { position: absolute; right: 12px; top: 12px; color: #facc15; font-size: 20px; }

button { width: 100%; background: #facc15; color: #0f172a; border: none; font-weight: bold; font-size: 20px; padding: 14px 20px; border-radius: 12px; cursor: pointer; transition: 0.3s; box-shadow: 0 0 20px rgba(250, 204, 21, 0.5); font-family: "IRANBLACK", sans-serif; margin-top: 10px; }
button:hover { background: #fde047; box-shadow: 0 0 35px rgba(250, 204, 21, 0.8); transform: scale(1.02); }
.error { color: #ff6666; margin-top: 15px; font-weight: bold; font-size: 16px; }

/* =========================================
   🌓 ستایلی مۆدی ڕۆژ بۆ پەڕەی لۆگین
   ========================================= */

/* ستایلی خودی دوگمەکە کە لە سەرەوەی لای ڕاست یان چەپ دەوەستێت */
.theme-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px; /* دەتوانیت بیکەیت بە left ئەگەر حەزت لێ بوو */
    z-index: 99999;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-family: "IRANBLACK", sans-serif;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    
    /* 🚀 ئەم ٣ دێڕە ناهێڵن دوگمەکە تێک بچێت یان بە شاشەکەدا درێژ ببێتەوە */
    width: auto !important; 
    max-width: max-content !important;
    flex: none !important; 
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* 🌞 کاتێک شاشەکە دەبێتە ڕۆژ */
body.light-mode {
    background: #f1f5f9 !important; /* باکگراوندێکی سپی خۆڵەمێشی */
}

body.light-mode .login-box {
    background: rgba(255, 255, 255, 0.9);
    border-color: #3b82f6; /* خەتەکەی دەبێتە شین لەبری زەرد */
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
}

body.light-mode h2, body.light-mode h3 {
    color: #1e293b; /* نووسینەکان تاریک دەبن */
}

body.light-mode p.sub {
    color: #475569;
}

body.light-mode .input-container input {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

body.light-mode .input-container input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

body.light-mode .input-container .icon {
    color: #3b82f6; /* ئایکۆنەکانی ناو فۆڕمەکە */
}

body.light-mode button[type="submit"] {
    background: #3b82f6; /* دوگمەی لۆگین دەبێتە شین */
    color: white;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

body.light-mode button[type="submit"]:hover {
    background: #2563eb;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

/* =========================================
   📱 گونجاندن بۆ هەموو شاشەکان (نیوە شاشە، ئایپاد، مۆبایل)
   ========================================= */

/* 💻 بۆ نیوە شاشەی کۆمپیوتەر و ئایپاد (گۆڕیمان بۆ 1300px بۆ ئەوەی دڵنیابین نیوە شاشە دەگرێت) */
@media (max-width: 1300px) {
  /* ١. قەبارەی گڵۆپەکە */
  .lamp {
    zoom: 70%; /* 👈 لێرەوە قەبارەی گڵۆپەکە ڕێک بخە (70% زۆر گونجاوە) */
    left: -2%;
  }
  
/* ٢. قەبارەی فۆڕمی لۆگین */
  .login-box {
    zoom: 80%; 
    width: 85%;
    max-width: 450px; 
    padding: 35px 30px;
  }

  /* 🚀 جادووەکە لێرەدایە: کاتێک گڵۆپەکە هەڵدەبێت دەیبەینە لای ڕاست */
  body.light-on .login-box {
    right: 10% !important; /* 👈 لێرەوە دەتوانیت زیاتر یان کەمتر بیبەیتە ڕاست (بۆ نموونە 10%) */
    left: auto !important; /* ڕێگری دەکات لە تێکچوون */
    transform: translateY(-50%) !important; /* تەنیا لە سەرەوە و خوارەوە سەنتەری دەکات */
  }

  .input-container input { 
      width: 100%; /* دەبێت 100% بێت بۆ ئەوەی پڕ بە فۆڕمەکە بێت */
  }
  
  /* ٣. قەبارەی دوگمەی شەو/ڕۆژ */
  .theme-toggle-btn {
    zoom: 85%; /* 👈 قەبارەی دوگمەکە لە نیوە شاشە */
  }
}

/* 📱 بۆ شاشەی مۆبایل و نیوە شاشەی بچووک (تا 768px) */
@media (max-width: 768px) {
  /* ١. قەبارەی گڵۆپەکە لە مۆبایل */
  .lamp {
    zoom: 75%; /* 👈 قەبارەی گڵۆپەکە */
    left: -15%; 
    height: 60vh;
    z-index: 1000;
    transition: opacity 0.5s ease;
  }
  body.light-on .lamp {
    opacity: 0.15; 
    z-index: 1; 
  }

  /* ٢. قەبارەی فۆڕمەکە لە مۆبایل */
  .login-box {
    zoom: 75%; /* 👈 قەبارەی فۆڕمی لۆگین */
    width: 80%;
    max-width: 400px;
    padding: 30px 20px;
    z-index: 10;
  }
  .logo { width: 100px; margin-bottom: 15px; }
  h2 { font-size: 24px; margin: 5px 0; }
  h3 { font-size: 20px; }
  p.sub { font-size: 15px; margin-bottom: 20px; }
  .input-container input { height: 45px; font-size: 16px; padding: 8px 45px 8px 15px; }
  button { font-size: 18px; padding: 12px 20px; }
  
  /* ٣. قەبارەی دوگمەی شەو/ڕۆژ لە مۆبایل */
  .theme-toggle-btn {
    zoom: 80%; /* 👈 قەبارەی دوگمەکە */
  }
}

/* 📱 بۆ مۆبایلە زۆر بچووکەکان (وەک iPhone SE تا 400px) */
@media (max-width: 400px) {
  .lamp {
      zoom: 60%; 
      left: -5%; 
  }
  
  .login-box {
      zoom: 60%;  
      width: auto; /* 👈 باشترە 90% بێت نەک auto بۆ ئەوەی دیزاینەکەی تێک نەشکێت */
      padding: 30px 20px;
  }

  /* 🚀 جادووەکە بۆ بردنی لۆگینەکە بۆ لای ڕاست */
  body.light-on .login-box {
      right: 30% !important; /* 👈 پێشتر 50% بوو (واتە ناوەڕاست)، ئێستا کە کردمان بە 40% زیاتر دەچێتە لای ڕاست */
      left: auto !important;
      transform: translate(50%, -50%) !important;
  }
}