/* ==========================================================================
   MOBILE (<= 900px)
   Tüm değişiklikler "ADIM" başlıklarıyla tek tek işlendi.
   ========================================================================== */

@media (max-width: 600px){

  /* ADIM 0 — GENEL KİLİT: kutu modeli, taşma ve mobil arkaplan
     (Eski dosyadaki genel kurallar korunur) */
  html, body{
    box-sizing: border-box;
    width: 100%; max-width: 100vw;
    min-height: 100dvh;
    overflow-x: hidden;                           /* yatay taşma yok */
  }
  *, *::before, *::after{ box-sizing: inherit; }
  img, video, canvas{ max-width: 100%; height: auto; display: block; }

body, main, .site-wrap, .page, .page-wrap, .page-content,
.home-page, .services-page, .service-details-page, .projects-page,
.pd-page, .about-page, .contact-page, [class*="-page"]{
  background-attachment: scroll !important;  /* iç kapsayıcılar sabit olmasın */
  background-image: none !important;         /* tek arka plan sadece html’de */
  background-color: transparent !important;
}

  /* Global mobil arkaplan (1:2), scroll ile birlikte hareket eder */
html{
  background-color: #0e0e10 !important;                      /* zemin */
  background-image: url('../medias/back-ground-mobile.svg') !important; /* mobil SVG */
  background-repeat: no-repeat !important;                   /* tek parça */
  background-position: center top !important;                /* en üste hizala */
  background-attachment: fixed !important;                   /* <<< KRİTİK: arkada sabit kalsın */
  background-size: 110% auto !important;                     /* genişlik %100, oran koru */
  /* NOT: Burada daha önce "background-size: auto 140dvh" vardı → onu kaldırıyoruz. */
}

  /* ADIM 1 — GENEL YAPI: her şey ortalı; sayfa başı boşluğu küçült */
  :is(main, .site-wrap, .page, .page-wrap, .page-content, .content-wrap){
    width: 92%;
    margin-left: auto; margin-right: auto;      /* ORTALA */
  }
  :is(main, .page-content) > *{
    margin-left: auto; margin-right: auto; max-width: 100%;
  }
  :is(main, .page-content) > *:first-child{
    margin-top: 2.5% !important;                /* globalde gap’ı azalt */
  }
  h1, h2{ margin-top: 2.5% !important; }
  header, .site-header, .topbar, .navbar{ margin-bottom: 1.5% !important; }

/* ADIM 2 — TOPBAR: sol amblem + sağda menü*/
 /* 1) Yerleşim: [logo] | [menü] */
  header, .site-header{
    display: grid;
    grid-template-columns: auto 1fr;   /* sol logo, sağ menü */
    align-items: center;
    column-gap: 0;
    padding-left: 2vw;
    padding-right: 2vw;

    /* menünün üst sınırla boşluğu (buradan ayarlarsın) */
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 76px;

    background: transparent !important;
    border: 0;

    /* BLUR için referans; yazılar üstte kalsın diye z-index düşük */
    position: relative;
    z-index: 0;
    margin-top: 15px;
  }

  /* 1.a) BLUR bandı — ARKADA ve AŞAĞI UZATILMIŞ (TON AYNI) */
  header::after, .site-header::after{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;

    /* ↓ Aşağı uzatma KULBU — sadece bunu büyüt/küçült:
       -18px → daha uzun band için -22px / -28px yapabilirsin */
    bottom: -25px;

    background: rgba(0,0,0,0.5);         /* ton değişmedi */
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    pointer-events: none;

    z-index: -1;                           /* yazıların ARKASINDA kalsın */

    /* Altta sert çizgi olmasın → yumuşak fade */
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, #000 90%, transparent 100%);
  }

  /* 2) Marka metinlerini gizle; .brand kalsın (logo burada) */
  .brand-strong, .brand-thin, .site-name, .site-title, .logo-text{
    display: none !important;              /* sadece yazıları gizle */
  }
  .brand{ display: grid; place-items: center; }

  /* 3) Logo ölçüsü (buradan büyüt/küçült) */
  .logo, .logo-small, img.logo, .brand-logo,
  header .brand img{
    width: 150px !important;        /* daha büyük istersen: clamp(48px, 13vw, 72px) */
    height: auto;
    object-fit: contain;
    justify-self: start;
    display: block;
  }
/* =========================================================
   MOBİL TOPBAR — Logo üstte 56px, altında tek satır "AY MİMARLIK"
   - AY (700) + MİMARLIK (400) iki hücreyle tek satır
   - Bu blok, önceki tüm inline-flex / pseudo varyasyonlarının yerini alır
   ========================================================= */

/* 1) Marka kapsayıcısı: 2 sütunlu grid
   Satır-1: LOGO (iki sütunu birden kaplar)
   Satır-2: [ AY ] [ MİMARLIK ] */
.topbar .brand{
  display: grid;                     /* önceki grid’i netleştiriyoruz */
  grid-template-columns: auto auto;  /* 2 sütun: AY | MİMARLIK */
  grid-auto-rows: auto;
  justify-items: center;
  align-items: center;
  column-gap: 6px;                   /* AY ile MİMARLIK arası */
  row-gap: 5px;                      /* LOGO ile metin arası */
  text-decoration: none;             /* link alt çizgisi olmasın */
}

/* 2) LOGO: 56px (intro sonrası küçük kalsın) */
.topbar .brand img{
  grid-column: 1 / -1;   /* 1. satırda iki sütunu kaplasın */
  grid-row: 1;
  height: 80px;          /* <<< Nihai yükseklik */
  max-height: 80px;
  width: auto;           /* oranı koru */
  object-fit: contain;
}

/* 3) "AY" (700) — 2. satır, 1. sütun */
.topbar .brand::before{
  content: "AY";
  grid-column: 1;
  grid-row: 2;
  display: inline-block;
  font-size: 19px;       /* biraz daha büyük istedin */
  font-weight: 700;      /* <<< kalın */
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* 4) "MİMARLIK" (400) — 2. satır, 2. sütun */
.topbar .brand::after{
  content: "MİMARLIK";
  grid-column: 2;
  grid-row: 2;
  display: inline-block;
  font-size: 19px;       /* AY ile aynı punto */
  font-weight: 400;      /* <<< normal */
  line-height: 1.1;
  letter-spacing: .07em; /* hafif daha geniş aralık */
  text-transform: uppercase;
  opacity: .95;
}

  /* 4) Menü ızgarası: sığmazsa buton ALT SATIRA iner (metin kırılmaz) */
  header :is(nav, .menu, .nav, .main-menu){
    width: 100%;
    display: grid;

    /* 10ch → min hücre genişliği; gerekirse 9ch yapıp sıkışıklığı azalt */
    grid-template-columns: repeat(auto-fit, minmax(8ch, 1fr));

    /* Butonlar arası mesafe (satır / sütun) — buradan ayarlayabilirsin */
    gap: 0.4em 2vw;

    align-items: center;
    justify-items: stretch;
    overflow: visible;

    /* Menüyü komple biraz aşağı çekmek istersen*/
       margin-top: 12px;
  }
  /* UL/LI sarmalı grid’i bozmasın */
  header :is(nav ul, .menu ul, .nav ul, .main-menu ul){ display: contents; }
  header :is(nav li, .menu li, .nav li, .main-menu li){ display: contents; }

  /* 5) Menü linkleri: tek satır, alt çizgi pseudo’su için konumlandırılmış */
  header :is(nav a, .menu a, .nav a, .main-menu a){
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: 32px;
    padding: 0.75em 0 0.5em 0;       /* üst nefes */
    padding-right: .4em;             /* sağa hafif boşluk */
    font-size: clamp(11px, 2.5vw, 13px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: transparent; border: 0; text-align: center;
    position: relative;               /* alt çizgi için gerekli */
  }

  /* 6) Aktif menü alt-çizgisi (hangi sınıf/özellik gelirse hepsi kapsandı) */
  header :is(nav a, .menu a, .nav a, .main-menu a).active,
  header :is(nav a, .menu a, .nav a, .main-menu a).current,
  header :is(nav a, .menu a, .nav a, .main-menu a)[aria-current="page"],
  header :is(nav a, .menu a, .nav a, .main-menu a).router-link-active{
    color: #fff;
  }
  header :is(nav a, .menu a, .nav a, .main-menu a).active::after,
  header :is(nav a, .menu a, .nav a, .main-menu a).current::after,
  header :is(nav a, .menu a, .nav a, .main-menu a)[aria-current="page"]::after,
  header :is(nav a, .menu a, .nav a, .main-menu a).router-link-active::after{
    content: "" !important;
    position: absolute !important;
    height: 2px !important;              /* çizgi kalınlığı */
    bottom: 0.2em !important;            /* metinle arası */
    left: 10% !important;                /* ← çizginin sol iç boşluğu */
    right: 10% !important;               /* → çizginin sağ iç boşluğu */
    width: auto !important;              /* inset ile kontrol edilsin */
    background: currentColor !important; /* yazı rengi */
    border-radius: 2px !important;
    opacity: .95 !important;
  }
/*********************************************************************************************************************************/
  /* ADIM 3 — ANASAYFA: sayfanın başlangıcını en üste taşı (topbar’ın hemen altı) */
  .home-page :is(section, .section, .hero, .home-hero, .model-hero, .home-stage, .model-stage):first-child{
    margin-top: 0 !important; padding-top: 0 !important;
  }

  /* ADIM 4 — RANDEVU AL KARTI: daralt, taşmayı kes; buton orantılı */
  .appointment, .randevu-karti, .appointment-card{
    width: 70%; max-width: 300px;
    margin: 3% auto 4%; border-radius: 0; overflow: hidden;
    position: relative;
  }
  .appointment .inner, .appointment .content, .appt-inner{
    padding: 5% 5%; text-align: center;
  }
  .appointment .btn, .appt-cta, .btn-overshoot{
    width: 70%; max-width: 75%; margin-left: auto; margin-right: auto;
    display: inline-flex; justify-content: center; align-items: center;
    padding: 2.2% 0;
  }

  /* ==========================================================================
   PROJE DETAY — LIGHTBOX (MOBİL, SERVİS DETAY İLE AYNI)
   ========================================================================== */
  /* --------------------------------------------------------------
   0) Sayfa içi küçük galeri (model altındaki 6’lı grid)
      - Liste görünümüdür; overlay lightbox ile karışmaz.
  -------------------------------------------------------------- */
  .pd-gallery, .pd-images{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3% !important;
  }
  .pd-gallery .pd-thumb,
  .pd-gallery img{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;    /* kare kart */
    object-fit: cover !important;       /* kart içinde taşanı kırp */
    display: block !important;
  }

  /* --------------------------------------------------------------
   1) OVERLAY BAŞLANGIÇ DURUMU — Kapalı başlat, .is-open ile aç
  -------------------------------------------------------------- */

  /* Proje Detay */
  #pd-lightbox{
    position: fixed; inset: 0; z-index: 9999;
    display: none; visibility: hidden; opacity: 0;
    pointer-events: none;
  }
  #pd-lightbox.is-open{
    display: block; visibility: visible; opacity: 1;
    pointer-events: auto;
  }

  /* Servis Detay */
  #sd-lightbox{
    position: fixed; inset: 0; z-index: 9999;
    display: none; visibility: hidden; opacity: 0;
    pointer-events: none;
  }
  #sd-lightbox.is-open{
    display: block; visibility: visible; opacity: 1;
    pointer-events: auto;
  }

  /* --------------------------------------------------------------
   2) SAHNE (STAGE) — İçeriği aşağıdan başlat (SPACER satırı)
      Satır sırası: [SPACER] [IMG] [NAV] [THUMBS] [CAPTION] [COUNT]
      Not: Aşağıdaki değişkenlerle "ne kadar aşağıdan" başlatacağını
           tek yerden ayarlarsın.
  -------------------------------------------------------------- */

  /* Proje Detay sahnesi */
  #pd-lightbox .pd-stage{
    --pd-top-spacer: clamp(80px, 12vh, 160px);   /* <<< İstediğin gibi ayarla */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;   /* nav için 2 sütun */
    grid-template-rows: var(--pd-top-spacer) auto auto auto auto auto !important;
    /*                    1) spacer        2) img 3) nav 4) thumbs 5) caption 6) count */
    align-content: start !important;             /* üstten başlayıp aşağı doğru akış */
    justify-items: center !important;            /* hücre içi yatay merkez */
    gap: 10px 8px !important;
    padding: 16px !important;                    /* yan nefes */
    box-sizing: border-box;
  }

  /* Servis Detay sahnesi */
  #sd-lightbox .sd-stage{
    --sd-top-spacer: clamp(90px, 14vh, 180px);   /* <<< İstediğin gibi ayarla */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;   /* nav için 2 sütun */
    grid-template-rows: var(--sd-top-spacer) auto auto auto auto auto !important;
    /*                    1) spacer        2) img 3) nav 4) thumbs 5) caption 6) count */
    align-content: start !important;
    justify-items: center !important;
    gap: 10px 8px !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  /* --------------------------------------------------------------
   3) BÜYÜK GÖRSEL — Ekrana TAM sığdır (contain)
      (Altta nav+thumbs için yüksekliği sınırlıyoruz)
  -------------------------------------------------------------- */

  /* Proje Detay */
  #pd-lightbox .pd-img{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;                 /* spacer'ın hemen altında */
    max-width: 96vw !important;
    max-height: 60vh !important;            /* altta nav + thumbs için yer bırak */
    width: auto !important; height: auto !important;
    object-fit: contain !important;         /* kırpma yok, tamamen sığdır */
    border-radius: 0 !important;
    /* İstersen gölge:
    box-shadow: 0 12px 40px rgba(0,0,0,.6) !important; */
  }

  /* Servis Detay */
  #sd-lightbox .sd-img{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;                 /* spacer'ın hemen altında */
    max-width: 96vw !important;
    max-height: 60vh !important;
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }

  /* --------------------------------------------------------------
   4) NAVİGASYON OKLARI — Resmin HEMEN altında (sol/sağ)
  -------------------------------------------------------------- */

  /* Proje Detay */
  #pd-lightbox .pd-nav{
    width: 48px !important; height: 48px !important;
    background: rgba(255,255,255,.30) !important;
    border: 0 !important; color: #fff !important;
    font-size: 24px !important; border-radius: 6px !important;
    cursor: pointer; display: grid !important; place-items: center !important;
    -webkit-tap-highlight-color: transparent;
  }
  #pd-lightbox .pd-nav.prev{
    grid-row: 3 !important; grid-column: 1 !important;
    justify-self: start !important;      /* ALT-SOL */
  }
  #pd-lightbox .pd-nav.next{
    grid-row: 3 !important; grid-column: 2 !important;
    justify-self: end !important;        /* ALT-SAĞ */
  }

  /* Servis Detay */
  #sd-lightbox .sd-nav{
    width: 48px !important; height: 48px !important;
    background: rgba(255,255,255,.30) !important;
    border: 0 !important; color: #fff !important;
    font-size: 24px !important; border-radius: 6px !important;
    cursor: pointer; display: grid !important; place-items: center !important;
    -webkit-tap-highlight-color: transparent;
  }
  #sd-lightbox .sd-nav.prev{
    grid-row: 3 !important; grid-column: 1 !important;
    justify-self: start !important;      /* ALT-SOL */
  }
  #sd-lightbox .sd-nav.next{
    grid-row: 3 !important; grid-column: 2 !important;
    justify-self: end   !important;      /* ALT-SAĞ */
  }

  /* --------------------------------------------------------------
   5) THUMB ŞERİDİ — Tek sıra, yatay kaydırmalı (wrap ASLA yok)
  -------------------------------------------------------------- */

  /* Proje Detay */
  #pd-lightbox .pd-thumbs{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;              /* okların altında */
    display: flex !important;
    flex-wrap: nowrap !important;        /* >>> alt satıra düşme */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important; min-width: 0 !important;
    padding: 8px 6px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    white-space: nowrap !important;      /* inline kırılmayı da kapat */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
  }
  #pd-lightbox .pd-thumbs .pd-thumb-img,
  #pd-lightbox .pd-thumbs img{
    flex: 0 0 auto !important;           /* tek tek kutular: TEK SIRA kal */
    display: inline-block !important;    /* white-space ile uyumlu */
    width: 92px !important; height: 60px !important;
    object-fit: cover !important;
    opacity: .65 !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
  }
  #pd-lightbox .pd-thumbs .pd-thumb-img.is-active,
  #pd-lightbox .pd-thumbs img.is-active{
    opacity: 1 !important; border-color: #fff !important;
  }

  /* Servis Detay */
  #sd-lightbox .sd-thumbs{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;              /* okların altında */
    display: flex !important;
    flex-wrap: nowrap !important;        /* >>> alt satıra düşme */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important; min-width: 0 !important;
    padding: 8px 6px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
  }
  #sd-lightbox .sd-thumbs img{
    flex: 0 0 auto !important;
    display: inline-block !important;
    width: 92px !important; height: 60px !important;
    object-fit: cover !important;
    opacity: .65 !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
  }
  #sd-lightbox .sd-thumbs img.is-active{
    opacity: 1 !important; border-color: #fff !important;
  }

  /* --------------------------------------------------------------
   6) CAPTION & COUNT — Ayrı satırlar (çakışma yok)
  -------------------------------------------------------------- */

  /* Proje Detay */
  #pd-lightbox .pd-caption{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;              /* 5. satır */
    display: block !important;
    text-align: center !important;
    color: #fff !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
    max-width: 96vw !important;
    overflow-wrap: anywhere !important;  /* uzun başlıklarda taşma yapma */
  }
  #pd-lightbox .pd-count{
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;              /* 6. satır */
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #bbb !important;
    margin: 6px 0 8px !important;
    line-height: 1.2 !important;
  }

  /* Servis Detay */
  #sd-lightbox .sd-caption{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;              /* 5. satır */
    display: block !important;
    text-align: center !important;
    color: #fff !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
    max-width: 96vw !important;
    overflow-wrap: anywhere !important;
  }
  #sd-lightbox .sd-count{
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;              /* 6. satır */
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #bbb !important;
    margin: 6px 0 8px !important;
    line-height: 1.2 !important;
  }

  /* --------------------------------------------------------------
   7) X (KAPAT) — Sağ üstte sabit; ortalamaya dahil değil
      (Sınıf adların projede farklıysa uyarlayabilirsin.)
  -------------------------------------------------------------- */
  #pd-lightbox .pd-close,
  #sd-lightbox .sd-close{
    position: absolute !important; top: 10px !important; right: 10px !important;
    width: 38px !important; height: 38px !important;
    background: rgba(255,255,255,.30) !important;
    border-radius: 10px !important; border: 0 !important; color: #fff !important;
    display: grid !important; place-items: center !important;
  }

  /* --------------------------------------------------------------
   8) GENEL GÜVENLİK — Tüm .lightbox img’leri mobilde sığsın
  -------------------------------------------------------------- */
  .lightbox img{
    max-width: 96vw !important;
    max-height: 90dvh !important;
    object-fit: contain !important;
  }

  /* ADIM 6 — ANASAYFA SOSYAL BAR: gereksiz boşlukları kaldır; düzgün kutular */
  .social-bar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2100;
    display: flex; justify-content: center; align-items: center;
    gap: 10vw; padding: 1.2em 4vw;
    background: transparent;
    border-top: 1px solid transparent;
    backdrop-filter: blur(6px);
  }
  .social-bar .social-link{
    display: inline-flex; align-items: center; justify-content: center;
    padding: .6em .8em; border: none; margin: 0; font-size: 0;
    background: transparent;
  }
  .social-bar .social-link svg,
  .social-bar .social-link img{
    width: 25px; height: 25px; display: block;
  }

  /* ADIM 7 — SERVİSLER: tek kolon (eski kural) + kart içeriğini biraz yukarı al */
