/* ==========================================================================
   SRF YILDIRIMLAR EPS & YALITIM — Ortak stil dosyası
   Palet: kırık beyaz zemin + antrasit metin + bakır vurgu
   ========================================================================== */

:root {
  /* Renkler
     Yandaki oranlar --bg zemini üzerindeki kontrast değerleridir.
     WCAG AA kuralı: normal metin en az 4.5:1, ikon/çizgi en az 3:1. */
  --bg:          #FBF9F5;  /* sıcak kırık beyaz - sayfa zemini */
  --bg-alt:      #F5F0E7;  /* açık kum - şeritli bölümler */
  --surface:     #FFFFFF;  /* kart yüzeyi */
  --ink:         #1F1D1A;  /* ana metin (antrasit)      — 15.4:1 */
  --ink-soft:    #5A544B;  /* ikincil metin             —  7.1:1 */
  --ink-faint:   #6F6A61;  /* etiket / dipnot           —  5.0:1
                              (eski #8C857A 3.48:1 idi ve AA'nın altında kalıyordu;
                               form ipucu, tablo notu, sözlük açıklaması gibi
                               BİLGİ TAŞIYAN metinlerde kullanılıyor) */

  /* Bakır tonu, kullanım yerine göre dört değişkene ayrıldı.
     Sebep: tek bir bakır tonu hem açık hem koyu zeminde, hem metin hem ikon
     olarak yeterli kontrast veremiyor. Hangisini nerede kullanacağın:
       --accent       -> AÇIK zeminde ikon/çizgi/kenarlık/süs   (3:1 yeterli)
       --accent-text  -> AÇIK zeminde METİN ve BAĞLANTI         (4.5:1 gerekli)
       --accent-light -> KOYU zeminde METİN ve BAĞLANTI         (footer, CTA)
       --accent-btn   -> dolu buton ZEMİNİ (üstünde beyaz metin) */
  --accent:       #A8763E;  /* açık zeminde ikon/kenarlık        —  3.8:1 */
  --accent-text:  #86592B;  /* açık zeminde metin                —  5.7:1 */
  --accent-light: #B8834A;  /* KOYU zeminde metin (#211F1B üstü) —  5.0:1
                               (--accent koyu zeminde 4.17:1 ile yetersizdi) */
  --accent-btn:   #96682F;  /* dolu buton zemini, beyaz metinle  —  4.9:1
                               (eski #A8763E beyaz metinle 3.94:1 ile
                                yetersizdi; bu, orijinale en yakın geçen ton) */
  --accent-btn-hover: #7E5427; /* buton hover zemini             —  6.6:1 */
  --accent-dark:  #86592B;  /* bakır - koyu varyant */
  --accent-soft: #F1E7D8;  /* bakır - çok açık zemin */
  --line:        #E5DCCE;  /* çizgi / kenarlık */
  --dark:        #211F1B;  /* koyu bölüm zemini (footer, CTA) */
  --hata:        #C0392B;  /* form hata rengi */

  /* Tipografi */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Ölçüler */
  --container: 1240px;
  --radius: 4px;
  --topbar-h: 38px;
  --header-h: 84px;
  --header-h-scrolled: 70px;                            /* .header.is-scrolled yüksekliği */
  --nav-total: calc(var(--topbar-h) + var(--header-h)); /* sabit üst alanın toplam yüksekliği */

  --shadow-sm: 0 2px 10px rgba(33, 31, 27, .05);
  --shadow-md: 0 12px 32px rgba(33, 31, 27, .09);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------- giriş ekranı --- */
/* Sayfa yüklenirken görünür; logo aşağıdan yukarı dolar.
   Aynı oturumda ikinci kez gösterilmez (js/main.js içinde sessionStorage). */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
  /* JavaScript çalışmazsa bile site 3 saniye sonra kendini açsın */
  animation: girisEmniyet .4s ease 3s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

/* NOT: Burada bilerek scroll kilidi (overflow:hidden) YOK.
   Kilit koyulursa, giriş ekranını kapatan JavaScript herhangi bir sebeple
   çalışmadığında sayfa kaydırılamaz hâle geliyor. Giriş ekranı zaten tam ekran
   kapladığı için kilide gerek de yok. */

/* Aynı oturumda daha önce gösterildiyse hiç çizilmesin */
.giris-atlandi .preloader { display: none; }

.preloader__logo { position: relative; width: min(230px, 58vw); }
.preloader__logo img { width: 100%; display: block; }

/* Alttaki soluk logo: dolacak alanın "boş" hâli */
.preloader__base { opacity: .12; }

/* Üstteki koyu logo: clip-path ile soldan sağa doğru bir kez dolar ve dolu kalır */
.preloader__fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoDolum 1.8s cubic-bezier(.45, 0, .2, 1) forwards;
}

@keyframes logoDolum {
  from { clip-path: inset(0 100% 0 0); }   /* tamamen boş */
  to   { clip-path: inset(0 0 0 0); }      /* soldan sağa tamamen dolmuş */
}

