/* HU White Page E — Mirelta HU | Updated: 2026-02-13 */
/* Unique layout: left rail + content, HU flag accents, ultra-neutral */
:root{
  --bg:#f3f4f6;
  --paper:#ffffff;
  --ink:#0b1220;
  --mut:#334155;
  --line:rgba(2,6,23,.12);
  --shadow:0 16px 44px rgba(2,6,23,.10);
  --r:22px;
  --max:1180px;

  --hu-red:#cd2a3e;
  --hu-green:#436f4d;
  --hu-slate:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(205,42,62,.10), transparent 58%),
    radial-gradient(860px 520px at 92% 18%, rgba(67,111,77,.10), transparent 55%),
    linear-gradient(180deg, #fff, var(--bg));
  line-height:1.65;
}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:20px}
/* Topbar */
.top{
  position:sticky; top:0; z-index:30;
  background:rgba(243,244,246,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topin{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{
  width:40px;height:40px;border-radius:16px; box-shadow:0 16px 34px rgba(205,42,62,.12);
  background:
    linear-gradient(180deg, var(--hu-red) 0 34%, #fff 34% 66%, var(--hu-green) 66% 100%);
  border:1px solid rgba(2,6,23,.10);
}
.brand b{display:block; letter-spacing:.2px}
.brand small{display:block; color:var(--mut); margin-top:2px}
.menu{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.menu a{text-decoration:none; color:var(--mut); padding:10px 12px; border-radius:16px}
.menu a:hover{background:rgba(2,6,23,.05); color:var(--ink)}

/* Main layout */
.shell{display:grid; grid-template-columns: 300px 1fr; gap:14px; align-items:start; padding-top:18px}
.rail{position:sticky; top:86px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:18px}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(67,111,77,.18);
  background:rgba(67,111,77,.08);
  color:var(--mut);
  font-size:13px;
}
.dot{width:10px;height:10px;border-radius:999px;background:var(--hu-green)}
.h1{font-size:38px; line-height:1.08; margin:12px 0 8px}
.p{color:var(--mut); margin:0 0 10px}
.hr{height:1px; background:var(--line); margin:12px 0}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:16px;
  border:1px solid var(--line);
  background:#fff; text-decoration:none; cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
.btn:hover{background:rgba(2,6,23,.03)}
.btn:active{transform:translateY(1px)}
.primary{border:none; font-weight:900; color:#fff; background:linear-gradient(135deg, var(--hu-red), var(--hu-green))}
.soft{background:rgba(2,6,23,.02)}

.navlist{display:grid; gap:8px; margin-top:10px}
.navlist a{text-decoration:none; padding:10px 12px; border-radius:16px; color:var(--mut); border:1px solid rgba(2,6,23,.08); background:rgba(2,6,23,.02)}
.navlist a:hover{background:rgba(2,6,23,.04); color:var(--ink)}
.navlist small{display:block; color:var(--mut); margin-top:2px; font-size:12px}

.section{margin-bottom:14px}
.h2{margin:0 0 8px; font-size:18px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tile{padding:14px; border-radius:18px; border:1px solid var(--line); background:#fff}
.tile b{display:block; margin-bottom:6px}
.tile p{margin:0; color:var(--mut); font-size:14px}

.notice{
  border:1px solid rgba(205,42,62,.18);
  background:rgba(205,42,62,.06);
  padding:14px 14px; border-radius:18px;
}
.notice b{display:block}
.notice small{display:block; margin-top:6px; color:var(--mut)}

.form{display:grid; gap:10px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.input{width:100%; padding:12px 12px; border-radius:16px; border:1px solid var(--line); background:#fff; outline:none}
.small{font-size:12px; color:var(--mut)}

details{border:1px solid var(--line); border-radius:18px; padding:12px 14px; background:#fff}
summary{cursor:pointer; font-weight:900}
details p{margin:8px 0 0; color:var(--mut); font-size:14px}

.foot{margin-top:18px; border-top:1px solid var(--line); padding:18px 0 36px; color:var(--mut)}
.footgrid{display:grid; grid-template-columns:1.2fr .8fr; gap:14px}
.links{display:flex; gap:10px; flex-wrap:wrap}
.links a{text-decoration:none; color:var(--mut); padding:8px 10px; border-radius:14px}
.links a:hover{background:rgba(2,6,23,.05); color:var(--ink)}

.toast{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); padding:12px 14px; border-radius:18px; display:none; max-width:min(92vw, 680px)}
.toast.show{display:block}

.cookie{position:fixed; left:0; right:0; bottom:0; padding:14px 0; z-index:40}
.cookiebox{max-width:var(--max); margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .rail{position:relative; top:auto}
  .h1{font-size:32px}
  .grid2{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
}