/* ============================================
   Diagram Bileşenleri (Diagram Components)
   Tüm diagram stilleri burada toplanmıştır
   ============================================ */

/* ============================================
   Boot Sequence Diagram (Holodepth)
   ============================================ */

.boot-sequence-diagram {
    margin: 1.75rem 0 1.25rem;
    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.82) 0%,
            rgba(30, 41, 59, 0.6) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    position: relative;
}

.boot-sequence-diagram::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 20%, rgba(34, 211, 238, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 88% 20%, rgba(59, 130, 246, 0.07) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.boot-sequence-diagram-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.boot-sequence-diagram-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.14));
    border: 1px solid rgba(34, 211, 238, 0.22);
    flex-shrink: 0;
}

.boot-sequence-diagram-icon i {
    color: rgba(34, 211, 238, 0.95);
    font-size: 1.2rem;
}

.boot-sequence-diagram-title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.boot-sequence-diagram-title-main {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.boot-sequence-diagram-title-sub {
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.85rem;
    font-style: italic;
}

.boot-sequence-flow {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.65rem;
    padding-top: 1rem;
    position: relative;
    z-index: 1;
    flex-direction: column;
}

.boot-step {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.25s ease;
}

.boot-step:hover {
    border-color: rgba(34, 211, 238, 0.22);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    filter: saturate(1.03);
}

.boot-step-items {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.boot-step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: rgba(226, 232, 240, 0.74);
    font-size: 0.8rem;
    line-height: 1.35;
}

.boot-step-item::before {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.6);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.18);
}

.boot-step-chip {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.22),
        0 1px 5px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -8px 14px rgba(0, 0, 0, 0.14);
}

.boot-step-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.06) 38%,
            rgba(255, 255, 255, 0.03) 62%,
            rgba(0, 0, 0, 0.06) 100%);
    opacity: 0.75;
    z-index: -1;
}

.boot-step-chip::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.16) 0%,
            transparent 60%);
    opacity: 0.75;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: normal;
}

.boot-step:hover .boot-step-chip {
    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 14px rgba(34, 211, 238, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -8px 14px rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}

.boot-step-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.boot-step-title {
    font-weight: 750;
    color: rgba(255, 255, 255, 0.93);
    font-size: 0.95rem;
    line-height: 1.2;
}

.boot-step-desc {
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    overflow-wrap: anywhere;
}

.boot-arrow {
    width: 100%;
    height: 22px;
    flex: 0 0 22px;
    position: relative;
    align-self: center;
    opacity: 0.85;
}

.boot-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    width: 2px;
    top: 2px;
    bottom: 2px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.35), rgba(34, 197, 94, 0.25));
    border-radius: 999px;
}

.boot-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 2px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(135deg);
    border-top: 2px solid rgba(34, 211, 238, 0.5);
    border-right: 2px solid rgba(34, 211, 238, 0.5);
}

.boot-step-core .boot-step-chip {
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
}

.boot-step-resource .boot-step-chip {
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
}

.boot-step-world .boot-step-chip {
    background: linear-gradient(135deg, #34d399, #22c55e);
}

.boot-step-interaction .boot-step-chip {
    background: linear-gradient(135deg, #fbbf24, #fb7185);
}

.boot-step-loop .boot-step-chip {
    background: linear-gradient(135deg, #f472b6, #a78bfa);
}

@media (max-width: 900px) {
    .boot-sequence-flow {
        gap: 0.75rem;
    }
}

/* MathJax formül kutusu */
.math-formula-box {
    margin: 1rem 0 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(96, 165, 250, 0.22);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    overflow-x: auto;
}

/* ============================================
   Scene Bootstrap Stack Diagram (Holodepth)
   ============================================ */

.scene-bootstrap-stack-diagram {
    margin: 1.75rem 0 1.25rem;
    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(167, 139, 250, 0.18);
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.82) 0%,
            rgba(30, 41, 59, 0.6) 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    position: relative;
}

.scene-bootstrap-stack-diagram::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 88% 18%, rgba(167, 139, 250, 0.07) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(251, 191, 36, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.scene-bootstrap-stack-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.scene-bootstrap-stack-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(34, 211, 238, 0.12));
    border: 1px solid rgba(167, 139, 250, 0.22);
    flex-shrink: 0;
}

.scene-bootstrap-stack-icon i {
    color: rgba(196, 181, 253, 0.95);
    font-size: 1.2rem;
}

.scene-bootstrap-stack-title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.scene-bootstrap-stack-title-main {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.scene-bootstrap-stack-title-sub {
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.85rem;
    font-style: italic;
}

.scene-bootstrap-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding-top: 1rem;
    position: relative;
    z-index: 1;
}

.scene-stack-layer {
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.25s ease;
}

.scene-stack-layer:hover {
    border-color: rgba(167, 139, 250, 0.22);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    filter: saturate(1.03);
}

.scene-stack-layer-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.scene-stack-chip {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(15, 23, 42, 0.92);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.scene-stack-layer-atmosphere .scene-stack-chip {
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
}

.scene-stack-layer-scene .scene-stack-chip {
    background: linear-gradient(135deg, #a78bfa, #6366f1);
}

.scene-stack-layer-resources .scene-stack-chip {
    background: linear-gradient(135deg, #fbbf24, #fb7185);
}

.scene-stack-layer-titles {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.scene-stack-layer-title {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.scene-stack-layer-sub {
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.85rem;
    font-style: italic;
}

.scene-stack-layer-body {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scene-stack-item {
    color: rgba(226, 232, 240, 0.86);
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.scene-stack-connector {
    height: 14px;
    margin: -0.05rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-stack-connector::before {
    content: "";
    width: 2px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg,
            rgba(34, 211, 238, 0.35),
            rgba(167, 139, 250, 0.35),
            rgba(251, 191, 36, 0.28));
    opacity: 0.85;
}

.scene-stack-connector::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid rgba(167, 139, 250, 0.35);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

@media (max-width: 640px) {
    .scene-bootstrap-stack-diagram {
        padding: 1.05rem 1rem 0.95rem;
    }

    .scene-stack-item {
        font-size: 0.88rem;
    }
}

/* ============================================
   Protokol Şeması Bileşeni (Protocol Diagram)
   ============================================ */

.protocol-diagram {
    margin: 3rem 0;
    padding: 2rm;
    background: rgba(26, 31, 46, 0.9);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 12px;
    position: relative;
}

/* Protocol diagram içinde başlık kullanılmıyor - diagram-title-row dışarıda */
/* Bu stiller kaldırıldı - diagram ve başlık tamamen ayrı */

.diagram-title-en {
    font-size: 0.9rem;
    color: #a0aec0;
    font-weight: 400;
    font-style: italic;
}

.diagram-content {
    position: relative;
}

.diagram-entities {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.diagram-entity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 8px;
    min-width: 120px;
}

.entity-icon {
    font-size: 2.5rem;
    color: #2d98da;
}

.entity-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.entity-label span:first-child {
    font-size: 1rem;
    font-weight: 600;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-clip: unset !important;
}

.entity-label-en {
    font-size: 0.8rem;
    color: #a0aec0 !important;
    -webkit-text-fill-color: #a0aec0 !important;
    background: none !important;
    background-clip: unset !important;
    font-style: italic;
}

.diagram-network {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.5rem;
}

.network-line {
    width: 100%;
    height: 0;
    border-top: 2px dashed rgba(45, 152, 218, 0.6);
    background: none;
}

.network-label {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.network-label span:first-child {
    font-size: 0.85rem;
    color: #a0aec0 !important;
    -webkit-text-fill-color: #a0aec0 !important;
    background: none !important;
    background-clip: unset !important;
}

.network-label-en {
    font-size: 0.7rem;
    color: #718096 !important;
    -webkit-text-fill-color: #718096 !important;
    background: none !important;
    background-clip: unset !important;
    font-style: italic;
}

.diagram-phases {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.diagram-phase {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(26, 31, 46, 0.4);
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.diagram-phase-handshake {
    border-left-color: #27ae60;
}

.diagram-phase-bidirectional {
    border-left-color: #2d98da;
}

.diagram-phase-close {
    border-left-color: #e74c3c;
}

/* WebSocket özel yapısı - üstte ve altta ok, ortada label */
.diagram-phase-websocket {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1rem;
}

/* SPA özel yapısı - WebSocket ile aynı yapı */
.diagram-phase-spa {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
}

.phase-arrows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    min-height: 40px;
}

/* WebSocket için özel arrow container'lar */
.phase-arrows-top,
.phase-arrows-bottom {
    min-height: 30px;
    padding: 0.5rem 0;
}

/* WebSocket okları - tam genişlik */
.phase-arrow-websocket {
    flex: 1;
}

/* Tek yönlü iletişim için özel yapı */
.diagram-phase-unidirectional .phase-arrow-spacer {
    flex: 0 0 40%;
}

.diagram-phase-unidirectional .phase-arrow-unidirectional {
    flex: 0 0 60%;
}

.phase-label-center {
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    background: rgba(26, 31, 46, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(45, 152, 218, 0.3);
}

.diagram-arrow {
    position: relative;
    flex: 1;
    height: 2px;
}

.diagram-arrow-right {
    justify-content: flex-start;
}

.diagram-arrow-left {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.arrow-line {
    width: 100%;
    height: 2px;
}

.diagram-arrow-green .arrow-line {
    background: #27ae60;
}

.diagram-arrow-blue .arrow-line {
    background: #2d98da;
}

.diagram-arrow-red .arrow-line {
    background: #e74c3c;
}

.diagram-arrow-green .arrow-line {
    background: #27ae60;
}

.arrow-head {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.diagram-arrow-right .arrow-head {
    right: 0;
    border-left: 8px solid;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.diagram-arrow-left .arrow-head {
    left: 0;
    border-right: 8px solid;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.diagram-arrow-green .arrow-head {
    border-left-color: #27ae60;
    border-right-color: #27ae60;
}

.diagram-arrow-blue .arrow-head {
    border-left-color: #2d98da;
    border-right-color: #2d98da;
}

.diagram-arrow-red .arrow-head {
    border-left-color: #e74c3c;
    border-right-color: #e74c3c;
}

.phase-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.phase-label span:first-child {
    font-size: 1rem;
    font-weight: 600;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-clip: unset !important;
}

.phase-label-en {
    font-size: 0.85rem;
    color: #a0aec0 !important;
    -webkit-text-fill-color: #a0aec0 !important;
    background: none !important;
    background-clip: unset !important;
    font-style: italic;
}

.diagram-phase-handshake .phase-label span:first-child {
    color: #27ae60;
}

.diagram-phase-bidirectional .phase-label span:first-child {
    color: #2d98da;
}

.diagram-phase-close .phase-label span:first-child {
    color: #e74c3c;
}

.diagram-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(45, 152, 218, 0.2);
}

.diagram-footer span:first-child {
    font-size: 0.9rem;
    color: #a0aec0 !important;
    -webkit-text-fill-color: #a0aec0 !important;
    background: none !important;
    background-clip: unset !important;
}

.diagram-footer-en {
    font-size: 0.75rem;
    color: #718096 !important;
    -webkit-text-fill-color: #718096 !important;
    background: none !important;
    background-clip: unset !important;
    font-style: italic;
}

/* ============================================
   Mimari Şema Bileşeni (Architecture Diagram)
   Basit ve Minimal Tasarım
   ============================================ */

.architecture-diagram {
    margin: 3rem 0;
    padding: 2.5rem;
    background: rgba(26, 31, 46, 0.95);
    border: 1px solid rgba(45, 152, 218, 0.25);
    border-radius: 12px;
    position: relative;
}

.arch-diagram-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(45, 152, 218, 0.2);
}

.arch-diagram-title i {
    font-size: 1.5rem;
    color: #2d98da;
}

.arch-diagram-title span:first-of-type {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

.arch-diagram-title-en {
    font-size: 0.9rem;
    color: #a0aec0;
    font-weight: 400;
    font-style: italic;
}

.arch-diagram-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
    position: relative;
    min-height: 360px;
    padding-top: 2.5rem;
}

/* Sol Bölüm */
.arch-left-section {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.arch-section-label {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(45, 152, 218, 0.1);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
}

.arch-section-label::before {
    content: '\f1b3';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.9rem;
    color: #2d98da;
}

.arch-section-label span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}

.arch-components-simple {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    justify-content: flex-start;
    margin-top: -0.875rem;
    /* 5-10px yukarı (7px ≈ 0.4375rem) */
    transform: translateY(-7px);
    /* Ek 7px yukarı çıkarma için */
}

.arch-comp-circle {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border: 2px solid;
}

.arch-comp-1 {
    background: rgba(39, 174, 96, 0.15);
    border-color: #27ae60;
    color: #27ae60;
}

.arch-comp-2 {
    background: rgba(155, 89, 182, 0.15);
    border-color: #9b59b6;
    color: #9b59b6;
}

.arch-comp-3 {
    background: rgba(243, 156, 18, 0.15);
    border-color: #f39c12;
    color: #f39c12;
}

/* Orta Bölüm - API Gateway */
.arch-center-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

.arch-gateway-simple {
    width: 100%;
    max-width: 550px;
    /* Genişlik artırıldı (300px'den 420px'e) */
    padding: 2rem 1.5rem;
    background: rgba(39, 174, 96, 0.1);
    border: 2px solid rgba(39, 174, 96, 0.4);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.arch-gateway-top {
    display: flex;
    gap: 0.75rem;
}

.arch-gateway-top i {
    font-size: 1.3rem;
    color: #27ae60;
}

.arch-gateway-label-simple {
    text-align: center;
}

.arch-gateway-label-simple span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.arch-gateway-description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.arch-gateway-desc-left,
.arch-gateway-desc-right {
    padding: 0.75rem 1rem;
    background: rgba(39, 174, 96, 0.08);
    border-left: 3px solid rgba(39, 174, 96, 0.5);
    border-radius: 6px;
}

.arch-gateway-desc-left p,
.arch-gateway-desc-right p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.arch-gateway-desc-left strong,
.arch-gateway-desc-right strong {
    color: #27ae60;
    font-weight: 600;
}

.arch-gateway-arrows-simple {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    margin: 0.5rem 0;
}

.arch-gateway-arrows-simple i {
    font-size: 1.2rem;
    color: #27ae60;
}

.arch-gateway-desc-purpose {
    padding: 0.85rem 1rem;
    background: rgba(45, 152, 218, 0.12);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 6px;
    margin-top: 0.5rem;
}

.arch-gateway-desc-purpose p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.arch-gateway-desc-text {
    flex: 1;
    min-width: 0;
}

.arch-gateway-desc-purpose i {
    color: #2d98da;
    font-size: 0.9rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.arch-gateway-desc-purpose strong {
    color: #2d98da;
    font-weight: 600;
}

/* Sağ Bölüm - Nano Services */
.arch-right-section {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.arch-services-simple {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    justify-content: flex-start;
}

.arch-service-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.arch-service-box {
    width: 75px;
    height: 75px;
    border-radius: 8px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.arch-svc-1 {
    background: rgba(155, 89, 182, 0.15);
    border-color: #9b59b6;
    color: #9b59b6;
}

.arch-svc-2 {
    background: rgba(243, 156, 18, 0.15);
    border-color: #f39c12;
    color: #f39c12;
}

.arch-svc-3 {
    background: rgba(52, 73, 94, 0.15);
    border-color: #34495e;
    color: #34495e;
}

.arch-service-arrow {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.4);
}

.arch-resource-box {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.arch-res-1 {
    background: rgba(155, 89, 182, 0.15);
    border-color: #9b59b6;
    color: #9b59b6;
}

.arch-res-2 {
    background: rgba(241, 196, 15, 0.15);
    border-color: #f1c40f;
    color: #f1c40f;
}

.arch-res-3 {
    background: rgba(52, 152, 219, 0.15);
    border-color: #3498db;
    color: #3498db;
}

/* Responsive Design */
@media (max-width: 768px) {

    .protocol-diagram,
    .architecture-diagram {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    .arch-diagram-title {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .arch-diagram-title span:first-of-type {
        font-size: 1.1rem;
    }

    .diagram-entities {
        flex-direction: column;
        gap: 1rem;
    }

    .diagram-network {
        transform: rotate(90deg);
        width: 60px;
        margin: 1rem 0;
    }

    .arch-diagram-content {
        flex-direction: column;
        gap: 2.5rem;
        align-items: center;
    }

    .arch-left-section,
    .arch-right-section {
        flex: 1;
        width: 100%;
    }

    .arch-components-simple {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }

    .arch-center-section {
        width: 100%;
    }

    .arch-gateway-simple {
        max-width: 100%;
    }

    .arch-services-simple {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .arch-service-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .arch-service-arrow {
        transform: rotate(90deg);
    }

    .arch-flow-lines {
        display: none;
    }
}

/* ============================================
   Ölçeklenebilirlik Karşılaştırma Diagramı (Scaling Comparison Diagram)
   3. Diagram - Yatay vs Dikey Ölçekleme
   ============================================ */

.scaling-comparison-diagram {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(26, 31, 46, 0.95);
    border: 1px solid rgba(243, 156, 18, 0.25);
    border-radius: 12px;
    position: relative;
}

.scaling-diagram-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(243, 156, 18, 0.2);
}

.scaling-diagram-title i {
    font-size: 1.5rem;
    color: #f39c12;
}

.scaling-diagram-title span:first-of-type {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

.scaling-diagram-title-en {
    font-size: 0.9rem;
    color: #a0aec0;
    font-weight: 400;
    font-style: italic;
}

.scaling-comparison-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding: 1.5rem 0;
}

/* Sol: Dikey Ölçekleme */
.scaling-vertical-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.scaling-section-label {
    text-align: center;
    padding: 0.75rem 1rem;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.scaling-section-label span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.scaling-vertical-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.scaling-arrow-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #f39c12;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.scaling-arrow-up i {
    animation: pulse-arrow 2s ease-in-out infinite;
}

@keyframes pulse-arrow {

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

    50% {
        transform: translateY(-5px);
        opacity: 0.7;
    }
}

.scaling-server-box {
    width: 120px;
    padding: 1.5rem 1rem;
    background: rgba(243, 156, 18, 0.15);
    border: 2px solid #f39c12;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.scaling-server-box::before {
    content: "Server";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 31, 46, 0.95);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #f39c12;
    font-weight: 600;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.scaling-server-box:hover {
    background: rgba(243, 156, 18, 0.2);
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.4);
}

.scaling-server-box i {
    font-size: 2rem;
    color: #f39c12;
}

.scaling-server-box.vertical-large {
    width: 140px;
    padding: 2rem 1.2rem;
    background: rgba(243, 156, 18, 0.2);
    border-color: #ff9f43;
}

.scaling-server-box.vertical-large i {
    font-size: 2.5rem;
}

.scaling-size-label {
    font-size: 0.75rem;
    color: #a0aec0;
    font-style: italic;
    margin-top: 0.3rem;
}

/* Sağ: Yatay Ölçekleme */
.scaling-horizontal-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.scaling-horizontal-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
}

.scaling-server-box.horizontal {
    width: 100px;
    padding: 1.2rem 0.8rem;
}

.scaling-arrow-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f39c12;
    font-size: 1.2rem;
}

.scaling-arrow-right i {
    animation: pulse-arrow-horizontal 2s ease-in-out infinite;
}

@keyframes pulse-arrow-horizontal {

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

    50% {
        transform: translateX(5px);
        opacity: 0.7;
    }
}

.scaling-comparison-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(243, 156, 18, 0.2);
}

.scaling-comparison-footer span:first-child {
    font-size: 0.85rem;
    color: #a0aec0;
    text-align: center;
}

.scaling-comparison-footer-en {
    font-size: 0.75rem;
    color: #718096;
    font-style: italic;
    text-align: center;
}

/* Responsive Design - Scaling Diagram */
@media (max-width: 768px) {
    .scaling-comparison-diagram {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    .scaling-diagram-title {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .scaling-diagram-title span:first-of-type {
        font-size: 1.1rem;
    }

    .scaling-comparison-content {
        flex-direction: column;
        gap: 2.5rem;
        align-items: center;
    }

    .scaling-horizontal-stack {
        flex-direction: row;
        justify-content: center;
        gap: 0.8rem;
    }

    .scaling-server-box {
        width: 90px;
        padding: 1rem 0.6rem;
    }

    .scaling-server-box.vertical-large {
        width: 110px;
        padding: 1.5rem 1rem;
    }

    .scaling-arrow-right {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }
}

/* ============================================
   CSS Syntax Yapısı Diagramı (CSS Syntax Structure Diagram)
   CSS dilinin syntax yapısını görsel olarak gösterir
   ============================================ */

.css-syntax-diagram {
    margin: 3rem 0;
    padding: 2.5rem;
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.98) 0%,
            rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 8px 32px rgba(79, 195, 247, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.css-syntax-diagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(79, 195, 247, 0.05),
            transparent);
    transition: left 0.8s ease;
}

.css-syntax-diagram:hover::before {
    left: 100%;
}

.css-syntax-diagram-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(79, 195, 247, 0.25);
    position: relative;
    z-index: 1;
}

.css-syntax-diagram-title i {
    font-size: 1.8rem;
    color: #4fc3f7;
    filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.4));
}

.css-syntax-diagram-title span:first-of-type {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.css-syntax-diagram-title-en {
    font-size: 0.95rem;
    color: #a0aec0;
    font-weight: 400;
    font-style: italic;
    margin-left: 0.5rem;
}

/* CSS Syntax Yapısı - Ana Kural Gösterimi */
.css-syntax-rule {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

/* Selector Bölümü */
.css-syntax-selector-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg,
            rgba(79, 195, 247, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 100%);
    border-radius: 12px;
    border: 2px solid rgba(79, 195, 247, 0.3);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.css-syntax-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(79, 195, 247, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(79, 195, 247, 0.4);
    font-size: 0.85rem;
    font-weight: 600;
    color: #4fc3f7;
    white-space: nowrap;
}

.css-syntax-label i {
    font-size: 1rem;
    color: #4fc3f7;
}

.css-syntax-code {
    flex: 1;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 1.1rem;
    color: #63e6be;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(79, 195, 247, 0.2);
    text-align: left;
    letter-spacing: 0.5px;
}

/* Declaration Block Bölümü */
.css-syntax-block-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.8) 0%,
            rgba(15, 23, 42, 0.9) 100%);
    border-radius: 12px;
    border: 2px solid rgba(79, 195, 247, 0.25);
    margin-left: 2rem;
    position: relative;
}

.css-syntax-block-section::before {
    content: "{";
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    font-size: 2.5rem;
    font-family: 'Fira Code', monospace;
    color: rgba(79, 195, 247, 0.6);
    font-weight: 300;
}

.css-syntax-block-section::after {
    content: "}";
    position: absolute;
    right: -1.5rem;
    bottom: 0.5rem;
    font-size: 2.5rem;
    font-family: 'Fira Code', monospace;
    color: rgba(79, 195, 247, 0.6);
    font-weight: 300;
}

/* Declaration (Property: Value) */
.css-syntax-declaration {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 10px;
    border-left: 3px solid rgba(79, 195, 247, 0.4);
    transition: all 0.3s ease;
}

.css-syntax-declaration:hover {
    background: rgba(15, 23, 42, 0.7);
    border-left-color: rgba(79, 195, 247, 0.6);
    transform: translateX(5px);
}

.css-syntax-property {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(79, 195, 247, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(79, 195, 247, 0.3);
    font-size: 0.9rem;
    font-weight: 600;
    color: #4fc3f7;
    min-width: 120px;
}

.css-syntax-property i {
    font-size: 0.85rem;
    color: #4fc3f7;
}

.css-syntax-separator {
    font-size: 1.2rem;
    color: rgba(79, 195, 247, 0.5);
    font-weight: 300;
    margin: 0 0.5rem;
}

.css-syntax-value {
    flex: 1;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 1rem;
    color: #63e6be;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 230, 190, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(99, 230, 190, 0.2);
}

.css-syntax-semicolon {
    font-size: 1.2rem;
    color: rgba(79, 195, 247, 0.5);
    font-weight: 300;
    margin-left: 0.5rem;
}

/* Açıklama Metni */
.css-syntax-description {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 10px;
    border-left: 3px solid rgba(79, 195, 247, 0.3);
    margin-top: 1.5rem;
}

.css-syntax-description-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.9rem;
    line-height: 1.6;
}

.css-syntax-description-item i {
    color: #4fc3f7;
    font-size: 0.85rem;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.css-syntax-description-item strong {
    color: #4fc3f7;
    font-weight: 600;
}

/* Responsive Design - CSS Syntax Diagram */
@media (max-width: 768px) {
    .css-syntax-diagram {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    .css-syntax-diagram-title {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .css-syntax-diagram-title span:first-of-type {
        font-size: 1.2rem;
        text-align: center;
    }

    .css-syntax-selector-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .css-syntax-label {
        width: 100%;
        justify-content: center;
    }

    .css-syntax-code {
        width: 100%;
        font-size: 0.95rem;
    }

    .css-syntax-block-section {
        margin-left: 1rem;
        padding: 1.25rem;
    }

    .css-syntax-block-section::before,
    .css-syntax-block-section::after {
        font-size: 2rem;
    }

    .css-syntax-declaration {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem;
    }

    .css-syntax-property {
        width: 100%;
        min-width: auto;
    }

    .css-syntax-separator {
        display: none;
    }

    .css-syntax-value {
        width: 100%;
    }
}

/* ============================================
   Grammar Error Flow Diagram (İşlem Akışı Diagramı)
   ::grammar-error tetiklenme sürecini görselleştirir
   ============================================ */

.grammar-error-flow-diagram {
    margin: 3rem 0;
    padding: 2.5rem;
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.98) 0%,
            rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 8px 32px rgba(79, 195, 247, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.grammar-error-flow-diagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(79, 195, 247, 0.05),
            transparent);
    transition: left 0.8s ease;
}

.grammar-error-flow-diagram:hover::before {
    left: 100%;
}

.grammar-error-flow-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(79, 195, 247, 0.25);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.grammar-error-flow-title i {
    font-size: 1.8rem;
    color: #4fc3f7;
    filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.3));
    background: rgba(79, 195, 247, 0.1);
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(79, 195, 247, 0.2);
}

.grammar-error-flow-title span:first-of-type {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.grammar-error-flow-title-en {
    font-size: 0.95rem;
    color: #a0aec0;
    font-weight: 400;
    font-style: italic;
    margin-left: 0.5rem;
}

.grammar-error-flow-intro-note {
    position: relative;
    z-index: 1;
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(233, 238, 244, 0.95);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 10px;
    border-left: 4px solid rgba(59, 130, 246, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.grammar-error-flow-intro-note strong {
    color: #fff;
    font-weight: 700;
}

.grammar-error-flow-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin: 0 0 1.75rem;
    position: relative;
    z-index: 1;
}

.grammar-error-flow-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(233, 238, 244, 0.95);
    border: 1px solid transparent;
}

.grammar-error-flow-legend-swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.grammar-error-flow-legend-item--browser {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
}

.grammar-error-flow-legend-item--browser .grammar-error-flow-legend-swatch {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.55);
}

.grammar-error-flow-legend-item--system {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}

.grammar-error-flow-legend-item--system .grammar-error-flow-legend-swatch {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
}

/* Akış: kullanıcı (nötr) */
.grammar-error-flow-step--user {
    background: linear-gradient(135deg,
            rgba(148, 163, 184, 0.1) 0%,
            rgba(71, 85, 105, 0.08) 100%);
    border-color: rgba(148, 163, 184, 0.22);
}

.grammar-error-flow-step--user .grammar-error-flow-step-number {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.95), rgba(71, 85, 105, 0.9));
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}

.grammar-error-flow-step--user .grammar-error-flow-step-icon {
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.22);
}

.grammar-error-flow-step--user:hover {
    border-color: rgba(148, 163, 184, 0.32);
}

/* Akış: tarayıcı (mavi) */
.grammar-error-flow-step--browser {
    background: linear-gradient(135deg,
            rgba(79, 195, 247, 0.14) 0%,
            rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.28);
}

.grammar-error-flow-step--browser:hover {
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Akış: sistem / iç motor (amber) */
.grammar-error-flow-step--system {
    background: linear-gradient(135deg,
            rgba(251, 191, 36, 0.14) 0%,
            rgba(245, 158, 11, 0.09) 100%);
    border-color: rgba(251, 191, 36, 0.28);
}

.grammar-error-flow-step--system .grammar-error-flow-step-number {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.92), rgba(245, 158, 11, 0.88));
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.22);
}

.grammar-error-flow-step--system .grammar-error-flow-step-icon {
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.28);
}

.grammar-error-flow-step--system:hover {
    border-color: rgba(251, 191, 36, 0.38);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.grammar-error-flow-arrow--to-system {
    color: #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

.grammar-error-flow-arrow--from-system {
    color: #4fc3f7;
    filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.5));
}

/* Akış Adımları Container */
.grammar-error-flow-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Her Bir Adım */
.grammar-error-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    max-width: 800px;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(79, 195, 247, 0.12) 0%,
            rgba(59, 130, 246, 0.08) 100%);
    border-radius: 12px;
    border: 1px solid rgba(79, 195, 247, 0.15);
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.grammar-error-flow-step:hover {
    transform: translateX(5px);
    border-color: rgba(79, 195, 247, 0.25);
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Adım Numarası */
.grammar-error-flow-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.9), rgba(59, 130, 246, 0.85));
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.25);
    flex-shrink: 0;
    border: 1px solid rgba(79, 195, 247, 0.3);
}

/* Adım İçeriği */
.grammar-error-flow-step-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

/* Adım İkonu */
.grammar-error-flow-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    background: rgba(79, 195, 247, 0.15);
    border-radius: 8px;
    color: #4fc3f7;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid rgba(79, 195, 247, 0.2);
}

/* Adım Metni */
.grammar-error-flow-step-text {
    flex: 1;
    color: rgba(233, 238, 244, 0.95);
    line-height: 1.6;
    font-size: 1rem;
}

.grammar-error-flow-step-text strong {
    color: #fff;
    font-weight: 600;
}

/* Ok İşareti */
.grammar-error-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4fc3f7;
    font-size: 1.5rem;
    margin: 0.5rem 0;
    filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.5));
    animation: flowArrowPulse 2s ease-in-out infinite;
}

