/* ─────────────────────────────────────────────────────────────
   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:"Fraunces",Georgia,"Times New Roman",serif;
  --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;
  /* Arka plan katmani (.bg) z-index:-1 ile burada duruyor; body opak
     olursa onun ustune boyanip katmani tamamen orter. Taban rengi
     html uzerinde kaliyor, bu yuzden beyaz parlama da olmuyor. */
  background:transparent;
  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; }

/* Başlıkların düz kısmı Poppins 700 ile ifadeyi net söyler; yalnızca
   vurgulanan bölüm (em) Fraunces italiğine geçer. Böylece serif yüz
   dekorasyon değil, cümlenin vurgusunu taşıyan bir araç oluyor. */
.section__title{
  margin:0;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(2.1rem, 1.2rem + 3.9vw, 3.75rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--paper);
}
.section__title em{
  font-family:var(--font-hero);
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:500;
  letter-spacing:-.015em;
  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);
}

/* ── Kart derinliği ─────────────────────────────────────────
   Tıklanabilir kartlar imleç üzerine gelince hafifçe kalkar ve kenarlığı
   parlar. Dokunmatikte hover olmadığı için etkisiz kalır. */
@media (hover:hover) and (pointer:fine){
  .scard, .tier, .wcard{
    transition:transform .28s var(--ease), border-color .28s var(--ease),
               box-shadow .28s var(--ease);
  }
  .scard:hover, .tier:hover{
    transform:translateY(-3px);
    border-color:rgba(126,166,255,.38);
    box-shadow:0 22px 48px -30px rgba(4,12,26,.9);
  }
  /* Yorum kartları akan bir sütunda: kalkma yerine yalnızca kenarlık,
     yoksa akışla birleşince titriyor. */
  .wcard:hover{ border-color:rgba(126,166,255,.42); }
}

/* ── SSS akordeonu ──────────────────────────────────────────
   Yükseklik geçişi JS'te ölçülüyor; ok işareti burada döner. */
.faq__q::after{ transition:transform .28s var(--ease); }
/* İşaret "+" olduğu için 45° döndürülür: açıkken "×" okunur. */
.faq__item[open] .faq__q::after{ transform:rotate(45deg); }
.faq__q::after{ display:inline-block; }

/* ── Form gönderim durumları ────────────────────────────────
   Buton yalnızca metin değiştirmiyor: gönderirken dönen bir gösterge,
   başarıda onay işareti gösteriyor. Hatalı alan kısaca titriyor. */
.btn[data-submit][aria-busy="true"]{ pointer-events:none; opacity:.85; }
.btn[data-submit][aria-busy="true"]::before{
  content:""; width:1rem; height:1rem; flex:none;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn[data-submit].is-done{ background:#2f9e6a; }
.btn[data-submit].is-done::before{
  content:"✓"; width:auto; height:auto; border:0; animation:none;
  font-weight:700;
}
.field.is-invalid{ animation:shake .34s var(--ease); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  45%{ transform:translateX(4px); }
  70%{ transform:translateX(-2px); }
}
@media (prefers-reduced-motion:reduce){
  .field.is-invalid{ animation:none; }
  .btn[data-submit][aria-busy="true"]::before{ animation:none; }
}

/* ── Sitenin arka planı ─────────────────────────────────────
   Sabit bir sahne: perspektifle eğilmiş, sürekli ileri akan ızgara,
   imleci gecikmeyle izleyen yumuşak parıltı ve iki nefes alan küre.
   Tamamı içeriğin altında (z-index:-1) ve düşük opaklıkta durur;
   metin okunurluğuna dokunmaz.

   Performans: yalnızca transform ve opacity canlanır, hepsi derleyici
   katmanında. Izgara kutusu ekrandan büyük ve tek hücre kadar ötelenip
   başa sarıyor — sonsuz akış böyle kuruluyor, yeniden çizim yok. */
.bg{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
  background:var(--navy);
}
.bg__scene{
  position:absolute; inset:-20%;
  perspective:900px;
  transform-style:preserve-3d;
  /* Eğim imleçle değişir; JS --rx / --ry yazar. */
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.bg__grid{
  position:absolute; inset:-40%;
  --hucre:96px;
  background-image:
    linear-gradient(to right, rgba(126,166,255,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126,166,255,.075) 1px, transparent 1px);
  background-size:var(--hucre) var(--hucre);
  transform:translate3d(0, var(--kay, 0px), 0);
  will-change:transform;
}
/* İmleci gecikmeyle izleyen parıltı. Izgarayı maskelemek yerine ayrı bir
   ışık kullanılıyor: maske her karede yeniden çizim istiyordu. */
.bg__glow{
  position:absolute; top:0; left:0;
  width:760px; height:760px; margin:-380px 0 0 -380px;
  background:radial-gradient(circle,
    rgba(52,120,255,.13) 0%,
    rgba(52,120,255,.06) 38%,
    transparent 70%);
  transform:translate3d(var(--gx, 50vw), var(--gy, 40vh), 0);
  will-change:transform;
}
.bg__orb{
  position:absolute; width:70%; height:70%;
  border-radius:50%;
  filter:blur(150px);
  animation:orb 14s ease-in-out infinite;
}
.bg__orb--a{ top:-22%; left:-12%; background:rgba(0,56,148,.30); }
.bg__orb--b{ bottom:-22%; right:-12%; background:rgba(52,120,255,.14); animation-delay:-7s; }
@keyframes orb{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%    { opacity:.85; transform:scale(1.08); }
}
/* Bantlaşmayı kıran ince doku. */
.bg__noise{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
/* Kenarları koyultup metnin bulunduğu orta alanı sakinleştirir. */
.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(6,19,39,.72) 100%);
}

@media (prefers-reduced-motion:reduce){
  .bg__grid{ transform:none; }
  .bg__scene{ transform:none; transition:none; }
  .bg__glow{ display:none; }
  .bg__orb{ animation:none; opacity:.6; }
}

/* ── Sayfa geçişi ve ilerleme çubuğu ────────────────────────
   Geçiş CSS animasyonuyla yapılır; site.js çalışmasa bile sayfa açılır.
   Ayrılırken solma JS ile tetiklenir, JS yoksa normal sert geçiş olur. */
.js body{ animation:page-in .22s var(--ease) both; }
@keyframes page-in{ from{ opacity:0; } to{ opacity:1; } }
.js body.is-leaving{ opacity:0; transition:opacity .18s var(--ease); }

.progress{
  position:fixed; inset:0 auto auto 0; z-index:200;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--electric), var(--electric-soft));
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .js body{ animation:none; }
  .js body.is-leaving{ opacity:1; transition:none; }
}

/* ── Başlık: ortada yüzen hap ──────────────────────────────
   Menü artık tam genişlikte bir şerit değil, ortada duran bağımsız bir
   hap. Aşağı kaydırınca içindekiler ters sırayla sönüp hap küçük bir
   daireye toplanıyor; yukarı kaydırınca ya da daireye tıklayınca geri
   açılıyor. Eski davranış menüyü tamamen yukarı çekiyordu — daire
   kaldığı için menü artık her an erişilebilir.

   İki teknik kısıt var:
   1) Hap ÜZERİNDE transform/filter/backdrop-filter kullanılamaz; mobil
      menü position:fixed ve içeren kutusunun ekran olması gerekiyor.
      Bu yüzden ortalama transform yerine flex ile yapılıyor ve
      bulanıklık yalnızca masaüstünde açılıyor.
   2) overflow:hidden sürekli açık olamaz, "Hizmetler" açılır menüsünü
      keserdi. Yalnızca kapanma sırasında (.is-kirp) açılıyor. */

.site-header{
  position:fixed; top:clamp(.7rem, 1.5vh, 1.3rem); left:0; right:0; z-index:100;
  display:flex; justify-content:center;
  /* Hapın iki yanındaki boşluk tıklamayı yutmasın. */
  pointer-events:none;
  --yay:cubic-bezier(.22, 1.15, .36, 1);        /* açılış: hafif esneme */
  --yay-kapan:cubic-bezier(.33, .02, .2, 1);    /* kapanış: sakin, taşmasız */
}

.site-header__pill{
  pointer-events:auto;
  position:relative;
  display:flex; align-items:center;
  height:56px; padding-inline:1.1rem;
  width:var(--tam-en, auto);
  border:1px solid rgba(148,166,194,.20);
  border-radius:999px;
  background:rgba(7,18,37,.78);
  box-shadow:0 18px 44px -30px rgba(2,8,20,.95);
  /* Açılış ve kapanış aynı tempoda (.82 sn), aynı sakin eğri. */
  transition:width .82s var(--yay-kapan), padding-inline .5s var(--yay-kapan),
             border-color .3s var(--ease), background-color .3s var(--ease);
}

/* İçerik katmanının genişliği piksel olarak sabitleniyor (site.js yazar).
   Hap daralırken bu katman yeniden dizilmiyor, yalnızca kırpılıyor —
   yoksa her kare bağlantıları baştan yerleştiriyor ve hareket kasıyordu. */
.pill__ic{
  flex:none;
  display:flex; align-items:center; gap:var(--s3);
  width:var(--ic-en, auto);
}
.site-header.is-kirp .site-header__pill{ overflow:hidden; }
.site-header.is-kapali .site-header__pill{
  width:3.4rem; padding-inline:0; cursor:pointer;
  background:rgba(7,18,37,.9);
  /* Kapanış bilerek açılıştan yavaş. */
  transition:width .82s var(--yay-kapan), padding-inline .5s var(--yay-kapan),
             border-color .3s var(--ease), background-color .4s var(--ease);
}
.site-header.is-kapali .site-header__pill:hover{ border-color:rgba(126,166,255,.45); }

/* Kapalıyken görünen menü simgesi. */
.pill__peek{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--paper);
  opacity:0; visibility:hidden; transform:scale(.82);
  transition:opacity .2s var(--yay), transform .32s var(--yay), visibility 0s linear .2s;
}
.pill__peek svg{ width:22px; height:22px; }
.site-header.is-kapali .pill__peek{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s var(--yay) .46s, transform .42s var(--yay) .46s, visibility 0s;
}

.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; flex:none;
  transition:opacity .34s var(--yay-kapan) .2s, transform .5s var(--yay-kapan) .16s;
}
.brand__mark{ width:auto; height:32px; }
.site-header.is-kapali .brand{
  opacity:0; transform:translateX(-20px) rotate(-90deg);
  /* Logo en solda olduğu için ters sırada en son çıkar. */
  transition:opacity .34s var(--yay-kapan) .34s, transform .5s var(--yay-kapan) .3s;
}

/* Menü öğeleri sırayla girip ters sırayla çıkıyor. --i sıra numarası;
   visibility gizlenirken sönmeyi bekliyor, açılırken hemen dönüyor —
   böylece kapalıyken öğeler sekme sırasında da kalmıyor. */
