/* ════════════════════════════════════════════════════════════════════════════
   REAP Battery — otomatik üretilen birleşik CSS
   Üretim: 2026-05-30 17:13:04
   Üreten script: __tools/consolidate-css.php
   Düzenleme: KAYNAK dosyaları düzenle, sonra script'i tekrar çalıştır.
   ════════════════════════════════════════════════════════════════════════════ */

/* GLOBAL — fonts + reap + sketch + campaign + site (non-@media) */

/* ═══════════ SOURCE: themes/reap/assets/css/_source/fonts.css ═══════════ */
/* ════════════════════════════════════════════════════════════
   REAP Self-Hosted Fonts
   ─────────────────────────────────────────────────────────────
   php artisan fonts:install ile Plus Jakarta Sans + Space Grotesk
   + JetBrains Mono dosyaları assets/fonts/ klasörüne indirilir.
   Yoksa head.blade.php Google Fonts CDN fallback kullanır.
   ════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-400-45.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-500-45.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-600-45.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-700-45.woff2') format('woff2');
}


/* ═══════════ SOURCE: themes/reap/assets/css/_source/reap.css ═══════════ */
/* ════════════════════════════════════════════════════════════
   REAP Battery — Frontend CSS Bundle
   Apple-style minimalism + corporate trust
   ──────────────────────────────────────────────────────────────
   Sıralama: tokens → reset → typography → layout → components
            → hero slider → sections → utilities
   ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --rp-primary: #00b294;
    /* brand green (kullanıcı seçimi 2026-06-09) — fills/text/links/icons */
    --rp-primary-2: #00b294;
    /* light variant — light-on-dark (hero) + hover lighten */
    --rp-primary-dark: #009880;
    /* darker variant — hover/active on light */
    --rp-primary-vivid: #00b294;
    /* legacy vivid green — decorative/large-fill use only */
    --rp-accent: #6A64A9;
    /* secondary brand — purple */
    --rp-accent-2: #8a86bd;
    /* hover/light variant */
    --rp-accent-soft: rgba(106, 100, 169, 0.12);
    /* subtle bg tint */
    --rp-accent-soft-2: rgba(106, 100, 169, 0.20);
    /* hover bg tint */
    --rp-accent-dark: #4f4a82;
    /* dark variant */
    --rp-accent-line: rgba(106, 100, 169, 0.30);
    /* border/divider */

    /* Surface (light default — Apple-style premium light) */
    --rp-bg: #FFFFFF;
    --rp-surface: #F5F5F7;
    --rp-surface-2: #EBEBED;
    --rp-surface-3: #DCDCE0;

    /* Text */
    --rp-text: #1D1D1F;
    --rp-text-muted: #6E6E73;
    --rp-text-dim: #86868B;
    --rp-text-invert: #FFFFFF;

    /* Border */
    --rp-border: rgba(0, 0, 0, 0.08);
    --rp-border-strong: rgba(0, 0, 0, 0.18);

    /* Subtle shadows */
    --rp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --rp-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.12);

    /* Semantic */
    --rp-success: #16A34A;
    --rp-warning: #F59E0B;
    --rp-danger: #EF4444;

    /* Typography — SF Pro Display benzeri Inter */
    --rp-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rp-font-mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale (Apple-style large) */
    --t-display-xl: clamp(3rem, 5.5vw + 1rem, 6.5rem);
    --t-display-lg: clamp(2.5rem, 4vw + 1rem, 4.75rem);
    --t-display-md: clamp(2rem, 3vw + 1rem, 3.5rem);
    --t-h1: clamp(2rem, 2.5vw + 1rem, 3rem);
    --t-h2: clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
    --t-h3: 1.5rem;
    --t-h4: 1.25rem;
    --t-h5: 1.125rem;
    --t-lead: 1.125rem;
    --t-body: 1rem;
    --t-sm: 0.875rem;
    --t-xs: 0.75rem;

    /* Spacing — generous */
    --container: 1280px;
    --container-sm: 1080px;
    --container-xs: 880px;
    --gutter: clamp(20px, 4vw, 48px);
    /* Section spacing — azaltıldı */
    --section-y: clamp(64px, 6vw, 120px);
    --section-y-sm: clamp(40px, 4vw, 72px);

    /* Radius */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-2xl: 32px;
    --r-full: 9999px;

    /* Header height */
    --header-h: 64px;
    --header-h-scrolled: 56px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur: 300ms;
    --dur-slow: 600ms;
    --dur-hero: 1000ms;
}

/* Light is default. Bu blok no-op (gelecekte dark mode eklenirse [data-theme="dark"] override yazılabilir). */
:root[data-theme="light"] {
    /* default ile aynı — geriye uyumluluk için bırakıldı */
}

/* ══════════════════════════════════════════════════════════════
   2. RESET
   ══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* overflow-x: clip — sticky child'ları bozmaz (overflow-x: hidden sticky'i breaks).
   Modern browser fallback: clip yok ise hidden olur (cascade). */
body {
    background: var(--rp-bg);
    color: var(--rp-text);
    font-family: var(--rp-font-body);
    font-size: var(--t-body);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--dur), color var(--dur);
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

p {
    margin: 0 0 1em;
}

hr {
    border: 0;
    border-top: 1px solid var(--rp-border);
    margin: 2em 0;
}

::selection {
    background: var(--rp-primary);
    color: var(--rp-text-invert);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--rp-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--rp-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--rp-surface-3);
    border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rp-text-dim);
}

/* ══════════════════════════════════════════════════════════════
   3. TYPOGRAPHY UTILITIES
   ══════════════════════════════════════════════════════════════ */
.rp-display-xl {
    font-family: var(--rp-font-display);
    font-size: var(--t-display-xl);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.rp-display-lg {
    font-family: var(--rp-font-display);
    font-size: var(--t-display-lg);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.rp-display-md {
    font-family: var(--rp-font-display);
    font-size: var(--t-display-md);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.rp-h1 {
    font-family: var(--rp-font-display);
    font-size: var(--t-h1);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.rp-h2 {
    font-family: var(--rp-font-display);
    font-size: var(--t-h2);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.rp-h3 {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.rp-lead {
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--rp-text-muted);
    font-weight: 400;
}

.rp-body {
    font-size: var(--t-body);
    line-height: 1.6;
}

.rp-sm {
    font-size: var(--t-sm);
}

.rp-xs {
    font-size: var(--t-xs);
}

.rp-mono {
    font-family: var(--rp-font-mono);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.rp-eyebrow {
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rp-accent);
    /* lavender — secondary brand */
    font-weight: 600;
}

.rp-text-muted {
    color: var(--rp-text-muted);
}

.rp-text-dim {
    color: var(--rp-text-dim);
}

.rp-text-primary {
    color: var(--rp-primary);
}

.rp-text-accent {
    color: var(--rp-accent);
}

.rp-text-center {
    text-align: center;
}

.rp-text-balance {
    text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════
   4. LAYOUT
   ══════════════════════════════════════════════════════════════ */
.rp-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    height: 100%;
}

.rp-container--sm {
    max-width: var(--container-sm);
}

.rp-container--xs {
    max-width: var(--container-xs);
}

.rp-section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    position: relative;
}

.rp-section--sm {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
}

.rp-section--alt {
    background: var(--rp-surface);
}

.rp-grid {
    display: grid;
    gap: 24px;
}

.rp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rp-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rp-grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}





.rp-flex {
    display: flex;
}

.rp-flex--center {
    align-items: center;
    justify-content: center;
}

.rp-flex--between {
    align-items: center;
    justify-content: space-between;
}

.rp-flex--gap {
    gap: 16px;
}

/* ══════════════════════════════════════════════════════════════
   5. SKIP LINK
   ══════════════════════════════════════════════════════════════ */
.rp-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--rp-primary);
    color: var(--rp-text-invert);
    padding: 12px 20px;
    border-radius: var(--r);
    z-index: 9999;
    font-weight: 600;
    transition: top var(--dur-fast);
}

.rp-skip-link:focus {
    top: 16px;
}

/* ══════════════════════════════════════════════════════════════
   6. HEADER (Apple-style minimal)
   ══════════════════════════════════════════════════════════════ */
.rp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: background-color var(--dur), height var(--dur), box-shadow var(--dur), color var(--dur);
    border-bottom: 1px solid transparent;
    color: var(--rp-text);
}

.rp-header--scrolled {
    background: rgba(255, 255, 255, 0.94);
    height: var(--header-h-scrolled);
    border-bottom-color: var(--rp-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* ─── Smart header: anasayfa hero üzerinde transparent + beyaz text ─── */
.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    color: #fff;
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-nav__link,
.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-lang-switcher__btn,
.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-header__action-btn {
    color: #fff;
    opacity: 0.9;
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-nav__link:hover,
.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-lang-switcher__btn:hover {
    opacity: 1;
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-header__logo img {
    filter: brightness(0) invert(1);
    /* siyah logoyu beyaza dönüştür */
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill .rp-eco-pill__dot {
    background: rgba(255, 255, 255, 0.70);
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill i {
    color: rgba(255, 255, 255, 0.85);
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill.is-active {
    background: var(--rp-primary);
    border-color: var(--rp-primary);
    color: #fff;
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill.is-active .rp-eco-pill__dot {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30);
}

.rp-js-ready body.rp-page-home .rp-header:not(.rp-header--scrolled) .rp-eco-pill.is-active i {
    color: #fff;
}

/* 3 kolonlu grid: logo (sol) | nav (orta) | actions (sağ) — Apple-style */
.rp-header__inner {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.rp-header__logo {
    display: flex;
    align-items: center;
    height: 100%;
    justify-self: start;
    /* sol kolon, sola yaslı */
}

.rp-header__logo img {
    height: 28px;
    width: auto;
    transition: opacity var(--dur-fast);
}

.rp-header__logo:hover img {
    opacity: 0.8;
}

/* Nav — orta kolon, gerçekten ortalı */
.rp-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-self: center;
}

.rp-nav__item {
    position: relative;
}

.rp-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rp-text);
    transition: opacity var(--dur-fast), color var(--dur-fast);
    white-space: nowrap;
    opacity: 0.85;
    border-radius: var(--r-full);
}

.rp-nav__link:hover {
    opacity: 1;
    color: var(--rp-primary);
}

.rp-nav__link i {
    font-size: 12px;
    opacity: 0.5;
    transition: transform var(--dur-fast);
}

.rp-nav__item:hover .rp-nav__link i {
    transform: rotate(180deg);
}

/* Mega menu (Apple-style sade — light) */
.rp-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 280px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}

.rp-nav__item:hover .rp-mega,
.rp-nav__item:focus-within .rp-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.rp-mega__link {
    display: block;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    color: var(--rp-text);
    font-size: var(--t-sm);
    transition: background-color var(--dur-fast);
}

.rp-mega__link:hover {
    background: var(--rp-surface-2);
    color: var(--rp-primary);
}

.rp-mega__link strong {
    display: block;
    font-weight: 500;
}

.rp-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
    /* sağ kolon, sağa yaslı */
}

.rp-header__action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    color: var(--rp-text);
    transition: background-color var(--dur-fast);
    opacity: 0.8;
    font-size: 16px;
}

.rp-header__action-btn:hover {
    background: var(--rp-surface-2);
    opacity: 1;
}

.rp-lang-switcher {
    position: relative;
}

.rp-lang-switcher__btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rp-text);
    border-radius: var(--r-full);
    opacity: 0.8;
    transition: opacity var(--dur-fast);
}

.rp-lang-switcher__btn:hover {
    opacity: 1;
}

.rp-lang-switcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rp-border);
    border-radius: var(--r);
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast), visibility var(--dur-fast);
}

.rp-lang-switcher.is-open .rp-lang-switcher__menu {
    opacity: 1;
    visibility: visible;
}

.rp-lang-switcher__item {
    display: block;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--rp-text);
}

.rp-lang-switcher__item:hover {
    background: var(--rp-surface-2);
}

.rp-lang-switcher__item.is-active {
    color: var(--rp-primary);
    font-weight: 600;
}

.rp-header__menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--dur-fast);
}

.rp-header__menu-btn:hover {
    background: var(--rp-surface);
}

/* Hamburger 3-line → X animation */
.rp-hamburger {
    width: 22px;
    height: 16px;
    position: relative;
    display: inline-block;
}

.rp-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--rp-text);
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: top 280ms cubic-bezier(0.4, 0, 0.2, 1) 280ms,
        bottom 280ms cubic-bezier(0.4, 0, 0.2, 1) 280ms,
        margin-top 280ms cubic-bezier(0.4, 0, 0.2, 1) 280ms,
        margin-bottom 280ms cubic-bezier(0.4, 0, 0.2, 1) 280ms,
        transform 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
        opacity 200ms ease 0ms;
}

.rp-hamburger span:nth-child(1) {
    top: 0;
}

.rp-hamburger span:nth-child(2) {
    top: 50%;
    margin-top: -1px;
}

.rp-hamburger span:nth-child(3) {
    bottom: 0;
}

.rp-header__menu-btn[aria-expanded="true"] .rp-hamburger span:nth-child(1) {
    top: 50%;
    margin-top: -1px;
    transform: rotate(45deg);
    transition-delay: 0ms, 0ms, 0ms, 0ms, 280ms, 0ms;
}

.rp-header__menu-btn[aria-expanded="true"] .rp-hamburger span:nth-child(2) {
    opacity: 0;
}

.rp-header__menu-btn[aria-expanded="true"] .rp-hamburger span:nth-child(3) {
    bottom: 50%;
    margin-bottom: -1px;
    transform: rotate(-45deg);
    transition-delay: 0ms, 0ms, 0ms, 0ms, 280ms, 0ms;
}

/* Mobile menu */
.rp-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--rp-bg);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease-out);
    display: flex;
    flex-direction: column;
}

.rp-mobile-menu.is-open {
    transform: translateX(0);
}

.rp-mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--rp-border);
    height: var(--header-h);
}

.rp-mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
    padding: 24px var(--gutter);
}

.rp-mobile-menu__item {
    display: block;
    padding: 18px 0;
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--rp-text);
    border-bottom: 1px solid var(--rp-border);
    letter-spacing: -0.02em;
}

.rp-mobile-menu__item:hover {
    color: var(--rp-primary);
}

/* NOT: Mobil menü akordiyonunun açık/kapalı davranışı BURADA DEĞİL, layout/home
   içindeki sayfa-içi <style> bloğunda tanımlıdır (max-height animasyonu +
   `display:block !important`). Buraya display kuralı eklemek ÖLÜ KOD olur. */
.rp-mobile-menu__sub {
    padding: 8px 0 0 16px;
}

.rp-mobile-menu__sub-item {
    display: block;
    padding: 10px 0;
    font-size: var(--t-body);
    color: var(--rp-text-muted);
    font-weight: 400;
}



/* ══════════════════════════════════════════════════════════════
   7. BUTTONS (Apple-style pill, sade)
   ══════════════════════════════════════════════════════════════ */
.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    font-family: var(--rp-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--r-full);
    white-space: nowrap;
    transition: background-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
    cursor: pointer;
    letter-spacing: -0.01em;
}

.rp-btn:hover {
    opacity: 0.85;
}

.rp-btn--primary {
    /* A11y (WCAG 1.4.3): beyaz metin #00b294 zeminde 2.7:1 (AA'yı geçmiyordu).
       Buton zemini koyulaştırıldı → ~4.9:1 (AA geçer). Marka yeşili (--rp-primary)
       vurgu/kenar/ikon için değişmeden korunur; yalnız metin taşıyan CTA koyulaşır.
       İnce ayar: --rp-btn-primary-bg değerini değiştir. */
    background: var(--rp-btn-primary-bg, #00806e);
    color: var(--rp-text-invert);
    font-weight: 600;
}

.rp-btn--primary:hover {
    background: var(--rp-btn-primary-bg-hover, #006b5c);
    opacity: 1;
}

.rp-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--rp-text);
    border: 1.5px solid var(--rp-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rp-btn--secondary:hover {
    background: var(--rp-text);
    color: var(--rp-bg);
    opacity: 1;
    border-color: var(--rp-text);
}

/* Açık background üstünde secondary daha koyu/görünür olsun.
   FIX 2026-05-30: color/border var(--rp-bg) (beyaz) idi → açık zeminde beyaz-üstüne-beyaz,
   buton görünmüyordu (WCAG 1.4.3). var(--rp-text) ile koyu/okunur yapıldı. */
.rp-page:not(.eco-mode) .rp-section:not(.rp-section--dark) .rp-btn--secondary,
.rp-page:not(.eco-mode) .rp-cta-band .rp-btn--secondary {
    background: rgba(0, 0, 0, 0.04);
    color: var(--rp-text);
    border-color: rgba(0, 0, 0, 0.22);
}

.rp-page:not(.eco-mode) .rp-section:not(.rp-section--dark) .rp-btn--secondary:hover,
.rp-page:not(.eco-mode) .rp-cta-band .rp-btn--secondary:hover {
    background: var(--rp-text);
    color: #ffffff;
    border-color: var(--rp-text);
}

.rp-btn--ghost {
    background: transparent;
    color: var(--rp-primary);
    padding: 12px 0;
}

.rp-btn--ghost:hover {
    color: var(--rp-primary-dark);
    opacity: 1;
}

.rp-btn--sm {
    padding: 8px 18px;
    font-size: 13px;
}

.rp-btn--lg {
    padding: 14px 32px;
    font-size: 16px;
}

.rp-btn--block {
    width: 100%;
}

.rp-btn i {
    font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════
   8. CARDS (Apple-style, sade)
   ══════════════════════════════════════════════════════════════ */
.rp-card {
    background: var(--rp-surface);
    border-radius: var(--r-xl);
    padding: 32px;
    transition: background-color var(--dur), transform var(--dur), box-shadow var(--dur);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Eşit-yükseklik kartlarda tarih/alt-bilgi en alta sabitlensin (satır boyunca hizalı) */
.rp-card__date {
    margin-top: auto;
}

.rp-card:hover {
    background: var(--rp-surface-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
}

.rp-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r);
    background: rgba(0, 180, 136, 0.12);
    color: var(--rp-primary);
    font-size: 24px;
    margin-bottom: 24px;
}

.rp-card__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--rp-text);
    letter-spacing: -0.015em;
}

.rp-card__text {
    color: var(--rp-text-muted);
    font-size: var(--t-sm);
    line-height: 1.55;
}

.rp-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    color: var(--rp-primary);
    font-size: var(--t-sm);
    font-weight: 500;
    transition: gap var(--dur-fast);
}

.rp-card:hover .rp-card__link {
    gap: 8px;
}

.rp-card--image {
    padding: 0;
    overflow: hidden;
}

.rp-card--image .rp-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.rp-card--image .rp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.rp-card--image:hover .rp-card__media img {
    transform: scale(1.04);
}

.rp-card--image .rp-card__body {
    padding: 28px;
}

/* Product card (Apple-style — image right, content left) */
.rp-product-card {
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    padding: 48px 40px;
    position: relative;
    transition: background-color var(--dur), transform var(--dur), box-shadow var(--dur);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    min-height: 320px;
    overflow: hidden;
}

.rp-product-card:hover {
    background: var(--rp-surface-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.rp-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.rp-product-card__cap {
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--rp-primary);
    font-weight: 500;
}

.rp-product-card__title {
    font-family: var(--rp-font-display);
    font-size: clamp(28px, 2.4vw, 38px);
    letter-spacing: -0.025em;
    line-height: 1.12;
    word-break: keep-all;
    hyphens: manual;
    overflow-wrap: normal;
}

/* Capacity/Chemistry değerlerinde MWh/kWh alt satıra düşmesin */
.rp-product-card__spec-value,
.rp-product-card__capacity {
    white-space: nowrap;
}

.rp-product-card__desc {
    color: var(--rp-text-muted);
    max-width: 480px;
}

.rp-product-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
    padding-top: 24px;
    border-top: 1px solid var(--rp-border);
    margin-top: 16px;
}

.rp-product-card__specs>div {
    min-width: 140px;
    flex: 1 1 auto;
}

.rp-product-card__spec-value {
    white-space: nowrap;
    font-size: clamp(15px, 1.2vw, 18px);
}

.rp-product-card__spec-label {
    font-size: var(--t-xs);
    color: var(--rp-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.rp-product-card__spec-value {
    font-family: var(--rp-font-mono);
    font-size: var(--t-h5);
    font-weight: 600;
    color: var(--rp-text);
    margin-top: 4px;
    letter-spacing: -0.02em;
}

.rp-product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    color: var(--rp-primary);
    font-size: var(--t-sm);
    font-weight: 500;
    transition: gap var(--dur-fast);
}

.rp-product-card:hover .rp-product-card__cta {
    gap: 8px;
}

/* Image slot — sağ taraf */
.rp-product-card__media {
    width: clamp(180px, 24vw, 280px);
    aspect-ratio: 1 / 1;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--rp-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--dur);
}

.rp-product-card:hover .rp-product-card__media {
    transform: scale(1.02);
}

.rp-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.rp-product-card:hover .rp-product-card__media img {
    transform: scale(1.04);
}

.rp-product-card__media-icon {
    color: var(--rp-text-dim);
    font-size: 56px;
    opacity: 0.4;
}

/* Homepage PRODUCTS — 3-up vertical cards (image on top) */
.rp-grid--products3.rp-grid .rp-product-card {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    padding: 0;
    min-height: 0;
    gap: 0;
}

.rp-grid--products3.rp-grid .rp-product-card__media {
    order: -1;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 0;
}

.rp-grid--products3.rp-grid .rp-product-card__body {
    padding: 32px 30px 36px;
}



/* ══════════════════════════════════════════════════════════════
   9. FORMS
   ══════════════════════════════════════════════════════════════ */
.rp-input,
.rp-textarea,
.rp-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r);
    color: var(--rp-text);
    font-size: var(--t-body);
    transition: border-color var(--dur-fast);
}

.rp-input:focus,
.rp-textarea:focus,
.rp-select:focus {
    outline: none;
    border-color: var(--rp-primary);
}

.rp-textarea {
    min-height: 140px;
    resize: vertical;
    font-family: inherit;
}

.rp-label {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--rp-text);
}

.rp-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.rp-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--rp-primary);
    margin-top: 3px;
}

.rp-checkbox span {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    line-height: 1.5;
}

.rp-form-error {
    font-size: var(--t-xs);
    color: var(--rp-danger);
    margin-top: 6px;
}

.rp-form-success {
    padding: 16px 20px;
    background: rgba(22, 163, 74, 0.1);
    color: var(--rp-success);
    border-radius: var(--r);
    font-size: var(--t-sm);
}

/* ══════════════════════════════════════════════════════════════
   10. SPEC TABLE
   ══════════════════════════════════════════════════════════════ */
.rp-spec-table {
    width: 100%;
    border-collapse: collapse;
}

.rp-spec-table th,
.rp-spec-table td {
    padding: 18px 0;
    border-bottom: 1px solid var(--rp-border);
}

.rp-spec-table th {
    text-align: left;
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rp-text-muted);
    font-weight: 500;
}

.rp-spec-table td {
    text-align: right;
    font-family: var(--rp-font-mono);
    font-size: var(--t-lead);
    font-weight: 500;
    color: var(--rp-text);
}

/* ══════════════════════════════════════════════════════════════
   11. HERO SLIDER (Swiper, Apple-style fullscreen)
   ══════════════════════════════════════════════════════════════ */
.rp-hero-slider {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    max-height: 1040px;
    background: var(--rp-bg);
    overflow: hidden;
}

.rp-hero-slider__swiper {
    width: 100%;
    height: 100%;
}

.rp-hero-slider__slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.rp-hero-slider__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Arka plan tamamen dekoratif — Swiper'ın dokunma/sürükleme
       algılamasını engellemesin. Görsel slide'larda <img>, tarayıcının
       native image-drag davranışını tetikleyip swipe'ı bloke ediyordu. */
    pointer-events: none;
}

.rp-hero-slider__bg img,
.rp-hero-slider__bg picture,
.rp-hero-slider__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Cinematic Apple-style overlay — tek mesaj okunsun */
.rp-hero-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.rp-hero-slider__content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Text aşağıya kaydır: top padding büyüt, bottom küçült */
    padding-top: calc(var(--header-h) + 22vh);
    padding-bottom: 80px;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
}

.rp-hero-slider__text {
    max-width: 720px;
}

.rp-hero-slider__eyebrow {
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--rp-primary-2);
    font-weight: 500;
    margin-bottom: 18px;
}

.rp-hero-slider__heading {
    font-family: var(--rp-font-display);
    /* Heading küçültüldü: max 4rem (önceden 5.75rem idi) */
    font-size: clamp(1.875rem, 3.2vw + 0.75rem, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 18px;
    text-wrap: balance;
}

.rp-hero-slider__heading br {
    display: inline;
}

.rp-hero-slider__sub {
    font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 0 40px;
    font-weight: 400;
}

.rp-hero-slider__cta {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

/* Pill button — her arkaplanda okunabilir (beyaz / dark / image bg) */
.rp-hero-slider__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--rp-text);
    /* dark text — beyaz pill üstünde her zaman görünür */
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: background var(--dur), color var(--dur), gap var(--dur-fast), transform var(--dur);
}

.rp-hero-slider__link:hover {
    gap: 12px;
    background: var(--rp-accent);
    color: #fff;
    border-color: var(--rp-accent);
    transform: translateY(-2px);
}

.rp-hero-slider__link i {
    font-size: 16px;
}

/* Pagination — Apple-style dots, bottom center */
.rp-hero-slider__pagination.swiper-pagination {
    position: absolute;
    bottom: 32px !important;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.rp-hero-slider__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    transition: width var(--dur-fast), background-color var(--dur-fast);
    border-radius: var(--r-full);
    margin: 0 !important;
    cursor: pointer;
}

.rp-hero-slider__pagination .swiper-pagination-bullet-active {
    width: 32px;
    background: #FFFFFF;
}

/* Navigation arrows (subtle) */
.rp-hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color var(--dur-fast), opacity var(--dur-fast);
    opacity: 0;
}

.rp-hero-slider:hover .rp-hero-slider__nav {
    opacity: 1;
}

.rp-hero-slider__nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.rp-hero-slider__nav--prev {
    left: 32px;
}

.rp-hero-slider__nav--next {
    right: 32px;
}

/* Hero oynat/duraklat düğmesi — KULLANICI KARARI (28 Tem): tasarımda görünmesin.
   Tamamen kaldırmak yerine "skip-link" deseni: normalde görsel olarak gizli,
   YALNIZ klavyeyle odaklanınca belirir. Böylece slaytları durdurma imkânı
   klavye/ekran-okuyucu kullanıcıları için korunur (WCAG 2.2.2), fare
   kullanıcısı hiçbir buton görmez. */
.rp-hero-slider__toggle {
    position: absolute;
    left: 32px;
    bottom: 32px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background .2s, border-color .2s;

    /* Görsel olarak gizle (erişilebilirlik ağacında KALIR) */
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}
/* Klavyeyle odaklanınca geri gel */
.rp-hero-slider__toggle:focus-visible,
.rp-hero-slider__toggle:focus {
    opacity: 1;
    pointer-events: auto;
    clip-path: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.rp-hero-slider__toggle:hover { background: rgba(0, 0, 0, 0.55); }
.rp-hero-slider__toggle .rp-hero-toggle__play { display: none; }
.rp-hero-slider__toggle.is-paused .rp-hero-toggle__pause { display: none; }
.rp-hero-slider__toggle.is-paused .rp-hero-toggle__play { display: inline; }
@media (max-width: 768px) {
    .rp-hero-slider__toggle { width: 40px; height: 40px; left: 16px; bottom: 16px; font-size: 18px; }
}

/* Mobilde slider kapalı (admin ayarı) — tek sabit slayt, kontroller gizli */
.rp-hero-slider--static .rp-hero-slider__nav,
.rp-hero-slider--static .rp-hero-slider__pagination,
.rp-hero-slider--static .rp-hero-slider__toggle,
.rp-hero-slider--static .rp-hero-slider__counter { display: none !important; }



/* Scroll indicator */
.rp-hero-slider__scroll {
    position: absolute;
    bottom: 80px;
    right: var(--gutter);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
}

.rp-hero-slider__scroll-line {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.4);
    animation: rp-scroll-pulse 2s ease-in-out infinite;
}

@keyframes rp-scroll-pulse {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(0.5);
        opacity: 0.3;
    }
}



/* ══════════════════════════════════════════════════════════════
   11.5 BATTERY 3D SECTION (sticky + scroll-driven 3D container)
   • 5 yüzlü konteyner kutu (front/right/back/left/top)
   • Sol sticky scene + sağ 5 panel scrollable
   • Step-based rotation (her panele göre snap)
   • Rectangular box geometry — gerçek shipping container oranları
     W : H : D ≈ 2.5 : 1 : 1
   ══════════════════════════════════════════════════════════════ */
/* Section'da overflow:hidden YOK — sticky child'ları bozar.
   Sticky'nin doğru çalışması için:
   - Parent (.rp-bx3d__left) grid stretch ile sağ kolonun yüksekliğine eşit olmalı
   - align-items: stretch (grid default) — kesinlikle 'start' KULLANMA */
.rp-bx3d {
    position: relative;
    padding: var(--section-y) 0;
    background: var(--rp-bg);
}

.rp-bx3d__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    /* align-items: stretch (default) — sticky için kritik; YAZILMIYOR ki override etmesin */
}

/* Sol grid-item — yüksekliği sağ kolona eşit (stretch default), sticky child için yeterli alan */
.rp-bx3d__left {
    position: relative;
}

/* Sticky — viewport'a yapışır, sol parent biterken bırakır */
.rp-bx3d__sticky {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rp-bx3d__intro {
    max-width: 520px;
}

.rp-bx3d__intro-heading {
    font-family: var(--rp-font-display);
    font-size: clamp(1.875rem, 2.5vw + 1rem, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* 3D scene container — overflow burada clip edilir, sticky parent etkilenmez */
.rp-bx3d__scene {
    position: relative;
    width: 100%;
    height: 480px;
    perspective: 1200px;
    perspective-origin: 50% 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--r-lg);
}

/* Floor reflection + drop shadow KALDIRILDI (kullanıcı isteği) */
.rp-bx3d__glow,
.rp-bx3d__shadow {
    display: none;
}

/* Box wrapper — gerçek REAP shipping container (geometrik tutarlı)
   Oranlar: W:H:D = 2.4 : 1 : 0.75
   PNG aspect (ALL PERFECT FIT — kaynak: media/reap_3d/reap_container_3d):
     front/back  1942×809  (2.40:1) → CSS 480×200 (2.40:1) ✅
     right/left  1086×1448 (0.75:1) → CSS 150×200 (0.75:1) ✅
     top         2242×701  (3.20:1) → CSS 480×150 (3.20:1) ✅ */
.rp-bx3d__box {
    --bw: 480px;
    /* Width  — front/back/top uzun kenar */
    --bh: 200px;
    /* Height — yükseklik */
    --bd: 150px;
    /* Depth  — yan kenar (200 × 0.75) */

    position: relative;
    width: var(--bw);
    height: var(--bh);
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(-18deg);
    will-change: transform;
}

/* Tüm yüzler — pixel-perfect edge alignment */
.rp-bx3d__face {
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: cover;
    /* PNG aspect tam uyumlu, cover = %100 fit (no crop) */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f5;
    border-radius: 0;
    overflow: hidden;
    /* GPU hızlandırma + sub-pixel anti-flicker */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Hairline yok — yüzler kenarlarda direk birleşsin */
    box-shadow: none;
    outline: 0;
    /* Image rendering optimum */
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    /* Subpixel rendering düzelt */
    will-change: transform;
}

/* Yüz LIGHTING — subtle (gerçek 3D render edge-shadow benzeri).
   Brightness farkları %5 civarı, dramatik değil. */
.rp-bx3d__face--front {
    filter: brightness(1.0);
}

.rp-bx3d__face--back {
    filter: brightness(0.92);
    /* Hafif gölge */
}

.rp-bx3d__face--right {
    filter: brightness(0.96);
    /* Çok hafif gölge */
}

.rp-bx3d__face--left {
    filter: brightness(1.02);
    /* Çok hafif highlight */
}

.rp-bx3d__face--top {
    filter: brightness(1.04);
    /* Üst hafif parlak */
}

/* Front (W × H) — uzun kenar, REAP logo görünür yüz */
.rp-bx3d__face--front {
    width: var(--bw);
    height: var(--bh);
    margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
    transform: translateZ(calc(var(--bd) / 2));
}

/* Back (W × H) — diğer uzun kenar, döndürülmüş */
.rp-bx3d__face--back {
    width: var(--bw);
    height: var(--bh);
    margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
    transform: rotateY(180deg) translateZ(calc(var(--bd) / 2));
}

/* Right (D × H) — kısa kenar, sağ */
.rp-bx3d__face--right {
    width: var(--bd);
    height: var(--bh);
    margin: calc(var(--bh) / -2) 0 0 calc(var(--bd) / -2);
    transform: rotateY(90deg) translateZ(calc(var(--bw) / 2));
}

/* Left (D × H) — kısa kenar, sol */
.rp-bx3d__face--left {
    width: var(--bd);
    height: var(--bh);
    margin: calc(var(--bh) / -2) 0 0 calc(var(--bd) / -2);
    transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2));
}

/* Top (W × D) — üst */
.rp-bx3d__face--top {
    width: var(--bw);
    height: var(--bd);
    margin: calc(var(--bd) / -2) 0 0 calc(var(--bw) / -2);
    transform: rotateX(90deg) translateZ(calc(var(--bh) / 2));
}

/* Responsive box dimensions — W:H:D = 2.4 : 1 : 0.75 */






/* ── Cabinet/Wallmount variant — dikey kabin form factor (Commercial, Residential)
   PNG aspect: front/back/left/right = 0.75:1 (dikey), top = 1.33:1 (yatay)
   4-yüzlü kutu (top hidden) — 4 yüz hep 0.75:1 ile uyumlu */
.rp-bx3d--cabinet .rp-bx3d__box,
.rp-bx3d--wallmount .rp-bx3d__box {
    --bw: 300px;
    /* Width */
    --bh: 400px;
    /* Height */
    --bd: 300px;
    /* Depth */
}

.rp-bx3d--cabinet .rp-bx3d__scene,
.rp-bx3d--wallmount .rp-bx3d__scene {
    height: 560px;
}

.rp-bx3d--cabinet .rp-bx3d__face--top,
.rp-bx3d--wallmount .rp-bx3d__face--top {
    display: none;
    /* top yüz cabinet'ta render edilmez */
}







/* Sağ — scroll panelleri */
.rp-bx3d__right {
    display: flex;
    flex-direction: column;
}

.rp-bx3d__panel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0;
    max-width: 520px;
    opacity: 0.4;
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.rp-bx3d__panel.is-active {
    opacity: 1;
}

.rp-bx3d__panel:first-child {
    padding-top: 40px;
}

.rp-bx3d__panel:last-child {
    padding-bottom: 40px;
}

