/* =====================================================================
   İÇ SAYFALAR — proje detayı, arşiv, filmler, hakkında, iletişim
   ===================================================================== */

/* Belirme — aşağıdan, bulanıktan nete */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* Sayfa başlığı bloğu — her iç sayfanın açılışı */
.masthead {
  padding: calc(var(--nav-h) + clamp(3rem, 9vw, 7rem)) var(--rail) clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gut);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__title { max-width: 18ch; }
.masthead__note  { max-width: 42ch; text-align: right; line-height: 1.9; }
@media (max-width: 700px) { .masthead__note { text-align: left; } }

/* Tam genişlik başlık (arşiv). Gövde ekranı kaplarken başlık 1560px'lik
   kutuda kalırsa, geniş ekranda sol kenarda 500px'lik bir kayma oluşuyor ve
   hizasızlık hata gibi okunuyor. Kenar payı ızgarayla aynı. */
.masthead--wide { max-width: none; }

/* About başlığı bir SAYFA adı değil, kişinin adı: roller adın hemen altında
   durmalı, karşı köşede değil. */
/* About'ta başlık çizgisi YOK: hemen altında iki bölüm etiketinin
   (Profil / Hizmetler) kendi çizgileri geliyor, üst üste üç yatay çizgi
   oluşuyor ve göz nerede durması gerektiğini bilemiyor. Ayırma işini
   bölüm çizgileri zaten yapıyor. */
.masthead--about { display: block; border-bottom: none; }
.masthead__note--left {
  text-align: left;
  max-width: none;
  margin-top: 0.9rem;
  line-height: 1.6;
  color: var(--paper-dim);
}

/* ---------------------------------------------------------------------
   PROJE DETAYI
   --------------------------------------------------------------------- */
.work {
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

/* Açılış karesi — tam genişlik, ekranın çoğunu kaplar */
/* ---------------------------------------------------------------------
   AÇILIŞ — başlık → kapak → metin → künye, tek ortalı yığın

   Önce iki kip vardı: tam genişlikte kırpılmış bir bant, ya da kare yanında
   başlık. İkisi de kapağı sayfanın bir kenarına itiyor, karşı tarafta büyük
   bir boşluk bırakıyordu. Kapak işin kendisi — ortada, kırpılmadan durmalı.
   --------------------------------------------------------------------- */
.work__head {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) var(--rail) clamp(1.5rem, 3vw, 2.5rem);
}

.work__cover {
  position: relative;
  /* width: fit-content + margin auto → kutu görsele yapışır ve ortalanır.
     Kutu görselden genişse film oynatıcısı letterbox olurdu. */
  width: fit-content;
  max-width: calc(100% - 2 * var(--rail));
  margin-inline: auto;
  display: flex;
  align-items: center;
  overflow: visible;
}
.work__cover picture { display: block; max-width: 100%; }
.work__cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Yükseklik tavanı: dikey kapaklar tek başına bütün ekranı yutmasın,
     altındaki metnin varlığı görünür kalsın. */
  max-height: min(66vh, 760px);
  object-fit: contain;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  view-transition-name: ka-hero;
}

/* --- Film: sessiz kapaktan gerçek oynatıcıya --- */
.work__cover.is-film { cursor: pointer; }
.work__cover.is-film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
.work__cover.is-film .player__btn { z-index: 2; }
.work__cover.is-playing img,
.work__cover.is-playing .player__btn { opacity: 0; pointer-events: none; }
/* Oynatılırken kutu, filmin oranını alır — poster karesinin oranı farklıysa
   video kırpılmasın diye. */
.work__cover.is-playing {
  width: min(calc(100% - 2 * var(--rail)), calc(min(66vh, 760px) * var(--film-ratio, 1.7778)));
  aspect-ratio: var(--film-ratio, 1.7778);
  background: var(--ink-deep);
}

@media (hover: hover) and (pointer: fine) {
  .work__cover.is-film:hover .player__ring {
    transform: scale(1.06);
    background: rgba(242, 239, 234, 0.16);
  }
}

