/* Rendered text readability layer
   Keeps the dark luxury look, but raises contrast and text hierarchy
   across published pages. */

:root {
  --text-readable: rgba(255, 255, 255, .76);
  --text-readable-soft: rgba(255, 255, 255, .66);
  --text-readable-muted: rgba(255, 255, 255, .54);
}

main h1,
main h2,
main h3,
main h4 {
  text-wrap: balance;
}

main .sec-h2 em,
main h1 em,
main h2 em,
main h3 em {
  color: var(--or) !important;
  font-style: normal;
}

main p,
main li,
.service-lead,
.blog-hero-desc,
.blog-card-desc,
.post-p,
.post-body p,
.post-body li,
.contact-lead,
.sss-lead,
.sss-insight-panel p,
.faq-a,
.service-faq-item p {
  color: var(--text-readable) !important;
}

main small,
.blog-card-date,
.post-meta,
.breadcrumb,
.cw-breadcrumb,
.sss-breadcrumb {
  color: var(--text-readable-muted) !important;
}

.sec-tag-text,
.blog-card-cat,
.blog-card-new,
.blog-card-cta,
.faq-cat-link:hover {
  color: var(--or) !important;
}

.sec-tag-text {
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
}

.blog-card-title a,
.post-title,
.service-faq-item summary,
.faq-q {
  color: var(--white) !important;
}

h2.blog-card-title {
  font-size: clamp(21px, 2.4vw, 26px) !important;
  line-height: 1.08 !important;
}

main h3 {
  font-size: max(16px, 1em) !important;
  line-height: 1.15 !important;
}

.blog-card-title a {
  font-size: clamp(21px, 2.4vw, 26px) !important;
  line-height: 1.08 !important;
}

.blog-card-desc,
.blog-category-service-cta p,
.blog-cta p {
  font-size: 14px !important;
  line-height: 1.78 !important;
}

.post-body a,
.post-p a,
.post-list a {
  color: #ff8a55 !important;
  border-bottom-color: rgba(255, 138, 85, .58) !important;
  font-weight: 600;
}

.expert-name {
  font-size: 14px !important;
}

.expert-title,
.toc-title {
  font-size: 13px !important;
  color: var(--text-readable-soft) !important;
}

