/* ============================================================
   EMLAK OFİSİ — Kurumsal Tanıtım Sitesi
   Ortak stil dosyası (tüm sayfalar bu dosyayı kullanır)
   ------------------------------------------------------------
   DÜZENLEME NOTLARI:
   - Renkleri değiştirmek için :root içindeki CSS değişkenlerini
     güncellemeniz yeterlidir.
   - Firma adı, telefon vb. bilgiler js/main.js içindeki
     SITE_CONFIG nesnesinden yönetilir.
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS DEĞİŞKENLERİ
   ------------------------------------------------------------ */
:root {
  /* Renk paleti: koyu lacivert, antrasit, siyah, beyaz, altın */
  --renk-lacivert-950: #050a14;
  --renk-lacivert-900: #0a1224;
  --renk-lacivert-800: #101c36;
  --renk-lacivert-700: #16264a;
  --renk-antrasit: #1b212b;
  --renk-antrasit-acik: #242b38;
  --renk-siyah: #02040a;

  --renk-altin: #c9a35c;
  --renk-altin-acik: #e6cd92;
  --renk-bronz: #a97e42;

  --renk-beyaz: #f7f5f0;
  --renk-gri-acik: #c4ccd9;
  --renk-gri: #93a0b4;

  /* Yüzeyler ve kenarlıklar */
  --yuzey-kart: rgba(16, 28, 54, 0.65);
  --yuzey-kart-koyu: rgba(10, 18, 36, 0.85);
  --kenarlik-altin: rgba(201, 163, 92, 0.22);
  --kenarlik-altin-hover: rgba(201, 163, 92, 0.55);

  /* Tipografi */
  --font-baslik: "Playfair Display", "Georgia", serif;
  --font-metin: "Manrope", "Segoe UI", sans-serif;

  /* Ölçüler */
  --konteyner-genislik: 1180px;
  --bolum-bosluk: clamp(4.5rem, 9vw, 7.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Geçişler */
  --gecis-hizli: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --gecis-orta: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  --gecis-yavas: 0.8s cubic-bezier(0.22, 1, 0.36, 1);

  /* Gölgeler */
  --golge-kart: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --golge-altin: 0 12px 34px -10px rgba(201, 163, 92, 0.45);
}

/* ------------------------------------------------------------
   2. SIFIRLAMA VE TEMEL AYARLAR
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-metin);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--renk-gri-acik);
  background-color: var(--renk-lacivert-950);
  overflow-x: hidden; /* Yatay taşmayı engelle */
  min-height: 100vh;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

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

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  color: var(--renk-beyaz);
  line-height: 1.2;
  font-weight: 600;
}

/* Klavye ile gezinen kullanıcılar için belirgin odak halkası */
:focus-visible {
  outline: 2px solid var(--renk-altin);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--renk-altin);
  color: var(--renk-siyah);
}

/* ------------------------------------------------------------
   3. YARDIMCI SINIFLAR
   ------------------------------------------------------------ */
.container {
  width: min(100% - 2.5rem, var(--konteyner-genislik));
  margin-inline: auto;
}

.section {
  padding-block: var(--bolum-bosluk);
  position: relative;
}

/* Dekoratif şekil içeren bölümlerde taşmayı engelle */
.section--dekorlu {
  overflow: hidden;
}

.section--koyu {
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(22, 38, 74, 0.55), transparent 70%),
    var(--renk-lacivert-900);
}

/* Bölüm başlıkları */
.section-header {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-header--merkez {
  margin-inline: auto;
  text-align: center;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--renk-altin);
  margin-bottom: 1rem;
}

.section-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--renk-altin));
}

.section-header--merkez .section-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--renk-altin), transparent);
}

.section-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
}

.section-title em {
  font-style: italic;
  color: var(--renk-altin-acik);
}

.section-desc {
  color: var(--renk-gri);
  font-size: 1.02rem;
}

/* ------------------------------------------------------------
   4. BUTONLAR
   ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli),
    background-color var(--gecis-hizli), color var(--gecis-hizli),
    border-color var(--gecis-hizli);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Altın (birincil) buton */
.btn--altin {
  background: linear-gradient(135deg, var(--renk-altin-acik) 0%, var(--renk-altin) 45%, var(--renk-bronz) 100%);
  color: var(--renk-siyah);
  box-shadow: var(--golge-altin);
}

.btn--altin:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px rgba(201, 163, 92, 0.6);
}

/* Parlama / ışık süpürme efekti */
.btn--altin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  z-index: 1;
}

.btn--altin:hover::after,
.btn--altin:focus-visible::after {
  transform: translateX(120%);
}

/* Kontur (ikincil) buton */
.btn--kontur {
  border: 1px solid var(--kenarlik-altin-hover);
  color: var(--renk-beyaz);
  background: rgba(201, 163, 92, 0.06);
  backdrop-filter: blur(4px);
}

.btn--kontur:hover {
  background: rgba(201, 163, 92, 0.16);
  border-color: var(--renk-altin);
  transform: translateY(-3px);
}

/* WhatsApp butonu */
.btn--whatsapp {
  background: linear-gradient(135deg, #2fb968, #1f9e53);
  color: #ffffff;
  box-shadow: 0 12px 30px -10px rgba(37, 176, 96, 0.5);
}

.btn--whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px rgba(37, 176, 96, 0.65);
}

