/* ══════════════════════════════════════════════════════════
   MÜŞTERİ HİZMETLERİ — customer-service.css
   Raporlama standardı ile uyumlu. reporting.css üzerine extend.
   ──────────────────────────────────────────────────────────
   NOT: Bu dosya daha önce 4 farklı yama bloğu olarak üst üste
   yazılmıştı. Aşağıdaki tek akışlı versiyon, tekrarlanan
   selektörleri birleştirir; çelişen değerlerde en güncel
   (team section) bloğu referans alınır. Animasyon davranışı
   birebir korunmuştur.
   ══════════════════════════════════════════════════════════ */

/* ══ PAGE ATMOSFERİ ════════════════════════════════════════ */
.customer-service-page,
.cs-page {
    background:
        radial-gradient(circle at top left, rgba(8, 77, 112, 0.06), transparent 22%),
        radial-gradient(circle at 85% 18%, rgba(58, 125, 158, 0.08), transparent 18%),
        linear-gradient(180deg, #f4f8fc 0%, #eef4f9 100%);
    color: #0d2238;
}

.customer-service-page .section,
.cs-page .section {
    position: relative;
}

.customer-service-page .container,
.cs-page .container {
    position: relative;
    z-index: 2;
}

.cs-page h1,
.cs-page h2,
.customer-service-page h1,
.customer-service-page h2 {
    color: #0d2238;
    letter-spacing: -0.03em;
}

.cs-page p,
.customer-service-page p {
    color: #5a6a79;
}

/* ══ EYEBROW / KICKER ══════════════════════════════════════ */
.cs-section-kicker,
.cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 77, 112, 0.08);
    border: 1px solid rgba(8, 77, 112, 0.12);
    color: #084d70;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ══ HERO / TEAM SECTION ═══════════════════════════════════ */
.cs-team-section {
    padding: 36px 0 90px;
}

.cs-team-copy {
    max-width: 560px;
}

.cs-team-copy h2 {
    margin: 12px 0 18px;
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.08;
    font-weight: 800;
    color: #0d2238;
    letter-spacing: -0.03em;
}

.cs-team-copy p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--rp-muted, #5a6a79);
    margin-bottom: 16px;
}

/* Hero stage — SVG sarmalı */
.cs-hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 18px;
    min-height: 520px;
    border-radius: 34px;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 24%, rgba(58, 125, 158, 0.12), transparent 22%),
        radial-gradient(circle at 86% 18%, rgba(8, 77, 112, 0.10), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
    border: 1px solid rgba(13, 34, 56, 0.06);
    box-shadow: 0 26px 60px rgba(12, 34, 56, 0.08);
}

.cs-hero-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(8, 77, 112, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 77, 112, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.95), transparent 82%);
    pointer-events: none;
    z-index: 0;
}

.cs-hero-stage::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -30px;
    bottom: -30px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(58, 125, 158, 0.14) 0%, rgba(58, 125, 158, 0) 72%);
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
}

/* SVG container */
.cs-ig-svg-container,
.cs-hero-stage .cs-ig-svg-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
}

.cs-hero-svg-shell {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

/* SVG kendisi — tek yerden boyut */
.cs-hero-svg-shell svg,
.cs-hero-svg-shell .cc-main-svg,
.cs-hero-stage svg,
.cs-hero-stage .cc-main-svg {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    overflow: visible;
    margin: 0 auto;
    filter: drop-shadow(0 24px 50px rgba(12, 34, 56, 0.14));
}

/* ══ SVG ANIMASYON BAŞLANGIÇ / AKTİF DURUM ════════════════════
   Strateji: Varsayılan görünür. JS is-anim-ready ekleyince
   başlangıç transformları + opacity:0 uygulanır. is-active
   eklenince keyframes tetiklenir.
   ══════════════════════════════════════════════════════════ */

.cs-hero-svg-shell #cc-desk,
.cs-hero-svg-shell #cc-phone,
.cs-hero-svg-shell #cc-computer,
.cs-hero-svg-shell #cc-agent,
.cs-hero-svg-shell #cc-chat,
.cs-hero-svg-shell #cc-icon-person,
.cs-hero-svg-shell #cc-icon-wrenc,
.cs-hero-svg-shell #cc-icon-24\/7 {
    opacity: 1;
    transform-box: fill-box;
    will-change: transform, opacity;
}