.rp-bx3d__panel-num {
    font-family: var(--rp-font-mono);
    font-size: 12px;
    color: var(--rp-text-dim);
    letter-spacing: 0.2em;
    margin-bottom: 16px;
    transition: color 500ms var(--ease-out);
}

.rp-bx3d__panel.is-active .rp-bx3d__panel-num {
    color: var(--rp-primary);
}

.rp-bx3d__panel-eyebrow {
    margin-bottom: 16px;
}

.rp-bx3d__panel-title {
    font-family: var(--rp-font-display);
    font-size: clamp(1.625rem, 1.6vw + 1rem, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--rp-text);
    text-wrap: balance;
}

.rp-bx3d__panel-text {
    font-size: var(--t-lead);
    line-height: 1.6;
    color: var(--rp-text-muted);
    margin: 0;
}

/* Mobile indicator */
.rp-bx3d__indicator {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}

.rp-bx3d__indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--rp-surface-3);
    transition: background-color var(--dur-fast), width var(--dur-fast);
}

.rp-bx3d__indicator-dot.is-active {
    background: var(--rp-primary);
    width: 24px;
}

/* Responsive */




/* ECO mode — sade fade-only */
:root[data-eco="1"] .rp-bx3d__box {
    transition: none !important;
}

:root[data-eco="1"] .rp-bx3d__glow {
    display: none;
}

/* rp-bx3d--solo — tek ürün per section layout (products.blade.php + solution-detail
   sayfaları). Önceden products.blade.php inline <style>'da idi; sayfa-bağımsız
   olduğu için buraya taşındı (2026-07-24). */
.rp-3d-on [data-rp-bx3d-box] {
    display: none !important;
}

@media (min-width:641px) {
    .rp-bx3d--solo .rp-bx3d__right {
        display: block;
    }

    .rp-bx3d--solo .rp-bx3d__right .rp-bx3d__panel {
        min-height: 200vh !important;
        opacity: 1 !important;
        padding: 0 !important;
        display: block !important;
        max-width: 520px;
    }

    .rp-bx3d--solo .rp-bx3d__panel-pin {
        position: sticky;
        top: calc(var(--header-h, 80px) + 104px);
        padding: 8px 0;
    }
}

@media (max-width:640px) {
    .rp-bx3d--solo .rp-bx3d__right .rp-bx3d__panel {
        min-height: auto !important;
        padding: 28px 0 !important;
    }

    .rp-bx3d--solo .rp-bx3d__panel-pin {
        position: static;
    }
}

/* Scene — brand-toned gradient + subtle inset border */
.rp-bx3d--solo .rp-bx3d__scene {
    background:
        radial-gradient(120% 85% at 50% 32%, rgba(0, 178, 148, 0.12), transparent 62%),
        linear-gradient(180deg, var(--rp-surface-2, #eef1f3), var(--rp-surface, #f7f9fa)) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 178, 148, 0.10);
}

/* Key spec grid — fills right column, adds B2B value */
.rp-bx3d--solo .rp-bx3d__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 30px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--rp-border, #e6e9ee);
    border: 1px solid var(--rp-border, #e6e9ee);
}

.rp-bx3d--solo .rp-bx3d__spec {
    background: var(--rp-bg, #fff);
    padding: 15px 18px;
}

.rp-bx3d--solo .rp-bx3d__spec dt {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rp-text-dim, #94a3b8);
    margin: 0 0 6px;
}

.rp-bx3d--solo .rp-bx3d__spec dd {
    margin: 0;
    font-family: var(--rp-font-display, inherit);
    font-weight: 600;
    font-size: clamp(14px, 1vw, 17px);
    color: var(--rp-text, #0f172a);
    line-height: 1.25;
}

@media (max-width:480px) {
    .rp-bx3d--solo .rp-bx3d__specs {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   12. TRUST STRIP (Apple-minimal, mono-numbered, 4 metric)
   ══════════════════════════════════════════════════════════════ */
.rp-trust {
    padding: 96px 0;
    border-bottom: 1px solid var(--rp-border);
    position: relative;
}

.rp-trust__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

.rp-trust__item {
    text-align: center;
    padding: 8px 24px;
    position: relative;
    transition: transform var(--dur);
}

.rp-trust__item:hover {
    transform: translateY(-2px);
}

.rp-trust__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--rp-border);
}

.rp-trust__value {
    font-family: var(--rp-font-mono);
    font-size: clamp(2.5rem, 3vw + 0.5rem, 3.75rem);
    font-weight: 600;
    color: var(--rp-text);
    line-height: 1;
    letter-spacing: -0.04em;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.rp-trust__value>span {
    display: inline-block;
}

.rp-trust__label {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    margin-top: 16px;
    letter-spacing: 0.01em;
}

.rp-trust__icon {
    display: none;
}





/* ══════════════════════════════════════════════════════════════
   13. SECTION HEADER (Apple-style centered)
   ══════════════════════════════════════════════════════════════ */
.rp-section__header {
    max-width: 880px;
    margin: 0 auto 80px;
    text-align: center;
}

.rp-section__header--start {
    text-align: left;
    margin-left: 0;
}

.rp-section__header .rp-eyebrow {
    margin-bottom: 16px;
}

.rp-section__header h2 {
    margin-bottom: 16px;
}

.rp-section__header p {
    color: var(--rp-text-muted);
    font-size: var(--t-lead);
}

/* ══════════════════════════════════════════════════════════════
   13.5 TECHNOLOGY PILLARS (4 pillar, custom SVG icons)
   ══════════════════════════════════════════════════════════════ */
.rp-tech-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.rp-tech-pillars-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rp-tech-pillar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 32px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    transition: background-color var(--dur), border-color var(--dur), transform var(--dur);
    height: 100%;
}

.rp-tech-pillar:hover {
    background: var(--rp-surface-2);
    border-color: var(--rp-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

.rp-tech-pillar__icon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--r);
    background: linear-gradient(135deg, rgba(0, 180, 136, 0.08) 0%, rgba(0, 229, 168, 0.04) 100%);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
    overflow: hidden;
}

.rp-tech-pillar__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(0, 229, 168, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur);
}

.rp-tech-pillar:hover .rp-tech-pillar__icon {
    background: linear-gradient(135deg, rgba(0, 180, 136, 0.18) 0%, rgba(0, 229, 168, 0.10) 100%);
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 180, 136, 0.18);
}

.rp-tech-pillar:hover .rp-tech-pillar__icon::before {
    opacity: 1;
}

.rp-tech-pillar__icon img {
    width: 32px;
    height: 32px;
    filter: brightness(1.05);
    transition: transform var(--dur), filter var(--dur);
    position: relative;
    z-index: 1;
}

.rp-tech-pillar:hover .rp-tech-pillar__icon img {
    transform: rotate(4deg) scale(1.04);
    filter: brightness(1.15);
}

.rp-tech-pillar__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.rp-tech-pillar__text {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    line-height: 1.55;
    flex-grow: 1;
}

.rp-tech-pillar__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rp-primary);
    font-size: var(--t-sm);
    font-weight: 500;
    margin-top: 8px;
    transition: gap var(--dur-fast);
}

.rp-tech-pillar:hover .rp-tech-pillar__cta {
    gap: 8px;
}





/* ══════════════════════════════════════════════════════════════
   14. APPLICATIONS GRID
   ══════════════════════════════════════════════════════════════ */
.rp-app-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px 32px;
    background: var(--rp-surface);
    border-radius: var(--r-xl);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: background-color var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
    height: 100%;
}

.rp-app-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(0, 180, 136, 0.10), transparent 55%);
    opacity: 0;
    transition: opacity var(--dur);
    pointer-events: none;
}

.rp-app-card:hover {
    background: var(--rp-surface-2);
    border-color: var(--rp-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

.rp-app-card:hover::before {
    opacity: 1;
}

.rp-app-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r);
    background: rgba(0, 180, 136, 0.12);
    color: var(--rp-primary);
    transition: transform var(--dur), background var(--dur);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.rp-app-card:hover .rp-app-card__icon {
    transform: scale(1.08) rotate(-4deg);
    background: rgba(0, 180, 136, 0.20);
}

.rp-app-card__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    letter-spacing: -0.015em;
}

.rp-app-card__text {
    flex: 1;
    color: var(--rp-text-muted);
    font-size: var(--t-sm);
    line-height: 1.55;
}

.rp-app-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rp-primary);
    font-size: 14px;
    font-weight: 500;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
    transition: gap var(--dur);
}

.rp-app-card:hover .rp-app-card__cta {
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════
   14.5 ENERGY FLOW (SVG path animation + node overlays)
   ══════════════════════════════════════════════════════════════ */
.rp-flow {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 360;
    max-width: 1200px;
    margin: 0 auto;
}

.rp-flow__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.rp-flow__nodes {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.rp-flow__node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    transition: transform var(--dur);
}

.rp-flow__node {
    cursor: default;
}

.rp-flow__node:hover {
    transform: translateY(-3px);
}

.rp-flow__node--bess:hover {
    transform: translate(-50%, -3px);
}

.rp-flow__node:hover .rp-flow__node-icon {
    transform: scale(1.08);
    background: rgba(0, 180, 136, 0.10);
    border-color: var(--rp-primary);
    box-shadow: 0 12px 24px rgba(0, 180, 136, 0.18), 0 0 24px rgba(0, 229, 168, 0.12);
}

.rp-flow__node:hover .rp-flow__node-icon i {
    transform: scale(1.1);
    color: var(--rp-primary-2);
}

.rp-flow__node-icon i {
    transition: transform var(--dur), color var(--dur);
}

.rp-flow__node-icon {
    transition: transform var(--dur), background var(--dur), border-color var(--dur), box-shadow var(--dur);
}

.rp-flow__node-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-full);
    background: var(--rp-surface);
    border: 1px solid var(--rp-border-strong);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.rp-flow__node-icon--lg {
    width: 88px;
    height: 88px;
    font-size: 40px;
    background: linear-gradient(135deg, var(--rp-surface) 0%, var(--rp-surface-2) 100%);
    border-color: var(--rp-primary);
    box-shadow:
        0 0 0 1px rgba(0, 180, 136, 0.18) inset,
        0 16px 40px rgba(0, 0, 0, 0.10),
        0 0 24px rgba(0, 180, 136, 0.10);
}

.rp-flow__node-label {
    font-family: var(--rp-font-display);
    font-size: var(--t-h5);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--rp-text);
}

.rp-flow__node-label--lg {
    font-size: var(--t-h3);
}

.rp-flow__node-meta {
    font-family: var(--rp-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rp-text-muted);
}

.rp-flow__legend {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-top: 48px;
    flex-wrap: wrap;
}

.rp-flow__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
}

.rp-flow__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--r-full);
    box-shadow: 0 0 12px currentColor;
}

/* Mobile responsive — daha kompakt */


/* ECO mode — pulse particles ve path animation kapat */
:root[data-eco="1"] .rp-flow__svg circle[r="4"] {
    animation: none;
    display: none;
}

:root[data-eco="1"] .rp-flow__line {
    stroke-dashoffset: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   15. CASE STUDY GRID (capacity overlay on image)
   ══════════════════════════════════════════════════════════════ */
.rp-case {
    display: block;
    background: var(--rp-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: transform var(--dur), box-shadow var(--dur);
    position: relative;
}

.rp-case:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
    border-color: var(--rp-primary);
}

.rp-case__media {
    aspect-ratio: 4 / 3;
    background: var(--rp-surface-2);
    overflow: hidden;
    position: relative;
}

.rp-case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.rp-case:hover .rp-case__media img {
    transform: scale(1.04);
}

.rp-case__media-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--rp-surface-2), var(--rp-surface-3));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-text-dim);
    font-size: 48px;
}

/* Capacity overlay — büyük mono değer image üzerinde */
.rp-case__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.65) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    pointer-events: none;
}

.rp-case__capacity-large {
    font-family: var(--rp-font-mono);
    font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin: 0;
}

.rp-case__sector {
    font-family: var(--rp-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rp-primary-2);
    margin-top: 8px;
    font-weight: 500;
}

.rp-case__body {
    padding: 24px 28px 28px;
}

.rp-case__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.rp-case__location {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rp-case__location i {
    font-size: 14px;
    color: var(--rp-text-dim);
}

/* ══════════════════════════════════════════════════════════════
   16. SUSTAINABILITY BAND (image bg + dark overlay)
   ══════════════════════════════════════════════════════════════ */
.rp-sustain {
    background: linear-gradient(135deg, #0E1F1A 0%, #062018 100%);
    color: #fff;
    border-radius: var(--r-2xl);
    padding: clamp(64px, 8vw, 128px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Full-width modifier — section'u container dışına çıkarır */
.rp-sustain--full {
    width: 100%;
    border-radius: 0;
    padding: clamp(80px, 9vw, 160px) 0;
    margin-top: var(--section-y);
    margin-bottom: var(--section-y);
}

.rp-sustain--full .rp-sustain__inner {
    padding: 0;
}

.rp-sustain__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    filter: saturate(1.2);
}

.rp-sustain__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(0, 229, 168, 0.28), transparent 60%),
        radial-gradient(ellipse at 75% 70%, rgba(0, 180, 136, 0.22), transparent 50%);
}

.rp-sustain .rp-eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

.rp-sustain .rp-display-md {
    color: #fff;
}

.rp-sustain .rp-lead {
    color: rgba(255, 255, 255, 0.78);
}

.rp-sustain .rp-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.rp-sustain .rp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.rp-sustain__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.rp-sustain__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
}

.rp-sustain__stat-value {
    font-family: var(--rp-font-mono);
    font-size: clamp(2rem, 2.6vw + 0.5rem, 3rem);
    font-weight: 700;
    color: var(--rp-primary);
    line-height: 1;
    letter-spacing: -0.04em;
}

.rp-sustain__stat-label {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.6);
    margin-top: 12px;
    line-height: 1.4;
}



/* ══════════════════════════════════════════════════════════════
   17. NEWS GRID
   ══════════════════════════════════════════════════════════════ */
.rp-news {
    display: flex;
    flex-direction: column;
    background: var(--rp-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid transparent;
    transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur);
    height: 100%;
}

.rp-news:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.rp-news__media {
    aspect-ratio: 16 / 9;
    background: var(--rp-surface-2);
    overflow: hidden;
    position: relative;
}

.rp-news__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
}

.rp-news:hover .rp-news__media img {
    transform: scale(1.06);
}

.rp-news__cat-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--rp-text);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    z-index: 1;
}

.rp-news__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.rp-news__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
}

.rp-news__cat {
    color: var(--rp-primary);
}

.rp-news__date {
    color: var(--rp-text-dim);
}

.rp-news__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h4);
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.rp-news__excerpt {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    line-height: 1.55;
    margin-bottom: 16px;
    flex-grow: 1;
}

.rp-news__readtime {
    color: var(--rp-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rp-news__date i,
.rp-news__readtime i {
    font-size: 14px;
}

.rp-news__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
    color: var(--rp-primary);
    font-size: 14px;
    font-weight: 500;
    transition: gap var(--dur);
}

.rp-news:hover .rp-news__cta {
    gap: 12px;
}

/* Equal-height card CTAs: pin "Learn more" to the bottom so they align across a row */
.rp-possibility-card {
    display: flex;
    flex-direction: column;
}

.rp-possibility-card__desc {
    flex-grow: 1;
}

.rp-possibility-card__cta {
    margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════
   18. CTA BAND (Apple-style centered, gradient bg, primary glow)
   ══════════════════════════════════════════════════════════════ */
.rp-cta-band {
    padding: clamp(80px, 10vw, 160px) clamp(32px, 6vw, 96px);
    border-radius: var(--r-2xl);
    background:
        radial-gradient(ellipse at 50% 30%, rgba(0, 180, 136, 0.20), transparent 60%),
        linear-gradient(180deg, var(--rp-surface) 0%, var(--rp-surface-2) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.rp-cta-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 640px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rp-primary), transparent);
    opacity: 0.6;
    z-index: 0;
}

.rp-cta-band__heading {
    font-family: var(--rp-font-display);
    font-size: var(--t-display-md);
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.035em;
    line-height: 1.06;
    text-wrap: balance;
    position: relative;
    z-index: 1;
}

.rp-cta-band__sub {
    font-size: var(--t-lead);
    color: var(--rp-text-muted);
    margin-bottom: 48px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.rp-cta-band__buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.rp-cta-band__buttons-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.rp-cta-band__sublink {
    color: var(--rp-text-muted);
    font-size: var(--t-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 2px;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

.rp-cta-band__sublink:hover {
    color: var(--rp-primary);
    border-bottom-color: var(--rp-primary);
}

/* ══════════════════════════════════════════════════════════════
   18.5 SECTION DIVIDER (1px subtle primary line)
   ══════════════════════════════════════════════════════════════ */
.rp-section-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--rp-border), transparent);
    margin: 0 auto;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   18.6 HERO SLIDER refinements (pagination position + slide counter)
   ══════════════════════════════════════════════════════════════ */
.rp-hero-slider__counter {
    position: absolute;
    top: calc(var(--header-h) + 32px);
    right: var(--gutter);
    z-index: 3;
    font-family: var(--rp-font-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.rp-hero-slider__counter strong {
    color: #FFFFFF;
    font-weight: 600;
}

/* Pagination'ı bottom-left'e al */
.rp-hero-slider__pagination.swiper-pagination {
    position: absolute;
    bottom: 32px !important;
    left: var(--gutter);
    right: auto;
    width: auto !important;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
}



/* Hero slide heading text-wrap balance */
.rp-hero-slider__heading {
    text-wrap: balance;
}

/* Alt sayfalarda page hero — eyebrow ve sub kaldırıldı (kullanıcı talebi) */
.rp-page-hero__eyebrow,
.rp-page-hero__sub {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   19. FOOTER
   ══════════════════════════════════════════════════════════════ */
.rp-footer {
    background: var(--rp-surface);
    padding: 80px 0 24px;
    margin-top: var(--section-y);
    border-top: 1px solid var(--rp-border);
}

/* Brand kolonu daha geniş, 4 kolon eşit */
.rp-footer__top {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--rp-border);
}

/* Footer — Corporate / Products / Resources sütunları kaldırıldı (kullanıcı isteği).
   Yalnızca marka bloğu + sürdürülebilirlik (eco) sütunu kalır → 2 kolon. */
.rp-footer__top > .rp-footer__col:not(.rp-footer__col--eco) {
    display: none !important;
}
/* Marka bloğu solda esnek; eco kartı sağda KOMPAKT kalır.
   Orijinal ~%24 genişlik korunur, eco kartı genişleyip stretch olmaz. */
.rp-footer__top {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24%, 320px);
    align-items: start;
}

.rp-footer__brand {
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rp-footer__logo img {
    height: 32px;
}

.rp-footer__intro {
    color: var(--rp-text-muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Parent company / BIST listing badge */
.rp-footer__parent-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 12px;
    background: rgba(0, 168, 120, 0.06);
    border: 1px solid rgba(0, 168, 120, 0.18);
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.rp-footer__parent-badge:hover {
    background: rgba(0, 168, 120, 0.12);
    border-color: rgba(0, 168, 120, 0.32);
}

.rp-footer__parent-badge-label {
    color: var(--rp-text-muted);
    font-weight: 500;
}

.rp-footer__parent-badge strong {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rp-footer__parent-badge-tag {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--rp-primary);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* Newsletter — daha belirgin pill input */
.rp-footer__newsletter-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-footer__newsletter-wrap .rp-eyebrow {
    color: var(--rp-text);
}

.rp-footer__newsletter {
    display: flex;
    align-items: center;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: 999px;
    transition: border-color 200ms, box-shadow 200ms;
}

.rp-footer__newsletter:focus-within {
    border-color: var(--rp-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-primary) 14%, transparent);
}

.rp-footer__newsletter input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    height: 36px;
    font-size: 14px;
    color: var(--rp-text);
}

.rp-footer__newsletter input::placeholder {
    color: var(--rp-text-muted);
}

.rp-footer__newsletter button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--rp-text);
    color: var(--rp-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 200ms;
}

.rp-footer__newsletter button:hover {
    background: var(--rp-primary);
    color: #fff;
}

.rp-footer__newsletter-note {
    display: none;
}

/* Quick contact links altta */
.rp-footer__quick-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
}

.rp-footer__quick-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-text);
    font-size: 14px;
    text-decoration: none;
    transition: color 200ms;
}

.rp-footer__quick-contact a:hover {
    color: var(--rp-primary);
}

.rp-footer__quick-contact a i {
    color: var(--rp-text-muted);
    font-size: 16px;
}

/* Kolon başlığı + liste */
.rp-footer__col-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rp-text-muted);
    margin: 0 0 18px;
}

.rp-footer__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.rp-footer__list a {
    font-size: 14px;
    color: var(--rp-text);
    text-decoration: none;
    transition: color 200ms, padding-left 200ms;
    opacity: 0.85;
}

.rp-footer__list a:hover {
    color: var(--rp-primary);
    opacity: 1;
    padding-left: 4px;
}

/* Sustainability eco card kolonu */
.rp-footer__col--eco {
    /* aynı genişlik, içerik farklı */
}

.rp-footer__eco-card {
    padding: 16px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-footer__eco-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rp-primary) 12%, transparent);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rp-footer__eco-text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--rp-text-muted);
    margin: 0;
}

.rp-footer__eco-text strong {
    color: var(--rp-primary);
    font-weight: 600;
}

.rp-footer__eco-text em {
    font-style: normal;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    padding: 1px 6px;
    background: var(--rp-text);
    color: var(--rp-bg);
    border-radius: 4px;
}

.rp-footer__address {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--rp-text);
    line-height: 1.4;
}

.rp-footer__address i {
    color: var(--rp-text-muted);
    font-size: 16px;
    flex-shrink: 0;
}

/* Footer alt çubuk */
.rp-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
}

.rp-footer__copy {
    font-size: 12px;
    color: var(--rp-text-muted);
    margin: 0;
}

.rp-footer__legal {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.rp-footer__legal a {
    font-size: 12px;
    color: #475569;
    /* a11y: 6.4:1 on the #f5f5f7 footer bar (slate-600) */
    text-decoration: none;
    transition: color 200ms;
}

.rp-footer__legal a:hover {
    color: var(--rp-primary);
}

.rp-footer__social {
    display: flex;
    gap: 8px;
}

.rp-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-text);
    text-decoration: none;
    font-size: 16px;
    transition: background 200ms, color 200ms, border-color 200ms;
}

.rp-footer__social a:hover {
    background: var(--rp-primary);
    color: #fff;
    border-color: var(--rp-primary);
}





/* ══════════════════════════════════════════════════════════════
   20. COOKIE BANNER
   ══════════════════════════════════════════════════════════════ */
.rp-cookie {
    position: fixed;
    bottom: 24px;
    left: 24px;
    max-width: 420px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
    z-index: 90;
    transform: translateY(140%);
    transition: transform var(--dur) var(--ease-out);
}


.rp-cookie.is-visible {
    transform: translateY(0);
}

.rp-cookie__text {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    margin-bottom: 16px;
}

.rp-cookie__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   21. SCROLL PROGRESS
   ══════════════════════════════════════════════════════════════ */
.rp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--rp-primary);
    z-index: 999;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   22. INNER PAGE HEADER
   ══════════════════════════════════════════════════════════════ */
/* Dark page hero — alt sayfa başlık alanı (reapbattery.com / yeo style) */
.rp-page-hero {
    padding: calc(var(--header-h) + 80px) 0 88px;
    background: linear-gradient(135deg, #14171c 0%, #0a0c10 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.rp-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(106, 100, 169, 0.18), transparent 60%),
        radial-gradient(ellipse 50% 70% at 10% 100%, rgba(0, 168, 120, 0.14), transparent 60%);
    z-index: -1;
}

.rp-page-hero__inner {
    max-width: 1080px;
    position: relative;
    z-index: 1;
}

.rp-page-hero__eyebrow {
    margin-bottom: 24px;
    color: var(--rp-accent-2) !important;
}

.rp-page-hero__heading {
    font-family: var(--rp-font-display);
    font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
    margin-bottom: 24px;
    text-wrap: balance;
}

.rp-page-hero__sub {
    font-size: var(--t-lead);
    color: rgba(255, 255, 255, 0.70);
    max-width: 760px;
    line-height: 1.6;
}

.rp-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.rp-breadcrumb a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color var(--dur-fast);
}

.rp-breadcrumb a:hover {
    color: #fff;
}

.rp-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.30);
    font-size: 12px;
}

/* Active (son) segment — pill içinde, vurgulu */
.rp-breadcrumb>span:last-child {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.10);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 500;
}

.rp-prose {
    font-size: var(--t-body);
    line-height: 1.75;
    color: var(--rp-text);
    max-width: 760px;
}

.rp-prose .lead {
    font-size: var(--t-lead);
    color: var(--rp-text-muted);
    margin-bottom: 32px;
}

.rp-prose h2 {
    font-family: var(--rp-font-display);
    font-size: var(--t-h2);
    margin: 56px 0 16px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.rp-prose h3 {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    margin: 32px 0 12px;
}

.rp-prose p {
    margin-bottom: 1em;
}

.rp-prose ul,
.rp-prose ol {
    margin: 0 0 1.5em 1.5em;
}

.rp-prose ul {
    list-style: disc;
}

.rp-prose ol {
    list-style: decimal;
}

.rp-prose li {
    margin-bottom: 0.5em;
    padding-left: 0.25em;
}

.rp-prose a {
    color: var(--rp-primary);
    border-bottom: 1px solid currentColor;
    transition: opacity var(--dur-fast);
}

.rp-prose a:hover {
    opacity: 0.7;
}

.rp-prose strong {
    font-weight: 600;
    color: var(--rp-text);
}

.rp-prose img {
    border-radius: var(--r);
    margin: 24px 0;
}

.rp-prose blockquote {
    border-left: 3px solid var(--rp-primary);
    padding: 8px 0 8px 24px;
    margin: 32px 0;
    font-size: var(--t-lead);
    color: var(--rp-text-muted);
}

.rp-prose code {
    font-family: var(--rp-font-mono);
    font-size: 0.9em;
    background: var(--rp-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   23. PAGINATION
   ══════════════════════════════════════════════════════════════ */
.rp-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 48px;
    flex-wrap: wrap;
}

.rp-pagination a,
.rp-pagination span {
    padding: 10px 16px;
    font-size: var(--t-sm);
    border-radius: var(--r-sm);
    color: var(--rp-text);
    transition: background-color var(--dur-fast);
    min-width: 40px;
    text-align: center;
}

.rp-pagination a:hover {
    background: var(--rp-surface-2);
    color: var(--rp-primary);
}

.rp-pagination .is-active {
    background: var(--rp-primary);
    color: var(--rp-text-invert);
}

.rp-pagination .is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   22.5 SERVICE DETAIL — content + sticky spec card
   ══════════════════════════════════════════════════════════════ */
.rp-detail__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

.rp-detail__aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.rp-detail__spec-card {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    padding: 32px;
}

.rp-detail__spec-title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h4);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 24px;
}

.rp-detail__spec-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
}

/* ══════════════════════════════════════════════════════════════
   22.5b PRODUCT DETAIL — key-spec strip, model table, use-case cards
   ══════════════════════════════════════════════════════════════ */
/* Key-spec highlight strip */
.rp-keyspec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--rp-border);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.rp-keyspec__item {
    background: var(--rp-surface);
    padding: 30px 22px;
    text-align: center;
}

.rp-keyspec__val {
    font-family: var(--rp-font-mono);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--rp-text);
    line-height: 1.1;
}

.rp-keyspec__label {
    margin-top: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rp-text-muted);
    font-weight: 600;
}

/* Per-model comparison table */
.rp-modeltable-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
}

.rp-modeltable {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: var(--rp-surface);
    font-size: 14px;
}

.rp-modeltable th,
.rp-modeltable td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--rp-border);
    vertical-align: top;
}

.rp-modeltable thead th {
    background: var(--rp-surface-2);
    color: var(--rp-text);
    font-weight: 700;
    white-space: nowrap;
}

.rp-modeltable thead th .rp-modeltable__model {
    display: block;
    margin-top: 3px;
    font-family: var(--rp-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--rp-primary);
}

.rp-modeltable tbody th {
    font-weight: 600;
    color: var(--rp-text-muted);
    white-space: nowrap;
}

.rp-modeltable tbody td {
    font-family: var(--rp-font-mono);
    color: var(--rp-text);
}

.rp-modeltable tbody tr:last-child th,
.rp-modeltable tbody tr:last-child td {
    border-bottom: 0;
}

/* Use-case cards */
.rp-usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.rp-usecase {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    padding: 28px 26px;
    transition: transform 0.35s var(--ease-out), border-color 0.35s ease, box-shadow 0.35s ease;
}

.rp-usecase:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 14px 34px rgba(0, 168, 120, 0.12);
}

.rp-usecase__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 180, 136, 0.12);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.rp-usecase__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--rp-text);
}

.rp-usecase__text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rp-text-muted);
}



/* ══════════════════════════════════════════════════════════════
   22.6 RELATED PRODUCTS CAROUSEL (Swiper)
   ══════════════════════════════════════════════════════════════ */
.rp-related {
    width: 100%;
    padding: 8px;
    margin: -8px;
    overflow: visible !important;
}

.rp-related .swiper-wrapper {
    display: flex;
}

.rp-related .swiper-slide {
    height: auto;
    display: flex;
}

.rp-related .swiper-slide>a {
    width: 100%;
}

.rp-related__nav {
    display: flex;
    gap: 8px;
}

.rp-related__nav-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    color: var(--rp-text);
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
    font-size: 18px;
}

.rp-related__nav-btn:hover {
    background: var(--rp-primary);
    border-color: var(--rp-primary);
    color: var(--rp-text-invert);
}

.rp-related__nav-btn.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   23.5 STICKY CTA BAR (scroll > 60% reveal)
   ══════════════════════════════════════════════════════════════ */
.rp-sticky-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 22px;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-full);
    box-shadow: var(--rp-shadow-pop);
    transform: translateY(120%);
    opacity: 0;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
}

.rp-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.rp-sticky-cta__text {
    font-size: var(--t-sm);
    color: var(--rp-text);
    font-weight: 500;
    white-space: nowrap;
}

.rp-sticky-cta__btn {
    padding: 8px 18px;
    background: var(--rp-primary);
    color: var(--rp-text-invert);
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    transition: background-color var(--dur-fast);
}

.rp-sticky-cta__btn:hover {
    background: var(--rp-primary-2);
}

.rp-sticky-cta__close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    color: var(--rp-text-muted);
    transition: color var(--dur-fast), background-color var(--dur-fast);
    font-size: 14px;
}

.rp-sticky-cta__close:hover {
    color: var(--rp-text);
    background: var(--rp-surface-2);
}



/* ══════════════════════════════════════════════════════════════
   23.6 MODAL (Quote, Brochure, Generic)
   ══════════════════════════════════════════════════════════════ */
.rp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.rp-modal.is-open {
    display: flex;
}

.rp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: rp-modal-fade var(--dur) var(--ease-out);
}

.rp-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 48px);
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: rp-modal-pop var(--dur) var(--ease-out);
    box-shadow: var(--rp-shadow-pop);
}

.rp-modal__dialog--lg {
    max-width: 720px;
}

.rp-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--rp-border);
}

.rp-modal__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.rp-modal__sub {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    margin-top: 6px;
}

.rp-modal__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    color: var(--rp-text-muted);
    background: var(--rp-surface-2);
    transition: color var(--dur-fast);
    flex-shrink: 0;
    font-size: 18px;
}

.rp-modal__close:hover {
    color: var(--rp-text);
}

.rp-modal__body {
    padding: 28px 32px;
    flex: 1;
    overflow-y: auto;
}

.rp-modal__foot {
    padding: 20px 32px;
    border-top: 1px solid var(--rp-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--rp-bg);
}

@keyframes rp-modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rp-modal-pop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ══════════════════════════════════════════════════════════════
   23.7 MULTI-STEP FORM (Quote / Configure)
   ══════════════════════════════════════════════════════════════ */
.rp-steps {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.rp-steps__item {
    flex: 1;
    height: 4px;
    background: var(--rp-surface-3);
    border-radius: var(--r-full);
    transition: background-color var(--dur);
}

.rp-steps__item.is-active {
    background: var(--rp-primary);
}

.rp-steps__item.is-done {
    background: var(--rp-primary-2);
}

.rp-step {
    display: none;
}

.rp-step.is-active {
    display: block;
}

.rp-step__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h4);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
}

.rp-step__sub {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    margin-bottom: 24px;
}

/* Radio card group */
.rp-radio-card-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.rp-radio-card-group--col1 {
    grid-template-columns: 1fr;
}

.rp-radio-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.rp-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rp-radio-card__inner {
    padding: 16px 18px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-radio-card:hover .rp-radio-card__inner {
    border-color: var(--rp-border-strong);
}

.rp-radio-card input:checked+.rp-radio-card__inner {
    border-color: var(--rp-primary);
    background: rgba(0, 180, 136, 0.08);
}

.rp-radio-card input:focus-visible+.rp-radio-card__inner {
    box-shadow: 0 0 0 2px rgba(0, 180, 136, 0.30);
}

.rp-radio-card__label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--rp-text);
}

.rp-radio-card__hint {
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    color: var(--rp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}



/* ══════════════════════════════════════════════════════════════
   23.8 SPEC TABLE COMPONENT (reusable, product detail)
   ══════════════════════════════════════════════════════════════ */
.rp-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--rp-border);
}

.rp-spec__row {
    display: contents;
}

.rp-spec__row>.rp-spec__key,
.rp-spec__row>.rp-spec__val {
    padding: 18px 0;
    border-bottom: 1px solid var(--rp-border);
}

.rp-spec__key {
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rp-text-muted);
    font-weight: 500;
}

.rp-spec__val {
    font-family: var(--rp-font-mono);
    font-size: var(--t-lead);
    font-weight: 600;
    color: var(--rp-text);
    text-align: right;
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════
   23.9 TIMELINE (Milestones, Hiring process, Testing process)
   ══════════════════════════════════════════════════════════════ */
.rp-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    max-width: 880px;
}

.rp-timeline::before {
    content: '';
    position: absolute;
    left: 96px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, var(--rp-border-strong) 0%, var(--rp-border) 60%, transparent 100%);
}

.rp-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 32px;
    padding: 24px 0;
    align-items: flex-start;
}

.rp-timeline__item::before {
    content: '';
    position: absolute;
    left: 91px;
    top: 32px;
    width: 11px;
    height: 11px;
    border-radius: var(--r-full);
    background: var(--rp-bg);
    border: 2px solid var(--rp-primary);
    box-shadow: 0 0 0 3px var(--rp-bg);
    z-index: 1;
}

.rp-timeline__year {
    font-family: var(--rp-font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--rp-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.rp-timeline__body {
    padding-left: 16px;
}

.rp-timeline__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h4);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
}

.rp-timeline__text {
    color: var(--rp-text-muted);
    font-size: var(--t-body);
    margin: 0;
    line-height: 1.6;
}



