/* ==========================================================================
   Mikro Yeterlilik · microkredi.atauni.edu.tr
   Atatürk Üniversitesi dış öğrenme portalı — tasarım sistemi
   ========================================================================== */

/* ---------- 1. Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- 2. Tasarım belirteçleri ---------- */
:root {
    --brand-900: #101a4d;
    --brand-800: #16225f;
    --brand-700: #1f2f7f;
    --brand-600: #2b40a8;
    --brand-500: #3d55cf;
    --brand-400: #6b7ce6;
    --brand-100: #e6e9fb;

    --accent-600: #b8620f;
    --accent-500: #e08423;
    --accent-400: #f5a524;
    --accent-100: #fdf0dc;

    --teal-600: #0d7a6f;
    --teal-500: #14a08f;
    --teal-100: #dff4f0;

    --rose-500: #c8465e;
    --rose-100: #fbe6ea;

    --bg: #eef1f8;
    --bg-alt: #e3e8f4;
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --surface-3: #edf1f9;
    --line: #d5dbea;
    --line-strong: #bcc5dd;

    --ink: #12162e;
    --ink-soft: #47506e;
    --ink-mute: #737c9a;
    --on-brand: #ffffff;

    --ok-bg: #e4f6ec; --ok-ink: #14663c;
    --warn-bg: #fdf0dc; --warn-ink: #8a5208;
    --err-bg: #fbe6ea; --err-ink: #a02138;

    --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-full: 999px;

    --sh-1: 0 1px 2px rgba(16, 26, 77, .08), 0 3px 10px rgba(16, 26, 77, .07);
    --sh-2: 0 4px 12px rgba(16, 26, 77, .10), 0 16px 36px rgba(16, 26, 77, .11);
    --sh-3: 0 10px 24px rgba(16, 26, 77, .13), 0 30px 64px rgba(16, 26, 77, .15);
    --sh-brand: 0 12px 30px rgba(43, 64, 168, .28);

    --shell: 1220px;
    --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --ease: cubic-bezier(.22, .68, .36, 1);
}


/* ---------- 3. Taban ---------- */
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background .3s var(--ease), color .3s var(--ease);
}
h1, h2, h3, h4 { line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.15rem, 1.3rem + 3.3vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem); }
h3 { font-size: 1.15rem; }
p { color: var(--ink-soft); }
strong { color: var(--ink); }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
@media (max-width: 640px) { .shell { width: min(100% - 28px, var(--shell)); } }

.skip-link {
    position: fixed; left: 16px; top: -100px; z-index: 200;
    background: var(--brand-600); color: #fff; padding: 12px 20px;
    border-radius: var(--r-sm); font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }

.serif { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.hl { position: relative; white-space: nowrap; }
.hl::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .32em;
    background: linear-gradient(90deg, var(--accent-400), var(--teal-500));
    opacity: .32; border-radius: 4px; z-index: -1;
}

/* ---------- 4. Üst bar + başlık ---------- */
.topbar {
    position: relative; overflow: hidden; color: #d3daff;
    background: linear-gradient(100deg, var(--brand-900) 0%, #172363 52%, #123f6e 100%);
    font-size: .8rem; letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* Sağ tarafta butonların arkasında yumuşak ışık */
.topbar::after {
    content: ""; position: absolute; right: 4%; top: 50%; width: 420px; height: 220px;
    transform: translateY(-50%); pointer-events: none;
    background: radial-gradient(closest-side, rgba(23, 178, 143, .22), transparent 72%);
}
.topbar .shell { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.topbar a { color: #fff; opacity: .88; }
.topbar a:hover { opacity: 1; }
.topbar-links { display: flex; gap: 10px; align-items: center; }
.topbar-note { display: flex; align-items: center; gap: 9px; font-weight: 600; }
/* Duyuru noktası hafifçe nefes alır */
.topbar-note b {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-400); color: transparent;
    box-shadow: 0 0 0 0 rgba(240, 169, 43, .55); animation: topbarNabiz 2.6s var(--ease) infinite;
}
@keyframes topbarNabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 169, 43, .5); }
    50%      { box-shadow: 0 0 0 6px rgba(240, 169, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .topbar-note b { animation: none; } }
@media (max-width: 780px) {
    .topbar .shell { flex-wrap: wrap; justify-content: center; padding-top: 8px; padding-bottom: 8px; gap: 10px; }
    .topbar-note { width: 100%; justify-content: center; }
}

.site-header {
    position: sticky; top: 0; z-index: 90;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.stuck { border-bottom-color: var(--line); box-shadow: var(--sh-1); }
.nav-wrap { display: flex; align-items: center; gap: 26px; min-height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
/* Kurumsal logo — yatay, renkli sürüm */
.brand-logo { height: 40px; width: auto; flex-shrink: 0; }
.brand-ayrac { width: 1px; height: 30px; background: var(--line-strong); flex-shrink: 0; }
@media (max-width: 520px) {
    .brand-logo { height: 32px; }
    .brand-ayrac, .brand-copy small { display: none; }
}
/* Koyu zeminli alt bilgide logo kendi renkleriyle, beyaz plaka üzerinde durur.
   (Beyaza çevirmek amblemin altın/beyaz detaylarını tek renk bir dairede kaybediyordu.) */
.footer-brand .brand-logo {
    height: 34px; padding: 9px 14px; border-radius: var(--r-sm);
    background: #fff; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
    box-sizing: content-box;
}
.footer-brand .brand-logo.plakasiz { padding: 0; background: none; box-shadow: none; height: 44px; }
.footer-brand .brand-ayrac { background: rgba(255, 255, 255, .28); height: 36px; }
.brand-mark {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-600), var(--brand-800) 55%, var(--teal-600));
    color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
    box-shadow: var(--sh-brand); position: relative; overflow: hidden;
}
.brand-mark::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 26% 18%, rgba(255, 255, 255, .5), transparent 60%);
}
.brand-mark span { position: relative; z-index: 1; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.brand-copy small { font-size: .72rem; color: var(--ink-mute); letter-spacing: .01em; }

/* Menü daralmaz ve satır kırmaz; yer darlığında yalnızca kullanıcı adı kısalır. */
.desktop-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.desktop-nav a {
    white-space: nowrap;
    padding: 9px 15px; border-radius: var(--r-full); font-size: .92rem; font-weight: 600;
    color: var(--ink-soft); transition: color .2s var(--ease), background .2s var(--ease);
}
.desktop-nav a:hover { color: var(--ink); background: var(--surface-3); }
.desktop-nav a.current { color: var(--brand-600); background: var(--brand-100); }
/* Giriş yapan öğrenci için "Derslerim" vurgusu */
.desktop-nav a.vurgulu {
    display: inline-flex; align-items: center; gap: 7px; font-weight: 800;
    color: var(--teal-700, #0b6f63);
    background: color-mix(in srgb, var(--teal-500) 14%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal-500) 34%, transparent);
}
.desktop-nav a.vurgulu .ikon { color: var(--teal-600); }
.desktop-nav a.vurgulu:hover { background: color-mix(in srgb, var(--teal-500) 22%, var(--surface)); color: #0b6f63; }
.desktop-nav a.vurgulu.current { background: var(--teal-600); color: #fff; box-shadow: none; }
.desktop-nav a.vurgulu.current .ikon { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 4px; min-width: 0; }
.nav-actions > * { flex-shrink: 0; }
.nav-actions > .kullanici-menu { flex-shrink: 1; min-width: 0; }
.icon-button {
    width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
    font-size: 1rem; transition: all .2s var(--ease);
}
.icon-button:hover { color: var(--brand-600); border-color: var(--brand-400); transform: translateY(-1px); }
.login-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
    border-radius: var(--r-full); font-size: .9rem; font-weight: 700; color: var(--on-brand);
    background: linear-gradient(120deg, var(--brand-600), var(--brand-800));
    box-shadow: var(--sh-brand); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.login-link:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(43, 64, 168, .36); }
.login-link .ikon { transition: transform .2s var(--ease); }
.login-link:hover .ikon { transform: translateX(3px); }
/* Kayıt Ol: giriş düğmesinin yanında ikincil (çizgili) görünüm. */
.login-link.egitimci {
    background: var(--surface); color: var(--brand-700);
    border: 1.5px solid var(--brand-400); box-shadow: none;
}
.login-link.egitimci:hover { background: var(--brand-100); box-shadow: 0 10px 24px rgba(43, 64, 168, .18); }

/* Rol şeridi: öğrenme alanı ↔ eğitmen/yönetim paneli (yalnızca iki rolü olanda basılır).
   Başlık satırını sıkıştırmasın diye başlığın hemen altında ince bir şerit olarak durur. */
.rol-serit { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.rol-serit .shell { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
.rol-serit-not { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--ink-mute); }
.rol-serit-not .ikon { color: var(--accent-500, var(--brand-500)); }
.rol-anahtar {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px;
    border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
}
.rol-anahtar a {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-full);
    font-size: .8rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.rol-anahtar a .ikon { color: var(--ink-mute); }
.rol-anahtar a:hover { color: var(--brand-700); background: var(--surface-3); }
.rol-anahtar a.acik { background: var(--brand-600); color: #fff; box-shadow: var(--sh-1); }
.rol-anahtar a.acik .ikon { color: #fff; }
@media (max-width: 640px) { .rol-serit-not { display: none; } .rol-serit .shell { justify-content: center; } }

/* Öğrenme alanında eğitimci kartı (derslerim.php) */
.egitmen-kart { border-left: 4px solid var(--brand-500); }
.egitmen-kart .ek-ust { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.egitmen-kart .ek-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.egitmen-kart .ek-liste li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.egitmen-kart .ek-liste b { font-size: .92rem; }
.egitmen-kart .ek-liste small { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-mute); }
.egitmen-kart .ek-liste a { font-size: .82rem; font-weight: 700; color: var(--brand-600); white-space: nowrap; }
.egitmen-kart .ek-durum { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 700; background: var(--warn-bg); color: var(--warn-ink); }

/* Rehber sayfası eylem kartı (ör. Ders Aç → Ders Talebinde Bulun) */
.rb-cta {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 26px; padding: 22px 26px; border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--brand-700), var(--brand-600) 60%, var(--brand-500));
    color: #fff; box-shadow: 0 18px 40px -12px rgba(31, 47, 127, .45);
}
.rb-cta-ikon {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
}
.rb-cta-metin { flex: 1; min-width: 220px; }
.rb-cta-metin strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.rb-cta-metin p { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .82); line-height: 1.55; }
.rb-cta-dugme { width: auto !important; background: #fff !important; color: var(--brand-700) !important; box-shadow: none !important; }
.rb-cta-dugme:hover { background: var(--brand-100) !important; transform: translateY(-2px); }
@media (max-width: 640px) {
    .rb-cta { padding: 18px; }
    .rb-cta-dugme { width: 100% !important; justify-content: center; }
}

/* Duyuru bildirimi */
.bildirim { position: relative; }
.bildirim-dugme { position: relative; }
.bildirim-rozet {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-full); display: grid; place-items: center;
    background: var(--rose-500); color: #fff; font-size: .66rem; font-weight: 800; line-height: 1;
    border: 2px solid var(--surface);
}
.bildirim.acik .bildirim-dugme { color: var(--brand-600); border-color: var(--brand-400); }

.bildirim-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: min(92vw, 380px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .22s var(--ease); overflow: hidden;
}
.bildirim.acik .bildirim-panel { opacity: 1; visibility: visible; transform: none; }

.bp-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.bp-ust h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.bp-ust h3 .ikon { color: var(--brand-500); }
.bp-ust h3 span { font-size: .72rem; font-weight: 700; color: var(--ink-mute);
    background: var(--surface-3); padding: 2px 9px; border-radius: var(--r-full); }
.bp-eylem { display: flex; gap: 6px; }
.bp-eylem button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 700; background: var(--brand-100); color: var(--brand-600); transition: all .18s var(--ease); }
.bp-eylem button:hover { filter: brightness(.96); }
.bp-eylem .sil { background: var(--err-bg); color: var(--err-ink); }

.bp-liste { max-height: 340px; overflow-y: auto; }
.bp-oge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px 16px;
    border-bottom: 1px solid var(--line); transition: background .18s var(--ease); }
.bp-oge:hover { background: var(--surface-2); }
.bp-tarih { width: 44px; text-align: center; padding: 7px 3px; border-radius: var(--r-xs);
    background: var(--surface-3); align-self: flex-start; }
.bp-tarih b { display: block; font-size: 1rem; font-weight: 800; line-height: 1; color: var(--brand-600); }
.bp-tarih small { font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--ink-mute); }
.bp-govde { min-width: 0; }
.bp-govde strong { display: block; font-size: .87rem; line-height: 1.35; }
.bp-govde small { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-mute); line-height: 1.45; }
.bp-etiket { display: none; margin-top: 6px; padding: 2px 9px; border-radius: var(--r-full);
    background: var(--rose-100); color: var(--rose-500); font-size: .66rem; font-weight: 800; font-style: normal; }
.bp-oge.okunmadi .bp-etiket { display: inline-block; }
.bp-oge.okunmadi { background: color-mix(in srgb, var(--brand-500) 5%, var(--surface)); }
.bp-oge.okunmadi:hover { background: color-mix(in srgb, var(--brand-500) 9%, var(--surface)); }

.bp-bos { padding: 34px 20px; text-align: center; color: var(--ink-mute); }
.bp-bos .ikon { margin: 0 auto 10px; }
.bp-bos p { font-size: .85rem; }
.bp-alt { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px;
    font-size: .84rem; font-weight: 700; color: var(--brand-600); background: var(--surface-2); }
.bp-alt:hover { background: var(--surface-3); }
@media (max-width: 1000px) { .bildirim { display: none; } }

/* Kullanıcı menüsü */
.kullanici-menu { position: relative; }
.kullanici-dugme {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
    max-width: 100%; min-width: 0;
    border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.kullanici-dugme:hover, .kullanici-menu.acik .kullanici-dugme { border-color: var(--brand-400); background: var(--surface); }
.ku-avatar {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(140deg, var(--brand-600), var(--teal-600)); color: #fff;
    font-weight: 800; font-size: .85rem; text-transform: uppercase;
}
.ku-ad { font-size: .88rem; font-weight: 700; max-width: 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ku-ok { width: 8px; height: 8px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.kullanici-menu.acik .ku-ok { transform: rotate(-135deg) translate(-3px, -3px); }
.kullanici-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 220px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .22s var(--ease);
}
.kullanici-menu.acik .kullanici-panel { opacity: 1; visibility: visible; transform: none; }
.kullanici-panel a {
    display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm);
    font-size: .9rem; font-weight: 600; color: var(--ink-soft); transition: background .18s var(--ease), color .18s var(--ease);
}
.kullanici-panel a:hover { background: var(--surface-3); color: var(--ink); }
.kullanici-panel .ikon { color: var(--ink-mute); }
.kullanici-panel a:hover .ikon { color: var(--brand-600); }
/* Yönetim paneli satırı yalnızca yetkili personelde basılır; menüde ayrı dursun diye üstünde çizgi var. */
.ku-panel { margin-top: 4px; border-top: 1px solid var(--line); color: var(--brand-600) !important; font-weight: 700; }
.ku-panel .ikon { color: var(--brand-600) !important; }
.ku-panel:hover { background: var(--brand-100) !important; }

.ku-cikis { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--rose-500) !important; }
.ku-cikis .ikon { color: var(--rose-500) !important; transform: rotate(0); }
.ku-cikis:hover { background: var(--rose-100) !important; }
@media (max-width: 1000px) { .kullanici-menu { display: none; } }

.menu-button { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.menu-button i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease); }
.menu-button[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; padding: 8px 20px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.mobile-nav a { padding: 13px 4px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; color: var(--brand-600); }
.mobile-nav.open { display: flex; }

@media (max-width: 1000px) {
    .desktop-nav { display: none; }
    .menu-button { display: flex; }
    .nav-actions { margin-left: auto; }
    .login-link { display: none; }
}

/* ---------- 4b. İkonlar ---------- */
.ikon { display: block; flex-shrink: 0; }
.ikon.yildiz { display: inline-block; vertical-align: -2px; }
a .ikon, button .ikon { pointer-events: none; }

/* İkon taşıyan kapsayıcıların renk ve hizası */
.cat-ico, .badge-ico { color: var(--c, var(--brand-600)); }
.step-ico, .route-ico { color: #fff; }
.es-ico { color: var(--ink-mute); }
.page-symbol { color: var(--brand-500); }
.ann-go { display: grid; place-items: center; }
.enroll-fact span .ikon, .chip .ikon { opacity: .75; }
.alert .ikon { margin-top: 1px; }
.icon-button .ikon { margin: 0 auto; }

/* ---------- 4c. Ana sayfa slaytı ---------- */
.slider {
    position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 140% at 12% 0%, #1b2a6b 0%, #101a48 45%, #070c25 100%);
}
/* Yumuşak renk lekeleri: slaytın rengiyle birlikte değişir */
.slider-fon { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.slider-fon i {
    position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: .55;
    animation: slaytLeke 16s ease-in-out infinite alternate;
}
.slider-fon i:nth-child(1) { width: 460px; height: 460px; left: -8%;  top: -22%; background: rgba(113, 131, 238, .55); }
.slider-fon i:nth-child(2) { width: 380px; height: 380px; right: 6%;  bottom: -26%; background: rgba(20, 160, 143, .45); animation-delay: -5s; }
.slider-fon i:nth-child(3) { width: 300px; height: 300px; right: 34%; top: -18%; background: rgba(240, 169, 43, .28); animation-delay: -9s; }
@keyframes slaytLeke {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(28px, 22px, 0) scale(1.12); }
}

.slider-track { position: relative; z-index: 1; height: clamp(400px, 46vw, 540px); }
.slide {
    position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden;
    background: linear-gradient(112deg,
        color-mix(in srgb, var(--slide-color, #16225f) 82%, transparent) 0%,
        color-mix(in srgb, var(--slide-color, #16225f) 34%, transparent) 55%,
        transparent 100%);
    opacity: 0; visibility: hidden; transform: scale(1.04);
    transition: opacity .7s var(--ease), transform .9s var(--ease), visibility .7s;
}
.slide.active { opacity: 1; visibility: visible; transform: none; }
/* Kampanya görseli olan slaytta sağ sütun genişler */
.slide.gorselli .slide-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 28px; }
.slide.gorselli .slide-sahne { height: clamp(300px, 34vw, 430px); }
.ss-gorsel {
    position: relative; z-index: 1; max-width: 100%; max-height: 100%;
    width: auto; height: 100%; object-fit: contain; object-position: center bottom;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .5));
}
.ss-isik {
    position: absolute; inset: 8% -6% -8% -6%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--slide-color, #16225f) 55%, transparent), transparent 78%);
    filter: blur(34px);
}
.slide.active .ss-gorsel { animation: slaytGorsel .9s var(--ease) both; }
@keyframes slaytGorsel { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .slide.gorselli .slide-inner { grid-template-columns: 1fr; } }
.slide-pattern {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 100% at 20% 50%, #000 30%, transparent 82%);
    mask-image: radial-gradient(120% 100% at 20% 50%, #000 30%, transparent 82%);
}

/* .shell'in ortalaması korunmalı; yalnızca iç düzen ızgaraya çevrilir. */
.slide-inner {
    position: relative; z-index: 2; color: #fff;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px; align-items: center;
    padding-block: 30px;
}
@media (max-width: 980px) { .slide-inner { grid-template-columns: 1fr; } }

.slide-metin { max-width: 640px; }
.slide-kicker {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: var(--r-full); margin-bottom: 18px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
    font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.slide-kicker i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-400);
    box-shadow: 0 0 0 0 rgba(240, 169, 43, .6); animation: slaytNabiz 2.4s ease-out infinite;
}
@keyframes slaytNabiz {
    0%   { box-shadow: 0 0 0 0 rgba(240, 169, 43, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(240, 169, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 169, 43, 0); }
}
.slide-inner h2 {
    font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3.5rem); line-height: 1.1; color: #fff; margin-bottom: 16px;
    text-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
/* Başlıkta **...** ile işaretlenen bölüm slaydın vurgu rengini alır */
.slide-inner h2 b { font-weight: inherit; color: var(--vurgu, var(--accent-400)); }
.slide-inner p { color: rgba(255, 255, 255, .84); font-size: clamp(.98rem, .93rem + .25vw, 1.12rem); max-width: 52ch; }
.slide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.slide-actions .btn-light { box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55); }
.slide-actions .btn-light:hover { transform: translateY(-2px); }

/* ---------- Sağdaki görsel sahne ---------- */
.slide-sahne { position: relative; height: 260px; display: grid; place-items: center; }
@media (max-width: 980px) { .slide-sahne { display: none; } }

/* Sahnenin ortasında şeffaf üniversite mührü.
   Görsel beyaz zemin üzerine siyah çizgili olduğu için ters çevrilip 'screen'
   ile karıştırılır: zemin kaybolur, yalnızca çizgiler ışık gibi kalır. */
.ss-muhur {
    position: absolute; width: 430px; height: 430px; pointer-events: none;
    background: url("../images/dairesel-siyah.png") no-repeat center / 2050px auto;
    filter: invert(1); mix-blend-mode: screen; opacity: .26;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
    animation: slaytDon 70s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ss-muhur { animation: none; } }

.ss-halka {
    position: absolute; width: 232px; height: 232px; border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .26); animation: slaytDon 26s linear infinite;
}
.ss-halka.ikinci {
    width: 288px; height: 288px; border-style: solid; border-color: rgba(255, 255, 255, .12);
    animation-duration: 38s; animation-direction: reverse;
}
@keyframes slaytDon { to { transform: rotate(360deg); } }

.ss-kart {
    position: relative; display: grid; place-items: center; width: 168px; height: 168px;
    border-radius: 42px; color: #fff;
    background: linear-gradient(150deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08)),
                radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--slide-color, #16225f) 55%, transparent), transparent 70%);
    border: 1px solid rgba(255, 255, 255, .38);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65),
                0 0 60px -18px color-mix(in srgb, var(--slide-color, #16225f) 70%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .5);
    backdrop-filter: blur(14px);
    animation: slaytSuzul 7s ease-in-out infinite alternate;
}
.ss-kart .ikon { stroke-width: 1.1; opacity: .92; }
@keyframes slaytSuzul {
    from { transform: translateY(-8px) rotate(-3deg); }
    to   { transform: translateY(10px) rotate(3deg); }
}

.ss-rozet {
    position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 15px;
    border-radius: var(--r-full); background: rgba(255, 255, 255, .93); color: var(--ink);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8);
    animation: slaytSuzul 6s ease-in-out infinite alternate;
}
.ss-rozet .ikon { color: var(--brand-600); flex: none; }
.ss-rozet b { display: block; font-size: .92rem; font-weight: 800; line-height: 1.05; }
.ss-rozet small { display: block; font-size: .68rem; font-weight: 600; color: var(--ink-mute); white-space: nowrap; }
.ss-rozet.r1 { left: -18px; top: 10px;    animation-delay: -2s; }
.ss-rozet.r2 { right: 0;    bottom: 14px; animation-delay: -4s; }

/* ---------- Giriş animasyonu ---------- */
.slide.active .slide-metin > * { animation: slideUp .65s var(--ease) both; }
.slide.active .slide-metin > *:nth-child(2) { animation-delay: .09s; }
.slide.active .slide-metin > *:nth-child(3) { animation-delay: .18s; }
.slide.active .slide-metin > *:nth-child(4) { animation-delay: .27s; }
.slide.active .ss-kart  { animation: slaytGir .8s var(--ease) both, slaytSuzul 7s ease-in-out 1s infinite alternate; }
.slide.active .ss-rozet { animation: slaytGir .8s var(--ease) .35s both, slaytSuzul 6s ease-in-out 1.2s infinite alternate; }
@keyframes slideUp  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes slaytGir { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

/* ---------- Denetimler ---------- */
.slider-nav {
    position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); transition: all .22s var(--ease);
}
.slider-nav:hover { background: rgba(255, 255, 255, .28); transform: scale(1.08); }
.slider-nav.prev { left: 22px; }
.slider-nav.prev .ikon { transform: rotate(180deg); }
.slider-nav.next { right: 22px; }
@media (max-width: 980px) { .slider-nav { display: none; } }

.slider-dots { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5; display: flex; justify-content: center; gap: 9px; }
.slider-dots button { padding: 8px 4px; }
.slider-dots i {
    display: block; width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255, 255, 255, .36); transition: all .3s var(--ease);
}
.slider-dots button:hover i { background: rgba(255, 255, 255, .62); }
.slider-dots button.active i { width: 40px; border-radius: 5px; background: #fff; }

.slider-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 3px; background: rgba(255, 255, 255, .12); }
.slider-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-400), #fff); }

@media (max-width: 640px) {
    .slider-track { height: auto; min-height: 420px; }
    .slide { position: absolute; }
    .slide-inner { padding-block: 54px 66px; }
    .slider-dots { bottom: 20px; }
}
/* ---------- 5. Ortak rozet / etiket ogeleri ---------- */
.kicker {
    display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 9px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
    font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--brand-600); box-shadow: var(--sh-1);
}
.kicker::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal-500) 22%, transparent);
    animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.28); opacity: .6; } }

.search-kbd { display: none; }
@media (min-width: 900px) {
    .search-kbd {
        display: inline-block; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 6px;
        font-size: .7rem; color: var(--ink-mute); background: var(--surface-3); font-weight: 700;
    }
}

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; align-items: center; }
.chip-row > small { color: var(--ink-mute); font-size: .82rem; font-weight: 600; margin-right: 2px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line); font-size: .83rem; font-weight: 600;
    color: var(--ink-soft); transition: all .18s var(--ease);
}
.chip:hover { color: var(--brand-600); border-color: var(--brand-400); transform: translateY(-2px); box-shadow: var(--sh-1); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--brand-500)); }