.grammar-error-flow-arrow-warning {
    color: #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

@keyframes flowArrowPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(3px);
    }
}

/* Sonuç Adımı (Özel Stil - Daha Koyu ve Premium) */
.grammar-error-flow-step-result {
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.95) 0%,
            rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.grammar-error-flow-step-result::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(251, 191, 36, 0.5),
            transparent);
}

.grammar-error-flow-step-result:hover {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5),
        0 3px 12px rgba(251, 191, 36, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.grammar-error-flow-step-number-result {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.85));
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 8px;
}

.grammar-error-flow-step-icon-result {
    background: rgba(251, 191, 36, 0.15);
    color: rgba(251, 191, 36, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

/* Responsive Tasarım — mobilde dış/iç boşluk minimum, içerik maksimum genişlik */
@media (max-width: 768px) {
    .grammar-error-flow-diagram {
        padding: 1rem 0.65rem;
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px;
    }

    .grammar-error-flow-intro-note {
        padding: 0.75rem 0.65rem;
        font-size: 0.9375rem;
        line-height: 1.62;
        margin-bottom: 1rem;
    }

    .grammar-error-flow-title {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        margin-bottom: 1.35rem;
        padding-bottom: 0.85rem;
    }

    .grammar-error-flow-title-en {
        margin-left: 0;
    }

    .grammar-error-flow-legend {
        margin-bottom: 1.15rem;
        gap: 0.5rem 0.75rem;
    }

    .grammar-error-flow-steps {
        align-items: stretch;
        width: 100%;
        gap: 1.1rem;
    }

    .grammar-error-flow-step {
        flex-direction: column;
        gap: 0.85rem;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        padding: 0.95rem 0.7rem;
    }

    .grammar-error-flow-step:hover {
        transform: none;
    }

    .grammar-error-flow-step-text {
        font-size: 1.0625rem;
        line-height: 1.68;
    }

    .grammar-error-flow-step-result .grammar-error-flow-step-text {
        font-size: 1.07rem;
        line-height: 1.72;
        hyphens: auto;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .grammar-error-flow-step-content {
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
    }

    .grammar-error-flow-step-number {
        align-self: center;
    }

    .grammar-error-flow-arrow {
        margin: 0.2rem 0;
    }
}

@media (max-width: 480px) {
    .grammar-error-flow-diagram {
        padding: 0.85rem 0.45rem;
    }

    .grammar-error-flow-step {
        padding: 0.85rem 0.55rem;
    }

    .grammar-error-flow-intro-note {
        padding: 0.65rem 0.55rem;
    }
}

/* ============================================
   Cue Region Metaphor Diagram (Cue Region Metafor Diagramı)
   ::cue-region vs ::cue ilişkisini görselleştirir
   ============================================ */

.cue-region-metaphor-diagram {
    margin: 3rem 0;
    padding: 2.5rem;
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.98) 0%,
            rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 8px 32px rgba(79, 195, 247, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.cue-region-metaphor-diagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(79, 195, 247, 0.05),
            transparent);
    transition: left 0.8s ease;
}

.cue-region-metaphor-diagram:hover::before {
    left: 100%;
}

.cue-region-metaphor-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(79, 195, 247, 0.25);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.cue-region-metaphor-title i {
    font-size: 1.8rem;
    color: #4fc3f7;
    filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.3));
    background: rgba(79, 195, 247, 0.1);
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(79, 195, 247, 0.2);
}

