@charset "UTF-8";
/* =====================================================================
   MERT ASLAN AUTO — ön yüz stilleri
   Palet   : kaporta siyahı + dövme altın (marka afişinden alındı)
   Yapı    : eğik altın etiket + köşesi kesilmiş panel
   Tipo    : Saira Condensed (başlık) / Barlow (gövde)
   ===================================================================== */

@layer sifirla, temel, duzen, bilesen, yardimci;

/* ---------------------------------------------------------------- */
/* Jetonlar                                                          */
/* ---------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* 1. katman — ham renkler */
  --siyah:         #07080b;
  --kurum:         #0b0d12;
  --panel:         #11141b;
  --panel-ust:     #171b24;
  --cizgi-ham:     #272c38;
  --altin:         #e9b93c;
  --altin-parlak:  #fce49a;
  --altin-golge:   #8a6110;
  --krom:          #dfe3ea;
  --gri:           #9aa1ae;
  --yesil:         #25d366;
  --kirmizi:       #e5484d;

  /* 2. katman — anlamsal */
  --zemin:          var(--siyah);
  --zemin-panel:    var(--panel);
  --zemin-yukselti: var(--panel-ust);
  --metin:          #c3c9d4;
  --metin-guclu:    var(--krom);
  --metin-sonuk:    var(--gri);
  --vurgu:          var(--altin);
  --cizgi:          var(--cizgi-ham);
  --cizgi-altin:    color-mix(in oklab, var(--altin) 38%, transparent);

  /* Tipografi */
  --f-baslik: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-govde:  "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.0625rem;
  --t-lg:   1.2rem;
  --t-xl:   clamp(1.45rem, 1.2rem + 1.05vw, 1.95rem);
  --t-2xl:  clamp(1.95rem, 1.35rem + 2.4vw, 3.15rem);
  --t-3xl:  clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  --t-dev:  clamp(3rem, 1rem + 7.6vw, 7.75rem);

  /* Ölçü */
  --olcu:       74rem;   /* içerik genişliği */
  --olcu-dar:   50rem;
  --kenar:      clamp(1.15rem, 4vw, 3.5rem);
  --bolum-bosluk: clamp(4rem, 8vw, 7.5rem);
  --kose:       26px;    /* panel köşe kesimi */

  /* Hareket */
  --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Degrade ara renk uzayı için güvenli kullanım */
:root { --oklab: ; }
@supports (background: linear-gradient(in oklab, red, blue)) {
  :root { --oklab: in oklab; }
}

/* ---------------------------------------------------------------- */
@layer sifirla {
  html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
  html *, html *::before, html *::after { box-sizing: inherit; }

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
  }
  ul[class], ol[class] { padding: 0; list-style: none; }

  img, svg, video, iframe { display: block; max-inline-size: 100%; }
  img { block-size: auto; }

  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; }

  :where(a) { color: inherit; text-decoration: none; }
}

