:root {
    --degree-bg: #0f0f0f;
    --degree-panel: #181818;
    --degree-panel-2: #212121;
    --degree-soft: #272727;
    --degree-border: rgba(255, 255, 255, 0.08);
    --degree-text: #f1f1f1;
    --degree-muted: #aaaaaa;
    --degree-accent: #ff3d00;
    --degree-accent-soft: rgba(255, 61, 0, 0.16);
    --degree-elevated: rgba(15, 15, 15, 0.92);
    --degree-input: #121212;
    --degree-chip-bg: #202020;
    --degree-strong: #ffffff;
    --degree-inverse: #111111;
    --degree-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    --degree-glass-bg: rgba(10, 10, 10, 0.10);
    --degree-glass-border: rgba(255, 255, 255, 0.08);
    --degree-glass-text: #ffffff;
    --degree-active-stroke: rgba(255, 255, 255, 0.22);
    --degree-radius: 14px;
    --degree-header-h: 74px;
    --degree-header-offset: 74px;
    --degree-sidebar-w: 248px;
    --degree-sidebar-collapsed: 92px;
    --degree-watch-viewer-h: 560px;
    --degree-home-hero-h: 460px;
    --degree-home-hero-mobile-h: clamp(248px, 52svh, 380px);
    --degree-home-pick-mobile-width: min(78vw, 320px);
    --degree-category-menu-bg: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel) 96%, var(--degree-panel-2) 4%) 0%, color-mix(in srgb, var(--degree-panel-2) 92%, #000 8%) 100%);
    --degree-category-menu-border: var(--degree-border);
    --degree-category-menu-row: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel-2) 94%, #fff 6%) 0%, color-mix(in srgb, var(--degree-soft) 88%, var(--degree-panel) 12%) 100%);
    --degree-category-menu-sub: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel) 94%, transparent) 0%, color-mix(in srgb, var(--degree-panel-2) 96%, transparent) 100%);
    --degree-category-menu-text: var(--degree-text);
    --degree-category-menu-text-strong: var(--degree-strong);
    --degree-category-menu-divider: var(--degree-border);
    --degree-category-menu-highlight: var(--degree-accent);
    --degree-category-menu-hover: color-mix(in srgb, var(--degree-soft) 72%, transparent);
    --degree-category-menu-shadow: var(--degree-shadow);
}

body[data-degree-theme="light"] {
    --degree-bg: #f7f7f5;
    --degree-panel: rgba(255, 255, 255, 0.92);
    --degree-panel-2: #ffffff;
    --degree-soft: #ece8e1;
    --degree-border: rgba(17, 24, 39, 0.1);
    --degree-text: #131722;
    --degree-muted: #5f6572;
    --degree-accent-soft: rgba(255, 61, 0, 0.10);
    --degree-elevated: rgba(250, 248, 244, 0.94);
    --degree-input: #ffffff;
    --degree-chip-bg: #efebe5;
    --degree-strong: #111111;
    --degree-inverse: #ffffff;
    --degree-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --degree-glass-bg: rgba(255, 255, 255, 0.16);
    --degree-glass-border: rgba(17, 24, 39, 0.08);
    --degree-glass-text: #121826;
    --degree-active-stroke: rgba(17, 24, 39, 0.18);
    --degree-category-menu-bg: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel) 96%, #fff 4%) 0%, color-mix(in srgb, var(--degree-panel-2) 98%, #fff 2%) 100%);
    --degree-category-menu-border: var(--degree-border);
    --degree-category-menu-row: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel-2) 98%, #fff 2%) 0%, color-mix(in srgb, var(--degree-soft) 68%, #fff 32%) 100%);
    --degree-category-menu-sub: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel) 94%, #fff 6%) 0%, color-mix(in srgb, var(--degree-soft) 58%, #fff 42%) 100%);
    --degree-category-menu-text: var(--degree-text);
    --degree-category-menu-text-strong: var(--degree-strong);
    --degree-category-menu-divider: var(--degree-border);
    --degree-category-menu-highlight: var(--degree-accent);
    --degree-category-menu-hover: color-mix(in srgb, var(--degree-soft) 76%, transparent);
    --degree-category-menu-shadow: var(--degree-shadow);
}

body[data-degree-theme="light"] .degree-discovery-card {
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

body[data-degree-theme="light"] .degree-discovery-card:hover {
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

html, body {
    background: var(--degree-bg);
    color: var(--degree-text);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", sans-serif;
}

body.degree-ui-ready {
    overflow-x: hidden;
}

body.degree-lock-scroll {
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 119;
}

#wrapper {
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--degree-bg) 96%, #ffffff 4%), var(--degree-bg));
}

.degree-app {
    min-height: 100vh;
    padding-top: var(--degree-header-offset, var(--degree-header-h));
}

.degree-shell {
    display: flex;
    min-height: calc(100vh - var(--degree-header-offset, var(--degree-header-h)));
}

.degree-sidebar {
    position: fixed;
    top: var(--degree-header-offset, var(--degree-header-h));
    left: 0;
    bottom: 0;
    width: var(--degree-sidebar-w);
    background: var(--degree-elevated);
    border-right: 1px solid var(--degree-border);
    padding: 14px 12px 28px;
    overflow-y: auto;
    z-index: 130;
    transition: width .2s ease, transform .2s ease;
}

.degree-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.degree-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.degree-sidebar-group {
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--degree-border);
}

.degree-sidebar-group:last-child {
    border-bottom: 0;
}

.degree-sidebar-label {
    margin: 0 10px 12px;
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.degree-sidebar-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.degree-sidebar-section-icon {
    display: none;
    width: 22px;
    flex: 0 0 22px;
    text-align: center;
    color: var(--degree-text);
    font-size: 16px;
}

.degree-sidebar-accordion-toggle .degree-sidebar-label {
    margin: 0;
}

.degree-sidebar-accordion-caret {
    color: var(--degree-muted);
    font-size: 14px;
    transition: transform .18s ease;
}

.degree-sidebar-accordion-toggle.is-open .degree-sidebar-accordion-caret {
    transform: rotate(180deg);
}

.degree-sidebar-accordion-panel[hidden] {
    display: none !important;
}

.degree-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    background: transparent;
    color: var(--degree-text);
    font-size: 14px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.degree-nav-link.is-current {
    background: var(--degree-soft);
    color: var(--degree-strong);
}

.degree-nav-link.is-current .degree-nav-meta small {
    color: color-mix(in srgb, var(--degree-strong) 70%, var(--degree-muted));
}

.degree-sidebar .degree-nav-link.is-active {
    background: transparent !important;
    color: var(--degree-text) !important;
}

.degree-sidebar .degree-nav-link.is-active .degree-nav-meta small {
    color: var(--degree-muted) !important;
}

@media (hover: hover) and (pointer: fine) {
    .degree-nav-link:hover {
        background: color-mix(in srgb, var(--degree-soft) 82%, transparent);
        color: var(--degree-strong);
    }

    .degree-nav-link:hover .degree-nav-meta small {
        color: color-mix(in srgb, var(--degree-strong) 70%, var(--degree-muted));
    }
}

.degree-nav-link.is-accent {
    background: var(--degree-accent-soft);
    color: var(--degree-strong);
}

.degree-nav-icon {
    width: 22px;
    text-align: center;
    font-size: 18px;
    flex: 0 0 22px;
}

.degree-nav-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.degree-nav-meta small {
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 500;
}

.degree-sidebar-tree {
    display: grid;
    gap: 10px;
}

.degree-sidebar-tree-branch {
    display: grid;
    gap: 8px;
}

.degree-sidebar-tree-branch.is-nested {
    padding-left: 12px;
}

.degree-sidebar-tree-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.degree-sidebar-tree-title,
.degree-sidebar-tree-leaf {
    display: block;
    color: var(--degree-text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}

.degree-sidebar-tree-title {
    font-weight: 700;
}

.degree-sidebar-tree-title[data-sidebar-tree-link] {
    cursor: pointer;
}

.degree-sidebar-tree-title.is-active,
.degree-sidebar-tree-leaf.is-active {
    color: var(--degree-strong);
}

.degree-sidebar-tree-leaf {
    padding-left: 10px;
    color: var(--degree-muted);
    font-weight: 400 !important;
}

.degree-sidebar-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel-2) 78%, transparent);
    color: var(--degree-muted);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.degree-sidebar-tree-toggle.is-open .degree-sidebar-tree-caret {
    transform: rotate(180deg);
}

.degree-sidebar-tree-caret {
    font-size: 12px;
    transition: transform .18s ease;
}

.degree-sidebar-tree-panel {
    display: grid;
    gap: 8px;
    padding-left: 6px;
    border-left: 1px solid var(--degree-border);
}

.degree-sidebar-tree-panel[hidden] {
    display: none !important;
}

.degree-sidebar-empty {
    color: var(--degree-muted);
    font-size: 12px;
    line-height: 1.5;
}

.degree-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--degree-sidebar-w);
    padding: 26px 28px 40px;
}

body.degree-sidebar-collapsed .degree-sidebar {
    width: var(--degree-sidebar-collapsed);
}

body.degree-sidebar-collapsed .degree-main {
    margin-left: var(--degree-sidebar-collapsed);
}

body.degree-sidebar-collapsed .degree-sidebar-label,
body.degree-sidebar-collapsed .degree-nav-meta {
    display: none;
}

body.degree-sidebar-collapsed .degree-sidebar-accordion-panel,
body.degree-sidebar-collapsed .degree-sidebar-tree,
body.degree-sidebar-collapsed .degree-sidebar-empty {
    display: none !important;
}

body.degree-sidebar-collapsed .degree-sidebar-accordion-toggle {
    justify-content: center;
    padding: 0;
}

body.degree-sidebar-collapsed .degree-sidebar-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.degree-sidebar-collapsed .degree-sidebar-accordion-caret {
    display: none;
}

body.degree-sidebar-collapsed .degree-nav-link {
    justify-content: center;
    padding: 0;
}

.degree-panel {
    background: var(--degree-panel);
    border: 1px solid var(--degree-border);
    border-radius: var(--degree-radius);
    box-shadow: var(--degree-shadow);
}

.degree-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.degree-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--degree-chip-bg);
    color: var(--degree-text);
    font-size: 13px;
    font-weight: 600;
}

.degree-chip.is-active {
    background: var(--degree-strong);
    color: var(--degree-inverse);
}

.degree-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--degree-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.degree-section-title {
    margin: 0 0 6px;
    color: var(--degree-strong);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.degree-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 18px;
}

.degree-grid-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(460px, 1.08fr);
    gap: 24px;
    margin-bottom: 28px;
    align-items: stretch;
}

@media (min-width: 1440px) {
    .degree-grid-hero {
        grid-template-columns: minmax(0, 1.65fr) minmax(360px, 440px);
    }
}

.degree-home-hero {
    height: var(--degree-home-hero-h);
    max-height: var(--degree-home-hero-h);
    overflow: hidden;
    background: #000;
}

.degree-home-hero .degree-viewer-stage {
    height: 100%;
    min-height: var(--degree-home-hero-h);
}

.degree-home-hero #degree-home-pano {
    position: absolute;
    inset: 0;
}

.degree-home-hero-overlay {
    display: none;
}

.degree-home-hero-copy {
    display: none;
}

.degree-home-detail-link {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--degree-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--degree-panel-2) 92%, transparent);
    color: var(--degree-strong);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: var(--degree-shadow);
}

.degree-home-picks {
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: var(--degree-home-hero-h);
    min-height: var(--degree-home-hero-h);
    max-height: var(--degree-home-hero-h);
}