.work__intro {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--rail) 0;
}
.work__intro--bare { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* Detay başlığı genel --t-display'den küçük. Paylaşılan değeri değiştirmiyoruz:
   Arşiv, Filmler, Hakkında başlıkları eski boyutunda kalsın diye yalnız burası
   eziliyor. 112px'ten 84'e — kapağın önüne geçmiyor artık. */
.work__title {
  max-width: 18ch;
  font-size: clamp(2.375rem, 5.6vw, 5.25rem);
}
.work__lead { max-width: 68ch; }

/* Künye — etiket üstte, değer altta.
   Yan yana dizilim dar ekranda tek bir mono şeride dönüşüyor, hangi
   değerin hangi etikete ait olduğu okunmuyordu. Dikey çiftler hem
   taranabilir hem de değeri etiketten tipografiyle ayırıyor: etiket
   küçük/mono/sönük, değer normal ağırlıkta ve aydınlık. */
.work__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem var(--gut);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.work__fact { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.work__fact dt { color: var(--paper-ghost); }
.work__fact dd {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.work__lead { margin-top: 1.75rem; }

/* ---------------------------------------------------------------------
   <picture> SARMALAYICISI — ölçüyü devretmeli

   ka_picture() her zaman <picture><source><img></picture> üretir. <picture>
   varsayılan olarak satır-içi ve yüksekliği yok; içindeki img'e height:100%
   verildiğinde bu değer sarmalayıcının OTOMATİK yüksekliğine göre çözülüyor,
   yani kare kendi doğal oranında kalıyor. Kutunun geri kalanı boş siyah
   kalıyor ve üstüne inset:0 ile konumlanan başlıklar kutunun ortasına göre
   hizalandığı için karenin dışında duruyor — "sonraki proje" bandındaki
   hizasızlık buydu.

   Kareyi kutuya göre boyutlandıran her yerde sarmalayıcı da tam kutu olmalı.
   Genel bir `picture { height:100% }` yazılmadı: plaka hero gibi kareyi
   DOĞAL oranında bırakan yerlerde bu yanlış olurdu.
   --------------------------------------------------------------------- */
.player picture,
.reel__item picture,
.nextwork picture,
.peek picture,
.about__portrait picture { display: block; width: 100%; height: 100%; }

/* --- Film oynatıcı --- */
.player {
  position: relative;
  /* Yan boşluk PADDING değil MARGIN olsaydı `margin-inline: auto` ile
     çakışırdı; kısayol sonradan geldiği için ortalamayı eziyordu. */
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  max-width: calc(var(--content-max) - 2 * var(--rail));
  width: calc(100% - 2 * var(--rail));
  aspect-ratio: var(--film-ratio, 1.7778);
  max-height: 88vh;
  overflow: hidden;
  background: var(--ink-deep);
  cursor: pointer;
}
.player img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-film) var(--ease), opacity var(--d-base) var(--ease); }
@media (hover: hover) and (pointer: fine) { .player:hover img { transform: scale(1.02); } }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player.is-playing img, .player.is-playing .player__btn { opacity: 0; pointer-events: none; }

/* Films sayfasındaki kartlarda da aynı önizleme. .player kutusu zaten
   position:relative ve overflow:hidden; paylaşılan video onun içine giriyor.
   Tam video oynarken (is-playing) önizlemenin işi biter. */
.player.is-previewing .tile__preview { opacity: 1; }
.player.is-previewing .player__btn { opacity: 0.5; }
.player.is-playing .tile__preview { display: none; }

.player__btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity var(--d-base) var(--ease);
}
.player__ring {
  display: grid;
  place-items: center;
  width: clamp(66px, 7vw, 92px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 239, 234, 0.55);
  border-radius: 50%;
  /* Parlak karede de okunmalı — cam + hafif gölge halkası */
  background: rgba(10, 10, 11, 0.38);
  box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.22), 0 10px 40px rgba(10, 10, 11, 0.35);
  backdrop-filter: blur(10px) saturate(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  color: var(--paper);
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .player:hover .player__ring { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: scale(1.06); }
}
.player__ring svg { margin-left: 3px; }
.player__meta {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem);
  color: var(--paper-dim);
}

/* --- Kare akışı (masaüstü: dikey editoryal ritim) --- */
/* Kareler masaüstünde İKİŞER. Tek sütunda dikey bir kare 760px kalıyor,
   1920'lik bir ekranda iki yanında 580'er piksel boşluk bırakıyordu — sayfa
   boş, akış da gereksiz uzun oluyordu.

   auto-fit + minmax: sabit bir kırılma noktası yok. Sütuna en az 480px
   düşmüyorsa ızgara kendiliğinden tek sütuna iniyor, yani dar masaüstünde
   kareler küçülmüyor.

   `columns` (films sayfasındaki gibi) DEĞİL: o, kareleri önce birinci sütunu
   doldurup ikinciye geçecek şekilde diziyor. Burada sıra anlamlı — kareler
   bir çekimin akışı, soldan sağa okunmalı. */
.reel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 8vw, 6.5rem);
  padding: 0 var(--rail);
}
/* Ölçü sınırları duruyor. İki sütun sığdığında sütun zaten bunlardan dar,
   yani sınır devreye girmiyor; ızgara tek sütuna indiğinde (dar masaüstü)
   kareler eskisi gibi sınırlı ve ortalı kalıyor — orada 900px'lik bir dikey
   kare fazla iri duruyordu. */
.reel__item { width: 100%; max-width: 1240px; justify-self: center; }
/* Dikey kareler daha dar dursun — moda işi böyle nefes alır */
.reel__item[data-portrait="1"] { max-width: 760px; }
.reel__item .frame { width: 100%; aspect-ratio: var(--ratio, 0.8); }
.reel__item img { width: 100%; height: 100%; object-fit: cover; }
.reel__cap {
  margin-top: 0.7rem;
  color: var(--paper-faint);
}
.reel__count { display: none; }

