/* ==========================================================================
   main.css — Linda Sun Güzellik (tam sürüm, temiz)
   Amaç: Navbar tüm sayfalarda tepeye sabit + dropdownlar yalnızca .open ile görünür
   Not: Body'ye padding-top verilmez; üst boşluğu .with-fixed-navbar yönetir.
   ========================================================================== */

/* ------------------------------
   0) Değişkenler & Reset
   ------------------------------ */
:root {
  --nav-h: 80px;             /* Masaüstü navbar yüksekliği */
  --nav-h-mobile: 74px;      /* Tablet/Mobil navbar yüksekliği */
  --bg-body: #0E1E40;        /* Sayfa genel zemin (lacivert) */
  --fg-body: #f7f8fc;        /* Genel yazı rengi */
  --fg-link: #8ec5ff;
  --fg-link-hover: #8ec5ff;
  --fg-heading: #ffffff;

  --nav-bg: #FAFBFD;         /* Navbar açık zemin */
  --nav-fg: #1F2937;         /* Navbar metin */
  --border-subtle: rgba(0,0,0,.06);
  --shadow-1: 0 8px 24px rgba(0,0,0,.06);

  --card-bg: #ffffff;
  --card-fg: #111827;
  --brand-1: #0B66E3;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 18px;
  --space-8: 20px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji", sans-serif;
  line-height: 1.5;
  color: var(--fg-body);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Linkler */
a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Erişilebilirlik */
:focus-visible {
  outline: 2px solid #3994E4;
  outline-offset: 2px;
}

/* İçerik alanı */
.page {
  padding: 24px 16px 64px;
}
.section {
  max-width: 1100px;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   1) NAVBAR (header.nav-wrap[data-sticky="nav"])
   Yapı:
     <header class="nav-wrap" data-sticky="nav">
       <a class="brand"><img class="logo"></a>
       <nav class="nav"><ul class="menu">...</ul></nav>
       <div class="nav-right"> (dil + sosyal) </div>
     </header>
   ------------------------------------------------------------ */
[data-sticky="nav"] {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-1);
  z-index: 1000;            /* dropdownların üstte kalması için */
}
@media (max-width: 991px) {
  [data-sticky="nav"] { height: var(--nav-h-mobile); }
}

/* İçeriği nav yüksekliği kadar aşağı it (body'ye asla padding verme) */
.with-fixed-navbar { padding-top: var(--nav-h); }
@media (max-width: 991px) {
  .with-fixed-navbar { padding-top: var(--nav-h-mobile); }
}

/* Sol: Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  height: 100%;
}
.logo {
  display: block;
  height: 58px;
  width: auto;
}
@media (max-width: 1024px) { .logo { height: 52px; } }
@media (max-width: 820px)  { .logo { height: 46px; } }

/* Orta: Menü (merkezde) */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: center;
}
.menu {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1024px) { .menu { gap: 14px; } }
@media (max-width: 820px)  { .menu { gap: 10px; } }
@media (max-width: 640px)  { .menu { gap: 8px; } }

.menu > li > a,
.menu > li > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--nav-fg);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.menu > li > a:hover,
.menu > li > .dropdown-toggle:hover {
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}
@media (max-width: 1024px) {
  .menu > li > a,
  .menu > li > .dropdown-toggle {
    height: 42px; padding: 0 12px; font-size: 15px;
  }
}
@media (max-width: 820px) {
  .menu > li > a,
  .menu > li > .dropdown-toggle {
    height: 40px; padding: 0 10px; font-size: 14.5px;
  }
}
@media (max-width: 640px) {
  .menu > li > a,
  .menu > li > .dropdown-toggle {
    padding: 0 8px;
  }
}

/* Dropdown ebeveyni */
.has-dropdown { position: relative; }

/* Dropdown kutusu – SADECE .open ile görünür (hover ile DEĞİL) */
.has-dropdown .dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius-lg);
  padding: 8px;
  margin: 0;
  list-style: none;

  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  box-shadow: 0 22px 50px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.10);
  z-index: 2000;
}
.has-dropdown.open .dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease;
}



/* Dropdown maddeleri */
.dropdown > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  color: var(--card-fg);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown > li > a:hover { background: #F3F7FF; color: var(--brand-1); }

/* Açıkken toggle'a hafif durum stili istersen */
.has-dropdown.open > .dropdown-toggle { filter: brightness(0.98); }

/* Sağ: Dil & Sosyaller */
.nav-right {
  position: absolute;
  right: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ------------------------------
   2) Dil Menüsü
   ------------------------------ */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: var(--nav-fg);
  font-weight: 600;
  cursor: pointer;
}
.flag-icon {
  width: 18px; height: 18px;
  border-radius: 2px;
  display: inline-block; object-fit: cover;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 50px rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.10);
  z-index: 2100;

  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.lang-switch.open .lang-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease;
}
.lang-menu li { margin: 0; padding: 0; }
.lang-menu button {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);

  color: var(--card-fg);
  font-weight: 600;
  font-size: 14.5px;
  text-align: left;
}
.lang-menu button:hover {
  background: #F3F7FF;
  color: var(--brand-1);
}

/* ------------------------------
   3) Sosyal İkonlar
   ------------------------------ */
.socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.socials .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--nav-fg);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.socials .ico:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  color: var(--brand-1);
}

/* ------------------------------
   4) Responsive Ek Düzenlemeler
   ------------------------------ */
/* 1024 ve altı: ufak daralmalar yukarıda yapıldı (logo/menu). Gerekirse ekle. */

/* 820 ve altı: Navbar yüksekliği düştü; spacing zaten güncellendi. */

/* 640 ve altı: Menü aralıkları daraltıldı. Gerekirse ikon boyutları ufaltıldı. */

/* ------------------------------
   5) Yardımcı Sınıflar
   ------------------------------ */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}


/* === DROPDOWN CLICK-ONLY — güvenlik katmanı ===========================
   Açıldığında (.open) hover etkisi olsa bile MENÜ GÖRÜNÜR KALSIN
   (Başka bir dosyada yanlışlıkla hover kuralı eklenmiş olsa bile bunu ezer)
====================================================================== */
.has-dropdown.open:hover .dropdown {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: opacity .15s ease, transform .15s ease;
}


/* === HAMBURGER / MOBİL MENÜ ======================================== */
/* 2.1) Toggle butonu (masaüstünde gizli) */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff; color: #111;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.nav-toggle .bar {
  display: block;
  width: 20px; height: 2px;
  background: #111;
  margin: 3px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle:hover { box-shadow: 0 8px 16px rgba(0,0,0,.08); }

