/* =====================================================
   İÇERİKLER.HTML
   SADECE BU SAYFAYA ÖZEL CSS

   FOOTER / CONTACT / ASSISTANT
   style.css'ten geliyor.
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.archive-page {
    background: #10110e;
}


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

.archive-page .archive-hero {
    position: relative;

    overflow: hidden;

    padding:
        145px 0
        78px;

    background:
        radial-gradient(
            circle at 88% 35%,
            rgba(202,255,56,.025),
            transparent 26%
        ),
        #10110e;

    border-bottom:
        1px solid
        rgba(242,240,230,.11);
}


/* dekoratif çember */

.archive-page .archive-hero::after {
    content: "";

    position: absolute;

    z-index: 0;

    width: 520px;
    height: 520px;

    right: -220px;
    top: -30px;

    border:
        1px solid
        rgba(202,255,56,.04);

    border-radius: 50%;

    pointer-events: none;
}


.archive-page
.archive-hero
.container {
    position: relative;

    z-index: 2;
}


/* =====================================================
   LABEL

   INDEXTEKİ SECTION LABEL İLE AYNI HİS
===================================================== */

.archive-page
.archive-label {
    margin: 0 0 15px;

    color: var(--lime);

    font-size: 11px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .15em;
}


/* =====================================================
   TITLE
   INDEXTEKİ "ÜRETTİĞİM İÇERİKLER" İLE AYNI
===================================================== */

.archive-page
.archive-title {
    max-width: 820px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            36px,
            3.5vw,
            52px
        ) !important;

    font-weight: 800;

    line-height: 1.08 !important;

    letter-spacing:
        -0.02em !important;

    color:
        var(--cream);
}


/*
    BAŞLIK AYNI SATIRDA.
*/

.archive-page
.archive-title span {
    color:
        var(--lime);
}


/* =====================================================
   DESCRIPTION
===================================================== */

.archive-page
.archive-description {
    width: 100%;

    max-width: 580px;

    margin:
        29px 0 0;

    color:
        rgba(242,240,230,.65);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.75;
}


/* =====================================================
   ARCHIVE AREA
===================================================== */

.archive-page
.archive-section {
    position: relative;

    padding:
        52px 0
        110px;

    background:
        #10110e;
}


/*
   BURADA CONTAINER'I GENİŞLETİYORUZ.

   Kartların sağında dev boşluk
   kalmayacak.
*/

.archive-page
.archive-section
.container {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding-left:
        clamp(
            24px,
            4vw,
            65px
        );

    padding-right:
        clamp(
            24px,
            4vw,
            65px
        );
}


/* =====================================================
   FILTER BAR
===================================================== */

.archive-page
.archive-filter-bar {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}


.archive-page
.archive-filter {
    min-height: 37px;

    padding:
        0 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(242,240,230,.18);

    background:
        transparent;

    color:
        var(--cream);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .025em;

    cursor: pointer;

    transition:
        .25s ease;
}


.archive-page
.archive-filter:hover {
    border-color:
        var(--lime);
}


.archive-page
.archive-filter.active {
    background:
        var(--lime);

    border-color:
        var(--lime);

    color:
        #10110e;
}


/* =====================================================
   STATUS BAR
===================================================== */

.archive-page
.archive-status {
    margin:
        27px 0
        28px;

    padding:
        12px 0;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    color:
        rgba(242,240,230,.35);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .13em;
}


.archive-page
.archive-status-left {
    display: flex;

    align-items: center;

    gap: 8px;
}


.archive-page
.archive-status-dot {
    width: 5px;
    height: 5px;

    display: block;

    border-radius:
        50%;

    background:
        var(--lime);
}


/* =====================================================
   INSTAGRAM GRID
===================================================== */

.archive-page
#instagramArchive {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 24px;

    align-items: start;
}


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

.archive-page
.instagram-card {
    position: relative;

    width: 100%;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    background:
        #0d0e0b;

    border:
        1px solid
        rgba(242,240,230,.10);
}


/* =====================================================
   CARD HEADER
===================================================== */

.archive-page
.instagram-card-header {
    width: 100%;

    height: 46px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    background:
        #0d0e0b;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}


.archive-page
.instagram-card-number {
    color:
        rgba(242,240,230,.30);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


.archive-page
.instagram-card-category {
    padding:
        5px 7px;

    border:
        1px solid
        rgba(255,121,71,.42);

    color:
        #ff7947;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}


/* =====================================================
   MEDIA

   POST / REELS / SHOOTING
   HEPSİ AYNI DIŞ BOYUT
===================================================== */

.archive-page
.instagram-embed-wrap {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background:
        #000;
}


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

.archive-page
.instagram-card
.instagram-media {
    position:
        absolute !important;

    inset:
        0 auto auto 0 !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    background:
        #000 !important;
}


/* =====================================================
   INSTAGRAM IFRAME
===================================================== */

.archive-page
.instagram-card
iframe {
    position:
        absolute !important;

    /*
        Instagram profil çubuğunu biraz yukarı
        taşıyoruz.
    */

    top:
        -54px !important;

    left:
        0 !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        100% !important;

    height:
        900px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;
}


/* =====================================================
   LOADING
===================================================== */

.archive-page
.instagram-loading {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 12px;

    background:
        #0d0e0b;
}


.archive-page
.instagram-loading-dot {
    width: 6px;
    height: 6px;

    border-radius:
        50%;

    background:
        var(--lime);

    animation:
        archiveLoading
        1.2s
        ease-in-out
        infinite;
}


.archive-page
.instagram-loading small {
    color:
        rgba(242,240,230,.30);

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


@keyframes archiveLoading {

    0%,
    100% {

        opacity: .25;

        transform:
            scale(.85);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.15);

    }

}


/* =====================================================
   FILTER HIDDEN
===================================================== */

.archive-page
.instagram-card.is-hidden {
    display:
        none !important;
}


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

@media
(max-width: 1050px) {

    .archive-page
    #instagramArchive {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 20px;

    }

}


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

@media
(max-width: 700px) {


    .archive-page
    .archive-hero {

        padding:
            115px 0
            60px;

    }


    .archive-page
    .archive-title {

        font-size:
            clamp(
                34px,
                11vw,
                46px
            ) !important;

        line-height:
            1.05 !important;

    }


    .archive-page
    .archive-description {

        margin-top:
            22px;

        font-size:
            13px;

        line-height:
            1.65;

    }


    .archive-page
    .archive-section {

        padding:
            38px 0
            75px;

    }


    .archive-page
    .archive-section
    .container {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .archive-page
    .archive-filter-bar {

        gap: 7px;

    }


    .archive-page
    .archive-filter {

        min-height:
            34px;

        padding:
            0 10px;

        font-size:
            7px;

    }


    .archive-page
    #instagramArchive {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .archive-page
    .instagram-embed-wrap {

        aspect-ratio:
            4 / 5;

    }

}