/* ---------------------------------------------------------------- */
@layer temel {
  body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--f-govde);
    font-size: var(--t-base);
    line-height: 1.62;
    font-feature-settings: "tnum" 0;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, .baslik {
    font-family: var(--f-baslik);
    color: var(--metin-guclu);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }
  p + p { margin-block-start: 1em; }

  strong, b { color: var(--metin-guclu); font-weight: 600; }

  ::selection { background: var(--altin); color: #14100a; }

  :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--altin);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Dokunmatikte hedefleri büyüt */
  @media (pointer: coarse) {
    :where(a, button) { min-block-size: 44px; }
  }

  ::-webkit-scrollbar { inline-size: 11px; }
  ::-webkit-scrollbar-track { background: var(--kurum); }
  ::-webkit-scrollbar-thumb {
    background: #333844;
    border: 3px solid var(--kurum);
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--altin-golge); }

  html { scrollbar-color: #333844 var(--kurum); scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

/* ---------------------------------------------------------------- */
@layer duzen {
  .sinir {
    inline-size: min(100% - var(--kenar) * 2, var(--olcu));
    margin-inline: auto;
  }
  .sinir-dar { inline-size: min(100% - var(--kenar) * 2, var(--olcu-dar)); margin-inline: auto; }

  .bolum { padding-block: var(--bolum-bosluk); }
  .bolum-kurum { background: var(--kurum); }
  .bolum-panel { background: var(--zemin-panel); }

  /* Bölüm başlığı: etiket + başlık + açıklama */
  .bolum-basi {
    display: grid;
    gap: 1.15rem;
    margin-block-end: clamp(2.25rem, 4vw, 3.5rem);
  }
  .bolum-basi h2 { font-size: var(--t-2xl); }
  .bolum-basi p {
    max-inline-size: 56ch;
    color: var(--metin-sonuk);
  }

  @container (min-width: 46rem) {
    .bolum-basi.yanyana {
      grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
      align-items: end;
      gap: 2.5rem;
    }
  }
  .bolum { container-type: inline-size; }
}

/* ================================================================ */
/* Bileşenler                                                        */
/* ================================================================ */
@layer bilesen {

  /* --- Eğik altın etiket: marka afişindeki HİZMETLERİMİZ rozeti --- */
  .etiket {
    --etiket-egim: -12deg;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    padding: 0.42rem 1.3rem;
    background: linear-gradient(104deg var(--oklab),
      var(--altin-golge) 0%, var(--altin) 30%,
      var(--altin-parlak) 52%, var(--altin) 74%, var(--altin-golge) 100%);
    color: #17120a;
    font-family: var(--f-baslik);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: skewX(var(--etiket-egim));
  }
  .etiket > * { transform: skewX(calc(var(--etiket-egim) * -1)); }
  .etiket .ikon { inline-size: 1.05em; block-size: 1.05em; }

  .etiket-sade {
    background: none;
    padding-inline: 0;
    color: var(--altin);
    transform: none;
    border-inline-start: 3px solid var(--altin);
    padding-inline-start: 0.85rem;
  }
  .etiket-sade > * { transform: none; }

  /* --- Köşesi kesilmiş panel --- */
  .kesik {
    clip-path: polygon(
      0 0, calc(100% - var(--kose)) 0, 100% var(--kose),
      100% 100%, var(--kose) 100%, 0 calc(100% - var(--kose))
    );
  }

  /* --- Düğmeler --- */
  .dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.7rem;
    font-family: var(--f-baslik);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    /* Düğme yazısı hiçbir genişlikte iki satıra düşmemeli */
    white-space: nowrap;
    transition: background-color var(--gecis), color var(--gecis),
                border-color var(--gecis);
  }
  .dugme .ikon { inline-size: 1.15em; block-size: 1.15em; }
  @media (max-width: 30rem) {
    .dugme { padding-inline: 1.15rem; font-size: 0.95rem; }
  }

  .dugme-altin {
    background: linear-gradient(100deg var(--oklab),
      var(--altin) 0%, var(--altin-parlak) 48%, var(--altin) 100%);
    color: #17120a;
  }
  .dugme-altin:hover:not(:disabled) { background: var(--altin-parlak); }

  .dugme-cizgi {
    border-color: var(--cizgi-altin);
    color: var(--metin-guclu);
  }
  .dugme-cizgi:hover:not(:disabled) {
    border-color: var(--altin);
    color: var(--altin);
  }

  .dugme-yesil { background: var(--yesil); color: #05240f; }
  .dugme-yesil:hover:not(:disabled) { background: #1fbe5b; }

  /* --- Üst şerit: telefon, saat, konum --- */
  .ust-serit {
    background: var(--kurum);
    border-block-end: 1px solid var(--cizgi);
    font-size: var(--t-xs);
    color: var(--metin-sonuk);
  }
  .ust-serit .sinir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    min-block-size: 2.6rem;
    padding-block: 0.35rem;
  }
  .ust-serit-oge { display: inline-flex; align-items: center; gap: 0.45rem; }
  .ust-serit .ikon { inline-size: 0.95rem; block-size: 0.95rem; color: var(--altin); }
  .ust-serit a:hover { color: var(--altin); }
  .ust-serit .sag { margin-inline-start: auto; display: inline-flex; gap: 1.25rem; }
  @media (max-width: 53rem) { .ust-serit .gizle-kucuk { display: none; } }

  /* Telefonda şerit yalnızca numarayı tekrar ediyordu; aynı numara alttaki
     "Ara" düğmesinde ve WhatsApp balonunda zaten var. Ekranın üstündeki
     yeri asıl içeriğe bırakıyoruz. */
  @media (max-width: 48rem) { .ust-serit { display: none; } }

  /* --- Başlık çubuğu --- */
  .tepe {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--siyah) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    border-block-end: 1px solid transparent;
    transition: background-color var(--gecis), border-color var(--gecis);
  }
  .tepe.yapisik {
    background: color-mix(in oklab, var(--siyah) 94%, transparent);
    border-block-end-color: var(--cizgi);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .tepe { background: var(--siyah); }
  }

  .tepe .sinir {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-block-size: 5.4rem;
  }

  /* Kelime işareti — afişteki krom + altın ikili */
  .logo { display: inline-flex; align-items: baseline; gap: 0.45rem; line-height: 1; }
  .logo-yazi {
    display: inline-block;
    font-family: var(--f-baslik);
    font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-style: italic;
    /* Eğik son harfin degrade kutusundan taşmaması için pay */
    padding-inline-end: 0.14em;
    margin-inline-end: -0.1em;
  }
  .logo-mert {
    background: linear-gradient(176deg var(--oklab), #ffffff 8%, #b9c0cc 52%, #7d8593 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .logo-aslan {
    background: linear-gradient(176deg var(--oklab),
      var(--altin-parlak) 6%, var(--altin) 46%, var(--altin-golge) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .logo-auto {
    font-family: var(--f-baslik);
    font-size: 0.72rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    color: var(--metin-sonuk);
    text-transform: uppercase;
    font-weight: 600;
  }
  /* Marka işareti üç satırlı (araç + MERT ASLAN + AUTO), bu yüzden yüksek durur */
  .logo { flex: none; min-inline-size: 0; }
  .logo img { block-size: clamp(2.6rem, 7vw, 4.1rem); inline-size: auto; }
  .alt .logo img { block-size: clamp(3.2rem, 8vw, 4.6rem); }

  /* Gezinme */
  .gezinme { margin-inline-start: auto; }
  .gezinme-liste {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.1rem);
    font-size: 0.97rem;
    font-weight: 500;
  }
  .gezinme-liste > li { position: relative; }
  .gezinme-liste a {
    display: block;
    padding-block: 0.65rem;
    color: var(--metin);
    transition: color var(--gecis);
  }
  .gezinme-liste a:hover,
  .gezinme-liste a[aria-current] { color: var(--altin); }
  .gezinme-liste a[aria-current]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--altin);
  }

  /* Alt menü */
  .alt-menu-sar > button {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding-block: 0.65rem; color: var(--metin); cursor: pointer;
    font-weight: 500;
  }
  .alt-menu-sar > button .ikon { inline-size: 0.85rem; block-size: 0.85rem; rotate: 90deg; }
  .alt-menu-sar:is(:hover, :focus-within) > button { color: var(--altin); }
  .alt-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: -1rem;
    min-inline-size: 15.5rem;
    padding: 0.4rem;
    background: var(--panel-ust);
    border: 1px solid var(--cizgi);
    display: grid;
    opacity: 0;
    visibility: hidden;
    translate: 0 6px;
    transition: opacity var(--gecis), translate var(--gecis), visibility var(--gecis);
  }
  .alt-menu-sar:is(:hover, :focus-within) .alt-menu {
    opacity: 1; visibility: visible; translate: 0 0;
  }
  .alt-menu a { padding: 0.55rem 0.8rem; font-size: 0.93rem; }
  .alt-menu a:hover { background: var(--panel); color: var(--altin); }

  .tepe-eylem { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }

  /* Orta genişlikte yalnızca "Hemen ara" kalır */
  @media (max-width: 62rem) { .tepe-eylem .dugme-cizgi { display: none; } }

  /* Telefonda başlık çubuğu yalnızca logo + menü taşır.
     Arama ve yol tarifi zaten ekranın altındaki sabit çubukta duruyor;
     ikisini birden üstte tutmak satırı taşırıyordu. */
  @media (max-width: 48rem) { .tepe-eylem { display: none; } }

  /* Mobil menü düğmesi */
  .menu-dugme {
    display: none;
    padding: 0.55rem;
    color: var(--metin-guclu);
    cursor: pointer;
  }
  .menu-dugme .ikon { inline-size: 1.6rem; block-size: 1.6rem; }

  @media (max-width: 62rem) {
    .menu-dugme { display: inline-flex; margin-inline-start: auto; }
    .gezinme {
      position: fixed;
      inset: 0;
      margin: 0;
      background: var(--kurum);
      padding: 5.5rem var(--kenar) 2rem;
      overflow-y: auto;
      translate: 100% 0;
      visibility: hidden;
      transition: translate 280ms cubic-bezier(.4,0,.2,1), visibility 280ms;
      z-index: 70;
    }
    .gezinme[data-acik="1"] { translate: 0 0; visibility: visible; }
    .gezinme-liste {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      font-size: 1.15rem;
    }
    .gezinme-liste > li { border-block-end: 1px solid var(--cizgi); }
    .gezinme-liste a, .alt-menu-sar > button { padding-block: 1.05rem; inline-size: 100%; }
    .gezinme-liste a[aria-current]::after { display: none; }
    .alt-menu {
      position: static; opacity: 1; visibility: visible; translate: 0;
      border: 0; background: none; padding: 0 0 0.75rem 1rem;
    }
    .alt-menu a { padding-block: 0.5rem; color: var(--metin-sonuk); }
    .menu-kapat {
      position: fixed;
      inset-block-start: 1.1rem;
      inset-inline-end: var(--kenar);
      z-index: 80;
      padding: 0.6rem;
      color: var(--metin-guclu);
    }
    .menu-kapat .ikon { inline-size: 1.6rem; block-size: 1.6rem; }
  }
  @media (min-width: 62.01rem) { .menu-kapat { display: none; } }

  /* --- Giriş bölümü --- */
  .giris {
    position: relative;
    isolation: isolate;
    min-block-size: clamp(34rem, 84svh, 50rem);
    display: grid;
    align-content: center;
    padding-block: clamp(3.5rem, 9vw, 7rem);
    overflow: hidden;
  }
  /* Fotoğraf zaten karanlık ve altın ışıklı üretiliyor; filtre onu boğmamalı */
  .giris-fon {
    position: absolute;
    inset: 0;
    z-index: -2;
    object-fit: cover;
    object-position: 68% center;
    inline-size: 100%;
    block-size: 100%;
    filter: grayscale(0.14) contrast(1.05) brightness(0.66) saturate(1.06);
  }
  /* Karartma yalnızca yazının durduğu sol tarafta güçlü */
  .giris::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to right var(--oklab),
        color-mix(in oklab, var(--siyah) 92%, transparent) 0%,
        color-mix(in oklab, var(--siyah) 72%, transparent) 34%,
        color-mix(in oklab, var(--siyah) 22%, transparent) 62%,
        transparent 100%),
      linear-gradient(to top var(--oklab), var(--siyah) 1%,
        transparent 30%, transparent 72%, color-mix(in oklab, var(--siyah) 62%, transparent) 100%);
  }
  /* Görsel yoksa: fabrikasyon ızgara dokusu */
  .giris-desen {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(115deg var(--oklab), #0d1017 0%, #05060a 55%, #101521 100%);
  }
  .giris-desen::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--altin) 22%, transparent) 1px, transparent 0);
    background-size: 26px 26px;
    opacity: 0.35;
    mask-image: radial-gradient(70% 60% at 30% 40%, #000 20%, transparent 78%);
  }

  .giris > .sinir { position: relative; z-index: 1; }
  .giris-icerik { display: grid; gap: 1.5rem; max-inline-size: 42rem; }


  .giris h1 {
    font-size: var(--t-3xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.012em;
  }
  .giris h1 .altin {
    background: linear-gradient(174deg var(--oklab),
      var(--altin-parlak) 4%, var(--altin) 44%, var(--altin-golge) 104%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: block;
  }
  .giris-metin { font-size: var(--t-lg); color: var(--metin); max-inline-size: 48ch; }

  .giris-eylem { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

  /* Telefon: yerel serviste asıl çağrı budur, büyük yazılır */
  .giris-telefon {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding-block: 0.4rem;
  }
  .giris-telefon .halka {
    display: grid; place-items: center;
    inline-size: 3.1rem; block-size: 3.1rem;
    border: 1px solid var(--cizgi-altin);
    border-radius: 50%;
    color: var(--altin);
    flex: none;
  }
  .giris-telefon .halka .ikon { inline-size: 1.35rem; block-size: 1.35rem; }
  .giris-telefon .numara {
    display: block;
    font-family: var(--f-baslik);
    font-size: clamp(1.45rem, 1rem + 1.9vw, 2.5rem);
    font-weight: 700;
    color: var(--metin-guclu);
    letter-spacing: 0.01em;
    line-height: 1.05;
    /* Numara asla bölünmez — bölünmüş telefon numarası okunmaz */
    white-space: nowrap;
  }
  .giris-telefon .ust-yazi {
    font-size: var(--t-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--altin);
  }
  .giris-telefon:hover .numara { color: var(--altin); }

  /* --- Giriş bölümünün telefon davranışı ---
     Bu kurallar yukarıdaki temel kuralları ezmek zorunda olduğu için
     bilerek onların ardına yazıldı; medya sorgusu özgüllük eklemez. */

  /* Ekran yüksekliğine zorlanmaz: içerik ne kadarsa o kadar yer kaplar.
     Aksi hâlde içerik taşıyor ve son düğme alttaki sabit çubuğun
     arkasında kalıyordu. */
  @media (max-width: 48rem) {
    .giris {
      min-block-size: auto;
      padding-block: 2.75rem calc(2.75rem + 4.2rem);
    }
    .giris-icerik { gap: 1.15rem; }
  }

  /* Dar ekranda düğmeler alt alta ve sola yaslı durur. Tam genişlik
     yapılmıyor: sağ alttaki sabit WhatsApp balonu düğmenin üstüne
     biniyordu, o şerit ona bırakıldı. */
  @media (max-width: 30rem) {
    .giris-eylem {
      flex-direction: column;
      align-items: flex-start;
    }
    .giris-telefon { align-self: flex-start; }
  }

  /* Altın araç çizgisi — sayfanın tek koreografi anı */
  /* Katman sırası: fotoğraf (-2) → karartma (-1) → araç işareti (0) → metin (1) */
  .araba-isaret {
    position: absolute;
    inset-block-end: clamp(4rem, 9vw, 9rem);
    inset-inline-end: -3%;
    inline-size: min(52rem, 66%);
    block-size: auto;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
    filter: drop-shadow(0 0 30px color-mix(in oklab, var(--altin) 22%, transparent));
    /* Soldan sağa tek süpürme; sayfada başka giriş animasyonu yok */
    clip-path: inset(0 100% 0 0);
    animation: isaret-supur 1.5s cubic-bezier(.22, 1, .36, 1) 320ms forwards;
  }
  @keyframes isaret-supur { to { clip-path: inset(0 0 0 0); } }

  @media (max-width: 46rem) {
    .araba-isaret { opacity: 0.26; inline-size: 128%; inset-inline-end: -14%; }
  }

  /* Giriş altındaki güven şeridi */
  .guven-serit {
    border-block-start: 1px solid var(--cizgi);
    background: var(--kurum);
  }
  .guven-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
  .guven-oge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem clamp(1rem, 2.4vw, 2rem);
  }
  .guven-oge + .guven-oge { border-inline-start: 1px solid var(--cizgi); }
  @media (max-width: 52rem) {
    .guven-oge + .guven-oge { border-inline-start: 0; border-block-start: 1px solid var(--cizgi); }
  }
  .guven-oge .ikon { inline-size: 1.65rem; block-size: 1.65rem; color: var(--altin); flex: none; }
  .guven-oge b {
    display: block;
    font-family: var(--f-baslik);
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    color: var(--metin-guclu);
  }
  .guven-oge b + span { display: block; font-size: var(--t-sm); color: var(--metin-sonuk); line-height: 1.45; }

  /* --- Hakkımızda --- */
  .ikili {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  @container (min-width: 52rem) {
    .ikili { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .ikili.ters > :first-child { order: 2; }
  }

  .gorsel-cerceve {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--panel-ust);
    overflow: hidden;
  }
  .gorsel-cerceve img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .gorsel-cerceve.bos {
    display: grid; place-items: center;
    background:
      repeating-linear-gradient(135deg, #12151d 0 14px, #0e1118 14px 28px);
    color: #2c3240;
  }
  .gorsel-cerceve.bos .ikon { inline-size: 4rem; block-size: 4rem; }

  /* Deneyim rozeti */
  .rozet {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    padding: 1.15rem 1.6rem;
    background: linear-gradient(120deg var(--oklab), var(--altin) 0%, var(--altin-parlak) 55%, var(--altin) 100%);
    color: #17120a;
  }
  .rozet b {
    display: block;
    font-family: var(--f-baslik);
    font-size: 2.3rem;
    line-height: 1;
    color: inherit;
  }
  .rozet span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

  .onay-liste { display: grid; gap: 0.7rem; margin-block: 1.6rem; }
  @container (min-width: 34rem) { .onay-liste { grid-template-columns: 1fr 1fr; } }
  .onay-liste li { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500; color: var(--metin-guclu); }
  .onay-liste .ikon {
    inline-size: 1.15rem; block-size: 1.15rem;
    color: var(--altin); flex: none; margin-block-start: 0.28em;
    stroke-width: 2.4;
  }

  /* --- Hizmetler: afişteki ikon + satır düzeni --- */
  .hizmet-izgara {
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--cizgi);
  }
  @container (min-width: 40rem) { .hizmet-izgara { grid-template-columns: 1fr 1fr; } }
  @container (min-width: 68rem) { .hizmet-izgara { grid-template-columns: repeat(4, 1fr); } }

  .hizmet {
    position: relative;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.15rem, 2.4vw, 1.9rem);
    border-block-end: 1px solid var(--cizgi);
    border-inline-end: 1px solid var(--cizgi);
    transition: background-color var(--gecis);
  }
  .hizmet:hover { background: var(--panel); }
  .hizmet::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--altin);
    scale: 0 1;
    transform-origin: left;
    transition: scale 260ms cubic-bezier(.4,0,.2,1);
  }
  .hizmet:hover::after, .hizmet:focus-within::after { scale: 1 1; }

  .hizmet .ikon-kutu {
    display: grid; place-items: center;
    inline-size: 3.1rem; block-size: 3.1rem;
    border: 1px solid var(--cizgi-altin);
    color: var(--altin);
  }
  .hizmet .ikon-kutu .ikon { inline-size: 1.6rem; block-size: 1.6rem; }
  .hizmet h3 { font-size: 1.4rem; letter-spacing: 0.005em; }
  .hizmet h3 a::after { content: ""; position: absolute; inset: 0; }
  .hizmet p { font-size: var(--t-sm); color: var(--metin-sonuk); }

  /* --- Marka şeridi --- */
  .marka-serit { border-block: 1px solid var(--cizgi); background: var(--kurum); }
  .marka-serit .sinir {
    display: grid;
    gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    align-items: center;
  }
  @container (min-width: 56rem) { .marka-serit .sinir { grid-template-columns: auto 1fr; } }
  .marka-basi {
    font-family: var(--f-baslik);
    font-size: 1.3rem;
    color: var(--metin-guclu);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    max-inline-size: 14ch;
    line-height: 1.15;
  }
  .marka-basi em { color: var(--altin); font-style: normal; }

  .marka-akis {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }
  .marka-sira {
    display: flex;
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    inline-size: max-content;
    animation: kaydir 42s linear infinite;
  }
  .marka-akis:hover .marka-sira { animation-play-state: paused; }
  @keyframes kaydir { to { translate: -50% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .marka-sira { animation: none; flex-wrap: wrap; inline-size: auto; }
    .marka-akis { mask-image: none; }
  }
  .marka {
    font-family: var(--f-baslik);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666e7d;
    white-space: nowrap;
    transition: color var(--gecis);
  }
  .marka:hover { color: var(--krom); }
  /* Marka logoları tek renk beyaz SVG: sönük durur, üzerine gelince altına döner */
  .marka img {
    block-size: 2.15rem;
    inline-size: auto;
    opacity: 0.42;
    transition: opacity var(--gecis), filter var(--gecis);
  }
  .marka:hover img {
    opacity: 1;
    /* beyazı altına çeviren döndürme */
    filter: sepia(1) saturate(3.4) hue-rotate(-10deg) brightness(1.05);
  }
  @media (forced-colors: active) { .marka img { opacity: 1; } }

  /* --- Rakamlar --- */
  .rakam-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    border: 1px solid var(--cizgi);
  }
  .rakam {
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.15rem, 2.4vw, 1.9rem);
    border-inline-end: 1px solid var(--cizgi);
  }
  .rakam:last-child { border-inline-end: 0; }
  .rakam b {
    display: block;
    font-family: var(--f-baslik);
    font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(172deg var(--oklab),
      var(--altin-parlak) 0%, var(--altin) 48%, var(--altin-golge) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
  }
  /* Sayacın kendisi <b> içinde satır içi kalmalı */
  .rakam b > span { display: inline; font: inherit; color: inherit; margin: 0; }
  /* Yalnızca doğrudan çocuk olan etiket küçülür */
  .rakam > span {
    display: block;
    margin-block-start: 0.5rem;
    font-size: var(--t-sm);
    color: var(--metin-sonuk);
  }

  /* --- Çalışma süreci: gerçekten sıralı, bu yüzden numaralı --- */
  .surec-izgara { display: grid; gap: 0; counter-reset: adim; }
  @container (min-width: 44rem) { .surec-izgara { grid-template-columns: 1fr 1fr; } }
  @container (min-width: 66rem) { .surec-izgara { grid-template-columns: repeat(4, 1fr); } }

  .adim {
    counter-increment: adim;
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.3rem, 2.4vw, 2rem);
    border: 1px solid var(--cizgi);
    margin: -0.5px;
    display: grid;
    gap: 0.7rem;
    align-content: start;
  }
  .adim::before {
    content: counter(adim, decimal-leading-zero);
    font-family: var(--f-baslik);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--cizgi-altin);
  }
  .adim h3 { font-size: 1.3rem; }
  .adim p { font-size: var(--t-sm); color: var(--metin-sonuk); }

  /* --- Yorumlar --- */
  .yorum-izgara {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  }
  .yorum {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    background: var(--panel);
    border: 1px solid var(--cizgi);
    --kose: 18px;
  }
  .yildizlar { display: inline-flex; gap: 0.15rem; color: var(--altin); }
  .yildizlar .ikon { inline-size: 1rem; block-size: 1rem; }
  .yorum blockquote { font-size: var(--t-sm); line-height: 1.7; }
  .yorum footer {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--cizgi);
  }
  .yorum footer b { font-family: var(--f-baslik); font-size: 1.1rem; letter-spacing: 0.01em; }
  .yorum footer span { font-size: var(--t-xs); color: var(--metin-sonuk); }

  /* --- Galeri --- */
  .galeri-izgara {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .galeri-oge {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--panel-ust);
  }
  .galeri-oge img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
    transition: scale 420ms cubic-bezier(.4,0,.2,1), filter var(--gecis);
    filter: grayscale(0.3) brightness(0.9);
  }
  .galeri-oge:hover img { scale: 1.05; filter: none; }
  .galeri-oge figcaption {
    position: absolute;
    inset-inline: 0; inset-block-end: 0;
    padding: 1.6rem 1rem 0.85rem;
    font-size: var(--t-sm);
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to top var(--oklab),
      color-mix(in oklab, var(--siyah) 92%, transparent), transparent);
  }

  /* --- Videolar: tıklayınca yüklenen Instagram gömmeleri --- */
  .video-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  }

  .video-kart {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    background: var(--panel);
    color: inherit;
    cursor: pointer;
    text-align: start;
    isolation: isolate;
  }
  .video-kart img {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%; object-fit: cover;
    filter: grayscale(0.25) brightness(0.72);
    transition: scale 420ms cubic-bezier(.4,0,.2,1), filter var(--gecis);
  }
  /* Kapak görseli yoksa: karbon dokulu altın gradyan */
  .video-desen {
    position: absolute; inset: 0;
    background:
      linear-gradient(168deg var(--oklab), #191d27 0%, #0c0e14 58%, #1c1710 100%);
  }
  .video-desen::after {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      132deg, transparent 0 9px,
      color-mix(in oklab, var(--altin) 9%, transparent) 9px 10px);
    mask-image: radial-gradient(80% 60% at 50% 42%, #000 10%, transparent 76%);
  }
  .video-kart::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top var(--oklab),
      color-mix(in oklab, var(--siyah) 94%, transparent) 4%,
      transparent 52%);
  }
  .video-kart:hover img { scale: 1.05; filter: grayscale(0) brightness(0.85); }

  .video-oynat {
    position: absolute; z-index: 2;
    inset-block-start: 50%; inset-inline-start: 50%;
    translate: -50% -50%;
    display: grid; place-items: center;
    inline-size: 3.5rem; block-size: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(120deg var(--oklab), var(--altin) 0%, var(--altin-parlak) 55%, var(--altin) 100%);
    color: #17120a;
    transition: scale var(--gecis);
  }
  .video-oynat svg { inline-size: 1.5rem; block-size: 1.5rem; margin-inline-start: 0.15rem; }
  .video-kart:is(:hover, :focus-visible) .video-oynat { scale: 1.1; }

  .video-yazi {
    position: absolute; z-index: 2;
    inset-inline: 0; inset-block-end: 0;
    display: grid; gap: 0.15rem;
    padding: 1rem 0.95rem 0.95rem;
  }
  .video-yazi strong {
    font-family: var(--f-baslik);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
  }
  .video-yazi span { font-size: var(--t-xs); color: #b6bcc7; line-height: 1.4; }

  /* Oynatıcı penceresi */
  .video-pencere {
    inline-size: min(100% - 2rem, 26rem);
    max-block-size: 92dvh;
    padding: 0;
    border: 1px solid var(--cizgi-altin);
    background: var(--siyah);
    color: var(--metin);
    overflow: visible;
  }
  .video-pencere::backdrop {
    background: rgb(3 4 6 / 0.88);
    backdrop-filter: blur(4px);
  }
  .video-cerceve {
    inline-size: 100%;
    aspect-ratio: 400 / 700;
    max-block-size: 88dvh;
    background: #0c0e14;
  }
  .video-cerceve iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

  .video-kapat {
    position: absolute;
    inset-block-end: calc(100% + 0.6rem);
    inset-inline-end: 0;
    display: inline-flex; align-items: center;
    padding: 0.5rem;
    color: var(--metin-guclu);
    cursor: pointer;
  }
  .video-kapat .ikon { inline-size: 1.6rem; block-size: 1.6rem; }
  .video-kapat:hover { color: var(--altin); }

  /* --- Sıkça sorulanlar --- */
  .sss-liste { display: grid; border-block-start: 1px solid var(--cizgi); }
  .sss-oge { border-block-end: 1px solid var(--cizgi); }
  .sss-oge summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--f-baslik);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    color: var(--metin-guclu);
    transition: color var(--gecis);
  }
  .sss-oge summary::-webkit-details-marker { display: none; }
  .sss-oge summary:hover { color: var(--altin); }
  .sss-oge summary .ikon {
    inline-size: 1.25rem; block-size: 1.25rem;
    margin-inline-start: auto; flex: none; color: var(--altin);
    transition: rotate 220ms cubic-bezier(.4,0,.2,1);
  }
  .sss-oge[open] summary .ikon { rotate: 45deg; }
  .sss-cevap { padding-block-end: 1.4rem; max-inline-size: 72ch; color: var(--metin-sonuk); }

  /* --- Servis bilgileri tablosu --- */
  .bilgi-tablo {
    display: grid;
    gap: 0;
    border: 1px solid var(--cizgi);
    background: var(--panel);
  }
  @container (min-width: 44rem) { .bilgi-tablo { grid-template-columns: 1fr 1fr; } }

  .bilgi-tablo > div {
    display: grid;
    gap: 0.3rem;
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
    border-block-end: 1px solid var(--cizgi);
    border-inline-end: 1px solid var(--cizgi);
  }
  .bilgi-tablo dt {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--altin);
    font-weight: 600;
  }
  .bilgi-tablo dd {
    margin: 0;
    color: var(--metin-guclu);
    font-size: 1.02rem;
    line-height: 1.5;
  }
  .bilgi-tablo dd a { border-block-end: 1px solid var(--cizgi-altin); }
  .bilgi-tablo dd a:hover { color: var(--altin); }

  /* --- Randevu bandı --- */
  .band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--cizgi);
    padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    display: grid;
    gap: 1.75rem;
    align-items: center;
  }
  @container (min-width: 50rem) {
    .band { grid-template-columns: minmax(0, 1fr) auto; }
  }
  .band img {
    position: absolute; inset: 0; z-index: -2;
    inline-size: 100%; block-size: 100%; object-fit: cover;
    filter: grayscale(0.7) brightness(0.3);
  }
  .band::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(95deg var(--oklab),
      color-mix(in oklab, var(--siyah) 90%, transparent) 20%,
      color-mix(in oklab, var(--siyah) 40%, transparent) 100%);
  }
  .band h2 { font-size: var(--t-2xl); }
  .band p { color: var(--metin); max-inline-size: 52ch; margin-block-start: 0.75rem; }
  .band-eylem { display: flex; flex-wrap: wrap; gap: 0.8rem; }

  /* --- Form --- */
  .form-izgara { display: grid; gap: 1.1rem; }
  @container (min-width: 38rem) { .form-izgara .ikili-alan { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }

  .alan { display: grid; gap: 0.4rem; }
  .alan > label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--metin-guclu);
    letter-spacing: 0.01em;
  }
  .alan :is(input, select, textarea) {
    inline-size: 100%;
    padding: 0.8rem 1rem;
    background: var(--kurum);
    border: 1px solid var(--cizgi);
    color: var(--metin-guclu);
    font-size: 1rem;
    transition: border-color var(--gecis), background-color var(--gecis);
  }
  .alan textarea { resize: vertical; min-block-size: 8rem; }
  .alan :is(input, select, textarea)::placeholder { color: #5d6472; }
  .alan :is(input, select, textarea):hover { border-color: #39404f; }
  .alan :is(input, select, textarea):focus { border-color: var(--altin); background: var(--panel); }
  /* Hata yalnızca kullanıcı alana dokunduktan sonra gösterilir */
  .alan :is(input, textarea):user-invalid { border-color: var(--kirmizi); }
  .alan :is(input, textarea):user-invalid + .alan-uyari { display: block; }
  .alan-uyari { display: none; font-size: var(--t-xs); color: var(--kirmizi); }

  .bal { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  .bildirim {
    padding: 0.95rem 1.2rem;
    border: 1px solid;
    font-size: var(--t-sm);
    display: flex; gap: 0.6rem; align-items: flex-start;
  }
  .bildirim .ikon { inline-size: 1.15rem; block-size: 1.15rem; flex: none; margin-block-start: 0.2em; }
  .bildirim-basari { border-color: color-mix(in oklab, var(--yesil) 45%, transparent); color: #7ee2a6; background: color-mix(in oklab, var(--yesil) 9%, transparent); }
  .bildirim-hata { border-color: color-mix(in oklab, var(--kirmizi) 45%, transparent); color: #ff9ea1; background: color-mix(in oklab, var(--kirmizi) 9%, transparent); }

  /* --- İletişim kutuları --- */
  .iletisim-izgara { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  @container (min-width: 54rem) { .iletisim-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

  .bilgi-liste { display: grid; gap: 0; border-block-start: 1px solid var(--cizgi); }
  .bilgi {
    display: flex; gap: 1rem;
    padding-block: 1.3rem;
    border-block-end: 1px solid var(--cizgi);
  }
  .bilgi .ikon-kutu {
    display: grid; place-items: center; flex: none;
    inline-size: 2.7rem; block-size: 2.7rem;
    border: 1px solid var(--cizgi-altin);
    color: var(--altin);
  }
  .bilgi .ikon-kutu .ikon { inline-size: 1.3rem; block-size: 1.3rem; }
  .bilgi dt {
    font-size: var(--t-xs); text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--altin);
  }
  .bilgi dd { margin: 0.2rem 0 0; color: var(--metin-guclu); font-weight: 500; }
  .bilgi dd a:hover { color: var(--altin); }

  .harita {
    inline-size: 100%;
    aspect-ratio: 16 / 11;
    border: 1px solid var(--cizgi);
    filter: grayscale(0.85) invert(0.9) contrast(0.85);
  }

  /* --- Alt bilgi --- */
  .alt {
    background: var(--kurum);
    border-block-start: 1px solid var(--cizgi);
    padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  }
  .alt-izgara {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    padding-block-end: clamp(2.5rem, 5vw, 3.5rem);
  }
  @container (min-width: 50rem) {
    .alt-izgara { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  }
  .alt { container-type: inline-size; }
  .alt h3 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--altin);
    margin-block-end: 1.1rem;
  }
  .alt-liste { display: grid; gap: 0.6rem; font-size: var(--t-sm); }
  .alt-liste a { color: var(--metin-sonuk); transition: color var(--gecis); }
  .alt-liste a:hover { color: var(--altin); }
  .alt-metin { font-size: var(--t-sm); color: var(--metin-sonuk); max-inline-size: 38ch; margin-block-start: 1rem; }

  .sosyal { display: flex; gap: 0.6rem; margin-block-start: 1.25rem; }
  .sosyal a {
    display: grid; place-items: center;
    inline-size: 2.5rem; block-size: 2.5rem;
    border: 1px solid var(--cizgi);
    color: var(--metin-sonuk);
    transition: color var(--gecis), border-color var(--gecis);
  }
  .sosyal a:hover { color: var(--altin); border-color: var(--cizgi-altin); }
  .sosyal .ikon { inline-size: 1.15rem; block-size: 1.15rem; }

  .alt-serit {
    border-block-start: 1px solid var(--cizgi);
    padding-block: 1.4rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    align-items: center;
    font-size: var(--t-xs);
    color: var(--metin-sonuk);
  }
  .alt-serit .sag { margin-inline-start: auto; }
  .alt-serit a:hover { color: var(--altin); }

  /* --- Sabit WhatsApp / telefon --- */
  .sabit-eylem {
    position: fixed;
    inset-inline-end: clamp(0.9rem, 2vw, 1.6rem);
    inset-block-end: clamp(0.9rem, 2vw, 1.6rem);
    z-index: 80;
    display: grid;
    gap: 0.65rem;
    justify-items: end;
  }
  .sabit-dugme {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.45), 0 2px 4px rgb(0 0 0 / 0.3);
    transition: scale var(--gecis), box-shadow var(--gecis);
  }
  .sabit-dugme:hover { scale: 1.06; }
  .sabit-dugme .ikon { inline-size: 1.7rem; block-size: 1.7rem; }
  .sabit-wp { background: var(--yesil); color: #05240f; }
  .sabit-tel { background: var(--altin); color: #17120a; }

  /* Nabız halkası — yalnızca WhatsApp düğmesinde, tek vurgu */
  .sabit-wp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--yesil);
    animation: nabiz 2.6s ease-out infinite;
  }
  @keyframes nabiz {
    0%   { scale: 1;    opacity: 0.7; }
    70%  { scale: 1.55; opacity: 0; }
    100% { scale: 1.55; opacity: 0; }
  }

  /* Baloncuk etiketi */
  .sabit-dugme .balon {
    position: absolute;
    inset-inline-end: calc(100% + 0.7rem);
    inset-block-start: 50%;
    translate: 0 -50%;
    padding: 0.4rem 0.8rem;
    background: var(--panel-ust);
    border: 1px solid var(--cizgi);
    color: var(--metin-guclu);
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gecis), visibility var(--gecis);
  }
  .sabit-dugme:is(:hover, :focus-visible) .balon { opacity: 1; visibility: visible; }

  /* Alt çubuk devreye girdiğinde sabit telefon düğmesi gereksizleşir */
  @media (max-width: 48rem) {
    .sabit-eylem { inset-block-end: calc(3.9rem + env(safe-area-inset-bottom, 0px)); }
    .sabit-tel { display: none; }
  }

  /* Mobil alt eylem çubuğu */
  .mobil-cubuk {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 75;
    display: none;
    background: color-mix(in oklab, var(--siyah) 95%, transparent);
    backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--cizgi);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .mobil-cubuk a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.95rem;
    font-family: var(--f-baslik);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mobil-cubuk a + a { border-inline-start: 1px solid var(--cizgi); }
  .mobil-cubuk .ikon { inline-size: 1.15rem; block-size: 1.15rem; }
  .mobil-ara { color: var(--altin); }
  .mobil-yol { color: var(--metin-guclu); }
  /* Başlık çubuğundaki eylemlerin gizlendiği genişlikte devreye girer,
     böylece arama ve yol tarifi her an başparmak mesafesinde kalır */
  @media (max-width: 48rem) {
    .mobil-cubuk { display: flex; }
    body { padding-block-end: 3.9rem; }
  }

  /* --- Sayfa başlığı (alt sayfalar) --- */
  .sayfa-basi {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    background: var(--kurum);
    border-block-end: 1px solid var(--cizgi);
    overflow: hidden;
  }
  .sayfa-basi::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
      radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--altin) 20%, transparent) 1px, transparent 0);
    background-size: 24px 24px;
    mask-image: linear-gradient(105deg, #000 0%, transparent 52%);
    opacity: 0.4;
  }
  .sayfa-basi h1 { font-size: var(--t-2xl); text-transform: uppercase; margin-block-start: 1rem; }
  .yol-izi {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    font-size: var(--t-xs); color: var(--metin-sonuk);
  }
  .yol-izi a:hover { color: var(--altin); }
  .yol-izi li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; color: #3b4250; }
  .yol-izi ol, .yol-izi { list-style: none; }

  /* --- Makale içeriği (hizmet detay) --- */
  .metin-govde { max-inline-size: 68ch; }
  .metin-govde :is(h2, h3) { margin-block: 2rem 0.85rem; font-size: var(--t-xl); }
  .metin-govde p { margin-block-end: 1em; }
  .metin-govde ul { display: grid; gap: 0.55rem; margin-block-end: 1.5em; padding: 0; list-style: none; }
  .metin-govde li { position: relative; padding-inline-start: 1.6rem; }
  .metin-govde li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.62em;
    inline-size: 0.5rem; block-size: 0.5rem;
    background: var(--altin);
    rotate: 45deg;
  }

  /* Yan kutu */
  .yan-kutu {
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: var(--panel);
    border: 1px solid var(--cizgi);
    display: grid;
    gap: 1rem;
    align-content: start;
    position: sticky;
    inset-block-start: 6.5rem;
  }
  .yan-kutu h3 { font-size: 1.25rem; }
  .yan-kutu p { font-size: var(--t-sm); color: var(--metin-sonuk); }
}

