/* =========================================================
   CorStoneTr — Design tokens (v2, soft/warm yön)
   Palet, reçinenin kürlenirken aldığı sıcak amber tona ve
   cilalı taşın krem tonlarına dayanıyor — sert endüstriyel
   yerine sıcak, yuvarlak, davetkar bir his.
   ========================================================= */
:root {
  --cream: #f8f3ea;        /* ana zemin — sıcak krem */
  --cream-2: #f0e8d8;      /* kart zemini, bir ton koyu krem */
  --cream-3: #e8dcc4;      /* vurgulu bölüm zemini */
  --ink: #3c3327;          /* sıcak kömür — başlıklar (saf siyah değil) */
  --taupe: #8c8171;        /* ikincil metin — sıcak gri-kahve */
  --sage: #7c9179;         /* sakin reçine-yeşili — birincil aksan */
  --sage-deep: #5f7660;
  --amber: #d99a4e;        /* kürlenmiş reçine amberi — sıcak ikincil aksan */
  --amber-deep: #c17f34;
  --line: rgba(60, 51, 39, 0.1);
  --shadow-soft: 0 20px 45px -20px rgba(60, 51, 39, 0.18);
  --shadow-card: 0 12px 30px -14px rgba(60, 51, 39, 0.16);

  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-label: 'Plus Jakarta Sans', sans-serif;

  --container: 1240px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sage-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* -------------------- Header -------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 18px;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  background: rgba(248, 243, 234, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 12px 0 20px;
  box-shadow: var(--shadow-card);
}

.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  height: 100%;
  padding: 3px 0;
  box-sizing: border-box;
}
.logo span { color: var(--amber-deep); font-style: normal; }
.logo img { height: 100%; width: auto; object-fit: contain; display: block; }

.nav-main {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-main a {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--taupe);
  position: relative;
  padding: 4px 0;
  transition: color 0.25s ease;
}
.nav-main a:hover { color: var(--ink); }

.header-cta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  color: var(--cream);
  background: var(--ink);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  transition: background 0.3s ease, transform 0.3s ease;
}
.header-cta:hover { background: var(--sage-deep); transform: translateY(-1px); }

/* -------------------- Hero -------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}

/* "Sahne": hero-bg + hero-content + hero-dots'un tamamını
   kapsıyor. Masaüstünde normal boyutunda, mobilde ise transform:
   scale() ile TEK PARÇA halinde küçültülüyor — yani masaüstünde
   ne görünüyorsa (oranlar, boşluklar, yazı boyutu dahil) birebir
   aynısı, sadece bir görsel gibi orantılı küçültülmüş hali. */
.hero-stage {
  position: relative;
  width: 100%;
  height: 92vh;
}

/* Masaüstü: tam genişlik, tam yükseklik split — sol=ürün, sağ=uygulama alanı */
.hero-bg {
  position: absolute;
  inset: 0;
  display: flex;
}
.hero-bg-half {
  position: relative;
  flex: 1;
  overflow: hidden;
}
/* Ürün paneli: sayfanın kendi zeminiyle birebir aynı renk —
   kutu/panel hissi vermesin, ürün havada duruyormuş gibi görünsün. */
.hero-bg-half--product { background: var(--cream); }

/* Uygulama alanı paneli: üstten/alttan içeri çekilmiş, ayrı
   duran bir kart. Ürüne bakan (sol) kenarı oval, ekrana bakan
   (sağ) kenarı düz ve tam ekrana dayalı. İçe doğru çok yumuşak
   bir "pencere" gölgesi (vignette) ile kusursuz/pürüzsüz bir
   çerçeve hissi veriyor. */
.hero-bg-half--scene {
  margin: 130px 0 60px 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow:
    var(--shadow-soft),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 0 60px rgba(20, 15, 8, 0.07);
}