/* --- XXL: iş detayı geniş ekranda daralmasın ---------------------------
   1560px'lik genel içerik sınırı 2560'lık bir ekranda iki yanda 500'er
   piksel boş bırakıyor; iş detayı bir sunum sayfası, orada bu kadar boşluk
   sayfayı küçük gösteriyor.

   Sınır --content-max'ı .work içinde YENİDEN TANIMLAYARAK açılıyor: kareler,
   künye, oynatıcı ve giriş bloğu hepsi aynı değişkene bağlı, tek yerden
   birlikte genişliyorlar — dördünü ayrı ayrı ezmek gerekmiyor.

   Sütun sayısı burada auto-fit'e bırakılmıyor, AÇIKÇA 3: geniş kapsayıcıda
   auto-fit 480px'lik alt sınırla dörde çıkıyordu ve kareler küçülüyordu. */
/* Sütun sayısı açıkça yazılıyor, auto-fit'e bırakılmıyor: geniş kapsayıcıda
   480px'lik alt sınır beklenmedik sayıda sütun üretiyordu.
   Ölçülen kare genişlikleri — 1500: 422 · 1700: 435 · 1900: 548 · 2100: 447 ·
   2560 ve üstü: 472 piksel. */
@media (min-width: 1500px) {
  .reel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1900px) {
  .work { --content-max: 2200px; }
}
@media (min-width: 2100px) {
  .reel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------
   GERİ — detay sayfasından çıkış
   Navigasyonun altında sabit durur. Parlak bir açılış karesinin üstünde de
   okunması gerektiği için cam zemin + ince çerçeve; sitenin geri kalanıyla
   aynı dil (mono, geniş harf aralığı, sessiz renk).
   --------------------------------------------------------------------- */
.workback {
  position: fixed;
  top: calc(var(--nav-h) + var(--safe-t) + 0.6rem);
  left: var(--rail);
  z-index: calc(var(--z-nav) - 1);      /* navigasyonun altında, kareden üstte */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.46rem 0.85rem 0.46rem 0.62rem;
  border: 1px solid rgba(242, 239, 234, 0.16);
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.42);
  box-shadow: 0 6px 26px rgba(10, 10, 11, 0.3);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  color: var(--paper);
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.workback__arrow { display: grid; place-items: center; transition: transform var(--d-base) var(--ease); }
.workback__label { color: inherit; }

@media (hover: hover) and (pointer: fine) {
  .workback:hover {
    background: rgba(10, 10, 11, 0.62);
    border-color: rgba(242, 239, 234, 0.32);
  }
  .workback:hover .workback__arrow { transform: translateX(-2px); }
}

/* Mobilde navigasyon 56px; etiket kısalmasın diye yalnız boşluklar sıkışır */
@media (max-width: 900px) {
  .workback {
    top: calc(56px + var(--safe-t) + 0.5rem);
    padding: 0.42rem 0.75rem 0.42rem 0.56rem;
    gap: 0.42rem;
  }
}

/* Sabit bir düğme sayfanın geri kalanını sürekli örter — künye satırlarının
   üstüne biniyordu. Aşağı kaydırırken çekilir, yukarı kaydırınca döner:
   okurken yolda değil, geri dönmek istendiği anda elin altında. */
.workback {
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.workback.is-away {
  opacity: 0;
  transform: translateY(-0.75rem);
  pointer-events: none;
}

/* Yazdırırken gezinme öğesi anlamsız */
@media print { .workback { display: none; } }

/* =====================================================================
   FİLM MODALI
   Kart içinde oynatmak filmi kartın oranına hapsediyordu. Modal filmin
   KENDİ oranını alıyor: dikey teaser yüksekliğe, yatay teaser genişliğe
   oturuyor, ikisi de kırpılmadan ve boş bant bırakmadan.

   Ölçü tek satırda: genişlik ya ekranın %92'si, ya da yüksekliğin oranla
   çarpımı — hangisi küçükse. Böylece kutu her zaman ekrana sığıyor.
   ===================================================================== */
.filmmodal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease);
}
.filmmodal.is-open { opacity: 1; pointer-events: auto; }

.filmmodal__perde {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 7, 0.88);
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
}

.filmmodal__icerik {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: scale(0.98);
  transition: transform var(--d-slow) var(--ease);
}
.filmmodal.is-open .filmmodal__icerik { transform: scale(1); }

.filmmodal__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.filmmodal__baslik { color: var(--paper-dim); }

.filmmodal__kapat {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(242, 239, 234, 0.18);
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.5);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .filmmodal__kapat:hover {
    background: rgba(242, 239, 234, 0.12);
    border-color: rgba(242, 239, 234, 0.4);
  }
}

/* Oranı filmden gelir (--fm-ratio). min() ekrana sığmayı garanti eder:
   yatay filmde genişlik, dikey filmde yükseklik sınırlayıcı olur. */
