/* ─────────────────────────────────────────────────────────────
   Vora Medya — tek dosya statik site
   Palet: navy #061327 · kobalt #003894 (logo) · electric #3478ff
   Tipografi: Fraunces (display serif) + Schibsted Grotesk + DM Mono
   ───────────────────────────────────────────────────────────── */

:root{
  --navy:#061327;
  --navy-2:#0a1b31;
  --navy-3:#0f2544;
  --cobalt:#003894;
  --electric:#3478ff;
  --electric-soft:#7ea6ff;
  --paper:#eceff4;
  --paper-2:#dfe4ec;
  --ink:#08111f;
  --ink-soft:#41506a;
  --slate:#94a6c2;
  --slate-dim:#8195b2;   /* AA için açıldı: #6d7f9c yükseltilmiş yüzeylerde 3.78:1 kalıyordu */
  --hairline:rgba(148,166,194,.20);
  --hairline-ink:rgba(8,17,31,.16);

  --surface:#0a1b31;
  --surface-2:#0f2544;
  --line:rgba(148,166,194,.16);
  --line-2:rgba(148,166,194,.28);

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem; --s7:7rem; --s8:9.5rem;

  --gutter:clamp(1.25rem, 5vw, 4rem);
  --measure:64ch;
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-hero:"Marck Script","Segoe Script","Brush Script MT",cursive;
  --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

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

html{
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--navy);
}

body{
  margin:0;
  min-height:100dvh;
  background:var(--navy);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:var(--electric); color:#fff; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:#1c3355; border-radius:4px; }
::-webkit-scrollbar-track{ background:var(--navy); }

img,video{ display:block; max-width:100%; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--electric);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  /* Beyaz metin elektrik mavi üzerinde 3.98:1 kalıyordu; koyu mürekkep 4.81:1 veriyor. */
  background:var(--electric); color:#03101f;
  padding:.75rem 1.25rem; border-radius:10px;
  font-weight:700; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

.wrap{
  width:100%;
  max-width:1220px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── Ortak tipografi ──────────────────────────────────────── */

.eyebrow{
  margin:0 0 var(--s3);
  font-family:var(--font-mono);
  font-size:.8125rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--electric-soft);
}

/* Başlıklarda son satırda tek kelime kalmasın: tarayıcı satırları
   dengeleyerek kırsın. Desteklemeyen tarayıcıda normal kırılma sürer. */
.section__title,
.page-hero__title,
.scard__name,
.panel__head,
.why__item h3,
.feat__head{ text-wrap:balance; }

.section__title{
  margin:0;
  font-family:var(--font-hero);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(2.1rem, 1.2rem + 3.9vw, 3.75rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--paper);
}
.section__title em{
  font-style:italic;
  color:var(--electric-soft);
}

.lede{
  margin:0;
  max-width:var(--measure);
  color:var(--slate);
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height:1.7;
}

.wedge{
  width:.7em; height:.58em;
  flex:none;
  fill:currentColor;
}

/* ── Düğmeler ─────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 1.6rem;
  border:0; border-radius:12px;
  background:var(--electric); color:#03101f;
  font-family:var(--font-sans); font-size:1rem; font-weight:700;
  line-height:1; text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 34px -16px rgba(52,120,255,.85);
}
.btn:hover{ background:#4d8aff; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--lg{ padding:1.15rem 2rem; font-size:1.0625rem; }

/* İkincil buton. Palet altından laciverte çevrilirken bu kural yazılmamıştı;
   o yüzden tüm ghost butonlar birincil gibi görünüyordu. */
.btn--ghost{
  background:transparent;
  color:var(--electric-soft);
  border:1px solid rgba(52,120,255,.45);
  box-shadow:none;
}
.btn--ghost:hover{
  background:rgba(52,120,255,.14);
  border-color:var(--electric);
  color:var(--paper);
}

/* ── Başlık ───────────────────────────────────────────────── */

.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  /* Burada filtre/transform KULLANILMAMALI: mobil menü position:fixed ve
     içerik kutusunun ekran olması gerekiyor. */
}
/* Başlık şeridinin zemini yok: hiçbir kaydırma durumunda arkasına renk
   veya bulanıklık konmuyor. Zemin olmayınca kaydırılmış sayfada menü
   yazıları içerikle üst üste biniyordu; bu yüzden aşağı kaydırırken
   başlık çekiliyor, yukarı kaydırınca geri geliyor. Menü açıkken asla
   gizlenmez. */
.site-header{
  transition:transform .32s var(--ease), opacity .32s var(--ease);
}
.site-header.is-away{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .site-header{ transition:none; }
}
.site-header__inner{
  display:flex; align-items:center; gap:var(--s3);
  min-height:78px;
}

.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; margin-right:auto;
}
.brand__mark{ width:auto; height:30px; }
.brand__word{ width:auto; height:15px; }

