/* === override-no-avatar.css (v2) ===
   Avatar yan blok kaldırma + headline ortalama + küçük avatar kutusu (120x120)
   Bu dosyayı main.css'ten SONRA ekleyin.
*/

/* 1) Avatar bileşenini gizle (HTML'de silmeyi de öneririm) */
#avatar,
.avatar {
  display: none !important;
}

/* 2) Content alanı artık sol boşluk ayırmasın */
.content {
  padding-left: 0 !important; /* >=992px kırılımlarında main.css 330/360/480/500px boşluk bırakıyordu */
}

/* 4) İç blokların sağ-sol padding'ini simetrik hale getir */
.content__block {
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}
.content__block.grid-block {
  padding-left: clamp(8px, 3vw, 32px) !important;
  padding-right: clamp(8px, 3vw, 32px) !important;
}

/* 5) Genel sarmalayıcı: geniş ekranlarda okunabilir maksimum genişlik */
.content__wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0; /* padding'i block'lara verdik */
}

/* ===================== */
/* Headline ORTALAMA     */
/* ===================== */
.headline {
  /* HTML'de align-items-start var; bu kural onu bastırır */
  align-items: center !important;
  text-align: center;
  gap: 12px;
}
.headline__subtitle {
  margin-left: auto;
  margin-right: auto;
}
/* Butonları ortala; mobilde dikey, >=576px yatay akış zaten var */
.headline__btnholder {
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.headline__title {
  /* çok büyük ekranlarda satır aralarını dengeler */
  line-height: 1.05;
  margin-bottom: 8px;
}

/* ===================== */
/* Mini Avatar Image Box */
/* ===================== */
.intro-avatar {
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  overflow: hidden;
  margin: 4px 0 16px 0; /* "Hadi tanışalım!" altına oturur */
  box-shadow: 0 4px 24px rgba(255, 197, 251, 0.25);
  border: 1px solid rgba(255,255,255,.08);
}
.intro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 576px) {
  .intro-avatar {
    width: 96px;
    height: 96px;
  }
}

/* ===================== */
/* Galeri ve görseller   */
/* ===================== */
.gallery__image { width: 100%; height: auto; display: block; }
.my-gallery .gallery__item { padding: 12px; }
@media (min-width: 768px) { .my-gallery .gallery__item { padding: 14px; } }
@media (min-width: 992px) { .my-gallery .gallery__item { padding: 16px; } }



/* --Loop App Icon Animation--*/
.floating-images-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.floating-image {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  filter: drop-shadow(0 10px 30px rgba(212, 82, 224, 0.349));
  animation: floatMotion 8s ease-in-out infinite alternate;
  will-change: transform;
}


/* Farklı konum ve animasyon zamanlamaları */
.img1 { top: 10%; left: 10%; animation-delay: 0s; }
.img2 { top: 20%; right: 10%; animation-delay: 2s; }
.img3 { bottom: 20%; left: 15%; animation-delay: 1s; }
.img4 { bottom: 10%; right: 15%; animation-delay: 3s; }

/* Havadaymış gibi süzülen hareket */
@keyframes floatMotion {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  25% {
    transform: translate3d(10px, -15px, 5px);
  }
  50% {
    transform: translate3d(-10px, -5px, -10px);
  }
  75% {
    transform: translate3d(5px, 10px, 10px);
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}
/* Küçük ekranlar (mobil) için header düzeltmeleri */
@media (max-width: 768px) {
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    position: relative;
    z-index: 1000;
  }

  header nav {
    display: none; /* Menü mobilde gizlenir */
  }

  .mobile-nav-toggle {
    display: block !important; /* Mobil menü açma ikonu */
  }

  .logo {
    width: 48px;
    height: 48px;
    display: block;
    margin-bottom: 8px;
  }
}

/* Orta boyutlu tablet ekranlar için header düzeni */
@media (min-width: 769px) and (max-width: 1024px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
  }

  nav {
    display: flex;
    gap: 24px;
  }

  .logo {
    width: 56px;
    height: 56px;
    display: block;
  }

  .mobile-nav-toggle {
    display: none !important;
  }
}

/* Büyük ekranlarda (desktop) tam görünüm ve düzgün hizalama */
@media (min-width: 1025px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
    max-width: 1440px;
    margin: 0 auto;
  }

  nav {
    display: flex;
    gap: 32px;
  }

  .logo {
    width: 64px;
    height: 64px;
    display: block;
  }

  .mobile-nav-toggle {
    display: none !important;
  }
}
/* =============  PORTFOLYO SAYFASI ORTALAMA  ============= */

/* 1) Sol avatar boşluğunu iptal et: tüm içerik gerçek 100% genişlikte olsun */
.content {
  padding-left: 0 !important;
}

/* 2) Başlık bölümü: tamamen ortalı */
.headline {
  align-items: center !important;   /* grid/flex item’larını ortala */
  text-align: center;               /* metinler ortalı */
  gap: 12px;
}
.headline__subtitle {
  margin-left: auto;
  margin-right: auto;               /* rozet/etiket merkeze */
}
.headline__title {
  margin-left: auto;
  margin-right: auto;               /* çok satır başlık merkezde */
}
.headline__btnholder {
  justify-content: center !important;
  align-items: center !important;   /* buton grubu ortalı */
}

