/* 
   GLOBAL STYLES & DESIGN SYSTEM
   NOT: Renk paletini HSL ile tutmak karanlık mod geçişini çok kolaylaştırdı.
*/

/* Fontlarımızı Google'dan çekiyoruz */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  /* Aydınlık Tema Renkleri (Gündüz Modu) */
  --bg:           hsl(240, 30%, 98%);
  --bg-rgb:       245, 245, 250; /* Light mode RGB approximation of HSL(240, 30%, 98%) */
  --bg2:          hsl(240, 25%, 95%);
  --card:         hsla(0, 0%, 100%, 0.75);
  --border:       hsla(255, 100%, 20%, 0.08); /* Hafif morumsu sınırlar */
  --border2:      hsla(0, 0%, 0%, 0.06);
  --glass:        hsla(0, 0%, 100%, 0.55);
  --nav-bg:       hsla(240, 30%, 98%, 0.88);
  
  --purple:       hsl(255, 100%, 60%);
  --purple2:      hsl(255, 100%, 50%);
  --cyan:         hsl(195, 100%, 45%);
  --green:        hsl(150, 80%, 40%);
  --text:         hsl(240, 30%, 12%);
  --muted:        hsl(240, 15%, 45%);
  --muted2:       hsl(240, 10%, 65%);

  /* Efektler ve Gölgeler */
  --gradient-frame: linear-gradient(160deg, hsl(240, 20%, 90%) 0%, hsl(240, 20%, 95%) 100%);
  --glow-primary:   hsla(255, 100%, 65%, 0.15);
  --card-shadow:    0 25px 60px rgba(0, 0, 0, 0.05);

  /* 
     Etiketlerin (Tag) arka planlarını biraz daha saydam tutuyorum 
     ki yazıların okunabilirliği düşmesin. 
  */
  --tag-bg:       hsla(255, 100%, 60%, 0.06);
  --tag-border:   hsla(255, 100%, 60%, 0.2);

  /* Yazı Tiplerimiz */
  --font-main:    'Inter', sans-serif;
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-accent:  'Outfit', sans-serif;

  /* Genel Ölçüler */
  --radius:       16px;
  --radius-sm:    10px;
  --ease:         cubic-bezier(0.18, 0.89, 0.32, 1.28); /* Biraz zıplayan tatlı bir geçiş */
  --transition:   0.3s var(--ease);
}

/* Karanlık Tema Renkleri (Gece Modu - Favorim!) */
[data-theme="dark"] {
  --bg:           hsl(240, 30%, 3%);
  --bg-rgb:       6, 6, 12; /* Dark mode RGB approximation of HSL(240, 30%, 3%) */
  --bg2:          hsl(240, 25%, 6%);
  --card:         hsla(240, 20%, 10%, 0.65);
  --border:       hsla(255, 100%, 75%, 0.15);
  --border2:      hsla(0, 0%, 100%, 0.07);
  --glass:        hsla(240, 20%, 12%, 0.45);
  --nav-bg:       hsla(240, 30%, 3%, 0.9);
  
  --purple:       hsl(255, 100%, 67%);
  --purple2:      hsl(255, 100%, 78%);
  --cyan:         hsl(195, 100%, 55%);
  --green:        hsl(150, 100%, 65%);
  --text:         hsl(240, 15%, 96%);
  --muted:        hsl(240, 10%, 70%);
  --muted2:       hsl(240, 10%, 45%);

  --gradient-frame: linear-gradient(160deg, #12082b 0%, #030308 100%);
  --glow-primary:   hsla(255, 100%, 65%, 0.35);
  --card-shadow:    0 25px 65px rgba(0, 0, 0, 0.45);

  --tag-bg:       hsla(255, 100%, 65%, 0.09);
  --tag-border:   hsla(255, 100%, 65%, 0.35);
}

/* Temel Sıfırlama Kuralları */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* Kesin çözüm her zaman html ve body ile başlar */
}

