/* ==========================================================================
   Anasayfa (views/home.php) — yalnızca bu sayfaya özgü düzen ve hero sanatı.
   Premium Revizyon Raporu akışı: hero · identity · SC-CO₂ (film + tesis) · hammaddeden moleküle ·
   what we create · kapanış. Ortak bileşenler (btn, eyebrow, section-head, cta-band) css/fuwell.css'ten.

   1 Hero · 2 Hero sanatı · 3 FUWELL / bilim · 4 SC-CO₂ · 5 Hammaddeden moleküle
   6 What we create · 7 Kapanış · 8 Hareket
   ========================================================================== */

/* 1 — Hero ------------------------------------------------------------------ */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: max(680px, min(100svh, 1000px));
    padding-block: calc(var(--header-h) + clamp(36px, 6vh, 72px)) clamp(88px, 12vh, 128px);
    background: var(--c-ink-950);
    color: var(--t-muted);
}
/* metin tarafında okunabilirlik gölgesi (sanatın solda sönümlenen kısmının üstünde) */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(12, 16, 10, .9) 0%, rgba(12, 16, 10, .55) 26%, rgba(12, 16, 10, 0) 42%),
        linear-gradient(180deg, rgba(12, 16, 10, .55) 0%, rgba(12, 16, 10, 0) 22%, rgba(12, 16, 10, 0) 82%, rgba(12, 16, 10, .7) 100%);
}
.hero > .hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__text { max-width: min(860px, 100%); }
.hero .eyebrow { color: var(--c-gold-300); }
.hero__title {
    font-size: clamp(42px, 4.45vw, 74px);
    line-height: 1.04;
    letter-spacing: -.014em;
    color: var(--c-ivory-50);
}
.hero__lead { margin-top: clamp(22px, 2.3vw, 32px); max-width: 47ch; }
.hero__lead p { font-size: clamp(17px, 1.28vw, 19px); line-height: 1.62; color: rgba(239, 233, 220, .82); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: clamp(30px, 3.4vw, 46px); }
.hero__alt { color: var(--c-ivory-50); }
.hero__alt .btn-play__icon i { margin-left: 0; }
.hero__alt:hover .btn-play__icon i { transform: translateX(2px); }
.hero__alt .btn-play__icon i { transition: transform .45s var(--ease); }

