/* =============================================================
 * components.css — Tekrar kullanılabilir component stilleri
 * (navbar, footer, button, logo, sosyal ikon...)
 * Sayfaya özel stiller ileride bölümler halinde eklenir.
 * ============================================================= */

/* ---- Logo (tasarımdan gerçek PNG) ---- */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.logo__img {
  display: block;
  height: 23px;
  width: auto;
}
.footer .logo__img,
.fc .logo__img {
  height: 28px;
}
/* Metin logo (yedek — artık kullanılmıyor ama korunuyor) */
.logo__word {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--c-heading);
}
.logo--light .logo__word {
  color: var(--c-on-dark);
}
.logo__x {
  color: var(--c-primary);
}
.logo__tagline {
  font-size: var(--fs-caption);
  color: var(--c-on-dark-muted);
  font-weight: 400;
  margin-top: 4px;
}
.logo__tagline strong {
  color: var(--c-on-dark);
  font-weight: 700;
}

/* ---- Navbar ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
/* "Menü" component set (522:984): DEFAULT #161614 · HOVER #4E9FFF (Primary/200) + altında
   2×2px nokta gösterge · CLICKED/aktif #0074FF (Primary/600) + Bold 700.
   Nokta SABİT bir konumda kalır (::after, absolute); yalnızca METİN (.navbar__link-text) hover'da
   3px yukarı kayar — ikisi bağımsız katmanlar olduğu için nokta yer değiştirmez. */
