/* ══════════════════════════════════════════════════════════════
   MİHENK — ortak stylesheet
   Tüm sayfaların paylaştığı katman: token'lar, tipografi, header,
   footer, buton/form kiti ve tekrar eden bileşenler.
   Sayfaya özgü CSS ilgili HTML dosyasının kendi <style> bloğunda kalır.
   Fontlar assets/fonts.css içinde ayrı yüklenir.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* AYAR SPEKTRUMU — altın alaşımlarının mihenk taşında bıraktığı iz renkleri */
  --yesil:#C4D44E;   /* yeşil altın */
  --sari:#F2C044;    /* sarı altın  */
  --pembe:#E8886A;   /* pembe altın */
  --beyaz:#BFCEDA;   /* beyaz altın */

  /* Mürekkep ve zemin AYRI iki üçlü olarak duruyor. Sitedeki bütün yarı
     saydam tonlar (çizgiler, perdeler, kart zeminleri) bu ikisinden
     türüyor; tema çevrildiğinde yalnızca bu iki satır değişiyor,
     elli altı ayrı sabit renk tek tek düzeltilmiyor. */
  --murekkep:20,17,15;
  --zemin:245,241,233;
  --murekkep-kati:#14110F;

  --bg:#F5F1E9;
  --bg-2:#EFE9DE;
  --line:rgba(var(--murekkep),.14);
  --paper:#14110F;
  /* İki kademe ikincil metin. Eski değerler .60/.50 idi; .50 zemine karşı
     4.86:1'de, AA eşiğinin (4.5:1) hemen üstünde kalıyordu ve kart içi gövde
     metnini de o taşıyordu. Yeni değerler 8.5:1 ve 5.7:1 — aradaki kademe
     farkı korunuyor, taban yükseliyor.
       --dim    : okunacak ikincil metin (paragraf, liste, kart gövdesi)
       --dimmer : okunmayacak mikro tipografi (etiket, mono künye, dipnot) */
  --dim:rgba(var(--murekkep),.72);
  /* Kağıt zeminde .58 ölçüldüğünde 4.33:1 veriyordu — küçük mono etiketler
     (çerez satırı, rozet künyeleri, "Tüm hizmetler" bağı) AA eşiğinin
     altında kalıyordu. .66 ile 5.2:1'e çıkıyor, kademe farkı korunuyor. */
  --dimmer:rgba(var(--murekkep),.66);
  --hata:#A34630;

  --disp:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* Vurgu sesi: yalnızca dikkat çekmesi gereken yerde devreye giriyor. */
  --vurgu:"Instrument Serif",Georgia,"Times New Roman",serif;

  --gut:clamp(20px,5.5vw,88px);
  --sec:clamp(104px,12vh,164px);
  /* ana sayfa geniş ızgara kullanır, iç sayfalar okuma genişliğinde kalır */
  --shell:1240px;

  /* HAREKET EĞRİLERİ — sitede yalnızca bu ikisi kullanılır.
       --e-out  : genel amaçlı yavaşlama; hover, açılma, yer değiştirme
       --e-soft : uzun mesafeli girişler; sonuna doğru daha yumuşak oturur
     Yeni bir geçiş yazarken üçüncü bir eğri uydurulmaz — hareketin tek elden
     çıkmış hissetmesi, sürelerden çok eğri tutarlılığına bağlı. */
  --e-out:cubic-bezier(.2,.7,.2,1);
  --e-soft:cubic-bezier(.16,1,.3,1);
  /* basma geri bildirimi: girerken hızlı, bırakırken normal hıza döner */
  --bas:90ms;

  --ac:var(--sari);
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* height:0 -> auto geçişlerini açar (SSS içeriği, form hata mesajı).
   Desteklemeyen tarayıcıda kural yok sayılır ve o geçişler anında olur —
   içerik her hâlükârda doğru görünür, sadece yumuşama kaybolur. */
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
body{
  background:var(--bg);color:var(--paper);
  font-family:var(--sans);font-weight:380;font-size:17.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* film grenli doku — her sayfada aynı */
body::after{content:'';position:fixed;inset:0;z-index:96;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--sari);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--sari);outline-offset:3px}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.inner{--shell:1100px}

/* klavyeyle gezenler için: header'ı atlayıp doğrudan içeriğe.
   fixed — absolute olsaydı sayfa kaydırılmışken belge başında, ekran dışında kalırdı. */
/* top'a --bar-h EKLENMEZ: gizlenme translateY(-160%) ile yapılıyor ve bu,
   elemanın kendi yüksekliğine göre hesaplanıyor. Bar top değerini aşağı
   ittiğinde -160% artık ekranın dışına çıkarmaya yetmiyor ve link yarı
   görünür kalıyordu. Odaklanınca barın üstünü örtmesi sorun değil —
   geçici bir katman, z-index'i zaten en üstte. */
.skip{position:fixed;top:12px;left:12px;z-index:120;transform:translateY(-160%);
  background:var(--paper);color:var(--bg);border-radius:100px;padding:11px 22px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .25s var(--e-out)}
.skip:focus-visible{transform:translateY(0)}

/* ═══ özel imleç ═══
   Mihenk taşı, üzerine sürülen alaşımın rengini okur. İmleç de öyle:
   üzerinde durduğu öğenin --ac değerini alır, bölümden bölüme renk
   değiştirir. Hero'daki imleç ışığının devamı, yeni bir dil değil.

   İKİ PARÇA, çünkü tek parça iki işi birden yapamıyor:
     · .imlec-nok — nokta çekirdek, imlecin TAM üstünde, gecikmesiz.
                    Nişan alma işini bu görür; ok ucunun yerini tutan şey
                    budur. Daire, yönü olmadığı için en okunur nişan biçimi.
     · .imlec     — halka, hafif gecikmeyle takip eder. Kişilik burada.
   Gecikmeyi çekirdeğe vermek imleci kullanılamaz yapar; halkaya vermek
   ise tek maliyeti "hoş görünmek" olan bir şey.

   Yerel imleç `cursor:none` ile yalnızca JS kurulumu başarılıysa gizlenir
   (html.imlec-ozel sınıfını JS ekler). JS çalışmazsa ok yerinde kalır —
   imleçsiz bir sayfa, imleçsiz kullanıcı demektir.

   2026-09-16: bir turda "kasıyor" diye kaldırıldı, kullanıcı "cursor güzeldi"
   dedi ve aynen geri geldi. Görünüm aynı; çizim maliyeti düşürüldü:
     · iki parça kendi derleme katmanında (will-change) — imleç kayınca
       altındaki sayfa yeniden boyanmıyor;
     · drop-shadow filtresi yerine aynı görünen box-shadow — hareket eden
       öğede filtre her karede yeniden hesaplanabiliyordu;
     · contain:layout style — konum değişikliği sayfanın geri kalanına sızmıyor.

   Konum `translate`, boyut `scale` ile veriliyor: ayrı özellikler olduğu
   için JS konumu yazarken CSS boyutu bağımsız yönetiyor, transform
   üzerinde çakışmıyorlar. İkisi de derleme katmanında kalır. */
.imlec-ozel,.imlec-ozel *{cursor:none}
/* Form alanlarında yerel imleç GERİ GELİR. Metin içinde nişan almanın
   gerçekten önemli olduğu tek yer burası; I-kirişi orada bir süs değil,
   imlecin metnin neresine gireceğini gösteren araç. */
.imlec-ozel input,.imlec-ozel textarea,.imlec-ozel [contenteditable="true"]{cursor:auto}
.imlec-ozel select,.imlec-ozel option{cursor:pointer}

/* çekirdek: alaşım renginde küçük nokta */
.imlec-nok{position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:var(--imlec,var(--paper));
  box-shadow:0 0 2px 1px rgba(var(--zemin),.45);
  pointer-events:none;z-index:111;opacity:0;scale:1;
  will-change:translate,scale;contain:layout style;
  transition:opacity .2s var(--e-out),scale .24s var(--e-out),background-color .3s var(--e-out)}
.imlec-nok.gorunur{opacity:1}
/* etkileşimde çekirdek çekilir, işaret etme işini büyüyen halka devralır */
.imlec-nok.etkilesim{scale:0}
.imlec{position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1.5px solid var(--imlec,var(--paper));
  /* Sayfa koyu ama iki parlak alan var: gradyan başlık ve dolgulu butonlar.
     Sarı halka sarı başlığın üstünde kayboluyordu. Gölge rengi değiştirmeden
     kenarı ayırıyor — blend modu kullanılmadı, o alaşım rengini bozardı. */
  box-shadow:0 0 3px rgba(var(--zemin),.55),inset 0 0 3px rgba(var(--zemin),.55);
  pointer-events:none;z-index:110;opacity:0;scale:.6;
  will-change:translate,scale;contain:layout style;
  transition:opacity .25s var(--e-out),scale .28s var(--e-out),
             border-color .3s var(--e-out),background-color .3s var(--e-out)}
.imlec.gorunur{opacity:.7;scale:1}
/* etkileşimli öğe: halka büyür ve alaşım rengiyle hafifçe dolar */
.imlec.etkilesim{opacity:1;scale:1.9;
  background:color-mix(in srgb,var(--imlec,var(--paper)) 16%,transparent)}
.imlec.bas{scale:1.4}
/* Dokunmatikte imleç diye bir şey yok. JS zaten pointer:fine dışında ikisini
   de oluşturmuyor; bu kural ikinci emniyet — ve noktayı da kapsamak zorunda,
   yoksa halka gizlenirken nokta ortada kalırdı. */
@media (hover:none),(pointer:coarse){.imlec,.imlec-nok{display:none}}

/* ═══ duyuru barı ═══
   Yönetilen markaların toplam cirosu. Rakam UYDURULMAZ: assets/mihenk.js
   içindeki HACIM sabitinden, gerçek bir taban tutar + gerçek aylık hacim
   ile hesaplanır. Sabitler doldurulmadıysa bar hiç basılmaz — sahte bir
   sayının kazara yayına çıkması bu sitede en pahalı hata olurdu.

   Yükseklik --bar-h değişkenine yazılır; header, scroll çubuğu ve bölüm
   çapa hizaları o değişkene bakar. Bar kapatılınca değişken sıfırlanır ve
   her şey eski yerine oturur. */
:root{--bar-h:0px}
/* Gözle görünmez, ekran okuyucuya okunur. Sürekli değişen sayacın kendisi
   aria-hidden; anlamı bu sabit cümleyle taşınıyor. display:none olsaydı
   ekran okuyucu da göremezdi. */
.gorsel-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.duyuru{position:fixed;top:0;left:0;right:0;z-index:95;
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,18px);
  padding:9px var(--gut);background:var(--bg-2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim)}
/* alaşım izi — sitenin kendi işareti, şimşek değil */
.duyuru .iz-m{width:16px;height:4px;border-radius:100px;flex-shrink:0;
  background:linear-gradient(90deg,var(--yesil),var(--sari) 40%,var(--pembe));
  transform:rotate(-10deg)}
.duyuru b{font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.04em;
  color:var(--paper);
  /* sabit genişlikli rakamlar: sayaç dönerken satır sağa sola oynamasın */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.duyuru .kapat{position:absolute;right:calc(var(--gut) - 8px);top:50%;translate:0 -50%;
  width:30px;height:30px;border:0;background:none;color:var(--dimmer);cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:color .3s var(--e-out),background-color .3s var(--e-out)}
.duyuru .kapat:hover{color:var(--paper);background:rgba(var(--murekkep),.06)}
.duyuru .kapat:active{scale:.9}
.duyuru .kapat svg{width:11px;height:11px}
.duyuru .et-kisa{display:none}
@media(max-width:720px){
  .duyuru{font-size:.6rem;letter-spacing:.1em;padding-right:46px}
  .duyuru .et-uzun{display:none}
  .duyuru .et-kisa{display:inline}
  .duyuru b{font-size:.74rem}
  /* dar ekranda iki iz yer kaplıyor, biri yeter */
  .duyuru .iz-m:last-of-type{display:none}
}

/* ═══ scroll progress — spektrum ═══
   scaleX ile çizilir: her kaydırma karesinde width yazmak yerleşimi yeniden
   hesaplatıyordu, transform sadece derleme katmanında kalıyor. */
.prog{position:fixed;top:var(--bar-h);left:0;height:2.5px;width:100%;z-index:90;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--yesil),var(--sari) 34%,var(--pembe) 68%,var(--beyaz))}

/* ═══ tipografi ═══ */
.d1{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,8.4vw,7.2rem);line-height:.96;letter-spacing:-.032em;font-variation-settings:"wdth" 90}
.d2{font-family:var(--disp);font-weight:600;font-size:clamp(2rem,4.9vw,3.9rem);line-height:1.02;letter-spacing:-.035em;font-variation-settings:"wdth" 90}
.d3{font-family:var(--disp);font-weight:600;font-size:1.18rem;line-height:1.24;letter-spacing:-.02em}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.66;color:var(--dim);max-width:46ch}
/* arka arkaya gelen giriş paragrafları birbirine yapışmasın */
.lede+.lede{margin-top:18px}
.lbl{font-family:var(--mono);font-size:.685rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.lbl a:hover{color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
/* Kağıt zeminde parlak alaşımlar yazı olarak okunmuyordu ("satmıyoruz."
   soluk mavi-gri çıkıyordu). Gradyan koyu uçlarla kuruluyor: renk kimliği
   duruyor, kontrast geliyor. */
/* VURGU KELİMESİ — gradyan değil, ses değişimi.
   Önce dört renkli bir gradyan vardı; kağıt zeminde hem soluk kalıyordu hem
   de yirmi başlıkta tekrarlanınca renk dekorasyona dönüşüyordu. Yerine
   yazının TONU değişiyor: gövde grotesk, vurgu serif italik. İki ayrı ses
   arasındaki fark, aynı sesi büyütmekten daha çok dikkat çekiyor —
   referans olarak verilen ajans sitelerinin de yaptığı bu.
   Renk bölümün alaşımından geliyor, okunur koyulukta. */
.grad{font-family:var(--vurgu);font-style:italic;font-weight:400;
  letter-spacing:-.005em;
  color:color-mix(in srgb,var(--ac,var(--sari)) 45%,var(--murekkep-kati));
  background:none;-webkit-text-fill-color:currentColor;
  /* Serif gövdesi grotesk'ten optik olarak küçük durur; hizayı korumak için
     bir tık büyütülüyor. */
  font-size:1.08em}
@keyframes slide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* iç sayfalarda başlıklar sınıfsız yazılır */
.inner h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.5rem,6.4vw,4.8rem);line-height:1;
  letter-spacing:-.035em;font-variation-settings:"wdth" 88;max-width:16ch}
.inner h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.025em;margin-bottom:26px}
.inner .lede{max-width:52ch}
/* hukuki metinler daha uzun ve daha yoğun — başlıklar küçülür, satırlar sıkışır */
.legal-doc h1{max-width:20ch}
.legal-doc h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:18px}
.legal-doc .lede{max-width:56ch}
.legal-doc section{padding:clamp(28px,4.4vh,44px) 0}

/* sayfa vurgu rengi — dört alaşımdan biri */
.ac-yesil{--ac:var(--yesil)}
.ac-sari{--ac:var(--sari)}
.ac-pembe{--ac:var(--pembe)}
.ac-beyaz{--ac:var(--beyaz)}

/* ═══ header ═══ */
header{position:fixed;top:var(--bar-h);left:0;right:0;z-index:80;padding:20px 0;
  background:linear-gradient(180deg,rgba(var(--zemin),.9),rgba(var(--zemin),0));backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
header.scrolled,body.inner header{background:rgba(var(--zemin),.88);border-bottom-color:var(--line)}
/* .mmenu header'ın çocuğu ve header backdrop-filter yüzünden kendi yığın bağlamını
   kuruyor: menünün z-index:70'i bu bağlamın içinde .hbar'ı örtüyordu — logo ve
   kapatma butonu menü açıkken tıklanamaz hale geliyordu. Bar menünün üstünde kalmalı. */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:71}
.logo{font-family:var(--disp);font-weight:700;font-size:1.16rem;letter-spacing:.24em;text-indent:.24em;
  display:inline-flex;align-items:center;gap:11px;order:1}
.logo svg{flex-shrink:0}
.hnav{display:flex;gap:clamp(16px,2.4vw,30px);margin-left:auto;margin-right:clamp(14px,2vw,28px);order:2}
/* dikey dolgu görsel değil ölçü kararı: satır 18px, WCAG 2.5.8 en az 24px ister.
   header zaten flex/center hizaladığı için dolgu yerleşimi kaydırmıyor. */
/* nav bir okuma metni değil bir hedef listesi — mikro tipografiden bir kademe
   yukarıda tutulur, yoksa 11px büyük harf ayırt edilmesi zorlaşıyor */
.hnav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);transition:color .3s;padding:5px 0;position:relative}
.hnav a:hover{color:var(--paper)}
/* bulunduğun sayfa — ya da ana sayfada o an ekrandaki bölüm — nav'da işaretli kalsın.
   Renk tek başına taşımasın diye altına bir de alaşım çizgisi çekilir. */
.hnav a[aria-current]{color:var(--paper)}
.hnav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:var(--sari);animation:navMark .4s var(--e-soft)}
@keyframes navMark{from{transform:scaleX(0)}}
.hend{order:3;display:flex;align-items:center;gap:14px}
@media(max-width:1120px){.hnav{display:none}}

/* ═══ mobil menü ═══ */
/* 44×44: mobilde menüyü açan tek kontrol bu; eskiden 34×34 idi ve
   WCAG 2.5.8'in asgari hedef ölçüsünün altında kalıyordu. Çubuklar
   kutunun büyümesine göre yeniden ortalandı, görünen boy aynı. */
.mbtn{display:none;width:44px;height:44px;margin-right:-6px;border:0;background:none;cursor:pointer;position:relative;flex-shrink:0}
@media(max-width:1120px){.mbtn{display:block}}
.mbtn i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--paper);
  transition:transform .3s var(--e-out),opacity .3s}
.mbtn i:nth-child(1){top:18px}
.mbtn i:nth-child(2){top:26px}
.mbtn[aria-expanded="true"] i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.mbtn[aria-expanded="true"] i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
/* Menü listesi ekrandan uzun olabiliyor (ana sayfada 11 bağlantı var).
   max-height + kaydırma olmadan son maddeler erişilemez kalıyordu;
   overscroll-behavior arkadaki sayfanın birlikte kaymasını engelliyor. */
.mmenu{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--bg);
  border-bottom:1px solid var(--line);padding:96px var(--gut) 32px;
  display:flex;flex-direction:column;gap:2px;
  max-height:100svh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);opacity:0;transition:transform .35s var(--e-out),opacity .3s}
.mmenu.open{transform:translateY(0);opacity:1}
.mmenu a{font-family:var(--disp);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;color:var(--paper);
  padding:14px 0;border-bottom:1px solid var(--line)}
.mmenu a:hover{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
@media(min-width:1121px){.mmenu{display:none}}

/* ═══ butonlar ═══ */
.cta{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bg);padding:13px 26px;border:0;cursor:pointer;
  border-radius:100px;position:relative;overflow:hidden;text-align:left;
  background:linear-gradient(100deg,var(--yesil),var(--sari) 38%,var(--pembe));background-size:200% 100%;
  transition:background-position .6s var(--e-out),transform .35s var(--e-out);
}
.cta:hover{background-position:100% 50%;transform:translateY(-2px)}
/* mıknatıs etkisi: imleç yaklaşınca buton hafifçe ona doğru kayar.
   `translate` ayrı bir özellik — üstteki :hover transform'uyla çakışmıyor. */
.cta{translate:var(--mx,0) var(--my,0);
  transition:background-position .6s var(--e-out),
             transform .35s var(--e-out),
             translate .3s var(--e-out)}
.cta .dot{width:6px;height:6px;border-radius:50%;background:var(--bg);opacity:.55;flex-shrink:0}
.cta[disabled]{opacity:.55;cursor:not-allowed;transform:none}
/* Basma: :hover'dan SONRA gelmeli, aynı ağırlıkta olduğu için sıraya bakılıyor.
   Kalkma yerine hafif çökme — parmağın altında bir şey olduğu hissi. */
.cta:active{transform:scale(.97);transition-duration:var(--bas)}
/* ikincil buton — aynı ölçü, dolgusuz */
.cta.ghost{background:none;color:var(--paper);border:1px solid var(--line)}
.cta.ghost:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));background:none}
.cta.ghost .dot{background:var(--ac);opacity:1}
.back{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dimmer);transition:color .3s}
.back:hover{color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}

/* ═══ bölüm iskeleti ═══ */
/* scroll-margin sabit header'ın atlanan bölümü kırpmasını engeller */
section{padding:var(--sec) 0;position:relative;scroll-margin-top:calc(104px + var(--bar-h))}
.inner section{padding:clamp(40px,6vh,70px) 0}
.head{margin-bottom:clamp(42px,6vw,74px)}
/* ── BÖLÜM İMZASI: etiket değil, iz künyesi ──────────────────────────
   Sayfanın kavramı şu: metali taşa sürersin, bıraktığı izden ayarı
   okursun. Bölüm etiketi bu yüzden düz bir yazı değil — yanında o izin
   kendisi çiziliyor, etiket de izin künyesi gibi duruyor.
   Zamanlama tek bir hareket kurar: önce iz sürülür (.42s), sonra başlık
   onun arkasından silinerek gelir (index.html'deki .head h2 gecikmesi
   bu yüzden .28s). Sıra bozulursa hareket iki ayrı efekte dağılır. */
.head .lbl{display:inline-flex;align-items:center;gap:13px;margin-bottom:22px;
  vertical-align:middle}
