/* student/panel — tema, bento, kitaplık, oyunlar, görevler, profil */
/* —— Premium Tema / Arka Plan (9 fotoğraf) ——
   Yalnız #student-panel: html/body'ye basma — öğretmen/login açılışında bahçe teması flaş etmesin. */
#student-panel {
    --s-theme-surface: rgba(15, 23, 42, 0.6);
    position: relative;
    isolation: isolate;
    background-color: #0f172a !important;
}
html.theme-buyulu-orman #student-panel,
html.theme-sakli-bahce #student-panel,
html.theme-kozmik-zirve #student-panel,
html.theme-lavanta-vadisi #student-panel,
html.theme-altin-kumsal #student-panel,
html.theme-derin-mavi-okyanus #student-panel,
html.theme-kristal-kis #student-panel,
html.theme-guz-esintisi #student-panel,
html.theme-sonsuz-gokyuzu #student-panel,
#student-panel.theme-buyulu-orman,
#student-panel.theme-sakli-bahce,
#student-panel.theme-kozmik-zirve,
#student-panel.theme-lavanta-vadisi,
#student-panel.theme-altin-kumsal,
#student-panel.theme-derin-mavi-okyanus,
#student-panel.theme-kristal-kis,
#student-panel.theme-guz-esintisi,
#student-panel.theme-sonsuz-gokyuzu {
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
html.theme-buyulu-orman #student-panel,
#student-panel.theme-buyulu-orman { background-image: url('/assets/themes/buyulu-orman.png') !important; }
html.theme-sakli-bahce #student-panel,
#student-panel.theme-sakli-bahce { background-image: url('/assets/themes/sakli-bahce.png') !important; }
html.theme-kozmik-zirve #student-panel,
#student-panel.theme-kozmik-zirve { background-image: url('/assets/themes/kozmik-zirve.png') !important; }
html.theme-lavanta-vadisi #student-panel,
#student-panel.theme-lavanta-vadisi { background-image: url('/assets/themes/lavanta-vadisi.png') !important; }
html.theme-altin-kumsal #student-panel,
#student-panel.theme-altin-kumsal { background-image: url('/assets/themes/altin-kumsal.png') !important; }
html.theme-derin-mavi-okyanus #student-panel,
#student-panel.theme-derin-mavi-okyanus { background-image: url('/assets/themes/derin-mavi-okyanus.png') !important; }
html.theme-kristal-kis #student-panel,
#student-panel.theme-kristal-kis { background-image: url('/assets/themes/kristal-kis.png') !important; }
html.theme-guz-esintisi #student-panel,
#student-panel.theme-guz-esintisi { background-image: url('/assets/themes/guz-esintisi.png') !important; }
html.theme-sonsuz-gokyuzu #student-panel,
#student-panel.theme-sonsuz-gokyuzu { background-image: url('/assets/themes/sonsuz-gokyuzu.png') !important; }

/* 1) Arka plan karartma — ambiyans, dikkat dağılmasın */
.student-theme-bg {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}
#student-panel > header,
#student-panel main,
#student-panel > nav,
#student-panel > footer,
#student-panel > .flex-1 {
    position: relative;
}
#student-panel > header.s-student-header {
    z-index: 200;
    overflow: visible !important;
}
#student-panel main,
#student-panel > nav,
#student-panel > footer,
#student-panel > .flex-1 {
    z-index: 1;
}
#s-profile-menu-wrap {
    position: relative;
    z-index: 2;
    overflow: visible;
}
#student-panel > header.s-student-header.is-profile-menu-open {
    z-index: 10050;
}
/* 2) Üst bar + kartlar: slate-900/65 + blur + yüksek kontrast */
#student-panel > header.s-student-header {
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff;
}
#student-panel .s-student-header-bar button,
#student-panel .s-header-stats-toggle,
#student-panel .s-student-header-drawer button {
    min-height: 0 !important;
}
#student-panel #s-header-title,
#student-panel .s-student-header-welcome {
    color: #fff !important;
}

#student-panel .s-bento-card,
#student-panel .s-bento-card.is-glass,
#student-panel .s-bento-hero,
#student-panel .s-bento-ataturk,
#student-panel .s-bento-clock,
#student-panel .wirebound-notepad,
#student-panel .s-shelf-unit,
#student-panel .gym-game-card,
#student-panel .s-bento-calendar,
#student-panel .s-quest-dash {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
}
#student-panel .s-bento-phone-hub,
#student-panel .s-bento-yeni-merhaba {
    background: linear-gradient(165deg, #38bdf8 0%, #22d3ee 38%, #14b8a6 100%) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 40px rgba(14, 116, 144, 0.22) !important;
}
#student-panel .s-bento-phone-hub .s-phone-hub-frame,
#student-panel .s-bento-yeni-merhaba .s-yeni-merhaba-frame {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.28) 100%) !important;
    color: #0f172a !important;
}
/* Haftalık plan paneli beyaz zemin — koyu yazı (üstteki color:#fff ezmesin) */
#student-panel .s-bento-calendar .study-day-panel,
#student-panel .s-bento-calendar .study-day-panel * {
    color: #0f172a !important;
}
#student-panel .s-bento-calendar .study-session-card .ss-slot,
#student-panel .s-bento-calendar .study-day-panel-head .sdp-meta,
#student-panel .s-bento-calendar .study-day-empty {
    color: #64748b !important;
}
#student-panel .s-bento-calendar .study-session-card .ss-type {
    color: #0f172a !important;
}
#student-panel .s-bento-calendar .study-session-card .ss-topic {
    color: #334155 !important;
}
#student-panel .s-bento-hero::before {
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.08), transparent 45%) !important;
}
#student-panel .s-bento-card h1,
#student-panel .s-bento-card h2,
#student-panel .s-bento-card h3,
#student-panel .s-bento-card h4,
#student-panel .s-bento-hero-greeting,
#student-panel .s-bento-section-label,
#student-panel .s-quest-dash-head h3,
#student-panel .s-bento-card .text-slate-800,
#student-panel .s-bento-card .text-slate-700,
#student-panel .s-bento-card .text-slate-600,
#student-panel .s-bento-calendar .text-slate-800,
#student-panel .s-bento-calendar .text-slate-700,
#student-panel .s-bento-clock-time,
#student-panel .s-cal-header .font-bold {
    color: #fff !important;
}
#student-panel .s-bento-hero-sub,
#student-panel .s-bento-card .text-slate-500,
#student-panel .s-bento-card .text-slate-400,
#student-panel .s-bento-card .text-slate-300,
#student-panel .s-bento-calendar .text-slate-500,
#student-panel .s-bento-clock-date,
#student-panel .s-bento-clock-kicker,
#student-panel .s-quest-dash-head p,
#student-panel .s-bento-metric-sub,
#student-panel #s-home-ataturk-quote {
    color: #d1d5db !important; /* gray-300 */
}
#student-panel .s-bento-tempo-btn {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
#student-panel .s-bento-tempo-btn .text-emerald-700,
#student-panel .s-bento-tempo-btn .text-slate-600,
#student-panel .s-bento-tempo-btn .text-slate-700 {
    color: #d1d5db !important;
}

/* 3) Çalışma Özeti — mesh içi ada (diğerleriyle aynı genişlik / gap) */
#student-panel #summary-home.s-quest-dash,
#student-panel .s-quest-dash.js-quest-summary-root {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
.s-bento-mesh > [data-widget="summary"] {
    grid-column: 1 / -1 !important;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget="summary"] {
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
}
#student-panel #summary-home .s-quest-dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
    #student-panel #summary-home .s-quest-dash-grid.is-quad,
    #student-panel .s-quest-dash-grid.is-quad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
#student-panel #summary-home .s-quest-subj-grid {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
#student-panel .s-quest-metric {
    background: rgba(15, 23, 42, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
#student-panel .s-quest-metric-body strong {
    color: #f8fafc !important;
}
#student-panel .s-quest-metric-body em {
    color: #cbd5e1 !important;
}
#student-panel .s-quest-metric-body em b {
    color: #fff !important;
    font-weight: 900;
}
#student-panel .s-quest-metric-body .is-ahead {
    color: #34d399 !important;
}
#student-panel .s-quest-metric-body .is-behind {
    color: #fca5a5 !important;
}
#student-panel .s-quest-metric-ico {
    margin-right: 0.28rem;
    opacity: 0.85;
    font-size: 0.72em;
}
#student-panel .s-quest-subj-wrap {
    margin-top: 0.75rem;
}
#student-panel .s-quest-subj-panel {
    border-radius: 1.1rem;
    padding: 0.75rem 0.7rem 0.7rem;
    background: rgba(15, 23, 42, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#student-panel .s-quest-subj-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
#student-panel .s-quest-subj-head h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e2e8f0 !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
#student-panel .s-quest-subj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
#student-panel .s-quest-subj-meta span {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1 !important;
}
#student-panel .s-quest-subj-tile {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
#student-panel .s-quest-subj-tile .val {
    color: #f8fafc !important;
}
#student-panel .s-quest-subj-tile .val .unit {
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8 !important;
    margin-left: 0.12rem;
}
#student-panel .s-quest-subj-tile .sub {
    color: #94a3b8 !important;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    align-items: center;
}
#student-panel .s-quest-subj-q {
    color: #f9a8d4 !important;
    font-weight: 800;
}
#student-panel .s-quest-ring {
    background: conic-gradient(var(--ring, #10b981) calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0) !important;
}
#student-panel .s-quest-ring::before {
    background: rgba(15, 23, 42, 0.92) !important;
}
#student-panel .s-quest-ring span {
    color: #f8fafc !important;
}
#student-panel .s-quest-period-switch {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#student-panel .s-quest-period-switch button {
    color: #d1d5db !important;
}
#student-panel .s-quest-period-switch button.is-active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
#student-panel .s-quest-period-switch button:hover:not(.is-active) {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Öğretmen paneli — foto arka plan üstünde koyu cam */
body[class*="theme-"] #teacher-panel {
    background: transparent !important;
}
#teacher-panel .tdash-island-cal,
#teacher-panel .tdash-island-stat,
#teacher-panel .tdash-card,
#teacher-panel .tdash-stat-card,
#teacher-panel .calendar-gcal,
#teacher-panel .tdash-ataturk-card {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f1f5f9;
}
body:not([class*="theme-"]) #teacher-panel {
    background:
        radial-gradient(ellipse at 10% 0%, rgba(20, 184, 166, 0.06), transparent 45%),
        #f1f5f9 !important;
}
body:not([class*="theme-"]) #teacher-panel .tdash-island-cal,
body:not([class*="theme-"]) #teacher-panel .tdash-island-stat,
body:not([class*="theme-"]) #teacher-panel .tdash-card,
body:not([class*="theme-"]) #teacher-panel .tdash-stat-card,
body:not([class*="theme-"]) #teacher-panel .calendar-gcal {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    color: inherit;
}

/* Tema seçim — gradient önizleme */
.theme-swatch-thumb {
    width: 100%;
    aspect-ratio: 1;
    max-width: 3.5rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(255,255,255,0.22);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.25);
}
#student-theme-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}
#student-theme-swatches button {
    min-width: 0;
}
#student-theme-swatches .theme-swatch-label {
    display: block;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
}
/* Öğrenci üst bar — soldan sağa sabit sıra, responsive wrap */
.s-student-header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}
.s-student-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem 0.6rem;
    width: 100%;
    min-width: 0;
}
.s-student-header-bar > * {
    flex-shrink: 0;
}
.s-student-header-welcome {
    font-weight: 800;
    color: #fff;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    max-width: min(12rem, 28vw);
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 640px) {
    .s-student-header-welcome {
        font-size: 0.9375rem;
        max-width: 14rem;
    }
}
.s-student-header-logo {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
}
.s-student-header-logo button {
    width: 100%;
    height: 100%;
    padding: 0.12rem;
    border: 0;
    background: #fff;
    border-radius: 0.55rem;
    cursor: pointer;
}
.s-student-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.s-student-header-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    max-width: 100%;
}
.s-student-header-spacer {
    flex: 1 1 0.5rem;
    min-width: 0;
    height: 0;
}
.s-header-avatar {
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
}
#s-profile-menu-wrap #s-sidebar-avatar {
    font-size: 0.8rem;
}
@media (max-width: 767px) {
    .s-student-header-logo,
    .s-student-header-spacer {
        display: none !important;
    }
    #student-panel > header.s-student-header {
        padding: 0.38rem 0.5rem !important;
    }
    .s-student-header-bar {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto auto auto;
        grid-template-rows: auto auto;
        gap: 0.28rem 0.32rem;
        align-items: center;
    }
    .s-student-header-bar > * {
        flex-shrink: unset;
        min-height: 0 !important;
        min-width: 0;
    }
    #s-profile-menu-wrap { grid-column: 1; grid-row: 1; z-index: 3; }
    #s-profile-menu-wrap #s-profile-trigger {
        display: block;
        border-radius: 9999px;
        padding: 2px;
        background: linear-gradient(135deg, #2dd4bf, #6366f1, #ec4899);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    #s-profile-menu-wrap .s-header-avatar,
    #s-profile-menu-wrap #s-avatar-photo {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        border-radius: 9999px !important;
        border: 2px solid rgba(15, 23, 42, 0.92) !important;
        box-sizing: border-box;
    }
    #s-profile-menu-wrap #s-sidebar-avatar {
        font-size: 0.92rem !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em;
        line-height: 1;
        background: linear-gradient(145deg, #0d9488 0%, #4f46e5 55%, #7c3aed 100%) !important;
    }
    #s-profile-menu-wrap #s-profile-trigger {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    .s-student-header-welcome { display: none; }
    #s-daily-streak-btn {
        grid-column: 2;
        grid-row: 1;
        padding: 0.24rem 0.48rem;
        border-radius: 0.62rem;
        justify-self: start;
        border: 1px solid rgba(251, 146, 60, 0.35);
        background: linear-gradient(135deg, rgba(234, 88, 12, 0.28), rgba(190, 24, 60, 0.22));
        box-shadow: 0 2px 10px rgba(234, 88, 12, 0.18);
    }
    .s-header-stats-toggle {
        grid-column: 3;
        grid-row: 1;
        width: 1.9rem;
        height: 1.9rem;
        padding: 0;
        border-radius: 0.58rem;
        border: 1px solid rgba(94, 234, 212, 0.38);
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98));
        color: #5eead4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        font-size: 0.64rem;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .s-header-stats-toggle:active {
        transform: scale(0.94);
    }
    .s-student-header-bar > .s-header-theme-btn,
    .s-student-header-bar > button.s-header-theme-btn {
        grid-column: 4;
        grid-row: 1;
        width: 2.05rem !important;
        height: 2.05rem !important;
        min-width: 2.05rem !important;
        padding: 0 !important;
        border-radius: 0.68rem !important;
        justify-self: end;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        background: linear-gradient(135deg, #6366f1 0%, #a855f7 48%, #ec4899 100%) !important;
        color: #fff !important;
        box-shadow:
            0 3px 14px rgba(99, 102, 241, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
    .s-student-header-bar > .s-header-theme-btn i {
        font-size: 0.92rem !important;
        filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
    }
    .s-student-header-bar > .s-header-theme-btn:active {
        transform: scale(0.94);
    }
    .s-student-header-bar > .s-header-logout-chip,
    .s-student-header-bar > .panel-logout-btn.s-header-logout-chip {
        grid-column: 5;
        grid-row: 1;
        margin-left: 0;
        width: 2.05rem !important;
        height: 2.05rem !important;
        min-width: 2.05rem !important;
        padding: 0 !important;
        border-radius: 0.68rem !important;
        justify-self: end;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(251, 113, 133, 0.5) !important;
        background: linear-gradient(135deg, rgba(244, 63, 94, 0.42), rgba(190, 18, 60, 0.62)) !important;
        color: #fff !important;
        box-shadow:
            0 3px 14px rgba(190, 24, 60, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    .s-student-header-bar > .s-header-logout-chip i,
    .s-student-header-bar > .panel-logout-btn.s-header-logout-chip i {
        font-size: 0.86rem !important;
        filter: drop-shadow(0 1px 2px rgba(76, 5, 25, 0.45));
    }
    .s-student-header-bar > .s-header-logout-chip:active {
        transform: scale(0.94);
    }
    .s-student-header-bar > .panel-logout-btn:not(.s-header-logout-chip) {
        grid-column: 5;
        grid-row: 1;
        margin-left: 0;
        padding: 0.26rem 0.36rem !important;
        font-size: 0.56rem !important;
        justify-self: end;
    }
    .s-student-header-bar .panel-logout-label { display: none; }
    .s-student-header-drawer {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.22rem 0.28rem;
        width: 100%;
        min-width: 0;
    }
    #student-panel > header.s-student-header.is-stats-collapsed .s-student-header-drawer {
        display: none !important;
    }
    .s-student-header-drawer > button[onclick="openLevelLeagueView()"] {
        padding: 0.12rem 0.28rem !important;
        border-radius: 0.5rem !important;
        gap: 0.12rem !important;
        flex-shrink: 0;
    }
    .s-student-header-drawer > button[onclick="openGpDetailModal()"] {
        padding: 0.12rem 0.3rem !important;
        border-radius: 0.5rem !important;
        flex-shrink: 0;
    }
    .s-student-header-drawer .s-student-header-countdown {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.12rem;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    .s-student-header-drawer > button[onclick="openLevelLeagueView()"] .w-8 {
        width: 1.15rem !important;
        height: 1.15rem !important;
    }
    .s-student-header-drawer > button[onclick="openLevelLeagueView()"] .w-8 svg {
        width: 1.15rem !important;
        height: 1.15rem !important;
    }
    .s-student-header-drawer > button[onclick="openLevelLeagueView()"] .text-sm {
        font-size: 0.5rem !important;
    }
    .s-student-header-drawer > button[onclick="openGpDetailModal()"] .text-base {
        font-size: 0.66rem !important;
    }
    .s-student-header-drawer > button[onclick="openGpDetailModal()"] .fa-gem {
        font-size: 0.56rem !important;
    }
    .s-student-header-drawer .s-student-header-countdown > div {
        min-width: 1.4rem !important;
        padding: 0.1rem 0.16rem !important;
    }
    .s-countdown-num {
        font-size: 0.6rem !important;
    }
    .s-countdown-label {
        font-size: 0.4rem !important;
        margin-top: 0.04rem !important;
    }
    .daily-streak-btn .streak-flame { font-size: 0.78rem; }
    .daily-streak-btn .streak-count { font-size: 0.64rem; font-weight: 800; }
    #student-panel > header.s-student-header.is-stats-collapsed .s-header-stats-toggle i {
        transform: rotate(-90deg);
    }
    #student-panel .s-bento-hero-greeting {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        font-size: clamp(0.95rem, 4.6vw, 1.2rem) !important;
        line-height: 1.22;
    }
}
@media (min-width: 768px) {
    .s-student-header-drawer {
        display: contents;
    }
    .s-header-stats-toggle {
        display: none !important;
    }
}
/* 8. sınıf LGS — üst bar kısayolu */
#s-header-lgs-btn.is-active {
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.55);
}
.lgs-subject-tab.active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(59, 130, 246, 0.15));
    border-color: rgba(45, 212, 191, 0.45);
    color: #fff;
}
.lgs-topic-row { transition: background 0.15s ease; }
.lgs-topic-row:hover { background: rgba(255, 255, 255, 0.03); }
.s-card-ataturk { background: linear-gradient(145deg, #1c1917 0%, #292524 100%) !important; border-color: rgba(251, 191, 36, 0.25) !important; }
.s-card-tempo { background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0f766e 100%) !important; }
.s-card-events { background: linear-gradient(145deg, #1e1b4b 0%, #312e81 100%) !important; border-color: #4338ca !important; }
.s-card-reading { background: linear-gradient(145deg, #3730a3 0%, #5b21b6 100%) !important; }
.s-card-exam { background: linear-gradient(145deg, #78350f 0%, #92400e 100%) !important; border-color: #b45309 !important; }
.s-card-gym { background: linear-gradient(145deg, #155e75 0%, #0e7490 100%) !important; }
.s-card-mood { background: linear-gradient(145deg, #4c1d95 0%, #6b21a8 100%) !important; border-color: #7c3aed !important; }
.s-card-pending { background: linear-gradient(145deg, #1e3a5f 0%, #1e40af 100%) !important; border-color: #3b82f6 !important; }
.s-card-booster { background: linear-gradient(90deg, rgba(219, 39, 119, 0.75), rgba(126, 34, 206, 0.75)) !important; }
.s-card-action { background: var(--s-theme-surface) !important; border-color: rgba(148, 163, 184, 0.2) !important; }

/* Öğrenci Ana Sayfa — akışkan tam genişlik (kesme yok) */
#student-panel main {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    box-sizing: border-box !important;
    min-height: 0;
}
.s-bento-home {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}
/*
 * Dinamik Adalar — tek motor: CSS Grid. Eşit ada birimi.
 * JS masonry (is-packed) kapalı: absolute + height:auto adaları bozuyordu.
 */
.s-bento-mesh:not(.is-custom) {
    --bento-gap: 1rem;
    --bento-island-h: 15.5rem;
    --bento-island-max-h: var(--bento-island-h);
    --s-cal-box-h: var(--bento-island-h);
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--bento-island-h), auto);
    gap: var(--bento-gap);
    align-items: stretch;
    width: 100%;
    max-width: min(100%, 76rem);
    margin: 0 auto;
    padding: 0.25rem 1.25rem 1.75rem;
    overflow: visible;
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    position: relative;
}
@media (max-width: 1099px) {
    .s-bento-mesh:not(.is-custom) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        --bento-island-h: 14.5rem;
    }
}
@media (max-width: 899px) {
    .s-bento-mesh:not(.is-custom) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        --bento-gap: 0.75rem;
        --bento-island-h: 13.5rem;
    }
}
@media (max-width: 639px) {
    #student-panel .s-bento-mesh:not(.is-custom),
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        --bento-gap: 0.55rem;
        --bento-island-h: 12.25rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
    /* Dar ekranda hub + Atatürk + takvim tam genişlik — yarım sütun kalmasın */
    .s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
    .s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"],
    .s-bento-mesh:not(.is-custom) > [data-widget="ataturk"],
    .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] {
        grid-column: 1 / -1;
    }
    .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] { order: 3; }
}
@media (min-width: 640px) {
    .s-bento-mesh:not(.is-custom) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.s-bento-mesh:not(.is-custom) > [data-widget] {
    display: flex !important;
    flex-direction: column;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--bento-island-h) !important;
    min-height: 0 !important;
    max-height: var(--bento-island-h) !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    grid-column: span 1;
    z-index: 1;
}
.s-bento-mesh:not(.is-custom) > [data-widget="metrics"] {
    display: grid !important;
    flex-direction: unset !important;
    grid-column: span 2;
    grid-row: span 2;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}
.s-bento-mesh:not(.is-custom) > [data-widget="summary"],
.s-bento-mesh:not(.is-custom) > [data-widget="mentor"] {
    grid-column: 1 / -1;
    grid-row: auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
.s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"] {
    overflow: visible;
}
/* Sıra: 4 sütunda Atatürk|Saat|Takvim×2 — delik yok */
.s-bento-mesh:not(.is-custom) > [data-widget="ataturk"]  { order: 1; }
.s-bento-mesh:not(.is-custom) > [data-widget="clock"]    { order: 2; }
.s-bento-mesh:not(.is-custom) > [data-widget="calendar"] { order: 3; }
.s-bento-mesh:not(.is-custom) > [data-widget="hero"]     { order: 4; }
.s-bento-mesh:not(.is-custom) > [data-widget="events"]   { order: 5; }
.s-bento-mesh:not(.is-custom) > [data-widget="tasks"]    { order: 6; }
.s-bento-mesh:not(.is-custom) > [data-widget="homework"] { order: 7; }
.s-bento-mesh:not(.is-custom) > [data-widget="metrics"],
.s-bento-mesh:not(.is-custom) > .s-home-quad,
.s-bento-mesh:not(.is-custom) > #s-home-quad {
    order: 8;
}
.s-bento-mesh:not(.is-custom) > [data-widget="pending"]  { order: 9; }
.s-bento-mesh:not(.is-custom) > [data-widget="mentor"]   { order: 40; grid-column: 1 / -1; }
.s-bento-mesh:not(.is-custom) > [data-widget="summary"]  { order: 50; grid-column: 1 / -1; }
.s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
.s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"] { order: 4; }
.s-bento-mesh:not(.is-custom) > [data-widget="calendar"] {
    grid-column: span 2;
}
@media (min-width: 1100px) {
    .s-bento-mesh:not(.is-custom) > [data-widget="metrics"],
    .s-bento-mesh:not(.is-custom) > .s-home-quad,
    .s-bento-mesh:not(.is-custom) > #s-home-quad {
        grid-column: span 2;
        grid-row: span 2;
    }
}
/* 3 sütun: Yeni Merhaba Ekranı takvimle üst sırada */
@media (min-width: 900px) and (max-width: 1099px) {
    .s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
    .s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"] { order: 3; }
    .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] { order: 4; }
}
/* Dört modül — dynamic island 2×2 grid (Kitap|Oyun / LGS|Duygu) */
.s-home-quad,
#s-home-quad {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
    grid-template-areas:
        "reading mood"
        "gym exam" !important;
    gap: var(--bento-gap, 0.55rem) !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    position: relative !important;
    align-content: stretch !important;
    align-items: stretch !important;
}
.s-home-quad > .s-bento-metric,
#s-home-quad > .s-bento-metric,
.s-home-quad > .s-home-quad-cell,
#s-home-quad > .s-home-quad-cell,
.s-home-quad > [data-quad-cell],
#s-home-quad > [data-quad-cell],
.s-bento-island-quad > .s-bento-metric {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 7.25rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.45rem 0.5rem !important;
    border-radius: 1rem !important;
    isolation: isolate;
    overflow: hidden !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    flex: none !important;
}
#s-home-quad > .s-bento-metric.is-reading,
#s-home-quad > [data-quad-cell="reading"] { grid-area: reading !important; }
#s-home-quad > .s-bento-metric.is-gym,
#s-home-quad > [data-quad-cell="gym"] { grid-area: gym !important; }
#s-home-quad > .s-bento-metric.is-exam,
#s-home-quad > [data-quad-cell="exam"] {
    grid-area: exam !important;
    min-height: 9.5rem !important;
}
#s-home-quad > .s-bento-metric.is-mood,
#s-home-quad > [data-quad-cell="mood"] { grid-area: mood !important; }
.s-home-quad .s-bento-metric.is-reading .s-bento-reading-layout {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 0.3rem;
    margin-top: 0.1rem;
}
.s-home-quad .s-bento-cover-frame {
    width: 2.4rem;
    height: 3.1rem;
    align-self: center;
    flex-shrink: 0;
}
.s-home-quad .s-bento-reading-hint {
    font-size: 0.52rem !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-home-quad .s-exam-gauge-labels { display: none; }
.s-home-quad .s-bento-metric.is-exam .s-bento-metric-detail { display: none; }
.s-home-quad .s-gym-mini-strip { display: none; }
.s-bento-mesh > .s-home-quad {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 2;
}
.s-home-quad .s-exam-gauge {
    display: none !important;
}
.s-home-quad .s-bento-metric.is-exam .s-bento-metric-sub {
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
}
/* (Eski quad sarmalayıcı — s-home-quad HARİÇ; yeni ana sayfa quad ile çakışmasın) */
.s-bento-quad-grid:not(#s-home-quad):not(.s-home-quad) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    grid-template-rows: minmax(0, 1.18fr) minmax(0, 1.18fr) !important;
    grid-template-areas:
        "book mood"
        "gym lgs";
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-height: min(92vw, 24rem);
    aspect-ratio: 1.05;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    flex-direction: unset !important;
}
.s-bento-quad-grid:not(#s-home-quad):not(.s-home-quad) > .s-bento-metric.is-reading { grid-area: book; }
.s-bento-quad-grid:not(#s-home-quad):not(.s-home-quad) > .s-bento-metric.is-exam    { grid-area: lgs; }
.s-bento-quad-grid:not(#s-home-quad):not(.s-home-quad) > .s-bento-metric.is-gym     { grid-area: gym; }
.s-bento-quad-grid:not(#s-home-quad):not(.s-home-quad) > .s-bento-metric.is-mood    { grid-area: mood; }
.s-bento-quad-grid:not(#s-home-quad):not(.s-home-quad) > .s-bento-metric {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.48rem 0.52rem !important;
    border-radius: 0.82rem !important;
    align-self: stretch;
    justify-self: stretch;
}
.s-bento-quad-grid .s-bento-metric.is-reading .s-bento-reading-layout {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 0.3rem;
    margin-top: 0.1rem;
}
.s-bento-quad-grid .s-bento-cover-frame {
    width: 2.4rem;
    height: 3.1rem;
    align-self: center;
    flex-shrink: 0;
}
.s-bento-quad-grid .s-bento-reading-hint {
    font-size: 0.52rem !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-bento-quad-grid .s-exam-gauge-labels {
    display: none;
}
.s-bento-quad-grid .s-bento-metric.is-exam .s-bento-metric-detail {
    display: none;
}
.s-bento-quad-grid .s-gym-mini-strip {
    display: none;
}
.s-bento-quad-grid > .s-bento-metric:hover {
    transform: translateY(-1px);
    z-index: 2;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget="quad"],
.s-bento-mesh.is-packed:not(.is-editing) > #s-home-quad {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "reading mood"
        "gym exam" !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    z-index: 3;
}
.s-bento-mesh.is-custom > [data-widget="quad"],
.s-bento-mesh.is-editing > [data-widget="quad"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "reading mood"
        "gym exam" !important;
    aspect-ratio: auto !important;
}
.s-bento-quad-grid .s-bento-metric.is-gym .s-gym-sub,
.s-bento-quad-grid .s-bento-metric.is-mood .s-bento-metric-sub {
    font-size: 0.52rem !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.s-bento-quad-grid .s-bento-metric.is-gym .s-gym-play,
.s-bento-quad-grid .s-bento-metric.is-mood .s-bento-metric-value {
    font-size: clamp(1.1rem, 8cqi, 1.45rem) !important;
}
.s-bento-mesh:not(.is-custom) .s-bento-mentor {
    display: flex !important;
    width: 100%;
    margin-top: 0.5rem !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.s-bento-mesh:not(.is-custom) .s-bento-pending {
    display: flex !important;
    width: 100%;
    min-height: 8rem !important;
    max-height: 12rem;
    height: auto !important;
    padding: 1.1rem 1.15rem !important;
    overflow: hidden !important;
    border-top: none !important;
}
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="calendar"],
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="ataturk"],
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="clock"],
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="hero"],
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="events"],
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="tasks"],
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="homework"] {
    height: var(--bento-island-h) !important;
    min-height: 0 !important;
    max-height: var(--bento-island-h) !important;
    overflow: hidden !important;
}
.s-bento-mesh:not(.is-custom):not(.is-editing) > [data-widget="metrics"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.s-bento-mesh:not(.is-custom) .s-bento-calendar,
.s-bento-mesh.is-custom .s-bento-calendar,
.s-bento-mesh.is-editing .s-bento-calendar,
.s-bento-mesh.is-packed .s-bento-calendar {
    --s-cal-box-h: auto;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 14rem !important;
    max-height: none !important;
    overflow: hidden;
    margin: 0 !important;
}
.s-bento-mesh.is-custom .s-bento-calendar.is-study-view,
.s-bento-mesh.is-editing .s-bento-calendar.is-study-view,
.s-bento-mesh.is-packed .s-bento-calendar.is-study-view {
    min-height: 18rem !important;
    overflow: visible !important;
}
.s-bento-mesh.is-custom > [data-widget="calendar"].is-study-view,
.s-bento-mesh.is-editing > [data-widget="calendar"].is-study-view,
.s-bento-mesh.is-packed > [data-widget="calendar"].is-study-view {
    overflow: visible !important;
}
/* Atatürk: doğal en-boy; 2 sütunda daha uzun foto */
.s-bento-mesh:not(.is-custom) .s-bento-ataturk,
.s-bento-mesh.is-custom .s-bento-ataturk,
.s-bento-mesh.is-editing .s-bento-ataturk {
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}
.s-bento-mesh:not(.is-custom) .s-bento-ataturk .s-bento-ataturk-photo-wrap {
    flex: 0 0 auto;
    width: 100%;
    overflow: hidden;
    border-radius: 0.85rem;
    aspect-ratio: 16 / 9;
    max-height: 9.5rem;
}
.s-bento-mesh:not(.is-custom) .s-bento-ataturk .s-bento-ataturk-photo,
.s-bento-mesh.is-custom .s-bento-ataturk .s-bento-ataturk-photo,
.s-bento-mesh.is-editing .s-bento-ataturk .s-bento-ataturk-photo {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}
@media (min-width: 640px) and (max-width: 899px) {
    .s-bento-mesh:not(.is-custom) .s-bento-ataturk .s-bento-ataturk-photo-wrap {
        aspect-ratio: 16 / 10;
        max-height: none;
    }
}
@media (min-width: 900px) {
    .s-bento-mesh:not(.is-custom) .s-bento-ataturk .s-bento-ataturk-photo-wrap {
        aspect-ratio: 16 / 11;
    }
}
@media (max-width: 639px) {
    .s-bento-mesh:not(.is-custom) .s-bento-calendar,
    .s-bento-mesh.is-custom .s-bento-calendar {
        --s-cal-box-h: auto;
        max-width: 100% !important;
    }
}
/* Mentör şeridi: hafif ayrım (kocaman boş şerit yok) */
.s-bento-mesh:not(.is-custom) .s-bento-mentor {
    margin-top: 0.5rem !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.s-bento-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin-top: 0.35rem;
}
.s-bento-pending-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.s-bento-pending-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
}
.s-bento-pending-item .s-pending-ico {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 0.75rem;
}
.s-bento-pending-item .s-pending-ico.is-inventory {
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
}
.s-bento-pending-item .s-pending-ico.is-academic {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}
.s-bento-pending-item .s-pending-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s-bento-pending-item .s-pending-meta {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.1rem;
}
.s-bento-mesh:not(.is-custom) .s-bento-events.is-empty:not(.is-archive) {
    min-height: 0 !important;
    max-height: 9.5rem;
}
.s-bento-mesh:not(.is-custom) .s-bento-events:not(.is-empty),
.s-bento-mesh:not(.is-custom) .s-bento-events.is-archive {
    min-height: 0;
    max-height: 16rem;
}
/* Genel ince scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.55);
    border-radius: 999px;
}
/* Haftalık takvim — sekme paneli ince dikey scrollbar (yatay yok) */
.study-day-panel::-webkit-scrollbar { width: 6px; height: 0; }
.study-day-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.55);
    border-radius: 999px;
}
.s-bento-void { display: none; }
#student-panel #summary-home.s-quest-dash {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    box-sizing: border-box;
}
.s-bento-mesh > [data-widget],
.s-bento-card,
.s-bento-metric {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}
.s-bento-mesh.is-custom {
    --bento-gap: 1.25rem;
    --bento-island-max-h: 26rem;
    --s-cal-box-h: 20rem;
    display: grid !important;
    gap: var(--bento-gap);
    max-width: min(100%, 76rem);
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr)) !important;
}
.s-bento-mesh.is-custom > [data-widget] {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.s-bento-mesh.is-custom > [data-widget="metrics"] {
    overflow: visible !important;
    min-height: 0 !important;
}
.s-bento-card {
    background: #fff;
    border-radius: 1.75rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 1.15rem 1.25rem;
    overflow: hidden;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    isolation: isolate;
    box-sizing: border-box;
}
.s-bento-card.is-glass {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, 0.85);
}
.s-bento-welcome-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: min(100%, 17.5rem);
    min-height: 12rem;
    height: auto;
    max-width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: 1.75rem;
}
.s-bento-welcome-stack .s-bento-hero {
    flex: 1 1 auto;
    min-width: 0;
}
.s-bento-welcome-stack .s-bento-clock {
    flex: 0 0 auto;
    min-width: 0;
}
@media (min-width: 768px) {
    .s-bento-welcome-stack {
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
    }
    .s-bento-welcome-stack .s-bento-hero {
        flex: 1.35 1 0;
    }
    .s-bento-welcome-stack .s-bento-clock {
        flex: 1 1 0;
        max-width: 18rem;
    }
}
.s-bento-hero {
    container-type: inline-size;
    container-name: s-hero;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    position: relative;
    min-height: 12rem;
    max-height: none;
    height: auto;
    padding: clamp(0.85rem, 3.2cqw, 1.5rem) clamp(0.95rem, 3.5cqw, 1.6rem);
    overflow: hidden;
}
.s-bento-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.55), transparent 45%);
    pointer-events: none;
}
.s-bento-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    gap: clamp(0.45rem, 2.2cqw, 1.15rem);
}
.s-bento-hero-top {
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 2.5cqw, 1.1rem);
}
.s-bento-hero-photo {
    width: clamp(2.75rem, 12cqw, 5rem);
    height: clamp(2.75rem, 12cqw, 5rem);
    border-radius: 9999px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.9);
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.s-bento-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-bento-hero-greeting {
    font-size: clamp(1.15rem, 5.5cqw, 1.85rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.s-bento-hero-sub {
    font-size: clamp(0.78rem, 3cqw, 1rem);
    font-weight: 700;
    color: #d1d5db;
    margin-top: 0.15em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.s-bento-tempo-btn {
    width: 100%;
    text-align: left;
    border-radius: 0.9rem;
    padding: clamp(0.55rem, 2.4cqw, 1.15rem) clamp(0.7rem, 3cqw, 1.25rem);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: background 0.15s;
    flex: 1 1 auto;
    font-size: clamp(0.85rem, 3.1cqw, 1.2rem);
    font-weight: 700;
}
.s-bento-tempo-btn:hover { background: rgba(255, 255, 255, 0.82); }
.s-bento-tempo-btn .text-\[10px\],
.s-bento-tempo-btn span.text-\[10px\] {
    font-size: clamp(0.62rem, 2.2cqw, 0.9rem) !important;
}
.s-bento-tempo-btn .text-\[11px\],
.s-bento-tempo-btn p.text-\[11px\] {
    font-size: clamp(0.7rem, 2.5cqw, 1rem) !important;
}
.s-bento-tempo-btn .text-xs {
    font-size: clamp(0.75rem, 2.7cqw, 1.05rem) !important;
}
.s-bento-tempo-btn .text-sm {
    font-size: clamp(0.85rem, 3.2cqw, 1.25rem) !important;
}

/* —— Yeni Merhaba Ekranı (saat + selamlama + hava/mesaj + tempo) —— */
.s-bento-yeni-merhaba,
.s-bento-phone-hub {
    container-type: inline-size;
    container-name: s-yeni-merhaba;
    background: linear-gradient(165deg, #38bdf8 0%, #22d3ee 38%, #14b8a6 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 14px 40px rgba(14, 116, 144, 0.22);
    border-radius: 1.75rem;
    padding: 0.5rem;
    min-height: 100%;
    height: auto;
    overflow: visible;
}
.s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
.s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"],
.s-bento-mesh.is-packed > [data-widget="yeniMerhaba"],
.s-bento-mesh.is-packed > [data-widget="phoneHub"] {
    min-height: clamp(18rem, 72vw, 24rem);
    align-self: stretch;
    width: 100%;
}
@media (min-width: 640px) {
    .s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
    .s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"],
    .s-bento-mesh.is-packed > [data-widget="yeniMerhaba"],
    .s-bento-mesh.is-packed > [data-widget="phoneHub"] {
        min-height: clamp(19rem, 42cqi, 26rem);
    }
}
@media (min-width: 900px) {
    .s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
    .s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"] {
        min-height: clamp(20rem, 36cqi, 28rem);
    }
}
.s-bento-mesh:not(.is-custom) > [data-widget="ataturk"],
.s-bento-mesh:not(.is-custom) > [data-widget="calendar"] {
    min-height: clamp(11rem, 26cqi, 17rem);
}
.s-yeni-merhaba-frame,
.s-phone-hub-frame {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
    min-height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.28) 100%);
    border-radius: 1.35rem;
    padding: 0.7rem 0.75rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.s-yme-hourglass {
    width: clamp(3.25rem, 14cqi, 4.5rem) !important;
}
@container s-yeni-merhaba (min-width: 400px) {
    .s-yme-notifs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .s-yme-notifs .s-bento-lock-notif.is-msg { margin-top: 0 !important; }
}
@container s-yeni-merhaba (min-width: 560px) {
    .s-phone-hub-greet-compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 0.5rem;
    }
}
.s-phone-hub-clock-block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
}
.s-phone-hub-clock-main { flex: 1; min-width: 0; }
.s-phone-hub-kicker {
    font-size: clamp(0.62rem, 2.2cqi, 0.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(15, 23, 42, 0.55);
}
.s-phone-hub-clock-big {
    font-size: clamp(2rem, 11cqi, 3.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    margin-top: 0.1rem;
}
.s-phone-hub-date {
    margin-top: 0.2rem;
    font-size: clamp(0.62rem, 2.3cqi, 0.78rem);
    font-weight: 700;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.25;
}
.s-phone-hub-lgs {
    margin-top: 0.15rem;
    font-size: clamp(0.58rem, 2cqi, 0.72rem);
    font-weight: 800;
    color: #047857;
}
.s-phone-hub-hourglass {
    width: clamp(2.4rem, 10cqi, 3.2rem);
    flex-shrink: 0;
    opacity: 0.9;
}
.s-phone-hub-hourglass img { width: 100%; height: auto; display: block; }
.s-phone-hub-greet-compact {
    padding: 0.15rem 0.1rem 0;
}
.s-bento-yeni-merhaba .s-bento-hero-greeting,
.s-bento-phone-hub .s-bento-hero-greeting {
    color: #0f172a;
    font-size: clamp(1rem, 4.2cqi, 1.35rem);
    white-space: normal;
}
.s-bento-yeni-merhaba .s-bento-hero-sub,
.s-bento-phone-hub .s-bento-hero-sub {
    color: rgba(15, 23, 42, 0.68);
    font-size: clamp(0.68rem, 2.5cqi, 0.82rem);
    -webkit-line-clamp: 2;
}
.s-phone-hub-notifs { margin-top: 0.05rem; }
.s-phone-hub-notifs .s-bento-lock-notif.is-weather { z-index: 2; }
.s-phone-hub-notifs .s-bento-lock-notif.is-msg { z-index: 1; margin-top: -0.28rem; }
.s-bento-lock-notif.is-rich {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    border-radius: 1.15rem;
}
.s-lock-notif-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}
.s-lock-notif-app-pill {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
}
.s-lock-notif-app-pill.is-wx {
    background: rgba(14, 165, 233, 0.18);
    color: #0369a1;
}
.s-lock-notif-app-pill.is-msg {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}
.s-lock-notif-time {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.45);
}
.s-lock-notif-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.s-bento-lock-notif-sub {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.s-lock-notif-avatar {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 9999px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, #0d9488, #0891b2);
    box-shadow: 0 3px 10px rgba(8, 145, 178, 0.28);
}
.s-bento-lock-notif.is-weather.wx-bg-clear {
    background: linear-gradient(145deg, rgba(254, 249, 195, 0.92), rgba(255, 255, 255, 0.88));
}
.s-bento-lock-notif.is-weather.wx-bg-rain {
    background: linear-gradient(145deg, rgba(224, 242, 254, 0.95), rgba(255, 255, 255, 0.9));
}
.s-bento-lock-notif.is-weather.wx-bg-storm {
    background: linear-gradient(145deg, rgba(226, 232, 240, 0.95), rgba(255, 255, 255, 0.9));
}
.s-phone-tempo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.s-phone-tempo-widget {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 1.15rem;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(236, 253, 245, 0.82));
    color: #0f172a;
    transition: transform 0.15s, box-shadow 0.15s;
    margin-top: auto;
}
.s-phone-tempo-widget:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.s-phone-tempo-kicker {
    font-size: clamp(0.58rem, 2.1cqi, 0.72rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #047857;
}
.s-phone-tempo-pct {
    font-size: clamp(0.85rem, 3.2cqi, 1.1rem);
    font-weight: 900;
    color: #059669;
    font-variant-numeric: tabular-nums;
}
.s-phone-tempo-quote {
    margin-top: 0.35rem;
    font-size: clamp(0.68rem, 2.5cqi, 0.82rem);
    font-weight: 700;
    font-style: italic;
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.35;
}
.s-phone-tempo-quote.is-on-track { color: #065f46; }
.s-phone-tempo-quote.is-urge { color: #b45309; }
.s-phone-tempo-sub {
    margin-top: 0.2rem;
    font-size: clamp(0.62rem, 2.2cqi, 0.75rem);
    font-weight: 600;
    color: rgba(15, 23, 42, 0.62);
}
.s-phone-tempo-bar-wrap {
    margin-top: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    overflow: hidden;
}
.s-phone-tempo-bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #34d399, #10b981);
    transition: width 0.45s ease;
}

/* Günlük tempo — tam ekran */
#s-daily-tempo-hub-modal {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: none;
    background: #0b1220;
}
#s-daily-tempo-hub-modal.hidden { display: none !important; }
#s-daily-tempo-hub-modal.is-open { display: block !important; }
body.s-daily-tempo-open { overflow: hidden !important; }
.s-daily-tempo-screen {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0f766e 0%, #0f172a 28%, #020617 100%);
    animation: sDailyTempoIn 0.22s ease-out;
}
@keyframes sDailyTempoIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.s-daily-tempo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.s-daily-tempo-header-main { min-width: 0; }
.s-daily-tempo-close {
    width: 2.35rem;
    height: 2.35rem;
    border: none;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.s-daily-tempo-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.s-daily-tempo-eyebrow {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6ee7b7;
}
.s-daily-tempo-title {
    margin-top: 0.15rem;
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}
.s-daily-tempo-lead {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.88);
}
.s-daily-tempo-progress-card {
    padding: 0.85rem;
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.s-daily-tempo-progress-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.s-daily-tempo-ring {
    --dth-pct: 0;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#34d399 calc(var(--dth-pct) * 1%), rgba(255, 255, 255, 0.1) 0);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.12);
    font-size: 1rem;
    font-weight: 900;
    color: #ecfdf5;
}
.s-daily-tempo-progress-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: #d1fae5;
}
.s-daily-tempo-progress-meta strong {
    font-size: 1.15rem;
    color: #6ee7b7;
}
.s-daily-tempo-remaining {
    width: 100%;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.82);
}
.s-daily-tempo-progress-track {
    margin-top: 0.65rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: rgba(2, 6, 23, 0.75);
    overflow: hidden;
}
.s-daily-tempo-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #34d399, #14b8a6);
    transition: width 0.45s ease;
}
.s-dth-chart-section {
    padding: 0.85rem;
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.s-dth-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.s-dth-chart-head h3,
.s-dth-section-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a7f3d0;
}
.s-dth-chart-legend {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.s-dth-chart-legend .is-goal {
    width: 1rem;
    height: 2px;
    background: #fbbf24;
    border-radius: 9999px;
    display: inline-block;
}
.s-dth-chart-wrap { width: 100%; overflow: hidden; }
.s-dth-chart-svg { width: 100%; height: auto; display: block; }
.s-dth-chart-goal { stroke: rgba(251, 191, 36, 0.75); stroke-width: 1.5; stroke-dasharray: 4 4; }
.s-dth-chart-goal-label { fill: #fbbf24; font-size: 9px; font-weight: 800; }
.s-dth-chart-line { stroke: #34d399; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.s-dth-chart-dot { fill: #0f172a; stroke: #34d399; stroke-width: 2; }
.s-dth-chart-dot.is-today { stroke: #fbbf24; stroke-width: 2.5; }
.s-dth-chart-dot.is-good { fill: #065f46; }
.s-dth-chart-label { fill: rgba(226, 232, 240, 0.75); font-size: 9px; font-weight: 700; }
.s-dth-chart-caption {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.72);
    text-align: center;
}
.s-dth-tasks-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.s-dth-task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
@media (min-width: 520px) {
    .s-dth-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .s-dth-task-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-dth-task-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.65rem 0.7rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.42);
    min-height: 5.25rem;
}
.s-dth-task-card.is-done {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(6, 78, 59, 0.35);
}
.s-dth-task-card.is-pending {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(120, 53, 15, 0.22);
}
.s-dth-task-ico { font-size: 1.25rem; line-height: 1; }
.s-dth-task-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.25;
}
.s-dth-task-badge {
    margin-top: auto;
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
}
.s-dth-task-card.is-done .s-dth-task-badge {
    background: rgba(52, 211, 153, 0.2);
    color: #6ee7b7;
}
.s-dth-task-card.is-pending .s-dth-task-badge {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}
.s-dth-task-empty {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
    padding: 0.75rem;
}
.s-dth-sutlac {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem;
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.s-dth-sutlac-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    object-fit: cover;
    flex-shrink: 0;
    background: #134e4a;
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.s-dth-sutlac-bubble { flex: 1; min-width: 0; }
.s-dth-sutlac-name {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    color: #6ee7b7;
    margin-bottom: 0.25rem;
}
.s-dth-sutlac-comment {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
    color: #e2e8f0;
}
.s-daily-tempo-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem max(0.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.55);
}
.s-daily-tempo-history-btn {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    font-size: 0.75rem;
    font-weight: 800;
    transition: background 0.15s;
}
.s-daily-tempo-history-btn:hover { background: rgba(30, 41, 59, 0.85); }

.s-bento-clock {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(255, 255, 255, 0.5), transparent 40%),
        radial-gradient(ellipse at 90% 95%, rgba(255, 255, 255, 0.22), transparent 48%),
        linear-gradient(160deg, #7dd3fc 0%, #38bdf8 28%, #22d3ee 55%, #34d399 100%);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 36px rgba(14, 116, 144, 0.2);
    max-height: none;
    min-height: min-content;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    padding: clamp(0.85rem, 3.5cqi, 1.25rem);
    overflow: visible;
}
.s-bento-clock-widget {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(0.55rem, 2.8cqi, 0.9rem);
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 1 auto;
}
.s-bento-clock-toprow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.25rem, 1.5cqi, 0.5rem);
    width: 100%;
}
.s-bento-clock-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 4cqi, 1.5rem);
    width: 100%;
    height: 100%;
    min-height: 100%;
}
.s-bento-clock-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
}
.s-bento-clock-kicker,
.s-bento-clock-text > span:first-child {
    font-size: clamp(0.65rem, 2.8cqi, 0.85rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
}
.s-bento-clock-time {
    font-size: clamp(2.15rem, 13cqi, 3.4rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.045em;
    line-height: 1;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.s-bento-clock-date {
    font-size: clamp(0.8rem, 3.6cqi, 1.05rem);
    color: rgba(15, 23, 42, 0.62);
    margin-top: 0.25rem;
    font-weight: 700;
}
.s-bento-weather {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.s-bento-weather-icon {
    width: clamp(2.4rem, 14cqi, 3.25rem);
    height: clamp(2.4rem, 14cqi, 3.25rem);
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.12));
}
.s-bento-weather-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}
.s-bento-weather-temp {
    font-size: clamp(1.25rem, 7cqi, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}
.s-bento-weather-loc {
    font-size: clamp(0.72rem, 3.2cqi, 0.92rem);
    font-weight: 800;
    color: rgba(15, 23, 42, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s-bento-weather-cond {
    font-size: clamp(0.62rem, 2.7cqi, 0.78rem);
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
    margin-top: 0.1rem;
}
/* Kilit ekranı: stacked bildirimler */
.s-bento-lock-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}
.s-bento-lock-notif {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, filter 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.s-bento-lock-notif-chevron {
    color: rgba(15, 23, 42, 0.35);
    font-size: 0.65rem;
    flex-shrink: 0;
}
.s-bento-lock-notif-icon.is-weather {
    background: linear-gradient(145deg, var(--wx-grad-a, #38bdf8), var(--wx-grad-b, #0284c7));
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
    position: relative;
    overflow: hidden;
}
.s-bento-lock-notif-icon.is-weather .fa-sun {
    color: #fef08a !important;
    filter: drop-shadow(0 1px 1px rgba(120, 53, 15, 0.65));
}
.s-bento-lock-notif-icon.is-weather .fa-cloud-sun,
.s-bento-lock-notif-icon.is-weather .fa-cloud-moon {
    color: #fff !important;
    filter: drop-shadow(0 1px 1px rgba(3, 105, 161, 0.45));
}
.s-bento-lock-notif.is-msg {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 253, 250, 0.94));
    border: 1px solid rgba(45, 212, 191, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.s-bento-lock-notif.is-msg .s-bento-lock-notif-text {
    color: #475569;
    font-weight: 700;
}
.s-bento-lock-notif.is-msg .s-bento-lock-notif-title {
    color: #0f172a;
}
.s-bento-lock-notif.is-sutlac {
    background: linear-gradient(145deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(251, 191, 36, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    order: -1;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem 0.55rem 0.55rem;
    min-height: 3.55rem;
}
.s-sutlac-lock-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    flex: 0 0 auto;
    width: 2.65rem;
}
.s-sutlac-lock-brand {
    font-size: 0.48rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #b45309;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
.s-bento-lock-notif.is-sutlac .s-bento-lock-notif-body {
    gap: 0.14rem;
    padding-top: 0.06rem;
}
.s-bento-lock-notif.is-sutlac .s-bento-lock-notif-title {
    color: #1c1917;
    font-weight: 850;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: normal;
}
.s-bento-lock-notif.is-sutlac .s-bento-lock-notif-text {
    color: #57534e;
    font-weight: 650;
    font-size: 0.7rem;
    line-height: 1.38;
    white-space: normal !important;
    overflow: visible;
    text-overflow: unset;
    display: block;
    -webkit-line-clamp: unset;
}
.s-bento-lock-notif-icon.is-sutlac {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    background: linear-gradient(145deg, #fde68a, #f59e0b);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.32);
    padding: 0;
    overflow: hidden;
}
.s-bento-lock-notif-icon.is-sutlac img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-bento-lock-notif.is-sutlac:active {
    transform: scale(0.985);
}
.s-bento-lock-notif.is-msg:active {
    transform: scale(0.99);
}
.s-lock-weather-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.s-lock-weather-refresh {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: none;
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.s-lock-weather-refresh:hover { background: rgba(14, 165, 233, 0.22); transform: rotate(-12deg); }
.s-lock-weather-source {
    margin: 0.35rem 0 0;
    font-size: 0.58rem;
    color: #94a3b8;
    font-weight: 700;
}
.s-wx-live-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.s-wx-live-icon.wx-size-sm { font-size: 0.95rem; }
.s-wx-live-icon.wx-kind-clear i { animation: wxSunPulse 2.8s ease-in-out infinite; color: #fef08a; filter: drop-shadow(0 1px 1px rgba(120, 53, 15, 0.5)); }
.s-bento-lock-notif-icon.is-weather.s-wx-live-icon.wx-kind-clear i { color: #fef08a !important; }
.s-wx-live-icon.wx-kind-partly i { animation: wxCloudFloat 3.2s ease-in-out infinite; color: #38bdf8; }
.s-wx-live-icon.wx-kind-rain i,
.s-wx-live-icon.wx-kind-drizzle i { animation: wxRainBob 1.6s ease-in-out infinite; color: #3b82f6; }
.s-wx-live-icon.wx-kind-snow i { animation: wxSnowSpin 4s linear infinite; color: #e2e8f0; }
.s-wx-live-icon.wx-kind-storm i { animation: wxStormFlash 1.8s ease-in-out infinite; color: #a78bfa; }
.s-wx-live-icon.wx-kind-fog i { animation: wxFogPulse 2.4s ease-in-out infinite; color: #94a3b8; }
.s-wx-live-icon.wx-kind-cloud i { animation: wxCloudFloat 3.6s ease-in-out infinite; color: #64748b; }
.s-wx-live-icon.wx-kind-loading i { color: #94a3b8; }
.s-wx-live-icon.wx-kind-rain::after,
.s-wx-live-icon.wx-kind-drizzle::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -2px;
    height: 6px;
    background: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(59, 130, 246, 0.55) 3px, rgba(59, 130, 246, 0.55) 4px);
    animation: wxRainFall 0.7s linear infinite;
    pointer-events: none;
}
@keyframes wxSunPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.35)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.65)); }
}
@keyframes wxCloudFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes wxRainBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}
@keyframes wxRainFall {
    from { transform: translateY(-4px); opacity: 0; }
    to { transform: translateY(4px); opacity: 1; }
}
@keyframes wxSnowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes wxStormFlash {
    0%, 92%, 100% { opacity: 1; }
    93%, 96% { opacity: 0.35; }
}
@keyframes wxFogPulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}
.s-bento-lock-notif-icon.is-msg {
    background: linear-gradient(145deg, #14b8a6, #0d9488);
}
.s-bento-lock-notif:hover {
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255,255,255,0.55);
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.s-bento-lock-notif:active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    filter: brightness(0.98);
}
.s-bento-lock-notif:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}
.s-bento-lock-notif-badge {
    position: absolute;
    top: 0.45rem;
    left: 2.15rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: #ef4444;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
    z-index: 2;
}
.s-bento-lock-notif.is-read .s-bento-lock-notif-badge { display: none; }
.s-bento-lock-notif-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.s-bento-lock-notif.is-read .s-bento-lock-notif-icon {
    opacity: 0.45;
    filter: grayscale(0.35);
    box-shadow: none;
}
.s-bento-lock-notif-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.s-bento-lock-notif-app {
    font-size: clamp(0.58rem, 2.4cqi, 0.68rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.5);
}
.s-bento-lock-notif-title {
    font-size: clamp(0.78rem, 3.4cqi, 0.95rem);
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
}
.s-bento-lock-notif-text {
    font-size: clamp(0.68rem, 2.9cqi, 0.82rem);
    font-weight: 600;
    color: rgba(15, 23, 42, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s-bento-lock-notif.is-read .s-bento-lock-notif-title,
.s-bento-lock-notif.is-read .s-bento-lock-notif-text {
    color: rgba(15, 23, 42, 0.48);
    font-weight: 600;
}
/* Yeni Merhaba Ekranı — tam ekran hava, mesaj & öğretmen sohbeti */
#s-lock-msg-modal,
#s-lock-weather-modal,
#student-message-modal {
    position: fixed;
    inset: 0;
    z-index: 235;
    display: none;
    background: #0b1220;
}
#student-message-modal { z-index: 240; }
#s-lock-msg-modal.hidden,
#s-lock-weather-modal.hidden,
#student-message-modal.hidden { display: none !important; }
#s-lock-msg-modal.is-open,
#s-lock-weather-modal.is-open { display: block !important; }
#student-message-modal:not(.hidden) { display: block !important; }
body.s-yme-modal-open { overflow: hidden !important; }
.s-yme-screen {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    animation: sYmeScreenIn 0.22s ease-out;
}
.s-yme-screen--weather {
    background: linear-gradient(180deg, #0369a1 0%, #0f172a 30%, #020617 100%);
}
.s-yme-screen--msg {
    background: linear-gradient(180deg, #0f766e 0%, #0f172a 28%, #020617 100%);
}
@keyframes sYmeScreenIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.s-yme-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.s-yme-header--msg {
    align-items: center;
}
.s-yme-header-main { min-width: 0; flex: 1; }
.s-yme-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.s-yme-eyebrow {
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6ee7b7;
}
.s-yme-screen--weather .s-yme-eyebrow { color: #7dd3fc; }
.s-yme-title {
    margin: 0.15rem 0 0;
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}
.s-yme-lead {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.88);
}
.s-yme-close,
.s-yme-icon-btn {
    width: 2.35rem;
    height: 2.35rem;
    border: none;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.12s;
}
.s-yme-icon-btn:hover,
.s-yme-close:hover { background: rgba(30, 41, 59, 0.75); }
.s-yme-icon-btn:active { transform: scale(0.96); }
.s-yme-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.s-yme-section-title {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a7f3d0;
}
.s-yme-screen--weather .s-yme-section-title { color: #bae6fd; }
/* Hava — hero & istatistikler */
.s-yme-wx-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem;
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.s-yme-wx-hero-icon,
.s-lock-weather-hero-icon {
    width: 4.75rem;
    height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: #fef08a;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}
.s-yme-wx-hero-temp,
.s-lock-weather-hero-temp {
    font-size: clamp(2.5rem, 10vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
}
.s-yme-wx-hero-cond,
.s-lock-weather-hero-cond {
    font-size: 0.9rem;
    font-weight: 800;
    margin-top: 0.25rem;
    color: rgba(226, 232, 240, 0.9);
}
.s-yme-wx-source {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.9);
}
.s-yme-wx-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
@media (min-width: 520px) {
    .s-yme-wx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-yme-wx-stat {
    padding: 0.75rem 0.85rem;
    border-radius: 1.15rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.s-yme-wx-stat span {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(148, 163, 184, 0.95);
}
.s-yme-wx-stat strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 900;
    color: #f8fafc;
}
.s-yme-wx-days {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.s-yme-wx-day {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: 1.1rem;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    font-weight: 700;
    color: #e2e8f0;
}
.s-yme-wx-day-label { flex: 1; min-width: 0; }
.s-yme-wx-day .is-hi { margin-left: auto; font-weight: 900; color: #fff; }
.s-yme-wx-day .is-lo { color: #94a3b8; font-weight: 700; min-width: 2.2rem; text-align: right; }
/* Mesaj — sohbet */
.s-yme-msg-avatar,
.s-lock-msg-avatar {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0d9488, #0891b2);
    color: #fff;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.s-yme-msg-thread {
    display: flex;
    flex-direction: column;
}
.s-lock-msg-bubble {
    max-width: min(88%, 22rem);
    padding: 0.75rem 0.9rem;
    border-radius: 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
}
.s-lock-msg-bubble.is-in {
    align-self: flex-start;
    background: rgba(15, 23, 42, 0.55);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-left-radius: 0.35rem;
}
.s-lock-msg-bubble.is-out {
    align-self: flex-end;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-bottom-right-radius: 0.35rem;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28);
}
.s-lock-msg-meta {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.s-lock-msg-bubble.is-out .s-lock-msg-meta { color: rgba(255, 255, 255, 0.75); }
.s-yme-msg-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem max(0.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.55);
}
.s-yme-msg-form {
    display: flex;
    gap: 0.5rem;
}
.s-yme-msg-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.65);
    outline: none;
}
.s-yme-msg-form input::placeholder { color: rgba(148, 163, 184, 0.85); }
.s-yme-msg-form input:focus {
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.s-yme-msg-send {
    border: none;
    border-radius: 1rem;
    padding: 0.7rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.12s, transform 0.12s;
}
.s-yme-msg-send:hover { filter: brightness(1.06); }
.s-yme-msg-send:active { transform: scale(0.97); }
.s-yme-msg-teachers {
    flex-shrink: 0;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.35);
    scrollbar-width: none;
}
.s-yme-msg-teachers::-webkit-scrollbar { display: none; }
.s-yme-msg-teachers button {
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.55);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.s-yme-msg-teachers button.is-active {
    border-color: #34d399;
    background: rgba(6, 78, 59, 0.45);
    color: #a7f3d0;
}
.s-yme-msg-teachers button:disabled {
    opacity: 0.5;
    cursor: default;
}
#student-message-modal .s-chat-empty {
    margin: auto;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 1.5rem 0.5rem;
}
#student-message-modal .s-chat-row { display: flex; width: 100%; }
#student-message-modal .s-chat-row.is-me { justify-content: flex-end; }
#student-message-modal .s-chat-row.is-them { justify-content: flex-start; }
#student-message-modal .s-chat-bubble {
    max-width: min(88%, 22rem);
    padding: 0.7rem 0.9rem 0.5rem;
    border-radius: 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}
#student-message-modal .s-chat-row.is-them .s-chat-bubble {
    background: rgba(15, 23, 42, 0.55);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-left-radius: 0.35rem;
}
#student-message-modal .s-chat-row.is-me .s-chat-bubble {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-bottom-right-radius: 0.35rem;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28);
}
#student-message-modal .s-chat-time {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.72;
}
#student-message-modal .s-yme-msg-send {
    min-width: 2.75rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

.s-bento-clock-lgs {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    overflow: visible;
}
.s-bento-clock-lgs span {
    font-size: clamp(0.82rem, 3.8cqi, 1.15rem);
    font-weight: 900;
    background: rgba(255, 255, 255, 0.55);
    color: #0f766e;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    letter-spacing: -0.01em;
}
.s-bento-hourglass {
    /*
     * hourglass.gif (800×800) — 40 kare analizi (LOADING hariç):
     * animasyon sırasında x:248–552, y:248–519 → pad 28/14 → 220,234,580,519 (361×286)
     */
    --hg-src: 800;
    --hg-x: 220;
    --hg-y: 234;
    --hg-w: 361;
    --hg-h: 286;
    position: relative;
    width: clamp(4.75rem, 24cqi, 6.35rem);
    aspect-ratio: 361 / 286;
    height: auto;
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    overflow: hidden;
    line-height: 0;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 14px rgba(14, 116, 144, 0.14);
}
.s-hg-user-gif {
    position: absolute;
    display: block;
    width: calc(100% * var(--hg-src) / var(--hg-w));
    height: calc(100% * var(--hg-src) / var(--hg-h));
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    left: calc(-100% * var(--hg-x) / var(--hg-w));
    top: calc(-100% * var(--hg-y) / var(--hg-h));
    transform: none;
    object-fit: fill;
    object-position: 0 0;
    border-radius: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.s-bento-section-label {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.s-bento-section-label i { font-size: 0.75rem; }
.s-bento-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.s-bento-calendar {
    --s-cal-box-h: auto;
    display: flex;
    flex-direction: column;
    max-height: none;
    min-height: 14rem;
    min-width: 0;
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    container-type: inline-size;
    container-name: meb-cal;
    background: linear-gradient(135deg, rgba(186, 230, 253, 0.62) 0%, rgba(199, 210, 254, 0.5) 35%, rgba(254, 243, 199, 0.48) 70%, rgba(251, 207, 232, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
    padding: 0.9rem 1.1rem 0.75rem;
    box-sizing: border-box;
}
.s-bento-calendar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.55), transparent 48%);
    pointer-events: none;
    border-radius: inherit;
}
.s-bento-calendar .s-calendar-gcal {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: none !important;
    color: #1e293b;
    gap: 0.4rem;
}
.s-bento-calendar #s-meb-calendar-body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden !important;
    scrollbar-width: none;
}
.s-bento-calendar #s-study-calendar-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: visible !important;
    scrollbar-width: none;
}
.s-bento-calendar #s-meb-calendar-body:not(.hidden),
.s-bento-calendar #s-study-calendar-body:not(.hidden) {
    display: flex !important;
    flex-direction: column;
}
.s-bento-calendar #s-meb-calendar-body.hidden,
.s-bento-calendar #s-study-calendar-body.hidden {
    display: none !important;
    flex: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
    pointer-events: none;
}
.s-bento-calendar #s-study-calendar-body:not(.hidden) {
    flex: 1 1 auto !important;
    min-height: 0;
    height: auto;
    overflow: visible !important;
}
.s-bento-calendar:not(.is-study-view) {
    overflow: hidden;
}
.s-bento-calendar:not(.is-study-view) .s-calendar-gcal {
    overflow: hidden;
    height: auto;
    min-height: 0;
}
.s-bento-calendar.is-study-view {
    --s-cal-box-h: auto;
    height: auto !important;
    min-height: 18rem !important;
    max-height: none !important;
    overflow: visible !important;
}
.s-bento-calendar.is-study-view .s-calendar-gcal {
    height: 100%;
    min-height: 0;
    overflow: visible !important;
}
.s-bento-calendar #s-study-calendar-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: visible;
}
.s-bento-calendar #s-meb-calendar-body {
    overflow-x: auto;
    overflow-y: hidden;
}
.s-bento-calendar .s-cal-grid-wrap {
    border-radius: 0.85rem;
    gap: 1px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.s-bento-calendar #s-meb-calendar-body .s-cal-meb-inner {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
}
.s-bento-calendar #s-meb-calendar-body .s-cal-head-row {
    flex: 0 0 auto;
}
.s-bento-calendar #s-calendar-days-grid {
    flex: 0 0 auto !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(2.1rem, auto);
    align-content: start;
    overflow: visible;
}
.s-bento-calendar .s-cal-day,
.s-bento-calendar .s-cal-cell-empty,
.s-bento-calendar .s-cal-head-day {
    padding: 0.25rem; /* p-1 */
}
@media (min-width: 640px) {
    .s-bento-calendar .s-cal-day,
    .s-bento-calendar .s-cal-cell-empty,
    .s-bento-calendar .s-cal-head-day {
        padding: 0.5rem; /* sm:p-2 */
    }
}
.s-bento-calendar .s-cal-head-day {
    font-size: clamp(0.55rem, 3cqi, 0.9rem);
    padding: 0.2rem 0.05rem;
    line-height: 1.05;
    background: rgba(248, 250, 252, 0.72);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s-bento-calendar .s-cal-day,
.s-bento-calendar .s-cal-cell-empty {
    min-height: 2.1rem;
    min-width: 0;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto;
    font-size: clamp(0.65rem, 4cqi, 1.05rem);
    padding: 0.15rem;
    font-weight: 500;
    overflow: hidden;
    word-break: break-word;
    position: relative;
}
.s-bento-calendar .s-cal-header {
    border-color: rgba(226, 232, 240, 0.7) !important;
    flex-shrink: 0;
    margin-bottom: 0.1rem !important;
    padding-bottom: 0.4rem !important;
}
.s-bento-calendar .s-cal-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem 0.65rem;
}
.s-bento-calendar .s-cal-header-left {
    min-width: 0;
    flex: 1 1 10rem;
}
.s-bento-calendar .s-cal-title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.s-bento-calendar #s-calendar-view-title {
    min-width: 0;
    font-size: clamp(0.58rem, 2.4cqi, 0.7rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Premium iOS toggle — peer + transition-all duration-300 */
.s-cal-ios-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    z-index: 2;
}
.s-cal-ios-switch input.peer,
.s-cal-ios-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}
.s-cal-ios-track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgba(71, 85, 105, 0.8); /* bg-slate-600/80 */
    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}
.s-cal-ios-track::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15); /* shadow-md */
    transition: all 0.3s ease;
}
.s-cal-ios-switch input:checked + .s-cal-ios-track,
.s-cal-ios-switch input.peer:checked + .s-cal-ios-track {
    background: #10b981; /* peer-checked:bg-emerald-500 */
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.55);
}
.s-cal-ios-switch input:checked + .s-cal-ios-track::after,
.s-cal-ios-switch input.peer:checked + .s-cal-ios-track::after {
    transform: translateX(1.25rem);
}
.s-cal-ios-hint {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #d1d5db;
    white-space: nowrap;
}
.s-cal-nav-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.s-cal-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #5eead4;
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.45);
    transform: translateY(-1px);
}
#student-panel .s-bento-calendar .s-calendar-gcal,
#student-panel .s-bento-calendar .s-cal-header {
    background: transparent !important;
    color: #fff;
}
#student-panel .s-bento-calendar:not(.is-study-view) {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow: 0 10px 32px rgba(2, 6, 23, 0.45) !important;
}
#student-panel .s-bento-calendar:not(.is-study-view) .s-calendar-gcal {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 0.35rem;
}
#student-panel .s-bento-calendar:not(.is-study-view)::before {
    display: none;
}
#student-panel .s-bento-calendar .s-cal-header {
    border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}
#student-panel .s-bento-calendar #s-calendar-month-title,
#student-panel .s-bento-calendar #s-calendar-academic-status {
    color: #f8fafc !important;
}
/* MEB Akademik Takvim — beyaz yaprak panel (öğrenci) */
#student-panel .s-bento-calendar #s-meb-calendar-body,
#student-panel .s-bento-calendar .s-meb-cal-glass,
#student-panel .s-bento-calendar .s-meb-cal-paper {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 0.85rem !important;
    padding: 0.5rem !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: #0f172a !important;
    min-width: 0;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
    isolation: isolate;
}
@media (min-width: 640px) {
    #student-panel .s-bento-calendar #s-meb-calendar-body,
    #student-panel .s-bento-calendar .s-meb-cal-glass {
        padding: 0.55rem !important;
    }
}
#student-panel .s-bento-calendar .s-bento-cal-legend,
#student-panel .s-bento-calendar .s-meb-cal-legend {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    margin-top: 0.45rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #475569 !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    flex-shrink: 0;
}
#student-panel .s-bento-calendar .s-meb-cal-legend .s-cal-legend-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    box-shadow: 0 0 6px currentColor;
}
#student-panel .s-bento-calendar .s-meb-cal-legend .is-today .s-cal-legend-dot { background: #38bdf8; color: #38bdf8; }
#student-panel .s-bento-calendar .s-meb-cal-legend .is-exam .s-cal-legend-dot { background: #fb7185; color: #fb7185; }
#student-panel .s-bento-calendar .s-meb-cal-legend .is-holiday .s-cal-legend-dot { background: #fbbf24; color: #fbbf24; }
#student-panel .s-bento-calendar .s-meb-cal-legend .is-bday .s-cal-legend-dot { background: #f472b6; color: #f472b6; }
#student-panel .s-bento-calendar .s-cal-month-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
#student-panel .s-bento-calendar .s-cal-month-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #334155;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: clamp(0.68rem, 2.8cqi, 0.82rem) !important;
    letter-spacing: 0.02em;
    box-shadow: none;
}
#student-panel .s-bento-calendar #s-meb-calendar-body .s-cal-meb-inner,
#student-panel .s-bento-calendar #s-meb-calendar-body .s-cal-head-row,
#student-panel .s-bento-calendar #s-calendar-days-grid {
    min-width: 0;
}
#student-panel .s-bento-calendar .s-cal-head-premium,
#student-panel .s-bento-calendar #s-meb-calendar-body .s-cal-meb-inner > .s-cal-grid-wrap:first-child {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    gap: 0.22rem !important;
    overflow: visible;
    margin-bottom: 0.35rem;
    padding: 0;
}
#student-panel .s-bento-calendar .s-cal-head-day {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    font-size: clamp(0.52rem, 2.8cqi, 0.72rem) !important;
    padding: 0.28rem 0.1rem !important;
    text-align: center;
    letter-spacing: 0.03em;
}
#student-panel .s-bento-calendar .s-cal-head-day.is-weekend {
    color: #be123c !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}
#student-panel .s-bento-calendar #s-calendar-days-grid,
#student-panel .s-bento-calendar .s-cal-days-premium {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    gap: 0.22rem !important;
    overflow: visible;
    padding: 0;
    min-width: 0;
    width: 100%;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    grid-auto-rows: minmax(2.1rem, auto) !important;
    align-content: start !important;
    position: relative;
    z-index: 0;
}
#student-panel .s-bento-calendar .s-cal-day {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    background: #ffffff !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: clamp(0.62rem, 3.6cqi, 0.88rem) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.55rem !important;
    min-height: 2.1rem;
    min-width: 0;
    padding: 0.2rem 0.1rem !important;
    overflow: hidden;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
#student-panel .s-bento-calendar .s-cal-day .s-cal-day-num {
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
#student-panel .s-bento-calendar .s-cal-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 0.28rem;
}
#student-panel .s-bento-calendar .s-cal-dot {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    flex-shrink: 0;
}
#student-panel .s-bento-calendar .s-cal-dot.is-holiday { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.65); }
#student-panel .s-bento-calendar .s-cal-dot.is-exam { background: #fb7185; box-shadow: 0 0 6px rgba(251, 113, 133, 0.65); }
#student-panel .s-bento-calendar .s-cal-dot.is-bday { background: #f472b6; box-shadow: 0 0 6px rgba(244, 114, 182, 0.65); }
@media (min-width: 640px) {
    #student-panel .s-bento-calendar .s-cal-day {
        min-height: 2.35rem;
        padding: 0.28rem 0.12rem !important;
    }
}
#student-panel .s-bento-calendar .s-cal-day:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
}
#student-panel .s-bento-calendar .s-cal-day.is-today {
    box-shadow: 0 0 0 2px #3b82f6 !important;
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    font-weight: 800 !important;
}
#student-panel .s-bento-calendar .s-cal-day.is-event {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #a5b4fc !important;
}
#student-panel .s-bento-calendar .s-cal-day.is-event:hover {
    background: #e0e7ff !important;
}
#student-panel .s-bento-calendar .s-cal-day.is-holiday {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fbbf24 !important;
}
#student-panel .s-bento-calendar .s-cal-day.is-exam {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fb7185 !important;
}
#student-panel .s-bento-calendar .s-cal-day.is-birthday {
    background: #fdf2f8 !important;
    color: #be185d !important;
    border-color: #f472b6 !important;
}
#student-panel .s-bento-calendar .s-cal-day.is-week-select {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #34d399 !important;
}
#student-panel .s-bento-calendar .s-cal-cell-empty {
    background: #fafafa !important;
    border: 1px dashed #e2e8f0 !important;
    border-radius: 0.55rem !important;
    min-height: 2.1rem;
    opacity: 1;
}
#student-panel .s-bento-calendar #s-study-calendar-body.hidden {
    display: none !important;
    flex: 0 0 auto !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
#student-panel .s-bento-calendar:not(.is-study-view) #s-meb-calendar-body.hidden {
    display: none !important;
}
#student-panel .s-bento-calendar {
    container-type: inline-size;
    container-name: s-cal;
    min-width: 0;
    min-height: 10rem;
    overflow: hidden;
}
/* Haftalık görünüm — gün sekmeleri + tek gün paneli */
#student-panel .s-bento-calendar #s-study-calendar-body {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-width: 0;
    max-width: 100%;
}
#student-panel .s-bento-calendar.is-study-view {
    --s-cal-box-h: auto;
    height: auto !important;
    min-height: 18rem !important;
    max-height: none !important;
    overflow: visible !important;
}
.s-bento-calendar #s-meb-calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    max-width: 100%;
}
.s-bento-calendar #s-meb-calendar-nav.hidden {
    display: none !important;
}
.s-bento-calendar #s-calendar-month-title {
    font-size: clamp(0.7rem, 2.8cqi, 0.875rem);
    min-width: 0;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    white-space: nowrap;
}
.s-bento-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin-top: 0.45rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
    color: #0f172a;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.75rem;
}
.s-bento-cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    color: #0f172a;
}
.s-bento-cal-legend .s-cal-legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(15, 23, 42, 0.2);
}
.s-bento-cal-legend .is-exam { color: #9f1239; }
.s-bento-cal-legend .is-holiday { color: #92400e; }
.s-bento-cal-legend .is-bday { color: #9d174d; }
.s-bento-tasks,
.s-bento-homework {
    --s-task-row: 3.55rem;
    --s-task-gap: 0.5rem;
    --s-task-visible: 8;
    --s-scroll-h: calc((var(--s-task-visible) * var(--s-task-row)) + ((var(--s-task-visible) - 1) * var(--s-task-gap)));
    --s-pair-h: calc(2.75rem + var(--s-scroll-h) + 1.9rem);
    height: auto;
    max-height: none;
    overflow: hidden;
    align-self: start;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    box-sizing: border-box;
}
.s-bento-tasks {
    min-height: 0;
}
.s-bento-homework {
    min-height: 0;
}
.s-bento-tasks .s-bento-scroll {
    flex: 0 0 auto;
    height: auto;
    max-height: var(--s-scroll-h);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s-task-gap);
}
.s-bento-homework .s-bento-scroll,
.s-bento-homework .s-hw-home-grid {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
}
.s-hw-subj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.42rem 0.28rem 0.38rem;
    min-height: 3.65rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: center;
    min-width: 0;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.s-hw-subj-card.has-files {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.s-hw-subj-card .hw-subj-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.s-hw-subj-card .hw-subj-label {
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.s-hw-subj-card .s-hw-subj-count {
    font-size: 0.52rem;
    font-weight: 800;
    color: #94a3b8;
    line-height: 1.2;
}
.s-hw-subj-card .s-hw-subj-count.is-active {
    color: #e2e8f0;
}
.s-bento-tasks .notepad-task-row,
.s-bento-homework .notepad-hw-row {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(30, 41, 59, 0.9);
    color: #fff;
}
.s-bento-tasks .notepad-task-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--s-task-row);
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0.7rem 0.8rem;
    overflow: hidden;
    border-radius: 0.85rem;
}
.s-bento-tasks .notepad-task-row > span:last-child {
    min-width: 0;
    overflow: hidden;
}
.s-bento-tasks .notepad-task-row strong {
    font-size: 0.875rem !important;
    color: #fff !important;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s-bento-tasks .notepad-task-row span.block,
.s-bento-tasks .notepad-task-row .text-\[9px\],
.s-bento-tasks .notepad-task-row .text-slate-500,
.s-bento-tasks .notepad-task-row .text-xs {
    font-size: 0.75rem !important;
    color: #d1d5db !important;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s-bento-tasks .notepad-task-row:hover:not(:disabled) {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.22);
}
.s-bento-tasks .notepad-task-row.is-done {
    background: rgba(6, 78, 59, 0.55) !important;
    border-color: rgba(52, 211, 153, 0.35);
}
.s-bento-tasks .notepad-task-row .w-8 {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff;
}
.s-bento-tasks .notepad-task-row .text-slate-600 {
    color: #e2e8f0 !important;
}
.s-bento-homework .notepad-hw-row {
    flex: 1 1 0;
    min-height: 0;
    box-sizing: border-box;
}
.s-bento-homework .hw-subj-turkce .hw-subj-icon { background: #fee2e2; color: #dc2626; }
.s-bento-homework .hw-subj-turkce .hw-subj-label { color: #dc2626; }
.s-bento-homework .hw-subj-matematik .hw-subj-icon { background: #dbeafe; color: #2563eb; }
.s-bento-homework .hw-subj-matematik .hw-subj-label { color: #2563eb; }
.s-bento-homework .hw-subj-fen .hw-subj-icon { background: #dcfce7; color: #16a34a; }
.s-bento-homework .hw-subj-fen .hw-subj-label { color: #16a34a; }
.s-bento-homework .hw-subj-sosyal .hw-subj-icon { background: #fef9c3; color: #ca8a04; }
.s-bento-homework .hw-subj-sosyal .hw-subj-label { color: #ca8a04; }
.s-bento-homework .hw-subj-ingilizce .hw-subj-icon { background: rgba(124, 58, 237, 0.22); color: #a78bfa; }
.s-bento-homework .hw-subj-ingilizce .hw-subj-label { color: #c4b5fd; }
.s-bento-homework .hw-subj-ingilizce.has-files { border-color: rgba(167, 139, 250, 0.45); }
.s-bento-homework .hw-subj-din .hw-subj-icon { background: rgba(13, 148, 136, 0.22); color: #2dd4bf; }
.s-bento-homework .hw-subj-din .hw-subj-label { color: #5eead4; }
.s-bento-homework .hw-subj-din.has-files { border-color: rgba(45, 212, 191, 0.4); }
.s-bento-cal-stack { display: contents; }
.s-bento-events-pair { display: contents; }
.s-bento-events {
    background: linear-gradient(145deg, rgba(238, 242, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-color: #c7d2fe;
    height: auto !important;
    max-height: 22rem;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 3;
    padding: 0.65rem 0.75rem;
    align-self: start;
}
.s-bento-events:not(.is-empty),
.s-bento-events.is-archive {
    min-height: 11rem;
    max-height: 22rem;
}
.s-bento-events.is-empty:not(.is-archive) {
    min-height: 0 !important;
    max-height: 9.5rem !important;
    height: auto !important;
}
.s-bento-events.is-empty:not(.is-archive) #s-upcoming-events-main,
.s-bento-events.is-empty:not(.is-archive) #s-upcoming-events-container {
    flex: 0 0 auto;
    min-height: 0;
    max-height: 3.5rem;
    overflow: visible;
}
.s-bento-archive { display: none !important; }
.s-bento-events-tabs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
    flex-shrink: 0;
}
.s-bento-events-tab {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.55rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
}
.s-bento-events-tab.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}
.s-bento-events #s-upcoming-events-header {
    border-color: #e2e8f0 !important;
}
.s-bento-events #s-upcoming-events-header span,
.s-bento-events #s-upcoming-events-header button span {
    color: #475569 !important;
}
.s-bento-events #s-upcoming-events-main,
.s-bento-events #s-upcoming-events-archive {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.s-bento-events #s-upcoming-events-container,
.s-bento-events #s-upcoming-events-archive-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.s-bento-events .s-event-row {
    align-items: flex-start;
    padding: 0.55rem 0.65rem !important;
}
.s-bento-events .s-event-row .s-event-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
}
.s-bento-mesh:not(.is-custom) > [data-widget="ataturk"],
.s-bento-mesh:not(.is-custom) > [data-widget="events"],
.s-bento-mesh:not(.is-custom) > [data-widget="tasks"],
.s-bento-mesh:not(.is-custom) > [data-widget="homework"] {
    align-self: start;
    height: auto !important;
}
.s-bento-ataturk {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    height: auto !important;
    min-height: 0;
    max-height: 15rem;
    min-width: 0;
    padding: 1.15rem 1.25rem 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.s-bento-ataturk-photo-wrap {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, #fafaf9 0%, #f5f5f4 48%, #e7e5e4 100%);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 0.85rem;
    padding: 0.45rem;
    margin: 0 0 0.55rem;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 10;
    width: 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* Çerçeve içinde ortalı, eşit kenar boşluğu */
.s-bento-ataturk .s-bento-ataturk-photo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 0.45rem;
    display: block;
    position: static;
    inset: auto;
}
.s-bento-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(10.5rem, 1fr));
    gap: 1rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: none;
    min-width: min(100%, 17.5rem);
    min-height: 8rem;
    max-width: 100%;
    overflow: hidden;
    align-content: stretch;
    position: relative;
    border-radius: 1.75rem;
}
.s-bento-metric {
    border-radius: 1.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid transparent;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    min-width: 0;
    min-height: 12rem;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.45rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    isolation: isolate;
}
.s-bento-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
}
.s-bento-metric:active {
    transform: scale(0.98);
}
/* Premium metrik iç düzen — ortak dil */
.s-metric-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    z-index: 2;
    min-width: 0;
}
.s-metric-head.is-light .s-metric-kicker { color: #64748b; }
.s-metric-head.is-light .s-metric-title { color: #0f172a; }
.s-metric-chip {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.s-metric-chip.is-blue {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.22);
    color: #2563eb;
}
.s-metric-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    flex: 1 1 auto;
    min-width: 0;
}
.s-metric-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.78;
    line-height: 1.1;
}
.s-metric-title {
    font-size: clamp(0.95rem, 4.6cqw, 1.2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.s-metric-hero {
    position: relative;
    z-index: 2;
    margin-top: 0.15rem;
    min-width: 0;
}
.s-metric-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
    z-index: 2;
    min-width: 0;
}
.s-bento-metric.is-reading .s-metric-chip { color: #c7d2fe; }
.s-bento-metric.is-exam .s-metric-chip { color: #ffedd5; }
.s-bento-metric.is-gym .s-metric-chip { color: #cffafe; }
.s-bento-metric.is-mood .s-metric-chip { color: #fce7f3; }
.s-bento-metric.is-reading .s-metric-kicker { color: #a5b4fc; }
.s-bento-metric.is-exam .s-metric-kicker,
.s-bento-metric.is-gym .s-metric-kicker,
.s-bento-metric.is-mood .s-metric-kicker { color: rgba(255,255,255,0.78); }
.s-bento-cover-frame {
    width: clamp(4.4rem, 34cqw, 5.9rem);
    aspect-ratio: 2 / 3;
    height: auto;
    flex-shrink: 0;
    align-self: center;
    position: relative;
    border-radius: 0.65rem;
    overflow: hidden;
    background:
        linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.42),
        0 4px 10px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transform: rotate(-2deg);
}
.s-bento-cover-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 42%, transparent 58%, rgba(0,0,0,0.18) 100%);
    z-index: 2;
}
.s-bento-cover-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #0b1220;
}
.s-bento-cover-frame.is-empty,
.s-bento-cover-frame.is-vintage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.5rem 0.45rem 0.55rem;
    color: #fff;
    transform: none;
}
.s-bento-cover-frame.is-empty {
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #312e81, #1e1b4b);
}
.s-bento-cover-empty {
    font-size: 1.35rem;
    opacity: 0.75;
    color: #c7d2fe;
}
.s-bento-cover-frame.is-vintage .v-title {
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.s-bento-cover-frame.is-vintage .v-author {
    font-size: 0.48rem;
    opacity: 0.8;
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.s-bento-cover-frame.skin-burgundy { background: linear-gradient(160deg, #9f1239, #4c0519); }
.s-bento-cover-frame.skin-forest { background: linear-gradient(160deg, #166534, #052e16); }
.s-bento-cover-frame.skin-navy { background: linear-gradient(160deg, #1e3a8a, #0f172a); }
.s-bento-cover-frame.skin-oxblood { background: linear-gradient(160deg, #7f1d1d, #450a0a); }
.s-bento-cover-frame.skin-sand { background: linear-gradient(160deg, #a16207, #713f12); }
.s-bento-cover-frame.skin-teal { background: linear-gradient(160deg, #0f766e, #134e4a); }
.s-bento-cover-frame.skin-plum { background: linear-gradient(160deg, #6b21a8, #3b0764); }
.s-bento-cover-frame.skin-amber { background: linear-gradient(160deg, #d97706, #78350f); }
.s-bento-metric.is-reading {
    background:
        radial-gradient(ellipse at 10% 0%, rgba(129,140,248,0.22), transparent 50%),
        linear-gradient(165deg, rgba(15,23,42,0.88) 0%, rgba(30,27,75,0.82) 55%, rgba(15,23,42,0.9) 100%);
    color: #e2e8f0;
    border-color: rgba(165,180,252,0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 0.85rem 0.9rem 0.9rem;
    gap: 0.55rem;
    justify-content: space-between;
    min-height: 12rem;
    height: auto;
}
#s-home-quad > .s-bento-metric.is-reading,
#s-home-quad > .s-bento-metric.is-gym,
#s-home-quad > .s-bento-metric.is-mood {
    min-height: min(9rem, 42vw) !important;
    height: auto !important;
    padding: 0.45rem 0.5rem !important;
}
#s-home-quad > .s-bento-metric.is-exam:not(.s-quad-card) {
    min-height: min(9rem, 42vw) !important;
    padding: 0.45rem 0.5rem !important;
}
.s-bento-metric.is-reading::before { display: none; }
.s-bento-metric.is-reading .s-bento-metric-label {
    font-size: clamp(0.72rem, 3.8cqw, 0.95rem);
    color: #c7d2fe;
    letter-spacing: 0.1em;
}
.s-bento-metric.is-reading .s-metric-head {
    position: relative;
}
.s-reading-cta-chip {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #312e81;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 12px rgba(129,140,248,0.35);
}
.s-reading-cta-chip.is-empty {
    color: #e2e8f0;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    box-shadow: none;
}
.s-bento-metric.is-reading.is-has-book {
    border-color: rgba(165,180,252,0.45);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.28),
        0 0 0 1px rgba(129,140,248,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.s-bento-metric.is-reading.is-has-book .s-reading-cta-chip:not(.is-empty) {
    animation: s-reading-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes s-reading-cta-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.92; }
}
.s-bento-metric.is-exam {
    background: rgba(249, 115, 22, 0.4); /* orange-500/40 */
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 28px rgba(234, 88, 12, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.s-bento-metric.is-gym {
    background: rgba(6, 182, 212, 0.4);
    color: #fff;
    border-color: rgba(165, 243, 252, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 28px rgba(8, 145, 178, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.22s ease;
    overflow: hidden;
    min-height: 12rem;
    height: auto !important;
}
.s-bento-metric.is-gym::before { display: none; }
.s-bento-metric.is-gym:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px rgba(8,145,178,0.38),
        0 0 28px rgba(34,211,238,0.22),
        inset 0 1px 0 rgba(255,255,255,0.28);
}
.s-bento-metric.is-gym:hover .s-gym-mini { animation-duration: 1.5s; }
.s-bento-metric.is-gym .s-metric-head {
    padding-right: 0;
    align-items: center;
}
.s-bento-metric.is-gym .s-metric-head-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.s-bento-metric.is-gym .s-metric-kicker,
.s-bento-metric.is-gym .s-metric-title,
#s-bento-mesh .s-bento-metric.is-gym .s-metric-kicker,
#s-bento-mesh .s-bento-metric.is-gym .s-metric-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    word-break: keep-all;
    overflow-wrap: normal;
}
.s-bento-metric.is-gym .s-metric-kicker {
    font-size: clamp(0.5rem, 2.2cqi, 0.62rem) !important;
    letter-spacing: 0.1em;
    line-height: 1.1;
    white-space: nowrap !important;
}
.s-bento-metric.is-gym .s-metric-title {
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    font-size: clamp(0.62rem, 5cqi, 1.02rem) !important;
    letter-spacing: 0.01em;
    line-height: 1.12;
    white-space: nowrap !important;
    text-shadow: 0 0 10px rgba(165,243,252,0.35);
}
.s-gym-mini-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.28rem;
    width: 100%;
    margin-top: 0.2rem;
    padding: 0.32rem 0.4rem;
    border-radius: 0.65rem;
    background: rgba(8, 47, 73, 0.38);
    border: 1px solid rgba(165, 243, 252, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    position: relative;
    z-index: 2;
}
.s-gym-mini {
    flex: 1 1 0;
    min-width: 0;
    max-width: 2.15rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.38rem;
    font-size: 0.58rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    animation: s-gym-mini-float 2.5s ease-in-out infinite;
}
.s-gym-mini.is-1 { color: #5eead4; animation-delay: 0s; }
.s-gym-mini.is-2 { color: #fde68a; animation-delay: 0.3s; }
.s-gym-mini.is-3 { color: #fda4af; animation-delay: 0.6s; }
.s-gym-mini.is-4 { color: #c4b5fd; animation-delay: 0.9s; }
@keyframes s-gym-mini-float {
    0%, 100% { transform: translateY(0); opacity: 0.92; }
    50% { transform: translateY(-2px); opacity: 1; }
}
.s-gym-retro,
.s-gym-mini-icons {
    display: none !important;
}
.s-bento-metric.is-gym .s-gym-play {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 13cqw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(165,243,252,0.65),
        0 3px 0 rgba(8,47,73,0.35);
    margin-top: 0.35rem;
}
.s-bento-metric.is-gym .s-gym-sub {
    font-family: 'Rajdhani', 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.85rem, 4cqw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.95;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    max-width: 100%;
    white-space: normal !important;
    overflow: hidden;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    word-break: break-word;
    flex-shrink: 0;
}
.s-bento-metric.is-mood {
    background: rgba(236, 72, 153, 0.4); /* pink-500/40 */
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 28px rgba(219, 39, 119, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* Sanatsal watermark ikonlar */
.s-bento-metric::before {
    content: '';
    position: absolute;
    right: -0.35rem;
    bottom: -0.45rem;
    width: clamp(4.5rem, 42cqw, 7.5rem);
    height: clamp(4.5rem, 42cqw, 7.5rem);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}
.s-bento-metric.is-reading::before {
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cpath d='M22 28h52c8 0 14 6 14 14v54c-10-6-22-8-30-8H22V28z' fill='%23fff'/%3E%3Cpath d='M22 28v60h36c8 0 20 2 30 8V42c0-8-6-14-14-14H22z' fill='%23fff' fill-opacity='.85'/%3E%3Cpath d='M78 18c8 10 14 24 12 38-6-4-12-6-18-6 2-12 4-22 6-32z' fill='%23fff'/%3E%3Cpath d='M72 52l28-34 3 5-28 34-3-5z' fill='%23fff'/%3E%3Ccircle cx='101' cy='16' r='5' fill='%23fff'/%3E%3C/svg%3E");
}
.s-bento-metric.is-exam::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cpath d='M60 14l12 24 27 4-20 19 5 27-24-13-24 13 5-27-20-19 27-4 12-24z' fill='%23fff'/%3E%3C/svg%3E");
}
.s-bento-metric.is-gym::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Crect x='18' y='48' width='18' height='24' rx='4' fill='%23fff'/%3E%3Crect x='84' y='48' width='18' height='24' rx='4' fill='%23fff'/%3E%3Crect x='36' y='54' width='48' height='12' rx='3' fill='%23fff'/%3E%3Ccircle cx='60' cy='30' r='10' fill='%23fff' fill-opacity='.7'/%3E%3Cpath d='M42 78h36v8H42z' fill='%23fff' fill-opacity='.55'/%3E%3C/svg%3E");
}
.s-bento-metric.is-mood::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cpath d='M60 98S18 72 18 46c0-14 11-24 24-24 10 0 16 5 18 10 2-5 8-10 18-10 13 0 24 10 24 24 0 26-42 52-42 52z' fill='%23fff'/%3E%3C/svg%3E");
}
.s-bento-metric > * { position: relative; z-index: 2; }

.s-bento-metric-label {
    font-size: clamp(0.95rem, 5.2cqw, 1.35rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.98;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    z-index: 2;
}
.s-bento-metric-label i { font-size: clamp(1.05rem, 5.5cqw, 1.45rem); }
.s-bento-metric-value {
    font-size: clamp(1.85rem, 12cqw, 3.1rem);
    font-weight: 900;
    margin-top: 0.2rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    position: relative;
    z-index: 2;
}
.s-bento-metric.is-reading .s-bento-metric-value { display: none; }
.s-bento-metric-sub {
    font-size: clamp(0.88rem, 4.2cqw, 1.2rem);
    font-weight: 700;
    opacity: 0.95;
    position: relative;
    z-index: 2;
    margin-top: 0.1rem;
    line-height: 1.35;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-weight: 600;
}
.s-bento-metric-book {
    font-family: 'Rajdhani', 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.9rem, 4.2cqw, 1.15rem);
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-width: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.s-bento-reading-layout {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 6.75rem;
    margin-top: 0.2rem;
}
.s-bento-metric.is-reading {
    justify-content: space-between;
    container-type: inline-size;
}
.s-bento-metric.is-exam,
.s-bento-metric.is-gym,
.s-bento-metric.is-mood {
    container-type: inline-size;
    gap: 0.55rem;
    padding: 1rem 1.05rem 1.05rem;
}
.s-bento-metric.is-exam .s-bento-metric-value,
.s-bento-metric.is-mood .s-bento-metric-value {
    margin-top: 0;
}
.s-bento-metric.is-exam .s-bento-metric-sub,
.s-bento-metric.is-mood .s-bento-metric-sub {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.s-bento-mini-book {
    width: clamp(3.8rem, 30cqw, 5.25rem);
    height: clamp(5.4rem, 42cqw, 7.4rem);
    flex-shrink: 0;
    align-self: flex-start;
    position: relative;
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden;
    transform: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25); /* shadow-md */
    background: linear-gradient(160deg, #4f46e5, #312e81);
}
.s-bento-mini-book::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0.28rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(0,0,0,0.35));
    z-index: 2;
    pointer-events: none;
}
.s-bento-mini-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-bento-mini-book.is-vintage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.45rem 0.4rem 0.5rem;
    color: #fff;
}
.s-bento-mini-book.is-vintage .v-title {
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-bento-mini-book.is-vintage .v-author {
    font-size: 0.45rem;
    opacity: 0.8;
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s-bento-mini-book.skin-burgundy { background: linear-gradient(160deg, #9f1239, #4c0519); }
.s-bento-mini-book.skin-forest { background: linear-gradient(160deg, #166534, #052e16); }
.s-bento-mini-book.skin-navy { background: linear-gradient(160deg, #1e3a8a, #0f172a); }
.s-bento-mini-book.skin-oxblood { background: linear-gradient(160deg, #7f1d1d, #450a0a); }
.s-bento-mini-book.skin-sand { background: linear-gradient(160deg, #a16207, #713f12); }
.s-bento-mini-book.skin-teal { background: linear-gradient(160deg, #0f766e, #134e4a); }
.s-bento-mini-book.skin-plum { background: linear-gradient(160deg, #6b21a8, #3b0764); }
.s-bento-mini-book.skin-amber { background: linear-gradient(160deg, #d97706, #78350f); }
.s-bento-mini-book.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    opacity: 0.85;
}
.s-bento-reading-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}
.s-bento-reading-hint {
    font-size: clamp(0.62rem, 3cqi, 0.78rem);
    font-weight: 700;
    line-height: 1.35;
    color: #c7d2fe;
    opacity: 0.92;
}
.s-bento-metric.is-reading.is-has-book .s-bento-reading-hint {
    color: #e0e7ff;
}
.s-bento-reading-pages {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(0.75rem, 3.5cqw, 0.9rem);
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.02em;
}
.s-bento-reading-bar {
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0 0 10px rgba(129,140,248,0.15);
}
.s-bento-reading-bar-fill {
    height: 100%;
    border-radius: inherit;
    min-width: 0;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #818cf8 45%, #34d399);
    box-shadow: 0 0 12px rgba(129,140,248,0.55);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-bento-reading-pct {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.72rem, 3.6cqw, 0.9rem);
    font-weight: 800;
    color: #a5b4fc;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px rgba(129,140,248,0.45);
}
/* legacy ring (unused) kept harmless */
.s-bento-ring { display: none; }
.s-exam-gauge {
    margin-top: auto;
    padding-top: 0.65rem;
    width: 100%;
}
.s-exam-gauge-track {
    position: relative;
    height: 0.55rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.28);
    margin: 0.55rem 0 0.35rem;
}
.s-exam-gauge-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), #fff);
    transition: width 0.4s ease;
}
.s-exam-gauge-marker {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background: #fff;
    border: 2px solid #92400e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
    z-index: 2;
}
.s-exam-gauge-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.s-exam-gauge-ticks span {
    position: absolute;
    top: -0.2rem;
    bottom: -0.2rem;
    width: 1.5px;
    background: rgba(255, 255, 255, 0.55);
    transform: translateX(-50%);
}
.s-exam-gauge-labels {
    position: relative;
    height: 0.9rem;
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.88;
    letter-spacing: 0.02em;
}
.s-exam-gauge-labels span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
}
.s-exam-gauge-labels span:first-child { transform: translateX(0); left: 0 !important; }
.s-exam-gauge-labels span:last-child { transform: translateX(-100%); }
.s-bento-metric-detail {
    font-size: 0.88rem;
    font-weight: 600;
    opacity: 0.95;
    line-height: 1.4;
    margin-top: 0.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.s-bento-metric-icon {
    font-size: 2.1rem;
    line-height: 1;
    margin: 0.25rem 0 0.15rem;
    opacity: 0.98;
}
.s-bento-metric.is-mood .s-bento-metric-value {
    font-size: 2.75rem;
    line-height: 1;
    display: block;
}
.s-bento-void {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 3rem;
    pointer-events: none;
}
.s-bento-actions { display: none !important; }
.s-bento-action-btn { display: none !important; }
.s-bento-mentor {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    max-height: 260px;
}
}

/* Container queries: içerik kutuyla büyüsün */
.s-bento-hero {
    container-type: inline-size;
    container-name: s-hero;
}
.s-bento-clock,
.s-bento-events {
    container-type: inline-size;
}
.s-bento-clock { container-name: s-clock; }
.s-bento-events { container-name: s-events; }

@container s-hero (min-width: 0px) {
    .s-bento-hero-greeting { font-size: clamp(1.45rem, 7.2cqw, 2.95rem); font-weight: 900; }
    .s-bento-hero-sub { font-size: clamp(0.85rem, 3.5cqw, 1.4rem); font-weight: 700; }
    .s-bento-tempo-btn { font-size: clamp(0.85rem, 3.2cqw, 1.25rem); font-weight: 700; }
    .s-bento-hero-photo { width: clamp(3rem, 13cqw, 5.5rem); height: clamp(3rem, 13cqw, 5.5rem); }
    .s-bento-hero-inner { gap: clamp(0.55rem, 2.8cqw, 1.4rem); }
}
@container s-clock (min-width: 0px) {
    .s-bento-clock-time { font-size: clamp(1.85rem, 11cqi, 3.1rem); }
    .s-bento-clock-date { font-size: clamp(0.75rem, 3.8cqi, 1.1rem); }
    .s-bento-clock-lgs span { font-size: clamp(0.78rem, 3.6cqi, 1.15rem); }
    .s-bento-hourglass { width: clamp(4.5rem, 22cqi, 6rem); border-radius: 0.75rem; }
}
@container s-events (min-width: 18rem) {
    .s-bento-events-tab { font-size: clamp(0.62rem, 2.8cqi, 0.82rem); padding: clamp(0.3rem, 1.5cqi, 0.5rem) clamp(0.45rem, 2cqi, 0.75rem); }
    .s-bento-events .s-event-row { font-size: clamp(0.7rem, 3cqi, 0.95rem); padding: clamp(0.45rem, 2cqi, 0.75rem) !important; }
    .s-bento-events .s-event-row .s-event-sub { font-size: clamp(0.65rem, 2.6cqi, 0.85rem); }
}
@container s-events (min-width: 14rem) {
    .s-bento-events #s-upcoming-events-container { gap: clamp(0.35rem, 2cqi, 0.65rem); }
}

.s-bento-metric {
    container-type: inline-size;
    container-name: s-metric;
}
@container s-metric (min-width: 0px) {
    .s-bento-metric-label { font-size: clamp(0.95rem, 5.5cqi, 1.4rem); font-weight: 900; }
    .s-bento-metric-value { font-size: clamp(1.9rem, 13cqi, 3.25rem); font-weight: 900; }
    .s-bento-metric-sub,
    .s-bento-metric-detail,
    .s-bento-metric-book { font-size: clamp(0.88rem, 4.4cqi, 1.25rem); font-weight: 700; }
    .s-bento-metric.is-reading { min-height: 9.5rem; }
    .s-bento-metric-icon { font-size: clamp(2rem, 14cqi, 3.4rem); }
}

/* Widget özelleştirme modu */
#s-bento-edit-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.95rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
}
#s-bento-edit-bar.is-visible { display: flex; }
#s-bento-edit-bar p {
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    min-width: 12rem;
}
#s-bento-edit-bar .s-bento-edit-actions {
    display: flex;
    gap: 0.45rem;
    flex-shrink: 0;
}
#s-bento-edit-bar button {
    border: none;
    border-radius: 0.65rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
}
#s-bento-edit-bar .is-done { background: #34d399; color: #064e3b; }
#s-bento-edit-bar .is-reset { background: rgba(255,255,255,0.12); color: #fff; }
.s-bento-mesh.is-editing {
    user-select: none;
    -webkit-user-select: none;
}
.s-bento-mesh.is-editing [data-widget] {
    outline: 2px dashed rgba(16, 185, 129, 0.75);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
    cursor: grab;
    animation: none;
    touch-action: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, outline-color 0.2s ease, opacity 0.2s ease;
    will-change: transform;
}
.s-bento-mesh.is-editing [data-widget].is-dragging,
.s-bento-mesh.is-editing [data-widget].is-drag-placeholder {
    opacity: 0.32;
    cursor: grabbing;
    z-index: 5;
    animation: none;
    outline-style: solid;
    outline-color: rgba(16, 185, 129, 0.45);
}
.s-bento-mesh.is-editing [data-widget].is-drop-target {
    outline-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    transform: scale(1.015);
}
.s-bento-drag-ghost {
    position: fixed;
    z-index: 10050;
    pointer-events: none;
    margin: 0;
    box-sizing: border-box;
    border-radius: 1.5rem;
    overflow: hidden;
    opacity: 0.96;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.32);
    transform: scale(1.03) rotate(0.6deg);
    will-change: left, top;
}
.s-bento-drag-ghost .s-bento-resize-handle { display: none !important; }
.s-bento-mesh.is-editing [data-widget] a,
.s-bento-mesh.is-editing [data-widget] button:not(.s-bento-resize-handle) {
    pointer-events: none;
}
.s-bento-resize-handle {
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 0.35rem;
    bottom: 0.35rem;
    border-radius: 0.25rem;
    background: #10b981;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
    cursor: nwse-resize;
    z-index: 6;
    display: none;
    pointer-events: auto !important;
}
.s-bento-mesh.is-editing .s-bento-resize-handle { display: block; }
/* Düzenleme = görüntüleme: aynı dense çeyrek ızgara (örtüşmesiz) */
.s-bento-mesh.is-custom {
    --bento-gap: 1.25rem;
    --bento-island-max-h: 26rem;
    --s-cal-box-h: 20rem;
    display: grid !important;
    gap: var(--bento-gap);
    max-width: min(100%, 76rem);
    width: 100%;
    margin: 0 auto;
    padding: 0.25rem 1rem 1.75rem;
    overflow: visible;
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    align-items: start;
    grid-auto-flow: dense;
    grid-auto-rows: min-content;
    grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr)) !important;
}
.s-bento-mesh.is-custom > [data-widget] {
    grid-column: span var(--bw, 1) !important;
    grid-row: auto !important; /* satır span YOK — örtüşme kaynağı buydu */
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    align-self: start !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    z-index: 1;
}
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="ataturk"] { order: 1 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="clock"] { order: 2 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="yeniMerhaba"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="phoneHub"] { order: 2 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="calendar"] { order: 3 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > .s-home-quad,
.s-bento-mesh.is-custom:not(.is-editing) > #s-home-quad { order: 4 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="hero"] { order: 5 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="events"] { order: 6 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="tasks"] { order: 7 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="homework"] { order: 8 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="pending"] { order: 9 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="summary"] { order: 10 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="mentor"] { order: 11 !important; }
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="ataturk"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="clock"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="hero"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="yeniMerhaba"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="phoneHub"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="calendar"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="events"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="tasks"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="homework"],
.s-bento-mesh.is-custom:not(.is-editing) > [data-widget="pending"] {
    align-self: start !important;
    min-height: 0;
}
.s-bento-mesh.is-editing > [data-widget] {
    min-height: calc(var(--bh, 2) * 5.25rem);
}
.s-bento-mesh.is-custom .s-bento-mentor,
.s-bento-mesh.is-custom > [data-widget="summary"] {
    grid-column: 1 / -1 !important;
}
@media (min-width: 1100px) {
    .s-bento-mesh.is-custom > [data-widget="quad"],
    .s-bento-mesh.is-custom > #s-home-quad {
        grid-column: span 2 !important;
    }
}
.s-bento-mesh.is-custom .s-bento-pending {
    grid-column: span var(--bw, 1) !important;
    max-width: 100% !important;
}
.s-bento-mesh:not(.is-custom) .s-bento-metric.is-gym,
.s-bento-mesh.is-custom .s-bento-metric.is-gym {
    overflow: hidden !important;
    min-height: 12rem !important;
    height: auto !important;
}
@media (max-width: 899px) {
    .s-bento-mesh.is-custom {
        --bento-gap: 1.1rem;
    }
}
@media (max-width: 639px) {
    .s-bento-mesh.is-custom {
        --bento-gap: 0.55rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}
@media (min-width: 640px) {
    .s-bento-mesh.is-custom {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
/* Görünüm: sütun-masonry (Tetris) — düzenlemede kapalı */
.s-bento-mesh.is-packed:not(.is-editing) {
    display: block !important;
    position: relative !important;
    height: var(--bento-pack-h, auto) !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    grid-auto-rows: unset !important;
    gap: 0 !important;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget],
.s-bento-mesh.is-packed:not(.is-editing) > [data-bento-pack] {
    position: absolute !important;
    left: var(--px, 0px) !important;
    top: var(--py, 0px) !important;
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: 2;
    box-sizing: border-box !important;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget="metrics"] {
    display: grid !important;
    flex-direction: unset !important;
    height: 22rem !important;
    min-height: 22rem !important;
    max-height: 22rem !important;
    overflow: hidden !important;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-bento-pack].is-tetris-cell {
    flex: none !important;
    min-height: 8.5rem !important;
    align-self: auto !important;
}
.s-bento-mesh.is-packed:not(.is-editing) #s-home-quad > .s-bento-metric,
.s-bento-mesh.is-packed:not(.is-editing) #s-home-quad > [data-widget],
.s-bento-mesh.is-packed:not(.is-editing) #s-home-quad > [data-quad-cell] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    transform: none !important;
    z-index: 1;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget="clock"],
.s-bento-mesh.is-packed:not(.is-editing) > .s-bento-clock {
    overflow: hidden !important;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget="summary"] {
    z-index: 4;
}
.s-bento-mesh.is-packed:not(.is-editing) #s-home-quad.is-tetris-empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.s-bento-mesh.is-packed:not(.is-editing) > [data-widget="mentor"] {
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
}
/*
 * Dinamik ada yazıları — yalnızca inline-size (size containment düzeni bozar)
 */
#s-bento-mesh > [data-widget] {
    container-type: inline-size;
}
#s-bento-mesh .s-bento-section-label {
    font-size: clamp(0.55rem, 2.6cqi, 0.78rem) !important;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#s-bento-mesh .s-metric-kicker {
    font-size: clamp(0.52rem, 2.4cqi, 0.7rem) !important;
}
#s-bento-mesh .s-metric-title {
    font-size: clamp(0.78rem, 4cqi, 1.05rem) !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#s-bento-mesh .s-bento-metric-book,
#s-bento-mesh .s-bento-metric-sub,
#s-bento-mesh .s-bento-metric-detail,
#s-bento-mesh .s-bento-reading-pages,
#s-bento-mesh .s-bento-reading-pct,
#s-bento-mesh .s-bento-reading-hint {
    font-size: clamp(0.62rem, 3.2cqi, 0.88rem) !important;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
}
#s-bento-mesh .s-bento-ataturk-quote,
#s-bento-mesh #s-home-ataturk-quote {
    font-size: clamp(0.62rem, 3cqi, 0.8rem) !important;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
#s-bento-mesh .s-bento-clock-time {
    font-size: clamp(1.35rem, 12cqi, 2.75rem) !important;
    line-height: 1.05;
}
#s-bento-mesh .s-bento-clock-date,
#s-bento-mesh .s-bento-clock-kicker {
    font-size: clamp(0.62rem, 3.2cqi, 0.9rem) !important;
}
#s-bento-mesh .s-study-plan-actions button,
#s-bento-mesh .s-study-plan-actions .s-bento-tempo-btn {
    font-size: clamp(0.58rem, 2.8cqi, 0.75rem) !important;
    padding-top: clamp(0.4rem, 2.2cqi, 0.55rem);
    padding-bottom: clamp(0.4rem, 2.2cqi, 0.55rem);
    min-height: 0 !important;
}
#s-bento-mesh .study-day-tab .sdt-label {
    font-size: clamp(0.42rem, 2vw, 0.58rem) !important;
}
#s-bento-mesh .study-day-tab .sdt-num {
    font-size: clamp(0.58rem, 2.8vw, 0.78rem) !important;
}
#s-bento-mesh .study-day-panel-head .sdp-title {
    font-size: clamp(0.7rem, 3.2cqi, 0.85rem) !important;
}
#s-bento-mesh .study-day-panel-head .sdp-meta {
    font-size: clamp(0.55rem, 2.5cqi, 0.7rem) !important;
}
#s-bento-mesh #s-study-plan-meta {
    font-size: clamp(0.52rem, 2.4cqi, 0.7rem) !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.s-bento-metric {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 12rem;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    isolation: isolate;
}
.s-bento-metric.is-reading,
.s-bento-metric.is-exam,
.s-bento-metric.is-gym,
.s-bento-metric.is-mood {
    min-height: 12rem;
    height: auto !important;
    overflow: hidden !important;
    margin: 0;
}
.s-bento-mesh:not(.is-custom) .s-bento-ataturk,
.s-bento-mesh:not(.is-custom) .s-bento-hero,
.s-bento-mesh:not(.is-custom) .s-bento-clock {
    min-height: 0;
    height: auto !important;
    width: 100%;
}
.s-bento-mesh:not(.is-custom) .s-bento-metric {
    height: auto !important;
    width: 100%;
    min-height: 7.5rem;
}
#s-home-quad > .s-bento-metric,
.s-bento-island-quad > .s-bento-metric,
#s-home-quad > [data-quad-cell],
.s-bento-island-quad > [data-quad-cell] {
    min-height: min(7.75rem, 36vw) !important;
    height: auto !important;
}
@media (min-width: 1024px) {
    .s-bento-metric { min-height: 8.5rem; }
    .s-bento-mesh:not(.is-custom) .s-bento-tasks {
        min-height: 0;
    }
}

@keyframes sBentoJiggle {
    from { transform: rotate(-0.35deg); }
    to { transform: rotate(0.35deg); }
}

.s-bento-home,
.s-bento-mesh {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: clip;
    min-width: 0;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    #student-panel {
        overflow-x: clip;
        max-width: 100%;
    }
    #student-panel main {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
    }
    .s-bento-home,
    .s-bento-mesh {
        overflow-x: clip;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
    .s-bento-mesh > [data-widget],
    .s-bento-card,
    .s-bento-metric {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* Paketli (masonry) düzen mobilde 2 sütunlu akış grid */
    .s-bento-mesh.is-packed:not(.is-editing) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: var(--bento-gap, 0.55rem) !important;
        position: relative !important;
    }
    .s-bento-mesh.is-packed:not(.is-editing) > [data-widget] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) > #s-home-quad,
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) > [data-widget="quad"],
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) > [data-widget="summary"],
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) > #s-home-quad,
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) > [data-widget="quad"],
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) > [data-widget="summary"] {
        grid-column: 1 / -1 !important;
    }
    .s-bento-calendar #s-meb-calendar-body .s-cal-meb-inner,
    .s-bento-calendar #s-meb-calendar-body .s-cal-head-row,
    .s-bento-calendar #s-calendar-days-grid {
        min-width: 0 !important;
    }

    /* Mobil tek sütun: yönlendirme üstte, istatistik/veri altta */
    .s-bento-mesh:not(.is-custom) > [data-widget="ataturk"]  { order: 1 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="clock"]    { order: 2 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] { order: 3 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="hero"]     { order: 4 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="events"]   { order: 5 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="tasks"]    { order: 6 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="homework"] { order: 7 !important; }
    .s-bento-mesh:not(.is-custom) > .s-home-quad,
    .s-bento-mesh:not(.is-custom) > #s-home-quad {
        order: 8 !important;
        grid-column: 1 / -1 !important;
    }
    .s-bento-mesh:not(.is-custom) > [data-widget="pending"]  { order: 12 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="mentor"]   { order: 13 !important; }
    .s-bento-mesh:not(.is-custom) > [data-widget="summary"]  { order: 99 !important; }

    .s-bento-ataturk {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .s-bento-ataturk .s-bento-ataturk-photo-wrap {
        aspect-ratio: 16 / 10 !important;
        max-height: none !important;
        padding: 0.4rem !important;
    }
    .s-bento-ataturk .s-bento-ataturk-photo {
        max-height: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    #student-panel .s-bento-mesh:not(.is-custom) .s-bento-calendar:not(.is-study-view),
    #student-panel .s-bento-mesh.is-custom .s-bento-calendar:not(.is-study-view) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0.5rem 0.55rem !important;
    }
    #student-panel .s-bento-calendar:not(.is-study-view) .s-calendar-gcal {
        height: auto !important;
        min-height: 0 !important;
    }
    #student-panel .s-bento-calendar:not(.is-study-view) #s-calendar-week-theme {
        display: none;
    }
    #student-panel .s-bento-calendar:not(.is-study-view) #s-calendar-academic-status {
        font-size: 0.68rem !important;
        margin-top: 0.12rem !important;
        line-height: 1.25 !important;
    }
    #student-panel .s-bento-calendar #s-meb-calendar-body {
        flex: 0 0 auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .s-bento-mesh:not(.is-custom) .s-bento-calendar {
        --s-cal-box-h: auto;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
    .s-bento-calendar .s-cal-header-row {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 0.2rem 0.35rem !important;
    }
    .s-bento-calendar .s-cal-header-left {
        flex: 1 1 100%;
        width: 100%;
    }
    .s-bento-calendar .s-cal-title-row {
        justify-content: space-between;
        width: 100%;
    }
    .s-bento-calendar #s-meb-calendar-nav {
        width: 100%;
        justify-content: center;
        padding: 0.1rem 0;
    }
    .s-bento-calendar .s-cal-nav-btn {
        width: 1.55rem !important;
        height: 1.55rem !important;
        min-height: 0 !important;
        min-width: 0 !important;
        padding: 0.25rem !important;
    }
    .s-bento-calendar #s-calendar-month-title {
        flex: 1;
        text-align: center;
        font-size: 0.72rem;
    }
    .s-bento-calendar #s-calendar-view-title {
        font-size: 0.62rem;
    }
    .s-bento-calendar .s-cal-day,
    .s-bento-calendar .s-cal-cell-empty {
        min-height: 2.35rem;
        aspect-ratio: auto;
        font-size: 0.82rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s-bento-calendar .s-cal-head-day {
        font-size: 0.68rem;
        padding: 0.3rem 0.05rem;
    }
    .s-bento-calendar .s-cal-title-row {
        flex-wrap: wrap;
    }
    .s-bento-calendar #s-calendar-view-title,
    .s-bento-calendar .s-cal-ios-hint {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    #student-panel .s-bento-calendar #s-meb-calendar-body {
        overflow-x: hidden !important;
        flex: 0 0 auto !important;
        height: auto !important;
    }
    #student-panel .s-bento-calendar #s-meb-calendar-body .s-cal-meb-inner {
        flex: 0 0 auto !important;
        min-height: auto !important;
        height: auto !important;
    }
    #student-panel .s-bento-calendar .s-cal-grid-wrap.s-cal-head-row,
    #student-panel .s-bento-calendar #s-calendar-days-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
    #student-panel .s-bento-calendar #s-calendar-days-grid {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: auto !important;
        grid-auto-rows: minmax(2.35rem, auto) !important;
        align-content: start !important;
    }
    #student-panel .s-bento-calendar .s-cal-day,
    #student-panel .s-bento-calendar .s-cal-cell-empty {
        height: auto !important;
        min-height: 2.35rem !important;
        max-height: none !important;
    }
    #student-panel .s-bento-metric.is-gym .s-gym-play {
        font-size: clamp(1rem, 7.5cqi, 1.35rem) !important;
        color: #fff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        margin-top: 0.1rem;
        position: relative;
        z-index: 3;
        line-height: 1.1;
    }
    #student-panel .s-bento-metric.is-gym .s-gym-sub {
        font-size: 0.56rem !important;
        line-height: 1.2 !important;
        color: #ecfeff !important;
        position: relative;
        z-index: 3;
        opacity: 1 !important;
    }
    #student-panel .s-bento-metric.is-gym .s-gym-mini {
        font-size: 0.48rem !important;
    }
    .s-bento-mesh.is-packed:not(.is-editing) > [data-widget] {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
    }
    .s-bento-tasks,
    .s-bento-homework {
        --s-task-row: 3rem;
    }
    .s-bento-void { display: none; }

    /* ===== Mobil-native bento: JS --bento-cols ile uyumlu ===== */
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) {
        display: grid !important;
        grid-template-columns: repeat(var(--bento-cols, 1), minmax(0, 1fr)) !important;
        --bento-gap: 0.55rem;
        gap: var(--bento-gap) !important;
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }
    #student-panel .s-bento-mesh:not(.is-custom),
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        --bento-gap: 0.55rem;
        gap: var(--bento-gap) !important;
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget] {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) > [data-widget] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="ataturk"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="hero"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="clock"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="events"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="tasks"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="homework"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="pending"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="mentor"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="summary"] {
        grid-column: 1 / -1 !important;
    }
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) > .s-home-quad,
    #student-panel .s-bento-mesh.is-custom:not(.is-editing) > #s-home-quad {
        grid-column: 1 / -1 !important;
    }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="ataturk"] { order: 1 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"] { order: 2 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="hero"] { order: 2 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="clock"] { order: 3 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] { order: 2 !important; }
    /* Telefon: hub + takvim alt alta tam genişlik (yalnızca eski düzen) */
    @media (max-width: 639px) {
        #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="yeniMerhaba"],
        #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="phoneHub"],
        #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] {
            grid-column: 1 / -1 !important;
        }
        #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="calendar"] { order: 3 !important; }
    }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="events"] { order: 5 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="tasks"] { order: 6 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="homework"] { order: 7 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > .s-home-quad,
    #student-panel #s-home-quad {
        order: 8 !important;
        grid-column: 1 / -1 !important;
    }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="pending"]  { order: 13 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="mentor"]   { order: 14 !important; }
    #student-panel .s-bento-mesh:not(.is-custom) > [data-widget="summary"] { order: 99 !important; }
    #student-panel #s-home-quad {
        display: grid !important;
        grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "reading mood"
            "gym exam" !important;
        gap: 0.55rem !important;
        width: 100% !important;
        grid-column: 1 / -1 !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
    }
    #student-panel #s-home-quad > .s-bento-metric,
#student-panel #s-home-quad > .s-home-quad-cell {
        width: auto !important;
        max-width: none !important;
        min-height: 8.25rem !important;
        height: auto !important;
        flex: none !important;
    }
    #student-panel #s-home-quad > .s-bento-metric.is-reading,
#student-panel #s-home-quad > .s-bento-metric.is-exam {
        min-height: min(10.5rem, 48vw) !important;
    }
    #student-panel #s-home-quad > .s-bento-metric.is-mood,
#student-panel #s-home-quad > .s-bento-metric.is-gym {
        min-height: min(10.5rem, 48vw) !important;
        align-self: stretch !important;
    }
    #student-panel .s-bento-metric {
        padding: 0.55rem 0.6rem !important;
    }
    #student-panel .s-bento-tasks,
    #student-panel .s-bento-homework,
    #student-panel .s-bento-pending {
        min-height: 0 !important;
        --s-pair-h: auto;
        padding: 0.55rem 0.65rem !important;
    }
    #student-panel .s-bento-tasks .s-bento-scroll {
        height: auto !important;
        max-height: min(22rem, 52vh);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        touch-action: pan-y;
    }
    #student-panel .s-bento-homework .s-bento-scroll,
    #student-panel .s-bento-homework .s-hw-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.28rem !important;
        max-height: none !important;
    }
    #student-panel .s-bento-homework .s-hw-subj-card {
        min-height: 3.85rem;
        padding: 0.42rem 0.24rem 0.38rem !important;
        border-radius: 0.72rem;
    }
    #student-panel .s-bento-homework .s-hw-subj-card .hw-subj-icon {
        width: 1.55rem !important;
        height: 1.55rem !important;
        font-size: 0.72rem;
        border-radius: 0.5rem;
    }
    #student-panel .s-bento-homework .s-hw-subj-card .hw-subj-label {
        font-size: 0.56rem !important;
    }
    #student-panel .s-bento-homework .s-hw-subj-card .s-hw-subj-count {
        font-size: 0.48rem !important;
    }
    #student-panel .s-bento-homework .s-hw-subj-card .s-hw-subj-works {
        font-size: 0.44rem !important;
    }
    #student-panel .s-bento-homework .notepad-hw-row {
        flex: none !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        padding: 0.38rem 0.3rem !important;
        gap: 0.2rem;
        min-height: 0 !important;
    }
    #student-panel .s-bento-homework .notepad-hw-row > .flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.15rem !important;
        min-width: 0;
    }
    #student-panel .s-bento-homework .hw-subj-icon {
        width: 1.65rem !important;
        height: 1.65rem !important;
    }
    #student-panel .s-bento-homework .hw-subj-label {
        font-size: 0.62rem !important;
    }
    #student-panel .s-bento-events {
        padding: 0.45rem 0.55rem !important;
    }
    #student-panel .s-bento-events:not(.is-empty),
    #student-panel .s-bento-events.is-archive {
        min-height: 0 !important;
        max-height: 13rem !important;
    }
    #student-panel .s-bento-events.is-empty:not(.is-archive) {
        max-height: 5rem !important;
    }
    #student-panel .s-bento-events-tab {
        font-size: 0.58rem !important;
        padding: 0.28rem 0.42rem !important;
        min-height: 0 !important;
    }
    #student-panel .s-bento-events .s-event-row {
        padding: 0.35rem 0.45rem !important;
        font-size: 0.72rem !important;
    }
    #student-panel .s-bento-hero {
        padding: 0.6rem 0.7rem !important;
        min-height: 0 !important;
    }
    #student-panel .s-bento-hero-top {
        align-items: flex-start;
    }
    #student-panel .s-bento-hero-photo {
        width: 2.35rem !important;
        height: 2.35rem !important;
    }
    #student-panel .s-bento-pending {
        min-height: 0 !important;
        max-height: none !important;
        padding: 0.55rem 0.65rem !important;
    }
    #student-panel #summary-home .s-quest-dash-grid,
    #student-panel .s-quest-dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.42rem !important;
    }
    #student-panel #summary-home .s-quest-subj-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #student-panel .s-quest-dash {
        padding: 0.7rem 0.75rem 0.8rem !important;
    }
    #student-panel .s-quest-period-switch {
        padding: 0.18rem !important;
        gap: 0.08rem !important;
    }
    #student-panel .s-quest-period-switch button {
        padding: 0.36rem 0.18rem !important;
        font-size: clamp(0.54rem, 2.45vw, 0.62rem) !important;
    }
    #student-panel .s-quest-dash-head {
        margin-bottom: 0.55rem;
    }
    #student-panel .s-quest-dash-head h3 {
        font-size: 0.88rem !important;
    }
    #student-panel .s-quest-metric {
        padding: 0.5rem 0.45rem !important;
        gap: 0.4rem;
        border-radius: 0.85rem;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    #student-panel .s-quest-metric-body {
        width: 100%;
        min-width: 0;
    }
    #student-panel .s-quest-metric-body strong {
        font-size: 0.68rem !important;
        line-height: 1.2;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    #student-panel .s-quest-metric-body em {
        font-size: 0.58rem !important;
        line-height: 1.25;
        display: block;
        margin-top: 0.15rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    #student-panel .s-quest-ring {
        width: 4.25rem !important;
        height: 4.25rem !important;
    }
    #student-panel #s-bento-mesh .s-metric-kicker,
    #student-panel #s-bento-mesh .s-metric-title {
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: clamp(0.56rem, 2.6cqi, 0.68rem) !important;
        line-height: 1.15 !important;
    }
    #student-panel #s-bento-mesh .s-bento-metric.is-gym .s-metric-kicker,
    #student-panel #s-bento-mesh .s-bento-metric.is-gym .s-metric-title {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #student-panel #s-bento-mesh .s-bento-metric.is-gym .s-metric-kicker {
        font-size: clamp(0.48rem, 2.2cqi, 0.58rem) !important;
    }
    #student-panel #s-bento-mesh .s-bento-metric.is-gym .s-metric-title {
        font-size: clamp(0.58rem, 5.2cqi, 0.82rem) !important;
        line-height: 1.1 !important;
    }
    #student-panel .s-bento-metric.is-gym .s-gym-mini-strip {
        padding: 0.28rem 0.32rem;
        gap: 0.22rem;
    }
    #student-panel .s-bento-metric.is-gym .s-gym-mini {
        font-size: 0.5rem !important;
        max-width: 1.65rem;
    }
    #student-panel #s-bento-mesh #s-home-quad > .s-bento-metric.is-exam .s-bento-metric-value {
        font-size: clamp(0.95rem, 7cqi, 1.25rem) !important;
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.05;
    }
    #student-panel #s-bento-mesh #s-home-quad > .s-bento-metric.is-exam .s-exam-gauge,
    #student-panel #s-bento-mesh #s-home-quad > .s-bento-metric.is-exam .s-bento-metric-detail,
    #student-panel #s-bento-mesh #s-home-quad > .s-bento-metric.is-gym .s-gym-mini-strip {
        display: none !important;
    }
    #student-panel #s-bento-mesh > .s-bento-metric.is-exam .s-bento-metric-value {
        font-size: clamp(1.2rem, 9cqi, 1.65rem) !important;
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.05;
    }
    #student-panel #s-bento-mesh > .s-bento-metric.is-exam .s-exam-gauge,
    #student-panel #s-bento-mesh > .s-bento-metric.is-exam .s-hex-radar {
        display: none !important;
    }
    #student-panel #s-bento-mesh > .s-bento-metric.is-exam .s-bento-metric-detail {
        font-size: 0.55rem !important;
        line-height: 1.2;
        -webkit-line-clamp: 2;
    }
    #student-panel #s-bento-mesh .s-bento-metric.is-gym .s-gym-mini-strip {
        margin-top: 0.15rem;
    }
    #student-panel .s-event-row {
        padding: 0.28rem 0.4rem !important;
        align-items: center !important;
        gap: 0.25rem !important;
        border-radius: 0.55rem !important;
        min-height: 0 !important;
    }
    #student-panel .s-event-row > button:first-of-type {
        align-items: center !important;
        gap: 0.35rem !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    #student-panel .s-event-row .w-9 {
        display: none !important;
    }
    #student-panel .s-event-row .font-bold {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #student-panel .s-event-row .s-event-sub {
        display: none !important;
    }
    #student-panel .s-event-row .text-\[10px\] {
        font-size: 0.58rem !important;
        padding-top: 0 !important;
        color: #94a3b8 !important;
        flex-shrink: 0;
    }
    #student-panel .s-event-row > button:last-of-type {
        width: 1.35rem !important;
        height: 1.35rem !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }
    #student-panel .s-bento-events:not(.is-empty),
    #student-panel .s-bento-events.is-archive {
        max-height: 6.5rem !important;
    }
    #student-panel .study-day-tab.is-active::before {
        display: none;
    }
    #student-panel .study-day-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.08rem !important;
        padding: 0.2rem 0.14rem !important;
        box-sizing: border-box !important;
    }
    #student-panel .study-day-tabs .study-day-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 2.2rem !important;
        padding: 0.24rem 0 !important;
    }
    #student-panel .study-day-tabs .study-day-tab .sdt-label {
        font-size: 0.48rem !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }
    #student-panel .study-day-tabs .study-day-tab .sdt-num {
        font-size: 0.66rem !important;
        line-height: 1 !important;
    }
    #student-panel .s-bento-calendar.is-study-view #s-study-calendar-body {
        overflow: visible !important;
    }
    #student-panel .s-bento-mesh.is-custom > [data-widget="calendar"].is-study-view,
    #student-panel .s-bento-mesh.is-packed > [data-widget="calendar"].is-study-view {
        overflow: visible !important;
    }
    #student-panel .s-bento-section-label {
        font-size: 0.62rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* Öğretmen paneli — telefon (ince tek sıra üst bar)
       mp-phone-shell açıkken teacher-phone.css alır; burası yalnız kabuksuz dar web. */
    #teacher-panel:not(.mp-phone-shell) > header.t-teacher-header,
    #teacher-panel:not(.mp-phone-shell) > header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.22rem 0.4rem !important;
        gap: 0.3rem !important;
        min-height: 2.35rem;
        grid-template-columns: unset !important;
        grid-template-areas: unset !important;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-leading {
        flex: 1 1 auto;
        min-width: 0;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.3rem !important;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-leading > div {
        min-width: 0;
        flex: 1 1 auto;
    }
    #teacher-panel:not(.mp-phone-shell) > header .teacher-mobile-menu-btn {
        width: 1.85rem !important;
        height: 1.85rem !important;
        flex-shrink: 0;
    }
    #teacher-panel:not(.mp-phone-shell) > header #t-header-title {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    #teacher-panel:not(.mp-phone-shell) > header #academic-week-badge {
        display: none !important;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-stats {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.22rem !important;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end !important;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-streak.daily-streak-btn {
        padding: 0.2rem 0.4rem !important;
        border-radius: 0.55rem !important;
        gap: 0.2rem !important;
        flex-shrink: 0;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-streak .streak-flame { font-size: 0.72rem; }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-streak .streak-count { font-size: 0.58rem; font-weight: 800; }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-streak .t-streak-suffix { font-weight: 700; }
    #teacher-panel:not(.mp-phone-shell) > header .t-header-lgs {
        display: inline-flex !important;
        align-items: center;
        gap: 0.25rem !important;
        padding: 0.15rem 0.35rem;
        border-radius: 0.6rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        flex-shrink: 0;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-lgs-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 0.5rem !important;
        letter-spacing: 0.04em;
        line-height: 1;
        padding: 0.1rem 0;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-lgs-box {
        min-width: 1.85rem !important;
        padding: 0.15rem 0.25rem !important;
        border-radius: 0.45rem !important;
        border-color: #e2e8f0 !important;
        background: #fff !important;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-lgs-num {
        font-size: 0.72rem !important;
    }
    #teacher-panel:not(.mp-phone-shell) > header .t-lgs-unit {
        font-size: 0.46rem !important;
        margin-top: 0.1rem !important;
    }
    @media (max-width: 380px) {
        #teacher-panel:not(.mp-phone-shell) > header .t-header-lgs .t-lgs-box:last-child { display: none; }
    }

    /* Dashboard üst bar — kompakt 2 satır (kabuksuz dar web) */
    #teacher-panel:not(.mp-phone-shell) .tdash-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "title add bell profile"
            "search search search search";
        gap: 0.28rem 0.32rem !important;
        margin-bottom: 0.15rem !important;
        align-items: center;
    }
    .tdash-topbar-title {
        grid-area: title;
        font-size: 0.82rem !important;
        margin-right: 0 !important;
        line-height: 1.15;
        font-weight: 800 !important;
    }
    .tdash-create-btn {
        grid-area: add;
        width: 2rem !important;
        height: 2rem !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 0.55rem !important;
    }
    .tdash-create-btn .tdash-create-text { display: none !important; }
    .tdash-create-btn i { font-size: 0.7rem !important; margin: 0 !important; }
    .tdash-icon-btn {
        grid-area: bell;
        width: 1.85rem !important;
        height: 1.85rem !important;
    }
    .tdash-icon-btn i { font-size: 0.72rem !important; }
    .tdash-header-profile {
        grid-area: profile;
        position: relative !important;
        width: 1.85rem !important;
        height: 1.85rem !important;
        font-size: 0.58rem !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .tdash-header-profile img,
    .tdash-header-profile .tdash-header-photo-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }
    .tdash-search-wrap {
        grid-area: search;
        flex: none !important;
        max-width: none !important;
        min-width: 0 !important;
        order: unset !important;
    }
    .tdash-search-input {
        padding: 0.38rem 2rem 0.38rem 0.65rem !important;
        font-size: 0.72rem !important;
        border-radius: 0.65rem !important;
        min-height: 2rem;
    }
    .tdash-search-wrap .tdash-search-icon-btn {
        width: 1.65rem !important;
        height: 1.65rem !important;
        right: 0.35rem !important;
        font-size: 0.68rem !important;
    }
    .tdash-filter-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.28rem !important;
        margin-top: 0.1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }
    .tdash-filter-chips::-webkit-scrollbar { display: none; }
    .tdash-filter-chip {
        padding: 0.28rem 0.55rem !important;
        font-size: 0.62rem !important;
        border-radius: 9999px !important;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Komuta barı — mobil 4×2 (kabuksuz dar web; phone-shell 2 sütun alır) */
    #teacher-panel:not(.mp-phone-shell) .tdash-command-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        border-radius: 0.85rem !important;
    }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-cell {
        align-items: center !important;
        text-align: center !important;
        padding: 0.42rem 0.25rem !important;
        min-height: 3.1rem;
        gap: 0.1rem !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-cell:nth-child(4n) { border-right: none !important; }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-cell:nth-child(n + 5) { border-bottom: none !important; }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-cell:active { background: #f1f5f9 !important; }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-kicker {
        font-size: 0.46rem !important;
        letter-spacing: 0.05em;
        width: 100%;
        text-align: center;
    }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-value {
        font-size: 0.8rem !important;
        width: 100%;
        text-align: center;
    }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-value.is-text {
        font-size: 0.68rem !important;
        letter-spacing: -0.01em;
    }
    #teacher-panel:not(.mp-phone-shell) .tdash-command-hint {
        display: none !important;
    }

    /* Atatürk + takvim — mobil kompakt */
    .tdash-context-row {
        gap: 0.55rem !important;
    }
    .tdash-ataturk-card {
        padding: 0.65rem 0.75rem !important;
        border-radius: 1rem !important;
    }
    .tdash-ataturk-photo-wrap.max-h-64,
    .tdash-ataturk-photo.max-h-64 {
        max-height: 9.5rem !important;
    }
    .tdash-ataturk-quote {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        margin-top: 0.35rem !important;
    }
    .tdash-island-cal.calendar-gcal {
        padding: 0.55rem 0.45rem 0.65rem !important;
        border-radius: 1rem !important;
    }
    .tdash-cal-head .text-xs {
        font-size: 0.62rem !important;
    }
    .tdash-cal-head #calendar-academic-status {
        font-size: 0.78rem !important;
    }
    .tdash-cal-month-nav button {
        width: 1.65rem !important;
        height: 1.65rem !important;
    }
    .tdash-cal-month-nav #calendar-month-title {
        font-size: 0.72rem !important;
        min-width: 4.5rem !important;
    }
    .tdash-card {
        padding: 0.75rem !important;
        border-radius: 1rem !important;
    }
    .tdash-section-title {
        font-size: 0.82rem !important;
    }
    .tdash-section-sub {
        font-size: 0.62rem !important;
    }

    #teacher-dashboard-view.view-block {
        gap: 0.55rem !important;
    }
    #teacher-dashboard-view.view-block > * + * {
        margin-top: 0 !important;
    }

    /* Yan menü — profil kartı dikey, branş yatay kalsın */
    .tdash-sidebar-profile-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.7rem 0.75rem !important;
        gap: 0.45rem !important;
    }
    .tdash-sidebar-profile-photo-wrap {
        width: 3.15rem !important;
        height: 3.15rem !important;
        max-width: 3.15rem !important;
    }
    #teacher-sidebar-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: keep-all;
        line-height: 1.25 !important;
        font-size: 0.82rem !important;
        flex: 1 1 auto;
    }
    .tdash-profile-name-row {
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        width: 100%;
    }
    .tdash-profile-bell {
        margin-left: 0;
        width: 1.85rem !important;
        height: 1.85rem !important;
        font-size: 0.62rem !important;
        flex-shrink: 0;
    }
    #teacher-sidebar-branch {
        font-size: 0.68rem !important;
        writing-mode: horizontal-tb !important;
        white-space: normal !important;
        word-break: normal !important;
    }
    #teacher-sidebar .tdash-nav-item {
        padding: 0.5rem 0.65rem !important;
        font-size: 0.78rem !important;
        border-radius: 0.75rem !important;
    }
    #teacher-sidebar .tdash-nav-item > i:first-child {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.68rem !important;
    }
    .tdash-sidebar-bottom-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        padding: 0.45rem 0.65rem 0.6rem;
    }
    .tdash-sidebar-bottom-bar:has(.tdash-sidebar-sa-slot.hidden) {
        grid-template-columns: 1fr;
    }
    .tdash-sidebar-footer,
    .tdash-sidebar-sa-slot {
        padding: 0 !important;
    }
    .tdash-footer-action {
        padding: 0.4rem 0.45rem !important;
        font-size: 0.65rem !important;
        justify-content: flex-start;
        text-align: left;
        flex-direction: row;
        gap: 0.35rem !important;
    }
    .tdash-footer-action > i:first-child {
        margin: 0;
        width: 1.35rem !important;
        height: 1.35rem !important;
        font-size: 0.62rem !important;
        flex-shrink: 0;
    }
    .tdash-footer-action-label {
        font-size: 0.6rem;
        line-height: 1.15;
        white-space: normal;
    }

    #teacher-dashboard-view {
        overflow: visible;
        max-width: 100%;
        width: 100%;
    }
    .tdash-context-row:not(.tdash-context-row--compact),
    .tdash-ataturk-card:not(.tdash-ataturk-card--hover),
    .tdash-island-cal:not(.tdash-island-cal--hover),
    .calendar-gcal:not(.tdash-island-cal--hover) {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip;
        box-sizing: border-box;
    }
    #teacher-dashboard-view .tdash-context-row--compact,
    #teacher-dashboard-view .tdash-ataturk-card--hover,
    #teacher-dashboard-view .tdash-island-cal {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    .tdash-ataturk-photo-wrap,
    .tdash-ataturk-photo {
        max-height: min(13rem, 40vw) !important;
        width: 100% !important;
    }
    #teacher-dashboard-view .tdash-ataturk-card--hover .tdash-ataturk-photo-wrap,
    #teacher-dashboard-view .tdash-ataturk-card--hover .tdash-ataturk-photo {
        max-height: none !important;
        width: auto !important;
        height: auto !important;
    }
    #teacher-dashboard-view .s-cal-grid-wrap {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    #teacher-dashboard-view .s-cal-head-day {
        font-size: 0.55rem !important;
        padding: 0.2rem 0.02rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #calendar-days-grid {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Kartlar sayfa scroll'unu engellemesin */
    #teacher-panel .bg-white,
    #teacher-panel .sdet-card,
    #teacher-panel .mirror-pane,
    #teacher-panel .tdash-command-cell,
    #teacher-panel .s360-card,
    #teacher-panel .student-360-panel,
    #teacher-panel .tdash-ataturk-card,
    #teacher-panel .tdash-island-cal {
        touch-action: auto;
    }

    /* Öğretmen kütüphane — kompakt kitaplar, 3D flip kapalı */
    .teacher-mirror-ro .s-shelf-book {
        width: 6.75rem !important;
        height: 9.75rem !important;
        transform: none !important;
        filter: drop-shadow(3px 8px 10px rgba(0,0,0,0.45)) !important;
        margin-bottom: 0.45rem !important;
    }
    .teacher-mirror-ro .s-shelf-book.is-hero {
        width: 7.75rem !important;
        height: 11.25rem !important;
        transform: translateY(-4px) !important;
    }
    .teacher-mirror-ro .s-shelf-book.is-open .s-shelf-book-cover {
        transform: none !important;
    }
    .teacher-mirror-ro .s-shelf-book-pages > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .teacher-mirror-ro .s-shelf {
        min-height: 11.5rem;
        padding: 1rem 0.85rem 1.5rem;
    }
    .teacher-mirror-ro .s-shelf.is-hero-shelf {
        min-height: 13rem;
    }

    /* Takvim modülü — telefon dikey (masaüstü/tablet dokunulmaz) */
    .calendar-gcal:not(.tdash-island-cal--hover),
    .s-calendar-gcal,
    .s-bento-calendar {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: clip;
    }
    #teacher-dashboard-view .tdash-island-cal--hover.calendar-gcal {
        overflow: visible !important;
        max-height: none !important;
    }
    .tdash-cal-head,
    .s-bento-calendar .s-cal-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
    }
    #student-panel .s-bento-calendar .s-cal-header-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.2rem 0.35rem !important;
    }
    .tdash-cal-head-copy,
    .s-bento-calendar .s-cal-header-left {
        width: 100%;
        min-width: 0;
    }
    .tdash-cal-month-nav,
    #s-meb-calendar-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.45rem;
        flex-shrink: 0;
    }
    #calendar-academic-status,
    #s-calendar-academic-status {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        overflow-wrap: break-word;
        word-break: normal;
    }
    #calendar-teacher-theme-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #calendar-teacher-theme-bar button {
        width: 100%;
        min-height: 2.5rem;
    }
    .calendar-gcal .s-cal-grid-wrap,
    .s-calendar-gcal .s-cal-grid-wrap,
    .s-bento-calendar #s-calendar-days-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .calendar-gcal .s-cal-head-day,
    .s-calendar-gcal .s-cal-head-day,
    .s-bento-calendar .s-cal-head-day {
        font-size: 0.62rem !important;
        padding: 0.3rem 0.04rem !important;
        letter-spacing: -0.02em;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }
    .calendar-gcal .s-cal-day,
    .s-calendar-gcal .s-cal-day,
    .s-bento-calendar .s-cal-day {
        min-height: 2.05rem !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15);
    }
    .calendar-gcal .s-cal-cell-empty,
    .s-calendar-gcal .s-cal-cell-empty {
        min-height: 2.05rem !important;
    }
    .calendar-gcal .s-cal-nav-btn,
    .s-bento-calendar .s-cal-nav-btn,
    .tdash-cal-month-nav button {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
    #student-panel .s-bento-calendar #s-meb-calendar-body {
        overflow-x: hidden !important;
    }
    #student-panel .s-bento-calendar #s-meb-calendar-body .s-cal-meb-inner,
    #student-panel .s-bento-calendar #s-meb-calendar-body .s-cal-head-row,
    #student-panel .s-bento-calendar #s-calendar-days-grid {
        min-width: 0 !important;
    }

    /* Haftalık öğrenci özeti — 2×2 kompakt kartlar */
    #dashboard-student-summary-grid.tdash-weekly-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    .tdash-weekly-card {
        gap: 0.45rem !important;
        padding: 0.55rem 0.5rem 0.5rem !important;
        border-radius: 0.85rem !important;
    }
    .tdash-weekly-avatar {
        width: 2.1rem !important;
        height: 2.1rem !important;
    }
    .tdash-weekly-name { font-size: 0.68rem !important; }
    .tdash-weekly-meta { font-size: 0.55rem !important; }
    .tdash-weekly-metric-row:nth-child(n+3) { display: none !important; }
    .tdash-weekly-metric-row .lbl { display: none !important; }
    .tdash-weekly-profile-btn {
        min-height: 1.85rem !important;
        font-size: 0.58rem !important;
        padding: 0.32rem 0.4rem !important;
    }

    #teacher-panel main.flex-1 {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        min-height: 0;
        flex: 1 1 auto;
        max-width: 100% !important;
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .s-bento-metric { min-height: 8.25rem; }
    #student-panel main {
        overflow-x: clip !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        min-width: 0;
        min-height: 0;
    }
    .s-bento-home,
    .s-bento-mesh {
        overflow-x: clip;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .s-bento-mesh.is-packed:not(.is-editing) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: var(--bento-gap, 1rem) !important;
        position: relative !important;
    }
    .s-bento-mesh.is-packed:not(.is-editing) > [data-widget] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
    .s-bento-mesh.is-packed:not(.is-editing) > #s-home-quad,
    .s-bento-mesh.is-packed:not(.is-editing) > [data-widget="quad"],
    .s-bento-mesh.is-packed:not(.is-editing) > [data-widget="summary"],
    .s-bento-mesh.is-custom:not(.is-editing) > #s-home-quad,
    .s-bento-mesh.is-custom:not(.is-editing) > [data-widget="quad"],
    .s-bento-mesh.is-custom:not(.is-editing) > [data-widget="summary"] {
        grid-column: 1 / -1 !important;
    }
    .s-bento-mesh > [data-widget],
    .s-bento-card,
    .s-bento-metric {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ===== LIBRARY + HOMEWORK BENTO ===== */
#s-library-tab.s-lib-bento:not(.hidden),
#s-homework-tab.s-hw-bento:not(.hidden) {
    flex-direction: column;
    gap: 0.85rem;
}
.s-bento-lift {
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .2s ease;
}
.s-bento-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
.s-lib-hero {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.15rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(99,102,241,.28);
    background:
        radial-gradient(ellipse 80% 70% at 0% 0%, rgba(99,102,241,.22), transparent 55%),
        linear-gradient(165deg, rgba(15,23,42,.96), rgba(2,6,23,.92));
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.s-lib-hero.is-empty {
    grid-template-columns: 1fr;
    cursor: default;
    opacity: .9;
}
.s-lib-hero-cover {
    width: 112px;
    height: 156px;
    border-radius: 0.7rem 0.85rem 0.85rem 0.7rem;
    box-shadow:
        8px 12px 24px rgba(0,0,0,.45),
        2px 0 0 rgba(255,255,255,.12) inset,
        -4px 0 12px rgba(0,0,0,.35);
    transform: perspective(600px) rotateY(-8deg);
    position: relative;
    overflow: hidden;
}
.s-lib-hero-cover::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 10px;
    background: linear-gradient(90deg, rgba(0,0,0,.35), transparent);
}
.s-lib-hero-meta h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.s-lib-hero-meta .author {
    margin: 0.3rem 0 0.75rem;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}
.s-lib-hero-pages {
    font-size: 0.72rem;
    font-weight: 800;
    color: #c7d2fe;
    margin-bottom: 0.55rem;
}
.s-lib-progress {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.85);
    border: 1px solid rgba(148,163,184,.2);
    overflow: hidden;
}
.s-lib-progress > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #8b5cf6 45%, #14b8a6);
    box-shadow: 0 0 12px rgba(99,102,241,.45);
    transition: width .4s ease;
}
.s-lib-section-title {
    margin: 0.35rem 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.s-lib-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
@media (min-width: 520px) {
    .s-lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.s-lib-card {
    border-radius: 1.1rem;
    border: 1px solid rgba(51,65,85,.75);
    background: linear-gradient(160deg, rgba(15,23,42,.95), rgba(2,6,23,.9));
    padding: 0.7rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.s-lib-card-cover {
    aspect-ratio: 3 / 4;
    border-radius: 0.75rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}
.s-lib-card-cover .badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    font-size: 0.58rem;
    font-weight: 900;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    background: rgba(2,6,23,.78);
    color: #e2e8f0;
    border: 1px solid rgba(148,163,184,.35);
}
.s-lib-card h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-lib-card .pct {
    margin-top: 0.35rem;
    font-size: 0.62rem;
    font-weight: 800;
    color: #a5b4fc;
}
.s-lib-stars {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.4rem;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1;
    transition: color .15s ease, transform .15s ease;
}
.s-lib-stars button.is-on { color: #fbbf24; }
.s-lib-stars button:hover { transform: scale(1.15); color: #fcd34d; }
.s-lib-stars span.is-on { color: #fbbf24; }
.s-lib-stars.is-readonly { pointer-events: none; }
.s-lib-stars-label {
    margin-left: 0.25rem;
    font-size: 0.58rem;
    font-weight: 800;
    color: #94a3b8;
}
#book-rating-modal .s-rating-panel {
    background: linear-gradient(165deg, rgba(15,23,42,.98), rgba(30,27,75,.95));
    border: 1px solid rgba(251,191,36,.28);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
#book-rating-modal .s-rating-cover {
    width: 96px;
    height: 132px;
    border-radius: 0.65rem 0.8rem 0.8rem 0.65rem;
    box-shadow: 8px 12px 22px rgba(0,0,0,.4);
    transform: perspective(500px) rotateY(-6deg);
    margin: 0 auto;
}
#book-rating-modal .s-rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
}
#book-rating-modal .s-rating-stars button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.65rem;
    color: #475569;
    transition: color .15s ease, transform .15s ease;
    line-height: 1;
}
#book-rating-modal .s-rating-stars button.is-on { color: #fbbf24; }
#book-rating-modal .s-rating-stars button:hover {
    transform: translateY(-2px) scale(1.08);
    color: #fcd34d;
}

.s-lib-empty {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
    padding: 0.5rem 0.2rem;
}

/* —— Kütüphane sayfa başlığı —— */
.s-lib-page-hero {
    position: relative;
    border-radius: 1.35rem;
    border: 1px solid rgba(180, 149, 108, 0.35);
    background:
        radial-gradient(ellipse 90% 80% at 0% 0%, rgba(251, 191, 36, 0.14), transparent 55%),
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 50%),
        linear-gradient(165deg, rgba(30, 20, 12, 0.96), rgba(15, 10, 6, 0.94));
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    padding: 1.1rem 1.15rem 1rem;
}
.s-lib-page-hero__glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 236, 179, 0.06) 50%, transparent 60%);
    pointer-events: none;
}
.s-lib-page-hero__inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}
.s-lib-page-hero__kicker {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4a574;
}
.s-lib-page-hero__title {
    margin: 0.2rem 0 0;
    font-size: clamp(1.15rem, 3.2vw, 1.45rem);
    font-weight: 900;
    color: #fff7ed;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.s-lib-page-hero__title i { color: #fbbf24; }
.s-lib-page-hero__stats {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 245, 230, 0.72);
    line-height: 1.4;
}
.s-lib-page-hero__badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.45rem 0.65rem;
    border-radius: 1rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.s-lib-page-hero__badge-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fde68a;
    line-height: 1;
}
.s-lib-page-hero__badge-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(253, 230, 138, 0.75);
}
.s-lib-page-hero__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.85rem;
}
.s-lib-quick-cta.is-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
}
.s-lib-quick-cta.is-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}
#s-reco-yte-unit .s-shelf-label { color: #c4b5fd; }
#s-reco-yte-unit .s-reco-poster-cover { border-color: rgba(167, 139, 250, 0.35); }
.s-reco-unit.s-reco-highlight {
    animation: s-reco-pulse 0.8s ease 2;
    border-radius: 0.85rem;
}
@keyframes s-reco-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.45); }
}

/* —— Kitap ekle: baskı / kapak seçici —— */
.s-add-book-editions-hint {
    margin: 0 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #c4b5fd;
    line-height: 1.4;
}
.s-add-book-editions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.15rem;
}
@media (min-width: 420px) {
    .s-add-book-editions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-edition-card {
    border: 2px solid rgba(71, 85, 105, 0.65);
    border-radius: 0.75rem;
    padding: 0.35rem;
    background: rgba(15, 23, 42, 0.75);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.s-edition-card:hover {
    border-color: rgba(129, 140, 248, 0.55);
    transform: translateY(-2px);
}
.s-edition-card.is-selected {
    border-color: #818cf8;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.45), 0 8px 20px rgba(79, 70, 229, 0.25);
    background: rgba(49, 46, 129, 0.35);
}
.s-edition-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 0.4rem;
    overflow: hidden;
    margin-bottom: 0.3rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.s-edition-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.s-edition-cover img.is-broken { display: none; }
.s-edition-vintage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0.3rem;
    z-index: 1;
}
.s-edition-vintage.is-only { position: relative; min-height: 100%; }
.s-edition-vintage span {
    font-size: 0.48rem;
    font-weight: 900;
    line-height: 1.2;
    color: #fff7ed;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-edition-vintage.skin-burgundy, .s-add-book-preview-cover.skin-burgundy { background: linear-gradient(145deg, #7f1d1d, #450a0a); }
.s-edition-vintage.skin-forest, .s-add-book-preview-cover.skin-forest { background: linear-gradient(145deg, #14532d, #052e16); }
.s-edition-vintage.skin-navy, .s-add-book-preview-cover.skin-navy { background: linear-gradient(145deg, #1e3a8a, #0f172a); }
.s-edition-vintage.skin-oxblood, .s-add-book-preview-cover.skin-oxblood { background: linear-gradient(145deg, #881337, #4c0519); }
.s-edition-vintage.skin-sand, .s-add-book-preview-cover.skin-sand { background: linear-gradient(145deg, #a16207, #78350f); }
.s-edition-vintage.skin-teal, .s-add-book-preview-cover.skin-teal { background: linear-gradient(145deg, #0f766e, #134e4a); }
.s-edition-vintage.skin-plum, .s-add-book-preview-cover.skin-plum { background: linear-gradient(145deg, #6b21a8, #3b0764); }
.s-edition-vintage.skin-amber, .s-add-book-preview-cover.skin-amber { background: linear-gradient(145deg, #b45309, #78350f); }
.s-edition-publisher {
    display: block;
    font-size: 0.5rem;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-edition-meta {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.46rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.2;
}
.s-add-book-preview {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem 0.7rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(129, 140, 248, 0.35);
    background: rgba(30, 27, 75, 0.45);
}
.s-add-book-preview-cover {
    width: 4.2rem;
    aspect-ratio: 2 / 3;
    border-radius: 0.45rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
.s-add-book-preview-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-add-book-preview-cover .v-title {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 0.35rem;
    font-size: 0.52rem;
    font-weight: 900;
    color: #fff7ed;
}
.s-add-book-preview-meta strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    color: #f8fafc;
    line-height: 1.25;
}
.s-add-book-preview-meta span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cbd5e1;
}
.s-add-book-preview-meta span:last-child {
    margin-top: 0.25rem;
    font-size: 0.52rem;
    color: #a5b4fc;
}

/* —— Kitap beğeni (like / dislike) —— */
.s-book-like-panel {
    border: 1px solid rgba(52, 211, 153, 0.28);
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(6, 24, 20, 0.92));
}
.s-book-like-cover {
    width: 5.5rem;
    aspect-ratio: 2 / 3;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.s-book-like-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-book-like-cover.is-vintage {
    display: flex;
    align-items: flex-end;
    padding: 0.4rem;
}
.s-book-like-cover.is-vintage span {
    font-size: 0.55rem;
    font-weight: 900;
    color: #fff7ed;
    line-height: 1.2;
}
.s-book-like-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.s-book-like-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    border-radius: 1rem;
    border: 2px solid transparent;
    font-size: 0.68rem;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.s-book-like-btn i { font-size: 1.25rem; }
.s-book-like-btn.is-like {
    color: #6ee7b7;
    background: rgba(6, 78, 59, 0.45);
    border-color: rgba(52, 211, 153, 0.45);
}
.s-book-like-btn.is-dislike {
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.4);
}
.s-book-like-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.s-reco-badge.is-heart {
    color: #fecdd3;
    background: rgba(190, 24, 93, 0.75);
    border-color: rgba(251, 113, 133, 0.55);
}

/* —— Klasik 3D Ahşap Kitaplık (Skeuomorphism) —— */
#s-library-tab.s-lib-bento {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    perspective: 1600px;
}
.s-shelf-unit { margin-top: 0.15rem; }
.s-shelf-label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b8956c;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.s-shelf {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.15rem;
    min-height: 15rem;
    padding: 1.35rem 1.25rem 2rem;
    border-radius: 0.85rem 0.85rem 0.25rem 0.25rem;
    background:
        linear-gradient(180deg, rgba(255,248,230,0.12), transparent 32%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0,0,0,0.22), transparent 55%),
        repeating-linear-gradient(
            92deg,
            #5c3a21 0px,
            #6b4423 3px,
            #4a2f1a 6px,
            #7a5230 9px,
            #8b5e34 12px,
            #5c3a21 15px,
            #6b4423 18px,
            #3f2a18 21px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.06) 0 1px,
            transparent 1px 14px
        ),
        linear-gradient(180deg, #8b5e34 0%, #5c3a21 42%, #3f2a18 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.16),
        inset 0 -26px 32px rgba(0,0,0,0.42),
        inset 4px 0 12px rgba(0,0,0,0.12),
        inset -4px 0 12px rgba(0,0,0,0.12),
        0 16px 40px rgba(0,0,0,0.4);
    perspective: 1200px;
}
.s-shelf.is-hero-shelf {
    min-height: 17.5rem;
    background:
        linear-gradient(180deg, rgba(255,236,179,0.16), transparent 36%),
        radial-gradient(ellipse 100% 70% at 30% 0%, rgba(255,220,150,0.1), transparent 50%),
        repeating-linear-gradient(
            88deg,
            #6b4423 0px,
            #8b5e34 4px,
            #5c3a21 8px,
            #9a6b3c 12px,
            #7a4f28 16px,
            #4a2f1a 20px
        ),
        linear-gradient(180deg, #9a6b3c 0%, #6b4423 45%, #3f2a18 100%);
}
.s-shelf::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(0,0,0,0.04) 18px 19px
        );
    opacity: 0.65;
}
.s-shelf::after {
    content: '';
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: 0.12rem;
    height: 1.05rem;
    border-radius: 0.15rem;
    background: linear-gradient(180deg, #a67c52 0%, #5c3a21 55%, #3f2a18 100%);
    box-shadow:
        0 8px 14px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.22);
}
.s-shelf-empty {
    width: 100%;
    align-self: center;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,245,230,0.58);
    font-style: italic;
    padding: 2rem 0.5rem 2.4rem;
}
.s-shelf-book {
    position: relative;
    width: 8.6rem;
    height: 12.4rem;
    flex: 0 0 auto;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s ease;
    z-index: 1;
    margin-bottom: 0.7rem;
    filter: drop-shadow(5px 12px 12px rgba(0,0,0,0.5));
}
.s-shelf-book.is-hero {
    width: 10.4rem;
    height: 14.8rem;
    z-index: 3;
    transform: translateY(-6px) translateZ(18px) scale(1.04);
    filter: drop-shadow(8px 16px 18px rgba(0,0,0,0.55));
}
.s-shelf-book:hover:not(.is-open) {
    transform: translateY(-12px) scale(1.1) translateZ(32px);
    z-index: 8;
    filter: drop-shadow(12px 22px 20px rgba(0,0,0,0.62));
}
.s-shelf-book.is-hero:hover:not(.is-open) {
    transform: translateY(-16px) scale(1.12) translateZ(40px);
}
.s-shelf-book.is-open {
    z-index: 24;
    transform: translateY(-16px) scale(1.1) translateZ(48px);
}
.s-shelf-book.is-hero.is-open {
    transform: translateY(-18px) scale(1.12) translateZ(52px);
}
.s-shelf-book-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.s-shelf-book-cover,
.s-shelf-book-pages {
    position: absolute;
    inset: 0;
    border-radius: 0.18rem 0.5rem 0.5rem 0.18rem;
}
.s-shelf-book-cover {
    z-index: 2;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .58s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow:
        inset 4px 0 0 rgba(255,255,255,0.14),
        inset -3px 0 8px rgba(0,0,0,0.4),
        3px 0 0 rgba(0,0,0,0.22);
}
.s-shelf-book.is-open .s-shelf-book-cover {
    transform: rotateY(-155deg);
}
.s-shelf-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
.s-shelf-book-cover:not(.is-vintage) .v-fallback {
    display: none !important;
}
.s-shelf-book-cover.is-vintage {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.85rem 0.7rem 0.75rem 0.95rem;
    border: 1px solid rgba(212,175,55,0.4);
}
.s-shelf-book-cover.is-vintage::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 0.28rem;
    background: linear-gradient(180deg, #d4af37, #8a6a1f 50%, #d4af37);
    border-radius: 1px;
    opacity: 0.9;
}
.s-shelf-book-cover.skin-burgundy {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,220,150,0.16), transparent 50%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #7f1d1d 0%, #450a0a 50%, #1c0a0a 100%);
}
.s-shelf-book-cover.skin-forest {
    background:
        radial-gradient(ellipse at 70% 10%, rgba(255,236,179,0.14), transparent 45%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, #14532d 0%, #052e16 55%, #022c22 100%);
}
.s-shelf-book-cover.skin-navy {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(147,197,253,0.12), transparent 50%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 3px, transparent 3px 8px),
        linear-gradient(145deg, #1e3a8a 0%, #172554 50%, #0c1a3a 100%);
}
.s-shelf-book-cover.skin-oxblood {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(252,211,77,0.15), transparent 45%),
        linear-gradient(160deg, #881337 0%, #4c0519 48%, #1f0a12 100%);
}
.s-shelf-book-cover.skin-sand {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.12), transparent 50%),
        repeating-linear-gradient(90deg, rgba(120,53,15,0.12) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, #a16207 0%, #78350f 50%, #451a03 100%);
}
.s-shelf-book-cover.skin-teal {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(153,246,228,0.14), transparent 45%),
        linear-gradient(145deg, #0f766e 0%, #115e59 45%, #042f2e 100%);
}
.s-shelf-book-cover.skin-plum {
    background:
        radial-gradient(ellipse at 10% 10%, rgba(233,213,255,0.16), transparent 50%),
        repeating-linear-gradient(160deg, rgba(0,0,0,0.1) 0 2px, transparent 2px 7px),
        linear-gradient(145deg, #6b21a8 0%, #4c1d95 50%, #1e1038 100%);
}
.s-shelf-book-cover.skin-amber {
    background:
        radial-gradient(ellipse at 60% 90%, rgba(254,243,199,0.18), transparent 45%),
        linear-gradient(145deg, #b45309 0%, #92400e 48%, #451a03 100%);
}
.s-shelf-book-cover .v-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #f8ecd4;
    line-height: 1.28;
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}
.s-shelf-book.is-hero .s-shelf-book-cover .v-title {
    font-size: 1.05rem;
}
.s-shelf-book-cover .v-author {
    font-size: 0.68rem;
    font-weight: 700;
    color: #e8c96a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}
.s-shelf-book.is-hero .s-shelf-book-cover .v-author {
    font-size: 0.75rem;
}
.s-shelf-book-cover .v-badge {
    position: absolute;
    top: 0.45rem;
    right: 0.4rem;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 0.18rem 0.4rem;
    border-radius: 0.35rem;
    background: rgba(0,0,0,0.5);
    color: #fde68a;
    border: 1px solid rgba(212,175,55,0.45);
    z-index: 1;
}
.s-shelf-book-pages {
    z-index: 1;
    background: linear-gradient(90deg, #e8e0d4 0%, #f7f3ea 8%, #fffdf8 100%);
    color: #1c1917;
    padding: 0.7rem 0.65rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.08);
}
.s-shelf-book-pages > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .32s ease, transform .32s ease;
}
.s-shelf-book.is-open .s-shelf-book-pages > * {
    opacity: 1;
    transform: none;
}
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(1) { transition-delay: .05s; }
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(2) { transition-delay: .1s; }
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(3) { transition-delay: .15s; }
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(4) { transition-delay: .2s; }
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(5) { transition-delay: .25s; }
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(6) { transition-delay: .3s; }
.s-shelf-book.is-open .s-shelf-book-pages > *:nth-child(7) { transition-delay: .35s; }
.s-shelf-book-pages .p-kicker {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a16207;
}
.s-shelf-book-pages .p-title {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-shelf-book-pages .p-meta {
    font-size: 0.62rem;
    font-weight: 700;
    color: #78716c;
}
.s-shelf-book-pages .p-bar {
    height: 0.35rem;
    border-radius: 999px;
    background: #e7e5e4;
    overflow: hidden;
    margin-top: 0.1rem;
}
.s-shelf-book-pages .p-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #b45309, #d97706);
}
.s-shelf-book-pages .p-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.s-shelf-book-pages .p-actions button {
    border: none;
    border-radius: 0.4rem;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.35rem 0.4rem;
    cursor: pointer;
    background: #1c1917;
    color: #fafaf9;
}
.s-shelf-book-pages .p-actions button.is-soft {
    background: #fef3c7;
    color: #92400e;
}
/* Klasik boş cilt / ahşap plaka — Kitap Ekle */
.s-shelf-add {
    position: relative;
    width: 8.6rem;
    height: 12.4rem;
    flex: 0 0 auto;
    margin-bottom: 0.7rem;
    border: none;
    cursor: pointer;
    border-radius: 0.18rem 0.5rem 0.5rem 0.18rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #f5e6c8;
    background:
        radial-gradient(ellipse at 40% 20%, rgba(255,236,179,0.12), transparent 50%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 7px),
        linear-gradient(145deg, #8b6914 0%, #5c4010 45%, #3d2a0c 100%);
    border: 1px dashed rgba(212,175,55,0.55);
    box-shadow:
        inset 4px 0 0 rgba(255,255,255,0.1),
        inset -2px 0 6px rgba(0,0,0,0.35),
        4px 10px 14px rgba(0,0,0,0.4);
    transition: transform .3s ease, filter .25s ease;
    filter: drop-shadow(4px 10px 10px rgba(0,0,0,0.4));
}
.s-shelf-add:hover {
    transform: translateY(-10px) scale(1.08);
    filter: drop-shadow(10px 18px 16px rgba(0,0,0,0.55));
}
.s-shelf-add-plus {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    color: #fde68a;
    border: 2px solid rgba(212,175,55,0.65);
    background: rgba(0,0,0,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.s-shelf-add-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f5e6c8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* —— Soru Bankam: 3D Branş Kitapları —— */
#s-testbank-tab.s-tb-bento {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
}
.s-tb-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 1.1rem;
    padding: 1rem 1.15rem;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #1c1917;
    background:
        linear-gradient(145deg, #fde68a 0%, #f59e0b 45%, #d97706 100%);
    box-shadow:
        0 10px 28px rgba(217,119,6,0.35),
        inset 0 1px 0 rgba(255,255,255,0.45);
    transition: transform .2s ease, box-shadow .2s ease;
}
.s-tb-quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(217,119,6,0.45);
}
.s-tb-quick-btn i { font-size: 1.15rem; }
.s-tb-quick-panel {
    display: none;
    margin-top: 0.75rem;
    border-radius: 1.1rem;
    padding: 1rem;
    background: linear-gradient(160deg, rgba(28,25,23,0.96), rgba(12,10,9,0.94));
    border: 1px solid rgba(180,83,9,0.4);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.s-tb-quick-panel.is-open { display: block; }
.s-tb-shelf-label {
    margin: 0.85rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b8956c;
}
.s-tb-shelf {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.1rem;
    min-height: 15.5rem;
    padding: 1.35rem 1.2rem 2rem;
    border-radius: 0.85rem 0.85rem 0.25rem 0.25rem;
    background:
        linear-gradient(180deg, rgba(255,248,230,0.1), transparent 38%),
        repeating-linear-gradient(
            90deg,
            #6b4423 0px,
            #7a5230 10px,
            #4a2f1a 20px,
            #8b5e34 30px,
            #5c3a21 40px
        );
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.14),
        inset 0 -22px 28px rgba(0,0,0,0.38),
        0 16px 40px rgba(0,0,0,0.4);
    perspective: 1200px;
}
.s-tb-shelf::after {
    content: '';
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: 0.12rem;
    height: 1.05rem;
    border-radius: 0.15rem;
    background: linear-gradient(180deg, #a67c52 0%, #5c3a21 55%, #3f2a18 100%);
    box-shadow: 0 8px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
}
.s-tb-book {
    position: relative;
    width: 8.4rem;
    height: 12.2rem;
    flex: 0 0 auto;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s ease;
    z-index: 1;
    margin-bottom: 0.7rem;
    filter: drop-shadow(5px 12px 12px rgba(0,0,0,0.5));
}
.s-tb-book:hover:not(.is-open) {
    transform: translateY(-12px) scale(1.1) translateZ(32px);
    z-index: 8;
    filter: drop-shadow(12px 22px 20px rgba(0,0,0,0.62));
}
.s-tb-book.is-open {
    z-index: 24;
    transform: translateY(-16px) scale(1.1) translateZ(48px);
}
.s-tb-book-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.s-tb-book-cover,
.s-tb-book-pages {
    position: absolute;
    inset: 0;
    border-radius: 0.18rem 0.5rem 0.5rem 0.18rem;
}
.s-tb-book-cover {
    z-index: 2;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform .58s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.85rem 0.65rem 0.75rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 4px 0 0 rgba(255,255,255,0.14),
        inset -3px 0 8px rgba(0,0,0,0.4),
        3px 0 0 rgba(0,0,0,0.22);
}
.s-tb-book.is-open .s-tb-book-cover {
    transform: rotateY(-155deg);
}
.s-tb-book-cover::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 0.26rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.25));
    border-radius: 1px;
    opacity: 0.85;
}
.s-tb-book-cover.is-turkce {
    background:
        radial-gradient(ellipse at 30% 15%, rgba(255,220,200,0.18), transparent 50%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #dc2626 0%, #991b1b 48%, #450a0a 100%);
}
.s-tb-book-cover.is-matematik {
    background:
        radial-gradient(ellipse at 70% 10%, rgba(186,230,253,0.2), transparent 48%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #2563eb 0%, #1e3a8a 50%, #0c1a3a 100%);
}
.s-tb-book-cover.is-fen {
    background:
        radial-gradient(ellipse at 40% 20%, rgba(167,243,208,0.18), transparent 50%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #16a34a 0%, #14532d 50%, #052e16 100%);
}
.s-tb-book-cover.is-sosyal {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(254,215,170,0.2), transparent 48%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #ea580c 0%, #9a3412 50%, #431407 100%);
}
.s-tb-book-cover.is-ingilizce {
    background:
        radial-gradient(ellipse at 35% 15%, rgba(254,249,195,0.22), transparent 50%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #eab308 0%, #a16207 48%, #451a03 100%);
}
.s-tb-book-cover.is-din {
    background:
        radial-gradient(ellipse at 60% 10%, rgba(233,213,255,0.2), transparent 48%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #9333ea 0%, #6b21a8 48%, #2e1065 100%);
}
.s-tb-book-cover .tb-brand {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    position: relative;
    z-index: 1;
    line-height: 1.3;
}
.s-tb-book-cover .tb-subject {
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
    position: relative;
    z-index: 1;
}
.s-tb-book-cover .tb-count {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(255,255,255,0.88);
    position: relative;
    z-index: 1;
}
.s-tb-book-pages {
    z-index: 1;
    background: linear-gradient(90deg, #e8e0d4 0%, #f7f3ea 8%, #fffdf8 100%);
    color: #1c1917;
    padding: 0.7rem 0.65rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.08);
}
.s-tb-book-pages > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .32s ease, transform .32s ease;
}
.s-tb-book.is-open .s-tb-book-pages > * {
    opacity: 1;
    transform: none;
}
.s-tb-book.is-open .s-tb-book-pages > *:nth-child(1) { transition-delay: .08s; }
.s-tb-book.is-open .s-tb-book-pages > *:nth-child(2) { transition-delay: .14s; }
.s-tb-book.is-open .s-tb-book-pages > *:nth-child(3) { transition-delay: .2s; }
.s-tb-book.is-open .s-tb-book-pages > *:nth-child(4) { transition-delay: .26s; }
.s-tb-book-pages .p-kicker {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a16207;
}
.s-tb-book-pages .p-title {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
}
.s-tb-book-pages .p-meta {
    font-size: 0.62rem;
    font-weight: 700;
    color: #78716c;
}
.s-tb-book-pages .p-actions button {
    margin-top: auto;
    border: none;
    border-radius: 0.45rem;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.4rem 0.45rem;
    cursor: pointer;
    background: #1c1917;
    color: #fafaf9;
    width: 100%;
}
/* Tam sayfa galeri (modal değil) */
#s-tb-gallery-view {
    display: none;
    flex-direction: column;
    gap: 0.85rem;
    min-height: min(78vh, 820px);
    animation: sTbGalleryIn .35s ease;
}
#s-tb-gallery-view.is-active {
    display: flex;
}
#s-tb-shelf-view.is-hidden { display: none !important; }
@keyframes sTbGalleryIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.s-tb-gallery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.s-tb-gallery-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.02em;
}
.s-tb-gallery-head p {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}
.s-tb-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .s-tb-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .s-tb-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-tb-gallery-card {
    border-radius: 1rem;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(51,65,85,0.85);
    display: flex;
    flex-direction: column;
}
.s-tb-gallery-card img {
    width: 100%;
    height: 9.5rem;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform .25s ease;
}
.s-tb-gallery-card img:hover { transform: scale(1.04); }
.s-tb-gallery-card .meta {
    padding: 0.65rem 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.s-tb-gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}

.s-tb-archive-wrap {
    margin: 0.75rem 0 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.s-tb-archive-label {
    margin: 0 0 0.5rem;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.s-tb-archive-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.s-tb-archive-tab {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.65);
    color: #cbd5e1;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.s-tb-archive-tab:hover {
    border-color: rgba(251, 191, 36, 0.45);
    color: #fef3c7;
}

.s-tb-archive-tab.is-active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

.s-tb-shelf-archive {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.s-tb-shelf-archive h4 {
    margin: 0 0 0.55rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.s-tb-shelf-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

@media (min-width: 640px) {
    .s-tb-shelf-archive-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.s-tb-shelf-archive-stat {
    border-radius: 0.75rem;
    padding: 0.5rem 0.55rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(51, 65, 85, 0.8);
}

.s-tb-shelf-archive-stat strong {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}

.s-tb-shelf-archive-stat span {
    font-size: 0.58rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.s-tb-gallery-card.is-seen .meta::before {
    content: 'Görüldü';
    font-size: 0.55rem;
    font-weight: 900;
    color: #38bdf8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.s-tb-tests-block {
    border-radius: 1.1rem;
    padding: 0.9rem 1rem;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(51,65,85,0.85);
}
.s-tb-tests-block h3 {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.s-tb-tests-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.55rem;
}

/* —— LGS Karne Modalı: ~%90 yükseklik, Sütlaç + Excel tablo —— */
#report-card-modal.karne-sheet-backdrop,
#report-card-modal {
    padding:
        max(0.45rem, env(safe-area-inset-top, 0px))
        0.5rem
        max(0.45rem, env(safe-area-inset-bottom, 0px))
        !important;
    align-items: flex-start !important;
    justify-content: center !important;
}
body.karne-sheet-open { overflow: hidden !important; }
body.karne-sheet-open #student-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(130%);
}
#report-card-modal > .karne-sheet,
#report-card-modal > .karne-paper {
    width: min(100%, 720px);
    max-width: min(100%, 720px);
    height: auto;
    max-height: min(90vh, 90dvh);
    margin: 0 auto;
    background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%);
    border: 1px solid #d6d3d1;
    border-radius: 1.25rem;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.12),
        0 32px 80px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.karne-sheet-close {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    border: 1px solid #d6d3d1;
    background: #fff;
    color: #57534e;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.karne-sheet-close:hover { background: #f5f5f4; color: #0c0a09; }
.karne-section { min-width: 0; }
.karne-table-wrap.is-excel {
    border: 2px solid #217346;
    border-radius: 0.65rem;
    box-shadow: inset 0 0 0 1px rgba(33, 115, 70, 0.15);
}
.karne-table-wrap.is-excel th {
    background: linear-gradient(180deg, #217346 0%, #1a5c38 100%);
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.15);
    font-size: 0.78rem;
}
.karne-table-wrap.is-excel td {
    border-right: 1px solid #e7e5e4;
    border-bottom: 1px solid #e7e5e4;
    background: #fff;
}
.karne-table-wrap.is-excel tbody tr:nth-child(even) td { background: #f8faf8; }
.karne-table-wrap.is-excel tbody tr:hover td { background: #ecfdf5; }
/* Sütlaç karne bloğu */
.karne-sutlac-block {
    border-radius: 1.1rem;
    padding: 1rem 1.1rem 1.15rem;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(236,72,153,0.12), transparent 50%),
        linear-gradient(165deg, #1e1b4b 0%, #0f172a 55%, #134e4a 100%);
    border: 1px solid rgba(148,163,184,0.25);
    color: #e2e8f0;
}
.karne-sutlac-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
.karne-sutlac-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    object-fit: contain;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}
.karne-sutlac-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: #f5d0fe;
    letter-spacing: 0.02em;
}
.karne-sutlac-text {
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 600;
    color: #e2e8f0;
}
.karne-clip-grid-title {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a5b4fc;
}
.karne-clip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
@media (max-width: 520px) {
    .karne-clip-grid { grid-template-columns: 1fr; }
}
.karne-clip {
    border-radius: 0.85rem;
    padding: 0.65rem 0.7rem;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.2);
    min-width: 0;
}
.karne-clip.is-kritik { border-color: rgba(244,63,94,0.45); }
.karne-clip.is-gelişim { border-color: rgba(251,191,36,0.35); }
.karne-clip-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
}
.karne-clip-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: #cbd5e1;
    white-space: nowrap;
}
.karne-clip.is-kritik .karne-clip-badge { background: rgba(244,63,94,0.25); color: #fecdd3; }
.karne-clip-topics {
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.karne-clip-topics li {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.68rem;
    line-height: 1.3;
}
.karne-clip-topic { color: #cbd5e1; flex: 1; min-width: 0; }
.karne-clip-tier {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fbbf24;
    flex-shrink: 0;
}
.karne-clip-tier.is-kritik { color: #fb7185; }
.karne-clip-empty {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    color: #94a3b8;
}
.karne-clip-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.karne-clip-idea {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(16,185,129,0.15);
    color: #6ee7b7;
    border: 1px solid rgba(52,211,153,0.25);
}
.karne-sutlac-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
@media (min-width: 480px) {
    .karne-sutlac-actions { flex-direction: row; flex-wrap: wrap; }
}
.karne-btn {
    border: none;
    border-radius: 0.85rem;
    padding: 0.7rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.karne-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.karne-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.karne-btn.is-sutlac {
    flex: 1;
    min-width: 9rem;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
}
.karne-btn.is-mentor {
    flex: 1;
    min-width: 9rem;
    background: rgba(255,255,255,0.1);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.2);
}
.karne-btn.is-mentor.is-sent { background: rgba(16,185,129,0.2); border-color: rgba(52,211,153,0.35); }
.karne-btn.is-download {
    background: linear-gradient(135deg, #0f766e, #047857);
    color: #fff;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.35);
}
.karne-btn.is-close {
    background: #1c1917;
    color: #fff;
}
.karne-foot-note {
    flex: 1;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #78716c;
    letter-spacing: 0.04em;
}
@media (max-width: 640px) {
    #report-card-modal.karne-sheet-backdrop,
    #report-card-modal {
        padding:
            max(0.25rem, env(safe-area-inset-top, 0px))
            0.25rem
            max(0.25rem, env(safe-area-inset-bottom, 0px))
            !important;
    }
    #report-card-modal > .karne-sheet,
    #report-card-modal > .karne-paper {
        max-height: min(92vh, 92dvh);
        border-radius: 1rem;
    }
}
.karne-paper-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem 1rem;
    border-bottom: 1px solid #e7e5e4;
    background: linear-gradient(180deg, #fff 0%, #fafaf9 100%);
    flex-shrink: 0;
}
.karne-paper-head h3 {
    margin: 0;
    font-size: clamp(1.2rem, 3.2vw, 1.65rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0c0a09;
    line-height: 1.25;
    text-transform: none;
}
.karne-paper-head .karne-meta {
    margin: 0.45rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #44403c;
    line-height: 1.4;
}
.karne-paper-head .karne-date {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #78716c;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.karne-paper-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.15rem 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    scrollbar-width: thin;
}
/* Üst istatistikler: premium kartlar + hava durumu paneli */
.karne-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.karne-stats .karne-mood-panel {
    grid-column: 1 / -1;
}
@media (max-width: 520px) {
    .karne-stats { grid-template-columns: 1fr; }
    .karne-stats .karne-mood-panel { grid-column: auto; }
}
.karne-stat {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1rem 1.05rem 0.9rem;
    text-align: center;
    min-width: 0;
    border: 1px solid transparent;
}
.karne-stat .lbl {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
}
.karne-stat .val {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 0.35rem;
    font-size: clamp(1.85rem, 5vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    word-break: break-word;
}
.karne-stat-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
}
/* LGS puan — kademeli arka planlar */
.is-score-card.is-t450 {
    border-color: #fbbf24;
    background: linear-gradient(145deg, #1c1917 0%, #422006 40%, #78350f 100%);
    color: #fef3c7;
    box-shadow: 0 8px 28px rgba(251, 191, 36, 0.35);
}
.is-score-card.is-t450 .lbl { color: #fde68a; }
.is-score-card.is-t450 .val { color: #fff; text-shadow: 0 0 20px rgba(251,191,36,0.5); }
.is-score-card.is-t450 .karne-stat-deco {
    background:
        radial-gradient(circle at 85% 15%, rgba(251,191,36,0.45), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(245,158,11,0.25), transparent 40%);
}
.is-score-card.is-t400 {
    border-color: #34d399;
    background: linear-gradient(145deg, #064e3b 0%, #047857 45%, #0d9488 100%);
    color: #ecfdf5;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}
.is-score-card.is-t400 .lbl { color: #a7f3d0; }
.is-score-card.is-t400 .val { color: #fff; }
.is-score-card.is-t400 .karne-stat-deco {
    background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.2), transparent 50%),
        repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 9px);
}
.is-score-card.is-t350 {
    border-color: #38bdf8;
    background: linear-gradient(145deg, #0c4a6e 0%, #0369a1 50%, #0284c7 100%);
    color: #e0f2fe;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.28);
}
.is-score-card.is-t350 .lbl { color: #bae6fd; }
.is-score-card.is-t350 .val { color: #fff; }
.is-score-card.is-t350 .karne-stat-deco {
    background: radial-gradient(circle at 20% 80%, rgba(56,189,248,0.35), transparent 50%);
}
.is-score-card.is-t300 {
    border-color: #fbbf24;
    background: linear-gradient(145deg, #78350f 0%, #b45309 45%, #d97706 100%);
    color: #fffbeb;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.28);
}
.is-score-card.is-t300 .lbl { color: #fde68a; }
.is-score-card.is-t300 .val { color: #fff; }
.is-score-card.is-t250 {
    border-color: #fb923c;
    background: linear-gradient(145deg, #7c2d12 0%, #c2410c 50%, #ea580c 100%);
    color: #ffedd5;
}
.is-score-card.is-t250 .val { color: #fff; }
.is-score-card.is-t200 {
    border-color: #fb7185;
    background: linear-gradient(145deg, #4c0519 0%, #9f1239 50%, #e11d48 100%);
    color: #ffe4e6;
}
.is-score-card.is-t200 .val { color: #fff; }
.karne-tier-caption {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.9;
}
/* Genel başarı — takdir belgesi */
.is-ratio-card {
    border: 2px solid #d6d3d1;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.is-ratio-card .val { color: #047857; }
.karne-cert-frame {
    position: absolute;
    inset: 0.35rem;
    border: 2px dashed rgba(120, 113, 108, 0.35);
    border-radius: 0.75rem;
    pointer-events: none;
}
.karne-cert-star {
    position: absolute;
    top: 0.35rem;
    left: 0.45rem;
    font-size: 0.75rem;
    color: rgba(120, 113, 108, 0.35);
}
.karne-cert-star.is-r { left: auto; right: 0.45rem; }
.karne-cert-badge {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    color: #57534e;
}
.is-ratio-card.is-cert-gold {
    background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 35%, #fde68a 100%);
    border-color: #f59e0b;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.25);
}
.is-ratio-card.is-cert-gold .val { color: #b45309; }
.is-ratio-card.is-cert-gold .karne-cert-badge { background: #f59e0b; color: #fff; }
.is-ratio-card.is-cert-gold .karne-cert-frame { border-color: rgba(180, 83, 9, 0.35); }
.is-ratio-card.is-cert-silver {
    background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 40%, #cbd5e1 100%);
    border-color: #94a3b8;
}
.is-ratio-card.is-cert-silver .val { color: #334155; }
.is-ratio-card.is-cert-silver .karne-cert-badge { background: #64748b; color: #fff; }
.is-ratio-card.is-cert-bronze {
    background: linear-gradient(160deg, #fff7ed 0%, #fed7aa 50%, #fdba74 100%);
    border-color: #ea580c;
}
.is-ratio-card.is-cert-bronze .val { color: #c2410c; }
.is-ratio-card.is-cert-bronze .karne-cert-badge { background: #ea580c; color: #fff; }
.is-ratio-card.is-cert-pass {
    background: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #34d399;
}
.is-ratio-card.is-cert-pass .karne-cert-badge { background: #059669; color: #fff; }
.is-ratio-card.is-cert-rise {
    background: linear-gradient(160deg, #fdf2f8 0%, #fce7f3 100%);
    border-color: #f472b6;
}
.is-ratio-card.is-cert-rise .val { color: #be185d; }
/* Genel durum — hava + trend */
.karne-mood-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 0;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #d6d3d1;
    min-height: 7.5rem;
    background: #fff;
}
@media (max-width: 480px) {
    .karne-mood-panel { grid-template-columns: 1fr; }
}
.karne-mood-sky {
    position: relative;
    min-height: 7.5rem;
    overflow: hidden;
}
.karne-mood-sky.is-radiant {
    background: linear-gradient(180deg, #7c3aed 0%, #f59e0b 55%, #fef3c7 100%);
}
.karne-mood-sky.is-sunny {
    background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 40%, #fef08a 100%);
}
.karne-mood-sky.is-partly {
    background: linear-gradient(180deg, #60a5fa 0%, #bae6fd 50%, #e2e8f0 100%);
}
.karne-mood-sky.is-cloudy {
    background: linear-gradient(180deg, #64748b 0%, #94a3b8 60%, #cbd5e1 100%);
}
.karne-mood-sky.is-dawn {
    background: linear-gradient(180deg, #6366f1 0%, #f472b6 50%, #fed7aa 100%);
}
.karne-mood-sun {
    position: absolute;
    top: 0.65rem;
    right: 0.85rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #fde047 45%, #f59e0b 100%);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}
.is-cloudy .karne-mood-sun,
.is-dawn .karne-mood-sun { opacity: 0.35; transform: scale(0.75); }
.is-radiant .karne-mood-sun {
    width: 2.75rem;
    height: 2.75rem;
    box-shadow: 0 0 28px rgba(255, 255, 255, 0.8);
}
.karne-mood-cloud {
    position: absolute;
    background: rgba(255,255,255,0.85);
    border-radius: 999px;
    height: 1.1rem;
}
.karne-mood-cloud.c1 { width: 3.5rem; top: 1.5rem; left: 0.6rem; opacity: 0.7; }
.karne-mood-cloud.c2 { width: 2.5rem; top: 2.2rem; left: 2.2rem; opacity: 0.5; }
.is-sunny .karne-mood-cloud { opacity: 0.25; }
.is-radiant .karne-mood-cloud { opacity: 0.15; }
.karne-trend-wrap {
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.45rem;
}
.karne-trend-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 0.2rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.karne-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 2.5rem;
}
.karne-trend-bar {
    flex: 1;
    height: var(--h, 40%);
    min-height: 18%;
    border-radius: 0.25rem 0.25rem 0.1rem 0.1rem;
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.35);
}
.karne-trend-bar.is-current {
    background: rgba(255,255,255,0.95);
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.karne-mood-body {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    background: #fafaf9;
}
.karne-mood-body .lbl {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #57534e;
}
.karne-status-chip {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #f5f5f4;
    color: #1c1917;
    border: 1px solid #d6d3d1;
    line-height: 1.3;
    max-width: 100%;
    white-space: normal;
}
.karne-mood-body .karne-status-chip {
    margin-top: 0;
    align-self: flex-start;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #6ee7b7;
    color: #047857;
}
.karne-mood-panel.is-radiant .karne-mood-body .karne-status-chip {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #fbbf24;
    color: #92400e;
}
.karne-ai-status {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #44403c;
    text-align: left;
    font-weight: 600;
}
.karne-stat .val.is-score { color: inherit; }
.karne-stat .val.is-ratio { color: inherit; }
.karne-table-wrap {
    border: 1px solid #d6d3d1;
    border-radius: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
.karne-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 28rem;
}
.karne-table-wrap th {
    background: #f5f5f4;
    color: #1c1917;
    font-weight: 800;
    padding: 0.8rem 0.65rem;
    border-bottom: 1px solid #d6d3d1;
    text-align: left;
    font-size: 0.82rem;
    white-space: nowrap;
}
.karne-table-wrap td {
    padding: 0.75rem 0.65rem;
    border-bottom: 1px solid #f5f5f4;
    color: #1c1917;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.karne-table-wrap tr:last-child td { border-bottom: none; }
.karne-cell-good { color: #047857 !important; font-weight: 900; }
.karne-cell-bad { color: #b91c1c !important; font-weight: 900; background: rgba(254,226,226,0.55); }
.karne-cell-warn { color: #c2410c !important; font-weight: 800; }
.karne-mentor {
    margin: 0;
    padding: 1.2rem 1.25rem 1.25rem;
    border-left: 4px solid #0f766e;
    background: linear-gradient(135deg, #f0fdfa 0%, #fff 55%);
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 6px 18px rgba(15,118,110,0.08);
}
.karne-mentor .karne-mentor-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 0.55rem;
    line-height: 1.35;
}
.karne-mentor p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #1c1917;
    font-weight: 600;
}
.karne-mentor .karne-ai-bullets {
    margin: 0.65rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.92rem;
    font-weight: 550;
    line-height: 1.55;
    color: #292524;
}
.karne-mentor .karne-ai-bullets li { margin: 0.35rem 0; }
.karne-mentor .karne-ai-fine {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #78716c;
}
.karne-ai-locked {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}
.karne-ai-locked p { margin: 0; font-size: 0.88rem; font-weight: 700; }
.karne-ai-locked-sub { margin-top: 0.35rem !important; font-weight: 550 !important; color: #c2410c !important; }
.karne-ai-upgrade-btn {
    margin-top: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.65rem;
    background: #ea580c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
}
.karne-ai-upgrade-btn:hover { background: #c2410c; }
.karne-tasks-title {
    margin: 0 0 0.8rem;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #44403c;
}
.karne-branch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}
@media (max-width: 560px) {
    .karne-branch-grid { grid-template-columns: 1fr; }
}
.karne-branch-box {
    display: flex;
    flex-direction: column;
    min-height: 16rem;
    max-height: none;
    border-radius: 1rem;
    border: 2px solid;
    background: #fff;
    overflow: hidden;
}
.karne-branch-box.is-turkce { border-color: #ef4444; }
.karne-branch-box.is-matematik { border-color: #3b82f6; }
.karne-branch-box.is-fen { border-color: #10b981; }
.karne-branch-box.is-sosyal { border-color: #f97316; }
.karne-branch-box.is-ingilizce { border-color: #eab308; }
.karne-branch-box.is-din { border-color: #a855f7; }
.karne-branch-head {
    flex-shrink: 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.3;
}
.karne-branch-box.is-turkce .karne-branch-head { background: #dc2626; }
.karne-branch-box.is-matematik .karne-branch-head { background: #2563eb; }
.karne-branch-box.is-fen .karne-branch-head { background: #059669; }
.karne-branch-box.is-sosyal .karne-branch-head { background: #ea580c; }
.karne-branch-box.is-ingilizce .karne-branch-head { background: #ca8a04; color: #1c1917; }
.karne-branch-box.is-din .karne-branch-head { background: #9333ea; }
.karne-branch-scroll {
    flex: 1 1 auto;
    min-height: 7.5rem;
    max-height: 14rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #fff;
}
.karne-task-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #1c1917;
    font-weight: 600;
    padding: 0.55rem 0.6rem;
    border-radius: 0.55rem;
    background: #f5f5f4;
    border: 1px solid #e7e5e4;
}
.karne-task-row.is-done { opacity: 0.78; }
.karne-task-row.is-done .karne-task-text { text-decoration: line-through; }
.karne-task-status {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.karne-task-status.is-done { background: #d1fae5; color: #065f46; }
.karne-task-status.is-wait { background: #ffedd5; color: #9a3412; }
.karne-branch-note {
    flex-shrink: 0;
    border-top: 1px dashed #d6d3d1;
    padding: 0.75rem 0.85rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #1c1917;
    font-weight: 600;
    background: #fafaf9;
}
.karne-branch-note strong {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #57534e;
    margin-bottom: 0.35rem;
    font-weight: 900;
}
.karne-branch-empty {
    font-size: 0.88rem;
    color: #78716c;
    font-style: italic;
    font-weight: 600;
    padding: 0.55rem;
    line-height: 1.4;
}
.karne-paper-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.35rem;
    border-top: 1px solid #e7e5e4;
    background: #fff;
}
.karne-paper-foot .text-\[10px\] {
    font-size: 0.75rem !important;
    color: #57534e !important;
}
.karne-paper-foot button {
    font-size: 0.85rem !important;
    padding: 0.55rem 1.15rem !important;
}

/* —— Akıl Oyunları: neredeyse tam ekran oyun modalı (yalnızca X kapatır) —— */
@keyframes gym-modal-in {
    from { opacity: 0; transform: translateY(18px) scale(0.965); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#gym-scrim.gym-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 10040;
    background: rgba(2, 6, 23, 0.8);
    pointer-events: auto;
}
#gym-scrim.gym-scrim.hidden {
    display: none !important;
}
#gym-game-modal.gym-game-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    pointer-events: none;
    background: transparent;
}
#gym-game-modal.gym-game-modal.hidden {
    display: none !important;
}
.gym-game-modal-backdrop {
    display: none !important;
}
.gym-game-modal-shell {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    width: min(98vw, 1280px);
    height: min(96vh, 980px);
    max-height: 96dvh;
    border-radius: 1.65rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(45,212,191,0.22), transparent 48%),
        radial-gradient(ellipse at 92% 8%, rgba(99,102,241,0.18), transparent 42%),
        linear-gradient(165deg, rgba(15,23,42,0.92) 0%, rgba(2,6,23,0.88) 100%);
    border: 1px solid rgba(226,232,240,0.22);
    box-shadow:
        0 40px 100px rgba(0,0,0,0.72),
        0 0 0 1px rgba(255,255,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    animation: gym-modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gym-game-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 5;
    pointer-events: auto;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
    cursor: pointer;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gym-game-modal-close:hover {
    transform: scale(1.07) rotate(90deg);
    background: rgba(248,113,113,0.22);
    border-color: rgba(252,165,165,0.55);
    color: #fecaca;
}
.gym-game-modal-close:focus-visible {
    outline: 2px solid rgba(148,163,184,0.7);
    outline-offset: 3px;
}
.gym-game-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.5rem 1.75rem;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
}
.gym-game-pane {
    width: 100%;
    max-width: min(100%, 920px);
    margin: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gym-game-pane > .bg-slate-900,
.gym-game-pane > [id^="rps-"],
.gym-game-pane > [id^="quoridor-"],
.gym-game-pane > .simon-arena,
.gym-game-pane > .xoxo-arena,
.gym-game-pane > .qm-arena,
.gym-game-pane > .bil-arena {
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    border-color: rgba(148,163,184,0.35) !important;
    min-height: min(68vh, 620px);
    justify-content: center;
}
#gym-game-modal.is-simon-mode .gym-game-modal-shell {
    width: min(94vw, 560px);
    max-width: 560px;
}
#gym-game-modal.is-simon-mode .gym-game-pane {
    max-width: min(100%, 520px);
}
/* Koridor: ferah retro masa — kaydırmasız viewport */
#gym-game-modal.is-quoridor-mode .gym-game-modal-shell {
    width: min(96vw, 980px);
    max-width: 980px;
    height: 95vh;
    max-height: 95dvh;
    overflow: hidden !important;
    background:
        repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.05) 0 1px, transparent 1px 8px),
        linear-gradient(160deg, #f4e8d4 0%, #ebe0c8 45%, #e2d4b8 100%) !important;
    border: 2px solid rgba(166, 124, 82, 0.45);
    box-shadow:
        0 28px 70px rgba(60, 40, 20, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -6px 18px rgba(140, 110, 70, 0.12) !important;
}
#gym-game-modal.is-quoridor-mode .gym-game-modal-close {
    background: rgba(255, 252, 245, 0.85);
    border-color: rgba(120, 80, 40, 0.3);
    color: #5c4033;
}
#gym-game-modal.is-quoridor-mode .gym-game-modal-close:hover {
    background: rgba(127, 29, 29, 0.2);
    color: #9f1239;
    border-color: rgba(190, 80, 80, 0.45);
}
#gym-game-modal.is-quoridor-mode .gym-game-modal-scroll {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 2.35rem 0.45rem 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#gym-game-modal.is-quoridor-mode #gym-quoridor-view.gym-game-pane {
    max-width: 100% !important;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
#gym-game-modal.is-quoridor-mode .gym-game-pane > [id^="quoridor-"] {
    min-height: 0 !important;
    height: 100%;
    flex: 1 1 auto;
}
#gym-game-modal.is-quoridor-mode .quoridor-game-card,
#gym-game-modal.is-quoridor-mode .quoridor-setup-card {
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0.35rem 0.45rem 0.35rem !important;
    gap: 0.45rem;
    overflow: hidden;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#gym-game-modal.is-quoridor-mode .quoridor-setup-card {
    overflow-y: auto !important;
    justify-content: flex-start;
}
#gym-game-modal.is-quoridor-mode .quoridor-board-wrap {
    width: min(100cqw, 100cqh) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto;
    margin: 0 auto;
    align-self: center;
    padding: 0.35rem;
}
#gym-game-modal.is-quickmath-mode .gym-game-modal-shell {
    width: min(96vw, 520px);
    max-width: 520px;
    height: 95vh;
    max-height: 95dvh;
    overflow: hidden !important;
}
#gym-game-modal.is-quickmath-mode .gym-game-modal-scroll {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 2.35rem 0.5rem 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#gym-game-modal.is-quickmath-mode #gym-quickmath-view.gym-game-pane {
    max-width: 100% !important;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    justify-content: stretch;
}
#gym-game-modal.is-quickmath-mode .qm-arena {
    min-height: 0 !important;
    height: 100%;
    flex: 1 1 auto;
    padding: 0.45rem 0.4rem 0.4rem;
    gap: 0.45rem;
    justify-content: stretch;
    overflow: hidden;
}
#gym-game-modal.is-quickmath-mode .qm-result-box,
#gym-game-modal.is-quickmath-mode .qm-start-box {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 0.25rem 0;
}
#gym-game-modal.is-quickmath-mode .qm-warn {
    font-size: 0.6rem;
    padding: 0.4rem 0.55rem;
}
/* Taş Kağıt Makas: tam arena */
#gym-game-modal.is-rps-mode .gym-game-modal-shell {
    width: min(96vw, 920px);
    max-width: 920px;
    height: 92vh;
    max-height: 92dvh;
    overflow: hidden !important;
}
#gym-game-modal.is-rps-mode .gym-game-modal-scroll {
    overflow: hidden !important;
    padding: 2.75rem 0.75rem 0.75rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#gym-game-modal.is-rps-mode #gym-rps-view.gym-game-pane {
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
#gym-game-modal.is-rps-mode .gym-game-pane > [id^="rps-"] {
    min-height: 0 !important;
    height: 100%;
    flex: 1;
}
#gym-game-modal .rps-choice-btn {
    width: auto !important;
    height: auto !important;
    font-size: inherit !important;
}
body.gym-game-focus,
body.gym-game-teacher-play {
    overflow: hidden !important;
}
/* Öğrenci: ek panel karartması (öğretmen modunda asla uygulanmaz) */
body.gym-game-focus:not(.gym-game-teacher-play) #student-panel:not(.hidden) {
    filter: brightness(0.38) saturate(0.75);
    pointer-events: none;
    user-select: none;
}
body.gym-game-focus #gym-game-modal,
body.gym-game-teacher-play #gym-game-modal {
    pointer-events: none;
}
body.gym-game-focus .gym-game-modal-shell,
body.gym-game-focus .gym-game-modal-close,
body.gym-game-teacher-play .gym-game-modal-shell,
body.gym-game-teacher-play .gym-game-modal-close {
    pointer-events: auto;
}
@media (max-width: 640px) {
    #gym-game-modal.gym-game-modal { padding: 0.25rem; }
    .gym-game-modal-shell {
        width: 100%;
        height: min(98vh, 100dvh);
        border-radius: 1.15rem;
    }
    .gym-game-modal-close {
        width: 2.85rem;
        height: 2.85rem;
        top: 0.65rem;
        right: 0.65rem;
    }
}

/* —— Akıl Oyunları Hub: Bento + Reward Banner —— */
@keyframes gym-reward-shine {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.06); }
}
#s-gym-tab .gym-hub {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto;
}
.gym-reward-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border-radius: 1.35rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(251,191,36,0.28), transparent 50%),
        linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,27,75,0.88));
    border: 1px solid rgba(251,191,36,0.35);
    box-shadow:
        0 14px 36px rgba(0,0,0,0.35),
        0 0 28px rgba(251,191,36,0.12),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.gym-reward-banner.is-claimed {
    border-color: rgba(52,211,153,0.4);
    box-shadow:
        0 14px 36px rgba(0,0,0,0.35),
        0 0 28px rgba(16,185,129,0.18),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.gym-reward-glow {
    position: absolute;
    right: -10%;
    top: -40%;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.45), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    animation: gym-reward-shine 2.8s ease-in-out infinite;
}
.gym-reward-banner.is-claimed .gym-reward-glow {
    background: radial-gradient(circle, rgba(52,211,153,0.45), transparent 70%);
}
.gym-reward-main { position: relative; z-index: 1; min-width: 0; flex: 1; }
.gym-reward-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fcd34d;
    text-shadow: 0 0 12px rgba(251,191,36,0.45);
    margin-bottom: 0.35rem;
}
.gym-reward-banner.is-claimed .gym-reward-kicker { color: #6ee7b7; text-shadow: 0 0 12px rgba(52,211,153,0.45); }
.gym-reward-main h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px rgba(255,255,255,0.15);
}
.gym-reward-main p {
    margin: 0.35rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #cbd5e1;
    line-height: 1.35;
}
.gym-reward-main strong { color: #fde68a; }
.gym-reward-side {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}
.gym-reward-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid;
}
.gym-reward-badge.is-pending {
    color: #fef3c7;
    background: rgba(245,158,11,0.2);
    border-color: rgba(251,191,36,0.55);
    box-shadow: 0 0 16px rgba(251,191,36,0.35);
    animation: gym-reward-shine 1.8s ease-in-out infinite;
}
.gym-reward-badge.is-claimed {
    color: #d1fae5;
    background: rgba(16,185,129,0.22);
    border-color: rgba(52,211,153,0.55);
    box-shadow: 0 0 16px rgba(16,185,129,0.35);
    animation: none;
}
.gym-reward-pills {
    display: flex;
    gap: 0.35rem;
}
.gym-reward-pills em {
    font-style: normal;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 0.28rem 0.45rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e2e8f0;
}
@media (max-width: 520px) {
    .gym-reward-banner { flex-direction: column; align-items: stretch; }
    .gym-reward-side { align-items: flex-start; flex-direction: row; justify-content: space-between; }
}

.gym-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 380px) {
    .gym-bento-grid { grid-template-columns: 1fr; }
}
.gym-game-card {
    position: relative;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.25rem;
    padding: 1.15rem 1rem 1.05rem;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(15,23,42,0.72);
    box-shadow: 0 10px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.gym-game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
    background: radial-gradient(ellipse at 20% 0%, var(--gym-glow), transparent 60%);
}
.gym-game-card:hover {
    transform: translateY(-6px);
    border-color: var(--gym-border);
    box-shadow:
        0 16px 36px rgba(0,0,0,0.35),
        0 0 28px var(--gym-glow),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.gym-game-card.is-simon { --gym-glow: rgba(45,212,191,0.45); --gym-border: rgba(45,212,191,0.55); --gym-accent: #2dd4bf; }
.gym-game-card.is-xoxo { --gym-glow: rgba(244,63,94,0.4); --gym-border: rgba(251,113,133,0.55); --gym-accent: #fb7185; }
.gym-game-card.is-math { --gym-glow: rgba(251,191,36,0.4); --gym-border: rgba(251,191,36,0.55); --gym-accent: #fbbf24; }
.gym-game-card.is-bil { --gym-glow: rgba(167,139,250,0.4); --gym-border: rgba(167,139,250,0.55); --gym-accent: #a78bfa; }
.gym-game-card.is-rps { --gym-glow: rgba(34,211,238,0.4); --gym-border: rgba(34,211,238,0.55); --gym-accent: #22d3ee; }
.gym-game-card.is-quoridor { --gym-glow: rgba(251,146,60,0.4); --gym-border: rgba(251,146,60,0.55); --gym-accent: #fb923c; }
.gym-game-ico {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 1.45rem;
    color: var(--gym-accent);
    background: rgba(0,0,0,0.25);
    border: 1px solid color-mix(in srgb, var(--gym-accent) 40%, transparent);
    box-shadow: 0 0 16px var(--gym-glow);
}
.gym-game-title {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.85rem, 2.8vw, 1.05rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #f8fafc;
    text-shadow: 0 0 12px rgba(255,255,255,0.12);
    line-height: 1.25;
    margin-bottom: 0.3rem;
}
.gym-game-sub {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.3;
}

.gym-leader-card {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    width: 100%;
    text-align: left;
    padding: 1.15rem 1.2rem;
    border-radius: 1.35rem;
    cursor: pointer;
    border: 1px solid rgba(251,191,36,0.4);
    background:
        radial-gradient(ellipse at 0% 50%, rgba(251,191,36,0.2), transparent 45%),
        linear-gradient(120deg, rgba(120,53,15,0.45), rgba(15,23,42,0.9) 50%, rgba(30,27,75,0.85));
    box-shadow:
        0 14px 36px rgba(0,0,0,0.35),
        0 0 24px rgba(251,191,36,0.15),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gym-leader-card:hover {
    transform: translateY(-4px);
    border-color: rgba(252,211,77,0.7);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.4),
        0 0 36px rgba(251,191,36,0.28);
}
.gym-leader-medal {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: #78350f;
    background: radial-gradient(circle at 35% 30%, #fef9c3, #fbbf24 50%, #b45309);
    border: 2px solid rgba(254,243,199,0.65);
    box-shadow: 0 0 20px rgba(251,191,36,0.55), 0 6px 0 #78350f;
    flex-shrink: 0;
}
.gym-leader-copy { flex: 1; min-width: 0; }
.gym-leader-copy strong {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fffbeb;
    text-shadow: 0 0 14px rgba(251,191,36,0.4);
}
.gym-leader-copy em {
    display: block;
    margin-top: 0.25rem;
    font-style: normal;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fde68a;
}
.gym-leader-go {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fde68a;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(251,191,36,0.35);
    flex-shrink: 0;
    font-size: 1rem;
}

/* —— Hazine Odası: Sandık Vitrini —— */
#s-shop-tab.s-shop-vault {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.s-shop-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(251,191,36,0.28);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(251,191,36,0.18), transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(168,85,247,0.12), transparent 45%),
        linear-gradient(145deg, rgba(15,23,42,0.95), rgba(2,6,23,0.92));
    box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}
.s-shop-hero h2 {
    margin: 0;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    font-weight: 900;
    color: #fde68a;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.s-shop-hero h2 .s-shop-chest-ico {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f59e0b, #b45309);
    color: #1c1917;
    box-shadow: 0 0 18px rgba(245,158,11,0.45);
    font-size: 1.15rem;
}
.s-shop-hero p {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
    max-width: 36rem;
    line-height: 1.4;
}
.s-shop-currency {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.s-shop-currency button {
    border-radius: 1rem;
    padding: 0.65rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 900;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(15,23,42,0.75);
    color: #94a3b8;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.s-shop-currency button.is-active {
    color: #fde68a;
    border-color: rgba(251,191,36,0.5);
    background: linear-gradient(145deg, rgba(120,53,15,0.45), rgba(15,23,42,0.9));
    box-shadow: 0 0 16px rgba(245,158,11,0.2);
}
.s-shop-currency button span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: #cbd5e1;
}
.s-shop-chest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 1rem;
    perspective: 1400px;
}
.s-shop-flip {
    height: 17.5rem;
    cursor: pointer;
    perspective: 1200px;
}
.s-shop-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.s-shop-flip.is-flipped .s-shop-flip-inner {
    transform: rotateY(180deg);
}
.s-shop-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1.25rem;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 14px 32px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.12);
    overflow: hidden;
}
.s-shop-face::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255,255,255,0.14), transparent 42%);
    pointer-events: none;
}
.s-shop-face-front {
    background:
        linear-gradient(160deg, rgba(255,255,255,0.08), transparent 50%),
        rgba(15,23,42,0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.s-shop-face-back {
    transform: rotateY(180deg);
    background:
        linear-gradient(160deg, rgba(255,255,255,0.1), transparent 45%),
        rgba(2,6,23,0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.s-shop-flip.is-bronze .s-shop-face { border-color: rgba(180,83,9,0.55); }
.s-shop-flip.is-bronze .s-shop-face-front {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(251,146,60,0.35), transparent 55%),
        linear-gradient(160deg, #78350f 0%, #1c1917 70%);
}
.s-shop-flip.is-silver .s-shop-face { border-color: rgba(148,163,184,0.55); }
.s-shop-flip.is-silver .s-shop-face-front {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(226,232,240,0.28), transparent 55%),
        linear-gradient(160deg, #475569 0%, #0f172a 70%);
}
.s-shop-flip.is-gold .s-shop-face { border-color: rgba(250,204,21,0.6); }
.s-shop-flip.is-gold .s-shop-face-front {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(250,204,21,0.4), transparent 55%),
        linear-gradient(160deg, #a16207 0%, #1c1917 70%);
}
.s-shop-flip.is-diamond .s-shop-face { border-color: rgba(125,211,252,0.55); }
.s-shop-flip.is-diamond .s-shop-face-front {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(56,189,248,0.35), transparent 55%),
        linear-gradient(160deg, #0e7490 0%, #0f172a 70%);
}
.s-shop-flip.is-legendary .s-shop-face { border-color: rgba(192,132,252,0.65); }
.s-shop-flip.is-legendary .s-shop-face-front {
    background:
        radial-gradient(ellipse at 40% 0%, rgba(244,114,182,0.35), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(168,85,247,0.3), transparent 45%),
        linear-gradient(160deg, #6b21a8 0%, #0f172a 70%);
}
.s-shop-face .ico {
    font-size: 2.4rem;
    line-height: 1;
    margin: 0.35rem 0 0.6rem;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
    position: relative;
    z-index: 1;
}
.s-shop-face h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.s-shop-face .hint {
    margin: 0.35rem 0 0;
    font-size: 0.65rem;
    color: rgba(226,232,240,0.75);
    font-weight: 600;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}
.s-shop-face .cost {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 900;
    color: #fde68a;
    position: relative;
    z-index: 1;
}
.s-shop-face .cost.is-locked { color: #64748b; }
.s-shop-face-back .rewards {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.35rem 0 0.55rem;
    position: relative;
    z-index: 1;
}
.s-shop-face-back .reward-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: #e2e8f0;
    padding: 0.3rem 0.4rem;
    border-radius: 0.5rem;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.2);
}
.s-shop-face-back .open-btn {
    border: none;
    border-radius: 0.85rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 900;
    cursor: pointer;
    color: #1c1917;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    box-shadow: 0 0 18px rgba(245,158,11,0.35);
    position: relative;
    z-index: 1;
}
.s-shop-face-back .open-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.s-shop-face-back .back-hint {
    font-size: 0.58rem;
    color: #94a3b8;
    margin-top: 0.35rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.s-shop-stage {
    margin-top: 0.5rem;
    border-radius: 1.5rem;
    min-height: 16rem;
    border: 1px solid rgba(148,163,184,0.2);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.12), transparent 55%),
        rgba(15,23,42,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.25);
}
.s-shop-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.75rem;
}
.s-shop-links button {
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(15,23,42,0.7);
    color: #cbd5e1;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
}
.s-shop-links button:hover {
    border-color: rgba(251,191,36,0.45);
    color: #fde68a;
}

/* —— LGS Deneme Karneleri: Analiz Dashboard (Bento) —— */
#s-exams-tab.s-exam-dash {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.s-exam-dash-head {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}
#s-exams-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.s-exam-island {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    padding: 1.15rem 1.2rem 1.2rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(148,163,184,0.22);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        rgba(15,23,42,0.72);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .2s ease;
}
.s-exam-island:hover {
    transform: translateY(-5px);
    border-color: rgba(52,211,153,0.35);
    box-shadow:
        0 20px 44px rgba(0,0,0,0.4),
        0 0 0 1px rgba(52,211,153,0.12),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.s-exam-island-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.s-exam-island-meta h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.s-exam-island-meta p {
    margin: 0.3rem 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
}
.s-exam-ring {
    width: 4.6rem;
    height: 4.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(15,23,42,0.95) 58%, transparent 59%),
        conic-gradient(#34d399 calc(var(--p, 0) * 1%), rgba(148,163,184,0.18) 0);
    box-shadow:
        0 0 0 3px rgba(15,23,42,0.55),
        0 8px 20px rgba(52,211,153,0.18);
}
.s-exam-ring > span {
    font-size: 0.72rem;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: -0.02em;
}
.s-exam-score {
    font-size: clamp(2.1rem, 6vw, 2.85rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #f8fafc;
    text-shadow: 0 0 28px rgba(45,212,191,0.25);
}
.s-exam-score small {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5eead4;
}
.s-exam-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.s-exam-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.s-exam-pill.is-turkce { background: rgba(244,63,94,0.15); color: #fda4af; border-color: rgba(244,63,94,0.3); }
.s-exam-pill.is-mat { background: rgba(56,189,248,0.15); color: #7dd3fc; border-color: rgba(56,189,248,0.3); }
.s-exam-pill.is-fen { background: rgba(52,211,153,0.15); color: #6ee7b7; border-color: rgba(52,211,153,0.3); }
.s-exam-pill.is-sosyal { background: rgba(251,146,60,0.15); color: #fdba74; border-color: rgba(251,146,60,0.3); }
.s-exam-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: none;
    cursor: pointer;
    margin-top: 0.15rem;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    color: #042f2e;
    background: linear-gradient(135deg, #5eead4 0%, #34d399 45%, #2dd4bf 100%);
    box-shadow: 0 8px 22px rgba(45,212,191,0.28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.s-exam-cta i {
    transition: transform .22s ease;
}
.s-exam-cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 22px rgba(45,212,191,0.55),
        0 10px 28px rgba(45,212,191,0.35);
}
.s-exam-cta:hover i {
    transform: translateX(4px);
}
.s-exam-empty {
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
    border-radius: 1.35rem;
    border: 1px dashed rgba(100,116,139,0.45);
    background: rgba(15,23,42,0.45);
}

/* —— Ödevler: kompakt Dinamik Ada (Bento) —— */
#s-homework-tab.s-hw-bento {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#s-hw-odevler-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}
#s-hw-odevler-panel.hidden,
#s-hw-odevler-panel[hidden] {
    display: none !important;
}
#s-hw-odevler-panel > * {
    margin: 0;
}

.s-hw-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.s-hw-group:first-child,
#s-hw-odevler-panel > .s-student-tests-section:first-child {
    border-top: none;
    padding-top: 0;
}
#s-student-tests-section.s-student-tests-section {
    border-top: none;
    padding-top: 0;
}
#s-student-polls-section.s-student-polls-section {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.s-hw-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}
.s-hw-group-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 900;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}
.s-hw-group-head p {
    margin: 0.2rem 0 0;
    font-size: 0.65rem;
    color: #94a3b8;
    line-height: 1.35;
    flex: 1 1 100%;
}
.s-hw-group-head.is-compact p {
    max-width: 28rem;
}

.s-hw-group-odevler .s-hw-filters-wrap {
    margin: 0;
}

.s-hw-group-tools {
    gap: 1.1rem;
}
.s-hw-group-tools .s-hw-duo,
.s-hw-group-tools .s-hw-topics-island,
.s-hw-group-tools .s-hw-send-island {
    margin-top: 0;
}

.s-hw-group-calismalar .s-hw-calismalar-badge {
    flex-shrink: 0;
    align-self: flex-start;
}

.s-student-tests-done-section {
    margin-top: 0.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.28);
}

#s-hw-calismalar-panel.s-hw-calismalar-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    animation: s-hw-panel-in 0.28s ease-out;
}
#s-hw-calismalar-panel.hidden,
#s-hw-calismalar-panel[hidden] {
    display: none !important;
}
#s-hw-odevler-panel {
    animation: s-hw-panel-in 0.28s ease-out;
}
@keyframes s-hw-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.s-hw-group-calismalar.is-standalone {
    border-top: none;
    padding-top: 0;
    gap: 1rem;
}
.s-hw-calismalar-intro {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.45;
    color: #94a3b8;
    padding: 0.65rem 0.85rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.s-hw-mode-hint strong {
    color: #e2e8f0;
    font-weight: 800;
}
#s-homework-tab .s-hw-island-head {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}
#s-homework-tab .s-hw-island-head h2,
#s-homework-tab .s-hw-page-title {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.02em;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-island-head h2,
#student-panel.is-side-tab #s-homework-tab .s-hw-page-title,
#student-panel.is-side-tab #s-homework-tab .s-hw-page-title i {
    color: #f8fafc !important;
}
.s-hw-mode-hint {
    margin: 0.2rem 0 0;
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.35;
    max-width: 28rem;
}
.s-hw-mode-switch {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.28rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.25);
    width: 100%;
    max-width: 24rem;
}
.s-hw-mode-switch button {
    flex: 1;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.s-hw-mode-switch button.is-active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(99, 102, 241, 0.22));
    color: #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.s-hw-filters-wrap { width: 100%; }
.s-hw-calismalar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.s-hw-calismalar-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: #f8fafc;
}
.s-hw-calismalar-head p {
    margin: 0.25rem 0 0;
    font-size: 0.65rem;
    color: #94a3b8;
}
.s-hw-calismalar-badge {
    font-size: 0.58rem;
    font-weight: 800;
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: 999px;
    padding: 0.35rem 0.55rem;
    white-space: nowrap;
}
.s-hw-calismalar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
@media (min-width: 640px) {
    .s-hw-calismalar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s-hw-week-subj {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.72);
    overflow: hidden;
}
.s-hw-week-subj-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: none;
    background: rgba(30, 41, 59, 0.55);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.s-hw-week-subj-head strong {
    display: block;
    font-size: 0.78rem;
    color: #f8fafc;
}
.s-hw-week-subj-head span {
    font-size: 0.58rem;
    color: #94a3b8;
    font-weight: 700;
}
.s-hw-week-subj-chevron {
    margin-left: auto;
    color: #64748b;
    font-size: 0.7rem;
}
.s-hw-week-subj-phases {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
}
.s-hw-work-phase {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.55);
    padding: 0.5rem 0.55rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.s-hw-work-phase.is-done {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(6, 78, 59, 0.22);
}
.s-hw-work-phase.is-prev .s-hw-work-phase-kicker { color: #fcd34d; }
.s-hw-work-phase.is-current .s-hw-work-phase-kicker { color: #7dd3fc; }
.s-hw-work-phase.is-next .s-hw-work-phase-kicker { color: #c4b5fd; }
.s-hw-work-phase-check {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1;
    margin-top: 0.1rem;
}
.s-hw-work-phase.is-done .s-hw-work-phase-check { color: #34d399; }
.s-hw-work-phase-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.s-hw-work-phase-kicker {
    font-size: 0.54rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.s-hw-work-phase-body strong {
    font-size: 0.68rem;
    color: #f1f5f9;
    line-height: 1.25;
}
.s-hw-work-phase-body em {
    font-size: 0.58rem;
    color: #94a3b8;
    font-style: normal;
    line-height: 1.25;
}
.s-hw-subj-modal-shell {
    width: 100%;
    max-width: 26rem;
    max-height: min(92vh, 40rem);
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 1.35rem 1.35rem 0 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
@media (min-width: 640px) {
    .s-hw-subj-modal-shell { border-radius: 1.35rem; max-height: 88vh; }
}
.s-hw-subj-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
}
.s-hw-subj-modal-head-text {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.s-hw-subj-modal-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.s-hw-subj-modal-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: #f8fafc;
}
.s-hw-subj-modal-head p {
    margin: 0.15rem 0 0;
    font-size: 0.62rem;
    color: #94a3b8;
}
.s-hw-subj-modal-close {
    border: none;
    background: rgba(15, 23, 42, 0.65);
    color: #94a3b8;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    cursor: pointer;
}
.s-hw-subj-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.s-hw-subj-modal-works {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.s-hw-subj-modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.s-hw-subj-modal-label {
    font-size: 0.62rem;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.s-hw-subj-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.s-hw-subj-modal-empty {
    margin: 0;
    font-size: 0.68rem;
    color: #64748b;
    font-style: italic;
}
.s-hw-subj-modal-hw,
.s-hw-subj-modal-file {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.7rem;
    background: rgba(30, 41, 59, 0.55);
    padding: 0.5rem 0.6rem;
    text-align: left;
}
.s-hw-subj-modal-hw {
    cursor: pointer;
    width: 100%;
    color: inherit;
}
.s-hw-subj-modal-hw strong,
.s-hw-subj-modal-file span {
    display: block;
    font-size: 0.68rem;
    color: #e2e8f0;
}
.s-hw-subj-modal-hw span,
.s-hw-subj-modal-file em {
    font-size: 0.58rem;
    color: #94a3b8;
    font-style: normal;
}
.s-hw-subj-modal-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(15, 23, 42, 0.92);
}
.s-hw-subj-modal-btn {
    border: none;
    border-radius: 0.8rem;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 0.65rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.s-hw-subj-modal-btn.is-ghost {
    background: rgba(51, 65, 85, 0.65);
    color: #cbd5e1;
}
.s-hw-subj-modal-btn.is-primary {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
}
.s-bento-homework .s-hw-subj-card {
    cursor: pointer;
    border: none;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.s-bento-homework .s-hw-subj-card:active {
    transform: scale(0.97);
}
.s-hw-subj-works {
    font-size: 0.48rem;
    font-weight: 800;
    color: #64748b;
    line-height: 1.2;
}
.s-hw-subj-works.is-done {
    color: #34d399;
}
.s-hw-subj-modal-head.hw-subj-turkce .s-hw-subj-modal-icon { background: #fee2e2; color: #dc2626; }
.s-hw-subj-modal-head.hw-subj-matematik .s-hw-subj-modal-icon { background: #dbeafe; color: #2563eb; }
.s-hw-subj-modal-head.hw-subj-fen .s-hw-subj-modal-icon { background: #dcfce7; color: #16a34a; }
.s-hw-subj-modal-head.hw-subj-sosyal .s-hw-subj-modal-icon { background: #fef9c3; color: #ca8a04; }
.s-hw-subj-modal-head.hw-subj-ingilizce .s-hw-subj-modal-icon { background: rgba(124, 58, 237, 0.22); color: #a78bfa; }
.s-hw-subj-modal-head.hw-subj-din .s-hw-subj-modal-icon { background: rgba(13, 148, 136, 0.22); color: #2dd4bf; }
@media (min-width: 640px) {
    #s-homework-tab .s-hw-island-head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

/*
 * Yan sekme ödev — koyu cam zemin; başlık/metin açık, kart içi koyu.
 */
#student-panel.is-side-tab #s-homework-tab.s-hw-bento,
#student-panel.is-side-tab #s-homework-tab {
    color: #e2e8f0 !important;
    background: rgba(15, 23, 42, 0.92) !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-island-head h2,
#student-panel.is-side-tab #s-homework-tab .s-hw-page-title,
#student-panel.is-side-tab #s-homework-tab .s-hw-page-title i,
#student-panel.is-side-tab #s-homework-tab .s-hw-group-head h3,
#student-panel.is-side-tab #s-homework-tab .s-hw-calismalar-head h3,
#student-panel.is-side-tab #s-homework-tab h2,
#student-panel.is-side-tab #s-homework-tab h3 {
    color: #f8fafc !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-work-title,
#student-panel.is-side-tab #s-homework-tab .s-hw-card-title {
    color: #0f172a !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-mode-hint,
#student-panel.is-side-tab #s-homework-tab .s-hw-mode-hint strong,
#student-panel.is-side-tab #s-homework-tab .s-hw-group-head p,
#student-panel.is-side-tab #s-homework-tab .s-hw-calismalar-head p,
#student-panel.is-side-tab #s-homework-tab .s-hw-mesh .s-hw-empty {
    color: #cbd5e1 !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-calismalar-badge {
    color: #ddd6fe !important;
    background: rgba(124, 58, 237, 0.28) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-mode-switch {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-mode-switch button {
    color: #94a3b8 !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-mode-switch button.is-active {
    color: #f8fafc !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(99, 102, 241, 0.25)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-back,
#student-panel.is-side-tab #s-homework-tab .s-hw-toolbar {
    color: #e2e8f0 !important;
}
#student-panel.is-side-tab #s-homework-tab .s-hw-island-label,
#student-panel.is-side-tab #s-homework-tab .s-student-tests-head h3,
#student-panel.is-side-tab #s-homework-tab .s-student-tests-head p {
    color: #e2e8f0 !important;
}

/* 1) Segmented Control — tek çerçeve */
.s-hw-filters {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.28rem;
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, rgba(30,41,59,0.95), rgba(15,23,42,0.92));
    border: 1px solid rgba(148,163,184,0.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 8px 22px rgba(0,0,0,0.28);
    max-width: 100%;
}
.s-hw-pill {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 0.48rem 0.85rem;
    border-radius: 0.9rem;
    cursor: pointer;
    transition: transform .15s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.s-hw-pill:hover {
    color: #e2e8f0;
    background: rgba(255,255,255,0.06);
}
.s-hw-pill.is-active {
    color: #0f172a;
    background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
    box-shadow: 0 4px 14px rgba(15,23,42,0.35);
}
.s-hw-mesh {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(8rem, auto);
    gap: 1.1rem;
    width: 100%;
    align-content: start;
}
.s-hw-mesh .s-hw-empty {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #94a3b8;
    font-style: italic;
    padding: 1rem 0.35rem;
}
.s-hw-card {
    position: relative;
    grid-column: span 6;
    min-height: 9.5rem;
    border-radius: 1.75rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-left: 6px solid #94a3b8;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(255,255,255,0.95), transparent 55%),
        #fff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
    padding: 1.15rem 1.2rem 1.1rem 1.15rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .2s ease;
}
.s-hw-card.is-wide { grid-column: span 8; min-height: 10.5rem; }
.s-hw-card.is-tall { grid-column: span 4; min-height: 12.5rem; }
.s-hw-card.is-hero { grid-column: span 12; min-height: 11rem; }
.s-hw-card.is-compact { grid-column: span 4; min-height: 9rem; }
@media (max-width: 900px) {
    .s-hw-card,
    .s-hw-card.is-wide,
    .s-hw-card.is-tall,
    .s-hw-card.is-hero,
    .s-hw-card.is-compact {
        grid-column: span 6;
        min-height: 9.25rem;
    }
}
@media (max-width: 560px) {
    .s-hw-mesh { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
    .s-hw-card,
    .s-hw-card.is-wide,
    .s-hw-card.is-tall,
    .s-hw-card.is-hero,
    .s-hw-card.is-compact {
        grid-column: span 6;
    }
}
.s-hw-card:hover,
.s-hw-card.s-bento-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
.s-hw-card[data-subj="turkce"] {
    border-left-color: #ef4444;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(254,226,226,0.85), transparent 50%),
        linear-gradient(160deg, #fff 0%, #fff5f5 100%);
}
.s-hw-card[data-subj="matematik"] {
    border-left-color: #3b82f6;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(219,234,254,0.9), transparent 50%),
        linear-gradient(160deg, #fff 0%, #f0f7ff 100%);
}
.s-hw-card[data-subj="fen"] {
    border-left-color: #22c55e;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(220,252,231,0.9), transparent 50%),
        linear-gradient(160deg, #fff 0%, #f0fdf6 100%);
}
.s-hw-card[data-subj="sosyal"] {
    border-left-color: #eab308;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(254,243,199,0.9), transparent 50%),
        linear-gradient(160deg, #fff 0%, #fffbeb 100%);
}
.s-hw-card[data-subj="genel"] {
    border-left-color: #64748b;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(241,245,249,0.95), transparent 50%),
        #fff;
}
.s-hw-card .s-hw-subj-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.45rem;
}
.s-hw-card[data-subj="turkce"] .s-hw-subj-chip { color: #e11d48; }
.s-hw-card[data-subj="matematik"] .s-hw-subj-chip { color: #2563eb; }
.s-hw-card[data-subj="fen"] .s-hw-subj-chip { color: #059669; }
.s-hw-card[data-subj="sosyal"] .s-hw-subj-chip { color: #b45309; }
.s-hw-due {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.08);
    max-width: 46%;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.s-hw-due.is-urgent { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.s-hw-due.is-today { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.s-hw-due.is-soon { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.s-hw-due.is-ok { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.s-hw-due.is-late { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
.s-hw-card h4 {
    margin: 0 7rem 0.4rem 0;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.s-hw-card .meta {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    margin-top: auto;
}
.s-hw-card .foot {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.s-hw-card .foot .s-hw-status {
    font-size: 0.62rem;
    font-weight: 900;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
}

/* 2) Kitaplığım + Soru Bankam — yan yana eşit adalar */
.s-hw-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    width: 100%;
    margin-top: 0.15rem;
}
@media (max-width: 560px) {
    .s-hw-duo { grid-template-columns: 1fr; }
}
.s-hw-duo-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    text-align: left;
    border: none;
    cursor: pointer;
    border-radius: 1.35rem;
    padding: 1rem 1.05rem 1.1rem;
    min-height: 7.25rem;
    color: #fff;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.s-hw-duo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.38);
}
.s-hw-duo-card.is-lib {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(129,140,248,0.4), transparent 55%),
        linear-gradient(145deg, #312e81 0%, #1e1b4b 55%, #0f172a 100%);
    border: 1px solid rgba(129,140,248,0.35);
}
.s-hw-duo-card.is-bank {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(251,146,60,0.4), transparent 55%),
        linear-gradient(145deg, #9a3412 0%, #7c2d12 50%, #0f172a 100%);
    border: 1px solid rgba(251,146,60,0.35);
}
.s-hw-duo-card .s-hw-duo-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
}
.s-hw-duo-card strong {
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.s-hw-duo-card em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(226,232,240,0.75);
    line-height: 1.35;
}
.s-hw-lib-cta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #c7d2fe;
    text-transform: uppercase;
}
.s-hw-duo-card.is-lib.is-has-active-book {
    border-color: rgba(165,180,252,0.55);
    box-shadow: 0 14px 32px rgba(79,70,229,0.28);
}
.s-hw-duo-card.is-lib.is-has-active-book .s-hw-lib-cta {
    color: #e0e7ff;
}
.s-lib-quick-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #312e81;
    background: linear-gradient(135deg, #e0e7ff, #a5b4fc);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 6px 16px rgba(99,102,241,0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.s-lib-quick-cta:active {
    transform: scale(0.97);
}
.s-reading-streak-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(30,27,75,0.92), rgba(15,23,42,0.88));
    border: 1px solid rgba(129,140,248,0.22);
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.s-reading-streak-bar.is-active {
    border-color: rgba(251,146,60,0.35);
}
.s-reading-streak-bar.is-at-risk {
    border-color: rgba(239,68,68,0.45);
    background: linear-gradient(135deg, rgba(69,10,10,0.55), rgba(15,23,42,0.9));
    animation: s-reading-risk-pulse 2.5s ease-in-out infinite;
}
.s-reading-streak-bar.is-done-today {
    border-color: rgba(52,211,153,0.35);
}
@keyframes s-reading-risk-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.22); }
    50% { box-shadow: 0 8px 22px rgba(239,68,68,0.25); }
}
.s-reading-streak-fire {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}
.s-reading-streak-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.s-reading-streak-copy strong {
    font-size: 0.78rem;
    font-weight: 900;
    color: #fde68a;
    letter-spacing: -0.02em;
}
.s-reading-streak-copy span {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(226,232,240,0.75);
    line-height: 1.35;
}
.s-reading-streak-week {
    display: flex;
    gap: 0.28rem;
    flex-shrink: 0;
}
.s-read-day {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.52rem;
    font-weight: 900;
    color: rgba(148,163,184,0.7);
    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(100,116,139,0.35);
}
.s-read-day.is-on {
    color: #fef3c7;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border-color: rgba(253,230,138,0.45);
}
.s-read-day.is-today {
    box-shadow: 0 0 0 2px rgba(129,140,248,0.45);
}
.s-bento-reading-streak {
    font-size: 0.58rem;
    font-weight: 800;
    color: #fdba74;
    letter-spacing: 0.02em;
}
.s-bento-reading-streak.hidden { display: none; }
.rdash-streak-line {
    margin: 0.35rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: 0.65rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fde68a;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.28);
}
.s-reflection-pending-banner {
    border-radius: 1rem;
    padding: 0.65rem 0.75rem;
    background: linear-gradient(135deg, rgba(67,56,202,0.35), rgba(15,23,42,0.92));
    border: 1px solid rgba(129,140,248,0.4);
    box-shadow: 0 8px 22px rgba(67,56,202,0.2);
}
.s-reflection-pending-banner.hidden { display: none; }
.s-reflection-pending-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.s-reflection-pending-ico { font-size: 1.35rem; flex-shrink: 0; }
.s-reflection-pending-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.s-reflection-pending-copy strong {
    font-size: 0.74rem;
    font-weight: 900;
    color: #e0e7ff;
}
.s-reflection-pending-copy span {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(226,232,240,0.75);
}
.s-reflection-pending-btn {
    flex-shrink: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #312e81;
    background: linear-gradient(135deg, #e0e7ff, #a5b4fc);
    border: 1px solid rgba(255,255,255,0.25);
}
.s-reflection-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fef3c7;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 10px rgba(79,70,229,0.45);
}
.s-overdue-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff7ed;
    background: linear-gradient(135deg, #dc2626, #ea580c);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 10px rgba(220,38,38,0.45);
}
.s-shelf-book.is-overdue .s-shelf-book-inner {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.55);
}
.s-shelf-book.needs-reflection {
    border-color: rgba(129,140,248,0.45);
}
.s-shelf-book-cover { position: relative; }
.s-shelf-book .p-actions button.is-warn {
    background: rgba(239,68,68,0.2);
    border-color: rgba(248,113,113,0.45);
    color: #fecaca;
}
.s-home-reflection-nudge {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 0.56rem;
    font-weight: 800;
    color: #c4b5fd;
    letter-spacing: 0.02em;
}
.s-home-reflection-nudge.hidden { display: none; }
.s-reflection-progress-wrap { margin-top: 0.55rem; }
.s-reflection-progress-bar {
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(129,140,248,0.25);
    overflow: hidden;
}
.s-reflection-progress-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    transition: width 0.2s ease;
}
.s-reflection-progress-label {
    margin: 0.3rem 0 0;
    font-size: 0.58rem;
    font-weight: 700;
    color: #a5b4fc;
}
.t-book-review-modal .tbr-alert {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(15,23,42,0.55);
}
.t-book-review-modal .tbr-alert strong {
    display: block;
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}
.t-book-review-modal .tbr-alert p {
    margin: 0;
    font-size: 0.72rem;
    color: #cbd5e1;
    line-height: 1.4;
}
.t-book-review-modal .tbr-alert.is-warn {
    border-color: rgba(248,113,113,0.45);
    background: rgba(127,29,29,0.25);
}
.t-book-review-modal .tbr-alert.is-warn strong { color: #fecaca; }
.t-book-review-modal .tbr-alert.is-partial {
    border-color: rgba(251,191,36,0.4);
    background: rgba(120,53,15,0.22);
}
.t-book-review-modal .tbr-alert.is-partial strong { color: #fde68a; }
.t-book-review-modal .tbr-alert.is-complete {
    border-color: rgba(52,211,153,0.35);
    background: rgba(6,78,59,0.22);
}
.t-book-review-modal .tbr-alert.is-complete strong { color: #6ee7b7; }
.s-shelf-book.is-hero {
    cursor: pointer;
}
.s-shelf-book.is-hero .p-actions button:first-child {
    font-weight: 900;
}

/* —— Kitap önerileri (Netflix şeritleri) —— */
.s-reco-zone {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0.15rem 0 0.35rem;
}
.s-reco-unit.hidden { display: none; }
.s-reco-shelf {
    position: relative;
    padding: 0.9rem 0.7rem 1.45rem;
    border-radius: 0.7rem 0.7rem 0.22rem 0.22rem;
    background:
        linear-gradient(180deg, rgba(255,248,230,0.1), transparent 30%),
        radial-gradient(ellipse 110% 80% at 50% 100%, rgba(0,0,0,0.2), transparent 55%),
        repeating-linear-gradient(
            91deg,
            #5c3a21 0px,
            #6b4423 2px,
            #4a2f1a 5px,
            #7a5230 8px,
            #8b5e34 11px,
            #5c3a21 14px
        ),
        linear-gradient(180deg, #7a5230 0%, #5c3a21 50%, #3f2a18 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -16px 22px rgba(0,0,0,0.35),
        0 10px 28px rgba(0,0,0,0.32);
}
.s-reco-shelf::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.1rem;
    height: 0.72rem;
    border-radius: 0.12rem;
    background: linear-gradient(180deg, #a67c52 0%, #5c3a21 55%, #3f2a18 100%);
    box-shadow:
        0 6px 10px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.2);
    pointer-events: none;
}
.s-reco-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0.1rem 0.2rem;
    align-items: flex-end;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.5) transparent;
}
.s-reco-row::-webkit-scrollbar { height: 5px; }
.s-reco-row::-webkit-scrollbar-thumb {
    background: rgba(129,140,248,0.45);
    border-radius: 999px;
}
.s-reco-loading {
    margin: 0;
    padding: 0.5rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(196,181,253,0.85);
}
.s-reco-poster {
    flex: 0 0 auto;
    width: 5.35rem;
    scroll-snap-align: start;
    border: 0;
    padding: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    margin-bottom: 0.12rem;
}
.s-reco-poster-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 0.45rem 0.55rem 0.55rem 0.45rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        3px 6px 14px rgba(0,0,0,0.45),
        1px 0 0 rgba(255,255,255,0.12) inset,
        -2px 0 8px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-reco-vintage-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.15rem;
    padding: 0.42rem 0.38rem 0.42rem 0.55rem;
    overflow: hidden;
}
.s-reco-vintage-fallback .v-spine {
    position: absolute;
    left: 0.28rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 0.22rem;
    border-radius: 1px;
    background: linear-gradient(180deg, #d4af37, #8a6a1f 50%, #d4af37);
    opacity: 0.92;
}
.s-reco-vintage-fallback .v-title {
    position: relative;
    z-index: 1;
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.22;
    color: #fff7ed;
    text-shadow: 0 1px 3px rgba(0,0,0,0.75);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-reco-vintage-fallback .v-author {
    position: relative;
    z-index: 1;
    font-size: 0.48rem;
    font-weight: 700;
    color: rgba(255, 245, 230, 0.88);
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-reco-vintage-fallback.skin-burgundy,
.s-reco-poster-cover.skin-burgundy .s-reco-vintage-fallback {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,220,150,0.16), transparent 50%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 6px),
        linear-gradient(145deg, #7f1d1d 0%, #450a0a 50%, #1c0a0a 100%);
}
.s-reco-vintage-fallback.skin-forest {
    background:
        radial-gradient(ellipse at 70% 10%, rgba(255,236,179,0.14), transparent 45%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, #14532d 0%, #052e16 55%, #022c22 100%);
}
.s-reco-vintage-fallback.skin-navy {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(147,197,253,0.12), transparent 50%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 3px, transparent 3px 8px),
        linear-gradient(145deg, #1e3a8a 0%, #172554 50%, #0c1a3a 100%);
}
.s-reco-vintage-fallback.skin-oxblood {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(252,211,77,0.15), transparent 45%),
        linear-gradient(160deg, #881337 0%, #4c0519 48%, #1f0a12 100%);
}
.s-reco-vintage-fallback.skin-sand {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.12), transparent 50%),
        repeating-linear-gradient(90deg, rgba(120,53,15,0.12) 0 1px, transparent 1px 7px),
        linear-gradient(145deg, #a16207 0%, #78350f 50%, #451a03 100%);
}
.s-reco-vintage-fallback.skin-teal {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(153,246,228,0.14), transparent 45%),
        linear-gradient(145deg, #0f766e 0%, #115e59 45%, #042f2e 100%);
}
.s-reco-vintage-fallback.skin-plum {
    background:
        radial-gradient(ellipse at 10% 10%, rgba(233,213,255,0.16), transparent 50%),
        repeating-linear-gradient(160deg, rgba(0,0,0,0.1) 0 2px, transparent 2px 7px),
        linear-gradient(145deg, #6b21a8 0%, #4c1d95 50%, #1e1038 100%);
}
.s-reco-vintage-fallback.skin-amber {
    background:
        radial-gradient(ellipse at 60% 90%, rgba(254,243,199,0.18), transparent 45%),
        linear-gradient(145deg, #b45309 0%, #92400e 48%, #451a03 100%);
}
.s-reco-poster:hover .s-reco-poster-cover,
.s-reco-poster:focus-visible .s-reco-poster-cover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        5px 12px 20px rgba(0,0,0,0.5),
        0 0 0 1px rgba(251,191,36,0.25);
}
.s-reco-poster-cover .s-reco-cover-img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: rgba(15,23,42,0.2);
}
.s-reco-poster-cover .s-reco-cover-img.is-broken {
    display: none;
}
.s-reco-poster-cover img:not(.s-reco-cover-img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s-reco-poster-title {
    display: block;
    margin-top: 0.32rem;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.25;
    color: #f8fafc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-reco-poster-author {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.5rem;
    font-weight: 600;
    color: #cbd5e1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-reco-badge {
    position: absolute;
    top: 0.28rem;
    left: 0.28rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.48rem;
    font-weight: 900;
    color: #fef3c7;
    background: rgba(15,23,42,0.72);
    border: 1px solid rgba(251,191,36,0.45);
}
.s-reco-add-ico {
    position: absolute;
    right: 0.28rem;
    bottom: 0.28rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 900;
    color: #312e81;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
@media (min-width: 480px) {
    .s-reco-poster { width: 5.65rem; }
}
/* Konular — kompakt ada */
.s-hw-topics-island {
    border-radius: 1.35rem;
    padding: 1rem 1.05rem;
    background: linear-gradient(160deg, rgba(15,23,42,0.96), rgba(2,6,23,0.92));
    border: 1px solid rgba(51,65,85,0.8);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    margin-top: 0.15rem;
}
.s-hw-topics-island > .s-hw-island-label {
    display: block;
    margin: 0 0 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51,65,85,0.85);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
/* 3) Öğretmenime Ödev Gönder — neon / cesur ada */
.s-hw-send-island {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 1.15rem 1.15rem 1.2rem;
    margin-top: 0.15rem;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(34,211,238,0.35), transparent 45%),
        radial-gradient(ellipse at 100% 0%, rgba(236,72,153,0.4), transparent 48%),
        radial-gradient(ellipse at 80% 100%, rgba(163,230,53,0.22), transparent 40%),
        linear-gradient(145deg, #1a0533 0%, #0c1222 45%, #042f2e 100%);
    border: 1px solid rgba(34,211,238,0.45);
    box-shadow:
        0 0 0 1px rgba(236,72,153,0.15),
        0 0 28px rgba(34,211,238,0.18),
        0 0 40px rgba(236,72,153,0.12),
        0 14px 36px rgba(0,0,0,0.4);
}
.s-hw-send-island::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
    opacity: 0.7;
}
.s-hw-send-island > * { position: relative; z-index: 1; }
.s-hw-send-island .s-hw-island-label {
    display: block;
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f0abfc;
    text-shadow: 0 0 12px rgba(236,72,153,0.55);
}
.s-hw-send-island label {
    color: #a5f3fc !important;
}
.s-hw-send-island select,
.s-hw-send-island .s-hw-send-panel {
    background: rgba(2,6,23,0.72);
    border: 1px solid rgba(34,211,238,0.28);
    color: #f8fafc;
    border-radius: 0.9rem;
}
.s-hw-send-island select:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34,211,238,0.25);
}
.s-hw-send-drop {
    border: 2px dashed rgba(34,211,238,0.45);
    border-radius: 1.1rem;
    padding: 1.15rem 0.85rem;
    text-align: center;
    background: rgba(2,6,23,0.45);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.s-hw-send-drop:hover {
    border-color: #f0abfc;
    box-shadow: 0 0 20px rgba(236,72,153,0.2);
}
.s-hw-send-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(34,211,238,0.2);
}
.s-hw-send-actions button {
    flex: 1;
    min-width: 5rem;
    border: none;
    border-radius: 0.85rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.s-hw-send-actions button:hover { transform: translateY(-1px); }
.s-hw-send-actions .is-attach {
    background: rgba(15,23,42,0.9);
    color: #e2e8f0;
    border: 1px solid rgba(148,163,184,0.35);
}
.s-hw-send-actions .is-send {
    background: linear-gradient(135deg, #22d3ee 0%, #a3e635 50%, #ec4899 100%);
    color: #0f172a;
    box-shadow: 0 0 18px rgba(34,211,238,0.45);
}
.s-hw-send-actions .is-cancel {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.35);
}

/* —— Görevlerim (s-quest-tab) bento / dashboard —— */
/* Aktif olmayan tüm öğrenci sekmeleri kesin gizlenir (display:flex kurallarını ezer) */
.s-panel-tab.hidden,
.s-panel-tab[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
#s-quest-tab.s-quest-bento:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}
#s-home-tab.s-bento-home:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
#s-gym-tab.s-panel-tab:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
#s-library-tab.s-lib-bento:not(.hidden),
#s-homework-tab.s-hw-bento:not(.hidden),
#s-testbank-tab.s-tb-bento:not(.hidden),
#s-exams-tab.s-exam-dash:not(.hidden),
#s-shop-tab.s-shop-vault:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-direction: column;
}
.s-quest-dash {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    padding: 1.25rem 1.35rem 1.35rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.s-quest-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.s-quest-dash-head h3 {
    margin: 0;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
}
.s-quest-dash-head p {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #d1d5db;
}

.s-quest-dash-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: stretch;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    width: 100%;
    min-width: 0;
    overflow: visible;
}
.s-quest-period-switch {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.22rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 10px rgba(15,23,42,0.06);
    gap: 0.12rem;
    overflow: visible;
}
.s-quest-period-switch button {
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.4rem 0.35rem;
    font-size: clamp(0.58rem, 2.7vw, 0.68rem);
    font-weight: 900;
    color: #64748b;
    background: transparent;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.s-quest-period-switch button.is-active {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.2);
}
.s-quest-period-switch button:hover:not(.is-active) {
    color: #0f172a;
    background: rgba(255,255,255,0.7);
}
.s-quest-term-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.65);
    color: #0f172a;
    white-space: nowrap;
}
.s-quest-term-badge.is-holiday {
    background: linear-gradient(135deg, #fef08a, #fdba74);
    color: #9a3412;
    border-color: rgba(251,146,60,0.45);
}
.s-quest-term-badge.is-active-term {
    background: linear-gradient(135deg, #bbf7d0, #99f6e4);
    color: #065f46;
    border-color: rgba(16,185,129,0.35);
}
.s-quest-dash-grid {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.s-quest-dash-grid.is-switching {
    opacity: 0.35;
    transform: translateY(4px);
}
.s-quest-exam-chevron {
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    flex-shrink: 0;
    margin-left: 0;
    color: #64748b;
    transition: transform 0.22s ease;
}
.s-quest-exam-acc.is-open .s-quest-exam-chevron {
    transform: rotate(180deg);
    color: #0f172a;
}
.s-quest-exam-empty {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    font-style: italic;
    padding: 0.55rem 0.35rem 0.2rem;
}
.s-quest-camp-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.s-quest-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.s-quest-dash-grid.is-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
    .s-quest-dash-grid.is-quad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.s-quest-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    padding: 0.75rem 0.55rem 0.8rem;
    border-radius: 1.15rem;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(15,23,42,0.06);
    min-width: 0;
}
.s-quest-metric.is-reading { border-color: rgba(129,140,248,0.35); }
.s-quest-metric.is-questions { border-color: rgba(244,114,182,0.35); }
.s-quest-metric.is-continuity { border-color: rgba(251,191,36,0.35); }
.s-quest-metric.is-work { border-color: rgba(45,212,191,0.35); }
.s-quest-ring {
    --p: 0;
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: conic-gradient(var(--ring, #10b981) calc(var(--p) * 1%), rgba(15,23,42,0.08) 0);
    display: grid;
    place-items: center;
    position: relative;
}
.s-quest-ring::before {
    content: '';
    position: absolute;
    inset: 0.45rem;
    border-radius: inherit;
    background: #fff;
}
.s-quest-ring span {
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
    font-weight: 900;
    color: #0f172a;
}
.s-quest-metric-body { min-width: 0; width: 100%; }
.s-quest-metric-body strong {
    display: block;
    font-size: 0.68rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
}
.s-quest-metric-ico {
    margin-right: 0.2rem;
    opacity: 0.8;
}
.s-quest-metric-body em {
    display: block;
    margin-top: 0.28rem;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.35;
}
.s-quest-metric-body .is-ahead {
    color: #059669;
    font-weight: 900;
}
.s-quest-metric-body .is-behind {
    color: #e11d48;
    font-weight: 800;
}
.s-quest-section {
    border-radius: 1.75rem;
    padding: 1.15rem 1.2rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}
.s-quest-section.is-camp {
    background:
        radial-gradient(ellipse at 90% 10%, rgba(52,211,153,0.18), transparent 40%),
        radial-gradient(ellipse at 10% 90%, rgba(56,189,248,0.16), transparent 42%),
        linear-gradient(160deg, #ecfdf5 0%, #f0f9ff 50%, #fefce8 100%);
    border-color: rgba(255,255,255,0.85);
}
.s-quest-section.is-exam {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(251,191,36,0.2), transparent 45%),
        linear-gradient(165deg, #fffbeb 0%, #fff 55%);
}
.s-quest-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}
.s-quest-section-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.s-quest-section-head p {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}
.s-quest-count-pill {
    font-size: 1.05rem;
    font-weight: 900;
    color: #059669;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.s-quest-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: 0.75rem;
}
.s-quest-card {
    position: relative;
    text-align: left;
    border: none;
    cursor: pointer;
    border-radius: 1.35rem;
    padding: 1rem 1.05rem;
    min-height: 7.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.25s ease;
    overflow: hidden;
}
.s-quest-card:hover { transform: translateY(-3px) scale(1.01); }
.s-quest-card:active { transform: scale(0.98); }
.s-quest-card.is-done {
    opacity: 0.62;
    filter: saturate(0.75);
}
.s-quest-card.is-done .s-quest-card-title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.s-quest-card.is-book { background: linear-gradient(145deg, #6366f1, #7c3aed 50%, #a855f7); }
.s-quest-card.is-study { background: linear-gradient(145deg, #14b8a6, #0d9488 55%, #0f766e); }
.s-quest-card.is-hw { background: linear-gradient(145deg, #f59e0b, #ea580c 55%, #c2410c); }
.s-quest-card.is-review { background: linear-gradient(145deg, #8b5cf6, #7c3aed 50%, #6d28d9); }
.s-quest-card-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.s-quest-card-title {
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.s-quest-card-sub {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.92;
    line-height: 1.35;
}
.s-quest-card-check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.4rem;
    border: 2px solid rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.s-quest-card.is-done .s-quest-card-check {
    background: #fff;
    color: #059669;
    border-color: #fff;
    transform: scale(1.08);
}
.s-quest-routines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(15,23,42,0.08);
}
.s-quest-routine {
    border: none;
    cursor: pointer;
    border-radius: 1.1rem;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    background: linear-gradient(160deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15,23,42,0.06);
    transition: transform 0.15s, opacity 0.25s, box-shadow 0.15s;
}
.s-quest-routine:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.1);
}
.s-quest-routine:disabled,
.s-quest-routine.is-done {
    opacity: 0.55;
    cursor: default;
    background: linear-gradient(160deg, #ecfdf5, #d1fae5);
    border-color: #86efac;
}
.s-quest-routine.is-done .s-quest-routine-label {
    text-decoration: line-through;
}
.s-quest-routine-emoji { font-size: 1.35rem; line-height: 1; }
.s-quest-routine-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #334155;
    line-height: 1.2;
}
.s-quest-routine-gp {
    font-size: 0.62rem;
    font-weight: 900;
    color: #d97706;
}
.s-quest-routine.is-done .s-quest-routine-gp { color: #059669; }

.s-quest-exam-subjects {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.s-quest-exam-acc {
    border-radius: 1.15rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.s-quest-exam-acc-head {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 0.4rem;
    row-gap: 0.32rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.s-quest-exam-acc-head strong {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 900;
    color: #0f172a;
}
.s-quest-exam-acc-bar {
    min-width: 0;
    height: 0.45rem;
    border-radius: 9999px;
    background: #f1f5f9;
    overflow: hidden;
}
.s-quest-exam-acc-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    width: var(--w, 0%);
    background: var(--c, #10b981);
    transition: width 0.35s ease;
}
.s-quest-exam-acc-pct {
    font-size: 0.72rem;
    font-weight: 900;
    color: #64748b;
    min-width: 2.2rem;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}
.s-quest-exam-acc-body {
    display: none;
    padding: 0 0.75rem 0.75rem;
    flex-direction: column;
    gap: 0.45rem;
}
.s-quest-exam-acc.is-open .s-quest-exam-acc-body { display: flex; }
.s-quest-exam-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: opacity 0.28s ease, background 0.2s ease, transform 0.15s ease;
}
.s-quest-exam-item:hover { background: #f1f5f9; }
.s-quest-exam-item.is-done {
    opacity: 0.55;
    background: #ecfdf5;
    border-color: #bbf7d0;
}
.s-quest-exam-item.is-done .s-quest-exam-item-text {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: #64748b;
}
.s-quest-exam-item input {
    margin-top: 0.15rem;
    accent-color: #10b981;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    cursor: pointer;
}
.s-quest-exam-item-text {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    transition: color 0.2s;
}
.s-quest-exam-item-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}
.s-quest-chip {
    font-size: 0.58rem;
    font-weight: 900;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
}
.s-quest-chip.is-kritik { background: #ffe4e6; color: #e11d48; }
.s-quest-chip.is-orta { background: #fef3c7; color: #d97706; }
.s-quest-subj-wrap {
    margin-top: 0.75rem;
    min-width: 0;
}
.s-quest-subj-panel {
    border-radius: 1.15rem;
    padding: 0.8rem 0.75rem 0.75rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
}
.s-quest-subj-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.s-quest-subj-head h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.s-quest-subj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.s-quest-subj-meta span {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #475569;
}
.s-quest-subj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem;
}
.s-quest-subj-tile {
    border-radius: 1rem;
    padding: 0.7rem 0.55rem;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.s-quest-subj-tile .lbl {
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.s-quest-subj-tile .val {
    margin-top: 0.3rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f172a;
}
.s-quest-subj-tile .val .unit {
    font-size: 0.65rem;
    font-weight: 800;
    color: #94a3b8;
    margin-left: 0.1rem;
}
.s-quest-subj-tile .sub {
    font-size: 0.58rem;
    font-weight: 700;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: center;
    margin-top: 0.15rem;
}
.s-quest-subj-q {
    color: #db2777;
    font-weight: 800;
}
@media (max-width: 640px) {
    .s-quest-card { min-height: 6.75rem; }
}

/* Windows 11 tarzı floating Dock Bar — 7 simge, mobilde eşit dağılım */
#student-panel > .flex-1.flex.flex-col > main {
    padding-bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px)) !important;
}
#student-bottom-nav,
.s-dock-bar {
    position: fixed;
    left: 50%;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.05rem, 0.4vw, 0.15rem);
    width: min(calc(100vw - 0.65rem), 26.75rem);
    max-width: calc(100vw - 0.65rem);
    padding: 0.32rem clamp(0.28rem, 1.2vw, 0.45rem);
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(22px) saturate(1.45);
    -webkit-backdrop-filter: blur(22px) saturate(1.45);
    box-shadow:
        0 10px 40px rgba(15, 23, 42, 0.18),
        0 2px 8px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    flex-shrink: 0;
    box-sizing: border-box;
}
#student-panel[data-student-theme] #student-bottom-nav {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.38),
        0 2px 8px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.s-dock-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 2.55rem;
    aspect-ratio: 1;
    height: auto;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.72rem, 2.65vw, 0.95rem);
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    flex-shrink: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.s-dock-btn i {
    display: block;
    line-height: 1;
    pointer-events: none;
}
.s-dock-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    transform: translateY(-1px);
}
.s-dock-btn.is-active {
    background: rgba(13, 148, 136, 0.2);
    color: #0f766e;
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.28);
    transform: translateY(-1px) scale(1.04);
}
#student-panel[data-student-theme] .s-dock-btn {
    color: #94a3b8;
}
#student-panel[data-student-theme] .s-dock-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}
#student-panel[data-student-theme] .s-dock-btn.is-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0 0 2px rgba(45, 212, 191, 0.15);
}
#nav-s-sutlac.s-dock-btn {
    color: #fbbf24;
}
#student-panel[data-student-theme] #nav-s-sutlac.s-dock-btn {
    color: #fcd34d;
}
#nav-s-sutlac.s-dock-btn.is-active,
#nav-s-sutlac.s-dock-btn:hover {
    background: rgba(251, 191, 36, 0.16);
    color: #f59e0b;
}
#student-panel[data-student-theme] #nav-s-sutlac.s-dock-btn.is-active,
#student-panel[data-student-theme] #nav-s-sutlac.s-dock-btn:hover {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}
.s-dock-badge {
    position: absolute;
    top: 0.12rem;
    right: 0.08rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #f43f5e;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    display: none;
    pointer-events: none;
}
.s-dock-badge:not(.hidden) {
    display: block;
}
.s-dock-comms-wrap {
    display: contents;
}
#student-bottom-nav.s-dock-bar.is-8,
.s-dock-bar.is-8 {
    width: fit-content !important;
    max-width: calc(100vw - 1rem) !important;
    justify-content: center;
    gap: 0.08rem;
}
#student-bottom-nav.s-dock-bar.is-8 > .s-dock-btn,
.s-dock-bar.is-8 > .s-dock-btn,
#nav-s-comms.s-dock-btn {
    flex: 0 0 auto;
    width: 2.35rem;
    max-width: 2.35rem;
}
#student-bottom-nav,
.s-dock-bar {
    overflow: visible !important;
}
.s-dock-comms-menu.is-open,
.s-dock-comms-menu:not(.hidden) {
    display: flex;
}
.s-dock-comms-menu {
    position: absolute;
    bottom: calc(100% + 0.65rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 11.5rem;
    padding: 0.4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 95;
}
.s-dock-comms-menu.hidden { display: none; }
.s-dock-comms-menu button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    transition: background 0.15s;
}
@media (max-width: 767px) {
    .s-dock-comms-menu {
        min-width: min(17.5rem, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
        padding: 0.35rem;
    }
    .s-dock-comms-menu button {
        font-size: 0.72rem;
        padding: 0.58rem 0.65rem;
    }
}
.s-dock-comms-menu button:hover {
    background: #f1f5f9;
}
.s-dock-comms-menu button i {
    width: 1rem;
    color: #0d9488;
}

/* —— Sütlaç AI sheet —— */
:root {
    --s-dock-clearance: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
.sutlac-root {
    position: fixed;
    inset: 0;
    z-index: 170;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.sutlac-root.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.sutlac-sheet {
    width: 100%;
    height: calc(92dvh - env(safe-area-inset-bottom, 0px));
    max-height: calc(92dvh - env(safe-area-inset-bottom, 0px));
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.15rem 1.15rem 0 0;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-bottom: none;
    box-shadow: 0 -10px 48px rgba(15, 23, 42, 0.16);
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    color: #0f172a;
    min-height: 0;
    overflow: hidden;
}
.sutlac-root.is-open .sutlac-sheet {
    transform: translateY(0);
}
.sutlac-sheet-handle {
    width: 2.5rem;
    height: 0.28rem;
    margin: 0.15rem auto 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
    flex-shrink: 0;
}
.sutlac-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    padding-bottom: 0.15rem;
}
.sutlac-header-avatar-wrap {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sutlac-header-avatar-wrap.has-portrait-clip {
    width: 3.6rem;
    height: auto;
    aspect-ratio: 9 / 16;
    padding: 0;
    background: rgba(15, 23, 42, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.sutlac-portrait-clip {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    position: relative;
}
.sutlac-portrait-clip__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.sutlac-header-avatar-wrap.has-portrait-clip.is-video-ready .sutlac-avatar {
    display: none;
}
.sutlac-header-avatar-wrap.has-portrait-clip:not(.is-video-ready) .sutlac-portrait-clip__video {
    opacity: 0;
    pointer-events: none;
}
.sutlac-header-avatar-wrap.has-portrait-clip.is-video-ready .sutlac-portrait-clip__video {
    opacity: 1;
}
.sutlac-avatar {
    width: 2.85rem;
    height: 2.85rem;
    object-fit: contain;
}
.sutlac-header-text {
    flex: 1;
    min-width: 0;
}
.sutlac-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
}
.sutlac-header-tools {
    position: relative;
    flex-shrink: 0;
}
.sutlac-title {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}
.sutlac-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.35;
}
.sutlac-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sutlac-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: hidden;
}
.sutlac-footer {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.sutlac-greeting {
    margin: 0;
    padding: 0.5rem 0.6rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.42);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1e293b;
    flex-shrink: 0;
    max-height: 4.5rem;
    overflow-y: auto;
}
.sutlac-greeting.is-hidden {
    display: none;
}
.sutlac-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-self: flex-start;
    max-width: 92%;
    margin-top: -0.15rem;
    margin-bottom: 0.15rem;
}
.sutlac-action-chip {
    border: 1px solid rgba(13, 148, 136, 0.35);
    background: rgba(255, 255, 255, 0.88);
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.sutlac-action-chip:hover {
    background: rgba(13, 148, 136, 0.12);
}
.sutlac-action-chip:active {
    transform: scale(0.97);
}
.sutlac-msg.is-recap {
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(15, 118, 110, 0.35);
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}
.sutlac-archive-wrap {
    flex-shrink: 0;
    margin-bottom: 0.35rem;
}
.sutlac-archive-wrap.hidden { display: none; }
.sutlac-archive-toggle {
    width: 100%;
    border: 0;
    border-radius: 0.65rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.38);
    color: #0f766e;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.sutlac-archive-list {
    margin-top: 0.35rem;
    max-height: 8rem;
    overflow-y: auto;
}
.sutlac-archive-list.hidden { display: none; }
.sutlac-archive-day {
    margin-bottom: 0.35rem;
    font-size: 0.65rem;
}
.sutlac-archive-day summary {
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    padding: 0.25rem 0;
}
.sutlac-archive-msg {
    padding: 0.2rem 0.35rem;
    margin: 0.15rem 0;
    border-radius: 0.45rem;
    font-size: 0.62rem;
    line-height: 1.35;
}
.sutlac-archive-msg.is-user {
    background: rgba(13, 148, 136, 0.12);
    color: #115e59;
}
.sutlac-archive-msg.is-sutlac {
    background: rgba(255, 255, 255, 0.5);
    color: #334155;
}
.sutlac-messages {
    flex: 1 1 auto;
    min-height: 6rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.1rem 0.05rem 0.25rem;
}
.sutlac-msg {
    max-width: 90%;
    padding: 0.55rem 0.7rem;
    border-radius: 0.9rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
}
.sutlac-msg.is-sutlac {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.65);
    color: #0f172a;
}
.sutlac-msg.is-user {
    align-self: flex-end;
    background: #0d9488;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.28);
}
.sutlac-msg.is-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 3.2rem;
    min-height: 1.6rem;
}
.sutlac-msg.is-typing span {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: #94a3b8;
    animation: sutlac-typing 1s ease-in-out infinite;
}
.sutlac-msg.is-typing span:nth-child(2) { animation-delay: 0.15s; }
.sutlac-msg.is-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sutlac-typing {
    0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}
.sutlac-send:disabled,
.sutlac-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sutlac-quick-actions {
    display: none;
}
.sutlac-tools-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    bottom: auto;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 11.5rem;
    padding: 0.35rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
}
.sutlac-tools-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.sutlac-tools-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: none;
    border-radius: 0.65rem;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    text-align: left;
}
.sutlac-tools-item:hover,
.sutlac-tools-item:focus-visible {
    background: rgba(13, 148, 136, 0.1);
    outline: none;
}
.sutlac-tools-item i {
    width: 1.1rem;
    text-align: center;
    color: #0d9488;
    font-size: 0.8rem;
}
.sutlac-tools-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.35);
    margin: 0.35rem 0;
}
.sutlac-tools-share-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.15rem 0.55rem 0.25rem;
}
.sutlac-tools-share {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.35;
    cursor: pointer;
}
.sutlac-tools-share input {
    margin-top: 0.15rem;
    accent-color: #0d9488;
}
.sutlac-chip {
    display: none;
}
.sutlac-composer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 0;
}
.sutlac-composer-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sutlac-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 0;
}
.sutlac-composer-actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}
.sutlac-tools-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    font-size: 0.85rem;
}
.sutlac-tools-split {
    display: none;
}
.sutlac-tools-btn.is-open,
.sutlac-tools-btn:hover {
    background: rgba(13, 148, 136, 0.14);
    color: #0f766e;
}
.sutlac-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.55rem;
    max-height: 5.5rem;
    height: 2.55rem;
    resize: none;
    border-radius: 1.15rem;
    border: 1px solid rgba(13, 148, 136, 0.32);
    background: rgba(255, 255, 255, 0.88);
    padding: 0.55rem 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    overflow-y: auto;
}
.sutlac-input:focus {
    outline: none;
    border-color: rgba(13, 148, 136, 0.45);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.12);
}
.sutlac-send {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    border: none;
    border-radius: 999px;
    background: #0d9488;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}
body.sutlac-open #student-bottom-nav,
body.sutlac-open.sutlac-kb #student-bottom-nav,
html.mp-kb-open body.sutlac-open #student-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Sütlaç tam panel açıkken dinamik ada sohbetin üstüne binmesin → yuvaya */
body.sutlac-open #mp-sutlac-island:not(.is-nested) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
body.sutlac-open #mp-sutlac-island.is-nested {
    z-index: 1 !important;
}
body.sutlac-open #mp-sutlac-island-pop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Kart → tam ekran hero geçişi */
#s-hero-expand-layer {
    position: fixed;
    z-index: 85;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    will-change: top, left, width, height, border-radius, opacity;
}
#s-hero-expand-layer.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#s-hero-expand-layer.is-expanded {
    background: #f1f5f9 !important;
}
.s-hero-source-ghost {
    opacity: 0.35 !important;
}
@media (max-width: 479px) {
    #student-bottom-nav:not(.is-8),
    .s-dock-bar:not(.is-8) {
        width: min(calc(100vw - 0.5rem), 100%);
        padding: 0.28rem 0.22rem;
        gap: 0.05rem;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    #student-bottom-nav.s-dock-bar.is-8,
    .s-dock-bar.is-8 {
        width: fit-content !important;
        max-width: calc(100vw - 1.15rem) !important;
        justify-content: center !important;
        padding: 0.22rem 0.26rem !important;
        gap: 0.05rem !important;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    #student-bottom-nav.s-dock-bar.is-8 > .s-dock-btn,
    .s-dock-bar.is-8 > .s-dock-btn {
        width: 1.95rem !important;
        max-width: 1.95rem !important;
        flex: 0 0 1.95rem !important;
        font-size: 0.88rem !important;
    }
    #student-bottom-nav:not(.is-8) .s-dock-btn,
    .s-dock-bar:not(.is-8) .s-dock-btn {
        max-width: 2.35rem;
        font-size: clamp(0.68rem, 3.1vw, 0.82rem);
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    .s-dock-btn {
        max-width: 2.45rem;
    }
}
/* Öğretmen sidebar / header avatar — kare daire, bozulmasız cover */
.teacher-profile-photo-wrap {
    width: 4.75rem !important;
    height: 4.75rem !important;
    max-width: 4.75rem !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    flex-shrink: 0;
}
.teacher-profile-photo-wrap img,
.teacher-profile-photo-wrap #teacher-sidebar-initials {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 9999px !important;
}
.teacher-profile-photo-wrap #teacher-sidebar-initials {
    font-size: 1.35rem !important;
}
#teacher-panel .profile-photo-img,
#teacher-panel .tdash-header-profile img,
#teacher-panel .tdash-sidebar-profile-photo-wrap img,
#teacher-panel .sdet-profile-photo img,
#teacher-panel .student-summary-card-photo {
    object-fit: cover !important;
    object-position: center center !important;
    image-rendering: auto;
}
#teacher-panel .tdash-header-profile {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    overflow: hidden;
}
#teacher-panel .tdash-header-profile img,
#teacher-panel .tdash-header-profile .tdash-header-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.student-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    aspect-ratio: 148 / 210;
    min-height: 11rem;
    max-width: 11.5rem;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.student-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.student-summary-card-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}
.student-summary-card-photo-fallback {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.student-summary-card-pills {
    display: flex;
/* teacher.student-detail → src/teacher/student-detail/student-detail.css */
    image-rendering: auto;
}
#teacher-panel .tdash-header-profile {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    overflow: hidden;
}
#teacher-panel .tdash-header-profile img,
#teacher-panel .tdash-header-profile .tdash-header-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.student-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    aspect-ratio: 148 / 210;
    min-height: 11rem;
    max-width: 11.5rem;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.student-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.student-summary-card-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}
.student-summary-card-photo-fallback {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.student-summary-card-pills {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    margin-top: auto;
}
.det-profile-display {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.det-profile-display img { width: 100%; height: 100%; object-fit: cover; }

/* Öğrenci Detay — Bento / Dinamik Ada */
.sdet-bento {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}
.sdet-card {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 1.5rem;
}
.sdet-profile-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sdet-profile-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.sdet-profile-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    overflow: hidden;
    border: 3px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdet-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.sdet-profile-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.sdet-profile-grade {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}
.sdet-pills {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sdet-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sdet-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.sdet-pill-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}
.sdet-pill-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.sdet-pill-trend {
    font-size: 0.6875rem;
    font-weight: 700;
}
.sdet-pill-trend.is-up { color: #10b981; }
.sdet-pill-trend.is-down { color: #f43f5e; }
.sdet-pill-trend.is-neutral { color: #94a3b8; }
.sdet-chart-card {
    background: #fff;
    border-color: #e2e8f0;
    color: inherit;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.sdet-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.sdet-chart-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #059669;
    display: block;
}
.sdet-chart-sub {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.2rem;
}
.sdet-chart-trend {
    text-align: right;
    flex-shrink: 0;
}
.sdet-chart-trend-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.sdet-chart-trend-label {
    font-size: 0.625rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}
.sdet-chart-wrap {
    position: relative;
    height: 12rem;
}
.sdet-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.85rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}
.sdet-chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sdet-chart-legend i {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
}
.sdet-section-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.sdet-section-title i { color: #059669; }
.sdet-exam-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 16rem;
    overflow-y: auto;
}
.sdet-exam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    transition: border-color 0.15s, background 0.15s;
}
.sdet-exam-row:hover {
    background: #fff;
    border-color: #cbd5e1;
}
.sdet-exam-info { min-width: 0; flex: 1; }
.sdet-exam-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdet-exam-meta {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.sdet-exam-scores {
    text-align: right;
    flex-shrink: 0;
}
.sdet-exam-score {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #059669;
}
.sdet-exam-net {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
}
.sdet-exam-action {
    flex-shrink: 0;
}
.sdet-exam-action button {
    padding: 0.4rem 0.65rem;
    border-radius: 0.65rem;
    font-size: 0.625rem;
    font-weight: 700;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    transition: background 0.15s;
}
.sdet-exam-action button:hover { background: #d1fae5; }
.sdet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 768px) {
    .sdet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sdet-grid-exams { grid-row: span 2; }
    .sdet-grid-submissions { grid-column: 1 / -1; }
    .sdet-grid-notes { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .sdet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sdet-grid-exams { grid-row: span 1; }
    .sdet-grid-submissions { grid-column: 1 / -1; }
}
.sdet-grid-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sdet-grid-card .sdet-exam-list,
.sdet-grid-card .sdet-hw-list,
.sdet-grid-card .sdet-submission-list {
    flex: 1;
    min-height: 0;
}
.sdet-islands {
    display: contents;
}
.sdet-island { padding: 1.25rem 1.5rem; }
.sdet-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
}
.sdet-status-badge.is-present {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.sdet-status-badge.is-absent {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}
.sdet-status-detail {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}
.sdet-status-detail strong { color: #334155; }
.sdet-hw-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 12rem;
    overflow-y: auto;
}
.sdet-hw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
}
.sdet-hw-row-title {
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.sdet-hw-row-date {
    font-size: 0.625rem;
    color: #94a3b8;
    flex-shrink: 0;
}
.sdet-hw-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.sdet-submission-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sdet-submission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sdet-submission-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sdet-envelope-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(145deg, #fffbeb 0%, #fff 55%);
    border: 1px solid #fde68a;
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.08);
}
.sdet-envelope-card:hover {
    border-color: #fbbf24;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
}
.sdet-envelope-icon {
    width: 2.6rem;
    height: 2.6rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid #fcd34d;
}
.sdet-envelope-body { min-width: 0; flex: 1; }
.sdet-envelope-hw {
    font-size: 0.75rem;
    font-weight: 800;
    color: #92400e;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sdet-envelope-file {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdet-envelope-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.45rem;
    font-size: 0.625rem;
    color: #94a3b8;
}
.sdet-envelope-status {
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    flex-shrink: 0;
}
.sdet-envelope-status.is-pending {
    background: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}
.sdet-envelope-status.is-missing {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}
.sdet-envelope-card.is-compact {
    padding: 0.55rem 0.7rem;
    box-shadow: none;
}
.sdet-envelope-card.is-compact .sdet-envelope-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}
.sdet-envelope-card.is-compact .sdet-envelope-hw {
    font-size: 0.6875rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.sdet-envelope-card.is-compact .sdet-envelope-file,
.sdet-envelope-card.is-compact .sdet-envelope-meta {
    display: none;
}
.sdet-hw-envelope-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sdet-hw-envelope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sdet-note-input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    resize: none;
    margin-bottom: 0.65rem;
    min-height: 4rem;
}
.sdet-note-input:focus {
    outline: none;
    border-color: #059669;
}
.sdet-note-save {
    width: 100%;
    padding: 0.55rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 800;
    background: #059669;
    color: #fff;
    border: none;
    transition: background 0.15s;
    margin-bottom: 0.85rem;
}
.sdet-note-save:hover { background: #047857; }
.sdet-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 10rem;
    overflow-y: auto;
}
.sdet-note-item {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.85rem;
    padding: 0.65rem 0.85rem;
}
.sdet-note-text {
    font-size: 0.75rem;
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
}
.sdet-note-meta {
    font-size: 0.625rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}
.sdet-ai-card {
    background: linear-gradient(145deg, #0f172a 0%, #134e4a 100%);
    border-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.sdet-empty {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 1.25rem 0.5rem;
}

/* Öğrenci İlk Giriş Sihirbazı & Eğitim Turu */
.onboarding-wizard-card { max-height: min(92vh, 44rem); overflow-y: auto; }
.onboarding-step-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #cbd5e1; transition: all 0.2s; }
.onboarding-step-dot.is-active { width: 1.25rem; background: #059669; }
.onboarding-step-dot.is-done { background: #34d399; }
.onboarding-gender-opt input:checked + span { border-color: #059669; background: #ecfdf5; color: #047857; }
.student-tour-spotlight {
    position: fixed; z-index: 282; pointer-events: none;
    border-radius: 1rem; transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.78);
}
.student-tour-backdrop {
    position: fixed; inset: 0; z-index: 281;
    pointer-events: auto;
    background: transparent;
}
.student-tour-tooltip {
    position: fixed; z-index: 283; max-width: min(22rem, calc(100vw - 2rem));
    animation: fadeIn 0.25s ease;
}
body.student-tour-active { overflow: hidden !important; }
body.student-tour-active #student-bottom-nav {
    position: fixed;
    z-index: 1;
}

/* Süper Admin güvenlik tabloları */
.sa-monitor-table { table-layout: auto; width: 100%; border-collapse: separate; border-spacing: 0; min-width: 52rem; }
.sa-monitor-table th,
.sa-monitor-table td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
.sa-monitor-table .sa-cell-email {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #64748b !important;
    font-weight: 500;
}
.sa-monitor-table .sa-cell-name {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em;
}
.sa-monitor-table .sa-cell-username {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #5b21b6 !important;
}
.sa-monitor-table .sa-cell-seen {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap;
}
.sa-monitor-table .sa-cell-actions { width: 6.5rem; text-align: right; }
.sa-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
    -webkit-overflow-scrolling: touch;
}
.sa-monitor-card {
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 1.15rem;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.sa-monitor-card-row { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.sa-monitor-card-label { color: #64748b; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.sa-monitor-card-value { color: #0f172a; text-align: right; word-break: break-word; overflow-wrap: anywhere; min-width: 0; font-weight: 600; }

/* Geçici şifre rozeti — tema override'larından bağımsız görünür renkler */
.sa-temp-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.4rem 0.65rem;
    border-radius: 0.7rem;
    background: #fff7ed !important;
    border: 1.5px solid #fdba74 !important;
    color: #9a3412 !important;
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, monospace !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.22);
    transition: transform 0.12s ease, filter 0.12s ease;
    user-select: all;
}
.sa-temp-badge:hover { transform: translateY(-1px); filter: brightness(1.03); }
.sa-temp-badge i { color: #ea580c !important; font-size: 0.78rem; }
.sa-temp-badge.is-empty {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    box-shadow: none;
    cursor: default;
    font-weight: 600 !important;
    letter-spacing: 0;
    font-family: inherit !important;
}

/* ===== Süper Yönetici — soft pastel adalar ===== */
#superadmin-view {
    --sa-bg: #eef2f7;
    --sa-bg-deep: #ffffff;
    --sa-card: #ffffff;
    --sa-border: rgba(100, 116, 139, 0.18);
    --sa-text: #0f172a;
    --sa-muted: #64748b;
    --sa-blue: #dbeafe;
    --sa-blue-border: #93c5fd;
    --sa-green: #dcfce7;
    --sa-green-border: #86efac;
    --sa-clay: #ffedd5;
    --sa-clay-border: #fdba74;
    --sa-amber: #fef3c7;
    --sa-amber-border: #fcd34d;
    --sa-violet: #ede9fe;
    --sa-violet-border: #c4b5fd;
    background:
        radial-gradient(ellipse at top left, rgba(147, 197, 253, 0.35), transparent 42%),
        radial-gradient(ellipse at bottom right, rgba(167, 243, 208, 0.28), transparent 45%),
        var(--sa-bg) !important;
    color: var(--sa-text);
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
#superadmin-view .sa-shell-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    border-radius: 1.35rem;
}
#superadmin-view .sa-shell-header h2,
#superadmin-view .sa-shell-header .text-slate-100 { color: #f8fafc !important; }
#superadmin-view .sa-shell-header .text-slate-400 { color: #cbd5e1 !important; }

#superadmin-view .sa-island {
    background: #fff !important;
    border: 1.5px solid var(--sa-border) !important;
    border-radius: 1.35rem !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
    padding: 1.35rem 1.4rem !important;
}
#superadmin-view .sa-island-form {
    background: linear-gradient(165deg, #eff6ff 0%, #f8fafc 55%) !important;
    border-color: #93c5fd !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.14) !important;
    outline: 2px solid rgba(59, 130, 246, 0.18);
    outline-offset: 2px;
}
#superadmin-view .sa-island-blue {
    background: linear-gradient(165deg, #dbeafe 0%, #f0f9ff 42%, #ffffff 100%) !important;
    border-color: var(--sa-blue-border) !important;
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.12) !important;
}
#superadmin-view .sa-island-green {
    background: linear-gradient(165deg, #dcfce7 0%, #f0fdf4 42%, #ffffff 100%) !important;
    border-color: var(--sa-green-border) !important;
    box-shadow: 0 16px 40px rgba(34, 197, 94, 0.12) !important;
}
#superadmin-view .sa-island-clay {
    background: linear-gradient(165deg, #ffedd5 0%, #fff7ed 40%, #ffffff 100%) !important;
    border-color: var(--sa-clay-border) !important;
    box-shadow: 0 16px 40px rgba(234, 88, 12, 0.12) !important;
}
#superadmin-view .sa-island-amber {
    background: linear-gradient(165deg, #fef3c7 0%, #fffbeb 45%, #ffffff 100%) !important;
    border-color: var(--sa-amber-border) !important;
    box-shadow: 0 14px 34px rgba(245, 158, 11, 0.12) !important;
}
#superadmin-view .sa-island-violet {
    background: linear-gradient(165deg, #ede9fe 0%, #f5f3ff 45%, #ffffff 100%) !important;
    border-color: var(--sa-violet-border) !important;
    box-shadow: 0 14px 34px rgba(124, 58, 237, 0.1) !important;
}
#superadmin-view .sa-island-title {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #334155 !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    padding-bottom: 0.65rem;
    margin-bottom: 0.35rem;
}
#superadmin-view .sa-grid-wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
}
@media (min-width: 1024px) {
    #superadmin-view .sa-grid-wide {
        grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    }
    #superadmin-view .sa-full { grid-column: 1 / -1; }
}

#superadmin-view .bg-white,
#superadmin-view .bg-slate-50 {
    background: #fff !important;
    border-color: var(--sa-border) !important;
    color: var(--sa-text);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important;
    border-radius: 1.25rem !important;
}
#superadmin-view .text-slate-900,
#superadmin-view .text-slate-800,
#superadmin-view .text-slate-700,
#superadmin-view .text-slate-600 {
    color: #1e293b !important;
}
#superadmin-view .text-slate-500,
#superadmin-view .text-slate-400,
#superadmin-view .text-slate-300 {
    color: #64748b !important;
}
#superadmin-view .text-brand-600,
#superadmin-view .text-brand-700 { color: #0369a1 !important; }
#superadmin-view .text-amber-700 { color: #b45309 !important; }
#superadmin-view .text-violet-700 { color: #6d28d9 !important; }
#superadmin-view .border-slate-100,
#superadmin-view .border-slate-200,
#superadmin-view .border-amber-100,
#superadmin-view .border-amber-200,
#superadmin-view .border-brand-200,
#superadmin-view .border-violet-200 {
    border-color: rgba(100, 116, 139, 0.18) !important;
}
#superadmin-view .bg-violet-50 { background: #ede9fe !important; }
#superadmin-view .bg-amber-50 { background: #fef3c7 !important; }
#superadmin-view .bg-brand-50 { background: #e0f2fe !important; }
#superadmin-view input:not([type="checkbox"]):not([type="radio"]),
#superadmin-view select,
#superadmin-view textarea {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 0.75rem 0.95rem !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#superadmin-view input:focus,
#superadmin-view select:focus,
#superadmin-view textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
    outline: none !important;
}
#superadmin-view input::placeholder { color: #94a3b8 !important; }
#superadmin-view label {
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
#superadmin-view button.bg-brand-600,
#superadmin-view button.bg-brand-500 {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28) !important;
    font-weight: 800 !important;
}
#superadmin-view button.bg-brand-600:hover,
#superadmin-view button.bg-brand-500:hover {
    filter: brightness(1.06);
}
#superadmin-view button.bg-violet-600,
#superadmin-view button.bg-violet-500 {
    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important;
}
#superadmin-view button.bg-amber-500,
#superadmin-view button.bg-amber-400 {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #111827 !important;
    font-weight: 800 !important;
}
#superadmin-view button.bg-slate-700,
#superadmin-view button.bg-slate-600 {
    background: #334155 !important;
    color: #f8fafc !important;
}
#superadmin-view .text-\[10px\],
#superadmin-view .text-\[9px\],
#superadmin-view .text-\[8px\],
#superadmin-view .text-\[11px\] {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}
#superadmin-view .text-xs {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}
#superadmin-view .text-sm {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
}
#superadmin-view h2 {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.03em;
}
#superadmin-view .sa-monitor-table thead tr,
#superadmin-view .sa-monitor-table th {
    color: #475569 !important;
    border-color: rgba(100,116,139,0.2) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.07em;
    background: rgba(255,255,255,0.55);
}
#superadmin-view .sa-monitor-table td {
    color: #1e293b !important;
    border-color: rgba(100,116,139,0.12) !important;
}
#superadmin-view .sa-monitor-table tbody tr {
    background: rgba(255, 255, 255, 0.72);
}
#superadmin-view .sa-monitor-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.95);
}
#superadmin-view .sa-tab-btn {
    background: #fff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    font-size: 0.85rem;
    padding: 0.65rem 1.1rem;
}
#superadmin-view .sa-tab-btn.is-active {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #f8fafc;
    border-color: #1e293b;
}
#pin-modal .bg-white {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.sdet-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(248, 250, 252, 0.92);
    border-radius: 1rem;
    color: #94a3b8;
    z-index: 2;
}
.sdet-chart-empty.hidden { display: none !important; }
.sdet-chart-empty i { font-size: 1.75rem; color: #cbd5e1; }
.sdet-chart-empty p { margin: 0; font-size: 0.9rem; font-weight: 600; color: #64748b; }
.sdet-chart-wrap.relative { position: relative; min-height: 16rem; }

.det-xp-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.55rem 0.9rem; border-radius: 0.85rem; border: 1px solid rgba(251, 191, 36, 0.45);
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a;
    font-size: 0.75rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}
.det-xp-btn:hover { filter: brightness(1.06); }
.sdet-kpi-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem;
}
@media (max-width: 900px) { .sdet-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sdet-kpi-card {
    border: 1px solid rgba(148,163,184,0.22); border-radius: 1rem; padding: 0.85rem 0.9rem;
    background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(12px);
}
.sdet-kpi-card .lbl { font-size: 0.62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.35rem; }
.sdet-kpi-card .val { font-family: 'Poppins', Inter, sans-serif; font-size: 1.35rem; font-weight: 700; color: #f8fafc; line-height: 1.15; }
.sdet-kpi-card .sub { font-size: 0.68rem; color: #94a3b8; margin-top: 0.25rem; }
.sdet-kpi-card .kpi-bar {
    margin-top: 0.45rem; height: 0.35rem; border-radius: 999px; background: rgba(148,163,184,0.2); overflow: hidden;
}
.sdet-kpi-card .kpi-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.ba-active-title {
    font-size: 1.2rem !important; font-weight: 900 !important; color: #f8fafc !important;
    line-height: 1.25; letter-spacing: -0.01em; margin: 0;
}
.ba-active-author { font-size: 0.75rem !important; font-weight: 500 !important; color: #94a3b8 !important; margin: 0.2rem 0 0; }
#student-detail-view.teacher-premium-cockpit .ba-active-title { color: #f8fafc !important; }
#student-detail-view.teacher-premium-cockpit .ba-card .font-bold.text-slate-900 { color: #f8fafc !important; }
.ba-range-toggle { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.ba-range-toggle button {
    font-size: 0.65rem; font-weight: 800; padding: 0.3rem 0.55rem; border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.3); background: rgba(51,65,85,0.4); color: #cbd5e1; cursor: pointer;
}
.ba-range-toggle button.is-on { background: rgba(20,184,166,0.25); border-color: rgba(45,212,191,0.45); color: #99f6e4; }
.ba-history.is-compact { max-height: 6.5rem; overflow-y: auto; }
.ba-history.is-compact .ba-history-item { padding: 0.28rem 0.45rem; gap: 0.35rem; }
.ba-history.is-compact .ba-history-item strong { font-size: 0.75rem; }
#student-detail-view #det-mq-tb-shelf.s-tb-shelf {
    min-height: 11rem;
    margin-top: 0.35rem;
}
#manual-gp-modal .mgp-cat-active-sozel { border-color: #f43f5e !important; background: rgba(244,63,94,0.15) !important; color: #fda4af !important; }
#manual-gp-modal .mgp-cat-active-sayisal { border-color: #0ea5e9 !important; background: rgba(14,165,233,0.15) !important; color: #7dd3fc !important; }
#manual-gp-modal .mgp-cat-active-genel { border-color: #94a3b8 !important; background: rgba(148,163,184,0.15) !important; color: #e2e8f0 !important; }
#manual-gp-modal .mgp-cat-idle {
    border: 2px solid #334155 !important; background: #0f172a !important; color: #94a3b8 !important;
    border-radius: 0.85rem; font-weight: 700; font-size: 0.7rem; padding: 0.65rem 0.4rem;
}
.det-topics-accordion { display: flex; flex-direction: column; gap: 0.45rem; }
.det-acc-item { border: 1px solid rgba(148,163,184,0.22); border-radius: 1rem; overflow: hidden; background: rgba(15,23,42,0.55); }
.det-acc-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1rem; background: transparent; border: 0; color: #e2e8f0; cursor: pointer; text-align: left;
}
.det-acc-head:hover { background: rgba(148,163,184,0.08); }
.det-acc-head .left { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; font-weight: 800; }
.det-acc-head .meta { font-size: 0.65rem; color: #94a3b8; font-weight: 700; }
.det-acc-body { display: none; padding: 0 1rem 0.9rem; border-top: 1px solid rgba(148,163,184,0.12); }
.det-acc-item.is-open .det-acc-body { display: block; }
.det-acc-item.is-open .det-acc-chevron { transform: rotate(180deg); }
.det-acc-chevron { transition: transform .18s ease; color: #94a3b8; }
.det-mq-gallery { margin-top: 1rem; }
.det-mq-gallery.hidden { display: none !important; }
.det-mq-back {
    font-size: 0.72rem; font-weight: 800; color: #94a3b8; background: transparent; border: 0;
    cursor: pointer; margin-bottom: 0.5rem; padding: 0;
}
.det-mq-back:hover { color: #5eead4; }
#student-detail-view.teacher-premium-cockpit .s-tb-shelf { margin-top: 0.5rem; }

/* ===== Teacher Student Profile — Premium Anthracite Cockpit + Mirror RO ===== */
#student-detail-view.teacher-premium-cockpit {
    --tpc-bg: #1e242c;
    --tpc-card: rgba(45, 52, 64, 0.72);
    --tpc-border: rgba(148, 163, 184, 0.22);
    --tpc-text: #e8edf4;
    --tpc-muted: #94a3b8;
    overflow: visible;
    min-height: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(56, 189, 248, 0.08), transparent 55%),
        radial-gradient(900px 420px at 90% 0%, rgba(16, 185, 129, 0.07), transparent 50%),
        linear-gradient(165deg, #1a1f27 0%, #252b34 48%, #1e242c 100%) !important;
    color: var(--tpc-text);
    font-family: 'Poppins', 'Inter', 'Roboto', system-ui, sans-serif;
}
#student-detail-view.teacher-premium-cockpit .bg-white,
#student-detail-view.teacher-premium-cockpit .sdet-card,
#student-detail-view.teacher-premium-cockpit .mirror-pane {
    background: var(--tpc-card) !important;
    border-color: var(--tpc-border) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    color: var(--tpc-text);
}
#student-detail-view.teacher-premium-cockpit .text-slate-800,
#student-detail-view.teacher-premium-cockpit .text-slate-900,
#student-detail-view.teacher-premium-cockpit .sdet-profile-name,
#student-detail-view.teacher-premium-cockpit .mirror-pane-title { color: #f1f5f9 !important; }
#student-detail-view.teacher-premium-cockpit .text-slate-500,
#student-detail-view.teacher-premium-cockpit .text-slate-600,
#student-detail-view.teacher-premium-cockpit .mirror-pane-sub { color: var(--tpc-muted) !important; }
#student-detail-view.teacher-premium-cockpit .border-slate-100,
#student-detail-view.teacher-premium-cockpit .border-slate-200 { border-color: var(--tpc-border) !important; }
#student-detail-view.teacher-premium-cockpit [id^="tab-det-"] { color: #cbd5e1 !important; }
#student-detail-view.teacher-premium-cockpit [id^="tab-det-"].bg-brand-50 {
    background: rgba(20, 184, 166, 0.14) !important;
    color: #5eead4 !important;
    border: 1px solid rgba(45, 212, 191, 0.25);
}
#student-detail-view.teacher-premium-cockpit [id^="tab-det-"]:hover {
    background: rgba(148, 163, 184, 0.1) !important;
}
#student-detail-view.teacher-premium-cockpit .teacher-mirror-ro {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#student-detail-view.teacher-premium-cockpit .teacher-mirror-shell {
    background: rgba(30, 36, 46, 0.55);
    border: 1px solid var(--tpc-border);
    border-radius: 1.35rem;
    padding: 1rem 1.05rem 1.25rem;
    backdrop-filter: blur(16px);
}
#student-detail-view.teacher-premium-cockpit .teacher-mirror-ro.is-readonly .s-shelf-add { display: none !important; }
#student-detail-view.teacher-premium-cockpit .det-mq-tabs {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem;
}
#student-detail-view.teacher-premium-cockpit .det-mq-tab {
    font-size: 0.7rem; font-weight: 800; padding: 0.45rem 0.75rem;
    border-radius: 999px; border: 1px solid rgba(148,163,184,0.28);
    background: rgba(51,65,85,0.45); color: #cbd5e1; cursor: pointer;
}
#student-detail-view.teacher-premium-cockpit .det-mq-tab.is-active {
    background: rgba(20,184,166,0.2); border-color: rgba(45,212,191,0.45); color: #99f6e4;
/* teacher.student-detail → src/teacher/student-detail/student-detail.css */
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.det-profile-display img { width: 100%; height: 100%; object-fit: cover; }

/* Öğrenci Detay — Bento / Dinamik Ada */
.sdet-bento {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}
.sdet-card {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 1.5rem;
}
.sdet-profile-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sdet-profile-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.sdet-profile-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    overflow: hidden;
    border: 3px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdet-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.sdet-profile-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.sdet-profile-grade {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}
.sdet-pills {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sdet-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sdet-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.sdet-pill-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}
.sdet-pill-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.sdet-pill-trend {
    font-size: 0.6875rem;
    font-weight: 700;
}
.sdet-pill-trend.is-up { color: #10b981; }
.sdet-pill-trend.is-down { color: #f43f5e; }
.sdet-pill-trend.is-neutral { color: #94a3b8; }
.sdet-chart-card {
    background: #fff;
    border-color: #e2e8f0;
    color: inherit;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.sdet-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.sdet-chart-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #059669;
    display: block;
}
.sdet-chart-sub {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.2rem;
}
.sdet-chart-trend {
    text-align: right;
    flex-shrink: 0;
}
.sdet-chart-trend-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.sdet-chart-trend-label {
    font-size: 0.625rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}
.sdet-chart-wrap {
    position: relative;
    height: 12rem;
}
.sdet-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.85rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}
.sdet-chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sdet-chart-legend i {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
}
.sdet-section-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.sdet-section-title i { color: #059669; }
.sdet-exam-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 16rem;
    overflow-y: auto;
}
.sdet-exam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    transition: border-color 0.15s, background 0.15s;
}
.sdet-exam-row:hover {
    background: #fff;
    border-color: #cbd5e1;
}
.sdet-exam-info { min-width: 0; flex: 1; }
.sdet-exam-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdet-exam-meta {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.sdet-exam-scores {
    text-align: right;
    flex-shrink: 0;
}
.sdet-exam-score {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #059669;
}
.sdet-exam-net {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
}
.sdet-exam-action {
    flex-shrink: 0;
}
.sdet-exam-action button {
    padding: 0.4rem 0.65rem;
    border-radius: 0.65rem;
    font-size: 0.625rem;
    font-weight: 700;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    transition: background 0.15s;
}
.sdet-exam-action button:hover { background: #d1fae5; }
.sdet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 768px) {
    .sdet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sdet-grid-exams { grid-row: span 2; }
    .sdet-grid-submissions { grid-column: 1 / -1; }
    .sdet-grid-notes { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .sdet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sdet-grid-exams { grid-row: span 1; }
    .sdet-grid-submissions { grid-column: 1 / -1; }
}
.sdet-grid-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sdet-grid-card .sdet-exam-list,
.sdet-grid-card .sdet-hw-list,
.sdet-grid-card .sdet-submission-list {
    flex: 1;
    min-height: 0;
}
.sdet-islands {
    display: contents;
}
.sdet-island { padding: 1.25rem 1.5rem; }
.sdet-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
}
.sdet-status-badge.is-present {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.sdet-status-badge.is-absent {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}
.sdet-status-detail {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}
.sdet-status-detail strong { color: #334155; }
.sdet-hw-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 12rem;
    overflow-y: auto;
}
.sdet-hw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
}
.sdet-hw-row-title {
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.sdet-hw-row-date {
    font-size: 0.625rem;
    color: #94a3b8;
    flex-shrink: 0;
}
.sdet-hw-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.sdet-submission-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sdet-submission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sdet-submission-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sdet-envelope-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(145deg, #fffbeb 0%, #fff 55%);
    border: 1px solid #fde68a;
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.08);
}
.sdet-envelope-card:hover {
    border-color: #fbbf24;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
}
.sdet-envelope-icon {
    width: 2.6rem;
    height: 2.6rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid #fcd34d;
}
.sdet-envelope-body { min-width: 0; flex: 1; }
.sdet-envelope-hw {
    font-size: 0.75rem;
    font-weight: 800;
    color: #92400e;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sdet-envelope-file {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sdet-envelope-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.45rem;
    font-size: 0.625rem;
    color: #94a3b8;
}
.sdet-envelope-status {
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    flex-shrink: 0;
}
.sdet-envelope-status.is-pending {
    background: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}
.sdet-envelope-status.is-missing {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}
.sdet-envelope-card.is-compact {
    padding: 0.55rem 0.7rem;
    box-shadow: none;
}
.sdet-envelope-card.is-compact .sdet-envelope-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}
.sdet-envelope-card.is-compact .sdet-envelope-hw {
    font-size: 0.6875rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.sdet-envelope-card.is-compact .sdet-envelope-file,
.sdet-envelope-card.is-compact .sdet-envelope-meta {
    display: none;
}
.sdet-hw-envelope-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .sdet-hw-envelope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sdet-note-input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    resize: none;
    margin-bottom: 0.65rem;
    min-height: 4rem;
}
.sdet-note-input:focus {
    outline: none;
    border-color: #059669;
}
.sdet-note-save {
    width: 100%;
    padding: 0.55rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 800;
    background: #059669;
    color: #fff;
    border: none;
    transition: background 0.15s;
    margin-bottom: 0.85rem;
}
.sdet-note-save:hover { background: #047857; }
.sdet-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 10rem;
    overflow-y: auto;
}
.sdet-note-item {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.85rem;
    padding: 0.65rem 0.85rem;
}
.sdet-note-text {
    font-size: 0.75rem;
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
}
.sdet-note-meta {
    font-size: 0.625rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}
.sdet-ai-card {
    background: linear-gradient(145deg, #0f172a 0%, #134e4a 100%);
    border-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.sdet-empty {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 1.25rem 0.5rem;
}

/* Öğrenci İlk Giriş Sihirbazı & Eğitim Turu */
.onboarding-wizard-card { max-height: min(92vh, 44rem); overflow-y: auto; }
.onboarding-step-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #cbd5e1; transition: all 0.2s; }
.onboarding-step-dot.is-active { width: 1.25rem; background: #059669; }
.onboarding-step-dot.is-done { background: #34d399; }
.onboarding-gender-opt input:checked + span { border-color: #059669; background: #ecfdf5; color: #047857; }
.student-tour-spotlight {
    position: fixed; z-index: 282; pointer-events: none;
    border-radius: 1rem; transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.78);
}
.student-tour-backdrop {
    position: fixed; inset: 0; z-index: 281;
    pointer-events: auto;
    background: transparent;
}
.student-tour-tooltip {
    position: fixed; z-index: 283; max-width: min(22rem, calc(100vw - 2rem));
    animation: fadeIn 0.25s ease;
}
body.student-tour-active { overflow: hidden !important; }
body.student-tour-active #student-bottom-nav {
    position: fixed;
    z-index: 1;
}

/* Süper Admin güvenlik tabloları */
.sa-monitor-table { table-layout: auto; width: 100%; border-collapse: separate; border-spacing: 0; min-width: 52rem; }
.sa-monitor-table th,
.sa-monitor-table td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
.sa-monitor-table .sa-cell-email {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #64748b !important;
    font-weight: 500;
}
.sa-monitor-table .sa-cell-name {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em;
}
.sa-monitor-table .sa-cell-username {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #5b21b6 !important;
}
.sa-monitor-table .sa-cell-seen {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap;
}
.sa-monitor-table .sa-cell-actions { width: 6.5rem; text-align: right; }
.sa-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
    -webkit-overflow-scrolling: touch;
}
.sa-monitor-card {
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 1.15rem;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.sa-monitor-card-row { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.sa-monitor-card-label { color: #64748b; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.sa-monitor-card-value { color: #0f172a; text-align: right; word-break: break-word; overflow-wrap: anywhere; min-width: 0; font-weight: 600; }

/* Geçici şifre rozeti — tema override'larından bağımsız görünür renkler */
.sa-temp-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.4rem 0.65rem;
    border-radius: 0.7rem;
    background: #fff7ed !important;
    border: 1.5px solid #fdba74 !important;
    color: #9a3412 !important;
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, monospace !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.22);
    transition: transform 0.12s ease, filter 0.12s ease;
    user-select: all;
}
.sa-temp-badge:hover { transform: translateY(-1px); filter: brightness(1.03); }
.sa-temp-badge i { color: #ea580c !important; font-size: 0.78rem; }
.sa-temp-badge.is-empty {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    box-shadow: none;
    cursor: default;
    font-weight: 600 !important;
    letter-spacing: 0;
    font-family: inherit !important;
}

/* ===== Süper Yönetici — soft pastel adalar ===== */
#superadmin-view {
    --sa-bg: #eef2f7;
    --sa-bg-deep: #ffffff;
    --sa-card: #ffffff;
    --sa-border: rgba(100, 116, 139, 0.18);
    --sa-text: #0f172a;
    --sa-muted: #64748b;
    --sa-blue: #dbeafe;
    --sa-blue-border: #93c5fd;
    --sa-green: #dcfce7;
    --sa-green-border: #86efac;
    --sa-clay: #ffedd5;
    --sa-clay-border: #fdba74;
    --sa-amber: #fef3c7;
    --sa-amber-border: #fcd34d;
    --sa-violet: #ede9fe;
    --sa-violet-border: #c4b5fd;
    background:
        radial-gradient(ellipse at top left, rgba(147, 197, 253, 0.35), transparent 42%),
        radial-gradient(ellipse at bottom right, rgba(167, 243, 208, 0.28), transparent 45%),
        var(--sa-bg) !important;
    color: var(--sa-text);
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
#superadmin-view .sa-shell-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    border-radius: 1.35rem;
/* teacher.students → src/teacher/students/students.css */
}
.sdet-note-meta {
    font-size: 0.625rem;
    color: #94a3b8;
    margin-top: 0.35rem;
}
.sdet-ai-card {
    background: linear-gradient(145deg, #0f172a 0%, #134e4a 100%);
    border-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.sdet-empty {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 1.25rem 0.5rem;
}

/* Öğrenci İlk Giriş Sihirbazı & Eğitim Turu */
.onboarding-wizard-card { max-height: min(92vh, 44rem); overflow-y: auto; }
.onboarding-step-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #cbd5e1; transition: all 0.2s; }
.onboarding-step-dot.is-active { width: 1.25rem; background: #059669; }
.onboarding-step-dot.is-done { background: #34d399; }
.onboarding-gender-opt input:checked + span { border-color: #059669; background: #ecfdf5; color: #047857; }
.student-tour-spotlight {
    position: fixed; z-index: 282; pointer-events: none;
    border-radius: 1rem; transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.78);
}
.student-tour-backdrop {
    position: fixed; inset: 0; z-index: 281;
    pointer-events: auto;
    background: transparent;
}
.student-tour-tooltip {
    position: fixed; z-index: 283; max-width: min(22rem, calc(100vw - 2rem));
    animation: fadeIn 0.25s ease;
}
body.student-tour-active { overflow: hidden !important; }
body.student-tour-active #student-bottom-nav {
    position: fixed;
    z-index: 1;
}

/* Süper Admin güvenlik tabloları */
.sa-monitor-table { table-layout: auto; width: 100%; border-collapse: separate; border-spacing: 0; min-width: 52rem; }
.sa-monitor-table th,
.sa-monitor-table td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
.sa-monitor-table .sa-cell-email {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #64748b !important;
    font-weight: 500;
}
.sa-monitor-table .sa-cell-name {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em;
}
.sa-monitor-table .sa-cell-username {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #5b21b6 !important;
}
.sa-monitor-table .sa-cell-seen {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap;
}
.sa-monitor-table .sa-cell-actions { width: 6.5rem; text-align: right; }
.sa-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
    -webkit-overflow-scrolling: touch;
}
.sa-monitor-card {
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 1.15rem;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.sa-monitor-card-row { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.sa-monitor-card-label { color: #64748b; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.sa-monitor-card-value { color: #0f172a; text-align: right; word-break: break-word; overflow-wrap: anywhere; min-width: 0; font-weight: 600; }

/* Geçici şifre rozeti — tema override'larından bağımsız görünür renkler */
.sa-temp-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.4rem 0.65rem;
    border-radius: 0.7rem;
    background: #fff7ed !important;
    border: 1.5px solid #fdba74 !important;
    color: #9a3412 !important;
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, monospace !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.22);
    transition: transform 0.12s ease, filter 0.12s ease;
    user-select: all;
}
.sa-temp-badge:hover { transform: translateY(-1px); filter: brightness(1.03); }
.sa-temp-badge i { color: #ea580c !important; font-size: 0.78rem; }
.sa-temp-badge.is-empty {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    box-shadow: none;
    cursor: default;
    font-weight: 600 !important;
    letter-spacing: 0;
    font-family: inherit !important;
}

/* ===== Süper Yönetici — soft pastel adalar ===== */
#superadmin-view {
    --sa-bg: #eef2f7;
    --sa-bg-deep: #ffffff;
    --sa-card: #ffffff;
    --sa-border: rgba(100, 116, 139, 0.18);
    --sa-text: #0f172a;
    --sa-muted: #64748b;
    --sa-blue: #dbeafe;
    --sa-blue-border: #93c5fd;
    --sa-green: #dcfce7;
    --sa-green-border: #86efac;
    --sa-clay: #ffedd5;
    --sa-clay-border: #fdba74;
    --sa-amber: #fef3c7;
    --sa-amber-border: #fcd34d;
    --sa-violet: #ede9fe;
    --sa-violet-border: #c4b5fd;
    background:
        radial-gradient(ellipse at top left, rgba(147, 197, 253, 0.35), transparent 42%),
        radial-gradient(ellipse at bottom right, rgba(167, 243, 208, 0.28), transparent 45%),
        var(--sa-bg) !important;
    color: var(--sa-text);
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
#superadmin-view .sa-shell-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    border-radius: 1.35rem;
}
#superadmin-view .sa-shell-header h2,
#superadmin-view .sa-shell-header .text-slate-100 { color: #f8fafc !important; }
#superadmin-view .sa-shell-header .text-slate-400 { color: #cbd5e1 !important; }

#superadmin-view .sa-island {
    background: #fff !important;
    border: 1.5px solid var(--sa-border) !important;
    border-radius: 1.35rem !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
    padding: 1.35rem 1.4rem !important;
}
#superadmin-view .sa-island-form {
    background: linear-gradient(165deg, #eff6ff 0%, #f8fafc 55%) !important;
    border-color: #93c5fd !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.14) !important;
    outline: 2px solid rgba(59, 130, 246, 0.18);
    outline-offset: 2px;
}
#superadmin-view .sa-island-blue {
    background: linear-gradient(165deg, #dbeafe 0%, #f0f9ff 42%, #ffffff 100%) !important;
    border-color: var(--sa-blue-border) !important;
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.12) !important;
}
#superadmin-view .sa-island-green {
    background: linear-gradient(165deg, #dcfce7 0%, #f0fdf4 42%, #ffffff 100%) !important;
    border-color: var(--sa-green-border) !important;
    box-shadow: 0 16px 40px rgba(34, 197, 94, 0.12) !important;
}
#superadmin-view .sa-island-clay {
    background: linear-gradient(165deg, #ffedd5 0%, #fff7ed 40%, #ffffff 100%) !important;
    border-color: var(--sa-clay-border) !important;
    box-shadow: 0 16px 40px rgba(234, 88, 12, 0.12) !important;
}
#superadmin-view .sa-island-amber {
    background: linear-gradient(165deg, #fef3c7 0%, #fffbeb 45%, #ffffff 100%) !important;
    border-color: var(--sa-amber-border) !important;
    box-shadow: 0 14px 34px rgba(245, 158, 11, 0.12) !important;
}
#superadmin-view .sa-island-violet {
    background: linear-gradient(165deg, #ede9fe 0%, #f5f3ff 45%, #ffffff 100%) !important;
    border-color: var(--sa-violet-border) !important;
    box-shadow: 0 14px 34px rgba(124, 58, 237, 0.1) !important;
}
#superadmin-view .sa-island-title {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #334155 !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    padding-bottom: 0.65rem;
    margin-bottom: 0.35rem;
}
#superadmin-view .sa-grid-wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
}
@media (min-width: 1024px) {
    #superadmin-view .sa-grid-wide {
        grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    }
    #superadmin-view .sa-full { grid-column: 1 / -1; }
}

#superadmin-view .bg-white,
#superadmin-view .bg-slate-50 {
    background: #fff !important;
    border-color: var(--sa-border) !important;
    color: var(--sa-text);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important;
    border-radius: 1.25rem !important;
}
#superadmin-view .text-slate-900,
#superadmin-view .text-slate-800,
#superadmin-view .text-slate-700,
#superadmin-view .text-slate-600 {
    color: #1e293b !important;
}
#superadmin-view .text-slate-500,
#superadmin-view .text-slate-400,
#superadmin-view .text-slate-300 {
    color: #64748b !important;
}
#superadmin-view .text-brand-600,
#superadmin-view .text-brand-700 { color: #0369a1 !important; }
#superadmin-view .text-amber-700 { color: #b45309 !important; }
#superadmin-view .text-violet-700 { color: #6d28d9 !important; }
#superadmin-view .border-slate-100,
#superadmin-view .border-slate-200,
#superadmin-view .border-amber-100,
#superadmin-view .border-amber-200,
#superadmin-view .border-brand-200,
#superadmin-view .border-violet-200 {
    border-color: rgba(100, 116, 139, 0.18) !important;
}
#superadmin-view .bg-violet-50 { background: #ede9fe !important; }
#superadmin-view .bg-amber-50 { background: #fef3c7 !important; }
#superadmin-view .bg-brand-50 { background: #e0f2fe !important; }
#superadmin-view input:not([type="checkbox"]):not([type="radio"]),
#superadmin-view select,
#superadmin-view textarea {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 0.75rem 0.95rem !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#superadmin-view input:focus,
#superadmin-view select:focus,
#superadmin-view textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
    outline: none !important;
}
#superadmin-view input::placeholder { color: #94a3b8 !important; }
#superadmin-view label {
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
#superadmin-view button.bg-brand-600,
#superadmin-view button.bg-brand-500 {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28) !important;
    font-weight: 800 !important;
}
#superadmin-view button.bg-brand-600:hover,
#superadmin-view button.bg-brand-500:hover {
    filter: brightness(1.06);
}
#superadmin-view button.bg-violet-600,
#superadmin-view button.bg-violet-500 {
    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25) !important;
}
#superadmin-view button.bg-amber-500,
#superadmin-view button.bg-amber-400 {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #111827 !important;
    font-weight: 800 !important;
}
#superadmin-view button.bg-slate-700,
#superadmin-view button.bg-slate-600 {
    background: #334155 !important;
    color: #f8fafc !important;
}
#superadmin-view .text-\[10px\],
#superadmin-view .text-\[9px\],
#superadmin-view .text-\[8px\],
#superadmin-view .text-\[11px\] {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}
#superadmin-view .text-xs {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}
#superadmin-view .text-sm {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
}
#superadmin-view h2 {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.03em;
}
#superadmin-view .sa-monitor-table thead tr,
#superadmin-view .sa-monitor-table th {
    color: #475569 !important;
    border-color: rgba(100,116,139,0.2) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.07em;
    background: rgba(255,255,255,0.55);
}
#superadmin-view .sa-monitor-table td {
    color: #1e293b !important;
    border-color: rgba(100,116,139,0.12) !important;
}
#superadmin-view .sa-monitor-table tbody tr {
    background: rgba(255, 255, 255, 0.72);
}
#superadmin-view .sa-monitor-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.95);
}
#superadmin-view .sa-tab-btn {
    background: #fff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    font-size: 0.85rem;
    padding: 0.65rem 1.1rem;
}
#superadmin-view .sa-tab-btn.is-active {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #f8fafc;
    border-color: #1e293b;
}
#pin-modal .bg-white {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.sdet-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(248, 250, 252, 0.92);
    border-radius: 1rem;
    color: #94a3b8;
    z-index: 2;
}
.sdet-chart-empty.hidden { display: none !important; }
.sdet-chart-empty i { font-size: 1.75rem; color: #cbd5e1; }
.sdet-chart-empty p { margin: 0; font-size: 0.9rem; font-weight: 600; color: #64748b; }
.sdet-chart-wrap.relative { position: relative; min-height: 16rem; }

.det-xp-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.55rem 0.9rem; border-radius: 0.85rem; border: 1px solid rgba(251, 191, 36, 0.45);
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a;
    font-size: 0.75rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}
.det-xp-btn:hover { filter: brightness(1.06); }
.sdet-kpi-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem;
}
@media (max-width: 900px) { .sdet-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sdet-kpi-card {
    border: 1px solid rgba(148,163,184,0.22); border-radius: 1rem; padding: 0.85rem 0.9rem;
    background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(12px);
}
.sdet-kpi-card .lbl { font-size: 0.62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.35rem; }
.sdet-kpi-card .val { font-family: 'Poppins', Inter, sans-serif; font-size: 1.35rem; font-weight: 700; color: #f8fafc; line-height: 1.15; }
.sdet-kpi-card .sub { font-size: 0.68rem; color: #94a3b8; margin-top: 0.25rem; }
.sdet-kpi-card .kpi-bar {
    margin-top: 0.45rem; height: 0.35rem; border-radius: 999px; background: rgba(148,163,184,0.2); overflow: hidden;
}
.sdet-kpi-card .kpi-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.ba-active-title {
    font-size: 1.2rem !important; font-weight: 900 !important; color: #f8fafc !important;
    line-height: 1.25; letter-spacing: -0.01em; margin: 0;
}
.ba-active-author { font-size: 0.75rem !important; font-weight: 500 !important; color: #94a3b8 !important; margin: 0.2rem 0 0; }
#student-detail-view.teacher-premium-cockpit .ba-active-title { color: #f8fafc !important; }
#student-detail-view.teacher-premium-cockpit .ba-card .font-bold.text-slate-900 { color: #f8fafc !important; }
.ba-range-toggle { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.ba-range-toggle button {
    font-size: 0.65rem; font-weight: 800; padding: 0.3rem 0.55rem; border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.3); background: rgba(51,65,85,0.4); color: #cbd5e1; cursor: pointer;
}
.ba-range-toggle button.is-on { background: rgba(20,184,166,0.25); border-color: rgba(45,212,191,0.45); color: #99f6e4; }
.ba-history.is-compact { max-height: 6.5rem; overflow-y: auto; }
.ba-history.is-compact .ba-history-item { padding: 0.28rem 0.45rem; gap: 0.35rem; }
.ba-history.is-compact .ba-history-item strong { font-size: 0.75rem; }
#student-detail-view #det-mq-tb-shelf.s-tb-shelf {
    min-height: 11rem;
    margin-top: 0.35rem;
}
#manual-gp-modal .mgp-cat-active-sozel { border-color: #f43f5e !important; background: rgba(244,63,94,0.15) !important; color: #fda4af !important; }
#manual-gp-modal .mgp-cat-active-sayisal { border-color: #0ea5e9 !important; background: rgba(14,165,233,0.15) !important; color: #7dd3fc !important; }
#manual-gp-modal .mgp-cat-active-genel { border-color: #94a3b8 !important; background: rgba(148,163,184,0.15) !important; color: #e2e8f0 !important; }
#manual-gp-modal .mgp-cat-idle {
    border: 2px solid #334155 !important; background: #0f172a !important; color: #94a3b8 !important;
    border-radius: 0.85rem; font-weight: 700; font-size: 0.7rem; padding: 0.65rem 0.4rem;
}
.det-topics-accordion { display: flex; flex-direction: column; gap: 0.45rem; }
.det-acc-item { border: 1px solid rgba(148,163,184,0.22); border-radius: 1rem; overflow: hidden; background: rgba(15,23,42,0.55); }
.det-acc-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1rem; background: transparent; border: 0; color: #e2e8f0; cursor: pointer; text-align: left;
}
.det-acc-head:hover { background: rgba(148,163,184,0.08); }
.det-acc-head .left { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; font-weight: 800; }
.det-acc-head .meta { font-size: 0.65rem; color: #94a3b8; font-weight: 700; }
.det-acc-body { display: none; padding: 0 1rem 0.9rem; border-top: 1px solid rgba(148,163,184,0.12); }
.det-acc-item.is-open .det-acc-body { display: block; }
.det-acc-item.is-open .det-acc-chevron { transform: rotate(180deg); }
.det-acc-chevron { transition: transform .18s ease; color: #94a3b8; }
.det-mq-gallery { margin-top: 1rem; }
.det-mq-gallery.hidden { display: none !important; }
.det-mq-back {
    font-size: 0.72rem; font-weight: 800; color: #94a3b8; background: transparent; border: 0;
    cursor: pointer; margin-bottom: 0.5rem; padding: 0;
}
.det-mq-back:hover { color: #5eead4; }
#student-detail-view.teacher-premium-cockpit .s-tb-shelf { margin-top: 0.5rem; }

/* ===== Teacher Student Profile — Premium Anthracite Cockpit + Mirror RO ===== */
#student-detail-view.teacher-premium-cockpit {
    --tpc-bg: #1e242c;
    --tpc-card: rgba(45, 52, 64, 0.72);
    --tpc-border: rgba(148, 163, 184, 0.22);
    --tpc-text: #e8edf4;
    --tpc-muted: #94a3b8;
    overflow: visible;
    min-height: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(56, 189, 248, 0.08), transparent 55%),
        radial-gradient(900px 420px at 90% 0%, rgba(16, 185, 129, 0.07), transparent 50%),
        linear-gradient(165deg, #1a1f27 0%, #252b34 48%, #1e242c 100%) !important;
    color: var(--tpc-text);
    font-family: 'Poppins', 'Inter', 'Roboto', system-ui, sans-serif;
}
#student-detail-view.teacher-premium-cockpit .bg-white,
#student-detail-view.teacher-premium-cockpit .sdet-card,
#student-detail-view.teacher-premium-cockpit .mirror-pane {
    background: var(--tpc-card) !important;
    border-color: var(--tpc-border) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    color: var(--tpc-text);
}
#student-detail-view.teacher-premium-cockpit .text-slate-800,
#student-detail-view.teacher-premium-cockpit .text-slate-900,
#student-detail-view.teacher-premium-cockpit .sdet-profile-name,
#student-detail-view.teacher-premium-cockpit .mirror-pane-title { color: #f1f5f9 !important; }
#student-detail-view.teacher-premium-cockpit .text-slate-500,
#student-detail-view.teacher-premium-cockpit .text-slate-600,
#student-detail-view.teacher-premium-cockpit .mirror-pane-sub { color: var(--tpc-muted) !important; }
#student-detail-view.teacher-premium-cockpit .border-slate-100,
#student-detail-view.teacher-premium-cockpit .border-slate-200 { border-color: var(--tpc-border) !important; }
#student-detail-view.teacher-premium-cockpit [id^="tab-det-"] { color: #cbd5e1 !important; }
#student-detail-view.teacher-premium-cockpit [id^="tab-det-"].bg-brand-50 {
    background: rgba(20, 184, 166, 0.14) !important;
    color: #5eead4 !important;
    border: 1px solid rgba(45, 212, 191, 0.25);
}
#student-detail-view.teacher-premium-cockpit [id^="tab-det-"]:hover {
    background: rgba(148, 163, 184, 0.1) !important;
}
#student-detail-view.teacher-premium-cockpit .teacher-mirror-ro {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#student-detail-view.teacher-premium-cockpit .teacher-mirror-shell {
    background: rgba(30, 36, 46, 0.55);
    border: 1px solid var(--tpc-border);
    border-radius: 1.35rem;
    padding: 1rem 1.05rem 1.25rem;
    backdrop-filter: blur(16px);
}
#student-detail-view.teacher-premium-cockpit .teacher-mirror-ro.is-readonly .s-shelf-add { display: none !important; }
#student-detail-view.teacher-premium-cockpit .det-mq-tabs {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem;
}
#student-detail-view.teacher-premium-cockpit .det-mq-tab {
    font-size: 0.7rem; font-weight: 800; padding: 0.45rem 0.75rem;
    border-radius: 999px; border: 1px solid rgba(148,163,184,0.28);
    background: rgba(51,65,85,0.45); color: #cbd5e1; cursor: pointer;
}
#student-detail-view.teacher-premium-cockpit .det-mq-tab.is-active {
    background: rgba(20,184,166,0.2); border-color: rgba(45,212,191,0.45); color: #99f6e4;
}
#student-detail-view.teacher-premium-cockpit .det-mq-source-group { margin-bottom: 1rem; }
#student-detail-view.teacher-premium-cockpit .det-mq-source-title {
    display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8; margin: 0 0 0.5rem;
}
#student-detail-view.teacher-premium-cockpit .det-mq-source-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.75rem;
}
#student-detail-view.teacher-premium-cockpit .det-mq-source-card {
    border: 1px solid rgba(148,163,184,0.22); border-radius: 1rem; overflow: hidden;
    background: rgba(15,23,42,0.55); cursor: zoom-in; text-align: left; width: 100%;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    padding: 0; color: inherit;
}
#student-detail-view.teacher-premium-cockpit .det-mq-source-card:hover {
    transform: translateY(-3px); border-color: rgba(45,212,191,0.45);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
#student-detail-view.teacher-premium-cockpit .det-mq-source-card img { width: 100%; height: 7.5rem; object-fit: cover; display: block; }
#student-detail-view.teacher-premium-cockpit .det-mq-source-card .meta { padding: 0.55rem 0.65rem; display: flex; flex-direction: column; gap: 0.2rem; }
#student-detail-view.teacher-premium-cockpit .teacher-topic-card {
    background: rgba(15,23,42,0.5); border: 1px solid rgba(148,163,184,0.22);
    border-radius: 1.1rem; padding: 0.9rem 1rem; margin-bottom: 0.65rem;
}
.t-book-review-modal .mp-modal-body.tbr-body {
    max-height: min(70vh, 34rem);
}
.t-book-review-modal .tbr-field {
    background: rgba(15,23,42,0.65); border: 1px solid rgba(148,163,184,0.2);
    border-radius: 0.85rem; padding: 0.65rem 0.75rem; margin-bottom: 0.55rem;
}
.t-book-review-modal .tbr-field label {
    display: block; font-size: 0.65rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 0.25rem;
}
.t-book-review-modal .tbr-field p { margin: 0; font-size: 0.82rem; color: #e2e8f0; line-height: 1.45; white-space: pre-wrap; }

.mirror-pane {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.35rem;
    padding: 1.25rem 1.3rem 1.4rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mirror-pane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}
.mirror-pane-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Poppins', 'Inter', sans-serif;
}
.mirror-pane-sub { margin: 0.25rem 0 0; font-size: 0.8rem; color: #64748b; }
.mirror-sa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.mirror-sa-btn:hover { background: #fef3c7; }
.mirror-card-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.mirror-topic-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    padding: 1rem;
    background: linear-gradient(165deg, #f8fafc, #fff);
    box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}
.mirror-missed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.85rem;
}
.mirror-missed-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05);
    display: flex;
    flex-direction: column;
}
.mirror-missed-card img { width: 100%; height: 8rem; object-fit: cover; }
.mirror-missed-card .body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mirror-lib-shelves { display: flex; flex-direction: column; gap: 1rem; }
.mirror-shelf-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
}
.mirror-shelf-grid, .mirror-shelf-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}
.mirror-book-card {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    pointer-events: none;
    user-select: none;
}
.mirror-book-cover {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 8px 18px rgba(15,23,42,0.15);
}
.mirror-book-card h4 { margin: 0; font-size: 0.82rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.mirror-book-card p { margin: 0.2rem 0 0; font-size: 0.7rem; color: #64748b; }
.mirror-book-bar { margin-top: 0.45rem; height: 0.35rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.mirror-book-bar > i { display: block; height: 100%; background: #0d9488; border-radius: 999px; }

.book-analytics-dash {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.85rem;
}
.ba-card {
    grid-column: span 6;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    padding: 1rem;
}
.ba-card.is-wide { grid-column: span 12; }
.ba-card.is-narrow { grid-column: span 4; }
@media (max-width: 900px) {
    .ba-card, .ba-card.is-narrow { grid-column: span 12; }
}
.ba-card h4 {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.ba-active {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.ba-cover {
    width: 4.5rem;
    height: 6rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(15,23,42,0.18);
}
.ba-metric {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}
.ba-progress {
    margin-top: 0.55rem;
    height: 0.55rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.ba-progress > i { display: block; height: 100%; background: linear-gradient(90deg, #14b8a6, #0d9488); border-radius: 999px; }
.ba-week-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 6.5rem;
    padding-top: 0.5rem;
}
.ba-week-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}
.ba-week-col .bar {
    width: 100%;
    max-width: 2rem;
    border-radius: 0.4rem 0.4rem 0.15rem 0.15rem;
    background: #14b8a6;
    min-height: 0.25rem;
}
.ba-week-col span { font-size: 0.65rem; color: #64748b; font-weight: 700; }
.ba-history { display: flex; flex-direction: column; gap: 0.45rem; max-height: 12rem; overflow-y: auto; }
.ba-history-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    font-size: 0.8rem;
}

.tl-pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.85rem;
}
.tl-pool-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,0.05);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 9rem;
}
.tl-pool-card .folder {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0d9488;
}
.tl-pool-card h4 { margin: 0; font-size: 0.9rem; font-weight: 700; color: #0f172a; line-height: 1.35; }
.tl-pool-card .meta { font-size: 0.72rem; color: #94a3b8; }
.tl-pool-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; }
.tl-pool-actions button {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    border-radius: 0.6rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
}
.tl-pool-actions button.is-primary { background: #0f766e; color: #fff; border-color: transparent; }
.tl-folder-chip {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}
.tl-folder-chip.is-active { background: #0f172a; color: #fff; border-color: #0f172a; }

/* —— Simon Hafıza: 3x3 cam tahta + sıra paneli —— */
.simon-arena {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1.15rem 1rem 1.25rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(148,163,184,0.28);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(45,212,191,0.12), transparent 55%),
        linear-gradient(165deg, rgba(15,23,42,0.98), rgba(2,6,23,0.96));
}
.simon-arena-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.simon-arena-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.simon-score-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.4rem 0.75rem;
    border-radius: 0.85rem;
    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(45,212,191,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.simon-score-chip .lbl {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5eead4;
}
.simon-score-chip .val {
    font-family: 'Orbitron', monospace;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    color: #f8fafc;
    text-shadow: 0 0 16px rgba(45,212,191,0.55);
}
.simon-howto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.7rem;
    border-radius: 1rem;
    background: rgba(30,41,59,0.55);
    border: 1px solid rgba(148,163,184,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.simon-howto-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.45rem 0.3rem;
}
.simon-howto-item .ico {
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(145deg, rgba(45,212,191,0.45), rgba(14,116,144,0.55));
    box-shadow: 0 0 14px rgba(45,212,191,0.25);
}
.simon-howto-item .ttl {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e2e8f0;
}
.simon-howto-item .desc {
    font-size: 0.58rem;
    line-height: 1.35;
    color: #94a3b8;
}
.simon-turn-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.85rem;
    padding: 0.65rem 1rem;
    border-radius: 0.95rem;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.72rem, 2.8vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.simon-turn-panel.is-idle {
    color: #94a3b8;
    background: rgba(30,41,59,0.7);
    border-color: rgba(148,163,184,0.25);
}
.simon-turn-panel.is-watch {
    color: #fde68a;
    background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(234,88,12,0.22));
    border-color: rgba(251,191,36,0.55);
    box-shadow: 0 0 28px rgba(245,158,11,0.35), inset 0 0 20px rgba(251,191,36,0.08);
    animation: simon-turn-pulse 1.4s ease-in-out infinite;
}
.simon-turn-panel.is-play {
    color: #bbf7d0;
    background: linear-gradient(90deg, rgba(34,197,94,0.2), rgba(16,185,129,0.22));
    border-color: rgba(74,222,128,0.6);
    box-shadow: 0 0 28px rgba(34,197,94,0.4), inset 0 0 20px rgba(74,222,128,0.1);
    animation: simon-turn-pulse 1.2s ease-in-out infinite;
}
.simon-turn-panel.is-fail {
    color: #fecdd3;
    background: linear-gradient(90deg, rgba(244,63,94,0.25), rgba(190,24,93,0.28));
    border-color: rgba(251,113,133,0.65);
    box-shadow: 0 0 28px rgba(244,63,94,0.45);
}
@keyframes simon-turn-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}
.simon-board-wrap {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
}
.simon-board {
    --simon-gap: 0.55rem;
    width: min(100%, 22rem);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--simon-gap);
    padding: 0.7rem;
    border-radius: 1.35rem;
    background: rgba(2,6,23,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.4);
    transition: box-shadow 0.2s ease;
}
.simon-board.is-locked {
    pointer-events: none;
}
.simon-board.is-shake {
    animation: simon-board-shake 0.55s ease-in-out;
    box-shadow: 0 0 0 2px rgba(244,63,94,0.7), 0 0 40px rgba(244,63,94,0.55), inset 0 0 30px rgba(244,63,94,0.25);
}
@keyframes simon-board-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-10px) rotate(-0.6deg); }
    30% { transform: translateX(10px) rotate(0.6deg); }
    45% { transform: translateX(-8px); }
    60% { transform: translateX(8px); }
    75% { transform: translateX(-4px); }
    90% { transform: translateX(4px); }
}
.simon-tile {
    position: relative;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    min-width: 0;
    min-height: 0;
    -webkit-tap-highlight-color: transparent;
    background: var(--simon-base);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -6px 14px rgba(0,0,0,0.35),
        0 6px 0 var(--simon-edge),
        0 10px 18px rgba(0,0,0,0.35);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
.simon-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255,255,255,0.18), transparent 45%, rgba(0,0,0,0.15));
    pointer-events: none;
}
.simon-tile:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-2px);
}
.simon-tile:active:not(:disabled) {
    transform: translateY(3px) scale(0.97);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -4px 10px rgba(0,0,0,0.4),
        0 2px 0 var(--simon-edge),
        0 4px 10px rgba(0,0,0,0.3);
}
.simon-tile.is-lit {
    transform: scale(1.05) translateY(-2px);
    filter: brightness(1.45) saturate(1.25);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 0 8px var(--simon-glow),
        0 0 28px var(--simon-glow),
        0 0 48px var(--simon-glow),
        0 8px 0 var(--simon-edge);
    z-index: 2;
}
.simon-tile.c0 { --simon-base: linear-gradient(160deg, #e11d48, #9f1239); --simon-edge: #7f1d1d; --simon-glow: rgba(251,113,133,0.95); }
.simon-tile.c1 { --simon-base: linear-gradient(160deg, #f97316, #c2410c); --simon-edge: #9a3412; --simon-glow: rgba(251,146,60,0.95); }
.simon-tile.c2 { --simon-base: linear-gradient(160deg, #eab308, #a16207); --simon-edge: #854d0e; --simon-glow: rgba(250,204,21,0.95); }
.simon-tile.c3 { --simon-base: linear-gradient(160deg, #84cc16, #4d7c0f); --simon-edge: #3f6212; --simon-glow: rgba(163,230,53,0.95); }
.simon-tile.c4 { --simon-base: linear-gradient(160deg, #14b8a6, #0f766e); --simon-edge: #115e59; --simon-glow: rgba(45,212,191,0.95); }
.simon-tile.c5 { --simon-base: linear-gradient(160deg, #06b6d4, #0e7490); --simon-edge: #155e75; --simon-glow: rgba(34,211,238,0.95); }
.simon-tile.c6 { --simon-base: linear-gradient(160deg, #3b82f6, #1d4ed8); --simon-edge: #1e40af; --simon-glow: rgba(96,165,250,0.95); }
.simon-tile.c7 { --simon-base: linear-gradient(160deg, #8b5cf6, #6d28d9); --simon-edge: #5b21b6; --simon-glow: rgba(167,139,250,0.95); }
.simon-tile.c8 { --simon-base: linear-gradient(160deg, #d946ef, #a21caf); --simon-edge: #86198f; --simon-glow: rgba(232,121,249,0.95); }
.simon-arena-foot {
    display: flex;
    justify-content: center;
    padding-top: 0.15rem;
}
.simon-start-btn {
    padding: 0.75rem 1.6rem;
    border-radius: 0.95rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #042f2e;
    cursor: pointer;
    background: linear-gradient(180deg, #5eead4, #14b8a6);
    box-shadow: 0 6px 0 #0f766e, 0 10px 24px rgba(20,184,166,0.35);
    transition: transform 0.12s ease, filter 0.12s ease;
}
.simon-start-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.simon-start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #0f766e; }
@media (max-width: 640px) {
    .simon-howto { grid-template-columns: 1fr; gap: 0.25rem; }
    .simon-howto-item { flex-direction: row; text-align: left; justify-content: flex-start; gap: 0.65rem; padding: 0.35rem 0.45rem; }
    .simon-howto-item .desc { font-size: 0.62rem; }
    .simon-board { width: min(100%, 18.5rem); --simon-gap: 0.4rem; padding: 0.55rem; }
    .simon-tile { border-radius: 0.8rem; }
}

/* —— Mentör Asistanı + 360 Öğrenci Dashboard —— */
.mentor-alerts-wrap { display: flex; flex-direction: column; gap: 0.55rem; }
.mentor-alert-card {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start;
    padding: 0.85rem 1rem; border-radius: 1rem; border: 1px solid transparent; background: #fff;
    box-shadow: 0 4px 14px rgba(15,23,42,0.06); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mentor-alert-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15,23,42,0.1); }
.mentor-alert-card.is-overdue { border-color: rgba(244,63,94,0.35); background: linear-gradient(135deg,#fff1f2,#fff); }
.mentor-alert-card.is-drop { border-color: rgba(245,158,11,0.4); background: linear-gradient(135deg,#fffbeb,#fff); }
.mentor-alert-card.is-pending { border-color: rgba(59,130,246,0.35); background: linear-gradient(135deg,#eff6ff,#fff); }
.mentor-alert-ico { width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
.mentor-alert-card.is-overdue .mentor-alert-ico { background: #ffe4e6; color: #e11d48; }
.mentor-alert-card.is-drop .mentor-alert-ico { background: #fef3c7; color: #d97706; }
.mentor-alert-card.is-pending .mentor-alert-ico { background: #dbeafe; color: #2563eb; }
.mentor-alert-body strong { display: block; font-size: 0.78rem; color: #0f172a; margin-bottom: 0.15rem; }
.mentor-alert-body p { margin: 0; font-size: 0.7rem; color: #64748b; line-height: 1.4; }
.mentor-alert-badge { font-size: 0.58rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.mentor-alert-card.is-overdue .mentor-alert-badge { background: #ffe4e6; color: #be123c; }
.mentor-alert-card.is-drop .mentor-alert-badge { background: #fef3c7; color: #b45309; }
.mentor-alert-card.is-pending .mentor-alert-badge { background: #dbeafe; color: #1d4ed8; }
.mentor-alert-empty { font-size: 0.75rem; color: #94a3b8; font-style: italic; text-align: center; padding: 1rem; border: 1px dashed #e2e8f0; border-radius: 1rem; background: #f8fafc; }
.students-360-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1rem; min-height: 28rem; align-items: start; }
@media (max-width: 900px) { .students-360-layout { grid-template-columns: 1fr; } }
.students-360-list { display: flex; flex-direction: column; gap: 0.45rem; max-height: min(70vh, 40rem); overflow-y: auto; }
.s360-list-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.75rem; border-radius: 0.95rem; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; text-align: left; width: 100%; transition: border-color 0.12s ease, background 0.12s ease; }
.s360-list-item:hover { border-color: #99f6e4; background: #f0fdfa; }
.s360-list-item.is-active { border-color: #14b8a6; background: linear-gradient(135deg,#f0fdfa,#fff); box-shadow: 0 0 0 2px rgba(20,184,166,0.15); }
.s360-list-item .meta { min-width: 0; flex: 1; }
.s360-list-item .name { display: block; font-size: 0.8rem; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s360-list-item .sub { display: block; font-size: 0.62rem; color: #64748b; margin-top: 0.1rem; }
.s360-live-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #94a3b8; flex-shrink: 0; }
.s360-live-dot.is-on { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }

.s360-search-wrap {
    position: relative;
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 22rem;
}
.s360-search-icon-btn {
    position: absolute;
    left: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.s360-search-icon-btn:hover { color: #0f766e; background: #f0fdfa; }
.s360-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem 0.7rem 2.85rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
}
.s360-search-input::placeholder { color: #94a3b8; opacity: 1; }
.s360-search-input:focus {
    outline: none;
    border-color: #14b8a6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}
.s360-search-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 80;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.35rem;
}
.s360-search-dropdown.hidden { display: none !important; }
.s360-search-hit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    cursor: pointer;
}
.s360-search-hit:hover { background: #f0fdfa; }
.s360-search-hit .name { font-size: 0.8rem; font-weight: 800; color: #0f172a; }
.s360-search-hit .sub { font-size: 0.65rem; color: #64748b; }
.s360-search-empty { padding: 0.85rem; text-align: center; font-size: 0.75rem; color: #94a3b8; }

.s360-cta {
    margin-top: 0.65rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, #eef2ff, #fff);
    color: #3730a3;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}
.s360-cta:hover { background: #e0e7ff; }
.s360-cta.is-book {
    border-color: #99f6e4;
    background: linear-gradient(135deg, #f0fdfa, #fff);
    color: #0f766e;
}
.s360-cta.is-book:hover { background: #ccfbf1; }
.ba-cta-row { grid-column: span 12; margin-top: 0.15rem; }
.ba-cta-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid #99f6e4;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.25);
}
.ba-cta-btn:hover { filter: brightness(1.05); }
.student-360-panel { border: 1px solid #e2e8f0; border-radius: 1.25rem; background: #fff; padding: 1rem 1.05rem 1.15rem; min-height: 22rem; box-shadow: 0 8px 24px rgba(15,23,42,0.05); }
.s360-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 18rem; color: #94a3b8; text-align: center; padding: 1.5rem; }
.s360-empty i { font-size: 1.75rem; color: #cbd5e1; }
.s360-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f1f5f9; }
.s360-head-main { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.s360-head h3 { margin: 0; font-size: 1rem; font-weight: 900; color: #0f172a; }
.s360-head p { margin: 0.15rem 0 0; font-size: 0.68rem; color: #64748b; }
.s360-sync { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 0.3rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.s360-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
@media (max-width: 640px) { .s360-grid { grid-template-columns: 1fr; } }
.s360-card { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.75rem 0.8rem; background: #f8fafc; }
.s360-card h4 { margin: 0 0 0.55rem; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; display: flex; align-items: center; gap: 0.35rem; }
.s360-metric-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.s360-pill { font-size: 0.68rem; font-weight: 700; padding: 0.35rem 0.55rem; border-radius: 0.65rem; background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.s360-pill strong { color: #0f172a; }
.s360-pill.is-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.s360-pill.is-bad { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.s360-pill.is-warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.s360-list-mini { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.s360-list-mini li { font-size: 0.7rem; color: #475569; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.45rem; background: #fff; border-radius: 0.55rem; border: 1px solid #f1f5f9; }
.s360-foot { margin-top: 0.75rem; display: flex; justify-content: flex-end; gap: 0.5rem; }
.s360-deep-btn { font-size: 0.7rem; font-weight: 800; padding: 0.5rem 0.85rem; border-radius: 0.75rem; border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; cursor: pointer; }
.s360-deep-btn:hover { background: #ccfbf1; }

/* —— XOXO / Hızlı Matematik / Bil Bakalım premium arenalar —— */
.xoxo-arena, .qm-arena, .bil-arena {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1.15rem 1rem 1.25rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(148,163,184,0.28);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(251,113,133,0.1), transparent 50%),
        linear-gradient(165deg, rgba(15,23,42,0.98), rgba(2,6,23,0.96));
}
.qm-arena {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.12), transparent 50%),
        linear-gradient(165deg, rgba(15,23,42,0.98), rgba(2,6,23,0.96));
}
.qm-game-screen {
    display: none;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.qm-game-screen:not(.hidden) {
    display: flex;
}
.bil-arena {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(167,139,250,0.14), transparent 50%),
        linear-gradient(165deg, rgba(15,23,42,0.98), rgba(2,6,23,0.96));
}
.xoxo-arena-head, .qm-arena-head, .bil-arena-head {
    text-align: center;
}
.xoxo-arena-head h3, .qm-arena-head h3, .bil-arena-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.xoxo-arena-head p, .qm-arena-head p, .bil-arena-head p {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: #94a3b8;
}
.xoxo-board {
    width: min(100%, 19rem);
    margin: 0.25rem auto;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 1.35rem;
    background: rgba(2,6,23,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.4);
}
.xoxo-cell {
    position: relative;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    font-weight: 900;
    color: transparent;
    background: linear-gradient(160deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -5px 12px rgba(0,0,0,0.35),
        0 6px 0 rgba(2,6,23,0.85),
        0 10px 18px rgba(0,0,0,0.3);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.xoxo-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255,255,255,0.12), transparent 50%);
    pointer-events: none;
}
.xoxo-cell:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 20px rgba(251,113,133,0.25),
        0 8px 0 rgba(2,6,23,0.85);
}
.xoxo-cell:disabled { cursor: default; }
.xoxo-cell.is-x {
    color: #fb7185;
    text-shadow: 0 0 12px rgba(251,113,133,0.95), 0 0 28px rgba(244,63,94,0.7);
    animation: xoxo-mark-pop 0.42s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
.xoxo-cell.is-o {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(34,211,238,0.95), 0 0 28px rgba(56,189,248,0.7);
    animation: xoxo-mark-pop 0.42s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
@keyframes xoxo-mark-pop {
    0% { transform: scale(0.35); opacity: 0; }
    60% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.xoxo-status {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #e2e8f0;
    min-height: 1.4rem;
}
.xoxo-restart, .qm-start-btn, .bil-start-btn {
    align-self: center;
    padding: 0.7rem 1.4rem;
    border-radius: 0.95rem;
    border: none;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    color: #fff;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.xoxo-restart {
    background: linear-gradient(180deg, #fb7185, #e11d48);
    box-shadow: 0 5px 0 #9f1239, 0 10px 22px rgba(244,63,94,0.35);
}
.qm-start-btn {
    background: linear-gradient(180deg, #fbbf24, #d97706);
    color: #422006;
    box-shadow: 0 5px 0 #92400e, 0 10px 22px rgba(251,191,36,0.35);
}
.bil-start-btn {
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
    box-shadow: 0 5px 0 #5b21b6, 0 10px 22px rgba(167,139,250,0.35);
}
.xoxo-restart:hover, .qm-start-btn:hover, .bil-start-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.xoxo-restart:active, .qm-start-btn:active, .bil-start-btn:active { transform: translateY(3px); }

.qm-hud {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.65rem;
}
.qm-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.4rem;
    border-radius: 0.9rem;
    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(148,163,184,0.22);
    backdrop-filter: blur(10px);
}
.qm-chip .lbl {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}
.qm-chip .val {
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    font-weight: 900;
    color: #f8fafc;
}
.qm-chip.is-wrong .val { color: #fb7185; }
.qm-timer-big {
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: clamp(2.6rem, 12vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251,191,36,0.75), 0 0 40px rgba(245,158,11,0.4);
    letter-spacing: 0.06em;
}
.qm-timer-big.is-low {
    color: #fb7185;
    text-shadow: 0 0 20px rgba(251,113,133,0.85), 0 0 40px rgba(244,63,94,0.45);
    animation: qm-timer-blink 0.7s ease-in-out infinite;
}
@keyframes qm-timer-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.qm-equation {
    text-align: center;
    padding: 1.1rem 0.85rem;
    border-radius: 1.2rem;
    background: rgba(2,6,23,0.65);
    border: 1px solid rgba(251,191,36,0.28);
    box-shadow: inset 0 0 30px rgba(251,191,36,0.06), 0 12px 28px rgba(0,0,0,0.35);
}
.qm-equation .eq {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.55rem, 7vw, 2.35rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 18px rgba(255,255,255,0.25);
}
.qm-answer-display {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', monospace;
    font-size: 1.55rem;
    font-weight: 900;
    color: #67e8f9;
    letter-spacing: 0.08em;
    border-radius: 0.85rem;
    background: rgba(8,145,178,0.12);
    border: 1px solid rgba(34,211,238,0.3);
    text-shadow: 0 0 14px rgba(34,211,238,0.55);
}
.qm-answer-display.is-ok {
    color: #4ade80;
    border-color: rgba(74,222,128,0.55);
    box-shadow: 0 0 22px rgba(74,222,128,0.35);
}
.qm-answer-display.is-bad {
    color: #fb7185;
    border-color: rgba(251,113,133,0.55);
    box-shadow: 0 0 22px rgba(251,113,133,0.35);
}
.qm-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
}

/* Hızlı Matematik — oyun ekranı: numaratör kalan alanı doldurur */
#gym-game-modal.is-quickmath-mode .qm-game-screen {
    gap: 0.32rem;
}
#gym-game-modal.is-quickmath-mode .qm-hud {
    flex: 0 0 auto;
    gap: 0.35rem;
}
#gym-game-modal.is-quickmath-mode .qm-chip {
    padding: 0.32rem 0.28rem;
    border-radius: 0.65rem;
}
#gym-game-modal.is-quickmath-mode .qm-chip .lbl {
    font-size: 0.48rem;
    letter-spacing: 0.08em;
}
#gym-game-modal.is-quickmath-mode .qm-chip .val {
    font-size: 0.95rem;
}
#gym-game-modal.is-quickmath-mode .qm-timer-big {
    flex: 0 0 auto;
    font-size: clamp(1.65rem, 7.5vw, 2.35rem);
    line-height: 1;
}
#gym-game-modal.is-quickmath-mode .qm-equation {
    flex: 0 0 auto;
    padding: 0.45rem 0.4rem;
    border-radius: 0.85rem;
}
#gym-game-modal.is-quickmath-mode .qm-equation .eq {
    font-size: clamp(1rem, 5vw, 1.55rem);
}
#gym-game-modal.is-quickmath-mode .qm-answer-display {
    flex: 0 0 auto;
    min-height: 1.85rem;
    font-size: 1.1rem;
    border-radius: 0.65rem;
}
#gym-game-modal.is-quickmath-mode .qm-numpad {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    gap: 0.32rem;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    align-content: stretch;
}
#gym-game-modal.is-quickmath-mode .qm-key {
    min-height: 0;
    height: 100%;
    font-size: clamp(0.8rem, 3.8vw, 1rem);
    border-radius: 0.6rem;
    box-shadow: 0 3px 0 rgba(2,6,23,0.9), 0 5px 10px rgba(0,0,0,0.22);
}
#gym-game-modal.is-quickmath-mode .qm-key:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(2,6,23,0.9);
}

.qm-key {
    min-height: 3.1rem;
    border: none;
    border-radius: 0.9rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #e2e8f0;
    cursor: pointer;
    background: linear-gradient(160deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98));
    border: 1px solid rgba(148,163,184,0.28);
    box-shadow: 0 6px 0 rgba(2,6,23,0.9), 0 10px 16px rgba(0,0,0,0.28);
    transition: transform 0.1s ease, filter 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.qm-key:hover { filter: brightness(1.1); }
.qm-key:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(2,6,23,0.9); }
.qm-key.is-wide { grid-column: span 1; }
.qm-key.is-clear { color: #fda4af; border-color: rgba(251,113,133,0.35); }
.qm-key.is-ok {
    color: #042f2e;
    background: linear-gradient(180deg, #5eead4, #14b8a6);
    border-color: transparent;
    box-shadow: 0 6px 0 #0f766e, 0 10px 16px rgba(20,184,166,0.3);
}
.qm-warn {
    font-size: 0.65rem;
    color: #fda4af;
    background: rgba(244,63,94,0.1);
    border: 1px solid rgba(244,63,94,0.25);
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    text-align: center;
    line-height: 1.4;
}
.qm-result-box, .bil-start-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
    padding: 0.5rem 0;
}
.qm-result-box .score {
    font-family: 'Orbitron', monospace;
    font-size: 2.8rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 22px rgba(251,191,36,0.6);
}

.bil-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 700;
}
.bil-progress .val {
    font-family: 'Orbitron', monospace;
    color: #c4b5fd;
}
.bil-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ddd6fe;
    background: rgba(124,58,237,0.22);
    border: 1px solid rgba(167,139,250,0.4);
}
.bil-card {
    padding: 1.15rem 1rem;
    border-radius: 1.25rem;
    background: rgba(2,6,23,0.62);
    border: 1px solid rgba(167,139,250,0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    min-height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bil-card .q {
    margin: 0;
    font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    font-weight: 800;
    line-height: 1.45;
    color: #f8fafc;
    text-align: center;
}
.bil-choices {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.bil-choice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148,163,184,0.28);
    background: linear-gradient(160deg, rgba(30,41,59,0.92), rgba(15,23,42,0.96));
    color: #e2e8f0;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.bil-choice .ltr {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    color: #c4b5fd;
    background: rgba(124,58,237,0.25);
    border: 1px solid rgba(167,139,250,0.35);
    flex-shrink: 0;
}
.bil-choice:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(167,139,250,0.65);
    box-shadow: 0 0 22px rgba(167,139,250,0.28);
}
.bil-choice:disabled { cursor: default; }
.bil-choice.is-correct {
    border-color: rgba(74,222,128,0.75);
    background: linear-gradient(160deg, rgba(22,163,74,0.35), rgba(6,78,59,0.55));
    box-shadow: 0 0 28px rgba(74,222,128,0.4);
    color: #bbf7d0;
}
.bil-choice.is-correct .ltr {
    color: #052e16;
    background: #4ade80;
    border-color: transparent;
}
.bil-choice.is-wrong {
    border-color: rgba(251,113,133,0.75);
    background: linear-gradient(160deg, rgba(225,29,72,0.35), rgba(136,19,55,0.55));
    box-shadow: 0 0 28px rgba(251,113,133,0.4);
    color: #fecdd3;
}
.bil-choice.is-wrong .ltr {
    color: #fff;
    background: #fb7185;
    border-color: transparent;
}
.bil-report {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.bil-report-title {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
}
.bil-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.bil-stat {
    text-align: center;
    padding: 0.75rem 0.4rem;
    border-radius: 1rem;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}
.bil-stat .n {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    font-weight: 900;
    line-height: 1;
}
.bil-stat .t {
    margin-top: 0.3rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}
.bil-stat.is-ok .n { color: #4ade80; text-shadow: 0 0 18px rgba(74,222,128,0.65); }
.bil-stat.is-bad .n { color: #fb7185; text-shadow: 0 0 18px rgba(251,113,133,0.65); }
.bil-stat.is-pct .n { color: #a78bfa; text-shadow: 0 0 18px rgba(167,139,250,0.65); }
.bil-mentor {
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(145deg, rgba(124,58,237,0.18), rgba(14,165,233,0.12));
    border: 1px solid rgba(167,139,250,0.4);
    box-shadow: 0 0 28px rgba(124,58,237,0.15);
}
.bil-mentor .ttl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c4b5fd;
    margin-bottom: 0.45rem;
}
.bil-mentor .msg {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #e2e8f0;
}
.bil-cat-bars {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bil-cat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: #cbd5e1;
    font-weight: 700;
}
.bil-cat-row .bad { color: #fda4af; }
@media (max-width: 640px) {
    .xoxo-board { width: min(100%, 17rem); gap: 0.4rem; padding: 0.55rem; }
    .qm-key { min-height: 2.85rem; font-size: 1.05rem; }
    .bil-choice { padding: 0.75rem 0.8rem; font-size: 0.78rem; }
    #gym-game-modal.is-quickmath-mode .gym-game-modal-scroll {
        padding: 2.1rem 0.35rem 0.25rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-arena {
        padding: 0.35rem 0.3rem 0.3rem;
        gap: 0.28rem;
        border-radius: 1rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-game-screen {
        gap: 0.25rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-timer-big {
        font-size: clamp(1.45rem, 6.5vw, 1.9rem);
    }
    #gym-game-modal.is-quickmath-mode .qm-equation {
        padding: 0.35rem 0.3rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-equation .eq {
        font-size: clamp(0.92rem, 4.5vw, 1.25rem);
    }
    #gym-game-modal.is-quickmath-mode .qm-answer-display {
        min-height: 1.65rem;
        font-size: 0.95rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-numpad {
        gap: 0.25rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-key {
        min-height: 0;
        font-size: clamp(0.75rem, 3.5vw, 0.92rem);
        border-radius: 0.5rem;
    }
    #gym-game-modal.is-quickmath-mode .qm-chip .val {
        font-size: 0.85rem;
    }
}

/* —— Taş Kağıt Makas: VS Arena + çift taraflı düello —— */
.rps-arena {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.55rem 0.45rem 0.7rem;
    border-radius: 1.35rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,0.22);
    box-shadow: 0 18px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
    background:
        linear-gradient(105deg,
            rgba(8, 145, 178, 0.28) 0%,
            rgba(15, 23, 42, 0.92) 42%,
            rgba(15, 23, 42, 0.92) 58%,
            rgba(190, 24, 93, 0.26) 100%);
}
.rps-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 12% 40%, rgba(34, 211, 238, 0.22), transparent 42%),
        radial-gradient(ellipse at 88% 40%, rgba(244, 63, 94, 0.2), transparent 42%),
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.06) 50%, transparent 52%);
    z-index: 0;
}
.rps-arena > * { position: relative; z-index: 1; }

.rps-scoreboard {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.35rem;
    border-radius: 1.2rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.rps-score-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.95rem;
    min-width: 0;
}
.rps-score-side.is-you {
    background: linear-gradient(135deg, rgba(34,211,238,0.16), rgba(8,145,178,0.08));
    border: 1px solid rgba(34,211,238,0.35);
    box-shadow: inset 0 0 20px rgba(34,211,238,0.08);
}
.rps-score-side.is-ai {
    text-align: right;
    background: linear-gradient(225deg, rgba(244,63,94,0.16), rgba(190,24,93,0.08));
    border: 1px solid rgba(251,113,133,0.35);
    box-shadow: inset 0 0 20px rgba(244,63,94,0.08);
}
.rps-score-side .lbl {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #94a3b8;
}
.rps-score-side.is-you .lbl { color: #67e8f9; }
.rps-score-side.is-ai .lbl { color: #fda4af; }
.rps-score-side .val {
    font-family: 'Orbitron', ui-monospace, monospace;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1;
    color: #f8fafc;
    letter-spacing: 0.04em;
    text-shadow: 0 0 22px rgba(34,211,238,0.55);
}
.rps-score-side.is-ai .val {
    color: #ffe4e6;
    text-shadow: 0 0 22px rgba(251,113,133,0.55);
}
.rps-score-vs {
    align-self: center;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.85rem, 2.5vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #fff;
    padding: 0.7rem 0.85rem;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.35);
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 55%),
        linear-gradient(145deg, rgba(34,211,238,0.55), rgba(244,63,94,0.55));
    box-shadow:
        0 0 24px rgba(34,211,238,0.45),
        0 0 24px rgba(244,63,94,0.35),
        inset 0 1px 0 rgba(255,255,255,0.45);
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.rps-duel-stage {
    flex: 1 1 auto;
    min-height: 11rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(5rem, 30%) 1fr;
    align-items: center;
    justify-items: center;
    gap: 0.35rem;
    padding: 1.1rem 0.85rem;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background:
        linear-gradient(90deg,
            rgba(6, 182, 212, 0.18) 0%,
            rgba(15, 23, 42, 0.35) 45%,
            rgba(15, 23, 42, 0.35) 55%,
            rgba(225, 29, 72, 0.18) 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.25);
}
.rps-duel-stage::before {
    content: 'VS';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.06);
    pointer-events: none;
    z-index: 0;
}
.rps-duel-hand {
    position: relative;
    z-index: 2;
    width: min(100%, 10.5rem);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(3.8rem, 13vw, 6.2rem);
    line-height: 1;
    border-radius: 1.25rem;
    user-select: none;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,0.5));
}
.rps-duel-hand.is-you {
    background: radial-gradient(circle at 40% 30%, rgba(34,211,238,0.2), transparent 65%);
    transform-origin: 50% 80%;
}
.rps-duel-hand.is-ai {
    background: radial-gradient(circle at 60% 30%, rgba(244,63,94,0.2), transparent 65%);
    transform-origin: 50% 80%;
}
.rps-duel-hand.is-ai .rps-fist-glyph {
    display: inline-block;
    transform: scaleX(-1);
}
.rps-duel-stage.is-shaking .rps-duel-hand.is-you {
    animation: rps-fist-shake 1.4s ease-in-out both;
}
.rps-duel-stage.is-shaking .rps-duel-hand.is-ai {
    animation: rps-fist-shake 1.4s ease-in-out both;
}
@keyframes rps-fist-shake {
    0%, 100% { transform: translateY(0); }
    10% { transform: translateY(-38px); }
    20% { transform: translateY(0); }
    35% { transform: translateY(-38px); }
    45% { transform: translateY(0); }
    60% { transform: translateY(-38px); }
    70% { transform: translateY(0); }
}
.rps-result-banner {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
}
.rps-result-banner.is-show {
    opacity: 1;
    animation: rps-result-pop 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
.rps-result-banner span {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.15rem, 4.5vw, 2.1rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 0.9rem;
    border-radius: 0.85rem;
    text-shadow: 0 0 24px currentColor;
    border: 2px solid currentColor;
    background: rgba(2,6,23,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
}
.rps-result-banner.is-win span { color: #4ade80; box-shadow: 0 0 40px rgba(74,222,128,0.5); }
.rps-result-banner.is-lose span { color: #fb7185; box-shadow: 0 0 40px rgba(251,113,133,0.5); }
.rps-result-banner.is-draw span { color: #fbbf24; box-shadow: 0 0 40px rgba(251,191,36,0.45); }
@keyframes rps-result-pop {
    0% { transform: scale(0.35); opacity: 0; }
    55% { transform: scale(1.14); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.rps-choice-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
.rps-arena.is-dueling .rps-choice-row {
    opacity: 0.22;
    filter: grayscale(0.6) blur(1px);
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
}
.rps-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 6.5rem;
    padding: 1rem 0.75rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(148,163,184,0.3);
    background: linear-gradient(160deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98));
    color: #e2e8f0;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    -webkit-tap-highlight-color: transparent;
}
.rps-choice-card .ico {
    font-size: clamp(2.4rem, 8vw, 3.4rem);
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.rps-choice-card .name {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.rps-choice-card:hover:not(:disabled) {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(34,211,238,0.65);
    box-shadow:
        0 16px 36px rgba(0,0,0,0.35),
        0 0 28px rgba(34,211,238,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12);
    filter: brightness(1.1);
}
.rps-choice-card:active:not(:disabled) { transform: translateY(-2px) scale(0.98); }
.rps-choice-card:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.35);
}
.rps-choice-card.is-scissors .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.2rem, 7.5vw, 3.1rem);
    transform: rotate(90deg);
}
.rps-arena-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.rps-arena-foot button {
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.55rem;
}
.rps-arena-foot button:hover { color: #e2e8f0; }

.rps-mode-card {
    width: 100%;
    max-width: 28rem;
    margin: auto;
    padding: 1.5rem 1.25rem;
    border-radius: 1.35rem;
    background: linear-gradient(165deg, rgba(15,23,42,0.95), rgba(2,6,23,0.92));
    border: 1px solid rgba(34,211,238,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.rps-mode-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.rps-mode-card p { margin: 0; font-size: 0.78rem; color: #94a3b8; text-align: center; }
.rps-mode-btn {
    width: 100%;
    max-width: 20rem;
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
    font-size: 0.8rem;
    font-weight: 900;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.rps-mode-btn.is-ai { background: linear-gradient(180deg, #22d3ee, #0891b2); box-shadow: 0 6px 0 #0e7490; }
.rps-mode-btn.is-mp { background: linear-gradient(180deg, #334155, #1e293b); border: 1px solid #475569; box-shadow: 0 6px 0 #0f172a; }
.rps-mode-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.rps-mode-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0f172a; }

.rps-choice-btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rps-choice-btn:hover { transform: scale(1.06); }
.rps-choice-btn.is-selected { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.55); transform: scale(1.04); }

@media (max-width: 640px) {
    .rps-choice-card { min-height: 5.25rem; padding: 0.75rem 0.4rem; }
    .rps-duel-stage { min-height: 9rem; padding: 0.75rem 0.5rem; grid-template-columns: 1fr minmax(4rem, 28%) 1fr; }
    .rps-scoreboard { padding: 0.3rem; gap: 0.35rem; }
    .rps-score-side { padding: 0.55rem 0.65rem; }
    .rps-result-banner span { font-size: clamp(0.95rem, 4vw, 1.35rem); letter-spacing: 0.06em; padding: 0.45rem 0.65rem; }
}

/* —— Koridor: ahşap masa + satranç geometrisi —— */
.quoridor-setup-card,
.quoridor-game-card {
    width: 100%;
    max-width: min(95vw, 900px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.4rem;
}
.quoridor-game-card {
    height: 100%;
}

/* —— Başlangıç ekranı —— */
.quoridor-setup-hero {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.35rem 0.5rem 0.15rem;
}
.quoridor-setup-hero .quoridor-hero-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.1rem;
    font-size: 2rem;
    color: #f5e6d3;
    background:
        linear-gradient(145deg, #a67c52, #6b4226 55%, #3e2715);
    border: 2px solid rgba(245, 230, 211, 0.35);
    box-shadow:
        0 10px 0 #2a180c,
        0 14px 28px rgba(0,0,0,0.45),
        inset 0 2px 0 rgba(255,240,220,0.35);
    margin-bottom: 0.65rem;
}
.quoridor-setup-hero h2 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 6vw, 2.85rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #3e2715;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.quoridor-setup-hero .quoridor-hero-sub {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(90, 60, 30, 0.7);
}

.quoridor-howto {
    width: min(100%, 34rem);
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: linear-gradient(160deg, #fffaf0, #f3e6d0);
    border: 1px solid rgba(140, 100, 55, 0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 14px rgba(80, 50, 20, 0.1);
}
.quoridor-howto h4 {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5c4033;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.quoridor-howto ul {
    margin: 0;
    padding: 0 0 0 1rem;
    color: #4a3422;
    font-size: 0.72rem;
    line-height: 1.45;
    font-weight: 600;
}
.quoridor-howto li { margin-bottom: 0.2rem; }

.quoridor-history-panel {
    width: min(100%, 34rem);
    flex: 0 1 auto;
    min-height: 0;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #fffaf0, #f0e4cc);
    border: 1px solid rgba(140, 100, 55, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 8px 18px rgba(80, 50, 20, 0.1);
    overflow: hidden;
}
.quoridor-history-panel > header {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(140, 100, 55, 0.22);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5c4033;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.quoridor-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.quoridor-history-table th {
    text-align: left;
    padding: 0.4rem 0.75rem;
    color: rgba(90, 60, 30, 0.55);
    font-weight: 800;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(140, 100, 55, 0.15);
}
.quoridor-history-table td {
    padding: 0.5rem 0.75rem;
    color: #3e2715;
    font-weight: 700;
    border-bottom: 1px solid rgba(140, 100, 55, 0.12);
}
.quoridor-history-table tr:last-child td { border-bottom: none; }
.quoridor-history-table .is-win {
    color: #166534;
    font-weight: 900;
}
.quoridor-history-table .is-loss {
    color: #b91c1c;
    font-weight: 900;
}
.quoridor-history-table .diff-tag {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    background: rgba(120, 80, 40, 0.1);
    border: 1px solid rgba(140, 100, 55, 0.3);
    color: #5c4033;
}
.quoridor-history-table .meta {
    color: rgba(90, 60, 30, 0.65);
    font-weight: 600;
    font-size: 0.68rem;
}

.quoridor-diff-block {
    flex: 0 0 auto;
    width: min(100%, 34rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.15rem;
    padding-bottom: 0.35rem;
}
.quoridor-diff-label {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(90, 60, 30, 0.7);
}
.quoridor-diff-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    width: 100%;
}
.quoridor-diff-btn {
    flex: 1 1 6.5rem;
    min-width: 6.5rem;
    min-height: 3.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.95rem;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    border: 2px solid rgba(245, 230, 211, 0.35);
    cursor: pointer;
    color: #2a180c;
    box-shadow: 0 7px 0 rgba(0,0,0,0.35), 0 12px 22px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.quoridor-diff-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.quoridor-diff-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.quoridor-diff-btn.is-easy { background: linear-gradient(180deg, #c8e6a0, #7cb342); }
.quoridor-diff-btn.is-medium { background: linear-gradient(180deg, #f6d58a, #d4a017); }
.quoridor-diff-btn.is-hard { background: linear-gradient(180deg, #f0a090, #c44536); color: #fff8f0; }

/* —— Oyun içi layout: üst bar + maksimum kare tahta —— */
.quoridor-play-layout {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}
.quoridor-top-bar {
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
}
.quoridor-plaque {
    border-radius: 0.55rem;
    padding: 0.3rem 0.35rem;
    background: linear-gradient(160deg, #fffaf0 0%, #f0e2c8 100%);
    border: 1px solid rgba(140, 100, 55, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 3px 8px rgba(80, 50, 20, 0.12);
    text-align: center;
    min-width: 0;
}
.quoridor-plaque .lbl {
    display: block;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(90, 60, 30, 0.65);
    margin-bottom: 0.08rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quoridor-plaque .val {
    display: block;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    font-weight: 900;
    color: #3e2715;
    line-height: 1.1;
}
.quoridor-plaque.is-status .val {
    font-size: 0.58rem;
    font-family: inherit;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.quoridor-plaque.is-you { border-color: rgba(34, 120, 60, 0.45); }
.quoridor-plaque.is-bot { border-color: rgba(40, 90, 160, 0.4); }

.quoridor-stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
}
.quoridor-board-wrap {
    width: min(100cqw, 100cqh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 0.35rem;
    border-radius: 0.6rem;
    background: linear-gradient(145deg, #5c4033, #3e2a1c);
    border: 3px solid #2a1a10;
    box-shadow:
        0 12px 28px rgba(60, 40, 20, 0.28),
        inset 0 0 0 2px rgba(200, 160, 100, 0.25);
    touch-action: manipulation;
    flex: 0 0 auto;
    align-self: center;
}
.quoridor-board {
    display: grid;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    max-height: 100%;
    grid-template-columns: repeat(8, minmax(0, 1fr) clamp(9px, 2.4%, 14px)) minmax(0, 1fr);
    grid-template-rows: repeat(8, minmax(0, 1fr) clamp(9px, 2.4%, 14px)) minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border-radius: 0.25rem;
    background: #c4a882;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

.quoridor-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 0.15rem;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.18);
    transition: filter 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.quoridor-cell.is-light {
    background: linear-gradient(160deg, #dcc9a8 0%, #cbb892 55%, #bda67e 100%);
}
.quoridor-cell.is-dark {
    background: linear-gradient(160deg, #7a5235 0%, #5e3c26 55%, #4a2f1c 100%);
}
.quoridor-cell:hover { filter: brightness(1.06); }
.quoridor-cell.is-goal-p1 {
    box-shadow: inset 0 0 0 2px rgba(34, 120, 60, 0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.quoridor-cell.is-goal-p2 {
    box-shadow: inset 0 0 0 2px rgba(40, 90, 160, 0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.quoridor-cell.is-target {
    outline: 2px solid #2f7d4a;
    box-shadow: inset 0 0 12px rgba(47,125,74,0.35), 0 0 10px rgba(47,125,74,0.3);
}
.quoridor-cell.is-preview {
    outline: 2px solid #6b3a1e;
    box-shadow: 0 0 0 2px rgba(120, 60, 30, 0.45), inset 0 0 10px rgba(120,60,30,0.2);
}

.quoridor-groove {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 2px;
    background: #e8d5b5;
    cursor: default;
    transition: background 0.1s ease, box-shadow 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(160, 120, 70, 0.35);
}
.quoridor-groove.is-x { background: #dfc9a4; }
.quoridor-board.is-wall-mode .quoridor-groove.is-h,
.quoridor-board.is-wall-mode .quoridor-groove.is-v,
.quoridor-board.is-wall-mode .quoridor-groove.is-x {
    cursor: pointer;
    background: #f0e0c0;
    box-shadow: inset 0 0 0 1px rgba(140, 90, 40, 0.45);
}
.quoridor-groove.is-filled-h,
.quoridor-groove.is-hover-h.is-h,
.quoridor-groove.is-hover-h.is-x,
.quoridor-groove.is-pending-h {
    background: linear-gradient(90deg, #3b1c0f, #6b2e16 35%, #2a1208 70%, #5a2812) !important;
    box-shadow: 0 2px 0 #1a0c06, inset 0 1px 0 rgba(255,180,120,0.2);
    z-index: 2;
}
.quoridor-groove.is-filled-v,
.quoridor-groove.is-hover-v.is-v,
.quoridor-groove.is-hover-v.is-x,
.quoridor-groove.is-pending-v {
    background: linear-gradient(180deg, #3b1c0f, #6b2e16 35%, #2a1208 70%, #5a2812) !important;
    box-shadow: 0 2px 0 #1a0c06, inset 0 1px 0 rgba(255,180,120,0.2);
    z-index: 2;
}
.quoridor-groove.is-hover-h,
.quoridor-groove.is-hover-v { opacity: 0.82; filter: brightness(1.12); }
.quoridor-groove.is-pending-h,
.quoridor-groove.is-pending-v {
    opacity: 0.55;
    animation: quoridor-ghost-pulse 1.1s ease-in-out infinite;
}
.quoridor-groove.is-illegal:hover {
    background: rgba(180, 60, 40, 0.5) !important;
}

.quoridor-pawn {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    position: relative;
    z-index: 4;
    display: block;
    transform: translateY(-3px);
    pointer-events: none;
}
.quoridor-pawn::before {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 12%;
    height: 28%;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    pointer-events: none;
}
.quoridor-pawn::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -22%;
    height: 32%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
    filter: blur(1.5px);
    z-index: -1;
}
.quoridor-pawn.p1 {
    background: radial-gradient(circle at 35% 28%, #fffaf2, #f0e6d4 40%, #ddd0b8 75%, #c4b498 100%);
    border: 3px solid #3e2715;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.35),
        0 7px 0 rgba(40, 24, 12, 0.45),
        0 12px 16px rgba(0,0,0,0.4),
        inset 0 4px 8px rgba(255,255,255,0.55),
        inset 0 -5px 10px rgba(80, 50, 20, 0.25);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35));
}
.quoridor-pawn.p2 {
    background: radial-gradient(circle at 35% 28%, #5a4638, #2f2218 45%, #1a120c 78%, #0d0906 100%);
    border: 3px solid #0a0604;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12),
        0 7px 0 rgba(0,0,0,0.45),
        0 12px 16px rgba(0,0,0,0.45),
        inset 0 4px 8px rgba(255,255,255,0.18),
        inset 0 -5px 10px rgba(0,0,0,0.45);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4));
}
.quoridor-pawn.is-ghost {
    opacity: 0.42;
    animation: quoridor-ghost-pulse 1.1s ease-in-out infinite;
}
@keyframes quoridor-ghost-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.6; }
}

.quoridor-action-bar {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.2rem 0.15rem;
    background: linear-gradient(180deg, rgba(244, 232, 212, 0) 0%, rgba(244, 232, 212, 0.88) 35%, #ebe0c8 100%);
    border-top: 1px solid rgba(140, 100, 55, 0.2);
}
.quoridor-arcade-row {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    width: 100%;
}
.quoridor-arcade-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 10rem;
    padding: 0.5rem 0.55rem 0.58rem;
    border: 1px solid rgba(120, 80, 40, 0.35);
    border-radius: 0.65rem;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #3e2715;
    cursor: pointer;
    background: linear-gradient(180deg, #fff8ec, #e8d5b5);
    box-shadow: 0 3px 0 #a67c52, 0 6px 12px rgba(80, 50, 20, 0.12), inset 0 1px 0 rgba(255,255,255,0.7);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.quoridor-arcade-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.quoridor-arcade-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #a67c52, inset 0 1px 0 rgba(255,255,255,0.4);
}
.quoridor-arcade-btn.is-active {
    background: linear-gradient(180deg, #c8a06a, #8b5a2b);
    color: #fffaf0;
    border-color: #6b4226;
    box-shadow: 0 4px 0 #5c3a22, 0 8px 14px rgba(80, 50, 20, 0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
.quoridor-arcade-btn.is-wall.is-active {
    background: linear-gradient(180deg, #8b4518, #5c2e0e);
    color: #fff8f0;
}
.quoridor-confirm-btn {
    width: 100%;
    max-width: 100%;
    padding: 0.62rem 0.85rem;
    border: 2px solid rgba(120, 70, 30, 0.4);
    border-radius: 0.75rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #2a180c;
    cursor: pointer;
    background: linear-gradient(135deg, #f0d7b4 0%, #d4a574 45%, #b8956a 100%);
    box-shadow: 0 0 14px rgba(180, 120, 60, 0.25), 0 5px 0 #8b5a2b, inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.12s ease, opacity 0.15s ease;
    flex-shrink: 0;
}
.quoridor-confirm-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-2px); }
.quoridor-confirm-btn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #8b5a2b;
}
.quoridor-confirm-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.25);
    box-shadow: 0 3px 0 #c4a882;
    color: #7a6550;
}
.quoridor-confirm-btn.is-ready {
    animation: quoridor-confirm-glow 1.4s ease-in-out infinite;
}
@keyframes quoridor-confirm-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(180,120,60,0.25), 0 6px 0 #8b5a2b; }
    50% { box-shadow: 0 0 24px rgba(200,140,70,0.45), 0 6px 0 #8b5a2b; }
}
.quoridor-restart {
    font-size: 0.58rem;
    font-weight: 800;
    color: rgba(90, 60, 30, 0.55);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    line-height: 1.2;
}
.quoridor-restart:hover { color: #3e2715; }

@media (max-width: 720px) {
    #gym-game-modal.is-quoridor-mode .gym-game-modal-scroll {
        padding: 2.1rem 0.3rem 0.15rem;
    }
    #gym-game-modal.is-quoridor-mode .quoridor-game-card,
    #gym-game-modal.is-quoridor-mode .quoridor-setup-card {
        padding: 0.2rem 0.25rem 0.15rem !important;
        gap: 0.25rem;
    }
    .quoridor-play-layout {
        gap: 0.2rem;
    }
    .quoridor-top-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.2rem;
    }
    .quoridor-plaque {
        padding: 0.2rem 0.22rem;
        border-radius: 0.45rem;
    }
    .quoridor-plaque .lbl {
        font-size: 0.44rem;
        letter-spacing: 0.05em;
        margin-bottom: 0.04rem;
    }
    .quoridor-plaque .val {
        font-size: 0.78rem;
    }
    .quoridor-plaque.is-status .val {
        font-size: 0.5rem;
    }
    .quoridor-board-wrap {
        padding: 0.28rem;
        border-width: 2px;
    }
    .quoridor-action-bar {
        padding: 0.22rem 0.15rem 0.1rem;
        gap: 0.22rem;
    }
    .quoridor-arcade-btn {
        padding: 0.42rem 0.35rem 0.48rem;
        font-size: 0.58rem;
        border-radius: 0.55rem;
        box-shadow: 0 2px 0 #a67c52, 0 4px 8px rgba(80, 50, 20, 0.1), inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .quoridor-confirm-btn {
        padding: 0.5rem 0.65rem;
        font-size: 0.64rem;
        border-radius: 0.65rem;
    }
    .quoridor-setup-hero .quoridor-hero-ico {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.6rem;
    }
    .quoridor-history-table td,
    .quoridor-history-table th { padding: 0.4rem 0.55rem; }
}

/* Haftalık Çalışma Takvimi — gün sekmeleri (7 gün eşit, Pazar kırpılmasın) */
.study-day-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.14rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
    padding: 0.28rem 0.24rem;
    background: rgba(241, 245, 249, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    box-sizing: border-box;
    overflow: hidden;
}
.study-day-tab {
    appearance: none;
    border: none;
    background: transparent;
    border-radius: 0.65rem;
    padding: 0.38rem 0.06rem 0.42rem;
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.study-day-tab .sdt-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
}
.study-day-tab .sdt-num {
    font-size: 0.85rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.study-day-tab:hover { background: rgba(255,255,255,0.85); }
.study-day-tab.is-active {
    background: #fff;
    box-shadow: inset 0 0.22rem 0 #ef4444, inset 0 0 0 1px rgba(15, 23, 42, 0.07);
    z-index: 1;
}
.study-day-tab.is-active .sdt-label { color: #059669; }
.study-day-tab.is-active .sdt-num { color: #047857; }
.study-day-tab.is-today:not(.is-active) .sdt-num {
    color: #059669;
}
.study-day-tab.is-today:not(.is-active)::after {
    content: '';
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: #10b981;
    margin-top: 0.05rem;
}
.study-day-panel {
    container-type: inline-size;
    container-name: study-day;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.55) transparent;
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    padding: 0.55rem;
    color: #0f172a;
}
.study-day-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-bottom: 0.1rem;
}
.study-day-panel-head .sdp-title {
    font-size: 0.78rem;
    font-weight: 900;
    color: #0f172a !important;
}
.study-day-panel-head .sdp-meta {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b !important;
}
.study-session-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.study-session-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    flex: 0 0 auto;
    min-height: 3.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.14rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: visible;
    box-sizing: border-box;
    color: #0f172a !important;
}
.study-session-card:hover { border-color: #10b981; background: #ecfdf5 !important; box-shadow: 0 6px 14px rgba(16,185,129,0.12); }
.study-session-card.is-done { opacity: 0.92; background: #f0fdf4 !important; border-color: #86efac; }
.study-session-card.is-done .ss-topic { color: #334155 !important; text-decoration: none; }
.study-session-card .ss-progress {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #0369a1 !important;
    line-height: 1.25;
    display: block;
}
.study-session-card.is-done .ss-progress { color: #15803d !important; }
.study-session-card .ss-done-badge {
    margin-left: 0.2rem;
    color: #16a34a;
    font-size: 0.62rem;
}
.fwsp-sess .fwsp-progress {
    font-size: 0.68rem;
    color: #7dd3fc !important;
    margin-top: 0.2rem;
    font-weight: 600;
    line-height: 1.3;
}
#full-weekly-study-plan-modal .fwsp-sess.is-done .fwsp-progress { color: #86efac !important; }
.study-session-card.is-practice { border-left: 3px solid #38bdf8; }
.study-session-card.is-review { border-left: 3px solid #a78bfa; }
.study-session-card.is-reading { border-left: 3px solid #818cf8; }
.study-session-card .ss-slot {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: #64748b !important;
    display: block;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-session-card .ss-type {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.25;
    overflow: hidden;
    display: block;
}
.ss-type-row {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    max-width: 100%;
    min-width: 0;
}
.ss-type-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ss-type-icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}
.ss-type-icon.is-reading { background: rgba(129, 140, 248, 0.16); color: #4f46e5; }
.ss-type-icon.is-review { background: rgba(167, 139, 250, 0.16); color: #7c3aed; }
.ss-type-icon.is-practice { background: rgba(56, 189, 248, 0.16); color: #0284c7; }
.study-session-card .ss-topic {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-top: 0.02rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Cam takvim (#fff) beyaz yazı — oturum kartlarında koyu metin zorla */
#student-panel .s-bento-calendar .study-day-panel {
    color: #0f172a !important;
}
#student-panel .s-bento-calendar .study-session-card {
    color: #0f172a !important;
    -webkit-text-fill-color: currentColor;
}
#student-panel .s-bento-calendar .study-session-card .ss-slot {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 0.62rem !important;
}
#student-panel .s-bento-calendar .study-session-card .ss-type {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 0.78rem !important;
}
#student-panel .s-bento-calendar .study-session-card .ss-topic {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-size: 0.7rem !important;
}
#student-panel .s-bento-calendar .study-day-panel-head .sdp-title {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
#student-panel .s-bento-calendar .study-day-panel-head .sdp-meta {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}
.study-day-empty {
    flex: 1;
    min-height: 6rem;
    display: grid;
    place-items: center;
    text-align: center;
    color: #94a3b8;
    font-size: clamp(0.65rem, 3.5cqi, 0.78rem);
    font-weight: 700;
    padding: 1rem;
}
.study-plan-empty-state {
    grid-column: 1 / -1;
    min-height: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
}
.study-plan-empty-state i { font-size: 1.75rem; color: #94a3b8; }
.study-plan-empty-state p { font-size: 0.7rem; color: #64748b; font-weight: 600; line-height: 1.45; max-width: 18rem; }
.daily-streak-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.92) 0%, rgba(15, 23, 42, 0.88) 55%, rgba(49, 46, 129, 0.75) 100%);
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 0.85rem;
    padding: 0.4rem 0.7rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 20px rgba(79, 70, 229, 0.15);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.daily-streak-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 146, 60, 0.55);
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.5),
        0 0 22px rgba(249, 115, 22, 0.22);
}
.daily-streak-btn .streak-flame {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.95)) drop-shadow(0 0 12px rgba(249, 115, 22, 0.65));
}
.daily-streak-btn .streak-count {
    font-size: 0.8rem;
    font-weight: 900;
    color: #e2e8f0;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.streak-week-dot {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1.5px solid rgba(71, 85, 105, 0.7);
    background: rgba(15, 23, 42, 0.85);
    color: #64748b;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.streak-week-dot.is-active {
    background: linear-gradient(145deg, #fb923c, #ea580c);
    border-color: #fdba74;
    color: #fff;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.55), 0 4px 0 rgba(154, 52, 18, 0.55);
    transform: translateY(-1px);
}
.streak-week-dot.is-today {
    outline: 2px solid rgba(129, 140, 248, 0.7);
    outline-offset: 2px;
}

/* —— Günlük Seri — RPG streak modal —— */
@keyframes streak-badge-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(251,146,60,0.55)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 22px rgba(251,146,60,0.95)); transform: scale(1.04); }
}
@keyframes streak-bar-shine {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(230%); }
}
@keyframes streak-island-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
#daily-streak-modal {
    padding: 1rem !important;
}
#daily-streak-modal .streak-rpg-shell {
    width: min(100%, 400px);
    max-height: min(90vh, 760px);
    border-radius: 1.5rem;
    background:
        radial-gradient(ellipse at 50% -5%, rgba(249,115,22,0.16), transparent 48%),
        radial-gradient(ellipse at 80% 80%, rgba(79,70,229,0.18), transparent 45%),
        linear-gradient(180deg, #0f172a 0%, #0b1020 55%, #1e1b4b 100%);
    border: 1px solid rgba(129,140,248,0.28);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 28px 70px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.streak-rpg-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem 0.5rem;
}
.streak-rpg-head h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e2e8f0;
    text-shadow: 0 0 14px rgba(249,115,22,0.35), 0 2px 0 rgba(0,0,0,0.5);
}
.streak-rpg-head p {
    margin: 0.15rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
}
.streak-rpg-close {
    border: 1px solid rgba(100,116,139,0.35);
    background: rgba(15,23,42,0.65);
    color: #94a3b8;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    cursor: pointer;
}
.streak-rpg-close:hover { color: #fff; border-color: rgba(251,146,60,0.5); }
.streak-rpg-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 1rem 1.2rem;
    scrollbar-width: thin;
}
.streak-badge-hero {
    position: relative;
    text-align: center;
    padding: 0.75rem 0.5rem 1rem;
    margin-bottom: 0.35rem;
}
.streak-badge-glow {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 9rem;
    height: 9rem;
    margin-left: -4.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,146,60,0.55), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}
.streak-badge {
    position: relative;
    z-index: 1;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    background:
        radial-gradient(circle at 35% 28%, #fed7aa, #fb923c 42%, #9a3412 88%);
    border: 3px solid rgba(254,215,170,0.65);
    box-shadow:
        0 0 0 4px rgba(30,27,75,0.85),
        0 12px 28px rgba(0,0,0,0.45),
        0 0 32px rgba(249,115,22,0.45);
    animation: streak-badge-pulse 2.8s ease-in-out infinite;
}
.streak-badge-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff7ed;
    text-shadow: 0 0 18px rgba(251,146,60,0.55), 0 2px 0 rgba(0,0,0,0.55);
}
.streak-badge-sub {
    position: relative;
    z-index: 1;
    margin: 0.25rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c7d2fe;
}
.streak-xp-wrap {
    margin: 0.35rem 0 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1.1rem;
    background: rgba(15,23,42,0.65);
    border: 1px solid rgba(99,102,241,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.streak-xp-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.45rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #e2e8f0;
}
.streak-xp-meta strong {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    color: #fdba74;
    text-shadow: 0 0 10px rgba(251,146,60,0.55);
}
.streak-xp-bar {
    position: relative;
    height: 0.95rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 14px rgba(249,115,22,0.15);
}
.streak-xp-fill {
    height: 100%;
    border-radius: inherit;
    min-width: 0.35rem;
    background: linear-gradient(90deg, #c2410c, #f97316 40%, #fdba74 75%, #fef3c7);
    box-shadow: 0 0 16px rgba(249,115,22,0.75), inset 0 0 4px rgba(255,255,255,0.45);
    position: relative;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.streak-xp-fill::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: streak-bar-shine 2.2s ease-in-out infinite;
}
.streak-islands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.streak-island {
    position: relative;
    border-radius: 1.15rem;
    padding: 0.95rem 0.75rem 0.85rem;
    text-align: center;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.1);
    opacity: 0;
    transform: translateY(14px);
}
#daily-streak-modal.is-open .streak-island {
    animation: streak-island-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.streak-island.is-current {
    --s-glow: rgba(249,115,22,0.5);
    background: linear-gradient(160deg, rgba(249,115,22,0.28), rgba(30,27,75,0.75));
    border-color: rgba(251,146,60,0.45);
    animation-delay: 60ms;
}
.streak-island.is-record {
    --s-glow: rgba(129,140,248,0.5);
    background: linear-gradient(160deg, rgba(99,102,241,0.28), rgba(15,23,42,0.8));
    border-color: rgba(165,180,252,0.4);
    animation-delay: 140ms;
}
.streak-island::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--s-glow), transparent 65%);
    opacity: 0.55;
    pointer-events: none;
}
.streak-island-lbl {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.streak-island.is-current .streak-island-lbl { color: #fdba74; text-shadow: 0 0 10px rgba(249,115,22,0.5); }
.streak-island.is-record .streak-island-lbl { color: #a5b4fc; text-shadow: 0 0 10px rgba(99,102,241,0.5); }
.streak-island-val {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.85rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    text-shadow: 0 0 16px rgba(255,255,255,0.2), 0 3px 0 rgba(0,0,0,0.45);
}
.streak-island-sub {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0.25rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.streak-week-panel {
    border-radius: 1.15rem;
    padding: 0.9rem 0.85rem 1rem;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(71,85,105,0.45);
    margin-bottom: 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.streak-week-lbl {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fb923c;
    text-shadow: 0 0 10px rgba(249,115,22,0.35);
    margin-bottom: 0.7rem;
}
.streak-week-row {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}
.streak-hint {
    margin: 0;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: #cbd5e1;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    background: rgba(30,27,75,0.45);
    border: 1px solid rgba(99,102,241,0.25);
}

/* —— Öğrenci Profil Menüsü — glass bento —— */
#s-profile-dropdown.s-profile-menu {
    width: min(20rem, calc(100vw - 1.25rem));
    background: linear-gradient(165deg, rgba(15,23,42,0.94) 0%, rgba(30,27,75,0.9) 55%, rgba(15,23,42,0.96) 100%);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 1.35rem;
    box-shadow:
        0 24px 60px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #e2e8f0;
    overflow: hidden;
    z-index: 10060;
}
.s-profile-menu-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(45,212,191,0.22), transparent 55%),
        linear-gradient(135deg, rgba(15,118,110,0.35), rgba(30,27,75,0.5));
    border-bottom: 1px solid rgba(148,163,184,0.15);
}
.s-profile-menu-hero img,
.s-profile-menu-hero .s-profile-hero-fallback {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
    object-fit: cover;
}
.s-profile-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #0d9488, #115e59);
}
.s-profile-menu-hero h4 {
    margin: 0;
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #f8fafc;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.s-profile-menu-hero p {
    margin: 0.15rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    word-break: break-all;
}
.s-profile-menu-body {
    padding: 0.85rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.s-profile-islands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.s-profile-islands .s-profile-island {
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.s-profile-league {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-radius: 1rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    background: linear-gradient(165deg, rgba(13, 148, 128, 0.28), rgba(15, 23, 42, 0.78));
    cursor: pointer;
    color: #fff;
}
.s-profile-league-gauge {
    position: relative;
    width: 2.55rem;
    height: 2.55rem;
    flex-shrink: 0;
}
.s-profile-league-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.s-profile-league-gauge span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.s-profile-league-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
.s-profile-league-copy #st-league-name-preview {
    font-size: 0.72rem;
    font-weight: 900;
    color: #5eead4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.s-profile-league-copy #st-xp-txt {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
}
.s-profile-league-lv {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.12rem;
    padding: 0.08rem 0.4rem;
    border-radius: 0.4rem;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 0.62rem;
    font-weight: 900;
    color: #fff;
}
.s-profile-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.28));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}
.s-profile-island {
    position: relative;
    border-radius: 0.95rem;
    padding: 0.7rem 0.45rem 0.65rem;
    text-align: center;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.s-profile-island::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--pi-glow), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}
.s-profile-island.is-lvl { --pi-glow: rgba(45,212,191,0.45); background: linear-gradient(165deg, rgba(13,148,128,0.28), rgba(15,23,42,0.75)); border-color: rgba(45,212,191,0.3); }
.s-profile-island.is-gp { --pi-glow: rgba(251,191,36,0.45); background: linear-gradient(165deg, rgba(217,119,6,0.28), rgba(15,23,42,0.75)); border-color: rgba(251,191,36,0.3); }
.s-profile-island.is-tasks { --pi-glow: rgba(52,211,153,0.4); background: linear-gradient(165deg, rgba(16,185,129,0.22), rgba(15,23,42,0.75)); border-color: rgba(52,211,153,0.28); }
.s-profile-island.is-hw { --pi-glow: rgba(167,139,250,0.45); background: linear-gradient(165deg, rgba(124,58,237,0.25), rgba(15,23,42,0.75)); border-color: rgba(167,139,250,0.3); }
.s-profile-island-val {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 12px rgba(255,255,255,0.15), 0 2px 0 rgba(0,0,0,0.4);
    line-height: 1.1;
}
.s-profile-island-lbl {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0.2rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.s-profile-section {
    border-radius: 1rem;
    padding: 0.8rem 0.85rem;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(71,85,105,0.45);
}
.s-profile-section-title {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.45rem;
}
.s-profile-username-info {
    margin: 0 0 0.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #cbd5e1;
    line-height: 1.35;
}
.s-profile-username-info strong { color: #5eead4; }
.s-profile-pending {
    display: none;
    margin: 0 0 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.65rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fde68a;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(251,191,36,0.35);
    line-height: 1.3;
}
.s-profile-pending.is-visible { display: block; }
.s-profile-req-input {
    width: 100%;
    border: 1px solid rgba(71,85,105,0.7);
    background: rgba(2,6,23,0.55);
    color: #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    outline: none;
    margin-bottom: 0.5rem;
}
.s-profile-req-input::placeholder { color: #64748b; }
.s-profile-req-input:focus { border-color: rgba(45,212,191,0.55); }
.s-profile-btn {
    width: 100%;
    border: none;
    border-radius: 0.8rem;
    padding: 0.65rem 0.75rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.s-profile-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.s-profile-btn.is-teal {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #ecfdf5;
    box-shadow: 0 6px 16px rgba(13,148,128,0.35);
}
.s-profile-btn.is-indigo {
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    color: #e0e7ff;
    box-shadow: 0 6px 16px rgba(79,70,229,0.35);
}
.s-profile-btn.is-glass {
    background: rgba(51,65,85,0.55);
    color: #e2e8f0;
    border: 1px solid rgba(148,163,184,0.25);
}
.s-profile-btn.is-rose {
    background: linear-gradient(135deg, rgba(225,29,72,0.25), rgba(127,29,29,0.45));
    color: #fecdd3;
    border: 1px solid rgba(251,113,133,0.45);
    box-shadow: 0 4px 14px rgba(225,29,72,0.2);
}
.s-profile-btn.is-rose:hover { background: linear-gradient(135deg, rgba(225,29,72,0.4), rgba(153,27,27,0.55)); color: #fff; }
.s-profile-btn.is-danger-delete {
    width: 100%;
    background: linear-gradient(135deg, #be123c, #9f1239);
    color: #fff;
    border: 1px solid rgba(251, 113, 133, 0.55);
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(190, 18, 60, 0.35);
}
.s-profile-btn.is-danger-delete:hover {
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: #fff;
    filter: brightness(1.05);
}
.s-profile-danger-zone {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(244, 63, 94, 0.35);
}
#account-deletion-modal .adm-warn {
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(251, 113, 133, 0.4);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    color: #fecaca;
    font-size: 0.78rem;
    line-height: 1.45;
}
#account-suspended-screen {
    background: radial-gradient(ellipse at top, #3f1d1d 0%, #0f172a 55%, #020617 100%);
}
#account-suspended-screen .as-card {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(248, 113, 113, 0.35);
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}
.sa-deleted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #475569;
    color: #e2e8f0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.sa-pending-del-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    font-size: 0.65rem;
    font-weight: 800;
}
.sa-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.sa-tab-btn {
    padding: 0.55rem 1rem;
    border-radius: 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--sa-border, rgba(148,163,184,0.22));
    background: var(--sa-card-soft, #3c4450);
    color: var(--sa-muted, #a8b3c2);
    transition: 0.15s ease;
}
.sa-tab-btn.is-active {
    background: #4b5563;
    color: #f8fafc;
    border-color: #94a3b8;
}
.sa-tab-btn:hover { filter: brightness(1.08); }
.sa-purge-btn {
    color: #f87171 !important;
    background: rgba(127, 29, 29, 0.35) !important;
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 0.5rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 800;
}
.sa-purge-btn:hover { background: rgba(185, 28, 28, 0.55) !important; color: #fff !important; }
.s-profile-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.6rem;
    border-radius: 0.7rem;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(129,140,248,0.25);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c7d2fe;
    line-height: 1.35;
}
.s-profile-hint i { margin-top: 0.1rem; color: #a5b4fc; flex-shrink: 0; }
.s-profile-photo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

/* —— Bugün Nasıl Hissediyorum? — reel + check-in lab —— */
@keyframes mood-fade-cycle {
    0%   { opacity: 0; transform: translateY(12px) scale(0.88); }
    6%   { opacity: 1; transform: translateY(0) scale(1); }
    22%  { opacity: 1; transform: translateY(0) scale(1); }
    28%  { opacity: 0; transform: translateY(-10px) scale(0.92); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.92); }
}
.mood-emoji-reel {
    position: relative;
    display: block;
    width: 1.35em;
    height: 1.2em;
    margin-top: 0.15rem;
    font-size: clamp(1.85rem, 12cqw, 3.1rem);
    line-height: 1;
    overflow: hidden;
}
.mood-emoji-reel .mood-emoji-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    animation: mood-fade-cycle 10s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.mood-emoji-reel .mood-emoji-slide:nth-child(1) { animation-delay: 0s; }
.mood-emoji-reel .mood-emoji-slide:nth-child(2) { animation-delay: 2.5s; }
.mood-emoji-reel .mood-emoji-slide:nth-child(3) { animation-delay: 5s; }
.mood-emoji-reel .mood-emoji-slide:nth-child(4) { animation-delay: 7.5s; }
.mood-emoji-reel.is-checked-in .mood-emoji-slide { animation: none; opacity: 0; }
.mood-emoji-reel.is-checked-in .mood-emoji-slide.is-today {
    opacity: 1;
    transform: none;
}
/* Bento quad: kayıt sonrası da JS ile dönmeye devam eder */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .mood-emoji-reel.is-checked-in .mood-emoji-slide {
    animation: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .mood-emoji-reel.is-checked-in .mood-emoji-slide.is-today {
    opacity: 0 !important;
}
.s-bento-metric.is-mood .s-bento-metric-value.mood-emoji-reel {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

#mood-panel-modal {
    z-index: 320 !important;
    align-items: center !important;
    justify-content: center !important;
    padding:
        max(4.5rem, calc(env(safe-area-inset-top, 0px) + 3.75rem))
        0.75rem
        max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.25rem))
        !important;
}
#mood-panel-modal .mood-lab-shell {
    width: min(100%, 560px);
    max-height: min(76vh, calc(100dvh - 10rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    margin-top: 0;
    border-radius: 1.5rem;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(236,72,153,0.18), transparent 45%),
        radial-gradient(ellipse at 90% 20%, rgba(168,85,247,0.16), transparent 42%),
        linear-gradient(165deg, rgba(15,23,42,0.96) 0%, rgba(30,27,75,0.92) 100%);
    border: 1px solid rgba(196,181,253,0.28);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e2e8f0;
}
.mood-lab-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem 0.65rem;
    border-bottom: 1px solid rgba(148,163,184,0.12);
}
.mood-lab-head h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f5d0fe;
    text-shadow: 0 0 14px rgba(236,72,153,0.35);
}
.mood-lab-head p {
    margin: 0.15rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #a5b4fc;
}
.mood-lab-close {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(15,23,42,0.55);
    color: #94a3b8;
    cursor: pointer;
}
.mood-lab-close:hover { color: #fff; border-color: rgba(244,114,182,0.5); }
.mood-lab-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    scrollbar-width: thin;
}
.mood-lab-block-title {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.mood-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
}
.mood-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.2rem;
    border-radius: 0.9rem;
    border: 1.5px solid rgba(71,85,105,0.65);
    background: rgba(15,23,42,0.55);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mood-pick-btn:hover { transform: translateY(-2px); border-color: rgba(244,114,182,0.45); }
.mood-pick-btn.is-active {
    border-color: rgba(244,114,182,0.75);
    background: linear-gradient(160deg, rgba(236,72,153,0.28), rgba(124,58,237,0.22));
    box-shadow: 0 0 16px rgba(236,72,153,0.25);
}
.mood-pick-btn .emo { font-size: 1.35rem; line-height: 1; }
.mood-pick-btn .lbl {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    line-height: 1.1;
}
.mood-pick-btn.is-active .lbl { color: #fbcfe8; }
.mood-pick-btn:disabled,
.mood-pick-btn.is-locked {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    transform: none !important;
}
.mood-pick-btn.is-active.is-locked,
.mood-pick-btn.is-active:disabled {
    opacity: 1;
    pointer-events: none;
}
.mood-lab-shell.is-mood-locked .mood-tag,
.mood-lab-shell.is-mood-locked .mood-weather-card,
.mood-lab-shell.is-mood-locked .mood-energy-track,
.mood-lab-shell.is-mood-locked .mood-lab-btn.is-save {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}
.mood-lab-locked-banner {
    display: none;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(16, 185, 129, 0.12);
    color: #a7f3d0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}
.mood-lab-shell.is-mood-locked .mood-lab-locked-banner { display: block; }
.mood-lab-locked-banner.hidden { display: none !important; }
.mood-lab-extra-banner {
    display: none;
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(129, 140, 248, 0.4);
    background: rgba(99, 102, 241, 0.14);
    text-align: center;
}
.mood-lab-extra-banner:not(.hidden) { display: block; }
.mood-lab-extra-banner p {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    color: #c7d2fe;
}
.mood-lab-extra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(165, 180, 252, 0.45);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(79, 70, 229, 0.28));
    color: #e0e7ff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}
.mood-lab-extra-btn:hover {
    border-color: rgba(199, 210, 254, 0.65);
    color: #fff;
}

.mood-energy-wrap {
    border-radius: 1.05rem;
    padding: 0.85rem 0.9rem;
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(99,102,241,0.25);
}
.mood-energy-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.55rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #e2e8f0;
}
.mood-energy-meta strong {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--mood-energy-color, #34d399);
    text-shadow: 0 0 12px color-mix(in srgb, var(--mood-energy-color, #34d399) 55%, transparent);
}
.mood-energy-track {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.85rem;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(90deg,
        #f43f5e 0%,
        #f59e0b 35%,
        #34d399 70%,
        #22d3ee 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 14px rgba(52,211,153,0.15);
}
.mood-energy-track::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mood-energy-color, #34d399);
    box-shadow: 0 0 12px var(--mood-energy-color, #34d399);
    cursor: pointer;
}
.mood-energy-track::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mood-energy-color, #34d399);
    box-shadow: 0 0 12px var(--mood-energy-color, #34d399);
    cursor: pointer;
}

.mood-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.mood-tag {
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(30,41,59,0.55);
    color: #cbd5e1;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mood-tag:hover { transform: scale(1.04); border-color: rgba(196,181,253,0.5); }
.mood-tag.is-on {
    background: linear-gradient(135deg, rgba(168,85,247,0.35), rgba(236,72,153,0.28));
    border-color: rgba(244,114,182,0.65);
    color: #fdf4ff;
    box-shadow: 0 0 12px rgba(168,85,247,0.25);
}

.mood-weather-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
@media (max-width: 520px) {
    .mood-weather-grid { grid-template-columns: repeat(2, 1fr); }
}
.mood-weather-card {
    border-radius: 0.95rem;
    padding: 0.65rem 0.35rem;
    text-align: center;
    border: 1.5px solid rgba(71,85,105,0.55);
    background: rgba(15,23,42,0.5);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mood-weather-card:hover { transform: translateY(-2px); }
.mood-weather-card.is-on {
    border-color: rgba(125,211,252,0.7);
    background: linear-gradient(160deg, rgba(14,165,233,0.25), rgba(99,102,241,0.2));
    box-shadow: 0 0 16px rgba(56,189,248,0.22);
}
.mood-weather-card .ico { font-size: 1.35rem; display: block; margin-bottom: 0.2rem; }
.mood-weather-card .ttl {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: #cbd5e1;
    line-height: 1.15;
}

.mood-ai-aid {
    display: none;
    border-radius: 1.05rem;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(15,23,42,0.7));
    border: 1px solid rgba(45,212,191,0.35);
    box-shadow: 0 0 20px rgba(45,212,191,0.12);
}
.mood-ai-aid.is-visible { display: block; }
.mood-ai-aid-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5eead4;
    margin-bottom: 0.4rem;
}
.mood-ai-aid-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(94, 234, 212, 0.45);
    flex-shrink: 0;
}
.mood-ai-aid.is-loading p {
    opacity: 0.75;
    font-style: italic;
}
.mood-ai-aid p {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    color: #ccfbf1;
}

.mood-lab-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.35rem;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 0.55rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.98) 65%, rgba(15, 23, 42, 0));
}
.mood-lab-actions-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
@media (max-width: 420px) {
    .mood-lab-actions-secondary { grid-template-columns: 1fr; }
}
.mood-lab-btn {
    border: none;
    border-radius: 0.9rem;
    padding: 0.8rem 0.9rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}
.mood-lab-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.mood-lab-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
    pointer-events: none;
}
.mood-lab-btn.is-save {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #f5f3ff;
    box-shadow: 0 10px 24px rgba(99,102,241,0.45);
    border: 1px solid rgba(196,181,253,0.4);
    font-size: 1.02rem;
    letter-spacing: 0.02em;
}
.mood-lab-btn.is-advice {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ecfdf5;
    box-shadow: 0 8px 18px rgba(20,184,166,0.3);
    border: 1px solid rgba(94,234,212,0.35);
    font-size: 0.88rem;
}
.mood-lab-btn.is-sos {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    color: #fff7ed;
    box-shadow: 0 8px 20px rgba(234,88,12,0.4);
    border: 1px solid rgba(251,146,60,0.5);
    font-size: 0.88rem;
}

/* —— Okuma Dashboard (kitap detay modal) —— */
@keyframes rdash-float {
    0%, 100% { transform: translateY(0) rotateY(-12deg) rotateX(4deg); }
    50%      { transform: translateY(-12px) rotateY(-8deg) rotateX(2deg); }
}
@keyframes rdash-reward-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(251,191,36,0.45)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 18px rgba(251,191,36,0.95)); transform: scale(1.06); }
}
@keyframes rdash-bar-shine {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(220%); }
}
@keyframes rdash-reward-pop {
    0%   { opacity: 0; transform: scale(0.7) translateY(8px); }
    40%  { opacity: 1; transform: scale(1.12) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
#book-detail-modal {
    padding: 1rem !important;
}
#book-detail-modal .rdash-shell {
    width: min(100%, 440px);
    max-height: min(92vh, 880px);
    border-radius: 1.55rem;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(99,102,241,0.22), transparent 50%),
        radial-gradient(ellipse at 90% 30%, rgba(16,185,129,0.12), transparent 45%),
        linear-gradient(165deg, rgba(15,23,42,0.92) 0%, rgba(30,27,75,0.88) 100%);
    border: 1px solid rgba(165,180,252,0.28);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e2e8f0;
}
.rdash-head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.05rem 0.55rem;
}
.rdash-head h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #eef2ff;
    text-shadow: 0 0 14px rgba(129,140,248,0.35);
    line-height: 1.25;
}
.rdash-head p {
    margin: 0.2rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a5b4fc;
}
.rdash-head-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.rdash-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(15,23,42,0.5);
    color: #94a3b8;
    cursor: pointer;
}
.rdash-icon-btn:hover { color: #fff; }
.rdash-icon-btn.is-danger:hover { color: #fb7185; border-color: rgba(251,113,133,0.5); }
.rdash-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.35rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    scrollbar-width: thin;
}
.rdash-float-stage {
    perspective: 900px;
    display: flex;
    justify-content: center;
    padding: 0.35rem 0 0.5rem;
}
.rdash-book-3d {
    width: 7.2rem;
    height: 10.2rem;
    position: relative;
    transform-style: preserve-3d;
    animation: rdash-float 4.5s ease-in-out infinite;
    border-radius: 0.35rem 0.65rem 0.65rem 0.35rem;
    box-shadow:
        12px 18px 32px rgba(0,0,0,0.45),
        -2px 0 0 rgba(255,255,255,0.08),
        4px 0 0 rgba(0,0,0,0.25);
    overflow: hidden;
    background: linear-gradient(145deg, #4f46e5, #312e81);
}
.rdash-book-3d::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0.35rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(0,0,0,0.35));
    z-index: 2;
}
.rdash-book-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rdash-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: rgba(255,255,255,0.85);
    background: linear-gradient(160deg, #6366f1, #7c3aed 55%, #4c1d95);
}
.rdash-progress-island {
    border-radius: 1.15rem;
    padding: 0.9rem 0.95rem;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(99,102,241,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.rdash-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.55rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: #cbd5e1;
    font-size: 0.9rem;
}
.rdash-progress-pct {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #a5b4fc;
    text-shadow: 0 0 18px rgba(129,140,248,0.65), 0 2px 0 rgba(0,0,0,0.4);
    line-height: 1;
}
.rdash-bar {
    position: relative;
    height: 1.05rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), 0 0 16px rgba(99,102,241,0.18);
    margin-bottom: 0.7rem;
}
.rdash-bar-fill {
    height: 100%;
    border-radius: inherit;
    min-width: 0.35rem;
    background: linear-gradient(90deg, #4f46e5, #818cf8 40%, #34d399 78%, #a7f3d0);
    box-shadow: 0 0 18px rgba(129,140,248,0.7), inset 0 0 4px rgba(255,255,255,0.4);
    position: relative;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.rdash-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: rdash-bar-shine 2.4s ease-in-out infinite;
}
.rdash-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(51,65,85,0.8);
    outline: none;
    margin: 0.15rem 0 0.55rem;
}
.rdash-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #818cf8;
    box-shadow: 0 0 12px rgba(129,140,248,0.8);
    cursor: pointer;
}
.rdash-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #818cf8;
    box-shadow: 0 0 12px rgba(129,140,248,0.8);
    cursor: pointer;
}
.rdash-save-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.rdash-page-chip {
    flex: 1;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: #e0e7ff;
    background: rgba(67,56,202,0.25);
    border: 1px solid rgba(129,140,248,0.35);
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    text-align: center;
}
.rdash-save-btn {
    border: none;
    border-radius: 0.8rem;
    padding: 0.6rem 1rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ecfdf5;
    box-shadow: 0 6px 18px rgba(16,185,129,0.35);
}
.rdash-save-btn:hover { filter: brightness(1.08); }
.rdash-hint {
    margin: 0.45rem 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}
.rdash-duo {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.55rem;
}
@media (max-width: 380px) {
    .rdash-duo { grid-template-columns: 1fr; }
}
.rdash-island {
    border-radius: 1.1rem;
    padding: 0.85rem 0.8rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.rdash-island.is-timer {
    background: linear-gradient(160deg, rgba(14,165,233,0.22), rgba(15,23,42,0.75));
    border-color: rgba(56,189,248,0.35);
}
.rdash-island.is-reward {
    background: linear-gradient(160deg, rgba(245,158,11,0.25), rgba(15,23,42,0.78));
    border-color: rgba(251,191,36,0.4);
    text-align: center;
}
.rdash-island-lbl {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.4rem;
}
.rdash-island.is-timer .rdash-island-lbl { color: #7dd3fc; text-shadow: 0 0 10px rgba(56,189,248,0.4); }
.rdash-island.is-reward .rdash-island-lbl { color: #fcd34d; text-shadow: 0 0 10px rgba(251,191,36,0.45); }
.rdash-timer-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #e0f2fe;
    text-shadow: 0 0 16px rgba(56,189,248,0.65);
    line-height: 1.1;
    margin-bottom: 0.55rem;
}
.rdash-timer-display.is-running {
    color: #67e8f9;
    animation: rdash-reward-pulse 1.8s ease-in-out infinite;
}
.rdash-timer-btn {
    width: 100%;
    border: none;
    border-radius: 0.7rem;
    padding: 0.5rem 0.6rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #f0f9ff;
    box-shadow: 0 4px 14px rgba(14,165,233,0.35);
}
.rdash-timer-btn.is-stop {
    background: linear-gradient(135deg, #be123c, #e11d48);
    box-shadow: 0 4px 14px rgba(225,29,72,0.35);
}
.rdash-reward-vals {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}
.rdash-reward-gp, .rdash-reward-xp {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    letter-spacing: 0.04em;
    animation: rdash-reward-pulse 2.4s ease-in-out infinite;
}
.rdash-reward-gp {
    font-size: 1.25rem;
    color: #fde68a;
    text-shadow: 0 0 14px rgba(251,191,36,0.75);
}
.rdash-reward-xp {
    font-size: 0.85rem;
    color: #a5b4fc;
    text-shadow: 0 0 12px rgba(129,140,248,0.55);
}
.rdash-island.is-reward.is-earned .rdash-reward-vals {
    animation: rdash-reward-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.rdash-stats {
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    color: #c7d2fe;
    background: rgba(67,56,202,0.18);
    border: 1px solid rgba(129,140,248,0.28);
}
.rdash-section-lbl {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.45rem;
}
.rdash-log {
    max-height: 7rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.rdash-log-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(51,65,85,0.7);
    border-radius: 0.65rem;
    padding: 0.4rem 0.65rem;
}
.rdash-log-row strong { color: #e2e8f0; }

@media (max-width: 360px) {
    .s-profile-photo-row { grid-template-columns: 1fr; }
}

#s-avatar-photo {
    width: 2.25rem;
    height: 2.25rem;
}
#s-sidebar-avatar {
    width: 2.25rem;
    height: 2.25rem;
}

/* Dört modül 2×2 grid — dynamic island (bento override üstü, dosya sonu) */
#student-panel #s-home-quad.s-home-quad,
#student-panel #s-home-quad.s-bento-island-quad {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(10.5rem, auto) minmax(10.5rem, auto) !important;
    grid-template-areas:
        "reading mood"
        "gym exam" !important;
    gap: var(--bento-gap, 0.55rem) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}
#student-panel #s-home-quad > .s-bento-metric,
#student-panel #s-home-quad > .s-home-quad-cell {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: min(10.5rem, 48vw) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 1rem !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    text-align: left !important;
    gap: 0 !important;
    flex: none !important;
}
#student-panel #s-home-quad > .s-bento-metric.is-reading,
#student-panel #s-home-quad > [data-quad-cell="reading"] { grid-area: reading !important; }
#student-panel #s-home-quad > .s-bento-metric.is-gym,
#student-panel #s-home-quad > [data-quad-cell="gym"] { grid-area: gym !important; }
#student-panel #s-home-quad > .s-bento-metric.is-exam,
#student-panel #s-home-quad > [data-quad-cell="exam"] { grid-area: exam !important; }
#student-panel #s-home-quad > .s-bento-metric.is-mood,
#student-panel #s-home-quad > [data-quad-cell="mood"] { grid-area: mood !important; }
/* —— v7 quad kart sistemi —— */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card {
    position: relative;
    color: #fff;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-accent {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .is-theme-reading .s-quad-card-accent {
    background:
        radial-gradient(ellipse 90% 70% at 0% 0%, rgba(129, 140, 248, 0.38), transparent 52%),
        linear-gradient(152deg, rgba(15, 23, 42, 0.94) 0%, rgba(49, 46, 129, 0.82) 100%);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .is-theme-exam .s-quad-card-accent {
    background:
        radial-gradient(ellipse 85% 65% at 100% 0%, rgba(251, 146, 60, 0.38), transparent 50%),
        linear-gradient(152deg, rgba(67, 20, 7, 0.9) 0%, rgba(154, 52, 18, 0.78) 100%);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .is-theme-gym .s-quad-card-accent {
    background:
        radial-gradient(ellipse 80% 60% at 0% 100%, rgba(34, 211, 238, 0.32), transparent 55%),
        linear-gradient(152deg, rgba(8, 47, 73, 0.92) 0%, rgba(14, 116, 144, 0.78) 100%);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .is-theme-mood .s-quad-card-accent {
    background:
        radial-gradient(ellipse 85% 65% at 100% 0%, rgba(244, 114, 182, 0.38), transparent 50%),
        linear-gradient(152deg, rgba(88, 28, 67, 0.9) 0%, rgba(190, 24, 93, 0.76) 100%);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card > *:not(.s-quad-card-accent) {
    position: relative;
    z-index: 1;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-head {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.42rem 0.48rem 0.28rem;
    min-width: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-chip {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.42rem;
    font-size: 0.58rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-head-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-kicker {
    font-size: 0.48rem !important;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.82;
    line-height: 1.1;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-title {
    font-size: clamp(0.68rem, 4cqi, 0.88rem) !important;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.01em;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-badge {
    flex-shrink: 0;
    font-size: 0.46rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-badge.is-glow {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 12px rgba(165, 243, 252, 0.25);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0.48rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-foot {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    flex-wrap: wrap;
    padding: 0.22rem 0.48rem 0.4rem;
    min-width: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-foot-chip {
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-foot-chip.is-empty {
    opacity: 0.9;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .is-theme-reading.is-has-book .s-quad-foot-chip:not(.is-empty) {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #312e81;
    border-color: rgba(255, 255, 255, 0.35);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-foot-note {
    font-size: 0.48rem !important;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.88;
    margin: 0;
    padding: 0 0.48rem 0.38rem;
}
/* Kitap */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-reading-body {
    display: flex;
    gap: 0.38rem;
    align-items: stretch;
    min-height: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-reading-body .s-bento-cover-frame {
    width: 2.5rem !important;
    height: 3.15rem !important;
    flex-shrink: 0;
    align-self: center;
    border-radius: 0.32rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-reading-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-book-title {
    font-size: 0.62rem !important;
    font-weight: 900;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-book-sub {
    font-size: 0.5rem !important;
    line-height: 1.2;
    opacity: 0.86;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-progress-wrap {
    margin-top: 0.08rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-progress-track {
    height: 0.3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #818cf8, #c4b5fd);
    min-width: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    font-size: 0.48rem !important;
    font-weight: 700;
    margin-top: 0.1rem;
    opacity: 0.92;
}
/* LGS — hero ring + meta */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-body {
    display: flex;
    gap: 0.38rem;
    align-items: center;
    min-height: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-hero-ring {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    padding: 0.1rem;
    box-sizing: border-box;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-hero-value {
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    font-size: clamp(0.72rem, 16cqi, 0.96rem) !important;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    margin: 0 !important;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    display: block;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-hero-unit {
    font-size: 0.3rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 0.06rem;
    line-height: 1;
    display: block;
    text-align: center;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-ring {
    flex-shrink: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-ring .s-quad-hero-value {
    font-size: clamp(0.64rem, 14.5cqi, 0.84rem) !important;
    letter-spacing: -0.03em;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-ring.is-score-lg .s-quad-hero-value {
    font-size: clamp(0.56rem, 12.5cqi, 0.72rem) !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-ring .s-quad-hero-unit {
    font-size: 0.28rem;
    letter-spacing: 0.18em;
    margin-top: 0.05rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-meta,
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-name {
    font-size: 0.58rem !important;
    font-weight: 800;
    line-height: 1.15;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-date {
    font-size: 0.48rem !important;
    opacity: 0.8;
    line-height: 1.1;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mini-gauge {
    position: relative;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
    margin-top: 0.12rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mini-gauge-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fdba74, #f97316);
    min-width: 0;
    pointer-events: none;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mini-gauge-marker {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: #fff;
    border-radius: 1px;
    transform: translateX(-50%);
    left: 0;
    z-index: 2;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem;
    margin-top: 0.16rem;
    width: 100%;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.22rem 0.06rem;
    border-radius: 0.38rem;
    min-width: 0;
    min-height: 1.15rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat-n {
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    font-size: clamp(0.68rem, 16cqi, 0.88rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat-l {
    display: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-name-row {
    gap: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-name {
    font-size: clamp(0.46rem, 10.5cqi, 0.58rem) !important;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat.is-ok {
    background: rgba(34, 197, 94, 0.28);
    border-color: rgba(74, 222, 128, 0.45);
    color: #ecfccb;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat.is-ok .s-quad-stat-n { color: #bbf7d0; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat.is-bad {
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fee2e2;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat.is-bad .s-quad-stat-n { color: #fecaca; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat.is-neutral {
    background: rgba(148, 163, 184, 0.22);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat.is-neutral .s-quad-stat-n { color: #f8fafc; }
/* Oyunlar — küçük hücre, ikon şeridi */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.22rem;
    min-height: 0;
    flex: 1 1 auto;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-icons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.18rem;
    flex: 1 1 auto;
    min-height: 0;
}
@keyframes s-quad-gym-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.08); }
}
@keyframes s-quad-gym-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico {
    flex: 1 1 0;
    min-width: 0;
    max-width: 2.25rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.48rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: s-quad-gym-float 2.5s ease-in-out infinite, s-quad-gym-glow 2.5s ease-in-out infinite;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-1 { animation-delay: 0s, 0s; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-2 { animation-delay: 0.35s, 0.35s; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-3 { animation-delay: 0.7s, 0.7s; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-4 { animation-delay: 1.05s, 1.05s; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-1 i { color: #5eead4; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-2 i { color: #fde68a; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-3 i { color: #fda4af; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico.is-4 i { color: #c4b5fd; }
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    flex-shrink: 0;
    min-width: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-play-btn {
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.18rem 0.42rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-hint {
    font-size: 0.42rem;
    font-weight: 700;
    opacity: 0.88;
    line-height: 1.1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* LGS — geniş hücre */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-exam-body{
    align-items: center;
    gap: 0.42rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-exam-meta{
    gap: 0.08rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-exam-stats-grid{
    gap: 0.16rem;
    margin-top: 0.12rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-stat{
    padding: 0.2rem 0.06rem;
    min-height: 1.1rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-stat-n{
    font-size: clamp(0.64rem, 15cqi, 0.82rem);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-detail {
    font-size: 0.44rem !important;
    font-weight: 800;
    line-height: 1.15;
    opacity: 0.92;
    margin-top: 0.08rem;
    text-align: left;
    display: block;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
/* Oyunlar — eski grid (kaldırıldı) */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-grid,
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-tile,
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-cta {
    display: none !important;
}
/* Duygu — eski balon kaldırıldı */
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji-wrap {
    display: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card::before {
    display: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric-value {
    font-size: inherit !important;
}
#student-panel #s-home-quad > .s-bento-metric.is-reading,
#student-panel #s-home-quad > .s-bento-metric.is-exam,
#student-panel #s-home-quad > .s-bento-metric.is-gym,
#student-panel #s-home-quad > .s-bento-metric.is-mood {
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* Asimetrik boyut: Kitap + LGS büyük, Duygu + Oyun küçük */
#student-panel #s-home-quad {
    --s-quad-large: 1.38fr;
    --s-quad-small: 1fr;
}
#student-panel #s-home-quad > .s-bento-metric.is-reading,
#student-panel #s-home-quad > .s-bento-metric.is-exam {
    min-height: min(10.5rem, 48vw) !important;
}
#student-panel #s-home-quad > .s-bento-metric.is-mood,
#student-panel #s-home-quad > .s-bento-metric.is-gym {
    min-height: min(10.5rem, 48vw) !important;
    align-self: stretch !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#student-panel :is(#s-home-quad > .s-bento-metric.is-gym, .s-bento-mesh.is-tetris-packed > [data-bento-pack].is-gym){
    min-height: min(10.5rem, 48vw) !important;
    max-height: none !important;
    padding: 0 !important;
    align-self: stretch !important;
}
#student-panel :is(#s-home-quad > .s-bento-metric.is-exam.s-quad-card, .s-bento-mesh.is-tetris-packed > [data-bento-pack].is-exam){
    min-height: min(10.5rem, 48vw) !important;
    max-height: none !important;
    padding: 0 !important;
    align-self: stretch !important;
}
/* === Quad responsive — mobil / tablet / masaüstü === */
#student-panel #s-home-quad.s-home-quad,
#student-panel #s-home-quad.s-bento-island-quad {
    align-items: stretch !important;
}
#student-panel :is(#s-home-quad > .s-quad-card, .s-bento-mesh.is-tetris-packed > [data-bento-pack].s-quad-card){
    container-type: inline-size;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-head {
    flex-wrap: nowrap;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.38rem 0.42rem 0.22rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-head-compact {
    padding-right: 0.38rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-head-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-title {
    font-size: clamp(0.54rem, 14cqi, 0.88rem) !important;
    font-weight: 900;
    line-height: 1.12;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: unset;
    max-width: 100%;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-kicker {
    font-size: clamp(0.42rem, 10cqi, 0.58rem) !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-badge {
    display: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-inline-badge {
    display: inline-block;
    font-size: clamp(0.38rem, 9cqi, 0.48rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.1rem 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-name-row {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
    flex-wrap: wrap;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-name-row .s-quad-inline-badge {
    flex-shrink: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-name-row .s-quad-exam-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(0.5rem, 12cqi, 0.62rem) !important;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.28rem;
    padding-top: 0.06rem;
    flex: 1 1 auto;
    min-height: 0;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    padding-top: 0;
    min-height: 2rem;
    transform: translateY(-0.55rem);
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji.mood-emoji-reel {
    flex-shrink: 0;
    font-size: clamp(1.75rem, 40cqi, 2.45rem) !important;
    line-height: 1 !important;
    width: 2.4em !important;
    height: 1.35em !important;
    max-width: 100%;
    margin: 0 auto !important;
    text-align: center;
    overflow: hidden !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji .mood-emoji-slide {
    justify-content: center;
    align-items: center;
    animation: none !important;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji .mood-emoji-slide:first-child {
    opacity: 1;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .mood-emoji-reel.is-checked-in .mood-emoji-slide {
    animation: none !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .mood-emoji-reel.is-checked-in .mood-emoji-slide.is-today {
    opacity: 0 !important;
    transform: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji-wrap {
    display: none !important;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-text {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-label {
    font-size: clamp(0.48rem, 11cqi, 0.62rem) !important;
    font-weight: 800;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-sub {
    font-size: clamp(0.44rem, 10cqi, 0.56rem) !important;
    line-height: 1.2;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#student-panel #s-home-quad > .s-bento-metric.is-mood .s-quad-kicker,
#student-panel #s-home-quad > .s-bento-metric.is-gym .s-quad-kicker {
    letter-spacing: 0.08em;
}
@container (max-width: 10.5rem) {
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-label {
        display: none;
    }
}
@media (max-width: 639px) {
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-card-head {
        padding: 0.34rem 0.36rem 0.18rem;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-chip {
        width: 1.15rem;
        height: 1.15rem;
        font-size: 0.5rem;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-gym .s-quad-gym-hint{
        font-size: 0.4rem;
        max-width: 52%;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-exam-detail{
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
}
@media (min-width: 640px) {
    #student-panel .s-bento-mesh:not(.is-packed) #s-home-quad {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) > #s-home-quad {
        max-width: var(--pw, 100%) !important;
        width: var(--pw, 100%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-title {
        font-size: 0.76rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-kicker {
        font-size: 0.52rem !important;
    }
}
@media (min-width: 900px) {
    #student-panel #s-home-quad {
        max-width: 100%;
        gap: 0.65rem !important;
    }
    #student-panel #s-home-quad > .s-bento-metric.is-reading,
#student-panel #s-home-quad > .s-bento-metric.is-exam,
#student-panel #s-home-quad > .s-bento-metric.is-gym,
#student-panel #s-home-quad > .s-bento-metric.is-mood {
        min-height: 11.25rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-title {
        font-size: 0.88rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-kicker {
        font-size: 0.58rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-book-title {
        font-size: 0.74rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-book-sub,
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-sub,
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-exam-detail {
        font-size: 0.56rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-hero-value {
        font-size: clamp(0.72rem, 15cqi, 0.94rem) !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-hero-ring.is-score-lg .s-quad-hero-value{
        font-size: clamp(0.6rem, 13cqi, 0.78rem) !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-hero-ring{
        width: 3.1rem;
        height: 3.1rem;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji-bottom {
        min-height: 1.85rem;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-emoji {
        font-size: 1.75rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-mood-label {
        font-size: 0.72rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-play-btn {
        font-size: 0.68rem;
        padding: 0.22rem 0.48rem;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat-n {
        font-size: 0.78rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-stat-l {
        font-size: 0.52rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-gym-ico {
        max-width: 2.45rem;
        font-size: 0.78rem;
    }
}
@media (min-width: 1200px) {
    #student-panel #s-home-quad {
        max-width: min(100%, 44rem);
    }
    #student-panel #s-home-quad > .s-bento-metric.is-reading,
#student-panel #s-home-quad > .s-bento-metric.is-exam,
#student-panel #s-home-quad > .s-bento-metric.is-gym,
#student-panel #s-home-quad > .s-bento-metric.is-mood {
        min-height: 12rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-title {
        font-size: 0.95rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-quad-hero-value {
        font-size: 1.38rem !important;
    }
    #student-panel :is(#s-home-quad, .s-bento-mesh.is-tetris-packed) .s-bento-metric.is-exam .s-quad-hero-value{
        font-size: 1.55rem !important;
    }
}
@media (min-width: 1600px) {
    #student-panel #s-home-quad {
        max-width: 46rem;
    }
}

/* Tetris — quad kartları mesh içinde v7 görünümü (genişlik --pw ile) */
#student-panel .s-bento-mesh.is-tetris-packed > [data-bento-pack].s-quad-card {
    flex: none !important;
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 1rem !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    text-align: left !important;
    gap: 0 !important;
    min-height: 8.5rem !important;
    align-self: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    justify-content: flex-start !important;
}
#student-panel .s-bento-mesh.is-tetris-packed > [data-bento-pack].s-quad-card::before {
    display: none !important;
}
/* Tetris (is-packed) — quad hücreleri mesh çocuğu olarak konumlanır */
.s-bento-mesh.is-packed.is-tetris-packed > [data-bento-pack].is-tetris-cell {
    flex: none !important;
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
    min-width: 0 !important;
    min-height: 8.5rem !important;
}
#student-panel .s-bento-mesh.is-packed > [data-bento-pack].is-reading,
#student-panel .s-bento-mesh.is-packed > [data-bento-pack].is-exam,
#student-panel .s-bento-mesh.is-packed > [data-bento-pack].is-gym,
#student-panel .s-bento-mesh.is-packed > [data-bento-pack].is-mood {
    flex: none !important;
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
    min-width: 0 !important;
    align-self: auto !important;
}

/* Günlük ilk giriş bildirim pop-up + zorunlu duygu çekimi */
.sen-overlay {
    position: fixed;
    inset: 0;
    z-index: 275;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(15, 23, 42, 0.92);
}
.sen-overlay.hidden { display: none !important; }

.sen-card {
    width: 100%;
    max-width: 26rem;
    max-height: min(90dvh, 90vh);
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.1rem 1.15rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    box-sizing: border-box;
}
.sen-card > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.sen-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sen-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.sen-counter {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: #059669;
    letter-spacing: 0.02em;
}

.sen-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.35;
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
}

.sen-meta {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: left;
}

.sen-body-wrap {
    flex: 1 1 auto;
    min-height: 3.5rem;
    max-height: min(38vh, 14rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.6rem 0;
}

.sen-body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
    text-align: left;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
}

.sen-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.sen-btn-primary {
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 0.85rem;
    background: #059669;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
.sen-btn-primary:active { background: #047857; }

.sen-actions-row {
    display: flex;
    gap: 0.45rem;
}

.sen-btn-ghost {
    flex: 1;
    padding: 0.65rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.sen-btn-ghost:active { background: #f1f5f9; color: #334155; }

@media (min-width: 640px) {
    .sen-overlay {
        align-items: center;
        padding: 1rem;
    }
    .sen-card {
        border-radius: 1.15rem;
        padding: 1.25rem;
        max-height: min(85vh, 36rem);
    }
}

.student-entry-notif-ico {
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    color: #047857;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2);
}
.student-entry-notif-ico.is-msg { background: linear-gradient(145deg, #eff6ff, #dbeafe); color: #1d4ed8; }
.student-entry-notif-ico.is-announce { background: linear-gradient(145deg, #ecfdf5, #d1fae5); color: #047857; }
.student-entry-notif-ico.is-test { background: linear-gradient(145deg, #f5f3ff, #ede9fe); color: #6d28d9; }
.student-entry-notif-ico.is-homework { background: linear-gradient(145deg, #fff7ed, #ffedd5); color: #c2410c; }
.student-entry-notif-ico.is-checklist { background: linear-gradient(145deg, #fefce8, #fef9c3); color: #a16207; }
.student-entry-notif-ico.is-topic { background: linear-gradient(145deg, #f0fdfa, #ccfbf1); color: #0f766e; }
.student-entry-notif-ico.is-poll { background: linear-gradient(145deg, #fdf4ff, #fae8ff); color: #a21caf; }
.student-entry-notif-ico.is-urgent,
#student-entry-notif-card.is-urgent { box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.35); }
.student-entry-notif-ico.is-urgent { background: linear-gradient(145deg, #fff1f2, #ffe4e6); color: #be123c; }
body.student-entry-flow-active { overflow: hidden !important; }
#student-entry-notif-card.is-urgent { border-color: #fecdd3; }
.mood-lab-required-banner {
    display: none;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}
.mood-lab-shell.is-entry-required .mood-lab-required-banner { display: block; }
body.mood-panel-open #student-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(130%);
    transition: opacity 0.2s ease, transform 0.22s ease;
}
body.mood-panel-open { overflow: hidden !important; }

/* Geniş ekran: özet tam satır; 2×2 ada 2 sütun — packed --pw */
#student-panel .s-bento-mesh.is-custom > [data-widget="summary"],
#student-panel .s-bento-mesh.is-packed:not(.is-editing) > [data-widget="summary"] {
    grid-column: 1 / -1 !important;
}
@media (min-width: 1100px) {
    #student-panel .s-bento-mesh.is-custom:not(.is-packed) > #s-home-quad,
    #student-panel .s-bento-mesh.is-custom:not(.is-packed) > [data-widget="quad"] {
        grid-column: span 2 !important;
        width: auto !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }
}

/* Ada diğer modüllerin ALTINDA kalamaz; hücreler mesh leftover olamaz */
#student-panel .s-bento-mesh.is-packed:not(.is-editing) > #s-home-quad,
#student-panel .s-bento-mesh.is-packed:not(.is-editing) > [data-widget="quad"] {
    z-index: 6 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    width: var(--pw, 100%) !important;
    max-width: var(--pw, 100%) !important;
    margin-inline: 0 !important;
}
#student-panel #s-home-quad.s-home-quad,
#student-panel #s-home-quad.s-bento-island-quad {
    gap: 0.7rem !important;
}
#student-panel #s-home-quad > .s-quad-card,
#student-panel #s-home-quad > .s-bento-metric,
#student-panel #s-home-quad > [data-quad-cell] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 1 !important;
    min-height: 12rem !important;
}
#student-panel #s-home-quad > [data-quad-cell="reading"],
#student-panel #s-home-quad > .is-reading { grid-area: reading !important; }
#student-panel #s-home-quad > [data-quad-cell="mood"],
#student-panel #s-home-quad > .is-mood { grid-area: mood !important; }
#student-panel #s-home-quad > [data-quad-cell="gym"],
#student-panel #s-home-quad > .is-gym { grid-area: gym !important; }
#student-panel #s-home-quad > [data-quad-cell="exam"],
#student-panel #s-home-quad > .is-exam { grid-area: exam !important; }
@media (min-width: 1100px) {
    #student-panel #s-home-quad > .s-quad-card,
    #student-panel #s-home-quad > .s-bento-metric,
    #student-panel #s-home-quad > [data-quad-cell] {
        min-height: 12.75rem !important;
    }
}

/* Geniş ekran: packed = sütun yapboz; unpacked = CSS grid */
@media (min-width: 1100px) {
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) {
        display: grid !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        grid-auto-rows: min-content !important;
        gap: var(--bento-gap, 1.25rem) !important;
    }
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) > [data-widget] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin: 0 !important;
        grid-column: span var(--bw, 1) !important;
        grid-row: auto !important;
    }
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) > [data-widget="calendar"],
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) > [data-widget="quad"],
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) > #s-home-quad {
        grid-column: span 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) > [data-widget="summary"],
    #student-panel .s-bento-mesh.is-custom:not(.is-packed):not(.is-editing) > [data-widget="mentor"] {
        grid-column: 1 / -1 !important;
    }
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) {
        display: block !important;
        position: relative !important;
        height: var(--bento-pack-h, auto) !important;
        min-height: 0 !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) > [data-widget] {
        position: absolute !important;
        left: var(--px, 0px) !important;
        top: var(--py, 0px) !important;
        width: var(--pw, 100%) !important;
        max-width: var(--pw, 100%) !important;
        transform: none !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) #s-home-quad > [data-quad-cell],
    #student-panel .s-bento-mesh.is-packed:not(.is-editing) #s-home-quad > .s-quad-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        inset: auto !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
}
#student-panel .s-bento-mesh > [data-quad-cell],
#student-panel .s-bento-mesh > .s-quad-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
}

/* Kayıt / yükleme — çift tıklama önleyici tam ekran bekleme */
body.s-save-busy-open { overflow: hidden; }
.s-save-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
}
.s-save-busy-overlay.hidden { display: none !important; }
.s-save-busy-card {
    min-width: min(18rem, 100%);
    max-width: 22rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    text-align: center;
}
.s-save-busy-spinner {
    width: 2.4rem;
    height: 2.4rem;
    margin: 0 auto 0.85rem;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: #22d3ee;
    animation: s-save-spin 0.85s linear infinite;
}
@keyframes s-save-spin { to { transform: rotate(360deg); } }
.s-save-busy-card p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1.4;
}
button.is-saving,
.rdash-save-btn.is-saving {
    opacity: 0.65;
    cursor: wait !important;
    pointer-events: none;
}