.filmmodal__cerceve {
  --fm-ratio: 1.7778;
  width: min(92vw, calc((88vh - 4rem) * var(--fm-ratio)));
  aspect-ratio: var(--fm-ratio);
  background: #000;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}
.filmmodal__cerceve iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Modal açıkken sayfa kaymasın */
body.is-modal { overflow: hidden; }

@media (max-width: 900px) {
  .filmmodal__cerceve { width: min(94vw, calc((80vh - 4rem) * var(--fm-ratio))); }
  .filmmodal__kapat { width: 34px; height: 34px; }
}

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

/* --- Sonraki proje --- */
.nextwork {
  position: relative;
  display: block;
  margin-top: clamp(4rem, 10vw, 8rem);
  height: min(58vh, 560px);
  overflow: hidden;
}
.nextwork img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.5);
  transition: transform var(--d-film) var(--ease), filter var(--d-slow) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nextwork:hover img { transform: scale(1.035); filter: brightness(0.66); }
}
/* Yazının arkasına yumuşak bir perde. brightness(0.5) tek başına yetmiyor:
   kadrajın ortasına parlak bir şey (sarı elbise, gökyüzü, beyaz duvar)
   denk geldiğinde başlık eriyordu. Perde ortada yoğun, kenarlara doğru
   siliniyor — fotoğrafın kenarları açık kalıyor, yazı her işte okunuyor. */
.nextwork::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 58% at 50% 50%,
              rgba(10, 10, 11, 0.62) 0%,
              rgba(10, 10, 11, 0.34) 45%,
              rgba(10, 10, 11, 0) 78%);
  pointer-events: none;
  z-index: 1;
}
.nextwork__body {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center;
  padding: var(--rail);
  text-shadow: 0 2px 18px rgba(10, 10, 11, 0.5);
}

@media (max-width: 900px) {
  .work__head {
    padding-top: calc(56px + var(--safe-t) + 2.5rem);
  }
  .work__cover img { max-height: 70vh; }
  .player { margin-inline: 0; }
  /* 58vh telefonda neredeyse tam ekran bir bant; kapanış jesti olmalı,
     ayrı bir sayfa değil. */
  .nextwork { height: min(42vh, 380px); }

  /* Mobilde kareler yatay şeritte kayar — uygulama galerisi gibi.
     display'i AÇIKÇA flex yapıyor: taban kural artık grid, yalnız
     flex-direction yazmak sessizce hiçbir şey yapmazdı. */
  .reel {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reel::-webkit-scrollbar { display: none; }
  .reel__item {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
    padding: 0 10px;
  }
  .reel__item[data-portrait="1"] { max-width: 100%; }
  .reel__cap { padding: 0 4px; }
  .reel__count {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    color: var(--paper-faint);
  }
}

/* ---------------------------------------------------------------------
   ARŞİV — tipografik dizin. Satırın üstüne gelince kare belirir.
   --------------------------------------------------------------------- */
/* Liste de tam genişlikte: başlık ve baskı ızgarası ekranı kaplarken liste
   1560px'lik ortalanmış bir kutuda kalınca, görünüm değiştirince sol kenar
   zıplıyordu. Kenar payı diğer ikisiyle aynı. */
.index { padding: 0 var(--rail) clamp(5rem, 10vw, 9rem); max-width: none; }

.index__head,
.index__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 2.2fr) minmax(0, 1.3fr) 9rem 5rem;
  gap: var(--gut);
  align-items: baseline;
}
.index__head {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper-ghost);
  position: sticky;
  top: var(--nav-h);
  background: var(--ink);
  z-index: 5;
}
.index__row {
  padding: clamp(1rem, 1.9vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--d-base) var(--ease), padding-left var(--d-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .index__row:hover { padding-left: 0.7rem; } }
.index__no { color: var(--paper-faint); }
.index__title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--paper);
}

/* Marka adı bir İSİM, veri etiketi değil. Önceden diğer sütunlarla birlikte
   t-meta taşıyordu: küçük + BÜYÜK HARF + 0.14em aralık + %56 opaklık. Dördü
   üst üste gelince satır okunmuyordu — arşivin okunmama şikâyeti buydu.
   Ad artık kendi dilinde: gövde fontu, normal yazım, yakın aralık. */
.index__client {
  font-family: var(--font-ui);
  font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: rgba(242, 239, 234, 0.72);
}
/* Tür ve yıl kısa etiketler — mono/versal duruşu bilgi olduklarını söylüyor,
   yalnız kontrastları açıldı. */
.index__type, .index__year { color: rgba(242, 239, 234, 0.62); }
.index__row:hover .index__client,
.index__row:hover .index__type,
.index__row:hover .index__year { color: var(--paper); }

