/* ========================================================================
   VOLO Akademi public home page - customer revision (August 2026)
   Shown only to visitors who are not authenticated.
   ======================================================================== */
body.drc-public-home {
    margin: 0;
    padding-top: 0 !important;
    overflow-x: hidden;
    background: #f3f5f7;
    color: #172033;
    font-family: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.drc-public-home .page {
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: #f3f5f7;
}

body.drc-public-home #gotop,
body.drc-public-home .to-top,
body.drc-public-home .page-aside,
body.drc-public-home .site-menubar,
body.drc-public-home .site-navbar,
body.drc-public-home .site-footer {
    display: none !important;
}

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

.drc-public-landing {
    --home-ink: #111827;
    --home-ink-soft: #1a2436;
    --home-panel: #0f1728;
    --home-panel-2: #081222;
    --home-muted: #687386;
    --home-line: #e2e7ec;
    --home-soft: #f3f5f7;
    --home-white: #ffffff;
    --home-accent: #fefe0c;
    --home-accent-dark: #d5d600;
    --home-accent-soft: rgba(254, 254, 12, .13);
    --home-shadow: 0 22px 58px rgba(15, 23, 40, .09);
    width: 100%;
    min-width: 320px;
    overflow: hidden;
    background: var(--home-soft);
    color: var(--home-ink);
    font-size: 16px;
    line-height: 1.65;
}

.drc-public-landing,
.drc-public-landing * {
    box-sizing: border-box;
}

.drc-public-landing a {
    text-decoration: none;
}

.drc-public-landing img {
    display: block;
    max-width: 100%;
}

.drc-public-landing a,
.drc-public-landing button {
    -webkit-tap-highlight-color: transparent;
}

.drc-public-landing a:focus,
.drc-public-landing button:focus,
.drc-home-area-card:focus {
    outline: 3px solid rgba(254, 254, 12, .38);
    outline-offset: 3px;
}

.drc-home-container {
    width: calc(100% - 64px);
    max-width: 1540px;
    margin-right: auto;
    margin-left: auto;
}

/* Header and navigation. */
.drc-home-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(8, 18, 34, .97);
    box-shadow: 0 8px 26px rgba(4, 10, 20, .12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background-color .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.drc-home-header.is-scrolled {
    position: fixed;
    border-bottom-color: rgba(255, 255, 255, .08);
    background: rgba(8, 18, 34, .97);
    box-shadow: 0 12px 34px rgba(4, 10, 20, .18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.drc-home-header-inner {
    position: relative;
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.drc-home-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    color: #ffffff !important;
}

.drc-home-brand-mark {
    display: inline-flex;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
}

.drc-home-brand-mark img {
    width: auto;
    max-width: 154px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
}

.drc-home-brand-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--home-accent);
    font-size: 26px;
}

.drc-home-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.drc-home-brand-copy strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.drc-home-brand-copy small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .56);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.drc-home-navigation,
.drc-home-nav,
.drc-home-header-actions {
    display: flex;
    align-items: center;
}

.drc-home-navigation {
    gap: 34px;
}

.drc-home-nav {
    gap: 12px;
}

.drc-home-nav-item {
    position: relative;
}

.drc-home-nav-trigger {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: rgba(255, 255, 255, .80);
    font-family: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.drc-home-nav-trigger i {
    color: rgba(255, 255, 255, .48);
    font-size: 12px;
    transition: transform .2s ease, color .2s ease;
}

.drc-home-nav-item:hover > .drc-home-nav-trigger,
.drc-home-nav-item:focus-within > .drc-home-nav-trigger,
.drc-home-nav-item.is-open > .drc-home-nav-trigger {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}

.drc-home-nav-item:hover > .drc-home-nav-trigger i,
.drc-home-nav-item:focus-within > .drc-home-nav-trigger i,
.drc-home-nav-item.is-open > .drc-home-nav-trigger i {
    color: var(--home-accent);
    transform: rotate(180deg);
}

.drc-home-submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 120;
    display: grid;
    visibility: hidden;
    width: 380px;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    opacity: 0;
    background: rgba(8, 18, 34, .985);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
    transform: translateY(-8px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.drc-home-submenu-wide {
    left: auto;
    right: 0;
    width: 440px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.drc-home-nav-item:hover > .drc-home-submenu,
.drc-home-nav-item:focus-within > .drc-home-submenu,
.drc-home-nav-item.is-open > .drc-home-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.drc-home-submenu::before {
    position: absolute;
    top: -13px;
    right: 0;
    left: 0;
    height: 14px;
    content: "";
}

.drc-home-submenu a,
.drc-home-submenu-link {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 12px;
    color: #ffffff !important;
    transition: background-color .18s ease, transform .18s ease;
}

.drc-home-submenu a:hover,
.drc-home-submenu a:focus {
    background: rgba(255, 255, 255, .075);
    transform: translateX(2px);
}

.drc-home-submenu-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(254, 254, 12, .18);
    border-radius: 10px;
    background: rgba(254, 254, 12, .08);
    color: var(--home-accent);
    font-size: 16px;
}

.drc-home-submenu a > span:nth-child(2),
.drc-home-submenu-link > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.drc-home-submenu strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.drc-home-submenu small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.drc-home-submenu-link.is-pending {
    opacity: .56;
    cursor: default;
}

.drc-home-submenu-link em {
    padding: 3px 7px;
    border: 1px solid rgba(254, 254, 12, .22);
    border-radius: 999px;
    color: var(--home-accent);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.drc-home-header-actions {
    gap: 18px;
}

.drc-home-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}

.drc-home-menu-toggle span:not(.sr-only) {
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    transition: transform .2s ease, opacity .2s ease;
}

.drc-home-menu-toggle.is-open span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.drc-home-menu-toggle.is-open span:nth-child(3) { opacity: 0; }
.drc-home-menu-toggle.is-open span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons. */
.drc-home-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 23px;
    border: 1px solid var(--home-accent);
    border-radius: 12px;
    background: var(--home-accent);
    color: #0b1322 !important;
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 14px 34px rgba(254, 254, 12, .14);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.drc-home-button:hover,
.drc-home-button:focus {
    border-color: #ffffff;
    background: #ffffff;
    color: #0b1322 !important;
    box-shadow: 0 19px 42px rgba(0, 0, 0, .20);
    transform: translateY(-2px);
}

.drc-home-button-small {
    min-height: 44px;
    padding: 0 20px;
}

.drc-home-button-large {
    min-width: 205px;
    min-height: 56px;
}

.drc-home-button-secondary {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .055);
    font-size: 13px;
    font-weight: 750;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.drc-home-button-secondary i {
    color: var(--home-accent);
}

.drc-home-button-secondary:hover,
.drc-home-button-secondary:focus {
    border-color: rgba(254, 254, 12, .45);
    background: rgba(254, 254, 12, .08);
    transform: translateY(-2px);
}

/* Hero. */
.drc-home-hero {
    position: relative;
    padding: 102px 0 20px;
    background: var(--home-soft);
}

.drc-home-hero-card {
    position: relative;
    min-height: 620px;
    padding: 60px 62px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 28px;
    background:
        radial-gradient(circle at 89% 4%, rgba(254, 254, 12, .12), transparent 30%),
        linear-gradient(135deg, #111a2c 0%, #07111f 66%, #151c16 100%);
    box-shadow: 0 28px 70px rgba(8, 18, 34, .17);
}

.drc-home-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 500px;
    align-items: center;
    grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
    gap: 74px;
}

.drc-home-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}

.drc-home-orbit-one {
    top: -190px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-color: rgba(254, 254, 12, .15);
}

.drc-home-orbit-two {
    bottom: -250px;
    left: 32%;
    width: 470px;
    height: 470px;
}

.drc-home-eyebrow,
.drc-home-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #59667a;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.drc-home-eyebrow {
    color: rgba(255, 255, 255, .72);
}

.drc-home-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--home-accent);
    box-shadow: 0 0 0 5px rgba(254, 254, 12, .10);
}

.drc-home-hero h1 {
    max-width: 690px;
    margin: 20px 0 22px;
    color: #ffffff;
    font-size: clamp(48px, 4vw, 69px);
    font-weight: 850;
    letter-spacing: -.047em;
    line-height: 1.01;
}

.drc-home-hero h1 span,
.drc-home-section-heading h2 span,
.drc-home-approach h2 span,
.drc-home-audience h2 span {
    color: var(--home-accent-dark);
}

.drc-home-hero-copy > p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: 16px;
    line-height: 1.76;
}

.drc-home-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 31px;
}

.drc-home-trust-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 29px;
}

.drc-home-trust-list span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .60);
    font-size: 12px;
    font-weight: 650;
}

.drc-home-trust-list i {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(254, 254, 12, .10);
    color: var(--home-accent);
    font-size: 9px;
}

.drc-home-hero-visual {
    position: relative;
    min-height: 450px;
}

.drc-home-photo {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .25);
}

.drc-home-hero-visual-label,
.drc-home-hero-progress-card {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(7, 16, 31, .90);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.drc-home-hero-visual-label {
    top: 22px;
    left: -28px;
    display: flex;
    max-width: 310px;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 15px;
}

.drc-home-hero-visual-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--home-accent);
    color: #091221;
    font-size: 16px;
}

.drc-home-hero-visual-label div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.drc-home-hero-visual-label small {
    color: rgba(255, 255, 255, .54);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.drc-home-hero-visual-label strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.drc-home-hero-progress-card {
    right: 20px;
    bottom: 20px;
    width: min(390px, calc(100% - 40px));
    padding: 18px 19px 16px;
    border-radius: 17px;
}

.drc-home-hero-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.drc-home-hero-progress-head span {
    color: rgba(255, 255, 255, .50);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.drc-home-hero-progress-head strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.drc-home-hero-progress-line {
    position: relative;
    height: 20px;
    margin-top: 13px;
}

.drc-home-hero-progress-line span {
    position: absolute;
    top: 9px;
    right: 3px;
    left: 3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(254, 254, 12, .32), var(--home-accent));
}

.drc-home-hero-progress-line i {
    position: absolute;
    top: 4px;
    width: 12px;
    height: 12px;
    border: 3px solid #081222;
    border-radius: 50%;
    background: var(--home-accent);
    box-shadow: 0 0 0 1px rgba(254, 254, 12, .48);
}

.drc-home-hero-progress-line i:nth-of-type(1) { left: 0; }
.drc-home-hero-progress-line i:nth-of-type(2) { left: calc(50% - 6px); }
.drc-home-hero-progress-line i:nth-of-type(3) { right: 0; }

.drc-home-hero-progress-labels {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, .58);
    font-size: 9px;
    font-weight: 700;
}

/* Shared section layout. */
#hakkimizda,
#egitim-yaklasimi,
#egitim-alanlari,
#hedef-kitle,
#akademiden {
    scroll-margin-top: 94px;
}

.drc-home-about,
.drc-home-approach,
.drc-home-areas,
.drc-home-audience,
.drc-home-stats,
.drc-home-credentials,
.drc-home-cta {
    padding: 18px 0;
    background: var(--home-soft);
}

.drc-home-section-card {
    padding: 48px;
    border: 1px solid var(--home-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(15, 23, 40, .035);
}

.drc-home-section-heading {
    margin-bottom: 34px;
}

.drc-home-section-heading-centered {
    max-width: 900px;
    margin-right: auto;
    margin-bottom: 36px;
    margin-left: auto;
    text-align: center;
}

.drc-home-section-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: end;
    gap: 64px;
}

.drc-home-section-heading h2,
.drc-home-about h2,
.drc-home-approach h2,
.drc-home-audience h2,
.drc-home-stats h2,
.drc-home-cta h2 {
    margin: 12px 0 0;
    color: var(--home-ink);
    font-size: clamp(32px, 2.55vw, 46px);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.drc-home-section-heading p,
.drc-home-section-heading-split > p,
.drc-home-about-copy > p,
.drc-home-approach-heading > p,
.drc-home-audience .drc-home-section-heading p,
.drc-home-stats-heading p,
.drc-home-cta-copy p {
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.75;
}

.drc-home-section-heading-centered p {
    max-width: 720px;
    margin: 16px auto 0;
}

.drc-home-section-heading-split > p {
    margin: 0;
}

.drc-home-kicker-light {
    color: var(--home-accent);
}

/* About. */
.drc-home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    align-items: center;
    gap: 64px;
}

.drc-home-about-copy > p {
    margin: 14px 0 0;
}

.drc-home-about-panel {
    position: relative;
    min-height: 520px;
    padding: 30px;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 87% 5%, rgba(254, 254, 12, .16), transparent 30%),
        linear-gradient(145deg, #121c31, #07111f);
    color: #ffffff;
    box-shadow: 0 24px 58px rgba(8, 18, 34, .18);
}

.drc-home-about-panel::before {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(254, 254, 12, .16);
    border-radius: 50%;
    content: "";
}

.drc-home-about-panel-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.drc-home-about-year {
    display: inline-flex;
    min-width: 110px;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(254, 254, 12, .32);
    border-radius: 18px;
    background: rgba(254, 254, 12, .09);
    color: var(--home-accent);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.drc-home-about-panel-head div {
    display: flex;
    flex-direction: column;
}

.drc-home-about-panel-head small {
    color: rgba(255, 255, 255, .49);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.drc-home-about-panel-head strong {
    max-width: 320px;
    margin-top: 4px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 820;
    line-height: 1.3;
}

.drc-home-about-route {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 44px 0 38px;
}

.drc-home-about-route > span {
    display: flex;
    min-height: 98px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
}

.drc-home-about-route > span i {
    color: var(--home-accent);
    font-size: 22px;
}

.drc-home-about-route > span b {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.drc-home-about-route > i {
    color: rgba(254, 254, 12, .58);
}

.drc-home-about-focus-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
}

.drc-home-about-focus-grid article {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
}

.drc-home-about-focus-grid article > span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--home-accent);
    color: #091221;
}

.drc-home-about-focus-grid article div {
    display: flex;
    flex-direction: column;
}

.drc-home-about-focus-grid strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 820;
}

.drc-home-about-focus-grid small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .50);
    font-size: 10px;
    font-weight: 600;
}

/* Learning approach - intentionally different from visual training-area cards. */
.drc-home-approach-card {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
    align-items: stretch;
    gap: 48px;
    padding: 52px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 4% 100%, rgba(254, 254, 12, .12), transparent 28%),
        linear-gradient(135deg, #111b2e, #07111f);
    box-shadow: 0 24px 60px rgba(8, 18, 34, .15);
}

.drc-home-approach-heading {
    align-self: center;
}

.drc-home-approach h2 {
    color: #ffffff;
}

.drc-home-approach-heading > p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .58);
}

.drc-home-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.drc-home-approach-grid article {
    position: relative;
    min-height: 220px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.drc-home-approach-grid article:hover {
    border-color: rgba(254, 254, 12, .33);
    background: rgba(255, 255, 255, .065);
    transform: translateY(-4px);
}

.drc-home-approach-number {
    position: absolute;
    top: 16px;
    right: 18px;
    color: rgba(255, 255, 255, .15);
    font-size: 32px;
    font-weight: 900;
}

.drc-home-approach-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--home-accent);
    color: #091221;
    font-size: 18px;
}

.drc-home-approach-grid h3 {
    margin: 22px 0 9px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 820;
}

.drc-home-approach-grid p {
    margin: 0;
    color: rgba(255, 255, 255, .53);
    font-size: 12px;
    line-height: 1.68;
}

/* Four equal training-area cards with bright, crop-friendly lifestyle imagery. */
.drc-home-areas-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.drc-home-area-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(18, 31, 51, .10);
    border-radius: 19px;
    background: #dfe6ec;
    box-shadow: 0 14px 34px rgba(15, 23, 40, .10);
    cursor: default;
    transition: transform .28s cubic-bezier(.2, .72, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.drc-home-area-card::before {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--home-accent);
    box-shadow: 0 0 0 6px rgba(254, 254, 12, .10), 0 7px 20px rgba(9, 18, 33, .12);
    content: "";
    opacity: .92;
}

.drc-home-area-card img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(1.02) contrast(1.01) brightness(1.02);
    transform: scale(1.002);
    transition: transform .55s cubic-bezier(.2, .72, .3, 1), filter .4s ease;
}

.drc-home-area-card-classroom img { object-position: 52% 50%; }
.drc-home-area-card-practical img { object-position: 55% 52%; }
.drc-home-area-card-trip img { object-position: 52% 50%; }
.drc-home-area-card-digital img { object-position: 52% 50%; }

.drc-home-area-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 12, 25, .02) 20%, rgba(5, 12, 25, .08) 48%, rgba(5, 12, 25, .44) 70%, rgba(5, 12, 25, .94) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 42%);
    transition: background .3s ease;
}

.drc-home-area-copy {
    position: absolute;
    right: 22px;
    bottom: 23px;
    left: 22px;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(3, 10, 22, .34);
    transform: translateY(30px);
    transition: transform .3s ease;
}

.drc-home-area-copy > span {
    display: inline-flex;
    min-width: 42px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border: 1px solid rgba(254, 254, 12, .66);
    border-radius: 999px;
    color: var(--home-accent);
    background: rgba(8, 18, 34, .66);
    box-shadow: 0 8px 20px rgba(3, 10, 22, .14);
    backdrop-filter: blur(7px);
    font-size: 10px;
    font-weight: 850;
}

.drc-home-area-copy h3 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.2;
}

.drc-home-area-copy strong {
    display: block;
    margin-top: 8px;
    color: var(--home-accent);
    font-size: 12px;
    font-weight: 800;
}

.drc-home-area-copy p {
    visibility: hidden;
    max-height: 0;
    margin: 8px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    line-height: 1.58;
    opacity: 0;
    transition: opacity .28s ease, max-height .28s ease, visibility .28s ease;
}

.drc-home-area-card:hover,
.drc-home-area-card:focus {
    z-index: 5;
    border-color: rgba(213, 214, 0, .62);
    box-shadow: 0 25px 56px rgba(15, 23, 40, .19);
    transform: translateY(-7px) scale(1.018);
}

.drc-home-area-card:hover img,
.drc-home-area-card:focus img {
    filter: saturate(1.07) contrast(1.025) brightness(1.035);
    transform: scale(1.055);
}

.drc-home-area-card:hover .drc-home-area-overlay,
.drc-home-area-card:focus .drc-home-area-overlay {
    background:
        linear-gradient(180deg, rgba(4, 11, 24, 0) 12%, rgba(4, 11, 24, .05) 43%, rgba(4, 11, 24, .40) 67%, rgba(4, 11, 24, .96) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 42%);
}

.drc-home-area-card:hover .drc-home-area-copy,
.drc-home-area-card:focus .drc-home-area-copy {
    transform: translateY(0);
}

.drc-home-area-card:hover .drc-home-area-copy p,
.drc-home-area-card:focus .drc-home-area-copy p {
    visibility: visible;
    max-height: 90px;
    opacity: 1;
}

/* Target groups. */
.drc-home-audience-card-wrap {
    position: relative;
    padding: 48px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% -10%, rgba(254, 254, 12, .12), transparent 30%),
        linear-gradient(135deg, #111b2e, #07111f);
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(8, 18, 34, .15);
}

.drc-home-audience .drc-home-section-heading h2 {
    color: #ffffff;
}

.drc-home-audience .drc-home-section-heading p {
    color: rgba(255, 255, 255, .56);
}

.drc-home-audience-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.drc-home-audience-grid::before {
    position: absolute;
    top: 52px;
    right: 8%;
    left: 8%;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(254, 254, 12, .42), transparent);
    content: "";
}

.drc-home-audience-grid article {
    position: relative;
    z-index: 1;
    min-height: 190px;
    padding: 100px 18px 24px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 17px;
    background: rgba(255, 255, 255, .045);
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.drc-home-audience-grid article:hover {
    border-color: rgba(254, 254, 12, .30);
    background: rgba(255, 255, 255, .065);
    transform: translateY(-4px);
}

.drc-home-audience-icon {
    position: absolute;
    top: 24px;
    left: 50%;
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border: 6px solid #111b2e;
    border-radius: 50%;
    background: var(--home-accent);
    color: #091221;
    font-size: 18px;
    box-shadow: 0 0 0 1px rgba(254, 254, 12, .34);
    transform: translateX(-50%);
}

.drc-home-audience-number {
    position: absolute;
    top: 6px;
    left: 50%;
    color: rgba(255, 255, 255, .34);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    transform: translateX(-50%);
}

.drc-home-audience-grid h3 {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.35;
}

/* Statistics. */
.drc-home-stats-card-wrap {
    padding: 48px;
    border: 1px solid var(--home-line);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(15, 23, 40, .035);
}

.drc-home-stats-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.drc-home-stats-heading > div {
    max-width: 800px;
}

.drc-home-stats-heading p {
    margin: 14px 0 0;
}

.drc-home-stats-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #e4e59c;
    border-radius: 999px;
    background: #fffef1;
    color: #6f7100;
    font-size: 10px;
    font-weight: 800;
}

.drc-home-stats-status i {
    color: #999b00;
}

.drc-home-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.drc-home-stat-card {
    position: relative;
    min-height: 230px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #dfe5ea;
    border-radius: 18px;
    background: linear-gradient(145deg, #fbfcfd, #f5f7f9);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.drc-home-stat-card:hover {
    border-color: #d6d733;
    box-shadow: 0 16px 36px rgba(15, 23, 40, .08);
    transform: translateY(-4px);
}

.drc-home-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drc-home-stat-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #101a2c;
    color: var(--home-accent);
    font-size: 20px;
}

.drc-home-stat-trend {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fffef1;
    color: #999b00;
    font-size: 11px;
}

