/* ══════════════════════════════════════════════════════════════════════
   FLORA ENERJİ — TASARIM SİSTEMİ
   Renkler logodan birebir piksel örneklemesiyle alınmıştır.
   Bootstrap/Tailwind yok; her satır bu proje için yazıldı.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 01 · Simgeler (tokens) ─────────────────────────────────────────── */
:root{
  /* Marka — logodan */
  --lime:       #C7D301;
  --leaf:       #73BA59;
  --olive:      #3C3B2D;

  /* Türetilmiş */
  --ink:        #0E1A0B;
  --ink-soft:   #18240F;
  --leaf-deep:  #3E6E2E;
  --bone:       #F6F5F0;
  --bone-warm:  #EBE9E0;
  --slate:      #5C6455;
  --slate-lt:   #8A9180;
  --line:       #D9D7CC;
  --line-dark:  #2C3A23;

  /* Koyu zeminde metin */
  --on-dark:      #E8E9E0;
  --on-dark-soft: #A9B3A0;
  --on-dark-mute: #7E8A76;

  /* Tipografi */
  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Boşluk — Fibonacci, Tailwind'in 4/8/16'sı değil */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 20px;
  --s5: 32px; --s6: 52px; --s7: 84px; --s8: 136px;

  /* Hareket */
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
  --t-fast:   400ms;
  --t:        900ms;
  --t-slow:   1200ms;

  /* Ölçü */
  --wrap:     1280px;
  --gutter:   var(--s5);
  --radius:   2px;
  --header-h: 88px;
}

@media (max-width: 720px){
  :root{ --gutter: 16px; --header-h: 68px; }
}

/* ── 02 · Temel ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s4));
}

body{
  margin:0;
  background:var(--bone);
  color:var(--slate);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.75;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Film greni — %1.8. Dijital düzlüğü kırar, baskı hissi verir. */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:var(--leaf-deep); text-decoration:none }
button{ font:inherit; cursor:pointer }

::selection{ background:var(--lime); color:var(--ink) }

:focus-visible{ outline:2px solid var(--leaf-deep); outline-offset:3px }

/* ── 03 · Tipografi ─────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  color:var(--ink);
  margin:0;
  letter-spacing:-.025em;
  line-height:1.12;
}
h1{ font-size:clamp(2.6rem, 6.2vw, 5.2rem); line-height:.98; letter-spacing:-.035em }
h2{ font-size:clamp(1.9rem, 3.8vw, 3.1rem) }
h3{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing:-.018em }
h4{ font-size:1.22rem; letter-spacing:-.012em; line-height:1.3 }

p{ margin:0 0 var(--s4) }
p:last-child{ margin-bottom:0 }

.lead{ font-size:19px; line-height:1.7; max-width:56ch }
.measure{ max-width:64ch }

/* Küçük kapiteller etiket — AI'ın "pill badge"inin yerine geçer */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--leaf-deep);
  display:flex;
  align-items:center;
  gap:var(--s3);
  margin:0 0 var(--s4);
  font-weight:500;
}
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--line); max-width:88px }
.eyebrow--solo::after{ display:none }
.on-dark .eyebrow{ color:var(--leaf) }
.on-dark .eyebrow::after{ background:var(--line-dark) }

/* Teknik değerler — mono font mühendislik güveni verir */
.mono{ font-family:var(--f-mono); font-size:.92em; letter-spacing:.01em }

/* ── 04 · Yerleşim ──────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.wrap--narrow{ max-width:920px }

.section{ padding-block:var(--s8) }
.section--tight{ padding-block:var(--s7) }
.section--dark{ background:var(--ink); color:var(--on-dark-soft) }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--on-dark) }
.section--warm{ background:var(--bone-warm) }
.section--line{ border-top:1px solid var(--line) }

/* Asimetrik ızgara — 6/6 değil 7/5. Simetri şablon kokar. */
.grid-7-5{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s7) }
.grid-5-7{ display:grid; grid-template-columns:5fr 7fr; gap:var(--s7) }
.grid-halves{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6) }
@media (max-width:900px){
  .grid-7-5,.grid-5-7,.grid-halves{ grid-template-columns:1fr; gap:var(--s5) }
}

.section-head{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s6); align-items:end; margin-bottom:var(--s7) }
@media (max-width:900px){ .section-head{ grid-template-columns:1fr; gap:var(--s4); margin-bottom:var(--s6) } }
.section-head p{ font-size:15.5px; margin:0 }

/* ── 05 · Butonlar ──────────────────────────────────────────────────── */
/* Buton: soldan süpüren dolgu + okun kayması + hafif kalkış.
   Dolgu background-size ile yapılır; fazladan <span> gerekmez,
   metin kendiliğinden dolgunun üstünde kalır. */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:14px; font-weight:500; letter-spacing:.02em;
  padding:16px 30px; border:1px solid transparent; border-radius:var(--radius);
  text-decoration:none; white-space:nowrap; overflow:hidden;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  transition:background-size 620ms var(--ease),
             color 380ms var(--ease),
             border-color 380ms var(--ease),
             transform 420ms var(--ease),
             box-shadow 420ms var(--ease);
  will-change:transform;
}
.btn:hover{ background-size:100% 100% }
.btn:active{ transform:translateY(0) scale(.985) }

/* Ok, metinden sonra kayarak gelir */
.btn svg{
  width:15px; height:15px; flex-shrink:0;
  transform:translateX(-4px); opacity:.55;
  transition:transform 520ms var(--ease), opacity 380ms var(--ease);
}
.btn:hover svg{ transform:translateX(0); opacity:1 }

