/* Elle yazılan düzeltmeler.

   En son yüklenir; bilesenler.css'teki karşılıklarını ezer. O dosya
   Astro'dan otomatik çıkarıldığı için oraya elle bir şey yazılmamalı —
   yeniden çıkarınca silinir. */

/* Atölye ilerleme rayı — bekleyen adımlar.

   Özgün kural rengi var(--cizgi-koyu) veriyordu; o bir ÇİZGİ rengi, yazı
   rengi değil. Sonuç: hem açık hem koyu temada 1.8:1 kontrast — okunmuyordu.
   İkincil metin rengi doğru karşılık: iki temada da ~7:1. */
/* Masa lambasının ışık rengi. Ampul rengi, halesi ve hüzmesi buradan
   geliyor; tek yerden ayarlanabilsin diye token. */
:root { --lamba-isik: #FFD38F; }

.ray__ogesi { color: var(--is-yumusak); }

/* Aynı sorun showroom/proje meta satırlarında da olabilir diye
   çizgi renginin yazıda kullanıldığı yer kalmasın. */

/* ==========================================================================
   Fotoğraf üstü perdeler — temadan bağımsız
   ==========================================================================
   Hero ve atölye bandında fotoğrafın üstüne okunurluk perdesi seriliyor ve
   yazılar hep açık renk. Perde var(--is), yazılar var(--kum) kullanıyordu;
   bu jetonlar koyu temada ters çevrilince perde beyaz tüle döndü ve fotoğraf
   soldu, yazılar da tülün üstünde koyu kaldı.

   Buradaki renkler bilerek sabit: perde her zaman koyu, üstündeki yazı her
   zaman açık — hangi tema seçili olursa olsun. */

:root { --perde: #16130F; --perde-rgb: 22 19 15; --perde-uzeri: #F2EEE8; }

.giris::after {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--perde) 90%, transparent) 0%,
      color-mix(in srgb, var(--perde) 72%, transparent) 42%,
      color-mix(in srgb, var(--perde) 34%, transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--perde) 60%, transparent) 0%,
      transparent 45%);
}
.bant::after {
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--perde) 88%, transparent) 0%,
    color-mix(in srgb, var(--perde) 66%, transparent) 55%,
    color-mix(in srgb, var(--perde) 40%, transparent) 100%);
}

.giris__ic,
.giris__baslik,
.bant__soz          { color: var(--perde-uzeri); }
.giris__rozet       { color: color-mix(in srgb, var(--perde-uzeri) 82%, transparent); }
.giris__metin       { color: color-mix(in srgb, var(--perde-uzeri) 88%, transparent); }
.bant__etiket       { color: color-mix(in srgb, var(--perde-uzeri) 80%, transparent); }
.bant__metin        { color: color-mix(in srgb, var(--perde-uzeri) 86%, transparent); }

/* ==========================================================================
   Hero butonları — ikisi de beyaz
   ==========================================================================
   Koyu perdenin üstünde duruyorlar; iki buton da beyaz zemin, koyu yazı. */

.giris__dugmeler .dugme {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #16130F;
}
.giris__dugmeler .dugme .ok { color: inherit; }
.giris__dugmeler .dugme:hover {
  background: color-mix(in srgb, #FFFFFF 88%, #16130F);
  border-color: color-mix(in srgb, #FFFFFF 88%, #16130F);
}

/* ==========================================================================
   Tema anahtarı — ilk boyamada doğru görünsün
   ==========================================================================
   Butonun görünümü [aria-pressed] niteliğine bağlıydı; o niteliği site.js
   koyuyor ve script defer olduğu için sayfa boyandıktan SONRA çalışıyordu.
   Sonuç: koyu temada her sayfa geçişinde buton bir an açık hâlde görünüp
   siyaha atlıyordu.

   Artık görünüm doğrudan temaya bağlı: --anahtar-koyu jetonu 0 (açık) ya da
   1 (koyu) oluyor, konum ve ikonlar bu sayıdan hesaplanıyor. Jeton <head>
   içindeki satır içi script'le boyamadan önce ayarlandığı için sıçrama yok.
   aria-pressed erişilebilirlik için kalıyor, görünümü artık o sürmüyor. */

:root { --anahtar-koyu: 0; }
:root[data-tema='koyu'] { --anahtar-koyu: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='acik']) { --anahtar-koyu: 1; }
}

/* Yuva: açıkta ılık, koyuda derin — jetonlar zaten temaya duyarlı */
.tema-anahtari__yuva,
.tema-anahtari[aria-pressed='true'] .tema-anahtari__yuva {
  background-image: linear-gradient(150deg, var(--zemin-kart), var(--zemin-dolgu));
  border-color: var(--cizgi-tema-koyu);
}

/* Top: konum ve renk jetondan */
.tema-anahtari__top,
.tema-anahtari[aria-pressed='true'] .tema-anahtari__top {
  transform: translateX(calc(var(--anahtar-koyu) * 20px));
  background: var(--vurgu);
  color: var(--vurgu-uzeri);
}

/* İkonlar: güneş sönerken hilal doğar */
.tema-anahtari__gunes,
.tema-anahtari[aria-pressed='true'] .tema-anahtari__gunes {
  opacity: calc(1 - var(--anahtar-koyu));
  transform: rotate(calc(var(--anahtar-koyu) * 80deg))
             scale(calc(1 - var(--anahtar-koyu) * 0.6));
}
.tema-anahtari__ay,
.tema-anahtari[aria-pressed='true'] .tema-anahtari__ay {
  opacity: var(--anahtar-koyu);
  transform: rotate(calc((1 - var(--anahtar-koyu)) * -80deg))
             scale(calc(0.4 + var(--anahtar-koyu) * 0.6));
}
.tema-anahtari__isinlar,
.tema-anahtari[aria-pressed='true'] .tema-anahtari__isinlar {
  opacity: calc(1 - var(--anahtar-koyu));
  transform: scale(calc(1 - var(--anahtar-koyu) * 0.8));
}
.tema-anahtari__yildiz,
.tema-anahtari[aria-pressed='true'] .tema-anahtari__yildiz {
  opacity: calc(var(--anahtar-koyu) * 0.9);
  transform: scale(calc(0.2 + var(--anahtar-koyu) * 0.8));
}

/* ==========================================================================
   Gezinme göstergesi — koyu temada beyaz gradyan
   ==========================================================================
   Açık temada koyu gradyan, koyu temada beyaz gradyan; yazı da ona göre. */

:root {
  --gosterge-a: rgb(0 0 0 / 0.68);
  --gosterge-b: rgb(0 0 0 / 0.55);
  --gosterge-yazi: #FFFFFF;
}
:root[data-tema='koyu'] {
  --gosterge-a: rgb(255 255 255 / 0.68);
  --gosterge-b: rgb(255 255 255 / 0.55);
  --gosterge-yazi: #14110E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='acik']) {
    --gosterge-a: rgb(255 255 255 / 0.68);
    --gosterge-b: rgb(255 255 255 / 0.55);
    --gosterge-yazi: #14110E;
  }
}

.gezinme__vurgu {
  background: linear-gradient(105deg, var(--gosterge-a) 0%, var(--gosterge-b) 100%);
}
.gezinme__ba--vurgulu,
.gezinme__ba--vurgulu:hover { color: var(--gosterge-yazi); }
.gezinme__ba--vurgulu:focus-visible { outline-color: var(--gosterge-yazi); }

/* ==========================================================================
   TELEFON DÜZENLEMELERİ
   ========================================================================== */
@media (max-width: 600px) {

  /* --- Ana menü: daha derli toplu ---
     Öğeler 50px yüksekliğinde, dev punto ile açılıyordu; menü ekranın
     %42'sini kaplıyordu. Punto ve iç boşluk küçültüldü, dokunma hedefi
     yine de 44px'in altına düşmüyor. */


  /* --- Footer: "Sayfalar" sütunu gizlensin ---
     O sütundaki dört bağlantı zaten hamburger menüde var; telefonda
     footer'ı gereksiz uzatıyordu. */
  .dipnot__sutun--sayfalar { display: none; }

  /* --- Fotoğraf perdeleri: telefonda dikey ---
     Perde 100deg, yani neredeyse yatay. Geniş ekranda soldaki yazıyı
     koyultup sağda fotoğrafı açık bırakıyor. Dar ekranda gradyanın kısa
     kenarına sıkışıyor ve %72–90 aralığı tüm alanı kaplıyor — fotoğraf
     hiç görünmüyordu. Telefonda dikeye çevriliyor: üstte fotoğraf açık,
     yazının oturduğu altta koyu. */
  /* color-mix(... transparent) beklenen opaklığı vermiyordu — fotoğraf
     perdenin altında kayboluyordu. Doğrudan alfa yazımı kullanılıyor. */
  /* Durakların yeri yazının nerede durduğuna göre seçildi. Telefonda
     yazı bloğu girişin %11'i ile %93'ü arasını kaplıyor; yani fotoğrafın
     "boş" kaldığı tek şerit en üstteki ~70px. Eski dağılım (%18 üstte,
     %62 ortada) üst yazıyı fotoğrafın parlak pencere bölgesine
     bırakıyordu: rozetin ve giriş metninin en düşük kontrastı 1.6:1,
     başlığınki 2.1:1 çıkıyordu — fotoğrafın gerçek pikselleri tuvale
     çizilip ölçüldü. Yazının olduğu her yer en az %80 perde altında
     kalacak biçimde yeniden dağıtıldı; en üstteki şerit %35'e açılıp
     fotoğrafı gösteriyor. Ölçülen yeni en düşük değerler: rozet ve
     metin 6.2:1, başlık 9.0:1. */
  .giris::after {
    background: linear-gradient(to top,
      rgb(var(--perde-rgb) / 0.90) 0%,
      rgb(var(--perde-rgb) / 0.80) 88%,
      rgb(var(--perde-rgb) / 0.35) 100%);
  }
  /* Bantta da aynı ölçüm yapıldı: yazı bandın %51–%83 aralığında
     duruyor, eski dağılımda oranın en düşük kontrastı 1.8:1 (etiket) ve
     2.7:1 (söz) çıkıyordu. Perde yazının olduğu şeride toplanıp altta
     ve üstte açılıyor — fotoğraf iki uçtan da görünüyor. Yeni değerler:
     etiket 7.0:1, söz 9.8:1. */
  .bant::after {
    background: linear-gradient(to top,
      rgb(var(--perde-rgb) / 0.40) 0%,
      rgb(var(--perde-rgb) / 0.78) 42%,
      rgb(var(--perde-rgb) / 0.80) 90%,
      rgb(var(--perde-rgb) / 0.35) 100%);
  }
}

/* ==========================================================================
   Beliren başlık — kelime bütünlüğü
   ==========================================================================
   Harfler tek tek inline-block olduğu için tarayıcı iki harf arasından da
   satır kırıyordu ("yoktur" → "yo" / "ktur"). Kelime kutusu kırılmayı
   yalnızca kelime aralarına bırakır. */
.bb__kelime { display: inline-block; white-space: nowrap; }
.bb__bosluk { white-space: pre; }

/* Rakamların yanındaki ek (yıl, +) çok küçük kalıyordu. */
.sayi__ek { font-size: 0.66em; }

/* ---------- Footer: adres → harita bağlantısı ----------
   Konum, panelde sosyal listesindeki "Konum" satırından açılıyor. Açıkken
   footer'daki adres tıklanabilir oluyor; adresin altına küçük bir "Haritada
   aç" ipucu düşüyor ki bağlantı olduğu anlaşılsın — adres metni tek başına
   link gibi durmuyordu. */