.drc-home-stat-card > strong {
    display: block;
    margin-top: 25px;
    color: var(--home-ink);
    font-size: clamp(28px, 2.5vw, 42px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
}

.drc-home-stat-card > span:not(.drc-home-stat-trend) {
    display: block;
    margin-top: 9px;
    color: #667185;
    font-size: 12px;
    font-weight: 750;
}

.drc-home-stat-chart {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: flex;
    width: 92px;
    height: 54px;
    align-items: flex-end;
    gap: 6px;
    opacity: .78;
}

.drc-home-stat-chart i {
    width: 13px;
    min-height: 8px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--home-accent), #d0d100);
}

/* Akademiden cards. */
.drc-home-credentials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.drc-home-credential-card {
    display: block;
    overflow: hidden;
    border: 1px solid #dfe5ea;
    border-radius: 18px;
    background: #fbfcfd;
    color: inherit !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.drc-home-credential-card:hover,
.drc-home-credential-card:focus {
    border-color: #d8d938;
    box-shadow: 0 22px 50px rgba(15, 23, 40, .12);
    transform: translateY(-6px);
}

.drc-home-credential-image {
    height: 270px;
    overflow: hidden;
    background: #081222;
}

.drc-home-credential-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .42s ease;
}

.drc-home-credential-card:first-child .drc-home-credential-image img {
    object-fit: cover;
}

.drc-home-credential-card:nth-child(2) .drc-home-credential-image img {
    object-position: center 34%;
}

.drc-home-credential-card:hover img,
.drc-home-credential-card:focus img {
    transform: scale(1.035);
}

.drc-home-credential-copy {
    padding: 23px;
}

.drc-home-credential-copy > span {
    color: #8b8d00;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.drc-home-credential-copy h3 {
    margin: 10px 0 10px;
    color: #172033;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.28;
}

.drc-home-credential-copy p {
    margin: 0;
    color: #6f7a8d;
    font-size: 12px;
    line-height: 1.7;
}

.drc-home-credential-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: #172033;
    font-size: 11px;
    font-weight: 850;
}

.drc-home-credential-link i {
    color: #999b00;
    transition: transform .2s ease;
}

.drc-home-credential-card:hover .drc-home-credential-link i,
.drc-home-credential-card:focus .drc-home-credential-link i {
    transform: translateX(4px);
}

/* Rising learning-journey CTA with separated nodes and floating icon circles. */
.drc-home-cta {
    padding-bottom: 28px;
}

.drc-home-cta-card {
    position: relative;
    display: grid;
    min-height: 430px;
    grid-template-columns: minmax(330px, .76fr) minmax(560px, 1.24fr);
    align-items: center;
    gap: 42px;
    padding: 56px 58px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 24px;
    background:
        radial-gradient(circle at 84% 8%, rgba(254, 254, 12, .12), transparent 24%),
        radial-gradient(circle at 64% 86%, rgba(63, 91, 128, .12), transparent 28%),
        linear-gradient(135deg, #111b2e, #07111f 72%);
    box-shadow: 0 25px 62px rgba(8, 18, 34, .17);
}

.drc-home-cta-card::before {
    position: absolute;
    right: -100px;
    bottom: -170px;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    content: "";
}

.drc-home-cta-card::after {
    position: absolute;
    top: 26px;
    right: 30px;
    width: 126px;
    height: 62px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.5px);
    background-size: 12px 12px;
    content: "";
    opacity: .30;
}

.drc-home-cta-copy {
    position: relative;
    z-index: 3;
}

.drc-home-cta h2 {
    color: #ffffff;
}

.drc-home-cta-copy p {
    margin: 15px 0 25px;
    color: rgba(255, 255, 255, .60);
}

.drc-home-journey {
    position: relative;
    z-index: 2;
    min-height: 360px;
    overflow: visible;
}

.drc-home-journey-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.drc-home-journey-line path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drc-home-journey-line .drc-home-journey-glow {
    stroke: rgba(254, 254, 12, .14);
    stroke-width: 12;
    filter: url(#drc-home-journey-glow);
}

.drc-home-journey-line .drc-home-journey-track {
    stroke: url(#drc-home-journey-gradient);
    stroke-width: 2.8;
    filter: drop-shadow(0 0 7px rgba(254, 254, 12, .22));
}

.drc-home-journey-step {
    position: absolute;
    width: 176px;
    color: #ffffff;
    text-align: center;
    transform: translateX(-50%);
}

.drc-home-journey-icon {
    position: absolute;
    top: -90px;
    left: 50%;
    display: inline-flex;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(254, 254, 12, .54);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .10), transparent 38%),
        rgba(8, 18, 34, .93);
    color: var(--home-accent);
    box-shadow: 0 0 0 9px rgba(254, 254, 12, .028), 0 13px 32px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .045);
    font-size: 22px;
    transform: translateX(-50%);
}

.drc-home-journey-icon::before {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    content: "";
}

.drc-home-journey-node {
    position: absolute;
    top: -9px;
    left: 50%;
    display: block;
    width: 18px;
    height: 18px;
    border: 3px solid #fefe0c;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(7, 17, 31, .78), 0 0 16px rgba(254, 254, 12, .34);
    transform: translateX(-50%);
}

.drc-home-journey-node::after {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 2px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fefe0c, rgba(254, 254, 12, .45));
    content: "";
    transform: translateX(-50%);
}

.drc-home-journey-node::before {
    position: absolute;
    top: 36px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fefe0c;
    box-shadow: 0 0 9px rgba(254, 254, 12, .58);
    content: "";
    transform: translateX(-50%);
}

.drc-home-journey-copy {
    position: absolute;
    top: 37px;
    left: 50%;
    width: 176px;
    transform: translateX(-50%);
}

.drc-home-journey-copy strong,
.drc-home-journey-copy small {
    display: block;
}

.drc-home-journey-copy strong {
    margin: 0;
    color: #ffffff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.drc-home-journey-copy small {
    margin-top: 5px;
    color: rgba(255, 255, 255, .56);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.45;
}

.drc-home-journey-step-one { top: 74.45%; left: 21.05%; }
.drc-home-journey-step-two { top: 55.55%; left: 43.42%; }
.drc-home-journey-step-three { top: 35%; left: 68.42%; }
.drc-home-journey-step-four { top: 22.78%; left: 85.53%; }

/* Footer. */
.drc-home-footer {
    margin-top: 0;
    background: #080f20;
    color: #ffffff;
}

.drc-home-footer-main {
    display: grid;
    min-height: 190px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding-top: 45px;
    padding-bottom: 43px;
}

.drc-home-footer-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.drc-home-footer-column > strong {
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
}

.drc-home-footer-column > a,
.drc-home-footer-pending {
    color: rgba(255, 255, 255, .64) !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

.drc-home-footer-column > a:hover,
.drc-home-footer-column > a:focus {
    color: var(--home-accent) !important;
}

.drc-home-footer-pending {
    cursor: default;
}

.drc-home-footer-social-contact {
    justify-self: end;
    width: 100%;
    max-width: 310px;
}

.drc-home-social-links {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 1px 0 5px;
}

.drc-home-social-link {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.drc-home-social-link[href]:hover,
.drc-home-social-link[href]:focus {
    border-color: rgba(254, 254, 12, .58);
    background: rgba(254, 254, 12, .10);
    color: var(--home-accent) !important;
    transform: translateY(-2px);
}

.drc-home-social-link.is-pending {
    opacity: .45;
    cursor: default;
}

.drc-home-social-x {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.drc-home-footer-contact-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.drc-home-footer-contact-list a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .69) !important;
    font-size: 12px;
    font-weight: 650;
}

.drc-home-footer-contact-list a:hover,
.drc-home-footer-contact-list a:focus {
    color: var(--home-accent) !important;
}

.drc-home-footer-contact-list i {
    width: 18px;
    color: var(--home-accent);
    font-size: 15px;
    text-align: center;
}

.drc-home-footer-signature {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #080f20;
    color: #ffffff;
}

.drc-home-footer-signature-inner {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.drc-home-footer-signature-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 19px;
}

.drc-home-footer-signature-brand img {
    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
}

.drc-home-footer-signature-brand > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.drc-home-footer-signature-brand strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
}

.drc-home-footer-signature-brand span {
    margin-top: 3px;
    color: rgba(255, 255, 255, .66);
    font-size: 10px;
    font-weight: 650;
}

.drc-home-footer-signature-copy {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .66);
    font-size: 10px;
    font-weight: 650;
    text-align: right;
}

body.drc-public-home .drc-home-moodle-content {
    display: none !important;
}

/* Separate public pages opened from Sertifikasyonlar / Etkinlikler / Fuarlar. */
.volo-detail-body .page-main,
.volo-detail-body .page-content,
.volo-detail-body #region-main,
.volo-detail-body #region-main-box {
    background: #f3f5f7 !important;
}

.volo-detail-page {
    --volo-detail-ink: #10182b;
    --volo-detail-accent: #fefe0c;
    width: calc(100% - 64px);
    max-width: 1540px;
    margin: 0 auto;
    padding: 50px 0 86px;
    color: var(--volo-detail-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.volo-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    color: #5d687b !important;
    font-size: 12px;
    font-weight: 750;
}

.volo-detail-back:hover,
.volo-detail-back:focus {
    color: #11192c !important;
}

.volo-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr);
    gap: 46px;
    align-items: center;
    padding: 50px;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(circle at 90% 0, rgba(254, 254, 12, .10), transparent 32%),
        linear-gradient(135deg, #111b2e, #07111f);
    box-shadow: 0 26px 70px rgba(8, 18, 34, .15);
}

.volo-detail-kicker {
    display: inline-flex;
    margin-bottom: 13px;
    color: var(--volo-detail-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.volo-detail-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: 46px;
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.volo-detail-copy p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .67);
    font-size: 15px;
    line-height: 1.75;
}

.volo-detail-visual {
    height: 390px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    background: #081222;
}

.volo-detail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.volo-detail-page-sertifikasyonlar .volo-detail-visual img {
    object-fit: contain;
}

.volo-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 46px;
    margin-top: 28px;
    padding: 40px 44px;
    border: 1px solid #e1e6eb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(15, 23, 40, .035);
}

.volo-detail-content h2 {
    margin: 0 0 16px;
    color: #172033;
    font-size: 27px;
    font-weight: 850;
    line-height: 1.22;
}

.volo-detail-content p {
    margin: 0 0 14px;
    color: #667286;
    font-size: 14px;
    line-height: 1.78;
}

.volo-detail-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.volo-detail-points li {
    position: relative;
    padding: 13px 14px 13px 40px;
    border-radius: 13px;
    background: #f5f7f9;
    color: #465269;
    font-size: 12px;
    font-weight: 750;
}

.volo-detail-points li::before {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d5d600;
    content: "";
}

/* Responsive public home. */
@media (min-width: 1600px) {
    .drc-home-container { max-width: 1640px; }
}

@media (max-width: 1240px) {
    .drc-home-hero-card { padding: 52px 48px; }
    .drc-home-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr); gap: 48px; }
    .drc-home-about-grid { grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); gap: 48px; }
    .drc-home-approach-card { gap: 34px; padding: 44px; }
    .drc-home-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drc-home-area-card,
    .drc-home-area-card img { min-height: 390px; }
    .drc-home-audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .drc-home-audience-grid::before { display: none; }
    .drc-home-cta-card { grid-template-columns: minmax(300px, .8fr) minmax(480px, 1.2fr); padding: 48px; }
}

@media (max-width: 1040px) {
    .drc-home-menu-toggle { display: inline-flex; }
    .drc-home-navigation {
        position: absolute;
        top: calc(100% + 1px);
        right: 24px;
        left: 24px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 18px;
        background: rgba(8, 18, 34, .99);
        box-shadow: 0 26px 68px rgba(0, 0, 0, .30);
    }
    .drc-home-navigation.is-open { display: flex; }
    .drc-home-nav,
    .drc-home-header-actions { align-items: stretch; flex-direction: column; gap: 7px; }
    .drc-home-nav-trigger { width: 100%; justify-content: space-between; padding: 0 12px; }
    .drc-home-submenu,
    .drc-home-submenu-wide {
        position: static;
        display: none;
        visibility: visible;
        width: 100%;
        max-height: none;
        margin: 5px 0 8px;
        padding: 8px;
        border-radius: 14px;
        opacity: 1;
        background: rgba(255, 255, 255, .035);
        box-shadow: none;
        transform: none;
    }
    .drc-home-nav-item:hover > .drc-home-submenu,
    .drc-home-nav-item:focus-within > .drc-home-submenu { display: none; }
    .drc-home-nav-item.is-open > .drc-home-submenu { display: grid; }
    .drc-home-header-actions .drc-home-button { width: 100%; }
    .drc-home-hero-grid,
    .drc-home-about-grid,
    .drc-home-approach-card,
    .drc-home-cta-card,
    .volo-detail-hero,
    .volo-detail-content { grid-template-columns: 1fr; }
    .drc-home-hero-card { padding: 48px; }
    .drc-home-hero-copy { max-width: 760px; }
    .drc-home-hero-visual { width: 100%; max-width: 720px; min-height: 460px; margin: 0 auto; }
    .drc-home-about-panel { width: 100%; max-width: 720px; margin: 0 auto; }
    .drc-home-approach-heading { max-width: 780px; }
    .drc-home-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drc-home-stats-grid,
    .drc-home-credentials-grid { grid-template-columns: 1fr; }
    .drc-home-credential-card { display: grid; grid-template-columns: 330px 1fr; }
    .drc-home-credential-image { height: 100%; min-height: 240px; }
    .drc-home-cta-card { min-height: 0; }
    .drc-home-journey { width: 100%; max-width: 720px; margin: 0 auto; }
    .volo-detail-visual { height: 360px; }
}

@media (max-width: 760px) {
    .drc-home-container { width: calc(100% - 30px); }
    .drc-home-header-inner { min-height: 72px; }
    .drc-home-brand-mark img { max-width: 124px; max-height: 34px; }
    .drc-home-navigation { right: 15px; left: 15px; }
    .drc-home-submenu a,
    .drc-home-submenu-link { grid-template-columns: 36px minmax(0, 1fr); }
    .drc-home-submenu-link em { display: none; }
    .drc-home-hero { padding-top: 90px; }
    .drc-home-hero-card { min-height: 0; padding: 38px 28px; border-radius: 22px; }
    .drc-home-hero-grid { min-height: 0; gap: 42px; }
    .drc-home-hero h1 { font-size: 42px; }
    .drc-home-hero-copy > p { font-size: 14px; }
    .drc-home-hero-actions { align-items: stretch; flex-direction: column; }
    .drc-home-hero-actions > a { width: 100%; }
    .drc-home-hero-visual { min-height: 390px; }
    .drc-home-hero-visual-label { top: 16px; left: 14px; max-width: calc(100% - 28px); }
    .drc-home-hero-progress-card { right: 14px; bottom: 14px; width: calc(100% - 28px); }
    .drc-home-section-card,
    .drc-home-audience-card-wrap,
    .drc-home-stats-card-wrap { padding: 30px 24px; border-radius: 20px; }
    .drc-home-section-heading-split { grid-template-columns: 1fr; gap: 16px; }
    .drc-home-section-heading h2,
    .drc-home-about h2,
    .drc-home-approach h2,
    .drc-home-audience h2,
    .drc-home-stats h2,
    .drc-home-cta h2 { font-size: 34px; }
    .drc-home-about-panel { min-height: 0; padding: 24px; }
    .drc-home-about-panel-head { align-items: flex-start; flex-direction: column; }
    .drc-home-about-route { grid-template-columns: 1fr; }
    .drc-home-about-route > i { transform: rotate(90deg); }
    .drc-home-approach-card { padding: 32px 24px; border-radius: 20px; }
    .drc-home-approach-grid,
    .drc-home-areas-grid,
    .drc-home-audience-grid { grid-template-columns: 1fr; }
    .drc-home-area-card,
    .drc-home-area-card img { min-height: 380px; }
    .drc-home-area-copy { transform: translateY(0); }
    .drc-home-area-copy p { visibility: visible; max-height: 90px; opacity: 1; }
    .drc-home-stats-heading { align-items: flex-start; flex-direction: column; }
    .drc-home-credential-card { display: block; }
    .drc-home-credential-image { height: 230px; min-height: 0; }
    .drc-home-cta-card { padding: 34px 24px; border-radius: 20px; }
    .drc-home-journey { display: grid; min-height: 0; grid-template-columns: 1fr; gap: 12px; }
    .drc-home-journey-line { display: none; }
    .drc-home-journey-step { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: grid; width: 100%; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background: rgba(255, 255, 255, .04); text-align: left; transform: none; }
    .drc-home-journey-icon { position: relative; top: auto; left: auto; grid-row: 1 / 3; width: 50px; height: 50px; font-size: 16px; transform: none; }
    .drc-home-journey-node { display: none; }
    .drc-home-journey-copy { position: static; width: auto; transform: none; }
    .drc-home-journey-copy strong { margin: 0; }
    .drc-home-journey-copy small { margin-top: 3px; }
    .drc-home-footer-main { grid-template-columns: 1fr; gap: 30px; }
    .drc-home-footer-social-contact { justify-self: start; }
    .drc-home-footer-signature-inner { min-height: 0; align-items: flex-start; flex-direction: column; gap: 18px; padding-top: 28px; padding-bottom: 30px; }
    .drc-home-footer-signature-copy { text-align: left; }
    .volo-detail-page { width: calc(100% - 30px); padding: 34px 0 64px; }
    .volo-detail-hero { gap: 28px; padding: 28px; border-radius: 22px; }
    .volo-detail-copy h1 { font-size: 34px; }
    .volo-detail-visual { height: 300px; }
    .volo-detail-content { gap: 28px; padding: 28px; }
}

@media (max-width: 480px) {
    .drc-home-brand-copy { display: none; }
    .drc-home-hero h1 { font-size: 36px; }
    .drc-home-hero-card { padding: 32px 22px; }
    .drc-home-hero-visual { min-height: 350px; }
    .drc-home-hero-progress-head { align-items: flex-start; flex-direction: column; gap: 4px; }
    .drc-home-section-card,
    .drc-home-audience-card-wrap,
    .drc-home-stats-card-wrap { padding: 26px 20px; }
    .drc-home-section-heading h2,
    .drc-home-about h2,
    .drc-home-approach h2,
    .drc-home-audience h2,
    .drc-home-stats h2,
    .drc-home-cta h2 { font-size: 30px; }
    .drc-home-approach-grid article { min-height: 0; }
    .drc-home-area-card,
    .drc-home-area-card img { min-height: 355px; }
    .drc-home-stat-chart { opacity: .55; }
    .drc-home-footer-signature-brand { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .drc-public-landing *,
    .drc-public-landing *::before,
    .drc-public-landing *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}



/* -------------------------------------------------------------------------
 * Public homepage revision V2: readability, alignment and certification page.
 * ---------------------------------------------------------------------- */
.drc-home-stats .drc-home-kicker-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid #e3e5a7;
    border-radius: 999px;
    background: #fffef1;
    color: #565c00;
    letter-spacing: .12em;
}

.drc-home-stats .drc-home-kicker-light::before {
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #d7d800;
    content: "";
}

.volo-detail-page-sertifikasyonlar .volo-detail-hero {
    grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr);
}

.volo-cert-hero-benefits {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.volo-cert-hero-benefits span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.volo-cert-hero-benefits i {
    color: var(--volo-detail-accent);
    font-size: 22px;
}

.volo-cert-hero-benefits b {
    color: rgba(255, 255, 255, .88);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}


.volo-cert-content {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr);
    gap: 34px 48px;
}

.volo-cert-content-copy h2::after {
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 14px;
    border-radius: 999px;
    background: #d7d800;
    content: "";
}

.volo-cert-detail-list {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.volo-cert-detail-list li {
    display: grid;
    min-height: 82px;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid #edf0f4;
    border-radius: 16px;
    background: linear-gradient(135deg, #fafbfc, #f4f6f9);
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
}

.volo-cert-detail-list li > span {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffff35, #f0d700);
    color: #10182b;
    font-size: 19px;
}

.volo-cert-detail-list strong {
    display: block;
    color: #172033;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.volo-cert-detail-list p {
    margin: 4px 0 0;
    color: #687388;
    font-size: 11px;
    line-height: 1.5;
}

.volo-cert-assurance {
    display: grid;
    align-items: center;
    grid-column: 1 / -1;
    padding: 17px 20px;
    border: 1px solid #edf0f4;
    border-radius: 16px;
    background: linear-gradient(135deg, #fafbfc, #f3f5f8);
    grid-template-columns: 48px auto minmax(0, 1fr);
    gap: 16px;
}

.volo-cert-assurance > span {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--volo-detail-accent);
    color: #10182b;
    font-size: 18px;
}

.volo-cert-assurance strong {
    padding-right: 18px;
    border-right: 1px solid #dce1e7;
    color: #172033;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.volo-cert-assurance p {
    margin: 0;
    color: #687388;
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 1040px) {
    .volo-cert-content { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .volo-cert-assurance { grid-template-columns: 44px minmax(0, 1fr); }
    .volo-cert-assurance strong { padding-right: 0; border-right: 0; white-space: normal; }
    .volo-cert-assurance p { grid-column: 1 / -1; }
}


/* ========================================================================
   DRC Tema 01 - authenticated application shell
   ======================================================================== */
:root {
    --drc-navy: #07111d;
    --drc-navy-2: #0b1725;
    --drc-navy-3: #151c27;
    --drc-yellow: #ffe000;
    --drc-menu-yellow: #fefe0c;
    --drc-yellow-2: #f2c900;
    --drc-text: #101824;
    --drc-muted: #6d7480;
    --drc-line: #e5e8ed;
    --drc-bg: #f7f8fa;
    --drc-card: #ffffff;
    --drc-positive: #1a9b55;
    --drc-sidebar-width: 230px;
    --drc-topbar-height: 62px;
}

body.drc-app-body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--drc-bg);
    color: var(--drc-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.drc-app-body .container,
body.drc-app-body .container-fluid {
    max-width: none;
}

.drc-app-shell,
.drc-app-shell * {
    box-sizing: border-box;
}

.drc-app-shell a {
    text-decoration: none;
}

.drc-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    width: var(--drc-sidebar-width);
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background: #0F131C;
    border-right: 1px solid rgba(255,255,255,.05);
}

.drc-sidebar::after {
    position: absolute;
    right: -80px;
    bottom: -60px;
    width: 280px;
    height: 300px;
    border: 1px solid rgba(254,254,12,.12);
    border-radius: 50%;
    content: "";
    transform: rotate(-28deg);
    pointer-events: none;
}

.drc-sidebar-brand {
    display: flex;
    min-height: 102px;
    align-items: center;
    padding: 22px 21px 16px;
}

.drc-brand-link,
.drc-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
}

.drc-brand-logo {
    display: block;
    max-width: 142px;
    max-height: 58px;
    object-fit: contain;
}

.drc-brand-symbol {
    position: relative;
    display: inline-flex;
    width: 30px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    transform: skewY(-10deg);
}

.drc-brand-symbol i {
    display: block;
    height: 7px;
    border-radius: 1px 7px 7px 1px;
    background: var(--drc-menu-yellow);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%);
}

