:root {
  --bg: #111111;
  --text: #f5f2eb;
  --muted: rgba(245, 242, 235, .72);
  --line: rgba(245, 242, 235, .18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5% 6%;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .18em;
}

.language-nav {
  display: flex;
  gap: .35rem;
}

.language-nav button {
  border: 0;
  border-bottom: 1px solid transparent;
  padding: .35rem .25rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
}

.language-nav button.active {
  color: var(--text);
  border-color: var(--text);
}

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.08) 25%,
      rgba(0,0,0,.78) 100%
    );
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 7% 11%;
}

.hero-kicker {
  margin: 0 0 2%;
  color: var(--muted);
  font-size: clamp(.75rem, 3vw, 1rem);
  letter-spacing: .08em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.470rem, 7.350vw, 3.675rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.06em;
}

.hero-text {
  max-width: 34rem;
  margin: 5% 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 4vw, 1.35rem);
  line-height: 1.5;
}

.hero-link {
  display: inline-block;
  margin-top: 6%;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--text);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
}

html[dir="rtl"] .hero-content {
  text-align: right;
}

@media (min-width: 800px) {

  .site-header {
    padding: 2.5% 4%;
  }

  .hero-content {
    padding: 0 5% 6%;
  }

  .hero h1 {
    font-size: clamp(4.9rem, 9.1vw, 9.1rem);
  }

  .hero-text {
    margin-top: 2%;
  }

  .hero-link {
    margin-top: 2.5%;
  }
}

/* Page 1 / B1 — language selector visibility */
.language-nav {
  padding: .35rem .55rem;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999rem;
  background: rgba(15, 15, 15, .38);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .28);
  backdrop-filter: blur(.45rem);
  -webkit-backdrop-filter: blur(.45rem);
}

.language-nav button {
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 .08rem .25rem rgba(0, 0, 0, .55);
}

.language-nav button.active {
  color: #fff;
  border-color: #fff;
}

/* Language selector — contemporary rectangular treatment */
.language-nav {
  border-radius: .15rem;
  background: rgba(15, 15, 15, .38);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .30);
  backdrop-filter: blur(.45rem);
  -webkit-backdrop-filter: blur(.45rem);
}


/* ==================================================
   SHARED SITE HEADER
   ================================================== */

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;

  padding:
    clamp(.9rem, 2.5vw, 1.5rem)
    5%;

  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 8, .58) 0%,
      rgba(8, 8, 8, .30) 65%,
      rgba(8, 8, 8, 0) 100%
    );
}

.site-logo {
  display: block;
  width: clamp(4.5rem, 11vw, 7rem);
  line-height: 0;
}

.site-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.header-languages {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.2rem);

  padding: .35rem .5rem;

  background: rgba(8, 8, 8, .42);

  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;

  box-shadow:
    0 .25rem .8rem rgba(0, 0, 0, .25);

  backdrop-filter: blur(.35rem);
  -webkit-backdrop-filter: blur(.35rem);
}

.header-languages button {
  appearance: none;
  border: 0;
  border-bottom: .12rem solid transparent;
  border-radius: 0;

  padding: .25rem .05rem;

  background: transparent;

  color: rgba(255, 255, 255, .72);

  font: inherit;
  font-size: clamp(.72rem, 1.8vw, .88rem);

  cursor: pointer;

  text-shadow:
    0 .08rem .2rem rgba(0, 0, 0, .65);
}

.header-languages button:hover {
  color: #fff;
}

.header-languages button.active {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .95);
}


/* Remove visual treatment from old prototype selector */
.language-nav {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ==================================================
   VAHID.TR — FINAL PERSIAN TYPOGRAPHY
   Font: Estedad
   ================================================== */

@font-face {
  font-family: "Estedad";
  src: url("/assets/fonts/estedad/Estedad-Regular.woff2")
       format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/*
   Persian typography standard:
   One family across all dimensions.
   Individual size levels remain controlled
   by their own Hero / Title / Subtitle /
   Normal / Small / Footer rules.
*/

html[lang="fa"],
html[lang="fa"] body,
html[lang="fa"] header,
html[lang="fa"] nav,
html[lang="fa"] main,
html[lang="fa"] section,
html[lang="fa"] article,
html[lang="fa"] aside,
html[lang="fa"] footer,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6,
html[lang="fa"] p,
html[lang="fa"] a,
html[lang="fa"] span,
html[lang="fa"] button,
html[lang="fa"] label,
html[lang="fa"] input,
html[lang="fa"] textarea,
html[lang="fa"] select {
  font-family: "Estedad", sans-serif;
}

/* Persian Hero typography */
html[lang="fa"] .hero h1 {
  font-family: "Estedad", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
}

/* Persian supporting typography */
html[lang="fa"] .hero-kicker,
html[lang="fa"] .hero-text,
html[lang="fa"] .hero-link,
html[lang="fa"] .header-languages,
html[lang="fa"] .header-languages button {
  font-family: "Estedad", sans-serif;
  letter-spacing: 0;
}



/* ==================================================
   PAGE 1 / B1 — HERO SOFT VEIL
   ================================================== */

.hero-image::after {
  background:
    linear-gradient(
      rgba(0, 0, 0, .28),
      rgba(0, 0, 0, .28)
    );
}


/* ==================================================
   PAGE 1 / B1 — HERO SOFT FOCUS
   ================================================== */

/* Slightly soften the photograph only */
.hero-image img {
  filter:
    blur(.12rem)
    contrast(.88)
    brightness(.92);
  transform: scale(1.01);
}

/* Very light veil — text remains untouched */
.hero-image::after {
  background: rgba(8, 12, 16, .12);
}

/* Keep foreground content crisp */
.hero-content,
.site-header {
  filter: none;
}



/* ==================================================
   PAGE 1 / B1 — FINAL WHITE VEIL TEST
   ================================================== */

/* Original photograph stays sharp */
.hero-image img {
  filter: none;
  transform: none;
}

/* 50% transparent white veil */
.hero-image::after {
  background: rgba(255, 255, 255, .50);
}

/* Foreground remains fully sharp */
.hero-content,
.site-header {
  filter: none;
}



/* ==================================================
   PAGE 1 / B1 — HERO TEXT READABILITY
   ================================================== */

/* Keep text clearly above photograph veil */
.hero-content {
  position: relative;
  z-index: 5;
}

/* Clear but restrained shadow for all Hero text */
.hero-kicker,
.hero h1,
.hero-text,
.hero-link {
  text-shadow:
    0 .08rem .18rem rgba(0, 0, 0, .72),
    0 .15rem .45rem rgba(0, 0, 0, .35);
}

/* Keep primary Hero text fully visible */
.hero-kicker,
.hero h1,
.hero-text,
.hero-link {
  color: #ffffff;
}



/* ==================================================
   VAHID.TR — HOME PAGE SYSTEM
   ================================================== */

.home-section {
  position: relative;
  background: #f1f0ec;
  color: #151515;
}

.section-inner {
  width: 90%;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 9rem) 0;
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6%;
}

.section-number {
  margin-bottom: 7%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  opacity: .38;
}

.section-copy {
  max-width: 55rem;
}

.section-kicker {
  margin: 0 0 3%;
  font-size: clamp(.78rem, 1.5vw, .95rem);
  font-weight: 400;
  letter-spacing: .08em;
  opacity: .58;
}

.section-title {
  max-width: 50rem;
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.section-lead {
  max-width: 48rem;
  margin: 6% 0 0;
  font-size: clamp(1.12rem, 2.2vw, 1.55rem);
  line-height: 1.75;
  opacity: .88;
}

.section-body {
  max-width: 44rem;
  margin: 4% 0 0;
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  line-height: 1.9;
  opacity: .67;
}

.text-link,
.section-action {
  display: inline-block;
  margin-top: 6%;
  padding: 0 0 .35rem;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  font-size: clamp(.88rem, 1.5vw, 1rem);
}

.home-dark {
  background: #111;
  color: #f5f2eb;
}

.home-dark .section-lead,
.home-dark .section-body {
  color: rgba(245, 242, 235, .78);
}

.home-accent {
  background: #d9d5cc;
}

.home-contact {
  background: #e7e5df;
}

.language-statement {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  margin-top: 7%;
  padding-top: 5%;
  border-top: 1px solid rgba(255,255,255,.18);
}

.language-statement span {
  font-size: clamp(1.1rem, 3vw, 2rem);
}


/* ==================================================
   PERSIAN HOME TYPOGRAPHY
   ================================================== */

html[lang="fa"] .section-kicker,
html[lang="fa"] .section-title,
html[lang="fa"] .section-lead,
html[lang="fa"] .section-body,
html[lang="fa"] .text-link,
html[lang="fa"] .section-action,
html[lang="fa"] .site-footer {
  font-family: "Estedad", sans-serif;
  letter-spacing: 0;
}

html[lang="fa"] .section-title {
  line-height: 1.3;
}

html[lang="fa"] .section-lead {
  line-height: 2;
}

html[lang="fa"] .section-body {
  line-height: 2;
}


/* ==================================================
   FOOTER
   ================================================== */

.site-footer {
  background: #0c0c0c;
  color: #f5f2eb;
}

.footer-inner {
  width: 90%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 8% 0 5%;
}

.footer-brand {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: .12em;
}

.footer-inner > p {
  margin: 2% 0 0;
  color: rgba(245,242,235,.58);
  font-size: clamp(.8rem, 1.5vw, .95rem);
}

.footer-copyright {
  margin-top: 6% !important;
  padding-top: 4%;
  border-top: 1px solid rgba(255,255,255,.12);
}


/* ==================================================
   DESKTOP HOME LAYOUT
   ================================================== */

@media (min-width: 800px) {

  .section-grid {
    grid-template-columns: 8% 1fr;
    gap: 4%;
  }

  .section-number {
    margin: .5rem 0 0;
  }

  .section-lead {
    margin-top: 4%;
  }

  .section-body {
    margin-top: 2.5%;
  }

  .text-link,
  .section-action {
    margin-top: 4%;
  }

  .language-statement {
    margin-top: 5%;
    padding-top: 4%;
  }

}


/* ==================================================
   RTL DETAILS
   ================================================== */

html[dir="rtl"] .section-copy,
html[dir="rtl"] .section-number,
html[dir="rtl"] .footer-inner {
  text-align: right;
}

html[dir="rtl"] .language-statement {
  justify-content: flex-start;
}



/* ==================================================
   VAHID.TR — CANONICAL TYPOGRAPHY SYSTEM

   1. Hero Title
   2. Title
   3. Subtitle
   4. Normal
   5. Footer
   6. Small

   IMPORTANT:
   Kicker  -> Title
   section-title -> Subtitle
   Lead + Body -> Normal
   Links / Actions -> Footer
   Section numbers -> Small
   ================================================== */


/* --------------------------------------------------
   TITLE
   Current kicker becomes the real block Title
   -------------------------------------------------- */

.home-section .section-kicker {
  margin: 0 0 2.5%;
  font-size: clamp(1.47rem, 3.15vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
  opacity: 1;
}


/* --------------------------------------------------
   SUBTITLE
   Current section-title becomes Subtitle
   -------------------------------------------------- */

.home-section .section-title {
  max-width: 50rem;
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.015em;
  opacity: .72;
}


/* --------------------------------------------------
   NORMAL
   ALL content paragraphs use exactly one font size
   -------------------------------------------------- */

.home-section .section-lead,
.home-section .section-body {
  max-width: 48rem;
  margin: 4% 0 0;
  font-size: clamp(1rem, 1.65vw, 1.18rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  opacity: .82;
}


/* Body may look quieter, but NOT smaller */
.home-section .section-body {
  opacity: .62;
}


/* --------------------------------------------------
   FOOTER SIZE
   Links / actions
   -------------------------------------------------- */

.home-section .text-link,
.home-section .section-action {
  display: inline-block;
  margin-top: 4%;
  padding: 0 0 .3rem;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  text-decoration: none;

  font-size: clamp(.82rem, 1.3vw, .95rem);
  font-weight: 400;
  line-height: 1.5;
}


/* --------------------------------------------------
   SMALL
   Section numbers and genuinely minor information
   -------------------------------------------------- */

.home-section .section-number {
  font-size: clamp(.64rem, .95vw, .72rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  opacity: .35;
}


/* --------------------------------------------------
   THREE-LANGUAGE STATEMENT
   Treat as NORMAL — no new typography level
   -------------------------------------------------- */

.home-section .language-statement span {
  font-size: clamp(1rem, 1.65vw, 1.18rem);
  font-weight: 400;
  line-height: 1.9;
}


/* ==================================================
   PERSIAN — ESTEDAD
   Same hierarchy, Persian-specific line heights only
   ================================================== */

html[lang="fa"] .home-section .section-kicker {
  font-family: "Estedad", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

html[lang="fa"] .home-section .section-title {
  font-family: "Estedad", sans-serif;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

html[lang="fa"] .home-section .section-lead,
html[lang="fa"] .home-section .section-body {
  font-family: "Estedad", sans-serif;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
}

html[lang="fa"] .home-section .text-link,
html[lang="fa"] .home-section .section-action,
html[lang="fa"] .home-section .section-number,
html[lang="fa"] .home-section .language-statement span {
  font-family: "Estedad", sans-serif;
  letter-spacing: 0;
}


/* ==================================================
   FOOTER TYPOGRAPHY
   Footer remains Footer level
   ================================================== */

.site-footer,
.site-footer p,
.footer-copyright {
  font-size: clamp(.82rem, 1.3vw, .95rem);
  line-height: 1.7;
}

html[lang="fa"] .site-footer,
html[lang="fa"] .site-footer p,
html[lang="fa"] .footer-copyright {
  font-family: "Estedad", sans-serif;
  letter-spacing: 0;
}


/* ==================================================
   MOBILE TYPOGRAPHY SPACING
   ================================================== */

@media (max-width: 799px) {

  .home-section .section-kicker {
    margin-bottom: 4%;
  }

  .home-section .section-lead,
  .home-section .section-body {
    margin-top: 6%;
  }

  .home-section .text-link,
  .home-section .section-action {
    margin-top: 7%;
  }

}


/* ==================================================
   DESKTOP TYPOGRAPHY SPACING
   ================================================== */

@media (min-width: 800px) {

  .home-section .section-kicker {
    margin-bottom: 2%;
  }

  .home-section .section-lead,
  .home-section .section-body {
    margin-top: 3%;
  }

  .home-section .text-link,
  .home-section .section-action {
    margin-top: 3.5%;
  }

}



/* ==================================================
   HOME — MEDIA PLACEHOLDERS
   Temporary until Vahid supplies original media
   ================================================== */

.media-placeholder {
  width: 100%;
  margin: 5% 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .08rem solid rgba(20,20,20,.20);
  background: rgba(20,20,20,.035);
  aspect-ratio: 16 / 9;
}

.home-dark .media-placeholder {
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
}

.media-placeholder span {
  font-size: clamp(.64rem, .95vw, .72rem);
  opacity: .42;
  letter-spacing: .08em;
}

.image-placeholder {
  aspect-ratio: 16 / 9;
}

.youtube-placeholder {
  aspect-ratio: 16 / 9;
}

.media-wide {
  aspect-ratio: 16 / 5;
}

html[lang="fa"] .media-placeholder span {
  font-family: "Estedad", sans-serif;
  letter-spacing: 0;
}



/* ============================================================
   VAHID.TR
   HOME THEME TEST — EDITORIAL + TECHNOLOGY
   B2 TO FOOTER
   ============================================================ */


/* ------------------------------------------------------------
   GLOBAL HOME CANVAS
   One continuous visual environment
   ------------------------------------------------------------ */

body {
  background: #e9edf0;
}

.home-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(116, 166, 194, .20) 0%,
      rgba(116, 166, 194, .07) 22%,
      transparent 46%
    ),
    radial-gradient(
      circle at 10% 82%,
      rgba(194, 153, 119, .16) 0%,
      rgba(194, 153, 119, .05) 25%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #f4f5f3 0%,
      #e8edf0 48%,
      #f0ece6 100%
    );

  color: #17191b;
}


/* Remove old black / white alternating rectangles */

.home-section.home-dark,
.home-section.home-accent,
.home-section.home-contact {
  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(91, 139, 169, .20) 0%,
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 72%,
      rgba(195, 153, 115, .16) 0%,
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #eef1f2 0%,
      #e3e9ec 52%,
      #eee9e2 100%
    );

  color: #17191b;
}


/* ------------------------------------------------------------
   TECHNOLOGY GRID
   Very subtle background structure
   ------------------------------------------------------------ */

.home-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(25, 45, 58, .035) .05rem,
      transparent .05rem
    ),
    linear-gradient(
      90deg,
      rgba(25, 45, 58, .035) .05rem,
      transparent .05rem
    );

  background-size:
    clamp(3rem, 7vw, 6rem)
    clamp(3rem, 7vw, 6rem);

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 16%,
      black 84%,
      transparent 100%
    );

  pointer-events: none;
}


/* ------------------------------------------------------------
   ATMOSPHERIC LIGHT
   Different position on alternating blocks
   ------------------------------------------------------------ */

.home-section::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 48%;
  aspect-ratio: 1;

  top: 8%;
  right: -18%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(104, 169, 205, .24) 0%,
      rgba(104, 169, 205, .10) 30%,
      transparent 68%
    );

  filter: blur(2.5rem);
  pointer-events: none;
}