.dipnot__harita {
  display: grid;
  gap: 2px;
  text-decoration: none;
}
.dipnot__haritaEtiket {
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.72;
  transition: opacity 160ms ease;
}
.dipnot__harita:hover .dipnot__haritaEtiket,
.dipnot__harita:focus-visible .dipnot__haritaEtiket { opacity: 1; }

/* ==========================================================================
   Duyuru — bayram görseli, tanıtım filmi
   ==========================================================================
   Tek biçim kaldı: açılır pencere. Sayfa içine gömülen hâli (girişin
   sağındaki çerçeve ve girişin altındaki bölüm) kaldırıldı; onlara ait
   .duyuru__ic, .duyuru__cerceve, .duyuru__yazi ve .giris__duyuru
   kuralları da buradan çıktı. */

/* Gömme videonun kabı. Bu iki kural sayfa bloğunun içinde duruyordu ve
   blok silinirken onlar da gitti — oysa yerleşimle ilgisi yok, ortamın
   kendisine ait. Kural olmayınca iframe kendi varsayılan ölçüsünde
   (300×150) kalıyor, kap ise JS'in verdiği boyuta açılıyor: pencerenin
   büyük kısmı siyah kalıyor, YouTube kutucuğu sol üst köşede duruyor ve
   kendi başlık/kanal katmanını gösteriyordu. */
.duyuru__gomme { position: relative; aspect-ratio: 16 / 9; background: #000; }
.duyuru__gomme iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Açılır pencere ----------
   Kutu içeriğe göre boyutlanıyor, sabit genişlikte değil. Sebep: dikey
   çekilmiş bir video (1080×1920) sabit 680px genişlikte 1182px yüksekliğe
   çıkıyor ve pencereye sığmıyordu — kullanıcı videoyu görmek için kutunun
   içinde kaydırmak zorunda kalıyordu. Artık ölçüyü yükseklik belirliyor:
   ortam ekrana sığacak kadar küçülüyor, kutu da onun genişliğini alıyor.
   Böylece dikey de yatay da aynı biçimde, kaydırmasız duruyor. */
.duyuru-pencere { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.duyuru-pencere[hidden] { display: none; }
.duyuru-pencere__perde { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.62); }

.duyuru-pencere__kutu {
  position: relative;
  display: flex;
  /* Pencerede yalnız görsel/video var; yazı sayfa biçiminde gösteriliyor. */
  flex-direction: column;
  width: auto;
  min-width: min(300px, 90vw);
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;              /* kaydırma yok; içerik zaten sığıyor */
  /* Kutunun kendi zemini yok: video kendi rengini veriyor, yazı paneli de
     yarı saydam duruyor. Dolu bir zemin ikisinin arasında kenar çizgisi
     gibi görünüyordu. */
  background: transparent;
  color: var(--metin, var(--is));
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

/* Ortam esneyen parça: yer kalmayınca küçülen o oluyor.
   min-height:0 olmadan flex öğesi kendi doğal boyunun altına inmiyor. */
.duyuru-pencere__ortam {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  background: #000;
}
.duyuru-pencere__ortam .duyuru__ortam {
  /* Betik çalışmadan önceki ilk kare için taban kurallar. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}
/* Ölçü hesaplandıktan sonra tavanlar kalkıyor: yalnız bir ekseni kırpan
   bir sınır kalırsa video eziliyor (yatay videoda oran 1.78 yerine 1.07
   çıkıyordu). Kesin ölçüyü js/duyuru.js veriyor. */
.duyuru-pencere__ortam .duyuru__ortam[data-oturdu],
.duyuru-pencere__ortam [data-oturdu] {
  max-width: none;
  max-height: none;
}

/* Pencerede video ve YouTube da oynuyor; oynatıcı kabı ortamın kendi
   ölçüsüne büzülmeli. Blok olarak kutunun tamamını kaplıyor ve alttaki
   denetim çubuğu (left:0; right:0) videonun dışına taşıyordu. */
.duyuru-pencere__ortam .oynatici {
  display: inline-block;
  max-width: 100%;
  flex: 0 0 auto;
}

/* ---------- Kendi oynatıcımız ----------
   Yerleşik <video controls> yerine kullanılıyor: orada indirme, tam ekran
   ve üç nokta menüsü tarayıcıya göre değişiyor, controlsList de Safari'de
   güvenilir değil. Burada yalnızca oynat, ilerleme ve ses var; görünüm
   her tarayıcıda birebir aynı. */
.oynatici { position: relative; display: block; line-height: 0; }
.oynatici video { display: block; }

.oynatici__cubuk {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62) 55%);
  line-height: 1;
}
.oynatici__dugme {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  transition: background 140ms ease;
}
.oynatici__dugme:hover { background: rgba(255, 255, 255, 0.28); }
.oynatici__dugme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.oynatici__ilerleme {
  flex: 1 1 auto; position: relative; height: 4px; cursor: pointer;
  border-radius: 999px; background: rgba(255, 255, 255, 0.3);
}
/* Dokunma alanı çubuktan geniş: 4px'lik şeride isabet ettirmek zor. */
.oynatici__ilerleme::before { content: ''; position: absolute; inset: -9px 0; }
.oynatici__dolu {
  display: block; height: 100%; width: 0;
  border-radius: 999px; background: #fff;
}
.oynatici__ilerleme:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.oynatici__sure {
  flex: 0 0 auto; color: #fff; font-size: 12px;
  font-variant-numeric: tabular-nums; opacity: 0.9;
}

/* Ortadaki büyük oynat düğmesi (js/oynatici.js ekliyor).
   Çubuktaki 30px'lik düğmeye, hele telefonda, nişan almak zordu. */
.oynatici__buyuk {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid; place-items: center;
  width: 74px; height: 74px; padding: 0 0 0 4px;   /* ok işareti optik olarak sağa kaçık */
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 16, 12, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: opacity 160ms ease, scale 160ms ease, background 160ms ease;
}
.oynatici__buyuk:hover { background: rgba(20, 16, 12, 0.66); scale: 1.06; }
.oynatici__buyuk:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Oynarken kayboluyor; tıklamayı da yutmasın diye görünmezken kapalı. */
.oynatici[data-duruyor="hayir"] .oynatici__buyuk {
  opacity: 0; scale: 0.9; pointer-events: none;
}
/* Beklerken de kaybolsun, yerine dönen halka geçiyor. */
.oynatici[data-bekliyor] .oynatici__buyuk { opacity: 0; pointer-events: none; }

/* Ağır video basıldığında bir süre ses vermiyor; bir şey olduğu görünsün. */
.oynatici[data-bekliyor]::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: 42px; height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 999px;
  animation: oynatici-doner 720ms linear infinite;
  pointer-events: none;
}
@keyframes oynatici-doner { to { rotate: 360deg; } }

/* Sürüklerken çubuk kalınlaşıyor, parmağın altında kaybolmasın. */
.oynatici__ilerleme { transition: height 120ms ease; touch-action: none; }
.oynatici__ilerleme:hover, .oynatici__ilerleme:active { height: 6px; }

/* ---- ses düzeyi ---------------------------------------------------
   Şerit normalde kapalı duruyor, çubukta yer kaplamasın; imleç ses
   düğmesine gelince ya da odak oraya düşünce açılıyor. */
