/* =============================================================
   Karbontex · index.css  (v3 · estetik disiplin)
   - Hero: radial overlay text okunabilir
   - Preview: full-bleed image, alt callout row
   - Modules: rich hero card + büyütülmüş alt kartlar
   - CBAM: cbam-europe-abstract.png bg + solid metric grid
   - Features: hover gradient sweep
   - CTA: cta-atmosphere.png full-bleed
   ============================================================= */


/* =============================================================
   1. HERO — video bg + radial text overlay (okunabilir)
   ============================================================= */
.hero-sec {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-sec .hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg);
}

.hero-sec .hero-video,
.hero-sec .hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    pointer-events: none;
    will-change: transform;
}

.hero-sec .hero-poster {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.6s var(--ease-out-expo);
}

.hero-sec .hero-video {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s var(--ease-out-expo);
}

.hero-sec.is-video-ready .hero-video { opacity: 1; }
.hero-sec.is-video-ready .hero-poster { opacity: 0; }

/* Top fade — navbar arkası */
.hero-sec .hero-top-fade {
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 246, 248, 0.85) 0%, rgba(245, 246, 248, 0) 100%);
}

/* Bottom fade — sonraki section'a geçiş */
.hero-sec .hero-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 280px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 246, 248, 0) 0%, rgba(245, 246, 248, 0.85) 70%, var(--bg) 100%);
}

/* Center radial text-readability overlay — subtitle bölgesi daha güçlü */
.hero-sec .hero-glow {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse 65% 50% at 50% 52%, rgba(245, 246, 248, 0.88) 0%, rgba(245, 246, 248, 0.42) 45%, rgba(245, 246, 248, 0.05) 75%, transparent 90%);
}

.hero-sec .hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: translateY(-2vh);
}

.hero-sec .hero-pill {
    opacity: 0;
    transform: translateY(8px);
}

.hero-sec .hero-title {
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 5.6vw, 5rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.028em;
    color: var(--ink);
    max-width: 16ch;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(14px);
}

/* .title-italic global rule (style.css) — Space Grotesk 700, brand color */

.hero-sec .hero-subtitle {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink);
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(14px);
    padding: 0 8px;
}

.hero-sec .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(14px);
}

.hero-sec .hero-trust {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(14px);
}

.hero-sec .hero-trust-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.hero-sec .hero-trust-label::after {
    content: '';
    width: 16px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .hero-sec { min-height: 620px; }
    .hero-sec .hero-content { gap: 20px; transform: translateY(-1vh); }
    .hero-sec .hero-cta { flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
    .hero-sec .hero-cta .btn { width: 100%; }
    .hero-sec .hero-trust-label { display: none; }
}


/* =============================================================
   2. TRUST — Sektör bento (sade, hairline divided)
   ============================================================= */
.trust-sec {
    padding: 64px 20px 32px;
    background: var(--bg);
}

.trust-sec .trust-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.trust-sec .trust-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.trust-sec .trust-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.trust-sec .trust-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.trust-sec .trust-headline {
    font-size: 0.9375rem;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
}

.trust-sec .trust-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--bg-soft);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04), 0 12px 32px -16px rgba(14, 27, 51, 0.08);
}

.trust-sec .trust-cell {
    padding: 28px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: background 0.3s var(--ease-out-expo);
    overflow: hidden;
    isolation: isolate;
}

.trust-sec .trust-cell + .trust-cell::before {
    content: '';
    position: absolute;
    inset: 22px auto 22px 0;
    width: 1px;
    background: var(--line);
}

.trust-sec .trust-cell:hover { background: rgba(27, 127, 255, 0.03); }

/* Watermark display number behind */
.trust-sec .trust-cell::after {
    content: '';
    position: absolute;
    top: -12px;
    right: -8px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(27, 127, 255, 0.08) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.trust-sec .trust-cell .cell-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.trust-sec .trust-cell .cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    transition: transform 0.4s var(--ease-out-expo);
    flex-shrink: 0;
}

.trust-sec .trust-cell:hover .cell-icon { transform: scale(1.06); }

.trust-sec .trust-cell .cell-icon i { font-size: 14px; }

.trust-sec .trust-cell .cell-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--ink-mute);
    padding: 4px 8px;
    background: var(--bg-2);
    border-radius: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.trust-sec .trust-cell .cell-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.trust-sec .trust-cell .cell-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-top: 6px;
}

.trust-sec .trust-cell .cell-meta {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Mini horizontal bar — relative proportion against max (196 = electricity) */
.trust-sec .trust-cell .cell-bar {
    margin-top: 12px;
    height: 3px;
    background: var(--bg-2);
    border-radius: 2px;
    overflow: hidden;
}

.trust-sec .trust-cell .cell-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-primary));
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.2s var(--ease-out-expo);
}

.trust-sec .trust-cell.is-revealed .cell-bar-fill { transform: scaleX(1); }

@media (max-width: 1024px) {
    .trust-sec .trust-grid { grid-template-columns: repeat(3, 1fr); }
    .trust-sec .trust-cell:nth-child(4)::before,
    .trust-sec .trust-cell:nth-child(5)::before,
    .trust-sec .trust-cell:nth-child(6)::before {
        inset: 0 22px auto 22px;
        width: auto;
        height: 1px;
        top: 0;
    }
}

@media (max-width: 560px) {
    .trust-sec .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-sec .trust-cell + .trust-cell::before { display: none; }
    .trust-sec .trust-cell { border-bottom: 1px solid var(--line); }
    .trust-sec .trust-cell:nth-last-child(-n+2) { border-bottom: none; }
}


/* =============================================================
   3. PREVIEW — full-bleed dashboard, alt callout row
   ============================================================= */