/* Limon buton → mürekkep laciverte döner */
.btn--accent{
  background-color:var(--lime); color:var(--ink); font-weight:600;
  background-image:linear-gradient(var(--ink),var(--ink));
}
.btn--accent:hover{ color:var(--lime); transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(14,26,11,.75) }

/* Koyu buton → yaprak yeşiline döner */
.btn--primary{
  background-color:var(--ink); color:var(--bone);
  background-image:linear-gradient(var(--leaf-deep),var(--leaf-deep));
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(14,26,11,.7) }

/* Çerçeveli buton → içi dolar */
.btn--ghost{
  background-color:transparent; color:var(--ink); border-color:var(--ink);
  background-image:linear-gradient(var(--ink),var(--ink));
}
.btn--ghost:hover{ color:var(--bone); transform:translateY(-2px) }

/* Koyu zeminde çerçeveli buton — .hero DAHİL.
   Bu eksikti: hero koyu ama .on-dark sınıfı yoktu, buton açık zemin
   kuralını kullanıp koyu yeşil metinle okunmaz hâle geliyordu. */
.on-dark .btn--ghost,
.section--dark .btn--ghost,
.hero .btn--ghost,
.cta .btn--ghost{
  color:var(--bone); border-color:rgba(246,245,240,.42);
  /* Dolgu beyaz değil, logonun yaprak yeşili */
  background-image:linear-gradient(var(--leaf),var(--leaf));
}
.on-dark .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta .btn--ghost:hover{ color:var(--ink); border-color:var(--leaf) }

/* Mıknatıs etkisi — JS imleci takip ederek ±5px kaydırır */
.btn[data-magnetic]{ transition:background-size 620ms var(--ease), color 380ms var(--ease),
                                border-color 380ms var(--ease), box-shadow 420ms var(--ease),
                                transform 260ms var(--ease) }

/* Metin linki — alt çizgi sağdan kapanıp soldan açılır */
.link{
  display:inline-flex; align-items:center; gap:8px; position:relative;
  color:var(--leaf-deep); font-weight:500; font-size:14.5px;
}
.link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform var(--t) var(--ease);
}
.link:hover::after{ transform:scaleX(1); transform-origin:left }
.link svg{ width:14px; height:14px; transition:transform var(--t) var(--ease) }
.link:hover svg{ transform:translateX(4px) }
.section--dark .link{ color:var(--leaf) }

/* ── 06 · Başlık (header) ───────────────────────────────────────────── */
/* Üst şerit: mono font küçük puntoda sıkışık ve "pixel pixel" görünüyordu.
   Gövde fontuna (IBM Plex Sans) geçildi, punto ve satır ayarı yumuşatıldı. */
.topbar{
  background:var(--ink); color:var(--on-dark-soft);
  font-family:var(--f-body); font-size:13px; letter-spacing:.01em;
  border-bottom:1px solid var(--line-dark);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); min-height:40px }
.topbar a{ color:var(--on-dark-soft); transition:color var(--t-fast) var(--ease) }
.topbar a:hover{ color:var(--lime) }
.topbar__set{ display:flex; gap:var(--s5); align-items:center }
.topbar__set span,.topbar__set a{ display:inline-flex; align-items:center; gap:7px }
@media (max-width:860px){
  .topbar__set--hide{ display:none }
  .topbar{ font-size:12.5px }
  .topbar .wrap{ justify-content:center }
}

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,245,240,.96);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-fast) var(--ease);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); height:var(--header-h) }
.header__logo img{ height:40px; width:auto }
@media (max-width:720px){ .header__logo img{ height:32px } }

.nav{ display:flex; align-items:center; gap:var(--s5) }
.nav a{
  font-size:14px; font-weight:500; color:var(--ink); position:relative; padding-block:6px;
  letter-spacing:.005em;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform var(--t) var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left }
.nav a[aria-current="page"]{ color:var(--leaf-deep) }
.nav a[aria-current="page"]::after{ background:var(--leaf-deep) }

.header__cta{ display:flex; align-items:center; gap:var(--s4) }
@media (max-width:1080px){ .nav,.header__cta .btn{ display:none } }

/* Mobil menü */
.burger{
  display:none; background:none; border:0; padding:10px; margin-right:-10px;
}
.burger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease) }
.burger span+span{ margin-top:5px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }
@media (max-width:1080px){ .burger{ display:block } }

.mobile-nav{
  position:fixed; inset:var(--header-h) 0 0; z-index:99;
  background:var(--ink); padding:var(--s6) var(--gutter);
  transform:translateY(-100%); visibility:hidden;
  transition:transform var(--t-slow) var(--ease), visibility var(--t-slow);
  overflow-y:auto;
}
.mobile-nav[data-open="true"]{ transform:translateY(0); visibility:visible }
.mobile-nav a{
  display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:600;
  color:var(--on-dark); padding:var(--s3) 0; border-bottom:1px solid var(--line-dark);
  letter-spacing:-.02em;
}
.mobile-nav__foot{ margin-top:var(--s6); font-family:var(--f-mono); font-size:12px; color:var(--on-dark-mute); line-height:2 }
.mobile-nav__foot a{ font-family:var(--f-mono); font-size:13px; border:0; padding:0; color:var(--lime) }

/* ── 07 · Kahraman bölüm (slider) ───────────────────────────────────── */
.hero{ position:relative; background:var(--ink); overflow:hidden; min-height:clamp(560px,82vh,880px); display:flex; align-items:flex-end }
/* Negatif inset: imleç parallax'ı katmanı ±14px kaydırdığında
   kenarlarda boşluk açılmasın diye taşma payı bırakılır. */
