/* ----------------------------------
   Rayu — Robok teması üzerine marka uzantısı
   Yalnızca tema token'ları (root değişkenleri) kullanılır.
------------------------------------- */

/* Marka paleti — rayu-logo.png'den ölçüldü:
   Ra (turuncu) #f07020 · amber #f0a010 · koyu #e04000
   Yu (turkuaz) #30b0b0 · koyu petrol #207080
   Temanın tüm aksanları (butonlar, sayaçlar, etiketler,
   degradeler) bu iki kutup üzerinden akar. */
:root {
    --rayu-orange: #f07020;
    --rayu-orange-deep: #d9530e;
    --rayu-teal: #2fb0af;
    --rayu-petrol: #1f6f80;
    --color-primary: #e8650f;
    --color-secondary: var(--rayu-teal);
    --bg-gradient: linear-gradient(90deg, var(--rayu-orange) 0%, var(--rayu-teal) 100%);
}

/* SplitText animasyonu başlamadan sağa kaydırılan harflerin
   dar ekranlarda yatay kaydırma yaratmasını engeller.
   Not: "hidden" scroll container oluşturup position:sticky'yi
   (proje kartlarının yığılma animasyonu) kırdığı için "clip" kullanılır. */
html,
body {
    overflow-x: clip;
}

/* Glass header — üstte koyu cam, kaydırınca açık cam.
   Tam genişlik değil: kenarlardan içeride, köşeleri yuvarlatılmış
   yüzen bir kutu (footer'ın box-layout mantığı).

   ÖNEMLİ: backdrop-filter nav'ın KENDİSİNE verilmez — verilirse
   nav, içindeki position:fixed öğelerin (yan panel .side ve
   body.on-side karartma katmanı) referans kutusu hâline gelir ve
   panel/karartma bozulur. Cam kutu bu yüzden .container-full'da. */
nav.navbar.validnavs.navbar-fixed,
nav.navbar.validnavs.navbar-fixed.sticked,
nav.navbar.validnavs.no-background {
    background: transparent !important;
    border: none;
    box-shadow: none;
}

nav.navbar.validnavs.navbar-fixed > .container-full {
    margin: 14px auto 0;
    width: calc(100% - 40px);
    max-width: 1560px;
    border-radius: 18px;
    padding-left: 26px;
    padding-right: 26px;
    background: rgba(8, 12, 34, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.3s ease, border-color 0.3s ease;
}

nav.navbar.validnavs.navbar-fixed.sticked > .container-full {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 6, 98, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Mobil: cam kutu yerine tam genişlik opak şerit.
   Sebep tek değil, iki:
   1) backdrop-filter yığın bağlamı yaratıyor; mobil menü çekmecesi
      (.navbar-collapse, z-index 9999) bu bağlamın içinde kaldığı için
      dışarıdaki .overlay-screen karartması çekmecenin üstüne biniyor ve
      menü tıklanamaz hâle geliyordu.
   2) Küçük ekranda kenar boşluklu yüzen kutu, sayfadan kopuk duruyordu. */
@media (max-width: 991px) {
    nav.navbar.validnavs.navbar-fixed > .container-full,
    nav.navbar.validnavs.navbar-fixed.sticked > .container-full {
        margin: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        padding-left: 16px;
        padding-right: 16px;
        background: rgba(6, 10, 26, 0.92);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Sayfa yukarı kaydırıldığında (sticked) açık zeminli şerit */
    nav.navbar.validnavs.navbar-fixed.sticked > .container-full {
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 6, 98, 0.08);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }

    /* Çekmece ve karartma net sıraya girsin */
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile {
        z-index: 1200;
    }

    .overlay-screen.opened {
        z-index: 1100;
    }
}

/* ----------------------------------
   Sabit sosyal takip çubuğu — sağ kenarda, tüm sayfalarda aynı yerde.
   Yazılar dikey ve aşağıdan yukarı okunur.
------------------------------------- */
.rayu-social-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
    padding: 26px 13px;
    border-radius: 14px 0 0 14px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-right: none;
    box-shadow: -8px 10px 30px rgba(0, 6, 98, 0.08);
}

.rayu-social-rail .label,
.rayu-social-rail a {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

.rayu-social-rail .label {
    color: var(--color-paragraph);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 12px;
}

.rayu-social-rail a {
    color: var(--color-heading);
    transition: color 0.25s ease, transform 0.25s ease;
}

.rayu-social-rail a:hover {
    color: var(--color-primary);
    transform: rotate(180deg) translateY(3px);
}

.rayu-social-rail .line {
    width: 1px;
    height: 30px;
    background: rgba(0, 6, 98, 0.18);
}

@media (max-width: 1199px) {
    .rayu-social-rail {
        display: none;
    }
}

/* Yan panel — menüyle aynı dil: yüzen, yuvarlatılmış, cam.
   z-index: karartma katmanının (body.on-side nav::after) üstünde kalmalı */
nav.navbar.validnavs .side {
    z-index: 1100;
    top: 14px;
    bottom: 14px;
    height: auto;
    border-radius: 18px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 6, 98, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

nav.navbar.validnavs .side.on {
    right: 14px;
}

/* Turuncu başlık bloğu kalkar; logo alanı sade bir ayraçla biter */
.side .widget .logo::after {
    display: none;
}

.side .widget .logo {
    padding: 10px 0 24px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(0, 6, 98, 0.08);
}

.side .rayu-logo {
    color: var(--dark);
}

/* Kapat butonu: yumuşak daire, panelin sağ üst köşesine sabit */
.side .close-side {
    position: absolute;
    top: 26px;
    right: 28px;
    float: none;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 6, 98, 0.06);
    transition: background 0.2s ease;
    z-index: 3;
}

.side .close-side:hover {
    background: rgba(0, 6, 98, 0.12);
}

.side .close-side i {
    color: var(--dark);
    font-size: 18px;
    left: 0;
}

@media (max-width: 575px) {
    nav.navbar.validnavs .side {
        width: calc(100% - 20px);
        top: 10px;
        bottom: 10px;
        border-radius: 14px;
    }

    nav.navbar.validnavs .side.on {
        right: 10px;
    }
}

/* Yan panel iç yerleşimi: eşit ritimli boşluklar, ölü alan yok */
nav.navbar.validnavs .side {
    padding: 34px 36px 36px;
    display: flex;
    flex-direction: column;
}

.side .widget {
    margin-bottom: 28px;
}

.side .widget p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.7;
}

.side .widget.address ul li {
    margin: 0;
    padding: 0;
}

.side .widget.address ul li + li {
    margin-top: 14px;
}

.side .widget.social {
    margin-bottom: 30px;
}

/* Panelin sonunda hızlı brief formu */
.side .rayu-side-form {
    margin-top: auto;
    margin-bottom: 0;
    background: rgba(0, 6, 98, 0.04);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 14px;
    padding: 22px;
}

.side .rayu-side-form h4 {
    font-size: 18px;
    margin-bottom: 4px;
}

.side .rayu-side-form p {
    font-size: 13px;
    color: var(--color-paragraph);
    margin-bottom: 14px;
}

/* .form-control / textarea kuralları kaldırıldı: bu kutuda artık form yok.
   Temanın ölü `<form action="#">` bloğu yerine iletişim sayfasındaki tek
   brief formuna götüren bir düğme duruyor (bkz. partials/header.blade.php). */
.side .rayu-side-form .btn {
    width: 100%;
    justify-content: center;
}

/* Düğmenin altındaki "ya da doğrudan yazın" satırı */
.side .rayu-side-form-alt {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--color-paragraph);
}

.side .rayu-side-form-alt a {
    color: var(--color-heading);
    font-weight: 600;
    word-break: break-all;
}

.side .rayu-side-form-alt a:hover {
    color: var(--color-primary);
}

/* Logo (navbar + footer): renkli RY amblemi + yazı */
.rayu-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--white);
    display: inline-flex;
    align-items: center;
}

.rayu-logo img {
    height: 36px;
    width: auto;
    margin-right: 9px;
    flex: none;
}

.rayu-logo.dark {
    color: var(--dark);
}

/* Mobil menü içindeki logo — temanın img kuralları span'e uyarlanır */
nav.navbar.validnavs .navbar-collapse.collapse > .rayu-logo {
    display: none;
    margin-bottom: 30px;
}

nav.navbar.validnavs .navbar-collapse.collapse.show > .rayu-logo {
    display: inline-flex;
}

/* Kapanış CTA — hero bileşeninin tam ekran kurallarını kompakt banda çevirir */
.banner-style-one-area.rayu-closing-area {
    padding: 90px 0;
}

@media (min-width: 1024px) {
    .banner-style-one-area.rayu-closing-area {
        height: auto;
    }
}

/* Footer'ın box-layout davranışıyla aynı kırılımda kutu görünümü */
@media (min-width: 1450px) {
    .banner-style-one-area.rayu-closing-area {
        max-width: 95%;
        margin: 0 auto 30px;
        border-radius: 50px;
        overflow: hidden;
    }

}

/* DSP bandı: tam genişlik, marka renkli görsel + karanlık overlay */
#platform.testimonial-style-one-area {
    position: relative;
    z-index: 1;
}

#platform.testimonial-style-one-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 18, 0.62);
    z-index: 0;
    pointer-events: none;
}

#platform.testimonial-style-one-area > .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 1023px) {
    .banner-style-one-area.rayu-closing-area {
        padding: 70px 0;
    }
}

/* Kapanış CTA başlığı — hero'dan iki kademe küçük, responsive */
.rayu-closing h2 {
    font-size: 44px;
    margin-bottom: 25px;
}

@media (max-width: 1023px) {
    .rayu-closing h2 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .rayu-closing h2 {
        font-size: 30px;
    }
}

/* Hero arka plan videosu — tema görseli poster/fallback olarak kalır.
   z-index: 0 şart: bölüm kendi stacking context'ini kurar, böylece
   negatif z-index'li video bölümün arka plan görselinin ÜSTÜNE çizilir. */
.rayu-hero-video {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.rayu-hero-loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

/* Metin okunabilirliği için koyu örtü (hızlı kesmeli kurguda daha koyu) */
.rayu-hero-video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(4, 6, 20, 0.48);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .rayu-hero-loop {
        display: none;
    }
}

/* Marka bandı — hero'nun alt kenarından 50px yukarıda sabit.
   height:auto şart: tema, hero içindeki tüm div'lere height:100% verir;
   mutlak konumda bu, bandı yukarı taşırıyordu. */
.banner-style-one-area.rayu-hero-video .brand-items,
.banner-style-one-area.rayu-hero-video .brand-items div {
    height: auto;
}

.banner-style-one-area.rayu-hero-video .brand-items {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    margin: 0;
    padding: 0;
    z-index: 2;
}

/*
   Anasayfa hero başlığı H1'e çevrildi (tema h2 kullanıyor, sayfa H1'siz
   kalıyordu). Görünüm değişmesin diye temanın .banner-one-content h2 için
   tanımladığı dört kırılım birebir H1'e taşındı — style.css'e dokunulmadı.
*/
.banner-one-content h1 {
    font-size: 80px;
    margin-bottom: 35px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .banner-one-content h1 {
        font-size: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner-one-content h1 {
        font-size: 70px;
        line-height: 1.1;
    }
}

@media only screen and (max-width: 767px) {
    .banner-one-content h1 {
        font-size: 42px;
    }
}

/* Ortalanan hero içeriği banda binmesin diye alt pay */
.banner-style-one-area.rayu-hero-video {
    padding-bottom: 200px;
}

@media (max-width: 991px) {
    .banner-style-one-area.rayu-hero-video .brand-items {
        position: static;
        margin-top: 46px;
    }

    .banner-style-one-area.rayu-hero-video {
        padding-bottom: 80px;
    }
}

/*
   Şeritte artık marka adları değil disiplin adları var; bunlar tek kelime
   olmak zorunda değil. nowrap bırakılırsa uzun etiket ("Programatik — Rayu
   DSP") kendi slaytından taşıp komşusunun üstüne biniyordu. Sarmasına izin
   veriyoruz: slayt genişliği sabit kalır, metin gerekirse iki satıra iner.
*/
.brand-item .rayu-brand-text {
    font-family: var(--font-heading);
    /* Marka adları tek kelimeydi, disiplin adları iki kelime olabiliyor.
       Slayt 5'li görünümde 141 piksel; en geniş etiket ("Veri & Analitik")
       17 pikselde 134 piksel sürüyor, 18'de tam sınıra dayanıyor. */
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: var(--white);
    opacity: 0.6;
    text-align: center;
    text-wrap: balance;
    transition: opacity 0.35s ease;
    display: block;
}

.brand-item:hover .rayu-brand-text {
    opacity: 1;
}

.rayu-brand-label {
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white-secondary);
    margin-bottom: 26px;
}

/* Süreç (R·A·Y·U) adım etiketi */
.process-style-one-item .step-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-common);
    opacity: 0.75;
    margin-bottom: 12px;
}

/* ----------------------------------
   R·A·Y·U yatay akordiyonu
   Kapalı panelde yalnız harf görünür; tıklayınca panel açılır.
------------------------------------- */
.rayu-accordion .rayu-acc-panel {
    cursor: pointer;
}

.rayu-accordion .rayu-acc-panel.active {
    cursor: default;
}

.rayu-acc-toggle {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    border: none;
    cursor: inherit;
    padding: 0;
    margin: 0;
}

.rayu-acc-panel.active .rayu-acc-toggle {
    pointer-events: none;
}

.rayu-acc-toggle:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -6px;
    border-radius: 12px;
}

.rayu-accordion .rayu-acc-panel:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Harfler dik durur (temanın dikey yazım kuralı iptal) */
.rayu-accordion .process-style-one-item h2 {
    writing-mode: horizontal-tb;
    transform: none;
    line-height: 1;
}

/* Kapalı hâlin ortadaki büyük harfi (spine) — ayrı katman,
   açılışta yalnız opaklık geçer; hiçbir öğe yer değiştirmez */
.rayu-acc-spine {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 120px;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--white-common);
    pointer-events: none;
    z-index: 2;
}

/* Masaüstü: yatay genişleme + çapraz geçiş.
   Kapanış, açılışın tam tersidir: önce eski içerik aşağı süzülüp kaybolur
   (160ms), sonra paneller kayar (160ms gecikmeli), yeni içerik en son gelir. */
