/* CikCak — cikcak.app
   Referans stil: beyaz kâğıt zemin, tek vurgu rengi, iri ve sıkı harflenmiş
   başlıklar, uzun ve yumuşak gölgeler, cömert boşluk. Renk yalnızca markadan
   geliyor; arayüzün geri kalanı siyah-beyaz. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --graphite: #2e2e2e;
  --stone: #8f8f8f;
  --linen: #e0e0e0;
  --vellum: #f5f4f2;
  --brand: #ec253a;          /* logodaki kırmızı, doğrudan ölçüldü */

  --r-card: 30px;
  --r-feature: 45px;
  --r-pill: 52px;

  --shadow-card: 0 27px 104px rgba(0, 0, 0, .12);
  --shadow-nav: 0 8px 30px rgba(0, 0, 0, .06);
  --shadow-frame: 0 30px 90px rgba(0, 0, 0, .13);

  --wrap: 1200px;
  --gap-section: 90px;

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 var(--r-card) 0;
  z-index: 100;
}
.skip:focus { left: 0; }

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

/* ---------- Üst çubuk ---------- */

.nav {
  position: sticky; top: 16px; z-index: 50;
  margin: 16px auto 0;
  max-width: calc(var(--wrap) - 48px);
  display: flex; align-items: center; gap: 16px;
  padding: 10px 10px 10px 12px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--linen);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-nav);
}

.nav__home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__home img { width: 38px; height: 38px; border-radius: 11px; }
.nav__home span { font-weight: 700; letter-spacing: -.03em; font-size: 17px; }

.nav__links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__links a {
  text-decoration: none; color: var(--graphite); font-size: 15px;
  padding: 9px 14px; border-radius: var(--r-pill);
}
.nav__links a:hover { background: var(--vellum); color: var(--ink); }
.nav__lang {
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  padding: 8px 16px !important; font-weight: 500; color: var(--ink) !important;
}
.nav__lang:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* İndir düğmesi — çubuğun en güçlü ögesi, o yüzden dolu.

   `!important` şart: `.nav__links a` ve `:hover` kuralları rengi kendi
   yazıyor ve sınıf sırası onları yenmiyor. Dil hapı da aynı sebeple öyle. */
.nav__cta {
  background: var(--ink); color: var(--paper) !important;
  border-radius: var(--r-pill);
  padding: 9px 16px !important; font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
.nav__cta:hover { background: var(--graphite); color: var(--paper) !important; transform: translateY(-1px); }
.nav__cta:active { transform: translateY(0) scale(.96); }

/* Telefonda çubuk taşıyordu: logo yazısı + üç bağlantı + dil hapı + indir
   düğmesi 390 piksele sığmıyor. Düşen ilk parça marka yazısı oldu — simge
   markayı zaten taşıyor — ve bağlantıların yan payları daraldı. */
@media (max-width: 560px) {
  .nav__home span { display: none; }
  .nav__links a { padding-inline: 10px; }
  .nav__lang { padding: 8px 12px !important; }
  .nav__cta { padding: 9px 14px !important; }
}

/* ---------- Sahne: yazı ve çerçeve ---------- */

.stage { display: grid; grid-template-columns: 1fr; }

.panel { display: flex; flex-direction: column; }

.panel__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--stone);
  text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 22px;
}
.panel__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}

.panel h1, .panel h2 {
  margin: 0 0 22px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.04;
  font-size: clamp(38px, 6.2vw, 76px);
  max-width: 13ch;
}

.panel p {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--graphite);
  max-width: 46ch;
}

/* Özgüllük `.panel p`'nin margin: 0 kuralını yenmek zorunda; yoksa not
   paragrafa yapışıyor. */
.panel p.panel__note {
  margin-top: 26px; font-size: 15px; color: var(--stone);
}

/* Çerçeve katmanı.
   Aynı düzenek iki ölçüde de çalışıyor: katman yapışkan duruyor, beş çerçeve
   üst üste bekliyor, o an ortadaki bölümün çerçevesi açılıyor. Değişen tek şey
   katmanın nerede durduğu — masaüstünde sağ sütun, telefonda yazının üstünde
   bir bant. */
