/* ==========================================================================
   Akafor Membran Sistemleri — stil sayfası
   Tek sabit açık tema. Kurumsal bir tanıtım sayfası her ziyaretçide aynı
   görünmeli; bu yüzden koyu tema varyantı yok.
   ========================================================================== */

/* ---------- 1. Tasarım token'ları ---------- */
:root{
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F7F7;
  --ink:#152426;
  --ink-soft:#54666A;
  --ink-faint:#667578; /* beyaz üstünde 4.79:1 — AA sınırının üstünde */
  --accent:#0E7C93;
  --accent-deep:#0A5C6D;
  --accent-soft:#EAF4F5;
  --copper:#A5672B;
  --copper-soft:#F5E8D6;
  --line:#E4E9E9;
  --line-strong:#C9D3D3;

  --shadow-sm:0 1px 2px rgba(16,38,44,0.06);
  --shadow-md:0 12px 32px rgba(16,38,44,0.10);

  --radius-sm:2px;
  --radius-pill:999px;

  /* Ölçülü kullanılan koyu bant (hero scrim, "Neden Akafor", footer) */
  --band-bg:#0F2126;
  --band-fg:#FFFFFF;
  --band-fg-soft:#AEC0C2;
  --band-accent:#5BC7DD;
  --band-line:rgba(255,255,255,0.14);

  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --header-h:76px;
  --wrap-max:1180px;
  --wrap-pad:32px;
  --tap:44px; /* erişilebilir minimum dokunma hedefi */
  /* Hero başlığın altına kaydığı için gereken tam başlık yüksekliği */
  --header-total:calc(var(--header-h) + 1px + env(safe-area-inset-top, 0px));
}

/* ---------- 2. Reset / temel ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* mobilde yatay taşmaya karşı emniyet */
}

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3{
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}

.mono{ font-family:var(--font-mono); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Sabit başlık, bölüm bağlantılarının üstünü kapatmasın */
[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:0.001ms !important;
    /* aşamalı hamburger ve kademeli menü girişleri gecikmelerini de bırakmalı,
       yoksa süre sıfırlansa bile hareket geç başlar */
    transition-delay:0ms !important;
  }
}

/* Scroll ile beliren bloklar. Gizleme yalnızca html.js altında geçerli:
   JS çalışmazsa hiçbir şey gizlenmez, sayfa olduğu gibi görünür. */
html.js [data-reveal]{
  opacity:0;
  translate:0 16px;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),
             translate .6s cubic-bezier(.22,1,.36,1);
}
html.js [data-reveal].is-revealed{ opacity:1; translate:0 0; }

/* Hareket azaltma isteniyorsa içerik doğrudan yerinde dursun */
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{ opacity:1; translate:none; transition:none; }
}

.skip-link{
  position:absolute; left:12px; top:-100px; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:var(--radius-sm);
  font-size:0.9rem; font-weight:600; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

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

/* ---------- 3. Başlık / navigasyon ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
  transition:box-shadow .28s ease, background-color .28s ease, border-color .28s ease;
}
/* sayfa kaydırılınca başlık içerikten ayrışsın */
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(16,38,44,0.07); }

