/* CEMAY overrides for the Venture theme. Additive only — Venture's own rules are never edited (constitution I). */

/* Brand typefaces, self-hosted (002 / research decision 6).
   The mockup loaded these from the Google Fonts CDN; that is not an option in production — a third-party
   request on every page view is a KVKK/GDPR problem and costs a connection on the critical path. The woff2
   files were downloaded once from the CSS API and now sit in ../fonts.
   Both the `latin` and `latin-ext` subsets are shipped: Turkish ş/ğ/İ/Ş/Ğ live in latin-ext, so without it the
   storefront falls back to a system font mid-word. unicode-range keeps that file off the wire for visitors
   who never render one of those glyphs.
   Barlow Semi Condensed ships as static instances (one file per weight); Inter ships as a single variable
   font per subset — hence one @font-face with the 400..600 range rather than three identical copies.

   012 (T080.3, research K5): the latin-ext files were the stock Google subsets — the full Latin Extended-A/B
   range, ~112 KB across the three of them, downloaded on every Turkish page for the sake of six glyphs. A
   scan of the plugin content and the theme found no latin-ext character outside Turkish, so both the files
   and their unicode-range are now narrowed to Ğ ğ İ ı Ş ş: 112 KB -> 10 KB, with Inter's wght axis (100..900)
   intact. If content ever needs another Latin Extended character, widen the range and re-cut the subset —
   as it stands such a character would fall straight through to the system font. */
@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-600-latin-ext.woff2') format('woff2');
    unicode-range: U+011E-011F, U+0130-0131, U+015E-015F;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-700-latin-ext.woff2') format('woff2');
    unicode-range: U+011E-011F, U+0130-0131, U+015E-015F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
    unicode-range: U+011E-011F, U+0130-0131, U+015E-015F;
}

/* Design tokens — DESIGN.md v3.2 §2/§3/§8 (002 / data-model §8).
   Every CEMAY component below reads its colour, type and spacing from here rather than repeating a hex, so
   the design system stays the single source. Note this is *not* the theme accent: Venture's own accent comes
   from the theme-roller preset (admin -> Venture settings -> Preset), which regenerates theme.custom-1.css.
   The Venture preset carries exactly one colour (%color-1% in its preset.less), so red-500 goes there and the
   rest of the scale — including the red-600 interaction colour that buttons and links actually use — can only
   live here.
   --cemay-nav-bp (1200px) is documentation only: media query prelude cannot read a custom property, so the
   value is repeated literally in each @media below. Keep them in step. */
:root {
    --cemay-red-500: #E52521;
    --cemay-red-600: #C81D18;
    --cemay-red-700: #A81813;
    --cemay-red-050: #FDECEB;

    --cemay-charcoal-900: #2B2B2D;
    --cemay-ink-900: #1A1A1C;
    --cemay-steel-600: #5C6066;
    --cemay-steel-400: #6B6E72;
    --cemay-gray-100: #F4F4F5;
    --cemay-gray-050: #FAFAFB;
    --cemay-border: #E4E4E6;
    --cemay-border-strong: #C9CACC;
    --cemay-white: #FFFFFF;

    --cemay-danger: #B3261E;
    --cemay-success: #1E8E5A;
    --cemay-success-050: #E7F4EE;

    /* WhatsApp's own brand green — the button has to read as WhatsApp, so it is theirs rather than ours */
    --cemay-whatsapp: #25D366;
    --cemay-whatsapp-dark: #1FB855;

    --cemay-font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --cemay-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    /* DESIGN.md §3 names IBM Plex Mono for eyebrow/technical labels and marks it OPTIONAL. It is a system
       stack rather than a third typeface: 002 removed the Google Fonts CDN outright (a third-party font
       request on every page view is a KVKK/GDPR problem), and self-hosting a whole family for a handful of
       12px uppercase labels is not worth the bytes. The texture — monospaced, wide-tracked — is what the
       label needs, and every platform ships one. */
    --cemay-font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, monospace;

    --cemay-container: 1200px;
    --cemay-nav-bp: 1200px;

    /* height of the contact bar; the sticky header offsets by exactly this so the white bar lands flush at the
       top of the viewport with no sliver of charcoal left behind */
    --cemay-topbar-height: 38px;
}

/* ── Header (002 / US1) ────────────────────────────────────────────────────────────────────────────────────
   The approved design (design/konsept-a-v6.html) is a charcoal contact bar over a white header that stays put
   while the page scrolls, with one red call to action on the right. Venture's own header is a light gradient
   that scrolls away, so what follows re-dresses its boxes rather than replacing them — the markup, the mega
   menu and the off-canvas panel all stay the theme's (constitution I and X).
   1200px is the navigation breakpoint from DESIGN.md: above it the menu sits in the bar, below it Venture
   moves the same markup into its off-canvas panel. */

/* Contact bar.
   İçerik AŞAĞIDAKİ header ile aynı 1200px kapsayıcıya oturur (mockup §1: `.topbar .in{max-width:container}`).
   014'te header kapsayıcıya çekilirken yalnız `.header-lower` hizalanmıştı; bu bar viewport'tan 16px
   padding'de kaldı, yani tagline ekranın en solundan, altındaki logo 136'dan başlıyordu — bar sayfanın
   geri kalanına bağlı değil, üstüne yapıştırılmış gibi duruyordu (Ahmet, 5 Ağu). Zemin tam genişlikte
   kalır, hizalanan içeriktir; `.header-lower` ile birebir aynı formül. */
.header-upper {
    background: var(--cemay-charcoal-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-left: max(24px, calc((100% - 1200px) / 2 + 24px));
    padding-right: max(24px, calc((100% - 1200px) / 2 + 24px));
    height: var(--cemay-topbar-height);
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    /* Venture bu barın taşmasını kesiyor (`overflow: hidden`) ve dil açılırı 38px'in dışına çıktığı için
       görünmez oluyordu (ölçüldü: liste 38→126.6, bar 0→38; noktadaki öge TEKLİF İSTE düğmesiydi).
       Tagline'ın üç nokta ile kısalması bu bildirime bağlı değil — kendi `overflow: hidden`ı var. */
    overflow: visible;
}

@media (min-width: 1201px) and (max-width: 1439px) {
    .header-upper {
        padding-left: max(16px, calc((100% - 1200px) / 2 + 16px));
        padding-right: max(16px, calc((100% - 1200px) / 2 + 16px));
    }
}

.cemay-topbar-contact {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.cemay-tagline {
    color: #b9babd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
}

.cemay-topbar-link {
    color: #e6e6e8;
    text-decoration: none;
    white-space: nowrap;
    /* the theme uppercases header text; on an e-mail address Turkish casing turns the i of "cemayint" into İ */
    text-transform: none;
}

.cemay-topbar-link:hover,
.cemay-topbar-link:focus-visible {
    color: #fff;
}

/* On a phone the tagline and the contact details would each wrap to their own line and push the bar three rows
   deep, and the language selector is not here anyway — below the navigation breakpoint the theme moves the
   selectors into the off-canvas panel, which is where a phone visitor switches language. That leaves nothing
   in the bar, so the bar goes too rather than sitting there as an empty charcoal strip. */
@media (max-width: 767px) {
    .header-upper {
        display: none;
    }
}

/* ── Dil seçici: bayraklı açılır (Ahmet, 6 Ağu 2026) ───────────────────────────────────────────────────
   Önce üst barda ham bir `<select>` duruyordu ve açılır listesini işletim sistemi çiziyordu: antrasit
   barın üzerinde beyaz kenarlı bir OS kutusu. `<select>`in açılır kısmı giydirilemediği ve `<option>`
   görsel alamadığı için bileşen gerçek bir açılıra çevrildi (view: Views/Shared/Components/
   LanguageSelector/Default.cshtml).
   Kabuk menü panelleriyle aynı dili konuşur — beyaz yüzey, 1px hairline, 3px kırmızı üst kenar, aynı
   gölge — ve tıpkı onlar gibi barın altına YASLI açılır. */
.cemay-langpicker {
    position: relative;
}

.cemay-langpicker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--cemay-topbar-height);
    padding: 0 2px;
    border: 0;
    background: none;
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    line-height: 1;
    color: #e6e6e8;
    cursor: pointer;
}

.cemay-langpicker-trigger:hover,
.cemay-langpicker-trigger[aria-expanded="true"] {
    color: #fff;
}

/* metnin yanındaki küçük şeref; ok, üst barın diğer metinleriyle aynı optik ağırlıkta kalsın diye
   1.5px'lik ince bir kenarlıkla çizilir */
.cemay-langpicker-caret {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease-in-out;
}

.cemay-langpicker-trigger[aria-expanded="true"] .cemay-langpicker-caret {
    margin-top: 2px;
    transform: rotate(-135deg);
}

/* bayrak oranı 20×14; `object-fit` olmadan dosyanın kendi oranı kutuyu eziyordu */
.cemay-langpicker-flag {
    flex: none;
    width: 20px;
    height: 14px;
    object-fit: cover;
    border: 1px solid rgba(20, 20, 25, .18);
}

.cemay-langpicker-name {
    white-space: nowrap;
    /* tema üst bardaki her metni büyük harfe çeviriyor; "Türkçe" TÜRKÇE olmamalı */
    text-transform: none;
}

.cemay-langpicker-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1002;
    min-width: 160px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    box-shadow: 0 4px 12px rgba(20, 20, 25, .08);
}

.cemay-langpicker.cemay-open .cemay-langpicker-list {
    display: block;
}

.cemay-langpicker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--cemay-steel-600);
    text-decoration: none;
}

.cemay-langpicker-list li + li .cemay-langpicker-option {
    border-top: 1px solid var(--cemay-border);
}

.cemay-langpicker-option:hover,
.cemay-langpicker-option:focus-visible {
    background: var(--cemay-gray-050);
    color: var(--cemay-red-600);
}

.cemay-langpicker-option.is-current {
    color: var(--cemay-ink-900);
    font-weight: 600;
}

/* Off-canvas'taki aynı bileşen: bayrak etiketin içine girdi, satır hizası ona göre kurulur */
.language-selector.mobile .selector-options-item label {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* White header.
   Venture floats this bar over the hero on the home page (.header-lower.slider-enabled → absolute, top:100%)
   and tints it translucent (.light-theme .header-lower). Both selectors are listed here so the white bar wins
   on the home page too. */
.header-lower,
.header-lower.slider-enabled,
.light-theme .header-lower {
    background: var(--cemay-white);
    border-bottom: 1px solid var(--cemay-border);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}

/* The theme keeps horizontal overflow off the body with overflow-x: hidden, which turns the body into a scroll
   container and stops position: sticky inside it from working. `clip` does the same job — no sideways
   scrolling — without becoming one. */
body {
    overflow-x: clip;
}

/* Sticky header (FR-002).
   Applied to .header rather than to the white bar inside it: a sticky element can only travel inside its own
   containing block, and .header is only as tall as the header itself, so sticking the bar to it went nowhere.
   .header's parent spans the page, which is the distance the bar has to cover.
   The negative offset is the contact bar's height: it scrolls away and the white bar comes to rest at the top,
   which is what the approved design does.
   Above the navigation breakpoint only. Below it the off-canvas panel is a descendant of this box, and a sticky
   ancestor with a z-index opens a stacking context that traps the panel beneath its own backdrop — the panel
   slides in and then swallows every tap. Narrow screens have the theme's own fixed bar anyway. */
@media (min-width: 1201px) {
    .header {
        position: sticky;
        top: calc(-1 * var(--cemay-topbar-height));
        z-index: 1001;
    }

    /* on the home page the theme lifts the white bar out of the flow to float it over the hero; it has to stay
       in the flow for the sticky parent to have its height */
    .header-lower,
    .header-lower.slider-enabled {
        position: relative;
        top: auto;
    }
}

/* Header row layout above the navigation breakpoint.
   Venture reserves a fixed 276px on the left and 286px on the right and absolutely positions both, leaving the
   menu a fixed middle column. That was sized for four demo entries and a search box; CEMAY has seven entries
   and a call to action, so the menu wrapped to a second line and the button was pushed past the right edge of
   the viewport. One flex row instead: the logo and the button take what they need, the menu takes the rest.
   1201px matches the Mega Menu plugin's own breakpoint. DESIGN.md says 1200; taking the plugin's number keeps
   the bar and the menu inside it from disagreeing about which layout is in force at exactly 1200px. */
@media (min-width: 1201px) {
    /* Kapsayıcı (mockup onayı, 5 Ağu 2026). Bar tam genişlikte beyaz kalmalı, içeriği 1200px'e oturmalı —
       bu yüzden max-width değil, yan boşluk hesaplanıyor: viewport 1200'den genişse fazlalık ikiye bölünüp
       24px'in üstüne eklenir, dar ekranda 24px'e düşer. Önce hiç kapsayıcı yoktu; logo sol kenara, CTA sağ
       kenara yapışıyor (ölçüldü: sol 24 / sağ 39 px, asimetrik) ve menü <ul> viewport'un %80'ini kaplayıp
       öğeleri kendi içinde ortalıyordu — ortada ~330px boşluk, kenarlarda hiç. */
    .header-lower {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-left: max(24px, calc((100% - 1200px) / 2 + 24px));
        padding-right: max(24px, calc((100% - 1200px) / 2 + 24px));
    }

    .header-left,
    .header-right {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* B01 / FR-014 — the misalignment the test run reported (1.png). Two theme defaults caused it, and both
       have to go: Venture gives the menu wrapper a 30px bottom margin and lays it out as a table-cell (sized
       for its own stacked header), and .header-center is a plain block, so even once it is centred in the
       row its 39px-tall menu stays pinned to the top of a 75px box. Measured: logo and button on cy 76, menu
       on cy 58. Centring .header-center's content is what puts all three on one line. */
    .header-center {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* width:100% idi — kap gerilince öğeler onun içinde ortalanıyor, logoyla ilk madde arasında ~330px
       ölü boşluk açılıyordu. Kap içeriği kadar; ortalamayı .header-center yapar.
       Not: menü SAYFAYA göre değil, logo ile CTA arasında kalan alanda ortalanır. İkisi de ölçüldü —
       sayfaya göre ortalayınca boşluklar 32/106 px (sol sıkışık), kalan alanda ortalayınca 131/131 px.
       Göz sayfanın eksenini değil öğeler arası ritmi okuyor. */
    .header-menu {
        display: block;
        margin: 0;
        padding: 0;
        width: auto;
        max-width: 100%;
    }

    .header-left,
    .header-right {
        flex: 0 0 auto;
    }

    /* Venture centred the logo by taking it out of the flow (absolute) inside its fixed-width box. In a flex
       row that leaves the box zero wide and the first menu entry runs underneath the logo, so the image goes
       back into the flow and measures itself. */
    .header-logo .logo img {
        position: static;
    }
}

.header-logo .logo,
.header-logo .logo img {
    display: block;
    width: auto;
    max-width: none;
    /* 45 değil 52 (Ahmet, 5 Ağu 2026: "buton logodan büyük, arada dengesizlik var"). Dengesizliği bu
       turda ben yarattım: butonu mockup ölçüsüne çıkarınca 43 → 51 px oldu, logo 45'te kaldı ve marka
       kendi çağrısından küçük düştü. Logo 52 px'te 130×52 oluyor, buton 134×51 — logo bir tık büyük,
       buton mockup ölçüsünde. Header 76 px, yani üstte ve altta 12 px nefes kalıyor. */
    max-height: 52px;
}

/* Uppercase display type on the menu entries, per DESIGN.md §3. Venture already uppercases them; this sets the
   family, weight and the red underline that marks hover and the current branch. */
.header-menu .mega-menu > li > a,
.header-menu .mega-menu > li > span {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--cemay-ink-900);
    border-bottom: 3px solid transparent;
}

.header-menu .mega-menu > li > a:hover,
.header-menu .mega-menu > li:focus-within > a {
    color: var(--cemay-red-600);
    border-bottom-color: var(--cemay-red-500);
}

/* "KUMAŞ" / "HALI" (EN "FABRIC" / "CARPET") kalın ve kırmızı — müşteri iki katalog öğesinin siteye girişte
   fark edilmesini istedi; Ahmet mockup üzerinden onayladı (14 Eyl 2026). Yalnız malzeme kelimesi: kırmızı dolgu
   değil metin, TEKLİF İSTE tek baskın kırmızı kalır. Kelimeyi CategoryMenuTemplate.WithPictures/List ayırıyor.
   700, Barlow'un yerel yüklü en kalın ağırlığı (üstteki @font-face). Mobil karşılığı aşağıdaki 1200 bloğunda. */
.header-menu .mega-menu > li > a .cemay-menu-key {
    font-weight: 700;
    color: var(--cemay-red-600);
}

/* Menü çubuğu, MOCKUP DEĞERLERİYLE (§1, onaylı; ölçümle uygulandı 5 Ağu 2026).
   Mockup: `font-size:15px · letter-spacing:.06em · padding:27px 0 · gap:30px`. Canlıda 17px yazı ve
   `padding:8px 15px` vardı; iki görünür fark üretiyordu — yazı bir punto büyüktü ve dikey padding 8px
   olduğu için kırmızı alt çizgi header'ın dibine değil metnin hemen altına, çubuğun ortasına düşüyordu.
   Ölçüldü: madde yüksekliği 39px, mockup'ta 81px (header'ın 76px'ini dolduruyor).

   Boşluk artık `gap`ten geliyor, padding'den değil: mockup'ta alt çizgi TAM metin genişliği kadar; padding
   ile verilseydi metinden 30px geniş olurdu. `gap` için `ul` flex yapıldı — panellerin konumu zaten
   `.header-lower`a çıpalı (aşağıdaki `position:static` bloğu), o yüzden bu güvenli. */
@media (min-width: 1201px) {
    .header-menu .mega-menu {
        display: flex;
        justify-content: center;
        /* Mockup 30 diyor; 24. Mockup değeri 014'ün kısa etiketleriyle ölçülmüştü ("Applications",
           "Systems and Units"). 015'in İngilizce etiketleri — "Fabric Applications", "Carpet
           Applications" — toplamda 32 px daha geniş ve 30 px boşlukla 1440'ta yalnız 9 px pay
           kalıyordu; bir punto fark ya da yedek font o payı yer. 24 px'te pay 39 px. Ölçüm aşağıda. */
        gap: 24px;
    }

    .header-menu .mega-menu > li > a,
    .header-menu .mega-menu > li > span {
        padding: 27px 0;
        /* MOCKUP'TAN BİLİNÇLİ SAPMA (Ahmet, 5 Ağu 2026: "neden bu kadar küçükler"). Mockup §1 15px
           diyor ve menü ona uydurulmuştu; ekranda maddeler cılız kaldı. 17 px vendor'ın da varsayılanı. */
        font-size: 17px;
        letter-spacing: .05em;
        /* Menü maddesi TEK SATIRDIR — onaylı header'ın taşıyıcı kuralı (014 mockup §1).
           015'te bozuldu ve kimse ölçmedi: İngilizcede "Fabric Applications" ve "Carpet Applications"
           iki satıra kırılıyordu, diğer dört madde tek satır kalıyordu. Maddeler üstten hizalı olduğu
           için tek satırlılar iki satırlıların İLK satırıyla aynı yere düşüyor, ama kırmızı alt çizgi
           kutunun dibinde olduğundan 104 px ile 125 px arasında ikiye ayrılıyordu — çubuk hem dengesiz
           görünüyor hem hover işareti iki farklı yükseklikte çiziliyordu (Ahmet bildirdi, 12 Eyl 2026).
           Ölçülen tek-satır ihtiyacı / kalan alan: 1280 → 809/864 · 1366 → 809/864 · 1440 → 819/848.
           Türkçe her üç genişlikte de daha dar. */
        white-space: nowrap;
    }
}

/* Dar masaüstü bandı (1280 / 1366 dizüstü) — boşluk artık üstteki kuralla ortak (24 px); burada yalnız
   kapsayıcının kenar payı daralıyor. */
@media (min-width: 1201px) and (max-width: 1439px) {
    .header-lower {
        gap: 12px;
        padding-left: max(16px, calc((100% - 1200px) / 2 + 16px));
        padding-right: max(16px, calc((100% - 1200px) / 2 + 16px));
    }
}

/* Mega panel reveal (002 / US1, FR-005).
   The theme opens a sub-list on li:hover, and the plugin opens the picture panel on an .active class that only
   its click mode ever sets — so with the approved hover configuration the picture panel had no way to open at
   all, and neither panel opened for a keyboard or a touch visitor. Both now answer to :hover for the pointer
   and to .cemay-open, which cemay.js sets when the trigger takes focus or is tapped.
   Deliberately not :focus-within: a panel opened by CSS while the trigger holds focus cannot be dismissed with
   Escape without also moving the focus away, and WCAG 2.1 AA (1.4.13) asks for exactly that.
   1201px, not 1200: that is where the plugin's own stylesheet swaps the bar for the responsive menu. */
@media (min-width: 1201px) {
    .mega-menu > li.cemay-open > .dropdown,
    .mega-menu > li:hover > .dropdown {
        display: block;
    }

    .mega-menu > li.cemay-open > .sublist-wrap {
        display: block;
    }
}

/* ── Mega panel surface (014 / T090.4) ───────────────────────────────────────────────────────────────────
   The plugin's Venture stylesheet paints the panel #2c2c2c and underlines every heading with a skewed
   #f3cc2e bar — the demo theme's own dark-header look. CEMAY's header is white and its accent is red
   (DESIGN.md §1: "bol beyaz alan"; §2: "ana header beyaz, footer açık gri — koyu DEĞİL"; "kırmızı =
   kıvılcım"), so a charcoal slab with a yellow rule hanging off a white bar reads as a different site.
   The panel becomes a white surface on the same card idiom the rest of the site uses: hairline border,
   sharp corners, soft shadow, red accent. */
/* Geniş panel, SAYFAYA göre ortalanır — menüye göre değil (5 Ağu 2026).
   Plugin paneli `left:50%; margin-left:-600px` ile konumluyor ve yüzde, konumlanmış en yakın atadan
   (`.mega-menu`) hesaplanıyordu. Menü logo/CTA genişlikleri eşit olmadığı için sayfa ekseninde değil,
   dolayısıyla panel de kapsayıcının 34px soluna düşüyordu (ölçüldü: panel 102, kapsayıcı 112.5).
   `.mega-menu` static olunca çapa tam genişlikteki `.header-lower`'a kayıyor ve panel kapsayıcıyla
   hizalanıyor. Topic açılırları etkilenmez: onların `li`'si zaten `position: relative` (kendi
   tetikleyicilerinin altına yaslanıyorlar). */
@media (min-width: 1201px) {
    .header-center,
    .header-menu,
    .header-menu .mega-menu {
        position: static;
    }
}

.mega-menu .row-wrapper {
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    box-shadow: 0 4px 12px rgba(20, 20, 25, .08);
    padding: 28px 32px;
}

/* Aynı kabuk, DÖRT panele birden (mockup onayı, 5 Ağu 2026).
   Kusur şuydu: yukarıdaki beyaz yüzey kuralı `.row-wrapper`'a yazılmıştı ve o element yalnız KATEGORİ
   panellerinde (Uygulamalar · Sistem ve Üniteler) var. Hizmetler ve Kurumsal birer Topic bağlantı listesi
   (`.sublist`) ve `.row-wrapper`'ları yok — dolayısıyla Venture'ın kendi koyu açılırında (#2c2c2c zemin,
   #909090 metin, 1200.css:722) kaldılar. Aynı menüde iki görsel dil oluyordu.
   Kural artık bileşenin bir alt türüne değil bütününe yazılıyor.

   Kabuk (kenarlık + kırmızı üst kenar + gölge) yalnız MASAÜSTÜ: `.sublist` mobilde off-canvas
   akordeonunun da gövdesi, orada panel değil çekmecedir ve mockup §5 ona kabuk vermiyor. Sınırlamadan
   önce mobil akordeonun tepesinde kırmızı bir çizgi duruyordu (karede görüldü). */
@media (min-width: 1201px) {
    .header-menu .sublist {
        background: var(--cemay-white);
        border: 1px solid var(--cemay-border);
        border-top: 3px solid var(--cemay-red-500);
        box-shadow: 0 4px 12px rgba(20, 20, 25, .08);
        min-width: 264px;
    }
}

/* Panel header'a YASLI açılır (Ahmet raporu, 6 Ağu 2026).
   Kusur: dört panelin de tepesinde 19px'lik saydam bir şerit vardı ve header ile beyaz yüzey arasından
   sayfanın kendisi (hero) görünüyordu — açılır menü havada duruyor gibiydi. İki ayrı vendor bildiriminden
   geliyor: plugin `MegaMenu.css` `.mega-menu .dropdown{padding:19px 0 0}` (Uygulamalar · Sistem ve Üniteler),
   Venture `1200.css` `.header-menu .sublist-wrap{padding:19px 0 0}` (Hizmetler · Kurumsal).
   Onaylı mockup paneli header'ın hemen altına yaslıyor (`design/014-mockup-header-mega.html`,
   `.stage .drop{top:0}`); K20 karelerinde de tetikleyicinin kırmızı çizgisi panelin üstüne oturuyor.
   Boşluk İÇ boşluk olduğu için imleç köprüsü görevini de görüyordu — sıfırlanınca o alanı panelin kendi
   gövdesi kapladığından köprü korunur, panel imleç aşağı inerken kapanmaz.
   Seçici bilerek `.header-menu` üzerinden (0,3,0): iki vendor kuralı da 0,2,0 ve `MegaMenu.css`
   cemay.css'ten SONRA yükleniyor — eşit özgüllükte vendor kazanırdı. */
@media (min-width: 1201px) {
    .header-menu .mega-menu .dropdown,
    .header-menu .mega-menu .sublist-wrap {
        padding-top: 0;
    }
}

.header-menu .sublist li a {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--cemay-steel-600);
    padding: 11px 22px;
    text-transform: none;
}

.header-menu .sublist li + li > a {
    border-top: 1px solid var(--cemay-border);
}

.header-menu .sublist li:hover > a {
    background: var(--cemay-gray-050);
    color: var(--cemay-red-600);
}

/* vendor'ın açılır ok işareti koyu panel için gri; beyaz yüzeyde metinle aynı aileden olmalı */
.header-menu .sublist li .plus-button:before {
    color: var(--cemay-steel-400);
}

/* ── Off-canvas panel: BEYAZ kabuk (onaylı mockup §5, 5 Ağu 2026) ────────────────────────────────────
   Mockup mobil menüyü de masaüstündeki panel diline bağlıyor: beyaz yüzey, ink-900 kapital etiketler,
   gri chevron, gray-050 akordeon. İlk uygulamada yalnız masaüstü panelleri giydirildi ve mobil vendor'ın
   antrasit off-canvas'ında bırakıldı — yani "dört panel tek dil" kuralı ekranın yarısında duruyordu.
   Ahmet mockup'la canlıyı yan yana koyunca çıktı.
   Kırmızı metin burada güvenli: beyaz üzerinde 5.9:1 (antraside 2.42:1 veriyordu, bkz. .cemay-expert-link). */
@media (max-width: 1200px) {
    /* Sayfanın mobil üst barı. Mockup §5'te `.mob-bar` beyaz zemin + alt hairline; canlıda vendor'ın
       antrasit çubuğuydu. Menü AÇIKKEN üst bar zaten beyaza dönüyordu (`.close-menu`), kapalıyken
       antrasit kalıyordu — aynı çubuk iki durumda iki renkti. */
    .responsive-nav-wrapper {
        background: var(--cemay-white);
        border-bottom: 1px solid var(--cemay-border);
        /* mockup `.mob-bar`: içerik 16px içeriden başlar; canlıda 5px'ti ve hamburger kenara yapışıktı */
        padding-left: 16px;
        padding-right: 16px;
    }

    .responsive-nav-wrapper .menu-title span {
        color: var(--cemay-ink-900);
    }

    /* Logo mobil barda SAYFANIN ekseninde durur (Ahmet, 16 Eyl 2026). Vendor logoyu hamburger'in yanına
       float ediyor: sabit 160px'lik bir kutu, resim de kutunun sol kenarına çakılı (`position: absolute;
       left: 0`) — yani wordmark ekranın eksenine değil, menü düğmesinin bıraktığı yere düşüyor. Kutu
       float akışından çıkarılıp orta çizgiye alındı; bar zaten `position: relative` ve yüksekliğini
       hamburger'den alıyor, o yüzden bar ölçüleri değişmiyor (ölçüldü: resmin dikey yeri aynı kaldı,
       yalnız x 66 → 136; merkez 180 = sayfa merkezi 180). Resim akışa döndüğü için kutu resim kadar
       genişlik alıyor; max-width iki yanda hamburger + oluk kadar yer bırakır, uzun bir wordmark
       düğmenin üstüne binmez. */
    .responsive-nav-wrapper .mobile-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        float: none;
        width: auto;
        max-width: calc(100% - 132px);
    }

    .responsive-nav-wrapper .mobile-logo a {
        width: auto;
    }

    .responsive-nav-wrapper .mobile-logo a img {
        position: static;
        margin: 0 auto;
    }

    .header-menu {
        background: var(--cemay-white);
    }

    .header-menu .close-menu {
        background: var(--cemay-white);
        border-bottom: 1px solid var(--cemay-border);
    }

    .header-menu .close-menu > span {
        color: var(--cemay-ink-900);
    }

    /* Panelin kendi başlık şeridinde de logo ortada (Ahmet, 16 Eyl 2026 — sayfa barının devamı olarak).
       Vendor burada da aynı kalıbı kuruyor: 160px'lik float kutu, resim sol kenara çakılı, iki yanda
       55px'lik simetrik padding (solda gri hamburger, sağda X — ikisi de absolute). Kutu float'tan
       çıkarılıp orta çizgiye ALINAMAZ: şeritte akışta kalan tek öğe bu kutu, absolute yapılınca şerit
       10px'e çöküyor. Bunun yerine kutu 210px'lik içerik alanını kaplıyor ve resim o alanda ortalanıyor;
       padding simetrik olduğu için içerik alanının ekseni panelin ekseniyle aynı (ölçüldü: resim merkezi
       160 = panel merkezi 160, şerit yüksekliği 61 ve resmin dikey yeri değişmedi). */
    .header-menu .close-menu .mobile-logo {
        float: none;
        width: auto;
    }

    .header-menu .close-menu .mobile-logo a {
        width: auto;
    }

    .header-menu .close-menu .mobile-logo a img {
        position: static;
        display: block;
        margin: 0 auto;
    }

    /* seçiciler `.header-menu` üstünden: vendor stilleri cemay.css'ten SONRA yükleniyor, eşit
       özgüllükte onlar kazanıyor (ilk denemede menü koyu kaldı — ölçüldü) */
    .header-menu ul.mega-menu-responsive > li {
        background: var(--cemay-white);
        border-bottom: 1px solid var(--cemay-border);
    }

    .header-menu ul.mega-menu-responsive > li > a,
    .header-menu ul.mega-menu-responsive > li > span {
        font-family: var(--cemay-font-display);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--cemay-ink-900);
        /* mockup `.mob-nav > li > a`: `14px 16px`. Canlıda `16px 38px` vardı — etiketler 38px içeriden
           başlıyordu, mobil bar'ın 16px'lik hizasını tutmuyorlardı. Sağ boşluk chevron'a yer bırakır.
           `!important`: vendor `.header-menu > ul li > a`'ya bunu da `!important` ile yazıyor. */
        padding: 15px 44px 15px 16px !important;
    }

    /* masaüstündeki "KUMAŞ" / "HALI" vurgusunun telefon hâli (yukarıdaki .cemay-menu-key kuralı) */
    .header-menu ul.mega-menu-responsive > li > a .cemay-menu-key {
        font-weight: 700;
        color: var(--cemay-red-600);
    }

    /* vendor'ın venture-font okunu mockup'ın chevron'uyla değiştir: ok "başka sayfaya git" der,
       chevron "burada açılır" — açılan şey akordeon */
    .header-menu ul.mega-menu-responsive > li > .plus-button:before {
        content: none;
    }

    .header-menu ul.mega-menu-responsive > li > .plus-button:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 2px solid var(--cemay-steel-400);
        border-bottom: 2px solid var(--cemay-steel-400);
        transform: rotate(45deg);
    }

    /* `.sublist-wrap` panelin tam boyunu kaplar (313×844 ölçüldü) — arkası koyu kalırsa akordeonun
       altındaki boşluk siyah bir blok olarak duruyor.
       `!important` burada mecburi, süs değil: Venture `.header-menu .sublist-wrap`'e antrasiti
       **`!important` ile** yazıyor (mağaza `body.dark-theme` ile çalışıyor) ve kendi light-theme
       varyantını da aynı şekilde eziyor. Özgüllük yükseltmek yetmedi — ölçüldü. */
    .header-menu ul.mega-menu-responsive > li > .sublist-wrap,
    .header-menu ul.mega-menu-responsive > li > .sublist-wrap .sublist {
        background: var(--cemay-gray-050) !important;
    }

    .header-menu .mega-menu-responsive .sublist li {
        background: transparent;
        border-bottom: 1px solid var(--cemay-border);
    }

    /* mockup `.mob-nav .acc a`: `11px 16px 11px 28px` — akordeon satırları üst seviyeden bir kademe
       içeride. Vendor'ın `!important`'ı buraya da vuruyor (`.header-menu > ul li > a`), o yüzden aynı
       şekilde yazılıyor; ölçüldü: sıfırsız hâlde satırlar 38px'te duruyordu. */
    .header-menu .mega-menu-responsive .sublist a {
        padding: 11px 16px 11px 28px !important;
        font-family: var(--cemay-font-body);
        font-size: 14px;
        /* mockup akordeon satırlarını KAPİTAL yazıyor (ölçüldü: uppercase + .06em); canlıda normal
           harfti. Masaüstü panelindeki liste normal harf kalır — orada 17 satır var, kapital okumayı
           zorlaştırır; mobilde üç satır var ve menü ritmini üst seviyeyle paylaşıyor. */
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--cemay-steel-600);
    }

    .header-menu .mega-menu-responsive .back-button span {
        color: var(--cemay-steel-600);
    }

    .header-menu .mobile-menu-items {
        background: var(--cemay-white);
        border-top: 1px solid var(--cemay-border);
    }

    /* beyaz zeminde marka kırmızısı okunuyor (5.9:1), yani CTA'lar kendi rengine döner ve
       antraside taşınan 2px'lik işaret sol kenarlığa gerek bırakmaz.
       `.header-menu` ön eki şart: temel `.cemay-expert-link` kuralı dosyada BURADAN SONRA geliyor,
       eşit özgüllükte sonraki kazanır ve metin beyaz kalırdı (ölçüldü). */
    .header-menu .cemay-expert-link {
        border-left: 0;
        color: var(--cemay-red-600);
        /* panelin tek sol hizası 16px: menü etiketleri, hamburger ve logo hep oradan başlıyor */
        padding-left: 16px;
    }

    .header-menu .header-selectors-wrapper,
    .header-menu .header-links {
        padding-left: 16px;
    }

    /* dil seçicinin kendi 38px'lik iç boşluğu, panelin 16px hizasını kırıyordu */
    .header-menu .language-selector .current-language-selector {
        padding-left: 0;
    }

    .header-menu .header-links a,
    .header-menu .header-selectors-wrapper,
    .header-menu .header-selectors-wrapper a,
    .header-menu .header-selectors-wrapper span {
        color: var(--cemay-steel-600);
    }

    /* Dil çekmecesi de akordeonun dilinde (Ahmet, 6 Ağu 2026). "Dört panel tek dil" temizliğinde bu
       çekmece atlanmıştı: beyaz off-canvas'ın ortasında vendor'ın #232323 bloğu açılıyordu (ölçüldü).
       Menü akordeonuyla aynı token'lar — gray-050 yüzey, hairline ayraç, 28px'lik bir kademe içeride.
       `!important`: kardeş `.sublist-wrap` kuralında olduğu gibi vendor antrasiti `!important` ile
       yazıyor, özgüllük yükseltmek yetmiyor. */
    .header-menu .language-selector-options {
        background: var(--cemay-gray-050) !important;
        padding: 0;
    }

    .header-menu .language-selector-options .selector-options-item + .selector-options-item {
        border-top: 1px solid var(--cemay-border);
    }

    .header-menu .language-selector-options label {
        padding: 11px 16px 11px 28px;
        font-family: var(--cemay-font-body);
        font-size: 14px;
        color: var(--cemay-steel-600);
    }

    /* seçili dil, masaüstü açılırındaki `is-current` ile aynı işareti taşır */
    .header-menu .language-selector-options input:checked + label {
        color: var(--cemay-ink-900);
        font-weight: 600;
    }
}