.preloader__text {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@keyframes girisEmniyet {
  to { opacity: 0; visibility: hidden; }
}

/* Animasyon istemeyen kullanıcıda giriş ekranı bekletmez */
@media (prefers-reduced-motion: reduce) {
  .preloader { animation: girisEmniyet .1s linear forwards; }
  .preloader__fill { animation: none; clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------- temel --- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Bağlantıyla bir bölüme atlarken hedef başlık header'ın altında kalmasın.
     Atlama neredeyse her zaman sayfa kaydırılmış hâldeyken olur; o durumda
     header 70px'tir. Önceden 84px'e göre hesaplandığı için 34px fazla
     boşluk bırakıyordu. */
  scroll-padding-top: calc(var(--header-h-scrolled) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.42rem; }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Seçim vurgusu da dolu zemin + beyaz metin olduğu için buton rengiyle aynı */
::selection { background: var(--accent-btn); color: #fff; }

/* --------------------------------------------------------- yerleşim --- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 74px 0; }
.section--tight { padding: 52px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--dark); color: #E9E4DA; }
.section--dark h2,
.section--dark h3 { color: #FCFAF6; }

/* Bölüm başlığı bloğu */
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);   /* metin -> 4.5:1 gerekli, --accent 3.8:1 ile yetersizdi */
  margin-bottom: 13px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 3px;
}
.section-head--center .eyebrow::before { display: none; }

.lead {
  font-size: 1.04rem;
  color: var(--ink-soft);
  line-height: 1.68;
}

/* ------------------------------------------------------------ butonlar --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}

/* Sitenin ana eylem butonu ("Teklif Al", "Teklif Formu", "WhatsApp ile Gönder").
   Metin .9rem/600 ağırlıkta, yani WCAG'e göre "büyük metin" SAYILMAZ ve 4.5:1
   gerektirir. Eski zemin (--accent #A8763E) beyaz metinle yalnızca 3.94:1
   veriyordu; bakır tonuna en yakın geçen değere çekildi. */
.btn--primary {
  background: var(--accent-btn);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(168, 118, 62, .28);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--light {
  background: #fff;
  color: var(--ink);
}
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--outline-light {
  background: transparent;
  color: #F5F0E7;
  border-color: rgba(245, 240, 231, .32);
}
.btn--outline-light:hover { border-color: #F5F0E7; }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Ok işareti olan metin link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------- topbar --- */
/* Header'ın üstündeki ince bilgi şeridi: konum + çalışma saati */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 101;
  height: var(--topbar-h);
  background: var(--dark);
  color: rgba(233, 228, 218, .72);
  font-size: .78rem;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  transition: transform .3s var(--ease);
}
.topbar.is-hidden { transform: translateY(-100%); }
.topbar__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar__item svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.topbar a:hover { color: #FCFAF6; }
.topbar__group { display: flex; align-items: center; gap: 26px; }

/* -------------------------------------------------------------- header --- */

.header {
  position: fixed;
  inset: var(--topbar-h) 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(251, 249, 245, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), height .3s var(--ease);
}
.header.is-scrolled {
  top: 0;                 /* topbar gizlenince header yukarı yapışır */
  height: var(--header-h-scrolled);
  border-bottom-color: var(--line);
  background: rgba(251, 249, 245, .95);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Logo kilidi: ikon + iki satır metin */
.brand { display: flex; align-items: center; gap: 13px; }
.brand__mark { width: 40px; height: 40px; object-fit: contain; transition: width .3s var(--ease); }
.header.is-scrolled .brand__mark { width: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink);
}
.brand__sub {
  font-size: .565rem;
  font-weight: 500;
  letter-spacing: .175em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 5px;
}

/* Menü */
.nav { display: flex; align-items: center; gap: 34px; }
.nav__link {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink-soft);
  padding: 6px 0;
  transition: color .22s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .28s var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.header__cta { display: inline-flex; }

/* Hamburger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobil açılır menü */
.mobile-nav {
  position: fixed;
  /* Menünün üst kenarı header'ın GERÇEK alt kenarına yapışmalı.
     --nav-alt, sayfa kaydırıldığında aşağıdaki kardeş seçici ile güncellenir. */
  top: var(--nav-alt, var(--nav-total));
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 24px 28px;
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s var(--ease);
  max-height: calc(100vh - var(--nav-alt, var(--nav-total)));
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

/* BUG DÜZELTMESİ: Sayfa kaydırılınca üst şerit gizlenir ve header 84px'ten
   70px'e inip en tepeye yapışır. Menü ise sabit 122px'ten başlıyordu; arada
   52px'lik saydam boşluk kalıyor ve menü havada asılı görünüyordu.
   (Yalnızca 641–1080px genişlikte, yani tablet ve yatay telefonda görülüyordu;
   telefonda üst şerit gizli olduğu için fark edilmemişti.)
   .mobile-nav dört HTML dosyasında da .header'dan hemen sonra geldiği için
   kardeş seçici (~) güvenle kullanılabilir. */
.header.is-scrolled ~ .mobile-nav { --nav-alt: var(--header-h-scrolled); }

/* Mobil menü açıkken arkadaki sayfa kaymasın.
   Yalnızca overflow:hidden iOS Safari'de yetmiyor; gövdeyi sabitleyip
   kaydırma konumunu js/main.js'te saklıyor, kapanışta geri veriyoruz.
   NOT: Bu kilit yalnızca menü içindir — giriş ekranına bilerek konmamıştır
   (JavaScript çalışmazsa sayfa kilitli kalırdı, aşağıdaki nota bak). */
html.menu-acik { overflow: hidden; }
html.menu-acik body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.mobile-nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}
.mobile-nav a.is-active { color: var(--accent-text); }
.mobile-nav .btn { width: 100%; justify-content: center; margin-top: 22px; }

/* ------------------------------------------------------- EPS deseni --- */
/* Logodaki daire motifinden türetilmiş dekoratif zemin */

.bead-pattern {
  background-image: radial-gradient(circle, rgba(168, 118, 62, .17) 1.6px, transparent 1.7px);
  background-size: 20px 20px;
}
.bead-pattern--dark {
  background-image: radial-gradient(circle, rgba(245, 240, 231, .12) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
}

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  padding-top: calc(var(--nav-total) + 52px);
  padding-bottom: 62px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(168, 118, 62, .13) 1.6px, transparent 1.7px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 78% 42%, #000 12%, transparent 72%);
  mask-image: radial-gradient(ellipse 78% 62% at 78% 42%, #000 12%, transparent 72%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 52px;
  align-items: center;
}

.hero__title { margin-bottom: 18px; }
/* Başlık içinde vurgulanan kelime: italik değil, bakır renkli */
.hero__title em,
h2 em {
  font-style: normal;
  color: var(--accent);
}
.hero__text {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 26px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero__badge {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.hero__badge svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* Hero görsel kartı: logo + katmanlı levha illüstrasyonu */
.hero__visual { position: relative; }

/* ------------------------------------------------- video çerçevesi --- */
/* Videonun etrafında yavaşça dönen bakır ışık halkası + arkada yumuşak parlama.
   Hem anasayfa hero'sunda hem alttaki tanıtım bölümünde aynı çerçeve kullanılır. */
.video-shell {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  padding: 3px;                 /* halkanın görünen kalınlığı */
  border-radius: 22px;
  isolation: isolate;           /* ::before/::after kutunun içinde kalsın */
  transition: transform .45s var(--ease);
}
/* Kenarlık, döndürmek yerine gradyanı kaydırarak canlanıyor:
   rotate edilen kare kutunun köşelerinden taşıyordu, bu yöntemde taşma olmuyor. */
.video-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(168, 118, 62, .22) 0%,
    var(--accent) 22%,
    #EBD0A8 38%,
    rgba(168, 118, 62, .25) 55%,
    var(--accent) 78%,
    rgba(168, 118, 62, .22) 100%);
  background-size: 300% 300%;
  animation: halkaKay 8s ease-in-out infinite;
}
.video-shell::after {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -2;
  border-radius: 34px;
  background: radial-gradient(ellipse at center, rgba(168, 118, 62, .28), transparent 68%);
  filter: blur(14px);
  animation: halkaNefes 4.5s ease-in-out infinite;
}
.video-shell:hover { transform: translateY(-4px); }

@keyframes halkaKay {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes halkaNefes {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

/* Hareketi rahatsız edici bulan kullanıcılar için animasyonlar kapalı */
@media (prefers-reduced-motion: reduce) {
  .video-shell::before,
  .video-shell::after { animation: none; }
  .video-shell:hover { transform: none; }
}

/* Hero'daki tanıtım videosu — kaynak dikey (720×1280) çekildiği için kutu da 9:16.
   object-fit: contain: tam ekrana geçildiğinde görüntü kırpılmaz, sadece
   kenarlarda siyah bant kalır. cover kullanılsaydı görüntünün kenarları kesilirdi. */
/* Genişliği .video-shell belirliyor; burası sadece oranı ve görünümü verir.
   Oynatıcı 360 px'in altına inmiyor, yoksa ilerleme çubuğu kullanılamıyor. */
.hero__video {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 640px;
  border-radius: 19px;
  overflow: hidden;
  background: #16150F;
  box-shadow: 0 18px 44px rgba(31, 29, 26, .22);
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #16150F;
}
/* Logo kartı — kurumsal.html'deki tanıtım kutusunda kullanılıyor */
.hero__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px 30px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.hero__card img { width: min(230px, 70%); margin: 0 auto 24px; }
.hero__card-caption {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Logo kartının sağ üst köşesindeki kuruluş mührü.
   Zemin rengi --accent-btn: beyaz metinle 4,86:1, AA'yı geçiyor.
   (--accent kullanılsaydı 3,8:1 olurdu ve metin için yetersiz kalırdı.)
   Kartın dışına 10 px taşıyor; taşma dar ekranda kapatılıyor (aşağıda). */
.hero__card-muhur {
  position: absolute;
  top: -12px;
  right: -10px;
  z-index: 2;
  max-width: 116px;
  padding: 9px 13px 10px;
  background: var(--accent-btn);
  color: #fff;
  border-radius: var(--radius);
  font-size: .56rem;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 8px 20px rgba(31, 29, 26, .24);
}
.hero__card-muhur strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: none;
}

/* Logo kartının altındaki hızlı bilgi satırları */
.hero__card-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 18px auto 0;
  max-width: 360px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__card-facts div { background: var(--surface); padding: 12px 8px; }
.hero__card-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.1;
}
.hero__card-facts span {
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
/* --------------------------------------------------------- istatistik --- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.stat { padding: 24px 22px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat__value {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.stat__value span { color: var(--accent); font-size: 1.3rem; }
.stat__label {
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .03em;
}

/* ------------------------------------------------------------- ürünler --- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: #D8C9B2;
}
.product-card__figure {
  /* Ürün fotoğrafları 4:3 çekildi; kutuyu da aynı orana sabitleyince
     fotoğrafın altı kırpılmıyor, çizimli kartlarla da aynı yükseklikte kalıyor. */
  aspect-ratio: 4 / 3;
  min-height: 150px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.product-card__figure svg { width: 100%; height: 100%; }

/* Çizim yerine gerçek fotoğraf konulduğunda kutuyu tam doldurur */
.product-card__figure--photo { padding: 0; }
.product-card__figure--photo img {
  width: 100%;
  height: 100%;
  /* Kutu ile fotoğraf aynı oranda olduğu için contain hiçbir yeri kırpmaz */
  object-fit: contain;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__figure--photo img { transform: scale(1.05); }
.product-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.product-card__body h3 { margin-bottom: 6px; font-size: 1.16rem; }
.product-card__body p { font-size: .875rem; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.55; }

/* Kart içi mini teknik satırlar */
.product-card__rows { margin-bottom: 14px; }
.product-card__rows li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .8rem;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-soft);
}
.product-card__rows li b { color: var(--ink); font-weight: 600; text-align: right; }

.product-card__specs {
  margin-top: auto;
  min-height: 56px;   /* kartlardaki etiket satırlarını aynı hizada tutar */
  align-content: flex-start;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 5px 12px;
}

/* --------------------------------------------------------- özellikler --- */

.feature {
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.feature:hover { border-color: #D8C9B2; transform: translateY(-4px); }
.feature__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature__icon svg { width: 19px; height: 19px; }
.feature h3 { margin-bottom: 6px; font-size: 1.06rem; }
.feature p { font-size: .89rem; color: var(--ink-soft); margin: 0; line-height: 1.58; }

/* ----------------------------------------------- uygulama alanları --- */

.use-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.use-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 20px 0;
  border-bottom: 1px solid var(--line);
}
.use-item__no {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  min-width: 30px;
  padding-top: 2px;
}
.use-item h3 { margin-bottom: 4px; font-size: 1.05rem; }
.use-item p { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------ üretim süreci --- */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--line); }
.step__no {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
  opacity: .55;
}
.step h3 { margin-bottom: 4px; font-size: 1.08rem; }
.step p { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.58; }

/* -------------------------------------------------------------- tablo --- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .92rem; }
thead th {
  background: var(--bg-alt);
  text-align: left;
  padding: 16px 20px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FDFBF7; }
tbody td:first-child { color: var(--ink); font-weight: 500; }

.table-note {
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: 14px;
}

/* ----------------------------------------------------------- CTA bandı --- */

.cta {
  position: relative;
  background: var(--dark);
  color: #EFEAE0;
  border-radius: var(--radius);
  padding: 44px 44px;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245, 240, 231, .1) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000, transparent 70%);
}
.cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta h2 { color: #FCFAF6; margin-bottom: 12px; }
.cta p { color: rgba(239, 234, 224, .75); max-width: 520px; margin: 0; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------- iletişim --- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.info-item {
  display: flex;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.info-item:first-of-type { border-top: 1px solid var(--line); }
.info-item__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-item__icon svg { width: 19px; height: 19px; }
.info-item__label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}
.info-item__value { font-size: 1.02rem; color: var(--ink); font-weight: 500; }
/* Aynı blokta iki değer varsa (örn. iki telefon hattı) araya nefes payı.
   Sınıf eklemeye gerek kalmasın diye kardeş seçiciyle yapıldı. */
.info-item__value + .info-item__value { margin-top: 4px; }
/* Hover'da --accent DEĞİL --accent-text: --accent açık zeminde 3,75:1,
   metin için gereken 4,5:1'in altında kalıyor. --accent-text 5,74:1. */
.info-item__value a:hover { color: var(--accent-text); }
.info-item__note { font-size: .86rem; color: var(--ink-soft); margin-top: 3px; }

/* Form */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field label .req { color: var(--accent-text); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }

/* Odak görünürlüğü.
   Eskiden outline:none + çok soluk (%12) box-shadow vardı; Windows Yüksek
   Kontrast modunda box-shadow hiç çizilmediği için odak tamamen kayboluyordu.
   Artık gerçek bir outline var — her modda görünür. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 118, 62, .18);
}
/* :focus-visible desteklemeyen eski tarayıcılar için yedek */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
}

/* Tüm etkileşimli öğelerde tek tip odak halkası.
   :focus-visible kullanılıyor: fareyle tıklamada çıkmaz, klavyede çıkar. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Koyu zeminli bölümlerde (footer, CTA) bakır halka okunmaz — açık renk kullan */
.footer a:focus-visible,
.cta a:focus-visible,
.section--dark a:focus-visible {
  outline-color: #F5F0E7;
}
.field input.has-error,
.field textarea.has-error,
.field select.has-error { border-color: var(--hata); background: #FDF6F5; }
.field__error {
  display: none;
  font-size: .79rem;
  color: var(--hata);
  margin-top: 6px;
}
.field__error.is-visible { display: block; }

/* Mesaj alanı karakter sayacı */
.field__hint {
  font-size: .76rem;
  color: var(--ink-faint);
  margin-top: 6px;
  text-align: right;
}

/* KVKK onay kutusu.
   Metin alanı stilleri (tam genişlik, dolgu, kenarlık) onay kutusuna uymaz;
   bu yüzden burada sıfırlanıyor. */
.field--onay { margin-top: 4px; }
.onay-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: 0;
  cursor: pointer;
  margin-bottom: 0;
}
.field--onay input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent-btn);
  cursor: pointer;
  flex-shrink: 0;
}
/* Onay verilmediğinde kutunun kenarı kırmızıya döner (zemin boyanmaz) */
.field--onay input[type="checkbox"].has-error {
  outline: 2px solid var(--hata);
  outline-offset: 2px;
  background: none;
}

.form-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-hint { font-size: .82rem; color: var(--ink-faint); margin-top: 16px; text-align: center; }

/* Bağlantı yalnızca renkle ayırt edilmesin: renk körü kullanıcılar için
   altı çizili olmalı. Metin rengi --accent-text çünkü --accent 3.8:1 ile
   metin için yetersizdi. */
.link-inline {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-inline:hover { color: var(--ink); }

/* Gönderim sonucu bildirimi.
   DİKKAT: Burada display:none KULLANILMAZ. Bu eleman bir <output> ve ekran
   okuyucuya canlı bildirim yapar; tamamen gizlenirse erişilebilirlik ağacından
   çıkar ve içine yazılan metin HİÇ DUYURULMAZ. Bu yüzden yükseklik ve
   saydamlıkla saklanıyor. */
.form-status {
  display: block;
  margin-top: 18px;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  transition: max-height .3s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
}
.form-status.is-visible {
  max-height: 240px;
  padding: 14px 18px;
  opacity: 1;
  border-color: #E2CFB2;
}
/* Hata durumunda (örn. mesaj WhatsApp için çok uzun) kırmızı görünüm */
.form-status--hata {
  background: #FDF6F5;
  color: #8E2A1F;
}
.form-status--hata.is-visible { border-color: #E8BDB6; }

/* Klavye kullanıcıları için menüyü atlayıp içeriğe geçme bağlantısı.
   Normalde ekran dışında; Tab ile odaklanınca görünür hâle gelir. */
.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--ink);
  color: #FCFAF6;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------------------- footer --- */

.footer {
  background: var(--dark);
  color: rgba(233, 228, 218, .72);
  padding: 72px 0 0;
  font-size: .92rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 46px;
  padding-bottom: 52px;
}
/* aspect-ratio logonun gerçek oranından (830x716) geliyor: görsel inmeden önce
   yerini ayırır, böylece footer yüklenirken aşağı kaymaz (CLS). */
.footer__logo { width: 132px; aspect-ratio: 830 / 716; margin-bottom: 22px; opacity: .96; }

/* Ölçüldü: koyu zemin üzerinde 5.52:1 — AA'yı geçiyor, dokunulmadı. */
.footer p { color: rgba(233, 228, 218, .6); font-size: .9rem; line-height: 1.75; }

/* Eskiden <h5> etiketiydi; sayfada h2'den h5'e atlanıyordu ve ekran okuyucu
   kullanıcısı "bir bölüm mü kaçırdım?" hissi yaşıyordu. Etiket h2 oldu,
   görsel boyut bu sınıfla korunuyor. */
.footer__title {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FCFAF6;
  margin: 0 0 20px;
}
.footer__links li { margin-bottom: 11px; }
/* Ölçüldü: koyu zemin üzerinde 6.70:1 — AA'yı geçiyor, dokunulmadı. */
.footer__links a { color: rgba(233, 228, 218, .68); transition: color .2s var(--ease); }
/* --accent koyu zeminde yalnızca 4.17:1 veriyordu (metin için 4.5 gerekli).
   Koyu zeminlere özel açık bakır tonu kullanılıyor: 5.00:1. */
.footer__links a:hover { color: var(--accent-light); }
.footer__contact li {
  margin-bottom: 13px;
  color: rgba(233, 228, 218, .68);
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.footer__contact svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
/* Footer koyu zeminde: --accent 4,17:1 ile yetersiz, --accent-light 5,00:1. */
.footer__contact a:hover { color: var(--accent-light); }

.footer__bottom {
  border-top: 1px solid rgba(233, 228, 218, .12);
  padding: 24px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(233, 228, 218, .62);
}

/* Video metin özeti.
   Videoda konuşma olmadığı için altyazı dosyası yerine içeriği anlatan metin
   veriliyor. Videoyu izleyemeyen (görme engelli, sesi kapalı, mobil veri
   tasarrufu yapan) kullanıcı ne anlatıldığını buradan öğrenir. Aynı zamanda
   arama motorlarına video içeriğini anlatır. */
.video-ozet {
  margin-top: 14px;
  font-size: .84rem;
  line-height: 1.62;
  color: var(--ink-faint);
}

/* ------------------------------------------------------- WhatsApp FAB --- */

.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;        /* WhatsApp marka yeşili — bilerek korunuyor */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
  transition: transform .25s var(--ease);

  /* Marka yeşili krem sayfa zeminine karşı yalnızca 1.89:1 kontrast veriyor;
     az gören kullanıcı butonu zeminden ayırt edemiyordu. Koyu yeşil kenarlık
     butonun sınırını 4.12:1'e çıkarır (WCAG 1.4.11 için gereken 3:1'in üstü)
     ve marka rengini bozmaz. */
  border: 2px solid #0E8C43;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 29px; height: 29px; }

/* -------------------------------------------------------- sayfa başlığı --- */

.page-hero {
  position: relative;
  padding: calc(var(--nav-total) + 46px) 0 44px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(168, 118, 62, .15) 1.6px, transparent 1.7px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 52% 120% at 92% 50%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 52% 120% at 92% 50%, #000, transparent 72%);
}
.page-hero__inner { position: relative; max-width: 720px; }
.page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); margin-bottom: 18px; }
.page-hero p { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }

.breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: .8rem;
  color: var(--ink-faint);
  margin-bottom: 22px;
  letter-spacing: .04em;
}
.breadcrumb a:hover { color: var(--accent-text); }   /* 3,75:1 → 5,74:1 */

/* ------------------------------------------------------- ürün detayı --- */

.product-detail {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 44px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}
.product-detail:last-of-type { border-bottom: none; }
/* Ters yerleşimde görsel sağa geçtiği için sütun genişlikleri de yer değiştirir */
.product-detail--flip { grid-template-columns: 1.2fr .8fr; }
.product-detail--flip .product-detail__figure { order: 2; }
.product-detail__figure {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  /* Uzun teknik listeler kaydırılırken ürün görseli ekranda kalsın */
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.product-detail__figure svg { width: 100%; max-width: 320px; height: auto; }

/* Fotoğraflı ürün kutusu */
/* Metin aralarına giren serbest ürün fotoğrafı (çerçeve + altyazı) */
.media-figure {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #EDECEA;
}
.media-figure img { width: 100%; height: auto; display: block; }
.media-figure figcaption {
  padding: 12px 16px;
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Fotoğraf 4:3 çekildiği için kutuyu da aynı orana sabitliyoruz:
   böylece ölçü çizgileri kırpılmadan, boşluk da kalmadan tam oturur. */
.product-detail__figure--photo {
  padding: 0;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 4 / 3;
  background: #EDECEA;
}
.product-detail__figure--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-detail h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: 8px; }
.product-detail .eyebrow { margin-bottom: 12px; }

.spec-list { margin: 18px 0 20px; }
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .9rem;
}
.spec-list li span:first-child { color: var(--ink-soft); }
.spec-list li span:last-child { color: var(--ink); font-weight: 500; text-align: right; }

.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 7px;
  font-size: .91rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 13px;
  height: 7px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

.notice {
  display: flex;
  gap: 12px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: .875rem;
  line-height: 1.55;
  color: #6E4A22;
  margin-top: 18px;
}
.notice svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; }
.notice p { margin: 0; }

/* --------------------------------------------------------------- misc --- */

/* minmax(0,1fr): içindeki geniş tablo sütunu şişirip sayfayı yatay kaydırmasın */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.quote-block {
  border-left: 3px solid var(--accent);
  padding-left: 26px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--ink);
}