/* =====================================================================
   ARŞİV — PLAKALAR
   Masaya saçılmış baskılar. Ölçü, eğim ve kayma PHP'den geliyor ve işin
   kimliğinden türediği için her ziyarette aynı: sayfa "kendini yeniden
   dizmiyor", baskılar hep aynı yerde duruyor.

   Izgara düzenli, baskılar değil. Hücre sabit; büyük baskılar hücrelerinden
   taşıp komşularının üstüne biniyor — dağınıklığı yaratan bu. Referansta da
   çekiciliği veren şey aynı: düzenli bir sistem, düzensiz yerleşim.

   Koyu zeminde gölge tek başına baskıyı ayırmaya yetmiyor (referans açık
   zeminliydi); ince bir kenar ışığı ekleniyor ki kâğıt kenarı okunsun.
   ===================================================================== */
.plates {
  --pl-cell: clamp(96px, 12vw, 168px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pl-cell), 1fr));
  grid-auto-rows: calc(var(--pl-cell) * 0.92);
  align-items: center;
  justify-items: center;
  gap: clamp(1.5rem, 3vw, 3rem) clamp(0.5rem, 1.5vw, 1.5rem);
  /* Tam genişlik — --content-max UYGULANMIYOR.
     Hücre piksel olarak tavanlı (168px), sayfa genişledikçe baskı büyümüyor,
     SÜTUN SAYISI artıyor: 1560px'lik kapak dururken geniş ekranda ortada bir
     şerit kalıyor ve arşiv boşuna uzuyordu. Dağınık yerleşimin okunması da
     geniş alanda daha kolay — sistem görünüyor, şerit değil.
     Kenar payı sayfanın geri kalanıyla aynı (--rail) ve duruyor: baskılar
     döndürülüp kaydırıldığı, en büyüğü de hücresinden taşıdığı için sıfır
     boşlukta ekran kenarından kırpılmış gibi dururlardı. Payı daraltmak
     sütun sayısını da artırmıyor — ölçüldü, 1920 ve 2560'ta aynı. */
  padding: clamp(2rem, 5vw, 4rem) var(--rail) clamp(5rem, 10vw, 9rem);
}

.plate {
  position: relative;
  display: block;
  width: calc(var(--pl-cell) * var(--pl-scale, 1));
  transform: translate(var(--pl-dx, 0), var(--pl-dy, 0)) rotate(var(--pl-rot, 0deg));
  transition: transform var(--d-base) var(--ease), filter var(--d-base) var(--ease);
  z-index: 1;
  color: var(--paper);
}
/* Büyük baskı üstte durur — üst üste binme kazara değil, kurgulu görünsün */
.plate--orta  { z-index: 2; }
.plate--buyuk { z-index: 3; }

.plate__frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--pl-ratio, 1.4);
  overflow: hidden;
  background: var(--ink-raise);
  /* Kâğıt kenarı + masaya düşen gölge */
  box-shadow:
    0 0 0 1px rgba(242, 239, 234, 0.09),
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.plate__frame img,
.plate__frame picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Başlık baskının altında, yalnız üstüne gelince. Akışta yer kaplasaydı
   ızgaranın ritmi bozulurdu. */
.plate__cap {
  position: absolute;
  left: 50%; top: calc(100% + 0.55rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 190px;
  text-align: center;
  color: var(--paper-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  /* Üstüne gelince baskı DÜZELİR ve kalkar — eline alıp bakıyormuşsun gibi */
  .plate:hover {
    transform: translate(var(--pl-dx, 0), calc(var(--pl-dy, 0) - 6px)) rotate(0deg) scale(1.06);
    z-index: 6;
  }
  .plate:hover .plate__cap { opacity: 1; }
  /* Biri elde alınınca masadaki diğerleri geri çekilir */
  .plates:hover .plate:not(:hover) { filter: brightness(0.55) saturate(0.8); }
}
/* Klavye ile gezinenler de görsün */
.plate:focus-visible { transform: translate(var(--pl-dx,0), var(--pl-dy,0)) rotate(0deg) scale(1.06); z-index: 6; }
.plate:focus-visible .plate__cap { opacity: 1; }

/* ---------------------------------------------------------------------
   MOBİL — saçılma değil, KENETLENMİŞ MOZAİK

   375px'te üç sütun zaten dar; baskıları eğip aralarında boşluk bırakmak
   ekranın yarısını harcıyordu. Küçük ekranda aynı fikir başka bir bedende
   yaşıyor: kareler kenar kenara kenetlenip tek bir yüzey oluşturuyor,
   çeşitlilik eğimden değil hücre AÇIKLIĞINDAN geliyor (2x2, 2x1, 1x2, 1x1).

   `dense` şart: büyük bir kare sığmadığında ızgara onu atlayıp sonrakini
   yerleştiriyor, böylece delik kalmıyor. 28 iş = 51 hücre = 3 sütunda tam
   17 satır.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .plates {
    --pl-gap: 3px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Satır yüksekliği boşluk DÜŞÜLDÜKTEN sonraki sütun genişliğine eşit —
       yoksa 1x1 kareler hafifçe dikdörtgenleşir ve ızgara kayar. */
    grid-auto-rows: calc((100vw - 2 * var(--pl-gap)) / 3);
    gap: var(--pl-gap);
    padding: 0 0 clamp(4rem, 12vw, 7rem);
    max-width: none;               /* tam genişlik */
    align-items: stretch;
    justify-items: stretch;
  }

  .plate {
    width: auto;                   /* ölçek masaüstüne ait, burada açıklık var */
    transform: none;
    /* Konum PHP'den — tarayıcının akışına bırakılmıyor, çünkü `dense`
       kusursuz yerleşimi bulamıyordu. */
    grid-column: var(--pl-c, auto) / span var(--pl-w, 1);
    grid-row:    var(--pl-r, auto) / span var(--pl-h, 1);
    z-index: auto;
  }

  /* Kâğıt kenarı ve gölge burada anlamsız: baskılar masada değil, tek bir
     yüzeyin parçaları. Kare hücreyi bütünüyle dolduruyor. */
  .plate__frame {
    height: 100%;
    aspect-ratio: auto;
    box-shadow: none;
  }

  .plate__cap { display: none; }

  /* Dokunmatikte "diğerlerini karart" jesti yok — hover yok */
  .plates:hover .plate:not(:hover) { filter: none; }
}

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

