/* ==========================================================================
   CSS SIFIRLA
MA (RESET)
   ==========================================================================
   Tüm HTML elementlerinin varsayılan marj (boşluk) ve dolgu (padding) değerlerini sıfırlar.
   box-sizing: border-box, genişlik ve yükseklik hesaplamalarında kenarlık (border) ve dolguyu (padding)
   dahil eder. Bu sayede elemanlar beklenmedik şekilde genişmez ve tasarım daha tutarlı olur.
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   CSS DEĞİŞKENLERİ (CUSTOM PROPERTIES)
   ==========================================================================
   Renkleri, yazı tiplerini ve yaygın değerleri tek bir yerde toplar.
   Avantaj: Bir rengi değiştirmek istediğinizde, tüm dosyada arama yapmak yerine
   sadece buradaki değeri değiştirirsiniz. Kod daha temiz ve sürdürülebilir olur.
*/
:root {
  --bg-color: #221c1a;          /* Sayfa arka plan rengi (koyu kahverengi/siyah) */
  --text-color: #e2e8f0;        /* Ana yazı rengi (açık gri/mavi) */
  --primary-color: #a66bff;     /* Birincil renk (mor - başlıklar için) */
  --secondary-color: #c4b5fd;   /* İkincil renk (hafif mor - alt başlıklar için) */
  --accent-color: #ff6b6b;      /* Vurgu rengi (kırmızı/sarı - uyarılar için) */
  --navbar-bg: #37065d;         /* Navigasyon çubuğu arka plan rengi (koyu mor) */
  --card-bg: rgba(147, 51, 234, 0.1); /* Kart arka plan rengi (şeffaf mor) */
  --muted-text: #94a3b8;        /* Soluk yazı rengi (alt bilgiler için) */
  --border-radius: 10px;        /* Köşe yuvarlama (daha yuvarlak) */
  --max-width: 1500px;
}

/* ==========================================================================
   GÖVDE (BODY) STİLLERİ
   ==========================================================================
   Tüm sayfanın temel görünümünü belirler.
   Taban yazı boyutu büyütüldü (16px -> 18px) ve satır arası artırıldı.
*/
body {
  background-color: var(--bg-color);
  font-family: 'Geist', sans-serif;
  color: var(--text-color);
  font-size: 18px;               /* Taban yazı boyutu büyütüldü */
  line-height: 1.8;              /* Satır arası boşluk daha geniş */
}

/* ==========================================================================
   NAVBAR (GEZİNME ÇUBUĞU)
   ==========================================================================
   Sayfanın üstünde bulunan gezinme menüsü. Daha yüksek ve daha boşluklu.
*/
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--navbar-bg);
  padding: 1.5rem 2.5rem;        /* Daha büyük padding */
  max-height: 95px;             /* Daha yüksek navbar */
}

/* Logo alanı */
.logo {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

/* Logo görseli: Daha büyük boyut */
.logo img {
  max-height: 140px;              /* Logo boyutu büyütüldü */
  width: auto;
  display: block;
}

/* Navigasyon bağlantıları grubu. */
.nav-links {
  display: flex;
  gap: 2rem;                     /* Bağlantılar arası daha fazla boşluk */
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;              /* Daha kalın yazı */
  font-size: 1.1rem;             /* Daha büyük yazı boyutu */
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--primary-color);
}

/* ==========================================================================
   ANA İÇERİK VE ALT BİLGİ (MAIN & FOOTER)
   ==========================================================================
   Daha geniş padding ve ortalama.
*/
main,
footer {
  width: auto;
  padding: 3rem 4rem;            /* Daha büyük kenar boşlukları */
  max-width: var(--max-width);
  margin: 0 auto;
}

footer {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   BÖLÜMLER (SECTION)
   ==========================================================================
   Her içerik bölümü arası daha fazla boşluk.
*/
section {
  margin-bottom: 4rem;           /* Bölümler arası daha büyük boşluk */
  max-width: 72ch;               /* Okunabilir satır uzunluğu korundu */
  padding: 0 1rem;
}

section h1,
section h2,
section h3 {
  margin-bottom: 1rem;           /* Başlık ile metin arası daha fazla boşluk */
}

/* Başlık boyutları büyütüldü */
h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);   /* Büyük ana başlık */
  color: var(--primary-color);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);     /* Büyük alt başlık */
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);   /* Büyük üçüncü seviye başlık */
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

