/* ==========================================================================
   PROVE ID - SLIDE 18 / NEDEN PROVE ID?
   Merkezde Prove ID çekirdeği, iki yanda 9 neden; çekirdekten kartlara
   akan ışıklı bağlantılar. Kartlar sırayla vurgulanır (reasons-enhanced.js).
   ========================================================================== */

.reasons-slide h1 br { display: none; }
.reasons-slide h1 em { margin-left: 0.15em; }

.rs-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
    gap: 44px;
    align-items: stretch;
}

/* ---------- Bağlantılar ---------- */
.rs-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.rs-line {
    fill: none;
    stroke: rgba(138, 162, 255, 0.22);
    stroke-width: 1.3;
    stroke-dasharray: 3 5;
    transition: stroke 0.4s, stroke-width 0.4s;
}

.rs-line.is-on { stroke: url(#rs-g); stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 5px rgba(79, 216, 255, 0.6)); }

.rs-pkt {
    fill: none;
    stroke: #4fd8ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 5 95;
    filter: drop-shadow(0 0 6px #4fd8ff);
    opacity: 0.55;
    animation: rs-pkt 3.2s linear infinite;
}

.rs-pkt:nth-of-type(4n) { animation-delay: -0.8s; }
.rs-pkt:nth-of-type(4n+2) { animation-delay: -1.6s; }
.rs-pkt:nth-of-type(4n+3) { animation-delay: -2.4s; }
.rs-pkt.is-on { opacity: 1; stroke: #fff; animation-duration: 1.4s; }

@keyframes rs-pkt { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- Kart sütunları ---------- */
.rs-col {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.rs-card {
    --c: #8aa2ff;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 44px 12px 14px;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(24, 37, 88, 0.85), rgba(9, 15, 44, 0.92));
    border: 1px solid rgba(138, 162, 255, 0.16);
    box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.8);
    transition: transform 0.5s var(--px-ease), border-color 0.4s, box-shadow 0.5s, background 0.4s;
    animation: rs-in 0.7s var(--px-ease) both;
    animation-delay: calc(0.2s + var(--i) * 60ms);
}

.rs-col--l .rs-card { animation-name: rs-in-l; }
.rs-col--r .rs-card { animation-name: rs-in-r; }

@keyframes rs-in-l { from { opacity: 0; transform: translateX(-24px); } }
@keyframes rs-in-r { from { opacity: 0; transform: translateX(24px); } }

.rs-card:hover,
.rs-card.is-active {
    border-color: rgba(79, 216, 255, 0.6);
    background: linear-gradient(150deg, rgba(36, 56, 130, 0.9), rgba(12, 20, 60, 0.95));
    box-shadow: 0 0 0 1px rgba(79, 216, 255, 0.25), 0 22px 44px -22px rgba(79, 216, 255, 0.55);
}

.rs-col--l .rs-card.is-active { transform: translateX(6px); }
.rs-col--r .rs-card.is-active { transform: translateX(-6px); }

.rs-ico {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--px-cyan);
    background: linear-gradient(145deg, rgba(79, 216, 255, 0.16), rgba(86, 119, 255, 0.1));
    border: 1px solid rgba(79, 216, 255, 0.3);
    transition: transform 0.5s var(--px-ease), background 0.4s, color 0.4s, box-shadow 0.4s;
}

.rs-ico svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rs-card.is-active .rs-ico {
    color: #06102e;
    background: linear-gradient(145deg, #7ee6ff, #4fd8ff);
    box-shadow: 0 0 22px rgba(79, 216, 255, 0.6);
    transform: rotate(-6deg) scale(1.06);
}

.rs-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.rs-txt h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--px-text);
}

.rs-txt p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--px-muted);
}

.rs-num {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--px-font-display);
    font-size: 12px;
    font-weight: 800;
    color: rgba(138, 162, 255, 0.45);
    transition: color 0.4s;
}

.rs-card.is-active .rs-num { color: var(--px-cyan); }

.rs-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.rs-pills i {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    color: #dfe6ff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rs-stat {
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
    padding: 2px 10px 3px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--px-green);
    background: rgba(46, 230, 166, 0.1);
    border: 1px solid rgba(46, 230, 166, 0.3);
}

.rs-stat b { font-family: var(--px-font-display); font-size: 15px; font-weight: 800; }

.rs-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 4px;
}

.rs-logos img,
.rs-logos .rs-turkcell {
    height: 30px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.rs-logos img { width: 100%; height: 28px; padding: 4px 8px; }

.rs-turkcell {
    display: inline-flex;
    align-items: center;
    font-family: var(--px-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1a3a8a;
}

/* ---------- Merkez çekirdek ---------- */
.rs-hub {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: rs-hub-in 1s var(--px-ease) both;
}

@keyframes rs-hub-in { from { opacity: 0; transform: scale(0.85); } }

.rs-core {
    position: relative;
    width: 230px;
    height: 230px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.rs-core::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 85, 255, 0.4), transparent 62%);
    filter: blur(14px);
    animation: rs-breathe 5s ease-in-out infinite;
}

@keyframes rs-breathe { 50% { transform: scale(1.12); opacity: 0.75; } }

.rs-ring {
    position: absolute;
    border-radius: 50%;
}

