/*
Theme Name: NOKTURN (BY DK PROJECT)
Theme URI: https://example.com/dkproject-nokturn
Author: NOKTURN (BY DK PROJECT)
Description: Ciemny, neonowy motyw portfolio dla fotografa/grafika. Ziarno jako sygnatura, glitch na logo, loader „Signal boot", albumy oparte na tagach, strona z profilami (bez formularza) oraz strony polityk. Edytowalne kolory, treści, logo, albumy, współpraca i profile. Darmowy stack.
Version: 1.33.2
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dkproject-nokturn
*/

/* =============================================================================
   SPIS TRESCI (Ctrl+F po nazwie klasy/frazie z komentarza):
   - Zmienne motywu (:root)                        - kolory, fonty, --maxw
   - Reset + tlo strony
   - Efekty tla: ziarno, skanlinie, kursor          .grain .scan .bleed .cursor
   - Naglowek / nawigacja                           header .nav .menu .hud-iso
   - Hero (sekcja startowa)                         .hero .herologo .eyebrow
   - Naglowek sekcji                                .sechead
   - Sekcja Statement (manifest)                    .statement
   - Siatka i karta albumu                          .grid .card (okladka + meta cyan)
   - Przycisk .btn + panel CTA                      .ctarow .cta-panel
   - Karuzela Wspolpracy (marquee)                  .partners .marq .track
   - Strona Linki (profile pogrupowane)             .themes .themerow .plat
   - Baner zgody cookies                            .cookie
   - Ekran ladowania (loader, tylko strona glowna)  .boot-loader
   - Nagrody/album: naglowek strony, tagi, kolumny  .pagehead .album-tags .kadr
   - Blok "Kadr" i galerie (Galeria Kadrow / mixed)  .dkproject-nokturn-kadr*
   - Lightbox kadrow (powiekszenie, B&W/kolor)       .kadr-lb
   - Miernik ISO w naglowku (licznik)                .hud-iso
   - Reklama / sekcja dodatkowa (embed)              .ad-box .support-widget
   - Drobne elementy: kreska nav, e-mail reveal      .nav-div .mail-reveal-btn
   - Logo partnera jako link
   - Filtry Portfolio: "Pokaz wiecej" + wyszukiwarka .more-wrap .more-menu
   - Kontrolki Customizera (panel admina)             .dkpn-tags .dkpn-profiles
   - Hologram (hero ze zdjeciem na portalu)          .dkpn-holo
   - Hero z hologramem obok loga (2 kolumny)          .hero-holo
   - Strona albumu - naglowek "Dossier HUD" (P1)      .album-hud
   - Galeria pelnoekranowa (duzy podglad + rzad miniatur + lightbox) .dkpn-fsg
   ============================================================================= */

/* ---------- Zmienne motywu (kolory, fonty, szerokosc kontenera) ---------- */
:root{
  --void:#0d0f0f; --panel:#222626; --ink:#ECECEE; --muted:#7e8382; --line:#2c3131;
  --red:#CC2929; --red-hot:#E23A3A; --red-deep:#7a1a1a;
  --cyan:#38e6ff; --cyan-soft:#9ff6ff;
  --code:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Menlo,Consolas,monospace;
  --glow:0 0 18px rgba(204,41,41,.55), 0 0 42px rgba(204,41,41,.25);
  --display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --body:"Roboto",system-ui,-apple-system,sans-serif;
  --mono:"Roboto",system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --logo:var(--logo-src);
}
/* ---------- Reset + tlo strony + zaznaczenie tekstu ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

/* ---------- Efekty tla: ziarno filmowe, skanlinie, poswiata, kursor ---------- */
.grain,.scan,.bleed{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.09;mix-blend-mode:overlay;animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(4%,-6%)}75%{transform:translate(-4%,-4%)}100%{transform:translate(6%,4%)}}
.scan{background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;opacity:.5;z-index:59}
.bleed{z-index:0;background:radial-gradient(60% 45% at 82% 8%,rgba(204,41,41,.16),transparent 60%),radial-gradient(50% 40% at 6% 96%,rgba(122,26,26,.20),transparent 60%)}
.cursor{position:fixed;width:26px;height:26px;left:0;top:0;border-radius:50%;background:radial-gradient(circle,rgba(204,41,41,.55),rgba(204,41,41,0) 70%);transform:translate(-50%,-50%);pointer-events:none;z-index:70;mix-blend-mode:screen;transition:width .2s,height .2s,opacity .2s;opacity:0}

