/* ============================================================
   MCW — Modern Dark Theme
   template.css  |  v2.0
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Open+Sans:wght@300;400;600;700&display=swap');

/* ── Design Tokens (dark default) ── */
:root {
    --bg:             #0f0f14;
    --bg-card:        #16161e;
    --bg-elevated:    #1e1e28;
    --bg-hover:       #252532;
    --accent:         #f24462;
    --accent-hover:   #d6324f;
    --text:           #e8e8f0;
    --text-secondary: #8888a0;
    --text-dim:       #48485e;
    --border:         rgba(255, 255, 255, 0.07);
    --border-accent:  rgba(242, 68, 98, 0.35);
    --glass-bg:       rgba(15, 15, 20, 0.80);
    --glass-blur:     blur(18px);
    --transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --radius:         12px;
    --radius-sm:      8px;
    --shadow:         0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.30);
    --header-height:  64px;
}

/* ── Light mode overrides ── */
[data-theme="light"] {
    --bg:             #f4f4f8;
    --bg-card:        #ffffff;
    --bg-elevated:    #ececf4;
    --bg-hover:       #e4e4ee;
    --accent:         #f24462;
    --accent-hover:   #d6324f;
    --text:           #18181f;
    --text-secondary: #555568;
    --text-dim:       #9898b0;
    --border:         rgba(0, 0, 0, 0.08);
    --glass-bg:       rgba(244, 244, 248, 0.85);
}

/* ── Reset / Base ── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-card);
}
::-webkit-scrollbar-thumb {
    background: var(--text-dim);
    border-radius: 99px;
    transition: background var(--transition);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ============================================================
   HEADER — .mcw-header
   ============================================================ */

.mcw-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--transition), background var(--transition);
}

.mcw-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    background: rgba(15, 15, 20, 0.95);
}

/* Navbar */
.mcw-header .navbar {
    min-height: var(--header-height);
    padding-top: 0;
    padding-bottom: 0;
}

.mcw-header .navbar .container-fluid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Brand / Logo */
.mcw-header .navbar-brand {
    padding: 0;
    margin-right: 28px;
    flex-shrink: 0;
}

.mcw-header .navbar-brand img {
    height: 38px;
    width: auto;
    display: block;
}

/* Nav links (center) */
.mcw-header .navbar-nav .nav-link {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.mcw-header .navbar-nav .nav-link:hover,
.mcw-header .navbar-nav .nav-link:focus {
    color: var(--text);
    background: var(--bg-elevated);
}

.mcw-header .navbar-nav .nav-link.active {
    color: var(--accent);
    background: rgba(242, 68, 98, 0.08);
}

/* ── Nav Actions (right side) ── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Social icon strip */
.nav-actions .social-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 6px;
}

.nav-actions .nav-link-icon,
.nav-actions .social-icons .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--text-dim);
    font-size: 15px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    text-decoration: none;
}

.nav-actions .nav-link-icon:hover,
.nav-actions .social-icons .nav-link-icon:hover {
    color: var(--text);
    background: var(--bg-elevated);
}

/* Cart icon (standalone) */
.nav-actions > .nav-link-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: var(--text-secondary);
}

.nav-actions > .nav-link-icon:hover {
    color: var(--accent);
    background: rgba(242, 68, 98, 0.10);
}

/* Mobile cart icon */
.cart-icon-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    font-size: 17px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color var(--transition);
}
.cart-icon-mobile:hover { color: var(--accent); }

/* ── Pill Buttons ── */
.btn-nav-primary {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 99px;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.btn-nav-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.btn-nav-outline {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 99px;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    white-space: nowrap;
}
.btn-nav-outline:hover {
    color: var(--text);
    border-color: var(--text-secondary);
    background: var(--bg-elevated);
}

/* ── User Menu Button ── */
.btn-user-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-user-menu:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: rgba(255,255,255,0.14);
}
.btn-user-menu .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ── Dropdown Menu (header) ── */
.mcw-header .dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px;
    min-width: 180px;
    margin-top: 8px !important;
}

.mcw-header .dropdown-item {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
    display: block;
}
.mcw-header .dropdown-item:hover,
.mcw-header .dropdown-item:focus {
    color: var(--text);
    background: var(--bg-hover);
}

/* ── Navbar Toggler (custom dark) ── */
.mcw-header .navbar-toggler {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--text-secondary);
    background: transparent;
    transition: background var(--transition), border-color var(--transition);
}
.mcw-header .navbar-toggler:hover {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.14);
}
.mcw-header .navbar-toggler:focus {
    box-shadow: none;
}
.mcw-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232%2C232%2C240%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 22px;
    height: 22px;
}

/* Collapsed nav mobile */
.mcw-header .navbar-collapse {
    padding-bottom: 12px;
}

@media (min-width: 992px) {
    .mcw-header .navbar-collapse {
        padding-bottom: 0;
    }
}

/* ============================================================
   MEGA MENU
   ============================================================ */

/* Trigger chevron */
.mega-chevron {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.55;
    transition: transform var(--transition), opacity var(--transition);
}

@media (min-width: 992px) {
    .nav-item.has-mega:hover .mega-chevron {
        transform: rotate(180deg);
        opacity: 1;
    }
}

/* Mega panel */
.mega-menu {
    display: none;
}

@media (min-width: 992px) {
    .nav-item.has-mega {
        position: relative;
    }

    .mega-menu {
        display: block;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        width: 360px;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
        padding: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
        z-index: 2000;
    }

    .nav-item.has-mega:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Invisible bridge fills the gap so hover doesn't break mid-travel */
    .mega-menu::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }
}

/* Course cards inside mega */
.mega-course-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition);
    margin-bottom: 2px;
}

.mega-course-card:hover {
    background: var(--bg-hover);
}

.mega-course-thumb {
    width: 60px;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-hover);
}

.mega-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega-course-meta {
    flex: 1;
    min-width: 0;
}

.mega-course-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mega-course-price {
    display: block;
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 3px;
}

/* "Tüm Eğitimler" button */
.mega-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    margin-top: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

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

.mega-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* ============================================================
   HERO SLIDER — .mcw-hero
   ============================================================ */

.mcw-hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    line-height: 0; /* kill inline-block gap */
}

/* Shared slide shell */
.hero-slide {
    position: relative;
    display: block;
    width: 100%;
    height: 520px;
    overflow: hidden;
    text-decoration: none;
}

.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Secondary slider is slightly shorter */
.mcw-hero--secondary .hero-slide {
    height: 560px;
}

/* ── Text overlay (instructor slides) ── */
.hero-text {
    position: absolute;
    inset: 0 55% 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 48px 52px 64px;
    z-index: 2;
    line-height: 1.5;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: 0;
}

.hero-title {
    font-size: clamp(20px, 2.2vw, 34px);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 14px;
    opacity: 0;
}

.hero-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    line-height: 1.65;
    margin: 0 0 26px;
    opacity: 0;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    opacity: 0;
}

/* Animated entrance per active slide */
.carousel-item.active .hero-eyebrow { animation: heroIn 0.65s 0.05s ease both; }
.carousel-item.active .hero-title   { animation: heroIn 0.65s 0.18s ease both; }
.carousel-item.active .hero-desc    { animation: heroIn 0.65s 0.30s ease both; }
.carousel-item.active .hero-cta     { animation: heroIn 0.65s 0.42s ease both; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── CTA Buttons ── */
.hero-btn-accent {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 99px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    white-space: nowrap;
}
.hero-btn-accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.10);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 99px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
}
.hero-btn-ghost:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}

/* ── Navigation Arrows ── */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.hero-arrow:hover {
    background: var(--accent);
    border-color: transparent;
    transform: translateY(-50%) scale(1.10);
}
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow--prev { left: 18px; }
.hero-arrow--next { right: 18px; }

/* ── Line dot indicators (carousel-indicators override) ── */
.mcw-hero .carousel-indicators.hero-dots {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.mcw-hero .carousel-indicators.hero-dots button {
    width: 24px;
    height: 3px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.30);
    border: none;
    border-top: none;
    border-bottom: none;
    cursor: pointer;
    padding: 0;
    opacity: 1;
    flex: none;
    text-indent: 0;
    transition: background 0.3s ease, width 0.3s ease;
}

.mcw-hero .carousel-indicators.hero-dots button.active {
    background: var(--accent);
    width: 42px;
    opacity: 1;
}

/* ── Progress bar ── */
.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    z-index: 20;
}
.hero-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .hero-slide { height: 230px; }
    .mcw-hero--secondary .hero-slide { height: 260px; }
    .hero-text { display: none; }
    .hero-arrow { width: 34px; height: 34px; }
    .hero-arrow svg { width: 16px; height: 16px; }
    .hero-arrow--prev { left: 10px; }
    .hero-arrow--next { right: 10px; }
    .hero-dots { bottom: 14px; }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .hero-slide { height: 380px; }
    .mcw-hero--secondary .hero-slide { height: 460px; }
    .hero-text {
        padding: 32px 28px 32px 40px;
        inset: 0 52% 0 0;
    }
    .hero-title { font-size: 22px; }
}

/* ============================================================
   SLIDERS (legacy — kept for any other pages using old IDs)
   ============================================================ */

/* Desktop Slider */
#header-slider .carousel {
    padding-right: 0;
    padding-left: 0;
}

#header-slider .carousel-caption {
    text-align: left;
    bottom: 0;
    top: 100px;
    left: 15%;
}

#header-slider .carousel-caption h5 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 25px;
    text-shadow: 3px 3px 4px #000;
    margin-bottom: 5px;
}

#header-slider .carousel-caption h4 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 38px;
    padding-bottom: 15px;
    text-shadow: 3px 3px 4px #000;
    animation: 0.6s slideRight 0.6s forwards;
    transform: translateX(-100%);
}

/* slideRight keyframe */
@keyframes slideRight {
    to { transform: translateX(0); }
}

/* Legacy alias kept for older views */
@keyframes slide-right {
    to { transform: translateX(0); }
}

#header-slider .carousel-caption h6 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-shadow: 2px 2px 3px #000;
    padding-bottom: 15px;
}

#header-slider .carousel-caption h6 span { font-weight: 400; }

#header-slider .carousel-caption h3 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-shadow: 2px 2px 3px #000;
    padding-bottom: 15px;
}

/* fadeUp keyframe (used by caption paragraphs / subtitles) */
@keyframes fadeUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

#header-slider .carousel-caption a.btn-primary {
    position: relative;
    background-color: transparent !important;
    border-color: #ffffff;
    margin-right: 30px;
    font-size: 16px;
    opacity: 0;
    animation: 0.6s slide-button-1 0.6s forwards;
    transform: translateY(100%);
}

@keyframes slide-button-1 {
    0%   { opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

#header-slider .carousel-caption a.btn-secondary,
#header-slider .carousel-caption button.btn-secondary {
    position: relative;
    background-color: var(--accent) !important;
    border-color: var(--accent);
    font-size: 16px;
    opacity: 0;
    animation: 0.6s slide-button-2 0.6s forwards;
    transform: translateY(100%);
}

@keyframes slide-button-2 {
    0%   { opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

#header-slider .carousel-caption.slider-img-caption {
    text-align: left;
    bottom: 25px;
    top: auto;
    left: 25%;
}

/* Mobile Slider */
#header-mobile-slider .slider-line { width: 60%; }

#header-mobile-slider .carousel {
    padding-right: 0;
    padding-left: 0;
}

#header-mobile-slider .carousel-caption {
    text-align: left;
    bottom: 0;
    top: 0;
    left: 15%;
}

#header-mobile-slider .carousel-caption h5 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 12px;
    text-shadow: 3px 3px 4px #000;
    margin-bottom: 0;
}

#header-mobile-slider .carousel-caption h4 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding-bottom: 0;
    text-shadow: 3px 3px 4px #000;
    animation: 0.6s slide-mobile-right 0.6s forwards;
    transform: translateX(-100%);
}

@keyframes slide-mobile-right {
    to { transform: translateX(0); }
}

#header-mobile-slider .carousel-caption h6 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-shadow: 2px 2px 3px #000;
    padding-bottom: 0;
}
#header-mobile-slider .carousel-caption h6 span { font-weight: 400; }

#header-mobile-slider .carousel-caption h3 {
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-shadow: 2px 2px 3px #000;
    padding-bottom: 0;
}

#header-mobile-slider .carousel-caption a.btn-primary {
    position: relative;
    background-color: transparent !important;
    border-color: #ffffff;
    margin-right: 15px;
    font-size: 10px;
    opacity: 0;
    animation: 0.6s slide-mobile-button-1 0.6s forwards;
    transform: translateY(100%);
}

@keyframes slide-mobile-button-1 {
    0%   { opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

#header-mobile-slider .carousel-caption a.btn-secondary,
#header-mobile-slider .carousel-caption button.btn-secondary {
    position: relative;
    background-color: var(--accent) !important;
    border-color: var(--accent);
    font-size: 10px;
    opacity: 0;
    animation: 0.6s slide-mobile-button-2 0.6s forwards;
    transform: translateY(100%);
}

@keyframes slide-mobile-button-2 {
    0%   { opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

#header-mobile-slider .carousel-caption.slider-img-caption {
    text-align: left;
    bottom: -25px;
    top: auto;
    left: 15%;
}

/* ============================================================
   SECTION TITLES — .row-title  (sitewide)
   ============================================================ */

/* Hide the old standalone hr lines — needs !important to beat Bootstrap d-sm-block */
.row-line {
    display: none !important;
}

.row-title {
    padding: 32px 24px 28px;
    text-align: center;
}

.row-title h1 {
    display: inline-block;
    position: relative;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0;
    padding-bottom: 14px;
}

/* Accent underline */
.row-title h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    background: var(--accent);
    border-radius: 99px;
}

/* ============================================================
   PAGE HEADER — iç sayfa başlığı
   ============================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 52px 120px 44px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* Sol accent çizgisi */
.page-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.page-header__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.page-header__title {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 200;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}

.page-header__sub {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 300;
    margin: 0;
    letter-spacing: 0.3px;
}

/* Sağ: kurs sayısı */
.page-header__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 28px;
    background: var(--bg-elevated);
    gap: 2px;
}

.page-header__count-num {
    font-size: 36px;
    font-weight: 200;
    color: var(--accent);
    line-height: 1;
}

.page-header__count-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* all-courses-wrap: homepage'e göre biraz daha dar üst boşluk */
.all-courses-wrap {
    padding-top: 40px;
}

/* Course thumbnail badge */
.elite-course__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(5,5,15,0.82);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

@media (max-width: 991px) {
    .page-header { padding: 36px 28px; flex-direction: column; align-items: flex-start; }
    .page-header__title { font-size: 22px; letter-spacing: 3px; }
    .page-header__count { flex-direction: row; gap: 10px; padding: 12px 20px; }
}

/* ============================================================
   SLOGANS
   ============================================================ */