/* Mobil akordeonun sihirbaz satırı: masaüstündeki finder şeridinin aynı işi yapan kısa hali, oku da
   oradan alır (014 mockup §5). Kardeşleriyle aynı satır dilinde durur — akordeonda artık üç satır var
   (iki başlık + bu), aralarında hiyerarşi yok.

   Not: burada bir süre başlıkları ürünlerden ayıran ek bir kural vardı. Akordeon 17 ürünü listelerken
   gerekliydi; Ahmet listeyi kısaltınca (5 Ağu 2026) ayıracak ürün kalmadı ve kural kaldırıldı. */
.cemay-finder-menu-item a:after {
    content: "\2192";
    margin-left: 8px;
}

/* the vendor's yellow skewed marker, restated as the design's red segment. Safe to apply to both panels —
   it only recolours and unskews a decoration that is already there. */
.mega-menu .dropdown .title:before {
    width: 28px;
    height: 2px;
    bottom: 0;
    background: var(--cemay-red-500);
    transform: none;
}

/* Type is set per panel, NOT on .mega-menu .dropdown .title: in the Applications panel that heading is
   positioned over the photograph and the vendor prints it white on purpose, so a shared ink-900 rule would
   put dark text on a dark image. The systems panel's headings sit on the white surface and take the site's
   own heading treatment. */
/* TEK ayraç (mockup onayı, 5 Ağu 2026). Önce burada `border-bottom: 1px solid` vardı ve vendor'dan gelen
   `.title:before` kırmızı segmenti de duruyordu: başlığın altında gri hairline + boşluk + öksüz kırmızı
   çizgi + boşluk + liste diziliyordu. İki ayraç aynı işi yapıyor, ritmi de bozuyordu. Gri çizgi kalktı;
   ayraç yalnız kırmızı segment. */
.cemay-mega-systems .dropdown .title {
    padding: 0 0 10px;
    /* vendor'ın kendi kuralı (`1200.css`) başlığa gri bir alt kenarlık veriyor; ilk denemede yalnız BİZİM
       bildirimimiz silinmişti, onlarınki yerinde kaldı ve canlıda hairline sürdü. Kapatmak için açıkça
       sıfırlanır. */
    border-bottom: 0;
    font-family: var(--cemay-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--cemay-ink-900);
}

.cemay-mega-systems .dropdown .title a {
    color: inherit;
}

.cemay-mega-systems .dropdown .title a:hover {
    color: var(--cemay-red-600);
}

.cemay-mega-systems .subcategories .subcategory-item a {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cemay-steel-600);
    text-transform: none;
    padding: 5px 0;
    display: block;
}

.cemay-mega-systems .subcategories .subcategory-item a:hover {
    color: var(--cemay-red-600);
}

/* The systems panel has no photographs — its columns are headings with the category's products under them
   (FR-006). Hiding the picture is not enough on its own: the plugin positions the heading absolutely over
   the image box, so with the image gone the heading would sit on top of the first product link. */
.cemay-mega-systems .picture {
    display: none;
}

/* `relative`, `static` DEĞİL. İkisi de vendor'ın "başlığı görselin üstüne mutlak konumla" kuralını
   bozar, ama `static` kırmızı segmenti (`.title:before`) başlıktan koparıyordu: en yakın konumlanmış
   ata `.picture-title-wrap` oluyor ve segment `bottom:0` ile sarmalayıcının dibine, ilk bağlantının
   hemen üstüne düşüyordu. `relative` hem başlığı akışta tutar hem segmenti kendisine çıpalar. */
.cemay-mega-systems .categories .picture-title-wrap .title {
    position: relative;
}

/* Görsel kutusu gizlenince vendor'ın 40px'lik alt boşluğu ortada kaldı: başlıkla listenin arasında
   sebepsiz bir şerit duruyordu. Kalan 16px başlık bloğunun listeye olan mesafesi. */
.cemay-mega-systems .categories .picture-title-wrap {
    padding-bottom: 16px;
}

.cemay-mega-systems .box {
    padding-bottom: 0;
}

/* Panel tam genişliği HAK ETMELİ (mockup onayı, 5 Ağu 2026).
   İki kısa liste 1136px'e yayılınca her sütunda ~325px ölü boşluk kalıyordu — panel açılıyor, göz
   sağda boşluk görüyordu. Sağdaki üçte bir öne çıkan ürün sütununa verildi; iki liste daraldı ve
   satırlar okunur uzunluğa indi. Kutular vendor'ın `.row`u içinde geldiği için `display:contents`
   ile o sarmalayıcı şeffaflaştırılır (Uygulamalar panelindeki aynı kalıp). */
@media (min-width: 1201px) {
    .cemay-mega-systems .row-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 300px;
        gap: 0 40px;
    }

    .cemay-mega-systems .row {
        display: contents;
    }

    /* seçici `.dropdown` üzerinden (0,4,1): vendor genişliği `.mega-menu .dropdown.boxes-2 .box` ile
       veriyor (0,3,0) ve MegaMenu.css cemay.css'ten SONRA yükleniyor — eşit özgüllükte vendor kazanır */
    .cemay-mega-systems .dropdown .row .box {
        float: none;
        width: auto;
        max-width: none;
        padding: 0;
    }

    /* sütunları ayıran tek hairline — başlıkların altındaki kırmızı segment zaten dikey ritmi veriyor */
    .cemay-mega-systems .dropdown .row .box + .box,
    .cemay-mega-systems .cemay-mega-featured {
        border-left: 1px solid var(--cemay-border);
        padding-left: 40px;
    }
}

/* ── Öne çıkan ürün slider'ı (katalog panellerinin üçüncü sütunu) ────────────────────────────────────
   Slaytların tamamı sunucudan basılır, görünürlüğü sınıf belirler: `display:none` görünmeyen slaydın
   bağlantılarını sekme sırasından da düşürür, bu yüzden ayrıca tabindex yönetmek gerekmiyor.
   JS çalışmazsa ilk slayt görünür ve bağlantısı çalışır (İlke III). */
/* Menünün tamamı vendor'da ortalı ve BÜYÜK HARF (`.header-menu` üstünden miras). Bir menü maddesi için
   doğru, bir ürün kartı için değil: canlıda açıklama yedi satır ortalı kapitalle çıktı ve okunmuyordu.
   Sütun kendi diline döner; kapital yalnız eyebrow ile adda, orada kasıtlı. */
.cemay-mega-featured {
    text-align: left;
    text-transform: none;
}

.cemay-mega-featured-slide {
    display: none;
}

.cemay-mega-featured-slide.is-current {
    display: block;
}

.cemay-mega-featured-frame {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-gray-100);
}

.cemay-mega-featured-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cemay-mega-featured-eyebrow {
    margin: 0 0 6px;
    font-family: var(--cemay-font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cemay-red-600);
}

.cemay-mega-featured-name {
    display: block;
    margin-bottom: 6px;
    font-family: var(--cemay-font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-mega-featured-name:hover {
    color: var(--cemay-red-600);
}

/* Seed'in kısa açıklaması bir ürün sayfası için yazıldı, menü sütunu için değil: Türkçesi 300px'te yedi
   satır sürüyor ve slaytı listelerden uzun yapıyor. Üç satır bir vaat için yeter, gerisi ürün sayfasında. */
.cemay-mega-featured-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cemay-steel-600);
}

.cemay-mega-featured-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cemay-border);
}

.cemay-mega-featured-dots {
    display: flex;
    gap: 6px;
    margin-right: auto;
}

.cemay-mega-featured-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    background: var(--cemay-border-strong);
    cursor: pointer;
}

.cemay-mega-featured-dot[aria-current="true"] {
    background: var(--cemay-red-500);
}

.cemay-mega-featured-arrow {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
    font-size: 13px;
    line-height: 1;
    color: var(--cemay-steel-600);
    cursor: pointer;
}

.cemay-mega-featured-arrow:hover {
    border-color: var(--cemay-red-500);
    color: var(--cemay-red-600);
}

.cemay-mega-featured-dot:focus-visible,
.cemay-mega-featured-arrow:focus-visible {
    outline: 2px solid var(--cemay-red-600);
    outline-offset: 2px;
}

/* The plugin puts its widget zone after the row of columns, inside the dropdown but outside the white panel.
   Until 014 that zone carried a featured brand block and the dropdown was laid out as a row to turn it into a
   fourth column; the block left with constitution VI and only the finder strip remains, which belongs under
   the panel as a full-width band (DESIGN.md §2: charcoal is for dark bands). So the dropdown goes back to a
   plain block and the strip simply follows the panel.
   The dropdown's top padding is the bridge the pointer crosses between the menu entry and the panel — it
   stays padding, not margin, or the panel closes on the way down. */
.cemay-mega-systems .cemay-finder-strip {
    margin-top: 0;
}

/* Mega panel içindeki finder şeridi: panelin sessiz AYAĞI (5 Ağu 2026).
   Beyaz panelin altına yapışık antrasit slab duruyordu — iki yüzey, iki dil. Şerit uygulama sayfalarında
   koyu bant olarak kalır (DESIGN.md §2: antrasit öne çıkan bantlar için); burada panelin bir parçası
   olduğu için onun diline uyar. `.row-wrapper`ın alt hairline'ı ayraç görevini görüyor, bu yüzden
   şeridin kendi üst kenarı yok. */
.mega-menu .dropdown .cemay-finder-strip {
    align-items: center;
    background: var(--cemay-gray-050);
    border: 1px solid var(--cemay-border);
    border-top: 0;
    box-shadow: 0 4px 12px rgba(20, 20, 25, .08);
    padding: 13px 32px;
}

.mega-menu .dropdown .cemay-finder-strip:hover {
    background: var(--cemay-white);
}

.mega-menu .dropdown .cemay-finder-strip-question {
    font-size: 13.5px;
    color: var(--cemay-steel-600);
}

.mega-menu .dropdown .cemay-finder-strip-link {
    margin-left: auto;
    font-size: 13.5px;
    color: var(--cemay-red-600);
}

/* A focus ring that survives the theme's outline:none, on every control CEMAY puts in the header. Keyboard
   visitors have to be able to see where they are (WCAG 2.4.7). */
.mega-menu a:focus-visible,
.mega-menu span:focus-visible,
.cemay-topbar-link:focus-visible,
.close-menu:focus-visible,
.responsive-nav-wrapper .menu-title:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: -3px;
}

/* Set by cemay.js while the off-canvas panel is open: the page behind a modal panel must not scroll under the
   visitor's finger (FR-006). */
.cemay-scroll-locked,
.cemay-scroll-locked body {
    overflow: hidden;
}

/* The single primary action. There is exactly one per view (DESIGN.md §5): everything else in the header is a
   plain link, so this is the only red fill above the fold. */
.cemay-quote-cta {
    display: inline-block;
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 15px;
    /* mockup §1: `padding:13px 26px` + gövde satır yüksekliği (1.65) → 51px buton. `line-height:1` ile
       14px padding 43px veriyordu; buton menü çubuğunun yanında bir tık cılız kalıyordu (ölçüldü) */
    line-height: 1.65;
    white-space: nowrap;
    padding: 13px 26px;
    background: var(--cemay-red-600);
    color: var(--cemay-white);
    text-decoration: none;
    transition: background .15s;
}

.cemay-quote-cta:hover {
    background: var(--cemay-red-700);
    color: var(--cemay-white);
}

.cemay-quote-cta:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* ── Persistent conversion layer (002 / US3, FR-013 / FR-014) ──────────────────────────────────────────────
   One control at a time: the bottom bar below the navigation breakpoint, the floating button above it — the
   same 1201px the mega menu switches at, so there is no width that shows both or neither.
   Both stay under the off-canvas backdrop (z-index 1060), so opening the menu covers them rather than leaving
   a button floating over a dimmed page. */
.cemay-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    background: var(--cemay-white);
    border-top: 1px solid var(--cemay-border);
    box-shadow: 0 -4px 14px rgba(20, 20, 25, .08);
}

/* the bar's call to action fills the width the WhatsApp square leaves */
.cemay-cta-bar .cemay-quote-cta {
    flex: 1;
    text-align: center;
    padding: 13px 18px;
}

.cemay-cta-bar-wa,
.cemay-wa-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cemay-whatsapp);
    text-decoration: none;
}

.cemay-cta-bar-wa {
    flex: 0 0 52px;
}

.cemay-cta-bar-wa:hover,
.cemay-wa-fab:hover {
    background: var(--cemay-whatsapp-dark);
}

.cemay-cta-bar-wa:focus-visible,
.cemay-wa-fab:focus-visible,
.cemay-expert-link:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

.cemay-wa-icon {
    width: 26px;
    height: 26px;
    fill: var(--cemay-white);
}

/* hidden until the wide-screen rule below; the bar carries WhatsApp on narrow screens */
.cemay-wa-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 45;
    display: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(20, 20, 25, .22);
}

.cemay-wa-fab .cemay-wa-icon {
    width: 32px;
    height: 32px;
}

/* the fixed bar would otherwise cover the last stretch of every page */
body {
    padding-bottom: 66px;
}

@media (min-width: 1201px) {
    .cemay-cta-bar {
        display: none;
    }

    .cemay-wa-fab {
        display: flex;
    }

    body {
        padding-bottom: 0;
    }
}

/* The theme's back-to-top control parks in the same corner as the WhatsApp button and lands on top of it
   (its z-index is 1030). Lifted clear of whichever control is showing rather than removed: it is the theme's
   own, it works, and the design says nothing about it either way. */
.scroll-back-button {
    bottom: 78px;
}

@media (min-width: 1201px) {
    .scroll-back-button {
        bottom: 86px;
    }
}

/* "Ask an expert" in the off-canvas panel (FR-015). A quiet link rather than a second button: the panel
   already carries the menu, and the one primary action on the page is "Request a quote".

   Metin BEYAZ, kırmızı DEĞİL (5 Ağu 2026, mobil turda ölçüldü). Marka kırmızısı antrasit panel üzerinde
   2.42:1 veriyordu; WCAG 2.1 AA normal metin için 4.5:1 istiyor (İlke VIII). Lighthouse bunu hiç görmedi,
   çünkü off-canvas paneli açmıyor. Kırmızı, okunmak zorunda olmayan bir işarete taşındı: soldaki 2px'lik
   segment, sütun başlıklarındaki ayracın aynısı. Beyaz aynı zemin üzerinde 12.6:1. */
.cemay-expert-link {
    display: block;
    padding: 14px 20px;
    border-left: 2px solid var(--cemay-red-500);
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 15px;
    color: var(--cemay-white);
    text-decoration: none;
}

/* ── Hero controls (002 / US2, FR-010) ─────────────────────────────────────────────────────────────────────
   Anywhere Sliders renders the slideshow. cemay.js adds the pause control it does not ship and moves the
   plugin's own dots next to it, into the single centred bar the approved design lays out under the hero.
   Moving the dots out of .anywhere-slider drops every vendor rule that pinned them into the bottom-right
   corner over a skewed grey strip, so the bar is styled from scratch here rather than by out-specifying a
   stylesheet the plugin links from inside the body — later in the document, and therefore winning every tie. */
.cemay-hero-ctl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.cemay-hero-ctl .slick-dots {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cemay-hero-ctl .slick-dots li {
    display: flex;
    margin: 0;
}

/* a 9px dot with 24px of hit area around it (WCAG 2.5.5) */
.cemay-hero-ctl .slick-dots button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 0;
    cursor: pointer;
}

/* light, not dark: since 2.15 the bar sits on the slides' own translucent charcoal copy band, where a dark
   dot disappeared */
.cemay-hero-ctl .slick-dots button::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}

.cemay-hero-ctl .slick-active button::before {
    background: var(--cemay-red-500);
}

.cemay-hero-pause {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(26, 26, 28, .35);
    background: rgba(255, 255, 255, .8);
    color: var(--cemay-ink-900);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

.cemay-hero-pause:hover {
    border-color: var(--cemay-ink-900);
}

.cemay-hero-ctl button:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* ── 404 (002 / US6, FR-022) ───────────────────────────────────────────────────────────────────────────────
   Centred, short, and with the two ways forward the design language gives every dead end. */
.cemay-not-found .page-body {
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 16px 72px;
    text-align: center;
    font-family: var(--cemay-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--cemay-steel-600);
    text-transform: none;
    letter-spacing: normal;
}

.cemay-not-found-message {
    margin: 0 0 28px;
}

.cemay-not-found-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.cemay-not-found-link {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 15px;
    color: var(--cemay-red-600);
    text-decoration: none;
}

.cemay-not-found-link:hover {
    text-decoration: underline;
}

.cemay-not-found-link:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* ── Contact page (002 / US5, FR-020 / FR-021) ─────────────────────────────────────────────────────────────
   The offices on the left, the platform's own form on the right; one column below the layout breakpoint. */
/* the theme boxes this page into a centred 750px white card and centres its text; the design gives the
   offices and the form a column each */
.contact-page .cemay-contact-body {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 0 16px 64px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    background: none;
    box-shadow: none;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--cemay-font-body);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--cemay-ink-900);
}

.cemay-contact-body .topic-block {
    padding: 0;
    border-bottom: none;
    text-align: left;
}

/* the theme fixes every field row at 650px and keeps it on one nowrap line so the required marker can sit
   after the field; a full-width field pushes that marker onto a line of its own */
.cemay-contact-form .inputs {
    width: 100%;
    white-space: normal;
}

.cemay-contact-form .inputs .required {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

/* the theme types into these in #909090, which is 3.2:1 on white — under WCAG 1.4.3 both for what the visitor
   types and for the placeholder standing in for it */
.cemay-contact-form .inputs input,
.cemay-contact-form .inputs textarea {
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
    color: var(--cemay-ink-900);
}

.cemay-contact-form .inputs input:focus,
.cemay-contact-form .inputs textarea:focus {
    border-color: var(--cemay-red-500);
    outline: none;
}

/* the theme's placeholder grey is 3.2:1 on white, under the 4.5:1 WCAG 1.4.3 asks for */
.cemay-contact-form .inputs input::placeholder,
.cemay-contact-form .inputs textarea::placeholder {
    color: var(--cemay-steel-600);
    opacity: 1;
}

.cemay-contact-office {
    padding: 20px 0;
    border-bottom: 1px solid var(--cemay-border);
}

.cemay-contact-office h2,
.cemay-contact-form h2 {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--cemay-ink-900);
}

