/* Prizma LGS – shared components (buttons, cards, forms, solving screen, panel, report) */
:root {
	--prz-navy: #0F1B2D;
	--prz-blue: #3B5BA9;
	--prz-blue-soft: #EEF2FF;
	--prz-orange: #C2410C;
	--prz-orange-2: #E8590C;
	--prz-orange-soft: #FFF7ED;
	--prz-bg: #F7F7F4;
	--prz-line: #E5E5E0;
	--prz-line-2: #F1F1EC;
	--prz-muted: #475569;
	--prz-muted-2: #64748B;
	--prz-green: #15803D;
	--prz-green-soft: #DCFCE7;
	--prz-red: #B91C1C;
	--prz-red-soft: #FEE2E2;
	--prz-radius: 14px;
	--prz-head: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}

.prz-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px 72px; }
.prz-narrow { max-width: 560px; }
.prz-mid { max-width: 880px; }
.prz-card { background: #fff; border: 1px solid var(--prz-line); border-radius: 18px; padding: 26px; }
.prz-card + .prz-card { margin-top: 18px; }
.prz-center { text-align: center; }
.prz-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prz-justify-center { justify-content: center; }
.prz-between { justify-content: space-between; }
.prz-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.prz-grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.prz-stack > * + * { margin-top: 14px; }
.prz-muted { color: var(--prz-muted); }
.prz-small { font-size: 14px; }
.prz-h1 { font-family: var(--prz-head); font-weight: 800; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 10px; }
.prz-h2 { font-family: var(--prz-head); font-weight: 800; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 8px; }
.prz-h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.prz-eyebrow { font-size: 14px; font-weight: 600; color: var(--prz-orange); }

.prz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--prz-orange); color: #fff !important; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none !important; cursor: pointer; transition: transform .08s ease, background .15s ease; }
.prz-btn:hover { background: #9A3412; }
.prz-btn:active { transform: translateY(1px); }
.prz-btn:focus-visible, .prz-choice:focus-visible, .prz-input:focus-visible { outline: 3px solid #93B4FF; outline-offset: 2px; }
.prz-btn-blue { background: var(--prz-blue); }
.prz-btn-blue:hover { background: #2E4A8E; }
.prz-btn-ghost { background: #fff; color: var(--prz-navy) !important; border: 1.5px solid var(--prz-navy); }
.prz-btn-ghost:hover { background: #F1F5F9; }
.prz-btn-light { background: #fff; color: var(--prz-navy) !important; }
.prz-btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.prz-btn[disabled], .prz-btn.is-disabled { opacity: .5; pointer-events: none; }
.prz-link { color: var(--prz-blue); font-weight: 600; text-decoration: none; }
.prz-link:hover { text-decoration: underline; }

.prz-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #F1F5F9; color: var(--prz-muted); white-space: nowrap; }
.prz-chip-blue { background: var(--prz-blue-soft); color: var(--prz-blue); }
.prz-chip-orange { background: #FFEDD5; color: #7C2D12; }
.prz-chip-green, .prz-guclu { background: var(--prz-green-soft); color: #14532D; }
.prz-gelismeli { background: #FFEDD5; color: #7C2D12; }
.prz-eksik { background: var(--prz-red-soft); color: #7F1D1D; }

.prz-alert { padding: 14px 16px; border-radius: 12px; margin: 0 0 16px; font-size: 15px; }
.prz-alert-err { background: var(--prz-red-soft); color: #7F1D1D; }
.prz-alert-ok { background: var(--prz-green-soft); color: #14532D; }
.prz-alert-info { background: var(--prz-orange-soft); color: #7C2D12; }

/* forms */
.prz-form { display: flex; flex-direction: column; gap: 14px; }
.prz-field { display: flex; flex-direction: column; gap: 6px; }
.prz-field label { font-size: 14px; font-weight: 600; }
.prz-field small { color: var(--prz-muted-2); font-size: 13px; }
.prz-input { min-height: 48px; padding: 0 14px; border: 1.5px solid #CBD5E1; border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--prz-navy); width: 100%; box-sizing: border-box; }
.prz-input:focus { border-color: var(--prz-blue); outline: none; }
textarea.prz-input { padding: 12px 14px; min-height: 110px; resize: vertical; }
.prz-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.prz-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--prz-orange); }
.prz-hp { position: absolute; left: -9999px; }

/* progress bar */
.prz-bar { height: 8px; border-radius: 999px; background: #E2E8F0; overflow: hidden; flex: 1 1 auto; }
.prz-bar > span { display: block; height: 100%; background: var(--prz-blue); border-radius: 999px; }
.prz-bar.is-done > span { background: var(--prz-green); }

/* topic cards */
.prz-topic { background: #fff; border: 1px solid var(--prz-line); border-radius: var(--prz-radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; text-decoration: none !important; color: var(--prz-navy) !important; transition: box-shadow .15s ease, transform .15s ease; }
a.prz-topic:hover { box-shadow: 0 10px 30px rgba(15, 27, 45, .08); transform: translateY(-2px); }
.prz-topic.is-soon { background: #FAFAF7; border-style: dashed; border-color: #CBD5E1; }
.prz-topic-no { font-family: var(--prz-head); font-weight: 800; font-size: 15px; color: var(--prz-blue); }
.prz-topic-name { font-weight: 600; font-size: 17px; line-height: 1.3; min-height: 44px; }
.prz-topic-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--prz-line-2); padding-top: 12px; font-size: 14px; }

/* solving screen */
.prz-solve { max-width: 980px; margin: 0 auto; padding: 24px 24px 80px; }
.prz-solve-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.prz-crumb { font-size: 14px; color: var(--prz-muted-2); }
.prz-crumb a { color: var(--prz-muted-2); }
.prz-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.prz-dot { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; text-decoration: none !important; border: 1.5px solid #CBD5E1; color: var(--prz-navy) !important; background: #fff; }
.prz-dot.is-ok { background: var(--prz-green-soft); border-color: #86EFAC; color: #14532D !important; }
.prz-dot.is-no { background: var(--prz-red-soft); border-color: #FCA5A5; color: #7F1D1D !important; }
.prz-dot.is-cur { border-color: var(--prz-orange); box-shadow: 0 0 0 2px var(--prz-orange) inset; }
.prz-dot.is-lock { color: #94A3B8 !important; background: #F8FAFC; }
.prz-qcard { background: #fff; border: 1px solid var(--prz-line); border-radius: 18px; padding: 22px; position: relative; }
.prz-qimg { width: 100%; height: auto; display: block; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.prz-qtitle { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.prz-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.prz-choice { min-height: 60px; border-radius: 14px; border: 2px solid #CBD5E1; background: #fff; font: inherit; font-size: 22px; font-weight: 800; font-family: var(--prz-head); color: var(--prz-navy); cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .08s ease; }
.prz-choice:hover { border-color: var(--prz-blue); background: var(--prz-blue-soft); }
.prz-choice:active { transform: scale(.98); }
.prz-choice.is-picked { border-color: var(--prz-blue); background: var(--prz-blue-soft); }
.prz-choice.is-right { border-color: var(--prz-green); background: var(--prz-green-soft); color: #14532D; }
.prz-choice.is-wrong { border-color: var(--prz-red); background: var(--prz-red-soft); color: #7F1D1D; }
.prz-choices.is-locked .prz-choice { cursor: default; }
.prz-choices.is-locked .prz-choice:hover:not(.is-right):not(.is-wrong) { border-color: #CBD5E1; background: #fff; }
.prz-result { display: none; margin-top: 18px; padding: 16px 18px; border-radius: 14px; font-weight: 600; }
.prz-result.is-ok { display: block; background: var(--prz-green-soft); color: #14532D; }
.prz-result.is-no { display: block; background: var(--prz-red-soft); color: #7F1D1D; }
.prz-video { margin-top: 18px; display: none; }
.prz-video.is-on { display: block; }
.prz-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--prz-navy); border-radius: 14px; overflow: hidden; }
.prz-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prz-video-wait { display: flex; align-items: center; justify-content: center; height: 100%; color: #CBD5E1; font-size: 15px; text-align: center; padding: 20px; }
.prz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.prz-tools { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.prz-tools button { background: none; border: 0; padding: 6px 0; color: var(--prz-blue); font: inherit; font-weight: 600; cursor: pointer; }

/* saving overlay */
.prz-saving { position: absolute; inset: 0; background: rgba(255, 255, 255, .92); border-radius: 18px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 3; font-weight: 600; }
.prz-saving.is-on { display: flex; animation: przfade .2s ease; }
.prz-spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #E2E8F0; border-top-color: var(--prz-orange); animation: przspin .8s linear infinite; }
.prz-saving-bar { width: 180px; height: 6px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.prz-saving-bar span { display: block; height: 100%; width: 0; background: var(--prz-orange); animation: przfill 1.3s ease forwards; }
@keyframes przspin { to { transform: rotate(360deg); } }
@keyframes przfill { to { width: 100%; } }
@keyframes przfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes przpop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
.prz-pop { animation: przpop .35s ease; }

/* locked */
.prz-lock { text-align: center; padding: 40px 20px; }
.prz-lock-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--prz-orange-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px; }

/* modal */
.prz-modal { position: fixed; inset: 0; background: rgba(15, 27, 45, .55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.prz-modal.is-on { display: flex; }
.prz-modal-box { background: #fff; border-radius: 18px; padding: 24px; width: 100%; max-width: 480px; }

/* panel */
.prz-hello { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.prz-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.prz-stat { background: #fff; border: 1px solid var(--prz-line); border-radius: 14px; padding: 16px; }
.prz-stat span { display: block; font-size: 13px; color: var(--prz-muted); }
.prz-stat strong { font-family: var(--prz-head); font-size: 26px; font-weight: 800; }
.prz-group-list { display: flex; flex-direction: column; gap: 8px; }
.prz-group { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--prz-line-2); border-radius: 12px; text-decoration: none !important; color: var(--prz-navy) !important; }
.prz-group:hover { background: #FAFAF7; }
.prz-group b { min-width: 110px; }

/* kazanım bars */
.prz-kz { display: flex; flex-direction: column; gap: 14px; }
.prz-kz-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 92px; gap: 12px; align-items: center; }
.prz-kz-name { font-size: 14px; }
.prz-kz-name b { display: block; font-size: 13px; color: var(--prz-blue); }
.prz-kz-track { position: relative; height: 10px; border-radius: 999px; background: #E2E8F0; margin-top: 6px; }
.prz-kz-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--prz-blue); }
.prz-kz-track > u { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--prz-navy); border-radius: 2px; }
.prz-kz-row .prz-chip { text-align: center; }
.prz-legend { display: flex; gap: 16px; font-size: 13px; color: var(--prz-muted); margin-bottom: 14px; }
.prz-legend i { display: inline-block; width: 12px; height: 8px; background: var(--prz-blue); border-radius: 4px; margin-right: 6px; }
.prz-legend u { display: inline-block; width: 3px; height: 12px; background: var(--prz-navy); margin-right: 6px; vertical-align: -1px; }

/* payment */
.prz-pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.prz-total { position: sticky; top: 16px; background: var(--prz-navy); color: #fff; border-radius: 18px; padding: 22px; }
.prz-total-amt { font-family: var(--prz-head); font-weight: 800; font-size: 36px; }
.prz-total-lines { font-size: 14px; color: #CBD5E1; display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.prz-total-lines div { display: flex; justify-content: space-between; gap: 10px; }
.prz-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.prz-pick label { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px; border: 1.5px solid #E2E8F0; border-radius: 10px; cursor: pointer; font-size: 15px; background: #fff; }
.prz-pick label:has(input:checked) { border: 2px solid var(--prz-orange); background: var(--prz-orange-soft); }
.prz-pick label.is-own, .prz-pick label.is-soon { opacity: .65; cursor: default; }
.prz-pick label.is-soon { border-style: dashed; background: #FAFAF7; }
.prz-pick input { width: 20px; height: 20px; accent-color: var(--prz-orange); }
.prz-pick em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--prz-muted-2); }
.prz-iban { background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 12px; padding: 14px; font-family: ui-monospace, Menlo, monospace; font-size: 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; word-break: break-all; }
.prz-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.prz-steps li { counter-increment: s; display: flex; gap: 12px; }
.prz-steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--prz-blue); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

/* tables */
.prz-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prz-table th { text-align: left; font-size: 13px; color: var(--prz-muted); font-weight: 600; padding: 8px 8px 8px 0; }
.prz-table td { padding: 12px 8px 12px 0; border-top: 1px solid var(--prz-line-2); }
.prz-scroll { overflow-x: auto; }

/* topic page */
.prz-topic-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.prz-price-card { background: #fff; border: 1px solid var(--prz-line); border-radius: 18px; padding: 24px; position: sticky; top: 16px; }
.prz-price { font-family: var(--prz-head); font-weight: 800; font-size: 34px; }
.prz-ticks { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.prz-ticks li::before { content: '✓'; color: var(--prz-green); font-weight: 800; margin-right: 8px; }
.prz-prose { font-size: 17px; line-height: 1.7; color: #1E293B; }
.prz-prose h2 { font-family: var(--prz-head); font-size: 24px; margin: 28px 0 10px; }

@media (max-width: 860px) {
	.prz-pay-grid, .prz-topic-hero { grid-template-columns: 1fr; }
	.prz-total, .prz-price-card { position: static; }
	.prz-kz-row { grid-template-columns: minmax(0, 1fr) 46px 82px; }
}
@media (max-width: 520px) {
	.prz-wrap { padding: 24px 16px 64px; }
	.prz-solve { padding: 16px 12px 72px; }
	.prz-qcard { padding: 14px; }
	.prz-choice { min-height: 56px; font-size: 20px; }
	.prz-card { padding: 20px; }
	.prz-dot { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
.prz-iban .prz-btn { font-family: Inter, system-ui, sans-serif; }