/* ONY Studio, ana stil. Düzen ilkesi: 12 sütun, her bölüm farklı sütundan başlar,
   hiçbir blok aynı kenara iki kez hizalanmaz. Taşan tek eleman: demo çerçevesi. */

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

/* clip her iki elemanda birden olmalı: yalnız body'de kalınca html taşmayı yine kaydırılabilir
   yapıyordu. clip (hidden değil) seçildi ki sayfa kaydırma bağlamı değişmesin. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  /* Sedef/mermer hissi düz renkten gelmiyor: rengin üstünde çok ince bir tane
     dokusu var (bkz. --doku). Yakından mineral, uzaktan düz beyaz. */
  background-color: var(--zemin);
  background-image: var(--doku);
  background-size: 160px 160px;
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--fs-0);
  line-height: 1.6;
  overflow-x: clip; /* taşan çerçeve viewport dışına kırpılır, yatay kaydırma doğmaz */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-baslik);
  font-weight: 400; /* Tenor Sans tek ağırlık; hiyerarşi boyut ve renkle kurulur */
  line-height: 1.12;
  margin: 0;
  /* Başlıklar büyük harf. html lang="tr" olduğu için tarayıcı Türkçe kuralını uygular:
     i büyürken İ olur, ı büyürken I. Bu aynı zamanda Tenor Sans'ın zayıf küçük ı
     glifini devreden çıkarıyor. */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Zeminden bir tık ayrılsın diye çok hafif gölge. em cinsinden: hero'nun 88
     pikselinde de blok başlığının 22 pikselinde de aynı oranda kalıyor.
     Opaklık düşük tutuldu, hero'da denenen büyük ofsetli kopya metni
     bulanıklaştırıyordu. */
  text-shadow: 0 0.025em 0.06em rgba(31, 27, 24, 0.14);
}

p { margin: 0; max-width: 34em; }

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

/* Bileşenlerin kendi display değeri [hidden]'ı eziyordu; sekme panelleri bu
   öznitelikle gizleniyor. */
[hidden] { display: none !important; }

/* Bağlantı ve odak: sayfadaki tek işlevsel renk burada */
a { color: var(--baglanti); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--baglanti);
  outline-offset: 3px;
  border-radius: 2px; /* keskin köşede halka kaybolmasın diye minik yumuşatma */
}

::selection { background: var(--baglanti); color: var(--zemin); }

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--oluk);
  max-width: var(--icerik);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.bolum { padding-block: var(--bolum-dikey); }

/* ---------- Üst bar ---------- */
/* Açık zeminde difference karışımı öngörülemez sonuç veriyor; bar sabit koyu metin
   kullanır ve yalnız koyu işler bölümünün üstünden geçerken açığa döner. Sınıfı
   JS ekliyor (bkz. main.js, üst bar gözcüsü). */
.ustbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  color: var(--bar-metin);
  /* Sıcak gri buzlu cam. Önce zeminle aynı açık ton denendi: bar da sayfa da
     beyaz kalınca aralarında sınır oluşmuyordu, logo boşlukta duruyordu.
     Taş zeminin üstünde #706d67'ye denk düşüyor. Bir kademe koyusu (#5f5c56)
     fazla ağır, bir kademe açığı metni 4.5'in altına düşürüyordu; metin de
     birlikte açılınca kontrast 4.70'te kalıyor. */
  background: var(--bar-zemin);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: color 0.25s linear, background-color 0.25s linear,
              translate 0.32s cubic-bezier(0.22, 1, 0.30, 1);
}

/* Dar ekranda bar aşağı kaydırırken çekilir, yukarı kaydırırken geri gelir.
   Sınıfı JS ekliyor; yalnız 460px altında bağlanıyor. */
.ustbar--gizli { translate: 0 -100%; }

/* Camın içinden yavaşça geçen ışık. Kendi kutusu var çünkü bandı kırpmak için
   overflow gerekiyor; overflow doğrudan bara verilseydi mobil menü paneli de
   kırpılırdı. Metnin ALTINDA kalıyor: üstünden geçse anlık olarak kontrastı
   düşürüyor. Bu, sayfadaki iki hareket anının dışında bilinçli bir istisna. */
.ustbar__isik {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ustbar__isik::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: bar-isik 9s ease-in-out infinite;
}
@keyframes bar-isik {
  0%   { translate: 0 0; }
  55%  { translate: 322% 0; } /* banda sağ kenarı geçirtir, kalanı bekleme */
  100% { translate: 322% 0; }
}

/* İç katman ışığın üstünde kalsın */
.ustbar__ic { position: relative; z-index: 1; }


