/* ============================================================
   nivopix – reszponzív, teljes szélességű stíluslap (v2)
   Flickr/Alamy-szerű: full-bleed hero, "justified" fotórács,
   finom áttűnések, fotóoldali címke-rétegek (hotspotok).
   A színek a :root változókban egy helyen átírhatók.
   ============================================================ */

:root{
  --bg:        #161616;
  --bg-panel:  #212121;
  --bg-header: rgba(14,14,14,.82);
  --border:    #2e2e2e;
  --text:      #e9e9e9;
  --text-dim:  #9c9c9c;
  --link:      #a5c8ec;
  --accent:    #89C146;      /* "pix" zöld kiemelés */
  --radius:    8px;
  --gap:       8px;
  --row-h:     300px;        /* justified rács cél-sormagassága desktopon */
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
button{ font:inherit; }

/* Teljes szélességű tartalom, nagy kijelzőn is kitölt */
.wrap{ width:100%; margin:0 auto; padding:0 clamp(12px, 2.5vw, 44px); }
.full-bleed{ width:100%; }

/* ---------- Fejléc (áttetsző, elmosott) ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--bg-header);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-in{
  display:flex; align-items:center; gap:18px;
  padding:10px clamp(12px, 2.5vw, 44px);
}
.logo{ font-size:25px; font-weight:700; letter-spacing:-.5px; color:#fff; white-space:nowrap; }
.logo b{ color:var(--accent); font-weight:800; }

.search-form{ flex:1; display:flex; max-width:640px; }
.search-form input{
  flex:1; min-width:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);
  color:var(--text); padding:9px 14px; font-size:15px;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.search-form input:focus{ background:rgba(255,255,255,.14); border-color:var(--accent); outline:none; }
.search-form button{
  background:var(--accent); border:0; color:#161616; font-weight:700;
  padding:9px 18px; border-radius:0 var(--radius) var(--radius) 0; cursor:pointer;
  transition:filter .2s var(--ease);
}
.search-form button:hover{ filter:brightness(1.12); }

.header-links{ display:flex; align-items:center; gap:20px; margin-left:auto; white-space:nowrap; }
.header-links a{ color:#cfcfcf; font-size:14px; }
.header-links a.signin{
  color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:7px 16px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.header-links a.signin:hover{ border-color:var(--accent); background:rgba(137,193,70,.14); }

.menu-btn{
  display:none; background:none; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius);
  color:var(--text); padding:6px 11px; font-size:18px; cursor:pointer;
}
.main-nav ul{
  list-style:none; margin:0; padding:0 clamp(12px, 2.5vw, 44px);
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.main-nav ul::-webkit-scrollbar{ display:none; }
.main-nav a{
  display:block; padding:9px 14px; color:#a9a9a9; font-size:14px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--accent); }

/* ---------- Hero (Alamy-szerű: nagy kép + kereső fölötte) ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(420px, 68vh, 760px);
  display:grid; place-items:center;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slides .slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero-slides .slide.active{ opacity:1; }
.hero-slides .slide img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

/* Dia-jelölők: 15×15 px négyzetek, az aktív zöld, a többi fehér */
.hero-dots{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:3; display:flex; gap:12px;
}
.hero-dots button{
  width:15px; height:15px; padding:0; border:1px solid rgba(0,0,0,.35);
  background:#fff; cursor:pointer;
  transition:background .3s var(--ease), transform .2s var(--ease);
}
.hero-dots button:hover{ transform:scale(1.2); }
.hero-dots button[aria-current="true"]{ background:var(--accent); }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.45), rgba(10,10,10,.15) 40%, rgba(22,22,22,.92) 96%);
}
.hero-content{
  position:relative; z-index:2; text-align:center; padding:40px 18px; max-width:860px; width:100%;
  animation:rise .8s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.hero-content h1{
  font-size:clamp(30px, 4.2vw, 54px); margin:0 0 8px; color:#fff; letter-spacing:-.5px;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero-content p{ color:#e3e3e3; font-size:clamp(15px, 1.4vw, 19px); margin:0 0 26px; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero-search{ display:flex; max-width:640px; margin:0 auto; box-shadow:0 12px 40px rgba(0,0,0,.45); border-radius:999px; overflow:hidden; }
.hero-search input{
  flex:1; min-width:0; border:0; padding:15px 24px; font-size:16px;
  background:rgba(255,255,255,.96); color:#1c1c1c;
}
.hero-search input:focus{ outline:none; }
.hero-search button{
  border:0; background:var(--accent); color:#161616; font-weight:700; font-size:15px;
  padding:0 30px; cursor:pointer; transition:filter .2s var(--ease);
}
.hero-search button:hover{ filter:brightness(1.12); }
.hero-credit{
  position:absolute; right:16px; bottom:12px; z-index:2; font-size:12px; color:#cfcfcf;
}
.hero-credit a{ color:#fff; }

/* ---------- Címek, morzsamenü ---------- */
h1{ font-size:clamp(24px, 2.4vw, 34px); line-height:1.2; margin:18px 0 4px; }
h2{ font-size:clamp(18px, 1.6vw, 23px); margin:34px 0 14px; }
.sub{ color:var(--text-dim); font-size:14.5px; margin:0 0 18px; }
.breadcrumb{ font-size:13px; color:var(--text-dim); margin:16px 0 0; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.breadcrumb li+li::before{ content:"›"; margin:0 7px; color:#555; }

/* ============================================================
   "Justified" fotórács – Flickr-szerű
   Az elemek flex-grow/flex-basis értékét a kép oldalaránya adja
   (--w/--h), amit a JS a betöltött kép valódi méretéből állít be.
   Így a különböző arányú képek azonos magasságú, szélről szélre
   kitöltött sorokba igazodnak.
   ============================================================ */
.jgrid{ display:flex; flex-wrap:wrap; gap:var(--gap); margin:18px 0; }
.jgrid::after{ content:""; flex-grow:999999; flex-basis:0; } /* utolsó sor ne nyúljon szét */
.jitem{
  --w:3; --h:2;
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(110deg,#222 8%,#2a2a2a 18%,#222 33%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  flex-grow:calc(var(--w) / var(--h) * 1000);
  flex-basis:calc(var(--w) / var(--h) * var(--row-h));
  min-height:120px;
}
.jitem.sized{ animation:none; background:#202020; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.jitem a{ display:block; height:100%; color:#fff; }
.jitem img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:calc(var(--w) / var(--h));
  opacity:0; transform:scale(1.02);
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .4s var(--ease);
}
.jitem.sized img{ opacity:1; transform:none; }
.jitem:hover img{ transform:scale(1.045); filter:brightness(1.06); }
.jitem figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 12px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  font-size:13.5px; line-height:1.35; color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.jitem:hover figcaption, .jitem:focus-within figcaption{ opacity:1; transform:none; }
.jitem figcaption .meta{ display:block; color:#c6c6c6; font-size:12px; }

/* Görgetésre beúszó elemek */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }

/* Album kártyák */
.album-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin:18px 0; }
.album-card{
  background:var(--bg-panel); border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.album-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.45); }
.album-card img{ aspect-ratio:3/2; object-fit:cover; width:100%; transition:transform .5s var(--ease); }
.album-card:hover img{ transform:scale(1.04); }
.album-card .pad{ padding:10px 13px 12px; font-size:15px; color:var(--text); }
.album-card .pad span{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:2px; }

/* Város "chipek" */
.chip-list{ display:flex; flex-wrap:wrap; gap:9px; padding:0; list-style:none; margin:12px 0 0; }
.chip-list a{
  display:inline-block; background:var(--bg-panel); border:1px solid var(--border);
  border-radius:999px; padding:7px 16px; font-size:14px; color:var(--text);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.chip-list a:hover{ border-color:var(--accent); background:rgba(137,193,70,.12); transform:translateY(-2px); }

/* ---------- Végtelen görgetés ---------- */
.load-more-wrap{ text-align:center; margin:26px 0 36px; }
.load-more{
  background:transparent; color:var(--text); border:1px solid var(--border);
  border-radius:999px; padding:11px 34px; font-size:15px; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.load-more:hover{ border-color:var(--accent); background:rgba(137,193,70,.12); }
.loader{ display:none; color:var(--text-dim); font-size:14px; padding:14px; text-align:center; }
.loader.visible{ display:block; }
.loader .dot{ display:inline-block; width:7px; height:7px; margin:0 3px; border-radius:50%; background:var(--accent); animation:bounce 1s infinite; }
.loader .dot:nth-child(2){ animation-delay:.15s; } .loader .dot:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5;} 40%{ transform:translateY(-6px); opacity:1;} }
.pager-fallback{ text-align:center; margin:20px 0; }

/* ============================================================
   Fotó oldal – full-bleed kép + címke-réteg (hotspotok)
   ============================================================ */
.photo-hero{
  position:relative;
  /* középről induló, világosabb szürkéből sötétbe futó gradient */
  background:radial-gradient(ellipse 70% 90% at 50% 42%, #3d3d3d 0%, #242424 48%, #101010 100%);
  display:grid; place-items:center;
  padding:26px clamp(10px, 2vw, 30px) 22px;
}
.stage{
  position:relative; display:inline-block; max-width:100%;
}
.stage > img{
  /* függőlegesen kisebb, hogy az eszközsor is látszódjon */
  max-height:min(70vh, 900px); width:auto; max-width:100%;
  border-radius:3px;
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.4);
  animation:fadein .7s var(--ease) both;
}
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }

/* Címke-réteg: a hotspotok százalékos koordinátákkal a képhez rögzítve */
.label-layer{ position:absolute; inset:0; pointer-events:none; }
.hotspot{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  background:transparent; border:2px dashed rgba(255,255,255,.85); border-radius:6px;
  cursor:pointer; padding:0; pointer-events:auto;
  opacity:0; transform:scale(.94); visibility:hidden;
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .2s var(--ease),
             box-shadow .2s var(--ease), visibility 0s .35s;
}
.labels-on .hotspot{
  opacity:1; transform:none; visibility:visible; transition-delay:0s;
  box-shadow:0 0 0 3000px rgba(0,0,0,.28); /* a kijelölt terület kiemelése, a többi elsötétül */
  animation:pulse 2.2s var(--ease) infinite;
}
.labels-on .hotspot ~ .hotspot{ box-shadow:none; } /* több hotspot esetén csak finom keret */
@keyframes pulse{ 0%,100%{ border-color:rgba(255,255,255,.85);} 50%{ border-color:var(--accent);} }
.hotspot:hover, .hotspot:focus-visible, .hotspot.open{ border-style:solid; border-color:var(--accent); animation:none; }

/* A címke és a leíró kártya alaphelyzetben a kijelölés FÖLÖTT jelenik meg.
   A JS a hotspot képen belüli pozíciója alapján forgatja őket, hogy mindig
   olvashatóak maradjanak (ne lógjanak a fejléc alá / a képen kívülre):
   - .flip-v  → a hotspot a kép FELSŐ felében van → címke+kártya ALATTA
   - .flip-h  → a hotspot a JOBB szélen van → jobbra igazítva, BALRA nyílik */
.hotspot-tag{
  position:absolute; left:0; bottom:calc(100% + 8px);
  background:var(--accent); color:#132408; font-weight:700; font-size:12.5px;
  border-radius:4px; padding:3px 10px; white-space:nowrap;
}
.hotspot-card{
  position:absolute; left:0; bottom:calc(100% + 40px); width:min(320px, 74vw);
  background:rgba(18,18,18,.96); border:1px solid var(--border); border-radius:10px;
  color:var(--text); text-align:left; font-size:13.5px; line-height:1.5; padding:13px 15px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  opacity:0; transform:translateY(8px); visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  z-index:5;
}
.hotspot.flip-v .hotspot-tag{ bottom:auto; top:calc(100% + 8px); }
.hotspot.flip-v .hotspot-card{ bottom:auto; top:calc(100% + 40px); transform:translateY(-8px); }
.hotspot.flip-v:hover .hotspot-card, .hotspot.flip-v:focus-visible .hotspot-card,
.hotspot.flip-v.open .hotspot-card{ transform:none; }
.hotspot.flip-h .hotspot-tag{ left:auto; right:0; }
.hotspot.flip-h .hotspot-card{ left:auto; right:0; }
.hotspot:hover .hotspot-card, .hotspot:focus-visible .hotspot-card, .hotspot.open .hotspot-card{
  opacity:1; transform:none; visibility:visible; transition-delay:0s;
}
.hotspot-card h3{ margin:0 0 5px; font-size:14.5px; color:#fff; }
.hotspot-card p{ margin:0 0 8px; color:#c9c9c9; }
.hotspot-card a{ color:var(--accent); font-weight:600; }

/* Kép alatti eszközsor */
.photo-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px clamp(12px, 2.5vw, 44px); background:#0a0a0a; border-bottom:1px solid var(--border);
}
.tool-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#ddd; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:8px 18px; font-size:14px; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.tool-btn:hover{ border-color:var(--accent); color:#fff; }
.tool-btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#161616; font-weight:700; }
.photo-toolbar .spacer{ flex:1; }
.photo-toolbar .nav-links a{ margin-left:14px; font-size:14px; color:#cfcfcf; }

/* Fotó infó elrendezés */
.photo-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; margin-top:22px; }
.info-box{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:10px;
  padding:16px 18px; margin-bottom:16px; font-size:14px;
}
.info-box h2{ margin:0 0 10px; font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.7px; }
.info-box dl{ margin:0; }
.info-box dt{ color:var(--text-dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; margin-top:11px; }
.info-box dd{ margin:2px 0 0; }
.tag-list{ display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:8px 0 0; list-style:none; }
.tag-list a{
  background:#2b2b2b; border-radius:999px; padding:4px 13px; font-size:13px; color:var(--text);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tag-list a:hover{ background:var(--accent); color:#161616; }
.desc{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:10px;
  padding:16px 18px; margin:0 0 16px; font-size:15px; line-height:1.65;
}
.author-row{ display:flex; align-items:center; gap:12px; }
.author-row img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--border); margin-top:48px; padding:22px 0 38px;
  color:var(--text-dim); font-size:13px;
}
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.site-footer nav{ display:flex; gap:18px; flex-wrap:wrap; }

.prose{ max-width:820px; }
.prose h2{ margin-top:30px; }
.prose p, .prose li{ color:#d4d4d4; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#161616;
  padding:8px 14px; border-radius:0 0 var(--radius) 0; z-index:100;
}
.skip-link:focus{ left:0; }

/* ============================================================
   Google Ads hirdetéshelyek
   Tipikus méretek: 728×90 leaderboard, 300×250 medium rectangle,
   in-feed (a fotórácsba simuló natív egység).
   Élesben az .ad-creative helyére az AdSense <ins class="adsbygoogle">
   kódja kerül – a mock kreatívok csak a helyet és a méretet mutatják.
   ============================================================ */
.ad-slot{ margin:28px auto; text-align:center; }
.ad-label{
  display:block; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  color:#6f6f6f; margin-bottom:6px;
}
.ad-creative{
  margin:0 auto; display:flex; align-items:center; justify-content:center; gap:16px;
  border:1px solid var(--border); border-radius:6px; overflow:hidden;
  background:linear-gradient(120deg,#233018,#1b1b1b 60%);
  color:#e9e9e9; text-align:left; padding:10px 18px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
a.ad-creative:hover{ border-color:var(--accent); box-shadow:0 8px 26px rgba(0,0,0,.4); color:#fff; }
.ad-728{ width:728px; max-width:100%; height:90px; }
.ad-300x250{ width:300px; max-width:100%; height:250px; flex-direction:column; text-align:center; justify-content:center; }
.ad-creative .ad-title{ font-weight:700; font-size:16px; color:#fff; }
.ad-creative .ad-text{ font-size:13px; color:#c9c9c9; margin-top:2px; }
.ad-creative .ad-cta{
  flex-shrink:0; background:var(--accent); color:#132408; font-weight:700; font-size:13.5px;
  border-radius:999px; padding:8px 18px; white-space:nowrap;
}
.ad-300x250 .ad-cta{ margin-top:14px; }

/* In-feed hirdetés: a justified rácsba simul, fix 4:3 aránnyal */
.jitem.ad-item{
  --w:4; --h:3; animation:none;
  background:linear-gradient(140deg,#233018,#191919 70%);
  display:flex;
}
.jitem.ad-item a{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  height:100%; width:100%; padding:16px 18px; color:#e9e9e9;
}
.jitem.ad-item .ad-label{ margin:0; }
.jitem.ad-item .ad-title{ font-weight:700; font-size:15.5px; color:#fff; line-height:1.3; }
.jitem.ad-item .ad-text{ font-size:12.5px; color:#bdbdbd; }
.jitem.ad-item .ad-cta{
  align-self:flex-start; background:var(--accent); color:#132408; font-weight:700;
  font-size:12.5px; border-radius:999px; padding:6px 14px; margin-top:4px;
  transition:filter .2s var(--ease);
}
.jitem.ad-item:hover .ad-cta{ filter:brightness(1.12); }

/* ============================================================
   Reszponzív törések
   ============================================================ */
@media (max-width: 1100px){
  :root{ --row-h:240px; }
  .photo-layout{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  :root{ --row-h:150px; --gap:4px; }
  .header-in{ flex-wrap:wrap; gap:8px; padding:8px 10px; }
  .logo{ font-size:21px; }
  .menu-btn{ display:block; margin-left:auto; }
  .header-links{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; }
  .header-links.open{ display:flex; animation:rise .3s var(--ease) both; }
  .header-links a{ padding:12px 4px; border-top:1px solid var(--border); font-size:15px; }
  .header-links a.signin{ border:0; border-top:1px solid var(--border); border-radius:0; }
  .search-form{ order:3; width:100%; max-width:none; }

  .wrap{ padding:0 8px; }
  .hero{ min-height:60vh; }
  .jitem{ border-radius:3px; }
  .jitem figcaption{ opacity:1; transform:none; font-size:12px; padding:18px 8px 6px; }
  .jitem figcaption .meta{ display:none; }
  .album-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .hotspot-card{ font-size:12.5px; }
  .ad-728{ height:auto; min-height:70px; flex-wrap:wrap; gap:8px; padding:12px 14px; }
  .hero-dots{ bottom:14px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .jitem img{ opacity:1; transform:none; }
}

/* ============================================================
   CMS-kiegészítések
   ============================================================ */
.hero .slide a{ display:block; height:100%; }
.hero-credit{ position:absolute; right:16px; bottom:14px; z-index:3; font-size:12px; color:#cfcfcf; }
.hero-credit a{ color:#fff; }

.label-list{ list-style:none; margin:0; padding:0; }
.label-list li{ padding:9px 0; border-bottom:1px solid var(--border); }
.label-list li:last-child{ border-bottom:0; }
.label-list .meta{ color:var(--text-dim); font-size:12.5px; margin-left:8px; }
.label-list .label-params{ display:block; color:#c9c9c9; font-size:13px; margin-top:3px; }

.signin-form label{ display:block; margin:14px 0 5px; color:var(--text-dim); font-size:13.5px; }
.signin-form input{
  width:100%; background:#2b2b2b; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:10px 13px; font-size:15px; margin-bottom:4px;
}
.signin-form button{ margin-top:18px; }

.ad-creative .ad-text{ color:#777; font-size:13px; }