/* ---------- 5b. Hızlı erişim bandı ---------- */
.quick-bar-wrap { background: var(--surface); border-bottom: 1px solid var(--line); }
.quick-bar { display: grid; grid-template-columns: minmax(270px, 355px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; }
@media (max-width: 1080px) { .quick-bar { grid-template-columns: 1fr; gap: 14px; } }

.quick-search { display: flex; align-items: center; gap: 11px; padding: 7px 7px 7px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.quick-search:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 14%, transparent); }
.quick-search .ikon { color: var(--ink-mute); }
.quick-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: .88rem; text-overflow: ellipsis; }
.quick-search button { flex-shrink: 0; padding: 10px 18px; border-radius: var(--r-full); font-size: .86rem; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--brand-600), var(--brand-800)); }

.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.quick-links a { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); transition: all .2s var(--ease); }
.quick-links a:hover { border-color: var(--brand-400); background: var(--surface); transform: translateY(-2px); box-shadow: var(--sh-1); color: var(--brand-600); }
.quick-links .ikon { color: var(--brand-500); }
.quick-links span { font-size: .85rem; font-weight: 700; }

/* ---------- 5c. Öğrenme alanı kartları (Uzaktan / Yüz yüze) ---------- */
.grup-baslik {
    display: flex; align-items: center; gap: 14px; margin: 46px 0 24px;
    font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); letter-spacing: -.01em;
}
.grup-baslik:first-of-type { margin-top: 0; }
.gb-isaret {
    position: relative; flex: none; width: 34px; height: 34px; border-radius: 11px;
    background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff));
    box-shadow: 0 10px 22px -10px var(--c);
}
.gb-isaret::after {
    content: ""; position: absolute; inset: 10px; border-radius: 4px;
    background: rgba(255, 255, 255, .85);
}
.grup-baslik em {
    font-style: normal; padding: 5px 13px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c) 12%, var(--surface));
    color: color-mix(in srgb, var(--c) 78%, var(--ink));
    font-size: .74rem; font-weight: 800; letter-spacing: .04em;
}
/* Başlığın sağına ince ayraç */
.grup-baslik::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), transparent);
}

.alan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .alan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .alan-grid { grid-template-columns: 1fr; } }

/* ---------- Kategori sayfasındaki "diğer alanlar" kartları ---------- */
.alan-grid.mini { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.alan-karti.mini {
    display: flex; flex-direction: column; gap: 12px; padding: 20px;
    color: inherit; text-decoration: none;
}
.alan-karti.mini > * { position: relative; z-index: 1; }
.alan-ikon {
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px;
    background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c);
    border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
    transition: transform .25s var(--ease);
}
.alan-karti.mini:hover .alan-ikon { transform: rotate(-6deg) scale(1.06); }
.alan-karti.mini strong { font-size: 1rem; line-height: 1.35; font-weight: 800; }
.alan-incele {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 4px;
    font-size: .84rem; font-weight: 800; color: var(--c);
}
.alan-incele .ikon { transition: transform .2s var(--ease); }
.alan-karti.mini:hover .alan-incele .ikon { transform: translateX(4px); }
/* Diğer kartlarda olduğu gibi sağ altta soluk üniversite mührü */
.alan-karti.mini::before {
    content: ""; position: absolute; right: 8px; bottom: 8px; width: 128px; height: 128px; z-index: 0;
    background: url("../images/dairesel-siyah.png") no-repeat center / 620px auto;
    mix-blend-mode: multiply; opacity: .1; pointer-events: none;
}

.alan-karti {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--sh-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.alan-karti:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--c) 45%, var(--line));
    box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--c) 75%, transparent), var(--sh-2);
}

/* ---------- Renkli başlık alanı ---------- */
.ak-ust {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 22px 22px; min-height: 108px;
    background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 62%, #0b1030) 100%);
}
/* Noktalı doku */
.ak-desen {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 72%);
    mask-image: linear-gradient(120deg, #000 10%, transparent 72%);
    opacity: .55;
}
/* Üzerine gelince kayan parıltı */
.ak-parilti {
    position: absolute; top: -60%; left: -35%; width: 55%; height: 220%; transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: left .6s var(--ease);
}
.alan-karti:hover .ak-parilti { left: 115%; }

.ak-ikon {
    position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 18px; color: #fff;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .3s var(--ease);
}
.alan-karti:hover .ak-ikon { transform: rotate(-6deg) scale(1.06); }

.ak-sayi {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 14px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .94); color: color-mix(in srgb, var(--c) 80%, var(--ink));
    font-size: .66rem; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5);
}
.ak-sayi b { font-size: 1.02rem; font-weight: 800; line-height: 1; }

/* ---------- Gövde ---------- */
.ak-govde { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
/* Kartın beyaz alanında soluk üniversite mührü */
.ak-govde::before {
    content: ""; position: absolute; right: 12px; bottom: 14px; width: 132px; height: 132px; z-index: 0;
    background: url("../images/dairesel-siyah.png") no-repeat center / 640px auto;
    mix-blend-mode: multiply; opacity: .1; pointer-events: none;
}
.ak-govde > * { position: relative; z-index: 1; }
.ak-govde strong { font-size: 1.06rem; line-height: 1.35; font-weight: 800; color: var(--ink); }
.ak-govde small {
    font-size: .86rem; line-height: 1.6; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ak-incele {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px;
    font-size: .87rem; font-weight: 800; color: var(--c);
}
.ak-incele .ikon { transition: transform .22s var(--ease); }
.alan-karti:hover .ak-incele .ikon { transform: translateX(5px); }
/* Gövdenin altında renk şeridi, hover'da genişler */
.ak-govde::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--c); transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease);
}
.alan-karti:hover .ak-govde::after { transform: scaleX(1); }

/* ---------- 6. İstatistik şeridi ---------- */
.stat-strip { position: relative; z-index: 2; }
.stat-inner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px;
    background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-2);
}
.stat-cell { background: var(--surface); padding: 26px 24px; text-align: center; transition: background .2s var(--ease); }
.stat-cell:hover { background: var(--surface-2); }
.stat-cell b { display: block; font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--brand-600), var(--teal-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-cell span { font-size: .86rem; color: var(--ink-mute); font-weight: 600; }

/* ---------- 7. Bölüm iskeleti ---------- */
.section { padding: clamp(52px, 6vw, 92px) 0; }
/* Bölümler birbirinden görsel olarak ayrılsın: tonlu bölümler çizgiyle sınırlanır. */
.section.tinted {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.section-head .st { max-width: 72ch; }
.section-head h2 { margin: 14px 0 10px; text-wrap: balance; }
/* Satırlar eşit uzunlukta dağılsın diye dengeli sarma */
.section-head p { font-size: 1.02rem; line-height: 1.7; text-wrap: balance; }
.eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-600); }
.ghost-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-full);
    border: 1px solid var(--line-strong); font-weight: 700; font-size: .9rem; color: var(--ink);
    background: var(--surface); transition: all .2s var(--ease); white-space: nowrap;
}
.ghost-link:hover { border-color: var(--brand-500); color: var(--brand-600); transform: translateY(-2px); box-shadow: var(--sh-1); }
.ghost-link .ikon { transition: transform .2s var(--ease); }
.ghost-link:hover .ikon { transform: translateX(4px); }

/* ---------- 8. Kategoriler ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; }
.category-card {
    position: relative; padding: 26px 24px 24px; border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.category-card::before {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease);
    background: linear-gradient(150deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.category-card:hover::before { opacity: 1; }
.category-card > * { position: relative; z-index: 1; }
.cat-ico {
    width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.3rem;
    background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); margin-bottom: 16px;
    transition: transform .25s var(--ease);
}
.category-card:hover .cat-ico { transform: scale(1.08) rotate(-5deg); }
.category-card h3 { font-size: 1.08rem; margin-bottom: 7px; }
.category-card p { font-size: .89rem; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cat-foot small { font-size: .8rem; font-weight: 700; color: var(--ink-mute); }
.cat-foot em { font-style: normal; color: var(--c); font-weight: 800; transition: transform .2s var(--ease); display: inline-block; }
.category-card:hover .cat-foot em { transform: translateX(4px); }

/* ---------- 9. Ders kartları ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 22px; }
.course-card {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.course-cover {
    position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
    background: linear-gradient(142deg, color-mix(in srgb, var(--course-color, #2b40a8) 72%, #0a1030) 0%, #0a1030 100%);
    color: #fff;
}
.course-cover::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 78%);
    mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-mark { color: rgba(255, 255, 255, .3); transition: transform .35s var(--ease), color .35s var(--ease); }
.cover-mark .ikon { stroke-width: 1.1; }
.course-card:hover .cover-mark { transform: scale(1.07); color: rgba(255, 255, 255, .44); }
.course-cover .featured {
    position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: var(--r-full);
    background: var(--accent-400); color: #331f01; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.course-cover .featured.beklemede { background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(4px); }
.course-cover small {
    position: absolute; bottom: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: var(--r-full);
    background: rgba(9, 12, 32, .55); backdrop-filter: blur(6px); color: #fff; font-size: .74rem; font-weight: 700;
}
.course-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 20px; gap: 11px; }
/* Kartın beyaz alanında soluk üniversite mührü */
.course-body::before {
    content: ""; position: absolute; right: 12px; bottom: 12px; width: 152px; height: 152px; z-index: 0;
    background: url("../images/dairesel-siyah.png") no-repeat center / 740px auto;
    mix-blend-mode: multiply; opacity: .1; pointer-events: none;
}
.course-body > * { position: relative; z-index: 1; }
.course-meta { display: flex; align-items: center; gap: 7px; font-size: .77rem; font-weight: 700; color: var(--ink-mute); letter-spacing: .01em; }
.course-body h3 { font-size: 1.06rem; line-height: 1.32; }
.course-body h3 a { transition: color .18s var(--ease); }
.course-body h3 a:hover { color: var(--brand-600); }
.course-body > p { font-size: .87rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.instructor { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.instructor > span {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--brand-100); color: var(--brand-600); font-weight: 800; font-size: .85rem; text-transform: uppercase;
}
.instructor div { min-width: 0; }
.instructor small { display: block; font-size: .7rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.instructor strong { display: block; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-progress > div { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 700; margin-bottom: 6px; }
.learning-progress > div span { color: var(--ink-mute); }
.learning-progress > div b { color: var(--brand-600); }
.learning-progress i { display: block; height: 7px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.learning-progress i em { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--brand-500), var(--teal-500)); transition: width .8s var(--ease); }
.course-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px;
    border-radius: var(--r-sm); background: var(--surface-3); font-size: .87rem; font-weight: 700; color: var(--ink);
    transition: all .2s var(--ease);
}
.course-link:hover { background: var(--brand-600); color: #fff; }
.course-link .ikon { transition: transform .2s var(--ease); }
.course-link:hover .ikon { transform: translateX(4px); }

/* ---------- 10. Adımlar / nasıl çalışır ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; counter-reset: adim; position: relative; }
.step {
    position: relative; padding: 30px 26px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); counter-increment: adim; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.step::before {
    content: "0" counter(adim); position: absolute; top: 18px; right: 22px;
    font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; color: var(--surface-3); line-height: 1;
}
.step-ico {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.35rem;
    background: linear-gradient(140deg, var(--brand-600), var(--brand-800)); color: #fff; margin-bottom: 18px;
    box-shadow: var(--sh-brand);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .9rem; }

/* ---------- 9b. Kategori sayfası: ders kartları ---------- */
.katalog-baslik { text-align: center; margin-bottom: 28px; }
.katalog-baslik h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); color: var(--brand-600); }
.katalog-baslik p { margin: 10px auto 0; max-width: 62ch; font-size: .96rem; }
.katalog-cizgi { display: block; width: 54px; height: 4px; border-radius: 3px; margin: 18px auto 0; background: linear-gradient(90deg, var(--brand-500), var(--teal-500)); }

.katalog-arama {
    display: flex; align-items: center; gap: 12px; width: min(100%, 620px); margin: 0 auto 30px;
    padding: 13px 20px; border-radius: var(--r-full); background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--sh-1); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.katalog-arama:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 14%, transparent); }
.katalog-arama .ikon { color: var(--ink-mute); }
.katalog-arama input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: .92rem; }

.ders-karti-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ders-karti {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
    padding: 0 22px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
    box-shadow: var(--sh-1); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

/* Ders kapak görseli (OIS DersResimleri ile aynı kaynak) */
.dk-kapak {
    position: relative; display: block; margin: 0 -22px 4px; aspect-ratio: 16 / 10; overflow: hidden;
    background: linear-gradient(140deg, color-mix(in srgb, var(--c) 22%, var(--surface-3)), var(--surface-3));
}
.dk-kapak img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ders-karti:hover .dk-kapak img { transform: scale(1.06); }
.dk-kapak::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(16, 26, 77, .5) 0%, rgba(16, 26, 77, 0) 55%);
}
.dk-kapak-yedek {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; padding: 16px; text-align: center; color: var(--c); overflow: hidden;
    background:
        radial-gradient(120% 95% at 88% -12%, color-mix(in srgb, var(--c) 26%, transparent), transparent 56%),
        radial-gradient(110% 100% at -5% 112%, color-mix(in srgb, var(--c) 18%, transparent), transparent 58%),
        linear-gradient(140deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface-3));
}
/* Zemindeki dekoratif halkalar */
.dky-halka { position: absolute; inset: 0; pointer-events: none; }
.dky-halka::before, .dky-halka::after { content: ""; position: absolute; border-radius: 50%; }
.dky-halka::before { width: 180px; height: 180px; right: -58px; top: -66px; border: 1.5px solid color-mix(in srgb, var(--c) 26%, transparent); }
.dky-halka::after  { width: 130px; height: 130px; left: -46px; bottom: -54px; border: 1.5px dashed color-mix(in srgb, var(--c) 32%, transparent); }
/* Kategori ikonu yumuşak bir rozet içinde */
.dky-ikon {
    position: relative; display: grid; place-content: center; width: 54px; height: 54px; border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 20%, transparent);
    color: color-mix(in srgb, var(--c) 80%, var(--ink));
    transition: transform .25s var(--ease);
}
.ders-karti:hover .dky-ikon { transform: translateY(-3px); }
.dk-kapak-yedek b {
    position: relative; font-size: .84rem; font-weight: 700; line-height: 1.35; color: color-mix(in srgb, var(--c) 78%, var(--ink));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* "Ders içeriği hazırlanıyor" — nabız noktalı hap rozet */
.dky-not {
    position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
    padding: 5px 12px; border-radius: 999px;
    font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: color-mix(in srgb, var(--c) 74%, var(--ink));
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
    backdrop-filter: blur(4px);
}
.dky-not i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--c);
    animation: dkyNabiz 1.6s ease-in-out infinite;
}
@keyframes dkyNabiz {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) { .dky-not i { animation: none; } }
.dk-kapak .dk-rozetler { position: absolute; right: 10px; top: 10px; z-index: 2; }
.dk-kapak .dk-rozetler span { background: rgba(255, 255, 255, .94); border-color: transparent; color: var(--ink);
    box-shadow: 0 2px 8px rgba(16, 26, 77, .18); }
.ders-karti:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: color-mix(in srgb, var(--c) 38%, var(--line)); }
.ders-karti > * { position: relative; z-index: 1; }
/* Kartın beyaz alanında soluk üniversite mührü */
.ders-karti::before {
    content: ""; position: absolute; right: 8px; bottom: 10px; width: 150px; height: 150px; z-index: 0;
    background: url("../images/dairesel-siyah.png") no-repeat center / 730px auto;
    mix-blend-mode: multiply; opacity: .1; pointer-events: none;
}
.dk-cizgi { position: absolute; top: 0; left: 22px; width: 46px; height: 4px; border-radius: 0 0 3px 3px; background: var(--c); z-index: 2; }

.dk-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dk-ikon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c); }
.dk-rozetler { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dk-rozetler span { font-size: .71rem; font-weight: 800; padding: 4px 11px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: color-mix(in srgb, var(--c) 78%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); white-space: nowrap; }
.dk-kategori {
    align-self: flex-start; font-size: .73rem; font-weight: 700; padding: 5px 12px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: color-mix(in srgb, var(--c) 82%, var(--ink));
    transition: background .2s var(--ease);
}
.dk-kategori:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
/* Kategori + eğitim türü etiketleri aynı satırda, karşılıklı durur. */
.dk-etiketler { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dk-etiketler .dk-kategori { align-self: auto; }
.dk-tur {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: .69rem; font-weight: 800; letter-spacing: .02em; padding: 5px 11px 5px 9px;
    border-radius: var(--r-full); border: 1px solid transparent;
}
.dk-tur svg { width: 14px; height: 14px; flex: none; }
.dk-tur.cevrimici {
    background: color-mix(in srgb, #0e9f6e 12%, var(--surface));
    border-color: color-mix(in srgb, #0e9f6e 30%, transparent);
    color: color-mix(in srgb, #0b7a54 88%, var(--ink));
}
.dk-tur.yuzyuze {
    background: color-mix(in srgb, #d97706 13%, var(--surface));
    border-color: color-mix(in srgb, #d97706 32%, transparent);
    color: color-mix(in srgb, #9a5502 88%, var(--ink));
}

.dk-ayrac { display: block; height: 1px; margin-top: auto; background: var(--line); }
.ders-karti h3 { font-size: 1.03rem; line-height: 1.38; }
.ders-karti h3 a { transition: color .18s var(--ease); }
.ders-karti h3 a:hover { color: var(--c); }
.ders-karti > p { font-size: .87rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dk-egitmen { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-soft); font-weight: 600; }
.dk-egitmen .ikon { color: var(--ink-mute); }
.dk-durum { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 13px;
    border-radius: var(--r-full); font-size: .76rem; font-weight: 700; background: var(--surface-3); color: var(--ink-mute); }
.dk-durum i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dk-durum.hazir { background: var(--ok-bg); color: var(--ok-ink); }
.dk-durum.bekliyor { background: var(--warn-bg); color: var(--warn-ink); }
.dk-buton { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    align-self: flex-start; padding: 11px 22px; border-radius: var(--r-full); font-size: .87rem; font-weight: 700; color: #fff;
    background: linear-gradient(120deg, var(--brand-600), var(--brand-800)); transition: transform .2s var(--ease); }
.dk-buton:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); }
.dk-buton .ikon { transition: transform .2s var(--ease); }
.dk-buton:hover .ikon { transform: translateX(3px); }
.dk-buton.pasif {
    background: none; color: color-mix(in srgb, var(--c) 78%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--c) 32%, var(--line)); cursor: default;
}
.dk-buton.pasif:hover { transform: none; box-shadow: none; }
.ders-karti.beklemede .dk-ikon { opacity: .6; }

/* ---------- 9c. Ders listesi (alternatif dizilim) ---------- */
.liste-blok { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.liste-baslik { padding: 24px 26px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.liste-baslik h2 { display: flex; align-items: center; gap: 11px; font-size: 1.28rem; }
.liste-baslik h2 b { font-size: .8rem; font-weight: 800; padding: 3px 11px; border-radius: var(--r-full); background: var(--brand-100); color: var(--brand-600); }
.liste-baslik p { font-size: .89rem; margin-top: 6px; }

.ders-listesi { display: grid; }
.ders-satiri {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center;
    padding: 18px 26px; border-bottom: 1px solid var(--line); transition: background .2s var(--ease);
}
.ders-satiri:last-child { border-bottom: 0; }
.ders-satiri:hover { background: var(--surface-2); }
.ds-ikon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
}
.ds-govde { min-width: 0; }
.ds-govde strong { display: block; font-size: 1rem; line-height: 1.35; }
.ds-etiketler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.ds-etiketler span {
    font-size: .74rem; font-weight: 700; color: var(--ink-mute);
    background: var(--surface-3); padding: 3px 10px; border-radius: var(--r-full);
}
.ds-egitmen { text-align: right; min-width: 0; }
.ds-egitmen small { display: block; font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ink-mute); }
.ds-egitmen b { font-size: .85rem; font-weight: 700; }
.ds-buton {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-full);
    background: linear-gradient(120deg, var(--brand-600), var(--brand-800)); color: #fff;
    font-size: .85rem; font-weight: 700; white-space: nowrap; transition: transform .2s var(--ease);
}
.ds-buton:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); }
.ds-buton .ikon { transition: transform .2s var(--ease); }
.ds-buton:hover .ikon { transform: translateX(3px); }
.ds-rozet {
    padding: 9px 16px; border-radius: var(--r-full); border: 1px dashed var(--line-strong);
    font-size: .78rem; font-weight: 700; color: var(--ink-mute); white-space: nowrap;
}
.ders-satiri.beklemede .ds-ikon { opacity: .5; }
.ders-satiri.beklemede .ds-govde strong { color: var(--ink-soft); }
@media (max-width: 860px) {
    .ders-satiri { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
    .ds-egitmen { grid-column: 2; text-align: left; }
    .ds-buton, .ds-rozet { grid-column: 2; justify-self: start; }
}

/* ---------- 10b. Öğrenme yolculuğu (sekmeli şerit) ---------- */
.flow-intro {
    position: relative; overflow: hidden; padding: 30px 34px; margin-bottom: 24px; border-radius: var(--r-lg);
    background: linear-gradient(120deg, var(--brand-100), color-mix(in srgb, var(--teal-100) 60%, var(--surface)));
    border: 1px solid var(--line);
}
.flow-intro::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 4px;
    background: linear-gradient(90deg, var(--brand-600), var(--teal-500), var(--accent-400));
}
.flow-intro h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); margin-bottom: 10px; max-width: 46ch; }
.flow-intro p { font-size: .95rem; max-width: 88ch; color: var(--ink-soft); }

