:root{
      --bg:#0f172a;         /* slate-900 */
      --card:#111827;       /* gray-900  */
      --text:#e5e7eb;       /* gray-200  */
      --muted:#9ca3af;      /* gray-400  */
      --btn:#ffffff;        /* white     */
      --accent:#60a5fa;     /* blue-400  */
      --radius:18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",sans-serif;
      background: radial-gradient(1200px 600px at 60% -10%, rgba(96,165,250,.15), transparent 60%), var(--bg);
      color:var(--text);
      display:flex; min-height:100svh; align-items:center; justify-content:center; padding:28px;
    }
    .wrap{width:100%; max-width:560px}
    .card{
      background:var(--card); border-radius:calc(var(--radius) + 6px);
      padding:28px; box-shadow:0 10px 40px rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.06);
    }
    .top{
      display:flex; gap:18px; align-items:center; margin-bottom:16px;
    }
    .avatar{
      width:100px; border-radius:50%; object-fit:cover;
      border:2px solid rgba(255,255,255,.2)
    }
    h1{font-size:28px; margin:0 0 6px 0}
    .subtitle{color:var(--muted); margin:0 0 6px 0}
    .langs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 18px}
    .lang-btn{
      appearance:none; border:1px solid rgba(255,255,255,.15);
      background:transparent; color:var(--text); padding:6px 10px; border-radius:10px;
      cursor:pointer; font-weight:600; text-decoration: none;
    }
    .lang-btn[aria-current="true"]{border-color:var(--accent); color:#fff; box-shadow:inset 0 0 0 1px var(--accent)}
    .links{display:grid; gap:10px; margin-top:14px}
    .btn{
      display:flex; align-items:center; justify-content:center; gap:10px;
      background:var(--btn); color:#111827; border:none; padding:14px 16px;
      border-radius:var(--radius); cursor:pointer; text-decoration:none; font-weight:700;
      transition:transform .06s ease, box-shadow .06s ease;
      box-shadow:0 6px 14px rgba(255,255,255,.05), inset 0 0 0 1px rgba(0,0,0,.04);
    }
    .btn:active{transform:translateY(1px)}
    .muted{color:var(--muted); font-size:14px; margin-top:16px}
    .footer{margin-top:22px; text-align:center; color:var(--muted); font-size:12px}
    @media (max-width:420px){ h1{font-size:18px} .avatar{width:100px;} }
    .btn.donate {
        background-color: #00457C; /* PayPal плава */
        color: white;
    }

    .btn.donate:hover {
        background-color: #003366;
    }

    /* layout за две колоне */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* мобил: једна колона */
  gap: 10px;
  margin-top: 14px;
}

/* десктоп: две колоне 50/50 */
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* лева и десна колона */
.col { display: flex; flex-direction: column; gap: 5px; }

/* картичке за банере/курсове */
.cardlet {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}

.cardlet h3 {
  margin: 0 0 8px 0; font-size: 16px;
}

.cardlet a{
    margin-bottom:0.6rem;
}

.banner {
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(99,102,241,.18));
  border: 1px solid rgba(255,255,255,.08);
}

.banner img { width:36px; height:36px; border-radius:8px; object-fit:cover; }
.banner a.btn { margin-left:auto; }

.social-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
  align-items: center;
}

.social-icons a {
  font-size: 2rem;      /* величина иконица */
  color: #fff;          /* бела боја */
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #1da1f2; /* можеш да промениш у боју бренда или неку своју */
}