/* ---------- Base & Fonts ---------- */
:root{
  --brand: #188488; /* Primary */
  --muted: #6b7280;
  --bg: #F8F9FA; /* Background Light */
  --surface: #ffffff; /* cards/surfaces */
  --text: #0E1A1A; /* Text / Dark Base */
  --neutral: #B8C2C2; /* borders, subtle bg, outlines */
  --accent: #C9A349; /* premium accents/hover lines */
  --highlight: #1CA9A6; /* soft gradients/hover */
  --shadow: #10696D; /* deeper hovers/shadows */
  --radius: 12px;
}

html,body{height:100%;margin:0;padding:0}
body{
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden;}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Use BMitra for Persian locale */
html[lang="fa"] body, html[lang="ar"] body{
  font-family: 'Vazirmatn', 'BMitra', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Use Times New Roman for English locale */
html[lang="en"] body{
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* جهت‌نمایی براساس dir صفحه */
html{--doc-dir: rtl;}
html[dir="rtl"] body{direction: rtl;--doc-dir: rtl;}
html[dir="ltr"] body{direction: ltr;--doc-dir: ltr;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  width:100%;
  z-index:1200;
  background:linear-gradient(180deg, rgba(255,255,255,0.68), rgba(248,249,250,0.46));
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(184,194,194,0.42);
}

.header-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px; /* slimmer header height */
  gap:12px;
}

/* logo */
.logo{height:34px;display:block}
.logo-wrap img{height:34px}

/* nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;transition:color .25s}
.nav a:hover{color:var(--brand);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* tools (search, lang, hamburger) */
.tools{display:flex;align-items:center;gap:10px;position:relative}

/* search */
.search{display:flex;align-items:center;gap:8px;position:relative}
.icon-btn{background:transparent;border:none;font-size:18px;cursor:pointer;color:var(--brand);transition:color .2s ease}
.icon-btn:hover{color:var(--highlight)}
#searchBtn{display:inline-flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:18px;border:1px solid var(--brand);background:transparent;color:var(--brand);font-weight:700;font-size:0.95rem;line-height:1;transition:background .2s ease,color .2s ease}
#searchBtn:hover{background:var(--brand);color:#fff}
#searchBtn:focus{outline:none;box-shadow:0 0 0 3px rgba(24,132,136,0.22)}
#searchInput{
  display:none;
  border:1px solid var(--neutral);
  border-radius:18px;
  padding:6px 12px;
  min-width:180px;
  outline:none;
  transition:all .22s ease;
}
#searchInput.show{display:inline-block;}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,163,73,0.22)}

/* lang */
/* language select */
.lang-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:transparent;
  border:1px solid var(--neutral);
  border-radius:8px;
  padding:6px 28px 6px 10px; /* space for arrow */
  cursor:pointer;
  font-weight:700;
  color:var(--brand);
}
.lang-select:hover{border-color:var(--highlight)}
.lang-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,163,73,0.22);outline:none}

/* small arrow using background svg */
.lang-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23188488' viewBox='0 0 16 16'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: calc(100% - 8px) 50%;
}

