:root {
  --lacivert: #13244a;
  --lacivert-koyu: #0b1633;
  --krem: #f3e8d3;
  --turuncu: #fbb61a;
  --kirmizi: #d7263d;
  --gri: #9fb0d0;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--krem);
  background: radial-gradient(ellipse at 50% 0%, #1b3466 0%, var(--lacivert) 45%, var(--lacivert-koyu) 100%) fixed;
  background-color: var(--lacivert-koyu);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: inherit; }

.hero {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 16px 40px;
  text-align: center;
}

.avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

h1 {
  margin-top: 24px;
  font-weight: 900;
  font-size: clamp(30px, 8vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.mu {
  display: inline-block;
  color: var(--turuncu);
}

.tag {
  margin-top: 14px;
  color: var(--gri);
  font-weight: 700;
  letter-spacing: .3em;
  font-size: 14px;
}

.lead {
  margin: 18px auto 0;
  max-width: 460px;
  color: #d6dbe8;
  font-size: 17px;
}

.links {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }
.btn svg { width: 24px; height: 24px; fill: currentColor; }
.btn.ig { background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
.btn.tt { background: #000; box-shadow: inset 0 0 0 2px #25f4ee, 0 6px 20px rgba(0, 0, 0, .3); }
.btn.yt { background: #ff0000; }

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.feed { padding: 36px 0; border-top: 1px solid rgba(243, 232, 211, .12); }

.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.feed-head h2 { font-size: 22px; font-weight: 900; }
.feed-head a { color: var(--turuncu); font-weight: 700; text-decoration: none; white-space: nowrap; }

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #0e1c3d;
  text-decoration: none;
  transition: transform .15s ease;
}
.card:hover { transform: scale(1.03); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 32px 10px 10px;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(transparent, rgba(5, 10, 25, .92));
}
.card .badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--kirmizi); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.card.ph img { object-fit: contain; padding: 18%; opacity: .5; }

.tiktok-wrap { display: flex; justify-content: center; }
.tiktok-wrap .tiktok-embed { margin: 0 !important; }

footer {
  text-align: center;
  padding: 40px 16px 48px;
  color: var(--gri);
  font-size: 14px;
}

@media (max-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.grid.bos { display: block; }
.empty {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(243, 232, 211, .06);
  border: 1px dashed rgba(243, 232, 211, .25);
  text-decoration: none; font-weight: 700;
}
.empty img { width: 56px; height: 56px; border-radius: 50%; }
.empty:hover { background: rgba(243, 232, 211, .1); }