.slogan {
    position: relative;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 50%, var(--bg-card) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
    overflow: clip;
}

/* Decorative faded quote mark */
.slogan::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 220px;
    font-family: 'Caveat', cursive;
    color: rgba(242, 68, 98, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.slogan .row {
    height: 110px;
    padding: 8px 0;
}

.slogan .row h4 {
    margin-bottom: 0;
    padding: 0 24px;
    font-size: 52px;
    font-family: 'Caveat', cursive;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.slogan .row h4 span {
    background: linear-gradient(90deg,
        #c4304e 0%,
        var(--accent) 30%,
        #ffb8c8 50%,
        var(--accent) 70%,
        #c4304e 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sloganShimmer 3s ease-in-out infinite alternate;
    display: inline;
}

.slogan .row h4 span.slogan-excl {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--accent) !important;
    animation: none !important;
}

@keyframes sloganShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 100% center; }
}

.slogan-mobile {
    margin-bottom: 0;
    margin-top: 15px;
}

.slogan-mobile .row h4 {
    margin-bottom: 0;
    font-size: 24px;
    font-family: 'Caveat', cursive;
    color: var(--text-secondary);
}

.slogan-mobile .row h4 span {
    color: var(--accent);
}

/* ============================================================
   INSTRUCTOR CARDS — .basic-carousel
   ============================================================ */

.main-content {
    position: relative;
}

.main-content .basic-carousel {
    padding-left: 80px;
    padding-right: 80px;
}

/* Card shell */
.main-content .basic-carousel .item .card {
    border: none;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.main-content .basic-carousel .item .card:hover {
    transform: translateY(-6px);
}

/* Image wrapper — adds gradient overlay */
.main-content .basic-carousel .item .card a {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.main-content .basic-carousel .item .card a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.10) 45%,
        transparent 70%
    );
    border-radius: 16px;
    transition: opacity 0.3s ease;
}

.main-content .basic-carousel .item .card:hover a::after {
    opacity: 0.7;
}

.main-content .basic-carousel .item .card .card-img-top {
    width: 100%;
    aspect-ratio: 3 / 5;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: 16px;
    transition: transform 0.4s ease;
}

.main-content .basic-carousel .item .card:hover .card-img-top {
    transform: scale(1.04);
}

/* Card body — slim label strip */
.main-content .basic-carousel .item .card .card-body {
    background: transparent;
    padding: 10px 4px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hide the old hr */
.main-content .basic-carousel .item .card .card-body hr {
    display: none;
}

/* Accent dot */
.main-content .basic-carousel .item .card .card-body::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.main-content .basic-carousel .item .card .card-body p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.main-content .basic-carousel .item .card .card-body p a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--transition);
}

.main-content .basic-carousel .item .card .card-body p a:hover {
    color: var(--accent);
}

/* ── Owl Carousel nav arrows ── */
.main-content .owl-theme .custom-nav {
    position: absolute;
    top: 42%;
    left: 0;
    right: 0;
    pointer-events: none;
}

.main-content .owl-theme .custom-nav .owl-prev,
.main-content .owl-theme .custom-nav .owl-next {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: transparent !important;
    border: 2px solid transparent !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    padding: 0 !important;
    transition: border-color var(--transition), transform var(--transition);
    outline: none !important;
    box-shadow: none !important;
    z-index: 100;
}

/* Image fills the button — no gap for pink to bleed through */
.main-content .owl-theme .custom-nav .owl-prev img,
.main-content .owl-theme .custom-nav .owl-next img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    pointer-events: none;
}

.main-content .owl-theme .custom-nav .owl-prev:hover,
.main-content .owl-theme .custom-nav .owl-next:hover {
    background: transparent !important;
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: none !important;
    transform: scale(1.05);
}

/* focus: reset everything — border only on pure hover */
.main-content .owl-theme .custom-nav .owl-prev:focus,
.main-content .owl-theme .custom-nav .owl-next:focus,
.main-content .owl-theme .custom-nav .owl-prev:focus-visible,
.main-content .owl-theme .custom-nav .owl-next:focus-visible,
.main-content .owl-theme .custom-nav .owl-prev:focus:not(:hover),
.main-content .owl-theme .custom-nav .owl-next:focus:not(:hover) {
    background: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none;
}

.main-content .owl-theme .custom-nav .owl-prev i,
.main-content .owl-theme .custom-nav .owl-next i {
    font-size: 1.2rem;
    color: #fff;
}

.main-content .owl-theme .custom-nav .owl-prev { left: 20px; }
.main-content .owl-theme .custom-nav .owl-next { right: 20px; }

/* Owl dots */
.owl-theme .owl-dots .owl-dot span {
    background: var(--text-dim);
    transition: background var(--transition), width var(--transition);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--accent);
}

/* Owl nav arrows (generic) */
.owl-theme .owl-nav [class*='owl-'] {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.owl-theme .owl-nav [class*='owl-']:hover {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   COURSES — desktop card
   ============================================================ */

/* ============================================================
   ELITE COURSE CARD — premium horizontal banner
   ============================================================ */

.elite-course-wrap {
    padding: 0 120px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.elite-course {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    min-height: 360px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.elite-course:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border-color: var(--border-accent);
    transform: translateY(-3px);
}

/* Left: image */
.elite-course__visual {
    position: relative;
    width: 55%;
    flex-shrink: 0;
    overflow: hidden;
}

.elite-course__visual a {
    display: block;
    height: 100%;
}

.elite-course__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.elite-course:hover .elite-course__visual img {
    transform: scale(1.03);
}

/* Gradient fade from image into info panel */
.elite-course__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, var(--bg-card) 100%);
    pointer-events: none;
}

/* Video variant */
/* ============================================================
   TEASER CARD — full-bleed 16:9 video + right panel overlay
   Her ekranda siyah bar olmaz, responsive tamamen güvenilir
   ============================================================ */

.teaser-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    max-height: 520px; /* Geniş ekranda aşırı yükselmesini önler */
}

.teaser-card:hover {
    box-shadow: 0 24px 64px rgba(0,0,0,0.45);
    border-color: var(--border-accent);
}

/* Video — padding-top: 56.25% → garanti 16:9, her ekranda aynı */
.teaser-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #000;
}

.teaser-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease, opacity 0.4s ease;
}

.teaser-card:hover .teaser-thumb {
    transform: scale(1.03);
}

/* Full-card gradient: solda hafif dark, sağda panel için erken ve geniş fade */
.teaser-player::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.04) 32%,
        rgba(5,5,15,0.30) 46%,
        rgba(5,5,15,0.62) 56%,
        rgba(5,5,15,0.88) 68%,
        rgba(5,5,15,0.97) 82%,
        rgba(5,5,15,0.97) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Video oynarken thumbnail gradient kaldır, panel kendi bg'ini taşıyor */
.teaser-player.is-playing::after { opacity: 0; }
.teaser-player.is-playing .teaser-thumb { opacity: 0; pointer-events: none; }

.teaser-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
    z-index: 2;
}

.teaser-player.is-playing .teaser-iframe { opacity: 1; }

/* Play button — card child, top:50% = card görünür yüksekliğinin tam ortası */
.teaser-play-btn {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,0.52);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.28s ease, background 0.28s ease, opacity 0.35s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 0 0 1.5px rgba(255,255,255,0.22);
}

/* Animasyonlu dış halka */
.teaser-play-btn__ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.30);
    transition: inset 0.28s ease, opacity 0.28s ease, border-color 0.28s ease;
}

.teaser-play-btn svg {
    width: 28px;
    height: 28px;
    margin-left: 3px; /* play üçgeni optik ortalama */
    flex-shrink: 0;
}

.teaser-card:hover .teaser-play-btn {
    background: var(--accent);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.teaser-card:hover .teaser-play-btn__ring {
    inset: -10px;
    border-color: rgba(242,68,98,0.5);
}

/* Video başlayınca butonu gizle */
.teaser-card.is-playing .teaser-play-btn { opacity: 0; pointer-events: none; }

/* Info panel — sağ tarafta absolute overlay, kendi dark bg ile her zaman okunur */
.teaser-card__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
    z-index: 4;
    gap: 0;
    /* Video oynarken de okunabilir — daha geniş soldan fade */
    background: linear-gradient(to right,
        transparent 0%,
        rgba(5,5,15,0.55) 22%,
        rgba(5,5,15,0.88) 45%,
        rgba(5,5,15,0.97) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.teaser-card__panel .elite-course__instructor-label { margin-bottom: 5px; }
.teaser-card__panel .elite-course__instructor-name  { margin-bottom: 4px; font-size: 22px; }
.teaser-card__panel .elite-course__instructor-title { margin-bottom: 14px; font-size: 14px; }
.teaser-card__panel .elite-course__divider          { margin-bottom: 14px; }
.teaser-card__panel .elite-course__title            { margin-bottom: 8px; font-size: 17px; line-height: 1.4; }
.teaser-card__panel .elite-course__meta             { margin-bottom: 12px; font-size: 13px; }
.teaser-card__panel .elite-course__features         { margin-bottom: 16px; gap: 6px 18px; flex-direction: row; flex-wrap: wrap; }
.teaser-card__panel .elite-course__features li      { font-size: 13px; }
.teaser-card__panel .elite-course__price            { margin-bottom: 20px; }
.teaser-card__panel .elite-course__price-current    { font-size: 28px; }

@media (max-width: 991px) {
    .teaser-card__panel { width: 55%; padding: 28px 32px; }
    .teaser-play-btn { left: 22%; width: 68px; height: 68px; }
}

@media (max-width: 575px) {
    .teaser-card { max-height: none; } /* Mobilde height kısıtlama yok, panel aşağıda */
    .teaser-card__panel { position: relative; width: 100%; top: unset; right: unset; bottom: unset; background: var(--bg-card); padding: 24px; backdrop-filter: none; }
    .teaser-play-btn { left: 50%; width: 64px; height: 64px; }
    .teaser-player::after { background: rgba(0,0,0,0.3); }
}

/* Right: info panel */
.elite-course__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 48px 44px 40px;
    gap: 0;
}

.elite-course__instructor-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.elite-course__instructor-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 6px;
}

.elite-course__instructor-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.elite-course__divider {
    width: 36px;
    height: 2px;
    background: var(--accent);
    border-radius: 99px;
    margin-bottom: 20px;
}

.elite-course__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 12px;
}

.elite-course__meta {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.elite-course__features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.elite-course__features li {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.elite-course__features li i {
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
}

.elite-course__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 28px;
}

.elite-course__price-old {
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: line-through;
}

.elite-course__price-current {
    font-size: 30px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.01em;
}

.elite-course__actions {
    display: flex;
    gap: 14px;
    align-items: center;
}

.elite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.elite-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text);
}

.elite-btn--ghost:hover {
    border-color: var(--text-secondary);
    color: var(--text);
    transform: translateY(-1px);
}

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

.elite-btn--accent:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

@media (max-width: 991px) {
    .elite-course-wrap { padding: 0 24px 40px; }
    .elite-course { flex-direction: column; min-height: unset; }
    .elite-course__visual { width: 100%; height: 220px; }
    .elite-course__visual::after { background: linear-gradient(to bottom, transparent 60%, var(--bg-card) 100%); }
    .elite-course__panel { padding: 28px 24px; }
}

@media (max-width: 575px) {
    .elite-course-wrap { padding: 0 12px 32px; }
    .elite-course__visual { height: 180px; }
    .elite-course__instructor-name { font-size: 18px; }
    .elite-course__price-current { font-size: 24px; }
    .elite-btn { padding: 10px 20px; font-size: 11px; }
}

/* ============================================================
   INFO BANNERS
   ============================================================ */

/* ── CTA Strip (#info-1 yeni tasarım) ── */
.cta-strip {
    position: relative;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 36px 0;
    overflow: hidden;
}

/* Sol accent çizgisi */
.cta-strip::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
}

/* Sol pembe ışıma */
.cta-strip::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 45%;
    background: linear-gradient(to right, rgba(242,68,98,0.07) 0%, transparent 100%);
    pointer-events: none;
}

.cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 32px 72px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-strip__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 7px;
}

.cta-strip__text {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
    color: var(--text);
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.cta-strip__btn {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1.8px;
}

.cta-strip__btn svg {
    transition: transform 0.25s ease;
}

.cta-strip__btn:hover svg {
    transform: translateX(4px);
}

/* ── Discover Banner (#info-2) ── */
.discover-banner {
    position: relative;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 30px 0 0;
    overflow: hidden;
}

/* Sol accent çizgisi */
.discover-banner::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

/* Sol pembe wash */
.discover-banner::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 50%;
    background: linear-gradient(to right, rgba(242,68,98,0.05) 0%, transparent 100%);
    pointer-events: none;
}

.discover-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 72px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    gap: 40px;
}

.discover-banner__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.discover-banner__title {
    font-size: 28px;
    font-weight: 300;
    color: var(--text);
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.discover-banner__sub {
    font-size: 16px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Sağ dekoratif element */
.discover-banner__deco {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    opacity: 0.25;
}

.discover-banner__deco-line {
    width: 60px;
    height: 1px;
    background: var(--text-muted);
}

.discover-banner__deco-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.8;
}

/* #info-3 artık .cta-strip — eski kurallar kaldırıldı */

#info-4 {
    background-color: var(--accent);
}
#info-4 .row { height: 100px; }
#info-4 h1 {
    margin-bottom: 0;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: bold;
    color: #ffffff;
    font-size: 32px;
}
#info-4 h1 span { font-weight: 400; }

#info-5 {
    background-color: var(--accent);
    padding-bottom: 15px;
}
#info-5 .card {
    background-color: var(--bg-card);
    height: 130px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
#info-5 h1 { font-family: 'Inter', 'Montserrat', sans-serif; font-size: 30px; }

/* ============================================================
   BUSINESS SECTION
   ============================================================ */

/* ── Business Hero ── */
.business-hero {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 30px;
}

.business-hero__bg {
    position: absolute;
    inset: 0;
}

.business-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Sol koyu → sağ şeffaf gradient */
.business-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(5,5,15,0.97) 0%,
        rgba(5,5,15,0.90) 30%,
        rgba(5,5,15,0.60) 55%,
        rgba(5,5,15,0.15) 78%,
        transparent 100%
    );
}

.business-hero__content {
    position: relative;
    z-index: 2;
    padding: 72px 80px;
    max-width: 620px;
}

.business-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.business-hero__divider {
    width: 36px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 20px;
}

.business-hero__title {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 200;
    color: var(--text);
    letter-spacing: 1px;
    line-height: 1.25;
    margin-bottom: 16px;
}

.business-hero__desc {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 36px;
    line-height: 1.65;
    max-width: 480px;
}

.business-hero__highlight {
    color: var(--accent);
    font-weight: 700;
}

