:where(form#botForm,input,button,.tag,.card,.alert,.kv,.grid,.mono,.wrap,.code,.badge,.help,.accordion,.panel,.steps,a){
  font-family: var(--inter-stack), sans-serif;
}

.mt-12{ margin-top:12px; }
.m-0{ margin:0; }
.sub{ color:var(--not-yazi); font-size:13px; }

form#botForm {display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 18px}
form#botForm input[type=text]{
  flex:1 1 320px; min-width:220px; padding:12px 14px;
  border:1px solid var(--kenarlik); border-radius:10px;
  background:var(--kart); color:var(--yazi); outline:0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.tag{
  display:inline-block; padding:10px 12px;
  border:1px solid var(--kenarlik); border-radius:10px;
  background:var(--kart); color:var(--yazi); text-decoration:none;
}

.card{
  background:var(--kart);
  border:1px solid var(--kenarlik);
  border-radius:14px;
  padding:16px; margin-bottom:16px;
  box-shadow:var(--golge);
}

.alert{
  border:1px solid var(--hata-kenar);
  background:var(--hata-arka);
  color:var(--hata-yazi);
  padding:12px 14px; border-radius:10px; margin-bottom:14px;
}

.kv{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--kenarlik); border-radius:12px; overflow:hidden; table-layout:fixed;
}
.kv th, .kv td{
  padding:10px 12px; vertical-align:top; border-bottom:1px solid var(--kenarlik);
  text-align:left; word-break:break-word; overflow-wrap:anywhere; color:var(--yazi);
}
.kv tr:last-child th, .kv tr:last-child td{ border-bottom:0 }
.kv th{
  width:36%; min-width:120px; background:var(--yardimci); color:var(--not-yazi); font-weight:600;
}

.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start }
.grid .card{ margin:0 }
@media (max-width:860px){ .grid{ grid-template-columns:1fr } }

.mono{ font-size:12px }
.wrap{ word-break:break-word; overflow-wrap:anywhere }
.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; background:var(--yardimci); color:var(--yazi);
  border:1px solid var(--kenarlik); padding:10px 12px; border-radius:8px;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--kenarlik); background:var(--kart); color:var(--yazi);
}
.badge.ok{   background:var(--basarili-arka); color:var(--basarili-yazi) }
.badge.warn{ background:var(--uyari-arka);    color:var(--uyari-yazi) }
.badge.err{  background:var(--hata-arka);     color:var(--hata-yazi) }
.small{ font-size:12px; color:var(--not-yazi) }

.help{
  background:var(--yardimci);
  border:1px dashed var(--kenarlik);
  padding:12px; border-radius:10px; color:var(--yazi);
}

.accordion details{
  border:1px solid var(--kenarlik); border-radius:12px; overflow:hidden;
  background:var(--kart); margin-bottom:14px;
  overflow-anchor: none;
}
.accordion summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:700;
  display:flex; align-items:center; gap:10px; color:var(--yazi);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  scroll-margin-block-start: 12px;
}
.accordion summary::-webkit-details-marker{ display:none }
.chev{ transition: transform .24s cubic-bezier(.2,.6,.2,1) }
details[open] .chev{ transform:rotate(90deg) }

.acc-item .acc-tip{
  margin:0 16px 8px 16px; padding:10px 12px;
  background:var(--bilgi-arka); border:1px solid var(--bilgi-kenar); color:var(--bilgi-yazi);
  border-radius:10px;
}
.acc-item .acc-tip.ok{
  background:var(--basarili-arka); border-color:var(--basarili-kenar); color:var(--basarili-yazi);
}
.delta{ margin:6px 0 6px 18px }

.panel{
  padding:14px 16px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  will-change:max-height;
  transition:
    max-height .34s cubic-bezier(.2,.6,.2,1),
    opacity .24s ease;
}
.acc-item[open] .panel{
  opacity:1;
  max-height:2400px;
}

.steps{ margin:8px 0 0 22px; padding:0 }
.steps li{ margin:6px 0 }

.hr{ height:1px; background:var(--kenarlik); margin:12px 0 }

:focus-visible{ outline:3px solid var(--birincil); outline-offset:2px }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}