/* =========================================================================
   upwebo — FORM ve ÖDEME · v2 "poster studio"
   ========================================================================= */

/* --- Adım göstergesi ------------------------------------------------------ */
.flow { display: flex; flex-wrap: wrap; border: var(--line-w) solid var(--ink); }
.flow__step { flex: 1 1 9rem; padding: .75rem 1rem; border-inline-start: var(--line-w) solid var(--ink); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.flow__step:first-child { border-inline-start: 0; }
.flow__step[data-done="true"] { background: var(--paper-2); color: var(--ink); }
.flow__step[aria-current="step"] { background: var(--accent); color: var(--accent-on); }

/* --- Alan blokları -------------------------------------------------------- */
.field { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-block-end: var(--line-w) solid var(--ink); }
.field__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.field__label { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--s-3); }
.field__opt { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field__hint { font-size: var(--t-small); color: var(--ink-3); max-width: 62ch; margin: 0; }
.field__error { font-size: var(--t-small); color: var(--bad); margin: 0; font-weight: 600; }

/* Tüm metin girişleri aynı görünür. Tek tek tip saymak yerine dışlama yapılır;
   yeni bir input tipi eklendiğinde (password, tel, date…) stil dışında kalmaz. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
textarea, select {
  width: 100%; padding: .85rem .9rem;
  background: var(--paper); color: var(--ink);
  border: var(--line-w) solid var(--ink);
  font-family: var(--font-text); font-size: var(--t-body); line-height: 1.45;
}
input:focus, textarea:focus, select:focus { outline: 3px solid var(--accent); outline-offset: 0; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
textarea { min-height: 11rem; resize: vertical; }
::placeholder { color: var(--ink-4); }

/* İpucu — kare rozet, balon yalnız hover/odakta açılır */
.tip { position: relative; display: inline-grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border: var(--line-w) solid var(--ink); background: var(--acc-lime); font-family: var(--font-mono); font-size: .65rem; font-weight: 700; cursor: help; }
.tip__body { display: none; position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 5; inline-size: max-content; max-inline-size: min(26rem, calc(100vw - 2.5rem)); padding: var(--s-3); background: var(--ink); color: var(--paper); border: var(--line-w) solid var(--ink); font-family: var(--font-text); font-size: var(--t-small); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.45; }
.tip:hover .tip__body, .tip:focus-visible .tip__body { display: block; }

/* --- Seçim grupları ------------------------------------------------------- */
.choice { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.choice__item { position: relative; }
.choice__item input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice__item span { display: inline-flex; align-items: center; gap: var(--s-2); padding: .7rem 1rem; border: var(--line-w) solid var(--ink); background: var(--paper); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.choice__item input:checked + span { background: var(--accent); color: var(--accent-on); box-shadow: var(--pop-sm); }
.choice__item input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- Dosya bırakma -------------------------------------------------------- */
.drop { display: grid; gap: var(--s-2); place-items: center; text-align: center; padding: var(--s-7) var(--s-5); border: var(--line-w) dashed var(--ink); background: var(--paper); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.drop:hover, .drop[data-over="true"] { background: var(--acc-lime); }
.drop__title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.02em; }
.drop__meta { font-size: var(--t-small); color: var(--ink-3); margin: 0; }

.files { display: grid; border: var(--line-w) solid var(--ink); margin-block-start: var(--s-4); }
.file-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border-block-end: var(--line-w) solid var(--ink); font-size: var(--t-small); }
.file-row:last-child { border-block-end: 0; }
.file-row__size, .file-row__state { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.file-row__state { padding: .2rem .45rem; border: var(--line-w) solid var(--ink); background: var(--paper-2); }
.file-row__state[data-state="done"] { background: var(--ok); color: #fff; border-color: var(--ok); }

/* --- Sesli brief ---------------------------------------------------------- */
.voice { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5); border: var(--line-w) solid var(--ink); background: var(--paper-2); }
.voice__rec { inline-size: 3.25rem; block-size: 3.25rem; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-on); border: var(--line-w) solid var(--ink); box-shadow: var(--pop-sm); cursor: pointer; font-size: 1.1rem; }
.voice__rec:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.voice__wave { flex: 1 1 12rem; display: flex; align-items: center; gap: 3px; height: 2.75rem; }
.voice__wave i { display: block; width: 3px; background: var(--ink); block-size: 30%; }
.voice__time { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; }

/* --- Özet / ödeme --------------------------------------------------------- */
.summary { position: sticky; inset-block-start: 88px; border: var(--line-w) solid var(--ink); box-shadow: var(--pop); background: var(--paper); padding: var(--s-5); display: grid; gap: var(--s-4); }
.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--t-small); }
.summary__row span:last-child { font-family: var(--font-mono); font-weight: 600; }
.summary__total { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4); margin-inline: calc(var(--s-5) * -1); margin-block-end: calc(var(--s-5) * -1); background: var(--accent); color: var(--accent-on); border-block-start: var(--line-w) solid var(--ink); }
.summary__total b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; }