.home-section:nth-of-type(even)::after {
  right: auto;
  left: -18%;

  background:
    radial-gradient(
      circle,
      rgba(202, 155, 112, .20) 0%,
      rgba(202, 155, 112, .08) 32%,
      transparent 68%
    );
}


/* ------------------------------------------------------------
   SECTION FLOW
   Reduce "rectangle after rectangle" feeling
   ------------------------------------------------------------ */

.home-section + .home-section {
  margin-top: -1px;
}

.section-inner {
  position: relative;
  width: 90%;
  max-width: 78rem;
  margin: 0 auto;

  padding:
    clamp(5.5rem, 11vw, 9.5rem)
    0;
}


/* Soft transition between sections */

.home-section + .home-section .section-inner::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: .08rem;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(25, 35, 42, .06) 18%,
      rgba(25, 35, 42, .22) 50%,
      rgba(25, 35, 42, .06) 82%,
      transparent 100%
    );
}


/* ------------------------------------------------------------
   STORY LINE
   Continuous technological navigation line
   ------------------------------------------------------------ */

.section-grid {
  position: relative;
}

.section-grid::before {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;

  left: 2.2%;

  width: .08rem;

  background:
    linear-gradient(
      to bottom,
      rgba(52, 113, 145, .05),
      rgba(52, 113, 145, .55) 25%,
      rgba(187, 137, 95, .45) 75%,
      rgba(187, 137, 95, .05)
    );

  box-shadow:
    0 0 .8rem rgba(75, 139, 173, .22);
}


/* RTL moves narrative line to opposite side */

html[dir="rtl"] .section-grid::before {
  left: auto;
  right: 2.2%;
}


/* ------------------------------------------------------------
   SECTION NUMBER
   Technical marker
   ------------------------------------------------------------ */

.section-number {
  position: relative;
  z-index: 2;

  width: fit-content;

  padding:
    .42rem
    .55rem;

  border:
    .06rem solid
    rgba(35, 74, 94, .20);

  border-radius: 0;

  background:
    rgba(245, 248, 249, .62);

  box-shadow:
    0 .4rem 1.4rem rgba(24, 42, 52, .08),
    inset 0 0 0 .06rem rgba(255,255,255,.55);

  backdrop-filter:
    blur(.8rem);

  -webkit-backdrop-filter:
    blur(.8rem);

  color:
    rgba(27, 65, 85, .70);

  opacity: 1;
}


/* Tiny luminous node */

.section-number::after {
  content: "";

  position: absolute;

  width: .34rem;
  aspect-ratio: 1;

  top: 50%;
  left: -.85rem;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    rgba(65, 137, 174, .88);

  box-shadow:
    0 0 .8rem rgba(65, 137, 174, .70);
}

html[dir="rtl"] .section-number::after {
  left: auto;
  right: -.85rem;
}


/* ------------------------------------------------------------
   COPY AREA
   Editorial hierarchy
   ------------------------------------------------------------ */

.section-copy {
  position: relative;
  z-index: 2;
}


/* TITLE — our canonical Title */

.home-section .section-kicker {
  color: #15232b;

  text-shadow:
    0 .06rem .1rem rgba(255,255,255,.65);
}


/* SUBTITLE */

.home-section .section-title {
  color:
    rgba(31, 52, 63, .72);
}


/* NORMAL */

.home-section .section-lead,
.home-section .section-body {
  color:
    rgba(23, 28, 31, .82);
}


/* Old dark-section overrides must not make text white */

.home-dark .section-kicker,
.home-dark .section-title,
.home-dark .section-lead,
.home-dark .section-body {
  color: inherit;
}


/* ------------------------------------------------------------
   TEXT EMPHASIS LINE
   Adds editorial identity without cards
   ------------------------------------------------------------ */

.home-section .section-kicker::after {
  content: "";

  display: block;

  width: clamp(3.5rem, 8vw, 7rem);
  height: .12rem;

  margin-top: 3%;

  background:
    linear-gradient(
      90deg,
      rgba(54, 125, 162, .90),
      rgba(191, 137, 91, .65),
      transparent
    );

  box-shadow:
    0 0 .7rem rgba(68, 138, 174, .22);
}

html[dir="rtl"] .home-section .section-kicker::after {
  background:
    linear-gradient(
      270deg,
      rgba(54, 125, 162, .90),
      rgba(191, 137, 91, .65),
      transparent
    );
}


/* ------------------------------------------------------------
   MEDIA PLACEHOLDERS
   Glass / technology surfaces
   ------------------------------------------------------------ */

.media-placeholder {
  position: relative;
  overflow: hidden;

  border:
    .06rem solid
    rgba(255,255,255,.70);

  border-radius: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.50),
      rgba(224,235,240,.28)
    );

  box-shadow:
    0 1.6rem 4rem rgba(28, 47, 58, .12),
    inset 0 0 0 .06rem rgba(60, 101, 123, .08);

  backdrop-filter:
    blur(1.1rem);

  -webkit-backdrop-filter:
    blur(1.1rem);
}


/* Glass sheen */

.media-placeholder::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 10%,
      rgba(255,255,255,.34) 38%,
      transparent 62%
    );

  pointer-events: none;
}


/* Technical corner */

.media-placeholder::after {
  content: "";

  position: absolute;

  width: 9%;
  aspect-ratio: 1;

  right: 2%;
  bottom: 4%;

  border-right:
    .08rem solid
    rgba(58, 124, 157, .40);

  border-bottom:
    .08rem solid
    rgba(58, 124, 157, .40);

  pointer-events: none;
}

html[dir="rtl"] .media-placeholder::after {
  right: auto;
  left: 2%;

  border-right: 0;

  border-left:
    .08rem solid
    rgba(58, 124, 157, .40);
}


/* Placeholder text */

.media-placeholder span {
  position: relative;
  z-index: 2;

  color:
    rgba(31, 67, 85, .55);

  opacity: 1;
}


/* ------------------------------------------------------------
   LINKS
   Contemporary — absolutely no pills
   ------------------------------------------------------------ */

.home-section .text-link,
.home-section .section-action {
  position: relative;

  border: 0;
  border-radius: 0;

  padding:
    .45rem
    2.5rem
    .45rem
    0;

  color:
    rgba(27, 72, 95, .88);

  text-decoration: none;
}


/* line beside link */

.home-section .text-link::after,
.home-section .section-action::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  width: 1.8rem;
  height: .08rem;

  background:
    linear-gradient(
      90deg,
      rgba(55, 129, 166, .85),
      rgba(187, 134, 89, .75)
    );

  transition:
    width .3s ease;
}

.home-section .text-link:hover::after,
.home-section .section-action:hover::after {
  width: 2.3rem;
}


html[dir="rtl"] .home-section .text-link,
html[dir="rtl"] .home-section .section-action {
  padding:
    .45rem
    0
    .45rem
    2.5rem;
}

html[dir="rtl"] .home-section .text-link::after,
html[dir="rtl"] .home-section .section-action::after {
  right: auto;
  left: 0;
}


/* ------------------------------------------------------------
   DIFFERENT SECTION COMPOSITIONS
   Prevent every block from looking identical
   ------------------------------------------------------------ */

/* B2 — generous editorial opening */

#p1-b2 .section-copy {
  max-width: 61rem;
}


/* B3 — content shifted slightly */

@media (min-width: 800px) {

  #p1-b3 .section-copy,
  #p1-b5 .section-copy {
    width: 86%;
    margin-left: 8%;
  }

  html[dir="rtl"] #p1-b3 .section-copy,
  html[dir="rtl"] #p1-b5 .section-copy {
    margin-left: 0;
    margin-right: 8%;
  }

}