/* is-anim-ready → başlangıç durumu (görünmez, dışarıda) */
.cs-hero-svg-shell.is-anim-ready #cc-desk,
.cs-hero-svg-shell.is-anim-ready #cc-phone,
.cs-hero-svg-shell.is-anim-ready #cc-computer,
.cs-hero-svg-shell.is-anim-ready #cc-agent,
.cs-hero-svg-shell.is-anim-ready #cc-chat,
.cs-hero-svg-shell.is-anim-ready #cc-icon-person,
.cs-hero-svg-shell.is-anim-ready #cc-icon-wrenc,
.cs-hero-svg-shell.is-anim-ready #cc-icon-24\/7 {
    opacity: 0;
}

.cs-hero-svg-shell.is-anim-ready #cc-desk {
    transform-origin: center bottom;
    transform: translate3d(0, 42px, 0) scale(0.92);
}
.cs-hero-svg-shell.is-anim-ready #cc-phone {
    transform-origin: center center;
    transform: translate3d(-58px, -12px, 0) scale(0.82) rotate(-6deg);
}
.cs-hero-svg-shell.is-anim-ready #cc-computer {
    transform-origin: center center;
    transform: translate3d(70px, -14px, 0) scale(0.82) rotate(5deg);
}
.cs-hero-svg-shell.is-anim-ready #cc-chat {
    transform-origin: center center;
    transform: translate3d(0, -54px, 0) scale(0.76);
}
.cs-hero-svg-shell.is-anim-ready #cc-icon-person {
    transform-origin: center center;
    transform: translate3d(-62px, -46px, 0) scale(0.7);
}
.cs-hero-svg-shell.is-anim-ready #cc-icon-wrenc {
    transform-origin: center center;
    transform: translate3d(28px, 42px, 0) scale(0.7);
}
.cs-hero-svg-shell.is-anim-ready #cc-icon-24\/7 {
    transform-origin: center center;
    transform: translate3d(72px, -44px, 0) scale(0.7);
}
.cs-hero-svg-shell.is-anim-ready #cc-agent {
    transform-origin: center bottom;
    transform: translate3d(0, -120px, 0) scale(0.84);
}

/* is-active → animasyon tetikleme */
.cs-hero-svg-shell.is-active #cc-desk {
    animation: csDeskReveal 0.82s cubic-bezier(.22,.84,.24,1) 0.05s forwards;
}
.cs-hero-svg-shell.is-active #cc-phone {
    animation:
        csPartInLeft 0.7s cubic-bezier(.22,.84,.24,1) 0.64s forwards,
        csFloatA 5.8s ease-in-out 1.8s infinite;
}
.cs-hero-svg-shell.is-active #cc-computer {
    animation:
        csPartInRight 0.75s cubic-bezier(.22,.84,.24,1) 0.84s forwards,
        csFloatB 6.2s ease-in-out 2s infinite;
}
.cs-hero-svg-shell.is-active #cc-chat {
    animation:
        csPartDrop 0.68s cubic-bezier(.2,1.08,.32,1) 1.02s forwards,
        csFloatA 5.4s ease-in-out 2.2s infinite;
}
.cs-hero-svg-shell.is-active #cc-icon-person {
    animation:
        csIconInLeft 0.62s cubic-bezier(.22,.84,.24,1) 1.16s forwards,
        csFloatB 6.1s ease-in-out 2.35s infinite;
}
.cs-hero-svg-shell.is-active #cc-icon-wrenc {
    animation:
        csIconInBottom 0.62s cubic-bezier(.22,.84,.24,1) 1.3s forwards,
        csFloatC 5.9s ease-in-out 2.45s infinite;
}
.cs-hero-svg-shell.is-active #cc-icon-24\/7 {
    animation:
        csIconInRight 0.62s cubic-bezier(.22,.84,.24,1) 1.44s forwards,
        csFloatA 6.4s ease-in-out 2.55s infinite;
}
.cs-hero-svg-shell.is-active #cc-agent {
    animation:
        csAgentDrop 0.92s cubic-bezier(.2,1.18,.32,1) 1.68s forwards,
        csFloatC 5.8s ease-in-out 2.7s infinite;
}