.btn--buyuk {
  padding: 1.15rem 2.7rem;
  font-size: 1.02rem;
}

/* ------------------------------------------------------------
   5. NAVBAR
   ------------------------------------------------------------ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 1.15rem;
  transition: padding var(--gecis-orta), background-color var(--gecis-orta),
    box-shadow var(--gecis-orta), border-color var(--gecis-orta);
  border-bottom: 1px solid transparent;
}

/* Scroll sonrası koyulaşan navbar (JS ile eklenir) */
.navbar--scrolled {
  padding-block: 0.7rem;
  background: rgba(5, 10, 20, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--kenarlik-altin);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.8);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Metin logosu — gerçek logo geldiğinde <img> ile değiştirilebilir */
.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.navbar__logo-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kenarlik-altin-hover);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(201, 163, 92, 0.18), rgba(201, 163, 92, 0.04));
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.navbar__logo:hover .navbar__logo-mark {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: var(--golge-altin);
}

.navbar__logo-mark svg {
  width: 22px;
  height: 22px;
}

.navbar__logo-text {
  font-family: var(--font-baslik);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--renk-beyaz);
  line-height: 1.1;
}

.navbar__logo-text em {
  font-style: normal;
  color: var(--renk-altin);
}

.navbar__logo-alt {
  display: block;
  font-family: var(--font-metin);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--renk-gri);
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.navbar__link {
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--renk-gri-acik);
  padding: 0.35rem 0.1rem;
  transition: color var(--gecis-hizli);
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--renk-altin), var(--renk-altin-acik));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gecis-orta);
  border-radius: 2px;
}

.navbar__link:hover {
  color: var(--renk-beyaz);
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

/* Aktif sayfa bağlantısı */
.navbar__link--aktif {
  color: var(--renk-altin-acik);
}

.navbar__link--aktif::after {
  transform: scaleX(1);
}

.navbar__cta {
  flex-shrink: 0;
}

.navbar__cta .btn {
  padding: 0.7rem 1.5rem;
  font-size: 0.88rem;
}

/* Hamburger butonu (mobil) */
.navbar__hamburger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--kenarlik-altin);
  border-radius: var(--radius-sm);
  place-items: center;
  z-index: 120;
  transition: border-color var(--gecis-hizli), background-color var(--gecis-hizli);
}

.navbar__hamburger:hover {
  border-color: var(--renk-altin);
  background: rgba(201, 163, 92, 0.08);
}

.navbar__hamburger-cizgiler {
  position: relative;
  width: 20px;
  height: 14px;
}

.navbar__hamburger-cizgiler span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--renk-beyaz);
  border-radius: 2px;
  transition: transform var(--gecis-orta), opacity var(--gecis-hizli), top var(--gecis-orta);
}

.navbar__hamburger-cizgiler span:nth-child(1) { top: 0; }
.navbar__hamburger-cizgiler span:nth-child(2) { top: 6px; }
.navbar__hamburger-cizgiler span:nth-child(3) { top: 12px; }

/* Menü açıkken hamburger → X animasyonu */
.menu-acik .navbar__hamburger-cizgiler span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.menu-acik .navbar__hamburger-cizgiler span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.menu-acik .navbar__hamburger-cizgiler span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   6. HERO (ANA SAYFA GİRİŞ)
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Gece / gün batımı gökyüzü degradesi */
  background:
    radial-gradient(ellipse 120% 55% at 50% 108%, rgba(233, 150, 70, 0.5) 0%, rgba(190, 92, 60, 0.28) 34%, transparent 68%),
    radial-gradient(ellipse 90% 70% at 80% -10%, rgba(22, 38, 74, 0.9), transparent 70%),
    linear-gradient(180deg, #030610 0%, #0a1224 42%, #1a2547 74%, #3a2f4a 100%);
}

/* Yıldız katmanı */
.hero__yildizlar {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 44% 24%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 61% 12%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 75% 28%, rgba(230, 205, 146, 0.75), transparent),
    radial-gradient(1px 1px at 88% 9%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 94% 34%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 6% 40%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 53% 5%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 36% 36%, rgba(255, 255, 255, 0.35), transparent);
  animation: yildizParilti 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes yildizParilti {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* Şehir silüeti katmanları (parallax için ayrı katmanlar) */
.hero__katman {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -2%;
  pointer-events: none;
  will-change: transform;
}

.hero__katman img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: bottom;
}

.hero__katman--uzak { opacity: 0.85; }
.hero__katman--yakin { opacity: 1; }

/* Yazıların okunabilirliği için koyu katman */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 6, 16, 0.72) 0%, rgba(3, 6, 16, 0.35) 45%, rgba(3, 6, 16, 0.82) 100%);
  pointer-events: none;
}

.hero__icerik {
  position: relative;
  z-index: 5;
  max-width: 760px;
  padding-block: 8rem 6rem;
}

.hero__rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--kenarlik-altin-hover);
  border-radius: 999px;
  background: rgba(201, 163, 92, 0.08);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--renk-altin-acik);
  margin-bottom: 1.6rem;
}

