* {
    box-sizing: border-box;
}

:root {
    --navy: #13233b;
    --gold: #b9914a;
    --red: #a41810;
    --text: #19283d;
    --muted: #7d8998;
    --border: #e6e8ec;
    --background: #f8f8f7;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(
            circle at 50% -100px,
            rgba(185,145,74,.10),
            transparent 420px
        ),
        var(--background);

    color: var(--text);
}


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

.header {
    height: 88px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 50;

    box-shadow:
        0 3px 18px rgba(25,40,60,.04);
}

.header-inner {
    width: min(1450px, calc(100% - 60px));
    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ocaklar-logo {
    width: 190px;
    height: 66px;
    object-fit: contain;
    object-position: left center;
}

.header-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;

    color: var(--gold);

    border-left: 1px solid #ddd;
    padding-left: 24px;
}


/* ==================================
   SAYFA
================================== */

.container {
    width: min(1450px, calc(100% - 60px));
    margin: auto;
}


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

.hero {
    text-align: center;
    padding: 55px 0 42px;
}

.hero-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--gold);

    margin-bottom: 9px;
}

.hero h1 {
    margin: 0;

    font-size: 43px;
    line-height: 1;

    font-weight: 750;
    letter-spacing: -1.5px;

    color: var(--navy);
}

.hero p {
    margin: 13px 0 0;

    font-size: 14px;
    color: var(--muted);
}


/* ==================================
   ARAMA
================================== */

.search-box {
    width: min(720px, 100%);
    height: 56px;

    margin: 29px auto 0;

    background: white;

    border:
        1px solid #dedfe2;

    border-radius: 13px;

    display: flex;
    align-items: center;

    padding:
        0 17px;

    box-shadow:
        0 8px 35px rgba(30,45,65,.055);

    transition: .2s;
}

.search-box:focus-within {
    border-color: #c29a51;

    box-shadow:
        0 10px 38px rgba(185,145,74,.14);
}

.search-icon {
    color: var(--navy);
    font-size: 28px;
    margin-right: 11px;
}

.search-box input {
    flex: 1;

    border: 0;
    outline: none;

    height: 100%;

    font-family: inherit;
    font-size: 14px;

    color: var(--text);
}

.search-box input::placeholder {
    color: #a0a8b4;
}

.search-box button {
    border: 0;
    background: transparent;

    color: #a2a8b1;

    font-size: 23px;
    cursor: pointer;

    padding: 4px 8px;
}


/* ==================================
   GENEL BÖLÜM
================================== */

.section {
    background: white;

    border:
        1px solid var(--border);

    border-radius: 16px;

    padding:
        25px 27px;

    margin-bottom:
        17px;

    box-shadow:
        0 8px 30px rgba(30,45,60,.035);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom:
        20px;
}

.small-title {
    color: var(--gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;
}

.section-heading h2,
.products-heading h2 {
    margin:
        4px 0 0;

    font-size:
        20px;

    color:
        var(--navy);
}

.clear-button {
    border:
        0;

    background:
        transparent;

    color:
        #8b929c;

    font-size:
        12px;

    cursor:
        pointer;
}

.clear-button:hover {
    color:
        var(--red);
}


/* ==================================
   MARKALAR
================================== */

.brand-grid {
    display:
        grid;

    grid-template-columns:
        repeat(9, 1fr);

    gap:
        11px;
}

.brand-card {
    height:
        92px;

    background:
        white;

    border:
        1px solid #e5e7eb;

    border-radius:
        11px;

    cursor:
        pointer;

    padding:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        transform .18s,
        border-color .18s,
        box-shadow .18s,
        background .18s;
}

.brand-card img {
    display:
        block;

    max-width:
        100%;

    max-height:
        60px;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;
}

.brand-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #c7ac79;

    box-shadow:
        0 9px 20px rgba(30,45,60,.075);
}

.brand-card.active {
    border:
        2px solid var(--gold);

    background:
        #fffaf1;

    box-shadow:
        0 8px 22px rgba(185,145,74,.12);
}


/* ==================================
   KATEGORİLER
================================== */

.category-section {
    padding-top:
        22px;

    padding-bottom:
        24px;
}

.category-grid {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    flex-wrap:
        wrap;
}

.category-card {
    height:
        46px;

    border:
        1px solid #e5e7eb;

    border-radius:
        9px;

    background:
        #fafafa;

    padding:
        6px 13px 6px 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #344258;

    font-size:
        12px;

    font-family:
        inherit;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        .18s;
}

.category-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #cacdd2;

    background:
        white;

    box-shadow:
        0 7px 16px rgba(30,45,60,.06);
}

.category-card.active {
    border:
        1px solid #b88e42;

    background:
        #fffaf0;

    box-shadow:
        0 5px 14px rgba(185,145,74,.12);
}

.category-icon {
    width:
        31px;

    height:
        31px;

    border-radius:
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        15px;
}

.blue {
    background:
        #e9efff;
    color:
        #4567ae;
}

.turquoise {
    background:
        #e2f5f2;
    color:
        #278f85;
}

.purple {
    background:
        #f0e9fa;
    color:
        #8460ad;
}

.cyan {
    background:
        #e5f4fa;
    color:
        #3692b5;
}

.green {
    background:
        #e9f4e8;
    color:
        #5a9c57;
}

.orange {
    background:
        #fff0e6;
    color:
        #d87c42;
}

.violet {
    background:
        #eeebf9;
    color:
        #7664a8;
}

.yellow {
    background:
        #fff5da;
    color:
        #c89b37;
}

.red {
    background:
        #fae9e7;
    color:
        #b55249;
}

.pink {
    background:
        #f8eaf3;
    color:
        #b35c91;
}


/* ==================================
   BOŞ EKRAN
================================== */

.empty-state {
    min-height:
        130px;

    margin:
        24px 0 60px;

    border:
        1px dashed #d5d8dd;

    border-radius:
        14px;

    background:
        rgba(255,255,255,.55);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;
}