.cemay-contact-office p {
    margin: 0;
    color: var(--cemay-steel-600);
}

.cemay-contact-office a {
    color: var(--cemay-red-600);
    text-decoration: none;
}

.cemay-contact-office a:hover {
    text-decoration: underline;
}

.cemay-contact-intro {
    margin: 0 0 20px;
    color: var(--cemay-steel-600);
}

/* the theme lays the form's labels and fields out for a narrow column; here it has a whole one */
.cemay-contact-form .inputs {
    margin-bottom: 14px;
}

.cemay-contact-form .inputs input,
.cemay-contact-form .inputs textarea {
    width: 100%;
    max-width: none;
}

.cemay-contact-form .contact-us-button {
    background: var(--cemay-red-600);
    color: var(--cemay-white);
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 30px;
    border: none;
    cursor: pointer;
}

.cemay-contact-form .contact-us-button:hover {
    background: var(--cemay-red-700);
}

.cemay-contact-consent {
    margin: 16px 0 0;
    font-size: 12.5px;
    color: var(--cemay-steel-600);
}

/* the same two classes as the rule above, not just one: a media query does not raise specificity, so a
   one-class selector here would lose to it and the page would stay in two columns on a phone */
@media (max-width: 899px) {
    .contact-page .cemay-contact-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Footer (002 / US4, FR-017 / FR-019) ──────────────────────────────────────────────────────────────────
   The approved design's footer: three centred columns on light grey over a newsletter block, the social
   profiles and one copyright line. The theme's own footer rules are written against markup this override no
   longer produces, so almost nothing here fights them. The sales-network band that used to sit above it
   left with 014 — the network is the home page carousel now (FR-010). */
.cemay-footer {
    background: var(--cemay-gray-100);
    color: var(--cemay-steel-600);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    padding-top: 56px;
    /* the theme sets these on the whole footer, which puts an address and a consent notice in capitals */
    text-transform: none;
    letter-spacing: normal;
}

.cemay-footer-columns {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 0 16px 46px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

/* h2 ve h3 birlikte: 012/W-03 ile sütun başlıkları h3'ten h2'ye alındı (footer ana içeriğin
   kardeşi, alt bölümü değil — gövdesinde tek H1 olan sayfalarda H1→H3 atlaması oluşuyordu).
   h3 seçicisi, henüz güncellenmemiş bir işaretleme kalırsa görünüm bozulmasın diye duruyor. */
.cemay-footer h2,
.cemay-footer h3 {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--cemay-ink-900);
    font-size: 15.5px;
    font-weight: 600;
    margin: 0 0 20px;
}

.cemay-footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.cemay-footer-item svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    stroke: var(--cemay-red-600);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cemay-footer a {
    color: var(--cemay-steel-600);
    text-decoration: none;
}

/* a link in a column is its own row, tall enough to hit with a thumb */
.cemay-footer-column a {
    display: block;
    padding: 9px 0;
}

.cemay-footer a:hover {
    color: var(--cemay-red-600);
}

.cemay-footer-newsletter {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px 44px;
    text-align: center;
}

.cemay-footer-newsletter p {
    margin: 0 0 18px;
}

/* the core newsletter box, dressed as the design draws it. Its own heading goes: the column already has one,
   and two headings over one field read as two blocks */
.cemay-footer-newsletter .newsletter > .title {
    display: none;
}

.cemay-footer-newsletter .newsletter-email {
    display: flex;
}

.cemay-footer-newsletter .newsletter-subscribe-text,
.cemay-footer-newsletter input[type="email"] {
    flex: 1;
    height: 50px;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
    padding: 0 16px;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-ink-900);
}

/* Odakta zemin kararıyordu (Ahmet, 6 Ağu 2026). Venture'ın koyu footer'ından kalan
   `.dark-theme .newsletter-email .newsletter-subscribe-text:focus{background:#111}` (styles.css) hâlâ
   eşleşiyor — CEMAY footer'ı beyaza boyandı ama kabuktaki `.dark-theme` sınıfı yerinde duruyor — ve o
   kural (0,4,0) yukarıdaki beyaz zemin kuralından (0,2,0) güçlü. Alan tıklanınca #111'e dönüyor,
   yazılan metin ink-900 kaldığı için 1.1:1'de okunmuyordu (ölçüldü).
   Odak işareti sitenin kendi kalıbına bağlanır: yüzey beyaz kalır, kenarlık kırmızıya döner
   (bkz. `.cemay-contact-form .inputs input:focus`). Seçici 0,4,1 — vendor'ınkine eşit değil, güçlü;
   yükleme sırasına bel bağlamaz. */
.cemay-footer-newsletter .newsletter-email input.newsletter-subscribe-text:focus,
.cemay-footer-newsletter .newsletter-email input[type="email"]:focus {
    background: var(--cemay-white);
    border-color: var(--cemay-red-500);
    color: var(--cemay-ink-900);
    outline: none;
}

/* The theme's own button is a 50px square in the demo yellow with an arrow image baked in — and it sets that
   image from a `.light-theme` rule, which is why this selector carries the extra class to reach it. */
.cemay-footer-newsletter .newsletter-email .newsletter-subscribe-button {
    float: none;
    width: auto;
    height: 50px;
    padding: 0 26px;
    border: none;
    background-color: var(--cemay-red-600);
    background-image: none;
    color: var(--cemay-white);
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.cemay-footer-newsletter .newsletter-email .newsletter-subscribe-button:hover {
    background-color: var(--cemay-red-700);
}

.cemay-footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    border-top: 1px dashed var(--cemay-border-strong);
    border-bottom: 1px dashed var(--cemay-border-strong);
    max-width: var(--cemay-container);
    margin: 0 auto;
}

.cemay-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
}

.cemay-footer-social a:hover {
    border-color: var(--cemay-red-600);
}

.cemay-footer-social svg {
    width: 20px;
    height: 20px;
    fill: var(--cemay-steel-600);
}

/* Instagram is drawn as an outline, the other three as solid glyphs */
.cemay-footer-social .cemay-icon-outline {
    fill: none;
    stroke: var(--cemay-steel-600);
    stroke-width: 1.8;
}

.cemay-footer-social a:hover svg {
    fill: var(--cemay-red-600);
}

.cemay-footer-social a:hover .cemay-icon-outline {
    fill: none;
    stroke: var(--cemay-red-600);
}

.cemay-footer-social a:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* The legal row (005 / FR-002): the three legal pages plus the consent re-opener, one quiet line
   between the social band and the copyright. */
.cemay-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    padding: 18px 16px 0;
    font-size: 13px;
}

.cemay-footer-legal a {
    color: var(--cemay-steel-600);
    text-decoration: none;
}

.cemay-footer-legal a:hover {
    color: var(--cemay-red-600);
    text-decoration: underline;
}

.cemay-footer-legal a:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

.cemay-footer-lower {
    padding: 26px 16px 34px;
    text-align: center;
    font-size: 13px;
}

.cemay-footer-lower > div {
    display: inline;
}

.cemay-footer-lower > div + div::before {
    content: " · ";
}

@media (max-width: 899px) {
    .cemay-footer-columns {
        grid-template-columns: 1fr;
    }
}

/* ── Home page sections (002 / US2) ────────────────────────────────────────────────────────────────────────
   Seeded into Html Widgets as markup, styled here. Each section is scoped to its own class so a block dropped
   into a different zone later cannot leak its layout into the rest of the page (constitution III). */

.cemay-value-band,
.cemay-apps-head,
.cemay-steps-section,
.cemay-reps-section {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 0 16px;
    font-family: var(--cemay-font-body);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--cemay-ink-900);
}

/* Section heading: centred title over a hairline with a red segment in the middle (DESIGN.md §3) */
.cemay-section-head {
    text-align: center;
    padding: 48px 0 8px;
}

.cemay-section-head h2 {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .01em;
    margin: 0;
    color: var(--cemay-ink-900);
}

.cemay-section-line {
    width: 100%;
    max-width: 420px;
    height: 1px;
    margin: 14px auto 0;
    background: var(--cemay-border);
    position: relative;
}

.cemay-section-line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: 64px;
    height: 3px;
    margin-left: -32px;
    background: var(--cemay-red-500);
}

.cemay-section-sub {
    max-width: 720px;
    margin: 16px auto 0;
    color: var(--cemay-steel-600);
}

/* Application cards — the six categories the core HomepageCategories component renders.
   Venture floats them four to a row across the full page width and lays a skewed ribbon in the demo's yellow
   over each picture. The approved design puts three to a row inside the page container, with the name on a
   white bar under the photograph, so the float layout becomes a row of cards and the ribbon becomes that bar.

   B08 / FR-007: with Kumaş Boyama gone there are five, so the second row holds two. A grid would pin them to
   the left of the three above and leave a hole on the right; a wrapping flex row with a thirds-wide basis
   keeps the same three-up rhythm and centres whatever the last row happens to hold. Şemsiye (16 Sep 2026)
   makes six, two full rows; the rule still holds if the count changes again. */
.home-page-category-grid .item-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 8px 16px 0;
}

/* the theme floats these and sizes them in percentages at every breakpoint */
.home-page-category-grid .item-box {
    width: auto;
    float: none;
    margin: 0;
    flex: 0 1 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}

.home-page-category-grid .category-item {
    display: flex;
    flex-direction: column;

    /* The photograph and the name only read as one object if the card's own surface shows around both. The
       frame was already here, but the page behind it is #F0F0F0 and --cemay-border is #E4E4E6 — a contrast
       ratio of 1.09, invisible: the white name bar floated under a picture that ended at nothing (Ahmet,
       16 Sep 2026). Three things carry the card now — an 8px white mat that pulls the picture inside the card
       instead of letting it bleed to the edge, the strong hairline, and the 3px red top edge the design
       system already gives the statistic card (DESIGN.md §4; Ahmet chose this over the plain frame). */
    padding: 8px;
    border: 1px solid var(--cemay-border-strong);
    border-top: 3px solid var(--cemay-red-500);
    background: var(--cemay-white);
    box-shadow: 0 1px 2px rgba(20, 20, 25, .06);
    transition: box-shadow .18s, transform .18s;
}

.home-page-category-grid .category-item:hover {
    box-shadow: 0 10px 28px rgba(20, 20, 25, .1);
    transform: translateY(-3px);
}

/* the picture comes second in the markup; the design puts it above the name */
.home-page-category-grid .category-item .picture {
    order: 1;
}

/* the theme frames category pictures square-ish (66%); the design frames them 16:9 */
.home-page-category-grid .category-item .picture a::before {
    padding-top: 56.25%;
}

.home-page-category-grid .category-item .picture img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.home-page-category-grid .category-item .title {
    order: 2;
    position: static;
    text-align: left;
}

/* the skewed ribbon behind the name */
.home-page-category-grid .category-item .title::before {
    display: none;
}

.home-page-category-grid .category-item .title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    /* 8px of the 18px is the card's mat, so the text keeps its distance from the frame */
    padding: 14px 10px 6px;
    line-height: 1.3;
    white-space: normal;
    font-family: var(--cemay-font-body);
    font-size: 18.5px;
    font-weight: 600;
    text-align: left;
    color: var(--cemay-ink-900);
}

/* The design closes each card with an "İncele →" affordance. Only the arrow is reproduced: a word here would
   be copy with no locale resource behind it, and the whole card is already the link. */
.home-page-category-grid .category-item .title a::after {
    content: "→";
    flex: 0 0 auto;
    color: var(--cemay-red-600);
    font-size: 15px;
    transition: transform .18s;
}

.home-page-category-grid .category-item:hover .title a::after {
    transform: translateX(4px);
}

/* Value band — three promises directly under the hero */
.cemay-value-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 36px;
}

.cemay-value {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cemay-value-icon svg,
.cemay-step-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--cemay-red-600);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cemay-value-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--cemay-border);
    border-radius: 50%;
}

.cemay-value b {
    display: block;
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: .02em;
}

.cemay-value small {
    display: block;
    color: var(--cemay-steel-600);
    font-size: 14px;
    /* the theme uppercases everything in this region; a supporting line reads as shouting in caps */
    text-transform: none;
}

.cemay-section-sub,
.cemay-step p,
.cemay-steps-note,
.cemay-rep-logo {
    text-transform: none;
}

/* Sample trial — three steps */
.cemay-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 28px 0 0;
}

.cemay-step {
    text-align: center;
    padding: 24px 16px;
    background: var(--cemay-gray-050);
}

/* Adım numarası bir EYEBROW DEĞİL, sıra bilgisidir (5 Ağu 2026, Ahmet).
   Önce 12px / .18em ile sitenin üst-etiket kalıbına ("ÖNE ÇIKAN", "UYGULAMA") sokulmuştu. O kalıp
   doğru değil: üst etiket altındaki başlığa yer açmak için kısıktır, buradaki yazı ise kartların
   HANGİ SIRAYLA okunacağını söyleyen tek işaret — özellikle "Nasıl Çalışıyoruz"un 2×3 ızgarasında,
   okurun "önce hangisi" sorusunu başka hiçbir şey yanıtlamıyor. Bileşenin var oluş sebebi
   okunabilir olmalı: bir punto büyük, kalın, tracking daralmış. Başlıkla yarışmaz — rengi ayrı. */
.cemay-step-no {
    display: block;
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 14px;
    font-weight: 700;
    color: var(--cemay-red-600);
}

.cemay-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
    margin: 12px 0;
}

.cemay-step h3 {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-size: 19px;
    margin: 0 0 6px;
}

.cemay-step p {
    margin: 0;
    color: var(--cemay-steel-600);
    font-size: 14px;
}

.cemay-steps-cta {
    text-align: center;
    padding: 28px 0 48px;
}

.cemay-steps-note {
    margin-top: 12px;
    color: var(--cemay-steel-600);
    font-size: 14px;
}

/* Numune denemesi akışı — anasayfa "Satın Almadan Önce Deneyin" (23 Eyl 2026, Ahmet: B seçeneği).
   Üç kartın yerine tek sahne: numune kutuyla gelir → hattın bıçağının altından geçer → masada büyüteçle
   incelenip onaylanır. Kaplama fiziğiyle çizilir: macun bıçağın giriş tarafında durur, film yalnız bıçağı
   geçen kısımda görünür (kırpma bıçağın hizasında, kumaş kırpmanın içinden geçer). Sahnedeki 1-2-3
   rozetleri alttaki listeyle eşleşir. Onaylı mockup design/anasayfa-numune-deneme-mockup.html.

   Temel hâl bitmiş karedir: betiksiz ve hareket azaltmada öyle kalır. cemay.js §trial-flow bölüme
   .is-armed ekleyip ilk kareyi kurar, sahne ekrana girince .is-play ile bir kez oynatır. Bütün koreografi
   tek 4,8 sn'lik zaman çizelgesindedir (yüzdeler aşağıda); 5 sn altında kaldığı için duraklatma düğmesi
   gerekmez (WCAG 2.2.2).

   Boşluk: son uygulama kartından bu başlığa 148 px, nottan sonraki başlığa 96 px vardı; DESIGN.md bölüm
   boşluğu masaüstü 64–96, mobil 40–56. İkisi de masaüstü 64 / mobil 48'e indi. 148'in üç kaynağı vardı:
   Venture'ın ızgara altı 80 px'i, clearfix ::after'ının flex ızgarada açtığı boş satır (20 px aralık) ve
   başlığın 48 px'i. */
.home-page-category-grid {
    margin-bottom: 0;
}

.home-page-category-grid .item-grid::after {
    content: none;
}

.cemay-trial {
    --cemay-tf-t: 4.8s;
    --cemay-tf-play: paused;
}

.cemay-trial .cemay-section-head {
    padding-top: 64px;
}

/* + satış ağı başlığının 48 px üst dolgusu = 64 */
.cemay-trial .cemay-steps-cta {
    padding-bottom: 16px;
}

.cemay-trial-body {
    display: grid;
    gap: 22px;
    padding-top: 24px;
}

.cemay-trial-stage {
    margin: 0;
    padding: 10px 8px 6px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
}

.cemay-trial-stage svg {
    display: block;
    width: 100%;
    height: auto;
}

.cemay-trial-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.cemay-trial-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 20px;
}

.cemay-trial-step:last-child {
    padding-bottom: 0;
}

.cemay-trial-no {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--cemay-red-600);
    background: var(--cemay-red-600);
    color: var(--cemay-white);
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.cemay-trial-step h3 {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    margin: 6px 0 3px;
    color: var(--cemay-ink-900);
}

.cemay-trial-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cemay-steel-600);
    text-transform: none;
    text-align: left;
}

/* adımları bağlayan ray; dolumu zaman çizelgesiyle ilerler */
.cemay-trial-rail {
    position: absolute;
    left: 16px;
    top: 36px;
    bottom: 2px;
    width: 2px;
    background: var(--cemay-border-strong);
}

.cemay-trial-rail i {
    display: block;
    height: 100%;
    background: var(--cemay-red-600);
    transform-origin: top;
}

@media (max-width: 767px) {
    .cemay-trial .cemay-section-head {
        padding-top: 48px;
    }

    /* satış ağı başlığının 48 px'i tek başına mobil bölüm boşluğudur */
    .cemay-trial .cemay-steps-cta {
        padding-bottom: 0;
    }

    /* telefonda başparmak hedefi: buton satırı kaplar */
    .cemay-trial .cemay-quote-cta {
        display: block;
    }
}

@media (min-width: 768px) {
    .cemay-trial-body {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 32px;
        align-items: center;
        padding-top: 28px;
    }

    .cemay-trial-stage {
        padding: 18px 16px 10px;
    }
}

@media (min-width: 1025px) {
    .cemay-trial-body {
        gap: 48px;
    }
}

/* Sahne çizimi */
.cemay-trial svg * {
    transform-box: view-box;
}

.cemay-tf-floor {
    stroke: var(--cemay-border-strong);
    stroke-width: 1;
}

.cemay-tf-plate {
    fill: var(--cemay-gray-050);
    stroke: var(--cemay-border);
}

.cemay-tf-post {
    stroke: var(--cemay-border-strong);
    stroke-width: 1.5;
}

.cemay-tf-roller {
    fill: var(--cemay-gray-100);
    stroke: var(--cemay-charcoal-900);
    stroke-width: 1.5;
}

.cemay-tf-spoke {
    stroke: var(--cemay-charcoal-900);
    stroke-width: 1.5;
    transform-origin: 170px 122px;
}

.cemay-tf-hub,
.cemay-tf-knife {
    fill: var(--cemay-charcoal-900);
}

.cemay-tf-table {
    stroke: var(--cemay-charcoal-900);
    stroke-width: 2;
}

.cemay-tf-fabric {
    fill: #D3CEC4;
    stroke: #9E998F;
    stroke-width: 1;
}

.cemay-tf-film,
.cemay-tf-paste {
    fill: var(--cemay-red-500);
}

.cemay-tf-carton {
    fill: var(--cemay-white);
    stroke: var(--cemay-charcoal-900);
    stroke-width: 1.5;
}

.cemay-tf-tape {
    fill: var(--cemay-red-050);
}

.cemay-tf-flap {
    stroke: var(--cemay-charcoal-900);
    stroke-width: 2;
    stroke-linecap: round;
}

.cemay-tf-lens {
    fill: var(--cemay-white);
    fill-opacity: .25;
    stroke: var(--cemay-charcoal-900);
    stroke-width: 2;
}