.hero__rozet::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--renk-altin);
  box-shadow: 0 0 12px 2px rgba(201, 163, 92, 0.8);
  animation: rozetNabiz 2.4s ease-in-out infinite;
}

@keyframes rozetNabiz {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.hero__baslik {
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  font-weight: 700;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}

.hero__baslik em {
  font-style: italic;
  background: linear-gradient(120deg, var(--renk-altin-acik), var(--renk-altin) 60%, var(--renk-bronz));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__aciklama {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--renk-gri-acik);
  max-width: 560px;
  margin-bottom: 2.4rem;
}

.hero__butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Aşağı kaydır göstergesi */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--renk-gri);
}

.hero__scroll-cizgi {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--renk-altin), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-cizgi::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--renk-altin-acik);
  animation: scrollAkis 2s ease-in-out infinite;
}

@keyframes scrollAkis {
  to { top: 110%; }
}

/* ------------------------------------------------------------
   7. DEKORATİF ŞEKİLLER
   ------------------------------------------------------------ */
.dekor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.dekor--halka {
  width: 220px;
  height: 220px;
  border: 1px solid var(--kenarlik-altin);
  border-radius: 50%;
  animation: dekorSuzul 14s ease-in-out infinite alternate;
}

.dekor--halka::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px dashed rgba(201, 163, 92, 0.16);
  border-radius: 50%;
}

.dekor--elmas {
  width: 46px;
  height: 46px;
  border: 1px solid var(--kenarlik-altin-hover);
  transform: rotate(45deg);
  animation: dekorDon 26s linear infinite;
}

.dekor--parilti {
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 163, 92, 0.14), transparent 65%);
  filter: blur(20px);
  animation: dekorSuzul 18s ease-in-out infinite alternate-reverse;
}

@keyframes dekorSuzul {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -34px, 0); }
}

@keyframes dekorDon {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}

/* ------------------------------------------------------------
   8. SCROLL İLE GÖRÜNME ANİMASYONLARI
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--gecis-yavas), transform var(--gecis-yavas);
  transition-delay: var(--reveal-gecikme, 0s);
  will-change: opacity, transform;
}

.reveal--sol { transform: translateX(-46px); }
.reveal--sag { transform: translateX(46px); }
.reveal--zoom { transform: scale(0.92); }

.reveal.gorunur {
  opacity: 1;
  transform: none;
}

/* Sayfa açılış animasyonu */
.page-gecis {
  animation: sayfaGiris 0.6s ease-out both;
}

@keyframes sayfaGiris {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.sayfa-cikis {
  animation: sayfaCikis 0.3s ease-in both;
}

@keyframes sayfaCikis {
  to { opacity: 0; }
}

/* ------------------------------------------------------------
   9. ANA SAYFA — KISA HAKKIMIZDA
   ------------------------------------------------------------ */
.hakkimizda-onizleme {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hakkimizda-onizleme__gorsel {
  position: relative;
}

/* Görsel yerine dekoratif kompozisyon — gerçek fotoğraf geldiğinde
   .hakkimizda-onizleme__cerceve içine <img> eklenebilir */
.hakkimizda-onizleme__cerceve {
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(200deg, rgba(201, 163, 92, 0.1), transparent 40%),
    linear-gradient(160deg, var(--renk-lacivert-700), var(--renk-lacivert-900) 70%);
  border: 1px solid var(--kenarlik-altin);
  box-shadow: var(--golge-kart);
  display: grid;
  place-items: center;
}

.hakkimizda-onizleme__cerceve svg {
  width: 62%;
  height: auto;
  opacity: 0.9;
}

.hakkimizda-onizleme__deneyim {
  position: absolute;
  bottom: -1.4rem;
  right: -0.8rem;
  padding: 1.3rem 1.7rem;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--renk-altin-acik), var(--renk-altin) 55%, var(--renk-bronz));
  color: var(--renk-siyah);
  box-shadow: var(--golge-altin);
  text-align: center;
}

.hakkimizda-onizleme__deneyim strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: 2.1rem;
  line-height: 1;
}

.hakkimizda-onizleme__deneyim span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hakkimizda-onizleme__liste {
  display: grid;
  gap: 0.85rem;
  margin-block: 1.8rem 2.2rem;
}

.hakkimizda-onizleme__liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--renk-gri-acik);
  font-weight: 500;
}

.hakkimizda-onizleme__liste svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--renk-altin);
}

/* ------------------------------------------------------------
   10. HİZMET KARTLARI
   ------------------------------------------------------------ */
.hizmet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hizmet-kart {
  position: relative;
  padding: 2.1rem 1.8rem;
  border-radius: var(--radius-md);
  background: var(--yuzey-kart);
  border: 1px solid var(--kenarlik-altin);
  transition: transform var(--gecis-orta), border-color var(--gecis-orta),
    box-shadow var(--gecis-orta), background-color var(--gecis-orta);
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

.hizmet-kart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--renk-altin), transparent);
  opacity: 0;
  transition: opacity var(--gecis-orta);
}

