/* JoinStage — organizatör paneli app shell (design_handoff_joinstage_panel referans alınarak) */

html, body {
    height: 100%;
}

.app-shell {
    display: flex;
    height: 100vh;
    width: 100%;
    background: var(--bg-page);
    font-family: var(--font-body);
}

/* ---------- Sidebar ---------- */

.sidebar {
    --sidebar-accent: var(--accent);
    --sidebar-accent-soft: rgba(192, 38, 140, 0.22);
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, #0F172A 0%, #0B1220 55%, #0A1020 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    z-index: 40;
}

.sidebar--admin {
    --sidebar-accent: var(--accent);
    --sidebar-accent-soft: rgba(192, 38, 140, 0.22);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 18px 16px 16px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-logo {
    height: 28px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.sidebar-brand-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background: rgba(192, 38, 140, 0.28);
    color: #FCE7F3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.brand-mark {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section + .sidebar-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-on-dark);
    opacity: 0.45;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px 8px;
}

.sidebar-link,
.sidebar-group-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    color: var(--text-on-dark);
    opacity: 0.78;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.sidebar-link:hover,
.sidebar-group-toggle:hover {
    color: #fff;
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-link.active {
    background: var(--sidebar-accent-soft);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--sidebar-accent);
}

.sidebar-link > i,
.sidebar-group-toggle > i:first-child {
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0.92;
}

.sidebar-link > span,
.sidebar-group-toggle > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link--muted {
    opacity: 0.45;
    cursor: default;
}

.sidebar-link--muted:hover {
    background: transparent;
    opacity: 0.45;
    color: var(--text-on-dark);
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-group-toggle .sidebar-chevron {
    font-size: 16px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform var(--duration-base) var(--ease-standard);
}

.sidebar-group.is-open > .sidebar-group-toggle .sidebar-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}

.sidebar-group.is-open > .sidebar-group-toggle {
    color: #fff;
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-group-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-standard);
}

.sidebar-group.is-open > .sidebar-group-panel {
    grid-template-rows: 1fr;
}

.sidebar-group-panel-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 14px;
    padding-left: 12px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.12);
}

.sidebar-group-panel .sidebar-link {
    padding: 8px 10px;
    font-size: 13px;
}

.sidebar-group-panel .sidebar-link > i {
    font-size: 16px;
}

.sidebar-bottom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding: 12px 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Legacy aliases (kept for any remaining markup) */
.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-on-dark);
    opacity: 0.78;
    transition: background var(--duration-fast) var(--ease-standard);
}

.sidebar-item:hover {
    color: #fff;
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-item.active {
    background: var(--sidebar-accent-soft);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

.sidebar-tree {
    margin-left: 14px;
    padding-left: 12px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- Main column ---------- */

.js-body {
    margin: 0;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background:
        radial-gradient(ellipse 80% 50% at 100% -10%, rgba(192, 38, 140, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(67, 56, 202, 0.05) 0%, transparent 50%),
        var(--bg-page);
}

.topbar {
    --topbar-accent: var(--accent);
    height: var(--topbar-height);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 8px 24px rgba(15, 23, 42, 0.04);
    z-index: 20;
}

.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(192, 38, 140, 0.2) 32%, transparent 62%);
    pointer-events: none;
}

.topbar-title-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 12px;
    border-left: 3px solid var(--topbar-accent);
}

.topbar-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.2;
}

.topbar-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-start {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(192, 38, 140, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--slate);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.topbar-icon-btn:hover {
    background: #fff;
    border-color: rgba(192, 38, 140, 0.28);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.1);
}

.topbar-icon-btn:active {
    transform: scale(0.97);
}

.topbar-icon-btn i {
    font-size: 18px;
    line-height: 1;
    transition: transform var(--duration-base) var(--ease-standard);
}

.topbar-icon-btn:hover i {
    transform: rotate(-30deg);
}

.topbar-user {
    position: relative;
    user-select: none;
}

.topbar-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 10px;
    border: 1px solid rgba(192, 38, 140, 0.12);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.topbar-user-trigger:hover,
.topbar-user.open .topbar-user-trigger {
    background: #fff;
    border-color: rgba(192, 38, 140, 0.28);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.08);
}

.topbar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.topbar-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
    padding-right: 4px;
}

.topbar-user-name {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-role {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.topbar-user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    padding: 8px;
    z-index: 50;
}

.topbar-user.open .topbar-user-menu {
    display: block;
    animation: topbarMenuIn var(--duration-base) var(--ease-standard);
}

@keyframes topbarMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-user.open .topbar-user-menu { animation: none; }
    .topbar-icon-btn:hover i,
    .topbar-icon-btn:active { transform: none; }
}

.topbar-user-menu a,
.topbar-user-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.topbar-user-menu a:hover,
.topbar-user-menu button:hover {
    background: rgba(192, 38, 140, 0.08);
    color: var(--accent);
}

.topbar-user-menu .topbar-user-logout {
    color: var(--status-error);
    font-weight: 600;
}

.topbar-user-menu .topbar-user-logout:hover {
    background: var(--status-error-tint);
    color: var(--status-error);
}

.topbar-user-menu form {
    margin: 0;
}

.topbar-user-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 6px 4px;
}

.sidebar-link--logout {
    color: #FCA5A5;
    opacity: 0.9;
}

.sidebar-link--logout:hover {
    color: #FECACA;
    background: rgba(220, 38, 38, 0.12);
    opacity: 1;
}

.app-content {
    flex: 1;
    overflow: auto;
    padding: 16px 20px 24px;
    background: transparent;
    color: var(--text-primary);
}

.app-content-inner {
    max-width: 1200px;
    margin: 0;
    width: 100%;
}

.app-content-inner--wide {
    max-width: none;
}

/* ---------- Organizer topnav shell (no sidebar) ---------- */

.org-shell {
    --org-nav-accent: var(--accent);
    --org-nav-accent-soft: rgba(192, 38, 140, 0.22);
    flex-direction: column;
    height: 100vh;
}

.org-header {
    flex-shrink: 0;
    position: relative;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--topbar-height);
    padding: 0 16px 0 12px;
    background: linear-gradient(90deg, #0F172A 0%, #0B1220 55%, #0A1020 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.org-header-start {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.org-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 0 8px;
}

.org-brand-logo {
    height: 26px;
    width: auto;
    display: block;
}

.org-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.org-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.org-nav-toggle i {
    font-size: 20px;
    line-height: 1;
}

.org-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4px;
}

.org-nav::-webkit-scrollbar {
    display: none;
}

.org-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-on-dark);
    opacity: 0.78;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.org-nav-link:hover {
    color: #fff;
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

.org-nav-link.active {
    background: var(--org-nav-accent-soft);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

.org-nav-link.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--org-nav-accent);
}

.org-nav-link > i:first-child {
    font-size: 17px;
    flex-shrink: 0;
    opacity: 0.92;
}

.org-nav-group {
    position: relative;
    flex-shrink: 0;
}

.org-nav-group-toggle .org-nav-chevron {
    font-size: 15px;
    margin-left: 2px;
    opacity: 0.55;
    transition: transform var(--duration-base) var(--ease-standard);
}

.org-nav-group.is-open > .org-nav-group-toggle,
.org-nav-group-toggle.active {
    color: #fff;
    opacity: 1;
    background: var(--org-nav-accent-soft);
}

.org-nav-group.is-open > .org-nav-group-toggle .org-nav-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}

.org-nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #0F172A 0%, #0B1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.45);
    z-index: 55;
    flex-direction: column;
    gap: 2px;
}

.org-nav-group.is-open > .org-nav-panel {
    display: flex;
}

.org-nav-panel .org-nav-link {
    width: 100%;
    height: auto;
    padding: 10px 12px;
    justify-content: flex-start;
}

.org-nav-panel .org-nav-link.active::after {
    left: 0;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 3px;
    height: auto;
    border-radius: 0 2px 2px 0;
}

.org-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.org-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.org-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.org-icon-btn i {
    font-size: 18px;
    line-height: 1;
}

.org-shell .org-user .topbar-user-trigger {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.org-shell .org-user .topbar-user-trigger:hover,
.org-shell .org-user.open .topbar-user-trigger {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.18);
}

.org-shell .org-user .topbar-user-name {
    color: #fff;
}

.org-shell .org-user .topbar-user-role {
    color: rgba(255, 255, 255, 0.55);
}

.org-shell .org-user .topbar-user-chevron {
    color: rgba(255, 255, 255, 0.65);
}

.org-content {
    flex: 1;
    min-height: 0;
    width: 100%;
    background:
        radial-gradient(ellipse 80% 50% at 100% -10%, rgba(192, 38, 140, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(67, 56, 202, 0.05) 0%, transparent 50%),
        var(--bg-page);
}

.org-shell .app-content-inner {
    max-width: none;
}

.org-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 45;
}

.org-nav-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    z-index: 50;
    flex-direction: column;
    background: linear-gradient(180deg, #0F172A 0%, #0B1220 55%, #0A1020 100%);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.4);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
}

.org-nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.org-nav-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

.org-nav-drawer .org-nav-link {
    width: 100%;
    height: auto;
    padding: 10px 12px;
    justify-content: flex-start;
}

.org-nav-drawer .org-nav-link.active::after {
    left: 0;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 3px;
    height: auto;
    border-radius: 0 2px 2px 0;
}

.org-nav-drawer .org-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.org-nav-panel--drawer {
    position: static;
    display: none;
    min-width: 0;
    margin: 2px 0 4px 14px;
    padding: 4px 0 4px 12px;
    border: none;
    border-left: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.org-nav-drawer .org-nav-group.is-open > .org-nav-panel--drawer {
    display: flex;
}

body.org-nav-open {
    overflow: hidden;
}

body.org-nav-open .org-nav-scrim {
    display: block;
}

body.org-nav-open .org-nav-drawer {
    transform: translateX(0);
}

@media (max-width: 1100px) {
    .org-nav-link span {
        display: none;
    }

    .org-nav-group-toggle .org-nav-chevron {
        display: none;
    }

    .org-nav-link {
        padding: 0 10px;
    }

    .org-nav-panel .org-nav-link span {
        display: inline;
    }

    .org-shell .org-user .topbar-user-meta {
        display: none;
    }
}

@media (max-width: 767px) {
    .org-nav {
        display: none;
    }

    .org-nav-toggle {
        display: inline-flex;
    }

    .org-nav-drawer {
        display: flex;
    }

    .org-header {
        padding: 0 10px;
        gap: 8px;
    }

    .org-shell .impersonation-banner {
        display: none;
    }

    .org-content {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .org-nav-drawer {
        transition: none;
    }
}

/* ---------- Shared primitives (corporate SaaS) ---------- */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-panel);
}

.card-flush {
    padding: 0;
    overflow: hidden;
}

.card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-chrome);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--control-height);
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-primary);
    background: var(--gray-50);
    box-shadow: none;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited,
a.btn:active {
    text-decoration: none;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-primary:hover:not(:disabled):not(.disabled),
a.btn-primary:hover,
a.btn-primary:visited {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #fff;
}

/* Beyaz cam yüzeylerde kaybolmasın: hafif slate fill + net kenar */
.btn-secondary {
    background: var(--gray-50);
    color: var(--text-primary);
    border-color: rgba(15, 23, 42, 0.16);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}

.btn-secondary:hover:not(:disabled):not(.disabled),
a.btn-secondary:hover {
    background: var(--gray-100);
    border-color: rgba(15, 23, 42, 0.22);
    color: var(--text-primary);
}

a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:active {
    color: var(--text-primary);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-secondary);
    border-color: rgba(15, 23, 42, 0.12);
}

.btn-ghost:hover:not(:disabled):not(.disabled),
a.btn-ghost:hover {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.18);
    color: var(--text-primary);
}

a.btn-ghost,
a.btn-ghost:visited,
a.btn-ghost:active {
    color: var(--text-secondary);
}

.btn-danger {
    background: var(--status-error);
    border-color: var(--status-error);
    color: #fff;
}

.btn-danger:hover:not(:disabled):not(.disabled),
a.btn-danger:hover,
a.btn-danger:visited {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-accent:hover:not(:disabled):not(.disabled),
a.btn-accent:hover,
a.btn-accent:visited {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:active,
a.btn-accent,
a.btn-accent:visited,
a.btn-accent:active,
a.btn-danger,
a.btn-danger:visited,
a.btn-danger:active {
    color: #fff;
}

.btn-sm {
    height: var(--control-height-sm);
    padding: 0 10px;
    font-size: 12px;
}

.btn-lg {
    height: 38px;
    font-size: 13px;
    padding: 0 14px;
}

.btn-block {
    width: 100%;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-field input,
.form-field textarea,
.form-field select {
    height: var(--control-height);
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    font-family: var(--font-body);
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text-primary);
}

.form-field input:disabled,
.form-field textarea:disabled,
.form-field select:disabled {
    background: var(--gray-50);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-field textarea {
    height: auto;
    padding: 8px 10px;
    min-height: 80px;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}

.textarea-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-card);
    resize: vertical;
}

.textarea-field:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
}

.textarea-field-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.field-error {
    color: var(--status-error);
    font-size: 11.5px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--border-default);
    background: var(--bg-card);
    color: var(--text-secondary);
}

.badge-mor,
.badge-brand {
    background: var(--bg-card);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.badge-accent {
    background: var(--bg-card);
    color: var(--accent);
    border-color: var(--accent);
}

.badge-yesil,
.badge-success {
    background: var(--bg-card);
    color: var(--green-700);
    border-color: var(--green-600);
}

.badge-gri {
    background: var(--bg-chrome);
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.badge-warning {
    background: var(--bg-card);
    color: var(--amber-700);
    border-color: var(--amber-600);
}

.badge-danger {
    background: var(--bg-card);
    color: var(--red-700);
    border-color: var(--red-600);
}

.mono {
    font-family: var(--font-mono);
}

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: var(--bg-card);
}

.tab-item {
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.tab-item:hover {
    color: var(--text-primary);
}

.tab-item.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.tab-item.disabled {
    color: var(--text-muted);
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.empty-state {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.empty-state i {
    font-size: 22px;
    color: var(--text-muted);
}

.empty-state-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--text-primary);
}

.empty-state-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    max-width: 360px;
    line-height: 1.45;
}

.empty-state--compact {
    padding: 24px 16px;
}

.js-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    min-height: 34px;
    padding: 12px 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

.js-toolbar-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.js-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.js-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}

.js-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.55), rgba(255, 255, 255, 0.35));
    border-bottom: 1px solid rgba(192, 38, 140, 0.08);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.js-panel-header a {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.js-panel-header a:hover {
    text-decoration: underline;
}

.js-panel-body {
    padding: 12px;
}

.js-panel-body--flush {
    padding: 0;
}

/* ---------- Auth pages (rıza sayfası benzeri, sade merkezi düzen) ---------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    /* CSS stacking rule: positioned elements (the fixed backdrop) always render above
       unpositioned ones, regardless of DOM order or z-index:0 vs auto — without this,
       the dark backdrop washes out the card on top of it (pointer-events still pass through). */
    position: relative;
    z-index: 1;
}

.auth-card-header {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 20px 20px 0;
    border-bottom: none;
}

.auth-card-kicker {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.auth-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--text-primary);
}

.auth-card-body {
    padding: 20px;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-brand-logo {
    height: 36px;
    width: auto;
    display: block;
}

.auth-brand-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
}

.auth-footer {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-wrap {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}

.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 12px;
    border: 1px solid transparent;
    border-left-width: 3px;
}

.alert-danger {
    background: var(--status-error-tint);
    color: var(--red-700);
    border-color: rgba(220, 38, 38, 0.15);
    border-left-color: var(--status-error);
}

.alert-success {
    background: var(--status-success-tint);
    color: var(--green-700);
    border-color: rgba(22, 163, 74, 0.15);
    border-left-color: var(--status-success);
}

.alert-warning {
    background: var(--status-warning-tint);
    color: var(--amber-700);
    border-color: rgba(217, 119, 6, 0.18);
    border-left-color: var(--status-warning);
}

.alert-info {
    background: var(--brand-tint);
    color: var(--brand-primary-hover);
    border-color: rgba(67, 56, 202, 0.14);
    border-left-color: var(--brand-primary);
}

/* Compact flash toasts — overlay, no layout shift */
.js-toast-stack {
    position: fixed;
    top: calc(var(--topbar-height, 64px) + 10px);
    right: 14px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(340px, calc(100vw - 28px));
    pointer-events: none;
}

.js-toast-stack .alert,
.alert.js-toast {
    pointer-events: auto;
    margin: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 10px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
    animation: jsToastIn 0.22s var(--ease-standard, ease);
}

.js-toast-stack .alert > i,
.alert.js-toast > i {
    flex-shrink: 0;
    font-size: 16px;
    margin-top: 0;
}

.js-toast-stack .alert > div,
.alert.js-toast > div:not(.js-toast-close) {
    flex: 1;
    min-width: 0;
}

.js-toast-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.js-toast-close:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.06);
}

.js-toast-close i {
    font-size: 15px;
    line-height: 1;
}

.alert.js-toast.is-leaving {
    animation: jsToastOut 0.18s ease forwards;
}

@keyframes jsToastIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes jsToastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (max-width: 640px) {
    .js-toast-stack {
        top: calc(var(--topbar-height, 64px) + 8px);
        right: 10px;
        left: 10px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-toast-stack .alert,
    .alert.js-toast,
    .alert.js-toast.is-leaving {
        animation: none;
    }
}

/* Pre-JS: TempData alerts at content root don't push layout */
.app-content-inner > .alert:not([style]):not(.js-toast),
.event-activities > .alert:not([style]):not(.js-toast) {
    position: fixed;
    top: calc(var(--topbar-height, 64px) + 10px);
    right: 14px;
    z-index: 79;
    width: min(340px, calc(100vw - 28px));
    margin: 0;
    align-items: center;
    padding: 8px 8px 8px 12px;
    font-size: 12px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
    .app-content-inner > .alert:not([style]):not(.js-toast),
    .event-activities > .alert:not([style]):not(.js-toast) {
        left: 10px;
        right: 10px;
        width: auto;
    }
}

.qr-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.qr-card img {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
}

/* Sunum modu ayarları — tam genişlik sahne editörü */
.event-settings {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: none;
}

.dash-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.stage-url-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.stage-cmd-form {
    display: inline;
    margin: 0;
}

.stage-now-badge {
    font-weight: 600;
}

/* Canva tarzı sahne tasarım stüdyosu */
.stage-design-studio .dash-panel-head {
    align-items: center;
}

.stage-design-body {
    padding-top: 10px !important;
}

.stage-studio {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 38%);
    gap: 0;
    min-height: 420px;
    border-radius: var(--glass-radius, 12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.42);
    overflow: hidden;
}

/* Sahne operasyon konsolu — sol mod rayı */
.stage-ops-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    background: rgba(15, 23, 42, 0.04);
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    overflow: auto;
    scrollbar-width: thin;
}

.stage-ops-rail-sep {
    height: 1px;
    margin: 4px 6px;
    background: rgba(15, 23, 42, 0.08);
    flex: none;
}

.stage-ops-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 9px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.stage-ops-btn .ti {
    font-size: 19px;
    line-height: 1;
}

.stage-ops-btn:hover {
    background: rgba(192, 38, 140, 0.08);
    color: #C0268C;
}

.stage-ops-btn.is-active {
    background: #FDF2F8;
    color: #C0268C;
    box-shadow: inset 3px 0 0 #C0268C;
}

.stage-ops-btn-count {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 14px;
    font-weight: 700;
}

.stage-ops-btn-live {
    position: absolute;
    top: 6px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #16A34A;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

/* Orta sütun — tasarım editörü veya aktivite operasyonu */
.stage-ops-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
}

