/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/31-hizmet-karma/section.css
 *
 * Her bildirime `!important` eklendi. Sebep:
 * florax teması `.post-entry h2 { font-size: 36px !important }` gibi
 * kurallar taşıyor ve `!important` özgüllüğü dinlemiyor. Ayrıntı:
 * scripts/gs-important.mjs başlığı ve assets/base.css.
 */
/* ─── 31-hizmet-karma · HİZMET — KARMA (28 · 29 · 30) ──────────────────────────
 *
 * Taban `28-hizmet-a-karakalem/section.css`in kopyası (K-471); Kapsam çizelgesi
 * 29'un dilinden (`29-hizmet-b-pafta/section.css` 336–440, aks ızgarasız),
 * Örnek iş yerleşimi 30'dan (`30-hizmet-c-kesit/section.css` 555–580 · 766–781 ·
 * 839–858). Section.tsx başındaki nota bak.
 *
 * 🔒 `!important` yok · çıplak hex yok · punto yalnız `--gs-fs-1…7` · boşluk
 * yalnız `--gs-bo-1…6` + `--gs-ritim` · metin ızgarası `minmax(0, 1fr)` ·
 * koyu zeminde `:focus-visible` ezilir (Ö-113) · `<a>` kendi kutusunu bildirir
 * (Ö-118).
 *
 * 🔴 `motion.ts`in yazdığı özellikler bu öğelerde TANIMLANMAZ (Ö-023) → JS'siz
 * ve reduced-motion'da her şey SON HÂLİNDE:
 *   · eskiz + ayraç detay yolları   `stroke-dasharray` · `stroke-dashoffset`
 *   · ayraç hattı · kalem izi svg'si · kare img/video   `clip-path`
 *   · anlatı figürü img (foto ve çizim)   `clip-path` (K-480)
 *   · Kapsam `li` · metin blokları [data-hm-metin]   `opacity` · `visibility` · `transform`
 *   · ölçü zinciri `.hm-olcu-hat` · `.hm-olcu-deger`   `clip-path` (sayılan değerde `opacity`)
 *   (hover `transform`/`translate` yalnız ok ve düğmede — animasyonlu değiller)
 *
 * Tema: kalem mürekkebi zeminin IŞIK KANALIDIR (`--gs-koyu-isik-rgb`) — koyu
 * temada tebeşir, açık temada grafit; `--hm-*` `--gs-koyu-*`dan okur, tema
 * onları çevirir. Fotoğrafın ÜSTÜNDEKİ tek metin ("Görselleştirme" etiketi)
 * OPAK zemin taşır → kontrast pikselden değil paletten hesaplanır:
 *   koyu  `--gs-koyu-metin` #E6E9EA / `--gs-koyu-zemin` #1B1E20  13.73:1
 *   açık  `--gs-koyu-metin` #1C2023 / `--gs-koyu-zemin` #F3F0E8  14.40:1
 * Çizgiler dekoratiftir (DESIGN.md §3 "Dekoratif çizgi ne zaman muaf").
 */

.gs-31-hizmet-karma {
    --hm-zemin: var(--gs-koyu-zemin);
    --hm-yuzey: var(--gs-koyu-yuzey);
    --hm-metin: var(--gs-koyu-metin);
    --hm-ikincil: var(--gs-koyu-ikincil);
    --hm-silik: var(--gs-koyu-silik);
    --hm-hat-rengi: var(--gs-koyu-hat);
    --hm-eylem: var(--gs-primary);
    --hm-eylem-metin: var(--gs-koyu-eylem-metin);

    /* Dört kalem baskısı — aynı mürekkep, dört yoğunluk (DESIGN ㉑). */
    --hm-kalem: rgb(var(--gs-koyu-isik-rgb) / 0.7);
    --hm-kalem-ikinci: rgb(var(--gs-koyu-isik-rgb) / 0.34);
    --hm-kalem-yapim: rgb(var(--gs-koyu-isik-rgb) / 0.17);
    --hm-kalem-golge: rgb(var(--gs-koyu-isik-rgb) / 0.3);

    --hm-aralik: 0.14em;
    --hm-sinir: min(92vw, 74rem);

    background: var(--hm-zemin) !important;
    color: var(--hm-ikincil) !important;
}

/* Galvaniz taraması — sitenin zemini, `15-hizmet`le aynı. Dekoratif. */
.gs-31-hizmet-karma .hm {
    background-image: repeating-linear-gradient(
        135deg,
        rgb(var(--gs-koyu-isik-rgb) / 0.016) 0,
        rgb(var(--gs-koyu-isik-rgb) / 0.016) 1px,
        transparent 1px,
        transparent 7px
    ) !important;
}

.gs-31-hizmet-karma .hm-sinir {
    width: var(--hm-sinir) !important;
    margin-inline: auto !important;
}

/* ── KALEM — bütün eskizlerin ortak çizgisi ──────────────────────────────── */

.gs-31-hizmet-karma .hm svg {
    display: block !important;
    overflow: visible !important;
}