.cemay-tf-handle {
    stroke: var(--cemay-charcoal-900);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.cemay-tf-ok {
    fill: var(--cemay-success);
}

.cemay-tf-tick {
    fill: none;
    stroke: var(--cemay-white);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cemay-tf-badge circle {
    fill: var(--cemay-red-600);
}

.cemay-tf-badge text {
    fill: var(--cemay-white);
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 13px;
    text-anchor: middle;
    dominant-baseline: central;
}

/* bitmiş karenin konumları */
.cemay-tf-sw {
    transform: translate(292px, 105px);
}

.cemay-tf-fl {
    transform-origin: 24px 104px;
    transform: rotate(-135deg);
}

.cemay-tf-fr {
    transform-origin: 80px 104px;
    transform: rotate(135deg);
}

.cemay-tf-mag {
    transform: translate(288px, 96px);
}

.cemay-tf-chk {
    transform: translate(318px, 76px);
}

/* Oynatma. Animasyonlar .is-armed ile duraklatılmış ilk karede kurulur; .is-play aynı değişkeni
   çevirerek hepsini birlikte başlatır. */
.cemay-trial.is-play {
    --cemay-tf-play: running;
}

.cemay-trial.is-armed .cemay-tf-box {
    animation: cemay-tf-box var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-fl {
    animation: cemay-tf-fl var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-fr {
    animation: cemay-tf-fr var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-sw {
    animation: cemay-tf-sw var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-spoke {
    animation: cemay-tf-spoke var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-mag {
    animation: cemay-tf-mag var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-chk {
    animation: cemay-tf-chk var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-b2 circle {
    animation: cemay-tf-fill2 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-tf-b3 circle {
    animation: cemay-tf-fill3 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-trial-s2 .cemay-trial-no {
    animation: cemay-tf-no2 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-trial-s3 .cemay-trial-no {
    animation: cemay-tf-no3 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-trial-s2 h3 {
    animation: cemay-tf-ink2 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-trial-s3 h3 {
    animation: cemay-tf-ink3 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-trial-r1 i {
    animation: cemay-tf-r1 var(--cemay-tf-t) both var(--cemay-tf-play);
}

.cemay-trial.is-armed .cemay-trial-r2 i {
    animation: cemay-tf-r2 var(--cemay-tf-t) both var(--cemay-tf-play);
}

/* Zaman çizelgesi (4,8 sn): 0–1,9 sn adım 1 — kutu gelir (%0–12,5), kapaklar açılır (–%18,75), numune çıkıp
   hattın girişine iner (–%39,6) · 1,9–3,9 sn adım 2 — numune bıçağın altından geçer (–%68,75), masaya
   gider (–%81,25) · 3,9–4,8 sn adım 3 — büyüteç numuneyi tarar (–%91,7), onay çıkar. */
@keyframes cemay-tf-box {
    0% { transform: translateX(-130px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    12.5%, 100% { transform: translateX(0); }
}

@keyframes cemay-tf-fl {
    0%, 12.5% { transform: rotate(0); animation-timing-function: ease-out; }
    18.75%, 100% { transform: rotate(-135deg); }
}

@keyframes cemay-tf-fr {
    0%, 12.5% { transform: rotate(0); animation-timing-function: ease-out; }
    18.75%, 100% { transform: rotate(135deg); }
}

/* kutu gelirken numune içindedir (kutuyla birlikte kayar) */
@keyframes cemay-tf-sw {
    0% { transform: translate(-78px, 122px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    12.5%, 18.75% { transform: translate(52px, 122px); animation-timing-function: ease-out; }
    29.2% { transform: translate(52px, 86px); animation-timing-function: ease-in-out; }
    39.6% { transform: translate(112px, 105px); animation-timing-function: linear; }
    68.75% { transform: translate(230px, 105px); animation-timing-function: ease-in-out; }
    81.25%, 100% { transform: translate(292px, 105px); }
}

/* kumaş üstten sağa aktığı için silindir saat yönünde döner */
@keyframes cemay-tf-spoke {
    0%, 39.6% { transform: rotate(0); }
    68.75%, 100% { transform: rotate(430deg); }
}

@keyframes cemay-tf-mag {
    0%, 81.25% { transform: translate(274px, 96px); opacity: 0; }
    84% { opacity: 1; animation-timing-function: ease-in-out; }
    91.7%, 100% { transform: translate(288px, 96px); opacity: 1; }
}

@keyframes cemay-tf-chk {
    0%, 91.7% { transform: translate(318px, 76px) scale(0); }
    97% { transform: translate(318px, 76px) scale(1.15); }
    100% { transform: translate(318px, 76px) scale(1); }
}

@keyframes cemay-tf-fill2 {
    0%, 39.5% { fill: var(--cemay-border-strong); }
    39.7%, 100% { fill: var(--cemay-red-600); }
}

@keyframes cemay-tf-fill3 {
    0%, 81.1% { fill: var(--cemay-border-strong); }
    81.3%, 100% { fill: var(--cemay-red-600); }
}

/* bekleyen adım: beyaz daire, başlık çelik gri (#F0F0F0 zeminde 5,5:1 — AA) */
@keyframes cemay-tf-no2 {
    0%, 39.5% { background: var(--cemay-white); color: var(--cemay-steel-600); border-color: var(--cemay-border-strong); }
    39.7%, 100% { background: var(--cemay-red-600); color: var(--cemay-white); border-color: var(--cemay-red-600); }
}

@keyframes cemay-tf-no3 {
    0%, 81.1% { background: var(--cemay-white); color: var(--cemay-steel-600); border-color: var(--cemay-border-strong); }
    81.3%, 100% { background: var(--cemay-red-600); color: var(--cemay-white); border-color: var(--cemay-red-600); }
}

@keyframes cemay-tf-ink2 {
    0%, 39.5% { color: var(--cemay-steel-600); }
    39.7%, 100% { color: var(--cemay-ink-900); }
}

@keyframes cemay-tf-ink3 {
    0%, 81.1% { color: var(--cemay-steel-600); }
    81.3%, 100% { color: var(--cemay-ink-900); }
}

@keyframes cemay-tf-r1 {
    0%, 29.2% { transform: scaleY(0); }
    39.6%, 100% { transform: scaleY(1); }
}

@keyframes cemay-tf-r2 {
    0%, 68.75% { transform: scaleY(0); }
    81.25%, 100% { transform: scaleY(1); }
}

/* betik kurduktan sonra hareket azaltma açılırsa da bitmiş kareye döner; yukarıdaki kuralların
   özgüllüğü (0,3,0) bu genel seçiciden yüksek olduğu için !important */
@media (prefers-reduced-motion: reduce) {
    .cemay-trial.is-armed * {
        animation: none !important;
    }
}

/* Sales network rail (014 / FR-010 — B04). Region first, logo when we have one (research decision 2).
   Ten regions no longer fit a six-up grid, and the approved reference is the V2 "Manufacturers" strip: one
   row, some of it visible, the rest reached by scrolling. Built with scroll-snap rather than a carousel
   plugin (research R1) — the region array lives in code, and the ready-made carousels take their items from
   their own DB records, which would fork the single source. */
.cemay-reps-rail {
    position: relative;
    padding: 28px 0 56px;
}

.cemay-reps {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-x: auto;
    /* proximity, not mandatory: mandatory snapping fights a programmatic scroll — the arrow buttons'
       scrollBy was pulled straight back to the nearest snap point, which from the start is the origin, so
       the buttons did nothing. Proximity still aligns a drag or a flick without hijacking the buttons. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* the row is the scroll container; hide the bar but keep the scrolling */
    scrollbar-width: none;
}

.cemay-reps::-webkit-scrollbar {
    display: none;
}

/* the rail's only motion is its own scrolling, so the preference is honoured entirely here */
@media (prefers-reduced-motion: reduce) {
    .cemay-reps {
        scroll-behavior: auto;
    }
}

.cemay-reps:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

.cemay-rep {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
}

.cemay-rep-region {
    background: var(--cemay-charcoal-900);
    color: var(--cemay-white);
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .04em;
    text-align: center;
    padding: 10px 8px;
}

.cemay-rep-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 84px;
    padding: 12px;
    color: var(--cemay-steel-400);
    font-size: 12px;
    text-align: center;
}

.cemay-rep-kind {
    border-top: 1px solid var(--cemay-border);
    padding: 8px 10px;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cemay-steel-400);
    text-align: center;
}

/* Arrow buttons. cemay.js unhides them only when the row actually overflows, so a viewport wide enough to
   show every region never gets a control that would do nothing. */
.cemay-rail-nav {
    position: absolute;
    top: calc(50% - 14px);
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cemay-border-strong);
    background: var(--cemay-white);
    color: var(--cemay-ink-900);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 20, 25, .12);
    transition: background .15s, color .15s, opacity .15s;
}

.cemay-rail-nav:hover {
    background: var(--cemay-red-600);
    border-color: var(--cemay-red-600);
    color: var(--cemay-white);
}

.cemay-rail-nav:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

.cemay-rail-nav[disabled] {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.cemay-rail-prev {
    left: -18px;
}

.cemay-rail-next {
    right: -18px;
}

@media (max-width: 1024px) {
    /* the rail keeps scrolling on narrow screens — it just shows fewer cards at a time, and the arrow
       buttons move inside the row where there is no longer room beside it */
    .cemay-rep {
        flex-basis: calc((100% - 2 * 16px) / 3);
    }

    .cemay-rail-prev {
        left: 4px;
    }

    .cemay-rail-next {
        right: 4px;
    }

    .home-page-category-grid .item-box {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .cemay-value-band,
    .cemay-steps {
        grid-template-columns: 1fr;
    }

    /* Şerit tek sütuna inince metin SOLA yaslanır (5 Ağu 2026, Ahmet karede gördü).
       Tema bu bölgeyi ortalıyor; üç sütun yan yanayken ortalama doğru, ama alt alta gelince ikon
       solda sabit kalıp metin ortalanıyordu — ölçüldü: ikonlar hep 16px'te, başlıklar 97 / 82 / 127,
       alt metinler 82 / 99 / 86. Altı ayrı sol kenar. İkonu solda olan bir satır iki sütunlu bir
       liste gibi okunmalı: tek ikon hizası, tek metin hizası. */
    .cemay-value,
    .cemay-value b,
    .cemay-value small {
        text-align: left;
    }
}

@media (max-width: 639px) {
    .cemay-rep {
        flex-basis: calc((100% - 16px) / 1.6);
    }
}

/* the representative cards still read two to a row on a phone; a card with a photograph and a
   name in it does not (the design drops these to one from 640px down) */
@media (max-width: 639px) {
    .home-page-category-grid .item-box {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Quote-only catalog (US1 → revisited by 003/US2, exactly as this rule's old comment required).
   002 hid .overview-buttons outright: with cart/wishlist suppressed server-side it was an empty wrapper
   costing 60px of blank space. 003's dual CTA (CemayProductCtaViewComponent) now renders inside it on
   every product page, so the wrapper is never empty again and the blanket hide is gone. */

/* Anonymous storefront (US1 / FR-014).
   Registration is disabled server-side (CemayCatalogModeSeeder -> UserRegistrationType.Disabled), which
   removes the Register entry point and blocks its page natively. There is no native toggle for the Login /
   My account / Logout links, so their header entry points are hidden here — this covers both the desktop and
   the mobile HeaderLinks instances (Venture renders the component twice). display:none also drops them from
   the accessibility tree. The /login route stays reachable by URL, so admin sign-in and the /Admin area are
   unaffected (admin access is outside this restriction). */
.header-links-box-top .header-link-wrapper.login,
.header-links-box-top .header-link-wrapper.account,
.header-links-box-top .header-link-wrapper.logout {
    display: none;
}

/* With all three links gone the box itself is empty, and the theme still gives it a 38px grey panel next to
   the call to action (002). Every child it can hold is hidden above, so the wrapper goes with them. */
.header-right .header-links-box-top {
    display: none;
}

/* The wishlist entry point, in the second box the theme renders under the first (002 / T130 finding).
   The site has no wishlist (constitution V) and the customer role has no permission for one, so the link led
   to an empty page behind a heart icon next to the call to action. The box holds nothing else. */
.header-links-box-bottom {
    display: none;
}

/* ══ 003 / US1 — Application page template (CategoryTemplate.CemayApplication) ═════════════════════════════
   Five stacked sections: intro → machine cards → references → sample trial → quote. Everything is scoped
   under .cemay-application-page so nothing leaks into the grid-template category pages (İlke III).
   Mobile-first single column; the intro figure moves beside the text from 768px up. One primary CTA per
   view (DESIGN.md §5): the closing quote button reuses .cemay-quote-cta, the sample CTA is the quiet
   outline variant below. */

.cemay-application-page {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 0 16px 56px;
    font-family: var(--cemay-font-body);
    color: var(--cemay-ink-900);
    text-align: left;
    /* Venture uppercases the whole body and expects components to opt out; this page is prose, so it
       does — the headings and CTAs below re-apply their own uppercase. */
    text-transform: none;
}

.cemay-application-page h1 {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 18px;
    color: var(--cemay-charcoal-900);
}

.cemay-application-page h2 {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 21px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--cemay-charcoal-900);
}

.cemay-app-intro {
    padding: 28px 0 32px;
}

.cemay-app-intro-grid {
    display: grid;
    gap: 22px;
}

.cemay-app-description {
    font-size: 16px;
    line-height: 1.65;
    color: var(--cemay-steel-600);
    max-width: 70ch;
}

.cemay-app-description p {
    margin: 0 0 14px;
}

.cemay-app-description p:last-child {
    margin-bottom: 0;
}

.cemay-app-description strong {
    color: var(--cemay-ink-900);
}

.cemay-app-hero {
    margin: 0;
}

.cemay-app-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* Lines section (10 Oct 2026, approved mockup A): the application's own lines above the infographic as
   numbered white cards with a red top rule — five in one row on a wide screen, full-width rows with an
   arrow below that. The number is a CSS counter and the cue is aria-hidden: the link reads as the name. */
.cemay-app-lines {
    padding: 32px 0;
    border-top: 1px solid var(--cemay-border);
}

.cemay-application-page .cemay-app-lines h2 {
    margin-bottom: 18px;
}

.cemay-app-lines-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cemay-app-line;
}

.cemay-app-lines-list li {
    display: flex;
    counter-increment: cemay-app-line;
}

.cemay-app-lines-list a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border-strong);
    border-top: 3px solid var(--cemay-red-500);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cemay-app-lines-list a::before {
    content: counter(cemay-app-line, decimal-leading-zero);
    font-family: var(--cemay-font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--cemay-red-600);
}

.cemay-app-lines-name {
    flex: 1;
    font-family: var(--cemay-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cemay-ink-900);
}

/* the cue shrinks to its arrow on a narrow row; the word comes back with the card layout */
.cemay-app-lines-more {
    font-size: 0;
    color: var(--cemay-red-600);
}

.cemay-app-lines-more::after {
    content: '\2192';
    font-size: 20px;
    font-weight: 700;
}

.cemay-app-lines-list a:hover {
    border-color: var(--cemay-red-500);
    box-shadow: 0 4px 12px rgba(26, 26, 28, .08);
}

.cemay-app-lines-list a:hover .cemay-app-lines-name {
    color: var(--cemay-red-600);
}

.cemay-app-lines-list a:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

@media (min-width: 1025px) {
    .cemay-app-lines-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
    }

    .cemay-app-lines-list a {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 14px;
    }

    .cemay-app-lines-name {
        font-size: 18px;
    }

    .cemay-app-lines-more {
        font-family: var(--cemay-font-display);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .cemay-app-lines-more::after {
        content: none;
    }
}

/* Infographic section (26 Sep 2026, approved mockup C): full width under the intro. The heading is
   centred; everything under it shares one 800 px column — the width at which the graphic's print reads —
   so the lead, the picture and the steps line up on the same edges. Body text stays left-aligned (FR-016). */
.cemay-app-infographic {
    padding: 32px 0;
    border-top: 1px solid var(--cemay-border);
}

.cemay-application-page .cemay-app-infographic h2 {
    text-align: center;
    margin-bottom: 16px;
}

.cemay-app-infographic > :not(h2):not(script) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cemay-app-infographic-lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--cemay-steel-600);
    margin-bottom: 20px;
}

.cemay-app-infographic-figure {
    margin-top: 0;
    margin-bottom: 28px;
}

.cemay-app-infographic-figure a {
    display: block;
}

.cemay-app-infographic-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
}

.cemay-app-infographic-figure a:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.cemay-app-infographic-figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--cemay-steel-600);
}

.cemay-app-infographic-steps {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
    counter-reset: cemay-infographic-step;
}

.cemay-app-infographic-steps li {
    position: relative;
    padding-left: 42px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
    counter-increment: cemay-infographic-step;
}

.cemay-app-infographic-steps li::before {
    content: counter(cemay-infographic-step);
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cemay-red-600);
    color: var(--cemay-white);
    font-family: var(--cemay-font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.cemay-app-infographic-steps strong {
    display: block;
    font-family: var(--cemay-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cemay-ink-900);
    margin-bottom: 2px;
}

.cemay-app-infographic-note {
    font-size: 15px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
    margin-top: 0;
    margin-bottom: 16px;
}

.cemay-app-infographic-more {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.cemay-app-infographic-more a {
    color: var(--cemay-charcoal-900);
    border-bottom: 2px solid var(--cemay-red-500);
    padding-bottom: 2px;
    text-decoration: none;
}

.cemay-app-infographic-more a:hover {
    color: var(--cemay-red-600);
}

/* The same section closing a line's product body (12 Oct 2026, CemayApplicationPages). The description's
   Venture rules — Lato in grey, a numbered list with its indent, 15 px paragraph margins — would number the
   steps twice and grey the heading, so they are put back to the application page's: the section reads the
   same in both places, as the line figures above it do. */
.full-description .cemay-app-infographic {
    font-family: var(--cemay-font-body);
    color: var(--cemay-ink-900);
}

.full-description .cemay-app-infographic h2 {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 21px;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--cemay-charcoal-900);
    text-align: center;
}

.full-description .cemay-app-infographic-lead {
    margin-top: 0;
    margin-bottom: 20px;
}

.full-description .cemay-app-infographic-steps {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
}

.full-description .cemay-app-infographic-note {
    margin-top: 0;
    margin-bottom: 16px;
}

.full-description .cemay-app-infographic-more {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--cemay-ink-900);
}

.cemay-app-machines,
.cemay-app-references {
    padding: 32px 0;
    border-top: 1px solid var(--cemay-border);
}

.cemay-app-references p,
.cemay-app-sample p:not(.cemay-eyebrow) {
    font-size: 16px;
    line-height: 1.65;
    color: var(--cemay-steel-600);
    max-width: 70ch;
    margin: 0 0 18px;
}

/* 014 (approved mockup): the sample invitation and the service weave as a pair. The services used to be a
   thin grey strip under the sample block and read as a footnote. 26 Sep 2026 (mockup B): the pair became one
   card — red top accent, white sample half, grey service half, equal heights. The earlier dark service panel
   was shorter than the sample panel beside it and sat right above the dark quote band, so it read as a
   stray block rather than half of the offer. The two halves draw the card between them: on mobile the
   sample's bottom border is the seam, from 768px its right border is. */
.cemay-app-panels {
    display: grid;
    margin: 32px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--cemay-border);
}

.cemay-app-panel {
    border: 1px solid var(--cemay-border);
    background: var(--cemay-white);
    padding: 26px 28px;
}

.cemay-app-sample {
    border-top: 3px solid var(--cemay-red-500);
}

.cemay-app-panel-services {
    background: var(--cemay-gray-050);
    border-top: 0;
}

/* the strip renders nothing before the 008 seed or with every service unpublished — no empty grey half */
.cemay-app-panel-services:not(:has(.cemay-service-strip)) {
    display: none;
}

/* the strip partial keeps its own markup; inside the card it drops its frame, its title takes the mono
   eyebrow voice of the sample half, and the links become full-width rows closed by the site's arrow */
.cemay-app-panel-services .cemay-service-strip {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.cemay-app-panel-services .cemay-service-strip-title {
    font-family: var(--cemay-font-mono);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .08em;
    color: var(--cemay-red-600);
    margin: 0 0 10px;
}

.cemay-app-panel-services .cemay-service-strip-links {
    display: block;
}

.cemay-app-panel-services .cemay-service-strip-links li {
    border-top: 1px solid var(--cemay-border);
}

.cemay-app-panel-services .cemay-service-strip-links li:last-child {
    border-bottom: 1px solid var(--cemay-border);
}

.cemay-app-panel-services .cemay-service-strip-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-app-panel-services .cemay-service-strip-links a::after {
    content: "→";
    flex: 0 0 auto;
    color: var(--cemay-red-600);
    transition: transform .18s;
}

.cemay-app-panel-services .cemay-service-strip-links a:hover {
    color: var(--cemay-red-600);
    text-decoration: none;
}

.cemay-app-panel-services .cemay-service-strip-links a:hover::after {
    transform: translateX(4px);
}

.cemay-app-panel-services .cemay-service-strip-links a:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* the closing band the mockup ends on — full-bleed charcoal, one primary action. The page box is
   container-width, so the band breaks out with the standard viewport trick; body carries overflow-x: clip
   (see the sticky-header note), which is what keeps that from producing a sideways scrollbar. */
.cemay-app-quote {
    background: var(--cemay-charcoal-900);
    color: var(--cemay-white);
    width: 100vw;
    margin: 44px 0 0 calc(50% - 50vw);
    padding: 44px 0;
    text-align: center;
}

.cemay-app-quote-inner {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 0 16px;
}

.cemay-app-quote h2 {
    color: var(--cemay-white);
}

.cemay-app-quote p {
    font-size: 16px;
    line-height: 1.65;
    color: #D7D8DA;
    max-width: 62ch;
    margin: 0 auto 22px;
}

/* The quiet counterpart of .cemay-quote-cta: same type voice, outline instead of the red fill, so the
   page still has exactly one primary action. */
.cemay-app-cta-secondary {
    display: inline-block;
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    padding: 12px 24px;
    border: 2px solid var(--cemay-charcoal-900);
    background: transparent;
    color: var(--cemay-charcoal-900);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.cemay-app-cta-secondary:hover {
    background: var(--cemay-charcoal-900);
    color: var(--cemay-white);
}

.cemay-app-cta-secondary:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .cemay-application-page h1 {
        font-size: 38px;
    }

    .cemay-app-intro-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
        gap: 32px;
        align-items: center;
    }

    /* the steps in two columns, filled top to bottom (1–3 | 4–6), as the graphic reads. A grid rather than
       CSS columns: column balancing split three steps by text height (1 | 2–3 on one page, 1–2 | 3 on
       another); the view sets the row count so the first column always takes the larger half. */
    .cemay-app-infographic-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(var(--cemay-step-rows, 3), auto);
        grid-auto-flow: column;
        column-gap: 40px;
    }

    .cemay-app-panels:has(.cemay-service-strip) {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    .cemay-app-panel-services {
        border-top: 3px solid var(--cemay-red-500);
        border-left: 0;
    }
}

/* ══ 014 / FR-008 — Uygulamalar hub (B15; onaylı mockup 4 Ağu 2026) ════════════════════════════════════
   The root category page. Everything is scoped under .cemay-app-hub-page (İlke III). Charcoal hero →
   five area cards → finder strip; the machines live one level down, on the application pages. */

.cemay-app-hub-page {
    font-family: var(--cemay-font-body);
    color: var(--cemay-ink-900);
    text-align: left;
    text-transform: none;
    padding-bottom: 56px;
}

/* DESIGN.md §3: the mono eyebrow. Shared by the hub and the application detail hero. */
.cemay-eyebrow {
    font-family: var(--cemay-font-mono);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cemay-red-600);
    margin: 0 0 10px;
}

.cemay-hub-hero {
    background: var(--cemay-charcoal-900);
    color: var(--cemay-white);
    padding: 48px 0;
    margin-bottom: 8px;
}

.cemay-hub-hero-inner {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 0 16px;
}

.cemay-hub-hero .cemay-eyebrow {
    /* red-600 on charcoal fails contrast; the tint the design uses for accents on dark surfaces */
    color: #FF8A87;
}

.cemay-hub-hero h1 {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--cemay-white);
}

.cemay-hub-hero-lead {
    color: #D7D8DA;
    font-size: 16.5px;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0 0 24px;
}

.cemay-hub-hero-lead p {
    margin: 0 0 12px;
}

.cemay-hub-hero-lead p:last-child {
    margin-bottom: 0;
}

.cemay-hub-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.cemay-hub-hero-ghost {
    display: inline-block;
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    padding: 13px 26px;
    border: 1px solid rgba(255, 255, 255, .6);
    color: var(--cemay-white);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.cemay-hub-hero-ghost:hover {
    border-color: var(--cemay-white);
    background: rgba(255, 255, 255, .08);
    color: var(--cemay-white);
}

.cemay-hub-hero-ghost:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

.cemay-hub-areas,
.cemay-hub-finder {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 44px 16px 0;
}

/* five cards over three columns leave two on the last row; centre it (same rule as the home grid — B08) */
.cemay-hub-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cemay-hub-card {
    flex: 0 1 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    transition: box-shadow .18s, transform .18s;
}

.cemay-hub-card:hover {
    box-shadow: 0 10px 28px rgba(20, 20, 25, .1);
    transform: translateY(-3px);
}

.cemay-hub-card-picture {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--cemay-gray-100);
}

.cemay-hub-card-picture::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.cemay-hub-card-picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.cemay-hub-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 18px 20px 20px;
}

.cemay-hub-card h3 {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 19px;
    line-height: 1.2;
    margin: 0;
}

.cemay-hub-card h3 a {
    color: var(--cemay-ink-900);
    text-decoration: none;
}

.cemay-hub-card h3 a:hover {
    color: var(--cemay-red-600);
}

.cemay-hub-card-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
}

.cemay-hub-card-desc p {
    margin: 0;
}

.cemay-hub-card-go {
    margin-top: auto;
    font-family: var(--cemay-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 14px;
    color: var(--cemay-red-600);
}

/* the way out for a visitor who cannot place their product in any of the five */
.cemay-hub-finder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cemay-hub-finder > p {
    margin: 0;
    flex: 1 1 320px;
    background: var(--cemay-red-050);
    border-left: 3px solid var(--cemay-red-500);
    padding: 18px 22px;
    color: var(--cemay-red-700);
    font-weight: 500;
}

.cemay-hub-finder-cta {
    display: inline-block;
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    padding: 13px 26px;
    border: 1px solid var(--cemay-charcoal-900);
    background: var(--cemay-white);
    color: var(--cemay-ink-900);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.cemay-hub-finder-cta:hover {
    background: var(--cemay-charcoal-900);
    color: var(--cemay-white);
}

.cemay-hub-finder-cta:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .cemay-hub-card {
        flex-basis: calc((100% - 22px) / 2);
        max-width: calc((100% - 22px) / 2);
    }
}

@media (min-width: 1025px) {
    .cemay-hub-hero {
        padding: 60px 0 56px;
    }

    .cemay-hub-hero h1 {
        font-size: 44px;
    }

    .cemay-hub-card {
        flex-basis: calc((100% - 44px) / 3);
        max-width: calc((100% - 44px) / 3);
    }
}

/* ══ 003 / US2 — Product page: grouped spec table + the dual CTA ═══════════════════════════════════════════
   The spec-header row is core markup the theme override had dropped (restored in
   Views/Product/_ProductSpecifications.cshtml); these rules give the Mekanik/Elektrik/Proses group rows the
   design system's voice. The dual CTA sits in the overview button zone: the quote button is the shared
   .cemay-quote-cta, the brochure the outline variant — still one primary per view (DESIGN.md §5). */

.product-specs-box .spec-header .spec-group-name {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 15px;
    color: var(--cemay-charcoal-900);
    background: var(--cemay-gray-100);
    border-left: 3px solid var(--cemay-red-600);
    padding: 10px 14px;
}

.product-specs-box .spec-name {
    color: var(--cemay-steel-600);
}

.product-specs-box .spec-value {
    color: var(--cemay-ink-900);
}

/* The theme strips outlines across the product page, so its keyboard-operable controls — the tab
   strip, the gallery arrows and thumbnails, the CTAs — gave no visual answer to WCAG 2.4.7. One
   scoped ring for keyboard focus only; the mouse path keeps the theme's clean look. */
.product-details-page a:focus-visible,
.product-details-page button:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* The spec table's restored column headers (see _ProductSpecifications.cshtml) are for assistive
   tech; Venture has no rule for the core's .hidden-row, which would leave them painted above the
   group rows. Clipped rather than display:none — hidden rows leave the accessibility tree too. */
.product-specs-box thead .hidden-row th {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cemay-product-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.cemay-product-cta .cemay-quote-cta,
.cemay-product-cta .cemay-app-cta-secondary {
    text-align: center;
}

@media (max-width: 480px) {
    /* the two actions stack on narrow phones so neither ever wraps mid-label */
    .cemay-product-cta .cemay-quote-cta,
    .cemay-product-cta .cemay-app-cta-secondary {
        flex: 1 1 100%;
    }
}

/* ── Ürün detay: önceki / sonraki ürün (PrevNextProduct) ──────────────────────────────────────────────────
   Vendor iki bağlantıyı yarım genişlikte float'lıyor, yüksekliği metne bırakıyordu; uzun ad iki satıra
   kırılınca kutular 38 / 55 px çıkıyordu (Ahmet, 23 Eyl 2026). Onaylı mockup B: üstte "Önceki / Sonraki
   ürün" etiketi, altında en fazla iki satır ürün adı, iki kart eşit genişlik ve yükseklikte. Ad sunucuda
   artık kesilmiyor (CemayCatalogModeSeeder → ProductTitleLength), taşarsa burada iki satırda kırpılır.
   Vendor stil dosyası gövdede, cemay.css'ten SONRA yüklenir — kurallar bu yüzden .cemay-prev-next ile bir
   sınıf ağır başlar. Kapsayıcı vendor view'ına eklendi (PrevNextProduct.cshtml). */
@media (min-width: 1201px) {
    .cemay-prev-next {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 30px;
    }

    .cemay-prev-next .previous-product,
    .cemay-prev-next .next-product {
        display: flex;
        float: none;
        width: auto;
        margin: 0;
    }

    /* ilk üründe yalnız "sonraki" var; sağ sütunda kalır */
    .cemay-prev-next .next-product {
        grid-column: 2;
    }

    .cemay-prev-next .previous-product a,
    .cemay-prev-next .next-product a {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
        background: var(--cemay-white);
        border: 1px solid var(--cemay-border);
        color: var(--cemay-ink-900);
        transition: border-color .2s ease-in-out, color .2s ease-in-out;
    }

    .cemay-prev-next .next-product a {
        align-items: flex-end;
        text-align: right;
    }

    .cemay-prev-next .previous-product a:hover,
    .cemay-prev-next .next-product a:hover {
        border-color: var(--cemay-border-strong);
        color: var(--cemay-red-600);
    }

    /* vendor'ın font glifli oku; ok artık etiketin yanında */
    .cemay-prev-next .previous-product a:before,
    .cemay-prev-next .next-product a:before {
        content: none;
    }

    .cemay-prev-next .previous-product-label,
    .cemay-prev-next .next-product-label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: var(--cemay-font-body);
        font-weight: 500;
        font-size: 11px;
        line-height: 16px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--cemay-steel-400);
    }

    .cemay-prev-next .previous-product-label:before,
    .cemay-prev-next .next-product-label:after {
        content: "";
        flex: none;
        width: 13px;
        height: 13px;
        background: currentColor;
        -webkit-mask: var(--cemay-pn-arrow) center / contain no-repeat;
        mask: var(--cemay-pn-arrow) center / contain no-repeat;
    }

    .cemay-prev-next .previous-product-label:before {
        --cemay-pn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M5 12l6 6M5 12l6-6'/%3E%3C/svg%3E");
    }

    .cemay-prev-next .next-product-label:after {
        --cemay-pn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E");
    }

    .cemay-prev-next .previous-product-title,
    .cemay-prev-next .next-product-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--cemay-font-display);
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

/* ≤1200 px'te tema bileşeni ürün adının iki yanında 40 px kareye çeviriyor; konum korunur, yalnız kare
   giydirilir: 8 px'lik gri glif yerine kenarlıklı beyaz düğmede 18 px chevron (mockup B, mobil). */
@media (max-width: 1200px) {
    .cemay-prev-next .previous-product a,
    .cemay-prev-next .next-product a {
        background: var(--cemay-white);
        border: 1px solid var(--cemay-border-strong);
        color: var(--cemay-charcoal-900);
    }

    .cemay-prev-next .previous-product a:before,
    .cemay-prev-next .next-product a:before {
        content: "";
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: var(--cemay-pn-chevron) center / contain no-repeat;
        mask: var(--cemay-pn-chevron) center / contain no-repeat;
    }

    .cemay-prev-next .previous-product a:before {
        --cemay-pn-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
    }

    .cemay-prev-next .next-product a:before {
        --cemay-pn-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    }
}

/* ── Ürün detay: ≤1200 px'te ürün adı ────────────────────────────────────────────────────────────────────
   Tema adı .product-essential'ın 95 px'lik üst boşluğuna mutlak konumla oturtup 70 px'te (iki satır)
   kesiyordu; üç-dört satıra kırılan adlar yarım kalıyordu (ör. 375 px'te "COALIS Kumaş Kaplama Makinesi"
   son kelimesiz, 30 Eyl 2026). Ad artık galerinin üstünde tablo başlığı (table-caption) olarak akışta:
   kendi yüksekliği kadar yer açar, kısa adlarda temanın 70 px'lik bandı korunur, önceki/sonraki kareleri
   yine ilk satır hizasında kalır. .overview "display: contents" ile açılır ki ad galeriyle aynı kapsayıcının
   çocuğu olsun; galeri ile genel bakışın kalanı tek anonim hücrede olağan blok akışını (marj birleşmesi
   dahil) sürdürür. Flex/grid bu yüzden seçilmedi: her öğe kendi bağlamına geçip aralıkları 5-40 px açıyordu.
   Hücre son içeriğin alt marjını içinde tutar; eskiden o marj QuickTabs'ın 20 px'lik alt marjıyla
   birleşiyordu (büyüğü geçerdi). Aynı toplam kalsın diye alt marj burada yeniden verilir. */
@media (max-width: 1200px) {
    .product-details-page .product-essential {
        display: table;
        table-layout: fixed;
        width: 100%;
        padding-top: 0;
        margin-bottom: 0; /* ≥481 px: düğmelerin 30 px'lik alt marjı 20'yi zaten aşıyor */
    }

    .product-details-page .product-essential > .overview {
        display: contents;
    }

    .product-details-page .overview > .product-name {
        display: table-caption;
        position: static;
        height: auto;
        min-height: 70px;
        overflow: visible;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    .product-details-page .product-essential {
        margin-bottom: 10px; /* CTA'nın 10 px'lik alt marjı + 10 = eski 20 */
    }
}

/* ── Ürün detay: başlıklı kısa açıklama ──────────────────────────────────────────────────────────────────
   Kurutma Sistemi'nin kısa açıklaması iki tipi kendi başlığı altında anlatıyor (RAM (Stenter) · Kurutma
   Makinesi, 10 Eki 2026). Venture'ın reset'i strong'u normal ağırlığa çekiyor ve paragraflar arasında boşluk
   bırakmıyor: ilk canlı karede başlıklar gövde satırından ayırt edilmiyordu. */
.overview .short-description p {
    margin: 0 0 14px;
}

.overview .short-description p:last-child {
    margin-bottom: 0;
}

.overview .short-description strong {
    font-weight: 600;
    color: var(--cemay-ink-900);
}

/* ── RFQ form + thank-you (004 / US1, T030.3) ─────────────────────────────────────────────────────────────
   DESIGN.md §4 form system: 44px fields, sharp corners (radius 0), 1px border on white; focus = 1px
   red-600 edge + 3px red-050 halo; labels Inter 500 14px ink; errors in danger. Two columns from 768px,
   one below — the form must work one-thumbed on a phone (constitution III). Scoped under .cemay-rfq- so
   nothing leaks into other pages. */

.cemay-rfq-page .page-body {
    max-width: 860px;
    margin: 0 auto;
}

.cemay-rfq-intro {
    font-family: var(--cemay-font-body);
    color: var(--cemay-steel-600);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
}

.cemay-rfq-form {
    text-align: left;
}

.cemay-rfq-section {
    border: 1px solid var(--cemay-border);
    padding: 20px 20px 8px;
    margin: 0 0 24px;
}

.cemay-rfq-section > legend {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 16px;
    color: var(--cemay-charcoal-900);
    padding: 0 8px;
}

.cemay-rfq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 24px;
}

@media (min-width: 768px) {
    .cemay-rfq-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cemay-rfq-field-full {
        grid-column: 1 / -1;
    }
}

.cemay-rfq-field {
    margin: 0 0 16px;
}

.cemay-rfq-field > label,
.cemay-rfq-choices > legend {
    display: inline-block;
    font-family: var(--cemay-font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--cemay-ink-900);
    margin: 0 0 6px;
}

.cemay-rfq-required {
    color: var(--cemay-danger);
    margin-left: 4px;
    font-weight: 600;
}

.cemay-rfq-field input[type="text"],
.cemay-rfq-field input[type="email"],
.cemay-rfq-field input[type="tel"],
.cemay-rfq-field select,
.cemay-rfq-field textarea {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--cemay-border-strong);
    border-radius: 0;
    background: var(--cemay-white);
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-ink-900);
}

.cemay-rfq-field textarea {
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    resize: vertical;
}

.cemay-rfq-field input:focus,
.cemay-rfq-field select:focus,
.cemay-rfq-field textarea:focus {
    outline: none;
    border-color: var(--cemay-red-600);
    box-shadow: 0 0 0 3px var(--cemay-red-050);
}

.cemay-rfq-field input[type="file"] {
    display: block;
    width: 100%;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-ink-900);
    padding: 8px 0;
}

.cemay-rfq-hint {
    display: block;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    /* steel-600, not steel-400: at 13px the lighter step misses the 4.5:1 AA floor (Lighthouse T160.2) */
    color: var(--cemay-steel-600);
    margin-top: 6px;
}

/* radio + checkbox rows (contact preference, KVKK) */
.cemay-rfq-choices {
    border: 0;
    padding: 0;
    margin: 0;
}

.cemay-rfq-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 20px 8px 0;
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-ink-900);
}

.cemay-rfq-choice input[type="radio"],
.cemay-rfq-choice input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--cemay-red-600);
    flex: none;
}