.stage-ops-mode {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.stage-ops-mode[hidden] {
    display: none;
}

.stage-design-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 8px 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.stage-design-tabs::-webkit-scrollbar {
    display: none;
}

.stage-design-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.stage-design-tab .ti {
    font-size: 15px;
    line-height: 1;
}

.stage-design-tab:hover {
    background: rgba(192, 38, 140, 0.08);
    color: #C0268C;
}

.stage-design-tab.is-active {
    background: #FDF2F8;
    border-color: rgba(192, 38, 140, 0.25);
    color: #C0268C;
}

.stage-ops-main .stage-settings-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.stage-ops-main .stage-tool-panel {
    flex: 1;
    min-height: 0;
    border-right: none;
    background: transparent;
    padding: 12px 12px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.stage-ops-main .stage-tool-pane {
    max-width: 560px;
}

.stage-design-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: none;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.6);
}

.stage-design-footer .stage-tool-hint {
    margin: 0;
    flex: 1;
    min-width: 140px;
}

.stage-ops-main .stage-editor-save {
    margin-top: 0;
    align-self: auto;
}

.stage-ops-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    flex: none;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.85), rgba(255, 255, 255, 0.4));
}

.stage-ops-head-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.stage-ops-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent, #C0268C);
}

.stage-ops-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.stage-ops-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.stage-ops-count {
    font-size: 11.5px;
    color: var(--text-muted);
}

.stage-ops-panel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.stage-ops-empty {
    margin: 14px 12px;
}

.stage-ops-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 3px 0 0 rgba(15, 23, 42, 0.06);
}

.stage-ops-item.is-live {
    border-color: rgba(192, 38, 140, 0.28);
    background: rgba(253, 242, 248, 0.72);
    box-shadow: inset 3px 0 0 #C0268C;
}

.stage-ops-item.is-status-ready {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
    box-shadow: inset 3px 0 0 #64748B;
}

.stage-ops-item.is-status-active {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.95), rgba(255, 255, 255, 0.88));
    border-color: rgba(22, 163, 74, 0.22);
    box-shadow: inset 3px 0 0 #16A34A;
}

.stage-ops-item.is-status-done {
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.92), rgba(255, 255, 255, 0.86));
    border-color: rgba(192, 38, 140, 0.2);
    box-shadow: inset 3px 0 0 #C0268C;
}

.stage-ops-item.is-status-generating {
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.95), rgba(255, 255, 255, 0.88));
    box-shadow: inset 3px 0 0 #4338CA;
}

.stage-ops-item.is-status-failed {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.88));
    border-color: rgba(220, 38, 38, 0.2);
    box-shadow: inset 3px 0 0 #DC2626;
}

.stage-ops-item-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stage-ops-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 2px;
}

.stage-ops-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stage-ops-item-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
}

.stage-ops-item-error {
    color: var(--red-700);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-ops-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stage-ops-form {
    display: inline;
    margin: 0;
}

/* Sağ sütun — dar 16:9 önizleme + canlı yayın aynası */
.stage-preview-col {
    gap: 8px;
}

/* Operasyon modunda önizleme salt izleme yüzeyi; canvas düzenleme yalnız tasarım modunda. */
.stage-studio.is-ops-mode .stage-canvas-layer {
    pointer-events: none;
}

.stage-live-mirror {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.stage-live-mirror.is-live {
    border-color: rgba(192, 38, 140, 0.28);
    background: rgba(253, 242, 248, 0.78);
}

.stage-live-mirror-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stage-live-mirror-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--text-muted);
}

.stage-live-mirror.is-live .stage-live-mirror-dot {
    background: #16A34A;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.stage-live-mirror-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent, #C0268C);
}

.stage-live-mirror-open {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    line-height: 1;
}

.stage-live-mirror-open:hover {
    color: #C0268C;
}

.stage-live-mirror-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.stage-live-mirror-meta {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Önizleme: tasarım yüzeyi vs canlı yayın + sunum slayt şeridi */
.stage-preview-workspace {
    display: flex;
    gap: 8px;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.stage-preview-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.stage-preview-slides {
    flex: none;
    width: 88px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.stage-preview-slides[hidden] {
    display: none !important;
}

.stage-preview-slides-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 8px 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.stage-preview-slides-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-accent, #C0268C);
}

.stage-preview-slides-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

.stage-preview-slides-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
}

.stage-preview-slides-empty {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 4px;
}

.stage-preview-slide {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: #0B1220;
    cursor: pointer;
}

.stage-preview-slide:hover {
    border-color: rgba(192, 38, 140, 0.45);
}

.stage-preview-slide.is-current {
    border-color: #C0268C;
    box-shadow: 0 0 0 2px rgba(192, 38, 140, 0.22);
}

.stage-preview-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #0B1220;
}

.stage-preview-slide span {
    position: absolute;
    left: 4px;
    bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #F8FAFC;
    background: rgba(15, 23, 42, 0.72);
    padding: 1px 5px;
    border-radius: 4px;
}

.stage-preview-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stage-preview-nav[hidden] {
    display: none !important;
}

.stage-preview-page {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 3.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stage-design-surface,
.stage-live-surface {
    position: absolute;
    inset: 0;
}

.stage-design-surface[hidden],
.stage-live-surface[hidden] {
    display: none !important;
}

.stage-design-surface .stage-bg,
.stage-live-surface .stage-bg {
    position: absolute;
    inset: 0;
}

.stage-live-surface .stage-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.stage-studio.is-ops-mode .stage-preview-col {
    min-width: 0;
}

.stage-studio.is-pres-controlling {
    grid-template-columns: 72px minmax(0, 1fr) minmax(320px, 44%);
}

.stage-ops-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(192, 38, 140, 0.22);
    background: rgba(253, 242, 248, 0.72);
}

.stage-ops-control[hidden] {
    display: none !important;
}

.stage-ops-control-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.stage-ops-control-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.stage-ops-control-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stage-ops-control-page {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 3.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stage-tool-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 16px;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.55);
    min-width: 0;
    overflow: auto;
}

.stage-tool-pane {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.stage-tool-pane.is-active {
    display: flex;
}

.stage-pane-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent, #C0268C);
    margin-bottom: 2px;
}

.stage-tool-panel .form-field {
    margin-bottom: 0;
}

.stage-tool-panel .form-field label {
    font-size: 11.5px;
    margin-bottom: 4px;
}

.stage-tool-panel .form-field input,
.stage-tool-panel .form-field select {
    height: 32px;
    font-size: 13px;
}

.stage-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stage-palette-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stage-palette-card.is-on {
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 1px rgba(192, 38, 140, 0.18);
    background: #FDF2F8;
}

.stage-palette-swatches {
    display: flex;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
}

.stage-palette-swatches span {
    flex: 1;
}

.stage-palette-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.stage-color-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.stage-color-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.stage-color-field input[type="color"] {
    width: 100%;
    height: 34px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.stage-motion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.stage-motion-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}

.stage-motion-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stage-motion-card.is-on {
    border-color: rgba(192, 38, 140, 0.5);
    background: #FDF2F8;
    box-shadow: 0 0 0 1px rgba(192, 38, 140, 0.18);
}

.stage-motion-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1.15;
    width: 100%;
    min-height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: #0B1220;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Statik önizleme — animasyon yok */
.stage-motion-thumb[data-motion="none"] {
    background: #0B1220;
}
.stage-motion-thumb[data-motion="aurora"] {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(192, 38, 140, 0.7), transparent 55%),
        radial-gradient(ellipse at 80% 60%, rgba(67, 56, 202, 0.55), transparent 50%),
        #0B1220;
}
.stage-motion-thumb[data-motion="mesh"] {
    background:
        radial-gradient(circle at 30% 40%, rgba(192, 38, 140, 0.65), transparent 45%),
        radial-gradient(circle at 70% 55%, rgba(14, 165, 233, 0.45), transparent 40%),
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
        #0B1220;
    background-size: auto, auto, 12px 12px, 12px 12px, auto;
}
.stage-motion-thumb[data-motion="particles"] {
    background:
        radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 55% 45%, #fff, transparent),
        radial-gradient(2px 2px at 75% 25%, #F9A8D4, transparent),
        radial-gradient(1.5px 1.5px at 35% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 75%, #fff, transparent),
        radial-gradient(ellipse at 50% 50%, rgba(192, 38, 140, 0.35), transparent 60%),
        #0B1220;
}
.stage-motion-thumb[data-motion="waves"] {
    background:
        linear-gradient(180deg,
            transparent 18%, rgba(192, 38, 140, 0.45) 28%, transparent 38%,
            transparent 48%, rgba(14, 165, 233, 0.35) 58%, transparent 68%,
            transparent 72%, rgba(192, 38, 140, 0.3) 82%, transparent 92%),
        #0B1220;
}
.stage-motion-thumb[data-motion="softglow"] {
    background:
        radial-gradient(circle at 50% 50%, rgba(192, 38, 140, 0.75), transparent 55%),
        #0B1220;
}
.stage-motion-thumb[data-motion="confetti"] {
    background:
        radial-gradient(circle at 15% 25%, #C0268C 0 3px, transparent 4px),
        radial-gradient(circle at 40% 60%, #FBBF24 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 70% 30%, #38BDF8 0 3px, transparent 4px),
        radial-gradient(circle at 85% 70%, #A78BFA 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 55% 80%, #34D399 0 2px, transparent 3px),
        #0B1220;
}
.stage-motion-thumb[data-motion="spotlight"] {
    background:
        conic-gradient(from 200deg at 50% 50%,
            transparent 0deg 50deg,
            rgba(192, 38, 140, 0.55) 70deg 110deg,
            transparent 130deg 360deg),
        #0B1220;
}
.stage-motion-thumb[data-motion="neonsweep"] {
    background:
        linear-gradient(105deg, #0B1220 35%, rgba(249, 168, 212, 0.85) 50%, #0B1220 65%);
}
.stage-motion-thumb[data-motion="starburst"] {
    background:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(192, 38, 140, 0.55) 0deg 8deg,
            transparent 8deg 36deg),
        radial-gradient(circle at 50% 50%, #F9A8D4 0 3px, transparent 4px),
        #0B1220;
}
.stage-motion-thumb[data-motion="pulsering"] {
    background:
        radial-gradient(circle, transparent 28%, rgba(192, 38, 140, 0.7) 30%, transparent 32%),
        radial-gradient(circle, transparent 48%, rgba(56, 189, 248, 0.45) 50%, transparent 52%),
        #0B1220;
}
.stage-motion-thumb[data-motion="orbit"] {
    background:
        radial-gradient(circle at 72% 38%, #C0268C 0 6px, transparent 7px),
        radial-gradient(circle at 28% 62%, #38BDF8 0 5px, transparent 6px),
        radial-gradient(circle at 50% 50%, transparent 22%, rgba(255,255,255,0.12) 23%, transparent 24%),
        #0B1220;
}
.stage-motion-thumb[data-motion="ember"] {
    background:
        radial-gradient(ellipse at 50% 85%, rgba(251, 191, 36, 0.55), transparent 45%),
        radial-gradient(circle at 35% 70%, #C0268C 0 2px, transparent 3px),
        radial-gradient(circle at 60% 60%, #F59E0B 0 2px, transparent 3px),
        #0B1220;
}
.stage-motion-thumb[data-motion="ribbon"] {
    background:
        linear-gradient(115deg, transparent 25%, rgba(192, 38, 140, 0.6) 40%, transparent 55%),
        linear-gradient(70deg, transparent 40%, rgba(56, 189, 248, 0.4) 55%, transparent 70%),
        #0B1220;
}
.stage-motion-thumb[data-motion="meteor"] {
    background:
        linear-gradient(125deg, transparent 40%, rgba(255,255,255,0.85) 50%, transparent 58%),
        #0B1220;
}
.stage-motion-thumb[data-motion="vortex"] {
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent,
            rgba(192, 38, 140, 0.55),
            transparent,
            rgba(56, 189, 248, 0.4),
            transparent),
        #0B1220;
}
.stage-motion-thumb[data-motion="scanlines"] {
    background:
        repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,0.1) 3px 4px),
        linear-gradient(180deg, transparent 40%, rgba(192, 38, 140, 0.35) 50%, transparent 60%),
        #0B1220;
}
.stage-motion-thumb[data-motion="prism"] {
    background: linear-gradient(90deg, #EC4899, #38BDF8, #A78BFA, #FBBF24);
}
.stage-motion-thumb[data-motion="ripple"] {
    background:
        radial-gradient(circle at 30% 35%, transparent 18%, rgba(192, 38, 140, 0.65) 20%, transparent 22%),
        radial-gradient(circle at 65% 60%, transparent 14%, rgba(56, 189, 248, 0.5) 16%, transparent 18%),
        #0B1220;
}
.stage-motion-thumb[data-motion="hexgrid"] {
    background:
        linear-gradient(30deg, rgba(255,255,255,0.15) 1px, transparent 1px),
        linear-gradient(150deg, rgba(255,255,255,0.15) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(192, 38, 140, 0.35), transparent 55%),
        #0B1220;
    background-size: 14px 24px, 14px 24px, auto, auto;
}
.stage-motion-thumb[data-motion="bloom"] {
    background:
        radial-gradient(circle at 50% 50%, rgba(249, 168, 212, 0.85), rgba(192, 38, 140, 0.35) 40%, transparent 65%),
        #0B1220;
}
.stage-motion-thumb[data-motion="drift"] {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(192, 38, 140, 0.5), transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(67, 56, 202, 0.4), transparent 45%),
        #0B1220;
}
.stage-motion-thumb[data-motion="kaleido"] {
    background:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(192, 38, 140, 0.55) 0deg 20deg,
            transparent 20deg 40deg,
            rgba(56, 189, 248, 0.4) 40deg 60deg,
            transparent 60deg 80deg),
        #0B1220;
}
.stage-motion-thumb[data-motion="beam"] {
    background:
        linear-gradient(90deg, #0B1220 30%, rgba(249, 168, 212, 0.8) 48%, #0B1220 66%);
}
.stage-motion-thumb[data-motion="twinkle"] {
    background:
        radial-gradient(1.5px 1.5px at 18% 28%, #fff, transparent),
        radial-gradient(2px 2px at 52% 42%, #F9A8D4, transparent),
        radial-gradient(1.5px 1.5px at 78% 22%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 35% 75%, #fff, transparent),
        radial-gradient(2px 2px at 70% 70%, #fff, transparent),
        #0B1220;
}

.stage-motion-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px 2px;
}

.stage-motion-desc {
    display: none;
}

@media (max-width: 1100px) {
    .stage-motion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stage-editor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.stage-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stage-chip .ti {
    font-size: 14px;
}

.stage-chip.is-on {
    border-color: rgba(192, 38, 140, 0.35);
    background: #FDF2F8;
    color: #C0268C;
}

.stage-editor-save {
    margin-top: auto;
    align-self: stretch;
    justify-content: center;
}

.stage-canvas-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px 14px;
    background: rgba(232, 236, 243, 0.55);
}

.stage-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stage-preview-toolbar-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.stage-preview-toolbar-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.stage-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.stage-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.stage-add-btn .ti {
    font-size: 20px;
    color: #C0268C;
}

.stage-add-btn:hover {
    border-color: rgba(192, 38, 140, 0.35);
    background: #FDF2F8;
    color: #C0268C;
}

.stage-template-btn {
    width: 100%;
    justify-content: center;
}

.stage-tool-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.stage-props-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

#stagePropText {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
}

.stage-preview-frame {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 360px;
    aspect-ratio: 16 / 9;
    border-radius: var(--glass-radius, 12px);
    overflow: hidden;
    box-shadow: var(--glass-shadow, 0 8px 28px rgba(15, 23, 42, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.14);
    --stage-bg: #0B1220;
    --stage-accent: #C0268C;
    --stage-text: #F8FAFC;
    --stage-muted: #94A3B8;
    color: var(--stage-text);
    transition: box-shadow 0.25s ease;
    container-type: size;
}

.stage-preview-frame.is-updating {
    box-shadow: 0 0 0 2px rgba(192, 38, 140, 0.35), 0 12px 32px rgba(15, 23, 42, 0.12);
}

.stage-preview-frame.is-updating .stage-welcome {
    animation: stagePreviewNudge 380ms ease;
}

@keyframes stagePreviewNudge {
    from { opacity: 0.72; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.stage-preview-scale {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 32px 24px;
}

.stage-preview-kicker {
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
}

.stage-preview-frame .stage-welcome {
    width: 100%;
    max-width: none;
    gap: 28px;
    align-items: flex-start;
    color: var(--stage-text);
}

.stage-preview-frame .stage-welcome-eyebrow {
    font-size: 11px;
    margin-bottom: 8px;
    color: var(--stage-accent);
}

.stage-preview-frame .stage-welcome-title {
    font-size: clamp(22px, 2.8vw, 34px);
    margin-bottom: 8px;
    color: var(--stage-text);
}

.stage-preview-frame .stage-welcome-subtitle {
    font-size: clamp(12px, 1.2vw, 15px);
    margin-bottom: 14px;
    color: var(--stage-muted);
}

.stage-preview-frame .stage-welcome-code-label {
    font-size: 10px;
    color: var(--stage-muted);
}

.stage-preview-frame .stage-welcome-code {
    font-size: clamp(18px, 2vw, 28px);
    color: var(--stage-text);
}

.stage-preview-frame .stage-welcome-logo {
    height: 28px;
    margin-top: 14px;
}

.stage-preview-frame .stage-welcome-qr {
    padding: 10px;
    border-radius: 10px;
}

.stage-preview-frame .stage-welcome-qr-img {
    width: clamp(120px, 18vw, 200px);
    height: auto;
    aspect-ratio: 1;
}

.stage-preview-frame .layout-qr-emphasis .stage-welcome-qr-img {
    width: clamp(140px, 22vw, 240px);
}

.stage-preview-frame .layout-code-emphasis .stage-welcome-code {
    font-size: clamp(24px, 3vw, 40px);
}

.stage-preview-frame .layout-minimal {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stage-preview-frame .layout-minimal .stage-welcome-copy {
    align-items: center;
}

.stage-preview-frame.align-center .stage-welcome:not(.layout-minimal) {
    justify-content: center;
}

.stage-preview-frame.align-center .stage-welcome:not(.layout-minimal) .stage-welcome-copy {
    align-items: center;
    text-align: center;
}

.stage-preview-frame.font-display .stage-welcome-title {
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    letter-spacing: -0.02em;
    font-weight: 800;
}

.stage-preview-frame.font-mono .stage-welcome-title,
.stage-preview-frame.font-mono .stage-welcome-code {
    font-family: var(--font-mono, "IBM Plex Mono", monospace);
}

.stage-preview-frame.scale-compact .stage-welcome-title {
    font-size: clamp(18px, 2.2vw, 26px);
}

.stage-preview-frame.scale-large .stage-welcome-title {
    font-size: clamp(28px, 3.4vw, 42px);
}

.event-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: start;
}

.event-settings-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.event-settings-panel .dash-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-settings-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-settings-option {
    display: block;
    margin: 0;
    cursor: pointer;
}

.event-settings-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.event-settings-option-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.event-settings-option:hover .event-settings-option-card {
    border-color: rgba(192, 38, 140, 0.28);
    background: rgba(253, 242, 248, 0.45);
}

.event-settings-option.is-selected .event-settings-option-card,
.event-settings-option:has(input:checked) .event-settings-option-card {
    border-color: rgba(192, 38, 140, 0.4);
    background: rgba(253, 242, 248, 0.72);
    box-shadow: inset 3px 0 0 #C0268C, 0 0 0 3px rgba(192, 38, 140, 0.1);
}

.event-settings-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    color: #64748B;
    font-size: 17px;
}

.event-settings-option.is-selected .event-settings-option-icon,
.event-settings-option:has(input:checked) .event-settings-option-icon {
    background: rgba(192, 38, 140, 0.12);
    color: #C0268C;
}

.event-settings-option-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.event-settings-option-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

.event-settings-option-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: #64748B;
}

.event-settings-hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748B;
}

.event-settings-danger-copy {
    min-width: 0;
}

.event-settings-danger-title {
    font-weight: 650;
    font-size: 13.5px;
    color: #0F172A;
}

.event-settings-danger-desc {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #64748B;
}

.event-settings-secondary {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.stage-preview-frame .stage-brand-logo {
    position: absolute;
    top: 3.2%;
    left: 2.8%;
    height: 5.2%;
    width: auto;
    z-index: 30;
    pointer-events: none;
}

/* Sunum yayını: önizleme/projektörde yalnız slayt (logo/meta/bg yok) */
.stage-preview-frame.is-presentation-bleed,
.stage-viewport.is-presentation-bleed {
    background: #000 !important;
}

.stage-preview-frame.is-presentation-bleed .stage-brand-logo,
.stage-viewport.is-presentation-bleed .stage-brand-logo,
.stage-preview-frame.is-presentation-bleed .stage-bg,
.stage-viewport.is-presentation-bleed .stage-bg,
.stage-live-surface:has(.stage-shell.is-deck) .stage-brand-logo,
.stage-live-surface:has(.stage-shell.is-deck) .stage-bg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.stage-live-surface .stage-shell.is-deck,
.stage-viewport .stage-shell.is-deck {
    padding: 0 !important;
    inset: 0;
}

.stage-shell.is-deck .stage-mode-body {
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
}

.stage-shell.is-deck .stage-deck.is-bleed,
.stage-shell.is-deck .stage-deck-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    gap: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
}

.stage-shell.is-deck .stage-deck-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity 80ms cubic-bezier(0.22, 1, 0.36, 1), transform 80ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.stage-shell.is-deck .stage-deck-layer.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.stage-preview-frame {
    overflow: hidden;
}

.stage-team-list {
    display: flex;
    flex-direction: column;
}

.stage-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.stage-team-row:last-child {
    border-bottom: none;
}

.stage-team-name {
    font-weight: 600;
    font-size: 13.5px;
}

.stage-team-email {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.stage-team-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stage-invite-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.stage-invite-input {
    flex: 1;
    min-width: 160px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--glass-radius, 12px);
    border: 1px solid var(--glass-border, rgba(15, 23, 42, 0.08));
    font-size: 13px;
    background: rgba(255, 255, 255, 0.72);
}

.stage-danger-panel .dash-panel-head {
    border-color: rgba(220, 38, 38, 0.12);
}

.stage-danger-title {
    color: #DC2626 !important;
}

.stage-danger-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .stage-studio {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .stage-studio.is-pres-controlling {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .stage-preview-slides {
        width: 72px;
    }

    .stage-ops-rail {
        grid-row: 1 / span 2;
    }

    .stage-ops-main {
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .stage-canvas-pane {
        grid-column: 2;
    }

    .stage-preview-frame {
        min-height: 280px;
    }

    .event-settings-secondary {
        grid-template-columns: 1fr;
    }

    .js-event-detail.is-stage-editor .stage-studio {
        grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 34%);
        grid-template-rows: minmax(0, 1fr);
    }

    .js-event-detail.is-stage-editor .stage-ops-rail {
        grid-row: auto;
    }

    .js-event-detail.is-stage-editor .stage-ops-main {
        border-bottom: none;
        border-right: 1px solid rgba(15, 23, 42, 0.06);
    }

    .js-event-detail.is-stage-editor .stage-canvas-pane {
        grid-column: auto;
    }

    .js-event-detail.is-stage-editor .stage-preview-frame {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .stage-studio {
        grid-template-columns: 1fr;
    }

    .stage-ops-rail {
        grid-row: auto;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .stage-ops-rail-sep {
        width: 1px;
        height: auto;
        margin: 6px 2px;
    }

    .stage-ops-btn {
        min-width: 64px;
    }

    .stage-canvas-pane {
        grid-column: auto;
    }

    .stage-ops-item-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--gray-100);
    color: var(--brand-primary);
}

.copy-tooltip {
    position: absolute;
    background: var(--gray-900);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    transform: translateX(-50%);
    animation: copyTooltipFade 1.2s ease forwards;
}

@keyframes copyTooltipFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
    12% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.table-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table-simple th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-default);
}

.table-simple td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Admin Sistem Ayarları hub ---------- */

.settings-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.settings-hub-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
}

.settings-hub-card:hover {
    border-color: var(--border-strong, var(--brand-primary));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    color: inherit;
}

.settings-hub-card-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-hub-card-body {
    flex: 1;
    min-width: 0;
}

.settings-hub-card-title {
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.settings-hub-card-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 10px;
}

.settings-hub-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.settings-hub-card-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 18px;
    margin-top: 4px;
}

.settings-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.settings-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.settings-breadcrumb a:hover {
    color: var(--brand-primary);
}

/* ——— Admin organizatör listesi / detay ——— */
.org-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.org-page-title {
    font-size: 20px;
    margin: 0 0 4px;
}

.org-page-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.45;
}

.org-page-count {
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: var(--gray-100, #f3f4f6);
    border-radius: var(--radius-md);
}

.org-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
}

.org-filter-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

.org-filter-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
}

.org-filter-search input {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    font-size: 13.5px;
    background: var(--bg-page, #fff);
}

.org-filter-segments {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--gray-100, #f3f4f6);
    border-radius: var(--radius-md);
    margin-left: auto;
}

.org-filter-seg {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: calc(var(--radius-md) - 2px);
    transition: background var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
}

.org-filter-seg:hover {
    color: var(--text-primary);
}

.org-filter-seg.active {
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.org-view-toggle {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--gray-100, #f3f4f6);
    border-radius: var(--radius-md);
}

.org-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: calc(var(--radius-md) - 2px);
    transition: background var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
}

.org-view-btn:hover {
    color: var(--text-primary);
}

.org-view-btn.active {
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.org-view-btn i {
    font-size: 16px;
}

.org-list-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.org-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: 12px;
    border-radius: 10px;
}

.org-list-table tbody tr.org-list-row {
    cursor: pointer;
    transition: background var(--duration-fast, 120ms) ease;
}

.org-list-table tbody tr.org-list-row:hover {
    background: var(--gray-50, #f9fafb);
}

.org-list-chevron {
    text-align: right;
    color: var(--text-muted);
    width: 40px;
}

.org-list-row:hover .org-list-chevron {
    color: var(--brand-primary);
}

.org-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.org-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-fast, 120ms) ease,
                box-shadow var(--duration-fast, 120ms) ease,
                transform var(--duration-fast, 120ms) ease;
}

.org-card:hover {
    border-color: var(--border-strong, var(--brand-primary));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    color: inherit;
}

.org-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.org-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--purple-50, #f3e8ff);
    color: var(--purple-600, #7c3aed);
}

.org-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 20px;
    border-radius: 16px;
}

.org-card-identity {
    flex: 1;
    min-width: 0;
}

.org-card-name {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-card-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.org-card-meta i {
    margin-right: 4px;
    font-size: 14px;
    vertical-align: -2px;
}

.org-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-default);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.org-card:hover .org-card-footer {
    color: var(--brand-primary);
}

.org-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 13.5px;
    background: var(--bg-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-xl);
}

.org-empty i {
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.55;
}

.org-pagination {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.org-detail-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px;
    margin-bottom: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
}

.org-detail-hero-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-width: 0;
}

.org-detail-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.org-detail-name {
    margin: 0;
    font-size: 22px;
}

.org-detail-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.org-detail-contact i {
    margin-right: 5px;
    font-size: 14px;
    vertical-align: -2px;
}

.org-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.org-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.org-stat {
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
}

.org-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}

.org-stat-label {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.org-detail-section {
    padding: 0;
    overflow: hidden;
}

.org-detail-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-default);
}

