/*
 * Kıbrıs Bilgisayarcım - Showroom Header 2026
 * Final visual layer. Loaded after legacy header styles on purpose.
 */
:root{
    --hdr-orange:#f97316;
    --hdr-orange-dark:#ea580c;
    --hdr-orange-soft:#fff7ed;
    --hdr-ink:#111827;
    --hdr-slate:#475569;
    --hdr-muted:#64748b;
    --hdr-line:#e7eaf0;
    --hdr-surface:#ffffff;
    --hdr-soft:#f8fafc;
    --hdr-radius:16px;
    --hdr-shadow:0 12px 35px rgba(15,23,42,.08);
}

.showroom-header{
    position:sticky;
    top:0;
    z-index:1300;
    width:100%;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(15,23,42,.07);
    box-shadow:0 7px 25px rgba(15,23,42,.055);
    backdrop-filter:saturate(150%) blur(14px);
    -webkit-backdrop-filter:saturate(150%) blur(14px);
}

.showroom-header *{box-sizing:border-box}
.showroom-header .site-shell-container{width:min(1440px,calc(100% - 40px));margin-inline:auto}

/* slim service strip */
.showroom-header .top-strip{
    min-height:34px;
    background:#111827;
    color:#cbd5e1;
    border:0;
}
.showroom-header .top-strip-inner{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}
.showroom-header .top-strip-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.showroom-header .top-strip-left i{color:#fb923c}
.showroom-header .top-strip-right{display:flex;align-items:center;gap:18px;white-space:nowrap}
.showroom-header .top-strip-right a{
    color:#cbd5e1;
    font-size:11px;
    font-weight:700;
    opacity:.9;
    transition:.18s ease;
}
.showroom-header .top-strip-right a:hover{color:#fff;opacity:1}

/* main row */
.showroom-header .header-main{background:#fff;border:0;padding:0}
.showroom-header .header-main-inner{
    min-height:88px;
    display:grid;
    grid-template-columns:minmax(185px,245px) minmax(320px,1fr) auto;
    align-items:center;
    gap:24px;
    padding-block:14px;
}
.showroom-header .logo{
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    text-decoration:none;
}
.showroom-header .logo img{
    display:block;
    width:min(100%,225px);
    height:auto;
    max-height:48px;
    object-fit:contain;
    object-position:left center;
}

/* search is the main visual anchor */
.showroom-header .search-trigger-wrap{min-width:0;width:100%}
.showroom-header .search-trigger{
    width:100%;
    min-height:54px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px;
    align-items:center;
    overflow:hidden;
    border:1px solid #dfe4eb;
    border-radius:16px;
    background:#f8fafc;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.showroom-header .search-trigger:focus-within{
    border-color:rgba(249,115,22,.7);
    background:#fff;
    box-shadow:0 0 0 4px rgba(249,115,22,.10),0 8px 24px rgba(15,23,42,.06);
}
.showroom-header .search-trigger input{
    width:100%;
    min-width:0;
    height:52px;
    padding:0 8px 0 18px;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:var(--hdr-ink);
    font-size:14px;
    font-weight:600;
    box-shadow:none!important;
}
.showroom-header .search-trigger input::placeholder{color:#8a97a8;font-weight:500}
.showroom-header .search-trigger-btn{
    width:42px;
    height:42px;
    margin-right:5px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,var(--hdr-orange),var(--hdr-orange-dark));
    color:#fff;
    font-size:15px;
    box-shadow:0 8px 18px rgba(249,115,22,.22);
    transition:.18s ease;
}
.showroom-header .search-trigger-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(249,115,22,.28)}

/* right controls */
.showroom-header .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
.showroom-header .header-track-wrap{display:block}
.showroom-header .header-track-form{
    height:52px;
    min-height:52px;
    display:grid;
    grid-template-columns:34px 112px 0;
    align-items:center;
    gap:4px;
    padding:0 9px;
    border:1px solid var(--hdr-line);
    border-radius:14px;
    background:#fff;
    box-shadow:none;
    transition:.18s ease;
}
.showroom-header .header-track-form:focus-within{border-color:#fdba74;box-shadow:0 0 0 3px rgba(249,115,22,.08)}
.showroom-header .header-track-icon{
    width:32px;height:32px;border-radius:10px;background:var(--hdr-orange-soft);color:var(--hdr-orange);font-size:13px;
}
.showroom-header .header-track-form input{width:112px;font-size:12px;font-weight:650;color:#334155}
.showroom-header .header-track-form button{
    width:0;min-width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;
}
.showroom-header .header-track-form:focus-within{grid-template-columns:34px 112px 62px}
.showroom-header .header-track-form:focus-within button{
    width:62px;min-width:62px;opacity:1;pointer-events:auto;height:34px;border-radius:9px;font-size:11px;
}

.showroom-header .header-user,
.showroom-header .header-mini-cart{position:relative}
.showroom-header .header-icon{
    position:relative;
    min-width:62px;
    height:52px;
    padding:0 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:1px solid transparent;
    border-radius:14px;
    background:#fff;
    color:var(--hdr-ink);
    text-decoration:none;
    transition:.18s ease;
}
.showroom-header .header-icon:hover{border-color:#fed7aa;background:#fffaf6;color:var(--hdr-orange-dark)}
.showroom-header .header-icon-emoji,
.showroom-header .header-user-avatar{
    width:25px;height:25px;display:grid;place-items:center;border-radius:9px;background:#f1f5f9;color:#334155;font-size:13px;
}
.showroom-header .header-user-avatar{background:#fff0e6;color:var(--hdr-orange-dark);font-size:11px;font-weight:900}
.showroom-header .header-icon:hover .header-icon-emoji{background:#ffedd5;color:var(--hdr-orange-dark)}
.showroom-header .header-user-label,
.showroom-header .header-icon>span:not(.header-icon-emoji):not(.header-user-avatar){
    max-width:76px;
    font-size:10px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.showroom-header .cart-count{
    position:absolute;
    top:3px;
    right:5px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:99px;
    background:var(--hdr-orange);
    color:#fff;
    font-size:9px;
    font-weight:900;
}

/* navigation row */
.showroom-header .header-nav{position:relative;background:#fff;border-top:1px solid #f0f2f5}
.showroom-header .nav-inner{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:8px;
    overflow:visible;
}
.showroom-header .nav-item{position:relative;flex:0 0 auto}
.showroom-header .nav-item>a,
.showroom-header .mega-trigger{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 11px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#334155;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    transition:.17s ease;
}
.showroom-header .nav-item>a:hover{background:#f8fafc;color:var(--hdr-orange-dark)}
.showroom-header .mega-trigger{
    min-width:132px;
    justify-content:center;
    background:#111827;
    color:#fff;
    cursor:pointer;
}
.showroom-header .mega-trigger:before{content:"\f0c9";font-family:"Font Awesome 6 Free";font-weight:900;color:#fb923c}
.showroom-header .mega-trigger:hover{background:#1f2937}
.showroom-header .mega-trigger .caret{font-size:8px;opacity:.65}

.showroom-header .clean-header-menu{display:flex!important;align-items:center!important;gap:4px!important;width:auto!important;min-width:0;overflow-x:auto;scrollbar-width:none}
.showroom-header .clean-header-menu::-webkit-scrollbar{display:none}
.showroom-header .clean-header-menu a{
    min-height:36px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    color:#334155!important;
    font-size:12px!important;
    font-weight:800!important;
    background:transparent!important;
    box-shadow:none!important;
}
.showroom-header .clean-header-menu a i{color:#94a3b8!important;font-size:12px!important}
.showroom-header .clean-header-menu a:hover{background:#f8fafc!important;color:var(--hdr-orange-dark)!important;transform:none!important}
.showroom-header .clean-header-menu a:hover i{color:var(--hdr-orange)!important}
.showroom-header .clean-header-menu .campaign-link{background:#fff7ed!important;color:#c2410c!important}
.showroom-header .clean-header-menu .campaign-link i{color:#f97316!important}

/* dropdowns */
.showroom-header .nav-dropdown,
.showroom-header .user-dropdown-menu,
.showroom-header .mini-cart-dropdown{
    border:1px solid var(--hdr-line);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--hdr-shadow);
}
.showroom-header .user-dropdown-menu,
.showroom-header .mini-cart-dropdown{top:calc(100% + 9px)}
.showroom-header .nav-dropdown{top:calc(100% + 5px)}

/* mega menu gets showroom proportions */
.showroom-header .mega-host{position:relative}
.showroom-header .mega-menu{
    top:8px;
    border:1px solid #e5e7eb;
    border-radius:20px;
    background:#fff;
    box-shadow:0 25px 60px rgba(15,23,42,.16);
    overflow:hidden;
}
.showroom-header .mega-grid{min-height:470px}
.showroom-header .mega-left{background:#f8fafc;border-right:1px solid #e9edf3}
.showroom-header .mega-left-item{border-radius:10px;margin:3px 6px;padding:10px 11px;color:#334155}
.showroom-header .mega-left-item.active{background:#fff7ed;color:#c2410c;box-shadow:inset 3px 0 0 var(--hdr-orange)}
.showroom-header .mega-cat-visual{background:#fff;border:1px solid #e9edf3}
.showroom-header .mega-pane-all{color:var(--hdr-orange-dark)}
.showroom-header .mega-product-card{border-radius:14px;border:1px solid #edf0f4;box-shadow:none;transition:.18s ease}
.showroom-header .mega-product-card:hover{transform:translateY(-2px);border-color:#fed7aa;box-shadow:0 10px 26px rgba(15,23,42,.08)}

/* search panel */
.search-panel{
    position:fixed!important;
    top:112px!important;
    left:50%!important;
    transform:translateX(-50%) translateY(-8px)!important;
    width:min(960px,calc(100vw - 32px))!important;
    max-height:min(720px,calc(100vh - 140px))!important;
    overflow:auto!important;
    border:1px solid #e5e7eb!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 30px 80px rgba(15,23,42,.2)!important;
}
.search-panel.active,
.search-panel.open,
.search-panel.is-open{transform:translateX(-50%) translateY(0)!important}
.search-panel .search-panel-head{background:#fff!important;border-bottom:1px solid #edf0f4!important}
.search-panel .search-panel-form{background:#f8fafc!important;border:1px solid #dfe4eb!important;border-radius:14px!important;box-shadow:none!important}
.search-panel .search-panel-form:focus-within{border-color:#fdba74!important;box-shadow:0 0 0 4px rgba(249,115,22,.09)!important}

/* new mobile bottom bar */
.showroom-mobile-nav{display:none}

@media(max-width:1180px){
    .showroom-header .site-shell-container{width:min(100% - 28px,1320px)}
    .showroom-header .header-main-inner{grid-template-columns:190px minmax(280px,1fr) auto;gap:14px}
    .showroom-header .header-track-wrap{display:none}
    .showroom-header .top-strip-right{gap:12px}
    .showroom-header .top-strip-right a:nth-child(4),
    .showroom-header .top-strip-right a:nth-child(5){display:none}
}

@media(max-width:900px){
    body{padding-bottom:82px!important}
    .showroom-header{top:0}
    .showroom-header .top-strip{display:none!important}
    .showroom-header .site-shell-container{width:calc(100% - 24px)}
    .showroom-header .header-main-inner{
        min-height:auto;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"logo actions" "search search";
        gap:9px 12px;
        padding:10px 0 11px;
    }
    .showroom-header .logo{grid-area:logo;width:auto;min-width:0}
    .showroom-header .logo img{width:min(100%,205px);max-height:38px}
    .showroom-header .search-trigger-wrap{grid-area:search}
    .showroom-header .search-trigger{min-height:46px;border-radius:13px;background:#f5f7fa}
    .showroom-header .search-trigger input{height:44px;padding-left:14px;font-size:13px}
    .showroom-header .search-trigger-btn{width:38px;height:38px;margin-right:4px;border-radius:10px}
    .showroom-header .header-actions{grid-area:actions;gap:4px}
    .showroom-header .header-track-wrap{display:none!important}
    .showroom-header .header-icon{
        width:42px;min-width:42px;height:42px;padding:0;border:1px solid #edf0f4;border-radius:12px;background:#fff;
    }
    .showroom-header .header-icon-emoji,
    .showroom-header .header-user-avatar{width:24px;height:24px;background:transparent;font-size:15px}
    .showroom-header .header-user-label,
    .showroom-header .header-icon>span:not(.header-icon-emoji):not(.header-user-avatar){display:none!important}
    .showroom-header .cart-count{top:-4px;right:-4px}

    .showroom-header .header-nav{height:0;border:0;background:transparent}
    .showroom-header .header-nav>.nav-inner{display:none!important}
    .showroom-header .mega-host{position:static;width:0!important;margin:0!important}

    /* mega remains functional even though desktop nav is hidden */
    .showroom-header .mega-menu{
        position:fixed!important;
        z-index:1700!important;
        top:0!important;
        left:0!important;
        right:auto!important;
        width:min(92vw,430px)!important;
        height:100dvh!important;
        max-height:100dvh!important;
        margin:0!important;
        border:0!important;
        border-radius:0 22px 22px 0!important;
        transform:translateX(-104%)!important;
        transition:transform .22s ease!important;
        overflow:auto!important;
        box-shadow:25px 0 70px rgba(15,23,42,.22)!important;
    }
    .showroom-header .mega-menu.active,
    .showroom-header .mega-menu.open,
    .showroom-header .mega-menu.is-open{transform:translateX(0)!important}
    .showroom-header .mega-grid{display:block!important;min-height:100%!important}
    .showroom-header .mega-left{
        display:flex!important;
        overflow-x:auto!important;
        gap:6px!important;
        padding:12px 10px!important;
        border:0!important;
        border-bottom:1px solid #edf0f4!important;
        background:#fff!important;
        scrollbar-width:none;
    }
    .showroom-header .mega-left::-webkit-scrollbar{display:none}
    .showroom-header .mega-left-item{flex:0 0 auto!important;min-width:auto!important;margin:0!important;padding:9px 11px!important;border:1px solid #edf0f4!important;border-radius:12px!important}
    .showroom-header .mega-left-item>span:last-child{display:none!important}
    .showroom-header .mega-right{padding:12px!important}
    .showroom-header .mega-pane-layout{display:block!important}
    .showroom-header .mega-featured{margin-top:18px}
    .showroom-header .mega-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

    .search-panel{
        top:0!important;
        left:0!important;
        right:0!important;
        width:100%!important;
        max-width:none!important;
        height:100dvh!important;
        max-height:100dvh!important;
        border:0!important;
        border-radius:0!important;
        transform:translateY(-104%)!important;
    }
    .search-panel.active,
    .search-panel.open,
    .search-panel.is-open{transform:translateY(0)!important}
    .search-panel .search-panel-head{position:sticky!important;top:0;z-index:2;padding:12px!important}
    .search-panel .search-panel-body{padding:14px!important}
    .search-panel .search-panel-grid{grid-template-columns:1fr!important}

    .mobile-bottom-nav.showroom-mobile-nav{
        position:fixed!important;
        z-index:1650!important;
        left:10px!important;
        right:10px!important;
        bottom:max(8px,env(safe-area-inset-bottom))!important;
        height:64px!important;
        display:grid!important;
        grid-template-columns:repeat(5,1fr)!important;
        align-items:stretch!important;
        gap:2px!important;
        padding:5px!important;
        border:1px solid rgba(15,23,42,.09)!important;
        border-radius:19px!important;
        background:rgba(255,255,255,.96)!important;
        box-shadow:0 18px 42px rgba(15,23,42,.2)!important;
        backdrop-filter:blur(15px)!important;
        -webkit-backdrop-filter:blur(15px)!important;
    }
    .showroom-mobile-nav a,
    .showroom-mobile-nav button{
        position:relative!important;
        min-width:0!important;
        height:54px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:4px!important;
        padding:0!important;
        border:0!important;
        border-radius:14px!important;
        background:transparent!important;
        color:#64748b!important;
        text-decoration:none!important;
        font:inherit!important;
        cursor:pointer!important;
    }
    .showroom-mobile-nav i{font-size:16px!important;line-height:1!important}
    .showroom-mobile-nav span{font-size:9px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}
    .showroom-mobile-nav .mobile-nav-search{
        background:#111827!important;
        color:#fff!important;
        transform:translateY(-9px)!important;
        box-shadow:0 9px 18px rgba(15,23,42,.2)!important;
    }
    .showroom-mobile-nav .mobile-nav-search i{color:#fb923c!important}
    .showroom-mobile-nav .mobile-cart-nav b{
        position:absolute;top:2px;right:10px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:var(--hdr-orange);color:#fff;font-size:8px;font-weight:900;
    }

    .user-dropdown-menu,.mini-cart-dropdown{display:none!important}
}

@media(max-width:520px){
    .showroom-header .site-shell-container{width:calc(100% - 16px)}
    .showroom-header .header-main-inner{padding-top:8px;gap:8px}
    .showroom-header .logo img{width:min(100%,178px);max-height:34px}
    .showroom-header .header-icon{width:39px;min-width:39px;height:39px;border-radius:11px}
    .showroom-header .search-trigger{min-height:43px}
    .showroom-header .search-trigger input{height:41px;font-size:12.5px}
    .showroom-header .search-trigger-btn{width:35px;height:35px}
    .showroom-mobile-nav span{font-size:8.5px!important}
    .showroom-header .mega-featured-grid{grid-template-columns:1fr!important}
}

@media(max-width:360px){
    .showroom-header .logo img{width:154px}
    .showroom-mobile-nav{left:6px!important;right:6px!important}
    .showroom-mobile-nav span{font-size:8px!important}
}