@media (min-width: 1024px) {
    .rayu-accordion .rayu-acc-panel {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: flex 560ms cubic-bezier(0.22, 1, 0.36, 1) 160ms, background 200ms ease;
    }

    .rayu-accordion .rayu-acc-panel.active {
        flex: 3.25;
    }

    /* Tek harf, iki konum: kapalıyken panelin ortasında büyük durur,
       açılınca küçülerek başlık yerine SÜZÜLÜR (kaybolup gelmez).
       Bu yüzden ayrı spine katmanı masaüstünde kullanılmaz. */
    .rayu-acc-spine {
        display: none;
    }

    .rayu-accordion .rayu-acc-panel h2 {
        position: absolute;
        z-index: 2;
        margin: 0;
        top: 50%;
        left: 50%;
        font-size: 120px;
        transform: translate(-50%, -50%);
        transition: top 620ms cubic-bezier(0.22, 1, 0.36, 1),
                    left 620ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
                    font-size 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rayu-accordion .rayu-acc-panel.active h2 {
        top: 4px;
        left: 50px;
        font-size: 64px;
        transform: translate(0, 0);
    }

    /* Harf akıştan çıktığı için içeriğe üstten yer ayrılır */
    .rayu-acc-outer {
        margin-top: 96px;
    }

    /* Sabit genişlik: panel açılırken metin yeniden akmaz.
       İçerik akışta kalır (yükseklik sabit); kapanışta aşağı süzülür,
       açılışta paneller yerleştikten sonra aşağıdan gelir */
    .rayu-acc-content {
        width: 320px;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .rayu-accordion .rayu-acc-panel.active .rayu-acc-content {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 380ms ease 420ms, transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 420ms;
    }
}

/* Mobil: dikey akordiyon (tema panelleri alt alta dizer) */
/* 1024–1199: tema panel dolgusu 35px, harf de ona hizalanır */
@media (min-width: 1024px) and (max-width: 1199px) {
    .rayu-accordion .rayu-acc-panel.active h2 {
        left: 35px;
        font-size: 56px;
    }

    .rayu-accordion .rayu-acc-panel h2 {
        font-size: 96px;
    }
}

@media (max-width: 1023px) {
    .rayu-accordion .rayu-acc-panel {
        padding-top: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Mobilde spine kullanılmaz; harf akış içinde ortalanır */
    .rayu-acc-spine {
        display: none;
    }

    .rayu-accordion .rayu-acc-panel:not(.active) h2 {
        font-size: 84px;
        text-align: center;
    }

    .rayu-accordion .rayu-acc-panel.active h2 {
        font-size: 52px;
        text-align: left;
        margin-bottom: 4px;
    }

    .rayu-accordion .rayu-acc-panel:last-child {
        border-bottom: none;
    }

    .rayu-acc-outer {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .rayu-acc-panel.active .rayu-acc-outer {
        grid-template-rows: 1fr;
    }

    .rayu-acc-content {
        overflow: hidden;
        min-height: 0;
    }

    .rayu-acc-content .step-label {
        margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rayu-accordion .rayu-acc-panel,
    .rayu-accordion .rayu-acc-panel h2,
    .rayu-acc-spine,
    .rayu-acc-outer,
    .rayu-acc-content {
        transition: none !important;
    }

    /* Pinli yatay akış devre dışı kalır; kartlara elle kaydırarak erişilir */
    .rayu-timeline-h {
        overflow-x: auto;
    }
}

/* Metrik şeridi — arka plan zaten marka renkli üretildi;
   temanın renk blend katmanı devre dışı */
.funfact-style-one-items::after {
    display: none;
}

/* Metrik dipnotu (kanıt notu) */
.rayu-proof-note {
    font-size: 13px;
    color: var(--color-paragraph);
    margin-top: 30px;
}

.funfact-style-one-items .rayu-proof-note {
    color: rgba(255, 255, 255, 0.6);
    margin-top: 44px;
    padding: 0 50px;
}

@media (max-width: 991px) {
    .funfact-style-one-items .rayu-proof-note {
        padding: 0 30px;
    }
}

/* Taahhüt listesi — sözleşme estetiği */
.rayu-terms-item {
    display: flex;
    gap: 30px;
    padding: 26px 10px;
    border-top: 1px solid rgba(0, 6, 98, 0.1);
    transition: background 0.15s ease;
}

.rayu-terms-item:last-child {
    border-bottom: 1px solid rgba(0, 6, 98, 0.1);
}

.rayu-terms-item:hover {
    background: rgba(0, 6, 98, 0.03);
}

.rayu-terms-item .num {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 40px;
    line-height: 1.6;
}

.rayu-terms-item h4 {
    font-size: 18px;
    margin-bottom: 4px;
}

.rayu-terms-item p {
    margin: 0;
}

/* Hizmet kartı görselleri: beyaz zeminli düz ikonlar */
.project-style-one-item .thumb {
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.06);
    border-radius: 14px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.project-style-one-item .thumb img:first-child {
    width: 78%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.project-style-one-item {
    scroll-margin-top: 200px;
}

/* Deste (stacked) görünümü: her kart bir öncekinden 16px aşağıda
   sabitlenir; önceki kartların üst kenarları deste gibi görünür kalır */
@media (min-width: 1024px) {
    .rayu-svc-wrap .project-style-one-item:nth-child(1) { top: 152px; }
    .rayu-svc-wrap .project-style-one-item:nth-child(2) { top: 168px; }
    .rayu-svc-wrap .project-style-one-item:nth-child(3) { top: 184px; }
    .rayu-svc-wrap .project-style-one-item:nth-child(4) { top: 200px; }
    .rayu-svc-wrap .project-style-one-item:nth-child(5) { top: 216px; }
    .rayu-svc-wrap .project-style-one-item:nth-child(6) { top: 232px; }
    .rayu-svc-wrap .project-style-one-item:nth-child(7) { top: 248px; }

    .rayu-svc-wrap .project-style-one-item {
        box-shadow: 0 -14px 30px rgba(0, 6, 98, 0.06);
    }
}

/* Kart pinleri: tıklanabilir; aktif pin degrade dolgulu.
   Açıklama, aktif pinin metnini gösterir; başlığa tıklayınca
   (veya aktif pine tekrar tıklayınca) başlığın kendi metnine döner */
.rayu-svc-tabs li {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.rayu-svc-tabs li.active {
    color: var(--white);
}

.rayu-svc-tabs li.active::after {
    opacity: 0;
}

.rayu-svc-desc {
    min-height: 56px;
    transition: opacity 0.18s ease;
}

.rayu-svc-desc.fading {
    opacity: 0;
}

/* Kart sütununun solunda sabit (sticky) numara rayı —
   tıklanınca ilgili karta kaydırır, görünen karta göre vurgulanır */
.rayu-svc-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.rayu-svc-wrap .project-style-one-items {
    flex: 1;
    min-width: 0;
}

/* Şerit ölçüsü tek yerden: kutu kenarı ve yazı bundan türer.
   46px'ten %40 küçültüldü. */
.rayu-svc-wrap {
    --ray-kutu: 28px;
}

.rayu-num-rail-col {
    flex: none;
    width: var(--ray-kutu);
    align-self: stretch;
}

/* Numaralar bitişik tek şerit: aralarında boşluk yok,
   komşu kenarlıklar çakışır, yalnız uçlar yuvarlatılır */
.rayu-num-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 210px;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Sağ taraf kartlara yapışır: yalnız sol köşeler yuvarlatılır.
       Yarıçap da şeritle birlikte küçüldü (14px → 9px). */
    border-radius: 9px 0 0 9px;
    overflow: hidden;
    /* Siluet gibi dursun: gölge yok, kutular saydam */
    box-shadow: none;
    /* Kartların gölgesi (0 -14px 30px) sola taşıp saydam numara
       kutularının içinden görünüyordu; ray bölüm zemininde opak durur. */
    background: var(--bg-gray);
}

/* Ray, kartların (z-index: 1) üstünde kalsın ki gölge üzerine düşmesin */
.rayu-num-rail-col {
    position: relative;
    z-index: 3;
}

.rayu-num-rail a.num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ray-kutu);
    height: var(--ray-kutu);
    border: 1px solid rgba(0, 6, 98, 0.05);
    border-right: none;
    border-bottom: none;
    background: rgba(0, 6, 98, 0.028);
    color: rgba(0, 6, 98, 0.3);
    font-weight: 700;
    font-size: 9px;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
}

.rayu-num-rail li:last-child a.num {
    border-bottom: 1px solid rgba(0, 6, 98, 0.05);
}

.rayu-num-rail a.num:hover {
    background: rgba(232, 101, 15, 0.07);
    color: rgba(232, 101, 15, 0.7);
}

.rayu-num-rail li.active a.num {
    background: rgba(232, 101, 15, 0.12);
    border-color: transparent;
    color: rgba(232, 101, 15, 0.85);
}

@media (max-width: 1199px) {
    .rayu-num-rail-col {
        display: none;
    }
}

/* Taahhütler: üstteki gri bölümden sonra nefes payı */
.rayu-terms-area {
    padding-top: 80px;
}

/* Hizmetler → Teşhis arası kutulu CTA — zemin komşu bölümlerle aynı
   gri akışta kalır, beyaz bant oluşmaz */
.rayu-mid-cta {
    background: var(--bg-gray);
}

.rayu-mid-cta .rayu-mid-cta-inner {
    border-radius: 30px;
    padding: 58px 64px;
    overflow: hidden;
}

.rayu-mid-cta .rayu-mid-cta-inner h2 {
    color: var(--white);
    font-size: 32px;
    margin-bottom: 10px;
}

.rayu-mid-cta .rayu-mid-cta-inner p {
    margin: 0;
    opacity: 0.82;
}

.rayu-mid-cta .rayu-mid-cta-btn {
    text-align: right;
}

@media (max-width: 991px) {
    .rayu-mid-cta .rayu-mid-cta-inner {
        padding: 40px 30px;
    }

    .rayu-mid-cta .rayu-mid-cta-btn {
        text-align: left;
        margin-top: 22px;
    }
}

/* ----------------------------------
   Süreç timeline'ı — TAM GENİŞLİK, pinli yatay akış.
   Kartlar konteynerin sol hizasından başlar, ekranın sağ
   kenarına taşar; dikey scroll rayı yatay sürükler.
------------------------------------- */
/* Üst dolgu, pinli durumda yüzen menünün altında nefes payı bırakır */
.rayu-tl-full {
    padding: 130px 0 70px;
    overflow: hidden;
    background: var(--white);
}

/* Pinlenen bölümler ekran yüksekliğini kaplar; aksi hâlde pin sırasında
   altta boş bir şerit kalıyor. Artan yükseklik ölü boşluğa dönüşmesin
   diye her iki bölümün de altına gerçek bir içerik şeridi konuldu ve
   `margin-top: auto` ile ekranın altına yaslandı. */
@media (min-width: 992px) {
    .rayu-tl-full,
    .rayu-hacc-area {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: 108px;
        padding-bottom: 44px;
    }

    /* Ray, başlık ile alt şerit arasındaki alanı kaplar; kartlar bu
       alanın ortasında durur ve makul bir tavana kadar uzar. */
    .rayu-tl-full > .rayu-timeline-h {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    .rayu-tl-full .rayu-tl-track {
        height: min(100%, 400px);
        align-items: stretch;
    }

    .rayu-tl-full .rayu-tl-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .rayu-tl-full > .rayu-tl-foot {
        flex: 0 0 auto;
        padding-top: 34px;
    }

    .rayu-hacc-area > .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* Paneller kalan yüksekliği kaplar; açık panelin içeriği zaten
       uzun olduğu için büyümek boşluk yaratmıyor. */
    .rayu-hacc-area .rayu-hacc {
        margin-top: 30px;
        flex: 1 1 auto;
        height: auto;
        min-height: 420px;
        max-height: 640px;
    }

    .rayu-hacc-area .rayu-hacc-foot {
        flex: 0 0 auto;
    }
}

/* Alçak ekranlarda (dizüstü) bölüm 100vh'ı aşıp alt şeridi ekran
   dışında bırakıyordu; dolgular ve panel taban yüksekliği kısılır. */
@media (min-width: 992px) and (max-height: 880px) {
    .rayu-tl-full,
    .rayu-hacc-area {
        padding-top: 88px;
        padding-bottom: 30px;
    }

    .rayu-tl-full > .rayu-timeline-h,
    .rayu-hacc-area .rayu-hacc {
        margin-top: 22px;
    }

    .rayu-hacc-area .rayu-hacc {
        min-height: 270px;
    }

    .rayu-tl-full > .rayu-tl-foot {
        padding-top: 24px;
    }

    .rayu-hacc-foot {
        margin-top: 18px;
        padding: 16px 24px;
    }

    /* Panel kısaldığında 90° dönük başlık alt kenardan taşıyordu:
       kapalı panelde ikon gizlenir, başlık yukarıdan başlar. */
    .rayu-hacc-panel:not(.active) .rayu-hacc-icon {
        opacity: 0;
    }

    .rayu-hacc-panel:not(.active) .rayu-hacc-title {
        top: 56px;
        font-size: 12.5px;
        letter-spacing: -0.2px;
    }
}

/* Timeline alt şeridi: taahhüt etiketleri + iletişim satırı */
.rayu-tl-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.rayu-tl-chips li {
    padding: 9px 18px;
    border: 1px solid #e4e8ee;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-heading);
    background: #fbfcfd;
}

.rayu-tl-foot .tl-ask {
    display: block;
}

/* Yatay akordiyon alt şeridi: kısa vaat + çağrı butonu */
.rayu-hacc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 34px;
    padding: 24px 30px;
    border: 1px solid #e8ecf1;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(232, 101, 15, 0.06), rgba(47, 176, 175, 0.08));
}

.rayu-hacc-foot .txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rayu-hacc-foot .txt strong {
    font-size: 18px;
    color: var(--color-heading);
}

.rayu-hacc-foot .txt span {
    font-size: 15px;
    color: var(--color-paragraph);
}

@media (max-width: 767px) {
    .rayu-hacc-foot {
        padding: 20px;
    }

    .rayu-hacc-foot .txt strong {
        font-size: 16px;
    }
}

.rayu-tl-head .site-heading {
    margin-bottom: 0;
}

.rayu-tl-hint {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-paragraph);
}

.rayu-tl-hint i {
    color: var(--color-primary);
    margin-left: 6px;
}

/* Scroll'a bağlı ilerleme çubuğu */
.rayu-tl-progress {
    position: relative;
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 6, 98, 0.08);
    margin: 44px 0 0;
}

.rayu-tl-progress .fill {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--rayu-teal) 0%, var(--rayu-petrol) 55%, var(--rayu-orange) 100%);
    transform: scaleX(0);
    transform-origin: left center;
}

.rayu-tl-progress .pt {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--dot, var(--rayu-teal));
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--dot, var(--rayu-teal));
}

.rayu-tl-progress .pt:last-child {
    transform: translate(-100%, -50%);
}

.rayu-tl-progress .pt:first-child {
    transform: translate(0, -50%);
}

/* Tam genişlik ray: ilk kart konteyner soluna hizalanır */
.rayu-timeline-h {
    margin-top: 54px;
    overflow: hidden;
}

.rayu-tl-track {
    display: flex;
    gap: 30px;
    min-width: min-content;
    position: relative;
    will-change: transform;
    /* --tl-pad rayu.js tarafından gerçek konteyner hizasından hesaplanır;
       aşağıdaki değer yalnızca betik çalışmadan önceki yedektir. Sağ dolgu
       sola eşit olduğu için kaydırma bittiğinde son kart konteynerin sağ
       kenarına oturur, ekranın en sağına yapışmaz. */
    padding-left: var(--tl-pad, max(15px, calc((100vw - 1400px) / 2 + 12px)));
    padding-right: var(--tl-pad, max(15px, calc((100vw - 1400px) / 2 + 12px)));
}

/* Kart: minimal ikon kutusu + bilgi kutusu */
.rayu-tl-item {
    position: relative;
    flex: 0 0 420px;
    width: 420px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
    padding: 34px 34px 36px;
    box-shadow: 0 14px 36px rgba(0, 6, 98, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rayu-tl-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 6, 98, 0.10);
}

.rayu-tl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.rayu-tl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 22px;
    color: var(--accent, var(--rayu-teal));
    background: color-mix(in srgb, var(--accent, #2fb0af) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #2fb0af) 26%, transparent);
    transition: background 0.3s ease, color 0.3s ease;
}

.rayu-tl-item:hover .rayu-tl-icon {
    background: var(--accent, var(--rayu-teal));
    color: var(--white);
}

.rayu-tl-item .num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 58px;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(0, 6, 98, 0.18);
    pointer-events: none;
}

.rayu-tl-info .tl-step {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, var(--color-primary));
    margin-bottom: 8px;
}

.rayu-tl-info h4 {
    font-size: 22px;
    margin-bottom: 10px;
}

.rayu-tl-info p {
    margin: 0;
    font-size: 15px;
    color: var(--color-paragraph);
}

.rayu-tl-foot {
    text-align: center;
    margin-top: 40px;
    font-size: 15px;
}

@media (max-width: 1199px) {
    .rayu-tl-item {
        flex-basis: 380px;
        width: 380px;
    }
}

/* Mobil / tablet: pin yok, parmakla yatay kaydırma */
@media (max-width: 991px) {
    .rayu-tl-full {
        padding: 70px 0 30px;
    }

    .rayu-tl-hint {
        text-align: left;
        margin: 14px 0 4px;
    }

    .rayu-timeline-h {
        margin-top: 34px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 22px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .rayu-timeline-h::-webkit-scrollbar {
        height: 6px;
    }

    .rayu-timeline-h::-webkit-scrollbar-track {
        background: rgba(0, 6, 98, 0.06);
        border-radius: 6px;
    }

    .rayu-timeline-h::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--rayu-teal), var(--rayu-orange));
        border-radius: 6px;
    }

    .rayu-tl-track {
        padding-left: 15px;
        padding-right: 15px;
        gap: 18px;
    }

    .rayu-tl-item {
        flex-basis: 300px;
        width: 300px;
        padding: 26px 24px 28px;
        scroll-snap-align: start;
    }

    .rayu-tl-item .num {
        font-size: 46px;
    }

    .rayu-tl-icon {
        width: 54px;
        height: 54px;
        font-size: 19px;
    }
}

/* ----------------------------------
   Neden Rayu — yatay akordiyon (yeniden tasarim).
   Kapalı panel: numara + ikon üstte, başlık 90° dönük.
   Açılırken başlık dönerek yerine oturur, içerik belirir.
   Scroll ile pinli ilerler; zemin beyaz.
------------------------------------- */
.rayu-hacc-area {
    padding: 130px 0 70px;
    background: var(--white);
}

.rayu-hacc-area .site-heading {
    margin-bottom: 0;
}

.rayu-hacc {
    display: flex;
    gap: 12px;
    margin-top: 44px;
    height: 520px;
}

.rayu-hacc-panel {
    position: relative;
    flex: 0 0 104px;
    min-width: 104px;
    border-radius: 22px;
    background: #f4f6f9;
    overflow: hidden;
    transition: flex 640ms cubic-bezier(0.22, 1, 0.36, 1),
                min-width 640ms cubic-bezier(0.22, 1, 0.36, 1),
                background 480ms ease, box-shadow 480ms ease;
}

.rayu-hacc-panel:not(.active):hover {
    background: #eef1f6;
}

