/* ============================================================
   BIG Solutions Studio — marka kılavuzu v1.0
   ------------------------------------------------------------
   Sitenin YAPISI ve teknik kurgusu değişmedi; yalnız marka kimliği
   kılavuza geçirildi. Bütün renk, tipografi ve yarıçap kararları
   bu blokta duruyor — gövdedeki kurallar var() üzerinden okuyor,
   yani kimlik tek yerden dönüyor.

   Değişenler ve nedenleri:
     · Lacivert ailesi kılavuz s.11 değerlerine çekildi. Eski
       #0A0D24 mavimsiydi; kılavuzun Lacivert 900'ü #0A0D24, yani
       daha nötr ve daha derin.
     · Vurgu mavi (#7B4FFF) → Elektrik Mor (#7B4FFF). Kılavuz eski
       maviyi açıkça geçersiz sayıyor.
     · Inter → Manrope (başlık) + DM Sans (gövde) + Roboto Mono
       (kicker/teknik). Kılavuz s.14 üç fontluk sistem istiyor;
       tek --font değişkeni bunu taşıyamadığı için üçe ayrıldı.
     · --radius 20px → 12px. Kılavuz s.16 üst sınırı yüzey için
       12px koyuyor; 20px yumuşaklık markanın diline ait değil.
   ============================================================ */

/* TELEFONDAN TELEFONA AYNI GÖRÜNÜM (2026-09-30).
   text-size-adjust: iPhone yan çevrilince ve bazı Android'ler
   "okunurluk" için yazıları kendiliğinden büyütüyor; aynı sayfa
   cihaza göre farklı punto ve satır kırılımıyla açılıyordu. 100%
   bu otomatik şişirmeyi kapatır; kullanıcının kendi yakınlaştırması
   ve erişilebilirlik büyütmesi çalışmaya devam eder. */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root{
  /* Lacivert — kılavuz s.11 */
  --lacivert-900: #0A0D24;
  --lacivert-700: #141B3D;
  --lacivert-500: #2C3670;

  /* Eski navy-* adları KORUNDU: gövdede ve script.js'te bu adlarla
     çağrılıyorlar. Adı değiştirmek yüzlerce satırı elden geçirmek
     demekti; değeri değiştirmek aynı işi tek satırda yapıyor. */
  --navy-950: #0A0D24;
  --navy-900: var(--lacivert-900);
  --navy-800: var(--lacivert-700);
  --navy-700: var(--lacivert-500);

  --bg: var(--lacivert-900);
  --bg-deep: var(--navy-950);
  --surface: rgba(255,255,255,0.05);
  --surface-hover: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.11);

  --fg: #FFFFFF;
  /* Kılavuz koyu zeminde gövde metni için beyazın %55'ini, sessiz
     ton için %50'sini veriyor. Eski #A8B6D0 / #5D6C8C mavimsi
     grilerdi ve zeminle birlikte maviye kayıyordu.

     DEĞERLER KILAVUZA ÇEKİLDİ. Bu açıklama %55/%50 diyordu ama kod
     %62/%42 yazıyordu; yani yorum uzun süredir gerçeği anlatmıyordu.
     Asıl sorun --fg-faint'ti: %42, Lacivert 900 üzerinde 4.06:1
     veriyor ve WCAG AA eşiğinin (4.5) ALTINDA kalıyor. Ölçümde
     "KAYDIR" işareti, works/biggie notları, altbilgi başlıkları ve
     telif satırı hep bu yüzden düştü. 4.5'e ulaşmak için gereken en
     düşük alfa %45.5 (hesaplandı); kılavuzun %50'si zaten 5.30:1.
     Yeni: %55 -> 6.20:1, %50 -> 5.30:1. Hiyerarşi de korunuyor. */
  --fg-muted: rgba(255,255,255,0.55);
  --fg-faint: rgba(255,255,255,0.50);

  /* Elektrik Mor — kılavuz s.11 */
  --mor-700: #7B4FFF;
  --mor-500: #9B7AFF;
  --mor-300: #C3B0FF;
  --mor-900: #3D1F8F;

  --accent: var(--mor-700);
  --accent-strong: var(--mor-500);
  --accent-soft: rgba(123,79,255,0.13);
  --accent-glow: rgba(123,79,255,0.35);

  /* Üç fontluk sistem — kılavuz s.14.
     --font eski adıyla duruyor (gövde varsayılanı) ki mevcut
     kurallar bozulmasın; başlık ve mono ayrı değişkenlerde. */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-baslik: 'Manrope', 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 72px; --s-7: 112px; --s-8: 160px;

  /* Yarıçap basamakları — kılavuz s.16 */
  --radius: 12px;          /* yüzey */
  --r-kart: 8px;
  --r-buton: 4px;
  --r-rozet: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 240ms;
  --container: 1240px;
}

/* Başlıklar Manrope. Kılavuz başlık ve gövde için ayrı font
   istiyor; tek font sistemi markanın sesini düzleştiriyordu. */
h1, h2, h3, h4, h5, h6,
.nav-logo, .btn, button{
  font-family: var(--font-baslik);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; scrollbar-gutter: stable both-edges; }