.hero__slides{ position:absolute; inset:-26px }
.hero__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 900ms var(--ease), opacity 80ms linear 900ms, visibility 0s 900ms;
}
.hero__slide[data-active="true"]{
  opacity:1; visibility:visible; clip-path:inset(0 0 0 0);
  transition:clip-path 900ms var(--ease), opacity 0s, visibility 0s;
}
/* Derinlik: gelen kare uzaktan öne gelir (scale 1.12 -> 1.0),
   aynı anda Ken Burns yavaş yaklaşmayı sürdürür. */
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12);
  transition:transform 1400ms var(--ease);
  will-change:transform;
}
.hero__slide[data-active="true"] img{ transform:scale(1.0); transition:transform 6500ms var(--ease) }
.hero__slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(14,26,11,.93) 0%, rgba(14,26,11,.76) 42%, rgba(14,26,11,.34) 100%);
}

.hero__body{ position:relative; z-index:2; width:100%; padding-block:var(--s8) var(--s6) }
.hero__eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime); margin:0 0 var(--s4); display:block;
}
/* Slider başlığı görsel olarak h1 gibi görünür ama div'dir (sayfada tek
   gerçek h1 gizli olarak duruyor). Tipografiyi tam burada tanımlıyoruz. */
.hero__h{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.6rem,6.2vw,5.2rem); line-height:.98; letter-spacing:-.035em;
  color:var(--bone); max-width:17ch; margin:0 0 var(--s5);
}
.hero__text{ color:var(--on-dark-soft); max-width:50ch; font-size:17.5px; margin:0 0 var(--s6) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s4) }

/* Satır satır maske açılımı — en güçlü "insan tasarladı" sinyali */
.reveal-line{ display:block; overflow:hidden }
.reveal-line > span{
  display:block; transform:translateY(105%);
  transition:transform var(--t) var(--ease);
}
.hero__slide-copy[data-active="true"] .reveal-line > span{ transform:translateY(0) }
.hero__slide-copy{ display:none }
.hero__slide-copy[data-active="true"]{ display:block }
.reveal-line:nth-child(2) > span{ transition-delay:110ms }
.reveal-line:nth-child(3) > span{ transition-delay:210ms }

/* Slider göstergeleri — numaralı, ince çizgili */
.hero__nav{
  position:relative; z-index:2; display:flex; align-items:center; gap:var(--s5);
  padding-bottom:var(--s6); flex-wrap:wrap;
}
.hero__dots{ display:flex; gap:var(--s4) }
.hero__dot{
  background:none; border:0; padding:0; display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  color:var(--on-dark-mute); transition:color var(--t-fast) var(--ease);
}
.hero__dot:hover{ color:var(--on-dark) }
.hero__dot[aria-selected="true"]{ color:var(--lime) }
.hero__dot i{ display:block; width:36px; height:1px; background:currentColor; opacity:.35; position:relative; font-style:normal }
.hero__dot[aria-selected="true"] i{ opacity:1 }
.hero__dot[aria-selected="true"] i::after{
  content:''; position:absolute; inset:0; background:var(--lime);
  transform-origin:left; animation:dotProgress 5s linear forwards;
}
@keyframes dotProgress{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* Öne çıkan üç madde — hero altı şerit */
.hero__facts{
  position:relative; z-index:2; border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.hero__fact{ padding:var(--s4) var(--s5) var(--s4) 0; }
.hero__fact + .hero__fact{ border-left:1px solid var(--line-dark); padding-left:var(--s5) }
.hero__fact b{ display:block; font-family:var(--f-display); font-size:15px; color:var(--bone); font-weight:600; letter-spacing:-.01em }
.hero__fact span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute) }
@media (max-width:760px){
  .hero__facts{ grid-template-columns:1fr }
  .hero__fact + .hero__fact{ border-left:0; border-top:1px solid var(--line-dark); padding-left:0 }
}

/* ── 08 · Sayaçlar ──────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s6) }
.stat b{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; letter-spacing:-.04em; color:var(--ink);
}
.section--dark .stat b{ color:var(--on-dark) }
.stat b i{ font-style:normal; color:var(--lime) }
/* Sayacın kendisi — <b> içindeki span. Büyük puntoyu miras alır. */
.stat b span{ font:inherit; letter-spacing:inherit; text-transform:none; color:inherit }
/* DİKKAT: ">" şart. Aksi halde bu kural <b> içindeki sayaç span'ini de
   yakalar ve sayı 10.5px etiket gibi basılır. */
.stat > span{
  display:block; margin-top:var(--s3); font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-lt);
}
.section--dark .stat > span{ color:var(--on-dark-mute) }

/* ── 09 · Kartlar ───────────────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:var(--s5) }
.cards--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .cards--3{ grid-template-columns:1fr } }

/* Hover'da kart zıplamaz; görsel yaklaşır, alt çizgi dolar. */
.card{ display:block; border-top:1px solid var(--line); padding-top:var(--s4); color:inherit }
.card__img{ aspect-ratio:4/3; overflow:hidden; margin-bottom:var(--s4); background:var(--olive) }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease) }
.card:hover .card__img img{ transform:scale(1.055) }
.card__no{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--leaf-deep); margin-bottom:var(--s2) }
.card h4{ margin:0 0 var(--s3) }
.card p{ font-size:14.5px; line-height:1.68; margin:0 0 var(--s4); color:var(--slate) }
.card__line{ height:1px; background:var(--line); position:relative; overflow:hidden }
.card__line::after{
  content:''; position:absolute; inset:0; background:var(--lime);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease);
}
.card:hover .card__line::after{ transform:scaleX(1) }

.section--dark .card{ border-color:var(--line-dark) }
.section--dark .card p{ color:var(--on-dark-soft) }
.section--dark .card__line{ background:var(--line-dark) }