/* --- Ödeme yöntemleri ----------------------------------------------------- */
.methods { display: grid; border: var(--line-w) solid var(--ink); }
.method { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4); border-block-end: var(--line-w) solid var(--ink); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.method:last-child { border-block-end: 0; }
.method:hover { background: var(--paper-2); }
.method input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--ink); }
.method__name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.02em; }
.method__note { font-size: var(--t-small); color: var(--ink-3); }

/* --- Uyarı bloğu ---------------------------------------------------------- */
.warn { border: var(--line-w) solid var(--ink); background: var(--acc-kids); color: var(--ink); padding: var(--s-4); font-size: var(--t-small); }
.warn b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }

/* --- Onay kutusu ---------------------------------------------------------- */
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); padding: var(--s-4); border: var(--line-w) solid var(--ink); background: var(--paper-2); }
.consent input { margin-block-start: .15rem; inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--ink); }
.consent a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* =========================================================================
   GİRİŞ / QEYDİYYAT
   Tek ekran, iki sütun: solda niyə hesab lazımdır, sağda tək bir forma.
   Sekmeler JS'siz çalışır (gizli radio + kardeş seçici) — panel açılmadan
   önce hangi formda olduğun her zaman bellidir.
   ========================================================================= */

.auth { display: grid; grid-template-columns: 1fr 1fr; min-block-size: calc(100vh - 66px); }
@media (max-width: 980px) { .auth { grid-template-columns: 1fr; min-block-size: 0; } }

.auth__aside {
  background: var(--accent); color: var(--accent-on);
  border-inline-end: var(--line-w) solid var(--ink);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
}
@media (max-width: 980px) { .auth__aside { border-inline-end: 0; border-block-end: var(--line-w) solid var(--ink); } }
.auth__aside .u-list li::before { opacity: .7; }

.auth__panel { padding: clamp(2rem, 5vw, 4rem) var(--gutter); display: grid; justify-items: center; align-content: center; }
.auth__form { inline-size: 100%; max-inline-size: 27rem; }

/* --- Sekmeler ------------------------------------------------------------- */
.authtabs { display: flex; border: var(--line-w) solid var(--ink); }
.authtabs label {
  flex: 1; padding: .8rem 1rem; text-align: center; cursor: pointer;
  border-inline-start: var(--line-w) solid var(--ink);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.authtabs label:first-child { border-inline-start: 0; }
.authtabs label:hover { background: var(--acc-lime); }

#authtab-in:checked  ~ .authtabs label[for="authtab-in"],
#authtab-up:checked  ~ .authtabs label[for="authtab-up"] { background: var(--ink); color: var(--paper); }
#authtab-in:checked  ~ .authpane--up { display: none; }
#authtab-up:checked  ~ .authpane--in { display: none; }

.authpane { margin-block-start: var(--s-6); }
.authpane .field:first-of-type { border-block-start: var(--line-w) solid var(--ink); }
.authpane .u-btn { inline-size: 100%; justify-content: center; margin-block-start: var(--s-5); }

.auth__meta { margin-block-start: var(--s-5); font-size: var(--t-small); color: var(--ink-3); }
.auth__meta a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Səs qeydi vəziyyəti: qeyd gedərkən düymə nəbz vurur */
.voice[data-state="recording"] .voice__rec { background: var(--bad); border-color: var(--ink); animation: rec 1.2s ease-in-out infinite; }
@keyframes rec { 50% { transform: scale(.92); } }
.voice[data-state="recording"] .voice__wave i { transition: block-size 180ms var(--ease); }
.file-row__state { cursor: pointer; background: var(--paper); }
.file-row__state:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

/* --- A48: sosial giriş düymələri --------------------------------------- */
.social { margin-block-start: var(--s-5); display: grid; gap: var(--s-3); }
.social__or { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #666); }
.social__or::before, .social__or::after { content: ""; flex: 1; block-size: var(--line-w); background: var(--ink); opacity: .25; }
.social__btn { inline-size: 100%; justify-content: center; text-align: center; }
.social__note { margin-block-start: calc(var(--s-2) * -1); }

/*
 * A56 — ödəniş razılığı zolağı (müştəri qərarı).
 *
 * `sticky`, `fixed` DEYİL: element formanın içində qalır, yəni `consent`
 * sahəsi göndərilir. Ekranın altına yapışır, forma düymələri onun altında
 * qalır; səhifənin sonunda isə öz təbii yerinə oturur və heç nəyi örtmür.
 *
 * Məntiqi xüsusiyyətlər (`inset-block-end`, `padding-inline`) RTL-də də
 * düzgün işləyir — ərəb dilində qutu yenə aşağıda qalır.
 */
.consent-bar { position: sticky; inset-block-end: 0; z-index: 5; display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); padding: var(--s-4); border: var(--line-w) solid var(--ink); background: var(--paper-2); box-shadow: var(--pop-sm); }
.consent-bar input { margin-block-start: .15rem; inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--ink); flex: none; }
.consent-bar a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
/*
 * Dəstək düyməsi (`.support-dock`) ekranın alt-sağ küncündə SABİTDİR və
 * z-index-i daha yüksəkdir: zolaq onun altına düşsəydi mətn bağlanardı
 * (gerçək brauzerdə görüldü). Ona görə zolaq öz sonunda düymə qədər yer
 * saxlayır — `padding-inline-end` məntiqi xüsusiyyətdir, RTL-də düymə də,
 * boşluq da birlikdə çevrilir.
 */