.org-detail-section-head h3 {
    margin: 0;
    font-size: 14.5px;
}

.impersonation-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px 5px 12px;
    background: var(--amber-50);
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    color: var(--amber-700);
}

.impersonation-banner form {
    margin: 0;
}

.impersonation-banner .btn {
    height: 28px;
    font-size: 12px;
    padding: 0 10px;
}

/* ——— Admin etkinlik listesi / detay ——— */
.evt-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-50, #ecfdf5);
    color: var(--green-700, #047857);
    font-size: 20px;
}

.evt-card-icon-lg {
    width: 64px;
    height: 64px;
    font-size: 28px;
    border-radius: 16px;
}

.evt-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.evt-info-body {
    padding: 4px 0;
}

.evt-info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default);
    font-size: 13.5px;
    align-items: start;
}

.evt-info-row:last-child {
    border-bottom: none;
}

.evt-info-label {
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    padding-top: 1px;
}

@media (max-width: 560px) {
    .evt-info-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Activity / form dialogs — contained glass (no spill) */
.activity-dialog,
.js-modal,
.js-dialog {
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    padding: 0;
    max-width: 500px;
    width: calc(100vw - 32px);
    max-height: min(86vh, 720px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow:
        0 24px 56px rgba(15, 23, 42, 0.18),
        0 2px 8px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: var(--text-primary);
    overflow: hidden;
}

/* Select / tarih menüsü açıkken kesilmesin (absolute overlay dialog çocuğu) */
.activity-dialog.js-overlay-open,
.js-modal.js-overlay-open,
.js-dialog.js-overlay-open {
    overflow: visible;
}

.activity-dialog[open],
.js-modal[open],
.js-dialog[open] {
    display: flex;
    flex-direction: column;
}

.activity-dialog-form,
.js-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: inherit;
    overflow: hidden;
    border-radius: 12px;
}

.activity-dialog-body,
.js-modal-body,
.js-dialog-body {
    padding: 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.js-modal-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    min-width: 0;
}

.activity-dialog.js-modal--sm,
.js-modal--sm { max-width: 440px; }

.activity-dialog.js-modal--lg,
.js-modal--lg { max-width: 640px; }

.activity-dialog::backdrop,
.js-modal::backdrop,
.js-dialog::backdrop,
.js-confirm::backdrop {
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
}

.activity-dialog-form,
.js-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: inherit;
    overflow: hidden;
}

.activity-dialog-header,
.js-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.js-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-right: 8px;
}

.js-modal-kicker {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.activity-dialog-header h3,
.js-modal-header h3,
.js-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.js-modal-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 36em;
}

.js-modal-sub::before {
    content: none;
}

.js-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -2px -4px 0 0;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 15px;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.js-modal-close:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--text-primary);
}

.activity-dialog-body,
.js-modal-body,
.js-dialog-body {
    padding: 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.js-modal-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    min-width: 0;
}

.activity-dialog-body .form-field,
.js-modal-body .form-field {
    margin-bottom: 10px;
    gap: 4px;
}

.activity-dialog-body .form-field:last-child,
.js-modal-body .form-field:last-child,
.activity-dialog-body .form-row:last-child .form-field,
.js-modal-body .form-row:last-child .form-field {
    margin-bottom: 0;
}

.activity-dialog-body .form-field label,
.js-modal-body .form-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.activity-dialog-body .form-field input,
.activity-dialog-body .form-field select,
.activity-dialog-body .form-field textarea,
.js-modal-body .form-field input,
.js-modal-body .form-field select,
.js-modal-body .form-field textarea,
.activity-dialog-body .poll-question-row input,
.activity-dialog-body .poll-question-row select,
.activity-dialog-body .poll-question-row textarea,
.activity-dialog-body .quiz-q-row input,
.activity-dialog-body .quiz-q-row select,
.activity-dialog-body .quiz-q-row textarea,
.activity-dialog-body .prize-card input,
.activity-dialog-body .prize-card select {
    height: 34px;
    font-size: 13px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.activity-dialog-body .form-field textarea,
.js-modal-body .form-field textarea,
.activity-dialog-body .poll-question-row textarea,
.activity-dialog-body .quiz-q-row textarea {
    height: auto;
    min-height: 72px;
    padding: 8px 11px;
    resize: vertical;
}

.activity-dialog-body .form-field input:hover,
.activity-dialog-body .form-field select:hover,
.js-modal-body .form-field input:hover,
.js-modal-body .form-field select:hover {
    border-color: rgba(15, 23, 42, 0.16);
    background: #fff;
}

.activity-dialog-body .form-field input:focus,
.activity-dialog-body .form-field select:focus,
.activity-dialog-body .form-field textarea:focus,
.js-modal-body .form-field input:focus,
.js-modal-body .form-field select:focus,
.js-modal-body .form-field textarea:focus,
.activity-dialog-body .poll-question-row input:focus,
.activity-dialog-body .quiz-q-row input:focus,
.activity-dialog-body .prize-card input:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

/* Glass custom select (modal dropdown) */
.js-select {
    position: relative;
    width: 100%;
    z-index: 1;
}

.js-select.is-open {
    z-index: 40;
}

.js-select > select,
.js-select-source,
select.js-select-source,
select[data-js-select] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
}

.js-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px 0 11px;
    border-radius: 8px;
    border: 1px solid rgba(192, 38, 140, 0.14);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.js-select-trigger:hover {
    border-color: rgba(192, 38, 140, 0.28);
    background: #fff;
}

.js-select.is-open .js-select-trigger,
.js-select-trigger:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

.js-select-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.js-select-chevron {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--text-muted);
    transition: transform var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.js-select.is-open .js-select-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.js-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    bottom: auto;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    overflow: visible;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(192, 38, 140, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
}

.js-select-menu.is-drop-up,
.js-date-popover.is-drop-up {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Dialog'a taşınmış overlay: yüzde bottom parent yüksekliğine bağlı kalmasın; JS inline konum kullanır */
dialog .js-select-menu.is-drop-up,
dialog .js-date-popover.is-drop-up {
    bottom: auto;
}

.js-select-menu.is-align-end,
.js-date-popover.is-align-end {
    left: auto;
    right: 0;
}

.js-select-menu.is-open {
    display: flex;
}

.js-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}

.js-select-option:hover,
.js-select-option:focus {
    outline: none;
    background: rgba(192, 38, 140, 0.08);
    color: var(--accent-hover);
}

.js-select-option.is-active {
    background: rgba(192, 38, 140, 0.12);
    color: var(--accent);
    font-weight: 600;
}

.js-select-option-check {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--accent);
    opacity: 0;
}

.js-select-option.is-active .js-select-option-check {
    opacity: 1;
}

.activity-dialog-body .form-field textarea,
.js-modal-body .form-field textarea {
    height: auto;
    min-height: 72px;
    padding: 8px 11px;
}

.activity-dialog-body .form-row,
.js-modal-body .form-row {
    gap: 10px;
    margin-bottom: 0;
}

.activity-dialog-body .field-hint,
.js-modal-body .field-hint {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 2px;
    color: var(--text-muted);
}

.activity-dialog-body .alert,
.js-modal-body .alert {
    margin-bottom: 10px;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.activity-dialog-footer,
.js-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.activity-dialog-footer .btn-sm,
.js-modal-footer .btn-sm {
    height: 32px;
    padding: 0 13px;
    font-size: 12.5px;
    border-radius: 8px;
}

.activity-dialog-footer .btn-secondary,
.js-modal-footer .btn-secondary {
    background: var(--gray-50);
    border-color: rgba(15, 23, 42, 0.16);
    color: var(--text-primary);
}

.activity-dialog-footer .btn-secondary:hover,
.js-modal-footer .btn-secondary:hover {
    background: var(--gray-100);
    border-color: rgba(15, 23, 42, 0.22);
    color: var(--text-primary);
}

/* Glass date picker */
.js-date {
    position: relative;
    width: 100%;
    z-index: 1;
}

.js-date.is-open {
    z-index: 40;
}

.js-date-source,
input.js-date-source,
.js-date > input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.js-date-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px 0 11px;
    border-radius: 8px;
    border: 1px solid rgba(192, 38, 140, 0.14);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.js-date-trigger:hover {
    border-color: rgba(192, 38, 140, 0.28);
    background: #fff;
}

.js-date.is-open .js-date-trigger {
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
    background: #fff;
}

.js-date-trigger-label.is-placeholder {
    color: var(--text-muted);
}

.js-date-icon {
    color: var(--accent);
    font-size: 16px;
    flex-shrink: 0;
}

.js-date-popover {
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% + 6px);
    bottom: auto;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-width: 0;
    width: 100%;
    max-width: min(320px, calc(100vw - 24px));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow:
        0 22px 48px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(192, 38, 140, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
    overflow: visible;
}

.js-date-popover.is-open { display: flex; }

.js-date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.js-date-nav-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
}

.js-date-nav-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-secondary);
    cursor: pointer;
}

.js-date-nav-btn:hover {
    border-color: rgba(192, 38, 140, 0.25);
    color: var(--accent);
    background: #fff;
}

.js-date-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.js-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.js-date-cell {
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--text-primary);
    cursor: pointer;
}

.js-date-cell.is-empty {
    pointer-events: none;
}

.js-date-cell:hover {
    background: rgba(192, 38, 140, 0.08);
    color: var(--accent);
}

.js-date-cell.is-active {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(192, 38, 140, 0.28);
}

.js-date-time {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.js-date-time label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 650;
    color: var(--text-muted);
    flex: 1;
}

.js-date-time input {
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.9);
    padding: 0 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.js-date-time-sep {
    padding-bottom: 8px;
    font-weight: 700;
    color: var(--text-muted);
}

.js-date-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* Pink glass accents for select / modal focus */
.js-select-trigger {
    border-color: rgba(192, 38, 140, 0.14) !important;
}

.js-select.is-open .js-select-trigger,
.js-select-trigger:focus {
    border-color: rgba(192, 38, 140, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12) !important;
}

.js-select.is-open .js-select-chevron {
    color: var(--accent) !important;
}

.js-select-option:hover,
.js-select-option:focus {
    background: rgba(192, 38, 140, 0.08) !important;
    color: var(--accent-hover) !important;
}

.js-select-option.is-active {
    background: rgba(192, 38, 140, 0.12) !important;
    color: var(--accent) !important;
}

.js-select-option.is-active .js-select-option-check {
    color: var(--accent) !important;
}

.js-modal-stack {
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.55), rgba(248, 250, 252, 0.72)) !important;
    border-color: rgba(192, 38, 140, 0.1) !important;
}

.activity-dialog-body .form-field input:focus,
.js-modal-body .form-field input:focus,
.activity-dialog-body .form-field select:focus,
.js-modal-body .form-field select:focus,
.activity-dialog-body .form-field textarea:focus,
.js-modal-body .form-field textarea:focus {
    border-color: rgba(192, 38, 140, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12) !important;
}

.js-modal-header {
    box-shadow: inset 0 2px 0 0 var(--accent);
}

/* Confirm modal */
.js-confirm {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0;
    max-width: 400px;
    width: calc(100vw - 32px);
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
    color: var(--text-primary);
    overflow: hidden;
}

.js-confirm-inner {
    display: flex;
    flex-direction: column;
}

.js-confirm-body {
    display: flex;
    gap: 12px;
    padding: 18px 18px 8px;
    border-left: 3px solid var(--brand-primary);
}

.js-confirm[data-variant="danger"] .js-confirm-body {
    border-left-color: var(--status-error);
}

.js-confirm[data-variant="warning"] .js-confirm-body {
    border-left-color: var(--status-warning);
}

.js-confirm[data-variant="success"] .js-confirm-body {
    border-left-color: var(--status-success);
}

.js-confirm[data-variant="info"] .js-confirm-body {
    border-left-color: var(--brand-primary);
}

.js-confirm-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.js-confirm[data-variant="danger"] .js-confirm-icon {
    background: var(--status-error-tint);
    color: var(--status-error);
}

.js-confirm[data-variant="warning"] .js-confirm-icon {
    background: var(--status-warning-tint);
    color: var(--status-warning);
}

.js-confirm[data-variant="success"] .js-confirm-icon {
    background: var(--status-success-tint);
    color: var(--status-success);
}

.js-confirm-copy {
    min-width: 0;
    padding-top: 2px;
}