/* ---- Hero üzerindeyken: saydam başlık, açık renkli içerik ----------------
   Koruyucu gradyan ayrı bir katmanda: opaklığı animasyona girebiliyor, böylece
   duruma geçiş yumuşak oluyor (background-image geçişi animasyona girmez).
   Kontrast garantisi fotoğrafa değil bu gradyana bağlı — hero görseli daha
   açık bir şeyle değiştirilirse de menü okunur kalır. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,14,18,0.55), rgba(5,14,18,0));
  opacity:0; transition:opacity .28s ease;
}
.site-header.is-over-hero{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
}
.site-header.is-over-hero::before{ opacity:1; }

.site-header.is-over-hero .nav a:not(.btn){ color:rgba(255,255,255,0.88); }
.site-header.is-over-hero .nav a:not(.btn):hover,
.site-header.is-over-hero .nav a:not(.btn).is-current{ color:#fff; }
.site-header.is-over-hero .nav a:not(.btn)::after{ background:var(--band-accent); }
.site-header.is-over-hero .lang-opt{ color:rgba(255,255,255,0.62); }
.site-header.is-over-hero .lang-opt.is-active{ color:var(--band-accent); }
.site-header.is-over-hero .lang-sep{ color:rgba(255,255,255,0.35); }
.site-header.is-over-hero .nav-toggle{ border-color:rgba(255,255,255,0.42); }
.site-header.is-over-hero .nav-toggle::before,
.site-header.is-over-hero .nav-toggle::after,
.site-header.is-over-hero .nav-toggle-bars{ background:#fff; }
.site-header.is-over-hero .nav-toggle:hover{ border-color:var(--band-accent); }
.site-header.is-over-hero .nav-toggle:hover::before,
.site-header.is-over-hero .nav-toggle:hover::after,
.site-header.is-over-hero .nav-toggle:hover .nav-toggle-bars{ background:var(--band-accent); }
.header-inner{
  max-width:var(--wrap-max); margin:0 auto; padding:0 var(--wrap-pad);
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:24px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ height:46px; width:auto; }

.nav{ display:flex; gap:28px; }
.nav a:not(.btn){
  position:relative;
  /* Menü bağlantıları 1.3x: 0.92rem -> 1.196rem. Mobil panelde ≤980px
     kırılımındaki 1.05rem geçersiz kılması geçerli kalıyor. */
  font-size:1.196rem; font-weight:500; color:var(--ink-soft);
  padding:8px 0;
  white-space:nowrap;
  transition:color .18s ease;
}
/* Alt çizgi soldan açılır, imleç ayrılınca sağa doğru toplanır. */
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); border-radius:2px;
  scale:0 1; transform-origin:right center;
  transition:scale .24s cubic-bezier(.4,0,.2,1);
}
.nav a:not(.btn):hover,
.nav a:not(.btn).is-current{ color:var(--ink); }
.nav a:not(.btn):hover::after,
.nav a:not(.btn).is-current::after{ scale:1 1; transform-origin:left center; }

.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }

.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-height:var(--tap); padding:0 8px;
  font-family:var(--font-mono); font-size:0.82rem; font-weight:600;
  background:none; border:none; cursor:pointer; color:var(--ink-faint);
}
.lang-opt{ padding:0 1px; color:var(--ink-faint); transition:color .15s ease; }
.lang-opt.is-active{ color:var(--accent); }
.lang-sep{ color:var(--line-strong); }

/* Hamburger — masaüstünde gizli, ≤980px'te görünür.
   Üç çubuk da butonun kardeş çocuğu: üst ve alt ::before/::after, orta ise
   .nav-toggle-bars span'i. Orta çubuğu soldurmak diğerlerini etkilemesin diye
   iç içe değil yan yana kuruldu.
   Animasyon iki aşamalı: önce çubuklar ortada buluşur, sonra çarpıya döner.
   Kapanışta sıra tersine işler — aşamalar transition-delay ile kurgulanıyor. */
.nav-toggle{
  display:none;
  position:relative;
  width:var(--tap); height:var(--tap);
  align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:transparent; cursor:pointer; padding:0;
  transition:border-color .2s ease, scale .12s ease;
}
.nav-toggle:hover{ border-color:var(--accent); }
.nav-toggle:active{ scale:0.93; }

.nav-toggle::before,
.nav-toggle::after,
.nav-toggle-bars{
  position:absolute;
  left:calc(50% - 9px); top:calc(50% - 1px);
  width:18px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:background-color .2s ease;
}
.nav-toggle::before,
.nav-toggle::after{ content:""; }

.nav-toggle:hover::before,
.nav-toggle:hover::after,
.nav-toggle:hover .nav-toggle-bars{ background:var(--accent); }

/* --- kapalı durum: aynı zamanda KAPANIŞ geçişini tarif eder --------------- */
/* önce çarpı çözülür (rotate, gecikmesiz), sonra çubuklar yerine kayar */
.nav-toggle::before{ translate:0 -6px; }
.nav-toggle::after{  translate:0 6px; }
.nav-toggle::before,
.nav-toggle::after{
  transition:background-color .2s ease,
             translate .18s cubic-bezier(.4,0,.2,1) .2s,
             rotate .2s cubic-bezier(.4,0,.2,1) 0s;
}
.nav-toggle-bars{
  transition:background-color .2s ease,
             scale .18s cubic-bezier(.4,0,.2,1) .2s,
             opacity .14s linear .24s;
}