.oynatici__ses { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.oynatici__sesyol {
  position: relative; height: 4px; cursor: pointer;
  width: 0; overflow: hidden;
  border-radius: 999px; background: rgba(255, 255, 255, 0.3);
  transition: width 180ms ease, opacity 140ms ease;
  opacity: 0; touch-action: none;
}
.oynatici__ses:hover .oynatici__sesyol,
.oynatici__ses:focus-within .oynatici__sesyol {
  width: 62px; opacity: 1;
}
.oynatici__sesyol::before { content: ''; position: absolute; inset: -9px 0; }
.oynatici__sesdolu {
  display: block; height: 100%; width: 100%;
  border-radius: 999px; background: #fff;
}
.oynatici__sesyol:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Dokunmatikte imleç yok, şerit hiç açılamıyordu: orada hep görünür.
   Dar ekranda ise yer yok, düğme tek başına kalıyor. */
@media (hover: none) {
  .oynatici__sesyol { width: 52px; opacity: 1; transition: none; }
}
@media (hover: none) and (max-width: 420px) {
  .oynatici__sesyol { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oynatici__buyuk { transition: none; }
  .oynatici[data-bekliyor]::after { animation-duration: 2s; }
}

/* Gömme videonun ölçüsünü de js/duyuru.js veriyor (16:9 üzerinden).
   Burada sabit genişlik bırakmak JS'in verdiği değeri eziyordu. */
.duyuru-pencere__ortam .duyuru__gomme[data-oturdu] { max-width: none; max-height: none; }

/* Yazı hiç küçülmesin, ortam küçülsün. */
.duyuru-pencere__kapat {
  /* z-index 1'di. Pencerede video/YouTube varken oynatıcının kalkanı
     (z-index 2) ve denetim çubuğu (3) kapatma düğmesinin üstüne
     biniyordu: çarpıya basmak pencereyi kapatmıyor, videoyu
     oynatıp duraklatıyordu. Kapatma her şeyin üstünde kalmalı. */
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: rgba(10, 8, 6, 0.55); color: #fff; cursor: pointer;
}
.duyuru-pencere__kapat:hover { background: rgba(10, 8, 6, 0.78); }

/* Pencere açıkken arka plan kaymasın. */
body.duyuru-acik { overflow: hidden; }

/* ==========================================================================
   Telefon düzeni
   ==========================================================================
   Masaüstü ölçüleri telefonda olduğu gibi kullanılınca ekranın çoğu boşluğa
   gidiyordu: bölüm aralıkları 96px, proje satırında sol tarafta 48px'lik
   numara sütunu, görsele 271px kalıyordu. Burada yalnızca telefonda
   geçerli olan ayarlamalar var; masaüstü görünümü değişmiyor. */
@media (max-width: 640px) {

  /* Bölüm aralıkları: 96px üstte + 96px altta, iki bölüm arasında 192px
     boşluk demekti — ekranın yarısından fazlası boş kalıyordu. */
  .bolum { padding-block: 3.25rem; }
  .bolum--genis { padding-block: 4rem; }


  /* Üç rakam ikişerli dizilince sonuncusu tek başına kalıyordu. */
  .sayilar { grid-template-columns: 1fr; gap: 1.1rem; }

  /* Girişteki iki düğme farklı genişlikteydi; alt alta gelince eğri
     duruyordu. Kabın kendisi de içeriğe göre daralıyordu, onu da açtık. */
  .giris__dugmeler {
    display: grid; gap: 0.6rem;
    width: 100%; justify-self: stretch;
  }
  .giris__dugmeler .dugme { width: 100%; }

  /* Metin bağlantıları parmakla zor tutuluyordu (21–26px). Parmak ucu
     yaklaşık 40px; dokunma alanını oraya çıkarıyoruz. Görünen yazı
     büyümüyor, yalnızca tıklanabilir alan genişliyor.

     Sütunun kendi 8px aralığı da kalkıyor: dolgu zaten ayırıyor, ikisi
     birden olunca bağlantı başına 54px düşüyor ve liste dağınık
     görünüyordu. */
  .dipnot__sutun .baglanti { padding-block: 8px; display: inline-block; }
  /* "Tümünü gör" yazısı daha küçük puntoda; 40px'e çıkması için biraz
     daha dolgu gerekiyor. */
  .bolum-basligi .baglanti { padding-block: 11px; display: inline-block; }
  .dipnot__sutun { gap: 0; }
  /* Adres bloğu bağlantı değil; kendi boşluğu kalsın. */
  .dipnot__sutun .dipnot__adres { margin-top: 2px; }
  /* Yasal metinlerin içindeki e-posta/telefon bağlantıları da aynı ölçüde. */
  .metin-govde a { padding-block: 10px; display: inline-block; }

  /* Logo altındaki yazı 9px'ti — okunmuyordu. */
  .marka__alt { font-size: 10.5px; }

  /* ---------- Telefonda sayfayı kısaltma ----------
     Ana sayfa telefonda 9.5 ekran boyundaydı; ziyaretçi kaydırmaktan
     yoruluyordu. En çok yeri iki bölüm alıyordu: süreç (1546px) ve
     seçilmiş işler (1399px). Aşağıdakiler yalnızca boşlukları ve
     dekoratif parçaları kısıyor — hiçbir bilgi kaldırılmıyor. */

  /* Süreç görseli telefonda 419px yer kaplıyordu. Gizlemek yerine
     küçültüyoruz: bölümün ne anlattığını gösteriyor ama yer yemiyor. */
  .surec__gorsel { aspect-ratio: 21 / 9; max-height: 150px; }
  .surec__gorsel img { width: 100%; height: 100%; object-fit: cover; }

  /* Adımlar arası boşluk: 5 adım × 183px idi. */
  .surec-adim { padding-block: 0.85rem; gap: 0.35rem 0.75rem; }
  .surec__ic { gap: 1.25rem; }

  /* Bölüm başlıkları ile içerik arası. */
  .bolum-basligi { margin-bottom: 1.1rem; }

  /* Footer telefonda 1142px'e çıkıyordu: dört sütun alt alta dizilirken
     aralarında 40px boşluk kalıyordu. Dokunma alanlarını küçültmeden
     yalnızca sütun aralığını daraltıyoruz. */
  .dipnot__ag { gap: 22px; }
  .dipnot__ust { gap: 1rem; }
  .dipnot__sosyal { margin-top: 1.25rem; }

  /* Footer'ın üstünde 96px + 40px = 136px boş dolgu vardı; içerik bitince
     ekran boyunca hiçbir şey görünmeden kaydırılıyordu. */
  .dipnot { padding-block: 2.5rem 1.5rem; }
  .dipnot__ag { padding-block: 1.5rem; }

  /* "Ölçen biz, kesen biz, monte eden biz" bandı telefonda 461px'ti.
     Fotoğraf burada dekor; asıl olan yazı. Bandı inceltiyoruz. */
  .bant { padding-block: 3rem; }
  .bant__soz { font-size: clamp(1.6rem, 8vw, 2.4rem); }

  /* Atölye çağrısındaki plan listesi (Tek duvar / L planı / U planı)
     telefonda 349px yer kaplıyor ve aynı seçim zaten Atölye sayfasının
     ilk adımında yapılıyor. Burada metin ve düğme yeterli. */
  .atolye-cagri .plan-ozet { display: none; }

  /* ---------- Showroom girişi ----------
     Giriş bloğu 471px'ti: metin, altında 40px boşlukla plan sayıları,
     onların da rakamları 36px. Telefonda sayılar bir bakışta okunacak
     kadar küçük olsa yeter; asıl içerik listenin kendisi. */
  .showroom-giris { padding-block: 2.5rem 1.5rem; }
  .showroom-giris__alt {
    gap: 1rem; margin-top: 1.5rem; padding-top: 1rem;
    align-items: center;
  }
  .sayim { gap: 1.25rem; flex: 1 1 auto; }
  .sayim__oge { gap: 0.1rem; }
  .sayim__adet { font-size: 1.5rem; }
  .showroom-cagri { padding-top: 2rem; gap: 1rem; }

  /* Giriş bloğunun altında 24px, listenin üstünde 52px vardı; ikisi
     üst üste binince sayımla ilk proje arasında 76px boşluk kalıyordu.
     Zaten çizgiyle ayrılıyorlar. */
  .showroom-giris + .bolum { padding-top: 1.25rem; }

  /* Proje detayındaki "Süre / Modül / Özel çözüm" tek sütunda 24px
     aralıkla diziliyordu, 217px yer yiyordu. Değerler kısa; künye
     bloğuyla aynı düzende iki sütun daha derli toplu. */
  .detaylar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* ---------- Atölye: plan seçimi ----------
     Üç kart alt alta 1097px yer kaplıyordu; her kartın içindeki çizim
     tek başına 229px. Telefonda çizimi küçültüp yana alıyoruz: kart
     bir satıra iniyor, seçim ekranı bir bakışta görünüyor. */
  .secim-kart__ic {
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas: 'cizim ad' 'cizim not';
    align-items: center;
    gap: 0.15rem 0.9rem;
    padding: 0.85rem;
  }
  .secim-kart__cizim { grid-area: cizim; align-self: center; }
  .secim-kart__ad    { grid-area: ad; align-self: end; font-size: 1rem; }
  .secim-kart__not   { grid-area: not; align-self: start; }
}

/* ==========================================================================
   Sabit balonlar — Instagram
   ==========================================================================
   WhatsApp balonuyla aynı ölçü ve gölge dilinde; onun ızgarasında hemen
   üstünde duruyor. WhatsApp kapalıysa .balonlar kabıyla aynı köşede tek
   başına çıkıyor. */
.balonlar {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid; justify-items: end; gap: 0.75rem;
}

.balon {
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; text-decoration: none;
  transition: transform 160ms cubic-bezier(.22,1,.36,1),
              box-shadow 160ms cubic-bezier(.22,1,.36,1);
}
/* Açıkken logo yerine çarpı — WhatsApp balonuyla aynı davranış ve aynı
   dönme/ölçek geçişi. İki simge de aynı ızgara gözünde üst üste duruyor. */
.balon__logo, .balon__carpi {
  grid-area: 1 / 1;
  transition: opacity var(--h-orta, 260ms) var(--e-yumusak, cubic-bezier(.22,1,.36,1)),
              transform var(--h-orta, 260ms) var(--e-giris, cubic-bezier(.22,1,.36,1));
}
.balon__carpi { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.balon[aria-expanded='true'] .balon__logo { opacity: 0; transform: rotate(90deg) scale(0.5); }
.balon[aria-expanded='true'] .balon__carpi { opacity: 1; transform: rotate(0) scale(1); }

.balon:hover { transform: translateY(-2px) scale(1.04); }
.balon:active { transform: translateY(0) scale(0.98); }
.balon:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; }

/* Instagram'ın kendi marka geçişi. Düz mor yerine gerçek gradyan
   kullanılıyor ki WhatsApp'ın yeşiliyle aynı tanınırlıkta olsun. */
.balon--ig {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 10px 26px -10px rgba(214, 36, 159, 0.75);
  border: 0; cursor: pointer; padding: 0;
}

/* ---------- Instagram penceresi ----------
   WhatsApp penceresiyle aynı ölçü ve yerleşim dili. Mesaj kutusu yok:
   Instagram üçüncü taraf sitelerden mesaj göndermeye izin vermiyor,
   ziyaretçi profile ya da DM ekranına aktarılıyor. */
.ig { display: grid; justify-items: end; gap: 0.75rem; }

.ig__pencere {
  position: relative;
  width: min(300px, calc(100vw - 2rem));
  background: var(--zemin-kart, var(--kagit)); color: var(--metin, var(--is));
  border: 1px solid var(--cizgi-tema, var(--cizgi)); border-radius: 14px;
  padding: 1rem 1rem 0.9rem;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.55);
  animation: ig-gir 220ms cubic-bezier(.22,1,.36,1) both;
}
.ig__pencere[hidden] { display: none; }
@keyframes ig-gir {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.ig__kapat {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: none; color: var(--metin-yumusak, var(--is-yumusak)); cursor: pointer;
}
.ig__kapat:hover { background: var(--kil); color: var(--metin, var(--is)); }

/* Üst satır: avatar solda, üç sayı sağında — telefondaki profil ekranı gibi. */
.ig__ust { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
/* Instagram'ın hikâye halkası: dıştan içe gradyan çember, ince kart
   rengi boşluk, sonra fotoğraf. Önce tek renk mor box-shadow'du; gerçek
   profilde halka gradyan olduğu için öyle çevrildi. box-shadow gradyan
   alamadığı için halka kabın kendi zemini, boşluk ::before. */
.ig__avatar {
  position: relative;
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 999px;
  display: grid; place-items: center;
  background: conic-gradient(from 215deg,
    #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75);
}
.ig__avatar::before {
  content: ''; position: absolute; inset: 2.5px;
  border-radius: 999px;
  background: var(--zemin-kart, var(--kagit));
}
/* Panelden seçilen fotoğraf kareyi tam doldursun; logo kullanılıyorsa
   ortada küçük dursun. */
.ig__avatar img {
  position: relative;               /* halkanın ve boşluğun üstünde */
  width: 54px; height: 54px; border-radius: 999px;
  object-fit: cover; background: var(--kil);
}
.ig__avatar img[src*="/logo/"] {
  width: 30px; height: auto; border-radius: 0;
  object-fit: contain; background: none;
}
/* Fotoğraf yerine monogram düştüğünde: koyu monogram aydınlık temada,
   açık monogram karanlık temada. Tek sürüm basılınca logo kendi
   zemininin rengine giriyor ve görünmez oluyordu. */
.ig__marka--koyuTema { display: none; }
[data-tema="koyu"] .ig__marka--acikTema { display: none; }
[data-tema="koyu"] .ig__marka--koyuTema { display: block; }

.ig__sayilar {
  flex: 1 1 auto; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  text-align: center;
}
.ig__sayi { display: grid; gap: 1px; }
.ig__sayi dt {
  font-size: 0.9375rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ig__sayi dd {
  margin: 0; font-size: 0.6875rem; letter-spacing: 0.02em;
  color: var(--metin-yumusak, var(--is-yumusak));
}

.ig__kimlik { display: grid; gap: 1px; margin-bottom: 0.2rem; min-width: 0; }
.ig__kimlik strong { font-size: 0.9375rem; line-height: 1.25; }
.ig__kimlik em {
  font-style: normal; font-size: 0.8125rem;
  color: var(--metin-yumusak, var(--is-yumusak));
}

/* Instagram'da adın altındaki gri kategori satırı. */
.ig__kategori {
  font-size: 0.8125rem; line-height: 1.3;
  color: var(--metin-yumusak, var(--is-yumusak));
  margin-bottom: 0.35rem;
}

.ig__metin {
  font-size: 0.8125rem; line-height: 1.45;
  color: var(--metin, var(--is));
  margin-bottom: 0.85rem;
  /* Uzun biyografi pencereyi büyütmesin. Biyografide üç telefon satırı
     var; 7.5em'de sonuncusu kaydırmadan görünmüyordu. */
  max-height: 9.5em; overflow-y: auto;
}

.ig__dugmeler { display: grid; gap: 0.5rem; }
.ig__dugme {
  display: grid; place-items: center; min-height: 40px;
  border-radius: 10px; text-decoration: none;
  font-size: 0.875rem; font-weight: 600;
  border: 1px solid var(--cizgi-tema, var(--cizgi));
  color: var(--metin, var(--is));
  transition: background 140ms ease, border-color 140ms ease;
}
.ig__dugme:hover { background: var(--kil); }
/* Instagram'ın kendi profil ekranındaki iki düğme: birincil mavi,
   ikincil gri. Gri, Instagram'da olduğu gibi temayla değişiyor. */
.ig__dugme--ana {
  color: #fff; border-color: transparent;
  background: #4F5BD5;
}
.ig__dugme--ana:hover { background: #3F4AC0; }

.ig__dugme:not(.ig__dugme--ana) {
  background: #EFEFEF; border-color: transparent; color: #101010;
}
.ig__dugme:not(.ig__dugme--ana):hover { background: #E2E2E2; }
[data-tema="koyu"] .ig__dugme:not(.ig__dugme--ana) {
  background: #363636; color: #F2EEE8;
}
[data-tema="koyu"] .ig__dugme:not(.ig__dugme--ana):hover { background: #444; }

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

/* Panelde profil fotoğrafı önizlemesi — yuvarlak, gerçek hâline yakın. */
.onizleme--yuvarlak {
  width: 84px; height: 84px; aspect-ratio: 1 / 1;
  border-radius: 999px; object-fit: cover;
}

/* .giris içindeki mutlak konumlu katmanlar buna dayanıyor. */
.giris { position: relative; }

/* ==================================================================
   SHOWROOM — iş kolu kartları ve proje galerisi
   ================================================================== */

.showroom-giris__metin { max-width: 46ch; }

/* ---- iş kolu kartları --------------------------------------------
   Kartlar kabuğun dışına, ekranın sağ kenarına kadar uzanıyor: sağdaki
   kart yarım görününce "devamı var" anlaşılıyor. Sol boşluk kabuğunkiyle
   aynı hizada kalsın diye padding kabuk hesabını tekrarlıyor. */
.dallar { position: relative; padding-block: var(--b-2) var(--b-5); }

.dallar__sabit { position: relative; }

.dallar__yol {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(30rem, 78vw);
  gap: 14px;
  overflow-x: auto;
  /* proximity, mandatory değil: kendi kaydırma animasyonumuz sürerken
     mandatory snap ara karelerde kutuyu çekiştiriyor. */
  scroll-snap-type: x proximity;
  scroll-padding-left: max(var(--kenar), calc((100% - var(--en)) / 2 + var(--kenar)));
  padding-inline: max(var(--kenar), calc((100% - var(--en)) / 2 + var(--kenar)));
  /* Çubuk gizli; yön okları var, çubuk kartların altında çizgi bırakıyordu. */
  scrollbar-width: none;
  /* Şerit yatay kayıyor; parmak dikey sürüklediğinde sayfa kaymalı.
     overscroll-behavior-x: contain, şeridin uçlarında kaydırmanın
     sayfaya zincirlenmesini kesiyor — tarayıcı ekseni daha çabuk
     seçiyor, dikey kaydırma duraksamıyor.

     -webkit-overflow-scrolling: touch kaldırıldı: artık gereksiz ve
     şeridi ayrı bir kaydırma katmanına alıp eksen kilidini geciktiriyor;
     parmak görselin üzerindeyken sayfa kaydırması takılıyordu. */
  overscroll-behavior-x: contain;
}
.dallar__yol::-webkit-scrollbar { display: none; }

.dal {
  position: relative;
  display: block;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: #1b1815;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.dal__foto { position: absolute; inset: 0; display: block; }
.dal__foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dal:hover .dal__foto img,
.dal:focus-visible .dal__foto img { scale: 1.045; }

/* Görsel yüklenmemiş kategori bomboş siyah kalmasın. */
.dal__bos {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #3a322b, #1b1815);
}

/* Yazı fotoğrafın üstünde okunsun diye alttan perde. Katmanı ayrı
   tutuyoruz: görsele filtre uygulamak fotoğrafı da soluklaştırıyordu. */
.dal::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(transparent 38%, rgba(12, 10, 8, 0.72) 100%);
  z-index: 1;
}

.dal__yazi {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 22px 24px;
}
.dal__ad {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.dal__adet {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.72;
}

.dallar__dugme {
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--metin); border-radius: 999px;
  background: transparent; color: var(--metin);
  cursor: pointer;
  transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
}
.dallar__dugme:hover:not(:disabled) { background: var(--metin); color: var(--zemin); }
.dallar__dugme:disabled { opacity: 0.28; cursor: default; }

/* ---- sayfa kayarken sabitlenen şerit -------------------------------
   Bölüm ekrana gelince yerinde çakılıyor, kartlar sayfa kaydırıldıkça
   yana ilerliyor, sonuncuya gelince sayfa akışına dönüyor. Yükseklik ve
   öteleme js/yatay.js tarafından veriliyor; burada yalnız yerleşim var.
   Dar ekranda ve hareket azaltmada nitelik hiç yazılmıyor, bu blok da
   uygulanmıyor. */
.dallar[data-yatay-acik] { padding-block: 0; }

.dallar[data-yatay-acik] .dallar__sabit {
  position: sticky;
  top: var(--ustbar-boy, 84px);
  height: calc(100vh - var(--ustbar-boy, 84px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Şerit ekran dışına taşıyor; kırpılmazsa yatay kaydırma çubuğu çıkıp
     sayfa sağa sola oynuyor. */
  overflow: hidden;
}

.dallar[data-yatay-acik] .dallar__yol {
  /* Kendi kaydırması kapalı: ilerlemeyi sayfa veriyor, biz transform ile
     öteliyoruz — düzen hesabı tetiklenmiyor. */
  overflow: visible;
  scroll-snap-type: none;
  width: max-content;
  will-change: transform;
}


/* ---- proje galerisi ----------------------------------------------
   Kareler yan yana dizilip şerit kaydırılmıyor: büyük fotoğraflarda
   şeridi her karede taşımak tutukluk yapıyor. Kareler üst üste duruyor,
   yalnız opaklık ve ölçek değişiyor — ikisi de birleştirici katmanda. */
/* Yuvarlak köşe ve kırpma .galeri'de: noktalar artık dışında, onları
   sarmıyor. Oklar da yalnız fotoğrafa göre ortalanıyor. */
.galeri { position: relative; border-radius: var(--yuvarlak); overflow: hidden; }
.galeri-kap { display: block; }
.galeri:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; }

.galeri__cerceve {
  position: relative;
  /* 16/9: video karesi de aynı kutuya giriyor, 3/2'de üstünde altında
     siyah bant kalıyordu. */
  aspect-ratio: 16 / 9;
  background: #14110f;
}
.galeri__kare {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  scale: 1.035;
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              scale   900ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Görünmeyen kare tıklamayı yutmasın. */
  pointer-events: none;
}
.galeri__kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeri__kare[data-etkin] { opacity: 1; scale: 1; pointer-events: auto; }

/* Geliş yönü: yeni kare bastığın tuşun tarafından süzülüyor. */
.galeri[data-yon="ileri"] .galeri__kare:not([data-etkin]) { translate: 2% 0; }
.galeri[data-yon="geri"]  .galeri__kare:not([data-etkin]) { translate: -2% 0; }
.galeri__kare[data-etkin] { translate: 0 0; transition-property: opacity, scale, translate; }

.galeri__ok {
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 2;
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 16, 12, 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 18px;
  opacity: 0;
  transition: opacity 200ms ease, background 160ms ease;
}
.galeri:hover .galeri__ok,
.galeri:focus-within .galeri__ok { opacity: 1; }
.galeri__ok:hover { background: rgba(20, 16, 12, 0.66); }
.galeri__ok:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.galeri__ok--sol { left: 14px; }
.galeri__ok--sag { right: 14px; }
/* İmleçsiz aygıtta hover yok; oklar hep görünür. */
@media (hover: none) { .galeri__ok { opacity: 1; } }

/* Noktalar fotoğrafın üstünde değil altında. Üstteyken video karesine
   geçince oynatıcı çubuğunun üstüne biniyor ve karışıyordu. */
.galeri__noktalar {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.galeri__nokta {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cizgi-tema, var(--cizgi));
  transition: width 260ms ease, background 200ms ease;
}
.galeri__nokta[aria-selected="true"] { width: 26px; background: var(--metin, var(--is)); }
.galeri__nokta:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; }

@media (max-width: 640px) {
  .galeri__cerceve { aspect-ratio: 4 / 3; }
  /* Dokunma hedefi 44px altına düşmesin. */
  .galeri__ok { width: 44px; height: 44px; }
  .galeri__ok--sol { left: 8px; }
  .galeri__ok--sag { right: 8px; }
  /* Noktalar görsel olarak 8px kalıyor; tıklama alanı görünmez bir
     katmanla 44px'e çıkıyor, yoksa parmakla isabet ettirmek zor. */
  .galeri__nokta { position: relative; }
  .galeri__nokta::after {
    content: ''; position: absolute; inset: -18px -8px;
  }
  .dal__yazi { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .galeri__kare { transition-duration: 1ms; scale: 1; translate: 0 0; }
  .dal__foto img { transition: none; }
  .dallar__yol { scroll-behavior: auto; }
}

/* ---- iş kolu sayfasındaki işler ----------------------------------
   Giriş ekranındaki iş kolu kartlarıyla aynı kart: tam fotoğraf, yazı
   fotoğrafın içinde altta. Fark yalnız dizilim — kollar yatay kayıyor,
   işler ızgaraya giriyor, sayıları artabilir. */
.isler {
  list-style: none;
  margin: 0 0 var(--b-5);
  padding: 0;
  display: grid;
  /* 300px'te geniş ekranda 4 sütun çıkıp kartlar 313px'e düşüyordu;
     iş kolu kartları 480px. 340 ile 3 sütun ve ~420px kart oluyor. */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 14px;
}

.is__ic {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: #1b1815;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.is__ic:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; }

.is__foto { position: absolute; inset: 0; display: block; }
.is__foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is__ic:hover .is__foto img,
.is__ic:focus-visible .is__foto img { scale: 1.045; }

/* Yazı fotoğrafın üstünde okunsun diye alttan perde — kollardaki ile
   aynı. Katman ayrı: görsele filtre uygulamak fotoğrafı soluklaştırıyor. */
.is__ic::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(transparent 42%, rgba(12, 10, 8, 0.74) 100%);
  z-index: 1;
}

.is__yazi {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: block;
  padding: 20px 22px;
}
.is__ad {
  display: block;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.is__alt {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Fotoğraf sayısı üst köşede: alt köşe yazıya ait. */
.is__adet {
  position: absolute; right: 12px; top: 12px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  /* %50'ydi. Rozet kartın en üstünde, perdenin hiç ulaşmadığı yerde
     duruyor; altına beyaz bir tezgâh ya da pencere denk geldiğinde 11px
     yazının kontrastı 3.6:1'e kadar düşüyordu. %62'de en kötü hâl
     5.4:1. backdrop-filter desteklenmeyen tarayıcıda da tek başına
     yeterli oluyor. */
  background: rgba(12, 10, 8, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .is__yazi { padding: 16px 18px; }
}
@media (hover: none) {
  .is__foto img { transition: none; }
}

/* ---- YouTube gömmesi: kendi çubuğumuz --------------------------------
   Sitede YouTube arayüzü görünmesin diye gömmenin denetimleri kapalı ve
   üstünde saydam bir kalkan var; tıklama iframe'e geçmiyor, kimse kazara
   YouTube'a atlamıyor. Çubuk mp4 oynatıcısıyla aynı. */
.oynatici--yt { position: relative; }
.oynatici--yt .duyuru__gomme { margin: 0; }

.oynatici__kalkan {
  position: absolute;
  /* Kutunun tamamını örtüyor. Önce çubuğun üstünde bitiyordu (bottom:54px)
     ve alttaki şerit açıkta kalıyordu: YouTube'un kendi filigranı ("YouTube"
     yazısı, sağ altta) tam oraya denk geliyor, imleç o şeride girince de
     YouTube bütün arayüzünü — üstteki video başlığı ve kanal adı dahil —
     geri getiriyordu. Duraklatınca da örtü o şeridi kapatmadığı için yazı
     görünüyordu. Çubuk zaten z-index 3 ile kalkanın üstünde; düğmeleri
     tıklanabilir kalıyor. */
  inset: 0;
  z-index: 2;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Kapak yalnız video hiç oynatılmamışken duruyor. Bir kez oynatıldıktan
   sonra kalkan saydam kalıyor: duraklatınca kullanıcı durdurduğu kareyi
   görüyor, siyah kutu değil.

   Önce duraklatmada da örtüyorduk çünkü kalkan alt şeridi açıkta
   bırakıyordu (bottom: 54px) ve fare oraya girince YouTube bütün
   arayüzünü — başlık, kanal adı, filigran — geri getiriyordu. Kalkan
   artık inset: 0 ile kutunun tamamını kapatıyor; fare hiç iframe'e
   ulaşmadığı için YouTube o arayüzü hiç tetiklemiyor. Ölçtük:
   duraklatılmış karede ne başlık çıkıyor ne kanal adı.

   İlk hâlde örtü şart: örtüyü kaldırıp denedik, YouTube kendi kapağını
   gösteriyor ama üstüne video başlığını ve "İzlemek için YouTube"
   şeridini basıyor. Kapak seçilmemişse düz koyu zemin kalıyor. */
.oynatici--yt:not([data-oynatildi]) .oynatici__kalkan {
  background-color: #14110f;
  background-image: var(--yt-kapak, none);
  background-size: cover;
  background-position: center;
}
.oynatici--yt .oynatici__kalkan {
  transition: background-color 200ms ease, opacity 200ms ease;
}
.oynatici__kalkan:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Çubuk ve büyük düğme kalkanın üstünde kalsın. */
.oynatici--yt .oynatici__cubuk { z-index: 3; }
.oynatici--yt .oynatici__buyuk { z-index: 3; }

/* ---- tam ekran ----
   Pencerede ortamın ölçüsünü js/duyuru.js piksel piksel yazıyor (ekrana
   sığdırmak için). O satır içi ölçüler tam ekranda da duruyordu: 1920'lik
   ekranda video 1152x648'de kalıp sol üst köşeye yapışıyor, kalan yer
   siyah kalıyordu. Tam ekranda ölçüyü ekran belirlesin.

   İki yazım ayrı kurallarda: bazı tarayıcılar tanımadıkları sözde-sınıfı
   görünce virgülle bağlı kuralın tamamını atıyor. Satır içi stili ezmek
   için !important gerekiyor. */
.oynatici:fullscreen { width: 100%; height: 100%; max-width: none; display: block; }
.oynatici:-webkit-full-screen { width: 100%; height: 100%; max-width: none; display: block; }

.oynatici:fullscreen video,
.oynatici:fullscreen .duyuru__gomme {
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto; object-fit: contain;
}
.oynatici:-webkit-full-screen video,
.oynatici:-webkit-full-screen .duyuru__gomme {
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto; object-fit: contain;
}

/* İmleç iframe'e hiç değmesin. Kalkan tıklamayı zaten alıyor ama fare
   yalnızca üzerinden geçince de YouTube arayüzünü uyandırıyor; oynatıcıyı
   biz API ile sürdüğümüz için iframe'in imleci görmesine hiç gerek yok. */
.oynatici--yt .duyuru__gomme iframe { pointer-events: none; }

/* ---- yatay kart şeridi (ana sayfa: seçilmiş işler) ------------------
   Kartlar ızgaradakinin aynısı; yalnız dizilim şerit. Kabuğun sağ
   kenarına kadar uzanıyor ki son kart yarım görünsün, devamı olduğu
   anlaşılsın. */
.seri-kap { position: relative; margin-bottom: var(--b-5); }

.isler--seri {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(21rem, 74vw);
  grid-template-columns: none;
  gap: 14px;
  margin: 0;
  overflow-x: auto;
  /* scroll-snap kaldırıldı: ok düğmesi kaydırmayı kare kare çizerken
     snap araya girip kutuyu kendi hesapladığı yere çekiyordu — hareket
     "tak tak" ilerliyordu. JS zaten tam kart hizasına oturuyor, snap'e
     gerek yok. */
  /* Kabuğun içindeyiz; sağ kenara taşmak için negatif dış boşluk. */
  margin-right: calc(-1 * var(--kenar));
  padding-right: var(--kenar);
  scrollbar-width: none;
  /* Aynı gerekçe .dallar__yol'daki gibi: dikey sürüklemede eksen kilidi
     geciksin istemiyoruz. */
  overscroll-behavior-x: contain;
}
.isler--seri::-webkit-scrollbar { display: none; }
/* Oklar şeridin tam altında, ortada. */
.seri__yon {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
/* Dokunmatikte parmakla kaydırılıyor, oklara gerek yok. */
@media (hover: none) { .seri__yon { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .isler--seri { scroll-behavior: auto; }
}

/* ---- atölye ilerleme rayı --------------------------------------------
   Sekiz adımın hepsi yazıyla duruyordu; iki satıra taşıp formun üstünü
   dolduruyor, hangi adımda olduğun kaybolduğu için kalabalık duruyordu.
   Artık yalnız içinde bulunulan adım yazıyla, kalanlar nokta. */
.ray {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0 0 var(--b-2);
  padding: 0 0 var(--b-3);
  border-bottom: 1px solid var(--cizgi-tema);
}

.ray__ogesi {
  display: flex;
  align-items: center;
  gap: 0;                 /* boşluğu yazı kutusu kendi iç payıyla veriyor */
  min-width: 0;
  font-family: var(--f-etiket);
  font-size: var(--t-etiket);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--metin);
}

.ray__nokta {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--cizgi-tema-koyu);
  transition: background 260ms var(--e-yumusak), scale 260ms var(--e-yumusak);
}
/* bilesenler.css geçilmiş adımın numarasına "✓" ekliyordu; artık o
   numara zaten görünmüyor, kalıntı kalmasın. */
.ray__ogesi[data-ray-durum='bitti'] .ray__no::after { content: none; }

/* Geçilmiş adımlar vurgu renginde: nerede olduğun tek bakışta belli. */
.ray__ogesi[data-ray-durum='bitti'] .ray__nokta { background: var(--vurgu); }
.ray__ogesi[data-ray-durum='aktif'] .ray__nokta { background: var(--metin); scale: 1.35; }

/* Yazı yalnız aktif adımda açılıyor. max-width ve iç pay birlikte
   geçişe giriyor; ikisi de sıfırken kutu hiç yer kaplamıyor, yani
   noktalar tam bitişik duruyor. */
.ray__yazi {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  max-width: 0;
  padding-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 460ms var(--e-yumusak),
              padding-left 460ms var(--e-yumusak),
              opacity 240ms ease;
}
.ray__ogesi[data-ray-durum='aktif'] .ray__yazi {
  max-width: 26ch;
  padding-left: 9px;
  opacity: 1;
}

/* Dar ekranda adım adı uzun olabiliyor; yazıyı kısaltıyoruz, noktalar
   tek satırda kalsın. */
@media (max-width: 560px) {
  .ray { gap: 10px; }
  .ray__ogesi[data-ray-durum='aktif'] .ray__yazi { max-width: 16ch; }
  .ray__ad { overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .ray__yazi, .ray__nokta { transition-duration: 1ms; }
}

/* ==========================================================================
   TİPOGRAFİ — başlık ölçüsü, harf arası ve alt boşluk
   ==========================================================================
   İki ayrı sorun vardı.

   1) Başlık alttaki yazıya değiyordu. Sebebi satır yüksekliğinin 0.95
      olması: satır kutusu harflerden kısa kalıyor, "Ş" ve "Ç" kuyrukları
      kutunun dışına taşıyor. Başlıkta alt boşluk da olmayınca kuyruk
      paragrafın 7px içine giriyordu. Satır yüksekliği Türkçe şapkalar
      için ölçülerek seçilmişti, ona dokunmuyoruz; taşan mürekkep kadar
      (0,07em) fazlasıyla alt boşluk veriyoruz.

   2) Yazılar iri ve donuk duruyordu. Büyük punto sıfır harf arasıyla
      dizilince "kütük" gibi görünür; büyük başlıklarda harf arası
      daraltılır. Ölçüler de bir kademe küçültüldü. */

:root {
  /* 1400px ekranda: 100,8 → 81px */
  --t-dev: clamp(2.25rem, 5.8vw, 5.5rem);
  /* 60 → 53px */
  --t-xl:  clamp(1.75rem, 3.8vw, 3rem);
  /* 44 → 39px */
  --t-l:   clamp(1.5rem, 2.8vw, 2.25rem);
}

.display {
  /* -0.005em neredeyse hiçti. Büyük versal metinde -0.022em standart. */
  letter-spacing: -0.022em;
  /* Taşan kuyruk 0,07em; üstüne nefes payı. */
  margin-bottom: 0.22em;
}

/* Normal akışta duran başlıklar (kabuğun doğrudan çocuğu) daha çok pay
   istiyor: orada boşluğu veren tek şey bu margin. Izgara/esnek kapların
   kendi "gap"i zaten var, onlara fazladan yüklemiyoruz. */
.kabuk > .display,
.kabuk > .beliren-baslik {
  margin-bottom: 0.5em;
}

/* Giriş paragrafı da bir tık küçüldü: 22 → 20px */
.giris-metni {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}


/* ==========================================================================
   TELEFONDA DİKEY RİTİM
   ==========================================================================
   Bu blok dosyanın SONUNDA duruyor. Yukarıdaki mobil blokta yazılmıştı ama
   showroom bileşenleri daha aşağıda tanımlı ve aynı ağırlıkta oldukları
   için onları eziyordu; kurallar hiç işlemiyordu.

   Şerit ile sonraki bölüm arasında 148px boşluk kalıyordu: 64 (şerit altı)
   + 52 (bölüm üstü) + 32 (çağrı üstü). Telefonda ekranın beşte biri boşa
   gidiyordu. */
@media (max-width: 640px) {
  /* Balonlar telefonda içeriğin üstünü kapatıyordu: 56px'lik iki daire
     alt köşede 56x124'lük bir alan tutuyor ve altındaki yazıyı gizliyor.
     48px'te aynı iş görülüyor, kapanan alan dörtte bir azalıyor. */
  .balon { width: 48px; height: 48px; }
  .balonlar { gap: 0.625rem; }
  /* WhatsApp balonu bilesenler.css'te 56px sabit; küçülen Instagram
     balonuyla yan yana basamaklı duruyordu, ikisi de 48'e iniyor. */
  .wa__dugme { width: 48px; height: 48px; }
  .wa { gap: 0.625rem; }

  /* iOS, yazı boyu 16px'in altındaki bir alana odaklanınca sayfayı
     kendiliğinden yakınlaştırıyor ve kullanıcı geri uzaklaştırmak
     zorunda kalıyor. WhatsApp mesaj kutusu 13px'ti — tek küçük alan
     oydu, formdaki bütün alanlar zaten 17px. */
  .wa__girdi { font-size: 1rem; min-height: 42px; }

  /* Aşağı kaydırılırken kenara çekilme — js/site.js ekliyor. Sağa
     kaydırma yeterli: kaybolmuyorlar, sadece metnin üstünden
     çekiliyorlar, kaydırma durunca geri geliyorlar. */
  .wa, .balonlar {
    transition: translate 260ms cubic-bezier(.22,1,.36,1), opacity 200ms linear;
  }
  .wa[data-cekildi], .balonlar[data-cekildi] {
    translate: calc(100% + clamp(1rem, 3vw, 2rem)) 0;
    opacity: 0;
  }

  .dallar { padding-block: var(--b-2) var(--b-3); }
  .seri-kap { margin-bottom: var(--b-3); }
  .isler { margin-bottom: var(--b-3); }
  .showroom-cagri { padding-top: var(--b-3); }
}


/* ==========================================================================
   ATÖLYE — telefonda özet formun ALTINDA
   ==========================================================================
   bilesenler.css tek sütuna düşerken özeti başa alıyordu (order: -1).
   Amaç çizimi görünür tutmaktı ama sayfa açıldığında çizim henüz boş ve
   599px yer kaplıyor: ilk soru ekranın 1,36 katı aşağıda kalıyor,
   ziyaretçi boş bir özeti geçmeden forma ulaşamıyordu.

   Özet artık doğal sırasında — formun altında. Adım değiştikçe çizim
   yine güncelleniyor, isteyen aşağı bakıyor. */
@media (max-width: 1080px) {
  .ozet { order: 0; }
}

/* ==========================================================================
   Mobil menü — tam ekran katman
   ==========================================================================
   Bu kurallar önce 600px bloğunun içindeydi; oysa hamburger düğmesi
   900px'ten dar her ekranda çıkıyor. Tablette (601–900px) menü hâlâ eski
   şerit hâlinde açılıyordu. Eşik hamburgerinkiyle eşitlendi.

   İkinci koşul dokunmatik için: büyük tabletler yatayda 1280 css piksel
   bildiriyor ve genişliğe bakan kural onları masaüstü sayıyor. Oysa
   masaüstü menüsü fareyle üzerine gelmeye dayanıyor, dokunmatikte öyle
   bir şey yok. */
@media (max-width: 900px), (hover: none) {
  /* Menü başlığın altına inen bir şerit değil, ekranın tamamını kaplayan
     bir katman. Şeritte dört madde ekranın üstüne sıkışıyor, arkasındaki
     sayfa görünmeye devam ediyor ve nereye bastığın belirsiz kalıyordu.
     Katman başlığın altında kalıyor (z-index 40 < başlığın 50'si) ki
     kapatma düğmesi üstte dursun. */
  .mobil-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px var(--kenar) var(--b-4);
    background: var(--zemin);
    border-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: menu-katman var(--h-orta) var(--e-yumusak) both;
  }
  @keyframes menu-katman { from { opacity: 0; } to { opacity: 1; } }

  .mobil-menu__ba {
    font-size: clamp(1.75rem, 8.5vw, 2.5rem);
    padding: 0.55rem 0;
    gap: 0.75rem;
    /* Yazılar aşağıdan yukarı, sırayla geliyor. Gecikme işaretlemeden
       (--gecikme) geliyor; buradaki eğri daha uzun ve yumuşak. */
    transform: translateY(22px);
    animation: menu-gir 460ms var(--e-giris) forwards;
    animation-delay: var(--gecikme);
  }
  .mobil-menu__no { font-size: 0.6875rem; }
  .mobil-menu__cta {
    margin-top: var(--b-3);
    opacity: 0;
    transform: translateY(22px);
    animation: menu-gir 460ms var(--e-giris) forwards;
    /* Bağlantılar 4 tane, sonuncusu 180ms'de başlıyor; düğme onun ardına. */
    animation-delay: 260ms;
  }

  /* Menü açıkken arkadaki sayfa kaymasın. */
  body.menu-acik { overflow: hidden; }
}

/* ==========================================================================
   Dokunmatik geniş ekranlar — tablet
   ==========================================================================
   Ölçüt genişlik değil, giriş aygıtı. Samsung Tab S9 FE+ gibi büyük
   tabletler yatayda 1280 css piksel bildiriyor: genişliğe bakan kural
   onlara masaüstü menüsünü veriyordu ama o menü fareyle üzerine gelmeye
   dayanıyor — dokunmatikte panel ya hiç açılmıyor ya da ilk dokunuşu
   yutup ikincisinde bağlantıya gidiyor. Dokunmatik her ekranda hamburger
   çıkıyor. */
@media (hover: none) and (min-width: 901px) {
  .gezinme, .ustbar__cta { display: none; }
  .tema-anahtari { margin-left: auto; }
  .menu-dugmesi { display: grid; }
  .mega, .mega__perde { display: none; }
}

/* ==========================================================================
   Showroom girişi ile kartlar arasındaki boşluk
   ==========================================================================
   Girişin altında 150px'e yakın boşluk kalıyordu. İki kaynağı vardı:
   bölümün kendi alt boşluğu (40px) ve şeridin sabitlenmiş kutunun tam
   ortasına yerleşmesi. Kutu ekran yüksekliğinde (100vh − başlık), şerit
   ise 600px; kalan ~220px ikiye bölünüp altına ve üstüne dağılıyordu.

   Çözüm boşluğu kırpmak değil, şeridi kutuya yaymak: kartlar kutuyu
   dolduruyor, üstte ve altta 1 cm (38px) pay kalıyor. Kartlar da böylece
   büyüyor — ekranın ortasında küçük durmuyorlar. */
/* Yalnız kart şeridinin geldiği sayfada: 1 cm'lik payı aşağıdaki sabit
   kutu zaten veriyor, bölümün kendi alt boşluğu üstüne binince 60px
   oluyordu. Kategori sayfalarında şerit yok, orada boşluk duruyor. */
.showroom-giris:has(+ .dallar) { padding-bottom: 0; }

/* Kart ölçüsü üst menüdeki önizleme kartlarıyla (.mkart) aynı dilde:
   334x417, oran 4/5. Önceki 480px'lik genişlik ekranda kocaman
   duruyordu. Kartın üstündeki ad da aynı oranda küçüldü. */
/* Sabitlenen kutu ekran yüksekliğinde kalmak zorunda: yana kayma sürerken
   sayfa akmaya devam ediyor, kutu kısa olursa altında bomboş bir şerit
   görünüyor. Kutuyu kısaltmak yerine kartlar kutuyu dolduruyor — hiçbir
   yerde boşluk kalmıyor, üstte ve altta 1 cm pay var. Kart boyu ekran
   yüksekliğinden geliyor. */
.dallar { padding-block: 38px 0 !important; }
.dallar[data-yatay-acik] { padding-block: 0 !important; }
/* Kutu kartlar kadar; boyu ekrandan gelmiyor. */
.dallar[data-yatay-acik] .dallar__sabit { height: auto; padding-block: 38px; }
.dal { width: min(21rem, 78vw); }
.dallar__yol { grid-auto-columns: min(21rem, 78vw); }
.dal__ad { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.dal__adet { font-size: 0.8125rem; }

/* Açıklama sabitlenen kutunun içinde, şeridin 1 cm altında.
   Sol kenarı kartlarla hizalı: .kabuk kullanılsaydı metni sayfanın
   ortasına çekip kartlardan 300px içeri kaydırıyordu, yan boşluk
   şeridinkiyle aynı formülden geliyor. */
.dallar__sabit .dallar__aciklama {
  margin-top: 38px;
  padding-inline: max(var(--kenar), calc((100% - var(--en)) / 2 + var(--kenar)));
}
/* Ana sayfadaki "ÖLÇÜDEN TESLİME" ile birebir aynı punto; başlık ile
   metin arası 1 cm. .kabuk > .display'in 24px'ini aşmak için seçicilik. */
.dallar__aciklama .showroom-aciklama__baslik { margin: 0 0 38px; }
.dallar__aciklama .dallar__metin { margin: 0; }

/* ==========================================================================
   Bölüm aralıkları — fazla boşluk
   ==========================================================================
   Ölçtüm: 1440px'te iki bölüm arasında 240–246px boşluk kalıyordu. Üç
   şeyin üst üste binmesinden geliyor — üstteki bölümün alt boşluğu (96),
   alttakinin üst boşluğu (96) ve son içeriğin kendi alt payı (~50).
   Ekranın dörtte biri boşa gidiyor, okuyan "sayfa bitti" sanıyor.

   Bölüm boşluğu 96 → 64. Aradaki toplam 128px'e iniyor; bölümler hâlâ
   birbirinden ayrı duruyor ama ekran dolu görünüyor.

   Ayrıca bir bölümün son çocuğunun alt payı siliniyor: o pay bölüm
   içindeki parçaları ayırmak için var, en sondakinde bölümün kendi
   boşluğunun üstüne biniyor. */
@media (min-width: 601px) {
  .bolum { padding-block: 4rem; }          /* 96px → 64px */
  .bolum--genis { padding-block: 6rem; }   /* 144px → 96px */
}

.bolum > .kabuk > :last-child,
.bolum > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Menü önizleme kartları — sabit ölçü
   ==========================================================================
   Sütunlar 1fr'di: kaç kart varsa alan ona bölünüyordu. Üç kartlı Atölye
   panelinde kartlar 334x417'ye çıkıyor, beş kartlı Showroom panelinde
   195x244'e düşüyordu — aynı menüde iki farklı büyüklük. Sütun genişliği
   sabitlendi; kart sayısı değişse de ölçü değişmiyor.

   Ölçü Showroom panelininki: menüde beş kart yan yana sığmalı. */
@media (min-width: 901px) {
  /* minmax(0, 195px): kaba sığmadığında kartlar alt satıra düşmek yerine
   biraz daralıyor. Sabit 195px'te panel birkaç piksel dar kalınca
   sonuncusu aşağı kayıyordu. */
.mega__kartlar { grid-template-columns: repeat(5, minmax(0, 195px)); }
.mega__kartlar[data-kart-sayisi="2"] { grid-template-columns: repeat(2, minmax(0, 195px)); }
.mega__kartlar[data-kart-sayisi="3"] { grid-template-columns: repeat(3, minmax(0, 195px)); }
.mega__kartlar[data-kart-sayisi="4"] { grid-template-columns: repeat(4, minmax(0, 195px)); }
    /* Tek kartlık panellerin 380x214 yatay kartı kalktı: Hikâye ve
     İletişim de ötekilerle aynı dilde — solda dik görsel, sağında özet.
     Kart oranını da geri alıyoruz (ustbar.css 16/9 yapıyordu). */
  .mega__kartlar[data-kart-sayisi="1"] { grid-template-columns: minmax(0, 195px); }
  .mega__kartlar[data-kart-sayisi="1"] .mkart { aspect-ratio: 4 / 5; }

  /* Kart + özet yan yana. */
  .mega__tanitim {
    display: grid;
    grid-template-columns: minmax(0, 195px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .mega__ozet { display: grid; gap: 14px; align-content: start; padding-top: 2px; }
  .mega__ozetMetin {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--metin-yumusak, var(--is-yumusak));
    max-width: 42ch;
  }
  .mega__iletisim { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .mega__iletisim a {
    font-size: 0.9375rem; color: var(--metin, var(--is));
    text-decoration: none; border-bottom: 1px solid var(--cizgi-tema);
    padding-bottom: 2px; justify-self: start;
  }
  .mega__iletisim a:hover { border-bottom-color: var(--metin, var(--is)); }
}

/* ==========================================================================
   İletişim ve Hikâye girişi — görsel solda, metin sağda
   ==========================================================================
   İletişimde metin solda, görsel sağdaydı. Menüdeki önizleme kartlarıyla
   ters düşüyordu (orada görsel hep solda). İki sayfa da aynı düzene
   geçti: solda dik görsel, sağında yazı. Sıra yalnız görsel kolonuna
   veriliyor, işaretleme değişmiyor. */
@media (min-width: 901px) {
  .iletisim-giris__gorsel { order: -1; }

  .hikaye-giris__ic {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--b-5);
    /* Ortalamak yerine tepeden hizalama: başlığın üst kenarı görselin
       üst kenarıyla aynı noktada başlıyor. */
    align-items: start;
  }
  .hikaye-giris__gorsel { margin: 0; }
  .hikaye-giris__yazi { display: grid; gap: var(--b-2); justify-items: start; }
}

/* Bulunulan sayfanın bağlantısında gösterge hareketi yok.
   Panel açılmıyor ama fare üstüne gelince kayan gösterge oraya süzülüyor
   ve "parlama" gibi duruyordu — zaten o sayfadasın, işaretlemenin bir
   şey söylemesi gerekmiyor. */
.gezinme__ba--aktif:hover { cursor: default; }
.gezinme[data-panel-acik] .gezinme__ba--aktif,
.gezinme[data-panel-kapaniyor] .gezinme__ba--aktif { color: inherit; }

/* Nav bağlantılarındaki ışık hüzmesi kaldırıldı.
   Efekt "Teklif al" düğmesinden alınıp menüye de taşınmıştı; dört
   bağlantıda birden olunca menü sürekli kıpırdıyor. Yalnız sağ üstteki
   düğmede kalıyor — orada bir vurgu, menüde gürültü. */
.gezinme__ba::before,
.gezinme__ba:hover::before,
.gezinme__ba:focus-visible::before { display: none; }

/* ==========================================================================
   Medya — tanıtım filmi
   ==========================================================================
   İki sütun: solda film, sağında anlatan yazı. Film önce tek başına ve
   ekranın dörtte üçü kadardı; yanına yazı gelince yarıya indi, kap aynı
   genişlikte kaldı. Kabuğun (içerik sütununun) dışında duruyor, yoksa
   kenar boşluklarıyla küçülüp aşağıdaki kart ızgarasından ayırt
   edilemiyordu.
   ========================================================================== */
.tanitim {
  display: grid;
  /* Sol sütun kabın yarısı: film "yarıya indi, sola kaydı". Sağdaki
     sütun kalanı alıyor. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  margin: 0 auto var(--b-4);
  /* Üst boşluk margin ile verilince main'in üst kenarıyla birleşip
     (margin collapse) yok oluyordu; padding kaçmıyor. Ölçü, diğer
     sayfaların giriş bölümündeki üst boşlukla aynı. */
  padding-top: var(--b-5);
  /* Kap yine ekranın dörtte üçü; çok geniş ekranda sonsuz büyümesin. */
  width: min(75vw, 1500px);
}
.tanitim__cerceve {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: #100e0c;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.55);
}
/* Oynatıcı çerçeveyi tam doldursun: kendi 3/2 oranını dayatmasın. */
.tanitim__cerceve .oynatici,
.tanitim__cerceve .duyuru__gomme { width: 100%; height: 100%; }
.tanitim__cerceve .duyuru__gomme { aspect-ratio: auto; }

.tanitim__yazi { display: grid; gap: 12px; align-content: center; }
.tanitim__etiket {
  margin: 0;
  font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vurgu, var(--ates));
}
.tanitim__ad {
  margin: 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.tanitim__metin {
  margin: 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.65;
  color: var(--metin-yumusak, var(--is-yumusak));
  max-width: 46ch;
}

@media (max-width: 900px) {
  /* Telefonda yan yana iki sütun ikisini de okunmaz hâle getiriyor:
     film üstte tam genişlik, yazı altında. */
  .tanitim {
    grid-template-columns: 1fr;
    width: calc(100% - 2 * var(--kenar));
    gap: 20px;
  }
  .tanitim__metin { max-width: none; }
}

/* ==========================================================================
   Medya — işlerin videoları
   ==========================================================================
   YouTube ana sayfası gibi: kapak üstte, altında işin adı, onun altında
   iş kolu ve şehir. Önce yan sütun listesi gibiydi (solda küçük görsel,
   sağında metin) ama sayfa yalnız videolardan oluşuyor; ızgara hem daha
   çok işi bir ekranda gösteriyor hem de kapak fotoğrafı büyük duruyor.
   ========================================================================== */
.medya-izgara {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Sayfa başına 4 sütun × 5 satır (medya.php'deki sayı ile aynı).
     auto-fill yerine sabit sütun: ekran genişledikçe 5-6 sütuna çıkıp
     sayfa başına düşen satır sayısını değiştirmesin. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Satır arası sütun arasından geniş: kartın metni bir sonraki kartın
     kapağına yapışmasın. */
  gap: 34px 22px;
}
@media (max-width: 1180px) { .medya-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .medya-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.medya-kart { display: grid; gap: 8px; align-content: start; }

.medya-kart__ic {
  display: grid; gap: 12px;
  width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit;
}
.medya-kart__ic:focus-visible { outline: 2px solid var(--metin); outline-offset: 4px; }

.medya-kart__foto {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--yuvarlak); overflow: hidden; background: #1b1815;
}
.medya-kart__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.medya-kart__ic:hover .medya-kart__foto img { scale: 1.05; }
@media (hover: none) { .medya-kart__foto img { transition: none; } }

.medya-kart__oynat {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 999px;
  background: rgba(12, 10, 8, 0.62); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: scale 200ms var(--e-yumusak), background 200ms ease;
}
.medya-kart__oynat svg { margin-left: 2px; }
.medya-kart__ic:hover .medya-kart__oynat { scale: 1.08; background: rgba(12, 10, 8, 0.8); }

.medya-kart__bilgi { display: grid; gap: 3px; }
.medya-kart__ad {
  font-family: var(--f-baslik, inherit);
  font-size: 1.0625rem; line-height: 1.3;
  color: var(--metin, var(--is));
  /* Uzun ad kartı büyütmesin: iki satırda kesiliyor. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.medya-kart__meta {
  font-size: 0.8125rem; letter-spacing: 0.01em;
  color: var(--metin-yumusak, var(--is-yumusak));
}
.medya-kart__baglanti {
  font-size: 0.75rem; color: var(--metin-yumusak, var(--is-yumusak));
  text-decoration: none; justify-self: start;
  opacity: .75; transition: opacity 160ms ease, color 160ms ease;
}
.medya-kart__baglanti:hover { opacity: 1; color: var(--metin, var(--is)); }

@media (max-width: 560px) {
  .medya-izgara { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- sayfalama ----
   Numaralar ızgaranın altında ortada. Sayfa sayısı artınca satır
   uzamıyor: pencere kayıyor, aradaki atlamalar "…" ile gösteriliyor.
   Dar ekranda satıra sığmazsa yana kaydırılabiliyor. */
.sayfalama {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 42px;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sayfalama::-webkit-scrollbar { display: none; }

.sayfalama__no,
.sayfalama__ok {
  display: grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  flex: none;
  font-size: 0.875rem; font-variant-numeric: tabular-nums;
  color: var(--metin-yumusak, var(--is-yumusak));
  text-decoration: none;
  border: 1px solid var(--cizgi-tema, var(--cizgi));
  border-radius: var(--yuvarlak-kucuk, 8px);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.sayfalama__no:hover,
a.sayfalama__ok:hover {
  color: var(--metin, var(--is));
  border-color: var(--metin, var(--is));
}
.sayfalama__no--simdi {
  color: var(--vurgu-uzeri, #fff);
  background: var(--metin, var(--is));
  border-color: var(--metin, var(--is));
  font-weight: 600;
}
/* Bağlantı olmayan ok = gidilecek sayfa yok. */
span.sayfalama__ok { opacity: .35; }

.sayfalama__ara {
  flex: none; padding: 0 2px;
  color: var(--metin-yumusak, var(--is-yumusak));
}

.bos-metin { color: var(--metin-yumusak, var(--is-yumusak)); max-width: 52ch; }

/* ---- video penceresi ---- */
.medya-pencere {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
}
.medya-pencere[hidden] { display: none; }
.medya-pencere__perde { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.62); }
.medya-pencere__kutu {
  position: relative;
  width: min(1100px, 96vw);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.medya-pencere__ortam { background: #000; }
.medya-pencere__ortam .duyuru__gomme { aspect-ratio: 16 / 9; }

/* Galerideki video karesi: fotoğraf kareleriyle aynı kutuda.

   İki sorun vardı, ikisi de kaydırırken titremeye yol açıyordu:

   1. Gömme kendi oranından (3/2) yükseklik üretiyordu; çerçeve 862px
      iken gömme 892px çıkıp taşıyordu. Ölçüyü çerçeve versin.
   2. Etkin olmayan kare scale: 1.035 ile duruyor. Fotoğrafı ölçeklemek
      ucuz, iframe'i ölçeklemek değil — Safari her kaydırma karesinde
      iframe'i yeniden tarayıp titriyordu. Video karesi ölçeklenmiyor,
      yalnız soluyor. */
.galeri__kare--video { display: grid; place-items: center; background: #000; }
.galeri__kare--video .oynatici { width: 100%; height: 100%; }
.galeri__kare--video .duyuru__gomme {
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.galeri__kare--video,
.galeri[data-yon="ileri"] .galeri__kare--video:not([data-etkin]),
.galeri[data-yon="geri"]  .galeri__kare--video:not([data-etkin]) {
  scale: 1;
  translate: 0 0;
}
/* Kendi katmanına alınıyor: yanındaki karelerin geçişi iframe'i
   yeniden boyamaya zorlamasın. */
.galeri__kare--video .duyuru__gomme { transform: translateZ(0); }

@media (max-width: 640px) {
  .medya-kart__oynat { width: 46px; height: 46px; }
  .medya-kart__ad { font-size: 1.0625rem; }
}

/* ==========================================================================
   İletişim formu balonu
   ==========================================================================
   WhatsApp ve Instagram'ın altında, aynı köşede, aynı ölçüde. WhatsApp
   anlık yazışma için; bu form kayıt bırakmak için — mesaj panele düşüyor
   ve e-posta çıkıyor. */
.form-balon {
  /* Konum verilmiyor: .wa zaten alt köşede duran bir ızgara ve
     çocuklarını üst üste diziyor. Sabit konum verince Instagram
     balonuyla aynı noktaya oturuyordu. */
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--metin, var(--is)); color: var(--zemin, var(--kum));
  box-shadow: 0 10px 26px -10px rgba(20, 17, 15, 0.65);
  transition: transform 160ms cubic-bezier(.22,1,.36,1),
              box-shadow 160ms cubic-bezier(.22,1,.36,1);
}
.form-balon:hover { transform: translateY(-2px) scale(1.04); }
.form-balon:active { transform: translateY(0) scale(0.98); }
.form-balon:focus-visible { outline: 2px solid var(--metin); outline-offset: 3px; }


/* ---- pencere ---- */
.form-pencere {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
}
.form-pencere[hidden] { display: none; }
.form-pencere__perde { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.62); }
.form-pencere__kutu {
  position: relative;
  width: min(520px, 100%);
  max-height: min(90vh, 780px);
  overflow-y: auto;
  background: var(--zemin-kart, var(--kagit));
  color: var(--metin, var(--is));
  border: 1px solid var(--cizgi-tema, var(--cizgi));
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.form-pencere__kapat {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: var(--kil); color: var(--metin, var(--is)); cursor: pointer;
}
.form-pencere__kapat:hover { background: var(--cizgi-tema, var(--cizgi)); }

.iletisim-formu { display: grid; gap: 14px; padding: 26px 24px 24px; }
.iletisim-formu__giris {
  margin: -6px 0 4px;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--metin-yumusak, var(--is-yumusak));
}
.iletisim-formu__ikili {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.iletisim-formu .alan { display: grid; gap: 6px; }
/* Etiketler Atölye formundakiyle aynı dilde: Inter, 12px, büyük harf,
   harf aralıklı, 600. Burada 13px normal harf küçük bir gövde yazısı
   gibi duruyordu — alan adı mı açıklama mı belli olmuyordu. */
.iletisim-formu label {
  font-family: var(--f-etiket);
  font-size: var(--t-etiket, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-yumusak, var(--is-yumusak));
}
/* Onay satırındaki yazı etiket değil, cümle: büyük harfe girmiyor. */
.iletisim-formu .onay .onay__yazi {
  font-family: inherit; font-size: 0.875rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
}
.iletisim-formu .girdi {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 1rem;   /* 16px altı iOS'ta sayfayı yakınlaştırıyor */
  color: var(--metin, var(--is));
  background: var(--zemin, var(--kum));
  border: 1px solid var(--cizgi-tema, var(--cizgi)); border-radius: 10px;
}
.iletisim-formu .girdi:focus-visible {
  outline: 2px solid var(--ates); outline-offset: 1px; border-color: var(--ates);
}
.iletisim-formu textarea.girdi { resize: vertical; min-height: 96px; }

/* ---- onay kutusu ----
   Kayan anahtar yerine gerçek tik: anahtar "açık/kapalı ayar" hissi
   veriyor, buradaki şey bir beyan. Tik SVG yolu olarak çiziliyor;
   işaretlenince stroke-dashoffset ile soldan sağa yazılıyor. */
.onay {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 12px; align-items: start; cursor: pointer;
}
.onay input { position: absolute; opacity: 0; width: 0; height: 0; }

.onay__kutu {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-top: 0;
  border: 1.5px solid var(--cizgi-koyu, var(--cizgi));
  border-radius: 7px;
  background: var(--zemin, var(--kum));
  color: var(--ates-uzeri, #fff);
  transition: background 200ms var(--e-yumusak),
              border-color 200ms var(--e-yumusak),
              scale 160ms var(--e-giris);
}
.onay__kutu svg { width: 17px; height: 17px; }
.onay__kutu path {
  /* Yolun uzunluğu ~24; tamamı gizli başlıyor. */
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 260ms var(--e-giris) 40ms;
}
.onay:hover .onay__kutu { border-color: var(--metin, var(--is)); }
.onay input:focus-visible + .onay__kutu {
  outline: 2px solid var(--ates); outline-offset: 2px;
}
.onay input:active + .onay__kutu { scale: 0.92; }
.onay input:checked + .onay__kutu {
  background: var(--ates); border-color: var(--ates);
}
.onay input:checked + .onay__kutu path { stroke-dashoffset: 0; }

.onay__yazi {
  font-size: 0.875rem; line-height: 1.5;
  color: var(--metin-yumusak, var(--is-yumusak));
}
.onay__zorunlu { color: var(--ates); }
.onay__link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--metin, var(--is));
  text-decoration: underline; text-underline-offset: 2px;
}
.onay__link:hover { color: var(--ates); }

@media (prefers-reduced-motion: reduce) {
  .onay__kutu, .onay__kutu path { transition: none; }
}

/* ---- onay metni penceresi ---- */
.onay-pencere {
  position: fixed; inset: 0; z-index: 310;   /* form penceresinin üstünde */
  display: grid; place-items: center; padding: 20px;
}
.onay-pencere[hidden] { display: none; }
.onay-pencere__perde { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.62); }
.onay-pencere__kutu {
  position: relative;
  width: min(620px, 100%); max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--zemin-kart, var(--kagit));
  border: 1px solid var(--cizgi-tema, var(--cizgi));
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.onay-pencere__govde { padding: 26px 24px 24px; display: grid; gap: 12px; }
.onay-pencere__govde h2 { margin: 0 0 4px; }
.onay-pencere__govde p {
  margin: 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--metin-yumusak, var(--is-yumusak));
}

.iletisim-formu__durum {
  margin: 0; font-size: 0.875rem; line-height: 1.45;
  padding: 10px 12px; border-radius: 10px;
  background: var(--kil); color: var(--metin, var(--is));
}
.iletisim-formu__durum[data-tur="hata"] { color: var(--hata, #a4231e); }
.iletisim-formu__durum[data-tur="iyi"]  { color: var(--yesil, #3f6b46); }
.iletisim-formu__gonder { justify-self: start; }

/* Bal küpü — ekran okuyucudan da uzakta ama otomatik doldurucular görüyor. */
.tuzak {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 520px) {
  .iletisim-formu__ikili { grid-template-columns: 1fr; }
  .iletisim-formu { padding: 22px 18px 20px; }
}
@media (max-width: 640px) {
  .form-balon { width: 48px; height: 48px; }
}



/* ==========================================================================
   SEÇİLMİŞ İŞLER — telefonda yana kaydırmalı şerit
   ==========================================================================
   Masaüstünde numaralı liste kalıyor (istenen buydu), ama telefonda aynı
   liste alt alta 6 dev satır oluyor ve ana sayfanın yarısını yiyor.
   Telefonda showroom şeridiyle aynı dilde: kartlar yan yana, son kart
   yarım görünüp "devamı var" diyor. Yalnız dizilim değişiyor — işaretleme
   ve numaralar aynı.
   ========================================================================== */
@media (max-width: 700px) {
  .proje-listesi {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(17rem, 72vw);
    gap: 14px;
    border-top: 0;
    overflow-x: auto;
    /* Kabuğun sağ kenarına taşıyoruz ki son kart kırpılsın. */
    margin-right: calc(-1 * var(--kenar));
    padding-right: var(--kenar);
    scrollbar-width: none;
    /* Dikey sürüklemede eksen kilidi gecikmesin — .isler--seri ile aynı. */
    overscroll-behavior-x: contain;
  }
  .proje-listesi::-webkit-scrollbar { display: none; }

  .proje__ic {
    /* Kart: üstte görsel, altında numara + ad. */
    display: grid;
    grid-template-columns: none;
    grid-template-areas: 'gorsel' 'no' 'govde';
    align-content: start;
    gap: 10px;
    padding: 0;
    border-bottom: 0;
  }
  .proje__ic--acilabilir:hover { background: none; padding-inline: 0; }

  .proje__gorsel { grid-area: gorsel; width: 100%; }
  .proje__no {
    grid-area: no;
    font-size: 0.6875rem; letter-spacing: 0.14em;
    color: var(--metin-yumusak);
  }
  .proje__govde { grid-area: govde; gap: 0.25rem; }
  .proje__ad { font-size: 1.125rem; line-height: 1.15; }
  .proje__ozet { font-size: 0.8125rem; }
  /* Dar kartta ölçü/süre satırları sığmıyor, detay sayfasında zaten var. */
  .proje__meta { display: none; }
}

/* ==========================================================================
   FORM EKİ — dosya yükleme alanı
   ==========================================================================
   İki formda da aynı işaretleme (iletişim balonu ve atölye teklif formu),
   o yüzden tek yerde. Kutu bilerek sade: form zaten uzun, ek alanı öne
   çıkıp asıl alanları gölgelemesin.
   ========================================================================== */
.ek { display: block; }
.ek__istege {
  font-weight: 400; color: var(--metin-yumusak);
  font-size: 0.8125em; letter-spacing: 0;
}
.ek__ipucu {
  margin: 4px 0 10px;
  font-size: 0.8125rem; line-height: 1.5; color: var(--metin-yumusak);
}
.ek__dugme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--metin);
  background: transparent;
  border: 1px dashed var(--cizgi-tema, var(--cizgi));
  border-radius: var(--yuvarlak-kucuk, 8px);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.ek__dugme::before { content: '＋'; font-size: 1.1em; line-height: 1; }
.ek__dugme:hover:not(:disabled) {
  border-color: var(--vurgu); color: var(--vurgu);
  border-style: solid;
}
.ek__dugme:disabled { opacity: .5; cursor: not-allowed; }

/* Sürüklenen dosya alanın üstündeyken. */
.ek[data-uzerinde] .ek__dugme {
  border-style: solid; border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 8%, transparent);
}

.ek__liste { margin-top: 10px; display: grid; gap: 6px; }
.ek__satir {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--zemin-kart, rgba(0,0,0,.03));
  border-radius: var(--yuvarlak-kucuk, 8px);
  font-size: 0.875rem;
}
.ek__ad {
  flex: 1; min-width: 0;
  /* Uzun dosya adı satırı taşırmasın. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ek__boyut { color: var(--metin-yumusak); font-size: 0.8125rem; flex: none; }
.ek__sil {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 1.125rem; line-height: 1;
  color: var(--metin-yumusak);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ek__sil:hover { background: var(--cizgi-tema, var(--cizgi)); color: var(--metin); }

.ek__uyari { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.5; }
.ek__uyari[data-tip="hata"] { color: var(--hata, #96201F); }

.ek__sinir {
  margin: 8px 0 0;
  font-size: 0.75rem; line-height: 1.5; color: var(--metin-yumusak);
}
.ek__kalan { display: block; }

/* Atölye formunda alan etiketleri kendi sınıflarını kullanıyor;
   ek alanı oraya girince etiket biçimi tutsun. */
.alan--tam .ek > label {
  display: block; margin-bottom: 2px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--metin-yumusak);
}

/* ==========================================================================
   E-KATALOG düğmesi — üst menüde "Teklif al"ın sağında
   ==========================================================================
   Biçim "Teklif al" ile birebir aynı (.ustbar__cta). İki fark var:
   parlama efekti burada yok — o efekti asıl çağrıya sakladık — ve iki
   dolu koyu düğme yan yana gelince hangisi asıl çağrı belli olmuyordu,
   bu yüzden katalog düğmesi çerçeveli.
   ========================================================================== */
.ustbar__cta--katalog {
  color: var(--metin);
  background: transparent;
  /* Çerçeve metin renginden türetiliyor: --cizgi karanlık temada
     neredeyse zemin rengi, onu kullanınca düğme koyu temada kayboluyordu. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metin) 30%, transparent);
}
.ustbar__cta--katalog::before { display: none; }
.ustbar__cta--katalog:hover {
  color: var(--zemin);
  background: var(--metin);
  box-shadow: inset 0 0 0 1px var(--metin);
}

/* Telefonda menü içinde, "Teklif al"ın altında. */
.mobil-menu__cta--katalog {
  color: var(--metin);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metin) 30%, transparent);
  margin-top: 10px;
}
.mobil-menu__cta--katalog:hover { color: var(--zemin); background: var(--metin); }

/* ==========================================================================
   MARKA — tek parça logo
   ==========================================================================
   Üst çubuktaki logo önce üç parçaydı: monogram, "MASAL" görseli ve site
   fontuyla yazılan "Mobilya & Mutfak" satırı. Yeni logo üçünü de kendi
   içinde taşıyor, o yüzden tek görsele indi.

   Koyu sürüm basılıyor; koyu temada eski logodaki kuralın aynısıyla ters
   çevriliyor. İki ayrı dosya yerine filtre kullanmanın sebebi: tema
   değişiminde ikinci bir dosya indirilmiyor, logo anında dönüyor.
   ========================================================================== */
.marka__logo {
  /* Yatay logonun alt satırı ("MUTFAK & MOBİLYA") çok küçülmesin diye
     eski monogramdan (40px) yüksek. Üst çubuk 87px, rahat sığıyor. */
  height: 54px;
  width: auto;
}
:root[data-tema='koyu'] .marka__logo { filter: invert(1) brightness(1.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='acik']) .marka__logo { filter: invert(1) brightness(1.85); }
}
@media (max-width: 560px) { .marka__logo { height: 38px; } }