.hizmet-kart:hover {
  transform: translateY(-8px);
  border-color: var(--kenarlik-altin-hover);
  box-shadow: var(--golge-kart), 0 0 0 1px rgba(201, 163, 92, 0.1);
  background: rgba(22, 38, 74, 0.7);
}

.hizmet-kart:hover::before {
  opacity: 1;
}

.hizmet-kart__ikon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(201, 163, 92, 0.2), rgba(201, 163, 92, 0.05));
  border: 1px solid var(--kenarlik-altin);
  margin-bottom: 1.4rem;
  transition: transform var(--gecis-orta), box-shadow var(--gecis-orta);
}

.hizmet-kart:hover .hizmet-kart__ikon {
  transform: translateY(-4px) rotate(-4deg);
  box-shadow: var(--golge-altin);
}

.hizmet-kart__ikon svg {
  width: 27px;
  height: 27px;
  color: var(--renk-altin-acik);
}

.hizmet-kart__baslik {
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}

.hizmet-kart__metin {
  font-size: 0.94rem;
  color: var(--renk-gri);
}

/* ------------------------------------------------------------
   11. NEDEN BİZ + SAYAÇLAR
   ------------------------------------------------------------ */
.ozellik-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.ozellik-kart {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.6rem;
  border-radius: var(--radius-md);
  background: var(--yuzey-kart-koyu);
  border: 1px solid rgba(201, 163, 92, 0.12);
  transition: transform var(--gecis-orta), border-color var(--gecis-orta);
}

.ozellik-kart:hover {
  transform: translateY(-5px);
  border-color: var(--kenarlik-altin-hover);
}

.ozellik-kart__ikon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 163, 92, 0.12);
  border: 1px solid var(--kenarlik-altin);
}

.ozellik-kart__ikon svg {
  width: 22px;
  height: 22px;
  color: var(--renk-altin-acik);
}

.ozellik-kart h3 {
  font-family: var(--font-metin);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.ozellik-kart p {
  font-size: 0.88rem;
  color: var(--renk-gri);
}

/* Sayaç bandı */
.sayac-band {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(120deg, rgba(201, 163, 92, 0.12), transparent 55%),
    var(--renk-lacivert-800);
  border: 1px solid var(--kenarlik-altin);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.sayac__deger {
  font-family: var(--font-baslik);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--renk-altin-acik);
  line-height: 1.1;
}

.sayac__etiket {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--renk-gri);
}

/* ------------------------------------------------------------
   12. EKİP KARTLARI
   ------------------------------------------------------------ */
.ekip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.ekip-grid--dortlu {
  grid-template-columns: repeat(4, 1fr);
}

.ekip-kart {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--yuzey-kart);
  border: 1px solid var(--kenarlik-altin);
  padding: 2rem 1.6rem 1.8rem;
  text-align: center;
  transition: transform var(--gecis-orta), border-color var(--gecis-orta),
    box-shadow var(--gecis-orta);
  transform-style: preserve-3d;
  will-change: transform;
}

.ekip-kart:hover {
  transform: translateY(-8px);
  border-color: var(--kenarlik-altin-hover);
  box-shadow: var(--golge-kart);
}

/* Profil fotoğrafı alanı — gerçek fotoğraf eklendiğinde JS,
   baş harfler yerine <img> basar (js/main.js → EKIP_UYELERI.foto) */
.ekip-kart__foto {
  width: 112px;
  height: 112px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--kenarlik-altin-hover);
  padding: 4px;
  background: linear-gradient(160deg, rgba(201, 163, 92, 0.3), transparent);
  transition: transform var(--gecis-orta), box-shadow var(--gecis-orta);
}

.ekip-kart:hover .ekip-kart__foto {
  transform: scale(1.06);
  box-shadow: var(--golge-altin);
}

.ekip-kart__foto img,
.ekip-kart__foto .ekip-kart__basharf {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ekip-kart__basharf {
  display: grid;
  place-items: center;
  font-family: var(--font-baslik);
  font-size: 2rem;
  font-weight: 700;
  color: var(--renk-altin-acik);
  background: linear-gradient(160deg, var(--renk-lacivert-700), var(--renk-lacivert-900));
}

.ekip-kart__ad {
  font-size: 1.22rem;
  margin-bottom: 0.25rem;
}

.ekip-kart__pozisyon {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--renk-altin);
  margin-bottom: 0.85rem;
}

.ekip-kart__aciklama {
  font-size: 0.9rem;
  color: var(--renk-gri);
  margin-bottom: 1.3rem;
}

.ekip-kart__iletisim {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
}

.ekip-kart__iletisim a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--kenarlik-altin);
  color: var(--renk-gri-acik);
  transition: background-color var(--gecis-hizli), color var(--gecis-hizli),
    border-color var(--gecis-hizli), transform var(--gecis-hizli);
}

.ekip-kart__iletisim a:hover {
  background: var(--renk-altin);
  border-color: var(--renk-altin);
  color: var(--renk-siyah);
  transform: translateY(-3px);
}

.ekip-kart__iletisim svg {
  width: 17px;
  height: 17px;
}

/* ------------------------------------------------------------
   13. CTA (HAREKETE GEÇİRİCİ) BÖLÜMÜ
   ------------------------------------------------------------ */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%, rgba(201, 163, 92, 0.22), transparent 70%),
    linear-gradient(160deg, var(--renk-lacivert-800), var(--renk-lacivert-900) 60%);
  border: 1px solid var(--kenarlik-altin);
}