.degree-home-picks-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.degree-home-picks-title {
    margin: 0;
    color: var(--degree-strong);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.degree-home-picks-carousel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.degree-home-picks-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.degree-home-picks-list::-webkit-scrollbar {
    display: none;
}

.degree-home-pick {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 112px;
    padding: 10px 12px;
    border: 1px solid var(--degree-border);
    border-radius: var(--degree-radius);
    background: color-mix(in srgb, var(--degree-panel-2) 78%, transparent);
    color: inherit;
    text-align: left;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.degree-home-pick:hover,
.degree-home-pick.is-active {
    transform: none;
    border-color: var(--degree-active-stroke);
    background: color-mix(in srgb, var(--degree-soft) 78%, var(--degree-panel-2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--degree-active-stroke) 80%, transparent), var(--degree-shadow);
}

.degree-home-pick-media {
    position: relative;
    display: block;
    width: 98px;
    height: 98px;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.degree-home-pick-copy {
    position: static;
    display: grid;
    gap: 4px;
    justify-items: start;
    min-width: 0;
}

.degree-home-pick-index {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--degree-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--degree-panel) 76%, transparent);
    color: var(--degree-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.degree-home-pick-copy strong {
    color: var(--degree-strong);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.14;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.degree-home-pick-copy small {
    color: var(--degree-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.14;
}

.degree-home-pick-location {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    text-align: left;
}

.degree-home-pick-location span {
    display: block;
}

.degree-home-pick-location span:not(:last-child)::after {
    content: "/";
    margin-left: 2px;
    color: color-mix(in srgb, var(--degree-muted) 70%, transparent);
}

.degree-slider-pagination {
    margin-top: 14px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel-2) 90%, transparent);
    align-self: center;
}

.degree-slider-nav,
.degree-slider-dot {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--degree-muted);
}

.degree-slider-nav {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 30px;
    line-height: 1;
}

.degree-slider-dots {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.degree-slider-dot {
    width: 18px;
    height: 18px;
    border: 3px solid color-mix(in srgb, var(--degree-muted) 75%, transparent);
    border-radius: 999px;
}

.degree-slider-dot.is-active {
    border-color: color-mix(in srgb, var(--degree-text) 85%, transparent);
    background: color-mix(in srgb, var(--degree-text) 82%, transparent);
}

.degree-home-picks-pagination,
.degree-scene-pagination {
    margin-top: 16px;
}

.degree-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.degree-discovery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.degree-discovery-panel {
    padding: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--degree-panel) 88%, transparent), color-mix(in srgb, var(--degree-panel-2) 96%, transparent)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--degree-accent) 12%, transparent), transparent 42%);
    overflow: hidden;
}

.degree-discovery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.degree-discovery-title {
    margin: 0;
    color: var(--degree-strong);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.degree-carousel-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.degree-carousel-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: var(--degree-panel-2);
    color: var(--degree-strong);
    font-size: 24px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.degree-carousel-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--degree-accent) 25%, var(--degree-border));
    background: var(--degree-soft);
}

.degree-discovery-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.degree-discovery-carousel::-webkit-scrollbar {
    display: none;
}

.degree-discovery-list {
    display: flex;
    gap: 14px;
}

.degree-discovery-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 280px;
    padding: 22px;
    border-radius: 10px;
    background-color: #0f0f0f;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid transparent;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    flex: 0 0 calc((100% - 28px) / 3);
    scroll-snap-align: start;
    transform-origin: center center;
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.degree-discovery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.18);
    border-color: color-mix(in srgb, var(--degree-accent) 16%, transparent);
}

.degree-discovery-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    position: relative;
    z-index: 1;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--degree-glass-bg);
    border: 1px solid var(--degree-glass-border);
    backdrop-filter: blur(4px);
}

.degree-discovery-copy strong {
    color: var(--degree-glass-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.degree-discovery-empty {
    padding: 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 72%, transparent);
    color: var(--degree-muted);
    font-size: 14px;
}

.degree-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.degree-location-index {
    overflow: hidden;
}

.degree-location-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.degree-location-chip {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--degree-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--degree-panel-2) 76%, transparent);
    color: var(--degree-text);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.degree-location-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--degree-strong) 22%, var(--degree-border));
    background: color-mix(in srgb, var(--degree-soft) 78%, transparent);
    color: var(--degree-strong);
}

.degree-location-chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--degree-muted);
    font-size: 14px;
    font-weight: 800;
}

.degree-location-chip-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.degree-location-chip-meta strong,
.degree-location-chip-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.degree-location-chip-meta strong {
    color: var(--degree-strong);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.degree-location-chip-meta small {
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 700;
}

.degree-hub-heading {
    display: grid;
    gap: 12px;
    padding: 0 0 2px;
}

.degree-hub-heading-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
}

.degree-hub-type {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.degree-hub-heading h1 {
    margin: 0;
    color: var(--degree-strong);
    font-size: clamp(2rem, 2.7vw, 3rem);
    font-weight: 800;
    line-height: 1.03;
}

.degree-hub-heading p {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--degree-muted);
    font-size: 15px;
    line-height: 1.65;
}

.degree-hub-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.degree-hub-stats span,
.degree-hub-about-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel-2) 72%, transparent);
    color: var(--degree-strong);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.degree-hub-discovery {
    padding: 22px;
}

.degree-hub-discovery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.degree-hub-discovery-grid .degree-discovery-card {
    display: grid;
    grid-template-rows: auto minmax(64px, auto);
    align-items: stretch;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--degree-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 82%, transparent);
    color: var(--degree-text);
    box-shadow: none;
    flex: initial;
}

.degree-hub-discovery-grid .degree-discovery-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--degree-strong) 24%, var(--degree-border));
    background: color-mix(in srgb, var(--degree-soft) 76%, transparent);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.16);
}

.degree-discovery-collage {
    display: grid;
    gap: 4px;
    aspect-ratio: 16 / 8.6;
    padding: 8px;
    overflow: hidden;
}

.degree-discovery-collage.is-count-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.degree-discovery-collage.is-count-2,
.degree-discovery-collage.is-count-3,
.degree-discovery-collage.is-count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(58px, 1fr));
}

.degree-discovery-collage-tile:nth-child(1) {
    grid-area: a;
}

.degree-discovery-collage-tile:nth-child(2) {
    grid-area: b;
}

.degree-discovery-collage-tile:nth-child(3) {
    grid-area: c;
}

.degree-discovery-collage-tile:nth-child(4) {
    grid-area: d;
}

.degree-discovery-collage.is-count-2.is-layout-1,
.degree-discovery-collage.is-count-2.is-layout-3,
.degree-discovery-collage.is-count-2.is-layout-5,
.degree-discovery-collage.is-count-2.is-layout-2,
.degree-discovery-collage.is-count-2.is-layout-4,
.degree-discovery-collage.is-count-2.is-layout-6 {
    grid-template-areas:
        "a a b b"
        "a a b b";
}

.degree-discovery-collage.is-count-2.is-layout-2,
.degree-discovery-collage.is-count-2.is-layout-4,
.degree-discovery-collage.is-count-2.is-layout-6 {
    grid-template-areas:
        "a a a a"
        "b b b b";
}

.degree-discovery-collage.is-count-3.is-layout-1,
.degree-discovery-collage.is-count-3.is-layout-4,
.degree-discovery-collage.is-count-3.is-layout-2,
.degree-discovery-collage.is-count-3.is-layout-5 {
    grid-template-areas:
        "a a b b"
        "a a c c";
}

.degree-discovery-collage.is-count-3.is-layout-2,
.degree-discovery-collage.is-count-3.is-layout-5 {
    grid-template-areas:
        "a a a a"
        "b b c c";
}

.degree-discovery-collage.is-count-3.is-layout-3 {
    grid-template-areas:
        "a b b b"
        "a c c c";
}

.degree-discovery-collage.is-count-3.is-layout-6 {
    grid-template-areas:
        "a a a b"
        "c c c b";
}

.degree-discovery-collage.is-count-4.is-layout-1 {
    grid-template-areas:
        "a a b c"
        "a a d d";
}

.degree-discovery-collage.is-count-4.is-layout-2 {
    grid-template-areas:
        "a b b c"
        "d b b c";
}

.degree-discovery-collage.is-count-4.is-layout-3 {
    grid-template-areas:
        "a a a b"
        "c d d d";
}

.degree-discovery-collage.is-count-4.is-layout-4 {
    grid-template-areas:
        "a b b b"
        "a c c d";
}

.degree-discovery-collage.is-count-4.is-layout-5 {
    grid-template-areas:
        "a a b b"
        "c c d d";
}

.degree-discovery-collage.is-count-4.is-layout-6 {
    grid-template-areas:
        "a b c c"
        "a d d d";
}

.degree-discovery-collage-tile {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
}

.degree-discovery-collage-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .24s ease;
}

.degree-discovery-card:hover .degree-discovery-collage-tile img {
    transform: scale(1.04);
}

.degree-hub-card-body {
    display: grid;
    align-content: center;
    padding: 14px 16px 16px;
}

.degree-hub-card-body strong {
    color: var(--degree-strong);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.18;
}

.degree-hub-discovery-card--plain {
    min-height: 92px;
}

.degree-hub-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--degree-border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--degree-panel-2) 88%, transparent), color-mix(in srgb, var(--degree-soft) 54%, transparent));
}

.degree-hub-about p {
    max-width: 860px;
    margin: 0;
    color: var(--degree-muted);
    font-size: 14px;
    line-height: 1.65;
}

.degree-hub-about-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.degree-hub-about-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: color-mix(in srgb, var(--degree-strong) 72%, var(--degree-muted));
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.degree-hub-about-crumbs a,
.degree-hub-about-crumbs span {
    color: inherit;
}

.degree-hub-about-crumbs a {
    text-decoration: none;
}

.degree-hub-about-crumbs a:hover {
    color: var(--degree-strong);
}

.degree-hub-about-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.degree-module-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.degree-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.degree-meta-card {
    padding: 16px;
    border: 1px solid var(--degree-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 88%, transparent);
}

.degree-meta-card strong {
    display: block;
    margin-top: 8px;
    color: var(--degree-strong);
    font-size: 15px;
}

.degree-meta-card span {
    color: var(--degree-muted);
    font-size: 12px;
    line-height: 1.5;
}

.degree-tour-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 34px;
}

.degree-tour-card {
    display: grid;
    gap: 9px;
    color: inherit;
}

.degree-tour-card:hover {
    transform: translateY(-2px);
}

.degree-featured-tour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.degree-tour-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #0b0b0b;
    margin-bottom: 0;
}

.degree-tour-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.degree-tour-card:hover .degree-tour-thumb img {
    transform: scale(1.04);
}

.degree-tour-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.44));
}

.degree-tour-tag {
    position: absolute;
    right: 14px;
    bottom: 14px;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(62%, calc(100% - 28px));
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.degree-tour-views {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 24px;
    min-width: max-content;
    padding: 0;
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.degree-tour-location {
    position: absolute;
    left: 14px;
    top: 14px;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(46%, calc(100% - 28px));
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.degree-tour-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

.degree-tour-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 12px;
    padding-top: 0;
}

.degree-tour-title {
    margin: 0;
    color: var(--degree-strong);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.degree-tour-meta,
.degree-tour-desc {
    color: var(--degree-muted);
    font-size: 14px;
    line-height: 1.55;
}

.degree-tour-meta strong {
    color: var(--degree-strong);
    font-weight: 700;
}

.degree-module-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    color: var(--degree-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.degree-archive-actions {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    height: 100%;
    margin-left: 0;
}

.degree-panel.degree-archive-module {
    padding: 0;
    overflow: hidden;
}

.degree-archive-module > .degree-tour-grid {
    padding: 0 24px;
}

.degree-archive-module > p {
    padding: 0 24px 24px;
}

.degree-archive-module > .degree-load-more-wrap {
    padding: 26px 24px 24px;
}

.degree-archive-sortbox {
    position: relative;
    align-self: stretch;
    width: clamp(230px, 18vw, 300px);
    min-width: 230px;
    height: 100%;
    border-left: 1px solid var(--degree-border);
    background: color-mix(in srgb, var(--degree-panel-2) 56%, transparent);
}

.degree-archive-sort-trigger {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 96px;
    padding: 16px 26px;
    cursor: pointer;
}

.degree-archive-count {
    display: inline-flex;
    margin-top: 7px;
    color: var(--degree-muted);
    font-size: 12px;
    font-weight: 700;
}

.degree-archive-sort-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--degree-panel) 90%, transparent);
    color: var(--degree-strong);
}

.degree-archive-sort-icon svg {
    width: 16px;
    height: 16px;
}

.degree-archive-sort-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.degree-archive-sort-copy strong {
    color: var(--degree-strong);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.degree-archive-sort-copy small {
    color: var(--degree-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.degree-archive-sort-caret {
    color: var(--degree-muted);
    font-size: 12px;
    line-height: 1;
}

.degree-archive-sort-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.degree-category-archive-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--degree-border);
    background: color-mix(in srgb, var(--degree-panel-2) 42%, transparent);
}

.degree-category-archive-head > div:first-child {
    padding: 24px;
}

.degree-load-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 26px;
}

.degree-load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-soft) 76%, transparent);
    color: var(--degree-strong);
    font-size: 14px;
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.degree-load-more-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--degree-strong) 24%, var(--degree-border));
    background: color-mix(in srgb, var(--degree-soft) 94%, transparent);
}