body {
  font-family: var(--font-main);
  background: var(--bg);
  /* Çok hafif ve performans dostu grid dokusu */
  background-image: 
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 50px 50px;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative; /* Orb'ların taşmasını body içinde kısıtlamak için */
  width: 100%;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

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

/* Arka plandaki o mistik parlamalar */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1; /* İçeriğin arkasında kalmalı */
  filter: blur(130px);
  opacity: 0.35;
  will-change: transform;
}
.glow-orb.g1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, hsla(255, 100%, 65%, 0.3), transparent);
  top: -200px; left: -200px;
  animation: floatOrb 25s ease-in-out infinite alternate;
}
.glow-orb.g2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, hsla(195, 100%, 50%, 0.2), transparent);
  top: 40vh; right: -150px;
  animation: floatOrb 30s ease-in-out infinite alternate-reverse;
}
.glow-orb.g3 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, hsla(285, 100%, 60%, 0.25), transparent);
  bottom: 15vh; left: 15%;
  animation: floatOrb 20s ease-in-out infinite alternate;
}

@keyframes floatOrb {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(50px, 30px, 0) scale(1.1); }
  100% { transform: translate3d(-30px, 60px, 0) scale(0.9); }
}

/* Sayfa içeriğini merkezde toplamak için bu yardımcı sınıfı kullanıyoruz */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

/* Bölümler arası ince çizgi */
.divider {
  height: 1px;
  background: var(--border);
  margin: 0 60px;
}

/* Bölümlerin ortak yapısı: Geniş ekranlarda bozulmasın diye container içine alacağız */
.section {
  padding: 110px 0;
  position: relative;
}

.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.section-title .accent        { color: var(--purple2); }
.section-title .accent-cyan   { color: var(--cyan); }
.section-title .accent-green  { color: var(--green); }

.section-sub {
  font-size: 1rem;
  color: var(--muted);
  max-width: 700px;
  line-height: 1.7;
  margin-bottom: 45px;
  text-align: left; /* Genel olarak sola hizalı */
}

/* Sadece ortalanmış bölümler için özel kural */
.text-center.section-sub,
.contact-centered .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 
   NOT: Buton geçişlerinde cubic-bezier kullanımı sitenin premium hissini artırıyor. 
*/
.btn-primary {
  display: inline-block;
  padding: 13px 30px;
  background: var(--purple);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: none;
  transition: filter var(--transition), transform var(--transition);
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-3px) scale(1.03);
}

.btn-ghost {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  transition: all var(--transition);
}
.btn-ghost:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: hsla(255, 100%, 60%, 0.05);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Dil Değiştirici Buton Stili */
.lang-btn {
  background: var(--glass);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  margin-right: 8px;
}
.lang-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* Etiketler (Tags): Renk kodlaması burada */
.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--purple2);
}
.tag.cyan    { background: hsla(195, 100%, 50%, 0.09); border-color: hsla(195, 100%, 50%, 0.3); color: var(--cyan); }
.tag.blue    { background: hsla(220, 100%, 60%, 0.09); border-color: hsla(220, 100%, 60%, 0.3); color: #3b82f6; } /* Tailwind blue-500 */
.tag.purple  { background: hsla(270, 100%, 65%, 0.09); border-color: hsla(270, 100%, 65%, 0.3); color: hsla(270, 100%, 75%, 1); }
.tag.green   { background: hsla(150, 100%, 45%, 0.09); border-color: hsla(150, 100%, 45%, 0.3); color: var(--green); }
.tag.orange  { background: hsla(25, 100%, 55%, 0.09);  border-color: hsla(25, 100%, 55%, 0.3);  color: #f97316; }
.tag.pink    { background: hsla(330, 100%, 65%, 0.09); border-color: hsla(330, 100%, 65%, 0.3); color: #ec4899; }
.tag.gold    { background: hsla(45, 100%, 55%, 0.09);  border-color: hsla(45, 100%, 55%, 0.3);  color: #eab308; }
.tag.gray    { background: hsla(0, 0%, 50%, 0.08);     border-color: hsla(0, 0%, 50%, 0.2);     color: var(--muted); }

/* 
   TODO: Glassmorphism efektini çok fazla yerde kullanmamaya dikkat et, 
   düşük donanımlı cihazlarda performansı etkileyebilir. 
*/
.card {
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 35px;
  transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--purple);
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--card-shadow), 0 0 30px var(--glow-primary);
  background: var(--bg2);
}

/* Animasyon Sınıfları */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Mobil için Padding Ayarları */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .divider { margin: 0 15px; }
  .section-title { font-size: 1.8rem; text-align: left; }
  .card { padding: 20px; }
}