.gs-31-hizmet-karma .hm path {
    fill: none !important;
    stroke: var(--hm-kalem) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.gs-31-hizmet-karma .hm .hm-hat {
    stroke-width: 1.9 !important;
}

.gs-31-hizmet-karma .hm .hm-ikinci {
    stroke: var(--hm-kalem-ikinci) !important;
    stroke-width: 1.2 !important;
}

.gs-31-hizmet-karma .hm .hm-yapim {
    stroke: var(--hm-kalem-yapim) !important;
    stroke-width: 1 !important;
}

.gs-31-hizmet-karma .hm .hm-golge {
    stroke: var(--hm-kalem-golge) !important;
    stroke-width: 1.1 !important;
}

/* Boyu esneyen çizgiler (ayraç, kalem izi) ölçeklenince kalınlaşmasın (㉒). */
.gs-31-hizmet-karma .hm-ayrac-hat path,
.gs-31-hizmet-karma .hm-iz path {
    vector-effect: non-scaling-stroke !important;
}

/* ── METİN KATMANLARI — §5 ④ ─────────────────────────────────────────────── */

.gs-31-hizmet-karma .hm-etiket {
    margin: 0 0 var(--gs-bo-3) !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: var(--hm-aralik) !important;
    text-transform: uppercase !important;
    color: var(--hm-silik) !important;
}

.gs-31-hizmet-karma .hm-h2 {
    margin: 0 0 var(--gs-bo-5) !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.012em !important;
    text-wrap: balance !important;
    color: var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-govde {
    margin: 0 !important;
    max-width: 62ch !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.65 !important;
    color: var(--hm-ikincil) !important;
}

/* ── 1 · AÇILIŞ — §5 ⑫ + ㉑ büyük eskiz ──────────────────────────────────── */

.gs-31-hizmet-karma .hm-acilis {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--gs-bo-5) !important;
    padding-block: var(--gs-ritim) var(--gs-bo-4) !important;
}

.gs-31-hizmet-karma .hm-baslik {
    margin: 0 0 var(--gs-bo-4) !important;
    font-size: var(--gs-fs-7) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.028em !important;
    text-wrap: balance !important;
    color: var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-ozet {
    margin: 0 !important;
    max-width: 46ch !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.65 !important;
    color: var(--hm-ikincil) !important;
}

/* Metin içi bağ (`bagla()` → `a.hz-bag`, K-392): satır içinde kalır, punto ve
   ağırlığı metinden alır; hover'da renk değil ÇİZGİ açılır (§5 ⑥). */
.gs-31-hizmet-karma .hm-ozet .hz-bag,
.gs-31-hizmet-karma .hm-giris .hz-bag,
.gs-31-hizmet-karma .hm-blok-baslik .hz-bag,
.gs-31-hizmet-karma .hm-blok-metin .hz-bag {
    color: var(--hm-metin) !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--hm-silik) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.2em !important;
}

.gs-31-hizmet-karma .hm-ozet .hz-bag:hover,
.gs-31-hizmet-karma .hm-giris .hz-bag:hover,
.gs-31-hizmet-karma .hm-blok-baslik .hz-bag:hover,
.gs-31-hizmet-karma .hm-blok-metin .hz-bag:hover {
    text-decoration-color: var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-hangar {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 800 / 520 !important;
}

/* Eskizler 0/1 yineleyicidir (F13.1 Paket 2): sağlayıcı yalnız sayfanın konusuna kayıt
   verir → DOM'da tek svg. Her yineleyicinin sarmalayıcısı yerleşimde YOK sayılır
   (`display: contents`): svg eskisi gibi `.hm-acilis` ızgarasının doğrudan öğesidir. */
.gs-31-hizmet-karma .hm-eskiz-yuva {
    display: contents !important;
}

/* SAVUNMA (K-474 kuralı korunur): yalnız SAYFANIN konusu görünür — konu kökteki
   `data-hm-konu`dadır (`{{@hizmet.eskiz}}`). Bilinen altı konudan hiçbiri değilse —
   Çelik, boş, bilinmeyen ya da çözülmemiş yer tutucu — Çelik'in hangarı görünür
   (Çelik'in kendi konusu da bu `:not` zincirine düşer, ayrı seçici gerekmez).
   Sağlayıcı yanlış/fazla kayıt verse de en çok TAM BİR eskiz görünür. JS gerekmez. */
.gs-31-hizmet-karma .hm-hangar[data-hm-eskiz] {
    display: none !important;
}

.gs-31-hizmet-karma .hm[data-hm-konu="hafif-celik"] .hm-hangar[data-hm-eskiz="hafif-celik"],
.gs-31-hizmet-karma .hm[data-hm-konu="beton-prefabik"] .hm-hangar[data-hm-eskiz="beton-prefabik"],
.gs-31-hizmet-karma .hm[data-hm-konu="fabrika-insaatlari"] .hm-hangar[data-hm-eskiz="fabrika-insaatlari"],
.gs-31-hizmet-karma .hm[data-hm-konu="yapi-muteahhitlik"] .hm-hangar[data-hm-eskiz="yapi-muteahhitlik"],
.gs-31-hizmet-karma .hm[data-hm-konu="enerji-sistemler"] .hm-hangar[data-hm-eskiz="enerji-sistemler"],
.gs-31-hizmet-karma .hm[data-hm-konu="havalandirma-sistemleri"] .hm-hangar[data-hm-eskiz="havalandirma-sistemleri"],
.gs-31-hizmet-karma .hm:not([data-hm-konu="hafif-celik"]):not([data-hm-konu="beton-prefabik"]):not([data-hm-konu="fabrika-insaatlari"]):not([data-hm-konu="yapi-muteahhitlik"]):not([data-hm-konu="enerji-sistemler"]):not([data-hm-konu="havalandirma-sistemleri"]) .hm-hangar[data-hm-eskiz="celik-konstruksiyon"] {
    display: block !important;
}

/* Dar ekranda eskiz ~0.45 ölçekte basılır; kalem bir tık bastırır. */
.gs-31-hizmet-karma .hm-hangar .hm-hat {
    stroke-width: 2.6 !important;
}

/* ── AYRAÇ — ㉒ detay eskizi + kalem çizgisi ──────────────────────────────── */

.gs-31-hizmet-karma .hm-ayrac {
    display: flex !important;
    align-items: flex-end !important;
    gap: var(--gs-bo-3) !important;
}

.gs-31-hizmet-karma .hm-ayrac-detay {
    flex: none !important;
    width: 6.5rem !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
}

/* Çizgi detayın tabanına oturur: detay viewBox'ında taban y≈62/80. */
.gs-31-hizmet-karma .hm-ayrac-hat {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 0.75rem !important;
    margin-block-end: 0.55rem !important;
}

/* ── 2 · KAPSAM — 29'un cetvelli çizelgesi (aks ızgarası yok) ───────────── */

.gs-31-hizmet-karma .hm-kapsam {
    padding-block: var(--gs-bo-6) var(--gs-ritim) !important;
}

.gs-31-hizmet-karma .hm-kapsam-liste {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 1px solid var(--hm-silik) !important;
    background: var(--hm-zemin) !important;
}

.gs-31-hizmet-karma .hm-kapsam-oge {
    margin: 0 !important;
    padding: 0 !important;
}

.gs-31-hizmet-karma .hm-kapsam-oge + .hm-kapsam-oge {
    border-block-start: 1px solid var(--hm-hat-rengi) !important;
}

/* Satır: numara hücresi · ad · ok hücresi. `position: relative` → adın içindeki
   bağın `::after`i satırın tamamını kaplar (gerilmiş bağ). */
.gs-31-hizmet-karma .hm-kapsam-satir {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 3rem minmax(0, 1fr) 2.75rem !important;
    align-items: stretch !important;
    min-height: var(--gs-hedef) !important;
    color: var(--hm-metin) !important;
    transition: background-color 0.35s ease !important;
}

.gs-31-hizmet-karma .hm-kapsam-no,
.gs-31-hizmet-karma .hm-kapsam-uc {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gs-31-hizmet-karma .hm-kapsam-no {
    border-inline-end: 1px solid var(--hm-hat-rengi) !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    letter-spacing: var(--hm-aralik) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--hm-silik) !important;
}

.gs-31-hizmet-karma .hm-kapsam-uc {
    border-inline-start: 1px solid var(--hm-hat-rengi) !important;
}

.gs-31-hizmet-karma .hm-kapsam-ad {
    align-self: center !important;
    padding: var(--gs-bo-4) !important;
    font-size: var(--gs-fs-5) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Bağ satır içinde kalır; alt çizgi hover/odakta belirir (§5 ⑥). */
.gs-31-hizmet-karma .hm-kapsam-ad .hz-bag {
    color: inherit !important;
    text-decoration-line: underline !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0.3em !important;
    transition: text-decoration-color 0.35s ease !important;
}

/* Gerilmiş bağ: dokunma hedefi satırın tamamı (≥ --gs-hedef). */
.gs-31-hizmet-karma .hm-kapsam-ad .hz-bag::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
}

/* Bağsız satır bir tık geri çekilir: tıklanmadığı okunur. */
.gs-31-hizmet-karma .hm-kapsam-satir:not(:has(.hz-bag)) .hm-kapsam-ad {
    font-weight: 600 !important;
    color: var(--hm-ikincil) !important;
}

/* Ok yalnız bağı olan satırda; bağsız satırın ok hücresi boş durur.
   Özgüllük (0,3,0): `.hm svg { display: block }` (0,2,1) ezmesin. */
.gs-31-hizmet-karma .hm-kapsam-satir .hm-ok {
    display: none !important;
    width: 1.5rem !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    transition: translate 0.18s ease !important;
}

.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag) .hm-ok {
    display: block !important;
}

.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:hover),
.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:focus-visible) {
    background-color: var(--hm-yuzey) !important;
}

