/* ------------------------------------------------------------------
   ZoLu — site.css üzerine binen ince katman.

   site.css'e DOKUNULMUYOR: markaya özgü tüm değişiklikler burada.
   Böylece taban stil dosyası tek parça kalıyor ve neyin bize ait
   olduğu tek bakışta görülüyor.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   1. Açılış animasyonundaki ZL monogramı

   Ölçüler scripts/studio-assets.mjs içindeki MARK_PATHS ile aynı
   280×280 kutudan türetildi ve yüzdeye çevrildi
   (çubuk kalınlığı 40/280 = %14.286).

   Animasyonu app.js sürüyor: .js-logo-line-v → scaleY,
   .js-logo-line-h → scaleX. Köşegen bu yüzden iki parça: dış kutu
   döner (JS ona dokunmaz), iç çubuk ölçeklenir.
   ------------------------------------------------------------------ */

.site-intro .sb-logo .zl {
  position: absolute;
  background: var(--color-secondary);
}

/* Yatay çubuklar — scaleX ile soldan sağa çizilir. */
.site-intro .sb-logo .zl--h {
  height: 14.286%;
  transform-origin: 0 50%;
}
.site-intro .sb-logo .zl--z-top {
  top: 0;
  left: 0;
  width: 42.857%;
}
.site-intro .sb-logo .zl--z-bot {
  bottom: 0;
  left: 0;
  width: 42.857%;
}
.site-intro .sb-logo .zl--l-foot {
  bottom: 0;
  left: 57.143%;
  width: 42.857%;
}

/* Dikey çubuk — L'nin gövdesi. */
.site-intro .sb-logo .zl--v {
  top: 0;
  left: 57.143%;
  width: 14.286%;
  height: 100%;
  transform-origin: 50% 100%;
}

/* Köşegen: dış kutu yalnızca döndürür, iç çubuk animasyonu taşır.
   19.8° = atan(72/200) — Z'nin köşegeninin dikeyle yaptığı açı. */