.head .lbl::before{content:'';width:32px;height:5px;border-radius:100px;flex-shrink:0;
  background:linear-gradient(90deg,var(--yesil),var(--sari) 34%,var(--pembe) 68%,var(--beyaz));
  transform:rotate(-8deg);transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
/* Varsayılan ÇİZİLİ. Sıfırlama yalnızca gözlenen (.rv) başlıklarda geçerli:
   hakkimizda ve iletisim sayfalarındaki .head'lerde .rv yok, orada .in hiç
   gelmeyeceği için iz kalıcı görünmez kalırdı. */
.head.rv:not(.in) .lbl::before{transform:rotate(-8deg) scaleX(0)}
/* Başlık ile giriş paragrafı arasındaki boşluk kuralla verilir. Önceden her
   bölümde `style="margin-top:24px"` olarak elle yazılıyordu; on beş kopya,
   tek bir değeri değiştirmeyi on beş düzenlemeye çeviriyordu.
   Kural .head-c ile sınırlı: iç sayfalardaki .head blokları kendi ölçülerini
   satır içinde veriyor, buradan ezilmemeleri gerekiyor. */
.head-c h2+.lede,.head-c .big+.lede,.head-c h2+.card-note{margin-top:24px}
.head-c .lede+.card-note{margin-top:20px}
/* bölüm girişleri sayfanın en çok tekrar eden bloğu — grup olarak ortalanır */
.head-c{text-align:center}
.head-c .lede,.head-c .big,.head-c .card-note{margin-left:auto;margin-right:auto}
.head-c .slots,.head-c .chips{justify-content:center}

/* ── İKİNCİ RİTİM ──────────────────────────────────────────────────
   Sayfadaki yirmi iki bölümün yirmi ikisi de ortalıydı: hepsi aynı
   tonda konuşunca hiçbiri öne çıkmıyordu. Ayrım şuraya konuldu —
     .head-c : iddia bölümleri (teşhis, kanıt, kontenjan, kapanış).
               Ortalı, ilan gibi durur.
     .head-s : argüman ve liste bölümleri (hizmetler, teslimat, süreç,
               sözlük, roller, yatırım). İddia solda, gerekçesi sağda,
               altında bir cetvel — belge ritmi.
   Yeni bölüm eklerken ikisinden birini seçmek gerekir; varsayılan yok. */
/* satır boşluğu 0: etiket–başlık aralığını .head .lbl'in kendi
   margin-bottom'u verir, grid gap'i eklenirse ikisi üst üste biner */
.head-s{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:0 clamp(20px,3.6vw,58px);align-items:end;
  padding-bottom:clamp(24px,3vw,34px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(38px,5vw,58px)}
.head-s>.lbl{grid-area:1/1}
.head-s>h2{grid-area:2/1}
/* giriş paragrafı başlığın taban çizgisine oturur, tepesine değil */
.head-s>.lede{grid-area:1/2/3/3;align-self:end;max-width:44ch}
@media(max-width:880px){
  .head-s{display:block}
  .head-s>.lede{margin-top:20px}
}
/* Ardından gelen liste kendi üst çizgisini çiziyorsa başlık cetveli düşer;
   yoksa aralarında birkaç piksellik boşlukla iki paralel çizgi kalıyor. */
.head-s:has(+ .soz),.head-s:has(+ .beyan),.head-s:has(+ .foy){border-bottom:0;padding-bottom:0}
/* İki sütunlu düzenin anlamı, iddianın solda gerekçesinin sağda durması.
   Giriş paragrafı olmayan bölümlerde (eleme, ilkeler) sağ sütun boş kalıyor
   ve başlık yarım genişliğe sıkışıyordu — orada tek sütuna düşülür,
   cetvel kalır. */
.head-s:not(:has(>.lede)){display:block}

/* ═══ iç sayfa hero ═══ */
/* Üst boşluk .inner .p-hero olarak yazılmak ZORUNDA: yukarıdaki
   `.inner section` kuralı (0,1,1) düz `.p-hero`dan (0,1,0) daha güçlü ve
   170px'i clamp(40px,6vh,70px)'e düşürüyordu. Sonuç: iç sayfaların hepsinde
   sabit menü h1'in üstünü kesiyor, etiketi tamamen örtüyordu.
   Değer --bar-h'e bağlı, çünkü duyuru barı açıkken menü o kadar aşağıda
   başlıyor; sabit bir sayı iki durumdan birinde yanlış olurdu. */
.p-hero{position:relative;overflow:hidden}
.inner .p-hero{padding:calc(var(--bar-h) + 148px) 0 clamp(48px,7vh,80px)}
.p-hero::before{content:'';position:absolute;width:46vw;height:46vw;right:-14vw;top:-24vw;border-radius:50%;
  background:var(--ac);filter:blur(120px);opacity:.16;pointer-events:none}
.p-hero .lbl{display:block;margin-bottom:22px}
.p-hero h1{margin-bottom:22px}
.p-hero>.shell>*{opacity:0;transform:translateY(18px);animation:up .9s var(--e-soft) forwards}
.p-hero>.shell>*:nth-child(2){animation-delay:.1s}
.p-hero>.shell>*:nth-child(3){animation-delay:.2s}
.p-hero>.shell>*:nth-child(4){animation-delay:.3s}
/* 404 gibi tek bloklu sayfalarda hero ekranı doldurur */
.p-hero.full{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0}
@keyframes up{to{opacity:1;transform:none}}

/* ═══ kapsam listesi ═══ */
.sc{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sc li{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);padding:16px 18px 16px 40px;
  font-size:.96rem;position:relative;line-height:1.55}
.sc li::before{content:'';position:absolute;left:17px;top:25px;width:12px;height:3px;border-radius:3px;background:var(--ac)}

/* ═══ adım listesi ═══ */
.step{display:grid;grid-template-columns:130px minmax(0,1fr);gap:clamp(18px,3vw,34px);padding:24px 0;border-top:1px solid var(--line)}
.step:last-of-type{border-bottom:1px solid var(--line)}
.step .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));padding-top:.45em}
.step h3{font-family:var(--disp);font-weight:600;font-size:1.1rem;letter-spacing:-.015em}
.step p{font-size:.94rem;color:var(--dim);margin-top:6px}

/* ═══ ölçüm kartları — hizmet sayfalarında "neyi ölçüyoruz" ═══ */
/* KUTU YOK. Sayfada kutu çok; ölçüm kartları da kutuysa "ölçü" ile
   "hizmet" ile "teslimat" aynı nesne gibi okunuyordu. Rakam ve tanım bir
   kap istemiyor — ayıran şey ince bir dikey çizgi yetiyor. Vurgu rengi
   çizgide, kart kenarında değil. */
.olc{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.olc div{position:relative;padding:2px 0 2px clamp(18px,2.2vw,26px);
  border-left:1px solid var(--line)}
.olc div:first-child{padding-left:0;border-left:0}
/* çizginin üst kısmı alaşım rengine boyanır — bölümün rengi buradan okunur */
.olc div:not(:first-child)::before{content:'';position:absolute;left:-1px;top:0;
  width:1px;height:34px;background:var(--ac)}
.olc .m-e{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:12px}
.olc b{display:block;font-family:var(--disp);font-weight:600;font-size:1.02rem;
  letter-spacing:-.018em;line-height:1.24;margin-bottom:9px}
.olc p{font-size:.86rem;color:var(--dim);line-height:1.58;max-width:30ch}
@media(max-width:900px){
  .olc{grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,30px) 0}
  .olc div:nth-child(odd){padding-left:0;border-left:0}
  .olc div:nth-child(odd)::before{display:none}
}
@media(max-width:480px){
  .olc{grid-template-columns:1fr;gap:0}
  /* tek sütunda dikey çizgi anlamını yitirir; ayırıcı yataya döner */
  .olc div{padding:clamp(18px,4vw,22px) 0;border-left:0;border-top:1px solid var(--line)}
  .olc div:first-child{padding-top:0;border-top:0}
  .olc div::before{display:none}
}

/* ═══ vurgu bloğu ═══ */
.state{border-radius:20px;border:1px solid var(--line);background:var(--bg-2);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden}
.state::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac)}
.state::after{content:'';position:absolute;width:280px;height:280px;right:-80px;top:-140px;border-radius:50%;
  background:var(--ac);filter:blur(80px);opacity:.22}
.state p{position:relative;z-index:1;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.3vw,1.66rem);
  letter-spacing:-.022em;line-height:1.36;max-width:36ch}

/* ═══ sayfa sonu çağrı bloğu ═══ */
.go{border-radius:22px;border:1px solid var(--line);background:var(--bg-2);padding:clamp(30px,5vw,56px);position:relative;overflow:hidden}
.go::after{content:'';position:absolute;width:360px;height:360px;left:50%;bottom:-220px;transform:translateX(-50%);
  border-radius:50%;background:var(--ac);filter:blur(100px);opacity:.2}
.go>*{position:relative;z-index:1}
.go h2{margin-bottom:14px}
.go p{color:var(--dim);max-width:52ch;margin-bottom:26px}
.go-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ═══ önceki/sonraki ═══ */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pn-a{border:1px solid var(--line);border-radius:16px;background:var(--bg-2);padding:20px 24px;
  transition:border-color .4s,transform .4s var(--e-out)}
.pn-a:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));transform:translateY(-2px)}
.pn-a span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:8px}
.pn-a b{font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:-.015em}
.pn-r{text-align:right}
@media(max-width:640px){.pn{grid-template-columns:1fr}.pn-r{text-align:left}}

/* ═══ hukuki metin ═══ */
.legal p{color:var(--dim);max-width:68ch;margin-bottom:14px}
.legal p:last-child{margin-bottom:0}
.legal ul{list-style:none;max-width:68ch;margin-top:6px}
.legal ul li{padding:8px 0 8px 22px;position:relative;color:var(--dim);line-height:1.55}
.legal ul li::before{content:'';position:absolute;left:0;top:17px;width:10px;height:2px;border-radius:2px;background:var(--ac)}
.legal .sc{margin-top:6px}
.legal .sc li{color:var(--dim);font-size:.94rem;padding:16px 18px 16px 40px}
.legal .sc li::before{left:17px;top:25px;width:12px;height:3px}
.legal .upd{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-top:6px}

/* ═══ etiket çipleri ═══ */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.chip i{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ═══ SSS ═══ */
.faq{max-width:840px}
.head-c+.faq{margin-left:auto;margin-right:auto}
.qa{border:1px solid var(--line);border-radius:16px;background:var(--bg-2);margin-bottom:12px;overflow:hidden;transition:border-color .4s}
.qa[open]{border-color:rgba(var(--murekkep),.22)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 24px;
  font-family:var(--disp);font-weight:600;font-size:1.03rem;letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa .qdot{width:8px;height:8px;border-radius:50%;background:var(--ac);flex-shrink:0}
.qa .ic{width:12px;height:12px;position:relative;flex-shrink:0;margin-left:auto}
.qa .ic::before,.qa .ic::after{content:'';position:absolute;background:var(--ac);border-radius:2px;transition:transform .35s}
.qa .ic::before{left:0;right:0;top:5px;height:2px}
.qa .ic::after{top:0;bottom:0;left:5px;width:2px}
.qa[open] .ic::after{transform:scaleY(0)}
.qa .qp{padding:0 24px 22px 48px;color:var(--dim);font-size:.95rem;line-height:1.68;max-width:62ch}
/* Sayfanın en sık tıklanan etkileşimi buydu ve içerik anında açılıyordu.
   ::details-content <details>'in kendi içerik kutusu — sarmalayıcı div
   eklemeden animasyon yapmanın tek yolu. Desteklemeyen tarayıcıda blok
   tümüyle atlanır ve açılış eskisi gibi anında olur. */
@supports selector(::details-content){
  .qa::details-content{
    height:0;overflow:hidden;opacity:0;
    transition:height .3s var(--e-out),opacity .22s var(--e-out),content-visibility .3s allow-discrete;
    transition-behavior:allow-discrete}
  .qa[open]::details-content{height:auto;opacity:1}
}
.faq .qa:nth-child(4n+1){--ac:var(--yesil)}
.faq .qa:nth-child(4n+2){--ac:var(--sari)}
.faq .qa:nth-child(4n+3){--ac:var(--pembe)}
.faq .qa:nth-child(4n+4){--ac:var(--beyaz)}

/* ═══ ekip ═══ */
/* 168px alt sınır dar telefonlarda tek kolona düşüyor ve 4/5 oranındaki kart
   ekranın yarısını kaplayan boş bir kutuya dönüşüyordu. 148px'te 375px'lik
   ekran bile iki kolon taşıyor; kartlar derli toplu kalıyor. */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:clamp(12px,1.8vw,22px)}
.who{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);
  transition:border-color .5s,transform .5s var(--e-out)}
.who:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));transform:translateY(-3px)}
.face{aspect-ratio:4/5;background:rgba(var(--murekkep),.04);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden}
.face img{width:100%;height:100%;object-fit:cover}
/* Fotoğraf yokken kutuya dosya yolu yazmak yerine alaşım renginde monogram:
   boşluk kaza değil, tasarım kararı gibi okunur. Fotoğraf gelince .mono
   yerine bir görsel etiketi konur, buradaki kuralların hiçbiri değişmez. */
.face .mono{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);
  letter-spacing:.06em;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));opacity:.85;font-variation-settings:"wdth" 88}
.face:has(.mono){background:
  radial-gradient(110% 80% at 50% 0%,rgba(var(--murekkep),.07),transparent 62%),rgba(var(--murekkep),.03)}
.face::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ac)}
.who-b{padding:18px 20px 22px}
.who-b h3{font-family:var(--disp);font-weight:600;font-size:1.02rem;letter-spacing:-.015em}
.who-b p{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dimmer);margin-top:7px;line-height:1.7}

/* ═══ vaka kartları ═══ */
.cases{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.card{position:relative;border-radius:22px;padding:clamp(26px,3.4vw,46px);background:var(--bg-2);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .55s var(--e-out),border-color .55s}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac);
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--e-out)}
.card.in::before{transform:scaleY(1)}
/* Köşe ışıması radyal gradient ile; .sv ile aynı gerekçe. filter:blur(84px)
   340px'lik bir daireyi bulanıklaştırıyordu ama maliyet dairenin değil,
   filtreyi taşıyan kartın kutusunun (1195×471) yeniden rasterize edilmesi
   kadardı — vaka bölümünde iki tane. Gradient aynı yumuşaklığı filtresiz
   veriyor ve hover'daki opaklık geçişi artık katman yeniden çizmiyor. */
.card::after{content:'';position:absolute;width:340px;height:340px;right:-90px;top:-120px;
  background:radial-gradient(circle,var(--ac) 0%,transparent 68%);
  opacity:.30;transition:opacity .55s;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:rgba(var(--murekkep),.2)}
.card:hover::after{opacity:.42}
.card-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,60px);align-items:center}
.card-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:20px}
.was{font-family:var(--mono);font-size:.9rem;color:var(--dimmer);margin-bottom:10px}
.now{font-family:var(--disp);font-weight:700;font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:1;
  letter-spacing:-.04em;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));font-variation-settings:"wdth" 86}
.card-note{margin-top:24px;font-size:.96rem;line-height:1.7;color:var(--dim);max-width:44ch}
.shot{aspect-ratio:16/10;border-radius:14px;background:rgba(var(--murekkep),.04);overflow:hidden;position:relative;
  border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shot .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);text-align:center;padding:18px}
.shot .ph b{color:var(--dim);font-weight:400}
.foot-note{margin-top:clamp(28px,4vw,44px);font-size:.9rem;color:var(--dim);max-width:56ch}
.cases .card:nth-child(2){transition-delay:.09s}
.cases .card:nth-child(3){transition-delay:.18s}
/* Mobilde görsel ÖNE ALINMAZ. order:-1 yazılıydı ve masaüstünde sağda
   duran ekran görüntüsü telefonda kartın en üstüne geçiyordu; o kutu
   şimdilik boş bir yer tutucu olduğu için sayfanın en ikna edici öğesi —
   ciro rakamı — boş bir kutunun altına gömülüyordu. Metin önce gelir. */
@media(max-width:900px){.card-in{grid-template-columns:1fr;gap:24px}}
/* vaka kartının altındaki "ne yaptık" dökümü */
.card-more{position:relative;z-index:1;margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.card-more .k{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:9px}
.card-more p{font-size:.9rem;color:var(--dim);line-height:1.62}
@media(max-width:760px){.card-more{grid-template-columns:1fr;gap:20px}}

/* ═══ iletişim kanalları ═══ */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
.ccard{display:block;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);
  padding:clamp(24px,3vw,34px);position:relative;overflow:hidden;
  transition:border-color .5s,transform .5s var(--e-out)}
.ccard::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);opacity:.9}
.ccard::after{content:'';position:absolute;width:200px;height:200px;right:-60px;bottom:-130px;border-radius:50%;
  background:var(--ac);filter:blur(60px);opacity:.16;transition:opacity .5s}
a.ccard:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));transform:translateY(-3px)}
a.ccard:hover::after{opacity:.32}
.ccard>*{position:relative;z-index:1}
.ccard .k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:16px}
.ccard b{display:block;font-family:var(--disp);font-weight:600;font-size:1.1rem;letter-spacing:-.018em;line-height:1.25}
.ccard p{font-size:.88rem;color:var(--dim);margin-top:10px;line-height:1.6}
.ccards>*:nth-child(3n+1){--ac:var(--yesil)}
.ccards>*:nth-child(3n+2){--ac:var(--sari)}
.ccards>*:nth-child(3n+3){--ac:var(--pembe)}
@media(max-width:820px){.ccards{grid-template-columns:1fr}}

/* ═══ form ═══ */
form{margin-top:clamp(34px,5vw,52px);max-width:680px}
.head-c+form{margin-left:auto;margin-right:auto}
.f{margin-bottom:26px}
.f label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:10px}
.f input,.f select,.f textarea{
  width:100%;background:rgba(var(--murekkep),.04);border:1px solid var(--line);border-radius:12px;
  color:var(--paper);font-family:var(--sans);font-size:1rem;font-weight:300;padding:14px 16px;
  transition:border-color .35s,background .35s;
}
/* .26 opaklıkta yer tutucular zemine karşı 2.2:1 kalıyordu — okunmuyorlardı.
   .48 hem AA eşiğini (4.5:1) geçiyor hem dolu alandan ayırt edilebilir duruyor. */
.f input::placeholder,.f textarea::placeholder{color:rgba(var(--murekkep),.48)}
/* Odaklanınca kenarlık ve zemin değişir — ama bu tek başına odak göstergesi
   sayılmaz: 1px'lik renk değişimi, hele hata durumundaki kenarlıkla yan yana,
   ayırt edilebilir değil. Eskiden buradaki outline:none küresel :focus-visible
   kuralını da yeniyordu (0,1,1 > 0,1,0) ve klavyeyle gezen kullanıcı formda
   halkasız kalıyordu. Artık halka yalnızca fare tıklamasında kaldırılıyor. */
.f input:focus,.f select:focus,.f textarea:focus{border-color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati));background:rgba(var(--murekkep),.07)}
.f input:focus:not(:focus-visible),
.f select:focus:not(:focus-visible),
.f textarea:focus:not(:focus-visible){outline:none}
.f textarea{resize:vertical;min-height:92px}
.f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dimmer) 50%),linear-gradient(135deg,var(--dimmer) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 17px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px)}
@media(max-width:900px){.pair{grid-template-columns:1fr}}
/* doğrulama hatası — renk tek başına taşımasın diye metin de yazılır */
.f.err input,.f.err select,.f.err textarea{border-color:var(--hata);background:rgba(232,136,106,.07)}
/* Hata mesajı eskiden display:none -> block ile pat diye beliriyor, altındaki
   alanları da bir anda aşağı itiyordu. Artık yükseklikten açılıyor: metin
   yerine oturur, sonrasındaki alanlar sıçramaz. height:auto yalnızca
   interpolate-size destekleyen tarayıcıda yumuşar; desteklemeyende eskisi
   gibi anında görünür — davranış aynı, sadece geçiş yok. */
.f .msg{display:block;height:0;overflow:hidden;opacity:0;margin-top:0;
  transition:height .26s var(--e-out),opacity .18s var(--e-out),margin-top .26s var(--e-out);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hata);text-align:left}
.f.err .msg{height:auto;opacity:1;margin-top:8px}
.consent{display:flex;align-items:flex-start;gap:12px;margin-bottom:28px;cursor:pointer;text-align:left}
/* Dokunma hedefi kutunun kendisi değil bütün etiket — .consent bir <label>,
   metne dokunmak da işaretliyor. Kutu yine de 16px'te küçük görünüyordu:
   18px'te onay durumu bir bakışta okunuyor. */
.consent input{margin-top:2px;width:18px;height:18px;accent-color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati));flex-shrink:0;cursor:pointer}
.consent span{font-size:.86rem;color:var(--dim);line-height:1.55}
.consent a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
.consent.err span{color:var(--hata)}
/* gönderim sonrası durum mesajı — ekran okuyucuya da duyurulur */
.fstatus{margin-top:20px;font-size:.9rem;color:var(--dim);line-height:1.6;text-align:left}
.fstatus:empty{margin-top:0}
.fstatus b{font-weight:400;color:color-mix(in srgb,var(--yesil) 45%,var(--murekkep-kati))}
.fstatus a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.fstatus a:hover{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
.fnote{margin-top:14px;font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);line-height:1.9;text-align:left}
.fnote a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.fnote a:hover{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}

/* ═══ footer ═══ */
footer{border-top:1px solid var(--line);background:var(--bg-2)}
/* iç sayfalarda son bölümle footer arasında nefes payı */
.inner footer{margin-top:clamp(40px,6vh,70px)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(20px,3.4vw,36px);padding:clamp(44px,6.5vh,68px) 0 36px}
.fcol .flogo{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.22em;text-indent:.22em;color:var(--paper);display:block}
.fcol p{font-size:.86rem;color:var(--dim);line-height:1.6;margin-top:14px;max-width:32ch}
.fh{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-bottom:14px}
.fcol a,.fcol .floc{display:block;font-size:.87rem;color:var(--dim);padding:5px 0;transition:color .3s}
/* Kaba işaretçide (parmak) alt bilgi bağlantıları 44px'e açılır; farede
   liste sıkışık kalsın diye kural pointer:coarse ile sınırlı. */
@media(pointer:coarse){.fcol a{padding:12px 0}}
.fcol a:hover{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
.fbar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dimmer);padding:22px 0;border-top:1px solid var(--line)}
/* alt bar linkleri 14px yükseğindeydi; dokunma hedefi 24px'e çıkarılır */
.fbar a{display:inline-block;padding:5px 0;transition:color .3s}
.fbar a:hover{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fcol:first-child{grid-column:span 2}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}.fcol:first-child{grid-column:span 1}}

/* ═══ basma geri bildirimi ═══
   Sitede hover'da yükselen çok sayıda kart var ama basıldığında hiçbiri tepki
   vermiyordu. Hover yalnızca imleçli cihazlarda çalışır — dokunmatikte kullanıcı
   parmağını kaldırana kadar hiçbir şey olmuyordu. Ölçü kasten küçük: kart ne
   kadar büyükse yüzde olarak o kadar az çökmeli, yoksa sayfa esniyormuş gibi
   görünüyor. Süre kısa (var(--bas)), çünkü geri bildirimin gecikmesi olmaz.

   :hover kurallarından SONRA gelmek zorunda — ikisi de tek sınıf ağırlığında,
   kazananı kaynak sırası belirliyor.

   Burada YALNIZCA bu dosyada tanımlı bileşenler var. Sayfaya özgü kartların
   (.sv, .tile, .sy, .kat li, .tesl article, .badge, .il, .ph-b, .dog li)
   :hover kuralları index.html'in kendi <style> bloğunda ve o blok bu dosyadan
   SONRA yükleniyor; buraya yazılan :active onları ezemez. Onların basma ve
   dokunmatik kuralları index.html içinde, kendi hover kurallarının hemen
   ardında duruyor. */
.pn-a:active,a.ccard:active,.who:active,.olc div:active,.card:active{
  transform:scale(.994);transition-duration:var(--bas)}
/* SSS başlığı bir düğme gibi davranır; ölçüsü küçük olduğu için biraz daha çöker */
.qa summary:active{transform:scale(.985);transition-duration:var(--bas)}
.qa summary{transition:transform var(--bas) var(--e-out)}

/* Dokunmatikte :hover diye bir durum yok ama tarayıcılar dokunulan öğeye onu
   yine de yapıştırıyor: kart parmağını çektikten sonra da kalkık kalıyor,
   başka bir yere dokunana kadar öyle duruyor. İmleçsiz cihazda kalkma iptal —
   geri bildirimi yukarıdaki :active zaten veriyor. */
@media (hover:none){
  .pn-a:hover,a.ccard:hover,.who:hover,.olc div:hover,.card:hover,.cta:hover{transform:none}
}

/* Stagger yalnızca açılışa aittir. nth-child üzerindeki transition-delay
   değerleri hover ve basma geçişlerine de sızıyordu: altıncı karta hover
   yaptığında tepki çeyrek saniye gecikiyordu. Etkileşim anında sıfırlanır. */
.sv:hover,.sv:active,.sv:focus-visible,
.sy:hover,.sy:active,.sy:focus-visible,
.card:hover,.card:active,
.tile:hover,.tile:active,
.who:hover,.who:active,
.kat li:hover,.kat li:active,
.tesl article:hover,.tesl article:active,
.olc div:hover,.olc div:active{transition-delay:0s}

/* ═══ reveal ═══
   .rv işaretli her eleman görünüş alanına girdiğinde bağımsız olarak açılır.
   JS kapalıysa aşağıdaki <noscript> hepsini görünür bırakır — içerik hiçbir
   koşulda scroll hareketinin arkasında kilitli kalmaz.

   Giriş hareketi elemanın rolüne göre değişir. Yüz küsur elemanın hepsi aynı
   yönde kayınca sayfa tek bir jesti yirmi kez tekrarlıyordu; şimdi üç aile var:
     · bölüm girişi (.head)      — yukarı doğru yükselir, sayfanın ana atağı
     · ızgara kartları           — yerinde büyür, yan yana kayma olmaz
     · liste satırları           — soldan sağa sürülür (taşa sürülen iz)
   Hepsi zaten görünür bir varsayılandan üstel yavaşlamayla çıkar.

   Süre .52s. Eskiden .7s idi ve bu, tetikleme noktası düzeltilmeden önce
   fark edilmiyordu — eleman ekranın altındayken başlayıp okuma hizasına
   gelene kadar biten bir animasyonun uzunluğu görünmez. Tetikleme okuma
   hizasına çekilince .7s açıkça geç kaldı: kullanıcı yazıya bakarken yazı
   hâlâ yerine oturuyordu. */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .52s var(--e-soft),transform .52s var(--e-soft)}