.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
/* Başlık metni olduğu için --accent-text: --accent (3.8:1) metin için yetersizdi */
.value-card h3 { color: var(--accent-text); margin-bottom: 7px; font-size: 1.05rem; }
.value-card p { font-size: .89rem; color: var(--ink-soft); margin: 0; line-height: 1.58; }

.cert-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cert-item svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.cert-item strong { display: block; font-size: .98rem; }
.cert-item span { font-size: .84rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- SSS --- */
/* <details>/<summary> ile kurulu — JavaScript kapalı olsa da açılıp kapanır */

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }

.faq {
  border-bottom: 1px solid var(--line);
}
.faq:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }   /* 3,75:1 → 5,74:1 */
.faq summary::before {
  content: "+";
  flex-shrink: 0;
  width: 20px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--accent);
  transition: transform .25s var(--ease);
}
.faq[open] summary::before { content: "–"; }
.faq__body {
  padding: 0 0 18px 34px;
  font-size: .89rem;
  color: var(--ink-soft);
  line-height: 1.62;
}
.faq__body p { margin-bottom: .7em; }

/* --------------------------------------------------- sipariş süreci --- */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.process__item {
  background: var(--surface);
  padding: 24px 22px;
  position: relative;
}
.process__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.process__item h3 { font-size: 1.02rem; margin-bottom: 5px; }
.process__item p { font-size: .86rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* ------------------------------------------- katman şeması (mantolama) --- */

.layers { display: grid; gap: 8px; }
.layer {
  display: grid;
  /* minmax(0,1fr): uzun açıklama metninin sütunu şişirip taşmasını engeller */
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.layer__no {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
}
.layer__name { font-size: .93rem; font-weight: 600; color: var(--ink); }
.layer__desc { font-size: .84rem; color: var(--ink-soft); display: block; font-weight: 400; margin-top: 1px; }
.layer__tag {
  font-size: .72rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
}
.layer--highlight { border-left-width: 5px; background: #FEFCF8; }

/* -------------------------------------------------------- video alanı --- */

.video-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 16 / 9;
}
.video-frame video,
.video-frame iframe { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; }
.video-frame--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-style: dashed;
  border-color: #D8CDB9;
  color: var(--ink-faint);
  text-align: center;
  padding: 24px;
}
.video-frame--empty svg { width: 42px; height: 42px; color: var(--accent); opacity: .65; }
.video-frame--empty strong { color: var(--ink); font-size: .98rem; font-weight: 600; }
.video-frame--empty span { font-size: .85rem; max-width: 380px; }

/* ---------------------------------------- koyu zeminli video bölümü --- */
.video-band { background: var(--dark); color: #fff; }
.video-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 366px);
  gap: 56px;
  align-items: center;
}
.video-band h2 { color: #fff; }
.video-band .eyebrow { color: #D6A96A; }
.video-band .lead,
.video-band p { color: rgba(255, 255, 255, .74); }
.video-band__points { margin-top: 26px; display: grid; gap: 12px; }
.video-band__points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .93rem;
  color: rgba(255, 255, 255, .8);
}
.video-band__points svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: #D6A96A;
}
/* Koyu zeminde parlama daha güçlü durabilir */
.video-band .video-shell::after { background: radial-gradient(ellipse at center, rgba(214, 169, 106, .34), transparent 68%); }

