/* [PuanHesapla] — sınav puanı / not hesaplama aracı. Meridyen token'ları. */

.calcpoint{
	max-width:640px;
	margin:var(--sp-5,2rem) auto;
	background:#fff;
	border:1px solid var(--line,#e6e8f0);
	border-radius:var(--radius-lg,16px);
	box-shadow:var(--shadow-sm,0 1px 3px rgba(16,24,64,.08));
	padding:clamp(1.1rem,3vw,1.75rem);
}
.calcpoint__title{
	margin:0 0 1.1rem;
	font-size:clamp(1.05rem,2.2vw,1.3rem);
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--navy,#0b1b4d);
	text-align:center;
}
.calcpoint__rows{display:grid;gap:.65rem}
.calcpoint__row{
	display:grid;
	grid-template-columns:1fr minmax(0,140px);
	gap:.75rem;
	align-items:center;
	padding:.55rem .2rem;
	border-bottom:1px solid var(--line,#e6e8f0);
}
.calcpoint__row.is-collapsed{display:none}
.calcpoint__label{
	font-weight:700;
	color:var(--ink,#1a2036);
	font-size:.92rem;
}
.calcpoint__input{
	width:100%;
	padding:.5rem .6rem;
	border:1px solid var(--line,#e6e8f0);
	border-radius:10px;
	font:inherit;
	color:var(--navy,#0b1b4d);
	text-align:center;
	background:#fbfcff;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.calcpoint__input:focus{
	outline:0;
	border-color:var(--navy,#0b1b4d);
	box-shadow:0 0 0 3px rgba(11,27,77,.12);
}
.calcpoint__row--choice{grid-template-columns:1fr}
.calcpoint__choices{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin-top:.5rem;
}
.calcpoint__choice{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	padding:.4rem .7rem;
	border:1px solid var(--line,#e6e8f0);
	border-radius:999px;
	cursor:pointer;
	font-size:.9rem;
	font-weight:600;
	color:var(--ink,#1a2036);
	transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.calcpoint__choice:has(.calcpoint__radio:checked){
	border-color:var(--navy,#0b1b4d);
	background:var(--navy,#0b1b4d);
	color:#fff;
}
.calcpoint__radio{accent-color:var(--red,#e23b3b)}
.calcpoint__actions{margin-top:1.1rem;display:flex;justify-content:center}
.calcpoint__actions .btn{min-width:180px;justify-content:center}

/* Sonuç modalı (native <dialog>). Ortalama: position:fixed + inset:0 + margin:auto
   (tema reset'i UA'nın varsayılan margin:auto'sunu ezdiği için açıkça verilir). */
.calcpoint-modal{
	position:fixed;
	inset:0;
	margin:auto;
	width:min(92vw,420px);
	height:fit-content;
	max-height:min(92vh,760px);
	border:0;
	border-radius:var(--radius-lg,16px);
	padding:1.6rem 1.5rem 1.75rem;
	box-shadow:0 24px 60px rgba(8,12,48,.28);
	color:var(--ink,#1a2036);
	overflow:auto;
}
.calcpoint-modal::backdrop{background:rgba(8,12,48,.55)}
.calcpoint-modal__close{
	position:absolute;
	top:.6rem;
	right:.7rem;
	width:34px;
	height:34px;
	border:0;
	background:transparent;
	font-size:1.5rem;
	line-height:1;
	color:var(--muted,#6b7290);
	cursor:pointer;
	border-radius:50%;
}
.calcpoint-modal__close:hover{color:var(--navy,#0b1b4d)}
.calcpoint-modal__title{
	margin:0 1.5rem .6rem 0;
	font-size:1rem;
	font-weight:700;
	color:var(--navy,#0b1b4d);
}
.calcpoint-modal__score{
	font-size:2.6rem;
	font-weight:800;
	text-align:center;
	color:var(--navy,#0b1b4d);
	padding:.4rem 0 .6rem;
}
.calcpoint-modal__levels{display:grid;gap:.35rem;text-align:center}
.calcpoint-modal__level{font-size:.92rem;color:var(--ink,#1a2036)}
.calcpoint-modal__level strong{color:var(--red,#e23b3b)}

@media (max-width:520px){
	.calcpoint__row{grid-template-columns:1fr;gap:.35rem}
	.calcpoint__input{max-width:160px}
}