/* ── Space Grotesk — Local Fonts ─────────────────────── */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
    font-weight: 700; font-display: swap;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }

/* ══════════════════════════════════════════════════════
   PRELOADER  (Megatronik teknik acilis ekrani)
   - Body'nin en basina render edilir.
   - sessionStorage ile bir tab'da bir kez gosterilir.
   - prefers-reduced-motion -> atlanir.
══════════════════════════════════════════════════════ */
.mtnk-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0A0A0A;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.mtnk-preloader.is-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mtnk-pre-grid {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg,  transparent 0, transparent 39px, rgba(255,255,255,.04) 40px),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,255,255,.04) 40px);
    pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
}
.mtnk-pre-scan {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(211,47,47,.07), transparent 60%);
    animation: mtnk-pre-scanline 2.2s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes mtnk-pre-scanline {
    0%   { background-position: 0 0; }
    100% { background-position: 0 6px; }
}
.mtnk-pre-inner {
    position: relative;
    z-index: 2;
    width: min(560px, 88vw);
    text-align: left;
    font-family: 'Space Grotesk', monospace;
}
.mtnk-pre-brand {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 2rem;
}
.mtnk-pre-dot { color: #D32F2F; }
.mtnk-pre-status {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8125rem;
    color: rgba(255,255,255,.7);
    letter-spacing: .04em;
    margin-bottom: 1.25rem;
    min-height: 1.4em;
}
.mtnk-pre-prompt { color: #D32F2F; font-weight: 700; }
.mtnk-pre-msg    { color: rgba(255,255,255,.85); }
.mtnk-pre-caret {
    color: rgba(255,255,255,.5);
    animation: mtnk-pre-blink 1s steps(1, end) infinite;
}
@keyframes mtnk-pre-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.mtnk-pre-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,.08);
    margin-bottom: 1rem;
    overflow: hidden;
}
.mtnk-pre-bar-fill {
    position: absolute;
    inset: 0 100% 0 0;     /* width = 0 */
    background: linear-gradient(90deg, #D32F2F, #ff5050);
    box-shadow: 0 0 12px rgba(211,47,47,.5);
}
@keyframes mtnk-pre-fill {
    0%   { right: 100%; }
    20%  { right: 70%;  }
    50%  { right: 38%;  }
    80%  { right: 12%;  }
    100% { right: 0;    }
}
.mtnk-pre-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .6875rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}
.mtnk-pre-blink { color: #D32F2F; animation: mtnk-pre-blink 1.4s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
    .mtnk-pre-scan, .mtnk-pre-caret, .mtnk-pre-blink, .mtnk-pre-bar-fill {
        animation: none !important;
    }
}

/* ── Nav glassmorphism ───────────────────────────────── */
.glass-nav {
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ══════════════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════════════ */
.hero-slider {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: clamp(540px, 100svh, 1080px);
    overflow: hidden;
    background: #000;
}

/* Each slide is stacked, opacity-transitioned.
   Eski slide hizla dim olur, yeni biraz gecikmeli gelir -> baslik
   yazilarinin ust uste binme algisi kalkar. */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease-out, visibility 0s linear .35s;
}
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .55s ease-out .12s, visibility 0s linear 0s;
}

/* ── Hero baslik: line-mask reveal ────────────────────────
   Her satir overflow:hidden bir maske; icerideki text translateY(110%)
   ile baslar, GSAP ile sirayla y=0'a kayar. Modern, "stripe"-vari etki. */
.hero-title { position: relative; }
.hero-line {
    display: block;
    overflow: hidden;
    line-height: 1;
    padding: .04em 0 .08em 0; /* descender pay (italic 'g/y' icin) */
}
.hero-line-inner {
    display: inline-block;
    will-change: transform;
}
/* JS varsa: ilk paint'te yazi maskelenir; GSAP animateSlide ile y=0 olur.
   No-JS: <html class="no-js"> kalir, transform yok -> yazi normal goruntulenir. */
html.js .hero-line-inner { transform: translateY(110%); }

