Modern CSS: Container Queries, :has() ve CSS Layers

/* Kapsayıcıyı tanımla */
.kart-kapsayici {
  container-type: inline-size;
  container-name: kart;
}
 
/* Kapsayıcı genişliğine göre stil */
@container kart (min-width: 400px) {
  .kart {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
  }
 
  .kart__resim {
    aspect-ratio: 1;
  }
}
 
@container kart (min-width: 600px) {
  .kart__baslik {
    font-size: 1.5rem;
  }
 
  .kart__akciyonlar {
    display: flex;
    gap: 0.5rem;
  }
}
 
/* Sidebar'da küçük, ana içerikte büyük görünür — aynı bileşen */

/* Katman sırası en başta tanımla — önem azdan çoğa */
@layer varsayilan, temel, bilesen, yardimci;
 
@layer varsayilan {
  /* Reset ve tarayıcı varsayılanları */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
}
 
@layer temel {
  /* Proje geneli temel stiller */
  :root {
    --renk-birincil: #0ea5e9;
    --yazi-ailesi: 'Inter', system-ui, sans-serif;
  }
 
  body {
    font-family: var(--yazi-ailesi);
    line-height: 1.6;
  }
}
 
@layer bilesen {
  /* Bileşen stilleri */
  .buton {
    background: var(--renk-birincil);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  }
}
 
@layer yardimci {
  /* Yardımcı sınıflar — en yüksek öncelik */
  .gizle { display: none !important; }
  .blok  { display: block !important; }
}
 
/* @layer dışındaki stiller tüm katmanlardan önce gelir */

/* Resim içeren kartlar farklı görünsün */
.kart:has(img) {
  padding: 0;
  overflow: hidden;
}
 
.kart:has(img) .kart__icerik {
  padding: 1rem;
}
 
/* Hatalı input olan form farklı görünsün */
.form:has(input:invalid) .gonder-buton {
  opacity: 0.5;
  pointer-events: none;
}
 
/* Açık dropdown'ı içeren navigasyon */
nav:has(.dropdown[open]) {
  background: rgba(0, 0, 0, 0.05);
}
 
/* Seçili checkbox olan liste öğesi */
li:has(input[type="checkbox"]:checked) {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Artık Sass/Less gerekmeden nesting yapılabilir */
.kart {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  transition: box-shadow 200ms ease;
 
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
 
  & .kart__baslik {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
 
  & .kart__metin {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
  }
 
  &--vurgulandi {
    border-color: #0ea5e9;
    background: #f0f9ff;
  }
 
  /* Media query nesting */
  @media (max-width: 640px) {
    padding: 1rem;
  }
}

/* RTL (Arapça, Farsça) dil desteği için mantıksal özellikler */
 
/* Fiziksel (eski) */
.kutu {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 0.5rem;
  border-left: 2px solid blue;
}
 
/* Mantıksal (modern) — RTL/LTR otomatik ayarlanır */
.kutu {
  margin-inline: 1rem;     /* left + right */
  padding-block-start: 0.5rem;  /* top */
  border-inline-start: 2px solid blue;  /* LTR: left, RTL: right */
}
 
/* Tam tablo */
/* margin-block  = margin-top + margin-bottom */
/* margin-inline = margin-left + margin-right */
/* inset-inline-start = left (LTR) / right (RTL) */
/* block-size = height */
/* inline-size = width */

/* Yatay kaydırmalı galeri */
.galeri {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar gizle (estetik) */
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}
 
.galeri__ogesi {
  flex: 0 0 300px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: 0.75rem;
  overflow: hidden;
}
 
/* Dikey sayfa geçişi */
.bolumler {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
 
.bolum {
  height: 100vh;
  scroll-snap-align: start;
}

:root {
  /* oklch — daha düzgün renk geçişleri, geniş gamut */
  --birincil:        oklch(60% 0.2 250);    /* Mavi */
  --birincil-acik:   oklch(75% 0.15 250);
  --birincil-koyu:   oklch(45% 0.25 250);
 
  /* p3 renk uzayı — HDR ekranlar */
  --vurgu: color(display-p3 0 0.8 0.5);
}
 
/* Renk geçişi — oklch ile düzgün renk geçişi */
.gradient-baslik {
  background: linear-gradient(
    135deg,
    oklch(65% 0.25 260),
    oklch(65% 0.25 330)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Sayfa geçişleri — JavaScript gerekir */
/* CSS */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}
 
::view-transition-old(root) {
  animation: slide-out 300ms ease-in both;
}
 
::view-transition-new(root) {
  animation: slide-in 300ms ease-out both;
}
 
@keyframes slide-out {
  to { transform: translateX(-100%); opacity: 0; }
}
 
@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
}

// JavaScript — View Transition tetikle
async function sayfaGec(yeniUrl) {
  if (!document.startViewTransition) {
    window.location.href = yeniUrl;
    return;
  }
 
  document.startViewTransition(() => {
    window.location.href = yeniUrl;
  });
}