/* ============================
   SERVİSLER — TEK SÜTUN + İÇERİĞİ YUKARI + -5px YAZI
   (İstediğin kod BLOĞUNA entegre edildi; fazlalık yok)
   ============================ */

/* A) TEK SÜTUN KİLİDİ ve KAPSAYICI ÖLÇÜLERİ
   - Tema "col-6 / flex / columns" dayatsa bile tek sütun yapar
   - Kartlar arası dikey boşluk: row-gap
   - Sayfa içi yatay boşluk: width + margin */
.services-page .services-grid,
.services-grid,
.svc-grid{
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: minmax(0, 1fr) !important; /* TEK sütun */
  row-gap: 4% !important;
  column-gap: 0 !important;
  width: 100% !important;
  margin: 3% auto 15% !important;

  /* Güvenlik: başka düzenleri iptal et */
  flex-wrap: nowrap !important;       /* flex bazlıysa kırmayı kapat */
  column-count: 1 !important;         /* CSS columns ise 1 kolona indir */
}

/* B) ÇOCUKLAR: Kartların genişliği %100 olsun (col-6 vb. sınıfları ezer) */
.services-page .services-grid > *,
.services-grid > *,
.svc-grid > *{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;          /* Bootstrap col-6 vb. için */
  float: none !important;
  break-inside: avoid !important;     /* masonry/columns kırılmasın */
}
/* C) KART İÇ PADDING — kart sınırı ile içerik arasına boşluk
   (BURAYA EKLİYORSUN) */