/* 2.2) Mobilde görünür, menü panel olur */
@media (max-width: 991px) {
  /* Toggle görünür olsun */
  .nav-toggle { display: inline-flex; }

  /* Sosyal ikonları mobilde gizlemek istersen: */
  .socials { display: none; }

  /* Orta menü panel gibi davransın */
  header.nav-wrap[data-sticky="nav"] .nav {
    position: fixed !important;
    top: var(--nav-h-mobile); left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    padding: 12px;
    transform: translateY(-120%);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  }
  /* Header mobil-açıkken paneli göster */
  header.nav-wrap[data-sticky="nav"].mobile-open .nav {
    transform: translateY(0);
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Menü dikeyleşsin */
  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .menu > li > a,
  .menu > li > .dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    height: 44px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
  }

  /* Dropdown’lar mobilde "inline" açılsın */
  .has-dropdown .dropdown {
    position: static !important;
    display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none;
    border: 0; padding: 0 0 8px 12px; margin-top: 6px;
    background: transparent;
  }
  .has-dropdown.open .dropdown { display: block; }

  /* Hamburger X animasyonu (isteğe bağlı) */
  header.nav-wrap.mobile-open .nav-toggle .bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  header.nav-wrap.mobile-open .nav-toggle .bar:nth-child(2) {
    opacity: 0;
  }
  header.nav-wrap.mobile-open .nav-toggle .bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* Mobil açıkken body kaymasın */
  body.no-scroll { overflow: hidden; }
}

/* === HAMBURGER / MOBİL MENÜ ======================================== */
/* 2.1) Toggle butonu (masaüstünde gizli) */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff; color: #111;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.nav-toggle .bar {
  display: block;
  width: 20px; height: 2px;
  background: #111;
  margin: 3px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle:hover { box-shadow: 0 8px 16px rgba(0,0,0,.08); }

/* 2.2) Mobilde görünür, menü panel olur */
@media (max-width: 991px) {
  /* Toggle görünür olsun */
  .nav-toggle { display: inline-flex; }

  /* Sosyal ikonları mobilde gizlemek istersen: */
  .socials { display: none; }

  /* Orta menü panel gibi davransın */
  header.nav-wrap[data-sticky="nav"] .nav {
    position: fixed !important;
    top: var(--nav-h-mobile); left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    padding: 12px;
    transform: translateY(-120%);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  }
  /* Header mobil-açıkken paneli göster */
  header.nav-wrap[data-sticky="nav"].mobile-open .nav {
    transform: translateY(0);
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Menü dikeyleşsin */
  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .menu > li > a,
  .menu > li > .dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    height: 44px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
  }

  /* Dropdown’lar mobilde "inline" açılsın */
  .has-dropdown .dropdown {
    position: static !important;
    display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none;
    border: 0; padding: 0 0 8px 12px; margin-top: 6px;
    background: transparent;
  }
  .has-dropdown.open .dropdown { display: block; }

  /* Hamburger X animasyonu (isteğe bağlı) */
  header.nav-wrap.mobile-open .nav-toggle .bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  header.nav-wrap.mobile-open .nav-toggle .bar:nth-child(2) {
    opacity: 0;
  }
  header.nav-wrap.mobile-open .nav-toggle .bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* Mobil açıkken body kaymasın */
  body.no-scroll { overflow: hidden; }
}
/* === NAV: Hamburger ve Mobil Panel – FİNAL OVERRIDE ================== */
/* 0) Varsayılan yükseklikler */
:root { --nav-h: 80px; --nav-h-mobile: 74px; }

/* 1) Hamburger görünümü: .bar çakışmalarını sıfırla (hem > span hem .bar için) */
.nav-toggle { 
  display: none; 
  align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px; background: #fff; color: #111; cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.nav-toggle > span,
.nav-toggle .bar {
  display: block !important;
  width: 22px !important; height: 2px !important;
  margin: 4px 0 !important;
  background: currentColor !important;
  border-radius: 0 !important;
  position: static !important;  /* başka yerden absolute geliyorsa iptal */
  opacity: 1 !important;
  transition: transform .2s ease, opacity .2s ease;
}

/* 2) Masaüstü görünümü bozulmasın */
@media (min-width: 992px) {
  .lang-switch, .socials { display: inline-flex !important; }
  .nav-toggle { display: none !important; }
}

/* 3) Mobil: hamburger görünsün, panel ekranı kaplamasın */
@media (max-width: 991px) {
  .nav-toggle { display: inline-flex !important; }

  /* Dil + sosyal istersen mobilde de kalsın (gizlemek istersen bu iki satırı sil) */
  .lang-switch, .socials { display: inline-flex !important; }

  /* Panel: sabit üstte, sadece içerik kadar, taşarsa kaydırılsın */
  header.nav-wrap[data-sticky="nav"] .nav {
    position: fixed !important;
    top: var(--nav-h-mobile); left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    padding: 12px;
    transform: translateY(-120%);
    opacity: 0; pointer-events: none; visibility: hidden;
    max-height: calc(100vh - var(--nav-h-mobile));
    overflow: auto;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  }
  header.nav-wrap[data-sticky="nav"].mobile-open .nav {
    transform: translateY(0);
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Menü dikeyleşsin */
  .menu { flex-direction: column; align-items: stretch; gap: 6px; }
  .menu > li > a, .menu > li > .dropdown-toggle {
    width: 100%; justify-content: flex-start; height: 44px; padding: 0 10px;
    background: #fff; border: 1px solid rgba(0,0,0,.06);
  }

  /* Dropdown’lar mobilde inline açılsın */
  .has-dropdown .dropdown {
    position: static !important; display: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    box-shadow: none; border: 0; padding: 0 0 8px 12px; margin-top: 6px; background: transparent;
  }
  .has-dropdown.open .dropdown { display: block; }

  /* Hamburger X animasyonu (isteğe bağlı) */
  header.nav-wrap.mobile-open .nav-toggle > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  header.nav-wrap.mobile-open .nav-toggle > span:nth-child(2) { opacity: 0; }
  header.nav-wrap.mobile-open .nav-toggle > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Mobil açıkken body kaymasın */
  body.no-scroll { overflow: hidden; }
}
/* === MOBILE NAV (≤768px) — küçük panel & sosyal ikon gizleme ========== */
:root { --nav-h-mobile: 74px; } /* yoksa güvenli varsayılan */

@media (max-width: 768px) {
  /* 1) Sosyal ikonlar gizli */
  .socials { display: none !important; }

  /* 2) Menü: sağda küçük bir panel olarak açılsın (tam ekran değil) */
  header.nav-wrap[data-sticky="nav"] .nav {
    position: fixed !important;
    top: var(--nav-h-mobile) !important;
    right: 12px !important;
    left: auto !important;
    width: min(92vw, 340px) !important;           /* küçük panel genişliği */
    max-height: calc(100vh - var(--nav-h-mobile) - 24px) !important;
    overflow: auto !important;
@media (max-width: 768px) {
  header.nav-wrap[data-sticky="nav"] .nav {
    position: fixed !important;
    top: var(--nav-h-mobile) !important;
    right: 12px !important;
    left: auto !important;
    width: min(92vw, 340px) !important;
    max-height: calc(100vh - var(--nav-h-mobile) - 24px) !important;
    overflow: auto !important;
    /* ...devamı... */
  }
  /* ... */
}
    display: block !important;          /* flex → block */
    height: auto !important;            /* %100 yüksekliği iptal */
    align-items: stretch !important;    /* olası kalıntıyı ez */

    

    background: #fff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.14) !important;
    padding: 12px !important;
    z-index: 2200 !important;

    /* kapalıyken gizli */
    transform: translateY(-10px) scale(.98) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s !important;
  }

  /* Açıkken görünür */
  header.nav-wrap[data-sticky="nav"].mobile-open .nav {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  /* 3) Dikey menü düzeni */
  .menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .menu > li > a,
  .menu > li > .dropdown-toggle {
    width: 100% !important;
    justify-content: flex-start !important;
    height: 44px !important;
    padding: 0 10px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 4) Dropdown’lar mobilde panel içinde inline açılsın */
  .has-dropdown .dropdown {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 6px 0 8px 12px !important;
    margin-top: 6px !important;
    background: transparent !important;
  }
  .has-dropdown.open .dropdown { display: block !important; }

  /* 5) Hamburger çizgileri (çakışmaları ez) */
  .nav-toggle { display: inline-flex !important; }
  .nav-toggle > span,
  .nav-toggle .bar {
    display: block !important;
    width: 22px !important; height: 2px !important;
    margin: 4px 0 !important;
    background: currentColor !important;
    position: static !important;
    opacity: 1 !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  /* X animasyonu (isteğe bağlı) */
  header.nav-wrap.mobile-open .nav-toggle > span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  header.nav-wrap.mobile-open .nav-toggle > span:nth-child(2) { opacity: 0 !important; }
  header.nav-wrap.mobile-open .nav-toggle > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }

  /* Panel açıkken sayfa kaymasın */
  body.no-scroll { overflow: hidden !important; }
}

/* ================== FOOTER (ortak) ================== */
.site-footer {
  --footer-bg: #0d1422;
  --footer-fg: #e9eef5;
  --footer-muted: #9fb1c6;
  --footer-border: #1d2a3b;
  --accent: #10b981; /* vurgular (ikon ışığı vs) */

  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-border);
  margin-top: 40px;
}
.site-footer .footer-wrap {
  max-width: 1100px; margin: 0 auto; padding: 28px 16px 40px;
  display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-footer a { color: var(--footer-fg); text-decoration: none; }
.site-footer a:hover { opacity: .9; text-decoration: underline; }

.site-footer .f-brand { font-size: 20px; margin: 0 0 6px; }
.site-footer .f-tagline { margin: 0 0 12px; color: var(--footer-muted); }
.site-footer .f-copy { margin: 10px 0 0; color: var(--footer-muted); font-size: 14px; }

.site-footer .f-title { font-size: 16px; letter-spacing:.02em; text-transform: uppercase;
  color: var(--footer-muted); margin: 12px 0 8px; }
.site-footer .f-address { font-style: normal; line-height: 1.5; margin: 0 0 6px; }

.site-footer .f-social { display: flex; gap: 10px; }
.site-footer .f-social a { width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.site-footer .f-social a:hover { background: rgba(255,255,255,.12); }

/* Telefon & WhatsApp satırları (hafif ışıklı animasyon) */
.hotlines { display: grid; gap: 8px; margin: 6px 0 12px; }
.hotline { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04); position: relative; overflow: hidden; }
.hotline svg { width: 18px; height: 18px; }
.hotline.phone::after,
.hotline.whatsapp::after {
  content: ""; position: absolute; inset: -20%; border-radius: 18px;
  background: radial-gradient( circle at 20% 20%, var(--accent), transparent 45% );
  opacity: .0; transform: scale(.8);
  transition: opacity .3s ease, transform .3s ease;
}
.hotline:hover::after { opacity: .15; transform: scale(1); }
/* nazik bir nabız */
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.0)}50%{box-shadow:0 0 12px 0 rgba(16,185,129,.35)}}
.hotline.whatsapp { animation: pulseGlow 2.4s infinite; }
@media (prefers-reduced-motion: reduce){ .hotline.whatsapp { animation: none; } }