/* ── 10 · Süreç adımları ────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6) }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:var(--s5) } }
.step{ border-top:1px solid var(--line-dark); padding-top:var(--s4) }
.step__no{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--lime);
  display:block; margin-bottom:var(--s4);
}
.step h4{ color:var(--on-dark); margin:0 0 var(--s3) }
.step p{ font-size:14.5px; color:var(--on-dark-soft); margin:0 }

/* ── 11 · Referans şeridi ───────────────────────────────────────────── */
.clients{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.client{
  aspect-ratio:16/9; display:grid; place-items:center; padding:var(--s4);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bone);
}
.client img{
  max-width:100%; max-height:52px; width:auto; object-fit:contain;
  filter:grayscale(1) opacity(.52);
  transition:filter var(--t) var(--ease), transform var(--t) var(--ease);
}
.client:hover img{ filter:grayscale(0) opacity(1); transform:scale(1.04) }

/* ══════════════════════════════════════════════════════════════════════
   11b · GALERİ (saha çalışmaları)
   ══════════════════════════════════════════════════════════════════════ */

/* Öne çıkan kayıt — geniş, sinematik */
.gal-feature{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:21/9; background:var(--olive); border-radius:var(--radius);
}
@media (max-width:760px){ .gal-feature{ aspect-ratio:16/10 } }
.gal-feature img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.gal-feature:hover img{ transform:scale(1.04) }
.gal-feature::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,26,11,.90) 0%, rgba(14,26,11,.32) 52%, rgba(14,26,11,.12) 100%);
}
.gal-feature__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--s6); display:flex; align-items:flex-end; gap:var(--s5); flex-wrap:wrap;
}
.gal-feature__body h3{ color:var(--bone); margin:0; max-width:22ch }
.gal-feature__body p{ color:var(--on-dark-soft); margin:var(--s3) 0 0; max-width:54ch; font-size:15px }
@media (max-width:640px){ .gal-feature__body{ padding:var(--s4) } }

/* Izgara */
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:var(--s4) }

.gal-item{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:var(--olive); border-radius:var(--radius);
  color:var(--bone);
}
.gal-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease), filter var(--t) var(--ease);
  filter:brightness(.92);
}
.gal-item:hover img{ transform:scale(1.06); filter:brightness(1) }
.gal-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,26,11,.86) 0%, rgba(14,26,11,.18) 58%, transparent 100%);
  transition:opacity var(--t) var(--ease);
}
.gal-item__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--s4) }
.gal-item__cat{
  display:inline-block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime); margin-bottom:6px;
}
.gal-item__body h4{
  color:var(--bone); font-size:1.02rem; margin:0; line-height:1.32;
}
.gal-item__meta{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--on-dark-mute); margin-top:6px;
}

/* Oynat düğmesi — video kayıtlarında */
.gal-play{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%;
  background:rgba(199,211,1,.94); color:var(--ink);
  display:grid; place-items:center;
  transition:transform var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.gal-feature .gal-play{ width:96px; height:96px }
.gal-play svg{ width:26px; height:26px; margin-left:4px }
.gal-feature .gal-play svg{ width:32px; height:32px }
a:hover > .gal-play{ transform:translate(-50%,-50%) scale(1.09); background:var(--lime) }

/* Nabız halkası — video olduğunu belli eder */
.gal-play::before{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--lime); animation:galPulse 2.6s var(--ease) infinite;
}
@keyframes galPulse{
  0%   { transform:scale(1);    opacity:.75 }
  70%  { transform:scale(1.55); opacity:0 }
  100% { transform:scale(1.55); opacity:0 }
}

/* ══════════════════════════════════════════════════════════════════════
   11c · BÜYÜTEÇ (lightbox)
   ══════════════════════════════════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:500;
  background:rgba(8,14,6,.96);
  display:grid; place-items:center; padding:var(--s6) var(--gutter);
  opacity:0; visibility:hidden;
  transition:opacity 460ms var(--ease), visibility 0s 460ms;
}
.lb[data-open="true"]{ opacity:1; visibility:visible; transition:opacity 460ms var(--ease), visibility 0s }

.lb__stage{
  position:relative; width:100%; max-width:1180px;
  transform:translateY(22px) scale(.975);
  transition:transform 560ms var(--ease);
}
.lb[data-open="true"] .lb__stage{ transform:none }

.lb__media{
  position:relative; background:#000; border-radius:var(--radius); overflow:hidden;
  max-height:76vh; display:grid; place-items:center;
}
.lb__media img,.lb__media video{ max-width:100%; max-height:76vh; width:auto; height:auto; display:block }
.lb__media iframe{ width:100%; aspect-ratio:16/9; border:0; display:block }

.lb__cap{ margin-top:var(--s4); display:flex; gap:var(--s5); justify-content:space-between; align-items:flex-start; flex-wrap:wrap }
.lb__cap h3{ color:var(--bone); margin:0; font-size:1.22rem }
.lb__cap p{ color:var(--on-dark-soft); margin:6px 0 0; font-size:14.5px; max-width:62ch }
.lb__meta{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute); white-space:nowrap }

.lb__btn{
  position:absolute; z-index:3; background:rgba(14,26,11,.72); border:1px solid rgba(246,245,240,.2);
  color:var(--bone); width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lb__btn:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); transform:scale(1.06) }
.lb__btn svg{ width:17px; height:17px }
.lb__close{ top:calc(-1 * var(--s6)); right:0 }
.lb__prev{ left:calc(-1 * var(--s6) - 8px); top:34% }
.lb__next{ right:calc(-1 * var(--s6) - 8px); top:34% }
@media (max-width:1320px){
  .lb__prev{ left:var(--s3) }
  .lb__next{ right:var(--s3) }
  .lb__close{ top:calc(-1 * var(--s5)); right:0 }
}
.lb__count{
  position:absolute; top:calc(-1 * var(--s6) + 12px); left:0;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--on-dark-mute);
}

body.lb-open{ overflow:hidden }

/* ── 12 · Alıntı ────────────────────────────────────────────────────── */
.quote{ display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:center }
.quote__photo{ width:96px; height:96px; object-fit:cover; border-radius:50%; filter:grayscale(1) }
.quote blockquote{ margin:0; font-family:var(--f-display); font-size:clamp(1.1rem,1.9vw,1.44rem); line-height:1.45; color:var(--ink); letter-spacing:-.012em }
.section--dark .quote blockquote{ color:var(--on-dark) }
.quote figcaption{ margin-top:var(--s3); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-lt) }
.quote figcaption b{ color:var(--leaf-deep); font-weight:500 }
.section--dark .quote figcaption b{ color:var(--lime) }
@media (max-width:640px){ .quote{ grid-template-columns:1fr } }

