/* HSD MAKÜ — Prototip 10 ("HarmonyOS kartları") tasarımı:
   açık gri zemin üstünde beyaz, çok yuvarlak kartlar; hap biçimli düğmeler ve menü; HSD kırmızısı vurgu; Lexend yazı tipi.
   Site gündüz modunda açılır; üst menüdeki ay/güneş düğmesiyle gece moduna geçilir (public/theme.js).
   Renkler yalnızca buradaki değişkenlerden gelir. Dosyanın sonundaki "Prototip 10" bölümü öncekileri ezer. */
:root {
  /* Gündüz modu: sitenin ana teması */
  --bg: #f1f2f6;
  --surface: #ffffff;
  --sunk: #eceef3;
  --ink: #191b22;
  --ink-2: #2b2e37;
  --muted: #646a77;
  --muted-2: #767c89;
  --line: #e2e4ea;
  --line-strong: #cdd1da;  /* üzerine gelince kenarlık */
  --night: #191b22;        /* koyu kartlar (öne çıkan etkinlik) */
  --graphite: #191b22;
  --red: #e60026;          /* HSD kırmızısı */
  --red-hover: #ff1a3e;
  --red-ink: #ffffff;
  --red-soft: #fff0f2;
  --accent: var(--ink);    /* bağlantı, tarih, seçili sekme: kırmızı yalnızca ana düğmeler ve logoda */
  --accent-soft: var(--sunk);
  --ok: #12a150;
  --ok-soft: #e9f8ef;
  --warn: #b86e00;
  --warn-soft: #fff5e0;
  --blue: #0a59f7;  --blue-soft: #eaf1ff;
  --violet: #7a4ff0; --violet-soft: #f2edff;
  --green: #14b37d; --green-soft: #e7f8f1;
  --shadow-sm: 0 1px 2px rgb(25 27 34 / .06);
  --shadow: 0 10px 24px -14px rgb(25 27 34 / .22);
  --shadow-lg: 0 24px 50px -24px rgb(25 27 34 / .35);

  --sans: "Lexend", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --display: "Lexend", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
  --radius: 22px;          /* kartlar */
  --radius-sm: 14px;       /* alanlar, küçük kartlar */
  --wrap: 1200px;
  --glass: rgb(241 242 246 / .86);     /* kaydırınca üst menü */
  --glass-soft: rgb(255 255 255 / .92); /* fotoğraf üstündeki düğmeler */
  color-scheme: light;
}