.navbar__link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6px;
  font-size: var(--fs-button);
  font-weight: 500;
  color: var(--c-heading);
}
.navbar__link-text {
  display: inline-block;
  transition:
    transform var(--transition),
    color var(--transition);
}
.navbar__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--transition);
}
.navbar__link:hover .navbar__link-text {
  color: var(--c-primary-200);
  transform: translateY(-3px);
}
.navbar__link:hover {
  color: var(--c-primary-200);
}
.navbar__link:hover::after {
  opacity: 1;
}
.navbar__link.is-active {
  color: var(--c-primary);
}
.navbar__link.is-active .navbar__link-text {
  font-weight: 700;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.navbar__toggle span {
  width: 22px;
  height: 2px;
  background: var(--c-heading);
  border-radius: 2px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

@media (max-width: 860px) {
  .navbar__toggle {
    display: flex;
  }
  .navbar__nav {
    position: absolute;
    z-index: 100;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-2) var(--gutter);
    max-height: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: max-height var(--transition);
  }
  .navbar__nav.is-open {
    max-height: 400px;
  }
  .navbar__link {
    width: 100%;
    align-items: flex-start;
    padding: var(--sp-3) 0;
  }
  .navbar__link::after {
    display: none;
  }
}

/* ---- Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all var(--transition);
}

/* link: Button — Default(244:273): "Contact Us" + alt çizgi, ok GİZLİ (w~75px).
   Hover(244:272): flex gap:8px, ok BELİRİR ve akışa girer → alt çizgi UZAR (ok dahil). */
.btn--link {
  display: inline-flex;
  align-items: center;
  color: #000;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--c-secondary);
  align-self: flex-start;
  gap: 8px;
}
/* Ok: Inter 20px magenta. Default: gizli + genişlik 0 (çizgi kısa kalsın).
   Hover: görünür + genişlik açılır → çizgi uzar. */
.btn--link .btn__arrow {
  font-family: "Inter", var(--font-body);
  font-size: 20px;
  line-height: 1;
  color: var(--c-secondary);
  letter-spacing: -0.2px;
  display: inline-flex;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: -8px; /* gap'i de sıfırla → default tam metin genişliği */
  transition:
    max-width var(--transition),
    opacity var(--transition),
    margin-left var(--transition);
}
.btn--link:hover {
  color: #000;
}
.btn--link:hover .btn__arrow {
  max-width: 24px;
  opacity: 1;
  margin-left: 0;
}

/* solid: siyah dolu (Get in touch / Submit) */
.btn--solid {
  background: var(--c-heading);
  color: var(--c-on-dark);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  justify-content: center;
}
.btn--solid:hover {
  background: #000;
}

/* primary: mavi dolu */
.btn--primary {
  background: var(--c-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  justify-content: center;
}
.btn--primary:hover {
  filter: brightness(0.95);
}

/* outline */
.btn--outline {
  border: 1px solid var(--c-border);
  color: var(--c-heading);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}
.btn--outline:hover {
  border-color: var(--c-heading);
}

/* ---- Footer (541:1562 "FOOTER", frame 1280×792) SIFIRDAN pixel-perfect.
   Tasarım canvas'ı 1280px sabit ama GERÇEK sitede footer'ın koyu arka planı tam ekran genişliğinde
   yayılmalı (yalnızca İÇERİK 1280px kolonunda ortalı) — .footer tam genişlik, .footer__content
   1280px'lik iç wrapper (absolute-positioned çocukların referans kutusu). STRICT PX. ---- */
.footer {
  position: relative;
  width: 100%;
  height: 792px;
  background: var(--c-dark);
  color: var(--c-on-dark-muted);
  overflow: hidden;
}
/* İçerik kolonu: 1280px, ortalı — logo/link kolonlarının absolute referans kutusu */
.footer__content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
}
/* matrix noktalı desen — Tasarım canvas'ı 1280px sabit, görsel de bu kolonu 1:1 kaplayacak şekilde
   (1280×289, ölçeklenmeden) ORTALANMIŞ. 1280px'i aşan viewport'larda sol/sağ kalan eşit alan
   .footer'ın kendi düz --c-dark renginden görünür (tasarımda da görsel sağda bitiyor, tekrar/gerilme
   YOK); 1280px'den dar viewport'ta sol/sağ kenarları kırpılır. */
.footer__matrix {
  position: absolute;
  inset: 0 0 auto 0;
  height: 289px;
  overflow: hidden;
  background-image: url("/site/assets/img/brand/footer-matrix.png");
  background-size: 1280px 289px;
  background-position: top center;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Marka bloğu (logo x=886 y=192 173×41, tagline x=1059 y=264 sağa hizalı) */
/* logo (312:3838) y=192 h=41 -> bottom=233. Tagline (312:3861) y=242 -> gap=242-233=9px. */
.footer__brand {
  position: absolute;
  right: 221px;
  top: 192px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.footer__logo {
  display: block;
  width: 173px;
  height: 41px;
}
.footer__tagline {
  font-size: 26px;
  line-height: 44px;
  color: var(--c-on-dark-muted);
  font-family: "Inter", var(--font-body);
  letter-spacing: -0.8px;
}
.footer__tagline strong {
  color: var(--c-on-dark);
  font-weight: 500;
}
/* Link kolonları (4 sütun x=221/450/679/908, satır y=378/418/458/498, satır pitch 40px) */
.footer__links {
  position: absolute;
  left: 221px;
  top: 350px;
  display: grid;
  grid-template-columns: repeat(4, 229px);
}
/* Tasarımda satır pitch tam 40px (378→418→458→498) ama link line-height 44px — satırlar 4px
   üst üste biner (negatif margin), aksi halde 64px pitch oluşup 5. satır alt banda taşıyordu. */
.footer__col li {
  margin-bottom: -4px;
}
/* Son satır ile alt bandın border-top çizgisi arasında tasarımda görsel olarak belirgin bir boşluk
   var (metnin gerçek glyph yüksekliği 44px'lik satır kutusundan az olduğu için salt kutu matematiği
   yetersiz kalıyordu) — kullanıcı geri bildirimiyle son elemana ekstra pay eklendi. */
.footer__col li:last-child {
  margin-bottom: 20px;
}
.footer__col a {
  font-family: "Inter", var(--font-body);
  font-size: 16px;
  line-height: 44px;
  letter-spacing: -0.8px;
  color: var(--c-on-dark-muted);
  white-space: nowrap;
  transition: color var(--transition);
}
.footer__col a:hover {
  color: var(--c-on-dark);
}

/* Alt bant (bottom:0 h=205px, border-top #636363, sosyal ikonlar + copyright aynı satır) */
.footer__bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 205px;
  border-top: 1px solid #636363;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.footer__social {
  display: flex;
  gap: 9px;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #535353;
  color: var(--c-on-dark);
  transition: all var(--transition);
}
.footer__social a:hover {
  background: var(--c-on-dark);
  color: var(--c-dark);
}
.footer__copy {
  font-family: "Inter", var(--font-body);
  font-size: 18px;
  line-height: 44px;
  letter-spacing: -0.8px;
  color: var(--c-on-dark-muted);
}

/* ---- Footer CTA bandı ("CAREER" 363:513, "FOOTER WITH CAREER" varyantının üst bandı) ---- */
.footer-cta {
  background: #1f1f1f;
}
.footer-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}
.footer-cta__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: #cfcfcf;
}
.footer-cta__link.btn--link {
  color: #fff;
  align-self: center;
}
.footer-cta__link.btn--link:hover {
  color: #fff;
}

/* .footer__links masaüstünde sabit left:221px + 4×229px kolon = 1137px genişlik gerektiriyor.
   600-1150px arası viewport'larda bu, son kolonu (Career/Internship) viewport dışına taşırıp
   tıklanamaz yapıyordu. Kullanıcı isteği: bu aralıkta MOBİL (dikey) düzene geçmek yerine,
   masaüstü absolute yerleşimi KORUNSUN — X ekseni oranlı (%) küçülsün. Y ekseni (top, matrix'in
   altından sabit mesafe) değişmez. Kolonlar sabit %'lik dar genişlik yerine kalan TÜM alanı 4 eşit
   parçaya bölüp (1fr) aralarında gap bırakıyor — metinler artık birbirine girmiyor/taşmıyor. */