/* ---------- Süreç seçimi ---------- */
.yol-secim {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 22px;
}
.ys-dugme {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; cursor: pointer;
    padding: 16px 18px; border-radius: var(--r-lg); text-align: left;
    background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--sh-1);
    transition: all .26s var(--ease);
}
.ys-dugme:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.ys-dugme.aktif {
    border-color: transparent; color: #fff;
    background: linear-gradient(130deg, var(--c) 0%, color-mix(in srgb, var(--c) 62%, #0b1030) 100%);
    box-shadow: 0 18px 34px -20px var(--c);
}
/* Etkin sekmenin altındaki ok işareti */
.ys-dugme.aktif::after {
    content: ""; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 11px;
    transform: translateX(-50%);
    background: var(--surface);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ysd-ikon {
    flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c);
    transition: all .26s var(--ease);
}
.ys-dugme.aktif .ysd-ikon {
    background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .32); color: #fff;
}
.ysd-metin { flex: 1; min-width: 0; }
.ysd-metin small {
    display: block; margin-bottom: 3px; font-size: .66rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}
.ys-dugme.aktif .ysd-metin small { color: rgba(255, 255, 255, .72); }
/* Koyu zeminde başlık açık renk olmalı */
.ysd-metin strong { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.ys-dugme.aktif .ysd-metin strong { color: #fff; }
.ysd-adet {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c);
    font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ys-dugme.aktif .ysd-adet { background: rgba(255, 255, 255, .92); color: color-mix(in srgb, var(--c) 78%, var(--ink)); }

/* ---------- Yolculuk paneli ---------- */
.yol-panel {
    container: yol / inline-size;
    padding: 26px 22px 26px; border-radius: var(--r-lg);
    /* Kartlar beyaz olduğu için panel bir ton kırık zemin kullanır. */
    background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--sh-1);
    animation: yolGir .35s var(--ease) both;
}
.yol-panel[hidden] { display: none; }
@keyframes yolGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.yol-ozet {
    display: flex; align-items: flex-start; gap: 11px; margin-bottom: 24px; padding: 14px 18px;
    border-radius: var(--r-md); background: color-mix(in srgb, var(--c) 7%, var(--surface));
    border-left: 3px solid var(--c);
    font-size: .92rem; line-height: 1.65; color: var(--ink-soft);
}
.yol-ozet .ikon { flex: none; margin-top: 2px; color: var(--c); }

/* ---------- Adım kartları: rozet vitrini ile aynı dil (yuvarlak madalya + ortalanmış metin) ----------
   Sütun sayısı adım sayısına eşittir; akış tek satırda okunur. Panel genişliği takvim
   yanındayken daraldığı için kademeler kap sorgusuyla ölçülür. */
.yol-ray {
    list-style: none; display: grid; gap: 14px;
    grid-template-columns: repeat(var(--adet, 4), minmax(0, 1fr));
}
.yol-ray li {
    --kc: var(--brand-600);
    position: relative; overflow: hidden; padding: 24px 18px 22px; border-radius: var(--r-lg);
    text-align: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Ara adımlar üç renkte döner; bitiş adımı her zaman turkuaz kalsın diye
   turkuaz döngüye alınmadı — yan yana iki turkuaz kart oluşmaz. */
.yol-ray li:nth-child(3n + 1) { --kc: var(--brand-600); }
.yol-ray li:nth-child(3n + 2) { --kc: var(--accent-500); }
.yol-ray li:nth-child(3n + 3) { --kc: var(--rose-500); }
.yol-ray li.son { --kc: var(--teal-600); }
.yol-ray li:hover {
    transform: translateY(-6px); border-color: color-mix(in srgb, var(--kc) 45%, var(--line));
    box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--kc) 75%, transparent), var(--sh-2);
}

.yr-nokta {
    display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
    color: #fff; background: linear-gradient(145deg, var(--kc), color-mix(in srgb, var(--kc) 58%, #0a1030));
    box-shadow: 0 12px 26px -12px var(--kc), 0 0 0 6px color-mix(in srgb, var(--kc) 10%, transparent);
    transition: transform .28s var(--ease);
}
.yr-nokta b { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.yol-ray li:hover .yr-nokta { transform: rotate(-8deg) scale(1.07); }

/* Başlıklar dar kartlarda üç satıra taştığı için 800 ağırlıkta bloklaşıyordu:
   bir tık küçük ve hafif, satır sonları dengelenmiş. */
.yr-kutu strong {
    display: block; font-size: .88rem; font-weight: 700; line-height: 1.35;
    letter-spacing: -.006em; color: var(--ink); text-wrap: balance;
}
.yr-kutu p { margin-top: 7px; font-size: .8rem; line-height: 1.6; color: var(--ink-soft);
             text-wrap: pretty; overflow-wrap: break-word; }

/* Beş ve üzeri adımda kart ~150 px'e iniyor: yan boşluk, madalya ve punto birlikte
   kısılır. Başlık .8rem'de "değerlendirmeye" gibi uzun sözcükler tek satıra sığar,
   açıklama .75rem'de uzun adres sözcük ortasında değil nokta sınırında bölünür. */
.yol-ray li:first-child:nth-last-child(n + 5),
.yol-ray li:first-child:nth-last-child(n + 5) ~ li { padding-inline: 12px; }
.yol-ray li:first-child:nth-last-child(n + 5) .yr-nokta,
.yol-ray li:first-child:nth-last-child(n + 5) ~ li .yr-nokta { width: 48px; height: 48px; }
.yol-ray li:first-child:nth-last-child(n + 5) .yr-kutu strong,
.yol-ray li:first-child:nth-last-child(n + 5) ~ li .yr-kutu strong { font-size: .8rem; line-height: 1.32; }
.yol-ray li:first-child:nth-last-child(n + 5) .yr-kutu p,
.yol-ray li:first-child:nth-last-child(n + 5) ~ li .yr-kutu p { font-size: .75rem; line-height: 1.55; }
/* Başlıklar farklı sayıda satıra taştığı için açıklamalar kart kart kayıyordu.
   Kartlar alt ızgaraya bağlanınca madalya / başlık / açıklama üç ortak bant olur;
   bir bandın yüksekliğini o satırdaki en uzun içerik belirler, hepsi aynı hizada başlar.
   Bantlar arasındaki boşluk ızgara aralığından geldiği için iç kenar boşlukları sıfırlanır. */
@supports (grid-template-rows: subgrid) {
    .yol-ray { grid-template-rows: auto auto auto; }
    /* Tek sütun minmax(0,1fr) olmazsa uzun adresler kartı taşırır (auto iz min-content'e büyür). */
    .yol-ray li { display: grid; grid-row: span 3; grid-template-rows: subgrid;
                  grid-template-columns: minmax(0, 1fr); }
    .yr-kutu   { display: grid; grid-row: span 2; grid-template-rows: subgrid;
                 grid-template-columns: minmax(0, 1fr); min-width: 0; }
    .yr-nokta  { margin-bottom: 0; }
    .yr-kutu p { margin-top: 0; }
}

/* Dar panelde tek satır sığmaz; ikiliye, en sonunda tek sütuna inilir. */
@container yol (max-width: 620px) {
    .yol-ray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yol-ray > li { grid-column: auto; }
}
@container yol (max-width: 380px) {
    .yol-ray { grid-template-columns: 1fr; }
}
/* Kap sorgusunu desteklemeyen tarayıcılar için görünüm kapısı üzerinden yaklaşık kademeler */
@supports not (container-type: inline-size) {
    @media (max-width: 1080px) {
        .yol-ray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .yol-ray > li { grid-column: auto; }
    }
    @media (max-width: 520px) { .yol-ray { grid-template-columns: 1fr; } }
}
@media (max-width: 620px) {
    .yol-panel { padding: 20px 16px 22px; }
    .yol-ray li { padding: 20px 14px 18px; }
}

/* ---------- Renkli başlık ---------- */
.flow-head {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 24px 26px;
    background: linear-gradient(130deg, var(--c) 0%, color-mix(in srgb, var(--c) 66%, #0b1030) 100%);
    color: #fff;
}
.flow-desen {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(115deg, #000 5%, transparent 68%);
    mask-image: linear-gradient(115deg, #000 5%, transparent 68%);
    opacity: .5;
}
.flow-ico {
    position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 17px;
    display: grid; place-items: center; color: #fff;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .3s var(--ease);
}
.flow-card:hover .flow-ico { transform: rotate(-6deg) scale(1.05); }
.flow-baslik { position: relative; z-index: 1; flex: 1; min-width: 0; }
.flow-head small {
    display: block; margin-bottom: 4px; font-size: .69rem; font-weight: 800;
    letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
/* Koyu zeminde başlık açık renk olmalı */
.flow-head h3 { font-size: 1.24rem; line-height: 1.25; color: #fff; }
.flow-adet {
    position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 14px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .94); color: color-mix(in srgb, var(--c) 80%, var(--ink));
    font-size: .64rem; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5);
}
.flow-adet b { font-size: 1rem; font-weight: 800; line-height: 1; }

.flow-lead {
    padding: 20px 26px 0; font-size: .9rem; line-height: 1.65; color: var(--ink-soft);
}

/* ---------- Adım zaman çizelgesi ---------- */
.flow-steps { padding: 22px 26px 26px; display: grid; gap: 0; counter-reset: adim; }
.flow-steps li {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px;
    padding: 10px 12px 22px 0; border-radius: var(--r-sm);
    transition: background .22s var(--ease);
}
.flow-steps li:last-child { padding-bottom: 4px; }
.flow-steps li:hover { background: color-mix(in srgb, var(--c) 5%, transparent); }
/* Adımları birbirine bağlayan çizgi */
.flow-steps li::before {
    content: ""; position: absolute; left: 19px; top: 50px; bottom: -2px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 48%, transparent), color-mix(in srgb, var(--c) 10%, transparent));
}
.flow-steps li:last-child::before { display: none; }

.fs-no {
    position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 60%, #0a1030));
    font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 60%, transparent),
                0 0 0 4px color-mix(in srgb, var(--c) 10%, transparent);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.flow-steps li:hover .fs-no {
    transform: scale(1.08);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--c) 70%, transparent),
                0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent);
}
/* Son adım bayrakla biter */
.flow-steps li.son .fs-no {
    background: linear-gradient(145deg, var(--teal-600), var(--teal-500));
    box-shadow: 0 6px 16px -6px var(--teal-600), 0 0 0 4px color-mix(in srgb, var(--teal-500) 16%, transparent);
}

.flow-steps strong { display: block; font-size: 1rem; line-height: 1.4; margin-top: 7px; color: var(--ink); }
.flow-steps p { font-size: .88rem; line-height: 1.65; margin-top: 6px; color: var(--ink-soft); }

/* ---------- 10c. Süreç altı SSS bandı ---------- */
.sss-bandi {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center;
    margin-top: 24px; padding: 20px 24px; border-radius: var(--r-lg); border: 1px solid var(--line);
    background: linear-gradient(105deg, color-mix(in srgb, var(--brand-100) 65%, var(--surface)) 0%, var(--surface) 72%);
}
.sb-ikon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); color: var(--brand-600); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.sss-bandi p { font-size: .95rem; color: var(--ink-soft); }
.sss-bandi p strong { color: var(--ink); font-weight: 700; }
.sb-buton {
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: var(--r-full);
    background: linear-gradient(120deg, var(--brand-600), var(--brand-800)); color: #fff;
    font-size: .9rem; font-weight: 700; white-space: nowrap; box-shadow: var(--sh-brand);
    transition: transform .2s var(--ease);
}
.sb-buton:hover { transform: translateY(-2px); }
.sb-buton .ikon { transition: transform .2s var(--ease); }
.sb-buton:hover .ikon { transform: translateX(3px); }
@media (max-width: 760px) {
    .sss-bandi { grid-template-columns: auto minmax(0, 1fr); row-gap: 14px; }
    .sb-buton { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- 11. Duyurular ---------- */
.announce-list { display: grid; gap: 14px; }
.announce {
    display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 20px; align-items: center;
    padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    transition: all .22s var(--ease);
}
.announce:hover { border-color: var(--brand-400); transform: translateX(5px); box-shadow: var(--sh-1); }
.ann-date { text-align: center; padding: 10px 4px; border-radius: var(--r-sm); background: var(--surface-3); }
.ann-date b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--brand-600); }
.ann-date small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.ann-body h3 { font-size: 1.02rem; margin-bottom: 5px; }
.ann-body p { font-size: .88rem; }
.tag {
    display: inline-block; padding: 4px 11px; border-radius: var(--r-full); font-size: .7rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; background: var(--accent-100); color: var(--accent-600);
    margin-bottom: 7px;
}
.ann-go { color: var(--ink-mute); transition: transform .2s var(--ease), color .2s var(--ease); }
.announce:hover .ann-go { transform: translateX(4px); color: var(--brand-600); }
@media (max-width: 720px) {
    .announce { grid-template-columns: 64px minmax(0, 1fr); }
    .ann-go { display: none; }
}

/* ---------- 11a. Kayan etkinlik şeridi ---------- */
.etkinlik-serit { padding: 34px 0 6px; background: var(--bg-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.es-baslik { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.es-baslik h2 { display: flex; align-items: center; gap: 11px; font-size: 1.22rem; }
.es-baslik h2 .ikon { color: var(--brand-500); }
.es-kontrol { display: flex; align-items: center; gap: 10px; }
.es-ipucu { font-size: .78rem; font-weight: 600; color: var(--ink-mute); }
@media (max-width: 640px) { .es-ipucu { display: none; } }

/* Sağa/sola alma düğmeleri */
.es-ok {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
    box-shadow: var(--sh-1); transition: all .2s var(--ease);
}
.es-ok:hover { background: var(--brand-600); border-color: transparent; color: #fff; transform: translateY(-2px); }
.es-ok.geri .ikon { transform: rotate(180deg); }
.es-ok[disabled] { opacity: .4; cursor: default; box-shadow: none; }
.es-ok[disabled]:hover { background: var(--surface); color: var(--ink-soft); border-color: var(--line-strong); transform: none; }

.es-pist {
    position: relative; padding: 4px 0 28px;
    overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.es-pist::-webkit-scrollbar { display: none; }
.es-ray { display: flex; gap: 16px; width: max-content; padding-inline: clamp(20px, 6vw, 110px); }
.es-kart { scroll-snap-align: start; }

.es-kart {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 15px; align-items: center;
    flex: 0 0 420px; padding: 17px 19px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.es-kart:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.esk-tarih { width: 54px; flex-shrink: 0; text-align: center; padding: 9px 4px; border-radius: var(--r-sm);
    background: linear-gradient(150deg, var(--brand-600), var(--brand-800)); color: #fff; }
.esk-tarih b { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1; }
.esk-tarih small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .88; }
.esk-govde { min-width: 0; }
.esk-tur { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-600); margin-bottom: 3px; }
.esk-govde strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .93rem; line-height: 1.35; }
.esk-govde small { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .78rem; color: var(--ink-mute);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.esk-kalan { display: inline-block; margin-top: 7px; padding: 2px 10px; border-radius: var(--r-full);
    background: var(--teal-100); color: var(--teal-600); font-size: .7rem; font-weight: 800; }
.esk-git { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-3); color: var(--ink-mute); transition: all .2s var(--ease); }
.esk-git:hover { background: var(--brand-600); color: #fff; }

/* ---------- 11a2. Duyuru kartları ---------- */
.duyuru-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.duyuru-karti {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* Diğer kartlarda olduğu gibi soluk üniversite mührü */
.duyuru-karti::before {
    content: ""; position: absolute; right: 8px; bottom: 8px; width: 138px; height: 138px; z-index: 0;
    background: url("../images/dairesel-siyah.png") no-repeat center / 670px auto;
    mix-blend-mode: multiply; opacity: .09; pointer-events: none;
}
.duyuru-karti > * { position: relative; z-index: 1; }
.duyuru-karti:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-400); }
.dyk-ust { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dyk-tarih { width: 56px; text-align: center; padding: 9px 4px; border-radius: var(--r-sm); background: var(--surface-3); }
.dyk-tarih b { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--brand-600); }
.dyk-tarih small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }
.duyuru-karti h3 { font-size: 1.06rem; line-height: 1.38; }
.duyuru-karti > p { font-size: .89rem; }
.dyk-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.dyk-alt small { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-mute); font-weight: 600; }
.dyk-alt a { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--brand-600); }
.dyk-alt a .ikon { transition: transform .2s var(--ease); }
.dyk-alt a:hover .ikon { transform: translateX(3px); }

/* ---------- 11a3. Duyuru ayrıntı sayfası ---------- */
.duyuru-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
@media (max-width: 940px) { .duyuru-duzen { grid-template-columns: 1fr; } }

/* Yazı kartı */
.duyuru-yazi {
    position: relative; overflow: hidden; padding: 34px 34px 30px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
@media (max-width: 640px) { .duyuru-yazi { padding: 26px 20px 24px; } }
.dz-serit { position: absolute; inset: 0 0 auto; height: 5px;
    background: linear-gradient(90deg, var(--brand-600), var(--teal-500) 55%, var(--accent-400)); }

/* Özet — sıcak tonlu vurgu kutusu */
.dz-ozet {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 20px 22px; margin-bottom: 26px; border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--brand-100), color-mix(in srgb, var(--teal-100) 55%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--brand-500) 16%, var(--line));
}
.dz-ozet-ikon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--surface); color: var(--brand-600); box-shadow: var(--sh-1); }
.dz-ozet p { font-size: 1.02rem; font-weight: 600; line-height: 1.62; color: var(--ink); }

.duyuru-icerik p { font-size: .98rem; line-height: 1.8; }
.duyuru-icerik p + p { margin-top: 16px; }
.duyuru-icerik p:first-child::first-letter { font-size: 1.1em; font-weight: 700; color: var(--brand-700); }

.dz-eylem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.dz-paylas { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-full);
    border: 1px solid var(--line-strong); background: var(--surface-2); font-size: .87rem; font-weight: 700;
    color: var(--ink-soft); transition: all .2s var(--ease); }
.dz-paylas:hover { border-color: var(--brand-400); color: var(--brand-600); background: var(--surface); }
.dz-paylas.kopyalandi { border-color: var(--ok-ink); color: var(--ok-ink); background: var(--ok-bg); }
.dz-okunma { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 16px;
    border-radius: var(--r-full); background: var(--surface-3); font-size: .84rem; font-weight: 600; color: var(--ink-mute); }
.dz-okunma b { font-weight: 800; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.dz-okunma .ikon { color: var(--ink-mute); }
@media (max-width: 560px) { .dz-okunma { margin-left: 0; } }

/* Önceki / sonraki */
.duyuru-gezinme { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
    margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.duyuru-gezinme a { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--surface-2); transition: all .22s var(--ease); }
.duyuru-gezinme a:hover { border-color: var(--brand-400); background: var(--surface); box-shadow: var(--sh-1); }
.duyuru-gezinme a.ileri { text-align: right; justify-content: flex-end; }
.duyuru-gezinme small { display: block; font-size: .71rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--brand-500); }
.duyuru-gezinme strong { display: block; margin-top: 4px; font-size: .89rem; line-height: 1.4; }
.dg-ok { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-3); color: var(--ink-mute); transition: all .2s var(--ease); }
.duyuru-gezinme a:hover .dg-ok { background: var(--brand-600); color: #fff; }
.duyuru-gezinme a.geri .dg-ok .ikon { transform: rotate(180deg); }
@media (max-width: 640px) { .duyuru-gezinme a.ileri { text-align: left; justify-content: flex-start; flex-direction: row-reverse; } }

/* Yan sütun */
.duyuru-yan { padding: 22px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); position: sticky; top: 98px; }
@media (max-width: 940px) { .duyuru-yan { position: static; } }
.duyuru-yan > h3 { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line); font-size: .98rem; }
.duyuru-yan > h3 .ikon { color: var(--brand-500); }
.dy-liste { display: grid; gap: 6px; }
.dy-liste a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 11px 10px; border-radius: var(--r-sm); border: 1px solid transparent; transition: all .18s var(--ease); }
.dy-liste a:hover { background: var(--surface-2); border-color: var(--line); transform: translateX(3px); }
.dy-tarih { width: 44px; text-align: center; padding: 7px 3px; border-radius: var(--r-xs);
    background: var(--surface-3); transition: background .18s var(--ease); }
.dy-liste a:hover .dy-tarih { background: var(--brand-100); }
.dy-tarih b { display: block; font-size: .98rem; font-weight: 800; line-height: 1; color: var(--brand-600); }
.dy-tarih small { font-size: .6rem; font-weight: 700; text-transform: uppercase; color: var(--ink-mute); }
.dy-govde { min-width: 0; }
.dy-govde strong { display: block; font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--ink-soft); }
.dy-liste a:hover .dy-govde strong { color: var(--ink); }
.dy-govde em { display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: var(--r-full);
    background: var(--accent-100); color: var(--accent-600); font-size: .66rem; font-weight: 800; font-style: normal; }
.dy-bos { font-size: .88rem; padding: 10px 0; }
.dy-tumu { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px;
    padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
    font-size: .86rem; font-weight: 700; color: var(--brand-600); transition: all .2s var(--ease); }
.dy-tumu:hover { background: var(--brand-600); color: #fff; border-color: transparent; }
.dy-tumu:hover .ikon { transform: translateX(3px); }
.dy-tumu .ikon { transition: transform .2s var(--ease); }

/* ---------- 11b. Duyuru + etkinlik ikili düzeni ---------- */
.split-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
@media (max-width: 940px) { .split-grid { grid-template-columns: 1fr; } }
.event-panel { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.event-panel > h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 1.06rem; }
.event-panel > h3::before { content: ""; width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--accent-400), var(--rose-500)); }
.event-list { display: grid; gap: 6px; }
.event-item { display: flex; gap: 15px; padding: 13px 12px; border-radius: var(--r-md); transition: background .2s var(--ease); }
.event-item:hover { background: var(--surface-2); }
.event-item + .event-item { border-top: 1px solid var(--line); border-radius: 0; }
.event-date { flex-shrink: 0; width: 52px; text-align: center; padding: 8px 4px; border-radius: var(--r-sm);
    background: linear-gradient(150deg, var(--brand-600), var(--brand-800)); color: #fff; align-self: flex-start; }
.event-date b { display: block; font-size: 1.15rem; line-height: 1; font-weight: 800; }
.event-date small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.event-item > div:last-child { min-width: 0; }
.event-item strong { display: block; font-size: .93rem; line-height: 1.35; margin: 3px 0; }
.event-item small { font-size: .78rem; color: var(--ink-mute); display: block; }
.event-type { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .07em; font-size: .68rem !important; color: var(--accent-600) !important; }

/* ---------- 12. Öğrenme yolları ---------- */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.path-card {
    position: relative; padding: 28px 26px; border-radius: var(--r-lg); overflow: hidden;
    background: linear-gradient(155deg, color-mix(in srgb, var(--c, var(--brand-500)) 92%, #060a22), color-mix(in srgb, var(--c, var(--brand-500)) 42%, #060a22));
    color: #fff; box-shadow: var(--sh-2); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.path-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.path-card::after {
    content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 68%);
}
.path-card > * { position: relative; z-index: 1; }
.path-card .lvl { display: inline-block; padding: 5px 12px; border-radius: var(--r-full); background: rgba(255, 255, 255, .18); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.path-card h3 { font-size: 1.28rem; margin: 15px 0 9px; color: #fff; }
.path-card p { color: rgba(255, 255, 255, .82); font-size: .9rem; }
.path-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .82rem; font-weight: 700; }
.path-meta span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .9); }

/* ---------- 12b. Rota ayrıntı blokları ---------- */
.route-block { padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.route-block + .route-block { margin-top: 26px; }
.route-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.route-ico { width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; font-size: 1.6rem; flex-shrink: 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 88%, #060a22), color-mix(in srgb, var(--c) 45%, #060a22)); color: #fff; box-shadow: var(--sh-2); }
.route-title h2 { font-size: 1.4rem; margin: 7px 0 6px; }
.route-title p { font-size: .92rem; }
.route-facts { display: flex; gap: 10px; }
.route-facts div { min-width: 92px; text-align: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.route-facts b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--c); line-height: 1.2; }
.route-facts small { font-size: .74rem; color: var(--ink-mute); font-weight: 700; }
@media (max-width: 820px) { .route-head { grid-template-columns: auto minmax(0, 1fr); } .route-facts { grid-column: 1 / -1; } }

.route-steps { display: grid; gap: 10px; counter-reset: rota; }
.route-steps a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); transition: all .2s var(--ease); }
.route-steps a:hover { border-color: var(--c); background: var(--surface); transform: translateX(5px); }
.rs-no { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
    background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.rs-body { min-width: 0; }
.rs-body strong { display: block; font-size: .96rem; }
.rs-body small { display: block; font-size: .83rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-meta { font-size: .8rem; font-weight: 700; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 640px) { .rs-meta { display: none; } }

/* ---------- 13. Rozetler ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; }
.badge-card {
    text-align: center; padding: 24px 18px; border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.badge-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--sh-2); }
.badge-ico {
    width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center;
    font-size: 1.7rem; background: linear-gradient(145deg, color-mix(in srgb, var(--c, var(--accent-400)) 24%, transparent), color-mix(in srgb, var(--c, var(--accent-400)) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--c, var(--accent-400)) 35%, transparent);
}
.badge-card.locked { opacity: .55; }
.badge-card.locked .badge-ico { filter: grayscale(1); }
.badge-card strong { display: block; font-size: .95rem; margin-bottom: 5px; }
.badge-card small { font-size: .8rem; color: var(--ink-mute); line-height: 1.45; display: block; }

/* ---------- 14. Öğrenci deneyimleri ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.quote-card {
    position: relative; padding: 30px 26px 24px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.quote-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.quote-card::before {
    content: "\201C"; position: absolute; top: 4px; left: 20px; font-family: var(--font-display);
    font-size: 4.2rem; line-height: 1; color: var(--brand-100);
}
.quote-card blockquote { position: relative; font-size: .95rem; color: var(--ink-soft); line-height: 1.68; }
.stars { display: flex; gap: 3px; margin-bottom: 12px; color: var(--accent-400); font-size: .95rem; }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-who > span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(140deg, var(--brand-500), var(--teal-600)); color: #fff; font-weight: 800; text-transform: uppercase; }
.quote-who strong { display: block; font-size: .92rem; }
.quote-who small { font-size: .79rem; color: var(--ink-mute); }

/* ---------- 15. Eylem çağrısı bandı ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(38px, 5vw, 64px);
    background: linear-gradient(140deg, var(--brand-800), var(--brand-600) 52%, var(--teal-600)); color: #fff; box-shadow: var(--sh-3); }
.cta-band::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 84% 16%, rgba(255, 255, 255, .2), transparent 46%),
                repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px);
}
.cta-band > div { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255, 255, 255, .84); margin-top: 12px; max-width: 52ch; }
.btn-light {
    display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border-radius: var(--r-full);
    background: #fff; color: var(--brand-800); font-weight: 800; font-size: .96rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22); transition: transform .2s var(--ease);
}
.btn-light:hover { transform: translateY(-3px); }
.btn-outline-light {
    display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: var(--r-full);
    border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; font-weight: 700; font-size: .94rem;
    transition: all .2s var(--ease);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.cta-actions { display: flex; gap: 13px; flex-wrap: wrap; }

/* ---------- 16. İç sayfa başlığı ---------- */
.page-hero {
    position: relative; overflow: hidden;
    border-bottom: 2px solid color-mix(in srgb, var(--brand-500) 26%, var(--line));
    box-shadow: inset 0 -18px 26px -22px rgba(16, 26, 77, .35);
    padding: clamp(44px, 5vw, 78px) 0 clamp(38px, 4.5vw, 62px);
    background:
        radial-gradient(900px 420px at 8% -30%, color-mix(in srgb, var(--brand-500) 22%, transparent), transparent 60%),
        radial-gradient(700px 400px at 96% -10%, color-mix(in srgb, var(--teal-500) 18%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 9%, var(--bg-alt)) 0%, var(--bg-alt) 100%);
}
/* İnce ızgara dokusu — boşluk hissini kırar */
.page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55;
    background-image: linear-gradient(var(--line) 1px, transparent 1px),
                      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 10%, transparent 72%);
}
/* Sağ üstte büyük yumuşak halka */
/* Sağ üst köşede yavaşça dönen üniversite mührü (slayttaki gibi, şeffaf). */
.page-hero::after {
    content: ""; position: absolute; z-index: 0; right: -90px; top: -120px;
    width: 420px; height: 420px; pointer-events: none;
    background: url("../images/dairesel-siyah.png") no-repeat center / 2000px auto;
    mix-blend-mode: multiply; opacity: .1;
    -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
    animation: sayfaMuhur 80s linear infinite;
}
@keyframes sayfaMuhur { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-hero::after { animation: none; } }
@media (max-width: 820px) { .page-hero::after { width: 280px; height: 280px; right: -110px; background-size: 1330px auto; } }
.page-hero-glow { position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(420px 300px at 78% 108%, color-mix(in srgb, var(--accent-400) 14%, transparent), transparent 62%); }
.page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.page-hero h1 { margin: 16px 0 12px; font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem); }
.page-hero p { font-size: 1.02rem; max-width: 62ch; }
.page-symbol {
    width: 108px; height: 108px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 2.6rem;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); color: var(--brand-500);
}
@media (max-width: 820px) { .page-symbol { display: none; } .page-hero-grid { grid-template-columns: 1fr; } }
/* Profil fotoğrafı varsa simge kutusunu görsel doldurur ve kutu büyür; yoksa simge olduğu gibi kalır. */
.page-symbol.fotolu { width: 158px; height: 158px; padding: 7px; }
.page-symbol.fotolu .ikon { display: none; }
.page-symbol .ps-foto { display: none; }
.page-symbol.fotolu .ps-foto { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-xl) - 8px); }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--ink-mute); margin-bottom: 4px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--brand-600); }
.crumbs i { font-style: normal; opacity: .6; }

/* ---------- 17. Filtre çubuğu ---------- */
.filter-bar {
    position: sticky; top: 74px; z-index: 40; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 14px 18px; margin-bottom: 26px; background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.filter-search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); }