.f-hours strong { font-weight: 600; }

/* Responsive */
@media (max-width: 900px){
  .site-footer .footer-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .site-footer .footer-wrap { grid-template-columns: 1fr; }
}

/* ===== Tema: KOYU (varsayılan) ===== */
.site-footer.theme-dark {
  --footer-bg: #0d1422;        /* mevcut koyu laciverte yakın */
  --footer-fg: #e9eef5;
  --footer-muted: #9fb1c6;
  --footer-border: #1d2a3b;    /* body’den ayıran çizgi */
  --accent: #10b981;
}

/* ===== Tema: AÇIK ===== */
.site-footer.theme-light {
  --footer-bg: #f7fafc;
  --footer-fg: #0b1220;
  --footer-muted: #475569;
  --footer-border: #e5e7eb;
  --accent: #0ea5e9;
}

/* Açık temada sosyal buton arkaplanlarını biraz koyulaştır */
.site-footer.theme-light .f-social a {
  background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06);
}
.site-footer.theme-light .hotline { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }

/* === STICKY FOOTER (footer her zaman sayfanın en altında) ============ */
/* Body’i dikey flex container yap */
html, body { height: 100%; }
body {
  min-height: 100svh;              /* mobil tarayıcı barlarına dayanıklı yükseklik */
  display: flex;
  flex-direction: column;
}

/* İçerik alanı yer tutsun (kısa sayfalarda boşluğu o doldursun) */
main, .page, .page.with-fixed-navbar { flex: 1 0 auto; }

/* Footer’ı alta it (kısa sayfalarda bile en altta dursun) */
.site-footer { margin-top: auto !important; }
/* ====== HAKKIMIZDA BÖLÜMÜ ====== */
.about { padding: 40px 0 56px; }
.about-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* Masaüstü: yazı solda, görsel sağda */
  gap: 24px;
  align-items: center;
}
.about-title {
  color: var(--fg-heading);
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 12px;
}
.about .richtext p,
.about .richtext li { color: var(--fg-body); }
.about-media {
  margin: 0;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.about-media img { display: block; width: 100%; height: auto; }

/* Mobil: görsel ÜSTTE, metin ALTA geçsin */
@media (max-width: 900px){
  .about-wrap { grid-template-columns: 1fr; gap: 18px; }
  .about-media { order: -1; } /* görseli üste al */
}

@media (max-width: 640px){
  .about { padding: 28px 0 44px; }
  .about-title { font-size: 26px; }
}

/* Word’den gelen paragraflar için nazik boşluklar */
.richtext p { margin: 0 0 12px; }
.richtext ul, .richtext ol { margin: 12px 0 12px 20px; }

/* Lazer Epilasyon – görsel boyut & çiftli dizilim */
.lazer-epilasyon .media--half {
  max-width: 560px;          /* ~sayfa genişliğinin yarısı (1100px ≈ 550px) */
  margin: 12px auto 20px;    /* ortaya al */
}
.lazer-epilasyon .media-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0 20px;
  align-items: start;
}
.lazer-epilasyon .media-row .about-media { margin: 0; } /* satır içindeki figure’ler boşluksuz */

@media (max-width: 720px){
  .lazer-epilasyon .media-row { grid-template-columns: 1fr; gap: 12px; } /* mobilde alt alta */
  .lazer-epilasyon .media--half { max-width: 100%; }                      /* mobilde tam genişlik */
}

/* Hero görselini sola hizala */
.lazer-epilasyon .about-media.media--half.media--left {
  margin-left: 0;
  margin-right: auto; /* ortalamayı iptal eder, sola yaslar */
}

/* Lazer Epilasyon — başlık üst boşluk ve anchor offset */
.lazer-epilasyon .about-title {
  margin-top: 28px;         /* önce 10px’di; artık daha aşağıdan başlar */
}

#lazer-epilasyon {
  scroll-margin-top: 84px;  /* menüden bu anchor’a atlanınca navbar altında kalmasın */
}

/* Mobilde biraz daha küçük boşluk yeterli */
@media (max-width: 640px){
  .lazer-epilasyon .about-title { margin-top: 20px; }
}

/* Hero görselini sola hizala */
.lazer-epilasyon .about-media.media--half.media--left {
  margin-left: 0;
  margin-right: auto; /* ortalamayı iptal eder, sola yaslar */
}
/* İĞNELİ EPİLASYON sayfasında tüm görselleri max 500px ile sınırla */
.needle-epilation .about-media {
  max-width: 500px;
  margin: 12px auto 20px;   /* ortalı görünüm */
}
.needle-epilation .about-media img {
  width: 100%;
  height: auto;
}
.needle-epilation .about-media:first-of-type{
  margin-top: 50px !important;
}
/* İğneli Epilasyon – H1 başlık, navbar'dan 50px aşağı */
.needle-epilation { padding-top: 1px; }   /* margin collapse'ı kırar */
.needle-epilation .about-title { margin-top: 50px; }
/* İğneli Epilasyon – ilk görseli sola hizala */
.needle-epilation .about-media:first-of-type{
  margin-left: 0 !important;
  margin-right: auto !important; /* diğerleri ortada kalsın */
}
/* İğneli Epilasyon – YouTube embed 500px */
.needle-epilation .video-embed{
  max-width: 500px;   /* genişliği burada sınırlıyoruz */
  width: 100%;
  margin: 50px auto 20px;  /* ortala; solda olsun istersen left için aşağıya bak */
}

/* Soldan hizalı istiyorsan */
.needle-epilation .video-embed.left{
  margin-left: 0;
  margin-right: auto;
}
/* ===== HAKKIMIZDA — Görsel üstte ortada düzen ===== */
.about-wrap {
  display: block; /* grid yerine blok */
  text-align: center;
}

.about-title {
  margin-top: 50px;   /* navbar'dan 50px aşağı */
  text-align: center;
}

.about-media {
  margin: 35px auto 24px; /* başlıktan 35px aşağı, ortalı */
  max-width: 300px;       /* görsel genişliği sabit */
}

.about-media img {
  display: block;
  width: 100%;
  height: auto;
}
/* Hakkımızda metin hizalaması */
.about .richtext {
  text-align: left;
  max-width: 800px;   /* isteğe bağlı: çok geniş olmasın diye sınır */
  margin: 0 auto;     /* ortalanmış bir blok ama içeriği sola hizalı */
}

/* ===== HAKKIMIZDA — tek sütun, başlık yukarıda, görsel 500px ===== */
.about { 
  padding-top: 0 !important;              /* bölümün 40px üst padding’ini iptal et */
}

.about-wrap {
  display: block !important;              /* grid → block */
  text-align: center;                      /* başlık/görsel merkez */
}

.about-title {
  margin-top: 24px !important;            /* navbar’dan sonra daha yakın dursun */
  text-align: center !important;
}

.about-media {
  margin: 35px auto 24px !important;      /* başlıktan 35px aşağı */
  max-width: 500px !important;            /* görsel genişliği */
}
.about-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Metin bloğu ortada dursun ama satırlar sola hizalansın */
.about .richtext {
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: left !important;
}
/* ===== CİLT BAKIMI — sayfaya özel düzen ===== */
.cilt-bakimi { 
  padding-top: 0; /* .with-fixed-navbar boşluğuna ek boşluk gelmesin */
}

/* Başlık: navbar’dan 35px aşağı, ortalı */
.cilt-bakimi .about-title {
  margin-top: 35px;
  text-align: center;
}

/* Sayfa gövdesi tek kolon gibi davransın */
.cilt-bakimi .about-wrap {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}