.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:hover) .hz-bag,
.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:focus-visible) .hz-bag {
    text-decoration-color: var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:hover) .hm-ok,
.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:focus-visible) .hm-ok {
    translate: var(--gs-bo-1) 0 !important;
}

/* Odak halkası SATIRDA, kutunun içinde (komşu satırı örtmesin); bağın kendi
   halkası basılmaz — iki halka üst üste görünmesin. */
.gs-31-hizmet-karma .hm-kapsam-satir:has(.hz-bag:focus-visible) {
    outline: 2px solid var(--hm-metin) !important;
    outline-offset: -4px !important;
}

.gs-31-hizmet-karma .hm-kapsam-ad .hz-bag:focus-visible {
    outline: 0 solid transparent !important;
}

/* Boş hâl (`data-gs-bos`, 15-hizmet kalıbı): çizelgenin içinde tek satır.
   `display` YAZILMAZ: kayıt varken `base.css` gizler (aynı özgüllük, sıra
   bağımlı olmasın). */
.gs-31-hizmet-karma .hm-kapsam-liste .hm-bos {
    margin: 0 !important;
    padding: var(--gs-bo-4) !important;
    font-size: var(--gs-fs-3) !important;
    font-style: italic !important;
    color: var(--hm-silik) !important;
}

/* ── 3 · ANLATI — giriş + görselli bloklar (K-477 · K-480, DESIGN §5 ㉘) ───
 *
 * Eskiz defteri sayfası: her blok TAM BİR görsel taşır (sayfanın fotoğrafı ya da
 * karakalem çizimi), bloklar sol-sağ dönüşümlü. v1 "sıkışık, düz, görselsiz" bulundu
 * (K-478) → bloklar arası `--gs-ritim`, paragraflar arası `--gs-bo-5`, gövde büyür.
 *
 * Hiyerarşi (hesaplanmış, 375 → 1440): h2 `--gs-fs-6` 28 → 40 · giriş `--gs-fs-5` 400
 * 19 → 24 · h3 = gövde `--hm-fs-anlati` 17.5 → 20 (h3 700). `--gs-fs-4` (16) ile
 * `--gs-fs-5` arasında ölçek tokenı YOK: h3 girişten küçük, gövde v1'in 16 px'inden
 * büyük olsun diye iki tokenın ORTASI yazılır (yeni çıplak punto değil). */

