/* Araç Kutusu — giriş sayfası */

.hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.hub-head .tb-head { margin-bottom: 0; }
.hub-title { font-size: clamp(34px, 5.4vw, 54px); font-stretch: 78%; }

.hub-qr {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
  flex: none;
}
.hub-qr img {
  display: block;
  width: 104px;
  height: 104px;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--tb-border);
}
.hub-qr figcaption { font: 11.5px/1.3 var(--tb-mono); color: var(--tb-muted); text-align: center; max-width: 120px; }
@media (max-width: 640px) { .hub-qr { display: none; } }

/* Araç kartları */
/* Geniş ekranda üstte iki, altta üç kart */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-grid > li { display: flex; min-width: 0; grid-column: span 2; }
.hub-grid > li:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 980px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid > li, .hub-grid > li:nth-child(-n+2) { grid-column: span 1; }
  .hub-grid > li:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 760px) {
  .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .hub-grid > li:last-child:nth-child(odd) { grid-column: span 1; }
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 20px 20px 16px;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  background: var(--tb-surface);
  color: var(--tb-text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tb-body a.hub-card { color: var(--tb-text); }
.hub-card:hover { border-color: var(--tb-accent); box-shadow: var(--tb-shadow); text-decoration: none; }
.hub-card:focus-visible { outline: none; box-shadow: var(--tb-focus); border-color: var(--tb-accent); }

.hub-card__top { display: flex; align-items: center; gap: 12px; }
.hub-card__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tb-accent-soft);
  color: var(--tb-accent);
  flex: none;
}
.hub-card__icon .tb-ico { width: 22px; height: 22px; }
.hub-card__name {
  flex: 1 1 auto;
  font-size: 22px;
  font-weight: 700;
  font-stretch: var(--tb-narrow);
  letter-spacing: -.01em;
}
.hub-card__go {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--tb-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s, stroke .15s;
}
.hub-card:hover .hub-card__go { stroke: var(--tb-accent); transform: translateX(3px); }

.hub-card__desc { color: var(--tb-text-soft); font-size: 14.5px; line-height: 1.5; }

.hub-sample {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--tb-radius-sm);
  background: var(--tb-surface-2);
  border: 1px solid var(--tb-border);
  min-width: 0;
}
.hub-sample__label { font: 500 11.5px/1.3 var(--tb-mono); color: var(--tb-muted); flex-basis: 100%; }
.hub-sample code {
  font: 500 14px/1.45 var(--tb-mono);
  color: var(--tb-text);
  overflow-wrap: anywhere;
  word-break: break-all;
  min-width: 0;
}
.hub-ip { font-size: 17px !important; font-weight: 600 !important; }

.hub-card__spec { font: 12px/1.4 var(--tb-mono); color: var(--tb-muted); }

/* Komut satırı */
.hub-cli {
  margin-top: 28px;
  padding: 20px;
  border-radius: var(--tb-radius);
  background: var(--tb-surface-2);
  border: 1px solid var(--tb-border);
}
.hub-cli__rows { display: grid; gap: 8px; }
.hub-cli__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--tb-radius-sm);
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
}
.hub-cli__row code { font: 13px/1.5 var(--tb-mono); overflow-wrap: anywhere; min-width: 0; }
.hub-cli__row span { font-size: 13px; color: var(--tb-muted); white-space: nowrap; }
@media (max-width: 700px) {
  .hub-cli__row { grid-template-columns: minmax(0, 1fr); }
  .hub-cli__row span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-card__go { transition: none; }
}