.preview-sec {
    padding: 90px 20px 130px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.preview-sec .preview-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.preview-sec .preview-head {
    text-align: center;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.preview-sec .preview-head h2 {
    font-size: clamp(1.875rem, 3.8vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.024em;
}

/* .title-italic — global rule */

.preview-sec .preview-head p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 600px;
}

.preview-sec .preview-canvas {
    position: relative;
    width: 100%;
    max-width: 1240px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Soft ambient glow */
.preview-sec .preview-canvas::before {
    content: '';
    position: absolute;
    inset: -8% -3% -10% -3%;
    background:
        radial-gradient(60% 50% at 50% 30%, rgba(63, 205, 255, 0.18), transparent 70%),
        radial-gradient(50% 40% at 30% 80%, rgba(27, 127, 255, 0.14), transparent 75%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
}

/* Full-bleed image frame */
.preview-sec .preview-frame {
    position: relative;
    z-index: 2;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-soft);
    box-shadow:
        0 30px 80px -20px rgba(14, 27, 51, 0.20),
        0 0 0 1px rgba(14, 27, 51, 0.06);
    aspect-ratio: 16 / 11;
}

.preview-sec .preview-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.08);
    transform-origin: center;
}

/* Annotation row — kart altında, kart üstünde değil */
.preview-sec .preview-annotations {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--bg-soft);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04);
}

.preview-sec .preview-annot {
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    transition: background 0.3s ease;
    opacity: 0;
    transform: translateY(8px);
}

.preview-sec .preview-annot.is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.7s var(--ease-out-expo);
}

.preview-sec .preview-annot:hover { background: rgba(27, 127, 255, 0.03); }

.preview-sec .preview-annot + .preview-annot::before {
    content: '';
    position: absolute;
    inset: 18px auto 18px 0;
    width: 1px;
    background: var(--line);
}

.preview-sec .preview-annot .annot-bar {
    width: 3px;
    align-self: stretch;
    background: var(--brand-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.preview-sec .preview-annot.scope-1 .annot-bar { background: #1B7FFF; }
.preview-sec .preview-annot.scope-2 .annot-bar { background: #2CC68F; }
.preview-sec .preview-annot.scope-3 .annot-bar { background: #F59E0B; }
.preview-sec .preview-annot.audit .annot-bar { background: var(--ink); }

.preview-sec .preview-annot .annot-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.preview-sec .preview-annot .annot-num {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--ink-mute);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.preview-sec .preview-annot .annot-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.preview-sec .preview-annot .annot-sub {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .preview-sec .preview-annotations { grid-template-columns: repeat(2, 1fr); }
    .preview-sec .preview-annot:nth-child(3)::before { display: none; }
    .preview-sec .preview-annot:nth-child(3),
    .preview-sec .preview-annot:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 540px) {
    .preview-sec { padding: 60px 18px 80px; }
    .preview-sec .preview-annotations { grid-template-columns: 1fr; }
    .preview-sec .preview-annot + .preview-annot::before {
        inset: 0 22px auto 22px;
        width: auto;
        height: 1px;
        top: 0;
    }
    .preview-sec .preview-annot:nth-child(3),
    .preview-sec .preview-annot:nth-child(4) { border-top: none; }
}


/* =============================================================
   4. MODULES — Bento layout (rich hero + bigger sub-cards)
   Grid 6 col, rows: hero (4×2) + 2× side (2×1) + 2× wide (3×1)
   ============================================================= */
.modules-sec {
    padding: var(--section-pad-y) 20px;
    background: var(--bg-2);
    position: relative;
}

.modules-sec .modules-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.modules-sec .modules-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.modules-sec .modules-head-left {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modules-sec .modules-head-left h2 {
    font-size: clamp(1.875rem, 3.8vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.024em;
}

/* .title-italic — global rule */

.modules-sec .modules-head-right {
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modules-sec .modules-head-right p {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

.modules-sec .modules-counter {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modules-sec .modules-counter::before {
    content: '';
    width: 16px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.modules-sec .modules-counter .counter-num {
    color: var(--brand-primary);
    font-weight: 600;
}

/* Bento grid: hero (full row) + 2 yatay sol kolon + 1 dikey sağ kolon row-span 2 */
.modules-sec .modules-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: 14px;
}

.modules-sec .mod-card {
    position: relative;
    background: var(--bg-soft);
    border-radius: 18px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.03);
    min-height: 260px;
}

.modules-sec .mod-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04), 0 18px 40px -16px rgba(14, 27, 51, 0.12);
}

.modules-sec .mod-card:hover .mod-arrow { transform: translate(2px, -2px); color: var(--brand-primary); }

.modules-sec .mod-card .mod-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.modules-sec .mod-card .mod-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--brand-cyan-soft), var(--brand-primary-soft));
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modules-sec .mod-card .mod-icon i { font-size: 18px; }
.modules-sec .mod-card .mod-icon.is-green { background: var(--accent-green-soft); color: var(--accent-green-dark); }

.modules-sec .mod-card .mod-std {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--brand-primary);
    align-self: center;
}

.modules-sec .mod-card .mod-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 27, 51, 0.04);
    color: var(--ink-soft);
    transition: all 0.3s var(--ease-out-expo);
    flex-shrink: 0;
}

.modules-sec .mod-card .mod-arrow i { font-size: 11px; }

.modules-sec .mod-card h3 {
    font-size: 1.375rem;
    line-height: 1.18;
    letter-spacing: -0.014em;
    color: var(--ink);
}

.modules-sec .mod-card p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.modules-sec .mod-card .mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.modules-sec .mod-card .mod-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--bg-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* HERO module — Sera Gazı, dark gradient, asset full-bleed sağa */
.modules-sec .mod-card.mod-hero {
    grid-column: span 12;
    grid-row: span 1;
    background: linear-gradient(140deg, var(--brand-deep) 0%, var(--brand-deep-2) 100%);
    color: var(--ink-on-dark);
    padding: 0;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 380px;
    overflow: hidden;
    isolation: isolate;
}

.modules-sec .mod-card.mod-hero .mod-hero-text {
    padding: 44px;
}

.modules-sec .mod-card.mod-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 100% 0%, rgba(63, 205, 255, 0.28), transparent 70%),
        radial-gradient(40% 50% at 0% 100%, rgba(27, 127, 255, 0.20), transparent 70%);
    pointer-events: none;
}

