/* ==========================================================================
   علم و فن ایرانیان — Mobile First Layer
   لایه موبایل: نوار پایین، تاچ‌فرندلی، اصلاح تمام صفحات برای گوشی
   ========================================================================== */

:root{
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --mnav-h:66px;
}

/* حذف هایلایت آبی تاچ در موبایل */
*{-webkit-tap-highlight-color:transparent}

/* جلوگیری از زوم خودکار iOS روی فوکوس input (فونت حداقل 16px) */
@media(max-width:900px){
  input,select,textarea{font-size:16px!important}
}

/* ====================== نوار ناوبری پایین (موبایل) ====================== */
.mobile-nav{
  display:none;
  position:fixed;inset-inline:0;bottom:0;z-index:100;
  padding:8px 8px calc(8px + var(--safe-b));
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(24px) saturate(170%);
  border-top:1px solid var(--glass-brd);
  box-shadow:0 -12px 34px -18px rgba(10,35,80,.45);
}
.mobile-nav ul{display:flex;align-items:center;justify-content:space-around;gap:2px}
.mobile-nav li{flex:1}
.mobile-nav a,.mobile-nav button{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;border:0;background:transparent;cursor:pointer;
  font-size:.66rem;font-weight:600;color:var(--txt-soft);border-radius:14px;transition:.28s var(--ease);
}
.mobile-nav a svg,.mobile-nav button svg{width:21px;height:21px}
.mobile-nav a.active,.mobile-nav a:active,.mobile-nav button:active{color:var(--red-500);background:rgba(232,35,47,.09)}
/* دکمه وسط برجسته */
.mobile-nav .mn-cta a{
  margin-top:-26px;background:var(--grad-red);color:#fff;border-radius:20px;
  padding:12px 4px 8px;box-shadow:0 12px 26px -10px rgba(232,35,47,.8);
}
.mobile-nav .mn-cta a svg{width:23px;height:23px}
.mobile-nav .badge{
  position:absolute;top:2px;inset-inline-start:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;
  background:var(--red-500);color:#fff;border-radius:99px;font-size:.62rem;display:grid;place-items:center
}

