/* ===================================================================
   AREMAS — İYİLEŞTİRME KATMANI
   Mevcut sayfa stillerinin ÜZERİNE yüklenir; hiçbirini silmez.
   Amaç: mobil uyum, akışkan tipografi, dinamik hareket, erişilebilirlik.
   =================================================================== */

/* ---------- 1. TAŞMA KONTROLÜ ------------------------------------ */
html { overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: clip; }

/* grid/flex çocukları min-content'e kilitlenmesin — yatay kaydırmanın kökü */
.about-grid > *, .services-grid > *, .projects-grid > *, .team-grid > *,
.footer-grid > *, .stats-bar > *, .group-grid > * { min-width: 0; }
.about-grid, .services-grid, .projects-grid, .team-grid, .footer-grid { min-width: 0; }

img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
iframe { display: block; border: 0; }
pre, code, table { max-width: 100%; overflow-x: auto; }

/* uzun kelime / e-posta / URL taşması */
h1, h2, h3, h4, h5, h6, p, li, a, span, td { overflow-wrap: break-word; }

/* form öğeleri kabına sığsın */
input, textarea, select, button { font: inherit; max-width: 100%; box-sizing: border-box; }
input:not([type=checkbox]):not([type=radio]), textarea, select { width: 100%; }

/* kayan logo şeridi sayfayı kaydırmasın */
.marquee-container, .marquee-wrap { overflow: hidden; }

/* ---------- 2. AKIŞKAN TİPOGRAFİ VE BOŞLUK ----------------------- */
.hero h1, .hero-title { font-size: clamp(2rem, 6.2vw, 4.2rem); line-height: 1.08; }
.section-title      { font-size: clamp(1.65rem, 4.4vw, 2.9rem); line-height: 1.16; }
.page-hero h1       { font-size: clamp(1.9rem, 5.4vw, 3.4rem); line-height: 1.12; }
.section-subtitle   { font-size: clamp(0.95rem, 1.9vw, 1.08rem); line-height: 1.65; }
.section            { padding-block: clamp(3.5rem, 8vw, 7rem); }
.container          { padding-inline: clamp(1.15rem, 4vw, 2rem); }

@media (max-width: 768px) {
  .section-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; }
  .stats-bar { gap: 0 !important; }
  /* hero: istatistik seridi absolute oldugu icin mobilde metnin uzerine biniyordu */
  .hero {
    height: auto;
    min-height: 92svh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: calc(85px + 2rem);
  }
  .hero > .container { flex: 1; display: flex; align-items: center; width: 100%; }
  .hero-content { max-width: none; padding-bottom: 2rem; }
  .hero-stats { position: static; margin-top: auto; width: 100%; }
  .hero-stat { padding: 1.15rem 0.7rem; }
  .hero-stat-num { font-size: clamp(1.3rem, 5.6vw, 2rem); line-height: 1.18; white-space: nowrap; }
  .hero-stat-label { font-size: 0.68rem; letter-spacing: 0.09em; line-height: 1.35; }
  .hero-stat:nth-child(2n) { border-right: none; }
  .hero-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .hero-buttons, .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .hero-buttons .btn, .hero-cta .btn { flex: 1 1 auto; }
}

/* ---------- 3. DOKUNMA HEDEFLERİ (WCAG 2.5.8) -------------------- */
@media (hover: none), (max-width: 900px) {
  .nav-links a, .footer a, .btn, button, .tab,
  .project-card a, .service-card a, .social-links a,
  .group-company-link, .breadcrumb a, .footer-links a, .marquee-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn { min-height: 48px; padding-inline: 1.5rem; justify-content: center; }
  .social-links a { min-width: 44px; justify-content: center; }
  .footer-links li + li { margin-top: 0.15rem; }
  .breadcrumb a { padding-inline: 2px; }
  /* cumle icinde gecen baglantilar metin akisini bozmasin (WCAG 2.5.8 istisnasi) */
  p a, label a, li p a, .section-subtitle a { min-height: 0; display: inline; }
}

/* ---------- 4. KLAVYE ERİŞİLEBİLİRLİĞİ --------------------------- */
:focus-visible {
  outline: 2px solid var(--gold, #708fa3);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 50%; transform: translate(-50%, -140%);
  z-index: 10000; background: var(--primary, #323e48); color: #fff;
  padding: 0.85rem 1.5rem; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none; transition: transform .2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 5. KAYDIRMAYLA BELİRME ------------------------------- */
[data-ar] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .62s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--ar-delay, 0ms);
  will-change: opacity, transform;
}
[data-ar="sol"]  { transform: translate3d(-26px, 0, 0); }
[data-ar="sag"]  { transform: translate3d(26px, 0, 0); }
[data-ar="olcek"]{ transform: scale(.955); }
[data-ar].ar-in  { opacity: 1; transform: none; will-change: auto; }

/* ---------- 6. KART VE GÖRSEL HAREKETİ --------------------------- */
.project-card, .service-card, .team-card, .group-card {
  transition: transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) {
  .project-card:hover, .service-card:hover, .team-card:hover, .group-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 52px rgba(50,62,72,.17);
  }
  .project-card:hover .project-img img,
  .project-card:hover img { transform: scale(1.06); }
}
.project-card img, .project-img img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.project-card, .project-img { overflow: hidden; }

/* dokunmada anlık geri bildirim */
.btn:active, .project-card:active, .service-card:active { transform: scale(.985); }

/* görsel yüklenirken zıplama olmasın */
.project-card img, .project-img img, .team-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.team-card img { aspect-ratio: 1 / 1; }

/* ---------- 7. ÜST ÇUBUK: KAYDIRMA İLERLEMESİ -------------------- */
#ar-progress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold, #708fa3), var(--gold-light, #8eb0c4));
  z-index: 9999; pointer-events: none; transition: width .12s linear;
}

/* ---------- 8. YUKARI DÖN ---------------------------------------- */
#ar-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary, #323e48); color: #fff; font-size: 1rem;
  display: grid; place-items: center; z-index: 900;
  box-shadow: 0 8px 26px rgba(50,62,72,.28);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s, transform .3s, visibility .3s, background .25s;
}
#ar-top.on { opacity: 1; visibility: visible; transform: none; }
#ar-top:hover { background: var(--gold, #708fa3); }