.rayu-hacc-panel.active {
    flex: 1 1 auto;
    min-width: 0;
    background: linear-gradient(135deg, var(--accent, #2fb0af) 0%, color-mix(in srgb, var(--accent, #2fb0af) 78%, #0b1020) 100%);
    box-shadow: 0 24px 54px rgba(0, 6, 98, 0.16);
}

/* Tıklama yüzeyi */
.rayu-hacc-toggle {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.rayu-hacc-panel.active .rayu-hacc-toggle {
    cursor: default;
    pointer-events: none;
}

.rayu-hacc-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -5px;
}

/* İkon: kapalıyken ortada, açılınca sola kayar */
.rayu-hacc-icon {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 18px;
    color: var(--accent, #2fb0af);
    background: color-mix(in srgb, var(--accent, #2fb0af) 13%, transparent);
    transition: left 640ms cubic-bezier(0.22, 1, 0.36, 1),
                top 640ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
                background 480ms ease, color 480ms ease;
}

.rayu-hacc-panel.active .rayu-hacc-icon {
    top: 34px;
    left: 46px;
    transform: translateX(0);
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}

/* Sıra numarası: kapalıyken en altta ufak, açıkken gizli */
.rayu-hacc-idx {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    color: var(--accent, #2fb0af);
    opacity: 0.65;
    transition: opacity 300ms ease;
}

.rayu-hacc-panel.active .rayu-hacc-idx {
    opacity: 0;
}

/* Açık panelde köşedeki dev hayalet numara */
.rayu-hacc-ghost {
    position: absolute;
    top: 18px;
    right: 34px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 92px;
    line-height: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: opacity 420ms ease 220ms;
    pointer-events: none;
}

.rayu-hacc-panel.active .rayu-hacc-ghost {
    opacity: 1;
}

/* Etiket */
.rayu-hacc-kicker {
    position: absolute;
    top: 100px;
    left: 46px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    opacity: 0;
    transition: opacity 360ms ease 240ms;
}

.rayu-hacc-panel.active .rayu-hacc-kicker {
    opacity: 1;
}

/* Dönen başlık: dikey → yatay, dikey merkezi sabit kalır */
.rayu-hacc-title {
    position: absolute;
    top: 136px;
    left: 50%;
    display: block;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    color: var(--color-heading);
    transform-origin: left center;
    transform: rotate(90deg);
    transition: transform 660ms cubic-bezier(0.22, 1, 0.36, 1),
                left 660ms cubic-bezier(0.22, 1, 0.36, 1),
                font-size 660ms cubic-bezier(0.22, 1, 0.36, 1),
                color 420ms ease;
}

.rayu-hacc-panel.active .rayu-hacc-title {
    left: 46px;
    transform: rotate(0deg);
    font-size: 32px;
    color: var(--white);
}

/* Gövde */
.rayu-hacc-body {
    position: absolute;
    left: 46px;
    right: 44px;
    top: 200px;
    bottom: 34px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.rayu-hacc-panel.active .rayu-hacc-body {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 420ms ease 300ms;
}

.rayu-hacc-body p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    max-width: 62ch;
}

.rayu-hacc-chips {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rayu-hacc-chips li {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--white);
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .rayu-hacc {
        height: 540px;
    }

    .rayu-hacc-title {
        font-size: 18px;
    }

    .rayu-hacc-panel.active .rayu-hacc-title {
        font-size: 26px;
    }
}

/* Mobil: dokunmatik dikey akordiyon */
@media (max-width: 991px) {
    .rayu-hacc-area {
        padding: 30px 0 70px;
        min-height: 0;
        display: block;
    }

    .rayu-hacc {
        display: block;
        height: auto;
        margin-top: 28px;
    }

    .rayu-hacc-panel {
        min-width: 0;
        margin-bottom: 12px;
        border-radius: 18px;
    }

    .rayu-hacc-toggle {
        position: relative;
        inset: auto;
        width: 100%;
        height: 84px;
    }

    .rayu-hacc-icon,
    .rayu-hacc-panel.active .rayu-hacc-icon {
        top: 18px;
        left: 22px;
        transform: none;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 16px;
    }

    .rayu-hacc-idx,
    .rayu-hacc-ghost {
        display: none;
    }

    .rayu-hacc-kicker {
        top: 18px;
        left: 82px;
        opacity: 1;
        color: var(--accent, #2fb0af);
    }

    .rayu-hacc-panel.active .rayu-hacc-kicker {
        color: rgba(255, 255, 255, 0.8);
    }

    .rayu-hacc-title,
    .rayu-hacc-panel.active .rayu-hacc-title {
        position: absolute;
        top: 38px;
        left: 82px;
        right: 22px;
        transform: rotate(0deg);
        font-size: 17px;
        line-height: 1.35;
        white-space: normal;
    }

    .rayu-hacc-body {
        position: static;
        display: grid;
        grid-template-rows: 0fr;
        opacity: 1;
        padding: 0 22px;
        transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rayu-hacc-panel.active .rayu-hacc-body {
        grid-template-rows: 1fr;
        padding-bottom: 24px;
        transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rayu-hacc-body > * {
        overflow: hidden;
        min-height: 0;
    }

    .rayu-hacc-body p {
        font-size: 15px;
    }

    .rayu-hacc-area .rayu-tl-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rayu-hacc-panel,
    .rayu-hacc-title,
    .rayu-hacc-icon,
    .rayu-hacc-body {
        transition: none !important;
    }
}

/* İletişim: hızlı yollar kartları */
.rayu-contact-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rayu-cq-item {
    display: block;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 16px;
    padding: 30px 30px 26px;
    color: var(--color-heading);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rayu-cq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 6, 98, 0.08);
    color: var(--color-heading);
}

.rayu-cq-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 18px;
    margin-bottom: 18px;
}

.rayu-cq-item h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.rayu-cq-item p {
    margin: 0;
    font-size: 14px;
    color: var(--color-paragraph);
}

@media (max-width: 991px) {
    .rayu-contact-quick {
        grid-template-columns: 1fr;
    }
}

/* Teknoloji yığını: araç logoları + isimleri gridi */
.rayu-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    height: 100%;
    align-content: center;
}

.rayu-tool {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-heading);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rayu-tool:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 6, 98, 0.08);
}

.rayu-tool img {
    width: 30px;
    height: 30px;
    flex: none;
    object-fit: contain;
}

.rayu-tool .chip {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575px) {
    .rayu-tools-grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }
}

/* Kutulu DSP bölümünde içerik kutuya göre ortalanır
   (container-stage-lg viewport'a göre hizalayıp sağa itiyordu) */
#platform .container-stage-lg {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1320px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Teknoloji yığını — büyük etiketler */
ul.project-tags.rayu-stack li {
    font-size: 17px;
    padding: 12px 22px;
}

ul.project-tags.rayu-stack li small {
    display: block;
    font-size: 12px;
    color: var(--color-paragraph);
    margin-top: 2px;
}

/* Teşhis akordiyonu — cevap içi etiketler
   (açık panel degrade zeminli olduğundan yarı saydam beyaz) */
.accordion-body .diag-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.accordion-body .diag-label + p {
    margin-bottom: 18px;
}

.accordion-body .diag-label + p:last-child {
    margin-bottom: 0;
}

/* İnce CTA bandından sonraki bölüm bandın hemen altında başlar */
.rayu-cta-strip + .about-style-one-area.default-padding {
    padding-top: 50px;
}

/* Metrik kartının negatif alt marginı sonrası nefes payı */
.funfact-style-one-area + .rayu-cta-strip {
    margin-top: 100px;
}

@media (min-width: 1024px) {
    .banner-style-one-area.rayu-hero-video {
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Showreel kartı — hero sınırına yarı biner, sinematik yuvarlatılmış çerçeve */
.rayu-reel .rayu-reel-card {
    position: relative;
    margin-top: -100px;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    box-shadow: 0 30px 80px rgba(0, 6, 98, 0.25);
    z-index: 2;
}

.rayu-reel-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Alt kenarda okunabilirlik degradesi */
.rayu-reel-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 6, 20, 0.55) 0%, rgba(4, 6, 20, 0) 38%);
    pointer-events: none;
}

.rayu-reel-badge {
    position: absolute;
    left: 40px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 3;
}

.rayu-reel-badge .play {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--bg-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

@media (max-width: 991px) {
    .banner-style-one-area.rayu-hero-video {
        padding-bottom: 120px;
    }

    .rayu-reel .rayu-reel-card {
        margin-top: -60px;
        border-radius: 20px;
        aspect-ratio: 16 / 10;
    }

    .rayu-reel-badge {
        left: 22px;
        bottom: 18px;
    }

    .rayu-reel-badge .play {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rayu-reel-card video {
        display: none;
    }
}

/* İnce CTA bandı */
.rayu-cta-strip {
    border-top: 1px solid rgba(0, 6, 98, 0.1);
    border-bottom: 1px solid rgba(0, 6, 98, 0.1);
    padding: 28px 0;
}

.rayu-cta-strip .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.rayu-cta-strip span {
    font-size: 17px;
    color: var(--color-heading);
    font-weight: 500;
}

/* Partner rozetleri */
.rayu-partner-badge {
    border: 1px solid rgba(0, 6, 98, 0.12);
    border-radius: 10px;
    background: var(--white);
    min-width: 240px;
    min-height: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-heading);
    padding: 20px 30px;
}

/* Mobilde marka bandı ve taahhüt boşlukları */
@media (max-width: 767px) {
    .rayu-terms-item {
        gap: 16px;
        padding: 20px 6px;
    }
}

/* ----------------------------------
   Hizmet detay sayfası
------------------------------------- */
.rayu-svc-hero-icon {
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 20px;
    padding: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rayu-svc-hero-icon img {
    width: 72%;
    max-height: 240px;
    object-fit: contain;
}

.rayu-step-card {
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 18px;
    padding: 30px 26px 28px;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rayu-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 6, 98, 0.08);
}

.rayu-step-card .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    color: var(--accent, var(--rayu-teal));
    background: color-mix(in srgb, var(--accent, #2fb0af) 12%, transparent);
    margin-bottom: 18px;
}

.rayu-step-card h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.rayu-step-card p {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 991px) {
    .rayu-step-card {
        margin-bottom: 20px;
    }
}

/* Diğer hizmetler ızgarası */
.rayu-svc-others {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.rayu-svc-other {
    display: block;
    text-align: center;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.07);
    border-radius: 16px;
    padding: 24px 14px 20px;
    color: var(--color-heading);
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.rayu-svc-other:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0, 6, 98, 0.08);
    color: var(--accent, var(--color-primary));
}

.rayu-svc-other img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 14px;
}

.rayu-svc-other h4 {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.rayu-svc-other span {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, var(--color-paragraph));
}

@media (max-width: 1199px) {
    .rayu-svc-others { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
    .rayu-svc-others { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------
   Adım adım başvuru formu (wizard)
------------------------------------- */
.rayu-wizard {
    max-width: 900px;
    margin: 50px auto 0;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 24px;
    padding: 44px 46px 40px;
    box-shadow: 0 20px 50px rgba(0, 6, 98, 0.06);
}

.rayu-wizard-steps {
    margin-bottom: 38px;
}

.rayu-wizard-steps .bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 6, 98, 0.08);
    overflow: hidden;
}

.rayu-wizard-steps .fill {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 4px;
    background: var(--bg-gradient);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.rayu-wizard-steps ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 18px 0 0;
    padding: 0;
    gap: 10px;
}

.rayu-wizard-steps li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-paragraph);
    opacity: 0.55;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.rayu-wizard-steps li.active,
.rayu-wizard-steps li.done {
    opacity: 1;
    color: var(--color-heading);
}

.rayu-wizard-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: rgba(0, 6, 98, 0.06);
    font-size: 12px;
    font-weight: 800;
}

.rayu-wizard-steps li.active span {
    background: var(--color-primary);
    color: var(--white);
}

.rayu-wizard-steps li.done span {
    background: rgba(232, 101, 15, 0.15);
    color: var(--color-primary);
}

.rayu-wizard-panel {
    display: none;
    animation: rayuFadeUp 0.35s ease both;
}

.rayu-wizard-panel.active {
    display: block;
}

@keyframes rayuFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rayu-wizard .q {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.rayu-wizard .hint {
    font-size: 14px;
    color: var(--color-paragraph);
    margin-bottom: 18px;
}

.rayu-wizard .q + .rayu-choice-grid {
    margin-top: 20px;
}

/* Seçenek kutuları */
.rayu-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.rayu-choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.rayu-choice-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.rayu-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rayu-choice .box {
    display: block;
    height: 100%;
    border: 1px solid rgba(0, 6, 98, 0.1);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rayu-choice .box .t {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-heading);
}

.rayu-choice .box .s {
    display: block;
    font-size: 12.5px;
    color: var(--color-paragraph);
    margin-top: 4px;
}

.rayu-choice .box:hover {
    border-color: rgba(232, 101, 15, 0.4);
    background: rgba(232, 101, 15, 0.03);
}

.rayu-choice input:checked + .box {
    border-color: var(--color-primary);
    background: rgba(232, 101, 15, 0.08);
    box-shadow: 0 8px 22px rgba(232, 101, 15, 0.12);
}

.rayu-choice input:focus-visible + .box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rayu-choice.chip .box {
    padding: 11px 16px;
    border-radius: 999px;
    text-align: center;
}

.rayu-choice.chip .box .t {
    font-size: 14px;
    font-weight: 500;
}

/* Navigasyon */
.rayu-wizard-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(0, 6, 98, 0.08);
}

.rayu-wizard-nav .rayu-prev {
    margin-right: auto;
}

.rayu-wizard-nav button[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

.rayu-wizard .form-control {
    width: 100%;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.1);
    border-radius: 12px;
    padding: 13px 17px;
    font-size: 15px;
    box-shadow: none;
}

.rayu-wizard .form-group {
    margin-bottom: 14px;
}

.rayu-hacc-cta {
    align-self: flex-start;
}

@media (max-width: 767px) {
    .rayu-wizard {
        padding: 28px 22px 26px;
        border-radius: 18px;
    }

    .rayu-choice-grid,
    .rayu-choice-grid.cols-3,
    .rayu-choice-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .rayu-wizard-steps ul li {
        font-size: 0;
        gap: 0;
    }

    .rayu-wizard-steps ul li span {
        font-size: 12px;
    }

    .rayu-wizard .q {
        font-size: 19px;
    }
}

/* Wizard geri bildirim kutusu */
.rayu-wizard .alert-msg {
    margin-top: 18px;
    font-size: 15px;
}

.rayu-wizard .alert-msg.is-ok {
    background: rgba(47, 176, 175, 0.1);
    border: 1px solid rgba(47, 176, 175, 0.35);
    color: var(--color-heading);
    border-radius: 14px;
    padding: 18px 22px;
}

.rayu-wizard .alert-msg.is-error {
    background: rgba(232, 101, 15, 0.08);
    border: 1px solid rgba(232, 101, 15, 0.35);
    color: var(--color-heading);
    border-radius: 14px;
    padding: 14px 18px;
}

/* Hizmet detay — kenar çubuklu düzen */
/* Kapak artık şeffaf ikon değil, geniş fotoğraf */
.rayu-svc-detail-thumb {
    border-radius: 20px;
    overflow: hidden;
}

.rayu-svc-detail-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.services-details-area .rayu-step-card {
    margin-bottom: 24px;
}

.rayu-svc-facts .content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rayu-svc-facts .content li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(0, 6, 98, 0.08);
}

.rayu-svc-facts .content li:last-child {
    border-bottom: none;
}

.rayu-svc-facts .content li span {
    font-size: 14px;
    color: var(--color-paragraph);
}

.rayu-svc-facts .content li strong {
    font-size: 15px;
    color: var(--color-heading);
    text-align: right;
}

.rayu-svc-facts .widget-title {
    margin-bottom: 6px;
}

/* Kenar çubuğundaki aktif hizmet, markanın rengiyle işaretlenir */
.services-list-widget ul li.current-menu-item a {
    border-color: rgba(232, 101, 15, 0.35);
    color: var(--color-primary);
}

/* ----------------------------------
   Hizmet detayı — uzun gövde blokları
   (lead / quote / columns / stats)
------------------------------------- */
.rayu-svc-lead {
    font-size: 20px;
    line-height: 34px;
    color: var(--color-heading);
    padding-left: 24px;
    border-left: 3px solid var(--color-primary);
}

@media (max-width: 767px) {
    .rayu-svc-lead {
        font-size: 17px;
        line-height: 30px;
        padding-left: 18px;
    }
}

.rayu-svc-quote {
    position: relative;
    padding: 34px 38px 34px 78px;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(232, 101, 15, 0.07), rgba(47, 176, 175, 0.09));
}

.rayu-svc-quote::before {
    content: "\201C";
    position: absolute;
    left: 28px;
    top: 24px;
    font-size: 76px;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.5;
}

.rayu-svc-quote p {
    margin: 0;
    font-size: 18px;
    line-height: 32px;
    color: var(--color-heading);
    font-weight: 500;
}

@media (max-width: 767px) {
    .rayu-svc-quote {
        padding: 28px 22px 28px 22px;
    }

    .rayu-svc-quote::before {
        display: none;
    }
}

.rayu-svc-col {
    height: 100%;
    margin-bottom: 24px;
    padding: 26px 26px 20px;
    border: 1px solid #e8ecf1;
    border-radius: 18px;
    background: #fbfcfd;
    transition: border-color 300ms ease, transform 300ms ease;
}

.rayu-svc-col:hover {
    border-color: rgba(232, 101, 15, 0.35);
    transform: translateY(-4px);
}

.rayu-svc-col h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.rayu-svc-col p {
    margin: 0;
    font-size: 15px;
    line-height: 27px;
}

.rayu-svc-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.rayu-svc-stats-row .fun-fact {
    flex: 1 1 150px;
    padding: 22px 20px;
    border-radius: 18px;
    background: var(--bg-gradient);
    color: var(--white);
}

.rayu-svc-stats-row .fun-fact .v {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.rayu-svc-stats-row .fun-fact .k {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.9;
}

/* İç sayfa kapanış çağrısı: iki butonu yan yana tutar */
.rayu-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Tema list-style-three'yi koyu zemin için tasarlamış (paragraf beyaz).
   Açık zeminli bölümlerde okunur renge çeviriyoruz. */
.services-details-area ul.list-style-three li p,
.rayu-on-light ul.list-style-three li p {
    color: var(--color-paragraph);
}

/* ----------------------------------
   Hizmetler sayfası — tema bölümlerinin marka uyarlaması
------------------------------------- */

/* Tema, süreç ikonlarını mor PNG olarak veriyor; marka renginde
   glif kullanıyoruz. */
.process-style-three-item .icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 24px;
    color: var(--white);
    background: var(--bg-gradient);
}

/* "Nereden başlanır" satırlarındaki ikon kutusu */
.rayu-entry-items .logo {
    display: flex;
    align-items: center;
}

.rayu-entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 20px;
    color: var(--color-primary);
    background: rgba(232, 101, 15, 0.1);
    transition: all 400ms ease;
}

.rayu-entry-items .hover-active-item.active .rayu-entry-icon,
.rayu-entry-items .hover-active-item:hover .rayu-entry-icon {
    color: var(--white);
    background: var(--bg-gradient);
}

/* Satır sonundaki "yıl" alanı burada kapsam etiketi taşıyor */
.rayu-entry-items .year h2 {
    font-size: 26px;
    white-space: nowrap;
}

/* Hizmet listesi görselleri kart gibi dursun */
.rayu-svc-index .service-tab-contents img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
}

.rayu-svc-index .service-tab-content-box {
    min-height: 460px;
}

/* ----------------------------------
   Hakkımızda — tema bölümlerinin marka uyarlaması
------------------------------------- */
.rayu-about-thumb img {
    width: 100%;
    border-radius: 24px;
}

/* choose-us görselinin tema dekor şekli kaldırıldı; panel görseli
   sütunun tamamını kullanır. */
.rayu-choose-thumb {
    justify-content: center;
    padding-bottom: 90px;
}

.rayu-choose-thumb img {
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

/* Breadcrumb görselleri parlak olduğunda başlık okunmuyordu */
.breadcrumb-area.bg-theme::before {
    background: linear-gradient(180deg, rgba(9, 14, 32, 0.72), rgba(9, 14, 32, 0.55));
    opacity: 1;
}

/* ----------------------------------
   Hizmetler — üst üste yığılan kartlar
   Kartlar sticky; her biri bir öncekinden 16px aşağıda durur,
   sonraki kart üzerine kayarak yığın oluşturur.
------------------------------------- */
.rayu-stack {
    margin-top: 10px;
}

.rayu-stack-card {
    margin-bottom: 46px;
}

.rayu-stack-card:last-child {
    margin-bottom: 0;
}

.rayu-stack-inner {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-radius: 26px;
    background: var(--white);
    box-shadow: 0 24px 60px rgba(0, 6, 98, 0.07);
}

.rayu-stack-media {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

.rayu-stack-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rayu-stack-card:hover .rayu-stack-media img {
    transform: scale(1.04);
}

/* Numara, görselin üstünde degrade rozet */
.rayu-stack-no {
    position: absolute;
    top: 22px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 38px;
    padding: 0 14px;
    border-radius: 100px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--white);
    background: var(--accent, var(--color-primary));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.rayu-stack-body {
    padding: 46px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rayu-stack-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent, var(--color-primary));
}

.rayu-stack-body h3 {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 14px;
}

.rayu-stack-body h3 a {
    color: var(--color-heading);
}

.rayu-stack-body h3 a:hover {
    color: var(--accent, var(--color-primary));
}

.rayu-stack-body > p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 29px;
}

.rayu-stack-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rayu-stack-list li {
    padding: 8px 16px;
    border: 1px solid rgba(0, 6, 98, 0.1);
    border-radius: 100px;
    font-size: 13.5px;
    color: var(--color-paragraph);
    background: #fbfcfd;
}

/* Yığılma yalnız masaüstünde; mobilde kartlar alt alta akar */
@media (min-width: 992px) {
    .rayu-stack-card {
        position: sticky;
        top: calc(130px + var(--i) * 16px);
    }
}

@media (max-width: 991px) {
    .rayu-stack-inner {
        grid-template-columns: 1fr;
    }

    .rayu-stack-media {
        min-height: 220px;
        max-height: 260px;
    }

    .rayu-stack-body {
        padding: 30px 26px 34px;
    }

    .rayu-stack-body h3 {
        font-size: 24px;
    }

    .rayu-stack-card {
        margin-bottom: 26px;
    }
}