.consent-bar { padding-inline-end: 11.5rem; }

/*
 * 375 px: yan boşluq ekranın yarısını yeyərdi. Burada zolaq YIĞCAM qalır,
 * dəstək düyməsi isə onun ÜSTÜNƏ qaldırılır (`:has`). Zolaq telefonda
 * ekranın beşdə birini yeməməlidir — ödəniş üsulları onun altında qalırdı.
 *
 * `:has` dəstəklənməyən köhnə brauzerdə düymə zolağın sağ-alt küncünə
 * düşür; mətn sol-yuxarıdadır, ona görə oxunaqlılıq itmir.
 */
@media (max-width: 640px) {
  .consent-bar { padding: var(--s-3); padding-inline-end: var(--s-3); gap: var(--s-2); max-block-size: 45vh; overflow-y: auto; }
  body:has(.consent-bar) .support-dock { inset-block-end: calc(var(--s-3) + 9rem); }
}

/* =========================================================================
   Yükləmə göstəricisi (`public/js/upload.js`)
   -------------------------------------------------------------------------
   Böyük fayl yüklənəndə ekran DONMUŞ görünürdü. Burada gerçək faiz, ölçü və
   qalan vaxt yazılır; xəta halında qutu qırmızılaşır və mətn dəyişir —
   sonsuza qədər fırlanan heç nə yoxdur.
   ========================================================================= */
.uploading { margin-block-start: var(--s-5); padding: var(--s-4); border: var(--line-w) solid var(--ink); background: var(--paper-2); }
.uploading[hidden] { display: none; }
.uploading__label { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.uploading__track { margin-block-start: var(--s-3); block-size: 10px; background: var(--paper); border: var(--line-w) solid var(--ink); overflow: hidden; }
.uploading__bar { block-size: 100%; inline-size: 0; background: var(--ink); transition: inline-size .2s linear; }
/* Fayl yoxdursa faiz yoxdur: zolaq "işləyir" deyir, yalan rəqəm vermir. */
.uploading__bar[data-indeterminate="true"] { animation: uploading-pulse 1.1s ease-in-out infinite; }
@keyframes uploading-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.uploading__meta { margin-block-start: var(--s-2); }
.uploading__cancel { margin-block-start: var(--s-3); }
.uploading[data-state="error"] { border-color: var(--acc-pink, #e6005c); background: var(--paper); }
.uploading[data-state="error"] .uploading__label { color: var(--acc-pink, #e6005c); text-transform: none; letter-spacing: 0; font-family: inherit; font-size: var(--t-small); }
@media (prefers-reduced-motion: reduce) { .uploading__bar { transition: none; } .uploading__bar[data-indeterminate="true"] { animation: none; opacity: .6; } }