/*
=================================================================
KARAOKE ONE – REFERENCIA OLDAL – TELJES CSS
2026-10-02

ALAP:
- az eredeti referencia-oldal CSS változatlanul megőrizve
- eredeti hero kinézet visszaállítva
- eredeti általános referencia szekciók visszaállítva
- „Cégek, akiknek a rendezvényén már dolgoztunk.” rész visszaállítva

KIEGÉSZÍTÉS:
- különálló galéria blokk kompatibilitás
- különálló alsó CTA blokk kompatibilitás
- nincs 100vw
- nincs overflow-x elrejtéssel elfedett hiba
=================================================================
*/


.ko-ref-hero{position:relative;overflow:hidden;width:100%;padding:27px 24px 29px;color:#ffffff;background:radial-gradient( circle at 14% 18%,rgba(255,67,200,.10) 0%,rgba(255,67,200,0) 29% ),radial-gradient( circle at 89% 72%,rgba(70,220,255,.085) 0%,rgba(70,220,255,0) 31% ),radial-gradient( circle at 72% 15%,rgba(135,91,255,.08) 0%,rgba(135,91,255,0) 28% ),linear-gradient( 112deg,#0e0e1b 0%,#141321 50%,#09141b 100% );isolation:isolate}.ko-ref-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient( 90deg,transparent 0%,rgba(255,67,200,.68) 18%,rgba(135,91,255,.90) 50%,rgba(74,218,255,.76) 82%,transparent 100% );box-shadow:0 0 14px rgba(135,91,255,.24);pointer-events:none}.ko-ref-hero::after{content:"";position:absolute;right:-120px;bottom:-190px;width:410px;height:410px;border-radius:50%;background:radial-gradient( circle,rgba(75,219,255,.07),transparent 68% );pointer-events:none}.ko-ref-hero-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto}.ko-ref-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 9px;color:rgba(255,255,255,.60);font-size:9.5px;line-height:1.3;font-weight:850;letter-spacing:1.65px;text-transform:uppercase}.ko-ref-eyebrow::before{content:"";width:28px;height:2px;flex:0 0 28px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#895cff,#50ddff );box-shadow:0 0 9px rgba(255,67,200,.45)}.ko-ref-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:#9b6bff;box-shadow:0 0 7px rgba(155,107,255,.75)}.ko-ref-title{max-width:820px;margin:0 0 9px;color:#ffffff;font-size:clamp(38px,4.4vw,58px);line-height:1.01;font-weight:850;letter-spacing:-1.8px}.ko-ref-title span{background:linear-gradient( 100deg,#ff78d6 0%,#ae8bff 50%,#6ce5ff 100% );-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ko-ref-title-line{display:block;width:52px;height:3px;margin:10px 0 10px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#875cff,#50dcff );box-shadow:0 0 10px rgba(136,91,255,.34)}.ko-ref-lead{max-width:700px;margin:0 0 14px;color:rgba(255,255,255,.60);font-size:14px;line-height:1.5;font-weight:400}.ko-ref-lead strong{color:rgba(255,255,255,.93);font-weight:800}.ko-ref-years{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:8px 11px;border:1px solid transparent;border-radius:11px;background:linear-gradient( rgba(12,14,29,.82),rgba(12,14,29,.82) ) padding-box,linear-gradient( 105deg,rgba(255,67,200,.50),rgba(133,91,255,.54),rgba(74,218,255,.50) ) border-box;box-shadow:0 7px 20px rgba(0,0,0,.11)}.ko-ref-years-number{font-size:19px;line-height:1;font-weight:850;background:linear-gradient( 100deg,#ff69d1,#a87eff,#5bdfff );-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ko-ref-years-text{color:rgba(255,255,255,.61);font-size:10px;line-height:1.3;font-weight:700}.ko-ref-proof{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.ko-ref-proof-item{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 9px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.58);font-size:9.5px;line-height:1.2;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.ko-ref-check{display:block;flex:0 0 5px;width:5px;height:5px;overflow:hidden;border-radius:50%;font-size:0;background:#db4cff;box-shadow:0 0 6px rgba(219,76,255,.70)}.ko-ref-proof-item:nth-child(2) .ko-ref-check{background:#906aff;box-shadow:0 0 6px rgba(144,106,255,.72)}.ko-ref-proof-item:nth-child(3) .ko-ref-check{background:#50dcff;box-shadow:0 0 6px rgba(80,220,255,.72)}.ko-ref-note{max-width:620px;margin:0;padding:0 0 0 11px;border-left:2px solid transparent;border-image:linear-gradient( 180deg,#ff43c8,#875cff,#50dcff ) 1;color:rgba(255,255,255,.35);font-size:10px;line-height:1.45}@media (max-width:980px){.ko-ref-hero{padding:24px 24px 26px}.ko-ref-title{font-size:46px}}@media (max-width:600px){.ko-ref-hero{padding:21px 18px 23px}.ko-ref-eyebrow{margin-bottom:7px;font-size:8.5px}.ko-ref-eyebrow::before{width:20px;flex-basis:20px}.ko-ref-title{margin-bottom:7px;font-size:34px;line-height:1.03;letter-spacing:-1px}.ko-ref-title-line{width:43px;margin:7px 0 8px}.ko-ref-lead{margin-bottom:11px;font-size:13px;line-height:1.45}.ko-ref-years{margin-bottom:11px;padding:7px 9px}.ko-ref-years-number{font-size:17px}.ko-ref-years-text{font-size:9px}.ko-ref-proof{gap:5px;margin-bottom:10px}.ko-ref-proof-item{min-height:26px;padding:0 8px;font-size:9px}.ko-ref-note{font-size:9.5px}}.ko-ref-section{position:relative;width:100%;padding:27px 24px 30px;overflow:hidden;background:radial-gradient( circle at 7% 16%,rgba(255,67,200,.055) 0%,rgba(255,67,200,0) 25% ),radial-gradient( circle at 94% 82%,rgba(74,218,255,.065) 0%,rgba(74,218,255,0) 28% ),#ffffff;color:#191a2b;box-sizing:border-box;isolation:isolate}.ko-ref-section *,.ko-ref-section *::before,.ko-ref-section *::after{box-sizing:border-box}.ko-ref-section-alt{background:radial-gradient( circle at 8% 16%,rgba(135,91,255,.055) 0%,rgba(135,91,255,0) 25% ),radial-gradient( circle at 92% 84%,rgba(74,218,255,.055) 0%,rgba(74,218,255,0) 28% ),#f7f8fc}.ko-ref-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient( 90deg,transparent 0%,rgba(255,67,200,.52) 18%,rgba(135,91,255,.72) 50%,rgba(74,218,255,.58) 82%,transparent 100% );box-shadow:0 0 11px rgba(135,91,255,.12);pointer-events:none}.ko-ref-container{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto}.ko-ref-section-head{max-width:760px;margin:0 auto 19px;text-align:center}.ko-ref-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 7px;padding:0;color:#665b9d;font-size:9.5px;line-height:1.3;font-weight:850;letter-spacing:1.65px;text-transform:uppercase}.ko-ref-kicker::before,.ko-ref-kicker::after{content:"";width:24px;height:2px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#895cff,#50ddff );box-shadow:0 0 7px rgba(139,91,255,.24)}.ko-ref-heading{max-width:780px;margin:0 auto 8px;color:#1b1c2b;font-size:clamp(30px,3.2vw,42px);line-height:1.05;font-weight:850;letter-spacing:-1.2px}.ko-ref-heading-accent{color:#c83ab8 !important;background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important;-webkit-text-fill-color:#c83ab8 !important}.ko-ref-heading-line{display:block;width:46px;height:3px;margin:9px auto 10px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#875cff,#50dcff );box-shadow:0 0 9px rgba(135,91,255,.24)}.ko-ref-description{max-width:670px;margin:0 auto;color:#6a6d7d;font-size:13.5px;line-height:1.5}.ko-ref-description strong{color:#2a2c3c;font-weight:780}.ko-ref-shortcode{position:relative;width:100%;margin-top:17px}.ko-ref-shortcode::before{content:"";position:absolute;z-index:-1;inset:-8px;border:1px solid rgba(124,94,190,.07);border-radius:18px;background:rgba(255,255,255,.34);box-shadow:0 7px 25px rgba(46,38,110,.025);pointer-events:none}@media (max-width:980px){.ko-ref-section{padding:24px 24px 26px}.ko-ref-section-head{margin-bottom:17px}}@media (max-width:767px){.ko-ref-section{padding:21px 17px 23px}.ko-ref-section-head{margin-bottom:15px;text-align:left}.ko-ref-kicker{font-size:8.5px}.ko-ref-kicker::after{display:none}.ko-ref-kicker::before{width:20px}.ko-ref-heading{margin:0 0 6px;font-size:29px;line-height:1.05;letter-spacing:-.85px}.ko-ref-heading-line{width:40px;margin:7px 0 8px}.ko-ref-description{margin:0;font-size:12.8px;line-height:1.45}.ko-ref-shortcode{margin-top:14px}.ko-ref-shortcode::before{inset:-5px;border-radius:14px}}@media (max-width:480px){.ko-ref-section{padding-left:15px;padding-right:15px}.ko-ref-heading{font-size:27px}}.ko-ref-locations{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:24px 0 26px;box-sizing:border-box}.ko-ref-locations *,.ko-ref-locations *::before,.ko-ref-locations *::after{box-sizing:border-box}.ko-ref-locations::before{content:"";display:block;width:100%;height:1px;margin-bottom:22px;background:linear-gradient( 90deg,transparent 0%,rgba(255,67,200,.45) 18%,rgba(135,91,255,.67) 50%,rgba(74,218,255,.55) 82%,transparent 100% );box-shadow:0 0 10px rgba(135,91,255,.11)}.ko-ref-locations-head{max-width:760px;margin:0 auto 18px;text-align:center}.ko-ref-locations-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 7px;color:#625d91;font-size:9.5px;line-height:1.3;font-weight:850;letter-spacing:1.65px;text-transform:uppercase}.ko-ref-locations-kicker::before,.ko-ref-locations-kicker::after{content:"";width:24px;height:2px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#895cff,#50ddff );box-shadow:0 0 7px rgba(139,91,255,.22)}.ko-ref-locations-title{max-width:780px;margin:0 auto 7px !important;padding:0 !important;color:#1b1c2b !important;font-size:clamp(30px,3.2vw,42px) !important;line-height:1.05 !important;font-weight:850 !important;letter-spacing:-1.15px !important}.ko-ref-locations-title-accent{background:linear-gradient( 100deg,#d63cbc 0%,#7354df 52%,#18a8c7 100% );-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ko-ref-locations-line{display:block;width:46px;height:3px;margin:9px auto 9px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#875cff,#50dcff );box-shadow:0 0 9px rgba(135,91,255,.23)}.ko-ref-locations-description{max-width:670px;margin:0 auto;color:#696c7c;font-size:13.5px;line-height:1.5}.ko-ref-locations-description strong{color:#292b3c;font-weight:780}.ko-ref-locations-types{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:13px}.ko-ref-location-type{display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:0 9px;border:1px solid rgba(115,88,190,.13);border-radius:999px;background:rgba(255,255,255,.68);color:#626578;font-size:9.5px;line-height:1.2;font-weight:700;box-shadow:0 3px 11px rgba(51,43,100,.025)}.ko-ref-location-type::before{content:"";width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#d94bd0;box-shadow:0 0 6px rgba(217,75,208,.58)}.ko-ref-location-type:nth-child(2)::before{background:#8b68ef;box-shadow:0 0 6px rgba(139,104,239,.60)}.ko-ref-location-type:nth-child(3)::before{background:#6176f3;box-shadow:0 0 6px rgba(97,118,243,.58)}.ko-ref-location-type:nth-child(4)::before{background:#35bdd8;box-shadow:0 0 6px rgba(53,189,216,.62)}.ko-ref-locations-shortcode{position:relative;width:100%;margin-top:17px}.ko-ref-locations-shortcode::before{content:"";position:absolute;z-index:-1;inset:-7px;border:1px solid rgba(120,93,187,.065);border-radius:17px;background:rgba(255,255,255,.28);box-shadow:0 7px 24px rgba(46,38,110,.022);pointer-events:none}@media (max-width:980px){.ko-ref-locations{padding:21px 0 23px}.ko-ref-locations::before{margin-bottom:18px}}@media (max-width:767px){.ko-ref-locations{padding:18px 17px 20px}.ko-ref-locations::before{margin-bottom:15px}.ko-ref-locations-head{margin-bottom:15px;text-align:left}.ko-ref-locations-kicker{font-size:8.5px}.ko-ref-locations-kicker::after{display:none}.ko-ref-locations-kicker::before{width:20px}.ko-ref-locations-title{margin:0 0 6px !important;font-size:29px !important;line-height:1.05 !important;letter-spacing:-.8px !important}.ko-ref-locations-line{width:40px;margin:7px 0 8px}.ko-ref-locations-description{margin:0;font-size:12.8px;line-height:1.45}.ko-ref-locations-types{justify-content:flex-start;margin-top:11px}.ko-ref-location-type{min-height:25px;padding:0 8px;font-size:9px}.ko-ref-locations-shortcode{margin-top:14px}.ko-ref-locations-shortcode::before{inset:-5px;border-radius:14px}}@media (max-width:480px){.ko-ref-locations{padding-left:15px;padding-right:15px}.ko-ref-locations-title{font-size:27px !important}}.ko-ref-cta{position:relative;overflow:hidden;width:100%;padding:28px 24px 30px;color:#ffffff;background:radial-gradient( circle at 15% 15%,rgba(255,67,200,.11) 0%,rgba(255,67,200,0) 30% ),radial-gradient( circle at 88% 78%,rgba(73,218,255,.09) 0%,rgba(73,218,255,0) 30% ),radial-gradient( circle at 55% 10%,rgba(132,91,255,.07) 0%,rgba(132,91,255,0) 28% ),linear-gradient( 112deg,#0d0d1b 0%,#141321 50%,#08141b 100% );isolation:isolate}.ko-ref-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient( 90deg,transparent 0%,rgba(255,67,200,.70) 18%,rgba(135,91,255,.92) 50%,rgba(73,218,255,.78) 82%,transparent 100% );box-shadow:0 0 14px rgba(135,91,255,.25);pointer-events:none}.ko-ref-cta::after{content:"";position:absolute;right:-130px;bottom:-200px;width:420px;height:420px;border-radius:50%;background:radial-gradient( circle,rgba(74,219,255,.07),transparent 68% );pointer-events:none}.ko-ref-cta-inner{position:relative;z-index:2;width:100%;max-width:850px;margin:0 auto;text-align:center}.ko-ref-cta-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;color:rgba(255,255,255,.57);font-size:9.5px;line-height:1.3;font-weight:850;letter-spacing:1.65px;text-transform:uppercase}.ko-ref-cta-kicker::before,.ko-ref-cta-kicker::after{content:"";width:24px;height:2px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#895cff,#50ddff );box-shadow:0 0 8px rgba(143,87,255,.32)}.ko-ref-cta-title{max-width:760px;margin:0 auto !important;padding:0 !important;color:#ffffff !important;font-size:clamp(31px,3.5vw,46px);line-height:1.04;font-weight:850;letter-spacing:-1.35px}.ko-ref-cta-title span{display:block;background:linear-gradient( 100deg,#ff72d4 0%,#a888ff 50%,#65e3ff 100% );-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ko-ref-cta-line{display:block;width:48px;height:3px;margin:10px auto 10px;border-radius:100px;background:linear-gradient( 90deg,#ff43c8,#875cff,#50dcff );box-shadow:0 0 10px rgba(135,91,255,.34)}.ko-ref-cta-text{max-width:650px;margin:0 auto 15px;color:rgba(255,255,255,.59);font-size:14px;line-height:1.5}.ko-ref-cta-text strong{color:rgba(255,255,255,.92);font-weight:780}.ko-ref-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:11px;background:linear-gradient( rgba(12,14,29,.92),rgba(12,14,29,.92) ) padding-box,linear-gradient( 105deg,#ff43c8 0%,#855cff 52%,#4fdcff 100% ) border-box;color:#ffffff !important;text-decoration:none !important;font-size:12.5px;line-height:1;font-weight:780;box-shadow:0 9px 24px rgba(90,63,192,.17);transition:transform .18s ease,box-shadow .18s ease}.ko-ref-cta-button::after{content:"→";font-size:16px;transition:transform .18s ease}.ko-ref-cta-button:hover{color:#ffffff !important;transform:translateY(-2px);box-shadow:0 12px 29px rgba(105,70,225,.25)}.ko-ref-cta-button:hover::after{transform:translateX(3px)}.ko-ref-cta-note{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin:10px auto 0;color:rgba(255,255,255,.38);font-size:9.5px;line-height:1.4}.ko-ref-cta-note span{display:inline-flex;align-items:center;gap:5px}.ko-ref-cta-note span::before{content:"";width:4px;height:4px;border-radius:50%;background:#9b6bff;box-shadow:0 0 5px rgba(155,107,255,.65)}.ko-ref-cta-note span:nth-child(2)::before{background:#50dcff;box-shadow:0 0 5px rgba(80,220,255,.65)}@media (max-width:980px){.ko-ref-cta{padding:25px 24px 27px}}@media (max-width:767px){.ko-ref-cta{padding:21px 18px 23px}.ko-ref-cta-inner{text-align:left}.ko-ref-cta-kicker{font-size:8.5px}.ko-ref-cta-kicker::after{display:none}.ko-ref-cta-kicker::before{width:20px}.ko-ref-cta-title{margin:0 !important;font-size:30px;line-height:1.05;letter-spacing:-.85px}.ko-ref-cta-line{width:41px;margin:8px 0 9px}.ko-ref-cta-text{margin:0 0 13px;font-size:13px;line-height:1.46}.ko-ref-cta-button{width:100%;min-height:44px;font-size:12px}.ko-ref-cta-note{justify-content:flex-start;margin-top:9px;font-size:9px}}@media (max-width:480px){.ko-ref-cta{padding-left:15px;padding-right:15px}.ko-ref-cta-title{font-size:28px}}

/* KAO 1.3.31 — compatibility for reference imports created without the outer .ko-ref-section wrapper.
 * Existing already-imported pages receive the same spacing immediately; freshly imported pages use the wrapper below. */
body.kao-theme .ko-ref-container{box-sizing:border-box;max-width:1228px;padding:27px 24px 30px}
body.kao-theme .ko-ref-section>.ko-ref-container{max-width:1180px;padding:0}
@media(max-width:980px){body.kao-theme .ko-ref-container{padding:24px 24px 26px}body.kao-theme .ko-ref-section>.ko-ref-container{padding:0}}
@media(max-width:767px){body.kao-theme .ko-ref-container{padding:21px 17px 23px}body.kao-theme .ko-ref-section>.ko-ref-container{padding:0}}
@media(max-width:480px){body.kao-theme .ko-ref-container{padding-left:15px;padding-right:15px}body.kao-theme .ko-ref-section>.ko-ref-container{padding:0}}


/* =========================================================
   KARAOKE ONE – REFERENCIA OLDAL
   JAVÍTÁS A KÜLÖN GALÉRIA + ALSÓ CTA BLOKKHOZ

   FONTOS:
   - a herohoz NEM nyúl
   - a céges referencia részhez NEM nyúl
   - nem használ 100vw-t
   - nem okoz vízszintes scrollt
   ========================================================= */


/* =========================================================
   KÉPGALÉRIA FEJLÉC
   A jelenlegi HTML class-nevei:
   .ko-ref-gallery-kicker
   .ko-ref-gallery-title
   .ko-ref-gallery-text
   ========================================================= */

.ko-ref-gallery-block{
  position:relative;
  width:100%;
  min-width:0;
  margin:0;
  padding:30px 24px 34px;
  box-sizing:border-box;
  background:#fff;
  color:#191a2b;
}

.ko-ref-gallery-block *,
.ko-ref-gallery-block *::before,
.ko-ref-gallery-block *::after{
  box-sizing:border-box;
}

.ko-ref-gallery-block::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,67,200,.45) 18%,
    rgba(135,91,255,.67) 50%,
    rgba(74,218,255,.55) 82%,
    transparent 100%
  );
  box-shadow:0 0 10px rgba(135,91,255,.11);
  pointer-events:none;
}

.ko-ref-gallery-head{
  width:100%;
  max-width:1180px;
  margin:0 auto 20px;
}

.ko-ref-gallery-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 9px;
  color:#665b9d;
  font-size:9.5px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:1.65px;
  text-transform:uppercase;
}

.ko-ref-gallery-kicker::before{
  content:"";
  width:28px;
  height:2px;
  flex:0 0 28px;
  border-radius:100px;
  background:linear-gradient(
    90deg,
    #ff43c8,
    #895cff,
    #50ddff
  );
  box-shadow:0 0 8px rgba(139,91,255,.24);
}

.ko-ref-gallery-title{
  max-width:900px;
  margin:0 0 10px !important;
  padding:0 !important;
  color:#1b1c2b !important;
  font-size:clamp(31px,3.2vw,44px) !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  letter-spacing:-1.25px !important;
}

.ko-ref-gallery-title span{
  background:linear-gradient(
    100deg,
    #d63cbc 0%,
    #7354df 52%,
    #18a8c7 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ko-ref-gallery-text{
  max-width:760px;
  margin:0;
  color:#696c7c;
  font-size:13.5px;
  line-height:1.55;
}

.ko-ref-gallery-text strong{
  color:#292b3c;
  font-weight:780;
}


/* =========================================================
   KÉPRÁCS
   ========================================================= */

.ko-ref-gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
  min-width:0;
  margin:0 auto;
  padding:0;
}

.ko-ref-gallery-item{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid transparent;
  border-radius:14px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(
      90deg,
      #ff43c8,
      #875cff,
      #50dcff
    ) border-box;
  box-shadow:0 6px 20px rgba(43,36,91,.08);
  cursor:zoom-in;
  appearance:none;
  -webkit-appearance:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.ko-ref-gallery-item img{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.ko-ref-gallery-item::after{
  content:"+";
  position:absolute;
  right:9px;
  bottom:9px;
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(9,9,22,.72);
  color:#fff;
  font-size:20px;
  line-height:1;
  font-weight:300;
  opacity:0;
  transform:scale(.85);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transition:.2s ease;
}

@media (hover:hover){
  .ko-ref-gallery-item:hover{
    transform:translateY(-2px);
    box-shadow:0 11px 27px rgba(55,43,125,.15);
  }

  .ko-ref-gallery-item:hover img{
    transform:scale(1.025);
  }

  .ko-ref-gallery-item:hover::after{
    opacity:1;
    transform:scale(1);
  }
}


/* =========================================================
   ALSÓ CTA
   A jelenlegi HTML class-nevei:
   .ko-ref-next*
   ========================================================= */

.ko-ref-next{
  position:relative;
  overflow:hidden;
  width:100%;
  min-width:0;
  margin:0;
  padding:28px 24px 30px;
  box-sizing:border-box;
  color:#fff;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(255,67,200,.11) 0%,
      rgba(255,67,200,0) 30%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(73,218,255,.09) 0%,
      rgba(73,218,255,0) 30%
    ),
    radial-gradient(
      circle at 55% 10%,
      rgba(132,91,255,.07) 0%,
      rgba(132,91,255,0) 28%
    ),
    linear-gradient(
      112deg,
      #0d0d1b 0%,
      #141321 50%,
      #08141b 100%
    );
  isolation:isolate;
}

.ko-ref-next *,
.ko-ref-next *::before,
.ko-ref-next *::after{
  box-sizing:border-box;
}

.ko-ref-next::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,67,200,.70) 18%,
    rgba(135,91,255,.92) 50%,
    rgba(73,218,255,.78) 82%,
    transparent 100%
  );
  box-shadow:0 0 14px rgba(135,91,255,.25);
  pointer-events:none;
}

.ko-ref-next::after{
  content:"";
  position:absolute;
  right:-130px;
  bottom:-200px;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(74,219,255,.07),
    transparent 68%
  );
  pointer-events:none;
}

.ko-ref-next-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:850px;
  margin:0 auto;
  text-align:center;
}

.ko-ref-next-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  color:rgba(255,255,255,.57);
  font-size:9.5px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:1.65px;
  text-transform:uppercase;
}

.ko-ref-next-kicker::before,
.ko-ref-next-kicker::after{
  content:"";
  width:24px;
  height:2px;
  border-radius:100px;
  background:linear-gradient(
    90deg,
    #ff43c8,
    #895cff,
    #50ddff
  );
  box-shadow:0 0 8px rgba(143,87,255,.32);
}

.ko-ref-next-title{
  max-width:760px;
  margin:0 auto !important;
  padding:0 !important;
  color:#fff !important;
  font-size:clamp(31px,3.5vw,46px) !important;
  line-height:1.04 !important;
  font-weight:850 !important;
  letter-spacing:-1.35px !important;
}

.ko-ref-next-title span{
  display:block;
  background:linear-gradient(
    100deg,
    #ff72d4 0%,
    #a888ff 50%,
    #65e3ff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ko-ref-next-line{
  display:block;
  width:48px;
  height:3px;
  margin:10px auto;
  border-radius:100px;
  background:linear-gradient(
    90deg,
    #ff43c8,
    #875cff,
    #50dcff
  );
  box-shadow:0 0 10px rgba(135,91,255,.34);
}

.ko-ref-next-text{
  max-width:650px;
  margin:0 auto 15px;
  color:rgba(255,255,255,.59);
  font-size:14px;
  line-height:1.5;
}

.ko-ref-next-text strong{
  color:rgba(255,255,255,.92);
  font-weight:780;
}

.ko-ref-next-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:11px;
  background:
    linear-gradient(
      rgba(12,14,29,.92),
      rgba(12,14,29,.92)
    ) padding-box,
    linear-gradient(
      105deg,
      #ff43c8 0%,
      #855cff 52%,
      #4fdcff 100%
    ) border-box;
  color:#fff !important;
  text-decoration:none !important;
  font-size:12.5px;
  line-height:1;
  font-weight:780;
  box-shadow:0 9px 24px rgba(90,63,192,.17);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.ko-ref-next-btn:hover{
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 12px 29px rgba(105,70,225,.25);
}

.ko-ref-next-arrow{
  display:inline-block;
  font-size:16px;
  line-height:1;
  transition:transform .18s ease;
}

.ko-ref-next-btn:hover .ko-ref-next-arrow{
  transform:translateX(3px);
}

.ko-ref-next-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:10px auto 0;
  color:rgba(255,255,255,.38);
  font-size:9.5px;
  line-height:1.4;
}

.ko-ref-next-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.ko-ref-next-meta span::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:#9b6bff;
  box-shadow:0 0 5px rgba(155,107,255,.65);
}

.ko-ref-next-meta span:nth-child(2)::before{
  background:#50dcff;
  box-shadow:0 0 5px rgba(80,220,255,.65);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .ko-ref-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media(max-width:767px){

  .ko-ref-gallery-block{
    padding:22px 17px 24px;
  }

  .ko-ref-gallery-block::before{
    left:17px;
    right:17px;
  }

  .ko-ref-gallery-head{
    margin-bottom:15px;
  }

  .ko-ref-gallery-kicker{
    margin-bottom:7px;
    font-size:8.5px;
  }

  .ko-ref-gallery-kicker::before{
    width:20px;
    flex-basis:20px;
  }

  .ko-ref-gallery-title{
    margin-bottom:8px !important;
    font-size:29px !important;
    line-height:1.05 !important;
    letter-spacing:-.85px !important;
  }

  .ko-ref-gallery-text{
    font-size:12.8px;
    line-height:1.45;
  }

  .ko-ref-gallery{
    gap:8px;
  }

  .ko-ref-gallery-item{
    aspect-ratio:4/3;
    border-radius:11px;
  }

  .ko-ref-gallery-item::after{
    display:none;
  }


  .ko-ref-next{
    padding:21px 18px 23px;
  }

  .ko-ref-next-inner{
    text-align:left;
  }

  .ko-ref-next-kicker{
    font-size:8.5px;
  }

  .ko-ref-next-kicker::after{
    display:none;
  }

  .ko-ref-next-kicker::before{
    width:20px;
  }

  .ko-ref-next-title{
    margin:0 !important;
    font-size:30px !important;
    line-height:1.05 !important;
    letter-spacing:-.85px !important;
  }

  .ko-ref-next-line{
    width:41px;
    margin:8px 0 9px;
  }

  .ko-ref-next-text{
    margin:0 0 13px;
    font-size:13px;
    line-height:1.46;
  }

  .ko-ref-next-btn{
    width:100%;
    min-height:44px;
    font-size:12px;
  }

  .ko-ref-next-meta{
    justify-content:flex-start;
    margin-top:9px;
    font-size:9px;
  }

}


@media(max-width:480px){

  .ko-ref-gallery-block{
    padding-left:15px;
    padding-right:15px;
  }

  .ko-ref-gallery-block::before{
    left:15px;
    right:15px;
  }

  .ko-ref-gallery-title{
    font-size:27px !important;
  }

  .ko-ref-next{
    padding-left:15px;
    padding-right:15px;
  }

  .ko-ref-next-title{
    font-size:28px !important;
  }

}

/* =========================================================
   REFERENCIA LIGHTBOX – VIEWPORTOS, KOMPAKT POPUP
   ========================================================= */

body.ko-ref-lightbox-open{
  overflow:hidden;
}

/*
 * A JS a lightboxot közvetlenül a <body> alá mozgatja.
 * Így a KAO Builder bármilyen wrapper/transform beállítása
 * nem tudja levágni vagy konténerbe zárni a popupot.
 */
.ko-ref-lightbox{
  position:fixed !important;
  z-index:999999 !important;
  inset:0 !important;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100dvh;
  margin:0;
  padding:16px 78px;

  box-sizing:border-box;

  background:rgba(6,7,17,.86);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.ko-ref-lightbox[hidden]{
  display:none !important;
}

/*
 * Nincs több 86vh magas fix "színpad".
 * A stage a kép tényleges méretéhez igazodik.
 */
.ko-ref-lightbox-stage{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:auto;
  height:auto;

  max-width:calc(100dvw - 176px);
  max-height:calc(100dvh - 32px);

  margin:0;
  padding:0;
}

/*
 * A kép a viewportból elérhető legnagyobb területet használja.
 * Így a 16:9-es képeknél csak minimális sötét rész marad.
 */
.ko-ref-lightbox-stage img{
  display:block;

  width:auto;
  height:auto;

  max-width:calc(100dvw - 176px);
  max-height:calc(100dvh - 32px);

  object-fit:contain;

  border-radius:14px;

  background:#090a14;

  box-shadow:
    0 22px 70px rgba(0,0,0,.46);
}


/* ---------------------------------------------------------
   VEZÉRLŐK
   --------------------------------------------------------- */

.ko-ref-lightbox-close,
.ko-ref-lightbox-nav{
  position:absolute;
  z-index:1000000;

  display:grid;
  place-items:center;

  margin:0;
  padding:0;

  border:1px solid rgba(255,255,255,.16);

  background:rgba(16,18,36,.76);

  color:#fff;

  cursor:pointer;

  box-shadow:0 8px 24px rgba(0,0,0,.18);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.ko-ref-lightbox-close{
  top:18px;
  right:18px;

  width:46px;
  height:46px;

  border-radius:50%;

  font-size:29px;
  line-height:1;
}

.ko-ref-lightbox-nav{
  top:50%;

  width:50px;
  height:62px;

  border-radius:15px;

  font-size:38px;
  line-height:1;

  transform:translateY(-50%);
}

.ko-ref-lightbox-prev{
  left:18px;
}

.ko-ref-lightbox-next{
  right:18px;
}

@media (hover:hover){
  .ko-ref-lightbox-close:hover{
    border-color:rgba(117,87,255,.78);
    background:#17172d;
    transform:scale(1.04);
  }

  .ko-ref-lightbox-nav:hover{
    border-color:rgba(117,87,255,.78);
    background:#17172d;
    transform:translateY(-50%) scale(1.04);
  }
}


/* ---------------------------------------------------------
   SZÁMLÁLÓ
   --------------------------------------------------------- */

.ko-ref-lightbox-counter{
  position:absolute;

  left:50%;
  bottom:10px;

  z-index:2;

  transform:translateX(-50%);

  padding:6px 10px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;

  background:rgba(8,9,20,.74);

  color:rgba(255,255,255,.84);

  font-size:11px;
  line-height:1;
  font-weight:800;

  box-shadow:0 5px 16px rgba(0,0,0,.18);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:900px){

  .ko-ref-lightbox{
    padding:14px 62px;
  }

  .ko-ref-lightbox-stage,
  .ko-ref-lightbox-stage img{
    max-width:calc(100dvw - 140px);
    max-height:calc(100dvh - 28px);
  }

  .ko-ref-lightbox-nav{
    width:44px;
    height:56px;
  }

  .ko-ref-lightbox-prev{
    left:10px;
  }

  .ko-ref-lightbox-next{
    right:10px;
  }

}


/* ---------------------------------------------------------
   MOBIL
   --------------------------------------------------------- */

@media(max-width:600px){

  .ko-ref-lightbox{
    align-items:center;

    padding:
      max(54px, env(safe-area-inset-top))
      10px
      max(62px, env(safe-area-inset-bottom));
  }

  .ko-ref-lightbox-stage{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 116px);
  }

  .ko-ref-lightbox-stage img{
    width:auto;
    height:auto;

    max-width:100%;
    max-height:calc(100dvh - 116px);

    border-radius:10px;
  }

  .ko-ref-lightbox-close{
    top:max(10px, env(safe-area-inset-top));
    right:10px;

    width:42px;
    height:42px;

    font-size:27px;
  }

  /*
   * Mobilon a nyilak alul vannak, hogy ne takarják a képet.
   */
  .ko-ref-lightbox-nav{
    top:auto;
    bottom:max(10px, env(safe-area-inset-bottom));

    width:44px;
    height:44px;

    border-radius:50%;

    transform:none;

    font-size:32px;
  }

  .ko-ref-lightbox-prev{
    left:calc(50% - 54px);
  }

  .ko-ref-lightbox-next{
    right:calc(50% - 54px);
  }

  @media (hover:hover){
    .ko-ref-lightbox-nav:hover{
      transform:scale(1.04);
    }
  }

  .ko-ref-lightbox-counter{
    bottom:8px;

    padding:5px 9px;

    font-size:10px;
  }

}