:root{
  --zemin:#F3F5F4; --kart:#FFF; --kart2:#E9EEEB; --murekkep:#121A18; --murekkep2:#3B4844;
  --soluk:#66756F; --cizgi:#D3DBD7; --cizgi2:#B4C0BB; --vurgu:#0B6157; --vurgu-yumusak:#DCEBE7;
  --uyari:#9C3A31; --uyari-yumusak:#F1DFDC;
  --golge:0 1px 2px rgba(18,26,24,.05), 0 8px 24px -18px rgba(18,26,24,.25);
}
@media (prefers-color-scheme:dark){:root{
  --zemin:#0D1312; --kart:#151D1B; --kart2:#1D2725; --murekkep:#E3EBE8; --murekkep2:#BCC9C5;
  --soluk:#8B9C96; --cizgi:#283532; --cizgi2:#3A4A46; --vurgu:#57C4B1; --vurgu-yumusak:#12302C;
  --uyari:#DE8177; --uyari-yumusak:#2E1D1B;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.8);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zemin);color:var(--murekkep);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.sarmal{max-width:960px;margin:0 auto;padding:0 16px 72px}
h1,h2,h3{line-height:1.2;margin:0;text-wrap:balance}
a{color:var(--vurgu)}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px;border-radius:3px}

header{padding:28px 0 20px}
h1{font-size:clamp(24px,4.6vw,34px);font-weight:700;letter-spacing:-.02em}
header p{margin:10px 0 0;color:var(--murekkep2);font-size:17px;max-width:62ch}

.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:8px;box-shadow:var(--golge);margin-bottom:18px}
.kart-bas{padding:14px 16px;border-bottom:1px solid var(--cizgi);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.kart-bas h2{font-size:17px;font-weight:600}
.kart-govde{padding:16px}

label{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--soluk);margin-bottom:5px}
input[type=text],select{
  width:100%;padding:11px 12px;font:inherit;font-size:16px;
  background:var(--kart);color:var(--murekkep);
  border:1px solid var(--cizgi2);border-radius:6px;
}
input[type=text]:focus,select:focus{border-color:var(--vurgu)}
.izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.onay{display:flex;align-items:center;gap:8px;margin-top:14px}
.onay input{width:20px;height:20px;accent-color:var(--vurgu)}
.onay label{margin:0;text-transform:none;font-size:15px;font-weight:400;color:var(--murekkep2)}

.tablo-kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:660px}
th{
  text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--soluk);
  font-weight:600;padding:8px 6px;border-bottom:1px solid var(--cizgi2);white-space:nowrap;
}
td{padding:4px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
td input[type=text],td select{padding:9px 8px}
td .ad{min-width:130px}
td .adet{max-width:64px}
.sira{color:var(--soluk);font-variant-numeric:tabular-nums;font-size:13px;width:26px;text-align:right;padding-right:8px}
.bantlar{display:flex;gap:3px;white-space:nowrap}
/* Kutucuğun kendisi küçük ama etiketin tamamı tıklanabilir — dokunma alanı 40px. */
.bant{margin:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;min-width:34px;min-height:40px;padding:2px}
.bant input{width:20px;height:20px;accent-color:var(--vurgu);margin:0}
.bant span{font-size:10px;color:var(--soluk);margin-top:1px;text-transform:none;letter-spacing:0}
button{font:inherit;cursor:pointer;border-radius:6px;border:1px solid var(--cizgi2);background:var(--kart);color:var(--murekkep);padding:9px 14px}
button:hover{border-color:var(--vurgu)}
button.birincil{background:var(--vurgu);color:#fff;border-color:var(--vurgu);font-weight:600}
/* Atölyede eldivenli/tozlu elle kullanılıyor: dokunma hedefi 44px'in altına inmemeli.
   Silme yıkıcı bir işlem olduğu için küçük hedef yanlış dokunma demek. */
button.sil{border:0;background:none;color:var(--soluk);font-size:19px;line-height:1;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
button.sil:hover{color:var(--uyari)}
.dugmeler{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;border-top:1px solid var(--cizgi)}

#uyari{margin:0 0 16px;padding:12px 16px 12px 34px;background:var(--uyari-yumusak);border-left:3px solid var(--uyari);color:var(--uyari);border-radius:0 6px 6px 0;font-size:15px}

.statlar{display:flex;flex-wrap:wrap;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);border-radius:8px;overflow:hidden;margin-bottom:18px}
.stat{flex:1 1 88px;background:var(--kart);padding:13px 14px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-size:12px;color:var(--soluk)}
.stat.vurgu b{color:var(--vurgu)}
.sure{flex:1 1 100%;background:var(--kart);padding:7px 14px;font-size:11px;color:var(--soluk);font-variant-numeric:tabular-nums}

.planlar{display:flex;flex-direction:column;gap:20px}
figure{margin:0}
figcaption{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soluk);margin-bottom:7px}
figure svg{max-width:100%;height:auto;border:1px solid var(--cizgi);border-radius:6px;display:block}

.yerlesemeyen{background:var(--uyari-yumusak);border-left:3px solid var(--uyari);padding:12px 16px;border-radius:0 6px 6px 0;margin-bottom:18px;font-size:15px}
.yerlesemeyen ul{margin:6px 0 0;padding-left:18px}
.bos{color:var(--soluk);padding:26px 0;text-align:center}

.artiklar{margin-top:26px;padding:18px;background:var(--vurgu-yumusak);border-radius:8px}
.artiklar h3{font-size:16px;font-weight:600;margin-bottom:7px}
.artiklar p{margin:0 0 12px;font-size:14.5px;color:var(--murekkep2);max-width:64ch}
.artiklar ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.artiklar li{background:var(--kart);border:1px solid var(--cizgi);border-radius:5px;padding:6px 11px;font-size:13.5px;font-variant-numeric:tabular-nums}
.artiklar li.daha{color:var(--soluk);border-style:dashed}

.metin{max-width:66ch;margin-top:44px}
.metin h2{font-size:22px;margin:34px 0 12px}
.metin h3{font-size:17px;margin:24px 0 7px}
.metin p,.metin li{color:var(--murekkep2);font-size:16.5px}
.metin p{margin:0 0 13px}
.metin ul{padding-left:20px;margin:0 0 13px}
.metin li{margin-bottom:5px}

footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--cizgi);font-size:13.5px;color:var(--soluk)}

@media print{
  body{background:#fff}
  header p,.kart-bas,.dugmeler,.metin,footer,.artiklar p,#uyari{display:none}
  .kart{box-shadow:none;border:0;margin:0}
  .tablo-kaydir{display:none}
  figure{break-inside:avoid;page-break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}