.empty-logo {
    width:
        50px;

    height:
        50px;

    border-radius:
        50%;

    border:
        2px solid #d5c49f;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        20px;

    font-weight:
        800;

    color:
        var(--gold);
}

.empty-state h3 {
    margin:
        0 0 5px;

    font-size:
        15px;

    color:
        var(--navy);
}

.empty-state p {
    margin:
        0;

    font-size:
        12px;

    color:
        #9099a6;
}


/* ==================================
   ÜRÜNLER
================================== */

.hidden {
    display:
        none !important;
}

.products-area {
    margin:
        30px 0 70px;
}

.products-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        19px;
}

.product-count {
    font-size:
        12px;

    background:
        var(--navy);

    color:
        white;

    border-radius:
        100px;

    padding:
        8px 15px;
}

.product-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        18px;
}

.product-card {
    background:
        white;

    border:
        1px solid #e5e7eb;

    border-radius:
        14px;

    overflow:
        hidden;

    transition:
        .2s;

    box-shadow:
        0 7px 26px rgba(30,45,60,.045);
}

.product-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px rgba(30,45,60,.09);
}

.product-image {
    height: 220px;
    background: #ffffff !important;
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.fake-product {
    width:
        90px;

    height:
        130px;

    border-radius:
        9px;

    background:
        linear-gradient(
            140deg,
            #b7893f,
            #e2c681
        );

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    font-size:
        11px;

    font-weight:
        800;

    padding:
        8px;

    box-shadow:
        0 15px 24px rgba(0,0,0,.14);
}

.product-info {
    padding:
        17px;
}

.product-brand {
    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;
}

.product-name {
    margin:
        5px 0 15px;

    font-size:
        15px;

    line-height:
        1.35;

    min-height:
        40px;
}

.product-details {
    border-top:
        1px solid #eee;

    padding-top:
        11px;

    display:
        grid;

    gap:
        6px;

    font-size:
        12px;

    color:
        #697487;
}

/* ==================================
   DIŞARI AKTARMA
================================== */

.products-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.export-buttons {
    display: flex;
    gap: 8px;
}

.export-button {
    height: 38px;

    padding: 0 15px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: .18s;
}

.excel-button {
    background: white;
    color: #177245;

    border: 1px solid #cfded6;
}

.excel-button:hover {
    background: #eff9f3;
    border-color: #177245;

    transform: translateY(-1px);
}

.pdf-button {
    background: var(--navy);
    color: white;

    border: 1px solid var(--navy);
}

.pdf-button:hover {
    background: #223b5e;

    transform: translateY(-1px);
}


/* ==================================
   RESPONSIVE
================================== */

@media (max-width: 1200px) {

    .brand-grid {
        grid-template-columns:
            repeat(6,1fr);
    }

    .product-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

}

@media (max-width: 800px) {

    .header-inner,
    .container {
        width:
            calc(100% - 28px);
    }

    .ocaklar-logo {
        width:
            150px;
    }

    .header-title {
        font-size:
            10px;
    }

    .hero {
        padding:
            40px 0 32px;
    }

    .hero h1 {
        font-size:
            33px;
    }

    .brand-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

    .product-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media (max-width: 520px) {

    .header {
        height:
            73px;
    }

    .header-title {
        display:
            none;
    }

    .section {
        padding:
            19px;
    }

    .brand-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .brand-card {
        height:
            80px;
    }

    .category-grid {
        gap:
            6px;
    }

    .category-card {
        height:
            42px;

        font-size:
            11px;
    }

    .category-icon {
        width:
            27px;

        height:
            27px;
    }

    .product-grid {
        grid-template-columns:
            1fr;
    }

    .products-heading {
    align-items: flex-start;
    gap: 15px;
}

.products-tools {
    flex-direction: column-reverse;
    align-items: flex-end;
}

.export-buttons {
    flex-direction: column;
}

.export-button {
    width: 145px;
}

}

/* ==================================
   ÜRÜN DETAY MODALI
================================== */

.product-modal {
    position: fixed;
    inset: 0;

    z-index: 999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;
}

.product-modal.active {
    display: flex;
}


/* ARKAPLAN */

.modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(12, 23, 40, .72);

    backdrop-filter: blur(4px);
}


/* ANA KUTU */

.product-modal-content {
    position: relative;
    z-index: 2;

    width: min(960px, 100%);

    max-height: calc(100vh - 60px);

    background: white;

    border-radius: 20px;

    overflow: auto;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .28);

    animation:
        modalOpen .22s ease;
}