.nav{ display:flex; align-items:center; gap:var(--s4); }
.nav__link{
  font-size:.9375rem; font-weight:500;
  color:var(--slate); text-decoration:none;
  transition:color .2s var(--ease);
}
.nav__link:hover{ color:var(--paper); }
.nav .btn{ padding:.8rem 1.35rem; font-size:.9375rem; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--paper);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block; width:28px; height:2.5px;
  background:currentColor; border-radius:2px;
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span{ margin-inline:auto; position:relative; }
.nav-toggle span::before,
.nav-toggle span::after{ content:""; position:absolute; left:0; }
.nav-toggle span::before{ top:-9px; }
.nav-toggle span::after{ top:9px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-9px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:78px 0 0;
    height:auto; max-height:calc(100dvh - 78px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:var(--s3);
    padding:var(--gutter);
    padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    background:var(--navy);
    border-top:1px solid var(--line);
    overflow-y:auto;                 /* uzun menü kesilmesin */
    overscroll-behavior:contain;     /* arka sayfa kaymasın */
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
  .nav__link{
    font-family:var(--font-hero); font-weight:600;
    /* Kısa telefonlarda 7 öğe + CTA 2rem'de panele sığmıyordu. */
    font-size:clamp(1.35rem, 4.4vw + .3rem, 2rem);
    letter-spacing:-.02em; color:var(--paper);
  }
  .nav{ gap:clamp(.7rem, 2.1vh, 1.5rem); }
  .nav .btn{ margin-top:var(--s2); padding:1rem 1.6rem; font-size:1rem; }
  .site-header__inner{ position:relative; z-index:101; }
  .brand,.nav-toggle{ position:relative; z-index:102; }
}

/* ── Başlık yazı tipi uyumu ────────────────────────────────
   Marck Script tek ağırlığa (400) sahip bir el yazısıdır. Kalın istendiğinde
   tarayıcı sahte kalın üretir ve bağlantı çizgileri bozulur; negatif harf
   aralığı da harfleri üst üste bindirir. Bu yüzden başlık ailesini kullanan
   her yerde ağırlık, aralık ve satır arası burada tek elden normalleştirilir.
   Ayrıca yüzün eğik bir varyantı yok: vurgu italikle değil renkle veriliyor. */
.hero__title, .hero__line, .hero__word, .hero__rot__sizer,
.section__title, .section__title em,
.page-hero__title, .page-hero__title em,
.quote p{
  font-weight:400;
  font-style:normal;
  letter-spacing:normal;
  /* Yüzün boşluk glifi geniş; kelimeler birbirinden kopuk duruyordu. */
  word-spacing:-.14em;
}

/* El yazısında çıkıntılar uzun; satırlar sıkışmasın. */
.hero__title{ line-height:1.24; }
.section__title{ line-height:1.2; }
.page-hero__title{ line-height:1.2; }

/* ── Hero ─────────────────────────────────────────────────
   Video tüm ekranı kaplar ve sabit başlığın altında kalır: sayfanın
   tepesinde başlık zemini saydam olduğu için menü videonun üstünde
   yüzer. Bölüm ekranın iki katı yüksekliktedir; içindeki sahne yapışkan
   olduğundan video bu mesafe boyunca ekranda kalır ve kaydırma
   ilerlemesi videoyu sürer (assets/home.js). */

.hero{
  position:relative;
  height:175svh;
  /* Kaydırma ilerlemesi: 0 → 1. home.js yazar, CSS okur. */
  --p:0;
}
@supports not (height:100svh){ .hero{ height:175vh; } }

.hero__scene{
  position:sticky; top:0;
  height:100svh; min-height:540px;
  /* İçerik alta hizalı: görüntünün hareketli/detaylı kısmı üstte serbest
     kalıyor, metin kadrajın sakin ve koyu olan alt bölgesine oturuyor. */
  display:flex; align-items:flex-end; justify-content:center;
  overflow:clip;
}
@supports not (height:100svh){ .hero__scene{ height:100vh; } }

.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:var(--navy);
}
.hero__poster,
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Patlama sahnesinin merkezi kadrajın biraz üstünde. */
  object-position:50% 33%;
  /* Video arka plandır, ön plandaki metinle yarışmamalı: parlaklık ve
     renk doygunluğu kısılıyor. Perdeyle koyultmak yerine görüntünün
     kendisini sakinleştirmek, menünün arkasının simsiyah kapanmasını
     önlüyor. */
  filter:brightness(.6) saturate(.88);
}
.hero__video{ opacity:0; transition:opacity .6s var(--ease); }
.hero__bg.has-video .hero__video{ opacity:1; }
.hero__bg.has-video .hero__poster{ opacity:0; transition:opacity .6s var(--ease); }

/* Perde üç iş yapar ve hiçbiri videoyu tümden kapatmaz:
   1) menü şeridini okutacak kadar hafif bir üst geçiş — video menünün
      arkasında görünür kalır,
   2) metin bloğunun arkasında yumuşak bir koyulaşma,
   3) altta bir sonraki bölüme kapanış. */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(6,19,39,.42) 0, rgba(6,19,39,0) 190px),
    linear-gradient(to top,
      rgba(6,19,39,.97) 0%,
      rgba(6,19,39,.88) 26%,
      rgba(6,19,39,.42) 52%,
      rgba(6,19,39,0) 76%);
}

/* Dar ve dikey kadrajda görüntü ekranı tamamen doldurduğu için metnin
   altında ayrı bir sakin bölge kalmıyor: kadraj biraz daha yukarı alınıp
   alt perde erken koyulaştırılıyor. */
@media (max-width:1024px){
  .hero__poster,
  .hero__video{ object-position:50% 26%; }
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(6,19,39,.5) 0, rgba(6,19,39,0) 150px),
      linear-gradient(to top,
        rgba(6,19,39,.98) 0%,
        rgba(6,19,39,.95) 32%,
        rgba(6,19,39,.72) 54%,
        rgba(6,19,39,.22) 82%,
        rgba(6,19,39,0) 100%);
  }
}

.hero__inner{
  position:relative; z-index:1;
  display:grid; justify-items:center; gap:clamp(1.25rem, 2.6vh, 2rem);
  text-align:center;
  padding-block:clamp(4.5rem, 10vh, 7rem) clamp(6.5rem, 15vh, 9.5rem);
  /* İçerik söndürülmüyor: yapışkan sahne kaydırma menzili bitince zaten
     içerikle birlikte yukarı kayıp gidiyor. Erken söndürmek hero'nun son
     ekranını bomboş bırakıyordu — özellikle telefonda. */
}

.hero__title{
  margin:0;
  font-family:var(--font-hero);
  font-optical-sizing:auto;
  font-size:clamp(2.35rem, 6.4vw, 5.4rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.028em;
  color:#f2f6fc;
  text-shadow:0 2px 34px rgba(4,12,26,.6);
  text-wrap:balance;
}
.hero__line{ display:block; }
.hero__line--a{ font-style:italic; }
.hero__line--b{ font-weight:500; }

/* Kaydırmayla oynatmanın çalışmadığı durumda (hareket azaltma, çok kısa
   ekran) videoyu ziyaretçi kendi başlatır. */
.hero__toggle{
  position:absolute; z-index:2;
  right:var(--gutter); bottom:clamp(1.25rem, 3.5vh, 2.25rem);
  display:none; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(6,19,39,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--font-sans); font-size:.8125rem; font-weight:500;
  color:var(--slate); cursor:pointer;
}
.hero__toggle:hover{ color:var(--paper); border-color:var(--electric-soft); }
.hero.is-static .hero__bg.has-video ~ .hero__toggle{ display:inline-flex; }

/* Kaydırma ipucu: ilerleme başlayınca söner. */
.hero__hint{
  position:absolute; z-index:2;
  left:50%; translate:-50% 0; bottom:clamp(.9rem, 2.4vh, 1.6rem);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  margin:0;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate-dim);
  opacity:clamp(0, calc(1 - var(--p) * 6), 1);
}
.hero__hint i{
  display:block; width:1px; height:34px; background:var(--hairline);
  position:relative; overflow:hidden;
}
.hero__hint i::after{
  content:""; position:absolute; inset:0 0 auto; height:40%;
  background:var(--electric);
  animation:hero-hint 1.9s var(--ease) infinite;
}
@keyframes hero-hint{
  0%   { transform:translateY(-100%); }
  100% { transform:translateY(250%); }
}