/* ── 13 · Eylem çağrısı ─────────────────────────────────────────────── */
.cta{ position:relative; background:var(--ink); overflow:hidden }
.cta__bg{ position:absolute; inset:0; opacity:.22 }
.cta__bg img{ width:100%; height:100%; object-fit:cover }
.cta .wrap{ position:relative; z-index:2 }
.cta__phone{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(2rem,4.4vw,3.4rem); color:var(--lime); display:inline-block; line-height:1;
}

/* ── 14 · Alt bilgi ─────────────────────────────────────────────────── */
.footer{ background:var(--ink); color:var(--on-dark-soft); padding-block:var(--s7) var(--s5) }
.footer__top{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:var(--s6); padding-bottom:var(--s6); border-bottom:1px solid var(--line-dark) }
@media (max-width:980px){ .footer__top{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .footer__top{ grid-template-columns:1fr } }
.footer h5{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-mute); margin:0 0 var(--s4); font-weight:400;
}
.footer ul{ list-style:none; margin:0; padding:0 }
.footer li{ margin-bottom:var(--s3) }
.footer a{ color:var(--on-dark-soft); font-size:14.5px; transition:color var(--t-fast) var(--ease) }
.footer a:hover{ color:var(--lime) }
/* width:auto ŞART — yoksa img'nin width özniteliği (255) boyu zorlar ve logo ezilir */
.footer__logo img{ height:38px; width:auto; margin-bottom:var(--s4) }
.footer__legal{ font-size:12.5px; line-height:1.7; color:var(--on-dark-mute); max-width:60ch }
/* Hizmet bölgeleri şeridi — footer'ın alt bandı */
.footer__areas{ padding:var(--s5) 0; border-bottom:1px solid var(--line-dark) }
.footer__areas h5{ margin-bottom:var(--s3) }
.footer__areas nav{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5) }
.footer__areas a{
  font-size:13.5px; color:var(--on-dark-soft); position:relative;
  transition:color var(--t-fast) var(--ease);
}
.footer__areas a:hover{ color:var(--lime) }
.footer__areas-all{ color:var(--leaf)!important; font-family:var(--f-mono); font-size:12px!important; letter-spacing:.06em }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center;
  padding-top:var(--s4); font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--on-dark-mute);
}
.footer__social{ display:flex; gap:var(--s4) }
.footer__social a{ color:var(--on-dark-mute) }
.footer__social svg{ width:17px; height:17px }

/* ══════════════════════════════════════════════════════════════════════
   14b · İÇ SAYFALAR
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sayfa başlığı ──────────────────────────────────────────────── */
.page-hero{
  position:relative; background:var(--ink); overflow:hidden;
  padding-block:var(--s8) var(--s7); color:var(--on-dark-soft);
}
.page-hero__bg{ position:absolute; inset:-20px; opacity:.30 }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover }
.page-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(14,26,11,.94) 0%, rgba(14,26,11,.72) 55%, rgba(14,26,11,.42) 100%);
}
.page-hero .wrap{ position:relative; z-index:2 }
.page-hero h1{ color:var(--bone); max-width:20ch; margin:0 }
.page-hero__lead{ color:var(--on-dark-soft); max-width:58ch; margin-top:var(--s5); font-size:17.5px }

/* ── Kırıntı yolu (breadcrumb) ──────────────────────────────────── */
.crumbs{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-dark-mute); margin-bottom:var(--s5);
}
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.crumbs a{ color:var(--on-dark-mute); transition:color var(--t-fast) var(--ease) }
.crumbs a:hover{ color:var(--lime) }
.crumbs li+li::before{ content:'/'; margin-right:10px; opacity:.45 }
.crumbs [aria-current]{ color:var(--leaf) }

/* ── Zengin metin ───────────────────────────────────────────────── */
.prose{ max-width:68ch; font-size:17px; line-height:1.8 }
.prose > *+*{ margin-top:var(--s4) }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:var(--s6) }
.prose h3{ font-size:1.32rem; margin-top:var(--s5) }
.prose ul,.prose ol{ padding-left:1.15em; margin-top:var(--s4) }
.prose li{ margin-bottom:var(--s3) }
.prose li::marker{ color:var(--leaf-deep) }
.prose a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.prose strong{ color:var(--ink); font-weight:600 }
.prose blockquote{
  margin:var(--s5) 0; padding-left:var(--s5); border-left:2px solid var(--lime);
  font-family:var(--f-display); font-size:1.18rem; line-height:1.5; color:var(--ink); letter-spacing:-.012em;
}
.prose img{ margin-block:var(--s5); border-radius:var(--radius) }

