/* ==========================================================================
   CampusHub ortak bileşenleri (cx-) — "Gün Işığı" paletiyle (mavi #004D9F, gök mavisi, turuncu #FF6B35).
   Bu dosya siteyi baştan boyamaz; yalnızca yeni sayfalarda (Haberler, Duyurular, Kariyer,
   Başvurularım, bildirim menüsü) kullanılan cx- bileşenlerini, eski temanın mavi-mor-pembe
   degradeleri, yuvarlak kartları ve kalın başlıklarıyla uyumlu biçimde tanımlar.
   ========================================================================== */
:root {
    --cx-paper: #f4f7fb;
    --cx-paper-2: #eaf2ff;
    --cx-paper-3: #dbe8fc;
    --cx-card: #ffffff;
    --cx-ink: #0f172a;
    --cx-ink-2: #334155;
    --cx-muted: #64748b;
    --cx-line: #e2e8f0;
    --cx-line-2: #cbd5e1;
    --cx-navy: #1e3a8a;
    --cx-navy-2: #003c80;
    --cx-accent: #1363df;
    --cx-accent-2: #0ea5e9;
    --cx-accent-soft: #eaf2ff;
    --cx-moss: #059669;
    --cx-moss-soft: #ecfdf5;
    --cx-gold: #d97706;
    --cx-gold-soft: #fffbeb;
    --cx-sky: #0891b2;
    --cx-sky-soft: #ecfeff;
    --cx-danger: #dc2626;
    --cx-danger-soft: #fef2f2;
    --cx-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --cx-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --cx-grad: linear-gradient(135deg, #004d9f 0%, #1363df 55%, #0ea5e9 100%);
    --cx-grad-soft: linear-gradient(135deg, #eaf2ff, #f0f9ff 55%, #fff5ef);
    --cx-r-sm: 12px;
    --cx-r: 22px;
    --cx-r-lg: 28px;
    --cx-shadow-1: 0 12px 30px rgba(15, 23, 42, .07);
    --cx-shadow-2: 0 18px 45px rgba(19, 99, 223, .16);
    --cx-shell: 1200px;
}

.min-w-0 { min-width: 0; }
.cx-shell { max-width: var(--cx-shell); margin: 0 auto; padding: 0 26px; }
.cx-page { padding-bottom: 28px; background: radial-gradient(circle at 8% 0, rgba(37, 99, 235, .08), transparent 30%), radial-gradient(circle at 92% 0, rgba(255, 107, 53, .08), transparent 28%); }
.cx-serif { font-weight: 900; letter-spacing: -.03em; }

/* ---------- Sayfa başlığı: renkli degrade bant ---------- */
.cx-masthead { background: var(--cx-grad); color: #fff; border-radius: 0 0 32px 32px; padding: 42px 0 34px; margin: -36px 0 30px; position: relative; overflow: hidden; box-shadow: 0 20px 45px rgba(19, 99, 223, .25); }
.cx-masthead::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.cx-masthead::before { content: ""; position: absolute; left: 35%; bottom: -120px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.cx-masthead > * { position: relative; z-index: 1; }
.cx-masthead__inner { display: flex; gap: 28px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.cx-masthead__text { max-width: 720px; }
.cx-kicker { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: .35rem .85rem; font-size: .78rem; font-weight: 800; margin: 0 0 .9rem; }
.cx-kicker::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; }
.cx-title { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; font-weight: 950; letter-spacing: -.04em; margin: 0 0 .7rem; color: #fff; }
.cx-title em { font-style: normal; background: linear-gradient(90deg, #ffe3b3, #ffb38a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cx-lead { font-size: 1.06rem; color: rgba(255, 255, 255, .88); margin: 0; max-width: 640px; }
.cx-lead a { color: #fff; font-weight: 800; }
.cx-masthead__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.cx-masthead .form-control { border: 0; border-radius: 999px; padding: .65rem 1.1rem; box-shadow: 0 10px 24px rgba(15, 23, 42, .15); }
.cx-masthead .cx-btn--ink { background: #0f172a; }
.cx-masthead .cx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); }
.cx-masthead .cx-btn--ghost:hover { background: #fff; color: #004d9f; }
.cx-masthead .cx-chip { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.cx-masthead .cx-chip:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.cx-masthead .cx-chip.is-active { background: #fff; color: #004d9f; border-color: #fff; }
.cx-masthead .cx-stat strong { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.cx-masthead .cx-stat span { color: rgba(255, 255, 255, .8); }
.cx-masthead--ink { background: linear-gradient(135deg, #0f172a, #004d9f 60%, #1363df); }
.cx-dateline { font-size: .82rem; color: rgba(255, 255, 255, .8); display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .9rem; }

/* ---------- Bölüm başlığı ---------- */
.cx-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.1rem; padding-bottom: .55rem; position: relative; }
.cx-section-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 99px; background: var(--cx-grad); }
.cx-section-head h2, .cx-section-head h3 { font-size: 1.35rem; margin: 0; font-weight: 900; letter-spacing: -.03em; color: var(--cx-ink); }
.cx-section-head .cx-more { font-size: .88rem; font-weight: 800; color: var(--cx-accent); text-decoration: none; white-space: nowrap; }
.cx-section-head .cx-more:hover { color: var(--cx-accent-2); }
.cx-section-head--thin::after { width: 36px; height: 3px; }

/* ---------- Kartlar ---------- */
.cx-card { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: var(--cx-r); box-shadow: var(--cx-shadow-1); }
.cx-card__body { padding: 20px 22px; }
.cx-card--link { display: block; color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cx-card--link:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(19, 99, 223, .15); border-color: #c7dbfb; color: inherit; }
.cx-card--sunk { background: var(--cx-grad-soft); border-color: #dbe8fc; }

/* ---------- Düğmeler ---------- */
.cx-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .66rem 1.15rem; border-radius: 999px; font-weight: 800; font-size: .95rem; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; line-height: 1.2; }
.cx-btn--primary { background: #1363df; color: #fff; box-shadow: 0 10px 24px rgba(19, 99, 223, .28); }
.cx-btn--primary:hover { background: #004d9f; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 77, 159, .32); }
.cx-btn--ink { background: #0f172a; color: #fff; }
.cx-btn--ink:hover { background: #1e293b; color: #fff; transform: translateY(-2px); }
.cx-btn--ghost { background: #fff; color: #334155; border-color: var(--cx-line); }
.cx-btn--ghost:hover { background: #eaf2ff; color: #004d9f; border-color: #c7dbfb; }
.cx-btn--light { background: #fff; color: #004d9f; }
.cx-btn--light:hover { background: #eaf2ff; color: #004d9f; }
.cx-btn--sm { padding: .45rem .85rem; font-size: .85rem; }
.cx-btn .cx-arrow { transition: transform .15s ease; }
.cx-btn:hover .cx-arrow { transform: translateX(3px); }
.cx-btn.is-liked, .news-like.is-liked { background: #fff1f2 !important; color: #e11d48 !important; border-color: #fecdd3 !important; }

/* ---------- Çipler, etiketler ---------- */
.cx-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.cx-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #cfe0fb; background: #eaf2ff; color: #004d9f; border-radius: 999px; padding: .4rem .9rem; font-size: .86rem; font-weight: 800; text-decoration: none; transition: all .15s ease; }
.cx-chip:hover { background: #dbe8fc; color: #003c80; }
.cx-chip.is-active { background: #004d9f; border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(0, 77, 159, .25); }
.cx-chip small { opacity: .75; font-weight: 700; }
.cx-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #f05a22; }
.cx-tag--moss { color: #059669; }
.cx-tag--navy { color: #2563eb; }
.cx-tag--gold { color: #d97706; }
.cx-tag--muted { color: #64748b; }
.cx-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .25rem .7rem; font-size: .76rem; font-weight: 800; background: #f1f5f9; color: #475569; }
.cx-pill--accent { background: #eaf2ff; color: #004d9f; }
.cx-pill--moss { background: #ecfdf5; color: #047857; }
.cx-pill--gold { background: #fffbeb; color: #b45309; }
.cx-pill--navy { background: #eff6ff; color: #1d4ed8; }

.cx-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .84rem; color: var(--cx-muted); }
.cx-meta > * + *::before { content: "•"; margin-right: .7rem; color: #cbd5e1; }
.cx-headline { font-weight: 900; letter-spacing: -.02em; line-height: 1.22; color: var(--cx-ink); }
a.cx-headline, .cx-headline a { color: inherit; text-decoration: none; }
a.cx-headline:hover, .cx-headline a:hover { color: #2563eb; }

/* ---------- Boş durum, istatistik, tarih ---------- */
.cx-empty { border: 2px dashed #c5d5ee; border-radius: var(--cx-r); padding: 38px 24px; text-align: center; color: var(--cx-muted); background: #fff; }
.cx-empty__icon { width: 58px; height: 58px; border-radius: 18px; background: var(--cx-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: .9rem; box-shadow: 0 12px 26px rgba(19, 99, 223, .3); }
.cx-empty h2, .cx-empty h3, .cx-empty h4 { color: var(--cx-ink); font-size: 1.2rem; font-weight: 900; margin-bottom: .35rem; }
.cx-empty p { margin: 0 auto; max-width: 420px; }
.cx-stat { display: flex; flex-direction: column; gap: .15rem; }
.cx-stat strong { font-size: 1.9rem; line-height: 1; font-weight: 950; background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cx-stat span { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cx-muted); }
.cx-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.cx-date { width: 58px; min-width: 58px; border-radius: 16px; overflow: hidden; text-align: center; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.cx-date b { display: block; background: var(--cx-grad); color: #fff; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 0; }
.cx-date strong { display: block; font-size: 1.4rem; font-weight: 950; line-height: 1.2; padding: 3px 0 1px; color: #0f172a; }
.cx-date small { display: block; font-size: .66rem; color: var(--cx-muted); padding-bottom: 4px; }
.cx-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #f1f5f9; }
.cx-row:first-child { border-top: 0; padding-top: 4px; }
.cx-row__body { min-width: 0; flex: 1; }
.cx-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #dbeafe, #ffe4d6); color: #004d9f; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; overflow: hidden; flex: 0 0 auto; object-fit: cover; }
.cx-note { font-size: .86rem; color: var(--cx-muted); }
.cx-sticky { position: sticky; top: 92px; }
.cx-divider { border: 0; border-top: 1px solid var(--cx-line); margin: 24px 0; opacity: 1; }

/* ---------- Uzun metin ---------- */
.cx-prose { font-size: 1.05rem; line-height: 1.78; color: #1e293b; }
.cx-prose p { margin-bottom: 1.1em; }
.cx-prose > p:first-of-type { display: flow-root; }
.cx-prose > p:first-of-type::first-letter { float: left; font-size: 3.2em; line-height: .9; padding: .06em .12em 0 0; font-weight: 950; background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Bildirim menüsü ---------- */
.cx-notif-menu { width: min(360px, 92vw); overflow: hidden; border: 0 !important; border-radius: 20px !important; box-shadow: 0 22px 55px rgba(15, 23, 42, .2) !important; }
.cx-notif-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; background: var(--cx-grad); color: #fff; }
.cx-notif-head strong { font-weight: 900; }
.cx-notif-head .cx-note { color: rgba(255, 255, 255, .85); }
.cx-notif-list { max-height: 340px; overflow-y: auto; }
.cx-notif-item { display: flex; gap: 10px; padding: 12px 16px; text-decoration: none; color: var(--cx-ink); border-bottom: 1px solid #f1f5f9; }
.cx-notif-item:hover { background: #f8fafc; color: var(--cx-ink); }
.cx-notif-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff6b35; margin-top: 6px; flex: 0 0 auto; }
.cx-notif-text { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; }
.cx-notif-text strong { font-weight: 800; }
.cx-notif-text span { color: #475569; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-notif-text small { color: var(--cx-muted); margin-top: 2px; }
.cx-notif-empty { padding: 26px 16px; text-align: center; color: var(--cx-muted); }
.cx-notif-empty i { font-size: 1.4rem; margin-bottom: 6px; display: block; }
.cx-notif-all { display: block; padding: 12px 16px; text-align: center; font-weight: 800; font-size: .88rem; text-decoration: none; color: #2563eb; background: #f8fafc; }
.cx-notif-all:hover { background: #eaf2ff; color: #004d9f; }
.notif-card:target { outline: 3px solid #9ec0f3; outline-offset: 2px; }

/* ---------- Sabit "oluştur" düğmeleri: mesaj kutusunun üstünde dursun ---------- */
body[data-authenticated="true"] .floating-add-btn,
body[data-authenticated="true"] .floating-create-btn { bottom: 96px !important; right: 24px !important; }

@media (max-width: 767.98px) {
    .cx-masthead { padding: 30px 0 26px; border-radius: 0 0 24px 24px; margin-bottom: 22px; }
    .cx-masthead__inner { align-items: flex-start; }
    .cx-stats { gap: 18px; }
    .cx-shell { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-card--link, .cx-btn, .cx-chip { transition: none; }
    .cx-card--link:hover, .cx-btn:hover { transform: none; }
}
.cx-notif-item.is-unread { background: #f5f9ff; }
.cx-notif-item.is-read .cx-notif-dot { visibility: hidden; }
.cx-notif-item.is-read strong { font-weight: 600; }