/* Kısa ekran ve hareket azaltma: yapışkan sahne yerine tek ekranlık
   normal bölüm; video ilk karesinde durur, düğmeyle oynatılır. */
.hero.is-static{ height:auto; }
.hero.is-static .hero__scene{
  position:static; height:auto; min-height:0;
  padding-block:clamp(5rem, 12vh, 7rem) clamp(3rem, 8vh, 5rem);
}
.hero.is-static .hero__inner{ opacity:1; transform:none; }
.hero.is-static .hero__hint{ display:none; }

@media (prefers-reduced-motion:reduce){
  .hero__hint i::after{ animation:none; }
}

/* ── Başlıktaki dönen kelime ───────────────────────────────
   Sözcükler üst üste yığılır; görünmez ölçüt (en uzun sözcük) kutunun
   en/boyunu sabitler, böylece geçiş sırasında başlık zıplamaz. Kutu
   kırptığı için sözcükler aşağıdan girip yukarıdan çıkar. */
.hero__rot{
  position:relative; display:inline-block;
  overflow:hidden; vertical-align:bottom;
  /* Kırpma kaydırmalı geçiş için gerekli; ama Fraunces'in çıkıntılı
     harfleri kesiliyordu. Kutu içeriden büyütülüp dışarıdan geri
     alınıyor: harfler tam görünüyor, dizilim değişmiyor. */
  /* El yazısı yüzünün çıkıntıları uzun; kutu simetrik olarak genişletilip
     dışarıdan geri alınıyor: harfler kesilmiyor, dizilim değişmiyor. */
  padding-block:.78em; margin-block:-.78em;
  /* overflow:hidden tek başına yetmiyordu: sözcükler kendi katmanlarına
     yükseldiği için geçiş sırasında kutunun dışına taşıyorlardı. clip-path
     kırpmayı katman birleştirmede de zorunlu kılıyor. */
  clip-path:inset(0);
}
.hero__rot__sizer{ visibility:hidden; font-weight:700; }
.hero__word{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-style:normal;
  opacity:0; transform:translate3d(0,105%,0);
  transition:opacity .38s var(--ease), transform .62s cubic-bezier(.2,1.12,.36,1);
}
.hero__word.is-in{ opacity:1; transform:none; }
.hero__word.is-out{ opacity:0; transform:translate3d(0,-105%,0); }

/* Hareket azaltıldığında tek sözcük sabit kalır. */
@media (prefers-reduced-motion:reduce){
  .hero__word{ transition:none; }
}

/* ── Hero rozeti ───────────────────────────────────────────
   Başlığın üstündeki tek satırlık giriş: fiyat sayfasına götürür.
   Başlıkla yarışmaması için küçük ve düşük kontrastlı. */
.hero__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .5rem .42rem .9rem;
  border:1px solid rgba(126,166,255,.28);
  border-radius:999px;
  /* Rozet videonun parlak bölgesine denk gelebiliyor; okunur kalması için
     kendi zemini yeterince koyu ve arkası bulanık. */
  background:rgba(6,19,39,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--font-sans);
  font-size:.8125rem; font-weight:500; letter-spacing:-.005em;
  color:#c9d6ea; text-decoration:none;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.hero__badge:hover{ color:var(--paper); border-color:var(--electric-soft); }
.hero__badge .i-arrow{ width:.95rem; height:.95rem; color:var(--electric-soft); }

.i-arrow{
  width:1.05rem; height:1.05rem; flex:none;
  transition:transform .25s var(--ease);
}
.btn:hover .i-arrow{ transform:translateX(3px); }

.hero__support{
  margin:0;
  max-width:52ch;
  color:#b7c4d8;
  font-size:clamp(1rem,1.25vw,1.1875rem);
  line-height:1.6;
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center;
  margin-top:clamp(.25rem, 1vh, .75rem);
}

@media (max-width:520px){
  .hero__actions{ width:100%; flex-direction:column; }
  .hero__actions .btn{ width:100%; justify-content:center; }
}

/* ── Platform bandı ───────────────────────────────────────
   Ortaklık iddiası taşımayan, hareketsiz bir bilgi şeridi. Eski sürüm
   sürekli kayan bir marquee'ydi; hem okumayı zorlaştırıyor hem de
   platform logolarını rozet gibi gösteriyordu. */

.platforms{
  padding:var(--s4) 0;
  border-block:1px solid var(--line);
  background:var(--surface);
}
.platforms__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s3) var(--s5);
}
.platforms__title{
  margin:0; flex:0 1 auto;
  font-family:var(--font-mono);
  font-size:.75rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-dim);
}
.platforms__list{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s3) var(--s5);
  margin:0; padding:0; list-style:none;
}
.platform{ display:flex; align-items:center; gap:.75rem; }
.platform__text{ display:flex; flex-direction:column; line-height:1.25; }
.platform__text b{
  font-family:var(--font-sans); font-weight:600;
  font-size:.9375rem; color:var(--paper);
}
.platform__text span{ font-size:.8125rem; color:var(--slate-dim); }

/* Optik ölçü eşitlemesi: her işaretin sqrt(en×boy) değeri aynı olsun diye
   yükseklikler en/boy oranına göre ayrı ayrı verilir. */
.pmark{ width:auto; flex:none; }
.pm-meta  { height:clamp(20px, 2.0vw, 26px); }   /* en/boy 1.51 */
.pm-google{ height:clamp(25px, 2.5vw, 32px); }   /* en/boy 0.98 */

@media (max-width:640px){
  .platforms__inner{ gap:var(--s3); }
  .platforms__list{ gap:var(--s3) var(--s4); }
}

/* ── Bölüm iskeleti ───────────────────────────────────────── */

/* Bölüm boşluğu içerik miktarına göre akışkan: birkaç cümlelik bölümler
   için sabit 9,5rem üst+alt fazla geniş bir boşluk üretiyordu. */
.section{ padding:clamp(3.75rem, 6.5vw, 7rem) 0; }
.section--raised{
  background:var(--surface);
  border-block:1px solid var(--line);
}
.section--dots{
  background:var(--surface);
  background-image:radial-gradient(rgba(148,166,194,.12) 1px, transparent 1px);
  background-size:34px 34px;
  border-block:1px solid var(--line);
}