/* Metin bloğu: satırlar sola, blok ortada */
.cilt-bakimi .richtext {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

/* Görseller: varsayılan sola dayalı, max 500px */
.cilt-bakimi .about-media {
  max-width: 500px;
  margin: 16px 0;         /* sola dayalı görünüm için auto yok */
}
.cilt-bakimi .about-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero görseli: ortalı */
.cilt-bakimi .about-media.hero {
  margin: 20px auto 20px; /* başlığın hemen altında, ortalı */
}

/* Çift görseller (Word’de yan yana verilenler) için 2’li satır */
.cilt-bakimi .media-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.cilt-bakimi .media-row .about-media { margin: 12px 0; }

@media (max-width: 720px){
  .cilt-bakimi .media-row { grid-template-columns: 1fr; }
  /* Mobilde 500px'lik görseller küçük ekrana sığsın */
  .cilt-bakimi .about-media { max-width: 100%; }
}
/* === CİLT BAKIMI — Tekli görseller sola, sadece hero ortada === */

/* Her ihtimale karşı ebeveynde olası merkezlemeyi etkisizleştir */
.cilt-bakimi .about-wrap,
.cilt-bakimi .about-content { text-align: left; }

/* Varsayılan: tüm görseller sola yaslı */
.cilt-bakimi .about-media {
  display: block;
  max-width: 500px;
  margin-left: 0 !important;   /* sola yasla */
  margin-right: 0 !important;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Sadece HERO görseli ortalı kalsın */
.cilt-bakimi .about-media.hero {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* İkili görseller grid içinde de sola yaslı görünsün */
.cilt-bakimi .media-row .about-media {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* === İĞNELİ EPİLASYON — başlık + ilk görsel ortada, diğerleri sola === */
.igneli-epilasyon { 
  padding-top: 0 !important; /* sabit navbar boşluğuna ekstra pad gelmesin */
}

/* Başlık: navbar’dan 35px aşağı, ortalı */
.igneli-epilasyon .about-title {
  margin-top: 35px !important;
  text-align: center !important;
}

/* Sayfa gövdesi sol hizada davransın (sadece başlık/hero merkezlenecek) */
.igneli-epilasyon .about-wrap,
.igneli-epilasyon .about-content { 
  text-align: left !important;
}

/* Varsayılan görseller: sola yaslı, 500px genişlik sınırı */
.igneli-epilasyon .about-media {
  max-width: 500px;
  margin: 16px 0 !important;   /* sola hizalı görünüm için auto yok */
}
.igneli-epilasyon .about-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* SADECE ilk görsel (HERO) ortalı */
.igneli-epilasyon .about-media.hero {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Yan yana görseller için grid */
.igneli-epilasyon .media-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.igneli-epilasyon .media-row .about-media { margin: 12px 0 !important; }

/* Video yerleşimi (YouTube vb.) */
.igneli-epilasyon .video-embed { 
  max-width: 500px; 
  margin: 16px 0 !important;   /* sola yaslı */
}

@media (max-width: 720px){
  .igneli-epilasyon .media-row { grid-template-columns: 1fr; }
  .igneli-epilasyon .about-media,
  .igneli-epilasyon .video-embed { max-width: 100%; }
}
/* === İĞNELİ EPİLASYON — YouTube video boyut ve hizalama === */
.igneli-epilasyon .video-embed {
  position: relative;           /* iframe buna göre konumlanacak */
  width: 100%;
  max-width: 500px;             /* diğer görsellerle tutarlı */
  margin: 16px 0 !important;    /* sola yaslı */
  overflow: hidden;
}

/* 16:9 oranı için klasik padding hack (tüm tarayıcılar için sağlam) */
.igneli-epilasyon .video-embed::before {
  content: "";
  display: block;
  padding-top: 56.25%;          /* 9/16 = 0.5625 */
}

/* iframe kutuyu tam doldursun */
.igneli-epilasyon .video-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

@media (max-width: 720px){
  .igneli-epilasyon .video-embed { max-width: 100%; } /* mobilde tam genişlik */
}
/* === LAZER EPİLASYON — başlık + ilk görsel ortada, diğerleri sola === */
.lazer-epilasyon { 
  padding-top: 0 !important; /* sabit navbar boşluğuna ekstra pad gelmesin */
}

/* Başlık: navbar’dan 35px aşağı, ortalı */
.lazer-epilasyon .about-title {
  margin-top: 35px !important;
  text-align: center !important;
}

/* Sayfa gövdesi/varsayılan hizalama: sola */
.lazer-epilasyon .about-wrap,
.lazer-epilasyon .about-content { 
  text-align: left !important;
}

/* Varsayılan görseller: sola yaslı, 500px genişlik sınırı */
.lazer-epilasyon .about-media {
  display: block;
  max-width: 500px;
  margin: 16px 0 !important;   /* sola hizalı görünüm için auto yok */
}
.lazer-epilasyon .about-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* SADECE ilk görsel (HERO) ortalı */
.lazer-epilasyon .about-media.hero {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Yan yana görseller için grid */
.lazer-epilasyon .media-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.lazer-epilasyon .media-row .about-media { margin: 12px 0 !important; }

@media (max-width: 720px){
  .lazer-epilasyon .media-row { grid-template-columns: 1fr; }
  .lazer-epilasyon .about-media { max-width: 100%; } /* mobilde tam genişlik */
}
/* === SAÇ SİMÜLASYONU — başlık + ilk görsel ortada, diğerleri sola === */
.sac-simulasyonu {
  padding-top: 0 !important; /* sabit navbar boşluğuna ekstra pad gelmesin */
}

/* Başlık: navbar’dan 35px aşağı, ortalı */
.sac-simulasyonu .about-title {
  margin-top: 35px !important;
  text-align: center !important;
}

/* Varsayılan hizalama: sola */
.sac-simulasyonu .about-wrap,
.sac-simulasyonu .about-content {
  text-align: left !important;
}

/* Görseller: sola yaslı, 500px genişlik sınırı */
.sac-simulasyonu .about-media {
  display: block;
  max-width: 500px;
  margin: 16px 0 !important;   /* sola hizalı görünüm için auto yok */
}
.sac-simulasyonu .about-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* SADECE ilk görsel (HERO) ortalı */
.sac-simulasyonu .about-media.hero {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Yan yana görseller için grid */
.sac-simulasyonu .media-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.sac-simulasyonu .media-row .about-media { margin: 12px 0 !important; }

@media (max-width: 720px){
  .sac-simulasyonu .media-row { grid-template-columns: 1fr; }
  .sac-simulasyonu .about-media { max-width: 100%; } /* mobilde tam genişlik */
}

/* YouTube video — sola yaslı, 16:9, 500px sınırı */
.sac-simulasyonu .video-embed {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 16px 0 !important;   /* sola yaslı */
  overflow: hidden;
}
.sac-simulasyonu .video-embed::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}
.sac-simulasyonu .video-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
/* === İLETİŞİM — sayfa düzeni & harita =============================== */
.contact { padding-top: 0; }

.contact .page-title{
  margin-top: 35px;            /* navbar'dan 35px aşağı */
  text-align: center;
  color: var(--fg-heading);
}

.contact .contact-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;  /* Sol: harita  |  Sağ: kart */
  gap: 20px;
  align-items: start;
}

/* Harita: responsive 16:9 oran, yumuşak kart görünümü */
.map-embed{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-1);
  background: #fff;
}
.map-embed::before{
  content: "";
  display: block;
  padding-top: 56.25%;         /* 16:9 oran */
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sağ taraftaki bilgi kartı */
.contact-card{
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 16px;
}
.contact-card h2{ margin: 4px 0 8px; font-size: 18px; }
.contact-card address{ font-style: normal; line-height: 1.6; }

.contact-actions{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.contact-actions a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: #111;
  text-decoration: none;
}
.contact-actions a:hover{ background: #f7f7f7; text-decoration: none; }

@media (max-width: 900px){
  .contact .contact-grid{ grid-template-columns: 1fr; }
}

/* === Navbar düzeni === */
.nav-wrap {
  position: sticky; top: 0; z-index: 1000;
  /* Arka plan varsa: background: #fff; */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* menü sola */
}

.nav .menu {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-right {
  margin-left: auto;            /* sağa it */
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dil menüsü konumlandırma (açılır kapanır) */
.lang-switch { position: relative; }
.lang-switch .lang-menu {
  position: absolute;
  right: 0; top: 100%;
  display: none; /* nav.js veya küçük bir JS ile toggle ediliyor olmalı */
}

/* Mobilde hamburger yanında üst üste binmeyi önlemek için gerekirse */
@media (max-width: 768px) {
  .nav { flex-wrap: wrap; }
  .nav-right { order: 3; width: 100%; justify-content: flex-end; }
}
/* Footer sosyal: sadece ikon göster (güvence) */
.site-footer .f-social a {
  font-size: 0;         /* metni gizle */
  line-height: 0;       /* fazladan yüksekliği önle */
}
.site-footer .f-social a svg {
  width: 20px;
  height: 20px;
}
/* === NAVBAR SABİTLEME (GLOBAL OVERRIDE) === */
header.nav-wrap {
  position: fixed;     /* her koşulda sabit */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;

  z-index: 2000;       /* içeriğin üstünde kalsın */
  background: #fff;    /* içeriğin üzerinden geçerken şeffaf görünmesin */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* hafif gölge (opsiyonel) */
}
/* === NAVBAR YÜKSEKLİĞİ KADAR ÜSTTEN BOŞLUK === */
/* Varsayılan masaüstü navbar yüksekliği ~72–80px civarıdır. Göz kararı 80px koyduk. */
main.page.with-fixed-navbar {
  padding-top: 80px;
}
/* Küçük ekranlarda içeriği biraz daha aşağı it (opsiyonel) */
@media (max-width: 768px) {
  main.page.with-fixed-navbar {
    padding-top: 88px; /* mobilde header biraz daha yüksek görünürse arttır */
  }
}

/* === HERO SLIDER === */
.hero-slider {
  position: relative;
  background: #0b1b3a; /* lacivert zemin */
  overflow: hidden;
  /* Tam ekran olmasın: ortalanmış, makul yükseklik */
  max-width: 1000px;
  margin: 24px auto 40px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.hero-slider .slide {
  position: relative;
  display: none;
}

.hero-slider .slide.is-active {
  display: block;
}

.hero-slider .slide img {
  width: 100%;
  height: 460px;            /* 1000×667 kaynak için dengeli görünüm */
  object-fit: cover;        /* farklı yükseklikleri düzgün oturtur */
  border-radius: 18px;
  transform: scale(1);      /* zoom-in başlangıcı */
  opacity: 0;               /* fade başlangıcı */
  transition:
    opacity 0.8s ease,
    transform 4.5s linear;  /* yavaş zoom-in */
}

/* aktif slayt görünürken */
.hero-slider .slide.is-active img {
  opacity: 1;
  transform: scale(1.05); /* hafif zoom-in */
}

/* CAPTION (overlay slogan) */
.hero-slider .caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
}

.hero-slider .caption:after {
  /* alt kısıma çok hafif okunabilirlik gradyanı */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11,27,58,0.55), rgba(11,27,58,0));
  border-radius: 0 0 18px 18px;
}

.hero-slider .caption-text {
  position: relative;
  max-width: 820px;
  text-align: center;
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  margin: 0 12px;
}

/* Küçük ekran ayarı */
@media (max-width: 768px) {
  .hero-slider {
    margin: 12px auto 24px;
    border-radius: 14px;
  }
  .hero-slider .slide img {
    height: 340px;
    border-radius: 14px;
  }
  .hero-slider .caption:after {
    border-radius: 0 0 14px 14px;
  }
}

/* Hareketi azaltmayı tercih eden kullanıcılar */
@media (prefers-reduced-motion: reduce) {
  .hero-slider .slide img {
    transition: opacity 0.5s ease;
    transform: none !important;
  }
}
/* === HERO: KIRPMA YOK (contain) === */
.hero-slider .slide img {
  width: 100%;
  height: 667px;        /* masaüstü hedef yüksekliğin */
  object-fit: contain;  /* kırpma yok; tüm görsel görünür */
  background: #0b1b3a;  /* bant rengi: lacivert body ile aynı */
  border-radius: 18px;
  opacity: 0;
  transform: none;      /* zoom efektini görsel kırpılmadan uygulamak istersen aşağıdaki varyanta bak */
  transition: opacity 0.8s ease;
}

/* Zoom efektini korumak istersen (kırpmasız, çok hafif) */
.hero-slider .slide.is-active img {
  opacity: 1;
  transform: scale(1.02); /* 1.05 yerine 1.02 daha güvenli, bantları büyütmez */
  transition: opacity 0.8s ease, transform 4.5s linear;
}

@media (max-width: 768px) {
  .hero-slider .slide img {
    height: 420px;      /* mobil için dengeli bir yükseklik */
  }
}

/* === HERO: kırpmasız + ağır geçiş + altta caption === */
.hero-slider { position: relative; }
.hero-slider .slide {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;                /* hepsi üst üste; opaklıkla geçiş */
  transition: opacity 1.4s ease; /* leaving için de geçerli */
}
.hero-slider .slide.is-active { opacity: 1; }

/* Görsel – kırpmasız gösterim */
.hero-slider .slide img {
  width: 100%;
  height: 667px;              /* senin hedef yüksekliğin */
  object-fit: contain;        /* kırpma yok */
  background: #0b1b3a;        /* bantlar lacivert zemine uyumlu */
  border-radius: 18px;
  opacity: 0;                 /* giriş animasyonu */
  transform: scale(1);        /* hafif zoom */
  transition:
    opacity 1.4s ease,        /* daha yavaş fade-in */
    transform 8s linear;      /* yavaş zoom-in */
}
.hero-slider .slide.is-active img {
  opacity: 1;
  transform: scale(1.02);     /* çok hafif zoom-in (kırpmasızda güvenli) */
}

/* CAPTION: altta, gölgeli şerit üzerinde */
.hero-slider .caption {
  position: absolute; inset: 0;
  display: grid;
  align-items: end;           /* alta hizala */
  justify-items: center;
  padding: 20px 16px 28px;    /* alttan nefes */
  pointer-events: none;
}
.hero-slider .caption::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 46%;
  background: linear-gradient(to top, rgba(11,27,58,0.70), rgba(11,27,58,0));
  border-radius: 0 0 18px 18px;
}

/* Metin: alttan yumuşak giriş/çıkış */
.hero-slider .caption-text{
  position: relative;
  max-width: 900px;
  text-align: center;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  margin: 0 12px 4px;
  opacity: 0;
  transform: translateY(14px);
}
@keyframes captionIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-slider .slide.is-active .caption-text{
  animation: captionIn 1200ms ease-out 300ms both; /* foto ile uyumlu, geç girsin */
}
/* çıkışta metni de yumuşat */
.hero-slider .slide.is-leaving .caption-text{
  transition: opacity 1200ms ease, transform 1200ms ease;
  opacity: 0; transform: translateY(14px);
}

/* Mobil yükseklik ayarı */
@media (max-width: 768px){
  .hero-slider .slide img { height: 420px; }
  .hero-slider .caption::after{ height: 54%; border-radius: 0 0 14px 14px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  .hero-slider .slide,
  .hero-slider .slide img,
  .hero-slider .slide.is-active img,
  .hero-slider .caption-text{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .hero-slider .slide { opacity: 0; }
  .hero-slider .slide.is-active { opacity: 1; }
}

/* === HERO: ağır geçiş + daha beyaz yazı === */
.hero-slider .slide{
  position:absolute; inset:0;
  display:block;
  opacity:0;
  transition: opacity 1.8s ease-in-out; /* fade daha yavaş */
}
.hero-slider .slide.is-active{ opacity:1; }

/* Görsel – kırpmasız (contain) + daha yumuşak zoom */
.hero-slider .slide img{
  width:100%;
  height:667px;
  object-fit:contain;
  background:#0b1b3a;
  border-radius:18px;
  opacity:0;
  transform:scale(1);
  transition:
    opacity 2s ease-in-out,
    transform 5s linear;      /* zoom daha da yavaş */
}
.hero-slider .slide.is-active img{
  opacity:1;
  transform:scale(1.08);       /* çok hafif zoom */
}

/* Altta daha koyu bir gradient, metin daha "beyaz" ve belirgin */
.hero-slider .caption{
  position:absolute; inset:0;
  display:grid; align-items:end; justify-items:center;
  padding:20px 16px 28px;
  pointer-events:none;
}
.hero-slider .caption::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:50%;                         /* gölge alanı biraz artır */
  background:linear-gradient(to top, rgba(11,27,58,0.78), rgba(11,27,58,0));
  border-radius:0 0 18px 18px;
}
.hero-slider .caption-text{
  position:relative;
  max-width:900px;
  text-align:center;
  color:#ffffff;                       /* daha beyaz */
  font-size:clamp(20px, 2.2vw, 28px);
  line-height:1.38;
  text-shadow:0 3px 14px rgba(0,0,0,0.55); /* daha güçlü gölge */
  margin:0 12px 4px;
  opacity:0; transform:translateY(16px);
}
@keyframes captionIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}
.hero-slider .slide.is-active .caption-text{
  animation: captionIn 1500ms ease-out 400ms both; /* metin de ağır ve geç girsin */
}
.hero-slider .slide.is-leaving .caption-text{
  transition: opacity 1500ms ease-in, transform 1500ms ease-in;
  opacity:0; transform:translateY(16px);
}

@media (max-width:768px){
  .hero-slider .slide img{ height:420px; }
  .hero-slider .caption::after{ height:56%; border-radius:0 0 14px 14px; }
}

/* === SLIDE görünürlük ve katmanlama === */
.hero-slider { position: relative; overflow: hidden; min-height: 667px; }

.hero-slider .slide{
  position: absolute; inset: 0;
  opacity: 0; 
  pointer-events: none;
  transition: opacity 1200ms ease-in-out; /* DURATION_FADE ile aynı */
  z-index: 0;
  will-change: opacity;
}
.hero-slider .slide.is-active{
  opacity: 1; 
  pointer-events: auto;
  z-index: 2;           /* yeni gelen daima üstte */
}
.hero-slider .slide.is-leaving{
  opacity: 0;
  z-index: 1;           /* altta kalır, sonra temizlenecek */
}

/* === Zoom animasyonu (5s boyunca sürsün) === */
@keyframes zoomIn {
  from { transform: scale(1);    }
  to   { transform: scale(1.10); } /* istersen 1.08 yapabilirsin */
}
.hero-slider .slide img{
  width: 100%; height: 667px; object-fit: contain; background:#0b1b3a;
  border-radius: 18px; transform: scale(1); opacity: 1; /* opaklık wrapper'da */
  animation: none;  /* aktif olunca başlatacağız */
}

/* Aktif slaytta zoom animasyonunu başlatacağız (JS ile güvenli reset) */

/* Zoom, görünme (5s) + fade (1.2s) boyunca sürsün */
@keyframes zoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.12); } /* ister 1.08/1.12 yapabilirsin */
}

.hero-slider .slide img{
  width:100%; height:667px; object-fit:contain; background:#0b1b3a;
  border-radius:18px; transform:scale(1); opacity:1; /* opaklık wrapper'da */
  animation: none;
}

/* Süreyi CSS değişkenleriyle besliyoruz: --zoomDur + --fadeDur */
.hero-slider .slide.is-active img,
.hero-slider .slide.is-leaving img {
  animation: zoomIn calc(var(--zoomDur, 10000ms) + var(--fadeDur, 2500ms)) linear forwards;
}
/* Toplam zoom süresi: görünme + fade (JS bu değişkeni besleyecek) */
@keyframes zoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.12); } /* büyüklüğü istersen 1.08–1.12 arası ayarlarsın */
}