.drc-brand-symbol i:nth-child(1) { width: 30px; }
.drc-brand-symbol i:nth-child(2) { width: 24px; margin-left: 5px; }
.drc-brand-symbol i:nth-child(3) { width: 18px; margin-left: 10px; }

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

.drc-brand-copy strong {
    color: #fff;
    font-size: 25px;
    font-weight: 780;
    letter-spacing: .12em;
}

.drc-brand-copy small {
    align-self: flex-end;
    margin-top: 5px;
    color: #fff;
    font-size: 10px;
    letter-spacing: .02em;
}

.drc-sidebar-nav {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    padding: 5px 8px 14px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drc-sidebar-management-section {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 11px 13px 5px 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.11);
    color: rgba(255,255,255,.40);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
}

.drc-sidebar-management-section::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--drc-menu-yellow);
    content: "";
    box-shadow: 0 0 10px rgba(254,254,12,.22);
}

.drc-sidebar-link-management .drc-sidebar-icon {
    color: rgba(254,254,12,.84);
}

.drc-sidebar-link-admin {
    color: var(--drc-menu-yellow) !important;
}

.drc-sidebar-link {
    position: relative;
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 20px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 25px;
    color: rgba(255,255,255,.84) !important;
    font-size: 12px;
    font-weight: 600;
    transition: .18s ease;
    isolation: isolate;
}

.drc-sidebar-link::before,
.drc-sidebar-link::after {
    position: absolute;
    content: "";
    pointer-events: none;
    opacity: 0;
}

.drc-sidebar-link:hover,
.drc-sidebar-link:focus {
    color: #fff !important;
    background: rgba(255,255,255,.06);
}

.drc-sidebar-link.is-active {
    color: var(--drc-menu-yellow) !important;
    border-color: transparent;
    padding-left: 20px;
    background: transparent;
}

/* Referans: solda yaklaşık 7px ince sarı alan; koyu kapsül sarının üstüne biner. */
.drc-sidebar-link.is-active::before {
    display: block;
    top: -1px;
    bottom: -1px;
    left: -4px;
    width: 22px;
    border-radius: 12px;
    background: var(--drc-menu-yellow);
    opacity: 1;
    z-index: 0;
}

/* Sol köşe özellikle küçük yarıçaplı: sarı alan geniş bir hilale dönüşmez. */
.drc-sidebar-link.is-active::after {
    display: block;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: 7px;
    border: 1px solid rgba(254,254,12,.23);
    border-radius: 4px 25px 25px 4px;
    background: linear-gradient(90deg, rgba(254,254,12,.15), rgba(254,254,12,.03)), #171b18;
    opacity: 1;
    z-index: 1;
}

.drc-sidebar-link > span {
    position: relative;
    z-index: 2;
}

.drc-sidebar-icon {
    display: inline-flex;
    width: 22px;
    justify-content: center;
    font-size: 17px;
}

.drc-sidebar-quote {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 26px 23px 18px;
}

.drc-sidebar-quote p {
    margin: 0 0 16px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
}

.drc-sidebar-quote span {
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--drc-menu-yellow), transparent);
}

.drc-sidebar-runway {
    position: relative;
    z-index: 1;
    height: 220px;
    background:
        linear-gradient(90deg, transparent 49%, rgba(254,254,12,.95) 49.5%, rgba(254,254,12,.95) 50.5%, transparent 51%) center / 100% 38px repeat-y,
        linear-gradient(180deg, transparent, rgba(254,254,12,.12));
    opacity: .48;
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
}

.drc-app-stage {
    min-height: 100vh;
    margin-left: var(--drc-sidebar-width);
    background: var(--drc-bg);
}

.drc-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    min-height: var(--drc-topbar-height);
    align-items: center;
    gap: 14px;
    padding: 9px 20px 9px 30px;
    border-bottom: 1px solid #edf0f3;
    background: rgba(255,255,255,.97);
    box-shadow: 0 2px 12px rgba(8,17,29,.025);
}

.drc-mobile-menu {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    color: #182231;
    background: #f1f3f6;
}

.drc-topbar-search {
    position: relative;
    display: flex;
    width: min(390px, 42vw);
    height: 39px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 11px;
    background: #f3f5f8;
}

.drc-topbar-search i {
    color: #243148;
    font-size: 14px;
}

.drc-topbar-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #263246;
    background: transparent;
    font-size: 12px;
}

.drc-topbar-search input::placeholder { color: #7d8390; }

.drc-topbar-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.drc-topbar-plugin-output,
.drc-topbar-user-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.drc-topbar-plugin-output > li,
.drc-topbar-user-menu > li {
    list-style: none;
}

.drc-topbar .nav-link,
.drc-topbar .dropdown-toggle {
    color: #101824 !important;
}

.drc-topbar .userpicture {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.drc-page-content {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 26px 30px 50px;
}

.drc-page-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.drc-page-heading-row h1 {
    margin: 4px 0 0;
    color: #111a27;
    font-size: 25px;
    font-weight: 760;
}

.drc-page-heading-row .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 11px;
}

.drc-core-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.drc-core-layout.has-blocks {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
}

.drc-core-main,
.drc-core-blocks .card {
    border: 1px solid var(--drc-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(8,17,29,.035);
}

.drc-core-main {
    min-width: 0;
    padding: 24px;
}

.drc-core-blocks .card {
    overflow: hidden;
}

.drc-core-blocks .card-block,
.drc-core-blocks .card-body {
    background: #fff;
}

/* ========================================================================
   Approved dashboard composition
   ======================================================================== */
.drc-dashboard {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 18px 24px 42px 28px;
}

.drc-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    gap: 18px;
    align-items: start;
}

.drc-dashboard-maincol,
.drc-dashboard-sidecol {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 17px;
}

.drc-hero {
    position: relative;
    min-height: 224px;
    overflow: hidden;
    border-radius: 13px;
    background-color: #e9edf0;
    background-position: center;
    background-size: cover;
    box-shadow: 0 5px 20px rgba(15,25,40,.08);
}

.drc-hero-slides,
.drc-hero-slide {
    position: absolute;
    inset: 0;
}

.drc-hero-slide {
    opacity: 0;
    background-position: center;
    background-size: cover;
    transition: opacity .75s ease;
}

.drc-hero-slide.is-active {
    opacity: 1;
}

.drc-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 590px;
    padding: 34px 55px;
}

.drc-hero h1 {
    margin: 0 0 8px;
    color: #090d13;
    font-size: clamp(27px, 2.15vw, 38px);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.drc-hero p {
    margin: 0 0 22px;
    color: #26303b;
    font-size: 15px;
    font-weight: 520;
}

.drc-hero-how {
    display: inline-flex;
    border: 0;
    cursor: pointer;
    min-height: 39px;
    align-items: center;
    gap: 10px;
    padding: 4px 16px 4px 5px;
    border-radius: 999px;
    color: #131820 !important;
    background: rgba(255,255,255,.82);
    box-shadow: 0 4px 14px rgba(16,24,36,.10);
    font-size: 12px;
    font-weight: 750;
}

.drc-hero-how > span {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--drc-yellow);
    box-shadow: 0 3px 8px rgba(209,176,0,.28);
}

.drc-hero-how small {
    margin-left: 4px;
    color: #202733;
    font-weight: 600;
}

.drc-hero-dots {
    position: absolute;
    right: 28px;
    bottom: 16px;
    display: flex;
    gap: 9px;
}

.drc-hero-dots button {
    display: block;
    width: 25px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.drc-hero-dots button:hover,
.drc-hero-dots button:focus {
    outline: none;
    transform: scaleX(1.08);
}

.drc-hero-dots button.is-active { background: var(--drc-yellow); }

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

.drc-metric-card {
    position: relative;
    display: grid;
    min-height: 98px;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(8,17,29,.025);
}

.drc-metric-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 27px;
}

.drc-metric-icon.is-gold { color: #f1b900; background: #fff8e8; }
.drc-metric-icon.is-blue { color: #111e37; background: #f0f3fa; }

.drc-metric-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.drc-metric-card strong {
    color: #0f1721;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.15;
}

.drc-metric-card span:not(.drc-metric-icon) {
    margin-top: 4px;
    color: #5d6570;
    font-size: 10px;
    font-weight: 620;
}

.drc-metric-card > small {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 9px;
    font-weight: 760;
}

.drc-metric-card > small.drc-positive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--drc-positive);
    line-height: 1;
    white-space: nowrap;
}

.drc-metric-card > small.drc-positive i {
    font-size: 8px;
    line-height: 1;
}

.drc-positive { color: var(--drc-positive); }

.drc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.drc-section-head h2,
.drc-dark-card h2,
.drc-badges-head h2 {
    margin: 0;
    color: #131b26;
    font-size: 15px;
    font-weight: 800;
}

.drc-section-head a,
.drc-badges-head a {
    color: #4b5260 !important;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.drc-learning-row {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(250px, .95fr);
    gap: 18px;
    align-items: start;
}

.drc-course-grid {
    display: grid;
    gap: 11px;
}

.drc-course-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drc-course-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.drc-course-card {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    color: #141a22 !important;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.drc-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(8,17,29,.08);
}

.drc-course-image {
    position: relative;
    display: block;
    height: 91px;
    background-position: center;
    background-size: cover;
}

.drc-course-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,11,19,.04), rgba(5,11,19,.22));
    content: "";
}

.drc-course-image > i {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    color: #fff;
    background: rgba(12,19,29,.38);
    transform: translate(-50%, -50%);
}

.drc-course-progress {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    margin: 8px 10px 3px;
}

.drc-course-progress-track {
    display: block;
    height: 5px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 99px;
    background: #eceef0;
}

.drc-course-progress-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--drc-yellow);
}

.drc-course-progress > b {
    display: block;
    flex: 0 0 auto;
    color: #2c3138;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.drc-course-card > strong {
    min-height: 36px;
    padding: 5px 11px 1px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.35;
}