/* B4 — wider music section */

#p1-b4 .section-copy {
  max-width: 68rem;
}


/* B5 — video feels cinematic */

#p1-b5 .youtube-placeholder {
  width: min(100%, 68rem);
}


/* B6 — closing section gets more breathing room */

#p1-b6 .section-inner {
  padding-bottom:
    clamp(7rem, 14vw, 12rem);
}


/* ------------------------------------------------------------
   FOOTER
   Dark technology ending, not another section rectangle
   ------------------------------------------------------------ */

.site-footer {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(51, 117, 151, .28),
      transparent 35%
    ),
    radial-gradient(
      circle at 85% 100%,
      rgba(167, 115, 75, .18),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #10161a,
      #171d20 52%,
      #111416
    );

  color: #f1f3f4;
}


/* fine footer grid */

.site-footer::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) .05rem,
      transparent .05rem
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) .05rem,
      transparent .05rem
    );

  background-size:
    clamp(3rem, 7vw, 6rem)
    clamp(3rem, 7vw, 6rem);

  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 2;
}


/* ------------------------------------------------------------
   VERY SUBTLE MOTION
   Technology should feel alive, not animated for show
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  .media-placeholder {
    transition:
      transform .35s ease,
      box-shadow .35s ease;
  }

  .media-placeholder:hover {
    transform:
      translateY(-.25rem);

    box-shadow:
      0 2rem 5rem rgba(28, 47, 58, .16),
      inset 0 0 0 .06rem rgba(60, 101, 123, .10);
  }

}


/* ------------------------------------------------------------
   MOBILE
   Keep technology, reduce decoration
   ------------------------------------------------------------ */

@media (max-width: 799px) {

  .section-grid::before {
    left: .25rem;
  }

  html[dir="rtl"] .section-grid::before {
    left: auto;
    right: .25rem;
  }

  .section-number {
    margin-left: 1rem;
  }

  html[dir="rtl"] .section-number {
    margin-left: 0;
    margin-right: 1rem;
  }

  .section-number::after {
    left: -1.15rem;
  }

  html[dir="rtl"] .section-number::after {
    left: auto;
    right: -1.15rem;
  }

  .home-section::after {
    width: 85%;
    right: -42%;
  }

  .home-section:nth-of-type(even)::after {
    right: auto;
    left: -42%;
  }

}


/* ============================================================
   IMPORTANT:
   HERO + HEADER ARE NOT PART OF THIS THEME OVERRIDE.
   Existing B1 design remains unchanged.
   ============================================================ */



/* ============================================================
   VAHID.TR — COMPACT VERTICAL RHYTHM
   Keep paragraph line-height unchanged.
   Remove excessive vertical gaps.
   ============================================================ */


/* Main block height — substantially tighter */
.home-section .section-inner {
  padding-top: clamp(2.8rem, 5.5vw, 4.8rem);
  padding-bottom: clamp(2.8rem, 5.5vw, 4.8rem);
}


/* Title -> Subtitle */
.home-section .section-kicker {
  margin-bottom: 1.2%;
}


/* Subtitle -> first paragraph */
.home-section .section-lead {
  margin-top: 2%;
}


/* Paragraph -> paragraph
   Line-height itself remains untouched */
.home-section .section-body {
  margin-top: 1.5%;
}


/* Media should not float far away from text */
.home-section .media-placeholder {
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}


/* Links closer to their related text */
.home-section .text-link,
.home-section .section-action {
  margin-top: 2%;
}


/* Title decorative line tighter */
.home-section .section-kicker::after {
  margin-top: 1.5%;
}


/* Language statement if used later */
.home-section .language-statement {
  margin-top: 2.5%;
  padding-top: 2.5%;
}


/* Closing block should NOT have giant empty ending */
#p1-b6 .section-inner {
  padding-bottom: clamp(3.2rem, 6vw, 5.2rem);
}


/* ------------------------------------------------------------
   MOBILE
   Compact but still comfortable
   ------------------------------------------------------------ */

@media (max-width: 799px) {

  .home-section .section-inner {
    padding-top: clamp(2.4rem, 9vw, 3.6rem);
    padding-bottom: clamp(2.4rem, 9vw, 3.6rem);
  }

  .home-section .section-kicker {
    margin-bottom: 2%;
  }

  .home-section .section-lead {
    margin-top: 3%;
  }

  .home-section .section-body {
    margin-top: 2.5%;
  }

  .home-section .media-placeholder {
    margin-top: 4%;
    margin-bottom: 4%;
  }

  .home-section .text-link,
  .home-section .section-action {
    margin-top: 3%;
  }

}


/* ------------------------------------------------------------
   DESKTOP
   Dense editorial rhythm
   ------------------------------------------------------------ */

@media (min-width: 800px) {

  .home-section .section-inner {
    padding-top: clamp(2.8rem, 4.5vw, 4.5rem);
    padding-bottom: clamp(2.8rem, 4.5vw, 4.5rem);
  }

  .home-section .section-kicker {
    margin-bottom: 1%;
  }

  .home-section .section-lead {
    margin-top: 1.8%;
  }

  .home-section .section-body {
    margin-top: 1.3%;
  }

  .home-section .media-placeholder {
    margin-top: 2.2%;
    margin-bottom: 2.2%;
  }

}



/* ============================================================
   VAHID.TR — CLEAN SECTION DIVIDERS
   No additional gap.
   No rectangular separator.
   ============================================================ */


/* Remove previous rectangular/top separator */
.home-section + .home-section .section-inner::before {
  content: none !important;
}


/* ------------------------------------------------------------
   DIVIDER
   Sits directly on section boundary.
   Creates ZERO additional vertical space.
   ------------------------------------------------------------ */

.home-section + .home-section {
  position: relative;
  border: 0;
}

.home-section + .home-section::before {
  content: "";

  position: absolute;
  z-index: 5;

  top: 0;
  left: 7.5%;

  width: 85%;
  height: .07rem;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(55, 128, 164, .18) 15%,
      rgba(55, 128, 164, .62) 38%,
      rgba(188, 137, 94, .58) 62%,
      rgba(188, 137, 94, .16) 85%,
      transparent 100%
    );

  box-shadow:
    0 0 .45rem rgba(76, 136, 165, .12);

  pointer-events: none;
}


/* ------------------------------------------------------------
   TIGHTER SECTION SPACING
   Divider does not affect spacing.
   ------------------------------------------------------------ */

.home-section .section-inner {
  padding-top: clamp(2.2rem, 3.7vw, 3.6rem);
  padding-bottom: clamp(2.2rem, 3.7vw, 3.6rem);
}


/* Keep internal paragraph line spacing unchanged */

.home-section .section-kicker {
  margin-bottom: .8%;
}

.home-section .section-lead {
  margin-top: 1.5%;
}

.home-section .section-body {
  margin-top: 1.2%;
}

.home-section .media-placeholder {
  margin-top: 2%;
  margin-bottom: 2%;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 799px) {

  .home-section + .home-section::before {
    left: 5%;
    width: 90%;
  }

  .home-section .section-inner {
    padding-top: clamp(2rem, 7vw, 3rem);
    padding-bottom: clamp(2rem, 7vw, 3rem);
  }

  .home-section .section-kicker {
    margin-bottom: 1.5%;
  }

  .home-section .section-lead {
    margin-top: 2.5%;
  }

  .home-section .section-body {
    margin-top: 2%;
  }

}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 800px) {

  .home-section .section-inner {
    padding-top: clamp(2.2rem, 3.4vw, 3.5rem);
    padding-bottom: clamp(2.2rem, 3.4vw, 3.5rem);
  }

}



/* ============================================================
   PAGE 1 / B2 — ABOUT
   Two columns: text + 4:5 image
   Top aligned
   ============================================================ */

#p1-b2 .b2-layout {
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(2rem, 5vw, 5rem);

  align-items: start;
}


/* Both columns begin at exactly the same level */

#p1-b2 .b2-copy,
#p1-b2 .b2-image {
  align-self: start;
  margin-top: 0;
}


/* Text */

#p1-b2 .b2-copy {
  width: 100%;
  max-width: none;
}


/* Image */

#p1-b2 .b2-image {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 5;

  margin-bottom: 0;

  overflow: hidden;

  border: .06rem solid rgba(255,255,255,.72);

  box-shadow:
    0 1.4rem 3.5rem rgba(30,48,58,.14),
    0 0 0 .06rem rgba(54,105,132,.08);

  background: rgba(255,255,255,.20);
}


/* Keep photograph exactly 4:5 */

#p1-b2 .b2-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter: none;
}


/* Very light theme integration over photograph */

#p1-b2 .b2-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(221,235,242,.08),
      transparent 42%,
      rgba(216,188,163,.07)
    );
}


/* Persian:
   text on right / photograph on left */

html[dir="rtl"] #p1-b2 .b2-copy {
  grid-column: 1;
}

html[dir="rtl"] #p1-b2 .b2-image {
  grid-column: 2;
}


/* LTR:
   photograph on left / text on right */

html[dir="ltr"] #p1-b2 .b2-image {
  grid-column: 1;
  grid-row: 1;
}

html[dir="ltr"] #p1-b2 .b2-copy {
  grid-column: 2;
  grid-row: 1;
}


/* Mobile */

@media (max-width: 799px) {

  #p1-b2 .b2-layout {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 6vw, 2.4rem);
  }

  html[dir="rtl"] #p1-b2 .b2-copy,
  html[dir="rtl"] #p1-b2 .b2-image,
  html[dir="ltr"] #p1-b2 .b2-copy,
  html[dir="ltr"] #p1-b2 .b2-image {
    grid-column: 1;
  }

  #p1-b2 .b2-copy {
    grid-row: 1;
  }

  #p1-b2 .b2-image {
    grid-row: 2;
    width: min(82%, 28rem);
  }

  html[dir="rtl"] #p1-b2 .b2-image {
    margin-left: auto;
    margin-right: 0;
  }

  html[dir="ltr"] #p1-b2 .b2-image {
    margin-left: 0;
    margin-right: auto;
  }

}



/* ============================================================
   PAGE 1 / B2 — FINAL COLUMN BALANCE TEST
   Larger photograph without changing Normal typography
   ============================================================ */

@media (min-width: 800px) {

  #p1-b2 .b2-layout {
    width: 100%;

    grid-template-columns:
      minmax(0, 55fr)
      minmax(0, 45fr);

    gap: clamp(1.5rem, 3vw, 3rem);

    align-items: start;
  }


  /* Persian:
     text = right side
     image = left side */

  html[dir="rtl"] #p1-b2 .b2-copy {
    grid-column: 1;
    grid-row: 1;
  }

  html[dir="rtl"] #p1-b2 .b2-image {
    grid-column: 2;
    grid-row: 1;
  }


  /* LTR reverses visual composition */

  html[dir="ltr"] #p1-b2 .b2-image {
    grid-column: 1;
    grid-row: 1;
  }

  html[dir="ltr"] #p1-b2 .b2-copy {
    grid-column: 2;
    grid-row: 1;
  }


  /* Image uses its full column */

  #p1-b2 .b2-image {
    width: 100%;
    max-width: none;

    aspect-ratio: 4 / 5;

    margin-top: 0;
    margin-bottom: 0;

    align-self: start;
  }


  #p1-b2 .b2-copy {
    width: 100%;
    max-width: none;

    margin-top: 0;

    align-self: start;
  }

}


/* Mobile remains single-column */

@media (max-width: 799px) {

  #p1-b2 .b2-layout {
    grid-template-columns: 1fr;
  }

  #p1-b2 .b2-image {
    width: min(90%, 30rem);
    aspect-ratio: 4 / 5;
  }

}



/* ============================================================
   PAGE 1 / B2 — RTL + COLUMN GAP FIX
   ============================================================ */

@media (min-width: 800px) {

  /* Physical layout:
     image = left
     text  = right
  */
  #p1-b2 .b2-layout {
    display: grid;

    grid-template-columns:
      minmax(0, 45fr)
      minmax(0, 55fr);

    column-gap: clamp(2.5rem, 4.5vw, 5rem);

    align-items: start;
    direction: ltr;
  }


  /* IMAGE — LEFT */

  #p1-b2 .b2-image {
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    margin: 0;

    direction: ltr;
  }


  /* TEXT — RIGHT */

  #p1-b2 .b2-copy {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    max-width: none;
    margin: 0;

    direction: rtl;
    text-align: right;
  }


  /* Force every Persian text element to remain RTL/right */

  html[lang="fa"] #p1-b2 .b2-copy,
  html[lang="fa"] #p1-b2 .b2-copy p,
  html[lang="fa"] #p1-b2 .b2-copy a,
  html[lang="fa"] #p1-b2 .b2-copy span {
    direction: rtl;
    text-align: right;
  }

}