@keyframes modalOpen {

    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* KAPAT */

.modal-close {
    position: absolute;

    right: 18px;
    top: 16px;

    z-index: 10;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: 1px solid #e2e4e8;

    background: white;

    font-size: 25px;

    color: #697487;

    cursor: pointer;

    transition: .18s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #a41810;
}


/* İÇ YAPI */

.modal-product-layout {
    display: grid;

    grid-template-columns:
        46% 54%;

    min-height: 560px;
}


/* SOL */

.modal-product-visual {
    background:
        radial-gradient(
            circle at center,
            #ffffff 20%,
            #f0f1f3 100%
        );

    position: relative;

    padding: 40px;

    display: flex;

    flex-direction: column;
}


.modal-brand-area {
    font-size: 12px;

    color: var(--gold);

    font-weight: 800;

    letter-spacing: 2px;

    min-height: 30px;
}


.modal-image-area {
    flex: 1;

    display: flex;

    justify-content: center;
    align-items: center;
}


.modal-fake-product {
    width: 150px;

    height: 220px;

    border-radius: 12px 12px 24px 24px;

    background:
        linear-gradient(
            145deg,
            #b88a3d,
            #efd69a
        );

    box-shadow:
        0 25px 45px rgba(30, 40, 50, .19);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    color: white;

    font-size: 16px;
    font-weight: 800;

    text-align: center;
}


/* SAĞ */

.modal-product-info {
    padding:
        65px 55px 45px;
}


.modal-category span {
    display: inline-flex;

    background: #f0f3f7;

    color: #526078;

    border-radius: 100px;

    padding: 7px 12px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .7px;
}


.modal-product-info h2 {
    margin:
        16px 0 10px;

    color: var(--navy);

    font-size: 30px;

    line-height: 1.2;

    letter-spacing: -.5px;
}


.modal-description {
    color: #7c8797;

    font-size: 13px;

    line-height: 1.6;

    margin:
        0 0 28px;
}


/* BİLGİLER */

.modal-details {
    border-top:
        1px solid #eceef1;

    border-bottom:
        1px solid #eceef1;

    padding:
        8px 0;
}


.detail-row {
    min-height: 47px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid #f0f1f3;

    font-size: 13px;
}


.detail-row:last-child {
    border-bottom: 0;
}


.detail-row span {
    color: #8b94a2;
}


.detail-row strong {
    color: #26374f;

    font-weight: 650;
}


.product-code-row strong {
    color: #9299a3;

    font-size: 11px;

    font-weight: 500;
}


/* RAF GELECEK ALANI */

.future-shelf {
    margin-top: 25px;

    min-height: 77px;

    border:
        1px dashed #d9d0bf;

    background:
        #fffcf5;

    border-radius: 12px;

    padding:
        15px;

    display: flex;

    align-items: center;

    gap: 13px;
}


.future-shelf-icon {
    width: 41px;
    height: 41px;

    border-radius: 9px;

    background: #f5ead6;

    color: var(--gold);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 19px;
}


.future-shelf strong {
    color: #4f4533;

    font-size: 12px;
}


.future-shelf p {
    margin:
        3px 0 0;

    font-size: 10px;

    color: #999083;

    line-height: 1.4;
}


/* KARTLAR TIKLANABİLİR */

.product-card {
    cursor: pointer;
}


/* MOBİL */

@media (max-width: 720px) {

    .product-modal {
        padding: 15px;
    }

    .product-modal-content {
        max-height:
            calc(100vh - 30px);
    }

    .modal-product-layout {
        grid-template-columns: 1fr;
    }

    .modal-product-visual {
        min-height: 330px;

        padding: 30px;
    }

    .modal-fake-product {
        width: 115px;
        height: 170px;
    }

    .modal-product-info {
        padding:
            35px 28px 30px;
    }

    .modal-product-info h2 {
        font-size: 23px;
    }

}

.real-product-image {
    max-width: 88%;
    max-height: 88%;

    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 13px 15px
            rgb(255, 255, 255)
        );
}

.modal-real-product-image {
    max-width: 88%;
    max-height: 380px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 22px
            rgba(20,30,40,.14)
        );
}

.modal-real-product-image.hidden {
    display: none;
}

/* ==================================================
   YENİ KATALOG YERLEŞİMİ
================================================== */

.catalog-workspace {
    margin-bottom: 70px;
}


/* ==================================================
   MARKALAR - ÜST BANT
================================================== */

.brands-panel {
    background: white;

    border:
        1px solid #e4e7eb;

    border-radius: 16px;

    padding:
        21px 25px 23px;

    margin-bottom: 15px;

    box-shadow:
        0 8px 30px
        rgba(30,45,60,.035);
}


.workspace-title-row {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 16px;
}


.workspace-title-row h2 {
    margin:
        4px 0 0;

    font-size: 19px;

    color:
        var(--navy);
}


/* MARKA ŞERİ */

.brand-strip {
    display: flex;

    gap: 9px;

    overflow-x: auto;

    padding:
        2px 2px 9px;

    scrollbar-width: thin;

    scrollbar-color:
        #d5d9de transparent;
}


.brand-strip::-webkit-scrollbar {
    height: 6px;
}


.brand-strip::-webkit-scrollbar-thumb {
    background: #d5d9de;

    border-radius: 20px;
}


.brand-strip .brand-card {
    width: 128px;
    min-width: 128px;

    height: 76px;

    padding: 10px;

    flex-shrink: 0;
}


.brand-strip .brand-card img {
    max-width: 100%;
    max-height: 51px;

    object-fit: contain;
}


.brand-card.disabled {
    opacity: .20;

    filter: grayscale(1);

    pointer-events: none;

    transform: none !important;

    box-shadow: none !important;
}


.brand-card.active {
    opacity: 1;

    filter: none;

    border:
        2px solid var(--gold);

    background:
        #fffaf0;
}


/* ==================================================
   ANA ALT YAPI
================================================== */

.catalog-main-layout {
    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 15px;

    align-items: start;
}


/* ==================================================
   SOL KATEGORİ MENÜSÜ
================================================== */

.category-sidebar {
    position: sticky;

    top: 105px;

    background: white;

    border:
        1px solid #e4e7eb;

    border-radius: 15px;

    padding:
        20px 15px;

    box-shadow:
        0 8px 30px
        rgba(30,45,60,.035);
}


.category-sidebar-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding:
        0 4px 14px;

    border-bottom:
        1px solid #edf0f3;

    margin-bottom:
        10px;
}


.category-sidebar-header h3 {
    margin:
        4px 0 0;

    font-size:
        17px;

    color:
        var(--navy);
}


.mini-clear {
    border: 0;

    background: transparent;

    color: #9aa2ad;

    font-family: inherit;

    font-size: 10px;

    cursor: pointer;
}


.mini-clear:hover {
    color: #a41810;
}


/* KATEGORİ */

.category-list {
    display: grid;

    gap: 5px;
}


.sidebar-category {
    min-height: 43px;

    width: 100%;

    border: 0;

    border-radius: 8px;

    background: transparent;

    padding:
        6px 8px;

    display: flex;

    align-items: center;

    gap: 9px;

    text-align: left;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    color: #45546a;

    cursor: pointer;

    transition: .16s;
}


.sidebar-category:hover {
    background: #f5f7f9;
}


.sidebar-category.active {
    background: #fff8eb;

    color: #8c6725;
}


