/* 5GraphiTe ürün CSS'i — yalnız ÜRÜNE ÖZGÜ bileşenler.
   Tokenlar, fontlar, reset, gövde, nav, buton, kart: o/web /ds/ TEK OTORİTE
   (bu dosyanın eski 1-635 satırlık kopyası silindi — çakışma kaynağıydı). */

/* =============================================
   5GraphiTe-SPECIFIC BİLEŞENLER
   ============================================= */

/* Severity — PALETTE.md: cherry=CRITICAL, amber=HIGH, jasmine=MEDIUM, teal=LOW */
.severity-badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--br-zero);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}

.severity-CRITICAL { background: var(--sev-critical); color: var(--bg-deep); }
.severity-HIGH     { background: var(--sev-high);    color: var(--bg-deep); }
.severity-MEDIUM   { background: var(--sev-medium);   color: var(--bg-deep); }
.severity-LOW      { background: var(--sev-low);      color: var(--c-charcoal); }
.severity-INFO     { background: var(--sev-info);     color: var(--bg-deep); }

.severity-row td { border-left: var(--sp-1) solid var(--accent-border); }
.severity-row { cursor: pointer; }
.severity-row:hover td { background: var(--bg-mid); }
.severity-row--CRITICAL td { border-left-color: var(--sev-critical); }
.severity-row--HIGH td     { border-left-color: var(--sev-high); }
.severity-row--MEDIUM td   { border-left-color: var(--sev-medium); }
.severity-row--LOW td      { border-left-color: var(--sev-low); }
.severity-row--INFO td     { border-left-color: var(--sev-info); }

/* Mode badge — NSA=cherry dark, SA=cerulean */
.mode-badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--br-zero);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
}

.mode-badge--NSA { background: var(--c-xanadu); color: var(--bg-deep); }
.mode-badge--SA  { background: var(--c-olive-green); color: var(--bg-deep); }

/* Dashboard summary cards */
.summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--lw-xl), 1fr));
    gap: var(--gap);
    margin: var(--sp-6) 0;
}

.summary__card {
    padding: var(--sp-5);
    border: var(--border) solid var(--accent-border);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--an-speed), opacity var(--an-speed);
}

.summary__card:hover {
    border-color: var(--accent);
}

.summary__card.active {
    opacity: var(--op-full);
}

.summary__card.dimmed {
    opacity: var(--op-dim);
}

.summary__count {
    display: block;
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--text-bright);
}

.summary__label {
    display: block;
    font-size: var(--fs-label);
    color: var(--text-dim);
    margin-top: var(--sp-1);
}

.summary__card--CRITICAL { border-left: var(--sp-1) solid var(--sev-critical); }
.summary__card--HIGH     { border-left: var(--sp-1) solid var(--sev-high); }
.summary__card--MEDIUM   { border-left: var(--sp-1) solid var(--sev-medium); }
.summary__card--LOW      { border-left: var(--sp-1) solid var(--sev-low); }
.summary__card--INFO     { border-left: var(--sp-1) solid var(--sev-info); }

/* Threat table */
.threat-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gap) 0;
}

.threat-table th {
    text-align: left;
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-dark);
    color: var(--text-dim);
    font-family: var(--fn-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-mid);
    text-transform: uppercase;
}

.threat-table td {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: var(--border) solid var(--accent-border);
}

/* Quick links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--lw-xl), 1fr));
    gap: var(--gap);
    margin: var(--sp-6) 0;
}

.quick-links__card {
    display: block;
    padding: var(--sp-5);
    border: var(--border) solid var(--accent-border);
    transition: border-color var(--an-speed);
}

.quick-links__card:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.quick-links__card h3 {
    color: var(--text-bright);
    margin-bottom: var(--sp-1);
}

.quick-links__card p {
    color: var(--text-dim);
    font-size: var(--fs-label);
}

/* Mode toggle buttons */
.mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: var(--gap) 0;
}

.mode-toggle__btn {
    font-family: var(--fn-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-mid);
    padding: var(--sp-3) var(--sp-5);
    border: var(--border) solid var(--accent-border);
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: background var(--an-speed), color var(--an-speed), border-color var(--an-speed);
}

.mode-toggle__btn:hover {
    border-color: var(--accent);
    color: var(--accent-bright);
}

.mode-toggle__btn.active {
    background: var(--accent);
    color: var(--bg-deep);
    border-color: var(--accent);
}

.mode-toggle__btn--NSA.active { background: var(--c-xanadu); border-color: var(--c-xanadu); }
.mode-toggle__btn--SA.active  { background: var(--c-olive-green); border-color: var(--c-olive-green); }

/* Kill chain pipeline */
.chain {
    margin: var(--sp-6) 0;
}

.chain__header {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: var(--sp-5);
}

.chain__goal {
    color: var(--text-dim);
    font-size: var(--fs-label);
}

