/* =========================================================
   TEKNOVIP BÄ°LGÄ°SAYAR
   TAM ANA SAYFA TASARIM CSS
   ========================================================= */


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

:root {

    --primary: #5b21b6;
    --primary-dark: #4c1d95;
    --primary-light: #ede9fe;

    --blue: #2563eb;
    --indigo: #6366f1;

    --dark: #111827;
    --text: #374151;
    --muted: #6b7280;

    --white: #ffffff;

    --background: #ffffff;
    --soft-background: #f8fafc;
    --light-background: #f1f5f9;

    --border: #e5e7eb;

    --success: #16a34a;
    --danger: #dc2626;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 8px 24px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 16px 40px rgba(15, 23, 42, 0.12);

}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--dark);

    background: var(--background);

    line-height: 1.5;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    max-width: 100%;

    display: block;

}


button,
input {

    font-family: inherit;

}


button {

    cursor: pointer;

}


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

.container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding-left: 24px;

    padding-right: 24px;

}


/* =========================================================
   TOP BAR
   ========================================================= */

.top-bar {

    height: 36px;

    background: var(--soft-background);

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

    color: var(--muted);

    font-size: 13px;

}


.top-bar-inner {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.top-bar-links {

    display: flex;

    align-items: center;

    gap: 20px;

}


.top-bar-links a:hover {

    color: var(--primary);

}


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

.main-header {

    background: var(--white);

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

}


.header-inner {

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 20px;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo {

    min-width: 150px;

    display: flex;

    align-items: center;

    gap: 10px;

}


.logo-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #5b21b6,
            #2563eb
        );

    color: white;

    font-weight: 800;

}


.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}


.logo-text strong {

    font-size: 18px;

}


.logo-text small {

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   CATEGORY BUTTON
   ========================================================= */

.category-button {

    display: flex;

    align-items: center;

    gap: 8px;

    height: 42px;

    padding: 0 16px;

    border: none;

    border-radius: var(--radius-sm);

    background: var(--light-background);

    color: var(--dark);

    font-weight: 700;

}


.category-button:hover {

    background: var(--primary-light);

    color: var(--primary);

}


/* =========================================================
   SEARCH
   ========================================================= */

.search-form {

    flex: 1;

    height: 42px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border: 1px solid #d1d5db;

    border-radius: var(--radius-sm);

}


.search-form input {

    flex: 1;

    width: 100%;

    height: 100%;

    padding: 0 15px;

    border: none;

    outline: none;

}


.search-form input:focus {

    box-shadow:
        inset 0 0 0 1px var(--primary);

}


.search-form button {

    width: 52px;

    height: 100%;

    border: none;

    background: var(--primary);

    color: white;

    font-size: 18px;

}


.search-form button:hover {

    background: var(--primary-dark);

}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}


.header-action {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    color: var(--text);

}


.header-action span {

    font-size: 20px;

    line-height: 1;

}


.header-action small {

    font-size: 10px;

    white-space: nowrap;

}


.header-action:hover {

    color: var(--primary);

}


.cart-action b {

    position: absolute;

    top: -8px;

    right: -8px;

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--danger);

    color: white;

    font-size: 10px;

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-navigation {

    background: white;

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

}


.navigation-inner {

    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 28px;

    overflow-x: auto;

}


.navigation-inner a {

    font-size: 13px;

    font-weight: 700;

    color: var(--text);

    white-space: nowrap;

}


.navigation-inner a:hover {

    color: var(--primary);

}


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

.hero-section {

    padding: 40px 0 0;

    background:
        linear-gradient(
            135deg,
            #f8f7ff 0%,
            #ffffff 48%,
            #eef4ff 100%
        );

}


.hero-grid {

    position: relative;

    min-height: 430px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 40px;

}


.hero-content {

    position: relative;

    z-index: 2;

    padding: 30px 0 100px;

}


.hero-label {

    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 12px;

    border-radius: 30px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;

}