/* ---------- Naglowek: pasek nawigacji, logo, menu, licznik ISO ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(9px);background:rgba(13,15,15,.62);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}
.logomark{display:block;height:40px;aspect-ratio:2.44;background:var(--logo) left center/contain no-repeat}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.menu{display:flex;gap:6px}
.menu button{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:none;border:none;color:var(--muted);cursor:pointer;padding:9px 13px;position:relative}
.menu button:hover,.menu button.active{color:var(--ink)}
.menu button.active::after,.menu button:hover::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--red);box-shadow:var(--glow)}

/* ---------- Kontener glowny tresci + kontener .wrap (max-szerokosc strony) ---------- */
main{position:relative;z-index:1}
.view{display:none}
.view.active{display:block;animation:viewin .5s ease both}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Hero (sekcja startowa strony glownej): logo, nadtytul, lead, wskaznik scrolla ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 24px 80px;max-width:var(--maxw);margin:0 auto;position:relative}
.herologo{align-self:flex-start;width:clamp(220px,34vw,420px);aspect-ratio:2.44;background:var(--logo) left center/contain no-repeat;margin-bottom:26px;overflow:visible}
.glitchlogo{animation:logoGlitch 5s steps(1) infinite}
/* micro-glitch dla tekstu Chakra Petch - raz na 10s (biel + cyjan) */
.cpx{animation:microGlitch 10s linear infinite}
@keyframes microGlitch{
  0%,95.5%,100%{text-shadow:none}
  96%{text-shadow:2px 0 #12b6c9}
  96.7%{text-shadow:-3px 0 #12b6c9}
  97.4%{text-shadow:2px 0 #12b6c9}
  98.1%{text-shadow:-1px 0 #12b6c9}
  98.6%{text-shadow:none}
}
@keyframes logoGlitch{
  0%,86%,100%{filter:drop-shadow(0 0 22px rgba(204,41,41,.28));transform:none;clip-path:inset(0 0 0 0)}
  87%{filter:drop-shadow(3px 0 0 #ffffff) drop-shadow(-3px 0 0 #12b6c9);transform:translate(-2px,0)}
  89%{filter:drop-shadow(-5px 0 0 #ffffff) drop-shadow(4px 0 0 #12b6c9);transform:translate(3px,0);clip-path:inset(18% 0 46% 0)}
  91%{filter:drop-shadow(4px 0 0 #ffffff) drop-shadow(-3px 0 0 #12b6c9);transform:translate(-2px,0);clip-path:inset(56% 0 12% 0)}
  93%{filter:drop-shadow(2px 0 0 #ffffff) drop-shadow(-2px 0 0 #12b6c9);transform:translate(1px,0);clip-path:inset(0 0 0 0)}
}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--eyebrow-color,var(--red));margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--eyebrow-color,var(--red));box-shadow:var(--eyebrow-glow,var(--glow))}
.hero h1{font-family:var(--display);font-weight:700;line-height:.92;letter-spacing:-.01em;font-size:clamp(52px,12vw,150px);text-transform:uppercase}
.hero p.lead{max-width:540px;margin-top:26px;color:var(--muted);font-size:clamp(15px,2vw,19px)}
.hero .scrollcue{cursor:pointer;margin-top:54px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.hero .scrollcue span{width:1px;height:30px;background:linear-gradient(var(--red),transparent);display:inline-block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- Efekt glitch na dowolnym tekscie (uzyj atrybutu data-t z tekstem) ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;opacity:.85}
.glitch::before{color:#ffffff;transform:translate(-3px,0);mix-blend-mode:screen;animation:gl1 3.2s infinite steps(2)}
.glitch::after{color:#12b6c9;transform:translate(3px,0);mix-blend-mode:screen;animation:gl2 2.7s infinite steps(2)}
@keyframes gl1{0%,92%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(8% 0 70% 0);transform:translate(-5px,0)}96%{clip-path:inset(40% 0 30% 0);transform:translate(3px,0)}}
@keyframes gl2{0%,90%,100%{clip-path:inset(100% 0 0 0)}91%{clip-path:inset(60% 0 20% 0);transform:translate(5px,0)}97%{clip-path:inset(20% 0 55% 0);transform:translate(-3px,0)}}

/* ---------- Naglowek sekcji: nadtytul + h2 + etykieta po prawej (dkproject_nokturn_sechead) ---------- */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:30px;margin-bottom:34px;border-top:1px solid var(--line)}
.sechead .sh-l{min-width:0}
.sechead .eyebrow{margin-bottom:14px}
.sechead h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,4vw,40px);letter-spacing:.01em;text-transform:uppercase}
.sechead .idx{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.2em;white-space:nowrap;padding-bottom:6px}
.section{padding:70px 0}

/* ---------- Sekcja "Statement" (manifest) na stronie glownej ---------- */
.statement{padding:8px 0 0}
.statement p{font-family:var(--display);font-weight:500;font-size:clamp(22px,3.6vw,38px);line-height:1.25;max-width:960px;letter-spacing:-.01em}
.statement p + p{margin-top:.6em}
.statement .hl{color:var(--eyebrow-color,var(--red));text-shadow:var(--eyebrow-glow,var(--glow))}

/* ---------- Siatka kart albumow (strona glowna, Portfolio, strona tagu) ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{position:relative;border:1px solid var(--line);background:var(--panel);overflow:hidden;cursor:pointer;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s}
.js .card{opacity:0;transform:translateY(26px)}
.js .card.in{opacity:1;transform:none}
.card .cov{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--void)}
.card .cov img.img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.02);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.card:hover .cov img.img{transform:scale(1.06);filter:grayscale(0) contrast(1.05) saturate(1.05)}
.card .rgb{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.card:hover .rgb{opacity:.5;animation:rgbjit .5s steps(3) infinite}
@keyframes rgbjit{0%{transform:translate(2px,0)}50%{transform:translate(-2px,1px)}100%{transform:translate(1px,-1px)}}
.card .meta{position:relative;padding:15px 16px 16px 18px;background:var(--void);border-left:2px solid var(--cyan);box-shadow:-1px 0 12px rgba(56,230,255,.18);overflow:hidden;transition:box-shadow .35s}
.card:hover .meta{box-shadow:-1px 0 18px rgba(56,230,255,.34)}
.card .meta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
.card h3{position:relative;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.01em;text-transform:uppercase;line-height:1.25}
.card h3 .tg{color:var(--cyan);transition:color .3s}
.card:hover h3 .tg{color:var(--cyan-soft)}

/* ---------- Przycisk .btn + wiersz CTA + panele "Albumy/Statement/CTA/Wspolpraca" (dawniej jedna zakladka "Statement & CTA") na stronie glownej ---------- */
.ctarow{display:flex;justify-content:center;padding:60px 0 10px}
.empty-note{color:var(--muted)}
.cta-links{padding:70px 0}
.cta-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cta-top .eyebrow{margin-bottom:0}
.cta-top .idx{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.2em;white-space:nowrap}
.cta-panel{border:1px solid var(--line);border-left:3px solid var(--red);background:radial-gradient(120% 140% at 100% 0,rgba(204,41,41,.10),transparent 55%),linear-gradient(180deg,rgba(204,41,41,.04),transparent);padding:clamp(32px,5vw,58px);position:relative;overflow:hidden}
.cta-panel .eyebrow{margin-bottom:16px}
.cta-panel h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,5vw,52px);text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;margin-bottom:16px}
.cta-panel p{color:var(--muted);max-width:560px;margin-bottom:30px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--btn-color,var(--red));color:var(--btn-color,var(--red));background:transparent;padding:15px 30px;cursor:pointer;text-decoration:none;transition:background .3s,color .3s,box-shadow .3s}
.btn:hover,.btn:focus-visible{background:var(--btn-color,var(--red));color:var(--void);box-shadow:var(--btn-glow,var(--glow))}

/* ---------- partner / clients marquee (unified monochrome) ---------- */
.partners .marq{overflow:hidden;position:relative;padding:8px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.partners .track{display:flex;align-items:center;width:max-content;animation:scroll 34s linear infinite}
.partners .track > *{flex:0 0 auto;margin-right:60px}
.partners .marq:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
/* real logos: swap .logo text for <img class="logo-img"> and it inherits the same monochrome treatment */
.logo,.logo-img{font-family:var(--mono);font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:#8f8f98;white-space:nowrap;opacity:.62;transition:.3s}
.logo:hover,.logo-img:hover{color:var(--ink);opacity:1}
.logo-img{height:26px;width:auto;object-fit:contain;filter:brightness(0) invert(1) grayscale(1);opacity:.6}
.logo-img:hover{opacity:1}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filters button{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--muted);padding:9px 16px;cursor:pointer;transition:.25s}
.filters button:hover{color:var(--ink);border-color:var(--muted)}
.filters button.on{color:var(--void);background:var(--red);border-color:var(--red);box-shadow:var(--glow)}

.pagehead{padding:150px 0 28px;border-bottom:1px solid var(--line);margin-bottom:40px}
.pagehead .ph-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.pagehead .ph-top .eyebrow{margin-bottom:0}
.pagehead .idx{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.2em;white-space:nowrap}
.pagehead .eyebrow{margin-bottom:16px}
.pagehead h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,8vw,92px);text-transform:uppercase;line-height:.95}
.pagehead p{color:var(--muted);max-width:560px;margin-top:18px}

/* ---------- links: grouped by theme (IG + FB side by side) ---------- */
.themes{margin-top:40px}
.theme-group{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;padding:30px 6px 12px;border-top:1px solid var(--line);margin-top:14px}
.theme-group::before{content:"";width:22px;height:2px;background:var(--red);box-shadow:0 0 8px rgba(204,41,41,.5)}
.theme-group:first-child{border-top:none;margin-top:0;padding-top:4px}
.themerow{display:flex;align-items:center;gap:24px;padding:26px 6px;border-bottom:1px solid var(--line);position:relative;transition:padding .3s}
.themerow:hover{padding-left:20px}
.themerow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s;box-shadow:var(--glow)}
.themerow:hover::before{transform:scaleY(1)}
.themerow .no{font-family:var(--mono);font-size:12px;color:var(--muted);width:34px;letter-spacing:.1em}
.themerow .th{font-family:var(--display);font-weight:600;font-size:clamp(20px,3.6vw,32px);text-transform:uppercase;flex:1}
.plats{display:flex;gap:10px;flex-wrap:wrap}
.plat{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:10px 14px;color:var(--muted);transition:.25s;display:flex;flex-direction:column;gap:2px;min-width:120px;background:none;cursor:pointer;text-align:left}
#mailText{user-select:text}
.plat b{color:var(--ink);font-weight:700;letter-spacing:.12em}
.plat:hover{border-color:var(--red);color:var(--red);box-shadow:var(--glow)}
.plat:hover b{color:var(--red)}
@media(max-width:640px){.themerow{flex-wrap:wrap;gap:14px}.themerow .th{flex:1 1 100%}}

footer{border-top:1px solid var(--line);margin-top:40px}
.foot{max-width:var(--maxw);margin:0 auto;padding:46px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot .brand{font-size:15px}
.foot .fmeta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em}
.foot a{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.foot a:hover{color:var(--red)}
.flinks{display:flex;gap:18px;flex-wrap:wrap}
.flinks a{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.flinks a:hover{color:var(--red)}
.totop{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--line);padding:10px 16px;cursor:pointer;transition:.25s}
.totop:hover{color:var(--red);border-color:var(--red);box-shadow:var(--glow)}
.legal{max-width:760px;padding-bottom:40px}
.legal h2{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.6vw,24px);text-transform:uppercase;letter-spacing:.02em;margin:34px 0 10px;color:var(--ink)}
.legal p,.legal li{color:var(--muted);font-size:15px;line-height:1.7}
.legal ul{margin:8px 0 8px 20px}
.legal li{margin:4px 0}
.legal b{color:var(--ink)}
.legal .note{border-left:3px solid var(--red);background:var(--panel);padding:12px 16px;color:var(--ink);font-size:13px;margin:22px 0}
.legal a{color:var(--red);cursor:pointer}
.foot .fmeta a{color:var(--red)}
.foot .fmeta a:hover{color:var(--red-hot)}
/* cookie consent banner */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(130%);transition:transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.cookie.show{transform:none;pointer-events:auto}
.cookie-in{max-width:var(--maxw);margin:18px auto;padding:18px 20px;background:rgba(20,22,22,.94);backdrop-filter:blur(10px);border:1px solid var(--line);border-left:3px solid var(--red);display:flex;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:0 -12px 44px rgba(0,0,0,.55),0 0 26px rgba(204,41,41,.18)}
.cookie-txt{flex:1;min-width:240px;color:var(--muted);font-size:13px;line-height:1.6}
.cookie-txt a{color:var(--red);cursor:pointer}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.ck-rej,.ck-acc{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 22px;cursor:pointer;transition:.25s;border:1px solid var(--line);background:none;color:var(--muted)}
.ck-rej:hover{border-color:var(--muted);color:var(--ink)}
.ck-acc{border-color:var(--red);color:var(--red)}
.ck-acc:hover{background:var(--red);color:var(--void);box-shadow:var(--glow)}
@media(max-width:560px){.cookie-in{margin:12px;gap:14px}.cookie-btns{width:100%}.ck-rej,.ck-acc{flex:1}}

.lb{position:fixed;inset:0;z-index:80;background:rgba(10,12,12,.94);display:none;flex-direction:column;backdrop-filter:blur(4px)}
.lb.open{display:flex;animation:viewin .3s ease both}
.lb .lbtop{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line)}
.lb .lbtitle{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:18px}
.lb .lbtitle small{font-family:var(--mono);color:var(--muted);font-weight:400;font-size:11px;margin-left:12px;letter-spacing:.14em}
.lb .close{font-family:var(--mono);font-size:13px;color:var(--ink);border:1px solid var(--line);background:none;padding:8px 14px;cursor:pointer;letter-spacing:.12em}
.lb .close:hover{border-color:var(--red);color:var(--red)}
.lb .stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:22px;min-height:0}
.lb .frame{position:relative;height:100%;max-height:76vh;aspect-ratio:3/2;max-width:100%;border:1px solid var(--line);overflow:hidden}
.lb .frame .img{position:absolute;inset:0}
.lb .cap{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:11px;color:var(--ink);background:rgba(13,15,15,.7);padding:6px 10px;letter-spacing:.1em;z-index:3}
.lb .nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;font-family:var(--mono);font-size:22px;color:var(--ink);background:rgba(13,15,15,.5);border:1px solid var(--line);width:48px;height:48px;cursor:pointer;transition:.25s}
.lb .nav-btn:hover{border-color:var(--red);color:var(--red);box-shadow:var(--glow)}
.lb .prev{left:26px}.lb .next{right:26px}
.lb .dots{display:flex;gap:7px;justify-content:center;padding:16px;flex-wrap:wrap}
.lb .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.25s}
.lb .dots i.on{background:var(--red);box-shadow:var(--glow)}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* Signal boot loader - home only, ~1s */
.boot-loader{position:fixed;inset:0;z-index:200;background:#0a0c0c;display:flex;align-items:center;justify-content:center;overflow:hidden;animation:blFailsafe .01s linear 1.6s forwards}
.boot-loader.run{animation:blHide .22s ease .8s forwards}
@keyframes blHide{to{opacity:0;visibility:hidden}}
@keyframes blFailsafe{to{opacity:0;visibility:hidden}}
.boot-loader .bl-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);opacity:.5}
.boot-loader .bl-grain{position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.boot-loader.run .bl-grain{animation:grain .09s steps(2) infinite}
.boot-loader .bl-term{width:min(420px,80%);font-family:var(--mono);position:relative;z-index:2}
.boot-loader.run .bl-term{animation:blHide .2s ease .68s forwards}
.boot-loader .bl-line{color:var(--red);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.boot-loader.run .bl-line{animation:blBlink .4s steps(2) 1}
.boot-loader .bl-prog{height:4px;border:1px solid var(--line);position:relative;overflow:hidden;margin-bottom:12px}
.boot-loader .bl-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);box-shadow:0 0 12px rgba(204,41,41,.6)}
.boot-loader.run .bl-prog i{animation:blFill .75s ease forwards}
.boot-loader .bl-iso{color:var(--muted);font-size:12px;letter-spacing:.14em;display:flex;justify-content:space-between}
.boot-loader .bl-iso b{color:var(--ink)}
@keyframes blFill{to{width:100%}}
@keyframes blBlink{50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  .glitch::before,.glitch::after{animation:none;opacity:0}
  .cursor{display:none}
  .hero .scrollcue span{animation:none}
  .nav-div{animation:none}
  .partners .track{animation:none;flex-wrap:wrap;justify-content:center}
  .glitchlogo{animation:none;filter:drop-shadow(0 0 22px rgba(204,41,41,.28))}
  .cpx{animation:none}
}
@media(max-width:560px){.menu button{padding:8px 8px}.hero{padding-top:110px}.lb .prev{left:10px}.lb .next{right:10px}}
/* =====================================================================
   WordPress-specific adjustments
   ===================================================================== */