/* MOBILE */

@media (max-width: 799px) {

  #p1-b2 .b2-layout {
    display: grid;
    grid-template-columns: 1fr;

    row-gap: 4%;

    direction: rtl;
  }

  #p1-b2 .b2-copy {
    grid-column: 1;
    grid-row: 1;

    direction: rtl;
    text-align: right;
  }

  #p1-b2 .b2-image {
    grid-column: 1;
    grid-row: 2;

    direction: ltr;
  }

  html[lang="fa"] #p1-b2 .b2-copy,
  html[lang="fa"] #p1-b2 .b2-copy p {
    direction: rtl;
    text-align: right;
  }

}



/* ============================================================
   VAHID.TR — GLOBAL STICKY HEADER
   Header is independent from Hero and always visible
   ============================================================ */

.site-header {
  position: sticky !important;

  top: 0;
  left: auto;

  width: 100%;

  z-index: 1000;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    clamp(.55rem, 1.2vw, .85rem)
    5%;

  background:
    linear-gradient(
      105deg,
      rgba(15, 21, 25, .92) 0%,
      rgba(25, 35, 41, .88) 48%,
      rgba(25, 31, 34, .92) 100%
    );

  border-bottom:
    .06rem solid
    rgba(255,255,255,.12);

  box-shadow:
    0 .45rem 1.6rem
    rgba(10,18,23,.16);

  backdrop-filter:
    blur(1rem)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(1rem)
    saturate(125%);
}


/* ------------------------------------------------------------
   LOGO
   Slightly more compact because header is permanent
   ------------------------------------------------------------ */

.site-header .site-logo {
  width:
    clamp(3.5rem, 7vw, 5rem);

  flex: 0 0 auto;
}


/* ------------------------------------------------------------
   LANGUAGE SELECTOR
   Remains permanently readable
   ------------------------------------------------------------ */

.site-header .header-languages {
  flex: 0 0 auto;

  background:
    rgba(255,255,255,.055);

  border:
    .06rem solid
    rgba(255,255,255,.13);

  border-radius: 0;

  box-shadow:
    inset 0 0 0 .06rem rgba(255,255,255,.025);

  backdrop-filter:
    blur(.7rem);

  -webkit-backdrop-filter:
    blur(.7rem);
}


.site-header .header-languages button {
  color:
    rgba(255,255,255,.68);

  text-shadow: none;
}


.site-header .header-languages button.active {
  color: #fff;

  border-bottom-color:
    rgba(255,255,255,.95);
}


/* ------------------------------------------------------------
   HERO
   Header no longer overlays Hero
   ------------------------------------------------------------ */

.hero {
  position: relative;
}


/* ------------------------------------------------------------
   SCROLL TARGETS
   Sticky header must not cover section beginnings
   ------------------------------------------------------------ */

.home-section,
.hero {
  scroll-margin-top:
    clamp(5rem, 9vw, 6.5rem);
}


/* ------------------------------------------------------------
   MOBILE
   Keep permanent header compact
   ------------------------------------------------------------ */

@media (max-width: 799px) {

  .site-header {
    padding:
      .45rem
      5%;
  }

  .site-header .site-logo {
    width:
      clamp(3rem, 12vw, 4rem);
  }

  .site-header .header-languages {
    gap:
      clamp(.5rem, 2.5vw, .8rem);

    padding:
      .28rem
      .4rem;
  }

}



/* ============================================================
   VAHID.TR — LIGHT GLASS STICKY HEADER
   ============================================================ */

.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;

  background:
    linear-gradient(
      105deg,
      rgba(247,249,249,.90) 0%,
      rgba(232,241,245,.88) 52%,
      rgba(246,241,235,.90) 100%
    );

  border-bottom:
    .06rem solid
    rgba(75,125,150,.18);

  box-shadow:
    0 .35rem 1.5rem
    rgba(41,73,89,.10);

  backdrop-filter:
    blur(1rem)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(1rem)
    saturate(130%);
}


/* Language selector */

.site-header .header-languages {
  background:
    rgba(255,255,255,.40);

  border:
    .06rem solid
    rgba(61,102,123,.18);

  border-radius: 0;

  box-shadow:
    0 .25rem 1rem rgba(41,73,89,.07),
    inset 0 0 0 .06rem rgba(255,255,255,.55);

  backdrop-filter:
    blur(.8rem);

  -webkit-backdrop-filter:
    blur(.8rem);
}


/* Languages */

.site-header .header-languages button {
  color:
    rgba(25,43,52,.58);

  text-shadow: none;
}


.site-header .header-languages button:hover {
  color:
    rgba(20,40,50,.88);
}


.site-header .header-languages button.active {
  color: #172a34;

  border-bottom-color:
    rgba(55,125,160,.90);
}


/* Fine technological light line */

.site-header::after {
  content: "";

  position: absolute;

  left: 5%;
  bottom: 0;

  width: 90%;
  height: .07rem;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(58,132,168,.42) 30%,
      rgba(190,139,96,.34) 70%,
      transparent 100%
    );

  pointer-events: none;
}


/* Keep logo clean */

.site-header .site-logo img {
  filter:
    drop-shadow(0 .2rem .45rem rgba(32,60,74,.12));
}




/* ============================================================
   VAHID.TR — HEADER GLOW / FREE LANGUAGE NAV
   ============================================================ */

.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;

  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 24% 35%,
      rgba(129, 202, 229, .24) 0%,
      rgba(129, 202, 229, .10) 25%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 76% 60%,
      rgba(235, 194, 157, .18) 0%,
      rgba(235, 194, 157, .07) 27%,
      transparent 52%
    ),
    linear-gradient(
      108deg,
      rgba(249,250,249,.95) 0%,
      rgba(231,241,245,.93) 47%,
      rgba(248,243,238,.95) 100%
    );

  border-bottom:
    .06rem solid
    rgba(76,132,158,.16);

  box-shadow:
    0 .35rem 1.5rem
    rgba(42,75,91,.08);

  backdrop-filter:
    blur(1rem)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(1rem)
    saturate(125%);
}


/* Soft luminous atmosphere.
   Kept behind all future menu content. */

.site-header::before {
  content: "";

  position: absolute;
  z-index: -1;

  width: 34%;
  aspect-ratio: 3 / 1;

  left: 33%;
  top: 12%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.72) 0%,
      rgba(169,218,236,.18) 38%,
      transparent 72%
    );

  filter: blur(1.5rem);

  pointer-events: none;
}


/* Fine bottom light */

.site-header::after {
  content: "";

  position: absolute;

  left: 7.5%;
  bottom: 0;

  width: 85%;
  height: .07rem;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(63,139,174,.36) 32%,
      rgba(255,255,255,.70) 50%,
      rgba(194,142,98,.30) 68%,
      transparent
    );

  pointer-events: none;
}


/* ============================================================
   LANGUAGE NAV — NO BOX
   ============================================================ */

.site-header .header-languages {
  display: flex;
  align-items: center;

  gap: clamp(1rem, 2vw, 1.7rem);

  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.site-header .header-languages button {
  position: relative;

  padding:
    .35rem
    0;

  border: 0;
  border-bottom: .10rem solid transparent;
  border-radius: 0;

  background: transparent;

  color:
    rgba(29,49,59,.60);

  font-size:
    clamp(.78rem, 1.25vw, .94rem);

  font-weight: 400;

  line-height: 1.3;

  text-shadow: none;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color .22s ease,
    border-color .22s ease;
}


.site-header .header-languages button:hover {
  color:
    rgba(22,49,63,.90);
}


.site-header .header-languages button.active {
  color: #172d38;

  border-bottom-color:
    rgba(54,133,170,.90);
}


/* Persian label must remain naturally Persian */

.site-header .header-languages button[data-lang="fa"] {
  font-family: "Estedad", sans-serif;
  direction: rtl;
}


/* Turkish / English remain LTR */

.site-header .header-languages button[data-lang="tr"],
.site-header .header-languages button[data-lang="en"] {
  direction: ltr;
}


/* Keep actual controls above decorative glow */

.site-header .site-logo,
.site-header .header-languages {
  position: relative;
  z-index: 2;
}


/* Mobile */

@media (max-width: 799px) {

  .site-header .header-languages {
    gap: clamp(.7rem, 3vw, 1rem);
  }

  .site-header .header-languages button {
    font-size:
      clamp(.72rem, 3vw, .84rem);
  }

}



/* ============================================================
   HEADER — COMPACT LANGUAGE SELECTOR
   Preserve maximum room for future main menu
   ============================================================ */

.site-header .header-languages {
  gap: clamp(.45rem, .8vw, .75rem);
}

.site-header .header-languages button {
  padding-left: 0;
  padding-right: 0;
}


/* Mobile */

@media (max-width: 799px) {

  .site-header .header-languages {
    gap: clamp(.35rem, 1.8vw, .55rem);
  }

}



/* ============================================================
   VAHID.TR — REMOVE SECTION SIDE RAIL
   Remove numbers, vertical lines and dots.
   Horizontal dividers remain.
   ============================================================ */


/* Hide 02 / 03 / 04 ... */

.home-section .section-number {
  display: none !important;
}


/* Remove vertical narrative line */

.home-section .section-grid::before {
  content: none !important;
  display: none !important;
}


/* Ensure no number marker / dot survives */

.home-section .section-number::before,
.home-section .section-number::after {
  content: none !important;
  display: none !important;
}


/* Content uses full normal section width */

.home-section .section-grid {
  width: 100%;
}


/* Keep the existing horizontal divider between blocks */

.home-section + .home-section::before {
  display: block;
}


/* B2 remains clean two-column layout */

#p1-b2 .b2-layout {
  width: 100%;
}




/* ============================================================
   PAGE 1 / B2 — REPAIR + SWAP COLUMNS
   Desktop: TEXT LEFT / IMAGE RIGHT
   ============================================================ */

/* Repair section container after previous side-rail override */
#p1-b2 .section-inner {
  display: block !important;
  width: auto !important;
}

#p1-b2 .section-number {
  display: none !important;
}

#p1-b2 .section-inner::before,
#p1-b2 .section-inner::after,
#p1-b2 .section-grid::before,
#p1-b2 .section-grid::after {
  content: none !important;
}


/* DESKTOP */

@media (min-width: 800px) {

  #p1-b2 .b2-layout {
    display: grid !important;

    /* text left / image right */
    grid-template-columns:
      minmax(0, 45fr)
      minmax(0, 55fr) !important;

    column-gap: clamp(2rem, 3.5vw, 3.8rem) !important;

    width: 100% !important;
    max-width: none !important;

    align-items: start !important;

    direction: ltr !important;
  }


  /* TEXT — LEFT */

  #p1-b2 .b2-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    direction: rtl !important;
    text-align: right !important;
  }


  /* IMAGE — RIGHT */

  #p1-b2 .b2-image {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    aspect-ratio: 4 / 5;

    align-self: start !important;
  }


  /* Persian remains correctly RTL */

  html[lang="fa"] #p1-b2 .b2-copy,
  html[lang="fa"] #p1-b2 .b2-copy p,
  html[lang="fa"] #p1-b2 .b2-copy a,
  html[lang="fa"] #p1-b2 .b2-copy span {
    direction: rtl !important;
    text-align: right !important;
  }

}


/* MOBILE — one column, text then image */

@media (max-width: 799px) {

  #p1-b2 .b2-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    row-gap: 4% !important;
  }

  #p1-b2 .b2-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;

    direction: rtl !important;
    text-align: right !important;
  }

  #p1-b2 .b2-image {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: min(90%, 30rem) !important;
    aspect-ratio: 4 / 5;
  }

}



/* ============================================================
   PAGE 1 / B2 — FINAL POSITIONING
   Outer margins: 5%
   Middle gap: 3%
   FA: image left / text right
   TR+EN: text left / image right
   ============================================================ */


/* B2 gets exactly 5% breathing room from both sides */

#p1-b2 .section-inner {
  display: block !important;

  width: 90% !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Kill old decorative side rail completely */

#p1-b2 .section-number {
  display: none !important;
}