h4,
h5,
h6 {
  color: var(--secondary-color);
}

section p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Paragraf ve liste boyutu büyütüldü */
p,
li {
  font-size: clamp(1.125rem, calc(1rem + 0.25vw), 1.5rem);
  color: var(--text-color);
}

.whoami-section {
  display: grid;
  grid-template-columns: 1fr 2fr; /* yazı | imaj (imaj daha geniş, yazısı daha okunur) */
  align-items: center;
  gap: 12rem;

  max-width: none;
  width: 100%;
  padding: 0;
}

.whoami-text h1 {
  line-height: 1.1;
  margin-bottom: 1.5rem;
  white-space: nowrap;
}

.whoami-text {
  min-width: 0;
}

.whoami-text p {
  font-size: 17px;
}

.whoami-img {
  width: 100%;
  height: auto;
  display: block;
  justify-self: end;        /* görsel sağa yaslanır */
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.destination-section {
  display: grid;
  grid-template-columns: 0.8fr 1fr; /* imaj | metin, eş bölüşüm, ekranı kaplamaz */
  align-items: center;
  gap: 3rem;
  margin-left: 0;

  max-width: none;
  width: 100%;
  padding: 0;
  text-align: right;
}

.destination-img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#contact-info {
  color: var(--muted-text);
}

/* ==========================================================================
   KART (CARD) BİÇEMLİĞİ
   ==========================================================================
   Uyarı/not kutusu daha belirgin ve daha geniş.
*/
.card {
  background-color: var(--card-bg);
  border-left: 6px solid #a855f7;   /* Daha kalın sol çizgi */
  border-radius: var(--border-radius);
  padding: 1.5rem 2rem;             /* Daha geniş iç boşluk */
  margin-top: 1.5rem;
  color: var(--accent-color);
}

.card .badge {
  display: inline-block;
  color: var(--accent-color);
  font-size: 0.85rem;
  font-weight: bold;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   TEKNOLOJİLER BÖLÜMÜ (TECHS)
   ==========================================================================
   Eski boyutlara geri alındı (istisna: h1 başlıkları büyük kalıyor).
*/
.techs {
  max-width: var(--max-width);
  margin: 2rem auto;                 /* Eski üst-alt boşluğu */
  padding: 0;
  text-align: center;
  border-radius: var(--border-radius);
}

.techs h2 {
  margin-bottom: 1.5rem;             /* Eski kategori başlık boşluğu */
}

/* Grid düzeni: Eski sütun genişliği */
.techs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;                       /* Eski hücre arası boşluk */
}

/* Teknoloji kategorileri: Eski kart boyutu */
.techs-category {
  background-color: var(--card-bg);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  align-content: start;
  border-radius: var(--border-radius);
}

/* Kategori başlığı (font-size kaldırıldı, eski boyutta kalıyor) */
.techs-category h3 {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
  text-align: center;
}

/* Teknoloji öğesi: İkon ve isim çifti eski boyutta */
.techs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(196, 181, 253, 0.15);
  border-radius: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.techs-item img {
  width: 48px;                       /* Eski ikon boyutu */
  height: 48px;
  object-fit: contain;
}

.techs-item span {
  font-size: 0.95rem;                /* Eski yazı boyutu */
  font-weight: 700;
  color: var(--secondary-color);
}