.hero-bg .slab {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg .slab.is-active { opacity: 1; }

/* Slayt görselleri artık admin panelden (Slayt yönetimi) yönetiliyor;
   her .slab'a PHP tarafında inline background-image basılıyor. */

/* Metin: başlık + "Ürünü İncele" butonu, iki panelin dikişinin
   üzerinde, arka plansız — okunabilirlik için yumuşak bir halo (glow). */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  max-width: 90%;
  text-align: center;
  pointer-events: none;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow:
    0 0 30px rgba(248, 243, 234, 0.9),
    0 0 60px rgba(248, 243, 234, 0.7),
    0 2px 16px rgba(248, 243, 234, 0.8);
}
.hero h1 em { font-style: italic; color: var(--amber-deep); font-weight: 500; }

.hero-content #heroBtn {
  display: inline-block;
  margin-top: 26px;
  pointer-events: auto;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dots button {
  width: 22px; height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(248, 243, 234, 0.55);
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: background 0.3s ease, width 0.3s ease;
}
.hero-dots button.is-active { background: var(--amber); width: 34px; }

/* btn-primary / btn-ghost / hero-actions: ürün detay sayfasında
   (urun.php) kullanılıyor, ana sayfa hero'sunda artık yok. */
.btn-primary {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 14px;
  background: var(--sage);
  color: var(--cream);
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 14px 30px -12px rgba(124, 145, 121, 0.55);
  display: inline-block;
}
.btn-primary:hover { background: var(--sage-deep); transform: translateY(-2px); }

.btn-ghost {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  padding: 16px 6px;
  border-bottom: 1.5px solid var(--line);
  transition: border-color 0.25s ease, color 0.25s ease;
  display: inline-block;
}
.btn-ghost:hover { border-color: var(--amber-deep); color: var(--amber-deep); }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Mobilde tüm sahneyi (görseller + yazı + boşluklar) tek parça
   halinde küçültüyoruz. h1 vw tabanlı olduğu için (gerçek ekran
   genişliğine göre hesaplanır, scale'den etkilenmez) burada sabit
   bir referans değere çekiyoruz ki scale ile birlikte orantılı
   küçülsün — masaüstündeki 60px'lik hâliyle birebir aynı oran.
   MOBILE_TOP_GAP: header pill'in altında sabit bir boşluk —
   scale'den etkilenmiyor çünkü header'ın kendisi de küçülmüyor. */
@media (max-width: 980px) {
  .hero { height: calc(92vh * 0.62 + 100px); }
  .hero-stage {
    width: calc(100% / 0.62);
    margin-top: 100px;
    transform: scale(0.62);
    transform-origin: top left;
  }
  .hero h1 { font-size: 60px; }
}

@media (max-width: 640px) {
  .hero { height: calc(92vh * 0.42 + 100px); }
  .hero-stage {
    width: calc(100% / 0.42);
    margin-top: 100px;
    transform: scale(0.42);
  }
}

@media (max-width: 420px) {
  .hero { height: calc(92vh * 0.32 + 100px); }
  .hero-stage {
    width: calc(100% / 0.32);
    margin-top: 100px;
    transform: scale(0.32);
  }
}

/* -------------------- Ürün sayfası hero'su -------------------- */
/* Ana sayfa slaytıyla aynı görsel dil (oval sol/düz sağ, yumuşak
   gölge) ama %40 daha alçak ve kendi bağımsız responsive mantığı
   var — masaüstünde yan yana, mobilde ÜST/ALT olarak istifleniyor
   (ana görsel üstte, galeri altta), transform-scale kullanmadan. */
.urun-hero {
  position: relative;
  background: var(--cream);
  padding-top: 100px;
  overflow: hidden;
}
.urun-hero-bg {
  display: flex;
  height: 55vh;
}
.urun-hero-half {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.urun-hero-half--ana { background: var(--cream); } /* sitenin zeminiyle aynı — kutu gibi değil, görsel havada duruyormuş gibi */
.urun-hero-half--galeri {
  margin: 60px 0 30px 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow:
    var(--shadow-soft),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 0 50px rgba(20, 15, 8, 0.06);
}
.urun-hero .slab {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.urun-hero .slab.is-active { opacity: 1; }

@media (max-width: 980px) {
  .urun-hero { padding-top: 90px; }
  .urun-hero-bg { flex-direction: column; height: auto; }
  .urun-hero-half--ana { flex: none; height: 84vh; width: 100%; }
  /* Mobilde 3./4. görsel (galeri) alanı tamamen kaldırılıyor —
     yer kaplamasın diye display:none, yazılar hemen üste çekiliyor. */
  .urun-hero-galeri { display: none; }
}
@media (max-width: 640px) {
  .urun-hero-half--ana { height: 68vh; }
}

/* Ürün içeriği (başlık+metin) — kenar boşluğu ürün kataloğuyla aynı (20px) */
.urun-icerik-wrap { padding-left: 20px; padding-right: 20px; }

/* Ürün içeriği ile "Diğer Ürünlerimiz" arasındaki ayırıcı çizgi */
.urun-ayirici {
  height: 1px;
  background: var(--line);
  max-width: 1800px;
  margin: 0 auto;
}

/* -------------------- Seam (signature element, soft) -------------------- */
.seam {
  position: relative;
  padding: 70px 0;
  background: var(--cream);
}
.seam-line { display: none; }
.seam-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(217, 154, 78, 0.35), transparent 70%);
  filter: blur(20px);
  animation: seam-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes seam-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.seam-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--ink);
  text-align: center;
}
.seam-label::before,
.seam-label::after {
  content: '';
  width: 80px;
  height: 1px;
  background: var(--line);
}
@media (max-width: 640px) {
  .seam-label::before, .seam-label::after { width: 30px; }
}