/* Saydamlık azaltılmışsa cam yerine düz zemin: bulanıklık okunurluğu bozmasın */
@media (prefers-reduced-transparency: reduce) {
  .ustbar { background: #6f6b66; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.ustbar__ic {
  max-width: var(--icerik);
  margin-inline: auto;
  padding: 16px var(--kenar); /* iki satırlık logoyla toplam yükseklik 80px altında kalsın */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* İki satır: marka üstte geniş harf aralığıyla, imza altında. Blok olarak hizalanır
   ki sağdaki bağlantılar markanın kendi satırıyla aynı çizgide dursun. */
.ustbar__logo {
  color: inherit;
  text-decoration: none;
  /* Sütun flex: bir flex kutusunun baseline'ı İLK öğesinden gelir, blok olsaydı
     sonuncudan gelirdi ve sağdaki bağlantılar imza satırına hizalanırdı. */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.ustbar__logo-ad {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-1);
  letter-spacing: 0.14em; /* 0.22em'di, harfler dağılıyordu; yaklaşık üçte bir daraldı */
}

.ustbar__logo-kisi {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.09em; /* marka satırıyla aynı oranda daraldı, aradaki fark korunuyor */
  /* Opaklık yok: camın açık tonunda 0.86 bile 4.02'ye düşüyordu. Hiyerarşiyi
     punto ve harf aralığı taşıyor, zaten kural da o. */
}

.ustbar__baglar { display: flex; gap: clamp(18px, 3vw, 40px); }

.ustbar__baglar a {
  color: inherit;
  text-decoration: none;
  font-size: 0.94rem;
}
.ustbar__baglar a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Dil anahtarı: nav bağlantısı değil, sayfanın öteki dildeki kopyası.
   Ayrık duruşu ince bir sol ayraçtan alıyor. Çubukta kısaltma (EN/TR),
   720 altında panel tam adı gösterir. */
.ustbar__dil .dil-uzun { display: none; }
.ustbar__baglar .ustbar__dil {
  padding-left: clamp(18px, 3vw, 40px);
  border-left: 1px solid rgba(240, 235, 228, 0.26);
  letter-spacing: 0.07em;
}

/* Hamburger: yalnız bağlantıların gizlendiği genişliklerde açılır.
   align-self gerekli, bar baseline hizalı ve metinsiz düğmenin baseline'ı
   alt kenarından geliyor. */
.ustbar__acar {
  display: none;
  align-self: center;
  width: 40px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.ustbar__cizgi {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1px; /* saç teli: bar zaten koyu, kalın çizgi kaba duruyor */
  background: currentColor;
  transition: translate 0.24s cubic-bezier(0.22, 1, 0.30, 1),
              rotate 0.24s cubic-bezier(0.22, 1, 0.30, 1),
              opacity 0.14s linear;
}
.ustbar__cizgi:nth-child(1) { top: 11px; }
.ustbar__cizgi:nth-child(2) { top: 16px; }
.ustbar__cizgi:nth-child(3) { top: 21px; }

/* Açıkken çarpı: ortadaki söner, diğer ikisi ortada buluşup döner */
.ustbar--acik .ustbar__cizgi:nth-child(1) { translate: 0 5px; rotate: 45deg; }
.ustbar--acik .ustbar__cizgi:nth-child(2) { opacity: 0; }
.ustbar--acik .ustbar__cizgi:nth-child(3) { translate: 0 -5px; rotate: -45deg; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; /* sütunlar alttan ve sağdan taşıyor; sayfa genişliğini bozmasınlar */
  padding-block: clamp(88px, 12vh, 120px) clamp(48px, 8vh, 96px);
}

.hero .grid { width: 100%; align-items: center; row-gap: 40px; position: relative; z-index: 1; }

/* Hero'nun gridi ortalanmaz, sola doğru konumlanır: metin bloğu sayfanın
   ortasında değil sol tarafında dursun. Boşluğun %50'si yerine %35'i solda
   kalıyor, yani blok yaklaşık üçte bir oranında sola kayıyor.
   Yalnız cihazların yanda durduğu genişliklerde; altında zaten tek sütun. */
@media (min-width: 1001px) {
  .hero .grid {
    margin-left: max(var(--kenar), calc((100% - var(--icerik)) * 0.35));
    margin-right: auto;
  }
}

/* Telefon metnin ARKASINDAN çıkıyor: bunun için metin bloğunun zemini opak olmalı,
   yoksa telefon metnin altından geçerken görünüyor. */
/* Metin bloğuna opak zemin VERİLMİYOR. Telefonu metnin arkasından geçirme
   denendi: blok, telefonun arkasında görünür bir dikdörtgen olarak beliriyordu.
   Telefon artık üst kenarın arkasından geliyor, örtmeye gerek kalmadı. */

/* Altı sütun: katmanlı başlığın en büyük satırı beş sütuna sığmıyordu.
   Metnin sütunlara yapışmaması ise .hero__gorseller'in sağa itilmesiyle çözüldü. */
.hero__icerik { grid-column: 1 / 7; }

/* Katmanlı başlık. Katman hissi ölçek ve konumdan geliyor, renkten değil:
   üç satır aynı renkte. line-height 1'in altında olduğu için satırların
   çıkıntıları bir üsttekinin inişlerine değiyor. */
.hero__baslik {
  position: relative;
  font-size: var(--fs-4);
  /* Türkçe büyük harflerde nokta ve şapka çok: 0.85'te İ'nin noktaları alttaki
     Ö/Ü ile çakışıp harfleri okunmaz yapıyordu. Katman hissi ölçek merdiveninden
     geldiği için üst üste binmeye gerek yok. */
  line-height: 1;
}

/* Maske kutusu satırı alttan oturturken kırpar; line-height 0.85 ile kutu
   harflerden kısa kalıp çıkıntıları kesiyordu, bu yüzden dikeyde genişletilip
   negatif margin ile düzene geri alındı. */
.hero__satir-kutu {
  display: block;
  overflow: hidden;
  padding-block: 0.16em;
  margin-block: -0.16em;
}

.hero__satir { display: block; }

/* Punto büyüdükçe girinti de büyüyor (her satırın kendi em'inin yarısı kadar),
   harf aralığı ise daralıyor: büyük harfler yoğun bir blok gibi dursun. */
.hero__satir--1 { font-size: 1em;    padding-left: 0;     letter-spacing: 0.01em; }
.hero__satir--2 { font-size: 1.45em; padding-left: 0.5em; letter-spacing: -0.01em; }
.hero__satir--3 { font-size: 2.1em;  padding-left: 0.5em; letter-spacing: -0.03em; }

/* Derinlik katmanı KALDIRILDI: en düşük opaklıkta bile büyük puntoda metnin
   altında hale bırakıp keskinliği bozuyordu. Katman hissi ölçek merdiveninden
   zaten geliyor. Kopya DOM'da duruyor ama görünmüyor; geri istenirse
   opacity değeri açılır. */
.hero__golge { display: none; }

.hero__metin {
  margin-top: 28px;
  color: var(--metin-2);
  max-width: 30em;
}

.hero__eylem { margin-top: clamp(32px, 5vh, 52px); }

/* ---------- Sayı şeridi ---------- */
/* Tek şerit, dört sayı: geçmiş ve sonuç birlikte. Önce iki ayrı şeritti
   (hero altında sicil, işler altında sonuçlar); sayfa yeniden kurulurken
   teke indi, tekrar hissi veriyordu. */
.rakamlar .grid { row-gap: 40px; }

.rakamlar__baslik {
  grid-column: 2 / 8;
  margin-bottom: clamp(8px, 2vh, 20px);
  font-size: var(--fs-2); /* bölüm başlıklarından bir kademe küçük: şerit, bölüm değil */
}

/* Başlık ilk çocuk olduğu için rakamlar ikinciden başlıyor.
   Dört sütun eş genişlikte değil; ikinci ve dördüncü hafif aşağıda. */
.rakamlar .rakam:nth-child(2) { grid-column: 2 / 5; }
.rakamlar .rakam:nth-child(3) { grid-column: 5 / 8; margin-top: clamp(16px, 3vh, 36px); }
.rakamlar .rakam:nth-child(4) { grid-column: 8 / 10; }
.rakamlar .rakam:nth-child(5) { grid-column: 10 / 13; margin-top: clamp(10px, 2vh, 24px); }

/* ---------- Hero'daki iki cihaz ---------- */
/* Kapsayıcı hero'nun sağ yarısını kaplar; oranı sabit olduğu için içindeki her şey
   yüzdeyle konumlanabiliyor. Dizüstü sağdan --tasma kadar dışarı çıkar. */
.hero__cihazlar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 52%;
  right: calc(var(--tasma) * -1);
  aspect-ratio: 100 / 56;
  z-index: 0;
  /* Sol kenar maskesi: telefon açılışta bu sınırın solundayken TAMAMEN kırpılır,
     yani metnin üstünde hiç belli olmaz; sınırı geçince belirir.
     inset() kullanılamıyor, negatif değer kabul etmiyor ve kural tümden düşüyor.
     polygon'da %0 dışı değerler geçerli: yalnız sol kenar kırpılır, sağ ve dikey
     taşmalar (dizüstünün ekran dışına çıkması) serbest kalır. */
  clip-path: polygon(0 -200%, 300% -200%, 300% 300%, 0 300%);
}

/* --- Dizüstü: baskın olan, sağa ve alta yaslı --- */
.dizustu {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 74%;
}

.dizustu__govde { display: block; width: 100%; height: auto; }

/* SVG'deki ekran dikdörtgeninin (74.52, 21.32, 501.22x323.85) yüzde karşılığı */
.dizustu__ekran {
  position: absolute;
  left: 11.465%;
  top: 5.33%;
  width: 77.11%;
  height: 80.96%;
  border-radius: 0.8%;
  overflow: hidden;
  background: var(--koyu-zemin);
}

/* --- Telefon: solda, dizüstünden yukarıda, tamamen içeride --- */
/* Ölçüler 393x852 ekran + 12px kenardan geliyor; dış kutu 417x876.
   cqw birimi sayesinde çerçeve, telefon ne kadar büyürse o kadar ölçekleniyor. */
.telefon {
  position: absolute;
  right: 77.7%; /* dizüstünün sol kenarından cihaz genişliğinin ~1/20'si kadar uzakta */
  top: 1.7%;    /* üst kenarı dizüstünün üstünden kendi yüksekliğinin 1/5'i yukarıda */
  width: 22%;
  aspect-ratio: 417 / 876;
  container-type: inline-size; /* yalnız ölçü kabı, kendi stillerinde cqw kullanmaz */
}

.telefon__govde {
  width: 100%;
  height: 100%;
  padding: 2.878cqw;                 /* 12/417 */
  border-radius: 16.31cqw;           /* 68/417 */
  /* Neredeyse siyah gövde; 135 derecelik çok hafif degrade hacim veriyor */
  background: linear-gradient(135deg, #26262a 0%, #131316 45%, #0a0a0c 100%);
  box-shadow: 0 6px 18px rgba(31, 27, 24, 0.14); /* dış gölge çok az */
}

.telefon__ekran {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 13.43cqw;           /* 56/417 */
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 0.24cqw rgba(255, 255, 255, 0.04),
              inset 0 1.9cqw 3.4cqw rgba(0, 0, 0, 0.34);
}

/* Dinamik ada: 126x37, r20, ekranın üstünden 12px aşağıda, yatayda ortalı */
.telefon__ada {
  position: absolute;
  top: 2.878cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 30.22cqw;
  height: 8.87cqw;
  border-radius: 4.8cqw;
  background: #000;
  z-index: 2;
}

/* Ana sayfa çizgisi: ekran genişliğinin üçte biri, 5px, alttan 8px */
.telefon__cizgi {
  position: absolute;
  bottom: 1.92cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 31.4cqw;
  height: 1.2cqw;
  border-radius: 0.6cqw;
  background: rgba(255, 255, 255, 0.62);
  z-index: 2;
}

/* --- Ekran katmanları: üçü üst üste, görünen olan opaklıkla seçiliyor --- */
.ekran {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 600ms linear;
}
.ekran[data-acik] { opacity: 1; }

/* Anasayfa iki katman: altta donmuş kapak, üstte canlı iframe. İkisi de aynı
   durum adını taşıdığı için birlikte açılıp birlikte sönerler; iframe boyanana
   kadar görünen kapak oluyor, ekran hiçbir an siyah kalmıyor. */

/* Gömülü site canlı görünür ama tıklama ve kaydırma sayfaya ait kalır */
.dizustu__ekran iframe { pointer-events: none; }

/* Etiket dizüstünün sol kenarına oturur */
.cihaz-etiket {
  position: absolute;
  left: 26%;
  top: 100%;
  margin: 14px 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metin-2);
  transition: opacity 300ms linear;
}

/* ---------- Demo çerçevesi (imza öğesi) ---------- */
.cerceve {
  display: block; /* hero'da <span> olarak kullanılıyor; inline kalırsa yükseklik uygulanmaz */
  background: var(--kart);
  border: 1px solid var(--ayrac);
  border-radius: var(--kose-cerceve);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(9, 8, 7, 0.55); /* zemin tonunda tek derin gölge, yalnız çerçevede */
}

.cerceve__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ayrac);
  font-size: 0.8rem;
  color: var(--metin-2);
}