.nav{ display:flex; align-items:center; gap:var(--s4); }
.nav > *{ --i:0; --gec:.26s; }
.nav > *:nth-child(1){ --i:0; } .nav > *:nth-child(2){ --i:1; }
.nav > *:nth-child(3){ --i:2; } .nav > *:nth-child(4){ --i:3; }
.nav > *:nth-child(5){ --i:4; } .nav > *:nth-child(6){ --i:5; }
.nav > *:nth-child(7){ --i:6; } .nav > *:nth-child(8){ --i:7; }
.nav > *{
  transition:opacity .34s var(--yay-kapan) calc(var(--i) * 52ms + 220ms),
             transform .46s var(--yay-kapan) calc(var(--i) * 52ms + 220ms),
             visibility 0s;
}
.site-header.is-kapali .nav > *{
  opacity:0; visibility:hidden; transform:translateX(-16px) scale(.95);
  transition:opacity .34s var(--yay-kapan) calc((7 - var(--i)) * 52ms),
             transform .46s var(--yay-kapan) calc((7 - var(--i)) * 52ms),
             visibility 0s linear calc(.34s + (7 - var(--i)) * 52ms);
}

.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:.62rem 1.15rem; font-size:.875rem; }

/* Ölçüm sırasında hiçbir şey canlanmasın: hapın açık genişliği
   ölçülürken geçişler kapatılıyor (assets/site.js). */
.site-header.is-olcum,
.site-header.is-olcum *{ transition:none !important; }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--paper); flex:none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block; width:24px; 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:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-8px) rotate(-45deg); }

/* Bulanıklık yalnızca masaüstünde: mobilde hapın içinde position:fixed
   bir menü var, backdrop-filter onun içeren kutusunu haptan yapardı. */
/* 1080 pikselin altında hamburger menüye geçiliyor: masaüstü menüsü
   açıkken hap ~964 piksel ve daha dar ekranlara sığmıyordu. Hemen
   üstündeki genişliklerde de aralıklar biraz kısılıyor. */
@media (min-width:1081px) and (max-width:1300px){
  .nav{ gap:1.35rem; }
  .nav__link{ font-size:.875rem; }
  .site-header__pill{ padding-inline:.9rem; }
}

/* Bulanıklık yalnızca hap tam açık ve hareketsizken. Genişlik canlanırken
   arka plan bulanıklığı her karede ~1000 piksel genişliğinde yeniden
   hesaplanıyor ve hareket gözle görülür biçimde kasıyordu. */