/* ══════════════════════════════════════════════════════════════
   23.10 LIFECYCLE (5 stages, horizontal flow)
   ══════════════════════════════════════════════════════════════ */
.rp-lifecycle {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    counter-reset: lc;
}

.rp-lifecycle__item {
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    padding: 28px 24px;
    transition: border-color var(--dur), transform var(--dur);
}

.rp-lifecycle__item:hover {
    border-color: var(--rp-primary);
    transform: translateY(-4px);
}

.rp-lifecycle__num {
    font-family: var(--rp-font-mono);
    font-size: 12px;
    color: var(--rp-text-dim);
    letter-spacing: 0.2em;
    margin-bottom: 18px;
    font-weight: 500;
}

.rp-lifecycle__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r);
    background: rgba(0, 180, 136, 0.10);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}

.rp-lifecycle__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h5);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}

.rp-lifecycle__text {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    line-height: 1.55;
    margin: 0;
}





/* ══════════════════════════════════════════════════════════════
   23.11 SAFETY LAYERS (vertical, numbered stack)
   ══════════════════════════════════════════════════════════════ */
.rp-safety-layers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-safety-layer {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    padding: 32px;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 28px;
    align-items: flex-start;
    transition: border-color var(--dur);
}

.rp-safety-layer:hover {
    border-color: var(--rp-primary);
}

.rp-safety-layer__num {
    font-family: var(--rp-font-mono);
    font-size: 36px;
    font-weight: 700;
    color: var(--rp-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

.rp-safety-layer__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

.rp-safety-layer__body p {
    color: var(--rp-text-muted);
    margin: 0 0 16px;
    line-height: 1.6;
}

.rp-safety-layer__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px;
}

.rp-safety-layer__points li {
    font-family: var(--rp-font-mono);
    font-size: var(--t-xs);
    color: var(--rp-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding-left: 18px;
    position: relative;
    line-height: 1.6;
}

.rp-safety-layer__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 1px;
    background: var(--rp-primary);
}



/* ══════════════════════════════════════════════════════════════
   23.12 CERT CARD (compact)
   ══════════════════════════════════════════════════════════════ */
.rp-cert-card {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    transition: border-color var(--dur), background-color var(--dur);
}

.rp-cert-card:hover {
    border-color: var(--rp-primary);
    background: var(--rp-surface-2);
}

.rp-cert-card__code {
    font-family: var(--rp-font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--rp-text);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.rp-cert-card__desc {
    font-size: var(--t-sm);
    color: var(--rp-text-muted);
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   23.13 SPEC CARD (standalone, used in About, Quality)
   ══════════════════════════════════════════════════════════════ */
.rp-spec-card {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    padding: 32px;
}

/* ══════════════════════════════════════════════════════════════
   23.14 FAQ (accordion, search)
   ══════════════════════════════════════════════════════════════ */
.rp-faq-search input {
    font-size: var(--t-body);
    padding: 16px 20px;
}

.rp-faq-group {
    margin-bottom: 56px;
}

.rp-faq-group__title {
    font-family: var(--rp-font-display);
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rp-border);
}

.rp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-faq-item {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-lg);
    transition: border-color var(--dur), background-color var(--dur);
    overflow: hidden;
}

.rp-faq-item:hover {
    border-color: var(--rp-border-strong);
}

.rp-faq-item[open] {
    border-color: var(--rp-primary);
    background: var(--rp-surface-2);
}

.rp-faq-item__q {
    cursor: pointer;
    list-style: none;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--t-body);
    font-weight: 500;
    color: var(--rp-text);
}

.rp-faq-item__q::-webkit-details-marker {
    display: none;
}

.rp-faq-item__q::marker {
    display: none;
}

.rp-faq-item__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--rp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-text-muted);
    transition: transform var(--dur), color var(--dur), background-color var(--dur);
    font-size: 16px;
    /* Icon child <i> ve span'ler tıklamayı yakalamasın → summary tıklamasını alır */
    pointer-events: none;
}

.rp-faq-item__icon i,
.rp-faq-item__q-text {
    pointer-events: none;
}

.rp-faq-item__q {
    user-select: none;
}

.rp-faq-item[open] .rp-faq-item__icon {
    transform: rotate(135deg);
    color: var(--rp-primary);
    background: rgba(0, 180, 136, 0.12);
}

.rp-faq-item__a {
    padding: 0 26px 22px;
    color: var(--rp-text-muted);
    line-height: 1.65;
    font-size: var(--t-body);
}

/* ══════════════════════════════════════════════════════════════
   24. UTILITIES
   ══════════════════════════════════════════════════════════════ */
.rp-only-mobile {
    display: none;
}

.rp-only-desktop {
    display: block;
}



.rp-mt-0 {
    margin-top: 0 !important;
}

.rp-mt-1 {
    margin-top: 8px;
}

.rp-mt-2 {
    margin-top: 16px;
}

.rp-mt-3 {
    margin-top: 24px;
}

.rp-mt-4 {
    margin-top: 32px;
}

.rp-mt-6 {
    margin-top: 48px;
}

.rp-mt-8 {
    margin-top: 64px;
}

.rp-divider {
    height: 1px;
    background: var(--rp-border);
    border: 0;
    margin: var(--section-y-sm) 0;
}

/* Reveal animation hooks */
/* Reveal animation — sadece JS hazırsa gizle (yoksa içerik görünür kalır) */
.rp-js-ready [data-rp-anim] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.rp-js-ready [data-rp-anim].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.rp-js-ready [data-rp-anim="fade"] {
    transform: none;
}

/* Fallback — JS yüklenmezse her şey görünür */
:root:not(.rp-js-ready) [data-rp-anim] {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Blok Giriş Animasyonu (VE "Animasyon" ayarı) ──────────────────────────
   data-rp-anim'den AYRI bir öznitelik: data-rp-anim bir bloğun İÇİNDEKİ
   öğelere blade şablonunda sabit basılır; data-rp-reveal ise admin panelinden
   seçilen blok SARMALAYICISINA (wrapper) basılır. Aynı elemente iki reveal'in
   çakışıp çifte-animasyon yapmaması için ayrı tutulur. Aynı IntersectionObserver
   ve "is-visible" sınıfını paylaşır (app.js). */
.rp-js-ready [data-rp-reveal] {
    opacity: 0;
    transition: opacity var(--rp-reveal-dur, var(--dur-slow)) var(--ease-out),
                transform var(--rp-reveal-dur, var(--dur-slow)) var(--ease-out);
    transition-delay: var(--rp-reveal-delay, 0ms);
}

.rp-js-ready [data-rp-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rp-js-ready [data-rp-reveal="fade"] { transform: none; }
.rp-js-ready [data-rp-reveal="fade-up"] { transform: translateY(24px); }
.rp-js-ready [data-rp-reveal="fade-down"] { transform: translateY(-24px); }
.rp-js-ready [data-rp-reveal="zoom-in"] { transform: scale(.94); }
.rp-js-ready [data-rp-reveal="slide-left"] { transform: translateX(40px); }
.rp-js-ready [data-rp-reveal="slide-right"] { transform: translateX(-40px); }

:root:not(.rp-js-ready) [data-rp-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* SplitText — kelime kelime reveal */
.rp-split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.1;
    /* Descender (g, y, p) kuyrukları overflow:hidden maskesinde kesilmesin diye
       maske kutusu alta doğru genişletildi; negatif margin ile satır aralığı korunur. */
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
}

.rp-split-word__inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 600ms ease-out;
}

[data-rp-split].is-revealed .rp-split-word__inner {
    transform: translateY(0);
    opacity: 1;
}

/* Magnetic CTA — fare hover'da çekim */
[data-rp-magnetic] {
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Card 3D tilt */
[data-rp-tilt] {
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

[data-rp-tilt]>* {
    transform: translateZ(0);
    /* GPU compositing */
}

/* Lenis: html üzerinde class — smooth scroll active */
html.rp-lenis {
    scroll-behavior: auto;
}

html.rp-lenis body {
    min-height: 100vh;
}

/* prefers-reduced-motion: yalnızca infinite/loop dekoratif animasyonları durdur.
   Tek-seferlik fade/translate reveal'leri ve transition'ları KORU — onlar accessibility için zararsız.
   Kullanıcı tüm motion'u kapatmak isterse header'daki ECO pill'i kullanabilir. */


/* ════════════════════════════════════════════════════════════
   ECO MODE — britishrenewables.com tarzı düşük-enerji modu
   - Animasyon yok
   - Görseller grayscale + opacity 0.85
   - Custom font yerine system font
   - Gradient/glow/shadow azaltılır
   - Video/Swiper autoplay kapalı (JS tarafı)
   ════════════════════════════════════════════════════════════ */

/* 1. Animasyon ve transition tamamen kapalı */
:root[data-eco="1"] *,
:root[data-eco="1"] *::before,
:root[data-eco="1"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

:root[data-eco="1"] [data-rp-anim],
:root[data-eco="1"] [data-rp-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

:root[data-eco="1"] [data-rp-tilt] {
    transform: none !important;
}

:root[data-eco="1"] [data-rp-magnetic] {
    transform: none !important;
}

/* 2. Görseller grayscale + biraz solgun (göze daha az stimulus) */
:root[data-eco="1"] img,
:root[data-eco="1"] video,
:root[data-eco="1"] picture {
    filter: grayscale(0.7) contrast(0.95) brightness(1.02);
    opacity: 0.92;
}

:root[data-eco="1"] .rp-header__logo img,
:root[data-eco="1"] .rp-footer__logo img {
    filter: grayscale(0) !important;
    opacity: 1 !important;
}

/* 3. Tipografi — custom font yerine system stack */
:root[data-eco="1"] body,
:root[data-eco="1"] .rp-page-hero__heading,
:root[data-eco="1"] .rp-display-md,
:root[data-eco="1"] h1,
:root[data-eco="1"] h2,
:root[data-eco="1"] h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-feature-settings: normal !important;
    letter-spacing: -0.01em;
}

:root[data-eco="1"] .rp-text-mono,
:root[data-eco="1"] [class*="mono"] {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* 4. Dekoratif gradient/glow/shadow kaldır */
:root[data-eco="1"] .rp-bx3d__glow,
:root[data-eco="1"] .rp-error__bg-circle,
:root[data-eco="1"] .rp-error__bg,
:root[data-eco="1"] .rp-coming-icon,
:root[data-eco="1"] .rp-resource-card__icon,
:root[data-eco="1"] .rp-error__num {
    background: var(--rp-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--rp-text) !important;
}

:root[data-eco="1"] [class*="gradient"],
:root[data-eco="1"] .rp-card,
:root[data-eco="1"] .rp-hub-card,
:root[data-eco="1"] .rp-app-card,
:root[data-eco="1"] .rp-resource-card,
:root[data-eco="1"] .rp-dept-card,
:root[data-eco="1"] .rp-quote-card,
:root[data-eco="1"] .rp-case-card,
:root[data-eco="1"] .rp-featured-case {
    box-shadow: none !important;
}

/* 5. Hero overlay / decorative video / parallax kapat */
:root[data-eco="1"] .rp-hero-slider__media video,
:root[data-eco="1"] video[autoplay] {
    display: none !important;
}

:root[data-eco="1"] .rp-hero-slider__overlay,
:root[data-eco="1"] [class*="parallax"],
:root[data-eco="1"] .rp-bx3d__face {
    transform: none !important;
}

/* 6. ECO mode'da 3D container → STATIC IMAGE
   3D rotation kapalı + tek static container görseli (CO2 + render maliyeti azalt) */
:root[data-eco="1"] .rp-bx3d__box,
:root[data-eco="1"] .rp-bx3d__shadow,
:root[data-eco="1"] .rp-bx3d__glow,
:root[data-eco="1"] .rp-bx3d__indicator {
    display: none !important;
}

:root[data-eco="1"] .rp-bx3d__scene {
    perspective: none !important;
    background: url('/themes/reap/assets/media/brand/3d-box/eco-container.png') center center / contain no-repeat;
}

/* Cabinet / Wallmount (urunler sayfası 2-3 section) için de aynı static image */
:root[data-eco="1"] .rp-bx3d--cabinet .rp-bx3d__scene,
:root[data-eco="1"] .rp-bx3d--wallmount .rp-bx3d__scene {
    background: url('/themes/reap/assets/media/brand/3d-box/eco-container.png') center center / contain no-repeat;
}

/* ECO mode: enerji tüketen ek UI elemanları kapat */
:root[data-eco="1"] .rp-scroll-top,
:root[data-eco="1"] .rp-read-progress {
    display: none !important;
}

/* Hero swiper navigation/scroll indicator gizle */
:root[data-eco="1"] .rp-hero-slider__scroll,
:root[data-eco="1"] .rp-hero-slider__nav {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   ECO MODE — BATTERY 3D SECTION KOMPAKT LAYOUT
   Sticky scroll uzun yapıdan vazgeç, kompakt tek-kolon liste
   ════════════════════════════════════════════════════════════ */
:root[data-eco="1"] .rp-bx3d {
    padding: 56px 0;
    background: var(--rp-bg);
}

:root[data-eco="1"] .rp-bx3d__container {
    display: block;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Sol kolon: sticky kapalı, container image üstte küçük */
:root[data-eco="1"] .rp-bx3d__left {
    width: 100%;
    margin-bottom: 40px;
    position: relative;
}

:root[data-eco="1"] .rp-bx3d__sticky {
    position: relative;
    top: auto;
    height: auto;
    display: block;
}

:root[data-eco="1"] .rp-bx3d__intro {
    max-width: 100%;
    margin-bottom: 24px;
}

:root[data-eco="1"] .rp-bx3d__intro-heading {
    font-size: clamp(1.625rem, 2vw + 1rem, 2.25rem);
}

:root[data-eco="1"] .rp-bx3d__scene {
    height: 220px;
    width: 100%;
    border-radius: 12px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Sağ kolon: tüm paneller ardarda görünür, sade liste */
:root[data-eco="1"] .rp-bx3d__right {
    width: 100%;
    display: block;
}

:root[data-eco="1"] .rp-bx3d__panel {
    min-height: auto !important;
    padding: 20px 0 !important;
    opacity: 1 !important;
    max-width: 100%;
    border-top: 1px solid var(--rp-border);
    display: block;
    transform: none !important;
}

:root[data-eco="1"] .rp-bx3d__panel:first-child {
    border-top: 0;
    padding-top: 0 !important;
}

:root[data-eco="1"] .rp-bx3d__panel-num {
    color: var(--rp-text-muted);
    margin-bottom: 8px;
    font-size: 11px;
}

:root[data-eco="1"] .rp-bx3d__panel-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

:root[data-eco="1"] .rp-bx3d__panel-text {
    font-size: 14px;
    line-height: 1.55;
}

:root[data-eco="1"] .rp-bx3d__panel-eyebrow {
    margin-bottom: 6px;
}

:root[data-eco="1"] .rp-bx3d__indicator {
    display: none !important;
}

/* ECO sustainability section — full-width gradient yerine kompakt */
:root[data-eco="1"] .rp-sustain--full {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 56px 0;
    background: var(--rp-surface);
    color: var(--rp-text);
}

:root[data-eco="1"] .rp-sustain__bg,
:root[data-eco="1"] .rp-sustain__overlay {
    display: none !important;
}

:root[data-eco="1"] .rp-sustain .rp-display-md,
:root[data-eco="1"] .rp-sustain .rp-lead,
:root[data-eco="1"] .rp-sustain__stat-label {
    color: var(--rp-text);
}

:root[data-eco="1"] .rp-sustain .rp-lead {
    color: var(--rp-text-muted);
}

/* ECO genel — Section padding küçült (boş alan tasarrufu, daha az scroll) */
:root[data-eco="1"] .rp-section {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* ECO genel — kart hover effect'leri kapat */
:root[data-eco="1"] .rp-card:hover,
:root[data-eco="1"] .rp-tech-pillar:hover,
:root[data-eco="1"] .rp-app-card:hover,
:root[data-eco="1"] .rp-news:hover,
:root[data-eco="1"] .rp-case:hover,
:root[data-eco="1"] .rp-hub-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ECO 3D scene içindeki transform'lar reset (kutu görünmez ama background image düzgün) */
:root[data-eco="1"] .rp-bx3d__scene {
    transform: none !important;
    perspective: none !important;
}

:root[data-eco="1"] .rp-flow__svg circle[r="4"] {
    animation: none;
    display: none;
}

:root[data-eco="1"] .rp-flow__line {
    stroke-dashoffset: 0 !important;
}

:root[data-eco="1"] .rp-hero-slider__nav {
    display: none;
}

/* 7. ECO PILL toggle (header) ─ icon + label + status dot */
.rp-eco-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    height: 32px;
    border-radius: 999px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    color: var(--rp-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background 200ms, color 200ms, border-color 200ms;
}

.rp-eco-pill:hover {
    background: var(--rp-surface);
    border-color: var(--rp-text);
}

.rp-eco-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rp-text-muted);
    flex-shrink: 0;
    transition: background 200ms, box-shadow 200ms;
}

.rp-eco-pill i {
    font-size: 14px;
    line-height: 1;
    color: var(--rp-text-muted);
    transition: color 200ms;
}

.rp-eco-pill__label {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/* Aktif (ECO açık) — yeşil */
.rp-eco-pill.is-active,
:root[data-eco="1"] .rp-eco-pill {
    background: color-mix(in srgb, var(--rp-primary) 14%, transparent);
    color: var(--rp-primary);
    border-color: var(--rp-primary);
}

.rp-eco-pill.is-active .rp-eco-pill__dot,
:root[data-eco="1"] .rp-eco-pill .rp-eco-pill__dot {
    background: var(--rp-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-primary) 25%, transparent);
}

.rp-eco-pill.is-active i,
:root[data-eco="1"] .rp-eco-pill i {
    color: var(--rp-primary);
}

/* ════════════════════════════════════════════════════════════
   ECO BANNER — sade full-width sticky bar (top: 0, kayma yok)
   Banner-height: 40px desktop, 36px mobile
   ════════════════════════════════════════════════════════════ */
:root {
    --rp-eco-banner-h: 40px;
}


.rp-eco-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rp-eco-banner-h);
    z-index: 9999;
    background: linear-gradient(135deg, #0d4d36 0%, #061f15 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-100%);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Banner aktif olduğunda göster */
:root[data-eco="1"] .rp-eco-banner {
    transform: translateY(0);
    pointer-events: auto;
}

.rp-eco-banner.is-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.rp-eco-banner__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    font-size: 12px;
    line-height: 1;
    font-family: var(--rp-font-body);
}

.rp-eco-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(45, 184, 77, 0.18);
    color: #4ade80;
    font-size: 13px;
    flex-shrink: 0;
}

.rp-eco-banner__text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rp-eco-banner__text strong {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #4ade80;
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.rp-eco-banner__text>span:nth-child(2) {
    color: rgba(255, 255, 255, 0.30);
    flex-shrink: 0;
}

.rp-eco-banner__text>span:nth-child(3) {
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-eco-banner__text [data-rp-eco-saved] {
    color: #4ade80;
    font-weight: 600;
}

.rp-eco-banner__off {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: background 160ms;
}

.rp-eco-banner__off:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}



/* Banner aktif → header banner altına iner, body içeriği kayar */
:root[data-eco="1"] .rp-header {
    top: var(--rp-eco-banner-h);
}

:root[data-eco="1"] body {
    padding-top: var(--rp-eco-banner-h);
}

/* Decorative inline animasyonlar (ECO 3D kutu, hero) — keyframe çağrıları zaten 'animation: none' ile susturuldu;
   ek olarak SplitText word reveal class'ı statik kalsın */
:root[data-eco="1"] [data-rp-split]>span,
:root[data-eco="1"] [data-rp-split] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}

/* ════════════════════════════════════════════════════════════
   24.  HUB PAGES — kurumsal/teknoloji/urunler/uygulamalar/kaynaklar
   ════════════════════════════════════════════════════════════ */

/* 24.1 — HUB CARDS (kurumsal) ═════════════════════════════════ */
.rp-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}



.rp-hub-card {
    display: flex;
    flex-direction: column;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--rp-border);
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 380ms;
    will-change: transform;
}

.rp-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--rp-primary);
}

.rp-hub-card__media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--rp-bg);
}

.rp-hub-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-hub-card:hover .rp-hub-card__media img {
    transform: scale(1.04);
}

.rp-hub-card__icon {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    backdrop-filter: blur(10px);
}

.rp-hub-card__body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.rp-hub-card__title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
}

.rp-hub-card__text {
    color: var(--rp-text-muted);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}

.rp-hub-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-primary);
    font-weight: 500;
    margin-top: 8px;
    transition: gap 300ms;
}

.rp-hub-card:hover .rp-hub-card__cta {
    gap: 14px;
}

/* 24.2 — TECH STACK ROWS (teknoloji) ══════════════════════════ */
.rp-tech-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-tech-row {
    display: grid;
    grid-template-columns: 80px 1fr auto 32px;
    align-items: center;
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--rp-border);
    text-decoration: none;
    color: inherit;
    transition: background 300ms;
}

.rp-tech-row:last-child {
    border-bottom: 1px solid var(--rp-border);
}

.rp-tech-row:hover {
    background: var(--rp-surface);
}

.rp-tech-row__icon {
    width: 64px;
    height: 64px;
    background: var(--rp-surface);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--rp-primary);
    transition: transform 300ms, background 300ms;
}

.rp-tech-row:hover .rp-tech-row__icon {
    transform: scale(1.05);
    background: var(--rp-bg);
}

.rp-tech-row__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 6px 0 8px;
}

.rp-tech-row__text {
    color: var(--rp-text-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 580px;
}

.rp-tech-row__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 280px;
}

.rp-tech-row__arrow {
    color: var(--rp-text-muted);
    font-size: 22px;
    transition: transform 300ms, color 300ms;
}

.rp-tech-row:hover .rp-tech-row__arrow {
    transform: translateX(6px);
    color: var(--rp-primary);
}



.rp-spec-pill {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    color: var(--rp-text);
    white-space: nowrap;
}

/* 24.3 — PRODUCT ROWS (urunler) ═══════════════════════════════ */
.rp-product-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}

.rp-product-row--reverse {
    grid-template-columns: 1fr 1.1fr;
}

.rp-product-row--reverse .rp-product-row__media {
    order: 2;
}



.rp-product-row__media {
    aspect-ratio: 4/3;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-product-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-product-row__capacity {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 24px 0 16px;
    padding: 16px 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-product-row__capacity strong {
    font-size: 22px;
    letter-spacing: -0.01em;
}

.rp-product-row__desc {
    color: var(--rp-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.rp-product-row__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.rp-product-row__specs li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--rp-border);
    font-size: 14px;
}

.rp-product-row__specs li>span {
    color: var(--rp-text-muted);
}

.rp-product-row__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rp-badge {
    display: inline-block;
    padding: 6px 12px;
    background: var(--rp-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 24.4 — APPLICATION CARDS (uygulamalar) ══════════════════════ */
.rp-app-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    border: 1px solid var(--rp-border);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms, box-shadow 380ms;
    min-height: 320px;
}

.rp-app-card:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}

.rp-app-card__icon {
    width: 48px;
    height: 48px;
    background: var(--rp-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--rp-primary);
    margin-bottom: 16px;
}

.rp-app-card__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 8px 0 12px;
}

.rp-app-card__text {
    color: var(--rp-text-muted);
    line-height: 1.55;
    margin: 0 0 24px;
    flex: 1;
}

.rp-app-card__kpi {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 0 0;
    border-top: 1px solid var(--rp-border);
}

.rp-app-card__kpi strong {
    font-size: 24px;
}

.rp-app-card__kpi span {
    color: var(--rp-text-muted);
    font-size: 13px;
}

.rp-app-card__arrow {
    position: absolute;
    top: 32px;
    right: 32px;
    color: var(--rp-text-muted);
    font-size: 18px;
    transition: transform 300ms, color 300ms;
}

.rp-app-card:hover .rp-app-card__arrow {
    transform: translateX(4px);
    color: var(--rp-primary);
}

/* 24.5 — RESOURCE CARDS (kaynaklar) ═══════════════════════════ */
.rp-resource-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    border: 1px solid var(--rp-border);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms, box-shadow 380ms;
    min-height: 280px;
}

.rp-resource-card:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}

.rp-resource-card__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--rp-primary), color-mix(in srgb, var(--rp-primary) 70%, #000));
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.rp-resource-card__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 8px 0 12px;
}

.rp-resource-card__text {
    color: var(--rp-text-muted);
    line-height: 1.55;
    margin: 0 0 24px;
    flex: 1;
    font-size: 15px;
}

.rp-resource-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
    color: var(--rp-text-muted);
    font-size: 13px;
}

.rp-resource-card__meta i {
    font-size: 18px;
    transition: transform 300ms;
}

.rp-resource-card:hover .rp-resource-card__meta i {
    transform: translateX(4px);
    color: var(--rp-primary);
}

/* 24.6 — CARD VARIANTS (clickable, media, date) ═══════════════ */
.rp-card--clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.rp-card__media {
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--r-lg);
    margin: -8px -8px 20px;
    background: var(--rp-bg);
}

.rp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-card--clickable:hover .rp-card__media img {
    transform: scale(1.04);
}

.rp-card__date {
    font-size: 12px;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
}

.rp-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-primary);
    font-weight: 500;
    margin-top: auto;
    padding-top: 12px;
    transition: gap 300ms;
}

.rp-card--clickable:hover .rp-card__cta {
    gap: 14px;
}

/* 24.7 — UTILITY CLASSES ══════════════════════════════════════ */
.rp-text-center {
    text-align: center;
}

.rp-text-mono {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.rp-text-muted {
    color: var(--rp-text-muted);
}

.rp-text-primary {
    color: var(--rp-primary);
}

/* Note: .rp-grid--3 / .rp-grid--4 base + responsive rules tanımlı (line ~383). Tekrar gerekmiyor. */

/* ════════════════════════════════════════════════════════════
   SPACING UTILITIES — inline style yerine
   ════════════════════════════════════════════════════════════ */
.rp-mb-2 {
    margin-bottom: 8px;
}

.rp-mb-3 {
    margin-bottom: 12px;
}

.rp-mb-4 {
    margin-bottom: 16px;
}

.rp-mb-5 {
    margin-bottom: 20px;
}

.rp-mb-6 {
    margin-bottom: 24px;
}

.rp-mb-8 {
    margin-bottom: 32px;
}

.rp-mb-10 {
    margin-bottom: 40px;
}

.rp-mb-12 {
    margin-bottom: 48px;
}

.rp-mt-2 {
    margin-top: 8px;
}

.rp-mt-3 {
    margin-top: 12px;
}

.rp-mt-4 {
    margin-top: 16px;
}

.rp-mt-6 {
    margin-top: 24px;
}

.rp-mt-8 {
    margin-top: 32px;
}

.rp-mt-12 {
    margin-top: 48px;
}

.rp-p-6 {
    padding: 24px;
}

.rp-p-10 {
    padding: 40px;
}

.rp-gap-2 {
    gap: 8px;
}

.rp-gap-3 {
    gap: 12px;
}

.rp-gap-4 {
    gap: 16px;
}

.rp-gap-6 {
    gap: 24px;
}

.rp-flex-wrap {
    flex-wrap: wrap;
}

.rp-flex-col {
    display: flex;
    flex-direction: column;
}

.rp-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rp-grid-2-eq {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rp-grid-1-1-2 {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
}


/* ════════════════════════════════════════════════════════════
   25.  MEDIA + DOCS PAGES
   ════════════════════════════════════════════════════════════ */

/* 25.1 — VIDEO (featured + grid) ══════════════════════════════ */
.rp-video-featured {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}



.rp-video-featured__media {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-video-featured__media img,
.rp-video-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms;
}

.rp-video-featured:hover .rp-video-featured__media img,
.rp-video-card:hover .rp-video-card__media img {
    transform: scale(1.04);
}

.rp-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    backdrop-filter: blur(10px);
    transition: transform 300ms, background 300ms;
}

.rp-video-featured:hover .rp-video-play,
.rp-video-card:hover .rp-video-play {
    transform: scale(1.08);
    background: var(--rp-primary);
    color: #fff;
}

.rp-video-duration {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.rp-video-featured__meta {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
}

.rp-video-card {
    display: flex;
    flex-direction: column;
    background: var(--rp-bg);
    border-radius: var(--r-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--rp-border);
    transition: transform 380ms, box-shadow 380ms, border-color 380ms;
}

.rp-video-card:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}

.rp-video-card__media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-video-card .rp-video-play {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    font-size: 28px;
}

.rp-video-card__body {
    padding: 20px;
}

.rp-video-card__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 8px 0 0;
}

/* 25.2 — TESTIMONIAL QUOTE CARD ═══════════════════════════════ */
.rp-quote-card {
    display: flex;
    flex-direction: column;
    padding: 40px;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    border: 1px solid var(--rp-border);
    position: relative;
    transition: transform 380ms, box-shadow 380ms;
}

.rp-quote-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}

.rp-quote-card__icon {
    position: absolute;
    top: 24px;
    right: 32px;
    color: var(--rp-primary);
    opacity: 0.18;
    font-size: 64px;
    line-height: 1;
}

.rp-quote-card__text {
    margin: 0 0 32px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--rp-text);
    quotes: none;
    border: 0;
    padding: 0;
    flex: 1;
}

.rp-quote-card__author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--rp-border);
}

.rp-quote-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rp-bg);
    flex-shrink: 0;
}

.rp-quote-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-quote-card__name {
    font-weight: 600;
    font-size: 15px;
}

.rp-quote-card__role {
    color: var(--rp-text-muted);
    font-size: 13px;
    margin-top: 2px;
}

.rp-quote-card__meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--rp-border);
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13px;
    color: var(--rp-text-muted);
}



/* 25.3 — LOGO STRIP (testimonials customers) ══════════════════ */
.rp-logo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rp-border);
    border-left: 1px solid var(--rp-border);
}

.rp-logo-strip__item {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--rp-border);
    border-right: 1px solid var(--rp-border);
    padding: 24px;
    transition: background 300ms;
}

.rp-logo-strip__item:hover {
    background: var(--rp-surface);
}

.rp-logo-strip__text {
    color: var(--rp-text-muted);
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    transition: color 300ms;
}

.rp-logo-strip__item:hover .rp-logo-strip__text {
    color: var(--rp-primary);
}



/* 25.4 — DOC LIST (kataloglar) ════════════════════════════════ */
.rp-doc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-doc-row {
    display: grid;
    grid-template-columns: 64px 1fr auto 48px;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--rp-border);
    background: transparent;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 300ms;
}

.rp-doc-row:last-child {
    border-bottom: 1px solid var(--rp-border);
}

.rp-doc-row:hover {
    background: var(--rp-surface);
    padding-left: 16px;
    padding-right: 16px;
}

.rp-doc-row__icon {
    width: 56px;
    height: 56px;
    background: var(--rp-surface);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--rp-primary);
}

.rp-doc-row:hover .rp-doc-row__icon {
    background: var(--rp-bg);
}

.rp-doc-row__cat {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11px;
    color: var(--rp-primary);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.rp-doc-row__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
}

.rp-doc-row__desc {
    color: var(--rp-text-muted);
    font-size: 14px;
    margin: 0;
}

.rp-doc-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
}

.rp-doc-row__action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-primary);
    font-size: 20px;
    transition: transform 300ms, background 300ms, color 300ms;
}

.rp-doc-row:hover .rp-doc-row__action {
    transform: translateY(-2px);
    background: var(--rp-primary);
    color: #fff;
}



/* 25.5 — CERT LIST (sertifikalar) ═════════════════════════════ */
.rp-cert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-cert-row {
    display: grid;
    grid-template-columns: 140px 1fr 240px 48px;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-lg);
    transition: border-color 300ms, transform 300ms;
}

.rp-cert-row:hover {
    border-color: var(--rp-primary);
    transform: translateY(-2px);
}

.rp-cert-row__code {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--rp-primary);
    padding-right: 24px;
    border-right: 1px solid var(--rp-border);
}

.rp-cert-row__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
}

.rp-cert-row__desc {
    color: var(--rp-text-muted);
    font-size: 14px;
    margin: 0;
}

.rp-cert-row__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    font-size: 13px;
}

.rp-cert-row__meta>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-cert-row__meta strong {
    font-size: 14px;
}

.rp-cert-row__action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-primary);
    font-size: 18px;
    cursor: pointer;
    transition: background 300ms, color 300ms, transform 300ms;
}

.rp-cert-row__action:hover {
    background: var(--rp-primary);
    color: #fff;
    transform: translateY(-2px);
}



/* 25.6 — COMING SOON ═════════════════════════════════════════ */
.rp-coming-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rp-primary), color-mix(in srgb, var(--rp-primary) 60%, #000));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    box-shadow: 0 16px 48px color-mix(in srgb, var(--rp-primary) 30%, transparent);
}

/* Section header start variant ═══════════════════════════════ */
.rp-section__header--start {
    text-align: left;
}

/* ════════════════════════════════════════════════════════════
   26.  ARTICLE / CASE STUDY / 404
   ════════════════════════════════════════════════════════════ */

/* 26.1 — ARTICLE HERO (post-detail) ═══════════════════════════ */
.rp-article-hero {
    padding: 96px 0 32px;
}



.rp-article-hero__eyebrow {
    margin: 24px 0 16px;
}

.rp-article-hero__title {
    font-size: clamp(34px, 5.5vw, 60px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 24px;
}

.rp-article-hero__excerpt {
    font-size: 20px;
    line-height: 1.55;
    color: var(--rp-text-muted);
    max-width: 720px;
    margin: 0 0 40px;
}



.rp-article-hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-article-hero__author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rp-article-hero__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.rp-article-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-article-hero__author>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-article-hero__author strong {
    font-size: 14px;
    font-weight: 600;
}

.rp-article-hero__author span {
    font-size: 12px;
}

.rp-article-hero__share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rp-article-hero__share a,
.rp-article-hero__share button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-text);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background 300ms, color 300ms, border-color 300ms;
}

.rp-article-hero__share a:hover,
.rp-article-hero__share button:hover {
    background: var(--rp-primary);
    color: #fff;
    border-color: var(--rp-primary);
}

.rp-share-copy.is-copied {
    background: var(--rp-primary);
    color: #fff;
    border-color: var(--rp-primary);
}

/* 26.2 — ARTICLE FEATURED IMAGE ═══════════════════════════════ */
.rp-article-hero-img {
    padding: 24px 0 0;
}

.rp-article-hero-img__el {
    width: 100%;
    aspect-ratio: 21/9;
    object-fit: cover;
    border-radius: var(--r-2xl);
    background: var(--rp-surface);
}



/* 26.3 — ARTICLE BODY (typography enhancement) ═══════════════ */
.rp-article-body {
    font-size: 17px;
    line-height: 1.75;
}

.rp-article-body p {
    margin: 0 0 24px;
}

.rp-article-body h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 56px 0 16px;
    line-height: 1.25;
}