.sidebar-category-icon {
    width: 29px;
    height: 29px;

    flex-shrink: 0;

    border-radius: 7px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #eff2f6;

    color: #596b84;

    font-size: 13px;
}


.sidebar-category.active
.sidebar-category-icon {
    background: #f5e5c5;

    color: #a67a2c;
}


/* ==================================================
   ALT KATEGORİLER
================================================== */

.subcategory-area {
    margin-top: 16px;

    padding-top: 14px;

    border-top:
        1px solid #edf0f3;
}


.subcategory-title {
    padding:
        0 8px 8px;

    color: #a78a55;

    font-size: 8px;

    letter-spacing: 1.5px;

    font-weight: 800;
}


.subcategory-list {
    display: grid;

    gap: 3px;
}


.subcategory-button {
    width: 100%;

    min-height: 34px;

    border: 0;

    background: transparent;

    border-radius: 7px;

    padding:
        0 10px 0 38px;

    text-align: left;

    color: #768296;

    font-family: inherit;

    font-size: 10px;

    cursor: pointer;

    position: relative;
}


.subcategory-button::before {
    content: "";

    position: absolute;

    left: 19px;
    top: 50%;

    width: 6px;
    height: 1px;

    background: #bfc5cd;
}


.subcategory-button:hover {
    background: #f7f8fa;

    color: #42536a;
}


.subcategory-button.active {
    background: #f8f3e9;

    color: #9a722d;

    font-weight: 650;
}


/* ==================================================
   SAĞ ÜRÜN ALANI
================================================== */

.catalog-products {
    min-width: 0;

    background: white;

    border:
        1px solid #e4e7eb;

    border-radius: 15px;

    padding:
        22px;

    min-height: 470px;

    box-shadow:
        0 8px 30px
        rgba(30,45,60,.035);
}


.workspace-empty {
    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    color: #8b96a5;
}


.workspace-empty h3 {
    margin:
        0 0 5px;

    color: #26374f;

    font-size: 15px;
}


.workspace-empty p {
    margin: 0;

    font-size: 11px;
}


/* ÜRÜNLER EKRANIN İÇİNDE */

.products-area {
    margin: 0;
}


.product-grid {
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1250px) {

    .catalog-main-layout {
        grid-template-columns:
            200px minmax(0,1fr);
    }

    .product-grid {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


@media (max-width: 850px) {

    .catalog-main-layout {
        grid-template-columns: 1fr;
    }

    .category-sidebar {
        position: static;
    }

    .category-list {
        display: flex;

        overflow-x: auto;

        gap: 6px;

        padding-bottom: 5px;
    }

    .sidebar-category {
        width: auto;

        min-width: max-content;

        padding-right: 13px;
    }

    .subcategory-list {
        display: flex;

        overflow-x: auto;
    }

    .subcategory-button {
        width: auto;

        min-width: max-content;

        padding: 0 13px;
    }

    .subcategory-button::before {
        display: none;
    }

}


@media (max-width: 650px) {

    .product-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .brands-panel {
        padding:
            18px 15px;
    }

    .catalog-products {
        padding: 15px;
    }

}

/* ==========================================================
   OCAKLAR KATALOG - KOMPAKT MASAÜSTÜ YERLEŞİMİ
========================================================== */


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

.header {
    height: 54px !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e9ecef !important;

    box-shadow:
        0 3px 15px
        rgba(22, 37, 58, .04) !important;

    position: sticky !important;

    top: 0 !important;

    z-index: 1000 !important;
}


.header-inner {
    width: min(
        1500px,
        calc(100% - 40px)
    ) !important;

    height: 100% !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;
}


.catalog-brand {
    width: auto !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 14px !important;
}


.ocaklar-logo {
    width: 118px !important;

    height: 44px !important;

    display: block !important;

    object-fit: contain !important;

    object-position: center !important;
}

.ocaklar-home-link {display:flex;align-items:center;border-radius:4px;}
.ocaklar-home-link:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}


.catalog-divider {
    width: 1px !important;

    height: 27px !important;

    background: #b8b8b8 !important;

    flex-shrink: 0 !important;
}


.catalog-name {
    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #a51d16 !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: 3px !important;
}


/* Eski header stilleri kalmışsa gizle */

.header-title {
    display: none !important;
}



/* ==========================================================
   ANA SAYFA
========================================================== */

.container {
    width: min(
        1900px,
        calc(100% - 34px)
    ) !important;

    margin: 0 auto !important;
}


/* Eski hero kesinlikle görünmesin */

.hero {
    display: none !important;
}



/* ==========================================================
   ARAMA
========================================================== */

.top-search-area {
    padding:
        13px 0 12px !important;
}


.top-search-area .search-box {
    width: min(
        610px,
        100%
    ) !important;

    height: 46px !important;

    margin: 0 auto !important;

    background: white !important;

    border:
        1px solid #dde1e6 !important;

    border-radius: 10px !important;

    display: flex !important;

    align-items: center !important;

    padding:
        0 14px !important;

    box-shadow:
        0 5px 20px
        rgba(25, 40, 60, .05) !important;
}


.top-search-area
.search-box:focus-within {
    border-color:
        #c3984a !important;

    box-shadow:
        0 7px 25px
        rgba(184, 139, 61, .10) !important;
}


.search-icon {
    color: #142b48 !important;

    font-size: 22px !important;

    margin-right: 8px !important;
}


.search-box input {
    flex: 1 !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    font-family: inherit !important;

    font-size: 12px !important;

    color: #26384f !important;
}


.search-box button {
    border: 0 !important;

    background: transparent !important;

    color: #9ca5b1 !important;

    cursor: pointer !important;

    font-size: 19px !important;
}



/* ==========================================================
   MARKALAR PANELİ
========================================================== */

.brands-panel {
    background: white !important;

    border:
        1px solid #e2e6ea !important;

    border-radius: 13px !important;

    padding:
        14px 18px 17px !important;

    margin-bottom:
        12px !important;

    box-shadow:
        0 6px 22px
        rgba(28, 43, 61, .035) !important;
}


.workspace-title-row {
    display: flex !important;

    align-items: flex-end !important;

    justify-content: space-between !important;

    margin-bottom:
        11px !important;
}


.workspace-title-row h2 {
    margin:
        2px 0 0 !important;

    font-size:
        16px !important;

    color:
        #14263e !important;
}


.small-title {
    font-size:
        8px !important;

    line-height: 1 !important;

    letter-spacing:
        1.7px !important;

    font-weight:
        800 !important;

    color:
        #b48a3e !important;
}


.clear-button {
    border:
        0 !important;

    background:
        transparent !important;

    color:
        #8c96a3 !important;

    font-family:
        inherit !important;

    font-size:
        9px !important;

    cursor:
        pointer !important;
}



/* ==========================================================
   MARKALAR - 2 SATIRLIK GRID
========================================================== */

.brand-strip {
    display: grid !important;

    grid-template-columns:
        repeat(
            19,
            minmax(0, 1fr)
        ) !important;

    gap:
        7px !important;

    overflow:
        visible !important;

    padding:
        0 !important;
}


.brand-strip .brand-card {
    width:
        100% !important;

    min-width:
        0 !important;

    height:
        61px !important;

    margin:
        0 !important;

    padding:
        7px !important;

    background:
        #ffffff !important;

    border:
        1px solid #e2e6ea !important;

    border-radius:
        8px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    cursor:
        pointer !important;

    transition:
        .15s !important;
}


.brand-strip
.brand-card img {
    display:
        block !important;

    max-width:
        94% !important;

    max-height:
        43px !important;

    width:
        auto !important;

    height:
        auto !important;

    object-fit:
        contain !important;
}


.brand-strip
.brand-card:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        #cab079 !important;

    box-shadow:
        0 5px 13px
        rgba(30, 45, 65, .06) !important;
}