.js-confirm-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.js-confirm-message {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.js-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(253, 242, 248, 0.55);
    font-size: 12.5px;
    font-weight: 650;
    color: #334155;
    cursor: pointer;
}

.js-confirm-check.is-hidden {
    display: none !important;
}

.js-confirm-check input {
    margin-top: 2px;
    accent-color: #C0268C;
}

.js-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
}

.activity-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: none;
    align-items: stretch;
}

.activity-group {
    border: none;
    border-radius: var(--glass-radius, 12px);
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
    box-shadow: var(--glass-shadow, 0 8px 28px rgba(15, 23, 42, 0.06));
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.js-event-detail .activity-group.dash-panel {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.activity-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 650;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(253, 242, 248, 0.55);
}

.activity-group-header .dash-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.activity-group-header .dash-panel-title .ti {
    color: var(--accent, #C0268C);
    font-size: 15px;
}

.activity-group-header .dash-panel-sub {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.05);
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 1.6em;
    text-align: center;
}

.activity-group-header .dash-panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Kategori içi: küçük kare kart grid */
.activity-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 8px;
    padding: 10px 12px 12px;
    max-height: none;
    overflow: visible;
    background: transparent;
}

.activity-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 3px 0 0 rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.activity-item:hover {
    background: rgba(253, 242, 248, 0.72);
    border-color: rgba(192, 38, 140, 0.22);
}

.activity-item:has(.badge-yesil),
.activity-item:has(.badge-accent) {
    box-shadow: inset 3px 0 0 #C0268C;
    border-color: rgba(192, 38, 140, 0.2);
}

.activity-item-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.activity-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
    overflow: hidden;
}

.activity-item-title {
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    max-width: 100%;
    width: 100%;
}

.activity-item-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    width: 100%;
}

.activity-item-main > .badge,
.activity-item-status > .badge {
    font-size: 10px;
    padding: 1px 6px;
}

.activity-item-meta {
    margin-top: auto;
    font-size: 10.5px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    width: 100%;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.activity-item-meta > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item-sent {
    font-size: 10.5px;
    color: var(--green-700, #16A34A);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item-error {
    font-size: 10.5px;
    color: var(--red-700, #DC2626);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item-actions {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    width: 100%;
}

.activity-item-actions .btn-ghost.activity-btn-danger {
    margin-left: auto;
}

.activity-item-actions .btn {
    height: 26px;
    min-width: 26px;
    padding: 0 6px;
    font-size: 11px;
}

.activity-item-actions .btn .ti {
    font-size: 13px;
}

/* Kare kartta ikincil aksiyonlar ikon-only; birincil CTA metin tutar */
.activity-item-actions .btn:not(.btn-accent):has(> .ti) {
    padding: 0;
    width: 26px;
    font-size: 0;
    line-height: 0;
}

.activity-item-actions .btn:not(.btn-accent):has(> .ti) .ti {
    font-size: 13px;
    line-height: 1;
}

.activity-item-actions .btn.btn-accent {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

/* Kare kartta şişiren satır içi düzenleme gizlenir; birincil CTA kalır */
.activity-item .activity-inline-form {
    display: none !important;
}

.activity-item-actions form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 640px) {
    .activity-group-body {
        grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
        gap: 8px;
    }
}

.activity-btn-danger {
    color: var(--red-600) !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
    background: rgba(254, 242, 242, 0.9) !important;
}

.activity-btn-danger:hover {
    color: var(--red-700) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    background: #fff !important;
}

.activity-inline-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.activity-inline-input {
    height: 30px;
    font-size: 12px;
    width: 160px;
    padding: 0 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.activity-inline-input:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

.activity-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.activity-spin {
    animation: spin 1s linear infinite;
}

.event-activities {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.event-activities-list,
.event-activities-create {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-activities-list[hidden],
.event-activities-create[hidden] {
    display: none !important;
}

.event-activities .event-activities-cmdbar {
    padding: 10px 14px;
}

.event-activities-lead {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 520px;
}

.create-activity-back {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.create-activity-back[hidden] {
    display: none !important;
}

#createActivityDialog .js-modal-heading {
    flex: 1;
    min-width: 0;
}

.create-activity-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

#createActivityDialog .activity-type-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

#createActivityDialog [data-create-step][hidden] {
    display: none !important;
}

.activity-questions-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background var(--duration-fast) var(--ease-standard);
}

.activity-questions-strip:hover {
    background: rgba(253, 242, 248, 0.9);
}

.activity-questions-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
    background: rgba(253, 242, 248, 0.95);
    border: 1px solid rgba(192, 38, 140, 0.16);
    font-size: 15px;
}

.activity-questions-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-questions-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
}

.activity-questions-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.activity-questions-arrow {
    color: var(--text-muted);
    font-size: 15px;
}

.js-event-detail .activity-group.dash-panel {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid rgba(192, 38, 140, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.activity-groups {
    gap: 12px;
}

.activity-group-header {
    padding: 8px 12px;
}

/* Liste yoğunluğu override — kare kart grid üstteki kurallarda */
.activity-mode-toggle {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    margin-bottom: 10px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.activity-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.activity-mode-btn.is-active {
    color: var(--accent);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(192, 38, 140, 0.16);
}

.activity-dialog-footer--nested {
    display: none;
}

#createQuizManualForm.js-modal-stack,
#createQuizAiForm.js-modal-stack {
    margin: 0;
}

#createQuizManualForm[hidden],
#createQuizAiForm[hidden],
.activity-stage-options[hidden],
#recipientPickerStageDurationField[hidden],
#quizManualFooter[hidden],
#quizAiFooter[hidden] {
    display: none !important;
}

.activity-template-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.activity-template-label {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.activity-template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.activity-preview-label {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 0 6px;
}

.activity-detail-value {
    font-weight: 650;
    font-size: 13.5px;
}

.activity-detail-message {
    white-space: pre-wrap;
    font-size: 12.5px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.activity-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.activity-detail-stat {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.7);
}

.activity-detail-stat-label {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.activity-detail-stat-value {
    font-size: 15px;
    font-weight: 650;
}

.activity-recipient-toolbar {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
}

.activity-recipient-search {
    flex: 1;
    min-width: 0;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0 10px;
    font-size: 13px;
    background: #fff;
}

.activity-recipient-list {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
}

.activity-recipient-empty {
    padding: 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.activity-stage-options {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.activity-inline-check--block {
    display: flex;
    margin: 6px 0;
}

.event-activities .activity-type-grid {
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.event-activities .activity-type-card {
    padding: 11px 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: #fff;
}

.event-activities .activity-type-icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

/* Event detail: Participants / Questions / Messages */
.event-ops-tab {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.event-ops-cmdbar {
    padding: 10px 14px;
}

.event-ops-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.event-ops-search-input {
    height: 30px;
    width: min(240px, 100%);
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    font-size: 13px;
}

.event-ops-search-input:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

.event-ops-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.035);
}

.event-ops-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.event-ops-chip:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.75);
}

.event-ops-chip.is-active {
    color: var(--accent);
    background: rgba(253, 242, 248, 0.95);
    box-shadow: inset 0 0 0 1px rgba(192, 38, 140, 0.16);
}

.event-ops-chip-count {
    font-size: 11px;
    font-weight: 650;
    opacity: 0.8;
}

.event-ops-lead {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.event-ops-muted-text,
.event-ops-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.event-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.9);
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.event-bulk-bar[data-empty="1"] {
    opacity: 0.55;
}

.event-bulk-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.event-bulk-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.event-bulk-label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.js-event-detail .event-ops-panel.dash-panel {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid rgba(192, 38, 140, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.event-ops-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.event-ops-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.event-ops-table th {
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(253, 242, 248, 0.45);
    border-bottom: 1px solid rgba(192, 38, 140, 0.1);
}

.event-ops-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: middle;
}

.event-ops-table tbody tr:hover {
    background: rgba(253, 242, 248, 0.4);
}

.event-ops-col-check {
    width: 36px;
}

.event-ops-col-actions {
    width: 1%;
    white-space: nowrap;
}

.event-ops-name {
    font-weight: 650;
}

.event-ops-row-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.event-ops-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.event-ops-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #fff;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.event-ops-page.is-active {
    color: var(--accent);
    border-color: rgba(192, 38, 140, 0.28);
    background: rgba(253, 242, 248, 0.95);
}

.event-questions-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.js-event-detail .event-questions-panel.dash-panel {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid rgba(192, 38, 140, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: min(62vh, 560px);
    max-height: min(72vh, 680px);
}

.js-event-detail .event-participants-panel.dash-panel {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid rgba(192, 38, 140, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    padding: 0;
}

.event-participants-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(253, 242, 248, 0.35);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.event-participants-filters {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.event-participants-filters .event-ops-chip {
    border: none;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font: inherit;
    padding: 5px 10px;
    font-size: 12px;
}

.event-participants-search {
    margin: 0;
    margin-left: auto;
    flex: 0 0 auto;
    width: min(220px, 36%);
    min-width: 140px;
}

.event-participants-search .event-ops-search-input {
    width: 100%;
    height: 32px;
}

.event-participants-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
    white-space: nowrap;
}

.event-participants-actions .p-act {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 26px;
    padding: 0 7px;
    font-size: 11.5px;
    white-space: nowrap;
    flex: none;
}

.event-participants-actions .p-act .ti {
    font-size: 13px;
}

.event-participants-table td {
    padding: 5px 10px !important;
    line-height: 1.25;
}

.event-participants-table th {
    padding: 7px 10px !important;
}

.event-participants-table .event-ops-col-actions {
    width: 1%;
    white-space: nowrap;
}

.event-participants-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(253, 242, 248, 0.28);
}

.event-participants-pager .event-ops-page {
    border: none;
    cursor: pointer;
    font: inherit;
}

.event-participants-pager .event-ops-page:disabled {
    opacity: 0.35;
    cursor: default;
}

.event-participants-pager-meta {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .event-participants-toolbar {
        flex-wrap: wrap;
    }

    .event-participants-search {
        width: 100%;
        margin-left: 0;
    }
}

.event-questions-toolbar {
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(253, 242, 248, 0.35);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-questions-filters {
    margin: 0;
}

.event-questions-filters .event-ops-chip {
    border: none;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font: inherit;
}

.event-questions-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.event-question-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

.event-questions-empty {
    padding: 28px 16px;
    flex: 1;
    overflow: auto;
}

.event-questions-loading {
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.event-question-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 3px solid rgba(192, 38, 140, 0.45);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    margin-bottom: 8px;
}

.event-question-card.is-answered {
    border-left-color: #16A34A;
    background: rgba(248, 250, 252, 0.9);
}

.event-question-card.is-pending {
    border-left-color: var(--accent, #C0268C);
}

.event-question-body {
    flex: 1;
    min-width: 0;
}

.event-question-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.event-question-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.event-question-who {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text-primary);
}

.event-question-who .ti {
    font-size: 13px;
    color: var(--accent, #C0268C);
}

.event-question-answer {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(22, 163, 74, 0.16);
    border-left: 3px solid #16A34A;
    background: rgba(240, 253, 244, 0.65);
}

.event-question-answer-label {
    display: block;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.event-question-answer-text {
    font-size: 13px;
    white-space: pre-wrap;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.event-question-actions {
    flex-shrink: 0;
}

.js-event-detail .event-questions-side.dash-panel {
    display: none;
}

.event-top-questions {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-top-questions li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 12.5px;
}

.event-top-questions li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.event-top-questions-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.event-questions-ai {
    display: none;
}

.answer-preview {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.js-event-detail .event-messages-panel.dash-panel {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-left: 3px solid rgba(192, 38, 140, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    padding: 0;
}

.event-messages-shell {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    min-height: 560px;
    height: min(70vh, 640px);
    overflow-x: hidden;
    max-width: 100%;
}

.event-messages-sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.7);
}

.event-messages-sidebar-head {
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(253, 242, 248, 0.45);
}

.event-messages-list {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}

.event-messages-list-empty {
    padding: 14px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.event-messages-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(253, 242, 248, 0.35);
    color: var(--accent, #C0268C);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

.event-messages-load-more:hover {
    background: rgba(253, 242, 248, 0.7);
}

.msg-conv-item {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    overflow: hidden;
    box-sizing: border-box;
}

.msg-conv-item:hover {
    background: rgba(253, 242, 248, 0.55);
}

.msg-conv-item.is-active {
    background: rgba(253, 242, 248, 0.9);
    box-shadow: inset 3px 0 0 var(--accent);
}

.msg-conv-name {
    font-weight: 650;
    font-size: 13px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-conv-preview {
    font-size: 11.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-conv-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}

.event-messages-chat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
}

.event-messages-chat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.75);
    min-width: 0;
}

.event-messages-chat-titles {
    min-width: 0;
    overflow: hidden;
}

.event-messages-chat-title {
    font-weight: 650;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-messages-chat-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-messages-thread-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.event-messages-thread {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(232, 236, 243, 0.45);
    min-height: 0;
    max-width: 100%;
}

.event-messages-scroll-down {
    position: absolute;
    right: 16px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent, #C0268C);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.event-messages-scroll-down[hidden] {
    display: none !important;
}

.event-messages-scroll-down:hover {
    background: #fff;
    border-color: rgba(192, 38, 140, 0.28);
}

.event-messages-scroll-down .ti {
    font-size: 18px;
}

.event-messages-empty {
    margin: auto;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.msg-bubble-row {
    display: flex;
    max-width: 100%;
    min-width: 0;
}

.msg-bubble-row.outbound {
    justify-content: flex-end;
}

.msg-bubble-row.inbound {
    justify-content: flex-start;
}

.msg-bubble {
    max-width: min(75%, 100%);
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.msg-bubble-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.msg-bubble-row.outbound .msg-bubble {
    background: rgba(253, 242, 248, 0.95);
    border: 1px solid rgba(192, 38, 140, 0.14);
    border-bottom-right-radius: 4px;
}

.msg-bubble-row.inbound .msg-bubble {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom-left-radius: 4px;
}

.msg-bubble-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    text-align: right;
}

.event-messages-composer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.85);
    min-width: 0;
}

.event-messages-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    font-size: 13px;
}

.event-messages-input:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

.event-messages-send {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .event-questions-layout {
        grid-template-columns: 1fr;
    }

    .event-messages-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .event-messages-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        max-height: 220px;
    }

    .event-messages-chat {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .event-ops-cmdbar {
        flex-direction: column;
        align-items: stretch;
    }

    .event-ops-search {
        width: 100%;
    }

    .event-ops-search-input {
        flex: 1;
        width: auto;
    }

    .event-question-card {
        flex-direction: column;
    }

    .event-question-actions {
        width: 100%;
    }

    .event-question-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.form-section-label {
    font-size: 12px;
    font-weight: 650;
    color: var(--text-secondary);
    margin: 4px 0 10px;
    letter-spacing: 0.02em;
}

.prize-card,
.quiz-q-row,
.poll-question-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    min-width: 0;
}

.activity-dialog-body .prize-card:last-child,
.activity-dialog-body .quiz-q-row:last-child,
.activity-dialog-body .poll-question-row:last-child {
    margin-bottom: 10px;
}

.prize-card-head,
.quiz-q-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.prize-card-head span,
.quiz-q-row-head span {
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quiz-opt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.9);
    min-width: 0;
}

.quiz-opt-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.quiz-opt-row:has(input[type=radio]:checked) {
    border-color: rgba(192, 38, 140, 0.28);
    background: rgba(253, 242, 248, 0.85);
}

.hint-text {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0 0 12px;
    line-height: 1.4;
}

.announcement-preview {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #0b141a;
    color: #e9edef;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.announcement-preview strong {
    font-weight: 700;
}

.activity-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.activity-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: inherit;
    font: inherit;
    width: 100%;
}

.activity-type-card:hover {
    border-color: rgba(192, 38, 140, 0.22);
    background: rgba(253, 242, 248, 0.75);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.activity-type-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.activity-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(253, 242, 248, 0.95);
    color: var(--accent);
    border: 1px solid rgba(192, 38, 140, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.activity-type-body {
    flex: 1;
    min-width: 0;
}

.activity-type-title {
    font-size: 14px;
    font-weight: 650;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.activity-type-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.activity-type-arrow {
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.activity-type-card:hover .activity-type-arrow {
    color: var(--accent);
    opacity: 1;
}

.activity-back-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .activity-inline-input {
        width: 100%;
        max-width: none;
    }
}

.activity-back-btn:hover {
    border-color: var(--text-secondary) !important;
    background: var(--gray-100) !important;
}

.activity-type-card {
    min-height: 88px;
}

.activity-type-title {
    font-size: 16px;
}

.poll-choice-chip {
    flex: 1;
    min-width: 72px;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.95);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-primary);
}

.poll-options-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.poll-options-chips:empty {
    display: none;
}

.poll-options-field textarea {
    font-size: 12.5px;
}

/* ---------- Design system: layout helpers & states ---------- */

.page-header,
.js-toolbar.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    min-height: 34px;
}

.page-header-copy {
    min-width: 0;
}

.page-header-title {
    font-size: 15px;
    font-weight: 650;
    margin: 0;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.page-header-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    max-width: 560px;
    line-height: 1.4;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stat-grid {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    min-width: 140px;
    flex: 1;
    box-shadow: var(--shadow-panel);
    border-left: 3px solid var(--brand-primary);
}

.stat-card--success { border-left-color: var(--status-success); }
.stat-card--warning { border-left-color: var(--status-warning); }
.stat-card--danger { border-left-color: var(--status-error); }
.stat-card--muted { border-left-color: var(--gray-200); }

.stat-card-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.stat-card-value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.stat-card-meta {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--text-secondary);
}

.js-table,
.table-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.js-table th,
.table-simple th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-chrome);
    position: sticky;
    top: 0;
    z-index: 1;
}

.js-table td,
.table-simple td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
    line-height: 1.3;
}

.js-table tbody tr:last-child td,
.table-simple tbody tr:last-child td {
    border-bottom: none;
}

.js-table tbody tr:hover,
.table-simple tbody tr:hover {
    background: var(--bg-chrome);
}

.list-row {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12.5px;
    gap: 10px;
    color: var(--text-primary);
    transition: background var(--duration-fast) var(--ease-standard);
}

.list-row:last-child {
    border-bottom: none;
}

.list-row:hover {
    background: var(--bg-chrome);
}

.list-row-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.list-row-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
}

.list-row-meta {
    width: 140px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.form-actions--end {
    justify-content: flex-end;
}

.form-actions--sticky {
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 10px 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-default);
    justify-content: flex-end;
}

.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-md { display: flex; flex-direction: column; gap: 16px; }
.row-gap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 50;
}

.dropdown.open .dropdown-menu,
.dropdown-menu.is-open {
    display: block;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    z-index: 80;
}

dialog.activity-dialog,
dialog.js-modal,
dialog.js-confirm {
    /* sizing/header/footer: .js-modal block */
    color: var(--text-primary);
}

.modal {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    padding: 16px;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.loading-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: jsSpin 0.7s linear infinite;
}

@keyframes jsSpin {
    to { transform: rotate(360deg); }
}

.pagination {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    background: var(--bg-card);
}

.pagination .is-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.chart-card-header {
    margin-bottom: 12px;
}

.chart-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-card-body {
    flex: 1;
    position: relative;
    min-height: 180px;
}

.chart-card-body--center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-card--narrow {
    min-height: 280px;
}

/* ---------- Dashboard / list ops — crisp corporate, no soft fills ---------- */

.js-dashboard--ops,
.js-events--ops {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.dash-cmdbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.dash-cmdbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.dash-cmdbar-status {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.dash-cmdbar-dot {
    display: none;
}

.dash-cmdbar-sep {
    width: 1px;
    height: 14px;
    background: var(--border-default);
    flex-shrink: 0;
}

.dash-cmdbar-date {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.dash-cmdbar-time {
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.dash-cmdbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dash-kpi-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    min-width: 0;
    position: relative;
    transition: border-color var(--duration-base) var(--ease-standard),
                background var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.dash-kpi-item:hover {
    background: var(--bg-card);
    border-color: rgba(15, 23, 42, 0.16);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.dash-kpi-item.is-accent:hover {
    border-color: rgba(192, 38, 140, 0.28);
}

.dash-kpi-item.is-attention .dash-kpi-value {
    color: var(--status-warning);
}

.dash-kpi-item.is-accent .dash-kpi-value {
    color: var(--accent);
}

.dash-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 2px;
}

.dash-kpi-item.is-attention .dash-kpi-icon {
    background: rgba(255, 251, 235, 0.9);
    border-color: rgba(217, 119, 6, 0.2);
    color: var(--status-warning);
}

.dash-kpi-item.is-accent .dash-kpi-icon {
    background: rgba(253, 242, 248, 0.85);
    border-color: rgba(192, 38, 140, 0.16);
    color: var(--accent);
}

.dash-kpi-label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dash-kpi-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dash-kpi-meta {
    display: none;
}

/* Dashboard — yönetim merkezi */
.dash-ops-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-ops-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 108px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard);
}

.dash-ops-stat:hover {
    text-decoration: none;
    color: inherit;
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.92);
}

.dash-ops-stat.is-accent .dash-ops-stat-value {
    color: var(--accent);
}

.dash-ops-stat.is-attention .dash-ops-stat-value {
    color: var(--status-warning);
}

.dash-ops-stat.is-live .dash-ops-stat-value {
    color: var(--accent);
}

.dash-ops-stat-label {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dash-ops-stat-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dash-ops-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 12px;
    align-items: start;
}

.dash-ops-main,
.dash-ops-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dash-ops-panel-body {
    padding: 10px 12px 12px;
}

.dash-ops-empty,
.dash-ops-clear {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.dash-ops-empty i,
.dash-ops-clear i {
    font-size: 22px;
    color: var(--accent);
}

.dash-ops-clear i {
    color: var(--status-success);
}

.dash-ops-empty p,
.dash-ops-clear p {
    margin: 0;
}

.dash-ops-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-ops-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.72);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard);
}

.dash-ops-event.is-live {
    border-color: rgba(192, 38, 140, 0.18);
    background: linear-gradient(90deg, rgba(253, 242, 248, 0.72) 0%, rgba(255, 255, 255, 0.82) 100%);
}

.dash-ops-event:hover {
    border-color: rgba(192, 38, 140, 0.22);
    background: rgba(255, 255, 255, 0.92);
}

.dash-ops-event-main {
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.dash-ops-event-main:hover {
    text-decoration: none;
    color: inherit;
}

.dash-ops-event-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    min-width: 0;
}

.dash-ops-event-type {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-ops-event-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dash-ops-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dash-ops-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.dash-ops-event-meta i {
    font-size: 13px;
    color: var(--accent);
    opacity: 0.85;
}

.dash-ops-event-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.dash-ops-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 650;
    color: var(--text-secondary);
    text-decoration: none;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    white-space: nowrap;
    transition:
        color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.dash-ops-action:hover {
    color: var(--accent);
    border-color: rgba(192, 38, 140, 0.2);
    background: rgba(253, 242, 248, 0.9);
    text-decoration: none;
}

.dash-ops-action.is-attention {
    color: var(--status-warning);
    border-color: rgba(217, 119, 6, 0.22);
    background: rgba(255, 251, 235, 0.95);
}

.dash-ops-action.is-attention:hover {
    color: #B45309;
    border-color: rgba(217, 119, 6, 0.32);
}

.dash-ops-drafts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-ops-draft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.65);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard);
}