.rv.in{opacity:1;transform:none}

/* ızgara kartları: dikey kayma yerine yerinde oturma */
.sv.rv,.tile.rv,.who.rv,.ccard.rv,.y-k.rv,.olc div.rv,.tesl article.rv,.ph-c.rv,.sy.rv{
  transform:scale(.975) translateY(10px)}
.sv.rv.in,.tile.rv.in,.who.rv.in,.ccard.rv.in,.y-k.rv.in,.olc div.rv.in,
.tesl article.rv.in,.ph-c.rv.in,.sy.rv.in{transform:none}

/* liste satırları: alaşım çizgisinin geldiği yönden sürülür */
.no li.rv,.ilke li.rv,.kat li.rv,.dahil li.rv{transform:translateX(-16px);
  transition-duration:.46s}
.no li.rv.in,.ilke li.rv.in,.kat li.rv.in,.dahil li.rv.in{transform:none}
/* aynı listedeki satırlar sırayla gelsin — hepsi birden değil */
.no li.rv:nth-child(2),.ilke li.rv:nth-child(2),.kat li.rv:nth-child(2){transition-delay:.035s}
.no li.rv:nth-child(3),.ilke li.rv:nth-child(3),.kat li.rv:nth-child(3){transition-delay:.07s}
.no li.rv:nth-child(4),.ilke li.rv:nth-child(4),.kat li.rv:nth-child(4){transition-delay:.105s}
.kat li.rv:nth-child(5){transition-delay:.14s}
.kat li.rv:nth-child(6){transition-delay:.175s}
.kat li.rv:nth-child(7){transition-delay:.21s}
.kat li.rv:nth-child(8){transition-delay:.245s}

/* dipnot ve form: hareket yok, sadece belirme — okunacak metin kaymaz */
.foot-note.rv,.svc-note.rv,form.rv{transform:none}

/* Bölüm girişi kaymaz. İz çizilir + başlık silinerek gelir zaten iki
   vuruşluk bir hareket; üstüne bir de blok yukarı kayınca gösteri üç
   ayrı efekte dağılıyordu. Kalan tek şey belirme. */
.head.rv{transform:none}

/* ═══ görüş alanı dışındaki sürekli animasyonlar durur ═══
   Sayfada aynı anda yirmi beş sonsuz animasyon vardı; bunların yirmisi
   background-clip:text ile boyanan gradient başlıklar ve on sekiz bin piksellik
   belgenin her yerinde, ekranda olmadıkları hâlde her karede yeniden
   boyanıyorlardı. .off işaretini JS koyar (assets/mihenk.js), IntersectionObserver
   bölümü ekrandan çıkardığında. Duran animasyon konumunu koruyor — geri
   girdiğinde kaldığı yerden devam ediyor, sıçrama olmuyor.

   İşaret BÖLÜME konur, animasyonlu elemanın kendisine değil. Önce tek tek
   .grad'lar gözlenmişti: hero başlığı .hline{overflow:hidden} içinde duruyor
   ve açılış animasyonu sırasında henüz kırpılmış olduğu için gözlemci onu
   "ekran dışında" sayıp kalıcı olarak durduruyordu — sayfanın en görünür
   animasyonu ölü doğuyordu. Bölüm kutusu kırpılmıyor, dönmüyor: doğru ölçü o.

   Yalnızca SONSUZ animasyonlar duraklatılır. Tek seferlik olanlar (izlerin
   çizilmesi, taşın parlaması) listede yok: yarıda dondurulurlarsa iz yarım
   çizili kalıyor, kazanç da yok — zaten bir kez çalışıp bitiyorlar. */
.off .grad,.off .mq-track,.off .blob,.off .vs-new::after,
.off .ref-t,.off .cue span{animation-play-state:paused}

@media(max-width:700px){
  .sc{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:6px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Animasyonlar tümüyle durur. Geçişler DURMAZ, daraltılır: rahatsızlık
     veren şey yer değiştirme, renk değil. Süreyi topluca .01ms'ye çekmek
     hover/focus geri bildirimini de siliyor ve kontroller ölü hissettiriyordu.
     Bu yüzden geçiş listesi yalnızca hareketsiz özelliklere indirilir. */
  *,*::before,*::after{animation:none!important}
  *,*::before,*::after{
    transition-property:color,background-color,border-color,outline-color,opacity,fill,stroke,box-shadow!important;
    transition-duration:140ms!important}
  .rv{opacity:1;transform:none}
  /* Ay bandının çubukları .in ile açılıyor; hareket kapalıyken .in gelse de
     gelmese de görünür olmalılar, yoksa bant boş bir şerit gibi duruyor. */
  .ay-bant .ay-p{transform:none}
  .card::before{transform:none}
  .p-hero>.shell>*{opacity:1;transform:none}
  .grad{background-position:0 50%}
}

/* ═══ hizmetler sayfası: öbekler ═══
   On hizmeti alfabetik ya da rastgele dizmek bir liste yapar, sayfa yapmaz.
   Öbek, hizmetin markanın hangi sorusuna cevap verdiğini söylüyor: Ayar
   (bu marka ne?), Talep (nasıl satılır?), Üretim (nasıl her gün aynı
   kalitede söylenir?), Koruma (elimizden nasıl alınmaz?). Sıra da bu —
   ayar belirlenmeden talep üretmenin anlamı yok.

   Öbek başlığı ana sayfadaki bölüm girişinden kasten farklı: orada etiket
   üstte ve ortalı, burada öbek adı solda büyük, gerekçesi sağda. İki sayfa
   aynı kalıbı tekrar etmesin. */
.hz-obek{padding:clamp(48px,6vw,86px) 0}
.hz-obek+.hz-obek{border-top:1px solid var(--line)}
.hz-bas{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(20px,4vw,56px);align-items:baseline;
  margin-bottom:clamp(30px,3.6vw,46px)}
.hz-n{font-family:var(--disp);font-weight:600;font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1;letter-spacing:-.035em;font-variation-settings:"wdth" 90;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:flex;align-items:center;gap:14px}
/* Öbek adının yanındaki iz: alaşımın taşta bıraktığı sürtme işareti,
   sayfanın her yerinde tekrarlanan aynı imza. */
.hz-n::before{content:'';width:26px;height:5px;border-radius:100px;flex-shrink:0;
  background:var(--ac);transform:rotate(-8deg);transform-origin:left center}
.hz-g{color:var(--dim);max-width:56ch}
@media(max-width:760px){
  .hz-bas{display:block}
  .hz-g{margin-top:14px}
}

/* ═══ hizmet kartı ═══
   Bu bileşen iki sayfada kullanılıyor (ana sayfadaki hizmetler bölümü ve
   hizmetler.html), o yüzden yeri paylaşılan katman. Ana sayfanın kendi
   <style> bloğundaydı ve hizmetler.html'e hiç ulaşmıyordu: kartlar orada
   kutusuz, ızgarasız, alt alta düz metin olarak çıkıyordu.
   Not: sayfa CSS'i bu dosyadan SONRA yüklendiği için ana sayfa istediği
   kuralı hâlâ ezebilir; taşımak kaskad sırasını bozmuyor.
   */
/* On kart dörtlü ızgarada 4+4+2 diziliyor ve son satır solda yetim
   kalıyordu. Flex'e alınca son satır ortalanıyor: kart sayısı değiştiğinde
   de (hizmet eklenip çıkarıldığında) düzen kendini toparlıyor. */
.svc{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,18px)}
.svc>.sv{flex:0 1 calc(25% - clamp(12px,1.6vw,18px)*3/4);min-width:0}
.sv{border:1px solid var(--line);border-radius:20px;background:var(--bg-2);padding:clamp(20px,2.4vw,30px);
  position:relative;overflow:hidden;transition:border-color .5s,transform .5s var(--e-out)}
.sv::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);opacity:.9}
/* Bulanık daire GRADYANLA çiziliyor, filter'la değil. filter:blur(60px)
   yirmi dört kartın her birinde ayrı bir bulanıklık geçişi demekti; aynı
   görüntüyü radyal gradyan bedavaya veriyor. */
.sv::after{content:'';position:absolute;width:260px;height:260px;right:-80px;bottom:-140px;
  background:radial-gradient(circle,var(--ac) 0%,transparent 68%);
  opacity:.20;transition:opacity .5s;pointer-events:none}
.sv:hover{border-color:rgba(var(--murekkep),.2);transform:translateY(-3px)}
.sv:hover::after{opacity:.32}
.sv>*{position:relative;z-index:1}
.sv{display:block}
.sv .tick{width:26px;height:5px;border-radius:100px;background:var(--ac);display:block;margin-bottom:16px;transform:rotate(-8deg);transform-origin:left}
.sv .more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));opacity:.7;transition:opacity .4s,gap .4s}
.sv:hover .more{opacity:1;gap:12px}
.sv h3{font-family:var(--disp);font-weight:600;font-size:1.04rem;letter-spacing:-.018em;line-height:1.22}
.sv p{font-size:.87rem;color:var(--dim);margin-top:8px;line-height:1.58}
.svc .sv:nth-child(4n+1){--ac:var(--yesil)}
.svc .sv:nth-child(4n+2){--ac:var(--sari)}
.svc .sv:nth-child(4n+3){--ac:var(--pembe)}
.svc .sv:nth-child(4n+4){--ac:var(--beyaz)}
.svc .sv:nth-child(2){transition-delay:.06s}
.svc .sv:nth-child(3){transition-delay:.12s}
.svc .sv:nth-child(4){transition-delay:.18s}
.svc .sv:nth-child(5){transition-delay:.06s}
.svc .sv:nth-child(6){transition-delay:.12s}
.svc .sv:nth-child(7){transition-delay:.18s}
.svc .sv:nth-child(8){transition-delay:.24s}
.svc-note{margin:clamp(24px,3.4vw,38px) auto 0;font-size:.9rem;color:var(--dim);max-width:56ch;text-align:center}
@media(max-width:980px){.svc>.sv{flex-basis:calc(50% - clamp(12px,1.6vw,18px)/2)}}
@media(max-width:540px){.svc>.sv{flex-basis:100%}}

/* Metin içi bağlantı: gövde akışında duran, altı çizili yönlendirme. */
.inl{color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab,var(--ac) 45%,transparent);
  transition:text-decoration-color .3s var(--e-out)}
.inl:hover{text-decoration-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}

/* Öbekte tek hizmet varsa (Ayar → Marka Stratejisi) kart dörtte bir
   genişlikte yalnız kalıyordu. Oysa o kalem öbeğin tamamı, üstelik
   altındaki her şeyin dayandığı temel; iki sütun kaplar. */
.hz-obek .svc>.sv:only-child{flex-basis:calc(50% - clamp(12px,1.6vw,18px)/2)}
@media(max-width:540px){.hz-obek .svc>.sv:only-child{flex-basis:100%}}

/* ═══ ÜRETİCİ SAYFASI ═══
   Sitede "e-ticaret" 38 kez geçiyordu, "üretici" 3 kez, "bayi/fason/toptan"
   hiç. Üretici siteye girdiğinde kendi kelimelerinden hiçbirini görmüyor ve
   sayfanın kendisine konuşmadığını saniyeler içinde anlıyordu. Bu sayfanın
   bileşenleri de ana sayfadakilerin kopyası değil: üreticinin okuma sırası
   farklı — önce korku, sonra üstünlük, sonra hazırlık.

   ── korku blokları ──
   Soru büyük ve solda, cevap sağda. Satın almayı engelleyen şey ilgi
   eksikliği değil cevaplanmamış korku; o yüzden soru cevaptan büyük. */
.krks{border-top:1px solid var(--line)}
.krk{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(18px,3.4vw,52px);align-items:start;
  padding:clamp(24px,3.4vw,40px) 0;border-bottom:1px solid var(--line)}
.krk-b{font-family:var(--disp);font-weight:600;
  font-size:clamp(1.25rem,2.7vw,1.9rem);line-height:1.12;letter-spacing:-.03em;
  font-variation-settings:"wdth" 90;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:flex;gap:13px}
/* Soru işareti gibi duran iz: alaşım markanın imzası, burada da tekrar ediyor */
.krk-b::before{content:'';width:20px;height:5px;border-radius:100px;flex-shrink:0;
  background:var(--ac);transform:rotate(-8deg);margin-top:.5em}
.krk p{color:var(--dim)}
@media(max-width:820px){.krk{display:block}.krk p{margin-top:12px}}

/* ── üstünlükler ──
   Korku bloklarından kasten farklı biçim: burada etiket üstte küçük, iddia
   ortada kalın, gerekçe altta. Aynı sayfada iki blok aynı görünürse sayfa
   yine tekdüze okunur. */
.ustl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.6vw,34px)}
.ust-s{padding:clamp(20px,2.6vw,30px) 0;border-top:2px solid var(--ac)}
.ust-e{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:block;margin-bottom:12px}
.ust-b{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.08rem,2vw,1.34rem);line-height:1.2;letter-spacing:-.022em;
  margin-bottom:9px}
.ust-s p{color:var(--dim);font-size:.94rem}
@media(max-width:760px){.ustl{grid-template-columns:1fr}}

/* ── sektör etiketleri ──
   Üreticinin ilk aradığı şey kendi sektörünü görmek. Liste değil, dağınık
   bir öbek: göz tarar, kendininkini bulur. */
.sekl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:clamp(20px,2.6vw,28px)}
.sek{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  transition:border-color .3s var(--e-out),color .3s var(--e-out)}
.sek:nth-child(4n+1){--ac:var(--yesil)}
.sek:nth-child(4n+2){--ac:var(--sari)}
.sek:nth-child(4n+3){--ac:var(--pembe)}
.sek:nth-child(4n+4){--ac:var(--beyaz)}
.sek:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}

/* ═══════════════════════════════════════════════════════════════════
   BÖLÜM SİSTEMİ — paylaşılan katman
   Bu bloklar ana sayfanın kendi <style> etiketindeydi ve orada kaldıkları
   sürece hizmetler.html ile ureticiler.html'e hiç ulaşmıyorlardı: o
   sayfalarda çetele beyaz düğme kutularına, basamak çift numaralı bir
   listeye dönüşüyor, bölüm muameleleri ve renk katmanı hiç uygulanmıyordu.
   Birden fazla sayfada kullanılan her şeyin yeri burası; sayfaya özgü
   kalanlar (tepeler, taşın odak hareketi) index.html'de duruyor ve bu
   dosyadan sonra yüklendikleri için gerektiğinde hâlâ ezebiliyorlar.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══ tarayıcının çizdiği yüzeyler ═══
   İmleç, kaydırma çubuğu ve odak halkası hiçbir tasarım sistemine ait
   olmayan varsayılanlarla geliyordu. Sayfanın paletine bağlanıyorlar. */
html{scrollbar-color:rgba(var(--murekkep),.22) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(var(--murekkep),.18);border-radius:100px;
  border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--murekkep),.3)}
input,textarea,select{caret-color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
/* Rakamlar tablo hizasında dursun: ciro sayaçları basamak değiştirirken
   satır genişliği oynuyordu. */
.cnt,.hero-stat,.now,.was,.k-dur{font-variant-numeric:tabular-nums}
/* ═══ KARTTAN ÇIKIŞ ═══
   Dokuz bölüm aynı atomu tekrarlıyordu: kenarlıklı kutu + küçük renkli
   çizgi + başlık + soluk metin. Düzenler farklı adlar taşısa da göz aynı
   kütleyi görüyor, sayfa tekdüze okunuyordu. Üç bölüm kutudan çıkarıldı ve
   içeriğine uygun kaba taşındı — kap içeriği anlatmalı, hepsini aynı
   kutuya koymak anlatmamanın kolay yolu.

   1) ÖLÇÜ → ölçüm föyü. Ölçüler karşılaştırılmak için vardır; ayrı
      kutulara bölününce yan yana okunamıyorlardı. Satır düzeninde eksen,
      rakam ve gerekçe aynı hizada; göz sütun sütun iniyor. */
.foy{border-top:1px solid var(--line)}
.foy-bas,.foy-s{display:grid;grid-template-columns:minmax(0,.16fr) minmax(0,.32fr) minmax(0,.52fr);
  gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line)}
.foy-bas{padding-top:12px;padding-bottom:12px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer)}
/* Eksen adı satırın künyesi: alaşım izi burada da tekrar ediyor. */
.foy-e{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:flex;align-items:center;gap:10px}
.foy-e::before{content:'';width:18px;height:4px;border-radius:100px;flex-shrink:0;
  background:var(--ac);transform:rotate(-8deg)}
.foy-r{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.32rem);
  line-height:1.2;letter-spacing:-.02em}
.foy-n{color:var(--dim);font-size:.96rem}
.foy-s{transition:background .2s var(--e-out)}
.foy-s:hover{background:rgba(var(--murekkep),.025)}
@media(max-width:820px){
  .foy-bas{display:none}
  .foy-s{display:block}
  .foy-r{display:block;margin:8px 0 6px}
}

/* 2) İLKELER → beyan. İlke bir duyurudur; kutuya konunca maddeye dönüşüp
      ağırlığını kaybediyordu. Kutu kalktı, başlık büyüdü, gerekçe yanına
      çekildi. Aralarındaki tek ayraç çizgi. */
.beyan{border-top:1px solid var(--line)}
.beyan-s{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
  gap:clamp(16px,3vw,48px);align-items:start;
  padding:clamp(26px,3.4vw,42px) 0;border-bottom:1px solid var(--line)}
.beyan-b{font-family:var(--disp);font-weight:600;
  font-size:clamp(1.35rem,2.9vw,2.05rem);line-height:1.1;letter-spacing:-.03em;
  font-variation-settings:"wdth" 90;display:flex;gap:14px}
.beyan-b::before{content:'';width:22px;height:5px;border-radius:100px;flex-shrink:0;
  background:var(--ac);transform:rotate(-8deg);margin-top:.55em}
.beyan-n{color:var(--dim)}
@media(max-width:760px){
  .beyan-s{display:block}
  .beyan-n{margin-top:12px}
}

/* 3) RİTİM → ay bandı. "Ayı üçe böleriz" anlatılacak değil gösterilecek
      bir şey: bant ayın kendisi, parçaların genişliği haftaların gerçek
      payı (1 / 2 / 1). Alttaki üç evre aynı oranlarda hizalanıyor, yani
      metin bandın altındaki karşılığı. */
.ay-bant{display:flex;gap:5px;height:9px;margin-bottom:clamp(18px,2.4vw,28px)}
.ay-p{background:var(--ac);border-radius:100px;opacity:.92;
  transform-origin:left center;transition:transform .6s var(--e-soft)}
.ay-bant:not(.in) .ay-p{transform:scaleX(0)}
.ay-bant.in .ay-p:nth-child(2){transition-delay:.12s}
.ay-bant.in .ay-p:nth-child(3){transition-delay:.24s}
.ay-liste{display:flex;gap:5px}
.ay-e{border-top:1px solid var(--line);padding-top:clamp(14px,1.8vw,20px);
  padding-right:clamp(12px,2vw,26px)}
.ay-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:block;margin-bottom:10px}
.ay-e h3{margin-bottom:8px}
.ay-e p{color:var(--dim);font-size:.94rem}
@media(max-width:760px){
  .ay-liste{display:block}
  .ay-e{flex:none!important;padding-right:0;margin-top:18px}
  .ay-e:first-child{margin-top:0}
}
/* ═══ BÖLÜM MUAMELELERİ ═══
   Yirmi üç bölüm aynı çerçeveyi paylaşıyordu: aynı etiket, aynı genişlik,
   aynı zemin. Düzenleri farklıydı ama ilk görülen şey hep aynı olduğu için
   fark okunmuyordu. Artık her bölüm bir muamele taşıyor ve hiçbiri
   komşusununkiyle aynı değil. Muameleler rastgele dağıtılmadı — bölümün
   işine göre seçildi: iddia dar ve ortalı, kanıt kenardan kenara, süreç
   çerçeveli sahnede, sözlük okuma ölçüsünde.

   ── temel ── taban. Ölçüt bu; diğerleri buna göre okunuyor.
   ── bant ── bir ton açık zemin, üst kenarından ışık. Renk farkı 4/3/2 RGB
      (kart zeminine yer bırakmak zorunda), o yüzden bölümü asıl ayıran şey
      renk değil giren ışık. */
main>section[data-t="bant"]{
  background:
    radial-gradient(140% 62% at 50% 0%,rgba(var(--murekkep),.035),transparent 68%),
    #EEE7DA;
  box-shadow:0 -1px 0 rgba(var(--murekkep),.10),0 1px 0 var(--line)}

/* ── sahne ── içerik çerçeveli bir panele alınıyor: bölüm sayfanın akışında
   değil, kendi kutusunda duruyor. Süreç ve karşılaştırma gibi "burada şunu
   izleyeceksin" diyen bölümler için. */
main>section[data-t="sahne"]{padding:clamp(30px,4vw,58px) 0}
main>section[data-t="sahne"]>.shell{
  border:1px solid var(--line);border-radius:clamp(20px,2.4vw,30px);
  background:#FDFBF6;box-shadow:0 18px 44px -28px rgba(var(--murekkep),.28);padding-top:clamp(38px,5vw,68px);padding-bottom:clamp(38px,5vw,68px);
  padding-left:clamp(22px,4vw,64px);padding-right:clamp(22px,4vw,64px);
  position:relative;overflow:hidden}
/* Sahnenin üst kenarında alaşım şeridi: çerçevenin künyesi. */
main>section[data-t="sahne"]>.shell::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--yesil),var(--sari) 34%,var(--pembe) 68%,var(--beyaz));
  opacity:.55}

/* ── tam ── kabuğun genişlik sınırı kalkıyor, içerik kenara doğru açılıyor.
   Kanıt ve kapanış için: sayfanın en geniş nefesi. */
main>section[data-t="tam"]>.shell{max-width:min(1560px,94vw)}

/* ── cizgi ── üstte kalın alaşım çizgisi ve bol boşluk. İlan bölümü:
   kontenjan bir kutu içinde değil, bir duyuru gibi duruyor. */
main>section[data-t="cizgi"]{padding-top:clamp(44px,6vw,86px)}
main>section[data-t="cizgi"]>.shell{border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--yesil),var(--sari) 34%,var(--pembe) 68%,var(--beyaz)) 1;
  padding-top:clamp(34px,4.4vw,60px)}

/* ── dar ── okuma ölçüsü. Sözlük gibi tek tek okunan bölümlerde tam genişlik
   gözü yoruyor; ölçü daraltılıyor. */
main>section[data-t="dar"]>.shell{max-width:min(920px,92vw)}

/* ═══ ETİKETSİZ BAŞLIK ═══
   Yirmi bölümde etiket kalktı (başlığın söylediğini tekrar ediyordu) ama
   alaşım izi markanın imzası — kaybolmamalı. İz artık başlığın kendisine
   bağlı ve muameleye göre değişiyor: temel/bant'ta başlığın önünde,
   sahne'de yok (çerçevenin kendi şeridi var), tam'da başlığın üstünde
   tam genişlikte, dar'da ortalı. Tek bir imza, dört ayrı duruş. */
main>section:not([data-t="sahne"]):not([data-t="cizgi"]) .head:not(:has(.lbl)) h2::before{
  content:'';display:block;width:34px;height:5px;border-radius:100px;
  margin-bottom:20px;background:var(--ac,var(--sari));
  transform:rotate(-8deg);transform-origin:left center}