.brand-strip
.brand-card.active {
    opacity:
        1 !important;

    filter:
        none !important;

    background:
        #fff8e9 !important;

    border:
        2px solid #bb9148 !important;
}


.brand-strip
.brand-card.disabled {
    opacity:
        .18 !important;

    filter:
        grayscale(1) !important;

    pointer-events:
        none !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}



/* ==========================================================
   ANA KATALOG YAPISI
========================================================== */

.catalog-main-layout {
    display:
        grid !important;

    grid-template-columns:
        410px minmax(0, 1fr) !important;

    gap:
        12px !important;

    align-items:
        start !important;

    margin:
        0 0 50px !important;
}



/* ==========================================================
   SOL FİLTRE KUTUSU
========================================================== */

.filter-sidebar {
    min-width:
        0 !important;

    min-height:
        465px !important;

    background:
        white !important;

    border:
        1px solid #e2e6ea !important;

    border-radius:
        13px !important;

    overflow:
        hidden !important;

    box-shadow:
        0 6px 22px
        rgba(28, 43, 61, .035) !important;

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    align-items:
        stretch !important;

    position:
        sticky !important;

    top:
        76px !important;
}


/* Alt kategori yoksa kategori tam genişlik */

.filter-sidebar:has(.subcategory-column.hidden) {
    grid-template-columns:
        1fr !important;
}


.filter-sidebar:has(.subcategory-column.hidden)
.category-column {
    border-right:
        0 !important;
}



/* ==========================================================
   FİLTRE KOLONLARI
========================================================== */

.filter-column {
    min-width:
        0 !important;

    padding:
        15px 12px !important;
}


.category-column {
    border-right:
        1px solid #edf0f3 !important;
}


.subcategory-column {
    background:
        #fbfbfa !important;

    border-left:
        0 !important;
}


.subcategory-column.hidden {
    display:
        none !important;
}



/* ==========================================================
   KATEGORİ BAŞLIKLARI
========================================================== */

.filter-column-header {
    height:
        49px !important;

    min-height:
        49px !important;

    display:
        flex !important;

    align-items:
        flex-end !important;

    justify-content:
        space-between !important;

    padding:
        0 2px 10px !important;

    margin-bottom:
        8px !important;

    border-bottom:
        1px solid #edf0f3 !important;
}


.filter-column-header h3 {
    margin:
        3px 0 0 !important;

    color:
        #172a43 !important;

    font-size:
        14px !important;
}


.mini-clear {
    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #9ba3ae !important;

    font-family:
        inherit !important;

    font-size:
        8px !important;

    cursor:
        pointer !important;
}



/* ==========================================================
   KATEGORİ LİSTESİ
========================================================== */

.category-list {
    display:
        grid !important;

    gap:
        4px !important;

    max-height:
        370px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    padding-right:
        2px !important;
}


.sidebar-category {
    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        38px !important;

    margin:
        0 !important;

    padding:
        4px 6px !important;

    border:
        0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    color:
        #45556b !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    text-align:
        left !important;

    cursor:
        pointer !important;
}


.sidebar-category:hover {
    background:
        #f5f7f9 !important;
}


.sidebar-category.active {
    background:
        #fff5df !important;

    color:
        #946a22 !important;
}


.sidebar-category-icon {
    width:
        26px !important;

    height:
        26px !important;

    min-width:
        26px !important;

    border-radius:
        6px !important;

    background:
        #eef2f6 !important;

    color:
        #60718a !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    font-size:
        10px !important;
}


.sidebar-category.active
.sidebar-category-icon {
    background:
        #f2dfb6 !important;

    color:
        #a1772c !important;
}



/* ==========================================================
   ALT KATEGORİLER
========================================================== */

.subcategory-list {
    display:
        grid !important;

    gap:
        4px !important;

    max-height:
        370px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;
}


.subcategory-button {
    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        37px !important;

    margin:
        0 !important;

    padding:
        6px 8px !important;

    border:
        0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:
        #748195 !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    line-height:
        1.25 !important;

    text-align:
        left !important;

    cursor:
        pointer !important;
}