/* hamburger */
.hamburger{display:none;background:none;border:none;cursor:pointer;width:36px;height:28px;position:relative}
.hamburger span{display:block;height:2.6px;background:var(--text);border-radius:2px;margin:5px 0;transition:all .28s}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:center;justify-content:center;padding:0 20px;min-height:92vh;overflow:hidden}
.hero-bg{position:absolute;inset:-10% -0;background-image:url('../images/hero.png');background-size:cover;background-position:center;background-repeat:no-repeat;transform:translate3d(0, var(--hero-parallax, 0px), 0);will-change:transform;backface-visibility:hidden;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,26,26,0.66), rgba(14,26,26,0.66));z-index:1}
.hero-content{position:relative;z-index:2;max-width:900px;text-align:center;padding:120px 0}
.hero h1{font-size:2.8rem;margin:0 0 12px;color:#fff;font-weight:800}
.hero .subheadline{color:#e6ecec;margin:0 0 22px;font-size:1.1rem;line-height:1.8}
.hero-ctas{display:flex;gap:12px;justify-content:center}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:12px;
  padding:12px 18px;
  transition:background .2s, transform .2s, box-shadow .2s;
  border:none;
  cursor:pointer;
  font-family:inherit;
  line-height:1.2;
}
.btn:hover{background:var(--shadow);transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,105,109,0.28)}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(201,163,73,0.28)}
.btn-outline{
  background:transparent;
  color:var(--brand);
  border:1px solid rgba(24,132,136,0.6);
}
.btn-outline:hover{background:rgba(24,132,136,0.08);border-color:var(--shadow);color:var(--shadow)}
.btn-outline--light{color:#fff;border-color:rgba(255,255,255,0.6)}
.btn-outline--light:hover{background:rgba(255,255,255,0.08);border-color:#fff;color:#fff}

/* ---------- Sections ---------- */
.section{padding:72px 20px}
.section-inner{max-width:1100px;margin:0 auto;text-align:center}
.section h2{font-size:1.6rem;margin-bottom:18px;color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.card{background:var(--surface);border-radius:12px;padding:16px;text-align:center;box-shadow:0 6px 18px rgba(16,105,109,0.12);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,105,109,0.16)}
.card img{width:100%;height:180px;object-fit:cover;border-radius:10px}

/* about section */
.about-section .section-inner{max-width:900px}
.about-card{
  background:var(--surface);
  border-radius:24px;
  padding:36px 32px;
  box-shadow:0 18px 34px rgba(16,105,109,0.12);
  border:1px solid rgba(24,132,136,0.12);
  text-align:center;
}
.about-card h2{margin-top:0;margin-bottom:14px;font-size:1.8rem;color:var(--brand)}
.about-card p{
  margin:0;
  color:var(--text);
  line-height:1.8;
  font-size:1.05rem;
  word-break:break-word;
  overflow-wrap:anywhere;
}

@media (max-width:768px){
  .about-card{padding:28px 24px}
  .about-card h2{font-size:1.5rem}
}

.projects-section{background:transparent;}
.projects-header{display:flex;flex-direction:column;gap:12px;text-align:center;margin-bottom:24px}
.projects-header__copy h2{margin:0;font-size:1.7rem;color:var(--brand)}
.projects-header__copy p{margin:0;color:var(--muted);line-height:1.6;font-size:1rem}
.projects-controls{justify-content:center;margin-top:8px}

.project-rack{display:flex;flex-wrap:nowrap;gap:18px;padding:6px 0 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:10px;direction:ltr}
.project-rack::-webkit-scrollbar{height:6px}
.project-rack::-webkit-scrollbar-track{background:rgba(184,194,194,0.3);border-radius:999px}
.project-rack::-webkit-scrollbar-thumb{background:rgba(24,132,136,0.5);border-radius:999px}
.project-card{flex:0 0 clamp(240px,30vw,320px);background:var(--surface);border-radius:20px;box-shadow:0 16px 32px rgba(16,105,109,0.12);border:1px solid rgba(24,132,136,0.12);overflow:hidden;scroll-snap-align:start;direction:var(--doc-dir, rtl);display:flex;flex-direction:column}
.project-card__media{position:relative;padding-top:66.6%;background:linear-gradient(135deg,rgba(24,132,136,0.12),rgba(201,163,73,0.12));overflow:hidden}
.project-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .28s ease}
.project-card:hover .project-card__media img{transform:scale(1.04)}
.project-card__body{padding:18px;display:flex;flex-direction:column;gap:6px;text-align:start}
.project-card__body h3{margin:0;font-size:1.1rem;color:var(--brand)}
.project-card__body p{margin:0;font-size:0.95rem;color:var(--text);line-height:1.6;word-break:break-word;overflow-wrap:anywhere}

@media (max-width:768px){
  .projects-header{gap:16px}
  .project-card{flex-basis:min(82vw,320px)}
}

html[dir="rtl"] .product-rack,
html[dir="rtl"] .project-rack{
  direction:rtl;
  flex-direction:row-reverse;
}

/* news */
.news-list{display:flex;flex-direction:column;gap:16px}
.news-item{background:var(--surface);padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(16,105,109,0.12);transition:transform .2s ease, box-shadow .2s ease;display:flex;flex-direction:column;gap:10px}
.news-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,105,109,0.16)}
.news-item .news-thumb{
  width:var(--news-thumb-size, 160px);
  height:var(--news-thumb-size, 160px);
  object-fit:contain;
  border-radius:10px;
  margin:0 auto 12px;
  display:block;
  background:#fff;
}
.news-item p{
  margin:0;
  color:var(--text);
  line-height:1.7;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* contact section */
.contact-section .section-inner{max-width:720px;text-align:center}
.contact-list{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.contact-item{padding-bottom:12px;border-bottom:1px solid rgba(24,132,136,0.18)}
.contact-item:last-child{border-bottom:none;padding-bottom:0}
.contact-item h3{margin:0 0 6px;font-size:1.05rem;color:var(--muted)}
.contact-item p{margin:0;font-size:0.98rem;color:var(--muted);line-height:1.7}
.contact-item a{color:var(--muted);font-weight:700;text-decoration:none;font-size:1rem}
.contact-item a:hover{text-decoration:underline}


/* catalog modal */
.catalog-modal{position:fixed;inset:0;background:rgba(14,26,26,0.68);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:1500;}
.catalog-modal.show{opacity:1;visibility:visible;}
.catalog-modal__dialog{position:relative;background:var(--surface);border-radius:26px;max-width:520px;width:min(520px,100%);padding:32px 32px 28px;box-shadow:0 30px 60px rgba(16,105,109,0.25);transform:translateY(24px);transition:transform .3s ease;}
.catalog-modal.show .catalog-modal__dialog{transform:none;}
.catalog-modal__close{
  position:absolute;
  top:18px;
  inset-inline-end:18px;
  padding:6px 14px;
  font-size:0.88rem;
  min-width:auto;
}
.catalog-modal__dialog h3{margin:0 0 10px;font-size:1.4rem;color:var(--brand);text-align:start}
.catalog-modal__dialog p{margin:0 0 18px;color:var(--muted);line-height:1.6;text-align:start}
.catalog-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;text-align:start}
.catalog-field span{font-weight:700;color:var(--text);font-size:0.98rem}
.catalog-field input{border:1px solid var(--neutral);border-radius:12px;padding:10px 14px;font-size:1rem;transition:border .2s ease, box-shadow .2s ease}
.catalog-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,163,73,0.18)}
.catalog-field input.input-error{border-color:#d14343;box-shadow:0 0 0 2px rgba(209,67,67,0.2)}
.catalog-modal__actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}
.catalog-modal__message{min-height:1.2em;margin:6px 0 0;font-size:0.9rem;text-align:start;color:var(--muted)}
.catalog-modal__message.error{color:#d14343}
.catalog-modal__message.success{color:var(--brand)}
.catalog-download-link{display:none}

@media (max-width:540px){
  .catalog-modal__dialog{padding:26px 22px}
  .catalog-modal__close{top:14px;inset-inline-end:14px}
}


/* footer */
.footer{background:transparent;padding:36px 20px;text-align:center;color:var(--muted)}

/* ---------- Animations & Reveal ---------- */
/* base state */
.reveal, .section, .hero h1, .hero p, .hero-image, .card, .news-item{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.visible{opacity:1;transform:none}

/* variants */
.reveal-up{transform:translateY(24px)}
.reveal-down{transform:translateY(-24px)}
.reveal-left{transform:translateX(24px)}
.reveal-right{transform:translateX(-24px)}
.reveal-fade{transform:none}

/* subtle scale like Apple sections */
.reveal-scale{transform:scale(.98);opacity:0}
.visible.reveal-scale{transform:scale(1)}

/* stagger helpers */
[data-stagger] > *{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
[data-stagger].visible > *{opacity:1;transform:none}
[data-stagger="fast"] > *{transition-delay:calc(var(--i, 0) * 70ms)}
[data-stagger="normal"] > *{transition-delay:calc(var(--i, 0) * 110ms)}
[data-stagger="slow"] > *{transition-delay:calc(var(--i, 0) * 180ms)}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .section, .hero h1, .hero p, .hero-image, .card, .news-item,
  [data-stagger] > *{transition:none !important;transform:none !important;opacity:1 !important}
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-image{width:320px;height:220px}
}

@media (max-width: 768px){
  /* layout */
  .header-inner{padding:12px 16px}
  .nav{display:none;position:absolute;top:64px;right:0;left:0;background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,249,250,0.74));backdrop-filter:blur(8px);flex-direction:column;gap:12px;padding:14px;border-top:1px solid var(--neutral);box-shadow:0 10px 30px rgba(16,105,109,0.12)}
  .nav.show{display:flex}

  /* hamburger inline to the left of logo */
  .hamburger{display:block;position:static;margin-left:8px;z-index:1300}
  /* keep tools inline on the opposite side to avoid overlap */
  .tools{position:static;gap:8px;margin-inline-start:auto}

  /* search input small & placed under tools when visible */
  #searchInput{min-width:140px}
  #searchInput.show{display:inline-block}

  /* hero stacks vertically */
  .hero{flex-direction:column;align-items:center;padding:0 16px}
  .hero-content{padding:96px 0}
  .hero h1{font-size:2.2rem}
  .hero-ctas{flex-direction:column}
  .grid{grid-template-columns:1fr}
}