.rs-ring--1 { inset: 0; border: 1.5px dashed rgba(138, 162, 255, 0.5); animation: rs-turn 30s linear infinite; }
.rs-ring--2 { inset: 22px; border: 1px solid rgba(79, 216, 255, 0.35); border-top-color: #4fd8ff; border-right-color: #4fd8ff; animation: rs-turn 6s linear infinite reverse; filter: drop-shadow(0 0 6px rgba(79, 216, 255, 0.6)); }
.rs-ring--3 { inset: 44px; background: radial-gradient(circle at 35% 30%, #1d2a6e, #0a1036 70%); border: 1px solid rgba(138, 162, 255, 0.3); box-shadow: inset 0 0 30px rgba(86, 119, 255, 0.35); }

.rs-ring--1::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--px-cyan);
    box-shadow: 0 0 14px var(--px-cyan);
}

@keyframes rs-turn { to { transform: rotate(360deg); } }

.rs-wave {
    position: absolute;
    inset: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(79, 216, 255, 0.6);
    animation: rs-wave 3.2s ease-out infinite;
}

.rs-wave + .rs-wave { animation-delay: 1.6s; }

@keyframes rs-wave { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.75); opacity: 0; } }

.rs-plate {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(47, 85, 255, 0.8);
    animation: rs-float 6s ease-in-out infinite;
}

.rs-plate svg { display: block; width: 104px; height: auto; color: #0b132e; }

@keyframes rs-float { 50% { transform: translateY(-5px); } }

.rs-hub > b {
    font-family: var(--px-font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--px-grad-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.rs-hub > small { font-size: 13px; color: var(--px-muted); margin-top: 2px; }

.rs-hub-tag {
    margin-top: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--px-cyan);
    background: rgba(79, 216, 255, 0.1);
    border: 1px solid rgba(79, 216, 255, 0.3);
}

/* ==========================================================================
   AÇIK TEMA
   ========================================================================== */
html[data-theme="light"] .rs-line { stroke: rgba(29, 69, 220, 0.2); }
html[data-theme="light"] .rs-pkt { stroke: #2b56f5; filter: none; }
html[data-theme="light"] .rs-pkt.is-on { stroke: #0a8fc2; }
html[data-theme="light"] .rs-card { background: #fff; border-color: rgba(18, 32, 78, 0.1); box-shadow: 0 12px 28px -22px rgba(18, 32, 78, 0.5); }
html[data-theme="light"] .rs-card:hover,
html[data-theme="light"] .rs-card.is-active { background: #f3f7ff; border-color: #2b56f5; box-shadow: 0 18px 36px -22px rgba(43, 86, 245, 0.55); }
html[data-theme="light"] .rs-ico { color: #1d45dc; background: #edf2ff; border-color: rgba(29, 69, 220, 0.2); }
html[data-theme="light"] .rs-card.is-active .rs-ico { color: #fff; background: linear-gradient(145deg, #2b56f5, #0a8fc2); box-shadow: 0 0 18px rgba(43, 86, 245, 0.45); }
html[data-theme="light"] .rs-pills i { color: #1b2550; background: #f1f4fc; border-color: rgba(18, 32, 78, 0.1); }
html[data-theme="light"] .rs-stat { color: #0b8a5f; background: #e8f8f1; border-color: rgba(14, 159, 110, 0.3); }
html[data-theme="light"] .rs-logos img,
html[data-theme="light"] .rs-logos .rs-turkcell { border: 1px solid rgba(18, 32, 78, 0.1); }
html[data-theme="light"] .rs-num { color: rgba(29, 69, 220, 0.35); }
html[data-theme="light"] .rs-card.is-active .rs-num { color: #1d45dc; }
html[data-theme="light"] .rs-ring--3 { background: radial-gradient(circle at 35% 30%, #ffffff, #e6ecff 70%); border-color: rgba(29, 69, 220, 0.2); box-shadow: inset 0 0 24px rgba(43, 86, 245, 0.18); }
html[data-theme="light"] .rs-core::before { background: radial-gradient(circle, rgba(43, 86, 245, 0.2), transparent 62%); }
html[data-theme="light"] .rs-hub-tag { color: #1d45dc; background: #edf2ff; border-color: rgba(29, 69, 220, 0.25); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 761px) and (max-height: 790px) {
    .rs-stage { grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr); gap: 30px; }
    .rs-col { gap: 7px; }
    .rs-card { padding: 8px 40px 8px 12px; gap: 11px; border-radius: 14px; }
    .rs-ico { width: 38px; height: 38px; border-radius: 11px; }
    .rs-ico svg { width: 19px; height: 19px; }
    .rs-txt h3 { font-size: 14.5px; }
    .rs-txt p { font-size: 11.5px; }
    .rs-pills i { font-size: 10.5px; padding: 2px 7px; }
    .rs-logos img, .rs-logos .rs-turkcell { height: 26px; }
    .rs-core { width: 180px; height: 180px; margin-bottom: 12px; }
    .rs-ring--2 { inset: 16px; }
    .rs-ring--3, .rs-wave { inset: 34px; }
    .rs-plate svg { width: 86px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .rs-stage { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 24px; }
    .rs-core { width: 160px; height: 160px; }
    .rs-ring--3, .rs-wave { inset: 30px; }
    .rs-plate svg { width: 76px; }
}

@media (max-width: 760px) {
    .rs-stage { grid-template-columns: 1fr; gap: 12px; }
    .rs-hub { order: -1; }
    .rs-links { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-card, .rs-hub { animation: none; }
}