.degree-load-more-button small {
    color: var(--degree-muted);
    font-size: 12px;
    font-weight: 700;
}

.degree-load-more-button[aria-busy="true"] {
    pointer-events: none;
    opacity: .72;
}

.degree-popular-hub {
    display: grid;
    gap: 18px;
}

#home-viewer,
#new-tours,
#popular-tours,
#popular-categories,
#currently-watching,
#degree-tour-description,
#degree-comments-section {
    scroll-margin-top: calc(var(--degree-header-offset, 96px) + 20px);
}

#popular-categories {
    margin-top: 18px;
}

.degree-popular-shell {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

.degree-popular-head {
    margin-bottom: 0;
}

.degree-section-heading-with-line {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.degree-section-line {
    flex: 1;
    height: 1px;
    background: var(--degree-border);
}

.degree-popular-toolbar {
    display: grid;
    gap: 14px;
}

.degree-popular-toolbar-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--degree-border);
    overflow: hidden;
    background: color-mix(in srgb, var(--degree-panel-2) 42%, transparent);
}

.degree-popular-tablist {
    display: flex;
    min-width: 0;
}

.degree-popular-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    padding: 16px 26px;
    border: 0;
    border-right: 1px solid var(--degree-border);
    background: transparent;
    color: var(--degree-muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    transition: background .2s ease, color .2s ease;
}

.degree-popular-tab:hover,
.degree-popular-tab.is-active {
    background: color-mix(in srgb, var(--degree-panel) 92%, #fff 8%);
    color: var(--degree-strong);
}

.degree-popular-tab.is-active {
    position: relative;
    top: 0;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 var(--degree-accent), inset 0 0 0 1px transparent;
}

.degree-popular-sortbox {
    position: relative;
    min-width: 220px;
    border-left: 1px solid var(--degree-border);
    background: color-mix(in srgb, var(--degree-panel-2) 56%, transparent);
}

.degree-popular-sortbox.is-hidden {
    display: none;
}

.degree-popular-sort-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 82px;
    padding: 16px 18px;
    cursor: pointer;
}

.degree-popular-sort-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--degree-panel) 90%, transparent);
    color: var(--degree-strong);
}

.degree-popular-sort-icon svg {
    width: 18px;
    height: 18px;
}

.degree-popular-sort-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.degree-popular-sort-copy strong {
    color: var(--degree-strong);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.degree-popular-sort-copy small {
    color: var(--degree-muted);
    font-size: 13px;
}

.degree-popular-sort-caret {
    margin-left: auto;
    color: var(--degree-muted);
    font-size: 16px;
}

.degree-popular-sort-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--degree-panel-2) 56%, transparent);
    color: var(--degree-strong);
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    opacity: 0;
    cursor: pointer;
}

.degree-popular-sort-select option {
    background: color-mix(in srgb, var(--degree-panel) 96%, #000 4%);
    color: var(--degree-strong);
}

.degree-popular-panels {
    min-width: 0;
}

.degree-popular-hub.is-loading {
    pointer-events: none;
}

.degree-popular-hub.is-loading .degree-popular-panels {
    opacity: .68;
    transition: opacity .18s ease;
}

.degree-popular-panel {
    display: grid;
    gap: 18px;
    padding: 22px;
    overflow: hidden;
}

.degree-popular-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.degree-popular-panel-copy {
    display: grid;
    gap: 4px;
}

.degree-popular-panel-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-width: 220px;
    margin-left: auto;
    align-self: flex-start;
}

.degree-popular-panel-actions .degree-carousel-controls {
    justify-content: flex-end;
    width: 100%;
}

.degree-popular-panel-actions .degree-popular-sortbox {
    align-self: flex-end;
}

.degree-popular-panel-title {
    margin: 0;
    color: var(--degree-strong);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.degree-popular-panel-note {
    margin: 0;
    color: var(--degree-muted);
    font-size: 13px;
    line-height: 1.6;
}

.degree-popular-carousel {
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.degree-popular-carousel::-webkit-scrollbar {
    display: none;
}

.degree-popular-list {
    display: flex;
    gap: 16px;
}

.degree-popular-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 0 0 calc((100% - 32px) / 3);
    min-height: 280px;
    padding: 20px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #07111f;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    isolation: isolate;
}

.degree-watch-discovery-hub .degree-popular-card {
    flex-basis: calc((100% - 16px) / 2);
}

.degree-popular-card:hover {
    transform: translateY(-2px);
}

.degree-popular-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: none;
    pointer-events: none;
}

/* Arka plan thumb tıklama alanı (kartın tamamını kaplar; başlık linki üstte kalır) */
.degree-popular-card-thumb-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    border-radius: inherit;
    cursor: pointer;
}

.degree-popular-card-thumb-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Başlık + alt bilgilerin tıklanabilir bölgesi (hub linki) */
.degree-popular-card-title-link {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    display: grid;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
}

.degree-popular-card-title-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 8px;
}

.degree-popular-copy {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: grid;
    gap: 8px;
    width: 100%;
    align-content: end;
    --degree-popular-chip-bg: rgba(8, 14, 24, 0.34);
    --degree-popular-chip-color: #ffffff;
    --degree-popular-chip-border: rgba(255, 255, 255, 0.16);
}

body[data-degree-theme="light"] .degree-popular-copy {
    --degree-popular-chip-bg: rgba(255, 255, 255, 0.38);
    --degree-popular-chip-color: #111827;
    --degree-popular-chip-border: rgba(255, 255, 255, 0.28);
}

.degree-popular-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    margin-bottom: 6px;
    border-radius: 999px;
    border: 1px solid var(--degree-popular-chip-border);
    background: var(--degree-popular-chip-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--degree-popular-chip-color);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
}

.degree-popular-copy strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    color: var(--degree-popular-chip-color);
    width: fit-content;
    max-width: min(90%, 20ch);
    padding: 8px 12px;
    border: 1px solid var(--degree-popular-chip-border);
    border-radius: 10px;
    background: var(--degree-popular-chip-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.degree-popular-subtitle {
    display: inline-flex;
    align-items: center;
    color: var(--degree-popular-chip-color);
    font-size: 14px;
    line-height: 1.5;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--degree-popular-chip-border);
    border-radius: 8px;
    background: var(--degree-popular-chip-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.degree-popular-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.degree-popular-meta span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--degree-popular-chip-border);
    background: var(--degree-popular-chip-bg);
    color: var(--degree-popular-chip-color);
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.degree-popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.degree-popular-tags span,
.degree-popular-tag-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--degree-popular-chip-border);
    background: var(--degree-popular-chip-bg);
    color: var(--degree-popular-chip-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

/* Alt-grupları (subtitle parçaları) ve child chip'leri thumb-link'in üzerinde tıklanabilir tut */
.degree-popular-subtitle-parts,
.degree-popular-tags {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
}

.degree-popular-subtitle--link,
.degree-popular-tag-link {
    pointer-events: auto;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.degree-popular-subtitle--link:hover,
.degree-popular-tag-link:hover {
    background: rgba(255, 255, 255, 0.18);
}

.degree-popular-subtitle--link:focus-visible,
.degree-popular-tag-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.degree-popular-category-card .degree-popular-copy {
    gap: 10px;
}

.degree-watch-discovery-hub .degree-popular-copy strong {
    max-width: min(94%, 30ch);
    font-size: 20px;
    line-height: 1.18;
}

.degree-watch-discovery-hub .degree-popular-rank {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    margin: 0;
    background: rgba(0,0,0,.34);
    font-size: 14px;
}

.degree-popular-card:hover .degree-popular-copy strong,
.degree-popular-card:hover .degree-popular-subtitle,
.degree-popular-card:hover .degree-popular-meta span,
.degree-popular-card:hover .degree-popular-rank {
    color: var(--degree-popular-chip-color);
}

.degree-watch-discovery-card.is-route-card {
    flex-basis: calc((100% - 16px) / 2);
    min-height: 340px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--degree-border) 74%, transparent);
    background-color: #101010;
    box-shadow: 0 20px 42px rgba(0,0,0,.24);
}

.degree-route-discovery-collage {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: #101010;
}

.degree-route-discovery-collage span {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #151515;
}

.degree-route-discovery-collage span:first-child:nth-last-child(1) {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.degree-route-discovery-collage span:first-child:nth-last-child(2),
.degree-route-discovery-collage span:first-child:nth-last-child(2) ~ span {
    grid-row: 1 / -1;
}

.degree-route-discovery-collage span:first-child:nth-last-child(3) {
    grid-row: 1 / -1;
}

.degree-route-discovery-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}

.degree-watch-discovery-card.is-route-card:hover .degree-route-discovery-collage img {
    transform: scale(1.035);
}

.degree-watch-discovery-card.is-route-card .degree-popular-overlay {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.78) 78%),
        linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.04) 58%);
}

.degree-watch-discovery-card.is-route-card .degree-popular-copy {
    min-height: 100%;
    padding: 18px;
    align-content: end;
    gap: 9px;
}

.degree-watch-discovery-card.is-route-card .degree-popular-rank {
    background: rgba(0,0,0,.34);
}

.degree-watch-discovery-card.is-route-card .degree-popular-copy strong {
    display: -webkit-box;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 19px;
    line-height: 1.14;
    text-shadow: 0 2px 14px rgba(0,0,0,.5);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.degree-watch-discovery-card.is-route-card .degree-popular-subtitle {
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    opacity: .86;
}

.degree-watch-discovery-card.is-route-card .degree-popular-meta {
    margin-top: 2px;
}

.degree-watch-discovery-card.is-route-card .degree-popular-meta span {
    min-height: 30px;
    padding: 6px 10px;
    background: rgba(0,0,0,.34);
    font-size: 12px;
    font-weight: 900;
}

.degree-route-discovery-cta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 34px;
    margin-top: 4px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--degree-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 34px;
}

.degree-popular-parent-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: min(100%, 860px);
}

.degree-popular-parent-tab {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel-2) 72%, transparent);
    color: var(--degree-strong);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.degree-popular-parent-tab.is-active {
    background: color-mix(in srgb, var(--degree-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--degree-accent) 42%, var(--degree-border));
}

@media (max-width: 1024px) {
    .degree-popular-panel-actions {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
    }

    .degree-popular-panel-actions .degree-carousel-controls {
        justify-content: flex-start;
    }

    .degree-popular-rank {
        width: 48px;
        height: 48px;
        font-size: 14px;
    }

    .degree-popular-copy strong {
        font-size: 20px;
        max-width: min(92%, 18ch);
    }

    .degree-popular-parent-tabs {
        max-width: 100%;
    }
}

.degree-viewer-shell {
    overflow: hidden;
    background: #000;
}

.degree-viewer-stage {
    position: relative;
    z-index: 0;
    isolation: isolate;
    min-height: var(--degree-watch-viewer-h);
    background: #000;
}

.degree-viewer-stage #degree-pano {
    position: absolute;
    inset: 0;
}

.degree-viewer-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 20%, transparent 74%, rgba(0,0,0,.5));
    z-index: 2;
}