.site-intro .sb-logo .zl-diag {
  position: absolute;
  top: 12.05%;
  left: 13.38%;
  width: 16.1%;
  height: 75.9%;
  transform: rotate(19.8deg);
}
.site-intro .sb-logo .zl-diag .zl {
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

/* ------------------------------------------------------------------
   2. Dil değiştirici

   .sb-contrast ile aynı kutu ölçüsünde; başlık bir flex satırı olduğu
   için `order` değeri onu kontrast düğmesinin soluna yerleştiriyor.
   ------------------------------------------------------------------ */

.site-head .sb-lang {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 5;
  min-width: 48px;
  height: 100%;
  padding: 0 0.75rem;
  border-left: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font: 400 10px/1 var(--font-family-fraktion);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
/* site.css'te bu seçici (0,4,0) özgüllüğünde (.astro-* ekleri yüzünden).
   Sınıfı iki kez yazmak eşitler; eşitlikte sonraki dosya kazanır. */
.site-head.site-head .sb-contrast.sb-contrast {
  order: 6;
}
.site-head .sb-lang:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 0.3s cubic-bezier(1, 0, 0, 1);
  content: "";
}
.site-head .sb-lang:hover:before {
  scale: 1 1;
}
.site-head .sb-lang .sb__text {
  position: relative;
  z-index: 1;
  mix-blend-mode: difference;
}

/* GitHub ikonu — site.css yalnızca codepen/linkedin ölçüsünü biliyordu.
   clip-path: path() öğenin px koordinat sistemini kullanır, bu yüzden
   kutu ölçüsü ikonun viewBox'ıyla (16×16) birebir aynı olmalı. */
.site-head .sb-socials .sb__icon--github {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------------
   3. Kontrast modu

   Tema `--color-primary`/`--color-secondary` değerlerini takas ediyor
   ama <img> içerikleri bundan etkilenmiyor. Kapaklar, çerçeveler, QR
   ve yıldız saf siyah-beyaz olduğu için tek bir invert yeterli.
   ------------------------------------------------------------------ */

/* YALNIZCA üretilmiş çizimler ters çevrilir. Onlar saf siyah-beyaz
   olduğu için invert doğru sonucu verir; gerçek bir ekran görüntüsünü
   ters çevirmek ise onu bozar. Ayrımı `data-cover` yapıyor —
   değeri src/data/covers.ts içinde dosya uzantısına bakılarak
   belirleniyor, yani gerçek görsel eklendiği anda filtre kendiliğinden
   devre dışı kalıyor. */
.theme-contrasted a-work .a__video[data-cover="generated"],
.theme-contrasted .a-object--frame .a__img[data-cover="generated"],
.theme-contrasted .sb-qr-code img,
.theme-contrasted .s__title__asset {
  filter: invert(1);
}

/* ------------------------------------------------------------------
   4. Kapaklar

   site.css bu yuvada <video> bekliyordu; biz <img> koyuyoruz. Ölçü
   kuralları aynı sınıftan (.a__video) miras alınıyor; tek eksik
   görüntünün kutuyu taşırmaması.
   ------------------------------------------------------------------ */

a-work .a__video {
  object-fit: cover;
  background: var(--color-primary);
}

/* Bağlantısı olmayan işler tıklanamaz — imleç de bunu söylesin. */
a-work .a__inner > span {
  display: block;
  cursor: default;
}

/* ------------------------------------------------------------------
   6. Görüntü fontu — zorunlu değişiklik

   Orijinal tasarımın başlık fontu "Bigger Display" yalnızca 103 glyph
   taşıyordu ve içinde TEK bir Türkçe karakter yoktu. Bu bir eksiklik
   değil, kesin bir engeldi: site.css bu fontu kullanan her yerde
   `text-transform: uppercase` uyguluyor ve <html lang="tr"> altında
   tarayıcı "i" harfini Türkçe kurala göre "İ"ye çeviriyor. Yani
   "Yazılım" gibi sıradan bir kelime bile bozuk diziliyordu.

   Yerine Bebas Neue kondu (SIL Open Font License, Google Fonts).
   Seçim ölçüyle yapıldı, göz kararıyla değil — büyük harf ortalama
   ilerleme genişliği:

       Bigger Display  0.352 em   (Türkçe yok)
       Bebas Neue      0.374 em   (Türkçe tam)   <- seçilen
       Anton           0.443 em
       Big Shoulders   0.435 em
       Oswald          0.543 em
       Archivo Black   0.738 em   (iki kat geniş, yerleşimi bozuyordu)

   %6'lık fark, site.css'teki `min(15vw, 18.5rem)` gibi ölçülerin
   olduğu gibi kalabilmesi demek: hiçbir font-size'a dokunulmadı.
   Bebas yalnızca büyük harf taşıyor, ki bu yuvaların hepsi zaten
   uppercase — ve tek ağırlığı var, `font-weight: 700` isteğini
   tarayıcı sentetik kalınlaştırmayla karşılıyor.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/BebasNeue-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/BebasNeue-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-family-bigger: "Bebas Neue", "Haettenschweiler", "Impact", sans-serif;
}

/* ------------------------------------------------------------------
   7. Mobilde yatay kaydırma

   `a-waves` tuvalini bilerek görüntü alanından geniş çiziyor; 390px'te
   bu belgeye 20px'lik yatay kaydırma ekliyordu (360px'te 50px).

   `overflow-x: clip` taşmayı keser ama `hidden`in aksine kaydırma
   kapsayıcısı oluşturmaz — bu önemli, çünkü başlıktaki karıştırma
   efekti harfleri satırın dışına taşırıyor ve dikeyde görünür kalmalı.
   ------------------------------------------------------------------ */

.s-hero.s-hero {
  overflow-x: clip;
}

/* ------------------------------------------------------------------
   8. Ayraçların taşma güvenliği

   site.css dar ekranlarda bit gruplarını `nth-child` ile eleyerek
   ayracı daraltıyor (`.a__code:nth-child(4n+3)` vb.). Ama gruplar
   `flex-shrink: 0` olduğu için tek bir uzun grup hâlâ satırı
   taşırabiliyor — 390px'te belgeye 20px yatay kaydırma ekliyordu.

   Cümleler kısaltıldı (src/data/studio.ts) ve buraya bir de kesin
   sınır kondu: ayraç ne olursa olsun kendi kutusunu aşamaz.
   Üçgen uçlar mutlak konumlu ve 1rem içeride, kırpılmıyorlar.
   ------------------------------------------------------------------ */

a-separator {
  overflow: hidden;
}

/* ------------------------------------------------------------------
   9. CTA balonunun tersine çevrilmesi

   İstek: imleçle açılan dairenin zemini siyah (noktalı), yazısı beyaz.

   Tek tek `background` / `color` ezmek yerine değişkenler takas ediliyor,
   çünkü bu bölgedeki HER ŞEY zaten o iki değişkenle yazılmış:
   zemin ve harf (.s__cta), nokta dokusu (.a-dots:before'daki iki çapraz
   gradyan), dış halka (:before) ve iç kıl çizgi (:after), yıldızlar,
   e-posta rozeti. Takas hepsini birlikte çeviriyor; hiçbiri unutulmuyor.

   İki adım şart: aynı kural içinde `--color-primary: var(--color-secondary)`
   yazmak döngü sayılır ve iki değişken de geçersiz olur. Bu yüzden
   değerler önce ebeveynde (.s__hover) yedekleniyor, sonra çocukta
   yer değiştiriyor.

   Kontrast düğmesi bozulmuyor: kökteki değişkenler değiştiğinde bu takas
   da onlarla birlikte döner, yani balon her zaman sayfanın tersi kalır.
   Beyaz halka da bu yüzden gerekli — siyah balonun siyah sayfa üzerindeki
   kenarını yalnızca o tanımlıyor.

   GO düğmesi (.s__button) .s__hover'ın öbür çocuğu; --swap-* değişkenlerini
   kullanmadığı için etkilenmiyor, beyaz daire + siyah yazı olarak kalıyor.
   ------------------------------------------------------------------ */

.s-cta .s__hover {
  --swap-primary: var(--color-secondary);
  --swap-secondary: var(--color-primary);
}
.s-cta .s__cta {
  --color-primary: var(--swap-primary);
  --color-secondary: var(--swap-secondary);
}