/* Tam genişlik yerine footer gibi kutu düzeni
   (kırılım footer/kapanış CTA ile aynı tutuldu) */
@media (min-width: 1450px) {
    .rayu-boxed {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50px;
        overflow: hidden;
    }
}

/* ----------------------------------
   Kariyer — sade giriş notları
------------------------------------- */
.rayu-kariyer-notlar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.rayu-kariyer-notlar li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border: 1px solid #e4e8ee;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-heading);
    background: #fbfcfd;
}

.rayu-kariyer-notlar li i {
    font-size: 14px;
    color: var(--color-primary);
}

/* ----------------------------------
   İç sayfa başlığı — iki sütunlu, sayfaya özel görselli
   (tema breadcrumb-area'sının ortalanmış düz hâlinin yerine)
------------------------------------- */
.rayu-page-hero {
    position: relative;
    overflow: hidden;
    padding: 190px 0 100px;
    background: radial-gradient(120% 140% at 15% 0%, #101a33 0%, #080d1c 55%, #05080f 100%);
}

/* Marka renkli yumuşak ışık: görselle zemini birbirine bağlar */
.rayu-page-hero-glow {
    position: absolute;
    right: -8%;
    bottom: -40%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 101, 15, 0.30) 0%, rgba(47, 176, 175, 0.18) 45%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.rayu-page-hero .container {
    position: relative;
    z-index: 2;
}

/* Kırıntı yolu */
.rayu-page-yol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 14px;
}

.rayu-page-yol a,
.rayu-page-yol span[aria-current] {
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.25s ease;
}

.rayu-page-yol a:hover {
    color: var(--white);
}

.rayu-page-yol span[aria-current] {
    color: var(--color-primary);
    font-weight: 600;
}

.rayu-page-yol .ayrac {
    color: rgba(255, 255, 255, 0.25);
}

.rayu-page-hero-info .sub-title {
    margin-bottom: 14px;
}

.rayu-page-hero-info h1 {
    margin: 0;
    font-size: 54px;
    line-height: 1.12;
    color: var(--white);
}

.rayu-page-hero-info p {
    margin: 20px 0 0;
    max-width: 520px;
    font-size: 17px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.72);
}

/* Görsel: yuvarlatılmış, hafif eğik duran kart */
.rayu-page-hero-thumb {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

.rayu-page-hero-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
}

/* Görselin alt kenarı zemine yumuşak geçsin */
.rayu-page-hero-thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background: linear-gradient(to top, rgba(5, 8, 15, 0.55), transparent);
    pointer-events: none;
}

@media (max-width: 1199px) {
    .rayu-page-hero-info h1 {
        font-size: 44px;
    }
}

/*
   1024px altında tema başlık çubuğunu akışa alıyor (validnavs.css) — artık
   içeriğin üstüne binmiyor. Masaüstündeki büyük üst pay başlığı temizlemek
   içindi; burada karşılığı olmadan boşluk olarak görünüyordu. Bu yüzden pay
   yalnızca bölüm nefesi kadar bırakılıyor.
*/
@media (max-width: 1023px) {
    .rayu-page-hero {
        padding: 64px 0 70px;
    }
}

@media (max-width: 991px) {
    .rayu-page-hero-info h1 {
        font-size: 36px;
    }

    .rayu-page-hero-thumb {
        margin-top: 40px;
    }

    .rayu-page-hero-thumb img {
        max-height: 260px;
    }
}

@media (max-width: 767px) {
    .rayu-page-hero {
        padding: 44px 0 56px;
    }

    .rayu-page-hero-info h1 {
        font-size: 30px;
    }

    .rayu-page-hero-info p {
        font-size: 15.5px;
        line-height: 28px;
    }
}

/* ----------------------------------
   Mobil başlık çubuğu — logo/ikon kontrastı
   Tema, mobilde `.logo { display: block !important }` ile iki logo
   varyantını da açık bırakıyor; koyu şeritte üst üste biniyorlardı.
------------------------------------- */
@media (max-width: 991px) {
    nav.navbar.validnavs.navbar-fixed .logo.logo-display {
        display: inline-flex !important;
    }

    nav.navbar.validnavs.navbar-fixed .logo.logo-scrolled {
        display: none !important;
    }

    nav.navbar.validnavs.navbar-fixed.sticked .logo.logo-display {
        display: none !important;
    }

    nav.navbar.validnavs.navbar-fixed.sticked .logo.logo-scrolled {
        display: inline-flex !important;
    }

    /* Koyu şeritte hamburger ve ikonlar beyaz; sayfa kayınca koyulaşır.
       Simge <i> etiketinin kendi rengi olduğu için ayrıca hedeflenir;
       yan menü çubukları ise background ile çizilir. */
    nav.navbar.validnavs.navbar-fixed .navbar-header .navbar-toggle,
    nav.navbar.validnavs.navbar-fixed .navbar-header .navbar-toggle i,
    nav.navbar.validnavs.navbar-fixed .attr-nav > ul > li > a,
    nav.navbar.validnavs.navbar-fixed .attr-nav > ul > li > a i {
        color: var(--white) !important;
    }

    nav.navbar.validnavs.navbar-fixed .attr-nav .side-menu a span {
        background: var(--white);
    }

    nav.navbar.validnavs.navbar-fixed.sticked .navbar-header .navbar-toggle,
    nav.navbar.validnavs.navbar-fixed.sticked .navbar-header .navbar-toggle i,
    nav.navbar.validnavs.navbar-fixed.sticked .attr-nav > ul > li > a,
    nav.navbar.validnavs.navbar-fixed.sticked .attr-nav > ul > li > a i {
        color: var(--color-heading) !important;
    }

    nav.navbar.validnavs.navbar-fixed.sticked .attr-nav .side-menu a span {
        background: var(--color-heading);
    }

    /* Çekmecenin içindeki kapatma düğmesi her zaman koyu zeminsiz beyaz
       panelde durduğu için yukarıdaki kuraldan muaf tutulur */
    nav.navbar.validnavs.navbar-fixed #navbar-menu .navbar-toggle,
    nav.navbar.validnavs.navbar-fixed #navbar-menu .navbar-toggle i {
        color: var(--color-heading) !important;
    }
}

/* Mobil çekmece: altta iletişim ve çağrı bloğu */
.rayu-drawer-alt {
    margin-top: 28px;
}

/* Tema, çekmece bağlantılarına capitalize uyguluyor;
   e-posta ve telefon olduğu gibi görünmeli */
.rayu-drawer-alt a,
.rayu-drawer-alt strong {
    text-transform: none;
}

.rayu-drawer-alt .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 18px;
}

.rayu-drawer-alt ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rayu-drawer-alt li {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.rayu-drawer-alt li span {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-paragraph);
    margin-bottom: 2px;
}

.rayu-drawer-alt li a,
.rayu-drawer-alt li strong {
    color: var(--color-heading);
    font-weight: 600;
}

.rayu-drawer-sosyal {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.rayu-drawer-sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f2f5f8;
    color: var(--color-heading);
    font-size: 14px;
    transition: all 0.25s ease;
}

.rayu-drawer-sosyal a:hover {
    background: var(--bg-gradient);
    color: var(--white);
}

/* ----------------------------------
   Hakkımızda marka hikâyesi başlığı
   Sayfanın H1'i hero'da olduğu için bu başlık H2'ye çevrildi (iki H1 vardı).
   Görünüm değişmesin diye temanın .heading-style-two h1 için tanımladığı
   bütün kırılımlar birebir taşındı; style.css'e dokunulmadı.
------------------------------------- */
.heading-style-two h2 {
    font-size: 120px;
    line-height: 1;
}

.heading-style-two h2 strong {
    text-align: right;
    display: inline-flex;
    font-weight: 500;
    width: 100%;
    justify-content: end;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .heading-style-two h2 {
        font-size: 90px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .heading-style-two h2 {
        font-size: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .heading-style-two h2 {
        font-size: 65px;
        line-height: 1.1;
    }

    .heading-style-two h2 strong {
        text-align: left;
        justify-content: inherit;
    }
}

@media only screen and (max-width: 767px) {
    .heading-style-two h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    .heading-style-two h2 strong {
        text-align: left;
        display: block;
    }
}

/* ================================================================
   Anasayfa yardımcı sınıfları  (eski adı: "revize v2")
   Yalnızca home-v2.blade.php'nin kullandığı sınıflar. Canlı anasayfa
   bunlardan etkilenmez; onaylanınca bu blok kalıcı hâle gelecek.
   ================================================================ */

/* ---- Konumlandırma: sayaç yerine metin kartı ---- */
.card-style-one-two .bottom.rayu-kart-duz {
    gap: 22px;
    align-items: flex-start;
    justify-content: flex-start;
}

.card-style-one-two .bottom.rayu-kart-duz img {
    max-height: 84px;
    flex: 0 0 auto;
}

.card-style-one-two .bottom.rayu-kart-duz p {
    margin: 0;
    font-size: 15px;
    line-height: 27px;
    color: var(--color-paragraph);
}

/* ---- Yaklaşım: koyu kutunun içindeki bölüm başlığı ---- */
.rayu-ilkeler .rayu-ilke-bas {
    margin-bottom: 46px;
}

.rayu-ilkeler .rayu-ilke-bas .title {
    color: var(--white);
    margin: 0;
}

.rayu-ilkeler .funfact-style-one-item .info h4 {
    color: var(--white);
    margin-bottom: 12px;
}

/* ---- RAYU Modeli: Timeline'dan taşınan rozetler (koyu zemin) ---- */
.rayu-model-chips {
    margin-top: 26px;
}

.rayu-model-chips li {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

/* ---- Hizmetler: 4 sütun ---- */
.rayu-svc-giris {
    max-width: 340px;
    margin-bottom: 0;
}

.services-style-four-item {
    padding: 34px 40px;
}

/* Temanın ilk iki öğe için sıfırladığı üst payı geri veriyoruz;
   burada solda başlık sütunu var, hizalama bozuluyordu. */
.services-style-four-item:first-child,
.services-style-four-item:nth-child(2) {
    padding-top: 34px;
}

.rayu-svc-no {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.services-style-four-item h4 {
    margin-bottom: 12px;
}

.services-style-four-item p {
    font-size: 15px;
    line-height: 27px;
}

/* Etiketler: gradyan dolgulu değil, ince çerçeveli — 16 tane yan yana
   olduğu için dolgulu hâli sütunu boğuyordu. */
ul.project-tags.rayu-svc-etiket {
    margin-top: 18px;
    gap: 8px;
}

ul.project-tags.rayu-svc-etiket li {
    background: transparent;
    border: 1px solid var(--border-color, #e0e5ec);
    color: var(--color-paragraph);
    font-size: 13px;
    padding: 5px 13px;
    border-radius: 100px;
}

ul.project-tags.rayu-svc-etiket li::after,
ul.project-tags.rayu-svc-etiket li::before {
    display: none;
}

@media (max-width: 767px) {
    .services-style-four-item {
        padding: 0 0 26px;
    }

    .card-style-one-two .bottom.rayu-kart-duz {
        flex-direction: column;
        gap: 16px;
    }
}

/* ================================================================
   Teşhis bölümü — ölçek ayarı
   Bölüm başlığı 55px'te sola taşıp akordiyonun altına giriyordu,
   akordiyon başlıkları da 20px ile ağır duruyordu. İkisi de %25
   küçültüldü. Satır dolgusu artırıldı: yazı küçülünce akordiyon
   kısalmasın, satırlar daha ferah dursun.
   ================================================================ */

.faq-style-one-area .faq-style-one-info .title {
    font-size: 41px;          /* 55 × 0.75 */
    line-height: 1.2;
}

.faq-style-one-area .accordion-style-one-item .accordion-button {
    font-size: 15px;          /* 20 × 0.75 */
    line-height: 1.45;
    /* Yazı küçüldüğü için satırlar kısalmıştı; dolgu artırılarak
       akordiyon eskisinden daha uzun ve ferah hâle getirildi. */
    padding: 40px 34px;       /* 25px 30px idi */
}

/* Açık satır: temanın :not(.collapsed) kuralı dolguyu 25px'e geri
   çekiyordu ve açık satır kapalılardan kısa kalıyordu. Aynı belirginlikle
   eşitliyoruz. */
.faq-style-one-area .accordion-style-one-item button.accordion-button:not(.collapsed) {
    padding: 40px 34px;
}

/* Açık paneldeki gövde de aynı oranda hafifledi */
.faq-style-one-area .accordion-body {
    padding-left: 34px;
    padding-right: 34px;
}

.faq-style-one-area .accordion-body p {
    font-size: 15px;
    line-height: 27px;
}

.faq-style-one-area .diag-label {
    font-size: 11px;
}

@media (max-width: 991px) {
    .faq-style-one-area .faq-style-one-info .title {
        font-size: 32px;
    }

    .faq-style-one-area .accordion-style-one-item .accordion-button,
    .faq-style-one-area .accordion-style-one-item button.accordion-button:not(.collapsed) {
        padding: 24px 22px;
    }

    .faq-style-one-area .accordion-body {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* ================================================================
   Partnerlikler — gerçek platform logoları
   Tema yer tutucuları (logo/01–05.png) yerine platform logoları geldi.
   Bölüm koyu zeminde olduğu için beyaz varyantlar kullanılıyor.
   ================================================================ */

/* Etiket <a href="#"> iken temanın gradyan hapı stilini alıyordu;
   ölü bağlantı olduğu için <span>'e çevrildi, stil buraya taşındı. */
.brand-style-two-item .info span {
    margin-top: 25px;
    font-weight: 400;
    font-size: 15px;
    display: inline-block;
    color: var(--white);
    background: var(--bg-gradient);
    padding: 4px 15px 5px;
    border-radius: 6px;
}

/* İki logo taşıyan kategoriler (Analitik, Pazaryeri) yan yana dizilir.
   min-height ikon yüksekliğiyle aynı: kelime logo taşıyan kart, ikon taşıyan
   kartla aynı yükseklikte kalsın. */
.rayu-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 64px;
    flex-wrap: wrap;
}

/* İkon logolar kare (24×24 viewBox) — 64px, önceki ölçünün iki katı */
.rayu-partner-logo img {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Kelime logolar çok geniş: Trendyol 393×94, Hepsiburada 646×122.
   Bunları da 64px yapmak mümkün değil — kartın iç genişliği 290px ve iki
   kelime logo yan yana duruyor, ikisi de 137px'i geçemez. Bu yüzden
   yüksekliğe değil genişliğe göre sınırlanıyorlar; 130px'te Trendyol 31px,
   Hepsiburada 25px yüksekliğe oturuyor. */
.rayu-partner-logo img.rayu-logo-genis {
    height: auto;
    max-height: 36px;
    max-width: 130px;
}

@media (max-width: 767px) {
    .rayu-partner-logo {
        gap: 16px;
        min-height: 56px;
    }

    .rayu-partner-logo img {
        height: 56px;
    }

    /* Mobilde kart tam genişlikte: kelime logoya daha çok yer var */
    .rayu-partner-logo img.rayu-logo-genis {
        max-height: 34px;
        max-width: 140px;
    }
}

/* ================================================================
   Yaklaşım bölümü — sayaçların yerine ikonlu ilke kutuları
   Kap ve 3'lü ızgara aynen korundu; yalnızca sayaç bloklarının yerine
   ikon geldi ve üste bölüm başlığı eklendi.
   ================================================================ */

.rayu-ilkeler .rayu-ilke-bas {
    margin-bottom: 44px;
}

.rayu-ilkeler .rayu-ilke-bas .title {
    color: var(--white);
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
}

.rayu-ilke-ikon {
    width: 54px;
    height: 54px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    /* Koyu kap üzerinde cam etkisi — kart kenarlarıyla aynı dil */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* İkonlar artık ikon fontu değil, bu bölüm için çizilmiş satır içi SVG
   (bkz. partials/ilke-ikon.blade.php). Renk SVG'nin kendi degradesinden
   geliyor; background-clip:text kurgusuna gerek kalmadı.

   28px: font glifi 22px'ti ama o ölçü tek renk bir glif içindi. Bu ikonlar
   iki katmanlı (dolu gövde + beyaz çizgi detay) ve detayın seçilebilmesi
   için biraz daha yer istiyor. 54px'lik karonun içinde 13px kenar payı
   kalıyor, karo hâlâ nefes alıyor. */
.rayu-ilke-ikon svg {
    width: 28px;
    height: 28px;
    display: block;
    overflow: visible;
}

.rayu-ilkeler .funfact-style-one-item .info h4 {
    color: var(--white);
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------
   Konumlandırma: "29" sayaç kartının yerine ikonlu liste
   --------------------------------------------------------------- */
.rayu-teknik-kart .bottom {
    display: block;
    border-top: 1px solid #cddff3;
    margin-top: 26px;
    padding-top: 26px;
}

.rayu-teknik-liste {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.rayu-teknik-liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-heading);
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 6, 98, 0.06);
}

.rayu-teknik-liste li:last-child {
    border-bottom: none;
}

.rayu-teknik-liste i {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-primary);
    background: rgba(232, 101, 15, 0.09);
}

.rayu-teknik-kart .bottom p {
    margin: 0;
    font-size: 14.5px;
    line-height: 26px;
    color: var(--color-paragraph);
}

@media (max-width: 991px) {
    .rayu-ilkeler .rayu-ilke-bas .title {
        font-size: 30px;
    }

    .rayu-ilke-ikon {
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
    }

    .rayu-ilke-ikon i {
        font-size: 19px;
    }
}

/* ================================================================
   Kayan şerit kelimeleri
   Tema bunları <h2> olarak basıyordu; kesintisiz akış için içerik iki
   kez yazıldığı için /hakkimizda'da altı başlık mükerrer görünüyor ve
   sayfada 23 adet h2 oluşuyordu. <span>'e çevrildi, temanın ölçüleri
   birebir taşındı.
   ================================================================ */
.brand-content .rayu-serit-kelime {
    display: block;
    margin: 0 50px;
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
}

@media only screen and (max-width: 767px) {
    .brand-content .rayu-serit-kelime {
        font-size: 30px;
    }
}

/* ================================================================
   Düzen kayması (CLS) — dinamik src taşıyan görseller
   Bu görsellerin kaynağı Blade'den geliyor, boyutu şablonda sabit
   yazılamıyor. En-boy oranını CSS'te sabitlemek aynı işi görür:
   tarayıcı görsel inmeden önce yeri ayırır, içerik zıplamaz.
   ================================================================ */
.rayu-page-hero-thumb img {
    aspect-ratio: 16 / 10;
}

.rayu-stack-gorsel img,
.services-details-area .services-details-thumb img {
    aspect-ratio: 16 / 9;
}

/* Hizmet listesindeki kart görselleri kare kırpılıyor */
.project-style-one-item .thumb img:first-child,
.rayu-svc-thumb img {
    aspect-ratio: 1 / 1;
}

/* ================================================================
   Konumlandırma — sol kolondaki boşluk
   Tema .about-style-one-info'ya height:100% veriyor; sağ kolon daha
   uzun olduğu için altta 400 pikselden fazla boş gri alan kalıyordu.
   Sağ karttaki üç madde buraya taşındı: boşluk doldu, sağ kart da
   sayaç kutusuna döndü.
   ================================================================ */

.rayu-teknik-sutunlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 44px;
    padding-top: 34px;
    border-top: 1px solid rgba(0, 6, 98, 0.09);
}

.rayu-teknik-oge {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rayu-teknik-oge i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 16px;
    color: var(--color-primary);
    background: rgba(232, 101, 15, 0.09);
    flex: none;
}

.rayu-teknik-oge span {
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-heading);
}

.rayu-teknik-kapanis {
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 27px;
    color: var(--color-paragraph);
}

/* Deneyim sayacı kartı — temanın kendi fun-fact düzeni korunuyor */
.rayu-deneyim-kart .bottom img {
    max-height: 110px;
    width: auto;
}

@media (max-width: 767px) {
    .rayu-teknik-sutunlar {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 32px;
        padding-top: 26px;
    }

    .rayu-teknik-oge {
        flex-direction: row;
        align-items: center;
    }
}

/* ---------------------------------------------------------------
   Teknoloji Yığını — "Ölçüm ve raporlama yığınımız" kartı

   Temanın ul.service-list .icon kuralı 60px daireye 17px padding
   veriyordu; içine konan illüstrasyon 26px'e sıkışıp okunmuyordu.
   İllüstrasyon yerine ikon kullanılıyor, döşeme koyu kartın cam
   diliyle yeniden kuruluyor. Seçiciler tema kurallarının
   özgüllüğünü (0,2,2) aşacak şekilde yazıldı.
   --------------------------------------------------------------- */
.rayu-yigin-kart {
    display: flex;
    flex-direction: column;
}

ul.service-list.rayu-yigin-liste {
    display: flex;
    flex-direction: column;
    gap: 34px;
    flex: 1 1 auto;
    justify-content: center;
}

ul.service-list.rayu-yigin-liste li {
    gap: 22px;
    margin-top: 0;
    align-items: flex-start;
}

ul.service-list.rayu-yigin-liste li .icon {
    width: 56px;
    min-width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

ul.service-list.rayu-yigin-liste li .icon i {
    font-size: 23px;
    line-height: 1;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rayu-yigin-katman {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rayu-orange);
    margin-bottom: 7px;
}

ul.service-list.rayu-yigin-liste li h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--white);
}

ul.service-list.rayu-yigin-liste li p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.76);
}

/* Veri akışı zinciri — kartın alt boşluğunu içerikle kapatır */
.rayu-yigin-akis {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.rayu-yigin-akis-etiket {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 14px;
}

.rayu-yigin-zincir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.rayu-yigin-zincir span {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 7px 15px;
    white-space: nowrap;
}

.rayu-yigin-zincir i {
    font-size: 13px;
    color: var(--rayu-teal);
}

@media (max-width: 1199px) {
    ul.service-list.rayu-yigin-liste {
        gap: 28px;
    }

    .rayu-yigin-akis {
        margin-top: 34px;
    }
}

@media (max-width: 575px) {
    ul.service-list.rayu-yigin-liste li .icon {
        width: 48px;
        min-width: 48px;
        height: 48px;
        border-radius: 13px;
    }

    ul.service-list.rayu-yigin-liste li .icon i {
        font-size: 20px;
    }

    ul.service-list.rayu-yigin-liste li {
        gap: 16px;
    }

    .rayu-yigin-zincir span {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Kartın arka plan görseli yüksek frekanslı ve parlak; beyaz metin ve cam
   döşemeler üstünde kayboluyordu. Görselden bağımsız bir koyu perde
   (scrim) metnin kontrastını garanti eder — görsel değişse de bozulmaz. */
.rayu-yigin-kart {
    position: relative;
    overflow: hidden;
}

.rayu-yigin-kart::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 18% 0%, rgba(240, 112, 32, 0.16) 0%, rgba(7, 13, 24, 0) 55%),
        radial-gradient(110% 75% at 100% 100%, rgba(47, 176, 175, 0.18) 0%, rgba(7, 13, 24, 0) 58%),
        linear-gradient(178deg, rgba(7, 13, 24, 0.8) 0%, rgba(7, 13, 24, 0.66) 42%, rgba(7, 13, 24, 0.88) 100%);
}

.rayu-yigin-kart > * {
    position: relative;
    z-index: 1;
}

/* Perde altında cam döşemenin kenarı silikleşiyor; biraz güçlendirilir */
ul.service-list.rayu-yigin-liste li .icon {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.26);
}

/* ----------------------------------
   Dikey kırıntı yolu rayı — sol kenarda, sağdaki sosyal rayın aynası.
   Aynı cam zemin, aynı kenar yarıçapı/gölge mantığı, aynı z-index.

   Kapalıyken 55px'lik dar şerit: yalnızca adım işaretleri (ev ikonu ve
   noktalar) görünür. Fare üzerine gelince ya da sekmeyle içine girince
   250px'e açılıp adım başlıklarını okunur biçimde gösterir.

   Genişlik animasyonu konteynerde: width auto animasyonlanamadığı için
   iki sabit genişlik arasında geçiş yapılır, başlıklar overflow ile kırpılır.
------------------------------------- */

/* Ray etiketi — sağdaki rayın "Takip Edin" etiketiyle aynı tipografi.
   Kapalıyken yüksekliği sıfır, yoksa dar şeritte boş bir alan bırakırdı. */

/* Yatay padding listede durur; böylece odak halkası ray içinde kalır
   ve overflow: hidden tarafından kırpılmaz. */

/* Adımlar arası dikey ayraç — yatay yoldaki "/" işaretinin karşılığı.
   Sol boşluk 10.5px: 22px'lik işaret kutusunun tam ortası. */

/* Başlıklar kapalıyken de yer kaplar, opacity ile saklanır:
   ekran okuyucular için erişilebilir kalsın diye display/visibility kullanılmaz. */

/* Mevcut sayfa — marka rengiyle vurgulanır, noktası halkalı */

/* Hareketi azalt tercihi: ray yine açılır, ama anında */

/* Mobil ve tablet: ekran genişliği yetmiyor, sayfa içeriğiyle çakışır.
   Bu ekranlarda yol partials.sayfa-hero içindeki yatay kırıntı yolundan okunur. */

/* Kartın arka planı markaya özel üretilen koyu plakayla değiştirildi
   (bg/card-koyu.jpg). Görselin kendisi artık koyu ve merkezi temiz
   olduğu için perde hafifletilir; işi kontrastı garanti etmek, sahneyi
   karartmak değil. Görselin kendi ışıkları perdeyle çiftlenmesin diye
   radyal parlamalar da kaldırıldı. */
.rayu-yigin-kart::before {
    background: linear-gradient(178deg,
        rgba(6, 11, 20, 0.34) 0%,
        rgba(6, 11, 20, 0.14) 40%,
        rgba(6, 11, 20, 0.46) 100%);
}

/* ---------------------------------------------------------------
   Konumlandırma: üç ikonlu teknik şerit kullanıcı isteğiyle
   kaldırıldı. Tema .about-style-one-info'ya height:100% verdiği için
   içerik yukarıda toplanıp altta boş gri alan bırakıyordu; içerik
   dikeye ortalanmıştı.

   ARTIK ORTALANMIYOR. O düzeltme konduğunda kartın altı gerçekten
   boştu; sonradan "Rayu" filigranı alt kenara yerleşti ve orayı
   dolduruyor. Ortalama bu yüzden yalnızca ÜSTTE boşluk üretmeye
   başladı: ölçümde üstte 272px, altta 272px — ama alttaki 272'nin
   içinde filigran duruyor, üstteki tamamen boştu.

   Şimdi içerik yukarıdan başlıyor (padding 120px), artan boşluk
   filigranla içerik arasına düşüyor. Sağ kolonla eşit yükseklik
   height:100% üzerinden korunmaya devam ediyor.
   --------------------------------------------------------------- */
.about-style-one-area .about-style-one-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ==========================================================================
   Hukuki sayfalar — KVKK aydınlatma metni, gizlilik ve çerez politikası
   ==========================================================================
   Uzun metnin tek işi okunabilir olmak: solda yapışkan içindekiler,
   sağda numaralı bölümler. Renk, yazı tipi ve yuvarlatma temanın kendi
   token'larından gelir; yeni bir görsel dil kurulmaz.
   ========================================================================== */

.rayu-hukuki .row {
    position: relative;
}

/* ----------------------------------
   Sol sütun — içindekiler
------------------------------------- */
.rayu-hukuki-index {
    position: sticky;
    /* Yapışkan başlık çubuğu 90px civarı; metin altına girmesin */
    top: 120px;
    padding: 30px 28px;
    border-radius: 20px;
    background: #f7f8fa;
    border: 1px solid rgba(0, 6, 98, 0.07);
}

.rayu-hukuki-index .widget-title {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.rayu-hukuki-index ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hukuki;
}

.rayu-hukuki-index ol li {
    counter-increment: hukuki;
    margin: 0;
    padding: 0;
}

.rayu-hukuki-index ol li a {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--color-paragraph);
    transition: color 0.25s ease;
}