.services-page .service-card,
.services-page .svc-card{
  padding: 4.5% 20% !important;      /* üst-alt %4.5, sağ-sol %5.5 */
  box-sizing: border-box;              /* padding genişliği taşırmasın */
}

/* 1) İKON/LOGO BOYU (kart içindeki simge) — BURADAN AYARLA
   Not: Hem kapsayıcıya hem img/svg’ye veriyoruz ki hiçbir kural kaçamasın. */
.services-page .services-grid .service-card .svc-icon,
.services-page .services-grid .svc-card   .svc-icon,
.services-page .service-card .svc-icon,
.services-page .svc-card   .svc-icon{
  width: 48px !important;          /* ← ikon genişliği */
  height: 48px !important;         /* ← ikon yüksekliği */
  line-height: 48px !important;    /* hizalama için */
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: center !important;
}
.services-page .service-card .svc-icon img,
.services-page .service-card .svc-icon svg,
.services-page .svc-card   .svc-icon img,
.services-page .svc-card   .svc-icon svg{
  width: 100% !important; 
  height: 100% !important; 
  display: block !important;
  max-width: none !important; 
  max-height: none !important;
}

/* 2) İÇERİĞİ YUKARI AL — top yerine translateY daha kesin çalışır */
.services-page .services-grid .service-card .svc-title,
.services-page .services-grid .service-card .title,
.services-page .services-grid .service-card .desc,
.services-page .services-grid .service-card .description,
.services-page .services-grid .service-card p,
.services-page .service-card .svc-title,
.services-page .service-card .title,
.services-page .service-card .desc,
.services-page .service-card .description,
.services-page .service-card p{
  transform: translateY(-10px) !important;  /* ← ne kadar yukarı? buradan değiştir */
}

