/* Kefelon — hareket dili. Tek biçim (logonun "<" oku), tek eğri ailesi
   (--ease-out / --ease-in-out, base.css).
   Kurallar: yalnız transform / translate / opacity / clip-path; JS yoksa hiçbir
   şey gizli başlamaz (.js ve .intro kancaları head betiğinden gelir);
   reduced-motion'da her şey son hâlinde durur (en altta). */

/* ── Satır maskesi ─────────────────────────────────────────
   Başlık satırları HTML'de ayrı yazılıyor (JS bölmesi yok, kayma yok).
   Dolgu + eşit negatif pay: maske "y/g" kuyruklarını ve üst çıkıntıyı kesmesin. */
.ln { display: block; overflow: hidden; padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
.ln > span { display: block; }

@keyframes ln-up { from { transform: translateY(120%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ── Anasayfa açılışı (html.intro: oturumdaki ilk ziyaret) ──
   Sıra: logo çizilir → "<" belirip bloğa açılır → başlık satır satır yükselir
   → metin ve butonlar → telefonlar alttan. Başlık 1 sn içinde okunur. */
.intro .nav .k-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: k-bar .55s var(--ease-out) .05s both; }
.intro .nav .k-arrow { stroke-dasharray: 100; animation: k-draw .75s var(--ease-in-out) .2s both; }
.intro .nav .brand span, .intro .nav-links, .intro .nav-r { animation: fade-in .8s ease .45s both; }
@keyframes k-bar { from { transform: scaleY(0); } }
@keyframes k-draw { from { stroke-dashoffset: 100; } }

/* Blok "<" kenarıyla sağdan silerek girer. Ekranda iki biçim denendi (23 Eyl):
   ince "<" belirip bloğa kalınlaşan (A) ve bu silme (B); kullanıcı B'yi seçti,
   "daha hareketli". Doğrudan clip-path keyframe'i: ilk sürüm @property'li bir
   sayıyı canlandırıp poligonu calc ile kuruyordu — ana iş parçacığında
   çalıştı, bitişte bütün hero yeniden boyandı (kayıtta 266 ms donma). */
.intro .hero-art::before { animation: k-open 1.1s var(--ease-in-out) .2s both; }
@keyframes k-open { from { clip-path: polygon(100% 0, 118% 0, 104% 50%, 118% 100%, 100% 100%, 100% 50%); } }
/* Telefonda blok çatı (^) biçiminde: aynı silme alttan yukarı. */
@media (max-width: 860px) {
  @keyframes k-open { from { clip-path: polygon(0 108%, 50% 100%, 100% 108%, 100% 100%, 50% 100%, 0 100%); } }
}

.intro .hero-eyebrow { animation: fade-in .9s ease .3s both; }
.intro .hero .ln > span { animation: ln-up 1.1s var(--ease-out) both; animation-delay: calc(.4s + var(--i, 0) * .11s); }
.intro .hero .lead { animation: fade-up 1s var(--ease-out) .7s both; }
.intro .hero-cta { animation: fade-up 1s var(--ease-out) .8s both; }
.intro .hero-stage .phone { animation: phone-up 1.4s var(--ease-out) both; animation-delay: calc(.75s + var(--i, 0) * .12s); }
/* Saydamlık da şart: telefonda hero kısa, %75 aşağıdaki telefonun tepesi
   yükselişten önce ekranın dibinde bekler görünüyordu (kayıtta görüldü). */
@keyframes phone-up { from { translate: 0 60%; opacity: 0; } 40% { opacity: 1; } }

/* ── Kaydırınca: hero ─────────────────────────────────────
   Başlık geride kalır, telefonlar öne çıkar. Desteklemeyen tarayıcı
   (Firefox) durağan ama tam sayfayı görür.
   Blok kaydırınca "<"e geri kapanıyordu: telefonlar siyah zeminde hero'nun
   alt kenarında havada kesik kaldı (kayıtta görüldü) — blok sabit.
   Telefonda yok: metin aşağı kayıp telefonların üstüne binerdi. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 861px) {
    .hero-copy { animation: hero-copy linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero-stage { animation: hero-stage linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes hero-copy { to { translate: 0 18vh; opacity: .3; } }
    @keyframes hero-stage { to { translate: 0 -10vh; } }
  }
}

/* ── Kaydırınca beliren başlıklar (site.js .in ekler) ──
   Kapsayıcı solmaz, yalnız satırlar maskeden yükselir. */
.js .reveal-lines .ln > span { transform: translateY(120%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * .09s); }
.js .reveal-lines.in .ln > span { transform: none; }
.js .craft-list li > :not(h3) { opacity: 0; transition: opacity .9s ease .25s; }
.js .craft-list li.in > :not(h3) { opacity: 1; }

/* Açılışta ekranda olan içerik hazır (html.settled: çapaya iniş, geri dönüş).
   site.js ilk gözlemde görünenlere .in verip settled'ı geçişsiz (.no-tr)
   kaldırır; ekran dışındakiler sonra kaydırdıkça normal belirir. */
.settled .reveal, .settled .reveal-lines .ln > span { opacity: 1; transform: none; transition: none; }
.settled .craft-list li > :not(h3) { opacity: 1; transition: none; }
.settled .mol-dot::after { transform: none !important; transition: none; }
.settled .foot-word { background-position: 0 0 !important; transition: none; }
.settled .story-stage .phone > img { transition: none; }
.no-tr *, .no-tr *::before, .no-tr *::after { transition: none !important; }

/* ── Hikâye: telefonda ekran değişimi ──────────────────────
   Yeni ekran "<" kenarıyla sağdan silerek gelir; aşağı inerken üstüne biner,
   yukarı çıkarken aynı yoldan geri çekilir (site.js: adım ≤ etkin → .on).
   5 köşe: kapalıyken hepsi sağ kenarın dışında, açıkken ok ucu solda dışarıda. */
.story-stage .phone > img { clip-path: polygon(115% 0, 100% 0, 100% 100%, 115% 100%, 100% 50%); transition: clip-path 1s var(--ease-in-out); }
.story-stage .phone > img.on { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, -15% 50%); }

/* Hikâye girerken yazı sütunu genişliğindeki bir karttan tam genişliğe açılır. */
@supports (animation-timeline: view()) {
  .story { animation: story-open linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  @keyframes story-open { from { clip-path: inset(0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) round 28px); } to { clip-path: inset(0 0 round 0); } }

  /* "Work with us": turuncu "<" perdesi sağdan açılır, kaydırmaya bağlı. */
  .work-panel { animation: work-open linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
  @keyframes work-open {
    from { clip-path: polygon(125% 0, 100% 0, 100% 100%, 125% 100%, 100% 50%); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, -25% 50%); }
  }

}

/* Alt bilgideki dev KEFELON görünür olunca soldan turuncuyla dolar (site.js .in).
   Kaydırmaya BAĞLI DEĞİL: yazı footer'ın altına taşıyor, sayfa dibinde kutusu
   hiç "tam girmiyor" — kaydırma aralığı %85'te takılıp N yarım, sonu boş
   kalıyordu (kullanıcı gördü, 23 Eyl; ölçüm: background-position %15). Telefonda
   yazının yalnız ~54 px'i görünüyor, kaydırmaya bağlamak zaten anlamsız. */
.foot-word {
  background: linear-gradient(90deg, var(--accent) 50%, transparent 50%) 0 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.4s var(--ease-out);
}
.js .foot-word:not(.in) { background-position: 100% 0; }

/* ── Uygulama sayfası açılışı (yalnız siteye dışarıdan girişte) ──
   İkon döner-büyür, wordmark harf harf maskeden yükselir, telefonlar alttan.
   html.enter head betiğinden: site içinden gelinince (sekme, menü, logo) sayfa
   hazır görünür — her açılışta oynarken sayfa boş gelip sonradan doluyordu,
   sekmeden Overview'a dönmek bile "içerik fırlıyor" gibi duruyordu (24 Eyl).
   Harf maskesinde yatay pay: Poppins Black Italic harfleri kutudan taşıyor. */
.wm { display: inline-block; overflow: hidden; padding: .08em .14em .1em; margin: -.08em -.14em -.1em; vertical-align: top; }
.wm > span { display: inline-block; }
.enter .wm > span { animation: ln-up 1s var(--ease-out) both; animation-delay: calc(.15s + var(--i, 0) * .05s); }
.enter .app-hero-icon { animation: icon-in 1s var(--ease-out) both; }
@keyframes icon-in { from { opacity: 0; transform: scale(.6) rotate(-10deg); } }
.enter .app-hero-tag { animation: fade-up .9s var(--ease-out) .45s both; }
.enter .app-hero-lead { animation: fade-up .9s var(--ease-out) .55s both; }
.enter .app-hero-cta { animation: fade-up .9s var(--ease-out) .65s both; }
.enter .app-hero-stage .phone { animation: phone-up 1.3s var(--ease-out) both; animation-delay: calc(.5s + var(--i, 0) * .12s); }

/* Dopa molekül tüpleri görünür olunca dibinden dolar. */
.mol-dot::after { transition: transform 1.3s var(--ease-out) .25s; }
.js .mol:not(.in) .mol-dot::after { transform: scaleY(0); }

/* Galeri: ortaya gelen ekran tam boy, kenardakiler hafif küçük ve soluk. */
@supports (animation-timeline: view()) {
  .gallery-track figure { animation: g-focus linear both; animation-timeline: view(inline); }
  @keyframes g-focus { 0%, 100% { scale: .92; opacity: .6; } 35%, 65% { scale: 1; opacity: 1; } }
}
/* Fareyle sürükleyerek kaydırma (site.js); dokunmatikte tarayıcının kendi kaydırması. */
@media (hover: hover) and (pointer: fine) {
  .gallery-track { cursor: grab; }
  .gallery-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}

/* ── Sayfa geçişi YOK: sayfalar animasyonsuz, doğrudan değişir ──
   23 Eyl'de "<" perdeli çapraz belge View Transitions vardı; 24 Eyl taraması
   (Chrome + iOS 26 simülatörü Safari) Safari'de siteden düzeltilemeyen kusurlar
   buldu: perde boyunca durum çubuğu ve alt araç çubuğunun arkası düz gri bant
   olup sonda tek karede dönüyor, perdenin sonunda sayfa 2-3 kare donup bir
   eski kare gösterip ileri atlıyor, menü çubuğunun buzlu camı kayboluyor.
   Kullanıcı: "temiz olmuyorsa eski haline, animasyonsuz" — kaldırıldı. Menü
   çubuğunun aşağı kayınca gizlenmesi de kalktı (sekme satırını 69 px
   zıplatıyordu). Geri getirmeden önce iOS Safari'de kare kare bak. */

/* ── Mobil menü: öğeler kademeli yükselir ── */
@media (max-width: 860px) {
  .nav.menu-open .mnav-in > :not(.mnav-links), .nav.menu-open .mnav-links a { animation: fade-up .6s var(--ease-out) both; }
  .nav.menu-open .mnav-in > :nth-child(2) { animation-delay: .04s; }
  .nav.menu-open .mnav-in > :nth-child(3) { animation-delay: .08s; }
  .nav.menu-open .mnav-links a:nth-child(1) { animation-delay: .14s; }
  .nav.menu-open .mnav-links a:nth-child(2) { animation-delay: .18s; }
  .nav.menu-open .mnav-links a:nth-child(3) { animation-delay: .22s; }
  .nav.menu-open .mnav-foot { animation-delay: .3s; }
}

/* ── Hareket istemeyen: her şey son hâlinde, anında ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  .js .reveal-lines .ln > span { transform: none; }
  .js .craft-list li > :not(h3) { opacity: 1; }
}