.rayu-hukuki-index ol li a::before {
    content: counter(hukuki, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.75;
    color: rgba(0, 6, 98, 0.32);
    font-variant-numeric: tabular-nums;
}

.rayu-hukuki-index ol li a:hover,
.rayu-hukuki-index ol li a.aktif {
    color: var(--color-primary);
}

.rayu-hukuki-index ol li a.aktif::before {
    color: var(--color-primary);
}

/* Diğer iki hukuki sayfaya geçiş */
.rayu-hukuki-baglar {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 6, 98, 0.09);
}

.rayu-hukuki-baglar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-heading);
    transition: color 0.25s ease;
}

.rayu-hukuki-baglar a i {
    font-size: 13px;
    color: var(--color-primary);
}

.rayu-hukuki-baglar a:hover {
    color: var(--color-primary);
}

/* Son güncelleme damgası */
.rayu-hukuki-tarih {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 6, 98, 0.09);
    font-size: 13.5px;
    color: var(--color-paragraph);
}

.rayu-hukuki-tarih i {
    color: var(--color-secondary);
}

/* ----------------------------------
   Sağ sütun — metnin kendisi
------------------------------------- */
.rayu-hukuki-govde {
    max-width: 760px;
}

.rayu-hukuki-giris {
    padding: 26px 28px;
    margin-bottom: 12px;
    border-radius: 18px;
    background: #f7f8fa;
    border-left: 3px solid var(--color-primary);
}

.rayu-hukuki-giris p:last-child {
    margin-bottom: 0;
}

.rayu-hukuki-giris p {
    font-size: 16.5px;
    line-height: 30px;
    color: var(--color-heading);
}

.rayu-hukuki-bolum {
    padding-top: 44px;
    /* Yapışkan başlık, çapa ile atlanan bölümün başlığını yemesin */
    scroll-margin-top: 120px;
}

.rayu-hukuki-bolum > h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.3;
    color: var(--color-heading);
}

.rayu-hukuki-bolum > h2 .no {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* baseline hizası: rakam kutusu başlığın gövdesine oturur */
    position: relative;
    top: 4px;
}

.rayu-hukuki-bolum h4 {
    margin: 30px 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-heading);
}

.rayu-hukuki-bolum p {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 30px;
}

.rayu-hukuki-bolum ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.rayu-hukuki-bolum ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    font-size: 16px;
    line-height: 29px;
    color: var(--color-paragraph);
}

.rayu-hukuki-bolum ul li::before {
    position: absolute;
    left: 2px;
    top: 11px;
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bg-gradient);
}

.rayu-hukuki-bolum ul li strong,
.rayu-hukuki-bolum p strong {
    color: var(--color-heading);
    font-weight: 600;
}

.rayu-hukuki-bolum a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.rayu-hukuki-bolum a:hover {
    text-decoration-thickness: 2px;
}

.rayu-hukuki-bolum code {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 6, 98, 0.06);
    color: var(--color-heading);
    font-size: 13.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Çerez politikasındaki çerez listesi tabloları */
.rayu-cerez-tablo {
    margin: 4px 0 22px;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(0, 6, 98, 0.09);
}

.rayu-cerez-tablo table {
    width: 100%;
    min-width: 520px;
    margin: 0;
    border-collapse: collapse;
}

.rayu-cerez-tablo th {
    padding: 13px 18px;
    background: #f7f8fa;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-heading);
    text-align: left;
    white-space: nowrap;
}

.rayu-cerez-tablo td {
    padding: 15px 18px;
    font-size: 14.5px;
    line-height: 24px;
    color: var(--color-paragraph);
    border-top: 1px solid rgba(0, 6, 98, 0.07);
    vertical-align: top;
}

.rayu-cerez-tablo td:last-child {
    white-space: nowrap;
    color: var(--color-heading);
    font-weight: 500;
}

.rayu-cerez-ek {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: rgba(96, 97, 108, 0.8);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rayu-hukuki-bolum .rayu-cerez-ayar {
    margin-top: 4px;
    padding: 12px 26px;
    font-size: 14.5px;
}

/* ----------------------------------
   Veri sorumlusu kimlik kartı (KVKK metninin altı)
------------------------------------- */
.rayu-hukuki-kimlik {
    margin-top: 48px;
    padding: 32px;
    border-radius: 20px;
    background: #f7f8fa;
    border: 1px solid rgba(0, 6, 98, 0.07);
}

.rayu-hukuki-kimlik h3 {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--color-heading);
}

.rayu-hukuki-kimlik > p {
    margin: 0 0 22px;
    font-size: 14.5px;
    color: var(--color-paragraph);
}

.rayu-hukuki-kimlik dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1px;
    margin: 0;
    background: rgba(0, 6, 98, 0.07);
    border-radius: 12px;
    overflow: hidden;
}

.rayu-hukuki-kimlik dt,
.rayu-hukuki-kimlik dd {
    margin: 0;
    padding: 14px 18px;
    background: var(--white);
    font-size: 14.5px;
    line-height: 24px;
}

.rayu-hukuki-kimlik dt {
    font-weight: 500;
    color: var(--color-paragraph);
}

.rayu-hukuki-kimlik dd {
    color: var(--color-heading);
    font-weight: 500;
    word-break: break-word;
}

.rayu-hukuki-kimlik dd a {
    color: var(--color-primary);
}

/* Panelde doldurulması bekleyen alan — yalnızca yerelde görünür */
.rayu-hukuki-eksik {
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px dashed rgba(232, 101, 15, 0.45);
    background: rgba(232, 101, 15, 0.05);
    font-size: 14px;
    line-height: 24px;
    color: var(--color-heading);
}

.rayu-hukuki-eksik strong {
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 1199px) {
    .rayu-hukuki-kimlik dl {
        grid-template-columns: 170px 1fr;
    }
}

@media (max-width: 991px) {
    .rayu-hukuki-index {
        position: static;
        margin-bottom: 40px;
    }

    .rayu-hukuki-govde {
        max-width: none;
    }

    .rayu-hukuki-bolum > h2 {
        font-size: 23px;
    }
}

@media (max-width: 575px) {
    .rayu-hukuki-index,
    .rayu-hukuki-kimlik {
        padding: 24px 20px;
    }

    .rayu-hukuki-giris {
        padding: 22px 20px;
    }

    .rayu-hukuki-bolum > h2 {
        font-size: 21px;
        gap: 11px;
    }

    .rayu-hukuki-kimlik dl {
        grid-template-columns: 1fr;
    }

    .rayu-hukuki-kimlik dt {
        padding-bottom: 0;
        background: var(--white);
    }
}

/* ==========================================================================
   Çerez onay bandı — Google Consent Mode v2
   ==========================================================================
   Cam kutu dili başlık çubuğundan (nav > .container-full) alındı:
   aynı bulanıklık, aynı kenarlık, aynı yuvarlatma.
   ========================================================================== */

.rayu-cerez-bant {
    position: fixed;
    z-index: 9998;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 940px;
}

.rayu-cerez-bant[hidden] {
    display: none;
}

.rayu-cerez-kutu {
    padding: 24px 26px;
    border-radius: 20px;
    background: rgba(8, 12, 34, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    animation: rayuCerezGir 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rayuCerezGir {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .rayu-cerez-kutu {
        animation: none;
    }
}

.rayu-cerez-ust {
    display: flex;
    gap: 18px;
}

.rayu-cerez-ikon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 19px;
    line-height: 46px;
    text-align: center;
}

.rayu-cerez-yazi h4 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
}

.rayu-cerez-yazi p {
    margin: 0;
    font-size: 14.5px;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.72);
}

.rayu-cerez-yazi a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rayu-cerez-yazi a:hover {
    color: var(--color-secondary);
}

/* Ayrıntı paneli — "Ayarlar"a basılınca açılır */
.rayu-cerez-secimler {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rayu-cerez-secimler[hidden] {
    display: none;
}

.rayu-cerez-satir {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 0;
}

.rayu-cerez-satir + .rayu-cerez-satir {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.rayu-cerez-satir .bilgi {
    flex: 1 1 auto;
}

.rayu-cerez-satir .bilgi b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
}

.rayu-cerez-satir .bilgi span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.6);
}

/* Anahtar — görünen kısım span.yuva, erişilebilirlik input'ta kalır */
.rayu-cerez-anahtar {
    flex: 0 0 auto;
    position: relative;
    width: 46px;
    height: 26px;
    margin-top: 2px;
}

.rayu-cerez-anahtar input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.rayu-cerez-anahtar .yuva {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.25s ease;
    pointer-events: none;
}

.rayu-cerez-anahtar .yuva::after {
    position: absolute;
    content: "";
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white);
    transition: transform 0.25s ease;
}

.rayu-cerez-anahtar input:checked ~ .yuva {
    background: var(--color-primary);
}

.rayu-cerez-anahtar input:checked ~ .yuva::after {
    transform: translateX(20px);
}

