/* ============================================================
   Kitap sırt kalınlığı hesaplayıcı
   Renk ve tipografi style.css'teki tema değişkenlerinden gelir;
   tema panelden değişince bu araç da onunla birlikte değişir.
   Tüm kurallar .ksk altında — sitenin geri kalanını etkilemez.
   ============================================================ */

.ksk{
  --ksk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--sans);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.ksk *{ box-sizing: border-box }

.ksk .ksk-grid{ display:grid; grid-template-columns:1fr; gap:20px }
@media(min-width:760px){ .ksk .ksk-grid{ grid-template-columns:1fr 1fr; gap:24px } }

/* --- form kutuları --- */
.ksk fieldset{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--paper-card);
  box-shadow:var(--shadow-sm);
  margin:0; padding:20px;
}
.ksk legend{
  font-family:var(--serif);
  font-size:15px; font-weight:600; letter-spacing:.01em;
  color:var(--ink); padding:0 8px; float:none; width:auto;
}
.ksk .f{ margin:0 0 15px }
.ksk .f:last-child{ margin-bottom:0 }
.ksk label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:5px; color:var(--ink) }
.ksk .hint{ font-size:12.5px; color:var(--ink-faint); margin:5px 0 0; line-height:1.45 }
.ksk .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

.ksk input[type=number],
.ksk select{
  width:100%; margin:0; height:auto;
  padding:10px 11px;
  border:1px solid var(--hair-strong);
  border-radius:var(--radius);
  background:#fff; color:var(--ink);
  font-family:var(--ksk-mono); font-size:15px;
  -webkit-appearance:none; appearance:none;
}
.ksk select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b857a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:11px;
  padding-right:32px;
}
.ksk input[type=number]:focus,
.ksk select:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:var(--red) }

/* --- cilt tipi seçici --- */
.ksk .seg{ display:flex; border:1px solid var(--hair-strong); border-radius:var(--radius); overflow:hidden }
.ksk .seg label{ flex:1; margin:0; position:relative }
.ksk .seg input{ position:absolute; opacity:0; pointer-events:none }
.ksk .seg span{
  display:block; text-align:center; padding:10px 6px;
  font-size:13.5px; font-weight:600; cursor:pointer; background:#fff;
  transition:background .12s, color .12s;
}
.ksk .seg label + label span{ border-left:1px solid var(--hair-strong) }
.ksk .seg input:checked + span{ background:var(--red); color:#fff }
.ksk .seg input:focus-visible + span{ outline:2px solid var(--red); outline-offset:-2px }

/* --- sonuç --- */
.ksk .out{
  grid-column:1/-1;
  border:1px solid var(--hair-strong);
  border-top:3px solid var(--red);
  border-radius:var(--radius);
  background:var(--paper-card);
  box-shadow:var(--shadow-md);
  padding:22px;
}
.ksk .out-main{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.ksk #ksk-sirt{
  font-family:var(--ksk-mono); font-weight:700;
  font-size:clamp(44px,11vw,66px); letter-spacing:-.03em; line-height:1;
  color:var(--red-deep);
}
.ksk .unit{ font-family:var(--ksk-mono); font-size:20px; color:var(--ink-faint) }
.ksk .out-label{ font-size:13.5px; color:var(--ink-soft); margin:7px 0 0 }

/* --- ölçekli önizleme --- */
.ksk .preview{ margin-top:22px; border-top:1px solid var(--hair); padding-top:18px }
.ksk .pv-title{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 12px;
}
.ksk .book{ display:flex; align-items:stretch; height:96px; max-width:100% }
.ksk .cover{ width:5px; background:var(--slate); border-radius:2px 0 0 2px; flex:none }
.ksk .cover.right{ border-radius:0 2px 2px 0 }
.ksk .block{
  flex:none; min-width:1px;
  background:repeating-linear-gradient(to right,#fff 0 1.2px,var(--paper-tint) 1.2px 2.4px);
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-strong);
  transition:width .18s ease-out;
}
.ksk .ruler{ margin-top:8px; position:relative; height:26px; border-top:1px solid var(--ink) }
.ksk .tick{ position:absolute; top:0; width:1px; background:var(--hair-strong); height:5px }
.ksk .tick.major{ background:var(--ink); height:9px }
.ksk .tick b{
  position:absolute; top:11px; left:0; transform:translateX(-50%);
  font-family:var(--ksk-mono); font-size:10px; font-weight:500; color:var(--ink-faint);
}
.ksk .scale-note{ font-size:12px; color:var(--ink-faint); margin:10px 0 0 }

/* --- ölçü dökümü --- */
.ksk .specs{ margin-top:22px; border-top:1px solid var(--hair); padding-top:16px }
.ksk dl{ display:grid; grid-template-columns:1fr auto; gap:0 16px; margin:0; font-size:14px }
.ksk dt{ color:var(--ink-soft); padding:7px 0; border-bottom:1px solid var(--hair) }
.ksk dd{
  margin:0; padding:7px 0; text-align:right;
  font-family:var(--ksk-mono); border-bottom:1px solid var(--hair);
}
.ksk dd.hi{ color:var(--red-deep); font-weight:700 }

.ksk .actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap }
.ksk .actions button{
  font-family:var(--sans); font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:var(--radius); cursor:pointer;
  border:1.5px solid var(--red); background:var(--red); color:#fff;
  transition:background .15s, transform .15s;
}
.ksk .actions button:hover{ background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-1px) }
.ksk .actions button.ghost{ background:transparent; color:var(--ink); border-color:var(--hair-strong) }
.ksk .actions button.ghost:hover{ background:var(--paper-tint); border-color:var(--ink); color:var(--ink); transform:none }
.ksk .actions button:focus-visible{ outline:2px solid var(--red); outline-offset:2px }

/* --- uyarı --- */
.ksk .warn{
  margin:22px 0 0; padding:14px 16px;
  border-left:3px solid var(--red);
  background:var(--red-wash);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:14px; color:var(--ink-soft);
}

/* --- açılır bölümler --- */
.ksk details{
  margin-top:14px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--paper-card);
  padding:0 18px;
}
.ksk summary{ cursor:pointer; padding:15px 0; font-weight:600; font-size:15px; list-style:none; font-family:var(--serif) }
.ksk summary::-webkit-details-marker{ display:none }
.ksk summary::before{ content:"+"; color:var(--red); margin-right:9px; font-weight:700; font-family:var(--sans) }
.ksk details[open] summary::before{ content:"–" }
.ksk details .body{ padding-bottom:18px; font-size:14px; color:var(--ink-soft) }
.ksk details .body p{ margin:0 0 10px }
.ksk code{
  font-family:var(--ksk-mono); font-size:13px;
  background:var(--paper-tint); padding:2px 6px;
  border-radius:3px; color:var(--ink);
}
.ksk table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:13px }
.ksk th, .ksk td{ text-align:left; padding:7px 9px; border-bottom:1px solid var(--hair) }
.ksk th{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border-bottom-color:var(--hair-strong);
}
.ksk td:last-child, .ksk th:last-child{ text-align:right; font-family:var(--ksk-mono) }

.ksk .hidden{ display:none }
@media(prefers-reduced-motion:reduce){ .ksk *{ transition:none !important } }