/*
 * PIYASA_GLOBAL_ENGINE_WORKSPACE_LAYOUT_V1
 *
 * Responsibility:
 *   Global application geometry only.
 *
 * Owns:
 *   - engine page document width
 *   - global header placement
 *   - engine workspace placement
 *   - footer placement
 *
 * Does NOT own:
 *   - KÂTİP visual design
 *   - KAŞİF visual design
 *   - ASLAN visual design
 *   - any engine-specific component
 *   - backend / REST / routing
 *
 * Engine workspaces remain independent.
 */


/* =========================================================
   1. ENGINE PAGE = NORMAL DOCUMENT FLOW
   ========================================================= */

body.pgs-page-engine {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}


/* =========================================================
   2. PIYASA APP MUST NEVER BECOME A SIDE COLUMN
   ========================================================= */

body.pgs-page-engine #piyasa-app,
body.pgs-page-engine .piyasa-app {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   3. ENGINE MAIN = FULL AVAILABLE WORKSPACE
   ========================================================= */

body.pgs-page-engine #piyasa-app > .piyasa-main,
body.pgs-page-engine .piyasa-app > .piyasa-main,
body.pgs-page-engine main.piyasa-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   4. GLOBAL HEADER MUST BE A TOP ROW — NEVER A SIDE PANEL
   ========================================================= */

body.pgs-page-engine > .pgs-header,
body.pgs-page-engine .pgs-header {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   5. HEADER INNER MAY SCROLL HORIZONTALLY IF NECESSARY,
      BUT MAY NOT CONSUME THE ENGINE WORKSPACE AS A COLUMN
   ========================================================= */

body.pgs-page-engine .pgs-header__inner {
    width: calc(100% - 44px) !important;
    max-width: none !important;

    margin-left: 22px !important;
    margin-right: 22px !important;

    box-sizing: border-box !important;
}

body.pgs-page-engine .pgs-engines {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* =========================================================
   6. FOOTER = NORMAL FULL-WIDTH ROW
   ========================================================= */

body.pgs-page-engine > .pgs-footer,
body.pgs-page-engine .pgs-footer {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   7. ENGINE ROOTS KEEP THEIR OWN DESIGN
   Only geometry is normalized.
   ========================================================= */

body.pgs-page-engine .piyasa-main > section,
body.pgs-page-engine .piyasa-main > article,
body.pgs-page-engine .piyasa-main > div {
    min-width: 0;
    box-sizing: border-box;
}


/* =========================================================
   8. DESKTOP-FIRST CONTRACT
   ========================================================= */

@media (min-width: 1181px) {

    body.pgs-page-engine #piyasa-app,
    body.pgs-page-engine .piyasa-app,
    body.pgs-page-engine .piyasa-main {
        width: 100% !important;
        max-width: none !important;
    }
}


/* =========================================================
   9. SMALLER VIEWPORT SAFETY
   ========================================================= */

@media (max-width: 1180px) {

    body.pgs-page-engine .pgs-header__inner {
        width: calc(100% - 28px) !important;
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
}


/* ============================================================
   PIYASA_GLOBAL_SHELL_KASIF_GOLDEN_V2
   GLOBAL CONTRACT — ALL CANONICAL ENGINE WORKSPACES

   KAŞİF is the golden visual reference.

   OWNED HERE:
   - global page gutter
   - top FİYATOMATİK / engine navigation geometry
   - active-product/context geometry
   - product-center/context row geometry
   - engine workspace outer alignment

   NOT OWNED HERE:
   - engine-specific internal UI
   ============================================================ */


/* ------------------------------------------------------------
   1. GLOBAL PAGE FOUNDATION
   ------------------------------------------------------------ */

html body.pgs-page-engine {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

html body.pgs-page-engine #piyasa-app {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   2. KAŞİF GOLDEN OUTER GUTTER

   KAŞİF screenshot/reference:
   page components use a consistent desktop gutter rather than
   each engine inventing its own outer page position.
   ------------------------------------------------------------ */

html body.pgs-page-engine #piyasa-app > .piyasa-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   3. GLOBAL TOP ENGINE NAVIGATION

   IMPORTANT:
   The top shell is global.
   No KÂTİP/KAŞİF/ASLAN/etc. CSS should determine its width.
   ------------------------------------------------------------ */

html body.pgs-page-engine
:is(
    .piyasa-global-shell,
    .piyasa-global-top-shell,
    .piyasa-engine-nav-shell,
    .piyasa-engine-nav,
    .piyasa-top-nav,
    [data-piyasa-global-shell],
    [data-piyasa-engine-nav]
) {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 20px !important;
    margin-right: 20px !important;

    box-sizing: border-box !important;
}


/*
 * Direct global header/nav children must never force
 * document-level horizontal overflow.
 */

html body.pgs-page-engine
:is(
    .piyasa-global-shell,
    .piyasa-global-top-shell,
    .piyasa-engine-nav-shell,
    .piyasa-engine-nav,
    .piyasa-top-nav,
    [data-piyasa-global-shell],
    [data-piyasa-engine-nav]
) > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   4. SHARED CONTEXT / ACTIVE PRODUCT AREA

   These are global context components, not engine components.
   ------------------------------------------------------------ */

html body.pgs-page-engine
:is(
    .piyasa-active-product,
    .piyasa-active-product-bar,
    .piyasa-product-context,
    .piyasa-product-context-bar,
    .piyasa-context-bar,
    [data-piyasa-active-product],
    [data-piyasa-product-context]
) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   5. SHARED PRODUCT-CENTER / SECONDARY CONTEXT ROW
   ------------------------------------------------------------ */

html body.pgs-page-engine
:is(
    .piyasa-product-center-bar,
    .piyasa-product-toolbar,
    .piyasa-engine-context,
    .piyasa-engine-context-bar,
    [data-piyasa-product-center],
    [data-piyasa-engine-context]
) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   6. ENGINE WORKSPACE OUTER CONTRACT

   All engines receive the SAME outer placement.
   Their internal designs remain untouched.
   ------------------------------------------------------------ */

html body.pgs-page-engine
#piyasa-app > .piyasa-main > :is(
    #piyasa-katip-live,
    [data-piyasa-view="katip"],
    [data-piyasa-view="oduncu"],
    [data-piyasa-view="kasif"],
    [data-piyasa-view="tazi"],
    [data-piyasa-view="tilki"],
    [data-piyasa-view="altin-rehber"],
    [data-piyasa-view="aslan"],
    [data-piyasa-view="oyuncu"],
    [data-piyasa-view="bilge"],
    [data-piyasa-view="dedektif"]
) {
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   7. GLOBAL OVERFLOW OWNERSHIP

   Engine internals may own local horizontal scroll.
   The complete page may NOT horizontally overflow.
   ------------------------------------------------------------ */

html body.pgs-page-engine,
html body.pgs-page-engine #piyasa-app,
html body.pgs-page-engine #piyasa-app > .piyasa-main {
    overflow-x: clip;
}


/* ------------------------------------------------------------
   8. DESKTOP-FIRST CONTRACT
   ------------------------------------------------------------ */

@media (min-width: 1200px) {

    html body.pgs-page-engine #piyasa-app > .piyasa-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}


/* ------------------------------------------------------------
   9. NARROW VIEW SAFETY
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    html body.pgs-page-engine #piyasa-app > .piyasa-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html body.pgs-page-engine
    :is(
        .piyasa-global-shell,
        .piyasa-global-top-shell,
        .piyasa-engine-nav-shell,
        .piyasa-engine-nav,
        .piyasa-top-nav,
        [data-piyasa-global-shell],
        [data-piyasa-engine-nav]
    ) {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

}


/* PIYASA_GLOBAL_SHELL_KASIF_GOLDEN_V2_END */


/* ============================================================
   PIYASA_GLOBAL_SHELL_2_REAL_PGS_HEADER_ALIGNMENT
   2026-09-24

   SNAPSHOT VERIFIED REAL DOM CONTRACT

   REAL GLOBAL HEADER:
       .pgs-header

   REAL TOP ENGINE MENU:
       .pgs-header--top

   REAL INNER:
       .pgs-header__inner

   PURPOSE:
   The FİYATOMATİK + 10 engine navigation and every engine
   workspace use the SAME 20px desktop page gutter.

   GLOBAL ONLY.
   NO ENGINE CONTENT OWNERSHIP.
   ============================================================ */


/* ------------------------------------------------------------
   1. REAL GLOBAL HEADER OWNER

   Previous global header CSS ends with:
       width:100%
       margin-left:0
       margin-right:0

   This canonical layout intentionally overrides that final
   rule for ALL engine pages.
   ------------------------------------------------------------ */

html body.pgs-page-engine .pgs-header,
html body.pgs-page-engine .pgs-header--top,
html body.pgs-page-engine .pgs-header--bottom {

    width: calc(100% - 40px) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 20px !important;
    margin-right: 20px !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   2. HEADER INNER FILLS ITS ALIGNED OUTER SHELL

   The outer .pgs-header owns the page gutter.
   The inner must NOT add another 22px inset.
   ------------------------------------------------------------ */

html body.pgs-page-engine
.pgs-header
> .pgs-header__inner,

html body.pgs-page-engine
.pgs-header--top
> .pgs-header__inner,

html body.pgs-page-engine
.pgs-header--bottom
> .pgs-header__inner {

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   3. CANONICAL ENGINE WORKSPACE

   Same exact left/right page axis as the global header.
   ------------------------------------------------------------ */

html body.pgs-page-engine
#piyasa-app
> .piyasa-main {

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   4. TOP NAV VERTICAL RHYTHM REMAINS UNCHANGED
   ------------------------------------------------------------ */

html body.pgs-page-engine .pgs-header--top {

    margin-top: 16px !important;
    margin-bottom: 18px !important;
}


/* ------------------------------------------------------------
   5. BOTTOM GLOBAL NAV / FOOTER SHELL USES SAME AXIS
   ------------------------------------------------------------ */

html body.pgs-page-engine .pgs-header--bottom {

    margin-top: 30px !important;
    margin-bottom: 16px !important;
}


/* ------------------------------------------------------------
   6. DESKTOP CANONICAL CONTRACT
   ------------------------------------------------------------ */

@media (min-width: 1181px) {

    html body.pgs-page-engine .pgs-header,
    html body.pgs-page-engine .pgs-header--top,
    html body.pgs-page-engine .pgs-header--bottom {

        width: calc(100% - 40px) !important;

        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    html body.pgs-page-engine
    #piyasa-app
    > .piyasa-main {

        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* ------------------------------------------------------------
   7. SMALL VIEWPORT SAFETY
   ------------------------------------------------------------ */

@media (max-width: 1180px) {

    html body.pgs-page-engine .pgs-header,
    html body.pgs-page-engine .pgs-header--top,
    html body.pgs-page-engine .pgs-header--bottom {

        width: calc(100% - 28px) !important;

        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    html body.pgs-page-engine
    #piyasa-app
    > .piyasa-main {

        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* PIYASA_GLOBAL_SHELL_2_REAL_PGS_HEADER_ALIGNMENT_END */


/* ============================================================
   PIYASA GLOBAL SHELL 3
   EXACT TOP MOTOR MENU / ENGINE WINDOW ALIGNMENT

   VISUAL CONTRACT:
       LEFT  = 22px
       RIGHT = 22px

   This rule intentionally comes LAST.
   ============================================================ */

@media (min-width: 1181px) {

    html body.pgs-page-engine .pgs-header--top {

        /* cancel legacy viewport-edge positioning */
        left: auto !important;
        right: auto !important;

        /* exact visible width */
        width: calc(100% - 44px) !important;
        max-width: calc(100% - 44px) !important;

        /* exact visible gutters */
        margin-left: 22px !important;
        margin-right: 22px !important;

        box-sizing: border-box !important;
    }


    /*
     * Inner navigation must fill the already-inset shell.
     * It must NOT recreate viewport width.
     */

    html body.pgs-page-engine
    .pgs-header--top
    > .pgs-header__inner {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        box-sizing: border-box !important;
    }


    /*
     * Engine workspace uses the exact same visible axis.
     */

    html body.pgs-page-engine
    #piyasa-app
    > .piyasa-main {

        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 22px !important;
        padding-right: 22px !important;

        box-sizing: border-box !important;
    }
}


/* PIYASA_GLOBAL_SHELL_3_EXACT_ALIGNMENT_END */


/* =========================================================
   PIYASA_GLOBAL_SHELL_4_REAL_HEADER_FINAL_START

   REAL DOM OWNER:
   <header class="pgs-header pgs-header--top">

   PURPOSE:
   Global FİYATOMATİK motor navigation must share the
   same desktop left/right axis as engine workspaces.

   This block is intentionally LAST IN FILE.
   It resolves earlier width:100% / margin:0 cascade rules.
   ========================================================= */

@media (min-width: 1181px) {

    html body.pgs-page-engine > .pgs-header.pgs-header--top,
    html body.pgs-page-engine .pgs-header.pgs-header--top,
    html body.pgs-page-engine header[data-piyasa-global-header="top"] {

        display: block !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        width: calc(100% - 44px) !important;
        max-width: calc(100% - 44px) !important;

        margin-left: 22px !important;
        margin-right: 22px !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    html body.pgs-page-engine
    header[data-piyasa-global-header="top"]
    > .pgs-header__inner,

    html body.pgs-page-engine
    .pgs-header.pgs-header--top
    > .pgs-header__inner {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /*
     * Workspace uses the same 22px axis.
     */

    html body.pgs-page-engine
    #piyasa-app
    > .piyasa-main {

        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 22px !important;
        padding-right: 22px !important;

        box-sizing: border-box !important;
    }
}


/*
 * Tablet/mobile safety.
 * Desktop layout is our primary target.
 */

@media (max-width: 1180px) {

    html body.pgs-page-engine
    header[data-piyasa-global-header="top"] {

        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;

        margin-left: 14px !important;
        margin-right: 14px !important;

        box-sizing: border-box !important;
    }
}


/* PIYASA_GLOBAL_SHELL_4_REAL_HEADER_FINAL_END */