.rp-article-body h3 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 40px 0 12px;
    line-height: 1.3;
}

.rp-article-body blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    background: var(--rp-surface);
    border-left: 3px solid var(--rp-primary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 18px;
    color: var(--rp-text);
    font-style: italic;
}

.rp-article-body img {
    width: 100%;
    border-radius: var(--r-lg);
    margin: 32px 0;
}

.rp-article-body ul,
.rp-article-body ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.rp-article-body li {
    margin-bottom: 8px;
}

.rp-article-body a {
    color: var(--rp-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 26.4 — ARTICLE BOTTOM SHARE ═══════════════════════════════ */
.rp-article-share-bottom {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--rp-border);
}

/* 26.5 — AUTHOR CARD ═════════════════════════════════════════ */
.rp-author-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 32px;
    align-items: center;
    padding: 40px;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    border: 1px solid var(--rp-border);
    margin-top: 48px;
}

.rp-author-card__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 32px;
    flex-shrink: 0;
}

.rp-author-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-author-card__name {
    font-size: 22px;
    font-weight: 600;
    margin: 8px 0 8px;
}

.rp-author-card__bio {
    color: var(--rp-text-muted);
    margin: 0 0 12px;
    line-height: 1.55;
}



/* 26.6 — CASE STUDY HERO (project-detail) ════════════════════ */
.rp-case-hero {
    padding: 96px 0 0;
}



.rp-case-hero__head {
    max-width: 880px;
    margin: 24px 0 56px;
}

.rp-case-hero__title {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 16px 0 24px;
}

.rp-case-hero__sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--rp-text-muted);
    max-width: 720px;
}

.rp-case-hero__media {
    aspect-ratio: 21/9;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-case-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 26.7 — CASE STATS STRIP ════════════════════════════════════ */
.rp-case-stats {
    padding: 56px 0;
    background: var(--rp-surface);
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-case-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
}

.rp-case-stats__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 24px;
    border-right: 1px solid var(--rp-border);
}

.rp-case-stats__item:last-child {
    border-right: 0;
}

.rp-case-stats__item strong {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}



/* 26.8 — ERROR 404 ═══════════════════════════════════════════ */
.rp-error {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 120px 0;
}

.rp-error__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rp-error__bg-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rp-primary) 12%, transparent), transparent 70%);
    animation: rp-error-float 20s ease-in-out infinite;
}

.rp-error__bg-circle--1 {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -200px;
}

.rp-error__bg-circle--2 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -150px;
    animation-delay: -10s;
}

@keyframes rp-error-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -30px) scale(1.05);
    }
}

.rp-error__inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.rp-error__num {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(120px, 20vw, 240px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--rp-primary), color-mix(in srgb, var(--rp-primary) 50%, #000));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 16px;
    opacity: 0.9;
}

.rp-error__icon {
    font-size: 40px;
    color: var(--rp-primary);
    opacity: 0.6;
    margin: -24px 0 16px;
    animation: rp-error-bounce 2.5s ease-in-out infinite;
}

@keyframes rp-error-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.rp-error__title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 16px;
}

.rp-error__sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--rp-text-muted);
    max-width: 480px;
    margin: 0 auto 40px;
}

.rp-error__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 48px;
}

.rp-error__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 4px;
    justify-content: center;
    color: var(--rp-text-muted);
    font-size: 14px;
}

.rp-error__links a {
    color: var(--rp-text-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 300ms, background 300ms;
}

.rp-error__links a:hover {
    color: var(--rp-primary);
    background: color-mix(in srgb, var(--rp-primary) 8%, transparent);
}

.rp-error__links span {
    color: var(--rp-border);
}

/* ════════════════════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON
   ════════════════════════════════════════════════════════════ */
.rp-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 88px;
    /* sticky CTA üstünde */
    z-index: 70;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rp-text);
    color: var(--rp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border: 0;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
    transition: opacity 300ms, transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rp-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.rp-scroll-top:hover {
    background: var(--rp-primary);
    transform: translateY(-2px) scale(1.04);
}


/* ════════════════════════════════════════════════════════════
   READING PROGRESS BAR (post detail)
   ════════════════════════════════════════════════════════════ */
.rp-read-progress {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.04);
    z-index: 90;
    pointer-events: none;
}

.rp-read-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rp-primary), var(--rp-primary-2));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 80ms linear;
    box-shadow: 0 0 8px var(--rp-primary);
}

:root[data-eco="1"] .rp-read-progress__fill {
    transition: none;
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════
   FINAL CTA — gradient + sosyal proof + trust badges
   ════════════════════════════════════════════════════════════ */
.rp-final-cta {
    position: relative;
    overflow: hidden;
}

.rp-final-cta__inner {
    position: relative;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 80px);
    background: linear-gradient(135deg, var(--rp-text) 0%, color-mix(in srgb, var(--rp-text) 90%, var(--rp-primary)) 100%);
    color: var(--rp-bg);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

.rp-final-cta__inner::before {
    content: '';
    position: absolute;
    inset: -50% -10% auto -10%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--rp-primary) 24%, transparent), transparent 60%);
    pointer-events: none;
}

.rp-final-cta__inner>* {
    position: relative;
    z-index: 1;
}

.rp-final-cta__eyebrow {
    color: color-mix(in srgb, var(--rp-primary) 80%, var(--rp-bg));
    margin: 0 0 24px;
}

.rp-final-cta__heading {
    font-size: clamp(2rem, 4vw + 1rem, 4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--rp-bg);
}

.rp-final-cta__heading span {
    color: var(--rp-primary);
}

.rp-final-cta__sub {
    font-size: 17px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--rp-bg) 80%, transparent);
    max-width: 600px;
    margin: 0 auto 40px;
}

.rp-final-cta__sub strong {
    color: var(--rp-bg);
    background: color-mix(in srgb, var(--rp-primary) 30%, transparent);
    padding: 1px 8px;
    border-radius: 4px;
}

.rp-final-cta__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 560px;
    margin: 0 auto 48px;
    padding: 24px 0;
    border-top: 1px solid color-mix(in srgb, var(--rp-bg) 16%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--rp-bg) 16%, transparent);
}

.rp-final-cta__stats>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-final-cta__stats strong {
    font-family: var(--rp-font-display);
    font-size: 32px;
    color: var(--rp-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.rp-final-cta__stats span {
    font-family: var(--rp-font-body);
    font-size: 13px;
    color: color-mix(in srgb, var(--rp-bg) 65%, transparent);
    font-weight: 400;
}

.rp-final-cta__buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.rp-final-cta__buttons .rp-btn--secondary {
    background: transparent;
    color: var(--rp-bg);
    border-color: color-mix(in srgb, var(--rp-bg) 30%, transparent);
}

.rp-final-cta__buttons .rp-btn--secondary:hover {
    background: var(--rp-bg);
    color: var(--rp-text);
    border-color: var(--rp-bg);
}

.rp-final-cta__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px dashed color-mix(in srgb, var(--rp-bg) 14%, transparent);
}

.rp-final-cta__badges>span:first-child {
    font-family: var(--rp-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rp-bg) 50%, transparent);
}

.rp-final-cta__badges>div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: color-mix(in srgb, var(--rp-bg) 80%, transparent);
    font-family: var(--rp-font-body);
    font-size: 13px;
    font-weight: 500;
}

.rp-final-cta__badges>div span:nth-child(even) {
    color: color-mix(in srgb, var(--rp-bg) 30%, transparent);
}



/* ════════════════════════════════════════════════════════════
   27.  LISTING PAGES — featured + filter + cards
   ════════════════════════════════════════════════════════════ */

/* 27.1 — FEATURED CASE / ARTICLE ═══════════════════════════════ */
.rp-featured-case {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    padding: 48px;
    border: 1px solid var(--rp-border);
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 380ms;
}

.rp-featured-case:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
}

.rp-featured-case__media {
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--rp-bg);
}

.rp-featured-case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms;
}

.rp-featured-case:hover .rp-featured-case__media img {
    transform: scale(1.04);
}

.rp-featured-case__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-featured-case__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-featured-case__meta>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-featured-case__meta strong {
    font-size: 16px;
    font-weight: 600;
}

.rp-featured-case__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--rp-primary);
    font-weight: 500;
    transition: gap 300ms;
}

.rp-featured-case:hover .rp-featured-case__cta {
    gap: 14px;
}



/* 27.2 — FILTER BAR + CHIPS ═══════════════════════════════════ */
.rp-filter-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rp-border);
}

.rp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--rp-border);
    color: var(--rp-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 300ms, color 300ms, border-color 300ms;
}

.rp-chip:hover {
    background: var(--rp-surface);
    color: var(--rp-text);
}

.rp-chip.is-active {
    background: var(--rp-text);
    color: var(--rp-bg);
    border-color: var(--rp-text);
}

/* 27.3 — CASE CARD (project-list grid) ═══════════════════════════ */
.rp-case-card {
    display: flex;
    flex-direction: column;
    background: var(--rp-bg);
    border-radius: var(--r-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--rp-border);
    transition: transform 380ms, box-shadow 380ms, border-color 380ms;
}

.rp-case-card:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

.rp-case-card__media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-case-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms;
}

.rp-case-card:hover .rp-case-card__media img {
    transform: scale(1.04);
}

.rp-case-card__cap {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--rp-primary);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

.rp-case-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rp-case-card__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 4px 0 8px;
}

.rp-case-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rp-text-muted);
    margin-top: auto;
}

.rp-case-card__location i {
    font-size: 16px;
    color: var(--rp-primary);
}

/* ════════════════════════════════════════════════════════════
   28.  SEARCH + CONTACT
   ════════════════════════════════════════════════════════════ */

/* 28.1 — SEARCH FORM HERO ════════════════════════════════════ */
.rp-search-form {
    margin-top: 40px;
    max-width: 720px;
}

.rp-search-form__field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 20px;
    background: var(--rp-bg);
    border: 2px solid var(--rp-border);
    border-radius: 999px;
    transition: border-color 300ms, box-shadow 300ms;
}

.rp-search-form__field:focus-within {
    border-color: var(--rp-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rp-primary) 12%, transparent);
}

.rp-search-form__field>i {
    color: var(--rp-text-muted);
    font-size: 22px;
    flex-shrink: 0;
}

.rp-search-form__field input[type="search"] {
    flex: 1;
    height: 48px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 17px;
    color: var(--rp-text);
}

.rp-search-form__field input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.rp-search-form__field input[type="search"]::placeholder {
    color: var(--rp-text-muted);
}

.rp-search-form__field button {
    height: 48px;
    padding: 0 24px;
    background: var(--rp-text);
    color: var(--rp-bg);
    border: 0;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 300ms;
}

.rp-search-form__field button:hover {
    background: var(--rp-primary);
    color: #fff;
}

/* 28.2 — SEARCH RESULT ROWS ══════════════════════════════════ */
.rp-search-results {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-search-row {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    gap: 24px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid var(--rp-border);
    text-decoration: none;
    color: inherit;
    transition: background 300ms, padding-left 300ms;
}

.rp-search-row:last-child {
    border-bottom: 1px solid var(--rp-border);
}

.rp-search-row:hover {
    background: var(--rp-surface);
    padding-left: 16px;
    padding-right: 16px;
}

.rp-search-row__icon {
    width: 48px;
    height: 48px;
    background: var(--rp-surface);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-primary);
    font-size: 22px;
    flex-shrink: 0;
}

.rp-search-row:hover .rp-search-row__icon {
    background: var(--rp-bg);
}

.rp-search-row__title {
    font-size: 18px;
    font-weight: 600;
    margin: 6px 0 6px;
}

.rp-search-row__excerpt {
    color: var(--rp-text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.rp-search-row__arrow {
    color: var(--rp-text-muted);
    font-size: 20px;
    transition: transform 300ms, color 300ms;
}

.rp-search-row:hover .rp-search-row__arrow {
    transform: translate(4px, -4px);
    color: var(--rp-primary);
}

/* 28.3 — SEARCH EMPTY STATE ══════════════════════════════════ */
.rp-search-empty {
    text-align: center;
    padding: 60px 0;
}

.rp-search-empty__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--rp-surface);
    color: var(--rp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

/* 28.4 — DEPARTMENT CARD ══════════════════════════════════════ */
.rp-dept-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--rp-surface);
    border-radius: var(--r-2xl);
    border: 1px solid var(--rp-border);
    text-decoration: none;
    color: inherit;
    transition: transform 380ms, border-color 380ms, box-shadow 380ms;
}

.rp-dept-card:hover {
    transform: translateY(-4px);
    border-color: var(--rp-primary);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

.rp-dept-card__icon {
    width: 48px;
    height: 48px;
    background: var(--rp-bg);
    color: var(--rp-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.rp-dept-card__title {
    font-size: 18px;
    font-weight: 600;
    margin: 6px 0 10px;
}

.rp-dept-card__desc {
    color: var(--rp-text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    flex: 1;
}

.rp-dept-card__email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rp-primary);
    font-size: 13px;
    font-weight: 500;
    word-break: break-all;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
}

/* 28.5 — OFFICE CARD ═════════════════════════════════════════ */
.rp-office-card {
    padding: 32px;
    background: var(--rp-bg);
    border-radius: var(--r-2xl);
    border: 1px solid var(--rp-border);
    transition: transform 380ms, border-color 380ms;
}

.rp-office-card:hover {
    border-color: var(--rp-primary);
    transform: translateY(-2px);
}

.rp-office-card__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rp-primary);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.rp-office-card__city {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
}

.rp-office-card__addr {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--rp-text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}

.rp-office-card__addr i {
    color: var(--rp-primary);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.rp-office-card__contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--rp-border);
}

.rp-office-card__contacts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-text);
    text-decoration: none;
    font-size: 14px;
    transition: color 300ms;
}

.rp-office-card__contacts a:hover {
    color: var(--rp-primary);
}

.rp-office-card__contacts a i {
    color: var(--rp-text-muted);
    font-size: 16px;
}

/* 28.6 — CONTACT META (left side of form) ════════════════════ */
.rp-contact-meta {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    border-top: 1px solid var(--rp-border);
}

.rp-contact-meta__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rp-border);
}

.rp-contact-meta__item a {
    color: var(--rp-text);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: color 300ms;
}

.rp-contact-meta__item a:hover {
    color: var(--rp-primary);
}

.rp-contact-meta__item strong {
    font-size: 18px;
    font-weight: 500;
}

/* İletişim sayfası sosyal ikonları — footer ile aynı dairesel buton stili */
.rp-contact-social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.rp-contact-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-text);
    font-size: 18px;
    text-decoration: none;
    transition: background 200ms, color 200ms, border-color 200ms;
}

.rp-contact-social a:hover {
    background: var(--rp-primary);
    color: #fff;
    border-color: var(--rp-primary);
}

:root[data-eco="1"] .rp-hero-slider__nav {
    display: none;
}

/* ════════════════════════════════════════════════════════════
   ACCENT BRAND COLOR (#6A64A9) — secondary brand vurgu
   ════════════════════════════════════════════════════════════ */

::selection {
    background: var(--rp-accent);
    color: #fff;
}

::-moz-selection {
    background: var(--rp-accent);
    color: #fff;
}

/* Form input focus ring — accent */
.rp-input:focus,
.rp-textarea:focus,
.rp-select:focus,
.rp-search-form__field:focus-within {
    border-color: var(--rp-accent) !important;
    box-shadow: 0 0 0 3px var(--rp-accent-soft) !important;
    outline: none;
}

.rp-footer__newsletter:focus-within {
    border-color: var(--rp-accent);
    box-shadow: 0 0 0 3px var(--rp-accent-soft);
}

/* Section header eyebrow — accent line */
.rp-section__header .rp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rp-section__header .rp-eyebrow::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--rp-accent);
}

.rp-page-hero__eyebrow.rp-eyebrow {
    color: var(--rp-accent);
}

/* Mega menu hover */
.rp-nav .rp-mega__link:hover {
    color: var(--rp-accent);
    background: var(--rp-accent-soft);
}

/* Footer column title */
.rp-footer__col-title.rp-footer__col-title {
    color: var(--rp-accent);
}

/* Author + quote card */
.rp-author-card {
    border-left: 3px solid var(--rp-accent);
}

.rp-author-card__name {
    color: var(--rp-accent);
}

.rp-quote-card .rp-quote-card__icon {
    color: var(--rp-accent);
    opacity: 0.25;
}

/* Filter chip active */
.rp-chip.is-active {
    background: var(--rp-accent);
    color: #fff;
    border-color: var(--rp-accent);
}

/* Reading progress gradient */
body .rp-read-progress__fill {
    background: linear-gradient(90deg, var(--rp-primary), var(--rp-accent));
    box-shadow: 0 0 8px var(--rp-accent);
}

/* Spec pill */
.rp-spec-pill.rp-spec-pill {
    border-color: var(--rp-accent-line);
    color: var(--rp-accent);
}

/* Skip-link */
a.rp-skip-link {
    background: var(--rp-accent);
}

/* ECO pill default state */
:root[data-eco="0"] .rp-eco-pill:not(.is-active) .rp-eco-pill__dot {
    background: var(--rp-accent);
}

/* Sustainability eyebrow */
.rp-sustain .rp-eyebrow.rp-eyebrow {
    color: var(--rp-accent-2);
}

/* Cert-row + doc-row */
.rp-cert-row .rp-cert-row__code {
    color: var(--rp-accent);
    border-right-color: var(--rp-accent-line);
}

.rp-doc-row .rp-doc-row__cat {
    color: var(--rp-accent);
}

/* FAQ accordion */
.rp-faq-item__q:hover {
    color: var(--rp-accent);
}

.rp-faq-item[open] .rp-faq-item__q {
    color: var(--rp-accent);
}

/* Breadcrumb */
.rp-breadcrumb>span:last-child {
    color: var(--rp-accent);
}

/* Search row hover */
.rp-search-row:hover .rp-search-row__icon {
    background: var(--rp-accent-soft);
    color: var(--rp-accent);
}

/* Trust strip hover bar */
.rp-trust__item {
    position: relative;
}

.rp-trust__item::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--rp-accent);
    transition: width 300ms;
    border-radius: 2px;
}

.rp-trust__item:hover::before {
    width: 32px;
}

/* Hero secondary link — pill style above (kept) */

/* Tech row hover arrow */
.rp-tech-row:hover .rp-tech-row__arrow {
    color: var(--rp-accent);
}

/* Final CTA stats border */
.rp-final-cta .rp-final-cta__stats {
    border-top-color: var(--rp-accent-line);
    border-bottom-color: var(--rp-accent-line);
}

/* ════════════════════════════════════════════════════════════
   KATALOGLAR PAGE — featured + stats + grid cards
   ════════════════════════════════════════════════════════════ */

/* Stats strip — under hero */
.rp-cat-stats {
    padding: 40px 0;
    background: var(--rp-surface);
    border-bottom: 1px solid var(--rp-border);
}

.rp-cat-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.rp-cat-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 0 16px;
    border-right: 1px solid var(--rp-border);
}

.rp-cat-stats__item:last-child {
    border-right: 0;
}

.rp-cat-stats__item strong {
    font-size: 28px;
    font-weight: 600;
    color: var(--rp-text);
    letter-spacing: -0.02em;
}

.rp-cat-stats__item span {
    font-size: 12px;
    color: var(--rp-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* Featured catalog card */
.rp-cat-featured {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-2xl);
    padding: 32px;
    cursor: pointer;
    transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.rp-cat-featured:hover {
    border-color: var(--rp-primary);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}

.rp-cat-featured__cover {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-cat-featured__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
}

.rp-cat-featured:hover .rp-cat-featured__cover img {
    transform: scale(1.04);
}

.rp-cat-featured__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--rp-accent);
    color: #fff;
    font-family: var(--rp-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 12px;
    border-radius: 999px;
}

.rp-cat-featured__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.rp-cat-featured__body .rp-display-md {
    margin: 0;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
    line-height: 1.15;
}

.rp-cat-featured__body .rp-lead {
    color: var(--rp-text-muted);
    margin: 0;
}

.rp-cat-featured__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-cat-featured__meta>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-cat-featured__meta strong {
    font-size: 16px;
    font-weight: 600;
}

.rp-cat-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--rp-text);
    color: var(--rp-bg);
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    align-self: flex-start;
    transition: background var(--dur);
}

.rp-cat-featured:hover .rp-cat-featured__cta {
    background: var(--rp-primary);
    color: #fff;
}



/* Catalog grid card */
.rp-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
    height: 100%;
}

.rp-cat-card:hover {
    border-color: var(--rp-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

.rp-cat-card__cover {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--rp-surface);
}

.rp-cat-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-out);
}

.rp-cat-card:hover .rp-cat-card__cover img {
    transform: scale(1.05);
}

.rp-cat-card__pdf-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    color: #d32f2f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    backdrop-filter: blur(8px);
}

.rp-cat-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    flex: 1;
}

.rp-cat-card__cat {
    display: inline-block;
    font-family: var(--rp-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--rp-accent);
    margin-bottom: 4px;
}

.rp-cat-card__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rp-text);
    margin: 0;
}

.rp-cat-card__desc {
    color: var(--rp-text-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.rp-cat-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed var(--rp-border);
    font-size: 12px;
    color: var(--rp-text-muted);
}

.rp-cat-card__meta i {
    font-size: 14px;
    vertical-align: middle;
}

.rp-cat-card__meta span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rp-cat-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--rp-surface);
    color: var(--rp-text);
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    margin-top: 4px;
    transition: background var(--dur), color var(--dur);
}

.rp-cat-card:hover .rp-cat-card__action {
    background: var(--rp-primary);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   FOOTER ÜZERİ CTA TAMAMEN KALDIRILDI (kullanıcı isteği)
   .rp-cta-band içeren tüm section'lar gizlenir
   ════════════════════════════════════════════════════════════ */
.rp-cta-band,
section:has(> .rp-container > .rp-cta-band),
section.rp-section:has(.rp-cta-band) {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   UYGULAMALAR — Sector navigator + Alternating detail rows + Matrix
   ════════════════════════════════════════════════════════════ */

/* — Sector Navigator (sticky-like horizontal scroller) — */
.rp-app-nav {
    background: var(--rp-bg);
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
    position: sticky;
    top: var(--header-h, 80px);
    z-index: 30;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.82);
}

.rp-app-nav__inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px 0;
    -webkit-overflow-scrolling: touch;
}

.rp-app-nav__inner::-webkit-scrollbar {
    display: none;
}

.rp-app-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--rp-text-2, #4d4d4d);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .25s, color .25s;
    flex-shrink: 0;
    text-decoration: none;
}

.rp-app-nav__item i {
    font-size: 17px;
    color: var(--rp-primary, #6A64A9);
}

.rp-app-nav__item:hover {
    background: rgba(106, 100, 169, 0.08);
    color: var(--rp-text);
}

/* — Alternating Detail Row — */
.rp-app-detail {
    padding: 96px 0;
}

.rp-app-detail__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.rp-app-detail__row--reverse {
    direction: rtl;
}

.rp-app-detail__row--reverse>* {
    direction: ltr;
}

/* Media (image with floating icon) */
.rp-app-detail__media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 24px 64px -24px rgba(20, 20, 40, 0.18);
    background: var(--rp-surface);
}

.rp-app-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.rp-app-detail:hover .rp-app-detail__media img {
    transform: scale(1.04);
}

.rp-app-detail__icon-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-primary, #6A64A9);
    font-size: 28px;
    box-shadow: 0 8px 24px -6px rgba(20, 20, 40, 0.2);
}

/* Body */
.rp-app-detail__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-app-detail__body .rp-display-md {
    margin: 8px 0 0;
    line-height: 1.1;
}

/* Bullets */
.rp-app-detail__bullets {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 12px;
}

.rp-app-detail__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--rp-text);
    font-size: 15px;
    line-height: 1.5;
}

.rp-app-detail__bullets li i {
    color: var(--rp-primary, #6A64A9);
    font-size: 19px;
    line-height: 1.3;
    flex-shrink: 0;
}

/* KPI strip */
.rp-app-detail__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 32px 0 0;
    padding: 24px 0;
    border-top: 1px solid var(--rp-border);
    border-bottom: 1px solid var(--rp-border);
}

.rp-app-detail__kpis>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
    border-right: 1px solid var(--rp-border);
}

.rp-app-detail__kpis>div:first-child {
    padding-left: 0;
}

.rp-app-detail__kpis>div:last-child {
    border-right: 0;
    padding-right: 0;
}

.rp-app-detail__kpis strong {
    font-size: 22px;
    font-weight: 600;
    color: var(--rp-text);
    line-height: 1.1;
}

.rp-app-detail__kpis span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rp-text-3, #6e6e73);
}

/* Use case quote */
.rp-app-detail__use-case {
    margin: 28px 0 0;
    padding: 20px 22px;
    background: var(--rp-surface, #f5f5f7);
    border-radius: 14px;
    border-left: 3px solid var(--rp-primary, #6A64A9);
}

.rp-app-detail__use-case .rp-eyebrow {
    color: var(--rp-primary, #6A64A9);
    margin-bottom: 6px;
}

.rp-app-detail__use-case p {
    margin: 0;
    color: var(--rp-text-2, #4d4d4d);
    font-size: 14px;
    line-height: 1.55;
}

/* CTA */
.rp-app-detail__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0 0;
}

/* — Matrix table — */
.rp-app-matrix {
    margin-top: 32px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--rp-bg);
    box-shadow: 0 12px 48px -16px rgba(20, 20, 40, 0.12);
    border: 1px solid var(--rp-border);
}

.rp-app-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rp-app-matrix th,
.rp-app-matrix td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--rp-border);
}