/* 3) BAŞLIK & METİN PUNTO — BURADAN -5px etkisini kesin uygula
   (Başlık ve paragrafları ayrı ayrı zorluyoruz) */
.services-page .services-grid .service-card h1,
.services-page .services-grid .service-card h2,
.services-page .services-grid .service-card h3,
.services-page .service-card h1,
.services-page .service-card h2,
.services-page .service-card h3{
  font-size: calc(1em - 5px) !important;    /* ← 5px yerine istediğini yaz */
  line-height: 1.2 !important;
}
.services-page .services-grid .service-card p,
.services-page .services-grid .service-card .desc,
.services-page .services-grid .service-card .description,
.services-page .service-card p,
.services-page .service-card .desc,
.services-page .service-card .description{
  font-size: calc(1em - 5px) !important;    /* ← paragraf ve açıklama */
  line-height: 1.35 !important;
}

/* 4) “Yukarı alma”yı tüm içerik bloğuna da uygula (varsa .content) */
.services-page .services-grid .service-card .content,
.services-page .service-card .content{
  transform: translateY(-8px) !important;   /* genel blok yukarı */
}


/* =========================================================
   ADIM 8 — SERVİS DETAY 
   ========================================================= */

/* 1) Kapsayıcı: genişlik ↑, **TEK SÜTUN** grid, aralıklar */
.service-details-page .sd-gallery, .service-details-page .sd-grid,
#service-details-page .sd-gallery, #service-details-page .sd-grid,
.service-details-page .sd-wrap,    #service-details-page .sd-wrap{
  display: grid !important;
  grid-template-columns: 1fr !important;     /* ← TEK SÜTUN */
  gap: 3% 0 !important;                      /* dikey 3%, yatay 0 */
  width: 92% !important;                     
  margin: 2% auto 6% !important;             
  box-sizing: border-box;
}

/* 2) Kartın görsel alanını büyüt: kare oran + min-yükseklik (KART İÇİNE DOKUNMA) */
.service-details-page .sd-stack, #service-details-page .sd-stack{
  position: relative;
  aspect-ratio: 1 / 1;                        
  min-height: clamp(180px, 38vw, 520px);      
  cursor: pointer;
  overflow: visible;                           
}

/* 3) Önyüz viewport: yalnız ilk görsel önyüzde, kutuyu doldurur */
.service-details-page .sd-viewport, #service-details-page .sd-viewport{
  position: absolute; inset: 0;
  border-radius: 0; overflow: hidden; z-index: 3;
}
.service-details-page .sd-viewport img, #service-details-page .sd-viewport img{
  display: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.service-details-page .sd-viewport img:first-child,
#service-details-page .sd-viewport img:first-child{
  display: block;
}

/* 4) (Opsiyonel) Grid dışındaki img’ler için varsayılanlar */
.sd-gallery img, .sd-grid img{
  width: 100%; height: auto; object-fit: cover;
}

/* === EK 1 — HERO/ÜST AÇIKLAMA: arkaplansız ve geniş === */
/* (bazı temalarda hero kutusuna arkaplan üstten/alıntıdan gelebiliyor;
   o yüzden hem kutuyu hem de içteki olası kart/box elemanlarını sıfırlıyoruz) */
