/* =========================================================
   ESPAGLOBAL
   CMS PAGE DETAIL
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.espa-page-detail {
    position: relative;

    width: 100%;

    background:
            var(--espa-body-bg, #f8fafc);
}


/* =========================================================
   HERO
========================================================= */

.espa-page-detail__hero {
    position: relative;

    isolation: isolate;

    display: flex;

    align-items: flex-end;

    width: 100%;

    min-height: 390px;

    overflow: hidden;

    background:
            linear-gradient(
                    135deg,
                    color-mix(
                            in srgb,
                            var(--espa-primary, #ef233c) 16%,
                            #0f172a
                    ),
                    #0f172a
            );
}


.espa-page-detail__hero.has-image {
    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.espa-page-detail__hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
            linear-gradient(
                    180deg,
                    rgba(15, 23, 42, .12) 0%,
                    rgba(15, 23, 42, .32) 42%,
                    rgba(15, 23, 42, .84) 100%
            );
}


.espa-page-detail__hero:not(.has-image)::before {
    background:
            radial-gradient(
                    circle at 75% 15%,
                    color-mix(
                            in srgb,
                            var(--espa-primary, #ef233c) 35%,
                            transparent
                    ),
                    transparent 38%
            ),
            linear-gradient(
                    135deg,
                    #0f172a,
                    #1e293b
            );
}


.espa-page-detail__hero::after {
    content: "";

    position: absolute;

    right: -80px;

    bottom: -180px;

    z-index: -1;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--espa-primary, #ef233c) 14%,
                    transparent
            );

    pointer-events: none;
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.espa-page-detail__hero-container {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 96px;

    padding-bottom: 56px;
}


.espa-page-detail__hero-content {
    max-width: 950px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.espa-page-detail__breadcrumb {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    margin-bottom: 22px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    .76
            );

    font-family:
            var(--font-family-body);

    font-size: 13px;

    line-height: 1.4;
}


.espa-page-detail__breadcrumb a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: inherit;

    text-decoration: none;

    transition:
            color .2s ease,
            opacity .2s ease;
}


.espa-page-detail__breadcrumb a:hover {
    color: #ffffff;
}


.espa-page-detail__breadcrumb iconify-icon {
    font-size: 15px;
}


.espa-page-detail__breadcrumb-separator {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    opacity: .68;
}


.espa-page-detail__breadcrumb-separator iconify-icon {
    font-size: 13px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.espa-page-detail__title {
    max-width: 1000px;

    margin: 0;

    color: #ffffff;

    font-family:
            var(--font-family-heading);

    font-size:
            clamp(
                    34px,
                    4vw,
                    58px
            );

    font-weight:
            var(--font-weight-heading, 700);

    line-height: 1.08;

    letter-spacing: -.025em;

    text-wrap: balance;

    text-shadow:
            0
            3px
            20px
            rgba(0, 0, 0, .22);
}


/* =========================================================
   HERO SUMMARY
========================================================= */

.espa-page-detail__summary {
    max-width: 820px;

    margin:
            20px
            0
            0;

    color:
            rgba(
                    255,
                    255,
                    255,
                    .90
            );

    font-family:
            var(--font-family-body);

    font-size:
            clamp(
                    15px,
                    1.45vw,
                    19px
            );

    font-weight: 400;

    line-height: 1.7;

    text-shadow:
            0
            2px
            10px
            rgba(0, 0, 0, .16);
}


/* =========================================================
   MAIN CONTENT AREA
========================================================= */

.espa-page-detail__main {
    position: relative;

    z-index: 3;

    padding:
            44px
            0
            72px;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.espa-page-detail__content-shell {
    position: relative;

    width: 100%;

    margin: 0 auto;

    padding:
            48px
            54px;

    border:
            1px solid
            var(--espa-border, #e5e7eb);

    border-radius: 24px;

    background:
            var(--espa-surface, #ffffff);

    box-shadow:
            0
            18px
            50px
            rgba(15, 23, 42, .065);
}


.espa-page-detail__content-shell::before {
    content: "";

    position: absolute;

    top: 0;

    left: 54px;

    width: 74px;

    height: 4px;

    border-radius:
            0
            0
            999px
            999px;

    background:
            var(--espa-primary, #ef233c);
}


/* =========================================================
   RICH TEXT ROOT
========================================================= */

.espa-page-detail__article {
    width: 100%;

    max-width: 100%;

    color:
            var(--espa-text, #334155);

    font-family:
            var(--font-family-body);

    font-size: 16px;

    line-height: 1.72;

    overflow-wrap: anywhere;

    word-break: normal;
}


/* =========================================================
   IMPORTANT
   RICH TEXT EDITOR CONTENT

   Burada:
   - color
   - font-size
   - font-weight
   - text-align
   - text-decoration

   gibi editör tarafından belirlenebilecek stilleri
   mümkün olduğunca zorlamıyoruz.
========================================================= */

.espa-page-detail__article p,
.espa-page-detail__article div,
.espa-page-detail__article span,
.espa-page-detail__article strong,
.espa-page-detail__article b,
.espa-page-detail__article em,
.espa-page-detail__article i,
.espa-page-detail__article u,
.espa-page-detail__article s,
.espa-page-detail__article h1,
.espa-page-detail__article h2,
.espa-page-detail__article h3,
.espa-page-detail__article h4,
.espa-page-detail__article h5,
.espa-page-detail__article h6 {
    max-width: 100%;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.espa-page-detail__article p {
    margin-top: 0;

    margin-bottom: 1em;
}


.espa-page-detail__article p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HEADINGS

   Editör başlık büyüklüğünü inline/style/class ile belirliyorsa
   onu ezmiyoruz.

   Sadece doğal boşluk bırakıyoruz.
========================================================= */

.espa-page-detail__article h1,
.espa-page-detail__article h2,
.espa-page-detail__article h3,
.espa-page-detail__article h4,
.espa-page-detail__article h5,
.espa-page-detail__article h6 {
    margin-top: 1.35em;

    margin-bottom: .65em;

    line-height: 1.3;
}


.espa-page-detail__article > h1:first-child,
.espa-page-detail__article > h2:first-child,
.espa-page-detail__article > h3:first-child,
.espa-page-detail__article > h4:first-child,
.espa-page-detail__article > h5:first-child,
.espa-page-detail__article > h6:first-child {
    margin-top: 0;
}


/* =========================================================
   DEFAULT HEADING SIZES

   Bunlar browser defaultlarına yakın fallback değerlerdir.
   Editörden inline font-size geliyorsa inline style önceliklidir.
========================================================= */

.espa-page-detail__article h1 {
    font-size: 2em;
}


.espa-page-detail__article h2 {
    font-size: 1.5em;
}


.espa-page-detail__article h3 {
    font-size: 1.25em;
}


.espa-page-detail__article h4 {
    font-size: 1.1em;
}


.espa-page-detail__article h5 {
    font-size: 1em;
}


.espa-page-detail__article h6 {
    font-size: .9em;
}


/* =========================================================
   LINKS
========================================================= */

.espa-page-detail__article a {
    color:
            var(--espa-primary, #ef233c);

    text-decoration: underline;

    text-underline-offset: 3px;
}


.espa-page-detail__article a:hover {
    opacity: .82;
}


/* =========================================================
   LISTS
========================================================= */

.espa-page-detail__article ul,
.espa-page-detail__article ol {
    margin-top: 1em;

    margin-bottom: 1em;

    padding-left: 2em;
}


.espa-page-detail__article ul {
    list-style-type: disc;
}


.espa-page-detail__article ol {
    list-style-type: decimal;
}


.espa-page-detail__article li {
    margin-bottom: .35em;
}


.espa-page-detail__article li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   NESTED LISTS
========================================================= */

.espa-page-detail__article ul ul,
.espa-page-detail__article ol ul {
    list-style-type: circle;
}


.espa-page-detail__article ul ul ul,
.espa-page-detail__article ol ul ul {
    list-style-type: square;
}


/* =========================================================
   IMAGE
========================================================= */

.espa-page-detail__article img {
    max-width: 100% !important;

    height: auto !important;

    object-fit: contain;
}


/* =========================================================
   FIGURE
========================================================= */

.espa-page-detail__article figure {
    max-width: 100%;

    margin:
            1.5em
            auto;
}


.espa-page-detail__article figure img {
    display: block;

    max-width: 100% !important;

    height: auto !important;
}


.espa-page-detail__article figcaption {
    margin-top: 8px;

    color:
            var(--espa-text-muted, #64748b);

    font-size: 13px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   VIDEO / IFRAME / EMBED
========================================================= */

.espa-page-detail__article iframe,
.espa-page-detail__article video,
.espa-page-detail__article embed,
.espa-page-detail__article object {
    max-width: 100%;
}


.espa-page-detail__article video {
    height: auto;
}


/* =========================================================
   TABLE
========================================================= */

.espa-page-detail__article table {
    width: 100%;

    max-width: 100%;

    margin:
            1.5em
            0;

    border-collapse: collapse;

    border-spacing: 0;
}


.espa-page-detail__article table th,
.espa-page-detail__article table td {
    padding:
            12px
            14px;

    border:
            1px solid
            var(--espa-border, #e5e7eb);

    vertical-align: top;
}


.espa-page-detail__article table th {
    font-weight: 700;

    background:
            var(--espa-surface-secondary, #f8fafc);
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.espa-page-detail__article blockquote {
    margin:
            1.5em
            0;

    padding:
            18px
            22px;

    border-left:
            4px solid
            var(--espa-primary, #ef233c);

    border-radius:
            0
            12px
            12px
            0;

    background:
            color-mix(
                    in srgb,
                    var(--espa-primary, #ef233c) 5%,
                    #ffffff
            );
}


/* =========================================================
   HORIZONTAL RULE
========================================================= */

.espa-page-detail__article hr {
    margin:
            2em
            0;

    border: 0;

    border-top:
            1px solid
            var(--espa-border, #e5e7eb);
}


/* =========================================================
   PRE / CODE
========================================================= */

.espa-page-detail__article pre {
    max-width: 100%;

    margin:
            1.5em
            0;

    padding: 16px;

    overflow-x: auto;

    border-radius: 10px;

    background: #0f172a;

    color: #ffffff;

    white-space: pre-wrap;

    word-break: break-word;
}


.espa-page-detail__article code {
    font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace;
}


/* =========================================================
   QUILL ALIGNMENT
========================================================= */

.espa-page-detail__article .ql-align-center {
    text-align: center;
}


.espa-page-detail__article .ql-align-right {
    text-align: right;
}


.espa-page-detail__article .ql-align-justify {
    text-align: justify;
}


/* =========================================================
   QUILL DIRECTION
========================================================= */

.espa-page-detail__article .ql-direction-rtl {
    direction: rtl;
}


/* =========================================================
   QUILL INDENT
========================================================= */

.espa-page-detail__article .ql-indent-1 {
    padding-left: 3em;
}


.espa-page-detail__article .ql-indent-2 {
    padding-left: 6em;
}


.espa-page-detail__article .ql-indent-3 {
    padding-left: 9em;
}


.espa-page-detail__article .ql-indent-4 {
    padding-left: 12em;
}


.espa-page-detail__article .ql-indent-5 {
    padding-left: 15em;
}


.espa-page-detail__article .ql-indent-6 {
    padding-left: 18em;
}


.espa-page-detail__article .ql-indent-7 {
    padding-left: 21em;
}


.espa-page-detail__article .ql-indent-8 {
    padding-left: 24em;
}


/* =========================================================
   QUILL SIZES
========================================================= */

.espa-page-detail__article .ql-size-small {
    font-size: .75em;
}


.espa-page-detail__article .ql-size-large {
    font-size: 1.5em;
}


.espa-page-detail__article .ql-size-huge {
    font-size: 2.5em;
}


/* =========================================================
   QUILL FONT CLASSES
========================================================= */

.espa-page-detail__article .ql-font-serif {
    font-family:
            Georgia,
            "Times New Roman",
            serif;
}


.espa-page-detail__article .ql-font-monospace {
    font-family:
            Monaco,
            "Courier New",
            monospace;
}


/* =========================================================
   QUILL VIDEO
========================================================= */

.espa-page-detail__article .ql-video {
    display: block;

    width: 100%;

    max-width: 100%;

    min-height: 420px;

    margin:
            1.5em
            auto;

    border: 0;
}


/* =========================================================
   EDITOR ALIGN ATTRIBUTE FALLBACK
========================================================= */

.espa-page-detail__article [align="center"] {
    text-align: center;
}


.espa-page-detail__article [align="right"] {
    text-align: right;
}


.espa-page-detail__article [align="left"] {
    text-align: left;
}


.espa-page-detail__article [align="justify"] {
    text-align: justify;
}


/* =========================================================
   BOTTOM
========================================================= */

.espa-page-detail__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 26px;

    padding:
            0
            6px;
}


/* =========================================================
   BACK LINK
========================================================= */

.espa-page-detail__back {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
            var(--espa-text-muted, #64748b);

    font-family:
            var(--font-family-button);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition:
            color .2s ease,
            transform .2s ease;
}


.espa-page-detail__back:hover {
    color:
            var(--espa-primary, #ef233c);

    transform:
            translateX(-2px);
}


.espa-page-detail__back iconify-icon {
    font-size: 17px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .espa-page-detail__hero {
        min-height: 360px;
    }


    .espa-page-detail__content-shell {
        padding:
                42px
                44px;
    }


    .espa-page-detail__content-shell::before {
        left: 44px;
    }

}


/* =========================================================
   TABLET SMALL
========================================================= */

@media (max-width: 991.98px) {

    .espa-page-detail__hero {
        min-height: 330px;
    }


    .espa-page-detail__hero-container {
        padding-top: 72px;

        padding-bottom: 44px;
    }


    .espa-page-detail__main {
        padding:
                32px
                0
                54px;
    }


    .espa-page-detail__content-shell {
        padding:
                36px
                34px;

        border-radius: 20px;
    }


    .espa-page-detail__content-shell::before {
        left: 34px;
    }


    .espa-page-detail__article .ql-video {
        min-height: 340px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .espa-page-detail__hero {
        min-height: 290px;
    }


    .espa-page-detail__hero-container {
        padding-top: 58px;

        padding-bottom: 34px;
    }


    .espa-page-detail__breadcrumb {
        margin-bottom: 16px;

        font-size: 12px;
    }


    .espa-page-detail__title {
        font-size: 32px;

        line-height: 1.12;
    }


    .espa-page-detail__summary {
        margin-top: 14px;

        font-size: 14px;

        line-height: 1.6;
    }


    .espa-page-detail__main {
        padding:
                20px
                0
                42px;
    }


    .espa-page-detail__content-shell {
        padding:
                30px
                20px;

        border-radius: 17px;

        box-shadow:
                0
                10px
                30px
                rgba(15, 23, 42, .05);
    }


    .espa-page-detail__content-shell::before {
        left: 20px;

        width: 58px;
    }


    .espa-page-detail__article {
        font-size: 14px;

        line-height: 1.68;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE IMAGES
    |--------------------------------------------------------------------------
    */

    .espa-page-detail__article img {
        max-width: 100% !important;

        height: auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE TABLES
    |--------------------------------------------------------------------------
    */

    .espa-page-detail__article table {
        display: block;

        width: 100%;

        max-width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE EMBEDS
    |--------------------------------------------------------------------------
    */

    .espa-page-detail__article iframe,
    .espa-page-detail__article video,
    .espa-page-detail__article embed,
    .espa-page-detail__article object {
        width: 100%;

        max-width: 100%;
    }


    .espa-page-detail__article .ql-video {
        min-height: 240px;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE QUILL INDENTS
    |--------------------------------------------------------------------------
    |
    | Desktop'teki 3em / 6em / 9em değerleri telefonda çok fazla
    | alan tüketmesin.
    |
    */

    .espa-page-detail__article .ql-indent-1 {
        padding-left: 1.25em;
    }


    .espa-page-detail__article .ql-indent-2 {
        padding-left: 2.5em;
    }


    .espa-page-detail__article .ql-indent-3 {
        padding-left: 3.75em;
    }


    .espa-page-detail__article .ql-indent-4,
    .espa-page-detail__article .ql-indent-5,
    .espa-page-detail__article .ql-indent-6,
    .espa-page-detail__article .ql-indent-7,
    .espa-page-detail__article .ql-indent-8 {
        padding-left: 4em;
    }


    .espa-page-detail__bottom {
        margin-top: 20px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 419.98px) {

    .espa-page-detail__title {
        font-size: 28px;
    }


    .espa-page-detail__content-shell {
        padding:
                26px
                16px;
    }


    .espa-page-detail__content-shell::before {
        left: 16px;
    }

}