/**
 * LMS Sayfası Özel CSS
 * =====================
 * Bu dosya LMS sayfasına özel stilleri içerir.
 * Vidoport global CSS'lerinden sonra yüklenir ve override eder.
 *
 * NOT: ID selector'lar kullanıyoruz çünkü script.php'de
 * body'deki class'lar 500ms sonra kaldırılıyor.
 * ID selector'lar class kaldırılsa bile çalışmaya devam eder.
 *
 * Tarih: 2026-01-16
 * Güncelleme: 2026-02-03 - Header stilleri kaldırıldı, diğer sayfalarla aynı olması için
 */

/* ============================================ */
/* HEADER KORUMA - Tailwind/LMS CSS'den izole   */
/* ============================================ */

/* Header fontlarını koru - Jost olmalı (diğer sayfalarla aynı) */
.topbar,
.topbar *,
.header,
.header *,
.header-active,
.header-active *,
.mobile-menu,
.mobile-menu *,
.mobile-login,
.mobile-login *,
.buyuk-indirim,
.buyuk-indirim *,
.logins,
.logins *,
.loginmenu,
.loginmenu *,
.open-menu,
.open-menu * {
    font-family: 'Jost', sans-serif !important;
}

/* ============================================ */
/* TEMEL SAYFA YAPISI - ID TABANLI              */
/* ============================================ */

#lms-page,
.lms-page-wrapper {
    background-color: #f6f6f8 !important;
    min-height: 100vh;
}

.lms-page-wrapper footer,
.lms-page-wrapper .footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.lms-main {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CTA section footer ile bitişik olsun */
.lms-main > section:last-of-type {
    margin-bottom: 0 !important;
}

/* font-family override kaldırıldı - header fontları etkilenmesin - 2026-02-03 */

.lms-main .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.lms-main > section {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.lms-body,
.lms-page-wrapper,
.lms-page-wrapper .main,
.lms-page-wrapper .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================ */
/* TAİLWİND TEXT-ALİGN OVERRIDE                 */
/* ============================================ */

.lms-main .text-center {
    text-align: center !important;
    text-indent: 0 !important;
}

.lms-main .text-left {
    text-align: left !important;
    text-indent: 0 !important;
}

.lms-main .text-right {
    text-align: right !important;
    text-indent: 0 !important;
}

/* ============================================ */
/* DATA-ALIGN ATTRIBUTE İLE METİN HİZALAMA      */
/* ============================================ */

.lms-main [data-align="center"],
.lms-main [data-align="center"] h1,
.lms-main [data-align="center"] h2,
.lms-main [data-align="center"] h3,
.lms-main [data-align="center"] p {
    text-align: center !important;
    text-indent: 0 !important;
}

.lms-main [data-align="left"],
.lms-main [data-align="left"] h1,
.lms-main [data-align="left"] h2,
.lms-main [data-align="left"] h3,
.lms-main [data-align="left"] p {
    text-align: left !important;
    text-indent: 0 !important;
}

/* ============================================ */
/* FLEXBOX OVERRIDE                             */
/* ============================================ */

.lms-main .justify-center {
    justify-content: center !important;
}

.lms-main .justify-start {
    justify-content: flex-start !important;
}

.lms-main .justify-end {
    justify-content: flex-end !important;
}

.lms-main .justify-between {
    justify-content: space-between !important;
}

.lms-main .items-center {
    align-items: center !important;
}

.lms-main .items-start {
    align-items: flex-start !important;
}

.lms-main .items-end {
    align-items: flex-end !important;
}

.lms-main .flex-col {
    flex-direction: column !important;
}

.lms-main .flex-row {
    flex-direction: row !important;
}

.lms-main .flex {
    display: flex !important;
}

.lms-main .inline-flex {
    display: inline-flex !important;
}

.lms-main .grid {
    display: grid !important;
}

/* ============================================ */
/* GAP OVERRIDE                                 */
/* ============================================ */

.lms-main .gap-2 { gap: 0.5rem !important; }
.lms-main .gap-3 { gap: 0.75rem !important; }
.lms-main .gap-4 { gap: 1rem !important; }
.lms-main .gap-6 { gap: 1.5rem !important; }
.lms-main .gap-8 { gap: 2rem !important; }
.lms-main .gap-10 { gap: 2.5rem !important; }

/* ============================================ */
/* TEXT-INDENT RESET                            */
/* ============================================ */

.lms-main p,
.lms-main h1,
.lms-main h2,
.lms-main h3,
.lms-main h4,
.lms-main h5,
.lms-main h6,
.lms-main li,
.lms-main span,
.lms-main a,
.lms-main div {
    text-indent: 0 !important;
}

/* ============================================ */
/* LMS CONTAINER                                */
/* ============================================ */

.lms-main .lms-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ============================================ */
/* BUTON DÜZELTMELERİ                           */
/* ============================================ */

.lms-main a.flex.cursor-pointer,
.lms-main a.flex.min-w-\[140px\],
.lms-main a.flex.whitespace-nowrap,
.lms-main button.flex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ============================================ */
/* FEATURE KARTLARI                             */
/* ============================================ */

.lms-main .bg-white.p-6 p,
.lms-main .rounded-xl p.text-sm,
.lms-main .rounded-xl p.text-gray-600 {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.lms-main .bg-white.p-6 h3,
.lms-main .rounded-xl h3.font-bold {
    text-align: left !important;
}

.lms-main .bg-white.p-6 span.material-symbols-outlined {
    display: block !important;
    text-align: left !important;
}

/* ============================================ */
/* GRID LAYOUT OVERRIDE                         */
/* ============================================ */

.lms-main .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    .lms-main .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .lms-main .md\:flex-row {
        flex-direction: row !important;
    }
}

@media (min-width: 1024px) {
    .lms-main .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .lms-main .lg\:flex-row {
        flex-direction: row !important;
    }
    .lms-main .lg\:text-left {
        text-align: left !important;
    }
    .lms-main .lms-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ============================================ */
/* SECTION METİN HİZALAMA                       */
/* ============================================ */

.lms-main section .text-center.items-center,
.lms-main section > div > div > .text-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================ */
/* UYUMLU LMS PLATFORMLARI                      */
/* ============================================ */

.lms-main .flex-wrap.justify-center {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* ============================================ */
/* NEDEN VİDOPORT KARTLARI                      */
/* ============================================ */

.lms-main .bg-white.p-6.rounded-xl {
    text-align: left !important;
}

/* ============================================ */
/* HERO SECTION BUTONLARI                       */
/* ============================================ */

.lms-main .flex.flex-wrap.gap-4 {
    display: flex !important;
    flex-wrap: wrap !important;
}

.lms-main a.text-accent.font-bold {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ============================================ */
/* BİZ LMS DEĞİLİZ INFO BOX                     */
/* ============================================ */

.lms-main .bg-blue-50\/50 p,
.lms-main .border-l-4.border-primary p,
.lms-main .bg-blue-50\/50 .text-gray-700,
.lms-main div > div > p.text-sm.text-gray-700 {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.lms-main .bg-blue-50\/50 h3,
.lms-main .border-l-4.border-primary h3 {
    text-align: left !important;
}

/* ============================================ */
/* NEDEN VİDOPORT KARTLARI - ŞIK GÖRÜNÜM        */
/* ============================================ */

#lms-page .bg-white.p-6.rounded-xl[data-align="left"],
.lms-main .bg-white.p-6.rounded-xl[data-align="left"],
#lms-page .bg-white.p-6.rounded-xl,
.lms-main .bg-white.p-6.rounded-xl {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

#lms-page .bg-white.p-6.rounded-xl span.material-symbols-outlined,
.lms-main .bg-white.p-6.rounded-xl span.material-symbols-outlined {
    margin-bottom: 1rem !important;
}

#lms-page .bg-white.p-6.rounded-xl h3,
.lms-main .bg-white.p-6.rounded-xl h3 {
    margin-bottom: 0.5rem !important;
}

/* ============================================ */
/* CTA BANNER - MAVİ BÖLÜM ORTALAMA             */
/* ============================================ */

#lms-page section[style*="background-color"],
.lms-main section[style*="background-color"] {
    text-align: center !important;
}

#lms-page section[style*="background-color"] h2,
#lms-page section[style*="background-color"] p,
.lms-main section[style*="background-color"] h2,
.lms-main section[style*="background-color"] p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#lms-page section[style*="background-color"] .flex-col,
.lms-main section[style*="background-color"] .flex-col {
    align-items: center !important;
}

#lms-page section[style*="background-color"] [data-align="center"],
#lms-page section[style*="background-color"] [data-align="center"] *,
.lms-main section[style*="background-color"] [data-align="center"],
.lms-main section[style*="background-color"] [data-align="center"] * {
    text-align: center !important;
}

/* ============================================ */
/* UYUMLU LMS PLATFORMLARI - ORTALAMA           */
/* ============================================ */

#lms-page .w-full.bg-white.border-y,
.lms-main .w-full.bg-white.border-y {
    text-align: center !important;
}

#lms-page .w-full.bg-white.border-y p,
.lms-main .w-full.bg-white.border-y p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#lms-page .w-full.bg-white.border-y .flex-wrap,
.lms-main .w-full.bg-white.border-y .flex-wrap {
    justify-content: center !important;
}

/* ============================================ */
/* SUNULAN EĞİTİM ALANLARI - AÇIKLAMA ORTALAMA  */
/* ============================================ */

#lms-page .bg-background-light.py-16 [data-align="center"] p,
.lms-main .bg-background-light.py-16 [data-align="center"] p,
#lms-page .flex-col.gap-3.text-center p,
.lms-main .flex-col.gap-3.text-center p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#lms-page .flex-col.gap-3.text-center,
.lms-main .flex-col.gap-3.text-center {
    text-align: center !important;
    align-items: center !important;
}

#lms-page .flex-col.gap-3.text-center h1,
#lms-page .flex-col.gap-3.text-center h2,
.lms-main .flex-col.gap-3.text-center h1,
.lms-main .flex-col.gap-3.text-center h2 {
    text-align: center !important;
}

/* ============================================ */
/* HERO VIDEO OVERLAY - YAPAY ZEKA UYGULAMALARI */
/* Bu bölüm için ID selector kullanıyoruz       */
/* çünkü JS class kaldırsa bile çalışmalı       */
/* ============================================ */

#lms-hero-video-label,
.lms-hero-video-label {
    text-align: left !important;
    text-indent: 0 !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: max-content !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

#lms-hero-video-label *,
.lms-hero-video-label *,
#lms-page #lms-hero-video-label *,
#lms-page .lms-hero-video-label * {
    text-align: left !important;
    text-indent: 0 !important;
}

#lms-hero-video-label p,
.lms-hero-video-label p,
#lms-page #lms-hero-video-label p {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

#lms-hero-video-label div,
.lms-hero-video-label div {
    text-align: left !important;
}

/* ============================================ */
/* MOBİL CSS DÜZELTMELERİ (max-width: 1023px)   */
/* ============================================ */

@media (max-width: 1023px) {
    /* mobile-menu ve mobile-login z-index kaldırıldı - 2026-02-03 */

    .lms-main section:first-of-type {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .lms-main .min-h-\[500px\] {
        min-height: auto !important;
    }

    /* Hero section - sola hizalı */
    .lms-main section:first-of-type h1,
    .lms-main section:first-of-type .flex-col.gap-6 h1,
    .lms-main section:first-of-type .flex-col.gap-6 p {
        text-align: left !important;
    }

    /* Neden Vidoport - sola hizalı */
    .lms-main .md\:w-1\/3 h2,
    .lms-main .md\:w-1\/3 p {
        text-align: left !important;
    }

    /* Feature kartları içindeki yazılar */
    .lms-main .bg-white.p-6 h3,
    .lms-main .bg-white.p-6 p {
        text-align: left !important;
    }

    /* Butonlar */
    .lms-main .flex.flex-wrap.gap-4 {
        justify-content: flex-start !important;
    }

    .lms-main a.flex.min-w-\[140px\],
    .lms-main a.flex.cursor-pointer {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Flex container'lar mobilde column */
    .lms-main .flex-col-reverse {
        flex-direction: column-reverse !important;
    }

    /* Padding düzeltmeleri */
    .lms-main .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Gap mobilde daha küçük */
    .lms-main .gap-10 { gap: 1.5rem !important; }
    .lms-main .gap-20 { gap: 2rem !important; }

    /* Kartlar full width */
    .lms-main .lg\:w-1\/2 {
        width: 100% !important;
    }

    /* Font boyutları */
    .lms-main .text-4xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    .lms-main .lg\:text-6xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    /* Grid tek sütunlu */
    .lms-main .grid {
        grid-template-columns: 1fr !important;
    }

    .lms-main .sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Info box */
    .lms-main .max-w-lg {
        max-width: 100% !important;
    }

    /* LMS platformları wrap */
    .lms-main .flex-wrap {
        flex-wrap: wrap !important;
    }

    .lms-main .flex-wrap.justify-center span {
        margin-bottom: 0.5rem !important;
    }

    /* Neden Vidoport bölümü */
    .lms-main .md\:w-1\/3 {
        width: 100% !important;
    }

    .lms-main .md\:w-2\/3 {
        width: 100% !important;
    }

    /* Sticky kaldır */
    .lms-main .sticky {
        position: relative !important;
        top: auto !important;
    }

    .lms-main .md\:w-1\/3 p.text-gray-600,
    .lms-main .md\:w-1\/3 p.text-lg,
    .lms-main .md\:w-1\/3 p {
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .lms-main .md\:w-1\/3 h2 {
        text-align: left !important;
    }

    .lms-main .bg-white.p-6 {
        text-align: left !important;
    }

    /* CTA bölümü */
    .lms-main section[style*="background-color"] {
        text-align: center !important;
    }

    .lms-main section[style*="background-color"] h2,
    .lms-main section[style*="background-color"] p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .lms-main section[style*="background-color"] .flex-col {
        align-items: center !important;
    }

    .lms-main section[style*="background-color"] .flex-wrap {
        justify-content: center !important;
    }
}

/* ============================================ */
/* ÇOK KÜÇÜK EKRANLAR (max-width: 480px)        */
/* ============================================ */

@media (max-width: 480px) {
    .lms-main .text-4xl,
    .lms-main .lg\:text-6xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .lms-main .text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    .lms-main .flex.flex-wrap.gap-4 > a {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================ */
/* YÜKSEK SPECİFİCİTY OVERRIDE                  */
/* ============================================ */

.lms-page-wrapper .lms-main [data-align="left"],
.lms-page-wrapper .lms-main [data-align="left"] h1,
.lms-page-wrapper .lms-main [data-align="left"] h2,
.lms-page-wrapper .lms-main [data-align="left"] h3,
.lms-page-wrapper .lms-main [data-align="left"] p,
.lms-page-wrapper .lms-main [data-align="left"] a {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.lms-page-wrapper .lms-main [data-align="center"],
.lms-page-wrapper .lms-main [data-align="center"] h1,
.lms-page-wrapper .lms-main [data-align="center"] h2,
.lms-page-wrapper .lms-main [data-align="center"] h3,
.lms-page-wrapper .lms-main [data-align="center"] p {
    text-align: center !important;
}

.lms-page-wrapper .lms-main section .text-center.items-center,
.lms-page-wrapper .lms-main section > div > div > .text-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.lms-page-wrapper .lms-main .justify-start {
    justify-content: flex-start !important;
}