/* Gece modu: Prototip 10'un koyu hali; zemine Prototip 2'den hafif lacivert karışır */
:root[data-theme="dark"] {
  --bg: #111319;
  --surface: #1a1d25;
  --sunk: #22262f;
  --ink: #eceef2;
  --ink-2: #d2d6de;
  --muted: #959cab;
  --muted-2: #7f8695;
  --line: #2a2f3a;
  --line-strong: #3a404d;
  --night: #0b0d12;
  --graphite: #0b0d12;
  --red: #ff4458;
  --red-hover: #ff6474;
  --red-soft: rgb(255 68 88 / .13);
  --ok: #5fd3a8;
  --ok-soft: rgb(95 211 168 / .12);
  --warn: #fbbf24;
  --warn-soft: rgb(251 191 36 / .13);
  --blue: #84a9ff;  --blue-soft: rgb(132 169 255 / .13);
  --violet: #b6a1ff; --violet-soft: rgb(182 161 255 / .13);
  --green: #5fd3a8; --green-soft: rgb(95 211 168 / .12);
  --teal: #5fd3c7;            /* bağlantılar */
  --hard: #07080c;            /* sert ofset gölge */
  --shadow-sm: none;
  --shadow: 0 16px 34px -22px rgb(0 0 0 / .8);
  --shadow-lg: 0 24px 50px -24px rgb(0 0 0 / .85);
  --glass: rgb(17 19 25 / .86);
  --glass-soft: rgb(26 29 37 / .92);
  color-scheme: dark;
}
.icon-btn.theme-btn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 3px; }
.icon-btn.theme-btn svg { width: 17px; height: 17px; }
body.home:not(.scrolled) .top .theme-btn { border-color: rgb(255 255 255 / .2); }
/* Renk değişirken yumuşak geçiş (yalnızca düğmeye basınca, sayfa açılışında değil) */
html.theme-anim, html.theme-anim * { transition: background-color .35s, color .35s, border-color .35s !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Logo: < HSD > ve altında küçük yazı ---------- */
.logo { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; gap: 4px; }
.logo-mark { font: 800 27px/1 var(--sans); letter-spacing: -.01em; display: flex; align-items: center; gap: 5px; color: var(--ink); }
.logo-mark i { font-style: normal; color: var(--red); font-weight: 700; font-size: 24px; }
.logo small { font: 700 7.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-left: 1px; }

/* ---------- Üst menü ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.nav { display: flex; gap: 28px; margin-inline: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 14px; color: var(--muted); transition: color .15s; padding-block: 8px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.top-right { display: flex; align-items: center; gap: 10px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:hover { background: var(--bg); border-color: var(--line-strong); }
.btn.red { background: var(--red); border-color: var(--red); color: var(--red-ink); font-weight: 700; box-shadow: var(--shadow-sm); }
.btn.red:hover { background: var(--red-hover); border-color: var(--red-hover); box-shadow: var(--shadow); }
.btn.lg { height: 48px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
.btn.lg.red:hover { transform: translateY(-2px); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sunk); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.danger { color: var(--red); }
.btn svg { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn.lg.red:hover { transform: none; } }

.me-btn {
  display: flex; align-items: center; gap: 9px; padding: 3px 12px 3px 3px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13.5px;
}
.me-btn:hover { background: var(--bg); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 230px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 40;
}
.menu button, .menu a {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; text-decoration: none; font-size: 14px;
}
.menu button:hover, .menu a:hover { background: var(--sunk); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu .who { padding: 8px 10px 10px; font-size: 13px; }
.menu .who b { display: block; font-size: 14px; }

/* ---------- Avatar, rol etiketleri ---------- */
.av {
  --c: var(--muted-2);
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 700 12px/1 var(--sans);
}
.av.lg { width: 56px; height: 56px; font-size: 19px; }
.chip {
  --c: var(--muted-2);
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px;
  border-radius: 6px; background: var(--sunk); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.chip button { border: 0; background: none; padding: 0 0 0 2px; cursor: pointer; color: var(--muted-2); font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--sunk); color: var(--muted);
}
.pill.live { background: var(--red-soft); color: var(--red); }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
.pill.soon { background: var(--warn-soft); color: var(--warn); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before { animation: none; } }

/* ---------- Bölüm başlıkları (HSD: ortalanmış başlık ya da kırmızı simgeli küçük etiket + sağda bağlantı) ---------- */
.section { padding-block: 72px; }
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h2 { font-size: 30px; font-weight: 700; }
.section-title p { color: var(--muted); margin: 10px auto 0; max-width: 60ch; font-size: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { font-size: 30px; font-weight: 700; }
.section-head p { color: var(--muted); max-width: 60ch; margin-top: 8px; }
.section-head .more { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.section-head .more:hover { text-decoration: underline; }
.section-head .more svg { width: 15px; height: 15px; }
.kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.kicker svg { width: 16px; height: 16px; }

/* ---------- Ana sayfa: hero ---------- */
.hero {
  padding-block: 72px 80px;
  background:
    radial-gradient(60% 80% at 0% 0%, rgb(204 0 43 / .06), transparent 70%),
    radial-gradient(50% 60% at 100% 30%, rgb(204 0 43 / .04), transparent 70%),
    var(--bg);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.6vw, 60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ink-2); }
.hero h1 .red { color: var(--red); display: block; }
.hero .lead { font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 40rem; margin-top: 24px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-photo { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 8px; box-shadow: var(--shadow); }
.hero-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }

/* Sağ taraf: sıradaki etkinlikler paneli (kulüp fotoğrafı yokken) */
.week { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.week header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; gap: 10px; border-bottom: 1px solid var(--line); }
.week header h2 { font-size: 16px; font-weight: 700; }
.week header a { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600; }
.week .ev:first-of-type { border-top: 0; }

/* Liste satırı biçiminde etkinlik (panel ve anasayfa) */
.ev { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); text-decoration: none; }
.ev:hover { background: var(--bg); }
.date { text-align: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); padding: 8px 0; line-height: 1; font-variant-numeric: tabular-nums; }
.date b { display: block; font-size: 21px; font-weight: 800; }
.date small { display: block; font-size: 11px; font-weight: 600; margin-top: 4px; text-transform: capitalize; }
.ev h3 { font-size: 15px; font-weight: 700; }
.ev .meta { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.tag { font-size: 12px; font-weight: 600; color: var(--accent); }

/* ---------- Ana sayfa: ekip kartları (HSD "Vizyon ve Misyon" kartları gibi) ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; transition: box-shadow .2s; }
.feature:hover { box-shadow: var(--shadow); }
.feature .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 20%, var(--surface)); color: var(--c); }
.feature .ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 19px; font-weight: 700; margin-top: 6px; }
.feature p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.feature .meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted-2); }
.feature .meta b { color: var(--ink-2); font-weight: 600; }

/* ---------- Ana sayfa: kırmızı bant (HSD'deki topluluk yöneticisi bandı gibi) ---------- */
.band { background: var(--accent); color: var(--bg); padding-block: 64px; }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.band h2 { font-size: 32px; font-weight: 800; }
.band p { color: rgb(255 255 255 / .88); margin-top: 12px; font-size: 16px; max-width: 46ch; }
.band .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.band .btn { border-color: #fff; }
.band .btn.white { background: #fff; color: #2a2f86; font-weight: 700; }
.band .btn.white:hover { background: #f1f0ff; }
.band .btn.outline { background: rgb(0 0 0 / .12); color: #fff; border-color: rgb(255 255 255 / .5); }
.band .btn.outline:hover { background: rgb(0 0 0 / .2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); border-radius: 16px; padding: 16px 18px; }
.steps .no { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #2a2f86; display: grid; place-items: center; font-weight: 800; }
.steps h3 { font-size: 16px; font-weight: 700; }
.steps p { margin-top: 4px; font-size: 14px; color: rgb(255 255 255 / .85); max-width: none; }
.steps a { color: #fff; font-weight: 600; }

/* ---------- Alt bilgi (HSD: koyu lacivert, solda logo kutusu, ortada telif, sağda bağlantılar) ---------- */
.foot { background: var(--night); color: #8a93a3; border-top: 1px solid var(--line); padding-block: 40px; }
.foot .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; }
.foot-logo { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: inline-flex; text-decoration: none; }
.foot-logo .logo-mark { font-size: 20px; }
.foot-logo .logo-mark i { font-size: 18px; }
.foot p { text-align: center; font-size: 13.5px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; justify-content: flex-end; }
.foot nav a { text-decoration: none; color: var(--line-strong); }
.foot nav a:hover { color: #fff; }

/* ---------- Sayfa başı ve filtre butonları (HSD: kırmızı dolgulu seçili, beyaz çerçeveli diğerleri) ---------- */
.page-head { padding-block: 40px 24px; }
.page-head h1 { font-size: clamp(30px, 4vw, 36px); font-weight: 800; }
.page-head p { color: var(--muted); margin-top: 8px; max-width: 64ch; font-size: 15px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  border: 1px solid var(--line); background: var(--surface); padding: 6px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--muted); transition: background .15s, color .15s, border-color .15s;
}
.seg button:hover { border-color: var(--line-strong); color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- Etkinlik kartları (HSD etkinlikler sayfası) ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block: 20px 72px; }
.evc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.evc:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.evc { position: relative; }
.evc-top { position: relative; height: 128px; background: linear-gradient(135deg, var(--accent-soft) 0%, var(--sunk) 100%); display: flex; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.evc-day { font-size: 44px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.evc-mon { display: grid; font-size: 13px; color: var(--muted); line-height: 1.35; }
.evc-mon b { color: var(--ink-2); font-size: 15px; text-transform: capitalize; }
.evc-status { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.evc-status .pill, .evc-status .seats { background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.evc-status .seats { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; }
.evc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.evc-body h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.evc-body p { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.evc-meta { margin-top: auto; padding-top: 8px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.evc-meta span { display: flex; gap: 6px; align-items: center; min-width: 0; }
.evc-meta svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.evc-kind { display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--sunk); padding: 3px 9px; border-radius: 6px; }
.ev .desc { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 70ch; }
.empty-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 48px 20px; text-align: center; color: var(--muted-2); }

/* ---------- Login (MAKÜ NET düzeni) ---------- */
.login { min-height: calc(100vh - 69px); display: grid; place-items: center; padding-block: 40px; }
.login-card {
  width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden;
}
.login-l { padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.login-l .logo { align-self: center; margin-bottom: 4px; }
.login-l .sub { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: -10px; }
.login-l h1 { font-size: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.accts { display: grid; gap: 8px; }
.acct {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); cursor: pointer; text-align: left;
}
.acct:hover { border-color: var(--accent); }
.acct b { display: block; font-size: 14px; }
.acct small { color: var(--muted); font-size: 12.5px; }
.acct .chips { margin-left: auto; justify-content: flex-end; }
.login-r { background: var(--bg); padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; border-left: 1px solid var(--line); }
.login-r h2 { font-size: 26px; font-weight: 800; }
.login-r p { color: var(--muted); }
.feat { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.feat li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.feat li svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--sunk); color: var(--muted); flex: none; }
.feat li b { display: block; }
.feat li span { color: var(--muted); font-size: 13px; }
.fine { font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- Panel ---------- */
.panel { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; padding-block: 28px 64px; align-items: start; }
.side {
  position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px;
}
.side a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-weight: 500; font-size: 14px;
}
.side a:hover { background: var(--sunk); }
.side a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side .lock { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted-2); }
.side hr { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; }
.side .lbl { font-size: 12px; font-weight: 600; color: var(--muted-2); padding: 12px 10px 6px; }

.content { display: grid; gap: 20px; min-width: 0; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.bar h1 { font-size: 26px; font-weight: 800; }
.bar p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.card-h h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.card-h a, .card-h button.link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0; }
.card-h a.btn { color: var(--ink); font-size: 13px; }
.card-b { padding: 0 18px 18px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.go {
  display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; height: 44px;
  padding-left: 14px; max-width: 420px; flex: 1 1 260px;
}
.go:focus-within { border-color: var(--accent); }
.go label { font: 600 14px/1 var(--mono); color: var(--accent); }
.go input { flex: 1; min-width: 0; border: 0; background: none; height: 100%; font: 500 14px/1 var(--mono); outline: none; padding: 0 4px 0 1px; }
.go button { margin: 4px; height: 34px; }
.go-err { font-size: 13px; color: var(--red); margin-top: 6px; }

.hello { display: flex; gap: 18px; align-items: center; padding: 20px; flex-wrap: wrap; }
.hello h1 { font-size: 24px; font-weight: 800; }
.hello p { color: var(--muted); font-size: 14px; margin-top: 3px; }
.hello .chips { margin-top: 10px; }

.next { padding: 20px; display: grid; gap: 14px; }
.next .t { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.next .row { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 13.5px; align-items: center; }
.empty { padding: 26px 18px; color: var(--muted); font-size: 14px; text-align: center; }

/* meetings */
.mt { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.mt:first-child { border-top: 0; }
.mt h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt .meta { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.mt .chips { margin-top: 8px; }
.mt .act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.card { container-type: inline-size; }
@container (max-width: 560px) {
  .mt { grid-template-columns: 52px minmax(0, 1fr); }
  .mt .act { grid-column: 2; justify-content: flex-start; }
  .mt .wait { text-align: left; }
  .mt .wait br { display: none; }
}
.plat { font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.wait { font-size: 12.5px; color: var(--muted-2); text-align: right; line-height: 1.35; }
.note { font-size: 13px; color: var(--muted); padding: 12px 18px; border-top: 1px dashed var(--line); }
.note b { color: var(--ink); }

/* links */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; flex: 1 1 220px; max-width: 340px; }
.search:focus-within { border-color: var(--accent); }
.search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; }
.search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.cat-h { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 8px 2px 12px; }
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lk { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; display: grid; gap: 8px; transition: border-color .15s; }
.lk:hover { border-color: var(--accent); }
.lk .main { text-decoration: none; display: grid; gap: 2px; }
.lk .main::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.lk b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; padding-right: 54px; }
.lk .host { font-size: 12.5px; line-height: 1.3; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk .foot2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.lk .slug { font: 600 12px/1 var(--mono); color: var(--accent); }
.lk .dots { display: flex; gap: 3px; }
.lk .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lk .tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; z-index: 2; }
.icon-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: 7px; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--sunk); color: var(--ink); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.armed { background: var(--red-soft); color: var(--red); width: auto; padding: 0 8px; font-size: 12px; font-weight: 600; }

/* members */
.mgroup h3 { font-size: 12.5px; font-weight: 600; color: var(--muted-2); padding: 16px 18px 6px; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 9px 18px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.mrow:hover { background: var(--bg); }
.mrow .nm { font-weight: 600; font-size: 14.5px; color: var(--c, var(--ink)); }
.mrow .ttl { font-size: 12.5px; color: var(--muted); }
.mrow .chips { margin-left: auto; justify-content: flex-end; }

/* roles editor */
.roles { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.rlist { padding: 8px; display: grid; gap: 2px; }
.rlist button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-weight: 500; font-size: 14px;
}
.rlist button:hover { background: var(--sunk); }
.rlist button[aria-current="true"] { background: var(--sunk); font-weight: 600; }
.rlist button .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; }
.rlist button .n { margin-left: auto; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.rlist button .lk2 { font-size: 11px; color: var(--muted); }
.redit { padding: 20px; display: grid; gap: 22px; }
.field { display: grid; gap: 6px; }
.field > span, .field > label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.input, .select, .textarea {
  height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: var(--surface); width: 100%; outline: none;
}
.textarea { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input[disabled] { background: var(--sunk); color: var(--muted); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 28px; height: 28px; border-radius: 8px; background: var(--c); border: 2px solid transparent; cursor: pointer; }
.swatches button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.swatches button[disabled] { cursor: not-allowed; opacity: .5; }
.perms { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.perm { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.perm:first-child { border-top: 0; }
.perm b { display: block; font-size: 14px; font-weight: 600; }
.perm small { color: var(--muted); font-size: 12.5px; }
.sw { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.sw:checked { background: var(--ok); }
.sw:checked::after { transform: translateX(16px); }
.sw:disabled { opacity: .45; cursor: not-allowed; }
.lockbox { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; }
.preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.preview div { background: var(--bg); border-radius: 10px; padding: 12px; }
.preview b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.preview span { font-size: 12.5px; color: var(--muted); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; }

/* notices & profile */
.notice {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 14px; border-radius: 11px;
  background: var(--sunk); font-size: 14px; line-height: 1.5;
}
.notice > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.notice > span:not(.notice-acts) { flex: 1 1 240px; min-width: 0; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice b { color: inherit; }
.notice-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.notice.warn .btn { color: var(--ink); }
.lbl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lbl-row label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lbl-row a { font-size: 12.5px; color: var(--accent); text-decoration: none; font-weight: 600; }
.lbl-row a:hover { text-decoration: underline; }
.pform { display: grid; gap: 14px; }
.pform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pform p { font-size: 14px; }
.prefix { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.prefix:focus-within { border-color: var(--accent); }
.prefix span { padding-left: 12px; color: var(--muted); font-family: var(--mono); }
.prefix .input { border: 0; padding-left: 2px; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; word-break: break-all; }
@media (max-width: 720px) { .pform .two { grid-template-columns: 1fr; } }

/* ---------- Forum ---------- */
.forum { padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.forum .page-head { padding-bottom: 4px; }
.forum .page-head h1 { font-size: clamp(26px, 3.4vw, 36px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--accent); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.ftools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.ftools > * { min-width: 0; }
.ftools .seg { overflow-x: auto; max-width: 100%; }
.ftools .seg button { white-space: nowrap; }
.ffilter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; }

.tlist { overflow: hidden; }
.tp {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 110px; gap: 14px; align-items: center;
  padding: 13px 18px; border-top: 1px solid var(--line); text-decoration: none;
}
.tp:first-child { border-top: 0; }
.tp:hover { background: var(--bg); }
.tp .av { width: 34px; height: 34px; }
.tp h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.35; }
.tp .meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tp-cat { font-weight: 600; color: var(--ink); }
.tp-lock { color: var(--muted); display: inline-flex; }
.htag { font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.htag.big { font-size: 14px; }
button.htag:hover { text-decoration: underline; }
.tp-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); justify-content: flex-end; }
.tp-stats b { display: block; font-size: 15px; color: var(--ink); text-align: right; }
.tp-last { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tlist.compact .tp { grid-template-columns: 30px minmax(0, 1fr); padding: 11px 18px; }
.tlist.compact .tp .av { width: 30px; height: 30px; }
.tlist.compact .tp-stats, .tlist.compact .tp-last { display: none; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; }

.fsec { display: grid; gap: 10px; margin-top: 18px; }
.fsec-h h2 { font-size: 18px; font-weight: 700; color: var(--ink-2); }
.fsec-h p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.fcat {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 130px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 15px 18px; border-top: 1px solid var(--line); text-decoration: none;
}
.fcat:first-child { border-top: 0; }
.fcat:hover { background: var(--bg); }
.fcat h3 { font-size: 15.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fcat p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.fcat-stats { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.fcat-stats b { display: block; font-size: 15px; color: var(--ink); }
.fcat-last { min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.fcat-last b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcat-last span { font-size: 12.5px; color: var(--muted); }

.topic .page-head h1 { font-size: clamp(24px, 3vw, 32px); }
.topic-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; font-size: 13px; }
.title-edit { margin-top: 6px; max-width: 720px; }
.modbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; }
.lbl-mod { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin-right: 4px; }
.movesel { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.movesel .select { height: 32px; width: auto; max-width: 220px; font-size: 13px; }
.posts { display: grid; gap: 12px; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 12px; scroll-margin-top: 90px; }
.post.solution { border-color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }
.post-h { display: flex; gap: 12px; align-items: flex-start; }
.post-h .av { width: 36px; height: 36px; }
.post-who { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; flex: 1; }
.post-who b { font-size: 14.5px; }
.post-time { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.post-no { font-size: 12px; color: var(--muted); text-decoration: none; }
.post-deleted { font-style: italic; font-size: 14px; }
.post-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.post-acts { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.pbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 0; background: none; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.pbtn svg { width: 15px; height: 15px; }
.pbtn:hover:not([disabled]) { background: var(--sunk); color: var(--ink); }
.pbtn.danger { color: var(--red); background: var(--red-soft); }
.pbtn.like.on { color: var(--red); }
.pbtn.like.on svg { fill: currentColor; }
.pbtn[disabled] { opacity: .55; cursor: default; }
.reply .textarea { min-height: 140px; }
.rbox-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.md { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; display: grid; gap: 10px; }
.md p, .md ul, .md blockquote, .md pre { margin: 0; }
.md ul { padding-left: 22px; }
.md a { color: var(--accent); }
.md code { font: 13px/1.5 var(--mono); background: var(--sunk); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--sunk); border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
.md pre code { background: none; padding: 0; font-size: 13px; }
.md blockquote { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; color: var(--muted); }

.fadmin .card-h { align-items: flex-start; }
.row-tools { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.row-tools .btn { margin-right: 6px; }
.facat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 70px auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.facat-main p { font-size: 12.5px; margin-top: 2px; }
.facat-main .mono { font-size: 12px; }
.perm-col { display: grid; gap: 4px; min-width: 0; }
.perm-col small { font-size: 11px; color: var(--muted); font-weight: 600; }
.facat-n { font-size: 12.5px; }
.checkline { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.checkline input { accent-color: var(--accent); margin-top: 3px; }

@media (max-width: 960px) {
  .tp { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .tp-last { display: none; }
  .fcat { grid-template-columns: minmax(0, 1fr) auto; }
  .fcat-last { grid-column: 1 / -1; }
  .facat { grid-template-columns: minmax(0, 1fr) auto; }
  .facat .perm-col, .facat-n { grid-column: 1 / -1; }
  .facat .row-tools { grid-row: 1; grid-column: 2; }
}
@media (max-width: 720px) {
  .tp { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .tp .av { width: 30px; height: 30px; }
  .tp-stats { grid-column: 2; justify-content: flex-start; }
  .tp-stats b { display: inline; font-size: 12.5px; margin-right: 3px; }
  .fcat { grid-template-columns: 1fr; gap: 8px; }
  .post { padding: 14px; }
  .ftools .search { max-width: none; }
}

/* ---------- Topluluk: etkinlik, proje, yarışma, profil ---------- */
.page-pad { padding-block: 0 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.page-pad > .card.empty:first-child { margin-top: 32px; }
.detail .page-head h1 { font-size: clamp(26px, 3.4vw, 36px); }
.lead-sm { font-size: 16px; color: var(--muted); margin-top: 12px; max-width: 70ch; }
.list-h { font-size: 15px; font-weight: 700; margin-top: 8px; }
.plink { color: inherit; text-decoration: none; }
.plink:hover { color: var(--accent); text-decoration: underline; }

a.ev { color: inherit; }
.ev-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.seats { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.seats b { color: var(--warn); }
.ev-mini .ev { padding: 12px 18px; }
.ev-mini .ev:first-child { border-top: 0; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px; }
.info-grid > div { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.info-grid svg { width: 20px; height: 20px; color: var(--muted); flex: none; margin-top: 2px; }
.info-grid b { display: block; font-size: 14px; }
.info-grid small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.capbar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.capbar i { display: block; height: 100%; background: var(--accent); }
.reg-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.reg-cta .btn { height: 46px; padding: 0 22px; font-size: 15px; }
.table-wrap { overflow-x: auto; }
.att { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.att th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-2); padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--bg); }
.att td { padding: 10px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.att tr:last-child td { border-bottom: 0; }
.att .mono { font-size: 12.5px; }

.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pj {
  display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; transition: border-color .15s;
}
.pj:hover { border-color: var(--accent); }
.pj-top { display: flex; gap: 6px; flex-wrap: wrap; }
.pj h3 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin-top: 4px; }
.pj p { font-size: 14px; color: var(--muted); }
.pj .pj-look { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink); }
.pj .pj-look svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--muted); }
.pj-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.pj-team { display: flex; align-items: center; }
.pj-team .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--surface); }
.pj-team .muted { margin-left: 10px; }
.pj-comp { display: inline-flex; gap: 5px; align-items: center; text-align: right; }
.pj-comp svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.team-list { display: grid; gap: 4px; }
.tm { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.tm .av { width: 30px; height: 30px; font-size: 11px; }
.tm-who { display: grid; flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.tm-who small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.req { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.req p { margin-top: 6px; color: var(--muted); }

.cmp-list { display: grid; gap: 12px; }
.cmp { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px; }
.cmp.closed { opacity: .75; }
.cmp-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cmp h3 { font-size: 17px; font-weight: 700; margin-top: 6px; }
.cmp p { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 75ch; }
.cmp .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.cmp .meta b { color: var(--ink); font-weight: 600; }

.av.xl { width: 84px; height: 84px; font-size: 28px; }
.profile-head { display: flex; gap: 22px; align-items: flex-start; padding: 24px; margin-top: 28px; }
.ph-main { min-width: 0; flex: 1; }
.ph-main h1 { font-size: clamp(24px, 3vw, 30px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ph-main > p { margin-top: 4px; font-size: 14px; }
.bio { margin-top: 14px; font-size: 15px; max-width: 65ch; white-space: pre-line; }
.stats-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.stats-row div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.stats-row b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stats-row span { font-size: 12.5px; color: var(--muted); }
.act { display: grid; gap: 4px; padding: 12px 18px; border-top: 1px solid var(--line); text-decoration: none; }
.act:hover { background: var(--bg); }
.act-h { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; font-size: 14.5px; }
.act-x { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 960px) {
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .profile-head { flex-direction: column; padding: 18px; }
  .av.xl { width: 64px; height: 64px; font-size: 22px; }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ev-side { flex-direction: row; align-items: center; }
}

/* ---------- Bildirimler ---------- */
.bell-wrap { position: relative; }
.bell { width: 38px; height: 38px; position: relative; color: var(--ink); }
.bell svg { width: 20px; height: 20px; }
.nbadge {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--red); color: var(--red-ink); font: 700 10.5px/17px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.nbadge.inline { position: static; margin-left: auto; box-shadow: none; }
.notif-pop {
  position: absolute; right: -50px; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.notif-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.link-btn { border: 0; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.notif-list { max-height: min(420px, 60vh); overflow-y: auto; }
.notif-list .empty, .notif-page .empty { font-size: 13.5px; padding: 22px 18px; }
.notif-f { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.nitem { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 14px; border-top: 1px solid var(--line); text-decoration: none; font-size: 13.5px; }
.nitem:first-child { border-top: 0; }
.nitem:hover { background: var(--bg); }
.nitem.unread { background: var(--red-soft); }
.nitem.unread:hover { background: color-mix(in srgb, var(--red-soft) 70%, var(--bg)); }
.nicon { width: 30px; height: 30px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; color: var(--muted); }
.nitem.unread .nicon { background: var(--red); color: var(--red-ink); }
.nicon svg { width: 15px; height: 15px; }
.nbody { display: grid; gap: 2px; min-width: 0; }
.ntopic { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntime { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.notif-page .nitem { padding: 13px 18px; }
a.has-new { position: relative; }
a.has-new::after { content: ""; position: absolute; top: 6px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* okunmamış konular, bahsetmeler */
.pill.new { background: var(--red); color: var(--red-ink); }
.tp.unread h3 span:last-child { font-weight: 800; }
.tp:not(.unread) h3 span:last-child { font-weight: 500; }
.unread-line { display: flex; align-items: center; gap: 12px; color: var(--red); font-size: 12.5px; font-weight: 600; }
.unread-line::before, .unread-line::after { content: ""; flex: 1; height: 1px; background: var(--red); opacity: .5; }
.ftools-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 260px; justify-content: flex-end; }
.ftools-r .search { flex: 1 1 200px; }
.md a.mention, a.mention { color: var(--accent); font-weight: 600; text-decoration: none; background: var(--accent-soft); padding: 0 4px; border-radius: 5px; }
.md a.mention:hover { text-decoration: underline; }
.mention-box { display: grid; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; margin-top: -6px; }
.mention-box button { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 13.5px; }
.mention-box button[aria-selected="true"], .mention-box button:hover { background: var(--sunk); }
.mention-box .av { width: 24px; height: 24px; font-size: 10px; }
@media (max-width: 720px) {
  .notif-pop { right: -90px; }
}

/* ---------- Yoklama ---------- */
.code-row { display: flex; gap: 8px; flex-wrap: wrap; }
.code-input { flex: 1 1 140px; max-width: 220px; height: 46px; font-size: 22px; letter-spacing: .25em; text-align: center; }
.code-row .btn { height: 46px; }
.pbtn.on-check { color: var(--ok); font-weight: 600; }
.checkin-ok .ok-mark { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.checkin-ok .ok-mark svg { width: 34px; height: 34px; }

.screen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 32px 48px; min-height: calc(100vh - 69px); }
.screen-qr { background: #ffffff; border-radius: 22px; padding: 22px; box-shadow: var(--shadow); width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 1; }
.screen-qr svg { width: 100%; height: 100%; display: block; }
.screen-info { display: grid; gap: 14px; align-content: center; min-width: 0; }
.screen-info h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.screen-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; color: var(--muted); }
.screen-code { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.screen-code small { font-size: 12.5px; color: var(--muted); }
.screen-code b { font-size: clamp(40px, 6vw, 64px); letter-spacing: .12em; line-height: 1.05; }
.screen-bar { height: 5px; border-radius: 5px; background: var(--sunk); overflow: hidden; }
.screen-bar i { display: block; height: 100%; background: var(--accent); transition: width 1.8s linear; }
.screen-count { display: flex; align-items: baseline; gap: 10px; }
.screen-count b { font-size: 46px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.screen-count span { font-size: 15px; color: var(--muted); }
.screen-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.screen-recent li { background: var(--sunk); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
@media (max-width: 860px) {
  .screen { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
}

/* ---------- Sertifika ----------
   Kâğıt belge: her temada aynı görünür (açık zemin), yazdırırken A4 yatay sayfa olur. */
.cert-page { padding-block: 24px 64px; display: grid; gap: 16px; }
.cert {
  --paper: #fffdf8; --ink: #15171c; --soft: #6b6f78; --brand: #c7000b; --rule: #e6dfd2;
  background: var(--paper); color: var(--ink); border-radius: 6px; box-shadow: 0 14px 40px -18px rgb(0 0 0 / .35);
  aspect-ratio: 297 / 210; width: 100%; max-width: 1000px; margin: 0 auto; padding: 3.2%; color-scheme: light;
}
.cert-in { height: 100%; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -8px; padding: 5% 7%; display: flex; flex-direction: column; }
.cert-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cert-logo { font: 800 clamp(22px, 3.4vw, 38px)/1 var(--sans); letter-spacing: -.01em; }
.cert-logo i { font-style: normal; color: var(--brand); font-weight: 700; }
.cert-org { font: 600 clamp(9px, 1.1vw, 12px)/1.4 var(--sans); color: var(--soft); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.cert-kicker { margin-top: auto; font: 700 clamp(11px, 1.4vw, 15px)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brand); }
.cert-name { font: 800 clamp(30px, 6vw, 68px)/1.05 var(--sans); letter-spacing: -.03em; margin-top: 2.2%; padding-bottom: 2%; border-bottom: 1px solid var(--rule); }
.cert-text { font-size: clamp(12px, 1.7vw, 19px); line-height: 1.55; margin-top: 2.6%; max-width: 62ch; }
.cert-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cert-sig { display: grid; gap: 2px; font-size: clamp(11px, 1.4vw, 15px); }
.sig-line { width: clamp(120px, 22vw, 240px); border-top: 1px solid var(--ink); margin-bottom: 6px; }
.cert-sig small, .cert-verify small { color: var(--soft); font-size: clamp(9px, 1.05vw, 12px); }
.cert-verify { display: grid; gap: 2px; text-align: right; }
.cert-verify b { font-size: clamp(12px, 1.6vw, 18px); letter-spacing: .06em; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #ffffff !important; }
  .top, .foot, .no-print, .toast, .scrim { display: none !important; }
  .cert-page { padding: 0; }
  .cert { box-shadow: none; border-radius: 0; max-width: none; width: 297mm; height: 210mm; aspect-ratio: auto; padding: 10mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wrap { padding: 0 !important; max-width: none; }
}

/* audit */
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.log li:first-child { border-top: 0; }
.log time { font-size: 12.5px; line-height: 1.6; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* drawer / modal */
.scrim { position: fixed; inset: 0; background: rgb(10 12 16 / .45); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; overflow-y: auto; }
.scrim.right { justify-content: flex-end; align-items: stretch; padding: 0; }
.modal { width: 100%; max-width: 520px; background: var(--surface); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal header h2 { font-size: 17px; }
.modal form { padding: 20px; display: grid; gap: 14px; }
.modal .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer; }
.checks label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.checks input { accent-color: var(--accent); margin: 0; }
.hint { font-size: 12.5px; color: var(--muted); }
.err { font-size: 13px; color: var(--red); min-height: 1em; }
.modal .foot3 { display: flex; justify-content: flex-end; gap: 8px; }
.drawer { width: min(400px, 100%); background: var(--surface); height: 100%; overflow-y: auto; padding: 24px; display: grid; gap: 20px; align-content: start; border-left: 1px solid var(--line); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.drawer .top2 { display: flex; justify-content: space-between; align-items: start; }

/* redirect page */
.redirect { min-height: calc(100vh - 69px); display: grid; place-items: center; padding-block: 40px; }
.rbox { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 32px; display: grid; gap: 16px; text-align: center; }
.rbox .big { font-size: 13px; font-weight: 600; color: var(--accent); }
.rbox h1 { font-size: 24px; font-weight: 800; }
.rbox .url { font: 400 13px/1.5 var(--mono); color: var(--muted); word-break: break-all; background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.rbox .count { font: 800 56px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.rbox .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bar-prog { height: 4px; background: var(--sunk); border-radius: 4px; overflow: hidden; }
.bar-prog i { display: block; height: 100%; background: var(--accent); width: 0; transition: width 1s linear; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow);
}

/* ---------- Proje aşamaları ---------- */
/* Her aşamanın rengi: --st (koyu) ve --st-soft (açık zemin) */
.st-fikir { --st: #64748b; }
.st-planlama { --st: #2563eb; }
.st-gelistirme { --st: #d97706; }
.st-test { --st: #7c3aed; }
.st-tamamlandi { --st: #16a34a; }
[class*="st-"] { --st-soft: color-mix(in srgb, var(--st) 16%, transparent); }
:root[data-theme="dark"] .st-fikir { --st: #94a3b8; }
:root[data-theme="dark"] .st-planlama { --st: #60a5fa; }
:root[data-theme="dark"] .st-gelistirme { --st: #fbbf24; }
:root[data-theme="dark"] .st-test { --st: #a78bfa; }
:root[data-theme="dark"] .st-tamamlandi { --st: #4ade80; }
.pill.st { background: var(--st-soft); color: var(--st); }
.pill.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fine-h { font-size: 12.5px; }

/* Pano: her aşama bir sütun */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bcol { display: grid; gap: 8px; padding: 8px; border-radius: 14px; background: var(--sunk); }
.bcol header { display: flex; align-items: center; gap: 8px; padding: 6px 6px 4px; }
.bcol header .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); }
.bcol h2 { flex: 1; font-size: 13.5px; font-weight: 600; }
.bcol header .num { font-size: 12.5px; color: var(--muted-2); }
.bcard { display: grid; gap: 6px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .15s; }
.bcard:hover { border-color: var(--line-strong); }
.bcard h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.bteam { font-size: 12.5px; color: var(--muted); }
.bfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.bfoot small { font-size: 12px; color: var(--muted-2); }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.list-head h2 { font-size: 18px; font-weight: 700; }
.list-head a { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.list-head a svg { width: 14px; height: 14px; }

/* Proje sayfası: aşama çizelgesi */
.stepper { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.stepper::before, .stepper::after { content: ""; position: absolute; left: 10%; top: 22px; height: 3px; border-radius: 3px; }
.stepper::before { right: 10%; background: var(--line); }
.stepper::after { width: calc(80% * var(--done)); background: var(--st); }
.stepper li { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.stepper li > div, .stepper li > button { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 0 2px; text-align: center; background: none; border: 0; font: inherit; color: inherit; border-radius: 10px; min-width: 0; }
.stepper li > button { cursor: pointer; }
.sdot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--muted-2); transition: border-color .15s, color .15s; }
.sdot svg { width: 18px; height: 18px; stroke-width: 2.4; }
.stepper button:hover .sdot { border-color: var(--st); color: var(--st); }
.stepper .s-done .sdot { background: var(--st); border-color: var(--st); color: #fff; }
.stepper .s-now .sdot { border-color: var(--st); color: var(--st); box-shadow: 0 0 0 5px var(--st-soft); }
.stepper b { font-size: 13px; font-weight: 600; }
.stepper .s-next b { color: var(--muted-2); font-weight: 500; }
.stepper small { font-size: 11.5px; color: var(--muted); min-height: 1.4em; }

/* Yol haritası */
.ms-list { list-style: none; margin: 0; padding: 4px 0 6px; }
.ms { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--line); }
.ms-check { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ok); cursor: pointer; }
.ms-box { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 5px; color: var(--ok); }
.ms-box svg { width: 13px; height: 13px; stroke-width: 2.6; }
.ms-main { flex: 1; min-width: 0; display: grid; }
.ms-t { font-size: 14px; }
.ms.done .ms-t { color: var(--muted-2); text-decoration: line-through; }
.ms small { font-size: 12px; color: var(--muted); }
.ms.late small { color: var(--red); font-weight: 600; }
.ms-add { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.ms-add .btn { height: 100%; }
.ms-add .err { grid-column: 1 / -1; min-height: 0; }

/* ---------- Ekipler ---------- */
a.feature { text-decoration: none; color: inherit; }
.center-more { text-align: center; margin-top: 32px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.tcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm);
  text-decoration: none; transition: box-shadow .2s, border-color .2s;
}
.tcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.tcard:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.tc-top { display: flex; gap: 14px; align-items: center; }
.tcard .ic, .team-hero .ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--c) 20%, var(--surface)); color: var(--c); }
.tcard .ic svg { width: 24px; height: 24px; }
.tc-top h2 { font-size: 18px; font-weight: 700; }
.tc-top small { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.tc-top small svg { width: 14px; height: 14px; }
.tcard p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.tc-facts { display: grid; gap: 10px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.tc-facts div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; }
.tc-facts dt { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.tc-facts dd { margin: 0; min-width: 0; font-size: 13.5px; }
.tc-leads { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-leads > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--muted); }
.tc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tc-meta svg { width: 15px; height: 15px; }
.tc-meta .tc-go { color: var(--accent); font-weight: 600; }

.team-hero { padding-block: 32px 36px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--bg)); }
.team-hero + .page-pad { padding-top: 28px; }
.th-main { display: flex; gap: 20px; align-items: flex-start; }
.team-hero .ic { width: 64px; height: 64px; border-radius: 18px; }
.team-hero .ic svg { width: 32px; height: 32px; }
.team-hero h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.team-hero p { max-width: 70ch; margin-top: 8px; font-size: 15.5px; color: var(--muted); }
.th-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.th-meta span { display: inline-flex; align-items: center; gap: 6px; }
.th-meta svg { width: 16px; height: 16px; color: var(--c); }
.team-links { display: grid; gap: 2px; }
.team-links a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; }
.team-links a:hover { background: var(--sunk); }
.team-links svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.team-links span { display: grid; min-width: 0; font-size: 14px; }
.team-links small { font-size: 12px; color: var(--muted); }

/* Roller sayfası: ekip lideri seçimi */
.team-leads { display: grid; gap: 10px; margin-top: 10px; }
.chip.pick { border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.chip.pick svg { width: 13px; height: 13px; stroke-width: 2.4; }
.chip.pick[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 24%, var(--surface)); border-color: var(--c); color: var(--ink); font-weight: 600; }
.chip.pick:disabled { cursor: default; opacity: .7; }

/* Ekip tanıtımı penceresi: simge seçimi */
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick label { position: relative; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; }
.icon-pick span:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-pick input:checked + span { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 20%, var(--surface)); box-shadow: 0 0 0 1px var(--c); }
.icon-pick input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.icon-pick svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .board { grid-template-columns: repeat(5, minmax(210px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 720px) {
  .board { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .th-main { flex-direction: column; gap: 14px; }
  .tc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sdot { width: 32px; height: 32px; font-size: 12.5px; }
  .stepper::before, .stepper::after { top: 18px; }
  .stepper li > div, .stepper li > button { padding: 0; }
  .stepper b { font-size: 10.5px; letter-spacing: -.01em; }
  .stepper small { font-size: 10px; }
  .ms-add { grid-template-columns: minmax(0, 1fr) auto; }
  .ms-add input[name="title"] { grid-column: 1 / -1; }
}

/* ---------- Etkinlik afişleri ve liste (MAKÜ sitesindeki etkinlik listesi gibi) ---------- */
.poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-ph {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px; overflow: hidden;
  background: linear-gradient(160deg, #2b2f3a 0%, #16181d 100%); color: #fff; text-align: left;
}
.poster-ph .ph-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.poster-ph b { font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.poster-ph .ph-mark { font-size: 11px; font-weight: 800; opacity: .75; }

.evl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.evl-grid.page { margin-block: 20px 72px; }
.evl { display: grid; grid-template-columns: 52px 116px minmax(0, 1fr); gap: 16px; align-items: start; text-decoration: none; color: inherit; }
.evl-date { display: grid; text-align: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); line-height: 1; }
.evl-date b { background: var(--accent); color: var(--bg); font-size: 12.5px; font-weight: 600; padding: 6px 0; text-transform: capitalize; }
.evl-date span { font-size: 20px; font-weight: 700; padding: 9px 0; color: var(--ink-2); }
.evl-img { display: block; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--sunk); box-shadow: var(--shadow-sm); }
.evl-body { display: grid; gap: 6px; min-width: 0; }
.evl h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 2px; transition: color .15s; }
.evl:hover h3 { color: var(--accent); }
.evl-meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); min-width: 0; }
.evl-meta svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.evl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.evl-kind { font-size: 12px; font-weight: 600; color: #fff; background: var(--ok); border-radius: 4px; padding: 3px 8px; }
.evl-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
.evl-more svg { width: 14px; height: 14px; }

.next-ev { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.next-img { display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.next-body { display: grid; gap: 8px; min-width: 0; }
.next-body .kicker { margin-bottom: 0; }
.next-body h2 { font-size: 21px; font-weight: 700; line-height: 1.3; }
.next-ev:hover h2 { color: var(--accent); }

.evc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sunk); border-bottom: 1px solid var(--line); }
.evc-img + .evc-top { height: 76px; }
.ev-tools { display: inline-flex; align-items: center; gap: 12px; }
.view-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.view-toggle .icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

/* Etkinlik sayfası: afiş ve "Etkinlikten kareler" */
.ev-poster { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--sunk); }
.ev-poster .poster { height: auto; max-height: 560px; object-fit: contain; background: var(--sunk); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 0 18px 18px; }
.gallery figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--sunk); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery .icon-btn { position: absolute; top: 6px; right: 6px; background: var(--glass-soft); box-shadow: var(--shadow-sm); }

/* Formlardaki fotoğraf seçme alanı */
.photo-pick { display: flex; gap: 14px; align-items: center; }
.photo-prev { flex: none; width: 84px; height: 84px; border-radius: 10px; border: 1px dashed var(--line-strong); display: grid; place-items: center; overflow: hidden; color: var(--muted-2); background: var(--bg); }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.photo-prev svg { width: 24px; height: 24px; }
.photo-acts { display: grid; gap: 6px; min-width: 0; }

/* ---------- Yazılar ---------- */
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.art-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.art { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s; }
.art:hover { box-shadow: var(--shadow); }
.art.is-hidden { opacity: .6; }
.art-img { display: block; aspect-ratio: 16 / 9; background: var(--sunk); overflow: hidden; }
.art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.art-ph svg { width: 40px; height: 40px; }
.art-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px; flex: 1; }
.art-top { display: flex; gap: 6px; flex-wrap: wrap; }
.art h3 { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.art h3 a { text-decoration: none; }
.art h3 a:hover { color: var(--accent); }
.art p { font-size: 14px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.art-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted-2); margin-top: auto; }
.art-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.art-read { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.art-read svg { width: 14px; height: 14px; }
.art-read:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .evl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .art-grid, .art-grid.two { grid-template-columns: 1fr; }
  .next-ev { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .next-body h2 { font-size: 18px; }
}
@media (max-width: 480px) {
  .evl { grid-template-columns: 44px 88px minmax(0, 1fr); gap: 12px; }
  .evl h3 { font-size: 15px; }
  .evl-meta { font-size: 12.5px; }
  .evl-date span { font-size: 17px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 20px; }
}
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .band .wrap { grid-template-columns: 1fr; gap: 28px; }
  .foot .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot nav { justify-content: center; }
  .grid2, .roles { grid-template-columns: 1fr; }
  .panel { grid-template-columns: 1fr; }
  .side { position: static; display: flex; overflow-x: auto; gap: 2px; padding: 6px; }
  .side hr, .side .lbl { display: none; }
  .side a { flex: none; }
  .rlist { display: flex; overflow-x: auto; }
  .rlist button { flex: none; }
}
@media (max-width: 720px) {
  .hero { padding-block: 48px 56px; }
  .section { padding-block: 56px; }
  .cards4, .ev-grid { grid-template-columns: 1fr; }
  .section-title h2, .section-head h2, .band h2 { font-size: 26px; }
  .login-card { grid-template-columns: 1fr; }
  .login-r { border-left: 0; border-top: 1px solid var(--line); padding: 28px; }
  .login-l { padding: 28px 22px; }
  .acct .chips { display: none; }
  .mt { grid-template-columns: 52px minmax(0, 1fr); }
  .mt .act { grid-column: 2; justify-content: flex-start; }
  .wait { text-align: left; }
  .mrow .chips { display: none; }
  .preview { grid-template-columns: 1fr 1fr 1fr; }
  .log li { grid-template-columns: 1fr; gap: 2px; }
  .modal .two { grid-template-columns: 1fr; }
  .me-btn .nm { display: none; }
}
.top .mobile-nav { display: none; }
/* Menü 9 bağlantıya çıktığı için 1180 pikselin altında menü düğmesiyle açılan bir listeye dönüşür */
.nav-btn { display: none; }
@media (max-width: 1180px) {
  .nav { display: none; }
  .top-right { margin-left: auto; }
  .top .wrap { height: 60px; }
  .nav-btn { display: inline-grid; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 3px; }
  .nav-btn svg { width: 18px; height: 18px; }
  body.home:not(.scrolled) .top .nav-btn { border-color: rgb(255 255 255 / .2); color: #fff; }
  /* Açık menü, ana sayfadaki saydam başlığın üstünde de okunur kalsın */
  .top.nav-open { background: var(--surface) !important; border-color: var(--line) !important; backdrop-filter: none; }
  .top.nav-open .mobile-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: auto; padding-block: 10px 14px; border-top: 1px solid var(--line); }
  .mobile-nav a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 11px 12px; border-radius: 3px; }
  .mobile-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
}

/* ======================================================================
   Site yönetimi (portal): sekmeler ve tablolar
   ====================================================================== */
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--muted);
  text-decoration: none; font-size: 13.5px; font-weight: 600; transition: border-color .15s, color .15s;
}
.adm-tabs a svg { width: 16px; height: 16px; }
.adm-tabs a b { font-size: 12px; font-weight: 600; color: var(--muted-2); background: var(--sunk); border-radius: 999px; padding: 1px 7px; }
.adm-tabs a:hover { color: var(--ink); border-color: var(--line-strong); }
.adm-tabs a[aria-current="page"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.adm-tabs a[aria-current="page"] b { background: var(--accent); color: var(--bg); }
.adm-head { flex-wrap: wrap; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-2); padding: 10px 14px; border-block: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.adm-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr:hover td { background: color-mix(in srgb, var(--sunk) 45%, transparent); }
.adm-table tr.is-hidden td { opacity: .55; }
.adm-table td b { display: block; font-weight: 600; color: var(--ink); max-width: 360px; }
.adm-table td small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--muted); }
.adm-table td.num { white-space: nowrap; }
.adm-acts { white-space: nowrap; text-align: right; }
.adm-acts > * { vertical-align: middle; }
.adm-acts .icon-btn { display: inline-grid; }
.adm-thumb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 3px; overflow: hidden; background: var(--sunk); color: var(--muted-2); }
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-thumb svg { width: 18px; height: 18px; }
.adm-team { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 3px; color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.adm-team svg { width: 18px; height: 18px; }
.adm-flag { width: 13px; height: 13px; color: var(--accent); vertical-align: -1px; }
.select.sm { height: 32px; padding: 0 28px 0 10px; font-size: 13px; width: auto; }
.pbtn.on { color: var(--accent); border-color: var(--accent); }
.adm-search { display: flex; gap: 6px; margin-right: 6px; }
.adm-search .input { height: 32px; width: 200px; }
.adm-pager { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .adm-search .input { width: 150px; }
  .adm-table td b { max-width: 220px; }
}
/* Telefonda tablo satırları kart olur: sütun başlıkları gizlenir, hücreler alt alta dizilir */
@media (max-width: 600px) {
  .adm-head .row-tools { width: 100%; flex-wrap: wrap; }
  .adm-search { flex: 1; margin-right: 0; }
  .adm-search .input { flex: 1; width: auto; min-width: 0; }
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody { display: block; }
  .adm-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .adm-table tr:last-child { border-bottom: 0; }
  .adm-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .adm-table td:empty { display: none; }
  .adm-table td:has(> b) { flex: 1 1 60%; }
  .adm-table td b { max-width: none; }
  .adm-table tr:hover td { background: none; }
  .adm-acts { flex-basis: 100%; text-align: left; white-space: normal; display: flex !important; flex-wrap: wrap; gap: 6px; padding-top: 4px !important; }
}

/* ======================================================================
   Duyurular, eğitimler, sosyal medya hesapları
   ====================================================================== */
/* Duyuru kartları (MAKÜ sitesindeki duyuru kutuları gibi) */
.ann-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ann-grid.page { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 20px 72px; }
.ann {
  display: flex; flex-direction: column; min-height: 210px; text-decoration: none; color: inherit; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 3px;
  transition: transform .35s var(--ease), border-color .25s, box-shadow .35s;
}
.ann:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgb(0 0 0 / .5); }
.ann.pinned { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ann-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sunk); }
.ann-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--ease); }
.ann:hover .ann-img img { transform: scale(1.05); }
.ann-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1; }
.ann-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ann-cat { display: inline-flex; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 3px; padding: 2px 7px; }
.ann-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.ann-pin svg { width: 13px; height: 13px; }
.ann h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.ann:hover h3 { color: var(--accent); }
.ann-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ann-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.ann-foot svg { width: 14px; height: 14px; }
.ann:hover .evl-more svg { transform: translateX(4px); }
.ann-detail { display: grid; gap: 20px; }
.ann-detail.with-img { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }

/* Etkinlikler sayfasındaki Duyurular | Etkinlikler sekmeleri */
.page-tabs { margin-bottom: 18px; }
.tab-tools { display: flex; justify-content: flex-end; margin-bottom: 4px; }

/* Eğitimler */
.tr-section { margin-top: 12px; }
.tr-section + .tr-section { margin-top: 48px; }
.trc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.trc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.trc:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgb(0 0 0 / .5); }
.trc-img { display: block; aspect-ratio: 16 / 8; background: var(--sunk); overflow: hidden; }
.trc-img img { width: 100%; height: 100%; object-fit: cover; }
.trc-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--sunk)); }
.trc-ph svg { width: 34px; height: 34px; }
.trc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.trc-provider { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.trc h3 { font-size: 17px; font-weight: 700; line-height: 1.35; }
.trc p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.trc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.trc-meta span { font-size: 12px; color: var(--ink-2); background: var(--sunk); border-radius: 3px; padding: 2px 8px; }
.trc-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.radio-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; font-size: 14px; }
.radio-pill:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.radio-pill input { accent-color: var(--accent); margin: 0; }

/* Giriş alanında sosyal medya hesaplarımız: sade, simgeli */
.hero-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 32px; }
.hero-social-lbl { font-size: 13px; font-weight: 500; color: var(--muted-2); }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border-radius: 999px; text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: color .2s, transform .25s var(--ease);
}
.social a svg { width: 17px; height: 17px; }
.social a:hover { color: var(--accent); transform: translateY(-2px); }

@media (max-width: 1080px) {
  .ann-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trc-grid, .ann-grid.page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ann-grid, .ann-grid.page, .trc-grid { grid-template-columns: 1fr; }
  .ann { min-height: 0; }
  .ann-detail.with-img { grid-template-columns: 1fr; }
  .social a span { display: none; }
  .social a { padding: 0 11px; }
}

/* Ekipler sayfası: kulüp yönetimi (başkan, başkan yardımcısı) */
.officers { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 16px 20px; margin-bottom: 20px; border-left: 3px solid var(--accent); }
.off-lbl { font-size: 11.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.off-item { display: flex; align-items: center; gap: 10px; }
.off-item .av { width: 38px; height: 38px; font-size: 13px; }
.off-item small { display: block; font-size: 12px; color: var(--muted); }
.off-item b { font-size: 15px; font-weight: 600; }
.adm-officers { padding-top: 18px; max-width: 760px; }

/* ======================================================================
   Portal: pano, haftalık toplantılar, takvim, katılım, Drive, devir
   ====================================================================== */
.pt-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pt-dash > .card { margin: 0; min-width: 0; }
.pt-dash .pt-week { grid-column: span 2; }
.pt-next .card-b { display: grid; gap: 10px; padding: 0 18px 18px; }
.pt-next .t { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pt-next .row { font-size: 14px; }

/* Bu hafta: yedi gün yan yana */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 12px 6px; }
.wk-d { min-height: 92px; padding: 8px 6px; border-radius: 3px; background: var(--sunk); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-d.today { outline: 1.5px solid var(--accent); }
.wk-d.past { opacity: .55; }
.wk-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.wk-d.today .wk-h { color: var(--accent); }
.wk-none { color: var(--muted-2); font-size: 12px; }

/* Takvim öğeleri: tür rengiyle */
.ci { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; padding: 4px 6px; border-radius: 3px; border: 0; border-left: 3px solid var(--c, var(--line)); background: color-mix(in srgb, var(--c, var(--line)) 14%, transparent); color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.ci b { display: block; font-weight: 600; color: var(--ink); }
.ci.rs { --c: var(--accent); cursor: pointer; }
.ci.mt { --c: var(--blue); }
.ci.ev { --c: var(--ok); cursor: pointer; }
a.ci:hover, button.ci:hover { background: color-mix(in srgb, var(--c) 24%, transparent); }
.cal-key { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 14px; }
.cal-key .ci { width: auto; display: inline-block; cursor: default; }

/* Ay takvimi */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 12px; }
.cal-hd { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.cal-d { min-height: 96px; padding: 6px; border-radius: 3px; background: var(--sunk); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-d.out { opacity: .4; }
.cal-d.today { outline: 1.5px solid var(--accent); }
.cal-n { font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-d.today .cal-n { color: var(--accent); }

/* Liste kartları (Drive, ekipler, duyurular, linkler) */
.pt-list { display: grid; padding: 0 8px 10px; }
.pt-list > a, .pt-doc > a, .dv-acc { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 3px; text-decoration: none; color: var(--ink-2); }
.pt-list > a:hover, .pt-doc > a:hover { background: var(--sunk); }
.pt-list svg { width: 17px; height: 17px; color: var(--muted); }
.pt-list b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-list small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pt-doc { display: flex; align-items: center; gap: 8px; }
.pt-doc > a, .pt-doc > .dv-acc { flex: 1; min-width: 0; grid-template-columns: 20px minmax(0, 1fr); }
.dv-acc a { font-size: 12px; color: var(--accent); }
.pt-team { display: grid; gap: 2px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.pt-team:last-child { border-bottom: 0; }
.pt-team > a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.pt-team > a i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.pt-mail { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.pt-mail svg { width: 14px; height: 14px; }
.pt-mail:hover { color: var(--accent); }

/* Haftalık toplantı kartları */
.rs-list { display: grid; }
.rs-card { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; border-top: 1px solid var(--line); }
.rs-card.off { opacity: .6; }
.rs-when { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); }
.rs-when b { font-size: 13px; }
.rs-when span { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); }
.rs-body { display: grid; gap: 6px; min-width: 0; }
.rs-body h3 { font-size: 16px; font-weight: 700; }
.rs-body .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.rs-body p { font-size: 13.5px; margin: 0; }
.rs-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }

/* Katılım */
.att-days { display: flex; gap: 6px; overflow-x: auto; padding: 0 18px 10px; }
.att-days button { flex: none; display: grid; gap: 2px; justify-items: center; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.att-days button b { color: var(--ink); font-size: 13px; }
.att-days button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.att-sum { font-size: 14px; margin: 0 0 10px; }
.att-list { display: grid; }
.att-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.att-name { font-weight: 600; font-size: 14px; }
.att-name small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.seg.sm { gap: 4px; }
.seg.sm button { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Drive klasörü */
.drv .card-h h2 { display: flex; align-items: center; gap: 8px; }
.drv .card-h h2 svg { width: 18px; height: 18px; color: var(--muted); }
.drv .card-b { display: grid; gap: 12px; padding: 0 18px 18px; }
.drv .card-b p { margin: 0; }
.drv-frame { width: 100%; height: 380px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }

/* Devir */
.dv-checks { list-style: none; margin: 0; padding: 0 18px 12px; display: grid; }
.dv-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.dv-checks li svg { width: 18px; height: 18px; color: var(--warn); margin-top: 2px; }
.dv-checks li.ok svg { color: var(--ok); }
.dv-checks b { display: block; font-size: 14px; }
.dv-checks small { font-size: 12.5px; color: var(--muted); }
.dv-steps { margin: 0; padding: 0 18px 18px 38px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }

@media (max-width: 1080px) {
  .pt-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pt-dash { grid-template-columns: minmax(0, 1fr); }
  .pt-dash .pt-week { grid-column: auto; }
  .wk { grid-template-columns: minmax(0, 1fr); }
  .wk-d { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; }
  .wk-h { width: 64px; }
  .wk-d .ci { width: auto; flex: 1 1 140px; }
  .cal { gap: 2px; padding: 0 6px; }
  .cal-d { min-height: 64px; padding: 3px; }
  .cal-d .ci { font-size: 10.5px; padding: 2px 3px; }
  .cal-d .ci b { display: none; }
  .rs-card { grid-template-columns: 72px minmax(0, 1fr); }
  .rs-act { grid-column: 1 / -1; justify-content: flex-start; }
  .drv-frame { height: 300px; }
}

/* Site yönetimi: genel bakış kartları ve ekip pencereleri */
.adm-overview { display: grid; gap: 10px; padding-top: 4px; }
.adm-overview h3 { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.adm-tile { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--sunk); color: var(--ink-2); text-decoration: none; transition: border-color .15s; }
.adm-tile:hover { border-color: var(--accent); }
.adm-tile-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 3px; background: var(--accent-soft); color: var(--accent); }
.adm-tile-ic svg { width: 18px; height: 18px; }
.adm-tile b { display: block; font-size: 14px; color: var(--ink); }
.adm-tile small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.adm-tile-n { font-size: 13px; font-weight: 700; color: var(--muted); }
.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.color-pick label { position: relative; }
.color-pick input { position: absolute; opacity: 0; pointer-events: none; }
.color-pick span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid transparent; cursor: pointer; }
.color-pick input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.color-pick input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.tp-list { display: grid; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 3px; margin-block: 10px; }
.tp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--line); }
.tp-row:first-child { border-top: 0; }
.tp-row .checkline { display: flex; align-items: center; gap: 8px; margin: 0; }
.tp-row .av { width: 26px; height: 26px; font-size: 11px; }
.tp-lead { font-size: 13px; color: var(--muted); flex: none; }

/* ======================================================================
   Prototip 10: "HarmonyOS kartları"
   Açık gri zemin, kenarlıksız beyaz kartlar (gece modunda ince kenarlık), hap biçimli düğmeler ve menü,
   yumuşak gölgeler, Lexend. Öncekileri ezer; renkler yalnızca değişkenlerden.
   ====================================================================== */
:root { --card-border: transparent; }
:root[data-theme="dark"] { --card-border: #242833; }
body { font: 400 15px/1.6 var(--sans); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
.section-title h2, .section-head h2, .band h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.page-head h1 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.bar h1 { font-weight: 600; letter-spacing: -.02em; }
.section { padding-block: clamp(48px, 6vw, 80px); }
.section.alt { background: transparent; border: 0; }
.section-head .more, .card-h a, .card-h button.link { color: var(--blue); font-weight: 500; }

/* Kartlar: beyaz, çok yuvarlak, kenarlıksız */
.card, .feature, .tcard, .evc, .pj, .art, .bcol, .lk, .ann, .trc, .login-card, .side, .empty-card, .next-ev, .week, .notice, .modal, .menu, .rs-card, .adm-tile {
  border-color: var(--card-border); border-radius: var(--radius);
}
.card, .feature, .tcard, .evc, .pj, .art, .ann, .trc, .lk, .side, .empty-card { box-shadow: var(--shadow-sm); }
.lk, .notice, .menu, .adm-tile, .bcard { border-radius: var(--radius-sm); }
.pj:hover, .art:hover, .tcard:hover, .evc:hover, .feature:hover, .ann:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pj, .art, .tcard, .evc, .feature, .ann { transition: transform .35s var(--ease), box-shadow .35s; }
.evl-img .poster, .art-img img, .evc-img .poster { transition: transform .75s var(--ease); }
.evl:hover .evl-img .poster, .art:hover .art-img img, .evc:hover .evc-img .poster { transform: scale(1.05); }
.evl-img, .next-img, .ev-poster, .gallery figure, .photo-prev { border-radius: var(--radius-sm); }
.evl-date { border-radius: var(--radius-sm); border-color: var(--card-border); box-shadow: var(--shadow-sm); }
.date { border-radius: var(--radius-sm); }

/* Form alanları ve küçük parçalar */
.input, .select, .textarea, .search, .go { border-radius: var(--radius-sm); }
.chip { border-radius: 999px; }
.plat, .evc-kind, .evl-kind { border-radius: 999px; }
.feature .ic, .tcard .ic, .team-hero .ic { border-radius: 16px; }

/* Düğmeler: hap biçimli; varsayılan düğme gri dolgulu, kenarlıksız */
.btn { border-radius: 999px; font-weight: 500; border-color: transparent; background: var(--sunk); color: var(--ink); }
.btn:hover { background: var(--line); border-color: transparent; }
.btn.red { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--red) 70%, transparent); font-weight: 500; }
.btn.red:hover { transform: translateY(-2px); }
.btn.lg { height: 52px; padding: 0 26px; font-size: 15.5px; border-radius: 999px; }
.btn.sm { border-radius: 999px; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--sunk); }
.btn svg, .more svg, .evl-more svg, .art-read svg, .tc-go svg { transition: transform .25s var(--ease); }
.btn:hover svg, .more:hover svg, .evl:hover .evl-more svg, .art-read:hover svg, .tcard:hover .tc-go svg { transform: translateX(4px); }
.icon-btn.theme-btn, .nav-btn { border: 0 !important; background: var(--surface); border-radius: 50%; width: 40px; height: 40px; box-shadow: var(--shadow-sm); color: var(--ink); }
.seg button { border-color: transparent; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.adm-tabs a { border-radius: 999px; border-color: transparent; box-shadow: var(--shadow-sm); }
.adm-tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.adm-tabs a[aria-current="page"] b { background: var(--accent); }

/* Küçük üst etiket: hap */
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 12px; }
.eyebrow { background: var(--surface); color: var(--muted); padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.eyebrow b { color: var(--red); font-weight: 600; }
.kicker svg { display: none; }

/* Üst menü: zeminle aynı renkte; bağlantılar beyaz bir hap içinde, seçili olan koyu */
.top { background: var(--bg); border-bottom: 0; transition: background .3s, box-shadow .3s; }
.top .wrap { height: 76px; transition: height .3s var(--ease); }
.logo-mark { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; gap: 3px; }
.logo-mark i { font-size: 20px; font-weight: 600; }
.logo small { font-family: var(--display); font-weight: 500; letter-spacing: .02em; }
.nav { gap: 2px; background: var(--surface); border-radius: 999px; padding: 5px; box-shadow: var(--shadow-sm); }
.nav a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s; }
.nav a:hover { color: var(--ink); background: var(--sunk); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.nav a.has-new::after { right: 6px; top: 6px; }
.me-btn { border-color: transparent; box-shadow: var(--shadow-sm); }
body.scrolled .top { background: var(--glass); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -22px rgb(0 0 0 / .45); }
body.scrolled .top .wrap { height: 64px; }
.mobile-nav a { border-radius: 999px; }
.mobile-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.top.nav-open { background: var(--surface) !important; }

/* Giriş alanı: solda yazı, sağda kulübün telefon ekranı */
.hero { position: relative; padding-block: clamp(24px, 4vw, 48px) clamp(48px, 6vw, 80px); background: none; color: var(--ink); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.4vw, 70px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 16px 0 18px; color: var(--ink); }
.hero h1 .red { color: var(--red); }
.hero .lead { color: var(--muted); font-size: 18px; font-weight: 300; line-height: 1.65; max-width: 36rem; }
.hero .cta { margin-top: 28px; }
.phone { width: 340px; aspect-ratio: 340 / 600; margin-inline: auto; border-radius: 50px; background: #111318; padding: 11px; box-shadow: var(--shadow-lg); }
.phone-screen { position: relative; height: 100%; border-radius: 40px; background: var(--bg); overflow: hidden; padding: 46px 14px 14px; display: grid; gap: 10px; align-content: start; }
.phone-screen::before { content: ""; position: absolute; top: 13px; left: 50%; width: 86px; height: 22px; border-radius: 99px; background: #111318; transform: translateX(-50%); }
.phone-hi { padding: 0 4px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.phone-hi small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.ph-w { display: grid; gap: 3px; background: var(--surface); border-radius: 20px; padding: 13px 14px; font-size: 12.5px; color: var(--muted); text-decoration: none; box-shadow: var(--shadow-sm); }
.ph-w b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
a.eyebrow { text-decoration: none; }
.ph-w.red { background: var(--red); color: rgb(255 255 255 / .88); box-shadow: 0 14px 26px -16px var(--red); }
.ph-w.red b { color: #fff; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-tiles .ph-w { aspect-ratio: 1; align-content: space-between; }
.ph-tiles i { width: 30px; height: 30px; border-radius: 10px; background: var(--c); display: grid; place-items: center; color: #fff; }
.ph-tiles i svg { width: 16px; height: 16px; }
.ph-w:hover b { color: var(--accent); }
.ph-w.red:hover b { color: #fff; }

/* Ekiplerimiz: ayrı koyu bölüm değil, aynı zeminde kartlar */
.section.dark { background: none; color: var(--ink); border: 0; }
.feature .ic { background: var(--c); color: #fff; }
.feature .meta { border-color: var(--line); }

/* Etkinlik listesi: her etkinlik bir kart */
.evl { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--card-border); transition: transform .35s var(--ease), box-shadow .35s; }
.evl:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.evl-grid { gap: 16px; }
.evl-foot { border-color: var(--line); }
.evl-kind { background: var(--green-soft); color: var(--green); }

/* Duyurular: üst kırmızı çizgi yerine kategori hapı */
.ann { border-top: 1px solid var(--card-border); }
.ann-cat { border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--accent); }

/* Katılım bandı: kırmızı, yuvarlak bir kart */
.band { background: none; color: #fff; padding-block: 24px clamp(48px, 6vw, 80px); }
.band .wrap { background: linear-gradient(120deg, #1f2b6e, #4338a8 60%, #6a4fc4); border-radius: 32px; padding: clamp(28px, 4vw, 52px); }
.band .btn.white { border-radius: 999px; border-color: transparent; }
.band .btn.outline { border-radius: 999px; background: rgb(255 255 255 / .14); border-color: transparent; }
.steps li { border-radius: 20px; background: rgb(255 255 255 / .14); border-color: transparent; }

/* Alt bilgi: zeminle aynı, sade */
.foot { background: none; color: var(--muted); border-top: 0; padding-block: 28px 44px; }
.foot-logo { border-color: var(--card-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.foot nav a { color: var(--ink-2); }
.foot nav a:hover { color: var(--accent); }

/* Portal kenar menüsü ve sekmeler */
.side { padding: 12px; }
.side a { border-radius: 999px; padding: 9px 14px; }
.side a[aria-current="page"] { background: var(--ink); color: var(--bg); }

/* Kaydırınca aşağıdan belirme */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Aşağı inince sağ altta beliren düğme */
.float-cta {
  position: fixed; z-index: 25; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 999px;
  background: var(--red); color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500;
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--red) 70%, transparent); opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .3s, transform .3s var(--ease), background .2s;
}
.float-cta svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.float-cta:hover { background: var(--red-hover); }
.float-cta:hover svg { transform: translateX(4px); }
body.show-float .float-cta { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .phone { width: min(320px, 100%); }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .top .wrap { height: 64px; }
}
@media (max-width: 600px) {
  .band .wrap { border-radius: 24px; }
  .hero .lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pj:hover, .art:hover, .tcard:hover, .evc:hover, .feature:hover, .evl:hover, .ann:hover, .btn.red:hover { transform: none; }
}

/* Ekiplerimiz: ekip sayısı kadar sütun (beş ekip tek satırda), dar ekranda alt alta */
.cards4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
/* Art arda gelen bölümler arasında çift boşluk olmasın */
.section + .section { padding-top: 8px; }
/* Kırmızı katılım kutusu diğer içerikle aynı genişlikte */
.band .wrap { width: calc(100% - 2 * max(20px, env(safe-area-inset-left, 0px))); max-width: calc(var(--wrap) - 40px); }

/* ======================================================================
   Gece modu: %50 Prototip 10, %30 Prototip 2, %20 Prototip 3
   P10: yuvarlak kartlar, hap menü (seçili sekme açık renk). P2: turkuaz bağlantılar, tarih ve küçük etiketlerde kod yazı tipi.
   P3: sert ofset gölge yalnızca ana düğmelerde ve telefonda; sarı yalnızca "Yeni" etiketinde. Parıltı yok.
   ====================================================================== */
:root[data-theme="dark"] .nav { background: var(--surface); box-shadow: none; border: 1px solid var(--card-border); }
:root[data-theme="dark"] .nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .ph-w { box-shadow: none; border: 1px solid var(--card-border); }
:root[data-theme="dark"] .eyebrow { box-shadow: none; border: 1px solid var(--card-border); }
:root[data-theme="dark"] .eyebrow b { color: #ffd23f; }
:root[data-theme="dark"] .section-head .more, :root[data-theme="dark"] .card-h a, :root[data-theme="dark"] .card-h button.link { color: var(--teal); }
:root[data-theme="dark"] .ann-cat, :root[data-theme="dark"] .evl-date b, :root[data-theme="dark"] .phone-hi small, :root[data-theme="dark"] .evl-kind,
:root[data-theme="dark"] .date small, :root[data-theme="dark"] .rs-when b { font-family: var(--mono); letter-spacing: 0; }
:root[data-theme="dark"] .btn.red { box-shadow: 3px 3px 0 var(--hard); }
:root[data-theme="dark"] .btn.red:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--hard); }
:root[data-theme="dark"] .ph-w.red { box-shadow: none; }
:root[data-theme="dark"] .phone { background: #2a2f3a; box-shadow: 8px 8px 0 var(--hard); }
:root[data-theme="dark"] .phone-screen::before { background: #2a2f3a; }
:root[data-theme="dark"] .float-cta { box-shadow: 3px 3px 0 var(--hard); }
:root[data-theme="dark"] .seg button, :root[data-theme="dark"] .adm-tabs a, :root[data-theme="dark"] .social a { box-shadow: none; border: 1px solid var(--card-border); }
:root[data-theme="dark"] .icon-btn.theme-btn, :root[data-theme="dark"] .nav-btn { box-shadow: none; border: 1px solid var(--card-border) !important; }
@media (prefers-reduced-motion: reduce) { :root[data-theme="dark"] .btn.red:hover { transform: none; } }

/* ======================================================================
   Prototip 10: duyuru kartları ve ana sayfa etkinlikleri
   ====================================================================== */
/* Duyuru: kategori hapı, büyük başlık, altta yalnızca tarih */
.ann { min-height: 180px; }
.ann.pinned { background: var(--surface); }
.ann-body { padding: 22px; gap: 10px; }
.ann-cat { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 4px 10px; }
.ann h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ann:hover h3 { color: var(--ink); }
.ann-foot { border-top: 0; padding-top: 4px; color: var(--muted); font-size: 13.5px; }
.ann-foot svg { display: none; }
.ann-foot .evl-more { display: none; }

/* Ana sayfa etkinlikleri: ilki büyük koyu kart, diğerleri beyaz */
.evh-grid { display: grid; gap: 16px; grid-template-columns: 2fr 1fr 1fr; }
.evh-grid.n2 { grid-template-columns: 2fr 1fr; }
.evh-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.evh {
  display: grid; align-content: space-between; gap: 22px; min-height: 230px; padding: 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--card-border); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s; min-width: 0;
}
.evh:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.evh-d { font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.evh-d small { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.evh-d small::first-letter { text-transform: uppercase; }
.evh-b { display: grid; gap: 6px; min-width: 0; }
.evh-b b { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.evh-m { font-size: 14px; color: var(--muted); }
.evh-s { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.evh-s b { font-size: 13px; color: var(--warn); }
.evh.main { background: var(--night); color: #fff; border-color: transparent; }
.evh.main .evh-d small, .evh.main .evh-m, .evh.main .evh-s { color: rgb(255 255 255 / .62); }
:root[data-theme="dark"] .evh.main { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .evh.main .evh-d small, :root[data-theme="dark"] .evh.main .evh-m, :root[data-theme="dark"] .evh.main .evh-s { color: color-mix(in srgb, var(--bg) 62%, transparent); }
:root[data-theme="dark"] .evh-d small { font-family: var(--mono); font-size: 13.5px; }
@media (max-width: 860px) {
  .evh-grid, .evh-grid.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .evh-grid .evh.main { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .evh-grid, .evh-grid.n2 { grid-template-columns: minmax(0, 1fr); }
  .evh { min-height: 0; padding: 22px; }
  .evh-d { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .evh:hover { transform: none; } }

/* Giriş alanı: kırmızı yerine "Aramıza katıl" bandıyla aynı lacivert-mor */
:root { --indigo: #4338a8; --indigo-grad: linear-gradient(120deg, #1f2b6e, #4338a8 60%, #6a4fc4); }
:root[data-theme="dark"] { --indigo: #a594ff; }
.hero h1 .red { color: var(--indigo); }
.hero .btn.red { background: var(--indigo-grad); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgb(67 56 168 / .7); }
.hero .btn.red:hover { background: var(--indigo-grad); filter: brightness(1.1); }
.ph-w.red { background: var(--indigo-grad); box-shadow: 0 14px 26px -16px rgb(67 56 168 / .8); }
:root[data-theme="dark"] .hero .btn.red { box-shadow: 3px 3px 0 var(--hard); }

/* Giriş alanındaki telefon: dar ekranda iki yanda eşit boşluk, gece gölgesi sağa taşmasın */
@media (max-width: 860px) {
  .phone { width: min(300px, calc(100% - 48px)); }
  :root[data-theme="dark"] .phone { box-shadow: 0 10px 0 var(--hard); }
}
/* Ekranın içeriği sağa taşmasın: sütunlar ekran genişliğini aşamaz */
.phone-screen { grid-template-columns: minmax(0, 1fr); }
.ph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Üye aktifliği */
.act-stats { margin-bottom: 16px; }
.act-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.act-grid .adm-head { flex-wrap: wrap; gap: 10px; }
.act-who { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.act-who small { display: block; font-size: 12px; color: var(--muted); }
.act-who:hover b { text-decoration: underline; }
.act-table td > small { display: block; margin-top: 4px; }
.act-table tr.is-sel td { background: var(--accent-soft); }
.act-feed { list-style: none; margin: 0; padding: 4px 18px 8px; display: grid; }
.act-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.act-item:last-child { border-bottom: 0; }
.act-item a { color: var(--ink); font-weight: 600; text-decoration: none; }
.act-item a:hover { text-decoration: underline; }
.act-item small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.act-ic { width: 30px; height: 30px; border-radius: 10px; background: var(--sunk); color: var(--muted); display: grid; place-items: center; }
.act-ic svg { width: 15px; height: 15px; }
.act-note { padding: 0 18px 16px; margin: 0; }
@media (max-width: 1400px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }
.act-table td:not(:first-child) { white-space: nowrap; }
.act-who b { white-space: nowrap; }

/* Telefonda açık menü: kendi zemini olsun, ekrana sığmazsa kendi içinde kaysın, her şeyin üstünde dursun */
@media (max-width: 1180px) {
  .top { z-index: 45; }
  .top.nav-open .mobile-nav { background: var(--surface); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Uzun, boşluksuz yazılar (başlık, açıklama, proje adı…) kartın dışına taşmasın, alt satıra geçsin */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, p, b, strong, li, td, dd, blockquote, label, .md, .chip { overflow-wrap: anywhere; }
.checks-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }