/* =========================================================
   AI AGENCY - GLOBAL MAIN SCROLLBAR
   2026 MODERN UI
   BRAND COLOR: #ed8168
   ========================================================= */

:root {
    /* Ana marka rengi - BİREBİR */
    --brand-orange: #ed8168;

    /* Hover */
    --brand-orange-hover: #e87358;

    /* Active / Pressed */
    --brand-orange-active: #d9654d;

    /* Scrollbar Track */
    --scrollbar-track: #f5f6f8;

    /* Scrollbar Track Hover */
    --scrollbar-track-hover: #eceef1;
}


/* =========================================================
   CHROME / EDGE / OPERA / SAFARI
   ========================================================= */


/* Ana scrollbar genişliği */
html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


/* Scrollbar arka planı */
html::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}


/* Track üzerine mouse geldiğinde */
html::-webkit-scrollbar-track:hover {
    background: var(--scrollbar-track-hover);
}


/* Scrollbar tutamacı */
html::-webkit-scrollbar-thumb {
    background: #ed8168;

    border-radius: 999px;

    /* İnce beyaz/gri boşluk */
    border: 2px solid var(--scrollbar-track);

    /* Hafif modern gölge */
    box-shadow:
        0 2px 8px rgba(237, 129, 104, 0.22);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

html::-webkit-scrollbar-thumb:hover {
    background: #e87358;

    box-shadow:
        0 3px 14px rgba(237, 129, 104, 0.40);
}


/* =========================================================
   ACTIVE / BASILI DURUM
   ========================================================= */

html::-webkit-scrollbar-thumb:active {
    background: #d9654d;

    box-shadow:
        0 2px 6px rgba(217, 101, 77, 0.40);
}


/* =========================================================
   SCROLLBAR CORNER
   ========================================================= */

html::-webkit-scrollbar-corner {
    background: transparent;
}


/* =========================================================
   FIREFOX
   ========================================================= */

html {
    scrollbar-width: thin;

    scrollbar-color:
        #ed8168
        #f5f6f8;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    html {
        scrollbar-width: none;
    }

    html::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

}