.dash-ops-draft:hover {
    text-decoration: none;
    color: inherit;
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.92);
}

.dash-ops-draft-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-ops-draft-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-ops-draft-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.dash-ops-draft-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 650;
    color: var(--accent);
}

.dash-ops-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dash-ops-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 68px;
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard);
}

.dash-ops-quick-btn:hover {
    text-decoration: none;
    color: inherit;
    border-color: rgba(192, 38, 140, 0.2);
    background: rgba(253, 242, 248, 0.75);
}

.dash-ops-quick-btn.is-accent {
    color: #fff;
    background: var(--accent);
    border-color: rgba(192, 38, 140, 0.4);
}

.dash-ops-quick-btn.is-accent:hover {
    background: var(--accent-hover);
    color: #fff;
}

.dash-ops-quick-btn i {
    font-size: 18px;
    opacity: 0.9;
}

.dash-ops-attention {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-ops-attention a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.65);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard);
}

.dash-ops-attention a:hover {
    text-decoration: none;
    color: inherit;
    border-color: rgba(192, 38, 140, 0.18);
    background: rgba(253, 242, 248, 0.7);
}

.dash-ops-attention-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
}

.dash-ops-attention-icon.is-warn {
    color: var(--status-warning);
    background: rgba(255, 251, 235, 0.95);
    border-color: rgba(217, 119, 6, 0.18);
}

.dash-ops-attention-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-ops-attention-copy strong {
    font-size: 12px;
    font-weight: 650;
    color: var(--text-primary);
}

.dash-ops-attention-copy span {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-ops-attention-go {
    flex: none;
    font-size: 14px;
    color: var(--text-muted);
}

.dash-ops-status {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-ops-status li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.dash-ops-status strong {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
    .dash-ops-layout {
        grid-template-columns: 1fr;
    }

    .dash-ops-side {
        order: -1;
    }

    .dash-ops-quick {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dash-ops-quick-btn {
        min-height: 58px;
        padding: 8px 9px;
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .dash-ops-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .dash-ops-stat {
        min-width: 0;
    }

    .dash-ops-event {
        grid-template-columns: 1fr;
    }

    .dash-ops-event-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .dash-ops-quick {
        grid-template-columns: 1fr 1fr;
    }
}

.dash-grid {
    display: grid;
    grid-template-columns: 1.35fr 1.15fr 0.9fr;
    gap: 12px;
    align-items: stretch;
}

.dash-panel,
.events-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dash-panel--table {
    width: 100%;
}

.dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-default);
}

.dash-panel-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    min-width: 0;
}

.dash-panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
}

.dash-panel-sub {
    display: inline;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.dash-panel-sub::before {
    content: none;
}

.dash-panel-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.dash-panel-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.dash-panel-body {
    padding: 14px 16px;
    flex: 1;
    min-height: 0;
}

.dash-panel-body--flush {
    padding: 0;
}

.dash-panel-body--status {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.dash-chart {
    position: relative;
    height: 220px;
    width: 100%;
}

.dash-status-chart {
    position: relative;
    height: 140px;
    width: 100%;
}

.dash-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dash-status-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.dash-status-list li:last-child {
    border-bottom: none;
}

.dash-status-list strong {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.dash-status-swatch {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    flex-shrink: 0;
}

.dash-status-swatch.is-draft { background: #94A3B8; }
.dash-status-swatch.is-published { background: var(--status-success); }
.dash-status-swatch.is-live { background: var(--accent); }
.dash-status-swatch.is-done { background: #CBD5E1; }

.dash-table-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.events-cmd-chip,
.events-status-dot {
    display: none;
}

.events-panel .dash-panel-sub {
    margin-left: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
}

.event-row-title-link {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
}

.event-row-title-link:hover {
    color: var(--brand-primary);
}

.events-table-muted {
    color: var(--text-muted);
    font-size: 12.5px;
}

.events-table-actions {
    width: 44px;
    text-align: right;
}

.js-templates-hub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.tpl-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.tpl-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
    padding: 20px 18px 16px;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.07),
        0 1px 2px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard);
}

.tpl-hub-card:hover,
.tpl-hub-card:focus-visible {
    text-decoration: none;
    color: inherit;
    border-color: rgba(192, 38, 140, 0.28);
    background:
        linear-gradient(165deg, #fff 0%, rgba(253, 242, 248, 0.55) 100%);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.1),
        0 0 0 3px rgba(192, 38, 140, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    outline: none;
}

.tpl-hub-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    opacity: 0.85;
}

.tpl-hub-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: 6px;
    border-radius: 12px;
    color: var(--accent);
    background: rgba(253, 242, 248, 0.95);
    border: 1px solid rgba(192, 38, 140, 0.14);
    font-size: 24px;
}

.tpl-hub-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 6px;
    flex: 1;
    min-width: 0;
}

.tpl-hub-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--text-primary);
}

.tpl-hub-card-desc {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
}

.tpl-hub-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 12px 0 0 6px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.tpl-hub-card-count {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-muted);
}

.tpl-hub-card-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: background var(--duration-fast) var(--ease-standard);
}

.tpl-hub-card:hover .tpl-hub-card-go,
.tpl-hub-card:focus-visible .tpl-hub-card-go {
    background: var(--accent-hover);
}

.tpl-hub-card-go i {
    font-size: 16px;
    line-height: 1;
}

.dash-cmdbar-kicker-link {
    color: inherit;
    text-decoration: none;
}

.dash-cmdbar-kicker-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

@media (max-width: 960px) {
    .tpl-hub-grid {
        grid-template-columns: 1fr;
    }
}

/* Event list — compact glass cards */
.js-events .events-panel .dash-panel-head {
    padding: 8px 12px;
}

.evt-card-grid-wrap {
    padding: 10px 12px 12px;
}

.evt-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.evt-card {
    --evt-accent: var(--accent);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 11px 12px 10px 14px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    overflow: hidden;
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard);
}

.evt-card:hover,
.evt-card:focus-visible {
    text-decoration: none;
    color: inherit;
    border-color: rgba(192, 38, 140, 0.22);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 242, 248, 0.62) 100%);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    outline: none;
}

.evt-card-accent {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--evt-accent);
    border-radius: 0 2px 2px 0;
    opacity: 0.9;
}

.evt-card--live {
    --evt-accent: var(--accent);
}

.evt-card--draft {
    --evt-accent: #94A3B8;
}

.evt-card--done {
    --evt-accent: #64748B;
    opacity: 0.94;
}

.evt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.evt-card-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.evt-card-type {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evt-card-chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.04);
    transition:
        color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.evt-card-chevron i {
    font-size: 14px;
    line-height: 1;
}

.evt-card:hover .evt-card-chevron,
.evt-card:focus-visible .evt-card-chevron {
    color: var(--accent);
    background: rgba(253, 242, 248, 0.95);
}

.evt-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evt-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.evt-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.evt-card-chip i {
    flex: none;
    font-size: 12px;
    color: var(--accent);
    opacity: 0.85;
}

.evt-card--draft .evt-card-chip i,
.evt-card--done .evt-card-chip i {
    color: var(--text-muted);
}

.evt-card-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evt-card-foot {
    display: flex;
    align-items: center;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.evt-card-code {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.js-glass .evt-card {
    border-color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 640px) {
    .evt-card-grid {
        grid-template-columns: 1fr;
    }

    .evt-card-grid-wrap {
        padding: 8px 10px 10px;
    }

    .evt-card {
        padding: 10px 11px 9px 13px;
    }
}

/* Glass list surfaces — same soft language as modal */
.js-glass {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.js-glass .dash-cmdbar-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.js-glass .dash-cmdbar-kicker {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.js-glass .dash-cmdbar-status {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.js-glass .dash-cmdbar,
.js-glass .dash-panel,
.js-glass .events-panel {
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: var(--glass-shadow);
}

.js-glass .dash-kpi-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--glass-radius);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    padding: 14px 16px 16px;
}

.js-glass .dash-kpi-item::before {
    content: none;
}

.js-glass .dash-kpi-item.is-attention::before,
.js-glass .dash-kpi-item.is-accent::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.js-glass .dash-kpi-item.is-attention::before {
    background: var(--status-warning);
}

.js-glass .dash-kpi-item.is-accent::before {
    background: var(--accent);
}

.js-glass .dash-kpi-item:hover {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.js-glass .dash-kpi-item.is-accent:hover {
    border-color: rgba(192, 38, 140, 0.22);
}

.js-glass .dash-panel-link {
    color: var(--accent);
    font-weight: 650;
    text-decoration: none;
}

.js-glass .dash-panel-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.js-glass .dash-cmdbar {
    padding: 14px 18px;
}

.js-glass .dash-cmdbar-sep {
    height: 28px;
    background: rgba(15, 23, 42, 0.08);
}

.js-glass .dash-panel-head {
    padding: 12px 16px;
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-subtle);
}

.js-glass .dash-panel-title {
    font-size: 13.5px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.js-glass .dash-panel-sub {
    display: inline;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: none;
    border: none;
}

.js-glass .js-table th {
    padding: 9px 14px;
    background: rgba(248, 250, 252, 0.9);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.js-glass .js-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.045);
    background: transparent;
}

.js-glass .js-table tbody tr {
    transition: background var(--duration-fast) var(--ease-standard);
}

.js-glass .js-table tbody tr:hover {
    background: var(--brand-tint);
}

.js-glass .js-table tbody tr:last-child td {
    border-bottom: none;
}

.js-glass .empty-state {
    background: transparent;
    border: none;
    box-shadow: none;
}

.js-glass .badge {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(15, 23, 42, 0.1);
}

.js-glass .btn-ghost {
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.92);
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--text-secondary);
}

.js-glass .btn-ghost:hover {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.2);
    color: var(--text-primary);
}

.js-glass .btn-secondary {
    background: rgba(241, 245, 249, 0.95);
    border-color: rgba(15, 23, 42, 0.16);
    color: var(--text-primary);
}

.js-glass .btn-secondary:hover {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.22);
    color: var(--text-primary);
}

/* Responsive: modal + glass list + overlays stay in viewport */
@media (max-width: 640px) {
    dialog.activity-dialog,
    dialog.js-modal,
    dialog.js-dialog,
    dialog.js-confirm {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        margin: 0;
        width: calc(100vw - 24px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        height: auto;
        border-radius: 12px;
    }

    dialog.activity-dialog[open],
    dialog.js-modal[open],
    dialog.js-dialog[open] {
        display: flex;
        flex-direction: column;
    }

    .activity-dialog-form,
    .js-modal-form {
        max-height: calc(100dvh - 24px);
        min-height: 0;
    }

    .activity-dialog-header,
    .js-modal-header {
        padding: 12px 14px 10px;
    }

    .activity-dialog-body,
    .js-modal-body,
    .js-dialog-body {
        padding: 12px 14px;
    }

    .activity-dialog-footer,
    .js-modal-footer {
        padding: 10px 14px;
        flex-wrap: wrap;
    }

    .activity-dialog-footer .btn-sm,
    .js-modal-footer .btn-sm {
        flex: 1 1 auto;
        justify-content: center;
    }

    .js-modal-title {
        font-size: 15px;
    }

    .js-modal-sub {
        font-size: 11.5px;
    }

    .js-modal-stack {
        padding: 10px;
    }

    .activity-dialog-body .form-row,
    .js-modal-body .form-row,
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .js-date-popover {
        max-width: calc(100vw - 32px);
        gap: 8px;
        padding: 10px;
    }

    .js-date-cell {
        height: 28px;
        font-size: 12px;
        border-radius: 7px;
    }

    .js-date-nav-btn {
        width: 28px;
        height: 28px;
    }

    .js-select-menu {
        padding: 5px;
    }

    .js-select-option {
        padding: 7px 9px;
        font-size: 12px;
    }

    .js-glass .dash-cmdbar {
        padding: 12px 14px;
        gap: 10px;
    }

    .js-glass .dash-cmdbar-left {
        width: 100%;
    }

    .js-glass .dash-cmdbar-actions {
        width: 100%;
    }

    .js-glass .dash-cmdbar-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .js-glass .dash-panel,
    .js-glass .events-panel {
        border-radius: 10px;
    }

    .js-glass .dash-panel-body--flush,
    .js-events--ops .dash-panel-body--flush {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .js-glass .js-table {
        min-width: 640px;
    }
}

@media (max-width: 1200px) {
    .dash-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dash-panel--status {
        grid-column: 1 / -1;
    }

    .dash-panel-body--status {
        display: grid;
        grid-template-columns: 160px 1fr;
        align-items: center;
        gap: 16px;
    }

    .dash-status-chart {
        height: 150px;
    }
}

@media (max-width: 900px) {
    .dash-kpi {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .dash-kpi {
        grid-template-columns: 1fr;
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-panel--status {
        grid-column: auto;
    }

    .dash-panel-body--status {
        grid-template-columns: 1fr;
    }

    .dash-chart {
        height: 200px;
    }

    .dash-cmdbar-date {
        display: none;
    }
}


.empty-state--compact {
    padding: 20px 12px;
}

.host-flash {
    margin-bottom: 12px;
}

.host-flash[hidden] {
    display: none !important;
}

.host-flash.alert.js-toast,
#hostFlash.alert.js-toast {
    margin-bottom: 0;
}

.js-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.js-resource-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-panel);
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.js-resource-card:hover {
    border-color: rgba(67, 56, 202, 0.35);
    background: var(--brand-tint);
    box-shadow: var(--shadow-panel);
    transform: none;
    color: inherit;
}

.js-resource-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.js-resource-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-tint, var(--indigo-50));
    color: var(--brand-primary);
    font-size: 18px;
}

.js-resource-card-identity {
    flex: 1;
    min-width: 0;
}

.js-resource-card-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.js-resource-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.js-resource-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.js-resource-card-stats i {
    margin-right: 2px;
}

.js-resource-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px solid var(--border-subtle, var(--border-default));
}

.js-resource-card-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.js-resource-card-chevron {
    color: var(--text-muted);
}

.js-resource-card:hover .js-resource-card-chevron {
    color: var(--brand-primary);
}

.js-cert-preview {
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    background: var(--bg-page);
}

.js-dialog {
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
}

.js-dialog-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(85vh - 40px);
}

.js-dialog-title {
    margin-top: 0;
    font-size: 16px;
}

/* Event detail — glass ops shell */
.js-event-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.js-event-detail .event-detail-title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(420px, 55vw);
}

.event-detail-cmdbar .dash-cmdbar-left {
    flex-wrap: wrap;
    row-gap: 8px;
}

.event-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-detail-behavior {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.event-detail-behavior-label {
    display: inline-flex;
    color: var(--text-muted);
    cursor: pointer;
}

.event-detail-behavior .js-select,
.event-detail-behavior select {
    min-width: 0;
    max-width: 168px;
}

.event-detail-behavior .js-select-trigger {
    height: 30px;
    font-size: 12px;
    padding: 0 8px 0 10px;
}

.event-detail-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    border-radius: 12px;
    border: 1px solid rgba(192, 38, 140, 0.12);
    background: rgba(253, 242, 248, 0.55);
}

.event-detail-hint .ti {
    color: var(--accent);
    margin-top: 1px;
    flex-shrink: 0;
}

.event-detail-verify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

.event-detail-verify-copy {
    flex: 1;
    min-width: 200px;
}

.event-detail-tabs {
    display: none;
}

.event-detail-layout {
    --event-nav-width: 200px;
    display: grid;
    grid-template-columns: var(--event-nav-width) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    min-width: 0;
    min-height: calc(100vh - var(--topbar-height) - 40px - 72px);
    transition: grid-template-columns 0.2s var(--ease-standard, ease);
}

.event-detail-layout.is-nav-collapsed {
    --event-nav-width: 56px;
}

.event-detail-nav {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow: hidden;
    align-self: stretch;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
}

.event-detail-nav-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 8px 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.event-detail-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}

.event-detail-nav-toggle:hover {
    color: #C0268C;
    background: #FDF2F8;
    border-color: rgba(192, 38, 140, 0.28);
}

.event-detail-nav-toggle .ti {
    font-size: 18px;
    line-height: 1;
}

.event-detail-nav-head-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C0268C;
    white-space: nowrap;
    overflow: hidden;
}

.event-detail-nav-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 8px 12px;
    scrollbar-width: thin;
}