.drc-course-card > small {
    padding: 0 11px 10px;
    overflow: hidden;
    color: #69707b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drc-course-card.is-new .drc-course-image { height: 117px; }
.drc-course-card.is-new > strong { min-height: 39px; padding-top: 9px; }

.drc-recommended-card,
.drc-recommended-empty {
    position: relative;
    display: flex;
    min-height: 156px;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
    padding: 17px 19px;
    border-radius: 11px;
}

.drc-recommended-card {
    color: #0d1219 !important;
    background-position: center right;
    background-size: cover;
}

.drc-recommended-badge {
    position: absolute;
    top: 11px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    font-size: 8px;
    font-weight: 750;
}

.drc-recommended-card > strong {
    width: 68%;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.05;
}

.drc-recommended-card > small {
    margin-top: 8px;
    font-size: 9px;
    font-weight: 700;
}

.drc-round-arrow {
    position: absolute;
    right: 13px;
    bottom: 13px;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #0b1725;
}

.drc-recommended-empty {
    justify-content: center;
    gap: 7px;
    border: 1px dashed #d5d9df;
    color: #67707d;
    background: #f4f6f8;
}

.drc-recommended-empty > i { color: #d7ac00; font-size: 22px; }
.drc-recommended-empty strong { color: #303947; font-size: 11px; }
.drc-recommended-empty span { font-size: 9px; line-height: 1.4; }

.drc-dark-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #171c24, #0f141c);
    box-shadow: 0 5px 19px rgba(5,11,19,.16);
}

.drc-card-title-row,
.drc-badges-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.drc-card-title-row h2 { color: #fff; }
.drc-card-title-row > i { color: var(--drc-yellow); font-size: 18px; }

.drc-journey-plane {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: url([[pix:theme|journey_airplane]]) center/contain no-repeat;
    filter: drop-shadow(0 1px 3px rgba(254, 254, 12, .12));
    transform: translateY(-1px);
}

.drc-journey-card { min-height: 166px; padding: 18px 20px 16px; }
.drc-rank-row { display: flex; align-items: center; gap: 18px; margin-top: 12px; }

.drc-rank-ring {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, var(--drc-yellow) 0 var(--drc-progress), rgba(255,255,255,.10) var(--drc-progress) 100%),
        radial-gradient(circle at 50% 50%, rgba(254,254,12,.10), transparent 64%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18);
}

.drc-rank-ring::before {
    grid-area: 1/1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #151b23;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    content: "";
}

.drc-rank-ring::after {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(254,254,12,.12);
    content: "";
}

.drc-rank-ring span {
    z-index: 1;
    grid-area: 1/1;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
}

.drc-rank-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.drc-rank-copy strong { font-size: 13px; font-weight: 760; }
.drc-rank-copy span { margin-top: 5px; color: #cfd4da; font-size: 10px; line-height: 1.45; }

.drc-rank-track {
    width: 100%;
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
}

.drc-rank-track i { display: block; height: 100%; border-radius: inherit; background: var(--drc-yellow); box-shadow: 0 0 14px rgba(254,254,12,.18); }

.drc-journey-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.drc-journey-footer > span { color: #838b96; font-size: 8px; }
.drc-journey-footer a { color: #e7e8ea !important; font-size: 9px; font-weight: 650; }
.drc-anchor { position: absolute; top: -70px; }

.drc-goals-card { min-height: 244px; padding: 17px 20px 15px; }

.drc-goal-row {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 4px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.drc-goal-row:first-of-type { margin-top: 8px; }
.drc-goal-row > div { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 4px; }
.drc-goal-row strong { color: #f1f3f4; font-size: 10.5px; font-weight: 760; line-height: 1.25; }
.drc-goal-row > div > span { color: #f3d900; font-size: 9.5px; font-weight: 760; line-height: 1.2; }

.drc-goal-ring {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, var(--drc-yellow) 0 var(--drc-progress), rgba(255,255,255,.11) var(--drc-progress) 100%),
        radial-gradient(circle at 50% 50%, rgba(254,254,12,.07), transparent 68%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.16);
}

.drc-goal-ring::after {
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(254,254,12,.09);
    border-radius: 50%;
    content: "";
}

.drc-goal-ring i {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #151b23;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.drc-yellow-card {
    position: relative;
    min-height: 342px;
    overflow: hidden;
    padding: 21px 21px 16px;
    border-radius: 13px;
    color: #0b1118;
    background: linear-gradient(150deg, #ffe713, #ffd800 64%, #ffc800);
    box-shadow: 0 6px 20px rgba(188,151,0,.17);
}

.drc-yellow-card::after {
    position: absolute;
    right: -52px;
    top: 52px;
    width: 170px;
    height: 170px;
    border: 1px dashed rgba(15,21,28,.24);
    border-radius: 50%;
    content: "";
}

.drc-route-copy { position: relative; z-index: 2; min-height: 143px; }
.drc-route-copy strong { display: block; font-size: 20px; font-weight: 900; }
.drc-route-copy span { display: block; margin-top: 2px; font-size: 11px; font-weight: 650; line-height: 1.35; }
.drc-route-copy > i { position: absolute; right: 17px; top: 4px; font-size: 54px; transform: rotate(-15deg); }

.drc-badges-head { position: relative; z-index: 2; margin-bottom: 12px; }
.drc-badges-head h2 { font-size: 12px; }
.drc-badges-head a { color: #2e2a16 !important; font-size: 8px; }

.drc-badge-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 7px;
}

.drc-badge-item {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    color: #15130a !important;
    text-align: center;
}

.drc-badge-item > span {
    position: relative;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
}

.drc-badge-item img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.drc-badge-item.is-locked img { filter: grayscale(1) brightness(1.4); opacity: .56; }
.drc-badge-item > span > i { position: absolute; inset: 50% auto auto 50%; color: #5d6267; transform: translate(-50%, -50%); }
.drc-badge-item small { max-width: 74px; overflow: hidden; font-size: 8px; font-weight: 730; line-height: 1.2; text-overflow: ellipsis; }

.drc-empty-card {
    display: flex;
    min-height: 145px;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px dashed #d7dbe0;
    border-radius: 11px;
    color: #7b828d;
    background: #fafbfc;
    font-size: 11px;
}

.drc-dashboard-core-content { display: none !important; }

.drc-admin-editing-region {
    margin-top: 24px;
    padding: 20px;
    border: 2px dashed #d7b800;
    border-radius: 12px;
    background: #fffdf0;
}

.drc-admin-editing-region > h2 { font-size: 16px; font-weight: 800; }

/* Login page: migrated from the previous VOLO theme and adapted to drc_tema01. */
body.drc-login-body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: #0f172a;
}

.drc-login-shell {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background-color: #0f172a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.drc-login-card {
    width: min(420px, 100%);
    padding: 54px 40px 38px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    color: #fff;
    background: rgba(30,41,59,.80);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.70);
    text-align: center;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    animation: drcLoginCardZoomIn .5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes drcLoginCardZoomIn {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}

.drc-login-brand {
    display: inline-flex;
    min-height: 70px;
    align-items: center;
    justify-content: center;
    margin-bottom: 34px;
}

.drc-login-brand img {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(254,254,12,.15));
}

.drc-login-brand > strong {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 27px;
    letter-spacing: .12em;
}

.drc-login-brand > strong small {
    align-self: flex-end;
    color: #fff;
    font-size: 10px;
    letter-spacing: normal;
}

.drc-login-content,
.drc-login-content > div,
.drc-login-content .loginform {
    width: 100%;
}

/* Remove Boost's inner white card so the previous VOLO glass card is the only container. */
.drc-login-card .card,
.drc-login-card .card-body,
.drc-login-card .login-container,
.drc-login-card .loginform {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.drc-login-card .card,
.drc-login-card .card-body {
    padding: 0 !important;
}

.drc-login-card h1,
.drc-login-card h2,
.drc-login-card h3,
.drc-login-card h4,
.drc-login-card label,
.drc-login-card .form-control-label,
.drc-login-card .rememberpass {
    color: #fff;
}

.drc-login-card .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.drc-login-card .form-control,
.drc-login-card input[type="text"],
.drc-login-card input[type="password"] {
    width: 100%;
    height: 54px !important;
    padding: 10px 20px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: rgba(15,23,42,.65) !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.drc-login-card .form-control::placeholder,
.drc-login-card input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.drc-login-card .form-control:focus,
.drc-login-card input[type="text"]:focus,
.drc-login-card input[type="password"]:focus {
    border-color: #FEFE0C !important;
    background: rgba(15,23,42,.92) !important;
    box-shadow: 0 0 0 4px rgba(254,254,12,.10) !important;
}

.drc-login-card .btn-primary,
.drc-login-card #loginbtn {
    width: 100%;
    min-height: 54px;
    margin-top: 10px;
    border: 1px solid #FEFE0C !important;
    border-radius: 14px !important;
    color: #0F131C !important;
    background: #FEFE0C !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.drc-login-card .btn-primary:hover,
.drc-login-card .btn-primary:focus,
.drc-login-card #loginbtn:hover,
.drc-login-card #loginbtn:focus {
    border-color: #FEFE0C !important;
    color: #0F131C !important;
    background: #FEFE0C !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -5px rgba(254,254,12,.25) !important;
}

.drc-login-card .btn-secondary,
.drc-login-card .btn-default {
    border-color: rgba(255,255,255,.16) !important;
    color: #fff !important;
    background: rgba(15,23,42,.72) !important;
}

.drc-login-card a {
    color: #b6c0ce;
    text-decoration: none;
    transition: color .2s ease;
}

.drc-login-card a:hover,
.drc-login-card a:focus {
    color: #FEFE0C;
}

.drc-login-card .alert {
    text-align: left;
}

.drc-login-card input[type="checkbox"] {
    accent-color: #FEFE0C;
}

.drc-login-support {
    display: inline-block;
    margin-top: 20px;
    color: #94a3b8 !important;
    font-size: 13px;
    opacity: .75;
}

.drc-login-tagline {
    margin-top: 28px;
    color: #64748b;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@media (max-width: 520px) {
    .drc-login-shell { padding: 18px; }
    .drc-login-card { padding: 40px 22px 30px; border-radius: 22px; }
    .drc-login-brand { margin-bottom: 26px; }
    .drc-login-brand img { max-width: 200px; max-height: 72px; }
}

.drc-embedded-main,
.drc-maintenance-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px;
}

/* SCORM popup: expand only the horizontal player area.
   Important: do not force percentage heights here. The SCORM module calculates
   the player height at runtime; overriding it with height:100% can collapse the
   iframe when an ancestor has an automatic height. */
body#page-mod-scorm-player.drc-embedded-body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body#page-mod-scorm-player.drc-embedded-body .drc-embedded-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body#page-mod-scorm-player.drc-embedded-body #scormpage,
body#page-mod-scorm-player.drc-embedded-body #scorm_layout {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body#page-mod-scorm-player.drc-embedded-body #scorm_content {
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Hidden/disabled TOC uses the full-width YUI grid class. */
body#page-mod-scorm-player.drc-embedded-body #scorm_content.yui3-u-1 {
    width: 100% !important;
}

body#page-mod-scorm-player.drc-embedded-body #scorm_object {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
}

@media (max-width: 1320px) {
    .drc-dashboard-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .drc-dashboard { padding-right: 18px; padding-left: 18px; }
    .drc-hero-copy { padding-left: 38px; }
    .drc-metric-card { grid-template-columns: 43px minmax(0, 1fr); padding: 11px; }
    .drc-metric-icon { width: 42px; height: 42px; font-size: 19px; }
    .drc-metric-card strong { font-size: 17px; }
}

@media (max-width: 1120px) {
    .drc-dashboard-layout { grid-template-columns: 1fr; }
    .drc-dashboard-sidecol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .drc-yellow-card { min-height: 260px; }
    .drc-route-copy { min-height: 105px; }
    .drc-core-layout.has-blocks { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
    .drc-sidebar {
        width: min(280px, 82vw);
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 12px 0 40px rgba(4,10,18,.28);
    }
    body.drc-sidebar-open .drc-sidebar { transform: translateX(0); }
    body.drc-sidebar-open::after {
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(4,10,18,.43);
        content: "";
    }
    .drc-app-stage { margin-left: 0; }
    .drc-mobile-menu { display: inline-flex; align-items: center; justify-content: center; }
    .drc-topbar { padding-left: 14px; }
    .drc-dashboard-sidecol { grid-template-columns: 1fr 1fr; }
    .drc-yellow-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .drc-topbar-search { width: min(290px, 48vw); }
    .drc-topbar-user-menu .username { display: none; }
    .drc-dashboard { padding: 13px; }
    .drc-hero { min-height: 245px; }
    .drc-hero-copy { padding: 28px 24px; }
    .drc-hero h1 { font-size: 29px; }
    .drc-metrics { grid-template-columns: 1fr 1fr; }
    .drc-learning-row { grid-template-columns: 1fr; }
    .drc-course-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drc-course-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drc-dashboard-sidecol { display: flex; }
    .drc-page-content { padding: 18px 14px 38px; }
    .drc-core-main { padding: 16px; }
}

@media (max-width: 520px) {
    .drc-topbar { gap: 8px; padding-right: 9px; }
    .drc-topbar-search { min-width: 0; flex: 1; width: auto; }
    .drc-topbar-plugin-output { display: none; }
    .drc-metrics { grid-template-columns: 1fr; }
    .drc-course-grid-3,
    .drc-course-grid-4 { grid-template-columns: 1fr; }
    .drc-course-image,
    .drc-course-card.is-new .drc-course-image { height: 145px; }
    .drc-hero { min-height: 300px; background-position: 65% center; }
    .drc-hero-copy { padding: 26px 20px; }
    .drc-hero h1 { font-size: 26px; }
    .drc-badge-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .drc-app-shell *,
    .drc-app-shell *::before,
    .drc-app-shell *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Public core pages other than the dedicated landing page. */
body.drc-public-core-body { margin: 0; background: #f6f7f9; color: #111827; }
.drc-public-core-header {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px max(24px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid #e6e9ed;
    background: #fff;
}
.drc-public-core-brand { display: inline-flex; align-items: center; gap: 10px; color: #0b1421 !important; }
.drc-public-core-brand img { max-width: 190px; max-height: 48px; object-fit: contain; }
.drc-public-core-brand strong { font-size: 19px; font-weight: 850; }
.drc-public-core-login { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #111827 !important; background: #ffe000; font-size: 12px; font-weight: 800; }
.drc-public-core-main { max-width: 1180px; margin: 0 auto; padding: 35px 24px 70px; }

.drc-ranking-page { max-width: 920px; }
.drc-ranking-intro { margin-bottom: 18px; }
.drc-ranking-intro > span { color: #b99600; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.drc-ranking-intro h2 { margin: 5px 0 7px; color: #111827; font-size: 24px; font-weight: 850; }
.drc-ranking-intro p { color: #6b7280; font-size: 12px; line-height: 1.55; }
.drc-ranking-list { overflow: hidden; border: 1px solid #e4e7eb; border-radius: 12px; }
.drc-ranking-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px; border-bottom: 1px solid #edf0f2; background: #fff; }
.drc-ranking-row:last-child { border-bottom: 0; }
.drc-ranking-row.is-me { background: #fffbe5; }
.drc-ranking-place { display: inline-flex; width: 31px; height: 31px; align-items: center; justify-content: center; border-radius: 50%; color: #263244; background: #f0f3f6; font-size: 11px; font-weight: 850; }
.drc-ranking-row:nth-child(1) .drc-ranking-place { color: #5f4a00; background: #ffe000; }
.drc-ranking-name { min-width: 0; overflow: hidden; color: #202936; font-size: 12px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.drc-ranking-row > strong { color: #0b1725; font-size: 12px; font-weight: 850; }


/* ========================================================================
   0.1.3 - Moodle 3.6 layout lifecycle hardening
   ======================================================================== */
html {
    min-height: 100%;
}

body.drc-app-body {
    width: 100%;
    min-height: 100vh;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
}

.drc-app-shell {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    height: auto !important;
    max-height: none !important;
}

.drc-app-stage {
    position: relative;
    width: auto;
    min-width: 0;
    min-height: 100vh;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}

.drc-dashboard,
.drc-dashboard-layout,
.drc-dashboard-maincol,
.drc-dashboard-sidecol,
.drc-page-content,
.drc-core-layout,
.drc-core-main {
    min-width: 0;
    height: auto !important;
    max-height: none !important;
}

.drc-dashboard,
.drc-page-content {
    overflow: visible;
}

/* Explicit physical edges are retained for older browsers used with Moodle 3.6. */
.drc-sidebar {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
}

@media (min-width: 921px) {
    .drc-sidebar {
        transform: none !important;
    }
}

/* Login form structure: use the compact form from the previous VOLO theme. */
.drc-login-form-wrap,
.drc-login-form,
.drc-login-field {
    width: 100%;
}

.drc-login-field {
    margin-bottom: 16px;
}

.drc-login-field .form-control {
    display: block;
    box-sizing: border-box;
}

.drc-login-forgot {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin: -5px 0 24px;
    text-align: right;
}

.drc-login-forgot a {
    font-size: 13px;
}

.drc-login-error {
    width: 100%;
    margin-bottom: 18px;
    text-align: left;
}

.drc-login-error .alert,
.drc-login-error .error {
    margin: 0;
    border-radius: 12px;
}

.drc-login-secondary-form,
.drc-login-idps,
.drc-login-signup {
    width: 100%;
    margin-top: 16px;
}

.drc-login-secondary-btn,
.drc-login-idp {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: rgba(15,23,42,.58) !important;
}

.drc-login-idp + .drc-login-idp {
    margin-top: 8px;
}

.drc-login-maintenance {
    margin-top: 18px;
    color: #fff;
    font-size: 13px;
}

/* The core 3.6 login template uses legacy two-column form classes. The custom
   template above intentionally removes them; keep a defensive reset in case a
   cached template is served during the upgrade. */
.drc-login-card .loginbox,
.drc-login-card .loginpanel,
.drc-login-card .loginsub,
.drc-login-card .loginform,
.drc-login-card .form-input,
.drc-login-card .form-label,
.drc-login-card .forgetpass,
.drc-login-card .rememberpass,
.drc-login-card .desc {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================================================
   0.1.12 - Restore the taller VOLO login-card proportions from the old theme
   ======================================================================== */
@media (min-width: 521px) {
    .drc-login-shell {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .drc-login-card {
        box-sizing: border-box;
        min-height: 810px;
        padding: 72px 40px 58px;
    }

    .drc-login-brand {
        min-height: 82px;
        margin-bottom: 64px;
    }

    .drc-login-brand img {
        max-width: 230px;
        max-height: 86px;
    }

    .drc-login-field {
        margin-bottom: 20px;
    }

    .drc-login-forgot {
        margin: -3px 0 28px;
    }

    .drc-login-card .btn-primary,
    .drc-login-card #loginbtn {
        margin-top: 14px;
    }

    .drc-login-support {
        margin-top: 30px;
    }

    .drc-login-tagline {
        margin-top: 40px;
    }
}

@media (min-width: 521px) and (max-height: 850px) {
    .drc-login-card {
        min-height: calc(100vh - 36px);
        padding-top: 54px;
        padding-bottom: 44px;
    }

    .drc-login-brand {
        margin-bottom: 42px;
    }

    .drc-login-support {
        margin-top: 24px;
    }

    .drc-login-tagline {
        margin-top: 30px;
    }
}

/* ========================================================================
   Login confirmation dialog - Moodle 3.6 core $OUTPUT->confirm()
   Keeps the already-logged-in confirmation inside the VOLO glass card.
   ======================================================================== */
.drc-login-card #notice.modal-in-page {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #fff !important;
    background: transparent !important;
    transform: none !important;
}

.drc-login-card #notice.modal-dialog {
    max-width: none !important;
    transform: none !important;
}

.drc-login-card #notice .modal-content {
    width: 100% !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: rgba(15,23,42,.62) !important;
    box-shadow: none !important;
}

.drc-login-card #notice .modal-header {
    display: block !important;
    padding: 18px 20px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
    background: transparent !important;
    text-align: center;
}

.drc-login-card #notice .modal-header h4 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35;
    text-align: center;
}

.drc-login-card #notice .modal-body {
    padding: 22px 22px !important;
    border: 0 !important;
    color: #d7dee8 !important;
    background: transparent !important;
    text-align: center;
}

.drc-login-card #notice .modal-body p {
    margin: 0 !important;
    color: #d7dee8 !important;
    font-size: 13px !important;
    line-height: 1.6;
    text-align: center;
}

.drc-login-card #notice .modal-footer {
    display: block !important;
    padding: 16px 20px 20px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    text-align: center;
}

.drc-login-card #notice .buttons {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.drc-login-card #notice .singlebutton,
.drc-login-card #notice .singlebutton form,
.drc-login-card #notice .buttons form {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.drc-login-card #notice .btn,
.drc-login-card #notice .btn-primary,
.drc-login-card #notice .btn-secondary,
.drc-login-card #notice .btn-default {
    width: auto !important;
    min-width: 108px;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

.drc-login-card #notice .btn-primary {
    border-color: #FEFE0C !important;
    color: #0F131C !important;
    background: #FEFE0C !important;
}

.drc-login-card #notice .btn-secondary,
.drc-login-card #notice .btn-default {
    border-color: rgba(255,255,255,.14) !important;
    color: #fff !important;
    background: rgba(15,23,42,.82) !important;
}

.drc-login-card #notice .btn-secondary:hover,
.drc-login-card #notice .btn-secondary:focus,
.drc-login-card #notice .btn-default:hover,
.drc-login-card #notice .btn-default:focus {
    border-color: rgba(254,254,12,.45) !important;
    color: #FEFE0C !important;
    background: rgba(15,23,42,.96) !important;
}

@media (max-width: 520px) {
    .drc-login-card #notice .modal-body {
        padding: 18px 16px !important;
    }

    .drc-login-card #notice .modal-footer {
        padding: 14px 16px 18px !important;
    }

    .drc-login-card #notice .btn,
    .drc-login-card #notice .btn-primary,
    .drc-login-card #notice .btn-secondary,
    .drc-login-card #notice .btn-default {
        min-width: 100px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Wide data screens: Puan/Rütbe, Öğrenme Yolculuğu and Sıralama share the same stage width. */
#page-theme-drc_tema01-points .drc-page-content,
#page-theme-drc_tema01-ranking .drc-page-content {
    width: 100%;
    max-width: none;
    padding-right: 12px;
    padding-left: 12px;
}

/* ========================================================================
   0.1.22 - Dedicated public detail-page shell
   ======================================================================== */
body.drc-public-core-body.volo-detail-body {
    min-height: 100vh;
    background: #f6f7f9;
}

.drc-public-detail-main {
    width: 100%;
    min-height: calc(100vh - 72px);
    margin: 0;
    padding: 0;
    background: #f6f7f9;
}

.drc-public-detail-main > [role="main"] {
    width: 100%;
}


/* ========================================================================
   0.1.23 - Public detail header matches the public landing-page navigation
   ======================================================================== */
.drc-public-detail-home-header {
    position: relative;
    --home-accent: #ffff0a;
    --home-accent-dark: #d7d700;
    z-index: 50;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 82% -120%, rgba(255, 255, 10, 0.10), transparent 32%),
        rgba(8, 14, 29, 0.98);
    box-shadow: 0 12px 36px rgba(8, 15, 31, 0.12);
}

.drc-public-detail-home-header .drc-home-header-inner {
    position: relative;
}

.drc-public-detail-home-header .drc-home-brand-mark img {
    width: auto;
    max-width: 145px;
    max-height: 38px;
}

.drc-public-detail-home-header .drc-home-navigation {
    z-index: 60;
}

.drc-public-detail-main {
    min-height: calc(100vh - 86px);
}

@media (max-width: 720px) {
    .drc-public-detail-main {
        min-height: calc(100vh - 74px);
    }
}

/* ========================================================================
   0.1.26 - Fuarlar / Etkinlikler revision: readable copy + image sliders
   ======================================================================== */
.volo-detail-slider {
    position: relative;
    background: #0F131C;
    outline: none;
}

.volo-detail-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform .46s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.volo-detail-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #0F131C;
}

.volo-detail-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fuarlar sayfasındaki 4. görsel için özel kadraj düzeltmesi. */
.volo-detail-page-fuarlar .volo-detail-slide:nth-child(4) img {
    object-position: center 18% !important;
}

.volo-detail-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 50%;
    background: rgba(8,18,37,.74);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.volo-detail-slider-arrow:hover,
.volo-detail-slider-arrow:focus {
    border-color: #fefe0c;
    background: rgba(8,18,37,.94);
    color: #fefe0c;
    outline: none;
}

.volo-detail-slider-arrow:active {
    transform: translateY(-50%) scale(.96);
}

.volo-detail-slider-prev {
    left: 16px;
}

.volo-detail-slider-next {
    right: 16px;
}

.volo-detail-slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(8,18,37,.72);
    transform: translateX(-50%);
}

.volo-detail-slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.58);
    cursor: pointer;
    transition: width .2s ease, border-radius .2s ease, background .2s ease;
}

.volo-detail-slider-dot.is-active {
    width: 24px;
    border-radius: 999px;
    background: #fefe0c;
}

.volo-detail-fuarlar-body .volo-detail-copy p,
.volo-detail-etkinlikler-body .volo-detail-copy p {
    max-width: 620px;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 1.72;
}

.volo-detail-fuarlar-body .volo-detail-content h2,
.volo-detail-etkinlikler-body .volo-detail-content h2 {
    font-size: 30px;
    line-height: 1.22;
}

.volo-detail-fuarlar-body .volo-detail-content p,
.volo-detail-etkinlikler-body .volo-detail-content p {
    color: #59667a;
    font-size: 16px;
    line-height: 1.78;
}

.volo-detail-fuarlar-body .volo-detail-points li,
.volo-detail-etkinlikler-body .volo-detail-points li {
    padding-top: 15px;
    padding-bottom: 15px;
    color: #39475d;
    font-size: 14px;
    line-height: 1.42;
}

.volo-detail-fuarlar-body .volo-detail-points li::before,
.volo-detail-etkinlikler-body .volo-detail-points li::before {
    top: 19px;
}

@media (max-width: 720px) {
    .volo-detail-slider-arrow {
        width: 38px;
        height: 38px;
    }

    .volo-detail-slider-prev {
        left: 10px;
    }

    .volo-detail-slider-next {
        right: 10px;
    }

    .volo-detail-slider-dots {
        bottom: 10px;
    }

    .volo-detail-fuarlar-body .volo-detail-copy p,
    .volo-detail-etkinlikler-body .volo-detail-copy p {
        font-size: 16px;
        line-height: 1.68;
    }

    .volo-detail-fuarlar-body .volo-detail-content h2,
    .volo-detail-etkinlikler-body .volo-detail-content h2 {
        font-size: 25px;
    }

    .volo-detail-fuarlar-body .volo-detail-content p,
    .volo-detail-etkinlikler-body .volo-detail-content p {
        font-size: 15px;
    }
}

/* ========================================================================
   0.1.31 - /my dashboard uses the same wide application stage as
   Puan ve Rutbe / Ogrenme Yolculugu.
   ======================================================================== */
#page-my-index .drc-dashboard,
body.drc-dashboard-body .drc-dashboard {
    width: 100%;
    max-width: none;
    padding-right: 26px;
    padding-left: 26px;
}

@media (max-width: 640px) {
    #page-my-index .drc-dashboard,
    body.drc-dashboard-body .drc-dashboard {
        padding-right: 12px;
        padding-left: 12px;
    }
}


/* ========================================================================
   0.1.36 - Dashboard "Nasıl Çalışır?" video-style modal
   0.1.37 - 60-second simulated playback progress + step highlighting
   ======================================================================== */
body.drc-modal-open {
    overflow: hidden;
}

.drc-how-modal {
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.drc-how-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.drc-how-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 13, .74);
    backdrop-filter: blur(9px);
}

.drc-how-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, calc(100vw - 56px));
    max-height: calc(100vh - 56px);
    overflow: auto;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background: #0F131C;
    box-shadow: 0 34px 90px rgba(0,0,0,.42);
    transform: translateY(16px) scale(.985);
    transition: transform .24s cubic-bezier(.2,.72,.3,1);
    outline: none;
}

.drc-how-modal.is-open .drc-how-dialog {
    transform: translateY(0) scale(1);
}

.drc-how-close {
    position: absolute;
    z-index: 5;
    top: 16px;
    right: 16px;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: #fff;
    background: rgba(15,19,28,.72);
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.drc-how-close:hover,
.drc-how-close:focus {
    color: #0F131C;
    background: var(--drc-yellow);
    transform: rotate(6deg);
}

.drc-how-player {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border-radius: 23px 23px 0 0;
    background: #090d13;
}

.drc-how-player-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.015);
}

.drc-how-player::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(15,19,28,.08),rgba(15,19,28,.48));
    content: "";
}

.drc-how-player-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 390px;
    max-width: 620px;
    flex-direction: column;
    justify-content: center;
    padding: 54px 62px 72px;
}

.drc-how-eyebrow {
    margin-bottom: 14px;
    color: var(--drc-yellow);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.drc-how-player h2 {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.drc-how-player p {
    max-width: 560px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.65;
}

.drc-how-playmark {
    position: absolute;
    right: 56px;
    bottom: 58px;
    display: inline-flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #0F131C;
    background: var(--drc-yellow);
    box-shadow: 0 0 0 10px rgba(254,254,12,.10), 0 12px 34px rgba(0,0,0,.24);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.drc-how-playmark:hover,
.drc-how-playmark:focus {
    color: #0F131C;
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(254,254,12,.12), 0 14px 38px rgba(0,0,0,.28);
    outline: none;
}

.drc-how-playmark i {
    margin-left: 3px;
    font-size: 17px;
}

.drc-how-player-bar {
    position: absolute;
    z-index: 3;
    right: 32px;
    bottom: 31px;
    left: 32px;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
}

.drc-how-player-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--drc-yellow);
    box-shadow: 0 0 10px rgba(254,254,12,.28);
    transition: width .18s linear;
}

.drc-how-player-time {
    position: absolute;
    z-index: 3;
    right: 32px;
    bottom: 11px;
    left: 32px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.58);
    font-size: 8px;
    font-weight: 700;
}

.drc-how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 20px 22px 8px;
}

.drc-how-steps article {
    display: flex;
    min-width: 0;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.035);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.drc-how-steps article.is-active {
    border-color: rgba(254,254,12,.40);
    background: rgba(254,254,12,.055);
    transform: translateY(-2px);
}

.drc-how-step-no {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #0F131C;
    background: var(--drc-yellow);
    font-size: 9px;
    font-weight: 850;
}

.drc-how-steps strong {
    display: block;
    margin: 1px 0 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.drc-how-steps p {
    margin: 0;
    color: #9ca5b1;
    font-size: 10px;
    line-height: 1.5;
}

.drc-how-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 22px 22px;
}

.drc-how-primary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #0F131C;
    background: var(--drc-yellow);
    box-shadow: 0 8px 24px rgba(254,254,12,.13);
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
}

@media (max-width: 760px) {
    .drc-how-modal { padding: 14px; }
    .drc-how-dialog { width: calc(100vw - 28px); max-height: calc(100vh - 28px); border-radius: 18px; }
    .drc-how-player { min-height: 330px; border-radius: 17px 17px 0 0; }
    .drc-how-player-content { min-height: 330px; padding: 48px 28px 70px; }
    .drc-how-player h2 { font-size: 31px; }
    .drc-how-player p { font-size: 13px; }
    .drc-how-playmark { right: 28px; bottom: 56px; width: 52px; height: 52px; }
    .drc-how-steps { grid-template-columns: 1fr; }
    .drc-how-actions { justify-content: stretch; }
    .drc-how-primary { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
 * V37 - Reference-inspired lower sidebar runway artwork.
 * A dark airport/runway scene replaces the older geometric runway block while
 * keeping the quote above it, matching the approved VOLO visual direction.
 * ---------------------------------------------------------------------- */
.drc-sidebar::after {
    display: none;
}

.drc-sidebar-quote {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 18px 26px 12px;
    background: linear-gradient(180deg, rgba(15,19,28,0) 0%, rgba(11,16,24,.62) 70%, rgba(10,15,23,.96) 100%);
}

.drc-sidebar-quote p {
    margin: 0 0 15px;
    color: rgba(255,255,255,.68);
    font-size: 12.5px;
    font-style: italic;
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,.26);
}

.drc-sidebar-quote span {
    display: block;
    width: 148px;
    max-width: 100%;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FEFE0C 0%, rgba(254,254,12,.88) 58%, rgba(254,254,12,0) 100%);
    box-shadow: 0 0 10px rgba(254,254,12,.13);
}

.drc-sidebar-runway {
    position: relative;
    z-index: 2;
    flex: 0 0 clamp(190px, 27vh, 252px);
    width: 100%;
    height: clamp(190px, 27vh, 252px);
    min-height: 190px;
    overflow: hidden;
    opacity: 1;
    clip-path: none;
    border-top: 0;
    background:
        radial-gradient(circle at 8% 33%, rgba(255,221,112,.95) 0 1px, rgba(255,199,55,.30) 1.5px 3px, transparent 4px),
        radial-gradient(circle at 16% 30%, rgba(255,245,183,.80) 0 1px, rgba(255,205,76,.24) 1.5px 3px, transparent 4px),
        radial-gradient(circle at 25% 35%, rgba(255,213,93,.78) 0 1px, transparent 3px),
        radial-gradient(circle at 34% 31%, rgba(255,244,186,.86) 0 1px, rgba(255,208,84,.22) 2px, transparent 4px),
        radial-gradient(circle at 43% 34%, rgba(255,224,112,.72) 0 1px, transparent 3px),
        radial-gradient(circle at 57% 32%, rgba(255,241,175,.90) 0 1px, rgba(255,213,89,.25) 2px, transparent 4px),
        radial-gradient(circle at 67% 35%, rgba(255,204,72,.78) 0 1px, transparent 3px),
        radial-gradient(circle at 77% 30%, rgba(255,243,185,.82) 0 1px, rgba(255,203,63,.25) 2px, transparent 4px),
        radial-gradient(circle at 88% 34%, rgba(255,221,104,.86) 0 1px, rgba(255,198,49,.22) 2px, transparent 4px),
        radial-gradient(ellipse at 50% 35%, rgba(227,176,63,.16) 0%, rgba(42,49,58,.08) 31%, transparent 64%),
        linear-gradient(180deg, #0b111b 0%, #111924 29%, #171b22 43%, #10151c 55%, #080c12 100%);
    box-shadow: inset 0 18px 22px rgba(5,9,15,.24), inset 0 -36px 46px rgba(0,0,0,.48);
}

/* Soft horizon band makes the block read as a night airport photograph. */
.drc-sidebar-runway::after {
    position: absolute;
    top: 30%;
    right: -8%;
    left: -8%;
    z-index: 1;
    height: 34px;
    content: "";
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,191,65,.16), transparent 58%),
        linear-gradient(180deg, transparent, rgba(210,151,55,.08), transparent);
    filter: blur(2px);
    pointer-events: none;
}

/* Runway asphalt: tapered perspective with a warm illuminated centre line. */
.drc-sidebar-runway::before {
    position: absolute;
    top: 29%;
    bottom: -9%;
    left: 8%;
    z-index: 2;
    width: 84%;
    content: "";
    clip-path: polygon(45.8% 0, 54.2% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(90deg,
            transparent 0%,
            transparent 49.05%,
            rgba(254,254,12,.14) 49.15%,
            rgba(254,254,12,.92) 49.62%,
            rgba(255,246,132,.96) 50%,
            rgba(254,254,12,.92) 50.38%,
            rgba(254,254,12,.14) 50.85%,
            transparent 50.95%,
            transparent 100%),
        linear-gradient(180deg, rgba(32,38,44,.92) 0%, rgba(20,25,31,.98) 38%, #0b0e13 100%);
    box-shadow:
        inset 22px 0 34px rgba(0,0,0,.28),
        inset -22px 0 34px rgba(0,0,0,.28),
        0 0 34px rgba(0,0,0,.44);
    pointer-events: none;
}

.drc-sidebar-runway-lights {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    pointer-events: none;
}

.drc-sidebar-runway-lights::before,
.drc-sidebar-runway-lights::after {
    position: absolute;
    bottom: -4px;
    width: 7px;
    height: 71%;
    content: "";
    transform-origin: 50% 100%;
    background: radial-gradient(circle,
        rgba(255,255,228,.98) 0 1.2px,
        rgba(255,228,105,.82) 1.4px,
        rgba(255,194,41,.20) 2.6px,
        transparent 3.7px) center bottom / 7px 22px repeat-y;
    filter: drop-shadow(0 0 4px rgba(255,213,82,.66));
    opacity: .92;
}

.drc-sidebar-runway-lights::before {
    left: 25.5%;
    transform: rotate(10.8deg);
}

.drc-sidebar-runway-lights::after {
    right: 25.5%;
    transform: rotate(-10.8deg);
}

@media (max-height: 760px) {
    .drc-sidebar-quote {
        padding-top: 12px;
        padding-bottom: 9px;
    }
    .drc-sidebar-quote p {
        margin-bottom: 10px;
        font-size: 11.5px;
    }
    .drc-sidebar-runway {
        flex-basis: 170px;
        height: 170px;
        min-height: 170px;
    }
}

/* -------------------------------------------------------------------------
 * V38 - Use the approved photographic runway artwork in the lower sidebar.
 * The image is bundled with the theme and fills the reference-sized runway
 * panel without stretching. A subtle top veil blends it into the quote area.
 * ---------------------------------------------------------------------- */
.drc-sidebar-quote {
    padding-bottom: 10px;
    background: linear-gradient(180deg, rgba(15,19,28,0) 0%, rgba(10,15,23,.42) 66%, #0a0f17 100%);
}

.drc-sidebar-runway {
    position: relative;
    z-index: 2;
    flex: 0 0 clamp(205px, 28vh, 260px);
    width: 100%;
    height: clamp(205px, 28vh, 260px);
    min-height: 205px;
    overflow: hidden;
    opacity: 1;
    clip-path: none;
    background: #090d13 !important;
    box-shadow: none;
}

.drc-sidebar-runway::before,
.drc-sidebar-runway::after,
.drc-sidebar-runway-lights {
    display: none !important;
    content: none !important;
}

.drc-sidebar-runway-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border: 0;
    opacity: .98;
}

.drc-sidebar-runway-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,12,19,.76) 0%, rgba(8,12,19,.18) 17%, rgba(4,7,11,0) 42%),
        linear-gradient(0deg, rgba(4,7,11,.18) 0%, rgba(4,7,11,0) 28%);
}

@media (max-height: 760px) {
    .drc-sidebar-runway {
        flex-basis: 175px;
        height: 175px;
        min-height: 175px;
    }
    .drc-sidebar-runway-image {
        object-position: center 56%;
    }
}


/* -------------------------------------------------------------------------
 * V39 - Reference-style "Rota sende" artwork.
 * Only the upper route area is restyled; the earned-badges section keeps its
 * existing markup and sizing. The supplied transparent plane/path artwork is
 * layered over soft yellow wave shapes, matching the approved reference card.
 * ---------------------------------------------------------------------- */
.drc-yellow-card::after {
    display: none;
}

.drc-route-copy {
    position: relative;
    z-index: 2;
    min-height: 148px;
    margin: -7px -7px 9px;
    padding: 9px 7px 12px;
    overflow: hidden;
    border-radius: 12px;
    isolation: isolate;
}

.drc-route-copy::before,
.drc-route-copy::after {
    position: absolute;
    pointer-events: none;
    content: "";
}

/* Pale upper wave, similar to the folded highlight in the reference. */
.drc-route-copy::before {
    z-index: 0;
    top: -74px;
    right: -84px;
    width: 278px;
    height: 214px;
    border-radius: 48% 0 0 62%;
    background: linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,248,159,.10) 58%, rgba(255,255,255,0));
    transform: rotate(-13deg);
}

/* Deeper lower wave gives the yellow block some movement without affecting badges. */
.drc-route-copy::after {
    z-index: 0;
    right: -112px;
    bottom: -118px;
    width: 330px;
    height: 220px;
    border-radius: 54% 48% 0 0;
    background: linear-gradient(150deg, rgba(255,239,70,.10), rgba(255,190,0,.30));
    transform: rotate(-16deg);
}

.drc-route-copy strong,
.drc-route-copy span {
    position: relative;
    z-index: 3;
}

.drc-route-copy strong {
    max-width: 132px;
    font-size: 20px;
    line-height: 1.05;
}

.drc-route-copy span {
    max-width: 132px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
}

.drc-route-visual {
    position: absolute;
    z-index: 2;
    top: 4px;
    right: -9px;
    display: block;
    width: 248px;
    max-width: none;
    height: auto;
    opacity: .92;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 1320px) {
    .drc-route-visual {
        right: -15px;
        width: 232px;
    }
}

@media (max-width: 1120px) {
    .drc-route-copy {
        min-height: 132px;
    }
    .drc-route-visual {
        top: 0;
        right: -12px;
        width: 218px;
    }
}

@media (max-width: 520px) {
    .drc-route-copy {
        min-height: 138px;
    }
    .drc-route-visual {
        right: -22px;
        width: 228px;
        opacity: .86;
    }
}

/* -------------------------------------------------------------------------
 * V46 - VOLO notification popover.
 * Keep Moodle's notification JS/data attributes intact and only modernise the
 * visual shell. Full-list and preference links are redirected by topbar JS to
 * theme pages that reuse Moodle's own notification APIs inside the app shell.
 * ---------------------------------------------------------------------- */
.drc-topbar-plugin-output .popover-region-notifications {
    position: relative;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0 !important;
    border-radius: 10px;
    color: #111923 !important;
    background: transparent;
    transition: background .15s ease, color .15s ease;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle:hover,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle:focus,
.drc-topbar-plugin-output .popover-region-notifications:not(.collapsed) .popover-region-toggle {
    color: #111923 !important;
    background: #FEFE0C;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle img.icon {
    width: 17px;
    height: 17px;
    margin: 0;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle i.icon,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle .icon,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle .fa {
    display: block;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    line-height: 1;
    text-align: center;
}

/* V50 - Moodle draws the notification popover pointer on the toggle itself.
 * Remove both pseudo-elements so the VOLO header stays perfectly rectangular. */
.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle::before,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-toggle::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    content: none !important;
}

.drc-topbar-plugin-output .popover-region-notifications .count-container {
    top: -1px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #111923;
    background: #FEFE0C;
    font-size: 9px;
    line-height: 13px;
    font-weight: 850;
    box-shadow: 0 2px 7px rgba(0,0,0,.14);
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-container::before,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-container::after,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-container::before,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-container::after {
    display: none !important;
    content: none !important;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-container {
    top: calc(100% + 11px) !important;
    right: 0 !important;
    left: auto !important;
    width: 390px;
    height: auto !important;
    min-height: 360px;
    max-height: min(560px, calc(100vh - 82px));
    overflow: hidden;
    border: 1px solid rgba(15,24,36,.12);
    border-radius: 16px;
    background: #f5f7f9;
    box-shadow: 0 22px 55px rgba(7,15,26,.22);
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-container {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 0 18px;
    border-bottom: 2px solid #FEFE0C;
    color: #fff;
    background:
        radial-gradient(circle at 90% 20%, rgba(254,254,12,.10), transparent 34%),
        linear-gradient(112deg, #101923, #202613);
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-text {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 820;
    letter-spacing: -.01em;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 2px;
}

/* V51 - Keep notification header action icons optically centered. Moodle's
 * global .icon/.fa rules add side margins, which made the glyphs look left-aligned. */
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions a {
    display: inline-flex !important;
    width: 32px;
    height: 32px;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 9px;
    color: #FEFE0C !important;
    background: rgba(255,255,255,.055);
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    box-sizing: border-box;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions a:hover,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions a:focus {
    color: #111923 !important;
    background: #FEFE0C;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions img.icon,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions i.icon,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions .icon,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions .fa {
    width: 15px;
    height: 15px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 15px !important;
    text-align: center !important;
    flex: 0 0 15px;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions .dropdown-toggle::after,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions [data-toggle="dropdown"]::after,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions .btn.dropdown-toggle::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    margin: 0 !important;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions .dropdown-toggle,
.drc-topbar-plugin-output .popover-region-notifications .popover-region-header-actions [data-toggle="dropdown"] {
    padding-right: 0 !important;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-content-container {
    height: auto !important;
    max-height: 430px;
    background: #f5f7f9;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-content {
    max-height: 430px;
    overflow-y: auto;
    padding: 9px;
}

.drc-topbar-plugin-output .popover-region-notifications .empty-message {
    position: relative;
    min-height: 280px;
    padding: 126px 24px 40px;
    color: #75808c;
    background: #f5f7f9;
    text-align: center;
    font-size: 11px;
    font-weight: 650;
}

.drc-topbar-plugin-output .popover-region-notifications .empty-message::before {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FEFE0C;
    color: #111923;
    font-family: FontAwesome;
    font-size: 22px;
    line-height: 1;
    content: "\f0f3";
    transform: translateX(-50%);
    box-sizing: border-box;
}

.drc-topbar-plugin-output .popover-region-notifications .content-item-container.notification {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid #e0e5e9;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(11,21,34,.035);
}

.drc-topbar-plugin-output .popover-region-notifications .content-item-container.notification.unread {
    border-left: 4px solid #FEFE0C;
    background: #fffef2;
}

.drc-topbar-plugin-output .popover-region-notifications .content-item-container .context-link,
.drc-topbar-plugin-output .popover-region-notifications .content-item-container > div[tabindex] {
    color: #273240 !important;
    text-decoration: none !important;
}

.drc-topbar-plugin-output .popover-region-notifications .content-item-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px 4px;
}

.drc-topbar-plugin-output .popover-region-notifications .notification-image img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    object-fit: cover;
}

.drc-topbar-plugin-output .popover-region-notifications .notification-message {
    color: #2a3542;
    font-size: 10px;
    line-height: 1.45;
    font-weight: 650;
}

.drc-topbar-plugin-output .popover-region-notifications .content-item-footer {
    padding: 0 12px 9px 54px;
}

.drc-topbar-plugin-output .popover-region-notifications .timestamp,
.drc-topbar-plugin-output .popover-region-notifications .view-more {
    color: #86909b !important;
    font-size: 8px;
}

.drc-topbar-plugin-output .popover-region-notifications .view-more {
    margin-left: 8px;
    color: #676d00 !important;
    font-weight: 750;
}

.drc-topbar-plugin-output .popover-region-notifications .see-all-link {
    display: block;
    border-top: 1px solid #e2e7ea;
    color: #111923 !important;
    background: #fff;
    text-decoration: none !important;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-footer-container {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
}

.drc-topbar-plugin-output .popover-region-notifications .popover-region-seeall-text {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 14px;
    border-radius: 9px;
    color: #111923;
    background: #FEFE0C;
    font-size: 9px;
    font-weight: 820;
}

@media (max-width: 520px) {
    .drc-topbar-plugin-output .popover-region-notifications .popover-region-container {
        position: fixed !important;
        top: 66px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto;
        max-height: calc(100vh - 78px);
    }
}

/* ========================================================================
   V72 - Login-as transition screen
   Keeps Moodle's core login-as/session flow intact and only replaces the
   learner-facing confirmation presentation inside the VOLO application shell.
   ======================================================================== */
body.drc-loginas-body .drc-loginas-page-content {
    max-width: 1640px;
    padding-top: 46px;
}

body.drc-loginas-body .drc-loginas-layout {
    display: block;
}

body.drc-loginas-body .drc-loginas-core-main {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.drc-loginas-card {
    overflow: hidden;
    border: 1px solid #e0e5e9;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(8,17,29,.12);
}

.drc-loginas-card-head {
    position: relative;
    display: flex;
    min-height: 190px;
    align-items: center;
    gap: 22px;
    padding: 34px 38px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 91% 8%, rgba(254,254,12,.16), transparent 34%),
        linear-gradient(115deg, #111923 0%, #101821 68%, #20270a 100%);
}

.drc-loginas-card-head::after {
    position: absolute;
    right: -74px;
    bottom: -128px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(254,254,12,.15);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.drc-loginas-symbol {
    position: relative;
    z-index: 1;
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 19px;
    color: #111923;
    background: #fefe0c;
    box-shadow: 0 14px 34px rgba(0,0,0,.20);
    font-size: 25px;
}

.drc-loginas-card-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.drc-loginas-card-copy > span {
    display: block;
    margin-bottom: 7px;
    color: #fefe0c;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .16em;
}

.drc-loginas-card-copy h2 {
    margin: 0 0 9px;
    color: #fff;
    font-size: 27px;
    line-height: 1.12;
    font-weight: 830;
}

.drc-loginas-card-copy p {
    max-width: 530px;
    margin: 0;
    color: #c8d0da;
    font-size: 12px;
    line-height: 1.65;
}

.drc-loginas-card-copy p strong {
    color: #fff;
    font-weight: 800;
}

.drc-loginas-card-body {
    padding: 26px 30px 30px;
}

.drc-loginas-user-row {
    display: grid;
    min-height: 74px;
    grid-template-columns: 46px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid #e3e7ea;
    border-radius: 14px;
    background: #f8fafb;
}

.drc-loginas-user-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    color: #111923;
    background: #fefe0c;
    font-size: 17px;
}

.drc-loginas-user-row > div:nth-child(2) {
    min-width: 0;
}

.drc-loginas-user-row > div:nth-child(2) > span {
    display: block;
    margin-bottom: 4px;
    color: #78838e;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .12em;
}

.drc-loginas-user-row > div:nth-child(2) > strong {
    display: block;
    overflow: hidden;
    color: #17212d;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drc-loginas-status {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #d8e7d5;
    border-radius: 999px;
    color: #2f6c3f;
    background: #f0f8ee;
    font-size: 9px;
    font-weight: 820;
    white-space: nowrap;
}

.drc-loginas-status i {
    color: #4da55f;
    font-size: 7px;
}

.drc-loginas-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 3px solid #fefe0c;
    border-radius: 0 10px 10px 0;
    color: #626d78;
    background: #fffef2;
    font-size: 10.5px;
    line-height: 1.55;
}

.drc-loginas-note i {
    margin-top: 2px;
    color: #8b8200;
    font-size: 13px;
}

/* Moodle core notice() still owns the destination and form. Hide only its
   duplicate message and keep the native continue form as the actual action. */
.drc-loginas-core-output #notice,
.drc-loginas-core-output .box.generalbox#notice {
    display: none !important;
}

.drc-loginas-core-output .continuebutton {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.drc-loginas-core-output .continuebutton form,
.drc-loginas-core-output .continuebutton div {
    margin: 0 !important;
}

.drc-loginas-core-output .continuebutton button,
.drc-loginas-core-output .continuebutton input[type="submit"],
.drc-loginas-core-output .continuebutton .btn {
    display: inline-flex !important;
    min-width: 235px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid #d8da00 !important;
    border-radius: 11px !important;
    outline: 0 !important;
    color: #111923 !important;
    background: #fefe0c !important;
    box-shadow: 0 8px 20px rgba(184,184,0,.14) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.drc-loginas-core-output .continuebutton button:hover,
.drc-loginas-core-output .continuebutton input[type="submit"]:hover,
.drc-loginas-core-output .continuebutton .btn:hover {
    background: #ffff28 !important;
    box-shadow: 0 11px 25px rgba(171,171,0,.18) !important;
    transform: translateY(-1px);
}

.drc-loginas-core-output .continuebutton button:focus,
.drc-loginas-core-output .continuebutton input[type="submit"]:focus,
.drc-loginas-core-output .continuebutton .btn:focus {
    box-shadow: 0 0 0 3px rgba(254,254,12,.22) !important;
}

@media (max-width: 720px) {
    body.drc-loginas-body .drc-loginas-page-content {
        padding-top: 24px;
    }

    .drc-loginas-card-head {
        min-height: 0;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .drc-loginas-symbol {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 16px;
        font-size: 21px;
    }

    .drc-loginas-card-copy h2 {
        font-size: 22px;
    }

    .drc-loginas-card-body {
        padding: 20px;
    }

    .drc-loginas-user-row {
        grid-template-columns: 42px minmax(0,1fr);
    }

    .drc-loginas-user-icon {
        width: 42px;
        height: 42px;
    }

    .drc-loginas-status {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 55px;
    }
}

@media (max-width: 480px) {
    .drc-loginas-card-head {
        flex-direction: column;
        gap: 17px;
    }

    .drc-loginas-core-output .continuebutton button,
    .drc-loginas-core-output .continuebutton input[type="submit"],
    .drc-loginas-core-output .continuebutton .btn {
        width: 100% !important;
        min-width: 0;
    }
}

/* -------------------------------------------------------------------------
 * V74 - SCORM popup alt bosluk duzeltmesi.
 * Moodle 3.6 core #scorm_object yuksekligini %98 biraktigi icin oynaticinin
 * altinda ince bir bosluk olusuyordu. Runtime tarafinda hesaplanan kapsayici
 * yuksekligini tamamen kullan; yalnizca embedded SCORM player icin uygula.
 * ---------------------------------------------------------------------- */
body#page-mod-scorm-player.drc-embedded-body #scorm_object {
    height: 100% !important;
}

/* -------------------------------------------------------------------------
 * V75 - SCORM popup kalan alt boslugu temizle.
 * Moodle 3.6 mod_scorm #scorm_layout icin margin-bottom:50px uygular.
 * Embedded popup gorunumunde bu rezerv alana ihtiyac yoktur.
 * ---------------------------------------------------------------------- */
body#page-mod-scorm-player.drc-embedded-body #scorm_layout {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body#page-mod-scorm-player.drc-embedded-body #scormpage,
body#page-mod-scorm-player.drc-embedded-body #scorm_content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * V76 - SCORM iframe icindeki son alt seridi gorunur alanin disina tasi.
 * Paket kendi viewport'unun dibinde birkac piksellik rezerv alan birakiyor.
 * SCORM paketine dokunmadan iframe'i az miktarda uzat ve Moodle layout'unda
 * fazlaligi kirp. Yalnizca embedded SCORM player icin uygulanir.
 * ---------------------------------------------------------------------- */
body#page-mod-scorm-player.drc-embedded-body #scorm_layout {
    overflow: hidden !important;
}

body#page-mod-scorm-player.drc-embedded-body #scorm_object {
    height: calc(100% + 12px) !important;
}

/* -------------------------------------------------------------------------
 * V77 - SCORM popup bottom gap: use the real viewport height.
 * Moodle 3.6 module.js deliberately subtracts 5px when sizing #scorm_layout.
 * The theme layout corrects that runtime value with JS. Keep the iframe at
 * exactly 100% here; do not enlarge the iframe itself.
 * ---------------------------------------------------------------------- */
body#page-mod-scorm-player.drc-embedded-body #scorm_layout {
    overflow: hidden !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body#page-mod-scorm-player.drc-embedded-body #scorm_object {
    height: 100% !important;
    transform: none !important;
}

/* -------------------------------------------------------------------------
 * V78 - SCORM browse/review mode labelini gizle.
 * Moodle 3.6 #scormmode icinde "Onizleme Modu" / review-browse mode etiketini
 * gosterir. Embedded popup'ta kullaniciya bu teknik satiri gostermiyoruz.
 * #scormnav varsa 30px navigasyon satiri korunur; yoksa runtime JS #scormtop
 * alanini da tamamen kapatir.
 * ---------------------------------------------------------------------- */
body#page-mod-scorm-player.drc-embedded-body #scormmode {
    display: none !important;
}

body#page-mod-scorm-player.drc-embedded-body #scormtop:not(:has(#scormnav)) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================================================
   Sertifikasyonlar - tek, temiz vektör kompozisyonu
   ======================================================================== */
.volo-detail-page-sertifikasyonlar .volo-detail-hero {
    height: 490px;
    box-sizing: border-box;
    grid-template-columns: minmax(0, .86fr) minmax(540px, 1.14fr);
    gap: 24px;
    padding: 50px;
}

.volo-cert-art {
    width: 100%;
    height: 390px;
    min-height: 0;
    align-self: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.volo-cert-art svg {
    display: block;
    width: auto;
    height: 94%;
    max-width: 100%;
    max-height: 366px;
    margin: 0 auto;
    overflow: visible;
}

.volo-cert-art text {
    user-select: none;
}

/* Ana sayfa kartında aynı görsel dilinin daha sıkı versiyonu. */
.drc-home-cert-art {
    position: relative;
    padding: 0 !important;
    background:
        radial-gradient(circle at 50% 46%, rgba(254, 254, 12, .11), transparent 42%),
        linear-gradient(145deg, #111b2e, #07111f) !important;
}

.drc-home-cert-art svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform .42s ease;
}

.drc-home-credential-card:first-child:hover .drc-home-cert-art svg,
.drc-home-credential-card:first-child:focus .drc-home-cert-art svg {
    transform: scale(1.025);
}

@media (max-width: 1240px) {
    .volo-detail-page-sertifikasyonlar .volo-detail-hero {
        grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
        padding: 50px;
    }
}

@media (max-width: 1040px) {
    .volo-detail-page-sertifikasyonlar .volo-detail-hero,
    .volo-cert-content {
        grid-template-columns: 1fr;
    }

    .volo-detail-page-sertifikasyonlar .volo-detail-hero {
        height: auto;
    }

    .volo-cert-art {
        width: min(100%, 760px);
        height: 360px;
        margin: 0 auto;
    }

    .volo-cert-art svg {
        width: auto;
        height: 96%;
        max-width: 100%;
        max-height: 346px;
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    .drc-home-submenu strong { font-size: 13px; }
    .drc-home-submenu small { font-size: 10.5px; }

    .volo-detail-page-sertifikasyonlar .volo-detail-hero {
        gap: 22px;
        padding: 28px 22px 22px;
    }

    .volo-cert-hero-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .volo-cert-art {
        height: 300px;
        overflow: hidden;
    }

    .volo-cert-art svg {
        width: auto;
        height: 94%;
        max-width: 100%;
        max-height: 282px;
        margin: 0 auto;
    }

    .volo-cert-assurance {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .volo-cert-assurance strong {
        padding-right: 0;
        border-right: 0;
        white-space: normal;
    }

    .volo-cert-assurance p {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .volo-cert-art svg {
        width: auto;
        height: 92%;
        max-width: 100%;
        max-height: 276px;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drc-home-cert-art svg {
        transition: none;
    }
}


/* ========================================================================
   V0.1.74 - Public homepage: premium statistics, audience journey and
   lifestyle certification artwork.
   ======================================================================== */

/* Audience journey. */
.drc-home-audience-card-wrap {
    position: relative;
    padding: 54px 48px 48px;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 24%, rgba(254, 254, 12, .08), transparent 25%),
        radial-gradient(circle at 88% 12%, rgba(95, 123, 155, .15), transparent 30%),
        linear-gradient(135deg, #111b2e 0%, #07111f 62%, #142019 100%);
}

.drc-home-audience-card-wrap::before,
.drc-home-audience-card-wrap::after {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    content: "";
}

.drc-home-audience-card-wrap::before {
    top: 0;
    right: 0;
    left: 0;
    height: 210px;
    background-image: radial-gradient(rgba(254, 254, 12, .18) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .15;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}

.drc-home-audience-card-wrap::after {
    top: -220px;
    right: -180px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(254, 254, 12, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 74px rgba(255, 255, 255, .012), 0 0 0 150px rgba(255, 255, 255, .008);
}

.drc-home-audience .drc-home-section-heading {
    position: relative;
    z-index: 3;
    max-width: 820px;
    margin-bottom: 34px;
}

.drc-home-audience .drc-home-section-heading p {
    max-width: 740px;
    color: rgba(255, 255, 255, .62);
}

.drc-home-audience-grid {
    position: relative;
    z-index: 2;
    gap: 12px;
}

.drc-home-audience-grid::before {
    display: none;
}

.drc-home-audience-route {
    position: absolute;
    top: 18px;
    right: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100px;
    overflow: visible;
    pointer-events: none;
}

.drc-home-audience-route-glow,
.drc-home-audience-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drc-home-audience-route-glow {
    stroke: rgba(254, 254, 12, .18);
    stroke-width: 10;
    filter: blur(6px);
}

.drc-home-audience-route-line {
    stroke: #dfe000;
    stroke-width: 1.6;
    stroke-dasharray: 2 4;
}

.drc-home-audience-route circle {
    fill: #fefe0c;
    stroke: #111b2e;
    stroke-width: 5;
    filter: drop-shadow(0 0 7px rgba(254, 254, 12, .72));
}

.drc-home-audience-grid article {
    --drc-audience-node-top: 53px;
    min-height: 268px;
    padding: 132px 20px 23px;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .10);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .064), rgba(255, 255, 255, .026)),
        rgba(13, 25, 43, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.drc-home-audience-grid article:nth-of-type(2) { --drc-audience-node-top: 29px; }
.drc-home-audience-grid article:nth-of-type(3) { --drc-audience-node-top: 57px; }
.drc-home-audience-grid article:nth-of-type(4) { --drc-audience-node-top: 23px; }
.drc-home-audience-grid article:nth-of-type(5) { --drc-audience-node-top: 45px; }

.drc-home-audience-grid article::before {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(254, 254, 12, .50), transparent);
    opacity: 0;
    content: "";
    transition: opacity .25s ease;
}

.drc-home-audience-grid article:hover {
    border-color: rgba(254, 254, 12, .34);
    background:
        linear-gradient(180deg, rgba(254, 254, 12, .075), rgba(255, 255, 255, .032)),
        rgba(13, 25, 43, .86);
    box-shadow: 0 20px 42px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(255, 255, 255, .04);
    transform: translateY(-6px);
}

.drc-home-audience-grid article:hover::before {
    opacity: 1;
}

.drc-home-audience-icon {
    top: var(--drc-audience-node-top);
    z-index: 3;
    width: 64px;
    height: 64px;
    border: 7px solid #111b2e;
    background: linear-gradient(145deg, #ffff24, #d5d600);
    font-size: 19px;
    box-shadow: 0 0 0 1px rgba(254, 254, 12, .50), 0 9px 24px rgba(0, 0, 0, .28), 0 0 26px rgba(254, 254, 12, .12);
    transition: box-shadow .25s ease, transform .25s ease;
}

.drc-home-audience-grid article:hover .drc-home-audience-icon {
    box-shadow: 0 0 0 1px rgba(254, 254, 12, .75), 0 13px 30px rgba(0, 0, 0, .32), 0 0 34px rgba(254, 254, 12, .25);
    transform: translateX(-50%) translateY(-3px) scale(1.045);
}

.drc-home-audience-number {
    top: calc(var(--drc-audience-node-top) - 23px);
    z-index: 4;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
    letter-spacing: .14em;
}

.drc-home-audience-copy {
    position: relative;
    z-index: 2;
}

.drc-home-audience-grid h3 {
    min-height: 42px;
    font-size: 15px;
    line-height: 1.35;
}

.drc-home-audience-copy p {
    min-height: 56px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .60);
    font-size: 11px;
    line-height: 1.58;
}

.drc-home-audience-focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    padding: 6px 9px;
    border: 1px solid rgba(254, 254, 12, .18);
    border-radius: 999px;
    background: rgba(254, 254, 12, .055);
    color: rgba(254, 254, 12, .82);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* Statistics with dark, image-backed data cards. */
.drc-home-stats-card-wrap {
    padding: 42px;
    overflow: hidden;
    background:
        radial-gradient(circle at 0 100%, rgba(254, 254, 12, .055), transparent 28%),
        linear-gradient(145deg, #ffffff, #fbfcfd);
    box-shadow: 0 16px 44px rgba(15, 23, 40, .075);
}

.drc-home-stats-layout {
    display: grid;
    grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr);
    align-items: stretch;
    gap: 30px;
}

.drc-home-stats-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    margin: 0;
    padding: 7px 4px 4px;
}

.drc-home-stats-heading > div {
    max-width: none;
}

.drc-home-stats-heading h2 {
    font-size: clamp(31px, 2.35vw, 43px);
}

.drc-home-stats-heading h2 span {
    color: #cfd000;
}

.drc-home-stats-heading p {
    max-width: 470px;
    margin-top: 16px;
}

.drc-home-stats-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}

.drc-home-stats-signals span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #e3e7eb;
    border-radius: 999px;
    background: #f7f9fa;
    color: #667185;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

.drc-home-stats-signals span::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d2d300;
    box-shadow: 0 0 0 3px rgba(210, 211, 0, .11);
    content: "";
}

.drc-home-stats-status {
    padding: 9px 13px;
    background: #fffef1;
}

.drc-home-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.drc-home-stat-card {
    position: relative;
    min-height: 278px;
    padding: 0;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 19px;
    background: #081323;
    box-shadow: 0 15px 34px rgba(8, 18, 34, .16);
}

.drc-home-stat-card::after {
    position: absolute;
    right: -60px;
    bottom: -80px;
    z-index: 0;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(254, 254, 12, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(254, 254, 12, .025), 0 0 0 76px rgba(255, 255, 255, .012);
    content: "";
}

.drc-home-stat-photo,
.drc-home-stat-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

.drc-home-stat-photo {
    z-index: -2;
    object-fit: cover;
    filter: saturate(.76) contrast(1.03);
    opacity: .38;
    transition: filter .38s ease, opacity .38s ease, transform .48s ease;
}

.drc-home-stat-card:nth-child(1) .drc-home-stat-photo { object-position: 42% center; }
.drc-home-stat-card:nth-child(2) .drc-home-stat-photo { object-position: 62% center; }
.drc-home-stat-card:nth-child(3) .drc-home-stat-photo { object-position: 52% center; }

.drc-home-stat-shade {
    z-index: -1;
    display: block !important;
    background:
        linear-gradient(180deg, rgba(5, 13, 27, .36), rgba(5, 13, 27, .74) 54%, rgba(5, 13, 27, .98)),
        linear-gradient(115deg, rgba(4, 12, 25, .74), transparent 70%);
}

.drc-home-stat-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 278px;
    box-sizing: border-box;
    flex-direction: column;
    padding: 20px 20px 17px;
}

.drc-home-stat-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(254, 254, 12, .52);
    border-radius: 14px;
    background: rgba(7, 17, 31, .78);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    font-size: 17px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.drc-home-stat-trend {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(254, 254, 12, .28);
    background: rgba(254, 254, 12, .11);
    color: #fefe0c;
}

.drc-home-stat-value {
    margin-top: 24px;
}

.drc-home-stat-value strong {
    display: block;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: clamp(27px, 2.05vw, 37px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.02;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .26);
}

.drc-home-stat-value span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

.drc-home-stat-chart {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 126px;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    transform: none;
}

.drc-home-stat-chart-grid {
    fill: none;
    stroke: rgba(255, 255, 255, .06);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

.drc-home-stat-chart-area {
    fill: rgba(254, 254, 12, .085);
}

.drc-home-stat-chart-line {
    fill: none;
    stroke: #e8e900;
    stroke-width: 2.1;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(254, 254, 12, .45));
}

.drc-home-stat-chart circle {
    fill: #fefe0c;
    stroke: rgba(255, 255, 255, .75);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 5px rgba(254, 254, 12, .72));
}

.drc-home-stat-card:hover {
    border-color: rgba(254, 254, 12, .47);
    box-shadow: 0 23px 48px rgba(8, 18, 34, .25);
    transform: translateY(-6px);
}

.drc-home-stat-card:hover .drc-home-stat-photo {
    filter: saturate(.92) contrast(1.04);
    opacity: .46;
    transform: scale(1.055);
}

/* Lifestyle certification card. */
.drc-home-cert-art {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #101a2c !important;
}

.drc-home-cert-art::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, transparent 44%, rgba(7, 17, 31, .46) 100%),
        linear-gradient(90deg, rgba(7, 17, 31, .14), transparent 46%);
    pointer-events: none;
    content: "";
}

.drc-home-cert-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    filter: saturate(.92) contrast(1.025) brightness(1.025);
}

.drc-home-cert-badge {
    position: absolute;
    right: 17px;
    bottom: 17px;
    z-index: 2;
    display: flex;
    max-width: calc(100% - 34px);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 13px;
    background: rgba(7, 17, 31, .86);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.drc-home-cert-badge > i {
    color: #fefe0c;
    font-size: 20px;
}

.drc-home-cert-badge > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.drc-home-cert-badge small {
    color: rgba(255, 255, 255, .54);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.drc-home-cert-badge strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 820;
    white-space: nowrap;
}

.drc-home-credential-card:first-child:hover .drc-home-cert-art img,
.drc-home-credential-card:first-child:focus .drc-home-cert-art img {
    transform: scale(1.045);
}

@media (max-width: 1180px) {
    .drc-home-audience-route { display: none; }
    .drc-home-audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .drc-home-audience-grid article,
    .drc-home-audience-grid article:nth-of-type(n) {
        --drc-audience-node-top: 30px;
        min-height: 240px;
        padding-top: 112px;
    }

    .drc-home-stats-layout {
        grid-template-columns: 1fr;
    }

    .drc-home-stats-heading {
        align-items: flex-end;
        flex-direction: row;
        gap: 34px;
    }

    .drc-home-stats-heading > div {
        max-width: 720px;
    }
}

@media (max-width: 920px) {
    .drc-home-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drc-home-audience-grid article,
    .drc-home-audience-grid article:nth-of-type(n) { min-height: 230px; }
    .drc-home-audience-grid article:last-child { grid-column: 1 / -1; }

    .drc-home-stats-grid { grid-template-columns: 1fr; }
    .drc-home-stat-card,
    .drc-home-stat-content { min-height: 235px; }
    .drc-home-stat-value { margin-top: 19px; }
    .drc-home-stat-chart { height: 108px; }
}

@media (max-width: 760px) {
    .drc-home-audience-card-wrap,
    .drc-home-stats-card-wrap {
        padding: 30px 24px;
    }

    .drc-home-audience .drc-home-section-heading {
        margin-bottom: 24px;
    }

    .drc-home-audience-grid { grid-template-columns: 1fr; }
    .drc-home-audience-grid article,
    .drc-home-audience-grid article:nth-of-type(n),
    .drc-home-audience-grid article:last-child {
        min-height: 0;
        grid-column: auto;
        padding: 22px 20px 20px 88px;
        text-align: left;
    }

    .drc-home-audience-icon {
        top: 25px;
        left: 20px;
        width: 52px;
        height: 52px;
        border-width: 5px;
        font-size: 16px;
        transform: none;
    }

    .drc-home-audience-grid article:hover .drc-home-audience-icon {
        transform: translateY(-2px) scale(1.035);
    }

    .drc-home-audience-number {
        top: 16px;
        right: 18px;
        left: auto;
        transform: none;
    }

    .drc-home-audience-grid h3 {
        min-height: 0;
        padding-right: 32px;
    }

    .drc-home-audience-copy p {
        min-height: 0;
        margin-top: 7px;
    }

    .drc-home-audience-focus {
        justify-content: flex-start;
        margin-top: 11px;
    }

    .drc-home-stats-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .drc-home-stat-card,
    .drc-home-stat-content {
        min-height: 225px;
    }

    .drc-home-cert-badge {
        right: 13px;
        bottom: 13px;
    }
}

@media (max-width: 480px) {
    .drc-home-audience-card-wrap,
    .drc-home-stats-card-wrap { padding: 26px 20px; }
    .drc-home-stats-signals { margin-top: 17px; }
    .drc-home-stat-content { padding: 18px 18px 15px; }
    .drc-home-stat-chart { right: 0; bottom: 0; left: 0; width: 100%; height: 100px; transform: none; }
    .drc-home-cert-badge small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .drc-home-stat-photo,
    .drc-home-audience-icon,
    .drc-home-cert-art img {
        transition: none;
    }
}

/* ========================================================================
   Compact VOLO account menu
   ======================================================================== */
.drc-account-menu {
    position: relative;
    flex: 0 0 auto;
}

.drc-account-menu-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 3px 5px 3px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #17212d;
    background: transparent;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.drc-account-menu-toggle:hover,
.drc-account-menu-toggle:focus,
.drc-account-menu.is-open .drc-account-menu-toggle {
    border-color: #e4e8ec;
    outline: 0;
    background: #f7f8fa;
    box-shadow: 0 4px 14px rgba(8, 17, 29, .04);
}

.drc-account-menu-name {
    display: block;
    max-width: 180px;
    overflow: hidden;
    color: #26313e;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drc-account-menu-avatar {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e6e9ed;
    border-radius: 50%;
    background: #eef1f4;
}

.drc-account-menu-avatar .drc-topbar-account-avatar,
.drc-account-menu-avatar .userpicture {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    object-fit: cover;
}

.drc-account-menu-toggle > i {
    margin-right: 3px;
    color: #7e8791;
    font-size: 12px;
    transition: transform .16s ease;
}

.drc-account-menu.is-open .drc-account-menu-toggle > i {
    transform: rotate(180deg);
}

.drc-account-dropdown {
    position: absolute;
    z-index: 1105;
    top: calc(100% + 8px);
    right: 0;
    width: 190px;
    padding: 7px;
    border: 1px solid #e2e6ea;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(8, 17, 29, .16);
}

.drc-account-dropdown[hidden] {
    display: none !important;
}

.drc-account-dropdown-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #273240 !important;
    text-decoration: none !important;
    transition: background .14s ease, color .14s ease;
}

.drc-account-dropdown-link > span {
    display: inline-flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #26313d;
    background: #f1f3f5;
    font-size: 12px;
}

.drc-account-dropdown-link strong {
    font-size: 11px;
    font-weight: 760;
}

.drc-account-dropdown-link:hover,
.drc-account-dropdown-link:focus {
    outline: 0;
    color: #101820 !important;
    background: #f5f6f7;
}

.drc-account-dropdown-link:hover > span,
.drc-account-dropdown-link:focus > span {
    background: #fefe0c;
}

.drc-account-dropdown-link.is-logout {
    color: #a12d2d !important;
}

.drc-account-dropdown-link.is-logout > span {
    color: #a12d2d;
    background: #fff0f0;
}

.drc-account-dropdown-link.is-logout:hover,
.drc-account-dropdown-link.is-logout:focus {
    color: #8d2020 !important;
    background: #fff4f4;
}

.drc-account-dropdown-link.is-logout:hover > span,
.drc-account-dropdown-link.is-logout:focus > span {
    color: #8d2020;
    background: #ffe4e4;
}

.drc-account-dropdown-separator {
    height: 1px;
    margin: 5px 4px;
    background: #edf0f2;
}

@media (max-width: 760px) {
    .drc-account-menu-name {
        display: none;
    }

    .drc-account-menu-toggle {
        padding-left: 5px;
    }
}

/* ========================================================================
   0.1.44 - /my dashboard large-desktop density
   Keeps the approved 1080p composition untouched and gives 2K-class
   viewports a roomier vertical rhythm so the dashboard uses the screen.
   ======================================================================== */
@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-dashboard,
    body.drc-dashboard-body .drc-dashboard {
        padding-top: 22px;
        padding-right: 28px;
        padding-bottom: 58px;
        padding-left: 28px;
    }

    #page-my-index .drc-dashboard-layout,
    body.drc-dashboard-body .drc-dashboard-layout {
        grid-template-columns: minmax(0, 1fr) 390px;
        gap: 22px;
    }

    #page-my-index .drc-dashboard-maincol,
    #page-my-index .drc-dashboard-sidecol,
    body.drc-dashboard-body .drc-dashboard-maincol,
    body.drc-dashboard-body .drc-dashboard-sidecol {
        gap: 21px;
    }

    #page-my-index .drc-hero,
    body.drc-dashboard-body .drc-hero {
        min-height: 286px;
        border-radius: 15px;
    }

    #page-my-index .drc-hero-copy,
    body.drc-dashboard-body .drc-hero-copy {
        max-width: 680px;
        padding: 44px 66px;
    }

    #page-my-index .drc-hero h1,
    body.drc-dashboard-body .drc-hero h1 {
        max-width: 620px;
        margin-bottom: 10px;
        font-size: clamp(36px, 2vw, 45px);
    }

    #page-my-index .drc-hero p,
    body.drc-dashboard-body .drc-hero p {
        margin-bottom: 26px;
        font-size: 16px;
    }

    #page-my-index .drc-hero-how,
    body.drc-dashboard-body .drc-hero-how {
        min-height: 44px;
        gap: 11px;
        padding-right: 18px;
        font-size: 13px;
    }

    #page-my-index .drc-hero-how > span,
    body.drc-dashboard-body .drc-hero-how > span {
        width: 35px;
        height: 35px;
    }

    #page-my-index .drc-hero-dots,
    body.drc-dashboard-body .drc-hero-dots {
        right: 32px;
        bottom: 20px;
        gap: 10px;
    }

    #page-my-index .drc-hero-dots button,
    body.drc-dashboard-body .drc-hero-dots button {
        width: 30px;
        height: 5px;
    }

    #page-my-index .drc-metrics,
    body.drc-dashboard-body .drc-metrics {
        gap: 15px;
    }

    #page-my-index .drc-metric-card,
    body.drc-dashboard-body .drc-metric-card {
        min-height: 120px;
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 20px;
        border-radius: 14px;
    }

    #page-my-index .drc-metric-icon,
    body.drc-dashboard-body .drc-metric-icon {
        width: 58px;
        height: 58px;
        font-size: 32px;
    }

    #page-my-index .drc-metric-card strong,
    body.drc-dashboard-body .drc-metric-card strong {
        font-size: 23px;
    }

    #page-my-index .drc-metric-card span:not(.drc-metric-icon),
    body.drc-dashboard-body .drc-metric-card span:not(.drc-metric-icon) {
        margin-top: 5px;
        font-size: 11px;
    }

    #page-my-index .drc-metric-card > small,
    body.drc-dashboard-body .drc-metric-card > small {
        right: 17px;
        bottom: 13px;
        font-size: 10px;
    }

    #page-my-index .drc-section-head,
    body.drc-dashboard-body .drc-section-head {
        margin-bottom: 13px;
    }

    #page-my-index .drc-section-head h2,
    #page-my-index .drc-dark-card h2,
    body.drc-dashboard-body .drc-section-head h2,
    body.drc-dashboard-body .drc-dark-card h2 {
        font-size: 17px;
    }

    #page-my-index .drc-section-head a,
    body.drc-dashboard-body .drc-section-head a {
        font-size: 11px;
    }

    #page-my-index .drc-learning-row,
    body.drc-dashboard-body .drc-learning-row {
        grid-template-columns: minmax(0, 2.05fr) minmax(300px, .95fr);
        gap: 22px;
    }

    #page-my-index .drc-course-grid,
    body.drc-dashboard-body .drc-course-grid {
        gap: 14px;
    }

    #page-my-index .drc-course-card,
    body.drc-dashboard-body .drc-course-card {
        border-radius: 12px;
    }

    #page-my-index .drc-course-image,
    body.drc-dashboard-body .drc-course-image {
        height: 118px;
    }

    #page-my-index .drc-course-card.is-new .drc-course-image,
    body.drc-dashboard-body .drc-course-card.is-new .drc-course-image {
        height: 150px;
    }

    #page-my-index .drc-course-image > i,
    body.drc-dashboard-body .drc-course-image > i {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    #page-my-index .drc-course-progress,
    body.drc-dashboard-body .drc-course-progress {
        gap: 9px;
        margin: 10px 12px 4px;
    }

    #page-my-index .drc-course-progress-track,
    body.drc-dashboard-body .drc-course-progress-track {
        height: 6px;
    }

    #page-my-index .drc-course-progress > b,
    body.drc-dashboard-body .drc-course-progress > b {
        font-size: 10px;
    }

    #page-my-index .drc-course-card > strong,
    body.drc-dashboard-body .drc-course-card > strong {
        min-height: 42px;
        padding: 7px 13px 2px;
        font-size: 12.5px;
    }

    #page-my-index .drc-course-card.is-new > strong,
    body.drc-dashboard-body .drc-course-card.is-new > strong {
        min-height: 45px;
        padding-top: 10px;
    }

    #page-my-index .drc-course-card > small,
    body.drc-dashboard-body .drc-course-card > small {
        padding: 0 13px 12px;
        font-size: 10px;
    }

    #page-my-index .drc-recommended-card,
    #page-my-index .drc-recommended-empty,
    body.drc-dashboard-body .drc-recommended-card,
    body.drc-dashboard-body .drc-recommended-empty {
        min-height: 200px;
        padding: 21px 23px;
        border-radius: 13px;
    }

    #page-my-index .drc-recommended-badge,
    body.drc-dashboard-body .drc-recommended-badge {
        top: 14px;
        left: 15px;
        padding: 6px 9px;
        font-size: 9px;
    }

    #page-my-index .drc-recommended-card > strong,
    body.drc-dashboard-body .drc-recommended-card > strong {
        width: 70%;
        font-size: 20px;
    }

    #page-my-index .drc-recommended-card > small,
    body.drc-dashboard-body .drc-recommended-card > small {
        margin-top: 9px;
        font-size: 10px;
    }

    #page-my-index .drc-round-arrow,
    body.drc-dashboard-body .drc-round-arrow {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    #page-my-index .drc-journey-card,
    body.drc-dashboard-body .drc-journey-card {
        min-height: 205px;
        padding: 22px 24px 19px;
    }

    #page-my-index .drc-rank-row,
    body.drc-dashboard-body .drc-rank-row {
        gap: 20px;
        margin-top: 16px;
    }

    #page-my-index .drc-rank-ring,
    body.drc-dashboard-body .drc-rank-ring {
        width: 104px;
        height: 104px;
        flex-basis: 104px;
    }

    #page-my-index .drc-rank-ring::before,
    body.drc-dashboard-body .drc-rank-ring::before {
        width: 90px;
        height: 90px;
    }

    #page-my-index .drc-rank-ring span,
    body.drc-dashboard-body .drc-rank-ring span {
        font-size: 24px;
    }

    #page-my-index .drc-rank-copy strong,
    body.drc-dashboard-body .drc-rank-copy strong {
        font-size: 14px;
    }

    #page-my-index .drc-rank-copy span,
    body.drc-dashboard-body .drc-rank-copy span {
        font-size: 11px;
    }

    #page-my-index .drc-journey-footer,
    body.drc-dashboard-body .drc-journey-footer {
        margin-top: 11px;
        padding-top: 11px;
    }

    #page-my-index .drc-journey-footer > span,
    body.drc-dashboard-body .drc-journey-footer > span {
        font-size: 9px;
    }

    #page-my-index .drc-journey-footer a,
    body.drc-dashboard-body .drc-journey-footer a {
        font-size: 10px;
    }

    #page-my-index .drc-goals-card,
    body.drc-dashboard-body .drc-goals-card {
        min-height: 300px;
        padding: 21px 24px 18px;
    }

    #page-my-index .drc-goal-row,
    body.drc-dashboard-body .drc-goal-row {
        min-height: 70px;
        gap: 18px;
        padding: 10px 0;
    }

    #page-my-index .drc-goal-row strong,
    body.drc-dashboard-body .drc-goal-row strong {
        font-size: 11.5px;
    }

    #page-my-index .drc-goal-row > div > span,
    body.drc-dashboard-body .drc-goal-row > div > span {
        font-size: 10.5px;
    }

    #page-my-index .drc-goal-ring,
    body.drc-dashboard-body .drc-goal-ring {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    #page-my-index .drc-goal-ring i,
    body.drc-dashboard-body .drc-goal-ring i {
        width: 40px;
        height: 40px;
    }

    #page-my-index .drc-yellow-card,
    body.drc-dashboard-body .drc-yellow-card {
        min-height: 410px;
        padding: 25px 24px 19px;
        border-radius: 15px;
    }

    #page-my-index .drc-route-copy,
    body.drc-dashboard-body .drc-route-copy {
        min-height: 172px;
    }

    #page-my-index .drc-route-copy strong,
    body.drc-dashboard-body .drc-route-copy strong {
        font-size: 23px;
    }

    #page-my-index .drc-route-copy span,
    body.drc-dashboard-body .drc-route-copy span {
        font-size: 12px;
    }

    #page-my-index .drc-route-copy > i,
    body.drc-dashboard-body .drc-route-copy > i {
        right: 18px;
        font-size: 62px;
    }

    #page-my-index .drc-badges-head,
    body.drc-dashboard-body .drc-badges-head {
        margin-bottom: 15px;
    }

    #page-my-index .drc-badges-head h2,
    body.drc-dashboard-body .drc-badges-head h2 {
        font-size: 13px;
    }

    #page-my-index .drc-badges-head a,
    body.drc-dashboard-body .drc-badges-head a {
        font-size: 9px;
    }

    #page-my-index .drc-badge-grid,
    body.drc-dashboard-body .drc-badge-grid {
        gap: 13px 9px;
    }

    #page-my-index .drc-badge-item > span,
    body.drc-dashboard-body .drc-badge-item > span {
        width: 56px;
        height: 56px;
    }

    #page-my-index .drc-badge-item small,
    body.drc-dashboard-body .drc-badge-item small {
        max-width: 82px;
        font-size: 8.5px;
    }
}

/* ========================================================================
   0.1.45 - /my dashboard large-desktop vertical fill refinement
   Second-pass tuning for tall 2K-class desktop viewports. The normal
   desktop composition remains untouched; only the existing large-desktop
   breakpoint is refined so the dashboard finishes closer to the fold.
   ======================================================================== */
@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-dashboard-maincol,
    #page-my-index .drc-dashboard-sidecol,
    body.drc-dashboard-body .drc-dashboard-maincol,
    body.drc-dashboard-body .drc-dashboard-sidecol {
        gap: 24px;
    }

    #page-my-index .drc-hero,
    body.drc-dashboard-body .drc-hero {
        min-height: 330px;
    }

    #page-my-index .drc-hero-copy,
    body.drc-dashboard-body .drc-hero-copy {
        padding-top: 52px;
        padding-bottom: 52px;
    }

    #page-my-index .drc-metric-card,
    body.drc-dashboard-body .drc-metric-card {
        min-height: 138px;
    }

    #page-my-index .drc-course-image,
    body.drc-dashboard-body .drc-course-image {
        height: 142px;
    }

    #page-my-index .drc-course-card.is-new .drc-course-image,
    body.drc-dashboard-body .drc-course-card.is-new .drc-course-image {
        height: 185px;
    }

    #page-my-index .drc-recommended-card,
    #page-my-index .drc-recommended-empty,
    body.drc-dashboard-body .drc-recommended-card,
    body.drc-dashboard-body .drc-recommended-empty {
        min-height: 230px;
    }

    #page-my-index .drc-journey-card,
    body.drc-dashboard-body .drc-journey-card {
        min-height: 235px;
    }

    #page-my-index .drc-goals-card,
    body.drc-dashboard-body .drc-goals-card {
        min-height: 345px;
    }

    #page-my-index .drc-goal-row,
    body.drc-dashboard-body .drc-goal-row {
        min-height: 80px;
    }

    #page-my-index .drc-yellow-card,
    body.drc-dashboard-body .drc-yellow-card {
        min-height: 470px;
    }

    #page-my-index .drc-route-copy,
    body.drc-dashboard-body .drc-route-copy {
        min-height: 198px;
    }
}

/* ========================================================================
   0.1.46 - /my dashboard viewport-responsive large desktop rhythm
   Replaces the last fixed 2K refinement with bounded viewport-height values.
   1080p and smaller desktops are unchanged. On tall desktop viewports the
   approved composition grows progressively, without scaling the whole page.
   ======================================================================== */
@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-dashboard,
    body.drc-dashboard-body .drc-dashboard {
        padding-top: clamp(22px, 1.9vh, 30px);
        padding-bottom: clamp(42px, 3.8vh, 62px);
    }

    #page-my-index .drc-dashboard-maincol,
    #page-my-index .drc-dashboard-sidecol,
    body.drc-dashboard-body .drc-dashboard-maincol,
    body.drc-dashboard-body .drc-dashboard-sidecol {
        gap: clamp(24px, 2.1vh, 34px);
    }

    #page-my-index .drc-hero,
    body.drc-dashboard-body .drc-hero {
        min-height: clamp(330px, 29vh, 500px);
    }

    #page-my-index .drc-hero-copy,
    body.drc-dashboard-body .drc-hero-copy {
        padding-top: clamp(52px, 4.4vh, 72px);
        padding-bottom: clamp(52px, 4.4vh, 72px);
    }

    #page-my-index .drc-metric-card,
    body.drc-dashboard-body .drc-metric-card {
        min-height: clamp(138px, 11.4vh, 180px);
    }

    #page-my-index .drc-course-image,
    body.drc-dashboard-body .drc-course-image {
        height: clamp(142px, 12.7vh, 205px);
    }

    #page-my-index .drc-course-card.is-new .drc-course-image,
    body.drc-dashboard-body .drc-course-card.is-new .drc-course-image {
        height: clamp(185px, 16.3vh, 260px);
    }

    #page-my-index .drc-recommended-card,
    #page-my-index .drc-recommended-empty,
    body.drc-dashboard-body .drc-recommended-card,
    body.drc-dashboard-body .drc-recommended-empty {
        min-height: clamp(230px, 19.4vh, 320px);
    }

    #page-my-index .drc-journey-card,
    body.drc-dashboard-body .drc-journey-card {
        min-height: clamp(235px, 18.8vh, 300px);
    }

    #page-my-index .drc-rank-row,
    body.drc-dashboard-body .drc-rank-row {
        margin-top: clamp(16px, 1.35vh, 22px);
    }

    #page-my-index .drc-rank-ring,
    body.drc-dashboard-body .drc-rank-ring {
        width: clamp(104px, 8.3vh, 124px);
        height: clamp(104px, 8.3vh, 124px);
        flex-basis: clamp(104px, 8.3vh, 124px);
    }

    #page-my-index .drc-rank-ring::before,
    body.drc-dashboard-body .drc-rank-ring::before {
        width: clamp(90px, 7.2vh, 108px);
        height: clamp(90px, 7.2vh, 108px);
    }

    #page-my-index .drc-goals-card,
    body.drc-dashboard-body .drc-goals-card {
        min-height: clamp(345px, 29vh, 440px);
    }

    #page-my-index .drc-goal-row,
    body.drc-dashboard-body .drc-goal-row {
        min-height: clamp(80px, 6.8vh, 100px);
        padding-top: clamp(10px, .9vh, 14px);
        padding-bottom: clamp(10px, .9vh, 14px);
    }

    #page-my-index .drc-yellow-card,
    body.drc-dashboard-body .drc-yellow-card {
        display: flex;
        min-height: clamp(470px, 39.5vh, 620px);
        flex-direction: column;
    }

    #page-my-index .drc-route-copy,
    body.drc-dashboard-body .drc-route-copy {
        min-height: clamp(198px, 16vh, 260px);
    }

    #page-my-index .drc-badges-head,
    body.drc-dashboard-body .drc-badges-head {
        margin-top: auto;
    }
}

/* ========================================================================
   0.1.47 - /my large-desktop viewport fill: prevent tiny page overflow
   The viewport-responsive cards already fit inside the visible dashboard.
   Keep their approved 2K sizing, but do not reserve a large bottom gutter
   after the final row; that gutter alone can push the page past the fold.
   ======================================================================== */
@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-dashboard,
    body.drc-dashboard-body .drc-dashboard {
        padding-bottom: 10px;
    }
}

/* ========================================================================
   0.1.48 - /my large-desktop final fold trim
   Keeps the approved viewport-responsive component sizes intact. Only the
   outer dashboard top/bottom breathing room is reduced by a few pixels so
   a 2K desktop does not create a tiny residual vertical scrollbar.
   ======================================================================== */
@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-dashboard,
    body.drc-dashboard-body .drc-dashboard {
        padding-top: 16px;
        padding-bottom: 0;
    }
}


/* ========================================================================
   0.1.49 - /my continuing courses panel
   Makes the continuing-course area read as an intentional section when
   only one course exists. The panel stays quiet and uses a lightweight
   contextual helper instead of filling the space with placeholder cards.
   ======================================================================== */
#page-my-index .drc-continuing-panel,
body.drc-dashboard-body .drc-continuing-panel {
    position: relative;
    padding: 13px;
    border: 1px solid #e5e9ee;
    border-radius: 15px;
    background: linear-gradient(180deg, #fafbfc 0%, #f6f8fa 100%);
    box-shadow: 0 8px 24px rgba(13, 24, 38, .025);
}

#page-my-index .drc-continuing-panel .drc-section-head,
body.drc-dashboard-body .drc-continuing-panel .drc-section-head {
    margin-bottom: 11px;
}

#page-my-index .drc-continuing-body.is-single,
body.drc-dashboard-body .drc-continuing-body.is-single {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: stretch;
}

#page-my-index .drc-continuing-body.is-single .drc-course-grid-3,
body.drc-dashboard-body .drc-continuing-body.is-single .drc-course-grid-3 {
    grid-template-columns: minmax(0, 1fr);
}

#page-my-index .drc-continuing-helper,
body.drc-dashboard-body .drc-continuing-helper {
    display: flex;
    min-width: 0;
    min-height: 100%;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px dashed #d9dfe6;
    border-radius: 12px;
    background: rgba(255, 255, 255, .68);
    color: #4e5865;
}

#page-my-index .drc-continuing-helper-icon,
body.drc-dashboard-body .drc-continuing-helper-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(254, 225, 0, .18);
    color: #be9500;
    font-size: 13px;
}

#page-my-index .drc-continuing-helper > div,
body.drc-dashboard-body .drc-continuing-helper > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

#page-my-index .drc-continuing-helper strong,
body.drc-dashboard-body .drc-continuing-helper strong {
    color: #222b36;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

#page-my-index .drc-continuing-helper span:not(.drc-continuing-helper-icon),
body.drc-dashboard-body .drc-continuing-helper span:not(.drc-continuing-helper-icon) {
    color: #7a838e;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.45;
}

@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-continuing-panel,
    body.drc-dashboard-body .drc-continuing-panel {
        padding: 17px;
        border-radius: 17px;
    }

    #page-my-index .drc-continuing-body.is-single,
    body.drc-dashboard-body .drc-continuing-body.is-single {
        gap: 16px;
    }

    #page-my-index .drc-continuing-helper,
    body.drc-dashboard-body .drc-continuing-helper {
        gap: 17px;
        padding: 22px 25px;
        border-radius: 14px;
    }

    #page-my-index .drc-continuing-helper-icon,
    body.drc-dashboard-body .drc-continuing-helper-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 16px;
    }

    #page-my-index .drc-continuing-helper strong,
    body.drc-dashboard-body .drc-continuing-helper strong {
        font-size: 13px;
    }

    #page-my-index .drc-continuing-helper span:not(.drc-continuing-helper-icon),
    body.drc-dashboard-body .drc-continuing-helper span:not(.drc-continuing-helper-icon) {
        font-size: 10.5px;
    }
}

@media (max-width: 980px) {
    #page-my-index .drc-continuing-body.is-single,
    body.drc-dashboard-body .drc-continuing-body.is-single {
        grid-template-columns: minmax(0, 1fr);
    }

    #page-my-index .drc-continuing-helper,
    body.drc-dashboard-body .drc-continuing-helper {
        display: none;
    }
}

/* ========================================================================
   0.1.50 - /my continuing panel: zero-layout-height shell
   Keep the approved panel treatment without adding vertical padding to the
   learning row. The shell is painted outside the section box, so large
   desktop viewport-fill sizing remains inside the fold.
   ======================================================================== */
#page-my-index .drc-continuing-panel,
body.drc-dashboard-body .drc-continuing-panel {
    isolation: isolate;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#page-my-index .drc-continuing-panel::before,
body.drc-dashboard-body .drc-continuing-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -7px;
    right: -8px;
    bottom: -7px;
    left: -8px;
    border: 1px solid #e5e9ee;
    border-radius: 15px;
    background: linear-gradient(180deg, #fafbfc 0%, #f6f8fa 100%);
    box-shadow: 0 8px 24px rgba(13, 24, 38, .025);
    pointer-events: none;
}

#page-my-index .drc-continuing-panel .drc-section-head,
body.drc-dashboard-body .drc-continuing-panel .drc-section-head {
    margin-bottom: 10px;
}

@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-continuing-panel,
    body.drc-dashboard-body .drc-continuing-panel {
        padding: 0;
        border-radius: 0;
    }

    #page-my-index .drc-continuing-panel::before,
    body.drc-dashboard-body .drc-continuing-panel::before {
        top: -8px;
        right: -10px;
        bottom: -8px;
        left: -10px;
        border-radius: 17px;
    }

    #page-my-index .drc-continuing-panel .drc-section-head,
    body.drc-dashboard-body .drc-continuing-panel .drc-section-head {
        margin-bottom: 13px;
    }
}