.rp-app-matrix th {
    background: var(--rp-surface);
    color: var(--rp-text-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.rp-app-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.rp-app-matrix tbody tr {
    transition: background .2s;
}

.rp-app-matrix tbody tr:hover {
    background: rgba(106, 100, 169, 0.04);
}

.rp-app-matrix td strong:first-child {
    color: var(--rp-text);
}

/* — Responsive — */



/* ════════════════════════════════════════════════════════════
   ÜRÜNLER — Model adı + sertifika chip'leri
   ════════════════════════════════════════════════════════════ */
.rp-product-row__models {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--rp-surface, #f5f5f7);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rp-product-row__models .rp-eyebrow {
    color: var(--rp-text-3, #6e6e73);
}

.rp-product-row__models strong {
    color: var(--rp-text);
    font-size: 13px;
    line-height: 1.3;
}

.rp-product-row__certs {
    margin-top: 24px;
}

.rp-product-row__cert-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.rp-cert-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(106, 100, 169, 0.08);
    color: var(--rp-primary, #6A64A9);
    font-family: var(--rp-font-mono, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    border: 1px solid rgba(106, 100, 169, 0.16);
}

.rp-cert-chip:hover {
    background: rgba(106, 100, 169, 0.14);
}

/* 3D scroll intro/panel altına detay CTA butonu */
.rp-bx3d__intro-cta,
.rp-bx3d__panel-cta {
    margin-top: 20px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rp-bx3d__panel-cta {
    margin-top: 24px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}

.rp-bx3d__panel.is-active .rp-bx3d__panel-cta {
    opacity: 1;
    transform: translateY(0);
}

/* ── Generic callout / compliance card ─────────────────────── */
.rp-callout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    background: var(--rp-surface-2, #F6F7F9);
    border: 1px solid var(--rp-border, rgba(15, 23, 42, 0.08));
    border-radius: 14px;
}

.rp-callout--primary {
    background: rgba(0, 168, 120, 0.06);
    border-color: rgba(0, 168, 120, 0.24);
}

.rp-callout__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-primary);
    color: #fff;
    font-size: 22px;
}

.rp-callout__body {
    flex: 1 1 auto;
    min-width: 0;
}

.rp-callout__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rp-callout__text {
    margin: 0 0 10px;
    color: var(--rp-text-muted, #475569);
    font-size: 14.5px;
    line-height: 1.65;
}

.rp-callout__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rp-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.rp-callout__link:hover {
    text-decoration: underline;
}


/* ═══════════ SOURCE: themes/reap/assets/css/_source/sketch.css ═══════════ */
/* ════════════════════════════════════════════════════════════
   REAP — SKETCH ECO DESIGN LANGUAGE (eco-mode only)
   ─────────────────────────────────────────────────────────────
   Premium hand-drawn / line-art / technical sketch design
   system. Only applied when ECO mode is active
   (:root[data-eco="1"]). When ECO is off, the original
   Apple-style design is fully preserved.
   ════════════════════════════════════════════════════════════ */

/* ─── 1. TOKEN OVERRIDES (eco only) ────────────────────────── */
:root[data-eco="1"] {
    /* Sketch green palette — refined, less saturated than original */
    --sk-green: #00b294;
    --sk-green-dark: #008f76;
    --sk-green-soft: #E8F3EE;
    --sk-green-line: rgba(0, 178, 148, 0.4);
    --sk-green-line-2: rgba(0, 178, 148, 0.18);

    --sk-paper: #FAF8F2;
    --sk-paper-2: #F4F0E6;
    --sk-paper-3: #ECE6D6;
    --sk-ink: #1A2A22;
    --sk-ink-soft: #4A5953;
    --sk-ink-dim: #7A8580;

    --sk-stroke: 1.5px;
    --sk-stroke-bold: 2px;
    --sk-radius-soft: 18px 22px 16px 24px / 20px 16px 24px 18px;
    --sk-dash: 6 4;

    --sk-font-hand: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sk-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --rp-primary: var(--sk-green);
    --rp-primary-2: var(--sk-green-dark);
    --rp-primary-dark: var(--sk-green-dark);
    --rp-bg: #FFFFFF;
    --rp-surface: var(--sk-paper);
    --rp-surface-2: var(--sk-paper-2);
    --rp-text: var(--sk-ink);
    --rp-text-muted: var(--sk-ink-soft);
    --rp-text-dim: var(--sk-ink-dim);
    --rp-border: var(--sk-green-line-2);
    --rp-border-strong: var(--sk-green-line);
    --rp-shadow-card: 0 0 0 0 transparent;
    --rp-shadow-pop: 0 0 0 0 transparent;
}

/* ─── 2. CLEAN BACKGROUND (eco only) ───────────────────────── */
:root[data-eco="1"] body {
    background-color: #FFFFFF;
    color: var(--sk-ink);
    font-feature-settings: "ss01", "cv11";
}

:root[data-eco="1"] .rp-section--alt {
    background-color: var(--sk-paper) !important;
}

/* ─── 3. TYPOGRAPHY — sketch character (eco only) ──────────── */
:root[data-eco="1"] .rp-eyebrow {
    font-family: var(--rp-font-mono);
    font-weight: 600;
    color: var(--sk-green);
    letter-spacing: 0.18em;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

:root[data-eco="1"] .rp-eyebrow::before {
    content: "";
    width: 28px;
    height: 1.5px;
    background: var(--sk-green);
    transform: skewX(-18deg);
    flex-shrink: 0;
}

:root[data-eco="1"] .rp-display-xl,
:root[data-eco="1"] .rp-display-lg,
:root[data-eco="1"] .rp-display-md,
:root[data-eco="1"] .rp-hero-slider__heading,
:root[data-eco="1"] .rp-page-hero__heading,
:root[data-eco="1"] .rp-section__header h2,
:root[data-eco="1"] .rp-cta-band__heading {
    font-family: var(--sk-font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--sk-ink);
}

:root[data-eco="1"] .rp-text-primary,
:root[data-eco="1"] .rp-display-xl .rp-text-primary,
:root[data-eco="1"] .rp-display-md .rp-text-primary,
:root[data-eco="1"] .rp-hero-slider__heading .rp-text-primary,
:root[data-eco="1"] .rp-page-hero__heading .rp-text-primary {
    color: var(--sk-green);
    font-family: var(--sk-font-hand);
    font-weight: 700;
    letter-spacing: 0.005em;
    font-size: 1.15em;
    line-height: 0.92;
    position: relative;
    display: inline-block;
    padding-bottom: 0.05em;
}

:root[data-eco="1"] .rp-text-primary::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -0.05em;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 Q 30 2, 60 6 T 120 6 T 198 8' fill='none' stroke='%231F8A6B' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
    pointer-events: none;
    opacity: 0.85;
}

:root[data-eco="1"] .rp-lead {
    font-family: var(--rp-font-body);
    color: var(--sk-ink-soft);
    line-height: 1.65;
}

:root[data-eco="1"] .rp-section__header h2 {
    font-weight: 700;
}

/* ─── 4. SKETCH CARDS (eco only) ───────────────────────────── */
:root[data-eco="1"] .rp-card,
:root[data-eco="1"] .rp-product-card,
:root[data-eco="1"] .rp-tech-pillar,
:root[data-eco="1"] .rp-app-card,
:root[data-eco="1"] .rp-case,
:root[data-eco="1"] .rp-news,
:root[data-eco="1"] .rp-office-card,
:root[data-eco="1"] .rp-dept-card,
:root[data-eco="1"] .rp-possibility-card,
:root[data-eco="1"] .rp-radio-card,
:root[data-eco="1"] .rp-feature-card,
:root[data-eco="1"] .rp-step,
:root[data-eco="1"] .rp-cta-band {
    background-color: #FFFFFF !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='14' ry='14' stroke='%231F8A6B' stroke-width='1.6' stroke-dasharray='9 5' opacity='0.7'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 6px 6px 0 rgba(0, 178, 148, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: transform 280ms var(--ease-out, ease-out), box-shadow 280ms;
}

:root[data-eco="1"] .rp-card:hover,
:root[data-eco="1"] .rp-product-card:hover,
:root[data-eco="1"] .rp-tech-pillar:hover,
:root[data-eco="1"] .rp-app-card:hover,
:root[data-eco="1"] .rp-case:hover,
:root[data-eco="1"] .rp-news:hover,
:root[data-eco="1"] .rp-possibility-card:hover {
    transform: translate(-2px, -3px) !important;
    box-shadow: 9px 10px 0 rgba(0, 178, 148, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Section divider line */
:root[data-eco="1"] .rp-section+.rp-section {
    position: relative;
}

:root[data-eco="1"] .rp-section+.rp-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64%;
    max-width: 720px;
    height: 6px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'><path d='M2 3 Q 80 1, 160 4 Q 240 6, 320 3 T 480 4 T 598 3' fill='none' stroke='%231F8A6B' stroke-width='1.2' stroke-linecap='round' opacity='0.45'/></svg>") no-repeat center / 100% 100%;
}

/* ─── 5. BUTTONS (eco only) ────────────────────────────────── */
:root[data-eco="1"] .rp-btn,
:root[data-eco="1"] .rp-btn--primary,
:root[data-eco="1"] .rp-btn--secondary,
:root[data-eco="1"] .rp-btn--ghost,
:root[data-eco="1"] button.rp-btn {
    position: relative;
    background: transparent !important;
    color: var(--sk-ink) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 26px !important;
    box-shadow: none !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='999' ry='999' stroke='%231F8A6B' stroke-width='1.8' stroke-linecap='round'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    transition: transform 200ms ease, color 200ms;
    font-weight: 600;
}

:root[data-eco="1"] .rp-btn--primary {
    background-color: var(--sk-green) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='3' y='3' width='calc(100%25 - 6)' height='calc(100%25 - 6)' rx='999' ry='999' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-dasharray='3 3' opacity='0.55'/></svg>") !important;
    color: #FFFFFF !important;
    box-shadow: 4px 4px 0 var(--sk-green-dark) !important;
}

:root[data-eco="1"] .rp-btn:hover {
    transform: translate(-1px, -2px) rotate(-0.4deg);
}

:root[data-eco="1"] .rp-btn--primary:hover {
    transform: translate(-2px, -3px) rotate(-0.4deg);
    background-color: var(--sk-green-dark) !important;
    box-shadow: 6px 6px 0 var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-btn--ghost {
    color: var(--sk-green) !important;
}

/* ─── 6. HEADER (eco only) ─────────────────────────────────── */
:root[data-eco="1"] .rp-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: none !important;
    box-shadow: none !important;
}

:root[data-eco="1"] .rp-header::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 4px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 4' preserveAspectRatio='none'><path d='M2 2 Q 200 0, 400 2 T 800 2 T 1198 2' fill='none' stroke='%231F8A6B' stroke-width='1' stroke-linecap='round' opacity='0.35'/></svg>") no-repeat center / 100% 100%;
    pointer-events: none;
}

:root[data-eco="1"] .rp-header__logo img,
:root[data-eco="1"] .rp-footer__logo img {
    filter: none !important;
}

:root[data-eco="1"] .rp-nav__link,
:root[data-eco="1"] .rp-header__nav-link,
:root[data-eco="1"] .rp-header a {
    position: relative;
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-nav__link:hover,
:root[data-eco="1"] .rp-header a:hover {
    color: var(--sk-green) !important;
}

:root[data-eco="1"] .rp-nav__link.is-active,
:root[data-eco="1"] .rp-nav__link[aria-current="page"] {
    color: var(--sk-green) !important;
}

:root[data-eco="1"] .rp-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 6px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M2 3 Q 25 1, 50 3 T 98 3' fill='none' stroke='%231F8A6B' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

:root[data-eco="1"] .rp-mega,
:root[data-eco="1"] .rp-mega__panel {
    background: var(--sk-paper) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='3' y='3' width='calc(100%25 - 6)' height='calc(100%25 - 6)' rx='14' ry='14' stroke='%231F8A6B' stroke-width='1.4' stroke-dasharray='6 4' opacity='0.5'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
    box-shadow: 8px 8px 0 rgba(0, 178, 148, 0.06) !important;
}

:root[data-eco="1"] .rp-mega__link {
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-mega__link:hover {
    color: var(--sk-green) !important;
}

/* ─── ECO MODE — Anasayfa minimalist görünüm ───────────────
   Kullanıcı talebi: APPLICATIONS, ACTIVE PROJECTS, QUALITY POLICY,
   MEDIA AND PR section'ları ECO modda gizlenir. */
:root[data-eco="1"] [data-vb-section="possibilities"],
:root[data-eco="1"] [data-vb-section="case_studies"],
:root[data-eco="1"] [data-vb-section="quality_policy"],
:root[data-eco="1"] [data-vb-section="news"] {
    display: none !important;
}

/* ─── 7. HERO SECTION (eco only) ───────────────────────────── */
:root[data-eco="1"] .rp-hero-slider {
    background: #FFFFFF;
}

:root[data-eco="1"] .rp-hero-slider__bg {
    background: #FFFFFF;
}

:root[data-eco="1"] .rp-hero-slider__bg img {
    filter: none;
    mix-blend-mode: normal;
    object-fit: contain !important;
    object-position: center !important;
    padding: 2vh 3vw;
    background: #FFFFFF;
}

:root[data-eco="1"] .rp-hero-slider__overlay {
    background: transparent !important;
}

/* ECO modda hero text gizlensin — sketch görsel zaten "BESS DOĞRUSU" mesajını içeriyor */
:root[data-eco="1"] .rp-hero-slider__content {
    display: none !important;
}

:root[data-eco="1"] .rp-hero-slider__heading,
:root[data-eco="1"] .rp-hero-slider__sub,
:root[data-eco="1"] .rp-hero-slider__eyebrow {
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-hero-slider__eyebrow {
    color: var(--sk-green) !important;
}

:root[data-eco="1"] .rp-page-hero {
    background: #FFFFFF !important;
    color: var(--sk-ink) !important;
    border-bottom: none !important;
}

:root[data-eco="1"] .rp-page-hero::before {
    display: none !important;
}

:root[data-eco="1"] .rp-page-hero__heading {
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-page-hero__sub {
    color: var(--sk-ink-soft) !important;
}

:root[data-eco="1"] .rp-breadcrumb,
:root[data-eco="1"] .rp-breadcrumb a {
    color: var(--sk-ink-soft) !important;
}

:root[data-eco="1"] .rp-breadcrumb a:hover {
    color: var(--sk-green) !important;
}

/* ─── 8. SECTIONS (eco only) ───────────────────────────────── */
:root[data-eco="1"] .rp-section,
:root[data-eco="1"] .rp-section--alt {
    border: none !important;
}

:root[data-eco="1"] .rp-trust {
    background: transparent !important;
}

:root[data-eco="1"] .rp-trust__item {
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-trust__item::after {
    background: var(--sk-green-line) !important;
}

:root[data-eco="1"] .rp-trust__value {
    font-family: var(--sk-font-display) !important;
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-trust__label {
    color: var(--sk-ink-soft) !important;
}

/* ─── 9. ICONS (eco only) ──────────────────────────────────── */
:root[data-eco="1"] .rp-card__icon,
:root[data-eco="1"] .rp-tech-pillar__icon,
:root[data-eco="1"] .rp-app-card__icon {
    background: transparent !important;
    color: var(--sk-green) !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><circle cx='50%25' cy='50%25' r='46%25' stroke='%231F8A6B' stroke-width='1.5' stroke-dasharray='3 4' opacity='0.7'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
}

/* ─── 10. CASE / NEWS / PRODUCT MEDIA (eco only) ───────────── */
:root[data-eco="1"] .rp-case__media img,
:root[data-eco="1"] .rp-news__media img,
:root[data-eco="1"] .rp-product-card__media img,
:root[data-eco="1"] .rp-possibility-card__media img {
    filter: none !important;
    mix-blend-mode: normal !important;
}

:root[data-eco="1"] .rp-case__media,
:root[data-eco="1"] .rp-news__media,
:root[data-eco="1"] .rp-product-card__media {
    border-radius: 14px !important;
    overflow: hidden;
}

:root[data-eco="1"] .rp-case__overlay {
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(20, 98, 76, 0.0) 40%,
            rgba(20, 98, 76, 0.65) 100%) !important;
}

:root[data-eco="1"] .rp-case__capacity-large {
    font-family: var(--sk-font-hand);
    color: #ffffff;
    text-shadow: none;
    font-weight: 700;
}

/* ─── 11. FORMS (eco only) ─────────────────────────────────── */
:root[data-eco="1"] .rp-input,
:root[data-eco="1"] .rp-textarea,
:root[data-eco="1"] .rp-select {
    background: transparent !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='10' ry='10' stroke='%231F8A6B' stroke-width='1.4' stroke-dasharray='5 4' opacity='0.55'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 12px !important;
    color: var(--sk-ink) !important;
}

/* ─── 12. FOOTER (eco only) ────────────────────────────────── */
:root[data-eco="1"] .rp-footer {
    background: #FFFFFF !important;
    border-top: none !important;
    color: var(--sk-ink) !important;
    position: relative;
}

:root[data-eco="1"] .rp-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 8px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'><path d='M2 4 Q 100 1, 200 5 Q 300 8, 400 3 T 600 4 T 800 5 T 1000 3 T 1198 4' fill='none' stroke='%231F8A6B' stroke-width='1.2' stroke-linecap='round' opacity='0.4'/></svg>") no-repeat center / 100% 100%;
}

:root[data-eco="1"] .rp-footer__col-title {
    color: var(--sk-green) !important;
    font-family: var(--rp-font-mono) !important;
    letter-spacing: 0.15em !important;
}

:root[data-eco="1"] .rp-footer a:hover {
    color: var(--sk-green) !important;
}

/* ─── 13. ECO BANNER + BADGES (eco only) ───────────────────── */
:root[data-eco="1"] .rp-eco-pill,
:root[data-eco="1"] .rp-eco-banner {
    background: transparent !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='999' ry='999' stroke='%231F8A6B' stroke-width='1.4' stroke-dasharray='4 3'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
    color: var(--sk-green) !important;
}

/* ─── 14. MODAL (eco only) ─────────────────────────────────── */
:root[data-eco="1"] .rp-modal__dialog {
    background: var(--sk-paper) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='3' y='3' width='calc(100%25 - 6)' height='calc(100%25 - 6)' rx='20' ry='20' stroke='%231F8A6B' stroke-width='2' stroke-dasharray='8 4' fill='%23FAF8F2'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border-radius: 24px !important;
    box-shadow: 12px 12px 0 rgba(0, 178, 148, 0.08) !important;
}

:root[data-eco="1"] .rp-radio-card {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='12' ry='12' stroke='%231F8A6B' stroke-width='1.4' stroke-dasharray='5 4' opacity='0.55'/></svg>") !important;
    background-size: 100% 100% !important;
}

:root[data-eco="1"] .rp-radio-card:has(input:checked),
:root[data-eco="1"] .rp-radio-card.is-active {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='12' ry='12' stroke='%231F8A6B' stroke-width='2.2' fill='%23E8F3EE'/></svg>") !important;
}

/* ─── 15. CTA BAND (eco only) ──────────────────────────────── */
:root[data-eco="1"] .rp-cta-band {
    background-color: var(--sk-paper-2) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='4' y='4' width='calc(100%25 - 8)' height='calc(100%25 - 8)' rx='28' ry='28' stroke='%231F8A6B' stroke-width='1.8' stroke-dasharray='10 6' opacity='0.6'/></svg>"), var(--sk-paper-2) !important;
    background-size: 100% 100%, auto !important;
    background-repeat: no-repeat, no-repeat !important;
    border: none !important;
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-cta-band__heading {
    color: var(--sk-ink) !important;
}

/* ─── 16. TIMELINE (eco only) ──────────────────────────────── */
:root[data-eco="1"] .rp-timeline {
    border-left: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='100%25' viewBox='0 0 2 100' preserveAspectRatio='none'><line x1='1' y1='2' x2='1' y2='98' stroke='%231F8A6B' stroke-width='1.5' stroke-dasharray='5 4'/></svg>");
    background-repeat: repeat-y;
    background-position: 12px 0;
    background-size: 2px 100%;
}

:root[data-eco="1"] .rp-timeline__year {
    background: var(--sk-green) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px var(--sk-paper) !important;
}

/* ─── 17. POSSIBILITIES / APP CARDS (eco only) ─────────────── */
:root[data-eco="1"] .rp-possibility-card,
:root[data-eco="1"] .rp-app-card {
    padding: 28px !important;
    text-align: left !important;
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-possibility-card__title,
:root[data-eco="1"] .rp-app-card__label {
    color: var(--sk-ink) !important;
}

/* ─── 18. BATTERY 3D (eco only) ────────────────────────────── */
:root[data-eco="1"] .rp-bx3d {
    background: #FFFFFF !important;
}

:root[data-eco="1"] .rp-bx3d__panel {
    background-image: none !important;
    background-color: transparent !important;
}

:root[data-eco="1"] .rp-bx3d__panel.is-active {
    background-color: rgba(0, 178, 148, 0.04) !important;
    border-radius: 14px !important;
}

/* ─── 19. MOBILE MENU (eco only) ───────────────────────────── */
:root[data-eco="1"] .rp-mobile-menu {
    background: var(--sk-paper) !important;
}

:root[data-eco="1"] .rp-mobile-menu__item a,
:root[data-eco="1"] .rp-mobile-menu__item button {
    color: var(--sk-ink) !important;
    border-bottom: 1.5px dashed var(--sk-green-line-2) !important;
}

/* ─── 20. COOKIE BANNER (eco only) ─────────────────────────── */
:root[data-eco="1"] .rp-cookie-banner {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='3' y='3' width='calc(100%25 - 6)' height='calc(100%25 - 6)' rx='20' ry='20' stroke='%231F8A6B' stroke-width='1.6' stroke-dasharray='6 4' fill='%23FAF8F2'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
    color: var(--sk-ink) !important;
}

/* ─── 21. SEARCH FORM (eco only) ───────────────────────────── */
:root[data-eco="1"] .rp-search-form__field {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='999' ry='999' stroke='%231F8A6B' stroke-width='1.5' stroke-dasharray='5 4'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: none !important;
}

/* ─── 22. QUALITY POLICY / SUSTAINABILITY (eco only) ───────── */
:root[data-eco="1"] .rp-sustain {
    background: var(--sk-paper) !important;
}

:root[data-eco="1"] .rp-sustain__bg {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

:root[data-eco="1"] .rp-sustain__overlay {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.25) 100%) !important;
}

:root[data-eco="1"] .rp-sustain__inner>div:first-child h2,
:root[data-eco="1"] .rp-sustain__inner>div:first-child p {
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-sustain__inner>div:first-child .rp-eyebrow {
    color: var(--sk-green) !important;
}

:root[data-eco="1"] .rp-sustain__stat-value {
    color: var(--sk-green) !important;
}

:root[data-eco="1"] .rp-sustain__stat-label {
    color: var(--sk-ink-soft) !important;
}

/* ─── 23. NAV LANG SWITCHER (eco only) ─────────────────────── */
:root[data-eco="1"] .rp-lang-switcher__btn {
    color: var(--sk-ink) !important;
}

:root[data-eco="1"] .rp-lang-switcher__menu {
    background: var(--sk-paper) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='10' ry='10' stroke='%231F8A6B' stroke-width='1.4' stroke-dasharray='4 3'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
}

/* ─── 24. ACCESSIBILITY — reduced motion ───────────────────── */


/* ─── 25. RESPONSIVE adjustments ───────────────────────────── */


/* ════════════════════════════════════════════════════════════
   26. ECO PREMIUM ENHANCEMENTS (v2)
   ──────────────────────────────────────────────────────────────
   Daha refined hand-drawn corporate hissi.
   ════════════════════════════════════════════════════════════ */

/* Notebook paper background — çok hafif horizontal ruling */
:root[data-eco="1"] body {
    background-color: #FDFCF7 !important;
    background-image:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent 39px,
            rgba(0, 178, 148, 0.05) 39px,
            rgba(0, 178, 148, 0.05) 40px),
        radial-gradient(circle at 8% 12%,
            rgba(0, 178, 148, 0.04),
            transparent 35%),
        radial-gradient(circle at 92% 88%,
            rgba(0, 178, 148, 0.04),
            transparent 35%) !important;
    background-attachment: fixed !important;
}

:root[data-eco="1"] .rp-section--alt {
    background-color: #F4F0E3 !important;
    background-image:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent 39px,
            rgba(0, 178, 148, 0.05) 39px,
            rgba(0, 178, 148, 0.05) 40px) !important;
}

/* Cards — paper note effect, subtle rotation alternation */
:root[data-eco="1"] .rp-grid .rp-card:nth-child(2n),
:root[data-eco="1"] .rp-grid .rp-product-card:nth-child(2n),
:root[data-eco="1"] .rp-grid .rp-case:nth-child(2n),
:root[data-eco="1"] .rp-grid .rp-news:nth-child(2n),
:root[data-eco="1"] .rp-grid .rp-possibility-card:nth-child(2n) {
    transform: rotate(0.3deg);
}

:root[data-eco="1"] .rp-grid .rp-card:nth-child(2n+1),
:root[data-eco="1"] .rp-grid .rp-product-card:nth-child(2n+1),
:root[data-eco="1"] .rp-grid .rp-case:nth-child(2n+1),
:root[data-eco="1"] .rp-grid .rp-news:nth-child(2n+1),
:root[data-eco="1"] .rp-grid .rp-possibility-card:nth-child(2n+1) {
    transform: rotate(-0.3deg);
}

:root[data-eco="1"] .rp-grid .rp-card:hover,
:root[data-eco="1"] .rp-grid .rp-product-card:hover,
:root[data-eco="1"] .rp-grid .rp-case:hover,
:root[data-eco="1"] .rp-grid .rp-news:hover,
:root[data-eco="1"] .rp-grid .rp-possibility-card:hover {
    transform: rotate(0deg) translate(-3px, -5px) !important;
    box-shadow: 14px 14px 0 rgba(0, 178, 148, 0.18), 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

/* Stronger section dividers — wavy sketch line */
:root[data-eco="1"] .rp-section {
    position: relative;
}

:root[data-eco="1"] .rp-section:not(:first-of-type)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 12' preserveAspectRatio='none'><path d='M5 6 Q 100 1, 200 7 Q 300 12, 400 4 T 600 7 T 800 5 T 998 6' fill='none' stroke='%231F8A6B' stroke-width='1.4' stroke-linecap='round' opacity='0.45'/><circle cx='150' cy='4' r='1.5' fill='%231F8A6B' opacity='0.4'/><circle cx='500' cy='8' r='1.5' fill='%231F8A6B' opacity='0.4'/><circle cx='850' cy='5' r='1.5' fill='%231F8A6B' opacity='0.4'/></svg>") no-repeat center / 100% 100%;
    pointer-events: none;
    z-index: 1;
}

/* Page hero — eyebrow+sub kaldırıldığı için heading'i daha vurgulu yap */
:root[data-eco="1"] .rp-page-hero {
    background: #FDFCF7 !important;
    padding-top: calc(var(--header-h, 64px) + 80px) !important;
    padding-bottom: 80px !important;
    position: relative;
}

:root[data-eco="1"] .rp-page-hero::after {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'><path d='M3 8 Q 25 2, 50 7 Q 75 12, 100 6 T 118 8' fill='none' stroke='%231F8A6B' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat center / contain;
    opacity: 0.7;
}

:root[data-eco="1"] .rp-page-hero__heading {
    font-size: clamp(2.5rem, 5vw + 0.5rem, 4.5rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

:root[data-eco="1"] .rp-page-hero__inner {
    text-align: center !important;
}

:root[data-eco="1"] .rp-breadcrumb {
    justify-content: center !important;
    margin-bottom: 24px !important;
}

/* Pin / paper-clip accent on hero card area */
:root[data-eco="1"] .rp-hero-slider__content::before {
    content: "";
    position: absolute;
    top: 30vh;
    left: 8%;
    width: 60px;
    height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'><path d='M30 5 Q 45 15, 30 30 Q 15 45, 30 55' stroke='%231F8A6B' stroke-width='2' stroke-linecap='round' opacity='0.25'/><circle cx='30' cy='5' r='3' fill='%231F8A6B' opacity='0.3'/></svg>") no-repeat center / contain;
    pointer-events: none;
    z-index: 2;
    display: none;
    /* Sadece desktop'ta */
}


/* Buttons — daha refined sketch capsule with double border */
:root[data-eco="1"] .rp-btn--primary {
    background-color: var(--sk-green) !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='3' y='3' width='calc(100%25 - 6)' height='calc(100%25 - 6)' rx='999' ry='999' fill='none' stroke='%23ffffff' stroke-width='1' stroke-dasharray='2 4' opacity='0.7'/><rect x='6' y='6' width='calc(100%25 - 12)' height='calc(100%25 - 12)' rx='999' ry='999' fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.35'/></svg>") !important;
    color: #FFFFFF !important;
    box-shadow: 5px 5px 0 var(--sk-green-dark), 0 2px 8px rgba(0, 178, 148, 0.25) !important;
    font-weight: 700 !important;
}

:root[data-eco="1"] .rp-btn--primary:hover {
    transform: translate(-2px, -3px) rotate(-0.6deg) !important;
    box-shadow: 8px 8px 0 var(--sk-ink), 0 4px 12px rgba(0, 178, 148, 0.35) !important;
}

/* Eyebrow — ribbon shape */
:root[data-eco="1"] .rp-section__header .rp-eyebrow {
    padding: 4px 16px;
    background: rgba(0, 178, 148, 0.08);
    border-radius: 999px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='1' y='1' width='calc(100%25 - 2)' height='calc(100%25 - 2)' rx='999' ry='999' stroke='%231F8A6B' stroke-width='1.2' stroke-dasharray='4 3' opacity='0.5'/></svg>"),
        linear-gradient(rgba(0, 178, 148, 0.08), rgba(0, 178, 148, 0.08));
    background-size: 100% 100%, auto;
    background-repeat: no-repeat;
}

:root[data-eco="1"] .rp-section__header .rp-eyebrow::before {
    display: none;
}

/* Trust strip — paper card per stat */
:root[data-eco="1"] .rp-trust__grid {
    gap: 16px !important;
}

:root[data-eco="1"] .rp-trust__item {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' fill='none'><rect x='2' y='2' width='calc(100%25 - 4)' height='calc(100%25 - 4)' rx='12' ry='12' stroke='%231F8A6B' stroke-width='1.4' stroke-dasharray='6 4' opacity='0.45'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    padding: 24px 12px !important;
    background-color: rgba(0, 178, 148, 0.025) !important;
    border-radius: 14px !important;
}

:root[data-eco="1"] .rp-trust__item::after {
    display: none !important;
}

/* Headings — slight handwritten underline accent for h2 */
:root[data-eco="1"] .rp-section__header h2,
:root[data-eco="1"] .rp-display-md {
    position: relative;
    padding-bottom: 4px;
}

/* Mega menu — paper note look */
:root[data-eco="1"] .rp-mega__panel {
    transform: rotate(-0.3deg);
    box-shadow: 8px 10px 0 rgba(0, 178, 148, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Improve sketch button hover for all variants */
:root[data-eco="1"] .rp-btn--secondary,
:root[data-eco="1"] .rp-btn--ghost {
    background-color: rgba(0, 178, 148, 0.03) !important;
    font-weight: 600 !important;
}

:root[data-eco="1"] .rp-btn--secondary:hover,
:root[data-eco="1"] .rp-btn--ghost:hover {
    background-color: rgba(0, 178, 148, 0.10) !important;
    color: var(--sk-green-dark) !important;
}

/* Logo eco-tint */
:root[data-eco="1"] .rp-header__logo img {
    filter: drop-shadow(0 1px 0 rgba(0, 178, 148, 0.15)) !important;
}

/* Trust value numbers — handwritten warmth */
:root[data-eco="1"] .rp-trust__value {
    font-family: var(--sk-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}


/* ═══════════ SOURCE: themes/reap/assets/css/_source/campaign.css ═══════════ */
/* ════════════════════════════════════════════════════════════
   SITE CAMPAIGN — banner ve efekt stilleri
   ════════════════════════════════════════════════════════════ */
.yp-campaign-banner {
    position: relative;
    z-index: 200;
    padding: 8px 16px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.yp-campaign-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
}

.yp-campaign-banner__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    color: inherit;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .15s ease;
}

.yp-campaign-banner__close:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Body padding-top'u ekle ki sticky header ile çakışmasın */
body:has(.yp-campaign-banner) {
    /* modern browsers */
}

/* Effect canvas — full-screen overlay */
.yp-campaign-fx {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    overflow: hidden;
}

.yp-campaign-fx canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Reduced motion — efektleri gizle */



/* ═══════════ SOURCE: themes/reap/assets/css/_source/site.css ═══════════ */
/* ═══════════════════════════════════════════════════════════════
   REAP STATIK — GLOBAL OVERRIDE STYLES
   Bu dosya orijinal theme CSS'inden SONRA yüklenir. Üst katman.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0. JetBrains Mono — Google Fonts CDN (B3 fix) ─────────────
   Orijinal CSS bu fontu kullanıyor ama @font-face yok → stat numbers
   kullanıcı makinesindeki gariplikten cursive görünüyor. CDN ile çek. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

.rp-text-mono,
.rp-trust__value,
.rp-page-hero__spec,
.rp-bx3d__panel-num,
.rp-news__date,
.rp-eyebrow,
.rp-spec__val,
.rp-cert-row__code,
.rp-cert-logos__code,
.rp-detail-keyspecs__val,
[class*="__mono"],
[class*="text-mono"] {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ─── 1. Container & section spacing — Apple-grade design tokens ─── */
:root {
    --rp-section-y: 64px;
    --rp-section-y-sm: 48px;
    --rp-section-y-lg: 96px;
    --rp-container-max: 1320px;
    --rp-card-radius: 16px;
    --rp-border-soft: 1px solid rgba(15, 23, 42, 0.08);
    /* Body text colors — WCAG AA compliant */
    --rp-text-primary: #0f172a;
    /* on white: 16.4:1 ✓ */
    --rp-text-secondary: #475569;
    /* on #f5f5f7: 7.5:1 ✓ (was rgb(110,110,115) = 4.04:1 fail) */
    --rp-text-muted: #64748b;
    /* on white: 5.0:1 ✓ */
    /* Hero tier system — 2 variant only */
    --rp-hero-y: 96px;
    /* marketing (about, products, applications) */
    --rp-hero-y-deep: 112px;
    /* detail (solutions/*, project/*, blog/*) */
}

.rp-section {
    padding-top: var(--rp-section-y);
    padding-bottom: var(--rp-section-y);
}

.rp-section--tight {
    padding-top: var(--rp-section-y-sm);
    padding-bottom: var(--rp-section-y-sm);
}

.rp-container,
[class*="rp-container"] {
    max-width: var(--rp-container-max);
}

/* Quality Policy spacing — sadece dikey kompakt
   NOT: rp-sustain orijinal renklerini ve içeriğini bozmadan sadece padding kıs */
[data-vb-section="quality_policy"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* Active Projects spacing (case_studies kullanılan section)  */
[data-vb-section="active-projects"],
[data-vb-section="case_studies"] {
    padding-top: var(--rp-section-y-sm) !important;
    padding-bottom: var(--rp-section-y-sm) !important;
}

/* 3D bölümleri: sticky scroll davranışını bozmamak için orijinal padding kullanılsın.
   Kuralı tamamen orijinaline bırakıyoruz. */

/* ─── 2. Typography — premium capitalization ──────────────────── */
/* All-caps eyebrow korunsun, ama gereksiz uppercase'leri kapat */
.rp-product-card__title,
.rp-product-card h3,
.rp-tech-pillar__title,
.rp-case__title,
.rp-app-card__title,
.rp-cta-band__title,
.rp-footer__col-title {
    text-transform: none !important;
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Eyebrow ve etiketler — küçük tracking */
.rp-eyebrow,
[class*="__eyebrow"] {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 600;
}

/* ─── 3. Hero — küçük yeşil tagline kaldır ────────────────────── */
.rp-hero-slider__tagline,
.rp-hero-slider__eyebrow,
.rp-hero-slider__small-title {
    display: none !important;
}

/* Hero text okunabilirlik */
.rp-hero-slider__content {
    text-shadow: none;
}

.rp-hero-slider__heading {
    margin-top: 0 !important;
}

/* Mobile hero — siyah overlay + smaller heading (B4 fix + kullanıcı talebi) */


/* ─── Day-1 #1: Homepage slide 3 — beyaz H1 / beyaz BG → dark green scrim ekle (DESKTOP) ─── */
.rp-hero-slider__slide {
    position: relative;
    overflow: hidden;
}

.rp-hero-slider__slide::after {
    /* Overlay/scrim KALDIRILDI (kullanıcı talebi 15 Haz): hero metni olmadığı için
     karartmaya gerek yok, slider görseli net görünsün. */
    content: none;
}

.rp-hero-slider__content {
    position: relative;
    z-index: 2;
}

/* ─── Hero video/image background — fullscreen cover (kullanıcı talebi) ─── */
.rp-hero-slider__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden;
}

.rp-hero-slider__bg video,
.rp-hero-slider__bg img,
.rp-hero-slider__bg picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    min-width: 100%;
    min-height: 100%;
}

.rp-hero-slider__bg picture img {
    display: block;
}

.rp-hero-slider__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
}

/* Hero — clamp-based height: 13" Mac (1280×720) içerik kesilmesin diye 100vh kilidi kaldırıldı.
   Min 640px (içerik garanti), tercih 90vh, max 900px (4K'da gereksiz büyümesin). */
.rp-hero-slider {
    min-height: clamp(640px, 90vh, 900px) !important;
    height: auto;
    position: relative;
}

.rp-hero-slider__swiper,
.rp-hero-slider .swiper {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.rp-hero-slider__slide,
.rp-hero-slider .swiper-slide {
    min-height: clamp(640px, 90vh, 900px);
    height: 100%;
}

/* Hero content yerleşimi — content sayfa container'ında ortala, text içeride sola hizalı */
.rp-hero-slider__content {
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero container'ı normal sayfa genişliğiyle (1280px) ortala — sayfanın geri kalanıyla hizalı */
.rp-hero-slider__content>.rp-container,
.rp-hero-slider .rp-container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1280px !important;
    padding-left: clamp(24px, 4vw, 60px) !important;
    padding-right: clamp(24px, 4vw, 60px) !important;
    width: 100%;
}

.rp-hero-slider__text {
    margin-top: 0 !important;
    margin-left: 0 !important;
    max-width: 720px;
}


/* ─── Day-1 #2: Solution detail spec chip contrast — WCAG AA ─── */
.rp-detail-keyspecs__item {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.rp-detail-keyspecs__key {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 700 !important;
}

.rp-detail-keyspecs__val {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    text-shadow: none;
}

/* ─── Day-1 #4: Purple #6A64A9 → brand green ────────────────────
   Eyebrow, badge, accent kullanılan her yerde brand consistency */
.rp-eyebrow,
[class*="__eyebrow"]:not(.rp-hero-slider__eyebrow),
[class*="featured-badge"],
[class*="__cap"]:not(.rp-product-card__cap),
.rp-feature__badge {
    color: #00b294 !important;
}

.rp-badge--featured,
[class*="featured-badge"],
.rp-feature__badge {
    background: rgba(0, 168, 120, 0.10) !important;
    border: 1px solid rgba(0, 168, 120, 0.20) !important;
    color: #00b294 !important;
}

/* Solid green badge — beyaz yazı korunsun (yeşil-üstüne-yeşil görünmezliği fix) */
.rp-badge:not(.rp-badge--featured) {
    background: var(--rp-primary) !important;
    color: #ffffff !important;
}

/* Brochures "FEATURED" card panel */
.rp-brochure-card--featured .rp-brochure-card__media,
.rp-case-card--featured .rp-case-card__media,
[class*="__media"]:has(+ .rp-badge--featured) {
    background: linear-gradient(135deg, rgba(0, 168, 120, 0.08) 0%, rgba(0, 168, 120, 0.04) 100%) !important;
}

/* Purple text override globally */
[style*="#6A64A9"],
[style*="rgb(106"] {
    color: #00b294 !important;
}

/* ─── Day-1 #3 doğrulama: Eco-mode header nav (zaten var, güçlendir) ─── */
body[data-eco-mode] .rp-header a,
body[data-eco-mode] .rp-nav__link,
body[data-eco-mode] header nav a {
    color: #00b294 !important;
    text-shadow: none;
}

/* (2 Haz 2026) Reap-Keyvisual-Banner-WindPlant + slider-energy-stroy gizleme/factory-
   substitute kuralı KALDIRILDI — kullanıcı bu hero görsellerini açıkça istedi. */

/* ─── 4. REAP Products — temiz kart, tek detay butonu ─────────── */
/* Subtitle / "Liquid Cooling" gibi alt yazıları + body sonundaki açıklama div'lerini gizle */
.rp-product-card__subtitle,
.rp-product-card__meta-tag,
.rp-product-card__sub,
.rp-product-card__chip-list .rp-product-card__chip:nth-child(n+3),
.rp-product-card__body>div[style*="margin-top:14px"],
.rp-product-card__body>div[style*="border-top"] {
    display: none !important;
}

/* "Utility-Scale" gibi rp-product-card__cap üst etiketi temiz */
.rp-product-card__cap {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #00b294;
    background: rgba(0, 168, 120, 0.10);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    white-space: nowrap;
    max-width: fit-content;
    line-height: 1.6;
}

/* Product card temizliği */
[data-vb-section="products"] .rp-product-card,
.rp-product-card,
a.rp-product-card {
    border: var(--rp-border-soft);
    border-radius: var(--rp-card-radius);
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
    /* Grid sütunları orantılı: body geniş, media kompakt */
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    overflow: hidden;
}

.rp-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 168, 120, 0.10);
}

.rp-product-card__body {
    min-width: 0;
    /* grid item taşmayı önle */
    padding: 24px 22px !important;
}

.rp-product-card__title {
    font-size: clamp(20px, 1.8vw, 26px) !important;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

.rp-product-card__media {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 16px;
    overflow: hidden;
}

.rp-product-card__media img {
    max-height: 200px !important;
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}

/* Birden fazla buton varsa sadece ilkini bırak (detay) */
.rp-product-card__actions .rp-btn:nth-of-type(n+2),
.rp-product-card__cta-row .rp-btn:nth-of-type(n+2) {
    display: none !important;
}

/* ─── 5. Applications — kart border + premium ─────────────────── */
.rp-app-card,
[class*="rp-application-card"],
.rp-applications__card {
    border: var(--rp-border-soft);
    border-radius: var(--rp-card-radius);
    background: #fff;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.rp-app-card:hover,
[class*="rp-application-card"]:hover,
.rp-applications__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 168, 120, 0.10);
}

/* Applications page detail row'ları — premium card + border */
.rp-app-detail {
    background: #fff;
    border: 1px solid rgba(0, 168, 120, 0.10);
    padding: 28px !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.rp-app-detail:hover {}

.rp-app-detail__row {
    gap: 32px !important;
}

.rp-app-detail__media {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.rp-app-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.rp-app-detail:hover .rp-app-detail__media img {
    transform: scale(1.05);
}

.rp-section--alt .rp-app-detail {
    background: #fafffd;
}

/* ─── 6. 3D sections — orijinal stil korunur (sticky scroll için)
   rp-tech-pillar / rp-bx3d kendi orijinal stilinde kalsın, override yok */

/* ─── 7. Numbers / Stats / Trust section ─────────────────────── */
/* Explicit kolon: 4 metric için 768px+ tek satır garanti, 768-1023 arası asimetrik wrap önlenir */
.rp-stats,
.rp-sustain__stats,
.rp-trust__grid,
[class*="rp-stat-grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: stretch;
}

/* Tablet portrait (≤767): 2×2 grid */

/* Küçük telefon (≤480): tek sütun */

.rp-trust {
    padding: 48px 0 !important;
    background: #fff;
}

.rp-stat,
.rp-sustain__stat,
.rp-trust__item,
[class*="rp-stat-card"] {
    text-align: center;
    padding: 22px 16px;
    border-radius: var(--rp-card-radius);
    background: rgba(0, 168, 120, 0.04);
    border: 1px solid rgba(0, 168, 120, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.rp-stat:hover,
.rp-trust__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 168, 120, 0.10);
}

/* Orijinal CSS hover'da ::before pseudo-element ile çizgi ekliyor — kaldır */
.rp-trust__item::before,
.rp-trust__item::after,
.rp-trust__item:hover::before,
.rp-trust__item:hover::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
}

.rp-stat__value,
.rp-sustain__stat-value,
.rp-trust__value,
[class*="__stat-value"] {
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 700;
    color: #00b294;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.rp-stat__label,
.rp-sustain__stat-label,
.rp-trust__label,
[class*="__stat-label"] {
    font-size: 13px;
    color: #475569;
    margin-top: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ─── 8. Back-to-top button ──────────────────────────────────── */
#rp-back-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #00b294;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 168, 120, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 9990;
    font-size: 18px;
}

#rp-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#rp-back-top:hover {
    background: #00b294;
    transform: translateY(-2px);
}

#rp-back-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Mobile: küçük + sağdan biraz daha içeri */


/* ─── 8b. Touch target sizes — WCAG 2.5.5 ≥44px (Day-1 fix C1) ─── */

/* Desktop: kritik butonlar 40px+ */
.rp-btn,
.rp-btn--sm {
    min-height: 40px;
    padding-block: 10px;
}

/* ─── 8c. Newsletter input — border + focus (Day-1 fix D6) ─── */
.rp-footer__newsletter input[type="email"],
.rp-footer__newsletter-wrap input {
    border: 1px solid #d4d4d8;
    background: #fff;
    border-radius: 999px;
    padding: 12px 48px 12px 18px;
    min-height: 44px;
}

.rp-footer__newsletter input:focus,
.rp-footer__newsletter-wrap input:focus {
    outline: 2px solid #00b294;
    outline-offset: 1px;
    border-color: #00b294;
}

/* ─── 8d. Global focus ring + Form focus restoration (Day-1 F6 + Day-2 A4) ─── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #00b294;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Form input focus restoration (orijinal reap.css outline:none yapıyordu) */
input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #00b294 !important;
    outline-offset: 1px;
    border-color: #00b294 !important;
}

/* ─── Day-2 A2: --rp-text-dim contrast fix (3.53:1 → 4.6:1) ─── */
:root {
    --rp-text-dim: #6E6E73 !important;
    /* was #86868B */
}

/* Day-2 A1: Primary button contrast force (#00b294 → #00b294 dark mode override) */
.rp-btn--primary,
button.rp-btn--primary,
a.rp-btn--primary {
    background-color: #00b294 !important;
    border-color: #00b294 !important;
    color: #ffffff !important;
}

.rp-btn--primary:hover {
    background-color: #009880 !important;
    border-color: #009880 !important;
}

/* Day-2 A8: Çok küçük text 9-10px → minimum 12px */
.rp-flow__node-meta,
[class*="__node-meta"],
[class*="__meta-sm"] {
    font-size: 12px !important;
}

/* ─── 8e. Hero outline button contrast (D2 fix) ─── */
.rp-hero-slider__link,
.rp-hero-slider .rp-btn--ghost,
.rp-hero-slider .rp-btn--secondary,
.rp-page-hero .rp-btn--ghost,
.rp-page-hero .rp-btn--secondary {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #00b294 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.rp-hero-slider__link:hover,
.rp-hero-slider .rp-btn--ghost:hover,
.rp-hero-slider .rp-btn--secondary:hover,
.rp-page-hero .rp-btn--ghost:hover,
.rp-page-hero .rp-btn--secondary:hover {
    background: #ffffff !important;
    color: #00b294 !important;
}

/* ─── 8f. Trust strip scroll-margin (C2 fix) ─── */
.rp-trust,
[data-vb-section="trust"] {
    scroll-margin-top: 72px;
}

/* ─── 8g. Certificates "YEAR —" placeholder gizle (D4 fix) ─── */
.rp-cert-row__year:empty,
.rp-cert-row__year-value:empty,
.rp-cert-row__meta div:has(.rp-cert-row__year:empty) {
    display: none !important;
}

/* Year değeri "—" veya "-" ise meta'yı gizle */
.rp-cert-row .rp-eyebrow+*:not([class]):empty,
.rp-cert-row .rp-eyebrow:has(+ *[data-empty="1"]) {
    display: none;
}

/* ─── 8h. Active Projects — unified gradient fallback (D5 fix)
   Cards without proper photo show consistent gradient instead of mixed look */
.rp-case[data-no-photo="1"] .rp-case__media,
.rp-case--illustration .rp-case__media {
    background: linear-gradient(135deg, #e8f6ef 0%, #c9eada 100%);
}

/* ─── 8i. Contact page hero — TR text leak fix B-01: image değiştirildi (bkz. 17 numaralı bloktan sonra). */

/* ─── 8j. Apple audit sistemik: Hero scale standardize ──────────
   2 tier: marketing (about/products/applications/resources/career/sustainability) ve detail
   (solutions detail/project detail/blog post). Tüm "tek-seferlik" override'ları normalize et. */
.rp-page-hero,
body[data-page="about"] .rp-page-hero,
body[data-page="products"] .rp-page-hero,
body[data-page="applications"] .rp-page-hero,
body[data-page="resources"] .rp-page-hero,
body[data-page="career"] .rp-page-hero,
body[data-page="sustainability"] .rp-page-hero,
body[data-page="certificates"] .rp-page-hero,
body[data-page="brochures"] .rp-page-hero {
    padding-top: var(--rp-hero-y) !important;
    padding-bottom: var(--rp-hero-y) !important;
}

body[data-page="solutions"] .rp-page-hero,
body[data-page="project"] .rp-page-hero,
body[data-page="blog"] .rp-page-hero,
body[data-page="sector"] .rp-page-hero,
.rp-case-hero,
.rp-article-hero {
    padding-top: var(--rp-hero-y-deep) !important;
    padding-bottom: var(--rp-hero-y-deep) !important;
}

/* "Case hero" 915px abartısını kontrol altına al */
.rp-case-hero {
    min-height: 0 !important;
}

/* ─── 8k. Section padding token sistemi (Apple audit #7) ────────
   Tek varyant: --rp-section-y (64px). Tight için --rp-section-y-sm (48px).
   Loose için --rp-section-y-lg (96px). Eski 28/56/86.4 sapmalarını kapat. */
.rp-section {
    padding-top: var(--rp-section-y) !important;
    padding-bottom: var(--rp-section-y) !important;
}

.rp-section--tight,
.rp-app-detail,
.rp-case-stats,
[data-vb-section="active-projects"],
[data-vb-section="case_studies"],
[data-vb-section="quality_policy"] {
    padding-top: var(--rp-section-y-sm) !important;
    padding-bottom: var(--rp-section-y-sm) !important;
}

.rp-section--loose,
.rp-bx3d {
    padding-top: var(--rp-section-y-lg) !important;
    padding-bottom: var(--rp-section-y-lg) !important;
}

.rp-trust {
    padding: var(--rp-section-y-sm) 0 !important;
}

/* ─── 8l. Body text color contrast — WCAG AA (Apple audit #8)
   ÖNEMLİ: Hero (slider + page-hero) yazıları beyaz kalmalı — bunları exclude et */
body,
p:not(.rp-hero-slider__sub):not(.rp-page-hero__sub):not(.rp-page-hero p),
.rp-section p:not(.rp-hero-slider__sub),
.rp-article p,
.rp-news__excerpt,
.rp-case__body p,
[class*="__desc"]:not(.rp-hero-slider [class*="__desc"]):not(.rp-page-hero [class*="__desc"]) {
    color: var(--rp-text-secondary);
}

.rp-section--alt p:not(.rp-hero-slider__sub),
[class*="--alt"] p:not(.rp-hero-slider__sub),
.rp-trust__item p {
    color: var(--rp-text-secondary);
}

/* Hero alanlarında her zaman beyaz/açık ton — çakışan global'i ezer
   ÖNEMLİ: eco-mode'da hero açık zemin olduğu için bu kural skip edilir (C2 fix) */
body:not([data-eco-mode]) .rp-hero-slider,
body:not([data-eco-mode]) .rp-hero-slider *,
body:not([data-eco-mode]) .rp-hero-slider__content,
body:not([data-eco-mode]) .rp-hero-slider__content *,
body:not([data-eco-mode]) .rp-hero-slider__heading,
body:not([data-eco-mode]) .rp-hero-slider__sub,
body:not([data-eco-mode]) .rp-page-hero,
body:not([data-eco-mode]) .rp-page-hero *,
body:not([data-eco-mode]) .rp-page-hero__heading,
body:not([data-eco-mode]) .rp-page-hero__sub,
body:not([data-eco-mode]) .rp-page-hero__eyebrow {
    color: inherit;
}

body:not([data-eco-mode]) .rp-hero-slider__heading,
body:not([data-eco-mode]) .rp-page-hero__heading {
    color: #ffffff !important;
}

body:not([data-eco-mode]) .rp-hero-slider__sub,
body:not([data-eco-mode]) .rp-page-hero__sub {
    color: rgba(255, 255, 255, 0.94) !important;
}

body:not([data-eco-mode]) .rp-hero-slider__eyebrow,
body:not([data-eco-mode]) .rp-page-hero__eyebrow {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Eco-mode: hero text koyu yeşil (sketch zemin açık) */
body[data-eco-mode] .rp-page-hero__heading,
body[data-eco-mode] .rp-hero-slider__heading {
    color: #00b294 !important;
    text-shadow: none;
}

body[data-eco-mode] .rp-page-hero__sub,
body[data-eco-mode] .rp-hero-slider__sub {
    color: #475569 !important;
}

body[data-eco-mode] .rp-page-hero__eyebrow,
body[data-eco-mode] .rp-hero-slider__eyebrow {
    color: #00b294 !important;
}

body[data-eco-mode] .rp-detail-keyspecs__val {
    color: #00b294 !important;
}

body[data-eco-mode] .rp-detail-keyspecs__key {
    color: #475569 !important;
}

/* Primary/dark color for titles outside hero */
h1,
h2,
h3,
h4,
.rp-heading,
[class*="__title"]:not(.rp-hero-slider__title):not(.rp-page-hero__title),
[class*="__heading"]:not(.rp-hero-slider__heading):not(.rp-page-hero__heading) {
    color: var(--rp-text-primary);
}

/* ─── 8m. Contact form mobile — full-width inputs (Apple audit #9 + C3 fix)
   HTML inline style="grid-template-columns: 1fr 1fr" kullanıyor → attribute selector ile yakala */


/* ─── 8n. H1 size — single scale + word-wrap (Apple audit + C5 fix) ──── */
h1,
.rp-page-hero__heading,
.rp-hero-slider__heading,
.rp-display-md {
    font-size: clamp(28px, 4.4vw, 56px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.rp-display-md {
    font-size: clamp(28px, 4vw, 48px) !important;
}



/* ─── 9. ECO Toggle — YEO ON/OFF style ───────────────────────── */
.rp-eco-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    border: 1.5px solid rgba(0, 168, 120, 0.25);
    border-radius: 999px;
    background: rgba(0, 168, 120, 0.04);
    cursor: pointer;
    transition: all .2s ease;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
    color: #00b294;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rp-eco-toggle:hover {
    background: rgba(0, 168, 120, 0.08);
}

.rp-eco-toggle__switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background .2s ease;
}

.rp-eco-toggle__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rp-eco-toggle.is-on .rp-eco-toggle__switch {
    background: #00b294;
}

.rp-eco-toggle.is-on .rp-eco-toggle__switch::after {
    transform: translateX(14px);
}

.rp-eco-toggle__label {
    line-height: 1;
}

.rp-eco-toggle__label--on {
    display: none;
}

.rp-eco-toggle__label--off {
    display: inline;
}

.rp-eco-toggle.is-on .rp-eco-toggle__label--on {
    display: inline;
}

.rp-eco-toggle.is-on .rp-eco-toggle__label--off {
    display: none;
}

/* Eski eco-banner + discovery + carbon + carbon counter (sol-alt "5.73 g CO₂") — statik için gizle */
.rp-eco-banner,
.rp-eco-discovery,
.rp-eco-carbon,
.rp-eco-carbon-modal {
    display: none !important;
}

/* ─── 10. Footer — Member of YEO badge (light footer için adapte) ─── */
.rp-footer__member-yeo {
    /* Sadece logo görseli — arka plan/çip yok (kullanıcı isteği). */
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    text-decoration: none;
    transition: opacity .2s ease;
    margin-top: 20px;
    align-self: flex-start;
}

.rp-footer__member-yeo:hover {
    opacity: 0.8;
}

.rp-footer__member-yeo__img {
    height: 92px;
    width: auto;
    display: block;
}

.rp-footer__member-yeo__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #64748b;
    font-weight: 700;
}

.rp-footer__member-yeo__brand {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: #00b294;
    letter-spacing: -0.01em;
}

/* ─── 11. Hero green tagline / cookie banner z-index sırası ──── */
.rp-cookie-banner,
[class*="rp-cookie"] {
    z-index: 9988;
}

#rp-back-top {
    z-index: 9990;
}

.rp-eco-toggle {
    z-index: 9991;
}

/* ─── 12. Image consistency ──────────────────────────────────── */
.rp-case__media img,
.rp-app-card__media img,
.rp-product-card__media img,
.rp-tech-pillar__icon img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

/* Tablet product card layout fix — img yan yana kalsın */


/* ─── 13. Capitalization normalization (specific targets) ────── */
/* "OUR CULTURE" gibi gereksiz uppercase title'ları title-case */
h1.rp-uppercase-fix,
h2.rp-uppercase-fix,
h3.rp-uppercase-fix,
.rp-about__culture-title,
.rp-about__culture-cta {
    text-transform: none !important;
}

/* About Us culture button — premium fix */
.rp-about__culture-cta,
.rp-culture-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: #00b294;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
    transition: all .2s ease;
}

.rp-about__culture-cta:hover,
.rp-culture-cta:hover {
    background: #00b294;
    transform: translateY(-1px);
}

/* ─── 14. Mobile overflow guard ──────────────────────────────── */
/* NOT: overflow:hidden parent'lar position:sticky child'ları kırar.
   overflow-x: clip kullanılıyor — yatay taşma engellenir, sticky korunur. */
html,
body {
    overflow-x: clip;
}


/* ─── 14b. Header logo her breakpoint'te görünür (B5 fix) ─────── */
.rp-header__logo,
.rp-header__logo a,
.rp-header__logo img,
header [class*="logo"] img {
    display: inline-flex !important;
    visibility: visible !important;
}

/* ─── 14c. Header — DEFAULT SOLID, sadece dark-hero sayfalarda transparan (C1 fix)
   Önceki kural her sayfada transparan yapıyordu → project/blog/eco-mode'da menü görünmüyordu. */

/* Default: solid white blur — her sayfada güvenli */
.rp-header,
header.rp-header,
header[class*="rp-header"] {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/* Sadece hero-bearing sayfalarda + top'ta = transparan
   Bu sayfalar: homepage (data-page="home"), about, products, applications, solutions/*, contact, vb. */
body[data-page="home"] .rp-header:not(.is-scrolled),
body[data-page="about"] .rp-header:not(.is-scrolled),
body[data-page="products"] .rp-header:not(.is-scrolled),
body[data-page="applications"] .rp-header:not(.is-scrolled),
body[data-page="solutions"] .rp-header:not(.is-scrolled),
body[data-page="contact"] .rp-header:not(.is-scrolled),
body[data-page="career"] .rp-header:not(.is-scrolled),
body[data-page="sustainability"] .rp-header:not(.is-scrolled),
body[data-page="resources"] .rp-header:not(.is-scrolled),
body[data-page="certificates"] .rp-header:not(.is-scrolled),
body[data-page="brochures"] .rp-header:not(.is-scrolled),
body[data-page="sector"] .rp-header:not(.is-scrolled) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* is-scrolled state'i her sayfada solid (default zaten solid, just to be safe) */
.rp-header.is-scrolled,
header.rp-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
}

/* Menü text: default koyu (solid header) */
.rp-header a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
.rp-nav__link,
.rp-header__menu a,
header nav a:not(.rp-btn) {
    color: #0f172a !important;
    text-shadow: none;
}

/* Sadece hero-bearing + top: beyaz menü (sınırlı whitelist) */
body[data-page="home"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="about"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="products"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="applications"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="solutions"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="contact"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="career"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="sustainability"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="resources"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="certificates"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="brochures"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-page="sector"] .rp-header:not(.is-scrolled) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *) {
    color: #ffffff !important;
    text-shadow: none;
}

.rp-header a:not(.rp-btn):hover {
    color: #00b294 !important;
}

/* Eco-mode override — sketch tema açık zeminli, menü daima koyu yeşil */
body[data-eco-mode] .rp-header,
body[data-eco-mode] header.rp-header {
    background: rgba(252, 255, 253, 0.95) !important;
    backdrop-filter: saturate(180%) blur(10px) !important;
    border-bottom: 2px dashed rgba(0, 168, 120, 0.25) !important;
    box-shadow: none !important;
}

/* B-02 fix: home-page transparent header kuralı (specificity 0-6-2) eco kuralını
   eziyordu; eco-mode'da nav link'leri görünmez kalıyordu. Specificity bump'lı versiyon. */
body[data-eco-mode] .rp-header:not(.__noop) a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-eco-mode][data-page] .rp-header a:not(.rp-btn):not(.rp-eco-toggle):not(.rp-eco-toggle *),
body[data-eco-mode] .rp-nav__link,
body[data-eco-mode] .rp-header__menu a,
body[data-eco-mode] header nav a:not(.rp-btn) {
    color: #00b294 !important;
    text-shadow: none;
}

body[data-eco-mode] .rp-header a:not(.rp-btn):not(.rp-eco-toggle):hover {
    color: #064d30 !important;
}

.rp-header__logo img,
header [class*="logo"] img {
    height: 36px;
    width: auto;
}



/* ─── 15. Eco-mode page link helper (header) ─────────────────── */
.rp-eco-pill,
.rp-header__eco-link {
    display: none !important;
}

/* ─── 16. Orijinal eski back-to-top butonunu gizle (bizim #rp-back-top devrede) ─── */
.rp-scroll-top {
    display: none !important;
}

/* ─── 17. Page hero (inner pages) — premium banner (siyah overlay) ─── */
.rp-page-hero {
    position: relative;
    padding: 100px 0 70px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/reap_Fabrika_Gece_goruntusu.jpg-1-scaled.jpeg') center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.rp-page-hero__heading,
.rp-page-hero__sub,
.rp-page-hero__eyebrow {
    color: #fff !important;
}

.rp-page-hero__heading {
    font-size: clamp(34px, 5vw, 56px) !important;
    font-weight: 700;
    line-height: 1.12;
    text-shadow: none;
}

.rp-page-hero__sub {
    font-size: 16px;
    max-width: 720px;
    opacity: 0.92;
}

.rp-page-hero__eyebrow {
    opacity: 0.85;
}

/* Page-specific banner image overrides (siyah açık overlay) */
body[data-page="about-us"] .rp-page-hero,
body[data-page-type="about"] .rp-page-hero {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/Our-Mission-01.jpg') center/cover no-repeat;
}

body[data-page="applications"] .rp-page-hero,
body[data-page-type="applications"] .rp-page-hero {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/applications-01.jpg') center/cover no-repeat;
}

body[data-page="products"] .rp-page-hero,
body[data-page-type="products"] .rp-page-hero {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/Utility-Scale-Energy-Storage-Systems-1.jpg') center/cover no-repeat;
}

body[data-page="certificates"] .rp-page-hero,
body[data-page-type="certificates"] .rp-page-hero {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/Smart-Manufacturing-01.jpg') center/cover no-repeat;
}

/* B-01 fix: TR text "BESS DOĞRUSU!" içeren WindPlant key-visual'i kaldırıldı,
   default factory-night image'a geçildi (yazı sızıntısı yok, brand-uyumlu). */
body[data-page="contact"] .rp-page-hero,
body[data-page-type="contact"] .rp-page-hero {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/reap_Fabrika_Gece_goruntusu.jpg-1-scaled.jpeg') center/cover no-repeat;
}

/* ─── 18. Buttons — premium consistency ────────────────────────── */
.rp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all .2s ease;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.rp-btn--primary {
    background: #00b294;
    color: #fff !important;
    border-color: #00b294;
}

.rp-btn--primary:hover {
    background: #00b294;
    border-color: #00b294;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 168, 120, 0.25);
}

.rp-btn--secondary {
    background: transparent;
    color: #00b294 !important;
    border-color: #00b294;
}

.rp-btn--secondary:hover {
    background: #00b294;
    color: #fff !important;
    transform: translateY(-1px);
}

.rp-btn--ghost {
    background: transparent;
    color: currentColor;
    border-color: currentColor;
    opacity: 0.92;
}

.rp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    opacity: 1;
}

/* Beyaz alanda (light parent) ghost button text-rengini koyu yap */
.rp-section:not(.rp-section--alt) .rp-btn--ghost,
.rp-section--alt .rp-btn--ghost {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.20);
}

.rp-section:not(.rp-section--alt) .rp-btn--ghost:hover,
.rp-section--alt .rp-btn--ghost:hover {
    background: rgba(0, 168, 120, 0.08);
    color: #00b294;
    border-color: #00b294;
}

.rp-btn--lg {
    padding: 14px 30px;
    font-size: 15px;
}

.rp-btn--sm {
    padding: 8px 18px;
    font-size: 12px;
}

/* Section "alt" — soft eco green tint */
.rp-section--alt {
    background: linear-gradient(180deg, #fafffd 0%, #f1fbf6 100%);
}

/* ─── 19. Footer cleanup — "Member of YEO" üst düzen ─────────── */
.rp-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rp-footer__parent-badge {
    display: none !important;
}

/* eski badge artık gerekmez, yenisi var */

/* ─── 20. Certificates page — premium card layout ──────────── */
.rp-cert-row {
    display: grid !important;
    grid-template-columns: 140px 1fr auto !important;
    gap: 24px;
    align-items: center;
    padding: 22px 26px;
    background: #fff;
    border: var(--rp-border-soft);
    border-radius: var(--rp-card-radius);
    margin-bottom: 12px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rp-cert-row:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 168, 120, 0.25);
    box-shadow: 0 12px 30px rgba(0, 168, 120, 0.08);
}

.rp-cert-row__code {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #00b294;
    background: rgba(0, 168, 120, 0.06);
    border: 1px solid rgba(0, 168, 120, 0.16);
    padding: 10px 14px;
    border-radius: 10px;
    text-align: center;
    letter-spacing: 0.04em;
}

.rp-cert-row__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #0f172a;
}

.rp-cert-row__desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.55;
}

.rp-cert-row__meta {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: 12px;
    color: #64748b;
}



/* ─── 21. Cookie banner — daha az invasive ─────────────────── */
.rp-cookie-banner,
.rp-cookie {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15);
    border: var(--rp-border-soft);
}

/* ─── 22. Hero overflow (TÜRKİYE U.S. fix) — slide eyebrow zaten gizli, slide içinde küçük başlığı gizleme yedek ─── */
.rp-hero-slider__sub--below {
    color: #fff !important;
}

/* ─── 23. 3D bölüm — panel arası spacing kompakt
   Sticky scroll + face rotation davranışı korunur, sadece padding/min-height kıs. */
.rp-bx3d__panel {
    /* min-height 75vh ile sonradan override edilir; burada padding korunur */
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.rp-bx3d__panel:first-child {
    padding-top: 16px !important;
}

.rp-bx3d__panel:last-child {
    padding-bottom: 16px !important;
}

/* Panel içi başlık ve metin spacing'i de sıkı */
.rp-bx3d__panel-eyebrow {
    margin-bottom: 6px !important;
}

.rp-bx3d__panel-title {
    margin-bottom: 8px !important;
    line-height: 1.2;
}

.rp-bx3d__panel-text {
    margin-top: 6px !important;
    line-height: 1.6;
}

/* ─── 23b. 3D — Tablet/mobile için stacked fallback (B6 fix) ───
   Sticky 1280 altında bozuluyor → ortadan kaldırıp stacked layout. */
/* ── Bx3d tablet/küçük laptop (1024-1279px) — sticky KORUNUR, kompakt versiyon ──
   Eski `position: static !important` rotation'ı tamamen öldürüyordu.
   Şimdi: grid 1fr 1fr korunur ama gap daha sıkı; panel min-height: 60vh; section min-height kaldırılır. */


/* ── Bx3d ≤1024px — stacked mobile/tablet portrait fallback ──
   Grid kaldırılır, paneller dikey, sticky kapalı. Mobile spin animation kicks in (≤900px). */


/* ─── 24. REAP Products — beyaz/transparan görsel düzeni ─────────
   Yeni reap-product-*.png görselleri beyaz arka planlı, transparan değil ama temiz.
   Container'ı sade beyaz tut; multiply/filter gerek yok. */
.rp-product-card__media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #ffffff !important;
    border-radius: 12px;
    margin: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px !important;
    min-height: 220px;
}

.rp-product-card__media img {
    position: relative;
    z-index: 1;
    max-height: 200px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    mix-blend-mode: normal;
    filter: none;
    transition: transform .35s ease;
}

.rp-product-card:hover .rp-product-card__media img {
    transform: scale(1.05);
}

/* ─── 25. Products page — panel CTA sade ─────────────────────
   Her panelin altında 1+ CTA olabilir; ilkini bırak, kalanları gizle. */
body[data-page="products"] .rp-bx3d__panel .rp-bx3d__panel-cta+.rp-bx3d__panel-cta,
body[data-page="products"] .rp-bx3d__panel-actions a:nth-of-type(n+2),
body[data-page="products"] .rp-bx3d__panel-actions button:nth-of-type(n+2) {
    display: none !important;
}

/* Products page panel başlığı + metin daha kompakt premium */
body[data-page="products"] .rp-bx3d__panel-title {
    font-size: clamp(24px, 3vw, 36px) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 10px !important;
}

body[data-page="products"] .rp-bx3d__panel-text {
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
}

/* ─── 26. Certificates — reapbattery.com benzeri logo grid ──── */
.rp-cert-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    margin: 32px 0 48px;
    padding: 24px;
    background: #fff;
    border: var(--rp-border-soft);
    border-radius: var(--rp-card-radius);
}

.rp-cert-logos__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 12px;
    border: 1px dashed rgba(0, 168, 120, 0.18);
    border-radius: 10px;
    background: #fff;
    transition: all .2s ease;
}

.rp-cert-logos__item:hover {
    border-color: #00b294;
    border-style: solid;
    transform: translateY(-2px);
}

.rp-cert-logos__code {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #00b294;
    letter-spacing: 0.04em;
}

.rp-cert-logos__label {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ─── 27. Active Projects (case_studies) — premium modern card ──── */
.rp-case {
    position: relative;
    overflow: hidden;
    border-radius: var(--rp-card-radius);
    background: #fff;
    border: 1px solid rgba(0, 168, 120, 0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.rp-case:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 168, 120, 0.30);
    box-shadow: 0 24px 60px rgba(0, 168, 120, 0.18);
}

.rp-case__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #0f172a;
    overflow: hidden;
}

.rp-case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.rp-case:hover .rp-case__media img {
    transform: scale(1.08);
}

.rp-case__overlay {
    position: absolute;
    inset: 0;
    /* Daha güçlü alt gradient — light/illustration image üzerinde de okunur */
    background: linear-gradient(180deg, transparent 0%, rgba(2, 36, 28, 0.10) 30%, rgba(2, 36, 28, 0.65) 70%, rgba(2, 36, 28, 0.92) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 24px;
    color: #fff !important;
}

.rp-case .rp-case__capacity-large,
.rp-case__media .rp-case__capacity-large,
.rp-case__overlay .rp-case__capacity-large {
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: -0.02em !important;
    text-shadow: none;
    margin-bottom: 4px !important;
}

.rp-case__sector {
    display: inline-flex !important;
    align-items: center;
    font-size: 11px !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    margin-top: 10px !important;
    padding: 5px 14px !important;
    background: #00b294 !important;
    /* solid REAP green */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 999px !important;
    align-self: flex-start !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* ─── Quality Policy section — kontrast düzeltme ──────────────────
   Dark green zemin üstünde rp-text-primary yeşil okunmuyordu. */
.rp-sustain .rp-text-primary,
.rp-sustain [class*="text-primary"],
[data-vb-section="quality_policy"] .rp-text-primary {
    color: #6EE7B7 !important;
    /* açık emerald — koyu yeşilde okunur */
    -webkit-text-fill-color: #6EE7B7 !important;
}

.rp-sustain .rp-display-md,
.rp-sustain h2,
[data-vb-section="quality_policy"] h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.rp-sustain .rp-lead,
.rp-sustain p,
[data-vb-section="quality_policy"] p {
    color: rgba(255, 255, 255, 0.92) !important;
}

.rp-sustain .rp-eyebrow,
[data-vb-section="quality_policy"] .rp-eyebrow {
    color: rgba(255, 255, 255, 0.78) !important;
    border-bottom-color: rgba(255, 255, 255, 0.30) !important;
}

.rp-sustain__stat-value i,
.rp-sustain__stat-value {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.rp-sustain__stat-label {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* "Quality Policy" buton (ghost) — light bg overlay'de daha net */
.rp-sustain .rp-btn--ghost,
[data-vb-section="quality_policy"] .rp-btn--ghost {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.rp-sustain .rp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #ffffff !important;
}

.rp-case__body {
    padding: 20px 22px;
    position: relative;
}

.rp-case__body::after {
    content: "→";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 168, 120, 0.08);
    color: #00b294;
    font-weight: 700;
    transition: all .25s ease;
}

.rp-case:hover .rp-case__body::after {
    background: #00b294;
    color: #fff;
    transform: translateY(-50%) translateX(4px);
}

/* Tıklanamaz (statik) proje kartlarında yanıltıcı "→" affordance'ı gösterme */
.rp-case--static .rp-case__body::after {
    content: none;
}

.rp-case__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: #0f172a;
    padding-right: 44px;
}

.rp-case__location {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ─── 28. Hero slide eyebrow keep'i — bazı slide'larda gerek olabilir
   (orijinal eyebrow zaten gizli, ama hero__sub okunabilir kalsın) */
.rp-hero-slider__sub,
.rp-hero-slider__sub--below {
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.94;
}

/* ─── 29. Product Detail (solution-show) — premium düzen ────── */

/* Solution detail page hero — ürün-spesifik banner */
body[data-page="solutions"] .rp-page-hero,
body[data-page="project"] .rp-page-hero {
    padding: 110px 0 80px;
}

body[data-page="solutions"] .rp-page-hero__heading {
    font-size: clamp(40px, 5.5vw, 64px) !important;
}

/* Solution detail page hero için varsayılan arka plan görseli (JS ürüne göre override eder)
   B2 fix: orijinal product görsellerinde "GREATPOWER" watermark var → factory image + siyah açık overlay */
body[data-page="solutions"] .rp-page-hero,
body[data-page="products"] .rp-page-hero,
body[data-page="applications"] .rp-page-hero {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.50) 100%),
        url('../media/reap_Fabrika_Gece_goruntusu.jpg-1-scaled.jpeg') center/cover no-repeat !important;
    position: relative;
}

/* Eski watermark'lı görselleri içinde barındıran span/img'ları gizle (page hero içinde) */
.rp-page-hero img[src*="Utility-Scale-Energy-Storage-Systems-1"],
.rp-page-hero img[src*="Commercial-Industrial-Energy-Storage-Systems-1"],
.rp-page-hero picture source[srcset*="Utility-Scale-Energy-Storage-Systems-1"],
.rp-page-hero picture source[srcset*="Commercial-Industrial-Energy-Storage-Systems-1"] {
    display: none !important;
}

/* Spec table — premium row layout (tek sütun, key & value yan yana) */
.rp-spec {
    background: #fff;
    border-radius: var(--rp-card-radius);
    overflow: hidden;
    border: 1px solid rgba(0, 168, 120, 0.10);
    column-count: 1 !important;
    /* orijinal multi-col override */
    display: flex !important;
    flex-direction: column;
}

.rp-spec__row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(0, 168, 120, 0.06);
    transition: background .15s ease;
    break-inside: avoid;
}

.rp-spec__row:last-child {
    border-bottom: none;
}

.rp-spec__row:hover {
    background: rgba(0, 168, 120, 0.03);
}

.rp-spec__key {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
}

.rp-spec__val {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: right;
    flex: 1 1 auto;
    word-break: break-word;
    line-height: 1.45;
}


/* "Full specs" section — grid: spec table + side card (download datasheet vb.)
   Scope'lu: SADECE .rp-detail__spec-grid içindeki ilk kart (spec tablosu).
   Genel .rp-detail__spec-card (aside sticky kart, satır ~3496) padding:32px korur. */
.rp-detail__spec-grid>.rp-detail__spec-card:first-child {
    background: #fff;
    border-radius: var(--rp-card-radius);
    border: 1px solid rgba(0, 168, 120, 0.10);
    padding: 0;
    overflow: hidden;
}

/* "Other solutions" related products grid */
[class*="rp-other-solutions"],
.rp-section--alt .rp-grid:has([href*="/solutions/"]) {
    --gap: 24px;
}

/* CTA band — final "Technical assessment for your project"
   Orijinal CSS bazı koşullarda display:none yapıyor; zorla göster. */
section:has(> .rp-container > .rp-cta-band),
.rp-container:has(> .rp-cta-band) {
    display: block !important;
}

.rp-cta-band {
    display: block !important;
    background: linear-gradient(135deg, #00b294 0%, #00b294 100%);
    border-radius: var(--rp-card-radius);
    padding: 56px 48px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.rp-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.rp-cta-band__title,
.rp-cta-band h2 {
    color: #fff !important;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.rp-cta-band__sub,
.rp-cta-band p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 28px;
}

.rp-cta-band .rp-btn--primary {
    background: #fff !important;
    color: #00b294 !important;
    border-color: #fff !important;
}

.rp-cta-band .rp-btn--primary:hover {
    background: rgba(255, 255, 255, 0.92) !important;
}

.rp-cta-band .rp-btn--secondary,
.rp-cta-band .rp-btn--ghost {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
}

.rp-cta-band .rp-btn--secondary:hover,
.rp-cta-band .rp-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: #fff !important;
}

/* Section header eyebrow alignment */
.rp-section__header--start {
    text-align: left;
}

.rp-section__header--start .rp-eyebrow,
.rp-section__header--start .rp-display-md {
    text-align: left;
}

/* Display-md başlık */
.rp-display-md {
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ─── 30. Product Detail key specs (hero alt grid) ────────────── */
.rp-detail-keyspecs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 36px auto 0;
    max-width: var(--rp-container-max);
    padding: 0 16px;
}

.rp-detail-keyspecs__item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all .25s ease;
}

.rp-detail-keyspecs__item:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.rp-detail-keyspecs__key {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
}

.rp-detail-keyspecs__val {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-top: 6px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────────
   FAZ 1B — Layout & responsive fixes (2026-05-17)
   ────────────────────────────────────────────────────────────── */

/* B-06: 375px viewport'ta hamburger button viewport'tan 6px taşıyor.
   Header container padding'ini ve eco-toggle margin'ini kıs. */



/* B-07: Breadcrumb dark hero üstünde renk kontrastı.
   Page-hero (siyah overlay) üzerindeki .rp-breadcrumb metni beyaz olmalı. */
.rp-page-hero .rp-breadcrumb,
.rp-page-hero .rp-breadcrumb *,
.rp-page-hero [class*="breadcrumb"],
.rp-page-hero [class*="breadcrumb"] * {
    color: rgba(255, 255, 255, 0.85) !important;
}

.rp-page-hero .rp-breadcrumb a:hover,
.rp-page-hero [class*="breadcrumb"] a:hover {
    color: #fff !important;
}

.rp-page-hero .rp-breadcrumb [aria-current="page"],
.rp-page-hero .rp-breadcrumb .is-active {
    color: #fff !important;
    font-weight: 600;
}

/* B-08: /about-us/ 390px yatay overflow — body-level safety.
   Tüm dar viewport'larda taşan grid/section'ları kontrol altına al. */


/* B-11: About page USP cards — 4 kart 3-col grid'de orphan; 2x2 yap.
   .rp-usp-grid veya container'ı tespit etmek için yaygın class'ları hedefle. */



/* B-12: Sertifika logo grid — 8 logo 6-col'da 2 orphan; 4x2 yap. */
.rp-cert-logos {
    grid-template-columns: repeat(4, 1fr) !important;
}


/* ──────────────────────────────────────────────────────────────
   FAZ 1C — Performance jank fixes (2026-05-17)
   ────────────────────────────────────────────────────────────── */

/* P-01: Header `height` transition layout reflow tetikliyordu.
   Sadece bg/box-shadow/color animate edilsin; height anlık değişsin. */
.rp-header {
    transition: background-color var(--dur, 300ms),
        box-shadow var(--dur, 300ms),
        color var(--dur, 300ms) !important;
}

/* P-03: 3D container anatomy — will-change abuse (6 face + wrapper = 7 layer).
   Sadece wrapper'da will-change tut; face'ler zaten compose layer'a girer. */
.rp-bx3d__face {
    will-change: auto !important;
}

/* P-04: gap transition'ları layout thrashing yapıyordu.
   Tüm gap transition'larını kaldır — yerine icon translate kullanırız. */
.rp-card,
.rp-card__link,
.rp-card__cta,
.rp-product-card__link,
.rp-hero-slider__link,
.rp-btn,
.rp-bx3d__panel-cta {
    transition-property: transform, box-shadow, background-color, color, opacity !important;
}

/* Hover'da ikon hareketi için */
.rp-card:hover i.ri-arrow-right-line,
.rp-card:hover i.ri-arrow-right-s-line,
.rp-card__link:hover i,
.rp-btn:hover i.ri-arrow-right-line,
.rp-hero-slider__link:hover i {
    transform: translateX(4px);
}

i.ri-arrow-right-line,
i.ri-arrow-right-s-line {
    transition: transform var(--dur-fast, 150ms) ease-out;
    display: inline-block;
}

/* ──────────────────────────────────────────────────────────────
   FAZ 1D — Accessibility + skip-link + reduced-motion (2026-05-17)
   ────────────────────────────────────────────────────────────── */

/* A-02: Skip-to-content link — klavye kullanıcısı için. Visually-hidden,
   focus alınca görünür hale gelir. Header'dan ÖNCE, ilk fokus hedefi olur. */
.rp-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px 18px;
    background: #00b294;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transform: translateY(-110%);
    transition: transform 150ms ease-out;
    z-index: 9999;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.rp-skip-link:focus {
    transform: translateY(0);
    outline-color: #fff;
}

/* A-01: prefers-reduced-motion — WCAG 2.3.3. Kullanıcı sistem ayarıyla hareket
   azaltma istemişse SplitText, reveal, 3D scroll, infinite keyframe'leri kapat. */


/* ──────────────────────────────────────────────────────────────
   FAZ 2A — Motion polish (2026-05-17)
   ────────────────────────────────────────────────────────────── */

/* M-01: Hero slider — aktif slide background image'a kenburns zoom-out.
   prefers-reduced-motion'da otomatik kapanır (yukarıdaki blok her tip transformu sıfırlıyor). */

@keyframes rp-kenburns {
    from {
        transform: scale(1.07) translateX(-0.6%);
    }

    to {
        transform: scale(1.0) translateX(0);
    }
}

/* M-04: Counter suffix (+, MWh, GWh) — sayı animasyonu sırasında fade-in.
   data-rp-counter elementine bitişik span'lere geç doğan opacity. */
.rp-trust__value span:not([data-rp-counter]),
.rp-detail-keyspecs__val span:not([data-rp-counter]) {
    opacity: 0;
    transition: opacity 600ms ease-out 1100ms;
    /* counter ~1500ms; suffix son 400ms'de açılır */
}

.rp-trust__item.is-visible .rp-trust__value span:not([data-rp-counter]),
.rp-trust__value.is-counted span:not([data-rp-counter]) {
    opacity: 1;
}

/* M-05: 3D container — mobile/tablet rotation kapalı.
   PRODUCTION BUG FIX (2026-05-18): Bu blok eskiden 1024px sınırında `transform !important` ile
   inline JS transform'unu eziyordu. Yeni JS guard `≤1023px`'te rotation'ı durdurur ve box'ı
   initial pozisyonda bırakır. CSS sadece animation/transition'ı zorlayıcı sıfırlasın,
   transform'u JS belirlesin. */


/* ──────────────────────────────────────────────────────────────
   FAZ 2B — KPI Hero Counter Display Upgrade (F-05)
   "5 GWh / 500 MWh / 400+ / 250+" rakamlarına Apple-grade ağırlık.
   ────────────────────────────────────────────────────────────── */

.rp-trust {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    background:
        linear-gradient(180deg, #fafafa 0%, #ffffff 60%) !important;
}

.rp-trust__value {
    font-size: clamp(2.75rem, 4vw + 0.5rem, 4.75rem) !important;
    letter-spacing: -0.05em !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: baseline;
    gap: 4px;
}

.rp-trust__value>span[data-rp-counter] {
    background: linear-gradient(180deg, #0f172a 0%, #1f2937 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.rp-trust__value>span:not([data-rp-counter]) {
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #00b294;
    -webkit-text-fill-color: #00b294;
}

.rp-trust__item {
    padding: 24px 28px !important;
}

.rp-trust__item::before {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background: #00b294;
    border-radius: 2px;
    margin: 0 auto 18px;
    transition: width 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-trust__item.is-visible::before,
.rp-trust__item:hover::before {
    width: 32px;
}

.rp-trust__label {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    margin-top: 20px !important;
    color: #6b7280 !important;
}


/* ──────────────────────────────────────────────────────────────
   FAZ 2C — Sticky CTA bar (F-01)
   ────────────────────────────────────────────────────────────── */

.rp-sticky-cta {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(120%);
    z-index: 9990;
    max-width: 720px;
    width: calc(100% - 32px);
    background: #0f172a;
    color: #fff;
    border-radius: 999px;
    padding: 10px 12px 10px 22px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms;
    opacity: 0;
    pointer-events: none;
}

.rp-sticky-cta.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.rp-sticky-cta__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 500;
}

.rp-sticky-cta__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.92);
}

.rp-sticky-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #00b294;
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 200ms, transform 200ms;
}

.rp-sticky-cta__btn:hover {
    background: #007a52;
    transform: translateY(-1px);
}

.rp-sticky-cta__btn i {
    transition: transform 200ms;
}

.rp-sticky-cta__btn:hover i {
    transform: translateX(4px);
}

.rp-sticky-cta__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 50%;
    transition: color 180ms, background 180ms;
}

.rp-sticky-cta__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}



/* ──────────────────────────────────────────────────────────────
   FAZ 2D — Language auto-suggest banner (F-07)
   ────────────────────────────────────────────────────────────── */

.rp-lang-suggest {
    position: relative;
    background: linear-gradient(90deg, #00b294 0%, #007a52 100%);
    color: #fff;
    font-size: 13.5px;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 320ms ease-out;
    z-index: 1000;
}

.rp-lang-suggest.is-visible {
    max-height: 80px;
}

.rp-lang-suggest__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    max-width: 1440px;
    margin: 0 auto;
}

.rp-lang-suggest__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.92);
}