/* Sağ kenar: yan not (üst) + kaydırma işareti (alt) — içerik kabına hizalı */
.hero__rail {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.hero__side {
    position: absolute;
    top: calc(var(--header-h) + clamp(34px, 6vh, 64px));
    right: var(--gutter);
    display: grid;
    gap: 5px;
    padding-top: 18px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(239, 233, 220, .76);
}
.hero__side::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 1px; background: var(--c-gold-400); }
.hero__scroll {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(28px, 5vh, 48px);
    display: grid;
    justify-items: center;
    gap: 12px;
    pointer-events: auto;
    color: var(--c-ivory-50);
}
.hero__scroll-ring {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(239, 233, 220, .3);
    border-radius: 50%;
    transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.hero__scroll-ring i { font-size: 18px; }
.hero__scroll:hover .hero__scroll-ring { border-color: var(--c-gold-400); background: rgba(198, 164, 106, .1); color: var(--c-gold-300); }
.hero__scroll-label { font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: rgba(239, 233, 220, .7); margin-right: -.24em; }

/* 2 — Hero sanatı ------------------------------------------------------------ */
/* Kare sahne (1000×1000 birim): katmanlar aynı viewBox'ı paylaşır; HTML yüzdeleri SVG koordinatına denk gelir */
.hero__art {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: calc(min(5vw, 80px) * -1);
    width: min(68vw, 118svh, 1200px);
    aspect-ratio: 1;
    margin: 0;
    transform: translateY(-47%);
    pointer-events: none;
}
/* Yalnız tane sahnesi kenarlarda karanlığa söner; molekül katmanı maskelenmez (etiket net kalır) */
.hm-scene {
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 58% 56% at 57% 54%, #000 64%, transparent 100%);
    mask-image: radial-gradient(ellipse 58% 56% at 57% 54%, #000 64%, transparent 100%);
}
.hm-scene--front {
    -webkit-mask-image: radial-gradient(ellipse 66% 64% at 55% 52%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 66% 64% at 55% 52%, #000 70%, transparent 100%);
}
.hm-layer { position: absolute; inset: 0; will-change: transform; }
.hm-layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-photo { position: absolute; inset: 0; }
.hm-photo picture, .hm-photo img { width: 100%; height: 100%; object-fit: cover; }
.hm-photo img { filter: saturate(.88) contrast(1.04) brightness(.86); }
.hm-bokeh {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: var(--o, .4);
    background: radial-gradient(circle, rgba(222, 84, 98, .7) 0%, rgba(168, 36, 54, .34) 42%, rgba(120, 20, 36, 0) 70%);
}
.hm-loose { position: absolute; aspect-ratio: 1; }
.hm-loose > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__grain {
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 180px 180px;
    opacity: .06;
    mix-blend-mode: overlay;
    -webkit-mask-image: radial-gradient(ellipse 58% 56% at 57% 54%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 58% 56% at 57% 54%, #000 50%, transparent 100%);
}
/* Molekül katmanı — çizgiler sahneyle ölçeklenir (vector-effect yok → çizim animasyonu birebir);
   --hm-lw: sahne biriminde çizgi kalınlığı (1000 birim ≈ sanatın piksel genişliği), kırılımlara göre ayarlanır */
.hero__art { --hm-lw: 1.15; --t0: 1.45s; --st: .17s; }
.hm-mol { color: var(--c-gold-300); }
.hm-mol path[class*="bond-"] { stroke-width: calc(var(--hm-k, 2.3) * var(--hm-lw) * 1.3px); }
.hm-link, .hm-leader { stroke-width: calc(var(--hm-lw) * 1px); }
.hm-node { transform-box: fill-box; transform-origin: center; }
.hm-bloom { mix-blend-mode: screen; }
.hm-callout {
    position: absolute;
    display: grid;
    justify-items: end;
    gap: 5px;
    margin: 0;
    transform: translate(-100%, -50%);
    text-align: right;
    white-space: nowrap;
}
.hm-callout__name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .26em;
    margin-right: -.26em;
    text-transform: uppercase;
    color: var(--c-ivory-50);
}
.hm-callout__src {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .2em;
    margin-right: -.2em;
    text-transform: uppercase;
    color: rgba(239, 233, 220, .62);
}
.hm-callout--static { right: 8%; top: 12%; transform: none; }

/* Tablet ve mobil: metin önce, sanat altında (akış içinde, kenardan kenara) */
@media (max-width: 1023px) {
    .hero {
        display: block;
        min-height: 0;
        padding-bottom: clamp(40px, 8vw, 72px);
    }
    .hero::after { display: none; }
    .hero__text { max-width: 640px; }
    .hero__art {
        position: relative;
        z-index: 0;
        top: auto;
        right: auto;
        left: 50%;
        width: min(112vw, 760px);
        margin-top: clamp(-8px, -2vw, 0px);
        transform: translateX(-53%);
    }
    /* dar ekranda etiket kılavuz çizginin üstüne, sağa doğru açılır (sol kenarda kesilmesin) */
    .hm-callout { transform: translate(-10%, -125%); justify-items: start; text-align: left; }
    .hm-callout__name, .hm-callout__src { margin-right: 0; }
    .hm-leader { display: none; }
    .hm-scene {
        -webkit-mask-image: radial-gradient(ellipse 56% 52% at 58% 55%, #000 58%, transparent 100%);
        mask-image: radial-gradient(ellipse 56% 52% at 58% 55%, #000 58%, transparent 100%);
    }
    .hero__rail { position: relative; inset: auto; z-index: 2; margin-top: clamp(-40px, -6vw, -16px); }
    .hero__side { position: relative; top: auto; right: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 10.5px; }
    .hero__scroll { display: none; }
}
@media (max-width: 599px) {
    .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
    .hero__actions .btn { width: 100%; }
    .hero__alt { justify-content: space-between; min-height: 48px; padding: 0 2px 0 4px; }
    .hm-callout__name { font-size: 10.5px; letter-spacing: .22em; margin-right: -.22em; }
    .hm-callout__src { font-size: 9.5px; }
}

/* 3 — FUWELL / bilim (identity) --------------------------------------------- */
.home-id { padding-block: clamp(72px, 8.5vw, 128px); }
.home-id__grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
.home-id__title { font-size: clamp(34px, 3.4vw, 54px); }
.home-id__lead { margin-top: clamp(18px, 2vw, 26px); max-width: 54ch; }
.home-id__lead p { font-size: var(--fs-lead); line-height: 1.6; color: var(--t-lead); }
.home-id__verbs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 28px;
    margin-top: clamp(36px, 4vw, 56px);
}
.home-id__verb { display: grid; justify-items: center; align-content: start; gap: 12px; padding-inline: 8px; text-align: center; }
.home-id__verb + .home-id__verb { border-left: 1px solid var(--t-line); }
.home-id__icon { font-size: 30px; line-height: 1; color: var(--t-strong); }
.home-id__label { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--t-strong); }
@media (max-width: 559px) {
    .home-id__verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-id__verb:nth-child(odd) { border-left: 0; }
}
/* Sağ panel: fotoğraf ya da koyu zeminde gold iskelet formülü; köşede kısa not */
.home-id__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(340px, 34vw, 520px);
    margin: 0;
    border-radius: var(--radius);
    background:
        radial-gradient(80% 90% at 78% 18%, rgba(85, 101, 46, .55), transparent 70%),
        var(--c-ink-850);
    background:
        radial-gradient(80% 90% at 78% 18%, color-mix(in srgb, var(--accent, #55652E) 75%, transparent), transparent 70%),
        radial-gradient(60% 60% at 10% 100%, rgba(12, 16, 10, .6), transparent 70%),
        var(--c-ink-850);
    color: var(--c-gold-300);
}
.home-id__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: var(--grain);
    background-size: 180px 180px;
    opacity: .05;
}
.home-id__panel::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 3;
    border: 1px solid rgba(220, 194, 143, .22);
    border-radius: 3px;
    pointer-events: none;
}
/* molekül üst bölgede, not alt köşede → çakışmazlar (svg mutlak: grid içinde yüzde yükseklik çözülmüyor) */
.home-id__mol { position: absolute; inset: 12% 9% 34% 9%; }
.home-id__mol .molecule { position: absolute; inset: 0; width: 100%; height: 100%; --mol-color: var(--c-gold-300); --mol-stroke: 1.2px; }
.home-id__panel.is-photo picture,
.home-id__panel.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-id__panel.is-photo .home-id__note { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.home-id__panel.is-photo::before { opacity: 1; background: linear-gradient(200deg, transparent 45%, rgba(12, 16, 10, .55)); }
.home-id__note {
    position: absolute;
    z-index: 4;
    right: clamp(28px, 3.4vw, 52px);
    bottom: clamp(28px, 3.4vw, 52px);
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--c-ivory-50);
}
.home-id__note::after { content: ""; width: 40px; height: 1px; margin-top: 14px; background: var(--c-gold-400); }
@media (min-width: 1100px) {
    .home-id__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(48px, 6vw, 104px); }
    .home-id__grid.is-solo { grid-template-columns: minmax(0, 1fr); }
    .home-id__panel { align-self: stretch; }
}

/* 4 — SC-CO₂ technology: film + mikro kanıtlar + ARŞEN geçişi + tek tesis karesi -- */
.home-sc__grid {
    display: grid;
    gap: clamp(32px, 4vw, 48px);
    grid-template-areas: "text" "media" "action";
}
.home-sc__text { grid-area: text; max-width: 560px; }
.home-sc__media { grid-area: media; min-width: 0; }
.home-sc__action { grid-area: action; }
.home-sc__title { font-size: clamp(32px, 3vw, 48px); }
.home-sc__body { margin-top: clamp(20px, 2vw, 28px); max-width: 46ch; }
.home-sc__body p { font-size: 16.5px; line-height: 1.68; color: var(--t-lead); }
@media (min-width: 1100px) {
    .home-sc__grid {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        grid-template-areas: "text media" "action media";
        grid-template-rows: auto 1fr;
        column-gap: clamp(40px, 4.6vw, 80px);
        row-gap: clamp(28px, 3vw, 40px);
        align-items: start;
    }
    .home-sc__text { align-self: end; }
    .home-sc__media { align-self: center; }
}
/* İki satırlı dış bağlantı butonu (ana metin + küçük kurum adı) */
.btn--stack { padding-block: 12px; padding-left: 24px; text-align: left; white-space: normal; }
.btn__stack { display: grid; gap: 3px; }
.btn__stack small { font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .22em; color: var(--t-gold); }

/* Film kabı: 16:9, video yüklenmeden önce poster (ya da SC-CO₂ kabı çizimi) */
.sc-film {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background:
        radial-gradient(70% 80% at 60% 40%, rgba(111, 122, 90, .2), transparent 70%),
        var(--c-ink-950);
    color: var(--c-gold-400);
}
.sc-film__poster, .sc-film__poster picture, .sc-film__poster img,
.sc-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-film__diagram { position: absolute; inset: 0; padding-block: 6%; }
.sc-film__diagram .fw-visual { display: block; width: auto; height: 100%; max-width: 86%; margin-inline: auto; }
.sc-film__frame {
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 1px solid var(--c-line-dark);
    border-radius: inherit;
    pointer-events: none;
}
.sc-film__video { z-index: 1; opacity: 0; transition: opacity .9s var(--ease); background: transparent; }
.sc-film.is-started .sc-film__video { opacity: 1; }
.sc-film--video::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 46%;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(8, 10, 7, .66), transparent);
}
.sc-film__play {
    position: absolute;
    z-index: 3;
    left: clamp(18px, 3vw, 36px);
    bottom: clamp(18px, 3vw, 32px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-ivory-50);
    text-align: left;
    transition: opacity .5s var(--ease);
}
.sc-film__play-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(239, 233, 220, .55);
    border-radius: 50%;
    background: rgba(12, 16, 10, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 20px;
    transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.sc-film__play-icon i { margin-left: 2px; }
.sc-film__play:hover .sc-film__play-icon { background: var(--c-gold-300); border-color: var(--c-gold-300); color: var(--c-ink-950); }
.sc-film__play-text { display: grid; gap: 2px; font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; line-height: 1.15; }
.sc-film__play-text small { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: rgba(239, 233, 220, .72); }
.sc-film.is-playing .sc-film__play { opacity: 0; pointer-events: none; }
.sc-film__controls {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px 14px;
    opacity: 0;
    transition: opacity .5s var(--ease);
}
.sc-film.is-playing .sc-film__controls { opacity: 1; }
.sc-film__toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(239, 233, 220, .4);
    border-radius: 50%;
    background: transparent;
    color: var(--c-ivory-50);
    font-size: 14px;
}
.sc-film__toggle:hover { border-color: var(--c-gold-400); color: var(--c-gold-300); }
.sc-film__bar { flex: 1; height: 1px; background: rgba(239, 233, 220, .22); }
.sc-film__progress { display: block; height: 100%; background: var(--c-gold-300); transform: scaleX(0); transform-origin: left center; }