/* --- Görünüm anahtarı --- */
.archive[data-view="plates"] .index  { display: none; }
.archive[data-view="list"]   .plates { display: none; }

.archive__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  text-align: right;
}
.archive__views { display: inline-flex; gap: 0.35rem; }

/* Uçan önizleme — imleci takip eder */
.peek {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-overlay);
  width: 260px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  /* Konum ve ölçek JS'ten gelir (imleci gecikmeli takip eder) */
  transition: opacity var(--d-base) var(--ease);
  background: var(--ink-raise);
  will-change: transform;
}
.peek.is-on { opacity: 1; }
.peek img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.peek.is-ready img { opacity: 1; }
html:not(.has-pointer) .peek { display: none; }

@media (max-width: 900px) {
  .index__head { display: none; }
  .index__row {
    grid-template-columns: 2.2rem 1fr auto;
    grid-template-areas: 'no title year' '. client year';
    gap: 0.2rem 0.9rem;
    padding: 1rem 0;
  }
  .index__no     { grid-area: no; }
  .index__title  { grid-area: title; }
  .index__client { grid-area: client; }
  .index__year   { grid-area: year; align-self: center; }
  .index__type   { display: none; }
}

/* ---------------------------------------------------------------------
   FİLMLER
   --------------------------------------------------------------------- */
/* Filmler — MASONRY.
   Izgarada satır yüksekliği o satırın en uzun kartına göre belirlenir;
   dikey bir teaser (0.78) ile yatay bir reklam filmi (1.78) yan yana
   gelince kısa olanın altında bir ekran boyu boşluk kalıyordu. Kolon
   akışında kartlar birbirinin altına sıkışarak yerleşir, boşluk kalmaz.
   Ana sayfadaki ızgara da aynı yöntemi kullanıyor. */
.films {
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 5vw, 4rem) var(--rail) clamp(5rem, 10vw, 9rem);
}
@media (max-width: 900px)  { .films { columns: 1; } }
/* Geniş ekranda üç kolon. İçerik sınırı 1560px; üç kolonda her kart ~470px
   kalıyor ki bir film karesi için hâlâ rahat. Altında iki kolon daha iyi:
   1200'ün altında üçe bölünce kartlar poster boyutuna iniyor. */
@media (min-width: 1200px) { .films { columns: 3; } }
.filmcard {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(1.5rem, 3vw, 3rem);
}
/* Kart içinde oynatıcı sütunu doldurur — max-height burada geçerli değil,
   yoksa dikey teaser'lar kutuyu daraltır ve ızgara bozulur. */
.filmcard .player { margin: 0; max-height: none; width: 100%; }
.filmcard__meta { display: flex; gap: 0.8rem; margin-top: 0.85rem; }
.filmcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
@media (hover: hover) and (pointer: fine) { .filmcard:hover .frame img { transform: scale(1.03); } }

/* Contact — başlık karşısındaki çağrı cümlesi ve gövde metinleri */
.contact__claim {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--paper);
  text-align: right;
  max-width: 20ch;
}
@media (max-width: 700px) { .contact__claim { text-align: left; } }


.contact__body {
  margin-top: 1.6rem;
  max-width: 46ch;
  line-height: 1.8;
  color: var(--paper-dim);
}


/* ---------------------------------------------------------------------
   HAKKINDA
   --------------------------------------------------------------------- */
/* Sütunlar 1/3 – 2/3.
   Eşit iki sütunda ölü alan sütunlar ARASINDA değil, sol sütunun İÇİNDE
   kalıyordu: portre 380px'i aşamıyor (kaynak 399x501; büyütmek yumuşatır)
   ama sütun ~700px'ti, yani ~320px boşluk. Portreye ihtiyacı kadar yer,
   metne de nefes alacağı genişlik. */