.cerceve__nokta { display: flex; gap: 6px; }
/* Pencere düğmeleri macOS düzeninde: solda kapat, ortada küçült, sağda tam ekran.
   Bir süre nötr griydi ("sayfadaki tek renk işten gelir" kuralı gereği) ama o
   hâliyle pencere hissi vermiyordu. Bilinçli istisna: bu renkler stüdyonun
   paleti değil, işletim sisteminin; çerçeve zaten işi saran bir taklit.
   Sayfanın kendi renk kuralı çerçevenin İÇİNDE geçerli olmaya devam ediyor. */
.cerceve__nokta i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ayrac);
}
.cerceve__nokta i:nth-child(1) { background: #ff5f57; } /* kapat */
.cerceve__nokta i:nth-child(2) { background: #febc2e; } /* küçült */
.cerceve__nokta i:nth-child(3) { background: #28c840; } /* tam ekran */

.cerceve__adres {
  flex: 1;
  text-align: center;
  background: var(--panel);
  border-radius: 4px;
  padding: 3px 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cerceve__icerik {
  display: block; /* aynı sebep: hero'daki kopyası <span> */
  position: relative;
  height: clamp(420px, 62vh, 620px);
  background: var(--panel);
}

.cerceve__icerik iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Kilit: gömülü site, sayfayı kaydırırken parmağın altına girdiğinde
   kaydırmayı kendi üstüne alıyor ve ziyaretçi orada takılıyor. Dar ekranlarda
   VE genişliği ne olursa olsun dokunmatik cihazlarda (tablet!) görünür;
   fare kullanıcısında imleci kenara çekmek yeterli, engel çıkarılmaz.
   Buzlu yüzey çerçevenin tamamını kaplıyor: önce ortada küçük bir kart vardı,
   gömülü sayfanın kendi başlığıyla çakışıyordu. Tamamı bulanıklaşınca altındaki
   içerik görünmeye devam ediyor ama artık okunacak bir metin gibi durmuyor. */
.cerceve__kilit {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  place-content: center;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--koyu-metin);
  background: rgba(22, 18, 15, 0.34);
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  /* Vinyet: kenarlar koyulaşıyor, ortadaki içerik okunur kalıyor */
  box-shadow: inset 0 0 124px 42px rgba(18, 15, 13, 0.5);
  transition: opacity 0.42s linear, visibility 0s linear 0.42s;
}
.cerceve--acik .cerceve__kilit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Dar ekran YA DA dokunmatik işaretçi: iPad dikey 768px'tir, salt genişlik
   sorgusu onu kaçırıyordu. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .cerceve__kilit { display: grid; }
}

/* Kendi zemini yok: zemin artık çerçevenin tamamı */
.kilit__plaka {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.kilit__yazi {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* El dokunuyor, kaydırmıyor. Önce aşağı yukarı gidiyordu ve kaydırma hareketi
   gibi okunuyordu; oysa buradaki iş tek bir dokunuş. Parmak hafifçe basıyor,
   ucundan bir halka açılıp sönüyor. */
.kilit__hareket { position: relative; display: block; }

.kilit__el {
  transform-origin: 50% 78%;
  animation: el-bas 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes el-bas {
  0%, 60%, 86%, 100% { transform: scale(1); }
  70%                { transform: scale(0.88); }
}

/* Halka parmağın UCUNDAN açılıyor: ikondaki işaret parmağı yukarı bakıyor,
   halkayı elin altına koymak dokunma noktasını yanlış yere gösteriyordu. */
.kilit__hareket::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 26%;
  width: 30px;
  height: 30px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 235, 228, 0.75);
  opacity: 0;
  pointer-events: none;
  animation: dokunus 2.2s cubic-bezier(0.22, 1, 0.30, 1) infinite;
}
@keyframes dokunus {
  0%, 64% { opacity: 0;    scale: 0.3; }
  72%     { opacity: 0.85; scale: 0.55; }
  100%    { opacity: 0;    scale: 1.7; }
}

/* ---------- Şerit: Catalog ve Motion sekmelerinin açılan parçaları ---------- */
/* Seçili parça büyür, diğerleri şeride iner. Tek etkileşim tıklama; kart yok,
   parçalar bitişik ve keskin, aralarında yalnız saç teli çizgi var. */
.serit {
  display: flex;
  height: clamp(340px, 58vh, 520px);
  overflow: hidden;
  border: 1px solid var(--ayrac);
  border-radius: var(--kose-cerceve);
  background: var(--kart);
}

.serit__parca {
  position: relative;
  flex: 1 1 0%;
  min-width: 54px; /* kapalı parça da bir görüntü parçası göstersin */
  padding: 0;
  border: 0;
  border-left: 1px solid var(--ayrac);
  background: none;
  color: var(--koyu-metin); /* fotoğrafın üstünde her zaman açık mürekkep */
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow 700ms cubic-bezier(0.22, 1, 0.30, 1);
}
.serit__parca:first-child { border-left: 0; }
.serit__parca[aria-selected="true"] { flex-grow: 7; cursor: default; }

/* Kapalıyken görüntü bir tık yakın duruyor; açılırken yerine oturuyor.
   Ölçek görüntünün kendisinde, kutuda değil: kutu zaten flex ile büyüyor. */
.serit__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: 1.06;
  transition: scale 700ms cubic-bezier(0.22, 1, 0.30, 1);
}
.serit__parca[aria-selected="true"] .serit__gorsel { scale: 1; }

/* Perde dekorasyon değil, okunurluk için: altındaki yazı her fotoğrafta çıksın. */
.serit__perde {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.74), rgba(12, 10, 8, 0));
  pointer-events: none;
}