main>section[data-t="tam"] .head:not(:has(.lbl)) h2::before{width:100%;height:2px;
  transform:none;opacity:.5;
  background:linear-gradient(90deg,var(--yesil),var(--sari) 34%,var(--pembe) 68%,var(--beyaz))}
main>section .head-c:not(:has(.lbl)) h2::before{margin-left:auto;margin-right:auto}

/* Etiket gidince başlık bloğunun üst boşluğu fazla kalıyordu. */
.head:not(:has(.lbl)) h2{margin-top:0}
/* ═══ teşhis çetelesi ═══
   Altı belirti altı kutuya bölünmüştü; sayfanın en çok tekrar eden kalıbı
   buydu. Kutular kalktı, yerine işaretlenebilir satırlar geldi: başlığın
   sorusu ("kaçı sizde var?") artık gerçekten cevaplanabiliyor. */
.cet-l{list-style:none;border-top:1px solid var(--line)}
.cet-s{display:flex;gap:clamp(14px,2vw,22px);align-items:flex-start;width:100%;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:clamp(16px,2.2vw,22px) 4px;cursor:pointer;color:inherit;font:inherit;
  transition:background .25s var(--e-out)}
.cet-s:hover{background:rgba(var(--murekkep),.03)}
/* Satır üstüne gelince sağa kayıyor ama padding DEĞİL, içerik ötelenerek:
   padding animasyonu her karede yerleşim hesaplatır. Kayan şey içerik;
   satırın kendisi ve alt çizgisi yerinde kalıyor, yoksa komşu çizgilerle
   kaçık duruyordu. */
.cet-k,.cet-m{transition:transform .25s var(--e-out)}
.cet-s:hover .cet-k,.cet-s:hover .cet-m{transform:translateX(10px)}
/* İşaret kutusu: boşken ince bir çerçeve, işaretlenince alaşım izi doluyor. */
.cet-k{width:22px;height:22px;border-radius:7px;flex-shrink:0;margin-top:3px;
  border:1px solid rgba(var(--murekkep),.28);position:relative;
  transition:border-color .25s var(--e-out),background .25s var(--e-out)}
.cet-k::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:4px;
  border-radius:100px;background:var(--ac);transform:translate(-50%,-50%) rotate(-8deg) scaleX(0);
  transition:transform .3s var(--e-soft)}
.cet-s[aria-pressed="true"] .cet-k{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));background:color-mix(in oklab,var(--ac) 14%,transparent)}
.cet-s[aria-pressed="true"] .cet-k::after{transform:translate(-50%,-50%) rotate(-8deg) scaleX(1)}
.cet-m b{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1rem,1.9vw,1.24rem);line-height:1.28;letter-spacing:-.02em;
  transition:color .25s var(--e-out)}
.cet-s[aria-pressed="true"] .cet-m b{color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
.cet-m em{display:block;font-style:normal;color:var(--dim);font-size:.92rem;
  line-height:1.6;margin-top:7px;max-width:70ch}
.cet-s:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:10px}
/* Sayaç: işaretlendikçe metni değişiyor, üçten sonra tonu sertleşiyor. */
.cet-say{margin-top:clamp(20px,2.6vw,28px);font-family:var(--mono);
  font-size:.78rem;letter-spacing:.04em;line-height:1.7;color:var(--dimmer);
  max-width:64ch;transition:color .3s var(--e-out)}
.cet-say.cet-uyari{color:color-mix(in srgb,var(--sari) 45%,var(--murekkep-kati))}
@media(prefers-reduced-motion:reduce){
  .cet-s:hover .cet-k,.cet-s:hover .cet-m{transform:none}
}
/* ═══ RAY — ilk 90 gün ═══
   Üç kutu, üç ayı anlatıyordu ama süreyi göstermiyordu. Doksan gün artık
   gerçekten bir çizgi: düğümler 0/30/60/90'da duruyor, fazlar rayın
   altında kendi üçte birlerine oturuyor. Süre okunacak değil görülecek. */
.ray-c{position:relative;height:34px;margin-bottom:clamp(16px,2.2vw,26px)}
.ray-h{position:absolute;left:0;right:0;top:9px;height:2px;border-radius:100px;
  background:linear-gradient(90deg,var(--yesil),var(--sari) 34%,var(--pembe) 72%,transparent);
  transform-origin:left center;transition:transform .9s var(--e-soft)}
.ray-c:not(.in) .ray-h{transform:scaleX(0)}
.ray-n{position:absolute;top:0;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:6px}
.ray-n::before{content:'';width:11px;height:11px;border-radius:50%;
  background:var(--ac,var(--dimmer));box-shadow:0 0 0 4px var(--bg);
  transition:transform .5s var(--e-soft)}
.ray-c:not(.in) .ray-n::before{transform:scale(0)}
.ray-n i{font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;color:var(--dimmer)}
.ray-son::before{background:rgba(var(--murekkep),.3)}
.ray-l{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,30px)}
.ray-f{border-top:1px solid var(--line);padding-top:clamp(14px,1.8vw,20px)}
.ray-g{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:block;margin-bottom:9px}
.ray-f h3{margin-bottom:8px}
.ray-f p{color:var(--dim);font-size:.92rem}
.ray-f ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px}
.ray-f li{font-size:.83rem;color:var(--dimmer);padding-left:15px;position:relative}
.ray-f li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:2px;
  border-radius:100px;background:var(--ac);opacity:.75}
@media(max-width:820px){
  .ray-c{display:none}
  .ray-l{grid-template-columns:1fr;gap:0}
  .ray-f{padding-bottom:clamp(16px,3vw,24px)}
}

/* ═══ BASAMAK — başvuru süreci ═══
   Beş adım kutulara bölünmüştü ve sıra hissi yoktu. Artık tek bir hattan
   sarkıyorlar: numara hattın üstünde, süre karşı tarafta. Rayın yatay
   olmasının sebebi süre, basamağın dikey olmasının sebebi sıra. */
.bsm{list-style:none;position:relative;padding-left:clamp(38px,5vw,62px)}
.bsm::before{content:'';position:absolute;left:clamp(14px,2vw,22px);top:12px;bottom:12px;
  width:1px;background:linear-gradient(180deg,var(--line),var(--line) 82%,transparent)}
.bsm-s{position:relative;padding:clamp(16px,2.4vw,26px) 0}
.bsm-s+.bsm-s{border-top:1px solid var(--line)}
.bsm-n{position:absolute;left:calc(-1 * clamp(38px,5vw,62px));top:clamp(20px,2.6vw,30px);
  width:clamp(28px,4vw,44px);text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));
  background:var(--bg);padding:3px 0;line-height:1}
.bsm-b{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.bsm-b h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,2vw,1.3rem);
  letter-spacing:-.02em}
.bsm-sr{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line);
  border-radius:100px;padding:4px 10px}
.bsm-g p{color:var(--dim);font-size:.94rem;max-width:72ch}
.bsm-siz{display:inline-flex;gap:9px;margin-top:12px;font-size:.83rem;color:var(--dimmer)}
.bsm-siz i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));flex-shrink:0;padding-top:.18em}

/* ═══ MADDE — rekabet taahhütleri ═══
   Dört taahhüt kart görünümündeydi; oysa bunlar sözleşme maddesi. Numara
   solda, taahhüt ortada, "size ait" mührü sağda — belge ritmi. */
.madde{border-top:1px solid var(--line)}
.madde-s{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.6vw,34px);align-items:start;
  padding:clamp(18px,2.6vw,28px) 0;border-bottom:1px solid var(--line)}
.madde-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dimmer);padding-top:.35em;white-space:nowrap}
.madde-b{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,2vw,1.3rem);
  letter-spacing:-.02em;margin-bottom:7px}
.madde-s p{color:var(--dim);font-size:.93rem}
/* Mühür: sözleşmedeki kaşe. Alaşım rengi maddenin kime ait olduğunu söylüyor. */
.madde-m{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));white-space:nowrap;
  border:1px solid color-mix(in oklab,var(--ac) 45%,transparent);
  border-radius:100px;padding:6px 12px;margin-top:.15em}
@media(max-width:760px){
  .madde-s{grid-template-columns:1fr;gap:8px}
  .madde-m{justify-self:start}
}

/* ═══ MANİFESTO — teslimat ═══
   Altı çıktı kutulardaydı; bunlar teslim edilen kalemler, yeri irsaliye.
   Ölçü föyünden ayrılsın diye burada noktalı dolgu var: başlıkla sıklık
   arasındaki boşluğu nokta dizisi dolduruyor, fatura satırı gibi. */
.man{border-top:1px solid var(--line)}
.man-bas{display:grid;grid-template-columns:minmax(0,.14fr) minmax(0,.64fr) minmax(0,.22fr);
  gap:clamp(12px,2vw,26px);padding:12px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer)}
.man-s{display:grid;grid-template-columns:minmax(0,.14fr) minmax(0,.64fr) minmax(0,.22fr);
  gap:clamp(12px,2vw,26px);align-items:baseline;
  padding:clamp(16px,2.2vw,24px) 0;border-bottom:1px solid var(--line);
  position:relative}
.man-t{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
.man-c h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,1.9vw,1.26rem);
  letter-spacing:-.02em;position:relative;display:inline-block;padding-right:10px}
/* noktalı dolgu: başlığın bittiği yerden sağa doğru */
.man-c h3::after{content:'';position:absolute;left:100%;bottom:.28em;width:60vw;
  border-bottom:1px dotted rgba(var(--murekkep),.18)}
.man-c p{color:var(--dim);font-size:.92rem;margin-top:7px;max-width:68ch}
.man-f{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--dimmer);text-align:right;position:relative;background:var(--bg);
  padding-left:8px}
main>section[data-t="bant"] .man-f{background:#100D0B}
@media(max-width:820px){
  .man-bas{display:none}
  .man-s{grid-template-columns:1fr;gap:6px}
  .man-f{text-align:left;background:none}
  .man-c h3::after{display:none}
}
/* ═══════════════════════════════════════════════════════════════════
   RENK KATMANI
   Buraya kadarki bütün farklılaştırma iskeleti değiştirdi, cildi değil:
   yirmi bölüm de neredeyse siyah zeminde 1px çizgiler ve 5px altın
   çizgiciklerle duruyordu. Uzaktan hepsi aynıydı — çünkü gerçekten aynıydı.
   Markanın dört alaşımı minik öğelerde hapsolmuştu.

   Artık her bölümün baskın bir alaşımı var, komşusuyla aynı değil ve renk
   ÖLÇEKLİ kullanılıyor: zeminde iki büyük aura, başlıkta renk, kenarda ton.
   Aura konumları bölüm bölüm farklı (satır içi --gx/--gy) — aynı efektin
   yirmi kez tekrarı yine tekdüzelik olurdu.
   ═══════════════════════════════════════════════════════════════════ */
main>section[data-c]{position:relative;isolation:isolate;overflow:clip}
main>section[data-c="yesil"]{--c:196,212,78;--ac:var(--yesil)}
main>section[data-c="sari"] {--c:242,192,68;--ac:var(--sari)}
main>section[data-c="pembe"]{--c:232,136,106;--ac:var(--pembe)}
main>section[data-c="beyaz"]{--c:191,206,218;--ac:var(--beyaz)}

/* Aura: bölümün rengini taşıyan iki geniş ışık. .16 opaklık bir kartın
   köşesinde görünmez ama ekranın yarısına yayıldığında bölümün havasını
   kuruyor. z-index:-1 ile içeriğin altında kalıyor. */
main>section[data-c]::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 46% at var(--gx,20%) var(--gy,10%),
      rgba(var(--c),.22),rgba(var(--c),.07) 45%,transparent 72%),
    radial-gradient(46% 42% at var(--gx2,85%) var(--gy2,90%),
      rgba(var(--c),.14),transparent 70%)}

/* Bant ve sahne zeminleri de artık nötr değil, bölümün rengiyle tonlanıyor:
   "koyu gri bir bant" yerine "yeşil bir bant" oluyor. */
main>section[data-t="bant"][data-c]{
  background:
    radial-gradient(140% 62% at 50% 0%,rgba(var(--c),.16),transparent 68%),
    color-mix(in oklab,rgb(var(--c)) 9%,#EEE7DA);
  box-shadow:0 -1px 0 rgba(var(--c),.42),0 1px 0 var(--line)}
main>section[data-t="sahne"][data-c]>.shell{
  background:
    radial-gradient(90% 70% at var(--gx,20%) var(--gy,10%),rgba(var(--c),.14),transparent 68%),
    color-mix(in oklab,rgb(var(--c)) 5%,#FDFBF6);
  border-color:rgba(var(--c),.34)}
main>section[data-t="sahne"][data-c]>.shell::before{
  background:linear-gradient(90deg,transparent,rgb(var(--c)) 22%,rgb(var(--c)) 78%,transparent);
  opacity:.85;height:2px}
main>section[data-t="cizgi"][data-c]>.shell{
  border-image:linear-gradient(90deg,transparent,rgb(var(--c)) 18%,rgb(var(--c)) 82%,transparent) 1}

/* Başlıktaki vurgu kelimesi artık sabit dört renkli gradyan değil, bölümün
   kendi alaşımı. Sayfa boyunca aynı gradyanın yirmi kez dönmesi rengi
   dekorasyona çeviriyordu; şimdi renk bölümün kimliği. */
/* background DEĞİL background-image: kısayol background-clip'i de sıfırlar
   ve metin maskesi ölür — vurgu kelimeleri renkli bloklara dönüşüyordu. */
main>section[data-c] .grad{color:color-mix(in srgb,rgb(var(--c)) 45%,var(--murekkep-kati))}
/* Bölüm başlığının izi de o rengi alıyor. */
main>section[data-c] .head h2::before{background:var(--ac)}

/* Kenar çizgileri: nötr beyaz yerine bölümün rengine çalan bir ton.
   Fark küçük ama yirmi bölüm boyunca bölümlerin ayrı ayrı hava tutmasını
   sağlayan şey bu ince tonlama. */
main>section[data-c] .foy-s,main>section[data-c] .foy,
main>section[data-c] .madde-s,main>section[data-c] .madde,
main>section[data-c] .man-s,main>section[data-c] .man,
main>section[data-c] .beyan-s,main>section[data-c] .beyan,
main>section[data-c] .cet-s,main>section[data-c] .cet-l{
  border-color:rgba(var(--c),.16)}

/* ═══ DOKU ═══
   İkinci gren katmanı (body::before, tam ekran, sabit, mix-blend-mode:overlay)
   2026-09-16'da KALDIRILDI. Karıştırma modlu sabit bir katman, kaydırmada ve
   imleç hareketinde altındaki her şeyin her karede yeniden karıştırılması
   demek; Retina ekranda bu 4 kat piksel. Doku kaybolmadı: body::after
   (normal karışım, %4,5) sayfanın başında aynı işi yapıyor. */
/* AURA ANİMASYONU KALDIRILDI — ölçüm gerekçesi:
   Yirmi dört bölümün her birinde sürekli dönen bir aura vardı; toplam
   animasyonlu alan 26 megapiksel, ekran ise 1 megapiksel. Yani tarayıcı
   ekranın yirmi altı katı kadar alanı, görünmese bile aralıksız
   kompozitliyordu. Üstelik on dokuz öğe will-change taşıyordu ve bu her
   birini kalıcı bir GPU katmanına çeviriyordu.

   Değerli olan renk, gezinme değildi. Aura duruyor, hareket gidiyor:
   sayfanın kimliği aynı kalıyor, sürekli iş sıfıra iniyor. */
main>section[data-c]::after{will-change:auto}
/* Üreticiye açılan kapı. Ana sayfa e-ticaret markasına konuşuyor; üretici
   buraya kadar geldiyse kendi sayfasına yönlendirilmeli, yoksa kendisine
   hitap etmeyen yirmi bölüm daha okuyup çıkıyor. */
.ur-gecis{display:flex;gap:clamp(16px,3vw,40px);align-items:center;
  justify-content:space-between;flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,42px);padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px);
  border:1px solid rgba(var(--c),.3);border-radius:18px;
  background:linear-gradient(100deg,rgba(var(--c),.10),transparent 62%)}
.ur-gecis b{font-family:var(--disp);font-weight:600;font-size:1.16rem;
  letter-spacing:-.02em;display:block;margin-bottom:6px}
.ur-gecis p{color:var(--dim);font-size:.92rem;max-width:56ch}

/* ═══ KARAR MATRİSİ — ajans mı, kendi ekibin mi ═══
   Sayfada hiç grafik öğe yoktu: yirmi yedi bölümün hepsi yazı ve çizgiden
   ibaretti, monotonluğun bir sebebi de buydu. Buradaki ağırlık çubukları
   dekorasyon değil — üç yolun birbirine göre durumunu okumadan önce
   gösteriyorlar; tablo okunmadan da hangi sütunun ne olduğu anlaşılıyor. */
.mtx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2.2vw,28px)}
.mtx-s{border-top:2px solid var(--ac);padding-top:clamp(16px,2vw,22px)}
.mtx-b{font-family:var(--disp);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.32rem);letter-spacing:-.022em;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:clamp(14px,1.8vw,20px)}
.mtx-r{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;
  align-items:center;margin-bottom:14px}
.mtx-e{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer)}
/* çubuk: değeri dolgu genişliği taşıyor, sayı yazmaya gerek yok */
.mtx-c{height:5px;border-radius:100px;background:rgba(var(--murekkep),.09);overflow:hidden}
.mtx-c i{display:block;height:100%;border-radius:100px;background:var(--ac);
  transform-origin:left center;transition:transform .8s var(--e-soft)}
.mtx-s:not(.in) .mtx-c i{transform:scaleX(0)}
.mtx-a{grid-column:1/-1;font-size:.83rem;color:var(--dim);line-height:1.5}
.mtx-n{margin-top:clamp(14px,1.8vw,20px);padding-top:14px;
  border-top:1px solid var(--line);font-size:.9rem;color:var(--dim)}
@media(max-width:880px){.mtx{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}}

/* ═══ ARAÇ YIĞINI ═══
   Katman katman: alıcı kendi bildiği aracı görmek istiyor, liste değil öbek
   tarıyor. Matristen kasten farklı biçim — aynı sayfada iki grafik blok
   birbirine benzerse sayfa yine tekdüze okunur. */
.yig{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.yig-k{display:grid;grid-template-columns:minmax(0,.2fr) minmax(0,.8fr);
  gap:clamp(12px,2vw,26px);align-items:center;
  padding:clamp(14px,1.8vw,18px) 0;border-bottom:1px solid rgba(var(--c),.14)}
.yig-e{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:flex;align-items:center;gap:10px}
.yig-e::before{content:'';width:16px;height:4px;border-radius:100px;flex-shrink:0;
  background:var(--ac);transform:rotate(-8deg)}
.yig-l{display:flex;flex-wrap:wrap;gap:8px}
.yig-a{font-size:.84rem;color:var(--dim);
  border:1px solid rgba(var(--c),.26);border-radius:8px;padding:6px 12px;
  background:rgba(var(--c),.05);
  transition:border-color .25s var(--e-out),color .25s var(--e-out)}
/* Araç adının yanında gerçek logosu. Liste otuz küsur satırdı ve hepsi aynı
   ağırlıkta okunuyordu; logosu olanı göz bir bakışta ayırıyor. Logosu
   olmayanlar (jenerik kalemler, "kargo entegrasyonları" gibi) yalın kalıyor
   — uydurma bir işaret koymaktansa boş bırakmak doğru. */
.yig-a{display:inline-flex;align-items:center;gap:7px}
.yig-i{width:14px;height:14px;display:block;flex-shrink:0}
.yig-i-g{width:auto;height:11px}
.yig-a:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
@media(max-width:700px){.yig-k{grid-template-columns:1fr;gap:10px}}

/* ═══ AYRILIK DEFTERİ ═══
   İki sütun karşı karşıya: solda size kalan, sağda bize kalmayan. Defter
   mantığı — karşıtlık düzenin kendisinde okunuyor. */
.dft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,3vw,40px)}
.dft-s{border-top:2px solid var(--ac);padding-top:clamp(16px,2vw,22px)}
.dft-e{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));display:block;
  margin-bottom:clamp(14px,1.8vw,20px)}
.dft-s ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.dft-s li{position:relative;padding-left:22px;color:var(--dim);font-size:.93rem;
  line-height:1.55}
.dft-s li::before{content:'';position:absolute;left:0;top:.58em;
  width:11px;height:3px;border-radius:100px;background:var(--ac);
  transform:rotate(-8deg);opacity:.8}
@media(max-width:760px){.dft{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}}

/* ═══ roller ve ara eylem satırı — paylaşılan katman ═══
   Bu kurallar ana sayfanın <style> etiketindeydi. Roller bölümü
   nasil-calisiyoruz.html'e taşınınca stilsiz kaldı: kartlar kayboldu,
   "Biz üstleniriz" ile "7 kalem" arasındaki boşluk gitti (flex gap
   uygulanmıyordu) ve numaralı liste tarayıcı varsayılanına düştü.
   Taşınan bir bölümün stili de taşınmalı. */

/* ═══ ara eylem satırı ═══
   Kanıt bölümü 6.300, başvuru formu 15.700 pikselde: aradaki dokuz bin
   pikselde ziyaretçinin harekete geçebileceği tek bir bağlantı yoktu.
   Bu satır o boşluğu kapatır. Bilerek kart değil — sayfa zaten kart dolu;
   iki ince çizgi arasında tek bir cümle, bölümler arası noktalama gibi. */
.act{margin:clamp(30px,4.4vw,50px) auto 0;padding:clamp(22px,3vw,30px) 0;max-width:820px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,34px);flex-wrap:wrap;text-align:center}

.act p{font-size:.95rem;color:var(--dim);max-width:36ch;line-height:1.6}

@media(max-width:620px){.act{flex-direction:column;gap:22px}}

.rol-c{border:1px solid var(--line);border-radius:20px;background:var(--bg-2);
  padding:clamp(22px,2.8vw,32px);position:relative;overflow:hidden}

.rol-c::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac);opacity:.9}

.rol-c>*{position:relative;z-index:1}

.rol-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}

.rol-h b{font-family:var(--disp);font-weight:600;font-size:1.16rem;letter-spacing:-.022em;color:var(--paper)}

.rol-h span{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));border:1px solid var(--line);border-radius:100px;padding:4px 10px}

.rol-c>p{font-size:.9rem;color:var(--dim);line-height:1.62;margin-bottom:20px;max-width:42ch}

.rol-c ol{list-style:none;counter-reset:rol;display:flex;flex-direction:column}

.rol-c li{counter-increment:rol;display:flex;gap:14px;align-items:flex-start;
  padding:13px 0;border-top:1px solid var(--line);font-size:.92rem;color:var(--dim);line-height:1.55}

.rol-c li::before{content:counter(rol,decimal-leading-zero);flex-shrink:0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));
  padding-top:.28em;min-width:2ch}

/* açıklama satırı başlığın ALTINA iner: li bir flex kutusu, o yüzden
   metin ve <em> tek bir <span> içinde sarılı — yoksa yan yana dizilirler. */
.rol-c li>span{display:block;min-width:0}

.rol-c li em{display:block;font-style:normal;color:var(--dimmer);font-size:.85rem;margin-top:3px}

.rol-biz{--ac:var(--yesil)}

.rol-siz{--ac:var(--beyaz)}

/* iki sütunun ağırlık farkı: yük bizde, bu görsel olarak da söylensin */
.rol-pay{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:18px;background:var(--bg-2);
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,30px)}

.rol-pay .bar{flex:1 1 220px;min-width:180px;height:8px;border-radius:100px;overflow:hidden;
  background:rgba(var(--murekkep),.08);display:flex}

.rol-pay .bar i{display:block;height:100%}

.rol-pay .bar i:nth-child(1){width:82%;background:var(--yesil)}