#p1-b2 .section-inner::before,
#p1-b2 .section-inner::after,
#p1-b2 .section-grid::before,
#p1-b2 .section-grid::after {
  content: none !important;
  display: none !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 800px) {

  #p1-b2 .b2-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, 45fr)
      minmax(0, 55fr) !important;

    gap: 3% !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    align-items: start !important;

    direction: ltr !important;
  }


  /* ----------------------------------------------------------
     PERSIAN
     IMAGE LEFT / TEXT RIGHT
     ---------------------------------------------------------- */

  html[lang="fa"] #p1-b2 .b2-image {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    margin: 0 !important;
  }

  html[lang="fa"] #p1-b2 .b2-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="fa"] #p1-b2 .b2-copy * {
    direction: rtl !important;
    text-align: right !important;
  }


  /* ----------------------------------------------------------
     TURKISH + ENGLISH
     TEXT LEFT / IMAGE RIGHT
     ---------------------------------------------------------- */

  html[lang="tr"] #p1-b2 .b2-copy,
  html[lang="en"] #p1-b2 .b2-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    direction: ltr !important;
    text-align: left !important;
  }

  html[lang="tr"] #p1-b2 .b2-image,
  html[lang="en"] #p1-b2 .b2-image {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    margin: 0 !important;
  }


  /* Image geometry remains unchanged */

  #p1-b2 .b2-image {
    aspect-ratio: 4 / 5 !important;
    align-self: start !important;
  }

}


/* ============================================================
   MOBILE
   Same 5% outer breathing room
   ============================================================ */

@media (max-width: 799px) {

  #p1-b2 .section-inner {
    width: 90% !important;
  }

  #p1-b2 .b2-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 3% !important;

    width: 100% !important;
  }

  #p1-b2 .b2-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  #p1-b2 .b2-image {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;

    aspect-ratio: 4 / 5 !important;

    margin: 0 !important;
  }

  html[lang="fa"] #p1-b2 .b2-copy,
  html[lang="fa"] #p1-b2 .b2-copy * {
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="tr"] #p1-b2 .b2-copy,
  html[lang="en"] #p1-b2 .b2-copy {
    direction: ltr !important;
    text-align: left !important;
  }

}



/* ============================================================
   VAHID.TR — STANDARD OUTER HORIZONTAL GAP = 2%
   ============================================================ */

#p1-b2 .section-inner {
  width: 96% !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


@media (max-width: 799px) {

  #p1-b2 .section-inner {
    width: 96% !important;
  }

}

/* ===== B3-END STRUCTURE REPAIR START ===== */

/*
   Structural recovery only.
   B1, B2 and Header are intentionally excluded.
*/

#p1-b3,
#p1-b4,
#p1-b5,
#p1-b6,
#p1-b7,
#p1-b8,
#p1-b9,
#p1-b10,
#p1-b11,
#p1-b12 {
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

#p1-b3 > .section-inner,
#p1-b4 > .section-inner,
#p1-b5 > .section-inner,
#p1-b6 > .section-inner,
#p1-b7 > .section-inner,
#p1-b8 > .section-inner,
#p1-b9 > .section-inner,
#p1-b10 > .section-inner,
#p1-b11 > .section-inner,
#p1-b12 > .section-inner {
  box-sizing: border-box !important;
  display: block !important;

  width: 96% !important;
  max-width: none !important;

  margin-left: 2% !important;
  margin-right: 2% !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  transform: none !important;
}

/*
   Remove the obsolete numbered side rail only inside B3+.
*/
#p1-b3 .section-number,
#p1-b4 .section-number,
#p1-b5 .section-number,
#p1-b6 .section-number,
#p1-b7 .section-number,
#p1-b8 .section-number,
#p1-b9 .section-number,
#p1-b10 .section-number,
#p1-b11 .section-number,
#p1-b12 .section-number {
  display: none !important;
}

/*
   Neutralize the old grid pseudo-element that caused
   the content area to collapse.
*/
#p1-b3 .section-grid::before,
#p1-b4 .section-grid::before,
#p1-b5 .section-grid::before,
#p1-b6 .section-grid::before,
#p1-b7 .section-grid::before,
#p1-b8 .section-grid::before,
#p1-b9 .section-grid::before,
#p1-b10 .section-grid::before,
#p1-b11 .section-grid::before,
#p1-b12 .section-grid::before {
  content: none !important;
  display: none !important;
}

/*
   Restore normal content width.
*/
#p1-b3 .section-copy,
#p1-b4 .section-copy,
#p1-b5 .section-copy,
#p1-b6 .section-copy,
#p1-b7 .section-copy,
#p1-b8 .section-copy,
#p1-b9 .section-copy,
#p1-b10 .section-copy,
#p1-b11 .section-copy,
#p1-b12 .section-copy {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  transform: none !important;
}

/*
   Any remaining section-grid from B3 onward must no
   longer use the broken side-column grid.
*/
#p1-b3 .section-grid,
#p1-b4 .section-grid,
#p1-b5 .section-grid,
#p1-b6 .section-grid,
#p1-b7 .section-grid,
#p1-b8 .section-grid,
#p1-b9 .section-grid,
#p1-b10 .section-grid,
#p1-b11 .section-grid,
#p1-b12 .section-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

/* ===== B3-END STRUCTURE REPAIR END ===== */

/* ===== GLOBAL 2% CONTENT EDGE LAW START ===== */

/*
   VAHID.TR PERMANENT LAYOUT LAW

   Every normal Home-page content block:
   Left outer content edge  = 2% of viewport
   Right outer content edge = 2% of viewport
   Usable content width     = 96%

   Internal column gaps are independent from this law.
*/

.home-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.home-section > .section-inner {
  box-sizing: border-box !important;

  width: 96% !important;
  max-width: none !important;

  margin-left: 2% !important;
  margin-right: 2% !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*
   Direct layouts inside section-inner must use the full
   96% content area and may not create another outer inset.
*/

.home-section > .section-inner > .b2-layout,
.home-section > .section-inner > .section-copy {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*
   B2 outer columns:
   neither text nor image may introduce an additional
   outside margin. The middle gap remains independent.
*/

#p1-b2 .b2-copy,
#p1-b2 .b2-image {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== GLOBAL 2% CONTENT EDGE LAW END ===== */

/* ===== B3 FIRST BOOK START ===== */

/*
   B3 mirrors B2.
   Permanent outer-edge law is inherited:
   2% left + 2% right.
*/

#p1-b3 .b3-layout {
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 3% !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: start !important;
}

#p1-b3 .b3-copy {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
}

#p1-b3 .b3-image {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
}

#p1-b3 .b3-image img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
}


/* Persian: mirror of B2 */

html[lang="fa"] #p1-b3 .b3-image {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html[lang="fa"] #p1-b3 .b3-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}


/* Turkish + English */

html[lang="tr"] #p1-b3 .b3-image,
html[lang="en"] #p1-b3 .b3-image {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html[lang="tr"] #p1-b3 .b3-copy,
html[lang="en"] #p1-b3 .b3-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
}


/* Mobile */

@media (max-width: 48rem) {

  #p1-b3 .b3-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  html[lang] #p1-b3 .b3-image,
  html[lang] #p1-b3 .b3-copy {
    grid-column: 1 !important;
  }

  html[lang] #p1-b3 .b3-image {
    grid-row: 1 !important;
  }

  html[lang] #p1-b3 .b3-copy {
    grid-row: 2 !important;
  }
}

/* ===== B3 FIRST BOOK END ===== */

/* ===== B4 ALBUM PLAYER START ===== */

#p1-b4 .b4-shell {
  width: 100%;
  box-sizing: border-box;
}

#p1-b4 .b4-title {
  margin: 0 0 clamp(.55rem,1vw,.85rem);
}

#p1-b4 .b4-album-player {
  width: min(34%, 30rem);
  min-width: 19rem;
  margin-inline: auto;
}


/* MAIN COVER */

#p1-b4 .b4-main-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
}

#p1-b4 .b4-main-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* WAVE — INSIDE BOTTOM OF COVER */

#p1-b4 .b4-wave {
  position: absolute;

  left: 5%;
  right: 5%;
  bottom: 3%;

  height: 10%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 1.4%;

  opacity: 0;

  transition: opacity .18s ease;

  pointer-events: none;
}

#p1-b4 .b4-wave span {
  display: block;

  width: 1.6%;
  height: 22%;

  background: rgba(255,255,255,.94);

  box-shadow: 0 0 .35rem rgba(0,0,0,.35);

  transform-origin: center;
}

#p1-b4 .b4-wave.is-visible {
  opacity: 1;
}

#p1-b4 .b4-wave.is-playing span {
  animation: b4-wave-motion .58s ease-in-out infinite alternate;
}

#p1-b4 .b4-wave span:nth-child(2n) {
  animation-delay: -.12s;
}

#p1-b4 .b4-wave span:nth-child(3n) {
  animation-delay: -.27s;
}

#p1-b4 .b4-wave span:nth-child(5n) {
  animation-delay: -.39s;
}

@keyframes b4-wave-motion {
  from { height: 18%; }
  to   { height: 96%; }
}


/* CONTROLS — CLOSE TO COVER AND THUMBNAILS */

#p1-b4 .b4-controls {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9%;

  height: clamp(2.7rem,4vw,3.4rem);

  margin: .2rem 0;

  padding: 0;
}

#p1-b4 .b4-control {
  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;
  background: transparent;

  margin: 0;
  padding: 0;

  width: 2.4rem;
  height: 2.4rem;

  color: #14202a;

  font-size: 2rem;
  line-height: 1;

  cursor: pointer;
}

#p1-b4 .b4-control-play {
  font-size: 1.45rem;
}

#p1-b4 .b4-control:hover {
  opacity: .58;
}


/* FIVE TRACK COVERS */

#p1-b4 .b4-thumbs {
  display: grid;

  grid-template-columns: repeat(5,minmax(0,1fr));

  gap: 1.5%;

  width: 100%;

  margin: 0;
  padding: 0;
}

#p1-b4 .b4-thumb {
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;

  display: block;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  overflow: hidden;

  opacity: .58;

  cursor: pointer;

  transition:
    opacity .15s ease,
    transform .15s ease;
}

#p1-b4 .b4-thumb img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

#p1-b4 .b4-thumb:hover {
  opacity: .82;
}

#p1-b4 .b4-thumb.is-active {
  opacity: 1;
}

#p1-b4 .b4-thumb.is-active::after {
  content: "";

  position: absolute;

  left: 7%;
  right: 7%;
  bottom: 5%;

  height: 2px;

  background: white;

  box-shadow: 0 0 .3rem rgba(0,0,0,.45);
}


/* WEBSITE TEXT BELOW PLAYER */

#p1-b4 .b4-copy {
  width: 100%;

  margin-top: clamp(.7rem,1.1vw,1rem);

  padding: 0;
}

#p1-b4 .b4-copy .section-body {
  margin-top: 0;
}


/* MOBILE */

@media (max-width:48rem) {

  #p1-b4 .b4-album-player {
    width: min(78%,26rem);
    min-width: 0;
  }

}

/* ===== B4 ALBUM PLAYER END ===== */

/* ===== B4 COMPACT TUNING START ===== */

/* About 20% smaller than current desktop player */
#p1-b4 .b4-album-player {
  width: min(27%, 24rem) !important;
  min-width: 16rem !important;
}

/* Compact title-to-player spacing */
#p1-b4 .b4-title {
  margin-bottom: clamp(.3rem, .55vw, .5rem) !important;
}

/* Controls stay close to large cover and thumbnails */
#p1-b4 .b4-controls {
  height: clamp(2.15rem, 3vw, 2.7rem) !important;
  margin: .08rem 0 !important;
  gap: 8% !important;
}

#p1-b4 .b4-control {
  width: 2rem !important;
  height: 2rem !important;
  font-size: 1.65rem !important;
}

#p1-b4 .b4-control-play {
  font-size: 1.2rem !important;
}

/* Five covers remain tightly grouped */
#p1-b4 .b4-thumbs {
  gap: 1.25% !important;
}

/* Text close to the five covers and centered */
#p1-b4 .b4-copy {
  margin-top: clamp(.4rem, .65vw, .6rem) !important;
  text-align: center !important;
}

#p1-b4 .b4-copy .section-body {
  margin: 0 auto !important;
  text-align: center !important;
  max-width: 78% !important;
}

/* Persian must also remain visually centered */
html[lang="fa"] #p1-b4 .b4-copy,
html[lang="fa"] #p1-b4 .b4-copy .section-body {
  text-align: center !important;
}