/* Video ile altındaki özet metnini tek ızgara hücresinde tutan sarmalayıcı.
   Özet metni .video-shell'in DIŞINDA kalmalı: içine konursa çerçevenin bakır
   gradyanı (::before) metnin arkasına geçiyor, metin 360 px'e sıkışıyor ve
   fareyle üstüne gelince :hover bütün kutuyu yukarı kaldırıyordu.
   min-width: 0 ızgara hücresinin uzun kelimelerde taşmasını engelliyor. */
.video-kolon { min-width: 0; }
.video-kolon .video-ozet { margin-top: 16px; }

/* --------------------------------------------------- terim sözlüğü --- */

.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
.glossary__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.glossary__term {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 600;
}
.glossary__desc { font-size: .87rem; color: var(--ink-soft); line-height: 1.55; }

/* ------------------------------------------------- fotoğraf galerisi --- */
/* Gerçek fotoğraflar gelene kadar yer tutucu olarak duruyor */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }

/* Fotoğraf yerleştirilmemiş kutu */
.gallery__item--empty {
  border-style: dashed;
  border-color: #D8CDB9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  color: var(--ink-faint);
  font-size: .82rem;
}
.gallery__item--empty svg { width: 26px; height: 26px; color: #C9BCA6; }

/* --------------------------------------------------- hizmet bölgesi --- */

.region-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.region-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 100px;
  padding: 9px 20px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
}
/* Dolu zemin + beyaz metin: buton rengiyle aynı kural geçerli.
   --accent beyaz metinle 3.94:1 veriyordu, --accent-btn 4.9:1 veriyor. */
