/* =============================================================
   06-sections.css
   NE YAPAR : Sadece belirli bir bolume ait gorunumler (hero gibi).
   BAGLI    : 02-tokens.css
   KURAL    : Bir stil birden fazla sayfada tekrar etmeye baslarsa
              onu 05-components.css'e tasi.
   ============================================================= */

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(180deg, var(--yuzey) 0%, var(--kagit) 100%);
  border-bottom: 1px solid var(--cizgi);
  padding-block: var(--bo-7) var(--bo-6);
}
/* .kap icinde yasar; ortalanmaz ki sol kenari diger bolumlerle ayni hizada dursun */
.hero-ic { display: flex; flex-direction: column; gap: var(--bo-3); max-width: 760px; }
.hero .etiket {
  font-family: var(--yazi-kod);
  font-size: var(--bs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marka);
}
.hero p { font-size: var(--bs-l); color: var(--murekkep-2); }
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: var(--bo-2); margin-top: var(--bo-2); }

/* ---------- GUVEN SERIDI ---------- */
.serit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-5);
  padding-block: var(--bo-4);
  border-top: 1px solid var(--cizgi);
  margin-top: var(--bo-5);
}
.serit div { display: flex; flex-direction: column; gap: 2px; }
.serit .sayi {
  font-family: var(--yazi-kod);
  font-size: var(--bs-xl);
  font-weight: 700;
  color: var(--murekkep);
  font-variant-numeric: tabular-nums;
}
.serit .ne { font-size: var(--bs-xs); color: var(--soluk); }

/* ---------- SURECIN ADIMLARI (gercek bir sira — numara bilgi tasiyor) ---------- */
.adimlar { counter-reset: adim; }
.adim { display: flex; gap: var(--bo-3); padding-block: var(--bo-3); border-bottom: 1px solid var(--cizgi); }
.adim:last-child { border-bottom: none; }
.adim::before {
  counter-increment: adim;
  content: counter(adim, decimal-leading-zero);
  font-family: var(--yazi-kod);
  font-size: var(--bs-s);
  font-weight: 700;
  color: var(--marka);
  flex: none;
  padding-top: 3px;
}
.adim h3 { font-size: var(--bs-l); margin-bottom: 3px; }
.adim p  { font-size: var(--bs-s); }

/* ---------- PORTFOLYO ---------- */
.is-karti { overflow: hidden; padding: 0; }
.is-karti .gorsel {
  aspect-ratio: 16 / 10;
  background: var(--yuzey-2);
  display: grid;
  place-items: center;
  color: var(--soluk);
  font-family: var(--yazi-kod);
  font-size: var(--bs-xs);
}
.is-karti .icerik { padding: var(--bo-3) var(--bo-4) var(--bo-4); display: flex; flex-direction: column; gap: 6px; }

/* ---------- SSS ---------- */
.sss details {
  border-bottom: 1px solid var(--cizgi);
  padding-block: var(--bo-3);
}
.sss summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--bs-m);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--bo-3);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--marka); font-family: var(--yazi-kod); flex: none; }
.sss details[open] summary::after { content: "−"; }
.sss p { margin-top: var(--bo-2); font-size: var(--bs-s); }

/* =============================================================
   KOYU BOLUMLER — acik/koyu ritmi
   Site tek duze beyaz degil; belirli bolumler koyu zeminde,
   elektrik camgobegi orada patliyor.
   ============================================================= */

.bolum--gece {
  background: var(--gece);
  color: var(--gece-metin);
}
.bolum--gece h1,
.bolum--gece h2,
.bolum--gece h3 { color: var(--gece-metin); }
.bolum--gece p  { color: var(--gece-metin-2); }
.bolum--gece .etiket { color: var(--marka-vurgu); }
.bolum--gece .bolum-basi .etiket { color: var(--marka-vurgu); }

/* Koyu bolumdeki ikincil buton */
.bolum--gece .dugme--ikincil { color: var(--marka-vurgu); border-color: var(--gece-cizgi); }
.bolum--gece .dugme--ikincil:hover { background: var(--gece-2); border-color: var(--marka-vurgu); }