.rol-pay .bar i:nth-child(2){width:18%;background:var(--beyaz);opacity:.75}

.rol-pay p{font-size:.9rem;color:var(--dim);line-height:1.6;flex:1 1 300px;max-width:52ch}

.rol{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,20px);align-items:start}
@media(max-width:860px){.rol{grid-template-columns:1fr}}

/* ═══ KOYU ADA: hero ═══
   Sayfa aydınlığa geçti ama hero'nun arkasında koyu bir video var. İki
   token orada geri çevriliyor; içerideki bütün yarı saydam tonlar (çizgi,
   perde, kart zemini) kendiliğinden koyu şemaya dönüyor. Birinci aşamada
   elli altı sabit rengi token'a bağlamanın karşılığı bu: koyu ada iki
   satırla kuruluyor. */
.hero{--murekkep:245,241,233;--zemin:12,10,9;--murekkep-kati:#F5F1E9;
  --paper:#F5F1E9;--line:rgba(245,241,233,.12);
  --dim:rgba(245,241,233,.88);--dimmer:rgba(245,241,233,.66);
  background:#0C0A09;color:#F5F1E9}
/* Menü YALNIZCA ana sayfada koyu başlıyor, çünkü koyu hero'nun üstünde
   duruyor; kaydırınca kağıda oturuyor. İç sayfalarda koyu hero yok, menü
   baştan kağıt şemasında — aksi hâlde aydınlık bir sayfanın tepesinde
   sebepsiz koyu bir şerit kalıyordu. */
body:not(.inner) header{--murekkep:245,241,233;--paper:#F5F1E9;
  --line:rgba(245,241,233,.12);--dim:rgba(245,241,233,.82);color:#F5F1E9;
  background:linear-gradient(180deg,rgba(12,10,9,.86),rgba(12,10,9,0))}
body.inner header{background:rgba(245,241,233,.90);border-bottom-color:rgba(20,17,15,.12)}
header.scrolled{--murekkep:20,17,15;--paper:#14110F;--line:rgba(20,17,15,.14);
  --dim:rgba(20,17,15,.72);color:#14110F;
  background:rgba(245,241,233,.92);border-bottom-color:rgba(20,17,15,.12)}
/* Duyuru barı da hero ile aynı hizada, koyu kalıyor.
   --murekkep çevrilirken --paper, --dim ve --dimmer çevrilmemişti; bu
   üçü :root'ta koyu mürekkepten türediği ve custom property değeri
   tanımlandığı yerde hesaplandığı için barda koyu kalıyorlardı. Sonuç:
   ciro sayısı (.duyuru b → color:var(--paper)) ve kapatma düğmesi koyu
   zeminin üstüne koyu basılıyor, yani görünmüyordu. Koyu ada yapan her
   blokta dördü birlikte çevrilmeli. */
.duyuru{--murekkep:245,241,233;--paper:#F5F1E9;
  --dim:rgba(245,241,233,.82);--dimmer:rgba(245,241,233,.62);
  background:#14110F;color:#F5F1E9;
  border-bottom-color:rgba(245,241,233,.14)}

/* ═══ RENK BLOĞU TEPELERİ (B yönü) ═══
   Sayfa sakin kağıt; iddia bölümleri doygun alaşım alanına oturuyor. Bu
   iki farklı şeyi yapıyor: bölüm uzaktan bile okunuyor ve sayfa boyunca
   üç net durak oluşuyor. Koyu mürekkep parlak alaşımda 7.3–11.7:1 veriyor,
   yani renk okunurluktan çalmıyor.
   Blok içinde --murekkep zaten koyu kalıyor; değişen tek şey zemin. */
main>section[data-blok]{color:#14110F;--paper:#14110F;
  --line:rgba(var(--murekkep),.22);
  --dim:rgba(var(--murekkep),.74);--dimmer:rgba(var(--murekkep),.60);
  --bg-2:rgba(255,255,255,.30);
  box-shadow:0 -1px 0 rgba(var(--murekkep),.14),0 1px 0 rgba(var(--murekkep),.14)}
main>section[data-blok="yesil"]{background:linear-gradient(168deg,#CDDB63,#B4C63C)}
main>section[data-blok="sari"] {background:linear-gradient(168deg,#F6CB5E,#E0A92B)}
main>section[data-blok="pembe"]{background:linear-gradient(168deg,#EE9A7F,#DC7355)}
/* Blok içinde aura ve gradyan yazı kapalı: doygun zeminde ikisi de kirletiyor. */
main>section[data-blok]::after{display:none}
main>section[data-blok] .grad{color:#14110F;-webkit-text-fill-color:#14110F}
main>section[data-blok] .head h2::before{background:rgba(var(--murekkep),.55)}
/* Hero koyu ada olduğu için orada gradyan parlak uçlara döner. */
.hero .grad{color:var(--sari);-webkit-text-fill-color:var(--sari);background:none}

/* ═══════════════════════════════════════════════════════════════════
   HİZMET KATALOĞU — 2026-09 genişlemesi
   Katalog on kalemden yirmi dörde çıktı. On kalem düz bir ızgarada
   okunuyordu; yirmi dört okunmuyor. Bu blok üç yeni iş yapıyor:
     · katalog öbeklenir (.hzx) — göz önce altı başlık görür, sonra kalem
     · hizmet sayfası zenginleşir (.svch, .kimin, .kaps, .cikt, .ilg)
     · ana sayfaya karar veren bölümler girer (.plat, .fark)
   Renk seçimi yok: her öbek kendi alaşımını --ac üzerinden taşır, kart
   içindeki her vurgu oradan türer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ekmek kırıntısı ──
   Yirmi dört sayfalık bir katalogda ziyaretçi nerede olduğunu bilmeli.
   Eski sayfalarda bu bir <span class="lbl"> idi ve içine yanlışlıkla
   "Üreticiler" bağı sızmıştı; artık kendi semantik <nav>'ı var. */
.brd{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer)}
.brd a{transition:color .25s var(--e-out)}
.brd a:hover{color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
.brd span{opacity:.45}
.brd b{font-weight:inherit;color:var(--paper)}

/* ── hizmet sayfası tepesi ──
   Sıra numarası kağıdın üstüne basılmış gibi durur: dev, soluk, seçilemez.
   Sayfanın katalogdaki yerini söyler; başlıkla yarışmaz. */
.svch{isolation:isolate}
.svch-n{position:absolute;right:calc(var(--gut) - .06em);top:calc(var(--bar-h) + 76px);z-index:0;
  font-family:var(--disp);font-weight:700;font-size:clamp(7rem,17vw,15rem);line-height:.78;
  letter-spacing:-.05em;color:color-mix(in oklab,var(--ac) 24%,transparent);
  pointer-events:none;user-select:none}
.svch>.shell{position:relative;z-index:1}
.svch-m{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(26px,3.4vw,36px);
  border-top:1px solid var(--line)}
.svch-m>span{flex:1 1 200px;min-width:0;padding:16px clamp(16px,2vw,24px) 4px 0;
  font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:-.015em;line-height:1.35}
.svch-m>span+span{padding-left:clamp(16px,2vw,24px);border-left:1px solid var(--line)}
.svch-m i{display:block;font-style:normal;font-family:var(--mono);font-weight:400;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:7px}
@media(max-width:720px){
  .svch-m>span{flex:1 1 100%;padding:14px 0 4px;border-top:1px solid var(--line)}
  .svch-m>span+span{padding-left:0;border-left:0}
  .svch-m>span:first-child{border-top:0}
  .svch-n{top:auto;bottom:-.14em;right:calc(var(--gut) - .06em);font-size:clamp(5rem,26vw,9rem)}
}

/* ── "bu kalem kimin için" ──
   Hizmet sayfalarının çoğu ne yaptığını anlatır, kime yaradığını
   anlatmaz. Ziyaretçi kendi cümlesini görürse okumaya devam eder. */
.kimin{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,20px)}
.kimin li{padding:clamp(20px,2.4vw,26px) 0 0;border-top:2px solid var(--ac)}
.kimin b{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.02rem,1.7vw,1.16rem);line-height:1.3;letter-spacing:-.02em;
  margin-bottom:9px}
.kimin span{display:block;color:var(--dim);font-size:.92rem;line-height:1.6}
.kimin li:nth-child(3n+1){--ac:var(--yesil)}
.kimin li:nth-child(3n+2){--ac:var(--sari)}
.kimin li:nth-child(3n+3){--ac:var(--pembe)}
@media(max-width:820px){.kimin{grid-template-columns:1fr}}

/* ── kapsam kartları ──
   Eski .sc altı kelimelik bir listeydi; "Segmentasyon stratejisi" yazıp
   geçmek satın alma kararı için yetmiyor. Her kalem artık ne demek
   olduğunu bir cümleyle söylüyor. */
.kaps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.kaps>div{position:relative;padding:clamp(22px,2.6vw,28px) clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  transition:background-color .3s var(--e-out)}
.kaps>div:hover{background:rgba(var(--murekkep),.03)}
.kaps>div:nth-child(3n+1){border-left:0}
.kaps>div:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
.kaps-n{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:11px}
.kaps b{display:block;font-family:var(--disp);font-weight:600;font-size:1.04rem;
  letter-spacing:-.02em;line-height:1.28;margin-bottom:7px}
.kaps p{color:var(--dim);font-size:.9rem;line-height:1.6}
@media(max-width:900px){
  .kaps{grid-template-columns:repeat(2,1fr)}
  .kaps>div:nth-child(3n+1){border-left:1px solid var(--line)}
  .kaps>div:nth-child(2n+1){border-left:0}
  .kaps>div:nth-last-child(-n+3){border-bottom:0}
  .kaps>div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  .kaps{grid-template-columns:1fr}
  .kaps>div{border-left:0!important;padding-left:0;padding-right:0}
  .kaps>div:last-child{border-bottom:1px solid var(--line)}
}

/* ── elinize ne geçiyor ──
   Ajans sayfalarında en çok atlanan soru. Dosya adı verilmez, ama
   teslim edilen şeyin ne olduğu yazılır. */
.cikt{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(20px,3vw,44px)}
.cikt li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-top:1px solid var(--line);font-size:.95rem;line-height:1.6}
.cikt li::before{content:'';flex-shrink:0;width:16px;height:16px;margin-top:.34em;
  border-radius:5px;border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line));
  background:color-mix(in oklab,var(--ac) 16%,transparent);position:relative}
.cikt li em{display:block;font-style:normal;color:var(--dim);font-size:.87rem;margin-top:3px}
.cikt li:nth-child(4n+1){--ac:var(--yesil)}
.cikt li:nth-child(4n+2){--ac:var(--sari)}
.cikt li:nth-child(4n+3){--ac:var(--pembe)}
.cikt li:nth-child(4n+4){--ac:var(--beyaz)}
@media(max-width:760px){.cikt{grid-template-columns:1fr}}

/* ── yanındaki kalemler ──
   Katalog büyüdükçe "sonraki hizmet" oku yetmiyor; ziyaretçiyi ilgili
   kaleme göndermek gerekiyor. Sıradaki değil, İLGİLİ olan. */
.ilg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.ilg a{position:relative;display:block;border:1px solid var(--line);border-radius:18px;
  background:var(--bg-2);padding:clamp(18px,2.2vw,24px);overflow:hidden;
  transition:transform .3s var(--e-out),border-color .3s var(--e-out)}
.ilg a::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac)}
.ilg a:hover{transform:translateY(-3px);border-color:rgba(var(--murekkep),.2)}
.ilg-e{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:10px}
.ilg b{display:block;font-family:var(--disp);font-weight:600;font-size:1.05rem;
  letter-spacing:-.02em;line-height:1.28;margin-bottom:6px}
.ilg p{color:var(--dim);font-size:.88rem;line-height:1.55}
.ilg a:nth-child(3n+1){--ac:var(--yesil)}
.ilg a:nth-child(3n+2){--ac:var(--sari)}
.ilg a:nth-child(3n+3){--ac:var(--pembe)}
@media(max-width:820px){.ilg{grid-template-columns:1fr}}

/* ═══ KATALOG HARİTASI (ana sayfa + hizmetler.html) ═══
   Yirmi dört kalem tek ızgarada duvar olur. Öbek başlığı solda sabit bir
   sütun gibi durur, kalemler sağda akar: göz önce altı satır okur,
   ilgilendiği satırda durup kalemlere iner. */
.hzx{display:flex;flex-direction:column}
.hzx-o{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);padding:clamp(28px,3.4vw,42px) 0;
  border-top:1px solid var(--line)}
.hzx-o:last-child{border-bottom:1px solid var(--line)}
.hzx-b{position:sticky;top:calc(var(--bar-h) + 22px);align-self:start}
.hzx-e{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));
  margin-bottom:12px}
.hzx-e::before{content:'';width:22px;height:2px;background:var(--ac);flex-shrink:0}
.hzx-b h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.85rem);
  letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.hzx-b p{color:var(--dim);font-size:.92rem;line-height:1.6;max-width:34ch}
.hzx-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,32px)}
.hzx-l a{position:relative;display:block;padding:15px 34px 15px 0;border-top:1px solid var(--line);
  transition:padding-left .3s var(--e-out)}
/* "yeni" rozeti mutlak konumlu ve sağdan 26px içeride; satırın sağ boşluğu
   34px olduğu için rozet metin alanının üstüne biniyordu. Uzun başlıklarda
   ("Shopify Mağaza Kurulumu", "E-ticaret Büyüme Danışmanlığı") harfler
   rozetin altından çıkıyordu. Rozet taşıyan satırlar kendi boşluğunu alır. */
.hzx-l a[data-yeni]{padding-right:76px}
.hzx-l a:hover{padding-left:12px}
/* Platform kalemleri kendi logosunu taşıyor: yirmi dört satırlık listede
   "Meta Reklam Yönetimi" ile "Ambalaj Tasarımı" aynı ağırlıkta okunuyordu,
   oysa ilki tanınan bir platformun adı. İşaret <b>'nin İÇİNDE — kardeş
   olarak yazıldığında <b>{display:block} onu ayrı bir satıra atıyordu. */
.hzx-l b{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;
  font-size:1.02rem;letter-spacing:-.02em;line-height:1.3;transition:color .25s var(--e-out)}
.hzx-m{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;border-radius:7px;background:#F5F1E9;border:1px solid rgba(20,17,15,.10)}
.hzx-m img{width:15px;height:15px;display:block}
.hzx-m-y{font-family:var(--mono);font-size:.58rem;letter-spacing:.02em;color:#14110F}
.hzx-l a:hover b{color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
.hzx-l em{display:block;font-style:normal;color:var(--dim);font-size:.86rem;
  line-height:1.5;margin-top:4px}
.hzx-l i{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));opacity:0;transition:opacity .25s var(--e-out),transform .3s var(--e-out)}
.hzx-l a:hover i{opacity:1;transform:translateY(-50%) translateX(4px)}
/* yeni açılan kalemler işaretli — katalog büyüdüğünü kendisi söylesin */
.hzx-l a[data-yeni]::after{content:'yeni';position:absolute;right:26px;top:17px;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));
  border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line));border-radius:100px;padding:2px 7px}
.hzx-o:nth-child(6n+1){--ac:var(--yesil)}
.hzx-o:nth-child(6n+2){--ac:var(--beyaz)}
.hzx-o:nth-child(6n+3){--ac:var(--sari)}
.hzx-o:nth-child(6n+4){--ac:var(--pembe)}
.hzx-o:nth-child(6n+5){--ac:var(--yesil)}
.hzx-o:nth-child(6n+6){--ac:var(--beyaz)}
@media(max-width:1000px){
  .hzx-o{grid-template-columns:1fr;gap:22px}
  .hzx-b{position:static}
}
@media(max-width:640px){
  .hzx-l{grid-template-columns:1fr}
  .hzx-l a[data-yeni]::after{top:16px}
}

/* ═══ PLATFORM KARARI ═══
   Türkiye'de mağaza kurma sorusu neredeyse her zaman aynı üç seçenek
   arasında geçiyor. Tabloyu satmak için değil, kararı hızlandırmak için
   koyuyoruz — hangisini önerdiğimiz de yazılı. */
.plat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);align-items:stretch}
.plat-k{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:20px;background:var(--bg-2);padding:clamp(22px,2.8vw,30px);overflow:hidden}
.plat-k::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--ac)}
.plat-k>*{position:relative;z-index:1}
/* Karo eklendiğinde hizalama baseline olamaz: 38px'lik kutu yazının taban
   çizgisine oturunca kartın tepesinden taşıyor. Karo ile ad ortadan
   hizalanıyor, ikincil etiket kendi satırında baseline'ını koruyor. */
.plat-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:10px}
.plat-h .mrk{margin-right:1px}
.plat-h b{font-family:var(--disp);font-weight:600;font-size:1.22rem;letter-spacing:-.025em}
.plat-h span{font-family:var(--mono);font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line));
  border-radius:100px;padding:3px 9px}
.plat-k>p{color:var(--dim);font-size:.92rem;line-height:1.6;margin-bottom:18px}
.plat-k ul{list-style:none;margin-bottom:20px}
.plat-k li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;
  border-top:1px solid var(--line);font-size:.89rem;color:var(--dim);line-height:1.5}
.plat-k li::before{content:'';flex-shrink:0;width:5px;height:5px;border-radius:50%;
  margin-top:.55em;background:var(--ac)}
.plat-k li.eksi::before{background:none;border:1px solid rgba(var(--murekkep),.32);
  border-radius:1px;height:1px;width:7px;margin-top:.72em}
.plat-s{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:1.7;color:var(--dim)}
.plat-s b{display:block;font-family:var(--disp);font-size:.94rem;letter-spacing:-.01em;
  color:var(--paper);margin-bottom:4px}
@media(max-width:940px){.plat{grid-template-columns:1fr}}

/* ═══ FARK ÇİZELGESİ ═══
   İki sütun, karşılıklı. Sol taraf sektörün alışkanlığı, sağ taraf bizim
   yaptığımız. Övgü değil, fark: her satır doğrulanabilir bir davranış. */
.fark{border-top:1px solid var(--line)}
.fark-s{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,2.4vw,32px);padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line);
  align-items:start}
.fark-e{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));padding-top:.3em}
.fark-a,.fark-b{font-size:.94rem;line-height:1.6}
.fark-a{color:var(--dimmer);position:relative;padding-left:20px}
.fark-a::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:rgba(var(--murekkep),.34)}
.fark-b{color:var(--paper);position:relative;padding-left:20px;font-weight:420}
.fark-b::before{content:'';position:absolute;left:0;top:.42em;width:9px;height:9px;
  border-radius:50%;background:var(--ac)}
.fark-s:nth-child(4n+1){--ac:var(--yesil)}
.fark-s:nth-child(4n+2){--ac:var(--sari)}
.fark-s:nth-child(4n+3){--ac:var(--pembe)}
.fark-s:nth-child(4n+4){--ac:var(--beyaz)}
.fark-bas{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,2.4vw,32px);padding-bottom:12px}
.fark-bas span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer);padding-left:20px}
.fark-bas span:first-child{padding-left:0}
@media(max-width:820px){
  .fark-bas{display:none}
  .fark-s{grid-template-columns:1fr;gap:10px}
  .fark-e{padding-top:0}
  .fark-a::before{top:.6em}
}

/* ═══ SAYFA İÇİ KATALOG DİZİNİ ═══
   hizmetler.html'in tepesinde: altı öbek, tıklanınca kendi bölümüne iner.
   Yirmi dört kalemlik sayfada kaydırmadan yön bulmanın tek yolu. */
.dizin{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,32px)}
.dizin a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:100px;padding:9px 16px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  transition:border-color .3s var(--e-out),color .3s var(--e-out)}
.dizin a::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ac)}
.dizin a:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
.dizin a em{font-style:normal;color:var(--dimmer)}
.dizin a:nth-child(6n+1){--ac:var(--yesil)}
.dizin a:nth-child(6n+2){--ac:var(--beyaz)}
.dizin a:nth-child(6n+3){--ac:var(--sari)}
.dizin a:nth-child(6n+4){--ac:var(--pembe)}
.dizin a:nth-child(6n+5){--ac:var(--yesil)}
.dizin a:nth-child(6n+6){--ac:var(--beyaz)}

/* Reveal: yeni bileşenler de aynı açılış diline girsin. */
.kimin li.rv,.kaps>div.rv,.ilg a.rv,.plat-k.rv,.hzx-o.rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--e-soft),transform .7s var(--e-soft)}
.kimin li.rv.in,.kaps>div.rv.in,.ilg a.rv.in,.plat-k.rv.in,.hzx-o.rv.in{
  opacity:1;transform:none}
.cikt li.rv,.fark-s.rv{opacity:0;transform:translateX(-16px);
  transition:opacity .6s var(--e-soft),transform .6s var(--e-soft)}
.cikt li.rv.in,.fark-s.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .kimin li.rv,.kaps>div.rv,.ilg a.rv,.plat-k.rv,.hzx-o.rv,.cikt li.rv,.fark-s.rv{
    opacity:1;transform:none;transition:none}
  .hzx-l a:hover{padding-left:0}
  .ilg a:hover{transform:none}
}

/* ── beş sütunlu alt bilgi ──
   Katalog yirmi dörde çıkınca "Hizmetler" sütunu tek başına ekran boyu
   bir listeye dönüşüyordu. Sütun ikiye ayrıldı: öbek başlıkları solda,
   öne çıkan kalemler sağda. Dört sütunlu .fgrid olduğu gibi duruyor —
   yalnızca .f5 taşıyan alt bilgiler beşe çıkıyor. */
.fgrid.f5{grid-template-columns:1.25fr .95fr 1.05fr .9fr .9fr}
@media(max-width:1040px){.fgrid.f5{grid-template-columns:1fr 1fr 1fr}
  .fgrid.f5 .fcol:first-child{grid-column:span 3}}
@media(max-width:760px){.fgrid.f5{grid-template-columns:1fr 1fr}
  .fgrid.f5 .fcol:first-child{grid-column:span 2}}
@media(max-width:480px){.fgrid.f5{grid-template-columns:1fr}
  .fgrid.f5 .fcol:first-child{grid-column:span 1}}

/* ═══ HİZMET AÇILIR MENÜSÜ ═══
   Katalog yirmi dört kaleme çıkınca menüdeki tek "Hizmetler" bağı yetmez
   oldu: ziyaretçi aradığı kalemi görmek için önce katalog sayfasına gidip
   sonra öbek aramak zorundaydı. Panel altı öbeği ve yirmi dört kalemi
   doğrudan menünün altına açıyor.

   YALNIZCA MASAÜSTÜNDE. 1120px altında .hnav zaten gizli; orada mobil menü
   iş görüyor ve yirmi dört kalemi oraya sığdırmak menüyü kullanılmaz
   yapardı — telefonda doğru cevap katalog sayfası.

   Açılma iki yoldan olur: fareyle üzerine gelince (CSS) ve butona basınca
   ya da klavyeyle odaklanınca (JS, aria-expanded). İkisi de aynı sınıfı
   kullanmaz — hover CSS'te kalır ki JS yüklenmeden de çalışsın. */
/* Konumlandırma .hbar'a bağlı, butona DEĞİL. Butona bağlandığında panel
   880px genişliğiyle menünün ilk maddesinden sola doğru açılıyor ve
   1280px ekranda sol kenardan 302px taşıyordu. Şerit ortalanınca panel
   her genişlikte kağıdın içinde kalıyor. .hmega bu yüzden static:
   içindeki mutlak konumlu panel .hbar'ı (position:relative) yakalıyor. */
.hmega{position:static;display:none}
@media(min-width:1121px){.hmega{display:block}}
/* menüdeki tetik, diğer bağlarla aynı tipografide — yeni bir dil değil */
.hmega>button{font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);background:none;border:0;padding:5px 0;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:color .3s var(--e-out)}
.hmega>button:hover,.hmega[data-acik] > button{color:var(--paper)}
.hmega>button::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .3s var(--e-out)}
.hmega[data-acik]>button::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* Bulunduğun sayfa işareti butona da uygulanır. Renk tek başına
   taşımasın diye altındaki alaşım çizgisi <a> ile aynı — kural sadece
   `.hnav a[aria-current]` yazılsaydı hizmet sayfalarında menüdeki
   "Hizmetler" yalnızca renkle işaretli kalırdı. */
