/* ==========================================================================
   GEBA SAFETY — GORUNUM KATMANI  v1.0.0

   Tasarim dili: EKIPMAN KUNYE PLAKASI.
   GEBA'nin sattigi her urunun uzerinde perclenmis bir kunye plakasi var:
   kapasite, standart kodu, seri numarasi. Mono rakamlar, ince cerceve,
   islenmis kose. Bu katman o dili siteye tasiyor.

   YAPI
   Her kural iki kapidan gecer:
     .geba-skin-<modul>    modul acik mi
     .geba-skin--<seviye>  yogunluk (--geba-skin-dose carpani)
   Sinif yoksa secici eslesmez; kapali modul hicbir seye dokunmaz.

   OLCULDU — 2026-09-16, https://geba.com.tr canli DOM.
   Bu dosyadaki her hedef olculerek secildi. Iki olcum kurali var:

   1) TON. Ana sayfa agirlikli olarak ACIK zeminli: 11 bolumun 7'si
      #fff / #f4f2ed. Sabit beyaz cizgi veya acik metin rengi bu
      bolumlerde gorunmez ya da okunamaz olurdu. Bu yuzden katmandaki
      her cizgi ve her dolgu currentColor'dan turetilir: koyu bolumde
      acik, acik bolumde koyu olur. Sabit renk YOK.

   2) SOZDE-ELEMAN ISGALI. Cekirdek ::before/::after'lari yogun kullaniyor.
      Olculen dolu olanlar: bolum ::before (manifesto, showroom, iletisim),
      bolum ::after (portfolyo, muhendislik), kart ::after (urun, sektor,
      muhendislik), buton ::before (primary, line), .gn5-eyebrow::before
      (poster numarasi 01/02), .gn6-directory-card::before.
      Asagidaki her sozde-eleman bu listeye bakilarak secildi; hicbiri
      cekirdegin kullandigi bir sozde-elemani ezmez.

   Yeniden olcmek icin: her hedefte getComputedStyle(el, "::before").content
   degerinin "none" olup olmadigina bak.
   ========================================================================== */

.geba-skin .geba-next.gn-v4 {
    /* Yogunluga gore olceklenen tek carpan. Her modul buna bakar, boylece
       seviye degisince tum katman birlikte hareket eder. */
    --geba-skin-dose: .68;

    --geba-skin-accent: var(--gn4-pink, #f30067);
    --geba-skin-mono: var(--gn-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);

    /* Tona duyarli cizgiler. currentColor bu degiskenlerin KULLANILDIGI
       yerde cozulur, tanimlandigi yerde degil: her bolum kendi metin
       rengini verir. Acik bolumde koyu, koyu bolumde acik cizgi. */
    --geba-skin-hair: color-mix(in srgb, currentColor calc(var(--geba-skin-dose) * 20%), transparent);
    --geba-skin-hair-strong: color-mix(in srgb, currentColor calc(var(--geba-skin-dose) * 42%), transparent);
    --geba-skin-wash: color-mix(in srgb, currentColor calc(var(--geba-skin-dose) * 4%), transparent);
}

.geba-skin--subtle   .geba-next.gn-v4 { --geba-skin-dose: .38; }
.geba-skin--balanced .geba-next.gn-v4 { --geba-skin-dose: .68; }
.geba-skin--bold     .geba-next.gn-v4 { --geba-skin-dose: 1; }

/* color-mix desteklenmiyorsa katman cizgi cizmesin: yanlis renkte bir
   cizgi, hic cizgi olmamasindan kotudur. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .geba-skin .geba-next.gn-v4 {
        --geba-skin-hair: transparent;
        --geba-skin-hair-strong: transparent;
        --geba-skin-wash: transparent;
    }
}

/* ==========================================================================
   1) BOLUM SINIRI
   Olcum: bolum zemin sirasi #07090c, #fff, #fff, koyu, #fff, #f4f2ed,
   #fff, #f4f2ed, koyu, #0a0b0f, #090b0f. Iki yerde ayni ton yan yana
   geliyor (manifesto > portfolyo ve bilgi > iletisim); orada bolum
   degistigi okunmuyor. Ince bir sinir cizgisi bunu ayirir.

   Neden zemin tonu DEGISTIRILMIYOR: bolumlerin yarisindan cogu acik
   zeminli ve metni koyu ink. Zemini koyulastirmak metni okunamaz yapardi.
   ========================================================================== */
.geba-skin-rhythm .geba-next.gn-v4 > main > section + section {
    border-block-start: 1px solid var(--geba-skin-hair);
}

/* Poster vitrininden sonra gelen ilk bolumde cizgi gereksiz: zaten
   tam kontrastli bir gecis var. */
.geba-skin-rhythm .geba-next.gn-v4 > main > .gn5-showcase + section {
    border-block-start-color: transparent;
}

/* ==========================================================================
   2) KUNYE PLAKASI
   Olcum: .gn5-poster__specs bir <dl>, 3 kolonluk grid, ustunde 1px
   cizgi var, dt/dd zaten IBM Plex Mono. Yani cekirdek yolun yarisini
   gelmis: mono var, cerceve yok.

   Eksik olan uc sey olculdu ve burada tamamlaniyor:
     - font-variant-numeric: normal  -> rakamlar hizalanmiyor
     - sadece ust cizgi              -> kapali bir plaka degil
     - kolonlar arasi ayrim yok      -> uc deger tek blok gibi okunuyor
   ========================================================================== */
.geba-skin-dataplate .geba-next.gn-v4 :is(.gn5-poster__specs, .gn31-showroom__facts) {
    padding-inline: calc(var(--geba-skin-dose) * 14px);
    padding-block-end: calc(var(--geba-skin-dose) * 14px);
    border: 1px solid var(--geba-skin-hair);
    background: var(--geba-skin-wash);

    /* Islenmis kose pahi: plakanin sag altindan bir parca alinir.
       Ekipman etiketlerinde bu pah, plakanin hangi yone takildigini
       gosterir. Burada isi ayni: kose, plakanin bittigini soyler. */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--geba-skin-dose) * 14px),
        calc(100% - var(--geba-skin-dose) * 14px) 100%,
        0 100%
    );
}