/* ====================== تنظیمات عمومی موبایل ====================== */
@media(max-width:900px){
  html{-webkit-text-size-adjust:100%}
  body{line-height:1.95;font-size:15px}
  .container{width:calc(100% - 28px)}
  .section{padding:44px 0}
  .section-head{margin-bottom:28px}
  .section-head h2{font-size:1.35rem;line-height:1.6}
  .section-head p{font-size:.9rem}
  h1{font-size:1.5rem!important;line-height:1.6}
  h2{font-size:1.25rem}
  h3{font-size:1.05rem}

  /* نمایش نوار پایین + فضای انتهای صفحه */
  .mobile-nav{display:block}
  body{padding-bottom:calc(var(--mnav-h) + var(--safe-b))}
  .site-footer{margin-bottom:6px}

  /* دکمه‌های شناور: تماس و واتساپ در نوار پایین هستند → فقط «بازگشت به بالا» می‌ماند
     تا روی فیلدهای فرم و محتوا نیفتد. */
  .fab-col{
    bottom:calc(var(--mnav-h) + var(--safe-b) + 12px);
    inset-inline-start:auto;inset-inline-end:14px;gap:8px;
  }
  .fab-col .fab{display:none}
  .fab-col #toTop{display:grid;width:44px;height:44px;border-radius:14px}

  /* هدر جمع‌وجورتر */
  :root{--header-h:62px}
  .brand img{height:36px}
  .nav-actions{gap:6px}
  .icon-btn{width:38px;height:38px;border-radius:11px}
  .nav-actions .btn{display:none}       /* CTA در نوار پایین هست */
  .topbar .tb-ticker{font-size:.74rem;margin-inline:auto}
  .topbar .tb-social{display:none}
  .topbar .container{min-height:36px;justify-content:center}

  /* هیرو */
  .hero{padding:34px 0 46px}
  .hero-grid{gap:26px}
  .hero h1{font-size:1.65rem;margin-bottom:12px}
  .hero p.lead{font-size:.93rem;margin-bottom:20px}
  .hero-badge{font-size:.74rem;padding:6px 13px;margin-bottom:14px}
  .hero-cta{gap:9px}
  .hero-cta .btn{flex:1;min-width:140px;justify-content:center}
  .hero-points{gap:10px 16px;font-size:.8rem}
  .blob{filter:blur(50px);opacity:.35}
  .blob.b1{width:220px;height:220px}
  .blob.b2{width:240px;height:240px}

  /* آمار: دو ستونه فشرده */
  .stats{gap:12px;margin-top:10px}
  .stat{padding:16px 10px}
  .stat .ic{width:38px;height:38px;border-radius:12px;margin-bottom:7px}
  .stat .num{font-size:1.45rem}
  .stat .lbl{font-size:.75rem}

  /* کارت‌ها */
  .glass{border-radius:18px}
  .glass-hover:hover{transform:none}       /* هاور در تاچ معنا ندارد */
  .glass-hover:active{transform:scale(.985)}
  .cc-body,.pc-body{padding:15px}
  .cc-body h3{font-size:.95rem;min-height:auto;margin-bottom:6px}
  .cc-meta{gap:10px;font-size:.72rem;flex-wrap:wrap}
  .cc-foot{flex-wrap:wrap}
  .price{font-size:.92rem}
  .cat-card{padding:18px 12px}
  .cat-card .ic{width:54px;height:54px;border-radius:17px;margin-bottom:10px}
  .cat-card b{font-size:.88rem}
  .cat-card small{font-size:.72rem}

  /* فیچر */
  .feature{padding:18px;gap:13px}
  .feature .ic{width:46px;height:46px;border-radius:15px}
  .feature h4{font-size:.94rem}
  .feature p{font-size:.82rem}

  /* CTA */
  .cta-band{padding:28px 18px;border-radius:22px}
  .cta-band h2{font-size:1.2rem}
  .cta-band p{font-size:.88rem}
  .cta-band .btn{width:100%;justify-content:center}

  /* اسلایدر افقی برای گریدهای شلوغ در موبایل */
  .mobile-scroll{
    display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;margin-inline:-14px;padding-inline:14px;
    scrollbar-width:none;
  }
  .mobile-scroll::-webkit-scrollbar{display:none}
  .mobile-scroll > *{flex:0 0 78%;scroll-snap-align:start}

  /* صفحه داخلی */
  .page-hero{padding:28px 0 22px}
  .crumbs{font-size:.74rem;margin-bottom:10px}
  .prose{padding:18px;font-size:.9rem}
  .prose h2{font-size:1.1rem}
  .prose h3{font-size:1rem}
  .prose ul li{font-size:.87rem}
  .with-side{gap:20px}
  .site-sidebar{margin-top:6px}
  .widget{padding:17px;margin-bottom:16px}
  .widget h4{font-size:.94rem}

  /* دوره تکی */
  .sc-hero{padding:18px;gap:18px}
  .sc-price-box{position:static;padding:18px}
  .sc-price-box .p{font-size:1.3rem}
  .chips{gap:7px}
  .chip{font-size:.73rem;padding:5px 12px}

  /* تب‌ها: اسکرول افقی */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .tabs::-webkit-scrollbar{display:none}
  .tab-btn{flex:0 0 auto;padding:9px 16px;font-size:.83rem}

  /* فیلترها: اسکرول افقی */
  .filterbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px;gap:8px}
  .filterbar::-webkit-scrollbar{display:none}
  .filterbar .f-btn{flex:0 0 auto;font-size:.8rem;padding:7px 14px}

  /* آکاردئون */
  .acc-q{padding:14px 15px;font-size:.88rem}
  .acc-a p{padding:0 15px 15px;font-size:.84rem}

  /* فرم‌ها: تمام‌عرض و لمسی */
  .form-row label{font-size:.83rem}
  .input,input,select,textarea{padding:13px 14px;border-radius:13px}
  textarea{min-height:110px}
  .btn{padding:12px 20px}
  .btn-lg{padding:14px 22px;font-size:.95rem;width:100%;justify-content:center}
  form .btn[type=submit],.form-submit .submit{width:100%;justify-content:center}

  /* جدول: اسکرول افقی با اشاره بصری */
  .table-wrap{position:relative;-webkit-overflow-scrolling:touch}
  table.tbl{font-size:.82rem;min-width:440px}
  table.tbl th,table.tbl td{padding:10px 11px}

  /* فوتر */
  .site-footer{margin-top:44px}
  .footer-inner{padding:34px 0 0}
  .footer-grid{gap:26px}
  .footer-grid h5{font-size:.92rem}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px;font-size:.74rem}
  .f-socials a{width:44px;height:44px}   /* هدف لمسی 44px */

  /* گالری/تصاویر */
  .gallery{grid-template-columns:repeat(2,1fr)!important;gap:10px}

  /* دیدگاه‌ها */
  .comment-list .children{padding-inline-start:12px}
  .comment-body{padding:14px;border-radius:15px}
  .comment-respond{padding:18px;border-radius:18px}

  /* مودال جستجو */
  .search-modal{padding-top:10vh;align-items:start}
  .search-modal form{width:calc(100% - 28px);flex-wrap:wrap;padding:12px}
  .search-modal input{width:100%;font-size:16px}
  .search-modal .btn{width:100%;justify-content:center}

  /* کشو منو تمام‌قد */
  .drawer{width:min(320px,88vw);padding:18px;padding-bottom:calc(24px + var(--safe-b))}
  .drawer .menu > li > a{padding:13px 12px;font-size:.95rem;border-radius:13px}
  .drawer .submenu li a{padding:11px 12px}

  /* صفحه‌بندی */
  .pagination a,.pagination span{min-width:40px;height:40px;font-size:.84rem}

  /* تایم‌لاین */
  .timeline{padding-inline-start:26px}
  .tl-item::before{inset-inline-start:-24px;width:13px;height:13px;border-width:3px}

  /* حذف افکت‌های سنگین برای عملکرد بهتر */
  .float-chip{display:none}
  .marquee ul{animation-duration:20s}
}