.hero-slider .slide{
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 1200ms ease-in-out; /* DURATION_FADE ile uyumlu */
  z-index: 0;
}
.hero-slider .slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.hero-slider .slide.is-leaving{ opacity: 0; z-index: 1; }

/* Görsel – kırpmasız */
.hero-slider .slide img{
  width: 100%; height: 667px; object-fit: contain; background:#0b1b3a;
  border-radius: 18px;
  /* Animasyonu tek bir yerde tanımla; BAŞTA PAUSED olsun */
  animation: zoomIn var(--animTotal, 6200ms) linear both;
  animation-play-state: paused;
  will-change: transform;
}

/* Aktif veya çıkışta → SADECE play-state'i running yap (property değişmediği için restart olmaz) */
.hero-slider .slide.is-active img,
.hero-slider .slide.is-leaving img{
  animation-play-state: running;
}
/* === HERO: yazıyı gerçekten beyaz ve üstte tut === */
.hero-slider .caption { 
  position: relative;           /* stacking context */
  z-index: 1;                   /* caption katmanı üstte kalsın */
}

.hero-slider .caption::after{
  z-index: 0;                   /* gradyan altta */
}

.hero-slider .caption-text{
  position: relative;
  z-index: 2;                   /* metin, gradyanın ÜSTÜNDE */
  color: #fff !important;       /* beyazı zorla */
  opacity: 1;                   /* animasyon sonrası tam opak */
  mix-blend-mode: normal;       /* olası karışım modlarını kapat */
  filter: none;
  text-shadow: 0 3px 14px rgba(0,0,0,0.55);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Animasyon bittikten sonra opaklığı sabitle (olası gri görünümü engeller) */
.hero-slider .slide.is-active .caption-text{
  animation: captionIn 1500ms ease-out 400ms both;
}
/* === HERO CAPTION ACIL FIX === */
/* Katman sırası: metin en üstte, gölge altta */
.hero-slider .caption{
  position: absolute; inset: 0;
  display: grid; align-items: end; justify-items: center;
  padding: 20px 16px 28px;
  pointer-events: none;
  z-index: 1; /* caption üst katman */
}
.hero-slider .caption::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(to top, rgba(11,27,58,0.78), rgba(11,27,58,0));
  border-radius: 0 0 18px 18px;
  z-index: 0; /* gölge altta */
}