.business-hero__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Mobil */
@media (max-width: 768px) {
    .business-hero { min-height: 420px; }
    .business-hero__content { padding: 48px 28px; max-width: 100%; }
    .business-hero__title { font-size: 26px; }
    .business-hero__desc  { font-size: 15px; }
    .business-hero__overlay {
        background: linear-gradient(
            to bottom,
            rgba(5,5,15,0.85) 0%,
            rgba(5,5,15,0.70) 100%
        );
    }
}

/* ============================================================
   LOGOS / REFERANS SECTION
   ============================================================ */

.logos-section {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 36px 0 40px;
    margin: 0;
    overflow: hidden;
}

.logos-section__header {
    text-align: center;
    margin-bottom: 28px;
}

.logos-section__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-muted);
    text-transform: uppercase;
    position: relative;
    padding: 0 20px;
}

/* Sol/sağ yatay çizgi — label'ın iki yanında */
.logos-section__label::before,
.logos-section__label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background: var(--border);
}
.logos-section__label::before { right: 100%; }
.logos-section__label::after  { left: 100%; }

/* Track wrapper — maskeleme için position:relative */
.logos-section__track-wrap {
    position: relative;
}

/* Sol & Sağ gradient fade — sonsuz carousel hissi */
.logos-section__fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.logos-section__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--bg-elevated) 0%, transparent 100%);
}
.logos-section__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--bg-elevated) 0%, transparent 100%);
}

/* Slick carousel */
.customer-logos {
    overflow: hidden;
    padding: 8px 0;
}
.customer-logos .slick-slide {
    margin: 0 5px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.customer-logos .slick-track {
    display: flex;
    align-items: center;
}

/* Logolar: greyscale + düşük opaklık → hover'da orijinal renk */
.customer-logos img {
    max-height: 72px;
    width: auto !important;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.85);
    opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease;
    display: block;
}

.customer-logos .slick-slide:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* ============================================================
   ACCORDION
   ============================================================ */

#accordion {
    margin-top: 36px;
    margin-bottom: 56px;
    padding-left: 120px;
    padding-right: 120px;
}

ul.accordion {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion .accordion-item {
    border-radius: var(--radius-sm);
    display: block;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.accordion .accordion-item:hover {
    border-left-color: var(--border-accent);
    background-color: var(--bg-elevated);
}

.accordion .accordion-item.is-open {
    border-left-color: var(--accent);
    background-color: var(--bg-elevated);
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* Title row */
.accordion .accordion-title {
    padding: 20px 24px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.25s ease;
    cursor: pointer;
}

.accordion .accordion-title:hover { color: var(--accent); }
.accordion .accordion-item.is-open .accordion-title { color: var(--text); }

/* Sıra numarası */
.accordion-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
    width: 24px;
    transition: opacity 0.25s ease;
}

.accordion .accordion-item.is-open .accordion-num,
.accordion .accordion-item:hover .accordion-num {
    opacity: 1;
}

/* Soru metni */
.accordion-question {
    flex: 1;
}

/* Chevron ikonu */
.accordion-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-dim);
    transition: transform 0.3s ease, color 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-icon svg {
    width: 18px;
    height: 18px;
}

.accordion .accordion-item.is-open .accordion-icon {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Content */
.accordion .accordion-content {
    display: none;
    padding: 0 24px 24px calc(24px + 18px + 24px); /* sol: padding + gap + num width */
    background-color: transparent;
}

.accordion .accordion-content p {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 0;
    line-height: 1.8;
    border-left: 1px solid var(--border);
    padding-left: 16px;
}

.accordion .accordion-content.show { display: block; }

/* ============================================================
   FOOTER — .mcw-footer
   ============================================================ */

.mcw-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding-top: 56px;
    padding-bottom: 0;
    color: var(--text-secondary);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 14px;
}

/* Brand */
.footer-brand-link { display: inline-block; margin-bottom: 14px; }
.footer-logo { width: 130px; opacity: 0.88; }

.footer-tagline {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Column title */
.footer-col-title {
    color: var(--text);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 20px; height: 2px;
    background: var(--accent);
}

/* Footer link lists */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: var(--accent);
    padding-left: 4px;
}

/* Social icon row — brand kolonunda yatay */
.footer-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-3px);
}

/* Newsletter desc */
.footer-newsletter-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Newsletter */
.footer-newsletter {
    margin-top: 0;
}

.footer-newsletter .input-group {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.footer-newsletter .form-control {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text);
    font-size: 13px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.footer-newsletter .form-control::placeholder { color: var(--text-dim); }

.footer-newsletter .form-control:focus {
    background-color: var(--bg-hover);
    border-color: var(--accent);
    box-shadow: none;
    color: var(--text);
}

.footer-newsletter .btn {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    height: 40px;
    padding: 0 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background var(--transition);
}

.footer-newsletter .btn:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Store badges */
.footer-store-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.footer-store-badges img {
    height: 36px;
    width: auto;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.footer-store-badges img:hover { opacity: 1; }

/* Footer bottom bar */
.footer-bottom {
    margin-top: 40px;
    border-top: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-dim);
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--transition);
}
.footer-bottom a:hover { color: var(--accent); }

/* Iyzico */
.footer-iyzico {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    text-align: center;
    background: var(--bg-card);
}

.footer-iyzico img {
    opacity: 0.55;
    filter: brightness(0.7);
    transition: opacity var(--transition);
    max-height: 40px;
}

.footer-iyzico img:hover { opacity: 0.9; }

/* Legacy footer selectors kept for compatibility */
#footer .col-lg-2 h6 {
    color: var(--text-secondary);
    margin-top: 20px;
}

#footer .col-lg-10 .row .col-lg-3 ul li {
    background-color: transparent;
    border: none;
}

#footer .col-lg-10 .row .col-lg-3 ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition);
}

#footer .col-lg-10 .row .col-lg-3 ul li a:hover {
    color: var(--text);
}

#footer .col-lg-10 .row .col-lg-3:nth-child(1) ul,
#footer .col-lg-10 .row .col-lg-3:nth-child(2) ul,
#footer .col-lg-10 .row .col-lg-3:nth-child(3) ul,
#footer .col-lg-10 .row .col-lg-3:nth-child(4) ul {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
}

#footer .col-lg-10 .row .col-lg-3:nth-child(1) ul li:first-child a,
#footer .col-lg-10 .row .col-lg-3:nth-child(2) ul li:first-child a,
#footer .col-lg-10 .row .col-lg-3:nth-child(3) ul li:first-child a,
#footer .col-lg-10 .row .col-lg-3:nth-child(4) ul li:nth-child(1) a {
    color: var(--text);
    font-weight: 600;
}

#footer .col-lg-10 .row .col-lg-3:nth-child(4) ul li:nth-child(3) input {
    background-color: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 13px;
}

#footer .col-lg-10 .row .col-lg-3:nth-child(4) ul li:nth-child(3) button {
    background-color: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    font-size: 13px;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}

.modal-header .modal-title {
    color: var(--text);
    font-weight: 600;
    font-size: 16px;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.5;
    transition: opacity var(--transition);
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 12px 20px;
}

/* ============================================================
   FORM CONTROLS — global dark
   ============================================================ */

.form-control,
.form-select {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.form-control::placeholder { color: var(--text-dim); }

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: none;
}

.form-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* ============================================================
   GENERAL / UTILITY
   ============================================================ */

/* Deals section */
#deals .row {
    margin-top: 10px;
    margin-bottom: 0;
}

#deals .row .col-lg-4 img { width: 260px; }

#deals .row .col-lg-4:nth-child(2) {
    border-right: 2px solid var(--border);
    border-left: 2px solid var(--border);
}

/* Old header selectors kept for legacy pages */
header.site-desktop {
    margin-bottom: 10px;
    padding-top: 10px;
}
header.site-desktop .container-fluid {
    padding-left: 68px;
    padding-right: 68px;
}
#header-top { border-bottom: 2px solid var(--border); padding-bottom: 10px; }
#header-social { margin-bottom: 10px; }
#header-social ul { padding-left: 130px; }
#header-social ul li { padding-right: 15px; list-style: none; }
#header-social ul li a img { width: 35px; }
#header-top-menu { margin-bottom: 10px; }
#header-top-menu a {
    color: var(--text);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
}
#header-top-menu .header-top-menu-item {
    display: inline;
    position: relative;
    overflow: hidden;
}
#header-top-menu .header-top-menu-item:hover::after { left: 0; right: 0; width: 100%; }
#header-top-menu .header-top-menu-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    width: 0;
    bottom: -2px;
    background: var(--accent);
    height: 2px;
    transition: width 0.5s ease-out;
}
#header-bottom { margin-top: 10px; }
#header-bottom-menu-icon { border-right: 2px solid var(--border); }
#header-bottom-menu-icon a img { width: 25px; }
#header-bottom-menu ul { padding-left: 30px; }
#header-bottom-menu ul li { list-style: none; padding-right: 15px; color: var(--text-secondary); }
#header-bottom-menu ul li a {
    color: var(--text);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
}
#header-bottom-slogan {
    font-family: 'Caveat', cursive;
    padding-right: 40px;
}
#header-bottom-slogan h1 { color: var(--text); font-size: 32px; }
#header-bottom-slogan h1 span { color: var(--accent); }
#header-bottom-search { border-left: 2px solid var(--border); padding-left: 30px; }
#header-bottom-search a {
    color: var(--text);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
}

/* ============================================================
   LOGIN / REGISTER / ORDER FORMS  (kept functional)
   ============================================================ */

#login .col-lg-6:nth-child(1) {
    background-color: var(--bg-card);
    padding-left: 140px;
    padding-right: 140px;
}
#login .col-lg-6:nth-child(1) h4 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 18px;
    color: var(--text);
}
#login .col-lg-6:nth-child(1) h3 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: 30px;
    font-size: 18px;
    color: var(--text-secondary);
}
#login .col-lg-6:nth-child(1) .form-label {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
#login .col-lg-6:nth-child(1) input[type=email],
#login .col-lg-6:nth-child(1) input[type=password],
#login .col-lg-6:nth-child(1) input[type=text],
#login .col-lg-6:nth-child(1) input[type=tel] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    background-color: var(--bg-elevated);
    border-color: var(--border);
    border-radius: var(--radius-sm);
    height: 50px;
    color: var(--text);
}
#login .col-lg-6:nth-child(1) .gap-2 { margin-bottom: 35px; margin-top: 35px; }
#login .col-lg-6:nth-child(1) .gap-2 button {
    border-color: #e17d26;
    background-color: #e17d26;
    border-radius: var(--radius-sm);
    height: 50px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
}
#login .col-lg-6:nth-child(1) h5 {
    color: var(--text-secondary);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 35px;
}
#login .col-lg-6:nth-child(1) h5 a { color: #e17d26; text-decoration: none; }
#login .col-lg-6:nth-child(1) ul { margin-bottom: 15px; display: flex; flex-direction: row; }
#login .col-lg-6:nth-child(1) ul li { border: none; }
#login .col-lg-6:nth-child(1) h6 {
    color: var(--text-dim);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 300;
}
#login .col-lg-6:nth-child(2) {
    border-left: 4px solid var(--border);
    padding-right: 0;
    padding-left: 0;
    background-image: url('../img/login-img.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Order register */
#order-register { background-color: var(--bg-card); }
#order-register .col-lg-6:nth-child(1) {
    background-color: var(--bg-card);
    padding-left: 140px;
    padding-right: 140px;
}
#order-register .col-lg-6:nth-child(1) input[type=email],
#order-register .col-lg-6:nth-child(1) input[type=password],
#order-register .col-lg-6:nth-child(1) input[type=text],
#order-register .col-lg-6:nth-child(1) input[type=tel] {
    background-color: var(--bg-elevated);
    border-color: var(--border);
    border-radius: var(--radius-sm);
    height: 50px;
    color: var(--text);
}
#order-register .col-lg-6:nth-child(2) {
    border-left: 4px solid var(--border);
    padding-right: 0; padding-left: 0;
    background-image: url('../img/login-img.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============================================================
   HELP / FAQ
   ============================================================ */

.form-test {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    color: var(--text);
    border-color: var(--border);
    background: transparent;
}
.form-test::placeholder { color: var(--text-secondary); opacity: 1; }
.form-test:focus {
    border-color: var(--accent);
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--text);
    background: transparent;
}

#help-section {
    background-color: var(--bg-card);
    padding-top: 45px;
    padding-bottom: 45px;
}
#help-section-info { padding-left: 150px; padding-right: 150px; }
#help-section-info h2,
#help-section-info h4 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--text);
}
#help-section-form {
    padding-left: 150px;
    padding-right: 150px;
    margin-top: 45px;
}
#help-section-form .row:nth-child(1),
#help-section-form .row:nth-child(2) { margin-bottom: 45px; }
#help-section-form .row:nth-child(3) { margin-bottom: 45px; }
#help-section-form .row:nth-child(4) button {
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
}

/* ============================================================
   BASKET
   ============================================================ */

.basket {
    background-color: var(--bg-card);
    padding-left: 168px;
    padding-right: 168px;
    padding-top: 30px;
}
.basket .row:nth-child(1) { padding-bottom: 30px; }
.basket .row:nth-child(1) .basket-left .card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.basket .row:nth-child(1) .basket-left .card .card-body { padding: 30px; }
.basket .row:nth-child(1) .basket-left .card .card-body table thead tr th {
    border-color: var(--border);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 14px;
}
.basket .row:nth-child(1) .basket-left .card .card-body table thead tr th:nth-child(1) {
    width: 50%;
    padding-left: 30px;
}
.basket .row:nth-child(1) .basket-left .card .card-body table thead tr th:nth-child(2),
.basket .row:nth-child(1) .basket-left .card .card-body table thead tr th:nth-child(3) {
    width: 25%;
}
.basket .row:nth-child(1) .basket-left .card .card-body table tbody tr .basket-title {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 30px;
    font-size: 16px;
    color: var(--text);
}
.basket .row:nth-child(1) .basket-left .card .card-body table tbody tr .basket-title button {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 300;
    color: var(--text-secondary);
    font-size: 13px;
    background-color: transparent !important;
    border: none;
}
.basket .row:nth-child(1) .basket-left .card .card-body table tbody tr .basket-quantity {
    padding: 30px;
    color: var(--text-secondary);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
}
.basket .row:nth-child(1) .basket-left .card .card-body table tbody tr .basket-price {
    padding: 30px;
    color: var(--accent);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.basket .row:nth-child(1) .basket-left .card .card-body table tbody tr .basket-price span:nth-child(1) {
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: line-through;
    font-weight: 500;
}
.basket .row:nth-child(1) .basket-right .card {
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.basket .row:nth-child(1) .basket-right .card .card-body { padding: 30px; }
.basket .row:nth-child(1) .basket-right .card .card-body h6 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    padding-top: 10px; padding-bottom: 10px;
    color: var(--text);
}
.basket .row:nth-child(1) .basket-right .card .card-body h5 {
    padding-top: 10px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
}
.basket .row:nth-child(1) .basket-right .card .card-body .row-one { padding: 4px 0; }
.basket .row:nth-child(1) .basket-right .card .card-body .row-one .one {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 16px;
}
.basket .row:nth-child(1) .basket-right .card .card-body .row-one .two {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 18px;
}
.basket .row:nth-child(1) .basket-right .card .card-body .row-three div {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--accent);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 3px;
}
.basket .row:nth-child(1) .basket-right .card .card-body .row-four a,
.basket .row:nth-child(1) .basket-right .card .card-body .row-four form button {
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    color: #fff;
}
.basket .row:nth-child(1) .basket-right .card .card-body .row-four form div {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.basket-v2-title {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 5px;
    font-size: 16px;
    color: var(--text);
}
.basket-v2-price {
    padding: 5px;
    color: var(--accent);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.basket-v2-old-price {
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: line-through;
    font-weight: 500;
}
.basket-v2-price-desc {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ============================================================
   COURSE DETAIL
   ============================================================ */

.lessons::-webkit-scrollbar { width: 6px; }
.lessons::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 10px; }
.lessons::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--accent); }