.cue-region-metaphor-title span:first-of-type {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.cue-region-metaphor-title-en {
    font-size: 0.95rem;
    color: #a0aec0;
    font-weight: 400;
    font-style: italic;
    margin-left: 0.5rem;
}

/* Düzeltme notu: ::cue region zorunlu değil */
.cue-region-metaphor-insight {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg,
            rgba(251, 191, 36, 0.08) 0%,
            rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 14px;
    border-left: 4px solid rgba(251, 191, 36, 0.85);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cue-region-metaphor-insight-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
    font-size: 1.15rem;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.cue-region-metaphor-insight-body {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.cue-region-metaphor-insight-title {
    display: block;
    color: #fde68a;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    text-align: start;
}

.cue-region-metaphor-insight-body p {
    margin: 0 0 0.65rem;
    color: rgba(233, 238, 244, 0.92);
    font-size: 0.95rem;
    line-height: 1.65;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.cue-region-metaphor-insight-body p:last-child {
    margin-bottom: 0;
}

.cue-region-metaphor-insight-summary {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(251, 191, 36, 0.2);
    color: rgba(226, 232, 240, 0.95) !important;
    font-size: 0.92rem !important;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* İki senaryo: cue tek başına | region + cue */
.cue-region-metaphor-scenarios {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem 1rem;
    align-items: stretch;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.cue-region-metaphor-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.35rem 1.25rem 1.25rem;
    background: linear-gradient(160deg,
            rgba(30, 41, 59, 0.55) 0%,
            rgba(15, 23, 42, 0.75) 100%);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cue-region-metaphor-panel:hover {
    border-color: rgba(79, 195, 247, 0.35);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.cue-region-metaphor-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.85rem;
}

.cue-region-metaphor-panel-badge--always {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.cue-region-metaphor-panel-badge--optional {
    background: rgba(79, 195, 247, 0.14);
    color: #7dd3fc;
    border: 1px solid rgba(79, 195, 247, 0.35);
}

.cue-region-metaphor-panel-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.cue-region-metaphor-panel-title-sub {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.95);
    font-style: italic;
}

.cue-region-metaphor-panel-desc {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.92);
}

.cue-region-metaphor-video-frame {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 9.5rem;
    padding: 1rem;
    border-radius: 12px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(51, 65, 85, 0.5) 0%, transparent 55%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
    border: 1px dashed rgba(100, 116, 139, 0.45);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.cue-region-metaphor-cue-container--solo {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.cue-region-metaphor-scenarios-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.5rem;
    align-self: stretch;
    padding: 0.25rem 0;
}

.cue-region-metaphor-scenarios-connector-line {
    width: 2px;
    flex: 1;
    min-height: 1.25rem;
    background: linear-gradient(180deg,
            transparent,
            rgba(79, 195, 247, 0.45),
            transparent);
    border-radius: 2px;
}

.cue-region-metaphor-scenarios-connector-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.9);
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(79, 195, 247, 0.25);
}

.cue-region-metaphor-stage--nested {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    align-items: stretch;
}

.cue-region-metaphor-stage--nested .cue-region-metaphor-region {
    flex: 1;
    max-width: none;
    width: 100%;
}

/* Sahne Container */
.cue-region-metaphor-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

/* Region (Sahne/Kutu) */
.cue-region-metaphor-region {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    background: linear-gradient(135deg,
            rgba(79, 195, 247, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 100%);
    border: 2px solid rgba(79, 195, 247, 0.4);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(79, 195, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

.cue-region-metaphor-diagram:hover .cue-region-metaphor-region {
    border-color: rgba(79, 195, 247, 0.6);
    box-shadow: 0 8px 32px rgba(79, 195, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Region Label */
.cue-region-metaphor-region-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(79, 195, 247, 0.3);
}

.cue-region-metaphor-region-label i {
    font-size: 1.5rem;
    color: rgba(79, 195, 247, 0.9);
}

.cue-region-metaphor-region-label-sub {
    font-size: 0.9rem;
    color: rgba(160, 174, 192, 0.8);
    font-style: italic;
    margin-left: 0.5rem;
}

/* Cue Container (Oyuncu/Metin) */
.cue-region-metaphor-cue-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(34, 197, 94, 0.12) 0%,
            rgba(22, 163, 74, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.cue-region-metaphor-diagram:hover .cue-region-metaphor-cue-container {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
}

/* Cue Label */
.cue-region-metaphor-cue {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cue-region-metaphor-cue i {
    font-size: 1.2rem;
    color: rgba(34, 197, 94, 0.9);
}

.cue-region-metaphor-cue-sub {
    font-size: 0.85rem;
    color: rgba(160, 174, 192, 0.8);
    font-style: italic;
    margin-left: 0.5rem;
}

/* Cue Text */
.cue-region-metaphor-cue-text {
    color: rgba(233, 238, 244, 0.95);
    font-size: 1rem;
    line-height: 1.6;
    padding-left: 2rem;
    font-style: italic;
}

/* Açıklama Bölümü */
.cue-region-metaphor-explanation {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.cue-region-metaphor-explanation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.6) 0%,
            rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.cue-region-metaphor-explanation-item:hover {
    border-color: rgba(79, 195, 247, 0.4);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.1);
    transform: translateY(-2px);
}

.cue-region-metaphor-explanation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    background: rgba(79, 195, 247, 0.15);
    border-radius: 10px;
    color: #4fc3f7;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid rgba(79, 195, 247, 0.2);
}

.cue-region-metaphor-explanation-content {
    flex: 1;
}

.cue-region-metaphor-explanation-content strong {
    display: block;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cue-region-metaphor-explanation-content p {
    color: rgba(233, 238, 244, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.cue-region-metaphor-explanation-content code {
    color: rgba(79, 195, 247, 0.9);
    background: rgba(79, 195, 247, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin: 0 0.2rem;
}

.cue-region-metaphor-footnote {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(79, 195, 247, 0.22);
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(148, 163, 184, 0.96);
    position: relative;
    z-index: 1;
}

.cue-region-metaphor-footnote-mark {
    margin-right: 0.35rem;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .cue-region-metaphor-diagram {
        padding: 1.5rem;
    }

    .cue-region-metaphor-title {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .cue-region-metaphor-title-en {
        margin-left: 0;
    }

    .cue-region-metaphor-insight {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.1rem;
    }

    .cue-region-metaphor-insight-icon {
        align-self: flex-start;
    }

    .cue-region-metaphor-scenarios {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cue-region-metaphor-scenarios-connector {
        flex-direction: row;
        min-width: 0;
        width: 100%;
        min-height: auto;
        padding: 0.25rem 0;
    }

    .cue-region-metaphor-scenarios-connector-line {
        width: auto;
        height: 2px;
        flex: 1;
        min-height: 0;
        background: linear-gradient(90deg,
                transparent,
                rgba(79, 195, 247, 0.45),
                transparent);
    }

    .cue-region-metaphor-region {
        padding: 1.5rem;
    }

    .cue-region-metaphor-explanation {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cue-region-metaphor-explanation-item {
        padding: 1rem;
    }

    /* İç kutular: dış çerçeveye yaslı, minimum boşluk, metin justify */
    .cue-region-metaphor-panel {
        padding: 1rem 0.65rem 0.85rem;
    }

    .cue-region-metaphor-video-frame {
        padding: 0.35rem;
        align-items: stretch;
        justify-content: stretch;
        min-height: 0;
    }

    .cue-region-metaphor-video-frame .cue-region-metaphor-cue-container {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }

    .cue-region-metaphor-stage--nested .cue-region-metaphor-region {
        padding: 1rem 0.65rem;
        box-sizing: border-box;
    }

    .cue-region-metaphor-diagram .cue-region-metaphor-cue-container {
        padding: 0.8rem 0.55rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cue-region-metaphor-diagram .cue-region-metaphor-cue-text {
        text-align: justify;
        text-justify: inter-word;
        padding-left: 0;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .cue-region-metaphor-diagram .cue-region-metaphor-cue {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .cue-region-metaphor-footnote {
        font-size: 0.78rem;
        line-height: 1.6;
    }
}

/* ============================================
   Units Comparison Diagram (em vs rem Zincirleme Sorunu)
   İç içe kutular ile görsel karşılaştırma
   ============================================ */

.units-comparison-diagram {
    margin: 3rem 0;
    padding: 2.5rem;
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.98) 0%,
            rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 8px 32px rgba(79, 195, 247, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.units-comparison-diagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(79, 195, 247, 0.05),
            transparent);
    transition: left 0.8s ease;
}

.units-comparison-diagram:hover::before {
    left: 100%;
}

/* Ana İçerik Container */
.units-comparison-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

/* Her Bir Bölüm (em veya rem) - Container kaldırıldı, sadece grup */
.units-unit-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.units-group-em .units-section-header {
    border-bottom-color: rgba(251, 146, 60, 0.3);
}

.units-group-rem .units-section-header {
    border-bottom-color: rgba(34, 197, 94, 0.3);
}

/* Bölüm Başlığı */
.units-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(79, 195, 247, 0.2);
}

.units-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
    font-size: 1.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.units-icon-em {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(245, 101, 101, 0.15));
    border: 2px solid rgba(251, 146, 60, 0.4);
    color: #fb923c;
}

.units-icon-rem {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    border: 2px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.units-section-title {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.units-section-main {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.units-section-sub {
    font-size: 0.9rem;
    color: rgba(160, 174, 192, 0.8);
    font-style: italic;
}

/* Bölüm Açıklaması */
.units-section-description {
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    border-left: 3px solid rgba(79, 195, 247, 0.3);
    margin-bottom: 1rem;
}

.units-section-description p {
    margin: 0;
    color: rgba(233, 238, 244, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
}

.units-section-description strong {
    color: #4fc3f7;
    font-weight: 600;
}

.units-warning-text {
    color: #fb923c;
    font-weight: 600;
}

.units-success-text {
    color: #22c55e;
    font-weight: 600;
}

/* İç İçe Kutular - Sade ve Okunaklı */
.units-nested-boxes {
    position: relative;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    min-height: auto;
    overflow-x: auto;
}

.units-box {
    padding: 1.25rem;
    border-radius: 10px;
    margin: 0.75rem 0;
    transition: all 0.3s ease;
    position: relative;
    min-width: 0;
    border: 2px solid;
}

.units-box-level-1 {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.12), rgba(59, 130, 246, 0.08));
    border-color: rgba(79, 195, 247, 0.25) !important;
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.08);
}

.units-group-em .units-box-level-2 {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(245, 101, 101, 0.12));
    border-color: rgba(251, 146, 60, 0.35) !important;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.12);
    margin-left: 1.25rem;
}

.units-group-em .units-box-level-3 {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(245, 101, 101, 0.18));
    border-color: rgba(251, 146, 60, 0.45) !important;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.18);
    margin-left: 2.5rem;
}

.units-group-rem .units-box-level-2,
.units-group-rem .units-box-level-3 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.12));
    border-color: rgba(34, 197, 94, 0.35) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
    margin-left: 1.25rem;
}

.units-box:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.2);
}

.units-group-em .units-box:hover {
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

.units-group-rem .units-box:hover {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.units-box-label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.units-box-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.units-box-calc {
    font-size: 0.85rem;
    color: rgba(160, 174, 192, 0.85);
    font-family: 'Fira Code', 'Consolas', monospace;
    line-height: 1.5;
}

.units-box-calc strong {
    color: #4fc3f7;
    font-weight: 600;
}

.units-group-em .units-box-calc strong {
    color: #fb923c;
}

.units-group-rem .units-box-calc strong {
    color: #22c55e;
}

.units-box-content {
    padding-top: 0.4rem;
}

.units-box-warning,
.units-box-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.units-box-warning {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

.units-box-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

/* Bölüm Footer */
.units-section-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(79, 195, 247, 0.15);
}

.units-footer-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.units-badge-warning {
    background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

.units-badge-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.units-footer-badge i {
    font-size: 1.1rem;
}

/* Açıklama Bölümü */
.units-comparison-explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(79, 195, 247, 0.25);
    position: relative;
    z-index: 1;
}

.units-explanation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(30, 41, 59, 0.6) 0%,
            rgba(15, 23, 42, 0.8) 100%);
    border-radius: 12px;
    border: 1px solid rgba(79, 195, 247, 0.2);
    transition: all 0.3s ease;
}

.units-explanation-item:hover {
    border-color: rgba(79, 195, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.1);
}

.units-explanation-item i {
    font-size: 1.5rem;
    color: #4fc3f7;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.units-explanation-content {
    flex: 1;
    color: rgba(233, 238, 244, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
}

.units-explanation-content strong {
    color: #fff;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .units-comparison-diagram {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    .units-comparison-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .units-comparison-section {
        padding: 1.5rem;
    }

    .units-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .units-nested-boxes {
        min-height: auto;
        padding: 1rem;
    }

    .units-section-em .units-box-level-2,
    .units-section-em .units-box-level-3,
    .units-section-em .units-box-level-4,
    .units-section-rem .units-box-level-2,
    .units-section-rem .units-box-level-3,
    .units-section-rem .units-box-level-4 {
        margin-left: 0.75rem;
    }

    .units-comparison-explanation {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Viewport Diagram Container */
.viewport-diagram-container {
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    margin-top: 1rem;
}

.viewport-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 3px solid rgba(79, 195, 247, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.viewport-label {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(79, 195, 247, 0.8);
    background: rgba(15, 23, 42, 0.7);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    z-index: 10;
}

.viewport-label-top {
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.viewport-label-right {
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
}

/* Viewport Examples */
.viewport-example {
    position: absolute;
    border: 2px dashed;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.viewport-example:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.viewport-example-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 4px;
    text-align: center;
}

.viewport-example-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.viewport-example-desc {
    font-size: 0.7rem;
    color: rgba(160, 174, 192, 0.9);
}

/* vw Example - Genişlik */
.viewport-example-vw {
    top: 20%;
    left: 10%;
    width: 50%;
    height: 15%;
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.15);
}

.viewport-example-vw .viewport-example-title {
    color: #3b82f6;
}

/* vh Example - Yükseklik */
.viewport-example-vh {
    top: 10%;
    right: 15%;
    width: 20%;
    height: 50%;
    border-color: rgba(34, 197, 94, 0.6);
    background: rgba(34, 197, 94, 0.15);
}

.viewport-example-vh .viewport-example-title {
    color: #22c55e;
}

/* vmin Example - Küçük olan */
.viewport-example-vmin {
    bottom: 15%;
    left: 15%;
    width: 30%;
    height: 30%;
    border-color: rgba(251, 146, 60, 0.6);
    background: rgba(251, 146, 60, 0.15);
}

.viewport-example-vmin .viewport-example-title {
    color: #fb923c;
}

/* vmax Example - Büyük olan */
.viewport-example-vmax {
    bottom: 20%;
    right: 20%;
    width: 40%;
    height: 25%;
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(168, 85, 247, 0.15);
}

.viewport-example-vmax .viewport-example-title {
    color: #a855f7;
}

/* Viewport Icon */
.units-icon-viewport {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(59, 130, 246, 0.15));
    border: 2px solid rgba(79, 195, 247, 0.4);
    color: #4fc3f7;
}

/* Viewport Group Border */
.units-group-viewport .units-section-header {
    border-bottom-color: rgba(79, 195, 247, 0.3);
}

/* Info Badge */
.units-badge-info {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(79, 195, 247, 0.3);
    color: #4fc3f7;
}

.units-badge-info i {
    color: #4fc3f7;
}

/* Responsive */
@media (max-width: 768px) {
    .viewport-frame {
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }

    .viewport-example-label {
        padding: 0.4rem;
    }

    .viewport-example-title {
        font-size: 0.8rem;
    }

    .viewport-example-desc {
        font-size: 0.65rem;
    }

    .viewport-label {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Mobil Viewport Diagram */
.mobile-viewport-container {
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    margin-top: 1rem;
}

.mobile-viewport-frame {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border: 3px solid;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.mobile-viewport-problem {
    border-color: rgba(251, 146, 60, 0.5);
}

.mobile-viewport-small {
    border-color: rgba(59, 130, 246, 0.5);
}

.mobile-viewport-large {
    border-color: rgba(34, 197, 94, 0.5);
}

.mobile-viewport-dynamic {
    border-color: rgba(168, 85, 247, 0.5);
}

/* Adres Çubuğu */
.mobile-address-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.9));
    border-bottom: 2px solid rgba(79, 195, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.mobile-address-bar-visible {
    opacity: 1;
    transform: translateY(0);
}

.mobile-address-bar-hidden {
    opacity: 0;
    transform: translateY(-100%);
    height: 0;
}

.mobile-address-bar-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(233, 238, 244, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
}

.mobile-address-bar-content i {
    color: rgba(79, 195, 247, 0.8);
    font-size: 0.7rem;
}

/* İçerik Alanı */
.mobile-content-area {
    position: absolute;
    top: 12%;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed;
    border-radius: 0 0 17px 17px;
}

.mobile-content-vh {
    border-color: rgba(251, 146, 60, 0.4);
    background: rgba(251, 146, 60, 0.1);
}

.mobile-content-svh {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.mobile-content-lvh {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
    top: 0;
}

.mobile-content-dvh {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
}

.mobile-content-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 8px;
    text-align: center;
}

.mobile-content-title {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.mobile-content-vh .mobile-content-title {
    color: #fb923c;
}

.mobile-content-svh .mobile-content-title {
    color: #3b82f6;
}

.mobile-content-lvh .mobile-content-title {
    color: #22c55e;
}

.mobile-content-dvh .mobile-content-title {
    color: #a855f7;
}

.mobile-content-desc {
    font-size: 0.7rem;
    color: rgba(160, 174, 192, 0.9);
}

/* Notlar ve İndikatörler */
.mobile-viewport-note {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: rgba(251, 146, 60, 0.8);
    white-space: nowrap;
}

.mobile-viewport-note i {
    animation: bounce 2s infinite;
}

.mobile-dynamic-indicator {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 6px;
    font-size: 0.65rem;
    color: #a855f7;
}

.mobile-dynamic-indicator i {
    animation: spin 2s linear infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Çözüm Grid */
.mobile-viewport-solutions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    margin-top: 1rem;
}

.mobile-solution-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.mobile-solution-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.mobile-badge-svh {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.mobile-badge-lvh {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.mobile-badge-dvh {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

/* İkonlar */
.units-icon-problem {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(245, 101, 101, 0.15));
    border: 2px solid rgba(251, 146, 60, 0.4);
    color: #fb923c;
}

.units-icon-solution {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    border: 2px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.units-group-mobile-problem .units-section-header {
    border-bottom-color: rgba(251, 146, 60, 0.3);
}

.units-group-mobile-solution .units-section-header {
    border-bottom-color: rgba(34, 197, 94, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-viewport-solutions {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mobile-viewport-frame {
        max-width: 240px;
    }

    .mobile-content-label {
        padding: 0.6rem 0.8rem;
    }

    .mobile-content-title {
        font-size: 0.9rem;
    }

    .mobile-content-desc {
        font-size: 0.65rem;
    }

    .mobile-solution-badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.8rem;
    }
}

/* Container Query Diagram */
.container-query-diagram {
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.container-scenario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.container-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(233, 238, 244, 0.9);
    padding: 0.5rem 1rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    border-left: 3px solid;
}

.container-scenario-wide .container-label {
    border-left-color: rgba(59, 130, 246, 0.6);
    color: #3b82f6;
}

.container-scenario-narrow .container-label {
    border-left-color: rgba(168, 85, 247, 0.6);
    color: #a855f7;
}

.container-label i {
    font-size: 1rem;
}

.container-box {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 3px solid;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.container-box-wide {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-color: rgba(59, 130, 246, 0.5);
}

.container-box-narrow {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-color: rgba(168, 85, 247, 0.5);
}

.container-component {
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border: 2px dashed;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.container-box-wide .container-component {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.container-box-narrow .container-component {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
}

.container-component:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.component-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.component-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 1;
    min-width: 0;
}

.container-box-narrow .component-title {
    font-size: 0.95rem;
}

.component-unit {
    font-size: 0.85rem;
    font-family: 'Fira Code', 'Consolas', monospace;
    color: rgba(79, 195, 247, 0.9);
    background: rgba(15, 23, 42, 0.7);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(79, 195, 247, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.container-box-narrow .component-unit {
    font-size: 0.8rem;
    padding: 0.3rem 0.55rem;
}

.component-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.component-text {
    font-size: 1rem;
    color: rgba(233, 238, 244, 0.9);
    line-height: 1.6;
}

.container-box-wide .component-text {
    font-size: 1rem;
}

.container-box-narrow .component-text {
    font-size: 0.75rem;
}

.component-calc {
    font-size: 0.85rem;
    color: rgba(160, 174, 192, 0.85);
    font-family: 'Fira Code', 'Consolas', monospace;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.7);
    border-radius: 6px;
    border-left: 3px solid;
}

.container-box-wide .component-calc {
    border-left-color: rgba(59, 130, 246, 0.5);
}

.container-box-narrow .component-calc {
    border-left-color: rgba(168, 85, 247, 0.5);
}

.component-calc strong {
    color: #4fc3f7;
    font-weight: 600;
}

.container-box-wide .component-calc strong {
    color: #3b82f6;
}

.container-box-narrow .component-calc strong {
    color: #a855f7;
}

.container-comparison-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 2px dashed rgba(79, 195, 247, 0.4);
    border-radius: 8px;
    font-size: 0.9rem;
    color: rgba(79, 195, 247, 0.9);
    font-weight: 500;
    text-align: center;
}

.container-comparison-arrow i {
    font-size: 1.2rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Container Icon */
.units-icon-container {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.15));
    border: 2px solid rgba(168, 85, 247, 0.4);
    color: #a855f7;
}

.units-group-container .units-section-header {
    border-bottom-color: rgba(168, 85, 247, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .container-query-diagram {
        padding: 1rem;
        gap: 1.5rem;
    }

    .container-box-wide {
        max-width: 100%;
    }

    .container-box-narrow {
        max-width: 100%;
    }

    .component-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .component-title {
        font-size: 1rem;
    }

    .component-unit {
        font-size: 0.7rem;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .container-box-wide .component-text {
        font-size: 0.9rem;
    }

    .container-box-narrow .component-text {
        font-size: 0.7rem;
    }

    .container-comparison-arrow {
        flex-direction: column;
        font-size: 0.8rem;
    }
}

/* ============================================
   Token Parsing Diagram (Token Ayrıştırma Diyagramı)
   Kompakt ve modern token görselleştirme
   ============================================ */

.token-parsing-diagram {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg,
            rgba(15, 23, 42, 0.95) 0%,
            rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(79, 195, 247, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.token-parsing-diagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(79, 195, 247, 0.05),
            transparent);
    transition: left 0.6s ease;
}

.token-parsing-diagram:hover::before {
    left: 100%;
}

.token-parsing-content {
    position: relative;
    z-index: 1;
}

.token-source-code {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 8px;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 1.1rem;
    color: #4fc3f7;
    margin-bottom: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.token-tokens-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.token-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

.token-box {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg,
            rgba(79, 195, 247, 0.15) 0%,
            rgba(59, 130, 246, 0.1) 100%);
    border: 2px solid rgba(79, 195, 247, 0.4);
    border-radius: 8px;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 1rem;
    color: #4fc3f7;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.15);
}

.token-box:hover {
    background: linear-gradient(135deg,
            rgba(79, 195, 247, 0.25) 0%,
            rgba(59, 130, 246, 0.2) 100%);
    border-color: rgba(79, 195, 247, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.25);
}

.token-label {
    font-size: 0.75rem;
    color: rgba(79, 195, 247, 0.8);
    font-weight: 500;
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: rgba(79, 195, 247, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(79, 195, 247, 0.2);
    white-space: nowrap;
}

.token-type {
    font-size: 0.7rem;
    color: rgba(233, 238, 244, 0.6);
    font-style: italic;
    margin-top: 0.25rem;
}

.token-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(79, 195, 247, 0.5);
    font-size: 0.9rem;
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .token-parsing-diagram {
        padding: 1.25rem;
        margin: 1.5rem 0;
    }

    .token-source-code {
        font-size: 0.95rem;
        padding: 0.4rem 0.8rem;
    }

    .token-tokens-row {
        gap: 0.5rem;
    }

    .token-item {
        min-width: 70px;
    }

    .token-box {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }

    .token-label {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .token-type {
        font-size: 0.65rem;
    }

    .token-arrow {
        font-size: 0.8rem;
        margin: 0 0.15rem;
    }
}

@media (max-width: 480px) {
    .token-tokens-row {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .token-arrow {
        transform: rotate(90deg);
        margin: 0.25rem 0;
    }

    .token-item {
        min-width: 100%;
        max-width: 200px;
    }
}

/* ============================================
   prompt() Fonksiyonu Akış Diagramı
   ============================================ */

.prompt-flow-diagram {
    margin: 2.5rem 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.prompt-flow-diagram-full {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.prompt-flow-diagram .diagram-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    min-width: fit-content;
    width: 100%;
}

/* Giriş Bölümü */
.prompt-input-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.prompt-input-box {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.prompt-input-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: rgba(45, 152, 218, 1);
    font-weight: 600;
    font-size: 1.05rem;
}

.prompt-input-header i {
    font-size: 1.1rem;
}

.prompt-input-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prompt-input-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.prompt-input-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    border-left: 3px solid;
    transition: all 0.3s ease;
}

.prompt-input-item:hover {
    background: rgba(15, 23, 42, 0.8);
    transform: translateX(5px);
}

.prompt-input-required {
    border-left-color: rgba(239, 68, 68, 0.7);
}

.prompt-input-optional {
    border-left-color: rgba(251, 191, 36, 0.7);
}

.input-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6px;
    font-size: 1.1rem;
}

.prompt-input-required .input-item-icon {
    background: rgba(239, 68, 68, 0.2);
    color: rgba(239, 68, 68, 1);
}

.prompt-input-optional .input-item-icon {
    background: rgba(251, 191, 36, 0.2);
    color: rgba(251, 191, 36, 1);
}

.input-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.input-item-label {
    font-size: 0.9rem;
    color: rgba(203, 213, 225, 0.8);
    font-weight: 500;
}

.input-item-value {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.input-item-description {
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.6);
    font-style: italic;
    margin-top: 0.25rem;
}

.input-item-example {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 6px;
    border-left: 2px solid rgba(45, 152, 218, 0.5);
}

.input-item-example code {
    background: transparent;
    color: rgba(45, 152, 218, 1);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    border: none;
}

.prompt-syntax-example {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(45, 152, 218, 0.2);
}

.syntax-example-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: rgba(45, 152, 218, 1);
    font-weight: 600;
    font-size: 0.95rem;
}

.syntax-example-label i {
    font-size: 1rem;
}

.prompt-syntax-example pre {
    margin: 0;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 6px;
    padding: 1rem;
}

.prompt-syntax-example code {
    background: transparent;
    border: none;
    padding: 0;
}

/* Fonksiyon Kutusu */
.prompt-function-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2.5rem;
    background: linear-gradient(135deg, rgba(45, 152, 218, 0.2), rgba(59, 130, 246, 0.15));
    border: 2px solid rgba(45, 152, 218, 0.5);
    border-radius: 12px;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.prompt-function-box::before,
.prompt-function-box::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2rem;
    background: linear-gradient(180deg, rgba(45, 152, 218, 0.6), transparent);
}

.prompt-function-box::before {
    top: -2rem;
}

.prompt-function-box::after {
    bottom: -2rem;
    background: linear-gradient(0deg, rgba(45, 152, 218, 0.6), transparent);
}

.prompt-function-icon {
    font-size: 2rem;
    color: rgba(45, 152, 218, 1);
}

.prompt-function-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
}

.prompt-function-label code {
    background: rgba(15, 23, 42, 0.6);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(45, 152, 218, 0.4);
    color: rgba(45, 152, 218, 1);
    font-size: 1.2rem;
}

.prompt-function-description {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(203, 213, 225, 0.8);
    font-style: italic;
    max-width: 400px;
}

/* Çıkış Bölümü */
.prompt-output-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.prompt-output-box {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.prompt-output-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: rgba(45, 152, 218, 1);
    font-weight: 600;
    font-size: 1.05rem;
}

.prompt-output-header i {
    font-size: 1.1rem;
}

.prompt-output-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prompt-output-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.prompt-output-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    border-left: 3px solid;
    transition: all 0.3s ease;
}

.prompt-output-item:hover {
    background: rgba(15, 23, 42, 0.8);
    transform: translateX(5px);
}

.prompt-output-success {
    border-left-color: rgba(34, 197, 94, 0.7);
}

.prompt-output-cancel {
    border-left-color: rgba(239, 68, 68, 0.7);
}

.output-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6px;
    font-size: 1.1rem;
}

.prompt-output-success .output-item-icon {
    background: rgba(34, 197, 94, 0.2);
    color: rgba(34, 197, 94, 1);
}

.prompt-output-cancel .output-item-icon {
    background: rgba(239, 68, 68, 0.2);
    color: rgba(239, 68, 68, 1);
}

.output-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.output-item-label {
    font-size: 0.9rem;
    color: rgba(203, 213, 225, 0.8);
    font-weight: 500;
}

.output-item-value {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.output-item-value code {
    background: rgba(15, 23, 42, 0.6);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(45, 152, 218, 0.3);
    color: rgba(45, 152, 218, 1);
    font-size: 0.9rem;
}

.output-item-description {
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.6);
    font-style: italic;
    margin-top: 0.25rem;
}

.output-item-example {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 6px;
    border-left: 2px solid;
}

.prompt-output-success .output-item-example {
    border-left-color: rgba(34, 197, 94, 0.5);
}

.prompt-output-cancel .output-item-example {
    border-left-color: rgba(239, 68, 68, 0.5);
}

.output-item-example code {
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    border: none;
}

.prompt-usage-example {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(45, 152, 218, 0.2);
}

.usage-example-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: rgba(45, 152, 218, 1);
    font-weight: 600;
    font-size: 0.95rem;
}

.usage-example-label i {
    font-size: 1rem;
}

.prompt-usage-example pre {
    margin: 0;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(45, 152, 218, 0.3);
    border-radius: 6px;
    padding: 1rem;
}

.prompt-usage-example code {
    background: transparent;
    border: none;
    padding: 0;
}

/* Scrollbar Stilleri */
.prompt-flow-diagram::-webkit-scrollbar {
    height: 8px;
}

.prompt-flow-diagram::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 10px;
    margin: 0.5rem 0;
}

.prompt-flow-diagram::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
            rgba(45, 152, 218, 0.5) 0%,
            rgba(59, 130, 246, 0.4) 100%);
    border-radius: 10px;
    border: 1px solid rgba(45, 152, 218, 0.2);
    transition: background 0.2s ease;
}

.prompt-flow-diagram::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg,
            rgba(45, 152, 218, 0.7) 0%,
            rgba(59, 130, 246, 0.6) 100%);
}

/* Firefox için scrollbar */
.prompt-flow-diagram {
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 152, 218, 0.5) rgba(15, 23, 42, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .prompt-flow-diagram {
        padding: 0;
        margin: 1.5rem 0;
    }

    .prompt-flow-diagram-full {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
    }

    .prompt-flow-diagram .diagram-content {
        gap: 1.5rem;
        padding: 0 0.5rem;
    }

    .prompt-input-box,
    .prompt-output-box {
        padding: 1rem;
        width: 100%;
        min-width: 0;
    }

    .prompt-input-items-grid,
    .prompt-output-items-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .prompt-input-item,
    .prompt-output-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .input-item-icon,
    .output-item-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .prompt-function-box {
        padding: 1.25rem 1.5rem;
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .prompt-function-icon {
        font-size: 1.5rem;
    }

    .prompt-function-label {
        font-size: 1.1rem;
    }

    .prompt-function-description {
        max-width: 100%;
    }

    .prompt-syntax-example pre,
    .prompt-usage-example pre {
        font-size: 0.85rem;
        padding: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .prompt-syntax-example pre::-webkit-scrollbar,
    .prompt-usage-example pre::-webkit-scrollbar {
        height: 6px;
    }

    .prompt-syntax-example pre::-webkit-scrollbar-track,
    .prompt-usage-example pre::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.4);
        border-radius: 10px;
    }

    .prompt-syntax-example pre::-webkit-scrollbar-thumb,
    .prompt-usage-example pre::-webkit-scrollbar-thumb {
        background: rgba(45, 152, 218, 0.5);
        border-radius: 10px;
    }

    .prompt-syntax-example pre::-webkit-scrollbar-thumb:hover,
    .prompt-usage-example pre::-webkit-scrollbar-thumb:hover {
        background: rgba(45, 152, 218, 0.7);
    }
}

/* ============================================
   Algo Entry — özet tablolar & diyagramlar
   (pages/algo/algo-entry.html) — prefix: algo-entry-
   ============================================ */

.algo-entry-diagram {
    margin: 1.75rem 0 2rem;
    padding: 1.25rem 1rem 1.5rem;
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.55) 0%, rgba(30, 41, 59, 0.42) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.algo-entry-diagram+.algo-entry-diagram {
    margin-top: 0.5rem;
}

/* ============================================
   Matrix Multiplication — row·column (C[i][j])
   (pages/algo/matrix-linear-algebra-algorithms.html)
   prefix: mm-dot-
   ============================================ */
.mm-dot-diagram {
    padding: 1rem 1rem 1.25rem;
}

.mm-dot-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.mm-dot-header-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: rgba(251, 146, 60, 0.92);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(251, 146, 60, 0.28);
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.12), 0 10px 24px rgba(0, 0, 0, 0.22);
    flex: 0 0 auto;
}

.mm-dot-header-text {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.mm-dot-header-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.96);
}

.mm-dot-header-sub {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.9);
}

.mm-dot-body {
    margin-top: 0.25rem;
}

.mm-dot-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0.85rem;
}

.mm-dot-operator {
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(148, 163, 184, 0.9);
    padding: 0.25rem 0.45rem;
}

.mm-dot-arrow {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    color: rgba(125, 211, 252, 0.95);
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(125, 211, 252, 0.22);
}

.mm-dot-matrix {
    padding: 0.85rem 0.85rem 0.75rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
    min-width: 0;
}

.mm-dot-matrix-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.mm-dot-matrix-name {
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.96);
}

.mm-dot-matrix-dim {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.9);
}

.mm-dot-matrix-cells {
    display: grid;
    gap: 0.35rem;
}

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

.mm-dot-cell {
    display: grid;
    place-items: center;
    padding: 0.38rem 0.25rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.92);
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-dot-cell--row {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.52) 100%);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 0 18px rgba(56, 189, 248, 0.08);
}