/* --- açık durum: AÇILIŞ geçişini tarif eder ------------------------------ */
/* önce çubuklar ortada buluşur, sonra hafif bir aşımla çarpıya döner */
body.nav-open .nav-toggle::before{ translate:0 0; rotate:45deg; }
body.nav-open .nav-toggle::after{  translate:0 0; rotate:-45deg; }
body.nav-open .nav-toggle::before,
body.nav-open .nav-toggle::after{
  transition:background-color .2s ease,
             translate .18s cubic-bezier(.4,0,.2,1) 0s,
             rotate .26s cubic-bezier(.66,-0.25,.3,1.28) .18s;
}
body.nav-open .nav-toggle-bars{
  scale:0.15 1;
  opacity:0;
  transition:background-color .2s ease,
             scale .18s cubic-bezier(.4,0,.2,1) 0s,
             opacity .12s linear 0s;
}

.nav-mobile-extras{ display:none; }

/* ---------- 4. Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap);
  padding:12px 22px; font-size:0.92rem; font-weight:600;
  border-radius:var(--radius-sm); border:1px solid transparent;
  white-space:nowrap; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease,
             translate .18s ease, box-shadow .22s ease;
}
.btn:active{ translate:0 0; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{
  background:var(--accent-deep);
  translate:0 -2px;
  box-shadow:0 8px 20px rgba(14,124,147,0.25);
}
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); translate:0 -2px; }
.btn-block{ width:100%; }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  /* Başlık hero'nun üzerine biniyor: hero yukarı çekilip kaybettiği yeri
     içerik dolgusundan geri alıyor. Yükseklik artık y=0'dan ölçüldüğü için
     %85 — altındaki bölümden yine bir şerit görünüyor. */
  margin-top:calc(-1 * var(--header-total));
  min-height:88vh;
  min-height:88svh;
  display:flex; align-items:center;
}
.hero-media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:radial-gradient(120% 100% at 15% 20%, #123642 0%, var(--band-bg) 55%, #060f13 100%);
}
.hero-media img,
.hero-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:64% 48%;
  animation:heroSlowZoom 28s ease-in-out infinite alternate;
}
.hero-media video{ display:none; }
.hero-media video.is-ready{ display:block; }

@keyframes heroSlowZoom{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.06); }
}

@keyframes navItemIn{
  from{ opacity:0; translate:0 10px; }
  to{ opacity:1; translate:0 0; }
}

.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(112deg, rgba(5,14,18,0.95) 0%, rgba(5,14,18,0.88) 32%, rgba(5,14,18,0.56) 58%, rgba(5,14,18,0.3) 100%);
}

.accent-word{ color:var(--band-accent); }

.hero-content{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--wrap-max); margin:0 auto;
  padding:96px var(--wrap-pad);
  padding-top:calc(96px + var(--header-total));
}
.hero-content h1{
  color:var(--band-fg);
  font-size:clamp(2rem,4.3vw,4.6rem);
  line-height:1.06;
  max-width:17ch;
}
.hero-content .lede{
  margin:22px 0 0; max-width:52ch;
  color:var(--band-fg-soft); font-size:clamp(1rem, 1.1vw, 1.2rem);
}
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-actions .btn-ghost{ color:var(--band-fg); border-color:rgba(244,248,247,0.4); }
.hero-actions .btn-ghost:hover{ border-color:var(--band-accent); color:var(--band-accent); }

/* ---------- 6. Bölüm iskeleti ---------- */
.section{ padding:96px 0; border-bottom:1px solid var(--line); }
.section--flush{ border-bottom:none; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.55rem,2.8vw,2.35rem); line-height:1.1; }
.section-head--tight h2{ margin-bottom:18px; }

/* ---------- 7. Çözümler (künye listesi) ---------- */
/* Bilinçli olarak kart ızgarası DEĞİL: "Neden Akafor" bölümü de 3x2 hairline
   ızgara ve ikisi aynı bileşen gibi okunuyordu. Liste hem o tekrarı kırıyor
   hem de hemen altındaki fotoğraf ızgarasıyla karşıtlık kuruyor.
   Satır düzeni: [ikon] [başlık] [açıklama] — sarmalayıcı div gerekmesin diye
   üç ayrı ızgara sütunu, HTML'deki mevcut sıra korunuyor. */