.cemay-rfq-choice label {
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.cemay-rfq-consent {
    border: 1px solid var(--cemay-border);
    background: var(--cemay-gray-050);
    padding: 16px;
    margin: 0 0 24px;
}

.cemay-rfq-consent .cemay-rfq-choice {
    display: flex;
    margin: 0;
}

.cemay-rfq-consent label {
    font-size: 14px;
    color: var(--cemay-steel-600);
}

/* server-side field errors (FR-008; nop stamps these classes) */
.cemay-rfq-form .field-validation-error {
    display: block;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-danger);
    margin-top: 6px;
}

.cemay-rfq-form input.input-validation-error,
.cemay-rfq-form select.input-validation-error,
.cemay-rfq-form textarea.input-validation-error {
    border-color: var(--cemay-danger);
}

.cemay-rfq-actions {
    margin: 0 0 8px;
}

.cemay-rfq-submit {
    border: 0;
    cursor: pointer;
    width: 100%;
}

@media (min-width: 768px) {
    .cemay-rfq-submit {
        width: auto;
        min-width: 280px;
    }
}

.cemay-rfq-submit[disabled] {
    opacity: .65;
    cursor: default;
}

/* the honeypot: removed from sight and from the tab order, still in the DOM for bots to find
   (research decision 5). Not display:none — some bots skip fields a browser would not render. */
.cemay-rfq-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* thank-you screen */
.cemay-rfq-thankyou {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 0 24px;
}

.cemay-rfq-thankyou h1 {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    color: var(--cemay-charcoal-900);
    margin: 0 0 12px;
}

.cemay-rfq-thankyou p {
    font-family: var(--cemay-font-body);
    font-size: 16px;
    color: var(--cemay-steel-600);
    margin: 0 0 28px;
}

/* 001's list/card "Teklif İste" label became a link into the form (T050.4); it keeps the price slot's
   look and only adds the interaction colour so it reads as clickable */
.product-item .cemay-quote-link {
    color: var(--cemay-red-600);
    text-decoration: none;
}

.product-item .cemay-quote-link:hover,
.product-item .cemay-quote-link:focus-visible {
    color: var(--cemay-red-700);
    text-decoration: underline;
}

/* the model-level message box (anti-spam rejection): visible, calm, never accusing */
.cemay-rfq-summary:not(.validation-summary-valid) {
    border: 1px solid var(--cemay-danger);
    background: var(--cemay-red-050);
    color: var(--cemay-danger);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    padding: 12px 16px;
    margin: 0 0 20px;
}

.cemay-rfq-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── "Ask an Expert" modal (004 / US5, T110.3) ────────────────────────────────────────────────────────────
   A light panel over the page (clarify decision: the visitor keeps their context). Reuses the RFQ field
   system; ink/charcoal wording per DESIGN.md — the secondary channel never shouts in red. */

.cemay-expert-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cemay-expert-modal[hidden] {
    display: none;
}

.cemay-expert-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 28, .55);
}

.cemay-expert-panel {
    position: relative;
    background: var(--cemay-white);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 24px 24px;
    text-align: left;
}

.cemay-expert-panel h2 {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 20px;
    color: var(--cemay-charcoal-900);
    margin: 0 0 8px;
}

.cemay-expert-intro {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-steel-600);
    margin: 0 0 20px;
}

.cemay-expert-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--cemay-steel-600);
    cursor: pointer;
}

.cemay-expert-close:hover,
.cemay-expert-close:focus-visible {
    color: var(--cemay-ink-900);
}

.cemay-expert-error:not([hidden]) {
    border: 1px solid var(--cemay-danger);
    background: var(--cemay-red-050);
    color: var(--cemay-danger);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    padding: 10px 14px;
    margin: 0 0 16px;
}

.cemay-expert-form .field-validation-error[hidden] {
    display: none;
}

.cemay-expert-submit {
    border: 0;
    cursor: pointer;
    width: 100%;
}

.cemay-expert-success p {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-ink-900);
    margin: 8px 0 20px;
}

/* the page behind the dialog must not scroll while it is open */
body.cemay-expert-open {
    overflow: hidden;
}

/* ── References (006) ─────────────────────────────────────────────────────────────────────────────── */

/* Mobile-first (the 003+ convention). The whole section is scoped under .cemay-references-page /
   .cemay-ref-* so nothing leaks (constitution III). Cards follow the DESIGN.md card idiom: sharp
   corners, hairline border, red top accent, 16:9 media area. */

.cemay-references-page .page-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* filter bar — ships [hidden]; cemay.js reveals it (progressive enhancement) */
.cemay-ref-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--cemay-gray-050);
    border: 1px solid var(--cemay-border);
}

.cemay-ref-filter[hidden] {
    display: none;
}

.cemay-ref-filter-title {
    font-family: var(--cemay-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
    align-self: center;
}

.cemay-ref-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    max-width: 240px;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-steel-600);
}

.cemay-ref-filter-field select {
    border: 1px solid var(--cemay-border-strong);
    border-radius: 0;
    background: var(--cemay-white);
    padding: 8px 10px;
    font: inherit;
    color: var(--cemay-ink-900);
}

#cemay-ref-count {
    margin-left: auto;
    font-family: var(--cemay-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--cemay-ink-900);
    align-self: center;
    white-space: nowrap;
}

.cemay-ref-clear {
    background: none;
    border: 0;
    padding: 4px;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-red-600);
    text-decoration: underline;
    cursor: pointer;
    align-self: center;
}

.cemay-ref-filter select:focus-visible,
.cemay-ref-clear:focus-visible {
    outline: 2px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* zero-result state */
.cemay-ref-empty {
    border: 1px dashed var(--cemay-border-strong);
    background: var(--cemay-gray-050);
    padding: 32px 16px;
    text-align: center;
}

.cemay-ref-empty[hidden] {
    display: none;
}

.cemay-ref-empty p {
    margin: 0 0 12px;
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-ink-900);
}

/* card grid — no horizontal scroll at any width; 280px floor folds to one column on phones */
.cemay-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.cemay-ref-card {
    display: flex;
    flex-direction: column;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
}

.cemay-ref-card[hidden] {
    display: none;
}

.cemay-ref-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--cemay-gray-100);
}

.cemay-ref-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cemay-ref-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}

.cemay-ref-name {
    margin: 0;
    font-family: var(--cemay-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cemay-ink-900);
}

.cemay-ref-location {
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cemay-steel-600);
}

.cemay-ref-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
}

.cemay-ref-tags li {
    font-family: var(--cemay-font-body);
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--cemay-border-strong);
    background: var(--cemay-gray-050);
    color: var(--cemay-charcoal-900);
}

.cemay-ref-line {
    margin: 4px 0 0;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cemay-ink-900);
}

.cemay-ref-result {
    margin: 4px 0 0;
    padding-left: 10px;
    border-left: 3px solid var(--cemay-red-500);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cemay-steel-600);
}

/* map (US2, research D3): a static self-host SVG above the list; the pins are buttons cemay.js
   positions and reveals — without the script the clean map alone renders */
.cemay-refmap-heading {
    margin: 0 0 12px;
    font-family: var(--cemay-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--cemay-ink-900);
}

.cemay-refmap-canvas {
    position: relative;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-gray-050);
    overflow: hidden;
}

.cemay-refmap-world {
    display: block;
    width: 100%;
    height: auto;
}

/* 24px hit area around a 12px dot: usable under a finger, quiet on the map */
.cemay-refmap-pin {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.cemay-refmap-pin::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--cemay-red-500);
    border: 2px solid var(--cemay-white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.cemay-refmap-pin:hover::before,
.cemay-refmap-pin[aria-expanded="true"]::before {
    background: var(--cemay-red-700);
}

.cemay-refmap-pin:focus-visible {
    outline: 2px solid var(--cemay-red-500);
    outline-offset: 2px;
    border-radius: 50%;
}

.cemay-refmap-pin[hidden] {
    display: none;
}

.cemay-refmap-balloon {
    position: absolute;
    z-index: 5;
    width: min(280px, calc(100% - 16px));
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border-strong);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
    padding: 14px 40px 14px 16px;
}

.cemay-refmap-balloon[hidden] {
    display: none;
}

.cemay-refmap-balloon-title {
    margin: 0 0 6px;
    font-family: var(--cemay-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--cemay-ink-900);
}

.cemay-refmap-balloon-apps,
.cemay-refmap-balloon-line {
    margin: 2px 0 0;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--cemay-ink-900);
}

.cemay-refmap-balloon-apps span,
.cemay-refmap-balloon-line span {
    color: var(--cemay-steel-600);
}

.cemay-refmap-balloon-apps b,
.cemay-refmap-balloon-line b {
    font-weight: 600;
}

.cemay-refmap-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--cemay-steel-600);
    cursor: pointer;
}

.cemay-refmap-close:hover {
    color: var(--cemay-ink-900);
}

.cemay-refmap-close:focus-visible {
    outline: 2px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* feeds (US4): the homepage selection and the application-page block reuse the card idiom */
.cemay-featured-refs {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 48px 16px;
}

.cemay-app-references .cemay-ref-grid {
    margin-top: 16px;
}

/* ── Cookie consent banner & preferences panel (005 / US2, FR-005–FR-011) ─────────────────────────────────
   Isolated under cemay-consent-* (constitution III). The banner is a bottom band that never blocks the
   page: no overlay, no trap — it sits above the mobile CTA bar (z-index 44) and below the off-canvas
   backdrop (1060), so an open menu still covers everything. Sharp corners, one red primary per surface,
   the reject action equally visible as a strong outline (DESIGN.md §5; FR-005 equal actions). */
.cemay-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding: 14px 16px;
    background: var(--cemay-white);
    border-top: 2px solid var(--cemay-charcoal-900);
    box-shadow: 0 -6px 18px rgba(20, 20, 25, .12);
}

.cemay-consent-banner[hidden] {
    display: none;
}

.cemay-consent-banner-text {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cemay-ink-900);
    margin: 0;
    max-width: 720px;
}

.cemay-consent-banner-text a {
    color: var(--cemay-red-600);
    text-decoration: underline;
}

.cemay-consent-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* the three equal actions: same size, same type voice; only the fill differs */
.cemay-consent-banner-actions button,
.cemay-consent-panel-actions button {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    padding: 13px 22px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.cemay-consent-accept,
.cemay-consent-save {
    border: 2px solid var(--cemay-red-600);
    background: var(--cemay-red-600);
    color: var(--cemay-white);
}

.cemay-consent-accept:hover,
.cemay-consent-save:hover {
    border-color: var(--cemay-red-700);
    background: var(--cemay-red-700);
}

.cemay-consent-reject {
    border: 2px solid var(--cemay-charcoal-900);
    background: var(--cemay-white);
    color: var(--cemay-charcoal-900);
}

.cemay-consent-reject:hover {
    background: var(--cemay-gray-100);
}

.cemay-consent-prefs,
.cemay-consent-close {
    border: 1px solid var(--cemay-border-strong);
    background: var(--cemay-white);
    color: var(--cemay-steel-600);
}

.cemay-consent-prefs:hover,
.cemay-consent-close:hover {
    border-color: var(--cemay-charcoal-900);
    color: var(--cemay-charcoal-900);
}

.cemay-consent-banner-actions button:focus-visible,
.cemay-consent-panel-actions button:focus-visible,
.cemay-consent-cat-label input:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* The preferences panel: a small dialog card, no backdrop — the page stays usable behind it (FR-011).
   Centred on desktop, a bottom sheet on phones. */
.cemay-consent-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1055;
    width: min(480px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border-strong);
    box-shadow: 0 12px 40px rgba(20, 20, 25, .25);
}

.cemay-consent-panel[hidden] {
    display: none;
}

.cemay-consent-panel-title {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 20px;
    color: var(--cemay-ink-900);
    margin: 0 0 16px;
}

.cemay-consent-cat {
    padding: 12px 0;
    border-top: 1px solid var(--cemay-border);
}

.cemay-consent-cat-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cemay-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--cemay-ink-900);
    cursor: pointer;
}

.cemay-consent-cat-label input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cemay-red-600);
}

.cemay-consent-cat-hint {
    font-family: var(--cemay-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cemay-steel-600);
    margin: 6px 0 0 28px;
}

.cemay-consent-panel-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.cemay-consent-panel-actions .cemay-consent-save {
    flex: 1;
}

@media (max-width: 640px) {
    /* single column: the text over a full-width action stack (mobile-first readability) */
    .cemay-consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cemay-consent-banner-actions {
        flex-direction: column;
    }

    .cemay-consent-banner-actions button {
        width: 100%;
    }

    /* the panel becomes a bottom sheet */
    .cemay-consent-panel {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        width: auto;
        max-height: calc(100vh - 48px);
    }
}

/* ── Newsletter consents (005 / US3, FR-014) ──────────────────────────────────────────────────────────────
   The two checkboxes under the footer's newsletter field, in the RFQ form's checkbox language
   (DESIGN.md §4): left-aligned inside the centred column so the small print reads as text. */
.cemay-newsletter-consent {
    margin-top: 14px;
    text-align: left;
}

.cemay-newsletter-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
}

.cemay-newsletter-choice input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--cemay-red-600);
    flex: none;
}

.cemay-newsletter-choice label {
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cemay-steel-600);
    cursor: pointer;
}

.cemay-newsletter-choice input:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* the notice link beside the KVKK box — also the RFQ form reuses the same pattern */
.cemay-newsletter-kvkk-link,
.cemay-rfq-kvkk-link {
    display: inline-block;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-red-600);
    text-decoration: underline;
    margin: 0 0 10px 28px;
}

.cemay-rfq-kvkk-link {
    margin: 6px 0 0 28px;
}

.cemay-newsletter-kvkk-link:focus-visible,
.cemay-rfq-kvkk-link:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

.cemay-newsletter-error {
    display: block;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-danger);
    margin: 4px 0 8px;
    text-align: left;
}

.cemay-newsletter-error[hidden],
.cemay-newsletter-result[hidden],
.cemay-newsletter-fields[hidden] {
    display: none;
}

.cemay-newsletter-result {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-ink-900);
    border: 1px solid var(--cemay-border-strong);
    background: var(--cemay-gray-050);
    padding: 14px 16px;
}

/* =========================================================================
   007 içerik tamamlama — foto-bekleme (FR-016),
   uygulama ikincil bağı (FR-012), Numune sayfası (US3)
   ========================================================================= */

/* FR-016: fotoğrafı tedarik edilmemiş ürünlerde galeri yerine tarif bloğu.
   Jenerik no-image / stok görsel YOK (İlke IX); foto gelince kendiliğinden kaybolur. */
.cemay-pendingphoto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border: 1px dashed var(--cemay-border-strong);
    background: var(--cemay-gray-050);
    border-radius: 4px;
}

.cemay-pendingphoto-inner {
    text-align: center;
    padding: 32px 24px;
    max-width: 340px;
}

.cemay-pendingphoto-icon {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--cemay-steel-400);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 12px;
}

.cemay-pendingphoto-title {
    margin: 0 0 6px;
    font-family: var(--cemay-font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-steel-600);
}

.cemay-pendingphoto-text {
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--cemay-steel-400);
}

/* FR-012: uygulama sayfası numune çağrı bloğundaki ikincil tanıtım bağı
   (ana CTA RFQ'da kalır — .cemay-app-cta-secondary). */
.cemay-app-sample-link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-red-600);
    text-decoration: underline;
}

.cemay-app-sample-link:hover,
.cemay-app-sample-link:focus-visible {
    color: var(--cemay-red-700);
}

.cemay-app-sample-link:focus-visible {
    outline: 3px solid var(--cemay-red-500);
    outline-offset: 2px;
}

/* Numune Kaplama & ÜR-GE Desteği sayfası (US3). 3-adım anlatısı anasayfa
   "Satın Almadan Önce Deneyin" bölümüyle tutarlı (FR-011); Topic gövdesi bu sınıfları kullanır. */
.cemay-numune-lead {
    font-family: var(--cemay-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--cemay-ink-900);
    max-width: 760px;
    margin: 0 0 8px;
}

.cemay-numune-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin: 28px 0;
    padding: 0;
    list-style: none;
    counter-reset: cemay-numune-step;
}

.cemay-numune-step {
    position: relative;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-gray-050);
    padding: 24px 22px 22px;
    counter-increment: cemay-numune-step;
}

.cemay-numune-step::before {
    content: "0" counter(cemay-numune-step);
    display: block;
    font-family: var(--cemay-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--cemay-red-600);
    margin-bottom: 10px;
}

.cemay-numune-step h3 {
    margin: 0 0 8px;
    font-family: var(--cemay-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--cemay-ink-900);
}

.cemay-numune-step p {
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
}

.cemay-numune-conditions {
    border-left: 3px solid var(--cemay-border-strong);
    background: var(--cemay-gray-100);
    padding: 18px 22px;
    margin: 24px 0;
}

.cemay-numune-conditions h2 {
    margin: 0 0 10px;
    font-family: var(--cemay-font-display);
    font-size: 20px;
    color: var(--cemay-ink-900);
}

.cemay-numune-conditions ul {
    margin: 0;
    padding-left: 20px;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--cemay-steel-600);
}

.cemay-numune-free {
    font-family: var(--cemay-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--cemay-red-600);
    margin: 20px 0;
}

/* Kapanış butonu yatayda ortalanır (Ahmet, 6 Ağu 2026). Buton, seeder'ın bastığı sade bir `<p>`nin
   içinde duruyor ve o paragraf sola hizalı — buton da sayfanın sol kenarına yaslanıyordu (ölçüldü:
   sol 262.3). Ortalama paragrafın `text-align`ine bırakılmıyor: paragrafın sınıfı yok, yani kural
   seeder içeriğine bağlı kalırdı. Buton kendi kutusunu ortalıyor — içerik kadar genişlik + otomatik
   yan boşluk — böylece hangi kapsayıcıya düşerse düşsün ortada durur. */
.cemay-numune-cta {
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-family: var(--cemay-font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-white);
    background: var(--cemay-red-500);
    padding: 14px 30px;
    text-decoration: none;
    border-radius: 2px;
}

.cemay-numune-cta:hover {
    background: var(--cemay-red-600);
    color: var(--cemay-white);
}

.cemay-numune-cta:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .cemay-numune-steps {
        grid-template-columns: 1fr;
    }

    .cemay-pendingphoto {
        min-height: 220px;
    }
}

/* ── services (008): hub cards, service page sections, "İlgili Hizmetler" strip ─────────────────
   the v6 card idiom (sharp corners, hairline border, red top accent) shared with references/numune;
   isolated cemay-service-* classes (constitution III), no new JS */
.cemay-service-hub,
.cemay-service-page {
    max-width: var(--cemay-container);
}

/* Giriş paragrafı sütunun tamamını kaplar (10 Eki 2026, Ahmet: "kesik ve yarım, yatay alanda yay").
   760 px'lik sınır onu 900 px'lik Topic sütununda sola yaslı bırakıyor, altındaki kartlar ve bant ise
   sütunun sağ kenarına kadar uzanıyordu; hub ve dört hizmet sayfasında sütundan dar kalan tek öğe buydu. */
.cemay-service-lead {
    font-family: var(--cemay-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--cemay-ink-900);
    margin: 0 0 8px;
}

/* Four cards over an auto-fit grid left the fourth alone on the second row with a hole beside it
   (014 / approved mockup — the same trailing-row problem as B08). A wrapping flex row centres whatever
   the last row holds, and keeps the three-up rhythm on a laptop. */
.cemay-service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 28px 0;
}

.cemay-service-grid .cemay-service-card {
    flex: 0 1 100%;
    max-width: 100%;
}

@media (min-width: 640px) {
    .cemay-service-grid .cemay-service-card {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (min-width: 1025px) {
    .cemay-service-grid .cemay-service-card {
        flex-basis: calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}

/* the closing call the hub never had: it ran straight from its last card into the footer */
.cemay-service-band {
    background: var(--cemay-charcoal-900);
    color: var(--cemay-white);
    text-align: center;
    padding: 40px 24px;
    margin: 40px 0 0;
}

.cemay-service-band h2 {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 26px;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--cemay-white);
}

/* Seçici `.topic-page` üstünden (0,3,1): gövde metnini okunur kılan genel kural
   `.topic-page p { text-align:left }` (0,1,1) bandın içine de giriyor ve bandın kendi ortalamasını
   eziyordu — başlık bandın ortasındaydı, paragraf ve buton 62ch'lik kutunun SOL kenarına yaslıydı
   (ölçüldü: başlık 286→1138, paragraflar 454→971 ama içerik solda). Bant bir okuma bloğu değil,
   sayfayı kapatan çağrıdır; içindeki her şey ortalanır. */
.topic-page .cemay-service-band p,
.cemay-service-band p {
    color: #D7D8DA;
    max-width: 62ch;
    margin: 0 auto 18px;
    text-align: center;
}

.cemay-service-band p:last-child {
    margin-bottom: 0;
}

.cemay-service-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    padding: 20px 22px 22px;
    text-decoration: none;
}

.cemay-service-card:hover {
    background: var(--cemay-gray-050);
}

.cemay-service-card:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.cemay-service-card-name {
    font-family: var(--cemay-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cemay-ink-900);
}

.cemay-service-card-desc {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cemay-steel-600);
}

.cemay-service-section {
    margin: 28px 0;
}

/* 012 / W-01: the section body inherited Venture's #909090, which measures 2.8:1 on the page's #F0F0F0
   panel — under WCAG 1.4.3 for 15px/400 text (Lighthouse colour-contrast, 2 of 20 measured pages).
   Pulled to the design system's secondary-text token (DESIGN.md steel-600), 5.6:1 on the same panel.
   Same inheritance was already corrected for the blog body and two other surfaces; this one was missed. */
.cemay-service-section p,
.cemay-service-section li,
.cemay-service-section dd {
    color: var(--cemay-steel-600);
}

.cemay-service-section h2,
.cemay-service-links h2 {
    margin: 0 0 12px;
    font-family: var(--cemay-font-display);
    font-size: 22px;
    color: var(--cemay-ink-900);
}

.cemay-service-steps {
    margin: 0;
    padding-left: 22px;
    font-family: var(--cemay-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--cemay-ink-900);
}

.cemay-service-steps li {
    margin-bottom: 8px;
}

.cemay-service-links ul {
    margin: 0;
    padding-left: 20px;
    font-family: var(--cemay-font-body);
    font-size: 15px;
    line-height: 1.8;
}

.cemay-service-links a {
    color: var(--cemay-red-600);
}

.cemay-service-pendingphoto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    margin: 24px 0;
    border: 1px dashed var(--cemay-border-strong);
    background: var(--cemay-gray-050);
    color: var(--cemay-steel-600);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* Üretim Hattı Kurulumu — hat şeması ve kurulum animasyonu (16 Eyl 2026, Ahmet: "B seçeneğini uygula").
   Saha fotoğrafı yer tutucusunun yerine geldi; 26 Eyl 2026'dan beri başlığın hemen altında, giriş paragrafından
   önce durur (Ahmet). İşaretleme CemayServiceSeeder.BuildLineFigure'da,
   davranış cemay.js §line-figure'da. Onaylı mockup: design/hizmet-kurulum-hat-animasyonu-mockup.html.
   Betik yoksa şema bitmiş hâliyle durağan çizimdir; ilerleme etiketleri, ünite ışıkları ve "Hat devrede"
   yalnız betik .is-enhanced koyunca görünür, .is-armed ise animasyon başlamadan önceki hâli kurar. */
.cemay-linefig {
    margin: 24px 0;
    padding: 18px 24px 14px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
}

.cemay-linefig-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 6px;
}

.cemay-linefig-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--cemay-steel-600);
}

.cemay-linefig-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cemay-linefig-sw {
    display: inline-block;
    flex: none;
}

.cemay-linefig-sw-web {
    width: 22px;
    height: 3px;
    background: var(--cemay-red-500);
}

.cemay-linefig-sw-cemay {
    width: 12px;
    height: 12px;
    background: var(--cemay-charcoal-900);
}

.cemay-linefig-sw-supplied {
    width: 12px;
    height: 12px;
    border: 1.25px solid var(--cemay-steel-600);
    background: var(--cemay-white);
}