.mm-dot-cell--col {
    border-color: rgba(251, 146, 60, 0.38);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.52) 100%);
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.12), 0 0 18px rgba(251, 146, 60, 0.08);
}

.mm-dot-cell--focus {
    border-color: rgba(52, 211, 153, 0.5);
    background: linear-gradient(165deg, rgba(16, 185, 129, 0.18) 0%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.16), 0 0 22px rgba(52, 211, 153, 0.12);
}

.mm-dot-matrix-hint {
    margin-top: 0.55rem;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.88);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding-top: 0.55rem;
}

@media (max-width: 860px) {
    .mm-dot-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .mm-dot-operator,
    .mm-dot-arrow {
        display: none;
    }
}

/* ============================================
   Memory Layout — Row-major vs Column-major
   (pages/algo/matrix-linear-algebra-algorithms.html)
   prefix: mem-layout-
   ============================================ */
.mem-layout-diagram {
    padding: 1rem 1rem 1.25rem;
}

.mem-layout-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.mem-layout-header-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: rgba(167, 139, 250, 0.95);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(167, 139, 250, 0.28);
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12), 0 10px 24px rgba(0, 0, 0, 0.22);
    flex: 0 0 auto;
}

.mem-layout-header-text {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.mem-layout-header-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.96);
}