.hero-content h1 {

    margin-bottom: 18px;

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.hero-content h1 strong {

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.hero-content p {

    max-width: 500px;

    margin-bottom: 28px;

    color: var(--text);

    font-size: 17px;

}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 20px;

    border-radius: var(--radius-sm);

    border: none;

    font-weight: 700;

    transition:
        0.2s ease;

}


.btn:hover {

    transform: translateY(-2px);

}


.btn-primary {

    background: var(--primary);

    color: white;

    box-shadow:
        0 8px 18px
        rgba(91, 33, 182, 0.22);

}


.btn-primary:hover {

    background: var(--primary-dark);

}


.btn-outline {

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

    background: white;

    color: var(--primary);

}


.btn-outline:hover {

    background: var(--primary-light);

}


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

.hero-visual {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.hero-glow {

    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, 0.25),
            transparent 70%
        );

}


.computer-placeholder {

    position: relative;

    z-index: 2;

    width: 260px;

    height: 260px;

    padding: 18px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #1f2937,
            #111827
        );

    box-shadow:
        0 25px 50px
        rgba(15, 23, 42, 0.30);

}


.computer-top {

    height: 30px;

    margin-bottom: 12px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #2563eb
        );

}


.computer-body {

    height: 170px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-radius: 12px;

    background: #030712;

}


.computer-fan {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 5px solid #6366f1;

    box-shadow:
        0 0 20px
        rgba(99, 102, 241, 0.8);

}


.fan-two {

    border-color: #8b5cf6;

}


.fan-three {

    border-color: #2563eb;

}


/* =========================================================
   TRUST CARDS
   ========================================================= */

.trust-cards {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 0;

    display: grid;

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

    gap: 14px;

}


.trust-card {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 78px;

    padding: 14px;

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

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.92);

    box-shadow: var(--shadow-sm);

}


.trust-icon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--primary-light);

    font-size: 20px;

}


.trust-card strong {

    display: block;

    margin-bottom: 3px;

    font-size: 11px;

}


.trust-card small {

    display: block;

    color: var(--muted);

    font-size: 10px;

}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {

    padding: 70px 0;

}


.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;

}


.section-title {

    font-size: 28px;

    line-height: 1.2;

}


.section-link {

    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   CATEGORY GRID
   ========================================================= */

.categories-section {

    background: white;

}


.category-grid {

    display: grid;

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

    gap: 16px;

}


.category-card {

    position: relative;

    min-height: 190px;

    padding: 20px;

    overflow: hidden;

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

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    box-shadow: var(--shadow-sm);

    transition:
        0.25s ease;

}


.category-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

    border-color: #c4b5fd;

}


.category-card strong {

    position: relative;

    z-index: 2;

    font-size: 15px;

}


.category-image {

    position: absolute;

    right: 12px;

    bottom: 12px;

    font-size: 60px;

    opacity: 0.75;

}


.category-arrow {

    position: absolute;

    left: 20px;

    bottom: 18px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 800;

}


/* =========================================================
   PC BUILDER
   ========================================================= */

.pc-builder-section {

    background:
        linear-gradient(
            135deg,
            #f8f7ff,
            #eef4ff
        );

}


.builder-layout {

    display: grid;

    grid-template-columns:
        230px
        1fr
        270px;

    gap: 22px;

    align-items: start;

}


.builder-steps {

    padding: 22px;

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

    border-radius: var(--radius-lg);

    background: white;

}


.builder-steps p {

    margin: 8px 0 20px;

    color: var(--muted);

    font-size: 13px;

}


.builder-step {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 0;

    color: var(--text);

    font-size: 12px;

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

}


.builder-step span {

    width: 26px;

    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--light-background);

    font-weight: 700;

}


.builder-step.active {

    color: var(--primary);

    font-weight: 700;

}


.builder-step.active span {

    background: var(--primary);

    color: white;

}