.hmega>button[aria-current]{color:var(--paper);position:relative}
.hmega>button[aria-current]::before{content:'';position:absolute;left:0;right:14px;bottom:-1px;
  height:2px;border-radius:2px;background:var(--sari);animation:navMark .4s var(--e-soft)}

/* Panel. Sağ kenara hizalanır ve genişliği içeriğe göre değil sabit —
   altı sütun ancak böyle eşit okunuyor. Sayfanın kağıt şemasında kalır:
   ana sayfada menü koyu olsa da panel kağıt, çünkü içinde okunacak
   yirmi dört satır var. */
.hmega-p{position:absolute;top:calc(100% + 26px);left:50%;z-index:75;
  width:min(880px,calc(100vw - 2 * var(--gut)));
  --murekkep:20,17,15;--paper:#14110F;--line:rgba(20,17,15,.12);
  --dim:rgba(20,17,15,.72);--dimmer:rgba(20,17,15,.66);
  color:var(--paper);
  /* Tam opak. .97'de koyu hero'nun dev başlığı panelin altından hayalet
     gibi okunuyordu — yirmi dört satırlık bir listede bu, şıklık değil
     okuma zorluğu. Bulanıklık kenarlar için duruyor. */
  background:#F5F1E9;backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px -20px rgba(20,17,15,.28),0 2px 8px rgba(20,17,15,.06);
  padding:clamp(20px,2vw,26px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px clamp(16px,1.8vw,26px);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .26s var(--e-out),transform .3s var(--e-out),visibility .26s}
/* fare köprüsü: buton ile panel arasındaki boşlukta menü kapanmasın.
   Genişliği panelle aynı — şeridin tamamına yayılsaydı, menünün altından
   geçen her fare hareketi paneli açık tutardı. */
.hmega::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(880px,calc(100vw - 2 * var(--gut)));height:28px;display:none}
.hmega:hover::after{display:block}
.hmega:hover .hmega-p,.hmega:focus-within .hmega-p,.hmega[data-acik] .hmega-p{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.hmega-o{padding:10px 0}
.hmega-o>span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati));margin-bottom:8px}
.hmega-o>span::before{content:'';width:16px;height:2px;background:var(--ac);flex-shrink:0}
.hmega-o a{display:block;font-family:var(--sans);font-size:.86rem;letter-spacing:0;
  text-transform:none;color:var(--dim);padding:5px 0;line-height:1.35;
  transition:color .22s var(--e-out),transform .28s var(--e-out)}
.hmega-o a:hover{color:var(--paper);transform:translateX(4px)}
.hmega-o:nth-child(6n+1){--ac:var(--yesil)}
.hmega-o:nth-child(6n+2){--ac:var(--beyaz)}
.hmega-o:nth-child(6n+3){--ac:var(--sari)}
.hmega-o:nth-child(6n+4){--ac:var(--pembe)}
.hmega-o:nth-child(6n+5){--ac:var(--yesil)}
.hmega-o:nth-child(6n+6){--ac:var(--beyaz)}
/* alt şerit: katalogun tamamına giden bağ */
.hmega-f{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.hmega-f p{font-size:.82rem;color:var(--dimmer);line-height:1.5;max-width:46ch}
.hmega-f a{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  white-space:nowrap;transition:border-color .3s var(--e-out),background-color .3s var(--e-out)}
.hmega-f a:hover{border-color:rgba(20,17,15,.3);background:rgba(20,17,15,.04)}
@media(prefers-reduced-motion:reduce){
  .hmega-p{transition:opacity .01s}
  .hmega-o a:hover{transform:none}
}

/* ═══ RAKAMLAR VURGU SESİNDE ═══
   Sayfanın en ikna edici öğeleri rakamlar; onları da gövde sesinden
   ayırmak vurguyu iki katına çıkarıyor. Referans sitelerin ikisi de
   rakamları başlık sesiyle yazıyor. */
.now,.close-big,.big,.hero-stat b,.cnt{
  font-family:var(--vurgu);font-style:italic;font-weight:400;
  letter-spacing:-.01em}
/* Serif rakamlar grotesk'e göre dar durur; ölçek bir tık yukarı alınıyor. */
.now{font-size:clamp(3.6rem,9.6vw,6.4rem)}
.close-big{font-size:clamp(3.4rem,11vw,9.4rem)}

/* ═══ YÜZEN ÇAĞRI ═══
   Uzun sayfada tek sorun ikna değil, ikna olduktan sonra ne yapacağını
   bulmak. Bu düğme hero'dan sonra beliriyor ve başvuru formu görüş alanına
   girince kayboluyor: kendi hedefiyle yarışan bir çağrı, çağrı olmaktan
   çıkar. Rengi alaşımdan, yazısı koyu mürekkep — 11:1 kontrast. */
.yuzen-cta{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);
  z-index:70;display:inline-flex;align-items:center;gap:13px;
  padding:11px 20px 11px 12px;border-radius:100px;
  background:linear-gradient(140deg,var(--yesil),var(--sari));
  color:#14110F;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(var(--murekkep),.34),
             0 0 0 1px rgba(var(--murekkep),.10);
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),opacity .35s var(--e-out)}
.yuzen-cta[hidden]{display:none}
.yuzen-cta.gizli{opacity:0;transform:translateY(14px) scale(.96);pointer-events:none}
.yuzen-cta:hover{transform:translateY(-3px);
  box-shadow:0 16px 40px -10px rgba(var(--murekkep),.42),0 0 0 1px rgba(var(--murekkep),.16)}
.yc-ok{width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:rgba(var(--murekkep),.13)}
.yc-ok svg{width:15px;height:15px;transition:transform .45s var(--e-out)}
.yuzen-cta:hover .yc-ok svg{transform:translateX(3px)}
.yc-m b{display:block;font-family:var(--disp);font-weight:600;font-size:.94rem;
  letter-spacing:-.018em;line-height:1.15}
.yc-m i{display:block;font-style:normal;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.13em;text-transform:uppercase;opacity:.72;margin-top:3px}
@media(max-width:560px){
  .yc-m i{display:none}
  .yuzen-cta{padding:9px 16px 9px 10px}
  .yc-ok{width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce){
  .yuzen-cta{transition:opacity 140ms}
  .yuzen-cta:hover{transform:none}
}

/* ═══ PLATFORM MARKALARI ═══════════════════════════════════════════════════
   Site "Trendyol'a bakıyor musunuz", "ikas mı Shopify mi" diye konuşuyordu
   ama hiçbir platform GÖRÜNMÜYORDU: her şey aynı ağırlıkta düz metindi ve
   ziyaretçi hangi kanaldan söz edildiğini ancak cümleyi okuyarak anlıyordu.
   Logolar bunu bir bakışta veriyor.

   Çizimler Simple Icons'tan alınan gerçek marka yolları, resmî marka
   renkleriyle ve KENDİ SUNUCUMUZDA (assets/marka/*.svg, 13 dosya ~14 KB).
   CDN'e çalışma anında bağlanmıyoruz; logo hafızadan da çizilmedi.

   Türkiye'ye özgü üç platformun (ikas, Trendyol, Hepsiburada) güvenilir
   bir vektör kaynağı yok. Yanlış çizilmiş bir logo, logosuzluktan kötüdür;
   onlar yazı rozeti olarak duruyor. Gerçek SVG'yi assets/marka/ikas.svg
   olarak koyduğunuzda rozet kendiliğinden logoya döner — .badge'deki
   onerror kalıbının aynısı.

   Karo HER ZAMAN açık zeminde: koyu adaların içinde de kağıt rengini
   koruyor, çünkü marka logoları koyu zemin için tasarlanmadı. Bu yüzden
   kenarlık ve yazı rengi token'a değil sabit değere bağlı. */
.mrk{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;background:#F5F1E9;
  border:1px solid rgba(20,17,15,.10);flex-shrink:0;
  box-shadow:0 6px 16px -12px rgba(20,17,15,.5)}
.mrk img{width:20px;height:20px;display:block}
.mrk-y{width:auto;min-width:38px;padding:0 12px;
  font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:-.015em;
  color:#14110F}
.mrk-sr{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* Pil: logo + ad. Karo tanıyana yeter, pil tanımayana da söyler —
   metnin içinde okunacak yerlerde bu kullanılıyor. */
.mp{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border-radius:999px;
  background:#F5F1E9;border:1px solid rgba(20,17,15,.10);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;color:rgba(20,17,15,.72);
  white-space:nowrap;line-height:1}
.mp img{width:14px;height:14px;display:block;flex-shrink:0}
.mp-sr{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
/* Geniş karo: kare işareti olmayıp yalnızca yazı logosu bulunan markalar
   (Trendyol) için. Logo YENİDEN RENKLENDİRİLMİYOR — kaynak dosyada hangi
   renkteyse öyle duruyor. Ortak logolarını kendi paletimize boyamak marka
   kurallarının ilk ihlali olurdu; ortak rozetlerinde de aynı kural geçerli. */
.mrk-g{width:auto;padding:0 11px}
.mrk-g img{width:auto;height:13px}
.mp img.mp-g{width:auto;height:11px}
.hzx-m-g{width:auto;padding:0 6px}
.hzx-m-g img{width:auto;height:11px}
/* Yazı logosu taşıyan pil: logonun kendisi zaten marka adı, yanına bir de
   adı yazmak tekrar. Pilin sağ boşluğu sola eşitlenir. */
.mp-yalniz{padding:6px 10px}

/* ═══ HİZMET İŞARETLERİ — 24 kalemin hepsi ═════════════════════════════════
   Platform kalemleri kendi logosunu, platform olmayan kalemler (strateji,
   ambalaj, entegrasyon...) Lucide'den gerçek bir ikonu taşıyor. İki tür
   karo var ve fark bilinçli:
     • Platform logosu KAĞIT karoda, marka renginde — logolar yeniden
       renklendirilmez, koyu zemine de oturtulmaz.
     • Hizmet ikonu ÖBEK RENGİNDE karoda: ikonun çizgisi öbeğin koyultulmuş
       alaşımı (ton ve doygunluk korunuyor, açıklık düşüyor), zemini aynı
       alaşımın açık tonu. Liste tek renk griden çıkıp öbek öbek renkleniyor.
   Göz iki türü ayırıyor: renkli karo = bizim işimiz, kağıt karo = platform. */
/* %30'da karo kağıttan ayırt edilmiyordu — renk vardı ama görünmüyordu.
   %46'da öbek rengi okunuyor. İkon çizgisi grafik kontrast sınırının
   (3:1) üstünde kalsın diye koyultuldu: yeşil 4.3, pembe 3.5, beyaz 4.4. */
.hzx-m-s,.hm-i-s,.svch-i-s,.ilg-i-s,.sv-i-s{
  background:color-mix(in srgb,var(--ac) 46%,#F5F1E9);
  border-color:color-mix(in srgb,var(--ac) 80%,#F5F1E9)}
.hzx-m{width:30px;height:30px;border-radius:9px}
.hzx-m img{width:17px;height:17px}
.hzx-m-g{width:auto;padding:0 7px}
.hzx-m-g img{width:auto;height:11px}

/* mega menü */
.hmega-o a{display:flex;align-items:center;gap:10px}
.hm-i{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;border-radius:7px;background:#F5F1E9;border:1px solid rgba(20,17,15,.10)}
.hm-i img{width:14px;height:14px;display:block}
.hm-i-g{width:auto;padding:0 5px}
.hm-i-g img{width:auto;height:9px}

/* hizmet sayfası hero'su: kalemin işareti başlığın üstünde büyük durur */
.svch-i{display:inline-flex;align-items:center;justify-content:center;
  width:68px;height:68px;border-radius:19px;margin-bottom:18px;
  background:#F5F1E9;border:1px solid rgba(20,17,15,.10);
  box-shadow:0 16px 34px -22px rgba(20,17,15,.55)}
.svch-i img{width:36px;height:36px;display:block}
.svch-i-g{width:auto;padding:0 18px}
.svch-i-g img{width:auto;height:22px}
.p-hero .svch-i+.lbl{display:flex}

/* "Bu yıl açılanlar" kartları (.sv)
   Kartın tepesinde iki işaret yan yana duruyor: kalemin karosu ve alaşım
   izi. İkisi birden, çünkü tek başına hiçbiri yetmiyor —
     · karo kalemin NE olduğunu söylüyor (platform logosu ya da ikon),
     · iz kartın hangi alaşımda olduğunu taşıyor (.svc içinde dörder dörder
       dönen --ac). Karoların altısı kağıt renginde olduğu için iz
       kalkarsa bölümün renk ritmi de kalkıyordu.
   .tick burada alt boşluğunu bırakıyor; hizayı satır veriyor. */
.sv-bas{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.sv-bas .tick{margin-bottom:0}
.sv-i{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;border-radius:13px;
  background:#F5F1E9;border:1px solid rgba(20,17,15,.10);
  box-shadow:0 10px 22px -16px rgba(20,17,15,.5)}
.sv-i img{width:23px;height:23px;display:block}
.sv-i-g{width:auto;padding:0 11px}
.sv-i-g img{width:auto;height:13px}

/* ilgili kalemler kartı */
.ilg a{position:relative}
.ilg-i{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;margin-bottom:14px;
  background:#F5F1E9;border:1px solid rgba(20,17,15,.10)}
.ilg-i img{width:21px;height:21px;display:block}
.ilg-i-g{width:auto;padding:0 10px}
.ilg-i-g img{width:auto;height:12px}
.ilg a .ilg-e{display:block}
/* Hizmet sayfası hero'sunda kalemin dokunduğu platformlar — ödeme ve GEO
   sayfalarında sağlayıcılar ile yanıt motorları burada, başlığın altında
   görünüyor. Platform kartındaki yerel ödeme şeridi de aynı pil. */
.svch-pl{margin-top:22px}
/* Ödeme şeridinin etiketi. Üç karttaki sağlayıcılar neredeyse aynı
   olduğu için asıl bilgi şeritte değil etikette: kutudan mı çıkıyor,
   uygulamayla mı bağlanıyor, tek tek mi entegre ediliyor. Etiketsiz
   üç özdeş şerit, üç kartı ayırt etmek yerine birbirine benzetiyordu. */
.plat-ple{display:block;margin-top:4px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 45%,var(--murekkep-kati))}
.plat-ple+.plat-pl{margin-top:9px}
.plat-pl{margin-top:14px}

/* ═══════════════════════════════════════════════════════════════════
   MAĞAZA ŞERİDİ — kurulan vitrinler
   Bu mağazaları kuran geliştirme ekibi aynı çatı altında. Şerit bu
   yüzden burada durabiliyor — ama "bizim marka
   vakalarımız" DİYE DEĞİL. Kanıt bölümü marka yönetimi sonuçlarını
   anlatıyor ve orada yayımlanmış tek vaka var; bu şerit altyapı işi.
   İkisini ayrı tutan şey bölüm başlığı ve dipnot: ikisi de "kuran ekip"
   diyor, "yöneten ekip" demiyor.

   Her kart CANLI bir bağlantı. Sitenin "Bize inanmayın, kontrol edin"
   bölümüyle aynı mantık: doğrulaması bir tık.
   ═══════════════════════════════════════════════════════════════════ */
.ref{overflow:hidden;position:relative;
  /* kenarlarda eriyen maske — şerit ekranın dışına doğru sönüyor,
     kesilmiyor. İki yanı da aynı ölçüde, yoksa şerit tek yana kayıyormuş
     gibi duruyor. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ref+.ref{margin-top:clamp(12px,1.4vw,18px)}
.ref-t{display:flex;width:max-content;gap:clamp(12px,1.4vw,18px);
  animation:refKay 96s linear infinite}
.ref-2 .ref-t{animation-duration:118s;animation-direction:reverse}
@keyframes refKay{to{transform:translateX(-50%)}}
/* Kart tıklanabilir. Hareket eden bir bağlantıya isabet ettirmek mümkün
   değil — imleç şeridin üstüne gelince duruyor. Dil sahnesindeki kural
   burada geçmiyor: orada tıklanacak bir hedef yok, burada var. */
.ref:hover .ref-t,.ref:focus-within .ref-t{animation-play-state:paused}
.ref-s{display:flex;gap:clamp(12px,1.4vw,18px);flex-shrink:0}

.ref-k{display:block;width:clamp(212px,19vw,268px);flex-shrink:0;
  transition:transform .45s var(--e-out)}
.ref-k:hover{transform:translateY(-4px)}
/* display:block ŞART. .ref-g bir <span> (kart bir <a>, içine <div>
   konamaz) ve satır içi kutuda aspect-ratio da overflow:hidden de yok
   sayılıyor: görsel 142px yerine 290px basılıyor, yuvarlatma tutmuyor,
   kart künyenin üstüne taşıyordu. */
.ref-g{display:block;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  aspect-ratio:640/430;
  transition:border-color .45s var(--e-out),box-shadow .45s var(--e-out)}
.ref-k:hover .ref-g{border-color:color-mix(in srgb,var(--ac) 55%,var(--line));
  box-shadow:0 18px 36px -22px rgba(20,17,15,.45)}
.ref-g img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Alaşım izi: kartın üstünde ince bir çizgi, hover'da boydan boya açılıyor.
   Şeritteki tek renk kaynağı bu — ekran görüntüleri kendi renklerinde
   kalıyor, üstlerine renk basmıyoruz. */
.ref-g::after{content:'';position:absolute;left:0;top:0;height:3px;width:34px;
  background:var(--ac);transition:width .5s var(--e-out)}
.ref-k:hover .ref-g::after{width:100%}
.ref-b{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:10px;padding:0 2px}
.ref-b b{font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:-.02em;
  line-height:1.25;color:var(--paper)}
.ref-b span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dimmer);white-space:nowrap;flex-shrink:0}
.ref-t .ref-k:nth-child(4n+1){--ac:var(--yesil)}
.ref-t .ref-k:nth-child(4n+2){--ac:var(--sari)}
.ref-t .ref-k:nth-child(4n+3){--ac:var(--pembe)}
.ref-t .ref-k:nth-child(4n+4){--ac:var(--beyaz)}
@media(prefers-reduced-motion:reduce){
  /* Hareket kapalıysa şerit akmıyor; kaydırılabilir bir rafa dönüyor,
     çünkü içerik hâlâ gezilebilir olmalı. */
  .ref{overflow-x:auto;-webkit-mask-image:none;mask-image:none;
    scroll-snap-type:x proximity;padding-bottom:6px}
  .ref-t{animation:none;width:auto}
  .ref-2 .ref-s:last-child,.ref-1 .ref-s:last-child{display:none}
  .ref-k{scroll-snap-align:start}
  .ref-k:hover{transform:none}
}

/* ── iki kişilik ekip (ana sayfa) ──
   .team auto-fit ile dörtlü ızgara için yazıldı. İki kartla kullanılınca
   her kart 1240px'lik kabın yarısına yayılıyor ve 600×750'lik bir portreye
   dönüşüyordu — yüz ekran boyu. Genişlik 720px'e sınırlandı, iki kolon
   sabitlendi. Kartın kendisi (.who/.face) değişmiyor. */
.team-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;gap:clamp(14px,2vw,24px)}
.team-2 .who:nth-child(1){--ac:var(--yesil)}
.team-2 .who:nth-child(2){--ac:var(--sari)}
/* Ekip dörde çıktı: iki sütun, iki satır. Renk döngüsü kart sayısına
   eşit — komşu iki kart aynı alaşımı taşımasın. Kart eklenirse buraya
   da bir satır gerekir. */
.team-2 .who:nth-child(3){--ac:var(--pembe)}
.team-2 .who:nth-child(4){--ac:var(--beyaz)}
/* Fotoğraflar 4:5'e önceden kırpıldı; yine de kap oranı kayarsa yüz
   kesilmesin diye kadraj üstten tutuluyor. */
.team-2 .face img{object-position:center top}
/* Dar ekranda kart 156px'e iniyor: "Atakan Cebecioğlu" iki satıra
   sarıyor, "Efe Akel" tek satırda kalıyordu. Kartlar ızgarada eşit boyda
   olduğu için rol satırı ("Kurucu Ortak") iki kartta farklı hizaya
   düşüyordu. Ada iki satırlık yer ayrılıyor; hangi ad gelirse gelsin
   rol satırı aynı çizgide başlıyor. */
@media(max-width:480px){
  .team-2 .who-b{padding:14px 14px 18px}
  .team-2 .who-b h3{line-height:1.3;min-height:2.6em}
}


/* ═══════════════════════════════════════════════════════════════════
   BU YIL AÇILANLAR — koyu ada (#yeni-kalemler)
   Önceki hâli sitenin her yerinde tekrar eden .sv ızgarasıydı: iki açık
   "temel" bölümün arasında aynı kartlar, göz durmuyordu. Bölüm artık
   hero'nun tekniğiyle koyu bir ada — token'lar burada yeniden tanımlanıyor,
   çizgi/metin/kart zemini kendiliğinden koyu şemaya dönüyor.

   Kimlik seçicisi bilerek: bant zemini main>section[data-t][data-c]
   (0,2,2) ile veriliyor, #yeni-kalemler (1,0,0) onu sıra fark etmeksizin
   eziyor. Aura (::after) kalıyor — statik radyal gradyan, filtre değil.

   HAREKET: yalnızca tek seferlik. Hover'da alaşım çizgisi boydan boya
   çiziliyor, köşe ışığı açılıyor, ok kayıyor. Sürekli dönen, sürekli
   boyanan hiçbir şey yok (hafızadaki hareket politikası).
   ═══════════════════════════════════════════════════════════════════ */
#yeni-kalemler{
  --murekkep:245,241,233;--zemin:12,10,9;--murekkep-kati:#F5F1E9;
  --paper:#F5F1E9;--line:rgba(245,241,233,.12);
  --dim:rgba(245,241,233,.80);--dimmer:rgba(245,241,233,.62);
  --bg-2:rgba(245,241,233,.04);
  color:#F5F1E9;box-shadow:none;
  background:
    radial-gradient(80% 55% at 10% 0%,rgba(196,212,78,.13),transparent 62%),
    radial-gradient(60% 50% at 100% 100%,rgba(232,136,106,.10),transparent 66%),
    #0C0A09}
#yeni-kalemler::after{opacity:.55}
/* Vurgu kelimesi koyu zeminde düz alaşım: hero'daki .grad'ın karşılığı. */
#yeni-kalemler .grad{color:var(--yesil);-webkit-text-fill-color:var(--yesil)}

.yk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.yk-k{grid-column:span 4;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(20px,2.2vw,28px);
  background:linear-gradient(180deg,rgba(245,241,233,.06),rgba(245,241,233,.015));
  transition:opacity .7s var(--e-soft),transform .45s var(--e-out),
             border-color .45s var(--e-out),background-color .45s var(--e-out)}
.yk-b{grid-column:span 6;padding:clamp(24px,2.8vw,36px)}
.yk-k:nth-child(4n+1){--ac:var(--yesil)}
.yk-k:nth-child(4n+2){--ac:var(--sari)}
.yk-k:nth-child(4n+3){--ac:var(--pembe)}
.yk-k:nth-child(4n+4){--ac:var(--beyaz)}

/* Üst çizgi: dururken kısa bir alaşım izi, hover'da boydan boya çizilir. */
.yk-k::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--ac);transform:scaleX(.16);transform-origin:left;
  transition:transform .6s var(--e-soft);z-index:1}
/* Köşe ışığı: filtre değil radyal gradyan — boyama maliyeti yok. */
.yk-k::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  width:340px;height:340px;right:-120px;bottom:-170px;
  background:radial-gradient(circle,var(--ac) 0%,transparent 66%);
  opacity:.12;transition:opacity .5s var(--e-out)}
.yk-b::after{width:520px;height:520px;right:-170px;bottom:-260px;opacity:.16}
.yk-k:hover,.yk-k:focus-visible{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--ac) 55%,transparent);
  background-color:rgba(245,241,233,.03);transition-delay:0s}
.yk-k:hover::before,.yk-k:focus-visible::before{transform:scaleX(1)}
.yk-k:hover::after,.yk-k:focus-visible::after{opacity:.30}
.yk-k:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

.yk-ust{display:flex;align-items:center;gap:12px}
.yk-b .sv-i{width:56px;height:56px;border-radius:16px}
.yk-b .sv-i img{width:29px;height:29px}
.yk-n{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--dimmer)}
.yk-e{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 72%,#F5F1E9);
  background:color-mix(in oklab,var(--ac) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);
  border-radius:100px;padding:5px 11px;white-space:nowrap}

.yk-k h3{font-family:var(--disp);font-weight:600;font-size:1.1rem;line-height:1.22;
  letter-spacing:-.018em;margin-top:18px;color:#F5F1E9}
.yk-b h3{font-size:clamp(1.45rem,2.3vw,1.9rem);letter-spacing:-.03em;max-width:20ch;margin-top:24px}
.yk-k p{color:var(--dim);font-size:.9rem;line-height:1.6;margin-top:9px}
.yk-b p{font-size:1rem;max-width:44ch}
.yk-pl{margin-top:18px}
.yk-git{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 68%,#F5F1E9)}
.yk-git i{font-style:normal;transition:transform .35s var(--e-out)}
.yk-k:hover .yk-git i,.yk-k:focus-visible .yk-git i{transform:translateX(5px)}

/* Açılış sırası: satır satır. Hover'da gecikme sıfırlanıyor (yukarıda). */
.yk-k.rv:nth-child(2){transition-delay:.07s}
.yk-k.rv:nth-child(3){transition-delay:.04s}
.yk-k.rv:nth-child(4){transition-delay:.10s}
.yk-k.rv:nth-child(5){transition-delay:.16s}
.yk-k.rv:nth-child(6){transition-delay:.04s}
.yk-k.rv:nth-child(7){transition-delay:.10s}
.yk-k.rv:nth-child(8){transition-delay:.16s}

@media(max-width:980px){.yk-k{grid-column:span 6}.yk-b{grid-column:span 12}}
@media(max-width:560px){.yk-k,.yk-b{grid-column:span 12}.yk-b h3{max-width:none}}
@media(prefers-reduced-motion:reduce){
  .yk-k,.yk-k::before,.yk-k::after,.yk-git i{transition:none}
  .yk-k:hover,.yk-k:focus-visible{transform:none}
  .yk-k::before{transform:scaleX(1)}
}

/* ═══════════════════════════════════════════════════════════════════
   BÖLÜM SEÇENEKLERİ — 2026-09-15
   Kullanıcı dört bölüm için "Mevcut / A / B" karşılaştırmasına baktı ve
   dördünde de A'yı seçti. Yalnızca bu dört bölüm değişti; görünümü
   etkilemeyen hata düzeltmeleri bilerek bu işe katılmadı.
   Hepsi bölüm kimliğiyle kapsandı: mihenk.css sayfanın <style>'ından
   önce yükleniyor, eşit özgüllükte sayfa stili kazanırdı.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Üreticiler için: adım kartları ── */
#uretim-agi .upk-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4vw,48px)}
#uretim-agi .upk{position:relative;display:flex;flex-direction:column;min-height:220px;
  padding:24px 20px 22px;border-radius:18px;background:rgba(255,255,255,.55);
  border:1px solid rgba(20,17,15,.1);box-shadow:0 18px 40px -30px rgba(20,17,15,.45)}
#uretim-agi .upk::before{content:'';position:absolute;left:20px;top:0;width:44px;height:3px;
  border-radius:0 0 3px 3px;background:var(--ac)}
#uretim-agi .upk:not(:last-child)::after{content:'→';position:absolute;right:-13px;top:50%;
  transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:#F5F1E9;
  border:1px solid rgba(20,17,15,.14);display:flex;align-items:center;justify-content:center;
  font-size:12px;z-index:2;color:rgba(20,17,15,.6)}