.section__head{
  display:grid; gap:var(--s4);
  margin-bottom:var(--s6);
}
@media (min-width:980px){
  .section__head{
    grid-template-columns:1.05fr .95fr;
    align-items:end;
    gap:var(--s5);
  }
}

/* ── Etiket ve sayaç animasyonu ───────────────────────────── */

/* Görünürlük animasyonu yalnızca JavaScript çalışıyorsa gizlemeyle
   başlar. <html class="js"> layout'taki satır içi betikle eklenir;
   betik çalışmazsa içerik hiç gizlenmez ve sayfa okunur kalır. */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(-10px,0,0);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

[data-count]{
  font-variant-numeric:tabular-nums;
  font-style:normal;
}

/* numaranın yanındaki kural, sayaç sayarken çizilir */
.step__no::after,
.pillar__no::after{
  content:""; width:92px; height:2px; flex:none;
  background:var(--electric);
  transform:scaleX(0); transform-origin:left;
  transition:transform .75s var(--ease) .1s;
}
.step__no.is-in::after,
.pillar__no.is-in::after{ transform:scaleX(1); }

.service__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-2);
  transform:scaleX(0); transform-origin:left;
  transition:transform .75s var(--ease) .1s;
}
.service__head.is-in::after{ transform:scaleX(1); }

/* ── Numaralı sıra (Yaklaşım · Sistem) ────────────────────── */

.sequence{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s6);
}
@media (min-width:820px){
  .sequence{ grid-template-columns:repeat(2,1fr); column-gap:var(--s6); }
}
@media (min-width:1040px){
  .sequence{ grid-template-columns:repeat(3,1fr); }
  .sequence--four{ grid-template-columns:repeat(2,1fr); }
}
/* Adım sayısı sütun sayısına bölünmediğinde son adım tek başına kalıyordu;
   kalan satırı doldurarak dizilim dengede kalıyor. */
@media (min-width:820px){
  .sequence > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (min-width:1040px){
  .sequence > :last-child:nth-child(3n+1){ grid-column:1 / -1; }
}

.step__no,
.pillar__no{
  display:flex; align-items:center; gap:1.1rem;
  margin:0 0 var(--s3);
  font-family:var(--font-mono);
  font-size:.9375rem; font-weight:500; letter-spacing:.1em;
  color:var(--electric-soft);
}

.sequence h3{
  margin:0 0 var(--s2);
  font-size:clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  font-weight:700; letter-spacing:-.015em;
  color:var(--paper);
}
.sequence p{
  margin:0;
  max-width:52ch;
  color:var(--slate);
  line-height:1.7;
}

/* ── Hizmet kartları ──────────────────────────────────────── */

.services__grid{
  display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(min(288px, 100%), 1fr));
}
/* Dört kart üç sütuna sığdığında dördüncüsü yalnız kalıyordu. Bu sayıda
   üçlü ara adım atlanır: 1 → 2 → 4 sütun. */
.services__grid:has(> :nth-child(4):last-child),
.trust__grid:has(> :nth-child(4):last-child){ grid-template-columns:1fr; }
@media (min-width:620px){
  .services__grid:has(> :nth-child(4):last-child),
  .trust__grid:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1180px){
  .services__grid:has(> :nth-child(4):last-child),
  .trust__grid:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,1fr); }
}
/* Geniş kartlarda madde listeleri var; dört sütuna sıkıştırılmaz. */
@media (min-width:1180px){
  .services__grid--wide:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); }
}

.service{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-2);
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.service:hover{
  border-color:var(--line-2);
  transform:translateY(-3px);
}
.service:first-child{ border-left:2px solid var(--electric); }

.service__watermark{
  position:absolute; z-index:-1;
  right:-14%; bottom:-8%;
  width:74%; height:auto;
  opacity:.06;
  pointer-events:none;
}

.service__head{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:var(--s3);
  margin-bottom:var(--s3);
}
.service__no{
  font-family:var(--font-hero);
  font-style:italic; font-weight:700;
  font-size:clamp(3.25rem, 2.4rem + 3vw, 4.5rem);
  line-height:.85;
  letter-spacing:-.03em;
  color:var(--electric);
}
.service__count{
  font-family:var(--font-mono);
  font-size:.8125rem; letter-spacing:.16em;
  color:var(--slate-dim);
}

.service__name{
  margin:0 0 .75rem;
  font-size:1.375rem; font-weight:700; letter-spacing:-.015em;
  color:var(--paper);
}
.service > p{
  margin:0 0 var(--s3);
  color:var(--slate);
  line-height:1.65;
}

.service__list{
  list-style:none; margin:auto 0 0; padding:var(--s3) 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:.7rem;
}
.service__list li{
  display:flex; align-items:baseline; gap:.7rem;
  font-size:.9375rem;
  color:var(--slate);
}
.service__list .wedge{ color:var(--electric); }

.capabilities{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem;
  margin-top:var(--s4);
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-2);
  font-size:.9375rem;
  color:var(--slate);
}
.capabilities strong{
  font-family:var(--font-mono);
  font-size:.8125rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--electric-soft);
}

/* ── Fiyatlandırma ────────────────────────────────────────── */

/* Kayan göstergeli dönem anahtarı */
.switch{
  position:relative; display:inline-flex; gap:.25rem;
  margin-bottom:var(--s5);
  padding:5px;
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface-2);
}
.switch__thumb{
  position:absolute; top:5px; left:5px;
  border-radius:12px; background:var(--electric);
  box-shadow:0 10px 24px -12px rgba(52,120,255,.9);
  transition:transform .38s var(--ease), width .38s var(--ease), height .38s var(--ease);
  pointer-events:none;
}
.switch__opt{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.3rem;
  border:0; border-radius:12px; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem; font-weight:600;
  color:var(--slate);
  transition:color .28s var(--ease);
  white-space:nowrap;
}
.switch__opt[aria-checked="true"]{ color:#03101f; }
.switch__save{
  padding:.2rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.22);
  font-size:.75rem; font-weight:700; letter-spacing:.01em;
}
.switch__opt[aria-checked="false"] .switch__save{
  background:rgba(52,120,255,.14); color:var(--electric-soft);
}