/* ── Ürün görseli ───────────────────────────────────────────────── */
/* Ürün fotoğrafları arka planı kesilmiş saydam PNG'dir. Zemin burada,
   CSS'te kurulur: böylece rengi/dokusu istendiği an değişebilir ve
   görselin kendisi her yerde yeniden kullanılabilir. */
.product-figure{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  background:
    radial-gradient(120% 85% at 50% 22%, #FFFFFF 0%, var(--bone-warm) 58%, #DFDCD1 100%);
  display:grid; place-items:center;
  aspect-ratio:1/1;
  border:1px solid var(--line);
}
/* Zemine ince doku — düz renk ucuz görünür */
.product-figure::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(14,26,11,.022) 0 1px, transparent 1px 13px);
}
/* Ürünün oturduğu zemin çizgisi */
.product-figure::after{
  content:''; position:absolute; left:14%; right:14%; bottom:16%;
  height:1px; background:linear-gradient(90deg, transparent, rgba(14,26,11,.16), transparent);
}
.product-figure img{
  position:relative; z-index:2;
  width:86%; height:86%; object-fit:contain;
  transition:transform var(--t-slow) var(--ease);
}
.product-figure--wide{ aspect-ratio:4/3 }
.product-figure--dark{
  background:radial-gradient(120% 85% at 50% 22%, #24331C 0%, var(--ink-soft) 55%, var(--ink) 100%);
  border-color:var(--line-dark);
}
.product-figure--dark::after{ background:linear-gradient(90deg, transparent, rgba(246,245,240,.14), transparent) }

/* Kart içindeki ürün görseli — kırpma değil, sığdırma */
.card__img--product{
  background:
    radial-gradient(120% 85% at 50% 24%, #FFFFFF 0%, var(--bone-warm) 60%, #DEDBD0 100%);
  position:relative;
}
.card__img--product::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(14,26,11,.022) 0 1px, transparent 1px 13px);
}
.card__img--product img{
  width:84%; height:84%; margin:8% auto; object-fit:contain; position:relative; z-index:2;
}
/* Ürün kartında hover'da görsel büyümez, hafifçe yükselir */
.card:hover .card__img--product img{ transform:translateY(-6px) scale(1.03) }

/* Seri rozeti */
.product-badge{
  position:absolute; z-index:3; top:var(--s4); left:var(--s4);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--lime); padding:5px 10px; border-radius:2px;
}

/* ── Teknik özellik tablosu ─────────────────────────────────────── */
.spec{ width:100%; border-collapse:collapse; font-size:14.5px }
.spec caption{
  text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-lt); padding-bottom:var(--s3);
}
.spec th{
  text-align:left; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-lt); font-weight:400;
  padding:0 0 var(--s3); border-bottom:1px solid var(--line);
}
.spec td{ padding:var(--s3) 0; border-bottom:1px solid var(--line) }
.spec td:first-child{ color:var(--ink); width:46% }
/* Değerler mono — mühendislik güveni buradan gelir */
.spec td:last-child{ font-family:var(--f-mono); font-size:13.5px; color:var(--leaf-deep); text-align:right }

/* ── Sıkça sorulanlar ───────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s4) 0; display:flex; gap:var(--s4);
  align-items:flex-start; justify-content:space-between;
  font-family:var(--f-display); font-weight:600; font-size:1.06rem; color:var(--ink);
  letter-spacing:-.01em; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:''; flex-shrink:0; width:13px; height:13px; margin-top:6px;
  background:linear-gradient(var(--leaf-deep),var(--leaf-deep)) center/100% 1px no-repeat,
             linear-gradient(var(--leaf-deep),var(--leaf-deep)) center/1px 100% no-repeat;
  transition:transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details > div{ padding:0 0 var(--s5); max-width:70ch; font-size:15.5px }

/* ── Formlar ────────────────────────────────────────────────────── */
.form{ display:grid; gap:var(--s4) }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr } }

.field label{
  display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-lt); margin-bottom:var(--s2);
}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--f-body); font-size:16px; color:var(--ink);
  background:var(--bone); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.65 }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--leaf-deep); background:#fff;
}
.field input::placeholder,.field textarea::placeholder{ color:#A8AE9F }
.field--error input,.field--error textarea{ border-color:#B2452B }
.field__error{ font-size:13px; color:#B2452B; margin-top:6px }

/* Bal küpü — insan göremez, bot doldurur */
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden }

.notice{ padding:var(--s4) var(--s5); border-left:2px solid; font-size:15px; margin-bottom:var(--s5) }
.notice--ok{ border-color:var(--leaf); background:rgba(115,186,89,.10); color:var(--ink) }
.notice--err{ border-color:#B2452B; background:rgba(178,69,43,.08); color:#7E2E1A }

/* ── İletişim bilgi kartları ────────────────────────────────────── */
.info-list{ list-style:none; margin:0; padding:0 }
.info-list li{ padding:var(--s4) 0; border-bottom:1px solid var(--line) }
.info-list li:first-child{ border-top:1px solid var(--line) }
.info-list dt{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-lt); margin-bottom:6px;
}
.info-list dd{ margin:0; font-size:16px; color:var(--ink); line-height:1.6 }
.info-list dd a{ color:var(--ink) }
.info-list dd a:hover{ color:var(--leaf-deep) }

/* ── Blog ───────────────────────────────────────────────────────── */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s6) var(--s5) }

.post-card{ display:block; color:inherit; border-top:1px solid var(--line); padding-top:var(--s4) }
.post-card__img{ aspect-ratio:16/10; overflow:hidden; margin-bottom:var(--s4); background:var(--olive) }
.post-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease) }
.post-card:hover .post-card__img img{ transform:scale(1.05) }
.post-card__meta{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leaf-deep); display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:var(--s3);
}
.post-card__meta span:not(:first-child){ color:var(--slate-lt) }
.post-card h3{ font-size:1.22rem; line-height:1.32; margin:0 0 var(--s3) }
.post-card:hover h3{ color:var(--leaf-deep) }
.post-card p{ font-size:14.5px; line-height:1.68; margin:0 }