/* ---------------------------------------------------------------- */
@layer yardimci {
  .ikon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .gizli {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .atla {
    position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
    z-index: 100; padding: 0.75rem 1.25rem;
    background: var(--altin); color: #17120a; font-weight: 700;
  }
  .atla:focus { inset-block-start: 1rem; }

  .govde-kilit { overflow: hidden; }
  .metin-altin { color: var(--altin); }
  .yigin { display: grid; gap: 1.5rem; }
  .bosluk-ust { margin-block-start: clamp(2rem, 4vw, 3rem); }
}

/* ---------------------------------------------------------------- */
/* Giriş animasyonu — tek seferlik, açılışta                         */
/* ---------------------------------------------------------------- */
.beliren { opacity: 0; translate: 0 14px; }
.beliren.gorunur {
  opacity: 1;
  translate: 0 0;
  transition: opacity 620ms cubic-bezier(.22,1,.36,1),
              translate 620ms cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  .beliren, .beliren.gorunur { opacity: 1; translate: none; transition: none; }
  .araba-isaret { animation: none; clip-path: none; }
  .sabit-wp::before { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- */
/* Yüksek karşıtlık kipi                                             */
/* ---------------------------------------------------------------- */
@media (forced-colors: active) {
  .etiket, .dugme-altin, .rozet { forced-color-adjust: none; }
  .hizmet, .adim, .yorum, .rakam, .band { border: 1px solid CanvasText; }
  .tepe.yapisik { border-block-end: 1px solid CanvasText; }
  .sabit-dugme { border: 2px solid ButtonText; }
}

/* ---------------------------------------------------------------- */
/* Yazdırma                                                          */
/* ---------------------------------------------------------------- */
@media print {
  .tepe, .sabit-eylem, .mobil-cubuk, .ust-serit, .araba-cizgi { display: none !important; }
  body { background: #fff; color: #000; }
}