/* Kolon ayirici: ilk hucre haric her hucrenin soluna ince cizgi. */
.geba-skin-dataplate .geba-next.gn-v4 .gn5-poster__specs > div + div {
    padding-inline-start: calc(var(--geba-skin-dose) * 14px);
    border-inline-start: 1px solid var(--geba-skin-hair);
}

/* Rakamlar sabit genislikli basamakla dizilir; degerler alt alta hizalanir. */
.geba-skin-dataplate .geba-next.gn-v4 :is(.gn5-poster__specs, .gn31-showroom__facts) :is(dd, .gn31-showroom__fact) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   3) KART DILI
   Olcum: .gn4-product-card border-radius 18px, .gn22-resource-card 20px.
   Saha ekipmaninin hicbir kenari o kadar yuvarlak degil; yumusak kose
   tuketici uygulamasi isareti. Doza bagli olarak keskinlestirilir.

   Olcum: bu kartlarda ::after DOLU, ::before BOS. Tik ::before'a gider.
   Tek istisna .gn6-directory-card: onda ::before dolu, ::after bos.
   ========================================================================== */
.geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn21-category-card, .gn22-resource-card, .gn6-directory-card) {
    border-radius: calc(18px - 14px * var(--geba-skin-dose));
    transition: box-shadow .28s ease;
}

.geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn18-sector-card, .gn21-category-card, .gn22-resource-card, .gn18-engineering-card, .gn6-directory-card):is(:hover, :focus-within) {
    /* Kenar aydinlatmasi. Koyu zeminde yumusak golge kayboluyor, acik
       zeminde bulaniyor; her ikisinde de ceken sey ince bir cizgi. */
    box-shadow: inset 0 0 0 1px var(--geba-skin-hair-strong);
}

/* Sol ust kose tiki: iki kisa cizgi, kosede bulusur. Plakanin
   perclendigi yeri isaret eder. */
.geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn18-sector-card, .gn21-category-card, .gn22-resource-card, .gn18-engineering-card)::before,
.geba-skin-cards .geba-next.gn-v4 .gn6-directory-card::after {
    content: "";
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    width: calc(var(--geba-skin-dose) * 13px);
    height: calc(var(--geba-skin-dose) * 13px);
    border-block-start: 1px solid var(--geba-skin-hair-strong);
    border-inline-start: 1px solid var(--geba-skin-hair-strong);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn18-sector-card, .gn21-category-card, .gn22-resource-card, .gn18-engineering-card):is(:hover, :focus-within)::before,