/* ---------- HERO: koyu, gorselli ----------
   Header artik sag-soldan bosluklu yuzen bir pill (bkz. .ust,
   05-components.css) ve kendi alani kadar yer kapliyor. O alanin
   ustunde herhangi bir zemin yoksa sayfanin varsayilan (beyaz)
   zemini gorunur — pill'in arkasinda absurt bir beyazlik olusur.
   Cozum: hero'yu header kadar yukari cek (negatif margin), kaybolan
   alani ayni miktarda ust padding olarak geri ekle. Ic gorunum
   (h1'in nerede basladigi) DEGISMEZ, sadece koyu zemin/gorsel artik
   header'in ARKASINA kadar uzaniyor. --ust-yukseklik degeri
   03-nav.js tarafindan olculup kok elemana yaziliyor. */
.hero {
  position: relative;
  background: var(--gece);
  color: var(--gece-metin);
  border-bottom: none;
  margin-top: calc(-1 * var(--ust-yukseklik, 84px));
  padding-block: calc(var(--bo-7) + var(--ust-yukseklik, 84px)) var(--bo-6);
  overflow: hidden;
}
/* ARKA PLAN GORSELINI DEGISTIRMEK ICIN: sadece asagidaki --hero-fon satiri.
   (Yol bu CSS dosyasina gore: ../assets/img/...) Degisken tanimi ve
   kullanimi ayni dosyada durur ki goreli yol hep ayni yere cozulsun. */
.hero { --hero-fon: url("../assets/img/hero-fon-ekran.jpg"); }
.hero-fon {
  position: absolute; inset: 0;
  background-image: var(--hero-fon);
  background-size: cover; background-position: center;
  opacity: .55;
}
/* Yazinin okunmasi icin karartma katmani — solda daha koyu */
.hero-fon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gece) 12%, rgba(11,16,20,.72) 55%, rgba(11,16,20,.35) 100%);
}
.hero .kap { position: relative; z-index: 1; }
.hero h1 { color: var(--gece-metin); font-size: clamp(2rem, 6vw, var(--bs-4xl)); }
.hero p  { color: var(--gece-metin-2); }
.hero .etiket { color: var(--marka-vurgu); }

.hero .serit { border-top-color: var(--gece-cizgi); }
.hero .serit .sayi { color: var(--gece-metin); }
.hero .serit .ne   { color: var(--gece-soluk); }

/* Sicak karsit rengi tek bir yerde kullaniyoruz: one cikan paket */
.paket--one-cikan { border-color: var(--sicak); }
.paket--one-cikan .rozet { background: var(--sicak-acik); color: var(--sicak-koyu); }

/* =============================================================
   SCROLL ILERLEME CIZGISI — 09-etkiler.js olusturur
   ============================================================= */
.ilerleme-cizgisi {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--marka), var(--marka-vurgu));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 100;
  pointer-events: none;
}


/* =============================================================
   ONCE / SONRA SURGUSU — 10-karsilastir.js
   ============================================================= */
.karsilastir {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--gece-cizgi);
  aspect-ratio: 16 / 10;
  background: var(--gece-2);
  user-select: none;
  --kol-konum: 50%;
}
.karsilastir-kat { position: absolute; inset: 0; }
.karsilastir-kat img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ust katman soldan kirpiliyor; JS clip-path'i gunceller */
.karsilastir-ust { clip-path: inset(0 50% 0 0); }

/* Katmanlarin hangisi oldugunu soyleyen kucuk etiketler */
.karsilastir-etiket {
  position: absolute; top: 16px;
  font-family: var(--yazi-kod); font-size: var(--bs-xs); font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 12px; border-radius: 6px;
  backdrop-filter: blur(6px);
}
.karsilastir-etiket--once  { right: 16px; background: rgba(11,16,20,.75); color: var(--gece-metin-2); }
.karsilastir-etiket--sonra { left: 16px;  background: rgba(34,224,208,.9); color: var(--gece); }

/* Ayirici cizgi ve tutamak */
.karsilastir-cizgi {
  position: absolute; top: 0; bottom: 0;
  left: var(--kol-konum);
  width: 2px; background: var(--marka-vurgu);
  transform: translateX(-1px);
  pointer-events: none;
}
.karsilastir-tutamak {
  position: absolute; top: 50%; left: var(--kol-konum);
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--marka-vurgu); color: var(--gece);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
  box-shadow: var(--derinlik-vurgu);
  pointer-events: none;
}