/* ========================================================================
   0.1.52 - /my Hedeflerim large-desktop density refinement
   Keeps the approved 1080p layout untouched. On 2K/tall desktop viewports,
   goal typography is easier to read and the card uses its vertical space
   more efficiently without changing the goal calculation or markup.
   ======================================================================== */
@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-goals-card,
    body.drc-dashboard-body .drc-goals-card {
        min-height: clamp(320px, 25.5vh, 385px);
        padding-top: 22px;
        padding-bottom: 18px;
    }

    #page-my-index .drc-goals-card .drc-card-title-row h2,
    body.drc-dashboard-body .drc-goals-card .drc-card-title-row h2 {
        font-size: 18px;
        line-height: 1.2;
    }

    #page-my-index .drc-goal-row,
    body.drc-dashboard-body .drc-goal-row {
        min-height: clamp(70px, 5.7vh, 82px);
        gap: 16px;
        margin-top: 2px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    #page-my-index .drc-goal-row:first-of-type,
    body.drc-dashboard-body .drc-goal-row:first-of-type {
        margin-top: 7px;
    }

    #page-my-index .drc-goal-row > div,
    body.drc-dashboard-body .drc-goal-row > div {
        gap: 5px;
    }

    #page-my-index .drc-goal-row strong,
    body.drc-dashboard-body .drc-goal-row strong {
        font-size: 13px;
        line-height: 1.28;
    }

    #page-my-index .drc-goal-row > div > span,
    body.drc-dashboard-body .drc-goal-row > div > span {
        font-size: 11.5px;
        line-height: 1.22;
    }

    #page-my-index .drc-goal-ring,
    body.drc-dashboard-body .drc-goal-ring {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    #page-my-index .drc-goal-ring i,
    body.drc-dashboard-body .drc-goal-ring i {
        width: 43px;
        height: 43px;
    }
}

/* ========================================================================
   Public homepage revision 03C - Hedef Kitle / client-reference card system.
   Scope: only "Her seviyeye uygun gelisim yolculuklari".
   ======================================================================== */
.drc-public-home .drc-home-audience-card-wrap {
    position: relative !important;
    overflow: hidden !important;
    padding: 42px 34px 34px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #0b1728 !important;
    color: #fff !important;
    box-shadow: 0 18px 46px rgba(7, 17, 31, .14) !important;
    isolation: isolate;
}

.drc-public-home .drc-home-audience-card-wrap::before {
    display: none !important;
}

.drc-public-home .drc-home-audience-card-wrap::after {
    top: -175px !important;
    right: -130px !important;
    width: 390px !important;
    height: 390px !important;
    border: 1px solid rgba(254, 254, 12, .11) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 58px rgba(255, 255, 255, .012) !important;
    opacity: 1 !important;
}

.drc-public-home .drc-home-audience .drc-home-section-heading {
    position: relative !important;
    z-index: 2 !important;
    max-width: 760px !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
}

.drc-public-home .drc-home-audience .drc-home-section-heading .drc-home-kicker {
    margin-bottom: 9px !important;
    color: #fefe0c !important;
}

.drc-public-home .drc-home-audience .drc-home-section-heading h2 {
    max-width: 650px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(31px, 2.55vw, 43px) !important;
    line-height: 1.08 !important;
}

.drc-public-home .drc-home-audience .drc-home-section-heading h2 span {
    color: #fefe0c !important;
}

.drc-public-home .drc-home-audience .drc-home-section-heading p {
    max-width: 650px !important;
    margin: 12px auto 0 !important;
    color: rgba(255, 255, 255, .68) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.drc-public-home .drc-home-audience-grid {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.drc-public-home .drc-home-audience-grid::before,
.drc-public-home .drc-home-audience-route {
    display: none !important;
}

.drc-public-home .drc-home-audience-grid .drc-home-audience-card,
.drc-public-home .drc-home-audience-grid article.drc-home-audience-card {
    position: relative !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #121c2c !important;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16) !important;
    transform: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.drc-public-home .drc-home-audience-grid .drc-home-audience-card::before,
.drc-public-home .drc-home-audience-grid article.drc-home-audience-card::before {
    display: none !important;
}

.drc-public-home .drc-home-audience-grid .drc-home-audience-card:hover {
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .20) !important;
    transform: translateY(-3px) !important;
}

.drc-public-home .drc-home-audience-photo {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    flex: 0 0 150px !important;
    overflow: hidden !important;
    background: #dfe3e8 !important;
}

.drc-public-home .drc-home-audience-photo::after {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: linear-gradient(180deg, rgba(6, 15, 28, .00) 52%, rgba(6, 15, 28, .22) 100%) !important;
    content: "" !important;
    pointer-events: none !important;
}

.drc-public-home .drc-home-audience-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    filter: saturate(.90) contrast(1.03) !important;
    transition: transform .28s ease, filter .28s ease !important;
}

.drc-public-home .drc-home-audience-card:nth-child(1) .drc-home-audience-photo img { object-position: 50% 42% !important; }
.drc-public-home .drc-home-audience-card:nth-child(2) .drc-home-audience-photo img { object-position: 50% 43% !important; }
.drc-public-home .drc-home-audience-card:nth-child(3) .drc-home-audience-photo img { object-position: 50% 48% !important; }
.drc-public-home .drc-home-audience-card:nth-child(4) .drc-home-audience-photo img { object-position: 50% 45% !important; }
.drc-public-home .drc-home-audience-card:nth-child(5) .drc-home-audience-photo img { object-position: 50% 44% !important; }

.drc-public-home .drc-home-audience-card:hover .drc-home-audience-photo img {
    filter: saturate(1) contrast(1.04) !important;
    transform: scale(1.025) !important;
}

.drc-public-home .drc-home-audience-number {
    position: absolute !important;
    top: 9px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 27px !important;
    height: 20px !important;
    padding: 0 7px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 6px !important;
    background: rgba(8, 20, 36, .80) !important;
    color: #fefe0c !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    transform: none !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.drc-public-home .drc-home-audience-icon {
    position: absolute !important;
    top: 131px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 5px solid #fff !important;
    border-radius: 50% !important;
    background: #fefe0c !important;
    color: #0b1728 !important;
    font-size: 13px !important;
    box-shadow: 0 5px 13px rgba(9, 20, 35, .18) !important;
    transform: translateX(-50%) !important;
}

.drc-public-home .drc-home-audience-icon i {
    margin: 0 !important;
    color: #0b1728 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.drc-public-home .drc-home-audience-card:hover .drc-home-audience-icon {
    box-shadow: 0 6px 15px rgba(9, 20, 35, .20) !important;
    transform: translateX(-50%) !important;
}

.drc-public-home .drc-home-audience-copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    min-height: 150px !important;
    height: auto !important;
    padding: 29px 15px 15px !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #fff !important;
    color: #121c2c !important;
    text-align: center !important;
}

.drc-public-home .drc-home-audience-grid h3,
.drc-public-home .drc-home-audience-copy h3 {
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111a2a !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.drc-public-home .drc-home-audience-copy p {
    min-height: 47px !important;
    margin: 7px 0 10px !important;
    padding: 0 !important;
    color: #6c7480 !important;
    font-size: 10px !important;
    line-height: 1.48 !important;
}

.drc-public-home .drc-home-audience-focus {
    display: inline-flex !important;
    width: auto !important;
    min-height: 0 !important;
    margin: auto 0 0 !important;
    padding: 5px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f1f3f5 !important;
    color: #6e7681 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}

@media (max-width: 1180px) {
    .drc-public-home .drc-home-audience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 780px) {
    .drc-public-home .drc-home-audience-card-wrap {
        padding: 34px 22px 26px !important;
        border-radius: 18px !important;
    }

    .drc-public-home .drc-home-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 540px) {
    .drc-public-home .drc-home-audience-grid {
        grid-template-columns: 1fr !important;
    }

    .drc-public-home .drc-home-audience-photo {
        height: 174px !important;
        min-height: 174px !important;
        flex-basis: 174px !important;
    }

    .drc-public-home .drc-home-audience-icon {
        top: 155px !important;
    }

    .drc-public-home .drc-home-audience-copy {
        min-height: 142px !important;
    }
}


/* ========================================================================
   Public homepage - Hedef Kitle / customer reference structure.
   Isolated class names intentionally avoid the legacy audience card rules.
   ======================================================================== */
.drc-public-landing #hedef-kitle .drc-home-audience-card-wrap {
    padding: 44px 42px 38px;
}

.drc-public-landing #hedef-kitle .drc-home-section-heading {
    max-width: 760px;
    margin-bottom: 28px;
}

.drc-public-landing #hedef-kitle .drc-home-section-heading h2 {
    margin-top: 10px;
    font-size: clamp(32px, 2.35vw, 44px);
    line-height: 1.05;
}

.drc-public-landing #hedef-kitle .drc-home-section-heading p {
    max-width: 690px;
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.65;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-grid::before {
    position: absolute;
    top: -22px;
    left: 10px;
    width: 58px;
    height: 2px;
    border-radius: 999px;
    background: #f0d100;
    content: "";
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(10, 24, 40, .08);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(2, 12, 24, .15);
    transition: transform .2s ease, box-shadow .2s ease;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(2, 12, 24, .20);
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-photo {
    position: relative;
    width: 100%;
    height: 138px;
    overflow: hidden;
    background: #dfe3e6;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.72) contrast(1.02);
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-body {
    position: relative;
    display: flex;
    min-height: 210px;
    padding: 31px 14px 14px;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    color: #131c2b;
    text-align: center;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-icon {
    position: absolute;
    top: -23px;
    left: 50%;
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid #fefe0c;
    border-radius: 50%;
    background: #101a2a;
    color: #fefe0c;
    font-size: 14px;
    box-shadow: 0 0 0 5px #ffffff, 0 7px 15px rgba(4, 15, 29, .22);
    transform: translateX(-50%);
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-icon i {
    margin: 0;
    color: #fefe0c;
    font-size: 14px;
    line-height: 1;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-body h3 {
    min-height: 38px;
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-rule {
    display: block;
    width: 34px;
    height: 2px;
    margin: 8px 0 10px;
    border-radius: 999px;
    background: #f0d100;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-body p {
    min-height: 54px;
    margin: 0;
    color: #616a76;
    font-size: 10px;
    line-height: 1.55;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-tags {
    display: flex;
    min-height: 25px;
    margin-top: auto;
    padding-top: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.drc-public-landing #hedef-kitle .drc-home-audience-ref-tags span {
    display: inline-flex;
    min-height: 20px;
    padding: 4px 8px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f1f3f5;
    color: #656d78;
    font-size: 8px;
    font-weight: 750;
    line-height: 1;
}

@media (max-width: 1180px) {
    .drc-public-landing #hedef-kitle .drc-home-audience-ref-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 780px) {
    .drc-public-landing #hedef-kitle .drc-home-audience-card-wrap {
        padding: 34px 22px 28px;
    }

    .drc-public-landing #hedef-kitle .drc-home-audience-ref-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .drc-public-landing #hedef-kitle .drc-home-audience-ref-grid {
        grid-template-columns: 1fr;
    }

    .drc-public-landing #hedef-kitle .drc-home-audience-ref-photo {
        height: 180px;
    }

    .drc-public-landing #hedef-kitle .drc-home-audience-ref-body {
        min-height: 190px;
    }
}

/* ========================================================================
   Public homepage revision 03E - Hedef Kitle / customer reference fidelity.
   Scope: ONLY #hedef-kitle. The reference structure is intentionally isolated
   from all legacy audience-card rules above.
   ======================================================================== */
.drc-public-home #hedef-kitle .drc-home-audience-card-wrap {
    position: relative !important;
    overflow: hidden !important;
    padding: 44px 32px 38px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 76% 15%, rgba(254, 254, 12, .08) 0 1px, transparent 1.35px) 0 0 / 16px 16px,
        linear-gradient(122deg, #111d27 0%, #0b1728 58%, #102118 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 46px rgba(7, 17, 31, .14) !important;
    isolation: isolate !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-card-wrap::before {
    position: absolute !important;
    top: 194px !important;
    left: 38px !important;
    display: block !important;
    width: 58px !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fefe0c !important;
    box-shadow: none !important;
    content: "" !important;
    opacity: 1 !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-card-wrap::after {
    position: absolute !important;
    top: -178px !important;
    right: -112px !important;
    display: block !important;
    width: 390px !important;
    height: 390px !important;
    border: 1px solid rgba(254, 254, 12, .22) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: 0 0 0 58px rgba(255, 255, 255, .018) !important;
    content: "" !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.drc-public-home #hedef-kitle .drc-home-section-heading {
    position: relative !important;
    z-index: 3 !important;
    max-width: 760px !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
}

.drc-public-home #hedef-kitle .drc-home-section-heading .drc-home-kicker {
    margin: 0 0 8px !important;
    color: #fefe0c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .15em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.drc-public-home #hedef-kitle .drc-home-section-heading h2 {
    max-width: 670px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(32px, 2.4vw, 45px) !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
}

.drc-public-home #hedef-kitle .drc-home-section-heading h2 span {
    color: #fefe0c !important;
}

.drc-public-home #hedef-kitle .drc-home-section-heading p {
    max-width: 670px !important;
    margin: 13px auto 0 !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-grid {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-grid::before,
.drc-public-home #hedef-kitle .drc-home-audience-ref-grid::after {
    display: none !important;
    content: none !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-card {
    position: relative !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: 1px solid rgba(13, 28, 43, .08) !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #101827 !important;
    box-shadow: 0 8px 22px rgba(2, 12, 24, .16) !important;
    text-align: center !important;
    transform: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-card:hover {
    background: #fff !important;
    box-shadow: 0 13px 28px rgba(2, 12, 24, .21) !important;
    transform: translateY(-3px) !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-photo {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 334 / 146 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    background: #dfe3e6 !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-photo::before,
.drc-public-home #hedef-kitle .drc-home-audience-ref-photo::after {
    display: none !important;
    content: none !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none !important;
    transform: none !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-card:hover .drc-home-audience-ref-photo img {
    filter: none !important;
    transform: none !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-body {
    position: relative !important;
    display: flex !important;
    min-height: 214px !important;
    height: auto !important;
    padding: 31px 14px 14px !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    text-align: center !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-icon {
    position: absolute !important;
    top: -25px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(254, 254, 12, .65) !important;
    border-radius: 50% !important;
    background: #0b1627 !important;
    color: #fefe0c !important;
    box-shadow: 0 3px 9px rgba(2, 12, 24, .28) !important;
    transform: translateX(-50%) !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-icon i {
    display: block !important;
    margin: 0 !important;
    color: #fefe0c !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-body h3 {
    display: block !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -.015em !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-rule {
    display: block !important;
    width: 34px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 8px 0 11px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fefe0c !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-body p {
    display: block !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #616a76 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-tags {
    display: flex !important;
    min-height: 24px !important;
    margin: auto 0 0 !important;
    padding: 12px 0 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

.drc-public-home #hedef-kitle .drc-home-audience-ref-tags span {
    display: inline-flex !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f1f3f5 !important;
    color: #606873 !important;
    font-size: 8px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

@media (max-width: 1180px) {
    .drc-public-home #hedef-kitle .drc-home-audience-ref-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 780px) {
    .drc-public-home #hedef-kitle .drc-home-audience-card-wrap {
        padding: 34px 22px 28px !important;
    }
    .drc-public-home #hedef-kitle .drc-home-audience-card-wrap::before {
        display: none !important;
    }
    .drc-public-home #hedef-kitle .drc-home-audience-ref-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 540px) {
    .drc-public-home #hedef-kitle .drc-home-audience-ref-grid {
        grid-template-columns: 1fr !important;
    }
    .drc-public-home #hedef-kitle .drc-home-audience-ref-photo {
        aspect-ratio: 334 / 146 !important;
    }
    .drc-public-home #hedef-kitle .drc-home-audience-ref-body {
        min-height: 195px !important;
    }
}


/* ========================================================================
   2026-08-30 - /my "Rota Sende" card: first 10 leaderboard
   Customer revision: earned badges are replaced by the live gamification
   leaderboard. Existing yellow artwork remains; scoring logic is untouched.
   ======================================================================== */
.drc-route-ranking-card {
    display: flex;
    min-height: 510px;
    flex-direction: column;
}

.drc-route-ranking-card .drc-route-copy {
    min-height: 128px;
    margin-bottom: 8px;
}

.drc-route-ranking-card .drc-route-copy strong {
    max-width: 160px;
    font-size: 22px;
}

.drc-route-ranking-card .drc-route-copy span {
    max-width: 175px;
    margin-top: 5px;
    color: rgba(17, 20, 22, .78);
    font-size: 11px;
    font-weight: 700;
}

.drc-route-ranking-card .drc-route-visual {
    top: -2px;
    right: -14px;
    width: 225px;
    opacity: .88;
}

.drc-route-leaderboard {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.drc-route-leader-row {
    display: grid;
    min-height: 31px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 9px 4px 6px;
    border: 1px solid rgba(52, 45, 6, .07);
    border-radius: 9px;
    background: rgba(255,255,255,.14);
}

.drc-route-leader-row.is-current {
    border-color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.92);
    box-shadow: 0 4px 13px rgba(133, 100, 0, .10);
}

.drc-route-leader-place {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid rgba(65, 54, 5, .15);
    border-radius: 50%;
    color: #3b3309;
    background: rgba(255,255,255,.36);
    font-size: 10px;
    font-weight: 900;
}

.drc-route-leader-row:nth-child(1) .drc-route-leader-place {
    color: #5d4600;
    background: rgba(255,255,255,.75);
    box-shadow: inset 0 0 0 1px rgba(189, 139, 0, .20);
}

.drc-route-leader-name {
    min-width: 0;
    overflow: hidden;
    color: #1b1b13;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drc-route-leader-points {
    color: #15150d;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.drc-route-leader-points small {
    font-size: 7px;
    font-weight: 850;
}

.drc-route-leader-empty {
    position: relative;
    z-index: 3;
    padding: 18px 12px;
    border: 1px dashed rgba(45, 39, 8, .22);
    border-radius: 10px;
    color: rgba(29, 27, 16, .72);
    background: rgba(255,255,255,.14);
    text-align: center;
    font-size: 10px;
    font-weight: 700;
}

.drc-route-ranking-link {
    position: relative;
    z-index: 3;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(170px, 100%);
    margin: 12px auto 0;
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    color: #201d0d !important;
    background: rgba(255,255,255,.12);
    font-size: 9px;
    font-weight: 850;
    transition: background .18s ease, transform .18s ease;
}

.drc-route-ranking-link:hover,
.drc-route-ranking-link:focus {
    color: #201d0d !important;
    background: rgba(255,255,255,.34);
    outline: 0;
    transform: translateY(-1px);
}

@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-route-ranking-card,
    body.drc-dashboard-body .drc-route-ranking-card {
        min-height: clamp(540px, 43vh, 660px);
    }

    #page-my-index .drc-route-ranking-card .drc-route-copy,
    body.drc-dashboard-body .drc-route-ranking-card .drc-route-copy {
        min-height: clamp(150px, 12vh, 190px);
    }

    #page-my-index .drc-route-leader-row,
    body.drc-dashboard-body .drc-route-leader-row {
        min-height: 34px;
    }

    #page-my-index .drc-route-leader-name,
    #page-my-index .drc-route-leader-points,
    body.drc-dashboard-body .drc-route-leader-name,
    body.drc-dashboard-body .drc-route-leader-points {
        font-size: 10.5px;
    }
}

@media (max-width: 1120px) {
    .drc-route-ranking-card {
        min-height: 0;
    }

    .drc-route-ranking-card .drc-route-copy {
        min-height: 120px;
    }
}

@media (max-width: 760px) {
    .drc-route-ranking-card .drc-route-copy {
        min-height: 112px;
    }

    .drc-route-ranking-card .drc-route-visual {
        right: -26px;
        width: 205px;
    }

    .drc-route-leader-row {
        min-height: 36px;
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .drc-route-leader-name,
    .drc-route-leader-points {
        font-size: 11px;
    }
}

/* 2026-08-30 - Rota Sende: move the leaderboard slightly upward. */
.drc-route-ranking-card .drc-route-copy {
    min-height: 112px;
    margin-bottom: 2px;
}

@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-route-ranking-card .drc-route-copy,
    body.drc-dashboard-body .drc-route-ranking-card .drc-route-copy {
        min-height: clamp(132px, 10.5vh, 170px);
    }
}

@media (max-width: 1120px) {
    .drc-route-ranking-card .drc-route-copy {
        min-height: 106px;
    }
}

@media (max-width: 760px) {
    .drc-route-ranking-card .drc-route-copy {
        min-height: 102px;
    }
}

/* 2026-08-30 - Rota Sende: leaderboard a little further upward. */
.drc-route-ranking-card .drc-route-copy {
    min-height: 98px;
    margin-bottom: 0;
}

@media (min-width: 1850px) and (min-height: 1120px) {
    #page-my-index .drc-route-ranking-card .drc-route-copy,
    body.drc-dashboard-body .drc-route-ranking-card .drc-route-copy {
        min-height: clamp(118px, 9.3vh, 152px);
    }
}

@media (max-width: 1120px) {
    .drc-route-ranking-card .drc-route-copy {
        min-height: 94px;
    }
}

@media (max-width: 760px) {
    .drc-route-ranking-card .drc-route-copy {
        min-height: 90px;
    }
}