.mem-layout-header-sub {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.9);
}

.mem-layout-body {
    display: grid;
    gap: 1rem;
}

.mem-layout-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0) 0%, rgba(148, 163, 184, 0.16) 50%, rgba(148, 163, 184, 0) 100%);
}

.mem-layout-track {
    padding: 0.85rem 0.85rem 0.75rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
}

.mem-layout-track-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.mem-layout-track-title {
    font-weight: 900;
    letter-spacing: 0.03em;
    color: rgba(248, 250, 252, 0.96);
}

.mem-layout-track-sub {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.92);
    text-align: right;
}

.mem-layout-cells {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.35rem;
}

.mem-layout-cell {
    display: grid;
    place-items: center;
    padding: 0.44rem 0.2rem;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 750;
    color: rgba(226, 232, 240, 0.92);
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.14);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mem-layout-cell--rowband {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.52) 100%);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 0 18px rgba(56, 189, 248, 0.08);
}

.mem-layout-cell--colband {
    border-color: rgba(251, 146, 60, 0.38);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.52) 100%);
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.12), 0 0 18px rgba(251, 146, 60, 0.08);
}

.mem-layout-groups {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.mem-layout-group {
    padding: 0.35rem 0.25rem;
    border-radius: 999px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(203, 213, 225, 0.92);
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.mem-layout-group--row {
    border-color: rgba(56, 189, 248, 0.28);
}

.mem-layout-group--col {
    border-color: rgba(251, 146, 60, 0.28);
}

@media (max-width: 860px) {
    .mem-layout-cells {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mem-layout-cell {
        font-size: 0.78rem;
        padding: 0.5rem 0.25rem;
    }
}

/* ============================================
   QR Decomposition — Gram–Schmidt flow
   (pages/algo/matrix-linear-algebra-algorithms.html)
   prefix: qr-flow-
   ============================================ */
.qr-flow-diagram {
    padding: 1rem 1rem 1.25rem;
}

.qr-flow-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.qr-flow-header-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: rgba(52, 211, 153, 0.95);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(52, 211, 153, 0.26);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12), 0 10px 24px rgba(0, 0, 0, 0.22);
    flex: 0 0 auto;
}

.qr-flow-header-text {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.qr-flow-header-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.96);
}

.qr-flow-header-sub {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.9);
}

.qr-flow-body {
    display: grid;
    gap: 0.75rem;
}

.qr-flow-steps {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
}

.qr-flow-step {
    width: min(42rem, 100%);
    padding: 0.65rem 0.75rem 0.7rem;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.06);
}

.qr-flow-step-label {
    display: block;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.95);
}

.qr-flow-step-detail {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.9);
}

.qr-flow-step-hint {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: rgba(148, 163, 184, 0.95);
}

.qr-flow-arrow {
    color: rgba(52, 211, 153, 0.8);
    font-size: 0.9rem;
}

.qr-flow-step--start {
    border-color: rgba(52, 211, 153, 0.25);
    background: linear-gradient(165deg, rgba(16, 185, 129, 0.14) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.qr-flow-step--init {
    border-color: rgba(125, 211, 252, 0.25);
    background: linear-gradient(165deg, rgba(56, 189, 248, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.qr-flow-step--loop {
    border-color: rgba(167, 139, 250, 0.26);
    background: linear-gradient(165deg, rgba(167, 139, 250, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.qr-flow-step--ok {
    border-color: rgba(52, 211, 153, 0.28);
    background: linear-gradient(165deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.qr-flow-step--output {
    border-color: rgba(251, 146, 60, 0.28);
    background: linear-gradient(165deg, rgba(251, 146, 60, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.qr-flow-loop-card {
    width: min(42rem, 100%);
    padding: 0.75rem 0.85rem 0.8rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px dashed rgba(148, 163, 184, 0.2);
}

.qr-flow-loop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.qr-flow-loop-title {
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.95);
}

.qr-flow-loop-sub {
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(148, 163, 184, 0.92);
}

.qr-flow-loop-ops {
    display: grid;
    gap: 0.5rem;
}

.qr-flow-op {
    padding: 0.6rem 0.65rem;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.qr-flow-op-title {
    display: block;
    font-weight: 850;
    color: rgba(226, 232, 240, 0.94);
}

.qr-flow-op-detail {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.76rem;
    font-weight: 650;
    color: rgba(203, 213, 225, 0.9);
    line-height: 1.45;
}

.qr-flow-caption {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.9);
}

/* --- Akış: Problem → … → Çıktı --- */
.algo-thinking-flow-track {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.35rem 0.25rem;
}

.algo-thinking-flow-step {
    flex: 1 1 auto;
    min-width: min(100%, 7.5rem);
    max-width: 11.25rem;
    padding: 0.65rem 0.5rem 0.7rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(248, 250, 252, 0.95);
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(251, 146, 60, 0.28);
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.algo-thinking-flow-name {
    display: block;
}

.algo-thinking-flow-step--decision .algo-thinking-flow-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.algo-thinking-flow-step--decision .algo-thinking-flow-name i {
    color: rgba(56, 189, 248, 0.95);
    font-size: 0.88em;
}

.algo-thinking-flow-step--decision {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2), 0 0 18px rgba(56, 189, 248, 0.18);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.55) 100%);
}

.algo-thinking-flow-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.95);
}

.algo-thinking-flow-why {
    display: block;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(125, 211, 252, 0.88);
}

.algo-thinking-flow-tagline {
    margin: 1rem 0 0;
    padding: 0.55rem 0.75rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(226, 232, 240, 0.92);
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 8px;
}

.algo-thinking-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(251, 146, 60, 0.75);
    font-size: 0.85rem;
    flex: 0 0 auto;
    padding: 0 0.15rem;
}

/* --- Kara kutu --- */
.algo-black-box-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
}

.algo-black-box-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

.algo-black-box-io {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 9.25rem;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.98);
    background: rgba(51, 65, 85, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 9px;
    text-align: center;
}

.algo-black-box-io-main {
    line-height: 1.2;
}

.algo-black-box-io-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.95);
}

.algo-black-box-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: min(100%, 20.5rem);
}

.algo-black-box-core {
    width: 100%;
    min-width: 10.25rem;
    padding: 0.9rem 1rem 0.95rem;
    text-align: center;
    font-weight: 700;
    color: rgba(252, 252, 252, 0.98);
    background: linear-gradient(155deg, rgba(55, 35, 40, 0.92) 0%, rgba(25, 32, 48, 0.94) 55%, rgba(22, 28, 42, 0.96) 100%);
    border: 1px solid rgba(120, 72, 78, 0.45);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.2);
    animation: algo-black-box-core-matte 5.5s ease-in-out infinite;
}

@keyframes algo-black-box-core-matte {

    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 4px 14px rgba(0, 0, 0, 0.35),
            0 0 22px rgba(90, 45, 50, 0.12);
    }

    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 5px 16px rgba(0, 0, 0, 0.38),
            0 0 28px rgba(90, 45, 50, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .algo-black-box-core {
        animation: none;
    }
}

.algo-black-box-core-title {
    display: block;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.algo-black-box-core-sub {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(248, 180, 180, 0.82);
}

.algo-black-box-core-hint {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(186, 198, 214, 0.88);
}

.algo-black-box-tree {
    width: 100%;
    padding: 0.55rem 0.65rem 0.6rem;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.74rem;
    line-height: 1.6;
    color: rgba(203, 213, 225, 0.88);
    text-align: left;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 9px;
}

.algo-black-box-tree-root {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
}

.algo-black-box-tree-line {
    display: block;
    white-space: pre;
}

.algo-black-box-tree-note {
    color: rgba(125, 211, 252, 0.75);
    font-weight: 500;
}

.algo-black-box-arrow {
    color: rgba(148, 163, 184, 0.9);
    font-size: 1.25rem;
    font-weight: 600;
}

.algo-black-box-meta {
    width: 100%;
    max-width: 28rem;
    padding: 0.75rem 1.05rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.92);
    background: rgba(15, 23, 42, 0.5);
    border-radius: 9px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
}

.algo-black-box-meta-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.65rem;
    justify-content: center;
    text-align: center;
}

.algo-black-box-meta-item+.algo-black-box-meta-item {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.algo-black-box-meta-item strong {
    color: rgba(248, 250, 252, 0.95);
    font-weight: 700;
}

.algo-black-box-meta-item span {
    flex: 1 1 13rem;
    max-width: 100%;
    color: rgba(186, 198, 214, 0.95);
}

.algo-black-box-tagline {
    margin: 0;
    width: 100%;
    max-width: 30rem;
    padding: 0.65rem 0.95rem;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: rgba(226, 232, 240, 0.94);
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 9px;
}

/* --- algo-entry: code-editor sekmeleri — yalnızca .code-editor--algo-tabs (mat accent + rozet; global editör mantığı değişmez) --- */
.code-editor--algo-tabs .editor-tab-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

.code-editor--algo-tabs .editor-tab-title {
    line-height: 1.25;
}

.code-editor--algo-tabs .editor-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.code-editor--algo-tabs .editor-tab-pill--algo-pseudo {
    color: rgba(221, 214, 254, 0.95);
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(167, 139, 250, 0.35);
}

.code-editor--algo-tabs .editor-tab-pill--algo-js {
    color: rgba(254, 243, 199, 0.95);
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}

.code-editor--algo-tabs .editor-tab-pill--algo-on {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    color: rgba(204, 251, 241, 0.95);
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.32);
}

.code-editor--algo-tabs .editor-tab-pill--algo-on2 {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    color: rgba(254, 215, 170, 0.95);
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.32);
}

/* Pseudocode — violet (mat) */
.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"] {
    border-color: rgba(167, 139, 250, 0.22);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 14px rgba(139, 92, 246, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"]:hover {
    background: linear-gradient(165deg,
            rgba(139, 92, 246, 0.12) 0%,
            rgba(124, 58, 237, 0.14) 100%);
    border-color: rgba(167, 139, 250, 0.42);
    color: #fff;
}

.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"].active {
    background: linear-gradient(165deg,
            rgba(139, 92, 246, 0.16) 0%,
            rgba(124, 58, 237, 0.2) 100%);
    border-color: rgba(167, 139, 250, 0.48);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(167, 139, 250, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"].active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            rgba(109, 40, 217, 0.95),
            rgba(167, 139, 250, 0.88),
            rgba(109, 40, 217, 0.95));
    box-shadow: 0 -1px 10px rgba(139, 92, 246, 0.32);
    border-radius: 0;
}

.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"] i {
    color: rgba(196, 181, 253, 0.9);
}

.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"]:hover i,
.code-editor--algo-tabs .editor-tab[data-target="pseudo-pane"].active i {
    color: #c4b5fd;
}

/* JavaScript (algo) — amber */
.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"] {
    border-color: rgba(251, 191, 36, 0.2);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 12px rgba(245, 158, 11, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"]:hover {
    background: linear-gradient(165deg,
            rgba(251, 191, 36, 0.1) 0%,
            rgba(245, 158, 11, 0.14) 100%);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fffbeb;
}

.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"].active {
    background: linear-gradient(165deg,
            rgba(251, 191, 36, 0.16) 0%,
            rgba(245, 158, 11, 0.22) 100%);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(251, 191, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: #fff;
}

.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"].active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
    box-shadow: 0 -1px 10px rgba(245, 158, 11, 0.32);
    border-radius: 0;
}

.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"] i {
    color: rgba(251, 191, 36, 0.88);
}

.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"]:hover i,
.code-editor--algo-tabs .editor-tab[data-target="js-algo-pane"].active i {
    color: #fbbf24;
}

/* O(n) — teal */
.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"] {
    border-color: rgba(45, 212, 191, 0.22);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 14px rgba(45, 212, 191, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"]:hover {
    background: linear-gradient(165deg,
            rgba(45, 212, 191, 0.1) 0%,
            rgba(13, 148, 136, 0.12) 100%);
    border-color: rgba(45, 212, 191, 0.4);
    color: #ecfdf5;
}

.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"].active {
    background: linear-gradient(165deg,
            rgba(45, 212, 191, 0.14) 0%,
            rgba(13, 148, 136, 0.18) 100%);
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(45, 212, 191, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: #fff;
}

.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"].active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0d9488, #2dd4bf, #0d9488);
    box-shadow: 0 -1px 10px rgba(45, 212, 191, 0.32);
    border-radius: 0;
}

.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"] i {
    color: rgba(94, 234, 212, 0.88);
}

.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"]:hover i,
.code-editor--algo-tabs .editor-tab[data-target="o-linear-pane"].active i {
    color: #5eead4;
}

/* O(n²) — şeftali / turuncu (mat; “hata” kırmızısı değil) */
.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"] {
    border-color: rgba(251, 146, 60, 0.22);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 12px rgba(251, 146, 60, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"]:hover {
    background: linear-gradient(165deg,
            rgba(251, 146, 60, 0.1) 0%,
            rgba(234, 88, 12, 0.12) 100%);
    border-color: rgba(251, 146, 60, 0.42);
    color: #fff7ed;
}

.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"].active {
    background: linear-gradient(165deg,
            rgba(251, 146, 60, 0.14) 0%,
            rgba(234, 88, 12, 0.16) 100%);
    border-color: rgba(251, 146, 60, 0.48);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(251, 146, 60, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: #fff;
}

.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"].active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ea580c, #fb923c, #ea580c);
    box-shadow: 0 -1px 10px rgba(251, 146, 60, 0.3);
    border-radius: 0;
}

.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"] i {
    color: rgba(251, 146, 60, 0.88);
}

.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"]:hover i,
.code-editor--algo-tabs .editor-tab[data-target="o-quadratic-pane"].active i {
    color: #fb923c;
}

.code-editor--algo-tabs .editor-tab-pill--algo-rec {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    color: rgba(251, 207, 232, 0.95);
    background: rgba(244, 114, 182, 0.1);
    border-color: rgba(244, 114, 182, 0.32);
}

.code-editor--algo-tabs .editor-tab-pill--algo-dp {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    color: rgba(209, 250, 229, 0.95);
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.32);
}

/* Özyineleme (Fibonacci) — mat rose */
.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"] {
    border-color: rgba(244, 114, 182, 0.22);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 14px rgba(244, 114, 182, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"]:hover {
    background: linear-gradient(165deg,
            rgba(244, 114, 182, 0.1) 0%,
            rgba(219, 39, 119, 0.12) 100%);
    border-color: rgba(244, 114, 182, 0.4);
    color: #fdf2f8;
}

.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"].active {
    background: linear-gradient(165deg,
            rgba(244, 114, 182, 0.14) 0%,
            rgba(219, 39, 119, 0.16) 100%);
    border-color: rgba(244, 114, 182, 0.45);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(244, 114, 182, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: #fff;
}

.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"].active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #db2777, #f472b6, #db2777);
    box-shadow: 0 -1px 10px rgba(244, 114, 182, 0.3);
    border-radius: 0;
}

.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"] i {
    color: rgba(251, 182, 206, 0.9);
}

.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"]:hover i,
.code-editor--algo-tabs .editor-tab[data-target="recursive-pane"].active i {
    color: #f9a8d4;
}

/* Dinamik programlama — mat emerald (O(n) ile uyumlu, teal’den ayrışır) */
.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"] {
    border-color: rgba(52, 211, 153, 0.22);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 14px rgba(52, 211, 153, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"]:hover {
    background: linear-gradient(165deg,
            rgba(52, 211, 153, 0.1) 0%,
            rgba(16, 185, 129, 0.12) 100%);
    border-color: rgba(52, 211, 153, 0.4);
    color: #ecfdf5;
}

.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"].active {
    background: linear-gradient(165deg,
            rgba(52, 211, 153, 0.14) 0%,
            rgba(16, 185, 129, 0.18) 100%);
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(52, 211, 153, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: #fff;
}

.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"].active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #059669, #34d399, #059669);
    box-shadow: 0 -1px 10px rgba(52, 211, 153, 0.32);
    border-radius: 0;
}

.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"] i {
    color: rgba(110, 231, 183, 0.9);
}

.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"]:hover i,
.code-editor--algo-tabs .editor-tab[data-target="dynamic-pane"].active i {
    color: #6ee7b7;
}