/* ══ KEYFRAMES ═════════════════════════════════════════════ */
@keyframes csDeskReveal {
    0%   { opacity: 0; transform: translate3d(0, 42px, 0) scale(0.92); }
    72%  { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.02); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes csPartInLeft {
    0%   { opacity: 0; transform: translate3d(-58px, -12px, 0) scale(0.82) rotate(-6deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}

@keyframes csPartInRight {
    0%   { opacity: 0; transform: translate3d(70px, -14px, 0) scale(0.82) rotate(5deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}

@keyframes csPartDrop {
    0%   { opacity: 0; transform: translate3d(0, -54px, 0) scale(0.76); }
    72%  { opacity: 1; transform: translate3d(0, 6px, 0) scale(1.02); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes csAgentDrop {
    0%   { opacity: 0; transform: translate3d(0, -120px, 0) scale(0.84); }
    72%  { opacity: 1; transform: translate3d(0, 10px, 0) scale(1.03); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes csIconInLeft {
    0%   { opacity: 0; transform: translate3d(-62px, -46px, 0) scale(0.7); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes csIconInBottom {
    0%   { opacity: 0; transform: translate3d(28px, 42px, 0) scale(0.7); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes csIconInRight {
    0%   { opacity: 0; transform: translate3d(72px, -44px, 0) scale(0.7); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes csFloatA {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -7px, 0); }
}

@keyframes csFloatB {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, 6px, 0); }
}

@keyframes csFloatC {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -5px, 0); }
}

/* ══ İLETİŞİM KANALLARI ════════════════════════════════════ */
.cs-channels-section {
    background: transparent;
}

.cs-channel-card {
    position: relative;
    padding: 34px 26px;
    border-radius: 24px;
    border: 1px solid rgba(13, 34, 56, 0.06);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 14px 34px rgba(12, 34, 56, 0.06);
    text-align: center;
    height: 100%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-channel-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #084d70 0%, #3a7d9e 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.cs-channel-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(12, 34, 56, 0.10);
}

.cs-channel-card:hover::before {
    opacity: 1;
}

.cs-channel-icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    background: linear-gradient(135deg, #084d70, #3a7d9e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 14px 26px rgba(8, 77, 112, 0.22);
    transition: transform 0.3s ease;
}

.cs-channel-card:hover .cs-channel-icon {
    transform: scale(1.1);
}

.cs-channel-icon i {
    font-size: 1.6rem;
    color: #fff;
}

.cs-channel-card h4 {
    font-size: 1.08rem;
    margin-bottom: 10px;
    color: #0d2238;
    font-weight: 700;
}

.cs-channel-number {
    font-size: 1.18rem;
    font-weight: 700;
    color: #084d70;
    margin-bottom: 10px;
    line-height: 1.4;
}

.cs-channel-email {
    font-size: 1rem;
}

/* ══ EKİP & HİZMETLER ══════════════════════════════════════ */
.cs-alt-section {
    background: transparent;
}

.cs-team-panel,
.cs-detail-panel {
    padding: 34px 30px;
    border-radius: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(13, 34, 56, 0.06);
    box-shadow: 0 18px 40px rgba(12, 34, 56, 0.06);
}

.cs-detail-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(12, 34, 56, 0.09);
    transition: transform 0.4s ease;
}

.cs-detail-img:hover {
    transform: scale(1.02);
}

.cs-feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(13, 34, 56, 0.07);
    box-shadow: 0 8px 18px rgba(12, 34, 56, 0.04);
    font-size: 0.94rem;
    color: #1a2c3d;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cs-feature-item:hover {
    transform: translateX(6px);
    box-shadow: 0 12px 24px rgba(12, 34, 56, 0.08);
    border-color: rgba(8, 77, 112, 0.12);
}

.cs-feature-item i {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 77, 112, 0.08);
    color: #084d70;
    font-size: 0.92rem;
    flex-shrink: 0;
}

/* ══ FAQ ═══════════════════════════════════════════════════ */
.cs-faq-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-faq-item {
    border: 1px solid rgba(13, 34, 56, 0.08);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(12, 34, 56, 0.04);
    transition: box-shadow 0.3s ease;
}

.cs-faq-item:hover {
    box-shadow: 0 6px 20px rgba(12, 34, 56, 0.07);
}

.cs-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #0d2238;
    transition: background 0.2s ease, color 0.2s ease;
}

.cs-faq-question:hover {
    background: #eaf2f7;
    color: #084d70;
}

.cs-faq-question.active {
    background: #084d70;
    color: #fff;
}

.cs-faq-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.cs-faq-question.active .cs-faq-icon {
    color: #fff;
}

.cs-faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #f8fbfe;
    transition: max-height 0.4s ease;
}

/* Açık (active) item'da cevap kutusu görünür hale gelir.
   max-height JS ile içeriğin scrollHeight değerine set edilir. */
.cs-faq-item.active .cs-faq-answer {
    /* Fallback — JS yüklenmediğinde de çalışsın diye geniş bir tavan */
    max-height: 1000px;
}

/* Aktifken artı ikonunu çarpıya çeviren rotasyon */
.cs-faq-question.active .cs-faq-icon {
    transform: rotate(45deg);
}

.cs-faq-answer p {
    padding: 16px 22px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a5a6a;
    margin: 0;
}

/* ══ TOOLTIP ═══════════════════════════════════════════════ */
.cs-ig-tooltip {
    position: absolute;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
    width: 240px;
}

.cs-ig-tooltip.cs-tt-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cs-ig-tooltip-inner {
    background: #fff;
    border-radius: 14px;
    padding: 15px 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.05);
    border-top: 3px solid var(--cs-tt-color, #084d70);
}

.cs-ig-tt-tag {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cs-tt-color, #084d70);
    margin-bottom: 5px;
}

.cs-ig-tt-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
    line-height: 1.25;
}

.cs-ig-tt-desc {
    font-size: 0.77rem;
    line-height: 1.6;
    color: #6c757d;
    margin: 0;
}

/* ══ ESKİ CC-INFOGRAPHIC ANIMASYONU (oklu merkez figür) ═══
   Farklı section'da hâlâ kullanılıyorsa diye korunuyor.
   ══════════════════════════════════════════════════════════ */
.cs-infographic-section {
    overflow: hidden;
}

.cs-ig-outer {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

/* Merkez figür — küçükten büyür */
#cc-figure {
    transform-origin: 298px 298px;
    transform: scale(0.25);
    opacity: 0;
    cursor: pointer;
    transition:
        transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1),
        opacity 0.6s ease;
}

#cc-figure.cc-visible {
    transform: scale(1);
    opacity: 1;
}

.cc-figure-hover #cc-figure {
    filter:
        drop-shadow(0 0 12px rgba(58, 125, 158, 0.35))
        drop-shadow(0 0 24px rgba(58, 125, 158, 0.15));
    transform: scale(1.04);
    transition:
        transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
        filter 0.35s ease,
        opacity 0.6s ease;
}

