/*
Theme Name: Qlean-Like Onepager v6 (Loader + Logo + Internals)
Author: ChatGPT
Version: 1.6.0
Text Domain: qleanlike
*/
@font-face{
  font-family:'Vazirmatn';
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/variable/Vazirmatn[wght].woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
:root{ --bg:#0b1022; --fg:#f7f8ff; --muted:#a7b0c9; --accent:#02d6a1; --navy:#165a72; --glass:rgba(255,255,255,.12); --line:rgba(255,255,255,.16); --card:#101b3d; 
  /* Tunables */
  --oval-open-duration: .9s;      /* سرعت بازشدن حلقه‌ها */
  --oval-fade-duration: .8s;      /* سرعت فِید/اسکیل بیضی و متن */
  --ring-delay-step: .08s;        /* فاصله زمانی بین حلقه‌های متوالی */
  --wave-opacity: .35;            /* شفافیت موج */
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:'Vazirmatn',system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--fg); background:#0b1022; }

/* HEADER */
.site-header{ position:fixed; left:0; right:0; top:0; height:72px; z-index:50; pointer-events:none }
.brand{ position:absolute; left:16px; top:8px; pointer-events:auto }
.brand a{ display:flex; align-items:center; gap:10px }
.brand img{ height:46px; width:auto; display:block }
.hamburger{ position:absolute; right:26px; top:22px; z-index:55; width:28px; height:22px; cursor:pointer; pointer-events:auto }
.hamburger span{position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:2px; transition:transform .3s, top .3s, opacity .3s}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:9px}
.hamburger span:nth-child(3){top:18px}
.hamburger.active span:nth-child(1){top:9px; transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){top:9px; transform:rotate(-45deg)}
.menu-overlay{ position:fixed; inset:0; background:rgba(7,11,24,.92); backdrop-filter: blur(10px); display:none; z-index:45 }
.menu-overlay.open{ display:flex; align-items:center; justify-content:center }
.menu-overlay ul{ list-style:none; padding:0; margin:0; text-align:center }
.menu-overlay li{ margin:16px 0; font-size:28px; font-weight:700 }
.menu-overlay a{ color:#fff; opacity:.9 }
.menu-overlay a:hover{ opacity:1 }

/* LOADER overlay (for page and slide) */
.loader{ position:fixed; inset:0; background:radial-gradient(900px 600px at 50% 40%, rgba(23,59,143,.45), rgba(11,16,34,.92)); display:flex; align-items:center; justify-content:center; z-index:60; opacity:0; pointer-events:none; transition:opacity .45s ease }
.loader.show{ opacity:1; pointer-events:auto }
.spinner{ width:64px; height:64px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* SLIDER */
.slider{ position:fixed; inset:0; overflow:hidden }
.slide{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0; transition: opacity var(--oval-fade-duration) ease }
.slide.active{ opacity:1 }
.slide:after{ content:""; position:absolute; inset:0; pointer-events:none; background:url('../img/waves.svg') center/cover no-repeat; opacity:.0; animation: waveMove 12s linear infinite }
.loaded .slide.active:after{ opacity:var(--wave-opacity); transition:opacity 1.2s ease .2s }
@keyframes waveMove{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.copy-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:10 }
.copy{ text-align:left; display:flex; align-items:center; gap:56px; opacity:0; transform:translateY(20px); transition:opacity var(--oval-fade-duration) ease, transform var(--oval-fade-duration) ease }
.loaded .slide.active .copy{ opacity:1; transform:none }
.h1{ font-size:clamp(28px,3.2vw,56px); line-height:1.15; font-weight:800 }
.sub{ opacity:.9; font-size:clamp(14px,1.2vw,18px); margin-top:10px }


.ring.r2{ width:150%; height:135% }
.ring.r3{ width:185%; height:160% }


@keyframes ringOpen{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:0 } 60%{ opacity:1 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1 } }


.controls{ position:fixed; left:24px; bottom:24px; display:flex; gap:12px; z-index:52 }
.ctrl{ background:var(--glass); border:1px solid var(--line); border-radius:28px; padding:10px 16px; display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--fg) }
.ctrl .dot{ width:28px; height:28px; border-radius:50%; background:var(--accent) }

/* INTERNAL PAGES */
.hero-banner{ position:relative; padding:124px 0 84px; background: radial-gradient(800px 500px at 20% 40%, #173b8f 0%, #0c1a44 60%, #0b1022 100%); overflow:hidden }
.hero-banner:after{ content:""; position:absolute; inset:0; background:url('assets/img/waves.svg') center/cover no-repeat; opacity:.22 }
.container{ max-width:1200px; margin:0 auto; padding:0 24px }
.breadcrumbs{ opacity:.85; font-size:14px; margin-bottom:8px }
.hero-title{ font-size:42px; margin:0 0 6px 0; font-weight:800 }
.hero-sub{ opacity:.9 }
.products-wrap{ padding:52px 0 }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transform:translateY(0); transition:transform .25s ease, box-shadow .25s ease }
.card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.25) }
.card img{ width:100%; height:220px; object-fit:cover }
.card .p{ padding:14px 16px }
.card h3{ margin:0 0 6px 0; font-size:18px }
.card a.more{ display:inline-block; margin-top:8px; padding:8px 12px; border:1px solid var(--line); border-radius:8px }

@media (max-width: 900px){ .site-header{height:64px} .brand img{height:38px} .copy{ flex-direction:column; gap:24px; text-align:center } .grid{ grid-template-columns:repeat(2,1fr) } }



/* === v7 rings: 5 sequential elliptical rings (small → large) === */

.ring.r1{ width:110%; height:105% }
.ring.r2{ width:130%; height:120% }
.ring.r3{ width:155%; height:140% }
.ring.r4{ width:180%; height:160% }
.ring.r5{ width:205%; height:180% }
.center-oval.rings-animate .ring{ animation: ringOpen var(--oval-open-duration) ease forwards }
.center-oval.rings-animate .ring.r2{ animation-delay:calc(var(--ring-delay-step) * 1) }
.center-oval.rings-animate .ring.r3{ animation-delay:calc(var(--ring-delay-step) * 2) }
.center-oval.rings-animate .ring.r4{ animation-delay:calc(var(--ring-delay-step) * 3) }
.center-oval.rings-animate .ring.r5{ animation-delay:calc(var(--ring-delay-step) * 4) }
@keyframes ringOpen{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:0 } 55%{ opacity:1 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1 } }
.slide:not(.active) .center-oval .ring{ animation:none !important; opacity:0 !important; transform:translate(-50%,-50%) scale(0) !important }


/* Hover color shift on center oval */
.center-oval:hover{ border-color: rgba(2,214,161,0.95); background: rgba(2,214,161,0.08); }
.center-oval:hover .ring{ border-color: rgba(2,214,161,0.95); filter: drop-shadow(0 0 12px rgba(2,214,161,.35)); }
.center-oval:hover img{ filter: hue-rotate(18deg) saturate(115%) brightness(1.03); }


/* === v10: slide-wide elliptical lines (strong→faint) === */
.ellipses{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.ellipses .e{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  border-radius:40% / 60%; width:34vw; height:54vw; opacity:0; border:2px solid rgba(3,9,57,0.50); }
.ellipses .e.e2{ width:42vw; height:66vw; border-color: rgba(3,9,57,0.36);}
.ellipses .e.e3{ width:50vw; height:78vw; border-color: rgba(3,9,57,0.24);}
.ellipses .e.e4{ width:60vw; height:92vw; border-color: rgba(3,9,57,0.14);}
.ellipses .e.e5{ width:70vw; height:106vw; border-color: rgba(3,9,57,0.08);}

.slide.active .ellipses.animate .e{ animation: ellOpen var(--oval-open-duration, .9s) ease forwards; }
.slide.active .ellipses.animate .e.e2{ animation-delay: calc(var(--ring-delay-step, .08s) * 1); }
.slide.active .ellipses.animate .e.e3{ animation-delay: calc(var(--ring-delay-step, .08s) * 2); }
.slide.active .ellipses.animate .e.e4{ animation-delay: calc(var(--ring-delay-step, .08s) * 3); }
.slide.active .ellipses.animate .e.e5{ animation-delay: calc(var(--ring-delay-step, .08s) * 4); }

@keyframes ellOpen{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:0 }
  55%{ opacity:1 }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1 }
}

