/* Huni terméktöltő — 6. kör: A KÉPES RÉSZ.
   Roland: „a képek úgyis négyzetesek — legyen egy nagy NÉGYZETES főkép, alatta
   pedig egyszerre csak HÁROM bélyegkép, azok viszonylag nagyban, és ha van
   negyedik, annak egy pici része látszódjon ki; oldalra lapozható."

   A régi hiba: a főkép doboza magas és keskeny volt, ezért a négyzetes
   termékfotó fölött-alatt hatalmas üres sáv maradt, a bélyegképek meg 42 px-esre
   zsugorodtak. Itt a főkép a lehető LEGNAGYOBB NÉGYZET, a maradék hely pedig
   a bélyegképeké. */

.kepkartya{gap:9px;padding:0;background:transparent;border:0;box-shadow:none}

/* ── két külön buborék: fent a termékkép, alatta a választó ─────────── */
.kbuborek{background:var(--lap);border:1px solid var(--keret);border-radius:12px;
  box-shadow:var(--arny-1);padding:9px;min-width:0}
.kbuborek.kfo{flex:1 1 auto;min-height:0;display:flex}
/* A bélyegsor sem ül fehér dobozban (Roland: sehol semmi káva) — a lapkák
   szabadon állnak, árnyékkal; a 3px párnázat a kijelölés-gyűrűnek kell. */
.kbuborek.kvalaszto{flex:none;background:transparent;border:0;box-shadow:none;padding:3px}

/* ── a főkép: A BUBORÉK MAGA A NÉGYZET ──────────────────────────────
   Roland: „ha 1:1-es a kép, miért téglalap? Ne legyen feleslegesen felül-alul
   oldalt térköz — konkrétan csak az 1×1-es kép legyen és semmi más."
   Ezért a buborék NEM egy magas doboz, amiben középen ül egy kis kép: a
   buborék maga a négyzet, a kép kitölti, a jelvények ráúsznak.

   A „legnagyobb négyzet, ami befér" a szélességet a maradék MAGASSÁGGAL is
   korlátozza (100cqh). A height:100% + max-width:100% páros erre nem jó —
   egymásnak feszülnek, és téglalap marad (mérve 511×583). */
.kfohely{flex:1 1 auto;min-height:0;display:grid;place-items:start center;
  container-type:size}
/* ROLAND VÉGSŐ SPECJE (2026-09-02): a nagykép 1:1-ben, NAGYÍTÁS NÉLKÜL,
   KÁVA NÉLKÜL — a kép maga a buborék: lekerekítés + lágy árnyék, semmi
   háttér, semmi keret, semmi belső térköz. A jelvények a képre úsznak. */
.kbuborek.kfo{position:relative;width:min(100%, 100cqh);aspect-ratio:1/1;
  padding:0;border:0;overflow:hidden;display:block;border-radius:16px;
  background:transparent;box-shadow:0 10px 28px rgba(19,26,44,.16)}
.kbuborek.kfo img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:16px}
/* ⭐ NEM NÉGYZETES KÉP (Roland, 2026-09-12): a behozott bolti fotók 20%-a
   fekvő vagy álló (mérve: 1975-ből 364 fekvő, 38 álló). Azokat a `cover`
   20-25%-kal LEVÁGNÁ oldalt — egy 601×445-ös dobozképről lemenne a logó és
   a szereplők, pont amit az átnézőnek látnia kell. Ilyenkor a kép TELJESEN
   látszik, a maradék hely pedig a kártya alapszíne — nem fehér keret a
   képen. A négyzetes képek (a 80%) továbbra is szélétől szélig kitöltenek. */