/* Dar ekranda yan yana sığmıyordu (320px'te sayfayı taşırıyordu): alt alta. */
@media (max-width:560px){
  .switch{ display:flex; flex-direction:column; width:100%; }
  .switch__opt{ justify-content:center; }
}

/* Plan kartı: solda fiyat, sağda içerik */
.plan{
  display:grid; gap:0;
  border:1px solid var(--line); border-radius:24px;
  background:var(--surface-2);
  overflow:hidden;
}
@media (min-width:960px){ .plan{ grid-template-columns:minmax(320px,.85fr) 1.15fr; } }

.plan__price-col{ padding:clamp(1.75rem,3vw,2.75rem); }
.plan__feat-col{
  padding:clamp(1.75rem,3vw,2.75rem);
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.16);
}
@media (min-width:960px){
  .plan__feat-col{ border-top:0; border-left:1px solid var(--line); }
}

.plan__top{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.6rem; }
.plan__name{ margin:0; font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem); font-weight:700; letter-spacing:-.02em; color:var(--paper); }
.plan__badge{
  padding:.3rem .7rem; border-radius:999px;
  border:1px solid rgba(52,120,255,.4); background:rgba(52,120,255,.12);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--electric-soft);
}
.plan__desc{ margin:0 0 var(--s4); color:var(--slate); font-size:.9375rem; line-height:1.65; max-width:38ch; }

.plan__price{ display:flex; align-items:baseline; gap:.25rem; margin:0 0 .6rem; }
.plan__amount{
  font-size:clamp(2.75rem,1.8rem + 3.4vw,4rem);
  font-weight:700; letter-spacing:-.04em; line-height:1;
  color:var(--electric-soft);
}
/* Para birimi tek karakterlik bir simge değil, iki harfli "TL":
   rakamla yarışmaması için biraz daha küçük ve araya nefes konuyor. */
.plan__cur{ font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem); font-weight:700; color:var(--electric-soft); margin-left:.3rem; }
.plan__per{ font-size:1.0625rem; color:var(--slate); margin-left:.15rem; }
.plan__note{ margin:0 0 var(--s4); font-size:.875rem; color:var(--slate-dim); min-height:2.4em; }
.plan__cta{ width:100%; justify-content:center; }

.plan__fine{
  list-style:none; margin:var(--s4) 0 0; padding:var(--s3) 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:.5rem;
  font-size:.8125rem; line-height:1.5; color:var(--slate-dim);
}

.plan__feat-title{
  margin:0 0 var(--s3);
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--electric-soft);
}
.feat__grid{ display:grid; gap:var(--s4); }
@media (min-width:560px){ .feat__grid{ grid-template-columns:repeat(2,1fr); } }
.feat__head{ margin:0 0 .8rem; font-size:.9375rem; font-weight:700; color:var(--paper); }
.feat__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.feat__list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.875rem; line-height:1.5; color:var(--slate); }
.tick-i{
  flex:none; width:20px; height:20px; padding:3px;
  border:1px solid rgba(52,120,255,.45); border-radius:50%;
  color:var(--electric-soft); margin-top:.05rem;
}

/* Başlığın kelime kelime aşağıdan açılması */
.cut{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.cut > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .62s cubic-bezier(.22,.9,.24,1);
}
.is-in .cut > span,
[data-cut].is-in .cut > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .cut > span{ transform:none; }
  .switch__thumb{ transition:none; }
}

/* ── Rakamlar: kaydırınca sayan istatistik bandı ──────────── */

/* .section zaten dikey boşluğu veriyor; burada tekrar eklenmiyor. */
.stats__grid{
  display:grid;
  grid-template-columns:1fr;
  border:1px solid var(--line);
  border-radius:24px;
}
.stat{ padding:clamp(1.6rem, 3vw, 2.5rem) clamp(1.4rem, 2.6vw, 2.25rem); }
.stat + .stat{ border-top:1px solid var(--line); }

/* Ayraçlar sütun sayısına göre: satır başındakine sol kenarlık verilmez. */
@media (min-width:620px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat + .stat{ border-top:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .stat:not(:nth-child(2n+1)){ border-left:1px solid var(--line); }
}
@media (min-width:1000px){
  .stats__grid{ grid-template-columns:repeat(4,1fr); }
  .stat:nth-child(n+3){ border-top:0; }
  .stat:not(:nth-child(2n+1)){ border-left:0; }
  .stat:not(:nth-child(4n+1)){ border-left:1px solid var(--line); }
}
/* Üç kutulu bant: ikili ara adım atlanır, ayraçlar üçe göre kurulur. */
@media (min-width:760px){
  .stats__grid--3{ grid-template-columns:repeat(3,1fr); }
  .stats__grid--3 .stat{ border-top:0; }
  .stats__grid--3 .stat + .stat{ border-left:1px solid var(--line); }
}

/* ── Odometre sayaç ────────────────────────────────────────
   İstenen React bileşenindeki "slide" efektinin karşılığı: her basamak
   kendi sütununda 0–9 yığınını kaydırır. Basamak konumu doğrudan anlık
   değerden türetildiği için birler hanesi onlar hanesinden hızlı döner —
   gerçek odometre hissi buradan geliyor. */
.odo{
  display:inline-flex; align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.odo__d{
  position:relative; display:inline-block;
  width:1ch; overflow:hidden;
  /* Rakamlar kutunun tepesinden taşmasın diye satır yüksekliği sabit. */
  line-height:1;
}
.odo__d > i{
  display:block; font-style:normal; visibility:hidden;   /* yükseklik ölçütü */
}
.odo__col{
  position:absolute; inset:0 0 auto;
  display:flex; flex-direction:column;
  will-change:transform;
}
.odo__col > span{ display:block; line-height:1; }
.odo__sep{ display:inline-block; }
.odo__suffix{ display:inline-block; }

@media (prefers-reduced-motion:reduce){
  .odo__col{ transition:none; }
}

.stat__num{
  margin:0 0 .8rem;
  font-size:clamp(2.35rem, 1.4rem + 3.2vw, 3.75rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--electric-soft);
  /* tabular-nums kullanılmıyor: virgülü tam rakam genişliğine çekip
     "3,4×" arasını açıyordu. Sayaç sola hizalı olduğu için genişlik
     değişimi çevreyi kaydırmıyor. */
}
.stat__label{
  margin:0;
  max-width:24ch;
  color:var(--paper);
  font-size:clamp(.9375rem, .88rem + .25vw, 1.0625rem);
  line-height:1.5;
}

/* ── Referans logoları: sonsuz kayan şerit ────────────────── */

.logos{
  padding:var(--s7) 0;
  border-block:1px solid var(--line);
  background:var(--navy);
}
.logos__label{
  margin:0 0 var(--s5);
  text-align:center;
  font-family:var(--font-mono);
  font-size:.8125rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate-dim);
}

.marquee{
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; width:max-content;
  align-items:center;
  gap:clamp(2.25rem, 5.4vw, 4.5rem);
  will-change:transform;
}
.marquee__item{
  flex:none;
  display:grid; place-items:center;
  height:clamp(30px, 4.4vw, 42px);
}
.marquee__item img{
  height:100%; width:auto;
  /* Logolar koyu zeminde tek tonda okunsun diye beyaza indirgeniyor.
     Renkli logo isterseniz bu filtreyi kaldırın. */
  filter:brightness(0) invert(1);
  opacity:.45;
  transition:opacity .3s var(--ease);
}
.marquee__item:hover img{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .marquee{ overflow-x:auto; mask-image:none; }
  .marquee__item img{ opacity:.7; }
}

/* ── Neden Vora ───────────────────────────────────────────── */

.why__grid{
  display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(min(272px, 100%), 1fr));
}
@media (min-width:760px){
  .why__grid{ grid-template-columns:repeat(2,1fr); }
}
/* Üç kartlı bir ızgara iki sütuna düştüğünde son kart yalnız kalıyordu.
   Bu sayıda ara adım atlanır: düzen doğrudan tek sütundan üç sütuna geçer. */
