/* =====================================================================
   admin-belepes.css — MANIQUEEN admin belépő, „3” irány (2026-09-29, a tulajdonos választása)
   Fehér oldal · balra a brandlogó ezüstös krómfénnyel + „Belső rendszer” · jobbra az űrlap · alul fotócsík.
   Közös a három auth-oldallal (belépés, elfelejtett jelszó, jelszó-visszaállítás): a Bootstrap-alapú
   űrlapmarkupot öltözteti át — aláhúzásos mezők, szögletes fekete gomb, keret/doboz/lekerekítés nélkül.
   Ezüst mozgás: logó-krómfény, csillogó ezüstvonal, gomb-fénycsík; prefers-reduced-motion alatt áll.
   ===================================================================== */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../shop/fonts/maniqueen/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../shop/fonts/maniqueen/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.mq-belepo {
  --b-fekete: #0b0b0b;
  --b-halvany: #8c8c8c;
  --b-vonal: #d6d6d6;
  --b-lagy: cubic-bezier(.22, 1, .36, 1);
  /* króm: sötét fém → fény → sötét fém; a háttér-pozíció mozgatása adja a végigfutó csillanást */
  --b-krom: linear-gradient(105deg, #16181b 0%, #25282c 44%, #8a9097 47.5%, #f4f5f6 50%, #8a9097 52.5%, #25282c 56%, #16181b 100%);
  --b-ezust: linear-gradient(90deg, #9aa0a6 0%, #eef0f2 30%, #ffffff 45%, #b9bec3 60%, #eef0f2 80%, #9aa0a6 100%);
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: var(--b-fekete);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mq-belepo *, .mq-belepo *::before, .mq-belepo *::after { box-sizing: border-box; }

.mq-belepo-lap { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; }

/* ------------------------------ FELSŐ RÉSZ ------------------------------ */
/* a tartalom egy középre fogott, keskeny sávban: logó | ezüstvonal | űrlap (széles kijelzőn sem esik szét) */
.mq-belepo-fent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(40px, 6vh, 90px) 32px;
}

.mq-belepo-marka { display: grid; gap: 26px; justify-items: start; justify-self: end; padding-right: clamp(40px, 6vw, 88px); animation: mq-b-beuszik 1s var(--b-lagy) both; }
.mq-belepo-logo { display: block; line-height: 0; }
.mq-belepo-logo:focus-visible { outline: 2px solid var(--b-fekete); outline-offset: 8px; }
.mq-belepo-logojel {
  display: block;
  width: clamp(240px, 27vw, 400px);
  aspect-ratio: 340.1575 / 55.6216;
  -webkit-mask: var(--mq-belepo-logo) center / contain no-repeat;
          mask: var(--mq-belepo-logo) center / contain no-repeat;
  background: var(--b-krom);
  background-size: 400% 100%;
  background-position: 100% 0;
  animation: mq-b-krom 7s 0.6s ease-in-out infinite;
}

.mq-belepo-szemoldok {
  display: flex; align-items: center; gap: 16px; margin: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--b-halvany);
}
.mq-belepo-ezustvonal {
  display: block; width: 56px; height: 2px;
  background: var(--b-ezust); background-size: 300% 100%;
  animation: mq-b-ezustvonal 3.2s linear infinite;
}

.mq-belepo-urlap-hely { position: relative; width: 100%; padding-left: clamp(40px, 6vw, 88px); animation: mq-b-beuszik 1s .12s var(--b-lagy) both; }
/* függőleges ezüstvonal a logó és az űrlap között — lassan végigcsillan */
.mq-belepo-urlap-hely::before {
  content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px;
  background: linear-gradient(180deg, rgba(185, 190, 195, 0) 0%, #c9cdd2 18%, #ffffff 42%, #9aa0a6 58%, #c9cdd2 82%, rgba(185, 190, 195, 0) 100%);
  background-size: 100% 300%;
  animation: mq-b-ezust-fugg 5s linear infinite;
}

/* ------------------------------ ŰRLAP (a három oldal közös markupja) ------------------------------ */
.mq-belepo .admin-auth-cim {
  margin: 0 0 10px; font-family: inherit; font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--b-fekete);
}
.mq-belepo .admin-auth-alcim { margin: 0 0 30px !important; font-size: .88rem; line-height: 1.6; color: #6a6a6a; }

.mq-belepo .form-label {
  margin-bottom: 2px; font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--b-fekete);
}
.mq-belepo .form-control {
  height: auto; padding: 12px 34px 12px 0 !important;
  border: 0; border-bottom: 1px solid var(--b-vonal); border-radius: 0; background: transparent;
  font-family: inherit; font-size: 1rem; color: var(--b-fekete);
  box-shadow: none !important;
  transition: border-color .3s var(--b-lagy);
}
.mq-belepo .form-control::placeholder { color: #b3b3b3; }
/* a böngésző automatikus kitöltése se tegyen kék dobozt a mezőre */
.mq-belepo .form-control:-webkit-autofill, .mq-belepo .form-control:-webkit-autofill:hover, .mq-belepo .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--b-fekete); caret-color: var(--b-fekete);
  transition: background-color 9999s ease-out 0s;
}
.mq-belepo .form-control:focus { border-bottom-color: var(--b-fekete); background: transparent; }
.mq-belepo .form-control.is-invalid { border-bottom-color: #b3261e; background-image: none; }
.mq-belepo .invalid-feedback { font-size: .78rem; color: #b3261e; }
.mq-belepo .admin-auth-mezo-ikon { display: none; }

/* a mező alatti ezüst fókuszcsík */
.mq-belepo .position-relative { position: relative; }
.mq-belepo .position-relative::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--b-ezust); background-size: 300% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--b-lagy);
  pointer-events: none;
}
.mq-belepo .position-relative:focus-within::after { transform: scaleX(1); animation: mq-b-ezustvonal 2.4s linear infinite; }

