/* İhale · bileşenler — Palette.gd'nin panel()/style_button()/sticker()/
 * make_modal() fonksiyonlarının web karşılığı. Her renk/ölçü token'a bağlı.
 * İmza etkileşim: basınca gölge kalkar, kutu gölgenin yerine kayar
 * (Palette._press_into_shadow). .btn her durumu (default/hover/focus/
 * active/disabled/loading) taşır.
 */

/* ---------------------------------------------------------------- */
/* Panel                                                             */
/* ---------------------------------------------------------------- */
.panel {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-xl) var(--space-xl);
}

.panel--sm {
  border-width: var(--border-w-thin);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.panel--lg {
  border-width: calc(var(--border-w) + 1px);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------- */
/* Sticker — eğik küçük etiket ("Açık Artırma Partisi" vb.)          */
/* ---------------------------------------------------------------- */
.sticker {
  display: inline-block;
  background: var(--sticker-bg, var(--color-teal));
  color: var(--color-ink);
  border: var(--border-w-thin) solid var(--color-ink);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xs) var(--space-lg);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  transform: rotate(var(--sticker-rot, -1.5deg));
  white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Buton — primary / accent / ghost / surface                       */
/* Durumlar: default, hover, :focus-visible (base.css'te global),    */
/* :active (press-into-shadow), :disabled, [data-state=loading]      */
/* ---------------------------------------------------------------- */
.btn {
  --btn-shadow-x: var(--shadow-sm-x);
  --btn-shadow-y: var(--shadow-sm-y);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 56px;
  padding: var(--space-md) var(--space-lg);
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--btn-shadow-x) var(--btn-shadow-y) 0 var(--color-ink);
  transform: translate(0, 0);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:hover:not(:disabled):not(.is-pressed) {
  transform: translate(-2px, -2px);
  --btn-shadow-x: var(--shadow-x);
  --btn-shadow-y: var(--shadow-y);
}

.btn:active:not(:disabled),
.btn.is-pressed {
  transform: translate(var(--shadow-sm-x), var(--shadow-sm-y));
  box-shadow: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: var(--shadow-sm-x) var(--shadow-sm-y) 0 var(--color-ink);
  transform: translate(0, 0);
}

.btn[data-state="loading"] {
  color: transparent;
  pointer-events: none;
}
.btn[data-state="loading"]::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--color-ink);
  border-top-color: transparent;
  animation: btn-spin 0.7s linear infinite;
}
.btn--primary[data-state="loading"]::after { border-color: var(--color-bg); border-top-color: transparent; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn[data-state="loading"]::after { animation-duration: 1.2s; }
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
}

.btn--accent {
  background: var(--btn-accent, var(--color-accent));
  color: var(--color-ink);
}

.btn--ghost {
  background: transparent;
  border-width: var(--border-w-thin);
  box-shadow: none;
  color: var(--color-ink);
}
.btn--ghost:hover:not(:disabled) {
  transform: none;
  background: rgba(20, 18, 16, 0.05);
}
.btn--ghost:active:not(:disabled),
.btn--ghost.is-pressed {
  transform: none;
  background: rgba(20, 18, 16, 0.09);
  box-shadow: none;
}

.btn--surface {
  background: var(--color-surface);
  color: var(--color-ink);
}
.btn--surface.is-selected {
  background: var(--color-ink);
  color: var(--color-surface);
  transform: translate(var(--shadow-sm-x), var(--shadow-sm-y));
  box-shadow: none;
}

.btn--icon {
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-sm);
  font-size: var(--text-lg);
}

.btn--block { width: 100%; }

/* Buton grubu (bütçe/kart sayısı segmentleri, sayfa numaraları) */
.btn-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.btn-row > .btn { flex: 1 1 0; }

/* ---------------------------------------------------------------- */
/* Input — durumlar: default, hover, focus, disabled, error          */
/* ---------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field__label {
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--field-label-color, var(--color-muted));
  letter-spacing: 0.02em;
}

.input {
  min-height: 56px;
  padding: 0 var(--space-md);
  background: var(--color-surface);
  border: var(--border-w-thin) solid var(--color-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), border-width var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-faint); }
.input:hover:not(:disabled) { border-color: var(--color-ink); }
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  border-width: var(--border-w);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }

.field--error .input {
  border-color: var(--color-red);
}
.field__error {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-red);
}

/* ---------------------------------------------------------------- */
/* Modal — scrim + kart                                              */
/* ---------------------------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  animation: modal-fade var(--dur-base) var(--ease-out);
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* JS bu sınıfı .panel .panel--lg ile birlikte uygular (bkz. ui/modal.js) */
.modal {
  max-width: 820px;
  width: 100%;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  .modal-scrim { animation: none; }
}

/* ---------------------------------------------------------------- */
/* Chip (oda kodu harfi, round-göstergesi vb.)                       */
/* ---------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: var(--radius-xs);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* ---------------------------------------------------------------- */
/* Bant (durum şeritleri: "X teklif veriyor…", bağlantı durumu)      */
/* ---------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: var(--border-w-thin) solid var(--color-ink);
  background: var(--banner-bg, var(--color-surface));
  font-weight: 700;
  text-align: center;
}