@import url('/static/fonts/vazirmatn/Vazirmatn-font-face.css');

:root{
  --pool-deep:   #06283D;
  --pool-mid:    #1363A0;
  --lane-rope:   #47B5FF;
  --gold:        #E8B14C;
  --ink:         #06283D;
  --muted:       #6B8299;
  --bg-page:     #F4F8FB;
  --bg-card:     #FFFFFF;
  --border:      #E1EAF1;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ font-family:'Vazirmatn', Tahoma, sans-serif; background:var(--bg-page); color:var(--ink); min-height:100%; line-height:1.9; }

.hero{
  background: linear-gradient(165deg, var(--pool-deep) 0%, #0A3A57 55%, var(--pool-mid) 100%);
  color:#fff; padding:44px 24px 34px; text-align:center; position:relative;
}
.hero .lane-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(155deg, var(--pool-deep), var(--pool-mid));
  border:2px solid rgba(255,255,255,0.5); margin-bottom:12px;
  box-shadow: 0 10px 24px -8px rgba(19,99,160,0.45);
}
.hero .lane-num svg{ width:24px; height:24px; }
.hero h1{ font-size:23px; font-weight:700; margin-bottom:8px; }
.hero p{ font-size:14px; color:#B9D6EA; max-width:560px; margin:0 auto; }
.hero .top-link{
  position:absolute; top:16px; left:16px; background:rgba(255,255,255,0.12); color:#fff;
  text-decoration:none; font-size:12px; padding:8px 14px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.25);
}
.lang-slot{ position:absolute; top:16px; right:16px; z-index:5; }

.wrap{ max-width:940px; margin:0 auto; padding:28px 16px 60px; }

/* ============================================================
   چیدمان دو ستونه — محتوای اصلی + ستون کناری (سمت چپ در حالت RTL)
   دقیقاً هم‌ساختار با صفحه نتایج (index.html: .page-grid / .ad-box)
   تا معرفی برنامه و دکمه‌های راهنما در همه صفحات یکدست باشند.
   ============================================================ */
.page-grid{ display:grid; grid-template-columns: 1fr 280px; gap:20px; align-items:start; }
.page-grid > .main-col{ min-width:0; }
.side-col{ display:flex; flex-direction:column; gap:16px; position:sticky; top:20px; }

@media (max-width: 760px){
  .page-grid{ grid-template-columns: 1fr; }
  .side-col{ position:static; }
}

/* باکس معرفی برنامه — دقیقاً همان استایل ad-box صفحه نتایج */
.ad-box{
  background:var(--bg-card); border:1.5px solid var(--lane-rope); border-radius:14px;
  padding:20px; margin-bottom:16px;
}
#adSideBoxWrap .ad-box:last-child{ margin-bottom:0; }
.ad-box h3{ font-size:14px; font-weight:700; color:var(--pool-mid); margin-bottom:10px; }
.ad-box p{ font-size:13px; color:var(--ink); line-height:1.9; margin-bottom:10px; }
.ad-box .ad-contact{ font-size:12.5px; color:var(--muted); line-height:2; }
.ad-box .ad-contact strong{ color:var(--ink); font-weight:600; }
.ad-box .ad-contact .value{ color:var(--ink); font-weight:700; user-select:all; cursor:text; }

/* دکمه‌های راهنما در ستون کناری — چند طبقه (زیر هم) به‌جای ردیفی */
.side-nav{ display:flex; flex-direction:column; gap:10px; }
.side-nav a{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--pool-mid); text-decoration:none; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:10px; background:var(--bg-card);
  transition: border-color .12s, background .12s;
}
.side-nav a:hover{ border-color:var(--lane-rope); background:#F6FAFD; }
.side-nav a img{ width:16px; height:16px; flex-shrink:0; }

.card{ background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:24px; margin-bottom:18px; box-shadow:0 2px 6px rgba(6,40,61,0.05), 0 10px 24px -14px rgba(19,99,160,0.22); }
.card h2{ font-size:16px; font-weight:700; margin-bottom:12px; color:var(--pool-mid); }
.card p{ font-size:14px; color:var(--ink); margin-bottom:10px; }
.card ul{ padding-inline-start:20px; margin-bottom:10px; }
.card li{ font-size:14px; margin-bottom:8px; }

.cta-box{
  background:var(--bg-card); border:1.5px solid var(--lane-rope); border-radius:14px;
  padding:24px; text-align:center; margin-bottom:18px;
}
.cta-box h2{ font-size:16px; font-weight:700; margin-bottom:8px; }
.cta-box p{ font-size:13.5px; color:var(--muted); margin-bottom:16px; }
.cta-btn{
  display:inline-block; background:var(--pool-mid); color:#fff; text-decoration:none;
  font-weight:700; font-size:14px; padding:12px 28px; border-radius:10px;
}
.cta-btn:hover{ background:var(--pool-deep); }

footer{ text-align:center; padding:20px; font-size:12px; color:var(--muted); }
footer a{ color:var(--pool-mid); }

/* ============================================================
   بنر تبلیغاتی — دقیقاً همان استایل و متن صفحه اصلی (index.html)
   تا تبلیغات در کل سایت یکدست باشد.
   ============================================================ */
.ad-banner{ max-width:940px; margin:0 auto; padding:0 16px; }
.ad-banner-inner{
  background:var(--bg-card); border:1.5px dashed var(--lane-rope); border-radius:12px;
  padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:10px;
  text-align:center; flex-wrap:wrap;
}
.ad-banner-inner .ad-tag{
  font-size:10px; font-weight:700; color:#fff; background:var(--pool-mid);
  border-radius:6px; padding:2px 8px; flex-shrink:0;
}
.ad-banner-inner span{ font-size:12.5px; color:var(--ink); }
.ad-banner-inner .value{ font-weight:700; user-select:all; cursor:text; }
.ad-banner-top{ padding-top:18px; padding-bottom:2px; }
.ad-banner-bottom{ padding-top:2px; padding-bottom:24px; }