/* ============ NESHE HOME ============ */
:root {
  --cream: #f5f1e9;
  --cream-alt: #eae4d8;
  --ink: #2b2723;
  --ink-soft: #55504a;
  --dark: #262220;
  --line: #d9d2c4;
  --white: #fdfcf9;
  --serif: "Prata", "Playfair Display", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(1180px, 92%);
  margin: 0 auto;
}

/* ---------- type helpers ---------- */
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.eyebrow.center { text-align: center; }
.eyebrow.light { color: rgba(255, 255, 255, 0.75); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.18; }

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 3rem;
}
.section-title.center { text-align: center; }
.section-title.light { color: var(--white); }

.section-intro {
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: -1.8rem auto 3rem;
}
.section-intro.center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.95rem 2.1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-small { padding: 0.65rem 1.5rem; }
.btn-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.btn-dark:hover { background: transparent; color: var(--dark); }
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline-light:hover { background: var(--white); color: var(--dark); border-color: var(--white); }
.btn-light {
  background: var(--white);
  color: var(--dark);
  border-color: var(--white);
}
.btn-light:hover { background: transparent; color: var(--white); }

/* header dark button keeps dark on hover-invert against cream */
.header-cta:hover { background: transparent; color: var(--dark); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(43, 39, 35, 0.08); }

/* Navbar sayfa gövdesinin 1180px'lik kapsayıcısına sıkışmaz, ekran genişliğini kullanır —
   böylece etiketleri uzun dillerde (FR/PT) menü daralmaz.
   Boşluk space-between ile dört aralığa dağıtılsaydı, etiket uzunluğu her dilde farklı
   olduğu için her öğe ayrı ayrı kayardı. Bunun yerine boşluk tek noktada (menü ile sağ
   kümenin arasında) toplanır: marka ve menü sol kenara, buton ile dil kutucuğu sağ kenara
   sabitlenir. Menünün başlangıç noktası yalnızca logo genişliğine bağlı olduğu ve logo her
   dilde aynı olduğu için, dil değişse de menü yerinden kaymaz. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 1.1rem 4%;
  width: auto;
  max-width: none;
}
/* menü markanın hemen yanında, sol kenarda */
.header-inner .main-nav { margin-inline-start: 2.2rem; }
/* boşluk burada toplanır; buton ve dil kutucuğu sağ kenara itilir */
.header-inner .header-cta { margin-inline-start: auto; }

.brand { display: flex; align-items: center; }
.brand-logo { height: 44px; width: auto; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand-tag {
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-name.light, .brand-tag.light { color: var(--white); }
.brand-tag.light { color: rgba(255, 255, 255, 0.6); }

.main-nav { display: flex; gap: 1.3rem; }
.nav-link {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding: 0.3rem 0;
  white-space: nowrap;
}
.nav-link { transition: opacity 0.3s ease; }
.nav-link:hover { opacity: 0.6; }

.header-cta { white-space: nowrap; }

/* dil seçici — seçili dili gösteren açılır menü */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-current {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--sans);
  /* yazı boyutu, dikey iç boşluk ve kenarlık .btn-small ile aynı tutulur —
     böylece yanındaki "Get in Touch" butonuyla tam olarak eşit yükseklikte olur */
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  /* <button> gövdeden line-height devralmaz; butonla eşitlenmesi için açıkça verilir */
  line-height: 1.7;
  padding: 0.65rem 0.9rem;
  transition: border-color 0.25s ease;
}
.lang-current:hover { border-color: var(--ink-soft); }
.lang-caret {
  width: 9px; height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.lang-switch.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 100%;
  list-style: none;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(43, 39, 35, 0.12);
  /* kapalıyken ekran okuyucudan da gizlenir */
  display: none;
  z-index: 120;
  /* dil sayısı arttıkça liste uzar; alçak ekranlarda taşmak yerine kendi içinde kayar */
  max-height: min(60vh, 320px);
  overflow-y: auto;
}
.lang-switch.open .lang-menu { display: block; }
.lang-menu a {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-menu a:hover { background: var(--cream-alt); color: var(--ink); }
.lang-menu a.active {
  background: var(--dark);
  color: var(--white);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--ink);
  transition: 0.3s;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg, .cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-d);
}
/* mobil görsel tanımlıysa dar ekranda onu kullan, yoksa masaüstü görseline düş */
@media (max-width: 768px) {
  .hero-bg, .cta-bg { background-image: var(--bg-m, var(--bg-d)); }
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 27, 24, 0.25);
}
.hero-content { position: relative; z-index: 2; padding: 6rem 0; }
.hero-panel {
  max-width: 820px;
  background: rgba(38, 34, 30, 0.55);
  backdrop-filter: blur(2px);
  padding: 3.2rem 3rem;
  color: var(--white);
}
.hero h1 {
  font-size: clamp(1.5rem, 5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Satır yapısı content.json'daki satır sonlarından (<br />) gelir. Buna ek olarak
     sığmayan satırın kendi içinde kırılmasına izin verilir — aksi halde İngilizce'den
     uzun çeviriler (ör. FR "D'APPROVISIONNEMENT") panelin dışına taşar. */
  overflow-wrap: break-word;
  margin-bottom: 1.4rem;
}
.hero-sub {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.6rem;
}
.hero-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 66ch;
  margin-bottom: 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-actions .btn {
  padding: 0.8rem 1.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
}

/* ---------- sections ---------- */
.section { padding: 6.5rem 0; }
.about { background: var(--cream); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4.5rem;
  align-items: start;
  margin-top: 2.5rem;
}
.about-media img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}
.about-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 1.6rem;
}
.about-copy p { margin-bottom: 1.05rem; color: var(--ink-soft); font-size: 0.98rem; }