html.lenis{ height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; border: none; background: none; color: inherit; }
::selection{ background: var(--accent); color: #fff; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ===== Loader ===== */
.loader{
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
}
.loader.done{ transform: translateY(-100%); }
/* AÇILIŞ PERDESİ MARKASI — kılavuz s.10 anatomisi.
   Kelime markası ve etiket alt alta değil, aynı taban çizgisinde;
   perde ekranın ortasında durduğu için blok olarak ortalanıyor. */
.loader-mark{
  font-family: var(--font-baslik);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  display: inline-flex; align-items: baseline; gap: 0.28em;
  opacity: 0; transform: translateY(24px);
  animation: loaderIn 700ms var(--ease) 100ms forwards;
}
.loader-mark .nokta{
  color: var(--mor-700);
  font-size: 0.5em;
  vertical-align: 0.22em;
  margin: 0 0.02em;
}
/* Etiket kelime markasının %33'ü — perdede de oran korunuyor. */
.loader-mark .etiket{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.33em;
  letter-spacing: 0.1em;
  color: var(--mor-300);
}
@keyframes loaderIn{ to{ opacity: 1; transform: translateY(0); } }
.loader-bar{
  width: min(260px, 60vw); height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px; overflow: hidden;
}
.loader-bar span{
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width 200ms linear;
}
body.no-motion .loader{ display: none; }

/* ===== Custom cursor ===== */
.cursor-dot, .cursor-ring{
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 400;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.cursor-dot{
  width: 6px; height: 6px;
  background: var(--accent-strong);
}
.cursor-ring{
  width: 36px; height: 36px;
  border: 1.5px solid rgba(155,122,255,0.5);
  transition: width 250ms var(--ease), height 250ms var(--ease), border-color 250ms var(--ease);
}
.cursor-ring.hovering{
  width: 62px; height: 62px;
  border-color: var(--accent-strong);
  background: rgba(123,79,255,0.08);
}
@media (hover: hover) and (pointer: fine){
  body.js-cursor .cursor-dot, body.js-cursor .cursor-ring{ display: block; }
  body.js-cursor, body.js-cursor a, body.js-cursor button{ cursor: none; }
}

/* ===== Persistent WebGL backdrop ===== */
.gl{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== Scroll progress ===== */
.scroll-progress{
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  z-index: 300;
}

/* ===== Nav ===== */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease), transform 500ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(10,13,36,0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  padding: 13px 0;
}
.nav.hidden{ transform: translateY(-110%); }
.nav-inner{
  max-width: none;
  margin: 0;
  /* logo stays aligned to the content container on the left; the links/buttons
     are pinned to the far right of the viewport */
  padding-left: max(var(--s-3), calc((100vw - var(--container)) / 2 + var(--s-3)));
  padding-right: var(--s-4);
  display: flex; align-items: center; justify-content: space-between;
}
/* ============================================================
   LOGO — kılavuz s.10 (Logo Sistemi)
   ------------------------------------------------------------
   Anatomi: Manrope ExtraBold "B·I·G" kelime markası + yanında
   Roboto Mono "SOLUTIONS" etiketi, AYNI TABAN ÇİZGİSİNDE.
   Ara noktalar interpunct (·) ve her koşulda Elektrik Mor 700 —
   markanın imza detayı.

   Eski hâli "BIG." idi ve kılavuzun yanlış kullanım listesinden
   üçünü birden yapıyordu: SOLUTIONS etiketi yoktu, interpunct'lar
   yoktu, gövdede gradyan vardı. Kılavuz bu üçünü de açıkça
   yasaklıyor.

   Etiket boyutu kelime markasının %33'ü (23px → 7.6px), harf
   aralığı 0.1em. Aradaki boşluk "B" genişliğinin yarısı kadar.
   ============================================================ */
.nav-logo{
  font-family: var(--font-baslik);
  font-weight: 800;                    /* Manrope ExtraBold */
  font-size: 23px;
  letter-spacing: 0.005em;             /* kılavuz: sıkı */
  display: inline-flex; align-items: baseline; gap: 6px;
  color: #FFFFFF;                      /* koyu zeminde beyaz */
  text-decoration: none;
}
.nav-logo .nokta{
  color: var(--mor-700);               /* her koşulda Mor 700 */
  font-size: 0.5em;                    /* harf boyutunun %50'si */
  vertical-align: 0.25em;              /* taban çizgisinin üzerinde */
  margin: 0 0.02em;
}
.nav-logo .etiket{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 7.6px;                    /* 23px'in %33'ü */
  letter-spacing: 0.1em;
  color: var(--mor-300);               /* koyu zeminde Mor 300 */
}
/* nav wordmark is revealed only once the hero mark has flown into it */
.nav-logo{ transition: opacity 260ms var(--ease); }
body.morph-armed .nav-logo{ opacity: 0; pointer-events: none; }
body.morph-armed .nav.logo-in .nav-logo{ opacity: 1; pointer-events: auto; }

/* flying hero → nav logo (scroll morph) */
.fly-logo{
  position: fixed; left: 0; top: 0; z-index: 130;
  font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  color: #fff; white-space: nowrap;
  pointer-events: none; opacity: 0;
  will-change: transform, opacity;
}
.fly-logo .nokta{
  color: var(--mor-700);
  font-size: 0.5em;
  vertical-align: 0.22em;
  margin: 0 0.02em;
}
body:not(.morph-armed) .fly-logo{ display: none; }

/* flying hero CTA → nav button (scroll morph) */
.fly-cta{
  position: fixed; left: 0; top: 0; z-index: 130;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-weight: 600; white-space: nowrap; line-height: 1;
  pointer-events: none; opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 14px 44px -10px var(--accent-glow);
}
body:not(.morph-armed) .fly-cta{ display: none; }

/* nav CTA (Projeni Başlat) — always visible top-right, slides into the contact centre */
#navCta{
  transform-origin: center;
  will-change: transform;
  /* transform transition is toggled from JS: on only during the dock/undock slide,
     off while continuously tracking the scrolling target (prevents lag/jank) */
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-cta-primary{ background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.nav-cta-primary:hover{ background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; }
/* while the nav CTA is managing the contact button (desktop), keep the section's
   own button hidden at all times — the nav CTA docks in its place. This avoids a
   brief "double button" during the slide-back. On mobile (nav CTA hidden) the
   class is absent, so the contact button shows normally. */
body.cta-managed #contactCta{ opacity: 0; visibility: hidden; pointer-events: none; }

.nav-links{ display: flex; align-items: center; gap: 22px; }
.nav-links a{
  font-size: 14px; font-weight: 500;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover{ color: var(--fg); }
.nav-cta{
  color: var(--fg) !important;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-cta:hover{ background: var(--accent-soft); border-color: var(--accent); }
/* soft secondary nav buttons (Bize Ulaşın) */
.nav-cta-soft{ color: var(--fg-muted) !important; background: transparent; }
.nav-cta-soft:hover{ color: var(--fg) !important; }

.nav-burger{
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.nav-burger span{
  width: 22px; height: 2px; background: var(--fg);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity: 0; }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,13,36,0.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-4);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease);
}
.mobile-menu.open{ opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a{ font-size: 28px; font-weight: 700; }

/* ===== Shared section bits ===== */
main{ position: relative; z-index: 2; }
.section-kicker{
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--accent-strong); margin-bottom: var(--s-2);
}
.section-title{
  /* Alt sınır dar telefonda ekrana göre küçülüyor (2026-09-30): 2.6rem
     sabitken "Yaptıklarımızdan" 320-360px ekrana sığmıyor, sayfa
     yana kayıyordu. 10.6vw en uzun kelimeyi her genişlikte sığdırıyor. */
  font-size: clamp(min(2.6rem, 10.6vw), 6vw, 4.6rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.04;
  background: linear-gradient(180deg, #FFF 30%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== CH1 · Hero ===== */
.hero{
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-6) var(--s-3);
  overflow: hidden;
}
.hero-inner{ position: relative; z-index: 2; max-width: 1000px; }
.hero-kicker{
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--accent-strong);
  margin-bottom: var(--s-4);
}
/* HERO KELİME MARKASI — kılavuz s.10.
   GRADYAN VE GÖLGE KALDIRILDI. Eskiden gövdeye beyazdan saydama
   giden bir gradyan ve altına drop-shadow uygulanıyordu; kılavuzun
   yanlış kullanım listesinde ikisi de açıkça yazıyor ("gövdeyi
   renklendirmek", "logoya gölge, kontur, gradyan veya doku
   uygulanmaz"). Gövde artık düz beyaz.

   Harf harf gradyan kuralı da bu yüzden gereksizleşti: transform
   alan çocuklarda background-clip:text kırıldığı için her .char'a
   ayrıca basılıyordu. Düz renkte o sorun yok. */
.hero-mark{
  font-family: var(--font-baslik);
  /* Alt sınır dar telefonda ekrana bağlı (2026-09-30): 6.5rem sabitken
     320px'te "SOLUTIONS" etiketi alt satıra kopuyor, kilit bozuluyordu.
     25.5vw kilidi 320-390 arası her genişlikte tek satırda tutuyor. */
  font-size: clamp(min(6.5rem, 25.5vw), 19vw, 15rem);
  font-weight: 800;                    /* Manrope ExtraBold */
  letter-spacing: 0.005em;             /* kılavuz: sıkı aralık */
  line-height: 0.88;
  color: #FFFFFF;                      /* koyu zeminde beyaz */
}
.hero-mark .char{ display: inline-block; }
/* Ara noktalar her koşulda Mor 700, harf boyutunun %50'si,
   taban çizgisinin üzerinde. */
.hero-mark .nokta{
  color: var(--mor-700);
  font-size: 0.5em;
  vertical-align: 0.22em;
  margin: 0 0.02em;
}
/* Etiket — kılavuz s.10: kelime markasının %33 boyutunda, Roboto
   Mono, 0.1em aralık, aynı taban çizgisinde. Aradaki boşluk "B"
   genişliğinin yarısı kadar.

   inline-block ve baseline hizası şart: hero'da kelime markası
   harf harf transform alıyor, etiket akışta kalırsa animasyon
   sırasında taban çizgisi kayıyor. */
.hero-mark .etiket{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.16em;                 /* dev boyutta %33 optik olarak ağır kalıyor */
  letter-spacing: 0.1em;
  color: var(--mor-300);
  vertical-align: baseline;
  margin-left: 0.28em;
}
/* Logonun altındaki imza satırı — "with small touches".
   Büyük harf ve geniş aralık KALDIRILDI: eski hâli "SOLUTIONS WITH
   SMALL TOUCHES" idi ve logonun etiketiyle aynı görsel ağırlıktaydı,
   ikisi yarışıyordu. Artık etiket logonun kendi parçası; bu satır
   onun altında daha sessiz duruyor. */
.hero-sub{
  margin-top: var(--s-3);
  font-family: var(--font-govde, var(--font));
  font-size: clamp(0.9rem, 1.7vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.hero-line{
  margin-top: var(--s-4);
  font-size: clamp(1.2rem, 2.8vw, 1.75rem);
  font-weight: 600;
  color: var(--fg);
  min-height: 1.4em;
}
.hero-line em{ font-style: normal; color: var(--accent-strong); }
.tw-text{
  background: linear-gradient(92deg, #FFFFFF 0%, #FFFFFF 30%, var(--accent-strong) 50%, #FFFFFF 70%, #FFFFFF 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: twShine 5s linear infinite;
}
@keyframes twShine{ from{ background-position: 120% 0; } to{ background-position: -120% 0; } }
.tw-caret{
  display: inline-block; width: 3px; height: 1.05em;
  background: var(--accent-strong); margin-left: 5px;
  vertical-align: -0.14em; border-radius: 2px;
  box-shadow: 0 0 10px 1px rgba(123,79,255,0.6);
  animation: twBlink 1s steps(1) infinite;
}
@keyframes twBlink{ 0%,50%{ opacity: 1; } 50.01%,100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .tw-caret{ display: none; } .tw-text{ animation: none; } }
/* .hero-actions KALDIRILDI — içindeki tek öğe "Keşfet" düğmesiydi,
   o da kaldırıldı (hemen altındaki KAYDIR işaretiyle aynı şeyi
   söylüyordu). Kap boş kalınca kural da anlamsızlaştı. */
.hero-hint{
  position: absolute; bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2;
}
.hero-hint-text{
  font-size: 11px; font-weight: 600; letter-spacing: 0.3em;
  color: var(--fg-faint);
}
.hero-hint-line{
  width: 1.5px; height: 46px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: hintPulse 2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes hintPulse{
  0%{ transform: scaleY(0); opacity: 0; }
  35%{ transform: scaleY(1); opacity: 1; }
  100%{ transform: scaleY(1) translateY(14px); opacity: 0; }
}

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.btn-primary{ background: var(--accent); color: #fff; }
.btn-primary:hover{ background: var(--accent-strong); box-shadow: 0 14px 44px -10px var(--accent-glow); }
.btn-ghost{ background: transparent; border: 1px solid var(--border); }
.btn-ghost:hover{ border-color: var(--accent); background: var(--accent-soft); }
.btn-large{ min-height: 60px; padding: 0 40px; font-size: 16.5px; }

/* ===== CH2 · Manifesto ===== */
.manifesto{
  position: relative;
  padding: var(--s-8) 0;
  min-height: 90vh;
  display: flex; align-items: center;
}
.manifesto-inner{ max-width: var(--container); margin: 0 auto; width: 100%; padding: 0 var(--s-3); }
.mani-label{
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--accent-strong); margin-bottom: var(--s-5);
}
.mani-line{
  /* "mükemmelleştirir." 320px'te 348px tutuyordu; bk. .section-title. */
  font-size: clamp(min(2.6rem, 10.6vw), 7.5vw, 6rem);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.06;
  margin-bottom: 18px;
}
.mani-line .w{
  display: inline-block;
  color: rgba(255,255,255,0.16);
  transition: color 300ms var(--ease);
}
.mani-line .w.lit{ color: #fff; }
.mani-line.accent .w.lit{ color: var(--accent-strong); }
.mani-note{
  margin-top: var(--s-5);
  max-width: 560px;
  color: var(--fg-muted);
  font-size: 18px;
}

/* ===== Trust strip / references ===== */
.trusted{
  padding: var(--s-7) var(--s-3);
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  position: relative; z-index: 2;
}
.trusted-inner{ max-width: var(--container); margin: 0 auto; text-align: center; }
.trusted-head{ margin-bottom: var(--s-5); }
.trusted-label{
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--accent-strong); margin-bottom: 0;
}
/* ===== Client logos — integrated on the dark section (no cards) ===== */
.logo-wall{
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem); flex-wrap: wrap;
}
.logo-item{ display: flex; align-items: center; justify-content: center; min-height: 62px; }
.logo-mark{
  display: block; width: auto;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.logo-item:hover .logo-mark{ transform: translateY(-2px); }
.logo-rb{ height: 62px; }
.logo-pf{ height: 32px; opacity: 0.9; }
.logo-item:hover .logo-pf{ opacity: 1; }
.logo-sep{
  width: 1px; height: 46px; flex: 0 0 auto;
  background: linear-gradient(180deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
/* "become our next partner" invite pill */
.logo-next{
  gap: 10px; text-decoration: none;
  padding: 12px 20px; border-radius: 999px;
  border: 1px dashed rgba(123,79,255,0.4);
  background: var(--accent-soft);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.logo-next:hover{ border-color: var(--accent); background: rgba(123,79,255,0.14); transform: translateY(-2px); }
.logo-next-plus{ font-size: 20px; font-weight: 300; line-height: 1; color: var(--accent-strong); }
.logo-next-text{ font-size: 13px; line-height: 1.25; text-align: left; color: var(--fg-muted); letter-spacing: 0.01em; }
.logo-next-text strong{ display: block; color: var(--accent-strong); font-weight: 700; }
.trusted-foot{
  margin-top: var(--s-5);
  font-size: 13.5px; color: var(--fg-faint);
}
.trusted-foot a{ color: var(--accent-strong); border-bottom: 1px solid rgba(123,79,255,0.4); padding-bottom: 1px; }
.trusted-foot a:hover{ color: var(--fg); border-color: var(--accent); }
@media (max-width: 620px){
  .logo-wall{ gap: 1.8rem; }
  .logo-sep{ display: none; }
  .logo-rb{ height: 50px; }
  .logo-pf{ height: 26px; }
}

/* ===== CH3 · Services (horizontal) ===== */
.services{ position: relative; }
.services-pin{
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: var(--s-7) 0 var(--s-6);
}
.services-head{
  max-width: var(--container);
  margin: 0 auto var(--s-5);
  padding: 0 var(--s-3);
  width: 100%;
}
.section-lead{
  margin-top: var(--s-3);
  max-width: 52ch;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.6;
  color: var(--fg-muted);
  font-weight: 400;
}
.services-count{
  font-size: 15px; font-weight: 700;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.services-count #svcIndex{ color: var(--accent-strong); }
.services-pin{ perspective: 1600px; }
.svc-track{
  display: flex; gap: var(--s-3);
  padding: 0 max(var(--s-3), calc((100vw - var(--container)) / 2 + var(--s-3)));
  will-change: transform;
  width: max-content;
  transform-style: preserve-3d;
}
/* coverflow depth — cards nearer center stand upright & bright */
.svc-card{ transform-style: preserve-3d; backface-visibility: hidden; }
body.has-3d .svc-card{ transition: box-shadow var(--dur) var(--ease); }
.svc-card{
  position: relative;
  flex: none;
  width: min(480px, 82vw);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* cinematic work imagery behind each service */
.svc-card::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), transform 6s var(--ease);
}
.svc-card::after{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,13,36,0.32) 0%, rgba(10,13,36,0.62) 40%, rgba(10,13,36,0.9) 72%, rgba(10,13,36,0.97) 100%);
}
.svc-card > *{ position: relative; z-index: 1; }
.svc-card:hover::before{ opacity: 0.75; transform: scale(1.06); }
.svc-card:nth-child(1)::before{ background-image: url("assets/svc/svc1.jpg?v=2"); }
.svc-card:nth-child(2)::before{ background-image: url("assets/svc/svc2.jpg?v=2"); }
.svc-card:nth-child(3)::before{ background-image: url("assets/svc/svc3.jpg?v=2"); }
/* 4 ve 5 yer değiştirdi: svc4 bir bot görseli, "AI Platform & Botlar"a ait. */
.svc-card:nth-child(4)::before{ background-image: url("assets/svc/svc5.jpg?v=2"); }
.svc-card:nth-child(5)::before{ background-image: url("assets/svc/svc4.jpg?v=2"); }
.svc-card:nth-child(6)::before{ background-image: url("assets/svc/svc6.jpg?v=2"); }
.svc-card:nth-child(7)::before{ background-image: url("assets/svc/svc7.jpg?v=2"); }
.svc-card:hover{ border-color: var(--accent); transform: translateY(-6px); }
.svc-num{
  display: block;
  font-size: 3.4rem; font-weight: 900; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(155,122,255,0.5);
  margin-bottom: var(--s-3);
}
/* next-gen 3D wireframe glyph per service */
.svc-glyph{
  width: 66px; height: 66px;
  perspective: 460px;
  margin-bottom: var(--s-2);
}
.svc-glyph .cube{
  position: relative;
  width: 40px; height: 40px;
  margin: 13px auto;
  transform-style: preserve-3d;
  animation: cubeSpin 11s linear infinite;
}
.svc-glyph .cube span{
  position: absolute; inset: 0;
  border: 1.5px solid rgba(155,122,255,0.55);
  background: rgba(123,79,255,0.05);
}
.svc-glyph .cube span:nth-child(1){ transform: rotateY(0deg) translateZ(20px); }
.svc-glyph .cube span:nth-child(2){ transform: rotateY(180deg) translateZ(20px); }
.svc-glyph .cube span:nth-child(3){ transform: rotateY(90deg) translateZ(20px); }
.svc-glyph .cube span:nth-child(4){ transform: rotateY(-90deg) translateZ(20px); }
.svc-glyph .cube span:nth-child(5){ transform: rotateX(90deg) translateZ(20px); }
.svc-glyph .cube span:nth-child(6){ transform: rotateX(-90deg) translateZ(20px); border-color: rgba(155,122,255,0.85); }
@keyframes cubeSpin{ from{ transform: rotateX(0) rotateY(0); } to{ transform: rotateX(360deg) rotateY(360deg); } }
.svc-card:nth-child(2) .cube{ animation-duration: 9s; animation-direction: reverse; }
.svc-card:nth-child(3) .cube{ animation-duration: 13s; }
.svc-card:nth-child(4) .cube{ animation-duration: 10s; animation-direction: reverse; }
.svc-card:nth-child(5) .cube{ animation-duration: 12s; }
.svc-card:nth-child(6) .cube{ animation-duration: 8.5s; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce){ .svc-glyph .cube{ animation: none; } }
.svc-card h3{
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.svc-pipeline{
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-strong) !important;
  margin-bottom: 10px !important;
}
.svc-card p{
  color: var(--fg-muted); font-size: 15.5px;
  margin-bottom: var(--s-3);
}
.svc-card ul{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: var(--s-3); }
.svc-card li{
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid rgba(123,79,255,0.25);
  padding: 6px 14px; border-radius: 999px;
}

/* ===== CH4 · Process ===== */
.process{ position: relative; }
.proc-bg{
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 800ms var(--ease), transform 8s var(--ease);
  transform: scale(1.05);
}
.proc-bg.on{ opacity: 0.3; transform: scale(1); }
.proc-bg-shade{
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(10,13,36,0.94) 0%, rgba(10,13,36,0.78) 45%, rgba(10,13,36,0.55) 100%),
              linear-gradient(0deg, var(--bg-deep) 0%, transparent 30%, transparent 70%, var(--bg-deep) 100%);
}
.process-pin > .process-head, .process-pin > .proc-stage{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){ .proc-bg{ transition: opacity 200ms; transform: none; } }
.process-pin{
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: var(--s-7) 0;
  perspective: 1400px;
}
.proc-body, .proc-num{ transform-style: preserve-3d; }
.process-head{ max-width: var(--container); margin: 0 auto var(--s-5); width: 100%; padding: 0 var(--s-3); }
.proc-stage{
  max-width: var(--container);
  margin: 0 auto; width: 100%; padding: 0 var(--s-3);
  display: grid;
  grid-template-columns: minmax(180px, 340px) 1fr;
  gap: var(--s-5);
  align-items: center;
}
.proc-num{
  font-size: clamp(7rem, 18vw, 15rem);
  font-weight: 900; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(155,122,255,0.4);
  user-select: none;
}
.proc-body h3{
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900; letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.proc-body p{
  color: var(--fg-muted);
  font-size: 17.5px;
  max-width: 560px;
}
.proc-rail{
  grid-column: 1 / -1;
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  margin-top: var(--s-4);
  display: flex; justify-content: space-between; align-items: center;
}
.proc-fill{
  position: absolute; left: 0; top: 0;
  height: 100%; width: 0%;
  background: var(--accent);
  border-radius: 999px;
}
.proc-dot{
  position: relative; z-index: 1;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 2px solid rgba(255,255,255,0.25);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.proc-dot.active{
  background: var(--accent);
  border-color: var(--accent-strong);
  transform: scale(1.25);
}

/* ===== AI-generated ambient section videos ===== */
.section-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.16;
  pointer-events: none;
}
.section-video-shade{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg-deep) 0%, transparent 22%, transparent 78%, var(--bg-deep) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .section-video{ display: none; }
}

/* ===== CH5 · Works — horizontal gallery ===== */
.works{ position: relative; }
.works-pin{
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: var(--s-5) 0 var(--s-4);
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
}
.works-head{
  max-width: var(--container);
  margin: 0 auto var(--s-3); padding: 0 var(--s-3);
  width: 100%;
  position: relative; z-index: 150;
}
.works-note{
  max-width: var(--container);
  margin: var(--s-3) auto 0; padding: 0 var(--s-3);
  width: 100%;
  color: var(--fg-faint); font-size: 14px;
  position: relative; z-index: 150;
}
.works-pin{ perspective: 1800px; }
.wg-track{
  display: flex; gap: var(--s-3);
  padding: 0 max(var(--s-3), calc((100vw - var(--container)) / 2 + var(--s-3)));
  width: max-content;
  will-change: transform;
  transform-style: preserve-3d;
}
.wg-card{ transform-style: preserve-3d; backface-visibility: hidden; }

/* TRANSITION C (Works) — 3D stacked deck: cards overlay, front one peels away on scroll */
body.deck-works .wg-track{
  display: block; width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--s-3);
  height: min(48vh, 430px);
  position: relative; perspective: 1800px;
}
/* portfolio progress nav (counter + dots) */
.wg-nav{
  max-width: var(--container);
  margin: var(--s-3) auto 0; padding: 0 var(--s-3);
  width: 100%;
  display: flex; align-items: center; gap: var(--s-3);
  position: relative; z-index: 150;
}
.wg-count{ font-size: 14px; font-weight: 700; color: var(--fg-muted); letter-spacing: 0.06em; white-space: nowrap; }
.wg-count b{ color: var(--accent-strong); }
.wg-dots{ display: flex; gap: 8px; }
.wg-dot{
  width: 26px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: none; padding: 0;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
  cursor: pointer;
}
.wg-dot.on{ background: var(--accent); width: 42px; }
/* the front (active) portfolio card gets an accent glow */
body.deck-works .wg-card.wg-active{
  box-shadow: 0 40px 90px -30px rgba(10,13,36,0.92), 0 0 0 1px rgba(123,79,255,0.5), 0 0 72px -12px var(--accent-glow);
}
body.deck-works .wg-card{
  position: absolute; top: 0; left: 50%;
  width: min(520px, 78vw);
  margin-left: calc(min(520px, 78vw) / -2);
  will-change: transform, opacity;
  box-shadow: 0 40px 90px -30px rgba(10,13,36,0.85);
}
.wg-card{
  flex: none;
  width: min(620px, 84vw);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950) 85%);
  transition: border-color var(--dur) var(--ease);
}
.wg-card:hover{ border-color: var(--accent); }
.wg-visual{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-950);
}
.wg-visual::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,13,36,0.55) 100%);
  pointer-events: none;
}
.work-video{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(0.9) brightness(0.9) hue-rotate(-6deg);
}
.wg-info{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: 18px var(--s-4) 20px;
}
.wg-cat{ font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.wg-tags{ display: flex; gap: 8px; flex-wrap: wrap; }
.wg-tags li{
  font-size: 12px; font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid rgba(123,79,255,0.25);
  padding: 6px 13px; border-radius: 999px;
  opacity: 0; transform: translateY(8px);
}
.wg-card.in .wg-tags li{ animation: tagIn 0.5s var(--ease) forwards; }
.wg-card.in .wg-tags li:nth-child(2){ animation-delay: 0.08s; }
.wg-card.in .wg-tags li:nth-child(3){ animation-delay: 0.16s; }
@keyframes tagIn{ to{ opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .work-video{ display: none; }
  .wg-tags li{ opacity: 1; transform: none; }
}

/* ===== W04 · app walkthrough mockup (home → chat → detail) ===== */
.app-mock{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(123,79,255,0.1), transparent 60%); }
.app-frame{
  position: relative;
  width: 190px; height: 88%;
  border: 1.5px solid rgba(155,122,255,0.4);
  border-radius: 24px;
  background: var(--navy-950);
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.7);
}
.app-screen{
  position: absolute; inset: 0;
  padding: 16px 12px 12px;
  display: flex; flex-direction: column; gap: 9px;
  opacity: 0; transform: translateX(30px);
}
.app-mock.run .s-home{ animation: appCyc 12s ease-in-out infinite; }
.app-mock.run .s-chat{ animation: appCyc 12s ease-in-out infinite; animation-delay: 4s; }
.app-mock.run .s-detail{ animation: appCyc 12s ease-in-out infinite; animation-delay: 8s; }
@keyframes appCyc{
  0%{ opacity: 0; transform: translateX(30px); }
  4%,29%{ opacity: 1; transform: translateX(0); }
  33%,100%{ opacity: 0; transform: translateX(-30px); }
}
.app-top{ display: flex; align-items: center; justify-content: space-between; }
.app-burger, .app-back, .app-bell{ width: 16px; height: 12px; }
.app-burger{ border-top: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted); height: 10px; }
.app-back{ width: 9px; height: 9px; border-left: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted); transform: rotate(45deg); }
.app-bell{ border: 2px solid var(--fg-muted); border-radius: 50%; width: 12px; height: 12px; }
.app-logo{ font-size: 14px; font-weight: 900; color: var(--fg); }
.app-logo i{ color: var(--accent); font-style: normal; }
.app-logo.sm{ font-size: 11px; font-weight: 700; }
.app-search{
  font-size: 9px; color: var(--fg-faint);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px;
}
.app-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-tile{ background: rgba(255,255,255,0.045); border: 1px solid var(--border); border-radius: 9px; padding: 8px; height: 58px; }
.app-tile span{ display: block; height: 26px; border-radius: 6px; background: linear-gradient(135deg, rgba(123,79,255,0.3), rgba(155,122,255,0.12)); margin-bottom: 6px; }
.app-tile b{ display: block; height: 5px; width: 70%; border-radius: 3px; background: rgba(255,255,255,0.18); }
.app-nav{ margin-top: auto; display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid var(--border); }
.app-nav i{ width: 16px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.app-nav i.on{ background: var(--accent); }
.app-chat{ display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.ac{ display: flex; gap: 5px; align-items: flex-end; }
.ac.user{ flex-direction: row-reverse; }
.ac-av{ flex: none; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.ac-b{ font-size: 8.5px; line-height: 1.35; color: var(--fg); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; padding: 5px 7px; max-width: 118px; }
.ac.user .ac-b{ background: rgba(123,79,255,0.22); border-color: rgba(123,79,255,0.4); }
.ac-b.dots{ display: inline-flex; gap: 3px; padding: 7px 8px; }
.ac-b.dots i{ width: 4px; height: 4px; border-radius: 50%; background: var(--accent-strong); animation: chatDot 1.2s ease-in-out infinite; }
.ac-b.dots i:nth-child(2){ animation-delay: 0.18s; }
.ac-b.dots i:nth-child(3){ animation-delay: 0.36s; }
@keyframes chatDot{ 0%,100%{ opacity: 0.3; transform: translateY(0); } 45%{ opacity: 1; transform: translateY(-3px); } }
.app-input{ margin-top: auto; font-size: 8.5px; color: var(--fg-faint); background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px; }
.app-hero{ height: 88px; border-radius: 10px; background: linear-gradient(135deg, rgba(123,79,255,0.32), rgba(155,122,255,0.1)); }
.app-lines{ display: flex; flex-direction: column; gap: 6px; }
.app-lines b{ height: 6px; border-radius: 3px; background: rgba(255,255,255,0.16); }
.app-lines b.short{ width: 55%; }
.app-cta{ margin-top: auto; text-align: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 9px; }
@media (prefers-reduced-motion: reduce){
  .app-mock .s-home{ opacity: 1; transform: none; }
  .app-mock .s-chat, .app-mock .s-detail{ display: none; }
}

/* ===== W05 · site-plan map mockup ===== */
.map-mock{ position: absolute; inset: 0; }
.map-svg{ width: 100%; height: 100%; }
.map-coast{ stroke-dasharray: 900; stroke-dashoffset: 900; }
.map-mock.run .map-coast{ animation: coastDraw 2s var(--ease) forwards; }
@keyframes coastDraw{ to{ stroke-dashoffset: 0; } }
.map-pin circle{ fill: var(--accent); stroke: rgba(255,255,255,0.85); stroke-width: 2; }
.map-pin.acc circle{ fill: #fff; stroke: var(--accent); }
.map-pin text{ fill: #0A0D24; font-size: 8px; font-weight: 800; text-anchor: middle; }
.map-pin.acc text{ fill: var(--accent); }
.map-pin{ opacity: 0; transform: translateY(-10px); transform-box: fill-box; transform-origin: center; }
.map-mock.run .map-pin{ animation: pinDrop 0.5s var(--ease) forwards, pinPulse 3s ease-in-out infinite 1s; animation-delay: var(--d); }
@keyframes pinDrop{ to{ opacity: 1; transform: translateY(0); } }
@keyframes pinPulse{ 0%,100%{ filter: drop-shadow(0 0 0 rgba(123,79,255,0)); } 50%{ filter: drop-shadow(0 0 6px rgba(123,79,255,0.7)); } }
.map-panel{
  position: absolute; top: 16px; right: 16px;
  width: 172px;
  background: rgba(10,13,36,0.72);
  border: 1px solid rgba(155,122,255,0.25);
  border-radius: 12px;
  padding: 12px 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mp-title{ font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-strong); margin-bottom: 8px; }
.mp-row{ display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--fg-muted); padding: 4px 0; }
.mp-row b{ font-size: 15px; font-weight: 800; color: var(--fg); }
@media (prefers-reduced-motion: reduce){
  .map-coast{ stroke-dashoffset: 0; }
  .map-pin{ opacity: 1; transform: none; }
}

/* ===== CH6 · Contact ===== */
.contact{
  position: relative;
  padding: calc(var(--s-8) + 40px) var(--s-3);
  text-align: center;
  min-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.contact-inner{ position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.contact-title{
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.05;
  margin: var(--s-3) 0 var(--s-5);
  background: linear-gradient(180deg, #FFF 30%, rgba(255,255,255,0.5) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-lead{
  max-width: 560px; margin: 0 auto var(--s-5);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--fg-muted); line-height: 1.65;
}
.contact-sub{
  margin-top: var(--s-4);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}
.contact-mail{
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-mail:hover{ color: var(--accent-strong); border-color: var(--accent); }

/* ===== Footer ===== */
.footer{
  position: relative; z-index: 2;
  padding: var(--s-7) var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.footer-grid{
  max-width: var(--container);
  margin: 0 auto var(--s-6);
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 1.1fr;
  gap: var(--s-5);
}
.footer-brand .nav-logo{ margin-bottom: var(--s-3); }
.footer-desc{
  font-size: 14.5px;
  color: var(--fg-muted);
  line-height: 1.75;
  max-width: 340px;
  margin-bottom: var(--s-3);
}
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.footer-social a:hover{ color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }
.footer-col{ display: flex; flex-direction: column; gap: 13px; }
.footer-col h3{
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  margin-bottom: 6px;
}
.footer-col a, .footer-contact-row{
  font-size: 14.5px;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
  width: fit-content;
}
.footer-col a:hover, .footer-contact-row:hover{ color: var(--fg); }
.footer-contact-row{
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.footer-contact-row svg{ color: var(--accent-strong); flex: none; }
.footer-divider{
  max-width: var(--container);
  margin: 0 auto var(--s-3);
  height: 1px;
  background: var(--border);
}
.footer-bottom{
  max-width: var(--container);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--fg-faint);
}
.footer-slogan{
  font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.footer-credit{
  font-size: 12.5px; color: var(--fg-faint);
  letter-spacing: 0.02em; width: 100%;
  text-align: center; margin-top: 8px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-credit b{ color: var(--fg-muted); font-weight: 700; }

/* ===== Project panel (dialog) ===== */
.panel-overlay{
  position: fixed; inset: 0;
  z-index: 350;
  background: rgba(10,13,36,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3);
  opacity: 0; visibility: hidden;
  transition: opacity 360ms var(--ease), visibility 360ms;
}
.panel-overlay.open{ opacity: 1; visibility: visible; }
.panel{
  position: relative;
  width: min(560px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950) 82%);
  box-shadow: 0 40px 130px -20px rgba(10,13,36,0.92), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(30px) scale(0.96);
  transition: transform 460ms var(--ease);
}
.panel-overlay.open .panel{ transform: translateY(0) scale(1); }
.panel-glow{
  /* Genişlik %120 iken panelden taşıp yatay kaydırma açıyordu. %100 +
     daha güçlü blur aynı yumuşak haleyi taşma olmadan veriyor. */
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 100%; height: 60%;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 68%);
  opacity: 0.5; pointer-events: none; filter: blur(28px);
}
.panel-close{
  position: absolute; top: 16px; right: 16px;
  z-index: 3;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  background: rgba(10,13,36,0.5);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.panel-close:hover{ color: var(--fg); border-color: var(--accent); }
.panel-inner{ position: relative; z-index: 1; padding: var(--s-4) var(--s-5) var(--s-4); }
.panel-head{ text-align: center; margin-bottom: var(--s-3); }
/* panel emblem — echoes the hero's rotating geodesic wireframe sphere + BIG dot */
.panel-glyph{ width: 66px; height: 66px; margin: 0 auto var(--s-2); }
.pg-geo{ width: 100%; height: 100%; overflow: visible; display: block;
  filter: drop-shadow(0 8px 22px rgba(10,13,36,0.6)); }
.pg-rot{ transform-origin: 50px 50px; animation: pgSpin 22s linear infinite; }
@keyframes pgSpin{ to{ transform: rotate(360deg); } }
.pg-dot{ filter: drop-shadow(0 0 7px rgba(123,79,255,0.85)); animation: pgDot 2.6s ease-in-out infinite; }
@keyframes pgDot{ 0%,100%{ opacity: 0.9; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .pg-rot, .pg-dot{ animation: none; } }
.panel-kicker{
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--accent-strong); margin-bottom: var(--s-2);
}
.panel-title{
  font-size: clamp(1.7rem, 4.4vw, 2.2rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.08;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #FFF 35%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.panel-text{ font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; max-width: 380px; margin: 0 auto; }
.panel-form{ display: flex; flex-direction: column; gap: 15px; }
.pf-block{ display: flex; flex-direction: column; gap: 10px; }
.pf-blabel{ font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--fg-muted); }
.pf-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip{
  font-size: 13px; font-weight: 600;
  color: var(--fg-muted);
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
  padding: 9px 15px; border-radius: 999px; cursor: pointer; min-height: 40px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pf-chip:hover{ color: var(--fg); border-color: var(--accent); }
.pf-chip.on{ color: #fff; background: var(--accent); border-color: var(--accent); }
.pf-row{ display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-3); }
.pf-field{ display: flex; flex-direction: column; gap: 8px; }
.pf-field label{ font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--fg-muted); }
.pf-opt{ color: var(--fg-faint); }
.pf-field input, .pf-field textarea{
  font-family: inherit; font-size: 15px; color: var(--fg);
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
  border-radius: 13px; padding: 13px 15px; min-height: 46px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pf-field textarea{ resize: vertical; min-height: 96px; }
.pf-field input::placeholder, .pf-field textarea::placeholder{ color: var(--fg-faint); }
/* outline: none BURADA GÜVENLİ — yerine kendi işaretini koyuyor:
   kenar rengi --accent'e dönüyor ve dışına bir halka çiziliyor.
   Ölçüm: odaksız kenar ile odaklı kenar arasındaki fark 3.05:1,
   yani WCAG 2.4.11'in 3:1 eşiğini kıl payı geçiyordu. Halka %18
   alfada zemine karşı 1.18 — pratikte görünmüyordu ve tek başına
   hiçbir şey taşımıyordu. %38'e çıkarıldı: eşiğe yaslanmak yerine
   üzerinde duruyor, düzen hiç değişmiyor. */
.pf-field input:focus, .pf-field textarea:focus{
  outline: none; border-color: var(--accent);
  background: rgba(123,79,255,0.06);
  box-shadow: 0 0 0 3px rgba(123,79,255,0.38);
}
/* KİT DIŞI AMA BİLEREK — form durum renkleri.
   Kılavuz s.11 anlamsal renk TANIMLAMIYOR; palette hata/başarı
   karşılığı yok. Hata uyarısını mora boyamak, formun tek gerçek
   uyarısını sayfanın geri kalanından ayırt edilemez hâle getirirdi.
   Renk tek taşıyıcı da değil: .pf-error ayrıca metin yazıyor ve
   input .invalid sınıfı alıyor (WCAG "renk tek başına anlam
   taşımaz" kuralı karşılanıyor).
   Kılavuz bir gün anlamsal renk tanımlarsa burası ona çekilmeli. */
.pf-field input.invalid, .pf-field textarea.invalid{ border-color: #E5484D; }
.pf-error{ font-size: 13.5px; color: #FF8A8E; }
.pf-submit{ width: 100%; gap: 8px; margin-top: 4px; }
.pf-success{ font-size: 14px; color: #7EE2A8; line-height: 1.6; text-align: center; }
body.panel-open{ overflow: hidden; }

/* Yüzen WhatsApp düğmesi ve onun footer'a yerleşme kuralları kaldırıldı.
   Not: eski "wa-dockmode" kipi #waFooterRow'u gizliyordu; artık footer'daki
   WhatsApp iletişim satırı her zaman görünür. */

/* services cards without number/glyph — a little breathing room on top */
.svc-card{ padding-top: var(--s-4); }

/* ===== WhatsApp confirm dialog ===== */
.wa-confirm{
  position: fixed; inset: 0; z-index: 360;
  background: rgba(10,13,36,0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--ease), visibility 300ms;
}
.wa-confirm.open{ opacity: 1; visibility: visible; }
.wa-confirm-box{
  width: min(430px, 100%);
  background: linear-gradient(165deg, var(--navy-800), var(--navy-950) 85%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: var(--s-4);
  text-align: center;
  box-shadow: 0 30px 90px -20px rgba(10,13,36,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(16px) scale(0.97);
  transition: transform 340ms var(--ease);
}
.wa-confirm.open .wa-confirm-box{ transform: none; }
.wa-confirm-ic{
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(123,79,255,0.13);
  border: 1px solid rgba(123,79,255,0.4);
  color: #7B4FFF;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-2);
}
.wa-confirm-title{ font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.wa-confirm-text{ font-size: 14.5px; color: var(--fg-muted); margin-bottom: var(--s-3); }
.wa-confirm-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wa-confirm-actions .btn{ min-height: 48px; padding: 0 22px; font-size: 14.5px; }
.btn.wa-go{ background: #7B4FFF; color: #F6F5FA; font-weight: 700; }
.btn.wa-go:hover{ background: #9B7AFF; box-shadow: 0 12px 34px -8px rgba(123,79,255,0.55); }

/* ===== Text edit mode (geçici — metinler kilitlenince kaldırılacak) ===== */
.edit-kit{
  position: fixed; left: 22px; bottom: 22px; z-index: 365;
  display: flex; gap: 8px; align-items: center;
}
#editToggle{
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  color: var(--fg-muted);
  background: rgba(10,13,36,0.85);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#editToggle:hover{ color: var(--fg); border-color: var(--accent); }
#editToggle.on{ color: #0A0D24; background: var(--accent-strong); border-color: var(--accent-strong); }
#editReset{
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--fg-muted);
  background: rgba(10,13,36,0.85);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#editReset:hover{ color: #FF8A8E; border-color: #E5484D; }
body.edit-mode #editReset{ display: inline-flex; }

body.edit-mode [data-edit]{
  outline: 1.5px dashed rgba(155,122,255,0.45);
  outline-offset: 3px;
  border-radius: 4px;
  cursor: text !important;
}
body.edit-mode [data-edit]:hover{ outline-color: var(--accent-strong); background: rgba(123,79,255,0.06); }
body.edit-mode [data-edit]:focus{ outline: 2px solid var(--accent); background: rgba(123,79,255,0.09); }
body.js-cursor.edit-mode .cursor-dot, body.js-cursor.edit-mode .cursor-ring{ display: none; }
body.js-cursor.edit-mode, body.js-cursor.edit-mode a, body.js-cursor.edit-mode button{ cursor: auto; }
@media (max-width: 600px){ .edit-kit{ left: 14px; bottom: 14px; } }

/* ===== Reveal fallback (no-JS safe) ===== */
.reveal-y{ transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
body.js-motion .reveal-y{ opacity: 0; transform: translateY(24px); }
body.js-motion .reveal-y.in{ opacity: 1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .proc-stage{ grid-template-columns: 1fr; gap: var(--s-3); }
  .proc-num{ font-size: 6rem; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  :root{ --s-7: 80px; --s-8: 108px; }
  .nav-links{ display: none; }
  .nav-burger{ display: flex; }
  .services-head{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px){
  /* .hero-actions kuralı buradan da çıkarıldı; öğe artık yok. */
  .btn{ width: 100%; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ justify-content: center; text-align: center; }
  .pf-row{ grid-template-columns: 1fr; }
}

/* ===== BIGGIE — fikri taslağa çevirme daveti ===== */
/* Portföyün hemen ardında: ziyaretçi kanıtı görmüş, eyleme geçme anı. */
.biggie{ position: relative; }
.biggie::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(70% 55% at 50% 0%, var(--accent-soft), transparent 68%);
}
.biggie-inner{ position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
/* Docked Biggie butonu başlık ile kartların arasına oturuyor; bu boşluk ona ait. */
.biggie-head{ max-width: 900px; margin: 0 auto var(--s-7); text-align: center; padding: 0 var(--s-3); }
.biggie-head .section-lead{ margin-left: auto; margin-right: auto; }


.biggie-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-align: left; font-family: var(--font);
  padding: var(--s-4) var(--s-4) calc(var(--s-4) - 4px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.biggie-card{ --kart-isik: 123,79,255; }
.biggie-card:hover{
  transform: translateY(-5px);
  border-color: rgba(var(--kart-isik), .55);
  box-shadow: 0 26px 60px rgba(0,0,0,.42), 0 0 40px rgba(var(--kart-isik), .30);
  background: linear-gradient(165deg, rgba(var(--kart-isik), .10), rgba(255,255,255,.015));
}
.biggie-card:active{ transform: translateY(-2px) scale(.995); }

.biggie-t{ font-size: 19px; font-weight: 650; color: var(--fg); letter-spacing: -.3px; }
.biggie-d{ font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); flex: 1; }
.biggie-go{
  margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent-strong);
  display: inline-flex; align-items: center; gap: 7px;
}
.biggie-go em{ font-style: normal; transition: transform var(--dur) var(--ease); }
.biggie-card:hover .biggie-go em{ transform: translateX(5px); }

.biggie-note{
  margin-top: var(--s-4); text-align: center;
  font-size: 13px; color: var(--fg-faint); max-width: 640px; margin-left:auto; margin-right:auto;
}

@media (max-width: 900px){
  .biggie-card{ flex: 1 1 100%; max-width: none; }
  .biggie{ padding: var(--s-7) var(--s-3); }
}
@media (prefers-reduced-motion: reduce){
  .biggie-card{ transition: none; }
  .biggie-card:hover{ transform: none; }
}

/* ===== Biggie kart sahneleri =====
   Her kart, üreteceği çıktının biçimini CANLI olarak gösteriyor: statik bir
   ikon "ne olduğunu" söyler, hareketli bir sahne "nasıl bir şey olduğunu"
   gösterir. Hepsi CSS — sayfada zaten bir WebGL sahnesi var, ikincisi gereksiz. */
.biggie-stage{
  position: relative; display block; width: 100%; height: 132px;
  border-radius: 12px; overflow: hidden; margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(160deg, rgba(123,79,255,.14), rgba(10,13,36,.6));
}
.biggie-stage{ display: block; }
.biggie-stage::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%);
  transform: translateX(-120%);
}
.biggie-card:hover .biggie-stage::after{ animation: bgSheen 1.1s var(--ease); }
@keyframes bgSheen{ to{ transform: translateX(120%);} }

/* Arayüz sahnesi: yan menü + metrik satırı + liste */
.bg-ui{ position:absolute; inset:14px; display:flex; gap:8px; }
.bg-ui-side{ width:26%; display:flex; flex-direction:column; gap:5px; padding-top:2px; }
.bg-ui-side i{ display:block; height:7px; border-radius:3px; background:rgba(255,255,255,.16); }
.bg-ui-side i:first-child{ background:var(--accent); opacity:.85; }
.bg-ui-main{ flex:1; display:flex; flex-direction:column; gap:7px; }
.bg-ui-row{ display:flex; gap:6px; }
.bg-ui-row i{ flex:1; height:26px; border-radius:5px;
  background:linear-gradient(180deg, rgba(123,79,255,.4), rgba(123,79,255,.12)); }
.bg-ui-list{ flex:1; display:flex; flex-direction:column; gap:5px; }
.bg-ui-list i{ height:9px; border-radius:3px; background:rgba(255,255,255,.1); }
.biggie-card:hover .bg-ui-row i{ animation: bgRise .7s var(--ease) both; }
.biggie-card:hover .bg-ui-row i:nth-child(2){ animation-delay:.07s; }
.biggie-card:hover .bg-ui-row i:nth-child(3){ animation-delay:.14s; }
@keyframes bgRise{ from{ transform:scaleY(.45); opacity:.5; } to{ transform:none; opacity:1; } }

/* Storyboard sahnesi: altı kare, sırayla yanıyor */
.bg-sb{ position:absolute; inset:14px; display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr); gap:6px; }
.bg-sb i{ display:block; border-radius:5px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.06); }
.biggie-card:hover .bg-sb i{ animation: bgFrame 1.5s var(--ease) infinite; }
.biggie-card:hover .bg-sb i:nth-child(2){ animation-delay:.12s; }
.biggie-card:hover .bg-sb i:nth-child(3){ animation-delay:.24s; }
.biggie-card:hover .bg-sb i:nth-child(4){ animation-delay:.36s; }
.biggie-card:hover .bg-sb i:nth-child(5){ animation-delay:.48s; }
.biggie-card:hover .bg-sb i:nth-child(6){ animation-delay:.60s; }
@keyframes bgFrame{
  0%,70%,100%{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.06); }
  20%{ background:rgba(123,79,255,.42); border-color:rgba(123,79,255,.6); }
}

/* Kampanya görseli sahnesi: gökyüzü + obje + tipografi çizgisi

   KİT DIŞI AMA BİLEREK — sıcak ton. Buradaki turuncular (güneş ve
   objenin üzerindeki sıcak kenar ışığı) marka rengi değil, tasvir:
   kart bir "altın saat" çekimini temsil ediyor. Güneşi mora
   boyamak resmi anlamsız kılardı. Kılavuz s.15 görsel dilde
   moru BAĞLAYICI unsur sayar, tek renk kaynağı değil. */
.bg-kv{ position:absolute; inset:14px; border-radius:8px; overflow:hidden; display:block;
  background:linear-gradient(180deg, #2C3670 0%, #141B3D 58%, #0A0D24 100%); }
.bg-kv-sky{ position:absolute; left:-10%; top:8%; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,150,.95), rgba(255,170,80,0) 68%);
  transition: transform .8s var(--ease); }
.bg-kv-obj{ position:absolute; left:50%; bottom:22%; width:34px; height:52px; margin-left:-17px;
  border-radius:5px 5px 3px 3px; background:linear-gradient(170deg,#141B3D,#0A0D24);
  box-shadow:0 10px 22px rgba(0,0,0,.45), inset -4px 0 10px rgba(255,190,120,.25); }
.bg-kv-tx{ position:absolute; left:14px; bottom:12px; width:44%; height:7px; border-radius:3px;
  background:rgba(255,255,255,.75); }
.bg-kv-tx::after{ content:""; position:absolute; left:0; top:12px; width:64%; height:4px;
  border-radius:2px; background:rgba(255,255,255,.32); }
.biggie-card:hover .bg-kv-sky{ transform: translate(38px,-6px); }

@media (prefers-reduced-motion: reduce){
  .biggie-card:hover .bg-sb i,
  .biggie-card:hover .bg-ui-row i,
  .biggie-card:hover .biggie-stage::after{ animation: none; }
  .biggie-card:hover .bg-kv-sky{ transform:none; }
}

/* Biggie başlığı tam bir cümle; diğer bölüm başlıkları 2-3 kelime.
   Aynı ölçüyle 4 satıra yayılıyordu — bu bölümde bir tık küçük ve daha geniş. */
.biggie .section-title{
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
}
.biggie-head{ max-width: 900px; }


/* Biggie kart sahneleri: CSS çizim yerine üretilmiş görsel.
   Çizimler bilgi veriyordu ama sitenin sinematik diline göre zayıf kalıyordu. */
.biggie-stage{ background: #0A0D24; }
.biggie-stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .75s var(--ease), filter .45s var(--ease);
  filter: saturate(1.05);
}
.biggie-card:hover .biggie-stage img{ transform: scale(1.07); filter: saturate(1.2) brightness(1.08); }
.biggie-stage .biggie-veil{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,13,36,.78) 0%, rgba(10,13,36,.12) 62%, transparent 100%);
}

/* 5 kart: 3 + 2 yerine esnek ızgara */





/* ===== Biggie: yatay kart şeridi (hizmetler bölümüyle aynı dil) =====
   Pin + scrub + coverflow. Kartlar merkeze yaklaştıkça dikleşip parlıyor,
   uzaklaştıkça Y ekseninde dönüp geri çekiliyor. */
.biggie-pin{
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: var(--s-7) 0 var(--s-6);
  perspective: 1600px;
}
.biggie-track{
  display: flex; gap: var(--s-3);
  padding: 0 max(var(--s-3), calc((100vw - var(--container)) / 2 + var(--s-3)));
  width: max-content;
  will-change: transform;
  transform-style: preserve-3d;
}
.biggie-card{
  flex: none;
  width: min(400px, 78vw);
  transform-style: preserve-3d; backface-visibility: hidden;
}
.biggie-note{ margin-top: var(--s-5); }

@media (max-width: 900px){
  .biggie-pin{ min-height: auto; padding: var(--s-7) 0 var(--s-6); }
  .biggie-card{ width: min(340px, 82vw); }
}



/* ===== Biggie kartları: tür kimliği + 3D derinlik (v17) =====
   Kartlar üretecekleri çıktının rengini taşıyor; hover'da mouse'u izleyen
   hafif eğim + o türün ışığı devreye giriyor. Sohbetteki sunum sahnesiyle
   aynı renk dili — kart ve çıktı birbirini tanısın. */
.biggie-card[data-biggie="arayuz"]     { --kart-isik: 155,122,255; }
.biggie-card[data-biggie="storyboard"] { --kart-isik: 195,176,255; }
/* "gorsel" MOR 900'DEN ALINDI. Mor 900 kitte bir ZEMİN tonu; ışık
   kaynağı olarak kullanılınca kart sönüyordu. Kenar parlaklığı
   ölçüldü: 15 — kardeşleri 44.3 / 66.9 / 107.9, yani 3 ila 7 kat
   daha parlak. Yan yana dizilince bu kart bozuk/pasif görünüyordu.
   Mor 700 aynı ailede ve ışık verebilen en koyu ton. */
.biggie-card[data-biggie="gorsel"]     { --kart-isik: 123,79,255; }
.biggie-card[data-biggie="urun3d"]     { --kart-isik: 123,79,255; }
.biggie-card[data-biggie="yerlesim"]   { --kart-isik: 155,122,255; }

/* DİKKAT: transform geçişi YOK. Kartlar coverflow ile her karede GSAP
   tarafından döndürülüyor; buraya transition koymak scrub u titretir. */
.biggie-card{
  position: relative;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Türün ışığı: kartın üstünden sızan hale */
.biggie-card::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-30%; height:70%;
  border-radius: 50%; pointer-events:none; z-index:0; opacity:0;
  background: radial-gradient(50% 60% at 50% 50%, rgba(var(--kart-isik,123,79,255),.32), transparent 70%);
  filter: blur(14px); transition: opacity .35s var(--ease);
}
.biggie-card:hover::before{ opacity:1; }
.biggie-card > *{ position: relative; z-index: 1; }
.biggie-card:hover{
  border-color: rgba(var(--kart-isik,123,79,255),.45);
  box-shadow: 0 26px 60px rgba(0,0,0,.42), 0 0 34px rgba(var(--kart-isik,123,79,255),.22);
}
.biggie-stage{
  border-color: rgba(var(--kart-isik,123,79,255),.18);
  box-shadow: inset 0 0 24px rgba(var(--kart-isik,123,79,255),.1);
}
.biggie-card:hover .biggie-stage{ border-color: rgba(var(--kart-isik,123,79,255),.42); }
/* Görselin üstüne türün rengiyle ince bir vurgu şeridi */
.biggie-stage::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(var(--kart-isik,123,79,255),.9), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .45s var(--ease);
}
.biggie-card:hover .biggie-stage::before{ transform: scaleX(1); }
.biggie-go{ color: rgb(var(--kart-isik,123,79,255)); }

@media (prefers-reduced-motion: reduce){
  .biggie-card::before, .biggie-stage::before{ transition: none; }
}

/* ===== Sahnedeki kart (v20) =====
   Merkeze gelen kart kendi tür ışığını yakar. Geçişler transform'a
   DOKUNMUYOR — kartın transform'unu her karede GSAP yazıyor. */
.biggie-card.sahnede{
  border-color: rgba(var(--kart-isik,123,79,255),.5);
  box-shadow: 0 34px 76px rgba(0,0,0,.5), 0 0 44px rgba(var(--kart-isik,123,79,255),.28);
}
.biggie-card.sahnede::before{ opacity: 1; }
.biggie-card.sahnede .biggie-stage{ border-color: rgba(var(--kart-isik,123,79,255),.5); }
.biggie-card.sahnede .biggie-stage::before{ transform: scaleX(1); }
.biggie-card.sahnede .biggie-t{ color: #fff; }

/* Görsel paralaksı: JS translate3d yazıyor, biz sadece yumuşatıyoruz */
.biggie-stage img{
  transition: filter var(--dur) var(--ease);
  will-change: transform;
}
.biggie-card.sahnede .biggie-stage img{ filter: saturate(1.16) brightness(1.06); }

/* Zemin yansıması: kart bir sahnede duruyormuş hissi */
.biggie-card::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-16px; height:18px;
  pointer-events:none; z-index:0; opacity:0;
  background: radial-gradient(50% 100% at 50% 0%, rgba(var(--kart-isik,123,79,255),.4), transparent 72%);
  filter: blur(9px);
  transition: opacity .4s var(--ease);
}
.biggie-card.sahnede::after{ opacity:.85; }

@media (prefers-reduced-motion: reduce){
  .biggie-stage img{ transform: none !important; }
  .biggie-card::after{ transition: none; }
}


/* ===== BIGGIE kartı: poster yapısı (v21) =====
   Eski hâli "küçük görsel + altında iki satır yazı"ydı; bir katalog satırı
   gibi duruyordu. Artık tam kanamalı bir poster: görsel kartın TAMAMI,
   metin görselin üstünde perdeyle okunuyor. Sinema afişi mantığı. */
.biggie-card{
  position: relative; overflow: hidden;
  display: block; padding: 0;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  background: #0A0D24;
}
.biggie-card > *{ position: absolute; }

.bk-gorsel{ inset: 0; display: block; overflow: hidden; }
.bk-gorsel img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
  transition: filter var(--dur) var(--ease);
  filter: saturate(.92) brightness(.86);
}
.biggie-card.sahnede .bk-gorsel img{ filter: saturate(1.12) brightness(1.02); }

/* Perde: metnin okunurluğu görselden bağımsız garanti altında olmalı */
.bk-perde{
  inset: 0; display: block; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,36,.5) 0%, rgba(10,13,36,0) 34%, rgba(10,13,36,.82) 74%, rgba(10,13,36,.96) 100%),
    radial-gradient(120% 70% at 50% 110%, rgba(var(--kart-isik,123,79,255),.28), transparent 68%);
}

/* Sıra numarası: editoryal his, tür rengiyle */
.bk-no{
  top: 16px; left: 18px; z-index: 2;
  /* Sayıda geniş harf aralığı "0 1" gibi iki ayrı rakam okunuyordu.
     Negatif sağ boşluk, aralığın son karakterden sonra bıraktığı payı alır. */
  font: 700 12.5px/1 var(--font); letter-spacing: .6px; margin-right: -.6px;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--kart-isik,123,79,255));
  opacity: .85;
}
.bk-no::after{
  content:""; position:absolute; left: 0; top: 20px; width: 22px; height: 1px;
  background: rgb(var(--kart-isik,123,79,255)); opacity: .5;
  transition: width .45s var(--ease);
}
.biggie-card.sahnede .bk-no::after{ width: 46px; }

/* Metin bloğu: alta yaslı, hover/sahnede yukarı açılır */
.bk-metin{
  left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px 20px 22px; text-align: left;
}
.bk-baslik{
  font: 650 20px/1.25 var(--font); letter-spacing: -.4px; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
/* Açıklama ve CTA HER kartta görünür. Önce yalnızca sahnedeki kartta
   açılıyordu; ziyaretçi diğer kartların ne yaptığını göremiyordu.
   Sahnedeki kartın farkı artık renk ve parlaklıkta, bilgi gizlemede değil. */
.bk-aciklama{
  font: 400 13px/1.5 var(--font); color: rgba(255,255,255,.6);
  transition: color .35s var(--ease);
}
.biggie-card.sahnede .bk-aciklama{ color: rgba(255,255,255,.86); }

/* METİN RENGİ KART RENGİNDEN AYRILDI.
   Önce "Deneyin" bağlantısı da --kart-isik'i kullanıyordu, yani her
   kartın kendi moruna boyanıyordu. Ölçüm bunu çökertti: bağlantı
   dinlenirken opacity .72 ile duruyor ve Lacivert 900 üzerinde
     Mor 900 -> 1.37   Mor 700 -> 2.63   Mor 500 -> 3.66
   veriyordu; yani beş kartın ÜÇÜNDE eylem çağrısı AA eşiğinin
   (4.5) altındaydı, "gorsel" kartında pratikte görünmüyordu.
   Sadece Mor 300 geçiyor: .72'de 5.62, tam opakta 10.01.

   Kart kimliği kaybolmuyor — --kart-isik kenarlıkta, ışımada ve
   çerçevede duruyor; oralar dekoratif, kontrast kuralı metne ait. */
.bk-eylem{
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font: 650 13px/1 var(--font);
  color: var(--mor-300);
  opacity: .72;
  transition: opacity .35s var(--ease);
}
.bk-eylem em{ font-style: normal; transition: transform var(--dur) var(--ease); }
.biggie-card.sahnede .bk-eylem,
.biggie-card:hover .bk-eylem{ opacity: 1; }
.biggie-card:hover .bk-eylem em{ transform: translateX(5px); }

/* İç çerçeve: cam kenar hissi, sahnede tür rengine döner */
.bk-cerceve{
  inset: 0; z-index: 3; pointer-events: none; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.biggie-card.sahnede .bk-cerceve{
  border-color: rgba(var(--kart-isik,123,79,255),.55);
  box-shadow: inset 0 0 34px rgba(var(--kart-isik,123,79,255),.18), inset 0 1px 0 rgba(255,255,255,.14);
}

/* Poster oranı için kart ölçüsü */
.biggie-track .biggie-card{ width: min(310px, 76vw); }

@media (max-width: 900px){
  .biggie-card{ aspect-ratio: 4 / 5; }
  .bk-eylem{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .bk-aciklama, .bk-eylem, .bk-no::after, .bk-cerceve{ transition: none; }
}

/* ===== Biggie bölümü: tek ekrana sığma (v25) =====
   Bölüm PİNLİ — başlık, orb, kartlar ve alt not aynı anda görünmek zorunda.
   Sabit kart yüksekliği 900px'lik ekranda toplamı 965px'e çıkarıyor ve alt
   not ekranın DIŞINDA kalıyordu (ölçüldü). Kart yüksekliği artık görünür
   alana bağlı; genişlik aspect-ratio'dan türüyor. */
.biggie-track .biggie-card{
  height: clamp(250px, 38vh, 400px);
  width: auto;
  aspect-ratio: 3 / 4;
}
/* Pinli bölümde dikey nefes payını sıkıyoruz */
/* Pin kendi nav payını içinde tutuyor; section üst padding pin kilidini 54px
   aşağı itip alt notu ekran dışına taşırıyordu. */
#biggie{ padding-top: 0; padding-bottom: clamp(24px, 4vh, 56px); }
/* Bu boşluk docked Biggie butonuna AİT: orb başlıkla kartların arasına
   oturuyor. Fazla sıkıştırınca buton alt başlık yazısının üstüne biniyordu. */
.biggie-head{ margin-bottom: clamp(76px, 10vh, 118px); }
.biggie-note{ margin-top: clamp(14px, 2.4vh, 34px); }

/* Kısa ekranlarda başlık da küçülsün ki kartlara yer kalsın */
@media (max-height: 820px){
  .biggie-head .section-title{ font-size: clamp(26px, 3.4vh, 40px); }
  .biggie-head .section-lead{ font-size: 14px; }
}


/* ===== Hizmet kartları: editoryal teknik levha (v26) =====
   Biggie kartları POSTER dilinde (görsel önde, metin üstünde). Hizmetler
   metin ağırlıklı olduğu için aynı kalıbı kopyalamak yanlış olurdu; burada
   dil "teknik levha": kimlik rengi, çizilen vurgu çizgisi, ışıyan indeks.
   Aynı KALİTE, farklı İFADE — her bölüm birbirinin kopyası olmasın. */
.svc-card:nth-child(1){ --svc-isik: 123,79,255; }
.svc-card:nth-child(2){ --svc-isik: 155,122,255; }
.svc-card:nth-child(3){ --svc-isik: 195,176,255; }
.svc-card:nth-child(4){ --svc-isik: 61,31,143; }
.svc-card:nth-child(5){ --svc-isik: 123,79,255; }
.svc-card:nth-child(6){ --svc-isik: 155,122,255; }
.svc-card:nth-child(7){ --svc-isik: 195,176,255; }

/* Üst kenarda çizilen vurgu çizgisi — sahnedeyken tam boy */
.svc-card{ isolation: isolate; }
.svc-card .svc-cizgi{
  position: absolute; top: 0; left: 0; height: 2px; z-index: 3;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, rgb(var(--svc-isik,123,79,255)), transparent);
  transition: transform .6s var(--ease);
}
.svc-card.sahnede .svc-cizgi{ transform: scaleX(1); }

/* İndeks numarası kimlik rengini alır ve sahnedeyken ışır */
.svc-num{
  -webkit-text-stroke: 1.5px rgba(var(--svc-isik,125,164,255), .55);
  transition: -webkit-text-stroke-color .4s var(--ease), text-shadow .4s var(--ease);
}
.svc-card.sahnede .svc-num{
  -webkit-text-stroke-color: rgb(var(--svc-isik,125,164,255));
  text-shadow: 0 0 30px rgba(var(--svc-isik,123,79,255), .45);
}

/* Sahnedeki kart: kimlik rengiyle çerçeve ve alttan aura */
.svc-card.sahnede{
  border-color: rgba(var(--svc-isik,123,79,255), .5);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 42px rgba(var(--svc-isik,123,79,255), .2);
}
.svc-card.sahnede::after{
  background:
    linear-gradient(180deg, rgba(10,13,36,.28) 0%, rgba(10,13,36,.58) 40%, rgba(10,13,36,.88) 72%, rgba(10,13,36,.96) 100%),
    radial-gradient(90% 55% at 50% 108%, rgba(var(--svc-isik,123,79,255), .3), transparent 70%);
}
.svc-card.sahnede::before{ opacity: .72; }

/* Etiketler: dolu blok yerine ana hat; sahnedeyken kimlik rengine döner */
.svc-card ul li{
  border-color: rgba(var(--svc-isik,123,79,255), .26);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.svc-card.sahnede ul li{
  border-color: rgba(var(--svc-isik,123,79,255), .55);
  color: rgba(255,255,255,.92);
}

@media (prefers-reduced-motion: reduce){
  .svc-card .svc-cizgi, .svc-num, .svc-card ul li{ transition: none; }
}


/* ===== Portföy kartları: galeri künyesi (v27) =====
   ÜÇÜNCÜ dil. Biggie POSTER (görsel önde, metin üstünde), hizmetler TEKNİK
   LEVHA (kimlik rengi + çizilen çizgi), portföy ise GALERİ KÜNYESİ: iş
   duvardaki eser, altındaki künye onu tanımlar. Portföyün hareket dili
   (3D deste, soyularak geçen kartlar) zaten kendine ait — dokunmuyoruz.
   Her bölüm aynı kaliteyi paylaşıyor, aynı görüntüyü değil. */
.wg-card:nth-child(1){ --pf-isik: 123,79,255; }
.wg-card:nth-child(2){ --pf-isik: 155,122,255; }
.wg-card:nth-child(3){ --pf-isik: 195,176,255; }
.wg-card:nth-child(4){ --pf-isik: 61,31,143; }

/* Künye bloğu: sol tarafta iş adı, altında yıl ve disiplin */
.wg-kunye{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wg-cat{ position: relative; padding-left: 14px; }
/* Eserin kimlik rengini taşıyan ince dikey işaret */
.wg-cat::before{
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px;
  border-radius: 2px; background: rgb(var(--pf-isik, 123,79,255));
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease);
}
.wg-card.in .wg-cat::before{ transform: scaleY(1); }


/* Etiketler: dolu haptan ince ana hatta — künye estetiği */
.wg-tags li{
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  border-color: rgba(var(--pf-isik, 123,79,255), .38) !important;
}

/* Künye şeridi: videodan ayrılan ince bir zemin, üstünde saç teli çizgi */
.wg-info{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.16));
}
.wg-info::before{
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4); top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(var(--pf-isik, 123,79,255), .55), rgba(255,255,255,.05) 60%, transparent);
}
/* Öndeki kart kimlik rengiyle nefes alıyor */
.wg-card.in{ box-shadow: 0 34px 80px rgba(0,0,0,.5), 0 0 46px rgba(var(--pf-isik, 123,79,255), .16); }

@media (prefers-reduced-motion: reduce){
  .wg-cat::before{ transition: none; transform: scaleY(1); }
}

/* ===== Biggie bölümü: taşma artık YAPISAL OLARAK imkansız (v28) =====
   Önceki hâli "tam sığacak kadar" ayarlanmıştı: 900px'de sadece 1px, 680px'de
   -4px payla. Bu kırılgan — tarayıcı çubuğu, zoom ya da font farkı taşırıyordu.
   Çözüm ölçüyü küçültmek değil, YAPIYI değiştirmek: pin sabit yükseklikte,
   şerit kalan alanı alıyor, kart da şeridin yüksekliğini. Not her zaman içeride. */
.biggie-pin{
  height: 100dvh; max-height: 100dvh; min-height: 0;
  /* Üst menü position:fixed ve 71px; pin viewport tepesinden başladığı için
     başlık onun ALTINDA kalıyordu. Menü payı üst dolguya dahil. */
  padding: calc(71px + clamp(8px, 1.4vh, 22px)) 0 clamp(10px, 1.8vh, 26px);
  gap: clamp(6px, 1.2vh, 16px);
}
.biggie-head{ flex: 0 0 auto; margin-bottom: 0; }
/* Şerit kalan alanı alır; min-height:0 olmadan flex çocuk küçülmez */
/* flex-basis SIFIR olmalı: "auto" olunca şerit içeriğine göre büyüyor ve
   kalan alanı ölçemiyor; kart da 100% yi çözemeyip sabit kalıyordu.
   0% ile şeridin yüksekliği = artan alan, kart da onu birebir alıyor. */
.biggie-pin > .biggie-track,
.biggie-pin .biggie-track{
  flex: 1 1 0%; min-height: 0;
  align-items: center;
}
.biggie-note{ flex: 0 0 auto; margin-top: 0; }

/* Kart artık ekran yüksekliğine değil, ŞERİDİN yüksekliğine bağlı */
.biggie-track .biggie-card{
  height: 100%; max-height: 400px;
  width: auto;
  aspect-ratio: 3 / 4;
}

/* Docked orb için ayrılan boşluk da esnek */
/* Docked orb bu boşluğa oturur. Orb üstte YÜZDÜĞÜ için tam yüksekliği kadar
   yer ayırmaya gerek yok; yarısı yeter, gerisini gap karşılıyor. */
/* Orb 69px yüksekliğinde ve bu boşluğa oturuyor; 42px verince başlığın
   ÜSTÜNE biniyordu. Alt sınır orb yüksekliği + nefes payı olmalı. */
.biggie-head{ padding-bottom: clamp(80px, 9vh, 108px); }

/* Alçak ekranlarda tipografi küçülsün ki karta yer kalsın */
@media (max-height: 860px){
  .biggie-head .section-title{ font-size: clamp(24px, 3.2vh, 38px); line-height: 1.15; }
  .biggie-head .section-lead{ font-size: 13.5px; line-height: 1.5; }
  .biggie-note{ font-size: 12px; }
}
@media (max-height: 700px){
  .biggie-head .section-lead{ display: none; }  /* önce ikincil metin gider */
}


/* ---- Site geneli kart neonu: her kart KENDİ renginde hafif yanar ----
   Biggie kartlarındaki sistemin aynısı; transform bilerek yok (coverflow
   transformları JS'ten geliyor, hover transformu onlarla çakışıyor). */
.svc-card, .wg-card{ --kart-isik: 195,176,255; }
.svc-card:nth-of-type(2){ --kart-isik: 61,31,143; }
.svc-card:nth-of-type(3){ --kart-isik: 123,79,255; }
.svc-card:nth-of-type(4){ --kart-isik: 155,122,255; }
.svc-card:nth-of-type(5){ --kart-isik: 195,176,255; }
.svc-card:nth-of-type(6){ --kart-isik: 61,31,143; }
.svc-card:nth-of-type(7){ --kart-isik: 123,79,255; }
.wg-card:nth-of-type(2){ --kart-isik: 155,122,255; }
.wg-card:nth-of-type(3){ --kart-isik: 195,176,255; }
.wg-card:nth-of-type(4){ --kart-isik: 61,31,143; }
.svc-card:hover, .wg-card:hover{
  border-color: rgba(var(--kart-isik), .55);
  box-shadow: 0 26px 60px rgba(0,0,0,.42), 0 0 40px rgba(var(--kart-isik), .28);
}
@media (hover: none){
  .svc-card:hover, .wg-card:hover{ box-shadow: none; }
}


/* ---- Yeni UI/UX dokunuşu: açılış perdesi (Superconscious hissi, BIG kimliği) ----
   Markup ve zamanlama ESKİ loader'ın aynısı; yalnız görsel katman eklendi. */
.loader::before{
  content:""; position:absolute; width:78vmin; height:78vmin; border-radius:9999px;
  background:radial-gradient(95% 80% at 50% 28%, #E4E1EF 0%, #9B7AFF 38%, #3D1F8F 68%, #0A0D24 100%);
  filter:blur(80px); opacity:.55; pointer-events:none;
}
.loader-mark{ position:relative; z-index:1; }
@keyframes loaderOrb{ to{ transform:rotate(360deg); } }
.loader.done::before{ opacity:0; transition:opacity .6s; }


/* ---- Yeni-UX: hero mesh shader (imleç reaktif, marka mavisi) ---- */
#heroMesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.8;pointer-events:none}
.hero-inner{position:relative;z-index:2}
.hero-hint{z-index:2} /* absolute kalır: altta ortada (relative yapmak sağa savuruyordu) */

/* ---- Yeni-UX: hap-nav görünümü (davranış ve yerleşim ESKİ) ---- */
.nav-links{gap:6px}
.nav-links a:not(.nav-cta){
  background:#fff;color:#1a1a1a;border-radius:8px;padding:9px 16px;
  font-weight:500;transition:opacity .3s ease,transform .3s ease;
}
.nav-links a:not(.nav-cta):hover{opacity:.6;color:#1a1a1a}
.nav-cta-soft{background:#F6F5FA!important;color:#1a1a1a!important;border:0!important;border-radius:8px!important}
/* KİT MORU (2026-09-11). Buraya #0d0d0d / #1c1c1c yazılmıştı: ikisi de
   kitte olmayan nötr gri. Bu blok dosyada satır 320'deki mor kuralından
   SONRA geldiği ve !important taşıdığı için onu eziyordu — yani ana
   eylem düğmesi, sayfanın en önemli butonu, marka renginin dışındaydı.
   Sabit kod yerine jeton kullanıyoruz ki palet değişirse burası da
   kendiliğinden takip etsin. Yuvarlatma ve kenarlık sıfırlaması
   hap-nav görünümüne ait, onlara dokunulmadı. */
.nav-cta-primary{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:8px!important}
.nav-cta-primary:hover{background:var(--accent-strong)!important}

@keyframes seritKay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Yeni-UX: harf harf başlık açılışı ---- */
.hrf{display:inline-block;vertical-align:bottom;
  background:linear-gradient(180deg,#FFF 30%,rgba(255,255,255,0.55) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Bölünen başlıkta ebeveyn boyamayı bırakır; aksi halde çift boyama blok artığı yapıyor */
.harfli{background:none!important;-webkit-text-fill-color:currentColor}


/* ---- Açılış: etkileşimli 3D orb ---- */
#loaderOrbKutu{width:40vmin;height:40vmin;margin-bottom:-6vmin}
#loaderOrbKutu canvas{width:100%;height:100%}

/* ---- Evren geçişi (universe değişimi — v2) ---- */
.evren{position:relative;height:380vh;background:#000}
.evren-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1200px}
.evren-nokta{position:absolute;left:50%;top:50%;width:6vmin;height:6vmin;border-radius:9999px;
  transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle at 38% 34%, #C3B0FF, #7B4FFF 58%, #3D1F8F 100%);
  box-shadow:0 0 8vmin rgba(123,79,255,.65)}
.evren-yildizlar{position:absolute;inset:-12%;opacity:0}
.evren-yildizlar i{position:absolute;border-radius:9999px;background:#F6F5FA;display:block}
.evren-kart{position:absolute;left:50%;top:50%;border-radius:2vmin;opacity:0;overflow:hidden;
  border:1px solid rgba(155,122,255,.3);box-shadow:0 34px 100px rgba(0,0,0,.65),0 0 42px rgba(123,79,255,.14)}
.evren-kart.dikey{width:24vmin;height:34vmin}
.evren-kart.yatay{width:36vmin;height:22.5vmin}
.evren-kart i{position:absolute;inset:0;display:block;background-size:cover;background-position:center;filter:brightness(1.13) saturate(1.05)}
.evren-kart::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 58%,rgba(10,13,36,.88));pointer-events:none}
.evren-sozler{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3}
.evren-soz{position:absolute;margin:0;text-align:center;opacity:0;white-space:nowrap;text-shadow:0 4px 34px rgba(0,0,0,.9);
  font-size:4.6vmin;font-weight:800;letter-spacing:-0.02em;
  background:linear-gradient(180deg,#FFF 30%,rgba(255,255,255,0.55) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.evren-soz em{font-style:normal;background:linear-gradient(180deg,#C3B0FF,#7B4FFF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}


/* ---- Neler yapıyoruz: orbit sistemi (merkez orb + yörüngede dönen kartlar) ---- */
/* orbit modunda başlık üstte kalır (pin normalde dikey ortalıyor, yörüngeye düşüyordu) */
.services-pin.orbitli{justify-content:flex-start}
.services-pin.orbitli .services-head{margin-bottom:0;position:relative;z-index:2}
.svc-track.uzay{display:block!important;position:absolute!important;inset:0;width:auto!important;
  perspective:1500px;transform:none!important}
.svc-track.uzay .svc-card{position:absolute;left:50%;top:60%;width:min(22rem,26vw);margin:0;
  padding:20px 22px;transform:translate(-50%,-50%);will-change:transform,opacity}
/* orbit modunda kartlar kompakt: yörüngede okunur, sahnedekinde bile taşmaz */
.svc-track.uzay .svc-card h3{font-size:1.15rem}
.svc-track.uzay .svc-card p{font-size:13px;line-height:1.55;display:-webkit-box;
  -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.svc-track.uzay .svc-card li{font-size:11px}
/* yörünge dekoru: elips halkalar, nefes alan mavi orb (amblem), süzülen uydu ışıkları
   (z-index 0: track dekordan sonra geldiği için kartlar orbun ÜZERİNDE kalır) */
.svc-dekor{position:absolute;left:50%;top:60%;width:0;height:0;pointer-events:none;z-index:0}
.svc-halka{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(155,122,255,.16);box-shadow:inset 0 0 60px rgba(123,79,255,.05)}
.svc-halka.h1{width:68vw;height:26vh}
.svc-halka.h2{width:50vw;height:18vh;border-color:rgba(155,122,255,.09)}
.svc-orb{position:absolute;left:50%;top:50%;translate:-50% -50%;width:9vmin;height:9vmin;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#E4E1EF 0%,#7B4FFF 38%,#2C3670 78%,#0A0D24 100%);
  box-shadow:0 0 60px rgba(123,79,255,.5),0 0 150px rgba(123,79,255,.24);
  animation:orbNefes 4.5s ease-in-out infinite}
@keyframes orbNefes{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.svc-uydu{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#C3B0FF;
  box-shadow:0 0 12px #7B4FFF,0 0 30px rgba(123,79,255,.6)}
.svc-uydu.u2{width:5px;height:5px;opacity:.7}

/* ---- Yaptıklarımızdan: dönen karusel → açılıp yan yana kavisli sıra ---- */
.wg-track.halka{perspective:1500px}
.wg-track.halka{position:relative}
.wg-track.halka .wg-card{position:absolute;left:50%;top:50%;width:min(34rem,42vw);height:50vh;
  margin:0;transform-origin:50% 50%;translate:-50% -50%;will-change:transform,opacity;
  display:flex;flex-direction:column;border-radius:20px;
  border:1px solid rgba(155,122,255,.22);
  background:linear-gradient(165deg,rgba(20,27,61,.92),rgba(10,13,36,.97))}
/* görsel esner, künye sabit: her kart aynı ölçekte, taşma/kayma olmaz */
.wg-track.halka .wg-visual{flex:1;min-height:0;aspect-ratio:auto}
.wg-track.halka .wg-info{flex:none}
/* premium katmanlar: iç cam çerçeve + tepe ışığı */
.wg-track.halka .wg-card::before{content:"";position:absolute;inset:10px;z-index:2;
  border:1px solid rgba(155,122,255,.13);border-radius:12px;pointer-events:none}
.wg-track.halka .wg-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 55% at 50% -8%,rgba(123,79,255,.16),transparent 60%)}
/* aktif kart: neon çerçeve + parlama süpürmesi */
.wg-track.halka .wg-card.wg-active{border-color:rgba(123,79,255,.65);
  box-shadow:0 50px 110px -30px rgba(10,13,36,.95),0 0 70px -8px rgba(123,79,255,.4)}
.wg-track.halka .wg-card.wg-active::before{border-color:rgba(155,122,255,.3)}
.wg-parla{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,rgba(195,176,255,.15) 48%,transparent 62%)}
.wg-track.halka .wg-card.wg-active .wg-parla{animation:wgParla 3s ease-in-out infinite}
@keyframes wgParla{0%{opacity:0;transform:translateX(-55%)}16%{opacity:1}
  44%{opacity:0;transform:translateX(55%)}100%{opacity:0;transform:translateX(55%)}}




/* ============================================================
   BIGGIE 3.0 DUYURUSU
   Kutu-içine-yazı yerine sinematik bir teaser: dev görselin
   üzerinde duyuru, altında 3.0'ın NE ÇIKARACAĞINI gerçek
   görsellerle anlatan üç kart. Kartlar sitedeki --kart-isik
   dilini kullanıyor ki Biggie şeridiyle aynı aileden dursun.
   ============================================================ */
/* Sürüm rozeti. inline-block + baseline hizası rozeti hem aşağı kaydırıyor
   hem de kicker'ın .16em harf aralığı kelimeyle rozet arasında fazladan
   boşluk bırakıyordu — "ayrık ve yamuk" görünen buydu. Flex satırı ikisini
   de çözüyor: dikey merkez ve tek, kontrollü boşluk. */
.kicker-rozetli{ display:inline-flex; align-items:center; gap:9px; }
.kicker-rozetli .surum{
  padding:3px 9px 3px 10px; border-radius:999px;
  font-size:.85em; font-weight:700; letter-spacing:.02em; line-height:1.35;
  color:#F6F5FA;
  background:rgba(123,79,255,.18); border:1px solid rgba(155,122,255,.42);
}

/* overflow:hidden şart: aşağıdaki hale .b3-ic'in yanlarından taşıyor ve
   dar ekranda sayfaya yatay kaydırma açıyordu. Masaüstünde hale zaten
   bölümün içinde kaldığı için görünüm değişmiyor. */
.b3{ position:relative; overflow:hidden;
  padding:clamp(72px,10vh,132px) 0 clamp(64px,9vh,116px); }
.b3-ic{ max-width:var(--container); margin:0 auto; padding:0 var(--s-3); }

/* Sahnenin ARKASINDA duran ışık. Kart düz koyu bir dikdörtgen olduğu için
   sayfadan kopuk duruyordu; zemine gömülü bu hale kartı bir "sahne"ye
   oturtuyor. Kartın dışında olduğu için overflow:hidden onu kesmiyor. */
.b3-ic{ position:relative; }
.b3-ic::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-12% -6% -18%;
  background:
    radial-gradient(52% 62% at 74% 42%, rgba(123,79,255,.30), transparent 70%),
    radial-gradient(46% 54% at 16% 74%, rgba(61,31,143,.16), transparent 72%);
  filter:blur(6px);
}

/* ---- teaser sahnesi ---- */
/* ÖNİZLEME KALDIRILDI (2026-09-11): sağdaki telefon sütunu gitti, geriye
   yalnız metin kaldı. İki sütunluk ızgara tek sütuna indi ve yükseklik
   içeriğe bırakıldı — eski min-height metin altında büyük bir boşluk
   üretiyordu, çünkü o yükseklik telefon çerçevesine göre ölçülmüştü.
   place-items:center metni hem yatayda hem dikeyde ortalıyor. */
.b3-sahne{
  position:relative; isolation:isolate;
  border-radius:26px; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center;
  padding:clamp(40px,7vw,88px) clamp(20px,5vw,64px);
  /* Taban DÜZ RENK olmak zorunda: metin sütununun ışığı da, görselin perdesi
     de tam bu renge iniyor; sütun sınırında dikiş görünmemesinin tek güvenli
     yolu bu. Derinlik bu yüzden zeminden değil, üstteki katmanlardan geliyor. */
  background:#0A0D24;
  box-shadow:
    0 60px 120px -46px rgba(0,0,0,.92),
    0 0 90px -40px rgba(123,79,255,.55);
}
/* Gradyan kenarlık: düz 1px çizgi yerine üstte parlayıp altta sönen bir
   çerçeve. mask ile yalnızca kenar boyanıyor, iç kısım boş kalıyor. */
.b3-sahne::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:linear-gradient(155deg,
    rgba(195,176,255,.62) 0%, rgba(155,122,255,.26) 26%,
    rgba(155,122,255,.10) 58%, rgba(155,122,255,.30) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* Üst kenarda ince bir ışık çizgisi — cam yüzey hissi */
.b3-sahne::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:b3Tepe 7s ease-in-out infinite;
}
@keyframes b3Tepe{ 0%,100%{ opacity:.35 } 50%{ opacity:.9 } }
.b3-gorselalan{ position:relative; overflow:hidden; display:grid; place-items:center; }

/* ============================================================
   BIGGIE 3.0 ÖNİZLEMESİ — video değil, işaretleme
   ------------------------------------------------------------
   Burada 1.7 MB'lık bir mp4 vardı ve içindeki uygulama ESKİ mavi
   palete göre üretilmişti. Videoyu sonradan boyamak rengi kite
   getiriyordu ama tasarım eski kalıyordu; ayrıca palet her
   değiştiğinde videoyu yeniden üretmek gerekiyordu.

   Ekranlar artık doğrudan kit jetonlarıyla çiziliyor: renk
   değişirse tek değişken değişiyor, sayfadan 2.8 MB düşüyor ve
   çıktı her çözünürlükte net kalıyor.

   RENK KAYNAĞI TEK: aşağıdaki her mor --mor-* jetonlarından
   geliyor, hiçbir yerde çıplak hex yok.
   ============================================================ */
.b3-onizleme{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:clamp(18px,3vw,30px) 0;
  width:100%;
}

/* ---- telefon gövdesi ---- */
.b3-tel{
  position:relative;
  width:clamp(208px,20vw,246px); aspect-ratio:9/19.2;
  border-radius:clamp(26px,2.6vw,34px);
  padding:6px;
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(0,0,0,.4));
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.9),
    0 0 60px -20px rgba(123,79,255,.45),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.b3-tel-ada{
  position:absolute; z-index:4; top:12px; left:50%; transform:translateX(-50%);
  width:34%; height:13px; border-radius:999px; background:#05070F;
}
.b3-ekran{
  position:relative; height:100%; overflow:hidden;
  border-radius:clamp(21px,2.1vw,28px);
  background:linear-gradient(178deg, var(--lacivert-700), var(--lacivert-900) 58%);
  display:flex; flex-direction:column;
  font-size:clamp(6.4px,.63vw,7.6px);          /* tüm ekran bu birime bağlı */
}

/* ---- durum çubuğu ---- */
.b3-durum{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:2.6em 1.9em .5em; font-size:1.15em; font-weight:600;
  color:var(--fg); letter-spacing:.02em;
}
.b3-durum-sag{ display:flex; align-items:flex-end; gap:.28em; }
.b3-durum-sag i{ width:.34em; background:var(--fg); border-radius:.1em; }
.b3-durum-sag i:nth-child(1){ height:.5em } .b3-durum-sag i:nth-child(2){ height:.75em }
.b3-durum-sag i:nth-child(3){ height:1em }
.b3-durum-sag b{ width:1.5em; height:.8em; border-radius:.22em; background:var(--fg); margin-left:.3em; }

/* ---- uygulama başlığı ---- */
.b3-ust{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:.6em 1.9em 1em;
}
.b3-ust-sol{ display:flex; align-items:center; gap:.7em; font-size:1.75em; font-weight:800; color:var(--fg); }
.b3-orb{
  width:1.05em; height:1.05em; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, var(--mor-300), var(--mor-700) 62%, var(--mor-900));
  box-shadow:0 0 .6em var(--accent-glow);
}
.b3-surum{
  font-size:1.2em; font-weight:700; color:var(--mor-300);
  padding:.34em 1em; border-radius:999px;
  background:rgba(123,79,255,.20); border:1px solid rgba(155,122,255,.42);
}

/* ---- sayfa yığını: hepsi üst üste, biri görünür ---- */
.b3-sayfalar{ position:relative; flex:1; min-height:0; }
.b3-sayfa{
  position:absolute; inset:0; padding:0 1.9em;
  display:flex; flex-direction:column; gap:.95em;
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none;
}
.b3-sayfa.acik{ opacity:1; transform:none; }

/* ---- ortak parçalar ---- */
.b3-kicker{
  margin:0; font-family:var(--font-mono); font-size:1.05em; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint);
}
.b3-h{ margin:0; font-size:2.1em; font-weight:800; color:var(--fg); line-height:1.15; }
.b3-h em{ font-style:normal; color:var(--mor-300); }
.b3-bas{ display:flex; align-items:baseline; justify-content:space-between; gap:.8em; }
.b3-adet{ font-size:1.05em; color:var(--fg-faint); }

.b3-kutucuklar{ display:grid; grid-template-columns:1fr 1fr; gap:.6em; }
.b3-kutucuklar span{
  padding:.85em .8em; border-radius:.9em; font-size:1.1em; line-height:1.3; font-weight:600;
  color:var(--fg-muted);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
}
.b3-kutucuklar span:first-child{
  color:var(--fg); background:rgba(123,79,255,.16); border-color:rgba(123,79,255,.40);
}

.b3-satir{ display:flex; align-items:center; gap:.85em; }
.b3-kucukgorsel{
  width:3.4em; height:3.4em; border-radius:.8em; flex:none;
  background:linear-gradient(140deg, var(--mor-700), var(--mor-900) 70%);
  box-shadow:inset 0 0 1.2em rgba(195,176,255,.30);
}
.b3-satir-tx{ display:flex; flex-direction:column; gap:.28em; min-width:0; }
.b3-satir-tx b{ font-size:1.25em; font-weight:700; color:var(--fg); }
.b3-satir-tx em{ font-style:normal; font-size:1.05em; line-height:1.35; color:var(--fg-muted); }

/* ---- brief ---- */
.b3-balon{
  align-self:flex-start; max-width:92%;
  padding:.9em 1.1em; border-radius:1.3em 1.3em 1.3em .4em;
  font-size:1.15em; line-height:1.5; color:var(--fg);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.06);
}
.b3-cipler{ display:flex; flex-wrap:wrap; gap:.45em; }
.b3-cip{
  padding:.42em .9em; border-radius:999px; font-size:1.05em; font-weight:600;
  color:var(--fg-muted); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.b3-cip.on{ color:var(--mor-300); background:rgba(123,79,255,.16); border-color:rgba(123,79,255,.34); }
.b3-alanlar{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; }
.b3-alanlar span{
  display:flex; flex-direction:column; gap:.25em; align-items:flex-start;
  padding:.7em .8em; border-radius:.75em; font-size:1em; color:var(--fg-faint);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.b3-alanlar b{ font-size:1.45em; font-weight:800; color:var(--fg); }
.b3-dugme{
  margin-top:auto; margin-bottom:1em; text-align:center;
  padding:.95em; border-radius:.85em; font-size:1.2em; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--mor-700), var(--mor-900));
  box-shadow:0 .5em 1.4em rgba(123,79,255,.42);
}

/* ---- üretim ---- */
.b3-ilerleme{ display:flex; align-items:center; gap:1em; }
.b3-halka{
  position:relative; width:5.2em; height:5.2em; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:conic-gradient(var(--mor-700) var(--b3-yuzde,100%), rgba(255,255,255,.09) 0);
}
.b3-halka::after{
  content:""; position:absolute; inset:.5em; border-radius:50%;
  background:var(--lacivert-900);
}
.b3-halka b{ position:relative; z-index:1; font-size:1.2em; font-weight:800; color:var(--fg); }
.b3-halka.kucuk{ width:2.3em; height:2.3em; margin-left:auto; }
.b3-halka.kucuk::after{ inset:.34em; }

.b3-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55em; }
.b3-liste li{
  position:relative; padding-left:2.1em; font-size:1.15em; color:var(--fg-muted);
}
.b3-liste li::before{
  content:""; position:absolute; left:0; top:.05em;
  width:1.35em; height:1.35em; border-radius:.35em;
  border:1px solid rgba(155,122,255,.5); background:rgba(123,79,255,.14);
}
/* Tik: iki çizgiden kurulu, ikon dosyası gerekmiyor. */
.b3-liste li::after{
  content:""; position:absolute; left:.42em; top:.3em;
  width:.38em; height:.72em; border:solid var(--mor-300);
  border-width:0 .16em .16em 0; transform:rotate(42deg);
}
.b3-serit{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; margin-top:auto; margin-bottom:1em; }
.b3-serit i{
  height:3.4em; border-radius:.6em;
  background:linear-gradient(150deg, rgba(123,79,255,.42), rgba(61,31,143,.30));
  border:1px solid rgba(155,122,255,.24);
}

/* ---- oynatıcı / teslim ---- */
.b3-rozet-ok{
  align-self:flex-start; padding:.4em .9em; border-radius:999px;
  font-size:1em; font-weight:700; letter-spacing:.06em;
  color:var(--mor-300); background:rgba(123,79,255,.18);
  border:1px solid rgba(155,122,255,.45);
}
.b3-kare{
  position:relative; flex:1; min-height:0; border-radius:1em; overflow:hidden;
  background:
    radial-gradient(60% 44% at 32% 28%, rgba(195,176,255,.34), transparent 66%),
    radial-gradient(52% 40% at 74% 74%, rgba(123,79,255,.40), transparent 68%),
    linear-gradient(160deg, var(--lacivert-500), var(--lacivert-900) 72%);
  border:1px solid rgba(155,122,255,.20);
}
/* ÇIKTININ GÖRÜNDÜĞÜ KARE.
   Önce yalnız yukarıdaki degrade vardı ve oynatıcı ekranı boş
   duruyordu — "üretti ama hiçbir şey çıkmadı" gibi okunuyordu.
   Şimdi 2. adımdaki brief'in ("yeni içeceğimizin lansman filmi,
   enerjik, gece, ıslak yüzeyler") karşılığı olan kare görünüyor.

   Görsel BİZİM: evren bölümünde de kullandığımız ürün karesi.
   Gerçek bir müşteri teslimi gösterilmiyor — o içerik gizlilik
   kapsamında. Degrade altta duruyor: görsel inene kadar kare boş
   kalmasın. */
.b3-kare-dolu{
  background-image:
    linear-gradient(to top, rgba(10,13,36,.86) 0%, rgba(10,13,36,.15) 38%, transparent 62%),
    url("assets/evren/evren-3.jpg?v=3"),
    radial-gradient(52% 40% at 74% 74%, rgba(123,79,255,.34), transparent 68%),
    linear-gradient(160deg, var(--lacivert-500), var(--lacivert-900) 72%);
  background-size:cover; background-position:50% 42%; background-repeat:no-repeat;
}
.b3-kare.kisa{ flex:none; height:9em; }

/* Süre çubuğu: karenin "oynatılabilir bir film" olduğunu söyleyen
   şey. Dolgu %38'de duruyor — hareketli olsaydı ekran değişimiyle
   yarışırdı ve gözü asıl akıştan koparırdı. */
.b3-surme{
  position:absolute; left:.9em; right:.9em; bottom:2.6em; height:.28em;
  border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden;
}
.b3-surme i{ display:block; width:38%; height:100%; background:var(--mor-300); }
.b3-oynat{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3.4em; height:3.4em; border-radius:50%;
  background:rgba(10,13,36,.55); border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.b3-oynat::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:.55em 0 .55em .92em;
  border-color:transparent transparent transparent #fff;
}
.b3-kare-alt{
  position:absolute; left:.9em; right:.9em; bottom:.8em;
  display:flex; align-items:baseline; justify-content:space-between; gap:.6em;
}
.b3-kare-alt b{ font-size:1.15em; font-weight:700; color:#fff; }
.b3-kare-alt em{ font-style:normal; font-size:1em; color:rgba(255,255,255,.72); }
.b3-eylemler{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; margin-bottom:1em; }
.b3-eylemler span{
  text-align:center; padding:.75em; border-radius:.7em; font-size:1.1em; font-weight:650;
  color:var(--fg-muted); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.b3-eylemler .birincil{
  color:#fff; background:linear-gradient(135deg, var(--mor-700), var(--mor-900)); border-color:transparent;
}
.b3-onay{
  margin-bottom:1em; padding:.7em .9em; border-radius:.7em; font-size:1.05em;
  color:var(--mor-300); background:rgba(123,79,255,.12); border:1px solid rgba(123,79,255,.26);
}

/* ---- kitaplık ---- */
.b3-izgara{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; }
.b3-izgara i{
  aspect-ratio:3/4; border-radius:.6em;
  background:linear-gradient(150deg, rgba(123,79,255,.38), rgba(61,31,143,.26));
  border:1px solid rgba(155,122,255,.20);
}
.b3-izgara i:nth-child(2n){ background:linear-gradient(150deg, rgba(195,176,255,.28), rgba(44,54,112,.34)); }

/* ---- alt sekme çubuğu ---- */
.b3-sekme{
  flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:.3em;
  padding:.9em .9em 1.6em; margin-top:.6em;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.95em; text-align:center; color:var(--fg-faint);
}
.b3-sekme .on{ color:var(--mor-300); }

/* ---- altyazı + adım noktaları ---- */
.b3-altyazi{
  margin:0; min-height:1.5em; text-align:center;
  font-size:clamp(12.5px,1.15vw,14px); color:var(--fg-muted);
}
.b3-altyazi span{
  display:inline-block;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.b3-altyazi.gecis span{ opacity:0; transform:translateY(4px); }
.b3-noktalar{ display:flex; gap:6px; }
.b3-noktalar i{
  width:5px; height:5px; border-radius:50%; display:block;
  background:rgba(255,255,255,.22); transition:background .3s var(--ease), width .3s var(--ease);
}
.b3-noktalar i.on{ width:16px; border-radius:999px; background:var(--mor-500); }

/* Hareket azaltılmışsa: geçiş yok, ilk ekran duruyor. JS motoru da
   kurulmuyor (script.js), yani sayfa sessizce sabit kalıyor. */
@media (prefers-reduced-motion:reduce){
  .b3-sayfa{ transition:none }
  .b3-altyazi span{ transition:none }
}
/* Perde yalnızca görselin SOL kenarını metin sütununa eritiyor; ortada
   dikiş görünmesin diye. Telefon sağda tamamen açıkta kalıyor. */
.b3-perde{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,#0A0D24 0%,rgba(10,13,36,.62) 26%,rgba(10,13,36,.1) 62%,transparent 100%),
    linear-gradient(0deg,rgba(10,13,36,.38),transparent 46%);
}
/* Görünürken bir kez geçen ışık — sahne "canlanıyor" */
.b3-parlama{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(195,176,255,.18) 50%,transparent 64%);
}
.b3.gorundu .b3-parlama{ animation:b3Parla 1.5s var(--ease) .35s both; }
@keyframes b3Parla{
  0%{ opacity:0; transform:translateX(-42%) }
  22%{ opacity:1 }
  100%{ opacity:0; transform:translateX(42%) }
}

/* Tek sütuna inince hizalama da değişti. Bu blok SOL sütun için yazılmıştı:
   metin sola yaslıydı, ışık ve ızgara sağa doğru sönüyordu çünkü sağda
   telefon vardı. Önizleme kalkınca o yönlü sönüm ortada yamuk duruyor.
   Şimdi içerik ortalanıyor, ışık merkezden dışa doğru simetrik iniyor.
   Genişlik 62ch ile sınırlı: ölçü satırı okunur uzunlukta kalsın. */
.b3-metin{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  max-width:62ch;
  background:radial-gradient(120% 140% at 50% 0%,rgba(20,27,61,.92),rgba(10,13,36,0) 72%);
}
/* Metin sütununun arkasındaki ince ızgara. Düz zemin fazla boş duruyordu;
   ızgara "teknik/stüdyo" hissi veriyor ve sağa doğru eriyerek kayboluyor,
   böylece videonun bulunduğu sütuna taşmıyor. */
.b3-metin::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(155,122,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,122,255,.07) 1px, transparent 1px);
  background-size:46px 46px;
  /* Maske de yön değiştirdi: eskiden sağa doğru eriyordu (orada telefon
     vardı). Tek sütunda merkezden dışa doğru eriyor, dört kenarda da sönüyor. */
  -webkit-mask-image:radial-gradient(80% 90% at 50% 40%,#000 10%,transparent 78%);
  mask-image:radial-gradient(80% 90% at 50% 40%,#000 10%,transparent 78%);
}
.b3-rozet{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; border-radius:999px;
  font:700 10.5px/1 var(--font); letter-spacing:.18em;
  color:#F6F5FA; background:rgba(123,79,255,.14);
  border:1px solid rgba(155,122,255,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* Biggie işareti rozetin içinde: metinden biraz büyük durup soluna oturuyor */
.b3-mark{
  display:block; width:22px; height:22px; flex:0 0 auto;
  margin:-4px 1px -4px -5px;
}
@keyframes b3Nabiz{
  70%{ box-shadow:0 0 0 9px rgba(123,79,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(123,79,255,0) }
}

.b3-baslik{
  margin:clamp(18px,2.4vh,26px) 0 0;
  font-size:clamp(38px,5.4vw,72px); font-weight:900;
  line-height:1; letter-spacing:-.035em; color:#fff;
}
.b3-baslik em{
  font-style:normal;
  background:linear-gradient(180deg,#C3B0FF 6%,var(--accent) 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.b3-slogan{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font-size:clamp(1.05rem,1.7vw,1.5rem); font-weight:700;
  line-height:1.3; letter-spacing:-.015em; color:#F6F5FA;
}
.b3-lead{
  margin:clamp(12px,1.6vh,16px) 0 0; max-width:46ch;
  font-size:clamp(.95rem,1.05vw,1.03rem); line-height:1.68; color:var(--fg-muted);
}

@media (max-width:980px){
  /* ÖNİZLEME KALDIRILDIKTAN SONRA (2026-09-11): buradaki kurallar iki
     sütunlu düzeni dar ekranda alt alta diziyordu (görsel üste, metin
     altına). Tek sütun kalınca sıralama/oran kurallarının hepsi konusuz
     kaldı ve silindi. Geriye yalnız dar ekranda daralan iç boşluk kalıyor. */
  .b3-sahne{ padding:clamp(28px,6vw,48px) clamp(18px,5vw,32px); }
}
@media (prefers-reduced-motion:reduce){
  .b3-parlama{ display:none }
  .b3-rozet i{ animation:none }
  .b3-sahne::after{ animation:none }
}


/* ============================================================
   MOBİL: her bölüm aşağı kaydırırken akar
   ------------------------------------------------------------
   Masaüstünde kartlar GSAP pin ile geçiyor. Mobilde pin kullanmıyoruz;
   pin, kaydırma hissini bozan şeyin ta kendisiydi. Yerine native sticky:
   bölüm uzuyor, sahne ekranda kalıyor, kaydırma ilerlemesi script.js'te
   kartların yatay konumuna çevriliyor (mobilDikeySerit / setProc).
   Böylece ziyaretçi TEK bir hareketle (aşağı) tüm siteyi geziyor;
   yatay parmak kaydırması gerekmiyor.

   Bölüm yükseklikleri kart sayısına göre: ilk kart için 100vh, sonraki
   her kart için ~55vh. Az verilirse kartlar birbirine biner, çok
   verilirse boşa kaydırma olur.
   ============================================================ */
@media (max-width: 768px){
  .services{ min-height: 430vh; }   /* 7 kart */
  .works{    min-height: 265vh; }   /* 4 kart */
  .biggie{   min-height: 320vh; }   /* 5 kart */
  .process{  min-height: 300vh; }   /* 5 adım */

  .services-pin,
  .works-pin,
  .biggie-pin,
  .process-pin{
    position: sticky; top: 0;
    min-height: 100dvh; height: 100dvh;
    padding-top: calc(71px + clamp(8px, 1.4vh, 22px));
    padding-bottom: clamp(10px, 1.8vh, 26px);
  }
  .process-pin{ padding-top: var(--s-6); padding-bottom: var(--s-6); }

  /* Şerit artık parmakla değil kaydırmayla ilerliyor: kendi kaydırma
     kutusu olmamalı, yoksa iki kaydırma birbiriyle yarışır. */
  .svc-track, .wg-track, .biggie-track{
    overflow: visible;
    will-change: transform;
  }
  .svc-track .svc-card,
  .wg-track .wg-card,
  .biggie-track .biggie-card{ flex: 0 0 auto; }
}

/* ---- Proje paneli, mobil ---------------------------------------------
   İki ayrı kusur vardı:
   1) .panel-glow dekoratif ışık paneli 33px aşıyordu; panelin overflow-y
      auto olduğu için bu YATAY kaydırma açıyordu. overflow-x: hidden onu
      görünümü bozmadan kesiyor.
   2) İçerik 871px, yer 776px: 120px dikey kayma. Dolgu ve başlık alanı
      küçültülerek form tek ekrana sığdırıldı. */
@media (max-width: 768px){
  .panel{
    max-height: 94dvh;
    overflow-x: hidden;
  }
  .panel-inner{ padding: 12px 16px 14px; }
  .panel-head{ margin-bottom: 8px; }
  /* Süsleme, dar ekranda formun sığması için feda ediliyor: 50px yer açıyor
     ve panelin tek ekranda durması bir dekordan daha değerli. */
  .panel-glyph{ display: none; }
  .panel-kicker{ font-size: 10px; }
  .panel-title{ font-size: 1.32rem; margin-top: 2px; }
  .panel-text{ font-size: .88rem; margin-top: 4px; }

  .pf-block{ margin-bottom: 8px; }
  .pf-blabel{ font-size: 9.5px; margin-bottom: 6px; }
  .pf-chips{ gap: 6px; }
  .pf-chip{ padding: 7px 11px; font-size: 12px; }
  .pf-field{ margin-bottom: 8px; }
  .pf-field label{ font-size: 11.5px; margin-bottom: 4px; }
  /* 16px ŞART: iOS daha küçük yazılı alana dokunulunca sayfayı
     yakınlaştırıyor ve panel o anda taşıyor. */
  .pf-field input, .pf-field textarea{ padding: 9px 12px; font-size: 16px; }
  .pf-field textarea{ min-height: 62px; }
  .pf-row{ gap: 8px; }
  .pf-submit{ padding: 12px 18px; margin-top: 0; }
}

/* Alçak ekranlar (iPhone SE gibi 667px): panel yine de sığmalı.
   Önce ikincil metin, sonra ölçüler feda ediliyor; form hep tek ekranda. */
@media (max-width: 768px) and (max-height: 740px){
  /* Çipler sarılınca iki satır oluyordu; tek satırda yatay kaydırılabilir
     yapmak 30px kazandırıyor ve hepsi yine erişilebilir kalıyor. */
  .pf-chips{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
             overscroll-behavior-x: contain; padding-bottom: 2px; }
  .pf-chips::-webkit-scrollbar{ display: none; }
  .pf-chip{ flex: 0 0 auto; }
  .panel{ max-height: 96dvh; }
  .panel-inner{ padding: 8px 14px 12px; }
  .pf-field{ gap: 3px; }
  .panel-text{ display: none; }
  .panel-title{ font-size: 1.16rem; }
  .panel-kicker{ font-size: 9px; }
  .panel-head{ margin-bottom: 6px; }
  .pf-blabel{ margin-bottom: 5px; }
  .pf-chip{ padding: 6px 10px; font-size: 11.5px; }
  .pf-field{ margin-bottom: 7px; }
  .pf-field label{ font-size: 11px; margin-bottom: 3px; }
  .pf-field input, .pf-field textarea{ padding: 8px 11px; }
  .pf-field textarea{ min-height: 40px; }
  .pf-submit{ padding: 11px 16px; }
}

/* ---- Dil seçici (EN / TR) --------------------------------------------
   Menünün sağında, hamburgerden önce. Etkin dil marka mavisiyle yanar,
   diğeri sönük durur; iki harf yan yana olduğu için ayrım renkten gelir. */
.dil-sec{
  display: flex; align-items: center; gap: 2px;
  margin-left: var(--s-2);
}
.dil-btn{
  padding: 6px 9px;
  font: 700 12.5px/1 var(--font);
  letter-spacing: .08em;
  color: rgba(255,255,255,.42);
  background: none; border: 0; cursor: pointer;
  border-radius: 8px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dil-btn:hover{ color: rgba(255,255,255,.8); }
.dil-btn.acik{
  color: var(--accent-strong);
  background: rgba(123,79,255,.14);
}
/* Mobil menüde ortada ve biraz daha büyük: parmakla basılacak. */
.dil-sec-mobil{
  justify-content: center;
  margin: var(--s-3) 0 0;
  gap: 6px;
}
.dil-sec-mobil .dil-btn{ padding: 10px 16px; font-size: 15px; }

@media (max-width: 900px){
  /* Masaüstü menüsü gizlenince oradaki seçici de gizlenir; mobil menüdeki
     kopya devrede kalır. İkisi aynı anda görünürse iki kez basılabiliyor. */
  .nav-inner > .dil-sec{ display: none; }
}

/* ============================================================
   MOBİL — PC ŞABLONUNA SADIK KALMA  (2026-09-28)
   ------------------------------------------------------------
   İstek (Media'daki kuralın aynısı): "PC'de yatayda duran mobilde de
   yatayda kalsın, kötü görünümlere izin vermeyelim."

   1) KART ŞERİTLERİ (hizmetler, işler, Biggie) — script.js
      mobilDikeySerit artık ortaya odaklı: etkin kart ortada tam boy,
      yanlar hafif küçük ve soluk. Kartın ölçek/opaklığı JS'ten
      `scale` ve `opacity` ile yazılıyor; `transform`a dokunulmuyor ki
      başka bir animasyonla çakışmasın. Geçiş yumuşak dursun diye
      yalnız ölçekte kısa bir geçiş var (kaydırma zaten sürekli).

   2) ALTBİLGİ — PC'de dört sütun yan yana. Tablette 2×2, telefonda
      TEK sütun olup 60 satırlık bir listeye dönüşüyordu. Artık:
      tablette marka metni üstte, üç sütun altında yan yana; telefonda
      Hizmetlerimiz ile Kurumsal yan yana, İletişim altta tam genişlik.
   ============================================================ */
.mobil-odak > *{ transition: scale .18s linear; transform-origin: 50% 50%; }

@media (min-width: 481px) and (max-width: 1024px){
  .footer-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); }
  .footer-grid > .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); row-gap: var(--s-5); }
  .footer-grid > .footer-brand,
  .footer-grid > .footer-col:last-child{ grid-column: 1 / -1; }
}

/* 3) EVREN YILDIZLARI belgeyi 1-4px taşırıyordu (inset:-12%). Görsel olarak
   .evren-pin zaten kırpıyor ama belge genişliği yine de büyüyordu.
   overflow: clip kaydırma kabı KURMUYOR, yani içteki sticky sahne
   çalışmaya devam ediyor (hidden olsaydı sticky ölürdü). */
.evren{ overflow: clip; }

/* Ortaya odaklı şeritte YAN KARTLAR görünmeliydi: kart 320-328px, boşluk
   24px iken komşunun sol kenarı 392px'te, yani 390'lık ekranın hemen
   dışında kalıyordu (ölçüldü) — "devamı var" hissi yoktu. Masaüstünde
   yanlar hep görünür. Kart biraz daralıp boşluk küçülünce iki yanda
   ~20px'lik birer kenar görünüyor. */
@media (max-width: 768px){
  html body .mobil-odak{ gap: 12px; column-gap: 12px; }
  html body .mobil-odak > *{ width: min(76vw, 300px); max-width: none; flex: 0 0 auto; }
}

/* 4) SÜREÇ ADIMLARI geçiş animasyonunda sağa kayıyor (sıradaki adım
   sağdan giriyor) ve tablette belgeyi 5-10px yana taşırıyordu
   (768/1024/1180'de ölçüldü; dururken adımlar ekranın içinde). Sayfa
   parmakla yana oynamasın diye kırpılıyor; clip kaydırma kabı kurmadığı
   için yapışkan sahne çalışmaya devam ediyor. */
.process{ overflow-x: clip; }

/* iPHONE'DA ODAKLANINCA BÜYÜME YOK (2026-09-30).
   iOS Safari 16px'ten küçük yazılı bir alana dokunulunca sayfayı
   kendiliğinden yakınlaştırıyor ve geri almıyor; iletişim formu
   (15px), konuşan broşür (13px), test (12.5px) ve Biggie'nin
   kutusu (14px) buna yakalanıyordu — aynı sayfa iPhone'da Android'den
   farklı davranıyordu. Dokunmatik ekranda alanlar 16px. */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select{ font-size: 16px !important; }
}

/* KISA TELEFON (320×568: iPhone SE, SE 2/3 "Büyütülmüş" kip) — BIGGIE.
   Başlık 5 satır + orb payı 80px + not, şeride 199px bırakıyordu; kart
   122×163'e küçülüp metni görselin üstüne biniyordu. Başlık bir kademe
   küçülüyor (3 satır), orb payı orb boyuna (69px) iniyor, not
   küçülüyor: kart ~290px yüksekliğe çıkıyor. */
@media (max-height: 620px){
  .biggie-pin{ padding-top: calc(71px + 4px); gap: 6px; }
  .biggie-head .section-title{ font-size: 21px; line-height: 1.15; }

  .biggie-note{ font-size: 11px; line-height: 1.4; }
}


/* ============================================================
   BIGGIE YUVASI (2026-09-30) — düğme yalnız Biggie bölümünde, sabit.
   Widget düğmeyi sayfanın sağ altına sabitliyor (position:fixed);
   script.js "biggieYuva" onu #biggieYuva'ya taşıyor. Taşınmadan önceki
   ilk karede bile sağ altta görünmesin diye yuvada olmayan düğme gizli.
   Tanıtım baloncuğu (#bb-nudge) da sağ altta çıkıyordu; kapalı.
   Hareket yok: kayma, büyüme, eğilme geçişleri kapalı; etiket hep açık.
   ============================================================ */
#bb-launcher:not(.bb-yuvada){ display: none !important; }
#bb-nudge{ display: none !important; }
.biggie-yuva{ display: flex; justify-content: center; margin-top: clamp(14px, 2.2vh, 26px); min-height: 64px; }
#bb-launcher.bb-yuvada{
  position: relative !important; right: auto !important; bottom: auto !important; z-index: 2;
  width: 200px !important; justify-content: center;
  transform: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  border-color: rgba(123,79,255,.6);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 30px rgba(123,79,255,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
#bb-launcher.bb-yuvada:hover{ border-color: rgba(123,79,255,.9); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 40px rgba(123,79,255,.42), inset 0 1px 0 rgba(255,255,255,.1); }
#bb-launcher.bb-yuvada .bb-lbl{ opacity: 1; transform: none; transition: none; }
#bb-launcher.bb-yuvada #bb-launcher-orb{ position: absolute; left: 6px; top: 50%; margin-top: -32px; transform: none !important; transition: none; }
/* Panel açıkken widget düğmeyi "hidden" yapıyor: yer tutsun, zıplamasın. */
#bb-launcher.bb-yuvada.hidden{ opacity: 0; }
/* Düğme artık başlığın altında akışta; orb için ayrılan boşluk gereksiz. */
.biggie-head{ padding-bottom: clamp(8px, 1.4vh, 16px); }
@media (max-height: 620px){ .biggie-head{ padding-bottom: 6px; } .biggie-yuva{ margin-top: 10px; } }
/* Telefonda widget etiketi gizliyor (sağ alttaki yuvarlak düğme için
   yazılmış kural); yuvada düğme hep hap, etiket hep görünür. */
@media (max-width: 480px){
  #bb-launcher.bb-yuvada{ height: 60px; }
  #bb-launcher.bb-yuvada .bb-lbl{ display: flex !important; }
  #bb-launcher.bb-yuvada #bb-launcher-orb{ width: 60px; height: 60px; margin-top: -30px; left: 4px; }
}