#course-detail { margin-top: 30px; margin-bottom: 30px; }
#course-detail .row .course-content iframe { height: 515px; }
#course-detail .row .course-content p {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--text);
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#course-detail .row .course-content p button {
    font-size: 18px;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
}
#course-detail-list h4 {
    color: var(--text);
    font-family: 'Inter', 'Montserrat', sans-serif;
}
#course-detail-list .lessons { overflow: auto; height: 600px; }
#course-detail-blog { margin-bottom: 30px; }
#course-detail-blog .row #course-detail-blog-detail h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--text);
    margin-top: 15px;
    margin-bottom: 15px;
}
#course-detail-blog .row #course-detail-blog-detail .card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
#course-certificate h2 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: var(--text);
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Course detail slider */
#course-detail-slider .row { position: relative; }
#course-detail-slider .row .col-12 { padding-right: 0; padding-left: 0; }
#course-detail-slider .row .col-12 .slider-title {
    position: absolute;
    bottom: 60px;
}
#course-detail-slider .row .col-12 .slider-title h4 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    padding-bottom: 10px;
    text-shadow: 3px 3px 4px #000;
}
#course-detail-slider .row .col-12 .slider-title h6 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-shadow: 2px 2px 3px #000;
    padding-bottom: 20px;
}
#course-detail-slider .row .col-12 .detail-button { position: absolute; bottom: 20px; }
#course-detail-slider .row .col-12 .detail-button form button,
#course-detail-slider .row .col-12 .detail-button form a {
    width: 250px;
    font-size: 20px;
    font-weight: bold;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    color: #fff;
}

/* ============================================================
   CONTACT
   ============================================================ */

#contact .card {
    background-color: var(--bg-card);
    border-color: var(--border);
    border-radius: var(--radius);
}
#contact .card .card-body .row .icon { padding-right: 0; }
#contact .card .card-body .row .content p {
    color: var(--text-secondary);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 0;
}
#contact #map { margin-top: 15px; }

/* ============================================================
   TABS
   ============================================================ */

.nav-tabs .nav-link {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    border-color: var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--transition), background var(--transition);
}
.nav-tabs .nav-link.active {
    background-color: var(--bg-hover);
    color: var(--text);
    border-color: var(--border);
    border-bottom-color: var(--bg-hover);
}
.tab-pane {
    background-color: var(--bg-elevated);
    padding: 45px 95px;
    color: var(--text);
}
.tab-pane.show { background-color: var(--bg-hover); }

/* ============================================================
   SLICK (reference logos) — keep all existing
   ============================================================ */

.slick-slide { margin: 0 20px; }
.slick-slide img { width: 100%; }
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }

/* ============================================================
   ADS
   ============================================================ */

#ads { margin-top: 15px; }
#ads .col-lg-12 { padding-bottom: 60px; }
#ads #logo { width: 180px; }
#ads .col-lg-8:nth-child(1) { background-color: var(--bg-card); }
#ads .col-lg-8:nth-child(1) h4 { font-family: 'Inter', 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 20px; font-size: 30px; color: var(--text); }
#ads .col-lg-8:nth-child(1) input[type=email],
#ads .col-lg-8:nth-child(1) input[type=password],
#ads .col-lg-8:nth-child(1) input[type=text] {
    background-color: var(--bg-elevated);
    border-radius: var(--radius);
    border-color: var(--border);
    height: 50px;
    color: var(--text);
}
#ads .col-lg-8:nth-child(1) .button { margin-bottom: 35px; margin-top: 35px; }
#ads .col-lg-8:nth-child(1) .button button {
    border-color: #e25367;
    background-color: #e25367;
    border-radius: var(--radius-sm);
    height: 50px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
}

/* Business form */
#business-form { background-color: var(--bg-card); margin-top: 60px; margin-bottom: 60px; }
#business-form .col-lg-6:nth-child(1) {
    background-image: url('../img/form-img.jpg');
    height: 875px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#business-form .col-lg-6:nth-child(2) { padding-left: 100px; padding-right: 100px; }
#business-form .col-lg-6:nth-child(2) .form-label {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-secondary);
}
#business-form .col-lg-6:nth-child(2) h6 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 11px;
    margin-bottom: 30px;
    margin-top: 45px;
    color: var(--text-secondary);
}
#business-form .col-lg-6:nth-child(2) h6 a { font-weight: bold; color: var(--text); }
#business-form .col-lg-6:nth-child(2) input[type=email],
#business-form .col-lg-6:nth-child(2) input[type=password],
#business-form .col-lg-6:nth-child(2) input[type=text] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    height: 45px;
    border-width: 2px;
}
#business-form .col-lg-6:nth-child(2) button {
    border-color: #e17d26;
    background-color: #e17d26;
    border-radius: 0;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 15px;
}

/* Business banners */
#b-banner-1 .row { position: relative; }
#b-banner-1 .row div:nth-child(1) { padding-right: 0; padding-left: 0; }
#b-banner-1 .row div:nth-child(2) { position: absolute; bottom: 100px; }
#b-banner-1 .row div:nth-child(2) a.business-home {
    width: 250px;
    font-size: 20px;
    font-weight: bold;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    color: #fff;
}
#b-banner-2 { margin-top: 30px; margin-bottom: 30px; }
#b-banner-2 .row div a.business-home {
    width: 250px;
    font-size: 20px;
    font-weight: bold;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    color: #fff;
}
#b-banner-3 .row:nth-child(1) div h1 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: bold;
    color: var(--text);
}
#b-banner-3 .row:nth-child(2) div:nth-child(1) p:nth-child(1) {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 24px;
}
#b-banner-3 .row:nth-child(2) div:nth-child(1) p:nth-child(2) a.business-home {
    width: 250px;
    font-size: 20px;
    font-weight: bold;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    margin-right: 30px;
    color: #fff;
}
#b-banner-mobile-3 .row h1 {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: bold;
    color: var(--text);
    font-size: 16px;
}
#b-banner-mobile-3 .row p {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}
#b-banner-mobile-3 .row a.business-home {
    width: 200px;
    font-size: 12px;
    font-weight: bold;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   RESPONSIVE — < 992px
   ============================================================ */

@media (max-width: 991.98px) {

    .mcw-header .navbar .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nav-actions {
        flex-wrap: wrap;
        padding: 8px 0;
        gap: 8px;
    }

    .btn-nav-primary,
    .btn-nav-outline {
        font-size: 13px;
        padding: 7px 14px;
    }

    .main-content .basic-carousel {
        padding-left: 60px;
        padding-right: 60px;
    }


    .row-line {
        padding-left: 24px;
        padding-right: 24px;
    }

    #accordion {
        padding-left: 24px;
        padding-right: 24px;
    }

    #help-section-info {
        padding-left: 24px;
        padding-right: 24px;
    }

    #help-section-form {
        padding-left: 24px;
        padding-right: 24px;
    }

    .basket {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* #business eski kurallar kaldırıldı — .business-hero kullanıyor */

    .mcw-footer .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   RESPONSIVE — < 768px
   ============================================================ */

@media (max-width: 767.98px) {

    .row-title {
        padding: 24px 16px 20px;
    }

    .row-title h1 {
        font-size: 17px;
    }

    .slogan .row h4 { font-size: 30px; }
    .slogan .row { height: 25px; }

    .main-content .basic-carousel {
        padding-left: 40px;
        padding-right: 40px;
    }

    .main-content .owl-theme .custom-nav .owl-next { right: 4px; }
    .main-content .owl-theme .custom-nav .owl-prev { left: 4px; }


    /* cta-strip mobil */
    .cta-strip__inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 28px 28px 36px; }
    .cta-strip__text { font-size: 16px; }
    .cta-strip__btn { width: 100%; justify-content: center; }
    /* discover-banner mobil */
    .discover-banner__inner { flex-direction: column; padding: 32px 28px 32px 36px; gap: 24px; }
    .discover-banner__title { font-size: 20px; letter-spacing: 2px; }
    .discover-banner__deco  { display: none; }

    #info-4 .row { height: 50px; }
    #info-4 h1 { font-size: 16px; }

    #info-5 .card { height: 60px; margin-bottom: 8px; }
    #info-5 h1 { font-size: 16px; }
    #info-5 h1 span:nth-child(1) { font-size: 18px; }

    /* #business eski mobil kurallar kaldırıldı */

    #accordion {
        margin-top: 0;
        margin-bottom: 24px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .accordion .accordion-title { font-size: 14px; gap: 12px; padding: 16px 16px; }
    .accordion-num { width: 18px; font-size: 10px; }
    .accordion .accordion-content { padding: 0 16px 20px 46px; }

    #login .col-lg-6:nth-child(1) {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 25px;
    }
    #login .col-lg-6:nth-child(1) h4 { font-size: 16px; margin-bottom: 10px; }
    #login .col-lg-6:nth-child(1) h3 { font-size: 16px; margin-bottom: 15px; }
    #login .col-lg-6:nth-child(1) .form-label { font-size: 16px; }
    #login .col-lg-6:nth-child(1) input[type=email],
    #login .col-lg-6:nth-child(1) input[type=password],
    #login .col-lg-6:nth-child(1) input[type=text],
    #login .col-lg-6:nth-child(1) input[type=tel] { height: 40px; }
    #login .col-lg-6:nth-child(1) .gap-2 { margin-bottom: 30px; margin-top: 30px; }
    #login .col-lg-6:nth-child(1) .gap-2 button { font-size: 16px; height: 40px; }
    #login .col-lg-6:nth-child(1) h5 { margin-bottom: 25px; }

    .basket {
        padding-left: 15px;
        padding-right: 15px;
    }
    .basket .row:nth-child(1) { padding-bottom: 15px; }
    .basket .row:nth-child(1) .basket-left .card .card-body { padding: 5px; }
    .basket .row:nth-child(1) .basket-left .card { box-shadow: none; border: none; background-color: transparent; }
    .basket .row:nth-child(1) .basket-right .card { box-shadow: none; border: none; background: transparent; }
    .basket .row:nth-child(1) .basket-right .card .card-body { padding: 0 50px; }
    .basket-v2-title,
    .basket-v2-price,
    .basket-v2-delete { text-align: center; }

    .teacher-slider-left,
    .teacher-slider-right { width: 40px; }

    #course-detail .row .course-content iframe { height: 250px; }
    #course-detail .row .course-content p { font-size: 14px; margin-top: 0; }
    #course-detail .row .course-content p button { font-size: 14px; }
    #course-detail-slider .row .col-12 .detail-button { bottom: 8px; }
    #course-detail-slider .row .col-12 .detail-button form button,
    #course-detail-slider .row .col-12 .detail-button form a {
        width: 130px;
        font-size: 12px;
        padding: 4px 10px;
        box-shadow: rgba(0,0,0,0.15) 1.95px 1.95px 2.6px;
    }
    #course-detail-slider .row .col-12 .slider-title { bottom: 28px; }
    #course-detail-slider .row .col-12 .slider-title h4 { font-weight: 500; font-size: 18px; }
    #course-detail-blog .row #course-detail-blog-detail .card .card-body h5 { font-size: 16px; }
    #course-detail-blog .row #course-detail-blog-detail .card .card-body p { font-size: 14px; }

    #help-section-info { padding-left: 25px; padding-right: 25px; }
    #help-section-info h2 { font-size: 14px; font-weight: 600; }
    #help-section-info h4 { font-size: 14px; }
    #help-section-form { margin-top: 20px; padding-left: 25px; padding-right: 25px; }
    #help-section-form .row:nth-child(1),
    #help-section-form .row:nth-child(2) { margin-bottom: 0; }
    #help-section-form .row:nth-child(3) { margin-bottom: 25px; }
    #help-section-form .row:nth-child(4) button { font-size: 14px; }

    #contact .card .card-body .row .content p { font-size: 14px; }
    #contact .card .card-body .row .icon img { width: 35px; }

    #business-form .col-lg-6:nth-child(1) { background-image: none; height: auto; }
    #business-form .col-lg-6:nth-child(2) { padding: 50px; }

    #b-banner-1 .row div:nth-child(2) { bottom: 8px; }
    #b-banner-1 .row div:nth-child(2) a.business-home { width: 200px; font-size: 12px; }
    #b-banner-2 { margin-bottom: 0; }
    #b-banner-3 .row:nth-child(1) div h1 { font-size: 16px; }
    #b-banner-3 .row:nth-child(2) div:nth-child(1) p:nth-child(1) { font-size: 14px; text-align: center; }
    #b-banner-3 .row:nth-child(2) div:nth-child(1) { padding-top: 0; }
    #b-banner-3 .row:nth-child(2) div:nth-child(1) p:nth-child(2) { padding-top: 20px; }

    .tab-pane { padding: 24px 16px; }

    .mcw-footer .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════
   CONTACT / İLETİŞİM PAGE
   ═══════════════════════════════════════════════════ */

.contact-section {
    padding: 60px 120px 80px;
}

/* ── Three info cards ── */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition);
}

.contact-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.contact-card:hover {
    border-color: var(--border-accent);
    background: var(--bg-elevated);
}

.contact-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.contact-card__icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent);
}

.contact-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.contact-card__value {
    font-size: 14px;
    color: var(--text);
    line-height: 1.65;
}

/* ── Map ── */
.contact-map {
    margin-bottom: 48px;
}

.contact-map__frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    height: 480px;
    position: relative;
}

/* ── Support CTA strip ── */
.contact-support-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 36px 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.contact-support-cta__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.contact-support-cta__title {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 6px;
}

.contact-support-cta__desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.7;
    max-width: 560px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .contact-section { padding: 48px 48px 64px; }
}

@media (max-width: 768px) {
    .contact-cards { grid-template-columns: 1fr; }
    .contact-support-cta { flex-direction: column; align-items: flex-start; }
    .contact-map__frame { height: 340px; }
}

@media (max-width: 640px) {
    .contact-section { padding: 32px 20px 48px; }
}