.geba-skin-cards .geba-next.gn-v4 .gn6-directory-card:is(:hover, :focus-within)::after {
    opacity: 1;
}

/* ==========================================================================
   4) BASLIK TIKI
   Olcum: .gn18-section-head ve .gn21-section-head'de iki sozde-eleman da
   bos, overflow visible, position relative. Guvenli.

   .gn5-eyebrow KASITLI OLARAK DISARIDA: onun ::before'unu cekirdek
   poster numarasi (01, 02, 03) icin kullaniyor. Ezmek numarayi silerdi.

   Neden AKISTA degil, MUTLAK konumlu: .gn18-section-head olculdugunde
   display:grid cikti. Akista bir sozde-eleman orada grid ogesi olur,
   kendi satirini ve row-gap'ini alir — olcum: basligi 50px asagi itiyordu.
   Mutlak konumda tik akisin disinda kalir; olculen yerlesim degisimi 0.
   Bolumun ust ic bosluguna cizilir (olcum: basligin ustunde 89px bosluk).
   ========================================================================== */
.geba-skin-headings .geba-next.gn-v4 :is(.gn18-section-head, .gn21-section-head) {
    position: relative;
}

.geba-skin-headings .geba-next.gn-v4 :is(.gn18-section-head, .gn21-section-head)::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 0;
    width: calc(22px + var(--geba-skin-dose) * 30px);
    height: 2px;
    margin-block-end: calc(10px + var(--geba-skin-dose) * 10px);
    background: var(--geba-skin-accent);
    pointer-events: none;
}

/* ==========================================================================
   5) TEKNIK IZGARA
   Olcum: yalnizca background-image'i BOS olan bolumlere uygulanir.
   Dolu olanlar (muhendislik, showroom, iletisim, portfolyo) disarida:
   onlarin radyal gradyanini ezmek bolumun kimligini silerdi.

   Cizgi rengi currentColor'dan gelir: acik bolumde cizim kagidi,
   koyu bolumde ince teknik izgara. Yalnizca "belirgin" seviyesinde.
   ========================================================================== */
.geba-skin--bold.geba-skin-blueprint .geba-next.gn-v4 :is(.gn18-manifesto, .gn18-sectors, .gn4-services, .gn4-products, .gn18-brands, .gn18-knowledge) {
    background-image:
        linear-gradient(color-mix(in srgb, currentColor 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, currentColor 3.5%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
}

/* ==========================================================================
   6) SAYISAL VITRIN
   Olcum: .gn5-poster__specs dd zaten mono ama font-variant-numeric
   "normal" — yani basamaklar degisken genislikte. Sayfadaki her sayisal
   vitrin ayni sorunu tasiyor. Mono + tabular = olcum aleti ekrani.
   ========================================================================== */
.geba-skin-figures .geba-next.gn-v4 :is(.gn-catalog-hero__stat, .gn-section-index, .gn31-showroom__fact) {
    font-family: var(--geba-skin-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.02em;
}

/* Standart kodlari (EN 341, EN 12841) govde tipografisiyle akiyordu.
   Mono, onlari metin degil KOD olarak okutur. */
.geba-skin-figures .geba-next.gn-v4 .gn-std {
    font-family: var(--geba-skin-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   7) BUTON DILI
   Olcum: .gn-button--primary ve --line zaten border-radius 0 — yani
   keskin. Duzeltilecek bir yuvarlaklik yok. Eksik olan hareket:
   birincil butonun markup'inda ZATEN bir <span> ok var ama sabit
   duruyor. Yeni ok eklemek yerine var olani hareket ettiriyoruz.

   Olcum: buton ::before DOLU (cekirdegin dolgu gecisi), ::after BOS.
   ========================================================================== */
.geba-skin-buttons .geba-next.gn-v4 .gn-button > span {
    display: inline-block;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}

.geba-skin-buttons .geba-next.gn-v4 .gn-button:is(:hover, :focus-visible) > span {
    transform: translate(calc(var(--geba-skin-dose) * 3px), calc(var(--geba-skin-dose) * -3px));
}

/* Cizgili butonda alt kenar: hover'da soldan saga dolar. */
.geba-skin-buttons .geba-next.gn-v4 .gn-button--line::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    z-index: 1;
    width: 100%;
    height: 2px;
    background: var(--geba-skin-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    pointer-events: none;
}

.geba-skin-buttons .geba-next.gn-v4 .gn-button--line:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
}

/* ==========================================================================
   8) HERO ISIMASI
   Olcum: .gn5-poster'da iki sozde-eleman da bos, overflow hidden,
   position absolute. Guvenli.

   Isima rengi --gn5-accent'ten gelir: acik olan poster MILAN ise
   turuncu, WIND ise camgobegi kalir. Bunlar urun bazli kasitli
   temalamadir; katman ustune yazmaz.
   ========================================================================== */
.geba-skin-hero-glow .geba-next.gn-v4 .gn5-poster::before {
    content: "";
    position: absolute;
    inset-block-start: -18%;
    inset-inline-end: -12%;
    z-index: 0;
    width: 62vw;
    max-width: 900px;
    aspect-ratio: 1;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--gn5-accent, var(--geba-skin-accent)) calc(var(--geba-skin-dose) * 17%), transparent) 0%,
        transparent 62%
    );
    pointer-events: none;
}