.cemay-linefig-progress {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cemay-linefig.is-enhanced .cemay-linefig-progress {
    display: flex;
}

.cemay-linefig-step,
.cemay-linefig-running {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cemay-linefig-step {
    padding: 4px 9px;
    border: 1px solid var(--cemay-border);
    color: var(--cemay-steel-600);
    transition: color .25s, border-color .25s, background-color .25s;
}

.cemay-linefig-step.is-active {
    border-color: var(--cemay-red-500);
    background: var(--cemay-red-050);
    color: var(--cemay-red-700);
}

.cemay-linefig-step.is-done {
    border-color: var(--cemay-success);
    color: var(--cemay-success);
}

.cemay-linefig-running {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    background: var(--cemay-success-050);
    color: var(--cemay-success);
    opacity: 0;
    transition: opacity .4s;
}

.cemay-linefig-running::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.cemay-linefig-running.is-on {
    opacity: 1;
}

/* Topic gövde sütunu 900px, şemanın kutusu 850px: çizim (1200 birim) orada ~0,7 ölçekle durur; etiket ve
   çizgi kalınlıkları bu ölçeğe göre seçildi (17 birim ≈ 12px). 760px'in altına küçülmez — daha dar ekranda
   etiketler okunmaz olur — onun yerine kendi kutusunda yana kayar (sayfa taşmaz); ipucu kayma başlayınca görünür. */
.cemay-linefig-scroll {
    overflow-x: auto;
}

.cemay-linefig-svg {
    display: block;
    width: 100%;
    min-width: 760px;
    height: auto;
}

.cemay-linefig-hint {
    display: none;
    margin: 6px 0 0;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-steel-400);
    text-align: left;
}

.cemay-linefig figcaption {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--cemay-border);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cemay-steel-600);
    text-align: left;
}

@media (max-width: 841px) {
    .cemay-linefig-hint {
        display: block;
    }
}

@media (max-width: 767px) {
    .cemay-linefig {
        padding: 14px 12px 12px;
    }
}

.cemay-lf-st {
    fill: var(--cemay-white);
    stroke: var(--cemay-steel-600);
    stroke-width: 1.5;
}

.cemay-lf-sn {
    fill: none;
    stroke: var(--cemay-steel-600);
    stroke-width: 1.5;
}

.cemay-lf-lt {
    fill: none;
    stroke: #9A9DA1;
    stroke-width: 1.2;
}

.cemay-lf-rl {
    fill: var(--cemay-white);
    stroke: var(--cemay-steel-600);
    stroke-width: 1.35;
}

.cemay-lf-cm {
    fill: var(--cemay-charcoal-900);
}

.cemay-lf-bar {
    fill: var(--cemay-steel-400);
}

.cemay-lf-rc {
    fill: #D9DCE0;
    stroke: var(--cemay-ink-900);
    stroke-width: 1;
}

.cemay-lf-belt {
    fill: none;
    stroke: #9A9DA1;
    stroke-width: 1.3;
    stroke-linejoin: round;
}

.cemay-lf-roll {
    fill: var(--cemay-white);
    stroke: var(--cemay-red-500);
    stroke-width: 2;
}

.cemay-lf-ring {
    fill: none;
    stroke: #F2A9A7;
    stroke-width: 1.2;
}

.cemay-lf-web {
    fill: none;
    stroke: var(--cemay-red-500);
    stroke-width: 2.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.cemay-lf-nb {
    fill: var(--cemay-white);
    stroke: var(--cemay-steel-600);
    stroke-width: 1.5;
}

.cemay-lf-nb-cm {
    fill: var(--cemay-red-500);
    stroke: var(--cemay-red-500);
}

.cemay-lf-nt {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 16px;
    fill: var(--cemay-ink-900);
}

.cemay-lf-nt-cm {
    fill: var(--cemay-white);
}

.cemay-lf-lb {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .06em;
    text-transform: uppercase;
    fill: var(--cemay-ink-900);
}

/* Animasyonun parçaları — pathLength="1" olduğu için kesik çizgi değerleri yolun oranıdır */
.cemay-lf-flow {
    fill: none;
    stroke: var(--cemay-white);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: .003 .017;
    opacity: 0;
}

.cemay-lf-flow.is-on {
    opacity: .95;
    animation: cemay-lf-flow 1.1s linear infinite;
}

@keyframes cemay-lf-flow {
    to {
        stroke-dashoffset: -.02;
    }
}

.cemay-lf-axis {
    fill: none;
    stroke: var(--cemay-success);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0;
    transition: opacity .3s;
}

.cemay-lf-axis.is-in {
    opacity: 1;
}

.cemay-lf-led {
    display: none;
    fill: var(--cemay-border-strong);
    transition: fill .25s;
}

.cemay-linefig.is-enhanced .cemay-lf-led {
    display: inline;
}

.cemay-lf-led.is-on {
    fill: var(--cemay-success);
}

.cemay-linefig.is-armed .cemay-lf-unit {
    opacity: 0;
    transform: translateY(-18px);
    transition: opacity .45s, transform .45s;
}

.cemay-linefig.is-armed .cemay-lf-unit.is-in {
    opacity: 1;
    transform: none;
}

/* 2,4 sn cemay.js'teki kumaş besleme adımının süresiyle aynı; biri değişirse öteki de */
.cemay-linefig.is-armed .cemay-lf-web {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
}

.cemay-linefig.is-armed .cemay-lf-web.is-in {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 2.4s linear;
}

@media (prefers-reduced-motion: reduce) {
    .cemay-lf-flow.is-on {
        animation: none;
        opacity: 0;
    }
}

/* Bakım & İyileştirme (Retrofit) — aynı hat şeması, retrofit anlatısıyla (16 Eyl 2026, Ahmet: "A seçeneğini
   uygula"). Kurulumdan farkı: hat çalışırken değerlendirilir, kaplama makinesi darboğaz olarak işaretlenir,
   tavan vinci eskisini söküp yenisini indirir, kumaş yalnız o ünitede yeniden takılır. İşaretleme
   CemayServiceSeeder.BuildRetrofitFigure'da, davranış cemay.js §retrofit-figure'da; onaylı mockup
   design/hizmet-retrofit-hat-animasyonu-mockup.html. İşaretleme bitmiş hâldir: vinç, tarama, uyarı ve eski
   makine varsayılan olarak görünmez; betik her kareyi zamandan hesaplayıp satır içi stil olarak yazar. */
.cemay-linefig-sw-renewed {
    width: 12px;
    height: 12px;
    border: 1.4px solid var(--cemay-red-600);
    background: var(--cemay-red-050);
}

.cemay-linefig-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
}

.cemay-linefig-ctl {
    font-family: var(--cemay-font-body);
    font-size: 12px;
    line-height: 1.2;
    padding: 5px 10px;
    border: 1px solid var(--cemay-border-strong);
    background: var(--cemay-white);
    color: var(--cemay-steel-600);
    cursor: pointer;
}

.cemay-linefig-ctl:hover,
.cemay-linefig-ctl:focus-visible {
    border-color: var(--cemay-steel-600);
    color: var(--cemay-ink-900);
}

.cemay-linefig-ctl[hidden] {
    display: none;
}

.cemay-rf-frame {
    fill: none;
    stroke: var(--cemay-red-500);
    stroke-width: 1.6;
    stroke-dasharray: 6 4;
    opacity: 0;
}

.cemay-rf-frame.is-plan {
    opacity: 1;
}

.cemay-rf-frame.is-done {
    opacity: 1;
    fill: var(--cemay-red-050);
    stroke: var(--cemay-red-600);
    stroke-dasharray: none;
}

.cemay-rf-cm-old {
    fill: #B4B7BB;
}

.cemay-rf-bar-old {
    fill: #D5D7DA;
}

.cemay-rf-rc-old {
    fill: #EEF0F2;
    stroke: #8C8F94;
    stroke-width: 1;
}

.cemay-rf-oldcm,
.cemay-rf-rig,
.cemay-rf-crane,
.cemay-rf-scan,
.cemay-rf-marker {
    opacity: 0;
}

.cemay-rf-steel {
    fill: var(--cemay-steel-600);
}

.cemay-rf-sling {
    stroke: var(--cemay-steel-600);
    stroke-width: 1.4;
}

.cemay-rf-rail {
    fill: var(--cemay-border-strong);
}

.cemay-rf-hook {
    fill: var(--cemay-charcoal-900);
}

.cemay-rf-scanline {
    stroke: var(--cemay-red-500);
    stroke-width: 1.4;
}

.cemay-rf-marker-sign {
    fill: var(--cemay-white);
    stroke: var(--cemay-red-500);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.cemay-rf-marker-mark {
    fill: none;
    stroke: var(--cemay-red-500);
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Hat durunca kumaş yerinde bekler: gri */
.cemay-rf-web-line.is-idle,
.cemay-rf-web-unit.is-idle {
    stroke: var(--cemay-border-strong);
}

.cemay-rf-lb-hot {
    fill: var(--cemay-red-600);
}

/* ÜR-GE Danışmanlığı — aynı hat, proses geliştirme anlatısıyla (16 Eyl 2026, Ahmet: "B mobilde anlaşılır
   değil, A seçeneği olmalı"). Kurulum ve retrofit şemalarından farkı: yazılar SVG'de değil HTML'de (durum
   satırı, dört gösterge kartı, dar ekranda ünite adları), böylece telefonda şema yana kaymaz ve yazılar
   küçülmez. İşaretleme CemayServiceSeeder.BuildRndFigure'da, davranış cemay.js §rnd-figure'da; onaylı
   mockup design/hizmet-urge-hat-animasyonu-mockup.html. İşaretleme bitmiş hâldir (göstergeler hedefte,
   R3, "Numune hedefte"); betik her kareyi zamandan hesaplayıp satır içi stil olarak yazar. */
.cemay-linefig-sw-probe {
    width: 12px;
    height: 12px;
    border: 2px solid var(--cemay-red-500);
    border-radius: 50%;
    background: var(--cemay-white);
}

.cemay-linefig-sw-band {
    width: 22px;
    height: 7px;
    border-radius: 4px;
    background: #A9D8C1;
}

/* Hizmet sayfası gövdesi ortalı (bkz. .cemay-service-cta notu); şemanın yazıları sola yaslı durmalı */
.cemay-rndfig-panel,
.cemay-rndfig-params,
.cemay-asfig-panel,
.cemay-asfig-timeline {
    text-align: left;
}

.cemay-rndfig-panel,
.cemay-asfig-panel {
    border: 1px solid var(--cemay-border-strong);
    padding: 10px 12px 8px;
}

.cemay-rndfig-panel-head,
.cemay-asfig-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 12px;
    min-height: 30px;
}

.cemay-rndfig-title,
.cemay-asfig-title {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cemay-steel-600);
}

.cemay-rndfig-status,
.cemay-asfig-status {
    min-height: 22px;
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cemay-steel-600);
}

.cemay-rndfig-status.is-bad,
.cemay-asfig-status.is-bad {
    color: var(--cemay-red-600);
}

.cemay-rndfig-status.is-ok,
.cemay-asfig-status.is-ok {
    color: var(--cemay-success);
}

.cemay-rndfig-line,
.cemay-asfig-line {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 334;
}

.cemay-rndfig-probe {
    fill: var(--cemay-white);
    stroke: var(--cemay-red-500);
    stroke-width: 2;
}

.cemay-rndfig-sample {
    fill: var(--cemay-white);
    stroke: var(--cemay-success);
    stroke-width: 2;
    opacity: 0;
}

/* Dar ekranda hat kadrajdan kırpılınca etiket satırı dışarıda kalır; ünite adları bu HTML satırında durur.
   Konumlar dar ekran kadrajına (viewBox 320..1200) göre: kaplama makinesi solda, kurutma %60,2'de, sarma sağda. */
.cemay-rndfig-unitrow,
.cemay-asfig-unitrow {
    display: none;
    position: relative;
    height: 18px;
    margin-top: 2px;
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-rndfig-unitrow > span,
.cemay-asfig-unitrow > span {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.cemay-rndfig-unitrow > span:nth-child(1),
.cemay-asfig-unitrow > span:nth-child(1) {
    left: 2px;
}

.cemay-rndfig-unitrow > span:nth-child(2),
.cemay-asfig-unitrow > span:nth-child(2) {
    left: 60.2%;
    transform: translateX(-50%);
}

.cemay-rndfig-unitrow > span:nth-child(3),
.cemay-asfig-unitrow > span:nth-child(3) {
    right: 2px;
}

.cemay-rndfig-params {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.cemay-rndfig-gauge {
    border: 1px solid var(--cemay-border-strong);
    padding: 8px 12px 10px;
}

.cemay-rndfig-gauge-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.cemay-rndfig-gauge-name {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-rndfig-where {
    display: block;
    margin-top: 1px;
    font-family: var(--cemay-font-body);
    font-size: 12px;
    color: var(--cemay-steel-400);
}

.cemay-rndfig-recipe {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--cemay-red-600);
}

.cemay-rndfig-recipe.is-ok {
    color: var(--cemay-success);
}

.cemay-rndfig-dots {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.cemay-rndfig-dots > i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cemay-border);
}

.cemay-rndfig-dots > i.is-bad {
    background: var(--cemay-red-600);
}

.cemay-rndfig-dots > i.is-ok {
    background: var(--cemay-success);
}

/* Gösterge ölçeği -66..66; bant hedef aralık. Oranlar cemay.js §rnd-figure GAUGES tablosuyla aynı, biri değişirse öteki de. */
.cemay-rndfig-track {
    position: relative;
    height: 8px;
    margin-top: 8px;
    border-radius: 4px;
    background: var(--cemay-border);
}

.cemay-rndfig-band {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: #A9D8C1;
}

.cemay-rndfig-mk {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border: 2px solid var(--cemay-white);
    border-radius: 50%;
    background: var(--cemay-red-500);
}

.cemay-rndfig-mk.is-ok {
    background: var(--cemay-success);
}

.cemay-rndfig-track-gap .cemay-rndfig-band {
    left: 54.5%;
    width: 21.2%;
}

.cemay-rndfig-track-gap .cemay-rndfig-mk {
    left: 65.2%;
}

.cemay-rndfig-track-temp .cemay-rndfig-band {
    left: 34.8%;
    width: 22.7%;
}

.cemay-rndfig-track-temp .cemay-rndfig-mk {
    left: 46.2%;
}

.cemay-rndfig-track-speed .cemay-rndfig-band {
    left: 59.1%;
    width: 22.7%;
}

.cemay-rndfig-track-speed .cemay-rndfig-mk {
    left: 70.5%;
}

@media (max-width: 991px) {
    .cemay-rndfig-params {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cemay-rndfig-panel,
    .cemay-asfig-panel {
        padding: 10px 0 6px;
        border-right: 0;
        border-left: 0;
    }

    .cemay-rndfig-panel-head,
    .cemay-asfig-panel-head {
        align-content: flex-start;
        min-height: 52px;
        padding: 0 2px;
    }

    .cemay-rndfig-line,
    .cemay-asfig-line {
        aspect-ratio: 880 / 268;
    }

    .cemay-rndfig-unitrow,
    .cemay-asfig-unitrow {
        display: block;
    }

    .cemay-rndfig-params {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Satış Sonrası & Yedek Parça — aynı hat, ömrü boyunca destek anlatısıyla (16 Eyl 2026, Ahmet: "B seçeneğini
   uygula"). ÜR-GE şemasının duyarlı kalıbı: panel, durum satırı, hat ve ünite satırı yukarıdaki .cemay-rndfig-*
   kurallarını paylaşır. Buraya özgü olanlar: destek noktaları, "hat üretimde" çubuğu ve zaman çizelgesi
   (geniş ekranda yatay, telefonda dikey). İşaretleme CemayServiceSeeder.BuildAfterSalesFigure'da, davranış
   cemay.js §aftersales-figure'da; onaylı mockup design/hizmet-satis-sonrasi-hat-animasyonu-mockup.html.
   İşaretleme bitmiş hâldir: dört durak açık, çubuk ve çizgi dolu. */
.cemay-linefig-sw-support {
    width: 12px;
    height: 12px;
    border: 2px solid var(--cemay-success);
    border-radius: 50%;
    background: var(--cemay-white);
}

.cemay-linefig-sw-uptime {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: var(--cemay-success);
}

.cemay-asfig-mark {
    fill: var(--cemay-white);
    stroke: var(--cemay-success);
    stroke-width: 2;
    opacity: 0;
}

.cemay-asfig-uptime {
    position: relative;
    height: 6px;
    margin: 8px 0 2px;
    border-radius: 3px;
    background: var(--cemay-border);
    overflow: hidden;
}

.cemay-asfig-uptime > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--cemay-success);
}

.cemay-asfig-timeline {
    position: relative;
    margin-top: 14px;
    padding-top: 18px;
}

/* Taban çizgisi ilk ve son noktanın merkezinden geçer; dolum çizgisini betik noktadan noktaya uzatır.
   Bitmiş hâlde dolum son noktaya kadardır: 4 sütun, 10px aralık → son noktanın merkezi %75 + 11,5px. */
.cemay-asfig-timeline::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 12px;
    left: 12px;
    height: 2px;
    background: var(--cemay-border);
}

.cemay-asfig-fill {
    position: absolute;
    top: 7px;
    left: 12px;
    width: calc(75% + 11.5px);
    height: 2px;
    background: var(--cemay-success);
}

/* Figürle nitelenmiş: temanın .topic-html-content ol kuralı (decimal numara, 36px iç boşluk, 12px dış boşluk)
   tek sınıflı seçiciden özgül olduğu için duraklara "1. 2. 3." basıyor ve kartları içeri kaydırıyordu. */
.cemay-asfig .cemay-asfig-nodes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cemay-asfig-node {
    position: relative;
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid var(--cemay-border-strong);
    opacity: .35;
}

.cemay-asfig-node::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 10px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--cemay-border-strong);
    border-radius: 50%;
    background: var(--cemay-white);
}

.cemay-asfig-node.is-on {
    opacity: 1;
}

.cemay-asfig-node.is-on::before {
    border-color: var(--cemay-success);
    background: var(--cemay-success);
}

.cemay-asfig-node.is-now {
    border-color: var(--cemay-success);
}

.cemay-asfig-node-name {
    display: block;
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-asfig-node-text {
    display: block;
    margin-top: 2px;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--cemay-steel-600);
}

@media (max-width: 767px) {
    .cemay-asfig-timeline {
        padding-top: 0;
        padding-left: 26px;
    }

    .cemay-asfig-timeline::before {
        top: 10px;
        right: auto;
        bottom: 10px;
        left: 7px;
        width: 2px;
        height: auto;
    }

    .cemay-asfig-fill {
        top: 10px;
        bottom: 10px;
        left: 7px;
        width: 2px;
        height: auto;
    }

    .cemay-asfig .cemay-asfig-nodes {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cemay-asfig-node::before {
        top: 10px;
        left: -25px;
    }
}

/* Sayfayı kapatan çağrı ORTADA (5 Ağu 2026, Ahmet). Sola yaslı olması bir karar değildi: buton Topic
   gövdesinin akışında duruyordu, üstündeki bölüm başlıkları ve fotoğraf yer tutucusu ise ortalı —
   ortalanmış bir kolonun içindeki tek sola yaslı öğe olarak kalmıştı. `display:block` + `margin:auto`,
   `text-align` DEĞİL: buton kendi genişliğinde kalmalı, kutusu satırı kaplamamalı. */
.cemay-service-cta {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--cemay-font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-white);
    background: var(--cemay-red-500);
    padding: 14px 30px;
    text-decoration: none;
    border-radius: 2px;
}

.cemay-service-cta:hover {
    background: var(--cemay-red-600);
    color: var(--cemay-white);
}

/* 012 / W-01c — buton yazısı görünmüyordu (008'den beri).
   Hizmet sayfaları Topic olduğu için Venture'ın `.topic-page a` kuralı (özgüllük 11)
   yukarıdaki `.cemay-service-cta`yı (10) eziyor ve bağlantıya marka kırmızısını
   veriyordu: kırmızı zemin üzerinde kırmızı yazı, ölçülen kontrast **1,00:1**.
   Buton görünüyor ama etiketi okunmuyordu — üstelik bu sayfaların dönüşüm CTA'sı.
   Eleman adını ekleyip özgüllüğü eşitliyoruz; cemay.css en son yüklendiği için
   eşitlikte bizimki kazanıyor. Beyaz üzerinde kırmızı: 5,3:1. */
a.cemay-service-cta,
a.cemay-service-cta:hover,
a.cemay-service-cta:focus {
    color: var(--cemay-white);
}

/* 014 — the same trap, the same fix, for the primary CTA. The services hub gained a closing quote band
   (approved mockup) and its .cemay-quote-cta sits inside a Topic body too: measured red-on-red at 1.05:1
   before this rule. Any CTA dropped into a seeded Topic body needs the element name for the same reason,
   so both live here together rather than being rediscovered a third time. */
a.cemay-quote-cta,
a.cemay-quote-cta:hover,
a.cemay-quote-cta:focus {
    color: var(--cemay-white);
}

/* Üçüncü kez, aynı tuzak (Ahmet, 6 Ağu 2026): "Numune Kaplama & ÜR-GE Desteği" sayfasının kapanış
   butonu boş bir kırmızı blok olarak duruyordu. Etiketi yerindeydi — `.cemay-numune-cta`nın beyaz
   rengi (10) `.topic-page a`ya (11) yenildiği için kırmızı zemine kırmızı yazılıyordu, ölçülen
   kontrast **1,00:1**. Yukarıdaki not "üçüncü kez keşfedilmesin" diyordu; kural o zaman yazılan iki
   sınıfa yazılmış, seeder'ın üçüncü CTA'sı kapsam dışında kalmıştı. Artık üçü de burada. */
a.cemay-numune-cta,
a.cemay-numune-cta:hover,
a.cemay-numune-cta:focus {
    color: var(--cemay-white);
}

.cemay-service-cta:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 3px;
}

/* "İlgili Hizmetler" strip — compact, on the product & application templates (T080) */
.cemay-service-strip {
    margin: 28px 0;
    padding: 18px 20px;
    border: 1px solid var(--cemay-border);
    border-left: 3px solid var(--cemay-red-500);
    background: var(--cemay-gray-050);
}

.cemay-service-strip-title {
    margin: 0 0 10px;
    font-family: var(--cemay-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-service-strip-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
    padding: 0;
}

.cemay-service-strip-links a {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    color: var(--cemay-red-600);
    text-decoration: none;
}

.cemay-service-strip-links a:hover {
    text-decoration: underline;
}

/*  the grid became a wrapping flex row with 014 (see the trailing-row note above); the card basis is
    set per breakpoint there, so the old single-column override has nothing left to say  */

/* ── corporate (009): hub, About Us, sales network map ──────────────────────────────────────────
   The v6 card idiom again (sharp corners, hairline border, red top accent) so the corporate section reads
   as the same site as services and references; isolated cemay-corp-* / cemay-net-map-* classes
   (constitution III). The brand card and brand-page rules left with 014 (constitution VI v3.0.0). No new JS: the map is markup and CSS, and its three styles come from the
   design tokens rather than from a map provider's palette. */
.cemay-corp-hub,
.cemay-corp-page,
.cemay-salesnetwork-page .page-body {
    max-width: var(--cemay-container);
}

.cemay-corp-lead {
    font-family: var(--cemay-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--cemay-ink-900);
    max-width: 760px;
    margin: 0 0 8px;
}

.cemay-corp-note {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
    max-width: 760px;
}

.cemay-corp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 28px 0;
}

.cemay-corp-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    padding: 20px 22px 22px;
    text-decoration: none;
}

.cemay-corp-card:hover {
    background: var(--cemay-gray-050);
}

.cemay-corp-card:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.cemay-corp-card-kicker {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11.5px;
    opacity: .85;
}

.cemay-corp-card-name {
    font-family: var(--cemay-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cemay-ink-900);
}

.cemay-corp-card-desc {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cemay-steel-600);
}


.cemay-corp-section,
.cemay-corp-links {
    margin: 28px 0;
    max-width: 820px;
}

.cemay-corp-section h2,
.cemay-corp-links h2,
.cemay-net-list h2 {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 12px;
    color: var(--cemay-ink-900);
}

/* colour is set explicitly, not inherited: Venture's topic page body hands down a #909090 grey that only
   reaches 2.8:1 on the page background (WCAG 2.1 AA wants 4.5:1) */
.cemay-corp-section p,
.cemay-corp-section li,
.cemay-corp-links li {
    font-family: var(--cemay-font-body);
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--cemay-ink-900);
}

/* underlined, not red-only: a link inside a paragraph must be distinguishable without colour vision */
.cemay-corp-section a,
.cemay-corp-links a {
    color: var(--cemay-red-600);
    text-decoration: underline;
}

.cemay-corp-cta {
    display: inline-block;
    font-family: var(--cemay-font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-white);
    background: var(--cemay-red-500);
    padding: 12px 26px;
    text-decoration: none;
    margin-right: 10px;
}

.cemay-corp-cta:hover {
    background: var(--cemay-red-600);
    color: var(--cemay-white);
}

.cemay-corp-cta:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 3px;
}

/* the quiet counterpart, so a section never shows two red buttons (DESIGN.md §5) */
.cemay-corp-cta-ghost {
    background: transparent;
    color: var(--cemay-ink-900);
    border: 1px solid var(--cemay-border-strong);
}

.cemay-corp-cta-ghost:hover {
    background: var(--cemay-gray-100);
    color: var(--cemay-ink-900);
}

/* About Us — the six-step diagram reuses the home page step cards, two rows of three */
.cemay-corp-steps .cemay-section-head {
    padding-top: 24px;
}

.cemay-steps-six {
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 8px;
}

/* Sales network page — the map is a first-party static SVG: a world backdrop with a highlight layer
   inlined over it on the same view box, so no third-party request and nothing to consent to (FR-010).
   Decorative (aria-hidden); the list below carries the same information for assistive technology. */
.cemay-net-map {
    margin: 28px 0 8px;
}

.cemay-net-map-canvas {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
}

.cemay-net-map-world {
    display: block;
    width: 100%;
    height: auto;
    opacity: .3;
}

.cemay-net-map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cemay-net-map-country {
    stroke: var(--cemay-white);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* red for the head office, charcoal for a representative region, steel for a country with an installed
   line — the same hierarchy the chips in the footer panel imply */
.cemay-net-map-country.cemay-net-hq,
.cemay-net-key.cemay-net-hq {
    fill: var(--cemay-red-600);
    background: var(--cemay-red-600);
}

.cemay-net-map-country.cemay-net-rep,
.cemay-net-key.cemay-net-rep {
    fill: var(--cemay-charcoal-900);
    background: var(--cemay-charcoal-900);
}

.cemay-net-map-country.cemay-net-inst,
.cemay-net-key.cemay-net-inst {
    fill: var(--cemay-steel-400);
    background: var(--cemay-steel-400);
}

.cemay-net-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin: 14px 0 0;
    padding: 0;
    font-family: var(--cemay-font-body);
    font-size: 13.5px;
    color: var(--cemay-steel-600);
}

.cemay-net-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cemay-net-key {
    display: inline-block;
    width: 14px;
    height: 14px;
}

.cemay-net-list {
    margin: 36px 0;
}

.cemay-net-regions {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
}

.cemay-net-region {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--cemay-border);
    border-left: 3px solid var(--cemay-steel-400);
    background: var(--cemay-white);
    padding: 16px 18px;
}

.cemay-net-region.cemay-net-hq {
    border-left-color: var(--cemay-red-600);
}

.cemay-net-region.cemay-net-rep {
    border-left-color: var(--cemay-charcoal-900);
}

.cemay-net-region-name {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    font-size: 17px;
    color: var(--cemay-ink-900);
}

