:root {
--cluster-accent: #2f6f4e; --cluster-accent-soft: #eaf2ec;
--cluster-ink: #1f2a24;
--cluster-muted: #6b7a71;
--cluster-line: #e2e8e4;
--cluster-radius: 10px;
} .ad-slot {
margin: 2.2em auto;
text-align: center;
min-height: 100px;
clear: both;
}
.ad-slot::before {
content: "REKLAAM";
display: block;
font-size: 10px;
letter-spacing: 1.5px;
color: var(--cluster-muted);
margin-bottom: 6px;
} .rel-mid {
margin: 2.4em 0;
padding: 1.1em 1.2em;
background: var(--cluster-accent-soft);
border-radius: var(--cluster-radius);
border: 1px solid var(--cluster-line);
}
.rel-mid__label {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--cluster-accent);
margin: 0 0 .7em;
font-weight: 700;
}
.rel-mid__list { display: flex; flex-direction: column; gap: .55em; }
.rel-mid__item {
display: flex;
align-items: center;
gap: .8em;
padding: .6em .7em;
background: #fff;
border: 1px solid var(--cluster-line);
border-radius: 8px;
text-decoration: none;
color: var(--cluster-ink);
transition: border-color .15s ease, transform .15s ease;
}
.rel-mid__item:hover { border-color: var(--cluster-accent); transform: translateX(2px); }
.rel-mid__thumb {
flex: 0 0 54px; width: 54px; height: 54px;
object-fit: cover; border-radius: 6px; background: var(--cluster-accent-soft);
}
.rel-mid__title { font-size: 15px; line-height: 1.3; font-weight: 600; } .rel-bottom { margin: 3em 0 1em; }
.rel-bottom__label {
font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
color: var(--cluster-accent); margin: 0 0 1em; font-weight: 700;
}
.rel-bottom__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.1em;
}
.rel-bottom__card {
display: block; text-decoration: none; color: var(--cluster-ink);
border: 1px solid var(--cluster-line); border-radius: var(--cluster-radius);
overflow: hidden; background: #fff;
transition: box-shadow .15s ease, transform .15s ease;
}
.rel-bottom__card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.rel-bottom__thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--cluster-accent-soft); }
.rel-bottom__body { padding: .8em .9em 1em; }
.rel-bottom__title { font-size: 15px; line-height: 1.35; font-weight: 600; margin: 0; } .pillarnav {
font-size: 13px;
color: var(--cluster-muted);
margin: 0 0 1.4em;
line-height: 1.5;
}
.pillarnav a { color: var(--cluster-accent); text-decoration: none; }
.pillarnav a:hover { text-decoration: underline; }
.pillarnav__sep { color: var(--cluster-line); margin: 0 .15em; }
.pillarnav__current { color: var(--cluster-muted); } .faq { margin: 2.6em 0; }
.faq__title { font-size: 1.4em; margin: 0 0 .8em; }
.faq__item {
border: 1px solid var(--cluster-line);
border-radius: 8px;
margin-bottom: .6em;
background: #fff;
}
.faq__item--hidden { display: none; }
.faq__q {
cursor: pointer;
padding: .8em 1em;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q-text {
font-size: 1em;
font-weight: 600;
margin: 0;
line-height: 1.35;
display: inline;
}
.faq__q::after { content: "+"; color: var(--cluster-accent); font-weight: 700; margin-left: .8em; }
details[open] .faq__q::after { content: "\2013"; }
.faq__a { padding: 0 1em 1em; }
.faq__more {
margin-top: .4em;
background: var(--cluster-accent-soft);
color: var(--cluster-accent);
border: 1px solid var(--cluster-line);
border-radius: 8px;
padding: .6em 1.1em;
font-weight: 600;
cursor: pointer;
}
.faq__more:hover { background: #fff; } a.siselink { color: var(--cluster-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.rel-mid__item, .rel-bottom__card { transition: none; }
}