/* otonom.css — "Otonom Ekip": gel.al içine gömülü GERÇEK tasarımcı paneli (iframe). gel.al token'ları. */

.otonom .st-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 80px; }

.oto-frame-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 18px 0 10px; flex-wrap: wrap;
}

.oto-frame-wrap {
  border: 1px solid var(--border); border-radius: var(--r, 13px); overflow: hidden;
  background: var(--bg); box-shadow: 0 10px 40px -16px rgba(0,0,0,.5);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.oto-frame-wrap:hover { border-color: var(--border-2); }

.oto-frame {
  display: block; width: 100%; height: 78vh; min-height: 560px; border: 0;
  background: var(--bg);
}
.oto-frame-note { color: var(--text-2); font-size: 13px; margin-top: 10px; }

.oto-locked {
  display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r, 13px);
  transition: border-color .18s ease;
}
.oto-locked:hover { border-color: var(--border-2); }

.oto-upsell {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 11px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px;
  font-size: 13px; color: var(--text); transition: border-color .15s ease;
}

.btn.sm { padding: 6px 12px; font-size: 13px; }

/* Cihaz kodu input */
.oto-kod-input { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; text-align: center; width: 160px; padding: 10px 14px;
  border-radius: 12px; border: 2px solid var(--border); background: var(--surface);
  color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; }
.oto-kod-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

@media (max-width: 860px) {
  .oto-frame { height: 60vh; min-height: 420px; }
  .otonom .st-wrap { padding: 0 16px 60px; }
}
@media (max-width: 540px) {
  .oto-frame { height: 50vh; min-height: 340px; }
  .oto-locked { flex-direction: column; align-items: flex-start; }
}