.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2rem;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--cream-alt);
  padding: 1rem 1.2rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.feature-list svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- what we offer ---------- */
.offer { background: var(--cream); padding-top: 0; }
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.offer-card {
  background: var(--cream-alt);
  border: 1px solid var(--line);
  padding: 2.2rem 1.9rem;
}
.offer-card svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 1.2rem;
}
.offer-card h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.offer-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- collections ---------- */
.collections { background: var(--cream-alt); }
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.collection-media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
}
.collection-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.collection-card:hover .collection-media img { transform: scale(1.06); }
.collection-card > p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 0.9rem 0.2rem 0;
}

.machine-made {
  margin-top: 3.5rem;
  border: 1px solid var(--line);
  background: var(--cream);
  text-align: center;
  padding: 2.6rem 2rem;
}
.machine-made-tag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.machine-made-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  margin-bottom: 0.9rem;
}
.machine-made-text {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.chip {
  position: absolute;
  inset-inline-start: 1rem;
  bottom: 1rem;
  background: var(--white);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
}

/* ---------- partners ---------- */
.partners { background: var(--cream); }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.partner-card {
  background: var(--cream-alt);
  border: 1px solid var(--line);
  padding: 1.1rem 1.1rem 1.8rem;
}
.partner-card img {
  width: 100%;
  aspect-ratio: 4 / 2.7;
  object-fit: cover;
  margin-bottom: 1.4rem;
}
.partner-card h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.partner-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- process ---------- */
.process { background: var(--dark); color: var(--white); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.process-step svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-step span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.process-step p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- cta ---------- */
.cta {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 27, 24, 0.2);
}
.cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 6rem 0;
}
.cta-panel {
  max-width: 620px;
  text-align: center;
  background: rgba(38, 34, 30, 0.55);
  backdrop-filter: blur(2px);
  padding: 3.2rem 3.4rem;
  color: var(--white);
}
.cta-panel {
  max-width: 760px;
  width: 100%;
}
.cta-panel h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 1.2rem; }
.cta-sub { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 2.4rem; }

/* ---------- inquiry form ---------- */
.inquiry-form { text-align: start; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.45rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.92rem;
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  border-radius: 0;
  -webkit-appearance: none;
}
.form-field select { cursor: pointer; }
.form-field select option { color: var(--ink); background: var(--white); }
.form-field textarea { resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}
.form-submit {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
}
.form-note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: 3rem 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.footer-logo { height: 46px; width: auto; }
.footer-meta { text-align: end; font-size: 0.78rem; color: var(--ink-soft); }
.footer-meta a {
  display: block;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
  letter-spacing: 0.06em;
}
.footer-meta a:hover { text-decoration: underline; }

/* ---------- custom uploaded icons ---------- */
/* açık zeminlerde mürekkep rengine, koyu zeminde beyaza sabitlenir */
.feature-list .icon-img {
  width: 18px; height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0);
  opacity: 0.85;
}
.offer-card .icon-img {
  width: 26px; height: 26px;
  object-fit: contain;
  display: block;
  margin-bottom: 1.2rem;
  filter: brightness(0);
  opacity: 0.85;
}
.process-step .icon-img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ---------- reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */
/* Dil kutucuğu eklendiği için menü dar masaüstlerinde sığmıyor; menüde zaten
   "For Buyers" bağlantısı olduğundan sağ üst buton önce gizlenir. */
@media (max-width: 1200px) {
  .header-cta { display: none; }
  /* sağa yaslama görevi gizlenen butondan dil kutucuğuna geçer */
  .lang-switch { margin-inline-start: auto; }
}

@media (max-width: 960px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    /* masaüstünde markadan ayıran boşluk açılır menüde geçersiz */
    margin-inline-start: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 1rem 4%;
  }
  .main-nav.open .nav-link { padding: 0.8rem 0; }

  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-media img { min-height: 320px; }
  .collections-grid { grid-template-columns: 1fr 1fr; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .partners-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .form-row-3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand-logo { height: 34px; }
  .footer-logo { height: 38px; }
  .collections-grid { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .hero-panel, .cta-panel { padding: 2.2rem 1.6rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: start; }
  .lang-switch a { padding: 0.4rem 0.45rem; }
}

/* ---------- diller ---------- */
/* Arapça'da Jost ve Prata harf içermez; yazı tipleri script.js tarafından
   yalnızca bu dilde yüklenir, değişkenler burada devralınır. */
html[lang="ar"] {
  --serif: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --sans: "Tajawal", "Jost", "Helvetica Neue", Arial, sans-serif;
}
/* Arap harfleri bitişik yazılır; harf aralığı kelimeleri kopardığı için sıfırlanır */
html[lang="ar"] * { letter-spacing: normal; }
html[lang="ar"] .hero-sub,
html[lang="ar"] .machine-made-title { line-height: 1.5; }