.cta__baslik {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  max-width: 620px;
  margin: 0 auto 1rem;
}

.cta__metin {
  color: var(--renk-gri);
  max-width: 520px;
  margin: 0 auto 2.2rem;
}

.cta__butonlar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ------------------------------------------------------------
   14. İÇ SAYFA HERO (BANNER)
   ------------------------------------------------------------ */
.sayfa-hero {
  position: relative;
  padding: clamp(9rem, 16vw, 12rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 80% at 85% -20%, rgba(22, 38, 74, 0.9), transparent 70%),
    radial-gradient(ellipse 60% 60% at 10% 110%, rgba(201, 163, 92, 0.1), transparent 70%),
    linear-gradient(180deg, #030610, var(--renk-lacivert-900));
}

.sayfa-hero__baslik {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 0.9rem;
}

.sayfa-hero__metin {
  max-width: 580px;
  color: var(--renk-gri);
  font-size: 1.05rem;
}

/* Küçük gezinme izi (breadcrumb) */
.sayfa-hero__iz {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--renk-gri);
  margin-bottom: 1.2rem;
}

.sayfa-hero__iz a {
  color: var(--renk-altin);
  transition: color var(--gecis-hizli);
}

.sayfa-hero__iz a:hover {
  color: var(--renk-altin-acik);
}

/* ------------------------------------------------------------
   15. HAKKIMIZDA SAYFASI
   ------------------------------------------------------------ */
.icerik-blok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.icerik-blok + .icerik-blok {
  margin-top: var(--bolum-bosluk);
}

.icerik-blok--ters .icerik-blok__gorsel {
  order: 2;
}

.icerik-blok__gorsel {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--kenarlik-altin);
  background:
    linear-gradient(200deg, rgba(201, 163, 92, 0.12), transparent 45%),
    linear-gradient(160deg, var(--renk-lacivert-700), var(--renk-lacivert-900) 75%);
  display: grid;
  place-items: center;
  box-shadow: var(--golge-kart);
}

.icerik-blok__gorsel svg {
  width: 52%;
  height: auto;
  opacity: 0.9;
}

.icerik-blok__metin p + p {
  margin-top: 1rem;
}

.ilke-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.ilke-kart {
  padding: 1.8rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 163, 92, 0.14);
  background: var(--yuzey-kart-koyu);
  transition: transform var(--gecis-orta), border-color var(--gecis-orta);
}

.ilke-kart:hover {
  transform: translateY(-5px);
  border-color: var(--kenarlik-altin-hover);
}

.ilke-kart__no {
  display: inline-block;
  font-family: var(--font-baslik);
  font-size: 1rem;
  font-weight: 700;
  color: var(--renk-altin);
  border: 1px solid var(--kenarlik-altin-hover);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 1rem;
}

.ilke-kart h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.ilke-kart p {
  font-size: 0.92rem;
  color: var(--renk-gri);
}

/* Misyon / Vizyon kartları */
.misyon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}

.misyon-kart {
  position: relative;
  padding: 2.4rem 2rem;
  border-radius: var(--radius-md);
  background: var(--yuzey-kart);
  border: 1px solid var(--kenarlik-altin);
  overflow: hidden;
  transition: transform var(--gecis-orta), border-color var(--gecis-orta);
}

.misyon-kart:hover {
  transform: translateY(-6px);
  border-color: var(--kenarlik-altin-hover);
}

.misyon-kart::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid var(--kenarlik-altin);
  opacity: 0.6;
}

.misyon-kart__ikon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(201, 163, 92, 0.12);
  border: 1px solid var(--kenarlik-altin);
  margin-bottom: 1.3rem;
}

.misyon-kart__ikon svg {
  width: 26px;
  height: 26px;
  color: var(--renk-altin-acik);
}

.misyon-kart h3 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

.misyon-kart p {
  color: var(--renk-gri);
  font-size: 0.96rem;
}

/* ------------------------------------------------------------
   16. HİZMETLERİMİZ SAYFASI (DETAYLI KARTLAR)
   ------------------------------------------------------------ */
.hizmet-detay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

.hizmet-detay {
  display: flex;
  flex-direction: column;
  padding: 2.3rem 2rem;
  border-radius: var(--radius-md);
  background: var(--yuzey-kart);
  border: 1px solid var(--kenarlik-altin);
  transition: transform var(--gecis-orta), border-color var(--gecis-orta),
    box-shadow var(--gecis-orta);
  transform-style: preserve-3d;
  will-change: transform;
}

.hizmet-detay:hover {
  transform: translateY(-7px);
  border-color: var(--kenarlik-altin-hover);
  box-shadow: var(--golge-kart);
}

.hizmet-detay__ust {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}

.hizmet-detay__ikon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(201, 163, 92, 0.2), rgba(201, 163, 92, 0.05));
  border: 1px solid var(--kenarlik-altin);
}

.hizmet-detay__ikon svg {
  width: 26px;
  height: 26px;
  color: var(--renk-altin-acik);
}