.chain__pipeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: var(--sp-5) 0;
}

.chain__stage {
    flex-shrink: 0;
    padding: var(--sp-5);
    background: var(--bg-dark);
    border: var(--border) solid var(--accent-border);
    min-width: var(--lw-lg);
    max-width: var(--lw-xl);
    text-align: center;
    border-top: var(--sp-1) solid var(--accent);
}

.chain__stage:nth-child(4n+1) { border-top-color: var(--sev-critical); }
.chain__stage:nth-child(4n+2) { border-top-color: var(--sev-high); }
.chain__stage:nth-child(4n+3) { border-top-color: var(--sev-medium); }
.chain__stage:nth-child(4n+4) { border-top-color: var(--sev-low); }

.chain__stage-num {
    font-family: var(--fn-mono);
    font-size: var(--fs-label);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
}

.chain__stage-name {
    font-weight: var(--fw-bold);
    color: var(--text-bright);
    margin: var(--sp-1) 0;
}

.chain__stage-tech {
    font-family: var(--fn-mono);
    font-size: var(--fs-label);
    color: var(--text-dim);
    display: block;
    margin-bottom: var(--sp-2);
}

.chain__stage-action {
    font-size: var(--fs-label);
    color: var(--text-dim);
    margin-bottom: var(--sp-2);
}

.chain__arrow {
    display: flex;
    align-items: center;
    padding: 0 var(--sp-2);
    font-size: var(--fs-h2);
    color: var(--text-dim);
    align-self: center;
}

/* Threat chip */
.chip {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    margin: var(--sp-1);
    border-radius: var(--br-zero);
    font-size: var(--fs-label);
    color: var(--text-light);
    background: var(--bg-mid);
    transition: background var(--an-speed);
}

.chip:hover { text-decoration: none; background: var(--accent-border); }
.chip--CRITICAL { border-left: var(--sp-1) solid var(--sev-critical); }
.chip--HIGH     { border-left: var(--sp-1) solid var(--sev-high); }
.chip--MEDIUM   { border-left: var(--sp-1) solid var(--sev-medium); }
.chip--LOW      { border-left: var(--sp-1) solid var(--sev-low); }
.chip--INFO     { border-left: var(--sp-1) solid var(--sev-info); }

/* Risk page */
.risk__summary {
    display: flex;
    gap: var(--gap);
    margin: var(--gap) 0;
}

.risk__summary-item {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--br-zero);
    font-weight: var(--fw-bold);
    font-size: var(--fs-label);
    cursor: pointer;
    transition: opacity var(--an-speed);
}

.risk__summary-item.active {
    outline: var(--sp-1) solid var(--text-bright);
    outline-offset: var(--sp-1);
}

.risk__summary-item.dimmed {
    opacity: var(--op-dim);
}

.risk__summary-item--CRITICAL { background: var(--sev-critical); color: var(--bg-deep); }
.risk__summary-item--HIGH     { background: var(--sev-high);   color: var(--bg-deep); }
.risk__summary-item--MEDIUM   { background: var(--sev-medium); color: var(--bg-deep); }
.risk__summary-item--LOW      { background: var(--sev-low);    color: var(--c-charcoal); }
.risk__summary-item--INFO     { background: var(--sev-info);   color: var(--bg-deep); }

.risk__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--gap);
}

.risk__table th,
.risk__table td {
    padding: var(--sp-2) var(--sp-2);
    text-align: left;
    border-bottom: var(--border) solid var(--accent-border);
}

.risk__table th {
    color: var(--text-dim);
    font-family: var(--fn-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
}

.risk__row--CRITICAL td { color: var(--sev-critical); }
.risk__row--HIGH td     { color: var(--sev-high); }
.risk__row--MEDIUM td   { color: var(--sev-medium); }
.risk__row--LOW td      { color: var(--sev-low); }
.risk__row--INFO td     { color: var(--sev-info); }

/* Sensitivity control */
.sensitivity {
    margin: var(--sp-6) 0;
    padding: var(--sp-5);
    background: var(--bg-dark);
    border: var(--border) solid var(--accent-border);
}

.sensitivity input[type="range"] {
    width: 100%;
    margin: var(--sp-2) 0;
    accent-color: var(--accent);
}

/* Mode comparison panel */
.mode-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    margin: var(--sp-6) 0;
}

.mode-panel__section {
    background: var(--bg-dark);
    padding: var(--sp-5);
    border: var(--border) solid var(--accent-border);
    cursor: pointer;
    position: relative;
    transition: border-color var(--an-speed);
}

.mode-panel__section:hover {
    border-color: var(--accent);
}

.mode-panel__dot {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: var(--sp-3);
    height: var(--sp-3);
    opacity: 0;
    transition: opacity var(--an-speed);
}

[data-mode="NSA"] .mode-panel__dot { background: var(--c-xanadu); }
[data-mode="SA"] .mode-panel__dot  { background: var(--c-olive-green); }