/* Slide backgrounds */
.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.slide-bg-1 {
    background-color: #0d0d0d;
    background-image:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(211,47,47,.09) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,.018) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,.018) 60px);
}
.slide-bg-2 {
    background-color: #080d12;
    background-image:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(30,90,200,.07) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,.015) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,.015) 60px);
}
.slide-bg-3 {
    background-color: #110b08;
    background-image:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(200,120,30,.06) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,.015) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,.015) 60px);
}

/* Konu bazlı dekoratif SVG katmanı (slide-bg üstünde, overlay altında) */
.slide-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.65;
    overflow: hidden;
}
.slide-art svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
@media (max-width: 1023px) { .slide-art { opacity: 0.32; } }

/* Gradient overlay (sol→sağ, metin kontrastı için) */
.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(0,0,0,.92) 36%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.18) 100%);
    z-index: 1;
}

/* Slide content wrapper -- navbar (~68px) + slider-controls icin guvenli pay.
   Padding clamp() ile her viewport'a esnek uyum saglar. */
.slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding:
        clamp(96px, 14vh, 168px)              /* top: navbar + breathing */
        clamp(20px, 4vw, 96px)                /* right */
        clamp(80px, 10vh, 128px)              /* bottom: slider-controls */
        clamp(20px, 4vw, 96px);               /* left */
}

/* Hero metin sutunu */
.hero-copy {
    width: 100%;
    max-width: 56rem;       /* clamp ile genisleyince satirlar yine 56rem'e sigar */
}

/* ── Hero typography (fluid, clamp tabanli) ──────────────────────────
   Sabit Tailwind breakpoint (text-5xl / md:text-[80px] / lg:text-[96px])
   yerine her viewport icin sivi olcek. 2K/4K'da ust limit korunur,
   kucuk ekranlarda alt limit ile okunabilirlik sabitlenir. */
.hero-eyebrow {
    margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
    font-size: clamp(10px, .4vw + 9px, 12px);
}
.hero-title {
    font-size: clamp(2.25rem, 7.2vw, 6rem);
    line-height: 0.92;
    letter-spacing: -.04em;
    margin-bottom: clamp(1rem, 2.6vw, 2rem);
}
.hero-sub {
    font-size: clamp(.95rem, .35vw + .85rem, 1.0625rem);
    max-width: 36rem;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.hero-actions {
    gap: clamp(1rem, 1.6vw, 1.5rem);
}
.hero-btn {
    padding: clamp(.875rem, 1.2vw, 1.125rem) clamp(1.75rem, 3vw, 2.75rem);
    font-size: clamp(10px, .4vw + 9px, 12px);
    letter-spacing: .12em;
}

/* Stats card (bottom-right) */
.slide-stats-card {
    position: absolute;
    bottom: 100px;
    right: 48px;
    z-index: 3;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.09);
    padding: 1.5rem;
    width: 220px;
}

/* Ghost / watermark text */
.slide-ghost {
    position: absolute;
    bottom: -20px;
    left: clamp(16px, 3vw, 40px);
    z-index: 0;
    font-size: clamp(96px, 18vw, 240px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
    opacity: .025;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .slide-ghost { display: none; }   /* kucuk ekranda dekoratif unsuru kapat */
}

/* Slider controls bar */
.slider-controls {
    position: absolute;
    bottom: 32px;
    left: clamp(2rem, 6vw, 6rem);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
}

.slide-arrow {
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: border-color .3s, background .3s;
    flex-shrink: 0;
}
.slide-arrow:hover {
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.05);
}

.hero-dot {
    height: 2px;
    width: 16px;
    background: rgba(255,255,255,.3);
    border: none;
    cursor: pointer;
    transition: width .4s ease, background .4s ease;
    padding: 0;
}
.hero-dot.active {
    width: 32px;
    background: #D32F2F;
}

.slide-counter {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-left: 4px;
}

/* Progress bar */
.slider-progress-track {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,.06);
    z-index: 20;
}
.slider-progress-bar {
    height: 100%;
    background: #D32F2F;
    transform-origin: left;
    transform: scaleX(0);
}

/* ── Hero CTA button shimmer ─────────────────────────── */
.hero-btn {
    position: relative; overflow: hidden;
    transition: background .4s, color .4s;
}
.hero-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: left .6s ease;
    pointer-events: none;
}
.hero-btn:hover::before { left: 160%; }

