/* Copyright (c) 2026 Uğur Yıldız. All rights reserved.
   SPDX-License-Identifier: LicenseRef-per360-Proprietary */

:root {
	--p3-primary: #0f2a4a;
	--p3-accent: #0e8a7e;
	--p3-accent-ink: #0b6e64;
	--p3-accent-soft: #e3f2ef;
	--p3-blue: #1f5c8c;
	--p3-blue-soft: #eaf1f8;
	--p3-warn: #8a4b00;
	--p3-warn-soft: #fff4e5;
	--p3-bg: #f6f8fb;
	--p3-surface: #ffffff;
	--p3-line: #dce3ec;
	--p3-line-soft: #eef2f6;
	--p3-ink: #0f2a4a;
	--p3-ink-2: #4a5b70;
	--p3-star-off: #9aabbf;
	--p3-radius: 10px;
	--p3-font: var(--font-stack, "InterVariable", "Inter", system-ui, sans-serif);
	--p3-display: var(--p3-font);
}

.p3 {
	font-family: var(--p3-font);
	color: var(--p3-ink);
	background: var(--p3-bg);
	font-size: 14px;
	line-height: 1.5;
	padding-block: 24px 48px;
	min-height: 100vh;
}
.p3 * { box-sizing: border-box; }
.p3-wrap { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 20px; }
.p3 h1, .p3 h2, .p3 h3 { font-family: var(--p3-display); color: var(--p3-ink); margin: 0; letter-spacing: -0.01em; }
.p3 h1 { font-size: 26px; font-weight: 800; }
.p3 h2 { font-size: 18px; font-weight: 700; }
.p3 h3 { font-size: 15px; font-weight: 700; }
.p3-muted { color: var(--p3-ink-2); }
.p3-small { font-size: 13px; }
.p3-card { background: var(--p3-surface); border: 1px solid var(--p3-line); border-radius: var(--p3-radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.p3-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.p3-grow { flex: 1 1 auto; min-width: 0; }
.p3-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.p3-hero { background: var(--p3-primary); color: #fff; border-radius: var(--p3-radius); padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; }
.p3-hero h1 { color: #fff; }
.p3-hero .p3-muted { color: #c9d6e4; }

.p3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--p3-line); background: var(--p3-surface); color: var(--p3-ink); text-decoration: none; }
.p3-btn:hover { text-decoration: none; border-color: var(--p3-ink-2); }
.p3-btn-primary { background: var(--p3-primary); color: #fff; border-color: var(--p3-primary); }
.p3-btn-primary:hover { color: #fff; opacity: 0.92; }
.p3-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.p3 button:focus-visible, .p3 a:focus-visible, .p3 input:focus-visible, .p3 textarea:focus-visible, .p3 select:focus-visible { outline: 2px solid var(--p3-accent); outline-offset: 2px; }

.p3-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 13px; min-height: 36px; cursor: pointer; border: 1px solid var(--p3-line); background: var(--p3-surface); color: var(--p3-ink-2); font-family: inherit; }
.p3-chip[aria-pressed="true"] { border-color: var(--p3-accent); background: var(--p3-accent-soft); color: var(--p3-accent-ink); font-weight: 600; }
.p3-chip.p3-chip-dark[aria-pressed="true"] { border-color: var(--p3-primary); background: var(--p3-primary); color: #fff; }
.p3-badge { display: inline-block; font-size: 12px; border-radius: 999px; padding: 3px 10px; font-weight: 600; background: var(--p3-line-soft); color: var(--p3-ink-2); }
.p3-badge-ok { background: var(--p3-accent-soft); color: var(--p3-accent-ink); }
.p3-badge-warn { background: var(--p3-warn-soft); color: var(--p3-warn); }
.p3-badge-info { background: var(--p3-blue-soft); color: var(--p3-blue); }

.p3-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.p3-step { padding: 8px 14px; border-radius: 999px; background: var(--p3-surface); border: 1px solid var(--p3-line); color: var(--p3-ink-2); }
.p3-step.is-done { background: var(--p3-accent-soft); color: var(--p3-accent-ink); border-color: transparent; }
.p3-step.is-current { background: var(--p3-primary); color: #fff; border-color: var(--p3-primary); font-weight: 600; }

.p3-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.p3-side { flex: 1 1 240px; max-width: 290px; display: flex; flex-direction: column; gap: 8px; }
.p3-main { flex: 999 1 560px; min-width: 0; }
.p3-dept { text-align: left; border: 1px solid var(--p3-line); background: var(--p3-surface); border-radius: 8px; padding: 12px 14px; font: inherit; color: var(--p3-ink); cursor: pointer; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.p3-dept.is-active { border: 2px solid var(--p3-accent); }
.p3-progress { height: 4px; background: #e6ecf2; border-radius: 2px; overflow: hidden; }
.p3-progress > span { display: block; height: 4px; background: var(--p3-accent); }
.p3-note { background: var(--p3-blue-soft); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #24405f; }

.p3-person { padding: 16px 0; border-bottom: 1px solid var(--p3-line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.p3-person:last-child { border-bottom: 0; }
.p3-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e6ecf2; color: #24405f; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.p3-who { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
.p3-crit { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 3 1 460px; }
.p3-crit-label { font-size: 11px; color: var(--p3-ink-2); letter-spacing: 0.02em; }
.p3-stars { display: flex; }
.p3-star { background: none; border: 0; padding: 3px; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; }
.p3-star svg path { fill: none; stroke: var(--p3-star-off); stroke-width: 1.5; stroke-linejoin: round; }
.p3-star.is-on svg path { fill: var(--p3-accent); stroke: var(--p3-accent); }
.p3-legend { background: #f9fbfd; border-radius: 8px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 12px; color: var(--p3-ink-2); }
.p3-legend b { color: var(--p3-ink); }

.p3-input, .p3 textarea, .p3 select { font: inherit; border: 1px solid var(--p3-line); border-radius: 6px; padding: 10px 12px; color: var(--p3-ink); background: var(--p3-surface); min-height: 44px; width: 100%; }
.p3 textarea { min-height: 96px; resize: vertical; }
.p3-question { padding: 16px 0; border-bottom: 1px solid var(--p3-line-soft); display: flex; flex-direction: column; gap: 10px; }
.p3-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.p3-scale label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--p3-line); border-radius: 8px; padding: 8px 12px; cursor: pointer; min-height: 44px; }
.p3-scale input { accent-color: var(--p3-accent); width: 18px; height: 18px; margin: 0; }
.p3-scale label:has(input:checked) { border-color: var(--p3-accent); background: var(--p3-accent-soft); }

.p3-table-wrap { overflow-x: auto; }
.p3-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
.p3-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--p3-ink-2); padding: 8px; border-bottom: 1px solid var(--p3-line); }
.p3-table td { padding: 10px 8px; border-bottom: 1px solid var(--p3-line-soft); }
.p3-num { text-align: right; }
.p3-johari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p3-johari > div { border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.p3-mono { font-family: ui-monospace, monospace; }
.p3-empty { text-align: center; padding: 32px; color: var(--p3-ink-2); }
.p3-toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--p3-primary); color: #fff; padding: 12px 16px; border-radius: 8px; z-index: 1000; }
.p3-error { background: #fdecec; color: #8a1c1c; border-radius: 8px; padding: 12px 14px; }

@media (max-width: 640px) {
	.p3-johari { grid-template-columns: 1fr; }
	.p3-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.p3 * { transition: none !important; }
}
.p3-hero .p3-btn-primary { background: var(--p3-accent); border-color: var(--p3-accent); color: #fff; }
.p3-missing { outline: 2px solid #c0392b; outline-offset: 4px; border-radius: 6px; }
.p3-nav { max-width: 1180px; margin: 0 auto; padding: 12px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-family: var(--p3-font); }
.p3-card { min-width: 0; }
.p3-table th:first-child, .p3-table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
@media (max-width: 640px) {
	.p3-nav { flex-wrap: nowrap; overflow-x: auto; gap: 14px; white-space: nowrap; scrollbar-width: thin; }
	.p3-nav > span[style*="flex:1"] { display: none; }
}
/* Sağda gizli sütun varken kenarda gölge görünür; kaydırılabildiği anlaşılır. */
.p3-table-wrap { background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(15, 42, 74, .18), transparent) right / 12px 100% no-repeat scroll; }

/* ---------------------------------------------------------------- 360 raporu */
.p3r { display: flex; flex-direction: column; gap: 18px; color: var(--p3-ink, #0f2a4a); }
.p3r h2 { font-size: 17px; margin: 0; }
.p3r h3 { font-size: 14px; margin: 0 0 6px; color: var(--p3-ink-2, #4a5b70); font-weight: 600; }
.p3r-head { display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; padding: 26px 28px; border-radius: 14px; color: #fff;
	background: linear-gradient(135deg, var(--p3-primary, #0f2a4a) 0%, color-mix(in srgb, var(--p3-primary, #0f2a4a) 75%, var(--p3-accent, #0e8a7e)) 100%); }
.p3r-head h1 { color: #fff; margin: 4px 0 2px; font-size: 28px; }
.p3r-kicker { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.p3r-sub { color: rgba(255,255,255,.82); font-size: 14px; }
.p3r-score { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 16px; align-self: start; }
.p3r-score-num { font-size: 36px; font-weight: 800; font-family: var(--p3-font); line-height: 1; }
.p3r-score-label { font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.85); }
.p3r-score-label span { color: rgba(255,255,255,.6); }
.p3r-part { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p3r-part li { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); }
.p3r-part li.p3r-date { background: none; color: rgba(255,255,255,.7); }
.p3r-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.p3r-actions .p3-btn:not(.p3-btn-primary) { background: #fff; }
.p3r-actions .p3-btn-primary { background: var(--p3-accent, #0e8a7e); border-color: var(--p3-accent, #0e8a7e); color: #fff; }

.p3r-overview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.p3r-radar svg { display: block; margin: 0 auto; }
.p3r-summary { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
.p3r-lg-dash { width: 18px; height: 0; border-top: 2px dashed var(--p3-primary, #0f2a4a); }
.p3r-lg-prevline { width: 18px; height: 0; border-top: 2px dotted #9aa8b8; }
.p3r-sum { border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--p3-line, #dce3ec); background: #fff; }
.p3r-sum h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.p3r-sum-good { border-top: 4px solid #0e8a7e; } .p3r-sum-good h2 { color: #0b6e64; }
.p3r-sum-dev { border-top: 4px solid #c27c0e; } .p3r-sum-dev h2 { color: #8a5a00; }
.p3r-sum-gap { border-top: 4px solid #1f5c8c; } .p3r-sum-gap h2 { color: #1f5c8c; }
.p3r-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; border-bottom: 1px dashed var(--p3-line-soft, #edf1f6); padding-bottom: 4px; }
.p3r-sum-row:last-child { border-bottom: 0; }

.p3r-card { background: #fff; border: 1px solid var(--p3-line, #dce3ec); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.p3r-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.p3r-legend { display: flex; gap: 14px; font-size: 12px; color: var(--p3-ink-2, #4a5b70); flex-wrap: wrap; }
.p3r-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.p3r-lg-fill { width: 18px; height: 8px; border-radius: 4px; background: var(--p3-accent, #0e8a7e); }
.p3r-lg-self { width: 10px; height: 10px; transform: rotate(45deg); background: var(--p3-primary, #0f2a4a); }
.p3r-lg-prev { width: 3px; height: 12px; background: #9aa8b8; }

.p3r-comps { display: flex; flex-direction: column; gap: 10px; }
.p3r-comp, .p3r-item { display: grid; grid-template-columns: minmax(160px, 30%) 1fr 120px; gap: 12px; align-items: center; }
.p3r-comp-name { font-weight: 600; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.p3r-comp-val { display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; font-size: 13px; white-space: nowrap; }
.p3r-comp-val b { font-size: 15px; }
.p3r-bar { position: relative; height: 12px; border-radius: 6px; background: #edf1f6;
	background-image: linear-gradient(to right, transparent calc(25% - 1px), #fff calc(25% - 1px), #fff 25%, transparent 25%, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff 50%, transparent 50%, transparent calc(75% - 1px), #fff calc(75% - 1px), #fff 75%, transparent 75%); }
.p3r-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--p3-accent, #0e8a7e); }
.p3r-self { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); background: var(--p3-primary, #0f2a4a); border: 2px solid #fff; box-sizing: content-box; }
.p3r-prev { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: #9aa8b8; border-radius: 2px; }
.p3r-scale { display: grid; grid-template-columns: minmax(160px, 30%) 1fr 120px; gap: 12px; font-size: 11px; color: var(--p3-muted, #5b6b7f); }
.p3r-ticks { display: flex; justify-content: space-between; }
.p3r-delta { font-size: 12px; color: var(--p3-muted, #5b6b7f); }
.p3r-delta.up { color: #0b6e64; } .p3r-delta.down { color: #a33b2b; }

.p3r-tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef1f5; color: #4a5b70; }
.p3r-tag-warn { background: #fff1dc; color: #8a4b00; }
.p3r-tag-info { background: #e3eef9; color: #1f5c8c; }

.p3r-table { width: 100%; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; min-width: 520px; }
.p3r-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--p3-ink-2, #4a5b70); padding: 6px 8px; }
.p3r-table tbody th { font-size: 14px; font-weight: 600; color: var(--p3-ink, #0f2a4a); background: #fff; position: sticky; left: 0; }
.p3r-table td { text-align: center; padding: 8px; border-radius: 6px; font-size: 14px; background: #f5f7fa; }
.p3r-h1 { background: #f7d9d4 !important; } .p3r-h2 { background: #fbe9d0 !important; } .p3r-h3 { background: #f3f1e1 !important; }
.p3r-h4 { background: #dcefe9 !important; } .p3r-h5 { background: #bfe4da !important; }

.p3r-items .p3r-item-group + .p3r-item-group { border-top: 1px solid var(--p3-line-soft, #edf1f6); padding-top: 12px; }
.p3r-item { padding: 4px 0; }
.p3r-item-text { font-size: 13px; line-height: 1.4; }
.p3r-item .p3r-bar { height: 8px; }
.p3r-item .p3r-self { width: 8px; height: 8px; margin: -4px 0 0 -4px; }

.p3r-net { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.p3r-net-k { border: 1px solid var(--p3-line, #dce3ec); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; }
.p3r-net-k b { font-size: 20px; }
.p3r-facts { margin: 0; padding-left: 18px; font-size: 13px; color: var(--p3-ink-2, #4a5b70); display: flex; flex-direction: column; gap: 4px; }
.p3r-quote { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--p3-accent, #0e8a7e); background: #f7f9fb; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.5; }
.p3r-howto ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--p3-ink-2, #4a5b70); display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 760px) {
	.p3r-head { grid-template-columns: 1fr; padding: 20px; }
	.p3r-overview { grid-template-columns: 1fr; }
	.p3r-comp, .p3r-item, .p3r-scale { grid-template-columns: 1fr 96px; }
	.p3r-comp .p3r-bar, .p3r-item .p3r-bar { grid-column: 1 / -1; grid-row: 2; }
	.p3r-comp-name, .p3r-item-text { grid-column: 1; }
	.p3r-comp-val { grid-column: 2; grid-row: 1; }
	.p3r-scale { display: none; }
	.p3r-card { padding: 16px; }
}

@media print {
	@page { size: A4; margin: 12mm 11mm; }
	body, .p3 { background: #fff !important; min-height: 0; }
	.p3r-head, .p3r-fill, .p3r-self, .p3r-prev, .p3r-table td, .p3r-sum, .p3r-quote, .p3r-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.p3r-card, .p3r-sum, .p3r-item-group, .p3r-comp, .p3r-overview { break-inside: avoid; }
	.p3r-overview { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
	.p3r-items, .p3r-card:has(.p3r-quote) { break-inside: auto; }
	.p3r-head h1 { font-size: 24px; }
	.p3r-card { border-color: #d8dee6; }
}
.p3-nav > a:first-child { flex: none; }