.event-detail-nav-group {
    margin: 8px 8px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent, #C0268C);
    white-space: nowrap;
    overflow: hidden;
}

.event-detail-nav-group:first-child {
    margin-top: 2px;
}

.event-detail-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    min-width: 0;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.event-detail-nav-link .ti {
    font-size: 16px;
    width: 18px;
    text-align: center;
    opacity: 0.88;
    flex-shrink: 0;
}

.event-detail-nav-link-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-detail-nav-link:hover {
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.04);
}

.event-detail-nav-link.is-active {
    color: #C0268C;
    background: #FDF2F8;
    box-shadow: inset 3px 0 0 #C0268C;
}

.event-detail-nav-link.is-active .ti {
    opacity: 1;
}

.event-detail-layout.is-nav-collapsed .event-detail-nav-head {
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
}

.event-detail-layout.is-nav-collapsed .event-detail-nav-head-label,
.event-detail-layout.is-nav-collapsed .event-detail-nav-group,
.event-detail-layout.is-nav-collapsed .event-detail-nav-link-label {
    display: none;
}

.event-detail-layout.is-nav-collapsed .event-detail-nav-inner {
    padding-left: 6px;
    padding-right: 6px;
    align-items: center;
}

.event-detail-layout.is-nav-collapsed .event-detail-nav-link {
    justify-content: center;
    width: 40px;
    padding: 9px 0;
    gap: 0;
}

.event-detail-layout.is-nav-collapsed .event-detail-nav-link.is-active {
    box-shadow: inset 0 0 0 1px rgba(192, 38, 140, 0.35);
}

.event-detail-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Sunum editörü — sabit, kaydırılamaz, ekrana sığ */
.app-content:has(.js-event-detail.is-stage-editor) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.app-content:has(.js-event-detail.is-stage-editor) .app-content-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.js-event-detail.is-stage-editor {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 8px;
}

.js-event-detail.is-stage-editor .event-detail-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.js-event-detail.is-stage-editor .event-detail-nav {
    position: sticky;
    top: 12px;
    align-self: stretch;
    overflow: hidden;
}

.js-event-detail.is-stage-editor .event-detail-body {
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.event-stage-tab {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.stage-editor-cmdbar {
    flex-shrink: 0;
}

.js-event-detail.is-stage-editor .stage-design-studio {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
}

.js-event-detail.is-stage-editor .stage-design-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px !important;
}

.js-event-detail.is-stage-editor .stage-settings-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.js-event-detail.is-stage-editor .stage-studio {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

.js-event-detail.is-stage-editor .stage-ops-main,
.js-event-detail.is-stage-editor .stage-ops-mode {
    min-height: 0;
    overflow: hidden;
}

.js-event-detail.is-stage-editor .stage-tool-panel {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Liste kaydırması event-stage ops override’ında kapatılır; burada yalnız eski kabuk */
.js-event-detail.is-stage-editor:not(.is-event-stage) .stage-ops-panel-list {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.js-event-detail.is-stage-editor .stage-canvas-pane {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.js-event-detail.is-stage-editor .stage-preview-fit {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.js-event-detail.is-stage-editor .stage-preview-workspace {
    flex: 1;
    min-height: 0;
}

.js-event-detail.is-stage-editor .stage-preview-main {
    flex: 1;
    min-height: 0;
}

.js-event-detail.is-stage-editor .stage-preview-frame {
    flex: none;
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

.stage-preview-fit {
    width: 100%;
    container-type: size;
}

@media (max-width: 960px) {
    .event-detail-layout {
        --event-nav-width: 188px;
        grid-template-columns: var(--event-nav-width) minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
    }

    .event-detail-layout.is-nav-collapsed {
        --event-nav-width: 44px;
        gap: 8px;
    }

    .event-detail-nav {
        position: sticky;
        top: 12px;
        max-height: calc(100vh - 24px);
        height: auto;
        min-height: calc(100vh - var(--topbar-height) - 40px - 72px);
        align-self: stretch;
    }

    .event-detail-nav-head {
        display: flex;
    }

    .event-detail-layout.is-nav-collapsed .event-detail-nav {
        min-height: 0;
        height: auto;
        max-height: none;
        align-self: start;
    }

    .event-detail-layout.is-nav-collapsed .event-detail-nav-head {
        justify-content: center;
        padding: 8px 4px;
        border-bottom: none;
    }

    .event-detail-layout.is-nav-collapsed .event-detail-nav-head-label,
    .event-detail-layout.is-nav-collapsed .event-detail-nav-inner {
        display: none;
    }

    .event-detail-layout.is-nav-collapsed .event-detail-nav-toggle {
        width: 34px;
        height: 34px;
    }

    .event-detail-nav-inner {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 8px 8px 12px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .event-detail-nav-group {
        width: auto;
        margin: 8px 8px 4px;
    }

    .event-detail-nav-link {
        width: auto;
        padding: 9px 10px;
        font-size: 13px;
        justify-content: flex-start;
        gap: 9px;
    }

    .event-detail-layout.is-nav-collapsed .event-detail-nav-link {
        display: none;
    }

    .app-content:has(.js-event-detail.is-stage-editor),
    .app-content:has(.js-event-detail.is-general-fit) {
        overflow: auto;
    }

    .js-event-detail.is-stage-editor,
    .js-event-detail.is-general-fit {
        height: auto;
        overflow: visible;
        flex: none;
        min-height: 0;
    }

    .js-event-detail.is-general-fit .event-detail-layout,
    .js-event-detail.is-general-fit .event-detail-body,
    .js-event-detail.is-general-fit .event-general-tab,
    .js-event-detail.is-general-fit .event-detail-grid {
        flex: none;
        min-height: 0;
        overflow: visible;
        height: auto;
    }

    .js-event-detail.is-general-fit .event-detail-grid > .dash-panel {
        height: auto;
    }

    .js-event-detail.is-general-fit .event-welcome-form .textarea-field {
        min-height: 120px;
        flex: none;
    }
}

.event-detail-tabs-track {
    display: flex;
    gap: 2px;
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.event-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.event-detail-tab .ti {
    font-size: 15px;
    opacity: 0.85;
}

.event-detail-tab:hover {
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.04);
}

.event-detail-tab.is-active {
    color: var(--accent);
    background: rgba(253, 242, 248, 0.9);
    box-shadow: inset 0 0 0 1px rgba(192, 38, 140, 0.14);
}

.event-detail-tab.is-active .ti {
    opacity: 1;
}

.event-detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.event-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    min-width: 0;
}

.event-kpi-label {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.event-kpi-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.15;
}

.event-kpi-value--text {
    font-size: 14px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

/* Genel sekme — kaydırma yok, alanı doldur */
.app-content:has(.js-event-detail.is-general-fit) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.app-content:has(.js-event-detail.is-general-fit) .app-content-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.js-event-detail.is-general-fit {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 10px;
}

.js-event-detail.is-general-fit .event-detail-cmdbar {
    flex-shrink: 0;
}

.js-event-detail.is-general-fit .event-detail-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.js-event-detail.is-general-fit .event-detail-nav {
    position: static;
    max-height: none;
    height: auto;
    align-self: stretch;
}

.js-event-detail.is-general-fit .event-detail-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
    display: flex;
    flex-direction: column;
}

.event-general-tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.js-event-detail.is-general-fit .event-detail-kpis {
    flex-shrink: 0;
}

.js-event-detail.is-general-fit .event-kpi {
    padding: 10px 12px;
}

.js-event-detail.is-general-fit .event-kpi-value {
    font-size: 20px;
}

.js-event-detail.is-general-fit .event-detail-grid {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

.js-event-detail.is-general-fit .event-detail-grid > .dash-panel {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.js-event-detail.is-general-fit .event-detail-grid > .dash-panel > .dash-panel-head {
    flex-shrink: 0;
}

.js-event-detail.is-general-fit .event-detail-grid > .dash-panel > .dash-panel-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.js-event-detail.is-general-fit .event-ops-body {
    height: 100%;
    align-items: center;
}

.js-event-detail.is-general-fit .event-welcome-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.js-event-detail.is-general-fit .event-welcome-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.js-event-detail.is-general-fit .event-welcome-form .textarea-field {
    flex: 1;
    min-height: 0;
    height: auto;
    resize: none;
}

.js-event-detail.is-general-fit .event-welcome-form .textarea-field-footer {
    flex-shrink: 0;
}

.event-ops-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
}

.event-ops-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-ops-identity,
.event-ops-meta,
.event-ops-code-row,
.event-ops-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.event-ops-identity[hidden],
.event-ops-code-row[hidden] {
    display: none !important;
}

.event-ops-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.event-ops-meta {
    margin-top: 4px;
}

.event-ops-meta .mono,
.event-ops-meta-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.event-ops-meta-sub {
    color: var(--text-muted);
    margin-bottom: 12px;
}

.event-ops-field {
    margin-bottom: 12px;
}

.event-ops-field-label {
    display: block;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.event-ops-code {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 12px;
}

.event-ops-link {
    font-size: 12px;
    word-break: break-all;
    color: var(--text-secondary);
}

.event-ops-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 10px;
    line-height: 1.45;
}

.event-ops-wa {
    font-size: 12.5px;
    margin-top: 2px;
}

.event-ops-wa-label {
    color: var(--text-muted);
}

.event-ops-wa-warn {
    color: var(--red-500);
}

.event-ops-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.event-ops-qr img {
    width: 132px;
    height: 132px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

.event-ops-qr-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.event-inline-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
}

.event-inline-edit[hidden] {
    display: none !important;
}

.event-inline-input {
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0 10px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.9);
    max-width: 280px;
    flex: 1;
    min-width: 140px;
}

.event-inline-input:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

.event-inline-input--code {
    max-width: 140px;
    flex: 0 0 140px;
    text-transform: uppercase;
}

.event-welcome-form .textarea-field {
    min-height: 120px;
}

/* Info / nested tabs inside event detail */
.js-event-detail .tabs {
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.55);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.js-event-detail .tab-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.event-info-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-info-roots {
    margin: 0 -4px;
}

.event-info-roots-track {
    display: flex;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.event-info-root {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.event-info-root .ti {
    font-size: 15px;
    opacity: 0.85;
}

.event-info-root:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.7);
}

.event-info-root.is-active {
    color: var(--accent);
    background: rgba(253, 242, 248, 0.95);
    box-shadow: inset 0 0 0 1px rgba(192, 38, 140, 0.16);
}

.event-info-root.is-active .ti {
    opacity: 1;
}

.event-info-form {
    max-width: 720px;
}

.event-info-root-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.event-info-root-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-info-root-kicker {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.event-info-root-title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.event-info-root-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.event-info-root-desc--inline {
    margin-bottom: 4px;
}

.event-info-root-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-info-status {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.event-info-status-legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 650;
    color: var(--text-secondary);
}

.event-info-status-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.event-info-status-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.event-info-status-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.event-info-status-option:has(input:checked) {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        inset 0 0 0 1px rgba(192, 38, 140, 0.14);
}

.event-info-status-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.event-info-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-info-fields[hidden] {
    display: none !important;
}

.event-info-textarea {
    min-height: 120px;
}

.event-info-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 4px;
}

.event-akis-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-akis-row {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.event-akis-row-top {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.event-akis-row .form-field {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .event-akis-row-top {
        grid-template-columns: 1fr;
    }

    .event-info-status-toggle {
        width: 100%;
    }

    .event-info-status-option {
        flex: 1;
    }
}

@media (max-width: 420px) {
    .event-info-root .ti {
        display: none;
    }
}

@media (max-width: 960px) {
    .event-detail-grid {
        grid-template-columns: 1fr;
    }

    .event-detail-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .js-event-detail .event-detail-title {
        max-width: 100%;
        white-space: normal;
    }

    .event-detail-behavior {
        width: 100%;
    }

    .event-detail-behavior .js-select,
    .event-detail-behavior select {
        max-width: none;
        flex: 1;
    }

    .event-detail-actions {
        width: 100%;
    }

    .event-detail-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .event-ops-body {
        grid-template-columns: 1fr;
    }

    .event-ops-qr {
        order: -1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        margin-bottom: 4px;
    }

    .event-ops-qr img {
        width: 96px;
        height: 96px;
    }

    .event-kpi-value {
        font-size: 18px;
    }
}

@media (max-width: 420px) {
    .event-detail-tab .ti {
        display: none;
    }
}

.host-page {
    max-width: 880px;
}

.host-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.host-back {
    font-size: 12.5px;
    color: var(--text-secondary);
    text-decoration: none;
}

.host-back:hover {
    color: var(--brand-primary);
}

.host-kpis {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    }

@media (max-width: 767px) {
.js-card-grid {
        grid-template-columns: 1fr;
    }
.topbar-user-meta {
        display: none;
}

    .topbar-kicker {
        display: none;
    }

    .topbar {
        padding: 0 16px;
    }

    .topbar-title {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
}

.topbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--slate);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.topbar-toggle:hover {
    background: var(--brand-tint);
    border-color: rgba(67, 56, 202, 0.28);
    color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1);
}

.topbar-toggle i {
    font-size: 20px;
    line-height: 1;
}

.sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    z-index: 35;
}

.org-avatar {
    background: var(--brand-tint);
    color: var(--brand-primary-hover);
}

@media (max-width: 767px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform var(--duration-base) var(--ease-standard);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-scrim {
        display: block;
    }

    .topbar-toggle {
        display: inline-flex;
    }

    .app-content {
        padding: 16px;
    }

    .stat-grid {
        flex-direction: column;
    }

    .list-row {
        flex-wrap: wrap;
    }

    .list-row-meta {
        width: auto;
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.topbar-user-chevron {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
}

.topbar-user.open .topbar-user-chevron {
    transform: rotate(180deg);
    color: var(--brand-primary);
}
.participation-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg-page); }
.form-row { display: flex; gap: 12px; }
.form-row .form-field { flex: 1; min-width: 0; }
.field-hint { font-size: 11px; color: var(--text-muted); }
.section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.section-label--success { color: var(--green-700); }
.section-label--muted { color: var(--text-secondary); }
.section-label--faint { color: var(--text-muted); margin-top: 22px; }
.section-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.event-row-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; }
.event-row-copy { flex: 1; min-width: 0; }
.event-row-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-row-sub { font-size: 11px; color: var(--text-muted); }
.list-muted { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.list-row-sub { margin-top: 4px; font-size: 11.5px; color: var(--text-secondary); }
.split-cards { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.split-cards > .card { flex: 1; min-width: 340px; }
.consent-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 8px; cursor: pointer; }
.consent-option-title { font-weight: 700; font-size: 13.5px; }
.consent-option-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.auth-lede { font-size: 13px; color: var(--text-secondary); margin-top: 0; }
.auth-card-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.alert-kicker { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; }
.alert-mono-block { display: block; font-size: 12.5px; margin-top: 4px; word-break: break-all; }
.alert-hint { font-size: 11px; margin-top: 4px; opacity: 0.85; }
.otp-code { font-size: 24px; font-weight: 700; letter-spacing: 0.15em; margin-top: 4px; text-align: center; }
.text-center { text-align: center; }
.mt-2 { margin-top: 10px; }
.card--narrow { max-width: 520px; }
.page-stack { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.form-spaced { margin-top: 10px; }
.btn-whatsapp { width: 100%; height: 64px; border: none; border-radius: var(--radius-lg); background: var(--whatsapp); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.btn-whatsapp:disabled { opacity: 0.5; cursor: not-allowed; }
.legal-note { text-align: center; margin-top: 14px; font-size: 11.5px; color: var(--text-muted); }
.settings-hub-icon-wa { background: var(--whatsapp-tint); color: var(--green-700); }
.settings-hub-icon-ai { background: var(--brand-tint); color: var(--brand-primary-hover); }
.settings-hub-card-icon i { font-size: 28px; }
.page-header-subtitle { margin-bottom: 18px; }
.confirm-icon { font-size: 40px; color: var(--whatsapp); }
.confirm-title { font-size: 16px; font-weight: 700; margin-top: 10px; }
.confirm-desc { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.confirm-code { margin-top: 14px; font-size: 13px; }
.confirm-prefill {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-all;
}
.sidebar-bottom form { margin: 0; }
.sidebar-bottom .sidebar-link { width: 100%; }
.card-flush { overflow: hidden; }

/* ── Auth / Login & Register (JoinStage glass) ── */
.auth-page {
    margin: 0;
    min-height: 100vh;
    background: #0B1220;
}

.auth-page .auth-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: 56px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(11, 18, 32, 0.62);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 -1px 0 rgba(192, 38, 140, 0.18);
}

.auth-page .auth-topbar-inner {
    height: 100%;
    width: min(100% - 32px, 1120px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.auth-page .auth-topbar-brand img {
    height: 26px;
    width: auto;
    display: block;
}

.auth-page .auth-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-page .auth-topbar-link {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}

.auth-page .auth-topbar-link:hover,
.auth-page .auth-topbar-link.is-active {
    color: #fff;
    background: rgba(192, 38, 140, 0.18);
}

.auth-page .auth-topbar-cta {
    text-decoration: none;
}

.auth-page .auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: calc(56px + 28px) 20px 32px;
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-page .auth-bg {
    position: fixed;
    inset: 0;
    background:
        url('/images/auth/login-bg.png') center / cover no-repeat,
        linear-gradient(135deg, #0B1220 0%, #0F172A 100%);
    z-index: 0;
}

.auth-page .auth-overlay {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(11, 18, 32, 0.72) 0%, rgba(11, 18, 32, 0.42) 48%, rgba(15, 23, 42, 0.55) 100%),
        radial-gradient(ellipse 55% 45% at 18% 45%, rgba(192, 38, 140, 0.16) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.auth-page .auth-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    margin: 0;
}

.auth-page .auth-wrap:has(.auth-panel--register) {
    max-width: 480px;
}

.auth-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(192, 38, 140, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    padding: 28px 28px 24px;
    overflow: hidden;
}

.auth-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C0268C, rgba(192, 38, 140, 0.25));
}

.auth-panel-head {
    margin-bottom: 20px;
}

.auth-kicker {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.auth-panel-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0F172A;
}

.auth-panel-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #64748B;
}

.auth-page .auth-alert {
    margin-bottom: 14px;
}

.auth-panel-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-page .auth-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-page .auth-field label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.auth-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.auth-field-label-row label {
    margin-bottom: 0 !important;
}

.auth-link-muted {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748B;
    text-decoration: none;
}

.auth-link-muted:hover {
    color: #C0268C;
}

.auth-page .auth-field input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    color: #0F172A;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-page .auth-field input::placeholder {
    color: #94A3B8;
}

.auth-page .auth-field input:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 4px rgba(192, 38, 140, 0.16);
}

.auth-page .auth-field .field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #DC2626;
}

.auth-page .auth-password-wrap {
    position: relative;
}

.auth-page .auth-password-wrap .auth-password-input {
    padding-right: 44px;
}

.auth-page .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748B;
    cursor: pointer;
}

.auth-page .auth-password-toggle:hover {
    color: #0F172A;
    background: rgba(15, 23, 42, 0.05);
}

.auth-panel-submit {
    margin-top: 4px;
}

.auth-oauth {
    margin-top: 16px;
}

.auth-oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #94A3B8;
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auth-oauth-divider::before,
.auth-oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(15, 23, 42, 0.1);
}

.auth-oauth-form {
    margin: 0;
}

.auth-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px;
    font-size: 14.5px;
    font-weight: 650;
    color: #0F172A;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.auth-google-btn:hover {
    color: #0F172A;
    background: #fff;
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 0 0 4px rgba(192, 38, 140, 0.1);
}

.auth-google-btn:focus-visible {
    outline: none;
    border-color: rgba(192, 38, 140, 0.45);
    box-shadow: 0 0 0 4px rgba(192, 38, 140, 0.16);
}

.auth-google-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-page .auth-field input.auth-input-readonly,
.auth-page .auth-field input.auth-input-readonly:focus {
    color: #64748B;
    background: rgba(241, 245, 249, 0.85);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: none;
    cursor: default;
}

.auth-panel-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 13.5px;
    color: #64748B;
}

.auth-panel-foot a {
    font-weight: 600;
    color: #C0268C;
    text-decoration: none;
}

.auth-panel-foot a:hover {
    color: #A21CAF;
}

.auth-otp-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(192, 38, 140, 0.18);
    background: rgba(253, 242, 248, 0.65);
}

.auth-otp-timer-label {
    font-size: 12px;
    font-weight: 650;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auth-otp-timer-value {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 22px;
    font-weight: 700;
    color: #C0268C;
    letter-spacing: 0.06em;
}

.auth-otp-timer.is-expired {
    border-color: rgba(220, 38, 38, 0.2);
    background: rgba(254, 242, 242, 0.7);
}

.auth-otp-timer.is-expired .auth-otp-timer-value {
    color: #DC2626;
}

.auth-otp-input {
    letter-spacing: 0.35em !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 22px !important;
    font-weight: 650 !important;
    text-align: center;
}

.auth-otp-resend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.auth-otp-resend-hint {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
    text-align: center;
}

@media (max-width: 560px) {
    .auth-page .auth-shell {
        align-items: flex-start;
        padding: calc(56px + 16px) 16px 24px;
    }

    .auth-page .auth-wrap,
    .auth-page .auth-wrap:has(.auth-panel--register) {
        max-width: 100%;
    }

    .auth-panel {
        padding: 22px 18px 18px;
    }

    .auth-field-grid {
        grid-template-columns: 1fr;
    }

    .auth-page .auth-field input {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .auth-page .auth-shell {
        justify-content: center;
    }
}

/* ── Consent / join (QR landing) ── */
.auth-page--consent {
    overflow-x: hidden;
}

.auth-page--consent .auth-shell {
    justify-content: center;
    padding: calc(56px + clamp(16px, 3vw, 32px)) clamp(16px, 4vw, 48px) clamp(20px, 4vw, 48px);
}

.auth-page--consent .auth-wrap {
    margin-left: 0;
    max-width: 420px;
}

.auth-page--consent .auth-overlay {
    background:
        linear-gradient(180deg, rgba(10, 14, 39, 0.55) 0%, rgba(10, 14, 39, 0.42) 45%, rgba(15, 23, 42, 0.58) 100%),
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(192, 38, 140, 0.12) 0%, transparent 65%);
}

.consent-panel.auth-card--glass {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 22px;
    gap: 0;
}

.consent-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.consent-brand .auth-brand-logo {
    height: 28px;
    margin: 0;
}

.consent-header {
    text-align: center;
    margin-bottom: 16px;
}

.consent-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #C0268C);
    margin-bottom: 6px;
}

.consent-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.02em;
}