.hizmet-detay h3 {
  font-size: 1.3rem;
}

.hizmet-detay p {
  color: var(--renk-gri);
  font-size: 0.95rem;
  flex-grow: 1;
}

.hizmet-detay ul {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.hizmet-detay ul li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--renk-gri-acik);
}

.hizmet-detay ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--renk-altin);
}

.hizmet-detay__buton {
  margin-top: 1.6rem;
}

.hizmet-detay__buton .btn {
  width: 100%;
}

/* ------------------------------------------------------------
   17. PORTFÖY SAYFASI
   ------------------------------------------------------------ */
.portfoy-kart {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 100% at 50% -30%, rgba(201, 163, 92, 0.16), transparent 70%),
    var(--yuzey-kart);
  border: 1px solid var(--kenarlik-altin);
  overflow: hidden;
}

.portfoy-kart__ikon {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 163, 92, 0.1);
  border: 1px solid var(--kenarlik-altin-hover);
  animation: dekorSuzul 6s ease-in-out infinite alternate;
}

.portfoy-kart__ikon svg {
  width: 38px;
  height: 38px;
  color: var(--renk-altin-acik);
}

.portfoy-kart h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  margin-bottom: 1rem;
}

.portfoy-kart p {
  color: var(--renk-gri);
  max-width: 480px;
  margin: 0 auto 2.2rem;
}

.portfoy-not {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--renk-gri);
}

/* ------------------------------------------------------------
   18. İLETİŞİM SAYFASI
   ------------------------------------------------------------ */
.iletisim-yerlesim {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.iletisim-bilgi-kart {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--yuzey-kart-koyu);
  border: 1px solid rgba(201, 163, 92, 0.14);
  transition: border-color var(--gecis-hizli), transform var(--gecis-hizli);
}

.iletisim-bilgi-kart:hover {
  border-color: var(--kenarlik-altin-hover);
  transform: translateY(-3px);
}

.iletisim-bilgi-kart + .iletisim-bilgi-kart {
  margin-top: 1rem;
}

.iletisim-bilgi-kart__ikon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(201, 163, 92, 0.12);
  border: 1px solid var(--kenarlik-altin);
}

.iletisim-bilgi-kart__ikon svg {
  width: 22px;
  height: 22px;
  color: var(--renk-altin-acik);
}

.iletisim-bilgi-kart h3 {
  font-family: var(--font-metin);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.iletisim-bilgi-kart p,
.iletisim-bilgi-kart a {
  font-size: 0.92rem;
  color: var(--renk-gri);
}

.iletisim-bilgi-kart a:hover {
  color: var(--renk-altin-acik);
}

.iletisim-hizli-butonlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

/* Form */
.iletisim-form {
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--radius-lg);
  background: var(--yuzey-kart);
  border: 1px solid var(--kenarlik-altin);
}

.iletisim-form h2 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.iletisim-form > p {
  font-size: 0.92rem;
  color: var(--renk-gri);
  margin-bottom: 1.8rem;
}

.form-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form-grup {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.form-grup label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--renk-beyaz);
}

.form-grup label span {
  color: var(--renk-altin);
}

.form-grup input,
.form-grup textarea,
.form-grup select {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 163, 92, 0.2);
  background: rgba(5, 10, 20, 0.6);
  color: var(--renk-beyaz);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.form-grup input::placeholder,
.form-grup textarea::placeholder {
  color: rgba(147, 160, 180, 0.55);
}

.form-grup input:focus,
.form-grup textarea:focus,
.form-grup select:focus {
  outline: none;
  border-color: var(--renk-altin);
  box-shadow: 0 0 0 3px rgba(201, 163, 92, 0.15);
}

.form-grup textarea {
  resize: vertical;
  min-height: 130px;
}

/* Hata durumları (JS ile eklenir) */
.form-grup.hata input,
.form-grup.hata textarea {
  border-color: #d66a5a;
  box-shadow: 0 0 0 3px rgba(214, 106, 90, 0.12);
}

.form-hata-mesaj {
  display: none;
  font-size: 0.8rem;
  color: #e08b7d;
}

.form-grup.hata .form-hata-mesaj {
  display: block;
}

/* Form başarı paneli (JS ile gösterilir) */
.form-basari {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}

.form-basari.aktif {
  display: block;
  animation: sayfaGiris 0.5s ease-out both;
}

.form-basari__ikon {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(47, 185, 104, 0.14);
  border: 1px solid rgba(47, 185, 104, 0.5);
}

.form-basari__ikon svg {
  width: 34px;
  height: 34px;
  color: #4fd485;
}

.form-basari h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.form-basari p {
  color: var(--renk-gri);
  max-width: 400px;
  margin: 0 auto 1.6rem;
}

.form-basari__butonlar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Harita alanı — gerçek Google Maps iframe'i eklendiğinde
   .harita-alani içeriği değiştirilecek */
.harita-alani {
  margin-top: var(--bolum-bosluk);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--kenarlik-altin-hover);
  background: var(--yuzey-kart-koyu);
  min-height: 320px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
}

.harita-alani iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--radius-lg);
}

.harita-alani__icerik svg {
  width: 46px;
  height: 46px;
  color: var(--renk-altin);
  margin: 0 auto 1rem;
}