.degree-viewer-empty {
    display: grid;
    place-items: center;
    padding: 32px;
    background: linear-gradient(135deg, #151515, #090909);
}

.degree-viewer-empty-box {
    max-width: 460px;
    text-align: center;
}

.degree-viewer-empty-box h3 {
    color: var(--degree-strong);
}

.degree-viewer-empty-box p {
    color: var(--degree-muted);
    line-height: 1.7;
}

.degree-viewer-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.degree-viewer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: var(--degree-panel-2);
    color: var(--degree-strong);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.degree-viewer-button.is-accent {
    background: var(--degree-strong);
    border-color: var(--degree-strong);
    color: var(--degree-inverse);
}

.degree-watch-top {
    margin: 0 0 20px;
    padding: 18px 22px;
    min-width: 0;
}

.degree-watch-top-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

.degree-watch-top-copy {
    min-width: 0;
    flex: 0 1 auto;
}

.degree-watch-top-title {
    margin: 0;
    color: var(--degree-strong);
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 750;
    line-height: 1.18;
}

.degree-watch-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    min-width: 0;
    max-width: 100%;
    color: var(--degree-muted);
}

.degree-watch-top-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-left: 18px;
    padding: 2px 0 2px 18px;
    border: 0;
    border-left: 1px solid var(--degree-border);
    background: transparent;
    color: var(--degree-strong);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.degree-watch-top-link:hover {
    color: var(--degree-muted);
}

.degree-watch-top-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel-2) 78%, transparent);
    color: var(--degree-muted);
    font-size: 13px;
    line-height: 1;
}

.degree-watch-top-link strong {
    overflow: hidden;
    color: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.degree-watch-top-meta {
    cursor: default;
}

.degree-watch-top-meta:hover {
    color: var(--degree-strong);
}

.degree-viewer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
    grid-template-areas:
        "viewer scenes"
        "actions side"
        "main side";
    align-items: stretch;
    gap: 24px;
}

@media (min-width: 1440px) {
    .degree-viewer-grid {
        grid-template-columns: minmax(0, 1.85fr) minmax(360px, 440px);
    }
}

.degree-viewer-primary {
    grid-area: viewer;
    min-width: 0;
    display: contents;
}

.degree-viewer-scenes {
    grid-area: scenes;
    min-width: 0;
    height: var(--degree-watch-viewer-h);
    max-height: var(--degree-watch-viewer-h);
}

.degree-viewer-main-content {
    grid-area: main;
    min-width: 0;
    display: grid;
    gap: 24px;
}

.degree-viewer-side {
    grid-area: side;
    min-width: 0;
    align-self: start;
    display: grid;
    gap: 24px;
}

.degree-viewer-primary > .degree-panel.degree-viewer-shell {
    grid-area: viewer;
    min-width: 0;
}

.degree-viewer-primary > .degree-panel.degree-watch-actions-shell {
    grid-area: actions;
    min-width: 0;
}

.degree-watch-panel {
    padding: 24px;
}

.degree-watch-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 0;
}

.degree-watch-title {
    margin: 12px 0 10px;
    color: var(--degree-strong);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.degree-watch-subtitle {
    color: var(--degree-muted);
    font-size: 15px;
    line-height: 1.65;
    max-width: 780px;
}

.degree-watch-subtitle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.degree-watch-description {
    color: var(--degree-muted);
    font-size: 15px;
    line-height: 1.75;
    max-width: 920px;
}

.degree-watch-description-wrap {
    display: grid;
    gap: 0;
    max-width: 920px;
    position: relative;
}

.degree-watch-description-wrap.is-collapsed .degree-watch-description {
    display: -webkit-box;
    max-height: 8.75em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.degree-watch-description-wrap.is-collapsed::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 8.8em;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--degree-panel) 0%, transparent) 0%,
        color-mix(in srgb, var(--degree-panel) 42%, transparent) 34%,
        color-mix(in srgb, var(--degree-panel) 86%, transparent) 68%,
        var(--degree-panel) 100%
    );
}

.degree-watch-description-toggle {
    justify-self: stretch;
    align-items: center;
    display: flex;
    gap: 12px;
    width: 100%;
    min-height: 34px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--degree-strong);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color .18s ease;
}

.degree-watch-description-toggle::before,
.degree-watch-description-toggle::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--degree-border) 52%, var(--degree-muted) 48%)
    );
}

.degree-watch-description-toggle::after {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--degree-border) 52%, var(--degree-muted) 48%),
        transparent
    );
}

.degree-watch-description-toggle:hover,
.degree-watch-description-toggle:focus-visible {
    color: var(--degree-strong);
}

.degree-watch-description-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--degree-border) 72%, var(--degree-strong) 28%);
    border-radius: 999px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--degree-panel-2) 94%, #fff 6%), color-mix(in srgb, var(--degree-panel) 96%, #000 4%));
    color: color-mix(in srgb, var(--degree-strong) 82%, var(--degree-muted));
    font-size: 12px;
    line-height: 1;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.degree-watch-description-toggle:hover .degree-watch-description-toggle-icon,
.degree-watch-description-toggle:focus-visible .degree-watch-description-toggle-icon {
    border-color: color-mix(in srgb, var(--degree-border) 42%, var(--degree-strong) 58%);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.degree-watch-description-toggle[aria-expanded="true"] .degree-watch-description-toggle-icon {
    transform: rotate(180deg);
}

.degree-watch-description-toggle [data-description-toggle-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.degree-watch-description-toggle[hidden] {
    display: none;
}

.degree-watch-description p {
    margin: 0 0 12px;
}

.degree-watch-description p:last-child {
    margin-bottom: 0;
}

.degree-origin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel-2) 90%, transparent);
    color: var(--degree-strong);
    font-size: 16px;
    font-weight: 800;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.degree-origin-link:hover {
    background: var(--degree-soft);
    border-color: color-mix(in srgb, var(--degree-border) 65%, var(--degree-text));
    transform: translateY(-1px);
}

.degree-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.degree-hero-meta span {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--degree-chip-bg);
    color: var(--degree-text);
    font-size: 12px;
    font-weight: 700;
}

.degree-module {
    padding: 24px;
}

.degree-module h3 {
    margin-top: 0;
    color: var(--degree-strong);
}

.degree-module p {
    color: var(--degree-muted);
    line-height: 1.75;
}

.degree-watch-layout {
    grid-template-columns: minmax(0, 1fr);
}

.degree-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.degree-side-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--degree-border);
    color: var(--degree-muted);
}

.degree-side-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.degree-side-list strong {
    color: var(--degree-strong);
    font-weight: 700;
    text-align: right;
}

.degree-location-line {
    margin: 0;
    color: var(--degree-strong);
    font-size: 16px;
    font-weight: 700;
}

.degree-location-map {
    position: relative;
    z-index: 0;
    isolation: isolate;
    height: 260px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--degree-border);
    background: var(--degree-soft);
}

.degree-location-map .leaflet-top {
    top: 0;
    transform: none;
}

.degree-location-map .leaflet-top .leaflet-control,
.degree-location-map .leaflet-left .leaflet-control {
    margin-top: 14px;
    margin-left: 14px;
}

.degree-location-map .degree-map-zoom-control,
.degree-location-map .leaflet-control-zoom {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.degree-location-map .degree-map-zoom-control .leaflet-control-zoom-in,
.degree-location-map .degree-map-zoom-control .leaflet-control-zoom-out,
.degree-location-map .leaflet-control-zoom-in,
.degree-location-map .leaflet-control-zoom-out {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 0 8px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-indent: 0;
    -webkit-text-stroke: 0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.degree-location-map .degree-map-zoom-control .leaflet-control-zoom-out,
.degree-location-map .leaflet-control-zoom-out {
    margin-bottom: 0;
}

.degree-location-map .degree-map-zoom-control .leaflet-control-zoom-in:hover,
.degree-location-map .degree-map-zoom-control .leaflet-control-zoom-out:hover,
.degree-location-map .leaflet-control-zoom-in:hover,
.degree-location-map .leaflet-control-zoom-out:hover {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.degree-location-tooltip {
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel) 94%, #fff 6%);
    box-shadow: var(--degree-shadow);
    color: var(--degree-strong);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: center;
}

.degree-location-tooltip:before {
    display: none;
}

.degree-location-tooltip.leaflet-tooltip-top::before {
    border-top-color: color-mix(in srgb, var(--degree-panel) 94%, #fff 6%);
}

.degree-map-route-button {
    margin-top: 16px;
    width: 100%;
}

.degree-category-tree,
.degree-trend-groups,
.degree-discovery-stack,
.degree-feature-groups {
    display: grid;
    gap: 16px;
}

.degree-category-branch,
.degree-trend-group,
.degree-discovery-group,
.degree-feature-group {
    padding: 16px;
    border: 1px solid var(--degree-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--degree-panel-2) 88%, transparent);
}

.degree-category-branch strong,
.degree-trend-group strong,
.degree-discovery-group strong,
.degree-feature-group > span,
.degree-mini-card span strong,
.degree-comments-empty strong {
    display: block;
    color: var(--degree-strong);
}

.degree-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.degree-category-toggle-icon {
    color: var(--degree-muted);
    transition: transform .18s ease;
}

.degree-category-toggle.is-open .degree-category-toggle-icon {
    transform: rotate(180deg);
}

.degree-category-panel[hidden] {
    display: none !important;
}

.degree-tree-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.degree-tree-item {
    padding-left: 12px;
    border-left: 1px solid var(--degree-border);
}

.degree-tree-leaf-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-left: 12px;
}

.degree-tree-link {
    color: var(--degree-text);
    text-decoration: none;
}

.degree-tree-link.is-active {
    color: var(--degree-strong);
    font-weight: 700;
}

.degree-tree-leaf {
    display: block;
}

.degree-category-tree-scroll {
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.degree-category-tree-scroll {
    gap: 0;
    border: 1px solid var(--degree-category-menu-border);
    border-radius: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--degree-category-menu-bg);
    padding-right: 0;
    box-shadow: var(--degree-category-menu-shadow);
}

.degree-category-tree-scroll .degree-category-branch {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--degree-category-menu-divider);
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--degree-category-menu-text-strong) 6%, transparent);
}

.degree-category-tree-scroll .degree-category-branch:last-child {
    border-bottom: 0;
}

.degree-category-tree-scroll .degree-category-toggle {
    min-height: 52px;
    padding: 0 16px;
    background: var(--degree-category-menu-row);
    color: var(--degree-category-menu-text);
}

.degree-category-tree-scroll .degree-category-toggle strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--degree-category-menu-text-strong);
}

.degree-category-tree-scroll .degree-category-toggle.is-open {
    box-shadow: inset 3px 0 0 var(--degree-category-menu-highlight);
}

.degree-category-tree-scroll .degree-category-toggle-icon {
    color: color-mix(in srgb, var(--degree-category-menu-text) 82%, transparent);
    font-size: 13px;
}

.degree-category-root-link {
    color: inherit;
    text-decoration: none;
}

.degree-category-order {
    display: inline-block;
    min-width: 2ch;
    margin-right: 8px;
    color: color-mix(in srgb, var(--degree-category-menu-text) 76%, transparent);
}

.degree-category-root-link.is-active {
    color: var(--degree-category-menu-text-strong);
}

.degree-category-submenu {
    display: grid;
    gap: 0;
    background: var(--degree-category-menu-sub);
}

.degree-category-subitem {
    display: block;
    padding: 13px 16px 13px 22px;
    border-top: 1px solid var(--degree-category-menu-divider);
    color: var(--degree-category-menu-text);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
}

.degree-category-suborder {
    display: inline-block;
    min-width: 3.5ch;
    margin-right: 8px;
    color: color-mix(in srgb, var(--degree-category-menu-text) 72%, transparent);
}

.degree-category-subitem:hover {
    background: var(--degree-category-menu-hover);
    color: var(--degree-category-menu-text-strong);
    padding-left: 26px;
}

.degree-category-subitem.is-active {
    color: var(--degree-category-menu-text-strong);
    background: linear-gradient(180deg, color-mix(in srgb, var(--degree-category-menu-highlight) 18%, transparent) 0%, color-mix(in srgb, var(--degree-category-menu-highlight) 8%, transparent) 100%);
}

.degree-geo-tree {
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.degree-geo-tree {
    gap: 0;
    border: 1px solid var(--degree-category-menu-border);
    border-radius: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--degree-category-menu-bg);
    padding-right: 0;
    box-shadow: var(--degree-category-menu-shadow);
}

.degree-geo-tree .degree-category-branch,
.degree-geo-tree .degree-tree-item {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--degree-category-menu-divider);
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--degree-category-menu-text-strong) 6%, transparent);
}