.region-chip--home {
  background: var(--accent-btn);
  border-color: var(--accent-btn);
  color: #fff;
}
/* İl rozetlerinin altındaki açıklama: liste "sadece bunlar" diye okunmasın */
.region-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink-soft);
}
.region-note svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}
.region-note strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- harita --- */

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  line-height: 0;
}
.map-frame iframe { width: 100%; height: 440px; border: 0; display: block; filter: grayscale(.25); }

/* Scroll ile beliren öğeler */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  /* Emniyet: JavaScript bir hata verip çalışmazsa içerik gizli kalmasın.
     Normalde IntersectionObserver çok daha önce .is-visible ekler. */
  animation: revealEmniyet .01s linear 8s forwards;
}
.reveal.is-visible { opacity: 1; transform: none; animation: none; }

@keyframes revealEmniyet {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------- yardımcı sınıflar --- */
/* NEDEN VAR: Bu değerler eskiden HTML içinde style="" niteliği olarak yazılıydı
   (39 yerde). Satır içi stil, güvenlik politikasında (CSP) 'unsafe-inline' izni
   vermeyi zorunlu kılıyordu; buraya taşınınca o izne gerek kalmadı.

   İsimler bilerek piksel değeri taşıyor: amaç tasarımı DEĞİŞTİRMEK değil,
   mevcut görünümü birebir korurken stilleri HTML'den ayırmak. Yeni bir aralık
   gerekiyorsa uygun bir bileşen sınıfı yazmak bunlara eklemekten iyidir. */

.u-ortala   { text-align: center; }
.u-golgesiz { box-shadow: none; }

.u-mt-14 { margin-top: 14px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-30 { margin-top: 30px; }
.u-mt-34 { margin-top: 34px; }
.u-mt-44 { margin-top: 44px; }
.u-mt-56 { margin-top: 56px; }
.u-mt-72 { margin-top: 72px; }

.u-mb-6  { margin-bottom: 6px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-22 { margin-bottom: 22px; }
.u-mb-26 { margin-bottom: 26px; }

.u-pt-0 { padding-top: 0; }
.u-pb-0 { padding-bottom: 0; }
.u-py-0 { padding-block: 0; }

/* İki kolonlu bölümlerde kolonlar üstten hizalanır (ortalanmaz) */
.split--top { align-items: start; }

/* Ana h2'den küçük ikincil bölüm başlığı */
.h2--kucuk { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

/* Normal punto lead paragrafı */
.lead--kucuk { font-size: 1rem; }

/* Kalınlık rehberi tablosu dar ekranda sıkışmasın, yatay kaysın */
.table--genis { min-width: 520px; }

/* Notice bloğu bir kolonun en üstünde duruyorsa üst boşluğu olmasın */
.notice--ustte { margin-top: 0; align-items: flex-start; }

/* İletişim sayfasındaki 2x2 rakam ızgarası */
.stats--2 { grid-template-columns: repeat(2, 1fr); }
.stat--alt-cizgi  { border-bottom: 1px solid var(--line); }
.stat--son-kolon  { border-right: none; }

/* Form kartındaki açıklama satırı */
.form-card__aciklama {
  font-size: .92rem;
  color: var(--ink-soft);
  margin-bottom: 26px;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .topbar__group { gap: 18px; }
  .topbar__item--hide-md { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero__visual { max-width: 460px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .use-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Dar ekranda video metnin altına iner */
  .video-band__grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .product-detail,
  .product-detail--flip { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 48px 0; }
  .product-detail--flip .product-detail__figure { order: 0; }
  .product-detail__figure { position: static; }   /* dar ekranda sabitleme kapalı */
  .cta { padding: 36px 26px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .glossary { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 640px) {
  :root { --header-h: 72px; --topbar-h: 0px; }
  .topbar { display: none; }   /* telefonda üst şerit yer kaplamasın */
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .process { grid-template-columns: minmax(0, 1fr); }
  .layer { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .layer__tag { grid-column: 2; justify-self: start; margin-top: 4px; }
  .glossary__item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .map-frame iframe { height: 320px; }
  .region-chip { font-size: .82rem; padding: 8px 16px; }
  body { font-size: 16px; }
  .section { padding: 68px 0; }
  .section--tight { padding: 52px 0; }
  .container { padding-inline: 20px; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .use-list { grid-template-columns: minmax(0, 1fr); }
  .use-item { padding-right: 0; }
  .hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 68px; }
  .hero__card { padding: 40px 26px 32px; }
  /* Dar ekranda mühür kartın dışına taşmasın: taştığında sayfa yatay
     kaydırılabilir hâle geliyordu. */
  .hero__card-muhur { top: 10px; right: 10px; max-width: 104px; }
  .brand__name { font-size: 1.35rem; letter-spacing: .13em; }
  .brand__sub { font-size: .5rem; letter-spacing: .14em; }
  .brand__mark { width: 34px; height: 34px; }
  .form-card { padding: 26px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step__no { font-size: 1.9rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .section-head { margin-bottom: 38px; }
  .wa-fab { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}