.techs-item:hover {
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

/* ==========================================================================
   SAĞA / SOLA YASLAMA (CLASS TABANLI)
   ==========================================================================
   Bölümlerin sola veya sağa yaslanmasını sağlar.
*/
.align-left {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
  max-width: 60ch;
  min-width: 60ch;
}

.align-right {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
  max-width: 60ch;
  min-width: 60ch;
}

.terminal {
  background-color: #1c1822; /* site arkaplanına yakın, hafif morumsu koyu siyah */
  color: var(--text-color);
  font-family: 'Geist Mono', monospace;
  font-size: 15px;
  line-height: 1.6;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: var(--border-radius);
  border: 0.3px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9); /* grimsi siyah gölge */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Terminal pencere çubuğu */
.terminal-header {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  background-color: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--muted-text);
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
}

.terminal-title {
  font-weight: 500;
  letter-spacing: 0.2px;
}

.terminal-body {
  padding: 1.5rem 1.25rem;
}

.prompt {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cursor {
  width: 8px;
  height: 14px;
  background-color: var(--primary-color);
  display: inline-block;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.contact-line {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.85rem;
}

.label {
  color: var(--muted-text);
  min-width: 95px;
  margin-right: 1.25rem;
  font-size: 14px;
}

.contact-link {
  color: var(--secondary-color);
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
  opacity: 0.9;
}

.contact-value {
  color: var(--secondary-color);
  font-size: 14px;
}

/* ==========================================================================
   ERİŞEBİLİRLİK (ACCESSIBILITY)
   ==========================================================================
   Klavyenle gezinme yapan kullanıcılar için odaklanma stilleri.
*/
a:focus {
  outline: 3px solid var(--primary-color);
  outline-offset: 4px;
}


/* ==========================================================================
   MOBİL RESPONSIVE (YENİ)
   ==========================================================================
   Aşağıdaki media query'ler yalnızca dar ekranlarda devreye girer.
   Masaüstü stilleri aynen korunur; mobilde sorun çıkaran sabit
   genişlikler (min-width), büyük boşluklar (gap/margin/padding)
   burada geçersiz kılınır.

   Kırılım noktaları:
   - 1024px ve altı : Tablet / küçük laptop
   - 768px ve altı  : Mobil (dikey)
   - 480px ve altı  : Küçük mobil
*/

/* --------------------------------------------------------------------------
   TABLET: 1024px ve altı
   --------------------------------------------------------------------------
   whoami ve destination bölümlerindeki çok büyük gap ve margin'ler küçültülür,
   görsellerdeki sabit min-width değerleri yumuşatılır.
*/
@media (max-width: 1024px) {
  main,
  footer {
    padding: 3rem 2rem;              /* Kenar boşlukları daraltıldı */
  }

  .whoami-section {
    gap: 4rem;                       /* 10rem -> 4rem */
  }

  .whoami-text {
    margin-right: 4rem;              /* 15rem -> 4rem */
  }

  .whoami-img {
    min-width: 0;
    max-width: none;
  }

  .destination-section {
    gap: 2.5rem;
  }

  .destination-img {
    min-width: 0;
    max-width: none;
  }

  .navbar {
    padding: 1.25rem 1.5rem;
  }

  .logo img {
    max-height: 100px;               /* 140px -> 100px */
  }
}

/* --------------------------------------------------------------------------
   MOBİL: 768px ve altı
   --------------------------------------------------------------------------
   Temel kırılım noktası. İki sütunlu tüm düzenler tek sütuna düşer,
   sabit genişlikler kaldırılır, yazılar ortalanır.
*/
@media (max-width: 768px) {
  /* ---- Navbar: dikey ortalı düzen ---- */
  .navbar {
    flex-direction: column;          /* Logo üstte, linkler altta */
    gap: 1rem;
    padding: 1rem 1rem 1.25rem;
    max-height: none;                /* Sabit yükseklik kalkar, içerik sarar */
  }

  .logo {
    margin-top: 0;                   /* Masaüstündeki 20px boşluk gerekmiyor */
  }

  .logo img {
    max-height: 70px;                /* Mobilde kompakt logo */
  }

  .nav-links {
    gap: 1.25rem;                    /* 2rem -> 1.25rem, dar ekranda sığar */
    flex-wrap: wrap;                 /* Gerekirse alt satıra geçer */
    justify-content: center;
  }

  .nav-links a {
    font-size: 1rem;
  }

  /* ---- Ana içerik: daralan padding ---- */
  main {
    padding: 2rem 1.25rem;
  }

  /* ---- Section genel ---- */
  section {
    margin-bottom: 3rem;
    padding: 0 0.25rem;
    max-width: 100%;                 /* 72ch sınırı mobilde kalkar */
  }

  section p {
    margin-bottom: 1.25rem;
  }

  /* ---- Who Am I bölümü: tek sütun, görsel yazının altında ---- */
  .whoami-section {
    display: flex;                   /* Grid yerine flex ile dikey akış */
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .whoami-text {
    margin-right: 0;                 /* Masaüstündeki 15rem boşluk tamamen kalkar */
    text-align: left;
    width: 100%;
  }

  .whoami-img {
    min-width: 0;
    width: 100%;
    max-width: none;
    justify-self: center;
  }

  /* ---- Destination bölümü: görsel üstte, metin altta ---- */
  .destination-section {
    display: flex;
    flex-direction: column-reverse;  /* Görsel üstte kalsın (HTML sırası: görsel, metin) */
    gap: 2rem;
    text-align: left;                /* Sağa hizalı metin mobilde okunması zor, sola alındı */
    min-width: 0;                    /* 60ch sabit genişlik kalkar */
    width: 100%;
  }

  .destination-img {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  /* ---- align-left / align-right: mobilde normale döner ---- */
  /* Dar ekranda 60ch minimum genişlik taşmaya yol açtığı için iptal edilir. */
  .align-left,
  .align-right {
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;                /* İkisi de mobilde sola hizalı */
  }

  /* ---- Kart ---- */
  .card {
    padding: 1.25rem 1.25rem;        /* 1.5rem 2rem -> daha kompakt */
  }

  /* ---- Teknolojiler bölümü ---- */
  .techs {
    margin: 2rem 1.25rem;            /* Kenarlardan içeride dursun */
    width: auto;
  }

  .techs-grid {
    grid-template-columns: 1fr;      /* Kategoriler alt alta */
    gap: 1rem;
  }

  .techs-category {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Hücreler daha sık */
    padding: 1.25rem;
  }

  .techs-item {
    padding: 0.75rem 0.5rem;
  }

  .techs-item img {
    width: 40px;                     /* 48px -> 40px */
    height: 40px;
  }

  .techs-item span {
    font-size: 0.85rem;
  }

  /* ---- Footer / Terminal ---- */
  footer {
    padding: 0 1rem 1.5rem;          /* Terminal etrafında hafif boşluk */
  }

  .terminal {
    border-radius: var(--border-radius);
  }

  .terminal-body {
    padding: 1.25rem 1rem;
  }

  /* Uzun e-posta/Discord adreslerinin satırı taşırmaması için */
  .contact-link,
  .contact-value {
    word-break: break-all;
  }

  .contact-line {
    flex-wrap: wrap;                 /* Gerekirse alt satıra geçer */
  }
}

/* --------------------------------------------------------------------------
   KÜÇÜK MOBİL: 480px ve altı
   --------------------------------------------------------------------------
   Son rötuşlar: yazı boyutları ve boşluklar biraz daha daraltılır.
*/
@media (max-width: 480px) {
  body {
    font-size: 16px;                 /* 18px -> 16px, dar ekranda daha dengeli */
  }

  main {
    padding: 1.5rem 1rem;
  }

  section {
    margin-bottom: 2.5rem;
  }

  .whoami-section {
    gap: 1.5rem;
  }

  .terminal-body {
    padding: 1rem 0.875rem;
  }

  .label {
    min-width: 80px;                 /* 95px -> 80px */
    margin-right: 0.75rem;
  }

  .techs {
    margin: 1.5rem 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   ÇOK GENİŞ EKRAN: 2000px ve üzeri (opsiyonel)
   --------------------------------------------------------------------------
   4K monitörlerde içeriğin aşırı yayılmasını engellemek için.
*/
@media (min-width: 2000px) {
  main {
    max-width: 1700px;
  }

  .techs {
    max-width: 1700px;
  }
}