.solution-card{
  display:grid;
  grid-template-columns:auto minmax(0, clamp(10rem, 22vw, 17rem)) minmax(0, 1fr);
  align-items:center;
  gap:0 22px;
  padding:26px 10px;
  border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
/* Üst çizgi ilk satırın kendisinde: kademeli girişte kapsayıcıya ait yalnız
   bir çizgi havada asılı kalmasın. */
.solution-card:first-child{ border-top:1px solid var(--line); }
.solution-card:hover{ background:var(--surface-2); }
.solution-icon{
  width:34px; height:34px; border-radius:var(--radius-sm); background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
  transition:background .2s ease, color .2s ease;
}
.solution-card:hover .solution-icon{ background:var(--accent); color:#fff; }
.solution-card h3{ font-size:1.3rem; font-weight:700; line-height:1.25; }
.solution-card p{ margin:0; color:var(--ink-soft); font-size:0.95rem; max-width:62ch; }

/* ---------- 8. Sektörler ---------- */
.sector-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sector-card{
  position:relative; aspect-ratio:4/5;
  border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sector-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.sector-card-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  transition:scale .55s cubic-bezier(.22,1,.36,1);
}
.sector-card:hover .sector-card-img{ scale:1.07; }
.sector-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(6,16,20,0.92) 0%, rgba(6,16,20,0.5) 48%, rgba(6,16,20,0.05) 78%);
}
.sector-card-icon{
  position:absolute; top:14px; left:14px; z-index:2;
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:rgba(244,248,247,0.16); border:1px solid rgba(244,248,247,0.28);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.sector-card-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px; }
.sector-card-overlay h3{ font-size:1rem; font-weight:700; color:#F4F8F7; margin-bottom:5px; }
.sector-card-overlay p{ margin:0; font-size:0.82rem; color:rgba(244,248,247,0.82); }

/* ---------- 9. Ürünler ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  padding:26px 22px; display:flex; flex-direction:column; gap:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.product-tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em;
  color:var(--accent-deep); background:var(--accent-soft);
  padding:4px 9px; border-radius:var(--radius-pill);
}
.product-card h3{ font-size:1.05rem; font-weight:700; }
.product-card p{ margin:0; font-size:0.86rem; color:var(--ink-soft); flex-grow:1; }

/* ---------- 10. Neden Akafor (koyu bento bandı) ---------- */
.why-section{ background:var(--band-bg); border-bottom-color:transparent; }
.why-section .section-head h2{ color:var(--band-fg); }
.why-section .section-head p{ color:var(--band-fg-soft); max-width:56ch; }
.why-bento{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--band-line); border:1px solid var(--band-line); margin-top:44px;
}
.why-bento-item{
  background:var(--band-bg); padding:30px 26px;
  transition:background .18s ease;
}
.why-bento-item:hover{ background:color-mix(in srgb, var(--band-bg) 88%, white); }
.why-bento-item h3{ font-size:0.98rem; font-weight:700; color:var(--band-fg); margin-bottom:6px; }
.why-bento-item p{ margin:0; color:var(--band-fg-soft); font-size:0.86rem; }

/* ---------- 11. Üretim ---------- */
.facility-photo{
  border-radius:var(--radius-sm); overflow:hidden; margin-bottom:44px;
  aspect-ratio:21/8; background:var(--surface-2);
}
.facility-photo img{ width:100%; height:100%; object-fit:cover; }
.facility-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.facility-copy p{ color:var(--ink-soft); font-size:1rem; max-width:46ch; }
.facility-actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.facility-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.fact-card{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); padding:22px 20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fact-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.fact-card .num{
  font-family:var(--font-sans); font-weight:700; font-size:1.7rem;
  color:var(--accent); line-height:1;
}
.fact-card .num--sm{ font-size:1.25rem; }
.fact-card .flabel{
  margin-top:8px; font-family:var(--font-mono); font-size:0.64rem;
  letter-spacing:0.09em; color:var(--ink-faint);
}
.fact-card .fdesc{ margin-top:4px; font-size:0.84rem; color:var(--ink-soft); }