/* Mobile: compact but still usable */
@media (max-width: 48rem) {

  #p1-b4 .b4-album-player {
    width: min(68%, 21rem) !important;
    min-width: 0 !important;
  }

  #p1-b4 .b4-copy .section-body {
    max-width: 94% !important;
  }
}

/* ===== B4 COMPACT TUNING END ===== */


/* =========================================================
   P1 / B5 — MUSIC VIDEO GALLERY
   ========================================================= */

#p1-b5 {
  position: relative;
  overflow: hidden;
}

#p1-b5::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(125,190,255,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(245,218,174,.11),
      transparent 30%
    );
}

#p1-b5 > .section-inner {
  position: relative;
  z-index: 1;
}

#p1-b5 .b5-heading {
  text-align: center;
  margin: 0 0 1rem;
}

#p1-b5 .b5-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  font-weight: 650;
  line-height: 1.2;
}

#p1-b5 .b5-gallery {
  width: min(58%, 52rem);
  min-width: 34rem;
  margin-inline: auto;
}

#p1-b5 .b5-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .8rem;
  background: #080a0d;
  box-shadow:
    0 .8rem 2.5rem rgba(20,35,50,.13),
    0 0 0 1px rgba(255,255,255,.55);
}

#p1-b5 .b5-main-cover,
#p1-b5 .b5-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#p1-b5 .b5-main-cover {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: #080a0d;
}

#p1-b5 .b5-main-cover[hidden],
#p1-b5 .b5-video-frame[hidden] {
  display: none !important;
}

#p1-b5 .b5-main-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#p1-b5 .b5-main-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.17),
      transparent 42%
    );
}

#p1-b5 .b5-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;

  width: clamp(3.2rem, 5vw, 4.6rem);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: rgba(255,255,255,.90);

  box-shadow:
    0 .5rem 1.8rem rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.75);

  backdrop-filter: blur(.5rem);
}

#p1-b5 .b5-play-triangle {
  width: 0;
  height: 0;
  margin-left: .22rem;

  border-top: .65rem solid transparent;
  border-bottom: .65rem solid transparent;
  border-left: 1rem solid #17212b;
}

#p1-b5 .b5-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#p1-b5 .b5-thumbnails {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(5, 1fr);

  gap: 1.1%;
  margin-top: .65rem;
}

#p1-b5 .b5-thumb {
  appearance: none;

  position: relative;

  border: 0;
  padding: 0;
  margin: 0;

  aspect-ratio: 16 / 9;

  overflow: hidden;
  border-radius: .38rem;

  cursor: pointer;
  background: #111;

  opacity: .64;

  box-shadow:
    0 0 0 1px rgba(40,65,85,.10);

  transition:
    opacity .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

#p1-b5 .b5-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#p1-b5 .b5-thumb:hover {
  opacity: .90;
}

#p1-b5 .b5-thumb.is-active {
  opacity: 1;
  transform: translateY(-.08rem);

  box-shadow:
    0 0 0 .14rem rgba(67,130,185,.58),
    0 .35rem 1rem rgba(25,55,80,.12);
}

#p1-b5 .b5-main-cover:focus-visible,
#p1-b5 .b5-thumb:focus-visible {
  outline: .16rem solid rgba(45,115,180,.72);
  outline-offset: .15rem;
}

@media (max-width: 760px) {

  #p1-b5 .b5-gallery {
    width: 96%;
    min-width: 0;
  }

  #p1-b5 .b5-heading {
    margin-bottom: .8rem;
  }

  #p1-b5 .b5-stage {
    border-radius: .6rem;
  }

  #p1-b5 .b5-thumbnails {
    gap: 1.3%;
    margin-top: .5rem;
  }

  #p1-b5 .b5-thumb {
    border-radius: .28rem;
  }

  #p1-b5 .b5-play {
    width: 3.4rem;
  }
}

/* ===== END P1 / B5 ===== */








/* =========================================================
   VAHID.TR — GLOBAL TYPOGRAPHY LAW
   SINGLE SOURCE OF TRUTH

   Hero
   Title
   Subtitle
   Normal
   Footer
   Small

   Individual blocks MUST NOT define typography.
   ========================================================= */


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.type-title,
.home-section .section-kicker {
  font-family: inherit !important;
  font-size: clamp(1.47rem, 3.15vw, 2.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  opacity: 1 !important;
}


/* ---------------------------------------------------------
   SUBTITLE
   --------------------------------------------------------- */

.type-subtitle,
.home-section .section-title {
  font-family: inherit !important;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  opacity: .72 !important;
}


/* ---------------------------------------------------------
   NORMAL
   --------------------------------------------------------- */

.type-normal,
.home-section .section-lead,
.home-section .section-body,
#p1-b5 .b5-text p {
  font-family: inherit !important;
  font-size: clamp(1rem, 1.65vw, 1.18rem) !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.type-footer,
.home-section .text-link,
.home-section .section-action,
.site-footer {
  font-family: inherit !important;
  font-size: clamp(.88rem, 1.3vw, 1rem) !important;
  font-weight: 400 !important;
}


/* ---------------------------------------------------------
   SMALL
   --------------------------------------------------------- */

.type-small,
.home-section .section-number {
  font-family: inherit !important;
  font-size: clamp(.72rem, 1vw, .82rem) !important;
  font-weight: 400 !important;
}


/* ---------------------------------------------------------
   PERSIAN
   One font for ALL Persian typography levels.
   --------------------------------------------------------- */

html[lang="fa"] .type-title,
html[lang="fa"] .type-subtitle,
html[lang="fa"] .type-normal,
html[lang="fa"] .type-footer,
html[lang="fa"] .type-small,
html[lang="fa"] .home-section .section-kicker,
html[lang="fa"] .home-section .section-title,
html[lang="fa"] .home-section .section-lead,
html[lang="fa"] .home-section .section-body,
html[lang="fa"] .site-footer {
  font-family: "Estedad", sans-serif !important;
  letter-spacing: 0 !important;
}

html[lang="fa"] .type-title,
html[lang="fa"] .home-section .section-kicker {
  line-height: 1.3 !important;
}

html[lang="fa"] .type-subtitle,
html[lang="fa"] .home-section .section-title {
  line-height: 1.55 !important;
}

html[lang="fa"] .type-normal,
html[lang="fa"] .home-section .section-lead,
html[lang="fa"] .home-section .section-body {
  line-height: 2 !important;
}


/* ---------------------------------------------------------
   B4 / B5
   POSITION may differ.
   TYPOGRAPHY may NOT differ.
   --------------------------------------------------------- */

#p1-b4 .b4-title,
#p1-b5 .b5-title {
  font-size: clamp(1.47rem, 3.15vw, 2.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  opacity: 1 !important;
}

#p1-b5 .b5-title {
  width: 100%;
  margin: 0 0 clamp(.3rem, .55vw, .5rem);
  text-align: start;
}

html[lang="fa"] #p1-b4 .b4-title,
html[lang="fa"] #p1-b5 .b5-title {
  font-family: "Estedad", sans-serif !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}


/* B5 text positioning only — NOT typography */

#p1-b5 .b5-text {
  width: 78%;
  margin: 1.1rem auto 0;
  text-align: center;
}

#p1-b5 .b5-text p {
  margin: 0 auto;
  text-align: center;
}

#p1-b5 .b5-text p + p {
  margin-top: .35rem;
}

@media (max-width:760px) {
  #p1-b5 .b5-text {
    width: 94%;
  }
}

/* ===== END GLOBAL TYPOGRAPHY LAW ===== */


/* =========================================================
   P1-B5 — FRAMELESS MAIN VIDEO
   ========================================================= */

#p1-b5 .b5-stage {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

#p1-b5 .b5-main-cover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

#p1-b5 .b5-main-cover::after {
  display: none !important;
}

#p1-b5 .b5-main-cover img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep only the rectangular 16:9 media itself */
#p1-b5 .b5-stage,
#p1-b5 .b5-main-cover,
#p1-b5 .b5-main-cover img,
#p1-b5 .b5-video-frame,
#p1-b5 .b5-video-frame iframe {
  border-radius: 0 !important;
}

/* ===== END P1-B5 FRAMELESS MAIN VIDEO ===== */


/* =========================================================
   P1-B5 — FINAL FRAME REMOVAL
   ========================================================= */

#p1-b5 .b5-gallery {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#p1-b5 .b5-stage {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  overflow: hidden !important;
}

#p1-b5 .b5-main-cover {
  display: block !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  overflow: hidden !important;
}

#p1-b5 .b5-main-cover img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* absolutely no decorative frame */
#p1-b5 .b5-stage,
#p1-b5 .b5-main-cover,
#p1-b5 .b5-main-cover img {
  border-radius: 0 !important;
}

/* thumbnails stay immediately below */
#p1-b5 .b5-thumbnails {
  margin-top: .65rem !important;
}

/* ===== END P1-B5 FINAL FRAME REMOVAL ===== */



/* =========================================================
   P1-B5 — GLOBAL COVER CROP LAW
   Applies automatically to every current/future main cover.
   ========================================================= */

#p1-b5 .b5-main-cover {
  overflow: hidden !important;
}

#p1-b5 .b5-main-cover img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 112% !important;
  height: 112% !important;
  max-width: none !important;

  object-fit: cover !important;
  transform: translate(-50%, -50%) !important;
}

/* ===== END P1-B5 GLOBAL COVER CROP LAW ===== */

/* =========================================================
   P1-B6 — GATHERING
   ========================================================= */

#p1-b6 .b6-visual {
  width: 100%;
  margin: 0 0 clamp(1.2rem, 2.5vw, 2rem);
  overflow: hidden;
}

#p1-b6 .b6-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

#p1-b6 .b6-title {
  width: 100%;
  margin: 0;
  text-align: start;
}

#p1-b6 .b6-subtitle {
  width: 100%;
  margin: .35rem 0 0;
  text-align: start;
}

#p1-b6 .b6-text {
  width: min(86%, 72rem);
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
}

#p1-b6 .b6-text p {
  margin: 0;
}

#p1-b6 .b6-text p + p {
  margin-top: .85rem;
}

#p1-b6 .b6-emphasis {
  font-weight: 600 !important;
}

html[lang="fa"] #p1-b6 .b6-title,
html[lang="fa"] #p1-b6 .b6-subtitle,
html[lang="fa"] #p1-b6 .b6-text {
  font-family: "Estedad", sans-serif !important;
}

@media (max-width:760px) {
  #p1-b6 .b6-text {
    width: 96%;
  }
}

/* ===== END P1-B6 GATHERING ===== */


/* =========================================================
   GLOBAL LAW — NO HORIZONTAL PAGE MOVEMENT
   The website may scroll vertically only.
   ========================================================= */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

main,
.site-main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.home-section {
  max-width: 100% !important;
  overflow-x: clip;
}

/* ===== END GLOBAL HORIZONTAL MOVEMENT LAW ===== */




/* =========================================================
   P1-B3 — REAL BOOK IMAGE SIZE
   Desktop: 20% smaller inside its existing column.
   ========================================================= */

@media (min-width: 48.01rem) {
  #p1-b3 .b3-image {
    width: 80% !important;
    max-width: 80% !important;
    margin-inline: auto !important;
  }
}

/* ===== END P1-B3 REAL BOOK IMAGE SIZE ===== */


/* =========================================================
   GLOBAL — STICKY HEADER
   Header remains visible while the page scrolls.
   ========================================================= */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ===== END GLOBAL STICKY HEADER ===== */


/* =========================================================
   GLOBAL — STICKY HEADER VIEWPORT FIX
   html/body must remain the vertical scroll container.
   Horizontal clipping is handled by main/home sections.
   ========================================================= */

html,
body {
  overflow-x: visible !important;
}

.site-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* ===== END STICKY HEADER VIEWPORT FIX ===== */


/* =========================================================
   P1-B3 — MIRROR OF B2
   B3 text/image columns are opposite to B2.
   ========================================================= */

@media (min-width: 48.01rem) {

  html[lang="fa"] #p1-b3 .b3-image {
    order: 2 !important;
  }

  html[lang="fa"] #p1-b3 .b3-copy {
    order: 1 !important;
  }

  html[lang="tr"] #p1-b3 .b3-image,
  html[lang="en"] #p1-b3 .b3-image {
    order: 1 !important;
  }

  html[lang="tr"] #p1-b3 .b3-copy,
  html[lang="en"] #p1-b3 .b3-copy {
    order: 2 !important;
  }

}