.builder-products {

    min-width: 0;

}


.product-grid {

    display: grid;

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

    gap: 18px;

}


.product-card {

    position: relative;

    padding: 18px;

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

    border-radius: var(--radius-lg);

    background: white;

    box-shadow: var(--shadow-sm);

    transition:
        0.25s ease;

}


.product-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}


.product-image {

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2ff
        );

    font-size: 70px;

}


.product-card small {

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

}


.product-card h3 {

    min-height: 42px;

    margin: 6px 0 12px;

    font-size: 14px;

    line-height: 1.4;

}


.product-card > strong {

    display: block;

    margin-bottom: 14px;

    font-size: 18px;

}


.product-card .btn {

    width: 100%;

}


.product-cart-button {

    position: absolute;

    right: 15px;

    bottom: 15px;

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 10px;

    background: var(--primary-light);

    color: var(--primary);

}


.product-cart-button:hover {

    background: var(--primary);

    color: white;

}


/* =========================================================
   BUILDER SUMMARY
   ========================================================= */

.builder-summary {

    padding: 22px;

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            #111827,
            #1f2937
        );

    color: white;

    box-shadow: var(--shadow-lg);

}


.builder-summary h3 {

    margin-bottom: 20px;

}


.builder-summary ul {

    list-style: none;

}


.builder-summary li {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 0;

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

    color: #e5e7eb;

    font-size: 12px;

}


.builder-summary li span {

    color: #9ca3af;

    text-align: right;

}


.builder-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 22px 0;

}


.builder-total strong {

    font-size: 20px;

}


.builder-summary .btn {

    width: 100%;

}


/* =========================================================
   PRODUCTS SECTION
   ========================================================= */

.products-section {

    background: white;

}


.products-section .product-grid {

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

}


.products-section .product-card {

    min-width: 0;

}


.products-section .product-image {

    height: 170px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    padding: 60px 0 40px;

    background: #111827;

    color: white;

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1fr;

    gap: 40px;

}


.site-footer h3 {

    margin-bottom: 16px;

    font-size: 16px;

}


.site-footer p {

    margin-bottom: 16px;

    color: #9ca3af;

    font-size: 13px;

}


.site-footer a {

    display: block;

    margin-bottom: 10px;

    color: #9ca3af;

    font-size: 13px;

}


.site-footer a:hover {

    color: white;

}


.newsletter-form {

    display: flex;

    height: 42px;

    overflow: hidden;

    border-radius: 8px;

}


.newsletter-form input {

    flex: 1;

    min-width: 0;

    padding: 0 12px;

    border: none;

    outline: none;

}


.newsletter-form button {

    width: 48px;

    border: none;

    background: var(--primary);

    color: white;

    font-size: 18px;

}


.footer-brand strong {

    display: block;

    font-size: 24px;

}


.footer-brand small {

    display: block;

    margin-bottom: 22px;

    color: #9ca3af;

}


