.card{
  background:var(--kart);
  border:1px solid var(--kenarlik);
  border-radius:16px;
  padding:1.25rem;
  box-shadow:var(--golge);
}
.stack{display:flex; flex-direction:column; gap:.75rem}
.mt-10{margin-top:10px}
.label{
  font-size:.9rem;
  color:var(--not-yazi);
  margin-bottom:.5rem;
}
.output{
  display:flex;
  align-items:center;
  gap:.75rem;
  background:#e1e1e1;
  color:#000000;
  border:1px solid var(--kenarlik);
  border-radius:12px;
  padding:12px 20px;
  font-size:clamp(.95rem,.4vw + .85rem,1rem);
  letter-spacing:.3px;
  user-select:all;
  overflow:auto;
  white-space:nowrap;
}
.controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}
.btn{
  cursor:pointer;
  border:0;
  border-radius:12px;
  padding:.75rem 1rem;
  font-weight:600;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:box-shadow .2s ease, background .2s ease, filter .2s ease;
  min-height:44px;
  color:var(--yazi);
  background:var(--kart);
  border:1px solid var(--kenarlik);
}
.btn:focus-visible{
  outline:2px solid var(--birincil);
  outline-offset:2px;
  border-radius:14px;
}
.btn-primary{
  color:var(--header-secim-yazi);
  background:linear-gradient(135deg, var(--birincil), var(--baglanti_ust));
  box-shadow:var(--golge);
  border-color:transparent;
}
.btn-primary:hover{ filter:brightness(1.03); }
.btn-secondary{
  color:var(--yazi);
  background:var(--yardimci);
  border:1px solid var(--kenarlik);
}
.btn-secondary:hover{ background:var(--kenarlik); }
.btn-icon{font-size:1rem; line-height:1}
.muted, .notice{
  color:var(--not-yazi);
  font-size:.85rem;
}
.row{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.col{min-width:0}
@media (min-width:640px){
  .row{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.chips{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:.75rem;
}
@media (min-width:768px){
  .chips{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.chip{
  width:100%;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid var(--kenarlik);
  background:var(--yardimci);
  color:var(--yazi);
  font-size:14px;
  line-height:1;
  user-select:none;
  cursor: pointer;
}
.chip input{
  flex:0 0 auto;
  width:18px; height:18px;
  accent-color:var(--birincil);
}
.chip input:focus-visible{
  outline:2px solid var(--baglanti);
  outline-offset:2px;
  border-radius:4px;
}
.range{
  background:var(--yardimci);
  border:1px solid var(--kenarlik);
  border-radius:12px;
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:44px;
}
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  inline-size:clamp(180px,42vw,260px);
  block-size:6px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--birincil), var(--baglanti_ust));
  outline:none;
  opacity:.95;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--baglanti);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--baglanti);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--birincil), var(--baglanti_ust));
}
.bar{
  height:8px;
  border-radius:999px;
  background:var(--bilgi-arka);
  overflow:hidden;
}
.bar > div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--hata-kenar), var(--uyari-kenar), var(--basarili-kenar));
  transition:width .25s ease;
}

.flash{animation:flash 320ms ease-in-out}
@keyframes flash{
  0%{filter:brightness(1)}
  40%{filter:brightness(1.35)}
  100%{filter:brightness(1)}
}
.pulse{animation:pulse 300ms ease-in-out}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.shake{animation:shake 450ms cubic-bezier(.36,.07,.19,.97) both; transform:translate3d(0,0,0)}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}
.fadein{animation:fadein .5s ease}
@keyframes fadein{from{opacity:0} to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important}
}