// Framework bağımlılığı olmadan modern web development
class TodoApp extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <div class="todo-container">
        <input type="text" popover="auto" id="task-input" />
        <button popovertarget="task-input">Add Task</button>
      </div>
    `
  }
}

customElements.define('todo-app', TodoApp)

<!-- Sıfır JavaScript ile çalışan popover -->
<button popovertarget="user-menu">Profil</button>

<div id="user-menu" popover>
  <ul>
    <li><a href="/profile">Profili Görüntüle</a></li>
    <li><a href="/settings">Ayarlar</a></li>
    <li><a href="/logout">Çıkış Yap</a></li>
  </ul>
</div>

<style>
  [popover] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 1rem;
  }

  [popover]::backdrop {
    background: rgba(0,0,0,0.3);
  }
</style>

<dialog id="confirmation-dialog">
  <form method="dialog">
    <h2>Emin misiniz?</h2>
    <p>Bu işlem geri alınamaz.</p>
    <menu>
      <button value="cancel">İptal</button>
      <button value="confirm" autofocus>Onayla</button>
    </menu>
  </form>
</dialog>

<script>
  const dialog = document.querySelector('#confirmation-dialog')

  // Modal olarak aç (backdrop ile)
  document.querySelector('#delete-btn').addEventListener('click', () => {
    dialog.showModal()
  })

  dialog.addEventListener('close', () => {
    console.log('Seçim:', dialog.returnValue)
  })
</script>

<details>
  <summary>Sık Sorulan Sorular</summary>
  <div class="faq-content">
    <p>Bu içerik varsayılan olarak gizli, toggle yapılabilir.</p>
  </div>
</details>

<style>
  details summary {
    cursor: pointer;
    user-select: none;
    list-style: none; /* Ok işaretini kaldır */
  }

  details summary::before {
    content: '▶';
    display: inline-block;
    transition: transform 0.3s;
  }

  details[open] summary::before {
    transform: rotate(90deg);
  }
</style>

@property --theme-color {
  syntax: '<color>';
  initial-value: #3b82f6;
  inherits: true;
}

@property --spacing-unit {
  syntax: '<length>';
  initial-value: 8px;
  inherits: false;
}

.button {
  background: var(--theme-color);
  padding: calc(var(--spacing-unit) * 2);

  /* Geçersiz değer yazarsanız, initial-value kullanılır */
  --theme-color: "invalid"; /* #3b82f6 kullanılır */
}

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), #ff0080, #7928ca);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  to { --gradient-angle: 360deg; }
}

h1 {
  text-wrap: balance;
  max-width: 30ch; /* Character-based width */
}

p {
  text-wrap: pretty; /* Orphan'ları önler */
}

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 1rem;
}

/* Parent 500px'den küçükse tek column */
@container card (max-width: 500px) {
  .card {
    grid-template-columns: 1fr;
  }
}

/* Parent 500px'den büyükse iki column */
@container card (min-width: 500px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }

  .card img {
    aspect-ratio: 16/9;
  }
}

/* İçinde img olan card'ları stil */
.card:has(img) {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
}

/* İçinde error class'ı olan form'u işaretle */
form:has(.error) {
  border: 2px solid red;
}

/* Sadece checkbox işaretliyse label'ı stil */
input[type="checkbox"]:checked + label {
  font-weight: bold;
}

/* Tüm siblings'leri seç */
li:has(+ li:hover) {
  opacity: 0.5;
}

/* Layer tanımlaması */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    /* Layer order nedeniyle bu stil öncelikli */
  }
}

@layer utilities {
  .text-center { text-align: center; }
  /* Utilities en son layer, her zaman öncelikli */
}

.card {
  /* Dark mode ise farklı padding */
  padding: if(
    style(color-scheme: dark),
    2rem,
    1rem
  );

  /* Container genişliğine göre font-size */
  font-size: if(
    container-width > 600px,
    1.25rem,
    1rem
  );
}

const users = [
  { name: 'Ahmet', role: 'developer' },
  { name: 'Ayşe', role: 'designer' },
  { name: 'Mehmet', role: 'developer' },
]

// Eski yöntem
const grouped = users.reduce((acc, user) => {
  (acc[user.role] = acc[user.role] || []).push(user)
  return acc
}, {})

// ES2024 yöntemi
const groupedByRole = Object.groupBy(users, user => user.role)
/*
{
  developer: [{ name: 'Ahmet', ... }, { name: 'Mehmet', ... }],
  designer: [{ name: 'Ayşe', ... }]
}
*/

// Eski yöntem - verbose
let resolve, reject
const promise = new Promise((res, rej) => {
  resolve = res
  reject = rej
})

// ES2024 - clean
const { promise, resolve, reject } = Promise.withResolvers()

// Kullanım örneği
class DataFetcher {
  #pendingRequest = null

  async fetch(url) {
    if (this.#pendingRequest) {
      return this.#pendingRequest.promise
    }

    this.#pendingRequest = Promise.withResolvers()

    try {
      const data = await fetch(url).then(r => r.json())
      this.#pendingRequest.resolve(data)
      return data
    } catch (error) {
      this.#pendingRequest.reject(error)
      throw error
    } finally {
      this.#pendingRequest = null
    }
  }
}

const numbers = [3, 1, 4, 1, 5, 9]

// Mutable (orijinal array değişir)
numbers.sort() // [1, 1, 3, 4, 5, 9]

// Immutable (yeni array döner)
const sorted = numbers.toSorted() // [1, 1, 3, 4, 5, 9]
console.log(numbers) // [3, 1, 4, 1, 5, 9] - değişmedi!

// Diğer immutable methodlar
const reversed = numbers.toReversed()
const spliced = numbers.toSpliced(2, 1, 99)

:root {
  /* Viewport-based fluid sizing */
  --fluid-min-width: 320;
  --fluid-max-width: 1440;

  --fluid-typography: clamp(
    1rem,
    0.8rem + 0.5vw,
    1.25rem
  );

  --fluid-spacing: clamp(
    1rem,
    0.5rem + 2vw,
    3rem
  );
}

body {
  font-size: var(--fluid-typography);
  padding: var(--fluid-spacing);
}

.responsive-grid {
  display: grid;
  /* Auto-fit: boşluk varsa sığdır, yoksa wrap yap */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.card {
  /* İçeriğe göre genişlik, max 600px */
  width: min(100%, 600px);

  /* Aspect ratio koru */
  aspect-ratio: 16/9;

  /* Modern centered layout */
  margin-inline: auto;
}

.long-article section {
  content-visibility: auto;
  /* Viewport dışındaki içeriği render'lama */
  contain-intrinsic-size: 0 500px; /* Placeholder size */
}

.widget {
  contain: layout style paint;
  /* Browser'a "bu element izole" de */
}

<img
  src="hero.jpg"
  loading="lazy"
  decoding="async"
  fetchpriority="low"
/>

<!-- ❌ Kötü -->
<div class="button" onclick="submit()">Gönder</div>

<!-- ✅ İyi -->
<button type="submit">Gönder</button>

<!-- ❌ Kötü -->
<div class="card">
  <div class="title">Başlık</div>
  <div class="content">İçerik</div>
</div>

<!-- ✅ İyi -->
<article class="card">
  <h2>Başlık</h2>
  <p>İçerik</p>
</article>

<nav aria-label="Ana navigasyon">
  <ul role="list">
    <li><a href="/" aria-current="page">Ana Sayfa</a></li>
    <li><a href="/about">Hakkında</a></li>
  </ul>
</nav>

<div role="status" aria-live="polite" aria-atomic="true">
  Form başarıyla gönderildi!
</div>

/* Keyboard navigation için görünür focus */
:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* Mouse click için outline kaldır */
:focus:not(:focus-visible) {
  outline: none;
}

// Feature detection
if ('popover' in HTMLElement.prototype) {
  // Popover API kullan
} else {
  // Fallback to JavaScript modal
}

// CSS
@supports (container-type: inline-size) {
  .component {
    /* Container query kullan */
  }
}

@supports not (container-type: inline-size) {
  .component {
    /* Media query fallback */
  }
}

/* Mobile first (default) */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

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