.social-links {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.social-links a {

    margin: 0;

}


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

@media (max-width: 1150px) {

    .category-grid {

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

    }


    .products-section .product-grid {

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

    }


    .builder-layout {

        grid-template-columns:
            210px
            1fr;

    }


    .builder-summary {

        grid-column: 1 / -1;

    }

}


@media (max-width: 900px) {

    .header-inner {

        flex-wrap: wrap;

        padding-top: 14px;

        padding-bottom: 14px;

    }


    .search-form {

        order: 3;

        flex-basis: 100%;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

        padding-bottom: 130px;

    }


    .hero-content {

        padding-bottom: 0;

    }


    .hero-visual {

        display: none;

    }


    .trust-cards {

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

    }


    .footer-grid {

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

    }

}


@media (max-width: 650px) {

    .container {

        padding-left: 16px;

        padding-right: 16px;

    }


    .top-bar {

        display: none;

    }


    .header-actions {

        gap: 9px;

    }


    .header-action small {

        display: none;

    }


    .navigation-inner {

        gap: 18px;

    }


    .hero-content h1 {

        font-size: 42px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-buttons .btn {

        width: 100%;

    }


    .trust-cards {

        left: 16px;

        right: 16px;

    }


    .category-grid {

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

    }


    .builder-layout {

        grid-template-columns:
            1fr;

    }


    .product-grid,

    .products-section .product-grid {

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

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 420px) {

    .logo-text {

        display: none;

    }


    .category-button {

        padding: 0 12px;

    }


    .category-grid {

        grid-template-columns:
            1fr;

    }


    .product-grid,

    .products-section .product-grid {

        grid-template-columns:
            1fr;

    }


    .trust-cards {

        grid-template-columns:
            1fr;

    }


    .hero-grid {

        padding-bottom: 330px;

    }

}
/* =====================================================
   SABİT SOSYAL MEDYA / İLETİŞİM BUTONLARI
   ===================================================== */

.floating-social-buttons {

    position: fixed;

    left: 20px;
    bottom: 25px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    z-index: 9999;
}


.floating-social-button {

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 22px;
    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.floating-social-button:hover {

    color: #ffffff;

    transform: translateY(-3px) scale(1.05);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.28);
}


/* TELEFON */

.floating-phone {

    background: #1683d8;
}


/* WHATSAPP */

.floating-whatsapp {

    background: #25d366;
}


/* INSTAGRAM */

.floating-instagram {

    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );
}


/* TIKTOK */

.floating-tiktok {

    background: #111111;
}


/* =====================================================
   MOBÄ°L
   ===================================================== */

@media (max-width: 768px) {

    .floating-social-buttons {

        left: 12px;
        bottom: 18px;

        gap: 8px;
    }


    .floating-social-button {

        width: 44px;
        height: 44px;

        font-size: 20px;
    }

}
/* =========================================================
   TEKNOVIP - ÃœRÃœN DETAY YAZI DÃœZENÄ°
   ========================================================= */

/*
 * Sadece ürün detayının alt sekmelerindeki yazıları düzenler.
 * Sitenin geri kalan tasarımına dokunmaz.
 */

.product-detail-page .product-tab-button {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.product-detail-page .product-tab-content {
    padding: 24px;
}

/* Ürün açıklaması başlığı */
.product-detail-page .description-title {
    margin: 0 0 16px;

    color: #172033;

    font-size: 20px;
    line-height: 1.35;

    font-weight: 700;

    letter-spacing: 0;
}

/* Ürün açıklaması */
.product-detail-page .description-content {
    color: #374151;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    line-height: 1.85;

    font-weight: 400;

    letter-spacing: 0;

    white-space: normal;

    word-break: normal;

    overflow-wrap: break-word;
}

/* Teknik özellikler */
.product-detail-page .technical-row strong {
    color: #374151;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 700;
}

.product-detail-page .technical-row span {
    color: #172033;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 600;
}

/* DiÄŸer sekmeler */
.product-detail-page .tab-placeholder {
    color: #667085;

    font-size: 13px;

    line-height: 1.75;
}

.product-detail-page .tab-placeholder strong {
    color: #344054;

    font-size: 15px;

    font-weight: 700;
}

/* DeÄŸerlendirme metni */
.product-detail-page .reviews-placeholder p {
    color: #667085;

    font-size: 13px;

    line-height: 1.75;
}

/* Mobil */
@media (max-width: 768px) {

    .product-detail-page .product-tab-content {
        padding: 20px 17px;
    }

    .product-detail-page .description-title {
        font-size: 18px;
    }

    .product-detail-page .description-content {
        font-size: 14px;

        line-height: 1.8;
    }

    .product-detail-page .technical-row {
        grid-template-columns: 1fr;

        gap: 5px;

        padding: 13px 15px;
    }

    .product-detail-page .technical-row strong,
    .product-detail-page .technical-row span {
        font-size: 12px;
    }
}
/* =========================================================
   HEADER KATEGORİ MENÜSÜ
   ========================================================= */

.category-menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

.category-button {
    cursor: pointer;
}

.category-button-chevron {
    font-size: 15px;
    line-height: 1;
    transition: transform .2s ease;
}

.category-menu-wrap.is-open .category-button-chevron {
    transform: rotate(180deg);
}

.category-menu-wrap.is-open .category-button {
    background: var(--primary-light);
    color: var(--primary);
}

.header-category-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    width: 310px;
    padding: 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}

.header-category-menu[hidden] {
    display: none;
}

.header-category-menu-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid #eef0f3;
}

.header-category-menu-title strong {
    font-size: 15px;
}

.header-category-menu-title span {
    color: var(--muted);
    font-size: 12px;
}

.header-category-list {
    padding-top: 6px;
}

.header-category-item {
    position: relative;
}

.header-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.header-category-link:hover {
    background: var(--light-background);
    color: var(--primary);
}

.header-category-arrow {
    font-size: 20px;
    line-height: 1;
}

.header-category-submenu {
    display: none;
    position: absolute;
    top: -6px;
    left: calc(100% + 8px);
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14);
}