/* Gercek kontrol: gorunmez ama klavyeyle gezilebilir range girdisi */
.karsilastir-kol {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.karsilastir-kol:focus-visible ~ .karsilastir-tutamak {
  outline: 3px solid var(--kagit);
  outline-offset: 3px;
}


/* =============================================================
   HERO VITRIN — 11-hero-insa.js
   Gercek bir demonun tarayici penceresi.
   - Scroll ile girince cerceve yukselir, gorsel icine "yuklenir"
   - Fare ustundeyken 3B egilir (imleci takip eder) + parilti gezer
   ============================================================= */
.vitrin {
  width: 100%;
  max-width: 480px;
  perspective: 1100px;
}
.vitrin-cerceve {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gece-2);
  /* Cila: acik ince kenar + ic isik cizgisi + koyu golge + hafif marka parlamasi */
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 24px 55px -20px rgba(0, 0, 0, .75),
    0 6px 30px -10px rgba(34, 224, 208, .16);
  will-change: transform;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(26px) rotateX(7deg) scale(.96);
  transform-origin: center center;
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}
.vitrin.gorundu .vitrin-cerceve { opacity: 1; transform: none; }

.vitrin-cubuk {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: linear-gradient(var(--gece-3), var(--gece-2));
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vitrin-nokta {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}
.vitrin-adres {
  margin-left: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--gece-soluk);
  background: rgba(255, 255, 255, .05);
  padding: 2px 12px;
  border-radius: 20px;
}

.vitrin-ekran { position: relative; background: var(--gece-2); overflow: hidden; }
.vitrin-ekran img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .6s ease .3s,
              transform .9s cubic-bezier(.22,1,.36,1) .3s;
}
.vitrin.gorundu .vitrin-ekran img { opacity: 1; transform: none; }

/* Fareyle gezen parilti — JS --px / --py degiskenlerini yazar */
.vitrin-parlama {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    circle at var(--px, 50%) var(--py, 0%),
    rgba(255, 255, 255, .22),
    rgba(255, 255, 255, 0) 42%
  );
  mix-blend-mode: soft-light;
}
.vitrin-cerceve:hover .vitrin-parlama { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vitrin-cerceve, .vitrin-ekran img { transition: none; }
  .vitrin-parlama { display: none; }
}

/* Hero'yu iki sutuna bol: solda yazi, sagda vitrin. */
.hero-izgara {
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  gap: var(--bo-5);
  align-items: center;
}


/* =============================================================
   HERO SINEMATIK GIRIS — 12-hero-sahne.js
   Hero'nun USTUNE binen koyu bir katman + icinde <canvas>.
   Scroll'la: laptop doner (kare dizisi) -> kamera ekrana girer
   (canvas'a transform) -> katman solar, alttaki hero AYNEN gorunur.
   Hero'nun kendi tasarimina dokunulmaz; sadece ustune perde.

   Katman YALNIZCA <html class="sekans"> iken var. Sinifi index.html
   <head> icindeki kucuk betik koyar (genis ekran + hareket azaltma
   kapali). JS/GSAP yuklenemezse 12-hero-sahne.js sinifi geri alir.
   Mobilde / hareket azaltmada bu blok hic devreye girmez.
   ============================================================= */
.hero-sahne { display: none; }

.sekans .hero-sahne {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;                 /* .hero .kap (z 1) ustunde */
  background: #020304;        /* karelerin zemin rengi — kareler gelmeden de siyah */
  overflow: hidden;
  pointer-events: none;       /* solarken bile alttaki dugmeler tiklanabilir */
}
.sekans .hero-sahne-tuval {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;              /* kamera = gorunen ekran; hero daha uzunsa alti zemin */
  display: block;
  will-change: transform;
}
/* Pin'lenen hero en az bir ekran boyu olsun ki katman ekrani tam kaplasin */
.sekans .hero { min-height: 100vh; }
/* CLS onlemi: ScrollTrigger pin'i kurunca hero'nun altina kaydirma boyu
   kadar bosluk (pin-spacer) ekler; bu, alttaki bolumu bir anda asagi iter
   (Lighthouse CLS 1.0). JS gelene kadar ayni boslugu margin ile ayir;
   12-hero-sahne.js pin'i kurmadan hemen once "sekans-pin" sinifini ekler
   ve bu bosluk devri pin-spacer'a gecer (arada boyama yok -> kayma yok).
   275vh = AYAR.kaydirmaBoyu (2.75) x ekran boyu — ikisi birlikte degisir. */
.sekans:not(.sekans-pin) .hero { margin-bottom: 275vh; }