/* Mobil/dar ekran: editor-tabs-dropdown — sekme rozetleriyle aynı görsel dil (yalnızca .code-editor--algo-tabs) */
.code-editor--algo-tabs .editor-tabs-dropdown-item {
    white-space: normal;
    align-items: center;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item .editor-tab-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="pseudo-pane"] i {
    color: rgba(196, 181, 253, 0.9);
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="pseudo-pane"]:hover i,
.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="pseudo-pane"].active i {
    color: #c4b5fd;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="js-algo-pane"] i {
    color: rgba(251, 191, 36, 0.88);
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="js-algo-pane"]:hover i,
.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="js-algo-pane"].active i {
    color: #fbbf24;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="o-linear-pane"] i {
    color: rgba(94, 234, 212, 0.88);
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="o-linear-pane"]:hover i,
.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="o-linear-pane"].active i {
    color: #5eead4;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="o-quadratic-pane"] i {
    color: rgba(251, 146, 60, 0.88);
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="o-quadratic-pane"]:hover i,
.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="o-quadratic-pane"].active i {
    color: #fb923c;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="recursive-pane"] i {
    color: rgba(251, 182, 206, 0.9);
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="recursive-pane"]:hover i,
.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="recursive-pane"].active i {
    color: #f9a8d4;
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="dynamic-pane"] i {
    color: rgba(110, 231, 183, 0.9);
}

.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="dynamic-pane"]:hover i,
.code-editor--algo-tabs .editor-tabs-dropdown-item[data-target="dynamic-pane"].active i {
    color: #6ee7b7;
}

/* --- Büyüme eğrileri (SVG) --- */
.algo-complexity-chart {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.algo-complexity-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}

.algo-complexity-chart--wide svg {
    max-height: min(380px, 85vh);
    min-height: 240px;
}

.algo-complexity-chart--wide svg text {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.algo-complexity-chart-note {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.92);
    background: rgba(15, 23, 42, 0.45);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.algo-entry-diagram--complexity-wide {
    padding: 1.1rem 0.85rem 1.25rem;
}

.algo-complexity-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 1rem;
    margin-top: 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.algo-complexity-legend--wide {
    gap: 0.55rem 0.95rem;
    margin-top: 1rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.9rem;
}

.algo-complexity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(241, 245, 249, 0.95);
}

.algo-complexity-legend i {
    display: inline-block;
    vertical-align: middle;
    width: 1.35rem;
    height: 4px;
    border-radius: 2px;
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
}

.algo-complexity-legend .algo-complexity-legend-o1 {
    background: #22c55e;
}

.algo-complexity-legend .algo-complexity-legend-ologn {
    background: #a78bfa;
}

.algo-complexity-legend .algo-complexity-legend-on {
    background: #38bdf8;
}

.algo-complexity-legend .algo-complexity-legend-onlogn {
    background: #22d3ee;
}

.algo-complexity-legend .algo-complexity-legend-on2 {
    background: #f97316;
}

.algo-complexity-legend .algo-complexity-legend-o2n {
    background: #fb7185;
}

.algo-complexity-legend .algo-complexity-legend-onf {
    background: #e879f9;
}

.algo-complexity-legend-item--muted {
    font-weight: 500;
    color: rgba(148, 163, 184, 0.62);
    opacity: 0.82;
}

.algo-complexity-legend-item--muted i {
    opacity: 0.75;
}

.algo-complexity-legend-item--ref {
    font-weight: 600;
    color: rgba(186, 230, 253, 0.82);
    opacity: 0.9;
}

.algo-complexity-legend-item--ref i {
    opacity: 0.88;
}

.algo-complexity-legend-item--risk {
    font-weight: 700;
    color: rgba(255, 251, 235, 0.99);
    text-shadow: 0 0 14px rgba(251, 146, 60, 0.22);
}

.algo-complexity-legend-item--risk i {
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.45);
    opacity: 1;
}

.algo-complexity-legend-warn {
    margin: 0.65rem 0 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(254, 215, 170, 0.95);
    background: rgba(127, 29, 29, 0.22);
    border-radius: 8px;
    border: 1px solid rgba(251, 113, 133, 0.35);
}

.algo-complexity-legend-warn strong {
    color: rgba(254, 240, 220, 0.98);
    font-weight: 700;
}

.algo-complexity-legend-warn-icon {
    margin-right: 0.25rem;
}

.algo-complexity-chart-takeaway {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: center;
    color: rgba(226, 232, 240, 0.94);
    background: rgba(15, 23, 42, 0.55);
    border-radius: 8px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.algo-complexity-chart-takeaway strong {
    color: rgba(34, 211, 238, 0.95);
    font-weight: 700;
}

/* Karmaşıklık SVG eğrileri — stroke stilleri diagram.css’te (satır içi stil yok) */
.algo-complexity-chart--wide .algo-complexity-curve polyline {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.algo-complexity-curve--o1 polyline {
    stroke: #4ade80;
    stroke-width: 2.1;
    opacity: 0.42;
    stroke-dasharray: 5 8;
}

.algo-complexity-curve--ologn polyline {
    stroke: #a78bfa;
    stroke-width: 2.1;
    opacity: 0.4;
    stroke-dasharray: 10 7;
}

.algo-complexity-curve--on polyline {
    stroke: #0284c7;
    stroke-width: 3.2;
    opacity: 1;
}

.algo-complexity-curve--onlogn polyline {
    stroke: #22d3ee;
    stroke-width: 2.2;
    opacity: 0.46;
    stroke-dasharray: 4 8;
}

.algo-complexity-curve--on2 polyline {
    stroke: #ea580c;
    stroke-width: 3.45;
    opacity: 1;
}

.algo-complexity-curve--o2n polyline {
    stroke: #e11d48;
    stroke-width: 3.35;
    opacity: 1;
}

.algo-complexity-curve--onf polyline {
    stroke: #c026d3;
    stroke-width: 3.2;
    opacity: 0.96;
}

/* --- Strateji ağacı: ASCII görünüm + kartlar (satır içi stil yok) --- */
.algo-strategy-tree {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.95);
}

.algo-strategy-tree-root {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.18) 0%, rgba(15, 23, 42, 0.5) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.algo-strategy-tree-root::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.95);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
}

.algo-strategy-tree-visual-wrap {
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.algo-strategy-tree-visual {
    margin: 0;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.95);
    white-space: pre;
    letter-spacing: 0.01em;
}

.algo-strategy-tree-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.algo-strategy-tree-branch {
    margin: 0;
    padding: 0.65rem 0.7rem 0.6rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-left-width: 3px;
    border-left-style: solid;
}

.algo-strategy-tree-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.65rem;
    margin-bottom: 0.35rem;
}

.algo-strategy-tree-ans {
    font-size: 0.88rem;
    color: rgba(248, 250, 252, 0.99);
}

.algo-strategy-tree-ans strong {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.algo-strategy-tree-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
}

.algo-strategy-tree-branch--divide .algo-strategy-tree-tag {
    border-color: rgba(56, 189, 248, 0.35);
}

.algo-strategy-tree-branch--dp .algo-strategy-tree-tag {
    border-color: rgba(167, 139, 250, 0.4);
}

.algo-strategy-tree-branch--greedy .algo-strategy-tree-tag {
    border-color: rgba(251, 191, 36, 0.4);
}

.algo-strategy-tree-q {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(186, 230, 253, 0.88);
    line-height: 1.4;
}

.algo-strategy-tree-desc {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.92);
}

.algo-strategy-tree-wrong {
    margin: 0 0 0.45rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.48;
    color: rgba(254, 215, 170, 0.95);
    background: rgba(127, 29, 29, 0.2);
    border-radius: 6px;
    border-left: 3px solid rgba(251, 113, 133, 0.55);
}

.algo-strategy-tree-wrong-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(254, 202, 202, 0.95);
}

.algo-strategy-tree-avoid {
    margin: 0;
    padding: 0.45rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.48;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(30, 58, 95, 0.35);
    border-radius: 6px;
    border-left: 3px solid rgba(56, 189, 248, 0.45);
}

.algo-strategy-tree-avoid-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(147, 197, 253, 0.95);
}

.algo-strategy-tree-branch--divide {
    border-left-color: rgba(56, 189, 248, 0.75);
}

.algo-strategy-tree-branch--dp {
    border-left-color: rgba(167, 139, 250, 0.85);
}

.algo-strategy-tree-branch--greedy {
    border-left-color: rgba(251, 191, 36, 0.85);
}

@media (max-width: 640px) {
    .algo-strategy-tree-branch {
        padding: 0.55rem 0.6rem;
    }

    .algo-strategy-tree-visual {
        font-size: 0.7rem;
    }

    .algo-strategy-tree-desc,
    .algo-strategy-tree-wrong,
    .algo-strategy-tree-avoid {
        font-size: 0.76rem;
    }

    .algo-strategy-tree-card-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Hızlı özet kutusu --- */
.algo-entry-quick-summary {
    margin: 1.5rem 0 0.25rem;
    padding: 1rem 1.1rem 1rem 1.15rem;
    background: rgba(15, 23, 42, 0.45);
    border-radius: 10px;
    border-left: 4px solid rgba(6, 182, 212, 0.55);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.algo-entry-quick-summary--orange {
    border-left-color: rgba(251, 146, 60, 0.65);
}

.algo-entry-quick-summary--red {
    border-left-color: rgba(248, 113, 113, 0.65);
}

.algo-entry-quick-summary--cyan {
    border-left-color: rgba(34, 211, 238, 0.6);
}

.algo-entry-quick-summary--green {
    border-left-color: rgba(74, 222, 128, 0.6);
}

.algo-entry-quick-summary-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.9);
}

.algo-entry-quick-summary-title i {
    font-size: 0.9rem;
    opacity: 0.85;
}

.algo-entry-quick-summary ul {
    margin: 0;
    padding-left: 1.15rem;
}

.algo-entry-quick-summary li {
    margin: 0.35rem 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.95);
}

@media (max-width: 640px) {
    .algo-entry-diagram {
        padding: 1rem 0.75rem 1.15rem;
        margin: 1.35rem 0 1.5rem;
        border-radius: 12px;
    }

    .algo-thinking-flow-track {
        flex-direction: column;
        align-items: stretch;
    }

    .algo-thinking-flow-step {
        max-width: none;
        min-width: 0;
    }

    .algo-thinking-flow-arrow {
        transform: rotate(90deg);
        padding: 0.2rem 0;
    }

    .algo-black-box-row {
        flex-direction: column;
    }

    .algo-black-box-center {
        max-width: none;
        width: 100%;
    }

    .algo-black-box-arrow {
        transform: rotate(90deg);
    }

    .algo-complexity-chart svg {
        max-height: 180px;
    }

    .algo-complexity-chart--wide svg {
        max-height: min(300px, 72vh);
        min-height: 200px;
    }

    .algo-complexity-chart-note {
        font-size: 0.84rem;
        padding: 0.5rem 0.55rem;
    }

    .algo-complexity-legend--wide {
        font-size: 0.8rem;
        gap: 0.45rem 0.6rem;
    }

    .algo-complexity-legend {
        font-size: 0.82rem;
    }

    .algo-complexity-chart-takeaway {
        font-size: 0.82rem;
        padding: 0.55rem 0.6rem;
        text-align: left;
    }

    .algo-complexity-legend-warn {
        font-size: 0.78rem;
        padding: 0.5rem 0.55rem;
    }

    .algo-entry-quick-summary {
        padding: 0.85rem 0.9rem;
    }

    .algo-entry-quick-summary li {
        font-size: 0.84rem;
    }
}

/* --- matrix-linear-algebra-algorithms: notasyon sözlüğü (native details, ek JS yok) --- */
.matrix-notation-disclosure {
    margin: 1.35rem 0 1.85rem;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: linear-gradient(165deg,
            rgba(15, 23, 42, 0.96) 0%,
            rgba(30, 41, 59, 0.9) 48%,
            rgba(15, 23, 42, 0.95) 100%);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.matrix-notation-disclosure::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 80% at 100% 0%,
            rgba(56, 189, 248, 0.08) 0%,
            transparent 55%);
}

.matrix-notation-disclosure__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: clamp(0.85rem, 2.5vw, 1.1rem) clamp(1rem, 3vw, 1.25rem);
    margin: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.22s ease, border-color 0.22s ease;
    border-bottom: 1px solid transparent;
    position: relative;
    z-index: 1;
}

.matrix-notation-disclosure__summary::-webkit-details-marker {
    display: none;
}

.matrix-notation-disclosure__summary::marker {
    content: "";
}

.matrix-notation-disclosure__summary:hover {
    background: rgba(56, 189, 248, 0.06);
}

.matrix-notation-disclosure__summary:focus {
    outline: none;
}

.matrix-notation-disclosure__summary:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.55);
    outline-offset: 2px;
}

.matrix-notation-disclosure[open] .matrix-notation-disclosure__summary {
    border-bottom-color: rgba(56, 189, 248, 0.18);
    background: rgba(15, 23, 42, 0.35);
}

.matrix-notation-disclosure__summary-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.18) 0%, rgba(14, 165, 233, 0.08) 100%);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: rgba(125, 211, 252, 0.95);
    font-size: 1.05rem;
}

.matrix-notation-disclosure__summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.matrix-notation-disclosure__title {
    display: block;
    font-size: clamp(0.95rem, 2.8vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.98);
    line-height: 1.3;
}

.matrix-notation-disclosure__subtitle {
    display: block;
    font-size: clamp(0.8rem, 2.2vw, 0.88rem);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.95);
}

.matrix-notation-disclosure__chevron {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.15rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.45);
    position: relative;
    transition: transform 0.25s ease, background 0.2s ease;
}

.matrix-notation-disclosure__chevron::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid rgba(148, 163, 184, 0.9);
    border-bottom: 2px solid rgba(148, 163, 184, 0.9);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform 0.25s ease;
}

.matrix-notation-disclosure[open] .matrix-notation-disclosure__chevron::after {
    transform: translate(-50%, -25%) rotate(225deg);
}

.matrix-notation-disclosure__body {
    padding: clamp(0.85rem, 2.5vw, 1.15rem) clamp(1rem, 3vw, 1.35rem) clamp(1.1rem, 3vw, 1.35rem);
    position: relative;
    z-index: 1;
}

.matrix-notation-disclosure__rule {
    height: 1px;
    max-width: 58rem;
    margin: 0 0 1rem;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(56, 189, 248, 0.35) 20%,
            rgba(56, 189, 248, 0.55) 50%,
            rgba(56, 189, 248, 0.35) 80%,
            transparent 100%);
    border: none;
}

.matrix-notation-disclosure__note {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(71, 85, 105, 0.55);
    font-size: 0.92em;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.95);
    line-height: 1.55;
}

.matrix-notation-disclosure__lead {
    margin: 0 0 1rem;
    font-size: clamp(0.84rem, 2.4vw, 0.92rem);
    line-height: 1.65;
    color: rgba(203, 213, 225, 0.94);
    max-width: 58rem;
}

.matrix-notation-disclosure__lead strong {
    color: rgba(226, 232, 240, 0.98);
    font-weight: 600;
}

.matrix-notation-disclosure__list {
    margin: 0;
    max-width: 58rem;
}

.matrix-notation-disclosure__list dt {
    margin: 0.85rem 0 0.35rem;
    font-size: clamp(0.82rem, 2.3vw, 0.9rem);
    line-height: 1.4;
}

.matrix-notation-disclosure__list dt:first-child {
    margin-top: 0;
}

.matrix-notation-disclosure__term {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.88em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(125, 211, 252, 0.98);
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.22);
}

.matrix-notation-disclosure__list dd {
    margin: 0 0 0.65rem;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
    font-size: clamp(0.82rem, 2.3vw, 0.92rem);
    line-height: 1.65;
    color: rgba(203, 213, 225, 0.92);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.matrix-notation-disclosure__list dd:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.matrix-notation-disclosure__list dd strong {
    color: rgba(241, 245, 249, 0.96);
    font-weight: 600;
}

.matrix-notation-disclosure__list dd em {
    color: rgba(186, 198, 214, 0.95);
    font-style: italic;
}

@media (max-width: 640px) {
    .matrix-notation-disclosure {
        margin: 1.1rem 0 1.45rem;
        border-radius: 12px;
    }

    .matrix-notation-disclosure__summary {
        gap: 0.6rem;
        padding: 0.85rem 0.9rem;
    }

    .matrix-notation-disclosure__summary-icon {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 0.95rem;
    }

    .matrix-notation-disclosure__body {
        padding: 0.8rem 0.9rem 1rem;
    }
}

/* ============================================
   Matrix linear algebra — PLU öz akış
   (pages/algo/matrix-linear-algebra-algorithms.html)
   ============================================ */

.plu-flow-diagram {
    margin: 1.5rem 0 1.85rem;
    padding: 1rem 0.35rem 1.25rem;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.72) 0%, rgba(30, 41, 59, 0.5) 48%, rgba(15, 23, 42, 0.62) 100%);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Sabit üst sınır + içte EVET kolonu kaydırma (matrix PLU akışı) */
.plu-flow-diagram.plu-flow-scroll-root {
    /* Dış tavan: JS ile piksel atanmaz (sayfa konumuna göre 0px çökme olmasın) */
    --plu-flow-outer-max: min(92vh, 62rem);
    display: flex;
    flex-direction: column;
    max-height: var(--plu-flow-outer-max);
    /* İçerik görünür kalsın; flex çocuklar min-height:0 ile taşmayı EVET kolonuna verir */
    min-height: min(36vh, 28rem);
    overflow: hidden;
}