/* ── Brand mark (navbar logosu sonundaki kucuk kirmizi nokta) ──────── */
.brand-mark { gap: 1px; }
.brand-mark .brand-dot {
    color: #D32F2F;
    line-height: 1;
    transition: transform .35s cubic-bezier(.65,0,.35,1);
    display: inline-block;
}
.brand-mark:hover .brand-dot {
    transform: translateY(-2px) scale(1.1);
}

/* ── WA arrow button group ───────────────────────────────────────────
   Hover: circle saga kayar (label_w + gap), label sola gelir (circle_w + gap).
   Ok 180deg doner. Border korunur (background asla doldurulmaz).
   --wa-c-shift / --wa-l-shift JS tarafindan runtime'da hesaplanir. */
.wa-arrow-group {
    position: relative;
    cursor: pointer;
    --wa-c-shift: 165px;
    --wa-l-shift: -56px;
}
.wa-arrow-group .wa-circle {
    border-color: rgba(255,255,255,0.4);
    transition:
        border-color .35s ease,
        transform    .55s cubic-bezier(.65,0,.35,1);
    will-change: transform;
}
.wa-arrow-group .wa-icon,
.wa-arrow-group .wa-circle svg {
    transition: transform .55s cubic-bezier(.65,0,.35,1);
    will-change: transform;
}
.wa-arrow-group .wa-label {
    transition:
        color     .35s ease,
        transform .55s cubic-bezier(.65,0,.35,1);
    will-change: transform;
}
.wa-arrow-group:hover .wa-circle {
    border-color: #fff;
    transform: translateX(var(--wa-c-shift));
}
.wa-arrow-group:hover .wa-icon,
.wa-arrow-group:hover .wa-circle svg {
    transform: rotate(-180deg);
}
.wa-arrow-group:hover .wa-label {
    color: #fff;
    transform: translateX(var(--wa-l-shift));
}

/* ── Marquee ─────────────────────────────────────────── */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 4rem;
    padding: 1rem 2rem;
    animation: marquee 40s linear infinite;
    will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 36px;
    font-weight: 900;
    font-size: 1.125rem;
    letter-spacing: -0.025em;
    color: #000;
    white-space: nowrap;
    opacity: 0.35;
    cursor: default;
    line-height: 1;
    position: relative;
    transition: opacity .4s, color .15s;
}
.marquee-item:hover { opacity: 1; }

/* ── Glitch hover (RGB split + jitter) ────────────────────────────────
   .marquee-item hover'inda ::before + ::after ile iki kopya RGB shift
   yapar; ana metin kucuk jitter atar. Brand isimleri "elektronik"
   hissini guclu vurgular. data-text gerekmez -- pseudo'lar ::content
   kullanir; ancak inline span icerigi pseudo-da yok, bu yuzden CSS'i
   data-text uzerinden yazacagiz. */