.consent-lede {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.58);
}

.consent-alert {
    margin-bottom: 12px;
}

.consent-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.consent-panel .consent-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.consent-panel .consent-option:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}

.consent-panel .consent-option:has(input:checked) {
    border-color: rgba(192, 38, 140, 0.45);
    background: rgba(192, 38, 140, 0.1);
}

.consent-panel .consent-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent, #C0268C);
    cursor: pointer;
}

.consent-option-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consent-option-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.consent-panel .consent-option-title {
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.3;
}

.consent-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.consent-badge--required {
    color: #fda4af;
    border-color: rgba(244, 63, 94, 0.45);
}

.consent-panel .consent-option-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.5);
}

.consent-panel .btn-whatsapp.consent-submit {
    height: 48px;
    margin-top: 6px;
    border-radius: 12px;
    font-size: 15px;
}

.consent-legal {
    margin: 8px 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.4);
}

.consent-empty {
    padding: 8px 0 4px;
}

.consent-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.consent-empty-desc {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767px) {
    .auth-page--consent {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .auth-page--consent .auth-shell {
        min-height: 100dvh;
        height: 100dvh;
        padding:
            max(10px, env(safe-area-inset-top, 0px))
            max(14px, env(safe-area-inset-right, 0px))
            max(10px, env(safe-area-inset-bottom, 0px))
            max(14px, env(safe-area-inset-left, 0px));
        align-items: stretch;
        box-sizing: border-box;
    }

    .auth-page--consent .auth-wrap {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        max-width: 100%;
        width: 100%;
    }

    .auth-page--consent .consent-panel.auth-card--glass {
        flex: 1;
        min-height: 0;
        justify-content: center;
        padding: 16px 16px 14px;
        border-radius: 18px;
        overflow: hidden;
    }

    .auth-page--consent .consent-brand {
        margin-bottom: 10px;
    }

    .auth-page--consent .consent-brand .auth-brand-logo {
        height: 24px;
    }

    .auth-page--consent .consent-header {
        margin-bottom: 10px;
    }

    .auth-page--consent .consent-title {
        font-size: 18px;
    }

    .auth-page--consent .consent-lede {
        margin-top: 6px;
        font-size: 12px;
    }

    .auth-page--consent .consent-form {
        gap: 6px;
    }

    .auth-page--consent .consent-panel .consent-option {
        padding: 8px 10px;
        gap: 8px;
    }

    .auth-page--consent .consent-panel .consent-option-title {
        font-size: 12.5px;
    }

    .auth-page--consent .consent-panel .consent-option-desc {
        font-size: 11px;
    }

    .auth-page--consent .consent-panel .btn-whatsapp.consent-submit {
        height: 46px;
        margin-top: 4px;
        font-size: 14.5px;
    }

    .auth-page--consent .consent-legal {
        margin-top: 6px;
        font-size: 10.5px;
    }
}

/* Corporate event detail + list helpers */

/* Host kontrol — cam + projektör şeridi */
.host-page--glass {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.host-projector-strip .dash-panel-head {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.host-projector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.host-projector-form {
    display: inline;
    margin: 0;
}

.host-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Sunum kontrol — sayfa sabit; yalnız slayt listesi kayar */
.app-content:has(.pres-host) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.app-content:has(.pres-host) .app-content-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pres-host.host-page--glass {
    max-width: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 12px;
}

.pres-host-cmdbar {
    flex-shrink: 0;
}

.pres-host-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pres-host-nav .dash-cmdbar-date {
    min-width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pres-host-layout {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.pres-host-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
}

.pres-host-nav-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
    color: #0F172A;
    cursor: pointer;
}

.pres-host-nav-btn:hover:not(:disabled) {
    border-color: rgba(192, 38, 140, 0.4);
    background: #FDF2F8;
    color: #C0268C;
}

.pres-host-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pres-host-preview-fit {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
}

.pres-host-preview {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    background: #0B1220;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
}

.pres-host-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.pres-host-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.pres-host-strip-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
}

.pres-host-strip-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pres-host-strip-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C0268C;
}

.pres-host-strip-count {
    font-size: 11px;
    font-weight: 650;
    color: var(--text-muted, #64748B);
    font-family: var(--font-mono), 'IBM Plex Mono', monospace;
}

.pres-host-strip-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pres-host-add-btn {
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.pres-host-add-form {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pres-host-strip-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 2px 6px;
    scroll-snap-type: y proximity;
    scrollbar-width: thin;
}

.pres-host-strip-empty {
    padding: 14px 8px;
    font-size: 12.5px;
    color: var(--text-muted, #64748B);
}

.pres-host-slide {
    position: relative;
    flex: none;
    width: 100%;
    scroll-snap-align: start;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    cursor: grab;
}

.pres-host-slide:active {
    cursor: grabbing;
}

.pres-host-slide.is-dragging {
    opacity: 0.45;
}

.pres-host-slide.is-drop-target {
    box-shadow: 0 -2px 0 0 #C0268C;
}

.pres-host-slide:hover {
    border-color: rgba(192, 38, 140, 0.45);
    background: #FDF2F8;
}

.pres-host-slide.is-current {
    border-color: #C0268C;
    box-shadow: inset 3px 0 0 #C0268C;
    background: #FDF2F8;
}

.pres-host-slide-hit {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 6px;
    border: 0;
    background: transparent;
    cursor: inherit;
    text-align: center;
}

.pres-host-slide-hit img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0B1220;
    border-radius: 6px;
    display: block;
    pointer-events: none;
}

.pres-host-slide-hit span {
    font-size: 11px;
    font-weight: 650;
    color: var(--text-muted, #64748B);
    font-family: var(--font-mono), 'IBM Plex Mono', monospace;
}

.pres-host-slide-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.pres-host-slide:hover .pres-host-slide-del,
.pres-host-slide:focus-within .pres-host-slide-del {
    opacity: 1;
}

.pres-host-slide-del:hover {
    background: #DC2626;
}

.pres-host:focus {
    outline: none;
}

.pres-host:focus-visible {
    box-shadow: 0 0 0 2px rgba(192, 38, 140, 0.35);
}

@media (max-width: 768px) {
    .app-content:has(.pres-host) {
        overflow: auto;
    }

    .pres-host.host-page--glass {
        overflow: visible;
        flex: none;
        min-height: 0;
    }

    .pres-host-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        flex: none;
        overflow: visible;
        min-height: 0;
    }

    .pres-host-strip {
        order: 2;
        overflow: visible;
    }

    .pres-host-stage {
        order: 1;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(180px, 42vh) auto;
    }

    .pres-host-nav-btn {
        justify-self: center;
    }

    .pres-host-preview-fit {
        min-height: 180px;
    }

    .pres-host-preview {
        min-height: 0;
        aspect-ratio: auto;
    }

    .pres-host-strip-head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .pres-host-add-btn {
        width: auto;
    }

    .pres-host-strip-track {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        flex: none;
    }

    .pres-host-slide {
        width: 112px;
    }

    .pres-host-slide.is-current {
        box-shadow: inset 0 3px 0 #C0268C;
    }
}

/* legacy sidebar helpers (unused) */
.pres-host-sidebar,
.pres-host-main {
    display: none;
}

.host-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* Aktivite detay sayfaları */
.ops-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ops-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.ops-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px;
}

.ops-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.ops-stat-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
}

.ops-stat-lbl {
    font-size: 11px;
    font-weight: 650;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ops-detail-copy h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.ops-detail-copy p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
    color: #334155;
}

.ops-detail-meta {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #64748B;
}

.ops-detail-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ops-detail-inline-form {
    margin-top: 12px;
}

/* Sahne orta paneli: aktivite detay — yükseklik serbest (kaydırma orta kolonda) */
.ops-detail.ops-detail-embed {
    flex: 0 0 auto;
    min-height: min-content;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    gap: 10px;
    padding: 10px 12px 16px;
}

.quiz-detail .ops-q-card.is-current-q {
    border-color: rgba(192, 38, 140, 0.35);
    box-shadow: 0 0 0 1px rgba(192, 38, 140, 0.12);
}

.quiz-detail-stats {
    margin-bottom: 2px;
}

.quiz-live-panel .dash-panel-head {
    align-items: center;
}

.quiz-countdown-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(192, 38, 140, 0.1);
    border: 1px solid rgba(192, 38, 140, 0.22);
    color: #C0268C;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.quiz-countdown-chip.is-urgent {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.28);
    color: #DC2626;
}

.quiz-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-player-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
}

.quiz-player-chip strong {
    font-weight: 700;
}

.quiz-player-real {
    font-size: 11px;
    font-weight: 550;
    color: #64748B;
}

.quiz-player-chip .ti {
    color: #C0268C;
    font-size: 16px;
}

.quiz-preview-meta {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 8px;
}

.quiz-preview-q {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 12px;
    line-height: 1.35;
}

.quiz-preview-options {
    display: grid;
    gap: 8px;
}

.quiz-preview-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 13px;
    font-weight: 600;
}

.quiz-preview-option.is-correct {
    border-color: rgba(22, 163, 74, 0.45);
    background: rgba(22, 163, 74, 0.1);
}

.quiz-preview-letter {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #C0268C;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.quiz-preview-opt-text {
    flex: 1;
    min-width: 0;
}

.quiz-preview-count {
    flex-shrink: 0;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: #C0268C;
    line-height: 1;
}

.quiz-preview-option.is-correct .quiz-preview-count {
    background: #16A34A;
}

.host-leaderboard-list {
    margin: 0;
    padding-left: 18px;
}

.host-leaderboard-list li {
    margin-bottom: 6px;
}

.pres-host.ops-detail-embed {
    flex: 1;
    min-height: 0;
    min-width: 0;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
    padding: 10px 12px 12px;
}

.ops-q-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ops-q-card {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.ops-q-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ops-q-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.ops-q-text {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 650;
    color: #0F172A;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ops-q-options {
    margin: 0;
    padding-left: 1.1rem;
    color: #334155;
    font-size: 13px;
}

.ops-q-options li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ops-q-options li.is-correct {
    color: #16A34A;
    font-weight: 650;
}

.poll-detail-stats {
    margin-bottom: 4px;
}

.poll-result-card {
    overflow: hidden;
}

.poll-result-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll-result-row {
    min-width: 0;
}

.poll-result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.poll-result-label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poll-result-pct {
    flex: none;
    font-size: 13px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: #C0268C;
    font-family: var(--font-mono), 'IBM Plex Mono', monospace;
}

.poll-result-count {
    color: #64748B;
    font-weight: 600;
}

.poll-result-track {
    height: 10px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.poll-result-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #C0268C, #DB2777);
    min-width: 0;
    transition: width 0.35s ease;
}

.poll-result-empty {
    font-size: 12.5px;
    color: #64748B;
}

.poll-open-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 13px;
    color: #334155;
}

.poll-open-list li {
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.poll-voter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.poll-voter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poll-option-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.poll-option-boxes.is-hidden {
    display: none !important;
}

.poll-option-boxes-label {
    font-size: 11.5px;
    font-weight: 650;
    color: #64748B;
}

.poll-option-box-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.poll-opt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.poll-opt-row .poll-option-box {
    flex: 1;
}

.poll-option-remove {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.poll-option-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.poll-option-add-btn {
    align-self: flex-start;
    height: 28px;
    font-size: 12px;
}

.poll-option-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.poll-option-box {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    color: #0F172A;
}

.poll-option-box:focus {
    outline: none;
    border-color: rgba(192, 38, 140, 0.55);
    box-shadow: 0 0 0 3px rgba(192, 38, 140, 0.12);
}

.poll-control-panel .host-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ops-table-wrap {
    overflow-x: auto;
}

.ops-detail-table {
    width: 100%;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

@media (max-width: 860px) {
    .ops-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Şablonlar (Anket / Belge / Duyuru) ========== */
.js-templates {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tpl-row-title {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.tpl-meta {
    font-size: 12.5px;
    color: var(--text-muted);
}

.tpl-msg-preview {
    max-width: 48ch;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpl-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.tpl-chip--accent {
    color: var(--accent);
    background: rgba(253, 242, 248, 0.9);
    border-color: rgba(192, 38, 140, 0.18);
}

.tpl-row-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.tpl-row-actions form {
    display: inline;
    margin: 0;
}

.tpl-row-actions .btn {
    vertical-align: middle;
}

.tpl-questions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.tpl-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.tpl-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
}

.poll-yesno-preview {
    display: flex;
    gap: 8px;
    margin: 2px 0 4px;
}

.poll-yesno-preview[hidden] {
    display: none !important;
}

.tpl-color-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpl-color-field input[type="color"] {
    width: 42px;
    height: 34px;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(192, 38, 140, 0.18);
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.tpl-color-hint {
    font-size: 11.5px;
    color: var(--text-muted);
}

.tpl-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.tpl-cert-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.tpl-cert-card-preview {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.08), rgba(248, 250, 252, 0.95));
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.tpl-cert-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    background: #fff;
}

.tpl-cert-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
}

.tpl-cert-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tpl-cert-card-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    line-height: 1.3;
}

.tpl-cert-card-sub {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-cert-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.tpl-cert-card-actions form {
    margin: 0;
    margin-left: auto;
}

.js-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .tpl-cert-grid {
        grid-template-columns: 1fr;
    }

    .tpl-msg-preview {
        max-width: none;
    }

    .tpl-row-actions {
        width: auto;
    }

    .tpl-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========== Etkinlik detay — sunum modu (iç menü; uygulama sidebar kalır) ========== */
.app-content:has(.js-event-detail.is-event-stage) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.app-content:has(.js-event-detail.is-event-stage) .app-content-inner,
.app-content:has(.js-event-detail.is-event-stage) .app-content-inner--wide {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.js-event-detail.is-event-stage {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.event-stage-cmdbar {
    flex: 1;
    min-width: 0;
}

.event-stage-header-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: none;
    min-width: 0;
}

.event-stage-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) minmax(280px, 36%);
    gap: 10px;
    align-items: stretch;
    position: relative;
}

.event-stage-layout > * {
    min-height: 0;
    min-width: 0;
}

.js-event-detail.is-preview-closed .event-stage-layout {
    grid-template-columns: minmax(72px, 88px) minmax(0, 1fr);
}

.js-event-detail.is-preview-closed .event-stage-preview {
    display: none;
}

.js-event-detail.is-preview-closed .event-stage-layout {
    position: relative;
}

.event-stage-preview-edge {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    z-index: 5;
    flex: none;
    align-self: center;
    width: 28px;
    height: 40px;
    margin-left: -1px;
    padding: 0;
    border: 1px solid var(--glass-border, rgba(15, 23, 42, 0.08));
    border-radius: 10px;
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.92));
    color: #C0268C;
    box-shadow: var(--glass-shadow, 0 8px 28px rgba(15, 23, 42, 0.08));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.event-stage-preview-edge[hidden] {
    display: none !important;
}

.event-stage-preview-edge:hover {
    background: #FDF2F8;
}

.event-stage-preview-edge .ti {
    font-size: 18px;
}

.event-stage-preview-action-label {
    margin-left: 4px;
}

@media (max-width: 640px) {
    .event-stage-preview-action-label {
        display: none;
    }
}

.event-stage-preview-collapse {
    color: var(--text-secondary, #64748B);
}

.btn.is-copied {
    color: #16A34A !important;
}

/* Sol ray — cam (etkinlik iç menü; app sidebar’dan ayrı) */
.event-stage-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    container-type: inline-size;
    container-name: event-stage-rail;
    border-radius: var(--glass-radius, 12px);
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.88));
    border: 1px solid var(--glass-border, rgba(15, 23, 42, 0.08));
    box-shadow: var(--glass-shadow, 0 8px 28px rgba(15, 23, 42, 0.08));
    overflow: hidden;
    color: var(--text-secondary, #64748B);
}

.event-stage-rail-scroll {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 4px;
    scrollbar-width: thin;
}

.event-stage-rail-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    min-width: 0;
}

.event-stage-rail-group-label {
    display: block;
    padding: 4px 2px 6px;
    font-size: clamp(8px, 12cqi, 9.5px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C0268C;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-stage-rail-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 2px;
    border-radius: 10px;
    color: var(--text-secondary, #64748B);
    text-decoration: none;
    font-size: clamp(8px, 11.5cqi, 9.5px);
    font-weight: 650;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, color 0.15s ease;
    overflow: visible;
}

.event-stage-rail-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: none;
    width: auto;
    max-width: none;
}

/* WhatsApp tarzı minik rozet — yalnızca ikon köşesinde */
.event-stage-rail-badge {
    position: absolute;
    top: -4px;
    right: -7px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: #C0268C;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
    box-shadow: 0 0 0 1.5px #fff;
    pointer-events: none;
    z-index: 2;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
    word-break: normal;
    hyphens: none;
}

.event-stage-rail-badge[hidden] {
    display: none !important;
}

.event-stage-rail-link > span:not(.event-stage-rail-icon):not(.event-stage-rail-badge) {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.event-stage-rail-link .ti {
    font-size: clamp(14px, 22cqi, 18px);
    line-height: 1;
    flex: none;
}

.event-stage-rail-link:hover {
    background: #FDF2F8;
    color: var(--text-primary, #0F172A);
}

.event-stage-rail-link.is-active {
    background: rgba(192, 38, 140, 0.12);
    color: #C0268C;
}

.event-stage-rail-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #C0268C;
}

.event-stage-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    flex: none;
    min-width: 0;
}

.event-stage-rail-form {
    margin: 0;
    min-width: 0;
}

.event-stage-rail-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 7px 2px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #64748B);
    font-family: inherit;
    font-size: clamp(7.5px, 11cqi, 9px);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    overflow: hidden;
}