body.service-details-page :is(.sd-hero, .service-hero, .hero, .section-hero, .page-hero),
#service-details-page     :is(.sd-hero, .service-hero, .hero, .section-hero, .page-hero){
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 3% !important;
  background: transparent !important;     /* ARKAPLAN YOK */
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
body.service-details-page :is(.sd-hero, .service-hero, .hero, .section-hero, .page-hero) :is(.desc, .copy, .card, .box),
#service-details-page     :is(.sd-hero, .service-hero, .hero, .section-hero, .page-hero) :is(.desc, .copy, .card, .box){
  background: transparent !important;     /* içte arkaplan varsa da sök */
  border: 0 !important; box-shadow: none !important;
  max-width: 100% !important;             /* daraltan max-width’leri iptal et */
  margin-left: 0 !important; margin-right: 0 !important;
}

/* === EK 2 — SAYFA SONU OVERLAP FİX (Randevu kartıyla çakışmayı önle) === */
/* İçeriğin sonuna güvenli bir alt boşluk ekle (randevuya binmesin) */
body.service-details-page .page-content,
#service-details-page .page-content{
  padding-bottom: clamp(120px, 18vh, 260px) !important;
}

/* Galeri kapsayıcılarının sonuna ekstra nefes (özellikle son karttan sonra) */
.service-details-page :is(.sd-wrap, .sd-gallery, .sd-grid),
#service-details-page     :is(.sd-wrap, .sd-gallery, .sd-grid){
  position: relative !important;
  z-index: 0 !important;
  margin-bottom: 8% !important;
}
.service-details-page :is(.sd-gallery, .sd-grid) > *:last-child,
#service-details-page     :is(.sd-gallery, .sd-grid) > *:last-child{
  margin-bottom: 6% !important;           /* son karttan sonra ekstra boşluk */
}

/* Randevu bileşeni kesinlikle ayrı satırda ve üstte kalsın */
.service-details-page :is(.appointment, .appointment-section, .randevu, .randevu-card),
#service-details-page     :is(.appointment, .appointment-section, .randevu, .randevu-card){
  display: block !important;
  clear: both !important;
  position: relative !important;
  z-index: 2 !important;                  /* galeri üstüne çıksın */
  margin-top: 6% !important;              /* gerekirse 8–10% yap */
}
/* 1) Galeri kapsayıcısının SONUNA ekstra boşluk ekle
      (son kart başlığı/görseli randevuya binmesin) */
.service-details-page .sd-wrap,
.service-details-page .sd-gallery,
.service-details-page .sd-grid,
#service-details-page .sd-wrap,
#service-details-page .sd-gallery,
#service-details-page .sd-grid{
  /* mevcut margin’lerin üstüne EK güvenlik payı */
  margin-bottom: clamp(120px, 14vh, 220px) !important;  /* ← yalnızca ALT boşluk */
}

/* 2) Randevu bloğu her koşulda YENİ SATIR ve ÜSTTE kalsın */
.service-details-page :is(.appointment, .appointment-section, .randevu, .randevu-card),
#service-details-page :is(.appointment, .appointment-section, .randevu, .randevu-card){
  display: block !important;     /* inline/flex ihtimallerini kapat */
  clear: both !important;        /* yukarıdan gelen akışı temizle */
  position: relative !important; /* z-index çalışsın */
  z-index: 2 !important;         /* galeri öğelerinin üstünde dursun */
  margin-top: clamp(45px, 5vh, 120px) !important;  /* galeri sonrası nefes */
}