.marquee-item::before,
.marquee-item::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s linear;
    text-shadow: none;
}
.marquee-item::before { color: #D32F2F; }   /* kirmizi kanal */
.marquee-item::after  { color: #00D4FF; }   /* cyan kanal */

.marquee-item:hover {
    color: #000;
    animation: glitch-jitter .6s steps(1, end) infinite;
}
.marquee-item:hover::before {
    opacity: 1;
    animation: glitch-r .6s steps(1, end) infinite;
    mix-blend-mode: multiply;
}
.marquee-item:hover::after {
    opacity: 1;
    animation: glitch-c .6s steps(1, end) infinite reverse;
    mix-blend-mode: multiply;
}

@keyframes glitch-jitter {
    0%,100% { transform: translate(0,0); }
    20%     { transform: translate(-1px, 1px); }
    40%     { transform: translate(-1px,-1px); }
    60%     { transform: translate( 1px, 1px); }
    80%     { transform: translate( 1px,-1px); }
}
@keyframes glitch-r {
    0%,100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
    25%     { transform: translate(-3px, 1px); clip-path: inset(0 0 60% 0); }
    50%     { transform: translate(-2px,-1px); clip-path: inset(40% 0 20% 0); }
    75%     { transform: translate(-3px, 0); clip-path: inset(80% 0 0 0); }
}
@keyframes glitch-c {
    0%,100% { transform: translate( 2px, 0); clip-path: inset(60% 0 0 0); }
    25%     { transform: translate( 3px,-1px); clip-path: inset(0 0 80% 0); }
    50%     { transform: translate( 2px, 1px); clip-path: inset(20% 0 40% 0); }
    75%     { transform: translate( 3px, 0); clip-path: inset(0 0 30% 0); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-item:hover, .marquee-item:hover::before, .marquee-item:hover::after {
        animation: none;
    }
}

/* ── Service card hover ──────────────────────────────── */
.service-card { transition: background .5s, border-color .4s; }
.service-card:hover .card-title { color: #fff; }
.service-card:hover .card-desc  { color: rgba(255,255,255,.5); }
.service-card:hover .card-cta   { color: #fff; }

/* ── Service card icon box ───────────────────────────── */
.service-icon-box {
    transition: border-color .4s, background .4s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.service-card:hover .service-icon-box {
    border-color: rgba(211,47,47,.45);
    background: rgba(211,47,47,.07);
    transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════
   CTA ARROW — tum sitenin ortak ok bileseni
   Hover  -> 180deg donus + label'a dogru hafif kayma
   Etki   : "ok icerik ismini isaret ediyor" hissi
══════════════════════════════════════════════════════ */
.cta-arrow {
    display: inline-block;
    transform-origin: center center;
    transition: transform .45s cubic-bezier(.65,0,.35,1);
    line-height: 1;
    will-change: transform;
}
/* Tek tip hover trigger'lari: kart, "Tum X" / "Devamini Oku" linki,
   icinde direkt cta-arrow tasiyan herhangi bir <a>. */
.service-card:hover .cta-arrow,
.cta-link:hover .cta-arrow,
a:hover > .cta-arrow {
    transform: rotate(-180deg) translateX(4px);
}
/* "Tum X" / "Devamini Oku" / pagination "Sonraki" — tutarli stil */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

/* ── Blog article image zoom ─────────────────────────── */
.blog-img { transition: transform 1s ease; }
.blog-article:hover .blog-img { transform: scale(1.04); }

/* ── Contact form inputs ─────────────────────────────── */
.contact-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #E4E4E7;
    background: transparent;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    font-family: 'Space Grotesk', sans-serif;
    outline: none;
    transition: border-color .3s;
    color: #18181b;
}
.contact-input::placeholder { color: #a1a1aa; }
.contact-input:focus { border-bottom-color: #D32F2F; }
select.contact-input { cursor: pointer; -webkit-appearance: none; appearance: none; }

/* ── Lucide icon base ────────────────────────────────── */
[data-lucide] { display: inline-block; }

/* ══════════════════════════════════════════════════════
   RICH CONTENT TYPOGRAPHY — blog & hizmet detay gövdesi
══════════════════════════════════════════════════════ */
.rich-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #3f3f46;
    font-weight: 400;
}
.rich-content > * + * { margin-top: 1.15em; }

/* H2 — ana başlık, sol tarafta primary bar */
.rich-content h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #000;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-left: 1.125rem;
    position: relative;
    text-transform: none;
}
.rich-content h2::before {
    content: '';
    position: absolute;
    left: 0; top: .2em; bottom: .2em;
    width: 4px;
    background: #D32F2F;
}
.rich-content > h2:first-child { margin-top: 0; }

/* H3 — alt başlık, üst tarafta yatay çizgi + uppercase */
.rich-content h3 {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #000;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e4e4e7;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.rich-content h3::before {
    content: '';
    width: 16px;
    height: 2px;
    background: #D32F2F;
    flex-shrink: 0;
}

/* H4 opsiyonel */
.rich-content h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #0f0f11;
    margin-top: 1.75rem;
    margin-bottom: 0.25rem;
}

.rich-content p   { color: #3f3f46; }
.rich-content strong { color: #000; font-weight: 700; }
.rich-content em     { color: #52525b; font-style: italic; }

/* UL — primary diamond bullet */
.rich-content ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}
.rich-content ul > li {
    position: relative;
    padding-left: 1.75rem;
    margin-top: 0.65em;
    color: #3f3f46;
}
.rich-content ul > li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.68em;
    width: 7px;
    height: 7px;
    background: #D32F2F;
    transform: rotate(45deg);
}
.rich-content ul > li strong { color: #000; }

/* OL — sayı paragrafları */
.rich-content ol {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    counter-reset: rc-item;
}
.rich-content ol > li {
    counter-increment: rc-item;
    position: relative;
    padding-left: 2.25rem;
    margin-top: 0.9em;
    color: #3f3f46;
}
.rich-content ol > li::before {
    content: counter(rc-item, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.15em;
    font-weight: 900;
    font-size: 0.72rem;
    color: #D32F2F;
    letter-spacing: 0.08em;
    background: #fff;
    border: 1px solid rgba(211,47,47,.25);
    padding: 3px 6px;
    line-height: 1;
}

/* Linkler */
.rich-content a {
    color: #D32F2F;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color .2s;
}
.rich-content a:hover { color: #000; }

/* Blockquote */
.rich-content blockquote {
    border-left: 4px solid #D32F2F;
    padding: 0.25rem 0 0.25rem 1.5rem;
    color: #52525b;
    font-style: italic;
    font-size: 1.0625rem;
    margin: 1.75rem 0;
    background: linear-gradient(90deg, rgba(211,47,47,.03), transparent);
}

/* Code inline */
.rich-content code {
    background: #f4f4f5;
    padding: 2px 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    color: #18181b;
}

/* Görseller */
.rich-content img {
    max-width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border: 1px solid #e4e4e7;
}

/* Ayırıcı */
.rich-content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid #e4e4e7;
}

/* Son em paragrafları pull-quote gibi görünsün */
.rich-content > p > em:only-child {
    display: block;
    padding: 1.25rem 1.5rem;
    background: #fafafa;
    border-left: 3px solid #D32F2F;
    color: #27272a;
    font-size: 0.9375rem;
}

/* ══════════════════════════════════════════════════════
   HİZMET DETAY — Hero Banner
══════════════════════════════════════════════════════ */
.service-hero {
    position: relative;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    overflow: hidden;
    border-bottom: 3px solid #D32F2F;
    isolation: isolate;
}
.service-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,.02) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,.02) 60px);
    pointer-events: none;
    z-index: 1;
}
.service-hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0.55;
}
.service-hero-art svg,
.service-hero-art .service-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.service-hero-art::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(95deg, rgba(0,0,0,.92) 38%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.25) 100%);
    pointer-events: none;
}
.service-hero-icon {
    width: 64px; height: 64px;
    background: rgba(211,47,47,.1);
    border: 1px solid rgba(211,47,47,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.service-hero-ghost {
    position: absolute;
    bottom: -30px;
    right: -20px;
    font-size: clamp(120px, 14vw, 200px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    opacity: 0.035;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

/* Quick facts card (sidebar içeriğiyle uyumlu mini kart) */
.quick-fact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-left: 3px solid #D32F2F;
    font-size: 0.875rem;
    color: #27272a;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   BLOG DETAY — Cover & metadata
══════════════════════════════════════════════════════ */
.blog-cover {
    width: 100%;
    aspect-ratio: 21 / 9;
    background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 2.5rem;
    position: relative;
}
.blog-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0,0,0,.05);
    pointer-events: none;
}
.blog-cover-placeholder {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: rgba(0,0,0,.15);
    text-transform: uppercase;
}
.blog-cover-svg,
.blog-cover-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}
.blog-cover-svg { background: #0A0A0A; }

/* ── WhatsApp floating btn ───────────────────────────── */
.wa-btn {
    position: fixed; bottom: 28px; right: 28px; z-index: 999;
    background: #25D366; color: #fff;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px 14px 18px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(37,211,102,.35);
    transition: background .2s, box-shadow .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.wa-btn:hover {
    background: #128C7E;
    box-shadow: 0 14px 44px rgba(37,211,102,.5);
    transform: translateY(-3px) scale(1.02);
}