.event-stage-rail-action span {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.event-stage-rail-action .ti {
    font-size: clamp(13px, 20cqi, 16px);
    line-height: 1;
}

.event-stage-rail-action:hover,
.event-stage-rail-action.is-active {
    background: #FDF2F8;
    color: #C0268C;
}

.event-stage-rail-action--accent {
    background: rgba(192, 38, 140, 0.12);
    color: #C0268C;
}

.event-stage-rail-action--accent:hover {
    background: rgba(192, 38, 140, 0.2);
}

.event-stage-rail-action--danger {
    color: #DC2626;
}

.event-stage-rail-action--danger:hover {
    background: rgba(220, 38, 38, 0.1);
}

.event-stage-rail-action.is-disabled,
.event-stage-rail-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.event-stage-rail-action.is-copied {
    color: #16A34A;
}

/* Orta alan */
.event-stage-main {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.event-stage-main.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}


.event-stage-main .event-detail-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Operasyon sekmeleri — orta kolon kendisi dikey kaydırır (içerik uzayınca) */
.js-event-detail.is-event-stage:not(.is-stage-editor) .event-stage-main {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.js-event-detail.is-event-stage:not(.is-stage-editor) .event-stage-main .event-detail-body {
    flex: 0 0 auto;
    height: auto;
    min-height: min-content;
    overflow: visible;
}

.js-event-detail.is-event-stage:not(.is-stage-editor) .event-ops-tab {
    min-width: 0;
    width: 100%;
}

.js-event-detail.is-event-stage:not(.is-stage-editor) .event-ops-tab.event-messages {
    min-height: 0;
}

.js-event-detail.is-event-stage:not(.is-stage-editor) .event-ops-tab.event-messages .event-messages-panel {
    min-height: 0;
}

/* Önizleme: 16:9 ortada; yalnız aktif sayfa */
.event-stage-preview .stage-preview-workspace {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

.event-stage-preview .stage-preview-main {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.event-stage-preview .stage-preview-slides {
    display: none !important;
}

.event-stage-preview .stage-preview-fit {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
}

.event-stage-preview .stage-preview-frame {
    flex: none;
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    aspect-ratio: auto;
    container-type: size;
    container-name: stagepreview;
    overflow: hidden;
}

/* Sağ önizleme çekmecesi */
.event-stage-preview {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: var(--glass-radius, 12px);
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.88));
    border: 1px solid var(--glass-border, rgba(15, 23, 42, 0.08));
    box-shadow: var(--glass-shadow, 0 8px 28px rgba(15, 23, 42, 0.08));
    overflow: hidden;
}

.event-stage-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: none;
    flex-wrap: wrap;
}

.event-stage-preview-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.event-stage-preview-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.event-stage-preview-bar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.event-stage-preview-hint {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #FDF2F8;
    border: 1px solid rgba(192, 38, 140, 0.16);
    font-size: 12px;
    color: #64748B;
}

.js-event-detail.is-preview-closed .event-stage-preview-hint {
    display: flex;
}

.event-stage-preview-hint[hidden] {
    display: none !important;
}

.js-event-detail.is-preview-open .event-stage-preview-hint {
    display: none !important;
}

.event-stage-preview .stage-preview-workspace {
    flex: 1;
    min-height: 0;
}

.event-stage-preview .stage-live-mirror {
    flex: none;
}

/* Sunum stüdyosu — ray/önizleme sayfa kabuğunda; tek kolon ops */
.js-event-detail.is-event-stage .stage-studio {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: 100%;
}

/* Karşılama: orta panelde canvas + isteğe bağlı araçlar */
.stage-welcome-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
    min-width: 0;
    height: 100%;
    padding: 10px;
}

.stage-welcome-layout.is-editing {
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 320px);
}

.stage-welcome-canvas-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.stage-welcome-canvas-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: none;
}

.stage-welcome-canvas-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.stage-welcome-canvas-meta {
    font-size: 11.5px;
    color: var(--text-muted, #64748B);
}

.stage-welcome-fit {
    flex: 1;
    min-height: 180px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
    border-radius: var(--glass-radius, 12px);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 10px;
}

.stage-welcome-fit .stage-editor-frame {
    flex: none;
    position: relative;
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

.stage-welcome-tools-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.stage-welcome-tools-col[hidden] {
    display: none !important;
}

.stage-welcome-tools-col .stage-settings-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.stage-welcome-tools-col .stage-design-footer--top {
    border-top: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    order: 0;
}

.stage-welcome-tools-col .stage-tool-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stage-welcome-tools-col .stage-tool-pane.is-active {
    flex: 1;
    min-height: 0;
}

.stage-welcome-tools-col .stage-tool-pane.is-active:not([data-stage-pane="background"]) {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.stage-welcome-tools-col .stage-tool-pane.is-active[data-stage-pane="background"] {
    overflow: hidden;
}

.stage-motion-intensity {
    flex: none;
}

.stage-motion-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 2px;
}

.stage-canvas-layer.is-readonly {
    pointer-events: none;
}

.stage-canvas-layer.is-readonly .stage-c-handle,
.stage-canvas-layer.is-readonly .stage-c-el.is-selected {
    box-shadow: none;
}

.stage-canvas-layer.is-readonly .stage-c-handle {
    display: none !important;
}

@media (max-width: 960px) {
    .stage-welcome-layout.is-editing {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 42vh) minmax(0, 1fr);
    }
}

/* Karşılama (design): viewport doldur, araç paneli kendi kaydırır */
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-design-mode) {
    overflow: hidden;
}

.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-design-mode) .event-detail-body,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-design-mode) .event-stage-tab,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-design-mode) .stage-design-studio,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-design-mode) .stage-design-body,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-design-mode,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-design-mode .stage-ops-main,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-design-mode .stage-ops-mode:not([hidden]) {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-tool-panel {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

/*
 * Aktivite ops (quiz/poll/duyuru/sunum/çekiliş):
 * İçerik serbest uzasın; yalnız sol ray ↔ sağ önizleme arası orta kolon kaydırır.
 */
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode) {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode)::-webkit-scrollbar {
    width: 8px;
}

.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode)::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 8px;
}

.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode) .event-detail-body,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode) .event-stage-tab,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode) .stage-design-studio,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode) .stage-design-body,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .stage-ops-main,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .stage-ops-mode:not([hidden]) {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: min-content;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode {
    height: auto;
    min-height: 0;
    overflow: visible;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .stage-ops-panel-list,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .ops-detail-embed:not(.pres-host) {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: min-content;
    overflow: visible;
}

/*
 * Sunum detayı: orta kolon sabit; yalnız sol slayt listesi kayar.
 * Quiz/anket/duyuru/çekiliş ops kaydırması yukarıdaki kuralda kalır.
 */
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode):has(.pres-host) {
    overflow: hidden;
    overscroll-behavior: none;
}

.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode):has(.pres-host) .event-detail-body,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode):has(.pres-host) .event-stage-tab,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode):has(.pres-host) .stage-design-studio,
.js-event-detail.is-event-stage.is-stage-editor .event-stage-main:has(.stage-studio.is-ops-mode):has(.pres-host) .stage-design-body,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode:has(.pres-host),
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode:has(.pres-host) .stage-ops-main,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .stage-ops-mode:not([hidden]):has(.pres-host) {
    flex: 1;
    height: auto;
    max-height: none;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host.ops-detail-embed {
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-layout {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
    align-items: stretch;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-stage,
.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-strip {
    min-height: 0;
    overflow: hidden;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-strip-track {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-preview-fit {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    container-type: size;
}

.js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-preview {
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
}

@media (max-width: 768px) {
    .js-event-detail.is-event-stage.is-stage-editor .stage-studio.is-ops-mode .pres-host-strip-track {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        flex: none;
        overscroll-behavior: contain;
    }
}

.js-event-detail.is-event-stage .stage-settings-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Mobil: önizleme üstte (yan overlay yok) */
@media (max-width: 767px) {
    .event-stage-layout {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "rail preview"
            "rail main";
    }

    .js-event-detail.is-preview-closed .event-stage-layout {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "rail main";
    }

    .event-stage-rail {
        grid-area: rail;
    }

    .event-stage-preview {
        grid-area: preview;
        max-height: 42vh;
    }

    .event-stage-main {
        grid-area: main;
    }

    .event-stage-rail-link > span:not(.event-stage-rail-icon),
    .event-stage-rail-action span,
    .event-stage-rail-group-label {
        display: none;
    }
}

@media (max-width: 960px) and (min-width: 768px) {
    .event-stage-layout {
        grid-template-columns: 76px minmax(0, 1fr) minmax(240px, 34%);
    }

    .js-event-detail.is-preview-closed .event-stage-layout {
        grid-template-columns: 76px minmax(0, 1fr);
    }
}

/* ---------- Organizatör profil sayfası ---------- */
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.profile-identity {
    position: sticky;
    top: 16px;
}

.profile-identity-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 22px 18px 18px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(145deg, #C0268C 0%, #7C1D6F 100%);
    box-shadow:
        0 10px 24px rgba(192, 38, 140, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.profile-identity-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.profile-identity-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    word-break: break-word;
}

.profile-identity-org {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-word;
}

.profile-identity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--accent, #C0268C);
    background: rgba(192, 38, 140, 0.08);
    border: 1px solid rgba(192, 38, 140, 0.14);
}

.profile-identity-badge .ti {
    font-size: 13px;
}

.profile-identity-meta {
    margin: 4px 0 0;
    padding: 12px 0 0;
    width: 100%;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.profile-identity-meta dt {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent, #C0268C);
}

.profile-identity-meta dd {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 550;
    color: var(--text-primary);
    word-break: break-word;
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.profile-page .dash-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.profile-page .dash-panel-title .ti {
    color: var(--accent, #C0268C);
    font-size: 16px;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-form--password {
    max-width: 560px;
}

.profile-page .form-actions {
    margin-top: 2px;
}

@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-identity {
        position: static;
    }

    .profile-identity-body {
        align-items: flex-start;
        text-align: left;
        padding: 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px 16px;
    }

    .profile-identity-copy {
        flex: 1;
        min-width: 160px;
        align-items: flex-start;
    }

    .profile-identity-badge {
        align-self: flex-start;
    }

    .profile-identity-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px 24px;
    }

    .profile-identity-meta > div {
        min-width: 140px;
        flex: 1;
    }
}

/* ─── Karşılama QR afiş (GuestMate parity) ─── */
.stage-ops-mode:has(.stage-afis-block) {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.stage-afis-block {
    flex: none;
    margin: 10px 10px 0;
    padding: 14px 16px;
    border-radius: var(--glass-radius, 12px);
}

.stage-afis-block[hidden],
.stage-welcome-layout[hidden] {
    display: none !important;
}

.stage-ops-mode[data-welcome-view="afis"] .stage-welcome-layout {
    display: none !important;
}

.stage-ops-mode[data-welcome-view="page"] .stage-afis-block {
    display: none !important;
}

.stage-ops-mode[data-welcome-view="page"] .stage-welcome-layout {
    height: auto;
    min-height: 280px;
    flex: 1 0 auto;
}

.stage-ops-mode:has(.stage-afis-block) .stage-welcome-layout {
    height: auto;
    min-height: 280px;
    flex: 1 0 auto;
}

.stage-welcome-subnav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.stage-welcome-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.stage-welcome-subnav-btn:hover {
    color: #0F172A;
    background: rgba(255, 255, 255, 0.55);
}

.stage-welcome-subnav-btn.is-active {
    color: #C0268C;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.stage-welcome-subnav-btn i {
    font-size: 15px;
}

.stage-welcome-cmd-sep {
    width: 1px;
    height: 22px;
    background: rgba(15, 23, 42, 0.10);
    margin: 0 2px;
}

.stage-welcome-cmd-sep[hidden],
.stage-welcome-page-actions[hidden],
#btnWelcomeEdit[hidden],
#btnWelcomeCancel[hidden],
[data-welcome-live][hidden] {
    display: none !important;
}

.stage-welcome-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 720px) {
    .stage-welcome-subnav {
        width: 100%;
    }

    .stage-welcome-subnav-btn {
        flex: 1;
        justify-content: center;
    }
}

.js-qr-print-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.js-qr-print-bar__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.js-qr-print-bar__kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.js-qr-print-bar__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: #0F172A;
}

.js-qr-poster-panel__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 240px);
    gap: 16px;
    align-items: start;
}

.js-qr-poster-panel__hint {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748B;
}

.js-qr-poster-panel__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.js-qr-poster-panel__url-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.js-qr-poster-panel__url {
    flex: 1 1 180px;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.86);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: #0F172A;
}

.js-qr-poster-preview {
    display: flex;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, #E8ECF3 0%, #F3F0F5 100%);
}

.js-qr-preview-card {
    position: relative;
    width: 15rem;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0.35rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.js-qr-preview-card__name-band {
    position: absolute;
    left: 9%;
    top: 22%;
    width: 82%;
    height: 7.5%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
}

.js-qr-preview-card__name {
    margin: 0;
    text-align: center;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 650;
    font-style: normal;
    letter-spacing: 0.01em;
    color: #0F172A;
    line-height: 1.15;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.js-qr-preview-card__qr-slot {
    position: absolute;
    left: 29.1%;
    top: 37.71%;
    width: 41.8%;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5%;
    box-sizing: border-box;
}

.js-qr-preview-card__qr-slot .js-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.js-qr-preview-card__logo {
    position: absolute;
    width: 20%;
    height: 20%;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 2%;
    box-sizing: content-box;
    pointer-events: none;
}

@media (max-width: 720px) {
    .js-qr-poster-panel__body {
        grid-template-columns: 1fr;
    }

    .js-qr-poster-preview {
        justify-self: center;
        width: 100%;
    }
}

/* ─── Belge poster önizleme (şablon modal) ─── */
.js-modal--cert.activity-dialog,
.js-modal--cert {
    max-width: min(920px, 96vw);
}

.js-modal--cert .activity-dialog-body,
.js-modal--cert .js-modal-body {
    max-height: min(72vh, 640px);
}

.js-cert-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: start;
}

.js-cert-create-preview {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--glass-radius, 12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(232, 236, 243, 0.9), rgba(243, 240, 245, 0.85));
}

.js-cert-create-preview-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.js-cert-create-preview-hint {
    margin: 0;
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.35;
}

.js-cert-preview-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.js-cert-preview-card__slot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    line-height: 1.2;
}

.js-cert-preview-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cert-accent, #0F172A);
}

.js-cert-preview-card__name {
    font-size: 1.05rem;
    font-weight: 650;
    color: #0F172A;
}

.js-cert-preview-card__event {
    font-size: 0.78rem;
    font-weight: 550;
    color: #334155;
}

.js-cert-preview-card__body {
    font-size: 0.68rem;
    font-weight: 450;
    color: #475569;
    align-items: flex-start;
    padding-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.js-cert-preview-card__date,
.js-cert-preview-card__sign {
    font-size: 0.68rem;
    color: #64748B;
}

.js-cert-preview-card__sign {
    color: var(--cert-accent, #0F172A);
    font-weight: 550;
}

@media (max-width: 860px) {
    .js-cert-create-layout {
        grid-template-columns: 1fr;
    }

    .js-cert-create-preview {
        position: static;
        order: -1;
    }
}

/* ─── Organizatör kullanım kılavuzu ─── */
.guide-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-top: 4px;
}

.guide-rail {
    position: sticky;
    top: 12px;
    padding: 8px;
    border-radius: var(--glass-radius, 12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px);
}

.guide-rail-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guide-rail-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748B;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.guide-rail-link i {
    font-size: 16px;
    flex: none;
}

.guide-rail-link:hover {
    color: #0F172A;
    background: rgba(255, 255, 255, 0.72);
}

.guide-rail-link.is-active {
    color: #C0268C;
    background: #FDF2F8;
    box-shadow: inset 3px 0 0 #C0268C;
}

.guide-main {
    min-width: 0;
}

.guide-panel[hidden] {
    display: none !important;
}

.guide-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C0268C;
}

.guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.guide-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.72);
}

.guide-step-num {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #C0268C;
    background: #FDF2F8;
    border: 1px solid rgba(192, 38, 140, 0.18);
}

.guide-step-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 650;
    color: #0F172A;
}

.guide-step-text {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

.guide-tip {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.guide-tip i {
    color: #C0268C;
    margin-top: 1px;
    flex: none;
}

.guide-tip--warn {
    background: #FFFBEB;
    border-color: rgba(217, 119, 6, 0.25);
}

.guide-tip--warn i {
    color: #D97706;
}

.guide-link {
    margin-top: 10px;
}

.guide-subtitle {
    margin: 22px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.guide-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(192, 38, 140, 0.16);
    background: #FDF2F8;
    margin-bottom: 8px;
}

.guide-callout > i {
    font-size: 20px;
    color: #C0268C;
    flex: none;
}

.guide-callout p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.guide-checklist {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 13px;
    color: #334155;
}

.guide-checklist i {
    color: #16A34A;
    margin-top: 1px;
}

.guide-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.guide-map-card {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.72);
}

.guide-map-card h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #C0268C;
}

.guide-map-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
}

.guide-panel code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.92em;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.06);
}

.js-guide {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.js-guide .guide-panel {
    min-width: 0;
}

@media (max-width: 900px) {
    .guide-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .guide-rail {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 8px;
        margin: 0 -2px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .guide-rail-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 2px 2px 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .guide-rail-nav::-webkit-scrollbar {
        display: none;
    }

    .guide-rail-link {
        width: auto;
        flex: none;
        white-space: nowrap;
        padding: 8px 12px;
        border-radius: 999px;
        scroll-snap-align: start;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: none;
    }

    .guide-rail-link i {
        font-size: 15px;
    }

    .guide-rail-link.is-active {
        color: #C0268C;
        background: #FDF2F8;
        border-color: rgba(192, 38, 140, 0.28);
        box-shadow: none;
    }

    .guide-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .js-guide .dash-cmdbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 12px;
    }

    .js-guide .dash-cmdbar-left {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .js-guide .dash-cmdbar-sep,
    .js-guide .dash-cmdbar-date {
        display: none;
    }

    .js-guide .dash-cmdbar-actions {
        width: 100%;
    }

    .js-guide .dash-cmdbar-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .guide-rail {
        top: 0;
        padding: 6px;
        border-radius: 10px;
    }

    .guide-rail-link {
        padding: 7px 11px;
        gap: 6px;
        min-height: 36px;
    }

    .js-guide .dash-panel-head {
        padding: 12px 12px 8px;
    }

    .js-guide .dash-panel-body {
        padding: 10px 12px 14px;
    }

    .js-guide .dash-panel-title {
        font-size: 17px;
        line-height: 1.3;
    }

    .js-guide .dash-panel-sub {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .guide-step {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .guide-step-num {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .guide-step-title {
        font-size: 14px;
    }

    .guide-step-text {
        font-size: 12.5px;
    }

    .guide-tip,
    .guide-callout {
        padding: 10px 11px;
        gap: 8px;
    }

    .guide-callout > i {
        font-size: 18px;
    }

    .guide-map {
        grid-template-columns: 1fr;
    }

    .guide-link.btn {
        width: 100%;
        justify-content: center;
    }

    .guide-subtitle {
        margin-top: 18px;
    }
}

@media (max-width: 380px) {
    .guide-rail-link span {
        max-width: 9.5em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}