.rayu-cerez-anahtar input:focus-visible ~ .yuva {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.rayu-cerez-anahtar input:disabled {
    cursor: default;
}

.rayu-cerez-anahtar input:disabled ~ .yuva {
    background: rgba(47, 176, 175, 0.55);
}

/* Düğme sırası */
.rayu-cerez-dugmeler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.rayu-cerez-dugmeler .btn {
    padding: 12px 26px;
    font-size: 14.5px;
}

.rayu-cerez-dugmeler .btn[hidden] {
    display: none;
}

/* "Ayarlar" — düğme gibi durmayan üçüncü seçenek */
.rayu-cerez-metin-dugme {
    margin-left: auto;
    padding: 12px 4px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.25s ease;
}

.rayu-cerez-metin-dugme:hover {
    color: var(--white);
}

@media (max-width: 767px) {
    .rayu-cerez-bant {
        bottom: 12px;
        width: calc(100% - 20px);
    }

    .rayu-cerez-kutu {
        padding: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .rayu-cerez-ust {
        gap: 14px;
    }

    .rayu-cerez-ikon {
        width: 38px;
        height: 38px;
        font-size: 16px;
        line-height: 38px;
        border-radius: 12px;
    }

    .rayu-cerez-yazi h4 {
        font-size: 16px;
    }

    .rayu-cerez-yazi p {
        font-size: 13.5px;
        line-height: 23px;
    }

    .rayu-cerez-dugmeler {
        gap: 10px;
    }

    .rayu-cerez-dugmeler .btn {
        flex: 1 1 100%;
        text-align: center;
    }

    .rayu-cerez-metin-dugme {
        margin: 0 auto;
    }
}

/* Flex kapsayıcıda öğeler bloklaşıp genişliğe yayılıyor; temanın
   .sub-title pili inline-block olduğu için kendi genişliğinde kalmalı.
   Son paragrafın alt boşluğu da sıfırlanır ki dikey ortalama simetrik
   çıksın (üst 202px / alt 227px farkı buradan geliyordu). */
.about-style-one-area .about-style-one-info > .sub-title {
    align-self: flex-start;
}

.about-style-one-area .about-style-one-info > p:last-of-type {
    margin-bottom: 0;
}

/* ----------------------------------
   Dikey yol rayı — ölçü düzeltmesi.
   Ölçüm sonrası: kapalı genişlik sağdaki sosyal rayın 40px'ine çekildi.
   Sebep tek değil, iki:
     1. İki ray artık gerçekten aynı kalınlıkta duruyor (ayna simetrisi).
     2. Tema xxl kırılımında container'ı 1400px'te sabitliyor; 1440px'lik
        ekranda kenar boşluğu yalnızca 20px kalıyor ve kenar rayları içeriğe
        biniyor. 55px'lik ray 35px biniyordu, 41px'lik ray 20px biniyor —
        yani sağdaki rayın hâlihazırdaki davranışıyla aynı seviyede.
   Bu blok Edit ile üstteki değerlerin yerine yazılamadı: dosyaya aynı anda
   başka ajanlar ekleme yapıyor, yalnızca sona ekleme güvenliydi.
------------------------------------- */

/* margin shorthand'i bilinçli kullanılmadı: hover'daki margin-bottom korunmalı */

/* Ayraç çizgisi 20px'lik işaret kutusunun ortasında kalsın */

/* Çerez adları satır ortasında bölünmesin (rayu-session, XSRF-TOKEN) */
.rayu-hukuki-bolum code {
    white-space: nowrap;
}

.rayu-cerez-tablo td:first-child {
    white-space: nowrap;
}

/* ----------------------------------
   Dikey yol rayı — kırılım eşiği düzeltmesi.
   Eşik sağdaki sosyal rayla eşitlendi: iki ray aynı görsel sistemin iki
   yarısı, farklı genişliklerde kaybolmaları yanlıştı. 1000px'lik ekranda
   sol ray görünüyor, sağdaki gizliyken tek başına kalıyordu.

   Yukarıdaki 991px bloğu yerinde bırakıldı; bu blok onu kapsıyor
   (aynı özelliği daha geniş bir aralıkta aynı değere ayarlıyor).
   Edit ile üstteki kuralın yerine yazılamadı: dosyaya aynı anda başka
   ajanlar ekleme yapıyor, yalnızca sona ekleme güvenliydi.
------------------------------------- */

/* ----------------------------------
   Dikey yol rayı — son eşik: yalnızca 1500px ve üstünde görünür.

   Ölçüm gerekçesi: tema xxl kırılımında container'ı 1400px'te sabitliyor.
   41px'lik rayın kenar boşluğuna sığması için viewport en az 1482px olmalı
   (1400 + 2 × 41). Altındaki genişliklerde ray gövde metninin sol kenarına
   biniyor ve her satırın ilk harfini kesiyordu ("Google" -> "oogle").
   Sağdaki sosyal rayla kıyaslamak yanıltıcıydı: sağ tarafta satır sonları
   tırtıklı bittiği için oradaki binme hiçbir harfi kesmiyor.

   1482 yerine 1500: küçük bir tampon, yuvarlak bir eşik.
   Bu eşiğin altında kırıntı yolu kaybolmuyor — partials.sayfa-hero
   içindeki yatay yol her genişlikte yerinde duruyor.

   Yaklaşım tersine çevrildi: ray varsayılan olarak gizli, yalnızca eşiğin
   üstünde açılıyor. Böylece yukarıdaki 991px ve 1199px blokları ölü kalıyor
   ama hiçbir genişlikte yanlış sonuç vermiyor. Edit ile temizlenemedi:
   dosyaya aynı anda başka ajanlar ekleme yapıyor, yalnızca sona ekleme
   güvenliydi.
------------------------------------- */

/* ----------------------------------
   Sayfa içi bölüm rayı — sol kenarda sabit, dikey bir "hap".

   Hap her zaman açık: üstte ve altta daire içinde birer yön oku, aralarında
   dikey yazılmış "Bölümler" etiketi ve o an okunan bölümün rozeti. Üzerine
   gelince (ya da sekmeyle içine girince) sağında bölümlerin tam listesi açılır.

   Sağdaki sosyal rayın (.rayu-social-rail) aynası: aynı cam zemin, aynı kenar
   yarıçapı/gölge mantığı, aynı z-index ve aynı dikey yazı yönü
   (writing-mode: vertical-rl + rotate(180deg), yani aşağıdan yukarı).

   Genişlik 42px — kapalı hâldeki eski rayla (20px) aynı mantıkta, gövde
   metnine binmiyor. Yükseklik ~350px; 640px'ten alçak ekranlarda etiket
   düşüyor, işlev kaybı olmuyor. 1200px altında ray hiç basılmıyor (mobilde
   bölümlere header menüsünden gidiliyor).

   Önceki .rayu-yol-rail blokları kullanılmıyor (ray kırıntı yolundan bölüm
   navigasyonuna dönüştü). Bu dosyada Edit yapılamadığı için silinemediler.
------------------------------------- */

/* Çapa hedefi sabit başlığın altında kalsın.
   Ölçüm: cam başlık kutusunun alt kenarı kaydırılmış durumda 99px, sayfa
   başındayken 109px. 110px hem ikisini karşılıyor hem nefes payı bırakıyor.
   scroll-padding-top html'de olduğu için temanın kendi menü çapalarını da
   düzeltir; tema JS'i ofsetsiz scrollIntoView çağırıyor ve ona dokunulmadı. */
html {
    scroll-padding-top: 110px;
}

.rayu-bolum-rayi {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Dikey dolgu yatayın iki katından fazla — keyfi değil, geometri:
       kapsül köşe yarıçapı hapın genişliği kadar (46px) clamp'leniyor ve
       6px dolguyla üstteki/alttaki daire o yayı 2,8px aşıyordu, düğmeler
       hapın dışına taşmış gibi duruyordu. 18px'te dairenin merkezi yay
       merkezine 27,5px uzakta; yarıçapıyla birlikte 42,5 < 46, yani daire
       tamamen içeride kalıyor. */
    padding: 18px 8px;
    border-radius: 0 999px 999px 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 6, 98, 0.08);
    border-left: none;
    box-shadow: 8px 10px 30px rgba(0, 6, 98, 0.08);
}

/* JS sayfada karşılığı olmayan bölümü ya da rayın tamamını gizleyebiliyor;
   display kuralları [hidden]'ı ezmesin. */
.rayu-bolum-rayi[hidden],
.rayu-bolum-rayi .adim[hidden] {
    display: none;
}

/* --- Yön okları — üstte önceki, altta sonraki.
       Yön sayfanın kaydırma yönüyle aynı: yukarı = geri. --- */
.rayu-bolum-rayi .ray-ok {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(0, 6, 98, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: var(--color-heading);
    line-height: 1;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, opacity 0.22s ease;
}

/* Ok çizimi satır içi SVG (bkz. partials/bolum-rayi.blade.php): FA alt
   kümesinde fa-arrow-up yok. currentColor sayesinde hover'da düğmeyle
   birlikte beyaza dönüyor. */
.rayu-bolum-rayi .ray-ok svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rayu-bolum-rayi .ray-ok:hover:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.rayu-bolum-rayi .ray-ok:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Uçlarda ok pasif: olmayan bölüme götürmektense söylesin.
   0.42 ölçümle seçildi — 0.3'te cam zemin üzerinde ok ucu tamamen kayboluyor
   ve düğme boş bir daire gibi duruyordu. */
.rayu-bolum-rayi .ray-ok:disabled {
    opacity: 0.42;
    cursor: default;
}

/* --- Sabit etiket — sağdaki rayın "Takip Edin" etiketiyle aynı yön ve
       tipografi: aşağıdan yukarı okunur. --- */
.rayu-bolum-rayi .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 2px 0;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-heading);
    opacity: 0.72;
}

/* --- O an okunan bölümün rozeti ---
       column-reverse: nokta, yazının okuma başlangıcında (altta) dursun.

       Genişlik oklarla birebir aynı (30px): rozet kendi içeriğine göre
       ölçülünce ~27px kalıyordu ve üç öğe üç ayrı genişlikte olduğu için
       sütun tırtıklı görünüyordu. Artık ok–rozet–ok tek hizada. */
.rayu-bolum-rayi .ray-etkin {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 30px;
    max-height: 158px;
    padding: 12px 0;
    border-radius: 999px;
    background: rgba(240, 112, 32, 0.12);
}

.rayu-bolum-rayi .ray-etkin .isaret {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.rayu-bolum-rayi .ray-etkin .ad {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 112px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

/* Bölüm değişmek üzereyken rozet nabız gibi atar.
   Periyot 0.66s ≈ 1,5 Hz: nöbet eşiğinin (3 Hz) yarısı. Kaydırma durunca JS
   sınıfı kaldırıyor, yani yanıp sönme kendiliğinden susuyor (WCAG 2.2.2). */
@keyframes rayu-bolum-nabiz {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.34;
        transform: scale(0.96);
    }
}

.rayu-bolum-rayi.degisecek .ray-etkin {
    animation: rayu-bolum-nabiz 0.66s ease-in-out infinite;
}

/* --- Açılan tam liste — hapın sağında, dikeyde ortalı ---
   display/visibility yerine opacity + pointer-events: gizliyken de sekmeyle
   ulaşılabilir kalsın, odaklanınca :focus-within listeyi göstersin. */
.rayu-bolum-rayi .ray-liste {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    width: 212px;
    max-height: 78vh;
    overflow-y: auto;
    margin: 0;
    padding: 12px 14px;
    list-style: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 6, 98, 0.08);
    box-shadow: 8px 10px 30px rgba(0, 6, 98, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-8px);
    transition: opacity 0.24s ease,
                transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-bolum-rayi:hover .ray-liste,
.rayu-bolum-rayi:focus-within .ray-liste {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.rayu-bolum-rayi .adim > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 0;
    text-decoration: none;
}

.rayu-bolum-rayi .adim .isaret {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 6, 98, 0.28);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.rayu-bolum-rayi .adim .baslik {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--color-heading);
    transition: color 0.25s ease;
}

.rayu-bolum-rayi .adim > a:hover .isaret {
    background: var(--color-primary);
}

.rayu-bolum-rayi .adim > a:hover .baslik {
    color: var(--color-primary);
}

.rayu-bolum-rayi .adim.etkin .isaret {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.16);
}

.rayu-bolum-rayi .adim.etkin .baslik {
    color: var(--color-primary);
    font-weight: 600;
}

.rayu-bolum-rayi a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Hareketi azalt tercihi: liste yine açılır ama anında, rozet de yanıp sönmez */
@media (prefers-reduced-motion: reduce) {
    .rayu-bolum-rayi .ray-ok,
    .rayu-bolum-rayi .ray-liste,
    .rayu-bolum-rayi .adim .isaret,
    .rayu-bolum-rayi .adim .baslik {
        transition: none;
    }

    .rayu-bolum-rayi .ray-liste {
        transform: translateY(-50%);
    }

    .rayu-bolum-rayi:hover .ray-liste,
    .rayu-bolum-rayi:focus-within .ray-liste {
        transform: translateY(-50%);
    }

    .rayu-bolum-rayi.degisecek .ray-etkin {
        animation: none;
        box-shadow: 0 0 0 2px rgba(240, 112, 32, 0.35);
    }
}

/* Alçak ekranda hap kısalsın: etiket düşer, bölüm adı daralır.
   Ok + rozet her zaman kalır, işlev kaybı yok. */
@media (max-height: 700px) {
    /* 14px dolguda da daire yayın içinde: 28,6 + 15 = 43,6 < 46 */
    .rayu-bolum-rayi {
        padding: 14px 8px;
        gap: 8px;
    }

    .rayu-bolum-rayi .label {
        display: none;
    }

    .rayu-bolum-rayi .ray-etkin {
        max-height: 132px;
    }

    .rayu-bolum-rayi .ray-etkin .ad {
        max-height: 88px;
    }
}

/* Mobil ve tablet: sağdaki sosyal rayla aynı eşik.
   Bu ekranlarda bölümlere header menüsünden ulaşılıyor. */
@media (max-width: 1199px) {
    .rayu-bolum-rayi {
        display: none;
    }
}

/* ---------------------------------------------------------------
   .sub-title artık <span>: bu etiketler başlık değil, bölüm üstü
   rozetleri. <h4> olarak işaretlendiklerinde her bölümde H4 → H2
   sırası oluşuyordu, yani ters bir başlık hiyerarşisi; sayfalarda
   26 tanesi vardı ve hiçbiri gerçek bir başlık değildi.

   Tek kayıp, temanın h1..h6 sıfırlamasındaki margin-bottom: 15px —
   burada geri veriliyor. Kendi değerini veren iki bağlam
   (.contact-form-card 25px, .rayu-page-hero-info 14px) daha yüksek
   özgüllükte olduğu için etkilenmiyor.
   --------------------------------------------------------------- */
.sub-title {
    margin-bottom: 15px;
}

/* <span> gövdenin satır yüksekliğini miras alıyor; temanın h1..h6
   sıfırlaması line-height: 1.2 veriyordu. Rozet yüksekliği 42px'ten
   54px'e çıkmıştı, geri alınır. */
.sub-title {
    line-height: 1.2;
}

/* ---------------------------------------------------------------
   Cloudflare Turnstile widget'ı — brief ve kariyer formlarında
   --------------------------------------------------------------- */
.rayu-turnstile {
    margin-bottom: 22px;
    min-height: 65px;
}

.rayu-turnstile .cf-turnstile {
    display: block;
}

/* Kariyer sihirbazında widget panellerin dışında, navigasyonun üstünde */
.rayu-wizard-form .rayu-turnstile {
    margin-top: 8px;
    margin-bottom: 26px;
}

/* ---------------------------------------------------------------
   Harita sarmalayıcısı — tıklamayla yüklenir

   Tema .google-maps iframe'e 650px yükseklik veriyor; perde de aynı
   yüksekliği alır ki düğmeye basıldığında sayfa zıplamasın (CLS).
   --------------------------------------------------------------- */

/* ===============================================================
   Harita sarmalayıcısı — bağımsız doğrulamada çıkan üç düzeltme
   =============================================================== */

/* 1) Odak göstergesi (WCAG 2.4.7)
   Bootstrap `.btn:focus { outline: 0 }` yapıp yerine box-shadow ile
   halka koyuyor; temanın `.btn { box-shadow: none !important }` kuralı
   o halkayı da siliyor. İkisi birlikte klavye kullanıcısına hiçbir
   gösterge bırakmıyordu — siteye yaygın bir kusur, yalnızca haritada
   değil. Gölge yerine `outline` kullanılıyor: `box-shadow: none
   !important` gölge tabanlı bir halkayı tutmaz. rayu.css bootstrap'ten
   sonra yüklendiği için `!important` gerekmiyor. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}

/* 2) Yükseklik uyuşmazlığı — CLS
   iframe varsayılan olarak `display: inline`; satır kutusunun iniş payı
   kapsayıcıya ~10px ekliyordu. Ayrıca temanın iframe yüksekliği ÜÇ
   kırılımda tanımlı (650 / 450 / 400) ama perdem yalnızca ikisini
   karşılıyordu — 768-991px arasında 200px fark vardı.

   Çözüm yapısal: tek bir özel değişken hem perdeyi hem iframe'i
   besliyor, ikisi artık ayrışamıyor. Kırılımlar temanın kendi
   değerleriyle birebir aynı. */

/* Odak halkası — kısayol yerine uzun biçim.
   `outline: 2px solid var(--color-secondary)` kısayolu var() içerdiği
   için uzun biçimlere ayrıştırılmıyor ("pending substitution") ve
   temanın `.btn:focus { outline: 0 }` kuralıyla birlikte ölçümde
   width 3px / color white / offset 0 çıkıyordu — yani halka
   görünmüyordu. Uzun biçim + değişmez renk + !important üçü birlikte
   sonucu belirsizlikten çıkarıyor. !important burada gerekçeli:
   erişilebilirlik göstergesini tema CSS'i açıkça siliyor. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-width: 3px !important;
    outline-style: solid !important;
    outline-color: #2fb0af !important;
    outline-offset: 3px !important;
}

/* Koyu zeminlerde teal yeterince ayrışmıyor; oralarda turuncu kullanılır */
.bg-dark :focus-visible,
.bg-theme :focus-visible,
.text-light :focus-visible {
    outline-color: #f07020 !important;
}

/* ==========================================================================
   İletişim — "Brief bıraktıktan sonra ne oluyor?" bölümü
   ==========================================================================
   Dört adım + kapsam listesi + tema akordiyonuyla SSS.
   Akordiyonun kendisi temanın `accordion-style-one-items accordion-secondary`
   bileşeni; burada yalnızca çevresi ve iki küçük ölçü düzeltmesi var.
   ========================================================================== */

.rayu-brief-adimlar {
    margin-top: 10px;
}

.rayu-brief-adim {
    position: relative;
    height: 100%;
    padding: 30px 26px 28px;
    border-radius: 18px;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.07);
}

/* Numara: hukuki sayfalardaki bölüm rozetiyle aynı dil */
.rayu-brief-adim .no {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    margin-bottom: 16px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--bg-gradient);
    color: var(--white);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 34px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rayu-brief-adim h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.35;
    color: var(--color-heading);
}

.rayu-brief-adim p {
    margin: 0;
    font-size: 15px;
    line-height: 26px;
}