/* ---------- 12. İletişim ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; }
.contact-card{
  background:var(--ink); color:var(--paper); border-radius:var(--radius-sm);
  padding:38px 32px; display:flex; flex-direction:column; gap:22px;
}
.contact-card h3{ color:var(--paper); font-size:1.3rem; }
.contact-row{ display:flex; align-items:flex-start; gap:14px; font-size:0.94rem; }
.contact-row svg{ flex-shrink:0; margin-top:2px; color:var(--accent); }
.contact-row a,
.contact-row span{ color:color-mix(in srgb, var(--paper) 88%, transparent); }
.contact-row a{
  word-break:break-word;
  /* Dokunma hedefini 44px'e çıkarırken satır yüksekliğini şişirmemek için
     negatif dikey marj: görünür yerleşim aynı kalıyor, tıklama alanı büyüyor.
     Komşu satırların hedefleri arasında 2px boşluk kalır, çakışmazlar. */
  display:inline-flex; align-items:center;
  min-height:var(--tap);
  margin-block:-10px;
}
/* İkon, 44px'lik bağlantıya göre ortalansın (adres satırı çok satırlı
   olduğu için ondaki üstten hizalama korunuyor). */
.contact-row:has(a){ align-items:center; }
/* Koyu kart üstünde --accent yalnızca 3.29:1 veriyordu; koyu zemin için
   ayrılmış --band-accent 8.1:1. */
.contact-row a:hover{ color:var(--band-accent); }
/* Harita kartın dibine yaslanıp kalan boşluğu dolduruyor: masaüstünde kart
   formla aynı yüksekliğe geriliyor, artan yeri harita alıyor. Mobilde kart
   gerilmediği için min-height devreye giriyor. */
.contact-map{
  /* margin-top:auto KULLANMIYORUZ: boşluğu tamamen yutunca flex-grow'a
     büyüyecek yer kalmıyor ve harita min-height'ta takılı kalıyordu. */
  flex:1 1 auto;
  min-height:250px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--band-bg);
}
.contact-map iframe{ display:block; width:100%; height:100%; border:0; }

.contact-form{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  align-content:start; /* kart uzayınca alanlar birbirinden ayrılmasın */
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:32px; background:var(--surface);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:0.78rem; font-weight:600; color:var(--ink-soft); }
.field input,
.field textarea{
  font:inherit;
  font-size:16px; /* iOS'ta odaklanınca otomatik yakınlaşmayı engeller */
  padding:11px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--paper);
  color:var(--ink); resize:vertical; width:100%;
}
.field input:focus,
.field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.form-note{ font-size:0.8rem; color:var(--ink-faint); margin-top:8px; min-height:1.2em; }

/* ---------- 13. Footer ---------- */
.site-footer{ padding:56px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; }
.footer-brand .brand-logo{ height:20px; }
.footer-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-nav a{ font-size:0.88rem; color:var(--ink-soft); padding:6px 0; }
.footer-nav a:hover{ color:var(--accent); }
.footer-bottom{
  margin-top:36px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:0.8rem; color:var(--ink-faint);
}
.social-link{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); }
.social-link:hover{ color:var(--accent); }

/* ==========================================================================
   14. Duyarlı davranış
   ========================================================================== */

/* --- Büyütülmüş menü metni dar masaüstünde sığmıyor: boşluğu daralt --- */
@media (max-width:1120px){
  .nav{ gap:18px; }
}

/* --- Tablet / küçük dizüstü --- */
@media (max-width:1080px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .facility-grid{ gap:40px; }
}