/* Boş hâl = hiçlik (⑧): giriş boş VE blok kaydı yoksa bölüm, ÖNÜNDEKİ ayraçla
   birlikte (sarmalayıcı `.hm-anlati-blok`) görünmez → Kapsam ile sonraki bloğun
   ayracı arasında iki ayraç yan yana kalmaz. */
.gs-31-hizmet-karma .hm-anlati-blok:not(:has(.hm-blok)):has(.hm-giris:empty) {
    display: none !important;
}

.gs-31-hizmet-karma .hm-anlati {
    --hm-fs-anlati: calc((var(--gs-fs-4) + var(--gs-fs-5)) / 2);
    padding-block: var(--gs-bo-6) var(--gs-ritim) !important;
}

/* Giriş = öncü paragraf: h2'den küçük, h3'ten büyük, 400 ağırlık — blok başlığıyla
   aynı ölçü ve ağırlıkta yarışmaz (K-478 denetçi bulgusu). */
.gs-31-hizmet-karma .hm-giris {
    margin: 0 0 var(--gs-ritim) !important;
    max-width: 52ch !important;
    font-size: var(--gs-fs-5) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-giris:empty {
    display: none !important;
}

.gs-31-hizmet-karma .hm-blok-liste {
    margin: 0 !important;
}

/* Son bloğun float'ı listeden taşmasın (bölümün alt boşluğu ondan sonra başlar). */
.gs-31-hizmet-karma .hm-blok-liste::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

/* Başlıklı kayıt = yeni blok. v1'in cetvel çizgisi KALKTI: blokları artık görsel
   ayırıyor; çizgi + görsel üst üste iki ayraç olur, sayfa yine "çizelge"ye döner. */
.gs-31-hizmet-karma .hm-blok + .hm-blok:not(:has(.hm-blok-baslik:empty)) {
    margin-block-start: var(--gs-ritim) !important;
}

/* Başlıksız kayıt = aynı bloğun devam paragrafı. */
.gs-31-hizmet-karma .hm-blok:has(.hm-blok-baslik:empty) {
    margin-block-start: var(--gs-bo-5) !important;
}

.gs-31-hizmet-karma .hm-blok-baslik {
    margin: 0 0 var(--gs-bo-4) !important;
    font-size: var(--hm-fs-anlati) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-wrap: balance !important;
    color: var(--hm-metin) !important;
}

/* §5 ⑨ — isteğe bağlı alan: boş başlık yer kaplamaz (JS'siz). */
.gs-31-hizmet-karma .hm-blok-baslik:empty {
    display: none !important;
}

.gs-31-hizmet-karma .hm-blok-metin {
    max-width: 62ch !important;
    font-size: var(--hm-fs-anlati) !important;
    line-height: 1.7 !important;
}

.gs-31-hizmet-karma .hm-blok-metin:empty {
    display: none !important;
}

.gs-31-hizmet-karma .hm-blok-liste .hm-bos {
    display: none !important;
}

/* ── Anlatı görseli — tek `<img>`, tür `data-hm-tur` ile ayrışır ─────────── */

/* Figürün alt boşluğu `.hm-kare`den SONRA yazılır (aşağıda, çerçeve bölümü). */

/* Devam kaydı bloğun görselini TAŞIMAZ: `src` paylaşılan yer tutucu `bos.svg`
   (`data-hm-tur="bos"`), figür gizli; görünen tek figür başlıklı kayıttadır.
   Ölçüldü: statik sayfada (WP eşdeğeri, Chromium) gizli lazy img İNMİYOR; lab'ın
   istemcide yeniden kurulumunda ise İNDİ. Yer tutucu savunmadır: lab yeniden
   kurulumu + ölçülmemiş Firefox/WebKit için gerçek görsel gizli img'ye verilmez. */
.gs-31-hizmet-karma .hm-blok:has(.hm-blok-baslik:empty) .hm-blok-gorsel {
    display: none !important;
}

/* Nöbetçi hâli (F13.1 Paket 2): blok başlığı haritanın TR nöbetçisiyle tutmazsa sağlayıcı
   yanlış görsel basmaz, `tur` = `yok` verir (src yer tutucu) → figür gizli; ≥768'de bloğun
   kayıtlarının metni karşı sütun payı almaz (medya bloğunda). Lab: `?gorsel=yok`. */
.gs-31-hizmet-karma .hm-blok-gorsel[data-hm-tur="yok"] {
    display: none !important;
}

/* Foto ve çizim AYNI kutu oranı (4:3): sütunda tek ritim. Foto kırpılır (⑱ kuralı),
   çizim (640×480) sığdırılır. */
.gs-31-hizmet-karma .hm-blok-gorsel img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
}

