/* ================================================================
   BIG MOOD MEDIA — LANDING PAGE STYLES
   ----------------------------------------------------------------
   Bölümler:
     1. BASE (html, body, reset)
     2. SCROLLBAR
     3. NAV                     — prefix: av-
     4. MOBILE MENU             — prefix: av-mobileMenu
     5. HERO SCENE              — prefix: hi-
     6. MANIFESTO SCENE         — prefix: hi-manifesto-
     7. TASARIMI DEĞİL SCENE    — prefix: tt-
     8. MOBILE ANIMATION KILL   — 1023px altı
     9. HİZMETLERİMİZ SCENE     — prefix: hk-
    10. NEDEN BIGMOOD SCENE     — prefix: nd-
    11. REFERANSLAR SCENE       — prefix: dn-
    12. İLETİŞİM SCENE          — prefix: tta-
    13. FOOTER                  — prefix: ft-
    14. PRELOADER               — prefix: pre-
   ================================================================ */


/* =====================================================
   1. BASE
   ===================================================== */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: #FBFBFD;
  overflow-x: hidden;
  position: relative;
}

a, button {
  transition: all .2s ease;
}


/* =====================================================
   2. SCROLLBAR
   ===================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: #D6DAE4 transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #D6DAE4;
  border-radius: 3px;
  transition: background 0.25s ease;
}
::-webkit-scrollbar-thumb:hover { background: #A9B0C4; }
::-webkit-scrollbar-corner { background: transparent; }


/* =====================================================
   3. NAV — akıllı sticky (scroll aşağı gizle, yukarı göster)
   ===================================================== */