.plu-flow-scroll-root .plu-flow-header {
    flex: 0 0 auto;
}

.plu-flow-scroll-root .plu-flow-body {
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.plu-flow-scroll-root .plu-flow-spine {
    align-self: stretch;
}

.plu-flow-scroll-root .plu-flow-join {
    align-self: center;
}

.plu-flow-scroll-root .plu-flow-results-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.plu-flow-scroll-root .plu-flow-pivot-split {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.plu-flow-scroll-root .plu-flow-pivot-col {
    min-height: 0;
}

.plu-flow-scroll-root .plu-flow-pivot-col--yes {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.plu-flow-pivot-scroll {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.55) rgba(15, 23, 42, 0.55);
    padding-right: 0.2rem;
    margin-top: 0.15rem;
    outline: none;
}

.plu-flow-pivot-scroll:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.5);
    outline-offset: 2px;
}

.plu-flow-pivot-scroll::-webkit-scrollbar {
    width: 8px;
}

.plu-flow-pivot-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.55);
    border-radius: 8px;
}

.plu-flow-pivot-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.42), rgba(56, 189, 248, 0.38));
    border-radius: 8px;
    border: 2px solid rgba(15, 23, 42, 0.45);
}

.plu-flow-pivot-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.55), rgba(56, 189, 248, 0.48));
}

.plu-flow-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.plu-flow-header-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    font-size: 1rem;
    color: rgba(56, 189, 248, 0.98);
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.18) 0%, rgba(15, 23, 42, 0.55) 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.12);
}

.plu-flow-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.plu-flow-header-title {
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(248, 250, 252, 0.98);
    line-height: 1.3;
}

.plu-flow-header-sub {
    font-size: clamp(0.72rem, 2vw, 0.8rem);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.95);
}

.plu-flow-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem 0.55rem;
    width: 100%;
    max-width: min(100%, 76rem);
    margin: 0 auto;
}

.plu-flow-spine {
    flex: 0 1 16rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 17.5rem;
    min-width: 0;
}

.plu-flow-join {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    color: rgba(251, 146, 60, 0.92);
    font-size: 0.85rem;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.28);
    box-shadow: 0 0 16px rgba(251, 146, 60, 0.08);
}

.plu-flow-join-line {
    display: none;
}

.plu-flow-join-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.plu-flow-results-panel {
    flex: 2.25 1 38rem;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0.8rem 0.7rem 1rem;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.58) 0%, rgba(30, 41, 59, 0.35) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 14px rgba(0, 0, 0, 0.12);
}

.plu-flow-results-title {
    display: block;
    margin: 0 0 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.92);
}

.plu-flow-node {
    width: 100%;
    padding: 0.65rem 0.85rem 0.7rem;
    text-align: center;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Sol omurga: biraz daha geniş iç boşluk, metin hâlâ ortalı */
.plu-flow-spine .plu-flow-node {
    padding: 0.72rem 0.95rem 0.78rem;
}

/* Sağ panel: iç boşluk büyük; metin sola hizalı (uzun formüller için okunaklı) */
.plu-flow-results-panel .plu-flow-node {
    padding: 0.82rem 1.05rem 0.9rem;
    text-align: left;
}

.plu-flow-results-panel .plu-flow-node-label,
.plu-flow-results-panel .plu-flow-node-detail {
    text-align: left;
}

.plu-flow-results-panel .plu-flow-node-detail {
    line-height: 1.58;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: clamp(0.72rem, 1.95vw, 0.82rem);
}

.plu-flow-swap-hint {
    font-size: 0.92em;
    font-weight: 500;
    font-style: italic;
    color: rgba(148, 163, 184, 0.92);
}

.plu-flow-results-panel .plu-flow-caption {
    text-align: left;
}

.plu-flow-node-label {
    display: block;
    font-size: clamp(0.82rem, 2.2vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(241, 245, 249, 0.98);
    line-height: 1.35;
}

.plu-flow-node-detail {
    display: block;
    margin-top: 0.35rem;
    font-size: clamp(0.7rem, 1.9vw, 0.78rem);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(186, 198, 214, 0.94);
}

.plu-flow-node--start {
    border-color: rgba(52, 211, 153, 0.45);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.85) 0%, rgba(6, 78, 59, 0.22) 100%);
}

.plu-flow-node--start .plu-flow-node-label {
    color: rgba(167, 243, 208, 0.98);
}

.plu-flow-node--init {
    border-color: rgba(251, 146, 60, 0.38);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.8) 0%, rgba(124, 45, 18, 0.15) 100%);
}

.plu-flow-node--loop {
    border-color: rgba(251, 191, 36, 0.42);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.78) 0%, rgba(120, 53, 15, 0.14) 100%);
}

.plu-flow-node--decision {
    border-color: rgba(56, 189, 248, 0.55);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.82) 0%, rgba(12, 74, 110, 0.22) 100%);
    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.12),
        0 4px 18px rgba(56, 189, 248, 0.12);
}

.plu-flow-node--decision .plu-flow-node-label {
    color: rgba(125, 211, 252, 0.98);
}

.plu-flow-node--error {
    border-color: rgba(248, 113, 113, 0.5);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.75) 0%, rgba(127, 29, 29, 0.2) 100%);
}

.plu-flow-node--error .plu-flow-node-label {
    color: rgba(254, 202, 202, 0.96);
}

.plu-flow-node--ok {
    border-color: rgba(52, 211, 153, 0.35);
}

.plu-flow-node--inner-loop {
    border-color: rgba(251, 191, 36, 0.42);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.78) 0%, rgba(120, 53, 15, 0.12) 100%);
}

.plu-flow-node--halt {
    border-color: rgba(248, 113, 113, 0.55);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.82) 0%, rgba(69, 10, 10, 0.35) 100%);
}

.plu-flow-node--halt .plu-flow-node-label {
    color: rgba(254, 202, 202, 0.98);
    letter-spacing: 0.12em;
}

.plu-flow-node--output {
    border-color: rgba(56, 189, 248, 0.4);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.82) 0%, rgba(12, 74, 110, 0.18) 100%);
}

.plu-flow-node--output .plu-flow-node-label {
    color: rgba(125, 211, 252, 0.98);
}

.plu-flow-split-caption {
    margin: 0 0 0.5rem;
    padding: 0 0.15rem;
    width: 100%;
    text-align: center;
    font-size: clamp(0.68rem, 1.85vw, 0.76rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(148, 163, 184, 0.95);
    line-height: 1.45;
}

.plu-flow-em-no {
    color: rgba(252, 165, 165, 0.98);
}

.plu-flow-em-yes {
    color: rgba(167, 243, 208, 0.98);
}

/* HAYIR / EVET kolonları aynı genişlik — içteki kutular (Hata ↔ Satır takası) hizalı */
/* HAYIR biraz dar; EVET kolonu daha geniş (okunabilirlik) */
.plu-flow-pivot-split {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 0.65rem 0.7rem;
    width: 100%;
    align-items: stretch;
    margin-top: 0.15rem;
}

.plu-flow-pivot-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
}

.plu-flow-pivot-col--no {
    padding: 0.5rem 0.52rem 0.62rem;
    border-radius: 12px;
    background: rgba(127, 29, 29, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.22);
    min-height: 100%;
    height: auto;
}

.plu-flow-pivot-col--yes {
    padding: 0.5rem 0.52rem 0.62rem;
    border-radius: 12px;
    background: rgba(6, 78, 59, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.22);
}

.plu-flow-pivot-col--no>.plu-flow-node,
.plu-flow-pivot-col--yes>.plu-flow-node {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* HAYIR sütunu: EVET ile aynı yükseklikte kalan alanı bilgi kartıyla doldur */
.plu-flow-deadend {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 0.35rem;
}

.plu-flow-deadend__card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.65rem 0.7rem 0.72rem;
    border-radius: 11px;
    text-align: left;
    border: 1px dashed rgba(248, 113, 113, 0.45);
    background:
        repeating-linear-gradient(-32deg,
            transparent,
            transparent 6px,
            rgba(248, 113, 113, 0.04) 6px,
            rgba(248, 113, 113, 0.04) 7px),
        linear-gradient(165deg, rgba(69, 10, 10, 0.42) 0%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.plu-flow-deadend__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.plu-flow-deadend__icons {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: rgba(252, 165, 165, 0.88);
}

.plu-flow-deadend__tag {
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(254, 202, 202, 0.95);
    background: rgba(127, 29, 29, 0.45);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.plu-flow-deadend__lead {
    margin: 0;
    font-size: clamp(0.68rem, 1.85vw, 0.78rem);
    font-weight: 500;
    line-height: 1.58;
    color: rgba(226, 232, 240, 0.94);
}

.plu-flow-deadend__lead strong {
    color: rgba(254, 202, 202, 0.98);
    font-weight: 600;
}

.plu-flow-deadend__list {
    margin: 0;
    padding: 0 0 0 1rem;
    font-size: clamp(0.65rem, 1.75vw, 0.74rem);
    line-height: 1.55;
    color: rgba(186, 198, 214, 0.94);
}

.plu-flow-deadend__list li {
    margin: 0;
}

.plu-flow-deadend__list strong {
    color: rgba(203, 213, 225, 0.96);
    font-weight: 600;
}

.plu-flow-branch-tag--no {
    color: rgba(252, 165, 165, 0.95);
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.plu-flow-branch-tag--yes {
    color: rgba(167, 243, 208, 0.96);
    background: rgba(6, 78, 59, 0.35);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.plu-flow-caption {
    margin: 0.15rem 0 0;
    padding: 0.55rem 0.85rem;
    font-size: clamp(0.65rem, 1.8vw, 0.74rem);
    font-weight: 500;
    line-height: 1.5;
    font-style: italic;
    color: rgba(148, 163, 184, 0.95);
    background: rgba(15, 23, 42, 0.4);
    border: 1px dashed rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    text-align: center;
}

.plu-flow-node--end {
    border-color: rgba(52, 211, 153, 0.48);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.85) 0%, rgba(6, 78, 59, 0.2) 100%);
}

.plu-flow-node--end .plu-flow-node-label {
    color: rgba(167, 243, 208, 0.98);
}

.plu-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0;
    color: rgba(251, 146, 60, 0.72);
    font-size: 0.88rem;
}

.plu-flow-arrow--merge {
    padding: 0.5rem 0 0.4rem;
}

.plu-flow-arrow--in-branch {
    padding: 0.3rem 0;
    font-size: 0.78rem;
    color: rgba(52, 211, 153, 0.65);
}

.plu-flow-branch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
    width: 100%;
    max-width: 100%;
    margin-top: 0.15rem;
}

.plu-flow-branch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
}

.plu-flow-branch-tag {
    align-self: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plu-flow-branch--no .plu-flow-branch-tag {
    color: rgba(252, 165, 165, 0.95);
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.plu-flow-branch--yes .plu-flow-branch-tag {
    color: rgba(167, 243, 208, 0.96);
    background: rgba(6, 78, 59, 0.35);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.plu-flow-branch .plu-flow-node {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .plu-flow-body {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .plu-flow-spine {
        max-width: none;
        flex: 1 1 auto;
    }

    .plu-flow-join {
        align-self: center;
        margin-top: 0;
    }

    .plu-flow-join-icon i {
        transform: rotate(90deg);
    }

    /* Mobil: sabit tavan / iç scroll yok; sayfa ile doğal akış, sütunlar zaten alt alta */
    .plu-flow-diagram.plu-flow-scroll-root {
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    .plu-flow-scroll-root .plu-flow-body {
        max-height: none;
        overflow: visible;
    }

    .plu-flow-scroll-root .plu-flow-results-panel {
        overflow: visible;
    }

    .plu-flow-scroll-root .plu-flow-pivot-split {
        overflow: visible;
    }

    .plu-flow-scroll-root .plu-flow-pivot-col--yes {
        overflow: visible;
    }

    .plu-flow-scroll-root .plu-flow-pivot-scroll {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        scrollbar-gutter: auto;
        padding-right: 0;
    }
}

@media (max-width: 560px) {
    .plu-flow-diagram {
        padding: 0.9rem 0.4rem 1.1rem;
        border-radius: 14px;
    }

    .plu-flow-header {
        gap: 0.65rem;
        margin-bottom: 0.95rem;
    }

    .plu-flow-header-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.92rem;
    }

    .plu-flow-branch-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .plu-flow-pivot-split {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .plu-flow-pivot-col--no {
        order: 1;
    }

    .plu-flow-pivot-col--yes {
        order: 2;
    }

    .plu-flow-deadend__card {
        padding: 0.55rem 0.6rem 0.65rem;
    }
}

/* ============================================
   Pseudo-elements sayfası — premium diyagramlar
   (pseudo-elements.html)
   ============================================ */

.pe-diag {
    margin: 2.25rem 0;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(145deg, rgba(22, 28, 42, 0.98), rgba(26, 32, 48, 0.95));
    border: 1px solid rgba(45, 152, 218, 0.22);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    position: relative;
    overflow: hidden;
}

.pe-diag::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 10% -20%, rgba(45, 152, 218, 0.12), transparent 55%);
    pointer-events: none;
}

.pe-diag>* {
    position: relative;
    z-index: 1;
}

.pe-diag-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(160, 174, 192, 0.95);
    margin-bottom: 0.65rem;
    font-weight: 600;
}

.pe-diag-title-inline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(45, 152, 218, 0.18);
}

.pe-diag-title-inline i {
    font-size: 1.35rem;
    color: #5dade2;
}

.pe-diag-title-inline span {
    font-size: 1.05rem;
    font-weight: 650;
    color: #f1f5f9;
}

.pe-diag-foot {
    margin-top: 1.15rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(45, 152, 218, 0.15);
    font-size: 0.82rem;
    color: #a0aec0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.45;
}

.pe-diag-foot i {
    color: #f6c85f;
    margin-top: 0.1rem;
}

/* --- 1. Aile haritası (akış + renk kodları) --- */
.pe-family-map-lead {
    margin: 0 0 1.15rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #94a3b8;
    max-width: 52rem;
}

.pe-family-flow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 0 -0.25rem;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.35rem 0.25rem 0.6rem;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.pe-family-card {
    position: relative;
    flex: 1 1 0;
    min-width: 8.5rem;
    max-width: 11.5rem;
    background: rgba(15, 23, 42, 0.72);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.18);
    border-left-width: 4px;
    border-left-color: rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 0.85rem 0.75rem 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.pe-family-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.pe-family-card--content {
    --pe-family-accent: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #34d399;
    background: linear-gradient(160deg, rgba(6, 78, 59, 0.35), rgba(15, 23, 42, 0.85));
}

.pe-family-card--text {
    --pe-family-accent: #818cf8;
    border-color: rgba(129, 140, 248, 0.38);
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #818cf8;
    background: linear-gradient(160deg, rgba(49, 46, 129, 0.35), rgba(15, 23, 42, 0.85));
}

.pe-family-card--backdrop {
    --pe-family-accent: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #fbbf24;
    background: linear-gradient(160deg, rgba(120, 80, 20, 0.28), rgba(15, 23, 42, 0.88));
}

.pe-family-card--media {
    --pe-family-accent: #f472b6;
    border-color: rgba(244, 114, 182, 0.38);
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #f472b6;
    background: linear-gradient(160deg, rgba(131, 24, 67, 0.25), rgba(15, 23, 42, 0.88));
}

.pe-family-card--shadow {
    --pe-family-accent: #a78bfa;
    border-color: rgba(167, 139, 250, 0.4);
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #a78bfa;
    background: linear-gradient(160deg, rgba(76, 29, 149, 0.32), rgba(15, 23, 42, 0.88));
}

.pe-family-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding-left: 0.15rem;
}