/* ====================== موبایل کوچک ====================== */
@media(max-width:480px){
  .container{width:calc(100% - 24px)}
  body{font-size:14.5px}
  .hero h1{font-size:1.45rem}
  .section-head h2{font-size:1.2rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .stat .num{font-size:1.3rem}
  .mobile-nav a,.mobile-nav button{font-size:.6rem}
  .mobile-nav a svg,.mobile-nav button svg{width:19px;height:19px}
  .cta-band{padding:24px 15px}
  .prose{padding:15px}
  .glass{border-radius:16px}
  .hero-cta .btn{width:100%}
  .gallery{grid-template-columns:1fr!important}
  .auth-grid{grid-template-columns:1fr!important}
}

/* ====================== موبایل خیلی کوچک ====================== */
@media(max-width:360px){
  .brand-txt{display:none}
  .topbar{display:none}
  .mobile-nav li:nth-child(4){display:none}  /* یک آیتم کم می‌کنیم */
}

/* ====================== لنداسکیپ موبایل ====================== */
@media(max-height:520px) and (orientation:landscape){
  .mobile-nav{display:none}
  body{padding-bottom:0}
  .fab-col{bottom:14px}
  .hero{padding:26px 0 32px}
}

/* ====================== تبلت ====================== */
@media(min-width:901px) and (max-width:1180px){
  .container{width:calc(100% - 36px)}
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2.2rem}
  .with-side{grid-template-columns:1fr 290px;gap:22px}
}

/* ====================== دسترسی‌پذیری و ترجیحات کاربر ====================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* دستگاه‌های لمسی: هدف‌های لمسی حداقل ۴۴px */
@media(hover:none){
  .btn,.icon-btn,.f-btn,.tab-btn,.pagination a{min-height:42px}
  .menu > li > a,.submenu li a,.widget ul li a{min-height:40px;display:flex;align-items:center}
  .glass-hover:hover{transform:none;box-shadow:var(--glass-shadow)}
}

/* صفحه ثبت‌نام/ورود دوستونه در دسکتاپ، تک‌ستون در موبایل */
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.auth-title{font-size:1.05rem;display:flex;align-items:center;gap:9px;margin-bottom:14px}
@media(max-width:900px){.auth-grid{grid-template-columns:1fr;gap:20px}}

/* نوار پیشرفت مطالعه (موبایل و دسکتاپ) */
.read-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:200;background:transparent}
.read-progress span{display:block;height:100%;width:0;background:var(--grad-red);transition:width .1s linear}

/* بهبود اسکرول iOS */
.table-wrap,.tabs,.filterbar,.mobile-scroll{-webkit-overflow-scrolling:touch}

/* حالت PWA / standalone */
@media(display-mode:standalone){
  .topbar{display:none}
  .site-header{padding-top:var(--safe-t)}
}

/* ==========================================================================
   پنل کاربری — موبایل
   ========================================================================== */
@media(max-width:900px){
  .dash{grid-template-columns:1fr;gap:16px}
  .dash-side{position:static;flex-direction:column}

  /* کارت کاربر فشرده و افقی */
  .dash-user{display:flex;align-items:center;gap:14px;text-align:start;padding:16px}
  .dash-user .dash-avatar,.dash-user img{width:54px;height:54px;margin:0}
  .dash-user b{font-size:.95rem}
  .dash-user small{font-size:.72rem}
  .dash-user .chip{display:none}

  /* منوی پنل: اسکرول افقی مثل تب */
  .dash-menu{
    flex-direction:row;overflow-x:auto;gap:8px;padding:10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .dash-menu::-webkit-scrollbar{display:none}
  .dash-link{
    flex:0 0 auto;flex-direction:column;gap:5px;padding:10px 15px;
    font-size:.75rem;text-align:center;min-width:78px
  }
  .dash-link:hover{transform:none}
  .dash-link.is-logout{border-top:0;padding-top:10px;border-radius:14px;margin-top:0}
  .dash-count{
    position:absolute;top:4px;inset-inline-end:6px;margin:0;
    min-width:18px;height:18px;font-size:.65rem
  }

  .dash-stats{grid-template-columns:repeat(2,1fr);gap:11px}
  .dash-stat{padding:16px 10px}
  .dash-stat .ic{width:40px;height:40px;border-radius:13px;margin-bottom:8px}
  .dash-stat b{font-size:1.3rem}
  .dash-stat small{font-size:.72rem}

  .dash-welcome{padding:18px}
  .dash-welcome h2{font-size:1.05rem}
  .dash-welcome p{font-size:.84rem}
  .dash-empty{padding:32px 18px}
  .dash-empty .ic{width:62px;height:62px;border-radius:20px}
}

@media(max-width:480px){
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .dash-link{min-width:70px;font-size:.7rem;padding:9px 12px}
  .ostat{font-size:.68rem;padding:3px 9px}
}