/* ==========================================================================
   ARTE — TEMEL
   Sıfırlama, tipografi, düzen (grid) ve tekrar eden küçük parçalar.
   Bileşenler (üst menü, kartlar, formlar) bilesenler.css içindedir.
   ========================================================================== */

/* --- 1. Sıfırlama --------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--renk-beyaz);
  color: var(--renk-koyu);
  font: 400 var(--p-govde-2)/1.7 var(--yazi-govde);
  -webkit-font-smoothing: antialiased;
}

/* --- Yatay kayma kilidi ---------------------------------------------------
   Sayfa yalnızca yukarı-aşağı kayar; sağa-sola asla kaymaz. Telefonda
   bir öğe birkaç piksel taşsa bile sayfa yana oynamaz.

   NOT: Bu bir güvenlik ağıdır, taşmanın mazereti değil. Yeni bölüm eklerken
   yine de taşma ölçülmeli — gizlenen taşma, ekranın dışında kalan içerik demektir.

   'clip' kullanılıyor, 'hidden' değil: hidden, yapışkan (sticky) öğeleri bozar. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Kaydırma sayfanın sonunda komşu öğeye/tarayıcı hareketine sıçramasın
   (telefonda "geri git" hareketini yanlışlıkla tetiklemeyi de önler) */
body { overscroll-behavior-x: none; }

/* clip desteklemeyen eski tarayıcılar için */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }

ul, ol { padding: 0; list-style: none; }

/* Klavyeyle gezinenler için görünür odak halkası */
:focus-visible {
  outline: 2px solid var(--renk-turuncu);
  outline-offset: 2px;
}

/* ⚠ hidden özniteliği, display veren her kural tarafından eziliyor:
   .plan-alan { display: flex } yazınca "hidden" öğe görünür kalıyordu.
   Bu genel kural olmadan her bileşen için ayrı ayrı yazmak gerekiyor
   (sitede beş yerde öyle yapılmıştı). */
[hidden] { display: none !important; }

/* Ekran okuyucuya özel — görsel olarak gizli */
.gizli-metin {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* İçeriğe atla bağlantısı */
.icerige-atla {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--renk-turuncu); color: #fff;
  padding: 12px 18px; border-radius: var(--yari-3);
  font: 700 var(--p-kucuk)/1 var(--yazi-baslik);
}
.icerige-atla:focus { left: 12px; top: 12px; }


/* --- 2. Tipografi --------------------------------------------------------- */

.h1 {
  font: 700 var(--p-h1)/1.05 var(--yazi-baslik);
  letter-spacing: -.03em;
  text-wrap: balance;
}