.blog-filter-btn,
.faq-filter-btn,
.faq-cat-link {
  color: rgba(255, 255, 255, .72) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.blog-filter-btn.active,
.blog-filter-btn[aria-current="page"],
.faq-filter-btn.active,
.btn-primary,
.btn-hero,
.cw-btn-primary,
.btn-nav,
.sss-primary-action,
.btn-sss-goto,
.contact-command--primary,
.appt-va-btn-primary,
.svc-cta-btn-primary {
  color: #080808 !important;
  background-color: var(--or) !important;
}

.btn-primary *,
.btn-hero *,
.cw-btn-primary *,
.btn-nav *,
.sss-primary-action *,
.btn-sss-goto *,
.contact-command--primary *,
.appt-va-btn-primary *,
.svc-cta-btn-primary * {
  color: #080808 !important;
}

.back-to-top {
  color: #080808 !important;
  background-color: var(--or) !important;
  border-color: var(--or) !important;
}

.sss-redirect-kicker-text,
.rv-sum-text {
  font-size: 12px !important;
}

.sss-redirect-kicker-text {
  color: var(--or) !important;
}

.blog-filter-btn.active,
.blog-filter-btn[aria-current="page"],
.faq-filter-btn.active {
  background: var(--or) !important;
  border-color: var(--or) !important;
}

.btn-hero-ghost,
.btn-service-ghost,
.sss-secondary-action,
.contact-command,
.appt-va-btn-ghost {
  color: rgba(255, 255, 255, .86) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

.btn-hero-ghost:hover,
.btn-service-ghost:hover,
.sss-secondary-action:hover,
.contact-command:hover,
.appt-va-btn-ghost:hover {
  color: var(--or) !important;
  border-color: var(--or) !important;
}

.para-card,
.service-card-link,
.related-card {
  color: var(--white) !important;
}

.para-name,
.rel-title {
  color: var(--white) !important;
}

.para-desc,
.rel-cat {
  color: var(--text-readable-soft) !important;
}

.ceramic-full-table thead .col-hi {
  color: var(--white) !important;
}

.ceramic-full-table thead .col-hi .pkg-dur {
  color: var(--text-readable-soft) !important;
}

.ceramic-full-table th:first-child,
.ceramic-full-table td:first-child {
  color: var(--white) !important;
  font-family: var(--font-head) !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.ceramic-full-table tbody td:not(:first-child) {
  color: rgba(255, 255, 255, .7) !important;
  font-family: var(--font-head) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.ceramic-full-table tbody td.col-hi {
  color: var(--white) !important;
}

main figcaption,
.post-img-caption,
.post-cover-caption,
.post-img-figure figcaption {
  color: var(--text-readable-soft) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ppf-spec-offer {
  min-height: 38px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.footer-col h4 {
  color: var(--or) !important;
}

@media (max-width: 1024px) {
  main p,
  main li,
  .service-lead,
  .blog-hero-desc,
  .post-p,
  .post-body p,
  .contact-lead,
  .sss-lead {
    font-size: max(13.5px, 1em) !important;
    line-height: 1.68 !important;
  }

  .blog-filter-btn,
  .faq-filter-btn,
  .faq-cat-link {
    min-height: 40px;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   STANDART KAPANIŞ CTA BUTONLARI — tüm sayfalar (mobil + masaüstü)
   4 buton: Randevu Al (WhatsApp) · Yol Tarifi Al · İletişim Sayfası · Randevu İçin Ara (tel:)
   ════════════════════════════════════════════════════════════════ */
.peak-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.peak-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  font-family: var(--font-head, 'Barlow Condensed','Barlow Condensed Fallback',sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .22s ease, border-color .22s ease, color .22s ease,
              transform .15s ease, box-shadow .22s ease;
}
.peak-cta-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
/* WhatsApp ikonu — CSS mask (currentColor ile butonun metin rengini alır) */
.peak-cta-btn--wa::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.peak-cta-btn--wa {
  background: var(--or, #E85D1F) !important;
  color: #080808 !important;
  box-shadow: 0 12px 32px rgba(232, 93, 31, .26);
}
.peak-cta-btn--wa:hover { background: #ff6b2b !important; transform: translateY(-2px); }
.peak-cta-btn--ghost {
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .9) !important;
  border-color: rgba(255, 255, 255, .22);
}
.peak-cta-btn--ghost:hover { color: var(--or, #E85D1F) !important; border-color: var(--or, #E85D1F); }

@media (max-width: 1024px) {
  .peak-cta-row {
    flex-direction: column;
    gap: 11px;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .peak-cta-btn { width: 100%; min-height: 54px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBİL MENÜ — tam ekran kapanış (içerik sızmasını önle) + scroll kilidi
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open .nav-links {
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 98px);
    background: #080808;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════
   ETİKET KÜNYESİ (.sec-tag) — ana sayfa .hs-kicker ile EŞİTLENDİ
   Referans: assets/css/hero-split.css :60-79 (masaüstü) / :366-368 (mobil)
   Tarih: 2026-09-07
   Not: readability-fixes, peak-style-*.css'ten ÖNCE yüklendiği için
        !important olmadan peak-style'ın değerleri kazanır.
   ═══════════════════════════════════════════════════════════ */

/* Masaüstü — referans: çizgi 28px, metin 11px / 0.32em / 600 */
.sec-tag-line {
  width: 28px !important;          /* peak-style: 32px */
}

/* Mobil — referans: .hs-kicker ≤1024px değerleri */
@media (max-width: 1024px) {
  .sec-tag {
    gap: 10px !important;          /* peak-style: 14px */
    margin-bottom: 11px !important; /* peak-style: 18px */
  }
  .sec-tag-line {
    width: 20px !important;        /* peak-style: 32px */
  }
  .sec-tag-text {
    font-size: 9px !important;     /* yukarıdaki 11px'i ezer */
    letter-spacing: 0.2em !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   KICKER BİRLEŞTİRME — 17 varyant ana sayfa .hs-kicker künyesine
   bağlandı (2026-09-07). Referans: hero-split.css :60-79 / :366-368

   KAPSAM DIŞI (bilinçli):
     · Ana sayfa aileleri — hs-kicker (referansın kendisi), stp5c-kicker,
       atm-kicker, sp-kicker, svc-ed-kicker, home-faq-kicker
       (kural: ana sayfa referanstır, değişmez)
     · Çalışmalarımız aileleri — wk-kicker, gal-kicker
       (kural: Çalışmalarımız kapsam dışı; gal-kicker yasal sayfalarda da
        geçtiği için bütünüyle bırakıldı)

   Yapı üç tip: (A) alt <span> çizgili · (B) ::before çizgili · (C) çizgisiz.
   C tipine çizgi EKLENİR, A tipine ::before verilmez (çift çizgi olurdu).
   ═══════════════════════════════════════════════════════════ */

/* ── Kapsayıcı künyesi (17 aile) ── */
.mas-kicker, .legal-kicker, .cam-kicker, .seramik-kicker, .ppf-kicker,
.ic-kicker, .boya-kicker, .ppf-pay-kicker, .ceramic-sc-kicker, .pcl-kicker,
.mfv-kicker, .scs-kicker, .rnd-kicker, .contact-panel-kicker,
.sv-sub-eyebrow, .idx-kicker, .sss-redirect-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  font-family: var(--font-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--or) !important;
}

/* ── (B)+(C) tipleri: çizgi ::before ile ── */
.mas-kicker::before, .legal-kicker::before, .cam-kicker::before,
.seramik-kicker::before, .ppf-kicker::before, .ic-kicker::before,
.boya-kicker::before, .ppf-pay-kicker::before, .ceramic-sc-kicker::before,
.pcl-kicker::before, .mfv-kicker::before, .scs-kicker::before,
.rnd-kicker::before, .contact-panel-kicker::before, .sv-sub-eyebrow::before {
  content: "" !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--or) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ── (A) tipi: çizgi alt <span> olarak zaten var, yalnız ölçü/renk ── */
.idx-kicker-line, .sss-redirect-kicker-line {
  width: 28px !important;
  height: 1px !important;
  background: var(--or) !important;
  flex-shrink: 0 !important;
}
.idx-kicker-text, .sss-redirect-kicker-text {
  font-family: var(--font-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--or) !important;
}

/* ── Mobil (≤1024px): referansın .hs-kicker mobil değerleri ── */
@media (max-width: 1024px) {
  .mas-kicker, .legal-kicker, .cam-kicker, .seramik-kicker, .ppf-kicker,
  .ic-kicker, .boya-kicker, .ppf-pay-kicker, .ceramic-sc-kicker, .pcl-kicker,
  .mfv-kicker, .scs-kicker, .rnd-kicker, .contact-panel-kicker,
  .sv-sub-eyebrow, .idx-kicker, .sss-redirect-kicker {
    gap: 10px !important;
    margin-bottom: 11px !important;
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
  }
  .mas-kicker::before, .legal-kicker::before, .cam-kicker::before,
  .seramik-kicker::before, .ppf-kicker::before, .ic-kicker::before,
  .boya-kicker::before, .ppf-pay-kicker::before, .ceramic-sc-kicker::before,
  .pcl-kicker::before, .mfv-kicker::before, .scs-kicker::before,
  .rnd-kicker::before, .contact-panel-kicker::before, .sv-sub-eyebrow::before,
  .idx-kicker-line, .sss-redirect-kicker-line {
    width: 20px !important;
  }
  .idx-kicker-text, .sss-redirect-kicker-text {
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   BREADCRUMB ŞERİDİ (2026-09-07) — tüm sayfalarda BİREBİR aynı konum
   Önce her breadcrumb kendi hero kapsayıcısının içindeydi; x 48px ile
   350px arasında, y 32px ile 160px arasında oynuyordu. Artık breadcrumb
   <main>'in başındaki tek bir şeritte duruyor.
   Konum referansı = ana sayfa kicker ritmi: sol 52px / üst 120px
   (mobil: 26px / 112px).
   Şerit MUTLAK konumlu: akıştan çıktığı için hiçbir sayfanın mevcut
   düzeni kaymaz; eski yerini .pd-bc-gap aynı ölçüde dolduruyor.
   ═══════════════════════════════════════════════════════════ */
.pd-bc-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 120px 52px 16px 52px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;          /* uzun zincir sayfayı yatay kaydırmasın */
  pointer-events: none;      /* şeridin altındaki içerik tıklanabilir kalsın */
}

.pd-bc-bar .breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;   /* referans .hs-kicker-text */
  line-height: 1.6 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  pointer-events: auto;      /* linkler tıklanabilir */
}
/* Ana sayfadaki kicker cizgisinin birebir aynisi (hero-split.css .hs-kicker-line) */
.pd-bc-bar .breadcrumb::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--or);
  flex-shrink: 0;
  margin-right: 4px;   /* gap 10 + 4 = 14px  ->  metin x = 52+28+14 = 94 */
}

.pd-bc-bar .breadcrumb a {
  color: var(--or) !important;
  text-decoration: none !important;
}
.pd-bc-bar .breadcrumb span { margin: 0 !important; }

/* Breadcrumb'ın eski yerindeki boşluk — düzen kaymasın diye */
.pd-bc-gap { height: 17.6px; margin-bottom: 30px; }

@media (max-width: 1024px) {
  .pd-bc-bar { padding: 112px 26px 13px 26px; }
  .pd-bc-bar .breadcrumb {
    font-size: 9px !important;          /* referans mobil kicker */
    gap: 6px !important;
    letter-spacing: 0.2em !important;
  }
  /* cizgi 20px + 4px = 10px bosluk  ->  metin x = 26+20+10 = 56 (referansla ayni) */
  .pd-bc-bar .breadcrumb::before { width: 20px; margin-right: 4px; }

  /* Dar ekranda ara kademeler gizlenir: ANA SAYFA / <bulundugun sayfa>.
     Genis kunye (0.32em -> 0.2em) dort kademeli zinciri sigdirmiyor. */
  .pd-bc-bar .breadcrumb > *:not(:first-child):not(:nth-last-child(-n+2)) {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SAYFA BAŞLIKLARI (h1) — ana sayfadaki "HER ARAÇ / BİR İMZA"
   başlığı referans alındı (2026-09-07).
   Referans kaynağı: assets/css/hero-split.css  .hs-title
     Barlow Condensed · clamp(72px,7.8vw,130px) · 900 · lh .88 · ls -.03em
     mobil: clamp(46px,13.5vw,62px) · lh .92

   Önce dağınıktı: 40px–112px arası boyut, 600–900 arası ağırlık,
   blog yazılarında yanlış font ailesi (Barlow) ve küçük harf.
   Referansın kendisi (.hs-title) kapsam DIŞI — ana sayfa değişmez.
   ═══════════════════════════════════════════════════════════ */
h1:not(.hs-title) {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
}


/* ═══════════════════════════════════════════════════════════
   SOL-HİZALI SAYFALARDA İÇERİK SÜTUNU (2026-09-07)
   Breadcrumb şeridiyle aynı kenar: masaüstü 52px / mobil 26px.
   Önce 48px, 72px, 79px, 87px, 94px karışıktı.

   ⛔ Ortalanmış okuma sütunlu sayfalara DOKUNULMAZ (kullanıcı kararı):
      yasal sayfalar · blog yazıları · randevu · mat/ORAGUARD · SSS · İletişim
      — uzun metinde okuma genişliği korunsun diye.
   ═══════════════════════════════════════════════════════════ */
.sv-hero, .sv-section,          /* Hizmetler hub */
.service-hero,                  /* 16 hizmet sayfası (ortak sınıf) */
.blog-hero {                    /* blog hub + 10 kategori */
  padding-left: 52px !important;
  padding-right: 52px !important;
}
.cwh-headline { left: 52px !important; }   /* Çalışmalarımız (mutlak konumlu) */

@media (max-width: 1024px) {
  .sv-hero, .sv-section,
  .service-hero,
  .blog-hero {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
  .cwh-headline { left: 26px !important; }
}

/* Hakkımızda paylaşılan .section sınıfını kullanıyor (48px); sayfaya özel hizalama */
.about-page { padding-left: 52px !important; padding-right: 52px !important; }
@media (max-width: 1024px) {
  .about-page { padding-left: 26px !important; padding-right: 26px !important; }
}

/* Blog yazıları: içerik şeridin altında kalıyordu (ilk metin y=80, şerit altı 154).
   Zaten baştan beri fazla yukarıdaydı — breadcrumb'ın nav arkasında kalma sebebi buydu. */
.blog-post-section { padding-top: 132px !important; }
@media (max-width: 1024px) {
  .blog-post-section { padding-top: 124px !important; }
}


/* Mobilde ortalanmış sayfaların sütunu da breadcrumb kenarına (26px) gelsin */
@media (max-width: 1024px) {
  .mfv-wrap,
  .legal,
  .blog-post-section,
  .rnd-wrap,
  .sss-hero,
  .contact-wrap {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   HİZMETLER HUB BAŞLIĞI = ana sayfadaki "HER ARAÇ / BİR İMZA"
   ile BİREBİR (2026-09-07).
   Kaynak: hero-split.css .hs-title  (sabit px değil, aynı formüller —
   her ekran genişliğinde ana sayfayla aynı ölçeklensin diye)
     font-size: clamp(72px, 7.8vw, 130px)   → 1440px'te 112.32px
     line-height: .88                        → 98.8416px
     letter-spacing: -.03em                  → -3.3696px
     margin-bottom: clamp(20px, 3.5vh, 40px) → 900px'te 31.5px

   Dikey konum: ana sayfada H1, panel dolgusu (120) + kicker (17.6)
   + kicker alt boşluğu clamp(14px,2vh,24px) sonrası y=155.6'da başlar.
   Hub'da kicker kaldırıldığı için aynı yüksekliği .pd-bc-gap veriyor;
   onun alt boşluğu da ana sayfadaki kicker'ınkiyle eşitlendi.
   ═══════════════════════════════════════════════════════════ */
.sv-hero h1 {
  font-size: clamp(72px, 7.8vw, 130px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.03em !important;
  font-weight: 900 !important;
  margin-bottom: clamp(20px, 3.5vh, 40px) !important;
}
.sv-hero .pd-bc-gap,
.kmp-hero .pd-bc-gap { margin-bottom: clamp(14px, 2vh, 24px) !important; }

@media (max-width: 1024px) {
  .sv-hero h1,
  .kmp-hero h1 {
    font-size: clamp(46px, 13.5vw, 62px) !important;   /* referans mobil */
    line-height: 0.92 !important;
  }
  /* Ana sayfada mobilde alt metin gizli olduğu için orada margin 0;
     hub'da alt metin görünür, çarpışmasın diye 16px korundu. */
  .sv-hero .pd-bc-gap,
  .kmp-hero .pd-bc-gap { margin-bottom: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════
   ORTALANMIŞ SAYFALARDA YALNIZ BAŞLIK SOLA (2026-09-07, revize)
   Önceki denemede tüm sütun sola çekilmişti — geri alındı.
   Şimdi sayfa gövdesi ORTALANMIŞ kalıyor, sadece h1 breadcrumb
   hizasına (52px) çekiliyor.
   calc(50% - 50vw + 52px): kapsayıcı ne kadar ortalanmış olursa olsun
   başlığın sol kenarını ekranın 52px'ine sabitler.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  /* NOT: --sb gibi ozel degiskenle kaydirma cubugu telafisi ISE YARAMAZ —
     ozel degiskenler token olarak yerine konur, icindeki 100% yeni
     kapsayiciya gore yeniden cozulur ve formul kendini sifirlar (olculdu).
     Site kendi kaydirma cubugunu 4px'e sabitlediginden (::-webkit-scrollbar)
     telafi sabit: 50vw fazladan 2px sayiyor -> +2px. */

  /* (A) Ortalanmis BLOK kapsayicilar */
  /* NOT: blog IC sayfalari bilerek DISARIDA — kullanici karari:
     yazi basliklari kendi ortalanmis sutununda kalsin. */
  /* .legal > h1 BU LISTEDEN CIKARILDI (kullanici karari):
     baslik 296px sola cekiliyordu (1440px'te h1=54, govde metni=350)
     -> baslik kendi metin sutunundan kopuk duruyordu. Artik hukuki
     sayfalarda h1 govdeyle ayni hizada. Etkilenen 10 sayfa: TR+EN
     gizlilik / cerez-politikasi / mesafeli-satis-sozlesmesi /
     teslimat-ve-iade / on-bilgilendirme-formu. */
  /* 2026-09-10: .rnd-head h1 BU LISTEDEN CIKARILDI (kullanici karari).
     Randevu basligi 250px sola cekiliyordu (1440px'te h1=54, aciklama /
     adimlar / form = 304) -> baslik kendi ortalanmis sutunundan kopuk
     duruyordu. Hukuki sayfalardaki duzeltmeyle ayni; artik sutunla hizali.
     .mfv-hero h1 (mat/oraguard sayfalari) dokunulmadan kaldi. */
  .mfv-hero h1 {
    margin-left: calc(50% - 50vw + 54px) !important;   /* 52 + 2 telafi */
  }

  /* (B) IZGARA sayfalari — baslik ortalanmis blogun degil, izgara
     sutununun icinde; 50% yanlis kutuya cozulurdu. Kapsayicinin
     geometrisinden turetilmis sabitle hesaplaniyor. */
  /* Eski hali tek bir ekran genisligine gore sabitlenmisti (645/646/663,55
     - 50vw); 1522px'te tam 52'ye oturuyor ama daha dar masaustunde saga
     kayiyordu (1034px'te 175,8). Kapsayicinin gercek geometrisiyle yazildi:
     sutunun sol kenari = 48px dolgu + kabin otomatik ortalama payi, yani
     48 + max(0, (govde - K) / 2). Cekme = 52 - o deger. K = kabin kendi
     genisligi (SSS TR 1278 . SSS EN 1315,1 . Iletisim 1280); 100vw kaydirma
     cubugunu (3,6px) icerdigi icin K'ya eklendi. Dar ekranda ortalama payi
     0 oldugundan formul kendini iptal edip +4px'e (48 -> 52) duser. */
  /* 2026-09-10: cekme h1'den TUM KOPYA BLOGUNA tasindi. Eskiden yalniz
     h1 sola geliyordu (1440px'te 54), .sss-lead ve .sss-hero-actions
     kapsayicida kaliyordu (129) -> baslik solda, metin+butonlar 75px
     sagda asili duruyordu. Kapsayiciya uygulanınca ucu birden ayni
     hizada hareket ediyor. Formul aynen korundu. */
  /* 2026-09-10: cekme artik h1 + .sss-lead + .sss-hero-actions UCUNE
     birden uygulaniyor. Eskiden yalniz h1 sola geliyordu (1440px'te 54),
     metin ve butonlar kapsayicida kaliyordu (129) -> 75px asili duruyordu.
     NOT: cekmeyi KAPSAYICIYA vermek ise yaramaz — .sss-hero-copy bir
     izgara ogesi; negatif marj sutun genisligini de degistirip asagidaki
     sabitlerin kalibrasyonunu bozuyor (olculdu: TR 1440px'te 52 yerine 91).
     Kardeslere vermek kapsayici geometrisine dokunmadigi icin sabitler
     aynen gecerli kaliyor. */
  /* 2026-09-10: .sss-hero-copy h1 + .sss-lead + .sss-hero-actions icin
     yazilmis 3 hiza hack'i KALDIRILDI. Hero artik sss-luxury-68701759ba3a.css icinde
     sayfa cizgisine (52px) aciliyor -> ucu de dogal olarak 52'de basliyor,
     zorlamaya gerek kalmadi. */
  /* 2026-09-10: .contact-luxury-copy h1 hiza hack'i KALDIRILDI.
     Hero artik contact-modern-1eb819460522.css icinde sayfa cizgisine (52px)
     aciliyor -> baslik, metin, butonlar ve sinyaller dogal olarak
     ayni hizada basliyor. */
}

/* ═══════════════════════════════════════════════════════════
   REFERANS BAŞLIK KÜNYESİ — SOL-HİZALI TÜM SAYFALAR (2026-09-07)
   Kaynak: hero-split.css .hs-title ("HER ARAÇ / BİR İMZA")
   Sabit px değil, ana sayfanın kendi formülleri — her ekran
   genişliğinde birlikte ölçeklensinler diye.

   ⛔ KAPSAM DIŞI (kullanıcı kararı):
      mat/ORAGUARD · blog iç sayfaları · Randevu · yasal
      → onların başlık boyutları kendi hâlinde kalır.
   ➕ SSS ve İletişim 8 Eyl'de kapsama ALINDI (kullanıcı: "birebir Her Araç
      referansı ile git") — önceden 86px / 74px kendi ölçüleriyle duruyorlardı.
   ═══════════════════════════════════════════════════════════ */
.sv-hero h1,              /* Hizmetler hub */
.service-hero h1,         /* 16 hizmet sayfası */
.blog-hero h1,            /* blog hub + 10 kategori */
.about-hero-copy h1,      /* Hakkımızda */
.sss-hero-copy h1,        /* SSS */
.contact-luxury-copy h1,  /* İletişim */
.cwh-headline,            /* Çalışmalarımız — başlığın tamamı */
.kmp-hero h1 {            /* Kampanyalar (2026-09-10) */
  font-family: var(--font-head) !important;
  font-size: clamp(72px, 7.8vw, 130px) !important;
  font-weight: 900 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  margin-bottom: clamp(20px, 3.5vh, 40px) !important;
}


@media (max-width: 1024px) {
  .sv-hero h1,
  .service-hero h1,
  .blog-hero h1,
  .about-hero-copy h1,
  .sss-hero-copy h1,
  .contact-luxury-copy h1,
  .cwh-headline,
  .kmp-hero h1 {
    font-size: clamp(46px, 13.5vw, 62px) !important;   /* referans mobil */
    line-height: 0.92 !important;
  }
}



/* ═══════════════════════════════════════════════════════════
   ÇALIŞMALARIMIZ — başlığın DİKEY konumu (2026-09-07)
   Başlık mutlak konumlu ve dikey ortalanmıştı, bu yüzden diğer
   sayfalardan ~75px aşağıda kalıyordu (kullanıcı ekran görüntüleri).
   Ana sayfadaki dizilimin aynısına bağlandı:
     panel dolgusu 120px + kicker yüksekliği 17,6px
     + kicker alt boşluğu clamp(14px, 2vh, 24px)
     = 900px yükseklikte y 155,6  (ana sayfa .hs-title ile aynı)
   ═══════════════════════════════════════════════════════════ */
.cwh-headline {
  /* Satır yüksekliği 0.88 -> 1 büyütülünce fazladan boşluğun YARISI üste de
     eklenip ilk satırı aşağı itiyordu (137,2 -> 144,4 ölçüldü). O yarı burada
     geri alınır: STÜDYOMUZDA referans yerinde kalır, açılma yalnız aşağı gider.
     Pay = (yeni satirYuk - referans satirYuk) / 2 kati: masaustu (1,08-0,88)/2 = 0,10 · mobil (1,08-0,92)/2 = 0,08 */
  top: calc(137.6px + clamp(14px, 2vh, 24px) - clamp(72px, 7.8vw, 130px) * 0.1) !important;
  bottom: auto !important;
  transform: none !important;
}

/* Çalışmalarımız: "PEAK" (112px) + "STÜDYOSUNDA" (66px) aynı satırda dursun.
   Eski max-width 518,4px iki kelimeyi sığdırmıyordu (TR ~587px, EN ~681px
   gerekiyor; ls -0,03em bir miktar daraltıyor). */
.cwh-headline { max-width: 720px !important; }

/* Çalışmalarımız başlığı: satır arası biraz açıldı (kullanıcı isteği).
   Referans .hs-title 0.88'de kalır — bu yalnız bu başlığa özeldir. */
.cwh-headline { line-height: 1.08 !important; }

/* MOBIL: yukaridaki telafi masaustu punto formulunu (clamp 72-130) kullaniyor;
   mobilde gercek punto clamp(46px,13.5vw,62px) oldugu icin ayri hesaplanir.
   Dikey baslangic da mobil referansa gore: panel 112 + kicker 14,4 + bosluk 11. */
@media (max-width: 1024px) {
  .cwh-headline {
    line-height: 1.08 !important;
    top: calc(126.4px + 11px - clamp(46px, 13.5vw, 62px) * 0.08) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HİZMET ALT SAYFALARI — başlığın dikey konumu (2026-09-07)
   Referans: ana sayfa "HER ARAÇ" → h1 üstü 155,6px (900px yükseklikte).
   Yapı her sayfada aynı: .pd-bc-gap (17,6 + 30 boşluk) → h1,
   yani h1 hep hero içeriğinin 47,6px altında başlıyor.
   Sapmanın tek kaynağı hero'ların kendi padding-top'ları:
   ppf 104 · boya 106 · cam/seramik/iç 122 · maslak 140 (+iç kayma).
   Ortak değere çekildi. Referans dikey formülü 137,6 + clamp(14px,2vh,24px)
   olduğu için sabit px DEĞİL aynı formül kullanılır (pencere yüksekliğiyle
   birlikte ölçeklensin): 137,6 + clamp(...) - 47,6 = 90 + clamp(...).
   ═══════════════════════════════════════════════════════════ */
.service-hero { padding-top: calc(90px + clamp(14px, 2vh, 24px)) !important; }

/* Maslak hero'ları alta yaslıydı (align-items: flex-end); bu yüzden başlığın
   yeri içerik yüksekliğine göre kayıyor, padding-top hiç etkilemiyordu
   (cam-filmi/maslak ve seramik-kaplama/maslak referanstan 91px aşağıdaydı).
   Üste yaslandı ki yukarıdaki ortak padding-top geçerli olsun. */
.mas-hero { align-items: flex-start !important; }

/* PPF sayfasında hero kopyasına elle eklenmiş translateY(8.7px) vardı; bu
   reveal animasyonunun bitiş durumunu (transform:none) da eziyor ve başlığı
   referanstan 8,7px aşağıda bırakıyordu. Nötrlendi.
   h1 için ".visible" hedeflenir ki kayarak giriş animasyonu korunsun;
   diğer ikisinde reveal sınıfı yok, doğrudan nötrlenir. */
.ppf-hero-copy .sec-h2.visible,
.ppf-hero-copy .service-lead,
.ppf-hero-copy .peak-zones { transform: none !important; }

/* ═══════════════════════════════════════════════════════════
   HİZMET SAYFASI BAŞLIKLARI — geniş ekranda satır kırılması
   Hero kopyası 780px'de sınırlı ama başlık 7,8vw ile büyüyor:
   ~1330px üstünde başlık kabı aşıp 2-3 satıra düşüyordu
   (Seramik Kaplama · Boya Düzeltme & Koruma · Detaylı İç Temizlik ·
    Interior Detailing · Paint Correction & Protection).
   Başlık iki satıra düşünce altındaki her şey (bölge satırı dahil) 77px
   kayıyordu; kural masaüstü bandinin tamamında (>=1025px) çalışır.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .service-hero h1 {
    white-space: nowrap;
    max-width: none;
  }
}

/* Tek istisna: EN "Paint Correction & Protection" 11,85em genişliğinde ve
   52px ızgarasına tek satır olarak ancak ~1376px üstünde sığıyor. Altındaki
   bantta harf arası 0,03em’den 0,05em’e sıkılaşır (ölçüm: 1025px’te 901px /
   921px, 1370px’te 1204px / 1266px). Böylece başlık punto ve konumunu
   koruyup tek satırda kalır; altındaki bölge satırı diğer sayfalarla aynı
   yükseklikte durur (aksi halde 77px aşağı kayardı). */
@media (min-width: 1025px) and (max-width: 1375px) {
  html[lang="en"] .boya-hero h1 { letter-spacing: -0.05em !important; }
}

/* ═══════════════════════════════════════════════════════════
   HİZMET SAYFASI HERO ALT ŞERİDİ — 52px ızgarasına hizalama
   "Bilgi ve Randevu Al" + Google değerlendirme yazısı, eski sütun
   değerini (clamp 24-80px) kullandığı için başlıktan 24px sağdaydı.
   Sağdaki istatistik bloğu da simetri için aynı kenara çekildi.
   İki farklı desen var:
     · PPF     → konum kapsayıcıda (.ppf-hero-bottom)
     · diğer 4 → konum çocuklarda (.*-hero-actions / .*-hero-stats)
   Mobilde bu bloklar zaten static akışa geçiyor, kural masaüstüne özel.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .ppf-hero-bottom { left: 52px !important; right: 52px !important; }

  .cam-hero-actions,
  .seramik-hero-actions,
  .boya-hero-actions,
  .ic-hero-actions { left: 52px !important; }

  .cam-hero-stats,
  .seramik-hero-stats,
  .boya-hero-stats,
  .ic-hero-stats { right: 52px !important; }
}

/* ═══════════════════════════════════════════════════════════
   HİZMET HERO'SU — PPF sayfası referans alınarak eşitlendi
   Hiza (x=52) ve başlık künyesi zaten aynıydı; farklar şunlardı:
     alt metin genişliği : PPF 550 · cam/seramik/iç 580 · boya 700
     alt metin üst boşluk: PPF 16  · boya 14
     bölge satırı üst bşl: PPF 18  · boya 12
   Hepsi PPF değerlerine çekildi ki satır uzunluğu ve dikey ritim
   sayfadan sayfaya değişmesin.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .service-hero .service-lead {
    max-width: 550px !important;
    margin-top: 16px !important;
  }
  .service-hero .peak-zones { margin-top: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════
   HERO ALT BLOĞU — dikey konum da PPF'e eşitlendi (2026-09-08)

   1) Buton + Google yazısı
      PPF: bottom 48px + translateY(0,5cm) → etkin 29,1px
      Cam/İç: 48px · Boya: 34px, kaydırma yok
      → dördü de PPF'in etkin değerine çekildi (48px - 0,5cm).

   2) "Hizmet bölgesi · … " satırı
      Alt metnin satır sayısına göre kayıyordu (PPF 7 · cam 6 · boya/iç 5;
      satır yüksekliği 24,3px → sayfa başına 24,3px sapma).
      Alt metne PPF'in yüksekliği (7 × 24,3 = 170,1px) taban olarak verildi;
      metin kısa olsa da bölge satırı hep aynı yere düşer.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .cam-hero-actions,
  .seramik-hero-actions,
  .boya-hero-actions,
  .ic-hero-actions {
    bottom: calc(48px - 0.5cm) !important;
  }

  .service-hero .service-lead {
    min-height: calc(24.3px * 7) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HAKKIMIZDA BAŞLIĞI — 52px ızgarasına çekildi (2026-09-08)
   Sayfadaki her şey tek bir ".section.about-page" içinde; bu blok
   "max-width:1440px; margin:0 auto" ile ortalandığı için 1444px üstü
   ekranlarda başlık, üstündeki breadcrumb'tan (x=52) ve sitedeki
   diğer tüm başlıklardan (x=52) otomatik kenar boşluğu kadar sağda
   kalıyordu (1522px'te 39,2px).
   Yalnız başlık kabı geri çekilir; metin + görsel bloğu eskisi gibi
   ortalanmış kalır. Formül kendini iptal eder: 1440px kapağının
   altında sonuç 0'dır (50% = gövde/2 - 52 olur). +54px = 52px ızgara
   + 2px kaydırma çubuğu payı (100vw çubuğu içerir, 100% içermez).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .about-split { margin-left: calc(50% - 50vw + 54px) !important; }
}

/* ══════════════════════════════════════════════════════════
   HAKKIMIZDA — görsel başlık hizasından başlar (2026-09-08)
   Eskiden başlık tek başına, altında "metin kutusu + görsel" 2 sütunlu bir
   satır vardı; görsel başlığın ~280px altında başlıyor, başlığın sağındaki
   alan boş kalıyordu. HTML'de sayfa iki sütuna bölündü:
     .about-split → .about-col (başlık + metin kutusu) | figure.about-visual
   Görselin üstü başlığın üstüyle aynı y'ye gelsin diye breadcrumb payı kadar
   (pd-bc-gap 17,6 + 30 = 47,6px) aşağı alınır.
   Sola çekme artık .about-hero-copy'de değil .about-split'te: böylece hem
   başlık hem metin kutusu 52px ızgarasından başlar (metin kutusu genişler),
   satırın sağ kenarı ise eskisi gibi kabin içinde kalır.
   ══════════════════════════════════════════════════════════ */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 28px;
  align-items: start;
}
.about-content { display: block !important; }   /* artık tek çocuk taşıyor */

@media (min-width: 1025px) {
  .about-visual {
    margin-top: 47.6px;
    /* Görselin yüksekliği peak-style'da min-height:100% ile satırın (yani sol
       sütunun) yüksekliğine bağlı; üstten 47,6px aşağı alındığı için altı metin
       kutusundan tam 47,6px aşağıda bitiyordu. Aynı pay düşülünce iki bloğun
       alt kenarı her ekran genişliğinde çakışır. */
    height: calc(100% - 47.6px) !important;
    /* min-height sıfırlanıyor: sayfanın kendi stilindeki
       height: clamp(520px, 58vw, 720px) taban değeri, metin kutusu kısalınca
       sütundan yüksek kalıp alt hizayı tekrar bozuyordu. */
    min-height: 0 !important;
  }
}

@media (max-width: 1024px) {
  .about-split { grid-template-columns: 1fr; gap: 18px; }
}

/* HAKKIMIZDA — başlığın dikey konumu da referansa çekildi (2026-09-08)
   Yapı hizmet sayfalarıyla birebir aynı: .pd-bc-gap (17,6 + 30 boşluk) → h1,
   yani h1 hep bölümün 47,6px altında. Tek fark bölümün padding-top'uydu:
   about 150px → h1 197,6px'te, referans (ana sayfa "HER ARAÇ" / PPF) 152,48px.
   .service-hero ile aynı formül kullanılır ki pencere yüksekliğiyle birlikte
   ölçeklensin: 137,6 + clamp(14px,2vh,24px) - 47,6 = 90 + clamp(...). */
.about-page { padding-top: calc(90px + clamp(14px, 2vh, 24px)) !important; }

/* BLOG ANA SAYFASI (/blog/ + /en/blog/) — başlığın dikey konumu (2026-09-08)
   .blog-hero'yu 12 sayfa paylaşıyor: blog ana sayfası + 5 kategori sayfası
   (TR ve EN). Kullanıcı isteği: yalnız ana sayfa hizalansın, alt sayfalara
   dokunulmasın. Bu yüzden kural ortak .blog-hero'ya DEĞİL, yalnız ana
   sayfanın işaretlendiği .blog-hero-hub'a yazılır.
   Formül .service-hero / .about-page ile aynı: 90 + clamp(14px,2vh,24px)
   → başlık 152,48px'te, ana sayfa "HER ARAÇ" ile birebir. */
.blog-hero-hub { padding-top: calc(90px + clamp(14px, 2vh, 24px)) !important; }

/* SSS + İLETİŞİM — başlığın dikey konumu referansa çekildi (2026-09-08)
   Her ikisinde de yapı aynı: .pd-bc-gap (17,6 + 30 boşluk) → h1.
   Fark, bölümün padding-top'u (SSS 132 · İletişim 142 + kopyanın 18px'i) ve
   İletişim'de kopyanın dikeyde ortalanmasıydı — bu yüzden başlığın yeri
   metnin uzunluğuna göre de kayıyordu (TR 224,7 · EN 219,1).
   Ortalama kaldırılıp iki sayfa da referans formülüne bağlandı:
     SSS      → 90 + clamp(...)          (+47,6 = 137,6 + clamp)
     İletişim → 72 + clamp(...) + 18px   (+47,6 = 137,6 + clamp)
   Sonuç: h1 üstü 152,48px — ana sayfa "HER ARAÇ" ile birebir.
   Yatay hiza (x=52) zaten ayarlıydı, dokunulmadı. Kural masaüstüne özel;
   mobil düzenler kendi ölçülerinde bırakıldı. */
@media (min-width: 1025px) {
  .sss-hero { padding-top: calc(90px + clamp(14px, 2vh, 24px)) !important; }
  .contact-wrap--top { padding-top: calc(72px + clamp(14px, 2vh, 24px)) !important; }
  .contact-luxury-copy { justify-content: flex-start !important; }
}

/* Metin kutusunun İÇİNDEKİ paragraflar da başlık hizasına (2026-09-08)
   Kutunun kendisi 52px'te ama iç dolgusu (42px) + kenarlığı (0,8px)
   yüzünden metin 94,8px'ten başlıyordu — başlıktan 42,8px içeride.
   Soldaki dolgu ve kenarlık kaldırıldı: paragraf tam 52px'ten başlıyor,
   sağdaki 42px dolgu korunuyor (metin görselin kenarına yapışmasın).
   Mobilde kutu dar olduğu için 28px dolgu olduğu gibi bırakıldı. */
@media (min-width: 1025px) {
  .about-single {
    /* Kutu 26px sola taşar, iç dolgu aynı 26px → paragraf yine tam 52px'te,
       ama metin artık kutunun kenarına yapışmıyor. Sağ kenar değişmez. */
    margin-left: -26px !important;
    padding-left: 26px !important;
    /* Metin yarım satır yukarı: üst dolgu 38px → 38 - 29,25/2 (paragraf satır
       yüksekliği 29,25px). Önce tam satır alınmıştı, yarım satır geri verildi.
       Kutu kısaltılınca altı da yukarı geliyor; görselin yüksekliği sütuna
       bağlı olduğu için alt hiza kendiliğinden korunuyor. */
    padding-top: calc(38px - 29.25px / 2) !important;
    /* Sol kenarlık kapalı: 1px kenarlık tarayıcı yakınlaştırmasına göre
       0,8-1px olarak çözülüp metni başlıktan 1px kaydırıyordu. */
    border-left: 0 !important;
  }
  /* Kutu yukarı alındı: başlık altı boşluğu 54 → 28px */
  .about-content { margin-top: 28px !important; }
}

/* ÇALIŞMALARIMIZ — hero ile galeri başlığı arasındaki boşluk (2026-09-08)
   .gal padding-block: clamp(72px, 10vw, 130px) → geniş ekranda üstte 130px,
   hero'nun alt kenarı ile "ÇALIŞMALARIMIZ" künyesi arası 139px boşluk
   kalıyordu (kullanıcı ekran görüntüsü). Üst dolgu, kuralın kendi alt
   sınırı olan 72px'e çekildi → görünen boşluk ~80px. Alt dolgu (130px)
   ve mobil değerler olduğu gibi bırakıldı. */
@media (min-width: 1025px) {
  .gal { padding-top: 72px !important; }
}

/* HİZMETLER — giriş metni ile ilk hizmet görseli arasındaki boşluk (2026-09-09)
   Ara 128,8px'ti: hero'nun alt dolgusu 72 + ayraç çizgisi 0,8 + ilk bölümün
   üst dolgusu 56. Çizgi siyah boşluğun ortasında tek başına kalıyordu.
   İki taraf da 28px'e eşitlendi → toplam ~57px, çizginin iki yanında eşit
   hava kalır. Yalnız İLK bölüm hedeflenir (.sv-divider + .sv-section);
   bölümler arası ritim (clamp 56-96px) aynen korunur.
   Mobilde ayraç zaten gizli ve bölümler karta dönüşüyor → kural masaüstüne özel. */
@media (min-width: 1025px) {
  .sv-hero { padding-bottom: 28px !important; }
  .sv-divider + .sv-section { padding-top: 28px !important; }
}