/* Ok segmentleri — yönlerine göre uçarak gelir */
#cc-arc-ur,
#cc-arc-ul,
#cc-arc-left,
#cc-arc-dl,
#cc-arc-down,
#cc-arc-dr,
#cc-arc-right {
    transform-origin: 298px 298px;
    opacity: 0;
    transition:
        transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.55s ease;
}

#cc-arc-ur    { transform: translate(55px, -55px); }
#cc-arc-ul    { transform: translate(-55px, -55px); }
#cc-arc-left  { transform: translate(-75px, 0); }
#cc-arc-dl    { transform: translate(-55px, 55px); }
#cc-arc-down  { transform: translate(0, 75px); }
#cc-arc-dr    { transform: translate(55px, 55px); }
#cc-arc-right { transform: translate(75px, 0); }

#cc-arc-ur.cc-visible,
#cc-arc-ul.cc-visible,
#cc-arc-left.cc-visible,
#cc-arc-dl.cc-visible,
#cc-arc-down.cc-visible,
#cc-arc-dr.cc-visible,
#cc-arc-right.cc-visible {
    transform: translate(0, 0);
    opacity: 1;
}

.cc-arc-group {
    cursor: pointer;
}

.cc-arc-group:hover {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
    transition:
        filter 0.2s ease,
        transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.55s ease;
}

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
    .cs-hero-stage {
        min-height: 460px;
    }
}