.degree-geo-tree .degree-category-branch:last-child,
.degree-geo-tree .degree-tree-item:last-child {
    border-bottom: 0;
}

.degree-geo-tree .degree-category-toggle {
    min-height: 52px;
    padding: 0 16px;
    background: var(--degree-category-menu-row);
    color: var(--degree-category-menu-text);
}

.degree-geo-tree .degree-category-toggle strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--degree-category-menu-text-strong);
}

.degree-geo-tree .degree-category-toggle.is-open {
    box-shadow: inset 3px 0 0 var(--degree-category-menu-highlight);
}

.degree-geo-tree .degree-category-toggle-icon {
    color: color-mix(in srgb, var(--degree-category-menu-text) 82%, transparent);
    font-size: 13px;
}

.degree-geo-tree .degree-category-panel {
    background: var(--degree-category-menu-sub);
}

.degree-geo-tree .degree-tree-list,
.degree-geo-tree .degree-tree-leaf-list {
    gap: 0;
    margin-top: 0;
    padding-left: 0;
}

.degree-geo-tree .degree-tree-item {
    margin-left: 14px;
    padding-left: 0;
    border-left: 1px solid var(--degree-category-menu-divider);
}

.degree-geo-tree .degree-tree-link {
    display: block;
    padding: 13px 16px 13px 22px;
    color: var(--degree-category-menu-text);
    text-decoration: none;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
}

.degree-geo-tree .degree-tree-link:hover {
    background: var(--degree-category-menu-hover);
    color: var(--degree-category-menu-text-strong);
    padding-left: 26px;
}

.degree-geo-tree .degree-tree-link.is-active {
    color: var(--degree-category-menu-text-strong);
    background: linear-gradient(180deg, color-mix(in srgb, var(--degree-category-menu-highlight) 18%, transparent) 0%, color-mix(in srgb, var(--degree-category-menu-highlight) 8%, transparent) 100%);
}

.degree-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.degree-tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--degree-chip-bg);
    color: var(--degree-text);
    font-size: 12px;
    font-weight: 700;
}

.degree-tag.is-active {
    background: color-mix(in srgb, var(--degree-accent) 18%, var(--degree-chip-bg));
    color: var(--degree-strong);
    border: 1px solid color-mix(in srgb, var(--degree-accent) 36%, var(--degree-border));
}

.degree-meta-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.degree-historical-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.degree-historical-rail {
    padding-bottom: 6px;
}

.degree-historical-card {
    display: grid;
    gap: 10px;
    min-height: 128px;
    padding: 18px;
    border: 1px solid var(--degree-border);
    border-radius: var(--degree-radius);
    background: color-mix(in srgb, var(--degree-panel-2) 86%, transparent);
}

.degree-historical-rail .degree-historical-card {
    flex: 0 0 154px;
    min-height: 132px;
    padding: 16px 14px;
    scroll-snap-align: start;
}

.degree-historical-card span {
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.degree-historical-card strong {
    color: var(--degree-strong);
    font-size: 24px;
    line-height: 1.2;
}

.degree-history-rail {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.degree-history-rail::-webkit-scrollbar {
    display: none;
}

.degree-history-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(128px, 148px));
    flex: 0 0 auto;
    gap: 12px;
    min-width: max-content;
}

.degree-history-timeline::before {
    content: none;
}

.degree-history-milestone {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px 14px 13px;
    border: 1px solid var(--degree-border);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--degree-panel-2) 90%, transparent), color-mix(in srgb, var(--degree-panel) 96%, transparent));
}

.degree-history-dot {
    display: none;
}

.degree-history-label,
.degree-history-context-chip span:first-child {
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
}

.degree-history-milestone strong {
    color: var(--degree-strong);
    font-size: 24px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
}

.degree-history-context-row {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
}

.degree-history-context-chip {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    align-content: start;
    gap: 14px;
    min-width: 128px;
    min-height: 96px;
    padding: 18px 14px 13px;
    border: 1px solid var(--degree-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 78%, transparent);
}

.degree-history-context-chip strong {
    color: var(--degree-strong);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.degree-history-context-chip .degree-color-scale {
    width: auto;
    max-width: 100%;
    margin-top: 0;
    grid-column: 1;
}

.degree-season-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.degree-season-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel) 92%, var(--degree-strong) 6%);
    border: 1px solid var(--degree-border);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.degree-season-icon:hover,
.degree-season-icon:focus {
    transform: translateY(-1px) scale(1.06);
    border-color: color-mix(in srgb, var(--degree-strong) 26%, transparent);
    background: color-mix(in srgb, var(--degree-strong) 8%, transparent);
    outline: none;
}

/* Custom instant tooltip used by season icons & color swatches */
.degree-tip {
    position: relative;
}

.degree-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    background: var(--degree-strong, #0f172a);
    color: var(--degree-panel, #ffffff);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 30;
}

.degree-tip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    width: 8px;
    height: 8px;
    background: var(--degree-strong, #0f172a);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 30;
}

.degree-tip:hover::after,
.degree-tip:focus::after,
.degree-tip:focus-visible::after,
.degree-tip:hover::before,
.degree-tip:focus::before,
.degree-tip:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0) ;
}

.degree-tip:hover::before,
.degree-tip:focus::before,
.degree-tip:focus-visible::before {
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

@media (max-width: 640px) {
    .degree-history-timeline {
        grid-template-columns: repeat(3, minmax(112px, 124px));
        gap: 10px;
    }

    .degree-history-milestone,
    .degree-history-context-chip {
        min-height: 84px;
        gap: 12px;
        padding: 15px 12px 12px;
        border-radius: 14px;
    }

    .degree-history-milestone strong {
        font-size: 20px;
    }

    .degree-history-context-chip {
        min-width: 116px;
    }
}

.degree-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.degree-module-head .listing-desc-headline {
    margin-bottom: 0;
}

.degree-color-swatch-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.degree-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--degree-swatch, #64748b);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.degree-color-swatch-row small {
    color: var(--degree-muted);
    font-size: 12px;
}

.degree-color-scale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    min-height: 30px;
}

.degree-color-scale-stop {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--degree-swatch, #64748b);
    border: 1px solid var(--degree-border);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--degree-panel) 70%, transparent);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.degree-color-scale-stop:hover,
.degree-color-scale-stop:focus {
    transform: translateY(-1px) scale(1.08);
    border-color: color-mix(in srgb, var(--degree-strong) 30%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--degree-panel) 60%, transparent), 0 2px 8px color-mix(in srgb, var(--degree-strong) 18%, transparent);
    outline: none;
}

.degree-status-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.degree-status-rail::-webkit-scrollbar {
    display: none;
}

.degree-status-card {
    position: relative;
    flex: 0 0 154px;
    min-height: 132px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 16px 14px;
    border: 1px solid var(--degree-border);
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--degree-panel-2) 92%, transparent) 0%, color-mix(in srgb, var(--degree-panel) 96%, transparent) 100%);
    scroll-snap-align: start;
    text-align: center;
}

.degree-status-card strong {
    color: var(--degree-strong);
    font-size: 13px;
    line-height: 1.35;
}

.degree-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--degree-soft) 72%, transparent);
    color: var(--degree-strong);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

.degree-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.degree-status-card.is-available .degree-status-badge {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.4);
}

.degree-status-card.is-unavailable .degree-status-badge {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.degree-route-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.degree-route-card-grid > .degree-route-section-copy {
    grid-column: 1 / -1;
    margin: 0;
}

.degree-route-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100%;
    color: inherit;
    border: 1px solid var(--degree-border);
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--degree-panel-2) 90%, transparent);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.degree-route-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--degree-accent) 44%, var(--degree-border));
    background: color-mix(in srgb, var(--degree-soft) 62%, var(--degree-panel));
}

.degree-route-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #101010;
    overflow: hidden;
}

.degree-route-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.degree-route-card-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .52);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.degree-route-card-body {
    display: grid;
    gap: 9px;
    padding: 15px;
}

.degree-route-card-body strong {
    color: var(--degree-strong);
    font-size: 17px;
    line-height: 1.35;
}

.degree-route-card-body span,
.degree-route-section-copy,
.degree-route-end-note {
    color: var(--degree-muted);
    font-size: 14px;
    line-height: 1.6;
}

.degree-route-card-body small {
    color: var(--degree-strong);
    font-size: 12px;
    font-weight: 800;
}

.degree-route-head-link {
    min-height: 38px;
    padding: 8px 13px;
}

.degree-route-page-grid {
    width: 100%;
}

.degree-route-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
    gap: 28px;
    align-items: stretch;
}

.degree-route-hero-copy {
    min-width: 0;
}

.degree-route-hero-media {
    position: relative;
    min-height: 260px;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    align-self: stretch;
}

.degree-route-hero-media img,
.degree-route-collage-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.degree-route-hero-collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.degree-route-collage-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #151515;
}

.degree-route-collage-tile:first-child:nth-last-child(1),
.degree-route-collage-tile.is-single {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.degree-route-collage-tile:first-child:nth-last-child(2),
.degree-route-collage-tile:first-child:nth-last-child(2) ~ .degree-route-collage-tile {
    grid-row: 1 / -1;
}

.degree-route-collage-tile:first-child:nth-last-child(3) {
    grid-row: 1 / -1;
}

.degree-route-collage-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58));
}

.degree-route-collage-tile figcaption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.degree-route-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: 18px;
}

.degree-route-timeline::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: color-mix(in srgb, var(--degree-border) 82%, transparent);
}

.degree-route-stop {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    padding: 0 0 14px;
}

.degree-route-stop-index {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--degree-soft);
    color: var(--degree-strong);
    border: 1px solid var(--degree-border);
    font-size: 14px;
    font-weight: 900;
}

.degree-route-stop-main {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 132px;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--degree-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--degree-panel-2) 90%, transparent);
}

.degree-route-stop-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    min-height: 116px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #101010;
}

.degree-route-stop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.degree-route-stop-main:hover .degree-route-stop-thumb img {
    transform: scale(1.035);
}

.degree-route-stop-copy {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
}

.degree-route-stop-copy strong {
    color: var(--degree-strong);
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.degree-route-stop-copy small,
.degree-route-stop-copy p {
    margin: 0;
    color: var(--degree-muted);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.degree-route-stop-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.degree-route-stop-actions span,
.degree-route-stop-actions a,
.degree-route-transfer {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--degree-border);
    color: var(--degree-strong);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.degree-route-duration-badge {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 7px;
    min-height: 42px !important;
    min-width: 112px;
    padding: 8px 10px !important;
    line-height: 1.1 !important;
    background: color-mix(in srgb, var(--degree-soft) 72%, transparent);
}

.degree-route-duration-badge small,
.degree-route-transfer-copy span {
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.degree-route-duration-badge strong,
.degree-route-transfer-time strong {
    color: var(--degree-strong);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.degree-route-stop-actions a {
    justify-content: center;
    width: 100%;
    background: var(--degree-soft);
}

.degree-route-transfer {
    position: relative;
    z-index: 1;
    width: fit-content;
    min-width: 360px;
    margin: 0 0 14px 54px;
    display: grid;
    grid-template-columns: 34px auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px 8px 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--degree-soft) 68%, var(--degree-panel));
    color: var(--degree-text);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.degree-route-transfer-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-strong) 12%, transparent);
    color: var(--degree-strong);
    font-size: 16px;
    font-weight: 900;
}