.header-category-item.has-children:hover .header-category-submenu {
    display: block;
}

.header-category-submenu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--dark);
    text-decoration: none;
    font-size: 13px;
}

.header-category-submenu a:hover {
    background: var(--light-background);
    color: var(--primary);
}

.header-category-empty {
    padding: 16px 12px;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .header-category-menu {
        left: 0;
        width: min(310px, calc(100vw - 32px));
    }

    .header-category-submenu {
        position: static;
        margin: 0 8px 6px;
        box-shadow: none;
        border-radius: 8px;
    }

    .header-category-item.has-children:hover .header-category-submenu {
        display: none;
    }

    .header-category-item.has-children:focus-within .header-category-submenu {
        display: block;
    }
}

/* =========================================================
   HEADER KATEGORİ MENÜSÜ
   ========================================================= */
.category-menu-wrap{position:relative;flex:0 0 auto}
.category-button{cursor:pointer}
.category-button-chevron{font-size:15px;line-height:1;transition:transform .2s ease}
.category-menu-wrap.is-open .category-button-chevron{transform:rotate(180deg)}
.category-menu-wrap.is-open .category-button{background:var(--primary-light);color:var(--primary)}
.header-category-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:1000;width:310px;padding:10px;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.16)}
.header-category-menu[hidden]{display:none}
.header-category-menu-title{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;border-bottom:1px solid #eef0f3}
.header-category-menu-title strong{font-size:15px}
.header-category-menu-title span{color:var(--muted);font-size:12px}
.header-category-list{padding-top:6px}
.header-category-item{position:relative}
.header-category-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 12px;border-radius:9px;color:var(--dark);text-decoration:none;font-size:14px;font-weight:600}
.header-category-link:hover{background:var(--light-background);color:var(--primary)}
.header-category-arrow{font-size:20px;line-height:1}
.header-category-submenu{display:none;position:absolute;top:-6px;left:calc(100% + 8px);min-width:220px;padding:8px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.14)}
.header-category-item.has-children:hover .header-category-submenu{display:block}
.header-category-submenu a{display:block;padding:10px 12px;border-radius:8px;color:var(--dark);text-decoration:none;font-size:13px}
.header-category-submenu a:hover{background:var(--light-background);color:var(--primary)}
.header-category-empty{padding:16px 12px;color:var(--muted);font-size:13px}
@media(max-width:900px){.header-category-menu{left:0;width:min(310px,calc(100vw - 32px))}.header-category-submenu{position:static;margin:0 8px 6px;box-shadow:none;border-radius:8px}.header-category-item.has-children:hover .header-category-submenu{display:none}.header-category-item.has-children:focus-within .header-category-submenu{display:block}}