.rp-lang-suggest__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 200ms, transform 200ms;
}

.rp-lang-suggest__cta:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.rp-lang-suggest__cta i {
    transition: transform 200ms;
}

.rp-lang-suggest__cta:hover i {
    transform: translateX(3px);
}

.rp-lang-suggest__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 50%;
}

.rp-lang-suggest__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}


/* ──────────────────────────────────────────────────────────────
   FAZ 2F — Compliance / Standards ticker (F-02)
   ────────────────────────────────────────────────────────────── */

.rp-ticker {
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 18px 0;
    overflow: hidden;
}

.rp-ticker__viewport {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg,
            transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
            transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.rp-ticker__track {
    display: flex;
    align-items: center;
    gap: 36px;
    white-space: nowrap;
    width: max-content;
    animation: rp-ticker-scroll 48s linear infinite;
}

.rp-ticker:hover .rp-ticker__track {
    animation-play-state: paused;
}

.rp-ticker__item {
    font-family: var(--rp-font-mono, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.rp-ticker__sep {
    color: #00b294;
    font-size: 14px;
    line-height: 1;
}

@keyframes rp-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}



/* ──────────────────────────────────────────────────────────────
   FAZ 3A — Site Search Modal (F-10) — Cmd/Ctrl+K
   ────────────────────────────────────────────────────────────── */

.rp-search {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 88px;
}

.rp-search.is-open {
    display: flex;
}

.rp-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: rp-search-fade 200ms ease-out;
}

.rp-search__panel {
    position: relative;
    width: min(680px, calc(100vw - 32px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: rp-search-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rp-search-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rp-search-pop {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rp-search__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f3;
}

.rp-search__icon {
    font-size: 20px;
    color: #94a3b8;
}

.rp-search__input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: #0f172a;
    font-family: inherit;
    padding: 0;
}

.rp-search__input::placeholder {
    color: #94a3b8;
}

.rp-search__kbd,
.rp-search__footer kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.rp-search__results {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    max-height: 440px;
    overflow-y: auto;
}

.rp-search__result {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 22px;
    cursor: pointer;
    transition: background 120ms;
}

.rp-search__result.is-selected,
.rp-search__result:hover {
    background: rgba(0, 168, 120, 0.06);
}

.rp-search__cat {
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00b294;
    font-weight: 600;
}

.rp-search__title {
    font-size: 14.5px;
    font-weight: 500;
    color: #0f172a;
}

.rp-search__path {
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: #94a3b8;
}

.rp-search__arrow {
    color: #cbd5e1;
    font-size: 16px;
    transition: transform 180ms, color 180ms;
}

.rp-search__result.is-selected .rp-search__arrow,
.rp-search__result:hover .rp-search__arrow {
    color: #00b294;
    transform: translateX(2px);
}

.rp-search__empty {
    list-style: none;
    padding: 24px 22px;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.rp-search__footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 11px 22px;
    border-top: 1px solid #eef0f3;
    font-size: 12px;
    color: #94a3b8;
    background: #fafbfc;
}

body.rp-search-open {
    overflow: hidden;
}

/* Header search button */
.rp-header__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 0;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    transition: background 180ms;
    font-size: 18px;
    margin: 0 4px;
}

.rp-header__search-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body[data-eco-mode] .rp-header__search-btn {
    display: none;
}



/* ──────────────────────────────────────────────────────────────
   FAZ 3B — Dark Mode (F-14)
   Token override + component-specific tweaks. data-theme="dark" html'e set.
   ────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
    --rp-bg: #05070A;
    --rp-surface: #0D1117;
    --rp-surface-2: #161B22;
    --rp-surface-3: #21262D;
    --rp-text: #F8FAFC;
    --rp-text-muted: #9CA3AF;
    --rp-text-dim: #6B7280;
    --rp-text-invert: #0F172A;
    --rp-border: rgba(255, 255, 255, 0.08);
    --rp-border-strong: rgba(255, 255, 255, 0.18);
    --rp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
    --rp-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.60);
    color-scheme: dark;
}

:root[data-theme="dark"] body {
    background: var(--rp-bg);
    color: var(--rp-text);
}

:root[data-theme="dark"] .rp-header {
    background: rgba(13, 17, 23, 0.78) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .rp-header.is-scrolled,
:root[data-theme="dark"] .rp-header--scrolled {
    background: rgba(13, 17, 23, 0.94) !important;
}

:root[data-theme="dark"] .rp-header a:not(.rp-btn),
:root[data-theme="dark"] .rp-nav__link {
    color: #E5E7EB !important;
}

:root[data-theme="dark"] .rp-header a:not(.rp-btn):hover {
    color: #34D399 !important;
}

:root[data-theme="dark"] .rp-trust,
:root[data-theme="dark"] .rp-ticker {
    background: linear-gradient(180deg, #0D1117 0%, #05070A 100%) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

:root[data-theme="dark"] .rp-trust__value>span[data-rp-counter] {
    background: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

:root[data-theme="dark"] .rp-trust__label,
:root[data-theme="dark"] .rp-ticker__item {
    color: #94A3B8 !important;
}

:root[data-theme="dark"] .rp-card,
:root[data-theme="dark"] .rp-product-card,
:root[data-theme="dark"] .rp-cert-row,
:root[data-theme="dark"] .rp-news__card,
:root[data-theme="dark"] .rp-tech-pillar {
    background: var(--rp-surface) !important;
    border-color: var(--rp-border) !important;
    color: var(--rp-text) !important;
}

:root[data-theme="dark"] .rp-card:hover,
:root[data-theme="dark"] .rp-product-card:hover {
    background: var(--rp-surface-2) !important;
    border-color: var(--rp-border-strong) !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4 {
    color: var(--rp-text);
}

:root[data-theme="dark"] .rp-text-primary,
:root[data-theme="dark"] [class*="text-primary"] {
    color: #34D399 !important;
}

:root[data-theme="dark"] .rp-footer {
    background: #02050A !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
    color: #94A3B8;
}

:root[data-theme="dark"] .rp-footer a {
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-search__panel {
    background: #161B22;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .rp-search__input {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-search__title {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-search__head,
:root[data-theme="dark"] .rp-search__footer {
    border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .rp-search__footer {
    background: #0D1117;
    color: #6B7280;
}

:root[data-theme="dark"] .rp-search__kbd,
:root[data-theme="dark"] .rp-search__footer kbd {
    background: #21262D;
    border-color: rgba(255, 255, 255, 0.1);
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-cert-logos>* {
    background: var(--rp-surface) !important;
    border-color: var(--rp-border) !important;
}

:root[data-theme="dark"] .rp-page-hero {
    background-blend-mode: multiply;
}

:root[data-theme="dark"] .rp-sticky-cta {
    background: #161B22;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--rp-surface) !important;
    color: var(--rp-text) !important;
    border-color: var(--rp-border) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--rp-text-dim);
}

/* Theme toggle button (header) — site.js inject edecek */
.rp-theme-toggle {
    /* Dark mode butonu DEVRE DIŞI (kullanıcı isteği, 2026-06-19).
       JS zaten enjekte etmiyor; bu kural önbellekten gelen olası butonu da gizler. */
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 0;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    transition: background 180ms;
    font-size: 17px;
    margin: 0 2px;
}

.rp-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] .rp-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

body[data-eco-mode] .rp-theme-toggle {
    display: none;
}

/* ──────────────────────────────────────────────────────────────
   FAZ 3C — Project deployment map (F-12)
   ────────────────────────────────────────────────────────────── */

.rp-deploy-map-section {
    background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
}

.rp-deploy-map {
    position: relative;
    margin-top: 48px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 28px;
    overflow: hidden;
}

.rp-deploy-map__svg {
    width: 100%;
    height: auto;
    display: block;
}

.rp-deploy-map__pin circle {
    transition: r 200ms;
    cursor: pointer;
}

.rp-deploy-map__pin:hover circle {
    filter: drop-shadow(0 0 6px rgba(0, 168, 120, 0.45));
}

.rp-deploy-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    font-size: 13px;
    color: #475569;
}