.degree-route-transfer-copy {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.degree-route-transfer-copy strong {
    color: var(--degree-strong);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.degree-route-transfer-time {
    display: inline-flex;
    align-items: baseline;
    padding-left: 12px;
    border-left: 1px solid var(--degree-border);
}

.degree-route-transfer-metric {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel) 78%, transparent);
    color: var(--degree-strong);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.degree-route-status-card {
    text-decoration: none;
}

.degree-route-status-card small {
    color: var(--degree-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.degree-module-head .degree-carousel-button[disabled] {
    opacity: .35;
    pointer-events: none;
}

.degree-watch-actions-shell {
    margin-top: 0;
    padding: 10px 14px;
    border-radius: var(--degree-radius);
    background: color-mix(in srgb, var(--degree-panel-2) 94%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}

.degree-watch-actions-shell::-webkit-scrollbar {
    display: none;
}

.degree-watch-action-bar {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    min-width: max-content;
}

.degree-watch-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 50px;
    padding: 0 18px 0 16px;
    border-right: 1px solid var(--degree-border);
}

.degree-watch-title-rating {
    margin-left: 18px;
    min-height: 44px;
    padding: 0 0 0 18px;
    border-right: 0;
    border-left: 1px solid var(--degree-border);
}

.degree-watch-rating-icon {
    margin-right: 4px;
}

.degree-watch-rating-star {
    width: 24px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--degree-muted) 60%, transparent);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: color .14s ease, transform .14s ease;
}

.degree-watch-rating-star.is-active {
    color: #f6b400;
}

.degree-watch-rating-star:hover {
    transform: translateY(-1px);
}

.degree-watch-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid var(--degree-border);
    border-radius: 0;
    background: transparent;
    color: var(--degree-strong);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
    cursor: pointer;
}

.degree-watch-action-chip:last-child {
    border-right: 0;
}

.degree-watch-action-chip:hover {
    background: color-mix(in srgb, var(--degree-panel) 92%, #fff 8%);
}

.degree-watch-action-chip.is-active {
    background: var(--degree-strong);
    color: var(--degree-inverse);
}

.degree-watch-action-link {
    color: var(--degree-strong);
}

.degree-watch-action-chip.is-metric {
    padding-inline: 16px;
}

.degree-watch-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
}

.degree-mini-card-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.degree-mini-card {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: inherit;
}

.degree-watch-sidebar-block {
    overflow: hidden;
}

.degree-watch-sidebar-card {
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 16px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.degree-watch-sidebar-card:hover,
.degree-watch-sidebar-card:focus-visible {
    border-color: var(--degree-border);
    background: color-mix(in srgb, var(--degree-panel-2) 80%, transparent);
    transform: translateY(-1px);
}

.degree-mini-card img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
}

.degree-mini-card span {
    min-width: 0;
}

.degree-mini-card small {
    display: block;
    margin-top: 4px;
    color: var(--degree-muted);
    font-size: 12px;
    line-height: 1.5;
}

.degree-watch-discovery-panels {
    min-width: 0;
}

.degree-watch-discovery-panels .degree-popular-panel[hidden] {
    display: none !important;
}

.degree-watch-discovery-hub .degree-carousel-button[disabled] {
    opacity: .35;
    pointer-events: none;
}

.degree-comments-empty {
    padding: 18px;
    border: 1px dashed var(--degree-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--degree-panel-2) 72%, transparent);
}

.degree-comments-empty p {
    margin: 8px 0 0;
}

.degree-comments-list {
    display: grid;
    gap: 14px;
}

.degree-comment {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--degree-border);
}

.degree-comment:first-child {
    padding-top: 0;
    border-top: 0;
}

.degree-comment:last-child {
    padding-bottom: 0;
}

.degree-comment-avatar {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--degree-panel-2);
    color: var(--degree-text);
    display: grid;
    place-items: center;
    font-weight: 700;
    text-transform: uppercase;
}

.degree-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.degree-comment-main {
    min-width: 0;
}

.degree-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin-bottom: 6px;
}

.degree-comment-meta strong {
    color: var(--degree-text);
}

.degree-comment-meta time {
    color: var(--degree-muted);
    font-size: .88rem;
}

.degree-comment-main p {
    margin: 0;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.degree-scene-carousel-panel {
    padding: 18px;
    height: var(--degree-watch-viewer-h);
    max-height: var(--degree-watch-viewer-h);
    display: flex;
    flex-direction: column;
}

.degree-scene-carousel-panel.is-compact {
    align-self: start;
    height: var(--degree-watch-viewer-h);
    max-height: var(--degree-watch-viewer-h);
}

.degree-scene-carousel-head {
    margin-bottom: 14px;
    align-items: center;
}

.degree-scene-carousel-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.degree-scene-carousel {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.degree-scene-carousel-panel.is-compact .degree-scene-carousel {
    flex: none;
    height: auto;
    overflow: visible;
}

.degree-scene-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.degree-scene-carousel-panel.is-compact .degree-scene-list {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.degree-scene-side-facts {
    flex: 1;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--degree-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 76%, transparent);
}

.degree-scene-side-facts.is-terse {
    flex: 0 0 auto;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
}

.degree-scene-side-facts h4 {
    margin: 0 0 16px;
    color: var(--degree-strong);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
}

.degree-scene-side-facts.is-terse h4 {
    margin-bottom: 12px;
    font-size: 17px;
}

.degree-scene-side-fact-grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    gap: 9px 12px;
}

.degree-scene-side-facts.is-terse .degree-scene-side-fact-grid {
    gap: 7px 12px;
}

.degree-scene-side-fact-grid span {
    color: var(--degree-muted);
    font-size: 12px;
    font-weight: 700;
}

.degree-scene-side-fact-grid strong {
    min-width: 0;
    overflow: hidden;
    color: var(--degree-strong);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.degree-scene-list::-webkit-scrollbar {
    display: none;
}

.degree-scene-card {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    min-height: 94px;
    padding: 8px 12px 8px 8px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 82%, transparent);
    border: 1px solid var(--degree-border);
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.degree-scene-card:hover,
.degree-scene-card.is-active {
    transform: none;
    border-color: var(--degree-active-stroke);
    background: color-mix(in srgb, var(--degree-soft) 78%, var(--degree-panel-2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--degree-active-stroke) 80%, transparent), var(--degree-shadow);
}

.degree-scene-card img {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    object-fit: cover;
}

.degree-scene-index {
    position: static;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 30px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--degree-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-panel) 76%, transparent);
    color: var(--degree-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.degree-scene-origin-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    background: var(--degree-chip-bg);
    color: var(--degree-strong);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.degree-scene-origin-badge:hover {
    background: var(--degree-soft);
    transform: translateX(1px);
}

.degree-scene-origin-badge:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--degree-text) 24%, transparent);
    outline-offset: 2px;
}

.degree-scene-card-title {
    position: static;
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    display: -webkit-box;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    color: var(--degree-strong);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.018em;
    line-height: 1.26;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.degree-scene-card::after {
    content: none;
}

@media (min-width: 1271px) {
    body.degree-watch-theater .degree-viewer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
        grid-template-areas:
            "viewer viewer"
            "actions actions"
            "scenes scenes"
            "main side";
    }

    body.degree-watch-theater .degree-viewer-stage {
        min-height: clamp(520px, calc(100svh - var(--degree-header-offset, 74px) - 128px), 760px);
    }

    body.degree-watch-theater .degree-viewer-scenes,
    body.degree-watch-theater .degree-scene-carousel-panel,
    body.degree-watch-theater .degree-scene-carousel-panel.is-compact {
        height: auto;
        max-height: none;
    }

    body.degree-watch-theater .degree-scene-carousel {
        height: auto;
        overflow: hidden;
    }

    body.degree-watch-theater .degree-scene-list,
    body.degree-watch-theater .degree-scene-carousel-panel.is-compact .degree-scene-list {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        height: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }

    body.degree-watch-theater .degree-scene-card {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        flex: 0 0 min(34vw, 360px);
        min-height: 112px;
        padding: 10px;
    }

    body.degree-watch-theater .degree-scene-card img {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 112px;
        height: 92px;
        border-radius: 12px;
    }

    body.degree-watch-theater .degree-scene-card-title {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: 14px;
    }

    body.degree-watch-theater .degree-scene-index {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    body.degree-watch-theater .degree-scene-side-facts {
        flex: none;
    }
}

.degree-footer {
    margin-top: 34px;
    padding: 26px 0 0;
    border-top: 1px solid var(--degree-border);
}

.degree-footer-panel {
    padding: 20px 24px;
}

.degree-footer-brand-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.degree-footer-brand-title {
    display: block;
    font-size: 17px;
}

.degree-footer-description {
    margin: 0;
    line-height: 1.7;
}

.degree-footer-heading {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.degree-footer-link-list {
    display: grid;
    gap: 8px;
}

.degree-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 74px;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
    background: color-mix(in srgb, var(--degree-elevated) 94%, transparent);
    border-bottom: 1px solid var(--degree-border);
    backdrop-filter: blur(18px);
}

.degree-topbar-group {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 0 1 auto;
}

.degree-icon-button,
.degree-pill-button,
.degree-theme-button {
    border: 1px solid var(--degree-border);
    background: var(--degree-panel-2);
    color: var(--degree-strong);
}

.degree-icon-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
}

.degree-theme-button {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.degree-theme-icon {
    font-size: 18px;
    line-height: 1;
}

.degree-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--degree-strong);
}

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

.degree-brand-logo--light {
    display: none;
}

body[data-degree-theme="light"] .degree-brand-logo--dark {
    display: none;
}

body[data-degree-theme="light"] .degree-brand-logo--light {
    display: block;
}

.degree-brand-mark {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--degree-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.degree-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.degree-brand-copy strong {
    color: var(--degree-strong);
    font-size: 18px;
    font-weight: 800;
}

.degree-brand-copy small {
    color: var(--degree-muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.degree-brand-tagline {
    align-self: flex-end;
    margin-left: -6px;
    margin-bottom: 4px;
    color: var(--degree-muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 150px;
}

.degree-search-shell {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.degree-search-box {
    position: relative;
    width: min(720px, 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.degree-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--degree-border);
    border-radius: 12px;
    background: var(--degree-input);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    min-width: 0;
    box-sizing: border-box;
}

.degree-search-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: color-mix(in srgb, var(--degree-muted) 78%, var(--degree-text));
    font-size: 20px;
    line-height: 1;
    transform: translateY(-1px);
}

.degree-search-input input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--degree-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    padding: 0;
    margin: 0;
    display: block;
    align-self: center;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    border-radius: 0;
    transform: translateY(1px);
}

.degree-search-input input::placeholder {
    color: var(--degree-muted);
    font-weight: 600;
    line-height: 38px;
}

.degree-search-input input:focus,
.degree-search-input input:focus-visible {
    outline: none;
    box-shadow: none;
}

.degree-search-box.is-open .degree-search-input {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.degree-search-submit {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 17px;
    border-radius: 12px;
}

.degree-search-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 120;
    max-height: min(68vh, 560px);
    padding: 10px;
    border: 1px solid var(--degree-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--degree-panel-2) 96%, transparent);
    box-shadow: var(--degree-shadow);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.degree-search-state {
    padding: 16px 16px 14px;
    color: var(--degree-muted);
    font-size: 13px;
}

.degree-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(min(68vh, 560px) - 20px);
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--degree-muted) 35%, transparent) transparent;
}

.degree-search-results::-webkit-scrollbar {
    width: 8px;
}

.degree-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.degree-search-results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--degree-muted) 35%, transparent);
}

.degree-search-result {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 16px;
    color: inherit;
    transition: background .18s ease;
}

.degree-search-result:hover,
.degree-search-result.is-active {
    background: var(--degree-soft);
}

.degree-search-result-thumb,
.degree-search-result-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--degree-soft);
    color: var(--degree-strong);
    font-size: 18px;
    font-weight: 800;
}

.degree-search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.degree-search-result-copy {
    min-width: 0;
}