/* Poster icerigi isimanin ustunde kalmali. */
.geba-skin-hero-glow .geba-next.gn-v4 .gn5-poster__grid {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   DAR EKRAN
   Kunye plakasi 3 kolonluk gridken dar ekranda tek kolona duser; kolon
   ayiricisi orada yatay olmali, dikey degil.
   ========================================================================== */
@media (max-width: 720px) {
    .geba-skin-dataplate .geba-next.gn-v4 .gn5-poster__specs > div + div {
        padding-inline-start: 0;
        border-inline-start: 0;
        border-block-start: 1px solid var(--geba-skin-hair);
    }

    .geba-skin-hero-glow .geba-next.gn-v4 .gn5-poster::before {
        width: 120vw;
    }

    .geba-skin--bold.geba-skin-blueprint .geba-next.gn-v4 :is(.gn18-manifesto, .gn18-sectors, .gn4-services, .gn4-products, .gn18-brands, .gn18-knowledge) {
        background-size: 40px 40px;
    }
}

/* ==========================================================================
   AZALTILMIS HAREKET
   Katmandaki tum hareket durur. Cizgiler, cerceveler ve tonlar kalir:
   onlar hareket degil, bilgi.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn21-category-card, .gn22-resource-card, .gn6-directory-card),
    .geba-skin-buttons .geba-next.gn-v4 .gn-button > span,
    .geba-skin-buttons .geba-next.gn-v4 .gn-button--line::after {
        transition: none !important;
    }

    .geba-skin-buttons .geba-next.gn-v4 .gn-button:is(:hover, :focus-visible) > span {
        transform: none;
    }

    .geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn18-sector-card, .gn21-category-card, .gn22-resource-card, .gn18-engineering-card)::before,
    .geba-skin-cards .geba-next.gn-v4 .gn6-directory-card::after {
        transition: none !important;
        opacity: 1;
    }
}

/* ==========================================================================
   YAZDIRMA
   Dekoratif katmanin tamami kalkar. Kunye plakasinin cercevesi kalir:
   basili sayfada teknik veriyi cerceveleyen kutu ise yarar.
   ========================================================================== */
@media print {
    .geba-skin-hero-glow .geba-next.gn-v4 .gn5-poster::before,
    .geba-skin-cards .geba-next.gn-v4 :is(.gn4-product-card, .gn18-sector-card, .gn21-category-card, .gn22-resource-card, .gn18-engineering-card)::before,
    .geba-skin-cards .geba-next.gn-v4 .gn6-directory-card::after,
    .geba-skin-buttons .geba-next.gn-v4 .gn-button--line::after {
        display: none !important;
    }

    .geba-skin--bold.geba-skin-blueprint .geba-next.gn-v4 :is(.gn18-manifesto, .gn18-sectors, .gn4-services, .gn4-products, .gn18-brands, .gn18-knowledge) {
        background-image: none !important;
    }

    .geba-skin-dataplate .geba-next.gn-v4 :is(.gn5-poster__specs, .gn31-showroom__facts) {
        border-color: #000 !important;
        background: none !important;
        clip-path: none !important;
    }
}