.about {
  display: grid;
  /* İki eşit sütun. Önce 1.3/1 denendi ve bırakıldı: hizmetler gözle görülür
     biçimde küçük kalıyor, iki bölüm eşit ağırlıkta okunmuyordu. Metin ölçüsü
     sütun genişliğinden ayrı tutuluyor (aşağıda), yani sütunları eşitlemek
     satırları okunmaz derecede uzatmıyor. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--rail) clamp(4rem, 9vw, 8rem);
  align-items: start;
}
/* min-width:0 şart: ızgara öğesinin varsayılan min-width'i `auto`, yani
   içeriğinden daha dar olamıyor. Bu, geniş bir çocuk sütunu şişirip sayfayı
   yatay kaydırdığı için bir kez yaşandı. */
.about__left,
.about__right { min-width: 0; }

/* Yapışkanlık sol sütundan alındı: biyografi oraya taşınınca sütun ekrandan
   uzun oldu, uzun bir sticky öğe yapışmıyor — sadece akışı bozuyordu.
   Kısa olan artık sağ sütun; kaydırırken hizmetler yerinde kalıyor. */
@media (min-width: 1101px) {
  .about__right { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* Portre daire içinde (müşteri isteği). Kare oran + tam yuvarlaklık;
   object-fit: cover kadrajı ortalıyor, portre dışına taşan kısım kırpılıyor.
   Kaynak 399x501 olduğu için 380px sınırı büyütmeye izin vermiyor. */
.about__portrait {
  /* Kenar boşluğu düşülmüş genişliği aşmasın — 375px ekranda 380px'lik
     daire sayfayı yatay kaydırıyordu. */
  width: min(380px, 100%, calc(100vw - 2 * var(--rail)));
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink-raise);
  /* İnce bir halka: koyu zeminde dairenin kenarı kaybolmasın */
  box-shadow: 0 0 0 1px rgba(242, 239, 234, 0.10);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__intro { max-width: 44ch; margin-bottom: 1.5rem; }
/* Portrenin hemen altındaki blok — daireden ayrılsın */
.about__bio { margin-top: clamp(2rem, 4vw, 3rem); }

/* Sütun 2/3'e genişleyince satırlar 112 karaktere çıkmıştı; göz satır
   sonundan başına dönerken kayboluyor. Ölçü okunabilir aralıkta tutulur,
   artan genişlik boşluk olarak kalır — sütunun geniş olması metnin de
   geniş olması demek değil. */
.about__left .t-body { max-width: 68ch; }
.about__left .t-body p + p { margin-top: 1.15em; }
/* Kapanış satırı — davet cümlesi, gövdeden ayrılsın.
   Çizgi sütunun sonuna kadar gidiyor (sağdaki hizmet çizgileri gibi);
   68ch'te bitince sol blok sütununun 11px önünde kesiliyordu. */
.about__avail {
  max-width: none;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--paper-dim);
}
.about__block + .about__block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.about__h {
  color: var(--paper-ghost);
  padding-bottom: 0.8rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}
/* ---------------------------------------------------------------------
   HİZMETLER — numaralı bloklar
   Önceden tek satırlık bir listeydi; artık her hizmetin kendi başlığı ve
   açıklaması var. Numara solda sabit sütunda durur, metin yanında akar.
   --------------------------------------------------------------------- */
.services { list-style: none; margin: 0; padding: 0; }
/* Numara yandaki OLUKTA değil, başlığın üstünde.
   Oluk (3.25rem + --gut ≈ 100px) hizmet metnini sütununun içinden
   başlatıyordu: sütunlar eşitken bile sol ve sağ okuma blokları arasında
   88px fark kalıyor, sağ sütun küçük görünüyordu. Ölçüldü. */
.services__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.services__item:first-child { padding-top: 0; }
.services__no {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--paper-ghost);
}
.services__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-transform: uppercase;
}
.services__text {
  margin-top: 0.7rem;
  /* Soldaki biyografiyle AYNI ölçü. İkisi de aynı boyda gövde metni; farklı
     sınırlar (68ch / 62ch) iki sütunun paragraflarını farklı yerlerde
     bitiriyor, sağ blok küçük görünüyordu. */
  max-width: 68ch;
  color: var(--paper-dim);
  line-height: 1.75;
}

/* ---------------------------------------------------------------------
   MARKA AKIŞI — kesintisiz yatay şerit

   Liste DOM'da iki kez var. Şerit tam BİR liste boyu (-50%) kayıp başa
   döndüğünde kopya tam o anda birincinin yerinde olur; sıçrama görünmez.
   Yüzde kullanıldığı için logo sayısı değişse de dikiş yerinde kalır.
   --------------------------------------------------------------------- */