/* -------------------- Value strip -------------------- */
.values {
  background: var(--cream);
  padding: 40px 0 100px;
}
.values-head { max-width: 620px; margin-bottom: 48px; text-align: center; margin-left: auto; margin-right: auto; }
.values-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  margin: 14px 0 0;
  letter-spacing: -0.01em;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.value-card {
  background: var(--cream-2);
  border-radius: var(--radius-md);
  padding: 34px 26px;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.value-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--amber-deep);
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  margin: 16px 0 10px;
}
.value-card p { font-size: 14px; color: var(--taupe); margin: 0; }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* -------------------- Product rail -------------------- */
.rail-section {
  background: var(--cream-3);
  padding: 90px 0 100px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.rail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  color: var(--ink);
}
.rail-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 12px 0 0;
  letter-spacing: -0.01em;
}
.rail-hint { display: none; }

.rail-track-wrap {
  position: relative;
  max-width: 1800px; /* .wrap'in 1240px sınırından çok daha geniş — ekran kenarından sadece küçük bir boşluk bırak */
  margin: 0 auto;
  padding: 0 20px; /* kartlar arası boşlukla (grid gap: 20px) birebir aynı */
}
.rail-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) {
  .rail-track { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .rail-track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .rail-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .rail-track { grid-template-columns: 1fr; }
}

.product-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}
.product-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-soft); }

.product-swatch {
  aspect-ratio: 641 / 279; /* gerçek ürün görseli oranı (kontrol ettim: 641×279) — masaüstü/mobil fark etmez, hep bu oranda kalır */
  height: auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* artık çerçeve oranı (641:279) görselin gerçek oranıyla eşleşiyor, kırpma olmadan tam dolduruyor */
  display: block;
  box-shadow: inset 0 0 0 1px var(--line); /* etrafında ince bir çizgi */
}
.product-swatch::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(120% 100% at 25% 15%, rgba(255,255,255,0.35), transparent 60%);
}
.product-code {
  position: relative;
  z-index: 2;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(248, 243, 234, 0.85);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}

.product-info { padding: 20px 20px 24px; }
.product-info h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}
.product-info p {
  font-size: 13.5px;
  color: var(--taupe);
  margin: 0 0 16px;
  min-height: 34px;
}
.product-link {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 12px;
  color: var(--sage-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.25s ease;
}
.product-link:hover { gap: 10px; }

/* -------------------- Footer -------------------- */
.site-footer {
  background: var(--cream-2); /* "Her Renge, Her Yüzeye Uyumlu" kutucuklarıyla aynı ton */
  padding: 56px 0 32px;
  color: var(--taupe);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}
.footer-top .logo { color: var(--ink); }
.footer-top .logo span { color: var(--amber-deep); }
.footer-social { display: flex; gap: 18px; }
.footer-social a { font-size: 13px; font-weight: 500; color: var(--taupe); }
.footer-social a:hover { color: var(--amber-deep); }
.footer-bottom {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--taupe);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.footer-bottom a { color: var(--taupe); }
.footer-bottom a:hover { color: var(--amber-deep); }

/* -------------------- Reveal utility -------------------- */
.reveal { opacity: 0; transform: translateY(28px); }

/* -------------------- Mobile nav -------------------- */
.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex: 0 0 34px;
}
.nav-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  transition: background 0.2s ease;
}
.mobile-menu a:hover { background: var(--cream-2); }