/* Mikro kanıtlar: üç kısa ifade */
.home-sc__proofs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(20px, 2.2vw, 28px);
}
.sc-proof { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-proof__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--t-gold-line);
    border-radius: 50%;
    color: var(--c-gold-300);
    font-size: 18px;
}
.sc-proof__body { display: grid; gap: 1px; min-width: 0; }
.sc-proof__title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--t-strong); }
.sc-proof__text { font-size: 12.5px; line-height: 1.4; color: var(--t-muted); }
@media (max-width: 719px) {
    .home-sc__proofs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Tek gerçek tesis karesi (kanıt, dekor değil) + opsiyonel küçük HMI detayı */
.home-fc { display: grid; gap: var(--gap); margin-top: clamp(48px, 6vw, 88px); }
.home-sc:not(:has(.home-sc__grid)) .home-fc { margin-top: 0; }
.home-fc__main, .home-fc__detail { position: relative; overflow: hidden; margin: 0; border-radius: var(--radius); background: var(--c-ink-950); }
.home-fc__main { aspect-ratio: 21 / 9; }
.home-fc__main picture, .home-fc__main img,
.home-fc__detail picture, .home-fc__detail img { width: 100%; height: 100%; object-fit: cover; }
.home-fc__main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(20deg, rgba(8, 10, 7, .62), transparent 52%);
}
.home-fc__cap {
    position: absolute;
    z-index: 1;
    left: clamp(20px, 3vw, 40px);
    bottom: clamp(18px, 2.8vw, 36px);
    display: grid;
    gap: 6px;
    max-width: 30ch;
}
.home-fc__label { font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--c-gold-300); }
.home-fc__title { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.15; color: var(--c-ivory-50); }
@media (min-width: 900px) {
    .home-fc:has(.home-fc__detail) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
    .home-fc:has(.home-fc__detail) .home-fc__main { aspect-ratio: 16 / 7; }
}
@media (max-width: 719px) {
    .home-fc__main { aspect-ratio: 4 / 3; }
    .home-fc__detail { aspect-ratio: 16 / 10; }
}