.brand{ text-decoration:none }
.menu .nav-list{ display:flex; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap }
.menu .nav-list li{ margin:0 }
.menu .nav-list a{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:9px 13px; position:relative; text-decoration:none }
.menu .nav-list a:hover{ color:var(--ink) }
.menu .nav-list .current-menu-item > a,
.menu .nav-list .current_page_item > a{ color:var(--ink) }
.menu .nav-list a:hover::after,
.menu .nav-list .current-menu-item > a::after,
.menu .nav-list .current_page_item > a::after{ content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; background:var(--red); box-shadow:var(--glow) }

/* card cover image (uses inline background-image set in PHP) */
.card .cov .img-fallback{ position:absolute; inset:0; width:100%; height:100%; background:radial-gradient(80% 60% at 30% 20%, rgba(204,41,41,.45), transparent 55%),linear-gradient(120deg,#160309,#2e0c17); }

/* album single content + native gallery on dark */
.album-content{ max-width:var(--maxw); margin:0 auto }
.album-content img{ border:1px solid var(--line) }
.album-content .wp-block-gallery{ gap:14px }
.album-content p{ color:var(--muted) }

/* pagination */
.pagination .nav-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.pagination a, .pagination .current{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; padding:9px 14px;
  border:1px solid var(--line); color:var(--muted); text-decoration:none }
.pagination a:hover{ border-color:var(--red); color:var(--red) }
.pagination .current{ background:var(--red); color:var(--void); border-color:var(--red) }

/* blog fallback list */
.post-list{ display:flex; flex-direction:column; gap:26px }
.post-item{ border-top:1px solid var(--line); padding-top:22px }
.post-title{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.01em }
.post-title a{ color:var(--ink); text-decoration:none }
.post-title a:hover{ color:var(--red) }

/* WP admin bar spacing */
body.admin-bar header{ top:32px }
@media(max-width:782px){ body.admin-bar header{ top:46px } }
@media(max-width:600px){
  .nav{ padding:12px 18px; }
  .menu .nav-list a{ padding:8px 9px; font-size:11px; letter-spacing:.08em; }
  .logomark{ height:32px; }
}

/* =====================================================================
   Blok „Kadr" (B&W → kolor) + „Galeria Kadrów" + lightbox
   ===================================================================== */
.dkproject-nokturn-kadr{ position:relative; display:block; margin:0 0 18px; overflow:hidden; border:1px solid var(--line);
  background:#0a0c0c; cursor:zoom-in; }
.dkproject-nokturn-kadr .k-media{ position:relative; display:block; line-height:0; }
.dkproject-nokturn-kadr img{ display:block; width:100%; height:auto; }
.dkproject-nokturn-kadr .k-color{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease; }
.dkproject-nokturn-kadr:hover .k-color,
.dkproject-nokturn-kadr:focus .k-color,
.dkproject-nokturn-kadr:focus-within .k-color,
.dkproject-nokturn-kadr.is-revealed .k-color{ opacity:1; }
.dkproject-nokturn-kadr .k-cap{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; padding:8px 4px 0; line-height:1.5; }
.dkproject-nokturn-kadr::after{ /* subtelny znacznik „powiększ" */
  content:"⤢"; position:absolute; top:10px; right:12px; z-index:2; font-size:14px; color:var(--ink);
  opacity:0; transform:translateY(-4px); transition:.3s; text-shadow:0 0 8px rgba(0,0,0,.6); }
.dkproject-nokturn-kadr:hover::after{ opacity:.85; transform:none; }

.dkproject-nokturn-kadr-grid{ display:grid; gap:16px; margin:0 0 18px; align-items:start; }
.dkproject-nokturn-kadr-grid > .dkproject-nokturn-kadr{ margin:0; }
.dkproject-nokturn-kadr-grid.cols-1{ grid-template-columns:1fr; }
.dkproject-nokturn-kadr-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.dkproject-nokturn-kadr-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.dkproject-nokturn-kadr-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
/* Wariant „poziome i pionowe": jednolita wysokość 3:2, bez przycinania - pionowe skalują się do wysokości poziomych */
.dkproject-nokturn-kadr-grid--uni .k-media{ aspect-ratio:3/2; background:var(--void); overflow:hidden; }
.dkproject-nokturn-kadr-grid--uni .k-bw{ width:100%; height:100%; object-fit:contain; }
.dkproject-nokturn-kadr-grid--uni .k-color{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
@media(max-width:900px){ .dkproject-nokturn-kadr-grid.cols-3,.dkproject-nokturn-kadr-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .dkproject-nokturn-kadr-grid{ grid-template-columns:1fr !important; } }

/* lightbox Kadrów (kolor) */
.kadr-lb{ position:fixed; inset:0; z-index:120; background:rgba(6,7,7,.95); display:none;
  align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.kadr-lb.open{ display:flex; }
.kadr-lb img{ max-width:92vw; max-height:86vh; border:1px solid var(--line); box-shadow:0 0 60px rgba(0,0,0,.6); }
.kadr-lb .kadr-close{ position:absolute; top:18px; right:22px; font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  color:var(--ink); background:none; border:1px solid var(--line); padding:8px 14px; cursor:pointer; }
.kadr-lb .kadr-close:hover{ border-color:var(--red); color:var(--red); }
.kadr-lb .kadr-nav{ position:absolute; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:24px;
  color:var(--ink); background:rgba(8,8,10,.5); border:1px solid var(--line); width:48px; height:48px; cursor:pointer; }
.kadr-lb .kadr-nav:hover{ border-color:var(--red); color:var(--red); box-shadow:var(--glow); }
.kadr-lb .kadr-prev{ left:22px; } .kadr-lb .kadr-next{ right:22px; }
.kadr-lb .kadr-cap{ position:absolute; bottom:20px; left:0; right:0; text-align:center; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; color:var(--muted); }
@media(prefers-reduced-motion:reduce){ .dkproject-nokturn-kadr .k-color{ transition:none; } }

/* =====================================================================
   HUD w nagłówku obok logo: pierścień ostrości (B) + miernik/ISO (D)
   ===================================================================== */



/* D - miernik światła + licznik ISO */
@keyframes hudMeter{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

@media(prefers-reduced-motion:reduce){
}


/* =====================================================================
   Nagłówek: grupa prawej strony + licznik ISO; responsywność
   ===================================================================== */
.nav-right{ display:flex; align-items:center; gap:20px; }
.hud-iso{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.hud-iso b{ color:var(--ink); font-weight:700; display:inline-block; width:3.6em; text-align:right; font-variant-numeric:tabular-nums; }

@media(max-width:820px){
  .pagehead{ padding-top:130px; }
}
@media(max-width:640px){
  .hero{ padding-left:20px; padding-right:20px; }
  .wrap{ padding:0 20px; }
  .pagehead{ padding-top:118px; }
  .sechead{ flex-wrap:wrap; align-items:flex-start; }
  .sechead .idx{ padding-bottom:0; }
  .cta-top{ flex-wrap:wrap; }
}
@media(max-width:560px){
  .nav-right{ gap:10px; }
}

/* =====================================================================
   Stopka: akcje (cookie reopen + do góry); blok reklamy; sekcja wsparcia
   ===================================================================== */
.foot-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ck-reopen{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; background:none; border:1px solid var(--line); padding:10px 16px; cursor:pointer; transition:.25s; }
.ck-reopen:hover{ color:var(--red); border-color:var(--red); box-shadow:var(--glow); }

/* Blok reklamy (AdSense) - na dole treści strony/wpisu */
.ad-slot{ border-top:1px solid var(--line); margin-top:48px; padding-top:22px; }
.ad-label{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ad-label::before{ content:""; width:22px; height:2px; background:var(--red); box-shadow:0 0 8px rgba(204,41,41,.5); }
.ad-box{ border:1px solid var(--line); background:#111516; min-height:110px; display:flex; align-items:center; justify-content:center; padding:18px; overflow:hidden; }
.ad-box :is(ins,iframe,img){ max-width:100%; }

/* Sekcja wsparcia (poziomy widget np. buycoffee) */
.support-widget{ display:flex; justify-content:center; align-items:center; min-height:80px; }
.support-widget iframe, .support-widget img{ max-width:100%; }

/* =====================================================================
   v1.6: loader fade, brak kresek przy CTA, kreska w nagłówku,
   e-mail w treści, menedżer cookies
   ===================================================================== */
.boot-loader.done{ opacity:0; pointer-events:none; transition:opacity .45s ease; }

/* sekcja bez górnej kreski (pod CTA) */
.sechead--noline{ border-top:none; padding-top:0; }

/* czerwona kreska w nagłówku między MENU a licznikiem ISO */
.nav-div{ display:inline-block; width:2px; height:18px; background:linear-gradient(var(--red),transparent); box-shadow:0 0 8px rgba(204,41,41,.5); flex:none; align-self:center; transform-origin:center; animation:cue 1.8s ease-in-out infinite; }
@media(max-width:560px){ .nav-div{ display:none; } }

/* e-mail ukryty w treści -> przycisk „Pokaż e-mail" */
.mail-reveal-btn{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--red); background:none; border:1px solid var(--red); padding:3px 10px; cursor:pointer; transition:.2s; vertical-align:baseline; }
.mail-reveal-btn:hover{ background:var(--red); color:var(--void); }
.mail-shown{ color:var(--red); word-break:break-all; }

/* menedżer cookies [dkpn_cookies] */
.dkpn-cm{ border:1px solid var(--line); padding:20px 22px; margin:20px 0; background:#101414; }
.dkpn-cm-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.dkpn-cm-row:last-child{ border-bottom:none; }
.dkpn-cm-name{ font-family:var(--mono); font-size:13px; color:var(--ink); word-break:break-all; }
.dkpn-cm-del{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:none; border:1px solid var(--line); padding:6px 12px; cursor:pointer; transition:.2s; flex:none; }
.dkpn-cm-del:hover{ color:var(--red); border-color:var(--red); }
.dkpn-cm-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.dkpn-cm-note{ color:var(--muted); font-size:12px; margin-top:14px; }

/* =====================================================================
   v1.8: lightbox Kadr - widoczna wersja B&W i kolor
   ===================================================================== */
.kadr-lb .kadr-figure{ position:relative; display:inline-block; line-height:0; max-width:92vw; max-height:84vh; }
.kadr-lb .kadr-figure .k-bw{ display:block; max-width:92vw; max-height:84vh; width:auto; height:auto; border:1px solid var(--line); }
.kadr-lb .kadr-figure .k-color{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .4s ease; border:1px solid var(--line); }
.kadr-lb .kadr-figure.show-color .k-color{ opacity:1; }
.kadr-lb .kadr-mode{ position:absolute; left:50%; top:24px; transform:translateX(-50%); z-index:5; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:rgba(13,15,15,.7); border:1px solid var(--line); padding:9px 16px; cursor:pointer; transition:.2s; }
.kadr-lb .kadr-mode:hover{ border-color:var(--red); color:#fff; box-shadow:var(--glow); }

/* =====================================================================
   v1.13: pojedynczy album - obrazek wyróżniający + tagi
   ===================================================================== */
.album-hero{ margin:0 0 30px; border:1px solid var(--line); overflow:hidden; background:#0b0d0d; }
.album-hero img{ display:block; width:100%; height:auto; }
.album-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.album-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:7px 14px; transition:.25s; text-decoration:none; }
.album-tag:hover{ color:var(--red); border-color:var(--red); box-shadow:var(--glow); }

/* =====================================================================
   v1.16: filtry Portfolio - „Pokaż więcej" z wyszukiwarką
   ===================================================================== */
.more-wrap{ position:relative; display:inline-block; }
.more-menu{ position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:250px; max-height:360px; overflow:auto; background:var(--panel); border:1px solid var(--line); box-shadow:0 22px 55px rgba(0,0,0,.55); padding:10px; }
.more-menu[hidden]{ display:none; }
.more-search{ width:100%; box-sizing:border-box; background:var(--void); border:1px solid var(--line); color:var(--ink); font-family:var(--mono); font-size:12px; letter-spacing:.08em; padding:9px 12px; margin-bottom:10px; }
.more-search:focus{ outline:none; border-color:var(--red); box-shadow:var(--glow); }
.more-list{ display:flex; flex-direction:column; gap:6px; }
.more-menu .more-item{ text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:none; border:1px solid transparent; color:var(--muted); padding:8px 10px; cursor:pointer; transition:.2s; }
.more-menu .more-item:hover{ color:var(--ink); border-color:var(--line); background:var(--void); }

/* Logo partnera jako link */
.marq .logo-link{ display:inline-flex; align-items:center; }

/* =====================================================================
   v1.19: Hologram hero (obraz z Customizera na portalu ze świetlikami)
   ===================================================================== */
.dkpn-holo{ --hneon:#38e6ff; --hsoft:#9ff6ff; position:relative; min-height:800px; display:flex; align-items:center; justify-content:center; overflow:hidden; perspective:1100px; margin:0 0 30px; }
.dkpn-holo .holo-scene{ position:relative; width:560px; max-width:96vw; height:640px; transform-style:preserve-3d; }
.dkpn-holo .holo-beam{ position:absolute; left:50%; bottom:150px; width:250px; height:430px; transform:translateX(-50%); background:linear-gradient(to top,color-mix(in srgb,var(--hneon) 26%,transparent),transparent 72%); filter:blur(28px); opacity:.5; -webkit-mask-image:linear-gradient(to top,#000,transparent); mask-image:linear-gradient(to top,#000,transparent); }
.dkpn-holo .holo-portal{ position:absolute; left:50%; bottom:118px; width:460px; height:158px; transform:translateX(-50%) rotateX(66deg); transform-style:preserve-3d; pointer-events:none; }
.dkpn-holo .hring{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid color-mix(in srgb,var(--hneon) 55%,transparent); }
.dkpn-holo .hr1{ width:460px; height:460px; animation:hspin 18s linear infinite; }
.dkpn-holo .hr2{ width:340px; height:340px; border-style:dashed; animation:hspin 12s linear infinite reverse; }
.dkpn-holo .hr3{ width:230px; height:230px; border-width:1.5px; animation:hspin 7s linear infinite; }
.dkpn-holo .hr4{ width:120px; height:120px; border-color:color-mix(in srgb,var(--hsoft) 85%,transparent); animation:hspin 4.2s linear infinite reverse; }
.dkpn-holo .hring::after{ content:""; position:absolute; top:-3px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--hsoft); box-shadow:0 0 12px 3px var(--hneon); }
.dkpn-holo .hsweep{ position:absolute; inset:0; margin:auto; width:460px; height:460px; border-radius:50%; background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--hneon) 30%,transparent) 26deg,transparent 60deg); animation:hspin 6s linear infinite; -webkit-mask:radial-gradient(circle,#000 0 68%,transparent 69%); mask:radial-gradient(circle,#000 0 68%,transparent 69%); }
.dkpn-holo .hcore{ position:absolute; inset:0; margin:auto; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--hsoft) 85%,transparent) 0%,color-mix(in srgb,var(--hneon) 45%,transparent) 30%,transparent 62%); filter:blur(3px); animation:hpulse 3.2s ease-in-out infinite; }
.dkpn-holo .hdisc{ position:absolute; inset:0; margin:auto; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--hneon) 12%,transparent) 0 55%,transparent 72%); }
.dkpn-holo .holo-fig{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); width:560px; max-width:98vw; height:688px; animation:hfloat 6s ease-in-out infinite; will-change:transform; /* v1.31.4: pojedyncza elipsa (zamiast dwoch zagniezdzonych masek liniowych) - dwa niezalezne gradienty 1D zawsze dawaly kwadratowe/prostokatne narozniki tam, gdzie sie mnoza (stad wrazenie "pudelka" nawet przy lagodnych krawedziach z osobna). Promienie elipsy dobrane matematycznie do realnego bbox sylwetki w przeslanym pliku (nie calego prostokata zdjecia), z zapasem tak by przekatna/rog sylwetki miescil sie bezpiecznie w strefie pelnej nieprzezroczystosci, a wygaszanie do zera konczylo sie w dodanym polu, nie na jego granicy. Gora kontenera powiekszona ponownie (+60px), bo okragla winieta potrzebuje wiecej miejsca na przekatnych niz oddzielne gradienty. */ -webkit-mask:radial-gradient(ellipse 48.2% 44.5% at 50% 45.5%,#000 0 83%,rgba(0,0,0,.7) 90%,rgba(0,0,0,.35) 96%,transparent 100%); mask:radial-gradient(ellipse 48.2% 44.5% at 50% 45.5%,#000 0 83%,rgba(0,0,0,.7) 90%,rgba(0,0,0,.35) 96%,transparent 100%); }
.dkpn-holo .holo-fig .hflick{ position:absolute; inset:78px 100px 140px; animation:hflicker 6.5s steps(1) infinite; }
.dkpn-holo .holo-fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; filter:grayscale(1) brightness(.94) contrast(1.34) sepia(1) hue-rotate(var(--hrot,150deg)) saturate(3) drop-shadow(0 0 22px var(--hneon)); mix-blend-mode:screen; opacity:.94; }
.dkpn-holo .holo-fig .hrim{ position:absolute; inset:0; background:var(--hneon); -webkit-mask:var(--photo) center bottom/contain no-repeat; mask:var(--photo) center bottom/contain no-repeat; mix-blend-mode:screen; opacity:.16; }
.dkpn-holo .holo-fig .hscan{ position:absolute; inset:0; background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--hsoft) 45%,transparent) 0 1.5px,transparent 1.5px 4px); -webkit-mask:var(--photo) center bottom/contain no-repeat; mask:var(--photo) center bottom/contain no-repeat; mix-blend-mode:screen; opacity:.48; }
.dkpn-holo .holo-fig .hsheen{ position:absolute; inset:0; background:linear-gradient(0deg,transparent,color-mix(in srgb,var(--hsoft) 55%,transparent),transparent); background-size:100% 40%; background-repeat:no-repeat; -webkit-mask:var(--photo) center bottom/contain no-repeat; mask:var(--photo) center bottom/contain no-repeat; mix-blend-mode:screen; opacity:.5; animation:hsheen 4.5s linear infinite; }
.dkpn-holo .holo-particles{ position:absolute; left:50%; bottom:170px; width:2px; height:2px; transform:translateX(-50%); transform-style:preserve-3d; pointer-events:none; }
.dkpn-holo .horbit{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
.dkpn-holo .hspark{ position:absolute; border-radius:50%; background:var(--hsoft); box-shadow:0 0 8px 2px color-mix(in srgb,var(--hneon) 80%,transparent); animation:htwinkle 3s ease-in-out infinite; }
.dkpn-holo .holo-hud{ position:absolute; left:0; right:0; bottom:34px; text-align:center; z-index:6; }
.dkpn-holo .holo-hud .hname{ font-family:var(--display); font-size:34px; letter-spacing:.42em; font-weight:700; color:#eafcff; text-shadow:0 0 18px color-mix(in srgb,var(--hneon) 60%,transparent); margin:0 0 6px; }
.dkpn-holo .holo-hud .htag{ font-family:var(--mono); font-size:11px; letter-spacing:.5em; color:color-mix(in srgb,var(--hneon) 75%,#9fb6bd); }
@keyframes hspin{ to{ transform:rotate(360deg); } }
@keyframes hpulse{ 0%,100%{ opacity:.55; transform:scale(.92); } 50%{ opacity:1; transform:scale(1.08); } }
@keyframes hfloat{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-13px); } }
@keyframes hflicker{ 0%,95%,100%{ opacity:1; } 96%{ opacity:.78; } 97%{ opacity:.92; } 98%{ opacity:.82; } }
@keyframes hsheen{ 0%{ background-position:0 120%; } 100%{ background-position:0 -40%; } }
@keyframes htwinkle{ 0%,100%{ opacity:.2; transform:scale(.7); } 50%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .dkpn-holo .hring,.dkpn-holo .hsweep,.dkpn-holo .hcore,.dkpn-holo .holo-fig,.dkpn-holo .horbit,.dkpn-holo .hspark,.dkpn-holo .hflick,.dkpn-holo .hsheen{ animation:none!important; } }
@media (max-width:600px){ .dkpn-holo .holo-scene{ transform:scale(.66); } }

/* Hero z hologramem obok loga (dwie kolumny, bez wyśrodkowania/zawijania) */
.hero.hero-holo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px; text-align:left; }
.hero.hero-holo .hero-copy{ align-self:center; }
.hero.hero-holo .herologo{ align-self:flex-start; }
.hero.hero-holo .dkpn-holo{ min-height:635px; margin:0; overflow:hidden; }
.hero.hero-holo .holo-scene{ transform:scale(.82); transform-origin:center; }
@media(max-width:860px){
  .hero.hero-holo{ grid-template-columns:1fr; text-align:center; }
  .hero.hero-holo .herologo{ align-self:center; }
  .hero.hero-holo .dkpn-holo{ min-height:480px; }
}

/* =====================================================================
   v1.22: Strona albumu - nagłówek „Dossier HUD" (P1)
   ===================================================================== */
/* Wspólny "panel HUD" (gradientowe tło + skanlinie + świecące narożniki) -
   używany w nagłówku albumu (.album-hud) i w kartach opinii (.testi-card). */
.hud-panel{ position:relative; background:linear-gradient(180deg,#14181a,#0f1213); overflow:hidden; }
.hud-panel::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px); pointer-events:none; }
.hud-cnr{ position:absolute; width:16px; height:16px; border:2px solid var(--cyan); z-index:2; }
.hud-cnr.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hud-cnr.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.hud-cnr.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.hud-cnr.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.album-hud{ position:relative; border:1px solid var(--line); padding:34px 34px 30px; display:grid; grid-template-columns:1fr 300px; gap:30px; margin:140px 0 26px; }
.album-hud .album-hud-main{ position:relative; z-index:1; min-width:0; }
.album-hud .album-eb{ font-family:var(--code); color:var(--cyan); font-size:11px; letter-spacing:.28em; margin-bottom:14px; }
.album-hud h1{ font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.92; letter-spacing:.01em; font-size:clamp(40px,7vw,64px); margin:0; }
.album-hud .album-desc{ color:var(--muted); margin-top:16px; max-width:460px; font-family:var(--code); font-size:13px; line-height:1.7; letter-spacing:.03em; }
.album-hud .album-panel{ position:relative; z-index:2; border-left:2px solid var(--cyan); padding:2px 16px 2px 16px; box-shadow:-1px 0 14px rgba(56,230,255,.14); align-self:start; }
.album-hud .album-panel .row{ display:flex; justify-content:space-between; gap:14px; font-family:var(--code); font-size:12px; letter-spacing:.1em; padding:9px 0; border-bottom:1px dashed var(--line); }
.album-hud .album-panel .row:last-child{ border-bottom:none; }
.album-hud .album-panel .k{ color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.album-hud .album-panel .v{ color:var(--ink); text-align:right; }
.album-hud .album-panel .v.c, .album-hud .album-panel .v.c a{ color:var(--cyan); }
.album-hud .album-panel .v.c a:hover{ color:var(--cyan-soft); }
.album-hud .album-panel .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); display:inline-block; margin-right:6px; vertical-align:middle; animation:hpulse 2.4s ease-in-out infinite; }
@media(max-width:760px){ .album-hud{ grid-template-columns:1fr; padding:38px 24px 26px; margin-top:120px; } }

/* =====================================================================
   v1.23: Galeria pełnoekranowa (duży podgląd + przewijany rząd miniatur)
   ===================================================================== */
.dkpn-fsg{ position:relative; }
.dkpn-fsg.dkpn-fsg-enhanced .dkpn-fsg-fallback{ display:none; }
.dkpn-fsg-viewer{ margin:34px 0; }

.dkpn-fsg-main{ position:relative; width:100vw; margin-left:calc(50% - 50vw); height:min(74vh,720px); display:flex; align-items:stretch; justify-content:center; background:#050607; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* Boczne "podglądy" - wypełniają puste miejsce po lewej/prawej sąsiednimi zdjęciami z galerii */
.dkpn-fsg-side{ flex:1 1 0%; min-width:0; position:relative; overflow:hidden; border:0; padding:0; margin:0; background:none; cursor:pointer; display:block; }
.dkpn-fsg-side img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(.4) contrast(1.05); opacity:.5; transition:opacity .3s ease,filter .3s ease; }
.dkpn-fsg-side:hover img{ opacity:.8; filter:grayscale(.5) brightness(.55); }
.dkpn-fsg-side::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.dkpn-fsg-side.prev::after{ background:linear-gradient(to left,rgba(5,6,7,0),rgba(5,6,7,.85)); }
.dkpn-fsg-side.next::after{ background:linear-gradient(to right,rgba(5,6,7,0),rgba(5,6,7,.85)); }

/* Centralna "scena" - szerokość kontenera treści (--maxw), zdjęcie w oryginalnych proporcjach */
.dkpn-fsg-cur{ position:relative; flex:0 0 auto; width:min(100%,var(--maxw,1180px)); max-width:100%; display:flex; align-items:center; justify-content:center; background:#050607; z-index:2; cursor:zoom-in; }
.dkpn-fsg-cur:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }
.dkpn-fsg-mainimg{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1) contrast(1.05); transition:filter .35s; margin:0 auto; }
.dkpn-fsg-cur:hover .dkpn-fsg-mainimg{ filter:grayscale(0) contrast(1.03); }
.dkpn-fsg-cb{ position:absolute; width:20px; height:20px; border:2px solid var(--cyan); z-index:4; pointer-events:none; }
.dkpn-fsg-cb.tl{ top:18px; left:18px; border-right:0; border-bottom:0; }
.dkpn-fsg-cb.tr{ top:18px; right:18px; border-left:0; border-bottom:0; }
.dkpn-fsg-cb.bl{ bottom:18px; left:18px; border-right:0; border-top:0; }
.dkpn-fsg-cb.br{ bottom:18px; right:18px; border-left:0; border-top:0; }
.dkpn-fsg-cap{ position:absolute; left:40px; bottom:40px; max-width:calc(100% - 80px); background:rgba(13,15,15,.62); border-left:2px solid var(--cyan); padding:9px 15px; font-family:var(--code); font-size:12px; letter-spacing:.1em; color:var(--muted); z-index:4; }
.dkpn-fsg-cap b{ color:var(--cyan); font-weight:400; }
.dkpn-fsg-zoomhint{ position:absolute; right:40px; bottom:40px; font-family:var(--code); font-size:11px; letter-spacing:.14em; color:var(--cyan-soft); opacity:.85; z-index:4; }
.dkpn-fsg-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(5,6,7,.55); border:1px solid var(--line); color:var(--ink); width:44px; height:60px; cursor:pointer; font-size:22px; line-height:1; transition:.2s; }
.dkpn-fsg-arrow:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 14px rgba(56,230,255,.3); }
.dkpn-fsg-arrow.prev{ left:14px; } .dkpn-fsg-arrow.next{ right:14px; }