.subcategory-button::before {
    display:
        none !important;
}


.subcategory-button:hover {
    background:
        #ffffff !important;

    color:
        #34465d !important;
}


.subcategory-button.active {
    background:
        #f4ead7 !important;

    color:
        #916925 !important;

    font-weight:
        650 !important;
}



/* ==========================================================
   ÜRÜN PANELİ
========================================================== */

.catalog-products {
    min-width:
        0 !important;

    min-height:
        465px !important;

    background:
        white !important;

    border:
        1px solid #e2e6ea !important;

    border-radius:
        13px !important;

    padding:
        17px !important;

    box-shadow:
        0 6px 22px
        rgba(28, 43, 61, .035) !important;
}


.workspace-empty {
    min-height:
        425px !important;

    display:
        flex;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        14px !important;
}


.workspace-empty h3 {
    margin:
        0 0 4px !important;

    color:
        #27394f !important;

    font-size:
        13px !important;
}


.workspace-empty p {
    margin:
        0 !important;

    color:
        #919ba8 !important;

    font-size:
        10px !important;
}


.products-area {
    margin:
        0 !important;
}


.products-heading {
    margin-bottom:
        15px !important;
}


.products-heading h2 {
    margin:
        3px 0 0 !important;

    font-size:
        18px !important;
}



/* ==========================================================
   ÜRÜN GRID
========================================================== */

.product-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    gap:
        12px !important;
}



/* ==========================================================
   1300 PX
========================================================== */

@media (max-width: 1300px) {

    .brand-strip {
        grid-template-columns:
            repeat(
                8,
                minmax(0, 1fr)
            ) !important;
    }


    .catalog-main-layout {
        grid-template-columns:
            370px minmax(0, 1fr) !important;
    }


    .product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

}



/* ==========================================================
   950 PX
========================================================== */

@media (max-width: 950px) {

    .brand-strip {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            ) !important;
    }


    .catalog-main-layout {
        grid-template-columns:
            1fr !important;
    }


    .filter-sidebar {
        position:
            static !important;

        min-height:
            auto !important;
    }


    .product-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

}



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

@media (max-width: 650px) {

    .header {
        height:
            50px !important;
    }


    .header-inner,
    .container {
        width:
            calc(100% - 20px) !important;
    }


    .ocaklar-logo {
        width:
            105px !important;

        height:
            40px !important;
    }


    .catalog-divider {
        height:
            22px !important;
    }


    .catalog-name {
        font-size:
            9px !important;

        letter-spacing:
            2px !important;
    }


    .top-search-area {
        padding:
            10px 0 !important;
    }


    .brand-strip {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }


    .brand-strip
    .brand-card {
        height:
            56px !important;
    }


    .filter-sidebar {
        grid-template-columns:
            1fr !important;
    }


    .category-column {
        border-right:
            0 !important;

        border-bottom:
            1px solid #edf0f3 !important;
    }


    .category-list,
    .subcategory-list {
        display:
            flex !important;

        gap:
            5px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        max-height:
            none !important;

        padding-bottom:
            4px !important;
    }


    .sidebar-category,
    .subcategory-button {
        width:
            auto !important;

        min-width:
            max-content !important;
    }


    .catalog-products {
        padding:
            12px !important;
    }


    .product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            8px !important;
    }

}

/* ==========================================================
   MARKA ALANINI DAHA KOMPAKT YAP
========================================================== */

.brand-strip {
    gap: 8px !important;
}

.brand-card {
    min-height: 56px !important;
    height: 56px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
}

.brand-card img {
    max-width: 60% !important;
    max-height: 26px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.brand-card strong {
    font-size: 13px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
}

/* ==========================================================
   İŞ ORTAKLARI - MARKALAR BAŞLIĞI İÇİNDE TEK SATIR
========================================================== */

.workspace-title-row {
    display: grid !important;

    grid-template-columns:
        145px
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 14px !important;

    margin-bottom: 11px !important;
}


/* SOL BAŞLIK */

.brands-heading-block {
    min-width: 0;
}


/* İŞ ORTAKLARI ANA ALANI */

.partner-strip-wrap {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 9px;
}


/* İŞ ORTAKLARIMIZ YAZISI */

.partner-strip-label {
    flex-shrink: 0;

    color: #b48a3e;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    white-space: nowrap;
}


/* LOGOLARIN BULUNACAĞI TEK SATIR */

.partner-strip {
    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 5px;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 1px 0;

    scrollbar-width: none;
}


.partner-strip::-webkit-scrollbar {
    display: none;
}


/* TEK İŞ ORTAĞI */

.partner-card {
    width: 66px;

    min-width: 66px;

    height: 34px;

    flex-shrink: 0;

    border:
        1px solid #e1e5e9;

    border-radius: 7px;

    background: #ffffff;

    padding: 4px 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-family: inherit;

    transition:
        border-color .15s,
        background .15s,
        box-shadow .15s,
        opacity .15s;
}


.partner-card:hover {
    border-color: #c7a96d;

    background: #fffdf8;

    box-shadow:
        0 3px 9px
        rgba(30, 45, 65, .06);
}


/* LOGO */

.partner-card img {
    display: block;

    max-width: 88%;

    max-height: 22px;

    width: auto;

    height: auto;

    object-fit: contain;
}


/* LOGO YOKSA İSİM */

.partner-card strong {
    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #3d4b5e;

    font-size: 8px;

    font-weight: 750;

    text-align: center;
}


/* İLERİDE SEÇİLİ İŞ ORTAĞI */

.partner-card.active {
    border:
        1.5px solid #b9914a;

    background: #fff8e9;

    box-shadow:
        0 3px 10px
        rgba(185, 145, 74, .12);
}


/* İLERİDE PASİF / KULLANILAMAZ */

.partner-card.disabled {
    opacity: .20;

    filter: grayscale(1);

    pointer-events: none;
}


/* ==========================================================
   DAR EKRANLAR
========================================================== */

@media (max-width: 950px) {

    .workspace-title-row {
        grid-template-columns:
            1fr
            auto !important;
    }

    .partner-strip-wrap {
        grid-column:
            1 / -1;

        grid-row:
            2;

        margin-top: 4px;
    }

}

/* ==========================================================
   MAIL GÖNDER - ŞİMDİLİK PASİF
========================================================== */

.mail-button {
    background: #b9914a !important;
    color: #ffffff !important;

    border:
        1px solid #b9914a !important;
}

.mail-button:disabled {
    opacity: .48 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;

    box-shadow:
        none !important;
}

/* ==========================================================
   TEMİZLE BUTONLARINI DAHA BELİRGİN YAP
========================================================== */


/* ÜSTTEKİ "SEÇİMİ TEMİZLE" */

.clear-button {
    min-height: 30px !important;

    padding:
        0 11px !important;

    border:
        1px solid #e1d2b5 !important;

    border-radius:
        7px !important;

    background:
        #fffaf1 !important;

    color:
        #9b742f !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    cursor:
        pointer !important;

    transition:
        .15s !important;
}


.clear-button:hover {
    background:
        #f7ecd6 !important;

    border-color:
        #b9914a !important;

    color:
        #7c571b !important;
}


/* SOLDaki KATEGORİ "TEMİZLE" */

.mini-clear {
    min-height:
        27px !important;

    padding:
        0 9px !important;

    border:
        1px solid #e2e6ea !important;

    border-radius:
        6px !important;

    background:
        #f8f9fa !important;

    color:
        #687487 !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    cursor:
        pointer !important;

    transition:
        .15s !important;
}


.mini-clear:hover {
    background:
        #f1f3f5 !important;

    border-color:
        #b9c0c9 !important;

    color:
        #a41810 !important;
}

/* ==========================================================
   KATEGORİ SVG SİMGELERİ
========================================================== */

.sidebar-category-icon img {
    width: 18px !important;
    height: 18px !important;

    display: block !important;

    object-fit: contain !important;
}

/* ==========================================================
   KATALOG MAİL GÖNDER MODALI
========================================================== */

.mail-send-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.mail-send-modal.active {
    display: flex;
}


.mail-send-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(12, 23, 40, .72);

    backdrop-filter:
        blur(4px);
}