/* 5 — Hammaddeden moleküle -------------------------------------------------- */
.home-rm__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.home-rm__media { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--c-ink-850); }
.home-rm__media picture, .home-rm__media img { width: 100%; height: 100%; object-fit: cover; }
.home-rm__cap {
    position: absolute;
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(12, 16, 10, .58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 11.5px;
    line-height: 1.35;
    letter-spacing: .03em;
    color: var(--c-ivory-50);
}
.home-rm__title { font-size: clamp(36px, 3.6vw, 58px); }
.home-rm__lead { margin-top: clamp(18px, 2vw, 24px); max-width: 48ch; }
.home-rm__lead p { font-size: var(--fs-lead); line-height: 1.6; color: var(--t-lead); }
.home-rm__link { margin-top: clamp(28px, 3vw, 40px); }
@media (min-width: 900px) {
    .home-rm__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(40px, 5.4vw, 96px); }
    .home-rm__grid.is-solo { grid-template-columns: minmax(0, 1fr); }
    .home-rm__media { aspect-ratio: 4 / 5; max-height: 720px; }
}
/* Akış: dar ekranda dikey zincir, geniş ekranda soldan sağa oklarla bağlı beş aşama */
.rm-flow { list-style: none; position: relative; display: grid; margin-top: clamp(32px, 4vw, 52px); }
.rm-flow::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: var(--t-line);
}
.rm-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; align-items: center; padding-block: 10px; }
.rm-step__num {
    grid-row: span 2;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--t-gold-line);
    border-radius: 50%;
    background: var(--t-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--t-strong);
    font-variant-numeric: tabular-nums lining-nums;
    transition: background-color .45s var(--ease), color .45s var(--ease);
}
.rm-step:hover .rm-step__num { background: var(--c-ink-900); color: var(--c-gold-300); }
.rm-step__label { align-self: end; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; color: var(--t-strong); }
.rm-step__text { align-self: start; font-size: 14px; line-height: 1.45; color: var(--t-muted); }
@media (min-width: 1280px) {
    /* yatay akışta metin sütunu geniş: uzun Türkçe etiketler (KARAKTERİZASYON, STANDARDİZASYON) tek satıra sığsın */
    .home-rm__grid:not(.is-solo) { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: clamp(40px, 4.4vw, 80px); }
    .rm-flow { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
    .rm-flow::before { left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); top: 21px; bottom: auto; width: auto; height: 1px; }
    .rm-step { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; justify-items: center; row-gap: 10px; padding: 0 3px; text-align: center; }
    .rm-step__num { grid-row: auto; margin-bottom: 6px; }
    .rm-step__label { align-self: auto; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
    .rm-step__text { align-self: auto; font-size: 13px; }
    /* aşamalar arası ok başı (çizginin üstünde, sütun sınırında) */
    .rm-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 21px;
        left: 100%;
        width: 6px;
        height: 6px;
        border-top: 1px solid var(--t-gold-line);
        border-right: 1px solid var(--t-gold-line);
        transform: translate(-50%, -50%) rotate(45deg);
    }
}