/* ---------- 9. MOBİL MENÜ ---------------------------------------- */
@media (max-width: 900px) {
  .nav-links.open, .nav-links {
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open a {
    opacity: 0;
    transform: translateY(12px);
    animation: ar-menu-in .42s cubic-bezier(.16,1,.3,1) forwards;
  }
  .nav-links.open a:nth-child(1){animation-delay:.05s}
  .nav-links.open a:nth-child(2){animation-delay:.10s}
  .nav-links.open a:nth-child(3){animation-delay:.15s}
  .nav-links.open a:nth-child(4){animation-delay:.20s}
  .nav-links.open a:nth-child(5){animation-delay:.25s}
  .nav-links.open a:nth-child(6){animation-delay:.30s}
}
@keyframes ar-menu-in { to { opacity: 1; transform: none; } }
body.ar-menu-acik { overflow: hidden; }

/* ---------- 10. SAYAÇ -------------------------------------------- */
.stat-num, .stat-number, [data-sayac] { font-variant-numeric: tabular-nums; }

/* ---------- 11. HAREKET AZALTMA TERCİHİ -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-ar] { opacity: 1 !important; transform: none !important; }
  .marquee-content { animation: none !important; }
}

/* ---------- 12. YAZDIRMA ----------------------------------------- */
@media print {
  .navbar, #ar-top, #ar-progress, .marquee-container, #preloader { display: none !important; }
  [data-ar] { opacity: 1 !important; transform: none !important; }
}

/* ===================================================================
   13. MOBİL MENÜ — EKSİK OLAN KISIM
   Sitede .nav-toggle, display:none olan .nav-actions içindeydi;
   ayrıca .nav-links.open için hiç kural yoktu. Menü hiç açılmıyordu.
   =================================================================== */
@media (max-width: 768px) {

  /* hamburger yeniden görünür ve parmak boyunda */
  .nav-actions {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1000;          /* panel (998) acikken kapatma butonu ustte kalsin */
  }
  .nav-actions .nav-lang { display: none; }
  .nav-contact {
    font-size: 0.85rem;
    padding: 0.55rem 0.95rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 9px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:active { background: rgba(255,255,255,0.12); }

  /* açılır panel */
  .nav-links {
    display: flex !important;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6.5rem 1.75rem 2.5rem;
    background: var(--primary, #323e48);
    box-shadow: -18px 0 50px rgba(0,0,0,0.34);
    transform: translateX(102%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 998;
    transition: transform .44s cubic-bezier(.16,1,.3,1), visibility .44s;
  }
  .nav-links.open { transform: none; visibility: visible; }

  .nav-links a {
    color: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.28rem;
    letter-spacing: .01em;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.11);
    width: 100%;
    justify-content: flex-start;
  }
  .nav-links a::after { display: none; }
  .nav-links a:active { background: rgba(255,255,255,0.07); }

  /* arka plan perdesi */
  #ar-perde {
    position: fixed;
    inset: 0;
    background: rgba(20,26,32,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    z-index: 997;
    transition: opacity .38s, visibility .38s;
    border: 0;
    cursor: pointer;
  }
  #ar-perde.on { opacity: 1; visibility: visible; }
}

@media (max-width: 420px) {
  .nav-contact { display: none; }
}

@media (min-width: 769px) {
  #ar-perde { display: none; }
}

/* ── 14. "Projelerimiz" açılır menüsü mobilde hover'a bağlıydı,
      dokunmatikte hiç açılmıyordu. Panelde düz liste hâline getiriliyor. ── */
@media (max-width: 768px) {
  .nav-projects-dropdown {
    display: block !important;   /* sayfa CSS'i mobilde bunu tamamen gizliyordu */
    position: static;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.11);
  }
  .nav-projects-toggle {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.28rem !important;
    color: #fff !important;
    padding: 1rem 0.25rem;
    min-height: 44px;
    width: 100%;
    justify-content: flex-start;
  }
  .nav-projects-toggle i { display: none; }
  .nav-projects-toggle::after { display: none; }

  .nav-projects-menu {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    min-width: 0;
    width: 100%;
    padding: 0 0 0.75rem 1rem;
    margin: 0;
    border-radius: 0;
  }
  .nav-projects-menu::before { display: none; }
  .nav-projects-menu a {
    color: rgba(255,255,255,0.78) !important;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1rem;
    padding: 0.7rem 0.25rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 0;
    width: 100%;
  }
  .nav-projects-menu a i { font-size: 0.7rem; color: var(--gold-light, #8eb0c4); }
  .nav-projects-menu a:active { background: rgba(255,255,255,0.07); }
}

/* ===================================================================
   15. FORM GERİ BİLDİRİMİ  (form.js ile birlikte çalışır)
   =================================================================== */
.ar-form-bildirim {
  display: block;
  border-radius: 11px;
  padding: 0.95rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.55;
  border: 1px solid transparent;
  animation: ar-bildirim-in .34s cubic-bezier(.16,1,.3,1);
}
.ar-form-bildirim strong { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.ar-form-bildirim span   { display: block; opacity: 0.88; font-size: 0.87rem; }
.ar-basari { background: #e8f3ec; border-color: #b8ddc6; color: #1c6537; }
.ar-hata   { background: #fdecea; border-color: #f3c2bc; color: #99291a; }
.ar-bilgi  { background: #e9eff3; border-color: #c3d5e0; color: #2c4b5f; }
@keyframes ar-bildirim-in { from { opacity: 0; transform: translateY(-6px); } }

/* koyu zeminli e-bülten formunda okunur kalsın */
.footer .ar-form-bildirim { margin-top: 0.75rem; }

/* ===================================================================
   16. TIKLANABİLİR İLETİŞİM BİLGİLERİ
   =================================================================== */
.ar-iletisim-baglanti {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  transition: color .2s;
}
.ar-iletisim-baglanti:hover {
  color: var(--gold-light, #8eb0c4);
  text-decoration: none;
}
[data-metin="ayar-telefon"] a,
[data-metin="ayar-eposta"] a {
  text-decoration: none !important;
  border-bottom: none !important;
}
@media (hover: none) { .ar-iletisim-baglanti { padding-block: 2px; } }

/* ===================================================================
   17. BUTON KONTRASTI — WCAG AA
   Birincil butonda beyaz yazı / #708fa3 zemin oranı 3.42 idi (AA: 4.5).
   Zemin bir tık koyultuluyor: 4.51. Marka tonu korunuyor.
   =================================================================== */
.btn-primary,
.newsletter-btn,
button[type="submit"].btn-primary {
  background: #607a8c;
  border-color: #607a8c;
}
.btn-primary:hover,
.newsletter-btn:hover {
  background: #52697a;
  border-color: #52697a;
}
.ar-mailto-yedek {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================================================================
   18. PROJE KARTLARI — PREMIUM DÜZEN
   Açıklama paragrafı kaldırıldı; kart artık görsel + isim + künye
   üzerine kurulu. Daha uzun görsel oranı, ince çizgiler, sakin
   tipografi ve ölçülü hareket.
   =================================================================== */

.projects-grid {
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
}

.project-card {
  background: var(--white, #fff);
  border: 1px solid rgba(50,62,72,.09);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(50,62,72,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              border-color .5s;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(50,62,72,.16);
  border-color: rgba(50,62,72,.16);
}

/* ── görsel: daha uzun, editoryal oran ── */
.project-card-img {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: var(--light-bg, #eff1f4);
}
.project-card-img img,
.project-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.project-card:hover .project-card-img img { transform: scale(1.055); }

/* görselin altına yumuşak koyulaşma — etiket okunur kalsın */
.project-card-img::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(26,32,40,.55), transparent);
  pointer-events: none;
}

/* ── tip etiketi: görselin sol altında, cam etkisi ── */
.project-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  top: auto;
  right: auto;
  z-index: 2;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 50px;
  line-height: 1;
}

/* ── gövde ── */
.project-card-body {
  padding: 1.5rem 1.4rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-loc {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted, #5b6770);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .55rem;
}
.project-loc i { font-size: .72rem; color: var(--gold-light, #8eb0c4); }

.project-card-body h3 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.18rem, 1.5vw, 1.42rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--primary, #323e48);
  margin: 0 0 1.1rem;
  position: relative;
  padding-bottom: .9rem;
}
/* başlığın altında büyüyen ince çizgi */
.project-card-body h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--gold-light, #8eb0c4);
  transition: width .55s cubic-bezier(.16,1,.3,1);
}
.project-card:hover .project-card-body h3::after { width: 56px; }

/* ── künye: Alan / Durum ── */
.project-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
  font-size: .82rem;
  color: var(--text-main, #2a333c);
}
.project-footer:empty { display: none; margin: 0; }
.project-footer span { display: flex; gap: .35rem; align-items: baseline; }
.project-footer strong {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #5b6770);
}

/* ── bağlantı: kutu değil, kayan ok ── */
.project-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--primary, #323e48);
  text-decoration: none;
  padding: 0;
  background: none;
  border: 0;
}
.project-link i { font-size: .7rem; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.project-card:hover .project-link i { transform: translate(3px, -3px); }
.project-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: currentColor;
}
.project-link:hover { color: var(--gold, #708fa3); }

/* ── mobil: görsel biraz daha kısa, kart daha kompakt ── */
@media (max-width: 768px) {
  .project-card-img { aspect-ratio: 4 / 3; }
  .project-card-body { padding: 1.25rem 1.15rem 1.15rem; }
  .project-card-body h3 { margin-bottom: .95rem; }
}

/* ── filtre butonları: daha sakin ── */
.filter-btn {
  border-radius: 50px;
  font-size: .82rem;
  letter-spacing: .02em;
  transition: background .3s, color .3s, border-color .3s;
}

/* ===================================================================
   19. PROJE LİSTESİ — EDİTORYAL DÜZEN
   Sadece Aktif / Referans Projeler sayfalarındaki ızgaraya uygulanır.
   Ana sayfadaki 3'lü vitrin (bölüm 18) olduğu gibi kalır.

   Fikir: kart kabuğunu kaldır, görseli sayfanın kendisine yerleştir,
   sütunları kaydırarak akış hissi ver, bilgiyi tipografiyle kur.
   =================================================================== */

#active-projects-grid,
#reference-projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.6rem, 4.4vw, 4rem) clamp(1.6rem, 3.2vw, 3.2rem);
  align-items: start;
}

@media (min-width: 700px) {
  #active-projects-grid,
  #reference-projects-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 2 sütunda kalır: görseller yatay olduğu için render'lar daha büyük görünür */
@media (min-width: 1180px) {
  #active-projects-grid,
  #reference-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(3rem, 4.6vw, 4.6rem) clamp(2rem, 3.6vw, 3.6rem);
  }
}

/* ── kart kabuğunu kaldır ── */
#active-projects-grid .project-card,
#reference-projects-grid .project-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
#active-projects-grid .project-card:hover,
#reference-projects-grid .project-card:hover {
  transform: none;
  box-shadow: none;
}

/* ── görsel ── */
#active-projects-grid .project-card-img,
#reference-projects-grid .project-card-img {
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  background: #dfe4e9;
}
#active-projects-grid .project-card:hover .project-card-img img,
#reference-projects-grid .project-card:hover .project-card-img img {
  transform: scale(1.04);
}
/* üzerine gelince görsel hafifçe koyulaşsın */
#active-projects-grid .project-card-img::after,
#reference-projects-grid .project-card-img::after {
  inset: 0;
  height: auto;
  background: linear-gradient(to top, rgba(26,32,40,.42), rgba(26,32,40,0) 55%);
  opacity: .55;
  transition: opacity .6s cubic-bezier(.16,1,.3,1);
}
#active-projects-grid .project-card:hover .project-card-img::after,
#reference-projects-grid .project-card:hover .project-card-img::after { opacity: .85; }

/* ── tip etiketi: çerçevesiz, yalın ── */
#active-projects-grid .project-tag,
#reference-projects-grid .project-tag {
  left: 1.1rem;
  bottom: 1.1rem;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  font-size: .64rem;
  letter-spacing: .2em;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* ── gövde: sayfanın üstünde, kutusuz ── */
#active-projects-grid .project-card-body,
#reference-projects-grid .project-card-body {
  padding: 1.25rem .15rem 0;
  background: none;
}

#active-projects-grid .project-loc,
#reference-projects-grid .project-loc {
  font-size: .66rem;
  letter-spacing: .17em;
  margin-bottom: .5rem;
  color: var(--text-muted, #5b6770);
}
#active-projects-grid .project-loc i,
#reference-projects-grid .project-loc i { display: none; }

#active-projects-grid .project-card-body h3,
#reference-projects-grid .project-card-body h3 {
  font-size: clamp(1.25rem, 1.75vw, 1.62rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.005em;
  margin: 0 0 .85rem;
  padding: 0;
  color: var(--primary, #323e48);
  transition: color .4s;
}
#active-projects-grid .project-card-body h3::after,
#reference-projects-grid .project-card-body h3::after { display: none; }
#active-projects-grid .project-card:hover h3,
#reference-projects-grid .project-card:hover h3 { color: var(--gold, #708fa3); }

/* ── künye: ince çizgi üstünde, aralıklı ── */
#active-projects-grid .project-footer,
#reference-projects-grid .project-footer {
  gap: .3rem 1.6rem;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(50,62,72,.13);
  font-size: .8rem;
}
#active-projects-grid .project-footer:empty,
#reference-projects-grid .project-footer:empty { border: 0; padding: 0; }

/* ── bağlantı: kayan ok, alt çizgi büyüyor ── */
#active-projects-grid .project-link,
#reference-projects-grid .project-link {
  margin-top: 1rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}
#active-projects-grid .project-link::after,
#reference-projects-grid .project-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
#active-projects-grid .project-card:hover .project-link::after,
#reference-projects-grid .project-card:hover .project-link::after { width: 100%; }

/* ── mobil: tek sütun, görsel biraz daha geniş ── */
@media (max-width: 699px) {
  #active-projects-grid .project-card-img,
  #reference-projects-grid .project-card-img { aspect-ratio: 4 / 3; }
  #active-projects-grid .project-card-body,
  #reference-projects-grid .project-card-body { padding-top: 1rem; }
}

/* ===================================================================
   20. FİLTRE ÇUBUĞU — sakin, tipografik
   =================================================================== */
.projects-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.9rem;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(50,62,72,.11);
}
.projects-filter .filter-btn {
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  padding: .5rem 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted, #5b6770) !important;
  position: relative;
  min-height: 40px;
}
.projects-filter .filter-btn::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--gold, #708fa3);
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.projects-filter .filter-btn:hover { color: var(--primary, #323e48) !important; }
.projects-filter .filter-btn.active { color: var(--primary, #323e48) !important; }
.projects-filter .filter-btn.active::after { width: 100%; }

@media (max-width: 700px) {
  .projects-filter {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.35rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline: 1px;
  }
  .projects-filter::-webkit-scrollbar { display: none; }
  .projects-filter .filter-btn { white-space: nowrap; flex: 0 0 auto; }
}

/* boş künye: içerik yok, sadece başlık ile bağlantı arasında ince ayraç */
.project-footer.ar-kunye-bos {
  padding-top: 0;
  margin: 0;
  min-height: 0;
  gap: 0;
}
#active-projects-grid .project-footer.ar-kunye-bos,
#reference-projects-grid .project-footer.ar-kunye-bos {
  border-top: 1px solid rgba(50,62,72,.13);
  padding-top: 0;
}
/* ana sayfa vitrininde boş künye hiç görünmesin */
.projects-grid:not(#active-projects-grid):not(#reference-projects-grid) .project-footer.ar-kunye-bos {
  display: none;
}


/* ===================================================================
   23. HİZMET KARTLARI — KURUMSAL RENK
   Sadece :is(#services-grid, #prensipler-grid) içine uygulanır. (Hakkımızda'daki ekip kartları
   da .service-card sınıfını kullanıyor; onlara dokunulmuyor.)
   =================================================================== */

:is(#services-grid, #prensipler-grid) .service-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(50,62,72,.10);
  border-radius: 14px;
  background: var(--white, #fff);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(50,62,72,.04);
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              border-color .5s;
}
:is(#services-grid, #prensipler-grid) .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(50,62,72,.15);
  border-color: rgba(50,62,72,.16);
}

/* ── üst panel: kurumsal lacivert–mavi geçiş ── */
:is(#services-grid, #prensipler-grid) .service-icon {
  width: 100%;
  height: clamp(128px, 14vw, 165px);
  margin: 0;
  border-radius: 0;
  font-size: clamp(1.9rem, 2.6vw, 2.45rem);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(115% 110% at 18% 8%, rgba(142,176,196,.30), transparent 58%),
    linear-gradient(135deg, #29363f 0%, #304a5c 46%, #55788e 100%);
}
/* rengin üstünde %10 opaklıkla mimari doku (ikonların altında kalır) */
:is(#services-grid, #prensipler-grid) .service-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("hizmet-doku.jpg");
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  opacity: .10;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* her kart dokunun farklı bir bölümünü göstersin — tekrar hissi olmasın */
:is(#services-grid, #prensipler-grid) .service-card:nth-child(6n+1) .service-icon::before { background-position:   0% 100%; }
:is(#services-grid, #prensipler-grid) .service-card:nth-child(6n+2) .service-icon::before { background-position:  22% 100%; }
:is(#services-grid, #prensipler-grid) .service-card:nth-child(6n+3) .service-icon::before { background-position:  44% 100%; }
:is(#services-grid, #prensipler-grid) .service-card:nth-child(6n+4) .service-icon::before { background-position:  63% 100%; }
:is(#services-grid, #prensipler-grid) .service-card:nth-child(6n+5) .service-icon::before { background-position:  81% 100%; }
:is(#services-grid, #prensipler-grid) .service-card:nth-child(6n)   .service-icon::before { background-position: 100% 100%; }
:is(#services-grid, #prensipler-grid) .service-icon i {
  position: relative;
  z-index: 1;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
:is(#services-grid, #prensipler-grid) .service-card:hover .service-icon i { transform: translateY(-4px) scale(1.07); }

/* ── gövde ── */
:is(#services-grid, #prensipler-grid) .service-body {
  padding: 1.5rem 1.5rem 1.45rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
:is(#services-grid, #prensipler-grid) .service-body h3 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--primary, #323e48);
  margin: 0 0 .7rem;
}
:is(#services-grid, #prensipler-grid) .service-body p {
  font-size: .89rem;
  line-height: 1.68;
  color: var(--text-muted, #5b6770);
  margin: 0;
  flex: 1;
}

/* ── bağlantı ── */
:is(#services-grid, #prensipler-grid) .service-link {
  margin-top: 1.25rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dark-navy, #304a5c);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
:is(#services-grid, #prensipler-grid) .service-link i {
  font-size: .62rem;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
:is(#services-grid, #prensipler-grid) .service-card:hover .service-link i { transform: translateX(4px); }
:is(#services-grid, #prensipler-grid) .service-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
:is(#services-grid, #prensipler-grid) .service-card:hover .service-link::after { width: 100%; }

/* alttaki eski vurgu çizgisi bu tasarımda gereksiz */
:is(#services-grid, #prensipler-grid) .service-card::before { display: none; }

@media (max-width: 640px) {
  :is(#services-grid, #prensipler-grid) .service-body { padding: 1.3rem 1.25rem 1.25rem; }
}

/* etiketler kaldırıldığı için başlıkların üst boşluğunu dengele */
.section-title { margin-top: 0; }

/* ===================================================================
   24. VEKTÖREL ŞEHİR ARKA PLANI
   Sayfa başlıklarının ve koyu çağrı bölümlerinin arkasında, düşük
   opaklıkta, yavaşça akan iki katmanlı silüet. Izgara desenleri
   tamamen kaldırıldı.
   =================================================================== */

/* eski çizgili desenler */
.binghatti-grid-bg { display: none !important; }

.page-hero::before,
.page-hero::after,
.bg-primary::before,
.bg-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 78%;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* uzak katman — daha silik, daha yavaş */
.page-hero::before,
.bg-primary::before {
  background-image: url("sehir-uzak.svg");
  opacity: .045;
  animation: ar-sehir-akis 150s linear infinite;
}

/* yakın katman — biraz daha belirgin, biraz daha hızlı */
.page-hero::after,
.bg-primary::after {
  background-image: url("sehir-yakin.svg");
  height: 62%;
  opacity: .07;
  animation: ar-sehir-akis 95s linear infinite;
}

@keyframes ar-sehir-akis {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* koyu bölümler silüeti barındırabilsin */
.bg-primary {
  position: relative;
  overflow: hidden;
}
.bg-primary > .container,
.page-hero > .container,
.page-hero-content {
  position: relative;
  z-index: 1;
}

/* sayfa başlığında silüet bir tık daha okunur */
.page-hero::after { opacity: .085; }

@media (max-width: 700px) {
  .page-hero::before,
  .page-hero::after,
  .bg-primary::before,
  .bg-primary::after { height: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::before,
  .page-hero::after,
  .bg-primary::before,
  .bg-primary::after { animation: none !important; }
}


/* ===================================================================
   25. SAYFA BAŞLIĞI HİZASI
   .page-hero bir flex kap; içindeki .container'ın "margin: 0 auto"
   değeri onu flex öğesi olarak ortalıyordu. Tam genişliğe yayarak
   başlığı aşağıdaki bölüm başlıklarıyla aynı hizaya alıyoruz.
   =================================================================== */
.page-hero > .container,
.page-hero-content {
  width: 100%;
  flex: 1 1 auto;
  text-align: left;
}
.page-hero .breadcrumb { justify-content: flex-start; }

/* ===================================================================
   26. GRUP ŞİRKETLERİ — TEK TİP KARTLAR + GERÇEK LOGOLAR
   Arcons kartı kırmızı vurgularla diğerlerinden ayrışıyordu; markaya
   özel tüm renk istisnaları kaldırıldı. Metin logolar yerine gerçek
   logo dosyaları, beyaz bir panel üzerinde kullanılıyor.
   =================================================================== */

.group-companies-grid {
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 2.4vw, 2rem);
}
@media (min-width: 700px)  { .group-companies-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .group-companies-grid { grid-template-columns: repeat(4, 1fr); } }

/* markaya özel istisnalar iptal — tüm kartlar aynı */
.dpa-card::before,
.arcons-card::before,
.group-company-card::before { background: var(--gold-light, #8eb0c4) !important; }
.dpa-link, .arcons-link,
.group-company-link { color: var(--gold-light, #8eb0c4) !important; }
.dpa-link:hover, .arcons-link:hover,
.group-company-link:hover { color: #fff !important; }

/* logo paneli: beyaz zemin, logolar kendi renkleriyle okunur kalsın */
.group-company-logo-wrap {
  background: #fff;
  border-bottom: 0;
  padding: 1.5rem 1.6rem;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-company-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 52px;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.group-company-card:hover .group-company-logo { transform: scale(1.035); }

.group-company-body { padding-top: 1.6rem; }
.group-company-body h3 {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  margin-bottom: .7rem;
}
.group-company-body p { font-size: .88rem; line-height: 1.7; }

@media (min-width: 1180px) {
  .group-company-body,
  .group-company-footer { padding-inline: 1.5rem; }
  .group-company-logo-wrap { padding-inline: 1.3rem; min-height: 104px; }
  .group-company-logo { max-height: 46px; max-width: 88%; }
}

@media (max-width: 699px) {
  .group-company-logo-wrap { min-height: 96px; }
  .group-company-logo { max-height: 44px; }
}

/* ===================================================================
   27. NAVBAR LOGOSU — GERÇEK MARKA İMZASI
   =================================================================== */
.nav-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  min-height: 44px;        /* dokunma hedefi */
}
.nav-logo img {
  height: clamp(26px, 2.4vw, 34px);
  width: auto;
  display: block;
}
@media (max-width: 480px) { .nav-logo img { height: 24px; } }

/* ===================================================================
   28. GRUP KARTLARI — BEYAZ BANT KALDIRILDI, CAM ETKİSİ GÜÇLENDİRİLDİ
   Logolar beyaza çevrildiği için ayrı bir panele gerek kalmadı;
   kart zemini de arkadaki silüetin metni yormaması için koyulaştırıldı.
   =================================================================== */
.group-company-card {
  background: rgba(24, 33, 42, 0.62);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.group-company-card:hover {
  background: rgba(28, 39, 50, 0.74);
  border-color: rgba(255, 255, 255, 0.22);
}

.group-company-logo-wrap {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 1.9rem 1.6rem 1.55rem;
  min-height: 104px;
}
.group-company-logo { max-height: 44px; max-width: 84%; }

.group-company-body p { color: rgba(255,255,255,.80); }
.group-company-tags span {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}
.group-company-offices span { color: rgba(255,255,255,.55); }

@media (min-width: 1180px) {
  .group-company-logo-wrap { padding: 1.7rem 1.3rem 1.4rem; min-height: 96px; }
  .group-company-logo { max-height: 38px; max-width: 90%; }
}

/* ===================================================================
   29. HERO HİZASI
   .hero de flex kaptı; içindeki .container "margin: 0 auto" ile
   ortalanıyordu. Tam genişliğe yayılıyor, böylece başlık aşağıdaki
   istatistik şeridiyle aynı sol hizaya oturuyor.
   =================================================================== */
.hero > .container {
  width: 100%;
  flex: 1 1 auto;          /* max-width korunur: 1320px, ortalanır */
}
.hero-content { max-width: 780px; }

/* istatistikler sola hizalı — ilk sayı başlıkla aynı çizgide başlasın */
.hero-stat {
  text-align: left;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.hero-stat:first-child { padding-left: 0; }
@media (max-width: 768px) {
  .hero-stat { padding-inline: 0.85rem; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat:nth-child(3) { padding-left: 0; }
}

/* ===================================================================
   30. YÜKLEME EKRANI — ORİJİNAL LOGO, HARF HARF AÇILIM
   Logo dosyası HİÇ değiştirilmez (560x167). Ekranda görünen her parça
   aynı dosyadan kırpılır:
     .oy-govde : çerçeve + AREMAS      -> görselin y0-150 aralığı
     .oy-cizgi : sol alttaki kısa çizgi -> y151+, x0-66, soldan sağa çizilir
     .oy-harf  : alt yazının TEK BİR HARFİ -> logodan kesilmiş dilim
   Her harf ayrı bir kutu; sırayla belirirler.
   =================================================================== */

.on-yukleme {
  --oy-w: min(300px, 62vw);          /* logonun ekrandaki genişliği */
  --oy-nw: 560;                      /* logonun doğal genişliği (px) */
  --oy-yazi-y: 151;                  /* alt yazı bandının başladığı satır */
  position: relative;
  width: var(--oy-w);
  animation: oy-yerles .72s cubic-bezier(.16,1,.3,1) both;
}

.oy-kat { display: block; width: 100%; height: auto; }

/* 1) çerçeve + kelime markası */
.oy-govde {
  position: relative;
  clip-path: inset(0 0 9.58% 0);     /* y0-150 */
  opacity: 0;
  animation: oy-belir .58s cubic-bezier(.16,1,.3,1) .1s forwards;
}

/* 2) çizgi — uçtan uca çiziliyor izlenimi için yavaş ve doğrusala yakın */
.oy-cizgi {
  position: absolute;
  inset: 0;
  clip-path: inset(90.42% 100% 0 0);
  animation: oy-cizgi-ciz .72s cubic-bezier(.35,.02,.25,1) .62s forwards;
}

/* 3) alt yazı — logodan kesilmiş harf dilimleri, sırayla */
.oy-yazi {
  position: absolute;
  /* alt yazı logoda x=82'den başlar ve sağ raya kadar uzanır */
  left: calc(var(--oy-w) * 82 / var(--oy-nw));
  top: calc(var(--oy-w) * var(--oy-yazi-y) / var(--oy-nw));
  display: flex;
  align-items: flex-start;
}
.oy-harf {
  display: block;
  flex: 0 0 auto;
  width:  calc(var(--oy-w) * var(--w) / var(--oy-nw));
  height: calc(var(--oy-w) * 16 / var(--oy-nw));
  background-image: url("logo-aremas-beyaz.png");
  background-repeat: no-repeat;
  background-size: var(--oy-w) auto;
  background-position-x: calc(-1 * var(--oy-w) * var(--l) / var(--oy-nw));
  background-position-y: calc(-1 * var(--oy-w) * var(--oy-yazi-y) / var(--oy-nw));
  opacity: 0;
  transform: translateY(3px);
  animation: oy-harf-gir .34s cubic-bezier(.16,1,.3,1) forwards;
}

/* harf gecikmeleri: 28 harf, 26ms arayla, 1.20s'de baslar */
.oy-harf:nth-child(1){animation-delay:1.20s}   .oy-harf:nth-child(2){animation-delay:1.226s}
.oy-harf:nth-child(3){animation-delay:1.252s}  .oy-harf:nth-child(4){animation-delay:1.278s}
.oy-harf:nth-child(5){animation-delay:1.304s}  .oy-harf:nth-child(6){animation-delay:1.330s}
.oy-harf:nth-child(7){animation-delay:1.356s}  .oy-harf:nth-child(8){animation-delay:1.382s}
.oy-harf:nth-child(9){animation-delay:1.408s}  .oy-harf:nth-child(10){animation-delay:1.434s}
.oy-harf:nth-child(11){animation-delay:1.460s} .oy-harf:nth-child(12){animation-delay:1.486s}
.oy-harf:nth-child(13){animation-delay:1.512s} .oy-harf:nth-child(14){animation-delay:1.538s}
.oy-harf:nth-child(15){animation-delay:1.564s} .oy-harf:nth-child(16){animation-delay:1.590s}
.oy-harf:nth-child(17){animation-delay:1.616s} .oy-harf:nth-child(18){animation-delay:1.642s}
.oy-harf:nth-child(19){animation-delay:1.668s} .oy-harf:nth-child(20){animation-delay:1.694s}
.oy-harf:nth-child(21){animation-delay:1.720s} .oy-harf:nth-child(22){animation-delay:1.746s}
.oy-harf:nth-child(23){animation-delay:1.772s} .oy-harf:nth-child(24){animation-delay:1.798s}
.oy-harf:nth-child(25){animation-delay:1.824s} .oy-harf:nth-child(26){animation-delay:1.850s}
.oy-harf:nth-child(27){animation-delay:1.876s} .oy-harf:nth-child(28){animation-delay:1.902s}

@keyframes oy-yerles    { from { transform: translateY(10px) scale(.99); } to { transform: none; } }
@keyframes oy-belir     { to { opacity: 1; } }
@keyframes oy-cizgi-ciz { to { clip-path: inset(90.42% 88.21% 0 0); } }
@keyframes oy-harf-gir  { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .on-yukleme { animation: none !important; transform: none !important; }
  .oy-govde, .oy-harf { animation: none !important; opacity: 1 !important; transform: none !important; }
  .oy-cizgi { animation: none !important; clip-path: inset(90.42% 88.21% 0 0) !important; }
}


/* ===================================================================
   31. SOSYAL MEDYA İKONLARI
   Alt bilgide yan yana sıkışıktılar; daire içine alınıp aralandı.
   =================================================================== */
.social-links,
.footer-social,
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.social-links a,
.footer-social a,
.social-icons a {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  transition: background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.social-links a:hover,
.footer-social a:hover,
.social-icons a:hover {
  background: var(--gold, #708fa3);
  border-color: var(--gold, #708fa3);
  color: #fff;
  transform: translateY(-3px);
}
.social-links a i,
.footer-social a i,
.social-icons a i { margin: 0; }

@media (max-width: 480px) {
  .social-links, .footer-social, .social-icons { gap: .5rem; }
  .social-links a, .footer-social a, .social-icons a { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}


/* ===================================================================
   32. GELİŞTİRİCİ LOGO ŞERİDİ  (aktif / referans proje sayfaları)
   Kesintisiz akış: liste iki kez basılır, ray -%50 kaydırılır.
   Boşluk flex gap yerine öge sağ boşluğu olarak verilir; aksi hâlde
   iki kopya arasındaki tek fazla boşluk akışta sıçrama yapar.
   =================================================================== */
.ortak-serit {
  padding: clamp(2.2rem, 3.6vw, 3.4rem) 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

/* Sayfa başlığının hemen altındaki tam genişlikte bant.
   Koyu başlık bloğu ile beyaz içerik arasında ayrı bir yüzey olsun diye
   açık gri; logolar beyaz zeminli olduğu için bant açık kalmalı. */
.ortak-serit-ust {
  padding: clamp(1.5rem, 2.6vw, 2.2rem) 0;
  background: var(--light-bg);
  border-bottom: 1px solid var(--border);
  border-top: 0;
}
.ortak-yol {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ortak-ray {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ortak-akis 38s linear infinite;
  will-change: transform;
}
/* İmleç geldiğinde şerit durmaz, YAVAŞLAR — hızı etkilesim.js
   playbackRate ile yumuşakça düşürür (sıçrama olmaz). Aşağıdaki kural
   yalnızca Web Animations API'si olmayan eski tarayıcılar için yedek. */
.ortak-yol.yedek-duraklat:hover .ortak-ray,
.ortak-yol.yedek-duraklat:focus-within .ortak-ray { animation-play-state: paused; }

.ortak-oge {
  --olcek: 1;                                  /* ortaklar.js'ten gelir */
  flex: 0 0 auto;
  /* 41 logo var; ekranda aynı anda daha çoğu görünsün diye ölçü ve
     aralık küçültüldü. */
  margin-right: clamp(1.8rem, 3.4vw, 3.4rem);
  height: calc(clamp(24px, 3vw, 34px) * var(--olcek));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ortak-oge img {
  max-height: 100%;
  max-width: clamp(90px, 9vw, 130px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;                                  /* her zaman net görünsün */
}

@keyframes ortak-akis {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ortak-ray {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.6rem;
  }
  .ortak-yol { -webkit-mask-image: none; mask-image: none; }
}


/* ===================================================================
   33. PROJE DETAY SAYFASI
   =================================================================== */
.proje-duzen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4vw, 3.4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .proje-duzen { grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 340px); }
}

.proje-gorsel {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe4e9;
}
.proje-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.proje-metin {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 62ch;
}
.proje-metin p {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.85;
  color: var(--text-muted);
}

/* künye */
.proje-kunye {
  margin: 0 0 1.6rem;
  border-top: 1px solid var(--border);
}
.proje-kunye-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.proje-kunye dt {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.proje-kunye dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
  color: var(--text-main);
}

.proje-yan .btn.proje-cta { width: 100%; justify-content: center; }
.proje-dis,
.proje-geri {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid-blue);
  min-height: 44px;
}
.proje-dis:hover, .proje-geri:hover { color: var(--primary); }
.proje-geri { display: flex; }

/* diğer projeler */
.proje-diger { margin-top: clamp(3.4rem, 6vw, 5.5rem); }
.proje-diger h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--primary);
}
.proje-diger-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
}
@media (min-width: 640px) { .proje-diger-izgara { grid-template-columns: repeat(3, 1fr); } }

.proje-mini { display: block; }
.proje-mini-gorsel {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe4e9;
  margin-bottom: .9rem;
}
.proje-mini-gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.proje-mini:hover .proje-mini-gorsel img { transform: scale(1.04); }
.proje-mini-tip {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid-blue);
  margin-bottom: .35rem;
}
.proje-mini strong {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}
.proje-mini em {
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .25rem;
}

/* bulunamadı */
.proje-bos { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.proje-bos i { font-size: 2.6rem; color: var(--mid-blue); margin-bottom: 1.2rem; display: block; }
.proje-bos h2 { font-family: 'Outfit', system-ui, sans-serif; color: var(--primary); margin-bottom: .6rem; }
.proje-bos p { color: var(--text-muted); margin-bottom: 1.8rem; }
.proje-bos-baglar { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }


/* ===================================================================
   34. ALT BİLGİ — marka sütunu
   Yazı yerine gerçek logo; sosyal ikonlar metinden ayrıldı.
   =================================================================== */
.footer-col.brand .footer-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 1.2rem;
}
.footer-col.brand .footer-logo img {
  height: clamp(34px, 3.4vw, 46px);
  width: auto;
  display: block;
}
.footer-col.brand .footer-social { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }


/* ===================================================================
   35. HERO ARKA PLAN VİDEOSU
   hero-video.mp4 site klasörüne konduğunda otomatik devreye girer.
   Dosya yoksa etkilesim.js video etiketini kaldırır, altındaki
   görsel görünmeye devam eder — hero hiçbir durumda boş kalmaz.
   =================================================================== */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* kaynak video zaten koyu; .30 opaklikta neredeyse gorunmuyordu */
  opacity: .62;
  border: 0;
  pointer-events: none;
}
/* video oynuyorsa alttaki durağan görseli gizle */
.hero-bg.video-var .hero-bg-img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-bg.video-var .hero-bg-img { opacity: .45; }
}

/* ===================================================================
   36. LOGO ŞERİDİ — ana sayfada sayfa sonu yerleşimi
   =================================================================== */
.ortak-serit-alt {
  padding: clamp(2rem, 3.4vw, 3rem) 0;
  background: var(--light-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}


/* ===================================================================
   37. YÖNETİM KADROSU IZGARASI
   auto-fit kuralı geniş ekranda 4 sütun üretiyor ve 6 kişi 4+2 diziliyor;
   masaüstünde 3 sütuna sabitlenince 3+3 dengeli duruyor.
   =================================================================== */
#team-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 940px) {
  #team-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ===================================================================
   38. HERO — metinsiz sürüm
   Başlık/alt metin/butonlar kaldırıldı; hero yalnızca video ve
   alttaki sayaç şeridi. İçerik olmadığı için dikey ortalama yerine
   şeridi tabana yaslayan bir düzen kullanılır.
   =================================================================== */
.hero:not(:has(.hero-content)) { align-items: flex-end; }
.hero:not(:has(.hero-content)) .hero-stats { position: static; width: 100%; }

@supports not (selector(:has(*))) {
  /* :has desteklemeyen tarayicilarda mevcut mutlak konum korunur */
  .hero .hero-stats { position: absolute; }
}


/* ===================================================================
   39. ANA SAYFA PROJE VİTRİNİ
   Ortadaki kart net, yanlar %25 opaklıkta ve küçültülmüş.
   Şerit tek bir transform ile kayar; öğeler kendi opaklık/ölçek
   geçişini yapar. Aynı süre + aynı eğri kullanıldığı için kayma ile
   netleşme tek bir hareket gibi okunur.
   =================================================================== */
.vitrin-kap {
  display: block !important;            /* .projects-grid ızgarasını iptal et */
  grid-template-columns: none !important;
  gap: 0 !important;
}

.vitrin {
  /* Kart genişliğini vitrin.js pencereye göre hesaplar (3 kart tam
     oturacak şekilde). Aşağıdaki değer yalnızca ilk çizim için yedektir. */
  --vitrin-kart: clamp(220px, 30vw, 400px);
  --vitrin-bosluk: clamp(1rem, 2.2vw, 2rem);
  --vitrin-egri: cubic-bezier(.22, 1, .36, 1);
  --vitrin-sure: .82s;
  position: relative;
  outline: none;
}
.vitrin:focus-visible { outline: 2px solid var(--mid-blue); outline-offset: 6px; }

/* pencere: kartlar kenarda düz kesilir, silme/soldurma yok */
.vitrin-pencere {
  overflow: hidden;
  padding: 1.6rem 0 2rem;
  cursor: grab;
}
.vitrin.suruklu .vitrin-pencere { cursor: grabbing; }

.vitrin-ray {
  display: flex;
  align-items: stretch;
  gap: var(--vitrin-bosluk);
  width: max-content;
  will-change: transform;
}

/* Yan kartlar soluklaştırılmaz. Opaklığı düşürmek görseli sise
   çeviriyor, yazıyı da hayalet hâline getiriyordu. Bunun yerine yan
   kartlarda YAZI hiç gösterilmiyor: şeritte yalnızca ortadaki kartın
   tipografisi var, hiyerarşi opaklıkla değil içerikle kuruluyor. */
.vitrin-oge {
  flex: 0 0 var(--vitrin-kart);
  width: var(--vitrin-kart);
  opacity: 1;
  transform: scale(.9);
  transform-origin: center center;
  transition: transform var(--vitrin-sure) var(--vitrin-egri);
  will-change: transform;
}
.vitrin-oge.etkin { transform: scale(1); }

.vitrin-oge .project-card {
  height: 100%;
  transition: box-shadow var(--vitrin-sure) var(--vitrin-egri);
}
.vitrin-oge:not(.etkin) .project-card {
  pointer-events: none;                 /* yan kartın bağlantısı tıklanmasın */
  box-shadow: 0 10px 30px rgba(50, 62, 72, .08);
}
.vitrin-oge.etkin .project-card { box-shadow: 0 26px 60px rgba(50, 62, 72, .18); }
.vitrin-oge:not(.etkin) .project-card:hover { transform: none; }

/* görsel oranı: kartlar dikey dursun */
.vitrin-oge .project-card-img { aspect-ratio: 3 / 4; }

/* görsel: yanlarda hafif gri ve bir tık koyu, ortada tam renk */
.vitrin-oge .project-card-img img {
  transition: filter var(--vitrin-sure) var(--vitrin-egri),
              transform var(--vitrin-sure) var(--vitrin-egri);
}
.vitrin-oge:not(.etkin) .project-card-img img {
  filter: grayscale(.35) brightness(.94);
}

/* yazı bloğu: yalnızca ortadaki kartta */
.vitrin-oge .project-card-body {
  overflow: hidden;
  max-height: 420px;
  transition: opacity .45s ease .18s,
              max-height var(--vitrin-sure) var(--vitrin-egri),
              padding var(--vitrin-sure) var(--vitrin-egri);
}
.vitrin-oge:not(.etkin) .project-card-body {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: opacity .3s ease,
              max-height var(--vitrin-sure) var(--vitrin-egri),
              padding var(--vitrin-sure) var(--vitrin-egri);
}

/* yazı gizlenince kart kısalıyor; kartlar üstten hizalansın ki
   ortadaki kart aşağı doğru büyüsün, şerit zıplamasın */
.vitrin-ray { align-items: flex-start; }

/* oklar */
.vitrin-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  box-shadow: 0 10px 30px rgba(50, 62, 72, .12);
  transition: background .3s ease, color .3s ease, transform .3s var(--vitrin-egri);
}
/* tek kart kipi: pencere kart genişliğine kısılır, komşular görünmez */
.vitrin-tek .vitrin-pencere {
  max-width: min(100%, 400px);
  margin-inline: auto;
}

/* kartlar pencereyi tam doldurduğu için oklar dışarı alınır */
.vitrin-ok-sol { left: calc(-1 * clamp(14px, 2.2vw, 34px)); }
.vitrin-ok-sag { right: calc(-1 * clamp(14px, 2.2vw, 34px)); }
.vitrin-ok:hover { background: var(--primary); color: var(--white); }
.vitrin-ok-sol:hover { transform: translateY(-50%) translateX(-3px); }
.vitrin-ok-sag:hover { transform: translateY(-50%) translateX(3px); }
.vitrin-ok:focus-visible { outline: 2px solid var(--mid-blue); outline-offset: 3px; }

/* noktalar: çizgi biçimli, etkin olan uzar */
.vitrin-noktalar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
}
/* Nokta, görünür çizgiden büyük bir dokunma alanına sahiptir; çizgi
   ::before ile çizilir. Böylece bölüm 3'teki 44px kuralı düğmeyi
   koca bir blok hâline getirmez. */
.vitrin-nokta {
  width: 26px;
  height: 34px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width .5s var(--vitrin-egri);
}
.vitrin-nokta::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(50, 62, 72, .22);
  transition: width .5s var(--vitrin-egri), background .5s ease;
}
.vitrin-nokta.etkin { width: 48px; }
.vitrin-nokta.etkin::before { width: 40px; background: var(--mid-blue); }
.vitrin-nokta:hover::before { background: rgba(50, 62, 72, .45); }
.vitrin-nokta:focus-visible { outline: 2px solid var(--mid-blue); outline-offset: 2px; }

@media (hover: none), (max-width: 900px) {
  /* bölüm 3'ün genel düğme kuralını bu düğmeler için geçersiz kıl */
  .vitrin-nokta { min-height: 34px; height: 40px; }
}

/* tablet: clamp'in 240px tabanı bu genişlikte dar kalıyordu */
/* dokunmatik: oklar küçülür, kartlar daha geniş */
@media (max-width: 700px) {
  .vitrin-ok { width: 44px; height: 44px; min-width: 44px; }
  .vitrin-ok-sol { left: -4px; }
  .vitrin-ok-sag { right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrin-ray { transition: none !important; }
  .vitrin-oge { transition: none; }
}


/* ===================================================================
   40. HERO SAYAÇLARI — animasyon boyunca tek satır
   Sayaçlar akarken iki ondalık gösteriyor ("6,00 Milyon m²+"); bu dizi
   bitmiş hâlinden ("6 Milyon m²+") uzun olduğu için dar ekranlarda
   ikinci satıra taşıyordu. İki önlem:
     1) hiçbir koşulda satır atlamaz,
     2) punto sütun genişliğiyle birlikte ölçeklenir; en uzun dizi de
        sığar.
   Ayrıca tablo rakamları ile her basamak aynı genişlikte olur, sayı
   akarken metin sağa sola oynamaz.
   =================================================================== */
.hero-stat-num {
  white-space: nowrap;
  font-size: clamp(1.3rem, 2.35vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.hero-stat { padding-inline: clamp(.9rem, 1.8vw, 2rem); }
.hero-stat-label { white-space: nowrap; }

@media (max-width: 560px) {
  /* iki sütuna düşen dizilimde etiketler uzun; sarmalarına izin ver */
  .hero-stat-label { white-space: normal; }
}


/* ===================================================================
   41. HİZMET KARTLARI — geniş ekranda tek sıra
   Beş hizmet 3+2 diziliyordu; masaüstünde tek sıraya alınır. Kart
   daraldığı için ikon şeridi, iç boşluk ve punto bir tık küçültülür.
   Dar ekranlarda beş sütun okunmaz olacağı için 3 → 2 → 1'e iner.
   =================================================================== */
@media (min-width: 1080px) {
  :is(#services-grid, #prensipler-grid) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 1.3vw, 1.7rem);
  }
  /* kart ölçüleri ekran genişliğiyle birlikte büyür */
  :is(#services-grid, #prensipler-grid) .service-icon {
    height: clamp(104px, 9.2vw, 185px);
    font-size: clamp(1.55rem, 1.9vw, 2.6rem);
  }
  :is(#services-grid, #prensipler-grid) .service-body {
    padding: clamp(1.2rem, 1.35vw, 1.85rem) clamp(1.15rem, 1.25vw, 1.7rem)
             clamp(1.15rem, 1.3vw, 1.7rem);
  }
  :is(#services-grid, #prensipler-grid) .service-body h3 {
    font-size: clamp(.98rem, 1.02vw, 1.34rem);
    margin-bottom: clamp(.55rem, .6vw, .85rem);
  }
  :is(#services-grid, #prensipler-grid) .service-body p {
    font-size: clamp(.82rem, .74vw, .97rem);
    line-height: 1.62;
  }
  :is(#services-grid, #prensipler-grid) .service-link {
    font-size: clamp(.76rem, .7vw, .88rem);
  }
}

/* Geniş ekranda 1320px'lik kapsayıcı bu bölüme dar geliyordu: kartlar
   233px'e düşüp sayfada kaybolmuş görünüyordu. Yalnızca hizmet ızgarası
   kapsayıcının dışına taşırılıp ortalanır. */
@media (min-width: 1500px) {
  :is(#services-grid, #prensipler-grid) {
    width: min(1680px, calc(100vw - 6rem));
    margin-left: 50%;
    transform: translateX(-50%);
    max-width: none;
  }
}

@media (min-width: 780px) and (max-width: 1079px) {
  :is(#services-grid, #prensipler-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 520px) and (max-width: 779px) {
  :is(#services-grid, #prensipler-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 519px) {
  :is(#services-grid, #prensipler-grid) { grid-template-columns: minmax(0, 1fr); }
}


/* ===================================================================
   43. HERO VİDEOSU — KARARTMA YAZIYI KAPSAMASIN
   -------------------------------------------------------------------
   Yeni hero videosunun kendi yazı animasyonu karenin ortasında
   (yaklaşık %40–%58 yüksekliğinde) akıyor. Bu yüzden video oynarken:

   • video tam parlaklıkta gösterilir (opaklık düşürülmez),
   • karartma yalnızca ÜSTTE (menü okunsun) ve ALTTA (sayaç şeridi
     okunsun) uygulanır; ortadaki geniş bant tamamen açık kalır.

   Video yoksa (durağan görsel) eski soldan sağa karartma geçerlidir.
   =================================================================== */
.hero-bg.video-var .hero-bg-video { opacity: 1; }

.hero-bg.video-var .hero-bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(18, 27, 36, .60) 0,
    rgba(18, 27, 36, .30) 8%,
    rgba(18, 27, 36, 0)  20%,
    rgba(18, 27, 36, 0)  70%,
    rgba(18, 27, 36, .34) 86%,
    rgba(18, 27, 36, .74) 100%
  );
}

/* Sayaç şeridi: ortadaki bant açıldığı için şeridin kendi zemini
   biraz koyulaştırılır, rakamlar aydınlık karelerde de okunur. */
.hero:has(.hero-bg.video-var) .hero-stats {
  background: rgba(18, 27, 36, .42);
  border-top-color: rgba(255, 255, 255, .14);
}

/* Videonun sesi yok; hareket azaltma tercihinde zaten gizleniyor. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg.video-var .hero-bg-overlay {
    background: linear-gradient(to right,
      rgba(26,37,48,.9) 0%, rgba(26,37,48,.3) 100%);
  }
}

/* Dar/uzun ekranlarda (telefon, tablet dikey) 16:9 video "cover" ile
   yanlardan çok kırpılıyor ve videonun kendi yazısı kesiliyordu.
   Bu oranların altında video kırpılmadan, ortada bant hâlinde gösterilir;
   üstü ve altı hero'nun kendi koyu zeminiyle dolar. */
@media (max-aspect-ratio: 17/20) {
  .hero-bg.video-var .hero-bg-video { object-fit: contain; }
  .hero-bg.video-var .hero-bg-overlay {
    background: linear-gradient(
      to bottom,
      rgba(18, 27, 36, .55) 0,
      rgba(18, 27, 36, .18) 12%,
      rgba(18, 27, 36, 0)  26%,
      rgba(18, 27, 36, 0)  74%,
      rgba(18, 27, 36, .30) 88%,
      rgba(18, 27, 36, .68) 100%
    );
  }
  /* Video akışta yer alan 16:9 bir bant olur; hero da bu bandın
     yüksekliğine göre kısalır. Böylece bandın üstünde altında koca
     boşluklar kalmaz: menü şeridi, video bandı, sayaçlar alt alta. */
  .hero:has(.hero-bg.video-var) {
    min-height: 0;
    background: linear-gradient(135deg, #1a2530 0%, var(--primary) 50%, var(--dark-navy) 100%);
  }
  .hero-bg.video-var {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .hero:has(.hero-bg.video-var) .hero-scroll { display: none; }
}

/* ===================================================================
   44. VİDEONUN ARKASINA KARARTMA — YAZI CANLI KALSIN
   -------------------------------------------------------------------
   Yazılar videonun içine gömülü olduğu için gerçek anlamda "yazıyla
   video arasına" katman koymak mümkün değil. Bunun yerine color-burn
   karışımı kullanılıyor: bu modda BEYAZ pikseller (yazının kendisi)
   olduğu gibi kalır, orta ve koyu tonlar (bina, gökyüzü, cam) belirgin
   şekilde koyulaşır. Sonuç: sahne geri çekilir, yazı öne çıkar.

   Karartmanın şiddeti aşağıdaki gri tonuyla ayarlanır:
     #e4e4e4 hafif · #d4d4d4 orta (seçili) · #c0c0c0 güçlü
   =================================================================== */
.hero-bg.video-var { isolation: isolate; }

/* color-burn doygunluğu yükselttiği için hafif bir denge */
.hero-bg.video-var .hero-bg-video { filter: saturate(.88); }

.hero-bg.video-var .hero-bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #d4d4d4;
  mix-blend-mode: color-burn;
}

/* Karışım modunu desteklemeyen tarayıcılarda düz bir perdeye düşülür. */
@supports not (mix-blend-mode: color-burn) {
  .hero-bg.video-var .hero-bg-overlay::before {
    background: rgba(18, 27, 36, .3);
  }
}

/* ===================================================================
   45. HAKKIMIZDA TANITIM BÖLÜMÜ
   -------------------------------------------------------------------
   Sade editoryal düzen: solda iki tonlu serif başlık, altında kısa bir
   ayraç çizgi ve rahat okunan iki paragraf; sağda tek bir görsel,
   arkasında hafifçe kaydırılmış açık renkli bir blok.
   Süs unsuru bilerek az tutuldu — boşluk ve tipografi taşıyor.
   =================================================================== */
.hk-tanitim {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
@media (min-width: 940px) {
  .hk-tanitim {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: clamp(3.5rem, 7vw, 7rem);
  }
}

/* ---- sol sütun ---- */
.hk-baslik {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(2.15rem, 3.9vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
  /* ayraç çizgi kaldırıldı; başlıkla metin arasındaki nefes buradan */
  margin: 0 0 clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.015em;
}
.hk-baslik em {
  font-style: normal;
  color: var(--mid-blue);
}


.hk-metin > p {
  margin: 0 0 1.25rem;
  max-width: 54ch;
}
.hk-giris {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.85;
  color: var(--text-main);
}
.hk-alt {
  font-size: clamp(.94rem, 1vw, 1.02rem);
  line-height: 1.9;
  color: var(--text-muted);
}

.hk-baglanti {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  padding-bottom: .4rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  border-bottom: 1px solid rgba(50, 62, 72, .2);
  transition: color .3s ease, border-color .3s ease;
}
.hk-baglanti i { font-size: .8em; transition: transform .3s ease; }
.hk-baglanti:hover { color: var(--mid-blue); border-color: var(--mid-blue); }
.hk-baglanti:hover i { transform: translateX(5px); }

/* ---- sağ sütun: tek görsel ---- */
.hk-gorsel {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 70px rgba(50, 62, 72, .18);
  background: var(--light-bg);
}
.hk-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.hk-gorsel:hover img { transform: scale(1.06); }

/* görselin arkasında, sağ alta doğru kaydırılmış açık blok */
@media (min-width: 940px) {
  .hk-gorsel { overflow: visible; }
  .hk-gorsel img {
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 1;
  }
  .hk-gorsel::before {
    content: "";
    position: absolute;
    right: clamp(-34px, -2.4vw, -20px);
    bottom: clamp(-34px, -2.4vw, -20px);
    width: 62%;
    height: 66%;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(112,143,163,.16), rgba(112,143,163,.07));
    z-index: 0;
  }
  .hk-tanitim { margin-bottom: clamp(5.5rem, 10vw, 9rem); }
}

/* ===================================================================
   46. HİZMET KARTI ÜZERİNE GELİNCE ARKA PLAN GÖRSELİ
   -------------------------------------------------------------------
   hizmetfon.js, hizmet kartlarının bulunduğu bölüme .hizmet-fon
   katmanını ekler. İmleç bir karta geldiğinde o hizmetin görseli
   yumuşak bir geçişle belirir.

   Okunabilirlik: görselin üzerinde açık renkli radyal bir perde var —
   ortada (başlık ve alt metnin olduğu yerde) daha kapalı, kenarlara
   doğru açılıyor. Böylece görsel hissedilir ama metin bozulmaz.
   =================================================================== */
.hizmet-fonlu { position: relative; overflow: hidden; }
.hizmet-fonlu > .container { position: relative; z-index: 1; }

.hizmet-fon {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hizmet-fon-kare {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.07);
  filter: saturate(.82);
  transition: opacity .55s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.hizmet-fon-kare.etkin {
  opacity: .78;
  transform: scale(1);
}

/* açık perde — bölümün kendi zemin rengiyle aynı tonda */
.hizmet-fon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 92% at 50% 38%,
      rgba(239, 241, 244, .90) 0%,
      rgba(239, 241, 244, .74) 40%,
      rgba(239, 241, 244, .44) 72%,
      rgba(239, 241, 244, .30) 100%),
    linear-gradient(to bottom,
      rgba(239, 241, 244, .85) 0%,
      rgba(239, 241, 244, 0) 14%,
      rgba(239, 241, 244, 0) 86%,
      rgba(239, 241, 244, .85) 100%);
}
/* beyaz zeminli bölümlerde (Hizmetlerimiz sayfası) perde de beyaz olur */
.bg-white.hizmet-fonlu .hizmet-fon::after {
  background:
    radial-gradient(120% 92% at 50% 38%,
      rgba(255, 255, 255, .92) 0%,
      rgba(255, 255, 255, .78) 40%,
      rgba(255, 255, 255, .48) 72%,
      rgba(255, 255, 255, .34) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, .88) 0%,
      rgba(255, 255, 255, 0) 14%,
      rgba(255, 255, 255, 0) 86%,
      rgba(255, 255, 255, .88) 100%);
}

/* görsel açıkken kartlar zeminden biraz daha ayrışsın */
.hizmet-fonlu .service-card {
  transition: box-shadow .5s ease, transform .35s cubic-bezier(.4, 0, .2, 1),
              background-color .5s ease;
}
.hizmet-fonlu.fon-etkin .service-card {
  box-shadow: 0 14px 40px rgba(50, 62, 72, .13);
}

/* dokunmatik cihaz ya da hareket azaltma: katman hiç kurulmaz,
   yine de bir şekilde oluşursa görünmesin */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hizmet-fon { display: none; }
}

/* ===================================================================
   47. VİTRİN — KARTLAR MERKEZÎ BİR EKSENDE DÖNER
   -------------------------------------------------------------------
   Kartlar düz kaymak yerine, ortadan geçen dikey bir eksende dönüyormuş
   gibi görünür: ortadaki kart tam karşıya bakar, yandakiler kendi
   ekseninde içe döner. Perspektif pencerede tanımlı olduğu için tüm
   şerit aynı bakış noktasını paylaşır — kartlar tek bir silindirin
   yüzeyinde gibi okunur.

   Açı ve derinlik, üç kart pencereye tam otururken kenarda yarım kart
   görünmeyecek şekilde seçildi (1100px ve 1440px'te doğrulandı).
   Daha yumuşak bir his için --vitrin-aci 22deg yapılabilir.
   =================================================================== */
.vitrin {
  --vitrin-aci: 38deg;
  --vitrin-derinlik: -30px;
  --vitrin-yan-olcek: .95;
}

.vitrin-pencere {
  perspective: 1150px;
  perspective-origin: 50% 50%;
}
.vitrin-ray { transform-style: preserve-3d; }

.vitrin-oge {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.vitrin-oge.sol {
  transform: translateZ(var(--vitrin-derinlik))
             rotateY(var(--vitrin-aci))
             scale(var(--vitrin-yan-olcek));
}
.vitrin-oge.sag {
  transform: translateZ(var(--vitrin-derinlik))
             rotateY(calc(-1 * var(--vitrin-aci)))
             scale(var(--vitrin-yan-olcek));
}
.vitrin-oge.etkin {
  transform: translateZ(0) rotateY(0deg) scale(1);
}

/* Tek kart kipinde (dar ekran) pencere zaten kartın genişliğine kısılıyor;
   3B derinlik burada kazanç sağlamadığı gibi komşuların kenardan sızma
   riskini doğurur — kapatılır. */
.vitrin.vitrin-tek .vitrin-pencere { perspective: none; }
.vitrin.vitrin-tek .vitrin-oge.sol,
.vitrin.vitrin-tek .vitrin-oge.sag {
  transform: scale(var(--vitrin-yan-olcek));
}

/* ===================================================================
   48. PROJE DETAY SAYFASINDA PROJE LOGOSU
   veri.js'teki "logo" alanı dolu olan projelerde, ana görselin üstünde
   projenin kendi kimliği gösterilir. Alan boşsa hiçbir şey basılmaz.
   =================================================================== */
.proje-logo {
  display: flex;
  align-items: center;
  min-height: clamp(52px, 6vw, 76px);
  margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}
.proje-logo img {
  height: clamp(40px, 4.6vw, 60px);
  width: auto;
  max-width: min(100%, 300px);
  object-fit: contain;
  display: block;
}

/* ===================================================================
   49. REFERANS IZGARASI 4'LÜ + "COMING SOON" ROZETİ
   -------------------------------------------------------------------
   Referans projeler tamamlanmış işler; vitrin niteliğinde olduğu için
   geniş ekranda dörtlü diziliyor. Aktif projeler ikili kalıyor —
   satıştaki projelerin render'ları büyük görünsün diye.

   Rozet: veri.js'te "status" alanına "Yakında" yazılan projelerde
   görselin köşesinde belirir. Alan boşsa hiçbir şey basılmaz.
   =================================================================== */
@media (min-width: 900px) {
  #reference-projects-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
  #reference-projects-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(2.4rem, 3.4vw, 3.4rem) clamp(1.4rem, 2.2vw, 2.2rem);
  }
}
/* dörtlü dizilimde başlık ve künye tipografisi bir tık küçülür */
@media (min-width: 1180px) {
  #reference-projects-grid .project-card-body h3 { font-size: clamp(1rem, 1.15vw, 1.2rem); }
  #reference-projects-grid .project-footer { font-size: .78rem; }
}

.project-card-img,
.proje-gorsel { position: relative; }

.proje-yakinda {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: .42rem .8rem;
  border-radius: 999px;
  background: rgba(18, 27, 36, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  /* metin zaten büyük harf yazıldı; text-transform kullanılsaydı
     sayfa lang="tr" olduğu için "Coming" -> "COMİNG" olurdu */
  white-space: nowrap;
  pointer-events: none;
}
.proje-gorsel .proje-yakinda {
  top: clamp(1rem, 2vw, 1.6rem);
  right: clamp(1rem, 2vw, 1.6rem);
  font-size: .74rem;
  padding: .5rem 1rem;
}

/* ===================================================================
   50. ANA SAYFA — BAŞLIK ÇİZGİSİ, ARKA PLAN HAREKETİ, GRUP KARTLARI
   =================================================================== */

/* ---- 50a. "Aktif Projelerimiz" solundaki dikey çizgi kaldırıldı ---- */
.binghatti-border {
  border-left: 0;
  padding-left: 0;
  margin-bottom: 0;
}

/* ---- 50b. Bölüm arka planında yavaş hareket -----------------------
   Sayfa fazla durgun kalmasın diye bölümlerin arkasında çok yumuşak,
   yavaş sürüklenen ışık lekeleri ve hafifçe kayan bir ızgara var.
   Yalnızca transform ve opacity animasyonu kullanıldı (GPU'da çalışır,
   sayfayı yormaz). Hareket azaltma tercihinde tamamen durur.        */
.binghatti-grid-bg {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Izgara çizgileri kaldırıldı — yalnızca yumuşak ışık lekeleri kaldı.
     (Sayfanın kendi stilinde tanımlı desen bu satırla iptal ediliyor.) */
  background-image: none;
}
/* içerik her zaman katmanın üstünde kalsın */
.binghatti-grid-bg ~ .container { position: relative; z-index: 1; }

/* hero'da gerek yok: orada zaten video akıyor */
.hero .binghatti-grid-bg { display: none !important; }

/* Dört yumuşak ışık lekesi, iki katmanda taşınıyor -----------------
   Her katman iki ayrı radyal ışık taşıyor; katmanlar farklı hızda ve
   ters yönde sürükleniyor. Böylece zemin durgun kalmıyor ama hareket
   göze batmıyor: bir tam tur 34 ve 46 saniye sürüyor.
   Yalnızca transform ve opacity canlandırılıyor — ekran kartında
   çalışır, kaydırma performansını etkilemez.                        */
.binghatti-grid-bg::before,
.binghatti-grid-bg::after {
  content: "";
  position: absolute;
  filter: blur(70px);
  will-change: transform, opacity;
}
.binghatti-grid-bg::before {
  width: 74vw; height: 74vw;
  max-width: 1100px; max-height: 1100px;
  top: -26%; left: -16%;
  background:
    radial-gradient(circle at 32% 34%, rgba(112,143,163,.34), rgba(112,143,163,0) 56%),
    radial-gradient(circle at 76% 72%, rgba(48,74,92,.20),  rgba(48,74,92,0)  60%);
  animation: ar-leke-1 34s ease-in-out infinite;
}
.binghatti-grid-bg::after {
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  bottom: -28%; right: -14%;
  background:
    radial-gradient(circle at 68% 40%, rgba(142,176,196,.30), rgba(142,176,196,0) 58%),
    radial-gradient(circle at 26% 76%, rgba(112,143,163,.22), rgba(112,143,163,0) 62%);
  animation: ar-leke-2 46s ease-in-out infinite;
}

/* koyu zeminli bölümde (Grup Şirketlerimiz) lekeler biraz daha görünür */
.bg-primary .binghatti-grid-bg::before {
  background:
    radial-gradient(circle at 32% 34%, rgba(142,176,196,.26), rgba(142,176,196,0) 56%),
    radial-gradient(circle at 76% 72%, rgba(112,143,163,.18), rgba(112,143,163,0) 60%);
}
.bg-primary .binghatti-grid-bg::after {
  background:
    radial-gradient(circle at 68% 40%, rgba(142,176,196,.22), rgba(142,176,196,0) 58%),
    radial-gradient(circle at 26% 76%, rgba(90,120,140,.20),  rgba(90,120,140,0)  62%);
}

@keyframes ar-leke-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: .85; }
  50%  { transform: translate3d(11vw, 7vh, 0) scale(1.16); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1);      opacity: .85; }
}
@keyframes ar-leke-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.1);    opacity: 1; }
  50%  { transform: translate3d(-9vw, -8vh, 0) scale(1); opacity: .8; }
  100% { transform: translate3d(0, 0, 0) scale(1.1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .binghatti-grid-bg::before,
  .binghatti-grid-bg::after { animation: none; }
}

/* ---- 50c. Grup kartları: hizmetler simetrik hizalansın -----------
   Kartlar ızgarada aynı yüksekliğe geriliyor. Gövde esnek kolon
   yapılıp açıklama paragrafı boşluğu doldurunca, hizmet etiketleri ve
   alttaki bağlantı dört kartta da AYNI hizada başlıyor. Etiketler tek
   sütuna dizildiği için üçü de aynı yüksekliği kaplıyor.            */
.group-company-card {
  display: flex;
  flex-direction: column;
}
.group-company-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.group-company-body p { flex: 1 1 auto; }

.group-company-tags {
  display: grid;
  grid-template-columns: 1fr;
  gap: .42rem;
  margin-top: 1.4rem;
}
.group-company-tags span {
  justify-self: start;
  white-space: nowrap;
}

.group-company-footer {
  margin-top: auto;
  justify-content: flex-start;
}

/* ===================================================================
   51. PROJE ADI ŞERİDİ — AYRAÇ VE HIZ
   -------------------------------------------------------------------
   Ayraç eskiden dört köşeli bir yıldız (✦) idi; başka bir markanın
   simgesine benzediği için yerine CSS ile çizilen küçük yuvarlak bir
   nokta konuldu. Glif yerine kutu kullanıldığı için yazı tipi ne
   olursa olsun tam yuvarlak ve aynı boyutta kalır.
   =================================================================== */
.marquee-item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  flex: 0 0 auto;
  font-size: 0;
}

/* İsimler markupta zaten büyük harf yazılı; dönüşüm kapatıldı ki
   sayfa lang="tr" olduğu için "RESIDENCE" -> "RESİDENCE" olmasın. */
.marquee-item { text-transform: none; }

/* 8 isimden 31'e çıktı: şerit çok uzadığı için süre de uzatıldı,
   böylece akış hızı (~90 piksel/saniye) eskisiyle aynı kalıyor. */
.marquee-content { animation-duration: 150s; }

/* ===================================================================
   52. KVKK AYDINLATMA METNİ — FORM UYARISI VE OKUMA PENCERESİ
   -------------------------------------------------------------------
   Metnin kendisi kvkk.js dosyasındadır; burada yalnızca görünümü var.
   - .kvkk-uyari : iletişim formundaki kısa bilgilendirme kutusu
   - .kvkk-ortu  : tam metnin açıldığı pencere (kvkk.js üretir)
   =================================================================== */

/* ---- 52a. Formdaki kısa uyarı kutusu ---- */
.kvkk-uyari {
  border: 1px solid rgba(50, 62, 72, .14);
  border-left: 3px solid var(--mid-blue);
  border-radius: var(--radius-sm);
  background: rgba(112, 143, 163, .06);
  padding: .95rem 1.05rem;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.kvkk-uyari strong { color: var(--primary); font-weight: 600; }
.kvkk-uyari a,
.kvkk-baglanti {
  color: var(--mid-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}
.kvkk-uyari a:hover,
.kvkk-baglanti:hover { color: var(--primary); }

/* ---- 52b. Onay kutusu satırı ---- */
.kvkk-onay {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.kvkk-onay input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: .18rem;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--mid-blue);
}
.kvkk-onay label {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}

/* ---- 52c. Tam metin penceresi ---- */
body.kvkk-acik { overflow: hidden; }

/* display:flex, tarayıcının [hidden] kuralını ezer; pencere kapalıyken
   görünmez bir katman olarak sayfanın üstünde kalır ve tıklamaları
   yutardı. Bu satır onu kesin olarak kapatır. */
.kvkk-ortu[hidden] { display: none !important; }

.kvkk-ortu {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(24, 34, 42, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: kvkk-belir .22s ease both;
}
@keyframes kvkk-belir { from { opacity: 0; } to { opacity: 1; } }

.kvkk-kutu {
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(20, 30, 40, .35);
  overflow: hidden;
  animation: kvkk-yuksel .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes kvkk-yuksel {
  from { transform: translateY(18px) scale(.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.kvkk-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgba(50, 62, 72, .1);
  background: var(--light-bg);
}
.kvkk-ust h2 {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--primary);
  margin: 0;
  letter-spacing: -.01em;
}
.kvkk-kapat {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(50, 62, 72, .07);
  color: var(--primary);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.kvkk-kapat:hover { background: rgba(50, 62, 72, .14); }

.kvkk-govde {
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  font-size: .875rem;
  line-height: 1.75;
  color: var(--text-muted);
  -webkit-overflow-scrolling: touch;
}
.kvkk-govde:focus { outline: none; }
.kvkk-govde p { margin: 0 0 .95rem; }
.kvkk-govde h3 {
  font-size: .95rem;
  color: var(--primary);
  margin: 1.7rem 0 .6rem;
  letter-spacing: -.005em;
}
.kvkk-govde h3:first-child { margin-top: 0; }
.kvkk-govde h4 {
  font-size: .85rem;
  color: var(--primary);
  margin: 1.3rem 0 .5rem;
  padding-left: .7rem;
  border-left: 2px solid var(--mid-blue);
}
.kvkk-govde ul { margin: 0 0 .95rem; padding-left: 1.1rem; }
.kvkk-govde li {
  position: relative;
  margin-bottom: .4rem;
  padding-left: .85rem;
  list-style: none;
}
.kvkk-govde li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mid-blue);
  opacity: .55;
}
.kvkk-govde a { color: var(--mid-blue); text-decoration: underline; }
.kvkk-kunye {
  margin-top: 1.8rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--light-bg);
  font-size: .82rem;
}
.kvkk-kunye p { margin: 0 0 .35rem; }
.kvkk-kunye p:last-child { margin: 0; }

.kvkk-alt {
  padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(50, 62, 72, .1);
  text-align: right;
  background: var(--light-bg);
}
.kvkk-tamam {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  padding: .7rem 1.5rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.kvkk-tamam:hover { background: var(--mid-blue); }

@media (prefers-reduced-motion: reduce) {
  .kvkk-ortu, .kvkk-kutu { animation: none; }
}

/* ===================================================================
   53. TİPOGRAFİ — TEK AİLE: OUTFIT
   -------------------------------------------------------------------
   Tırnaklı (serif) Playfair Display kaldırıldı; site baştan sona
   OUTFIT ile yazılıyor. Outfit, Gilroy'un geometrik yapısına en yakın
   AÇIK LİSANSLI (SIL Open Font License 1.1) alternatiftir: ticari
   kullanım, gömme ve dağıtım serbesttir, telif ücreti yoktur.

   Başlıklar ile gövde aynı aileden olduğu için ayrım artık font
   değişimiyle değil, AĞIRLIK ve HARF ARALIĞI ile kuruluyor:
     - başlık ağırlığı 700, harf aralığı sıkı (-0.02 … -0.035em)
     - gövde ağırlığı 400, harf aralığı doğal

   Ayrıca geometrik bir sans, aynı punto değerinde tırnaklı bir
   yazıdan optik olarak daha iri görünür; başlık boyutları bu yüzden
   bir tık aşağı çekildi.
   =================================================================== */

body,
input, select, textarea, button {
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---- 53a. Büyük başlıklar: sıkı aralık, bir tık küçük punto ---- */
.hero-title {
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.hero-title em { font-style: normal; font-weight: 700; }

.section-title,
.page-hero h1,
.cta-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
}

/* ---- 53b. Orta ve küçük başlıklar ---- */
h3, h4, h5, h6 { letter-spacing: -.015em; }
.project-card-body h3,
.service-card h3,
.group-company-card h3 { font-weight: 600; letter-spacing: -.015em; }

/* ---- 53c. Üst menü ve düğmeler: geometrik yazıda hafif açık aralık
       daha okunaklı durur ---- */
.nav-links a,
.btn,
.footer-col h4, .footer-col h3 { letter-spacing: .005em; }

/* ---- 53d. Hakkımızda bölümü başlığı ---- */
.hk-baslik {
  font-weight: 700;
  letter-spacing: -.03em;
}

/* ---- 53e. İnce ağırlıkların ekranda kaybolmaması için ---- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===================================================================
   54. ÇEREZ ONAYI — ALT ŞERİT, AYAR PANELİ, HARİTA PERDESİ
   -------------------------------------------------------------------
   Mantık cerez.js dosyasındadır; burada yalnızca görünüm var.
   Ayar paneli ve politika penceresi §52'deki KVKK penceresiyle aynı
   kabuğu kullanır (.kvkk-ortu / .kvkk-kutu), böylece iki pencere
   birbirinin aynısı görünür.
   =================================================================== */

/* ---- 54a. Alt şerit ---- */
.cerez-serit {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 11500;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
  background: var(--white);
  border-top: 1px solid rgba(50, 62, 72, .12);
  box-shadow: 0 -12px 40px rgba(20, 30, 40, .12);
}
.cerez-serit.acik { transform: none; }

.cerez-serit-ic {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.cerez-serit-metin {
  flex: 1 1 auto;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.cerez-serit-metin strong { color: var(--primary); font-weight: 600; }

.cerez-metin-bag {
  background: none; border: 0; padding: 0;
  font: inherit;
  color: var(--mid-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cerez-metin-bag:hover { color: var(--primary); }

.cerez-serit-dugmeler {
  flex: 0 0 auto;
  display: flex;
  gap: .6rem;
}
.cerez-dugme {
  border: 1px solid rgba(50, 62, 72, .2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  padding: .65rem 1.15rem;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.cerez-dugme:hover { border-color: var(--primary); background: rgba(50, 62, 72, .05); }
.cerez-kabul {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.cerez-kabul:hover { background: var(--mid-blue); border-color: var(--mid-blue); color: var(--white); }

@media (max-width: 880px) {
  .cerez-serit-ic { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.1rem 1.25rem; }
  .cerez-serit-dugmeler { flex-wrap: wrap; }
  .cerez-serit-dugmeler .cerez-dugme { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cerez-serit { transition: none; }
}

/* ---- 54b. Ayar paneli satırları ---- */
.cerez-kutu .kvkk-govde > p:first-child { margin-bottom: 1.4rem; }

.cerez-satir {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(50, 62, 72, .1);
}
.cerez-satir-baslik {
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 .25rem;
}
.cerez-satir-aciklama { margin: 0; font-size: .82rem; line-height: 1.6; }
.cerez-rozet {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(112, 143, 163, .16);
  color: var(--mid-blue);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
}

/* açma-kapama anahtarı */
.cerez-anahtar { flex: 0 0 auto; position: relative; margin-top: .15rem; cursor: pointer; }
.cerez-anahtar input {
  position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer;
}
.cerez-anahtar-govde {
  display: block;
  width: 44px; height: 24px;
  border-radius: 999px;
  background: rgba(50, 62, 72, .22);
  transition: background .2s ease;
}
.cerez-anahtar-govde::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.cerez-anahtar input:checked ~ .cerez-anahtar-govde { background: var(--mid-blue); }
.cerez-anahtar input:checked ~ .cerez-anahtar-govde::after { transform: translateX(20px); }
.cerez-anahtar input:disabled ~ .cerez-anahtar-govde { background: rgba(112, 143, 163, .45); }
.cerez-anahtar input:disabled { cursor: not-allowed; }
.cerez-anahtar input:focus-visible ~ .cerez-anahtar-govde {
  outline: 2px solid var(--mid-blue); outline-offset: 3px;
}

.cerez-politika-bag { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(50,62,72,.1); }
.cerez-alt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* ---- 54c. Harita perdesi (izin verilmeden harita yüklenmez) ---- */
[data-harita-src] { position: relative; }
.harita-perde {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  height: 100%;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(112,143,163,.14), rgba(112,143,163,0) 60%),
    var(--light-bg);
  border: 1px dashed rgba(50, 62, 72, .22);
  border-radius: var(--radius-md, 12px);
}
.harita-perde-ic { max-width: 380px; text-align: center; }
.harita-perde-baslik {
  font-size: .95rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 .4rem;
  letter-spacing: -.01em;
}
.harita-perde-metin {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}
.harita-yukle {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  padding: .7rem 1.4rem;
  font-family: inherit;
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.harita-yukle:hover { background: var(--mid-blue); }
.harita-yol {
  display: block;
  margin-top: .85rem;
  font-size: .78rem;
  color: var(--mid-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.harita-yol:hover { color: var(--primary); }
.harita-yuklendi { display: block; }
.harita-yuklendi iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }

/* ===================================================================
   55. TİPOGRAFİ — İNCE VE SEYREK
   -------------------------------------------------------------------
   §53'te site tek yazı ailesine (Outfit) geçti ama her başlık hâlâ
   600–700 ağırlıktaydı. Kalın harf "güçlü" değil "yüksek sesli"
   durur; lüks markalarda büyük başlıklar İNCE yazılır ve gücünü
   puntodan, boşluktan ve sıkı harf aralığından alır.

   Kural:
     - 2 rem üstü her başlık    -> 300 (ince). Punto biraz büyütüldü,
                                   çünkü ince harf optik olarak küçülür.
     - kart başlıkları, ara     -> 500 (orta)
     - etiket, düğme, menü      -> 600 kalır. Küçük puntoda ince harf
                                   okunmaz; kalınlık BURAYA aittir.

   text-wrap: balance -> başlığın son satırında tek kelime kalmasını
   engeller. Tek satırlık ayar, dizgiyi gözle görülür biçimde düzeltir.
   =================================================================== */

:root {
  --ag-ince:  300;
  --ag-orta:  500;
  --ag-vurgu: 600;
}

/* ---- 55a. Büyük başlıklar ---- */
.hero-title {
  font-weight: var(--ag-ince);
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.hero-title em { font-style: normal; font-weight: var(--ag-orta); }

.section-title,
.page-hero h1,
.hk-baslik {
  font-weight: var(--ag-ince);
  font-size: clamp(2.1rem, 4.1vw, 3.4rem);
  letter-spacing: -.032em;
  line-height: 1.08;
  text-wrap: balance;
}

/* ana sayfadaki kapanış başlığı satır içi punto taşıyor; onu da hizala */
.section-title[style*="font-size"] { font-weight: var(--ag-ince); letter-spacing: -.032em; }

/* ---- 55b. Sayaçlar: sitenin en iri rakamları, en ince ağırlıkta ---- */
.hero-stat-num,
.hero-stat-num .counter,
.about-counter,
.stat-number,
.counter {
  font-weight: var(--ag-ince);
  letter-spacing: -.03em;
}
.hero-stat-num { font-size: clamp(2rem, 3.4vw, 3rem); }

/* rakamın altındaki etiket: küçük, kalın, geniş aralıklı — zıtlık buradan */
.hero-stat-label,
.stat-label {
  font-weight: var(--ag-vurgu);
  font-size: .7rem;
  letter-spacing: .14em;
}

/* ---- 55c. Orta ölçek: kart başlıkları ---- */
.project-card-body h3,
.service-card h3,
.group-company-card h3,
.team-card h3,
.contact-info-text h4,
.contact-info-text h3,
.footer-col h4, .footer-col h3 {
  font-weight: var(--ag-orta);
  letter-spacing: -.012em;
}

/* ---- 55d. Küçük ölçek kalın kalır (okunabilirlik) ---- */
.btn, .nav-links a, .nav-contact,
.section-eyebrow, .project-loc, .proje-yakinda,
.filter-btn, .form-group label { font-weight: var(--ag-vurgu); }

/* ---- 55e. Gövde metni: dul satır ve kötü kırılma engellenir ---- */
p, li { text-wrap: pretty; }
.section-subtitle, .hero-desc, .about-text p {
  font-weight: 400;
  line-height: 1.75;
}

/* ===================================================================
   56. HAREKET DİSİPLİNİ
   -------------------------------------------------------------------
   Sitede sekiz ayrı hızlanma eğrisi vardı (cubic-bezier). Her biri
   kendi başına makul ama bir arada "her öğe kendi kafasına göre
   hareket ediyor" hissi veriyordu. Pahalı görünen arayüzlerin ortak
   özelliği hareketin ÇOK OLMASI değil, hepsinin AYNI FİZİĞE uymasıdır.

   Tek eğri: --eg  (yumuşak duruş — hızlı çıkar, usulca yerleşir)
   Tek çıkış eğrisi: --eg-cikis (kapanma, gizlenme)

   Ayrıca:
     - Belirme süresi .62s -> .95s. Yavaş hareket sakin, hızlı hareket
       telaşlı okunur.
     - Görseller artık soluklanarak değil PERDE ile açılıyor (clip-path
       aşağı doğru açılır). Soluklanma ucuz, perde pahalı durur.
     - İmleç etkileri sertliğini kaybetti: kart 7px yerine 4px kalkıyor,
       görsel %6 yerine %3,5 yakınlaşıyor, gölge daha yumuşak.
   =================================================================== */

:root {
  --eg:       cubic-bezier(.16, 1, .3, 1);
  --eg-cikis: cubic-bezier(.4, 0, .2, 1);
  --sure-kisa: .4s;
  --sure-orta: .7s;
  --sure-uzun: .95s;
  /* sayfalardaki satır içi stiller bu değişkeni kullanıyor:
     tek satırda hepsini aynı fiziğe bağlıyoruz */
  --transition: all var(--sure-kisa) var(--eg);
}

/* ---- 56a. Belirme: daha yavaş, daha az yol ---- */
[data-ar] {
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--sure-uzun) var(--eg),
              transform var(--sure-uzun) var(--eg);
  transition-delay: var(--ar-delay, 0ms);
}
[data-ar="sol"]  { transform: translate3d(-18px, 0, 0); }
[data-ar="sag"]  { transform: translate3d(18px, 0, 0); }
[data-ar="olcek"]{ transform: scale(.975); }

/* ---- 56b. Görsel perdesi ---------------------------------------
   Kart görünür alana girene kadar görseli aşağıdan yukarı açılan bir
   perde kapatır; aynı anda görsel hafifçe geri çekilir. İki hareket
   birlikte "açılıyor" hissi verir. Perde açıldıktan sonra kural
   düşer, imleç etkisi normal çalışır.                              */
.project-card .project-card-img,
.project-card .project-img,
.service-card .service-card-img,
.team-card .team-card-img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--eg);
  transition-delay: calc(var(--ar-delay, 0ms) + 80ms);
}
[data-ar]:not(.ar-in) .project-card-img,
[data-ar]:not(.ar-in) .project-img,
[data-ar]:not(.ar-in) .service-card-img,
[data-ar]:not(.ar-in) .team-card-img { clip-path: inset(0 0 100% 0); }

[data-ar]:not(.ar-in) .project-card-img img,
[data-ar]:not(.ar-in) .project-img img,
[data-ar]:not(.ar-in) .team-card-img img { transform: scale(1.07); }

/* ---- 56c. İmleç etkileri: sakin ---- */
.project-card, .service-card, .team-card, .group-card, .group-company-card {
  transition: transform var(--sure-orta) var(--eg),
              box-shadow var(--sure-orta) var(--eg);
}
@media (hover: hover) {
  .project-card:hover, .service-card:hover, .team-card:hover,
  .group-card:hover, .group-company-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(50, 62, 72, .13);
  }
  .project-card:hover .project-card-img img,
  .project-card:hover .project-img img,
  .project-card:hover img { transform: scale(1.035); }
}
.project-card img, .project-img img, .project-card-img img {
  transition: transform 1.1s var(--eg);
}

/* düğmeler ve bağlantılar da aynı fiziğe uyar */
.btn, .nav-links a, .nav-contact, .filter-btn,
.footer-links a, .footer-social a, .vitrin-ok {
  transition: all var(--sure-kisa) var(--eg);
}
.btn:active, .project-card:active, .service-card:active { transform: scale(.99); }

/* ---- 56d. Hareket azaltma tercihi: her şey anında ---- */
@media (prefers-reduced-motion: reduce) {
  .project-card .project-card-img,
  .project-card .project-img,
  .service-card .service-card-img,
  .team-card .team-card-img { clip-path: none !important; transition: none !important; }
  [data-ar]:not(.ar-in) img { transform: none !important; }
}

/* ===================================================================
   57. DETAY İŞÇİLİĞİ
   -------------------------------------------------------------------
   Tek tek kimsenin fark etmediği, toplamı "burada birileri düşünmüş"
   hissi veren şeyler.
   =================================================================== */

/* ---- 57a. Metin seçimi: tarayıcının mavisi yerine marka rengi ---- */
::selection      { background: var(--primary); color: var(--white); }
::-moz-selection { background: var(--primary); color: var(--white); }
.bg-primary ::selection,
.footer ::selection { background: var(--white); color: var(--primary); }

/* ---- 57b. Klavye odağı: her yerde aynı halka ---------------------
   Fareyle tıklayanda görünmez (:focus-visible), klavyeyle gezenlerde
   her öğede birebir aynı. Erişilebilirliğin en görünür işareti. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mid-blue);
  outline-offset: 3px;
  border-radius: 3px;
}
input, textarea, select { caret-color: var(--mid-blue); }

/* ---- 57c. Bağlantı hedefleri sabit menünün altında kalmasın ---- */
:target, [id] { scroll-margin-top: 96px; }

/* ---- 57d. Görsel yüklenirken boş beyaz yerine zemin tonu ---- */
.project-card-img, .project-img, .team-card-img { background: var(--light-bg); }

/* ---- 57e. Açılış koreografisi -----------------------------------
   Ön yükleme perdesi kaybolurken hero içeriği hazır beklemiyor;
   perdenin ardından SIRAYLA yerleşiyor. Bir buçuk saniyelik bu sıra,
   sayfanın "yüklendi" değil "açıldı" hissi vermesini sağlıyor.     */
body.ar-acilis .hero-stats,
body.ar-acilis .hero-scroll,
body.ar-acilis .page-hero .container,
body.ar-acilis .navbar {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
body.ar-acildi .navbar,
body.ar-acildi .hero-stats,
body.ar-acildi .page-hero .container,
body.ar-acildi .hero-scroll {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--eg), transform .9s var(--eg);
}
body.ar-acildi .navbar      { transition-delay: 60ms; }
body.ar-acildi .page-hero .container { transition-delay: 220ms; }
body.ar-acildi .hero-scroll { transition-delay: 340ms; }
body.ar-acildi .hero-stats  { transition-delay: 480ms; }

#preloader { transition: opacity .7s var(--eg-cikis), visibility .7s var(--eg-cikis); }

@media (prefers-reduced-motion: reduce) {
  body.ar-acilis .hero-stats,
  body.ar-acilis .hero-scroll,
  body.ar-acilis .page-hero .container,
  body.ar-acilis .navbar { opacity: 1 !important; transform: none !important; }
}

/* ---- 57f. 404 sayfası ---- */
.ar-404 {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem;
  position: relative;
  overflow: hidden;
}
.ar-404-ic { max-width: 620px; position: relative; z-index: 1; }
/* "404" bir başlık değil, arkada duran bir filigran. Metnin üstüne
   binmesin diye mutlak konumlandırıldı ve iyice soluklaştırıldı. */
.ar-404-kod {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 0;
  font-size: clamp(9rem, 30vw, 24rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--primary);
  opacity: .055;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.ar-404-baslik {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: var(--ag-ince);
  letter-spacing: -.03em;
  color: var(--primary);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.ar-404-metin {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 auto 2.4rem;
  max-width: 460px;
}
.ar-404-baglar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}

/* ===================================================================
   58. BULANIK PROJE GÖRSELİ
   -------------------------------------------------------------------
   Henüz duyurulmamış projelerde görsel bilerek bulanık gösterilir.
   veri.js'te o projenin kaydında  bulanik: true  yazar; kart şablonu
   görsel kutusuna .proje-bulanik sınıfını ekler.

   Bulanıklık görselin KENDİSİNE uygulanır, kutuya değil — böylece
   kenarlarda şeffaflaşma olmaz. Görsel biraz büyütülüyor ki bulanıklık
   kenarlardan içeri boşluk bırakmasın. Üstünde ince bir aydınlatma
   perdesi var: bulanık fotoğraf tek başına "yüklenememiş görsel" gibi
   durabiliyor, perde ona kasıtlı bir doku hissi veriyor.
   =================================================================== */
.proje-bulanik { position: relative; overflow: hidden; }

.proje-bulanik img {
  filter: blur(14px) saturate(1.05);
  transform: scale(1.14);
  transition: filter 1.1s var(--eg), transform 1.1s var(--eg);
}
@media (hover: hover) {
  /* imleçle hafifçe netleşir — ama asla tam netleşmez */
  .project-card:hover .proje-bulanik img {
    filter: blur(10px) saturate(1.08);
    transform: scale(1.16);
  }
}

.proje-bulanik::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(50, 62, 72, .10) 0%, rgba(50, 62, 72, .30) 100%),
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .proje-bulanik img { transition: none; }
}

/* ---- 58a. Vitrin (ana sayfa karuseli) ile birlikte çalışma --------
   Karusel, ortadaki kart dışındakilere gri filtre uygular. İki kural
   aynı özelliği (filter) hedeflediği için bulanıklık eziliyordu.
   Burada ikisi TEK bildirimde birleştiriliyor: bulanık proje karuselin
   neresinde olursa olsun bulanık kalır.                              */
.vitrin-oge .proje-bulanik img,
.vitrin-oge:not(.etkin) .proje-bulanik img {
  filter: blur(14px) saturate(1.05) grayscale(.35) brightness(.94);
}
.vitrin-oge.etkin .proje-bulanik img {
  filter: blur(14px) saturate(1.05);
}

/* ===================================================================
   59. TEKNİK DENETİM DÜZELTMELERİ
   -------------------------------------------------------------------
   Görünüm değişmiyor; yalnızca doğru HTML öğesine geçildiği için
   gereken sıfırlamalar ve erişilebilirlik iyileştirmeleri.
   =================================================================== */

/* ---- 59a. Alt bilgideki açılır menü artık <a href="#"> değil <button>.
       Ölü bağlantı kalmadı; düğmenin tarayıcı varsayılanları siliniyor
       ki görünüm birebir aynı kalsın.                                */
.footer-dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
}

/* ---- 59b. Karusel noktaları: mobilde tıklama alanı 17px genişti.
       Nokta AYNI boyutta kalıyor, yalnızca görünmez tıklama alanı
       WCAG'in istediği 24px'e genişletiliyor.                       */
.vitrin-nokta { position: relative; }
.vitrin-nokta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 24px);
  height: max(100%, 24px);
}

/* ---- 59c. "İçeriğe atla": klavyeyle gezen biri her sayfada menüyü
       tekrar tekrar geçmek zorunda kalmasın. Yalnızca odaklanınca
       görünür; fareyle kullanana hiç görünmez.                      */
.ar-atla {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 13000;
  padding: .8rem 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .25s var(--eg);
}
.ar-atla:focus { top: 1rem; }

/* ---- 59d. Görsel olarak gizli ama ekran okuyucunun ve arama motorunun
       gördüğü metin. display:none KULLANILMAZ — o, içeriği erişilebilirlik
       ağacından da siler.                                              */
.ar-gizli-baslik {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#ana-icerik:focus { outline: none; }

/* ---- 59e. Başlık seviyesi düzeltmelerinin görünüm karşılığı ---------
   Denetimde H2'den doğrudan H4'e atlayan bölümler vardı (bir bölümün
   alt başlıkları H4 yazılmıştı). Ekran okuyucu bunu "bir seviye
   eksik" diye okur. Etiketler H3'e çekildi; aşağıdaki kurallar
   görünümün birebir aynı kalmasını sağlıyor.                        */
.surec-adim h3, .process-step h3, .step-card h3,
.contact-info-text h3 {
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: .25rem;
  font-weight: var(--ag-orta);
  letter-spacing: -.012em;
}

/* ===================================================================
   60. VİTRİN KENAR SIZINTISI
   -------------------------------------------------------------------
   1280-1380px arası pencere genişliklerinde, üç kartın dışındaki
   ("uzak") kartın 1-3 piksellik bir şeridi pencerenin kenarından
   görünüyordu. .vitrin-ray "preserve-3d" olduğu için üst öğedeki
   overflow:hidden bu şeridi güvenilir biçimde kesmiyor.

   Çözüm: pencerenin iki kenarına 14 piksellik yumuşak bir maske.
   Yan kartların dış kenarında gözle fark edilmez, ama sızan şeridi
   tamamen siler. Maske saydamlıkla çalıştığı için arkadaki hareketli
   zemin olduğu gibi görünmeye devam eder.
   =================================================================== */
.vitrin-pencere {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* ===================================================================
   61. GÖRSEL BÜYÜTEÇ
   -------------------------------------------------------------------
   Mantık buyutec.js dosyasındadır. Proje detay sayfaları olmadığı
   için kartlar tıklanabilir görünüp hiçbir şey yapmıyordu; artık
   görsele tıklayınca tam ekranda büyüyor.
   =================================================================== */

/* ---- 61a. Kart imleci: açılabilir olan ile olmayan ayrılsın ---- */
.project-card.byt-acilir { cursor: zoom-in; }
.project-card:not(.byt-acilir) { cursor: default; }
/* Coming Soon kartında imleç etkisi de sönük kalsın: tıklanacak bir şey yok */
@media (hover: hover) {
  .project-card:not(.byt-acilir):hover { transform: none; box-shadow: var(--shadow-sm); }
  .project-card:not(.byt-acilir):hover img { transform: scale(1.07); }
}

/* ---- 61b. Perde ---- */
body.byt-acik { overflow: hidden; }

.byt-ortu[hidden] { display: none !important; }
.byt-ortu {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(16, 24, 32, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: byt-belir .25s ease both;
}
@keyframes byt-belir { from { opacity: 0; } to { opacity: 1; } }

/* ---- 61c. Görsel ve künye ---- */
.byt-kutu {
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  animation: byt-yuksel .35s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes byt-yuksel {
  from { transform: scale(.965); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.byt-gorsel {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  background: rgba(255, 255, 255, .04);
  transition: opacity .25s ease;
}
.byt-ortu.byt-yukleniyor .byt-gorsel { opacity: .35; }

.byt-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-align: center;
  color: rgba(255, 255, 255, .92);
}
.byt-konum {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
}
.byt-baslik {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: var(--ag-ince, 300);
  letter-spacing: -.02em;
}
.byt-sayac {
  font-size: .74rem;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .06em;
}

/* ---- 61d. Düğmeler ---- */
.byt-kapat {
  position: absolute;
  top: clamp(.8rem, 2.5vw, 1.6rem);
  right: clamp(.8rem, 2.5vw, 1.6rem);
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--eg, ease);
}
.byt-kapat:hover { background: rgba(255, 255, 255, .22); }

.byt-ok {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s var(--eg, ease);
}
.byt-ok svg { width: 24px; height: 24px; }
.byt-ok:hover { background: rgba(255, 255, 255, .2); }
.byt-ortu.byt-tek .byt-ok { display: none; }

.byt-ortu :is(button):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- 61e. Küçük ekran: oklar görselin altına iner ---- */
@media (max-width: 720px) {
  .byt-ortu { flex-wrap: wrap; padding: 1rem .6rem 1.4rem; }
  .byt-kutu { order: 1; flex: 1 0 100%; }
  .byt-onceki { order: 2; }
  .byt-sonraki { order: 3; }
  .byt-ok { width: 46px; height: 46px; }
  .byt-gorsel { max-height: calc(100vh - 15rem); }
}

@media (prefers-reduced-motion: reduce) {
  .byt-ortu, .byt-kutu { animation: none; }
}

/* ===================================================================
   62. DÜĞME İMLEÇ GÖLGESİ — RENKLİ PARILTI KALDIRILDI
   -------------------------------------------------------------------
   Sayfalarda eski paletten kalma bir altın rengi (rgb 198,161,90)
   duruyordu; palet gri-maviye döndüğü hâlde bu değer satır içi
   stillerde kaldığı için düğmenin altında SARI bir parıltı çıkıyordu.
   Renk değerlerinin tamamı mevcut palete çevrildi; ayrıca düğmenin
   imleç gölgesi renkli parıltı yerine nötr ve alçak bir gölgeye
   alındı. Renkli hâle (glow) ucuz durur; kurumsal bir arayüzde gölge
   rengi değil DERİNLİK taşımalı.
   =================================================================== */
.btn-primary:hover,
.btn:hover,
.newsletter-btn:hover,
.form-submit:hover {
  box-shadow: 0 6px 18px rgba(50, 62, 72, .16);
}
.btn-primary:active,
.btn:active {
  box-shadow: 0 2px 8px rgba(50, 62, 72, .14);
}

/* Form alanı odak halkası da aynı mantıkla: markanın gri-mavisi,
   düşük yoğunlukta, parıltı değil ince bir çerçeve. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(112, 143, 163, .18);
}

/* ---- 62a. Form alanlarında klavye odağı ---------------------------
   İletişim formundaki alanlarda satır içi  outline:none  yazıyor;
   satır içi stil her stil sayfasını ezdiği için klavyeyle gezen biri
   hangi alanda olduğunu göremiyordu. Yalnızca KLAVYE odağında
   (:focus-visible) halkayı geri getiriyoruz — fareyle tıklayanda
   görünmez, yani tasarım değişmiyor.                                */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mid-blue) !important;
  outline-offset: 2px !important;
  border-color: var(--mid-blue);
}

/* ===================================================================
   63. PROJE LİSTESİ DEĞİŞTİRİCİ (Aktif / Referans)
   -------------------------------------------------------------------
   Referans projelere girip aktiflere bakmak isteyen biri üst menüye
   dönmek zorundaydı. Artık listenin başında bir geçiş var.

   Alttaki tür filtrelerinden (Tümü / Konut / Ticari) görsel olarak
   AYRI durması gerekiyor: biri "hangi liste", diğeri "hangi tür".
   Bu yüzden tür filtreleri hap biçiminde ayrı ayrı dururken, bu
   ikili tek bir çerçeve içinde bölünmüş bir kontrol olarak duruyor.
   =================================================================== */
.proje-kip {
  display: inline-flex;
  /* Üst kap dikey bir flex kutusu; inline-flex tek başına yetmiyor,
     öğe tam genişliğe esniyordu. align-self ile kendi genişliğinde
     kalır ve başlıkla aynı hizada, solda durur. */
  align-self: flex-start;
  width: fit-content;
  padding: 4px;
  border: 1px solid rgba(50, 62, 72, .14);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.proje-kip-dugme {
  display: inline-block;
  padding: .62rem 1.5rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: var(--ag-vurgu, 600);
  letter-spacing: -.005em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--sure-kisa, .4s) var(--eg, ease),
              background var(--sure-kisa, .4s) var(--eg, ease);
}
@media (hover: hover) {
  .proje-kip-dugme:hover { color: var(--primary); }
}
.proje-kip-dugme.etkin {
  background: var(--primary);
  color: var(--white);
}
.proje-kip-dugme.etkin:hover { color: var(--white); }
.proje-kip-dugme:focus-visible {
  outline: 2px solid var(--mid-blue);
  outline-offset: 3px;
}

/* tür filtreleri bu kontrolün altında, araya nefes payı */
.proje-kip + .projects-filter { margin-top: 1.1rem !important; }

@media (max-width: 480px) {
  .proje-kip { width: 100%; }
  .proje-kip-dugme { flex: 1; text-align: center; padding: .62rem .8rem; font-size: .82rem; }
}

/* ===================================================================
   64. YAYIN ÖNCESİ DENETİM DÜZELTMELERİ (14 Eylül 2026)
   ------------------------------------------------------------------- */

/* ---- 64a. Klavye odağı: üst menü --------------------------------
   Menü bağlantılarında klavye odağı görünmüyordu; koyu şerit üzerinde
   beyaz halka en okunaklısı. Yalnızca klavyeyle gezende çıkar.      */
.nav-links a:focus-visible,
.nav-lang:focus-visible,
.nav-contact:focus-visible,
.nav-logo:focus-visible,
.nav-projects-dropdown a:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* ---- 64b. Klavye odağı: iletişim formu ---------------------------
   Alanlarda satır içi  outline:none  var; kimlik seçicisiyle ve
   !important ile eziyoruz. Görünüm .form-group alanlarındakiyle aynı. */
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--mid-blue) !important;
  box-shadow: 0 0 0 3px rgba(112, 143, 163, .18) !important;
}

/* ---- 64c. Proje kartı konum satırı telefonda çok küçüktü --------
   10.5px'ten 11.5px'e; büyük harf + harf aralığı korunuyor.        */
@media (max-width: 768px) {
  .project-loc { font-size: .72rem; }
}

/* ===================================================================
   65. KONTRAST (WCAG AA) — küçük yazılarda okunabilirlik
   -------------------------------------------------------------------
   Marka mavisi #708FA3 beyaz zeminde 3.4:1 veriyor; küçük punto metin
   için gereken 4.5:1'in altında. Rengi YALNIZCA küçük yazılı metin ve
   bağlantılarda bir ton koyultuyoruz (#4E6C80 → 5.6:1). Başlıklar,
   simgeler, çizgiler, butonlar ve büyük yazılar aynen kalıyor.       */
:root { --mavi-metin: #4e6c80; }

/* ekip kartlarındaki unvan satırı */
.team-card-info p,
.team-card-text p,
/* çerez şeridi ve KVKK kutusundaki bağlantılar (açık zemin) */
.cerez-metin-bag,
.cerez-kutu a,
.kvkk-kutu a,
.kvkk-onay a,
/* iletişim bilgileri ve proje kartı konum satırı */
.contact-info-text a,
.project-loc {
  color: var(--mavi-metin) !important;
}

/* altbilgi koyu zeminde: aynı mavi bu kez fazla koyu kalıyordu;
   bir ton AÇARAK 4.5:1 üstüne çıkarıyoruz                            */
.footer .kvkk-baglanti,
.footer-bottom a,
.footer-bottom button {
  color: #8aa7b8 !important;
}

/* hero'daki 'KAYDIRIN' ipucu: %50 saydamlık açık kareler üzerinde
   silikleşiyordu                                                     */
.hero-scroll { color: rgba(255, 255, 255, .72); }

/* KVKK/çerez bağlantıları: altbilgi dışında açık zeminde duruyor */
.kvkk-baglanti { color: var(--mavi-metin) !important; }
.footer .kvkk-baglanti,
.footer-bottom .kvkk-baglanti { color: #8aa7b8 !important; }

/* ===================================================================
   66. TEŞEKKÜRLER SAYFASI
   -------------------------------------------------------------------
   404 sayfasıyla aynı sade düzen; filigran rakam yerine onay işareti.
   Yeni renk ya da font yok.                                          */
.ar-tesekkur { }

.ar-tesekkur-isaret {
  width: 86px;
  height: 86px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(112, 143, 163, .10);
  color: var(--mid-blue);
  font-size: 2.1rem;
  position: relative;
  z-index: 1;
  animation: ar-tsk-belir .7s var(--eg, cubic-bezier(.16,1,.3,1)) both;
}
.ar-tesekkur-isaret svg { display: block; }
.ar-tesekkur-isaret::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(112, 143, 163, .22);
  animation: ar-tsk-halka 1.1s var(--eg, cubic-bezier(.16,1,.3,1)) .18s both;
}
@keyframes ar-tsk-belir {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes ar-tsk-halka {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-tesekkur-isaret,
  .ar-tesekkur-isaret::after { animation: none; }
}

/* özet kutusu: ne zaman dönüş yapılacağı */
.ar-tesekkur-not {
  margin: 2.6rem auto 0;
  max-width: 470px;
  padding: 1rem 1.3rem;
  border: 1px solid rgba(50, 62, 72, .12);
  border-left: 3px solid var(--mid-blue);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-muted);
  text-align: left;
  position: relative;
  z-index: 1;
}
.ar-tesekkur-not strong { color: var(--primary); font-weight: 600; }
.ar-tesekkur-not a {
  color: var(--mavi-metin, #4e6c80);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ar-tesekkur-not a:hover { color: var(--primary); }
@media (max-width: 600px) {
  .ar-tesekkur-isaret { width: 72px; height: 72px; }
  .ar-tesekkur-not { margin-top: 2rem; font-size: .86rem; }
}

/* ---- 66b. Dokunma hedefi: KVKK onay kutusu -----------------------
   16px kutu telefonda küçük kalıyordu. Etiket zaten tıklanabilir;
   kutunun kendisini de parmak boyuna getiriyoruz.                   */
@media (max-width: 768px) {
  .kvkk-onay input[type="checkbox"] {
    width: 22px; height: 22px;
    margin-top: .06rem;
  }
  .kvkk-onay label { min-height: 24px; display: flex; align-items: center; flex-wrap: wrap; }
}

/* menü içine taşınan mobil dil / iletişim düğmeleri */
.ar-menu-ek { display: none !important; }
@media (max-width: 768px) {
  .ar-menu-ek {
    display: flex !important;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.6rem;
  }
  .ar-menu-ek .ar-menu-dil {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.82);
    font-size: .95rem; font-weight: 600; letter-spacing: 2px;
    text-decoration: none;
  }
  .ar-menu-ek .ar-menu-dil:active { background: rgba(255,255,255,.08); color: #fff; }
  .ar-menu-ek .ar-menu-iletisim {
    display: flex; align-items: center; justify-content: center;
    min-height: 46px;
    background: var(--mid-blue);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: .95rem; font-weight: 600;
    text-decoration: none;
  }
  .nav-links { justify-content: flex-start; }
}

/* ---------- 67. ALT BİLGİ İLETİŞİM & SOSYAL İKON DÜZENİ ------------ */
.footer-social,
.footer-socials {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  margin-top: 1.2rem;
}
.footer-social a,
.footer-socials a {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}
.footer-social a:hover,
.footer-socials a:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
}

.footer-info {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-info li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  margin-bottom: 0.85rem !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-info li i {
  color: var(--gold) !important;
  margin-top: 0.2rem !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  text-align: center !important;
  font-size: 0.95rem !important;
}
.footer-info li span {
  flex: 1;
  word-break: break-word;
}