.why__grid:has(> :nth-child(3):last-child),
.services__grid:has(> :nth-child(3):last-child){
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .why__grid:has(> :nth-child(3):last-child),
  .services__grid:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr);
  }
}
.why__item{
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .3s var(--ease);
}
.why__item:hover{ border-color:var(--line-2); }
.why__item h3{
  margin:0 0 .75rem;
  font-size:1.1875rem; font-weight:700; letter-spacing:-.01em;
  color:var(--paper);
}
.why__item p{ margin:0; color:var(--slate); font-size:.9375rem; line-height:1.7; }

/* ── İletişim ─────────────────────────────────────────────── */

.contact__grid{ display:grid; gap:var(--s6); }
/* Tek sütunda önce iletişim bilgileri gelir: ana yönlendirme olan
   WhatsApp düğmesi uzun formun altında kalmasın. Blok kısa tutulduğu
   için form yine ekranın hemen altında başlıyor. */
.contact__grid > .contact__details{ order:1; }
.contact__grid > .form{ order:2; }
@media (min-width:980px){
  .contact__grid{ grid-template-columns:.85fr 1.15fr; gap:var(--s6); }
  .contact__grid > .form{ order:2; }
  .contact__grid > .contact__details{ order:1; }
}

/* WhatsApp iletişim sayfasının ana yönlendirmesi: listedeki bir satır
   değil, blok bir düğme. */
.contact__wa{ width:100%; justify-content:center; margin-bottom:var(--s3); }
.contact__note{
  margin:0 0 var(--s4);
  font-size:.875rem; line-height:1.65; color:var(--slate-dim);
}

.contact__link{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-hero);
  font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight:500; letter-spacing:-.01em;
  color:var(--paper); text-decoration:none;
  transition:color .25s var(--ease);
}
.contact__link:first-of-type{ margin-top:var(--s4); border-top:1px solid var(--line); }
.contact__link span{
  font-family:var(--font-mono);
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate-dim);
  transition:color .25s var(--ease);
}
.contact__link:hover{ color:var(--electric-soft); }
.contact__link:hover span{ color:var(--electric); }

.form{
  padding:var(--s5);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-2);
}
/* Mobilde kart iç boşluğu daralır; dokunma hedefleri küçülmez. */
@media (max-width:640px){
  .form{ padding:var(--s4) var(--s3); }
}
.form__row{ display:grid; gap:var(--s3); }
@media (min-width:560px){ .form__row{ grid-template-columns:1fr 1fr; } }

.field{ display:grid; gap:.5rem; margin-bottom:var(--s3); }
.field label{
  font-family:var(--font-mono);
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-dim);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:.95rem 1.05rem;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:rgba(4,12,26,.55);
  color:var(--paper);
  font-family:var(--font-sans); font-size:1rem;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--electric) 50%),linear-gradient(135deg,var(--electric) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:3rem;
}
.field select option{ background:var(--navy-2); color:var(--paper); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--electric);
  background:rgba(4,12,26,.8);
}

.form__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  margin-top:var(--s4);
}
.form__note{
  margin:0; flex:1 1 220px;
  font-size:.8125rem; color:var(--slate-dim);
}
.form__status{
  margin:var(--s3) 0 0;
  font-size:.9375rem; color:var(--electric-soft);
}
.form__status:empty{ display:none; }
.form__status.is-ok{ color:#7ee2a8; }
.form__status.is-error{ color:#ff9a8b; }

/* Bal küpü: yalnızca otomatik gönderim yapan botlar doldurur.
   Ekran okuyucudan ve sekme sırasından çıkarıldığı için gerçek
   ziyaretçiye hiçbir maliyeti yok. */
.hp{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ── Alt bilgi ────────────────────────────────────────────── */

.site-footer{
  padding:var(--s7) 0 var(--s4);
  border-top:1px solid var(--line);
  background:var(--navy);
}
.footer__top{
  display:grid; gap:var(--s5);
  padding-bottom:var(--s6);
}
@media (min-width:820px){
  .footer__top{ grid-template-columns:1fr auto; align-items:start; }
}
.footer__lockup{ width:clamp(140px, 22vw, 200px); height:auto; opacity:.92; }
.footer__side{ display:grid; gap:var(--s3); justify-items:start; }
@media (min-width:820px){ .footer__side{ justify-items:end; } }

.footer__nav{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.footer__nav a{
  font-size:.9375rem; color:var(--slate); text-decoration:none;
  transition:color .2s var(--ease);
}
.footer__nav a:hover{ color:var(--electric-soft); }

.footer__mail{
  font-family:var(--font-hero);
  font-size:clamp(1.15rem, 1rem + .7vw, 1.625rem);
  font-weight:500; font-style:italic;
  color:var(--electric-soft); text-decoration:none;
}
.footer__mail:hover{ color:var(--paper); }

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2);
  padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-dim);
}

/* ── Hareket azaltma ──────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .step__no::after,
  .pillar__no::after,
  .service__head::after{ transform:scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   ÇOK SAYFALI YAPI — ortak bileşenler
   ═══════════════════════════════════════════════════════════ */

/* ── Navigasyon: aktif durum + açılır alt menü ─────────────── */
.nav__link.is-active{ color:var(--paper); }
.nav__link.is-active::after{
  content:""; display:block; height:2px; margin-top:5px;
  background:var(--electric); border-radius:2px;
}
.nav__group{ position:relative; }
.nav__trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--font-sans); font-size:.9375rem; font-weight:500;
  color:var(--slate);
}
.nav__trigger:hover{ color:var(--paper); }
.nav__caret{ width:11px; height:8px; transition:transform .25s var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }

.subnav{
  position:absolute; top:calc(100% + .9rem); left:-1rem; z-index:20;
  min-width:264px; display:grid;
  padding:.5rem; border:1px solid var(--line); border-radius:16px;
  background:rgba(10,27,49,.97);
  backdrop-filter:blur(16px);
  box-shadow:0 26px 60px -28px rgba(0,6,20,.9);
}
/* display:grid, tarayıcının [hidden]{display:none} kuralını ezdiği için
   panel hiç kapanmıyordu; açıkça geri getiriliyor. */
.subnav[hidden]{ display:none; }

.subnav__link{
  padding:.7rem .85rem; border-radius:10px;
  font-size:.9375rem; color:var(--slate); text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.subnav__link:hover{ background:rgba(52,120,255,.14); color:var(--paper); }
.subnav__link.is-active{ color:var(--electric-soft); }
.nav__cta{ padding:.8rem 1.35rem; font-size:.9375rem; }

@media (max-width:900px) and (max-height:700px){
  .nav__link, .nav__trigger{ font-size:1.3rem; }
  .nav{ gap:.6rem; padding-block:1rem; }
  .nav .btn{ margin-top:.5rem; padding:.85rem 1.4rem; }
}

@media (max-width:900px){
  .nav__group{ width:100%; }
  .nav__trigger{
    width:100%; justify-content:space-between;
    font-family:var(--font-hero); font-weight:600;
    font-size:clamp(1.35rem, 4.4vw + .3rem, 2rem);
    letter-spacing:-.02em; color:var(--paper);
  }
  .subnav{
    position:static; min-width:0; margin:.5rem 0 0;
    background:none; border:0; box-shadow:none; backdrop-filter:none;
    padding:0 0 0 .25rem; gap:.15rem;
  }
  .subnav__link{ font-size:clamp(.9375rem, 2.8vw, 1.0625rem); padding:.5rem 0; }
  .nav__link.is-active::after{ display:none; }
}

/* ── İç sayfa hero ────────────────────────────────────────── */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(78px + var(--s7)) 0 var(--s7);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(52,120,255,.16), transparent 62%),
    radial-gradient(50% 60% at 88% 12%, rgba(0,56,148,.22), transparent 66%);
}
.page-hero__inner{ position:relative; }
.page-hero__title{
  margin:0; max-width:20ch;
  font-family:var(--font-hero); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(2.2rem, 1.3rem + 3.6vw, 3.9rem);
  line-height:1.06; letter-spacing:-.025em; color:var(--paper);
}
.page-hero__title em{ font-style:italic; color:var(--electric-soft); }
.page-hero__lede{ margin:var(--s3) 0 0; max-width:60ch; color:var(--slate); font-size:clamp(1rem,.95rem + .35vw,1.1875rem); line-height:1.7; }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }

/* ── Breadcrumb ────────────────────────────────────────────── */
.crumbs{ margin:0 0 var(--s3); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-dim); }
.crumbs a{ color:var(--slate-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--electric-soft); }
/* Yalnızca "/" ayracı sönük olsun; bulunulan sayfa adı okunur kalsın
   (eski kural ikisini birden %60 saydamlığa düşürüyordu). */
.crumbs span[aria-hidden]{ margin:0 .5rem; opacity:.45; }
.crumbs [aria-current="page"]{ color:var(--slate); }

/* ── Güven alanı ───────────────────────────────────────────── */
.trust__grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(min(240px, 100%), 1fr)); }
.trust__item{ padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.trust__item .wedge{ width:1.15rem; height:.95rem; color:var(--electric); }
.trust__title{ margin:.9rem 0 .6rem; font-size:1.0625rem; font-weight:700; color:var(--paper); }
.trust__text{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--slate); }

/* ── Hizmet kartı (özet) ───────────────────────────────────── */
.scard{
  display:flex; flex-direction:column;
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.scard:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.scard__head{ position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:var(--s3); margin-bottom:var(--s3); }
.scard__head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-2); transform:scaleX(0); transform-origin:left; transition:transform .75s var(--ease) .1s; }
.scard__head.is-in::after{ transform:scaleX(1); }
/* Sıra numarası veri, başlık değil: el yazısında okunmuyor. */
.scard__no{ font-family:var(--font-sans); font-style:normal; font-weight:700; font-size:clamp(2.6rem,2rem + 2.2vw,3.5rem); line-height:.85; letter-spacing:-.03em; color:var(--electric); }
.scard__count{ font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.16em; color:var(--slate-dim); }
.scard__name{ margin:0 0 .75rem; font-size:1.25rem; font-weight:700; letter-spacing:-.015em; color:var(--paper); }
.scard__text{ margin:0 0 var(--s3); color:var(--slate); font-size:.9375rem; line-height:1.65; }

.arrow-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9375rem; font-weight:600; color:var(--electric-soft); text-decoration:none;
}
.arrow-link span{ transition:transform .25s var(--ease); }
.arrow-link:hover span{ transform:translateX(4px); }

.section__more{ margin:var(--s5) 0 0; }

/* ── Boş durum ─────────────────────────────────────────────── */
.empty{
  display:grid; gap:var(--s3); justify-items:start;
  padding:var(--s5); border:1px dashed var(--line-2); border-radius:var(--radius);
  background:var(--surface);
}
.empty__text{ margin:0; max-width:62ch; color:var(--slate); line-height:1.7; }

/* ── CTA bandı ─────────────────────────────────────────────── */
.cta-band{ border-top:1px solid var(--line); }
.cta-band__inner{ display:grid; gap:var(--s3); max-width:70ch; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }

