.dtk-wizard {
  --dtk-navy: #15233b;
  --dtk-blue: #2e69eb;
  --dtk-soft: #e8f0fe;
  --dtk-line: #d9e1ee;
  --dtk-muted: #5c6b80;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--dtk-navy);
  max-width: 720px;
  margin: 1.5rem auto;
}

.dtk-card {
  background: #fff;
  border: 1px solid var(--dtk-line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(21, 35, 59, 0.08);
}

.dtk-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.dtk-steps li {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 999px;
  background: #f4f7fb;
  color: var(--dtk-muted);
}

.dtk-steps li.is-active {
  background: var(--dtk-blue);
  color: #fff;
}

.dtk-steps li.is-done {
  background: var(--dtk-soft);
  color: var(--dtk-blue);
}

.dtk-form label,
.dtk-pane label {
  display: block;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 14px;
}

.dtk-form input[type="text"],
.dtk-form input[type="tel"],
.dtk-form input[type="email"],
.dtk-form input[type="date"],
.dtk-form select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--dtk-line);
  border-radius: 10px;
  font-size: 15px;
}

.dtk-pane { display: none; }
.dtk-pane.is-active { display: block; }

.dtk-btn {
  background: var(--dtk-blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.dtk-btn[disabled] { opacity: 0.6; cursor: wait; }

.dtk-btn-ghost {
  background: #fff;
  color: var(--dtk-blue);
  border: 1px solid var(--dtk-blue);
  margin-bottom: 12px;
}

.dtk-kvkk-scroll {
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--dtk-line);
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
  font-weight: 400;
  margin-bottom: 10px;
}

.dtk-check { font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }

.dtk-form { position: relative; }
.dtk-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  height: 1px !important;
  width: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dtk-alert {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff1f0;
  color: #9b1c1c;
}

.dtk-success {
  text-align: center;
  padding: 24px 8px;
}

.dtk-campaign,
.dtk-gift {
  border: 1px solid var(--dtk-line);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0;
  cursor: pointer;
}

.dtk-campaign.is-selected,
.dtk-gift.is-selected {
  border-color: var(--dtk-blue);
  background: var(--dtk-soft);
}

.dtk-price { font-weight: 700; color: var(--dtk-blue); }

.dtk-modal {
  position: fixed;
  inset: 0;
  background: rgba(21, 35, 59, 0.45);
  display: grid;
  place-items: center;
  z-index: 9999;
}

.dtk-modal[hidden] { display: none; }

.dtk-modal-card {
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 24px;
}

.dtk-otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.dtk-otp-boxes input {
  text-align: center;
  font-size: 22px;
  padding: 10px 0;
  border: 1px solid var(--dtk-line);
  border-radius: 10px;
}

.dtk-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.dtk-address-grid select { margin-bottom: 10px; }

@media (max-width: 640px) {
  .dtk-steps { grid-template-columns: 1fr 1fr; }
  .dtk-card { padding: 18px; }
}