/* VASH ATM ekran mockuplari — GRG H68VL (yangi model) 27" VERTIKAL = portret 9:16 (1080×1920).
   Bu yerda har ekran 300×534 (×~0.28) ko'rsatiladi. Kodga ulanmagan — faqat ko'rinish + AI prompt. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  background: #07090d;
  color: #e6edf3;
  padding: 24px;
}

header {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid #1c2430;
}
header h1 { font-size: 22px; font-weight: 700; }
header .sub { color: #7d8da0; font-size: 13px; }
.spacer { flex: 1; }

.langbar { display: flex; gap: 8px; }
.langbar button {
  background: #161b22; color: #9fb4d0; border: 1px solid #2a3344;
  border-radius: 8px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.langbar button.active { background: #1f6feb; color: #fff; border-color: #1f6feb; }

/* Galereya — portret kartalar tor, shuning uchun ko'proq ustun */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 26px; align-items: start; }
.item { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.caption { font-size: 13px; color: #9fb4d0; display: flex; gap: 8px; align-items: baseline; align-self: flex-start; }
.caption .num { font-family: Consolas, monospace; font-weight: 700; color: #4f9eff;
  background: #0d1117; border: 1px solid #20304a; border-radius: 6px; padding: 1px 8px; }
.caption .dyn { color: #d4a72c; font-size: 11px; border: 1px solid #4a3a12; border-radius: 5px; padding: 1px 6px; }
.caption .neu { color: #3fb950; font-size: 11px; border: 1px solid #143d2b; border-radius: 5px; padding: 1px 6px; }

/* ATM ekran — PORTRET 9:16 (300×534) */
.bezel {
  width: 324px; background: linear-gradient(160deg, #1b2230, #0b0e14);
  border: 5px solid #2a3344; border-radius: 18px; padding: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.screen {
  width: 300px; height: 534px; border-radius: 10px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 20px; overflow: hidden;
}
.screen.flow    { background: radial-gradient(circle at 50% 18%, #10233f, #06101f); border: 1px solid #20304a; }
.screen.success { background: radial-gradient(circle at 50% 18%, #103326, #06140e); border: 1px solid #1c4a35; }
.screen.message { background: radial-gradient(circle at 50% 18%, #3a2e10, #181206); border: 1px solid #4a3a12; }
.screen.error   { background: radial-gradient(circle at 50% 18%, #3a1414, #170707); border: 1px solid #5a1f1f; }
.screen.service { background: radial-gradient(circle at 50% 18%, #1a1f26, #0a0d11); border: 1px solid #2a3344; }

.brand { position: absolute; top: 20px; left: 0; right: 0; font-size: 13px; letter-spacing: 6px; color: #4f9eff; }
.screen.success .brand { color: #3fb950; }
.screen.error .brand, .screen.message .brand { color: #d4a72c; }

.icon { font-size: 52px; margin-bottom: 14px; line-height: 1; }
.title { font-size: 25px; font-weight: 700; margin-bottom: 10px; line-height: 1.2; }
.subtitle { font-size: 15px; color: #9fb4d0; margin-bottom: 16px; max-width: 260px; }
.screen.error .subtitle, .screen.message .subtitle { color: #d9c79a; }

/* Til-neytral: 3 til ustma-ust */
.multiling { display: flex; flex-direction: column; gap: 14px; }
.multiling .row .t { font-size: 21px; font-weight: 700; }
.multiling .row .s { font-size: 13px; color: #9fb4d0; }

/* Dinamik zona */
.dynzone { border: 2px dashed #d4a72c; border-radius: 8px; padding: 14px 18px; margin-bottom: 14px;
  background: rgba(212,167,44,.07); width: 100%; }
.dynzone .val { font-size: 22px; font-weight: 800; color: #ffe9b0; }
.dynzone .hint { font-size: 10px; color: #d4a72c; margin-top: 4px; letter-spacing: .5px; }

/* FDK tugmalar */
.buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.fdk { background: #1f6feb; color: #fff; border: none; border-radius: 8px;
  padding: 11px 16px; font-size: 14px; font-weight: 600; min-width: 78px; cursor: default; }
.fdk.confirm { background: #2ea043; }
.fdk.cancel  { background: #6e3a3a; }
.fdk.lang    { background: #30363d; min-width: 200px; }

/* Spinner */
.spinner { width: 44px; height: 44px; border: 4px solid #20304a; border-top-color: #4f9eff;
  border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Keypad */
.inputbox { background: #0d1117; border: 1px solid #2a3344; border-radius: 8px; padding: 10px 16px;
  font-family: Consolas, monospace; font-size: 19px; letter-spacing: 3px; color: #e6edf3;
  margin-bottom: 12px; width: 100%; }
.keypad { display: grid; grid-template-columns: repeat(3, 78px); gap: 7px; }
.keypad button { background: #1b2230; color: #e6edf3; border: 1px solid #2a3344; border-radius: 8px;
  padding: 11px 0; font-size: 17px; font-weight: 600; cursor: default; }
.keypad button.ok { background: #2ea043; color: #fff; }
.keypad button.del { background: #6e3a3a; color: #fff; }

/* Kurs taxtasi (019) — portretda bitta ustun. Brend bilan ustma-ust tushmasligi uchun
   kontent yuqoridan boshlanadi (markazga tekislamaymiz) va brenddan keyin joylashadi. */
.screen.rb { justify-content: flex-start; padding: 46px 18px 16px; }
.rateboard-title { font-size: 21px; font-weight: 800; margin-bottom: 1px; }
.rateboard-sub { font-size: 11px; color: #9fb4d0; margin-bottom: 11px; }
.rateboard { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; margin-bottom: 12px; }
.rate { background: rgba(79,158,255,.08); border: 1px solid #20304a; border-radius: 8px;
  padding: 7px 13px; display: flex; align-items: center; justify-content: space-between; }
.rate .cur { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.rate .cur .flag { font-size: 19px; }
.rate .val { font-family: Consolas, monospace; font-size: 16px; font-weight: 700; color: #7ee3a0; }
.rate .val small { color: #6b9a78; font-weight: 400; font-size: 10px; margin-left: 3px; }

/* Asosiy oyna (home 019): til tugmalari qatori (tanlash = boshlash) */
.langrow { display: flex; gap: 7px; width: 100%; margin-top: 6px; }
.langrow button { flex: 1; background: #1f6feb; color: #fff; border: none; border-radius: 8px;
  padding: 12px 4px; font-size: 13px; font-weight: 700; cursor: default; }
.langrow button:hover { background: #388bfd; }

/* Asosiy oyna: aylanuvchi reklama banneri (10 sek, 3 til) + universal qiymat-strip */
.screen.home { padding: 40px 18px 14px; }
/* QAT'IY balandlik — matn almashganda joylashuv SAKRAMAYDI (faqat text o'zgaradi) */
.home-banner { width: 100%; height: 60px; text-align: center; margin-bottom: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.home-banner.fade { animation: homeFade .5s ease; }
@keyframes homeFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.home-headline { font-size: 17px; font-weight: 800; line-height: 1.2; color: #eaf2ff; }
.home-sub { font-size: 11px; color: #9fb4d0; margin-top: 3px; }
/* Toza matn liniyasi (yashil quti YO'Q). Ikonka statik, faqat matn fade. */
.home-vp { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 34px; font-size: 14px; color: #a9c0dc; margin-bottom: 10px; }
.home-vp .vp-ic { font-size: 18px; }                       /* STATIK — aylanmaydi */
.home-vp .vp-text { font-weight: 600; white-space: nowrap; color: #c7d6ea;
  width: 190px; text-align: center; }   /* QAT'IY kenglik → icon joyi o'zgarmaydi */
.home-vp .vp-text.fade { animation: homeFade .5s ease; }   /* faqat matn yumshoq almashadi */
.home-vp .vp-ch { color: #5b6f86; font-weight: 700; font-size: 12px; }
/* 27" da muvozanat — kichikroq kurs qatorlari (joy qoladi, layout qat'iy) */
.screen.home .rateboard { gap: 4px; margin-bottom: 10px; }
.screen.home .rate { padding: 4px 12px; }
.screen.home .rate .cur { font-size: 13px; }
.screen.home .rate .cur .flag { font-size: 15px; }
.screen.home .rate .val { font-size: 13px; }

/* AI prompt tugma + panel */
.promptbtn {
  align-self: center; background: #161b22; color: #c9a4ff; border: 1px solid #3a2a5a;
  border-radius: 20px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: background .15s;
}
.promptbtn:hover { background: #211a33; }
.promptbtn .dot { width: 8px; height: 8px; border-radius: 50%; background: #a371f7; box-shadow: 0 0 8px #a371f7; }
.promptpanel { width: 324px; background: #0a0d12; border: 1px solid #2a2440; border-radius: 10px; padding: 10px; }
.promptpanel textarea {
  width: 100%; height: 180px; background: #06080c; color: #c9d4e0; border: 1px solid #20304a;
  border-radius: 7px; padding: 9px; font-family: Consolas, monospace; font-size: 11px; line-height: 1.5; resize: vertical;
}
.promptpanel .copybtn { margin-top: 8px; background: #6e3aff; color: #fff; border: none; border-radius: 7px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.promptpanel .copybtn:hover { background: #7d4dff; }
.promptpanel .copied { color: #3fb950; font-size: 12px; margin-left: 10px; }

/* Galereya bo'lim sarlavhasi */
.section {
  grid-column: 1 / -1; font-size: 15px; font-weight: 700; color: #4f9eff;
  margin-top: 14px; border-left: 3px solid #1f6feb; padding: 4px 0 4px 12px; letter-spacing: .5px;
}
.section span { color: #5b6675; font-weight: 400; font-size: 12px; margin-left: 8px; }

footer { margin-top: 32px; color: #5b6675; font-size: 12px; border-top: 1px solid #1c2430; padding-top: 14px; line-height: 1.7; }

/* AI prompt tugma + panel — VAQTINCHA YASHIRILGAN (faqat ichki foydalanish uchun).
   Qaytarish uchun shu ikki qatorni o'chiring. */
.promptbtn, .promptpanel { display: none !important; }

/* ============================================================
   IMITATSIYA (demo) — yuqoridagi tugma + to'liq ekran modal
   ============================================================ */
.cta-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.simlaunch {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #1f6feb, #6e3aff);
  color: #fff; border: none; border-radius: 12px;
  padding: 15px 28px; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 20px rgba(79,110,255,.40); letter-spacing: .3px;
  transition: transform .12s, box-shadow .12s;
}
.simlaunch:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(79,110,255,.55); }
.simlaunch:active { transform: translateY(0); }
.cta-hint { color: #7d8da0; font-size: 12.5px; }

body.sim-open { overflow: hidden; }

.sim-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(circle at 50% 0%, #0b1220, #04060a 70%);
  display: flex; flex-direction: column; align-items: center;
}
/* Yopiq holatda haqiqatan ham yashirin bo'lsin (display:flex `hidden`ni bekor qilmasin) */
.sim-overlay[hidden] { display: none !important; }
.sim-bar {
  width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 16px; border-bottom: 1px solid #1c2430; background: rgba(7,9,13,.7);
}
.sim-title { font-size: 15px; font-weight: 700; color: #cfe0f5; }
.sim-prog { font-size: 12px; color: #7d8da0; }
.sim-langs { margin-left: auto; display: flex; gap: 6px; }
.sim-langs button {
  background: #161b22; color: #9fb4d0; border: 1px solid #2a3344;
  border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sim-langs button.active { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.sim-close {
  background: #1b2230; color: #e6edf3; border: 1px solid #2a3344;
  border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer;
}
.sim-stage {
  flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 18px;
}
.sim-stage.sim-tappable { cursor: pointer; }
.sim-note { text-align: center; color: #c7d6ea; font-size: 14px; padding: 0 18px 6px; max-width: 540px; line-height: 1.5; }
.sim-ctl { display: flex; gap: 10px; padding: 10px 16px 18px; }
.sim-ctl button {
  background: #161b22; color: #9fb4d0; border: 1px solid #2a3344;
  border-radius: 9px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sim-ctl button:disabled { opacity: .4; cursor: default; }

/* Bosish kerak bo'lgan tugma — yonib turadi */
.sim-hi { animation: simPulse 1.1s ease-in-out infinite; }
/* Tanlash mumkin bo'lgan tugmalar (masalan barcha valyutalar) — yumshoq halqa */
.sim-pick { box-shadow: 0 0 0 2px rgba(79,158,255,.45); }
@keyframes simPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,158,255,.75); }
  50%      { box-shadow: 0 0 0 8px rgba(79,158,255,0); }
}

/* Past/tor ekranlarda qurilmani sig'dirish */
@media (max-height: 780px) { .sim-stage .bezel { zoom: .82; } }
@media (max-height: 660px) { .sim-stage .bezel { zoom: .66; } }
@media (max-width: 380px)  { .sim-title { font-size: 13px; } .sim-prog { display: none; } }

/* ============================================================
   MOBIL / TELEFON moslashuvi (investor telefonda ochishi uchun)
   ============================================================ */
@media (max-width: 760px) {
  body { padding: 12px 12px 40px; }

  header { gap: 10px; margin-bottom: 14px; padding-bottom: 12px; }
  header h1 { font-size: 19px; }
  header .sub { font-size: 11.5px; line-height: 1.5; }
  .spacer { display: none; }

  /* Til paneli — sahifa yuqorisida yopishib turadi, kattaroq tap-tugmalar */
  .langbar {
    position: sticky; top: 0; z-index: 50;
    width: 100%; gap: 6px;
    background: rgba(7,9,13,.92); backdrop-filter: blur(6px);
    padding: 8px 0; border-bottom: 1px solid #1c2430;
  }
  .langbar button { flex: 1; padding: 12px 4px; font-size: 14px; }

  /* Galereya — bitta ustun, markazda */
  .gallery { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .section { width: 100%; }

  /* AI prompt paneli ekranga sig'sin */
  .promptpanel { width: 100%; max-width: 324px; }

  footer { font-size: 11px; }
}

/* Tor telefonlar (≤360px) — qurilmani ekranga sig'dirish, 9:16 nisbat saqlanadi */
@media (max-width: 360px) {
  .bezel, .promptpanel { zoom: 0.9; }
}