/* Çizim zemine çizilidir: çerçeve yüzeyi ve kalem izi yok. Dosya SİYAH mürekkep,
   şeffaf zemin → koyu temada (varsayılan) ters çevrilir, beyaz mürekkep = açılış
   eskizinin tebeşiri; açık temada (`<html data-gs-tema="acik">`, base.css) olduğu
   gibi grafit kalır. `filter` hareketin yazdığı özellik DEĞİL (Ö-023). */
.gs-31-hizmet-karma .hm-blok-gorsel[data-hm-tur="cizim"] .hm-cerceve {
    background: transparent !important;
}

.gs-31-hizmet-karma .hm-blok-gorsel[data-hm-tur="cizim"] img {
    object-fit: contain !important;
    filter: invert(1) !important;
}

:root[data-gs-tema="acik"] .gs-31-hizmet-karma .hm-blok-gorsel[data-hm-tur="cizim"] img {
    filter: none !important;
}

.gs-31-hizmet-karma .hm-blok-gorsel[data-hm-tur="cizim"] .hm-iz {
    display: none !important;
}

/* ── FOTOĞRAF ÇERÇEVESİ + ㉒ kalem izi — örnek iş ve anlatı fotoğrafları ortak ─ */

.gs-31-hizmet-karma .hm-kare {
    position: relative !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Anlatı figürü <768: başlığın üstünde, tam genişlik, alt boşluk `--gs-bo-6` —
   kalem izi karenin altına ~%7 taşar (375'te ~20 px), daha azında iz başlığa değer.
   🔴 SIRA BAĞIMLI: aynı özgüllükteki `.hm-kare { margin: 0 }`dan SONRA durmalı
   (Denetçi B1: önce yazılınca eziliyordu, boşluk 0 px ölçüldü). ≥768 değeri
   dosya sonundaki medya bloğunda, bundan da sonra. */
.gs-31-hizmet-karma .hm-blok-gorsel {
    margin: 0 0 var(--gs-bo-6) !important;
}

.gs-31-hizmet-karma .hm-cerceve {
    position: relative !important;
    background: var(--hm-yuzey) !important;
}

.gs-31-hizmet-karma .hm-cerceve img,
.gs-31-hizmet-karma .hm-video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Kalem izi çerçevenin üstüne oturur; çizgiler köşelerde dışa taşar
   (mürekkep taşması — yerleşime girmez, `overflow: visible`).
   K-470 denetçi bulgusu ②: taşma viewBox'ta yatayda −7.1…106.2, yani karenin
   ~%7'si; kenar boşluğu ise 4vw → kenara değen kare (tam genişlik görsel, ilk/son
   şekil levhası) kadraj dışına basıyordu (375'te −9/381, 768'de −19/781).
   <1360 iz yatayda %3 İÇERİ alınır: sol uç = boşluk − 0.0367·kare ≥ 0
   (375'te 2.3…369.7 · 768'de ≥ 4 px · 1100'de ~20 px). ≥1360 boşluk
   (W − 74rem)/2 ≥ 88 px > taşma 0.071·74rem = 84 px → iz kareyle hizalı.
   Genişlik AÇIK yazılır: svg replaced öğedir, `inset` ile gerilmez. */
.gs-31-hizmet-karma .hm-iz {
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

@media (max-width: 1359.98px) {
    .gs-31-hizmet-karma .hm-iz {
        inset-inline-start: 3% !important;
        width: 94% !important;
    }
}

.gs-31-hizmet-karma .hm-aciklama,
.gs-31-hizmet-karma .hm-damga {
    display: block !important;
    margin: var(--gs-bo-3) 0 0 !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: var(--hm-aralik) !important;
    text-transform: uppercase !important;
    color: var(--hm-silik) !important;
}

/* Görsel olarak gizli ikiz (rakam bandının gerçek değeri): ekran okuyucu
   okur, ekranda yer kaplamaz. Animasyonlu öğe DEĞİL. */
.gs-31-hizmet-karma .hm-gizli {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── 3b · ÖRNEK İŞ ───────────────────────────────────────────────────────── */

/* K-477: örnek iş yalnız beton-prefabik — 0/1 kayıtlı yineleyici. Kayıt yoksa
   blok, ÖNÜNDEKİ ayraçla birlikte görünmez (boş hâl = hiçlik, ⑧; şekil bloğu
   kalıbı). Liste sarmalayıcısı stilsizdir: `.hm-ornek` kendi sınırını taşır. */
.gs-31-hizmet-karma .hm-ornek-blok:not(:has(.hm-ornek)) {
    display: none !important;
}

.gs-31-hizmet-karma .hm-ornek-liste .hm-bos {
    display: none !important;
}

.gs-31-hizmet-karma .hm-ornek {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--gs-bo-6) !important;
    padding-block: var(--gs-bo-6) var(--gs-ritim) !important;
}

.gs-31-hizmet-karma .hm-ornek-alt {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--gs-bo-6) !important;
}

/* Video yuvası HER ZAMAN basılır (F13.1 Paket 2, Ö-479 kalıbı): kaynak boşsa (`src`
   yok — lab — ya da `src=""` — WP) figür görünmez; çatı videosuz genişliğe döner
   (≥768 kuralı, medya bloğunda). */
.gs-31-hizmet-karma .hm-ornek-video:has(.hm-video:is(:not([src]), [src=""])) {
    display: none !important;
}

.gs-31-hizmet-karma .hm-ornek .hm-h2 {
    margin-block-end: var(--gs-bo-4) !important;
}

/* "Görselleştirme" etiketi — 3B görselin üstüne perçinli plaka (§5 ②
   damga ailesi). OPAK zemin: kontrast paletten hesaplanır (dosya başı).
   375'te kırpılmasın diye kareden dar kalır ve satıra sarabilir. */
.gs-31-hizmet-karma .hm-3b {
    position: absolute !important;
    inset-block-start: var(--gs-bo-3) !important;
    inset-inline-start: var(--gs-bo-3) !important;
    z-index: 1 !important;
    max-width: calc(100% - 2 * var(--gs-bo-3)) !important;
    margin: 0 !important;
    padding: var(--gs-bo-1) var(--gs-bo-2) !important;
    border: 1px solid var(--hm-hat-rengi) !important;
    background: var(--hm-zemin) !important;
    font-size: var(--gs-fs-2) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: var(--hm-aralik) !important;
    text-transform: uppercase !important;
    color: var(--hm-metin) !important;
}

/* Video düşük çözünürlüklü (832 × 464): yuvası bundan büyüğe gerilmez. */
.gs-31-hizmet-karma .hm-video-yuva {
    max-width: 52rem !important;
}

.gs-31-hizmet-karma .hm-video {
    aspect-ratio: 832 / 464 !important;
    background: var(--hm-yuzey) !important;
}

/* ── 4 · RAKAM BANDI — ㉓ ölçü zinciri (23'ün değerleri) ──────────────────── */

/* Boş hâl = hiçlik (⑧ · ㉓): sayfanın kaynaklı rakamı yoksa bant VE ardındaki
   (SONRAKİ) ayraç görünmez; önceki ayraç kalır → iki ayraç yan yana gelmez (K-474).
   JS gerekmez. Ayraç, bandın halkası (`.hm-olcu`) olup olmadığından tanınır —
   yineleyicinin boş-hâl bloğu basılmasa da tutar. İki kural ayrı: biri geçersiz
   sayılırsa öteki düşmesin. */
.gs-31-hizmet-karma .hm-rakam:not(:has(.hm-olcu)) {
    display: none !important;
}

.gs-31-hizmet-karma .hm-rakam:not(:has(.hm-olcu)) + .hm-ayrac {
    display: none !important;
}

.gs-31-hizmet-karma .hm-zincir .hm-bos {
    display: none !important;
}

.gs-31-hizmet-karma .hm-rakam {
    padding-block: var(--gs-bo-6) var(--gs-ritim) !important;
}

.gs-31-hizmet-karma .hm-rakam .hm-etiket {
    margin-block-end: var(--gs-bo-6) !important;
}

.gs-31-hizmet-karma .hm-zincir {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: var(--gs-bo-6) !important;
    margin: 0 !important;
}

.gs-31-hizmet-karma .hm-olcu {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gs-bo-3) !important;
    min-width: 0 !important;
}

.gs-31-hizmet-karma .hm-olcu-dd {
    /* Görsel olarak gizli ikizin (`.hm-gizli`, mutlak) kapsayıcı bloğu BÖLÜM İÇİNDE kalsın:
       yoksa konumu sayfaya (üstteki duyuru bandının yüksekliğine) bağlanır. Görünür kutu değişmez. */
    position: relative !important;
    order: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

.gs-31-hizmet-karma .hm-olcu-deger {
    display: block !important;
    padding-inline: var(--gs-bo-2) !important;
    text-align: center !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    color: var(--hm-metin) !important;
}

/* Ölçü çizgisi: uçlarda 1 px dikme, ortada 1 px yatay, 8 px oklar (㉓). */
.gs-31-hizmet-karma .hm-olcu-hat {
    position: relative !important;
    display: block !important;
    height: 0.75rem !important;
    margin-block-start: var(--gs-bo-1) !important;
    border-inline: 1px solid var(--hm-metin) !important;
    background: linear-gradient(var(--hm-metin), var(--hm-metin)) center / 100% 1px no-repeat !important;
}

.gs-31-hizmet-karma .hm-olcu-hat::before,
.gs-31-hizmet-karma .hm-olcu-hat::after {
    content: "" !important;
    position: absolute !important;
    inset-block-start: 50% !important;
    margin-block-start: -3px !important;
    border-block: 3px solid transparent !important;
}

.gs-31-hizmet-karma .hm-olcu-hat::before {
    inset-inline-start: 0 !important;
    border-inline-end: 8px solid var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-olcu-hat::after {
    inset-inline-end: 0 !important;
    border-inline-start: 8px solid var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-olcu-ad {
    margin: 0 !important;
    padding-inline: var(--gs-bo-2) !important;
    text-align: center !important;
    font-size: var(--gs-fs-3) !important;
    line-height: 1.45 !important;
    color: var(--hm-ikincil) !important;
}

/* ── 5 · KAPANIŞ — §5 ⑬ ──────────────────────────────────────────────────── */

.gs-31-hizmet-karma .hm-kapanis {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--gs-bo-6) !important;
    padding-block: var(--gs-bo-6) var(--gs-ritim) !important;
}

.gs-31-hizmet-karma .hm-dugme {
    display: inline-flex !important;
    gap: var(--gs-bo-3) !important;
    align-items: center !important;
    max-width: 100% !important;
    min-height: var(--gs-hedef) !important;
    padding: var(--gs-bo-4) var(--gs-bo-5) !important;
    border: 0 solid transparent !important;
    border-radius: 0 !important;
    background: var(--hm-eylem) !important;
    color: var(--hm-eylem-metin) !important;
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease !important;
}

.gs-31-hizmet-karma .hm-dugme:hover {
    transform: translateY(-2px) !important;
}

.gs-31-hizmet-karma .hm-dugme-ok {
    flex: none !important;
    width: 1.5rem !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
}

.gs-31-hizmet-karma .hm .hm-dugme-ok path {
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
}

.gs-31-hizmet-karma .hm-kanal {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gs-bo-2) var(--gs-bo-5) !important;
    margin: var(--gs-bo-5) 0 0 !important;
}

.gs-31-hizmet-karma .hm-bag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--gs-hedef) !important;
    border-bottom: 1px solid var(--hm-hat-rengi) !important;
    font-size: var(--gs-fs-3) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--hm-metin) !important;
}