/* ═══════════════════════════════════════════════════
   HELP / YARDIM PAGE
   ═══════════════════════════════════════════════════ */

/* ── Outer wrapper ── */
.help-section {
    padding: 60px 120px;
    border-bottom: 1px solid var(--border);
}

/* ── Two-column grid ── */
.help-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

/* ══ FORM CARD ══ */
.help-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 52px;
    position: relative;
    overflow: hidden;
}

.help-form-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.help-form-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.help-form-card__title {
    font-size: 22px;
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--text);
}

.help-form-card__desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 36px;
}

/* ── Form Layout ── */
.help-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.help-form__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.help-form__field--full {
    margin-bottom: 16px;
}

.help-form__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.help-form__input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    padding: 11px 14px;
    transition: border-color var(--transition), background var(--transition);
    outline: none;
    width: 100%;
    font-family: var(--font);
}

.help-form__input::placeholder {
    color: var(--text-dim);
}

.help-form__input:focus {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.help-form__select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

.help-form__textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.help-form__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.help-form__phone-hint {
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.5px;
}

/* ══ INFO PANEL ══ */
.help-info-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 36px;
    position: sticky;
    top: 100px;
}

.help-info-panel__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.help-info-panel__title {
    font-size: 20px;
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 32px;
    color: var(--text);
}

/* ── Contact list ── */
.help-contact-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.help-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.help-contact-item__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-contact-item__icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
}

.help-contact-item__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.help-contact-item__value {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

.help-info-divider {
    height: 1px;
    background: var(--border);
    margin: 32px 0;
}

/* ── Response time badge ── */
.help-response-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.help-response-info__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-response-info__icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-dim);
}

.help-response-info__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 3px;
}

.help-response-info__value {
    font-size: 13px;
    color: var(--text);
}

/* ══ FAQ SECTION ══ */
.help-faq-section {
    /* uses page-header for its own header */
}

.help-accordion-wrap {
    padding: 48px 120px 64px;
    max-width: 100%;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 1100px) {
    .help-section { padding: 48px 48px; }
    .help-accordion-wrap { padding: 40px 48px 56px; }
}

@media (max-width: 900px) {
    .help-grid {
        grid-template-columns: 1fr;
    }
    .help-info-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .help-section { padding: 32px 20px; }
    .help-accordion-wrap { padding: 28px 20px 40px; }
    .help-form-card { padding: 28px 20px; }
    .help-form__row { grid-template-columns: 1fr; }
    .help-info-panel { padding: 28px 20px; }
}

/* ═══════════════════════════════════════════════════
   AUTH — LOGIN / REGISTER
   ═══════════════════════════════════════════════════ */

/* ── Sayfa wrapper: full-height split ── */
.auth-page {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-height: calc(100vh - 62px);
}

/* ══ SOL: Marka Paneli ══ */
.auth-brand {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 52px;
}

.auth-brand__deco {
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid var(--border-accent);
    opacity: 0.4;
    pointer-events: none;
}

.auth-brand__deco::before {
    content: '';
    position: absolute;
    inset: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-accent);
}

.auth-brand__logo-img {
    height: 36px;
    width: auto;
    margin-bottom: 28px;
    object-fit: contain;
    object-position: left;
}

.auth-brand__tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 28px;
}

.auth-brand__divider {
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 32px;
    opacity: 0.6;
}

.auth-brand__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-brand__features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}

.auth-brand__feat-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(242, 68, 98, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-brand__feat-icon svg {
    width: 12px;
    height: 12px;
    stroke: var(--accent);
}

/* ══ SAĞ: Form Paneli ══ */
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    background: var(--bg);
}

.auth-form-wrap {
    width: 100%;
    max-width: 480px;
}

/* ── Tab switcher ── */
.auth-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 36px;
    width: fit-content;
}

.auth-tab {
    padding: 9px 24px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    border-radius: calc(var(--radius-sm) - 2px);
    transition: background var(--transition), color var(--transition);
}

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

.auth-tab--active {
    background: var(--accent);
    color: #fff;
}

.auth-tab--active:hover {
    color: #fff;
}

/* ── Form header ── */
.auth-form-header {
    margin-bottom: 32px;
}

.auth-form-header__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.auth-form-header__title {
    font-size: 26px;
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.2;
}

.auth-form-header__desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.7;
    margin: 0;
}

/* ── Alert ── */
.auth-alert {
    background: rgba(242,68,98,0.08);
    border: 1px solid rgba(242,68,98,0.25);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ── Form fields ── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.auth-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    padding: 12px 14px;
    width: 100%;
    outline: none;
    transition: border-color var(--transition), background var(--transition);
    font-family: var(--font);
    height: 46px;
}

.auth-input::placeholder {
    color: var(--text-dim);
}

.auth-input:focus {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.auth-input--error {
    border-color: var(--accent);
}

.auth-error {
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.3px;
}

/* ── Form meta (forgot link) ── */
.auth-form-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.auth-forgot {
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--transition);
}

.auth-forgot:hover {
    color: var(--accent);
}

/* ── Submit button ── */
.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    margin-top: 4px;
    font-family: var(--font);
}

.auth-submit svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition);
}

.auth-submit:hover {
    background: var(--accent-hover);
}

.auth-submit:hover svg {
    transform: translateX(3px);
}

/* ── Bottom switch text ── */
.auth-switch {
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 20px;
    line-height: 1.6;
}

.auth-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-brand {
        display: none;
    }
    .auth-form-side {
        padding: 48px 24px;
    }
}

@media (max-width: 480px) {
    .auth-field-row {
        grid-template-columns: 1fr;
    }
    .auth-form-side {
        padding: 32px 16px;
    }
}

/* ═══════════════════════════════════════════════════
   BASKET / SEPETİM PAGE
   ═══════════════════════════════════════════════════ */

/* ── Flash messages ── */
.basket-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 120px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.basket-flash svg { width: 18px; height: 18px; flex-shrink: 0; }

.basket-flash--success { background: rgba(34,197,94,0.06); color: #4ade80; }
.basket-flash--info    { background: rgba(99,179,237,0.06); color: #93c5fd; }
.basket-flash--info a  { color: inherit; text-decoration: underline; }
.basket-flash--error   { background: rgba(242,68,98,0.07); color: var(--accent); }

/* ── Section wrapper ── */
.basket-section {
    padding: 48px 120px 80px;
}

/* ── Two-column grid ── */
.basket-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

/* ══ CART ITEMS ══ */
.basket-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
}

.basket-item {
    display: grid;
    grid-template-columns: 140px 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.basket-item:last-child { border-bottom: none; }
.basket-item:hover { background: var(--bg-elevated); }

.basket-item__thumb {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 16/9;
}

.basket-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.basket-item__info {
    min-width: 0;
}

.basket-item__label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.basket-item__title {
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.basket-item__instructor {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}

.basket-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 90px;
    text-align: right;
}

.basket-item__price-old {
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: line-through;
}

.basket-item__price-current {
    font-size: 16px;
    font-weight: 300;
    color: var(--accent);
    letter-spacing: 0.5px;
}

.basket-item__price-desc {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.basket-item__remove {
    flex-shrink: 0;
}

.basket-item__remove-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.basket-item__remove-btn svg {
    width: 15px;
    height: 15px;
    stroke: var(--text-dim);
    transition: stroke var(--transition);
}

.basket-item__remove-btn:hover {
    background: rgba(242,68,98,0.1);
    border-color: rgba(242,68,98,0.3);
}

.basket-item__remove-btn:hover svg {
    stroke: var(--accent);
}

/* ── Empty state ── */
.basket-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    gap: 16px;
}

.basket-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.basket-empty__icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--text-dim);
}

.basket-empty__title {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
}

.basket-empty__desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.7;
    max-width: 300px;
}

/* ══ SUMMARY CARD ══ */
.basket-summary {
    position: sticky;
    top: 100px;
}

.basket-summary__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}

.basket-summary__card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.basket-summary__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

.basket-summary__total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.basket-summary__total-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.basket-summary__total-struck {
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: line-through;
}

.basket-summary__total-amount {
    font-size: 36px;
    font-weight: 200;
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.basket-summary__total-discounted {
    font-size: 36px;
    font-weight: 200;
    color: var(--accent);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.basket-summary__divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

/* ── Coupon ── */
.basket-summary__coupon-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.basket-coupon-form {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.basket-coupon-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 12px;
    padding: 10px 12px;
    outline: none;
    font-family: var(--font);
    letter-spacing: 1.5px;
    transition: border-color var(--transition);
}

.basket-coupon-input::placeholder { color: var(--text-dim); }
.basket-coupon-input:focus { border-color: var(--accent); background: var(--bg-hover); }

.basket-coupon-btn {
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

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

/* ── Coupon Applied state ── */
.basket-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(34,197,94,0.07);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.basket-coupon-applied__code {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #4ade80;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.basket-coupon-applied__discount {
    font-size: 10px;
    font-weight: 400;
    color: #86efac;
    letter-spacing: 1px;
}

.basket-coupon-applied__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition);
}

.basket-coupon-applied__remove svg {
    width: 12px;
    height: 12px;
    stroke: #86efac;
}

.basket-coupon-applied__remove:hover { background: rgba(242,68,98,0.2); }

/* ── Checkout button ── */
.basket-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition);
    font-family: var(--font);
    margin-top: 4px;
}

.basket-checkout-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition);
}

.basket-checkout-btn:hover {
    background: var(--accent-hover);
    color: #fff;
}

.basket-checkout-btn:hover svg { transform: translateX(3px); }

/* ── Agreement checkbox ── */
.basket-payment-form { display: flex; flex-direction: column; gap: 12px; }

.basket-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.basket-agree-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.basket-agree-box {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: background var(--transition), border-color var(--transition);
}

.basket-agree-check:checked + .basket-agree-box {
    background: var(--accent);
    border-color: var(--accent);
}

.basket-agree-check:checked + .basket-agree-box::after {
    content: '';
    display: block;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.basket-agree-text {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}

.basket-agree-text a {
    color: var(--accent);
    text-decoration: none;
}

.basket-agree-text a:hover { text-decoration: underline; }

/* ── Trust / iyzico ── */
.basket-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.basket-trust__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.basket-trust__item svg {
    width: 15px;
    height: 15px;
    stroke: var(--text-dim);
}

.basket-trust__iyzico img {
    height: 22px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(100%) brightness(1.5);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .basket-section { padding: 40px 48px 64px; }
    .basket-flash { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 900px) {
    .basket-grid { grid-template-columns: 1fr; }
    .basket-summary { position: static; }
}

@media (max-width: 640px) {
    .basket-section { padding: 28px 16px 48px; }
    .basket-flash { padding-left: 16px; padding-right: 16px; }
    .basket-item { grid-template-columns: 100px 1fr; grid-template-rows: auto auto; }
    .basket-item__price { align-items: flex-start; }
    .basket-item__remove { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ═══════════════════════════════════════════════════
   STATIC PAGE DETAIL  (/p/slug)
   ═══════════════════════════════════════════════════ */

.static-page-section {
    padding: 64px 120px 100px;
    display: flex;
    justify-content: center;
}

.static-page-content {
    width: 100%;
    max-width: 820px;
}

/* ── Prose typography — DB'den gelen HTML içerik ── */
.prose {
    color: var(--text);
    font-size: 15px;
    line-height: 1.85;
    font-weight: 300;
    letter-spacing: 0.2px;
}

.prose p {
    margin-bottom: 1.4em;
    color: var(--text);
}

.prose p:last-child { margin-bottom: 0; }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
    color: var(--text);
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 2em 0 0.75em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.prose h1::before,
.prose h2::before,
.prose h3::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 2px;
    background: var(--accent);
}

.prose h1 { font-size: 24px; }
.prose h2 { font-size: 20px; }
.prose h3 { font-size: 17px; }
.prose h4 { font-size: 15px; border-bottom: none; letter-spacing: 2px; }

.prose strong,
.prose b {
    font-weight: 600;
    color: var(--text);
}

.prose em,
.prose i {
    font-style: italic;
    color: var(--text-dim);
}

.prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(242,68,98,0.3);
    transition: border-color var(--transition), color var(--transition);
}

.prose a:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.prose ul,
.prose ol {
    padding-left: 0;
    margin: 0 0 1.4em;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prose ul li,
.prose ol li {
    position: relative;
    padding-left: 20px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
}

.prose ol {
    counter-reset: prose-counter;
}

.prose ol li {
    counter-increment: prose-counter;
}

.prose ol li::before {
    content: counter(prose-counter) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.5px;
}

.prose blockquote {
    margin: 1.8em 0;
    padding: 20px 24px;
    border-left: 3px solid var(--accent);
    background: var(--bg-elevated);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--text-dim);
}

.prose blockquote p { margin-bottom: 0; }

.prose hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2.5em 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.8em;
    font-size: 14px;
}

.prose table th {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 12px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.prose table td {
    border: 1px solid var(--border);
    padding: 11px 16px;
    color: var(--text);
    line-height: 1.6;
}

.prose table tr:hover td {
    background: var(--bg-elevated);
}

.prose img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin: 1.2em 0;
}

.prose code {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 13px;
    color: var(--accent);
    font-family: monospace;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .static-page-section { padding: 48px 48px 72px; }
}

@media (max-width: 640px) {
    .static-page-section { padding: 32px 20px 56px; }
    .prose { font-size: 14px; }
    .prose h1 { font-size: 20px; }
    .prose h2 { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════
   COURSE DETAIL PAGE
   ═══════════════════════════════════════════════════ */

/* ── HERO ── */
.cd-hero {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.cd-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transform: scale(1.04);
    transition: transform 8s ease;
}

.cd-hero:hover .cd-hero__bg { transform: scale(1); }

.cd-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,10,18,0.15) 0%,
        rgba(10,10,18,0.45) 40%,
        rgba(10,10,18,0.85) 72%,
        rgba(10,10,18,0.97) 100%
    );
}

.cd-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 120px 52px;
}

.cd-hero__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.cd-hero__title {
    font-size: 38px;
    font-weight: 200;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 10px;
    max-width: 820px;
    line-height: 1.25;
}

.cd-hero__sub {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 28px;
    max-width: 600px;
    line-height: 1.6;
    font-weight: 300;
}

.cd-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── BODY GRID ── */
.cd-body {
    padding: 56px 120px 80px;
    border-top: 1px solid var(--border);
}

.cd-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}

/* ── VIDEO ── */
.cd-video {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 40px;
}

.cd-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── AÇIKLAMA ── */
.cd-description {
    margin-bottom: 48px;
}

.cd-description__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.cd-description__text {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.85;
    font-weight: 300;
}

.cd-description__more {
    display: none;
}

.cd-description__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    font-family: var(--font);
    padding: 0;
    transition: opacity var(--transition);
}

.cd-description__toggle svg {
    width: 16px;
    height: 16px;
    stroke: var(--accent);
    transition: transform var(--transition);
}