/* Öne çıkan yazı — geniş, iki sütun */
.post-lead{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s6); align-items:center; margin-bottom:var(--s8) }
@media (max-width:900px){ .post-lead{ grid-template-columns:1fr; gap:var(--s5) } }
.post-lead__img{ aspect-ratio:16/10; overflow:hidden; background:var(--olive) }
.post-lead__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease) }
.post-lead:hover .post-lead__img img{ transform:scale(1.04) }
.post-lead h2{ margin:var(--s3) 0 var(--s4) }

/* Yazı sayfası */
.article{ max-width:none }
.article__meta{
  display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center;
  padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s6);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-lt);
}
.article__meta b{ color:var(--leaf-deep); font-weight:500 }
.article__cover{ margin:0 0 var(--s6); overflow:hidden; border-radius:var(--radius) }
.article__cover img{ width:100%; height:auto; display:block }

/* Kategori süzgeci */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s7) }
.chip{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); border-radius:2px; color:var(--slate);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink) }
.chip[aria-current]{ background:var(--ink); border-color:var(--ink); color:var(--bone) }

/* Sayfalama */
.pagination{ display:flex; gap:var(--s3); justify-content:center; align-items:center; margin-top:var(--s7) }
.pagination a,.pagination span{
  font-family:var(--f-mono); font-size:12.5px; min-width:40px; height:40px;
  display:grid; place-items:center; border:1px solid var(--line); border-radius:2px; color:var(--slate);
}
.pagination a:hover{ border-color:var(--ink); color:var(--ink) }
.pagination [aria-current]{ background:var(--ink); border-color:var(--ink); color:var(--bone) }

/* ── Sonraki/önceki gezinme ─────────────────────────────────────── */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); border-top:1px solid var(--line); padding-top:var(--s5) }
@media (max-width:640px){ .pager{ grid-template-columns:1fr } }
.pager a{ display:block }
.pager span{
  display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-lt); margin-bottom:var(--s2);
}
.pager b{ font-family:var(--f-display); font-size:1.1rem; color:var(--ink); font-weight:600; letter-spacing:-.012em }
.pager a:hover b{ color:var(--leaf-deep) }
.pager > :last-child{ text-align:right }
@media (max-width:640px){ .pager > :last-child{ text-align:left } }

/* ── 404 ────────────────────────────────────────────────────────── */
.err{ min-height:62vh; display:grid; place-items:center; text-align:center; padding-block:var(--s8) }
.err__code{
  font-family:var(--f-display); font-weight:600; font-size:clamp(5rem,16vw,11rem);
  line-height:.9; letter-spacing:-.05em; color:var(--lime);
}

/* ── 15 · Görünüm animasyonu (IntersectionObserver ile) ─────────────── */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none }
[data-reveal-delay="1"]{ transition-delay:90ms }
[data-reveal-delay="2"]{ transition-delay:180ms }
[data-reveal-delay="3"]{ transition-delay:270ms }
[data-reveal-delay="4"]{ transition-delay:360ms }

/* ══════════════════════════════════════════════════════════════════════
   16b · DERİNLİK KATMANI
   "3D" burada dönen küp değil, gerçek mekân hissi: imleçle eğilen
   yüzeyler, kaydırmada farklı hızda hareket eden katmanlar.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Kart eğimi (imleç takipli) ──────────────────────────────────── */
/* Perspektif kartın KENDİ transform'unda veriliyor (JS tarafında).
   Burada ayrıca tanımlamıyoruz — ikisi üst üste binince eğim abartılı olur. */
.card{
  transform-style:preserve-3d;
  transition:transform 520ms var(--ease), box-shadow 520ms var(--ease);
  will-change:transform;
}
.card[data-tilt]:hover{ box-shadow:0 30px 60px -38px rgba(14,26,11,.55) }

/* Görsel ve metin farklı derinlikte durur → gerçek katman hissi */
.card__img{ transform:translateZ(28px); transition:transform 520ms var(--ease) }
.card h4{ transform:translateZ(18px) }
.card__no{ transform:translateZ(14px) }

/* Görsel üstünde ışık: imleç konumuna göre kayan yumuşak parlaklık.
   Neon değil — camın üstündeki ışık yansıması gibi, %14 opaklık. */
.card__img{ position:relative }
.card__img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(246,245,240,.14), transparent 58%);
  opacity:0; transition:opacity 520ms var(--ease);
}
.card:hover .card__img::after{ opacity:1 }

/* ── Hero: imleçle hafif kayan katmanlar ─────────────────────────── */
/* DİKKAT: will-change burada KALICI verilmez. Kalıcı will-change,
   kapsayıcıyı sürekli bir GPU katmanına terfi eder; slayt zamanlayıcı
   ile değiştiğinde (scroll/mousemove yokken) tarayıcı bu bayat katmanı
   yeniden boyamaz ve slayt "sadece scroll'da değişiyor" gibi görünür.
   will-change yalnızca parallax etkinken JS'ten uygulanır. */

/* ── Kaydırma parallax'ı ─────────────────────────────────────────── */
[data-parallax]{ will-change:transform }