/* ===== END P1-B3 MIRROR OF B2 ===== */



/* =========================================================
   VAHID — FINAL HOME FOOTER
   Light three-column multilingual footer
   ========================================================= */

.site-footer {
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.95),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #f2eee7 0%,
      #e9eef0 50%,
      #f4efe8 100%
    ) !important;

  color: #20272b !important;
  border-top: .06rem solid rgba(32,39,43,.10);
}


/* remove old dark footer grid */

.site-footer::before {
  display: none !important;
}


.footer-inner {
  position: relative;
  z-index: 2;

  width: 90% !important;
  max-width: 78rem !important;
  margin: 0 auto !important;

  padding:
    clamp(3rem, 7vw, 6rem)
    0
    clamp(2rem, 4vw, 3.5rem) !important;

  text-align: center !important;
}


.footer-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(10rem, .8fr)
    minmax(0, 1fr);

  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}


.footer-panel {
  min-width: 0;
}


.footer-heading {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);

  font: inherit;
  font-size: clamp(.9rem, 1.35vw, 1.05rem);
  font-weight: 600;

  color: #283238;
}


.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap:
    clamp(.55rem, 1vw, .85rem)
    clamp(.9rem, 1.6vw, 1.35rem);
}


.footer-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: rgba(32,39,43,.72) !important;
  text-decoration: none;

  font-size: clamp(.8rem, 1.15vw, .94rem);
  line-height: 1.5;

  transition:
    color .2s ease,
    transform .2s ease;
}


.footer-link::after {
  content: "";

  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -.22rem;

  height: .06rem;
  background: currentColor;

  transition:
    left .2s ease,
    right .2s ease;
}


.footer-link:hover {
  color: #11181c !important;
  transform: translateY(-.08rem);
}


.footer-link:hover::after {
  left: 0;
  right: 0;
}


/* CENTER BRAND */

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
}


.footer-logo {
  display: block;

  /*
     Header logo is currently controlled elsewhere.
     Footer logo is intentionally about 80% of its
     visual size.
  */
  width: clamp(4.8rem, 7.2vw, 7.2rem);

  text-decoration: none;
}


.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}


.footer-name {
  margin-top: clamp(.8rem, 1.5vw, 1.2rem);

  font-size: clamp(1.35rem, 2.7vw, 2.15rem);
  font-weight: 500;
  line-height: 1.2;

  color: #20272b;
}


html[lang="fa"] .footer-name {
  font-family: "Estedad", sans-serif !important;
}


/* LEGAL */

.footer-legal {
  width: min(100%, 58rem);

  margin:
    clamp(2.8rem, 6vw, 5rem)
    auto
    0;

  padding-top: clamp(1.5rem, 3vw, 2.2rem);

  border-top:
    .06rem solid rgba(32,39,43,.13);

  text-align: center;
}


.footer-legal p,
.footer-inner > .footer-legal p {
  margin: 0 !important;

  color: rgba(32,39,43,.58) !important;

  font-size: clamp(.74rem, 1vw, .86rem) !important;
  line-height: 1.8;
}


.footer-legal .footer-copyright {
  margin-top: .45rem !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}


/* RTL must still remain centered in footer */

html[dir="rtl"] .footer-inner,
html[dir="rtl"] .footer-panel,
html[dir="rtl"] .footer-legal {
  text-align: center !important;
}


/* MOBILE */

@media (max-width: 799px) {

  .footer-inner {
    width: 88% !important;

    padding:
      clamp(2.8rem, 12vw, 4rem)
      0
      clamp(2rem, 8vw, 3rem) !important;
  }


  .footer-main {
    display: flex;
    flex-direction: column;

    gap: clamp(2.5rem, 10vw, 4rem);
  }


  /*
     Brand comes first on mobile.
  */

  .footer-center {
    order: 1;
  }

  .footer-social {
    order: 2;
  }

  .footer-contact {
    order: 3;
  }


  .footer-logo {
    width: clamp(4.5rem, 20vw, 6rem);
  }


  .footer-panel {
    width: 100%;
  }


  .footer-links {
    width: 100%;

    gap:
      .8rem
      clamp(1rem, 5vw, 1.5rem);
  }


  .footer-legal {
    margin-top: clamp(2.5rem, 10vw, 3.5rem);
  }

}


/* ===== END FINAL HOME FOOTER ===== */


/* =========================================================
   HEADER LOGO — 20% LARGER
   Footer logo is intentionally unaffected.
   ========================================================= */

.site-header .site-logo {
  transform: scale(1.2) !important;
  transform-origin: center !important;
}

/* ===== END HEADER LOGO +20% ===== */


/* =========================================================
   HERO NAME CASE
   English / Turkish: Vahid, not VAHID
   ========================================================= */

#p1-b1 .hero-title {
  text-transform: none !important;
}

/* ===== END HERO NAME CASE ===== */


/* =========================================================
   SITE HEADER — CENTER NAVIGATION
   ========================================================= */

.site-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}

.site-logo {
  justify-self: start !important;
}

.site-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  white-space: nowrap;
}

.site-menu a {
  position: relative;
  color: #263b44;
  text-decoration: none;
  font: inherit;
  transition: opacity .2s ease;
}

.site-menu a:hover {
  opacity: .65;
}

.header-languages {
  justify-self: end !important;
}

@media (max-width: 700px) {
  .site-header {
    grid-template-columns: auto 1fr auto !important;
  }

  .site-menu {
    gap: clamp(.65rem, 2.5vw, 1.2rem);
    font-size: clamp(.78rem, 3vw, .92rem);
  }
}

/* Menu labels are controlled by current HTML language */
html[lang="fa"] .site-menu a::after {
  content: attr(data-fa);
}

html[lang="tr"] .site-menu a::after {
  content: attr(data-tr);
}

html[lang="en"] .site-menu a::after {
  content: attr(data-en);
}

.site-menu a {
  font-size: 0;
}

.site-menu a::after {
  font-size: clamp(.88rem, 1.05vw, 1rem);
}


/* =========================================================
   GLOBAL HEADER — BRAND STACK + INSTRUMENTAL MINI PLAYER
   ========================================================= */

.site-header {
  grid-template-columns:
    minmax(9rem, 1fr)
    auto
    minmax(9rem, 1fr) !important;
}

.header-brand-stack {
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.header-brand-stack .site-logo {
  justify-self: auto !important;
}

.header-brand-stack .header-languages {
  justify-self: auto !important;
  gap: clamp(.32rem, .65vw, .6rem);
}

.header-brand-stack .header-languages button {
  font-size: clamp(.62rem, .8vw, .73rem);
  padding: .08rem 0;
}


/* Instrumental */

.header-instrumental {
  justify-self: end;

  display: flex;
  align-items: center;

  gap: clamp(.4rem, .8vw, .7rem);

  min-width: 0;

  color: #263b44;

  position: relative;
  z-index: 2;
}

.header-instrumental-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.header-instrumental-title {
  font-size: clamp(.72rem, .85vw, .84rem);
  white-space: nowrap;
}

.header-instrumental-artist {
  margin-top: .1rem;
  font-size: clamp(.57rem, .65vw, .65rem);
  opacity: .52;
}

.header-instrumental-controls {
  display: flex;
  align-items: center;
  direction: ltr;
  gap: .12rem;
}

.header-instrumental-controls button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #29424e;
  padding: 0;
  cursor: default;
}

.header-instrumental-prev,
.header-instrumental-next {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 1rem;
  line-height: 1;
}

.header-instrumental-play {
  width: 2rem;
  height: 2rem;

  border:
    .06rem solid
    rgba(47,91,112,.28) !important;

  border-radius: 50% !important;

  font-size: .66rem;

  display: grid;
  place-items: center;

  padding-left: .08rem !important;
}

.header-instrumental-controls button:disabled {
  opacity: .72;
}

.header-instrumental-source {
  font-size: clamp(.57rem, .65vw, .65rem);
  opacity: .48;
}


/* Mobile */

@media (max-width: 700px) {

  .site-header {
    grid-template-columns:
      auto
      1fr
      auto !important;

    column-gap: clamp(.45rem, 2vw, .8rem);
  }

  .header-brand-stack .site-logo {
    width: clamp(2.8rem, 11vw, 3.5rem);
  }

  .header-brand-stack .header-languages {
    gap: .28rem;
  }

  .header-brand-stack .header-languages button {
    font-size: clamp(.52rem, 2.1vw, .62rem);
  }

  .header-instrumental-info,
  .header-instrumental-source {
    display: none;
  }

  .header-instrumental {
    gap: 0;
  }

  .header-instrumental-prev,
  .header-instrumental-next {
    display: none;
  }

  .header-instrumental-play {
    width: 2rem;
    height: 2rem;
  }

  .site-menu {
    gap: clamp(.55rem, 2.2vw, 1rem);
  }

  .site-menu a::after {
    font-size: clamp(.7rem, 2.7vw, .86rem);
  }
}

/* ===== END HEADER INSTRUMENTAL PLAYER ===== */



/* =========================================================
   GLOBAL HEADER — FIXED PHYSICAL POSITIONS
   Language direction must never mirror the header layout.
   ========================================================= */

.site-header {
  direction: ltr !important;
}

/* Logo always stays on the physical left */
.site-header .header-brand-stack {
  direction: ltr !important;
  justify-self: start !important;
}

/* Language labels stay below logo in the same order/location */
.site-header .header-languages {
  direction: ltr !important;
}

/* Persian label itself remains RTL */
.site-header .header-languages button[data-lang="fa"] {
  direction: rtl !important;
}

/* Center menu may use its own language naturally */
html[lang="fa"] .site-header .site-menu {
  direction: rtl;
}

html[lang="tr"] .site-header .site-menu,
html[lang="en"] .site-header .site-menu {
  direction: ltr;
}

/* Instrumental player always stays on physical right */
.site-header .header-instrumental {
  direction: ltr !important;
  justify-self: end !important;
}

/* ===== END FIXED HEADER POSITIONS ===== */



/* =========================================================
   HEADER FINAL LAYOUT — LANGUAGES ABOVE MENU
   ========================================================= */

.site-header {
  direction: ltr !important;

  grid-template-columns:
    minmax(8rem, 1fr)
    auto
    minmax(8rem, 1fr) !important;

  align-items: center !important;
}


/* Large independent logo */

.site-header > .site-logo {
  justify-self: start !important;
  width: clamp(4.5rem, 9vw, 6.25rem) !important;
  transform: none !important;
}


/* Center column */

.site-header .header-center-stack {
  justify-self: center !important;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: clamp(.08rem, .2vw, .14rem);

  position: relative;
  z-index: 2;

  direction: ltr !important;
}


/* Languages above menu */

.site-header .header-center-stack .header-languages {
  justify-self: auto !important;

  direction: ltr !important;

  gap: clamp(.42rem, .7vw, .65rem);

  padding: 0 !important;
  margin: 0 !important;
}

.site-header .header-center-stack .header-languages button {
  padding: 0 0 .06rem !important;

  font-size:
    clamp(.58rem, .68vw, .68rem) !important;

  line-height: 1.05;
}


/* Main menu keeps its full horizontal room */

.site-header .header-center-stack .site-menu {
  justify-self: auto !important;
  margin: 0 !important;
}

html[lang="fa"] .site-header .header-center-stack .site-menu {
  direction: rtl;
}

html[lang="tr"] .site-header .header-center-stack .site-menu,
html[lang="en"] .site-header .header-center-stack .site-menu {
  direction: ltr;
}


/* Instrumental remains physically right */

.site-header .header-instrumental {
  justify-self: end !important;
  direction: ltr !important;
}


/* Mobile */

@media (max-width: 700px) {

  .site-header {
    grid-template-columns:
      auto
      1fr
      auto !important;

    column-gap:
      clamp(.4rem, 1.8vw, .7rem);
  }

  .site-header > .site-logo {
    width:
      clamp(3.5rem, 13vw, 4.5rem) !important;
  }

  .site-header .header-center-stack {
    gap: .04rem;
  }

  .site-header .header-center-stack .header-languages {
    gap: clamp(.28rem, 1.3vw, .42rem);
  }

  .site-header .header-center-stack .header-languages button {
    font-size:
      clamp(.5rem, 1.9vw, .59rem) !important;
  }

}

/* ===== END HEADER FINAL LAYOUT ===== */



/* =========================================================
   HEADER LANGUAGES — TOP CENTER
   ========================================================= */

.site-header .header-center-stack {
  align-self: stretch !important;
  justify-content: center !important;
  position: relative !important;
}