/* ── Footer ızgarası ───────────────────────────────────────── */
.footer__grid{ display:grid; gap:var(--s5); padding-bottom:var(--s6); }
@media (min-width:720px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .footer__grid{ grid-template-columns:1.5fr repeat(4,1fr); } }
.footer__brand{ display:grid; gap:var(--s3); justify-items:start; }
.footer__desc{ margin:0; max-width:34ch; color:var(--slate); font-size:.9375rem; line-height:1.65; }
.footer__col{ display:grid; gap:.6rem; align-content:start; }
.footer__head{ margin:0 0 .3rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--electric-soft); font-weight:500; }
.footer__col a{ font-size:.9375rem; color:var(--slate); text-decoration:none; transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--electric-soft); }
.footer__plain{ font-size:.9375rem; color:var(--slate-dim); }

/* ── Uzun metinli yasal sayfalar ───────────────────────────── */
.prose{ max-width:72ch; }
.prose h2{ margin:var(--s5) 0 var(--s2); font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem); font-weight:700; color:var(--paper); }
.prose h3{ margin:var(--s4) 0 var(--s2); font-size:1.0625rem; font-weight:700; color:var(--paper); }
.prose p, .prose li{ color:var(--slate); line-height:1.8; }
.prose p{ margin:0 0 var(--s2); }
.prose ul{ margin:0 0 var(--s3); padding-left:1.2rem; display:grid; gap:.5rem; }
.prose__meta{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-dim); }
.prose__note{ margin-top:var(--s5); padding:var(--s3); border:1px dashed var(--line-2); border-radius:12px; font-size:.875rem; color:var(--slate-dim); }

/* ── Yardımcılar ───────────────────────────────────────────── */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── İkili yerleşim (başlık + metin) ───────────────────────── */
.split{ display:grid; gap:var(--s4); }
@media (min-width:980px){ .split{ grid-template-columns:1fr 1.15fr; gap:var(--s6); align-items:start; } }
.split__body{ display:grid; gap:var(--s3); }

/* ── Panel / işaretli liste ────────────────────────────────── */
.panel__grid{
  display:grid; gap:var(--s3);
  grid-template-columns:1fr;
}
/* Kapsam/süreç/teslimat listeleri dört dar kolona bölündüğünde her satır
   birkaç kelimede kırılıyordu. En fazla iki kolon: her panel yaklaşık iki
   katı genişlik alıyor ve maddeler tek satırda okunuyor. */
@media (min-width:820px){
  .panel__grid{ grid-template-columns:repeat(2,1fr); }
  /* Tek sayıda panelde sonuncusu yalnız bir sütunda kalıyordu; satırın
     tamamını kaplayarak düzen dengede kalıyor. */
  .panel__grid > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
.panel{ padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.panel__head{ margin:0 0 var(--s3); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--electric-soft); font-weight:500; }
.panel__text{ margin:0; color:var(--slate); font-size:.9375rem; line-height:1.7; }
.ticklist{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ticklist li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9375rem; line-height:1.55; color:var(--slate); }
.ticklist--tight{ margin:0 0 var(--s3); }

/* ── SSS akordeonu ─────────────────────────────────────────── */
.faq{ display:grid; gap:.75rem; max-width:76ch; }
.faq__item{ border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.faq__q{
  list-style:none; cursor:pointer; padding:1.1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:1rem; font-weight:600; color:var(--paper);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:"+"; font-size:1.25rem; color:var(--electric-soft); line-height:1; }
.faq__item[open] .faq__q::after{ content:"–"; }
.faq__a{ padding:0 1.25rem 1.15rem; }
.faq__a p{ margin:0; color:var(--slate); line-height:1.75; font-size:.9375rem; }

/* ── Geniş hizmet kartı ────────────────────────────────────── */
.services__grid--wide{ grid-template-columns:repeat(auto-fit,minmax(min(320px, 100%), 1fr)); }
.scard--wide .scard__name{ font-size:1.375rem; }
.scard__for{ margin:0 0 var(--s3); font-size:.875rem; line-height:1.6; color:var(--slate-dim); }
.scard__for strong{ color:var(--electric-soft); font-weight:600; }

/* ── Sade iç sayfa hero ────────────────────────────────────── */
.page-hero--slim{ padding:calc(78px + var(--s5)) 0 var(--s5); }
.meta-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:var(--s3) 0 0; }
.meta-row span{ padding:.3rem .7rem; border:1px solid var(--line-2); border-radius:999px; font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }

.quote{ margin:0; max-width:70ch; padding:var(--s4); border-left:2px solid var(--electric); background:var(--surface-2); border-radius:0 var(--radius) var(--radius) 0; }
.quote p{ margin:0 0 var(--s2); font-family:var(--font-hero); font-size:clamp(1.1rem,1rem + .5vw,1.4rem); font-style:italic; color:var(--paper); line-height:1.5; }
.quote footer{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-dim); }

/* ── İletişim sayfası ──────────────────────────────────────── */
.contact__plain{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:0; padding:1.15rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-hero); font-size:clamp(1.05rem,.95rem + .45vw,1.3rem); font-weight:500; color:var(--paper);
}
.contact__plain span{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-dim); }
.contact__details .panel__head{ margin-bottom:var(--s2); }
.form__intro{ margin:0 0 var(--s3); font-size:.875rem; color:var(--slate-dim); }
.field--check{ display:flex; flex-direction:row; align-items:flex-start; gap:.7rem; margin-bottom:.5rem; }
.field--check input{ width:20px; height:20px; margin-top:.15rem; flex:none; accent-color:var(--electric); }
.field--check label{ font-family:var(--font-sans); font-size:.875rem; letter-spacing:normal; text-transform:none; color:var(--slate); line-height:1.6; }
.field--check label a{ color:var(--electric-soft); }
.field__err{ margin:.35rem 0 0; font-size:.8125rem; color:#ff8a8a; min-height:0; }
.field__err:empty{ display:none; }

/* Telefon + e-posta ikilisi: ikisinden biri yeterli olduğu için tek bir
   grup olarak etiketlenir ve hata da grup düzeyinde gösterilir. */
.field__set{ margin:0; padding:0; border:0; display:grid; gap:var(--s3); }
.field__set > legend{
  padding:0; margin-bottom:.5rem;
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate-dim);
}
.field__set.is-invalid > legend{ color:#ff8a8a; }
.field__hint{ margin:.4rem 0 0; font-size:.8125rem; color:var(--slate-dim); line-height:1.5; }
.field__set > .field__hint{ margin:0 0 .2rem; }
.field[hidden]{ display:none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{ border-color:#ff8a8a; }