.frames {
  position: sticky;
  pointer-events: none;
}
.frames__inner { position: relative; width: 100%; height: 100%; }

.frame {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(26px) scale(.965) rotate(-1.2deg);
  filter: drop-shadow(var(--shadow-frame));
  transition: opacity .55s ease,
              transform .7s cubic-bezier(.22, .8, .28, 1),
              visibility 0s linear .55s;
}
.frame.is-active {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1) rotate(0);
  transition: opacity .55s ease,
              transform .7s cubic-bezier(.22, .8, .28, 1),
              visibility 0s;
}
.frame img { width: auto; height: auto; max-width: 88%; max-height: 100%; }

/* Gövde beyaz zemine düzleştirilmiş bir JPEG; silueti ayrı bir alfa maskesiyle
   geri veriliyor. Saydam PNG tanesi ~1 MB, bu ikili ~245 KB. Maske olmadan
   `drop-shadow` çerçevenin şeklini değil dikdörtgeni gölgeliyordu. */
.frame img {
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Telefon ve tablet: her bölüm bir ekran.

   Kaydırma ekrana kilitli (`mandatory` + `scroll-snap-stop: always`): bir
   hareket bir sonraki çerçeveye ve yazısına götürüyor, arada dinlenilen bir
   ara hâl yok. Önce serbest kaydırma vardı ve yazı çerçevenin altından
   geçerken ortada yarım kalmış bir görüntü oluşuyordu.

   Çerçeve bandı ekranın tepesinde sabit ve **opak** — sayfanın kendi beyazı.
   Geçiş sırasında yazı altından geçiyor; bant saydam olsaydı üstünden
   geçerdi.

   Sahne, gezinme çubuğunun akışta kapladığı 78 pikseli negatif kenar boşluğuyla
   geri alıyor. Bu olmadan bandın **durduğu** yer ile **yapıştığı** yer 78 piksel
   farklı oluyordu: ilk ekranda çerçeve aşağıda kalıyor, yazı da bandın arkasına
   düşüyordu. Şimdi ikisi aynı, yani ilk bölüm de ötekiler gibi duruyor.

   Ölçüler `svh`: `vh` telefonda adres çubuğu gizlenince değişiyor ve bant ile
   yazının arası her kaydırmada oynuyordu. */
@media (max-width: 999px) {
  html { scroll-snap-type: y mandatory; }

  /* Gezinme çubuğu akışta 16 + 62 = 78 piksel yer kaplıyor; sahne onu geri
     alıyor ki bandın doğal yeri ile yapışık yeri çakışsın. */
  .stage { margin-top: -78px; }

  .stage__copy { grid-area: 1 / 1; }

  .frames {
    grid-area: 1 / 1;
    top: 0;
    z-index: 1;
    /* 92 üstte gezinme çubuğu için, 28 altta çerçevenin nefes payı */
    height: calc(34vh + 120px);
    height: calc(34svh + 120px);
    padding: 92px 24px 28px;
    margin-inline: -24px;              /* beyaz zemin ekranın kenarına kadar */
    background: var(--paper);
  }

  /* Bandın hemen altındaki eriyen şerit: yazı buradan süzülerek giriyor.

     Bitiş rengi `transparent` **değil**. CSS'te `transparent` saydam siyah
     demek; beyazdan ona giden bir geçiş aradan gri geçiyor ve bandın altında
     göze batan bir basamak bırakıyor. Ölçüldü: şeridin içi 245, hemen altı
     254'tü. Aynı beyazın saydamı kullanılınca fark kalmıyor. */
  .frames::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(to bottom, var(--paper), rgba(255, 255, 255, 0));
  }

  /* Gölge çerçeveye yakın duruyor. Masaüstündeki uzun ve yumuşak gölge
     (90 piksel bulanıklık) telefonda bandın altını topluca griye boyuyordu:
     ölçüldü, çerçevenin bulunduğu alan 245, yazının alanı 254 çıkıyordu ve
     ikisinin arasındaki basamak göze batıyordu. Dar gölgede karartma
     çerçevenin hemen dibinde kalıyor, iki alan da beyaz. */
  .frame { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .09)); }

  .panel {
    min-height: 100vh;
    min-height: 100svh;
    /* Yazı bandın hemen altından başlıyor; ortalanmıyor. Ortalanınca
       çerçeveyle yazının arası bölümden bölüme değişen bir boşluğa
       dönüşüyordu. */
    justify-content: flex-start;
    padding: calc(34vh + 136px) 0 40px;
    padding: calc(34svh + 136px) 0 40px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Kapanış da bir oturma noktası; olmasaydı `mandatory` yüzünden alt bilgiye
     inmek zorlaşırdı. */
  .closing { scroll-snap-align: start; }
}