.filter-search input { flex: 1; border: 0; background: none; outline: none; font-size: .9rem; min-width: 0; }
.filter-select {
    padding: 11px 16px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface-2);
    font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .2s var(--ease);
}
.filter-select:hover { border-color: var(--brand-400); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pill {
    padding: 9px 18px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface);
    font-size: .86rem; font-weight: 700; color: var(--ink-soft); transition: all .18s var(--ease);
}
.pill:hover { border-color: var(--brand-400); color: var(--brand-600); }
.pill.active { background: linear-gradient(120deg, var(--brand-600), var(--brand-800)); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }
.result-count { font-size: .88rem; color: var(--ink-mute); font-weight: 600; margin-bottom: 18px; }
.result-count b { color: var(--ink); }

/* ---------- 18. Boş durum ---------- */
.empty-state { text-align: center; padding: 64px 24px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state .es-ico { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px; display: grid; place-items: center; font-size: 2rem; background: var(--surface-3); }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { max-width: 46ch; margin: 0 auto 22px; font-size: .93rem; }

/* ---------- 19. Ders ayrıntı ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 34px; align-items: start; }
@media (max-width: 1020px) { .detail-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-1); }
.panel + .panel { margin-top: 22px; }
.panel > h2 { font-size: 1.35rem; margin-bottom: 8px; }
.panel-lead { font-size: .95rem; margin-bottom: 20px; }
.rich-text p + p { margin-top: 14px; }
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); }
.check-list li::before {
    content: "✓"; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--teal-100); color: var(--teal-600); font-size: .78rem; font-weight: 800; margin-top: 1px;
}

/* Standart tanıtım metni (sistem/ders_tanitim.php) */
.panel.tanitim > h2 { display: flex; align-items: center; gap: 10px; }
.panel.tanitim > h2 svg { color: var(--brand-600); flex-shrink: 0; }
.tanitim-bakis { display: grid; margin-top: 14px; }
.tanitim-bakis > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.tanitim-bakis > div:last-child { border-bottom: 0; }
.tanitim-bakis dt { font-weight: 700; color: var(--ink-mute); }
.tanitim-bakis dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .tanitim-bakis > div { grid-template-columns: 1fr; gap: 2px; } }
.tanitim-alt { font-size: 1rem; margin: 20px 0 12px; }
.check-list li b { color: var(--ink); }
.kunye-kap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.kunye-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kunye-tablo th, .kunye-tablo td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.kunye-tablo tbody tr:last-child th, .kunye-tablo tbody tr:last-child td { border-bottom: 0; }
.kunye-tablo thead th { background: var(--surface-3); font-weight: 800; }
.kunye-tablo tbody th { width: 34%; font-weight: 700; color: var(--ink-mute); background: var(--surface-2); }
.tanitim-imza { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; text-align: center; font-size: .9rem; }
.tanitim-imza span:last-child { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.tanitim-imza a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-600); font-weight: 700; text-decoration: none; }

.module-list { display: grid; gap: 12px; counter-reset: modul; }
.module-item {
    display: flex; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: var(--surface-2); counter-increment: modul; transition: all .2s var(--ease);
}
.module-item:hover { border-color: var(--brand-400); background: var(--surface); transform: translateX(4px); }
.module-item::before {
    content: counter(modul, decimal-leading-zero); flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; background: var(--brand-100); color: var(--brand-600); font-weight: 800; font-size: .88rem;
}
.module-item div { flex: 1; min-width: 0; }
.module-item strong { display: block; font-size: .96rem; }
.module-item small { font-size: .84rem; color: var(--ink-mute); }
.module-item .dur { flex-shrink: 0; font-size: .8rem; font-weight: 700; color: var(--ink-mute); background: var(--surface-3); padding: 6px 12px; border-radius: var(--r-full); }

.sticky-card { position: sticky; top: 98px; }
.enroll-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.enroll-cover { aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative; color: #fff;
    background: linear-gradient(142deg, color-mix(in srgb, var(--course-color, #2b40a8) 72%, #0a1030) 0%, #0a1030 100%); }
.enroll-cover::after { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 78%);
    mask-image: linear-gradient(135deg, #000, transparent 78%); }
.enroll-cover img { width: 100%; height: 100%; object-fit: cover; }
.enroll-body { padding: 24px; }
.enroll-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .89rem; }
.enroll-fact:last-of-type { border-bottom: 0; }
.enroll-fact span { color: var(--ink-mute); font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.enroll-fact b { font-weight: 700; text-align: right; }

/* Eğitmen tanıtım penceresi (sistem/ders_tanitim.php) */
.egitmen-ac { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 700; text-align: right; color: var(--brand-600); cursor: pointer;
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.egitmen-ac:hover { text-decoration-style: solid; }
.egitmen-ac svg { flex-shrink: 0; }
.egitmen-pencere { width: min(780px, calc(100vw - 28px)); max-height: calc(100vh - 40px); margin: auto; padding: 0; border: 0;
    border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(10, 16, 48, .55); overflow: hidden; }
.egitmen-pencere[open] { display: flex; flex-direction: column; animation: ep-ac .22s var(--ease); }
.egitmen-pencere::backdrop { background: rgba(10, 16, 48, .6); backdrop-filter: blur(4px); }
@keyframes ep-ac { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.ep-ust { position: relative; display: flex; align-items: center; gap: 18px; padding: 30px 64px 28px 30px; color: #fff;
    background: radial-gradient(520px 260px at 100% 0%, rgba(255, 255, 255, .16), transparent 62%),
                linear-gradient(140deg, #16233f 0%, #1e3a5f 52%, #2b40a8 100%); }
.ep-im { flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #e9d9a8; }
.ep-ust small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #e9d9a8; }
.ep-ust h2 { margin: 4px 0 0; font-size: 1.42rem; line-height: 1.25; color: #fff; }
.ep-ust p { margin: 8px 0 0; font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 520px; }
.ep-kapat { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-full);
    background: rgba(255, 255, 255, .1); color: #fff; font-size: .9rem; cursor: pointer; transition: background .15s; }
.ep-kapat:hover { background: rgba(255, 255, 255, .24); }
.ep-govde { padding: 26px 30px 28px; overflow-y: auto; display: grid; gap: 26px; }
.ep-metin { font-size: .95rem; line-height: 1.75; }
.ep-bolum h3, .ep-kartlar h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: .98rem; }
.ep-bolum h3 svg { color: var(--brand-600); flex-shrink: 0; }
/* Kilometre taşları: yan yana kartlar, üstlerinden geçen çizgi ve noktalarla. */
.ep-tarih { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ep-tarih li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 16px 16px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: var(--surface-2); font-size: .84rem; line-height: 1.5; }
.ep-tarih li::before { content: ""; position: absolute; left: 0; right: -13px; top: 13px; height: 2px; background: var(--brand-100); }
.ep-tarih li:last-child::before { right: 0; }
.ep-tarih li::after { content: ""; position: absolute; left: 16px; top: 7px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--brand-600); box-sizing: border-box; }
.ep-tarih b { align-self: flex-start; padding: 3px 11px; border-radius: var(--r-full); background: var(--brand-600); color: #fff;
    font-size: .82rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.ep-tarih span { color: var(--ink-soft, var(--ink)); }
.ep-sayilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ep-sayilar > div { padding: 16px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.ep-sayilar b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--brand-600); }
.ep-sayilar span { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--ink-mute); }
.ep-not { margin: 12px 0 0; font-size: .8rem; line-height: 1.55; color: var(--ink-mute); }
.ep-kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ep-kartlar article { padding: 20px; border-radius: var(--r-md); border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--brand-100), var(--surface) 70%); }
.ep-kartlar h3 span { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-600); color: #fff; }
.ep-kartlar p { margin: 0; font-size: .88rem; line-height: 1.7; }
.ep-alt { padding: 14px 30px; border-top: 1px solid var(--line); background: var(--surface-2); }
.ep-alt a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-600); font-weight: 700; font-size: .9rem; text-decoration: none; }
@media (max-width: 640px) {
    .ep-ust { padding: 24px 56px 22px 20px; gap: 14px; }
    .ep-im { width: 48px; height: 48px; border-radius: 14px; }
    .ep-ust h2 { font-size: 1.16rem; }
    .ep-govde { padding: 20px; gap: 22px; }
    .ep-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ep-kartlar { grid-template-columns: 1fr; }
    .ep-tarih { grid-template-columns: 1fr; }
    .ep-tarih li::before { right: 0; }
    .ep-alt { padding: 12px 20px; }
}
.btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 24px;
    border-radius: var(--r-sm); background: linear-gradient(120deg, var(--brand-600), var(--brand-800));
    color: #fff; font-weight: 800; font-size: .96rem; box-shadow: var(--sh-brand); transition: transform .2s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 24px;
    border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink); font-weight: 700; font-size: .92rem;
    border: 1px solid var(--line); transition: all .2s var(--ease);
}
.btn-secondary:hover { border-color: var(--brand-400); color: var(--brand-600); }
.capacity { margin: 16px 0 4px; }
.capacity > div { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; margin-bottom: 7px; }
.capacity > div span { color: var(--ink-mute); }
.capacity i { display: block; height: 8px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.capacity i em { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent-400), var(--rose-500)); }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border-radius: var(--r-md); font-size: .89rem; font-weight: 600; margin-bottom: 22px; }
.alert.ok { background: var(--ok-bg); color: var(--ok-ink); }
.alert.warn { background: var(--warn-bg); color: var(--warn-ink); }
.alert.err { background: var(--err-bg); color: var(--err-ink); }

/* ---------- 20. Yardım merkezi + SSS akordiyonu ---------- */
.yardim-duzen { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 940px) { .yardim-duzen { grid-template-columns: 1fr; } }

.yardim-menu { position: sticky; top: 98px; }
@media (max-width: 940px) { .yardim-menu { position: static; } }
.yardim-menu > h2 { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-mute); margin-bottom: 12px; }
.yardim-menu nav { display: grid; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--sh-1); }
.yardim-menu nav a { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm);
    font-size: .89rem; font-weight: 600; color: var(--ink-soft); transition: all .18s var(--ease); }
.yardim-menu nav a:hover { background: var(--surface-3); color: var(--ink); }
.yardim-menu nav a .ikon { color: var(--brand-500); }
.yardim-menu nav a span { flex: 1; min-width: 0; }
.yardim-menu nav a b { font-size: .74rem; font-weight: 800; color: var(--ink-mute);
    background: var(--surface-3); padding: 2px 9px; border-radius: var(--r-full); }
.yardim-menu nav a:hover b { background: var(--brand-100); color: var(--brand-600); }

.yardim-iletisim { margin-top: 18px; padding: 20px; border-radius: var(--r-md);
    background: linear-gradient(150deg, var(--brand-100), color-mix(in srgb, var(--teal-100) 55%, var(--surface)));
    border: 1px solid var(--line); }
.yardim-iletisim strong { display: block; font-size: .96rem; margin-bottom: 6px; }
.yardim-iletisim p { font-size: .84rem; margin-bottom: 14px; }
.yardim-iletisim a { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: .85rem; font-weight: 700; color: var(--brand-600); }
.yardim-iletisim a + a { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }

.yardim-cta { margin-top: 44px; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
    background: linear-gradient(140deg, var(--brand-800), var(--brand-600) 55%, var(--teal-600)); color: #fff; box-shadow: var(--sh-3); }
.yardim-cta::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 86% 14%, rgba(255,255,255,.18), transparent 46%); }
.yardim-cta > * { position: relative; z-index: 1; }
.yardim-cta h2 { color: #fff; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); }
.yardim-cta p { color: rgba(255, 255, 255, .84); margin-top: 10px; max-width: 56ch; }
.yc-eylem { display: flex; gap: 12px; flex-wrap: wrap; }

.faq-group + .faq-group { margin-top: 30px; }
.faq-group { scroll-margin-top: 110px; }
.faq-group > h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; font-size: 1.08rem; }
.faq-group > h3 .ikon { color: var(--brand-500); }
.faq-group > h3 b { font-size: .72rem; font-weight: 800; color: var(--ink-mute);
    background: var(--surface-3); padding: 3px 10px; border-radius: var(--r-full); }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq-item + .faq-item { margin-top: 11px; }
.faq-item.open { border-color: var(--brand-400); box-shadow: var(--sh-1); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 19px 22px; text-align: left; font-weight: 700; font-size: .98rem; }
.faq-q i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-style: normal; font-size: 1.1rem; color: var(--ink-mute); transition: all .25s var(--ease); }
.faq-item.open .faq-q i { transform: rotate(45deg); background: var(--brand-600); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.faq-a > div { padding: 0 22px 20px; font-size: .93rem; color: var(--ink-soft); }

/* ---------- 21. Öğrenme panosu (derslerim) ---------- */
.dash-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 28px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-bottom: 26px; }
@media (max-width: 860px) { .dash-head { grid-template-columns: 1fr; } }
.dash-user { display: flex; align-items: center; gap: 17px; }
.avatar-lg { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(140deg, var(--brand-600), var(--teal-600)); color: #fff; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; box-shadow: var(--sh-brand); }
.dash-user h2 { font-size: 1.5rem; }
.dash-user p { font-size: .9rem; }
.dash-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.dash-stat { min-width: 118px; padding: 15px 18px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.dash-stat b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--brand-600); }
.dash-stat small { font-size: .76rem; color: var(--ink-mute); font-weight: 700; }

.ring-wrap { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .track { stroke: var(--surface-3); }
.ring .bar { stroke: url(#ringGrad); transition: stroke-dashoffset 1s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; }

/* ---------- 21a. Ders içeriği: ünite listesi ---------- */
.unite-listesi { display: grid; gap: 12px; }
.unite-karti { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--sh-1); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.unite-karti.acik { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: var(--sh-2); }

.unite-basi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
    width: 100%; padding: 18px 22px; text-align: left; }
.un-yuzde { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-full);
    font-size: .8rem; font-weight: 800; background: var(--surface-3); color: var(--ink-mute); white-space: nowrap; }
.un-yuzde.basladi { background: var(--warn-bg); color: var(--warn-ink); }
.un-yuzde.tam { background: var(--ok-bg); color: var(--ok-ink); }
.unite-basi:hover { background: var(--surface-2); }
.un-no { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 62%, #0a1030));
    color: #fff; font-weight: 800; font-size: .9rem; }
.un-ad { min-width: 0; }
.un-ad strong { display: block; font-size: 1rem; line-height: 1.38; }
.un-ad small { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px;
    font-size: .79rem; color: var(--ink-mute); font-weight: 600; }
.un-ad small em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.un-ad small em::before { content: "·"; margin-right: 3px; }
.un-ok { width: 9px; height: 9px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.unite-karti.acik .un-ok { transform: rotate(-135deg) translate(-3px, -3px); }

.unite-govde { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.unite-karti.acik .unite-govde { grid-template-rows: 1fr; }
.un-ic { overflow: hidden; }
.unite-karti.acik .un-ic { padding: 4px 22px 22px; border-top: 1px solid var(--line); }
.un-grup + .un-grup { margin-top: 22px; }
.un-grup h4 { display: flex; align-items: center; gap: 9px; margin: 18px 0 11px;
    font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--g, var(--ink-mute)); }
.un-grup h4 .ikon { color: var(--g, var(--c)); }
.un-grup h4::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--g, var(--line)) 26%, transparent); }

.un-ogeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.un-oge {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 11px; padding: 18px 12px 16px; border-radius: var(--r-md); background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--g, var(--line)) 20%, var(--line));
    font-size: .82rem; font-weight: 600; text-align: center; transition: all .2s var(--ease);
}
.un-oge:hover { border-color: var(--g, var(--c)); transform: translateY(-3px); box-shadow: var(--sh-2); }
.uo-ikon {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--g, var(--c)) 14%, var(--surface)); color: var(--g, var(--c));
    transition: transform .2s var(--ease);
}
.un-oge:hover .uo-ikon { transform: scale(1.08); }
.uo-ad { line-height: 1.35; }
/* Ortalanmış düzende ok işareti gereksiz; erişilebilirlik için gizlenir. */
.un-oge > .ikon { display: none; }

/* Görüntülenmiş etkinlik ayrı renkte işaretlenir */
.un-oge.gorulen { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok-ink) 32%, transparent); }
.un-oge.gorulen .uo-ikon { background: color-mix(in srgb, var(--ok-ink) 16%, transparent); color: var(--ok-ink); }
.un-oge.gorulen .uo-ad { color: var(--ok-ink); }
.uo-tik { position: absolute; right: 9px; top: 9px; width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ok-ink); color: #fff; }

/* ---------- Sınav geri sayımı + etkinlik takvimi ---------- */
.surec-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
@media (max-width: 1080px) { .surec-duzen { grid-template-columns: 1fr; } }

.takvim-kutu {
    position: sticky; top: 98px; overflow: hidden; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2);
}
@media (max-width: 1080px) { .takvim-kutu { position: static; } }

/* ---------- Geri sayım ---------- */
.tk-sayac {
    position: relative; overflow: hidden; padding: 26px 24px 24px; text-align: center; color: #fff;
    background: linear-gradient(150deg, #1b2a6b 0%, #101a48 55%, #0a1030 100%);
}
.tk-fon {
    position: absolute; inset: -40% -30% auto -30%; height: 260px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(200, 70, 94, .55), transparent 72%);
    filter: blur(30px);
}
.tk-sayac > *:not(.tk-fon) { position: relative; z-index: 1; }

.tk-etiket {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
    font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
/* Koyu zeminde başlık ve tarih açık renk olmalı */
.tk-sayac h3 { margin-top: 14px; font-size: 1.06rem; line-height: 1.4; color: #fff; }
.tk-tarih {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
    font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .72);
}

.tk-rakamlar { display: flex; align-items: flex-start; justify-content: center; gap: 5px; margin-top: 20px; }
.tk-rakamlar > div {
    flex: 1; min-width: 0; padding: 13px 4px 10px; border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tk-rakamlar b {
    display: block; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.8rem); font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
}
.tk-rakamlar small {
    display: block; margin-top: 5px; font-size: .62rem; font-weight: 700;
    letter-spacing: .05em; color: rgba(255, 255, 255, .6);
}
.tk-rakamlar > i {
    flex: none; padding-top: 14px; font-style: normal; font-size: 1.25rem; font-weight: 800;
    color: rgba(255, 255, 255, .32);
}
/* Saniye kutusu her saniye hafifçe nabız atar */
.tk-rakamlar .saniye b { animation: sayacNabiz 1s ease-in-out infinite; }
@keyframes sayacNabiz { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.tk-bitti {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px;
    border-radius: var(--r-full); background: rgba(255, 255, 255, .92);
    font-size: .84rem; font-weight: 800; color: var(--ok-ink);
}

/* ---------- Etkinlik listesi ---------- */
.tk-liste-alan { padding: 22px 20px 24px; }
.tk-baslik {
    margin: 0 0 16px; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; text-align: center; color: var(--ink-mute);
}
.tk-baslik::after {
    content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; margin: 10px auto 0;
    background: linear-gradient(90deg, var(--brand-600), var(--accent-400));
}

.tk-liste { display: grid; gap: 9px; }
.tk-liste li {
    display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line);
    transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.tk-liste li:hover {
    transform: translateX(3px); background: var(--surface);
    border-color: color-mix(in srgb, var(--brand-500) 40%, var(--line));
}
/* Geri sayımı yapılan sınav vurgulanır */
.tk-liste li.isaretli {
    background: color-mix(in srgb, var(--rose-500) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--rose-500) 34%, transparent);
}

.tkl-tarih {
    flex: none; width: 46px; padding: 7px 0; border-radius: var(--r-sm); text-align: center;
    background: linear-gradient(150deg, var(--brand-800), var(--brand-600)); color: #fff;
}
.tk-liste li.isaretli .tkl-tarih { background: linear-gradient(150deg, #9c2f45, var(--rose-500)); }
.tkl-tarih b { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1; color: #fff; }
.tkl-tarih small { display: block; margin-top: 2px; font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: rgba(255, 255, 255, .78); }

.tkl-govde { min-width: 0; }
.tkl-govde strong { display: block; font-size: .87rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.tkl-govde small {
    display: flex; align-items: center; gap: 6px; margin-top: 4px;
    font-size: .74rem; font-weight: 600; color: var(--ink-mute);
}
.tkl-govde small .ikon { flex: none; }
.tkl-govde em {
    font-style: normal; padding: 2px 8px; border-radius: var(--r-full);
    background: var(--ok-bg); color: var(--ok-ink); font-size: .68rem; font-weight: 800;
}

/* ---------- 21b. Profil sayfası ---------- */
.profil-duzen { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 940px) { .profil-duzen { grid-template-columns: 1fr; } }

.profil-kart { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); position: sticky; top: 98px; }
@media (max-width: 940px) { .profil-kart { position: static; } }
.pk-ust { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pk-ust strong { display: block; font-size: 1.1rem; line-height: 1.3; }
.pk-onay { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px;
    border-radius: var(--r-full); background: var(--ok-bg); color: var(--ok-ink); font-size: .73rem; font-weight: 700; }

/* Profil fotoğrafı: avatarın köşesinde küçük kamera düğmesi durur. */
.pk-foto { position: relative; flex-shrink: 0; }
.pk-foto-sec {
    position: absolute; right: -5px; bottom: -5px; width: 27px; height: 27px; display: grid; place-items: center;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--brand-600);
    box-shadow: var(--sh-1); cursor: pointer; transition: all .18s var(--ease);
}
.pk-foto-sec:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: scale(1.08); }
.pk-foto-eylem { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.pk-foto-baglanti {
    padding: 0; background: none; border: 0; cursor: pointer;
    font-size: .78rem; font-weight: 700; color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px;
}
.pk-foto-baglanti:hover { color: var(--brand-600); }
.pk-foto-baglanti.sil { color: var(--rose-500); }
.pk-foto-form { display: none; }
.pk-foto-durum { margin-top: 14px; padding: 10px 13px; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; line-height: 1.5; }
.pk-foto-durum.iyi  { background: var(--ok-bg); color: var(--ok-ink); }
.pk-foto-durum.kotu { background: var(--rose-100); color: var(--rose-500); }
.pk-foto.yukleniyor .avatar-lg { opacity: .45; }

/* Fotoğraf varsa avatar harf yerine görseli gösterir. */
.avatar-lg.fotolu, .ku-avatar.fotolu, .kr-avatar.fotolu { background: var(--surface-3); padding: 0; overflow: hidden; }
.avatar-lg.fotolu img, .ku-avatar.fotolu img, .kr-avatar.fotolu img {
    width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}

.pk-bilgi { display: grid; gap: 2px; padding: 18px 0; }
.pk-bilgi > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pk-bilgi > div:last-child { border-bottom: 0; }
.pk-bilgi dt { display: inline-flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 600; color: var(--ink-mute); }
.pk-bilgi dd { font-size: .88rem; font-weight: 700; text-align: right; word-break: break-word; }

.pk-eylem { display: grid; gap: 10px; margin-top: 6px; }
.pk-eylem .btn-secondary { gap: 9px; }
/* Yönetim paneli kısayolu — profil kartında, çıkış düğmesinin hemen üstünde. */
.btn-panel {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 22px;
    border-radius: var(--r-sm); font-size: .92rem; font-weight: 700;
    background: var(--brand-100); color: var(--brand-700); border: 1px solid transparent; transition: all .2s var(--ease);
}
.btn-panel:hover { border-color: var(--brand-500); }

.btn-cikis {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 22px;
    border-radius: var(--r-sm); font-size: .92rem; font-weight: 700;
    background: var(--rose-100); color: var(--rose-500); border: 1px solid transparent; transition: all .2s var(--ease);
}
.btn-cikis:hover { border-color: var(--rose-500); }
.pk-not { margin-top: 18px; font-size: .8rem; line-height: 1.6; color: var(--ink-mute); }
.pk-not a { color: var(--brand-500); font-weight: 700; }

/* ---------- 22c. Rozetlerim ---------- */
.rzm-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin-top: 18px; }
.rzm-kart {
    position: relative; display: block; padding: 20px 18px 16px; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rzm-kart:hover { transform: translateY(-3px); border-color: var(--brand-400); box-shadow: var(--sh-2); }
.rzm-madalya {
    width: 62px; height: 62px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(150deg, color-mix(in srgb, var(--amber-500, #e08423) 22%, #fff), color-mix(in srgb, var(--brand-500) 16%, #fff));
    color: var(--amber-600, #b4661a); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber-500, #e08423) 30%, transparent);
}
.rzm-madalya img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.rzm-kart strong { display: block; font-size: .96rem; line-height: 1.35; }
.rzm-kart > small { display: block; margin-top: 4px; font-size: .78rem; color: var(--ink-mute); font-weight: 600; }
.rzm-alt { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: .75rem; color: var(--ink-mute); font-weight: 600; }
.rzm-puan { padding: 2px 9px; border-radius: var(--r-full); background: var(--ok-bg); color: var(--ok-ink); font-weight: 700; }
.rzm-kod { display: block; margin-top: 9px; font-size: .68rem; letter-spacing: .06em; color: var(--ink-mute); font-style: normal; }
.rzm-kart.dis .rzm-madalya { background: var(--surface-2); color: var(--brand-500); box-shadow: inset 0 0 0 1px var(--line); }
.rzm-kart:has(.rzm-paylas) { padding-bottom: 0; }
.rzm-govde { display: block; }
.rzm-paylas { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px;
    padding: 10px; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--brand-500); }
.rzm-paylas:hover { color: var(--brand-600); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* ---------- Ders rozeti kartları (Rozetlerim) ---------- */
.rd-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.rd-kart {
    display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.rd-kart:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }

.rd-gorsel {
    position: relative; display: grid; place-items: center; padding: 26px 20px 20px; overflow: hidden;
    background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 72%);
}
.rd-isik { position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); pointer-events: none; }
.rd-gorsel img { position: relative; width: 100%; max-width: 210px; height: auto; aspect-ratio: 1; object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(16, 24, 64, .22)); transition: transform .3s var(--ease); }
.rd-kart:hover .rd-gorsel img { transform: scale(1.05) rotate(-2deg); }
.rd-madalya { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
    background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }

.rd-govde { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.rd-kategori { align-self: flex-start; padding: 4px 11px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: color-mix(in srgb, var(--c) 78%, var(--ink));
    font-size: .71rem; font-weight: 800; }
.rd-govde h2 { font-size: 1.04rem; line-height: 1.35; }
.rd-govde h2 a { transition: color .18s var(--ease); }
.rd-govde h2 a:hover { color: var(--c); }

.rd-kunye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rd-kunye > div { text-align: center; }
.rd-kunye b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.rd-kunye small { font-size: .7rem; color: var(--ink-mute); }

.rd-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rd-kod { font-size: .72rem; letter-spacing: .05em; color: var(--ink-mute); }
.rd-onay { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full);
    background: var(--ok-bg); color: var(--ok-ink); font-size: .69rem; font-weight: 800; }
.rd-onay.bekliyor { background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--line); }

/* "Rozeti aç" tam satır, diğer iki eylem altında yan yana */
.rd-eylem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.rd-birincil, .rd-ikincil { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px; border-radius: var(--r-sm); font-size: .82rem; font-weight: 700;
    white-space: nowrap; transition: all .2s var(--ease); }
.rd-birincil { grid-column: 1 / -1; background: var(--c); color: #fff; }
.rd-birincil:hover { filter: brightness(1.08); }
.rd-ikincil { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-mute); }
.rd-ikincil:hover { border-color: var(--c); color: var(--c); }

/* ---------- Rehber sayfasındaki resmî belge ---------- */
.rb-belge { margin-top: 22px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.rbb-ust { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
@media (max-width: 860px) { .rbb-ust { grid-template-columns: auto minmax(0, 1fr); } .rbb-eylem { grid-column: 1 / -1; } }
.rbb-ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
    background: color-mix(in srgb, var(--rose-500) 12%, var(--surface)); color: var(--rose-500); }
.rbb-ust strong { display: block; font-size: 1.05rem; }
.rbb-ust p { margin-top: 5px; font-size: .86rem; line-height: 1.6; color: var(--ink-mute); }
.rbb-ust small { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-size: .76rem; color: var(--ink-mute); }
.rbb-eylem { display: flex; flex-wrap: wrap; gap: 9px; }
.rbb-eylem .btn-primary, .rbb-eylem .btn-secondary { padding: 11px 18px; font-size: .85rem; }
.rbb-cerceve { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
/* Belge, A4 sayfa oranında (genişliğe göre) aşağı doğru uzar; sayfa bütün olarak kaydırılır. */
.rbb-cerceve object, .rbb-cerceve iframe { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; min-height: 720px; border: 0; }
@media (max-width: 820px) { .rbb-cerceve object, .rbb-cerceve iframe { min-height: 460px; } }
.rbb-yedek { padding: 24px; font-size: .88rem; color: var(--ink-mute); text-align: center; }
.rbb-yedek a { color: var(--brand-500); font-weight: 700; }

/* Ana sayfa vitrininde öğrencinin kendi rozetleri */
/* Adımlar solda, öğrencinin kendi rozetleri sağdaki panelde (eşit yükseklikte) */
.rv-duzen { position: relative; display: grid; gap: 18px; align-items: stretch; }
.rv-duzen.rozetli { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 1080px) { .rv-duzen.rozetli { grid-template-columns: 1fr; } }
.rv-duzen.rozetli .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .rv-duzen.rozetli .rv-grid { grid-template-columns: 1fr; } }

.rv-benim {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 20px 22px 18px; border-radius: var(--r-lg); text-align: center;
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent-400) 16%, var(--surface)) 0%, var(--surface) 55%);
    border: 1px solid color-mix(in srgb, var(--accent-400) 32%, var(--line));
    box-shadow: var(--sh-1);
}
/* Üstte ince kehribar şerit */
.rv-benim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent-400), #ffcf7a, var(--accent-400)); }
.rvb-baslik { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a9711a; }
.rvb-liste { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; margin-top: 14px; align-content: center; }
.rvb-liste:has(> :only-child) { grid-template-columns: 1fr; }
.rvb-rozet {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 9px;
    padding: 16px 12px; border-radius: var(--r-md);
    background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent-400) 10%, var(--surface)), var(--surface) 70%);
    border: 1px solid var(--line); color: var(--accent-400);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.rvb-rozet:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--accent-400); }