/* ══════════════════════════════════════════════════════════════════
   KART ÇEVİRME (flip card)

   Gerçek iki yüzlü kart: bölüm ekrana girerken ARKA yüzü görünür
   (kapalı, düz bir yüzey), kaydırdıkça Y ekseninde dönerek ön yüzünü
   — yani içeriği — açar. Kaydırma konumuna bağlıdır, tek seferlik
   animasyon değil: geri çıkarsan kart tekrar kapanır.

   Yapı JS tarafından kurulur, PHP şablonları temiz kalır:
     .flip-scene  → perspektif kabı
       .flip-inner → preserve-3d, dönen parça
         .flip-back  → arka yüz (kapalı yüzey)
         .flip-front → içeriğin kendisi
   ══════════════════════════════════════════════════════════════════ */
.flip-scene{
  perspective:2200px;
  perspective-origin:50% 45%;
}
.flip-inner{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.flip-face{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
/* Ön yüz akışta kalır — bölümün gerçek yüksekliğini o belirler,
   böylece sayfa zıplamaz. */
.flip-front{ position:relative }

/* Arka yüz: kapalı, sade yüzey. Ortada soluk marka işareti. */
.flip-back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:grid; place-items:center;
  overflow:hidden;
}
.flip-back::before{
  content:''; width:88px; height:88px;
  background:url('/assets/img/logo/favicon.png') center/contain no-repeat;
  opacity:.10;
}
/* İnce köşegen doku — düz beyaz yüzey ucuz durur */
.flip-back::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(14,26,11,.028) 0 1px, transparent 1px 11px);
}
/* Koyu bölümlerde arka yüz de koyu olur */
.flip-scene[data-tone="dark"] .flip-back{
  background:var(--ink-soft); border-color:var(--line-dark);
}
.flip-scene[data-tone="dark"] .flip-back::before{ opacity:.14 }
.flip-scene[data-tone="dark"] .flip-back::after{
  background:repeating-linear-gradient(135deg,
    rgba(246,245,240,.035) 0 1px, transparent 1px 11px);
}

/* JS çalışmazsa içerik olduğu gibi görünür — kart hiç kurulmaz. */

/* ── Üstte kaydırma ilerleme çizgisi ─────────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:200;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  pointer-events:none;
}

/* ── Başlık satırları: maske + hafif 3B yatış ────────────────────── */
.reveal-line{ perspective:800px }
.reveal-line > span{
  transform:translateY(105%) rotateX(-32deg);
  transform-origin:top center;
  transition:transform var(--t) var(--ease);
}
.hero__slide-copy[data-active="true"] .reveal-line > span{ transform:translateY(0) rotateX(0) }

/* ── Referans logoları: sırayla belirir ──────────────────────────── */
.client{ transition:background 420ms var(--ease) }
.client:hover{ background:var(--bone-warm) }

/* ── Sayaçlar: görünürken hafif yukarı süzülür ───────────────────── */
.stat b{ transition:transform var(--t) var(--ease) }

/* ══════════════════════════════════════════════════════════════════════
   15b · YÜZEN HIZLI İLETİŞİM (WhatsApp + telefon)
   ══════════════════════════════════════════════════════════════════════ */
.quick-contact{
  position:fixed; right:18px; bottom:18px; z-index:120;
  display:flex; flex-direction:column; gap:12px;
}
.quick-contact__btn{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 22px -8px rgba(14,26,11,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quick-contact__btn svg{ width:28px; height:28px }
.quick-contact__btn--wa{ background:#25D366 }
.quick-contact__btn--tel{ background:var(--ink) }
.quick-contact__btn:hover{ transform:scale(1.08); box-shadow:0 12px 28px -8px rgba(14,26,11,.6) }
/* WhatsApp'ta dikkat çekmek için ilk yüklemede hafif nabız */
.quick-contact__btn--wa::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:qcPulse 2.4s var(--ease) infinite;
}
@keyframes qcPulse{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
.quick-contact__btn{ position:relative }
@media (max-width:600px){
  .quick-contact{ right:14px; bottom:14px; gap:10px }
  .quick-contact__btn{ width:50px; height:50px }
  .quick-contact__btn svg{ width:26px; height:26px }
}
@media (prefers-reduced-motion: reduce){ .quick-contact__btn--wa::after{ display:none } }

/* ── Çerez onay bandı ────────────────────────────────────────────── */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  background:var(--ink); color:var(--on-dark-soft);
  transform:translateY(100%); transition:transform .5s var(--ease);
  border-top:1px solid var(--line-dark);
}
.cookie[data-show="true"]{ transform:translateY(0) }
.cookie__inner{
  max-width:var(--wrap); margin:0 auto; padding:var(--s4) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
}
.cookie p{ margin:0; font-size:13.5px; line-height:1.6; max-width:70ch }
.cookie a{ color:var(--lime); text-decoration:underline; text-underline-offset:2px }
.cookie__actions{ flex-shrink:0 }
@media (max-width:600px){
  .cookie__inner{ flex-direction:column; align-items:stretch; gap:var(--s3) }
  .cookie__actions .btn{ width:100%; justify-content:center }
  /* Çerez bandı EKRANDAYKEN yüzen butonları yukarı it; kabul edilip
     kaldırılınca butonlar normal konumuna döner (body sınıfı ile). */
  body.cookie-open .quick-contact{ bottom:150px }
}

/* ── 16 · Erişilebilirlik ───────────────────────────────────────────── */
.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--bone); padding:12px 20px; font-size:14px;
}
.skip:focus{ left:var(--gutter); top:var(--s3) }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .reveal-line > span{ transform:none!important }
  .hero__slide img{ transform:none!important }
  .card{ transform:none!important }
  .card__img,.card h4,.card__no{ transform:none!important }
  .scroll-progress{ display:none }
}

/* Dokunmatik cihazlarda eğim ve mıknatıs kapalı — imleç yok */
@media (hover: none){
  .card{ transform:none!important }
  .card__img,.card h4,.card__no{ transform:none!important }
  .card__img::after{ display:none }
}