@media (min-width: 1000px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 60px; align-items: start; }
  .stage__copy { grid-column: 1; }
  .panel { min-height: 100vh; justify-content: center; padding: 0; }
  .frames { grid-column: 2; grid-row: 1; top: 0; height: 100vh; }
  .frame img { max-height: 74vh; }
}

/* ---------- Diller arası geçiş ---------- */

/* Sayfalar arası görünüm geçişi. TR ve EN ayrı belgeler; bu olmadan geçiş
   bir kesme oluyor. Desteklemeyen tarayıcıda hiçbir şey değişmiyor, gezinme
   eskisi gibi anında oluyor. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.22, .8, .28, 1);
}

/* İki sayfada da aynı adı taşıyan ögeler yerinde kalıp içerikleriyle
   dönüşüyor: logo sabit durur, dil düğmesindeki yazı TR ile EN arasında
   geçer. */
.nav__home img { view-transition-name: brand; }
.nav__lang { view-transition-name: lang-pill; }

.nav__lang { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.nav__lang:hover { transform: translateY(-1px); }
.nav__lang:active { transform: translateY(0) scale(.96); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frame { transition: opacity .2s linear, visibility 0s linear .2s; transform: none; }
  .frame.is-active { transform: none; transition: opacity .2s linear, visibility 0s; }
  .nav__lang:hover, .nav__lang:active { transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Kapanış ---------- */

.closing {
  border-top: 1px solid var(--linen);
  padding: var(--gap-section) 0;
  text-align: center;
}
.closing h2 {
  margin: 0 0 18px; font-weight: 800; letter-spacing: -.045em; line-height: 1.06;
  font-size: clamp(34px, 5vw, 60px);
}
.closing p { margin: 0 auto; max-width: 52ch; color: var(--graphite); font-size: 18px; }

.badge {
  display: inline-block; margin-top: 30px;
  border: 1px solid var(--ink); border-radius: var(--r-card);
  padding: 16px 22px; font-size: 16px; text-decoration: none;
  background: var(--paper); color: var(--ink);
}
.badge:hover { background: var(--ink); color: var(--paper); }
.badge--quiet { border-color: var(--linen); color: var(--stone); cursor: default; }
.badge--quiet:hover { background: var(--paper); color: var(--stone); }

/* ---------- Alt bilgi ---------- */

.foot {
  border-top: 1px solid var(--linen);
  padding: 44px 0 60px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  font-size: 15px; color: var(--stone);
}
.foot a { color: var(--graphite); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot__spacer { margin-left: auto; }

/* ---------- Metin sayfaları (politikalar, destek) ---------- */

.doc { padding: 70px 0 40px; max-width: 760px; margin: 0 auto; }
.doc h1 {
  font-size: clamp(34px, 5vw, 56px); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.06; margin: 0 0 14px;
}
.doc__date { color: var(--stone); font-size: 15px; margin: 0 0 44px; }
.doc h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -.03em;
  margin: 46px 0 14px;
}
.doc h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.doc p, .doc li { color: var(--graphite); line-height: 1.62; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.callout {
  background: var(--vellum);
  border-radius: var(--r-card);
  padding: 26px 30px;
  margin: 32px 0;
}
.callout p { margin: 0; color: var(--ink); }
.callout p + p { margin-top: 12px; }

.doc dl { margin: 0; }
.doc dt { font-weight: 600; margin-top: 26px; }
.doc dd { margin: 8px 0 0; color: var(--graphite); }