/* ============================================
   BASE — Tüm sayfanın temeli. Önce yüklenmeli.
   ============================================ */

/* Tüm elementlerin varsayılan margin/padding'ini sıfırlar, box-sizing'i standartlaştırır. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tema geçişinde (dark/light) renk/kenarlık/gölge yumuşak değişsin diye transition sadece
   var(--bg/--text/--border vb.) kullanan görünür yüzeylere uygulanıyor — * üzerine değil,
   performans için gereksiz genişletmeyi önlüyoruz. */
body,
.panels-wrapper,
.site-footer,
.hero-topbar,
.tab-btn,
.cv-btn,
.lang-btn,
.theme-toggle,
.info-card,
.app-card,
.article-card,
.tech-pill,
.tag,
.skill-bar,
.contact-form input,
.contact-form textarea,
.primary-btn {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.2s ease, box-shadow 0.35s ease;
}

/* ---- CSS Değişkenleri (Renk Paleti & Genel Ayarlar) ---- */
/* Renkleri tek yerden yönetmek için. Değiştirmek istediğinde buraya bak. */
:root {
  /* Arka plan renkleri — koyu kattan açık kata */
  --bg:        #0E0E11;   /* En koyu, ana sayfa zemini */
  --bg2:       #16161B;   /* Kartlar ve footer zemini */
  --bg3:       #1E1E26;   /* Panel ve tab zemini */

  /* Vurgu renkleri — mor/violet tema */
  --accent:    #6C63FF;          /* Ana mor — butonlar, linkler, aktif elementler */
  --accent2:   #A8A4FF;          /* Açık mor — ikincil vurgular, hover halleri */
  --accent-glow: rgba(108,99,255,0.18); /* Mor parlama efekti için şeffaf versiyon */

  /* Yazı renkleri */
  --text:      #F0EFF8;   /* Ana yazı rengi — açık krem beyaz */
  --muted:     #8B8AA0;   /* İkincil yazı — açıklama metinleri, etiketler */

  /* Kenarlık renkleri */
  --border:    rgba(108,99,255,0.18); /* Kartlar ve input'ların kenarlığı */
  --border2:   rgba(108,99,255,0.08); /* Daha soluk kenarlık — footer gibi yerlerde */

  /* Durum renkleri */
  --success:   #4ade80;   /* Yeşil — "Live" badge, başarı mesajları */
  --warning:   #fbbf24;   /* Sarı — "In Dev" badge */

  /* Boyut & Geçiş */
  --radius:    12px;        /* Küçük kartlar için köşe yuvarlama */
  --radius-lg: 20px;        /* Büyük kartlar için köşe yuvarlama */
  --transition: 0.22s ease; /* Hover animasyonlarının süresi */

  /* Kart gölgesi — koyu temada siyah gölge doğal durur */
  --card-shadow: rgba(0,0,0,0.5);
}
/* Light tema — body'de data-theme="light" olunca devreye girer */
[data-theme="light"] {
  --bg:        #F5F4FF;
  --bg2:       #EEEDF8;
  --bg3:       #E6E5F4;
  --accent:    #6C63FF;
  --accent2:   #4B44CC;
  --accent-glow: rgba(108,99,255,0.12);
  --text:      #0E0E11;
  --muted:     #5A5870;
  --border:    rgba(108,99,255,0.2);
  --border2:   rgba(108,99,255,0.1);
  --success:   #16a34a;
  --warning:   #d97706;

  /* Light modda koyu %50 siyah gölge, açık arka plan üstünde kare/dörtgen
     leke gibi görünüyordu — daha soft, mor tonlu bir gölgeye çeviriyoruz */
  --card-shadow: rgba(108,99,255,0.22);
}

/* Sayfa içi linklerde smooth scroll (# anchor'larına tıklayınca kayarak gider) */
html { scroll-behavior: smooth; }

/* Ana sayfa stili — arka plan, yazı tipi, taşma engeli */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  /* Yatay kaydırmayı engeller — taşan elementler için güvenlik */
  overflow-x: hidden;
}

/* Linklerin altı çizgisini kaldırır, rengi ebeveynden alır */
a { color: inherit; text-decoration: none; }

/* Kalın yazılar biraz daha parlak görünsün */
strong { font-weight: 600; color: var(--text); }

/* Butonlar tıklanabilir görünsün ve yazı tipini sayfadan alsın */
button { cursor: pointer; font-family: inherit; }

/* Genel amaçlı yardımcı class — vurgulu mor renk için */
.accent-text { color: var(--accent2); }