/* Rząd miniatur - wyśrodkowany, aktywna miniatura zawsze centrowana przez JS (centerThumb) */
.dkpn-fsg-rail{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:#08090a; border-bottom:1px solid var(--line); padding:12px 16px; scrollbar-width:thin; scrollbar-color:var(--cyan) #111; }
.dkpn-fsg-rail-track{ display:flex; gap:10px; width:fit-content; min-width:100%; margin:0 auto; box-sizing:border-box; justify-content:center; }
.dkpn-fsg-rail::-webkit-scrollbar{ height:6px; }
.dkpn-fsg-rail::-webkit-scrollbar-track{ background:#111; }
.dkpn-fsg-rail::-webkit-scrollbar-thumb{ background:var(--cyan); }
.dkpn-fsg-thumb{ flex:0 0 auto; position:relative; width:112px; height:72px; padding:0; border:1px solid var(--line); background:none; cursor:pointer; overflow:hidden; transition:.2s; }
.dkpn-fsg-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); opacity:.6; transition:opacity .25s; }
.dkpn-fsg-thumb:hover img{ opacity:.85; }
.dkpn-fsg-thumb.on{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 14px rgba(56,230,255,.32); }
.dkpn-fsg-thumb.on img{ opacity:1; }
.dkpn-fsg-thumb .tn{ position:absolute; left:5px; bottom:4px; font-family:var(--code); font-size:9px; letter-spacing:.1em; color:#cfd6d6; background:rgba(0,0,0,.55); padding:1px 5px; }
.dkpn-fsg-thumb.on .tn{ color:var(--cyan); }

/* pasek postępu */
.dkpn-fsg-hud{ display:flex; align-items:center; gap:16px; padding:12px 16px; background:rgba(5,6,7,.95); font-family:var(--code); font-size:11px; letter-spacing:.14em; color:var(--muted); }
.dkpn-fsg-hud .cy{ color:var(--cyan); white-space:nowrap; }
.dkpn-fsg-bar{ flex:1; height:4px; background:#1a1e1e; position:relative; overflow:hidden; }
.dkpn-fsg-bar i{ position:absolute; left:0; top:0; height:100%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); transition:width .3s; }
.dkpn-fsg-hnav{ display:flex; gap:6px; }
.dkpn-fsg-hnav button{ background:none; border:1px solid var(--line); color:var(--cyan); width:30px; height:26px; cursor:pointer; font-size:11px; }
.dkpn-fsg-hnav button:hover{ border-color:var(--cyan); box-shadow:0 0 10px rgba(56,230,255,.3); }

@media(max-width:680px){
  .dkpn-fsg-main{ height:46vh; }
  .dkpn-fsg-side{ flex-basis:22px; flex-grow:0.3; }
  .dkpn-fsg-cap{ left:34px; bottom:32px; font-size:10.5px; max-width:calc(100% - 68px); }
  .dkpn-fsg-zoomhint{ display:none; }
  .dkpn-fsg-arrow{ width:36px; height:48px; font-size:18px; }
  .dkpn-fsg-arrow.prev{ left:8px; } .dkpn-fsg-arrow.next{ right:8px; }
  .dkpn-fsg-thumb{ width:84px; height:56px; }
  .dkpn-fsg-hud{ gap:10px; padding:10px 12px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce){
  .dkpn-fsg-main img, .dkpn-fsg-thumb img, .dkpn-fsg-bar i{ transition:none; }
}

/* ---------- Sekcja "Opinie klientow" (bez zdjec autorow) ---------- */
.testi-rail-wrap{ display:flex; align-items:center; gap:12px; }
.testi-arrow{ position:static; flex:0 0 auto; width:40px; height:56px; background:rgba(13,15,15,.7); border:1px solid var(--line); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; transition:.2s; }
.testi-arrow:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 14px rgba(56,230,255,.3); }
@media(max-width:560px){ .testi-arrow{ width:32px; height:46px; font-size:16px; } }
.testi-grid{ display:flex; flex:1; min-width:0; gap:20px; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:4px 4px 20px; scrollbar-width:thin; scrollbar-color:var(--cyan) #111; }
.testi-grid::-webkit-scrollbar{ height:7px; }
.testi-grid::-webkit-scrollbar-track{ background:#111; }
.testi-grid::-webkit-scrollbar-thumb{ background:var(--cyan); }
.testi-card{ position:relative; flex:0 0 calc((100% - 40px)/3); max-width:380px; scroll-snap-align:start; border:1px solid var(--line); border-left:2px solid var(--cyan); box-shadow:-1px 0 12px rgba(56,230,255,.14); padding:26px 22px 22px; }
@media(max-width:900px){ .testi-card{ flex-basis:calc((100% - 20px)/2); max-width:none; } }
@media(max-width:560px){ .testi-card{ flex-basis:88%; max-width:none; } }
.testi-card > :not(.hud-cnr){ position:relative; z-index:1; }
.testi-quote{ display:block; font-family:var(--display); font-size:54px; line-height:.6; color:var(--cyan); opacity:.55; margin-bottom:6px; }
/* Justowanie WYMUSZONE (!important): edytor blokowy Gutenberga czasem dokleja do
   pojedynczych akapitow wlasny inline style="text-align:..." (np. gdy ktos kiedys
   kliknal wyrownanie w toolbarze bloku) - taki inline style ma wyzszy priorytet niz
   zwykla regula CSS i wygrywa z justowaniem, mimo ze w arkuszu stylow jest ono
   ustawione. !important gwarantuje, ze wyrownanie w opiniach jest ZAWSZE justowane
   automatycznie, bez potrzeby recznego dopisywania stylu w tresci opinii. */
.testi-card blockquote{ margin:0; color:var(--ink); font-size:15px; line-height:1.65; text-align:justify !important; text-align-last:left !important; hyphens:auto; }
.testi-card blockquote p{ margin:0 0 10px; text-align:justify !important; text-align-last:left !important; }
.testi-card blockquote p:last-child{ margin-bottom:0; }
.testi-stars{ margin-top:14px; color:var(--red); letter-spacing:.1em; font-size:14px; }
.testi-card figcaption{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:2px; }
.testi-name{ font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.testi-role{ font-family:var(--code); font-size:11px; letter-spacing:.1em; color:var(--muted); }

/* ---------- Strona błędu 404 (tresc edytowalna w Customizerze) ---------- */
/* ---------- Strona błędu 404 (tresc edytowalna w Customizerze) ---------- */
.err404{ padding:160px 0 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.err404-code{ font-family:var(--display); font-weight:700; font-size:clamp(90px,18vw,220px); line-height:.85; color:var(--red); text-shadow:var(--glow); letter-spacing:.02em; }
.err404-eb{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:12px; }
.err404-eb::before{ content:""; width:34px; height:1px; background:var(--red); box-shadow:var(--glow); }
.err404 h1{ margin-top:18px; font-family:var(--display); font-weight:700; font-size:clamp(32px,6vw,56px); text-transform:uppercase; line-height:1.05; max-width:640px; }
.err404 p{ color:var(--muted); margin-top:16px; max-width:520px; }
.err404 .ctarow{ padding-top:36px; }

/* =========================================================================
   v1.32.2: Coming Soon (strona "w budowie" - tlo, logo, tekst, licznik,
   social, e-mail). Wlaczana w Dostosuj > Coming Soon; podmienia cala witryne
   dla gosci (logika PHP: funkcja dkproject_nokturn_coming_soon() w
   functions.php, podpieta pod hook template_redirect). Uzywa tych samych
   zmiennych co reszta motywu (--red/--cyan/--void/--display/--mono) oraz
   istniejacego mechanizmu odslaniania e-maila (.mail-reveal-btn, patrz
   dkproject_nokturn_hide_emails() w functions.php).
   ========================================================================= */

/* Tlo <body> na tej stronie - bez tego byloby biale, bo nie laduje sie zaden
   inny plik szablonu (front-page.php itp.), ktory normalnie to ustawia. */
body.dkpn-soon-body{ margin:0; background:var(--void); overflow-x:hidden; }

/* Glowny kontener na cala wysokosc ekranu, wysrodkowany w pionie i poziomie.
   --eyebrow-color/--btn-color to zmienne nadpisywane przez Dostosuj > Kolory
   > "Coming Soon (nagłówek + licznik + przyciski)" (patrz sekcja $hud_areas
   w inc/customizer.php oraz mapa $section_map w functions.php) - dzieki temu
   caly kolorowy akcent (numery licznika, przycisk e-mail, hover ikon social)
   przelacza sie NARAZ miedzy kolorem akcentu a wspomagajacym z jednego pola. */
.dkpn-soon{
  --eyebrow-color:var(--red); --eyebrow-glow:var(--glow); --btn-color:var(--red); --btn-glow:var(--glow);
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:60px 24px; text-align:center; overflow:hidden; isolation:isolate;
}
/* Zdjecie tla (Dostosuj > Coming Soon > Tło) jako osobna warstwa ::before,
   przyciemnione i lekko odsycone (filter), zeby tekst na wierzchu byl czytelny
   nawet przy bardzo jasnym zdjeciu. --soon-bg ustawiane inline w functions.php
   tylko gdy tlo jest wgrane; jesli puste, zostaje samo --void (jednolita czern). */
.dkpn-soon::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--soon-bg,none) center/cover no-repeat, var(--void);
  filter:saturate(.7) brightness(.5);
  transform:scale(1.04); /* o wlos wieksze niz kontener, zeby rozmyta/przyciemniona krawedz nigdy nie prześwitywała na brzegach */
}
/* Dodatkowa winieta NAD zdjeciem tla - przyciemnia mocniej brzegi i dol/gore,
   zeby tekst na srodku byl kontrastowy niezaleznie od tego, co jest na zdjeciu. */
.dkpn-soon .soon-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(13,15,15,.35), rgba(13,15,15,.86) 70%),
    linear-gradient(180deg, rgba(13,15,15,.92) 0%, rgba(13,15,15,.72) 40%, rgba(13,15,15,.94) 100%);
}
/* Kolumna z tresciwa (logo, teksty, licznik, social, e-mail) - wszystko
   wysrodkowane pionowo jedno pod drugim. */
.soon-inner{ position:relative; z-index:1; max-width:640px; display:flex; flex-direction:column; align-items:center; }
.soon-logo{ height:44px; width:auto; max-width:220px; object-fit:contain; margin-bottom:34px; filter:drop-shadow(0 0 16px rgba(0,0,0,.5)); }
/* Napis przy kresce pod logiem (Dostosuj > Coming Soon > "Napis przy kresce
   pod logiem"). Klasa "eyebrow" to gotowy styl z reszty motywu (mala kreska +
   tekst w monospace) - "soon-eyebrow" tylko wysrodkowuje go w tym kontekscie
   (domyslnie .eyebrow jest wyrownany do lewej). */
.soon-eyebrow{ justify-content:center; }
.soon-title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,7vw,72px); line-height:1.04; letter-spacing:.01em;
  color:var(--ink); text-shadow:var(--eyebrow-glow);
}
.soon-text{ margin-top:18px; color:var(--muted); font-size:16px; line-height:1.7; max-width:480px; }