/* Prevent bleed on non-active */
.slide:not(.active) .ellipses .e{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  border-radius:40% / 60%; width:34vw; height:54vw; opacity:0; border:2px solid rgba(3,9,57,0.50); }
/* =========================
   Qlean-Like v6 – MOBILE FIX (no-crop) + VH safe
   ========================= */

/* ارتفاع مطمئن برای اسلایدر در همه دستگاه‌ها */
.slider{
  height:100vh;          /* fallback */
  height:100svh;         /* iOS/Android نوار آدرس را لحاظ می‌کند */
}

/* حالت پیش‌فرض دسکتاپ: فول‌بلید */
.slide{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* موج‌های پس‌زمینه (مسیر درست) */
.slide:after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:url('assets/img/waves.svg') center/cover no-repeat;
  opacity:.0;
  animation: waveMove 12s linear infinite;
}

/* — موبایل: جلوگیری از کراپ و letterbox با بک‌گراند — */
@media (max-width: 700px){
  .slider{ height:100svh; }
  .slide{
    background-size:contain;       /* مهم: بدون برش */
    background-position:center center;
    background-color:#0b1022;      /* فضای خالی اطراف تصویر */
  }
  /* موج را کمی جمع و جور کن که از کادر نزند بیرون */
  .slide:after{ background-size:140% auto }
  /* تیتر/کپی جمع‌تر بشود */
  .copy{ gap:22px; text-align:center; transform:translateY(0); }
  .copy-wrap{ align-items:flex-end; padding-bottom:8vh; }
}

/* اگر خواستی برای هر اسلاید فوکوس افقی بدهی (cover) */
.slide[data-fx]{ background-position: var(--fx, 50%) center; }
/* === FORCE MOBILE NO-CROP === */
html.is-mobile .slider{ height:100svh !important; }
html.is-mobile .slide{
  background-size:contain !important;     /* اجبار به عدم برش */
  background-position:center center !important;
  background-color:#0b1022 !important;
}
html.is-mobile .slide:after{ background-size:140% auto !important; }
html.is-mobile .copy{ gap:22px; text-align:center; transform:translateY(0); }
html.is-mobile .copy-wrap{ align-items:flex-end; padding-bottom:8vh; }
/* === SUNROBOT MOBILE FINAL FIX === */
@supports (-webkit-touch-callout: none) {
  .slider,
  .slide {
    height: -webkit-fill-available !important;
    min-height: 100dvh !important;
  }
}


  .slide{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0b1022 !important;
  }
  .slide:after{
    background-size: 140% auto !important;
  }
  .copy-wrap{
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 8vh !important;
  }
  .copy{
    text-align: center !important;
    transform: translateY(0) !important;
    gap: 22px !important;
  }
/* === SUNROBOT – FINAL MOBILE FIX (no-crop + full-screen under header) === */
@media (max-width:700px){
  .slider{
    position: fixed !important;   /* برگردان به fixed تا زیر هدر نرود */
    inset: 0 !important;          /* از بالا، پایین، چپ، راست صفر */
    height: 100dvh !important;    /* قد واقعی صفحه روی موبایل */
    overflow: hidden !important;
  }
  .slide{
    position: absolute !important;
    inset: 0 !important;
    background-size: contain !important;     /* بدون برش */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0b1022 !important;
  }
  .slide:after{ background-size: 140% auto !important; }
  .copy-wrap{ align-items: flex-end !important; padding-bottom: 8vh !important; }
  .copy{ text-align:center !important; transform: translateY(0) !important; gap:22px !important; }
}

/* برای سافاری‌های قدیمی‌تر */
@supports (-webkit-touch-callout: none){
  @media (max-width:700px){
    .slider, .slide{ height: -webkit-fill-available !important; }
  }
}