.h2 {
  font: 700 var(--p-h2)/1.08 var(--yazi-baslik);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.h2-kucuk {
  font: 700 var(--p-h2-kucuk)/1.1 var(--yazi-baslik);
  letter-spacing: -.02em;
}

.h3 {
  font: 600 var(--p-h3)/1.3 var(--yazi-baslik);
  letter-spacing: -.015em;
}

/* Turuncu, büyük harf, aralıklı mono etiket — bölüm üstlerinde kullanılır */
.etiket {
  font: 600 var(--p-etiket)/1 var(--yazi-mono);
  letter-spacing: .22em;
  color: var(--renk-turuncu);
  text-transform: uppercase;
}

.etiket-gri {
  font: 600 var(--p-etiket)/1 var(--yazi-mono);
  letter-spacing: .16em;
  color: var(--renk-metin-3);
  text-transform: uppercase;
}

.giris-metni {
  font: 400 var(--p-govde)/1.7 var(--yazi-govde);
  color: var(--renk-metin-2);
  text-wrap: pretty;
}

.metin { color: var(--renk-metin-2); }
.metin-silik { color: var(--renk-metin-3); }
.turuncu { color: var(--renk-turuncu); }


/* --- 3. Düzen -------------------------------------------------------------

   IZGARA TUZAĞI (bir kez yaşandı, tekrar yaşanmasın):
   Izgara gözünün varsayılan en küçük genişliği "içeriği kadar"dır. İçinde
   sabit oranlı bir görsel varsa göz küçülmeyi reddeder ve dar ekranda taşar.
   Çözüm: sütunları 1fr yerine minmax(0, 1fr) tanımlamak. Aşağıdaki kural
   sitedeki tüm ızgara gözlerine bu izni topluca verir.                      */

[class*="izgara"] > *,
[class*="kartlar"] > *,
[class*="liste"] > *,
.galeri > *,
.ucb-ikili > *,
.koleksiyon-ikili > * { min-width: 0; }


/* --- Düzen kutuları ------------------------------------------------------- */

.kapsa {
  width: 100%;
  max-width: var(--en-genis);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

/* Kenardan kenara giden bölümler için (zemin rengi tam genişlik olsun diye) */
.bolum      { padding-block: var(--bolum-y); }
.bolum-panel { background: var(--renk-panel); }
.bolum-koyu  { background: var(--renk-koyu); color: var(--acik-metin); }
.bolum-zemin { background: var(--renk-zemin); }

.cizgi-ust { border-top: 1px solid var(--cizgi-8); }
.cizgi-alt { border-bottom: 1px solid var(--cizgi-8); }

/* Bölüm başlığı: etiket + başlık + (varsa) sağda bağlantı */
.bolum-basi {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--bo-9);
  margin-bottom: var(--bo-8);
}
.bolum-basi > div { display: flex; flex-direction: column; gap: var(--bo-3); }

@media (max-width: 700px) {
  .bolum-basi { flex-direction: column; align-items: flex-start; gap: var(--bo-5); }
}


/* --- 4. Butonlar ---------------------------------------------------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bo-3);
  min-height: var(--dokunma);
  padding: 18px 28px;
  border-radius: var(--yari-3);
  font: 600 var(--p-govde-2)/1 var(--yazi-baslik);
  text-align: center;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

/* Birincil — turuncu dolgu. Sayfada en fazla bir tane baskın olmalı. */
.dugme-birincil {
  background: var(--renk-turuncu);
  color: #fff;
  font-weight: 700;
  padding: 19px 30px;
}
.dugme-birincil:hover { background: var(--renk-turuncu-koyu); }

/* İkincil — koyu çerçeve, üzerine gelince dolar */
.dugme-ikincil {
  border: 1px solid var(--renk-koyu);
  color: var(--renk-koyu);
}
.dugme-ikincil:hover { background: var(--renk-koyu); color: var(--acik-metin); }

/* Sessiz — ince gri çerçeve */
.dugme-sade {
  border: 1px solid var(--cizgi-20);
  color: var(--renk-koyu);
}
.dugme-sade:hover { border-color: var(--renk-koyu); }

/* Koyu zemin üzerinde kullanılan çerçeveli buton */
.dugme-acik {
  border: 1px solid var(--acik-cizgi-2);
  color: var(--acik-metin);
}
.dugme-acik:hover { background: rgba(246, 243, 238, .1); }

.dugme-kucuk { padding: 13px 18px; min-height: 0; font-size: var(--p-kucuk); }

/* --- WhatsApp düğmesi ------------------------------------------------------
   WhatsApp'ın kendi yeşili kullanılıyor ki tanınsın.
   Yazı ANTRASİT — beyaz yazı bu yeşilin üzerinde okunmuyor (1,98:1),
   antrasitle 9,13:1 oluyor.                                                 */
.dugme-whatsapp {
  background: var(--renk-wa);
  color: var(--renk-koyu);
  font-weight: 700;
  border: 0;
}
.dugme-whatsapp:hover { background: var(--renk-wa-koyu); color: var(--renk-koyu); }

.wa-simge { width: 1.15em; height: 1.15em; flex: none; }

/* Metin bağlantısı — "Tüm projeleri gör →" */
.bag-ok {
  display: inline-flex; align-items: center; gap: var(--bo-2);
  font: 600 var(--p-kucuk)/1 var(--yazi-baslik);
  color: var(--renk-koyu);
  /* Alt çizgi 18 Ağu'da kaldırıldı: kart içinde kesik bir çubuk gibi
     duruyordu. Geri bildirim rengin turuncuya dönmesiyle veriliyor,
     okun bir adım sağa kayması da yönü hissettiriyor. */
  transition: color var(--gecis);
}
.bag-ok:hover { color: var(--renk-turuncu); }
.bag-ok i, .bag-ok::after { transition: transform var(--gecis); }
.bag-ok:hover i { transform: translateX(3px); }


/* --- 5. Küçük parçalar ---------------------------------------------------- */

/* Turuncu "YENİ" rozeti */
.rozet {
  font: 700 10px/1 var(--yazi-baslik);
  letter-spacing: .16em;
  color: #fff;
  background: var(--renk-turuncu);
  padding: 7px 10px;
  border-radius: var(--yari-3);
}

/* Seçilebilir çip (kapak modeli, alan türü vb.) */
.cip {
  display: inline-flex; align-items: center;
  min-height: var(--dokunma);
  padding: 12px 16px;
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-2);
  font: 500 var(--p-mini)/1 var(--yazi-govde);
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.cip:hover { border-color: var(--renk-koyu); }
.cip[aria-pressed="true"],
.cip.secili { border-color: var(--renk-turuncu); background: var(--renk-vurgu-zemin); color: var(--renk-turuncu); }

/* Görsel yer tutucu — gerçek fotoğraf gelene kadar. Yolu görünür yazar. */
.gorsel-yer {
  position: relative;
  background: repeating-linear-gradient(135deg, #DED7CC 0 10px, #D5CDC1 10px 20px);
  border-radius: var(--yari-3);
  display: flex; align-items: flex-end; padding: var(--bo-5);
  overflow: hidden;
  min-width: 0;          /* içindeki uzun dosya yolu kutuyu şişirmesin */
}
.gorsel-yer::after {
  content: attr(data-yol);
  font: 500 10px/1 var(--yazi-mono);
  letter-spacing: .08em;
  color: #7E786D;
  text-transform: uppercase;

  /* Dosya yolları boşluksuz uzun metindir; kırpılmazsa dar ekranda taşırır */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gorsel-yer.koyu {
  background: repeating-linear-gradient(135deg, #2B2F36 0 10px, #23272D 10px 20px);
}
.gorsel-yer.koyu::after { color: rgba(246, 243, 238, .45); }


/* --- 6. Yardımcılar ------------------------------------------------------- */

.satir { display: flex; align-items: center; gap: var(--bo-5); flex-wrap: wrap; }
.sutun { display: flex; flex-direction: column; gap: var(--bo-5); }

.sadece-masaustu { }
.sadece-mobil    { display: none !important; }

@media (max-width: 900px) {
  .sadece-masaustu { display: none !important; }
  .sadece-mobil    { display: revert !important; }
}

/* Yatay kaydırılan şeritler (proje galerisi, çip listeleri) */
.kaydir-x {
  display: flex;
  gap: var(--bo-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;   /* mandatory değil: serbest kaydırmayı kilitlemesin */
  scroll-behavior: smooth;         /* yumuşaklık CSS'te — hareket azaltma tercihine uyar */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--bo-3);
}
.kaydir-x > * { scroll-snap-align: start; flex: none; }

/* --- KURAL: yatay kayan alanlar fareyle de sürüklenir ----------------------
   Telefonda parmakla kaydırma zaten çalışır; bilgisayarda fare tekerleği
   yatay kaydırmadığı için içeriğin devamı olduğu fark edilmiyordu.
   'fare-surukle' sınıfını site.js takıyor (bkz. "12. KURAL"); buradaki iş
   sadece imleci değiştirip sürüklenebileceğini göstermek.
   Dokunmatikte imleç yok — bu blok yalnız fareli cihazlarda geçerli.      */
@media (hover: hover) and (pointer: fine) {
  .fare-surukle { cursor: grab; }
  .fare-surukle.suruklerken { cursor: grabbing; }

  /* Sürüklerken metin ya da görsel seçilip hareket bozulmasın */
  .fare-surukle.suruklerken,
  .fare-surukle.suruklerken * { user-select: none; }

  /* ⚠ Fotoğrafın kendi "sürükle-bırak" davranışı kapalı olmalı: açık kalırsa
     fare basılıp çekilince tarayıcı görseli taşımaya kalkıyor ve şerit hiç
     kaymıyor. JS de ayrıca dragstart'ı engelliyor — ikisi birlikte. */
  .fare-surukle img,
  .fare-surukle a,
  .fare-surukle picture { -webkit-user-drag: none; user-drag: none; }
}

/* Sürüklerken ve bırakınca kayarken yapışma kapalı: açık kalırsa şerit her
   kartta takılıp duruyor, hareket sert hissediliyor. Durunca geri geliyor
   ve son kart yumuşakça yerine oturuyor. */
.fare-surukle.kayiyor {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Hareket azaltma tercihini dinle */
@media (prefers-reduced-motion: reduce) {
  html, .kaydir-x, .hero-ray { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}