.rvb-rozet img { width: 100%; max-width: 132px; height: auto; aspect-ratio: 1; object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(16, 24, 64, .2)); transition: transform .3s var(--ease); }
.rvb-rozet:hover img { transform: scale(1.06); }
.rvb-rozet b { font-size: .75rem; font-weight: 700; line-height: 1.35; color: var(--ink-soft); }
.rvb-tumu { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: .82rem; font-weight: 800; color: var(--brand-600); }
.rvb-tumu:hover { color: var(--brand-800, #1b2a80); }

/* Henüz rozet kazanılmadıysa */
.rvb-bos { flex: 1 1 auto; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 18px 4px; }
.rvb-bos-ikon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent-400) 16%, var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent-400) 55%, transparent); color: #b47a16; }
.rvb-bos strong { font-size: 1rem; }
.rvb-bos p { font-size: .82rem; line-height: 1.6; color: var(--ink-mute); }

/* Profil sayfasındaki kısa rozet listesi */
.pf-rozetler { display: grid; gap: 10px; }
.pf-rozet { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line); color: inherit; transition: border-color .2s var(--ease); }
.pf-rozet:hover { border-color: var(--brand-400); }
.pf-rozet > span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent-400) 22%, var(--surface)); color: #a9711a; }
.pf-rozet strong { display: block; font-size: .9rem; }
.pf-rozet small { display: block; margin-top: 2px; font-size: .76rem; color: var(--ink-mute); }

/* Cüzdan sayfasındaki POK rozet görseli */
.rz-gorsel { display: grid; place-items: center; margin: 6px 0 10px; }
.rz-gorsel img { width: min(300px, 72%); height: auto; aspect-ratio: 1; object-fit: contain;
    filter: drop-shadow(0 18px 32px rgba(16, 24, 64, .26)); }

/* Rozet sayfalarındaki POK doğrulama bloğu */
.rz-pok { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 18px 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.rz-pok-ikon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: color-mix(in srgb, var(--teal-500) 14%, var(--surface)); color: var(--teal-600); }
.rz-pok strong { display: block; font-size: .98rem; }
.rz-pok p { margin-top: 5px; font-size: .84rem; line-height: 1.6; color: var(--ink-mute); }
.rz-pok-eylem { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 11px; }
.rz-pok-eylem a { display: inline-flex; align-items: center; gap: 7px; font-size: .83rem; font-weight: 700; color: var(--brand-500); }
.rz-pok-eylem a:hover { color: var(--brand-600); }

.rzm-sayac { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rzm-sayac span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-mute); }
.rzm-sayac b { font-size: 1.05rem; font-weight: 800; color: var(--brand-600); }

/* ---------- 22e. Sınav başvuru ---------- */
.sb-tarih { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sb-tarih span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-mute); }
.sb-tarih b { color: var(--ink); }

.sb-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .sb-duzen { grid-template-columns: 1fr; } }

.sb-form { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-aciklama { display: flex; gap: 10px; padding: 14px 16px; margin-bottom: 22px; border-radius: var(--r-md);
    background: var(--surface-2); font-size: .86rem; line-height: 1.65; color: var(--ink-soft); }
.sb-aciklama .ikon { flex: none; margin-top: 2px; color: var(--brand-500); }

.sb-kimlik { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.sb-kimlik strong { display: block; font-size: .95rem; }
.sb-kimlik p { margin-top: 3px; font-size: .82rem; color: var(--ink-mute); }
.sb-foto { width: 96px; height: 96px; flex: none; display: grid; place-items: center; border-radius: 26px;
    background: linear-gradient(140deg, var(--brand-600), var(--teal-600)); color: #fff; overflow: hidden; box-shadow: var(--sh-brand); }
.sb-foto img { width: 100%; height: 100%; object-fit: cover; }
.sb-foto-baglanti { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: .82rem; font-weight: 700; color: var(--brand-500); }
.sb-foto-baglanti:hover { color: var(--brand-600); }
/* Fotoğrafı olmayan öğrenci için zorunlu yükleme alanı */
.sb-kimlik.eksik .sb-foto { background: var(--rose-100); color: var(--rose-500); box-shadow: none; }
.sb-foto-uyari { display: flex; align-items: center; gap: 7px; margin-top: 8px !important;
    font-size: .8rem !important; font-weight: 600; color: var(--rose-500) !important; }
.sb-foto-girdi { display: block; width: 100%; max-width: 380px; margin-top: 10px; padding: 11px; font: inherit; font-size: .83rem;
    background: var(--surface); border: 1px dashed var(--rose-500); border-radius: var(--r-sm); cursor: pointer; }
.sb-foto-girdi:hover { border-color: var(--brand-500); }

/* Adım 4 — aday kimlik önizlemesi */
.sb-aday { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 22px; padding: 22px 24px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-aday dl { flex: 1 1 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 26px; }
.sb-aday dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sb-aday dt { font-size: .8rem; color: var(--ink-mute); }
.sb-aday dd { font-size: .86rem; font-weight: 700; text-align: right; word-break: break-word; }

.sb-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.sb-alan { display: grid; gap: 7px; }
.sb-alan > span { font-size: .82rem; font-weight: 700; color: var(--ink-mute); }
.sb-alan i { color: var(--rose-500); font-style: normal; }
.sb-alan input, .sb-alan select {
    width: 100%; padding: 12px 14px; font: inherit; font-size: .9rem; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .2s var(--ease);
}
.sb-alan input:focus, .sb-alan select:focus { outline: none; border-color: var(--brand-500); }
.sb-alan input:invalid:not(:placeholder-shown) { border-color: var(--rose-500); }

.sb-engel { margin-top: 26px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.sb-engel legend { padding: 0 8px; font-size: .92rem; font-weight: 800; }
.sb-engel-lead { font-size: .84rem; line-height: 1.6; color: var(--ink-mute); }
.sb-secim { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sb-radyo { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: border-color .2s var(--ease); }
.sb-radyo:has(input:checked) { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 7%, var(--surface)); }
.sb-radyo input { accent-color: var(--brand-600); width: 17px; height: 17px; }

.sb-engel-detay { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.sb-engel-detay.hidden { display: none; }
.sb-alt-baslik { font-size: .82rem; font-weight: 800; color: var(--ink-mute); }
.sb-alt-baslik i { color: var(--rose-500); font-style: normal; }
.sb-alt-baslik small { font-weight: 600; color: var(--ink-mute); }
.sb-kutucuklar { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-top: 12px; }
.sb-kutucuk { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s var(--ease); }
.sb-kutucuk:has(input:checked) { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 6%, var(--surface)); }
.sb-kutucuk input { accent-color: var(--brand-600); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.sb-kutucuk b { display: block; font-size: .86rem; }
.sb-kutucuk small { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.45; color: var(--ink-mute); }

.sb-belge { margin-top: 20px; }
.sb-belge-not { margin-top: 5px; font-size: .8rem; line-height: 1.6; color: var(--ink-mute); }
.sb-belge input[type="file"] { display: block; width: 100%; margin-top: 12px; padding: 13px; font: inherit; font-size: .84rem;
    background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-sm); cursor: pointer; }
.sb-belge input[type="file"]:hover { border-color: var(--brand-500); }
.sb-belge-mevcut { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 14px; border-radius: var(--r-sm);
    background: var(--ok-bg); color: var(--ok-ink); font-size: .82rem; font-weight: 600; }
.sb-belge-mevcut a { color: inherit; text-decoration: underline; }
.sb-belge-secili { margin-top: 9px; font-size: .8rem; font-weight: 700; color: var(--brand-600); }

.sb-gonder { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.sb-gonder small { flex: 1 1 240px; font-size: .78rem; line-height: 1.55; color: var(--ink-mute); }
.sb-durum { margin-top: 14px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--rose-100);
    color: var(--rose-500); font-size: .84rem; font-weight: 600; }

/* ---------- Başlık şeridi ---------- */
.sb-bas { padding: 26px 0; background: linear-gradient(120deg,
    color-mix(in srgb, var(--brand-500) 10%, var(--surface)), var(--surface) 60%,
    color-mix(in srgb, var(--teal-500) 10%, var(--surface))); border-bottom: 1px solid var(--line); }
.sb-bas-ic { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px; }
.sb-etiket { font-size: .72rem; font-weight: 800; letter-spacing: .09em; color: var(--brand-600); }
.sb-bas h1 { margin-top: 8px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); }
.sb-bas p { margin-top: 8px; max-width: 72ch; font-size: .92rem; line-height: 1.7; color: var(--ink-mute); }
.sb-bas-yan { text-align: right; }
.sb-rozet-durum { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-full);
    font-size: .74rem; font-weight: 800; }
.sb-rozet-durum.acik { background: var(--ok-bg); color: var(--ok-ink); }
.sb-rozet-durum.kapali { background: var(--surface-3); color: var(--ink-mute); }
.sb-bas-tarih { margin-top: 12px; display: grid; gap: 4px; }
.sb-bas-tarih > div { display: flex; justify-content: flex-end; gap: 8px; font-size: .8rem; }
.sb-bas-tarih dt { color: var(--ink-mute); }
.sb-bas-tarih dt::after { content: ":"; }
.sb-bas-tarih dd { font-weight: 700; }
@media (max-width: 760px) { .sb-bas-yan { text-align: left; } .sb-bas-tarih > div { justify-content: flex-start; } }

/* ---------- Adım şeridi ---------- */
.sb-adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; padding: 0; list-style: none; }
@media (max-width: 780px) { .sb-adimlar { grid-template-columns: repeat(2, 1fr); } }
.sb-adimlar li > a, .sb-adimlar li > span {
    display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-mute); transition: all .2s var(--ease);
}
.sb-adimlar li > a:hover { border-color: var(--brand-400); color: var(--ink); }
.sb-adimlar b { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-3); color: var(--ink-mute); font-size: .85rem; font-weight: 800; }
.sb-adimlar em { font-style: normal; font-size: .86rem; font-weight: 700; }
.sb-adimlar li.simdi > span, .sb-adimlar li.simdi > a {
    background: color-mix(in srgb, var(--brand-500) 8%, var(--surface)); border-color: var(--brand-500); color: var(--ink); }
.sb-adimlar li.simdi b { background: var(--brand-600); color: #fff; }
.sb-adimlar li.bitti b { background: var(--ok-bg); color: var(--ok-ink); }
.sb-adimlar li.bitti > a, .sb-adimlar li.bitti > span { color: var(--ink); }
.sb-adimlar li.kilitli > span { opacity: .55; }

.sb-adim-baslik { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin-bottom: 6px; }
.sb-adim-baslik span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--brand-600); color: #fff; font-size: .88rem; font-weight: 800; }
.sb-adim-lead { margin-bottom: 18px; font-size: .88rem; line-height: 1.7; color: var(--ink-mute); }
.ikon.geri { transform: rotate(180deg); }

/* ---------- Adım 2: ders seçimi ---------- */
.sb-ders-listesi { display: grid; gap: 10px; margin-top: 16px; }
.sb-ders { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: all .2s var(--ease); }
.sb-ders:hover { border-color: var(--brand-400); }
.sb-ders.secili { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 6%, var(--surface)); }
.sb-ders input { accent-color: var(--brand-600); width: 18px; height: 18px; flex: none; }
.sb-ders-govde { flex: 1 1 auto; min-width: 0; }
.sb-ders-govde b { display: block; font-size: .92rem; line-height: 1.4; }
.sb-ders-govde small { display: block; margin-top: 3px; font-size: .77rem; color: var(--ink-mute); }
.sb-ders-ucret { flex: none; font-size: .88rem; font-weight: 800; color: var(--brand-600); }

.sb-tutar-kutu h3 { margin-bottom: 12px; }
.sb-tutar-liste { display: grid; gap: 8px; list-style: none; padding: 0; }
.sb-tutar-liste li { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; }
.sb-tutar-liste li span { color: var(--ink-mute); }
.sb-tutar-liste li b { flex: none; font-weight: 700; }
.sb-tutar-liste li.bos { color: var(--ink-mute); font-style: italic; }
.sb-tutar-toplam { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.sb-tutar-toplam span { font-size: .82rem; color: var(--ink-mute); }
.sb-tutar-toplam b { font-size: 1.25rem; font-weight: 800; color: var(--brand-600); }

/* ---------- Adım 3: ödeme ---------- */
.sb-odeme-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1040px) { .sb-odeme-duzen { grid-template-columns: 1fr; } }
.sb-kart-alanlar { display: grid; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line); }
.sb-alan-ucler { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; }
/* ---------- Ödeme öncesi iade uyarısı ---------- */
.sb-iade-uyari {
    position: relative; overflow: hidden; display: grid; gap: 14px; margin-bottom: 22px; padding: 18px 20px 16px;
    border-radius: var(--r-md);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--accent-400) 20%, var(--surface)),
        color-mix(in srgb, var(--accent-400) 10%, var(--surface)));
    border: 1.5px solid color-mix(in srgb, var(--accent-400) 55%, transparent);
    box-shadow: 0 0 0 0 rgba(240, 169, 43, .5);
    animation: iadeDikkat 2.4s var(--ease) 3;
}
/* Sayfaya gelince üç kez nabız gibi vurgulanır, sonra sakinleşir. */
@keyframes iadeDikkat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 169, 43, .45); border-color: color-mix(in srgb, var(--accent-400) 55%, transparent); }
    50%      { box-shadow: 0 0 0 9px rgba(240, 169, 43, 0);  border-color: #e0952a; }
}
/* Üstte soldan sağa akan ışık şeridi */
.sb-iade-serit {
    position: absolute; inset: 0 auto 0 -40%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: iadeParilti 3.4s var(--ease) infinite;
}
@keyframes iadeParilti { 0% { left: -45%; } 60%, 100% { left: 115%; } }
/* Onaylanmadan gönderilmeye çalışılırsa kutu yeniden vurgulanır. */
.sb-iade-uyari.vurgula { animation: iadeDikkat 1s var(--ease) 2; }
@media (prefers-reduced-motion: reduce) {
    .sb-iade-uyari, .sb-iade-uyari.vurgula { animation: none; }
    .sb-iade-serit { display: none; }
}

.sb-iade-ust { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.sb-iade-ikon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: #f0a92b; color: #422a02; box-shadow: 0 6px 14px -8px rgba(160, 108, 12, .9);
    animation: iadeSalla 2.4s var(--ease) 3; }
@keyframes iadeSalla {
    0%, 62%, 100% { transform: rotate(0); }
    68% { transform: rotate(-11deg); } 74% { transform: rotate(9deg); }
    80% { transform: rotate(-6deg); }  86% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .sb-iade-ikon { animation: none; } }
.sb-iade-uyari p { flex: 1 1 260px; font-size: .89rem; line-height: 1.6; color: #6f4a09; }
.sb-iade-uyari b { font-weight: 800; color: #563908; }
.sb-iade-geri { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-400) 55%, transparent);
    font-size: .82rem; font-weight: 700; color: #8a5c0d; white-space: nowrap; }
.sb-iade-geri:hover { border-color: #c98c12; color: #6f4a09; }

/* Zorunlu okundu onayı */
.sb-iade-onay {
    position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-400) 40%, transparent);
    font-size: .84rem; line-height: 1.55; color: var(--ink-soft); cursor: pointer; transition: all .2s var(--ease);
}
.sb-iade-onay:hover { border-color: #c98c12; }
.sb-iade-onay input { accent-color: #d18a12; width: 18px; height: 18px; margin-top: 1px; flex: none; }
.sb-iade-onay:has(input:checked) { background: var(--ok-bg); border-color: transparent; color: var(--ok-ink); }
.sb-iade-onay:has(input:checked) b { color: var(--ok-ink); }

/* Ücret muafiyeti seçimi */
.sb-muafiyet { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 16px 18px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--teal-500) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--teal-500) 26%, transparent); }
.sb-muafiyet .sb-radyo:has(input:checked) { border-color: var(--teal-600); background: var(--surface); }
.sb-muafiyet-not { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: .79rem; color: var(--ink-mute); }
.sb-kart-alanlar.gizli { display: none; }