.kbuborek.kfo img.tel{object-fit:contain;background:var(--lap)}
.kbuborek.kfo .jel{position:absolute;left:9px;top:9px;padding:3px 9px;border-radius:999px;
  background:rgba(65,86,149,.92);color:#fff;font-size:10.5px;font-weight:600;z-index:2}
.kbuborek.kfo .szam{position:absolute;right:9px;bottom:9px;padding:3px 9px;border-radius:999px;
  background:rgba(19,26,44,.7);color:#fff;font-size:11px;font-variant-numeric:tabular-nums;z-index:2}
/* ⭐ „Eredeti fotó" — a fotós SZÁNDÉKA, nem elmaradt fehérítés. Narancs, hogy
   ne keveredjen a kék „Fő kép" jelvénnyel; ha mindkettő látszik, egymás alatt. */
.kbuborek.kfo .jel.eredeti{background:rgba(200,120,20,.94);top:9px;left:9px;bottom:auto;right:auto}
/* Roland (2026-09-04): „az eredeti fotó teljesen bal felül legyen, ne csak úgy
   random odahányva." Ugyanabban a sarokban ül, mint a „★ Fő kép"; ha mindkettő
   ott van, az eredeti-jelvény ALÁ kerül — egy oszlopban, ugyanazzal a bal éllel. */
.kbuborek.kfo .jel + .jel.eredeti{top:38px}
/* ⭐ „AI olvassa" jelvény (István, 2026-09-08) — lila, bal alul, hogy ne ütközzön a
   „Fő kép"/„Eredeti fotó" oszloppal és a jobb alsó számlálóval. */
.kbuborek.kfo .jel.ai{background:rgba(91,63,176,.94);top:auto;bottom:9px;left:9px;right:auto}
/* ⭐ „Csak nekünk" jelvény (Roland, 2026-09-09) — narancs, jobb felül; a telefon lakatjával */
.kbuborek.kfo .jel.belso{background:rgba(168,91,24,.94);top:9px;left:auto;right:9px;bottom:auto;
  display:inline-flex;align-items:center;gap:4px}
.kcsik .bk .belso{position:absolute;z-index:2;left:5px;bottom:5px;width:16px;height:16px;border-radius:50%;
  background:rgba(168,91,24,.94);color:#fff;display:grid;place-items:center}
.kcsik .bk .belso svg{width:9px;height:9px}
.kepgombok .g.belsogomb{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.kepgombok .g.belsogomb.be{border-color:#A85B18;color:#A85B18;background:#FFF3E8;font-weight:700}

.kcsik .bk .ai{position:absolute;z-index:2;right:5px;top:5px;width:16px;height:16px;border-radius:50%;
  background:rgba(91,63,176,.94);color:#fff;font-size:9px;display:grid;place-items:center}
.kepgombok .g.aigomb.be{border-color:#5B3FB0;color:#5B3FB0;background:#EFE9FF;font-weight:700}

.fokep .jel.eredeti{background:rgba(200,120,20,.94);top:37px}

/* ── a bélyegcsík: 3 teljes + a negyedikből egy csík ─────────────────── */
:root{ --csikkoz:8px; --lathato:3.35; }        /* 3 teljes + ~0,35 kikandikál */

.kcsikdoboz{position:relative;flex:none}
.kcsik{display:flex;gap:var(--csikkoz);overflow-x:auto;scrollbar-width:none}
.kcsik::-webkit-scrollbar{display:none}
/* Bélyegek: a kép maga a lapka — SE fehér vonal, SE belső keret, SE
   nagyítás. A kijelölést kívül futó kék gyűrű mutatja (box-shadow), ami nem
   csíp le a képből és nem enged fehér rést. */
/* ⛔ SAFARI-AKNA (Roland élőben fogta, 2026-09-02): az `aspect-ratio` a
   flex-sáv nyújtott elemein a Safariban NEM tartja a négyzetet — a lapka
   ellaposodott, a kép beúszott fehér sávokkal. A négyzetet ezért a
   padding-top trükk adja (mindenhol ugyanúgy működik), a kép abszolút
   kitöltéssel ül benne. */
.kcsik .bk{position:relative;flex:0 0 calc((100% - (var(--lathato) - 1) * var(--csikkoz)) / var(--lathato));
  align-self:flex-start;border-radius:9px;overflow:hidden;background:transparent;
  border:0;cursor:pointer;box-shadow:var(--arny-1);
  transition:box-shadow .14s}
.kcsik .bk::before{content:'';display:block;padding-top:100%}
/* ⛔ MÉRT HIBA (Roland a SAJÁT képemen fogta, 2026-09-02): a kijelölést KÍVÜL
   futó gyűrűvel rajzoltam (`box-shadow: 0 0 0 2px`), a bélyegsor viszont
   `overflow-x:auto` — a gyűrűt LEVÁGTA, a szélső lapkánál látványosan.
   A gyűrű ezért BEFELÉ megy, a képre rajzolva (::after + inset shadow):
   nem lóg ki, nem vágódik le, és nem csíp le a képből fehér rést sem. */
.kcsik .bk::after{content:'';position:absolute;inset:0;border-radius:9px;
  pointer-events:none;z-index:1;box-shadow:inset 0 0 0 0 transparent;
  transition:box-shadow .14s}
.kcsik .bk:hover::after{box-shadow:inset 0 0 0 2px var(--keret-2)}
.kcsik .bk.itt::after{box-shadow:inset 0 0 0 3px var(--kek)}
.kcsik .bk.itt{box-shadow:var(--arny-2)}
.kcsik .bk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;border-radius:9px}
.kcsik .bk .fo{position:absolute;z-index:2;left:5px;top:5px;width:16px;height:16px;border-radius:50%;
  background:rgba(65,86,149,.92);color:#fff;font-size:9px;display:grid;place-items:center}

/* lapozó nyilak a csík fölött */
.knyil{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border-radius:50%;border:1px solid var(--keret);background:rgba(255,255,255,.96);
  display:grid;place-items:center;box-shadow:var(--arny-2);font-size:15px;
  color:var(--halvany);z-index:3;opacity:0;transition:opacity .15s}
.knyil:hover{color:var(--szoveg)}
.knyil.bal{left:-4px} .knyil.jobb{right:-4px}
.kcsikdoboz:hover .knyil{opacity:1}
.knyil[disabled]{opacity:0 !important;pointer-events:none}

.kepgombok{flex:none;flex-wrap:wrap}

/* ⭐ EREDETI vagy FEHÉRÍTETT az átnézésen (Roland, 2026-09-03).
   Ugyanaz a kapcsoló-forma, mint a telefonos nagyításban — az átnéző ugyanazt
   a döntést hozza meg, ugyanabban a formában. Csak akkor jelenik meg, ha van
   fehérítés előtti változat. */
.kvaltozathely{flex:none}
.kvaltozat{display:flex;gap:3px;background:var(--papir-2);
  border-radius:999px;padding:3px;margin-top:7px}
.kvaltozat button{flex:1;border:0;background:none;border-radius:999px;
  padding:6px 8px;font-size:11.5px;font-weight:600;color:var(--halvany);
  cursor:pointer;font-family:inherit}
.kvaltozat button.itt{background:var(--lap);color:var(--kek);
  box-shadow:var(--arny-1)}
.kvaltozat button:focus-visible{outline:2px solid var(--kek);outline-offset:1px}

/* ⭐ A KÉSZÜLŐ KÉP az adminban (Roland, 2026-09-03) — ugyanaz a nyelv, mint a
   telefonon: halvány fátyol, pörgő karika, MÉRT másodperc. A kép már látszik
   alatta, csak még nem a végleges változat. */
.kbuborek.kfo .keszulreteg{position:absolute;inset:0;z-index:5;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(1.5px);border-radius:16px}
.keszulkarika{width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(65,86,149,.18);border-top-color:var(--kek);
  animation:keszulporog .8s linear infinite}
@keyframes keszulporog{to{transform:rotate(360deg)}}
.keszulmp{font-size:12.5px;font-weight:700;color:var(--kek);
  font-variant-numeric:tabular-nums}
.kcsik .bk.keszul{position:relative}
.kcsik .bk.keszul::after{content:'';position:absolute;inset:0;border-radius:10px;
  background:rgba(255,255,255,.6)}
.kcsik .bk.keszul::before{content:'';position:absolute;left:50%;top:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:2;
  border:2px solid rgba(65,86,149,.2);border-top-color:var(--kek);
  animation:keszulporog .8s linear infinite}
@media (prefers-reduced-motion: reduce){
  .keszulkarika,.kcsik .bk.keszul::before{animation:none}
}