.degree-search-result-title {
    color: var(--degree-strong);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.degree-search-result-meta {
    margin-top: 4px;
    color: var(--degree-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.degree-search-result-type {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--degree-chip-bg);
    color: var(--degree-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

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

.degree-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.degree-pill-button {
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.degree-pill-button.is-strong {
    background: var(--degree-strong);
    border-color: var(--degree-strong);
    color: var(--degree-inverse);
    font-weight: 800;
}

.degree-footer-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(180px, .7fr));
    gap: 22px;
}

.degree-footer h4,
.degree-footer strong {
    color: var(--degree-strong);
}

.degree-footer p,
.degree-footer small,
.degree-footer a,
.degree-footer span {
    color: var(--degree-muted);
}

@media (max-width: 1270px) {
    .degree-grid-hero,
    .degree-viewer-grid,
    .degree-tour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .degree-location-chip-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .degree-hub-discovery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .degree-viewer-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "viewer"
            "scenes"
            "main"
            "side";
        align-items: start;
    }

    .degree-viewer-primary {
        grid-area: viewer;
        display: grid;
        gap: 24px;
        min-width: 0;
    }

    .degree-viewer-primary > .degree-panel.degree-viewer-shell,
    .degree-viewer-primary > .degree-panel.degree-watch-actions-shell {
        grid-area: auto;
        min-width: 0;
    }

    .degree-viewer-scenes {
        height: auto;
        max-height: none;
    }

    .degree-scene-carousel-panel {
        height: auto;
        max-height: none;
    }

    .degree-discovery-card {
        flex-basis: calc((100% - 14px) / 2);
        min-height: 250px;
    }

    .degree-scene-carousel {
        overflow: hidden;
        cursor: grab;
    }

    .degree-scene-carousel.is-dragging {
        cursor: grabbing;
    }

    .degree-scene-list {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        padding-right: 0;
        padding-bottom: 4px;
    }

    .degree-scene-card {
        display: block;
        min-height: 220px;
        padding: 0;
        background: #111;
        flex: 0 0 calc((100% - 48px) / 4);
    }

    .degree-scene-card img {
        width: 100%;
        height: 100%;
        min-height: 220px;
        border-radius: 0;
    }

    .degree-scene-index {
        top: 14px;
        left: 14px;
    }

    .degree-scene-card-title {
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 14px;
        padding: 10px 14px;
        border-radius: 14px;
        background: var(--degree-glass-bg);
        border: 1px solid var(--degree-glass-border);
        backdrop-filter: blur(8px);
        color: var(--degree-glass-text);
    }

    .degree-scene-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0.58) 100%);
        pointer-events: none;
    }

    .degree-historical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .degree-grid-hero {
        grid-template-columns: 1fr;
    }

    .degree-grid-hero,
    .degree-home-hero,
    .degree-home-hero .degree-viewer-stage,
    .degree-home-hero #degree-home-pano,
    .degree-home-picks,
    .degree-home-picks-carousel,
    .degree-home-picks-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .degree-home-hero {
        height: clamp(320px, 54vw, 420px);
        min-height: clamp(320px, 54vw, 420px);
        max-height: clamp(320px, 54vw, 420px);
    }

    .degree-home-hero .degree-viewer-stage {
        min-height: clamp(320px, 54vw, 420px);
    }

    .degree-home-picks {
        margin-top: 0;
        padding: 18px;
        min-height: auto;
        max-height: none;
        overflow: hidden;
    }
}

@media (max-width: 960px) {
    .degree-grid-hero,
    .degree-home-hero,
    .degree-home-hero .degree-viewer-stage,
    .degree-home-hero #degree-home-pano,
    .degree-home-picks,
    .degree-home-picks-carousel,
    .degree-home-picks-list,
    .degree-content-grid,
    .degree-discovery-grid,
    .degree-discovery-panel,
    .degree-discovery-carousel,
    .degree-discovery-list,
    .degree-popular-section,
    .degree-tour-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.degree-sidebar-open::before {
        opacity: 1;
    }

    .degree-search-box {
        width: 100%;
    }

    .degree-search-dropdown {
        max-height: min(62vh, 480px);
    }

    .degree-search-results {
        max-height: calc(min(62vh, 480px) - 20px);
    }

    .degree-watch-top-actions {
        order: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        flex-basis: 100%;
        padding-top: 14px;
        border-left: 0;
        border-top: 1px solid var(--degree-border);
    }

    .degree-watch-top-link,
    .degree-watch-title-rating {
        min-height: 58px;
        margin-left: 0;
        padding: 11px 12px;
        border: 1px solid var(--degree-border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--degree-panel-2) 68%, transparent);
    }

    .degree-watch-top-link {
        justify-content: flex-start;
    }

    .degree-watch-title-rating {
        justify-content: flex-start;
        width: 100%;
    }

}

