.onboard{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:0 24px calc(34px + env(safe-area-inset-bottom));
  background:
    radial-gradient(85% 50% at 92% 0%, rgba(26,132,245,.16), transparent 60%),
    radial-gradient(82% 50% at 0% 100%, rgba(4,157,197,.13), transparent 62%),
    linear-gradient(180deg,#F6FAFF 0%,#EBF3FC 55%,#E3EEF9 100%);
  color:var(--ink);
  overflow:hidden;
}
/* yumşaq abstrakt ləkələr (dərinlik) */
.onboard::before{
  content:"";position:absolute;z-index:0;width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.75);filter:blur(55px);top:-80px;right:-60px;
}
.onboard::after{
  content:"";position:absolute;z-index:0;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,132,245,.14),transparent 70%);filter:blur(26px);
  bottom:6%;left:-50px;animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-20px,0)}}

/* dil seçici yuxarıda mərkəzdə (bir az aşağı) */
.onboard-top{position:relative;z-index:2;display:flex;justify-content:center;padding-top:calc(clamp(34px,7vh,78px) + env(safe-area-inset-top))}
/* logo — tam dairəvi disk, hero qrupunun başında, mərkəzdə */
.brand-mark{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}
.brand-drop{width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line);box-shadow:0 12px 32px rgba(14,107,168,.16)}
.brand-drop img{width:60%;height:60%;object-fit:contain;display:block}
.brand-txt b{font-family:'Plus Jakarta Sans';font-weight:800;font-size:22px;letter-spacing:.5px;display:block;line-height:1.05;color:var(--ink)}
.brand-txt span{display:block;font-size:11px;font-weight:600;letter-spacing:.2px;color:#000;margin-top:5px}

/* dil seçici — açıq, təmiz şüşə segment */
.lang-pick{display:flex;gap:4px;background:rgba(255,255,255,.5);padding:5px;border-radius:999px;border:1px solid rgba(255,255,255,.75);box-shadow:0 6px 22px rgba(16,40,72,.07);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);flex-shrink:0}
.lang-pick button{padding:7px 17px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--ink-2);transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.lang-pick button:hover{color:var(--ink)}
.lang-pick button.on{background:#fff;color:var(--adsea);box-shadow:0 2px 8px rgba(14,107,168,.15)}

.onboard-hero{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 0 calc(24px + 20vh)}
.onboard-hero p{font-size:16px;color:var(--ink-2);max-width:320px;line-height:1.5;margin-bottom:20px}

/* axtarışlı şəhər selektoru — hero CTA */
.city-field{position:relative;z-index:5;width:100%;text-align:left}
.city-input-wrap{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);border-radius:20px;padding:16px 18px;
  box-shadow:0 8px 26px rgba(14,107,168,.10);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.city-field.open .city-input-wrap{background:#fff;border-color:rgba(26,132,245,.45);box-shadow:0 12px 32px rgba(14,107,168,.15)}
.city-input-wrap i{font-size:21px;color:var(--adsea)}
.city-input-wrap input{flex:1;border:none;outline:none;font-size:16px;font-weight:500;color:var(--ink);font-family:inherit;background:none}
.city-input-wrap input::placeholder{color:var(--ink-3)}
.chev{color:var(--ink-3);font-size:18px;transition:transform .3s}
.city-field.open .chev{transform:rotate(180deg)}

.city-list{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.85);border-radius:20px;box-shadow:0 14px 38px rgba(14,107,168,.14);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  max-height:min(42dvh,300px);overflow-y:auto;padding:8px;
  opacity:0;transform:translateY(-8px) scale(.99);pointer-events:none;transition:.28s var(--ease);
}
.city-field.open .city-list{opacity:1;transform:none;pointer-events:auto}
.city-list .grp{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3);padding:12px 14px 6px}
.city-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:.15s;color:var(--ink)}
.city-opt:hover,.city-opt.hl{background:var(--surface-2)}
.city-opt .nm{flex:1;font-weight:500;font-size:15px}
.city-opt .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0}
.city-empty{padding:24px 14px;text-align:center;color:var(--ink-3);font-size:14px}

.onboard-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;padding-top:8px}
.onboard-foot a{display:flex;align-items:center;gap:5px;color:var(--ink-2);font-weight:500}
.onboard-foot .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.6}
.onboard-foot .year{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--ink-3)}