.gs-31-hizmet-karma .hm-bag:hover {
    border-bottom-color: var(--hm-metin) !important;
}

/* ── ODAK — koyu zeminde EZİLİR (Ö-113); açık temada aynı token grafittir ─ */

.gs-31-hizmet-karma :focus-visible {
    outline: 2px solid var(--hm-metin) !important;
    outline-offset: 3px !important;
}

.gs-31-hizmet-karma ::selection {
    background: var(--hm-metin) !important;
    color: var(--hm-zemin) !important;
}

/* ── 768px ve üzeri ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .gs-31-hizmet-karma .hm-ayrac-detay {
        width: 8.5rem !important;
    }

    .gs-31-hizmet-karma .hm-ayrac-hat {
        margin-block-end: 0.75rem !important;
    }

    /* Örnek iş alt sırası: fotoğraf (4:3) + video (832:464) yan yana.
       `flex-grow` = kendi en-boy oranı, taban 0 → iki kare AYNI yükseklikte
       (h = w / oran; genişlikler oranla bölüşülür). Video yoksa fotoğraf
       satırı kaplamaz, 40rem'de durur. */
    .gs-31-hizmet-karma .hm-ornek-alt {
        display: flex !important;
        align-items: flex-start !important;
        gap: var(--gs-bo-5) !important;
    }

    .gs-31-hizmet-karma .hm-ornek-cati {
        flex: 1.3333 1 0 !important;
    }

    .gs-31-hizmet-karma .hm-ornek-video {
        flex: 1.7931 1 0 !important;
    }

    /* "Görünür video yok" = kaynağı boş (`.hm-ornek-video` gizleme kuralıyla aynı koşul). */
    .gs-31-hizmet-karma .hm-ornek-alt:not(:has(.hm-video[src]:not([src=""]))) .hm-ornek-cati {
        flex: 0 1 40rem !important;
    }

    /* Kapsam (29'un düzeni, aks olmadan): başlık 1/3, çizelge 2/3.
       `min-content`: başlık sütunu en uzun kelimeden dar olamaz —
       "Leistungsumfang" 768'de 1/3'e sığmaz, bölünmez ve taşmaz. */
    .gs-31-hizmet-karma .hm-kapsam {
        display: grid !important;
        grid-template-columns: minmax(min-content, 1fr) minmax(0, 2fr) !important;
        gap: var(--gs-bo-6) !important;
        align-items: start !important;
    }

    /* Anlatı (K-480): h2 + giriş üstte, bloklar sınır genişliğinde. Başlıklı kaydın
       figürü `data-hm-yon` yönüne yüzer (5/12); bloğun TÜM kayıtlarının metni karşı
       sütunda (figür + `--gs-ritim` kadar iç kenar) → float metni sarmaz, metin
       sütunu figür bitince de aynı hizada akar. Sonraki başlıklı kayıt `clear` ile
       figürün altından başlar; figürün alt boşluğu (`--gs-ritim`) bloklar arası
       boşluğa eşit → metin kısa da kalsa uzun da olsa ritim aynı.
       Metin sütunu (ölçüldü): 768'de 366 px ≈ 38ch · 1024'te 489 px · 1440'ta 619 px. */
    .gs-31-hizmet-karma .hm-anlati {
        --hm-gorsel-pay: calc(100% * 5 / 12);
    }

    .gs-31-hizmet-karma .hm-blok-gorsel {
        float: inline-start !important;
        width: var(--hm-gorsel-pay) !important;
        margin: 0 0 var(--gs-ritim) !important;
    }

    .gs-31-hizmet-karma .hm-blok[data-hm-yon="sag"] .hm-blok-gorsel {
        float: inline-end !important;
    }

    .gs-31-hizmet-karma .hm-blok:not(:has(.hm-blok-baslik:empty)) {
        clear: both !important;
    }

    .gs-31-hizmet-karma .hm-blok > .hm-blok-baslik,
    .gs-31-hizmet-karma .hm-blok > .hm-blok-metin {
        margin-inline-start: calc(var(--hm-gorsel-pay) + var(--gs-ritim)) !important;
    }

    .gs-31-hizmet-karma .hm-blok[data-hm-yon="sag"] > .hm-blok-baslik,
    .gs-31-hizmet-karma .hm-blok[data-hm-yon="sag"] > .hm-blok-metin {
        margin-inline: 0 calc(var(--hm-gorsel-pay) + var(--gs-ritim)) !important;
    }

    /* Nöbetçi hâli (`tur` = `yok`): görsel yok → metin tam genişlik, float yok (figür
       gizli). Kural KAYDIN kendi `tur`una bakar: CSS "bu devam paragrafı hangi bloğun"
       sorusunu soramaz → SÖZLEŞME: `yok` bloğunun devam kayıtları da `bos` değil `yok`
       taşır (lab `?gorsel=yok` öyle; sağlayıcı da öyle vermeli). */
    .gs-31-hizmet-karma .hm-blok:has(.hm-blok-gorsel[data-hm-tur="yok"]) > .hm-blok-baslik,
    .gs-31-hizmet-karma .hm-blok:has(.hm-blok-gorsel[data-hm-tur="yok"]) > .hm-blok-metin {
        margin-inline: 0 !important;
    }

    /* Zincir yan yana: komşu halkalar ortak dikmeyi paylaşır (㉓, 23). */
    .gs-31-hizmet-karma .hm-zincir {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .gs-31-hizmet-karma .hm-olcu + .hm-olcu .hm-olcu-hat {
        border-inline-start-width: 0 !important;
    }

    .gs-31-hizmet-karma .hm-kapanis {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
        align-items: center !important;
    }
}

