:root{
--muted: color-mix(in srgb, var(--yazi) 60%, transparent);
--line: var(--kenarlik);
--brand: var(--birincil);
--pill-b: var(--kenarlik);
--chip-bg: var(--yardimci);
--chip-b: var(--kenarlik);
--donut-track: color-mix(in srgb, var(--yazi) 10%, transparent);
--ok-bg: var(--basarili-arka);
--ok-b: var(--basarili-kenar);
--ok-f: var(--basarili-yazi);
--warn-bg: var(--uyari-arka);
--warn-b: var(--uyari-kenar);
--warn-f: var(--sp2);
--risk-bg: var(--hata-arka);
--risk-b: var(--hata-kenar);
--risk-f: var(--hata-yazi);
--info-bg: var(--bilgi-arka);
--info-b: var(--bilgi-kenar);
--info-f: var(--bilgi-yazi);
}

.dikey_yasla{
display:flex;
align-items:center;
gap:16px;
width:100%;
margin-top: 20px;
}
.dikey_yasla_sol{
flex:0 0 180px;
width:180px;
min-width:180px;
}
.dikey_yasla_sag{
flex:1 1 auto;
min-width:0;
}
.dikey_yasla_sag > div{
display:flex;
align-items:center;
justify-content:flex-start;
width:100%;
}
@media (max-width:768px){
.dikey_yasla{
flex-direction:column;
}
.dikey_yasla_sol{
flex:0 0 auto;
width:100%;
min-width:0;
align-items: center;
justify-content: center;
display: flex;
}
.dikey_yasla_sag{
width:100%;
}
.badge, a.fix {text-align: center;}
table.results tbody {font-size: 14px;}
}
.donut{position:relative;width:180px;height:180px;flex:0 0 120px}
.donut-ring{position:absolute;inset:0;border-radius:50%;
background: conic-gradient(var(--ring-color, var(--brand)) calc(var(--val, 0)*1%), var(--donut-track) 0)}
.donut::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--kart);border:1px solid var(--line)}
.donut-hole{position:absolute;inset:14px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background: var(--kart);}
.donut-score{font-size:28px;font-weight:800;line-height:1}
.donut-label{font-size:12px;margin-top:4px;color:var(--muted);font-weight:700;letter-spacing:.3px}
.donut.good{--ring-color:var(--ok-b)}
.donut.warn{--ring-color: #fb923c}
.donut.bad{--ring-color:var(--risk-b)}
[data-tema="acik"] .donut.good{--ring-color: #02c14a}
[data-tema="acik"] .donut.warn{--ring-color: #f59e0b}
[data-tema="acik"] .donut.bad{--ring-color: #eb4848}
.form {display:flex;gap:12px; align-items: center;margin-top:18px;flex-wrap:wrap}
.form label{display:block;margin:0 0 6px}
.form input[type=text]{flex:1;min-width:220px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--kart);color:var(--yazi);outline:none}
.form input[type=text]::placeholder{color:var(--muted)}
.form .btn{padding:12px 16px;border:0;border-radius:10px;background:var(--brand);color:#fff;cursor:pointer;font-weight:700}
.form .btn:hover{filter:brightness(1.05)}
.alert{padding:12px 14px;border-radius:10px;margin:16px 0;border:1px solid var(--risk-b);background:var(--risk-bg);color:var(--risk-f)}
.alert-error{}
.progress-wrap{background:var(--kart);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:18px 0}
.progress-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom: 15px;}
.progress{height:10px;border-radius:999px;background:var(--yardimci);border:1px solid var(--line);overflow:hidden}
.progress-bar{height:100%;width:0%;background:var(--brand);transition:width .12s linear}
.counters{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--pill-b);background:var(--kart); cursor: pointer;}
.pill.ok{border-color:var(--ok-b);color:var(--ok-f)}
.pill.warn{border-color:var(--warn-b);color:var(--warn-f)}
.pill.risk{border-color:var(--risk-b);color:var(--risk-f)}
.pill.info{border-color:var(--info-b);color:var(--info-f)}
.panel{background:var(--kart);border:1px solid var(--line);border-radius:12px;margin:18px 0}
.panel-title{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800}
.panel-body{padding:12px 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip-bg);border:1px solid var(--chip-b);color:var(--yazi);padding:6px 10px;border-radius:999px;font-size:12px}
.note{margin-top:10px;font-size:13px}
.note.info{color:var(--info-f)}
.note.warn{color:var(--warn-f)}
table.results{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 30px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.results thead th{background:var(--kart);color:var(--yazi);text-align:left;padding:12px;border-bottom:1px solid var(--line);font-weight:800}
table.results tbody td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
table.results tbody tr:last-child td{border-bottom:0;}
table.results tbody tr td:last-child,
table.results thead tr th:last-child{text-align: center;}
table.results tbody tr {line-height: 1.4;}
@media (max-width: 768px) {
table.results thead { display: none; }
table.results,
table.results tbody,
table.results tr,
table.results td {
display: block;
width: 100%;
}
table.results tr {margin-bottom: 5px;}
table.results tbody td {
display: grid;
grid-template-columns: minmax(110px, 40%) 1fr;
gap: 8px;
padding: 12px;
border-bottom: 1px solid var(--line);
}
table.results tbody tr:last-child td { border-bottom: 0; }
table.results tbody td::before {
content: attr(data-label);
font-weight: 800;
}
table.results tbody tr td:last-child,
table.results thead tr th:last-child{text-align: left;}
}
table.results tbody tr.ok{background:var(--ok-bg)}
table.results tbody tr.warn{background:var(--warn-bg)}
table.results tbody tr.risk{background:var(--risk-bg)}
table.results tbody tr.info{background:var(--info-bg)}
.kullanici{
display:inline-block;
margin:2px 4px;
padding:3px 8px;
border-radius:999px;
background:var(--chip-bg);
border:1px solid var(--chip-b);
color:var(--yazi);
font-size:12px;
font-weight:600;
}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid transparent;background:var(--kart)}
.badge.ok{border-color:var(--ok-b);color:var(--ok-f)}
.badge.warn{border-color:var(--warn-b);color:var(--warn-f)}
.badge.risk{border-color:var(--risk-b);color:var(--risk-f)}
.badge.info{border-color:var(--info-b);color:var(--info-f)}
a.fix{display:inline-block;padding:6px 10px;border-radius:8px;background:var(--kart);border:1px solid var(--info-b);color:var(--info-f);text-decoration:none;font-size:12px}
a.fix:hover{filter:brightness(1.05)}
.fix-ok{color:var(--ok-f)}
@media (max-width:720px){
.donut{width:180px;height:180px;flex:0 0 180px}
.donut-score{font-size:24px}
}