/* Metin: aktifken kesinlikle görünür (animasyona bağımlı değil) */
.hero-slider .caption-text{
  position: relative;
  max-width: 900px;
  text-align: center;
  color: #fff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.55);
  margin: 0 12px 4px;
  opacity: 0;                 /* başlangıç */
  transform: translateY(14px);
  z-index: 2;
  mix-blend-mode: normal;
  filter: none;
}
.hero-slider .slide.is-active .caption-text{
  opacity: 1 !important;      /* animasyon olmasa bile görünür */
  transform: none !important;
  transition: opacity 600ms ease, transform 600ms ease;
}

.gallery {
  padding: 40px 20px;        /* üstten 40px, sağ/sol 20px boşluk */
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;                 /* kutucuklar arası boşluk */
  max-width: 1200px;         /* çok geniş ekranlarda daralsın */
  margin: 0 auto;            /* ortalansın */
}

.gallery-grid a, 
.gallery-grid img {
  display: block;
  width: 100%;
  max-width: 260px;          /* kutucukların eni sınırlı */
  margin: 0 auto;            /* ortalansın */
}

.gallery-grid img {
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Mobil uyumluluk */
@media (max-width: 991.98px){
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .gallery-grid { grid-template-columns: 1fr; }
}
.gallery {
  padding: 40px 20px;   /* masaüstünde boşluk */
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-grid a, 
.gallery-grid img {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

.gallery-grid img {
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Tablet */
@media (max-width: 991.98px){
  .gallery-grid { 
    grid-template-columns: repeat(2, 1fr);
    gap: 18px; 
  }
  .gallery-grid a, .gallery-grid img {
    max-width: 100%;   /* tabletlerde tam sütun genişliği */
  }
}

/* Telefon */
@media (max-width: 575.98px){
  .gallery {
    padding: 25px 10px; /* kenar boşluklarını azalttık */
  }
  .gallery-grid { 
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .gallery-grid a, .gallery-grid img {
    max-width: 95%;    /* kutucuklar ekranın %95'ini kaplasın */
    margin: 0 auto;
  }
}
/* Sadece hero görselinde border ve gölgeyi kaldır */
.about-media.hero {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Hero görselinde border ve gölgeyi kaldır */
.about-media.hero {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Sadece iğneli sayfanın section'ını 1170px yap */
.section.igneli-epilasyon{ max-width:1170px !important; }

/* Hero’yu 1170’e genişlet */
.igneli-epilasyon .about-media.hero{
  max-width:1170px !important;
  width:100% !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.igneli-epilasyon .about-media.hero img{ width:100% !important; height:auto !important; }

/* === Cilt Bakımı sayfası düzenlemesi === */

/* Metin alanı genişlet */
.section.cilt-bakimi,
.cilt-bakimi .about-wrap,
.cilt-bakimi .about-content,
.cilt-bakimi .richtext {
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* HERO özel kural */
.cilt-bakimi .about-media.hero {
  max-width: 1170px !important;
  width: 100% !important;
  margin: 20px auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.cilt-bakimi .about-media.hero img {
  width: 100% !important;
  max-height: 500px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Diğer görseller */
.cilt-bakimi .about-media:not(.hero) {
  max-width: 500px !important;
  margin: 20px auto !important;
}
.cilt-bakimi .about-media:not(.hero) img {
  width: 100% !important;
  max-width: 500px !important;
  max-height: 333px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
/* Diğer görseller - sola yaslı */
.cilt-bakimi .about-media:not(.hero) {
  max-width: 500px !important;
  margin: 20px 0 !important;   /* sadece üst-alt boşluk, yanlarda otomatik merkezleme yok */
  margin-left: 0 !important;   /* sola yasla */
}
.cilt-bakimi .about-media:not(.hero) img {
  width: 100% !important;
  max-width: 500px !important;
  max-height: 333px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
/* === LAZER EPİLASYON — 1170px yerleşim === */

/* Metin ve içerik alanı 1170px */
.section.lazer-epilasyon,
.lazer-epilasyon .about-wrap,
.lazer-epilasyon .about-content,
.lazer-epilasyon .richtext{
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sadece HERO — geniş 1170px, kutusuz, ortalı */
.lazer-epilasyon .about-media.hero{
  max-width: 1170px !important;
  width: 100% !important;
  margin: 20px auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.lazer-epilasyon .about-media.hero img{
  width: 100% !important;
  height: auto !important;
  max-height: 500px !important;   /* hero yükseklik sınırı */
  display: block !important;
  object-fit: cover !important;
}

/* Diğer görseller — 500×333, sola yaslı */
.lazer-epilasyon .about-media:not(.hero){
  max-width: 500px !important;
  width: 100% !important;
  margin: 20px 0 !important;      /* üst-alt boşluk, soldan yaslı */
  margin-left: 0 !important;
  border: none !important;         /* istersen kutuyu kapalı tut */
  box-shadow: none !important;
  background: transparent !important;
}
.lazer-epilasyon .about-media:not(.hero) img{
  width: 100% !important;
  max-width: 500px !important;
  max-height: 333px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* İkili görseller varsa düzgün dizilsin (opsiyonel) */
.lazer-epilasyon .media-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 16px !important;
}
.lazer-epilasyon .media-row .about-media{
  max-width: 100% !important;   /* grid içinde sütunu doldursun */
  margin: 12px 0 !important;
}
/* === SAÇ SİMÜLASYONU — 1170px yerleşim === */

/* Metin ve içerik alanı 1170px */
.section.sac-simulasyonu,
.sac-simulasyonu .about-wrap,
.sac-simulasyonu .about-content,
.sac-simulasyonu .richtext{
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sadece HERO — geniş 1170px, kutusuz, ortalı */
.sac-simulasyonu .about-media.hero{
  max-width: 1170px !important;
  width: 100% !important;
  margin: 20px auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sac-simulasyonu .about-media.hero img{
  width: 100% !important;
  height: auto !important;
  max-height: 500px !important;   /* hero yüksekliği */
  display: block !important;
  object-fit: cover !important;
}

/* Diğer görseller — 500×333, sola yaslı */
.sac-simulasyonu .about-media:not(.hero){
  max-width: 500px !important;
  width: 100% !important;
  margin: 20px 0 !important;      /* üst-alt boşluk, soldan yaslı */
  margin-left: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sac-simulasyonu .about-media:not(.hero) img{
  width: 100% !important;
  max-width: 500px !important;
  max-height: 333px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* İkili görseller için grid (varsa) */
.sac-simulasyonu .media-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 16px !important;
}
.sac-simulasyonu .media-row .about-media{
  max-width: 100% !important;
  margin: 12px 0 !important;
}
/* === HAKKIMIZDA — Final override (id ile) ========================= */
/* 1) Metin ve içerik alanını 1170px yap */
#hakkimizda.section,
#hakkimizda .about-wrap,
#hakkimizda .about-content,
#hakkimizda .richtext {
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) HERO: ilk figure 1170px, ortalı, kutusuz, 500px yükseklik sınırı */
#hakkimizda .about-media:first-of-type {
  max-width: 1170px !important;
  width: 100% !important;
  margin: 20px auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#hakkimizda .about-media:first-of-type img {
  width: 100% !important;
  height: auto !important;
  max-height: 500px !important;
  display: block !important;
  object-fit: cover !important;
}

/* 3) Diğer görseller: 500×333, SOLA yaslı */
#hakkimizda .about-media:not(:first-of-type) {
  max-width: 500px !important;
  width: 100% !important;
  margin: 20px 0 !important;     /* üst-alt boşluk */
  margin-left: 0 !important;     /* sola yasla */
}
#hakkimizda .about-media:not(:first-of-type) img {
  width: 100% !important;
  max-width: 500px !important;
  max-height: 333px !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
/* Hakkımızda HERO görseli */
.hakkimizda .about-media.hero img {
  width: 100% !important;
  height: auto !important;
  max-height: 550px !important;   /* 500 → 550 */
  display: block !important;
  object-fit: cover !important;
}
/* HAKKIMIZDA — HERO kesin 550px */
#hakkimizda .about-media.hero{
  max-width:1170px !important;
  width:100% !important;
  height:550px !important;      /* sabit yükseklik */
  margin:20px auto !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden !important;   /* taşmaları kırp */
}

#hakkimizda .about-media.hero img{
  width:100% !important;
  height:100% !important;       /* konteyneri doldur */
  object-fit:cover !important;  /* taşanı kırp, oranı koru */
}
/* HAKKIMIZDA — HTML'e dokunmadan ilk görseli 550px yap */
#hakkimizda .about-content > .about-media:first-of-type{
  max-width:1170px !important;
  width:100% !important;
  height:550px !important;
  margin:20px auto !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden !important;
}
#hakkimizda .about-content > .about-media:first-of-type img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;  /* 500px sınırını kaldır */
  object-fit:cover !important;
  display:block !important;
}