.mail-send-window {
    position: relative;
    z-index: 2;

    width: min(620px, 100%);

    background: #ffffff;

    border-radius: 18px;

    padding: 32px;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .25);

    animation:
        modalOpen .22s ease;
}


.mail-send-close {
    position: absolute;

    right: 18px;
    top: 16px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    border:
        1px solid #e2e5e9;

    background: #ffffff;

    color: #697487;

    font-size: 24px;

    cursor: pointer;
}


.mail-send-header {
    padding-right: 45px;

    margin-bottom: 24px;
}


.mail-send-header h2 {
    margin:
        6px 0 7px;

    color:
        var(--navy);

    font-size: 25px;
}


.mail-send-header p {
    margin: 0;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.5;
}


.mail-send-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}


.mail-send-field {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.mail-send-field.full {
    grid-column:
        1 / -1;
}


.mail-send-field label {
    color:
        #58667a;

    font-size: 11px;

    font-weight: 700;
}


.mail-send-field input {
    width: 100%;

    height: 44px;

    border:
        1px solid #dfe3e8;

    border-radius: 9px;

    padding:
        0 13px;

    outline: none;

    font-family: inherit;

    font-size: 13px;

    color:
        var(--text);
}


.mail-send-field input:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(185,145,74,.10);
}


.mail-send-files {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 22px;

    padding:
        15px 17px;

    background:
        #f7f8fa;

    border:
        1px solid #eceef1;

    border-radius: 10px;
}


.mail-send-section-title {
    margin-right: auto;

    color:
        var(--navy);

    font-size: 11px;

    font-weight: 700;
}


.mail-send-check {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #536174;

    font-size: 12px;

    cursor: pointer;
}


.mail-send-check input {
    width: 16px;
    height: 16px;

    accent-color:
        var(--gold);
}


.mail-send-summary {
    margin-top: 16px;

    padding:
        14px 16px;

    border:
        1px solid #e8ebef;

    border-radius: 10px;

    background:
        #ffffff;

    color:
        #627084;

    font-size: 12px;

    line-height: 1.7;
}


.mail-send-summary strong {
    color:
        var(--navy);
}


.mail-send-actions {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid #eceef1;
}