.rp-deploy-map__legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rp-deploy-map__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00b294;
}

.rp-deploy-map__dot--hq {
    width: 14px;
    height: 14px;
    background: #00b294;
    box-shadow: 0 0 0 4px rgba(0, 168, 120, 0.18);
}

.rp-deploy-map__dot--major {
    width: 12px;
    height: 12px;
    background: #00b294;
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.22);
}

:root[data-theme="dark"] .rp-deploy-map-section {
    background: linear-gradient(180deg, #05070A 0%, #0D1117 100%);
}

:root[data-theme="dark"] .rp-deploy-map {
    background: linear-gradient(180deg, #0D1117 0%, #161B22 100%);
}

:root[data-theme="dark"] .rp-deploy-map__svg path {
    fill: #1F2937;
    opacity: 0.8;
}

:root[data-theme="dark"] .rp-deploy-map__legend {
    color: #9CA3AF;
}



/* ──────────────────────────────────────────────────────────────
   FAZ 3D — Cursor follower (M-07) + Exit-intent modal (F-15)
   ────────────────────────────────────────────────────────────── */

.rp-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1.5px solid #00b294;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 200ms, width 200ms, height 200ms, background 200ms;
    mix-blend-mode: difference;
}

.rp-cursor.is-visible {
    opacity: 0.85;
}

.rp-cursor.is-hover {
    width: 44px;
    height: 44px;
    background: rgba(0, 168, 120, 0.15);
}



/* Exit-intent modal */
.rp-exit-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms, visibility 220ms;
}

.rp-exit-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.rp-exit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.rp-exit-modal__card {
    position: relative;
    width: min(480px, calc(100vw - 32px));
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transform: translateY(20px) scale(0.97);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-exit-modal.is-open .rp-exit-modal__card {
    transform: translateY(0) scale(1);
}

.rp-exit-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    border-radius: 50%;
    cursor: pointer;
    transition: background 180ms, color 180ms;
}

.rp-exit-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.rp-exit-modal__title {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    color: #0f172a;
    margin: 10px 0 12px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.rp-exit-modal__text {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 22px;
}

.rp-exit-modal__form {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.rp-exit-modal__input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 14px;
    outline: none;
    transition: border-color 200ms, box-shadow 200ms;
    font-family: inherit;
}

.rp-exit-modal__input:focus {
    border-color: #00b294;
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.12);
}

.rp-exit-modal__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #00b294;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms, transform 200ms;
    font-family: inherit;
}

.rp-exit-modal__btn:hover {
    background: #007a52;
    transform: translateY(-1px);
}

.rp-exit-modal__btn:disabled {
    background: #94a3b8;
    cursor: default;
    transform: none;
}

.rp-exit-modal__note {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

:root[data-theme="dark"] .rp-exit-modal__card {
    background: #161B22;
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-exit-modal__title {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-exit-modal__text {
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-exit-modal__input {
    background: #0D1117 !important;
    border-color: #30363D !important;
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-exit-modal__close {
    color: #6B7280;
}

:root[data-theme="dark"] .rp-exit-modal__close:hover {
    background: #21262D;
    color: #F8FAFC;
}


/* ──────────────────────────────────────────────────────────────
   FAZ 4A — Spec Comparison Table (F-03) — products page
   ────────────────────────────────────────────────────────────── */

.rp-spec-compare-section {
    background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
}

.rp-spec-compare {
    margin-top: 40px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.rp-spec-compare__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rp-spec-compare__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.rp-spec-compare__table th,
.rp-spec-compare__table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
    font-size: 14px;
    color: #334155;
    vertical-align: top;
}

.rp-spec-compare__table thead th {
    background: #fafbfc;
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.rp-spec-compare__cat {
    display: block;
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00b294;
    font-weight: 600;
    margin-bottom: 4px;
}

.rp-spec-compare__table tbody th[scope="row"] {
    font-weight: 600;
    color: #0f172a;
    background: #fafbfc;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
}

.rp-spec-compare__th--stuck {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fafbfc !important;
}

.rp-spec-compare__table tbody tr:hover td,
.rp-spec-compare__table tbody tr:hover th[scope="row"] {
    background: rgba(0, 168, 120, 0.04);
}

.rp-spec-compare__table tbody tr:last-child th,
.rp-spec-compare__table tbody tr:last-child td {
    border-bottom: 0;
}

.rp-spec-compare__cta-row td,
.rp-spec-compare__cta-row th[scope="row"] {
    background: rgba(0, 168, 120, 0.03);
}

.rp-spec-compare__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #00b294;
    font-weight: 600;
    text-decoration: none;
    font-size: 13.5px;
    transition: color 200ms;
}

.rp-spec-compare__cta i {
    transition: transform 200ms;
}

.rp-spec-compare__cta:hover {
    color: #007a52;
}

.rp-spec-compare__cta:hover i {
    transform: translateX(3px);
}

.rp-spec-compare__note {
    font-size: 13px;
    color: #64748b;
    margin: 20px 0 0;
    text-align: center;
}

.rp-spec-compare__note a {
    color: #00b294;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:root[data-theme="dark"] .rp-spec-compare-section {
    background: linear-gradient(180deg, #05070A 0%, #0D1117 100%);
}

:root[data-theme="dark"] .rp-spec-compare {
    background: var(--rp-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .rp-spec-compare__table th,
:root[data-theme="dark"] .rp-spec-compare__table td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-spec-compare__table thead th,
:root[data-theme="dark"] .rp-spec-compare__table tbody th[scope="row"],
:root[data-theme="dark"] .rp-spec-compare__th--stuck {
    background: var(--rp-surface-2) !important;
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-spec-compare__cat {
    color: #34D399;
}

:root[data-theme="dark"] .rp-spec-compare__cta {
    color: #34D399;
}



/* ──────────────────────────────────────────────────────────────
   FAZ 4B — FAQ accordion polish (F-06) — JSON-LD schema JS-injected
   ────────────────────────────────────────────────────────────── */

.rp-faq-group {
    margin-bottom: 56px;
}

.rp-faq-group__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.rp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 200ms, box-shadow 200ms;
}

.rp-faq-item:hover {
    border-color: #cbd5e1;
}

.rp-faq-item[open] {
    border-color: #00b294;
    box-shadow: 0 4px 12px rgba(0, 168, 120, 0.08);
}

.rp-faq-item__q {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 600;
    color: #0f172a;
    user-select: none;
}

.rp-faq-item__q::-webkit-details-marker,
.rp-faq-item__q::marker {
    display: none;
}

.rp-faq-item__q-text {
    flex: 1;
}

.rp-faq-item__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 120, 0.08);
    color: #00b294;
    border-radius: 50%;
    font-size: 16px;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms;
    flex-shrink: 0;
}

.rp-faq-item[open] .rp-faq-item__icon {
    transform: rotate(45deg);
    background: #00b294;
    color: #fff;
}

.rp-faq-item__a {
    padding: 0 22px 18px;
    color: #475569;
    font-size: 14.5px;
    line-height: 1.6;
}

.rp-faq-item__a a {
    color: #00b294;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:root[data-theme="dark"] .rp-faq-group__title {
    color: #F8FAFC;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .rp-faq-item {
    background: var(--rp-surface);
    border-color: var(--rp-border);
}

:root[data-theme="dark"] .rp-faq-item:hover {
    border-color: var(--rp-border-strong);
}

:root[data-theme="dark"] .rp-faq-item[open] {
    border-color: #34D399;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.10);
}

:root[data-theme="dark"] .rp-faq-item__q {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-faq-item__a {
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-faq-item__icon {
    background: rgba(52, 211, 153, 0.12);
    color: #34D399;
}

:root[data-theme="dark"] .rp-faq-item[open] .rp-faq-item__icon {
    background: #34D399;
    color: #0F172A;
}



/* ──────────────────────────────────────────────────────────────
   FAZ 4C — BESS Sizing Calculator (F-09) — flagship
   ────────────────────────────────────────────────────────────── */

/* Floating action button (sol alt köşe) */
.rp-sizer-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9985;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px 12px 14px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms;
    font-family: inherit;
}

.rp-sizer-fab i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #00b294;
    border-radius: 50%;
    font-size: 16px;
}

.rp-sizer-fab:hover {
    transform: translateY(-2px);
    background: #1f2937;
}

body[data-eco-mode] .rp-sizer-fab,
body.rp-sizer-open .rp-sizer-fab {
    display: none;
}


/* Modal */
.rp-sizer {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms, visibility 240ms;
    padding: 24px;
}

.rp-sizer.is-open {
    opacity: 1;
    visibility: visible;
}

.rp-sizer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rp-sizer__panel {
    position: relative;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow-y: auto;
    transform: translateY(20px) scale(0.97);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rp-sizer.is-open .rp-sizer__panel {
    transform: translateY(0) scale(1);
}

.rp-sizer__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    background: #f1f5f9;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #475569;
    border-radius: 50%;
    cursor: pointer;
    transition: background 180ms, color 180ms;
    z-index: 2;
}

.rp-sizer__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.rp-sizer__head {
    padding: 40px 40px 28px;
    border-bottom: 1px solid #eef0f3;
}

.rp-sizer__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #0f172a;
    margin: 10px 0 10px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.rp-sizer__sub {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 600px;
    margin: 0;
}

.rp-sizer__body {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
}

.rp-sizer__inputs {
    padding: 36px 40px;
    border-right: 1px solid #eef0f3;
}

.rp-sizer__field {
    margin-bottom: 28px;
}

.rp-sizer__field:last-child {
    margin-bottom: 0;
}

.rp-sizer__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
}

.rp-sizer__hint {
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 14px;
    color: #00b294;
    font-weight: 600;
}

.rp-sizer__select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: #0f172a;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 200ms, box-shadow 200ms;
}

.rp-sizer__select:focus {
    border-color: #00b294;
    box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.12);
}

.rp-sizer__range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    outline: none;
    margin: 8px 0;
}

.rp-sizer__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #00b294;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 168, 120, 0.30);
    transition: transform 180ms;
}

.rp-sizer__range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.rp-sizer__range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #00b294;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.rp-sizer__range-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.rp-sizer__result {
    padding: 36px 40px;
    background: linear-gradient(180deg, #f8faf9 0%, #f1f5f4 100%);
}

.rp-sizer__rec {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px dashed #cbd5e1;
}

.rp-sizer__rec-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 4px 0 18px;
    letter-spacing: -0.01em;
}

.rp-sizer__rec-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin: 0 0 22px;
}

.rp-sizer__rec-specs>div {
    display: block;
}

.rp-sizer__rec-specs dt {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 3px;
}

.rp-sizer__rec-specs dd {
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.rp-sizer__rec .rp-btn {
    width: 100%;
    justify-content: center;
}

.rp-sizer__roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin: 14px 0 18px;
}

.rp-sizer__roi-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-sizer__roi-lbl {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 500;
}

