/* ===== بەخێرهاتن (Onboarding) — وەک وێنەی نموونە ===== */
.onboard{
  position:fixed;
  inset:0;
  z-index:200;
  overflow:hidden;
  font-family:"UniSIRWAN Ping", 'Noto Kufi Arabic', system-ui, sans-serif;
  opacity:1;
  transition:opacity .6s var(--ease);
}
.onboard.done{
  opacity:0;
  pointer-events:none;
}

/* ڕێڕەوی سلایدەکان */
.ob-track{
  display:flex;
  height:100%;
  transition:transform .7s cubic-bezier(.16,.84,.24,1);
}

/* هەر سلایدێک — وێنەی پڕ بە پاشبنەما */
.ob-slide{
  position:relative;
  min-width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-color:#2C5238;   /* ڕەنگی کاتی ئەگەر وێنە نەبوو */
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ------------------------------------------------------------------
   شەیپی ڕەشی خوارەوە
   خوارترین ١٥٪ ڕەشی ڕەقە، سەرەوەی ئەوە بە نەرمی دەتوێتەوە —
   تا دوگمە و خاڵەکان بە ڕوونی ببینرێن لەسەر هەر وێنەیەک.
   ------------------------------------------------------------------ */
.ob-overlay{
  position:absolute;
  inset:0;
  background:
    /* ١ — باندی ڕەشی خوارەوە */
    linear-gradient(to top,
      rgba(8,12,10,.96)  0%,
      rgba(8,12,10,.94) 15%,     /* ← خوارترین ١٥٪ */
      rgba(8,12,10,.72) 26%,
      rgba(8,12,10,.34) 38%,
      rgba(8,12,10,0)   52%),
    /* ٢ — تاریکییەکی سووک لە سەرەوە بۆ ئەوەی وێنە زۆر ڕوون نەبێت */
    linear-gradient(to bottom,
      rgba(12,18,14,.30)  0%,
      rgba(12,18,14,.06) 30%,
      rgba(12,18,14,0)   50%);
  pointer-events:none;
}

/* ------------------------------------------------------------------
   نووسین — لە ناوەڕاست، کەمێک بەرەو خوارەوە
   ------------------------------------------------------------------ */
.ob-content{
  position:absolute;
  z-index:2;
  inset-inline:0;
  /* ناوەڕاست + خوارتر */
  top:64%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 32px;
}

.ob-brand{
  margin:0;
  font-size:clamp(26px, 8vw, 36px);
  font-weight:800;
  line-height:1.45;
  letter-spacing:-.3px;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  max-width:14ch;
}

.ob-text{
  margin:14px 0 0;
  font-size:clamp(14px, 4.2vw, 16.5px);
  line-height:2.05;
  font-weight:500;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  max-width:30ch;
}

/* کۆنترۆڵی خوارەوە */
.ob-bottom{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:0 24px calc(30px + env(safe-area-inset-bottom, 0px));
}
.ob-next{
  width:100%;
  border:none;
  background:var(--leaf);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  padding:16px;
  border-radius:16px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(44,64,51,.35);
  transition:transform .3s var(--ease);
}
.ob-next:active{transform:scale(.97)}

/* خاڵەکان */
.ob-dots{
  display:flex;
  justify-content:center;
  gap:7px;
}
.ob-dots .dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.55);
  transition:width .5s var(--ease), background .5s var(--ease);
}
.ob-dots .dot.on{
  width:22px;
  border-radius:4px;
  background:#fff;
}

.ob-skip{
  border:none;
  background:transparent;
  color:rgba(255,255,255,.9);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  padding:4px 14px;
  cursor:pointer;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

@media (prefers-reduced-motion:reduce){
  .onboard, .ob-track, .ob-dots .dot{transition:none !important}
}

/* شاشەی کورت — نووسین کەمێک سەرەوەتر تا لەگەڵ دوگمەکە تێکەڵ نەبێت */
@media (max-height:680px){
  .ob-content{ top:60%; }
}
@media (max-height:580px){
  .ob-content{ top:55%; }
  .ob-brand{ font-size:clamp(22px, 7vw, 28px); }
  .ob-text{ font-size:clamp(13px, 4vw, 15px); line-height:1.9; }
}