@media (max-width: 860px) {
  .nav-main, .site-header > .wrap > .header-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Header pill ekrana yaslanmasın diye yan boşluk */
  .site-header { padding-left: 18px; padding-right: 18px; }

  .site-header .wrap {
    position: relative;
    justify-content: flex-end; /* logo absolute olunca tek kalan nav-toggle sağda dursun */
  }

  /* Logo ortalanıyor */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* -------------------- Floating widget'lar: Dil Değiştirici + İletişim -------------------- */
.cs-lang-switcher,
.cs-contact-fab {
  position: fixed;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cs-lang-switcher { bottom: 96px; }
.cs-contact-fab { bottom: 24px; }

.cs-fab-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
  transition: background 0.25s ease, transform 0.25s ease;
  position: relative;
  z-index: 2;
}
.cs-fab-toggle:hover { transform: translateY(-2px); }
.cs-fab-toggle svg { width: 22px; height: 22px; pointer-events: none; }
.cs-contact-fab .cs-fab-toggle { background: var(--sage); }
.cs-contact-fab .cs-fab-toggle:hover { background: var(--sage-deep); }

/* Dil ikonunun içinde küre ve aktif dilin bayrağı dönüşümlü gösteriliyor */
.cs-fab-toggle-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.cs-fab-toggle-icon.is-active { opacity: 1; }
.cs-fab-toggle-icon img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }

.cs-fab-toggle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Sağ alttaki ikonların yanında dönen tanıtım balonu */
.cs-fab-hint {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.cs-fab-hint.is-visible { opacity: 1; }

.cs-fab-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2px;
}

.cs-fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-fab-item:hover { background: var(--cream-2); transform: translateX(-3px); }

.cs-fab-flag { font-size: 16px; line-height: 1; display: inline-flex; }
.cs-fab-flag img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; }

.cs-fab-icon { display: inline-flex; width: 18px; height: 18px; }
.cs-fab-icon svg { width: 100%; height: 100%; }
.cs-fab-icon--whatsapp { color: #25D366; }
.cs-fab-icon--call { color: var(--sage-deep); }

@media (max-width: 640px) {
  .cs-lang-switcher, .cs-contact-fab { right: 16px; }
  .cs-lang-switcher { bottom: 84px; }
  .cs-contact-fab { bottom: 16px; }
  .cs-fab-toggle { width: 48px; height: 48px; }
}

/* Arapça/Farsça: Fraunces ve Plus Jakarta Sans bu alfabeleri
   desteklemiyor, bu yüzden bu dillerde otomatik olarak Vazirmatn'a
   (hem Arapça hem Farsça'yı düzgün destekleyen bir font) geçiyoruz. */
html[lang="ar"], html[lang="fa"] {
  --font-display: 'Vazirmatn', sans-serif;
  --font-body: 'Vazirmatn', sans-serif;
  --font-label: 'Vazirmatn', sans-serif;
}
html[lang="ar"] .hero h1 em,
html[lang="fa"] .hero h1 em { font-style: normal; } /* Arapça/Farsçada italik doğal görünmez */

/* -------------------- İletişim sayfası -------------------- */
.iletisim-harita {
  width: 100%;
  height: 400px;
  max-height: 400px;
  overflow: hidden;
  background: var(--cream-2);
}
.iletisim-harita iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.iletisim-bilgi {
  display: flex;
  flex-direction: column;
  gap: 48px; /* satırlar arasında ~2 satırlık boşluk */
}
.iletisim-satir {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
}
.iletisim-satir a { color: var(--sage-deep); font-weight: 600; }
.iletisim-satir a:hover { color: var(--sage); }
.iletisim-ikon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--amber-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iletisim-ikon svg { width: 20px; height: 20px; }