/*
  Miltasi — site-özel CSS.
  CKCSS'in kendi kuralına göre (ai.html, kural 9): mevcut ck- class'ları
  yeniden yazılmaz, sadece semantic --ck- token'lara referansla, framework'ün
  ifade etmediği görsel ihtiyaçlar (gradient, sayfa bölüm boşluğu, marka
  logosu) için ayrı bir dosyada özel CSS eklenir. Bu dosya /assets/ckcss.min.css
  dosyasından SONRA yüklenir.
*/

.site-section {
  padding-block: var(--ck-space-6);
}

.site-brand {
  font-weight: var(--ck-font-weight-bold);
  font-size: var(--ck-font-size-lg);
  color: var(--ck-color-text);
  text-decoration: none;
}

/* Hero: CKCSS'te gradient token'ı yok (bkz. IMPROVEMENT_NOTES.md) — tek
   seferlik özel gradient, temel rengi --ck-color-surface'e göre ayarlıyor
   ki data-ck-theme="dark" ile birlikte de makul görünsün. */
.site-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ck-color-primary) 12%, var(--ck-color-surface)) 0%,
    var(--ck-color-surface) 45%,
    color-mix(in srgb, var(--ck-color-info, var(--ck-color-primary)) 14%, var(--ck-color-surface)) 100%
  );
  padding-block: var(--ck-space-6);
}

.site-hero__card {
  background: color-mix(in srgb, var(--ck-color-surface) 70%, transparent);
  backdrop-filter: blur(2px);
}

.site-cta {
  background: var(--ck-color-primary);
  color: var(--ck-color-on-primary);
}

.site-cta h2,
.site-cta p {
  color: var(--ck-color-on-primary);
}

/* Mobil menü paneli: ck-only-mobile sadece görünürlüğü yönetiyor, panel
   görünümü framework'te tanımlı değil. */
details > nav {
  padding-block-start: var(--ck-space-4);
  border-block-start: 1px solid var(--ck-color-border);
  margin-block-start: var(--ck-space-2);
}