/* Subtle dot grid pattern overlay — texture for the dark hero */
.modules-sec .mod-card.mod-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
    background-size: 28px 28px;
    mask-image: radial-gradient(80% 80% at 30% 30%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 80% at 30% 30%, #000 30%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.modules-sec .mod-card.mod-hero .mod-hero-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.modules-sec .mod-card.mod-hero .mod-top { align-items: center; }

.modules-sec .mod-card.mod-hero .mod-icon {
    background: rgba(63, 205, 255, 0.12);
    color: var(--brand-cyan);
    border: 1px solid rgba(63, 205, 255, 0.22);
}

.modules-sec .mod-card.mod-hero .mod-std { color: var(--brand-cyan); }

.modules-sec .mod-card.mod-hero .mod-arrow {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-on-dark);
}

.modules-sec .mod-card.mod-hero h3 {
    color: var(--ink-on-dark);
    font-size: 1.875rem;
    line-height: 1.08;
    letter-spacing: -0.022em;
}

.modules-sec .mod-card.mod-hero p {
    color: var(--ink-mute-on-dark);
    font-size: 0.9375rem;
}

.modules-sec .mod-card.mod-hero .mod-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modules-sec .mod-card.mod-hero .mod-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--ink-on-dark);
}

.modules-sec .mod-card.mod-hero .mod-features li i {
    color: var(--brand-cyan);
    font-size: 9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(63, 205, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modules-sec .mod-card.mod-hero .mod-tags {
    margin-top: auto;
    padding-top: 8px;
}

.modules-sec .mod-card.mod-hero .mod-tag {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-on-dark);
}

/* Hero card asset — full bleed sağa */
.modules-sec .mod-card.mod-hero .mod-hero-asset {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    height: 100%;
}

/* Mask sadece media'ya — overlay'ler (KPI, stat) maskelenmesin */
.modules-sec .mod-card.mod-hero .mod-hero-asset > img,
.modules-sec .mod-card.mod-hero .mod-hero-asset > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.9s var(--ease-out-expo);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.10) 6%,
        rgba(0, 0, 0, 0.30) 14%,
        rgba(0, 0, 0, 0.60) 24%,
        rgba(0, 0, 0, 0.85) 34%,
        rgba(0, 0, 0, 0.97) 44%,
        black 55%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.10) 6%,
        rgba(0, 0, 0, 0.30) 14%,
        rgba(0, 0, 0, 0.60) 24%,
        rgba(0, 0, 0, 0.85) 34%,
        rgba(0, 0, 0, 0.97) 44%,
        black 55%);
}

.modules-sec .mod-card.mod-hero:hover .mod-hero-asset > img,
.modules-sec .mod-card.mod-hero:hover .mod-hero-asset > video { transform: scale(1.04); }

/* Floating data callout — Q4 2025 · trend (BEYAZ MİNİMALİST, border yok) */
.modules-sec .mod-card.mod-hero .mod-hero-stat {
    position: absolute;
    bottom: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #FFFFFF;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.25);
}

.modules-sec .mod-card.mod-hero .mod-hero-stat .hs-period {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--ink-mute);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.modules-sec .mod-card.mod-hero .mod-hero-stat .hs-trend {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--accent-green-dark);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.modules-sec .mod-card.mod-hero .mod-hero-stat .hs-trend i { font-size: 11px; }

/* Top-right floating KPI: tCO₂e total — BEYAZ MİNİMALİST */
.modules-sec .mod-card.mod-hero .mod-hero-kpi {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    background: #FFFFFF;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.25);
    text-align: right;
}

.modules-sec .mod-card.mod-hero .mod-hero-kpi .hk-num {
    font-family: var(--font-display);
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-primary);
}

.modules-sec .mod-card.mod-hero .mod-hero-kpi .hk-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-mute);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
}

.modules-sec .mod-card.mod-hero .visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modules-sec .mod-card.mod-hero .visual-head .vh-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-mute-on-dark);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.modules-sec .mod-card.mod-hero .visual-head .vh-period {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--brand-cyan);
    padding: 3px 8px;
    background: rgba(63, 205, 255, 0.10);
    border-radius: 5px;
    letter-spacing: 0.04em;
}

.modules-sec .scope-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modules-sec .scope-row .scope-num {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-mute-on-dark);
    width: 50px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modules-sec .scope-row .scope-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.modules-sec .scope-row .scope-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 1.4s var(--ease-out-expo);
}