/* 3) Kategori (pill) navigasyonu: satır merkezde akış */
#categorized .categorized__navigation { justify-content: center; }
#categorized .categorized__list {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* 4) Bölüm içleri: varsayılan sol hizaları ez, metin ve blokları ortaya çek */
.section,
.section .section__content,
.content__block {
  text-align: center;
}
.content__block > * {
  margin-left: auto;
  margin-right: auto;               /* içteki bloklar (paragraf, görsel, grid) */
}

/* 5) Grid’ler (projeler vb.): satırı orta hizada tut, boşluklar simetrik kalsın */
.grid,
.row,
.cards,
.gallery,
.portfolio-grid {
  justify-content: center !important; /* flex grid’ler için */
}

/* 6) Küçük ekranlarda içerik yığılırken ortalama korunur */
@media (max-width: 767.98px) {
  .headline, .content__block, .section { text-align: center; }
  #categorized .categorized__list { padding-left: .5rem; padding-right: .5rem; }
}

/* 7) Güvenli: tema renklerini etkilemez; sadece hizalama/boşlukları düzenler */

/* === Works gallery görünmeme düzeltmesi === */
.gallery__link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--_radius-xl);
}

/* Tema, .gallery__image'i 0 opaklıkta bırakıyor; zorla görünür yap */
.gallery__image {
  opacity: 1 !important;
  display: block;          /* boş satır/tıklama alanı kalmasın */
  width: 100%;
  height: auto;
  border-radius: var(--_radius-xl);
}

/* İsteğe bağlı: hover'da hafif zoom (tema anim ayarlarını kullanır) */
.no-touch .gallery__link:hover .gallery__image {
  transform: scale(1.03);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
}
/* =========================================================
   OVERRIDE — ALIGNMENTS ONLY
   (Başlıklar ortalı, diğer tüm metinler sola dayalı)
   ========================================================= */

/* 0) Güvenli reset: önce geniş alanları solda topla */
.section,
.section .section__content,
.content__block,
.content__block > *,
.gallery__descr,
.about-descr,
.resume,
.resume-lines,
p, li {
  text-align: left !important;
}

/* 1) SADECE BAŞLIKLAR ORTALI */
h1, h2, h3, h4,
.headline__title,
.h2__title {
  text-align: center !important;
}

/* 2) About & Resume içindeki açıklama metinleri net olarak sola */
#about .section__content,
#about .content__block,
#about p,
#resume .resume-lines,
#resume .resume-lines p,
#resume p {
  text-align: left !important;
}
/* 4) Galeri açıklamaları ve kart içerikleri de solda kalsın */
.gallery__item .gallery__descr,
.gallery__item .gallery__descr * {
  text-align: left !important;
}

/* 5) Başlık altındaki küçük rozet/metinlerin merkezde kalmasını istersen yorum satırını aç:
.headline__subtitle { text-align: center !important; margin-left:auto; margin-right:auto; }
*/
/* === About description: sadece büyük ekranda genişlesin === */
@media (min-width: 1200px) { /* xl ve üstü */
  /* Sık kullanılan iki olası sarmalayıcıyı kapsıyoruz */
  #about .about-descr,
  #about .col-xl-8 {
    max-width: 100% !important;   /* kolon sınırını kaldır */
    flex: 0 0 100% !important;    /* satırın tamamını kapla */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Masaüstü ve üstü: sadece .h2__subtitle rozetlerini ortaya al */
@media (min-width: 1024px) {
  p.h2__subtitle.animate-in-up {
    display: flex !important;      /* inline-flex yerine blok seviyede */
    justify-content: center;        /* içeriği ortaya hizala */
    width: fit-content;             /* rozet kadar genişlik */
    margin-left: auto;              /* kendisini ortaya getir */
    margin-right: auto;
  }
}

/* === Proje Kartı (wireframe) ================================== */
.work-card{
  display:block;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color: transparent;
  background:none;
}
.work-card__media{
  position:relative;
  overflow:hidden;
  border-radius: var(--_radius-xl);
  background: var(--base);                 /* wireframe zemini */
}
.work-card__media img{
  display:block;
  width:100%;
  height: auto;
  aspect-ratio: 1 / 1;                        /* sabit, hoş bir oran */
  object-fit: cover;
  transition: transform var(--_animspeed-medium) var(--_animbezier);
}
.no-touch .work-card:hover .work-card__media img{
  transform: scale(1.03);
}

/* Kart içi etiketler (wireframe’deki 3 pill) */
.work-card__tags{
  position:absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.work-card__tags .rounded-tag{
  height:3.4rem;
  padding:0 1.4rem;
  border-radius: var(--_radius-s);
  border:1px solid var(--stroke-elements);
  background: var(--base);
  color: var(--t-medium);
  font:700 1.3rem/3.3rem var(--_font-default);
}

/* Alt metinler */
.work-card__meta{
  margin-top: 1.2rem;
  font: normal 600 1.4rem/1.2 var(--_font-default);
  color: var(--t-muted);
  text-align: left;
}
.work-card__title{
  margin: .4rem 0 0;
  font: normal 700 16px var(--_font-accent);
  color: var(--t-accent);
  text-align: left;
  
}

/* Grid aralıkları biraz nefes alsın */
#portfolio .row .col-12{ margin-bottom: 2.4rem; }