.mq-belepo .admin-auth-szem {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding: 6px 0 6px 10px; border: 0; background: transparent; color: var(--b-halvany); cursor: pointer; line-height: 1;
}
.mq-belepo .admin-auth-szem:hover, .mq-belepo .admin-auth-szem:focus-visible { color: var(--b-fekete); }
.mq-belepo .admin-auth-capslock { margin-top: 8px; font-size: .76rem; }

.mq-belepo a { color: var(--b-fekete); text-decoration: none; }
.mq-belepo .form-body a.small, .mq-belepo .form-body .small a {
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--b-halvany); transition: color .25s;
}
.mq-belepo .form-body a.small:hover { color: var(--b-fekete); }

/* gomb: szögletes fekete, egérre ezüst fénycsík söpör végig, a nyíl megnyúlik */
.mq-belepo .admin-auth-gomb {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  height: 54px; padding: 0 28px; border-radius: 0 !important;
  font-family: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  box-shadow: none !important;
  transition: background .3s, color .3s;
}
.mq-belepo .admin-auth-gomb i { display: none; }
.mq-belepo .btn-primary.admin-auth-gomb { background: var(--b-fekete); border: 1px solid var(--b-fekete); color: #fff; }
.mq-belepo .btn-light.admin-auth-gomb { background: transparent; border: 1px solid var(--b-fekete); color: var(--b-fekete); }
.mq-belepo .btn-light.admin-auth-gomb:hover { background: var(--b-fekete); color: #fff; }
.mq-belepo .admin-auth-gomb::after {
  content: ""; flex: 0 0 auto; width: 22px; height: 10px; margin-left: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='xMaxYMid meet'%3E%3Cpath d='M0 5h38M34 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") right center / auto 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='xMaxYMid meet'%3E%3Cpath d='M0 5h38M34 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") right center / auto 100% no-repeat;
  transition: width .35s var(--b-lagy);
}
.mq-belepo .btn-light.admin-auth-gomb::after { display: none; }
.mq-belepo .admin-auth-gomb::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(233, 236, 239, .0) 20%, rgba(233, 236, 239, .55) 50%, rgba(233, 236, 239, 0) 80%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none;
}
.mq-belepo .admin-auth-gomb:hover::before, .mq-belepo .admin-auth-gomb:focus-visible::before { animation: mq-b-fenycsik .9s var(--b-lagy); }
.mq-belepo .admin-auth-gomb:hover::after, .mq-belepo .admin-auth-gomb:focus-visible::after { width: 34px; }
.mq-belepo .admin-auth-gomb:focus-visible { outline: 2px solid var(--b-fekete); outline-offset: 3px; }
.mq-belepo .admin-auth-folyamatban { opacity: .7; }

/* üzenetek: lapos sáv, keret nélkül */
.mq-belepo .alert { border-radius: 0; padding: 12px 14px !important; margin-bottom: 26px; font-size: .86rem; }
.mq-belepo .alert .fs-3 { font-size: 1.1rem !important; }
.mq-belepo .bg-light-danger { background: #f8eeee !important; color: #6d1b16; }
.mq-belepo .bg-light-info { background: #f1f3f5 !important; color: #2a2e33; }
.mq-belepo .bg-light-success { background: #eef4ef !important; color: #1d4a26; }
.mq-belepo .bg-light-warning { background: #faf5e8 !important; color: #5b4510; }

.mq-belepo .admin-auth-lab {
  flex-direction: column; align-items: flex-start !important; gap: 10px !important;
  margin-top: 34px; padding-top: 0; border: 0;
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--b-halvany);
}
.mq-belepo .admin-auth-lab i { display: none; }
.mq-belepo .admin-auth-lab a { margin-left: 0 !important; color: var(--b-halvany); transition: color .25s; }
.mq-belepo .admin-auth-lab a::before { content: "← "; }
.mq-belepo .admin-auth-lab a:hover { color: var(--b-fekete); }

/* ------------------------------ FOTÓCSÍK ------------------------------ */
.mq-belepo-csik { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: clamp(130px, 22vh, 220px); }
.mq-belepo-csik span { position: relative; overflow: hidden; background: #f1f1f2; animation: mq-b-csik-be 1.1s calc(.25s + .08s * var(--mq-belepo-i, 0)) var(--b-lagy) both; }
.mq-belepo-csik img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--b-lagy); }
.mq-belepo-csik span:hover img { transform: scale(1.06); }
/* a csík felett egy ezüst hajszálvonal fut végig */
.mq-belepo-csik { position: relative; }
.mq-belepo-csik::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2px;
  background: var(--b-ezust); background-size: 300% 100%; animation: mq-b-ezustvonal 6s linear infinite;
}

/* ------------------------------ ANIMÁCIÓK ------------------------------ */
@keyframes mq-b-beuszik { from { opacity: 0; transform: translateY(16px); } }
@keyframes mq-b-csik-be { from { opacity: 0; transform: translateY(24px); } }
@keyframes mq-b-krom { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
@keyframes mq-b-ezustvonal { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes mq-b-ezust-fugg { from { background-position: 0 100%; } to { background-position: 0 -200%; } }
@keyframes mq-b-fenycsik { from { left: -60%; } to { left: 130%; } }

/* ------------------------------ RESZPONZÍV ------------------------------ */
@media (max-width: 991.98px) {
  .mq-belepo-fent { grid-template-columns: 1fr; gap: 40px; padding: 44px 24px 48px; align-content: start; max-width: 480px; }
  .mq-belepo-marka { justify-items: center; justify-self: center; padding-right: 0; }
  .mq-belepo-urlap-hely { padding-left: 0; }
  .mq-belepo-urlap-hely::before { display: none; }
  .mq-belepo-logojel { width: min(300px, 78vw); }
}
@media (max-width: 575.98px) {
  .mq-belepo-csik { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 110px; }
  .mq-belepo-csik span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-belepo *, .mq-belepo *::before, .mq-belepo *::after { animation: none !important; transition: none !important; }
  .mq-belepo-logojel { background-position: 50% 0; }
}