/* 6 — What we create -------------------------------------------------------- */
.home-sol__head { margin-bottom: clamp(36px, 4.4vw, 60px); }
.sol-grid { list-style: none; display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .sol-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sol-grid > li { display: flex; min-width: 0; }
.sol-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--t-line);
    border-radius: var(--radius);
    background: var(--t-surface);
    transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
a.sol-card:hover { border-color: var(--c-gold-500); box-shadow: 0 24px 48px -32px rgba(28, 33, 23, .35); }
.sol-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-ink-850); }
.sol-card__media picture, .sol-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sol-card__media img { transition: transform 1.2s var(--ease); }
a.sol-card:hover .sol-card__media img { transform: scale(1.04); }
.sol-card__media--art {
    display: grid;
    place-items: center;
    background:
        radial-gradient(80% 80% at 70% 20%, rgba(111, 122, 90, .35), transparent 70%),
        var(--c-ink-850);
    background:
        radial-gradient(80% 80% at 70% 20%, color-mix(in srgb, var(--accent, #3A4630) 70%, transparent), transparent 70%),
        var(--c-ink-850);
    color: var(--c-gold-300);
}
.sol-card__media--art .molecule { width: 58%; max-height: 62%; --mol-color: var(--c-gold-300); --mol-stroke: 1.2px; }
.sol-card__media::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(220, 194, 143, .26);
    border-radius: 3px;
    pointer-events: none;
}
.sol-card__body { display: grid; align-content: start; gap: 6px; padding: 18px 48px 22px 20px; }
.sol-card__label { font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .14em; color: var(--t-strong); }
.sol-card__text { font-size: 14px; line-height: 1.45; color: var(--t-muted); }
.sol-card__arrow { position: absolute; right: 18px; bottom: 22px; font-size: 16px; color: var(--t-gold); transition: transform .45s var(--ease); }
a.sol-card:hover .sol-card__arrow { transform: translateX(3px); }
@media (max-width: 559px) {
    .sol-card__body { padding: 14px 14px 16px; }
    .sol-card__label { font-size: 10.5px; letter-spacing: .1em; }
    .sol-card__text { font-size: 13px; }
    .sol-card__arrow { display: none; }
}

/* 7 — Kapanış (cta-band tabanı) -------------------------------------------- */
.home-closing__grid { position: relative; display: grid; gap: clamp(32px, 4vw, 48px); }
.home-closing__title { font-size: clamp(34px, 3.3vw, 52px); }
.home-closing__side { display: grid; gap: 28px; justify-items: start; max-width: 440px; }
.home-closing__tagline {
    display: grid;
    align-content: center;
    padding-left: clamp(22px, 2.4vw, 34px);
    border-left: 1px solid var(--c-line-dark);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 2.1vw, 32px);
    line-height: 1.16;
    color: var(--c-gold-300);
}
@media (min-width: 1100px) {
    .home-closing__grid { grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr) minmax(0, .58fr); column-gap: clamp(40px, 4.4vw, 76px); align-items: center; }
    .home-closing__grid.is-no-tagline { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
    .home-closing__tagline { align-self: stretch; }
}
@media (min-width: 720px) and (max-width: 1099px) {
    .home-closing__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .home-closing__main { grid-column: 1 / -1; }
}

/* 8 — Hareket ----------------------------------------------------------------
   Rapor kuralı: parallax, sürekli süzülme/nabız ve parlama yok. Yalnız açılışta bir kez:
   retikül taneyi seçer → bağlantı çizgisi taneden moleküle yükselir → formül temas atomundan
   iki yöne bağ bağ çizilir (--hl = atomun uzaklığı) → düğümler, etiketler ve künye sırayla belirir.
   Hareket azaltma tercihinde hiçbiri çalışmaz; JS yoksa her şey görünür durumda. */
@media (prefers-reduced-motion: no-preference) {
    /* dasharray "1 2" + ofset 1.01: yuvarlak uçlu çizgilerde başlangıçta nokta kalmaz */
    html.js .hm-mol path[class*="bond-"]:not([style*="fill:currentColor"]),
    html.js .hm-link,
    html.js .hm-leader { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; animation: hm-line .32s linear forwards; }
    html.js .hm-mol path[class*="bond-"] { animation-delay: calc(var(--t0) + var(--hl, 0) * var(--st)); }
    html.js .hm-mol path[class^="atom-"],
    html.js .hm-mol path[style*="fill:currentColor"] { opacity: 0; animation: fw-fade .9s ease forwards; animation-delay: calc(var(--t0) + var(--hl, 0) * var(--st) + .22s); }
    html.js .hm-link { animation: hm-line .8s cubic-bezier(.45, 0, .3, 1) .65s forwards; }
    html.js .hm-leader { animation: hm-line .7s var(--ease) forwards; animation-delay: calc(var(--t0) + var(--hl, 0) * var(--st) + .35s); }
    html.js .hm-node { opacity: 0; animation: hm-node-in 1s var(--ease) forwards; animation-delay: calc(var(--t0) + var(--hl, 0) * var(--st) + .06s); }
    html.js .hm-reticle,
    html.js .hm-bloom { opacity: 0; animation: fw-fade 1.2s ease forwards .3s; }
    html.js .hm-callout { opacity: 0; animation: fw-fade 1s ease forwards; animation-delay: calc(var(--t0) + var(--hl, 0) * var(--st) + .8s); }
}
/* nabız halkası yalnız hareketli sürümün parçasıydı → statik görünümde gizli */
.hm-pulse { display: none; }
@keyframes hm-line { to { stroke-dashoffset: 0; } }
@keyframes hm-node-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }