/* ═══════════════════════════════════════════════════════════ KUTI KLIKUESHME — SHIGJETA CEPASH + OVERLAY FULLSCREEN ═══════════════════════════════════════════════════════════ */ .kuti-klikueshme { cursor: pointer; } .kuti-cepat { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; } /* ── SHIGJETAT E CEPAVE ── */ .cep { position: absolute; width: 22px; height: 15px; pointer-events: none; display: block; } .cep svg { width: 100%; height: 100%; overflow: visible; display: block; } .cep svg polygon { fill: #39ff14; stroke: #1a8a00; stroke-width: 0.5; stroke-linejoin: round; filter: drop-shadow(0 0 2px #39ff14) drop-shadow(0 0 4px rgba(57,255,20,0.4)); } .cep-tl { top: 18px; left: 18px; } .cep-tr { top: 18px; right: 18px; } .cep-bl { bottom: 18px; left: 18px; } .cep-br { bottom: 18px; right: 18px; } .kuti-cepat.luaj { opacity: 1; } .kuti-cepat.luaj .cep-tl { animation: cep-tl-anim 3s ease-in-out forwards; } .kuti-cepat.luaj .cep-tr { animation: cep-tr-anim 3s ease-in-out forwards; } .kuti-cepat.luaj .cep-bl { animation: cep-bl-anim 3s ease-in-out forwards; } .kuti-cepat.luaj .cep-br { animation: cep-br-anim 3s ease-in-out forwards; } .kuti-cepat.fshih { display: none; } /* ═══════════════════════════════════════════════ OVERLAY — panel nga poshtë, 50% lartësi ekrani position:fixed ndaj direkt (nga footer.php) ═══════════════════════════════════════════════ */ /* ── OVERLAY BACKDROP ── */ #kuti-fs-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background 0.3s ease; } #kuti-fs-overlay.aktiv { opacity: 1; pointer-events: all; background: rgba(0,0,0,0.65); } /* ── MODAL — 70vw x 70vh ── */ #kuti-fs-inner { position: relative; background: #0a0a0a; display: flex; flex-direction: row; overflow: hidden; border-radius: 8px; width: 70vw; height: 70vh; margin: 0; transform: scale(0.94); transition: transform 0.3s ease; } #kuti-fs-overlay.aktiv #kuti-fs-inner { transform: scale(1); } /* Mobile portrait — fullscreen, video mbush të gjithë ekranin */ @media only screen and (max-width: 768px) and (orientation: portrait) { #kuti-fs-overlay, #kuti-fs-overlay.aktiv { background: #000 !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 0 !important; overflow: hidden !important; } #kuti-fs-inner { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; transform: none !important; margin: 0 !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; } .kuti-fs-media, .kuti-fs-thumb { position: absolute !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; flex: none !important; background-color: #000 !important; background-size: cover !important; background-position: center !important; overflow: hidden !important; } .kuti-fs-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .kuti-fs-media ~ .kuti-fs-body, .kuti-fs-thumb ~ .kuti-fs-body { display: none !important; } .kuti-fs-body:first-child, .kuti-fs-body--vetem-tekst { display: flex !important; flex-direction: column !important; width: 100vw !important; height: 100dvh !important; padding: 32px 24px 32px !important; overflow-y: auto !important; background: transparent !important; justify-content: flex-start !important; align-items: flex-start !important; scroll-snap-type: none !important; } } /* Mobile landscape — fullscreen, vetëm për mobile (jo desktop) */ @media only screen and (orientation: landscape) and (max-width: 1024px) { #kuti-fs-overlay, #kuti-fs-overlay.aktiv { background: #000 !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 0 !important; overflow: hidden !important; } #kuti-fs-inner { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; transform: none !important; margin: 0 !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; } .kuti-fs-media, .kuti-fs-thumb { position: absolute !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; flex: none !important; background-color: #000 !important; background-size: cover !important; background-position: center !important; overflow: hidden !important; } .kuti-fs-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .kuti-fs-media ~ .kuti-fs-body, .kuti-fs-thumb ~ .kuti-fs-body { display: none !important; } .kuti-fs-body:first-child, .kuti-fs-body--vetem-tekst { display: flex !important; flex-direction: column !important; width: 100vw !important; height: 100dvh !important; padding: 32px 24px 32px !important; overflow-y: auto !important; background: transparent !important; justify-content: flex-start !important; align-items: flex-start !important; scroll-snap-type: none !important; } } /* ── DESKTOP (min-width: 1025px) ── */ @media screen and (min-width: 1025px) { #kuti-fs-overlay, #kuti-fs-overlay.aktiv { background: rgba(0,0,0,0) !important; align-items: flex-start !important; justify-content: center !important; padding: 20px 0 0 0 !important; overflow: visible !important; pointer-events: none !important; } #kuti-fs-overlay.aktiv { opacity: 1 !important; pointer-events: all !important; } #kuti-fs-inner { width: 70vw !important; height: 70vh !important; border-radius: 8px !important; transform: none !important; transition: none !important; margin: 0 !important; flex-direction: row !important; overflow: hidden !important; } #kuti-fs-overlay.aktiv #kuti-fs-inner { transform: none !important; } .kuti-fs-media, .kuti-fs-thumb { flex: 1 1 100% !important; position: relative !important; align-self: stretch !important; overflow: hidden !important; background-size: cover !important; background-position: center !important; } .kuti-fs-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .kuti-fs-media ~ .kuti-fs-body, .kuti-fs-thumb ~ .kuti-fs-body { display: none !important; } } /* Media (video/imazh) — 40% majtas, mbush lartësinë e plotë */ .kuti-fs-media { flex: 0 0 40%; flex-shrink: 0; position: relative; background: #000; overflow: hidden; align-self: stretch; } .kuti-fs-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .kuti-fs-thumb { flex: 0 0 40%; flex-shrink: 0; align-self: stretch; background-size: cover; background-position: center; } /* Teksti djathtas — flex:1 zë gjithë gjerësinë kur nuk ka media */ .kuti-fs-body { flex: 1; padding: 20px 40px 20px 24px; overflow-y: auto; align-self: stretch; scrollbar-width: thin; scrollbar-color: #333 transparent; } .kuti-fs-title { color:#fff; font-size:clamp(1rem,2vw,1.5rem); text-transform:uppercase; margin:0 0 6px; line-height:1.2; } .kuti-fs-date { color:rgba(255,255,255,0.35); font-size:0.78rem; margin:0 0 14px; } .kuti-fs-content { color:#ccc; font-size:clamp(0.85rem,1.3vw,1rem); line-height:1.7; } .kuti-fs-content p { margin:0 0 0.9em; } .kuti-fs-body--vetem-tekst .kuti-fs-content { font-size: clamp(0.95rem, 2.5vw, 1.15rem); white-space: pre-wrap; word-break: break-word; line-height: 1.75; } .kuti-fs-info { margin-top:16px; border-top:1px solid #222; padding-top:12px; } .kuti-fs-info h4 { color:#ec0808; margin:0 0 4px; font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; } .kuti-fs-info p { color:#999; line-height:1.5; font-size:0.85rem; } /* Kohëzgjatja e videos */ .kuti-fs-duration { position: absolute; top: calc(50% + 1cm + 1cm - 34px); right: 10px; transform: none; width: auto; text-align: center; background: rgba(10,10,10,0.5); color: #b8ffcc; font-family: 'Courier New', Courier, monospace; font-size: 21px; font-weight: 400; padding: 4px 10px; border-radius: 5px; border: 1px solid rgba(200,255,210,0.15); z-index: 15; pointer-events: none; letter-spacing: 3px; opacity: 0; cursor: pointer; text-shadow: 0 0 6px #39ff14, 0 0 14px rgba(57,255,20,0.5); box-shadow: none; } .kuti-fs-duration.shfaq-x { animation: shfaq-controls 0.6s ease forwards; pointer-events: auto; } .kuti-fs-duration-ls { position: fixed !important; top: 80px !important; right: 70px !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: 9999999 !important; } .kuti-fs-duration-ls.shfaq-x { animation: shfaq-controls-ls 0.6s ease forwards; } .kuti-fs-duration-ds { position: absolute !important; top: 10px !important; right: 50% !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: 9999999 !important; } .kuti-fs-duration-ds.shfaq-x { animation: shfaq-controls-ls 0.6s ease forwards; } .kuti-loading { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; } .kuti-loading span { width:9px; height:9px; border-radius:50%; background:#fff; animation:kuti-bounce 1.1s ease-in-out infinite; } .kuti-loading span:nth-child(2) { animation-delay:.18s; } .kuti-loading span:nth-child(3) { animation-delay:.36s; }