/* Adım kartları mobilde alt alta gelince aralarına nefes gerekiyor */
.rayu-brief-adimlar > [class*="col-"] {
    margin-bottom: 24px;
}

/* ----------------------------------
   Alt sıra: kapsam + SSS
------------------------------------- */
.rayu-brief-alt {
    margin-top: 26px;
}

.rayu-brief-kapsam h3 {
    margin: 0 0 14px;
    font-size: 22px;
    color: var(--color-heading);
}

.rayu-brief-kapsam > p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 28px;
}

.rayu-brief-kapsam ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rayu-brief-kapsam ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    font-size: 15.5px;
    line-height: 27px;
    color: var(--color-paragraph);
}

.rayu-brief-kapsam ul li::before {
    position: absolute;
    left: 2px;
    top: 10px;
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bg-gradient);
}

/*
   Blok başlığı h3; temanın .heading .title kuralı h2 için ölçülenmiş,
   bölüm başlığıyla aynı boyda görünüyordu. Hiyerarşi gözle de okunsun.
*/
.rayu-brief-sss .heading h3.title {
    margin: 0 0 22px;
    font-size: 22px;
    line-height: 1.3;
}

/* Akordiyon soruları tema ölçüsünde biraz iri kalıyor */
.rayu-brief-sss .accordion-style-one-item button.accordion-button {
    padding: 20px 24px;
    padding-right: 76px;
    font-size: 16.5px;
}

.rayu-brief-sss .accordion-style-one-item button.accordion-button:not(.collapsed) {
    padding: 20px 24px;
    padding-right: 76px;
}

.rayu-brief-sss .accordion-style-one-item button.accordion-button::before {
    top: 16px;
}

.rayu-brief-sss .accordion-style-one-item .accordion-body {
    padding: 24px;
}

.rayu-brief-sss .accordion-style-one-item .accordion-body p {
    font-size: 15.5px;
    line-height: 27px;
}

@media (max-width: 991px) {
    .rayu-brief-kapsam {
        margin-bottom: 44px;
    }
}

@media (max-width: 575px) {
    .rayu-brief-adim {
        padding: 24px 20px 22px;
    }

    .rayu-brief-kapsam h3,
    .rayu-brief-sss .heading h3.title {
        font-size: 20px;
    }

    .rayu-brief-sss .accordion-style-one-item button.accordion-button {
        padding: 17px 18px;
        padding-right: 64px;
        font-size: 15.5px;
    }

    .rayu-brief-sss .accordion-style-one-item button.accordion-button:not(.collapsed) {
        padding: 17px 18px;
        padding-right: 64px;
    }

    .rayu-brief-sss .accordion-style-one-item .accordion-body {
        padding: 20px 18px;
    }
}

/* ---------------------------------------------------------------
   Harita bandı — sayfa hero'sunun hemen altında, form bölümünden
   önce. Temanın .google-maps iframe kuralı yüksekliği veriyor
   (650 / 450 / 400), burada yalnızca bandın dikey boşluğu var.

   Not: hero koyu, altındaki form bölümü default-padding ile 120px
   üst boşluk taşıyor. Harita ikisinin arasına girdiği için üstte
   boşluk bırakılmıyor — hero'ya yapışık başlar, altta nefes payı
   kalır ve formun kendi üst boşluğuyla toplanmaz.
   --------------------------------------------------------------- */
.rayu-harita-band {
    padding-top: 0;
    padding-bottom: 0;
}

.rayu-harita-band .google-maps {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

.rayu-harita-band .google-maps iframe {
    border: 0;
    display: block;
    box-shadow: 0 24px 60px rgba(0, 6, 98, 0.14);
}

@media (max-width: 991px) {
    .rayu-harita-band .google-maps {
        margin-top: -40px;
    }
}

@media (max-width: 767px) {
    .rayu-harita-band .google-maps {
        margin-top: -28px;
    }
}

/* Hukuki metinlerde alt başlıklar h4 → h3 oldu (h1'den h4'e atlayan
   hiyerarşi düzeltildi). Yukarıdaki `.rayu-hukuki-bolum h4` kuralı
   etikete bağlıydı ve devre dışı kaldı: alt başlık 17px yerine temanın
   h3 ölçüsüyle 28px çiziliyor, yani bölüm başlığından (26px) BÜYÜK
   görünüyordu — görsel hiyerarşi tersine dönmüştü.

   Kural her iki etiketi de kapsayacak şekilde yeniden yazıldı; ileride
   biri gövdeye h4 koyarsa da doğru çalışır. Kaynak sırasında sonra
   geldiği için eşit özgüllükte kazanır. Eski h4 kuralı artık ölü,
   bir sonraki CSS temizliğinde kalkacak. */
.rayu-hukuki-bolum :is(h3, h4) {
    margin: 30px 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-heading);
}

/* ---------------------------------------------------------------
   /hakkimizda — Ekip yaklaşımı bölümü

   Üç sorun vardı: satır dikeyde ortalıydı ve sol paragraflar aşağı
   kayıp üstte boşluk bırakıyordu; temanın iki sütunlu grid'i üç
   maddeyi 2+1 dizip sağ altta boş göz bırakıyordu; metin yoğun bir
   görselin (mesh.jpg) üstünde okunmuyordu.
   --------------------------------------------------------------- */
.rayu-ekip-satir {
    align-items: flex-start;
}

/* Kart yine de sol kolondan uzun; sol metne üstte nefes payı kalsın */
.rayu-ekip-satir .about-style-six-right-info {
    padding-top: 10px;
}

/* Perde: görselin kendi ışıkları kalsın ama metnin altı koyulaşsın */
.rayu-ekip-kart::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(165deg,
        rgba(6, 11, 20, 0.72) 0%,
        rgba(6, 11, 20, 0.52) 45%,
        rgba(6, 11, 20, 0.80) 100%);
}

/* Tek sütun + numaralı rozet + ayraç */
.rayu-ekip-kart ul {
    grid-template-columns: 1fr;
    gap: 0;
}

.rayu-ekip-kart ul li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.rayu-ekip-kart ul li:first-child {
    padding-top: 0;
}

.rayu-ekip-kart ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.rayu-ekip-no {
    flex: none;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    background-clip: padding-box;
}

.rayu-ekip-kart ul li h4 {
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--white);
}