#uretim-agi .upk-n{font-family:var(--disp);font-weight:700;font-size:2.7rem;letter-spacing:-.04em;
  line-height:1;color:color-mix(in srgb,var(--ac) 55%,#14110F)}
#uretim-agi .upk b{font-family:var(--disp);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;
  margin-top:18px;color:#14110F}
#uretim-agi .upk-l{margin-top:auto;padding-top:14px;font-size:.8rem;line-height:1.5;
  color:rgba(20,17,15,.68);border-top:1px solid rgba(20,17,15,.1)}
@media(max-width:1080px){
  #uretim-agi .upk-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  #uretim-agi .upk::after{display:none!important}
}
@media(max-width:700px){#uretim-agi .upk-g{grid-template-columns:repeat(2,minmax(0,1fr))}#uretim-agi .upk{min-height:0}}
@media(max-width:440px){#uretim-agi .upk-g{grid-template-columns:1fr}}

/* ── Kanıt: dev çarpan ── */
#kanit .kx{display:flex;flex-direction:column;justify-content:center;min-height:320px;
  padding:36px 38px;border-radius:16px;background:rgba(20,17,15,.07);border:1px solid rgba(20,17,15,.14)}
#kanit .kx-e{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,17,15,.62)}
#kanit .kx-b{font-family:var(--disp);font-weight:700;font-size:clamp(4.2rem,9vw,8.6rem);letter-spacing:-.06em;
  line-height:.9;color:#14110F;margin:14px 0 24px}
#kanit .kx-r{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 18px;padding-top:18px;border-top:1px solid rgba(20,17,15,.2)}
#kanit .kx-r span{font-family:var(--disp);font-weight:600;font-size:1.2rem;color:#14110F;font-variant-numeric:tabular-nums}
#kanit .kx-r i{display:block;font-style:normal;font-family:var(--mono);font-weight:400;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(20,17,15,.58);margin-bottom:5px}
#kanit .kx-r .kx-ok{color:rgba(20,17,15,.45);font-size:1.5rem}
#kanit .kx-b2{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,4vw,3.5rem);letter-spacing:-.04em;
  line-height:1;color:#14110F;margin:14px 0 22px}
#kanit .kx-alt{font-size:.88rem;color:rgba(20,17,15,.7);padding-top:16px;border-top:1px solid rgba(20,17,15,.2)}
/* Dar ekranda "380.000 ₺ → 2.200.000 ₺" satırı kırılıyor, ok ilk rakamın yanında
   yalnız kalıyordu. Ok gizlenir, iki rakam iki eşit kolona oturur. */
@media(max-width:860px){
  #kanit .kx{min-height:0;padding:26px 24px}
  #kanit .kx-r{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  #kanit .kx-r .kx-ok{display:none}
}

/* ── Doğrulama: açık kartlar ── */
#dogrulama .dog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#dogrulama .dog li{position:relative;gap:22px;padding:28px 30px 30px;border-radius:20px;
  border:1px solid rgba(20,17,15,.1);background:rgba(255,255,255,.55);box-shadow:0 20px 44px -34px rgba(20,17,15,.5)}
#dogrulama .dog li::before{content:'';position:absolute;left:30px;top:0;width:48px;height:3px;
  border-radius:0 0 3px 3px;background:var(--ac)}
#dogrulama .dog .d-n{font-size:3.1rem;opacity:1;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--ac) 60%,#14110F)}
#dogrulama .dog h3{font-size:1.16rem}
#dogrulama .dog li:last-child{grid-column:1/-1}
@media(max-width:820px){
  #dogrulama .dog{grid-template-columns:1fr}
  #dogrulama .dog li{padding:24px 22px 26px}
  #dogrulama .dog .d-n{font-size:2.4rem}
}

/* ── Eleme: iki kolon ── */
#eleme>.shell{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
#eleme .head{border-bottom:0!important;padding-bottom:0!important;margin-bottom:0!important}
#eleme .head::after{display:none!important}
#eleme .head h2{font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:.98;max-width:9ch}
#eleme .el-not{margin-top:22px;color:rgba(20,17,15,.72);font-size:1rem;line-height:1.6;max-width:34ch}
#eleme .no{max-width:none;margin:0}
#eleme .no li{padding:24px 0 24px 62px;font-family:var(--disp);font-weight:600;font-size:1.16rem;letter-spacing:-.015em;line-height:1.35}
#eleme .no li::before{content:'×';width:36px;height:36px;border-radius:50%;top:22px;left:0;
  display:flex;align-items:center;justify-content:center;background:#F5F1E9;border:1.5px solid var(--k);
  color:color-mix(in srgb,var(--k) 55%,#14110F);font-family:var(--sans);font-weight:500;font-size:1.05rem}
#eleme .no li:nth-child(1){--k:var(--yesil)}
#eleme .no li:nth-child(2){--k:var(--sari)}
#eleme .no li:nth-child(3){--k:var(--pembe)}
#eleme .no li:nth-child(4){--k:#9FB3C4}
#eleme .no li em{font-family:var(--sans);font-weight:400;letter-spacing:0}
@media(max-width:900px){
  #eleme>.shell{grid-template-columns:1fr;gap:28px}
  #eleme .head h2{max-width:none}
  #eleme .no li{padding-left:54px;font-size:1.06rem}
}

/* ═══ HİZMET SAYFASI — A · VİTRİN (2026-09-16) ═════════════════════════════
   Kullanıcı "Mevcut / A / B" karşılaştırmasından A'yı seçti. 26 hizmet
   sayfasında <main class="svp">; kurallar yalnızca orada geçerli.

   Hero iki sütun: solda başlık ve çağrı, sağda "kalem kartı". Kartın her
   satırı sayfanın kendisinden üretildi (kapsamdaki altı başlık, öbek /
   ilk çıktı / yürüyüş, araç listesindeki logolar) — uydurma içerik yok.
   Kartın tekrar eden kısımları aria-hidden; öbek bilgisi (dl) tek kopya
   olduğu için okunur bırakıldı.

   Hareket tek seferlik: kart maddeleri sırayla işaretlenir, süreç hattı
   kendini çizer, ölçüm kartlarının üst çubuğu dolar. Sonsuz animasyon ve
   bulanıklık filtresi yok; eski blur(120/80/100px) ışımaları bu sayfalarda
   radyal gradyanla değiştirildi. */

/* ── hero ── */
.svp .p-hero::before{filter:none;opacity:1;width:70vw;height:70vw;right:-20vw;top:-30vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--ac) 42%,transparent) 0%,transparent 62%)}
.svp .svh{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,5vw,84px);align-items:center}
.svp .svh-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.svp .svch-n{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ac) 55%,transparent);
  top:auto;bottom:-.1em;right:calc(var(--gut) - .04em);opacity:.7}
.svp .svh-sag{position:relative}
.svp .kk-iz{position:absolute;width:210px;right:-54px;top:-70px;z-index:0}
.svp .kk-iz svg{width:100%;display:block}
.svp .kk{position:relative;z-index:1;border-radius:26px;background:#FBF8F2;border:1px solid rgba(20,17,15,.1);
  box-shadow:0 40px 70px -40px rgba(20,17,15,.55);overflow:hidden}