/* --- Mobil menünün devreye girdiği kırılım --- */
@media (max-width:980px){
  .nav-toggle{ display:flex; }

  body.nav-open{ overflow:hidden; } /* menü açıkken arka plan kaymasın */

  /* Panel her zaman yerinde durur, yalnızca görünürlüğü değişir: display'i
     animasyona sokamayacağımız için visibility + opacity + translate ile
     açılıp kapanıyor. visibility'nin gecikmesi kapanışta sona alınıyor ki
     panel önce sönsün, sonra tıklamayı bıraksın. */
  .nav{
    display:flex; flex-direction:column;
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--paper);
    padding:24px var(--wrap-pad) calc(32px + env(safe-area-inset-bottom));
    gap:0; z-index:49; overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    visibility:hidden; opacity:0; translate:0 -12px;
    transition:opacity .24s ease,
               translate .24s ease,
               visibility 0s linear .24s;
  }
  body.nav-open .nav{
    visibility:visible; opacity:1; translate:0 0;
    transition:opacity .26s ease,
               translate .34s cubic-bezier(.22,1,.36,1),
               visibility 0s linear 0s;
  }

  .nav a:not(.btn){
    padding:16px 0; border-bottom:1px solid var(--line);
    font-size:1.05rem; color:var(--ink);
  }
  /* panelde kayan alt çizgi ayırıcıyla çakışıyor; aktif satırı renkle belirt */
  .nav a:not(.btn)::after{ display:none; }
  .nav a:not(.btn).is-current{ color:var(--accent); }
  .header-actions .lang-toggle{ display:none; }
  .nav-mobile-extras{
    display:flex; flex-direction:column; gap:16px; margin-top:24px;
  }
  .nav-mobile-extras .lang-toggle{
    align-self:flex-start; font-size:0.95rem; padding:0;
  }

  /* Satırlar sırayla süzülerek girer. Yalnızca açılışta çalışır; kapanışta
     animasyon kalkıp satırlar görünür kalır, böylece panel boş değil dolu
     olarak sönümlenir. */
  body.nav-open .nav > a,
  body.nav-open .nav-mobile-extras{
    animation:navItemIn .42s cubic-bezier(.22,1,.36,1) both;
  }
  body.nav-open .nav > a:nth-child(1){ animation-delay:.06s; }
  body.nav-open .nav > a:nth-child(2){ animation-delay:.11s; }
  body.nav-open .nav > a:nth-child(3){ animation-delay:.16s; }
  body.nav-open .nav > a:nth-child(4){ animation-delay:.21s; }
  body.nav-open .nav > a:nth-child(5){ animation-delay:.26s; }
  body.nav-open .nav-mobile-extras{ animation-delay:.32s; }

  .sector-row{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .why-bento{ grid-template-columns:1fr 1fr; }
  .facility-grid{ grid-template-columns:1fr; gap:36px; }
  .facility-copy p{ max-width:none; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
}

/* --- Telefon --- */
@media (max-width:640px){
  :root{
    --header-h:66px;
    --wrap-pad:20px;
  }

  .brand-logo{ height:38px; }
  .header-actions .header-cta{ display:none; } /* CTA mobil menüye taşındı */

  .hero-content{
    padding:56px var(--wrap-pad);
    padding-top:calc(56px + var(--header-total));
  }
  .hero-actions{ flex-direction:column; align-items:stretch; margin-top:26px; }
  .hero-actions .btn{ width:100%; }

  .section{ padding:60px 0; }
  .section-head{ margin-bottom:36px; }

  /* Telefonda açıklama, başlığın altına ve ikon sütununun hizasına iner. */
  .solution-card{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:12px 16px;
    padding:22px 0;
  }
  .solution-card h3{ font-size:1.1rem; align-self:center; }
  .solution-card p{ grid-column:2; }

  .sector-row{ grid-template-columns:1fr; gap:16px; }
  .sector-card{ aspect-ratio:16/10; }

  .product-grid{ grid-template-columns:1fr; }
  .why-bento{ grid-template-columns:1fr; margin-top:32px; }
  .why-bento-item{ padding:24px 20px; }

  /* 21/8 bir telefonda ince bir şeride dönüşüyordu */
  .facility-photo{ aspect-ratio:3/2; margin-bottom:32px; }

  .facility-facts{ grid-template-columns:repeat(2,1fr); }
  .contact-card{ padding:28px 22px; }
  .contact-form{ grid-template-columns:1fr; padding:24px 20px; }

  .footer-inner{ flex-direction:column; gap:24px; }
  .footer-bottom{ flex-direction:column; gap:8px; }
}

/* --- Dar telefon --- */
@media (max-width:380px){
  .facility-facts{ grid-template-columns:1fr; }
  .hero-content h1{ font-size:1.85rem; }
}

/* --- Yatay mobil: tam ekran menü çok kısa kalıyor --- */
@media (max-height:520px) and (max-width:980px){
  .nav{ padding-top:16px; }
  .nav a:not(.btn){ padding:12px 0; font-size:1rem; }
}

/* ---------- 15. Baskı ---------- */
@media print{
  .site-header,.nav-toggle,.hero-media,.contact-form,.skip-link{ display:none !important; }
  .hero-content h1,.hero-content .lede{ color:#000; }
  .section{ padding:24px 0; break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:0.75em; }
}