.cd-description__toggle:hover { opacity: 0.75; }

/* ── BLOG / DETAY ── */
.cd-blog {
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

.cd-blog__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.cd-blog__title {
    font-size: 20px;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 28px;
}

/* ── SIDEBAR CARD ── */
.cd-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cd-sidebar__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
}

.cd-sidebar__card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

.cd-sidebar__price-block {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.cd-sidebar__price-old {
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: line-through;
}

.cd-sidebar__price {
    font-size: 32px;
    font-weight: 200;
    color: var(--text);
    letter-spacing: 1px;
}

.cd-sidebar__buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--transition);
    margin-bottom: 0;
}

.cd-sidebar__buy-btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.cd-sidebar__buy-btn:hover { background: var(--accent-hover); }
.cd-sidebar__buy-btn:hover svg { transform: translateX(3px); }

.cd-sidebar__divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.cd-sidebar__meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-sidebar__meta li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}

.cd-sidebar__meta li svg {
    width: 15px;
    height: 15px;
    stroke: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
}

.cd-sidebar__call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.cd-sidebar__call-btn svg { width: 15px; height: 15px; }
.cd-sidebar__call-btn:hover {
    border-color: var(--border-accent);
    color: var(--text);
    background: var(--bg-hover);
}

/* ── DERS PLANI ── */
.cd-sidebar__lessons {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cd-lessons__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.cd-lessons__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 420px;
    overflow-y: auto;
}

.cd-lessons__list::-webkit-scrollbar { width: 3px; }
.cd-lessons__list::-webkit-scrollbar-track { background: transparent; }
.cd-lessons__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cd-lessons__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    cursor: default;
}

.cd-lessons__item:last-child { border-bottom: none; }
.cd-lessons__item:hover { background: var(--bg-elevated); }

.cd-lessons__num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--accent);
    min-width: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cd-lessons__name {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    transition: color var(--transition);
}

.cd-lessons__item:hover .cd-lessons__name { color: var(--text); }

/* ── SLOGAN ── */
.cd-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 52px 120px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.cd-slogan__text {
    font-size: 36px;
    font-weight: 200;
    letter-spacing: 3px;
    color: var(--text-dim);
    font-style: italic;
}

.cd-slogan__accent {
    font-size: 40px;
    font-weight: 300;
    font-style: italic;
    color: var(--accent);
    letter-spacing: 2px;
}

/* ── MODAL ── */
.cd-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
}

.cd-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
}

.cd-modal__eyebrow {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.cd-modal__title h5 {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--text);
    margin: 0;
}

.cd-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition);
}

.cd-modal__close svg { width: 14px; height: 14px; stroke: var(--text-dim); }
.cd-modal__close:hover { background: rgba(242,68,98,0.15); }

.cd-modal__body { padding: 24px 28px 28px; }

.cd-modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cd-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cd-modal__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cd-modal__input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    padding: 11px 14px;
    outline: none;
    font-family: var(--font);
    transition: border-color var(--transition), background var(--transition);
}

.cd-modal__input::placeholder { color: var(--text-dim); }
.cd-modal__input:focus { border-color: var(--accent); background: var(--bg-hover); }

.cd-modal__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--transition);
    margin-top: 4px;
}

.cd-modal__submit svg { width: 15px; height: 15px; transition: transform var(--transition); }
.cd-modal__submit:hover { background: var(--accent-hover); }
.cd-modal__submit:hover svg { transform: translateX(3px); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .cd-hero__content { padding: 0 48px 48px; }
    .cd-body { padding: 48px 48px 64px; }
    .cd-slogan { padding: 40px 48px; }
    .cd-hero__title { font-size: 30px; }
}

@media (max-width: 900px) {
    .cd-grid { grid-template-columns: 1fr; }
    .cd-sidebar { position: static; }
    .cd-hero { height: 420px; }
}

@media (max-width: 640px) {
    .cd-hero { height: 340px; }
    .cd-hero__content { padding: 0 20px 36px; }
    .cd-hero__title { font-size: 22px; }
    .cd-body { padding: 32px 20px 48px; }
    .cd-slogan { padding: 32px 20px; flex-direction: column; gap: 0; }
    .cd-slogan__text, .cd-slogan__accent { font-size: 28px; }
}

/* ============================================================
   ÜYELİK PAKETİ PAGE
   ============================================================ */

/* ── Hero Split ── */
.mp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}
.mp-hero__visual {
    position: relative;
    overflow: hidden;
}
.mp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 8s ease;
}
.mp-hero:hover .mp-hero__img { transform: scale(1.03); }
.mp-hero__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, var(--bg) 100%),
                linear-gradient(to top, rgba(10,10,16,.5) 0%, transparent 60%);
}
.mp-hero__content {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 64px 64px 48px;
}
.mp-hero__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.mp-hero__title {
    font-size: 28px;
    font-weight: 200;
    color: var(--text);
    line-height: 1.35;
    margin: 0 0 32px;
}

/* Price card */
.mp-hero__price-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 28px;
    position: relative;
}
.mp-hero__price-card::before {
    content: '';
    position: absolute;
    left: 0; top: 16px; bottom: 16px;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 0 2px 2px 0;
}
.mp-hero__price-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mp-hero__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}
.mp-hero__price-count {
    font-size: 48px;
    font-weight: 200;
    color: var(--text);
    line-height: 1;
}
.mp-hero__price-x {
    font-size: 20px;
    font-weight: 300;
    color: var(--text-secondary);
}
.mp-hero__price-amount {
    font-size: 48px;
    font-weight: 200;
    color: var(--accent);
    line-height: 1;
}
.mp-hero__price-amount sup {
    font-size: 22px;
    font-weight: 300;
    vertical-align: super;
}
.mp-hero__price-cur {
    font-size: 28px;
    font-weight: 300;
}
.mp-hero__price-note {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
    letter-spacing: 0.3px;
}
.mp-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Course Grid ── */
.mp-courses {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 72px 80px;
}
.mp-courses__header {
    text-align: center;
    margin-bottom: 48px;
}
.mp-courses__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.mp-courses__title {
    font-size: 28px;
    font-weight: 200;
    color: var(--text);
    margin: 0 0 10px;
}
.mp-courses__sub {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
}
.mp-courses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.mp-course-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}
.mp-course-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-4px);
    text-decoration: none;
}
.mp-course-card__img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.mp-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.mp-course-card:hover .mp-course-card__img { transform: scale(1.04); }
.mp-course-card__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,16,.6) 0%, transparent 50%);
}
.mp-course-card__body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mp-course-card__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}
.mp-course-card__sub {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}
.mp-course-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 4px;
    transition: gap var(--transition);
}
.mp-course-card__btn svg { width: 13px; height: 13px; }
.mp-course-card:hover .mp-course-card__btn { gap: 10px; }

/* ── Responsive ── */
@media (max-width: 1000px) {
    .mp-hero { grid-template-columns: 1fr; }
    .mp-hero__visual { height: 320px; }
    .mp-hero__visual-overlay { background: linear-gradient(to top, rgba(10,10,16,.8) 0%, rgba(10,10,16,.3) 100%); }
    .mp-hero__content { padding: 40px 40px; }
    .mp-courses { padding: 56px 40px; }
}
@media (max-width: 760px) {
    .mp-courses__grid { grid-template-columns: repeat(2, 1fr); }
    .mp-courses { padding: 48px 20px; }
    .mp-hero__content { padding: 32px 20px; }
    .mp-hero__title { font-size: 22px; }
    .mp-hero__price-count, .mp-hero__price-amount { font-size: 36px; }
}
@media (max-width: 480px) {
    .mp-courses__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUCCESS / THANK-YOU PAGE (basvuru-alindi, etc.)
   ============================================================ */

.success-page {
    min-height: calc(100vh - 64px - 420px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: var(--bg);
}
.success-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 56px 48px;
    max-width: 540px;
    width: 100%;
    text-align: center;
    position: relative;
}
.success-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
    border-radius: 0 0 2px 2px;
}
.success-card__icon {
    width: 64px;
    height: 64px;
    background: rgba(242,68,98,.12);
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.success-card__icon svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
}
.success-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.success-card__title {
    font-size: 32px;
    font-weight: 200;
    color: var(--text);
    margin: 0 0 16px;
}
.success-card__message {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0 0 24px;
}
.success-card__info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 32px;
}
.success-card__info svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}
.success-card__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.success-card__actions .elite-btn {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   KURUMSAL BAŞVURU FORMU
   ============================================================ */

.biz-form-section {
    background: var(--bg);
    padding: 64px 80px 80px;
}
.biz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* ── Sol: Bilgi Paneli ── */
.biz-form-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: 90px;
}
.biz-form-info__photo {
    position: relative;
    height: 220px;
    overflow: hidden;
}
.biz-form-info__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 6s ease;
}
.biz-form-info:hover .biz-form-info__img { transform: scale(1.04); }
.biz-form-info__photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,16,.85) 0%, rgba(10,10,16,.2) 100%);
}
.biz-form-info__body {
    padding: 28px 28px 32px;
}
.biz-form-info__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.biz-form-info__title {
    font-size: 18px;
    font-weight: 300;
    color: var(--text);
    margin: 0 0 24px;
    line-height: 1.4;
}
.biz-form-info__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.biz-form-info__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.5;
}
.biz-form-info__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: rgba(242,68,98,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.biz-form-info__icon svg { width: 11px; height: 11px; color: var(--accent); }
.biz-form-info__response {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}
.biz-form-info__response svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* ── Sağ: Form Kartı ── */
.biz-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 36px 40px;
    position: relative;
}
.biz-form-card::before {
    content: '';
    position: absolute;
    left: 0; top: 20px; bottom: 20px;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 0 2px 2px 0;
}
.biz-form-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.biz-form-card__title {
    font-size: 24px;
    font-weight: 200;
    color: var(--text);
    margin: 0 0 8px;
}
.biz-form-card__desc {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0 0 28px;
}
.biz-form-card__header {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

/* Flash messages */
.biz-form-flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 20px;
}
.biz-form-flash svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.biz-form-flash--success { background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.2); }
.biz-form-flash--error { background: rgba(242,68,98,.1); color: var(--accent); border: 1px solid var(--border-accent); }

/* Form fields */
.biz-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.biz-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.biz-form__row .biz-form__field { margin-bottom: 0; }
.biz-form__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.biz-form__input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 300;
    color: var(--text);
    font-family: var(--font);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
    width: 100%;
}
.biz-form__input::placeholder { color: var(--text-dim); }
.biz-form__input:focus {
    border-color: var(--border-accent);
    background: rgba(242,68,98,.04);
}
.biz-form__privacy {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 4px 0 24px;
}
.biz-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--transition), gap var(--transition);
}
.biz-form__submit svg { width: 16px; height: 16px; transition: transform var(--transition); }
.biz-form__submit:hover { background: var(--accent-hover); gap: 14px; }
.biz-form__submit:hover svg { transform: translateX(3px); }

/* ── Responsive ── */
@media (max-width: 1000px) {
    .biz-form-section { padding: 48px 40px 64px; }
}
@media (max-width: 760px) {
    .biz-form-grid { grid-template-columns: 1fr; }
    .biz-form-info { position: static; }
    .biz-form-section { padding: 40px 20px 56px; }
    .biz-form-card { padding: 24px 20px 28px; }
    .biz-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM ACCORDION (shared: help, kurumsal, etc.)
   ============================================================ */

.accordion-item-premium {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition);
}
.accordion-item-premium:hover,
.accordion-item-premium.open {
    border-color: var(--border-accent);
}
.accordion-question {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    background: none;
    border: none;
    padding: 20px 22px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    transition: background var(--transition);
}
.accordion-question:hover { background: var(--bg-elevated); }
.accordion-item-premium.open .accordion-question { background: var(--bg-elevated); }

.accordion-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    opacity: 0.55;
    flex-shrink: 0;
    width: 22px;
    transition: opacity var(--transition);
}
.accordion-item-premium:hover .accordion-num,
.accordion-item-premium.open .accordion-num { opacity: 1; }

.accordion-question__text {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
}
.accordion-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-dim);
    transition: transform 0.3s ease, color var(--transition);
}
.accordion-item-premium.open .accordion-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}
.accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.accordion-answer__inner {
    padding: 0 22px 20px calc(22px + 22px + 18px);
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.8;
}
.accordion-answer__inner p { margin: 0 0 10px; }
.accordion-answer__inner p:last-child { margin: 0; }

/* ============================================================
   KURUMSAL (BUSINESS) PAGE
   ============================================================ */

/* ── Hero ── */
.biz-hero {
    position: relative;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.biz-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}
.biz-hero:hover .biz-hero__bg { transform: scale(1.03); }
.biz-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,16,.92) 0%, rgba(10,10,16,.55) 50%, rgba(10,10,16,.25) 100%);
}
.biz-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    padding: 0 40px;
    text-align: center;
}
.biz-hero__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.biz-hero__title {
    font-size: 40px;
    font-weight: 200;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 16px;
}
.biz-hero__sub {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    margin: 0 auto 28px;
    max-width: 520px;
}
.biz-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}

/* ── Package Cards ── */
.biz-packages {
    background: var(--bg);
    padding: 72px 80px;
}
.biz-packages__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.biz-package-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), transform var(--transition);
}
.biz-package-card::before {
    content: '';
    position: absolute;
    left: 0; top: 20px; bottom: 20px;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 0 2px 2px 0;
}
.biz-package-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px);
}
.biz-package-card__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 20px;
}
.biz-package-card__metric {
    font-size: 72px;
    font-weight: 200;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}
.biz-package-card__unit {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.biz-package-card__desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.8;
    flex: 1;
    margin: 0 0 28px;
}
.biz-package-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: 6px;
    align-self: flex-start;
    transition: background var(--transition), gap var(--transition);
}
.biz-package-card__btn svg { width: 14px; height: 14px; }
.biz-package-card__btn:hover { background: var(--accent-hover); gap: 12px; color: #fff; text-decoration: none; }

/* ── Features: text + image ── */
.biz-features {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 80px;
}
.biz-features__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.biz-features__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.biz-features__title {
    font-size: 30px;
    font-weight: 200;
    color: var(--text);
    margin: 0 0 20px;
    line-height: 1.3;
}
.biz-features__desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.85;
    margin: 0 0 32px;
}
.biz-features__visual { position: relative; }
.biz-features__img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: block;
}