.harita-alani__icerik p {
  color: var(--renk-gri);
  max-width: 380px;
}

/* Çalışma saatleri tablosu */
.saat-listesi {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
}

.saat-listesi div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--renk-gri);
}

.saat-listesi span:last-child {
  color: var(--renk-gri-acik);
  font-weight: 600;
}

/* ------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------ */
.footer {
  margin-top: var(--bolum-bosluk);
  background:
    radial-gradient(ellipse 70% 90% at 50% -30%, rgba(22, 38, 74, 0.6), transparent 70%),
    var(--renk-siyah);
  border-top: 1px solid var(--kenarlik-altin);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer__marka p {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--renk-gri);
  max-width: 300px;
}

.footer__baslik {
  font-family: var(--font-metin);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--renk-beyaz);
  margin-bottom: 1.2rem;
}

.footer__linkler {
  display: grid;
  gap: 0.65rem;
}

.footer__linkler a {
  font-size: 0.92rem;
  color: var(--renk-gri);
  transition: color var(--gecis-hizli), padding-left var(--gecis-hizli);
}

.footer__linkler a:hover {
  color: var(--renk-altin-acik);
  padding-left: 6px;
}

.footer__iletisim {
  display: grid;
  gap: 0.9rem;
}

.footer__iletisim a,
.footer__iletisim p {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--renk-gri);
  transition: color var(--gecis-hizli);
}

.footer__iletisim a:hover {
  color: var(--renk-altin-acik);
}

.footer__iletisim svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--renk-altin);
}

.footer__sosyal {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.3rem;
}

.footer__sosyal a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--kenarlik-altin);
  color: var(--renk-gri-acik);
  transition: background-color var(--gecis-hizli), color var(--gecis-hizli),
    transform var(--gecis-hizli), border-color var(--gecis-hizli);
}

.footer__sosyal a:hover {
  background: var(--renk-altin);
  border-color: var(--renk-altin);
  color: var(--renk-siyah);
  transform: translateY(-3px);
}

.footer__sosyal svg {
  width: 17px;
  height: 17px;
}

.footer__alt {
  border-top: 1px solid rgba(201, 163, 92, 0.12);
  padding-block: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.83rem;
  color: var(--renk-gri);
}

.footer__alt a {
  color: var(--renk-altin);
}

/* Created by Hamza — kırmızı yanıp sönen imza */
.footer__kredi {
  text-align: center;
  padding-bottom: 1.3rem;
}

.footer__kredi a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff3b3b;
  animation: krediYanipSon 1.5s ease-in-out infinite;
  transition: transform var(--gecis-hizli);
}

.footer__kredi a::before,
.footer__kredi a::after {
  content: "";
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: #ff3b3b;
}

.footer__kredi a:hover {
  transform: scale(1.08);
  animation-play-state: paused;
  opacity: 1;
  text-shadow: 0 0 16px rgba(255, 59, 59, 0.95);
}

@keyframes krediYanipSon {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 14px rgba(255, 59, 59, 0.9);
  }
  50% {
    opacity: 0.3;
    text-shadow: 0 0 2px rgba(255, 59, 59, 0.2);
  }
}

/* ------------------------------------------------------------
   20. MODAL (Portföy uyarısı vb. için)
   ------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis-orta), visibility var(--gecis-orta);
}

.modal.aktif {
  opacity: 1;
  visibility: visible;
}

.modal__kutu {
  width: min(100%, 440px);
  padding: 2.2rem 1.9rem;
  border-radius: var(--radius-md);
  background: var(--renk-lacivert-800);
  border: 1px solid var(--kenarlik-altin-hover);
  box-shadow: var(--golge-kart);
  text-align: center;
  transform: translateY(24px) scale(0.96);
  transition: transform var(--gecis-orta);
}

.modal.aktif .modal__kutu {
  transform: none;
}

.modal__ikon {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 163, 92, 0.12);
  border: 1px solid var(--kenarlik-altin-hover);
}

.modal__ikon svg {
  width: 28px;
  height: 28px;
  color: var(--renk-altin-acik);
}

.modal__kutu h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.modal__kutu p {
  font-size: 0.93rem;
  color: var(--renk-gri);
  margin-bottom: 1.6rem;
}

.modal__butonlar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ------------------------------------------------------------
   20.5 AÇILIŞ YÜKLEME EKRANI (PRELOADER)
   Süre ayarı js/main.js → acilisKur() içindeki ACILIS_SURE
   ------------------------------------------------------------ */
.acilis {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 115%, rgba(201, 163, 92, 0.12), transparent 70%),
    radial-gradient(ellipse 80% 60% at 80% -10%, rgba(22, 38, 74, 0.7), transparent 70%),
    var(--renk-lacivert-950);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

/* JS süre dolunca bu sınıfı ekler → yumuşak kaybolma */
.acilis--gizle {
  opacity: 0;
  visibility: hidden;
}

/* Aynı oturumda tekrar gösterilmeyecekse (sayfalar arası geçiş) */
.acilis--atla {
  display: none;
}

/* Açılış ekranı görünürken sayfa kaydırılamasın */
body.acilis-aktif {
  overflow: hidden;
}