@media (min-width:1081px){
  .site-header:not(.is-kirp) .site-header__pill{
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
}

@media (max-width:1080px){
  .nav-toggle{ display:block; }
  .site-header__pill{ padding-inline:.9rem; height:52px; }
  .pill__ic{ gap:var(--s2); }
  .brand__mark{ height:28px; }
  /* Mobil menü tam ekran açılır. Hapın içinde ama position:fixed
     olduğu için hapın kırpmasından ve genişlik animasyonundan
     etkilenmez. */
  .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:clamp(.7rem, 2.1vh, 1.5rem);
    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; }
  /* Menü açıkken öğeler kademeli çıkış kuralına takılmasın. */
  .nav[data-open="true"] > *{ opacity:1; visibility:visible; transform:none; transition: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 .btn{ margin-top:var(--s2); padding:1rem 1.6rem; font-size:1rem; }
}

/* Hareket azaltma tercihinde hap hiç toplanmaz (assets/site.js) ve
   hiçbir geçiş çalışmaz. */
@media (prefers-reduced-motion:reduce){
  .site-header__pill,
  .site-header .brand,
  .site-header .nav > *,
  .pill__peek{ transition:none; }
}

/* ── Hero ─────────────────────────────────────────────────
   İki sütun: solda metin ve eylemler (%52), sağda "Kampanya Kontrol
   Merkezi" (%48). Eski tam ekran video kaldırıldı; yerine gelen panel
   bir görsel değil, tamamen HTML ve CSS ile kurulu. Video, canvas ve
   resim kullanılmıyor.

   Döngü tek bir 9 saniyelik zaman çizelgesine bağlı: her parça aynı
   süreyi paylaştığı için adımlar birbirine kilitli kalıyor ve senaryo
   hep aynı sırayla akıyor. Yalnızca transform ve opacity canlanıyor;
   düzen ve boya yeniden hesaplanmıyor. */

.hero{
  position:relative;
  display:flex; align-items:center;
  min-height:100svh;
  padding-block:calc(78px + clamp(1.75rem, 5vh, 3.25rem)) clamp(2.5rem, 7vh, 4.5rem);
}
@supports not (min-height:100svh){ .hero{ min-height:100vh; } }

.hero__grid{
  display:grid; align-items:center; width:100%;
  gap:clamp(2.25rem, 5vw, 4rem);
}
/* Masaüstünde metin solda, panel sağda: bilgisayar ekranı oranında yatay
   bir dikdörtgen. Panel sağdaki kenar boşluğuna doğru taşıyor — hem metinle
   arasına nefes giriyor hem de açılı panel sayfadan çıkıyormuş gibi
   duruyor. Taşma kenar boşluğunun içinde kaldığı için sayfa yatay
   kaymıyor. Butonlar bu genişlikte yan yana sığsın diye bir tık küçük. */
@media (min-width:1024px){
  /* Metin sütununa taban: butonlar her genişlikte yan yana sığsın. */
  .hero__grid{ grid-template-columns:minmax(410px, 1fr) 1.5fr; gap:clamp(3rem, 5.5vw, 5.5rem); }
  .hero__panel{ margin-right:calc(-1 * var(--gutter) + 1.25rem); }
  .hero__actions{ gap:.75rem .75rem; }
  .hero__actions .btn--lg{ padding:.95rem 1.25rem; font-size:.9375rem; }
  /* Başlık puntosu metin sütununun enine bağlı: en uzun dönen sözcük
     ("optimize ediyoruz.") ~9 em; 10.8cqw ile her genişlikte tek satıra
     sığıyor. Ekran enine bağlı punto sütun daralınca taşıyordu. */
  .hero__copy{ container-type:inline-size; }
  .hero__title{ font-size:clamp(2.05rem, 10.8cqw, 3.15rem); }
}

.hero__copy{
  display:grid; justify-items:start;
  gap:clamp(1.15rem, 2.7vh, 1.9rem);
}

.hero__title{
  margin:0;
  font-family:var(--font-sans);
  /* Başlık artık yarım sütuna sığıyor: ölçek tam ekran sürümüne göre
     küçültüldü, yoksa iki sütun dar ekranlarda kırılıyordu. */
  font-size:clamp(2.05rem, 2.2vw + 1rem, 3.15rem);
  font-weight:700;
  /* 1.08 iki sutunlu duzende fazla sikti: donen sozcugun kayma bandi
     ust satirin uzerine tasiyordu. */
  line-height:1.16;
  letter-spacing:-.032em;
  color:#f2f6fc;
  text-wrap:balance;
}
.hero__line{ display:block; }
/* İlk satır ne yapıldığını düz ve net söyler; ikinci satırdaki fiil
   Fraunces italiğiyle vurgulanır — değişen parça bu olduğu için. */
.hero__line--b{
  font-family:var(--font-hero); font-optical-sizing:auto;
  font-style:italic; font-weight:500; letter-spacing:-.015em;
  color:var(--electric-soft);
}

/* ── Açılış sekansı ────────────────────────────────────────
   Sayfa açılınca hero tek bir düzenli sırayla gelir: rozet, başlık,
   paragraf ve butonlar ~110 ms arayla yukarı süzülür; panel biraz
   geriden yükselip 3D açısına oturur; menü yalnızca belirir. Hepsi
   transform ve opacity, bir kez çalışır. JavaScript yoksa (.js sınıfı
   yoksa) hiçbir şey gizlenmez. */
@keyframes giris-yukari{
  from{ opacity:0; transform:translate3d(0,22px,0); }
  to  { opacity:1; transform:none; }
}
@keyframes giris-panel{
  from{ opacity:0; transform:translate3d(0,44px,0) scale(.97); }
  to  { opacity:1; transform:none; }
}
@keyframes giris-belir{ from{ opacity:0; } to{ opacity:1; } }
/* Menü yukarıdan iner. transform DEĞİL, top canlanıyor: animasyon bitince
   transform birim matris olarak kalıyor ve içindeki sabit konumlu mobil
   menü başlık şeridine göre yerleşiyordu (13 px aşağı kayıyordu). */
@keyframes giris-bas{
  from{ opacity:0; top:-60px; }
  to  { opacity:1; top:clamp(.7rem, 1.5vh, 1.3rem); }
}

.js .hero__copy > *{ animation:giris-yukari .8s var(--ease) both; }
.js .hero__copy > :nth-child(1){ animation-delay:.05s; }
.js .hero__copy > :nth-child(2){ animation-delay:.16s; }
.js .hero__copy > :nth-child(3){ animation-delay:.30s; }
.js .hero__copy > :nth-child(4){ animation-delay:.42s; }
.js .hero__panel{ animation:giris-panel 1.1s cubic-bezier(.16,1,.3,1) .28s both; }
.js .site-header{ animation:giris-bas .75s var(--yay) both; }

@media (prefers-reduced-motion:reduce){
  .js .hero__copy > *, .js .hero__panel, .js .site-header{ animation:none; }
}

/* ── Temsilî reklam yönetimi panelleri ─────────────────────
   Aynı sabit çerçevede iki ayrı arayüz: Meta Reklam Yöneticisi ve
   Google Ads. İkisi de çerçevenin içinde mutlak konumlu; platform
   değişince yalnızca opaklık ve 8 piksellik yatay kayma canlanıyor.
   Çerçevenin eni, boyu, köşesi, gölgesi ve kenarlığı hiç değişmiyor,
   dolayısıyla geçişte ne hero ne sayfa zıplıyor.

   Sütun gizleme ekranın değil PANELİN enine göre yapılıyor
   (container query): panel hero'nun sağ sütununda ~490 piksel ve
   14 sütunlu bir tablo oraya sığmaz. Öncelik sınıfları p1..p4; p1 her
   genişlikte kalıyor, p4 ilk gizleniyor. */

.hero__panel{ position:relative; min-width:0; }

.rp{ display:grid; gap:.7rem; justify-items:start; }
.rp[data-platform="meta"]  { --plat:#0866ff; }
.rp[data-platform="google"]{ --plat:#1a73e8; }

/* Platform seçici: iki eşit dilimli kontrol, hero'nun lacivertinde
   net okunacak kadar açık. Büyük hap değil. */
.rp__sec{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  width:min(100%, 400px); height:44px; padding:3px;
  border:1px solid rgba(148,166,194,.24); border-radius:10px;
  background:rgba(8,20,40,.62);
}
.rp__d{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-width:0; padding:0 .6rem;
  border:1px solid transparent; border-radius:7px; background:none;
  color:#b7c4d8; font:600 .8125rem/1 var(--font-sans); letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.rp__d img{ width:18px; height:auto; flex:none; }
.rp__d[data-plat="google"] img{ width:15px; }
.rp__d:hover{ color:var(--paper); }
.rp__d.is-aktif{
  background:#fff; color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--plat, #0866ff);
}
.rp__d:focus-visible{ outline:2px solid var(--electric-soft); outline-offset:2px; }

/* Dış çerçeve: tek gölge, ince kenarlık, sabit yükseklik. */
.rp__cerceve{
  position:relative; width:100%;
  height:500px;
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(8,17,31,.16);
  background:#f5f6f7;
  box-shadow:0 30px 66px -42px rgba(2,8,20,.95);
  color:var(--ink);
  font-family:var(--font-sans); font-size:11px; line-height:1.35;
}
@media (min-width:600px){  .rp__cerceve{ height:540px; } }
/* Masaüstünde yatay dikdörtgen: gerçek bir masaüstü paneli oranı. */
@media (min-width:1024px){ .rp__cerceve{ height:440px; } }
@media (min-width:1600px){ .rp__cerceve{ height:470px; } }

/* Hafif 3D: sol kenar okuyucuya dönük, sağ kenar geriye. Yalnızca
   transform olduğu için yerleşim değişmiyor; imleçle üstüne gelince
   düzleşiyor. Gölge, açının düştüğü yöne (sağ-alt) atılıyor. */
@media (min-width:1024px){
  .hero__panel{ perspective:1500px; }
  .rp__cerceve{
    transform-origin:left center;
    transform:rotateY(12deg) rotateX(2deg);
    box-shadow:34px 40px 76px -34px rgba(2,8,20,.94), 0 0 0 1px rgba(255,255,255,.06);
    transition:transform .7s var(--ease), box-shadow .7s var(--ease);
  }
  /* Üstüne gelince tamamen düzleşmiyor; açı azalıyor ama 3D hissi kalıyor. */
  .hero__panel:hover .rp__cerceve{
    transform:rotateY(4deg) rotateX(1deg);
    box-shadow:16px 36px 72px -36px rgba(2,8,20,.95), 0 0 0 1px rgba(255,255,255,.06);
  }
}
@media (prefers-reduced-motion:reduce){
  .rp__cerceve{ transition:none; }
}

.rp__alan{ position:relative; flex:1; min-height:0; container-type:inline-size; }
.rp__not{
  flex:none; height:34px; margin:0; padding:0 .8rem;
  display:flex; align-items:center;
  border-top:1px solid rgba(8,17,31,.10); background:#fff;
  font-size:10px; line-height:1.25; color:var(--ink-soft); overflow:hidden;
}

/* Paneller: ikisi de aynı alanda mutlak; pasif olan görünmez ve
   tıklanamaz. Meta soldan, Google sağdan girip aynı yöne çıkıyor. */
.pnl{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s ease-out, transform .26s ease-out, visibility 0s linear .26s;
}
.pnl--meta  { transform:translate3d(-8px,0,0); }
.pnl--google{ transform:translate3d(8px,0,0); }
.rp[data-platform="meta"]   .pnl--meta,
.rp[data-platform="google"] .pnl--google{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .26s ease-out, transform .26s ease-out, visibility 0s;
}

/* Ortak parçalar */
.pnl .ik{ width:15px; height:15px; flex:none; color:#5f6f85; }
.pnl .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.onay{
  display:inline-block; width:12px; height:12px;
  border:1.5px solid #8a96a8; border-radius:2px; background:#fff;
  position:relative; vertical-align:middle;
}
.onay::after{
  content:""; position:absolute; left:3px; top:0px; width:3.5px; height:7px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(45deg);
  opacity:0;
}
.onay.is-secili, .mv-onay.is-secili{ background:var(--plat); border-color:var(--plat); }
.onay.is-secili::after{ opacity:1; }
.nokta{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.35rem; vertical-align:middle; }
.nokta--yesil{ background:#1f9d55; }
.nokta--gri{ background:#9aa5b5; }
.pnl table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.pnl th, .pnl td{ padding:.38rem .42rem; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Sabit düzende genişlikler başlık satırından okunur: seçim/anahtar/nokta
   dar, sayılar eşit, kampanya adı kalanı alır. */
.pnl th.t-sec, .pnl th.t-nokta{ width:26px; }
.pnl th.t-anah{ width:38px; }
.pnl th.t-sayi{ width:11%; }
.pnl th.t-durum, .pnl th.t-metin{ width:11%; }
.th-k{ display:none; }
.pnl th{ font-size:10px; font-weight:600; color:#5f6f85; letter-spacing:.01em; }
.pnl th.is-sag, .pnl td.is-sag{ text-align:right; font-variant-numeric:tabular-nums; }
.pnl th.is-bos{ padding-inline:.3rem; }
.pnl tfoot td{ font-weight:600; border-top:1px solid #dfe3e8; background:#fafbfc; }

/* Sayaç gibi ilerleyen değer: yalnızca transform canlanıyor. */
.rulo{ display:inline-block; height:1.35em; overflow:hidden; vertical-align:bottom; }
.rulo i{ display:block; height:1.35em; font-style:normal; }

/* İmleç: kapsayıcıyı kaplayan bir katmanın içinde; katman yüzdeyle
   ötelendiği için hareket panel enine göre ölçekleniyor. */
.pnl__imlec{ position:absolute; inset:0; pointer-events:none; opacity:0; z-index:5; }
.pnl__imlec svg{ position:absolute; left:0; top:0; width:14px; height:14px; color:#0b1b33; filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)); }

/* Sütun öncelikleri */
@container (max-width:959px){ .pnl .p4{ display:none !important; } }
@container (max-width:759px){
  .pnl .p3{ display:none !important; }
  .th-u{ display:none; } .th-k{ display:inline; }
  .pnl th.t-sayi{ width:12.5%; }
  .pnl th.t-genis{ width:19%; }
  .pnl th.t-durum{ width:12%; }
  .pnl th.t-metin{ width:14.5%; }
  .pnl th, .pnl td{ padding:.36rem .32rem; }
}
@container (max-width:559px){
  .pnl .p2{ display:none !important; }
  .pnl th, .pnl td{ padding:.36rem .3rem; }
  .pnl th.t-sayi{ width:19%; }
  .pnl tbody td, .pnl tfoot td{ font-size:10.5px; }
  .mbar__hesap, .mbar__tarih, .gbar__hesap, .gbar__tarih{ display:none; }
  .mkenar{ width:40px; }
  .mkenar__d{ width:32px; }
}
@container (max-width:420px){
  .gkenar{ width:38px; }
  .mkenar{ width:36px; }
  .mkenar__d{ width:30px; }
  /* Sayı hücreleri kesilmesin: para değerinin kırpılması yanıltır. */
  .pnl th.t-sayi{ width:22%; }
  .pnl th, .pnl td{ padding:.34rem .25rem; }
  .pnl tbody td, .pnl tfoot td{ font-size:10px; }
}

/* ═══ META ═══════════════════════════════════════════════ */
.pnl--meta{ background:#f5f6f7; color:#1c2b33; }
.mbar{
  flex:none; height:44px; display:flex; align-items:center; gap:.55rem;
  padding:0 .7rem; background:#fff; border-bottom:1px solid #dfe3e8;
}
.mbar__marka{ flex:none; display:inline-flex; align-items:center; gap:.45rem; font-size:12.5px; font-weight:700; white-space:nowrap; }
.mbar__marka img{ width:22px; height:auto; }
.mbar__hesap{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#5f6f85; font-size:11px; padding-left:.5rem; border-left:1px solid #dfe3e8; }
.mbar__sag{ margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; flex:none; }
.mbar__tarih{ font-size:10.5px; color:#5f6f85; padding:.2rem .45rem; border:1px solid #dfe3e8; border-radius:4px; white-space:nowrap; }
.mbar__avatar{ width:22px; height:22px; border-radius:50%; background:#0866ff; color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; }

.mgovde{ flex:1; min-height:0; display:flex; }
.mkenar{
  flex:none; width:46px; display:flex; flex-direction:column; gap:3px;
  padding:.45rem .35rem; background:#fff; border-right:1px solid #dfe3e8;
}
.mkenar__d{
  position:relative; display:grid; place-items:center;
  width:36px; height:32px; border:0; border-radius:6px; background:none;
  color:#5f6f85; cursor:default;
}
.mkenar__d svg{ width:17px; height:17px; }
.mkenar__d.is-aktif{ background:#e7f0ff; color:#0866ff; }
.mkenar__ipucu{
  position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  padding:.22rem .45rem; border-radius:4px; background:#1c2b33; color:#fff;
  font-size:10px; white-space:nowrap; opacity:0; pointer-events:none; z-index:6;
  transition:opacity .15s var(--ease);
}
.mkenar__d:hover .mkenar__ipucu{ opacity:1; }

.micerik{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.45rem; padding:.5rem .6rem .55rem; }
.msek{ display:flex; gap:.1rem; border-bottom:1px solid #dfe3e8; }
.msek__d{
  padding:.38rem .6rem .45rem; border:0; background:none; margin-bottom:-1px;
  font:500 12px/1 var(--font-sans); color:#5f6f85; cursor:default;
  border-bottom:2px solid transparent;
}
.msek__d.is-aktif, .msek__d.is-vurgu{ color:#1c2b33; font-weight:600; border-bottom-color:#0866ff; }

.marac{ display:flex; align-items:center; gap:.3rem; overflow:hidden; }
.marac__d{
  flex:none; height:28px; padding:0 .55rem; border:1px solid #cfd6df; border-radius:5px;
  background:#fff; color:#1c2b33; font:500 11px/1 var(--font-sans); cursor:default; white-space:nowrap;
}
.marac__d--olustur{ background:#2e8b57; border-color:#2e8b57; color:#fff; font-weight:600; }
.marac__d.is-vurgu{ border-color:#0866ff; color:#0866ff; background:#eef4ff; }
.marac__ara{ flex:1; }

.mfil{ display:flex; align-items:center; gap:.3rem; overflow:hidden; }
.mfil__ara{
  flex:1; min-width:0; display:inline-flex; align-items:center; gap:.35rem;
  height:28px; padding:0 .5rem; border:1px solid #cfd6df; border-radius:5px; background:#fff;
  color:#7a8799; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mfil__ara svg{ width:13px; height:13px; flex:none; }
.mfil__d{ flex:none; height:28px; padding:0 .5rem; border:1px solid #cfd6df; border-radius:5px; background:#fff; font:500 10.5px/1 var(--font-sans); color:#1c2b33; cursor:default; white-space:nowrap; }
.mfil__temiz{ flex:none; font-size:10.5px; color:#0866ff; white-space:nowrap; }

.mtab__kutu{ flex:1; min-height:0; overflow:hidden; background:#fff; border:1px solid #dfe3e8; border-radius:3px; }
.mtab thead th{ background:#f5f6f7; border-bottom:1px solid #dfe3e8; }
.mtab tbody td{ border-bottom:1px solid #edf0f3; font-size:11px; }
.mtab tbody tr:hover{ background-color:#f3f7ff; }
.mtab tbody tr.is-vurgu td{ background:#eaf2ff; }
.mtab__ad{ font-weight:500; color:#1c2b33; }
.anah{ display:inline-block; width:26px; height:14px; border-radius:999px; background:#c3cad4; position:relative; vertical-align:middle; }
.anah::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); }
.anah.is-acik{ background:#0866ff; }
.anah.is-acik::after{ transform:translateX(12px); }

/* ═══ GOOGLE ADS ═════════════════════════════════════════ */
.pnl--google{ background:#fff; color:#202124; }
.gbar{
  flex:none; height:46px; display:flex; align-items:center; gap:.55rem;
  padding:0 .7rem; background:#fff; border-bottom:1px solid #dadce0;
}
.gbar__marka{ flex:none; display:inline-flex; align-items:center; gap:.45rem; font-size:13px; font-weight:600; white-space:nowrap; }
.gbar__marka img{ width:18px; height:18px; }
.gbar__hesap{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#3c4043; padding-left:.5rem; border-left:1px solid #dadce0; }
.gbar__hesap i{ font-style:normal; color:#5f6368; font-size:10px; margin-left:.3rem; }
.gbar__ara{ display:inline-flex; align-items:center; gap:.35rem; height:28px; padding:0 .55rem; border-radius:14px; background:#f1f3f4; color:#5f6368; font-size:11px; white-space:nowrap; }
.gbar__ara svg{ width:13px; height:13px; }
.gbar__sag{ margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; flex:none; }
.gbar__tarih{ font-size:10.5px; color:#3c4043; padding:.2rem .45rem; border:1px solid #dadce0; border-radius:4px; white-space:nowrap; }
.gbar__avatar{ width:22px; height:22px; border-radius:50%; background:#1a73e8; color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; }

.ggovde{ flex:1; min-height:0; display:flex; }
.gkenar{
  flex:none; width:158px; display:flex; flex-direction:column; gap:2px;
  padding:.45rem .35rem; background:#f8f9fa; border-right:1px solid #dadce0;
}
.gkenar__d{
  display:flex; align-items:center; gap:.5rem;
  height:30px; padding:0 .55rem; border:0; border-radius:0 15px 15px 0; background:none;
  color:#3c4043; font:500 11px/1 var(--font-sans); cursor:default; text-align:left; white-space:nowrap;
}
.gkenar__d svg{ width:15px; height:15px; flex:none; color:#5f6368; }
.gkenar__d.is-aktif{ background:#e8f0fe; color:#174ea6; font-weight:600; }
.gkenar__d.is-aktif svg{ color:#1a73e8; }
.gkenar__ad{ overflow:hidden; text-overflow:ellipsis; }
@container (max-width:640px){
  .gkenar{ width:44px; padding-inline:.25rem; }
  .gkenar__d{ justify-content:center; padding:0; border-radius:6px; }
  .gkenar__ad{ display:none; }
}

.gicerik{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.4rem; padding:.5rem .6rem .55rem; }
.gbas{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.gbas__baslik{ margin:0; font-size:14px; font-weight:500; color:#202124; letter-spacing:-.01em; }
.gbas__kont{ display:inline-flex; gap:.3rem; }
.gbas__d{ height:26px; display:inline-flex; align-items:center; padding:0 .5rem; border:1px solid #dadce0; border-radius:4px; font-size:10.5px; color:#3c4043; white-space:nowrap; }

.garac{ display:flex; align-items:center; gap:.3rem; overflow:hidden; }
.garac__yeni{ flex:none; height:28px; padding:0 .6rem; border:0; border-radius:14px; background:#1a73e8; color:#fff; font:600 11px/1 var(--font-sans); cursor:default; white-space:nowrap; }
.garac__d{ flex:none; height:28px; padding:0 .5rem; border:1px solid #dadce0; border-radius:4px; background:#fff; color:#3c4043; font:500 11px/1 var(--font-sans); cursor:default; white-space:nowrap; }
.garac__d.is-vurgu{ border-color:#1a73e8; color:#1a73e8; background:#e8f0fe; }
.garac__ara{ flex:1; }

.gkpi{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #dadce0; border-radius:4px; overflow:hidden; }
.gkpi__b{ display:grid; gap:.1rem; padding:.38rem .55rem; border-left:1px solid #dadce0; border-top:3px solid transparent; }
.gkpi__b:first-child{ border-left:0; }
.gkpi__b i{ font-style:normal; font-size:10px; color:#5f6368; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gkpi__b b{ font-size:14px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gkpi__b--mavi{ border-top-color:#1a73e8; }
.gkpi__b--acik{ border-top-color:#8ab4f8; }
.gkpi__b--gri{ border-top-color:#9aa0a6; }
.gkpi__b--yesil{ border-top-color:#34a853; }
@container (max-width:559px){ .gkpi{ grid-template-columns:repeat(3,1fr); } }

.ggrafik{ flex:none; height:60px; }
.ggrafik svg{ display:block; width:100%; height:100%; }
.ggrafik .gag{ fill:none; stroke:#e8eaed; stroke-width:1; }
.ggrafik .gcz{ fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.ggrafik .gcz--alt{ stroke:#1a73e8; }
.ggrafik .gcz--ust{ stroke:#1a73e8; opacity:0; }
.ggrafik .gcz--don{ stroke:#34a853; }

.gtab__kutu{ flex:1; min-height:0; overflow:hidden; border:1px solid #dadce0; border-radius:4px; }
.gtab thead th{ background:#f8f9fa; border-bottom:1px solid #dadce0; }
.gtab tbody td{ border-bottom:1px solid #eceff1; font-size:11px; }
.gtab tbody tr:hover{ background-color:#f5f8ff; }
.gtab tbody tr.is-vurgu td{ background:#e8f0fe; }
.gtab__ad{ color:#1a73e8; font-weight:500; }

/* ═══ DEMO HAREKETLERİ ═══════════════════════════════════
   Yalnızca etkin panelin animasyonu var; platform değişince diğerinin
   animasyonu tümüyle kalkıyor, geri gelince baştan başlıyor. Panel
   ekran dışındayken .is-duraklat ile durduruluyor (home.js). */
.rp{ --sure:9s; }
.rp.is-duraklat *{ animation-play-state:paused !important; }

@keyframes rulo-4{
  0%,24%   { transform:translateY(0); }
  28%      { transform:translateY(-1.35em); }
  32%      { transform:translateY(-2.7em); }
  36%,84%  { transform:translateY(-4.05em); }
  92%,100% { transform:translateY(0); }
}
@keyframes rulo-4-gec{
  0%,52%   { transform:translateY(0); }
  56%      { transform:translateY(-1.35em); }
  60%      { transform:translateY(-2.7em); }
  64%,84%  { transform:translateY(-4.05em); }
  92%,100% { transform:translateY(0); }
}
@keyframes vurgu-satir{
  0%,12%   { background-color:transparent; }
  16%,56%  { background-color:var(--vurgu-renk); }
  62%,100% { background-color:transparent; }
}
@keyframes vurgu-secili{
  0%,16%   { opacity:0; }
  20%,56%  { opacity:1; }
  62%,100% { opacity:0; }
}
@keyframes vurgu-orta{
  0%,18%   { opacity:0; }
  22%,56%  { opacity:1; }
  62%,100% { opacity:0; }
}
@keyframes vurgu-gec{
  0%,66%   { opacity:0; }
  70%,82%  { opacity:1; }
  88%,100% { opacity:0; }
}
@keyframes cizgi-alt{ 0%,30%{opacity:1} 44%,84%{opacity:0} 92%,100%{opacity:1} }
@keyframes cizgi-ust{ 0%,30%{opacity:0} 44%,84%{opacity:1} 92%,100%{opacity:0} }

/* — Meta senaryosu — */
/* Hedef noktalar (--h1, --h2) ve başlangıç (--b) piksel olarak
   home.js tarafından ölçülüp yazılıyor; böylece imleç her genişlikte
   gerçekten satırın ve düğmenin üstüne iniyor. */
@keyframes imlec-meta{
  0%,4%    { opacity:0; transform:translate3d(var(--bx,40px),var(--by,260px),0); }
  8%       { opacity:1; transform:translate3d(var(--bx,40px),var(--by,260px),0); }
  14%,54%  { opacity:1; transform:translate3d(var(--h1x,60px),var(--h1y,200px),0); }
  62%,80%  { opacity:1; transform:translate3d(var(--h2x,180px),var(--h2y,70px),0); }
  86%,100% { opacity:0; transform:translate3d(var(--h2x,180px),var(--h2y,70px),0); }
}
.rp[data-platform="meta"] .pnl__imlec--meta{ animation:imlec-meta var(--sure) ease-in-out infinite; }
/* Vurgu satırın kendisinde: hücre hücre uygulanınca kapsayıcı sorgusuyla
   sonradan görünür olan sütunlar animasyona geç başlıyor ve satır
   parça parça yanıyordu. */
.rp[data-platform="meta"] .mv-satir{ --vurgu-renk:#eaf2ff; animation:vurgu-satir var(--sure) linear infinite; }
.rp[data-platform="meta"] .mv-onay{ background:#0866ff; border-color:#0866ff; }
.rp[data-platform="meta"] .mv-onay,
.rp[data-platform="meta"] .mv-onay::after{ animation:vurgu-secili var(--sure) linear infinite; }
.rp[data-platform="meta"] .mv-onay{ animation-name:onay-kutu; }
@keyframes onay-kutu{
  0%,16%   { background-color:#fff; border-color:#8a96a8; }
  20%,56%  { background-color:#0866ff; border-color:#0866ff; }
  62%,100% { background-color:#fff; border-color:#8a96a8; }
}
.rp[data-platform="meta"] .mv-duzenle{ animation:duzenle-vurgu var(--sure) linear infinite; }
@keyframes duzenle-vurgu{
  0%,18%   { border-color:#cfd6df; color:#1c2b33; background:#fff; }
  22%,56%  { border-color:#0866ff; color:#0866ff; background:#eef4ff; }
  62%,100% { border-color:#cfd6df; color:#1c2b33; background:#fff; }
}
.rp[data-platform="meta"] .rulo--roas i    { animation:rulo-4 var(--sure) var(--ease) infinite; }
.rp[data-platform="meta"] .rulo--harcama i { animation:rulo-4 var(--sure) var(--ease) infinite; animation-delay:.35s; }
.rp[data-platform="meta"] .mv-sekme{ animation:sekme-vurgu var(--sure) linear infinite; }
@keyframes sekme-vurgu{
  0%,66%   { color:#5f6f85; font-weight:500; border-bottom-color:transparent; }
  70%,82%  { color:#1c2b33; font-weight:600; border-bottom-color:#0866ff; }
  88%,100% { color:#5f6f85; font-weight:500; border-bottom-color:transparent; }
}

/* — Google senaryosu — */
@keyframes imlec-google{
  0%,4%    { opacity:0; transform:translate3d(var(--bx,80px),var(--by,400px),0); }
  8%       { opacity:1; transform:translate3d(var(--bx,80px),var(--by,400px),0); }
  14%,42%  { opacity:1; transform:translate3d(var(--h1x,60px),var(--h1y,330px),0); }
  50%,62%  { opacity:1; transform:translate3d(var(--h2x,260px),var(--h2y,100px),0); }
  70%,100% { opacity:0; transform:translate3d(var(--h2x,260px),var(--h2y,100px),0); }
}
.rp[data-platform="google"] .pnl__imlec--google{ animation:imlec-google var(--sure) ease-in-out infinite; }
.rp[data-platform="google"] .gv-satir{ --vurgu-renk:#e8f0fe; animation:vurgu-satir var(--sure) linear infinite; }
.rp[data-platform="google"] .gv-onay{ animation:onay-kutu-g var(--sure) linear infinite; }
.rp[data-platform="google"] .gv-onay::after{ animation:vurgu-secili var(--sure) linear infinite; }
@keyframes onay-kutu-g{
  0%,16%   { background-color:#fff; border-color:#8a96a8; }
  20%,56%  { background-color:#1a73e8; border-color:#1a73e8; }
  62%,100% { background-color:#fff; border-color:#8a96a8; }
}
.rp[data-platform="google"] .rulo--tik i{ animation:rulo-4 var(--sure) var(--ease) infinite; }
.rp[data-platform="google"] .gcz--alt{ animation:cizgi-alt var(--sure) var(--ease) infinite; }
.rp[data-platform="google"] .gcz--ust{ animation:cizgi-ust var(--sure) var(--ease) infinite; }
.rp[data-platform="google"] .gv-sutun{ animation:sutun-vurgu var(--sure) linear infinite; }
@keyframes sutun-vurgu{
  0%,50%   { border-color:#dadce0; color:#3c4043; background:#fff; }
  54%,64%  { border-color:#1a73e8; color:#1a73e8; background:#e8f0fe; }
  70%,100% { border-color:#dadce0; color:#3c4043; background:#fff; }
}
.rp[data-platform="google"] .rulo--ddm i{ animation:rulo-4-gec var(--sure) var(--ease) infinite; }

/* Hareket azaltma: hiçbir demo canlanmaz, geçiş yalnızca opaklık. */
@media (prefers-reduced-motion:reduce){
  .rp *, .rp *::after{ animation:none !important; }
  .pnl{ transform:none; transition:opacity .2s ease-out, visibility 0s linear .2s; }
  .rp[data-platform="meta"] .pnl--meta,
  .rp[data-platform="google"] .pnl--google{ transition:opacity .2s ease-out, visibility 0s; }
  .pnl__imlec{ display: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;
  /* Ölçüt (en uzun sözcük) iki satıra kırılırsa kutu çift boy oluyor ve
     görünen sözcük ortada asılı kalıyordu. Kırılmaz; punto sütuna göre
     ayarlanıyor (aşağıda). */
  white-space:nowrap;
  /* 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. */
  /* Çıkıntılı harfler kesilmesin diye kutu simetrik genişletilip
     dışarıdan geri alınıyor: dizilim değişmiyor. */
  padding-block:.32em; margin-block:-.32em;
  /* 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; }
.hero__word{
  position:absolute; inset:0;
  /* Sola hizali: kutunun eni en uzun sozcuge gore sabit oldugu icin
     ortalamak kisa sozcukleri iceriden baslatiyordu. */
  display:flex; align-items:center; justify-content:flex-start;
  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:46ch;
  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:flex-start;
  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. */

/* Kendi dolgusu ve sinir cizgileri yok: sayfa boyunca tek ve ayni arka plan. */
.platforms{
  padding:var(--s4) 0;
}
.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; }
/* Sayfanın ilk bölümü: sabit başlığın altından başlar. */
.section--ilk{ padding-top:calc(78px + clamp(2.5rem, 6vh, 4.5rem)); }
/* Bolum bantlarinin kendi dolgusu ve sinir cizgileri yok: arka plan tum
   sitede tek parca ve ayni tonda okunmali. Dolgulu bir bant, bittigi yerde
   keskin bir renk basamagi biraktigi icin kaldirildi. Yukselti duygusu artik
   bolumun icindeki kartlarla veriliyor. */
.section--raised,
.section--dots{
  background:transparent;
  border-block:0;
}

.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;
  /* Okuma yönüyle aynı: aşağıdan yukarı. Aynı kaptaki öğeler --d ile
     sırayla gelir (gecikmeyi assets/site.js atar). */
  transform:translate3d(0,16px,0);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--d, 0ms);
}
.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:flex; gap:.25rem;
  /* Kartların üstünde tam ortada. */
  width:max-content; margin-inline:auto; 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;
  /* Kutu genişliği tabular rakam genişliği; çevredeki negatif harf
     aralığı bu kutulara işlemediği için aynı miktar geri alınır. */
  width:1ch; margin-right:-.02em;
  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;
  /* Rakam kendi tabular genişliğinde ortalanır. Sola yaslı kalınca dar
     glifler ("1" gibi) sağında boşluk bırakıyor ve "1 2" gibi okunuyordu. */
  text-align:center;
}
.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 ────────────────── */

/* Kendi dolgusu ve sinir cizgileri yok: sayfa boyunca tek ve ayni arka plan. */
.logos{
  padding:var(--s7) 0;
}
.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:transparent;
}
.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; transition: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-sans); font-weight:700;
  font-size:clamp(2.2rem, 1.3rem + 3.6vw, 3.9rem);
  line-height:1.12; letter-spacing:-.03em; color:var(--paper);
}
.page-hero__title em{
  font-family:var(--font-hero); font-optical-sizing:auto;
  font-style:italic; font-weight:500; letter-spacing:-.015em;
  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); }
.scard__no{ font-family:var(--font-hero); font-style:italic; 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); }

/* ── Fiyat planları ─────────────────────────────────────────
   Üç kart. Öne çıkan plan renkle değil, kenarlık ve hafif bir zeminle
   ayrılır: dikkat çeker ama diğer iki planı "ikinci sınıf" göstermez. */
.tiers__head{ max-width:60ch; margin-bottom:var(--s5); }
.tiers__head .lede{ margin-top:var(--s3); }

.tiers{
  display:grid; gap:var(--s3);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .tiers{ grid-template-columns:repeat(3,1fr); gap:var(--s2); }
}

.tier{
  display:flex; flex-direction:column;
  padding:var(--s4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-2);
}
.tier--one{
  border-color:rgba(126,166,255,.42);
  background:linear-gradient(180deg, rgba(52,120,255,.10), rgba(9,24,48,.55) 62%);
  box-shadow:0 24px 60px -34px rgba(52,120,255,.55);
}
.tier__top{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:1.6rem; margin-bottom:.55rem;
}
.tier__kicker{
  margin:0;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate-dim);
}
.tier__badge{
  flex:none;
  padding:.24rem .6rem; border-radius:999px;
  background:var(--electric); color:#03101f;
  font-size:.6875rem; font-weight:700; letter-spacing:.01em;
}
.tier__name{
  margin:0 0 .5rem;
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem);
  letter-spacing:-.02em; color:var(--paper);
}
.tier__desc{
  margin:0 0 var(--s3);
  font-size:.9375rem; line-height:1.6; color:var(--slate);
  /* Üç kartın fiyat satırı aynı hizada başlasın diye açıklama alanı esner. */
  flex:1 0 auto; min-height:4.6em;
}
.tier__price{
  display:flex; align-items:baseline; gap:.18rem;
  margin:0 0 var(--s3);
  /* Üç kartta düğmeler aynı hizada başlasın: fiyatlı ve "Teklif" yazan
     kartın satır yüksekliği eşitlenir. */
  min-height:3rem;
}
.tier__cur{ margin-left:.35rem; font-size:1.25rem; font-weight:700; color:var(--electric-soft); }
.tier__amount{
  font-size:clamp(2.35rem,1.9rem + 1.6vw,3rem);
  font-weight:700; letter-spacing:-.035em; line-height:1;
  color:var(--electric-soft);
}
.tier__per{ margin-left:.2rem; font-size:1rem; color:var(--slate); }
.tier__teklif{
  font-size:clamp(2rem,1.7rem + 1.2vw,2.5rem);
  font-weight:700; letter-spacing:-.03em; line-height:1;
  color:var(--electric-soft);
}
.tier__cta{ width:100%; justify-content:center; }
/* Kartın vaadi: fiyatın değil, sonucun cümlesi. */
.tier__outcome{
  margin:.85rem 0 0; text-align:center;
  font-family:var(--font-hero); font-optical-sizing:auto;
  font-style:italic; font-weight:500;
  font-size:1.0625rem; letter-spacing:-.01em;
  color:var(--paper);
}
.tier__list{
  list-style:none; margin:var(--s3) 0 0; padding:var(--s3) 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:.6rem;
}
.tier__list li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.9375rem; line-height:1.5; color:var(--slate);
}
.tiers__fine{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  display:grid; gap:.4rem;
  font-size:.8125rem; line-height:1.6; color:var(--slate-dim);
}

/* ── Kart duvarı ────────────────────────────────────────────
   İstenen React bileşenindeki dikey InfiniteSlider'ın karşılığı: üç sütun
   farklı hızlarda yukarı akar. İçerik her sütunda iki kez basıldığı için
   -%50'de başa sarma dikişsizdir. Üst ve alt kenar maskeyle söner. */
.wall-sec{ overflow:hidden; }
.wall{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
  margin-top:var(--s3);
  max-height:min(78vh, 680px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
@media (min-width:760px){ .wall{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .wall{ grid-template-columns:repeat(3,1fr); } }
/* Dar ekranda ikinci ve üçüncü sütun gizlenir: tek sütun zaten akıyor. */
.wall__col--md{ display:none; }
.wall__col--lg{ display:none; }
@media (min-width:760px){ .wall__col--md{ display:block; } }
@media (min-width:1080px){ .wall__col--lg{ display:block; } }

.wall__col{ overflow:hidden; }
.wall__track{
  display:grid; gap:var(--s3);
  animation:wall-up var(--wall-dur, 60s) linear infinite;
  will-change:transform;
}
/* Üzerine gelince yavaşlar; okumak isteyen yakalayabilsin. */
.wall__col:hover .wall__track{ animation-duration:calc(var(--wall-dur, 60s) * 2.6); }
@keyframes wall-up{ to{ transform:translate3d(0,-50%,0); } }

/* Hareket azaltma: akış durur, sütun elle kaydırılabilir kalır. */
@media (prefers-reduced-motion:reduce){
  .wall{ max-height:none; -webkit-mask-image:none; mask-image:none; }
  .wall__track{ animation:none; }
  .wall__track > .wcard:nth-child(n+13){ display:none; }  /* kopya yığın gizlenir */
}

.wcard{
  position:relative;
  margin:0; padding:var(--s4) var(--s4) calc(var(--s4) - .2rem);
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(15,37,68,.72), rgba(9,24,48,.62));
}
/* Kartların ritmi kırılsın diye her dördüncüsü vurgulu. */
.wcard:nth-child(4n+2){
  border-color:rgba(126,166,255,.3);
  background:linear-gradient(180deg, rgba(52,120,255,.10), rgba(9,24,48,.66) 70%);
}
/* Tırnak işareti: kartın alıntı olduğunu söyler, metni bölmez. */
.wcard::before{
  content:"\201C";
  position:absolute; top:.5rem; right:1.1rem;
  font-family:var(--font-hero); font-size:3.4rem; line-height:1;
  color:var(--electric); opacity:.16; pointer-events:none;
}
.wcard__tag{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 .85rem;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--electric-soft);
}
.wcard__tag::before{
  content:""; width:1.1rem; height:1px; flex:none;
  background:var(--electric); opacity:.7;
}
.wcard__text{
  margin:0;
  font-size:1rem; line-height:1.65;
  color:#c9d6ea;
  letter-spacing:-.005em;
}
/* Gerçek müşteri yorumu geldiğinde kimlik satırı: fotoğraf değil,
   baş harflerden oluşan monogram kullanılır. Stok fotoğrafı bir
   müşterinin yüzü gibi göstermek yanıltıcı olurdu. */
.wcard__who{
  display:flex; align-items:center; gap:.7rem;
  margin:var(--s3) 0 0; padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.wcard__mono{
  flex:none; width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(126,166,255,.34);
  background:rgba(52,120,255,.14);
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  color:var(--electric-soft);
}
.wcard__ad{ display:block; margin:0; font-size:.875rem; font-weight:600; color:var(--paper); line-height:1.3; }
.wcard__firma{ display:block; margin:0; font-size:.75rem; color:var(--slate-dim); line-height:1.3; }

/* ── 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; }
/* İşaret değiştirmek yerine döndürülür (yukarıdaki kurala bak):
   içerik değişimi anlık, dönüş yumuşak. */
.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; }

/* ── Telefon: dokunma hedefleri ve sayfa uzunluğu ────────────
   Canlı site denetiminde bulunanlar: ana sayfa 13 ekran boyuydu; alt
   bilgi bağlantıları 25 px, ekmek kırıntıları 16 px yüksekliğindeydi
   (öneri 44 px). Alt bilgi iki sütuna iniyor, bağlantılar dokunma
   payı alıyor, hizmet kartlarındaki çift numaralama (dev rakam + sayaç)
   tek rakama iniyor, bölüm ve süreç boşlukları daralıyor. */
@media (max-width:719px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3); }
  .footer__brand{ grid-column:1 / -1; }
  .footer__col{ gap:0; }
  .footer__col a, .footer__plain{ display:block; padding-block:.55rem; }
  .footer__head{ margin-bottom:.25rem; }

  .crumbs a{ display:inline-block; padding-block:.7rem; }
  .arrow-link{ display:inline-flex; align-items:center; min-height:44px; }
  .brand{ min-height:44px; }

  .scard{ padding:var(--s3); }
  .scard__count{ display:none; }
  .scard__no{ font-size:2rem; }
  .scard__head{ padding-bottom:var(--s2); margin-bottom:var(--s2); }
  .scard__text{ margin-bottom:var(--s2); }

  .section{ padding-block:clamp(3rem, 9vw, 4rem); }
  .section--ilk{ padding-top:calc(78px + 2.5rem); }
  .sequence{ gap:var(--s4); }
  .tiers__head{ margin-bottom:var(--s4); }

  /* 11 px etiketler telefonda okunmuyordu. */
  .tier__kicker, .tier__badge{ font-size:.75rem; }
}

/* Reklam panelindeki seviye sekmeleri dar panelde iki satıra kırılıyordu
   ("Reklam / Setleri"); kırılmaz, dar kapsayıcıda bir tık sıkı. */
.msek__d{ white-space:nowrap; }
@container (max-width:420px){
  .msek__d{ padding:.35rem .42rem .42rem; font-size:11.5px; }
  .pnl th{ font-size:10.5px; }
}
@media (max-width:719px){
  /* Kalan küçük dokunma hedefleri: hamburger 40, rozet 37, platform
     seçici 36, alt bilgi bağlantıları 42 px'ti. */
  .nav-toggle{ width:44px; height:44px; }
  .hero__badge{ min-height:44px; }
  .rp__sec{ height:48px; }
  .footer__col a, .footer__plain{ padding-block:.65rem; }
}
@media (max-width:719px){
  /* "Neden biz" kartları ve süreç adımları: telefonda dolgu ve
     aralıklar bir kademe sıkı. İçerik aynı, yalnızca boşluk. */
  .why__item, .trust__item{ padding:var(--s3); }
  .why__grid, .trust__grid{ gap:var(--s2); }
  .step__no{ margin-bottom:var(--s2); }
  .sequence h3{ margin-bottom:.5rem; }
  .section__head{ margin-bottom:var(--s4); }
  .stat{ padding:1.25rem 1.4rem; }
}
@media (max-width:719px){
  .rp__sec{ height:52px; }
  .crumbs a{ padding-block:.85rem; }
}

/* ── Platform sayfası kahramanı: 3D marka kartı ────────────
   Meta ve Google sayfalarında sağda, reklam paneliyle aynı perspektif
   diliyle: sol kenar okuyucuya dönük, arkasında kalınlık katmanı, altında
   yer gölgesi, yavaş bir süzülme. Yalnızca transform ve opacity.
   Telefonda kart başlığın üstünde küçük bir simgeye dönüşür. */
.page-hero--visual .page-hero__inner{ display:grid; gap:var(--s4); align-items:center; }
.page-hero__visual{ display:flex; justify-content:flex-start; }
@media (min-width:900px){
  .page-hero--visual .page-hero__inner{ grid-template-columns:1fr auto; gap:clamp(2rem, 5vw, 5rem); }
  .page-hero__visual{ justify-content:flex-end; padding-right:clamp(0px, 2vw, 2rem); }
}
@media (max-width:899px){
  .page-hero__visual{ order:-1; }
}

.logo3d{
  --boy:min(300px, 34vw);
  position:relative; width:var(--boy); aspect-ratio:1;
  perspective:1300px;
}
@media (max-width:899px){ .logo3d{ --boy:96px; } }
.logo3d__tile{
  position:absolute; inset:0;
  display:grid; place-items:center;
  border-radius:22%;
  background:var(--surface-2);
  border:1px solid rgba(148,166,194,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(2,8,20,.5),
    24px 40px 70px -30px rgba(2,8,20,.95);
  transform-style:preserve-3d;
  transform:rotateY(-16deg) rotateX(9deg);
  animation:logo-yuz 7s ease-in-out infinite;
  transition:transform .6s var(--ease);
}
/* Kalınlık: arkada, biraz kaydırılmış koyu katman. */
.logo3d__tile::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:#06132a; border:1px solid rgba(148,166,194,.12);
  transform:translateZ(-26px) translate(12px, 14px);
}
.logo3d__tile img{
  width:calc(100% * var(--oran, .5)); height:auto;
  transform:translateZ(34px);
  filter:drop-shadow(0 12px 22px rgba(2,8,20,.5));
}
.logo3d__shadow{
  position:absolute; left:8%; right:8%; bottom:-16%; height:16%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(2,8,20,.75), transparent);
  filter:blur(6px);
  animation:logo-golge 7s ease-in-out infinite;
}
.logo3d:hover .logo3d__tile{ transform:rotateY(-6deg) rotateX(3deg); animation-play-state:paused; }
@keyframes logo-yuz{
  0%,100%{ transform:rotateY(-16deg) rotateX(9deg) translate3d(0,0,0); }
  50%    { transform:rotateY(-12deg) rotateX(6deg) translate3d(0,-12px,0); }
}
@keyframes logo-golge{
  0%,100%{ transform:scale(1); opacity:.9; }
  50%    { transform:scale(.88); opacity:.6; }
}
@media (max-width:899px){
  .logo3d__tile{ border-radius:24%; transform:rotateY(-12deg) rotateX(7deg); animation:none; }
  .logo3d__tile::before{ transform:translateZ(-14px) translate(5px, 6px); }
  .logo3d__tile img{ transform:translateZ(16px); }
  .logo3d__shadow{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .logo3d__tile, .logo3d__shadow{ animation:none; }
  .logo3d__tile{ transition:none; }
}
@media (max-width:719px){
  /* İç sayfa kahramanı: telefonda üst dolgu menü ile içerik arasında
     ~120 px boşluk bırakıyordu. */
  .page-hero{ padding-top:calc(78px + var(--s4)); padding-bottom:var(--s5); }
}

/* ── Kahraman görselleri ───────────────────────────────────
   Her sayfada içeriğine uygun, birbirinden farklı bir görsel. Ortak
   olan yalnızca renk dili ve yumuşak 3D hissi; hepsi CSS ile çizili,
   marka işaretleri dışında resim yok. Yalnızca transform ve opacity
   canlanıyor; hareket azaltmada hepsi durağan. Telefonda hepsi küçülür
   ve başlığın üstünde durur (.page-hero__visual order:-1). */
.vis{ position:relative; }
.page-hero__visual--chat, .page-hero__visual--list{ justify-content:flex-end; }

/* Hakkımızda: boşlukta duran amblem, etrafında iki yörünge. */
.vis--emblem{ width:min(320px, 36vw); aspect-ratio:1; display:grid; place-items:center; perspective:1200px; }
.vis--emblem::before{ content:""; position:absolute; inset:24%; border-radius:50%; background:radial-gradient(circle, rgba(52,120,255,.30), transparent 70%); }
.vis__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(126,166,255,.34); transform:rotateX(66deg); }
.vis__ring::after{ content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--electric); box-shadow:0 0 14px var(--electric); }
.vis__ring--a{ animation:halka 16s linear infinite; }
.vis__ring--b{ inset:15%; border-style:dashed; border-color:rgba(126,166,255,.26); animation:halka 26s linear infinite reverse; }
.vis__ring--b::after{ width:6px; height:6px; margin-left:-3px; background:var(--electric-soft); box-shadow:0 0 10px var(--electric-soft); }
@keyframes halka{ to{ transform:rotateX(66deg) rotateZ(360deg); } }
.vis__mark{ position:relative; width:46%; height:auto; filter:drop-shadow(0 18px 30px rgba(2,8,20,.65)); animation:suzul 6s ease-in-out infinite; }
@keyframes suzul{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Web Tasarım: tarayıcı penceresi + yanında telefon. Sayfa önce masaüstünde
   sonra telefonda kuruluyor; arkada tasarım aracı kılavuzları kayıp geliyor;
   imleç gelip mavi butona basıyor. Kalınlık sert ofsetli gölgeyle. */
.vis--web{ width:min(420px, 44vw); perspective:1300px; }
.vis__guide{ position:absolute; background:rgba(126,166,255,.5); opacity:0; animation:kilavuz 9s ease-out infinite; }
.vis__guide--y{ left:9%;  top:-16%; width:1px; height:132%; }
.vis__guide--x{ left:-16%; top:36%; height:1px; width:132%; animation-delay:.25s; }
@keyframes kilavuz{ 0%{ opacity:0; } 6%,76%{ opacity:1; } 88%,100%{ opacity:0; } }
.vis__win{
  position:relative; aspect-ratio:16 / 11; display:flex; flex-direction:column; overflow:hidden;
  border-radius:12px; background:#0e2140; border:1px solid rgba(148,166,194,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 10px 12px 0 -1px #06132a, 26px 36px 70px -30px rgba(2,8,20,.95);
  transform:rotateY(-14deg) rotateX(6deg);
  animation:pencere 8s ease-in-out infinite;
}
@keyframes pencere{ 0%,100%{ transform:rotateY(-14deg) rotateX(6deg) translateY(0); } 50%{ transform:rotateY(-11deg) rotateX(4deg) translateY(-8px); } }
.vis__bar{ flex:none; height:26px; display:flex; align-items:center; gap:5px; padding:0 10px; background:rgba(8,20,40,.8); border-bottom:1px solid rgba(148,166,194,.16); }
.vis__bar i{ width:7px; height:7px; border-radius:50%; background:rgba(148,166,194,.35); }
.vis__bar b{ flex:1; height:8px; margin-left:8px; border-radius:4px; background:rgba(148,166,194,.14); }
.vis__wire{ position:relative; flex:1; }
.w{ position:absolute; border-radius:4px; background:rgba(148,166,194,.28); opacity:0; animation:kur 9s ease-out infinite; animation-delay:calc(var(--d) * 1s); }
.w-nav { left:6%;  top:8%;  width:22%; height:5%;  --d:.2; }
.w-nav2{ left:70%; top:8%;  width:24%; height:5%;  --d:.35; }
.w-h1  { left:6%;  top:20%; width:50%; height:11%; --d:.6;  background:rgba(236,239,244,.7); }
.w-h1b { left:6%;  top:33%; width:38%; height:11%; --d:.75; background:rgba(126,166,255,.75); }
.w-h2  { left:6%;  top:47%; width:44%; height:5%;  --d:.95; }
.w-btn { left:6%;  top:56%; width:19%; height:9%;  --d:1.3; background:var(--electric); animation-name:kur-btn; }
.w-btn2{ left:27%; top:56%; width:14%; height:9%;  --d:1.45; background:transparent; border:1px solid rgba(148,166,194,.45); }
.w-img { left:62%; top:20%; width:32%; height:45%; --d:1.0; background:rgba(52,120,255,.25); border:1px solid rgba(126,166,255,.35); }
.w-col { top:74%; width:27%; height:20%; --d:1.7; }
.w-col:first-of-type{ left:6%; } .w-col + .w-col{ left:36.5%; --d:1.9; } .w-col + .w-col + .w-col{ left:67%; --d:2.1; }
@keyframes kur{ 0%{ opacity:0; transform:translateY(8px); } 6%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:translateY(8px); } }
@keyframes kur-btn{
  0%{ opacity:0; transform:translateY(8px); } 6%,32%{ opacity:1; transform:none; }
  34%{ transform:scale(.92); filter:brightness(1.35); } 37%,84%{ opacity:1; transform:none; filter:none; }
  94%,100%{ opacity:0; transform:translateY(8px); }
}
.vis__phone{
  position:absolute; right:-7%; bottom:-16%; width:27%; aspect-ratio:9 / 19; overflow:hidden;
  border-radius:16px; background:#0e2140; border:2px solid rgba(148,166,194,.38);
  box-shadow:6px 8px 0 -1px #06132a, 20px 30px 50px -24px rgba(2,8,20,.95);
  transform:rotateY(-14deg) rotateX(6deg);
  animation:telefon 8s ease-in-out infinite;
}
@keyframes telefon{ 0%,100%{ transform:rotateY(-14deg) rotateX(6deg) translateY(0); } 50%{ transform:rotateY(-11deg) rotateX(4deg) translateY(-5px); } }
.vis__notch{ position:absolute; top:6px; left:32%; width:36%; height:5px; border-radius:3px; background:rgba(8,20,40,.95); }
.vis__pwire{ position:absolute; inset:0; }
.w-p1{ left:10%; top:10%; width:36%; height:3.5%; --d:2.4; }
.w-p2{ left:10%; top:17%; width:72%; height:7%;   --d:2.6; background:rgba(236,239,244,.7); }
.w-p3{ left:10%; top:28%; width:80%; height:24%;  --d:2.8; background:rgba(52,120,255,.25); border:1px solid rgba(126,166,255,.35); }
.w-p4{ left:10%; top:56%; width:44%; height:6%;   --d:3.0; background:var(--electric); }
.w-p5{ left:10%; top:67%; width:80%; height:16%;  --d:3.2; }
.vis__cur{ position:absolute; left:0; top:0; width:16px; height:16px; color:#fff; opacity:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); animation:imlec-web 9s ease-in-out infinite; }
@keyframes imlec-web{
  0%,14%  { opacity:0; transform:translate(76cqw, 60cqw); }
  18%     { opacity:1; transform:translate(76cqw, 60cqw); }
  30%,37% { opacity:1; transform:translate(15cqw, 37cqw); }
  33%     { opacity:1; transform:translate(15cqw, 37cqw) scale(.85); }
  46%,80% { opacity:1; transform:translate(56cqw, 52cqw); }
  90%,100%{ opacity:0; transform:translate(56cqw, 52cqw); }
}
/* Yalnızca genişlik kapsanıyor: size kapsaması kabın yüksekliğini sıfırlıyordu. */
.vis--web{ container-type:inline-size; }

/* Kreatif İçerik: üç ayrı kreatif (video, metin, ürün) story destesinde.
   Her 3,5 sn'de öndeki kart sola kayıp çıkıyor, arkadaki öne geliyor.
   Aynı keyframe, üç kartta üçte bir faz farkıyla. */
.vis--story{ width:min(320px, 36vw); aspect-ratio:1; perspective:1200px; }
.vis__card{
  position:absolute; left:50%; top:50%; width:46%; aspect-ratio:9 / 16;
  margin:-41% 0 0 -23%; border-radius:16px; overflow:hidden;
  background:#122b4f; border:1px solid rgba(148,166,194,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -28px rgba(2,8,20,.95);
  transform-origin:50% 112%;
  animation:story-cycle 10.5s ease-in-out infinite; animation-delay:calc(var(--k) * -3.5s);
}
@keyframes story-cycle{
  0%,30%   { transform:translate(0,0) rotate(0deg) scale(1);         opacity:1;   z-index:3; }
  33.2%    { transform:translate(-72px,-12px) rotate(-11deg) scale(.98); opacity:0; z-index:3; }
  33.3%    { transform:translate(16px,6px) rotate(14deg) scale(.94);  opacity:0;   z-index:1; }
  37%,63%  { transform:translate(16px,6px) rotate(14deg) scale(.94);  opacity:.72; z-index:1; }
  67%,96%  { transform:translate(-16px,6px) rotate(-14deg) scale(.96); opacity:.86; z-index:2; }
  100%     { transform:translate(0,0) rotate(0deg) scale(1);         opacity:1;   z-index:3; }
}
/* İlerleme çubuğu: yalnızca öndeyken dolar. */
.vis__card::before, .vis__card::after{ content:""; position:absolute; top:8px; left:8px; right:8px; height:3px; border-radius:2px; background:rgba(255,255,255,.22); z-index:2; }
.vis__card::after{ right:auto; width:0; background:var(--paper); animation:story-ilerle 10.5s linear infinite; animation-delay:inherit; }
@keyframes story-ilerle{ 0%{ width:0; opacity:1; } 30%{ width:calc(100% - 16px); opacity:1; } 33%,100%{ width:0; opacity:0; } }
/* Story başlığı: avatar + iki çizgi */
.vis__sh{ position:absolute; top:18px; left:10px; right:10px; display:flex; align-items:center; gap:6px; }
.vis__sh i{ width:16px; height:16px; border-radius:50%; background:var(--electric); border:1.5px solid rgba(255,255,255,.7); flex:none; }
.vis__sh b{ height:4px; border-radius:2px; background:rgba(236,239,244,.7); width:34%; }
.vis__sh b + b{ width:20%; opacity:.5; }
/* Video kartı */
.vis__media{ position:absolute; left:10px; right:10px; top:44px; bottom:52px; border-radius:10px; background:#0b1d3a; display:grid; place-items:center; }
.vis__media::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(135deg, rgba(126,166,255,.08) 0 6px, transparent 6px 14px); }
.vis__play{ position:relative; width:0; height:0; border-left:22px solid var(--paper); border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:6px; filter:drop-shadow(0 6px 12px rgba(2,8,20,.6)); }
.vis__cta{ position:absolute; left:12px; right:12px; bottom:14px; height:24px; border-radius:12px; border:1.5px solid rgba(236,239,244,.7); }
.vis__cta--dolu{ border:0; background:var(--electric); }
.vis__cta::after{ content:""; position:absolute; left:50%; top:50%; width:44%; height:4px; margin:-2px 0 0 -22%; border-radius:2px; background:rgba(236,239,244,.9); }
/* Metin kartı */
.vis__hl{ position:absolute; left:14px; right:14px; top:58px; height:16px; border-radius:4px; background:var(--paper); }
.vis__hl--2{ top:80px; right:30%; }
.vis__hl--3{ top:104px; right:14%; height:8px; background:rgba(126,166,255,.85); }
/* Ürün kartı */
.vis__urun{ position:absolute; left:16%; right:16%; top:50px; aspect-ratio:1; border-radius:14px; background:#0b1d3a; border:1px solid rgba(126,166,255,.3); }
.vis__urun::before{ content:""; position:absolute; inset:22%; border-radius:50%; background:rgba(52,120,255,.35); }
.vis__etiket{ position:absolute; left:12px; bottom:50px; width:44%; height:18px; border-radius:9px; background:#1f9d55; }
.vis__etiket::after{ content:""; position:absolute; left:20%; top:50%; width:60%; height:4px; margin-top:-2px; border-radius:2px; background:rgba(255,255,255,.9); }

/* İletişim: iki balon sırayla, üçüncüsü yazıyor. */
.vis--chat{ width:min(340px, 38vw); display:grid; gap:10px; perspective:1200px; transform:rotateY(-8deg) rotateX(3deg); }
.vis--chat::before{
  content:attr(data-bas); display:block; padding-left:1rem; margin-bottom:.15rem;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; color:var(--slate-dim);
  background:radial-gradient(circle at 4px 50%, #1f9d55 0 3.5px, transparent 4.5px) no-repeat 0 50%;
}
.vis__msg{
  max-width:84%; padding:.7rem .95rem; border-radius:16px;
  font-size:.9rem; line-height:1.45; opacity:0;
  animation:balon 10s ease-out infinite;
}
.vis__msg--in { justify-self:start; background:var(--surface-2); color:var(--paper); border:1px solid rgba(148,166,194,.2); border-bottom-left-radius:4px; animation-delay:.3s; }
.vis__msg--out{ justify-self:end; background:var(--electric); color:#fff; border-bottom-right-radius:4px; animation-delay:1.7s; }
.vis__msg--typing{ display:flex; gap:5px; padding:.85rem .95rem; animation-delay:3.2s; }
.vis__msg--typing i{ width:6px; height:6px; border-radius:50%; background:var(--slate); animation:nokta 1.2s ease-in-out infinite; }
.vis__msg--typing i:nth-child(2){ animation-delay:.2s; } .vis__msg--typing i:nth-child(3){ animation-delay:.4s; }
@keyframes balon{ 0%{ opacity:0; transform:translateY(10px) scale(.97); } 5%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:translateY(6px); } }
@keyframes nokta{ 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(-4px); opacity:1; } }

/* Hizmetler: dört kartın farklı ritimde süzüldüğü küme. */
.vis--cluster{ width:min(300px, 34vw); aspect-ratio:1; display:grid; grid-template-columns:1fr 1fr; gap:14px; perspective:1200px; transform:rotateY(-12deg) rotateX(6deg); transform-style:preserve-3d; }
.vis__tile{
  display:grid; place-items:center; border-radius:22%;
  background:var(--surface-2); border:1px solid rgba(148,166,194,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 16px 24px 50px -24px rgba(2,8,20,.95);
  animation:kume 6s ease-in-out infinite; animation-delay:calc(var(--i) * -1.5s);
}
.vis__tile img{ width:44%; height:auto; }
.vis__tile img[src*="google"]{ width:38%; }
@keyframes kume{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* Neden Vora: onay işaretleri sırayla tiklenen liste. */
.vis--list{
  width:min(330px, 36vw); display:grid; gap:.5rem; padding:1rem;
  border-radius:16px; background:var(--surface-2); border:1px solid rgba(148,166,194,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 24px 36px 70px -30px rgba(2,8,20,.95);
  transform:rotateY(-10deg) rotateX(4deg); perspective:1200px;
}
.vis__row{ display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:10px; background:rgba(6,19,39,.55); color:var(--paper); font-size:.9375rem; font-weight:500; }
.vis__row i{ position:relative; flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(126,166,255,.5); animation:tik-kutu 8s linear infinite; animation-delay:calc(var(--i) * .5s); }
.vis__row i::after{ content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; animation:tik 8s linear infinite; animation-delay:calc(var(--i) * .5s); }
@keyframes tik-kutu{ 0%,10%{ background:transparent; border-color:rgba(126,166,255,.5); } 14%,84%{ background:#1f9d55; border-color:#1f9d55; } 92%,100%{ background:transparent; border-color:rgba(126,166,255,.5); } }
@keyframes tik{ 0%,10%{ opacity:0; } 14%,84%{ opacity:1; } 92%,100%{ opacity:0; } }

/* CSS ile çizili küçük simgeler (ekran, story). */
.g{ display:block; position:relative; }
.g-screen{ width:46%; aspect-ratio:16 / 11; border-radius:4px; border:2px solid var(--electric-soft); }
.g-screen::before{ content:""; position:absolute; left:12%; top:16%; width:40%; height:14%; border-radius:2px; background:var(--electric-soft); }
.g-screen::after{ content:""; position:absolute; left:12%; top:44%; width:62%; height:9%; border-radius:2px; background:rgba(126,166,255,.55); box-shadow:0 .8em 0 rgba(126,166,255,.55); }
.g-story{ width:26%; aspect-ratio:9 / 16; border-radius:5px; border:2px solid var(--electric-soft); }
.g-story::after{ content:""; position:absolute; left:50%; top:50%; border-left:.55em solid var(--electric-soft); border-top:.35em solid transparent; border-bottom:.35em solid transparent; transform:translate(-35%,-50%); }
.vis__tile .g{ font-size:18px; }

/* Ana sayfa hizmet kartlarında küçük simge. */
.scard__glyph{ margin-left:auto; margin-right:.75rem; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(52,120,255,.12); border:1px solid rgba(126,166,255,.25); }
.scard__glyph img{ width:20px; height:auto; }
.scard__glyph .g{ font-size:9px; } .scard__glyph .g-screen{ width:20px; } .scard__glyph .g-story{ width:11px; }
.scard__head{ align-items:center; }

/* Telefon: hepsi küçük, başlığın üstünde. */
@media (max-width:899px){
  .vis--emblem{ width:150px; }
  .vis--web{ width:min(250px, 66vw); margin-right:14%; }
  .vis__win, .vis__phone{ animation:none; }
  .vis__guide, .vis__cur{ display:none; }
  .vis--story{ width:170px; }
  .vis--chat{ width:min(320px, 100%); transform:none; }
  .vis__msg{ font-size:.8125rem; padding:.55rem .8rem; }
  .vis--cluster{ width:160px; gap:10px; }
  .vis--list{ width:min(300px, 100%); padding:.7rem; gap:.35rem; transform:none; }
  .vis__row{ padding:.45rem .6rem; font-size:.875rem; }
  .page-hero__visual--chat, .page-hero__visual--list{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .vis *, .vis::before, .vis *::before, .vis *::after{ animation:none !important; }
  .w, .vis__msg{ opacity:1; transform:none; }
  .vis__row i{ background:#1f9d55; border-color:#1f9d55; } .vis__row i::after{ opacity:1; }
  .vis__card{ animation:none; } .vis__card::after{ width:60%; opacity:1; }
  .vis__card--metin{ transform:translate(-16px,6px) rotate(-14deg) scale(.96); opacity:.86; }
  .vis__card--urun{ transform:translate(16px,6px) rotate(14deg) scale(.94); opacity:.72; }
}

/* ── SSS: konu sekmeli blok ────────────────────────────────
   Başlık ortada, arkasında yumuşak bir ışık; konu sekmeleri hap değil
   köşeli, etkin olanın dolgusu alttan yükseliyor; seçilen konunun listesi
   solup yükselerek geliyor. Sorular eski .faq__item akordeonu: artı
   işareti açılınca çarpıya dönüyor, açık kart bir ton aydınlanıyor. */
/* overflow:hidden YOK: başlığın arkasındaki ışık bölüm sınırında kırpılıp
   keskin bir yatay çizgi bırakıyordu. Bölümler saydam olduğu için ışığın
   üst bölüme yumuşakça taşması sorun değil. */
/* Yalnızca yatay kırpma: başlık parıltısı (::before, 620px) telefonda görünüm
   alanını aşıp sayfayı 39px genişletiyordu. overflow-x:clip dikey tarafı
   görünür bırakır; overflow:hidden gibi üstte dikiş çizgisi oluşturmaz. */
.sss{ position:relative; overflow-x:clip; }
.sss__head{ position:relative; display:grid; justify-items:center; gap:.6rem; text-align:center; margin-bottom:var(--s5); }
.sss__head::before{
  content:""; position:absolute; left:50%; top:-280px; width:620px; height:460px;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(52,120,255,.16), transparent);
  filter:blur(40px);
}
.sss__sub{ position:relative; margin:0; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--electric-soft); }
.sss__title{ position:relative; max-width:22ch; }
.sss__tabs{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:var(--s5); }
.sss__tab{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:40px; padding:.55rem 1rem;
  border:1px solid var(--line-2); border-radius:10px; background:transparent;
  color:var(--slate); font:500 .875rem/1 var(--font-sans); white-space:nowrap; cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.sss__tab:hover{ color:var(--paper); }
.sss__tab:focus-visible{ outline:2px solid var(--electric-soft); outline-offset:2px; }
.sss__lbl{ position:relative; z-index:1; font-weight:inherit; }
.sss__fill{ position:absolute; inset:0; z-index:0; background:var(--electric); transform:translateY(101%); transition:transform .45s cubic-bezier(.6,-.28,.735,.045); }
.sss__tab.is-aktif{ color:#fff; border-color:var(--electric); }
.sss__tab.is-aktif .sss__fill{ transform:translateY(0); transition-timing-function:cubic-bezier(.22,.61,.36,1); }
.sss__panels{ position:relative; max-width:48rem; margin:0 auto; }
.sss__panel{ display:grid; gap:.75rem; }
.sss__panel[hidden]{ display:none; }
.sss__panel.is-aktif{ opacity:1; transform:none; transition:opacity .35s var(--ease), transform .4s cubic-bezier(.22,.61,.36,1); }
.sss__panel.is-giriyor, .sss__panel.is-cikiyor{ opacity:0; transform:translateY(20px); }
.sss__panel.is-cikiyor{ transition:opacity .22s var(--ease), transform .22s var(--ease); }
.sss .faq__item{ border-radius:14px; background:var(--surface-2); transition:background-color .3s var(--ease), border-color .3s var(--ease); }
.sss .faq__item[open]{ background:var(--surface); border-color:var(--line-2); }
.sss .faq__q{ font-size:1.0625rem; font-weight:500; color:var(--slate); transition:color .25s var(--ease); }
.sss .faq__item[open] .faq__q, .sss .faq__q:hover{ color:var(--paper); }
@media (max-width:719px){
  .sss__head::before{ width:120vw; }
  .sss__tabs{ gap:.45rem; }
  .sss__tab{ padding:.5rem .8rem; font-size:.8125rem; min-height:44px; }
  .sss .faq__q{ font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .sss__fill, .sss__panel, .sss__tab{ transition:none; }
}

/* ── Telefon: kahraman görselleri düz ve durağan ───────────
   Küçük ekranda eğim, süzülme ve döngü sıkışık ve karışık duruyordu;
   taşan parçalar (telefon, kılavuz, imleç, halka) başlığın üstüne
   biniyordu. Telefonda görseller kimliği taşıyan sade birer rozete
   iner; animasyonlar masaüstünde aynen sürer. */
@media (max-width:899px){
  .page-hero__visual{ margin-bottom:.25rem; }
  .vis, .vis *, .vis::before, .vis *::before, .vis *::after{ animation:none !important; }
  /* Amblem: yalnızca işaret + ışık */
  .vis--emblem{ width:110px; }
  .vis__ring{ display:none; }
  .vis__mark{ width:62%; }
  /* Web: yalnızca pencere, düz */
  .vis--web{ width:min(230px, 62vw); margin:0; }
  .vis__win{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -22px rgba(2,8,20,.9); }
  .vis__phone, .vis__guide, .vis__cur{ display:none; }
  .w{ opacity:1; transform:none; }
  /* Story: sabit yelpaze, kartlar yerli yerinde */
  .vis--story{ width:150px; }
  .vis__card{ animation:none; }
  .vis__card--video{ transform:none; opacity:1; z-index:3; }
  .vis__card--metin{ transform:translate(-14px,5px) rotate(-13deg) scale(.96); opacity:.85; z-index:2; }
  .vis__card--urun { transform:translate(14px,5px) rotate(13deg) scale(.94); opacity:.7; z-index:1; }
  .vis__card::after{ width:55%; opacity:1; }
  /* Sohbet: balonlar sabit, yazıyor noktaları durağan */
  .vis__msg{ opacity:1; transform:none; }
  .vis__msg--typing{ display:none; }
  /* Küme ve liste: düz */
  .vis--cluster{ transform:none; width:150px; }
  .vis__tile{ transform:none; }
  .vis--list{ transform:none; }
  .vis__row i{ background:#1f9d55; border-color:#1f9d55; }
  .vis__row i::after{ opacity:1; }
  /* Meta / Google kartı: düz */
  .logo3d__tile{ transform:none; }
  .logo3d__tile::before{ transform:translate(4px,5px); }
  .logo3d__tile img{ transform:none; }
}
/* Ana sayfa paneli: dar kapsayıcıda imleç canlandırması yok. */
@container (max-width:559px){ .pnl__imlec{ display:none; } }

/* ── Dil değiştirici ve para birimi öneki ───────────────── */
.nav__lang{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2rem; padding:0 .55rem;
  border:1px solid var(--line-2); border-radius:8px;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--slate); text-decoration:none; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav__lang:hover{ color:var(--paper); border-color:var(--electric-soft); }
@media (min-width:1081px){ .nav__lang{ order:3; margin-left:.25rem; } }
@media (max-width:1080px){ .nav__lang{ order:1; margin-left:auto; } .nav-toggle{ order:2; } }
.tier__cur--pre{ margin-right:.1em; }
.odo__prefix{ font-size:.72em; vertical-align:.18em; margin-right:.04em; }