.av-nav-shell {
  transition:
    transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease,
    box-shadow 0.35s ease,
    padding-bottom 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.av-nav-shell #av-navLogoSlot {
  transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.av-nav-shell.av-is-solid #av-navLogoSlot { height: 62px !important; }
.av-nav-shell.av-is-solid {
  background: rgba(243, 243, 236, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(11, 20, 55, 0.06),
    0 14px 34px -24px rgba(11, 20, 55, 0.22);
  padding-bottom: 12px;
}
.av-nav-shell.av-is-hidden { transform: translateY(-100%); }


.av-nav-link {
  position: relative; display: inline-block;
  padding: 8px 0;
  color: rgba(10, 10, 10, 0.75);
  font-weight: 500; letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.av-nav-link:hover { color: #0a0a0a; }
.av-nav-link-active { color: #0a0a0a; font-weight: 600; }
.av-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: #2547C9; border-radius: 2px;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.av-nav-link:hover::after { transform: scaleX(1); transform-origin: left center; }


/* =====================================================
   4. MOBILE MENU OVERLAY
   ===================================================== */
#av-mobileMenu { transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
#av-mobileMenu.av-is-open { opacity: 1; pointer-events: auto; }

#av-mobileMenu .av-menu-item {
  display: inline-block; position: relative;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
#av-mobileMenu.av-is-open .av-menu-item { transform: translateY(0); }
#av-mobileMenu:not(.av-is-open) .av-menu-item { transform: translateY(12px); }

#av-mobileMenu .av-menu-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: #2547C9; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
#av-mobileMenu .av-menu-item.av-is-active::after { transform: scaleX(1); }


/* =====================================================
   5. HERO SCENE — uçan küp + başlık + hizmet listesi
   ===================================================== */


.hi-ambient-glow-tl {
  position: absolute;
  top: -18%; left: -18%;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(37, 71, 201, 0.07) 0%,
    rgba(37, 71, 201, 0) 40%,
    rgba(37, 71, 201, 0.01) 55%,
    rgba(37, 71, 201, 0) 72%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 12s ease-in-out infinite;
  will-change: opacity;
}
.hi-ambient-glow-br {
  position: absolute;
  bottom: -18%; right: -18%;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(37, 71, 201, 0.14) 0%,
    rgba(37, 71, 201, 0.07) 35%,
    rgba(37, 71, 201, 0.03) 55%,
    rgba(37, 71, 201, 0) 72%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 14s ease-in-out infinite reverse;
  will-change: opacity;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}


.hi-hero-h1 {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
@media (max-width: 1023px) {
  .hi-hero-h1 {
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
}

.hi-hero-blur {
  will-change: filter, opacity;
}


.hi-cube-logo-wrap {
  transform: translate(-50%, -50%) rotate(20deg);
  transform-origin: center center;
}


@keyframes cubeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}
.hi-cube-float {
  animation: cubeFloat 4.5s ease-in-out infinite;
}


@keyframes cubeShadow {
  0%, 100% { transform: translateX(-50%) scale(.75, .85); opacity: .75; }
  50%      { transform: translateX(-50%) scale(1.05, .65); opacity: .35; }
}
.hi-cube-shadow {
  position: absolute;
  bottom: 2px; left: 62%;
  width: 28%; height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(11, 20, 55, 0.45) 0%,
    rgba(11, 20, 55, 0.26) 35%,
    rgba(11, 20, 55, 0.10) 60%,
    rgba(11, 20, 55, 0)    82%);
  filter: blur(6px);
  animation: cubeShadow 4.5s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 1;
}


body.hi-stage-locked .hi-cube-float {
  animation-play-state: paused;
}
body.hi-stage-locked .hi-cube-shadow {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

#hi-cubeLogoSlot svg {
  shape-rendering: geometricPrecision;
}


.hi-service-item {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; cursor: pointer;
}
.hi-service-item .hi-service-label {
  color: rgba(10, 10, 10, 0.40);
  font-weight: 500;
  transition: color 0.6s ease;
}
.hi-service-item .hi-service-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #2547C9;
  opacity: 0; transform: scale(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.hi-service-item.hi-is-active .hi-service-label { color: #0a0a0a; }
.hi-service-item.hi-is-active .hi-service-dot   { opacity: 1; transform: scale(1); }
.hi-service-item:hover .hi-service-label { color: rgba(10, 10, 10, 0.85); }


.hi-btn-swap {
  position: relative;
  transition: background-color 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              color 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hi-swap-text {
  position: relative; display: inline-block;
  overflow: hidden; line-height: 1; vertical-align: middle;
}
.hi-swap-text > span {
  display: block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.hi-swap-text > span:last-child {
  position: absolute; inset: 0; transform: translateY(105%);
}
.hi-btn-swap:hover .hi-swap-text > span:first-child { transform: translateY(-105%); }
.hi-btn-swap:hover .hi-swap-text > span:last-child  { transform: translateY(0); }


/* =====================================================
   6. MANIFESTO SCENE
   ===================================================== */
.hi-manifesto-scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 1.5rem;
  background: #0B1437;
}
@media (min-width: 1024px) {
  .hi-manifesto-scene { padding: 16vh 4rem; }
}

.hi-manifesto-inner {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}

.hi-manifesto-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4.5vh;
}
.hi-manifesto-eyebrow::before {
  content: '';
  display: inline-block;
  width: 42px; height: 1px;
  background: #6E86F5;
}

.hi-manifesto-text {
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: #ffffff;
  font-size: clamp(26px, 3.05vw, 58px);
}
.hi-manifesto-text p { margin: 0; }
.hi-manifesto-text p + p { margin-top: 0.55em; }

.hi-manifesto-text .hi-word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.16);
  filter: blur(4px);
  transition: none;
  will-change: filter, color;
}
.hi-manifesto-text .hi-word.hi-key {
  color: rgba(110, 134, 245, 0.22);
}

.hi-manifesto-signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6vh;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hi-manifesto-signature .hi-sig-line {
  width: 34px; height: 1px; background: rgba(255, 255, 255, 0.35);
}


@media (max-width: 1023px) {
  .hi-manifesto-scene {
    min-height: auto;
    padding: 2vh 1.5rem 6vh;
  }
  .hi-manifesto-inner { text-align: center; }
  .hi-manifesto-eyebrow { margin-bottom: 2.5vh; }
  .hi-manifesto-signature {
    justify-content: center;
    margin-top: 4vh;
  }
  .hi-manifesto-text .hi-word {
    color: #ffffff;
    filter: none;
  }
  .hi-manifesto-text .hi-word.hi-key {
    color: #6E86F5;
  }
}


/* =====================================================
   7. TASARIMI DEĞİL / ALGIYI DEĞİŞTİRİYORUZ (tt-)
   ===================================================== */


.tt-hero-title,
.tt-hero-box,
.tt-hero-circle {
  visibility: hidden;
}


.tt-mobile-panel {
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 10px 40px -10px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}


.tt-morph-shape {
  width: 30vh;
  height: 30vh;
  min-width: 170px;
  min-height: 170px;
  max-width: 350px;
  max-height: 350px;
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}


.tt-morph-bg-circle {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #1c2f7a, #0B1437);
}


.tt-morph-bg-panel {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  opacity: 0;
}

/*
  Parça-1 metin sarmalayıcısı:
   - overflow: hidden → morph sırasında yüksekliği çökerken içerideki
     (görünmez halde) metinler düzgünce kırpılır, panel-metin binmesi olmaz
   - padding + negatif margin → giriş animasyonundaki y-kaymaları ve
     "Zorluyoruz" kutusunun mavi gölgesi bu iç boşlukta rahatça sığar
     (layout footprint'i orijinal içerik boyutuyla aynı kalır)
*/
.tt-parca1-wrapper {
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 120px;
  margin-top: -120px;
  margin-bottom: -120px;
}

/* Data & Impact başlığı — satır arası boşluğu (CDN Tailwind keyfi
   leading class'ı üretmediği için burada net değerle veriliyor) */
#tt-data-headline {
  line-height: 1.3 !important;
}

/* Hakkımızda / hizmet kartları — kart başlıkları ve detay panel başlığı
   satır aralığı (CDN Tailwind keyfi leading üretmediği için net değerle) */
.hk-card-title {
  line-height: 1.4 !important;
}
#hk-detail-title {
  line-height: 1.25 !important;
}


@media (min-width: 1024px) {
  #tt-data-desc {
    margin-top: -32px !important;
  }
}


/* =====================================================
   8. MOBILE — pahalı animasyonları söndür
   ===================================================== */
@media (max-width: 1023px) {
  .hi-cube-float,
  .hi-cube-shadow,
  .hi-ambient-glow-tl,
  .hi-ambient-glow-br {
    animation: none !important;
  }
}


/* =====================================================
   9. HİZMETLERİMİZ SCENE (hk-)
   ===================================================== */


.hk-serif {
  font-family: 'Instrument Serif', serif;
}


.hk-hide-scrollbar::-webkit-scrollbar { display: none; }
.hk-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


@keyframes hk-swipe-hint {
  0%, 100% { transform: translateX(0);   opacity: 0.6; }
  50%      { transform: translateX(6px); opacity: 1; }
}
.hk-animate-swipe {
  animation: hk-swipe-hint 2s ease-in-out infinite;
}


.hk-service-card {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 20, 55, 0.08);
  transition:
    background-color 0.4s ease,
    border-color     0.4s ease,
    box-shadow       0.4s ease;
}
.hk-service-card:hover {
  border-color: rgba(37, 71, 201, 0.3);
  box-shadow: 0 10px 20px -10px rgba(11, 20, 55, 0.1);
}


.hk-service-card.hk-active {
  background: linear-gradient(160deg, #0B1437 0%, #14205a 70%, #1c2f7a 130%);
  border-color: transparent;
  box-shadow:
    0 30px 60px -20px rgba(11, 20, 55, 0.4),
    0 10px 25px -10px rgba(11, 20, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


.hk-service-card .hk-icon-wrap  { color: #0B1437; transition: color 0.3s; }
.hk-service-card .hk-card-title { color: #0B1437; transition: color 0.3s; }
.hk-service-card .hk-card-index { color: rgba(11, 20, 55, 0.3); transition: color 0.3s; }

.hk-service-card.hk-active .hk-icon-wrap  { color: #ffffff; }
.hk-service-card.hk-active .hk-card-title { color: #ffffff; }
.hk-service-card.hk-active .hk-card-index { color: rgba(255, 255, 255, 0.5); }


.hk-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}


@keyframes hk-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hk-detail-fade {
  animation: hk-fadeUp .5s cubic-bezier(.2, .7, .2, 1) both;
}


.hk-svg-path {
  stroke: rgba(11, 20, 55, 0.25);
  stroke-width: 1.5px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.4s ease, stroke-width 0.4s ease;
}
.hk-svg-path-top.hk-active {
  stroke: url(#hk-fade-to-bottom);
  stroke-width: 2.5px;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(37, 71, 201, 0.5));
}
.hk-svg-path-bot.hk-active {
  stroke: url(#hk-fade-to-top);
  stroke-width: 2.5px;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(37, 71, 201, 0.5));
}

/* =====================================================
   10. NEDEN BIGMOOD SCENE (nd-)
   ===================================================== */

/* Sahne arka planı — nazik marka renklerinden gölgeler.
   Gradient'ler küçültüldü + opacity düşürüldü + kenardan içeri çekildi
   ki hk-section'dan geçerken üst kenarda "başka bir renk çıktı" hissi vermesin.
   Alt-orta gradient (3.) center noktası 60%'e çekildi — 100%'de olsaydı
   dn-section boundary'sinde orta-merkezde tint aniden yok olup çizgi yaratıyordu. */
.nd-stage-bg {
  background:
    radial-gradient(ellipse 38% 38% at 18% 32%, rgba(9, 56, 222, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 42% 38% at 82% 72%, rgba(41, 5, 115, 0.055) 0%, transparent 55%),
    radial-gradient(ellipse 28% 26% at 50% 60%, rgba(11, 20, 55, 0.035) 0%, transparent 55%),
    #FBFBFD;
}


.nd-text-item {
  opacity: 0.1;
  transform-origin: center;
  will-change: opacity, transform, filter;
  line-height: 1;
}


.nd-grain {
  position: absolute;
  inset: 0;
  opacity: 0.055;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
}


@media (max-width: 767px) {
  
  #nd-scroll-section {
    height: 100dvh;
  }
  
  .nd-text-item {
    line-height: 1.1;
    will-change: opacity, transform;
  }
  /* Mobilde container hareket etmez (JS bypass'lı). Item'lar doğal flex
     column pozisyonunda kalır, JS sadece opacity/scale ile soluklaştırır —
     hiçbir item tamamen kaybolmaz (opacity floor 0.20). */
}


/* =====================================================
   11. REFERANSLAR SCENE (dn-)
   ===================================================== */

/* Orbit wrapper — döner + tersine dönen çift katman. Logolar
   dik kalır, yörünge dönüşü görsel olarak devam eder.
   will-change transform'u önceden söylüyoruz — GPU layer hazır. */
.dn-orbit-wrapper,
.dn-orbit-inner {
  will-change: transform;
}

/* Wrapper konumu — SADECE desktop'ta. Mobilde orbit sistemi tamamen
   gizli (hidden md:block parent altında), yerine marquee kayan şerit var. */
@media (min-width: 768px) {
  .dn-orbit-wrapper {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    height: 443px;
    left: -40px;
  }
}

/* =========================================================
   Mobil marquee — sonsuz yatay kayan logo şeritleri.
   Track + clone yan yana, translateX(-50%) ile clone tam
   olarak track'in yerine gelir → dikişsiz sonsuz loop.
   ========================================================= */
@keyframes dn-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes dn-scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.dn-scroll-left  { animation: dn-scroll-left  50s linear infinite; }
.dn-scroll-right { animation: dn-scroll-right 50s linear infinite; }

/* Kenar yumuşatma — mask-image ile şeridin sol/sağ kenarları
   saydama solar, sonsuz akış hissi güçlenir. */
.dn-marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}


/* =====================================================
   12. İLETİŞİM SCENE (tta-)
   ===================================================== */

/* Sahne arka planı — nazik radial glow.
   Üst/alt padding: section görüntüye kayarken uzun scroll
   mesafesinde ScrollTrigger scrub animasyonu nefes alır.
   Üst padding 46vh çok fazlaydı — 10vh'e çekildi ki içerik
   viewport'ta daha yukarıda dursun, alt padding animasyon süresi için 46vh'de kaldı. */
.tta-page-bg {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 47%, rgba(37, 71, 201, 0.035) 0%, rgba(37, 71, 201, 0.014) 28%, rgba(243, 243, 236, 0) 56%),
    #FBFBFD;
  overflow-x: hidden;
  padding-top: 10vh;
  padding-bottom: 46vh;
}

#tta-hero-section {
  background: transparent;
  overflow: visible;
}


.tta-phone-img {
  filter: drop-shadow(0 28px 48px rgba(11, 20, 55, 0.18));
}


.tta-hero-title,
.tta-hero-copy,
.tta-hero-kicker {
  text-wrap: balance;
}


.tta-contact-shell {
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(11, 20, 55, 0.08);
  box-shadow: 0 18px 48px rgba(11, 20, 55, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.tta-field {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(11, 20, 55, 0.16);
  background: transparent;
  padding: 0.72rem 0 0.64rem;
  color: #0B1437;
  font-size: 0.9rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease;
  border-radius: 0;
}
.tta-field::placeholder { color: rgba(11, 20, 55, 0.42); }
.tta-field:focus        { border-bottom-color: rgba(37, 71, 201, 0.55); }

/* Mobil özel (< 768px).
   Orijinal dosyadaki html/body { overflow: hidden } bloğu ATLANDI —
   multi-section page'de tüm scroll'u kilitleyip önceki bölümlere
   dönüşü imkansız kılardı. Sadece section-level ayarlar aktif. */
@media (max-width: 767px) {
  .tta-page-bg {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    /* Section'ı DOM'da 8vh yukarı çek — dn-refs section'ının alt kenarına
       hafifçe biner (dn'nin bottom gradient bölgesi ile örtüşür, marquee
       daha üstte olduğu için gizlenmez). Kullanıcı scroll ederek geldiğinde
       tta content'ini viewport'ta daha erken/yukarıda görür. */
    margin-top: -8vh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background:
      radial-gradient(circle at 50% 45%, rgba(37, 71, 201, 0.032) 0%, rgba(37, 71, 201, 0.012) 32%, rgba(243, 243, 236, 0) 58%),
      #FBFBFD;
  }

  #tta-hero-section {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    /* Mobilde içeriği viewport'un en tepesine çek — 0 üst padding.
       Nav bu section'a gelindiğinde zaten gizli, üst üste binme yok. */
    padding: 0 18px 18px 18px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  
  .tta-left-phone,
  .tta-right-phone {
    display: none !important;
  }

  
  .tta-hero-glow {
    width: 68vw;
    height: 68vw;
    opacity: 0.035 !important;
    filter: blur(84px);
  }

  
  #tta-hero-section > .relative.z-20 {
    width: 100%;
    height: auto;
    max-width: 390px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tta-hero-kicker {
    margin-bottom: 16px;
    padding: 7px 13px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .tta-hero-title {
    max-width: 340px;
    margin-bottom: 12px;
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.045em;
  }

  .tta-hero-copy {
    max-width: 315px;
    margin-bottom: 22px;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(11, 20, 55, 0.68);
  }

  
  .tta-contact-shell {
    width: 100%;
    max-width: 360px;
    border-radius: 24px;
    padding: 18px 18px 17px;
    background: rgba(255, 255, 255, 0.46);
    box-shadow: 0 18px 42px rgba(11, 20, 55, 0.055);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Kart iç başlık bloğu — daha az boşluk. Not: HTML'de prefix
     kaldırılmış olduğu için selector'lar da unprefixed. */
  .tta-contact-shell .mb-5 { margin-bottom: 12px; }

  .tta-contact-shell p.text-\[11px\] {
    margin-bottom: 7px;
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .tta-contact-shell h2 {
    margin-bottom: 6px;
    font-size: 18px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em;
  }

  .tta-contact-shell h2 + p {
    max-width: 285px;
    font-size: 12px !important;
    line-height: 1.52 !important;
  }

  
  #tta-contact-form            { width: 100%; }
  #tta-contact-form .grid      { display: grid; grid-template-columns: 1fr; gap: 0; }
  #tta-contact-form .pt-5      { padding-top: 14px; }
  #tta-contact-form .gap-4     { gap: 10px; }

  .tta-field {
    padding: 0.56rem 0 0.48rem;
    font-size: 13px;
    line-height: 1.3;
    border-bottom-color: rgba(11, 20, 55, 0.13);
  }
  textarea.tta-field { min-height: 58px; }

  #tta-contact-form button {
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
  }
  #tta-contact-form a {
    width: 100%;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

/* =====================================================
   13. FOOTER (ft-)
   ===================================================== */

/* Footer arkaplan — sadece layout için relative, ekstra gradient yok
   (üst kenardaki radyal mavi glow "gölge gibi" görünüyordu, kaldırıldı). */
.ft-footer-bg {
  position: relative;
}


.ft-glass-shell {
  position: relative;
  background: rgba(244, 244, 244, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 30px 60px rgba(11, 20, 55, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}


.ft-glass-card,
.ft-bento-box {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(11, 20, 55, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s ease;
}
.ft-bento-box:hover {
  border-color: rgba(37, 71, 201, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(37, 71, 201, 0.08);
}


.ft-newsletter-pill {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(10, 10, 10, 0.1);
  transition: all 0.3s;
}
.ft-newsletter-pill:focus-within {
  border-color: #2547C9;
  box-shadow: 0 0 15px rgba(37, 71, 201, 0.15);
  background: #ffffff;
}


.ft-nav-pill {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(10, 10, 10, 0.08);
  color: rgba(10, 10, 10, 0.7);
  transition: all 0.3s;
}
.ft-nav-pill:hover {
  background: #2547C9;
  color: #f4f4f4;
  border-color: #2547C9;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 71, 201, 0.2);
}


.ft-manifesto-card {
  background: #FBFBFD;
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.ft-depth-glow {
  background: radial-gradient(
    ellipse 380px 250px at 22% 55%,
    rgba(37, 71, 201, 0.09) 0%,
    rgba(37, 71, 201, 0.03) 40%,
    transparent 70%
  );
}
.ft-vignette {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(10, 10, 10, 0.06) 100%);
}
.ft-accent-glow {
  filter: drop-shadow(0 0 6px rgba(37, 71, 201, 0.35));
}
.ft-hairline-attr {
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.05));
}


@keyframes ft-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.008); }
}
@keyframes ft-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}
.ft-ambient-breathe { animation: ft-breathe 5s ease-in-out infinite; }
.ft-ambient-drift   { animation: ft-drift   9s ease-in-out infinite; }


.ft-anim-hidden      { opacity: 0; }
.ft-quote-line       { opacity: 0; transform: translateY(8px); }
.ft-accent-bar-inner { transform-origin: left center; transform: scaleX(0); }
.ft-attr-line        { transform-origin: left center; transform: scaleX(0); }


@media (prefers-reduced-motion: reduce) {
  .ft-ambient-breathe,
  .ft-ambient-drift        { animation: none; }
  .ft-anim-hidden,
  .ft-quote-line           { opacity: 1; transform: none; }
  .ft-accent-bar-inner,
  .ft-attr-line            { transform: scaleX(1); }
}


@keyframes ft-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ft-marquee-track {
  animation: ft-marquee-scroll 28s linear infinite;
  will-change: transform;
}
.ft-marquee-container:hover .ft-marquee-track {
  animation-play-state: paused;
}


.ft-marquee-container::before,
.ft-marquee-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .ft-marquee-container::before,
  .ft-marquee-container::after { width: 80px; }
}
.ft-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.85), transparent);
}
.ft-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.85), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .ft-marquee-track { animation: none; }
}


/* =====================================================
   14. PRELOADER (pre-)
   ===================================================== */

/* Session'da preloader daha önce görüldüyse tamamen gizle
   (body üstündeki inline script <html>'e .pre-skip class'ı ekler). */
html.pre-skip #pre-preloader { display: none !important; }


#pre-preloader {
  clip-path: inset(0% 0% 0% 0%);
  will-change: clip-path;
}