@media (max-width: 960px) {
    .degree-watch-top {
        padding: 18px;
    }

    .degree-watch-top-head {
        gap: 12px;
    }

    .degree-watch-top-copy {
        order: 1;
        flex-basis: 100%;
    }

    .degree-watch-top-title {
        font-size: clamp(24px, 5vw, 32px);
    }

    .degree-topbar {
        height: auto;
        min-height: var(--degree-header-h);
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 10px 14px 14px;
    }

    .degree-topbar-group {
        order: 1;
        flex: 1 1 auto;
        gap: 10px;
        min-width: 0;
    }

    .degree-brand-copy small,
    .degree-brand-tagline {
        display: none;
    }

    .degree-brand {
        gap: 10px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .degree-brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 14px;
        flex: 0 0 34px;
    }

    .degree-brand-copy strong {
        font-size: 16px;
        white-space: nowrap;
    }

    .degree-search-shell {
        order: 3;
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .degree-search-box {
        gap: 10px;
        width: min(100%, 320px);
        margin-left: auto;
        margin-right: auto;
    }

    .degree-search-input {
        min-height: 38px;
        padding: 0 14px;
    }

    .degree-action-group {
        order: 2;
        flex: 0 0 auto;
        gap: 6px;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .degree-pill-button,
    .degree-theme-button,
    .degree-icon-button {
        flex-shrink: 0;
    }

    .degree-icon-button,
    .degree-theme-button {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .degree-pill-button {
        min-height: 38px;
        padding: 0 11px;
        font-size: 12px;
        border-radius: 10px;
    }

    .degree-pill-button.is-strong {
        max-width: 108px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .degree-search-dropdown {
        top: calc(100% + 10px);
        border-radius: 14px;
    }

    .degree-search-submit {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
        font-size: 17px;
    }

    .degree-sidebar {
        transform: translateX(-100%);
        width: min(84vw, 320px);
        max-width: 320px;
    }

    .degree-main {
        margin-left: 0;
        padding: 20px 16px 34px;
    }

    body.degree-sidebar-open .degree-sidebar {
        transform: translateX(0);
        box-shadow: 30px 0 80px rgba(0, 0, 0, 0.35);
        z-index: 150;
    }

    .degree-grid-hero,
    .degree-tour-grid,
    .degree-module-grid,
    .degree-location-chip-grid,
    .degree-hub-heading-main,
    .degree-hub-discovery-grid,
    .degree-hub-about,
    .degree-meta-grid {
        grid-template-columns: 1fr;
    }

    .degree-hub-stats,
    .degree-hub-about-meta {
        justify-content: flex-start;
    }

    .degree-hub-discovery {
        padding: 16px;
    }

    .degree-discovery-collage {
        aspect-ratio: 16 / 9;
        grid-template-rows: repeat(2, minmax(48px, 1fr));
    }

    .degree-category-archive-head {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .degree-archive-actions {
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
    }

    .degree-archive-sortbox {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid var(--degree-border);
    }

    .degree-category-archive-head > div:first-child {
        padding: 18px;
    }

    .degree-archive-sort-trigger {
        min-height: 72px;
        padding: 14px 18px;
    }

    .degree-home-picks {
        min-height: auto;
        max-height: none;
        overflow: hidden;
    }

    .degree-scene-card {
        flex-basis: calc((100% - 16px) / 2);
    }

    .degree-historical-grid {
        grid-template-columns: 1fr;
    }

    .degree-discovery-list {
        gap: 12px;
    }

    .degree-discovery-card {
        flex-basis: min(82vw, 320px);
        min-height: 220px;
    }

    .degree-discovery-head {
        align-items: flex-start;
    }

    .degree-discovery-title {
        font-size: 24px;
    }

    .degree-discovery-panel {
        padding: 16px;
    }

    .degree-discovery-carousel {
        overflow: visible;
    }

    .degree-discovery-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }

    .degree-discovery-card {
        flex-basis: auto;
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 14px;
    }

    .degree-popular-section .degree-tour-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .degree-popular-toolbar {
        gap: 12px;
    }

    .degree-popular-toolbar-frame {
        grid-template-columns: 1fr;
        border-bottom: 1px solid var(--degree-border);
        overflow: visible;
        gap: 10px;
        padding: 0;
    }

    .degree-popular-panel {
        padding: 16px;
    }

    .degree-popular-panel-head {
        align-items: flex-start;
    }

    .degree-popular-list {
        gap: 12px;
    }

    .degree-popular-card {
        flex-basis: min(82vw, 320px);
        min-height: 240px;
        padding: 16px;
    }

    .degree-watch-discovery-hub .degree-popular-card {
        flex-basis: min(82vw, 320px);
    }

    .degree-watch-discovery-card.is-route-card {
        flex-basis: min(86vw, 340px);
        min-height: 280px;
        padding: 0;
    }

    .degree-watch-discovery-card.is-route-card .degree-popular-copy {
        padding: 16px;
    }

    .degree-watch-discovery-card.is-route-card .degree-popular-copy strong {
        font-size: 18px;
    }

    .degree-popular-sortbox {
        min-width: 0;
        border-left: 0;
        border-top: 1px solid var(--degree-border);
    }

    .degree-popular-sort-trigger {
        min-height: 72px;
        padding: 14px 4px 6px;
    }

    .degree-footer-panel {
        padding: 20px 18px;
    }

    .degree-footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 1024px) {
    .degree-watch-action-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .degree-watch-action-bar::-webkit-scrollbar {
        display: none;
    }

    .degree-watch-action-chip {
        flex: 0 0 auto;
    }

    .degree-watch-rating {
        flex: 0 0 auto;
    }

    .degree-mini-card-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .degree-home-hero {
        height: 340px;
        min-height: 340px;
        max-height: 340px;
    }

    .degree-home-hero .degree-viewer-stage {
        min-height: 340px;
    }

    .degree-home-picks-title {
        font-size: 22px;
    }

    .degree-popular-copy strong {
        font-size: 22px;
    }

    .degree-watch-discovery-hub .degree-popular-copy strong {
        font-size: 18px;
    }

    .degree-home-picks {
        height: auto;
        min-height: auto;
        max-height: none;
    }

    .degree-viewer-stage {
        min-height: 320px;
    }

    body.degree-watch-theater .degree-viewer-stage {
        min-height: clamp(360px, 62svh, 560px);
    }

    .degree-watch-panel,
    .degree-module,
    .degree-home-picks,
    .degree-scene-carousel-panel {
        padding: 18px;
    }

    .degree-status-card {
        flex-basis: 144px;
        min-height: 126px;
        padding: 15px 13px;
    }

    .degree-discovery-copy strong {
        font-size: 20px;
    }

    .degree-popular-tablist {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .degree-popular-tablist::-webkit-scrollbar {
        display: none;
    }

    .degree-popular-tab {
        white-space: nowrap;
        min-height: 72px;
        padding: 14px 20px;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .degree-grid-hero {
        grid-template-columns: minmax(0, 1fr) minmax(288px, 34vw);
        gap: 18px;
        align-items: stretch;
    }

    .degree-home-hero,
    .degree-home-hero .degree-viewer-stage,
    .degree-home-picks {
        height: 340px;
        min-height: 340px;
        max-height: 340px;
    }

    .degree-home-picks {
        padding: 16px;
        overflow: hidden;
    }

    .degree-home-picks-carousel {
        cursor: auto;
    }

    .degree-home-picks-list,
    .degree-home-picks-list[data-layout="desktop"] {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-snap-type: y proximity;
        touch-action: pan-y;
        height: 100% !important;
        max-height: 100% !important;
        padding-right: 4px;
        padding-bottom: 0;
    }

    .degree-home-pick,
    .degree-home-picks-list[data-layout="desktop"] .degree-home-pick {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 10px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 96px;
        padding: 9px 10px;
        scroll-snap-align: start;
    }

    .degree-home-pick-media {
        width: 78px;
        height: 78px;
        border-radius: 10px;
    }

    .degree-home-pick-copy strong {
        font-size: 15px;
        line-height: 1.16;
    }

    .degree-home-pick-location span {
        font-size: 10px;
        line-height: 1.12;
    }
}

@media (max-width: 640px) {
    .degree-mini-card-list-grid {
        grid-template-columns: 1fr;
    }

    .degree-mini-card-wide img {
        height: 180px;
    }

    .degree-discovery-tablist {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .degree-discovery-tablist::-webkit-scrollbar {
        display: none;
    }

    .degree-discovery-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

body.degree-home-picks-mobile .degree-home-picks {
    height: auto;
    min-height: auto;
    max-height: none;
}

body.degree-home-picks-mobile .degree-home-picks-carousel {
    cursor: grab;
}

body.degree-home-picks-mobile .degree-home-picks-carousel.is-dragging {
    cursor: grabbing;
}

body.degree-home-picks-mobile .degree-home-picks-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    height: auto !important;
    max-height: none !important;
    padding-right: 0;
    padding-bottom: 4px;
    width: 100% !important;
    min-width: 0;
}

.degree-home-picks-list[data-layout="mobile"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
}

body.degree-home-picks-mobile .degree-home-pick {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    flex: 0 0 min(88vw, 320px) !important;
    width: min(88vw, 320px) !important;
    min-width: min(88vw, 320px) !important;
    max-width: min(88vw, 320px) !important;
    min-height: 108px;
    max-height: none;
    padding: 10px;
    scroll-snap-align: start;
}

.degree-home-picks-list[data-layout="mobile"] .degree-home-pick {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    flex: 0 0 min(88vw, 320px) !important;
    width: min(88vw, 320px) !important;
    min-width: min(88vw, 320px) !important;
    max-width: min(88vw, 320px) !important;
    min-height: 108px;
    max-height: none;
    padding: 10px;
    scroll-snap-align: start;
}

body.degree-home-picks-mobile .degree-home-pick-copy {
    position: static;
    gap: 4px;
    min-width: 0;
}

body.degree-home-picks-mobile .degree-home-pick-index {
    position: static;
}

body.degree-home-picks-mobile .degree-home-pick-media {
    width: 96px;
    height: 96px;
    border-radius: 9px;
    flex: 0 0 96px;
}

body.degree-home-picks-mobile .degree-home-pick-copy strong {
    font-size: 15px;
    line-height: 1.16;
}

body.degree-home-picks-mobile .degree-home-pick-location span {
    font-size: 10px;
    line-height: 1.12;
}

@media (max-width: 767px) {
    .degree-home-hero {
        height: var(--degree-home-hero-mobile-h);
        min-height: var(--degree-home-hero-mobile-h);
        max-height: var(--degree-home-hero-mobile-h);
    }

    .degree-home-hero .degree-viewer-stage {
        min-height: var(--degree-home-hero-mobile-h);
    }

    .degree-home-picks {
        height: auto;
        min-height: auto;
        max-height: none;
        padding: 16px;
    }

    body.degree-watch-theater .degree-viewer-stage {
        min-height: clamp(280px, 56svh, 420px);
    }

    .degree-watch-top {
        margin-bottom: 16px;
        padding: 14px;
    }

    .degree-watch-top-head {
        gap: 10px;
    }

    .degree-watch-top-title {
        font-size: clamp(22px, 7vw, 28px);
        line-height: 1.14;
    }

    .degree-watch-top-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 10px;
    }

    .degree-watch-top-link,
    .degree-watch-title-rating {
        min-height: 52px;
        padding: 10px;
        border-radius: 10px;
    }

    .degree-watch-top-link strong {
        font-size: 14px;
    }

    .degree-home-picks-carousel {
        cursor: auto;
    }

    .degree-home-picks-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        height: auto !important;
        max-height: none !important;
        padding-right: 0;
        padding-bottom: 4px;
        width: 100% !important;
    }

    .degree-home-pick {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        flex: 0 0 min(88vw, 320px) !important;
        width: min(88vw, 320px) !important;
        min-width: min(88vw, 320px) !important;
        max-width: min(88vw, 320px) !important;
        min-height: 108px;
        max-height: none;
        padding: 10px;
        scroll-snap-align: start;
    }

    .degree-home-pick-copy {
        position: static;
        gap: 4px;
        min-width: 0;
    }

    .degree-home-pick-media {
        width: 96px;
        height: 96px;
        border-radius: 9px;
        flex: 0 0 96px;
    }

    .degree-home-pick-copy strong {
        font-size: 15px;
        line-height: 1.16;
    }

    .degree-home-pick-location {
        gap: 2px;
    }

    .degree-home-pick-location span {
        font-size: 10px;
        line-height: 1.12;
    }

    .degree-chip-row {
        gap: 8px;
        margin-bottom: 16px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .degree-chip-row::-webkit-scrollbar {
        display: none;
    }

    .degree-chip {
        flex: 0 0 auto;
    }

    .degree-discover-section {
        margin-bottom: 24px;
    }

    .degree-section-head {
        margin-bottom: 14px;
    }

    .degree-discovery-head {
        margin-bottom: 12px;
    }

    .degree-discovery-title {
        font-size: 21px;
    }

    .degree-discovery-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .degree-discovery-copy {
        padding: 16px;
    }

    .degree-discovery-copy strong {
        font-size: 19px;
        line-height: 1.12;
    }

    .degree-home-picks-list,
    .degree-home-picks-list[data-layout="mobile"],
    body.degree-home-picks-mobile .degree-home-picks-list {
        gap: 12px !important;
    }

    .degree-home-pick,
    .degree-home-picks-list[data-layout="mobile"] .degree-home-pick,
    body.degree-home-picks-mobile .degree-home-pick {
        min-height: 112px;
        padding: 10px;
    }
}

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

    .degree-route-hero-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .degree-route-hero-media {
        min-height: 220px;
    }

    .degree-route-stop-main {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .degree-route-stop-actions {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .degree-route-stop-actions a {
        width: auto;
    }
}

@media (max-width: 720px) {
    .degree-route-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .degree-route-stop-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .degree-route-stop-thumb {
        min-height: 180px;
    }

    .degree-route-stop-actions {
        grid-column: auto;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .degree-route-transfer {
        margin-left: 54px;
        min-width: 0;
        max-width: calc(100% - 54px);
        grid-template-columns: 34px minmax(0, 1fr);
        width: calc(100% - 54px);
    }

    .degree-route-transfer-time {
        grid-column: 2;
        width: fit-content;
        padding-left: 0;
        border-left: 0;
    }

    .degree-route-transfer-copy {
        grid-template-columns: minmax(0, auto) auto;
    }
}

@media (max-width: 420px) {
    .degree-watch-top-actions {
        grid-template-columns: 1fr;
    }

    .degree-discovery-list {
        grid-template-columns: 1fr !important;
    }

    .degree-discovery-card {
        aspect-ratio: 1.25 / 1;
    }
}

/* ============================================================
   AD SLOTS — Reklam yerleşimleri için ortak stiller
   ============================================================ */

.ad-slot {
    display: block;
    margin: 1.5rem 0;
    padding: 0;
    background: var(--degree-soft, transparent);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}

.ad-slot::before {
    content: 'Reklam';
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 0.625rem;
    color: var(--degree-muted, #888);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 1;
}

.ad-slot ins.adsbygoogle {
    display: block;
    width: 100%;
}

.ad-slot.degree-ad-section {
    width: 100%;
    max-width: 100%;
}

.ad-slot.degree-ad-horizontal {
    width: 100%;
    max-width: 100%;
}

.ad-slot.degree-ad-sidebar {
    margin: 0 0 1rem;
    width: 100%;
    max-width: 100%;
}

.ad-slot.degree-ad-square {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 0.84;
    min-height: min(250px, 80vw);
}

.ad-slot.degree-ad-sidebar.degree-ad-square {
    aspect-ratio: auto;
    padding: 10px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--degree-panel) 92%, #fff 4%), color-mix(in srgb, var(--degree-panel-2) 92%, #000 8%));
    border: 1px solid color-mix(in srgb, var(--degree-border) 82%, #fff 10%);
    border-radius: 18px;
    box-shadow: var(--degree-shadow);
}

.ad-slot.degree-ad-sidebar.degree-ad-square::before {
    top: 0.7rem;
    right: 0.85rem;
    color: color-mix(in srgb, var(--degree-muted) 78%, var(--degree-text) 22%);
}

.ad-slot.degree-ad-sidebar.degree-ad-square ins.adsbygoogle,
.ad-slot.degree-ad-sidebar.degree-ad-square .ad-sponsor-link {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

body[data-degree-theme="light"] .ad-slot.degree-ad-sidebar.degree-ad-square {
    background: var(--degree-panel);
    border-color: var(--degree-border);
}

.ad-sponsor-link {
    display: block;
    line-height: 0;
}

.ad-sponsor-image {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 720px) {
    .ad-slot {
        margin: 1rem 0;
    }
    .ad-slot.degree-ad-horizontal,
    .ad-slot.degree-ad-square,
    .ad-slot.degree-ad-sidebar {
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
    }
}

/* ============================================================
   FOOTER — Sosyal medya satırları (Faz 12+)
   ============================================================ */
.degree-footer .degree-footer-social-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100%;
}
.degree-footer .degree-footer-social-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 0 !important;
    color: var(--degree-text) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
    width: max-content;
    max-width: 100%;
}
.degree-footer .degree-footer-social-row:hover { color: var(--degree-accent) !important; }
.degree-footer .degree-footer-social-glyph {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--degree-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--degree-text);
}
.degree-footer .degree-footer-social-row:hover .degree-footer-social-glyph {
    background: var(--degree-accent);
    color: #fff;
}
.degree-footer .degree-footer-link-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.degree-footer .degree-footer-link-list a,
.degree-footer .degree-footer-link-list span {
    display: block !important;
    font-size: 13px !important;
}
.degree-footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--degree-border);
    color: var(--degree-muted);
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
}
.degree-footer-bottom strong { color: var(--degree-text); }

/* ============================================================
   COOKIE CONSENT — Sağ alt köşe kart (Faz 11)
   ============================================================ */
div#cookie-consent.cookie-consent {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    z-index: 99999 !important;
    width: 360px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: color-mix(in srgb, var(--degree-panel) 96%, transparent) !important;
    color: var(--degree-text) !important;
    border: 1px solid var(--degree-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
div#cookie-consent[hidden] { display: none !important; }

/* İçerik renkleri tema-aware */
div#cookie-consent .cookie-consent__inner { padding: 18px 18px 16px; }
div#cookie-consent .cookie-consent__title {
    color: var(--degree-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
}
div#cookie-consent .cookie-consent__text {
    color: var(--degree-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
div#cookie-consent .cookie-consent__link {
    color: var(--degree-accent) !important;
    text-decoration: underline !important;
}
div#cookie-consent .cookie-consent__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
div#cookie-consent .cookie-consent__secondary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
div#cookie-consent .cookie-consent__btn {
    padding: 10px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: filter 0.15s ease, transform 0.12s ease !important;
    white-space: nowrap;
    flex: none !important;
    width: 100% !important;
}
div#cookie-consent .cookie-consent__btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
div#cookie-consent .cookie-consent__btn--reject {
    background: var(--degree-soft) !important;
    color: var(--degree-text) !important;
    border: 1px solid var(--degree-border) !important;
}
div#cookie-consent .cookie-consent__btn--customize {
    background: var(--degree-soft) !important;
    color: var(--degree-text) !important;
    border: 1px solid var(--degree-border) !important;
}
div#cookie-consent .cookie-consent__btn--accept {
    background: var(--degree-accent) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--degree-accent) 30%, transparent) !important;
}
div#cookie-consent .cookie-consent__customize {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--degree-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
/* [hidden] attribute'u flex !important'i geçer */
div#cookie-consent .cookie-consent__customize[hidden] {
    display: none !important;
}
div#cookie-consent .cookie-consent__option {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--degree-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}
div#cookie-consent .cookie-consent__option input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--degree-accent) !important;
    cursor: pointer !important;
}
div#cookie-consent .cookie-consent__option input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
div#cookie-consent .cookie-consent__option span {
    flex: 1 !important;
    color: var(--degree-text) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
div#cookie-consent .cookie-consent__option span strong {
    color: var(--degree-text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: block !important;
}
div#cookie-consent .cookie-consent__option span small {
    color: var(--degree-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    display: block !important;
}
div#cookie-consent .cookie-consent__customize .cookie-consent__btn {
    margin-top: 6px !important;
}

@media (max-width: 480px) {
    div#cookie-consent.cookie-consent { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; }
}