.acilis__icerik {
  text-align: center;
  padding: 1rem;
}

/* Logo kutusu + nabız gibi atan altın halka */
.acilis__logo {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--kenarlik-altin-hover);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(201, 163, 92, 0.14), rgba(201, 163, 92, 0.03));
}

.acilis__logo::before,
.acilis__logo::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(201, 163, 92, 0.35);
  border-radius: 20px;
  animation: acilisNabiz 2s ease-out infinite;
}

.acilis__logo::after {
  animation-delay: 1s;
}

@keyframes acilisNabiz {
  0% { transform: scale(0.82); opacity: 0; }
  45% { opacity: 0.9; }
  100% { transform: scale(1.18); opacity: 0; }
}

.acilis__logo svg {
  width: 46px;
  height: 46px;
}

/* Bina çizgilerinin kalemle çizilir gibi belirmesi */
.acilis__logo svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: acilisCizim 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.acilis__logo svg path:nth-child(2) { animation-delay: 0.35s; }
.acilis__logo svg path:nth-child(3) { animation-delay: 0.7s; }
.acilis__logo svg path:nth-child(4) { animation-delay: 0.8s; }
.acilis__logo svg path:nth-child(5) { animation-delay: 0.9s; }
.acilis__logo svg path:nth-child(6) { animation-delay: 1s; }
.acilis__logo svg path:nth-child(7) { animation-delay: 1.1s; }
.acilis__logo svg path:nth-child(8) { animation-delay: 1.2s; }

@keyframes acilisCizim {
  to { stroke-dashoffset: 0; }
}

.acilis__ad {
  font-family: var(--font-baslik);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--renk-beyaz);
  margin-bottom: 0.35rem;
  opacity: 0;
  animation: acilisBelir 0.8s ease-out 0.5s forwards;
}

.acilis__slogan {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--renk-altin);
  opacity: 0;
  animation: acilisBelir 0.8s ease-out 0.85s forwards;
}

@keyframes acilisBelir {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Dolum çubuğu — süresi JS'teki ACILIS_SURE ile uyumludur (3sn) */
.acilis__bar {
  width: min(250px, 62vw);
  height: 2px;
  margin: 1.7rem auto 0.7rem;
  border-radius: 2px;
  background: rgba(201, 163, 92, 0.16);
  overflow: hidden;
}

.acilis__bar-dolgu {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--renk-bronz), var(--renk-altin) 55%, var(--renk-altin-acik));
  transform: scaleX(0);
  transform-origin: left;
  animation: acilisBar 2.8s cubic-bezier(0.35, 0.1, 0.25, 1) 0.15s forwards;
}

@keyframes acilisBar {
  to { transform: scaleX(1); }
}

.acilis__yuzde {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--renk-gri);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   21. DUYARLI TASARIM (RESPONSIVE)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hizmet-grid,
  .ozellik-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ekip-grid,
  .ekip-grid--dortlu {
    grid-template-columns: repeat(2, 1fr);
  }

  .sayac-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  /* Mobil menü */
  .navbar__hamburger {
    display: grid;
  }

  .navbar__cta {
    display: none;
  }

  .navbar__menu {
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 38, 74, 0.8), transparent 70%),
      rgba(3, 6, 16, 0.97);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gecis-orta), visibility var(--gecis-orta);
  }

  .menu-acik .navbar__menu {
    opacity: 1;
    visibility: visible;
  }

  .navbar__link {
    font-size: 1.35rem;
    font-family: var(--font-baslik);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.45s ease, color var(--gecis-hizli);
    transition-delay: calc(var(--menu-sira, 0) * 60ms);
  }

  .menu-acik .navbar__link {
    opacity: 1;
    transform: none;
  }

  .navbar__menu .navbar__mobil-cta {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease 0.4s, transform 0.45s ease 0.4s;
  }

  .menu-acik .navbar__mobil-cta {
    opacity: 1;
    transform: none;
  }

  body.menu-acik {
    overflow: hidden;
  }

  .hakkimizda-onizleme,
  .icerik-blok,
  .misyon-grid,
  .hizmet-detay-grid,
  .iletisim-yerlesim {
    grid-template-columns: 1fr;
  }

  .icerik-blok--ters .icerik-blok__gorsel {
    order: 0;
  }

  .hakkimizda-onizleme__deneyim {
    right: 1rem;
  }
}

@media (min-width: 901px) {
  /* Masaüstünde mobil CTA gizli */
  .navbar__mobil-cta {
    display: none;
  }
}

@media (max-width: 640px) {
  .hizmet-grid,
  .ozellik-grid,
  .ekip-grid,
  .ekip-grid--dortlu,
  .ilke-grid,
  .form-satir,
  .iletisim-hizli-butonlar {
    grid-template-columns: 1fr;
  }

  .sayac-band {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }

  .hero__butonlar .btn,
  .cta__butonlar .btn {
    width: 100%;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__alt {
    justify-content: center;
    text-align: center;
  }

  .hero__icerik {
    padding-block: 7rem 5rem;
  }
}

/* ------------------------------------------------------------
   22. HAREKET AZALTMA TERCİHİ (ERİŞİLEBİLİRLİK)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}