.rp-sizer__roi-val {
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.rp-sizer__disclaimer {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 14px;
}

.rp-sizer__quote-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00b294;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.rp-sizer__quote-link i {
    transition: transform 200ms;
}

.rp-sizer__quote-link:hover i {
    transform: translateX(3px);
}

body.rp-sizer-open {
    overflow: hidden;
}

:root[data-theme="dark"] .rp-sizer__panel {
    background: #161B22;
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__head {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .rp-sizer__title {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__sub {
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-sizer__inputs {
    border-right-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .rp-sizer__label {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__hint {
    color: #34D399;
}

:root[data-theme="dark"] .rp-sizer__select {
    background: #0D1117;
    border-color: rgba(255, 255, 255, 0.1);
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__range {
    background: #21262D;
}

:root[data-theme="dark"] .rp-sizer__close {
    background: #21262D;
    color: #CBD5E1;
}

:root[data-theme="dark"] .rp-sizer__close:hover {
    background: #30363D;
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__result {
    background: linear-gradient(180deg, #0D1117 0%, #05070A 100%);
}

:root[data-theme="dark"] .rp-sizer__rec-title {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__rec-specs dt,
:root[data-theme="dark"] .rp-sizer__roi-lbl {
    color: #94A3B8;
}

:root[data-theme="dark"] .rp-sizer__rec-specs dd,
:root[data-theme="dark"] .rp-sizer__roi-val {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-sizer__quote-link {
    color: #34D399;
}



/* ──────────────────────────────────────────────────────────────
   FAZ 4D — Press teaser + In-the-press strip (F-13)
   ────────────────────────────────────────────────────────────── */

.rp-footer__press {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 32px;
    font-size: 13.5px;
}

.rp-footer__press-label {
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-right: 4px;
}

.rp-footer__press-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color 200ms, border-color 200ms;
}

.rp-footer__press-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.rp-footer__press-sep {
    color: rgba(255, 255, 255, 0.35);
}

.rp-in-press {
    background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
    padding: 56px 0;
}

.rp-in-press__head {
    margin-bottom: 28px;
}

.rp-in-press__title {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 8px 0 0;
}

.rp-in-press__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.rp-in-press__list li {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    transition: border-color 200ms, transform 200ms;
}

.rp-in-press__list li:hover {
    border-color: #00b294;
    transform: translateY(-2px);
}

.rp-in-press__src {
    display: block;
    font-family: var(--rp-font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00b294;
    font-weight: 600;
    margin-bottom: 6px;
}

.rp-in-press__hl {
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    line-height: 1.4;
}

.rp-in-press__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00b294;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.rp-in-press__cta i {
    transition: transform 200ms;
}

.rp-in-press__cta:hover i {
    transform: translateX(3px);
}

:root[data-theme="dark"] .rp-in-press {
    background: linear-gradient(180deg, #05070A 0%, #0D1117 100%);
}

:root[data-theme="dark"] .rp-in-press__title {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-in-press__list li {
    background: var(--rp-surface);
    border-color: var(--rp-border);
}

:root[data-theme="dark"] .rp-in-press__list li:hover {
    border-color: #34D399;
}

:root[data-theme="dark"] .rp-in-press__hl {
    color: #F8FAFC;
}

:root[data-theme="dark"] .rp-in-press__src,
:root[data-theme="dark"] .rp-in-press__cta {
    color: #34D399;
}


/* ════════════════════════════════════════════════════════════════════════════
   REAPBATTERY.COM REFRESH — 9 madde override (2026-05-18)
   Reference: kullanıcı isteği — reapbattery.com'un yenilenmiş versiyonu
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) CONTAINER biraz daha büyük ─────────────────────────────────────── */
:root {
    --rp-container-max: 1320px !important;
}

.rp-container,
[class*="rp-container"],
.rp-hero-slider .rp-container,
.rp-hero-slider__content>.rp-container {
    max-width: 1320px !important;
}

/* ── 2) HERO SLIDER yazı kısmı biraz daha aşağıda ──────────────────────── */
.rp-hero-slider__content {
    align-items: flex-end !important;
    padding-bottom: clamp(80px, 14vh, 160px) !important;
}

.rp-hero-slider__text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ── 3) HEADER — gloss/beyaz parlama YOK, sade transparent → düz beyaz ── */
.rp-header,
header.rp-header,
header[class*="rp-header"] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent;
    box-shadow: none !important;
    transition: background 220ms ease, border-color 220ms ease;
}

/* Home page hero üstünde — tamamen şeffaf, beyaz yazı (videonun karanlığı üzerinde) */
body[data-page="home"] .rp-header:not(.is-scrolled) {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

body[data-page="home"] .rp-header:not(.is-scrolled) a:not(.rp-btn) {
    color: #ffffff !important;
    text-shadow: none;
}

/* Scroll edildiğinde — sade düz beyaz, hairline border, parlama yok */
.rp-header.is-scrolled,
header.rp-header.is-scrolled {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ── 4) HERO VIDEO — pointer-events kapat ki swipe çalışsın ────────────── */
.rp-hero-slider__bg,
.rp-hero-slider__bg video,
.rp-hero-slider__bg img,
.rp-hero-slider__bg picture {
    pointer-events: none !important;
}

.rp-hero-slider__bg video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

.rp-hero-slider__swiper,
.rp-hero-slider .swiper,
.rp-hero-slider__slides {
    touch-action: pan-y !important;
}

/* Slide içeriği üstte kalsın, ama tıklama hala mümkün olsun */
.rp-hero-slider__content {
    position: relative;
    z-index: 3;
}

.rp-hero-slider__nav {
    z-index: 4;
}

/* ── 5) rp-TRUST daha aşağıda olmalı ───────────────────────────────────── */
.rp-trust,
section.rp-trust,
[data-vb-section="trust"] {
    margin-top: clamp(40px, 6vh, 80px) !important;
    padding-top: clamp(64px, 8vh, 96px) !important;
}

/* ── 6) rp-BX3D — scroll rotation + MOBİL TASARIM ──────────────────────── */
/* Sticky alanı daha kısa tut + scene daha belirgin */
.rp-bx3d__sticky {
    top: calc(var(--header-h) + 24px) !important;
    gap: 24px !important;
}

.rp-bx3d__scene {
    border-radius: 24px;
    background: #F5F5F7;
    height: 460px;
}

/* Bottom face (alt yüz) — reap.css'de tanımlı değil, burada ekle.
   Aynı boyutlar (W × D), rotateX(-90deg), translateZ(bh/2). */
.rp-bx3d__face--bottom {
    width: var(--bw);
    height: var(--bd);
    margin: calc(var(--bd) / -2) 0 0 calc(var(--bw) / -2);
    transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2));
}

/* Panel min-height — viewport'a göre adaptif clamp.
   Desktop (≥1280px): 75vh × 4 panel = 300vh → bol scroll, rotation belirgin
   Tablet (1024-1279px): 60vh × 4 = 240vh → kompakt ama hala scroll-driven
   Mobile (≤1024px): auto (yukarıda override edildi) — paneller kart gibi */

/* 1024-1279px arası min-height ayarı önceki
@keyframes rp-bx3d-mobile-spin {
  0%   { transform: rotateX(-12deg) rotateY(-22deg); }
  50%  { transform: rotateX(-12deg) rotateY(158deg); }
  100% { transform: rotateX(-12deg) rotateY(338deg); }
}


/* ── 7) PRODUCTS — mobil tasarım fix ───────────────────────────────────── */


/* ── 8) Background gradient → #F5F5F7 (sade, modern) ───────────────────── */
.rp-section--alt,
section.rp-section--alt,
.rp-bg-soft,
[class*="rp-section--alt"] {
    background: #F5F5F7 !important;
}

/* Önceki override'larda kalan #fafffd / #f1fbf6 / #f7faf9 vb. light gradient'leri zapla */
.rp-section--soft,
.rp-section--muted,
.rp-app-section--alt,
.rp-app-detail-section,
.rp-trust {
    background: #F5F5F7 !important;
}

/* Trust bg — düz beyaza yakın yerine yumuşak grafit */
section.rp-trust,
.rp-trust {
    background: #F5F5F7 !important;
}

/* Eski "background: #fafffd" inline kullanımları */
.rp-section--alt .rp-app-detail {
    background: #ffffff !important;
}

/* ── 9) Header navigation linkleri — gerçek hedeflere yönlendir ────────── */
/* (HTML tarafında href düzeltilecek — bu sadece interaktif menünün
   collapse açılırken default tıklama davranışını kırmadığını doğrular) */
.rp-nav__item .rp-nav__link[href="#"] {
    cursor: pointer;
}

/* Mega menu açıkken parent link click'i menu içeriğine gitsin */
.rp-nav__item:has(.rp-mega)>.rp-nav__link {
    pointer-events: auto;
}

/* ── X) Common — gradientleri tamamen tek tona indir (uyumluluk) ──────── */
.rp-mission,
.rp-mission--alt,
.rp-impact,
.rp-cta-soft,
.rp-news,
section.rp-news,
[data-vb-section="news"] {
    background: #F5F5F7 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE 6. ITERATION — agent ekibi raporlarına göre kritik fix'ler
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tech pillars 1024-1279px arası 2-col (4-col sıkışıklığını önle) ── */


/* ── Header hamburger threshold: 1024 → 1100 (1025-1100px navigation overflow risk) ── */


/* ── 4K (≥2200px) hero — sol kenarda kalmasın, container ortala + sub max-width genişlet ── */


/* ── Bx3d scene height clamp — desktop fixed 460 yerine viewport'a uyumlu ── */


/* ════════════════════════════════════════════════════════════════════════════
   HERO SLIDER NAV BUTTONS — production fix 2026-05-18
   Eski reap.css: opacity 0, hover ile 1 — butonlar görünmez, kullanıcı tıklayamıyor
   Yeni: her zaman görünür, hover'da daha belirgin
   ════════════════════════════════════════════════════════════════════════════ */
.rp-hero-slider__nav {
    opacity: 1 !important;
    background: #00b294 !important;
    border: 1.5px solid #00b294 !important;
    color: var(--hero-arrow-color, #fff) !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 5 !important;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* İSTEK 2: aktif slider noktası rengi — SiteSetting hero_dot_color (responsive.css'teki
   .rp-hero-dot.is-active !important olmadığı için burada !important ile ezilir). */
.rp-hero-dot.is-active {
    background: var(--hero-dot-color, #fff) !important;
}

.rp-hero-slider__nav:hover,
.rp-hero-slider__nav:focus-visible {
    background: #009880 !important;
    border-color: #009880 !important;
    opacity: 1 !important;
}

/* Hero slider metin overlay'i kaldırıldı — yalnızca görsel/video gösterilir
   (responsive.css min-width:1024 override'ını yenmek için yüksek özgüllük) */
.rp-hero-slider .rp-hero-slider__content,
.rp-hero-slider__slide .rp-hero-slider__content {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   QUALITY POLICY — yeniden tasarım (marka gradyanı + cam sertifika kartları)
   ═══════════════════════════════════════════════════════════════ */
.rp-quality {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 112px) 0;
    background: linear-gradient(135deg, #00b294 0%, #009078 52%, #00715d 100%);
    isolation: isolate;
}

.rp-quality::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -12%;
    width: 65%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    z-index: -1;
    pointer-events: none;
}

.rp-quality::after {
    content: "";
    position: absolute;
    bottom: -45%;
    left: -10%;
    width: 55%;
    height: 160%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
    z-index: -1;
    pointer-events: none;
}

.rp-quality__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.rp-quality__eyebrow {
    color: rgba(255, 255, 255, 0.82) !important;
}

.rp-quality__heading {
    color: #ffffff;
    margin: 0 0 clamp(16px, 1.6vw, 22px);
}

.rp-quality__accent {
    color: #c9f5ec;
}

.rp-quality__lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.72;
    max-width: 54ch;
    margin: 0 0 clamp(24px, 2.4vw, 32px);
}

.rp-quality__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--r-full, 999px);
    background: #ffffff;
    color: #00715d;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.rp-quality__cta i {
    font-size: 18px;
    transition: transform .25s ease;
}

.rp-quality__cta:hover {
    background: #eafaf6;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.rp-quality__cta:hover i {
    transform: translateX(4px);
}

.rp-quality__certs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.4vw, 18px);
}

.rp-quality__cert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(16px, 1.5vw, 20px);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.rp-quality__cert:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.rp-quality__cert-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #009078;
    font-size: 24px;
}

.rp-quality__cert-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.25;
}

.rp-quality__cert-body strong {
    color: #ffffff;
    font-size: clamp(15px, 1.05vw, 17px);
    font-weight: 800;
}

.rp-quality__cert-body span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12.5px;
}

@media (max-width: 920px) {
    .rp-quality__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 560px) {
    .rp-quality__certs {
        grid-template-columns: 1fr;
    }
}

.rp-hero-slider__nav:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-50%) scale(1.08);
}

.rp-hero-slider__nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* Mobile: küçük ama görünür kalsın (display: none yerine) */


/* ================================================================
   --- 28. Apple-style header refinement (2026-05-20) -------------
   Scope: desktop only (≥1024px). Mobile menu untouched.
   Goals: flatter nav (no pills), tighter height, smaller logo,
          no green CTA button, minimal ECO + lang, refined typography.
   ================================================================ */


/* ================================================================
   --- 29. bx3d tek detay butonu (2026-05-22) ---------------------
   Panel başına link kaldırıldı; 3D modelin altında tek buton var,
   aktif ürünün detay sayfasına JS ile yönlenir.
   ================================================================ */
.rp-bx3d__detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    align-self: flex-start;
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--r-full, 999px);
    background: var(--rp-primary, #00b294);
    color: #fff;
    transition: background 200ms ease, transform 200ms ease;
}

.rp-bx3d__detail-btn:hover {
    background: var(--rp-accent-hover, #007a57);
    transform: translateY(-1px);
}

.rp-bx3d__detail-btn i {
    font-size: 18px;
}

/* eski panel-içi CTA tamamen gizli (HTML'den de kaldırıldı, güvenlik için) */
.rp-bx3d__panel-cta {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FRONTEND ECO/A11Y AUDIT — 2026-05-30
   Bu blok en sonda → en yüksek cascade önceliği. Yalnızca ekleyici (additive)
   ve savunmacı kurallar; normal kullanıcı için görsel regresyon yok.
   1) Header logo CLS koruması  2) Dokunma hedefi (tap target)
   3) Windows Yüksek Kontrast (forced-colors)  4) Yazdırma (print) stili
   ════════════════════════════════════════════════════════════════════════════ */

/* 1) CLS — header logosu yüklenmeden önce yatay yerini ayırsın (550×173 gerçek oran).
   height zaten sabit (28px); aspect-ratio yatay reflow'u (CLS) sıfırlar. */
.rp-header__logo img {
    aspect-ratio: 550 / 173;
}

/* 2) Dokunma hedefi — ikon butonları yalnızca mobilde (<1024) görünür; 38→40px.
   320px header genişliğinde güvenli (taşma yok), AAA 44px'e bir adım yaklaşır. */
.rp-theme-toggle,
.rp-header__search-btn {
    width: 40px;
    height: 40px;
}

/* 3) Windows Yüksek Kontrast Modu (forced-colors). Sistem renk paleti devreye
   girince dolgu-tabanlı (border:0) ikon butonları ve odak halkaları kaybolur;
   sınır + odak görünürlüğünü geri kazandırırız. Layout kaymaması için kartlarda
   border yerine outline kullanılır. */


/* 4) Yazdırma — ekran kromu (header/footer/çerez/scroll-top/eco kutusu) gizlenir,
   beyaz zemin + siyah metin, gölge yok. Tek sayfa raporlar/teklifler için temiz çıktı. */


/* ════════════════════════════════════════════════════════════════════════════
   MOBİL DÜZELTMELER — 2026-05-30
   ════════════════════════════════════════════════════════════════════════════ */

/* bx3d (container tipi) 3D kutu sahnesi — aşırı boşluk düzeltmesi.
   Mevcut `.rp-bx3d__scene { height: clamp(320px,45vh,460px) !important }` kuralı
   mobilde sahneyi ~380px yapıyordu; içindeki kutu ~124px olduğundan ~256px boş
   alan kalıyordu. Sahneyi ürüne göre çerçeveliyoruz. Cabinet/wallmount (dikey
   ürün) instance'ları hariç tutuldu — onların kendi yükseklikleri korunur. */

/* ════════════════════════════════════════════════════════════════════════════
   AI VIEW — "AI" header toggle + side panel
   Shows the current page's ai-index.json data (summary, FAQ, topics, related)
   in a clean human-readable panel. NOT cloaking — same content, machine-readable
   presentation. JS: app.js (rpAiView IIFE).
   ════════════════════════════════════════════════════════════════════════════ */
.rp-aiview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 9999px;
    background: #fff;
    color: #00b294;
    font: 600 13px/1 inherit;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap
}

.rp-aiview-toggle:hover,
.rp-aiview-toggle[aria-pressed="true"] {
    background: #00b294;
    color: #fff;
    border-color: #00b294
}

.rp-aiview-toggle i {
    font-size: 16px;
    line-height: 1
}

/* transparent/dark header support */
.rp-header:not(.is-scrolled) .rp-aiview-toggle {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .10);
    color: #fff
}

.rp-header:not(.is-scrolled) .rp-aiview-toggle:hover {
    background: #fff;
    color: #00b294
}

.rp-aiview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 17, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 4000
}

.rp-aiview-overlay.is-open {
    opacity: 1;
    visibility: visible
}

.rp-aiview-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(460px, 92vw);
    max-width: 100vw;
    background: #fff;
    box-shadow: -12px 0 44px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
    z-index: 4001;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.rp-aiview-panel.is-open {
    transform: none
}

.rp-aiview-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef0f2;
    flex: 0 0 auto
}

.rp-aiview-panel__head h2 {
    margin: 0;
    font: 700 16px/1.3 inherit;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px
}

.rp-aiview-panel__head h2 i {
    color: #00b294
}

.rp-aiview__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #00b294;
    background: rgba(0, 178, 148, .12);
    padding: 3px 8px;
    border-radius: 9999px
}

.rp-aiview-close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #5a6973;
    padding: 2px 6px;
    border-radius: 8px
}

.rp-aiview-close:hover {
    background: #f1f3f5;
    color: #0f172a
}

.rp-aiview-panel__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto
}

.rp-aiview__title {
    font: 700 20px/1.3 inherit;
    color: #0f172a;
    margin: 0 0 6px
}

.rp-aiview__url {
    font-size: 12px;
    color: #8a949c;
    word-break: break-all;
    margin: 0 0 16px
}

.rp-aiview__short {
    font-size: 15px;
    line-height: 1.55;
    color: #0f172a;
    background: #f1faf8;
    border-left: 3px solid #00b294;
    padding: 12px 14px;
    border-radius: 0 10px 10px 0;
    margin: 0
}

.rp-aiview__h {
    font: 700 12px/1 inherit;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a949c;
    margin: 22px 0 10px
}

.rp-aiview__summary {
    font-size: 14px;
    line-height: 1.6;
    color: #3a4750;
    margin: 0
}

.rp-aiview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0
}

.rp-aiview__chip {
    font-size: 12px;
    color: #3a4750;
    background: #f1f3f5;
    border-radius: 9999px;
    padding: 5px 11px
}

.rp-aiview__faq details {
    border-bottom: 1px solid #eef0f2
}

.rp-aiview__faq details:first-child {
    border-top: 1px solid #eef0f2
}

.rp-aiview__faq summary {
    cursor: pointer;
    font: 600 14px/1.4 inherit;
    color: #0f172a;
    padding: 12px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px
}

.rp-aiview__faq summary::-webkit-details-marker {
    display: none
}

.rp-aiview__faq summary::after {
    content: '+';
    color: #00b294;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2
}

.rp-aiview__faq details[open] summary::after {
    content: '\2013'
}

.rp-aiview__faq p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #3a4750
}

.rp-aiview__related {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.rp-aiview__related a {
    font-size: 13px;
    color: #00b294;
    text-decoration: none;
    border: 1px solid rgba(0, 178, 148, .3);
    border-radius: 8px;
    padding: 6px 11px
}

.rp-aiview__related a:hover {
    background: rgba(0, 178, 148, .08)
}

.rp-aiview-panel__foot {
    padding: 14px 20px;
    border-top: 1px solid #eef0f2;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex: 0 0 auto
}

.rp-aiview-panel__foot a {
    font-size: 12px;
    color: #5a6973;
    text-decoration: none
}

.rp-aiview-panel__foot a:hover {
    color: #00b294;
    text-decoration: underline
}

@media (max-width:768px) {
    .rp-aiview-toggle__label {
        display: none
    }

    .rp-aiview-toggle {
        padding: 0 9px;
        gap: 0
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE READABILITY FIXES (2026-06-16)
   Koyu modda bileşen arka planları koyuya döndü ama bazı metinler sabit-koyu
   renkte kalıp okunmuyordu ("koyu-üstü-koyu"). Bu blok o metinleri koyu temada
   okunur ışık tonlara çevirir. Yalnızca koyu-zeminde kalan bileşenleri hedefler;
   opak-beyaz yüzeyler (3D kutu yüzleri, beyaz rozet/buton) bilinçli dışarıda. */
/* Başlıklar / kart-bölüm başlıkları → açık */
:root[data-theme="dark"] :is(.rp-display-xl, .rp-display-lg, .rp-display-md, .rp-display-sm,
    .rp-section__title, .rp-h1, .rp-h2, .rp-h3,
    .rp-card__title, .rp-product-card__title, .rp-possibility-card__title,
    .rp-tech-pillar__title, .rp-split-word, .rp-timeline__item,
    .rp-news__title, .rp-case__title, .rp-news__desc, .rp-case__desc, .rp-timeline__title,
    .rp-tech-row__title) {
    color: #eef2f5 !important;
}

/* Geniş güvenlik kuralı: koyu modda içerik başlıkları açık olsun. Beyaz "elevated"
   kartlardaki (3D kutu, spec-card) başlıklar HARİÇ — onlar beyaz kalıp koyu metin
   ister. Tek tek denetlenmeyen sayfaları da kapsar. */
:root[data-theme="dark"] main :is(h1, h2, h3, h4):not(.rp-detail__spec-title) {
    color: #eef2f5 !important;
}

:root[data-theme="dark"] :is(.rp-bx3d__face, .rp-bx3d__scene) :is(h1, h2, h3, h4) {
    color: #0b1016 !important;
}

/* Etiket / eyebrow / meta / küçük ikincil metin → açık-gri */
:root[data-theme="dark"] :is(.rp-eyebrow, .rp-trust__label, .rp-product-card__cap, .rp-timeline__year,
    .rp-quality__cert-body, .rp-news__cat-overlay, .rp-card__meta,
    .rp-detail-keyspecs__key, .rp-detail-keyspecs__val) {
    color: #aab4bd !important;
}

/* Marka-yeşili vurgular / CTA → koyuda okunur açık yeşil */
:root[data-theme="dark"] :is(.rp-text-primary, .rp-news__cta, .rp-spec-compare__cta) {
    color: #2fd4b8 !important;
}

/* Opak-beyaz yüzeyler (3D ürün kutusu yüzleri/sahne, "Member of YEO" rozeti):
   bilinçli beyaz kalır → üzerlerindeki metin KOYU tutulur (ışık yapılmaz). */
:root[data-theme="dark"] :is(.rp-bx3d__face, .rp-bx3d__scene) :is(span, a, strong, .rp-badge, .rp-bx3d__detail-btn),
:root[data-theme="dark"] .rp-bx3d__detail-btn,
:root[data-theme="dark"] .rp-footer__member-yeo {
    color: #0b1016 !important;
}

/* KÖK DÜZELTME: dark theme'in atladığı açık-zemin yüzeyleri koyulaştır
   (aksi halde içlerindeki metin "açık-üstü-açık" görünmez kalıyordu).
   .rp-section--alt tam-genişlik açık-gri bölüm; .rp-news/.rp-case beyaz kartlar. */
:root[data-theme="dark"] .rp-section--alt {
    background: #0b0f15 !important;
}

:root[data-theme="dark"] :is(.rp-news, .rp-case),
:root[data-theme="dark"] .rp-detail__spec-card,
:root[data-theme="dark"] .rp-detail-keyspecs__item {
    background: #10161d !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

:root[data-theme="dark"] .rp-news__cat-overlay {
    background: rgba(0, 178, 148, .20) !important;
    color: #bdf3e9 !important;
}

/* ════════════════════════════════════════════════════════════════
   SOLUTION-DETAIL TASARIM İYİLEŞTİRME — 2026-06-17
   Hedef: solutions detail pages (4 ürün detay sayfası, ortak şablon).
   Tema-güvenli: renkler token; dark-mode mevcut !important kuralları korur.
   ════════════════════════════════════════════════════════════════ */

/* 1) SPEC GRID: short action card vertically centered against tall spec card */
.rp-detail__spec-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
}

/* 2) SAĞ AKSİYON KARTI (Certificates + CTA) — güçlü yüzey, marka vurgulu üst
      kenar, iç boşluk. :last-child = sağdaki kart. */
.rp-detail__spec-grid>.rp-detail__spec-card:last-child {
    padding: 32px;
    border-top: 3px solid #00b294;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.07);
}

.rp-detail__spec-grid>.rp-detail__spec-card:last-child .rp-detail__spec-actions {
    border-top: 1px solid var(--rp-border, rgba(0, 0, 0, 0.08));
    padding-top: 24px;
}

/* Koyu modda dark spec-card kuralinin border-color !important'i yesil ust-aksani
   eziyordu; geri getir. */
:root[data-theme="dark"] .rp-detail__spec-grid>.rp-detail__spec-card:last-child {
    border-top-color: #00b294 !important;
}

/* Koyu modda sol spec tablosu (.rp-spec bg:#fff) beyaz ada olarak kaliyordu;
   koyu kart zeminiyle butunlestir ve metni acik tut. */
:root[data-theme="dark"] .rp-detail__spec-grid .rp-spec {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .rp-detail__spec-grid .rp-spec__row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .rp-detail__spec-grid .rp-spec__val {
    color: #eef2f5 !important;
}

:root[data-theme="dark"] .rp-detail__spec-grid .rp-spec__key {
    color: #aab4bd !important;
}

/* 3) RELATED ("Other solutions") KARTLARI — görünür yüzey + alt-hizalı CTA.
      Kök sorun: kart bg'si bölüm zemini (#F5F5F7) ile aynıydı → görünmüyordu.
      Koyu modda .rp-card !important kuralı bg/border/color'ı zaten yönetir. */
.rp-related .swiper-slide {
    height: auto;
    display: flex;
}

.rp-related .rp-card {
    height: 100%;
    background: var(--rp-bg, #fff);
    border: 1px solid var(--rp-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--rp-card-radius, 18px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rp-related .rp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
    border-color: rgba(0, 178, 148, 0.30);
}

.rp-related .rp-card__text {
    flex: 1 1 auto;
}

.rp-related .rp-card__link {
    margin-top: auto;
}

/* 4) HERO key-spec çipleri — foto üstü kontrast (hero her zaman koyu; tema-bağımsız). */
.rp-page-hero .rp-detail-keyspecs__item {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.rp-page-hero .rp-detail-keyspecs__key {
    color: rgba(255, 255, 255, 0.85);
}

.rp-page-hero .rp-detail-keyspecs__val {
    color: #fff;
}

/* rp-projects — solutions/projects liste sayfası (referans reap_statik-3/solutions/projects/
   index.html birebir). Base kurallar burada; mobil breakpoint'ler responsive.css'te. */
.rp-projects__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 80px;
    padding: 30px 0;
    border-top: 1px solid var(--rp-border, #e5e7eb);
    border-bottom: 1px solid var(--rp-border, #e5e7eb);
}

.rp-projects__summary-item {
    text-align: center;
}

.rp-projects__summary-item strong {
    display: block;
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 800;
    color: #00b294;
    line-height: 1;
    letter-spacing: -0.02em;
}

.rp-projects__summary-item span {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rp-text-3, #6b7280);
}

.rp-projects__list {
    display: flex;
    flex-direction: column;
    gap: 104px;
}

.rp-project {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 60px;
    align-items: center;
}

/* Çift satırlarda görsel sağa geçer ama yine GENİŞ kolonda kalsın (boyut tutarlı). */
.rp-project:nth-child(even) {
    grid-template-columns: 0.92fr 1.08fr;
}

.rp-project:nth-child(even) .rp-project__visual {
    order: 2;
}

.rp-project__visual {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #eef1f3;
    box-shadow: 0 44px 84px -38px rgba(11, 13, 16, 0.5);
}

.rp-project__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rp-project:hover .rp-project__visual img {
    transform: scale(1.045);
}

.rp-project__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(155deg, transparent 52%, rgba(11, 13, 16, 0.38));
}

.rp-project__badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 12px 18px;
    border-radius: 14px;
    color: #fff;
    background: rgba(0, 128, 90, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 32px -10px rgba(0, 138, 95, 0.55);
}

.rp-project__badge strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.rp-project__badge span {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.92;
}

.rp-project__content {
    position: relative;
}

.rp-project__index {
    position: absolute;
    top: -34px;
    right: -4px;
    z-index: 0;
    pointer-events: none;
    font-size: clamp(72px, 9vw, 132px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(0, 138, 95, 0.08);
}

.rp-project__tag {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rp-primary-dark, #009880);
    background: rgba(0, 138, 95, 0.12);
    padding: 6px 13px;
    border-radius: 999px;
}

.rp-project__title {
    position: relative;
    z-index: 1;
    margin: 18px 0 14px;
    font-size: clamp(25px, 3vw, 37px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
}

.rp-project__desc {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    max-width: 520px;
    color: var(--rp-text-3, #5a5f66);
    font-size: 16px;
    line-height: 1.7;
}

.rp-project__stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--rp-border, #e5e7eb);
    padding-top: 22px;
}

.rp-project__stats>div {
    position: relative;
    padding: 0 26px;
}

.rp-project__stats>div:first-child {
    padding-left: 0;
}

.rp-project__stats>div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: var(--rp-border, #e5e7eb);
}

.rp-project__stats span {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--rp-text-3, #6b7280);
}

.rp-project__stats strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--rp-text, #0f172a);
}

/* 5) MOBİL — spec grid tek sütun. */
@media (max-width: 768px) {
    .rp-detail__spec-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
    }
}
/* ── Hero: hafif Ken Burns hareketi (kullanıcı isteği — statik hero'ya canlılık).
   Slayt geçiş mantığına dokunmaz (yalnız aktif slaytın arka planını yavaşça yakınlaştırır).
   reduced-motion + eco modda kapalı. ── */
.rp-hero-slider__slide.is-active .rp-hero-slider__bg > img,
.rp-hero-slider__slide.is-active .rp-hero-slider__bg > video { animation: rpHeroKen 8s ease-out both; will-change: transform; }
@keyframes rpHeroKen { from { transform: scale(1.09); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rp-hero-slider__slide .rp-hero-slider__bg > img,
  .rp-hero-slider__slide .rp-hero-slider__bg > video { animation: none !important; }
}
.eco-mode .rp-hero-slider__slide .rp-hero-slider__bg > img,
.eco-mode .rp-hero-slider__slide .rp-hero-slider__bg > video { animation: none !important; }
/* Hero YEO rozeti — mobilde biraz küçült, güvenli konum */
@media (max-width: 640px) {
  .rp-hero-slider__yeo { left: 14px !important; bottom: 64px !important; }
  .rp-hero-slider__yeo img { height: 32px !important; }
}
/* İletişim/consent onay kutusu: flex içinde küçülüp metinle hizası kaymasın (mobil) */
.rp-checkbox { align-items: flex-start; }
.rp-checkbox input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; }

/* ═══ MOBİL HERO FIT (B: CSS-only) — geniş 16:9 görseller mobil dikey hero'da
   aşırı kırpılıyordu. Hero'yu kısaltınca yatayda daha çok içerik görünür. ═══ */
@media (max-width: 768px) {
  .rp-hero-slider,
  .rp-hero-slider__slide,
  .rp-hero-slider .swiper-slide { min-height: clamp(430px, 66vh, 560px) !important; }
  .rp-hero-slider__bg img,
  .rp-hero-slider__bg picture,
  .rp-hero-slider__bg video { object-position: center center !important; }
}
@media (max-width: 480px) {
  .rp-hero-slider,
  .rp-hero-slider__slide,
  .rp-hero-slider .swiper-slide { min-height: clamp(400px, 60vh, 500px) !important; }
}

/* ═══ HERO OTOMATİK FIT — her ekranda (mobil/14" Mac/4K) görselin TAMAMI görünür.
   Ana medya `contain` (kesilmez), boşluk görselin bulanık büyütülmüş kopyasıyla dolar. ═══ */
.rp-hero-slider__fill {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  filter: blur(30px) brightness(.95) saturate(1.15);
  transform: scale(1.16);
  z-index: 0 !important; pointer-events: none;
}
.rp-hero-slider__bg > .rp-hero-slider__media {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; z-index: 1 !important;
}
.rp-hero-slider__bg > picture.rp-hero-slider__media > img,
.rp-hero-slider__bg > video.rp-hero-slider__media {
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important;
  object-fit: contain !important; object-position: center !important;
  position: absolute !important; inset: 0 !important;
}

/* ═══ İSTEK 3 — Slayt-başına metin + koşullu okunabilirlik overlay'i.
   show_text kapalıysa ikisi de basılmaz (görsel tamamen temiz kalır). ═══ */
.rp-hero-slider__scrim {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 75%);
}

.rp-hero-slider__caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(24px, 6vw, 72px) clamp(20px, 6vw, 96px);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.rp-hero-slider__caption--center {
  align-items: center;
  text-align: center;
}

.rp-hero-slider__caption--left {
  align-items: flex-start;
  text-align: left;
}

.rp-hero-slider__caption-heading {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 40ch;
}

.rp-hero-slider__caption-sub {
  margin: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.5;
  max-width: 55ch;
  opacity: .92;
}

.rp-hero-slider__caption-cta {
  text-shadow: none;
}

/* ═══ Cihaza göre görünürlük (VE blok ayarı "…de gizle" — Elementor Responsive Hide) ═══ */
@media (min-width: 1025px)  { .rp-hide-desktop { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .rp-hide-tablet { display: none !important; } }
@media (max-width: 640px)   { .rp-hide-mobile  { display: none !important; } }

/* ═══ VE blok sürükle-sırala (görsel editör iframe içi) ═══ */
.ve-block-drag { cursor: grab; }
.rp-cms-block.ve-dragging { opacity: .35; }
.rp-cms-block.ve-drag-over { box-shadow: inset 0 3px 0 0 #00b294; }
.rp-cms-block.ve-drag-over-after { box-shadow: inset 0 -3px 0 0 #00b294; }

/* ═══ MOBİL HERO: bulanık koyu dolgu KALDIR → cover (ekranı doldur, kararma yok).
   Masaüstünde contain+blur kalır (14" Mac tam görünürlük). Mobilde mobil-özel görsel
   atılırsa tam oturur; yoksa masaüstü görseli ortalanıp kırpılır (kararma yerine). ═══ */
@media (max-width: 768px) {
  .rp-hero-slider__fill { display: none !important; }
  .rp-hero-slider__bg > picture.rp-hero-slider__media > img,
  .rp-hero-slider__bg > video.rp-hero-slider__media {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ═══ VE Widget'ları: Sekmeler / Sayaç / Görsel / Video ═══ */
.rp-tabs__nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--rp-border,#e5e7eb);margin-bottom:24px}
.rp-tab{appearance:none;background:none;border:none;padding:12px 20px;font:inherit;font-weight:600;color:var(--rp-text-2,#4d5c66);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.rp-tab:hover{color:var(--rp-primary,#00b294)}
.rp-tab.is-active{color:var(--rp-primary,#00b294);border-bottom-color:var(--rp-primary,#00b294)}
.rp-tabpanel{line-height:1.7;color:var(--rp-text-2,#4d5c66)}
.rp-tabpanel[hidden]{display:none}
.rp-counter{font-weight:800;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--rp-primary,#00b294);letter-spacing:-.02em}
.rp-counter__prefix,.rp-counter__suffix{font-size:.6em;vertical-align:top}
.rp-counter__label{margin-top:10px;font-size:15px;font-weight:600;color:var(--rp-text-2,#4d5c66)}
.rp-widget-image{margin:0}
.rp-widget-image__img{width:100%;height:auto;display:block;border-radius:var(--r-lg,16px)}
.rp-widget-image__caption{margin-top:10px;font-size:13px;color:var(--rp-text-3,#5a5f66);text-align:center}
.rp-widget-image__link{display:block}
.rp-video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg,16px);overflow:hidden;background:#000}
.rp-video-embed iframe,.rp-video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.rp-video-embed--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--rp-surface,#f7f8fa);color:var(--rp-text-3,#5a5f66);font-size:14px}
.rp-video-embed--empty i{font-size:32px}

/* ══════════════════════════════════════════════════════════════
   F9/§18 — Slider Studio: slayt geçiş animasyonları + Ken Burns
   Not: karartma (tint) slayt-başına inline style ile basılır.
   prefers-reduced-motion'da tüm hareket kapatılır.
   ══════════════════════════════════════════════════════════════ */
.rp-hero-slider__slide.rp-hero-tr--fade  { transition: opacity .6s var(--ease-out, ease); }
.rp-hero-slider__slide.rp-hero-tr--none  { transition: none !important; }

.rp-hero-slider__slide.rp-hero-tr--slide { transition: opacity .5s var(--ease-out, ease), transform .6s var(--ease-out, ease); }
.rp-hero-slider__slide.rp-hero-tr--slide:not(.is-active) { transform: translateX(4%); }
.rp-hero-slider__slide.rp-hero-tr--slide.is-active       { transform: translateX(0); }

.rp-hero-slider__slide.rp-hero-tr--zoom  { transition: opacity .5s var(--ease-out, ease), transform .8s var(--ease-out, ease); }
.rp-hero-slider__slide.rp-hero-tr--zoom:not(.is-active)  { transform: scale(1.04); }
.rp-hero-slider__slide.rp-hero-tr--zoom.is-active        { transform: scale(1); }

/* Ken Burns — yalnız aktif slaytta, görsel katmanına uygulanır */
@keyframes rpKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.rp-hero-slider__slide.rp-hero-kb.is-active .rp-hero-slider__media {
    animation: rpKenBurns 12s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .rp-hero-slider__slide[class*="rp-hero-tr--"] { transition: none !important; transform: none !important; }
    .rp-hero-slider__slide.rp-hero-kb.is-active .rp-hero-slider__media { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   ÇÖZÜM DETAY (site/pages/service-detail.blade.php) — 2026-07-29
   Müşteri durum raporu (28 Tem) düzeltmeleri.
   ══════════════════════════════════════════════════════════════ */

/* ── 1) Zengin detay (detail_html) bx3d panellerinin dikey boşluğu ──
   Şikâyet: "01–04 paragraflar arasındaki boşluklar çok fazla"
   (utility-scale-ess, commercial-industrial-ess, residential-ess).
   Sebep: panel yüksekliği min-height ile viewport'a bağlı (taban 100vh,
   ≥1024px'te responsive.css:2508 !important ile 33vh) ve içerik dikey
   ortalanıyor; içerik ~140px iken panel 297px → her paragraf arası ~110px boş.
   detail_html DB'den geldiği için markup'a dokunulamaz, .rp-solution-detail
   sarmalayıcısıyla hedeflenir. min-height kalkıp boşluk sabit padding'e
   bağlanır → gap ≈ 2×30px, viewport'tan bağımsız.
   DİKKAT: hem app.js hem reap-3d-box.js dönüşü
   progress = -rect.top / (sectionH - innerHeight) ile sürer; sectionH viewport
   altına inerse dönüş durur. Bu yüzden section'a min-height verilip rotasyon
   mesafesi garantiye alınır.
   Selector ≥1024px'teki !important kuralını (responsive.css:2508) yenmek için
   3 sınıf derinliğinde + !important.
   KAPSAM ≥1024px: ≤1023px'te responsive.css:1575 panelleri kasten ~38vh yapıp
   opacity .25 → 1 ile TEK TEK açığa çıkarıyor (mobil "adım adım" okuma akışı).
   O aralıkta boşluğu kapatmak 3 paneli aynı anda ve soluk gösterir; kasıtlı
   tasarım bozulur, bu yüzden dokunulmuyor. */
@media (min-width: 1024px) {
    .rp-solution-detail .rp-bx3d {
        min-height: 128vh;
    }

    .rp-solution-detail .rp-bx3d__right .rp-bx3d__panel {
        min-height: 0 !important;
        padding: 30px 0 !important;
    }

    .rp-solution-detail .rp-bx3d__right .rp-bx3d__panel:first-child {
        padding-top: 0 !important;
    }

    .rp-solution-detail .rp-bx3d__right .rp-bx3d__panel:last-child {
        padding-bottom: 0 !important;
    }
}

/* ── 2) Related Solutions kartları — tek tip görsel alanı ───────────
   Şikâyet: aynı satırdaki kartların kimi boş, kimi küçük yeşil ikon, kimi
   kocaman siyah ikon, kimi ürün fotoğrafı. Sebep: services.image alanında
   hem fotoğraf (jpg) hem çizgisel SVG (stroke="currentColor" → <img> içinde
   currentColor siyaha düşer ve kutuyu doldurur) tutuluyor, kaydı olmayanlar
   remixicon fallback'ine ya da hiçbir şeye düşüyordu.
   Çözüm: sabit 16:10 kutu + vektörler mask ile marka yeşiline sabit boyutta,
   fotoğraflar cover, medyası olmayan kartta nötr yeşil yer tutucu (ri-stack-line). */
.rp-relcard {
    text-decoration: none;
    height: 100%;
}

.rp-relcard__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--rp-border);
    background: var(--rp-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gerçek fotoğraf (tek örnek: utility-scale-ess ürün render'ı) kutuyu doldurur.
   contain + padding denendi; görselin kendi zemini (marka moru #6A64A9 gömülü)
   beyaz kenarlıkla çerçevelenip "hata" gibi görünüyordu. cover ile kutu tam
   dolar, ikon kartlarıyla aynı ölçü/oran/köşe → satır tutarlı okunur. */
.rp-relcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* <img> ile basılan çizgisel SVG'ler: mask → alfa kanalı marka yeşiliyle
   boyanır (siyah stroke sorunu biter), boyut ikon ölçeğine sabitlenir. */
.rp-relcard__glyph {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    background-color: var(--rp-primary);
    -webkit-mask: var(--rp-relcard-mask) center / contain no-repeat;
    mask: var(--rp-relcard-mask) center / contain no-repeat;
}

.rp-relcard__icon {
    font-size: 54px;
    line-height: 1;
    color: var(--rp-primary);
}

/* Başlık 2 satıra çıkınca CTA hizası bozulmasın — buton her kartta en altta */
.rp-relcard .rp-btn--ghost {
    margin-top: auto;
    align-self: flex-start;
    font-size: 13px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .rp-relcard__glyph {
        width: 52px;
        height: 52px;
    }

    .rp-relcard__icon {
        font-size: 44px;
    }
}