/* ---- Licznik: lata / miesiące / dni / godziny / minuty / sekundy ----
   Sama liczba (.cd-num) jest tylko wypelniana przez JS (patrz sekcja
   "Coming Soon: licznik" w assets/js/theme.js) - w PHP renderuje sie od razu
   "00" jako placeholder, zeby uklad nie skakal po zaladowaniu skryptu. */
.soon-countdown{ margin-top:44px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cd-unit{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:66px; padding:14px 10px 12px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); backdrop-filter:blur(6px);
}
.cd-num{
  font-family:var(--display); font-weight:700; font-size:clamp(22px,4.4vw,34px); line-height:1;
  color:var(--eyebrow-color); text-shadow:var(--eyebrow-glow); font-variant-numeric:tabular-nums; /* tabular-nums = cyfry nie "skacza" szerokoscia co sekunde */
}
.cd-label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* Klase "is-done" dodaje JS, gdy odliczanie dojdzie do zera (patrz theme.js). */
.soon-countdown.is-done{ opacity:.45; }

/* ---- Social: opcjonalny tekst nad ikonami + rzad okraglych ikon ----
   Caly blok (etykieta + ikony) jest w jednym kontenerze .soon-social-wrap,
   zeby odstep od tego, co jest wyzej (tekst/licznik), byl zawsze taki sam
   niezaleznie od tego, czy etykieta jest wypelniona czy nie (Dostosuj >
   Coming Soon > "Tekst nad linkami social media", pole moze byc puste). */