.modules-sec .scope-row.scope-1 .scope-bar-fill { background: linear-gradient(90deg, #1B7FFF, #3FCDFF); }
.modules-sec .scope-row.scope-2 .scope-bar-fill { background: linear-gradient(90deg, #2CC68F, #6EE7B7); }
.modules-sec .scope-row.scope-3 .scope-bar-fill { background: linear-gradient(90deg, #F59E0B, #FBBF24); }

.modules-sec .scope-row .scope-val {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-on-dark);
    width: 40px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 500;
}

.modules-sec .visual-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.modules-sec .visual-foot .vf-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modules-sec .visual-foot .vf-stat .vf-num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ink-on-dark);
    letter-spacing: -0.015em;
}

.modules-sec .visual-foot .vf-stat .vf-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--ink-mute-on-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.modules-sec .visual-foot .vf-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.10);
}

/* Sparkline trend — alt yarıda mini line chart */
.modules-sec .mod-card.mod-hero .mod-spark {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modules-sec .mod-card.mod-hero .mod-spark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.modules-sec .mod-card.mod-hero .mod-spark-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-mute-on-dark);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.modules-sec .mod-card.mod-hero .mod-spark-trend {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-green);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.modules-sec .mod-card.mod-hero .mod-spark-trend i { font-size: 9px; }

.modules-sec .mod-card.mod-hero .mod-spark svg {
    width: 100%;
    height: 36px;
    display: block;
    overflow: visible;
}

.modules-sec .mod-card.mod-hero .mod-spark .spark-line {
    fill: none;
    stroke: var(--brand-cyan);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: sparkDraw 2s var(--ease-out-expo) 0.3s forwards;
}

.modules-sec .mod-card.mod-hero .mod-spark .spark-area {
    fill: url(#sparkGradient);
    opacity: 0;
    animation: sparkFade 1.4s var(--ease-out-expo) 1.2s forwards;
}

.modules-sec .mod-card.mod-hero .mod-spark .spark-dot {
    fill: var(--brand-cyan);
    opacity: 0;
    animation: sparkPop 0.6s var(--ease-out-expo) 1.6s forwards;
}

@keyframes sparkDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes sparkFade {
    to { opacity: 0.18; }
}

@keyframes sparkPop {
    to { opacity: 1; }
}

/* Alt 4 kart — ASİMETRİK BENTO: 1 yatay full + 3 dikey poster */
.modules-sec .mod-card.mod-2,
.modules-sec .mod-card.mod-3,
.modules-sec .mod-card.mod-4,
.modules-sec .mod-card.mod-5 {
    padding: 0;
    gap: 0;
    overflow: hidden;
    isolation: isolate;
}

/* mod-2: yatay (col 1-8, row 2), content sol + asset sağ */
.modules-sec .mod-card.mod-2 {
    grid-column: 1 / span 8;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 300px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

/* mod-5: dikey poster sağ kolon (col 9-12, row 2-3 row-span 2) */
.modules-sec .mod-card.mod-5 {
    grid-column: 9 / -1;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column-reverse;
    min-height: auto;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

/* mod-3: yatay reverse (col 1-8, row 3), asset SOL + content SAĞ */
.modules-sec .mod-card.mod-3 {
    grid-column: 1 / span 8;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 300px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

.modules-sec .mod-card.mod-3 .mod-content { order: 2; }
.modules-sec .mod-card.mod-3 .mod-asset { order: 1; }

.modules-sec .mod-card.mod-5 .mod-asset {
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
}

/* Sol content area */
.modules-sec .mod-card .mod-content {
    padding: 32px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 3;
    background: var(--bg-soft);
}

.modules-sec .mod-card .mod-content .mod-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modules-sec .mod-card .mod-content .mod-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-cyan-soft), var(--brand-primary-soft));
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.modules-sec .mod-card .mod-content .mod-icon i { font-size: 16px; }
.modules-sec .mod-card .mod-content .mod-icon.is-green { background: var(--accent-green-soft); color: var(--accent-green-dark); }

.modules-sec .mod-card .mod-content .mod-std {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--brand-primary);
    align-self: center;
    line-height: 1;
}

.modules-sec .mod-card.mod-2 .mod-content .mod-std { color: var(--accent-green-dark); }

.modules-sec .mod-card .mod-content h3 {
    font-size: 1.25rem;
    line-height: 1.18;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin-top: 4px;
}

.modules-sec .mod-card .mod-content p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-soft);
    flex: 1;
}

.modules-sec .mod-card .mod-content .mod-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.modules-sec .mod-card .mod-content .mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modules-sec .mod-card .mod-content .mod-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 27, 51, 0.04);
    color: var(--ink-soft);
    transition: all 0.3s var(--ease-out-expo);
    flex-shrink: 0;
}

.modules-sec .mod-card .mod-content .mod-arrow i { font-size: 11px; }

.modules-sec .mod-card:hover .mod-content .mod-arrow {
    background: var(--brand-primary);
    color: #fff;
    transform: translate(2px, -2px);
}

/* Asset — full bleed, gradient kart bg'a blend (yöne göre) */
.modules-sec .mod-card .mod-asset {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    width: 100%;
}

.modules-sec .mod-card.mod-2 .mod-asset,
.modules-sec .mod-card.mod-3 .mod-asset,
.modules-sec .mod-card.mod-5 .mod-asset {
    aspect-ratio: unset;
    height: 100%;
    width: 100%;
    flex-shrink: 1;
}

.modules-sec .mod-card .mod-asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.8s var(--ease-out-expo);
    display: block;
}

/* mod-2 yatay: gradient SOL kenardan kart bg'a smooth blend */
.modules-sec .mod-card.mod-2 .mod-asset::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--bg-soft) 0%,
        var(--bg-soft) 5%,
        rgba(255, 255, 255, 0.94) 12%,
        rgba(255, 255, 255, 0.70) 22%,
        rgba(255, 255, 255, 0.38) 34%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* mod-3 reverse: gradient SAĞ kenardan kart bg'a smooth blend */
.modules-sec .mod-card.mod-3 .mod-asset::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg,
        var(--bg-soft) 0%,
        var(--bg-soft) 5%,
        rgba(255, 255, 255, 0.94) 12%,
        rgba(255, 255, 255, 0.70) 22%,
        rgba(255, 255, 255, 0.38) 34%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* mod-5 dikey: gradient ALT kenardan kart bg'a smooth blend */
.modules-sec .mod-card.mod-5 .mod-asset::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.5) 55%, var(--bg-soft) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Üst subtle top glow (her iki tip kart için) */
.modules-sec .mod-card .mod-asset::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Yatay kartlar (mod-2, mod-3): geniş padding + center align */
.modules-sec .mod-card.mod-2 .mod-content,
.modules-sec .mod-card.mod-3 .mod-content {
    padding: 38px 40px 34px;
    margin-top: 0;
    background: var(--bg-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    z-index: 3;
}

/* Dikey poster (mod-5): kompakt, gradient overlap */
.modules-sec .mod-card.mod-5 .mod-content {
    flex: 1;
    margin-top: -36px;
    padding: 0 26px 26px;
    z-index: 3;
    background: transparent;
}

.modules-sec .mod-card.mod-2:hover .mod-asset img,
.modules-sec .mod-card.mod-3:hover .mod-asset img,
.modules-sec .mod-card.mod-4:hover .mod-asset img,
.modules-sec .mod-card.mod-5:hover .mod-asset img {
    transform: scale(1.08);
}

@media (max-width: 1024px) {
    .modules-sec .mod-card.mod-hero {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .modules-sec .mod-card.mod-hero .mod-hero-text { padding: 32px; }
    .modules-sec .mod-card.mod-hero .mod-hero-asset { aspect-ratio: 16 / 9; height: auto; }
    .modules-sec .mod-card.mod-2 {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .modules-sec .mod-card.mod-3 {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .modules-sec .mod-card.mod-5 {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .modules-sec .mod-card.mod-5 .mod-asset { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
    .modules-sec .modules-grid { grid-template-columns: 1fr; }
    .modules-sec .mod-card.mod-2,
    .modules-sec .mod-card.mod-3 {
        grid-template-columns: 1fr;
    }
    .modules-sec .mod-card.mod-2 .mod-asset,
    .modules-sec .mod-card.mod-3 .mod-asset {
        aspect-ratio: 16 / 9;
    }
}


/* =============================================================
   4.5 WORKFLOW — uygulama içi akış · zig-zag stagger ekran turu
   "Bu bir Excel şablonu değil, gerçek uygulama" mesajı
   ============================================================= */
.workflow-sec {
    padding: var(--section-pad-y) var(--section-pad-x);
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.workflow-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 15%, rgba(14, 27, 51, 0.10) 50%, transparent 85%);
}

.workflow-sec::after {
    content: '';
    position: absolute;
    top: 200px;
    right: -180px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(63, 205, 255, 0.10), transparent 65%);
    pointer-events: none;
    filter: blur(60px);
    z-index: 0;
}

.workflow-sec .workflow-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
}

.workflow-sec .workflow-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.workflow-sec .workflow-head h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.026em;
    color: var(--ink);
    margin-top: 4px;
}

.workflow-sec .workflow-head p {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-top: 6px;
}

.workflow-sec .workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 140px;
}

/* Tek satır: text + screenshot, alternating */
.workflow-sec .wf-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    gap: 80px;
    align-items: center;
}

/* Çift sıra (02, 04): screenshot solda, text sağda */
.workflow-sec .wf-step:nth-child(even) .wf-step-content { order: 2; }
.workflow-sec .wf-step:nth-child(even) .wf-step-shot   { order: 1; }

/* ----------- Content ----------- */
.workflow-sec .wf-step-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 480px;
}

.workflow-sec .wf-step-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.workflow-sec .wf-step-num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-primary);
    letter-spacing: 0.06em;
    line-height: 1;
}

.workflow-sec .wf-step-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(14, 27, 51, 0.05);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
}

.workflow-sec .wf-step-content h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-top: 4px;
}

.workflow-sec .wf-step-content > p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.65;
}

.workflow-sec .wf-step-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.workflow-sec .wf-step-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.5;
}

.workflow-sec .wf-step-bullets li i {
    color: var(--brand-primary);
    font-size: 11px;
    margin-top: 6px;
    flex-shrink: 0;
}

/* ----------- Screenshot frame ----------- */
.workflow-sec .wf-step-shot {
    position: relative;
    border-radius: 18px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 30px 60px -20px rgba(14, 27, 51, 0.20),
        0 0 0 1px rgba(14, 27, 51, 0.04);
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

.workflow-sec .wf-step-shot::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(63, 205, 255, 0.20), transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(40px);
}

.workflow-sec .wf-step:nth-child(even) .wf-step-shot::before {
    right: auto;
    left: -60px;
    background: radial-gradient(circle, rgba(27, 127, 255, 0.16), transparent 70%);
}

.workflow-sec .wf-step-shot:hover {
    transform: translateY(-4px);
    box-shadow:
        0 40px 80px -20px rgba(14, 27, 51, 0.25),
        0 0 0 1px rgba(14, 27, 51, 0.06);
}

.workflow-sec .wf-step-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Hafif step bağlantı çizgisi (decoration) — sadece desktop */
@media (min-width: 1024px) {
    .workflow-sec .wf-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 50%;
        margin-top: 70px;
        width: 1px;
        height: 70px;
        background: linear-gradient(180deg, rgba(14, 27, 51, 0.14), transparent);
        transform: translate(-50%, 0);
        pointer-events: none;
    }
    .workflow-sec .wf-step { position: relative; }
}

/* ----------- Mobile ----------- */
@media (max-width: 900px) {
    .workflow-sec .workflow-head { margin-bottom: 60px; }
    .workflow-sec .workflow-steps { gap: 80px; }

    .workflow-sec .wf-step {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .workflow-sec .wf-step:nth-child(even) .wf-step-content { order: 0; }
    .workflow-sec .wf-step:nth-child(even) .wf-step-shot   { order: 0; }

    .workflow-sec .wf-step-content { max-width: 100%; }
    .workflow-sec .wf-step-shot { padding: 6px; border-radius: 14px; }
    .workflow-sec .wf-step-shot img { border-radius: 9px; }
}


/* =============================================================
   5. CBAM — LIGHT zemin, beyaz solid kartlar
   ============================================================= */
.cbam-sec {
    padding: var(--section-pad-y) 20px;
    background: var(--bg-2);
    color: var(--ink);
    position: relative;
    overflow: hidden;
}

.cbam-sec .cbam-inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 72px;
    align-items: center;
}

.cbam-sec .cbam-left { display: flex; flex-direction: column; gap: 22px; }

.cbam-sec .cbam-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-mute);
    align-self: flex-start;
}

.cbam-sec .cbam-eyebrow .eyebrow-marker {
    display: inline-flex;
    height: 22px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--ink);
    align-items: center;
    color: var(--ink-on-dark);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.cbam-sec .cbam-left h2 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.024em;
    color: var(--ink);
}

/* .title-italic — global rule */

.cbam-sec .cbam-left p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 520px;
}

.cbam-sec .cbam-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.cbam-sec .cbam-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.cbam-sec .cbam-list li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-size: 10px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cbam-sec .cbam-cta { margin-top: 16px; align-self: flex-start; }

/* CBAM right — beyaz solid kartlar, ayrı ayrı */
.cbam-sec .cbam-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbam-sec .cbam-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cbam-sec .metric-cell {
    position: relative;
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.03);
}

.cbam-sec .metric-cell::before,
.cbam-sec .metric-cell::after { display: none; }

.cbam-sec .metric-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04), 0 14px 32px -12px rgba(14, 27, 51, 0.12);
}

.cbam-sec .metric-cell .metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.cbam-sec .metric-cell .metric-icon i { font-size: 12px; }

.cbam-sec .metric-cell .metric-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

.cbam-sec .metric-cell .metric-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-top: 4px;
}

.cbam-sec .metric-cell .metric-sub {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Footer — beyaz solid kart */
.cbam-sec .metric-footnote {
    padding: 18px 22px;
    background: var(--bg-soft);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.03);
}

.cbam-sec .metric-footnote .fn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbam-sec .metric-footnote .fn-icon i { font-size: 13px; }

.cbam-sec .metric-footnote .fn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    line-height: 1.45;
}

.cbam-sec .metric-footnote .fn-text strong {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.875rem;
}

@media (max-width: 1024px) {
    .cbam-sec .cbam-inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 720px) {
    .cbam-sec .cbam-metrics { grid-template-columns: repeat(2, 1fr); }
    .cbam-sec .metric-cell .metric-num { font-size: 2.1rem; }
}


/* =============================================================
   6. FEATURES — hover gradient sweep
   ============================================================= */
.features-sec {
    padding: var(--section-pad-y) 20px;
    background: var(--bg);
}

.features-sec .features-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.features-sec .features-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.features-sec .features-head h2 {
    font-size: clamp(1.875rem, 3.8vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.024em;
}

/* .title-italic — global rule */

.features-sec .features-head p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.65;
}

.features-sec .features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.features-sec .feat-card {
    position: relative;
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 240px;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.03);
    overflow: hidden;
    isolation: isolate;
}

.features-sec .feat-card .feat-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-sec .feat-card .feat-foot strong {
    color: var(--brand-primary);
    font-weight: 600;
}

.features-sec .feat-card .feat-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.features-sec .feat-card .feat-mini-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-soft);
    padding: 4px 8px;
    background: var(--bg-2);
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Hero feat-w3 için iç bar visual (1.500+ emisyon dağılımı) */
.features-sec .feat-card .feat-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.features-sec .feat-card .feat-bar-row {
    display: grid;
    grid-template-columns: 80px 1fr 40px;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.features-sec .feat-card .feat-bar-track {
    height: 4px;
    background: var(--bg-2);
    border-radius: 2px;
    overflow: hidden;
}

.features-sec .feat-card .feat-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-cyan), var(--brand-primary));
    border-radius: 2px;
}

.features-sec .feat-card .feat-bar-val {
    color: var(--ink);
    font-weight: 500;
    text-align: right;
}

/* Gradient sweep on hover */
.features-sec .feat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 205, 255, 0.10) 0%, rgba(27, 127, 255, 0.06) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
    z-index: -1;
}

.features-sec .feat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 0% 0%, rgba(63, 205, 255, 0.18), transparent 50%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo);
    z-index: -1;
}

.features-sec .feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04), 0 18px 40px -16px rgba(14, 27, 51, 0.14);
}

.features-sec .feat-card:hover::before { opacity: 1; }
.features-sec .feat-card:hover::after { opacity: 1; }
.features-sec .feat-card:hover .feat-icon { transform: scale(1.06); }

.features-sec .feat-card .feat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.features-sec .feat-card .feat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-cyan-soft), var(--brand-primary-soft));
    color: var(--brand-primary);
    transition: transform 0.4s var(--ease-out-expo);
    flex-shrink: 0;
}

.features-sec .feat-card .feat-icon.is-green {
    background: var(--accent-green-soft);
    color: var(--accent-green-dark);
}

.features-sec .feat-card .feat-icon i { font-size: 16px; }

.features-sec .feat-card .feat-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
}

.features-sec .feat-card h4 {
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: -0.008em;
    color: var(--ink);
}

.features-sec .feat-card p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Varyant boyutlar */
.features-sec .feat-card.feat-w3 { grid-column: span 3; }
.features-sec .feat-card.feat-w2 { grid-column: span 2; }
.features-sec .feat-card.feat-w1 { grid-column: span 1; }

.features-sec .feat-card.feat-w3 h4 { font-size: 1.25rem; }
.features-sec .feat-card.feat-w3 p { font-size: 0.9375rem; }
.features-sec .feat-card.feat-w3 .feat-icon { width: 48px; height: 48px; border-radius: 12px; }
.features-sec .feat-card.feat-w3 .feat-icon i { font-size: 20px; }

@media (max-width: 1100px) {
    .features-sec .feat-card.feat-w3,
    .features-sec .feat-card.feat-w2,
    .features-sec .feat-card.feat-w1 { grid-column: span 3; }
}

@media (max-width: 720px) {
    .features-sec .features-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .features-sec .feat-card.feat-w3,
    .features-sec .feat-card.feat-w2,
    .features-sec .feat-card.feat-w1 { grid-column: span 2; }
}


/* =============================================================
   7. STANDARDS — Hairline divided list
   ============================================================= */
.standards-sec {
    padding: 80px 20px;
    background: var(--bg-2);
    position: relative;
}

.standards-sec .standards-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.standards-sec .standards-head {
    text-align: center;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.standards-sec .standards-head h3 {
    font-size: 1.5rem;
    color: var(--ink);
    letter-spacing: -0.014em;
    line-height: 1.3;
    max-width: 700px;
    font-weight: 500;
}

/* .title-italic — global rule */

.standards-sec .standards-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--bg-soft);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04);
}

.standards-sec .std-item {
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 130px;
    position: relative;
    transition: background 0.3s var(--ease-out-expo);
}

.standards-sec .std-item + .std-item::before {
    content: '';
    position: absolute;
    inset: 22px auto 22px 0;
    width: 1px;
    background: var(--line);
}

.standards-sec .std-item:hover { background: rgba(27, 127, 255, 0.04); }

.standards-sec .std-item .std-mark {
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
    margin-bottom: 6px;
    border-radius: 1px;
}

.standards-sec .std-item .std-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.015em;
}

.standards-sec .std-item .std-desc {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    margin-top: auto;
}

@media (max-width: 1024px) {
    .standards-sec .standards-list { grid-template-columns: repeat(3, 1fr); }
    .standards-sec .std-item:nth-child(4)::before,
    .standards-sec .std-item:nth-child(5)::before,
    .standards-sec .std-item:nth-child(6)::before {
        inset: 0 22px auto 22px;
        width: auto;
        height: 1px;
        top: 0;
    }
}

@media (max-width: 560px) {
    .standards-sec .standards-list { grid-template-columns: 1fr; }
    .standards-sec .std-item + .std-item::before {
        inset: 0 22px auto 22px;
        width: auto;
        height: 1px;
        top: 0;
    }
}


/* =============================================================
   8. PROFILES — rich cards, accent line, numbered
   ============================================================= */
.profiles-sec {
    padding: var(--section-pad-y) 20px;
    background: var(--bg);
}

.profiles-sec .profiles-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.profiles-sec .profiles-head {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.profiles-sec .profiles-head h2 {
    font-size: clamp(1.875rem, 3.8vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.024em;
}

/* .title-italic — global rule */

.profiles-sec .profiles-head p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.65;
}

.profiles-sec .profiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Poster overlap pattern: image full-bleed bg + content card alttan binerek overlap */
.profiles-sec .prof-card {
    position: relative;
    background: transparent;
    display: flex;
    flex-direction: column;
    min-height: 580px;
    transition: all 0.5s var(--ease-out-expo);
    overflow: visible;
    isolation: isolate;
}

.profiles-sec .prof-card:hover { transform: translateY(-6px); }
.profiles-sec .prof-card:hover .prof-image img { transform: scale(1.06); }
.profiles-sec .prof-card:hover .prof-content {
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04), 0 24px 56px -20px rgba(14, 27, 51, 0.18);
}

/* Üst image: poster style, daha cinematic ve drama */
.profiles-sec .prof-card .prof-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: var(--bg-2);
    box-shadow: 0 20px 40px -20px rgba(14, 27, 51, 0.20);
}

.profiles-sec .prof-card .prof-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.8s var(--ease-out-expo);
    display: block;
}

/* Image üstüne çok hafif gradient — sadece prof-num badge için kontrast */
.profiles-sec .prof-card .prof-image::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(10, 31, 74, 0.18) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Number tag — tipografik, image içine bind, sol üst */
.profiles-sec .prof-card .prof-image .prof-num {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
    padding: 7px 12px;
    border-radius: 6px;
    background: rgba(10, 31, 74, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Content kartı: image altında AMA üstüne biner (overlap pattern), başlık burda */
.profiles-sec .prof-card .prof-content {
    position: relative;
    z-index: 2;
    margin: -40px 22px 0;
    background: var(--bg-soft);
    padding: 28px 30px 32px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    transition: box-shadow 0.4s var(--ease-out-expo);
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04), 0 12px 32px -12px rgba(14, 27, 51, 0.10);
}

.profiles-sec .prof-card .prof-content h3 {
    font-size: 1.375rem;
    line-height: 1.18;
    letter-spacing: -0.014em;
    color: var(--ink);
}

.profiles-sec .prof-card .prof-lead {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.profiles-sec .prof-card .prof-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.profiles-sec .prof-card .prof-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.profiles-sec .prof-card .prof-list li i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--accent-green-soft);
    color: var(--accent-green-dark);
    font-size: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

@media (max-width: 1024px) {
    .profiles-sec .profiles-grid { grid-template-columns: 1fr; }
    .profiles-sec .prof-card { min-height: auto; }
}


/* =============================================================
   9. DATA — Stat strip
   ============================================================= */
.data-sec {
    padding: 80px 20px;
    background: var(--bg-2);
}

.data-sec .data-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: 64px;
    align-items: center;
}

.data-sec .data-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.data-sec .data-head h3 {
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.018em;
}

/* .title-italic — global rule */

.data-sec .data-head p { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }

.data-sec .data-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--bg-soft);
    border-radius: 14px;
    padding: 28px 20px;
    box-shadow: 0 1px 2px rgba(14, 27, 51, 0.04);
}

.data-sec .data-stat {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.data-sec .data-stat + .data-stat::before {
    content: '';
    position: absolute;
    inset: 4px auto 4px 0;
    width: 1px;
    background: var(--line);
}

.data-sec .data-stat .stat-num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.data-sec .data-stat .stat-num .num-suffix {
    font-family: var(--font-body);
    font-size: 0.5em;
    font-weight: 500;
    color: var(--brand-primary);
    margin-left: 4px;
    vertical-align: top;
}

.data-sec .data-stat .stat-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
    max-width: 220px;
}

@media (max-width: 1024px) {
    .data-sec .data-inner { grid-template-columns: 1fr; gap: 32px; }
    .data-sec .data-stats { grid-template-columns: repeat(2, 1fr); padding: 24px 16px; gap: 24px 0; }
    .data-sec .data-stat:nth-child(3)::before { display: none; }
}

@media (max-width: 560px) {
    .data-sec .data-stats { grid-template-columns: 1fr; padding: 24px 20px; }
    .data-sec .data-stat + .data-stat::before { display: none; }
    .data-sec .data-stat + .data-stat { padding-top: 20px; border-top: 1px solid var(--line); }
}


/* =============================================================
   10. CTA — full-bleed atmospheric image bg
   ============================================================= */
.cta-sec {
    padding: 100px 20px 120px;
    background: var(--bg);
}

.cta-sec .cta-card {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    border-radius: 22px;
    padding: 110px 48px;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
    color: var(--ink-on-dark);
    background: var(--brand-deep);
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Atmospheric image bg */
.cta-sec .cta-card .cta-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.cta-sec .cta-card .cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 1;
}

/* Dark gradient overlay */
.cta-sec .cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 31, 74, 0.65) 0%, rgba(10, 31, 74, 0.4) 50%, rgba(10, 31, 74, 0.85) 100%),
        radial-gradient(60% 60% at 50% 50%, rgba(27, 127, 255, 0.20), transparent 70%);
    z-index: -1;
}

.cta-sec .cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
}

.cta-sec .cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--brand-cyan);
    font-weight: 500;
}

.cta-sec .cta-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--brand-cyan);
    opacity: 0.7;
}

.cta-sec .cta-eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--brand-cyan);
    opacity: 0.7;
}

.cta-sec .cta-inner h2 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--ink-on-dark);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* CTA dark bg — accent rengi cyan'a override edilir; diğer ayarlar global */
.cta-sec .cta-inner h2 .title-italic {
    color: var(--brand-cyan);
}

.cta-sec .cta-inner p {
    font-size: 1.0625rem;
    color: rgba(245, 247, 250, 0.85);
    max-width: 560px;
    line-height: 1.6;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.cta-sec .cta-inner .cta-buttons {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-sec .cta-meta {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    color: rgba(245, 247, 250, 0.55);
    font-size: 0.78rem;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cta-sec .cta-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cta-sec .cta-meta .meta-item::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--brand-cyan);
    border-radius: 1px;
}

@media (max-width: 720px) {
    .cta-sec { padding: 80px 18px 100px; }
    .cta-sec .cta-card { padding: 70px 24px; border-radius: 18px; min-height: 420px; }
    .cta-sec .cta-meta { flex-direction: column; gap: 10px; }
}

/* =============================================================
   GLOBAL SMALL-MOBILE POLISH (index sections)
   480px: hero CTA, trust cells, modules grid gap, footer text scale
   ============================================================= */
@media (max-width: 480px) {
    /* Hero — slightly tighter */
    .hero-sec { min-height: 580px; padding-top: 40px; }
    .hero-sec .hero-title { font-size: clamp(2rem, 9vw, 2.625rem); }
    .hero-sec .hero-subtitle { font-size: 0.9375rem; }
    .hero-sec .hero-trust { gap: 6px; flex-wrap: wrap; justify-content: center; }
    .hero-sec .std-chip { height: 26px; padding: 0 9px; font-size: 0.6875rem; }

    /* Trust strip */
    .trust-sec { padding: 50px 14px 24px; }
    .trust-sec .trust-cell { padding: 14px; }
    .trust-sec .trust-cell .cell-num { font-size: 1.875rem; }

    /* Preview */
    .preview-sec { padding: 50px 14px; }
    .preview-sec .preview-head { margin-bottom: 36px; }
    .preview-sec .preview-head h2 { font-size: clamp(1.625rem, 7vw, 2rem); }

    /* Modules */
    .modules-sec { padding: 60px 14px; }
    .modules-sec .modules-head h2,
    .modules-sec .modules-head-left h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); }
    .modules-sec .modules-grid { gap: 14px; }

    /* Workflow */
    .workflow-sec { padding: 60px 14px; }
    .workflow-sec .workflow-head h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); }
    .workflow-sec .workflow-steps { gap: 60px; }
    .workflow-sec .wf-step { gap: 24px; }
    .workflow-sec .wf-step-content h3 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }

    /* CBAM */
    .cbam-sec { padding: 60px 14px; }
    .cbam-sec .cbam-left h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); }
    .cbam-sec .cbam-metrics { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .cbam-sec .metric-cell { padding: 18px 14px; }
    .cbam-sec .metric-num { font-size: 1.875rem; }

    /* Features */
    .features-sec { padding: 60px 14px; }
    .features-sec .features-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .features-sec .features-head h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); }
    .features-sec .feat-card { padding: 22px 18px; }

    /* Standards */
    .standards-sec { padding: 60px 14px; }
    .standards-sec .standards-head h3 { font-size: clamp(1.375rem, 5.5vw, 1.625rem); }

    /* Profiles */
    .profiles-sec { padding: 60px 14px; }
    .profiles-sec .profiles-head h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); }
    .profiles-sec .prof-card { border-radius: 16px; }
    .profiles-sec .prof-content { padding: 24px 22px; }

    /* Data */
    .data-sec { padding: 50px 14px; }
    .data-sec .data-head h3 { font-size: clamp(1.375rem, 5.5vw, 1.625rem); }

    /* CTA */
    .cta-sec { padding: 60px 14px 80px; }
    .cta-sec .cta-card { padding: 50px 22px; border-radius: 18px; min-height: auto; }
    .cta-sec .cta-buttons { flex-direction: column; width: 100%; max-width: 320px; }
    .cta-sec .cta-buttons .btn { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
    .hero-sec .hero-title { font-size: clamp(1.75rem, 9vw, 2.25rem); }
    .hero-sec .hero-cta { gap: 8px; }
    .trust-sec .trust-cell .cell-num { font-size: 1.625rem; }
    .modules-sec .mod-card { padding: 22px 18px; }
    .workflow-sec .wf-step-shot { padding: 6px; }
}