#pre-preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


.pre-counter { font-variant-numeric: tabular-nums; }


body.pre-overflow-hidden { overflow: hidden; }

/* Mobil (<= 768px) ve reduced-motion: preloader devre dışı.
   Bu tasarımın orijinal davranışı — mobil kullanıcılar için hız > gösteriş. */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  #pre-preloader { display: none !important; }
  body, body.pre-overflow-hidden { overflow: auto !important; }
}

/* =====================================================
   15. İLETİŞİM SAYFASI — prefix: -con-
   ------------------------------------------------------
   iletisim.html sayfasına özel stiller. Ana sayfaya
   yüklendiğinde hiçbir yerde çakışmaz (prefix disiplini).
   ===================================================== */


.-con-drawer-open   { transform: translateX(0%); box-shadow: -30px 0 80px -20px rgba(11,20,55,0.15); }
.-con-drawer-closed { transform: translateX(100%); }

/* Harita maskesi — kenarları radial gradient ile solar,
   iç kısım net kalır ("gizli göz" hissi) */
.-con-map-mask {
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 80%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 80%);
}


@keyframes -con-ripple-first {
  0%   { transform: scale(0.9); opacity: 0; }
  1%   { transform: scale(0.9); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes -con-ripple-second {
  0%   { transform: scale(0.9); opacity: 0; }
  1%   { transform: scale(0.9); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.-con-pin-wave-1 {
  animation: -con-ripple-first 2.5s linear infinite;
  border-color: rgba(37, 71, 201, 0.5);  
}
.-con-pin-wave-2 {
  animation: -con-ripple-second 2.5s linear 1.25s infinite;
  border-color: rgba(37, 71, 201, 0.5);
}

/* Sağ sütun giriş animasyonu — staggered fade-up.
   Sayfa yüklenir yüklenmez tetiklenir, GSAP gerekmez. */
@keyframes -con-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.-con-fade-up {
  opacity: 0;
  animation: -con-fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.-con-d-1 { animation-delay: 0.05s; }
.-con-d-2 { animation-delay: 0.15s; }
.-con-d-3 { animation-delay: 0.28s; }
.-con-d-4 { animation-delay: 0.42s; }
.-con-d-5 { animation-delay: 0.55s; }
.-con-d-6 { animation-delay: 0.70s; }


@keyframes -con-live-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 0.35; }
}
.-con-live-dot-ping {
  animation: -con-live-pulse 2s ease-in-out infinite;
}


.-con-cta-fill {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.-con-cta-btn:hover .-con-cta-fill { transform: scaleX(1); }


.-con-accent-underline path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: -con-draw 1.4s ease 0.9s forwards;
}
@keyframes -con-draw {
  to { stroke-dashoffset: 0; }
}


.-con-drawer-underline path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.-con-drawer-open .-con-drawer-underline path {
  animation: -con-draw 1s ease 0.4s forwards;
}


.-con-stagger { opacity: 0; transform: translateY(14px); }
.-con-drawer-open .-con-stagger {
  animation: -con-fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.-con-drawer-open .-con-s-1 { animation-delay: 0.30s; }
.-con-drawer-open .-con-s-2 { animation-delay: 0.38s; }
.-con-drawer-open .-con-s-3 { animation-delay: 0.44s; }
.-con-drawer-open .-con-s-4 { animation-delay: 0.50s; }
.-con-drawer-open .-con-s-5 { animation-delay: 0.56s; }
.-con-drawer-open .-con-s-6 { animation-delay: 0.62s; }
.-con-drawer-open .-con-s-7 { animation-delay: 0.68s; }
.-con-drawer-open .-con-s-8 { animation-delay: 0.74s; }


.-con-field { position: relative; }
.-con-field-input:focus + .-con-field-line,
.-con-field-input:focus ~ .-con-field-line {
  transform: scaleX(1);
}
.-con-field-line {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: #2547C9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
  border-radius: 2px;
}


.-con-custom-scrollbar::-webkit-scrollbar { width: 4px; }
.-con-custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.-con-custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(10,10,10,0.12);
  border-radius: 4px;
}
.-con-custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(10,10,10,0.2); }


.-con-field-input:hover:not(:focus) {
  border-color: rgba(10,10,10,0.2);
}


/* =====================================================
   16. İLETİŞİM SAYFASI — MOBİL RAFİNELER (< lg)
   ------------------------------------------------------
   Sadece iletisim sayfası mobil kullanıcılarına özel
   düzeltmeler. Ana sayfa 1023px altını farklı yönetiyor.
   ===================================================== */
@media (max-width: 1023px) {
  /* iOS Safari'de input zoom'u engelle (font-size >= 16px olmalı).
     Not: bu global etki — ana sayfa formunda da çalışır, sorunsuz. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }

  
  .-con-break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  
  .-con-cta-btn .relative.z-10.flex.flex-col span:last-child {
    line-height: 1.15;
  }

  
  #-con-contactFormDrawer {
    height: 100dvh;
  }
}


@media (max-width: 379px) {
  .-con-cta-btn .text-\[9\.5px\] { display: none; }
  .-con-cta-btn { padding-top: 14px; padding-bottom: 14px; }
}


/* =====================================================
   17. REFERANSLAR SAYFASI — prefix: fre- / fef-
   ------------------------------------------------------
   referanslar.html'e özel stiller. Bu sayfa Tailwind
   config'inde prefix:'fre-' kullanıyor, o yüzden burada
   custom class'lar da fre-/fef- prefix'li kalır.
   ===================================================== */

/* Sayfa zemini — çok subtle nokta pattern.
   28px aralıkta çok soluk noktalar. Grid çizgisi değil,
   tek tek noktalar → daha nazik, "milimetrik kağıt" hissi yok.
   Kartlara/panellere temas etmez, sadece body arka planı. */
.fre-page-bg {
  background-color: #FBFBFD;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
}


.fre-bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right,  rgba(10, 10, 10, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
}


.fre-container-wrapper { user-select: none; }


/* ============ MOBİL: Infinite Marquee (auto-scroll logo bandı) ============
   Sadece mobilde (<768px) aktif. Web tarafında bu section
   zaten md:hidden ile gizli. */
@media (max-width: 767px) {
  @keyframes fef-scroll-left {
    from { transform: translateX(0);      }
    to   { transform: translateX(-50%);   }
  }
  @keyframes fef-scroll-right {
    from { transform: translateX(-50%);   }
    to   { transform: translateX(0);      }
  }
  .fef-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: fef-scroll-left 40s linear infinite;
    will-change: transform;
  }
  .fef-marquee-track.reverse {
    animation-name: fef-scroll-right;
    animation-duration: 50s;
  }
  .fef-marquee-track:hover,
  .fef-marquee-track:active {
    animation-play-state: paused;
  }
  
  .fef-marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}


/* ============ MOBİL kart revizyonu (referans kartları) ============
   Web tarafı bu kuralları görmez. Amaç: tam ekran hissi,
   ortalanma, echo yazının kartı taşmaması. */
@media (max-width: 767px) {
  
  .fef-brand-echo {
    font-size: 56px !important;
    letter-spacing: -0.05em;
  }
  
  .fre-card {
    box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.15);
  }
}


/* ============ DATA & IMPACT — Odometer (fef-) ============
   3 panel'in ortak rakam animasyon iskeleti. Her rakam bir
   mask (1.15em yüksek pencere) ve içinde 11.5em'lik strip (0-9).
   JS strip'i yPercent ile hedef rakama kaydırır.
   1em değil 1.15em → Inter font'un descender/ascender'larını
   sığdırır, "0" ve "+" gibi karakterler ezilmez. */
.fef-stat-number { line-height: 1; letter-spacing: -0.02em; }
.fef-digit-mask {
  display: inline-flex;
  height: 1.35em;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.015em;
  box-sizing: content-box;
}
.fef-digit-strip {
  display: flex;
  flex-direction: column;
  height: 13.5em;                 
  line-height: 1;
  will-change: transform;
}
.fef-digit-strip span {
  display: flex;
  height: 1.35em;
  align-items: center;
  justify-content: center;
}
.fef-stat-char {
  display: inline-flex;
  height: 1.35em;
  align-items: center;
  vertical-align: bottom;
}
.fef-will-change-transform { will-change: transform, opacity; }


@media (max-width: 767px) {
  .fef-digit-mask,
  .fef-stat-char { height: 1.4em; }
  .fef-digit-strip { height: 14em; }
  .fef-digit-strip span { height: 1.4em; }
}


/* ============ REDUCED MOTION FALLBACK ============
   prefers-reduced-motion açıksa: panel'ler statik akar,
   clip-path/transform sıfırlanır, pin master boyu doğal. */
@media (prefers-reduced-motion: reduce) {
  .fef-panel-scene {
    position: relative !important;
    clip-path: none !important;
    transform: none !important;
  }
  .fef-panel-inner { transform: none !important; }
  #fef-pin-master {
    height: auto !important;
    overflow: visible !important;
  }
  .fef-progress-indicator { display: none; }
}

/* ============ FOOTER SHEET REVEAL — "yeni sayfa" hissi ============
   Accent panel'in altında footer'ın "içinden çıkıyor" hissi vermek
   için rounded-top cream wrapper. Panel üstüne 32px biner → curved
   kesim panel'in mavisini yumuşakça kırpar. Hafif üst gölge ile
   "kart" hissi. Sadece referanslar sayfasında kullanılıyor. */
.ref-footer-reveal {
  position: relative;
  z-index: 40;
  background: #FBFBFD;                                      
  border-top-left-radius:  32px;
  border-top-right-radius: 32px;
  margin-top: -32px;                                        
  box-shadow: 0 -12px 40px rgba(11, 20, 55, 0.08);           
}


@media (max-width: 767px) {
  .ref-footer-reveal {
    border-top-left-radius:  24px;
    border-top-right-radius: 24px;
    margin-top: 0;
  }
}

/* ============ CHAPTER DIVIDER — arrow hint ============
   Ok işaretinin çok subtle yukarı-aşağı hareketi.
   Tailwind'in animate-bounce'undan çok daha ince — dikkat çeker
   ama göz yormaz. Kicker'la beraber "aşağı bak" mesajı verir. */
@keyframes fre-arrow-hint {
  0%, 100% { transform: translateY(0);   opacity: 0.85; }
  50%      { transform: translateY(3px); opacity: 1;    }
}


/* =====================================================
   18. AJANS KİMLİĞİ SAYFASI — prefix: -kha-
   ------------------------------------------------------
   hakkimizda.html'e özel stiller. Bu sayfa Tailwind
   prefix kullanmıyor, ana sayfa ile birebir aynı Tailwind
   dilinde. Custom class'lar hepsi -kha- prefix'li.
   ===================================================== */


:root {
  --brand-accent: #2547C9;
  --ring-ink: #0a0a0a;
}


.-kha-line-mask       { display: block; overflow: hidden; padding-bottom: 0.12em; }
.-kha-line-mask-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.-kha-accent-text  { color: var(--brand-accent); }

.-kha-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(48px);
  filter: blur(12px);
  will-change: transform, opacity, filter;
}

.-kha-act1-eyebrow {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}


#-kha-grain-overlay { opacity: 0.28; }



.-kha-orbit {
  position: relative;
  width: clamp(300px, 38vw, 480px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.-kha-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.-kha-orbit-rotating {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}


.-kha-station { position: absolute; width: 0; height: 0; }
.-kha-station[data-idx="0"] { top: 10%; left: 50%; }
.-kha-station[data-idx="1"] { top: 50%; left: 90%; }
.-kha-station[data-idx="2"] { top: 90%; left: 50%; }
.-kha-station[data-idx="3"] { top: 50%; left: 10%; }


.-kha-station-dot {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  background: #FBFBFD;
  border: 1.5px solid rgba(10, 10, 10, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.5s cubic-bezier(.5, 0, .2, 1),
              border-color 0.5s cubic-bezier(.5, 0, .2, 1),
              transform 0.5s cubic-bezier(.5, 0, .2, 1),
              box-shadow 0.5s cubic-bezier(.5, 0, .2, 1);
  z-index: 2;
}
.-kha-station.-kha-is-active .-kha-station-dot {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 7px  rgba(37, 71, 201, 0.14),
              0 0 0 14px rgba(37, 71, 201, 0.05);
}


.-kha-station-num-wrap { position: absolute; top: 0; left: 0; }
.-kha-station[data-idx="0"] .-kha-station-num-wrap { top: -30px; left: 0;    }
.-kha-station[data-idx="1"] .-kha-station-num-wrap { top: 0;     left: 30px; }
.-kha-station[data-idx="2"] .-kha-station-num-wrap { top: 30px;  left: 0;    }
.-kha-station[data-idx="3"] .-kha-station-num-wrap { top: 0;     left: -30px;}


.-kha-station-upright {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
  transition: color 0.5s ease, opacity 0.5s ease;
  color: #0a0a0a;
  opacity: 0.32;
  white-space: nowrap;
}
.-kha-station.-kha-is-active .-kha-station-upright {
  color: var(--brand-accent);
  opacity: 1;
}
.-kha-station-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}


/* ============ CENTER DISPLAY (orbit merkezi) ============
   Sabit "TEMAS ALANI" eyebrow + dönen etiket window.
   Track %25 aralıklarla kayar (4 label × 25% = 100%). */
.-kha-orbit-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: 14px;
  padding: 0 12%;
}
.-kha-center-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: rgba(10, 10, 10, 0.55);
  text-transform: uppercase;
}
.-kha-center-label-window {
  position: relative;
  height: 1.4em;
  overflow: visible;
  line-height: 1.15;
  width: 100%;
  text-align: center;
  /* Inner track font-size ile eşleşmesi kritik — yoksa 16px inherit edip
     büyük label'ları kırpar. */
  font-size: clamp(1.4rem, 2.4vw, 2.15rem);
}
/* 4 label absolute üst üste, sadece aktif olan net görünür.
   Modern hero animasyonlarında sık kullanılan blur+fade+translate combo. */
.-kha-center-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--brand-accent);
  white-space: nowrap;
  line-height: 1.15;
  
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.8s cubic-bezier(0.5, 0.1, 0.2, 1),
    transform 0.8s cubic-bezier(0.5, 0.1, 0.2, 1),
    filter 0.8s cubic-bezier(0.5, 0.1, 0.2, 1);
  will-change: opacity, transform, filter;
  pointer-events: none;
}
.-kha-center-label.-kha-is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}



@keyframes -kha-focal-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.-kha-focal-indicator { animation: -kha-focal-pulse 2.6s ease-in-out infinite; }

/* ============ SCROLL HINT — minimal editöryal ============
   Vertikal ince track içinde accent renkli bir çubuk sürekli
   aşağıya doğru akıyor. Klasik scroll indicator, göze yormaz. */
.-kha-scroll-track {
  position: relative;
  width: 1px;
  height: 60px;
  background: rgba(10, 10, 10, 0.10);
  overflow: hidden;
}
.-kha-scroll-track::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--brand-accent));
  animation: -kha-scroll-flow 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes -kha-scroll-flow {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%);  }
}



@media (prefers-reduced-motion: reduce) {
  .-kha-motion-reduce-static {
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .-kha-motion-reduce-flow { display: block !important; }
  .-kha-motion-reduce-py   { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .-kha-motion-reduce-mb   { margin-bottom: 3rem !important; }
  #-kha-progress-indicator,
  #-kha-grain-overlay      { display: none !important; }
  .-kha-hero-word          { opacity: 1 !important; transform: none !important; filter: none !important; }
  .-kha-act1-eyebrow       { opacity: 1 !important; transform: none !important; }
  .-kha-line-mask-inner    { transform: none !important; }
  .-kha-focal-indicator    { animation: none !important; }
}


/* ============ MOBİL (< 768px): full-screen static ============
   Her act = tam bir viewport, sıkı ortalı. Web dokunulmaz.
   Pin/scrub yerine natural flow — mobilde performans + okunurluk. */
@media (max-width: 767px) {
  
  body > div.h-\[50vh\] { display: none !important; }

  
  #-kha-progress-indicator,
  #-kha-grain-overlay,
  .-kha-orbit             { display: none !important; }
  .-kha-focal-indicator   { animation: none !important; }

  
  #-kha-about-section {
    height: auto !important;
    overflow: visible !important;
  }

  
  #-kha-act-1, #-kha-act-2, #-kha-act-1-finale {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center !important;
    text-align: center !important;
    padding: 4.5rem 1.5rem !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  #-kha-act-1        { padding-top: 9rem !important; }
  #-kha-act-2        { padding-bottom: 5.5rem !important; }

  
  .-kha-act2-reveal,
  .-kha-act2-p-line,
  #-kha-act-1-p,
  .-kha-hero-word,
  .-kha-act1-eyebrow,
  .-kha-finale-text     { opacity: 1 !important; transform: none !important; filter: none !important; }
  .-kha-line-mask-inner { transform: none !important; }

  
  #-kha-act-2 > div {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: auto !important;
  }
  #-kha-act-2 > div > div:nth-child(2)  { display: none !important; }
  #-kha-act-2 > div > div:first-child   { width: 100% !important; }

  
  .-kha-act1-eyebrow {
    margin-bottom: 1.25rem !important;
    font-size: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }
  #-kha-hero-1 {
    font-size: 14vw !important;
    line-height: 0.94 !important;
    margin-bottom: 1.75rem !important;
    gap: 0.35rem !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #-kha-act-1 .max-w-3xl {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #-kha-act-1 .-kha-line-mask { text-align: center !important; }
  #-kha-act-1-p {
    margin-top: 1.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 0.9rem !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .-kha-finale-text {
    font-size: 10vw !important;
    line-height: 1.1 !important;
  }
  #-kha-act-2 > div > div:first-child {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  #-kha-act-2 .-kha-act2-reveal:first-of-type {
    margin-bottom: 1.25rem !important;
    font-size: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }
  #-kha-act-2 h2 {
    font-size: 13vw !important;
    line-height: 0.94 !important;
    margin-bottom: 1.75rem !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #-kha-act-2 h2 span > span {
    font-size: 16.5vw !important;
    line-height: 0.9 !important;
  }
  #-kha-act-2 .space-y-6 {
    max-width: 100% !important;
    gap: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  #-kha-act-2 .space-y-6 > p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  #-kha-act-2 .space-y-6 > p + p { margin-top: 1.1rem !important; }
}


/* =====================================================
   19. HİZMETLERİMİZ SAYFASI — prefix: -zha-
   ------------------------------------------------------
   hizmetler.html'e özel stiller. Tailwind prefix'siz,
   ana sayfayla aynı dil. Grain body::before değil element
   olarak — z-index kontrolü için.
   ===================================================== */

/* Grain overlay — SVG element olarak sayfaya eklendi (body::before değil).
   z-30 → nav (z-[110]) ve mobil menü (z-[120]) altında kalır. */
.-zha-grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}


.-zha-instrument-grid {
  background-image:
    radial-gradient(circle at center, rgba(37,71,201,0.055) 0%, transparent 58%),
    linear-gradient(rgba(10,10,10,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.055) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-position: center center;
}


.-zha-corner-bracket {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
}
.-zha-corner-bracket.-zha-tl {
  top: 0; left: 0;
  border-top: 1px solid rgba(10,10,10,0.35);
  border-left: 1px solid rgba(10,10,10,0.35);
}
.-zha-corner-bracket.-zha-tr {
  top: 0; right: 0;
  border-top: 1px solid rgba(10,10,10,0.35);
  border-right: 1px solid rgba(10,10,10,0.35);
}
.-zha-corner-bracket.-zha-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgba(10,10,10,0.35);
  border-left: 1px solid rgba(10,10,10,0.35);
}
.-zha-corner-bracket.-zha-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid rgba(10,10,10,0.35);
  border-right: 1px solid rgba(10,10,10,0.35);
}


.-zha-hud-el { opacity: 0; }


#-zha-hud-load, #-zha-hud-coords, #-zha-hud-index, #-zha-hud-node-status,
.-zha-detail-idx, .-zha-scope-chip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.-zha-reveal-el { opacity: 0; transform: translateY(12px); }


#-zha-canvas-wrapper { cursor: grab; }
#-zha-canvas-wrapper:active { cursor: grabbing; }
#-zha-canvas-wrapper:focus-visible {
  outline: 1px solid rgba(37,71,201,0.5);
  outline-offset: 4px;
}
.-zha-scope-chip { will-change: transform, opacity; }


@keyframes -zha-livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}
.-zha-live-dot { animation: -zha-livePulse 1.6s ease-in-out infinite; }


.-zha-detail-row .-zha-detail-idx,
.-zha-detail-row .-zha-detail-title {
  transition: color 0.35s ease, letter-spacing 0.35s ease;
}
.-zha-detail-row:hover .-zha-detail-idx { letter-spacing: 0.30em; }
.-zha-detail-row:hover .-zha-detail-title { color: #ffffff; }


.-zha-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .-zha-live-dot { animation: none; opacity: 1; }
}


/* =====================================================
   20. HİZMETLERİMİZ — MOBİL RAFİNELER (< 1024px)
   ------------------------------------------------------
   Masaüstü (>= 1024px) hiçbir kuraldan etkilenmez.
   ===================================================== */