/* Languages independently attached near top edge */

.site-header .header-center-stack .header-languages {
  position: absolute !important;

  top: clamp(-.42rem, -.55vw, -.22rem) !important;
  left: 50% !important;

  transform: translateX(-50%) !important;

  width: max-content !important;

  gap: clamp(.65rem, 1.15vw, 1rem) !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 5;
}


/* Larger language labels */

.site-header .header-center-stack .header-languages button {
  font-size:
    clamp(.72rem, .92vw, .86rem) !important;

  line-height: 1 !important;

  padding:
    .08rem
    0
    .12rem !important;
}


/* Menu remains vertically centered */

.site-header .header-center-stack .site-menu {
  margin-top: .45rem !important;
}


/* Mobile */

@media (max-width: 700px) {

  .site-header .header-center-stack .header-languages {
    top: -.28rem !important;

    gap:
      clamp(.4rem, 2vw, .65rem) !important;
  }

  .site-header .header-center-stack .header-languages button {
    font-size:
      clamp(.62rem, 2.5vw, .74rem) !important;
  }

  .site-header .header-center-stack .site-menu {
    margin-top: .4rem !important;
  }

}

/* ===== END HEADER LANGUAGES TOP CENTER ===== */



/* =========================================================
   HEADER — FINAL SIZE / TOP SPACING TUNING
   ========================================================= */

/* Larger logo */
.site-header > .site-logo {
  width:
    clamp(5.2rem, 10.5vw, 7.2rem) !important;
}


/* Languages: still high, but with a little breathing room */
.site-header .header-center-stack .header-languages {
  top:
    clamp(-.12rem, -.12vw, 0rem) !important;
}


/* Persian Instrumental title */
html[lang="fa"] .header-instrumental-title::after {
  content: attr(data-fa);
}

html[lang="tr"] .header-instrumental-title::after {
  content: attr(data-tr);
}

html[lang="en"] .header-instrumental-title::after {
  content: attr(data-en);
}

.header-instrumental-title {
  font-size: 0 !important;
}

.header-instrumental-title::after {
  font-size:
    clamp(.72rem, .85vw, .84rem);
}

html[lang="fa"] .header-instrumental-title::after {
  font-family: "Estedad", sans-serif;
  direction: rtl;
}


/* Mobile */
@media (max-width: 700px) {

  .site-header > .site-logo {
    width:
      clamp(4rem, 15vw, 5rem) !important;
  }

  .site-header .header-center-stack .header-languages {
    top: -.05rem !important;
  }

}

/* ===== END HEADER FINE TUNING ===== */



/* =========================================================
   SPOTIFY INSTRUMENTAL — HIDDEN OFFICIAL CONTROLLER
   Playback is controlled by the custom header UI.
   ========================================================= */

.spotify-instrumental-embed {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  left: -9999px !important;
  top: -9999px !important;
}

.header-instrumental-play:not(:disabled) {
  cursor: pointer !important;
}

.header-instrumental-play:not(:disabled):hover {
  transform: scale(1.06);
}

/* ===== END SPOTIFY INSTRUMENTAL ===== */



/* =========================================================
   HEADER SPOTIFY — COMPACT + RIGHT EDGE
   ========================================================= */

.site-header .header-instrumental {
  justify-self: end !important;
  width: clamp(13rem, 21vw, 16rem) !important;
  max-width: 16rem !important;
  margin-right: clamp(-1rem, -1.3vw, -.45rem) !important;
  overflow: hidden !important;
  border-radius: .75rem !important;
}

.site-header .spotify-instrumental-embed {
  position: relative !important;
  left: auto !important;
  top: auto !important;

  width: 100% !important;
  height: 5.4rem !important;

  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.site-header .spotify-instrumental-embed iframe {
  display: block !important;
  width: 100% !important;
  height: 5.4rem !important;
  border: 0 !important;
}


/* Mobile */
@media (max-width: 700px) {

  .site-header .header-instrumental {
    width: clamp(9rem, 31vw, 12rem) !important;
    margin-right: -.25rem !important;
  }

  .site-header .spotify-instrumental-embed,
  .site-header .spotify-instrumental-embed iframe {
    height: 5rem !important;
  }
}

/* ===== END COMPACT SPOTIFY PLAYER ===== */



/* SPOTIFY HEADER — RESTORE PLAY BUTTON */
.site-header .spotify-instrumental-embed,
.site-header .spotify-instrumental-embed iframe {
  height: 9.5rem !important;
}

.site-header .header-instrumental {
  height: 9.5rem !important;
  overflow: hidden !important;
}

@media (max-width: 700px) {
  .site-header .spotify-instrumental-embed,
  .site-header .spotify-instrumental-embed iframe,
  .site-header .header-instrumental {
    height: 9rem !important;
  }
}


/* =========================================================
   YOUTUBE INSTRUMENTAL — CUSTOM MINI PLAYER
   ========================================================= */

.site-header .header-instrumental {
  justify-self: end !important;

  width: auto !important;
  max-width: none !important;
  height: auto !important;

  margin-right:
    clamp(-1rem, -1.3vw, -.45rem) !important;

  overflow: visible !important;

  display: flex !important;
  align-items: center !important;

  gap: clamp(.45rem, .7vw, .7rem) !important;

  padding:
    clamp(.34rem, .45vw, .46rem)
    clamp(.48rem, .7vw, .72rem) !important;

  border-radius: .7rem !important;
}


/* Hidden YouTube playback engine */

.youtube-instrumental-engine {
  position: fixed !important;

  left: -10000px !important;
  top: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;
  pointer-events: none !important;

  overflow: hidden !important;
}

.youtube-instrumental-engine iframe {
  width: 1px !important;
  height: 1px !important;
}


/* Restore custom information */

.site-header .header-instrumental-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  min-width: 4.7rem;
}

.site-header .header-instrumental-title {
  font-size: 0 !important;
}

.site-header .header-instrumental-title::after {
  content: attr(data-en);

  font-size:
    clamp(.66rem, .76vw, .76rem);

  line-height: 1.05;
  white-space: nowrap;
}

html[lang="fa"]
.site-header
.header-instrumental-title::after {
  content: attr(data-fa);
  direction: rtl;
}

html[lang="tr"]
.site-header
.header-instrumental-title::after {
  content: attr(data-tr);
}

.site-header .header-instrumental-artist {
  font-size:
    clamp(.54rem, .61vw, .62rem) !important;

  line-height: 1.1;
}


/* Controls */

.site-header .header-instrumental-controls {
  display: flex !important;
  align-items: center !important;

  gap: clamp(.18rem, .28vw, .28rem) !important;
}

.site-header .header-instrumental-controls button {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  cursor: pointer !important;

  opacity: 1 !important;
}

.site-header .header-instrumental-play {
  width: clamp(1.65rem, 2vw, 1.95rem) !important;
  height: clamp(1.65rem, 2vw, 1.95rem) !important;
}

.site-header .header-instrumental-prev,
.site-header .header-instrumental-next {
  width: clamp(1.25rem, 1.5vw, 1.45rem) !important;
  height: clamp(1.25rem, 1.5vw, 1.45rem) !important;
}


/* Source */

.site-header .header-instrumental-source {
  display: inline !important;

  font-size:
    clamp(.5rem, .56vw, .58rem) !important;

  white-space: nowrap;
}


/* Mobile */

@media (max-width: 700px) {

  .site-header .header-instrumental {
    margin-right: -.2rem !important;
    gap: .25rem !important;
    padding: .28rem .35rem !important;
  }

  .site-header .header-instrumental-info {
    min-width: 3.8rem;
  }

  .site-header .header-instrumental-source {
    display: none !important;
  }
}

/* ===== END YOUTUBE INSTRUMENTAL PLAYER ===== */



/* =========================================================
   INSTRUMENTAL — CURRENT TRACK TITLE
   ========================================================= */

.site-header .header-instrumental-control-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .08rem !important;
  min-width: clamp(4.8rem, 6vw, 6rem);
}

.site-header .header-instrumental-track {
  width: clamp(4.8rem, 6.5vw, 6.6rem);
  min-height: .7rem;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: center;

  font-size: clamp(.48rem, .55vw, .57rem);
  line-height: 1.1;

  opacity: .72;
}

@media (max-width: 700px) {
  .site-header .header-instrumental-control-stack {
    min-width: 4.2rem;
  }

  .site-header .header-instrumental-track {
    width: 4.5rem;
    font-size: .46rem;
  }
}

/* ===== END CURRENT TRACK TITLE ===== */



/* =========================================================
   HEADER INSTRUMENTAL — 20% LARGER
   ========================================================= */

.site-header .header-instrumental {
  gap: clamp(.54rem, .84vw, .84rem) !important;

  padding:
    clamp(.41rem, .54vw, .55rem)
    clamp(.58rem, .84vw, .86rem) !important;
}

.site-header .header-instrumental-info {
  min-width: 5.65rem !important;
}

.site-header .header-instrumental-title::after {
  font-size:
    clamp(.79rem, .91vw, .91rem) !important;
}

.site-header .header-instrumental-artist {
  font-size:
    clamp(.65rem, .73vw, .74rem) !important;
}

.site-header .header-instrumental-control-stack {
  min-width:
    clamp(5.75rem, 7.2vw, 7.2rem) !important;
}

.site-header .header-instrumental-controls {
  gap:
    clamp(.22rem, .34vw, .34rem) !important;
}

.site-header .header-instrumental-play {
  width:
    clamp(1.98rem, 2.4vw, 2.34rem) !important;

  height:
    clamp(1.98rem, 2.4vw, 2.34rem) !important;
}

.site-header .header-instrumental-prev,
.site-header .header-instrumental-next {
  width:
    clamp(1.5rem, 1.8vw, 1.74rem) !important;

  height:
    clamp(1.5rem, 1.8vw, 1.74rem) !important;
}

.site-header .header-instrumental-track {
  width:
    clamp(5.75rem, 7.8vw, 7.9rem) !important;

  font-size:
    clamp(.58rem, .66vw, .68rem) !important;
}

.site-header .header-instrumental-source {
  font-size:
    clamp(.6rem, .67vw, .7rem) !important;
}


/* Mobile remains compact */
@media (max-width: 700px) {

  .site-header .header-instrumental {
    gap: .3rem !important;
    padding: .34rem .42rem !important;
  }

  .site-header .header-instrumental-info {
    min-width: 4.5rem !important;
  }

  .site-header .header-instrumental-control-stack {
    min-width: 5rem !important;
  }

  .site-header .header-instrumental-track {
    width: 5.4rem !important;
    font-size: .54rem !important;
  }
}

/* ===== END 20% PLAYER ENLARGEMENT ===== */


/* Footer anchor offset for sticky header */
#contact {
  scroll-margin-top: 12rem;
}


/* =========================================================
   HEADER MULTILINGUAL TEXT — prevent original + ::after overlap
   ========================================================= */

.site-header .site-menu a {
  font-size: 0 !important;
}

.site-header .site-menu a::after {
  font-size: 1rem !important;
}

.site-header .header-instrumental-title {
  font-size: 0 !important;
}

.site-header .header-instrumental-title::after {
  font-size: .82rem !important;
}


/* Persian Header — alternate font rendering */
html[lang="fa"] .site-header .site-menu a::after,
html[lang="fa"] .site-header .header-instrumental-title::after {
  font-family: Tahoma, Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}


/* Diagnostic: render Contact from real HTML, not ::after */
html[lang="fa"] .site-header .site-menu a[href="#contact"] {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #263b42 !important;
}

html[lang="fa"] .site-header .site-menu a[href="#contact"]::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   HEADER — use real DOM text only
   Disable legacy multilingual ::after rendering
   ========================================================= */

.site-header .site-menu a {
  font-size: 1rem !important;
}

.site-header .site-menu a::before,
.site-header .site-menu a::after {
  content: none !important;
  display: none !important;
}

.site-header .header-instrumental-title {
  font-size: .82rem !important;
}

.site-header .header-instrumental-title::before,
.site-header .header-instrumental-title::after {
  content: none !important;
  display: none !important;
}

/* Persian native text */
html[lang="fa"] .site-header .site-menu a,
html[lang="fa"] .site-header .header-instrumental-title {
  font-family: "Estedad", Tahoma, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}


/* Persian text isolation inside LTR header */
html[lang="fa"] .site-header .site-menu a,
html[lang="fa"] .site-header .header-instrumental-title {
  direction: rtl !important;
  unicode-bidi: isolate !important;
}