.cemay-net-region-kind {
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    text-transform: lowercase;
    color: var(--cemay-steel-400);
}

/* the firm name as text is the honest fallback while a logo is still being supplied (FR-012) */
.cemay-net-region-firm {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-ink-900);
    margin-top: 4px;
}

.cemay-net-region-logo {
    max-width: 140px;
    height: auto;
    margin-top: 6px;
}

.cemay-net-cta {
    border-top: 1px solid var(--cemay-border);
    padding-top: 24px;
    margin-top: 8px;
}

.cemay-net-cta p {
    font-family: var(--cemay-font-body);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 760px;
}

/* the representatives carousel now names the firm when it has no logo yet (FR-012) */
.cemay-rep-firm {
    font-family: var(--cemay-font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--cemay-ink-900);
}

.cemay-rep-logo img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .cemay-steps-six {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .cemay-corp-grid,
    .cemay-net-regions,
    .cemay-steps-six {
        grid-template-columns: 1fr;
    }

    .cemay-corp-cta {
        display: block;
        margin: 0 0 10px;
        text-align: center;
    }
}

/* =========================================================================
   010 blog-bilgi — Bilgi/Blog bölümü: içerik türü filtre çubuğu, liste
   kartları (Rich Blog görseli + tür rozeti), boş durum, yazı detayı ve
   anasayfa son-yazılar bloğu
   ========================================================================= */

/* Bölüm iki motorun çıktısını birleştirir: kart iskeleti çekirdek/Venture
   blog view'ından, görsel + tür rozeti Rich Blog widget zone'larından gelir.
   Vendor'un RichBlog.css'i olduğu gibi bırakılır (İlke I) — bu dosya yükleme
   zincirinin sonunda olduğundan ezmek yeterli. */

/* Ekran okuyucuya görünür, göze görünmez: belge başlık sırasını bozmadan bölüme ad veren başlıklar için */
.cemay-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Filtre çubuğu (FR-003): JS'siz, her tür kendi adresi --- */
.cemay-blog-filter {
    margin: 0 0 26px;
}

.cemay-blog-filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cemay-blog-filter li {
    margin: 0;
    padding: 0;
}

/* dokunmatik hedef 44px: 12 + 13.5×1.4 + 12 + 2px kenar ≈ 45px (İlke III) */
.cemay-blog-filter-item {
    display: inline-block;
    padding: 12px 16px;
    border: 1px solid var(--cemay-border-strong);
    background: var(--cemay-white);
    font-family: var(--cemay-font-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cemay-steel-600);
    text-decoration: none;
}

.cemay-blog-filter-item:hover {
    border-color: var(--cemay-red-500);
    color: var(--cemay-red-600);
}

.cemay-blog-filter-item:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* aktif tür: rengin yanında dolu zemin de var — vurgu yalnız renge
   dayanmasın (WCAG 1.4.1); ayrıca aria-current="page" işaretli */
.cemay-blog-filter-item.active {
    border-color: var(--cemay-red-600);
    background: var(--cemay-red-600);
    color: var(--cemay-white);
}

/* --- Liste ızgarası --- */
.html-blog-page .blog-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
}

.html-blog-page .blog-posts .post {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    box-shadow: none;
}

/* Görsel kutusu 16:9'da sabit — kaynaklar farklı oranlarda (fuar karesi, yayın kapağı) ve ızgaranın
   satır hizası bozulmamalı. Kutu sabit, İÇERİK kırpılmaz: bkz. aşağıdaki `object-fit` notu. */
.html-blog-page .rich-blog-image {
    margin: 0;
    overflow: hidden;
}

.html-blog-page .rich-blog-image a,
.html-blog-page .rich-blog-image img {
    display: block;
    width: 100%;
}

/* Görselin TAMAMI görünür (Ahmet, 6 Ağu 2026).
   5 Ağu'da aynı karar anasayfa kartları için verilmişti (`.post-picture img` → `contain` + nötr zemin,
   gerekçe: görsellerimizin bir kısmı infografik, kırpılınca tablosunun yarısı kayboluyor). Blog liste
   sayfası RichBlog'un `.rich-blog-image` kabuğunu kullandığı için o kuralın kapsamı dışında kaldı ve
   `cover` ile kırpmaya devam etti — ölçüldü: 400×400 görseller 382.7×215.3 kutuda, dikeyde yarısı
   gidiyordu. Aynı çözüm buraya da: kutu 16:9'da sabit kaldığı için satır hizası korunur, görsel
   letterbox olur ve gray-050 şerit kadrajı tamamlar. */
.html-blog-page .rich-blog-image img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--cemay-gray-050);
    height: auto;
    transition: none;
}

/* --- Tür rozeti: Rich Blog kategori çıktısı eyebrow kalıbına giydirilir.
   Vendor "Kategoriler:" etiketini de basıyor; rozet tek kelime olduğundan
   etiket gizlenir — bağlantının kendisi metni taşıyor. --- */
.html-blog-page .post-footer {
    margin: 0;
    padding: 0;
    border: 0;
}

.html-blog-page .post-footer .post-relations {
    margin: 0;
    padding: 18px 20px 0;
}

.html-blog-page .post-footer .category-list {
    margin: 0;
}

.html-blog-page .post-footer .category-list > label {
    display: none;
}

.html-blog-page .post-footer .category-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.html-blog-page .post-footer .category-list li {
    margin: 0;
    padding: 0;
}

.html-blog-page .post-footer .category-list li.separator {
    display: none;
}

.html-blog-page .post-footer .category-list a {
    display: inline-block;
    font-family: var(--cemay-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cemay-red-600);
    text-decoration: none;
}

.html-blog-page .post-footer .category-list a:hover {
    color: var(--cemay-red-700);
    text-decoration: underline;
}

.html-blog-page .post-footer .category-list a:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* Vendor kartın üstüne ikinci bir "Devamını Oku" basıyor; kartın tek eylemi
   post-head'deki bağlantı (List.cshtml). Paylaş butonları ayarla kapalı. */
.html-blog-page .blog-posts .post-footer .post-actions {
    display: none;
}

/* --- Tarih + eylem satırı --- */
/* overflow: the theme clips this row (it is a dark band behind an oversized calendar chip there); left
   hidden it would cut the action label off at the card edge */
.html-blog-page .blog-posts .post-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 20px 0;
    overflow: visible;
    background: none;
    border: 0;
}

/* position: Venture takes the date out of flow and pins it over the picture as a calendar chip; here it is a
   plain line in the head row, so it has to come back into flow or it lands on top of the read-more link */
.html-blog-page .blog-posts .post-date {
    display: block;
    position: static;
    /* the date is the flexible side of the row; the action keeps its width */
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cemay-steel-400);
}

/* gün/ay/yıl vendor'da üst üste bir takvim rozeti; kartta tek satır tarih
   daha sakin okunuyor */
.html-blog-page .blog-posts .post-date span {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: none;
}

.html-blog-page .blog-posts .post-date .month {
    margin: 0 3px;
}

/* !important is the only way past the theme's own: it paints the day white for the dark calendar chip
   (styles.css "color: #fff !important"), which on a white card is an invisible day number */
.html-blog-page .blog-posts .post-date .day,
.html-blog-page .blog-posts .post-date .month,
.html-blog-page .blog-posts .post-date .year {
    color: var(--cemay-steel-400) !important;
}

/* the theme zeroes the font size here to close inline-block gaps, and floats the block; in a flex row both
   work against us — the label collapses and the item leaves the row */
.html-blog-page .blog-posts .post-head .buttons {
    float: none;
    /* do not shrink, and size to the label: nowrap text in a narrower box runs past the card edge */
    flex: 0 0 auto;
    width: max-content;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: right;
}

/* the theme's own card button is a dark padded block with a font-icon glyph; here the action is a plain
   text link sitting opposite the date */
.html-blog-page .blog-posts .post-head .read-more {
    display: inline-block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cemay-red-600);
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: none;
}

.html-blog-page .blog-posts .post-head .read-more:before {
    display: none;
}

.html-blog-page .blog-posts .post-head .read-more:hover {
    color: var(--cemay-red-700);
    text-decoration: underline;
}

.html-blog-page .blog-posts .post-head .read-more:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* --- Başlık + özet --- */
.html-blog-page .blog-posts .post-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 0;
    padding: 8px 20px 20px;
}

.html-blog-page .blog-posts .post-title {
    display: block;
    margin: 0 0 10px;
    font-family: var(--cemay-font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cemay-ink-900);
    text-decoration: none;
}

.html-blog-page .blog-posts .post-title:hover {
    color: var(--cemay-red-600);
}

.html-blog-page .blog-posts .post-title:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.html-blog-page .blog-posts .post-text {
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
}

.html-blog-page .blog-posts .post-text p {
    margin: 0 0 8px;
}

.html-blog-page .blog-posts .post-text p:last-child {
    margin-bottom: 0;
}

/* Etiket ve yorum satırı: bu bölümde etiket yok (tür = taksonomi) ve
   yorumlar kapalı — kalan boş kabuk kaldırılır */
.html-blog-page .blog-posts .blog-details {
    display: none;
}

/* --- Boş durum --- */
.cemay-blog-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 34px 24px;
    background: var(--cemay-gray-050);
    border: 1px dashed var(--cemay-border-strong);
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-steel-600);
    text-align: center;
}

/* --- Yazı detayı --- */

/* Gövde metni temanın #909090'ını miras alıyordu: beyaz üzerinde 3.19:1, WCAG 1.4.3'ün altında
   (Lighthouse koşumunda yakalandı). Okuma rengi tasarım sisteminin gövde tonuna çekildi. */
.html-blogpost-page .post-body,
.html-blogpost-page .post-body p,
.html-blogpost-page .post-body li,
.html-blogpost-page .post-body td,
.html-blogpost-page .post-body th {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--cemay-steel-600);
}

.html-blogpost-page .post-body h2,
.html-blogpost-page .post-body h3 {
    margin: 26px 0 10px;
    font-family: var(--cemay-font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cemay-ink-900);
}

.html-blogpost-page .post-body strong {
    color: var(--cemay-ink-900);
}

.html-blogpost-page .post-body ul {
    margin: 0 0 14px;
    padding-left: 20px;
    list-style: disc;
}

.html-blogpost-page .post-body li {
    margin: 0 0 6px;
}

/* Teknik notun üretim → kaplama çözümü matrisi: dar ekranda kendi içinde kayar,
   sayfa yatay taşmaz (SC-008) */
.html-blogpost-page .post-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
    overflow-x: auto;
    border-collapse: collapse;
}

.html-blogpost-page .post-body th,
.html-blogpost-page .post-body td {
    padding: 10px 14px;
    border: 1px solid var(--cemay-border);
    text-align: left;
    vertical-align: top;
}

.html-blogpost-page .post-body th {
    background: var(--cemay-gray-100);
    font-weight: 700;
    color: var(--cemay-ink-900);
}

.html-blogpost-page .rich-blog-image {
    margin: 0 0 22px;
}

.html-blogpost-page .rich-blog-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* detayda etiket kalıyor ("Kategoriler:"), listede gizli — vendor araya boşluk koymuyor */
/* Venture'ın "Geri" bağlantısı #909090 ile geliyor: WCAG 2.1 AA'nın normal metin için istediği
   4.5:1'in altında (anayasa İlke III). Hover'ı da alıyoruz: vendor oraya sarı (#f3cc2e) koyuyor,
   ~1.7:1 — yani bağlantı tam da üzerine gelindiğinde okunamaz hale geliyordu.

   Ton steel-600, steel-400 DEĞİL: bu bağlantı sayfa gövdesinin üstünde duruyor ve gövde zemini
   beyaz değil #F0F0F0. steel-400 beyazda 5.12:1 verip geçiyormuş gibi görünüyor ama gerçek zeminde
   4.49:1'e düşüyor — eşiğin kılpayı altı. steel-600 aynı zeminde 5.55:1, beyazda 6.33:1.
   Ders: kontrastı arkasında GERÇEKTEN boyanan renge karşı ölç, beyaz varsayma.

   Gövde sınıfı seçiciye dahil: vendor kuralı (styles.css, `.blogpost-page .back-button`) bizimkiyle
   aynı özgüllükte ve cemay.css'ten SONRA yükleniyor — eşitlikte kaynak sırası kazanıyor, yani sade
   selector sessizce etkisiz kalıyor. !important yerine bir sınıf daha. */
.html-blogpost-page .blogpost-page .back-button {
    color: var(--cemay-steel-600);
}

.html-blogpost-page .blogpost-page .back-button:hover {
    color: var(--cemay-red-600);
}

/* Geri bağlantısının yeri (25 Eyl 2026, mockup A onaylı). Venture bağlantıyı beyaz kutunun 45 px üstüne
   mutlak konumluyor (styles.css, `top: -45px`); bu, temanın 80 px'lik sayfa üstü boşluğuna göre ayarlı.
   "Sayfa üstü boşluğu" kuralı (aşağıda) boşluğu 1200 px ve altında 32 px'e indirince bağlantı 13 px başlığın altına girdi:
   ≤768'de sabit beyaz bar, 769–1200'de koyu iletişim şeridi "TÜM … DÖN"ün Ü/Ö noktalarını yutuyordu
   (EN metinde üst işaret olmadığı için görünmüyordu). 56 px ile bağlantı başlığın 21 px altına iner,
   kutuyla arasında 8 px kalır. Masaüstünde (48 px) bağlantı zaten başlığın altında, dokunulmadı.
   Haber detayı Venture'da aynı bileşen; arşiv boş olduğu için canlıda açılamıyor ama kural onu da kapsar. */
@media all and (max-width: 1200px) {
    .html-blogpost-page .master-wrapper-content,
    .html-news-item-page .master-wrapper-content {
        padding-top: 56px;
    }
}

.html-blogpost-page .post-footer .category-list > label {
    margin-right: 8px;
    font-family: var(--cemay-font-body);
    font-size: 12px;
    color: var(--cemay-steel-400);
}

.html-blogpost-page .post-footer .category-list ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.html-blogpost-page .post-footer .category-list li.separator {
    display: none;
}

.html-blogpost-page .post-footer .category-list a {
    font-family: var(--cemay-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cemay-red-600);
    text-decoration: none;
}

.html-blogpost-page .post-footer .category-list a:hover {
    text-decoration: underline;
}

/* --- Anasayfa son-yazılar bloğu (US4): vendor bileşeni, kendi view'ına
   dokunulmadan giydirilir --- */
.rich-blog-homepage {
    max-width: var(--cemay-container);
    margin: 0 auto;
    padding: 46px 20px 10px;
}

.rich-blog-homepage .title {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    text-align: left;
}

.rich-blog-homepage .title:before,
.rich-blog-homepage .title:after {
    display: none;
}

.rich-blog-homepage .title strong {
    font-family: var(--cemay-font-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--cemay-ink-900);
    text-transform: none;
}

.rich-blog-homepage .blog-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rich-blog-homepage .blog-post {
    display: flex;
    flex-direction: column;
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    box-shadow: none;
}

.rich-blog-homepage .blog-post:after {
    display: none;
}

/* görsel → tarih → "Devamını Oku": vendor bu üçünü tek sarmalayıcıya
   koyuyor, kart düzeni için dikey akışa alınıyor */
/* background: the theme paints this block dark to sit behind its white calendar chip; the card here is
   white with the picture on top */
/* The vendor puts the picture, the date and the read-more link in this one box, in that order, so a column
   would stack the action above the title. A two-column grid instead: picture across the top, then the date
   and the action facing each other on one row — the same head row the list card has. */
.rich-blog-homepage .post-primary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    position: relative;
    margin: 0;
    background: none;
}

.rich-blog-homepage .post-primary > .post-picture {
    grid-column: 1 / -1;
}

/* The theme already holds the picture at ~16:9 with a padding-top pseudo-element and an absolutely
   positioned image, which is exactly the shape wanted here — so that box is left alone. All it needs is for
   the image to fill it and crop rather than letter-box, and for the hover zoom to go (the whole card is the
   link; a moving picture under a still card reads as a glitch). */
.rich-blog-homepage .post-picture {
    display: block;
    margin: 0;
    overflow: hidden;
}

.rich-blog-homepage .post-picture img {
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    transform: none;
    transition: none;
}

.rich-blog-homepage .post-picture:hover img {
    transform: none;
}


/* margin rather than padding, matching the read-more opposite it: the grid aligns the two on their text
   baselines, and a padded box against a margined one sits a line lower */
.rich-blog-homepage .post-date {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 14px 0 0 20px;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cemay-steel-400);
}

.rich-blog-homepage .post-date span {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: none;
}

/* same reason as the list card: the theme sizes the day as a 50px white numeral for its dark chip */
.rich-blog-homepage .post-date .day,
.rich-blog-homepage .post-date .month,
.rich-blog-homepage .post-date .year {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cemay-steel-400) !important;
}

.rich-blog-homepage .post-date .month {
    margin: 0 3px;
}

/* karşı köşede, tarihle aynı satırda */
.rich-blog-homepage .post-primary .read-more {
    justify-self: end;
    margin: 14px 20px 0 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--cemay-font-body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cemay-red-600);
    text-transform: none;
    text-decoration: none;
}

.rich-blog-homepage .post-primary .read-more:before {
    display: none;
}

.rich-blog-homepage .post-primary .read-more:hover {
    color: var(--cemay-red-700);
    text-decoration: underline;
}

.rich-blog-homepage .post-primary .read-more:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.rich-blog-homepage .post-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 0;
    padding: 10px 20px 20px;
}

.rich-blog-homepage .post-title {
    display: block;
    margin: 0 0 10px;
    font-family: var(--cemay-font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cemay-ink-900);
    text-decoration: none;
}

.rich-blog-homepage .post-title:hover {
    color: var(--cemay-red-600);
}

.rich-blog-homepage .post-title:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.rich-blog-homepage .post-description {
    margin: 0;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
}

.rich-blog-homepage .view-all {
    margin: 24px 0 0;
    text-align: center;
}

.rich-blog-homepage .view-all a {
    display: inline-block;
    min-height: 44px;
    padding: 12px 26px;
    background: var(--cemay-red-600);
    border: 0;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--cemay-white);
    text-decoration: none;
}

.rich-blog-homepage .view-all a:hover {
    background: var(--cemay-red-700);
    color: var(--cemay-white);
}

.rich-blog-homepage .view-all a:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .html-blog-page .blog-posts,
    .rich-blog-homepage .blog-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .html-blog-page .blog-posts,
    .rich-blog-homepage .blog-posts {
        grid-template-columns: 1fr;
    }

    /* çubuk taşmak yerine sarmalar — yatay kaydırma yok (SC-008) */
    .cemay-blog-filter ul {
        gap: 6px;
    }

    /* dar ekranda yatay dolgu küçülür, dikey hedef 44px'te kalır */
    .cemay-blog-filter-item {
        padding: 12px 13px;
        font-size: 13px;
    }

    .html-blog-page .blog-posts .post-title {
        font-size: 19px;
    }

    .rich-blog-homepage {
        padding: 34px 16px 6px;
    }

    .rich-blog-homepage .title strong {
        font-size: 24px;
    }
}

/* =========================================================================
   013 urun-bulucu — Ürün Bulucu sihirbazı: adım göstergesi, seçenek
   kartları (malzeme / uygulama / daraltma), sonuç kartları, eşleşmesiz
   yönlendirme ve mega panel şeritleri
   ========================================================================= */

/* Adım göstergesi ve seçim özeti. Ziyaretçi kaçıncı adımda olduğunu ve neyi seçtiğini her ekranda
   görür — sihirbazın tamamı tam-sayfa GET olduğu için bu iki satır tek yönelim işareti. */
.cemay-finder-indicator {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 600;
    color: var(--cemay-red-600);
    margin: 0 0 6px;
}

.cemay-finder-selection {
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cemay-steel-600);
    margin: 0 0 20px;
}

.cemay-finder-selection-label {
    font-weight: 600;
    color: var(--cemay-ink-900);
}

.cemay-finder-selection-sep {
    margin: 0 6px;
}

.cemay-finder-step {
    margin: 0 0 32px;
}

.cemay-finder-step-title {
    margin: 0 0 16px;
    font-family: var(--cemay-font-display);
    font-size: 24px;
    line-height: 1.25;
    color: var(--cemay-ink-900);
}

/* Seçenek kartları. Mobile-first (003+ konvansiyonu): tek sütun, geniş ekranda otomatik ızgara.
   Her seçenek gerçek bir bağlantı — dokunmatik hedefi de klavye erişimi de kendiliğinden doğru. */
.cemay-finder-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cemay-finder-option {
    display: flex;
    align-items: center;
    min-height: 64px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-left: 3px solid var(--cemay-red-500);
    padding: 16px 20px;
    text-decoration: none;
}

.cemay-finder-option:hover {
    background: var(--cemay-gray-050);
    border-color: var(--cemay-border-strong);
}

.cemay-finder-option:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

.cemay-finder-option-label {
    font-family: var(--cemay-font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cemay-ink-900);
}

.cemay-finder-empty {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--cemay-steel-600);
    max-width: 70ch;
    margin: 0;
}

/* Sonuç kartları: ürün adı + "neden uygun" + iki eylem. Ünite listelenmez (clarify #5) — üniteler
   ürün sayfasındaki ilişkili ürünler bölümünde. */
.cemay-finder-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.cemay-finder-card {
    position: relative;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
    border-top: 3px solid var(--cemay-red-500);
    padding: 22px;
}

.cemay-finder-card-title {
    margin: 0 0 8px;
    font-family: var(--cemay-font-display);
    font-size: 20px;
    line-height: 1.25;
}

.cemay-finder-card-title a {
    color: var(--cemay-ink-900);
    text-decoration: none;
}

.cemay-finder-card-title a:hover {
    color: var(--cemay-red-600);
}

.cemay-finder-card-why {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--cemay-steel-600);
    max-width: 70ch;
    margin: 0 0 18px;
}

.cemay-finder-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.cemay-finder-card-link {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    font-weight: 600;
    color: var(--cemay-charcoal-900);
    text-decoration: none;
    border-bottom: 2px solid var(--cemay-red-500);
    padding-bottom: 2px;
}

.cemay-finder-card-link:hover {
    color: var(--cemay-red-600);
}

/* Eşleşmesiz yönlendirme (FR-005): boş sonuç yerine iki yol. Çıkmaz sokak yok. */
.cemay-finder-nomatch {
    background: var(--cemay-gray-050);
    border: 1px solid var(--cemay-border);
    padding: 24px;
    margin: 0 0 32px;
}

.cemay-finder-nomatch-text {
    font-family: var(--cemay-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--cemay-ink-900);
    max-width: 70ch;
    margin: 0 0 20px;
}

.cemay-finder-nomatch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.cemay-finder-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--cemay-border);
    padding-top: 18px;
}

.cemay-finder-back,
.cemay-finder-restart {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-steel-600);
    text-decoration: none;
}

.cemay-finder-back:hover,
.cemay-finder-restart:hover {
    color: var(--cemay-red-600);
    text-decoration: underline;
}

.cemay-finder-back::before {
    content: "\2190";
    margin-right: 6px;
}

@media (min-width: 768px) {
    .cemay-finder-options {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .cemay-finder-cards {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .cemay-finder-step-title {
        font-size: 28px;
    }
}

/* Mega panel şeritleri (FR-011a) ve uygulama sayfası girişi (FR-011c). İki panelde de aynı işaret:
   "adını bilmiyorsan buradan sor". Sistemler panelinde dropdown flex satır olduğu için şerit
   flex:1 1 100% ile alt satıra düşer; Uygulamalar paneli zaten display:block. */
.cemay-finder-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    background: var(--cemay-charcoal-900);
    padding: 14px 20px;
    text-decoration: none;
    /* tema menü içinde font-size:0 uyguluyor — her çocuk kendi boyutunu vermek zorunda */
    font-size: 15px;
}

.cemay-finder-strip:hover {
    background: var(--cemay-red-600);
}

.cemay-finder-strip:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: -3px;
}

.cemay-finder-strip-question {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    color: var(--cemay-white);
}