@media (max-width: 1023px) {

  
  #-zha-services-section > div,
  #-zha-services-detail > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  #-zha-services-section > div { padding-top: 0 !important; padding-bottom: 0 !important; }
  #-zha-services-detail > div  { padding-top: 0 !important; padding-bottom: 0 !important; }

  
  #-zha-services-section,
  #-zha-services-detail { text-align: center; }
  #-zha-services-section .-zha-reveal-el,
  #-zha-services-detail .-zha-detail-header,
  .-zha-detail-row { text-align: center; }

  
  .-zha-lede-mobile,
  #-zha-closing-line p,
  .-zha-detail-row p,
  .-zha-detail-header h2,
  .-zha-detail-header p {
    max-width: 30rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  
  .-zha-mob-rule {
    border-left: 0 !important;
    padding-left: 0 !important;
    position: relative;
    padding-top: 1.5rem !important;
  }
  .-zha-mob-rule::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 1px;
    background: rgba(10,10,10,0.25);
  }

  
  .-zha-mob-eyebrow { justify-content: center !important; }
  .-zha-mob-eyebrow > span:last-child { display: none !important; }
  .-zha-mob-eyebrow::before,
  .-zha-mob-eyebrow::after {
    content: '';
    width: 22px; height: 1px;
    background: rgba(10,10,10,0.2);
    flex: 0 0 22px;
  }

  .-zha-mob-figure { justify-content: center !important; }
  .-zha-mob-chips { justify-content: center !important; }

  
  #-zha-intro-headline {
    font-size: clamp(2.6rem, 13vw, 4.4rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 1.15rem !important;
  }

  
  .-zha-mob-eyebrow { margin-bottom: 1.5rem !important; }
  .-zha-mob-figure  { margin-bottom: 0.75rem !important; }
  .-zha-mob-intro .-zha-lede-mobile { margin-bottom: 1rem !important; }
  .-zha-mob-rule    { margin-bottom: 1.5rem !important; padding-top: 1.15rem !important; }
  .-zha-mob-jump    { margin-top: 1.5rem !important; padding-top: 1.15rem !important; }

  .-zha-mob-pad { padding-left: 1.25rem; padding-right: 1.25rem; }

  
  #-zha-services-section .-zha-mob-intro {
    min-height: auto;
    display: block;
    padding: 10rem 1.25rem 2.25rem;
  }

  
  #-zha-services-detail-list {
    display: block;
    border-top: 1px solid rgba(244,244,244,0.14);
  }
  .-zha-detail-row {
    padding: 2.1rem 1.25rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(244,244,244,0.14) !important;
    margin: 0 !important;
  }
  .-zha-detail-row .grid {
    display: block !important;
    gap: 0 !important;
  }
  .-zha-detail-row .-zha-detail-idx { margin-bottom: 0.5rem !important; }
  .-zha-detail-row .-zha-detail-title {
    font-size: clamp(1.45rem, 6.4vw, 1.9rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }
  .-zha-detail-row .grid > div:first-child > div:last-child {
    margin-top: 0.5rem !important;
    font-size: 9px !important;
    opacity: 0.5;
  }
  .-zha-detail-row .grid > div:nth-child(2) { margin-top: 0.9rem; }
  .-zha-detail-row .grid > div:nth-child(2) p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 30rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  
  .-zha-detail-row .grid > div:last-child { margin-top: 1.25rem; }
  .-zha-detail-row .grid > div:last-child > div:first-child {
    text-align: center;
    font-size: 8.5px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 0.7rem !important;
    opacity: 0.5;
  }
  .-zha-detail-row ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 0.9rem;
    text-align: left;
    max-width: 26rem;
    margin: 0 auto;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .-zha-detail-row ul > li {
    margin: 0 !important;
    align-items: flex-start;
  }
  .-zha-detail-row ul > li > span:first-child {
    width: 4px !important; height: 4px !important;
    margin-top: 5px !important;
  }

  .-zha-detail-header {
    padding: 2.5rem 1.25rem 1.5rem !important;
    margin-bottom: 0 !important;
  }

  #-zha-closing-line {
    margin-top: 0 !important;
    padding: 2.25rem 1.25rem !important;
    border-top: 1px solid rgba(10,10,10,0.12) !important;
  }

  .-zha-mob-jump { justify-content: center !important; display: flex !important; }
}