.svp .kk-ust{display:flex;gap:16px;align-items:center;padding:22px 26px;
  background:color-mix(in srgb,var(--ac) 42%,#F5F1E9);border-bottom:1px solid color-mix(in srgb,var(--ac) 70%,#F5F1E9)}
.svp .kk-i{width:62px;height:62px;border-radius:18px;background:#FBF8F2;display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 10px 22px -12px rgba(20,17,15,.45)}
.svp .kk-i img{width:34px;height:34px;display:block}
.svp .kk-i-g{width:auto;padding:0 14px}
.svp .kk-i-g img{width:auto;height:18px}
.svp .kk-e,.svp .kk-bas{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}
.svp .kk-e{color:color-mix(in srgb,var(--ac) 28%,#14110F)}
.svp .kk-bas{color:rgba(20,17,15,.68)}
.svp .kk-ad{display:block;margin-top:5px;font-family:var(--disp);font-weight:600;font-size:1.32rem;
  letter-spacing:-.025em;line-height:1.15;color:#14110F}
.svp .kk-g{padding:20px 26px 6px}
.svp .kk-l{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.svp .kk-l li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(20,17,15,.08);
  font-size:.86rem;line-height:1.35;color:#14110F;opacity:0;transform:translateX(-8px);
  animation:kkGel .5s var(--e-soft) forwards}
.svp .kk-l i{position:relative;flex-shrink:0;width:18px;height:18px;border-radius:50%;margin-top:-1px;
  background:color-mix(in srgb,var(--ac) 70%,#F5F1E9)}
.svp .kk-l i::after{content:'';position:absolute;left:6px;top:3px;width:4px;height:8px;
  border:solid #14110F;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);animation:kkTik .35s var(--e-soft) forwards}
.svp .kk-l li:nth-child(1){animation-delay:.55s}.svp .kk-l li:nth-child(1) i::after{animation-delay:.75s}
.svp .kk-l li:nth-child(2){animation-delay:.64s}.svp .kk-l li:nth-child(2) i::after{animation-delay:.84s}
.svp .kk-l li:nth-child(3){animation-delay:.73s}.svp .kk-l li:nth-child(3) i::after{animation-delay:.93s}
.svp .kk-l li:nth-child(4){animation-delay:.82s}.svp .kk-l li:nth-child(4) i::after{animation-delay:1.02s}
.svp .kk-l li:nth-child(5){animation-delay:.91s}.svp .kk-l li:nth-child(5) i::after{animation-delay:1.11s}
.svp .kk-l li:nth-child(6){animation-delay:1s}.svp .kk-l li:nth-child(6) i::after{animation-delay:1.2s}
@keyframes kkGel{to{opacity:1;transform:none}}
@keyframes kkTik{to{transform:rotate(45deg) scale(1)}}
.svp .kk-m{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 26px 0;border-top:1px solid rgba(20,17,15,.1)}
.svp .kk-m div{padding:12px 12px 14px 0;min-width:0}
.svp .kk-m div+div{padding-left:12px;border-left:1px solid rgba(20,17,15,.1)}
.svp .kk-m dt{font-family:var(--mono);font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(20,17,15,.68)}
.svp .kk-m dd{margin:4px 0 0;font-family:var(--disp);font-weight:600;font-size:.84rem;line-height:1.3;color:#14110F}
.svp .kk-alt{padding:14px 26px 22px;margin-top:0;background:rgba(20,17,15,.035);border-top:1px solid rgba(20,17,15,.08)}
.svp .kk-lg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.svp .kk-lg span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 7px;border-radius:999px;background:#FBF8F2;
  border:1px solid rgba(20,17,15,.1);font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:rgba(20,17,15,.75)}
.svp .kk-lg img{width:15px;height:15px;display:block}
.svp .kk-lg img.kk-g-l{width:auto;height:11px}

/* ── bölüm başlıkları: öbek renginde kısa çizgi ── */
.svp>section[data-b]>.shell>h2{display:flex;align-items:center;gap:14px;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.svp>section[data-b]>.shell>h2::before{content:'';width:34px;height:8px;border-radius:99px;background:var(--ac);flex-shrink:0}

/* ── kimin: renkli üst şeritli kartlar, büyük tırnak ── */
.svp .kimin{gap:18px}
.svp .kimin li{position:relative;border:1px solid var(--line);border-top:0;border-radius:20px;background:#FBF8F2;
  padding:34px 26px 26px;overflow:hidden;box-shadow:0 20px 40px -34px rgba(20,17,15,.5)}
.svp .kimin li::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--ac)}
.svp .kimin li::after{content:'\201D';position:absolute;right:18px;top:-6px;font-family:var(--vurgu);font-size:6.4rem;line-height:1;
  color:color-mix(in srgb,var(--ac) 60%,transparent);pointer-events:none}
.svp .kimin b{position:relative;font-size:1.14rem}

/* ── kapsam: öbek renginde bant, kartlar, numara rozetleri ── */
.svp>section[data-b="kaps"]{background:color-mix(in srgb,var(--ac) 16%,var(--bg))}
.svp .kaps{gap:16px}
.svp .kaps>div{border:1px solid color-mix(in srgb,var(--ac) 35%,var(--line))!important;border-radius:20px;background:#FBF8F2;
  padding:26px 24px;transition:transform .35s var(--e-out),box-shadow .35s var(--e-out),opacity .7s var(--e-soft)}
.svp .kaps>div:hover{background:#FBF8F2;transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(20,17,15,.55)}
.svp .kaps-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:16px;
  background:var(--ac);color:#14110F;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.svp .kaps b{font-size:1.1rem}

/* ── süreç: yatay, kendini çizen hat ── */
.svp .adimlar{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svp .adimlar::before{content:'';position:absolute;left:24px;right:24px;top:24px;height:3px;border-radius:3px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e-soft) .2s}
.svp .adimlar.in::before{transform:scaleX(1)}
.svp .adimlar .step{display:block;border:0;padding:0;position:relative}
.svp .adim-n{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:#14110F;color:var(--ac);font-family:var(--mono);font-size:.8rem;font-weight:700;
  box-shadow:0 0 0 6px var(--bg);transform:scale(.6);opacity:0;transition:transform .5s var(--e-soft),opacity .5s var(--e-soft)}
.svp .adimlar .step:nth-child(1) .adim-n{transition-delay:.25s}
.svp .adimlar .step:nth-child(2) .adim-n{transition-delay:.6s}
.svp .adimlar .step:nth-child(3) .adim-n{transition-delay:.95s}
.svp .adimlar .step:nth-child(4) .adim-n{transition-delay:1.3s}
.svp .adimlar.in .adim-n{transform:none;opacity:1}
.svp .adimlar .step .k{display:block;margin:22px 0 8px;padding:0}
.svp .adimlar .step>div{border:1px solid var(--line);border-radius:18px;background:#FBF8F2;padding:20px 22px}
.svp .adimlar .step h3{font-size:1.16rem}

/* ── söz: doygun renk bloğu ── */
.svp .state{background:var(--ac);border:0;border-radius:28px;padding:clamp(34px,5vw,64px)}
.svp .state::before{display:none}
.svp .state::after{filter:none;opacity:1;width:260px;height:260px;right:-40px;top:-60px;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(12 32 32)' fill='%2314110F' fill-opacity='.12'%3E%3Crect x='13' y='15' width='7' height='30' rx='3.5'/%3E%3Crect x='24' y='13' width='7' height='37' rx='3.5'/%3E%3Crect x='35' y='16' width='7' height='27' rx='3.5'/%3E%3Crect x='46' y='14' width='7' height='33' rx='3.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.svp .state p{color:#14110F;font-family:var(--vurgu);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3.3vw,2.6rem);line-height:1.18;letter-spacing:-.015em;max-width:30ch}

/* ── ölçüm: renkli üst çubuklu kutucuklar ── */
.svp .olc{gap:16px}
.svp .olc>div{border:1px solid var(--line);border-radius:18px;background:#FBF8F2;padding:22px 20px;overflow:hidden}
.svp .olc>div::before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:5px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-soft)}
.svp .olc>div.in::before{transform:scaleX(1)}
.svp .olc>div:nth-child(4n+1){--ac:var(--yesil)}
.svp .olc>div:nth-child(4n+2){--ac:var(--sari)}.svp .olc>div:nth-child(4n+2)::before{transition-delay:.12s}
.svp .olc>div:nth-child(4n+3){--ac:var(--pembe)}.svp .olc>div:nth-child(4n+3)::before{transition-delay:.24s}
.svp .olc>div:nth-child(4n+4){--ac:var(--beyaz)}.svp .olc>div:nth-child(4n+4)::before{transition-delay:.36s}
.svp .olc .m-e{display:inline-block;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--ac) 35%,#F5F1E9);color:#14110F}
.svp .olc b{font-size:1.1rem}

/* ── çıktılar: belge kartları ── */
.svp>section[data-b="cikt"]{background:color-mix(in srgb,var(--ac) 10%,var(--bg))}
.svp .cikt{gap:14px;grid-template-columns:repeat(4,1fr)}
.svp .cikt li{position:relative;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:6px 22px 16px 16px;
  background:#FBF8F2;padding:22px 20px;font-family:var(--disp);font-weight:600;font-size:1.02rem;line-height:1.3}
.svp .cikt li::before{width:38px;height:46px;margin:0;border-radius:4px 12px 4px 4px;border:0;
  background:linear-gradient(135deg,transparent 0 8px,var(--ac) 8px);box-shadow:inset 0 -14px 0 rgba(20,17,15,.08)}
.svp .cikt li em{font-family:var(--sans);font-weight:400;font-size:.86rem;line-height:1.55;margin-top:0}

/* ── araçlar: logolu hap bulutu ── */
.svp .yig-k{border:1px solid var(--line);border-radius:18px;background:#FBF8F2;padding:16px 20px}
.svp .yig-a{background:#FBF8F2;border-color:rgba(20,17,15,.12);padding:8px 14px;font-size:.88rem;color:#14110F}
.svp .yig-i{width:18px;height:18px}
.svp .yig-i-g{width:auto;height:12px}

/* ── ilgili: büyük işaretli kartlar ── */
.svp .ilg a{background:#FBF8F2;padding:26px 24px}
.svp .ilg a::before{height:5px}
.svp .ilg-i{width:52px;height:52px;border-radius:15px}
.svp .ilg-i img{width:26px;height:26px}
.svp .ilg-i-g{width:auto}
.svp .ilg-i-g img{width:auto;height:14px}
.svp .ilg b{font-size:1.14rem}

/* ── çağrı: koyu ada ── */
.svp .go{background:#0C0A09;border:0;color:#F5F1E9;--murekkep:245,241,233;--dim:rgba(245,241,233,.78);--paper:#F5F1E9}
.svp .go::after{filter:none;opacity:1;width:520px;height:520px;bottom:-300px;
  background:radial-gradient(circle,color-mix(in srgb,var(--ac) 40%,transparent),transparent 65%)}
.svp .go h2{font-size:clamp(1.8rem,3.6vw,2.8rem);color:#F5F1E9}
.svp .go .back{color:rgba(245,241,233,.72)}

@media(max-width:980px){
  .svp .svh{grid-template-columns:1fr}
  .svp .svch-n{display:none}
  .svp .kk-iz{width:150px;right:-16px;top:-50px}
  .svp .adimlar{grid-template-columns:1fr}
  .svp .adimlar::before{left:24px;right:auto;top:24px;bottom:24px;width:3px;height:auto;transform:scaleY(0);transform-origin:top}
  .svp .adimlar.in::before{transform:scaleY(1)}
  .svp .adimlar .step{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:18px}
  .svp .adimlar .step .k{grid-column:2;margin:12px 0 6px}
  .svp .adimlar .step>div{grid-column:2}
  .svp .cikt{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .svp .kk-ust{padding:18px 20px}
  .svp .kk-g{padding:16px 20px 4px}
  .svp .kk-l{grid-template-columns:1fr}
  .svp .kk-m{grid-template-columns:1fr;margin:12px 20px 0}
  .svp .kk-m div+div{padding-left:0;border-left:0;border-top:1px solid rgba(20,17,15,.1)}
  .svp .kk-alt{padding:14px 20px 20px}
  .svp .cikt{grid-template-columns:1fr}
  .svp .kimin li::after{font-size:5rem}
}
@media(prefers-reduced-motion:reduce){
  .svp .kk-l li{animation:none;opacity:1;transform:none}
  .svp .kk-l i::after{animation:none;transform:rotate(45deg) scale(1)}
  .svp .adimlar::before,.svp .adim-n,.svp .olc>div::before{transition:none}
  .svp .adimlar::before{transform:none}
  .svp .adim-n{transform:none;opacity:1}
  .svp .olc>div::before{transform:scaleX(1)}
  .svp .kaps>div:hover{transform:none}
}

/* ═══ BÖLÜM SEÇENEKLERİ — 2026-09-16 ═════════════════════════════════════
   "Dikkat çekici olmayan bölümleri güzelleştir" isteği. Dört bölüm için
   Mevcut / A / B kareleri gösterildi, kullanıcı "sen ayarla" dedi; seçim:
   Fark A, Aşama A, Yatırım A+B (denklem satırı + açık kontrol listesi),
   Başvuru süreci A. Hepsi bölüm kimliğiyle kapsamlı. Yeni içerik yok —
   Yatırım'daki "Size özel teklif" kartı SSS'teki "fiyat keşif görüşmesinden
   sonra netleşir" cümlesinin özeti. */

/* ── #fark: karşılaştırma kartları ── */
#fark .fark{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#fark .fark-bas{display:none}
#fark .fark-s{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);border-radius:20px;
  background:#FBF8F2;overflow:hidden;box-shadow:0 18px 36px -30px rgba(20,17,15,.5)}
#fark .fark-e{align-self:flex-start;margin:20px 22px 12px;padding:5px 11px;border-radius:99px;
  background:color-mix(in srgb,var(--ac) 45%,#F5F1E9);color:#14110F}
#fark .fark-a,#fark .fark-b{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:12px 22px 16px}
#fark .fark-a{color:var(--dim)}
#fark .fark-a::before,#fark .fark-b::before{content:'';position:static;width:26px;height:26px;border-radius:50%;margin-top:-1px;
  background-position:center;background-repeat:no-repeat;background-size:15px}
#fark .fark-a::before{background-color:rgba(20,17,15,.07);background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238A3E2A%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M18%206%206%2018%22%20/%3E%20%3Cpath%20d%3D%22m6%206%2012%2012%22%20/%3E%20%3C/svg%3E")}
#fark .fark-b{flex:1;background:color-mix(in srgb,var(--ac) 18%,#FBF8F2);
  border-top:1px dashed color-mix(in srgb,var(--ac) 60%,var(--line));color:#14110F;font-weight:500;padding-top:14px;padding-bottom:20px}
#fark .fark-b::before{background-color:var(--ac);background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2314110F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20/%3E%20%3C/svg%3E")}
#fark .fark-a i,#fark .fark-b i{display:block;font-style:normal;font-family:var(--mono);font-weight:400;font-size:.56rem;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px;color:rgba(20,17,15,.66)}
@media(max-width:820px){#fark .fark{grid-template-columns:1fr}}

/* ── #asama: tanı kartları ── */
#asama .kimin{gap:18px;counter-reset:tb}
#asama .kimin li{counter-increment:tb;position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-top:0;
  border-radius:22px;background:#FBF8F2;padding:30px 26px 26px;overflow:hidden;box-shadow:0 22px 40px -32px rgba(20,17,15,.5)}
#asama .kimin li::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--ac)}
#asama .kimin li::after{content:counter(tb,decimal-leading-zero);position:absolute;right:20px;top:14px;font-family:var(--disp);
  font-weight:700;font-size:3.4rem;line-height:1;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.4px color-mix(in srgb,var(--ac) 70%,transparent);pointer-events:none}
#asama .asi{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--ac) 45%,#F5F1E9);color:color-mix(in srgb,var(--ac) 30%,#14110F)}
#asama .asi svg{width:26px;height:26px;display:block}
#asama .kimin>li>b{font-size:1.3rem;margin-bottom:10px}
/* Metin içi öbek adı SATIRA KIRILMIYOR: genel .kimin b{display:block} kuralı
   bunu da yakalıyordu ("Ayar" tek başına alt satıra düşüyordu). */
#asama .kimin span b.ob{display:inline-block;margin:0 1px;padding:1px 9px;border-radius:99px;font-size:.86em;
  font-weight:600;letter-spacing:0;line-height:1.5;color:#14110F;background:color-mix(in srgb,var(--ac) 40%,#F5F1E9)}
#asama .asb{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
#asama .asb em{font-style:normal;font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  text-transform:none;color:#14110F;padding:5px 12px;border-radius:99px;background:var(--ac)}

/* ── #yatirim: üç belirleyen = teklif; ek faturalanmayanlar kontrol listesi ── */
#yatirim .yat{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,190px);
  align-items:stretch;gap:12px}
#yatirim .yat .y-k{background:#FBF8F2;border-radius:24px;padding:26px 24px;box-shadow:0 22px 40px -32px rgba(20,17,15,.5)}
#yatirim .yat .y-k::before{height:6px}
/* Renk sıraya bağlıydı (nth-child); araya giren "+ + =" işaretleri sayımı
   kaydırıyor ve ikinci kart pembe, üçüncüsü rengini kaybediyordu. Kartlar
   div, işaretler span: nth-of-type yalnızca kartları sayar. */
#yatirim .yat .y-k:nth-of-type(1){--ac:var(--yesil)}
#yatirim .yat .y-k:nth-of-type(2){--ac:var(--sari)}
#yatirim .yat .y-k:nth-of-type(3){--ac:var(--pembe)}
#yatirim .yik{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
#yatirim .yik span{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ac) 45%,#F5F1E9);color:color-mix(in srgb,var(--ac) 28%,#14110F)}
#yatirim .yik svg{width:27px;height:27px;display:block}
#yatirim .yik b{font-family:var(--vurgu);font-style:italic;font-weight:400;font-size:2.8rem;line-height:1;
  color:color-mix(in srgb,var(--ac) 55%,#14110F)}
#yatirim .yat h3{font-size:1.2rem}
#yatirim .yop{align-self:center;font-family:var(--disp);font-weight:700;font-size:2.2rem;line-height:1;
  color:color-mix(in srgb,var(--pembe) 55%,#14110F)}
#yatirim .ysn{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 22px;border-radius:24px;
  background:#0C0A09;color:#F5F1E9}
#yatirim .ysn i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(245,241,233,.62)}
#yatirim .ysn b{font-family:var(--vurgu);font-style:italic;font-weight:400;font-size:2rem;line-height:1.05;color:#F2C044}
#yatirim .ysn small{font-size:.82rem;line-height:1.45;color:rgba(245,241,233,.74)}
#yatirim .dahil{background:color-mix(in srgb,var(--pembe) 22%,#FBF8F2);border-color:color-mix(in srgb,var(--pembe) 45%,var(--line));
  border-radius:24px;padding:30px 30px 26px}
#yatirim .dahil h3{font-size:1.35rem}
#yatirim .dahil ul{gap:12px}
#yatirim .dahil li{padding:12px 14px 12px 48px;border-radius:14px;background:#FBF8F2;color:#14110F;font-weight:500;
  border:1px solid rgba(20,17,15,.08)}
#yatirim .dahil li::before{left:12px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;
  background-color:var(--yesil);background-position:center;background-repeat:no-repeat;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2314110F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20/%3E%20%3C/svg%3E")}
@media(max-width:1100px){
  #yatirim .yat{grid-template-columns:repeat(2,minmax(0,1fr))}
  #yatirim .yop{display:none}
}
@media(max-width:640px){#yatirim .yat{grid-template-columns:1fr}}

/* ── #basvuru-sureci: yatay hat, beş kart ── */
#basvuru-sureci .bsm{padding-left:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#basvuru-sureci .bsm::before{left:26px;right:26px;top:26px;bottom:auto;width:auto;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--yesil),var(--sari),var(--pembe),var(--beyaz),var(--yesil))}
#basvuru-sureci .bsm-s{padding:0;border:0;display:flex;flex-direction:column}
#basvuru-sureci .bsm-n{position:relative;left:auto;top:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#14110F;color:var(--ac);font-size:.8rem;font-weight:700;box-shadow:0 0 0 6px var(--bg);margin-bottom:18px}
#basvuru-sureci .bsm-g{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;
  background:#FBF8F2;padding:20px 18px}
#basvuru-sureci .bsm-b{flex-direction:column;align-items:flex-start;gap:8px}
#basvuru-sureci .bsm-sr{order:-1;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--ac) 45%,#F5F1E9);color:#14110F}
#basvuru-sureci .bsm-g p{font-size:.86rem}
#basvuru-sureci .bsm-siz{margin-top:auto;padding-top:14px;flex-direction:column;gap:4px;border-top:1px dashed var(--line)}
@media(max-width:1100px){
  #basvuru-sureci .bsm{grid-template-columns:1fr;gap:12px;padding-left:66px}
  #basvuru-sureci .bsm::before{left:25px;right:auto;top:26px;bottom:26px;width:3px;height:auto;
    background:linear-gradient(180deg,var(--yesil),var(--sari),var(--pembe),var(--beyaz),var(--yesil))}
  #basvuru-sureci .bsm-n{position:absolute;left:-66px;top:0;margin:0}
  #basvuru-sureci .bsm-g{min-height:52px}
}

/* ═══ PAKETLER — KURULUŞ ÖBEĞİ (2026-09-20) ═══════════════════════════
   Yalnızca .svp içindeki #paketler bölümünde. Katalogda fiyat gösteren
   ilk kalemler bunlar: kuruluş işleri kapsamı sabit olduğu için rakam da
   sabit. Ortaklık tarafındaki "fiyat listesi yok" kuralı değişmedi;
   ana sayfadaki Yatırım bölümü hâlâ tam ortaklığı anlatıyor.

   Kart dili mevcut .kaps/.olc kartlarıyla aynı: kağıt zemin, alaşım
   şeridi, tek seferlik giriş animasyonu. Fiyat rakamı .cnt sayacıyla
   değil düz yazılıyor — para birimi ve nokta ayırıcı sayaçta bozuluyor. */
.svp .pkt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.svp .pk{position:relative;display:flex;flex-direction:column;border-radius:22px;background:#FBF8F2;
  border:1px solid color-mix(in srgb,var(--ac) 32%,var(--line));padding:26px 24px 24px;overflow:hidden;
  transition:transform .5s var(--e-soft),box-shadow .5s var(--e-soft)}
.svp .pk::before{content:'';position:absolute;left:0;top:0;width:100%;height:5px;background:var(--ac);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-soft)}
.svp .pk.in::before{transform:scaleX(1)}
.svp .pk:nth-child(2)::before{transition-delay:.1s}
.svp .pk:nth-child(3)::before{transition-delay:.2s}
.svp .pk:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(20,17,15,.55)}
/* Önerdiğimiz paket: aynı kart, daha koyu çerçeve ve küçük bir rozet.
   "En çok tercih edilen" yazmıyoruz — o bir müşteri sayısı iddiası olurdu. */
.svp .pk-one{border-color:color-mix(in srgb,var(--ac) 62%,var(--line));border-width:2px}
.svp .pk-r{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--ac) 40%,#F5F1E9);color:#14110F}
.svp .pk-e{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(20,17,15,.62)}
.svp .pk-a{margin-top:10px;font-size:.9rem;line-height:1.55;color:rgba(20,17,15,.72);min-height:2.8em}
.svp .pk-f{display:block;margin-top:18px;font-family:var(--disp);font-weight:700;
  font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.04em;color:#14110F;
  font-variation-settings:"wdth" 88}
.svp .pk-h{display:block;margin-top:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(20,17,15,.6)}
.svp .pk-l{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:grid;gap:11px}
.svp .pk-l li{position:relative;padding-left:24px;font-size:.92rem;line-height:1.5;color:rgba(20,17,15,.82)}
/* Onay işareti: iki çizgiden kurulu, ayrı dosya yok. */
.svp .pk-l li::before{content:'';position:absolute;left:2px;top:.36em;width:12px;height:7px;
  border-left:2px solid color-mix(in srgb,var(--ac) 70%,#14110F);
  border-bottom:2px solid color-mix(in srgb,var(--ac) 70%,#14110F);
  transform:rotate(-45deg);border-radius:1px}
.svp .pk-c{margin-top:22px;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:99px;border:1px solid rgba(20,17,15,.22);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#14110F;transition:background .3s var(--e-out),border-color .3s var(--e-out)}
.svp .pk-c:hover{background:color-mix(in srgb,var(--ac) 32%,#F5F1E9);
  border-color:color-mix(in srgb,var(--ac) 55%,var(--line))}
.svp .pk-one .pk-c{background:color-mix(in srgb,var(--ac) 30%,#F5F1E9);
  border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.svp .pkt-not{margin-top:20px;font-size:.86rem;line-height:1.7;color:rgba(20,17,15,.66);max-width:74ch}
.svp .pkx-b{margin-top:42px;font-size:1.05rem}
.svp .pkx{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.svp .pkx li{border-top:1px solid var(--line);padding:12px 0 0}
.svp .pkx b{display:block;font-size:.95rem;color:#14110F}
.svp .pkx em{display:block;margin-top:3px;font-style:normal;font-size:.84rem;line-height:1.55;
  color:rgba(20,17,15,.66)}
@media(max-width:920px){
  .svp .pkt{grid-template-columns:1fr;gap:14px}
  .svp .pk-a{min-height:0}
  .svp .pkx{grid-template-columns:1fr}
}

/* ═══ PLATFORM KARŞILAŞTIRMASI — RENKLİ KARAR KARTLARI (2026-09-23) ═══
   Mevcut/A/B kareleri gösterildi, kullanıcı A'yı seçti. Sorun renk değil
   renk YOKLUĞUYDU: kart zemini #EFE9DE, bölüm zemini #F5F1E9 — iki ton
   neredeyse aynı, üç alaşım da 2px'lik çizgiye sıkışmıştı. Artık her kart
   kendi alaşımını zeminde, başlık bandında ve işaretlerde taşıyor.

   Bölümün kendi rengi de beyaz(soluk mavi-gri) yerine sarı: başlığın
   serif satırı sitenin geri kalanındaki gibi altın okunuyor.

   Kartın kendi iç boşluğu sıfırlandı, boşluk çocuklara verildi — başlık
   bandının kenara kadar uzaması için. Yeni çocuk eklenirse margin'i de
   buraya yazılmalı, yoksa kenara yapışır. */
#platform .plat-k{background:color-mix(in srgb,var(--ac) 9%,#FBF8F2);
  border:1px solid color-mix(in srgb,var(--ac) 36%,var(--line));
  padding:0 0 clamp(20px,2.4vw,26px)}
#platform .plat-k::before{height:5px}
#platform .plat-h{margin:0 0 18px;padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px) 16px;
  background:color-mix(in srgb,var(--ac) 20%,#FBF8F2);
  border-bottom:1px solid color-mix(in srgb,var(--ac) 32%,var(--line))}
#platform .plat-h b{font-size:1.36rem}
#platform .plat-h span:last-child{background:color-mix(in srgb,var(--ac) 52%,#F5F1E9);
  border-color:transparent;color:#14110F;font-weight:600}
#platform .plat-k>p,#platform .plat-k ul,#platform .plat-k .plat-ple,
#platform .plat-k .plat-pl,#platform .plat-k .plat-s{
  margin-left:clamp(20px,2.4vw,26px);margin-right:clamp(20px,2.4vw,26px)}
#platform .plat-k li{border-top-color:color-mix(in srgb,var(--ac) 22%,var(--line))}
/* Artı ve eksi artık aynı boyda iki nokta değil: onay işareti ile çizgi.
   İki sütunu ayırt etmek için renge değil biçime bakılıyor. */
#platform .plat-k li::before{width:14px;height:8px;border-radius:0;background:none;margin-top:.34em;
  border-left:2px solid color-mix(in srgb,var(--ac) 72%,#14110F);
  border-bottom:2px solid color-mix(in srgb,var(--ac) 72%,#14110F);transform:rotate(-45deg)}
#platform .plat-k li.eksi::before{border:none;background:rgba(20,17,15,.34);height:2px;width:11px;
  transform:none;margin-top:.62em;border-radius:2px}
/* "Ne zaman öneriyoruz" kartın en uzun ve karara en yakın paragrafı;
   monospace olduğu için kod gibi okunuyordu. Gövde yazısına döndü,
   etiket monospace kaldı. */
#platform .plat-s{font-family:var(--sans);font-size:.92rem;letter-spacing:0;line-height:1.6;
  color:rgba(20,17,15,.78);background:color-mix(in srgb,var(--ac) 14%,#FBF8F2);
  border-top:none;border-left:3px solid color-mix(in srgb,var(--ac) 62%,#14110F);
  border-radius:0 12px 12px 0;padding:14px 16px;margin-top:20px}
#platform .plat-s b{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 40%,#14110F);margin-bottom:7px}

/* Üreticiler sayfasındaki hazırlık cetvelinin cevap satırı: tam cümleler
   yazıyor ("Henüz erken olabilir. Eksik kalemleri görüşmede birlikte
   konuşalım…"), monospace'te satır satır kod gibi okunuyordu. Rakam
   gövde yazısında da okunaklı; mono yalnızca etiketlerde kalsın. */
.cet-say{font-family:var(--sans);font-size:.95rem;letter-spacing:0;color:var(--dim)}

/* ═══ SSS — EDİTORYAL SATIRLAR (2026-09-23) ═══════════════════════════
   A/B gösterildi, kullanıcı A'yı seçti. Sekiz özdeş bej çubuk yerine
   ince çizgiler ve büyük soru yazısı; açılan soru renkli şeritle ve
   hafif tonla işaretleniyor — hangisinin açık olduğu uzaktan görünüyor.
   Yalnızca ana sayfadaki #sss; hizmet sayfalarındaki .faq kutuları
   olduğu gibi kalıyor (orada üç soru var, çizgi az geliyor). */
#sss .faq{max-width:900px}
#sss .qa{background:none;border:none;border-top:1px solid var(--line);border-radius:0;
  margin:0;box-shadow:none}
#sss .qa:last-child{border-bottom:1px solid var(--line)}
#sss .qa summary{padding:26px 8px 26px 0;font-family:var(--disp);font-weight:600;font-size:1.18rem;
  letter-spacing:-.02em;color:var(--paper);gap:18px}
#sss .qa .qdot{width:10px;height:10px}
#sss .qa[open]{background:color-mix(in srgb,var(--ac) 10%,transparent);
  border-left:3px solid var(--ac);border-radius:0 14px 14px 0}
#sss .qa[open] summary{padding-left:20px}
#sss .qa .qp{padding-left:20px;padding-right:24px;font-size:1rem;line-height:1.72}
#sss .qa:hover summary{color:color-mix(in srgb,var(--ac) 55%,var(--murekkep-kati))}
@media(max-width:640px){
  #sss .qa summary{font-size:1.04rem;padding:20px 6px 20px 0}
  #sss .qa[open] summary,#sss .qa .qp{padding-left:14px}
}

/* ═══ KATALOG — ÖBEK RENK KİMLİĞİ (2026-09-23) ═══════════════════════
   A/B gösterildi, kullanıcı A'yı seçti. Yedi öbek de aynı bej olduğu
   için 2961 px'lik bölüm tek bir kütle gibi okunuyordu; artık her öbek
   kendi alaşımını başlık şeridinde, adında ve ikon karolarında taşıyor.

   nth-of-type: öbek sayısı değişirse (yeni öbek eklenirse) buradaki
   döngü de güncellenmeli. Sağ boşluğa DOKUNULMUYOR — .hzx-l a[data-yeni]
   rozet için 76px ayırıyor, ezilirse uzun başlıklar rozetin altına girer. */
#hizmetler .hzx-o:nth-of-type(7n+1){--ac:var(--yesil)}
#hizmetler .hzx-o:nth-of-type(7n+2){--ac:var(--sari)}
#hizmetler .hzx-o:nth-of-type(7n+3){--ac:var(--pembe)}
#hizmetler .hzx-o:nth-of-type(7n+4){--ac:var(--beyaz)}
#hizmetler .hzx-o:nth-of-type(7n+5){--ac:var(--yesil)}
#hizmetler .hzx-o:nth-of-type(7n+6){--ac:var(--sari)}
#hizmetler .hzx-o:nth-of-type(7n+7){--ac:var(--pembe)}
#hizmetler .hzx-b{border-left:3px solid var(--ac);padding:14px 0 16px 18px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 13%,transparent),transparent 78%);
  border-radius:0 16px 16px 0}
#hizmetler .hzx-b h3{color:color-mix(in srgb,var(--ac) 34%,var(--murekkep-kati));font-size:1.5rem}
#hizmetler .hzx-e{color:color-mix(in srgb,var(--ac) 40%,var(--murekkep-kati))}
#hizmetler .hzx-l a{border-radius:14px;padding-left:16px;
  transition:background .3s var(--e-out),border-color .3s var(--e-out),padding-left .3s var(--e-out)}
#hizmetler .hzx-l a:hover{padding-left:24px;background:color-mix(in srgb,var(--ac) 10%,#FBF8F2);
  border-top-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
#hizmetler .hzx-m{background:color-mix(in srgb,var(--ac) 18%,#FBF8F2);border-color:transparent}

/* ═══ ÖDEME ADIMI — YEREL SAHNE (2026-09-23) ══════════════════════════
   "Aynı ürün, altı pazar" sahnesinde harita büyük bir boşluk kaplıyor ve
   pazar değişince yalnızca küçük bir etiket değişiyordu. Artık haritanın
   altında o pazarın ödeme adımı duruyor: kalem, kargo, vergi, toplam ve
   yerel ödeme yöntemleri. Kart müşterinin gördüğü vitrin, bu panel marka
   sahibinin göreceği taraf.

   Sahne koyu ada olduğu için renkler doğrudan yazılıyor (bölüm token'ları
   zaten çevrilmiş durumda; burada yalnızca kutu ve kenarlıklar). */
.yod{border:1px solid rgba(245,241,233,.14);border-radius:18px;
  background:rgba(245,241,233,.04);padding:16px 18px;display:grid;gap:13px}
.yod-b{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,241,233,.6)}
.yod-b b{font-family:var(--mono);font-weight:500;color:var(--sari)}
.yod-s{display:grid;gap:8px;margin:0}
.yod-s>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.yod-s dt{font-size:.9rem;color:rgba(245,241,233,.72);min-width:0}
.yod-s dd{font-size:.9rem;color:rgba(245,241,233,.88);text-align:right;white-space:nowrap}
.yod-s .yod-t{border-top:1px solid rgba(245,241,233,.14);padding-top:10px;margin-top:2px}
.yod-s .yod-t dt{font-family:var(--disp);font-weight:600;font-size:1.06rem;color:#F5F1E9}
.yod-s .yod-t dd{font-family:var(--disp);font-weight:600;font-size:1.18rem;letter-spacing:-.02em;
  color:#F5F1E9}
.yod-o{display:flex;flex-wrap:wrap;gap:6px}
.yod-d{display:block;text-align:center;padding:11px;border-radius:12px;
  background:linear-gradient(140deg,var(--yesil),var(--sari));color:#14110F;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600}
/* Pazar değişirken kart ve alt şeritle aynı anda soluyor. */
.yod.degisiyor{opacity:0}
.yod{transition:opacity .2s}
@media(max-width:820px){
  .yod-s dt{font-size:.86rem}.yod-s dd{font-size:.86rem}
}

/* Ekip fotoğrafları kırpılmadan gösterilir (2026-09-25).
   Kutu sabit 4:5 olduğu ve görsel object-fit:cover ile oturduğu için
   3:4 çekilmiş bir fotoğrafın altı kesiliyordu. Kutu, görsel varsa
   oranını görselden alıyor; monogramlı boş kutu (fotoğraf yokken)
   4:5 kalmaya devam ediyor.

   Kartlar kendi yüksekliğinde durur: farklı oranlı iki fotoğraf yan
   yana geldiğinde kısa kartın altında boşluk kalmasın diye. */
.who .face:has(img){aspect-ratio:auto}
.who .face:has(img) img{height:auto}
/* Farklı oranlı iki fotoğraf yan yana gelince kartlar farklı boyda
   kalıyor ve isim şeritleri hizadan kayıyordu. Kartlar satır boyunca
   eşitleniyor, isim şeridi kartın altına yapışıyor: kısa fotoğrafın
   altında kalan boşluk kartın kendi zemini olarak okunuyor. */
.who{display:flex;flex-direction:column}
.who-b{margin-top:auto}