.cemay-finder-strip-link {
    font-family: var(--cemay-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    font-weight: 700;
    color: var(--cemay-white);
    border-bottom: 2px solid var(--cemay-red-500);
    padding-bottom: 2px;
}

.cemay-finder-strip-link::after {
    content: "\2192";
    margin-left: 8px;
}

@media (min-width: 1201px) {
    /* Sistemler panelindeki şerit promo sütununun altına, tam genişlikte düşer */
    .cemay-mega-systems .dropdown {
        flex-wrap: wrap;
    }

    .cemay-mega-systems .cemay-finder-strip {
        flex: 1 1 100%;
    }
}

.cemay-app-finder-prompt {
    font-family: var(--cemay-font-body);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px;
}

.cemay-app-finder-prompt a {
    color: var(--cemay-charcoal-900);
    border-bottom: 2px solid var(--cemay-red-500);
    padding-bottom: 2px;
    text-decoration: none;
}

.cemay-app-finder-prompt a:hover {
    color: var(--cemay-red-600);
}

/* ==========================================================================
   012 / FR-016 — Gövde metni sola hizalı (site geneli)

   Clarify kararı (31 Tem): okunabilirlik ve WCAG pratiği gereği gövde
   paragrafları sola hizalanır; BAŞLIKLAR ve kısa vurgu metinleri ortada
   kalabilir. 008 (hizmet sayfaları) ve 009 (kurumsal) devri.

   Kapsam bilinçli olarak dar: yalnız içerik kaplarındaki akış metni
   (paragraf, liste, tanım listesi). Tasarımın kasten ortaladığı bileşenler
   (bölüm başlıkları, adım kartları, CTA şeritleri, foto-bekleme bloğu)
   :not() ile dışarıda bırakılır — DESIGN.md düzeni korunur.
   ========================================================================== */
.topic-block .topic-block-body p,
.topic-html-content p,
.topic-page p,
.post-body p,
.news-body p,
.full-description p,
.cemay-service-section p,
.cemay-corporate-section p,
.topic-block .topic-block-body ul,
.topic-block .topic-block-body ol,
.topic-html-content ul,
.topic-html-content ol,
.topic-page ul,
.topic-page ol,
.post-body ul,
.post-body ol,
.full-description ul,
.full-description ol,
.cemay-service-section ul,
.cemay-service-section ol,
.cemay-corporate-section ul,
.cemay-corporate-section ol,
.cemay-service-section dl,
.cemay-corporate-section dl {
    text-align: left;
}

/* Kasten ortalanan bileşenler kuralın dışında kalır (yukarıdaki seçiciler
   bunların içine de düşebiliyor) */
.cemay-section-head p,
.cemay-step p,
.cemay-steps-cta p,
.cemay-pendingphoto-inner p,
.cemay-app-cta p,
.cemay-product-cta p,
.cemay-empty-state p {
    text-align: center;
}

/* ==========================================================================
   012 / W-01b — Venture'ın #909090'ı normal boyutlu metinde AA altında

   Ölçüldü: #909090 beyaz üzerinde **3,19:1**, breadcrumb şeridinin #F5F5F5'i
   üzerinde **2,93:1**. WCAG 1.4.3 normal metin için 4,5 istiyor.

   Tema bu griyi `styles.css`'te 116 kuralda kullanıyor; hepsini ezmek kırılgan
   olurdu. Onun yerine sitede **gerçekten render olan** yüzeyler tarandı
   (ölçüm setindeki sayfalarda görünür 19 düğüm) ve yalnız onlar tasarım
   sisteminin ikincil-metin tonuna çekildi: `steel-600` → beyazda 6,4:1,
   breadcrumb zemininde 5,9:1.

   Kapsam dışı bırakılanlar bilinçli: sepet/forum/admin kuralları bu sitede hiç
   render olmuyor (İlke V — sepet yok), gizli mobil seçici kopyaları da açıldığında
   aynı bileşenlerin bu kurallarına düşüyor.
   ========================================================================== */
.breadcrumb a,
.breadcrumb a span,
.breadcrumb .current-item,
.breadcrumb strong,
.breadcrumb span.delimiter,
.overview .short-description,
.overview .additional-details .sku .label,
.overview .additional-details .value,
.full-description p,
.full-description li,
.no-data {
    color: var(--cemay-steel-600);
}

/* Pasif ürün sekmeleri ayrı: Venture'ın kuralı daha özgül olduğu için zinciri
   tam yazmak gerekiyor. **Yalnız pasif** olanlar — aktif sekme #2C2C2C (12,3:1)
   ve seçili olanı ayırt eden şey o koyuluk; hepsini aynı tona çekmek erişilebilirliği
   düzeltirken görsel hiyerarşiyi bozardı. */
.productTabs .productTabs-header .ui-tabs-nav li:not(.ui-tabs-active) > a.ui-tabs-anchor {
    color: var(--cemay-steel-600);
}

/* ==========================================================================
   012 / W-08 — Görünür odak göstergesi (WCAG 2.4.7 AA)

   Venture'ın reset'i `* { outline: none }` ile tarayıcının varsayılan odak
   halkasını **site genelinde** siliyor (styles.css:7). CEMAY kendi
   bileşenlerine 40 ayrı `:focus-visible` kuralıyla halka geri eklemiş, ama
   bunların dışında kalan her şey — sıradan bağlantılar, kategori/ürün
   linkleri, breadcrumb, mega menü öğeleri, sayfalama, blog kartları —
   klavyeyle gezildiğinde **hiçbir işaret vermiyordu**.

   Gerçek Tab tuşuyla doğrulandı: `:focus-visible` eşleşiyor ama
   `outline: none 0px` / `box-shadow: none`. Lighthouse bunu denetlemiyor;
   manuel klavye turunda çıktı.

   Aşağıdaki kural bir **geri-düşüş**: özgüllüğü (0,1,0) olduğu için
   `*` reset'ini (0,0,0) yener, ama bileşenlerin kendi kurallarına
   (`.cemay-quote-cta:focus-visible` vb.) dokunmaz — onlar daha özgül.
   Biçim tasarım sisteminin baskın halkasıyla aynı: 3px red-700 + 2px offset.

   `:focus` değil `:focus-visible`: fare tıklamasında halka çıkmaz, yalnız
   klavye/erişilebilirlik yolunda — mevcut 40 kuralın hepsi de böyle.
   ========================================================================== */
:focus-visible {
    outline: 3px solid var(--cemay-red-700);
    outline-offset: 2px;
}

/* Koyu zeminlerde kırmızı halka 1.4.11'in 3:1 eşiğini geçemiyor; oralarda
   beyaza dönülüyor (üst bar, koyu header, footer alt şeridi). */
.cemay-topbar :focus-visible,
.header-upper :focus-visible,
.header-selectors-wrapper :focus-visible,
.language-selector :focus-visible,
.cemay-footer-legal :focus-visible,
.footer-lower :focus-visible {
    outline-color: #FFFFFF;
}

/* Not (012/W-08): halka `outline-offset: 2px` ile ögenin DIŞINDA, yani ebeveynin
   zemini üzerinde çiziliyor. Bu yüzden halka rengi ögenin kendi dolgusuna göre
   değil, ARKASINDAKİ yüzeye göre seçilir. Beş bileşen kuralı `red-050` (#FDECEB)
   kullanıyordu — kırmızı butonun üstünde mantıklı görünse de halka beyaz sayfa
   zeminine düştüğü için ölçülen kontrast 1,0–1,14 idi: pratikte görünmez.
   Hepsi ev stilinin baskın tonuna (`red-700`) çekildi. */

/* ── Sayfa üstü boşluğu (23 Eyl 2026, Ahmet: "gereksiz kenar boşlukları") ────────────────────────────
   Venture içeriği header'ın 80 px altından başlatıyor (`.master-wrapper-content`, her genişlikte);
   masaüstü kategori sayfasına ise 120 px veriyor: 40 px kırıntı şeridi + kendi eğik başlık levhası
   için 80 px. O levha 014'te kalktı, boşluğu kaldı — katalog kartı şeridin 80 px altında duruyordu,
   onaylı 014 mockup'ında şeride yapışık. Başlıklı sayfalarda (Hizmetler, Referanslar, Kurumsal…)
   başlık header'ın 88 px altındaydı; 014 hizmet şablonunda 52 px.
   Taban kuralın özgüllüğü (0,1,0) bilerek düşük: kendi değeri olan sayfalar (anasayfa 0; kategori ve
   ürün 40 = kırıntı şeridi; müşteri sayfaları 170) etkilenmez. */
.master-wrapper-content {
    padding-top: 32px;
}

@media all and (min-width: 1201px) {
    .master-wrapper-content {
        padding-top: 48px;
    }

    /* 1200.css'in 120 px'i → alt genişliklerdeki gibi yalnız kırıntı şeridi kadar */
    .html-category-page .master-wrapper-content {
        padding-top: 40px;
    }
}

/* ── Katalog kategorisi sayfası (014, onaylı mockup 5 Ağu 2026) ──────────────────────────────────────
   Bu sayfa 014'e kadar hiç tasarlanmadı; buradaki her kural yeni. Kapsam `.cemay-catalog-page` altında
   (İlke III): şablonu yalnız üç kategori seçebiliyor, kurallar da başka hiçbir sayfaya sızmıyor.

   SATIR kalıbının gerekçesi ölçümde: katalogda dokuz hattın BİRİNİN fotoğrafı var, sekiz ünitenin
   ikisinin. Fotoğraf öncelikli bir ızgara burada sekiz boş çerçeve demek. */
.cemay-catalog-head {
    padding: 34px 0 30px;
    text-align: center;
    background: var(--cemay-white);
    border-bottom: 1px solid var(--cemay-border);
}

/* Dal etiketi (015 / FR-011). İki dalın bölüm kategorileri aynı adı taşıyor ("Uygulamalar", "Üniteler");
   bu etiket sayfanın hangi dala ait olduğunu söyleyen tek işaret. Sayımla aynı dili konuşur — küçük,
   aralıklı, kapitalize — ama başlığın ÜSTÜNDE durur, çünkü okunma sırası önce dal sonra bölüm.
   Kontrast beyaz zemine (--cemay-white) göre ölçüldü: steel-400 5.1:1, hover'daki red-600 5.8:1 (AA). */
.cemay-catalog-branch {
    display: block;
    margin-bottom: 8px;
    font-family: var(--cemay-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cemay-steel-400);
}

.cemay-catalog-branch:hover,
.cemay-catalog-branch:focus-visible {
    color: var(--cemay-red-600);
}

.cemay-catalog-head h1 {
    margin: 0;
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-catalog-rule {
    width: 64px;
    height: 3px;
    margin: 14px auto 0;
    background: var(--cemay-red-500);
}

.cemay-catalog-lead {
    max-width: 64ch;
    margin: 14px auto 0;
}

.cemay-catalog-lead p {
    margin: 0;
    font-size: 15px;
    color: var(--cemay-steel-600);
    text-transform: none;
}

.cemay-catalog-count {
    display: block;
    margin-top: 10px;
    font-family: var(--cemay-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cemay-steel-400);
}

/* Alt kategori segmenti — menüdeki kalıbın aynısı: seçili olan kırmızı alt çizgiyle işaretli */
.cemay-catalog-segs {
    display: flex;
    justify-content: center;
    background: var(--cemay-white);
    border-bottom: 1px solid var(--cemay-border);
}

.cemay-catalog-seg {
    padding: 15px 26px;
    border-bottom: 3px solid transparent;
    font-family: var(--cemay-font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cemay-steel-600);
    text-decoration: none;
}

.cemay-catalog-seg:hover {
    color: var(--cemay-red-600);
}

.cemay-catalog-seg.is-current {
    color: var(--cemay-ink-900);
    border-bottom-color: var(--cemay-red-500);
}

/* Liste */
.cemay-catalog-list {
    margin-top: 26px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
}

.cemay-catalog-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cemay-border);
    color: inherit;
    text-decoration: none;
}

.cemay-catalog-row:last-child {
    border-bottom: 0;
}

.cemay-catalog-row:hover {
    background: var(--cemay-gray-050);
}

.cemay-catalog-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--cemay-border);
    background: var(--cemay-gray-100);
}

.cemay-catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cemay-catalog-name {
    margin: 0 0 5px;
    font-family: var(--cemay-font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cemay-ink-900);
}

.cemay-catalog-row:hover .cemay-catalog-name {
    color: var(--cemay-red-600);
}

/* iki satır: teknik cümleler uzun ve satır yükseklikleri arasında tırtık bırakıyor */
.cemay-catalog-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.5;
    text-transform: none;
    color: var(--cemay-steel-600);
}

.cemay-catalog-go {
    font-family: var(--cemay-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cemay-red-600);
}

.cemay-catalog-go:after {
    content: "\2192";
    margin-left: 8px;
}

.cemay-catalog-row:focus-visible {
    outline: 2px solid var(--cemay-red-600);
    outline-offset: -2px;
}

/* Mobilde de SATIR kalır, kart olmaz: mockup'ın ilk denemesinde görsel tam genişliğe açılıyordu ve
   kartın en büyük öğesi oluyordu — fotoğrafı olmayan bir katalogda telefonda arka arkaya dev boş
   dikdörtgenler demek. 104 px künye yeter; on yedi öğe taranabilir kalır. */
@media (max-width: 767px) {
    /* Tema kırıntı yolunu mobilde MUTLAK konumluyor ve kısa olduğunu varsayıyor. Üç kademeli yolumuz
       ("Anasayfa / Sistem ve Üniteler / Kaplama Sistemleri") iki satıra taşıyor ve başlığın üstüne
       biniyordu — ölçüldü: kırıntı 61→141, içerik 101'de başlıyor. Yalnız bu sayfada akışa alınır
       (gövde sınıfı `html-cemay-catalog-page`, İlke III). */
    .html-cemay-catalog-page .breadcrumb {
        position: static;
        /* `left:50%` + `translateX(-50%)` çiftinin ikinci yarısı: `static` yapınca `left` düşüyor ama
           transform kalıyor ve kutuyu 195 px sola kaydırıyordu (ölçüldü: -195→195) */
        transform: none;
    }

    /* Tema kırıntı şeridine 40 px yer ayırıyor; şerit akışa girince o yer header'ın altında boş bir
       bant olarak kalıyordu (ölçüldü: header 61, şerit 101'de başlıyor) */
    .html-cemay-catalog-page .master-wrapper-content {
        padding-top: 0;
    }

    .cemay-catalog-head {
        padding: 22px 0 18px;
    }

    .cemay-catalog-head h1 {
        font-size: 24px;
    }

    .cemay-catalog-segs {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .cemay-catalog-seg {
        padding: 13px 18px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Tema bu genişlikte metni ORTALIYOR; ikonu/künyesi solda olan bir satır ortalanmış metinle
       okunmaz (değer şeridinde yaşanan aynı miras). Satır kendi hizasını yazar. */
    .cemay-catalog-row {
        grid-template-columns: 104px 1fr;
        gap: 14px;
        align-items: start;
        padding: 14px 16px;
        text-align: left;
    }

    .cemay-catalog-name {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .cemay-catalog-desc {
        font-size: 13.5px;
    }

    .cemay-catalog-go {
        grid-column: 2;
        margin-top: 8px;
        font-size: 12.5px;
    }
}

/* Blog kartındaki görsel TAMAMI görünür (5 Ağu 2026, Ahmet). Tema `object-fit: cover` kullanıyor;
   fotoğrafta bu doğru, ama blog görsellerimizin bir kısmı infografik — kırpılınca tablosunun yarısı
   kayboluyordu (karede görüldü). `contain` + nötr zemin: kadraj ne olursa olsun görselin tamamı
   okunur, kutu ölçüsü sabit kaldığı için kartlar arasında tırtık oluşmaz. */
.post-picture img,
.blog-posts .post-picture img {
    object-fit: contain;
    background: var(--cemay-gray-050);
}

/* Ürün küçük görselleri ana görselin ALTINDA (5 Ağu 2026, Ahmet).
   Vendor şeridi sola dikey koyuyordu; CloudZoom'un slick karuseli `data-vertical` ile besleniyor ve o
   da `CloudZoomSettings.IsPictureThumbnailsCarouselVertical-Venture` ayarından geliyor — ayar seeder'da
   `false`a çekildi, karusel yatay kuruluyor. Burada kalan iş yerleşim: iki blok float'tan çıkıp alt
   alta diziliyor ve ana görselin altındaki boş şerit şeride dönüyor. */
.sevenspikes-cloudzoom-gallery .picture-wrapper,
.sevenspikes-cloudzoom-gallery .picture-thumbs {
    float: none;
    width: 100%;
}

.sevenspikes-cloudzoom-gallery .picture-thumbs {
    height: auto;
    margin-top: 14px;
}

/* Şeridin kaydırma okları iki yanda (24 Eyl 2026, Ahmet: "thumbnail imagelerin en sağında ve en solunda
   olmalıydılar"; mockup A, her zaman görünür). Yukarıdaki kural şeridi yataya çevirmişti ama okların
   vendor kuralı dikey şerit içindi: oklar şeridin üstünde ve altında, simgeler yukarı/aşağı, yalnız galerinin
   üzerine gelince görünür. Okları CloudZoom yalnız 1201px ve üstünde basar (daha darda nokta göstergesi),
   4'ten fazla resimde görünürler. Şerit iki yandan 44px daralır; ok karelerin tam yüksekliğinde, ilk ve
   son karenin yanında durur. Vendor'ın yukarı/aşağı glifi -90° döndürülür (yukarı → sol, aşağı → sağ) ve
   7px'ten 12px'e büyütülür — 7px'te ok seçilmiyordu. */
.sevenspikes-cloudzoom-gallery .picture-thumbs button + .slick-list {
    margin: 0 44px;
}

.sevenspikes-cloudzoom-gallery .picture-thumbs .slick-prev,
.sevenspikes-cloudzoom-gallery .picture-thumbs .slick-next {
    top: 0;
    bottom: 0;
    height: auto;
    margin: 0;
    opacity: 1;
}

.sevenspikes-cloudzoom-gallery .picture-thumbs .slick-prev {
    left: 0;
    right: auto;
}

.sevenspikes-cloudzoom-gallery .picture-thumbs .slick-next {
    left: auto;
    right: 0;
}

.sevenspikes-cloudzoom-gallery .picture-thumbs .slick-prev:before,
.sevenspikes-cloudzoom-gallery .picture-thumbs .slick-next:before {
    width: 12px;
    height: 13px;
    font-size: 12px;
    line-height: 13px;
    transform: rotate(-90deg);
}

/* Tarayıcının otomatik doldurma vurgusu (5 Ağu 2026, Ahmet: "bülten alanı ilk yüklemede siyah").
   Chrome kayıtlı bir adres önerdiğinde alana kendi zeminini basıyor ve odak değişene kadar öyle
   kalıyor; kullanıcının temasına göre bu zemin koyu geliyor ve alan okunmuyordu. `background-color`
   bu sözde-sınıfta geçersiz — tek yol kutunun içini dolduran `box-shadow`. Metin rengi de ayrıca
   sabitlenir, yoksa koyu zemin için seçilmiş beyazı kalıyor. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--cemay-white) inset;
    -webkit-text-fill-color: var(--cemay-ink-900);
    caret-color: var(--cemay-ink-900);
}

/* ── Vendor fontunun sızdığı iki yüzey (5 Ağu 2026, Ahmet: "ana menü fontuna bak, bir de sayfa
   içindeki fonta bak") ─────────────────────────────────────────────────────────────────────────────
   Ölçüldü: sitenin yazdığı her başlık Barlow Semi Condensed (bölüm başlığı 30px/700), ama tema
   tarafından basılan iki yüzey Venture'ın kendi fontunda kalmıştı — blog bölümünün başlığı
   "Fjalla One 15px/400", anasayfa uygulama kartlarının başlıkları "Fjalla One 22.5px/400". Aynı
   sayfada iki tipografi oluyordu ve blog başlığı bir bölüm başlığı olduğu hâlde gövde metninden
   küçük duruyordu.

   Blog başlığı sitenin bölüm başlığı ölçüsüne alınır; kart başlığı kendi ölçüsünde kalır ama
   ailesi ve ağırlığı düzelir — kart başlığı bir bölüm başlığı değildir. */
.rich-blog-homepage > .title {
    font-family: var(--cemay-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--cemay-ink-900);
}

.item-grid .item-box .category-item h2.title,
.item-grid .item-box .category-item h2.title a {
    font-family: var(--cemay-font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--cemay-ink-900);
}

/* ── Blackout Kaplama Hattı ürün sayfası — hat çizimi animasyonu ve ışık kesimi kartı ────────────────
   17 Eyl 2026, Ahmet mockup turundan "B ve D" seçeneklerini seçti: (D) katalog çiziminin üstünde
   kumaşın yolu, (B) opak katların ışığı kesişi. İşaretleme CemayProductFigures'ta; ürün gövdesine
   CemayContentSeeder koyar. Onaylı mockup: design/015-mockup-blackout-animasyon.html.

   Betik yok: ikisi de saf SVG + CSS. Temel hâl bitmiş karedir (yol çizili, üç kat binmiş, ışık kesik);
   animasyon yalnız kullanıcı hareket istiyorsa eklenir (prefers-reduced-motion: no-preference). */
.cemay-blkfig,
.cemay-lightfig {
    margin: 24px 0;
    padding: 18px 24px 14px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
}

/* Çizim 3000 birim geniş ve 48,5 m'lik bir hattı gösteriyor: gövde sütununda tam genişliğe oturur,
   640px'in altına küçülmez — o noktada kendi kutusunda yana kayar (sayfa taşmaz) ve ipucu görünür. */
.cemay-blkfig-scroll {
    overflow-x: auto;
}

.cemay-blkfig-svg {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
}

.cemay-blkfig-web {
    fill: none;
    stroke: var(--cemay-red-500);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cemay-blkfig-flow {
    fill: none;
    stroke: var(--cemay-white);
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: 0;
}

.cemay-blkfig-mark {
    fill: var(--cemay-white);
    stroke: var(--cemay-steel-600);
    stroke-width: 4;
}

.cemay-blkfig-markno {
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 46px;
    fill: var(--cemay-ink-900);
}

/* COALIS kaplama makinesi — CEMAY'ın ürettiği tek ünite, hizmet şemalarındaki gibi kırmızı rozet */
circle.cemay-blkfig-mark-cemay {
    fill: var(--cemay-red-500);
    stroke: var(--cemay-red-500);
}

text.cemay-blkfig-mark-cemay {
    fill: var(--cemay-white);
}

.cemay-blkfig-leader {
    stroke: var(--cemay-steel-400);
    stroke-width: 3;
    stroke-dasharray: 12 9;
}

/* İki satıra bölünmüş hat (sentetik deri, 25 Eyl 2026 — 76 m tek şeritte ~50 px kalıyordu, Ahmet B'yi seçti):
   birinci satırın sonundan ikinci satırın başına giden kesikli, soluk kırmızı bağlantı. Yolun kendisi değil,
   devamını gösterir; bu yüzden akmaz ve çizilme animasyonu almaz. */
.cemay-blkfig-link {
    fill: none;
    stroke: var(--cemay-red-500);
    stroke-opacity: .45;
    stroke-width: 4;
    stroke-dasharray: 14 12;
}

.cemay-blkfig-hint {
    display: none;
    margin: 6px 0 0;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-steel-400);
}

/* 14 ünite: ızgara, sıra numarası kumaşın üniteye geliş sırası (hat sağdan sola çalışır) */
.cemay-blkfig-keys {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 20px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-steel-600);
}

.cemay-blkfig-keys li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cemay-blkfig-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--cemay-steel-600);
    border-radius: 50%;
    font-family: var(--cemay-font-display);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--cemay-ink-900);
}

.cemay-blkfig-key-cemay {
    border-color: var(--cemay-red-500);
    background: var(--cemay-red-500);
    color: var(--cemay-white);
}

.cemay-blkfig figcaption,
.cemay-lightfig figcaption {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--cemay-border);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cemay-steel-600);
}

.cemay-lightfig-svg {
    display: block;
    width: 100%;
    height: auto;
}

.cemay-lightfig-bulb-glow {
    fill: #FBF0CE;
    stroke: #E0C874;
    stroke-width: 1.2;
}

.cemay-lightfig-bulb {
    fill: #F7D774;
    stroke: #D9B84F;
    stroke-width: 1;
}

.cemay-lightfig-rays line {
    stroke: #D9B84F;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.cemay-lightfig-pass1 {
    fill: #BFC2C6;
}

.cemay-lightfig-pass2 {
    fill: #7E8287;
}

.cemay-lightfig-pass3 {
    fill: var(--cemay-charcoal-900);
}

.cemay-lightfig-passlbl {
    fill: var(--cemay-steel-600);
}

/* kesiti geçen ışık: son kat bindiğinde yok — temel hâl budur */
.cemay-lightfig-through {
    opacity: 0;
}

.cemay-lightfig-eye {
    fill: var(--cemay-white);
    stroke: var(--cemay-steel-600);
    stroke-width: 1.2;
}

.cemay-lightfig-pupil {
    fill: var(--cemay-steel-600);
}

.cemay-lightfig-cap {
    font-family: var(--cemay-font-body);
    font-size: 12px;
    fill: var(--cemay-steel-600);
}

/* dört durum yazısı üst üste durur; temel hâlde yalnız sonuncusu görünür */
.cemay-lightfig-state {
    font-family: var(--cemay-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    fill: var(--cemay-ink-900);
    opacity: 0;
}

.cemay-lightfig-state3 {
    opacity: 1;
}

@media (max-width: 767px) {
    .cemay-blkfig,
    .cemay-lightfig {
        padding: 14px 12px 12px;
    }

    .cemay-blkfig-hint {
        display: block;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cemay-blkfig-web {
        stroke-dasharray: 1 1;
        stroke-dashoffset: 1;
        animation: cemay-blkfig-draw 3.2s ease-out forwards;
    }

    .cemay-blkfig-flow {
        stroke-dasharray: .003 .014;
        animation: cemay-blkfig-flow 1.2s linear infinite 3s;
    }

    /* İki satırlı hatta ikinci satır birincinin, ayrılan kollar ikincinin çizimi bitince başlar */
    .cemay-blkfig-web.cemay-blkfig-seq2 {
        animation-delay: 2.6s;
    }

    .cemay-blkfig-flow.cemay-blkfig-seq2 {
        animation-delay: 5.6s;
    }

    .cemay-blkfig-web.cemay-blkfig-seq3 {
        animation-delay: 5.4s;
    }

    .cemay-blkfig-flow.cemay-blkfig-seq3 {
        animation-delay: 8.4s;
    }

    .cemay-lightfig-pass,
    .cemay-lightfig-through,
    .cemay-lightfig-state {
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-timing-function: steps(1, end);
    }

    .cemay-lightfig-pass1 {
        animation-name: cemay-lightfig-pass1;
    }

    .cemay-lightfig-pass2 {
        animation-name: cemay-lightfig-pass2;
    }

    .cemay-lightfig-pass3 {
        animation-name: cemay-lightfig-pass3;
    }

    .cemay-lightfig-through {
        animation-name: cemay-lightfig-through;
        animation-timing-function: ease-in-out;
    }

    .cemay-lightfig-state0 {
        animation-name: cemay-lightfig-state0;
    }

    .cemay-lightfig-state1 {
        animation-name: cemay-lightfig-state1;
    }

    .cemay-lightfig-state2 {
        animation-name: cemay-lightfig-state2;
    }

    .cemay-lightfig-state3 {
        animation-name: cemay-lightfig-state3;
    }
}

@keyframes cemay-blkfig-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes cemay-blkfig-flow {
    from {
        opacity: .95;
        stroke-dashoffset: 0;
    }

    to {
        opacity: .95;
        stroke-dashoffset: -.017;
    }
}

@keyframes cemay-lightfig-pass1 {
    0%, 14% {
        opacity: 0;
    }

    15%, 100% {
        opacity: 1;
    }
}

@keyframes cemay-lightfig-pass2 {
    0%, 34% {
        opacity: 0;
    }

    35%, 100% {
        opacity: 1;
    }
}

@keyframes cemay-lightfig-pass3 {
    0%, 54% {
        opacity: 0;
    }

    55%, 100% {
        opacity: 1;
    }
}

@keyframes cemay-lightfig-through {
    0%, 14% {
        opacity: 1;
    }

    15%, 34% {
        opacity: .5;
    }

    35%, 54% {
        opacity: .2;
    }

    55%, 100% {
        opacity: 0;
    }
}

@keyframes cemay-lightfig-state0 {
    0%, 14% {
        opacity: 1;
    }

    15%, 100% {
        opacity: 0;
    }
}

@keyframes cemay-lightfig-state1 {
    0%, 14% {
        opacity: 0;
    }

    15%, 34% {
        opacity: 1;
    }

    35%, 100% {
        opacity: 0;
    }
}

@keyframes cemay-lightfig-state2 {
    0%, 34% {
        opacity: 0;
    }

    35%, 54% {
        opacity: 1;
    }

    55%, 100% {
        opacity: 0;
    }
}

@keyframes cemay-lightfig-state3 {
    0%, 54% {
        opacity: 0;
    }

    55%, 100% {
        opacity: 1;
    }
}

/* ── Branda Kaplama Hattı ürün sayfası — hat yerleşim çizimi ─────────────────────────────────────────
   23 Eyl 2026. Ahmet: hattın hazır çizimlerinden illüstrasyon ya da grafik üretilmez; çizim olduğu gibi
   gösterilir. Bu yüzden blackout figürünün aksine üstünde yol, rozet ya da ünite adı yok — yalnız çizim ve
   altyazı. İşaretleme CemayProductFigures.BuildTarpaulinDrawing'de; ürün gövdesine CemayContentSeeder koyar.
   Çizim 3000×368 px, 40 m'yi aşan bir hattın yan görünüşü: gövde sütununa tam genişlikte oturur, 640px'in
   altına küçülmez — orada kendi kutusunda yana kayar (sayfa taşmaz) ve ipucu görünür (blackout kuralı). */
.cemay-drawfig {
    margin: 24px 0;
    padding: 18px 24px 14px;
    background: var(--cemay-white);
    border: 1px solid var(--cemay-border);
}

.cemay-drawfig-scroll {
    overflow-x: auto;
}

.cemay-drawfig-scroll img {
    display: block;
    width: 100%;
    min-width: 640px;
    max-width: none;
    height: auto;
}

.cemay-drawfig-hint {
    display: none;
    margin: 6px 0 0;
    font-family: var(--cemay-font-body);
    font-size: 13px;
    color: var(--cemay-steel-400);
    text-align: left;
}

.cemay-drawfig figcaption {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--cemay-border);
    font-family: var(--cemay-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cemay-steel-600);
    text-align: left;
}

@media (max-width: 767px) {
    .cemay-drawfig {
        padding: 14px 12px 12px;
    }

    .cemay-drawfig-hint {
        display: block;
    }
}