@media (max-width: 400px) {
  #-zha-intro-headline { font-size: clamp(2.25rem, 12vw, 3.2rem) !important; }
  #-zha-services-section .-zha-mob-intro { padding: 9rem 1rem 2rem; }
  .-zha-detail-row { padding: 1.75rem 1rem !important; }
  .-zha-detail-row .-zha-detail-title { font-size: 1.35rem !important; }
  .-zha-detail-row ul {
    grid-template-columns: 1fr;
    font-size: 11.5px !important;
  }
}


    /* NOT: buradaki 'html, body { overflow:hidden }' bloğu kaldırıldı —
       ortak styles.css'e girince tüm siteyi (index dahil) kilitliyor ve
       mobilde sayfa kaydırılamıyordu. Site geneli body kuralı yukarıda
       zaten tanımlı. Pi sayfasının masaüstü accordion overflow yönetimi
       aşağıdaki .pi-accordion-container / medya sorgularıyla yapılır. */
    ::selection { background: #D3F033; color: #0B1437; }

    
    .bg-bubbles {
      position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    }
    .bubble {
      position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.15;
      animation: float 20s infinite ease-in-out alternate;
    }
    .bubble-1 { width: 600px; height: 600px; background: #2547C9; top: -10%; left: -10%; }
    .bubble-2 { width: 500px; height: 500px; background: #6E86F5; bottom: -10%; right: -5%; animation-delay: -5s; }
    .bubble-3 { width: 450px; height: 450px; background: #D3F033; top: 40%; left: 40%; animation-delay: -10s; }
    @keyframes float {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(80px, -80px) scale(1.1); }
    }

    
    .pi-progress-rail {
      position: fixed; top: 0; left: 0; width: 100vw; height: 3px; z-index: 120;
      background: rgba(11, 20, 55, 0.05);
    }
    .pi-progress-fill {
      height: 100%; background: #2547C9;
      transform-origin: left center; transform: scaleX(0.2);
      transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
    }

    
    .pi-global-header {
      position: fixed; top: 0; left: 0; width: 100vw; 
      padding: 20px 24px; 
      padding-top: max(20px, env(safe-area-inset-top));
      display: flex; justify-content: space-between; align-items: center;
      z-index: 100; pointer-events: none;
      text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em;
      /* Mobil: hafif buzlu arka plan — altından geçen pi-vertical-title
         (01/KİMLİK vs.) yazıları ANASAYFAYA DÖNÜN ile karışmasın diye. */
      background: rgba(251, 251, 253, 0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(11, 20, 55, 0.04);
    }
    @media (min-width: 768px) {
      .pi-global-header {
        padding: 2.5vw 4vw;
        
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
      }
    }
    .pi-global-header a {
      pointer-events: auto; cursor: pointer; text-decoration: none; color: inherit;
      display: flex; align-items: center; gap: 8px; font-size: 0.9rem;
      opacity: 0.6; transition: opacity 0.3s;
    }
    .pi-global-header a:hover { opacity: 1; color: #2547C9; }
    .pi-step-counter { font-size: 0.85rem; letter-spacing: 0.15em; opacity: 0.6; }

    
    .pi-accordion-container {
      display: flex; flex-direction: column; width: 100vw; min-height: 100dvh;
      z-index: 10; position: relative;
    }
    
    @media (max-width: 767px) {
      .pi-accordion-container { height: auto; }
    }
    @media (min-width: 768px) { 
      .pi-accordion-container { flex-direction: row; height: 100vh; min-height: 100vh; } 
    }

    .pi-panel {
      position: relative; flex: 1;
      transition: flex 0.7s cubic-bezier(0.76, 0, 0.24, 1), background-color 0.5s;
      overflow: hidden; cursor: pointer;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.5); 
    }
    @media (min-width: 768px) {
      .pi-panel { border-bottom: none; border-right: 1px solid rgba(255, 255, 255, 0.7); }
    }
    .pi-panel:last-child { border-bottom: none; border-right: none; }
    
    .pi-panel.pi-active {
      flex: 12; cursor: default;
      background: rgba(255, 255, 255, 0.65);
      box-shadow: 0 0 40px rgba(11, 20, 55, 0.03);
    }
    .pi-panel::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
      opacity: 0.04; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }

    
    .pi-vertical-title {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
      display: flex; align-items: center; justify-content: center;
      writing-mode: horizontal-tb; transform: none;
      font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2em;
      text-transform: uppercase; opacity: 0.5; transition: opacity 0.4s ease;
    }
    @media (min-width: 768px) {
      .pi-vertical-title {
        writing-mode: vertical-rl; transform: rotate(180deg);
        font-size: 1.2rem; letter-spacing: 0.3em; opacity: 0.3;
      }
    }
    .pi-panel.pi-active .pi-vertical-title { opacity: 0; pointer-events: none; }

    /* =========================================
       İÇERİK ALANI
       ========================================= */
    .pi-panel-content {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
      display: flex; flex-direction: column; 
      justify-content: flex-start; 
      gap: 40px;
      opacity: 0; pointer-events: none; visibility: hidden;
      padding: 110px 24px 40px 24px;
    }
    @media (min-width: 768px) {
      .pi-panel-content { 
        padding: 13vh 5vw 6vh 5vw; 
        justify-content: space-between; 
        gap: 0;
      }
    }
    .pi-panel.pi-active .pi-panel-content {
      opacity: 1; pointer-events: auto; visibility: visible;
      transition: opacity 0.6s ease 0.4s;
    }

    .pi-eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em;
      text-transform: uppercase; color: #2547C9;
    }
    .pi-eyebrow::before {
      content: ''; width: 34px; height: 1px; background: currentColor; display: inline-block;
    }
    .pi-question { 
      font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-top: 16px; 
      font-size: clamp(1.8rem, 7vw, 4.5rem); 
      margin-bottom: clamp(16px, 3vh, 32px);
    }

    
    .pi-scroll-wrapper {
      flex: 1; min-height: 0; width: 100%; position: relative; 
      margin: 0;
    }
    @media (min-width: 768px) {
      .pi-scroll-wrapper { margin: 24px 0; }
    }
    .pi-scroll-area {
      height: 100%; width: 100%;
      overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
      display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
      padding-bottom: 15vh; 
      scrollbar-width: none; -ms-overflow-style: none;
      mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    }
    .pi-scroll-area::-webkit-scrollbar { display: none; }

    
    .pi-raw-input {
      background: transparent; border: none; border-bottom: 2px solid rgba(11, 20, 55, 0.15);
      font-family: inherit; font-size: clamp(1.8rem, 8vw, 5rem); font-weight: 700; 
      width: 100%; padding-bottom: 8px; line-height: 1; outline: none; letter-spacing: -0.03em;
      color: #0B1437; transition: border-color 0.4s ease; cursor: text;
      border-radius: 0; 
    }
    .pi-raw-input::placeholder { color: rgba(11, 20, 55, 0.2); }
    .pi-raw-input:focus { border-bottom-color: #2547C9; }

    .pi-hint {
      display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em;
      margin-top: 12px; color: #E53935; opacity: 0; transform: translateY(-4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .pi-hint.pi-hint-show { opacity: 1; transform: translateY(0); }
    @keyframes pi-shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      60% { transform: translateX(-5px); }
      80% { transform: translateX(5px); }
    }
    .pi-shake { animation: pi-shake 0.4s ease; }

    
    .pi-huge-option {
      background: none; border: none; color: rgba(11, 20, 55, 0.35);
      font-family: inherit; font-size: clamp(1.3rem, 5.5vw, 3.5rem); font-weight: 700; line-height: 1.2;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; display: block; 
      text-align: left; letter-spacing: -0.02em; position: relative; flex-shrink: 0;
      padding: clamp(8px, 1.5vh, 16px) 0;
      transform-origin: left center;
    }
    
    .pi-scroll-area:has(.pi-huge-option.pi-selected) .pi-huge-option:not(.pi-selected) {
      opacity: 0.25; transform: scale(0.96);
    }

    @media (hover: hover) {
      .pi-huge-option:hover { 
        color: #0B1437; opacity: 1; transform: translateX(12px) scale(1); 
      }
    }
    
    .pi-huge-option.pi-selected { 
      color: #2547C9; opacity: 1; transform: translateX(24px) scale(1); 
    }
    @media (min-width: 768px) {
      .pi-huge-option.pi-selected { transform: translateX(32px) scale(1); }
    }
    
    .pi-huge-option::before { 
      content: ''; position: absolute; 
      left: -24px; top: 50%; transform: translateY(-50%);
      width: 0px; height: 3px; background-color: #2547C9; 
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
      opacity: 0; border-radius: 2px;
    }
    @media (min-width: 768px) {
      .pi-huge-option::before { left: -32px; height: 4px; }
    }
    
    .pi-huge-option.pi-selected::before { width: 12px; opacity: 1; }
    @media (min-width: 768px) {
      .pi-huge-option.pi-selected::before { width: 16px; }
    }

    
    .pi-next-step-btn {
      background: none; border: none; color: #0B1437;
      font-size: 1rem; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; margin-top: 10px; display: inline-flex; align-items: center; gap: 10px;
      opacity: 0.4; transition: opacity 0.3s, transform 0.3s, color 0.3s; cursor: pointer;
    }
    .pi-next-step-btn:hover { transform: translateX(10px); }

    .pi-fire-btn {
      background: none; border: none; color: #0B1437; font-family: inherit;
      font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em;
      text-align: left; cursor: pointer; transition: color 0.3s, transform 0.3s, opacity 0.3s;
      margin-top: 20px; display: inline-block; opacity: 0.4;
    }
    .pi-fire-btn:hover { transform: translateX(15px); }

    .pi-content-anim { transform: translateY(30px); opacity: 0; }

    
    .pi-success {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(251, 251, 253, 0.95); backdrop-filter: blur(24px);
      color: #0B1437; display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 24px; text-align: center; opacity: 0; visibility: hidden;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }
    .pi-success.pi-success-show { opacity: 1; visibility: visible; }
    .pi-success h2 { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 20px; }
    .pi-success p { font-size: clamp(1rem, 4vw, 1.2rem); color: rgba(11, 20, 55, 0.7); max-width: 600px; margin: 0 auto 40px auto; }
    .pi-success-slogan {
      font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(2rem, 6vw, 2.5rem);
      color: #2547C9; margin-top: 30px;
    }
    .pi-success-home {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 44px; padding: 14px 16px 14px 28px;
      background: #2547C9; color: #fff; border-radius: 999px;
      font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
      text-decoration: none;
      box-shadow: 0 12px 30px -10px rgba(37, 71, 201, 0.55);
      transition: background 0.35s ease, transform 0.35s ease;
    }
    .pi-success-home:hover { background: #0B1437; transform: translateY(-2px); }
    .pi-success-home svg {
      background: #fff; color: #2547C9; border-radius: 999px;
      width: 34px; height: 34px; padding: 9px;
      transition: transform 0.4s ease, color 0.35s ease;
    }
    .pi-success-home:hover svg { color: #0B1437; transform: translateX(3px); }
    @media (max-width: 640px) {
      .pi-success-home { margin-top: 32px; font-size: 14px; padding: 12px 14px 12px 24px; }
    }