.mail-send-cancel,
.mail-send-submit {
    height: 42px;

    padding:
        0 18px;

    border-radius: 8px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.mail-send-cancel {
    background: #ffffff;

    color:
        #687587;

    border:
        1px solid #dfe3e8;
}


.mail-send-submit {
    min-width: 130px;

    background:
        var(--gold);

    color: #ffffff;

    border:
        1px solid var(--gold);
}


.mail-send-submit:hover {
    filter:
        brightness(.96);
}


.mail-button:hover {
    background:
        #a77e37 !important;

    border-color:
        #a77e37 !important;

    transform:
        translateY(-1px);
}


@media (max-width: 650px) {

    .mail-send-window {
        padding:
            27px 20px 20px;
    }


    .mail-send-grid {
        grid-template-columns:
            1fr;
    }


    .mail-send-field.full {
        grid-column:
            auto;
    }


    .mail-send-files {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            11px;
    }


    .mail-send-section-title {
        margin-right: 0;
    }

}

/* Ürün görsel alanı - düz beyaz arka plan */
.product-image,
.product-image::before,
.product-image::after {
    background: #ffffff !important;
    background-image: none !important;
}

/* Ürün kartı + ürün detay modalı tamamen beyaz */
.product-image,
.modal-product-visual,
.modal-image-area {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

.product-image img,
.modal-image-area img {
    background: #ffffff !important;
}

/* Ayrı iş ortağı / marka panelleri; dar ekranda logolar sıkışmaz. */
.catalog-selector-panel {
    min-width: 0;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    border: 1px solid #e2e6ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(28, 43, 61, .035);
}

.selector-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.selector-heading {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

.selector-heading h2 {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.selector-heading h2::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 3px;
    background: var(--gold);
}

.selector-heading p {
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #7d8998;
    font-size: 11px;
    line-height: 1.5;
}

.filter-clear-button {
    flex-shrink: 0;
    min-height: 27px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e6ea !important;
    border-radius: 6px !important;
    background: #f8f9fa !important;
    color: #687487 !important;
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer !important;
}

.filter-clear-button:hover {
    background: #f0f2f5 !important;
    border-color: #bdc5cf !important;
    color: #526174 !important;
}

.filter-clear-button.filter-active {
    color: #a41810 !important;
    border-color: #e9bbb7 !important;
    background: #fff4f2 !important;
}

.filter-clear-button.filter-active:hover {
    border-color: #ca7971 !important;
    background: #fce8e4 !important;
}

.selector-scroll-hint {
    flex-shrink: 0;
    color: #8b96a5;
    font-size: 11px;
}

.catalog-selector-panel .selector-scroll {
    width: 100%;
    min-width: 0;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 3px 2px 8px !important;
    scrollbar-width: thin;
    scrollbar-color: #bea16d #f0f2f4;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.catalog-selector-panel .selector-scroll::-webkit-scrollbar {
    display: block;
    height: 9px;
}

.catalog-selector-panel .selector-scroll::-webkit-scrollbar-track {
    background: #f0f2f4;
    border-radius: 8px;
}

.catalog-selector-panel .selector-scroll::-webkit-scrollbar-thumb {
    background: #bea16d;
    border: 2px solid #f0f2f4;
    border-radius: 8px;
}

.catalog-selector-panel .selector-scroll::-webkit-scrollbar-thumb:hover {
    background: #a9884b;
}

.catalog-selector-panel .partner-strip {
    display: flex;
    flex-wrap: nowrap;
}

.catalog-selector-panel .partner-card {
    width: 100px;
    min-width: 100px;
    height: 42px;
    padding: 2px 4px;
    border-radius: 9px;
}

.catalog-selector-panel .partner-card img {
    max-width: 96%;
    max-height: 34px;
}

.catalog-selector-panel .partner-card strong {
    font-size: 10px;
}

.catalog-selector-panel .brand-strip {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: none !important;
    grid-template-rows: repeat(3, 44px);
    grid-auto-columns: minmax(108px, 1fr);
}

.catalog-selector-panel .brand-strip .brand-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 3px 4px !important;
    border-radius: 9px !important;
}

.catalog-selector-panel .brand-strip .brand-card img {
    max-width: 96% !important;
    max-height: 36px !important;
}

.catalog-selector-panel .selector-scroll:focus-visible,
.catalog-selector-panel button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.search-box input {
    min-width: 0;
}

@media (max-width: 600px) {
    .catalog-selector-panel {
        padding: 9px 10px !important;
        border-radius: 12px !important;
    }

    .selector-panel-heading {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 6px;
    }

    .selector-heading h2 {
        font-size: 15px;
    }

    .selector-heading p {
        font-size: 10px;
    }

    .selector-scroll-hint {
        display: none;
    }

    .catalog-selector-panel .partner-card {
        width: 88px;
        min-width: 88px;
        height: 42px;
    }

    .catalog-selector-panel .brand-strip {
        grid-template-rows: repeat(2, 44px);
        grid-auto-columns: 88px;
    }

    .filter-sidebar .category-list {
        display: grid !important;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: repeat(2, 44px);
        grid-auto-columns: max-content;
    }

    .catalog-selector-panel .brand-strip .brand-card {
        min-height: 44px !important;
        height: 44px !important;
    }

    .catalog-selector-panel .brand-strip .brand-card img {
        max-height: 34px !important;
    }
}

.filter-sidebar .filter-column-header {
    height: 34px !important;
    min-height: 34px !important;
    align-items: center !important;
    gap: 6px;
    padding: 0 0 7px !important;
    margin-bottom: 6px !important;
}

.filter-sidebar .filter-column-header h3 {
    margin: 0 !important;
    font-size: 13px !important;
}

/* Compact public product layout on phones. */
@media (max-width: 600px) {
    .products-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px !important;
    }
    .products-heading > div:first-child {grid-column: 1;grid-row: 1;min-width: 0;}
    .products-heading h2 {font-size: 16px !important;overflow-wrap: anywhere;}
    .products-heading .small-title {font-size: 9px;letter-spacing: 1.5px;}
    .products-tools {display: contents;}
    .product-count {grid-column: 2;grid-row: 1;font-size: 11px;padding: 6px 10px;white-space: nowrap;}
    .export-buttons {grid-column: 1 / -1;grid-row: 2;display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px;}
    #excelDownloadBtn {display: none !important;}
    .export-buttons .export-button {width: 100%;min-width: 0;height: 38px;padding: 0 8px;font-size: 12px;}
    .product-grid {gap: 7px !important;}
    .product-card {min-width: 0;border-radius: 10px;}
    .product-card:hover {transform: none;}
    .product-image {height: auto;aspect-ratio: 1;padding: 8px;}
    .product-info {padding: 8px;}
    .product-brand {font-size: 9px;letter-spacing: .5px;overflow-wrap: anywhere;}
    .product-name {font-size: 11.5px;line-height: 1.4;margin: 4px 0 9px;min-height: 48px;overflow-wrap: anywhere;}
    .product-details {font-size: 10px;line-height: 1.4;gap: 4px;padding-top: 7px;overflow-wrap: anywhere;}
    .product-details > div:last-child {font-size: 10px !important;}
    .product-image .fake-product {width: 70%;height: 85%;font-size: 9px;}
}
@media (min-width: 360px) and (max-width: 600px) {
    .product-grid {grid-template-columns: repeat(3,minmax(0,1fr)) !important;}
}