.pe-family-step {
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    background: var(--pe-family-accent, #5dade2);
    border-radius: 10px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pe-family-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.pe-family-card-head i {
    font-size: 0.95rem;
    color: var(--pe-family-accent, #7dd3fc);
    opacity: 0.95;
}

.pe-family-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.25;
}

.pe-family-card-hint {
    margin: 0 0 0.55rem;
    padding-left: 0.15rem;
    font-size: 0.68rem;
    line-height: 1.35;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pe-family-tags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.pe-family-tag {
    display: block;
    font-size: 0.72rem;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    color: #e2e8f0;
    padding: 0.32rem 0.45rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pe-family-card--content .pe-family-tag {
    border-color: rgba(52, 211, 153, 0.32);
}

.pe-family-card--text .pe-family-tag {
    border-color: rgba(129, 140, 248, 0.32);
}

.pe-family-card--backdrop .pe-family-tag {
    border-color: rgba(251, 191, 36, 0.35);
}

.pe-family-card--media .pe-family-tag {
    border-color: rgba(244, 114, 182, 0.32);
}

.pe-family-card--shadow .pe-family-tag {
    border-color: rgba(167, 139, 250, 0.35);
}

.pe-family-connector {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 1.75rem;
    max-width: 2.75rem;
    padding: 0 0.15rem;
    align-self: center;
}

.pe-family-connector-line {
    display: block;
    flex: 1 1 auto;
    height: 2px;
    min-width: 0.5rem;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(45, 152, 218, 0.35), rgba(94, 234, 212, 0.55), rgba(45, 152, 218, 0.35), transparent);
    opacity: 0.9;
}

.pe-family-connector-chev {
    flex-shrink: 0;
    color: rgba(94, 234, 212, 0.85);
    font-size: 0.72rem;
}

.pe-family-connector-chev i {
    filter: drop-shadow(0 0 8px rgba(45, 152, 218, 0.45));
}

.pe-family-legend {
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(45, 152, 218, 0.15);
    background: rgba(15, 23, 42, 0.45);
}

.pe-family-legend-title {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 0.55rem;
}

.pe-family-legend-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    align-items: center;
}

.pe-family-legend-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: #cbd5e1;
}

.pe-family-legend-swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.pe-family-legend-swatch--content {
    background: #34d399;
}

.pe-family-legend-swatch--text {
    background: #818cf8;
}

.pe-family-legend-swatch--backdrop {
    background: #fbbf24;
}

.pe-family-legend-swatch--media {
    background: #f472b6;
}

.pe-family-legend-swatch--shadow {
    background: #a78bfa;
}

.pe-family-legend-hex {
    font-family: ui-monospace, monospace;
    font-size: 0.68rem;
    color: #64748b;
    margin-left: 0.15rem;
}

.pe-family-vendor {
    margin-top: 0.95rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px dashed rgba(246, 200, 95, 0.45);
    background: rgba(120, 80, 20, 0.12);
    font-size: 0.8rem;
    color: #fde68a;
    line-height: 1.45;
}

.pe-family-vendor strong {
    color: #fef3c7;
}

@media (max-width: 1100px) {
    .pe-family-flow {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: visible;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }

    .pe-family-card {
        max-width: none;
        min-width: 0;
    }

    .pe-family-connector {
        flex-direction: column;
        min-width: 0;
        max-width: none;
        min-height: 1.35rem;
        padding: 0.1rem 0;
        width: 100%;
    }

    .pe-family-connector-line {
        width: 2px;
        height: 1rem;
        min-width: 0;
        flex: 0 0 auto;
        background: linear-gradient(180deg, transparent, rgba(45, 152, 218, 0.4), rgba(94, 234, 212, 0.55), rgba(45, 152, 218, 0.4), transparent);
    }

    .pe-family-connector-chev i {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .pe-family-legend-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

/* --- 2. ::before / ::after — DOM → layout (üretilen kutular) --- */
.pe-ba-lead {
    margin: 0 0 1rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #94a3b8;
}

.pe-ba-render-def {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(45, 152, 218, 0.28);
    background: rgba(15, 23, 42, 0.55);
}

.pe-ba-render-def-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(45, 152, 218, 0.2);
    color: #5dade2;
}

.pe-ba-render-def-body {
    min-width: 0;
}

.pe-ba-render-def-title {
    display: block;
    font-size: 0.82rem;
    color: #e2e8f0;
    margin-bottom: 0.35rem;
}

.pe-ba-render-def-body p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #94a3b8;
}

.pe-ba-scope-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin-bottom: 1.1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.45);
    border: 1px dashed rgba(148, 163, 184, 0.25);
}

.pe-ba-scope-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.pe-ba-chip {
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgba(6, 78, 59, 0.4);
    border: 1px solid rgba(45, 212, 191, 0.35);
    color: #99f6e4;
}

.pe-ba-scope-rest {
    flex: 1 1 200px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #94a3b8;
}

.pe-ba-scope-rest code {
    font-size: 0.7rem;
    color: #7dd3fc;
}

.pe-ba-flow {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pe-ba-panel {
    flex: 1 1 220px;
    max-width: 320px;
    background: rgba(15, 23, 42, 0.65);
    border-radius: 12px;
    border: 1px solid rgba(45, 152, 218, 0.2);
    padding: 1rem 1.1rem;
}

.pe-ba-panel-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.65rem;
    font-weight: 600;
}

.pe-ba-panel-foot {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #64748b;
}

.pe-ba-panel-foot code {
    font-size: 0.68rem;
    color: #7dd3fc;
}

.pe-ba-dom-box {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: #bae6fd;
    line-height: 1.5;
}

.pe-ba-dom-box .pe-ba-tag {
    color: #7dd3fc;
}

.pe-ba-arrow-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 72px;
}

.pe-ba-arrow-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pe-ba-arrow-icon {
    width: 2px;
    height: 48px;
    background: linear-gradient(#2d98da, #5dade2);
    border-radius: 2px;
    position: relative;
}

.pe-ba-arrow-icon::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #5dade2;
}

.pe-ba-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pe-ba-pseudo {
    font-size: 0.72rem;
    font-family: ui-monospace, monospace;
    color: #a5f3fc;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: rgba(6, 78, 59, 0.35);
    border: 1px solid rgba(45, 212, 191, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    text-align: center;
}

.pe-ba-pseudo-label {
    font-size: 0.58rem;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(165, 243, 252, 0.65);
    font-weight: 600;
}

.pe-ba-content {
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(99, 102, 241, 0.35);
    font-size: 0.82rem;
    color: #e2e8f0;
    text-align: center;
}

.pe-ba-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.55rem;
    margin-top: 1.1rem;
}

.pe-ba-legend-item {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.35;
}

.pe-ba-legend-item i {
    color: #38bdf8;
    margin-top: 0.12rem;
}

.pe-ba-boxmodel {
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(45, 152, 218, 0.18);
}

.pe-ba-boxmodel-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.pe-ba-boxmodel-head i {
    color: #5dade2;
    font-size: 1rem;
}

.pe-ba-boxmodel-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
}

.pe-ba-boxmodel-lead {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #94a3b8;
}

.pe-ba-boxmodel-lead code {
    font-size: 0.72rem;
    color: #7dd3fc;
}

.pe-ba-boxmodel-visual {
    max-width: 28rem;
    margin: 0 auto;
}

.pe-ba-bm-layer {
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    position: relative;
}

.pe-ba-bm-tag {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.4rem;
    opacity: 0.92;
}

.pe-ba-bm-margin {
    background: rgba(251, 191, 36, 0.12);
    border: 2px dashed rgba(251, 191, 36, 0.45);
}

.pe-ba-bm-margin>.pe-ba-bm-tag {
    color: #fcd34d;
}

.pe-ba-bm-border {
    background: rgba(248, 113, 113, 0.1);
    border: 3px solid rgba(248, 113, 113, 0.55);
}

.pe-ba-bm-border>.pe-ba-bm-tag {
    color: #fca5a5;
}

.pe-ba-bm-padding {
    background: rgba(96, 165, 250, 0.12);
    border: 2px solid rgba(96, 165, 250, 0.45);
}

.pe-ba-bm-padding>.pe-ba-bm-tag {
    color: #93c5fd;
}

.pe-ba-bm-content {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(167, 139, 250, 0.45);
}

.pe-ba-bm-content>.pe-ba-bm-tag {
    color: #c4b5fd;
    margin-bottom: 0.5rem;
}

.pe-ba-bm-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.35rem;
}

.pe-ba-bm-cell {
    flex: 1 1 70px;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.65rem;
    font-family: ui-monospace, monospace;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    font-weight: 600;
}

.pe-ba-bm-cell--pseudo {
    background: rgba(6, 78, 59, 0.45);
    border: 1px solid rgba(45, 212, 191, 0.35);
    color: #99f6e4;
}

.pe-ba-bm-cell--real {
    flex: 1.4 1 90px;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #e2e8f0;
}

/* --- 3. ::backdrop Top Layer (görsel şema) --- */
.pe-backdrop-notes--top {
    margin-bottom: 1.1rem;
}

.pe-backdrop-notes {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pe-backdrop-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #cbd5e1;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(45, 152, 218, 0.15);
}

.pe-backdrop-note i {
    color: #5dade2;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.pe-backdrop-note--warn {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(120, 80, 20, 0.12);
}

.pe-backdrop-note--warn i {
    color: #fcd34d;
}

.pe-backdrop-note code {
    font-size: 0.72rem;
    color: #7dd3fc;
}

.pe-backdrop-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 1rem 1.25rem;
}

.pe-backdrop-tl-panel {
    flex: 1 1 260px;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pe-backdrop-tl-heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pe-backdrop-tl-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: #fcd34d;
}

.pe-backdrop-tl-heading-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fffbeb;
}

.pe-backdrop-scene {
    border-radius: 14px;
    border: 2px solid rgba(251, 191, 36, 0.5);
    background: linear-gradient(180deg, rgba(30, 27, 20, 0.95), rgba(15, 23, 42, 0.98));
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pe-backdrop-scene-dialog {
    position: relative;
    z-index: 2;
    margin: 0.85rem 0.85rem 0.5rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pe-backdrop-scene-backdrop {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0.85rem 0.9rem 1rem;
    min-height: 4.5rem;
    background: repeating-linear-gradient(-12deg,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45) 8px,
            rgba(15, 23, 42, 0.65) 8px,
            rgba(15, 23, 42, 0.65) 16px);
    border-top: 2px dashed rgba(251, 191, 36, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
}

.pe-backdrop-scene-label {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pe-backdrop-scene-label--front {
    color: #93c5fd;
}

.pe-backdrop-scene-label--back {
    color: #fde68a;
}

.pe-backdrop-scene-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f1f5f9;
    font-family: ui-monospace, monospace;
}

.pe-backdrop-scene-bt {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fef3c7;
    font-family: ui-monospace, monospace;
}

.pe-backdrop-scene-bt code {
    font-size: inherit;
    color: #fde047;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
}

.pe-backdrop-scene-hint {
    font-size: 0.68rem;
    line-height: 1.4;
    color: #94a3b8;
}

.pe-backdrop-scene-hint em {
    color: #cbd5e1;
    font-style: normal;
    font-weight: 600;
}

.pe-backdrop-tl-caption {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #94a3b8;
}

.pe-backdrop-tl-caption code {
    font-size: 0.7rem;
    color: #7dd3fc;
}

.pe-backdrop-bridge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 3.5rem;
    align-self: center;
}

.pe-backdrop-bridge-line {
    width: 2px;
    flex: 1 1 1.25rem;
    min-height: 1.25rem;
    max-height: 2.5rem;
    background: linear-gradient(180deg, transparent, rgba(94, 234, 212, 0.5), rgba(45, 152, 218, 0.65), transparent);
    border-radius: 2px;
}

.pe-backdrop-bridge-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5eead4;
    text-align: center;
    line-height: 1.25;
}

.pe-backdrop-bridge-label small {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
}

.pe-backdrop-stack-wrap {
    flex: 1 1 240px;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
}

.pe-backdrop-stack {
    border-radius: 14px;
    border: 1px solid rgba(45, 152, 218, 0.2);
    padding: 1rem 1.1rem;
    background: rgba(15, 23, 42, 0.5);
    flex: 1 1 auto;
}

.pe-backdrop-stack-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.pe-backdrop-layer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-family: ui-monospace, monospace;
}

.pe-backdrop-layer:last-child {
    margin-bottom: 0;
}

.pe-backdrop-layer--9999 {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.pe-backdrop-layer--100 {
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #fed7aa;
}

.pe-backdrop-layer--10 {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.28);
    color: #fef08a;
}

.pe-backdrop-layer--1 {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.28);
    color: #bbf7d0;
}

.pe-backdrop-layer span:last-child {
    font-size: 0.68rem;
    color: rgba(226, 232, 240, 0.65);
    font-family: inherit;
}

/* --- 4. ::slotted vs ::part --- */
.pe-sp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pe-sp-col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pe-sp-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7dd3fc;
}

.pe-sp-box {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(99, 179, 237, 0.22);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    font-size: 0.78rem;
    color: #cbd5e1;
    line-height: 1.45;
}

.pe-sp-box code {
    font-size: 0.74rem;
    color: #a5f3fc;
}

.pe-sp-arrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: #64748b;
}

.pe-sp-arrow-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(45, 152, 218, 0.1), rgba(45, 152, 218, 0.55));
    border-radius: 2px;
}

.pe-sp-shadow {
    border-style: dashed;
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(46, 16, 101, 0.2);
}

.pe-sp-summary {
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(45, 152, 218, 0.15);
    font-size: 0.78rem;
    color: #cbd5e1;
    line-height: 1.5;
}

.pe-sp-summary strong {
    color: #e2e8f0;
}

.pe-sp-summary em {
    font-style: normal;
    font-weight: 600;
    color: #bae6fd;
}

.pe-sp-hint {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: #64748b;
}

.pe-sp-hint strong {
    color: #94a3b8;
}

.pe-sp-hint code {
    font-size: 0.66rem;
    color: #7dd3fc;
}

/* --- 5. Scrollbar anatomi --- */
.pe-sb-wrap {
    display: flex;
    gap: clamp(1rem, 3vw, 1.75rem);
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

.pe-sb-rail {
    display: flex;
    flex-direction: column;
    width: clamp(5.5rem, 15vw, 7.25rem);
    min-height: clamp(280px, 42vh, 360px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(45, 152, 218, 0.28);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.pe-sb-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.32rem 0.28rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.6);
    hyphens: auto;
    overflow-wrap: anywhere;
}

.pe-sb-part-label {
    font-size: clamp(0.62rem, 1.2vw, 0.76rem);
    line-height: 1.2;
    color: #e2e8f0;
    font-weight: 700;
}

.pe-sb-part-sel {
    line-height: 1.15;
    max-width: 100%;
}

.pe-sb-part-sel code {
    display: block;
    font-size: clamp(0.48rem, 1.05vw, 0.58rem);
    font-weight: 500;
    color: rgba(226, 232, 240, 0.82);
    word-break: break-all;
}

.pe-sb-part:last-child {
    border-bottom: none;
}

.pe-sb-part--btn {
    flex: 0 0 clamp(2rem, 4.5vw, 2.5rem);
    background: rgba(51, 65, 85, 0.85);
}

.pe-sb-part--track-start {
    flex: 1 1 24%;
    min-height: 2.75rem;
    background: rgba(30, 58, 95, 0.65);
}

.pe-sb-part--thumb {
    flex: 0 0 clamp(3.25rem, 6.5vw, 4rem);
    background: linear-gradient(180deg, #5dade2, #2d98da);
    color: #0f172a;
    font-weight: 700;
}

.pe-sb-part--thumb .pe-sb-part-label {
    color: #0f172a;
}

.pe-sb-part--thumb .pe-sb-part-sel code {
    color: rgba(15, 23, 42, 0.92);
    background: rgba(255, 255, 255, 0.22);
    padding: 0.08rem 0.2rem;
    border-radius: 4px;
}

.pe-sb-part--track-end {
    flex: 1 1 24%;
    min-height: 2.75rem;
    background: rgba(30, 58, 95, 0.45);
}

.pe-sb-part--corner {
    flex: 0 0 clamp(2rem, 4vw, 2.35rem);
    background: rgba(71, 85, 105, 0.75);
    font-size: clamp(0.62rem, 1.2vw, 0.74rem);
}

.pe-sb-notes {
    flex: 1 1 220px;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    justify-content: center;
}

.pe-sb-notes p {
    margin: 0;
    font-size: clamp(0.8rem, 1.6vw, 0.9rem);
    color: #94a3b8;
    line-height: 1.5;
}

.pe-sb-notes code {
    font-size: clamp(0.74rem, 1.45vw, 0.82rem);
    color: #7dd3fc;
}

@media (max-width: 768px) {
    .pe-diag {
        padding: 1.35rem 1rem;
        margin: 1.75rem 0;
    }

    .pe-ba-flow {
        flex-direction: column;
        align-items: stretch;
    }

    .pe-ba-arrow-col {
        flex-direction: row;
        min-width: 0;
        width: 100%;
        padding: 0.35rem 0;
    }

    .pe-ba-arrow-icon {
        width: 48px;
        height: 2px;
    }

    .pe-ba-arrow-icon::after {
        bottom: auto;
        left: auto;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 9px solid #5dade2;
        border-right: none;
    }

    .pe-ba-panel {
        max-width: none;
    }

    .pe-ba-render-def {
        flex-direction: column;
        align-items: stretch;
    }

    .pe-ba-render-def-icon {
        align-self: flex-start;
    }

    .pe-ba-boxmodel-visual {
        max-width: none;
    }

    .pe-ba-bm-flow {
        flex-direction: column;
    }

    .pe-ba-bm-cell {
        flex: 1 1 auto;
        min-height: 0;
    }

    .pe-backdrop-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .pe-backdrop-bridge {
        flex-direction: row;
        width: 100%;
        max-width: none;
        align-self: center;
        order: 2;
    }

    .pe-backdrop-tl-panel {
        order: 1;
    }

    .pe-backdrop-stack-wrap {
        order: 3;
        max-width: none;
    }

    .pe-backdrop-bridge-line {
        width: auto;
        flex: 1 1 2rem;
        min-height: 2px;
        height: 2px;
        max-height: none;
        background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.45), rgba(45, 152, 218, 0.6), transparent);
    }

    .pe-sp-grid {
        grid-template-columns: 1fr;
    }

    .pe-sb-wrap {
        flex-direction: column;
        align-items: center;
    }

    .pe-sb-rail {
        width: min(6.35rem, 92vw);
        min-height: min(320px, 52vh);
    }

    .pe-sb-notes {
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .pe-sb-rail {
        width: min(5.85rem, 94vw);
        min-height: 280px;
    }
}