:root{
--primary:#2c3e50;
--accent:#3498db;
--success:#27ae60;
--warn:#f39c12;
--danger:#e74c3c;
--bg:#f4f7f6;
}

body{font-family:sans-serif;background:var(--bg);margin:0;padding:20px}

.dashboard{
max-width:500px;
margin:auto;
display:grid;
grid-template-columns:1fr;
gap:20px;
}

.header{
grid-column:1/-1;
background:var(--primary);
color:white;
padding:15px;
border-radius:10px;
text-align:center;
}

.card{
background:white;
padding:18px;
border-radius:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
border-top:5px solid var(--accent);
font-size:13px;
}

h3{margin:0 0 5px;color:var(--primary)}
.method-desc{
font-size:12px;
color:#555;
margin-bottom:10px;
border-bottom:1px solid #eee;
padding-bottom:8px;
}

label{display:block;margin-top:8px;font-weight:bold;font-size:12px}

input{
width:100%;
padding:6px;
border:1px solid #ddd;
border-radius:5px;
box-sizing:border-box;
font-size:12px;
}

/* spinner kaldır */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
input[type=number]{-moz-appearance:textfield;}

button{
background:var(--accent);
color:white;
border:none;
padding:8px;
margin-top:10px;
border-radius:5px;
cursor:pointer;
width:100%;
font-size:12px;
font-weight:bold;
}

.result{
margin-top:10px;
padding:10px;
border-radius:5px;
display:none;
font-size:12px;
}

.ok{background:#e8f6f3;color:#16a085}
.mid{background:#fff4e5;color:#d68910}
.bad{background:#fdecea;color:#c0392b}

.risk-bar{
    width:100%;
    height:20px;
    background:#ddd;
    border-radius:10px;
    margin-top:15px;
}

#risk-fill{
    height:100%;
    width:0%;
    background:green;
    border-radius:10px;
    transition:0.5s;
}

.container{
    max-width:500px;   /* 600 → 500 düşür */
    margin:20px auto;
    padding:10px;
}

.card{
    padding:15px;
}

@media (max-width:768px){
    .container{
        max-width:100%;
        margin:10px;
    }
}

#oneriler{
    margin-top:10px;
    font-size:14px;
    line-height:1.5;
}

/* ── Düşüş Modülü Eklentisi — mevcut style.css'e ekle ── */

.status-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: bold;
}
.status-box.safe    { background: #e8f6f3; color: #16a085; border-left: 4px solid #27ae60; }
.status-box.warning { background: #fff4e5; color: #d68910; border-left: 4px solid #f39c12; }
.status-box.danger  { background: #fdecea; color: #c0392b; border-left: 4px solid #e74c3c; }

.status-icon { font-size: 18px; flex-shrink: 0; }

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.metric {
  background: #f4f7f6;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 11px;
}

.metric-label { color: #777; margin-bottom: 2px; }

.metric-value { font-size: 16px; font-weight: bold; color: #2c3e50; }
.metric-value.ok  { color: #27ae60; }
.metric-value.warn { color: #f39c12; }
.metric-value.bad  { color: #e74c3c; }

.risk-bar-wrap { margin-bottom: 10px; }

.risk-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #aaa;
  margin-bottom: 4px;
}

.risk-fill {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: #27ae60;
  transition: width 0.5s, background 0.3s;
}

.clearance-detail {
  font-size: 12px;
  margin-bottom: 10px;
}

.detail-title {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-row.total {
  font-weight: bold;
  border-top: 1px solid #ddd;
  border-bottom: none;
  margin-top: 4px;
  padding-top: 6px;
}

.detail-row .val { color: #3498db; }
.detail-row.total .val { color: #2c3e50; font-size: 13px; }

.alerts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
}

.alert.error  { background: #fdecea; color: #c0392b; border-left: 3px solid #e74c3c; }
.alert.warn   { background: #fff4e5; color: #d68910; border-left: 3px solid #f39c12; }
.alert.info   { background: #eaf4fb; color: #1a6fa0; border-left: 3px solid #3498db; }
.alert-icon   { flex-shrink: 0; margin-top: 1px; }

.disclaimer {
  font-size: 10px;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-top: 10px;
}