/* Marka şeridi bölümü — tam genişlik.
   Şerit ekranın bir kenarından öbürüne uzanır; başlık ise sayfanın geri
   kalanıyla aynı hizada durur, yoksa ekranın en solunda tek başına kalırdı. */
.clients {
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 9vw, 7rem);
}
.clients__h {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--rail);
}

.marquee {
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  /* Kenarlarda eriyip gitsin — şerit kesilmiş gibi durmasın */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: ka-marquee var(--marquee-sure, 48s) linear infinite;
}
.marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(2.25rem, 4.5vw, 4rem);
  margin: 0;
  padding: 0 clamp(1.125rem, 2.25vw, 2rem) 0 0;
  list-style: none;
}
.marquee__set img {
  height: 44px;                    /* 34 → 44: bir tık daha görünür */
  width: auto;
  max-width: none;
  opacity: 0.62;
  transition: opacity var(--d-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__set img:hover { opacity: 1; }
}
@keyframes ka-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Hareketi azalt: akış durur, logolar sarılarak görünür */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__set:nth-child(2) { display: none; }
}

/* Buton + doğrudan e-posta yan yana — hem yönlendirme hem bilgi */
.about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.about__mail {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: var(--paper-dim);
  transition: color var(--d-fast) var(--ease);
}
.about__mail:hover { color: var(--paper); }

/* Tek sütuna geçiş 900 değil 1100px'te.
   Sol sütunun taşıması gereken en küçük genişlik belli: 380px'lik portre ve
   altında okunabilir bir metin ölçüsü. Sağda hizmet blokları kalınca 950px'te
   hizmet paragrafı 273px'e (yaklaşık 38 karakter) düşüyordu — iki sütun orada
   artık kazanç değil. Ölçüldü: 1100px'in üstünde paragraf 337px ve üzeri. */
@media (max-width: 1100px) {
  .about { grid-template-columns: 1fr; }
  /* Tek sütunda yapışkanlık zarar veriyor — normal akış.
     (min-width kuralıyla zaten uygulanmıyor; niyet açık dursun diye yazılı.) */
  .about__right { position: static; top: auto; }
  .about__portrait { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   İLETİŞİM
   --------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--rail) clamp(4rem, 9vw, 8rem);
  align-items: start;
}
.contact__mail {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  display: inline-block;
}
.contact__soc { display: flex; gap: 1.5rem; margin-top: 2rem; }
.contact__soc a { color: var(--paper-dim); transition: color var(--d-fast) var(--ease); }
.contact__soc a:hover { color: var(--paper); }

/* --- Form —— kutu yok, çizgi altı alanlar.
   Markup panelin Form Builder'ından gelir (goreel-form-*), tema onu giydirir. --- */
.goreel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(1rem, 2.4vw, 2rem);
}
.goreel-form-col-2 { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .goreel-form-grid { grid-template-columns: 1fr; }
  .goreel-form-col-1 { grid-column: 1 / -1; }
}

.goreel-form-field { display: flex; flex-direction: column; }

.goreel-form-label {
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--paper-faint);
}
.goreel-form-required { color: var(--safelight); }
.goreel-form-help { margin-top: 0.4rem; color: var(--paper-ghost); font-size: var(--t-small); }

.goreel-form input[type="text"],
.goreel-form input[type="email"],
.goreel-form input[type="tel"],
.goreel-form input[type="url"],
.goreel-form input[type="number"],
.goreel-form input[type="date"],
.goreel-form select,
.goreel-form textarea {
  width: 100%;
  padding: 0.7rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 1rem;
  transition: border-color var(--d-base) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.goreel-form textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.goreel-form input:focus,
.goreel-form select:focus,
.goreel-form textarea:focus { outline: none; border-color: var(--paper); }
.goreel-form ::placeholder { color: var(--paper-ghost); }

/* Tarayıcı otomatik doldurma karanlık zemini bozmasın */
.goreel-form input:-webkit-autofill,
.goreel-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--paper);
  box-shadow: 0 0 0 1000px var(--ink) inset;
  transition: background-color 9999s;
}

.goreel-form-field-error input,
.goreel-form-field-error textarea { border-color: var(--safelight); }
.goreel-form-error {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--safelight);
}

.goreel-form-actions { margin-top: 2.25rem; }
.goreel-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border: 1px solid var(--paper);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.goreel-form-submit:hover { background: transparent; color: var(--paper); border-color: var(--line-strong); }

.goreel-form-success,
.goreel-form-error-box {
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}
.goreel-form-success { border-color: rgba(120, 180, 130, 0.45); color: var(--paper); }

.is-busy { opacity: 0.45; pointer-events: none; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   404
   --------------------------------------------------------------------- */
.lost {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
  padding: var(--rail);
}

/* ---------------------------------------------------------------------
   SAYFA GEÇİŞİ — paylaşılan kare
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(ka-hero),
::view-transition-new(ka-hero) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-group(root) { animation-duration: 380ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}