/* (İsteğe bağlı minik güvenlik payı — istersen kaldırabilirsin) */
body.service-details-page .page-content,
#service-details-page .page-content{
  padding-bottom: clamp(24px, 4vh, 80px) !important;
}

  /* ADIM 9 — PROJELER (LİSTE): tek kolon + intro en başta (eski kural) + üst boşluğu azalt + butonları eşitle */
 /* 0) Masaüstü spine (ortadaki beyaz çizgi) → mobilde kapalı */
  .projects-page .projects-list.two-col::before,
  .projects-page .projects-list.two-col::after{
    content: none !important;
    display: none !important;
  }

  /* 1) Ebeveyn listeyi tek kolon gibi davranmaya zorla */
  .projects-page .projects-list.two-col{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Eski iki kolonu gizle (HTML’e dokunmadan) */
  .projects-page .projects-list.two-col .proj-col,
  .projects-page .projects-list.two-col .col-left,
  .projects-page .projects-list.two-col .col-right{
    display: none !important;
  }

  /* 3) JS’in eklediği tek kolon kapsayıcı — sayfaya ORTALA + aralığı büyüt */
  .projects-page .projects-list.two-col .mobile-linear{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    row-gap: clamp(36px, 9vw, 72px) !important;         /* kartlar arası genel boşluk */
    width: min(92%, 780px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 6% !important;
  }

  /* 4) Kartların temel yerleşimi — asla yan yana gelmesin; alt nefes ↑ */
  .projects-page .projects-list.two-col .mobile-linear .project-card{
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
    margin-bottom: clamp(30px, 8vw, 72px) !important;
    position: relative !important; 
    z-index: 1 !important;
  }

  /* 5) INTRO KARTI — yan yana düzen */
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card){
    display: grid !important;
    grid-template-columns: minmax(120px, clamp(140px, 34vw, 190px)) 1fr !important; /* görsel | metin */
    gap: clamp(10px, 3.5vw, 18px) !important;
    align-items: center !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(30px, 9vw, 72px) !important;
    padding: 0 !important;                 /* kart içinde ekstra boşluk olmasın */
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* 5.a) INTRO GÖRSELİ — TELEFONDA BORDERSIZ (çerçeve/pseudo/radius yok) */
  /* Kartın KENDİ sınır çizgileri (varsa) */
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card){
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  /* Görsel kapsayıcıları: figure/picture/… — her türlü çerçeveyi kapa */
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card)
  :is(figure, picture, .intro-media, .media, .thumb, .image, .img-wrap){
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;                  /* taşanı kırp, kenara yapışsın */
    aspect-ratio: 2 / 3 !important;               /* 4:6 (=2:3) oran */
    width: 100% !important; height: auto !important; display: block !important;
  }
  /* Pseudo çerçeveleri (tema çizgileri) kapat */
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card)
  :is(figure, picture, .intro-media, .media, .thumb, .image, .img-wrap)::before,
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card)
  :is(figure, picture, .intro-media, .media, .thumb, .image, .img-wrap)::after{
    content: none !important;
    display: none !important;
  }
  /* IMG — tam doldur; çizgi/radius yok; üst/sol boşluk kalmasın */
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card)
  :is(img, figure > img, picture > img){
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left top !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    float: none !important;
  }

  /* 5.b) Intro METİN bloğu — sağ sütun, sadece metne nefes */
  .projects-page .projects-list.two-col .mobile-linear
  :is(.project-card.info-card, .project-card.projects-intro, .project-card.intro-card, .projects-intro, .intro-card)
  :is(.intro-content, .content, .text, .desc, .description, h1, h2, h3, h4, p, ul, ol){
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 0 .4em !important;
    line-height: 1.35 !important;
    padding: 0 !important;                 /* çerçeve yokken metni de sıfırdan başlat */
  }

  /* 6) SADECE PROJE KARTLARINDA — “Detaylar” butonu (eşitleme + yazıyı 3px aşağı) */
  .projects-page .projects-list.two-col .mobile-linear
  .project-card:not(.appointment):not(.appointment-card):not(.appointment-section)
  :is(.details-btn, .btn, .proj-cta, a.btn){
    display: inline-block !important; 
    justify-content: center !important; 
    align-items: center !important;

    width: 40% !important;                         /* hafif dar kutu */
    max-width: 220px !important;
    padding: 1.15em 0 !important;                  /* dolgun yükseklik */
    padding-top: 8% !important;        /* ↓ metni aşağı iter (değeri artır/azalt) */
    line-height: 1.2 !important;

    margin: 5px auto 5px !important;                /* ortala */
    text-align: center !important; 
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .projects-page .projects-list.two-col .mobile-linear
  .project-card:not(.appointment):not(.appointment-card):not(.appointment-section)
  :is(.details-btn, .btn, .proj-cta, a.btn) :is(span, strong, em){
    display: inline-block !important;
    transform: translateY(3px) !important;         /* yazıyı 3px aşağı al */
  }
  .projects-page .projects-list.two-col .mobile-linear
  .project-card:not(.appointment):not(.appointment-card):not(.appointment-section)
  :is(.details-btn, .btn, .proj-cta, a.btn) :is(svg, img){
    vertical-align: middle !important;
  }
  /* ADIM 10 — PROJE DETAY: düzeni bozma; genişlik ve gridler eski gibi kalsın.
                 Sadece başlangıç boşluğunu azalt + mobil ipucu kutusu ekle */
  .pd-page, .project-detail, .pd-wrap{
    width: 100%; max-width: 100vw; margin: 0 auto; overflow-x: hidden;
  }
  .pd-section, .pd-block, .pd-stage, .pd-hero, .pd-frame-wrap,
  .pd-info-grid, .pd-info, .pd-cards, .pd-gallery, .pd-thumbs, .pd-images{
    width: 92%; margin-left: auto; margin-right: auto;
  }
  .pd-frame, .pd-viewport{ width: 100%; height: 56dvh; max-height: 70dvh; overflow: hidden; }
  model-viewer{ width: 100%; height: 100%; display: block; max-width: 100%; touch-action: none; }
  .pd-info-grid, .pd-info, .pd-cards{
    display: grid !important; grid-template-columns: 50% 50% !important;
    gap: 3% 3%; margin-top: 3%; margin-bottom: 6%;
  }
  .pd-gallery, .pd-thumbs, .pd-images{
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
    gap: 3%; margin-top: 0; margin-bottom: 6%;
  }
  .pd-gallery img, .pd-thumb{ width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
  /* ÜST BOŞLUK ↓ */
  .pd-page > *:first-child, .project-detail > *:first-child{
    margin-top: 2% !important;
  }
  /* Mobil ipucu kutusu */
  .pd-page :is(.pd-tip, .model-tip, .tip, .hint){
    font-size: clamp(11px, 2.6vw, 13px);
    padding: .6em .8em; border-radius: 10px;
    background: rgba(0,0,0,.55); color: #eee;
    max-width: 86%; margin: 8px auto 0; text-align: center;
  }
  .pd-page :is(.pd-tip, .model-tip, .tip, .hint) > *{ display: none; }  /* eski metni gizle */
  .pd-page :is(.pd-tip, .model-tip, .tip, .hint)::after{
    content: "Modele dokunup sağa sola döndürerek çevresinde gezinebilirsiniz.";
  }
/* Kapsayıcı: katman ayır + eski outline'ı kapat */
.projects-page .projects-list.two-col .mobile-linear
.project-card.info-card :is(.info-media, .info-grid .img){
  position: relative !important;
  outline: none !important;              /* görünmeyen outline'ı kapat */
  border: none !important;               /* olası border varsa kapat */
  overflow: hidden !important;
  isolation: isolate !important;         /* pseudo-çizgiyi üst katmanda tut */
  transform: translateZ(0);              /* sub-pixel kesilmeyi azalt */
  will-change: transform;
}

/* İç kenar çizgisi: dört kenarda eşit ve net */
.projects-page .projects-list.two-col .mobile-linear
.project-card.info-card :is(.info-media, .info-grid .img)::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;                   /* kapsayıcının tam içi */
  border: var(--img-stroke-w, 1px) solid var(--img-stroke, rgba(255,255,255,.20)) !important;
  pointer-events: none !important;       /* tıklamaları engelleme */
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Görsel: kutu içinde eşit pay bırak (önceki kuralın devamı/tekilleştirme) */
.projects-page .projects-list.two-col .mobile-linear
.project-card.info-card :is(.info-media, .info-grid .img) > img{
  position: absolute !important;
  inset: 3% !important;                  /* üst/sağ/alt/sol = %3 (eşit boşluk) */
  width: 94% !important;
  height: 94% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;   /* tam merkez */
  margin: 0 !important;
}
/* ============================================================
   PROJE DETAY — En üst başlık/hero arkaplanını tamamen kaldır
   (zemin rengi, görsel, gradient overlay ve pseudo-şeritler dahil)
   ============================================================ */

/* 1) Hero kapsayıcıyı şeffaf yap */
.pd-page :is(.pd-hero, .project-hero, .page-hero, .hero),
.project-detail :is(.pd-hero, .project-hero, .page-hero, .hero){
  background: transparent !important;       /* arkaplanı kaldır */
  background-image: none !important;        /* görsel/gradient varsa sök */
  border: 0 !important;
  box-shadow: none !important;              /* alt çizgi/ gölge varsa kapat */
  backdrop-filter: none !important;         /* blur şeritlerini kapat */
}

/* 2) Hero içindeki kutular zemin basıyorsa onları da sıfırla */
.pd-page :is(.pd-hero, .project-hero, .page-hero, .hero)
  :is(.desc, .copy, .content, .inner, .card, .box, .heading, .title-wrap){
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Tema overlay/pseudo çizgilerini kapat */
.pd-page :is(.pd-hero, .project-hero, .page-hero, .hero)::before,
.pd-page :is(.pd-hero, .project-hero, .page-hero, .hero)::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 4) Bazı temalarda ayrı overlay elemanı olur — emin olmak için */
.pd-page :is(.pd-hero, .project-hero, .page-hero, .hero)
  :is(.overlay, .shade, .bg, .backdrop){
  display: none !important;
  background: none !important;
}
/* ==============================
   HAKKIMIZDA — MOBİL DÜZELTME (REVIZE v3)
   (tek sütun, %5 içerden; ÜST 3 PARÇA TAM BİTİŞİK; model daha aşağı; sayaç dış kutu daha yüksek)
   ============================== */

/* 0) Sayfa içini ortala ve kenarlardan %5 içeri al */
.about-page .page-content{
  max-width: 100% !important;                 /* desktop max-width kilidi gider */
  margin: 0 auto !important;                  /* ortala */
  padding-inline: 5% !important;              /* kenarlardan %5 içeri */
  box-sizing: border-box;
}

/* 1) Üst bölümü tek sütun yap ve PARÇALARI TAM BİTİŞİK hale getir */
.about-page .about-cols{
  display: grid !important;
  grid-template-columns: 1fr !important;      /* tek sütun */
  row-gap: 0 !important;                      /* ← satır arası boşluk yok */
  width: 100%;
  margin: 0 auto;
  justify-items: stretch !important;
  margin-bottom: 0 !important;                /* model boşluğunu .ml’de vereceğiz */
}

/* 1.a) – Sıfırlamalar (bitişik görünüm için) */
.about-page .about-cols *{ margin:0 !important; padding:0 !important; }
.about-page .about-cols figure{ display:block !important; }

/* 1.b) Desktop sabit genişlik/yüksekliklerini iptal et */
.about-page .about-cols .col{ height:auto !important; width:auto !important; }
.about-page .about-cols .c1,
.about-page .about-cols .c2,
.about-page .about-cols .c3{
  width:auto !important; max-width:100% !important;   /* 380/420/300px iptal */
}

/* 1.c) GÖRSELLER: kutuyu tam doldur, taşanı kırp (kritik) */
.about-page .about-cols .box.img,
.about-page .about-cols figure.img{
  height: var(--h, 240px) !important;    /* HTML’de verdiğin --h kadar; yoksa 240px */
  width: 100% !important;
  overflow: hidden !important;           /* taşanı kırp */
  position: relative;
}
.about-page .about-cols .box.img > img,
.about-page .about-cols figure.img > img{
  display:block !important;
  width:100% !important;
  height:100% !important;                /* kutuyu dikeyde de doldur */
  object-fit:cover !important;           /* oranı koru, fazlayı kırp */
  object-position:center !important;     /* ortadan kırp */
}

/* 2) Logo/Model sahnesi – ÜST MARJİNİNE DOKUNMUYORUM (senin değer) */
.about-page .ml{
  margin-top: clamp(20px, 8vh, 50px) !important;   /* ← aynen bırakıldı */
}

/* 3) Sayaç kapsayıcısı: %5 içerden, DIŞ KUTU daha yüksek (kartları sınırlamasın) */
.about-page .about-stats{
  margin: 3% auto 4% !important;
  padding-inline: 5% !important;
  height: auto !important;
  min-height: clamp(300px, 38vh, 440px) !important;   /* ← dış kutu yükseldi */
  padding-block: 16px !important;
  box-sizing: border-box;
}

/* 3.a) Sayaç ızgarası 2×2 */
.about-page .stats-grid{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: initial !important;
}

/* 3.b) Tek tek sayaçlar: genişlik/yükseklik sabitlerini temizle */
.about-page .stat{
  flex: none !important;                   /* calc(25% - 130px) vb. iptal */
  width: auto !important; height: auto !important;
  min-height: 120px !important;
  display: grid !important; place-items: center !important;
  text-align: center !important; border-radius: 0;
}
.about-page .stat .stat-num{  font-size: 170%; }
.about-page .stat .stat-name{ font-size:  90%; }


/* =========================================================
   ADIM 12 — İLETİŞİM (MOBİL REVIZE — INFO KUTUSU FIX, % TABANLI)
   ========================================================= */

/* Sayfa genişliği + topbar'dan sonra belirgin nefes (servislerle aynı taban + ekstra %) */
.contact-page .page-content{
  width: 92% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  padding-top: calc(var(--topbar-h) + var(--page-headroom) + 8%) !important; /* ↓ üstten başlat */
}

/* En üst açıklama (hero) — .page-content ile aynı genişlikte */
.contact-page .hero,
.contact .hero,
.contact-page .section-hero,
.contact-page .page-hero{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 2% !important;
}

/* ÜST BLOK: Bilgiler + Telefon → tek sütun, ortalı kapsayıcı */
.contact-page .contact-top{
  display: grid !important;
  grid-template-columns: 1fr !important;  /* tek sütun */
  gap: 2% !important;                     /* yüzde aralık */
  width: 100% !important;
  margin: 0 auto !important;
  justify-items: center !important;
}

/* — İLETİŞİM BİLGİLERİ (sol) — */
.contact-page .contact-top .ct-left{
  order: 1;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2% 2% !important;              /* kutu kompakt */
  box-sizing: border-box;
}

/* Başlık: pseudo veya gerçek başlık → kutu tepesinde ORTADA */
.contact-page .contact-top .ct-left::before,
.contact-page .contact-top .ct-left > h1:first-child,
.contact-page .contact-top .ct-left > h2:first-child,
.contact-page .contact-top .ct-left > .section-title:first-child,
.contact-page .contact-top .ct-left > .box-title:first-child,
.contact-page .contact-top .ct-left > .title:first-child{
  display: block !important;
  width: 100% !important;
  margin: 2% auto 2% !important;
  text-align: center !important;          /* ← ORTALI */
}

/* Bilgi listesi: % tabanlı ve sıkı aralık */
.contact-page .ct-info-list{
  margin: 0 auto !important;
  row-gap: 3% !important;                 /* satırlar arası nefes (% ile) */
}

/* Her bir satır: 2 kolon → [ikon %22][metin %76] (2% boşluk) */
.contact-page .ct-info-item{
  display: grid !important;
  grid-template-columns: 22% 76% !important;
  column-gap: 2% !important;
  align-items: center !important;
  padding: 1.6% 0 !important;             /* satır iç boşluğu %, kompakt */
  line-height: 1.25 !important;           /* metin satır yüksekliği */
}

/* İKON HÜCRESİ: ikonu taşırmadan büyüt, hücre merkezine yerleştir */
.contact-page .ct-info-item > :first-child{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;     /* ikon tam ortada */
}
.contact-page .ct-info-item :is(.ct-ic, .info-ic, .icon, img.ct-ic, svg.ct-ic){
  width: 85% !important;                 /* hücre genişliğini doldur */
  height: auto !important;
  object-fit: contain !important;
}

/* — TELEFON MAKETİ (sağ) — tam genişlik ve ortalı; iç logolar merkezde dağılsın */
.contact-page .contact-top .ct-right{
  order: 2;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}
.contact-page .contact-top .phone-stage{
  width: 100% !important;
  margin: 0 auto !important;
}
.contact-page .phone-stage :is(.phone-screen, .socials, .social-wrap, .social-grid, .social-row){
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;     /* logolar sola değil, merkeze */
  gap: 4% 4% !important;
}

/* HARİTA KISMI */
/* Bölüm çevresinde nefes alanı */
.contact-page .map-bar-section{
  width: 100% !important;
  margin: 12% auto 5% !important;            /* üst/alt boşluk */
}

/* Oran tabanlı yükseklik + minimum görünür yükseklik */
.contact-page .map-bar{
  position: relative;
  width: 100% !important;
  min-height: 40vh !important;              /* ≈ 160vh / 3 */
}

/* Yükseklik: 750% → 250% (tam 1/3) */
.contact-page .map-bar::before{
  content: "";
  display: block;
  padding-top: 250% !important;             /* ← genişliğin 2.5x yüksekliği */
}

/* İframe kutuyu tamamen doldursun */
.contact-page .map-bar iframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* ALT BLOK: Randevu metni + Form → tek sütun; açıklama SOLA, başlık ortalı */
.contact-page .row.row-2{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2% !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.contact-page .row.row-2 .desc-card{
  order: 3; width: 100% !important; margin: 0 !important;
  text-align: left !important;             /* açıklama SOLA */
}
.contact-page .row.row-2 .desc-card h2{
  text-align: center !important;           /* başlık ORTALI */
}
.contact-page .row.row-2 .form-card{
  order: 4; width: 100% !important; margin: 0 !important;
}

/* Yan yana zorlayan eski kalıntıları temizle (garanti) */
.contact-page :is(.contact-top, .row, .contact-grid, .contact-row, .content, .contact-wrap) > *{
  float: none !important; flex: none !important; max-width: 100% !important;
}

body.contact-page .page-content{
  padding-bottom: clamp(35px, 8vh, 50px) !important;
}

   /* 1) OVERLAY başlangıç durumu (kapalı) */
  #sd-lightbox{
    position: fixed; inset: 0; z-index: 9999;
    display: none; visibility: hidden; opacity: 0;
    pointer-events: none;
  }
  #sd-lightbox.is-open{
    display: block; visibility: visible; opacity: 1;
    pointer-events: auto;
  }

  /* 2) SAHNE — 6 satır, içerik aşağıdan başlar (spacer ile) */
  #sd-lightbox .sd-stage{
    --sd-top-spacer: clamp(90px, 14vh, 180px);   /* ↑ daha aşağı istersen büyüt */
    position: absolute; inset: 0;                /* (servis-details.css ile uyum) */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;   /* nav için 2 sütun */
    grid-template-rows: var(--sd-top-spacer) auto auto auto auto auto !important;
    /*                    1) spacer        2) img 3) nav 4) thumbs 5) caption 6) count */
    align-content: start !important;
    justify-items: center !important;
    gap: 10px 8px !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  /* 3) BÜYÜK GÖRSEL — “contain” ile ekrana tam sığsın */
  #sd-lightbox .sd-img{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;                      /* spacer’ın hemen altında */
    max-width: 96vw !important;
    max-height: 60vh !important;                 /* altta nav+thumbs için yer bırak */
    width: auto !important; height: auto !important;
    object-fit: contain !important;              /* kırpma yok */
    border-radius: 0 !important;
  }

  /* 4) NAV OKLARI — resmin HEMEN altında (sol/sağ) */
  #sd-lightbox .sd-nav{
    width: 48px !important; height: 48px !important;
    background: rgba(255,255,255,.30) !important;
    border: 0 !important; color: #fff !important;
    font-size: 24px !important; border-radius: 6px !important;
    cursor: pointer; display: grid !important; place-items: center !important;
    -webkit-tap-highlight-color: transparent;
    z-index: 2 !important;                        /* thumbs’ın üstünde kalsın */
  }
  #sd-lightbox .sd-nav.prev{ grid-row: 3 !important; grid-column: 1 !important; justify-self: start !important; }
  #sd-lightbox .sd-nav.next{ grid-row: 3 !important; grid-column: 2 !important; justify-self: end   !important; }

  /* 5) THUMBS — TEK SIRA, yatay kaydırma; wrap ASLA yok */
  #sd-lightbox .sd-thumbs{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;                      /* okların altında */
    display: flex !important;
    flex-wrap: nowrap !important;                /* >>> alt satıra düşme */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important; min-width: 0 !important;
    padding: 8px 6px 10px !important;            /* ↓ caption’dan önce nefes */
    overflow-x: auto !important;
    overflow-y: hidden !important;               /* dikey taşmayı kapat */
    white-space: nowrap !important;              /* inline kırılmayı engelle */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    z-index: 1 !important;                       /* caption/sayaç (z=2) üstüne binmesin */
  }
  /* Tek tek thumb görseller (sizde genelde <img>) */
  #sd-lightbox .sd-thumbs img{
    flex: 0 0 auto !important;                   /* tek sıra sabit kutular */
    display: inline-block !important;
    width: 92px !important; height: 60px !important;
    object-fit: cover !important;
    opacity: .65 !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
  }
  #sd-lightbox .sd-thumbs img.is-active{ opacity: 1 !important; border-color: #fff !important; }

  /* 6) CAPTION & COUNT — ayrı satırlar + üst katman */
  #sd-lightbox .sd-caption{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;                       /* 5. satır (AYRI) */
    display: block !important;
    text-align: center !important;
    color: #fff !important;
    margin-top: 4px !important;                   /* thumbs ile arayı aç */
    line-height: 1.25 !important;
    max-width: 96vw !important;
    overflow-wrap: anywhere !important;           /* uzun başlık taşmasın */
    z-index: 2 !important;                        /* thumbs’ın üstünde */
  }
  #sd-lightbox .sd-count{
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;                       /* 6. satır (AYRI) */
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #bbb !important;
    margin: 6px 0 8px !important;                 /* caption ile nefes */
    line-height: 1.2 !important;
    z-index: 2 !important;                        /* thumbs’ın üstünde */
  }

  /* 7) X (Kapat) — sağ-üstte sabit; her şeyin üstünde */
  #sd-lightbox .sd-close{
    position: absolute !important; top: 10px !important; right: 10px !important;
    width: 38px !important; height: 38px !important;
    background: rgba(255,255,255,.30) !important;
    border-radius: 10px !important; border: 0 !important; color: #fff !important;
    display: grid !important; place-items: center !important;
    z-index: 3 !important;                           /* tüm katmanların üstü */
  }

  /* 8) Genel emniyet: .lightbox içindeki img’ler mobilde sığsın */
  .lightbox img{
    max-width: 96vw !important;
    max-height: 90dvh !important;
    object-fit: contain !important;
  }
  
}
/* ============================== SON ============================== */