/* ── Instructors ── */
.biz-instructors {
    background: var(--bg);
    padding: 72px 80px;
}
.biz-instructors__header {
    text-align: center;
    margin-bottom: 48px;
}
.biz-instructors__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.biz-instructors__title {
    font-size: 26px;
    font-weight: 200;
    color: var(--text);
    margin: 0;
}
.biz-instructors__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.biz-instr-card {
    display: block;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
}
.biz-instr-card:hover { border-color: var(--border-accent); transform: translateY(-4px); text-decoration: none; }
.biz-instr-card__img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}
.biz-instr-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.biz-instr-card:hover .biz-instr-card__img { transform: scale(1.04); }
.biz-instr-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,16,.75) 0%, transparent 50%);
}
.biz-instr-card__body {
    padding: 16px 18px;
    border-top: 1px solid var(--border);
}
.biz-instr-card__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}
.biz-instr-card__role {
    font-size: 11px;
    font-weight: 400;
    color: var(--accent);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* ── FAQ ── */
.biz-faq {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 72px 80px;
}
.biz-faq__header {
    text-align: center;
    margin-bottom: 48px;
}
.biz-faq__eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.biz-faq__title {
    font-size: 26px;
    font-weight: 200;
    color: var(--text);
    margin: 0;
}
.biz-faq__list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .biz-hero__content { padding: 0 48px 48px; }
    .biz-packages { padding: 56px 48px; }
    .biz-features { padding: 56px 48px; }
    .biz-instructors { padding: 56px 48px; }
    .biz-faq { padding: 56px 48px; }
}
@media (max-width: 860px) {
    .biz-packages__grid { grid-template-columns: 1fr; }
    .biz-features__grid { grid-template-columns: 1fr; gap: 40px; }
    .biz-features__visual { order: -1; }
    .biz-instructors__grid { grid-template-columns: repeat(2, 1fr); }
    .biz-hero { height: 440px; }
}
@media (max-width: 540px) {
    .biz-hero { height: 360px; }
    .biz-hero__content { padding: 0 20px 36px; }
    .biz-hero__title { font-size: 26px; }
    .biz-packages { padding: 40px 20px; }
    .biz-features { padding: 40px 20px; }
    .biz-instructors { padding: 40px 20px; }
    .biz-faq { padding: 40px 20px; }
    .biz-instructors__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .biz-package-card__metric { font-size: 56px; }
}

/* ═══════════════════════════════════════════════════════════════
   MEMBERSHIP PACKAGE DETAIL  (.mpd-*)
═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.mpd-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    background: var(--bg);
}

.mpd-hero__content {
    padding: 64px 56px 64px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.mpd-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    margin-bottom: 4px;
}
.mpd-hero__back svg { width: 14px; height: 14px; }
.mpd-hero__back:hover { color: var(--accent); }

.mpd-hero__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
}

.mpd-hero__title {
    font-size: 36px;
    font-weight: 200;
    letter-spacing: -0.5px;
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

.mpd-hero__sub {
    font-size: 15px;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.mpd-hero__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mpd-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
}
.mpd-meta-chip svg { width: 13px; height: 13px; color: var(--accent); }

.mpd-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mpd-hero__visual {
    position: relative;
    overflow: hidden;
}

.mpd-hero__img-wrap {
    position: absolute;
    inset: 0;
}

.mpd-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mpd-hero__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--bg) 0%, transparent 40%),
                linear-gradient(to top, var(--bg) 0%, transparent 30%);
}

/* ── Lessons ── */
.mpd-lessons {
    padding: 80px 80px 72px;
    background: var(--bg);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.mpd-lessons__header {
    margin-bottom: 40px;
}

.mpd-lessons__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.mpd-lessons__title {
    font-size: 28px;
    font-weight: 200;
    letter-spacing: -0.3px;
    color: var(--text);
    margin: 0 0 8px;
}

.mpd-lessons__sub {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
}

.mpd-lessons__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mpd-lesson-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
.mpd-lesson-row:hover { background: var(--bg-elevated); }

.mpd-lesson-row__num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    opacity: 0.55;
    flex-shrink: 0;
    width: 24px;
}

.mpd-lesson-row__name {
    flex: 1;
    font-size: 14px;
    font-weight: 300;
    color: var(--text);
    line-height: 1.4;
}

.mpd-lesson-row--locked .mpd-lesson-row__name {
    color: var(--text-secondary);
    opacity: 0.6;
}

.mpd-lesson-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    border-radius: 20px;
    padding: 4px 10px;
}
.mpd-lesson-row__badge svg { width: 12px; height: 12px; }

.mpd-lesson-row--open .mpd-lesson-row__badge {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.mpd-lesson-row--locked .mpd-lesson-row__badge {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    opacity: 0.7;
}

/* ── CTA Band ── */
.mpd-cta {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 64px 80px;
}

.mpd-cta__inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.mpd-cta__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.mpd-cta__title {
    font-size: 26px;
    font-weight: 200;
    color: var(--text);
    margin: 0 0 8px;
}

.mpd-cta__sub {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
}

.mpd-cta__btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .mpd-hero__content { padding: 56px 40px 56px 56px; }
    .mpd-hero__title { font-size: 30px; }
}

@media (max-width: 860px) {
    .mpd-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .mpd-hero__content {
        padding: 56px 32px;
        order: 1;
    }
    .mpd-hero__visual {
        order: 0;
        height: 280px;
    }
    .mpd-hero__img-overlay {
        background: linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
    }
    .mpd-lessons { padding: 56px 32px; }
    .mpd-cta { padding: 48px 32px; }
    .mpd-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
    .mpd-hero__content { padding: 40px 20px; }
    .mpd-hero__title { font-size: 24px; }
    .mpd-lessons { padding: 40px 20px; }
    .mpd-cta { padding: 40px 20px; }
    .mpd-hero__actions { flex-direction: column; }
    .mpd-hero__actions .elite-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MEMBERSHIP PACKAGE VIEW  (.mpv-*)
═══════════════════════════════════════════════════════════════ */

.mpv-section {
    padding: 64px 80px 80px;
    background: var(--bg);
}

.mpv-table-wrap {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.mpv-table {
    width: 100%;
    border-collapse: collapse;
}

.mpv-th {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.mpv-th--num  { width: 48px; color: var(--accent); opacity: 0.6; }
.mpv-th--center { text-align: center; }

.mpv-tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.mpv-tr:last-child { border-bottom: none; }
.mpv-tr:hover { background: var(--bg-elevated); }

.mpv-td {
    padding: 16px 20px;
    vertical-align: middle;
}
.mpv-td--num {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    opacity: 0.5;
}
.mpv-td--title {
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.4;
}
.mpv-td--instructor {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
}
.mpv-td--center { text-align: center; }

.mpv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 400;
    border-radius: 20px;
    padding: 4px 10px;
    white-space: nowrap;
}
.mpv-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

.mpv-badge--time {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.mpv-badge--video {
    color: var(--accent);
    background: rgba(242, 68, 98, 0.08);
    border: 1px solid rgba(242, 68, 98, 0.2);
}

/* page-header sub line */
.page-header__sub {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .mpv-section { padding: 40px 20px 56px; }
    .mpv-td--instructor { display: none; }
    .mpv-th:nth-child(3) { display: none; }
}
@media (max-width: 540px) {
    .mpv-badge--time { display: none; }
    .mpv-th:nth-child(4) { display: none; }
    .mpv-td--title { font-size: 13px; }
}

/* ── Success card error variant ── */
.success-card--error::before {
    background: linear-gradient(90deg, var(--accent) 0%, #c0392b 100%);
}

.success-card__icon--error {
    background: rgba(242, 68, 98, 0.12);
    border-color: rgba(242, 68, 98, 0.25);
    color: var(--accent);
}

.success-card__eyebrow--error {
    color: var(--accent);
}

.success-card__info--error {
    border-color: rgba(242, 68, 98, 0.2);
    background: rgba(242, 68, 98, 0.06);
    color: #f87171;
}
.success-card__info--error svg {
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT PANEL — Layout  (.sp-*)
═══════════════════════════════════════════════════════════════ */

/* ── Navbar ── */
.sp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.sp-nav__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 64px;
}

.sp-nav__logo img { display: block; }

.sp-nav__links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.sp-nav__link {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.2px;
}
.sp-nav__link:hover,
.sp-nav__link--active { color: var(--text); }

.sp-nav__sep {
    color: var(--border);
    font-size: 12px;
}

.sp-nav__user { margin-left: auto; }

/* ── User dropdown ── */
.sp-dropdown { position: relative; }

.sp-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    transition: border-color 0.2s, background 0.2s;
}
.sp-dropdown__trigger:hover,
.sp-dropdown__trigger.open { border-color: var(--accent); background: var(--bg-elevated); }

.sp-dropdown__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.sp-dropdown__avatar svg { width: 14px; height: 14px; }

.sp-dropdown__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-dropdown__chevron {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: transform 0.25s;
    flex-shrink: 0;
}
.sp-dropdown__trigger.open .sp-dropdown__chevron { transform: rotate(180deg); }

.sp-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 200;
}
.sp-dropdown__menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sp-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.sp-dropdown__item svg { width: 14px; height: 14px; flex-shrink: 0; }
.sp-dropdown__item:hover { background: var(--bg-elevated); color: var(--text); }
.sp-dropdown__item--danger:hover { color: var(--accent); }

.sp-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ── Main & Footer ── */
.sp-main { min-height: calc(100vh - 64px - 52px); }

.sp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 52px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}
.sp-footer__links { display: flex; gap: 20px; }
.sp-footer__links a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.sp-footer__links a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   STUDENT DASHBOARD  (.sd-*)
═══════════════════════════════════════════════════════════════ */

/* ── Welcome ── */
.sd-welcome {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 40px 0;
}

.sd-welcome__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.sd-welcome__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.sd-welcome__avatar svg { width: 32px; height: 32px; }

.sd-welcome__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.sd-welcome__name {
    font-size: 28px;
    font-weight: 200;
    color: var(--text);
    margin: 0 0 16px;
    letter-spacing: -0.3px;
}

.sd-welcome__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.sd-chip svg { width: 13px; height: 13px; }
.sd-chip:hover { border-color: var(--accent); color: var(--text); }

/* ── Section ── */
.sd-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 40px;
}

.sd-section--expired { padding-top: 0; }

.sd-section__header { margin-bottom: 32px; }

.sd-section__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.sd-section__title {
    font-size: 22px;
    font-weight: 200;
    color: var(--text);
    margin: 0;
}

/* ── Course grid ── */
.sd-courses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Course card ── */
.sd-course-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
}
.sd-course-card:hover { border-color: rgba(242,68,98,0.35); transform: translateY(-2px); }
.sd-course-card--expired { opacity: 0.6; }
.sd-course-card--expired:hover { opacity: 0.8; transform: none; border-color: var(--border); }

.sd-course-card__img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.sd-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.sd-course-card:hover .sd-course-card__img { transform: scale(1.04); }

.sd-course-card__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,15,20,0.7) 0%, transparent 60%);
}

.sd-course-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border-radius: 4px;
    padding: 3px 8px;
}
.sd-course-card__badge--expired {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
}

.sd-course-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sd-course-card__title {
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    margin: 0;
    line-height: 1.35;
}

.sd-course-card__sub {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}

.sd-course-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    text-decoration: none;
    transition: opacity 0.2s;
    align-self: flex-start;
}
.sd-course-card__btn svg { width: 13px; height: 13px; }
.sd-course-card__btn:hover { opacity: 0.85; color: #fff; }

.sd-course-card__btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.sd-course-card__btn--ghost:hover { border-color: var(--accent); color: var(--text); }

/* ── Empty state ── */
.sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 20px;
    color: var(--text-secondary);
    text-align: center;
}
.sd-empty svg { width: 48px; height: 48px; opacity: 0.3; }
.sd-empty p { font-size: 14px; font-weight: 300; margin: 0; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .sd-courses__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .sp-nav__inner { padding: 0 20px; gap: 16px; }
    .sp-nav__links { display: none; }
    .sd-welcome__inner { padding: 0 20px; }
    .sd-section { padding: 40px 20px; }
    .sp-footer { padding: 0 20px; flex-direction: column; height: auto; gap: 8px; padding: 16px 20px; text-align: center; }
}
@media (max-width: 600px) {
    .sd-courses__grid { grid-template-columns: 1fr; }
    .sd-welcome__name { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT PANEL — Shared form styles  (.sp-form-*)
═══════════════════════════════════════════════════════════════ */

.sp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    margin-bottom: 20px;
}
.sp-back-link svg { width: 14px; height: 14px; }
.sp-back-link:hover { color: var(--accent); }

/* ── Password Change ── */
.sp-form-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px - 52px);
    padding: 48px 20px;
    background: var(--bg);
}

.sp-form-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    position: relative;
}
.sp-form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #ff6b6b);
    border-radius: var(--radius) var(--radius) 0 0;
}

.sp-form-card__header { margin-bottom: 28px; }
.sp-form-card__eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.sp-form-card__title {
    font-size: 22px; font-weight: 200; color: var(--text); margin: 0;
}

.sp-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 300; margin-bottom: 20px;
}
.sp-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.sp-alert--success { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); color: #4ade80; }
.sp-alert--error   { background: rgba(242,68,98,0.08);  border: 1px solid rgba(242,68,98,0.2);  color: #f87171; }

.sp-form { display: flex; flex-direction: column; gap: 16px; }

.sp-form__field { display: flex; flex-direction: column; gap: 6px; }
.sp-form__label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-secondary);
}
.sp-form__input {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-size: 14px; font-weight: 300; padding: 11px 14px;
    outline: none; transition: border-color 0.2s;
}
.sp-form__input:focus { border-color: var(--accent); }
.sp-form__input::placeholder { color: rgba(255,255,255,0.18); }

.sp-form__submit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 12px 24px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer; margin-top: 8px;
    transition: opacity 0.2s;
}
.sp-form__submit:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════
   STUDENT PANEL — Course Video List  (.sv-*)
═══════════════════════════════════════════════════════════════ */

.sv-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px;
}

.sv-topbar { margin-bottom: 8px; }

.sv-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Info sidebar ── */
.sv-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.sv-info__img-wrap { position: relative; aspect-ratio: 16/9; }
.sv-info__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-info__img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--bg-card) 0%, transparent 50%);
}

.sv-info__body { padding: 20px; }

.sv-info__eyebrow {
    font-size: 9px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.sv-info__title { font-size: 16px; font-weight: 400; color: var(--text); margin: 0 0 6px; line-height: 1.35; }
.sv-info__sub { font-size: 12px; font-weight: 300; color: var(--text-secondary); margin: 0 0 16px; }

.sv-info__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.sv-meta-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 400; color: var(--text-secondary);
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 10px;
}
.sv-meta-chip svg { width: 12px; height: 12px; }
.sv-meta-chip--done { color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.06); }
.sv-meta-chip--live { color: var(--accent); border-color: rgba(242,68,98,.2); background: rgba(242,68,98,.06); }
.sv-meta-chip--live svg { width: 8px; height: 8px; color: var(--accent); }
.sv-meta-chip--special { color: #f59e0b; border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.06); }

/* ── Live info panel variant ── */
.sv-info--live { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.sv-info__live-visual {
    display: flex; align-items: center; justify-content: center;
    height: 180px;
    background: linear-gradient(135deg, #0f0f14 0%, #1a0a10 50%, #0f0f14 100%);
    position: relative; overflow: hidden;
}
.sv-info__live-visual::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(242,68,98,0.12) 0%, transparent 70%);
}

.sv-live-icon {
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,68,98,0.08);
    border: 1px solid rgba(242,68,98,0.2);
    border-radius: 50%;
    color: var(--accent);
    position: relative; z-index: 1;
}
.sv-live-icon svg { width: 36px; height: 36px; }

/* ── Special video panel variant ── */
.sv-info--special { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.sv-info__special-visual {
    display: flex; align-items: center; justify-content: center;
    height: 180px;
    background: linear-gradient(135deg, #0f0f14 0%, #111008 50%, #0f0f14 100%);
    position: relative; overflow: hidden;
}
.sv-info__special-visual::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.1) 0%, transparent 70%);
}

.sv-special-icon {
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 50%;
    color: #f59e0b;
    position: relative; z-index: 1;
}
.sv-special-icon svg { width: 36px; height: 36px; }

.sv-info__divider {
    height: 1px; background: var(--border); margin: 16px 0;
}

.sv-info__note {
    font-size: 11px; font-weight: 300; color: var(--text-secondary);
    line-height: 1.7; margin: 0;
}

.sv-info__actions { display: flex; flex-direction: column; gap: 8px; }

.sv-info__btn {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px;
    text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.sv-info__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sv-info__btn:hover { border-color: var(--accent); color: var(--text); }

/* ── Video list ── */
.sv-list__header { margin-bottom: 20px; }
.sv-list__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.sv-list__title { font-size: 18px; font-weight: 200; color: var(--text); margin: 0; }

.sv-list__rows { display: flex; flex-direction: column; gap: 2px; }

.sv-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); transition: background 0.15s;
}
.sv-row:hover { background: var(--bg-elevated); }
.sv-row--chapter {
    background: transparent; border-color: transparent;
    padding: 18px 16px 6px;
}
.sv-row--chapter:hover { background: transparent; }

.sv-row__num {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    color: var(--accent); opacity: 0.5; flex-shrink: 0; width: 22px;
}
.sv-row__name {
    flex: 1; font-size: 13px; font-weight: 300; color: var(--text);
    text-decoration: none; line-height: 1.4;
}
.sv-row__name--link:hover { color: var(--accent); }
.sv-row__name--chapter { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }

.sv-row__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; border-radius: 20px; padding: 4px 10px;
    text-decoration: none; flex-shrink: 0;
}
.sv-row__badge svg { width: 11px; height: 11px; }
.sv-row__badge--watched { color: #4ade80; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); }
.sv-row__badge--play    { color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); }
.sv-row__badge--play:hover { border-color: var(--accent); color: var(--accent); }
.sv-row__badge--doc     { color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); }
.sv-row__badge--doc:hover  { border-color: #60a5fa; color: #60a5fa; }

/* ═══════════════════════════════════════════════════════════════
   STUDENT PANEL — Video Watch  (.sw-*)
═══════════════════════════════════════════════════════════════ */

.sw-page {
    display: grid;
    grid-template-columns: 1fr 340px;
    height: calc(100vh - 64px - 52px);
    overflow: hidden;
    background: var(--bg);
}

/* ── Player col ── */
.sw-player-col {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
}

.sw-player { background: #000; }

.sw-player__frame-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
}
.sw-player__iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: none;
}

.sw-player__meta {
    padding: 20px 28px 24px;
    border-bottom: 1px solid var(--border);
}

.sw-player__title {
    font-size: 18px; font-weight: 300; color: var(--text);
    margin: 0 0 16px; line-height: 1.3;
}

.sw-player__nav {
    display: flex; align-items: center; gap: 10px;
}

.sw-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-secondary);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 16px;
    text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.sw-nav-btn svg { width: 14px; height: 14px; }
.sw-nav-btn:hover { border-color: var(--accent); color: var(--text); }
.sw-nav-btn--list { margin-left: auto; }
.sw-nav-btn--next { margin-left: 0; }

/* ── Playlist col ── */
.sw-playlist {
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
}

.sw-playlist__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sw-playlist__eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--accent);
}

.sw-playlist__rows {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.sw-playlist__rows::-webkit-scrollbar { width: 4px; }
.sw-playlist__rows::-webkit-scrollbar-track { background: transparent; }
.sw-playlist__rows::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sw-pl-row { margin-bottom: 2px; }

.sw-pl-row__inner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 6px;
    text-decoration: none; transition: background 0.15s;
    cursor: pointer;
}
.sw-pl-row__inner:hover { background: var(--bg-elevated); }
.sw-pl-row--active .sw-pl-row__inner { background: rgba(242,68,98,0.1); }
.sw-pl-row--chapter .sw-pl-row__inner { cursor: default; padding: 14px 12px 4px; }
.sw-pl-row--chapter .sw-pl-row__inner:hover { background: transparent; }

.sw-pl-row__icon {
    width: 20px; height: 20px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
}
.sw-pl-row--active .sw-pl-row__icon { color: var(--accent); }
.sw-pl-row__icon svg { width: 14px; height: 14px; }

.sw-pl-row__name {
    flex: 1; font-size: 12px; font-weight: 300; color: var(--text-secondary);
    line-height: 1.35;
}
.sw-pl-row--active .sw-pl-row__name { color: var(--text); font-weight: 400; }
.sw-pl-row--chapter .sw-pl-row__name {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: rgba(255,255,255,0.3);
}

.sw-pl-row__done {
    font-size: 10px; color: #4ade80; flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .sv-body { grid-template-columns: 1fr; }
    .sv-info { position: static; }
    .sv-page { padding: 24px 20px 60px; }
    .sw-page { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .sw-playlist { border-left: none; border-top: 1px solid var(--border); height: 400px; }
    .sw-player-col { overflow: visible; }
}

/* ── Package video locked/buy state ── */
.sv-row--locked { opacity: 0.7; }
.sv-row__badge--buy {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; border-radius: 20px; padding: 5px 12px;
    border: none; cursor: pointer; flex-shrink: 0;
    color: #fff; background: var(--accent);
    transition: opacity 0.2s;
}
.sv-row__badge--buy svg { width: 11px; height: 11px; }
.sv-row__badge--buy:hover { opacity: 0.8; }

/* ════════════════════════════════════════════════
   SINAV SAYFASI  .se-*
   ════════════════════════════════════════════════ */
.se-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.se-header { margin-bottom: 32px; }
.se-header__eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.se-header__title { font-size: 26px; font-weight: 200; color: var(--text); margin: 0; }

/* Section block */
.se-section { margin-bottom: 48px; }
.se-section__label {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-secondary);
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

/* Column headers */
.se-col-heads {
    display: grid;
    grid-template-columns: 160px 1fr 110px 80px 120px 130px;
    gap: 12px;
    padding: 8px 16px;
    font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-secondary);
}

/* Row */
.se-row {
    display: grid;
    grid-template-columns: 160px 1fr 110px 80px 120px 130px;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
    transition: background 0.15s;
}
.se-row:hover { background: var(--bg-elevated); }

.se-row__label { font-size: 13px; font-weight: 400; color: var(--text); }
.se-row__course { font-size: 12px; font-weight: 300; color: var(--text-secondary); }
.se-row__date { font-size: 12px; font-weight: 300; color: var(--text-secondary); }
.se-row__score { font-size: 14px; font-weight: 500; color: var(--text); }

/* Status badges */
.se-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; border-radius: 20px;
    padding: 4px 10px; white-space: nowrap;
}
.se-badge--success { color: #4ade80; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); }
.se-badge--fail    { color: var(--accent); background: rgba(242,68,98,0.08); border: 1px solid rgba(242,68,98,0.2); }
.se-badge--pending { color: #f59e0b; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); }
.se-badge--none    { color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); }

/* Action button */
.se-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; border-radius: var(--radius-sm);
    padding: 7px 14px; text-decoration: none; white-space: nowrap;
    transition: opacity 0.2s;
}
.se-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.se-btn--start { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.se-btn--start:hover { opacity: 0.85; }

@media (max-width: 900px) {
    .se-col-heads { display: none; }
    .se-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .se-row__course { font-size: 11px; }
}

/* my-exam slim variant (no course column) */
.se-col-heads--slim {
    grid-template-columns: 200px 140px 120px 160px 160px;
}
.se-row--slim {
    grid-template-columns: 200px 140px 120px 160px 160px;
}
@media (max-width: 900px) {
    .se-col-heads--slim,
    .se-row--slim { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   SINAV (QUIZ) SAYFASI  .eq-*
   ════════════════════════════════════════════════ */

/* ── Sticky timer bar ── */
.eq-timer {
    position: sticky; top: 56px; z-index: 90;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.eq-timer__inner {
    display: flex; align-items: center; gap: 10px;
    max-width: 800px; margin: 0 auto;
    padding: 12px 24px;
}
.eq-timer__icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.eq-timer__label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.eq-timer__display {
    font-size: 18px; font-weight: 500; letter-spacing: 3px;
    color: var(--text); font-variant-numeric: tabular-nums;
    margin-left: 4px;
}
.eq-timer__progress {
    height: 2px; background: var(--accent);
    width: 100%; transition: background 0.5s;
}
.eq-timer--urgent .eq-timer__display { color: var(--accent); }
.eq-timer--urgent .eq-timer__progress { animation: eq-pulse 1s ease-in-out infinite; }
@keyframes eq-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Page wrapper ── */
.eq-page {
    max-width: 800px; margin: 0 auto;
    padding: 40px 24px 80px;
}

/* ── Question card ── */
.eq-question {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.eq-question:hover { border-color: rgba(242,68,98,.2); }

.eq-question__header {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 20px;
}
.eq-question__num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,68,98,.1);
    border: 1px solid rgba(242,68,98,.25);
    border-radius: 50%;
    font-size: 11px; font-weight: 700; color: var(--accent);
    margin-top: 1px;
}
.eq-question__text {
    font-size: 14px; font-weight: 400; color: var(--text);
    line-height: 1.7; margin: 0;
}

/* ── Options ── */
.eq-options { display: flex; flex-direction: column; gap: 8px; }

.eq-option {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.eq-option:hover { border-color: rgba(242,68,98,.3); background: rgba(242,68,98,.04); }
.eq-option--selected {
    border-color: var(--accent) !important;
    background: rgba(242,68,98,.07) !important;
}
.eq-option--selected .eq-option__letter { color: var(--accent); }
.eq-option--selected .eq-option__dot { border-color: var(--accent); background: var(--accent); }
.eq-option--selected .eq-option__dot::after { opacity: 1; }

.eq-option__radio { display: none; }

.eq-option__dot {
    flex-shrink: 0;
    width: 16px; height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.eq-option__dot::after {
    content: '';
    position: absolute; inset: 3px;
    background: #fff; border-radius: 50%;
    opacity: 0; transition: opacity 0.15s;
}

.eq-option__letter {
    flex-shrink: 0;
    font-size: 11px; font-weight: 700;
    color: var(--text-secondary); width: 16px;
    transition: color 0.15s;
}
.eq-option__text {
    font-size: 13px; font-weight: 300; color: var(--text);
    line-height: 1.5;
}

/* ── Textarea ── */
.eq-textarea-wrap { display: flex; flex-direction: column; gap: 8px; }
.eq-textarea__label {
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
}
.eq-textarea {
    width: 100%; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 13px; font-weight: 300;
    padding: 12px 14px; resize: vertical; min-height: 120px;
    font-family: inherit; outline: none;
    transition: border-color 0.2s;
}
.eq-textarea:focus { border-color: var(--accent); }
.eq-textarea::placeholder { color: var(--text-secondary); opacity: .5; }

/* ── Submit bar ── */
.eq-submit-bar {
    display: flex; justify-content: center;
    padding: 32px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 24px;
}
.eq-submit-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
    color: #fff; background: var(--accent);
    border: none; border-radius: var(--radius-sm);
    padding: 14px 36px; cursor: pointer;
    transition: opacity 0.2s;
}
.eq-submit-btn svg { width: 16px; height: 16px; }
.eq-submit-btn:hover { opacity: 0.85; }

/* ── Certificate grid variant ── */
.se-col-heads--cert { grid-template-columns: 1fr 120px 160px 120px 110px; }
.se-row--cert       { grid-template-columns: 1fr 120px 160px 120px 110px; }
@media (max-width:900px) {
    .se-col-heads--cert, .se-row--cert { grid-template-columns: 1fr; }
}

/* ── Download button ── */
.se-btn--download {
    color: #60a5fa; background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.2);
}
.se-btn--download:hover { opacity: 0.8; color: #60a5fa; }

/* ════════════════════════════════════════════════
   EVRAKLARIM  .mf-*
   ════════════════════════════════════════════════ */
.mf-card {
    max-width: 780px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.mf-header {
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--border);
}
.mf-form { padding: 28px 32px; }

.mf-fields { display: flex; flex-direction: column; gap: 20px; }

.mf-field {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: start;
}
.mf-field__icon {
    grid-row: 1 / 3;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--accent);
    align-self: center;
}
.mf-field__icon svg { width: 20px; height: 20px; }

.mf-field__label {
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text); display: block;
    text-transform: uppercase;
}

.mf-upload {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px;
    cursor: pointer; transition: border-color 0.2s;
}
.mf-upload:hover { border-color: var(--accent); }
.mf-upload__input { display: none; }
.mf-upload__text {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--accent);
    flex-shrink: 0;
}
.mf-upload__text svg { width: 13px; height: 13px; }
.mf-upload__name { font-size: 12px; font-weight: 300; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mf-footer {
    padding-top: 28px;
    border-top: 1px solid var(--border);
    margin-top: 28px;
    display: flex; justify-content: center;
}

/* ════════════════════════════════════════════════
   HEDİYE EĞİTİM  .rw-*
   ════════════════════════════════════════════════ */
.rw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.rw-card {
    display: flex; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}
.rw-card:hover { border-color: rgba(242,68,98,.35); transform: translateY(-2px); }

.rw-checkbox { display: none; }
.rw-checkbox:checked + .rw-card,
.rw-card:has(.rw-checkbox:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Simulate :has with JS class toggle instead */
.rw-card--selected { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
.rw-card--selected .rw-card__check { opacity: 1; transform: scale(1); }
.rw-card--selected .rw-card__select-label { color: var(--accent); }

.rw-card__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.rw-card__img { width: 100%; height: 100%; object-fit: cover; }
.rw-card__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,20,.7) 0%, transparent 60%); }
.rw-card__check {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    background: var(--accent); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
}
.rw-card__check svg { width: 14px; height: 14px; color: #fff; }

.rw-card__body { padding: 14px 16px; }
.rw-card__title { font-size: 13px; font-weight: 400; color: var(--text); margin: 0 0 8px; line-height: 1.4; }
.rw-card__select-label { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); transition: color 0.2s; }