.mode-panel__section.active .mode-panel__dot {
    opacity: var(--op-full);
}

.mode-panel__desc {
    font-size: var(--fs-body);
    opacity: var(--op-mid);
    margin-top: var(--sp-4);
}

/* Threat detail */
.detail {
    padding: var(--sp-4) 0;
}

.detail__back {
    display: inline-block;
    margin-bottom: var(--sp-4);
    color: var(--text-dim);
}

.detail__header {
    margin-bottom: var(--sp-6);
}

.detail__header h1 {
    color: var(--text-bright);
    margin-bottom: var(--sp-2);
}

.detail__badges {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--lw-xl), 1fr));
    gap: var(--gap);
    margin: var(--sp-5) 0;
}

.detail__card {
    background: var(--bg-dark);
    padding: var(--sp-5);
    border: var(--border) solid var(--accent-border);
}

.detail__card h3 {
    margin-bottom: var(--sp-2);
    color: var(--text-dim);
    font-family: var(--fn-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-mid);
    text-transform: uppercase;
}

/* Risk card in detail */
.risk-card {
    margin: var(--sp-5) 0;
    background: var(--bg-dark);
    padding: var(--sp-5);
    border: var(--border) solid var(--accent-border);
}

.risk-card__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-bottom: var(--sp-5);
}

.risk-card__metric {
    text-align: center;
}

.risk-card__metric-label {
    display: block;
    color: var(--text-dim);
    font-size: var(--fs-label);
}

.risk-card__metric-value {
    display: block;
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--text-bright);
}

.sub-factor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.sub-factor h4 {
    color: var(--text-dim);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-label);
}

/* Mitigation card */
.mitigation {
    background: var(--bg-dark);
    padding: var(--sp-5);
    border-left: var(--sp-1) solid var(--accent);
    border-top: var(--border) solid var(--accent-border);
    border-right: var(--border) solid var(--accent-border);
    border-bottom: var(--border) solid var(--accent-border);
}

.mitigation__meta {
    display: flex;
    gap: var(--gap);
    margin-top: var(--sp-4);
    color: var(--text-dim);
    font-size: var(--fs-label);
}

.mitigation__ref {
    font-family: var(--fn-mono);
}

.mitigation__note {
    margin-top: var(--sp-4);
    color: var(--text-dim);
}

/* Tag */
.tag {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    background: var(--bg-mid);
    border-radius: var(--br-zero);
    font-size: var(--fs-label);
    color: var(--text-dim);
}

/* Export */
.export__mode-select {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-body);
}

.export__mode-select select {
    padding: var(--sp-2);
    border: var(--border) solid var(--accent-border);
    border-radius: var(--br-zero);
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: var(--fs-body);
}

.export__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--lw-xl), 1fr));
    gap: var(--gap);
    margin: var(--sp-6) 0;
}

.export__card {
    background: var(--bg-dark);
    padding: var(--sp-6);
    border: var(--border) solid var(--accent-border);
    text-align: center;
}

.export__card h3 {
    color: var(--text-bright);
    margin-bottom: var(--sp-2);
}

.export__card p {
    color: var(--text-dim);
    font-size: var(--fs-label);
    margin-bottom: var(--sp-4);
}

.export__actions {
    display: flex;
    gap: var(--gap);
    justify-content: center;
    flex-wrap: wrap;
}

/* Key insight */
.insight {
    background: var(--bg-dark);
    padding: var(--sp-5);
    border-left: var(--sp-1) solid var(--accent);
    margin: var(--sp-6) 0;
}

/* Utility — inline style yerine (CSP compliance K3) */
.section-subtitle {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-body);
}

.mt-half {
    margin-top: var(--sp-2);
}

.threat-table__empty {
    color: var(--text-dim);
}

/* Inline code */
code {
    background: var(--bg-dark);
    padding: var(--sp-1) var(--sp-1);
    border-radius: var(--br-zero);
    font-size: var(--fs-label);
    font-family: var(--fn-mono);
}

/* Responsive */
@media (max-width: var(--brk-m)) {
    .mode-panel { grid-template-columns: 1fr; }
    .risk-card__grid { grid-template-columns: 1fr; }
    .sub-factor { grid-template-columns: 1fr; }
    .chain__pipeline { flex-direction: column; }
    .chain__arrow { transform: rotate(90deg); }
}

/* CSP-safe helper classes (replace former inline styles) */
.text-center { text-align: center; }
.mt-3 { margin-top: var(--sp-3); }
.mt-5 { margin-top: var(--sp-5); }
.sub-factor--spaced { margin-top: var(--sp-5); }

/* Executive dashboard static bar widths */
.exec-gantt__bar--p1 { width: 33%; }
.exec-gantt__bar--p2 { width: 66%; left: 33%; }
.exec-gantt__bar--done { width: 100%; }