@media (max-width: 991.98px) {
    .cs-team-section {
        padding: 20px 0 12px;
    }

    .cs-hero-stage {
        min-height: 400px;
        padding: 20px 12px;
        border-radius: 28px;
    }

    .cs-hero-svg-shell,
    .cs-hero-svg-shell .cc-main-svg,
    .cs-hero-svg-shell > svg,
    .cs-hero-stage .cc-main-svg {
        max-width: 460px;
    }

    .cs-team-panel,
    .cs-detail-panel {
        padding: 26px 22px;
        border-radius: 24px;
    }
}

@media (max-width: 767.98px) {
    .cs-team-copy h2 {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }

    .cs-hero-stage {
        min-height: 320px;
        padding: 16px 10px;
        border-radius: 24px;
    }

    .cs-hero-svg-shell,
    .cs-hero-svg-shell .cc-main-svg,
    .cs-hero-svg-shell > svg,
    .cs-hero-stage .cc-main-svg {
        max-width: 100%;
    }

    .cs-channel-card {
        padding: 28px 20px;
    }

    .cs-ig-tooltip {
        width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-hero-svg-shell #cc-desk,
    .cs-hero-svg-shell #cc-phone,
    .cs-hero-svg-shell #cc-computer,
    .cs-hero-svg-shell #cc-agent,
    .cs-hero-svg-shell #cc-chat,
    .cs-hero-svg-shell #cc-icon-person,
    .cs-hero-svg-shell #cc-icon-wrenc,
    .cs-hero-svg-shell #cc-icon-24\/7 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.rp-text-content p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--rp-muted, #5a6a79);
    margin-bottom: 16px;
}

/* =========================================================
   CSS VISUAL: CUSTOMER SERVICE TEAM (.cs-cx-*)
   Saf CSS ile animasyonlu fütüristik çağrı merkezi görseli
   ========================================================= */

.cs-hero-stage {
    position: relative;
    min-height: 540px;
    overflow: hidden;
}

.cs-cx {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Animasyonlu grid arka plan */
.cs-cx-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(8, 77, 112, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 77, 112, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
    animation: csCxGridPan 24s linear infinite;
    z-index: 0;
}
@keyframes csCxGridPan {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 34px 34px, 34px 34px; }
}

/* Alt dalga */
.cs-cx-wave {
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(58, 125, 158, 0.18), transparent 60%),
        radial-gradient(ellipse at 20% 100%, rgba(8, 77, 112, 0.12), transparent 50%);
    z-index: 0;
    pointer-events: none;
}

