/* =========================================================
   MYTHRA CRAFT — GALE GLOBAL BOYUTLANDIRMA SİSTEMİ

   .section      = Header, ana sayfa, footer ve genel alanlar
   .page-section = Mağaza, profil, ödeme, sözleşmeler ve
                   diğer standart LeaderOS sayfaları
   ========================================================= */

:root {
    /* Bütün masaüstü içeriklerinin ortak azami genişliği */
    --mythra-content-width: 1170px;

    /* Ekranın iki tarafında korunacak minimum boşluk */
    --mythra-side-space: 24px;
}

@media (min-width: 1280px) {

    /*
     * Gale/Tailwind ölçülerini yaklaşık %6 küçültür.
     * Yazılar, buton boşlukları, ikonlar ve rem tabanlı
     * logolar birlikte orantılı şekilde küçülür.
     */
    html {
        font-size: 16px !important;
    }

    /*
     * Gale temasındaki iki ana içerik taşıyıcısını
     * aynı genişliğe bağlar.
     */
    html body #app :is(.section, .page-section) {
        width: calc(100% - (var(--mythra-side-space) * 2)) !important;
        max-width: var(--mythra-content-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   RESPONSIVE V2 — ORTAK İÇERİK GENİŞLİĞİ
   Header kendi responsive sistemini kullandığı için yalnızca
   main içindeki sayfa taşıyıcıları hedeflenir.
   ========================================================= */
@media (min-width: 640px) and (max-width: 1279px) {
    html,
    body,
    #app,
    main.main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    html body #app main.main :is(.section, .page-section) {
        width: min(1120px, calc(100% - 36px)) !important;
        max-width: 1120px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    html body #app main.main :is(.section, .page-section) :is(img, video, iframe, table) {
        max-width: 100%;
    }
}

@media (max-width: 639px) {
    html,
    body,
    #app,
    main.main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    html body #app main.main :is(.section, .page-section) {
        width: min(460px, calc(100% - 24px)) !important;
        max-width: 460px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    html body #app main.main :is(.section, .page-section) :is(img, video, iframe) {
        max-width: 100%;
        height: auto;
    }

    html body #app main.main .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    html body #app main.main .ck-content {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}
/* =========================================================
   MYTHRA CRAFT — SÖZLEŞME / ÖZEL SAYFA METİNLERİ

   Yalnızca pages/page.php içerisindeki CKEditor metnini etkiler.
   Ana sayfa, mağaza, profil ve ödeme alanlarını etkilemez.
   ========================================================= */

@media (min-width: 1280px) {

    /* Sözleşmelerin normal metinleri */
    main.main
    > section.page-section
    > div.flat-card
    > div.ck-content {
        font-size: 12px !important;
        line-height: 1.75 !important;
    }

    /* CKEditor tarafından ayrıca boyutlandırılan içerikler */
    main.main
    > section.page-section
    > div.flat-card
    > div.ck-content
    :where(p, li, td, th, blockquote) {
        font-size: 12px !important;
        line-height: 1.75 !important;
    }

    /* Sözleşmenin içerisindeki ana başlık */
    main.main
    > section.page-section
    > div.flat-card
    > div.ck-content h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    /* Bölüm başlıkları */
    main.main
    > section.page-section
    > div.flat-card
    > div.ck-content h2 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    /* Alt bölüm başlıkları */
    main.main
    > section.page-section
    > div.flat-card
    > div.ck-content h3 {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* Daha küçük alt başlıklar */
    main.main
    > section.page-section
    > div.flat-card
    > div.ck-content :where(h4, h5, h6) {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}