:root{
  --paper:#EEF1F7; --card:#FFFFFF; --ink:#14213D; --muted:#5B6781; --line:#D5DBE8;
  --der:#2456C7; --die:#C8324B; --das:#1E8A5F; --gold:#E9A800;
  --der-bg:#E3EBFB; --die-bg:#FBE4E8; --das-bg:#DDF3EA;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0F1626; --card:#18223A; --ink:#EDF1FA; --muted:#9AA6C0; --line:#2B3857;
    --der:#7DA5FF; --die:#FF7A90; --das:#52CC9A; --gold:#F2C23A;
    --der-bg:#1C2B4D; --die-bg:#3A1E28; --das-bg:#163A2E;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--der)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.narrow{max-width:740px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none}
.brand img{width:38px;height:38px}
.langs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.langs button{font:inherit;font-size:.85rem;font-weight:700;border:0;background:none;color:var(--muted);
  padding:5px 11px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-block:28px 56px}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.1;margin:0 0 16px;text-wrap:balance;letter-spacing:-.01em}
.hero p.lead{font-size:1.15rem;color:var(--muted);margin:0 0 26px;max-width:34em}
.art{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.art span{font-weight:800;font-size:.95rem;padding:4px 12px;border-radius:8px}
.art .der{color:var(--der);background:var(--der-bg)}
.art .die{color:var(--die);background:var(--die-bg)}
.art .das{color:var(--das);background:var(--das-bg)}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:700;padding:13px 22px;border-radius:12px}
.cta-sub{display:block;font-weight:500;font-size:.75rem;opacity:.75}
.note{font-size:.9rem;color:var(--muted);margin-top:12px}
.phones{display:flex;gap:14px;justify-content:center}
.phones img{width:48%;border-radius:22px;border:6px solid var(--card);box-shadow:0 18px 40px rgba(20,33,61,.18)}
.phones img:last-child{margin-top:42px}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-block:8px 56px}
.f{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.f h3{margin:0 0 6px;font-size:1.05rem}
.f p{margin:0;color:var(--muted);font-size:.97rem}
.stamp{display:inline-block;font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--die);border:2px solid var(--die);border-radius:6px;padding:1px 7px;transform:rotate(-3deg);margin-bottom:10px}

.levels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 56px}
.levels span{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 14px;font-weight:700;font-variant-numeric:tabular-nums}

/* legal pages */
.legal{padding-block:12px 64px}
.legal h1{font-size:1.9rem;line-height:1.2;margin:8px 0 4px}
.legal h2{font-size:1.15rem;margin:2em 0 .4em}
.legal h3{font-size:1rem;margin:1.4em 0 .3em}
.legal .sub{color:var(--muted);margin:0 0 1.5em}
.legal address{font-style:normal}
.legal hr{border:0;border-top:1px solid var(--line);margin:3em 0}
.jump{display:flex;gap:14px;flex-wrap:wrap;font-size:.95rem}

/* footer */
footer{border-top:1px solid var(--line);padding-block:26px 40px;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

[data-l]{display:none}
html[lang="tr"] [data-l="tr"],html[lang="de"] [data-l="de"],html[lang="en"] [data-l="en"]{display:revert}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:12px}
  .features{grid-template-columns:1fr}
  .phones{max-width:420px;margin-inline:auto}
}