@media (max-width: 1150px) and (min-width: 600px) {
  .footer__brand {
    right: 17.2656%;
  }
  .footer__links {
    left: 17.2656%;
    right: 17.2656%;
    width: auto;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16px;
  }
}
/* 600px altı (gerçek telefon genişlikleri): mevcut dikey/mobil stack düzeni. */
@media (max-width: 600px) {
  .footer {
    height: auto;
    padding-bottom: 40px;
  }
  .footer__matrix {
    height: 180px;
  }
  .footer__brand {
    position: relative;
    right: auto;
    top: auto;
    align-items: flex-start;
    padding: 40px var(--gutter) 24px;
  }
  .footer__links {
    position: relative;
    left: auto;
    top: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 var(--gutter);
  }
  .footer__bottom {
    position: relative;
    height: auto;
    padding: 32px var(--gutter);
  }
  .footer-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 16px;
    gap: 12px;
  }
  /* .footer-cta__link.btn--link{align-self:center} masaüstü dikey-ortalama içindi (satırda
     yan yana). Sığmayıp alta düştüğünde ("Want..." metninin altına) de SOLA yaslı kalsın. */
  .footer-cta__link.btn--link {
    align-self: flex-start;
  }
}
@media (max-width: 480px) {
  .footer__links {
    grid-template-columns: 1fr;
  }
}

/* ---- Sosyal ikon ---- */
/* CSS mask ile uygulanır: gerçek renk background-color'dan (= currentColor) gelir, böylece
   .footer__social a:hover ile link rengi koyulaştığında ikon da otomatik koyulaşır — beyaz
   zemin üstünde beyaz ikon (görünmez ikon) sorunu bu şekilde çözülür. */
.social-icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.social-icon--instagram { mask-image: url('../img/brand/social-instagram.svg'); -webkit-mask-image: url('../img/brand/social-instagram.svg'); }
.social-icon--x         { mask-image: url('../img/brand/social-x.svg'); -webkit-mask-image: url('../img/brand/social-x.svg'); }
.social-icon--linkedin  { mask-image: url('../img/brand/social-linkedin.svg'); -webkit-mask-image: url('../img/brand/social-linkedin.svg'); }
.social-icon--github    { mask-image: url('../img/brand/social-github.svg'); -webkit-mask-image: url('../img/brand/social-github.svg'); }
.social-icon--youtube   { mask-image: url('../img/brand/social-youtube.svg'); -webkit-mask-image: url('../img/brand/social-youtube.svg'); }

/* ---- CTA bar (koyu şerit — Want to be part of our team?) ---- */
.cta-bar {
  background: #1f1f1f;
}
.cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 68px;
}
/* 363:514: Lora SemiBold 18px, line-height 44px (leading-[44px]) — line-height eksikti,
   bu yüzden flex align-items:center ile Button'a göre dikey kaymış görünüyordu. */
.cta-bar__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 44px;
  color: #cfcfcf;
}
/* Button (370:187): "Let's talk" ile AYNI .btn--link davranışı (ok gizli→hover'da belirir,
   çizgi uzar) — koyu zeminde metin rengi beyaz, hover'da da beyaz kalır (tasarımda renk değişmiyor,
   yalnızca ok görünür oluyor). Genel .btn--link'in align-self:flex-start'ı (dikey stack'ler için)
   burada YATAY flex container'da (.cta-bar__inner, align-items:center) Button'u üste yapıştırıyordu
   — text (363:514) ile aynı dikey merkeze gelmesi için flex-start override edildi. */
.cta-bar__link.btn--link {
  color: #fff;
  align-self: center;
}
.cta-bar__link.btn--link:hover {
  color: #fff;
}
@media (max-width: 560px) {
  .cta-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--sp-4);
    gap: var(--sp-2);
  }
}

/* ---- Team member kartı (Blogs & About) ---- */
.tm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
a.tm:hover {
  box-shadow: var(--shadow);
}
.tm__img {
  display: block;
  aspect-ratio: 265 / 161;
  background: var(--c-surface);
  overflow: hidden;
}
.tm__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tm__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--c-heading);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  line-height: 1.4;
}
.tm__name {
  font-size: var(--fs-body);
  color: var(--c-heading);
  padding: 0 var(--sp-2);
}
.tm__role {
  font-size: var(--fs-caption);
  color: var(--c-body);
  padding: 0 var(--sp-2) var(--sp-3);
}

/* ---- Boş durum (empty state) — admin panelde yayından kaldırılan/kapatılan içerik nedeniyle
   bir liste boş kaldığında gösterilir (career pozisyonları, ilişkili bloglar, vb.). Kurumsal
   sitenin sade metin diliyle: kutu/ikon yok, tek satır Manrope body metni, surface arka plan yok. */
.site-empty {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-body);
  padding: 28px 0;
  margin: 0;
}