/* Oynatma engellendiğinde beliren rozet. Normalde görünmez; yalnız play()
   reddedilince açılıyor (iOS düşük güç modu). Ziyaretçi dokununca video
   başlıyor, rozet kapanıyor. */
.serit__oynat {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(22, 18, 15, 0.46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--koyu-metin);
  opacity: 0;
  transition: opacity 0.3s linear;
  pointer-events: none;
}
.serit__oynat svg { display: block; }
.serit__parca[data-durdu] .serit__oynat { opacity: 1; }

.serit__etiket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* Yazı yalnız açık parçada görünür: kapalı parça saf görüntü kalsın. */
.serit__ad,
.serit__alt {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 460ms linear, translate 460ms cubic-bezier(0.22, 1, 0.30, 1);
}
.serit__ad {
  font-family: var(--font-baslik);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.serit__alt { font-size: 0.85rem; color: var(--koyu-metin-2); }
.serit__parca[aria-selected="true"] .serit__ad { opacity: 1; translate: 0 0; }
.serit__parca[aria-selected="true"] .serit__alt { opacity: 1; translate: 0 0; transition-delay: 60ms; }

/* Şerit ilk açıldığında parçalar soldan sırayla yerine oturur. Sınıfı JS ekler,
   sekmeye her dönüşte değil yalnız ilk kurulumda. */
.js .serit--acildi .serit__parca {
  animation: parca-otur 620ms cubic-bezier(0.22, 1, 0.30, 1) var(--gecikme, 0ms) both;
}
@keyframes parca-otur {
  from { opacity: 0; translate: -24px 0; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- Bölüm ritmi ---------- */
/* Bölümler sedef zemin ile onun bir ton koyusu arasında sırayla geçiyor:
   1 hero açık, 2 web koyu, 3 fotoğraf açık, 4 video koyu, 5 rakamlar açık,
   6 süreç koyu, 7 iletişim açık. Araya bölüm girdiğinde sıra kayıyor, koyu
   üçlü tek kural olduğu için güncellemesi tek satır. Renk değişiyor ama doku
   aynı değişkenden geldiği için sınırda kesilmiyor: tek bir yüzeyin iki tonu
   gibi okunuyor. Fark dokuz birim, sınır belli oluyor ama bölmüyor. */
.isler,
.videolar,
.surec {
  background-color: var(--panel);
  background-image: var(--doku);
  background-size: 160px 160px;
}

/* Bu iki bölümün üst payı bölüm ölçüsünün üstüne çıkıyor: başlık ve altındaki
   yoğun içerik (demo çerçevesi, kare şeritleri) sınıra fazla yakın duruyordu. */
.isler,
.fotograf,
.videolar { padding-top: calc(var(--bolum-dikey) + clamp(28px, 5vh, 64px)); }

/* ---------- Canlı işler ---------- */

.isler .grid { row-gap: 32px; }

.isler__yan { grid-column: 2 / 6; align-self: end; padding-bottom: 8px; }

.isler__yan h2 { font-size: var(--fs-3); }

/* İş adı gövde fontunda: hemen üstündeki bölüm başlığıyla aynı aileye girince
   ikisi tek blok gibi okunuyordu. */
.isler__yan h3 {
  /* 24px'ti: bölüm başlığıyla iş adı tek blok gibi sıkışıyordu. Yaklaşık iki
     katına çıkarıldı, ikisi arasında bölüm değiştiği okunuyor. */
  margin-top: 46px;
  font-family: var(--font-govde);
  font-weight: 500;
  font-size: var(--fs-1);
}

.isler__aciklama {
  margin-top: 16px;
  color: var(--metin-2);
  white-space: pre-line; /* listedeki \n satır sonu olsun, sarma davranışı bozulmasın */
}

.isler__tam { display: inline-block; margin-top: 24px; }

/* Sayfadaki taşan tek eleman: dikkat buradan gelsin diye viewport kenarını aşar */
.isler__sahne { grid-column: 6 / 13; margin-right: calc((var(--sag-bosluk) + var(--kenar) + var(--tasma)) * -1); }


/* ---------- Fotoğraf ve Video bölümleri ---------- */
/* Üç zanaat aynı iskeleti paylaşır: başlık + iş adı + davet, altında sahne.
   Yan blokların sütunları bölümden bölüme değişir, aynı kenar iki kez
   kullanılmaz: web 2'den, fotoğraf 1'den, video 8'den başlar. */
.fotograf .grid,
.videolar .grid { row-gap: clamp(36px, 6vh, 64px); }

.fotograf__yan { grid-column: 1 / 6; }
.videolar__yan { grid-column: 8 / 13; }

.fotograf__yan h2,
.videolar__yan h2 { font-size: var(--fs-3); }

/* İş adı gövde fontunda, işler bölümündeki kalıpla aynı */
.fotograf__yan h3,
.videolar__yan h3 {
  margin-top: 24px;
  font-family: var(--font-govde);
  font-weight: 500;
  font-size: var(--fs-1);
}

.fotograf__yan p,
.videolar__yan p {
  margin-top: 16px;
  color: var(--metin-2);
  white-space: pre-line; /* davet iki satır: kırılım metnin kendisinde */
}

.fotograf .serit,
.videolar .serit { grid-column: 1 / 13; }

/* ---------- Mekân: iki karelik kolaj ---------- */
/* Kolaj solda, metin sağda. İşler bölümünde metin solda sahne sağdaydı; burada
   ters çevrildi ki iki bölüm arka arkaya aynı ritmi tekrarlamasın. */
.mekan__kolaj {
  grid-column: 1 / 7;
  position: relative;
  align-self: center;
}
.mekan__metin { grid-column: 8 / 13; align-self: center; }

/* Kolaj başlığı bölüm başlığı değil, alt kademe: fotoğraf bölümünün içinde */
.mekan__metin h3 { font-size: var(--fs-2); }
.mekan__metin h3 span { display: block; } /* ikinci satır: kırılım blokla */
.mekan__metin p { margin-top: 20px; color: var(--metin-2); }

/* Arkadaki bulanık kare kenarını göstermesin diye radyal maskeyle sönüyor.
   Maske görünür bir gradyan değil, yalnız bitiş kenarını yok ediyor. */
.mekan__fon {
  position: absolute;
  left: -6%;
  top: -6%;
  width: 112%;
  height: 112%;
  max-width: none; /* global img kuralını aşıyor */
  object-fit: cover;
  /* Ölçü kolaj kutusuna bağlı. Önce yükseklik auto bırakılmıştı: dar ekranda
     görüntü kendi boyuna büyüyüp metnin altına sarkıyordu.
     Maske kolajın ARKASINDA kalacak kadar dar; daha genişken bulanıklık sağa
     doğru sürüyor ve gri bir leke gibi okunuyordu. */
  opacity: 0.5;
  filter: blur(26px) saturate(135%);
  -webkit-mask-image: radial-gradient(50% 52% at 36% 50%, #000 22%, transparent 68%);
  mask-image: radial-gradient(50% 52% at 36% 50%, #000 22%, transparent 68%);
  pointer-events: none;
}

.mekan__ana,
.mekan__yan { margin: 0; position: relative; }

.mekan__ana { width: 76%; aspect-ratio: 4 / 5; }

/* İkinci kare ana karenin sağ alt köşesine biniyor. Aralarındaki ayrım gölge
   değil paspartu: bölümün kendi zemini kadar bir kenar. Hafif sağa eğik duruyor
   ve köşeleri yumuşak: masaya atılmış ikinci bir baskı gibi okunsun.
   Eğim `rotate` ile veriliyor, `transform` ile değil; giriş animasyonu
   transform kullanıyor, ikisi ayrı özellik olunca birbirini ezmiyor. */
.mekan__yan {
  position: absolute;
  right: 0;
  bottom: -9%;
  width: 44%;
  aspect-ratio: 1 / 1;
  border: 10px solid var(--panel);
  border-radius: var(--kose-cerceve);
  rotate: 3.5deg;
}

.mekan__ana img,
.mekan__yan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--kose-yumusak);
}
.mekan__yan img { border-radius: var(--kose-yumusak); } /* paspartunun içinde bir kademe küçük */

/* ---------- Rakam bileşeni ---------- */
.rakam { border-top: 1px solid var(--ayrac); padding-top: 20px; }
.rakam strong {
  display: block;
  font-family: var(--font-baslik);
  font-weight: 400;
  font-size: var(--fs-3); /* hero tek başına en büyük kalsın diye bir adım aşağıda */
  line-height: 1.05;
  text-transform: uppercase; /* 3 GÜN, 2,4 KAT */
  letter-spacing: 0.02em;
}
.rakam > span { color: var(--metin-2); } /* aynı sebep: sayaç span'ı rengini kaybetmesin */

/* ---------- Süreç ---------- */
.surec__baslik { grid-column: 3 / 9; margin-bottom: clamp(40px, 7vh, 72px); font-size: var(--fs-3); }

.adim {
  grid-column: 3 / 11;
  border-top: 1px solid var(--ayrac);
  padding-top: 24px;
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: var(--oluk);
}
.adim + .adim { margin-top: clamp(32px, 5vh, 56px); }

.adim__no {
  font-family: var(--font-baslik);
  font-size: var(--fs-2);
  color: var(--metin-2);
  line-height: 1.1;
}

.adim h3 { font-size: var(--fs-1); font-family: var(--font-govde); font-weight: 500; }
.adim p { margin-top: 10px; color: var(--metin-2); }

/* ---------- İletişim ---------- */
.iletisim__ic { grid-column: 2 / 11; }

.iletisim__ic h2 { font-size: var(--fs-3); }

.iletisim__fiyat { margin-top: 24px; color: var(--metin-2); }

.iletisim__butonlar { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }

.buton {
  font: inherit;
  text-decoration: none;
  border-radius: var(--kose-hap);
  padding: 14px 34px;
  display: inline-block;
}
.buton:active { transform: translateY(1px); }

.buton--dolu { background: var(--metin); color: var(--zemin); }
.buton--dolu:hover { background: #3a332c; } /* mürekkepten bir tık açık; metinle 10.2 kontrast */

.buton--cizgi { color: var(--metin); border: 1px solid var(--metin-2); }
.buton--cizgi:hover { border-color: var(--metin); }

/* ---------- Marka şeridi ---------- */
/* Sürekli hareketin üçüncü bilinçli istisnası (bar ışığı ve dokunuş eli gibi):
   isimler okunmak için değil hacim için orada, o yüzden soluk. Konum JS'te
   rAF ile sürülüyor; CSS animasyonu kullanılmadı çünkü kaydırma hızına göre
   hızlanma, süresi değişince zıplayan keyframe'le yapılamıyor. */
.markalar {
  padding-block: clamp(36px, 6vh, 64px) clamp(20px, 3vh, 36px);
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.markalar__satir {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.markalar__icerik {
  flex: none;
  margin: 0;
  max-width: none; /* global p sınırı satırı bükmesin */
  font-family: var(--font-baslik);
  font-size: clamp(1rem, 2.3vw, 1.7rem); /* ilk deneme 3rem'e çıkıyordu, bağırıyordu */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--metin-2);
  opacity: 0.38; /* soluk: doku ile metin arasında bir kademe */
}

@media (prefers-reduced-motion: reduce) {
  .markalar__satir { transform: none !important; }
}

/* ---------- Alt bilgi ---------- */
/* Kapanış bloğu: marka solda, ulaşım yolları sağ tarafta alt alta, telif en
   altta. Üstteki saç teli sayfayı bitiriyor; ayrı bir zemin tonu yok, akış
   son bölümün açığında sönsün. */
.altbilgi {
  border-top: 1px solid var(--ayrac);
  padding: clamp(40px, 7vh, 72px) var(--kenar) 28px;
  max-width: var(--icerik);
  margin-inline: auto;
  font-size: 0.92rem;
}

.altbilgi__ic {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

/* Üst bardaki marka bloğunun sessiz kopyası: aynı oranlar, mürekkep renkleri */
.altbilgi__marka { display: grid; gap: 4px; }
.altbilgi__ad {
  font-family: var(--font-baslik);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.altbilgi__kisi {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--metin-2);
}

.altbilgi__baglar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 12px;
}
/* Halka hem dokunma alanı hem çerçeve: karusel oklarıyla aynı dilde */
.altbilgi__baglar a {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ayrac);
  border-radius: var(--kose-hap);
  color: var(--metin-2);
}
.altbilgi__baglar a:hover { color: var(--metin); border-color: var(--metin-2); }
.altbilgi__baglar svg { display: block; }

.altbilgi__telif {
  margin-top: clamp(32px, 5vh, 56px);
  color: var(--metin-2);
  font-size: 0.82rem;
}

/* ---------- Hareket: iki an, fazlası yok ---------- */
/* 1) Açılış orkestrasyonu: başlık satırları alttan oturur, sonra alt metin ve demo belirir */
.js .hero__satir { transform: translateY(110%); }
.js .hero__metin,
.js .hero__eylem,
.js .hero__cihazlar { opacity: 0; }

/* Satırlar sırayla ama farklı hızlarda: en küçük önce ve hızlı, en büyük sonra
   ve yavaş. Arkadaki kopya en son ve en yavaş belirir. */
.js.yuklendi .hero__satir-kutu .hero__satir--1 { animation: satir-otur 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards; }
.js.yuklendi .hero__satir-kutu .hero__satir--2 { animation: satir-otur 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards; }
.js.yuklendi .hero__satir-kutu .hero__satir--3 { animation: satir-otur 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.38s forwards; }

/* Gölge kopyanın satırları oturma animasyonuna girmez, yalnız blok olarak belirir.
   Kutu yapısı asıl metinle birebir aynı; kutusuz bırakılınca dikeyde kayıp
   asıl metinle örtüşmüyordu. */


.js.yuklendi .hero__metin,
.js.yuklendi .hero__eylem {
  animation: belir 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

/* Cihazlar kendi kenarlarının arkasından kayarak gelir; hero'nun overflow: hidden'ı
   ekran kenarını duvar gibi kullanır. Opaklık değişmez, görünürlük kaymanın kendisinden
   doğar. Eğri sona doğru belirgin yavaşlar ama geri sekmez. */
.js .hero__cihazlar { opacity: 1; }

/* Keyframe kullanılıyor çünkü bulanıklık yolun ortasında en yüksek, iki uçta
   sıfır olmalı; transition tek bir bitiş değerine gider, bunu veremez.
   Bulanıklık hareket hissini yumuşatıyor, duran görüntüde iz bırakmıyor. */
.js .dizustu { translate: 100% 0; }
.js .telefon { translate: -260% 0; }

.js.yuklendi .dizustu {
  animation: cihaz-sagdan 1300ms cubic-bezier(0.22, 1, 0.30, 1) 1300ms both;
}
.js.yuklendi .telefon {
  animation: cihaz-soldan 1200ms cubic-bezier(0.22, 1, 0.30, 1) 1420ms both;
}

@keyframes cihaz-sagdan {
  0%   { translate: 100% 0; filter: blur(7px); }
  55%  { filter: blur(3px); }
  100% { translate: 0 0;    filter: blur(0); }
}
/* Telefon maske sınırının arkasından: metin alanının üstünde görünmez */
@keyframes cihaz-soldan {
  0%   { translate: -260% 0; filter: blur(7px); }
  55%  { filter: blur(3px); }
  100% { translate: 0 0;     filter: blur(0); }
}
@keyframes cihaz-alttan {
  0%   { translate: 0 22px; filter: blur(4px); }
  100% { translate: 0 0;    filter: blur(0); }
}

/* Yerleşince çok küçük bir hover; zıplama değil, yalnız bir kademe yaklaşma.
   translate açılışa ait olduğu için hover ayrı özellik (scale) kullanıyor. */
@media (hover: hover) {
  .telefon, .dizustu { transition-property: translate, scale; }
  .js.yuklendi .telefon:hover, .js.yuklendi .dizustu:hover {
    scale: 1.012;
    transition: scale 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes satir-otur { to { transform: translateY(0); } }
@keyframes belir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* 2) Kaydırma yerleşmesi. Yön blokun grid'deki yerinden gelir: solda duran soldan,
   sağda duran sağdan, ortada duran alttan. Mesafe 32px, uzun kayma ucuz durur.
   Bölüm içindeki sıra gecikmesini (--gecikme) JS yazar. */
.js [data-gorun] {
  opacity: 0;
  transition:
    opacity 880ms cubic-bezier(0.16, 1, 0.3, 1) var(--gecikme, 0ms),
    transform 880ms cubic-bezier(0.16, 1, 0.3, 1) var(--gecikme, 0ms);
}
.js [data-gorun="sol"] { transform: translateX(-32px); }
.js [data-gorun="sag"] { transform: translateX(32px); }
.js [data-gorun="alt"] { transform: translateY(32px); }
.js [data-gorun].gorundu { opacity: 1; transform: none; }

/* Sayarak gelen rakamlar: sabit genişlikli rakam olmazsa satır her karede titriyor */
.rakam strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__satir { transform: none; animation: none !important; }
  .js .hero__metin, .js .hero__eylem { opacity: 1; animation: none !important; }
  .js .hero__cihazlar { opacity: 1; }
  .js .dizustu, .js .telefon { translate: 0 0; animation: none !important; filter: none; }
  .ustbar__isik { display: none; }
  .kilit__el { animation: none; }
  .kilit__hareket::after { display: none; }
  .js.yuklendi .telefon:hover, .js.yuklendi .dizustu:hover { scale: 1; }
  .ekran { transition: none; }
  .js [data-gorun] { opacity: 1; transform: none; transition: none; }
  .buton:active { transform: none; }
}

/* Tek sütuna düşen düzende sol/sağ yönün karşılığı kalmıyor: hepsi alttan gelir.
   no-preference koşulu, sonraki kuralın reduced-motion bloğunu ezmesini engeller. */
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .js [data-gorun="sol"], .js [data-gorun="sag"] { transform: translateY(32px); }
  /* Mekân kolajı istisna: iki kare dar ekranda da yan yana ve üst üste duruyor,
     biri soldan biri sağdan gelince kolajın kurulduğu okunuyor. */
  .js .mekan__ana { transform: translateX(-28px); }
  .js .mekan__yan { transform: translateX(28px); }
  .js [data-gorun].gorundu { transform: none; }
}

/* ---------- Duyarlılık ---------- */
/* Bin pikselin altında üç şerit korunur ama genişlikler eşitlenir ve dikey
   kayma azalır: dar alanda büyük kayma boşluk israfına dönüşüyor. */
/* Bin pikselin altında sütunlar akışa döner: metin üstte, üç şerit altında,
   genişlikler eşit ve dikey kayma küçük. */
@media (max-width: 1000px) {
  /* Cihazlar akışa indiği andan itibaren okuma sırası şu: başlık → iş → açıklama
     → sayılar. Alt metin ve rakamlar cihazların üstünde kalırsa aralarında uzun
     bir boşluk kolonuna dönüşüp cihazları ekranın çok altında bırakıyorlar.
     DOM'da rakamlar .hero__icerik içinde, cihazlar .grid'in dışında; iki ayrı
     kapsayıcının çocuklarını sıralayabilmek için aradaki kutular display:contents
     ile kaldırılıyor ve sıralamayı tek sütunluk flex olarak hero devralıyor. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    min-height: 0;
  }
  .hero .grid,
  .hero__icerik { display: contents; }

  /* Yatay payı .grid veriyordu, kutusu kalkınca metinlerin kendisine geçiyor.
     Cihazlar kutusu kendi padding'ini zaten taşıyor. */
  .hero__baslik,
  .hero__metin,
  .hero__eylem { padding-inline: var(--kenar); }

  .hero__cihazlar { order: 1; }
  .hero__metin { order: 2; margin-top: clamp(30px, 5vh, 44px); }
  .hero__eylem { order: 3; margin-top: clamp(26px, 4vh, 40px); }


  /* Cihazlar akışa iner: dizüstü küçülür, telefon önüne biner.
     Yatay giriş burada anlamsız (kenarlar artık duvar değil), ikisi de
     kısa bir mesafeden aşağıdan belirir. */
  .hero__cihazlar {
    clip-path: none;
    position: static;
    transform: none;
    translate: 0 0;
    width: 100%; /* flex öğesi: kesin genişlik olmadan otomatik kenar payları ortalamıyor */
    max-width: var(--icerik);
    margin: clamp(40px, 7vh, 72px) auto 0;
    padding-inline: var(--kenar);
    aspect-ratio: auto;
  }

  .js .dizustu, .js .telefon { translate: 0 22px; }
  .js.yuklendi .dizustu { animation: cihaz-alttan 900ms cubic-bezier(0.22, 1, 0.30, 1) 320ms both; }
  .js.yuklendi .telefon { animation: cihaz-alttan 900ms cubic-bezier(0.22, 1, 0.30, 1) 440ms both; }

  .dizustu { position: relative; width: 86%; margin-left: auto; }
  .telefon { right: auto; left: var(--kenar); top: 12%; width: 21%; }
  /* Etiket sağa geçiyor: bu düzende telefon her zaman solda ve dizüstünün altından
     taşıyor, sola dayalı etiketle birkaç piksel çakışıyordu. */
  .cihaz-etiket { position: static; margin: 16px 0 0; text-align: right; }
  /* Telefonun taşan ucu kutunun içinde kalsın, altındaki metni sıkıştırmasın.
     Yüzde, genişlikten hesaplanır; telefonun boyu da öyle, ikisi birlikte ölçekleniyor. */
  .hero__cihazlar { padding-bottom: 3%; }
}

/* 390 pikselin üstünde ikisi de görünür kalır; yalnız oranları sıkışır. */




@media (max-width: 960px) {

  .isler__yan { grid-column: 1 / 13; }
  .isler__sahne { grid-column: 1 / 13; margin-right: calc(var(--kenar) * -1); } /* taşma korunur, ölçüsü küçülür */

  /* Masaüstündeki kompozisyon yerleşime dayalı; burada yerleşim kalmadığı için
     dört blok eşit ve ritimsiz bir listeye dönüşüyordu. Onun yerine tek tek
     gezilen bir şerit: parmakla kaydırılıyor, oklarla değiştiriliyor, metnin
     devamı dokununca açılıyor. */
  /* Şeritler dar ekranda tam genişlikte kalır; yan bloklar üstlerine geçer */
  .fotograf__yan,
  .videolar__yan { grid-column: 1 / 13; }

  .rakamlar__baslik { grid-column: 1 / 13; }
  /* Seçici masaüstündeki `.rakamlar .rakam:nth-child(2)` kadar spesifik olmalı,
     yoksa tam genişliğe açılma kuralı eziliyor ve sütunlar sıkışık kalıyor. */
  .rakamlar .rakam:nth-child(n) { grid-column: 1 / 13; margin-top: 0; }

  .mekan__kolaj { grid-column: 1 / 13; }
  .mekan__metin { grid-column: 1 / 13; margin-top: clamp(52px, 8vh, 76px); }

  .surec__baslik { grid-column: 1 / 13; }
  .adim { grid-column: 1 / 13; grid-template-columns: 56px 1fr; }

  .iletisim__ic { grid-column: 1 / 13; }
}

@media (max-width: 720px) {
  /* Bağlantılar barın altına açılan panele dönüşür, düğme onun anahtarı olur.
     display:none yerine visibility: geçiş yapılabilsin ve kapalıyken sekme
     sırasından çıksın. Hareket kısa bir oturma, kaydırma değil. */
  .ustbar__acar { display: block; }
  .ustbar__baglar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 2px var(--kenar) 12px;
    /* Panel TAM opak, cam değil. 0.94 denendi: kalan yüzde altı hero başlığının
       hayaletini geçiriyor, koyu zeminde koyu harfler leke gibi duruyordu.
       Barın bir kademe koyusu: raf hissi veriyor, açık mürekkeple kontrastı 7.2. */
    background: #514c45;
    visibility: hidden;
    opacity: 0;
    translate: 0 -6px;
    transition: opacity 0.22s linear,
                translate 0.22s cubic-bezier(0.22, 1, 0.30, 1),
                visibility 0s linear 0.22s;
  }
  .ustbar--acik .ustbar__baglar {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.22s linear,
                translate 0.22s cubic-bezier(0.22, 1, 0.30, 1),
                visibility 0s linear 0s;
  }
  .ustbar__baglar a {
    padding-block: 13px;
    border-top: 1px solid rgba(240, 235, 228, 0.14); /* ayraç, kart değil */
  }
  .ustbar__baglar a:first-child { border-top: 0; }

  /* Dil satırı panelde diğerleri gibi tam satır: sol ayracı bırakır,
     üst ayracı zaten yukarıdaki genel kuraldan alır, tam adı gösterir */
  .ustbar__baglar .ustbar__dil { padding-left: 0; border-left: 0; letter-spacing: normal; }
  .ustbar__dil .dil-kisa { display: none; }
  .ustbar__dil .dil-uzun { display: inline; }

  /* Demo mobilde de canlı: iframe kalıyor, elle gezilebiliyor. Yükseklik artıyor
     çünkü gömülü site burada kendi mobil düzeninde açılıyor. */
  .cerceve__icerik { height: clamp(420px, 68vh, 560px); }




  .iletisim__butonlar { flex-direction: column; align-items: flex-start; }
}

/* Eşikler genişten dara sıralı olmalı: 700 ve 460 blokları daha önce
   720 ve 960'tan ÖNCE duruyordu ve onlar tarafından eziliyordu. */
@media (max-width: 700px) {
  /* Şerit dikeye döner: beş parça bu genişlikte yan yana sıkışınca hiçbiri
     görüntü göstermiyor, hepsi çizgiye dönüyordu. */
  .serit { flex-direction: column; height: clamp(420px, 72vh, 640px); }
  .serit__parca { border-left: 0; border-top: 1px solid var(--ayrac); min-width: 0; min-height: 46px; }
  .serit__parca:first-child { border-top: 0; }
  @keyframes parca-otur {
    from { opacity: 0; translate: 0 -18px; }
    to   { opacity: 1; translate: 0 0; }
  }

  .dizustu { width: 92%; }
  .telefon { top: 16%; width: 26%; }
}

@media (max-width: 460px) {
  /* Dizüstü %7 sağa kayıyor: telefonun üstüne fazla biniyordu. Genişlik aynı
     kaldı, kutunun sağından taşan kısmı hero'nun overflow'u zaten serbest
     bırakıyor, sayfa genişliğini de html/body'deki clip koruyor. */
  .dizustu { width: 96%; margin-right: -7%; }
  /* Telefon dizüstünün altından taşıyor: taşan uç etiketin ve rakamların üstüne
     biniyordu. Bir tık küçülüp bir tık yukarı alındı, kutuya da alt pay verildi
     (yüzde genişlikten hesaplanır, telefonun boyu gibi). */
  .telefon { left: var(--kenar); top: 14%; width: 27%; }
  .hero__cihazlar { padding-bottom: 8%; }

  /* Bölüm başlığı yukarı alınıyor: bölümün üst payı burada 135 piksele çıkıp
     başlıkla bölümün başlangıcı arasında boş bir kuşak bırakıyordu. Başlık
     ortalanıyor, hero'daki mobil hizayla aynı dilde. */
  /* Bölüm başlıkları dar ekranda bölümün başlangıcına yakın duruyor: 16vh'lik
     üst pay burada başlıkla sınırın arasında boş bir kuşak bırakıyordu. */
  /* İçerik sınıra yapışmasın: demo çerçevesi ve şeritler nefes istiyor */
  .isler,
  .fotograf,
  .videolar { padding-top: 68px; }
  /* Bölüm başlıkları dar ekranda ortalı: hero'daki mobil hizayla aynı dil.
     Kartların ve metnin kendisi sola dayalı kalıyor. */
  .isler__yan h2,
  .fotograf__yan h2,
  .videolar__yan h2,
  .rakamlar__baslik { text-align: center; }

  .altbilgi__ic { flex-direction: column; align-items: center; gap: 24px; }
  .altbilgi__marka { justify-items: center; }
  .altbilgi__baglar { justify-content: center; }
  .altbilgi__telif { text-align: center; }

  /* Dar ekranda her rakam tek satıra iniyor: sayı solda, açıklaması sağda.
     Alt alta üç blok halinde sağı boş, uzun bir kolon bırakıyordu. */
  .rakamlar .grid { row-gap: 16px; }
  .rakamlar .rakam {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-top: 14px;
  }
  .rakamlar .rakam > span { margin-left: auto; text-align: right; font-size: 0.9rem; }

  /* Kolaj dar ekranda büyüyor, ikinci kare taşmasın diye biraz küçülüyor */
  .mekan__ana { width: 82%; }
  .mekan__yan { width: 46%; bottom: -7%; border-width: 7px; }
  .cihaz-etiket { font-size: 0.56rem; }

  /* Dar ekranda metin ortalanıyor ve girinti kalkıyor: sola dayalı merdiven
     burada sütunun tamamını kaplayıp en uzun satırı kenara dayıyordu.
     Ölçek merdiveni duruyor, katman hissi ondan geliyor. */
  .hero__icerik { text-align: center; }
  .hero__satir--1 { font-size: 1em;    padding-left: 0; }
  .hero__satir--2 { font-size: 1.3em;  padding-left: 0; }
  .hero__satir--3 { font-size: 1.5em;  padding-left: 0; }
  .hero__metin { margin-inline: auto; }
  .hero__eylem { text-align: center; }

  /* Dikey ritim sıkışır ama üst pay sabit barın altında kalmayacak kadar durur */
  .hero { padding-block: 104px 40px; }

}

/* ---------- Dil önerisi çubuğu ----------
   Tarayıcı dili sayfanınkinden farklıysa alttan küçük bir hap belirir
   (kurulumu js/main.js'te). Yönlendirme yok: ziyaretçi kendi seçer,
   kapatan ya da dil anahtarını kullanan bir daha görmez. */
.diloneri {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(92vw, 560px);
  padding: 11px 11px 11px 20px;
  /* Buzlu cam: zeminin %17 şeffaf hali + bulanıklık. Üst barla aynı aile,
     alttaki koyu bölümlerin üstünde de premium duruyor. */
  background: rgba(251, 250, 247, 0.83);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--metin);
  border: 1px solid var(--ayrac);
  border-radius: var(--kose-hap);
  box-shadow: 0 14px 34px rgba(31, 27, 24, 0.16);
  animation: diloneri-gel 0.5s cubic-bezier(0.22, 1, 0.30, 1) both;
}
/* Giriş transform'la kayar, translate'e DOKUNMAZ: yatay ortalama translate'te
   duruyor ve mobil düzen onu sıfırlıyor; keyframe translate yazsaydı hangi
   düzendeysek onu ezerdi. transform ile translate ayrı özellik, birleşirler. */
@keyframes diloneri-gel {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-transparency: reduce) {
  .diloneri {
    background: var(--zemin);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.diloneri p { margin: 0; font-size: 0.87rem; color: var(--metin-2); }
.diloneri__git {
  color: var(--baglanti);
  font-size: 0.87rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.diloneri__kapat {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ayrac);
  border-radius: 50%;
  background: none;
  color: var(--metin-2);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.diloneri__kapat:hover { color: var(--metin); }

/* Dar ekranda tek satır sığmıyor: hap flex'te kalınca metin, sabit genişlikli
   bağlantı ve düğmenin artığına sıkışıp beşe bölünüyordu. Düzen değişir:
   kenardan kenara kart, metin üstte iki satır, bağlantı altta kendi satırında,
   kapatma sağ üstte. */
@media (max-width: 560px) {
  .diloneri {
    left: 16px;
    right: 16px;
    bottom: 14px;
    translate: 0 0;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 12px 14px;
    padding: 16px 14px 18px 20px;
    border-radius: 18px;
  }
  .diloneri p { grid-column: 1; grid-row: 1; font-size: 0.88rem; line-height: 1.5; }
  .diloneri__kapat { grid-column: 2; grid-row: 1; width: 30px; height: 30px; }
  .diloneri__git { grid-column: 1 / -1; grid-row: 2; justify-self: start; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .diloneri { animation: none; }
}