/* Orbit halkaları */
.cs-cx-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(8, 77, 112, 0.22);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
.cs-cx-ring--1 {
    width: 320px; height: 320px;
    animation: csCxRing 26s linear infinite;
}
.cs-cx-ring--2 {
    width: 440px; height: 440px;
    border-color: rgba(58, 125, 158, 0.18);
    border-style: dotted;
    animation: csCxRing 36s linear infinite reverse;
}
@keyframes csCxRing { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Ana hub - headset container */
.cs-cx-hub {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Saf CSS headset */
.cs-cx-headset {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, #0d2238 0%, #1a3557 50%, #084d70 100%);
    box-shadow:
        0 24px 60px rgba(8, 77, 112, 0.35),
        0 0 0 12px rgba(8, 77, 112, 0.08),
        0 0 0 24px rgba(8, 77, 112, 0.04),
        inset 0 0 40px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: csCxHubFloat 6s ease-in-out infinite;
}
@keyframes csCxHubFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.cs-cx-headset::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 50%);
    pointer-events: none;
}

/* Kulaklık bandı */
.cs-cx-headset-band {
    position: absolute;
    top: 22%;
    left: 15%;
    right: 15%;
    height: 55%;
    border: 8px solid #fff;
    border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    border-bottom: none;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}

/* Kulaklık kulaklarinı */
.cs-cx-headset-ear {
    position: absolute;
    width: 28px;
    height: 42px;
    background: linear-gradient(145deg, #fff 0%, #e7eef7 100%);
    border-radius: 8px;
    top: 42%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.cs-cx-headset-ear.left  { left: 12%; }
.cs-cx-headset-ear.right { right: 12%; }
.cs-cx-headset-ear::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #3a7d9e, #084d70);
    box-shadow: 0 0 12px rgba(58, 125, 158, 0.6);
    animation: csCxEarGlow 2s ease-in-out infinite;
}
@keyframes csCxEarGlow {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Mikrofon */
.cs-cx-headset-mic {
    position: absolute;
    width: 4px;
    height: 36px;
    background: #fff;
    left: 22%;
    top: 58%;
    transform: rotate(28deg);
    transform-origin: top;
    border-radius: 2px;
}
.cs-cx-headset-tip {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #d91f26 100%);
    left: 36%;
    top: 76%;
    box-shadow: 0 0 12px rgba(217, 31, 38, 0.5);
    animation: csCxMicBlink 1.5s ease-in-out infinite;
}
@keyframes csCxMicBlink {
    0%, 100% { box-shadow: 0 0 8px rgba(217, 31, 38, 0.5); }
    50%      { box-shadow: 0 0 18px rgba(217, 31, 38, 0.9); }
}

/* Hub etiketi */
.cs-cx-hub-label {
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #084d70, #3a7d9e);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 20px rgba(8, 77, 112, 0.35);
    text-transform: uppercase;
}

/* Sinyal dalgaları */
.cs-cx-signal {
    position: absolute;
    top: 50%; left: 50%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(8, 77, 112, 0.4);
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: csCxSignal 3s ease-out infinite;
    pointer-events: none;
}
.cs-cx-signal--1 { animation-delay: 0s; }
.cs-cx-signal--2 { animation-delay: 1s; }
.cs-cx-signal--3 { animation-delay: 2s; }
@keyframes csCxSignal {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* Chat kabarcıkları */
.cs-cx-bubble {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(12, 34, 56, 0.14);
    max-width: 220px;
}
.cs-cx-bubble i {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.cs-cx-bubble--in {
    top: 14%;
    left: 3%;
    background: #fff;
    color: #0d2238;
    border-bottom-left-radius: 4px;
    animation: csCxBubbleIn 6s ease-in-out infinite;
}
.cs-cx-bubble--in i {
    background: rgba(58, 125, 158, 0.15);
    color: #084d70;
}
.cs-cx-bubble--out {
    bottom: 16%;
    right: 3%;
    background: linear-gradient(135deg, #084d70, #063a55);
    color: #fff;
    border-bottom-right-radius: 4px;
    animation: csCxBubbleOut 6s ease-in-out infinite;
    animation-delay: 0.6s;
}
.cs-cx-bubble--out i {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
@keyframes csCxBubbleIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
    15%  { opacity: 1; transform: translateY(0) scale(1); }
    85%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
@keyframes csCxBubbleOut {
    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
    15%  { opacity: 1; transform: translateY(0) scale(1); }
    85%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* Typing dots */
.cs-cx-typing {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
}
.cs-cx-typing i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    animation: csCxTyping 1.2s ease-in-out infinite;
}
.cs-cx-typing i:nth-child(2) { animation-delay: 0.2s; }
.cs-cx-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes csCxTyping {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-3px); }
}

/* Floating tiles */
.cs-cx-tile {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(12, 34, 56, 0.14);
    border: 1px solid rgba(13, 34, 56, 0.06);
    backdrop-filter: blur(10px);
    min-width: 180px;
}
.cs-cx-tile > i {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #084d70, #3a7d9e);
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.cs-cx-tile > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.cs-cx-tile strong {
    font-size: 0.76rem;
    color: #0d2238;
    font-weight: 700;
}
.cs-cx-tile span {
    font-size: 0.65rem;
    color: #5a6a79;
}
.cs-cx-live {
    margin-left: auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1ea672;
    box-shadow: 0 0 0 0 rgba(30, 166, 114, 0.6);
    animation: csCxPulse 1.6s ease-out infinite;
}
@keyframes csCxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 166, 114, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(30, 166, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 166, 114, 0); }
}

.cs-cx-tile--phone {
    top: 6%;
    right: 5%;
    animation: csCxFloatA 6s ease-in-out infinite;
}
.cs-cx-tile--ticket {
    bottom: 8%;
    left: 5%;
    animation: csCxFloatB 7.5s ease-in-out infinite;
}
.cs-cx-tile--rating {
    top: 48%;
    right: 2%;
    animation: csCxFloatA 8s ease-in-out infinite;
    animation-delay: 1s;
    min-width: 150px;
}
.cs-cx-tile--rating > div {
    display: flex;
    flex-direction: column;
}
.cs-cx-stars {
    display: inline-flex;
    gap: 2px;
    color: #ffc107;
    font-size: 0.85rem;
    margin-bottom: 2px;
}
.cs-cx-tile--rating span {
    font-size: 0.68rem;
    color: #5a6a79;
}
.cs-cx-tile--rating strong {
    color: #0d2238;
    font-size: 0.85rem;
    display: inline;
    font-weight: 800;
}

@keyframes csCxFloatA {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes csCxFloatB {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

/* Orbit eden küçük ikonlar */
.cs-cx-orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 10px 22px rgba(8, 77, 112, 0.3);
    z-index: 3;
    transform-origin: center;
}
.cs-cx-orbit--1 {
    background: linear-gradient(135deg, #084d70, #063a55);
    animation: csCxOrbit1 18s linear infinite;
}
.cs-cx-orbit--2 {
    background: linear-gradient(135deg, #3a7d9e, #084d70);
    animation: csCxOrbit2 22s linear infinite;
}
.cs-cx-orbit--3 {
    background: linear-gradient(135deg, #25d366, #128c7e);
    animation: csCxOrbit3 20s linear infinite;
}
.cs-cx-orbit--4 {
    background: linear-gradient(135deg, #d91f26, #a3171c);
    animation: csCxOrbit4 24s linear infinite;
}
@keyframes csCxOrbit1 {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(160px) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(160px) rotate(-360deg); }
}
@keyframes csCxOrbit2 {
    from { transform: translate(-50%, -50%) rotate(90deg) translateX(160px) rotate(-90deg); }
    to   { transform: translate(-50%, -50%) rotate(450deg) translateX(160px) rotate(-450deg); }
}
@keyframes csCxOrbit3 {
    from { transform: translate(-50%, -50%) rotate(180deg) translateX(160px) rotate(-180deg); }
    to   { transform: translate(-50%, -50%) rotate(540deg) translateX(160px) rotate(-540deg); }
}
@keyframes csCxOrbit4 {
    from { transform: translate(-50%, -50%) rotate(270deg) translateX(160px) rotate(-270deg); }
    to   { transform: translate(-50%, -50%) rotate(630deg) translateX(160px) rotate(-630deg); }
}

/* Responsive */
@media (max-width: 991.98px) {
    .cs-cx-signal {
        width: 140px; height: 140px;
    }
    .cs-cx-headset {
        width: 150px; height: 150px;
    }
    @keyframes csCxOrbit1 {
        from { transform: translate(-50%, -50%) rotate(0deg) translateX(130px) rotate(0deg); }
        to   { transform: translate(-50%, -50%) rotate(360deg) translateX(130px) rotate(-360deg); }
    }
    @keyframes csCxOrbit2 {
        from { transform: translate(-50%, -50%) rotate(90deg) translateX(130px) rotate(-90deg); }
        to   { transform: translate(-50%, -50%) rotate(450deg) translateX(130px) rotate(-450deg); }
    }
    @keyframes csCxOrbit3 {
        from { transform: translate(-50%, -50%) rotate(180deg) translateX(130px) rotate(-180deg); }
        to   { transform: translate(-50%, -50%) rotate(540deg) translateX(130px) rotate(-540deg); }
    }
    @keyframes csCxOrbit4 {
        from { transform: translate(-50%, -50%) rotate(270deg) translateX(130px) rotate(-270deg); }
        to   { transform: translate(-50%, -50%) rotate(630deg) translateX(130px) rotate(-630deg); }
    }
}

@media (max-width: 575.98px) {
    .cs-cx {
        min-height: 440px;
    }
    .cs-cx-headset {
        width: 120px; height: 120px;
    }
    .cs-cx-hub-label {
        font-size: 0.68rem;
        padding: 6px 12px;
    }
    .cs-cx-bubble {
        font-size: 0.7rem;
        padding: 8px 10px;
        max-width: 160px;
    }
    .cs-cx-tile {
        min-width: 140px;
        padding: 8px 10px;
    }
    .cs-cx-tile strong { font-size: 0.7rem; }
    .cs-cx-tile span   { font-size: 0.6rem; }
    .cs-cx-orbit {
        width: 30px; height: 30px;
        font-size: 0.8rem;
    }
    @keyframes csCxOrbit1 {
        from { transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); }
        to   { transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg); }
    }
    @keyframes csCxOrbit2 {
        from { transform: translate(-50%, -50%) rotate(90deg) translateX(100px) rotate(-90deg); }
        to   { transform: translate(-50%, -50%) rotate(450deg) translateX(100px) rotate(-450deg); }
    }
    @keyframes csCxOrbit3 {
        from { transform: translate(-50%, -50%) rotate(180deg) translateX(100px) rotate(-180deg); }
        to   { transform: translate(-50%, -50%) rotate(540deg) translateX(100px) rotate(-540deg); }
    }
    @keyframes csCxOrbit4 {
        from { transform: translate(-50%, -50%) rotate(270deg) translateX(100px) rotate(-270deg); }
        to   { transform: translate(-50%, -50%) rotate(630deg) translateX(100px) rotate(-630deg); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-cx-grid,
    .cs-cx-ring,
    .cs-cx-headset,
    .cs-cx-headset-ear::after,
    .cs-cx-headset-tip,
    .cs-cx-signal,
    .cs-cx-bubble,
    .cs-cx-typing i,
    .cs-cx-tile,
    .cs-cx-live,
    .cs-cx-orbit {
        animation: none !important;
    }
}