.rayu-ekip-kart ul li p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 991px) {
    .rayu-ekip-satir .about-style-six-right-info {
        padding-top: 0;
        margin-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .rayu-ekip-kart ul li {
        gap: 15px;
        padding: 22px 0;
    }

    .rayu-ekip-no {
        min-width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

/* ================================================================
   "Rayu" filigranı

   Tema filigranı `position:absolute; bottom:-44px` ile kartın ALT KENARINA
   çiviliyordu. İki ayrı sorun çıkıyordu:

   1. line-height 0.8 olduğu için harfler satır kutusunun ~0,14em altına
      taşıyor; kart overflow:hidden olunca "y" kuyruğu kesiliyordu.
   2. Kartın yüksekliği kendi içeriğinden değil SAĞ KOLONDAN geliyor
      (tema height:100% veriyor). Alt kenara çivilenen filigranla paragraf
      arasındaki boşluk bu yüzden ekran boyuna göre değişiyor ve geniş
      ekranda 160px'lik boş bir şerit bırakıyordu.

   Çözüm: filigran mutlak konumdan çıkıp normal akışa giriyor. Artık
   paragrafın 44px altında — kart ne kadar uzarsa uzasın o mesafe sabit,
   artan boşluk filigranın ALTINA düşüyor (yani kartın dibine, göze
   batmayan yere).

   `order` gerekiyor çünkü .fixed-text HTML'de kartın İLK çocuğu; akışa
   girince en üste çıkardı. Kap flex olduğu için tek satırla en sona alınıyor.

   `z-index: 0`: temanın -1 değeri akışta da geçerli olurdu ve filigranı
   kartın kendi zemininin arkasına atma riski taşıyor.

   Sol boşluk -10px: temanın left:110px hizası korunuyor (kart dolgusu
   120px, yani filigran içerik sütununun 10px soluna taşıyor).
   ================================================================ */
.about-style-one-area .about-style-one-info .fixed-text {
    position: static;
    order: 9;
    z-index: 0;
    font-size: 260px;
    /* margin 44 değil 32: kalan 12px padding'e geçti (aşağıya bak).
       Filigranın paragrafa olan görünen mesafesi yine 44px. */
    margin: 32px 0 0 -10px;
    /*
     * HARFLERİN TAMAMI İÇİN — bu dolgu boşluk değil, boya alanı.
     *
     * Yazı background-clip:text ile boyanıyor: degrade elemanın arka plan
     * kutusuna çiziliyor ve harf şekline kırpılıyor. line-height 0.8 olduğu
     * için "y" kuyruğu o kutunun ALTINA taşıyor; orada boyanacak degrade
     * olmadığından kuyruk saydam kalıyor — harf duruyor ama görünmüyor.
     * (Metni seçince kuyruk ortaya çıkıyordu: seçim vurgusu kutuya değil
     * gerçek harf alanına çiziliyor.)
     *
     * padding arka plan kutusunu büyütür (background-origin varsayılanı
     * padding-box), yani degrade kuyruğun altına kadar iner. Degrade -90deg,
     * yani yatay: kutunun dikey büyümesi renkleri kaydırmıyor.
     *
     * Değerler ekran görüntüsünden piksel sayarak bulundu, hesapla değil:
     * 260px'lik yazıda mürekkep kutunun 44px altına iniyor (70px pay bırakır),
     * üstte ise kutuya 0-1px kalıyor — 1366px'te tam sınırdaydı, "R"nin
     * tepesinden bir piksel gitme riski vardı. 12px üst dolgu onu kaldırıyor.
     */
    padding-top: 12px;
    padding-bottom: 70px;
}

/* Kontrast düzeltmesi — filigran görünmüyordu.

   Ölçüm: kart zemini rgb(240,242,244). Temanın gradyanı #e3ebf1 → #d3d6e2,
   yani kontrast oranı 1,07:1 ile 1,29:1 arasında. 1,07 pratikte "hiç yok"
   demek; yazı kırpılma düzeltildikten sonra da okunmamasının sebebi buydu.

   Yeni gradyan 1,47:1 → 1,89:1. Filigran net seçiliyor ama hâlâ arka plan
   öğesi; gövde metniyle yarışmıyor. Üstelik içerikle çakışmıyor da:
   paragraf kartın 667. pikselinde bitiyor, filigran 733'te başlıyor. */
.about-style-one-info .fixed-text {
    background: linear-gradient(-90deg, #c3cad8 0%, #a9b1c3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Dar masaüstünde kart da daralıyor (container 1140 → col-xl-8 ≈ 760px);
   220px'te "Rayu" ~525px, sol hizayla 595 < 760 — sığıyor.
   Sol boşluk temanın o kırılımdaki left:70px değerine göre ayarlı. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .about-style-one-area .about-style-one-info .fixed-text {
        font-size: 220px;
        margin: 30px 0 0 -10px;
        padding-top: 10px;
        padding-bottom: 60px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about-style-one-area .about-style-one-info .fixed-text {
        font-size: 200px;
        margin: 27px 0 0 -10px;
        padding-top: 9px;
        padding-bottom: 54px;
    }
}

/* ================================================================
   Deneyim kartı — sayının birimi ve açıklaması

   Kart eskiden "Yıllık toplam teknik deneyim" başlığı altında yalnız bir 29
   gösteriyordu; sayı birimsiz kaldığı için başlıkla birlikte yanlış okunuyordu.
   Artık başlık ekipte biriken toplamı anlatıyor, sayının yanında birimi yazıyor
   ve altında hangi alanların toplandığı belirtiliyor.
   ================================================================ */
.rayu-deneyim-kart .rayu-deneyim-not {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 25px;
    color: var(--color-paragraph);
}

/* Sayı ile birim aynı taban çizgisine otursun; .js-counter inline-flex
   olduğu için hizalama .fun-fact üzerinden veriliyor. */
.rayu-deneyim-kart .fun-fact {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.rayu-deneyim-kart .fun-fact .birim {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-heading);
}

/* ================================================================
   Yaklaşım bölümü — arka plan örtüsü

   Arka plan ipek kumaştan (silk.jpg) markaya özel soyut bir akışa (akis.jpg)
   geçti. Yeni görselin alt yarısında turuncu ışık şeritleri var ve üç sütunun
   paragrafları tam oraya geliyordu: beyaz metnin kontrastı ~3:1'e düşüyordu.

   Temanın kendi katmanı (#11d452, mix-blend-mode: darken) yukarıda
   kapatılmıştı — turuncuyu çamura çeviriyordu. Yerine düz bir koyu örtü
   geliyor: %46'da şeritler görünür kalıyor ama beyaz metin her yerde 6:1
   üzerinde okunuyor.

   Yalnızca bu bölüme veriliyor (.rayu-ilkeler); başka bir yerde
   .funfact-style-one-items kullanılırsa etkilenmesin.
   ================================================================ */
.funfact-style-one-items.rayu-ilkeler::after {
    display: block;
    background: linear-gradient(
        180deg,
        rgba(2, 16, 22, 0.34) 0%,
        rgba(2, 16, 22, 0.46) 46%,
        rgba(2, 16, 22, 0.58) 100%
    );
    mix-blend-mode: normal;
    opacity: 1;
}

/* ================================================================
   Form onay kutusu — KVKK aydınlatma onayı
   (partials/kvkk-onay.blade.php; iletişim brief formu + kariyer başvurusu)

   Gerçek <input type="checkbox"> DOM'da duruyor ve sekmeyle odaklanılabiliyor;
   yalnızca görsel olarak gizlenip yerine .kutu çiziliyor. display:none
   kullanılmıyor — o, kutuyu erişilebilirlik ağacından da çıkarır ve klavye
   kullanıcısı onayı hiç işaretleyemez.
   ================================================================ */
.rayu-onay {
    margin-bottom: 20px;
}

.rayu-onay-satir {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

.rayu-onay-satir input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.rayu-onay-satir .kutu {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid rgba(0, 6, 98, 0.24);
    border-radius: 5px;
    background: var(--white);
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease;
}

/* Tik işareti CSS ile: ikon fontuna bağımlılık yok
   (bkz. fa-rayu.css alt kümesi — listede olmayan ikon sessizce boş çiziliyor) */
.rayu-onay-satir .kutu::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.6);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.rayu-onay-satir input[type="checkbox"]:checked ~ .kutu {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.rayu-onay-satir input[type="checkbox"]:checked ~ .kutu::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.rayu-onay-satir input[type="checkbox"]:focus-visible ~ .kutu {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rayu-onay-satir .yazi {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-paragraph);
}

.rayu-onay-satir .yazi a {
    color: var(--color-heading);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rayu-onay-satir .yazi a:hover {
    color: var(--color-primary);
}

/* Koyu zeminli formlarda (kariyer sihirbazı beyaz, iletişim kartı beyaz —
   ileride koyu bir forma konursa diye) metin okunur kalsın */
.text-light .rayu-onay-satir .yazi {
    color: rgba(255, 255, 255, 0.72);
}

.text-light .rayu-onay-satir .yazi a {
    color: #fff;
}

.text-light .rayu-onay-satir .kutu {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
}

/* ================================================================
   Partner rozeti — doğrulanabilir hâli
   (partials/partner-rozet.blade.php)

   Panelde doğrulama adresi girilmişse rozet <a> olarak basılıyor. Temanın
   .brand-style-two-item span kuralı yalnızca <span>'i hedeflediği için
   bağlantı hâli görünümü buradan alıyor; ikisi birebir aynı görünsün diye
   gradyan zemin ve dolgu tekrarlanıyor.
   ================================================================ */
.brand-style-two-item .rayu-partner-rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--white);
    background: var(--bg-gradient);
    padding: 4px 15px 5px;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-style-two-item .rayu-partner-rozet:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

/* Dış bağlantı oku — rozetin kendisinden bir tık soluk, metni bastırmasın */
.brand-style-two-item .rayu-partner-rozet i {
    font-size: 10px;
    opacity: 0.75;
}

.brand-style-two-item .rayu-partner-rozet:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* Yalnızca ekran okuyucuya görünen metin.
   display:none / visibility:hidden KULLANILMAZ: ikisi de öğeyi erişilebilirlik
   ağacından da çıkarır, yani ekran okuyucu da okumaz. */
.gizli-metin {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   Final doküman v1.0 (2026-08-25) bileşenleri
   — anasayfa Rayu Teknolojileri şeridi, DSP rozetleri, ölçüm köprüsü,
     footer sloganı ve teknoloji sayfalarının (hub + 3 ürün) parçaları.
   ================================================================ */

/* --- Anasayfa · Rayu Teknolojileri şeridi (hizmet kartlarının altında) --- */
.rayu-tek-serit .rayu-tek-serit-bas {
    max-width: 640px;
    margin-bottom: 30px;
}

.rayu-tek-serit .rayu-tek-serit-bas h3 {
    font-size: 26px;
    margin-bottom: 8px;
}

.rayu-tek-serit .rayu-tek-serit-bas p {
    margin: 0;
    color: var(--color-paragraph);
}

.rayu-tek-serit-kartlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Görsel zeminli ürün kartı — anasayfa şeridi ve teknoloji hub'ı ortak.

   Yapı: <a.rayu-tek-kart> içinde .zemin (koyu görsel, hover'da yakınlaşır)
   ve .icerik (alta hizalı metin). Okunabilirliği .zemin::after'daki dikey
   degrade sağlıyor; görselin üst kısmı görünür kalırken metin bandı her
   görselde aynı koyulukta oturuyor. */
.rayu-tek-kart {
    position: relative;
    display: flex;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: #0c1418;
    box-shadow: 0 14px 34px rgba(2, 16, 22, 0.22);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease;
}

.rayu-tek-kart:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(2, 16, 22, 0.34);
}

.rayu-tek-kart .zemin {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    transform: scale(1.01);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-tek-kart:hover .zemin {
    transform: scale(1.08);
}

.rayu-tek-kart .zemin::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(2, 16, 22, 0.12) 0%,
        rgba(2, 16, 22, 0.32) 45%,
        rgba(2, 16, 22, 0.86) 100%
    );
}

.rayu-tek-kart .icerik {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
    padding: 26px 26px 24px;
}

.rayu-tek-kart .isaret {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-gradient);
    margin-bottom: 4px;
    transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-tek-kart:hover .isaret {
    width: 52px;
}

.rayu-tek-kart .ad {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    color: #fff;
}

/* Hub kartındaki tek cümlelik tanım (şeritte kullanılmıyor) */
.rayu-tek-kart .tanim {
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.rayu-tek-kart .aciklama {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

/* Ölçüt satırı (hub): istatistik imzası, ince çizgiyle ayrılır */
.rayu-tek-kart .olcut {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--rayu-teal);
}

.rayu-tek-kart .git {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 14.5px;
    color: #fff;
}

.rayu-tek-kart .git i {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-tek-kart:hover .git {
    color: var(--rayu-orange);
}

.rayu-tek-kart:hover .git i {
    transform: translateX(6px);
}

.rayu-tek-kart:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Hub'da kartlar daha yüksek; tanım + ölçüt satırı da taşıyorlar */
.rayu-tek-serit-kartlar.hub-boy .rayu-tek-kart {
    min-height: 430px;
}

@media (prefers-reduced-motion: reduce) {
    .rayu-tek-kart,
    .rayu-tek-kart .zemin,
    .rayu-tek-kart .isaret,
    .rayu-tek-kart .git i {
        transition: none;
    }

    .rayu-tek-kart:hover .zemin {
        transform: scale(1.01);
    }
}

@media (max-width: 991px) {
    .rayu-tek-serit-kartlar {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rayu-tek-kart,
    .rayu-tek-serit-kartlar.hub-boy .rayu-tek-kart {
        min-height: 260px;
    }
}

/* --- Anasayfa · DSP yetenek rozetleri (koyu zemin) --- */
.rayu-dsp-rozet {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.rayu-dsp-rozet li {
    position: relative;
    padding-left: 30px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

/* Onay imi CSS ile — ikon fontuna bağımlılık yok (fa-rayu alt kümesi) */
.rayu-dsp-rozet li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-gradient);
}

.rayu-dsp-rozet li::after {
    content: "";
    position: absolute;
    left: 6.5px;
    top: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rayu-dsp-tetik {
    opacity: 0.8;
    font-size: 14.5px;
}

.rayu-dsp-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* Koyu zeminde ikincil bağlantı okunur kalsın */
.rayu-dsp-cta .btn-simple {
    color: rgba(255, 255, 255, 0.85);
}

.rayu-dsp-cta .btn-simple:hover {
    color: var(--color-primary);
}

/* --- Anasayfa · Ölçüm bölümü: yığın üstü satır + Rayu Data köprüsü --- */
.rayu-yigin-ust-satir {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-heading);
    opacity: 0.75;
}

.rayu-yigin-kopru {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 20px 26px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid rgba(0, 6, 98, 0.08);
}

.rayu-yigin-kopru span {
    font-size: 15px;
    color: var(--color-paragraph);
}

/* --- Footer sloganı + kapanış alt satırı --- */
.rayu-footer-slogan {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px !important;
}

.rayu-closing-alt {
    margin: 26px 0 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

/* --- Sayfa hero düğmeleri (teknoloji sayfaları) --- */
.rayu-page-hero-btn {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.rayu-page-hero-info .rayu-page-hero-btn .btn-simple {
    color: rgba(255, 255, 255, 0.85);
}

.rayu-page-hero-info .rayu-page-hero-btn .btn-simple:hover {
    color: var(--color-primary);
}

/* --- Teknoloji sayfaları · madde listesi (kalın etiket + açıklama) --- */
.rayu-tek-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.rayu-tek-liste.iki-sutun {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 40px;
}

.rayu-tek-liste li {
    position: relative;
    padding-left: 26px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-paragraph);
}

.rayu-tek-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-gradient);
}

.rayu-tek-liste li strong {
    color: var(--color-heading);
}

@media (max-width: 767px) {
    .rayu-tek-liste.iki-sutun {
        grid-template-columns: 1fr;
    }
}

/* Bölüm sonu küçük not (kapsam notu, ilke dipnotu) */
.rayu-tek-not {
    margin: 26px 0 0;
    font-size: 14px;
    color: var(--color-paragraph);
    opacity: 0.85;
}

/* --- DSP · güç göstergesi rakam şeridi --- */
.rayu-tek-rakamlar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 44px;
    padding-top: 34px;
    border-top: 1px solid rgba(0, 6, 98, 0.1);
}

.rayu-tek-rakamlar .rakam b {
    display: block;
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rayu-tek-rakamlar .rakam span {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-paragraph);
}

@media (max-width: 991px) {
    .rayu-tek-rakamlar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Kullanım modeli kartları (Yönetilen / Self-Service, Kimin için) --- */
.rayu-tek-kullanim {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.rayu-tek-kullanim.uclu {
    grid-template-columns: repeat(3, 1fr);
}

.rayu-tek-kullanim .model {
    padding: 28px 26px;
    border-radius: 14px;
    background: var(--bg-gray);
    border: 1px solid rgba(0, 6, 98, 0.07);
}

.rayu-tek-kullanim .model h4 {
    margin-bottom: 10px;
}

.rayu-tek-kullanim .model p {
    font-size: 15px;
    margin-bottom: 0;
}

.rayu-tek-kullanim .model .btn-simple {
    margin-top: 14px;
}

@media (max-width: 991px) {
    .rayu-tek-kullanim,
    .rayu-tek-kullanim.uclu {
        grid-template-columns: 1fr;
    }
}

/* --- Hub · karşılaştırma tablosu --- */
.rayu-tek-tablo-kap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(0, 6, 98, 0.08);
    background: var(--white);
}

.rayu-tek-tablo {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.rayu-tek-tablo th,
.rayu-tek-tablo td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(0, 6, 98, 0.08);
    line-height: 1.55;
}

.rayu-tek-tablo thead th {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--color-heading);
    border-bottom: 2px solid rgba(0, 6, 98, 0.14);
}

.rayu-tek-tablo tbody th {
    width: 140px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-paragraph);
}

.rayu-tek-tablo td {
    color: var(--color-paragraph);
}

.rayu-tek-tablo tbody tr:last-child th,
.rayu-tek-tablo tbody tr:last-child td {
    border-bottom: none;
}

/* ================================================================
   Teknoloji sayfaları — görsel bantlar ve hareket katmanı
   (kullanıcı geri bildirimi: "görsellik yok, animasyon yok")
   ================================================================ */

/* Koyu görsel bantlar. Degrade örtü görselle AYNI kuralda: inline style
   yerine sınıf kullanılıyor ki her bantta okunabilirlik örtüsü garanti
   olsun — akis görsellerinin turuncu akıntıları beyaz metnin altına
   örtüsüz girince kontrast 3:1'in altına düşüyordu. */
.rayu-bant-akis2 {
    background-image: linear-gradient(rgba(2, 16, 22, 0.62), rgba(2, 16, 22, 0.62)),
                      url(/assets/img/rayu/bg/akis-2.jpg);
}

.rayu-bant-akis3 {
    background-image: linear-gradient(rgba(2, 16, 22, 0.62), rgba(2, 16, 22, 0.62)),
                      url(/assets/img/rayu/bg/akis-3.jpg);
}

.rayu-bant-mesh {
    background-image: linear-gradient(rgba(2, 16, 22, 0.66), rgba(2, 16, 22, 0.66)),
                      url(/assets/img/rayu/bg/mesh.jpg);
}

/* Madde listesi ve dipnot koyu bantta okunur kalsın */
.text-light .rayu-tek-liste li {
    color: rgba(255, 255, 255, 0.82);
}

.text-light .rayu-tek-liste li strong {
    color: #fff;
}

.text-light .rayu-tek-not {
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
}

/* Kullanım modeli kartları: üstte büyüyen degrade aksan + kalkış */
.rayu-tek-kullanim .model {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease;
}

.rayu-tek-kullanim .model::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 4px;
    background: var(--bg-gradient);
    border-radius: 0 0 4px 0;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-tek-kullanim .model:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0, 6, 98, 0.1);
}

.rayu-tek-kullanim .model:hover::before {
    width: 100%;
}

/* Karşılaştırma tablosu: satır vurgusu */
.rayu-tek-tablo tbody tr {
    transition: background 0.2s ease;
}

.rayu-tek-tablo tbody tr:hover {
    background: rgba(47, 176, 175, 0.06);
}

/* Süreç adımları (rayu-terms-item) teknoloji sayfalarında da kullanılıyor;
   hover'da numara marka rengine dönsün — anasayfadakiyle aynı his */
.rayu-terms-item {
    transition: background 0.2s ease, transform 0.25s ease;
}

.rayu-terms-item:hover {
    transform: translateX(6px);
}

.rayu-terms-item:hover .num {
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .rayu-tek-kullanim .model,
    .rayu-tek-kullanim .model::before,
    .rayu-terms-item {
        transition: none;
    }

    .rayu-terms-item:hover {
        transform: none;
    }
}

/* R·A·Y·U paneli: adim etiketi basligin SAGINDA (kullanici istegi).
   Baslik temanin h4 olcusunden ~12px buyudu (20 -> 32px); etiket ayni
   satirda taban cizgisine oturur, panel dardaysa alta sarar. */
.rayu-acc-content .rayu-acc-bas {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rayu-acc-content .rayu-acc-bas h4 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
}

/* Eski dikey dizilimin bosluklari satir duzeninde sifirlanir */
.rayu-acc-content .rayu-acc-bas .step-label {
    display: inline-block;
    margin: 0;
}

/* ================================================================
   Teknoloji sayfaları — akış düzeni (tasarım turu 3)

   Kutu ızgarası kullanıcı isteğiyle kaldırıldı; yerine çerçevesiz,
   ayraç çizgili bir akış geldi:
     · .rayu-akis-liste  — iki kolona akan indeks satırları
     · .rayu-surec-akis  — noktalı ilerleme hattı üstünde adım kolonları
     · .rayu-tek-kullanim — kutulardan çizgiyle bölünmüş kolonlara döndü
   Hepsi tek parça girer: öğe bazlı gecikme, animasyon bitene kadar
   kolonları hizasız gösteriyordu — bilerek kaldırıldı.
   ================================================================ */

/* --- İndeks satırlı akış listesi --- */
.rayu-akis-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 72px;
}

.rayu-akis-liste .satir {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: start;
    gap: 18px;
    padding: 24px 0 24px 16px;
    border-bottom: 1px solid rgba(0, 6, 98, 0.1);
    transition: padding-left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Sol kenarda hover'da uzayan degrade aksan */
.rayu-akis-liste .satir::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 26px;
    width: 3px;
    border-radius: 2px;
    background: var(--bg-gradient);
    opacity: 0;
    transform: scaleY(0.3);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-akis-liste .satir:hover {
    padding-left: 26px;
}

.rayu-akis-liste .satir:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.rayu-akis-liste .no {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding-top: 7px;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.65;
    transition: opacity 0.25s ease;
}

.rayu-akis-liste .satir:hover .no {
    opacity: 1;
}

/* İkon rozeti: varsayılan hâli çizgisel (kutu hissi yok);
   hover'da degradeyle dolup beyaza döner */
.rayu-akis-liste .ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 6, 98, 0.16);
    color: var(--color-heading);
    background: transparent;
    transition: background 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-akis-liste .satir:hover .ikon {
    background: var(--bg-gradient);
    border-color: transparent;
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
}

.rayu-akis-liste .ikon svg {
    width: 20px;
    height: 20px;
}

.rayu-akis-liste .icerik h4 {
    font-size: 17px;
    margin-bottom: 6px;
    transition: color 0.25s ease;
}

.rayu-akis-liste .satir:hover .icerik h4 {
    color: var(--color-primary);
}

.rayu-akis-liste .icerik p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    color: var(--color-paragraph);
}

/* Koyu görsel bant varyantı */
.rayu-akis-liste.cam .satir {
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.rayu-akis-liste.cam .ikon {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.rayu-akis-liste.cam .icerik h4 {
    color: #fff;
}

.rayu-akis-liste.cam .satir:hover .icerik h4 {
    color: var(--rayu-orange);
}

.rayu-akis-liste.cam .icerik p {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 991px) {
    .rayu-akis-liste {
        grid-template-columns: 1fr;
    }
}

/* --- Noktalı ilerleme hattı (süreç akışı) --- */
.rayu-surec-akis {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--adim-sayisi, 3), 1fr);
    column-gap: 48px;
    padding-top: 30px;
}

/* Hat: durakların merkezinden geçen degrade çizgi */
.rayu-surec-akis .hat {
    position: absolute;
    top: 5px;
    left: 6px;
    right: 6px;
    height: 2px;
    background: linear-gradient(90deg, var(--rayu-orange) 0%, var(--rayu-teal) 100%);
    opacity: 0.35;
}

.rayu-surec-akis .adim {
    position: relative;
}

.rayu-surec-akis .durak {
    position: absolute;
    top: -30px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-gradient);
    box-shadow: 0 0 0 4px rgba(240, 112, 32, 0.14);
    transition: box-shadow 0.3s ease;
}

.rayu-surec-akis .adim:hover .durak {
    box-shadow: 0 0 0 8px rgba(240, 112, 32, 0.18);
}

.rayu-surec-akis .no {
    display: block;
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 14px;
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-surec-akis .adim:hover .no {
    transform: translateX(5px);
}

.rayu-surec-akis h4 {
    font-size: 19px;
    margin-bottom: 10px;
}

.rayu-surec-akis p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    color: var(--color-paragraph);
}

@media (max-width: 991px) {
    .rayu-surec-akis {
        grid-template-columns: 1fr;
        row-gap: 34px;
        padding-top: 0;
    }

    /* Dikey akışta sıralamayı dizilim anlatıyor; hat ve duraklar gizli */
    .rayu-surec-akis .hat,
    .rayu-surec-akis .durak {
        display: none;
    }
}

/* --- Kullanım / kimin-için kolonları: kutudan bölünmüş kolona ---
   Önceki kutu tanımını (gri zemin, kenarlık, üst aksan) geri alır;
   kolonlar yalnız ince dikey çizgiyle ayrılır. */
.rayu-tek-kullanim {
    gap: 0;
}

.rayu-tek-kullanim .model {
    background: transparent;
    border: none;
    border-radius: 0;
    border-left: 1px solid rgba(0, 6, 98, 0.12);
    padding: 8px 34px;
    overflow: visible;
}

.rayu-tek-kullanim .model:first-child {
    border-left: none;
    padding-left: 0;
}

.rayu-tek-kullanim .model::before {
    display: none;
}

.rayu-tek-kullanim .model:hover {
    transform: none;
    box-shadow: none;
}

/* İkon rozeti akış listesindekiyle aynı dil: çizgisel, hover'da dolar.

   display:inline-flex ŞART: span satır içi kaldığında width/height
   uygulanmıyor, boyutsuz SVG kolonu kaplayacak kadar büyüyor ve rozetin
   50%'lik köşesi kısa-geniş bir "mercek" şeridine dönüyordu (tasarım
   turu 3'te bu iki satır yanlışlıkla düşmüştü). */
.rayu-tek-kullanim .model .model-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(0, 6, 98, 0.16);
    color: var(--color-heading);
    margin-bottom: 16px;
    transition: background 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rayu-tek-kullanim .model .model-ikon svg {
    width: 22px;
    height: 22px;
}

.rayu-tek-kullanim .model:hover .model-ikon {
    background: var(--bg-gradient);
    border-color: transparent;
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
}

@media (max-width: 991px) {
    .rayu-tek-kullanim .model {
        border-left: none;
        border-top: 1px solid rgba(0, 6, 98, 0.12);
        padding: 24px 0 8px;
    }

    .rayu-tek-kullanim .model:first-child {
        border-top: none;
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rayu-akis-liste .satir,
    .rayu-akis-liste .satir::before,
    .rayu-akis-liste .ikon,
    .rayu-surec-akis .no,
    .rayu-surec-akis .durak,
    .rayu-tek-kullanim .model .model-ikon {
        transition: none;
    }

    .rayu-akis-liste .satir:hover {
        padding-left: 16px;
    }

    .rayu-akis-liste .satir:hover .ikon,
    .rayu-surec-akis .adim:hover .no,
    .rayu-tek-kullanim .model:hover .model-ikon {
        transform: none;
    }
}

/* ================================================================
   İnce CTA bandı — görsel zeminli, animasyonlu varyant (.goruntulu)

   Düz çizgili bant, konteyner içinde yuvarlatılmış koyu bir şeride
   dönüştü. Üç hareket katmanı var, üçü de reduced-motion ile susar:
     1. Arka plan görseli Ken Burns ile çok yavaş gezinir (18 sn,
        ileri-geri) — bant "canlı" durur ama dikkat dağıtmaz.
     2. Ok, nabız gibi sağa süzülür; bandın tek eylemi olduğunu söyler.
     3. Giriş GSAP fade-up-anim ile.
   Görsel ::before katmanında taşma payıyla durur (inset -40px), pan
   sırasında kenarlarda boşluk açılmaz. Okunabilirlik örtüsü ::after'da:
   metin solda koyu, düğme tarafı bir tık açık.
   ================================================================ */
.rayu-cta-strip.goruntulu {
    border-top: none;
    border-bottom: none;
    padding: 14px 0;
}

.rayu-cta-strip.goruntulu .inner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 16px;
    padding: 30px 38px;
    box-shadow: 0 16px 40px rgba(2, 16, 22, 0.22);
}

.rayu-cta-strip.goruntulu .inner::before {
    content: "";
    position: absolute;
    inset: -44px;
    z-index: -2;
    background-position: center;
    background-size: cover;
    animation: rayu-cta-gezinti 18s ease-in-out infinite alternate;
}

.rayu-cta-strip.zemin-akis2 .inner::before {
    background-image: url(/assets/img/rayu/bg/akis-2.jpg);
}

.rayu-cta-strip.zemin-akis3 .inner::before {
    background-image: url(/assets/img/rayu/bg/akis-3.jpg);
}

.rayu-cta-strip.goruntulu .inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Görseller zaten koyu; örtü hafif tutuldu ki turuncu akıntılar
       bandın içinde gerçekten görünsün. Metin tarafı yine en koyu uç. */
    background: linear-gradient(
        90deg,
        rgba(2, 16, 22, 0.72) 0%,
        rgba(2, 16, 22, 0.38) 55%,
        rgba(2, 16, 22, 0.58) 100%
    );
}

@keyframes rayu-cta-gezinti {
    0% {
        transform: scale(1) translateX(0);
    }

    100% {
        transform: scale(1.1) translateX(1.6%);
    }
}

.rayu-cta-strip.goruntulu span {
    color: #fff;
}

.rayu-cta-strip.goruntulu .btn-simple {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.rayu-cta-strip.goruntulu .btn-simple:hover {
    color: var(--rayu-orange);
}

/* Ok nabzı: bandın tek eylemine sürekli, yumuşak bir davet */
.rayu-cta-strip.goruntulu .btn-simple i {
    animation: rayu-cta-ok 1.9s ease-in-out infinite;
}

@keyframes rayu-cta-ok {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(7px);
    }
}

@media (max-width: 767px) {
    .rayu-cta-strip.goruntulu .inner {
        padding: 24px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rayu-cta-strip.goruntulu .inner::before,
    .rayu-cta-strip.goruntulu .btn-simple i {
        animation: none;
    }
}