.soon-social-wrap{ margin-top:40px; }
.soon-social-label{ margin-bottom:16px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.soon-social{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
/* Kwadratowa ikonka - sama ikona SVG (currentColor) jest generowana w PHP
   przez dkproject_nokturn_soon_icon() w functions.php, jedna funkcja na
   wszystkie platformy. Puste pole URL w Customizerze = dana ikona sie
   w ogole nie renderuje (sprawdzane w PHP, nie ukrywane samym CSS). */
.soon-social-btn{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--line); color:var(--muted); transition:color .25s,border-color .25s,box-shadow .25s;
}
.soon-social-btn:hover,.soon-social-btn:focus-visible{ color:var(--btn-color); border-color:var(--btn-color); box-shadow:var(--btn-glow); }

/* ---- E-mail: reuzywa mechanizm .mail-reveal-btn (patrz JS w
   assets/js/theme.js, sekcja "E-mail w tresci" oraz PHP funkcja
   dkproject_nokturn_hide_emails()) - klikniecie zamienia przycisk na zwykly
   link <a class="mail-shown"> z adresem w tresci.
   WAZNE: .mail-shown ponizej dostaje DOKLADNIE ten sam padding/ramke/
   line-height/box-sizing co przycisk .soon-mail-btn PRZED klikinieciem.
   Bez tego zamiana "przycisku z paddingiem" na "zwykly link bez paddingu"
   skraca kolumne .soon-inner o kilkanascie pikseli, a cala tresc
   przeskakuje w gore, bo .dkpn-soon centruje ja w pionie
   (align-items:center) - wysokosc kontenera zmienia pozycje srodka. */
.soon-mail-btn{ margin-top:28px; color:var(--btn-color); border-color:var(--btn-color); padding:11px 22px; font-size:12px; box-sizing:border-box; line-height:1.4; }
.soon-mail-btn:hover{ background:var(--btn-color); box-shadow:var(--btn-glow); }
.dkpn-soon .mail-shown{
  display:inline-flex; align-items:center; justify-content:center; margin-top:28px;
  padding:11px 22px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.4;
  border:1px solid var(--btn-color); color:var(--btn-color); word-break:break-all; box-sizing:border-box;
}

/* Telefony: mniejsze marginesy i mniejsze kafelki licznika/ikon, zeby
   wszystko zmiescilo sie bez przewijania w bok. */
@media(max-width:560px){
  .dkpn-soon{ padding:48px 18px; }
  .soon-countdown{ gap:8px; }
  .cd-unit{ min-width:56px; padding:10px 6px 8px; }
  .soon-social-btn{ width:38px; height:38px; }
}
/* Ustawienie systemowe "ogranicz animacje" - wylacza subtelne przyblizenie tla. */
@media(prefers-reduced-motion:reduce){ .dkpn-soon::before{ transform:none; } }


/* =========================================================================
   Consent Mode: placeholder dla zablokowanych osadzeń wideo (YouTube/Vimeo
   itp. przez WordPress oEmbed) - patrz dkproject_nokturn_gate_oembed() w
   functions.php. Sam odtwarzacz (iframe) jest w tym momencie bez src (patrz
   data-dkpn-src), wiec nic sie nie laduje, dopoki nie klikniesz przycisku
   ponizej albo nie zaakceptujesz banera cookies (patrz dkpnActivateGated()
   w assets/js/theme.js).
   ========================================================================= */
.dkpn-embed-gate{ position:relative; max-width:100%; }
.dkpn-embed-gate iframe{ opacity:.25; pointer-events:none; }
.dkpn-embed-btn{
  position:absolute; inset:0; margin:auto; width:max-content; height:max-content;
  padding:12px 20px; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--ink); background:var(--void); border:1px solid var(--red); cursor:pointer;
  max-width:80%; text-align:center; transition:background .2s,box-shadow .2s;
}
.dkpn-embed-btn:hover{ background:var(--red); box-shadow:var(--glow); }