/* reveal helper */
/* keep for compatibility (already defined above) */
.visible{opacity:1;transform:none}


/* بازگرداندن مرکز بودن hero section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 20px;
}

/* بازگرداندن عنوان اصلی */
.hero h1 {
  font-size: 2.5rem;
  color: var(--brand);
  margin-bottom: 1rem;
  font-weight: 700;
}

/* تنظیم آیکون سرچ به صورت تصویر */
.search-icon img {
  width: 22px;
  height: 22px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.search-icon img:hover {
  opacity: 0.7;
}

/* موقعیت دقیق در حالت ریسپانسیو */
@media (max-width: 768px) {
  .navbar {
    justify-content: space-between;
  }

  .menu-icon {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .lang-toggle {
    position: absolute;
    top: 20px;
    right: 70px; /* فاصله از منو */
  }

  .search-icon {
    position: absolute;
    top: 20px;
    right: 120px; /* فاصله از دکمه زبان */
  }
}

.search-box {
  display: none;
}

.search-box.active {
  display: block;
}
/* تنظیم کلی نوار بالا */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 40px;
  position: relative;
}

/* لوگو در مرکز چپ */
.logo img {
  height: 40px;
  margin-left: 10px;
}

/* منو سمت چپ لوگو */
.menu-icon {
  margin-right: 15px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}

/* برای موبایل فعال میشه */
@media (max-width: 768px) {
  .menu-icon {
    display: block;
    order: 0;
  }

  .logo {
    order: 1;
  }

  nav {
    order: 2;
  }

  .search-icon {
    order: 3;
  }

  .lang-toggle {
    order: 4;
  }

  /* در حالت منوی باز، زیر لوگو بیاد */
  nav.active {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  }
}

/* product cards */
.product-category{background:var(--surface);border-radius:20px;padding:28px;margin-top:32px;box-shadow:0 14px 32px rgba(16,105,109,0.10);border:1px solid rgba(24,132,136,0.12);display:flex;flex-direction:column;gap:20px}
.product-category:first-of-type{margin-top:40px}
.product-category__header{display:flex;flex-direction:column;gap:16px;text-align:start}
.product-category__copy{display:flex;flex-direction:column;gap:8px;max-width:640px}
.product-category__header h3{margin:0;font-size:1.35rem;color:var(--brand)}
.product-category__header p{margin:0;color:var(--muted);font-size:0.96rem;line-height:1.6}
.product-category__controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.product-category__controls button{order:unset}
.rack-btn{border:1px solid rgba(24,132,136,0.45);background:#fff;color:var(--brand);border-radius:50%;padding:0;cursor:pointer;transition:background .2s, color .2s, transform .2s;min-width:auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center}
.rack-btn:hover:not(:disabled){background:var(--brand);color:#fff;transform:translateY(-1px)}
.rack-btn:disabled{opacity:0.4;cursor:not-allowed}
.rack-btn__icon{width:18px;height:18px;display:block}

html[dir="rtl"] .product-category__controls{
  flex-direction:row-reverse;
}

@media (min-width:640px){
  .product-category__header{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .product-category__controls{justify-content:flex-end}
}

.product-rack{display:flex;flex-wrap:nowrap;gap:18px;padding:6px 0 4px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:10px;direction:ltr}
.product-rack::-webkit-scrollbar{height:6px}
.product-rack::-webkit-scrollbar-track{background:rgba(184,194,194,0.3);border-radius:999px}
.product-rack::-webkit-scrollbar-thumb{background:rgba(24,132,136,0.5);border-radius:999px}
.product-card{flex:0 0 clamp(220px,28vw,280px);background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(248,249,250,0.9));border-radius:18px;box-shadow:0 10px 24px rgba(16,105,109,0.12);border:1px solid rgba(24,132,136,0.12);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease;scroll-snap-align:start;direction:var(--doc-dir, rtl)}
.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,105,109,0.18)}
.product-card__media{position:relative;padding-top:72%;background:linear-gradient(135deg,rgba(24,132,136,0.16),rgba(201,163,73,0.10));overflow:hidden}
.product-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .28s ease}
.product-card:hover .product-card__media img{transform:scale(1.05)}
.product-card__body{padding:16px;text-align:center;display:flex;flex-direction:column;gap:6px}
.product-card__body h4{margin:0;font-size:1.02rem;font-weight:700;color:var(--text)}

@media (max-width:768px){
  .product-category{padding:22px;margin-top:26px;border-radius:18px}
  .product-category__header h3{font-size:1.2rem}
  .product-rack{gap:14px;padding:6px 2px 10px}
  .product-card{border-radius:16px;flex-basis:min(80vw,280px)}
  .product-card__body{padding:14px}
}