/* ── 1025px ve üzeri ─────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
    /* Metin solda üstte, eskiz sağda ve metnin altına doğru büyür: defterin
       sayfasında yazı köşeye sıkışır, çizim sayfayı kaplar. */
    .gs-31-hizmet-karma .hm-acilis {
        /* `min-content`: sütun başlığın en uzun kelimesinden dar olamaz —
           "Konstrüksiyon" · "Stahlkonstruktion" bölünmez. */
        grid-template-columns: minmax(min-content, 4fr) minmax(0, 8fr) !important;
        align-items: start !important;
        gap: var(--gs-bo-6) !important;
    }

    .gs-31-hizmet-karma .hm-acilis-metin {
        padding-block-start: var(--gs-bo-6) !important;
    }

    .gs-31-hizmet-karma .hm-hangar .hm-hat {
        stroke-width: 1.9 !important;
    }

    /* Örnek iş üst sırası (30'un yerleşimi): görselleştirme solda (8/12),
       metin sağda (4/12) görselin tabanına oturur; alt sıra tam genişlik.
       DOM'da metin önce (okuma sırası) — yer `grid-row`/`grid-column`dan. */
    .gs-31-hizmet-karma .hm-ornek {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        column-gap: var(--gs-bo-6) !important;
    }

    .gs-31-hizmet-karma .hm-ornek-gorsel {
        grid-column: 1 / span 8 !important;
        grid-row: 1 !important;
    }

    .gs-31-hizmet-karma .hm-ornek-metin {
        grid-column: 9 / -1 !important;
        grid-row: 1 !important;
        align-self: end !important;
    }

    .gs-31-hizmet-karma .hm-ornek-alt {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        gap: var(--gs-bo-6) !important;
    }
}