.sb-onay { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: .85rem; line-height: 1.6; cursor: pointer; }
.sb-onay input { accent-color: var(--brand-600); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.btn-primary.sb-ode { background: linear-gradient(120deg, var(--brand-600), var(--teal-600)); }

/* Kart görseli */
.kart-sahne { perspective: 1200px; }
.kart { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.kart-sahne.arka .kart { transform: rotateY(180deg); }
.kart-on, .kart-arka {
    position: absolute; inset: 0; border-radius: 20px; padding: 22px; backface-visibility: hidden; overflow: hidden;
    background: linear-gradient(135deg, #16205a 0%, #2b40a8 45%, #0f8f80 100%);
    color: #fff; box-shadow: 0 18px 40px -18px rgba(16, 24, 64, .8);
}
.kart-on { display: flex; flex-direction: column; justify-content: space-between; }
.kart-arka { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 22px; }
.kart-parlama { position: absolute; inset: -60% -20% auto auto; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .3), transparent 70%); pointer-events: none; }
.kart-ust { display: flex; align-items: center; justify-content: space-between; }
.kart-cip { width: 44px; height: 32px; border-radius: 7px;
    background: linear-gradient(135deg, #f6d78a, #c9a13f 55%, #f6d78a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.kart-marka { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* Numara tek satırda kalmalı: kutu daraldıkça yazı da küçülür. */
.kart-no { font-size: clamp(.95rem, .55rem + 1.1vw, 1.3rem); font-weight: 700; letter-spacing: .06em;
    white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.kart-alt { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.kart-alt small, .kart-cvv small { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.kart-alt b { display: block; margin-top: 3px; font-size: .88rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kart-tarih { text-align: right; }
.kart-serit { display: block; height: 44px; margin: 0 -22px 6px; background: rgba(0, 0, 0, .62); }
.kart-cvv { align-self: flex-end; width: 120px; padding: 9px 12px; border-radius: 6px; background: #fff; color: #16205a; text-align: right; }
.kart-cvv b { font-size: .95rem; letter-spacing: .16em; }
.kart-arka p { font-size: .68rem; line-height: 1.5; opacity: .72; }

/* ---------- Adım 4: başvuru alındı ---------- */
.bt-bas {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px; align-items: center; padding: 26px 28px; border-radius: var(--r-lg);
    background: linear-gradient(120deg, #0f2f3f 0%, #113f52 46%, #0f8f80 100%); color: #fff;
    box-shadow: 0 22px 44px -26px rgba(15, 143, 128, .85);
}
@media (max-width: 860px) { .bt-bas { grid-template-columns: auto minmax(0, 1fr); } .bt-belge { grid-column: 1 / -1; } }
.bt-desen { position: absolute; inset: -60% -12% auto auto; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .2), transparent 70%); pointer-events: none; }
.bt-ikon { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.bt-bas-metin { position: relative; }
.bt-etiket { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: rgba(255, 255, 255, .72); }
.bt-bas h2 { margin-top: 6px; font-size: 1.42rem; color: #fff; }
.bt-bas p { margin-top: 7px; max-width: 68ch; font-size: .89rem; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.bt-bas p b { color: #fff; }
.bt-belge { position: relative; text-align: right; }
.bt-belge small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.bt-belge b { display: block; margin-top: 3px; font-size: 1.02rem; font-weight: 800; letter-spacing: .05em; }
.bt-form { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 16px; border-radius: var(--r-full);
    background: #fff; color: #0f5e57 !important; font-size: .82rem; font-weight: 800; white-space: nowrap;
    transition: transform .2s var(--ease); }
.bt-form:hover { transform: translateY(-1px); }

.bt-duzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
.bt-kart { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.bt-kart h3 { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
    padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bt-kart h3 .ikon { color: var(--brand-500); }
.bt-rozet, .bt-adet { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
    border-radius: var(--r-full); font-size: .7rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.bt-rozet { background: var(--ok-bg); color: var(--ok-ink); }
.bt-adet { background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--line); }

.bt-aday-ic { display: flex; align-items: center; gap: 14px; padding: 16px 0 4px; }
.bt-foto { width: 74px; height: 74px; flex: none; display: grid; place-items: center; border-radius: 20px; overflow: hidden;
    background: linear-gradient(140deg, var(--brand-600), var(--teal-600)); color: #fff; box-shadow: var(--sh-brand); }
.bt-foto img { width: 100%; height: 100%; object-fit: cover; }
.bt-aday-ad strong { display: block; font-size: 1.05rem; }
.bt-aday-ad span { display: block; margin-top: 2px; font-size: .82rem; letter-spacing: .08em; color: var(--ink-mute); }

.bt-liste { display: grid; margin-top: 8px; }
.bt-liste > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--line); }
.bt-liste > div:last-child { border-bottom: 0; }
.bt-liste dt { font-size: .81rem; color: var(--ink-mute); }
.bt-liste dd { font-size: .87rem; font-weight: 700; text-align: right; word-break: break-word; }
.bt-liste dd.kod { letter-spacing: .06em; }

.bt-tutar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 16px 0 4px; padding: 14px 16px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--brand-500) 7%, var(--surface)); }
.bt-tutar small { font-size: .78rem; font-weight: 700; color: var(--ink-mute); }
.bt-tutar b { font-size: 1.45rem; font-weight: 800; color: var(--brand-600); }

.bt-dersler { margin-top: 18px; }
.bt-tablo { width: 100%; border-collapse: collapse; margin-top: 6px; }
.bt-tablo th, .bt-tablo td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.bt-tablo th { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); }
.bt-tablo td { font-size: .88rem; }
.bt-tablo td.kod { font-size: .8rem; color: var(--ink-mute); letter-spacing: .04em; }
.bt-tablo td.sag, .bt-tablo th:last-child { text-align: right; }
.bt-tablo .bt-toplam td { border-bottom: 0; border-top: 2px solid var(--line-strong, var(--line));
    font-weight: 800; font-size: .95rem; }
.bt-tablo .bt-toplam td.sag { color: var(--brand-600); font-size: 1.08rem; }
@media (max-width: 620px) { .bt-tablo td.kod, .bt-tablo th:nth-child(3) { display: none; } }

.sb-bitis-duzen { display: grid; gap: 22px; align-items: start; margin-top: 22px; }

.sb-makbuz { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-makbuz-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.sb-makbuz-bas span { font-size: .76rem; color: var(--ink-mute); }
.sb-makbuz-bas strong { display: block; margin-top: 3px; font-size: 1.02rem; letter-spacing: .06em; }
.sb-makbuz-durum { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-full);
    background: var(--ok-bg); color: var(--ok-ink) !important; font-size: .74rem; font-weight: 800; }
.sb-makbuz-liste { margin: 14px 0 18px; display: grid; gap: 2px; }
.sb-makbuz-liste > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sb-makbuz-liste > div:last-child { border-bottom: 0; }
.sb-makbuz-liste dt { font-size: .82rem; color: var(--ink-mute); }
.sb-makbuz-liste dd { font-size: .86rem; font-weight: 700; text-align: right; }
.sb-makbuz-liste .tutar dd { font-size: 1.05rem; color: var(--brand-600); }

.sb-bitis-dersler { margin-top: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-bitis-dersler h3 { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; margin-bottom: 12px; }
.sb-bitis-dersler ul { display: grid; gap: 9px; list-style: none; padding: 0; }
.sb-bitis-dersler li { display: flex; justify-content: space-between; gap: 14px; font-size: .87rem; }
.sb-bitis-dersler li span { color: var(--ink-soft); }
.sb-bitis-dersler li b { flex: none; }
.sb-bitis-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sb-bitis-not { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .8rem; color: var(--ink-mute); }
.sb-bitis-not a { color: var(--brand-500); font-weight: 700; }

/* ---------- Adım 0: giriş sayfası ---------- */
.sg-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
@media (max-width: 1020px) { .sg-duzen { grid-template-columns: 1fr; } }

.sg-durum {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px; align-items: center; padding: 26px 28px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
@media (max-width: 780px) { .sg-durum { grid-template-columns: auto minmax(0, 1fr); } .sg-durum-eylem { grid-column: 1 / -1; } }
.sg-durum::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand-500); }
.sg-durum.acik::before { background: linear-gradient(180deg, var(--brand-600), var(--teal-500)); }
.sg-durum.bekliyor::before { background: var(--accent-400); }
.sg-durum.kapali::before { background: var(--rose-500); }
.sg-durum-ikon { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 20px; }
.sg-durum.acik .sg-durum-ikon { background: color-mix(in srgb, var(--brand-500) 12%, var(--surface)); color: var(--brand-600); }
.sg-durum.bekliyor .sg-durum-ikon { background: color-mix(in srgb, var(--accent-400) 22%, var(--surface)); color: #a9711a; }
.sg-durum.kapali .sg-durum-ikon { background: var(--rose-100); color: var(--rose-500); }
.sg-durum-metin strong { display: block; font-size: 1.15rem; }
.sg-durum-metin p { margin-top: 6px; font-size: .89rem; line-height: 1.65; color: var(--ink-mute); }
.sg-durum-metin b { color: var(--ink); }
.sg-son-tarih { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 13px;
    border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line);
    font-size: .8rem; color: var(--ink-mute); }
.sg-son-tarih b { color: var(--ink); font-weight: 700; }
.sg-basla { display: inline-flex; align-items: center; gap: 9px; width: auto !important; padding: 14px 26px; font-size: .95rem; white-space: nowrap; }
.sg-basla.kilitli { background: var(--surface-3); color: var(--ink-mute); box-shadow: none; cursor: not-allowed; }

.sg-surec { margin-top: 20px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sg-surec h2 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; }
.sg-surec ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; padding: 0; list-style: none; }
.sg-surec li { position: relative; padding: 18px 16px 16px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line); }
.sg-surec-no { position: absolute; right: 12px; top: 10px; font-size: 1.6rem; font-weight: 800; line-height: 1;
    color: color-mix(in srgb, var(--brand-500) 20%, transparent); }
.sg-surec-ikon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 11px; border-radius: 13px;
    background: var(--surface); border: 1px solid var(--line); color: var(--brand-600); }
.sg-surec li b { display: block; font-size: .92rem; }
.sg-surec li small { display: block; margin-top: 5px; font-size: .79rem; line-height: 1.55; color: var(--ink-mute); }

.sb-bilgi { margin-top: 20px; }
.sg-yan { display: grid; gap: 16px; }
.sg-takvim, .sg-ucret, .sg-yardim { padding: 22px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sg-takvim h3, .sg-yardim h3 { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; }
.sg-takvim ol { position: relative; margin-top: 16px; padding: 0 0 0 24px; list-style: none; display: grid; gap: 18px; }
.sg-takvim ol::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.sg-takvim li { position: relative; }
.sgt-nokta { position: absolute; left: -24px; top: 3px; width: 14px; height: 14px; display: grid; place-items: center;
    border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: #fff; }
.sg-takvim li.gecti .sgt-nokta { background: var(--ok-ink); border-color: var(--ok-ink); }
.sg-takvim li small { display: block; font-size: .77rem; color: var(--ink-mute); }
.sg-takvim li b { display: block; margin-top: 2px; font-size: .88rem; }
.sg-takvim li em { font-size: .75rem; font-style: normal; color: var(--ink-mute); }
.sg-takvim li.gecti b { color: var(--ink-mute); }

.sg-ucret { text-align: center; background: linear-gradient(140deg,
    color-mix(in srgb, var(--brand-500) 9%, var(--surface)), var(--surface)); }
.sg-ucret small { font-size: .78rem; font-weight: 700; color: var(--ink-mute); }
.sg-ucret b { display: block; margin: 6px 0 8px; font-size: 1.7rem; font-weight: 800; color: var(--brand-600); }
.sg-ucret p { font-size: .78rem; line-height: 1.55; color: var(--ink-mute); }

.sg-yardim p { margin-top: 8px; font-size: .83rem; line-height: 1.6; color: var(--ink-mute); }
.sg-yardim-eylem { display: grid; gap: 8px; margin-top: 14px; }
.sg-yardim-eylem a { display: inline-flex; align-items: center; gap: 8px; font-size: .83rem; font-weight: 700; color: var(--brand-500); }
.sg-yardim-eylem a:hover { color: var(--brand-600); }

.sb-geri-baglanti { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    font-size: .84rem; font-weight: 700; color: var(--ink-mute); }
.sb-geri-baglanti:hover { color: var(--brand-600); }

/* ---------- Takvim dışı görünüm ---------- */
.sb-kapali-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .sb-kapali-duzen { grid-template-columns: 1fr; } }
.sb-bilgi { padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-bilgi h2 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin-bottom: 14px; }
.sb-bilgi p { margin-top: 12px; font-size: .92rem; line-height: 1.8; color: var(--ink-soft); text-align: justify; text-align-last: left; }
.sb-bilgi p b { color: var(--ink); }
.sb-bilgi-not { display: flex; align-items: center; gap: 9px; margin-top: 18px !important; padding-top: 16px;
    border-top: 1px solid var(--line); font-size: .85rem !important; color: var(--ink-mute) !important; text-align: left !important; }
.sb-uyari { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 16px 20px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--accent-400) 16%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent-400) 40%, transparent); }
.sb-uyari .ikon { flex: none; color: #a9711a; }
.sb-uyari p { font-size: .88rem; line-height: 1.6; }
.sb-uyari.bekliyor { background: color-mix(in srgb, var(--brand-500) 9%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-500) 26%, transparent); }
.sb-uyari.bekliyor .ikon { color: var(--brand-600); }

.sb-kapali-yan { display: grid; gap: 16px; }
.sb-yan-kutu { padding: 24px; text-align: center; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-yan-ikon { width: 62px; height: 62px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--brand-500) 10%, var(--surface)); color: var(--brand-600); }
.sb-yan-kutu h3 { font-size: 1.02rem; }
.sb-yan-kutu p { margin-top: 8px; font-size: .84rem; line-height: 1.65; color: var(--ink-mute); }
.sb-yan-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.sb-yan-eylem .btn-secondary { width: auto; padding: 9px 15px; font-size: .82rem; }

.sb-takvim { display: grid; gap: 2px; list-style: none; padding: 18px 20px; margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sb-takvim li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sb-takvim li:last-child { border-bottom: 0; }
.sb-takvim span { font-size: .8rem; color: var(--ink-mute); }
.sb-takvim b { font-size: .85rem; font-weight: 700; }
.sb-takvim li.vurgu b { color: var(--brand-600); }
.sb-yan-metin p { font-size: .85rem; line-height: 1.7; color: var(--ink-mute); margin-top: 10px; }
.sb-yan-metin + .sb-takvim { margin-top: 16px; }

@media print {
    .topbar, .site-header, .site-footer, .sb-bas, .sb-adimlar, .sb-bitis-eylem, .to-top,
    .sb-bitis-dersler, .sb-ozet, [data-makbuz-yazdir] { display: none !important; }
    .sb-makbuz { border: 0; box-shadow: none; }
}

/* Kapalı dönem görünümü */
.sb-kapali { max-width: 720px; margin: 0 auto; padding: 44px 34px; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-kapali-ikon { width: 82px; height: 82px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%;
    background: var(--rose-100); color: var(--rose-500); }
.sb-kapali h2 { font-size: 1.4rem; }
.sb-kapali p { margin-top: 12px; font-size: .92rem; line-height: 1.75; color: var(--ink-mute); }
.sb-kapali-eylem { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* Başvuru özeti / önizleme */
.sb-ozet { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-kapali + .sb-ozet { max-width: 720px; margin: 22px auto 0; }
.sb-ozet-bas { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sb-ozet-bas h3 { margin-top: 10px; font-size: 1.08rem; }
.sb-ozet-bas small { display: block; margin-top: 4px; font-size: .76rem; color: var(--ink-mute); }
.sb-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-full);
    background: var(--ok-bg); color: var(--ok-ink); font-size: .74rem; font-weight: 700; }
.sb-ozet-kimlik { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.sb-ozet-kimlik .sb-foto { width: 72px; height: 72px; border-radius: 20px; }
.sb-ozet-kimlik strong { display: block; font-size: .95rem; }
.sb-ozet-kimlik small { font-size: .8rem; color: var(--ink-mute); letter-spacing: .04em; }
.sb-ozet-liste > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sb-ozet-liste > div:last-child { border-bottom: 0; }
.sb-ozet-liste dt { font-size: .82rem; font-weight: 600; color: var(--ink-mute); }
.sb-ozet-liste dd { font-size: .86rem; font-weight: 700; text-align: right; word-break: break-word; }
.sb-ozet-etiketler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.sb-ozet-etiketler span { padding: 5px 11px; border-radius: var(--r-full); background: var(--surface-2);
    border: 1px solid var(--line); font-size: .76rem; font-weight: 700; }
.sb-ozet-belge { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sb-belge-onizleme { position: relative; display: block; margin-top: 10px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.sb-belge-onizleme img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.sb-belge-onizleme span { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-full); background: rgba(9, 12, 32, .72); color: #fff; font-size: .75rem; font-weight: 700; }
.sb-belge-pdf { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--line); color: inherit; transition: border-color .2s var(--ease); }
.sb-belge-pdf:hover { border-color: var(--brand-500); }
.sb-belge-pdf strong { display: block; font-size: .88rem; }
.sb-belge-pdf small { display: block; font-size: .76rem; color: var(--ink-mute); }
.sb-belge-pdf span { flex: 1 1 auto; }
.sb-belge-yok { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; color: var(--rose-500); }

.sb-yan { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.sb-yan h3 { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; }
.sb-adim { margin-top: 14px; padding-left: 20px; display: grid; gap: 9px; }
.sb-adim li { font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }
.sb-yan-not { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .79rem; line-height: 1.6; color: var(--ink-mute); }
.sb-yan-not a { color: var(--brand-500); font-weight: 700; }

/* ---------- 22d. Rozet paylaşımı ---------- */
.paylas-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
@media (max-width: 980px) { .paylas-duzen { grid-template-columns: 1fr; } }
.paylas-panel { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.paylas-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.paylas-lead { margin-top: 6px; font-size: .86rem; line-height: 1.6; color: var(--ink-mute); }

.paylas-agi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.pa-dugme { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: var(--r-sm);
    font-size: .86rem; font-weight: 700; color: #fff; transition: transform .18s var(--ease), filter .18s var(--ease); }
.pa-dugme:hover { transform: translateY(-2px); filter: brightness(1.07); }
.pa-dugme.linkedin  { background: #0a66c2; }
.pa-dugme.x         { background: #111827; }
.pa-dugme.facebook  { background: #1877f2; }
.pa-dugme.whatsapp  { background: #22a45d; }
.pa-dugme.instagram { background: linear-gradient(120deg, #f09433, #dc2743 45%, #bc1888); }
.pa-dugme.telegram  { background: #229ed9; }
.pa-dugme.eposta    { background: #5b6478; }
.pa-dugme.diger     { background: var(--brand-600); border: 0; cursor: pointer; font-family: inherit; }

.paylas-baglanti { margin-top: 20px; }
.paylas-baglanti label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 700; color: var(--ink-mute); }
.pb-satir { display: flex; gap: 8px; }
.pb-satir input { flex: 1 1 auto; min-width: 0; padding: 11px 13px; font: inherit; font-size: .82rem; color: var(--ink-mute);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.pb-satir button { display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: inherit; cursor: pointer; }
.pb-satir button:hover { border-color: var(--brand-500); color: var(--brand-600); }
.pb-satir button.kopyalandi { background: var(--ok-bg); border-color: transparent; color: var(--ok-ink); }

.pa-linkedin-sertifika { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px;
    border-radius: var(--r-md); background: color-mix(in srgb, #0a66c2 8%, var(--surface)); border: 1px solid color-mix(in srgb, #0a66c2 24%, var(--line));
    color: inherit; transition: border-color .2s var(--ease); }
.pa-linkedin-sertifika:hover { border-color: #0a66c2; }
.pa-linkedin-sertifika > .ikon:first-child { color: #0a66c2; flex-shrink: 0; }
.pa-linkedin-sertifika span { flex: 1 1 auto; }
.pa-linkedin-sertifika strong { display: block; font-size: .88rem; }
.pa-linkedin-sertifika small { display: block; margin-top: 2px; font-size: .76rem; color: var(--ink-mute); }

.paylas-indir { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.paylas-indir a { display: inline-flex; align-items: center; gap: 7px; font-size: .81rem; font-weight: 700; color: var(--brand-500); }
.paylas-indir a:hover { color: var(--brand-600); }
.paylas-not { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: .78rem; line-height: 1.6; color: var(--ink-mute); }
.paylas-not .ikon { flex-shrink: 0; margin-top: 2px; }

.dogrula-serit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    margin-top: 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.dogrula-serit strong { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--ok-ink); }
.dogrula-serit p { margin-top: 7px; max-width: 76ch; font-size: .86rem; line-height: 1.65; color: var(--ink-mute); }

/* ---------- 22e. Rozet doğrulama (dogrula.php) ve zincir belgesi ---------- */
.dgr-durum { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-lg); margin-bottom: 22px;
    border: 1px solid var(--line); background: var(--surface); }
.dgr-durum .dgr-ikon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.dgr-durum strong { display: block; font-size: 1.15rem; }
.dgr-durum p { margin-top: 5px; font-size: .9rem; line-height: 1.6; color: var(--ink-mute); }
.dgr-durum.gecerli { border-color: color-mix(in srgb, var(--ok-ink) 35%, var(--line)); }
.dgr-durum.gecerli .dgr-ikon { background: var(--ok-bg); color: var(--ok-ink); }
.dgr-durum.gecerli strong { color: var(--ok-ink); }
.dgr-durum.iptal, .dgr-durum.bozuk, .dgr-durum.bulunamadi { border-color: color-mix(in srgb, var(--err-ink) 35%, var(--line)); }
.dgr-durum.iptal .dgr-ikon, .dgr-durum.bozuk .dgr-ikon, .dgr-durum.bulunamadi .dgr-ikon { background: var(--err-bg); color: var(--err-ink); }
.dgr-durum.iptal strong, .dgr-durum.bozuk strong, .dgr-durum.bulunamadi strong { color: var(--err-ink); }
.dgr-durum.zincirde_yok .dgr-ikon { background: var(--warn-bg); color: var(--warn-ink); }
.dgr-ara { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.dgr-ara input { flex: 1 1 240px; min-width: 0; padding: 12px 14px; font: inherit; font-family: ui-monospace, Consolas, monospace;
    text-transform: uppercase; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); }
.dgr-ara button { width: auto; }
.dgr-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 1080px) { .dgr-duzen { grid-template-columns: 1fr; } }
.dgr-zincir { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.dgr-zincir h2 { display: flex; align-items: center; gap: 9px; font-size: 1.08rem; margin-bottom: 12px; }
.dgr-adimlar { display: grid; gap: 9px; margin-bottom: 16px; }
.dgr-adimlar li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; line-height: 1.5; }
.dgr-adimlar li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
    font-size: .72rem; font-weight: 800; margin-top: 1px; }
.dgr-adimlar li.ok i { background: var(--ok-bg); color: var(--ok-ink); }
.dgr-adimlar li.hata i { background: var(--err-bg); color: var(--err-ink); }
.dgr-kayit { display: grid; gap: 10px; }
.dgr-kayit div { display: grid; gap: 2px; }
.dgr-kayit dt { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.dgr-kayit dd { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: .76rem; word-break: break-all; color: var(--ink-soft); }
.dgr-eylem { display: grid; gap: 8px; margin-top: 16px; }
.dgr-eylem a { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--brand-500); }
.dgr-ham { margin-top: 14px; }
.dgr-ham summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.dgr-ham pre { margin-top: 8px; max-height: 320px; overflow: auto; padding: 12px; font-size: .72rem; line-height: 1.5;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-all; }
.rzb-sar { max-width: 1100px; }
@media print {
    body.rzb-yazdir > *:not(main), body.rzb-yazdir main > *:not(.rzb-yazdir-alan), .rzb-yazdir-gizle { display: none !important; }
    body.rzb-yazdir { background: #fff !important; }
    .rzb-yazdir-alan { padding: 0 !important; margin: 0 !important; }
}

.rzp-baglanti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 18px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.rzp-bilgi { display: flex; align-items: center; gap: 12px; }
.rzp-bilgi strong { display: block; font-size: .95rem; }
.rzp-bilgi small { font-size: .78rem; color: var(--ink-mute); }
.rzp-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--ok-ink); box-shadow: 0 0 0 4px var(--ok-bg); }
.rzp-eylem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rzp-eylem .btn-secondary, .rzp-eylem .btn-cikis { width: auto; padding: 10px 16px; font-size: .85rem; }

.rzp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; align-items: end; }
.rzp-alan { display: grid; gap: 7px; }
.rzp-alan > span { font-size: .82rem; font-weight: 700; color: var(--ink-mute); }
.rzp-alan select, .rzp-alan input {
    width: 100%; padding: 12px 14px; font: inherit; font-size: .9rem; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .2s var(--ease);
}
.rzp-alan select:focus, .rzp-alan input:focus { outline: none; border-color: var(--brand-500); }
.rzp-sifre { position: relative; display: block; }
.rzp-sifre input { padding-right: 46px; }
.rzp-sifre button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
    display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-mute); cursor: pointer; }
.rzp-sifre button:hover { color: var(--brand-600); background: var(--surface-2); }
.rzp-gonder { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rzp-gonder .btn-primary { width: auto; flex: 0 0 auto; padding: 13px 26px; }
.rzp-gonder small { flex: 1 1 260px; font-size: .78rem; line-height: 1.55; color: var(--ink-mute); }
.rzp-durum { margin-top: 16px; padding: 11px 14px; border-radius: var(--r-sm); font-size: .84rem; font-weight: 600; }
.rzp-durum.iyi  { background: var(--ok-bg); color: var(--ok-ink); }
.rzp-durum.kotu { background: var(--rose-100); color: var(--rose-500); }

.profil-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.po-kutu { padding: 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-align: center; }
.po-kutu b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1;
    background: linear-gradient(120deg, var(--brand-600), var(--teal-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.po-kutu small { font-size: .78rem; font-weight: 700; color: var(--ink-mute); }

/* ---------- 22. Alt bilgi ---------- */
footer { margin-top: clamp(48px, 6vw, 88px); padding: clamp(40px, 5vw, 64px) 0 26px; background: var(--brand-900); color: #c8cfef; }
.footer-ust {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand .brand-copy strong { color: #fff; }
.footer-brand .brand-copy small { color: rgba(255, 255, 255, .55); }
.footer-slogan { flex: 1; min-width: 260px; color: rgba(255, 255, 255, .68); font-size: .92rem; max-width: 52ch; }

/* ---------- Bağlantı sütunları ---------- */
.footer-sutunlar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px;
    padding: 32px 0 30px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 820px) { .footer-sutunlar { grid-template-columns: 1fr; gap: 26px; } }

.footer-sutun h4 {
    margin-bottom: 16px; font-size: .76rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.footer-sutun ul { list-style: none; display: grid; gap: 12px; }
.footer-sutun a {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .82);
    transition: color .2s var(--ease);
}
.footer-sutun a:hover { color: var(--accent-400); }
.footer-sutun a .ikon { flex: none; opacity: .85; }

.footer-iletisim li { font-size: .92rem; color: rgba(255, 255, 255, .82); }
.footer-iletisim .fi-adres {
    display: flex; align-items: flex-start; gap: 9px; line-height: 1.65;
    color: rgba(255, 255, 255, .62);
}
.footer-iletisim .fi-adres .ikon { flex: none; margin-top: 3px; opacity: .7; }

.copyright { padding-top: 22px; font-size: .82rem; color: rgba(255, 255, 255, .5); text-align: center; }

/* ---------- 23. Yardımcılar + hareket ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hidden { display: none !important; }
.mt-lg { margin-top: 34px; }
.center { text-align: center; }
.center .st { margin-inline: auto; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }

.to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: var(--brand-600); color: #fff; box-shadow: var(--sh-brand);
    opacity: 0; pointer-events: none; transform: translateY(14px); transition: all .28s var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--brand-800); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Ders değerlendirme (ders.php) — 5 yıldızlı puanlama ve toplam puan özeti
   ========================================================================== */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.deger-panel > h2 { display: flex; align-items: center; gap: 10px; }
.deger-panel > h2 .ikon { color: #f0a92b; }

.deger-tesekkur {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    padding: 9px 16px; border-radius: var(--r-full);
    background: var(--ok-bg); color: var(--ok-ink); font-size: .85rem; font-weight: 700;
}
.deger-tesekkur .ikon { flex: none; }

/* ---------- Toplam puan özeti ---------- */
.deger-ozet {
    margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 168px 1fr; gap: 26px; align-items: center;
}
.do-skor { text-align: center; }
.do-skor > b { display: block; font-size: 3.1rem; font-weight: 800; line-height: 1; color: var(--ink); }
.do-skor > small { display: block; margin-top: 6px; font-size: .8rem; color: var(--ink-soft); }
.do-yildiz { display: flex; justify-content: center; gap: 3px; margin-top: 8px; line-height: 0; }
.do-yildiz span { color: var(--line); }
.do-yildiz span.dolu { color: #f5a623; }
.do-yildiz span.dolu .ikon { fill: #ffc247; stroke: #e08e10; }

.do-dagilim { display: grid; gap: 8px; }
.do-satir { display: grid; grid-template-columns: 42px 1fr 34px; gap: 12px; align-items: center; }
.do-etiket {
    display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end;
    font-size: .82rem; font-weight: 700; color: var(--ink-soft);
}
.do-etiket .ikon { color: #f5a623; fill: #ffc247; stroke: #e08e10; }
.do-satir i { display: block; height: 9px; border-radius: 99px; background: var(--bg-soft, #eef1f8); overflow: hidden; }
.do-satir i em { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffc247, #f0a92b); }
.do-adet { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

.do-bos {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: var(--r-md); background: var(--bg-soft, #f3f5fb);
}
.do-bos .ikon { color: #f0a92b; flex: none; }
.do-bos strong { display: block; font-size: .95rem; }
.do-bos small { color: var(--ink-soft); font-size: .84rem; }

@media (max-width: 620px) {
    .deger-ozet { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   İçerik sayfası kahraman alanındaki değerlendirme kartı (icerik.php)
   ========================================================================== */

.deger-kart {
    position: relative; overflow: hidden; width: 320px; max-width: 100%;
    padding: 24px 24px 22px; text-align: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.dgk-isik {
    position: absolute; inset: -60% 40% auto -30%; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c, #2b40a8) 18%, transparent), transparent 70%);
    pointer-events: none;
}
.deger-kart > * { position: relative; z-index: 1; }

.deger-kart h3 {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 1.02rem; font-weight: 800; color: var(--ink);
}
.deger-kart h3 .ikon { color: #f0a92b; }
.dgk-giris { margin-top: 6px; font-size: .85rem; color: var(--ink-soft); }

.dgk-bildirim {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-bottom: 14px; padding: 8px 12px; border-radius: var(--r-full);
    font-size: .8rem; font-weight: 700; background: var(--surface-3); color: var(--ink-soft);
}
.dgk-bildirim.ok  { background: var(--ok-bg);  color: var(--ok-ink); }
.dgk-bildirim.err { background: var(--err-bg); color: var(--err-ink); }

.dgk-yildizlar {
    display: flex; justify-content: center; align-items: center; gap: 4px;
    border: 0; padding: 0; margin: 14px 0 0;
}
.dgk-yildizlar .dgy {
    position: relative; display: grid; place-items: center; cursor: pointer; line-height: 0;
    color: var(--line-strong); transition: transform .2s var(--ease), color .2s var(--ease);
}
.dgk-yildizlar .dgy input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dgk-yildizlar .dgy .ikon { width: 34px; height: 34px; stroke-width: 1.5; }
.dgk-yildizlar .dgy.dolu { color: #f5a623; }
.dgk-yildizlar .dgy.dolu .ikon { fill: #ffc247; stroke: #e08e10; }
.dgk-yildizlar .dgy:hover { transform: translateY(-3px) scale(1.08); }
.dgk-yildizlar .dgy input:focus-visible + .ikon {
    outline: 2px solid var(--brand-600); outline-offset: 4px; border-radius: 6px;
}
.dgk-yildizlar.pasif .dgy { cursor: default; }
.dgk-yildizlar.pasif .dgy:hover { transform: none; }

.dgk-etiket {
    margin: 10px 0 14px; min-height: 20px;
    font-size: .86rem; font-weight: 700; color: var(--ink);
}
.dgk-gonder {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--r-md); cursor: pointer;
    background: var(--brand-700, var(--brand-600)); color: #fff;
    font-size: .89rem; font-weight: 700; box-shadow: var(--sh-brand);
    transition: background .22s var(--ease), transform .22s var(--ease);
}
.dgk-gonder:hover { background: var(--brand-800); transform: translateY(-1px); }
.dgk-not { margin-top: 10px; font-size: .75rem; line-height: 1.5; color: var(--ink-mute); }

.dgk-ozet {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left;
}
.dgk-ozet > b { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ink); }
.dgk-mini { display: flex; gap: 2px; line-height: 0; }
.dgk-mini i { color: var(--line-strong); }
.dgk-mini i.dolu { color: #f5a623; }
.dgk-mini i.dolu .ikon { fill: #ffc247; stroke: #e08e10; }
.dgk-ozet small { display: block; margin-top: 5px; font-size: .76rem; color: var(--ink-soft); }

/* Kahraman alanındaki ders kodu rozeti */
.chip.kod-chip { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 800; }

/* ---------- Modül altındaki bölüm sonu değerlendirmesi butonu ---------- */
.bolum-testi {
    display: flex; align-items: center; gap: 16px; width: 100%;
    margin-top: 18px; padding: 18px 22px; border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--brand-800), var(--brand-600));
    border: 1px solid color-mix(in srgb, var(--brand-500) 45%, transparent);
    box-shadow: 0 10px 24px -14px rgba(16, 26, 77, .9);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.bolum-testi:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(16, 26, 77, .95); }
.bolum-testi.basarili {
    background: linear-gradient(120deg, var(--teal-600), var(--teal-500));
    border-color: color-mix(in srgb, var(--teal-500) 55%, transparent);
}
.bolum-testi.tekrar {
    background: linear-gradient(120deg, #a05a12, #d98324);
    border-color: rgba(217, 131, 36, .55);
}
.bolum-testi.devam {
    background: linear-gradient(120deg, #7a3ea8, #a25fd0);
    border-color: rgba(162, 95, 208, .55);
}
/* Modüldeki etkinlikler bitmeden açılmaz */
.bolum-testi.kilitli {
    background: var(--err-bg); border: 1px dashed color-mix(in srgb, var(--err-ink) 38%, transparent);
    box-shadow: none; cursor: not-allowed;
}
.bolum-testi.kilitli:hover { transform: none; box-shadow: none; }
.bolum-testi.kilitli .bt-ikon {
    background: color-mix(in srgb, var(--err-ink) 12%, transparent);
    border-color: color-mix(in srgb, var(--err-ink) 26%, transparent); color: var(--err-ink);
}
.bolum-testi.kilitli .bt-metin strong { color: var(--err-ink); }
.bolum-testi.kilitli .bt-metin small { color: color-mix(in srgb, var(--err-ink) 78%, var(--ink-soft)); }
.bolum-testi.kilitli .bt-ok {
    background: color-mix(in srgb, var(--err-ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--err-ink) 28%, transparent); color: var(--err-ink);
}

.bt-ikon {
    flex: none; width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .24);
}
.bt-metin { flex: 1; min-width: 0; }
/* Portalın genel strong rengi koyu; bu koyu zeminde açık renk zorunlu. */
.bt-metin strong { display: block; font-size: 1.02rem; font-weight: 800; color: #fff; letter-spacing: .01em; }
.bt-metin small { display: block; margin-top: 3px; font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }

.bt-ok {
    flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
    border-radius: var(--r-full); background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: .85rem; font-weight: 700;
    transition: background .22s var(--ease);
}
.bolum-testi:hover .bt-ok { background: rgba(255, 255, 255, .26); }

@media (max-width: 620px) {
    .bolum-testi { flex-wrap: wrap; padding: 16px 18px; }
    .bt-ok { width: 100%; justify-content: center; }
}

/* ---------- Modüller üstündeki bilgilendirme metni ---------- */
.icerik-bilgi {
    display: flex; gap: 18px; align-items: flex-start;
    margin-bottom: 26px; padding: 22px 26px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--c, var(--brand-600));
    border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.ib-ikon {
    flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: color-mix(in srgb, var(--c, #2b40a8) 12%, var(--surface));
    color: var(--c, var(--brand-600));
}
.ib-metin p { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.ib-metin p + p { margin-top: 12px; }
.ib-metin b { font-weight: 800; color: #96263f; }

@media (max-width: 620px) {
    .icerik-bilgi { padding: 18px; gap: 14px; }
    .ib-ikon { width: 36px; height: 36px; }
}

@media (max-width: 900px) {
    .deger-kart { width: 100%; }
}

/* ==========================================================================
   Ders kodu rozeti — kartın sağ üst köşesinde ATA + OBS ders numarası
   ========================================================================== */

.dk-kod {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
    border-radius: var(--r-full); background: rgba(9, 12, 32, .62); color: #fff;
    font-size: .71rem; font-weight: 800; letter-spacing: .05em;
    backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .28);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.enroll-cover .dk-kod { top: 14px; right: 14px; }

/* Katalog kartında rozet sütununun ilk öğesi olarak görünür */
.dk-rozetler span.kod {
    background: rgba(9, 12, 32, .62) !important; color: #fff !important;
    border-color: rgba(255, 255, 255, .28) !important;
    letter-spacing: .05em; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(6px); box-shadow: none !important;
}

/* AKTS madalyonu — kapak köşesinde yuvarlak kredi rozeti */
.dk-kapak .dk-rozetler span.akts {
    width: 48px; height: 48px; padding: 0; border-radius: 50%;
    display: grid; place-content: center; line-height: 1; white-space: nowrap;
    background: rgba(255, 255, 255, .96);
    border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
    box-shadow: 0 5px 16px rgba(16, 26, 77, .24),
                inset 0 0 0 3px color-mix(in srgb, var(--c) 13%, transparent);
    color: color-mix(in srgb, var(--c) 84%, var(--ink));
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dk-kapak .dk-rozetler span.akts b {
    display: block; text-align: center; font-size: 1.05rem; font-weight: 900;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.dk-kapak .dk-rozetler span.akts small {
    display: block; text-align: center; margin-top: 1px;
    font-size: .5rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .68;
}
.ders-karti:hover .dk-kapak .dk-rozetler span.akts {
    transform: scale(1.07);
    box-shadow: 0 8px 20px rgba(16, 26, 77, .28),
                inset 0 0 0 3px color-mix(in srgb, var(--c) 26%, transparent);
}


/* ==========================================================================
   Kaydı kaldır butonu
   ========================================================================== */

.btn-tehlike {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: var(--r-md); cursor: pointer;
    background: transparent; color: #c33d3d; border: 1px solid color-mix(in srgb, #c33d3d 32%, transparent);
    font-size: .88rem; font-weight: 700; transition: all .22s var(--ease);
}
.btn-tehlike:hover { background: color-mix(in srgb, #c33d3d 9%, transparent); border-color: #c33d3d; }
.btn-tehlike .ikon { flex: none; }
/* İçerik sayfasındaki dersten ayrılma şeridi */
.ders-ayril {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-top: 34px; padding: 20px 24px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.ders-ayril strong { display: flex; align-items: center; gap: 9px; font-size: 1rem; }
.ders-ayril strong .ikon { color: #c33d3d; flex: none; }
.ders-ayril small { display: block; margin-top: 5px; font-size: .86rem; color: var(--ink-soft); }
.ders-ayril .btn-tehlike { width: auto; padding-inline: 22px; }

/* --------------------------------------------------------------------------
   SweetAlert onay kutusu
   Kütüphane buton biçimini Bootstrap'tan (.btn, .btn-primary) bekliyor; portalda
   Bootstrap yok. Bu yüzden kutu ve butonlar buradan baştan biçimlendirilir.
   Konumlandırma da sabit -200px yerine gerçek yüksekliğe göre ortalanır.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Pencerelerde kaydırma çubuğu (panel pencereleri, onay kutuları, tanıtım penceresi)
   Köşeleri yuvarlak bir kutu kendi içinde kayınca tarayıcının köşeli çubuğu
   yuvarlak köşeye taşar. Çubuk inceltilir, ucu yuvarlanır ve üstten-alttan
   köşe payı kadar içeri çekilir; arkadaki sayfa da pencereyle birlikte kaymaz.
   -------------------------------------------------------------------------- */
.pn-ort > div, .pn-pencere-govde, .sweet-alert, .ep-govde { overscroll-behavior: contain; }
.pn-ort > div::-webkit-scrollbar, .pn-pencere-govde::-webkit-scrollbar,
.sweet-alert::-webkit-scrollbar, .ep-govde::-webkit-scrollbar { width: 12px; }
.pn-ort > div::-webkit-scrollbar-track, .pn-pencere-govde::-webkit-scrollbar-track,
.sweet-alert::-webkit-scrollbar-track, .ep-govde::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
/* Kutunun kendisi kayıyorsa (başlığı/altlığı sabit olmayan pencere) pay köşe yarıçapı kadardır. */
.pn-ort > div:not(.pn-icerik-kutu)::-webkit-scrollbar-track, .sweet-alert::-webkit-scrollbar-track { margin: 20px 0; }
.pn-ort > div::-webkit-scrollbar-thumb, .pn-pencere-govde::-webkit-scrollbar-thumb,
.sweet-alert::-webkit-scrollbar-thumb, .ep-govde::-webkit-scrollbar-thumb {
    background: var(--line-strong); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
.pn-ort > div::-webkit-scrollbar-thumb:hover, .pn-pencere-govde::-webkit-scrollbar-thumb:hover,
.sweet-alert::-webkit-scrollbar-thumb:hover, .ep-govde::-webkit-scrollbar-thumb:hover { background-color: var(--ink-mute); }
/* Firefox ::-webkit-scrollbar tanımaz; ince çubuğu standart özellikle alır. */
@supports not selector(::-webkit-scrollbar) {
    .pn-ort > div, .pn-pencere-govde, .sweet-alert, .ep-govde { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
}

.sweet-overlay { background-color: rgba(9, 12, 32, .55) !important; backdrop-filter: blur(3px); z-index: 1700; }

.sweet-alert {
    top: 50% !important; left: 50% !important; margin: 0 !important;
    transform: translate(-50%, -50%);
    width: min(468px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px); overflow-y: auto;
    padding: 30px 32px 26px !important;
    background: var(--surface) !important; color: var(--ink);
    border-radius: var(--r-lg) !important; box-shadow: var(--sh-3);
    font-family: inherit; text-align: center;
}
@keyframes mkSwalIn {
    from { opacity: 0; transform: translate(-50%, -47%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.sweet-alert.showSweetAlert { animation: mkSwalIn .24s var(--ease) both !important; }
.sweet-alert.hideSweetAlert { animation: none !important; opacity: 0; }

.sweet-alert h2 {
    margin: 16px 0 10px !important; padding: 0 !important;
    font-size: 1.42rem; font-weight: 800; line-height: 1.3; color: var(--ink);
}
.sweet-alert p {
    margin: 0 !important; font-size: .95rem; line-height: 1.62;
    color: var(--ink-soft); font-weight: 500;
}

/* İkon: kütüphanenin çizimi korunur, yalnızca boşluk ve renk hizalanır */
.sweet-alert .sa-icon { margin: 4px auto 0 !important; }
.sweet-alert .sa-icon.sa-warning { border-color: #e5a020 !important; }
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot { background-color: #e5a020 !important; }

.sweet-alert .sa-button-container {
    display: flex; justify-content: center; align-items: center; gap: 12px;
    margin-top: 26px; flex-wrap: wrap;
}
.sweet-alert .sa-confirm-button-container { display: inline-flex; position: relative; margin: 0; }

.sweet-alert button {
    font-family: inherit; font-size: .92rem; font-weight: 700; line-height: 1;
    padding: 13px 24px !important; border-radius: var(--r-md) !important;
    border: 1px solid transparent !important; cursor: pointer;
    box-shadow: none !important; transition: all .2s var(--ease);
}
.sweet-alert button.confirm {
    background: #c33d3d !important; color: #fff !important;
    box-shadow: 0 10px 22px rgba(195, 61, 61, .3) !important;
}
.sweet-alert button.confirm:hover { background: #a93030 !important; }
.sweet-alert button.cancel {
    background: var(--surface-3) !important; color: var(--ink) !important;
    border-color: var(--line) !important;
}
.sweet-alert button.cancel:hover { background: var(--bg-alt) !important; }
.sweet-alert button { outline: none !important; }
.sweet-alert button.confirm:focus { box-shadow: 0 10px 22px rgba(195, 61, 61, .3), 0 0 0 3px rgba(195, 61, 61, .22) !important; }
.sweet-alert button.cancel:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 18%, transparent) !important; }
/* ==========================================================================
   Dijital Cüzdan kilidi (icerik.php en altı)
   ========================================================================== */

.cuzdan-bolum {
    margin-top: 26px; padding: 20px 24px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.cuzdan-bolum.acik {
    border-color: color-mix(in srgb, var(--teal-500) 45%, transparent);
    background: linear-gradient(120deg, color-mix(in srgb, var(--teal-500) 7%, var(--surface)), var(--surface));
}

.cz-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cz-ikon {
    flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: var(--surface-3); color: var(--ink-mute);
}
.cuzdan-bolum.acik .cz-ikon {
    background: linear-gradient(140deg, var(--brand-600), var(--teal-500)); color: #fff;
}
.cz-metin { flex: 1; min-width: 200px; }
.cz-metin strong { display: block; font-size: 1.02rem; font-weight: 800; color: var(--brand-700, var(--brand-600)); }
.cz-metin small { display: block; margin-top: 3px; font-size: .84rem; color: var(--ink-soft); }

.cz-al {
    flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
    border-radius: var(--r-md); background: var(--teal-600); color: #fff;
    font-size: .88rem; font-weight: 700; box-shadow: 0 12px 26px -14px var(--teal-600);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.cz-al:hover { background: var(--teal-500); transform: translateY(-1px); }

.cz-kosul { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-3); }
.cz-kosul-baslik {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: .88rem; font-weight: 600; color: var(--ink-soft);
}
.cz-kosul-baslik .ikon { flex: none; color: var(--ink-mute); }
.cz-daha {
    margin-left: auto; padding: 4px 10px; border-radius: var(--r-full); cursor: pointer;
    background: transparent; font-size: .8rem; font-weight: 700; color: var(--brand-600);
}
.cz-daha:hover { background: color-mix(in srgb, var(--brand-500) 10%, transparent); }

.cz-liste { margin-top: 10px; list-style: none; }
.cz-liste li {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-top: 6px; padding: 9px 12px; border-radius: var(--r-sm);
    font-size: .88rem; line-height: 1.5; color: var(--ink-soft); background: var(--surface);
    border-left: 3px solid var(--line-strong);
}
.cz-liste li.tamam { border-left-color: var(--ok-ink); }
.cz-liste li.eksik { border-left-color: var(--err-ink); }
.cz-liste li b { color: var(--ink); font-weight: 800; }
.cz-liste li i { font-style: italic; font-size: .82rem; color: var(--ink-mute); }
.cz-liste li.gizli { display: none; }
.cuzdan-bolum.genis .cz-liste li.gizli { display: flex; }

.cz-rozet {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
    padding: 4px 12px; border-radius: var(--r-full); font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.cz-rozet.tamam { background: var(--ok-bg);  color: var(--ok-ink); }
.cz-rozet.eksik { background: var(--err-bg); color: var(--err-ink); }

/* ==========================================================================
   Notlarım
   ========================================================================== */

.not-duzen { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 940px) { .not-duzen { grid-template-columns: 1fr; } }

.not-dersler {
    display: grid; gap: 10px; padding: 20px; position: sticky; top: 98px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
@media (max-width: 940px) { .not-dersler { position: static; } }
.nd-baslik {
    display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}

.nd-ders {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 14px 16px 18px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--surface-2); transition: all .2s var(--ease);
}
.nd-ders:hover { border-color: var(--brand-500); background: var(--surface); }
.nd-ders.aktif {
    border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 12%, transparent);
}
.nd-ad strong { display: block; font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.nd-ad small { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-mute); }

.nd-puan {
    flex: none; min-width: 46px; padding: 7px 10px; border-radius: var(--r-sm); text-align: center;
    background: var(--surface-3); font-size: .95rem; font-weight: 800; color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.nd-puan.iyi   { background: var(--ok-bg);   color: var(--ok-ink); }
.nd-puan.dusuk { background: var(--warn-bg); color: var(--warn-ink); }

.nd-cubuk {
    position: absolute; left: 16px; right: 16px; bottom: 10px; height: 4px; border-radius: 99px;
    background: var(--surface-3); overflow: hidden;
}
.nd-cubuk em { display: block; height: 100%; border-radius: 99px; background: var(--teal-500); }

/* ---------- Detay ---------- */
.not-detay {
    padding: 26px 28px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.nt-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.nt-ust h2 { font-size: 1.3rem; line-height: 1.3; }
.nt-ust p { margin-top: 8px; font-size: .88rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nt-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
@media (max-width: 620px) { .nt-sayilar { grid-template-columns: 1fr; } }
.nt-sayilar > div { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-3); }
.nt-sayilar b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.nt-sayilar small { display: block; margin-top: 3px; font-size: .78rem; font-weight: 600; color: var(--ink-mute); }

.nt-rozet {
    display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 16px 20px;
    border-radius: var(--r-md); color: #fff;
    background: linear-gradient(120deg, var(--brand-800), var(--teal-600));
    box-shadow: 0 12px 26px -16px var(--brand-800); transition: transform .2s var(--ease);
}
.nt-rozet:hover { transform: translateY(-2px); }
.ntr-ikon {
    flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .26);
}
/* Portalın genel strong rengi koyu; bu koyu zeminde açık renk zorunlu. */
.nt-rozet strong { display: block; font-size: .98rem; font-weight: 800; color: #fff; }
.nt-rozet small { display: block; margin-top: 2px; font-size: .82rem; color: rgba(255, 255, 255, .82); }
.nt-rozet > .ikon { margin-left: auto; flex: none; }

/* ---------- Modül tablosu ---------- */
.not-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.not-tablo th {
    padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--line);
    font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.not-tablo th:not(:first-child), .not-tablo td:not(:first-child) { text-align: center; width: 108px; }
.not-tablo td { padding: 13px 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.not-tablo tbody tr:hover { background: var(--surface-2); }

.nt-no {
    display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px;
    border-radius: var(--r-xs); background: var(--surface-3);
    font-size: .78rem; font-weight: 800; color: var(--ink-soft); vertical-align: middle;
}
.not-tablo tr.gecti .nt-no { background: var(--ok-bg); color: var(--ok-ink); }
.nt-ad { font-weight: 600; color: var(--ink); }
.nt-puan { font-size: 1.02rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.not-tablo tr.gecti .nt-puan { color: var(--ok-ink); }
.not-tablo tr.kaldi .nt-puan { color: var(--warn-ink); }

.nt-durum {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.nt-durum.gecti { background: var(--ok-bg); color: var(--ok-ink); }
.nt-durum.kaldi { background: var(--warn-bg); color: var(--warn-ink); }
.nt-durum.bos   { background: var(--surface-3); color: var(--ink-soft); }
.nt-durum.devam { background: color-mix(in srgb, #a25fd0 16%, transparent); color: #7a3ea8; }

/* Sonuç raporu butonu */
.nt-rapor {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface);
    font-size: .78rem; font-weight: 700; color: var(--brand-600); white-space: nowrap;
    transition: all .2s var(--ease);
}
.nt-rapor:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.nt-rapor.pasif { border-color: transparent; background: transparent; color: var(--ink-mute); cursor: default; }

/* Sonuç sayfası: tek giriş hakkı notu */
.sc-tek-hak {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-size: .82rem; font-weight: 600; color: var(--ink-mute);
}
.sc-tek-hak .ikon { flex: none; }
a.nt-durum:hover { filter: brightness(.95); }

@media (max-width: 700px) {
    .not-detay { padding: 20px 16px; }
    .not-tablo { font-size: .84rem; }
    .not-tablo th:not(:first-child), .not-tablo td:not(:first-child) { width: auto; }
    .nt-ad { display: block; margin-top: 4px; }
}

/* ==========================================================================
   Rehber sayfaları (Ölçme ve Değerlendirme / Oryantasyon / Nasıl Ders Çalışabilirim?)
   ========================================================================== */

.rehber-govde { max-width: 940px; margin: 0 auto; display: grid; gap: 30px; }

.rehber-bolum {
    padding: 30px 34px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.rehber-bolum > h2 {
    position: relative; padding-left: 16px; margin-bottom: 8px;
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.3;
}
.rehber-bolum > h2::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px;
    border-radius: 3px; background: linear-gradient(180deg, var(--brand-600), var(--teal-500));
}
.rb-ozet { margin-bottom: 20px; padding-left: 16px; font-size: .95rem; color: var(--ink-soft); }
.rehber-bolum .rich-text { margin-top: 12px; }

/* ---------- Kart ızgarası ---------- */
.rb-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
.rb-kart {
    padding: 20px 22px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c) 5%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line));
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.rb-kart:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.rbk-ikon {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
    border-radius: var(--r-sm); background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c);
}
.rb-kart strong { display: block; font-size: 1rem; font-weight: 800; color: var(--ink); }
.rb-kart p { margin-top: 6px; font-size: .89rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Numaralı adımlar ---------- */
.rb-adimlar { list-style: none; display: grid; gap: 12px; margin-top: 6px; counter-reset: adim; }
.rb-adimlar li {
    display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
    transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.rb-adimlar li:hover { border-color: var(--brand-500); transform: translateX(4px); }
.rba-no {
    flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
    color: #fff; font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rb-adimlar strong { display: block; font-size: .98rem; font-weight: 800; color: var(--ink); }
.rb-adimlar p { margin-top: 5px; font-size: .9rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Madde listesi ---------- */
.rb-liste { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.rb-liste li {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
    border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
    font-size: .93rem; line-height: 1.6; color: var(--ink-soft);
}
.rb-liste b { color: var(--ink); font-weight: 700; }
.rbl-ikon {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ok-bg); color: var(--ok-ink);
}

/* ---------- Destek şeridi ---------- */
.rehber-destek {
    display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
    padding: 24px 28px; border-radius: var(--r-lg); color: #fff;
    background: linear-gradient(120deg, var(--brand-800), var(--brand-600) 60%, var(--teal-600));
    box-shadow: var(--sh-2);
}
/* Portalın genel strong rengi koyu; bu koyu zeminde açık renk zorunlu. */
.rehber-destek strong { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; font-weight: 800; color: #fff; }
.rehber-destek small { display: block; margin-top: 5px; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.rd-baglanti { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-baglanti a {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
    color: #fff; font-size: .86rem; font-weight: 700; transition: background .2s var(--ease);
}
.rd-baglanti a:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Önceki / sonraki ---------- */
.rehber-gezinme { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .rehber-gezinme { grid-template-columns: 1fr; } }
.rehber-gezinme a {
    display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
    transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.rehber-gezinme a:hover { border-color: var(--brand-500); transform: translateY(-2px); }
.rehber-gezinme .ileri { grid-column: 2; justify-content: flex-end; text-align: right; }
@media (max-width: 720px) { .rehber-gezinme .ileri { grid-column: 1; } }
.rehber-gezinme small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.rehber-gezinme strong { display: block; margin-top: 3px; font-size: .95rem; color: var(--ink); }
.rg-ok {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-3); color: var(--brand-600);
}
.rehber-gezinme .geri .rg-ok .ikon { transform: rotate(180deg); }

@media (max-width: 620px) {
    .rehber-bolum { padding: 22px 18px; }
    .rehber-destek { padding: 20px 18px; }
    .rd-baglanti a { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Ana sayfa: site kimliği, kişisel karşılama, rakamlar, rozet vitrini, rulet
   ========================================================================== */

/* ---------- Site kimliği şeridi ---------- */
/* .quick-bar iki sütunlu bir ızgara; kimlik şeridi tüm satırı kaplar. */
.kimlik-serit {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-top: 4px; padding-top: 18px; border-top: 1px dashed var(--line);
    font-size: clamp(1.02rem, .95rem + .42vw, 1.3rem); font-weight: 600;
    line-height: 1.5; text-align: center;
}
/* Sabit metin, dönen kelimeyle uyumlu yumuşak bir lacivert tonda */
.ks-onek, .ks-sonek {
    letter-spacing: .01em;
    color: color-mix(in srgb, var(--brand-800) 68%, var(--ink-mute));
}

/* Dönen kelime bir rozetin içinde durur. Tüm kelimeler ızgarada aynı hücreye
   yığıldığı için rozet en uzun kelimeye göre kendiliğinden genişler; ölçüm için
   JS gerekmez ve hiçbir kelime kırpılmaz. */
.ks-kelime {
    display: inline-grid; align-items: center; justify-items: center;
    height: 2.15em; overflow: hidden; vertical-align: middle;
    border-radius: var(--r-full);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--brand-500) 12%, var(--surface)),
        color-mix(in srgb, var(--teal-500) 12%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--brand-500) 22%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.ks-kelime b {
    grid-area: 1 / 1; height: 100%; padding: 0 .9em;
    display: flex; align-items: center; white-space: nowrap;
    font-size: 1.16em; font-weight: 800; letter-spacing: -.01em;
    background: linear-gradient(90deg, var(--brand-600), var(--teal-500));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* Kısa yol ve süre: giren kelime çıkanla üst üste biner, rozet boş kalmaz. */
    opacity: 0; transform: translateY(70%);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.ks-kelime b.aktif { opacity: 1; transform: none; }
.ks-kelime b.cikan { opacity: 0; transform: translateY(-70%); }

/* ---------- Kişisel karşılama ---------- */
.karsilama {
    position: relative; overflow: hidden; display: grid;
    grid-template-columns: auto auto minmax(0, 1fr); gap: 26px; align-items: center;
    padding: 22px 26px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
@media (max-width: 900px) { .karsilama { grid-template-columns: 1fr; gap: 18px; } }
.kr-fon {
    position: absolute; inset: -60% 60% auto -20%; height: 260px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-500) 20%, transparent), transparent 72%);
    filter: blur(24px); pointer-events: none;
}
.karsilama > *:not(.kr-fon) { position: relative; z-index: 1; }

.kr-kim { display: flex; align-items: center; gap: 14px; }
.kr-avatar {
    width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-600), var(--teal-600));
    color: #fff; font-size: 1.3rem; font-weight: 800;
}
.kr-kim small { display: block; font-size: .74rem; font-weight: 700; color: var(--ink-mute); }
.kr-kim strong { display: block; font-size: 1.12rem; font-weight: 800; color: var(--ink); }

.kr-sayilar { display: flex; align-items: center; gap: 22px; }
.kr-sayilar > div b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--ink); }
.kr-sayilar > div small { display: block; margin-top: 3px; font-size: .74rem; font-weight: 600; color: var(--ink-mute); }

.kr-halka { position: relative; width: 64px; height: 64px; }
.kr-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kr-halka .iz  { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.kr-halka .bar {
    fill: none; stroke: var(--teal-500); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 169.6; stroke-dashoffset: calc(169.6 * (1 - var(--oran) / 100));
    transition: stroke-dashoffset 1.1s var(--ease);
}
.kr-halka span {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: .82rem; font-weight: 800; color: var(--ink);
}

.kr-devam {
    justify-self: end; display: inline-flex; align-items: center; gap: 16px; padding: 14px 20px;
    border-radius: var(--r-md); color: #fff;
    background: linear-gradient(120deg, var(--brand-800), var(--brand-600));
    box-shadow: 0 14px 30px -16px var(--brand-800);
    transition: transform .22s var(--ease);
}
@media (max-width: 900px) { .kr-devam { justify-self: stretch; justify-content: space-between; } }
.kr-devam:hover { transform: translateY(-2px); }
/* Koyu zeminde açık renk zorunlu */
.kr-devam small { display: block; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .72); }
.kr-devam strong { display: block; margin-top: 2px; font-size: .98rem; font-weight: 800; color: #fff; }
.kr-devam .ikon { flex: none; transition: transform .22s var(--ease); }
.kr-devam:hover .ikon { transform: translateX(4px); }

/* Misafir görünümü */
.karsilama.misafir { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 980px) { .karsilama.misafir { grid-template-columns: 1fr; } }
.krm-metin small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
.krm-metin strong { display: block; margin-top: 5px; font-size: 1.06rem; font-weight: 700; line-height: 1.45; color: var(--ink); }
.krm-adimlar { display: flex; gap: 10px; list-style: none; flex-wrap: wrap; }
.krm-adimlar li {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: .84rem; font-weight: 700; color: var(--ink-soft);
}
.krm-adimlar b {
    width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-600); color: #fff; font-size: .7rem; font-weight: 800;
}

/* ---------- Canlı rakamlar şeridi ---------- */
.rakam-serit {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.rk-hucre {
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 22px 18px; text-align: center;
    border-right: 1px solid var(--line); transition: background .22s var(--ease);
}
.rk-hucre:last-child { border-right: 0; }
.rk-hucre:hover { background: var(--surface-2); }
.rk-ikon {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--brand-500) 11%, var(--surface)); color: var(--brand-600);
}
.rk-hucre b {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--brand-600), var(--teal-500));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rk-hucre small { font-size: .82rem; font-weight: 600; color: var(--ink-mute); }
@media (max-width: 620px) { .rk-hucre { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Dijital rozet vitrini ---------- */
/* Bölüm boşluğu diğerlerinden daha derli toplu tutulur */
.rozet-vitrin { position: relative; overflow: hidden; padding: clamp(36px, 3.4vw, 52px) 0; }
.rv-fon {
    position: absolute; inset: -30% -10% auto auto; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-400) 22%, transparent), transparent 72%);
    filter: blur(40px); pointer-events: none;
}
.rv-ust {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.rv-etiket {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-full);
    background: var(--accent-400); color: #331f01;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.rv-ust h2 { margin: 12px 0 10px; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem); max-width: 22ch; }
/* Açıklama iki yana yaslanır; son satır sola hizalı kalır */
.rv-ust p {
    font-size: .96rem; line-height: 1.75; max-width: 66ch; color: var(--ink-soft);
    text-align: justify; text-align-last: left; hyphens: none;
}
.rv-toplam { text-align: center; flex: none; }
.rv-toplam b {
    display: block; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 800; line-height: 1;
    background: linear-gradient(120deg, var(--brand-600), var(--accent-400));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rv-toplam small { display: block; margin-top: 5px; max-width: 18ch; font-size: .78rem; font-weight: 600;
    line-height: 1.45; color: var(--ink-mute); }

/* Rozetler tek satırda yan yana; dar ekranlarda kademeli olarak sarar. */
.rv-grid { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .rv-grid { grid-template-columns: 1fr; } }

.rv-kart {
    position: relative; overflow: hidden; padding: 22px 16px; border-radius: var(--r-lg); text-align: center;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.rv-kart:hover {
    transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, var(--line));
    box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--c) 75%, transparent), var(--sh-2);
}
.rvk-madalya {
    display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
    color: #fff; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 58%, #0a1030));
    box-shadow: 0 12px 26px -12px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent);
    transition: transform .28s var(--ease);
}
.rv-kart:hover .rvk-madalya { transform: rotate(-8deg) scale(1.07); }
.rv-kart strong { display: block; font-size: .95rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.rv-kart p { margin-top: 7px; font-size: .81rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- Ders keşif ruleti ---------- */
.rulet {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 30px; align-items: center;
    padding: 30px 32px; border-radius: var(--r-xl); overflow: hidden;
    background: linear-gradient(130deg, #1b2a6b 0%, #101a48 48%, #0a1030 100%);
}
@media (max-width: 900px) { .rulet { grid-template-columns: 1fr; } }
.rl-etiket {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
/* Koyu zeminde açık renk zorunlu */
.rl-sol h2 { margin: 14px 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: #fff; }
.rl-sol p { font-size: .95rem; line-height: 1.7; color: rgba(255, 255, 255, .75); max-width: 40ch; }
.rl-cevir {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 13px 24px; cursor: pointer;
    border-radius: var(--r-full); background: #fff; color: var(--brand-800);
    font-size: .9rem; font-weight: 800; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .7);
    transition: transform .2s var(--ease);
}
.rl-cevir:hover { transform: translateY(-2px); }
.rl-cevir .ikon { color: var(--accent-400); }

.rl-kart {
    display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface); box-shadow: 0 26px 52px -26px rgba(0, 0, 0, .8);
    transition: transform .3s var(--ease);
}
.rl-kart:hover { transform: translateY(-4px); }
.rl-kart.donuyor { animation: ruletDon .42s var(--ease); }
@keyframes ruletDon {
    0%   { opacity: 1; transform: rotateY(0) scale(1); }
    50%  { opacity: .25; transform: rotateY(12deg) scale(.96); }
    100% { opacity: 1; transform: rotateY(0) scale(1); }
}
.rlk-kapak { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.rlk-kapak img { width: 100%; height: 100%; object-fit: cover; }
.rlk-yedek {
    position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; text-align: center;
    background: linear-gradient(140deg, color-mix(in srgb, var(--c, #2b40a8) 24%, var(--surface)), var(--surface-3));
    font-size: .92rem; font-weight: 700; color: color-mix(in srgb, var(--c, #2b40a8) 78%, var(--ink));
}
.rlk-govde { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.rlk-govde strong { font-size: 1.06rem; font-weight: 800; line-height: 1.35; color: var(--ink); }
.rlk-govde small { font-size: .87rem; line-height: 1.6; color: var(--ink-soft); }
.rlk-git {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
    font-size: .88rem; font-weight: 800; color: var(--brand-600);
}
.rl-kart:hover .rlk-git .ikon { transform: translateX(4px); }
.rlk-git .ikon { transition: transform .2s var(--ease); }

/* ---------- Ders kartında öğrenen sayısı ---------- */
.dk-ogrenen {
    position: absolute; left: 12px; bottom: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .95); color: var(--ink);
    font-size: .74rem; font-weight: 600; letter-spacing: .01em;
    box-shadow: 0 6px 16px -8px rgba(16, 26, 77, .6); backdrop-filter: blur(4px);
}
.dk-ogrenen .ikon { color: var(--brand-600); flex: none; }
.dk-ogrenen b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Kapak görselinin altındaki koyu geçişte de okunur kalsın */
.course-cover .dk-ogrenen { left: 12px; bottom: 12px; }
.course-cover small { left: auto; right: 12px; }

/* ---------- Grup başlığı satırı ve "devamını göster" ---------- */
.grup-satiri {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin: 46px 0 24px;
}
.grup-satiri:first-of-type { margin-top: 0; }
.grup-satiri .grup-baslik { margin: 0; flex: 1; min-width: 0; }

.grup-katalog {
    flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
    border-radius: var(--r-full); border: 1px solid color-mix(in srgb, var(--c) 34%, var(--line));
    background: color-mix(in srgb, var(--c) 8%, var(--surface));
    color: color-mix(in srgb, var(--c) 82%, var(--ink));
    font-size: .86rem; font-weight: 800; transition: all .22s var(--ease);
}
.grup-katalog:hover { background: var(--c); border-color: var(--c); color: #fff; transform: translateY(-2px); }
.grup-katalog .ikon { transition: transform .2s var(--ease); }
.grup-katalog:hover .ikon { transform: translateX(4px); }

/* İlk 6 alandan sonrası gizli başlar */
.alan-karti.gizli { display: none; }

.alan-daha { display: flex; justify-content: center; margin-top: 22px; }
.ad-dugme {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; cursor: pointer;
    border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface);
    font-size: .89rem; font-weight: 800; color: var(--ink); box-shadow: var(--sh-1);
    transition: all .22s var(--ease);
}
.ad-dugme:hover { border-color: var(--c); color: var(--c); transform: translateY(-2px); }
.ad-dugme em {
    font-style: normal; padding: 3px 10px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c) 12%, var(--surface-3));
    color: color-mix(in srgb, var(--c) 80%, var(--ink));
    font-size: .74rem; font-weight: 800;
}
/* Ok aşağıyı gösterir; tümü açıldığında yukarı döner */
.ad-dugme .ikon { transform: rotate(180deg); transition: transform .25s var(--ease); }
.ad-dugme.tumu-acik .ikon { transform: none; }

/* ---------- Katmanlı bölüm başlığı (öğrenme alanları) ---------- */
.section-head.katman {
    position: relative; overflow: hidden; display: block;
    padding: 34px 40px 32px; margin-bottom: 34px; border-radius: var(--r-xl);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--brand-500) 9%, var(--surface)) 0%,
        var(--surface) 52%,
        color-mix(in srgb, var(--teal-500) 9%, var(--surface)) 100%);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}
/* Sol kenarda renk geçişli şerit */
.section-head.katman::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: linear-gradient(180deg, var(--brand-600), var(--teal-500), var(--accent-400));
}
/* Sağ üstte yumuşak ışık lekesi */
.kt-desen {
    position: absolute; inset: -55% -12% auto auto; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 72%);
    filter: blur(30px); pointer-events: none;
}
/* Sağ tarafta üniversite mührü — görselin beyaz zemini multiply ile eriyor. */
.kt-muhur {
    position: absolute; right: -34px; top: 50%; transform: translateY(-50%);
    width: 340px; height: 340px; pointer-events: none;
    background: url("../images/dairesel-siyah.png") no-repeat center / 1520px auto;
    mix-blend-mode: multiply; opacity: .14;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.section-head.katman .st { position: relative; z-index: 1; max-width: min(82ch, calc(100% - 250px)); }
@media (max-width: 900px) {
    .kt-muhur { display: none; }
    .section-head.katman .st { max-width: 82ch; }
}

.section-head.katman .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--brand-500) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand-500) 24%, transparent);
    color: var(--brand-700, var(--brand-600));
}
.section-head.katman .eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-400);
}
.section-head.katman h2 {
    margin: 16px 0 12px; font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.55rem); line-height: 1.12;
    letter-spacing: -.02em;
    background: linear-gradient(100deg, var(--brand-800) 0%, var(--brand-600) 45%, var(--teal-600) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Açıklama iki yana yaslanır; son satır sola hizalı kalır */
.section-head.katman p {
    text-align: justify; text-align-last: left; text-wrap: initial; hyphens: none;
    font-size: 1.04rem; line-height: 1.8; color: var(--ink-soft);
}

@media (max-width: 620px) {
    .section-head.katman { padding: 24px 20px 22px; }
    .section-head.katman p { text-align: left; }
}
/* ==========================================================================
   Sık sorulan sorular + ders keşif ruleti (ana sayfa)
   ========================================================================== */

.sss-rulet { position: relative; overflow: hidden; padding: clamp(44px, 4.5vw, 72px) 0; }
.sr-fon {
    position: absolute; inset: auto -12% -40% auto; width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 70%);
    filter: blur(40px); pointer-events: none;
}
.sr-duzen {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 48px; align-items: center;
}
@media (max-width: 940px) { .sr-duzen { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Sol: sorular ---------- */
.sr-sol h2 {
    margin: 14px 0 10px; font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); line-height: 1.15;
    letter-spacing: -.02em; max-width: 20ch;
}
.sr-sol > p { font-size: .98rem; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; }
.sr-sss { display: grid; gap: 12px; margin-top: 26px; }

/* Ana sayfadaki soru kutuları katalog sayfasından biraz daha yumuşak */
.sr-sss .faq-item {
    border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--sh-1); overflow: hidden; transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.sr-sss .faq-item:hover { border-color: color-mix(in srgb, var(--brand-500) 38%, var(--line)); }
.sr-sss .faq-item.acik { border-color: var(--brand-600); box-shadow: var(--sh-2); }

/* ---------- Sağ: rastgele ders ---------- */
.sr-sag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sr-leke {
    position: absolute; inset: 6% -14% 12% -14%; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--brand-500) 22%, transparent),
        color-mix(in srgb, var(--teal-500) 18%, transparent));
    filter: blur(2px); pointer-events: none;
}
.sr-sag > *:not(.sr-leke) { position: relative; z-index: 1; }

.sr-sag .rl-etiket {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line); color: var(--brand-600);
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    box-shadow: var(--sh-1);
}

.sr-sag .rl-kart {
    display: flex; flex-direction: column; width: 100%; border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface); box-shadow: var(--sh-3); transition: transform .3s var(--ease);
}
.sr-sag .rl-kart:hover { transform: translateY(-4px); }

.sr-sag .rl-cevir {
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; cursor: pointer;
    border-radius: var(--r-full); background: var(--brand-600); color: #fff;
    font-size: .89rem; font-weight: 800; box-shadow: var(--sh-brand);
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.sr-sag .rl-cevir:hover { background: var(--brand-800); transform: translateY(-2px); }
.sr-sag .rl-cevir .ikon { color: var(--accent-400); }
/* Üst şeritteki "Ders Aç" butonu */
/* Üst şerit düğmeleri: aynı ölçüde, biri dolu biri camsı — yan yana uyumlu dursun */
.topbar-sinav, .topbar-dersac {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 18px;
    border-radius: var(--r-full); font-size: .82rem; font-weight: 800; letter-spacing: .01em;
    white-space: nowrap; opacity: 1 !important;
    transition: transform .2s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.topbar-sinav .ikon, .topbar-dersac .ikon { flex: none; }
.topbar-sinav:hover, .topbar-dersac:hover { transform: translateY(-1px); }

/* Baskın çağrı: dolu turkuaz, beyaz yazı */
.topbar-sinav {
    background: linear-gradient(120deg, #16b691, #109a83 62%, #0d8375); color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(18, 161, 137, .95), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.topbar-sinav:hover { filter: brightness(1.08); box-shadow: 0 11px 24px -10px rgba(18, 161, 137, 1); }

/* İkincil çağrı: dolu kehribar, beyaz yazı */
.topbar-dersac {
    background: linear-gradient(120deg, #f0a92b, #dd9418 62%, #d18a12); color: #fff !important;
    box-shadow: 0 8px 20px -10px rgba(221, 148, 24, .95), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.topbar-dersac:hover { filter: brightness(1.08); box-shadow: 0 11px 24px -10px rgba(221, 148, 24, 1); }

@media (max-width: 720px) {
    .topbar-sinav, .topbar-dersac { height: 32px; padding: 0 14px; font-size: .78rem; }
}
/* ==========================================================================
   KVKK aydınlatma onayı penceresi
   ========================================================================== */

.kvkk-fon {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px;
    background: rgba(9, 12, 32, .62); backdrop-filter: blur(4px);
}
.kvkk-fon[hidden] { display: none; }

.kvkk-kutu {
    width: min(720px, 100%); max-height: 92vh; overflow: auto; border-radius: var(--r-lg);
    background: var(--surface); box-shadow: var(--sh-3);
    animation: kvkkGir .26s var(--ease) both;
}
@keyframes kvkkGir { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.kvkk-ust {
    padding: 20px 28px; color: #fff;
    background: linear-gradient(120deg, var(--brand-800), var(--brand-600) 60%, var(--teal-600));
}
/* Koyu zeminde başlık açık renk olmalı */
.kvkk-ust h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; color: #fff; }

.kvkk-govde { padding: 26px 28px 22px; }
.kvkk-metin {
    padding: 18px 22px; border-radius: var(--r-md); border-left: 4px solid var(--teal-500);
    background: var(--surface-2);
    font-size: .95rem; line-height: 1.75; color: var(--ink-soft); text-align: justify; text-align-last: left;
}
.kvkk-metin a { font-weight: 800; color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.kvkk-metin a:hover { color: var(--brand-800); }

.kvkk-secim {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 13px 16px;
    border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
    cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.kvkk-secim:hover { border-color: var(--brand-500); background: var(--surface-2); }
.kvkk-secim input { flex: none; width: 19px; height: 19px; margin-top: 1px; accent-color: var(--brand-600); cursor: pointer; }
.kvkk-secim span { font-size: .92rem; line-height: 1.6; color: var(--ink); }
.kvkk-secim:has(input:checked) {
    border-color: var(--ok-ink); background: color-mix(in srgb, var(--ok-ink) 6%, var(--surface));
}

.kvkk-dipnot { margin-top: 16px; font-size: .84rem; line-height: 1.6; color: var(--ink-mute); text-align: center; }
.kvkk-durum { margin-top: 10px; min-height: 20px; font-size: .85rem; font-weight: 700; text-align: center; color: var(--err-ink); }
.kvkk-durum.ok { color: var(--ok-ink); }

.kvkk-alt {
    display: flex; justify-content: flex-end; padding: 16px 28px;
    background: var(--surface-2); border-top: 1px solid var(--line);
}
.kvkk-gonder {
    padding: 12px 34px; border-radius: var(--r-full); cursor: pointer;
    background: var(--teal-600); color: #fff; font-size: .92rem; font-weight: 800;
    box-shadow: 0 12px 26px -14px var(--teal-600); transition: all .2s var(--ease);
}
.kvkk-gonder:hover:not(:disabled) { background: var(--teal-500); transform: translateY(-1px); }
.kvkk-gonder:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 620px) {
    .kvkk-ust, .kvkk-govde, .kvkk-alt { padding-inline: 18px; }
    .kvkk-alt { justify-content: stretch; }
    .kvkk-gonder { width: 100%; }
}
/* ==========================================================================
   Geri Bildirimlerim
   ========================================================================== */

.gbl-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 22px; flex-wrap: wrap;
}
.gbl-sayilar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gbl-rozet {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line);
    font-size: .84rem; font-weight: 600; color: var(--ink-soft);
}
.gbl-rozet b { font-size: .98rem; font-weight: 800; color: var(--brand-600); }
.gbl-rozet.yanit b { color: var(--teal-600); }
/* Ortak .btn-primary tam genişlik; burada satır içi durması gerekiyor. */
.gbl-ust .btn-primary { width: auto; flex: none; padding: 12px 24px; border-radius: var(--r-full); }

.gbl-liste { display: grid; gap: 16px; }

.gbl-kart {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow .2s var(--ease);
}
.gbl-kart:hover { box-shadow: var(--sh-2); }

.gbl-kart-ust {
    display: flex; align-items: center; gap: 13px; padding: 16px 20px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.gbl-ikon {
    flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center;
}
.gbl-ikon.tamam    { background: var(--ok-bg);   color: var(--ok-ink); }
.gbl-ikon.bekliyor { background: var(--warn-bg); color: var(--warn-ink); }

.gbl-kart-bilgi { flex: 1; min-width: 0; }
.gbl-kart-bilgi strong { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.gbl-kart-bilgi small { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-mute); }

.gbl-durum {
    flex: none; padding: 5px 13px; border-radius: var(--r-full);
    font-size: .74rem; font-weight: 800; letter-spacing: .04em;
}
.gbl-durum.tamam    { background: var(--ok-bg);   color: var(--ok-ink); }
.gbl-durum.bekliyor { background: var(--warn-bg); color: var(--warn-ink); }

.gbl-kart-govde { padding: 18px 20px; display: grid; gap: 14px; }
.gbl-etiketler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gbl-etiketler .tag.sade { background: var(--surface-3); color: var(--ink-mute); }

.gbl-mesaj, .gbl-yanit { padding: 14px 16px; border-radius: var(--r-md); }
.gbl-mesaj { background: var(--surface-2); border-left: 3px solid var(--brand-500); }
.gbl-yanit { background: var(--ok-bg); border-left: 3px solid var(--teal-600); }

.gbl-mesaj label, .gbl-yanit label {
    display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
    font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.gbl-mesaj label { color: var(--brand-600); }
.gbl-yanit label { color: var(--teal-600); }
.gbl-mesaj p, .gbl-yanit p { font-size: .92rem; line-height: 1.7; color: var(--ink-soft); }
.gbl-yanit p { color: var(--ok-ink); }
.gbl-mesaj time, .gbl-yanit time {
    display: block; margin-top: 8px; font-size: .74rem; font-weight: 600; color: var(--ink-mute);
}
.gbl-yanit time { color: var(--ok-ink); opacity: .75; }

.gbl-bekleme {
    display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: var(--r-md);
    background: var(--warn-bg); color: var(--warn-ink); font-size: .85rem; font-weight: 600; line-height: 1.6;
}
.gbl-bekleme .ikon { flex: none; }

/* ---------- Yeni geri bildirim penceresi ---------- */

.gbl-fon {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px;
    background: rgba(9, 12, 32, .62); backdrop-filter: blur(4px);
}
.gbl-fon[hidden] { display: none; }

.gbl-kutu {
    width: min(560px, 100%); max-height: 92vh; overflow: auto; border-radius: var(--r-lg);
    background: var(--surface); box-shadow: var(--sh-3); animation: kvkkGir .26s var(--ease) both;
}

.gbl-kutu-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px; color: #fff;
    background: linear-gradient(120deg, var(--brand-800), var(--brand-600) 60%, var(--teal-600));
}
/* Koyu zeminde başlık açık renk olmalı */
.gbl-kutu-ust h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; color: #fff; }
.gbl-kapat {
    flex: none; width: 34px; height: 34px; border-radius: var(--r-full); color: #fff; font-size: 1.4rem; line-height: 1;
    background: rgba(255, 255, 255, .16); transition: background .2s var(--ease);
}
.gbl-kapat:hover { background: rgba(255, 255, 255, .3); }

.gbl-kutu-govde { padding: 24px 26px 18px; display: grid; gap: 16px; }
.gbl-alan { display: grid; gap: 6px; }
.gbl-alan label { font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.gbl-req { color: var(--err-ink); }
.gbl-alan select, .gbl-alan textarea {
    width: 100%; padding: 11px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: .92rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gbl-alan textarea { resize: vertical; min-height: 120px; line-height: 1.65; }
.gbl-alan select:focus, .gbl-alan textarea:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}
.gbl-sayac { justify-self: end; font-size: .74rem; font-weight: 700; color: var(--ink-mute); }
.gbl-sayac.dolu { color: var(--warn-ink); }

.gbl-durum-metni { min-height: 20px; font-size: .85rem; font-weight: 700; text-align: center; color: var(--ink-mute); }
.gbl-durum-metni.hata { color: var(--err-ink); }
.gbl-durum-metni.ok { color: var(--ok-ink); }

.gbl-kutu-alt {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 26px;
    background: var(--surface-2); border-top: 1px solid var(--line);
}
.gbl-vazgec {
    padding: 11px 24px; border-radius: var(--r-full); background: var(--surface-3); color: var(--ink-soft);
    font-size: .9rem; font-weight: 700; transition: background .2s var(--ease);
}
.gbl-vazgec:hover { background: var(--line); }
.gbl-gonder {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px; border-radius: var(--r-full);
    background: var(--teal-600); color: #fff; font-size: .9rem; font-weight: 800;
    box-shadow: 0 12px 26px -14px var(--teal-600); transition: all .2s var(--ease);
}
.gbl-gonder:hover:not(:disabled) { background: var(--teal-500); transform: translateY(-1px); }
.gbl-gonder:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 620px) {
    .gbl-ust { align-items: stretch; }
    .gbl-ust .btn-primary { width: 100%; justify-content: center; }
    .gbl-kart-ust { flex-wrap: wrap; }
    .gbl-kutu-ust, .gbl-kutu-govde, .gbl-kutu-alt { padding-inline: 18px; }
    .gbl-kutu-alt { justify-content: stretch; }
    .gbl-vazgec, .gbl-gonder { flex: 1; justify-content: center; }
}