/* =========================================================
   KESKINSOFT PLATFORM HUB V1
   ========================================================= */


/* ---------- HEADER BUTTONS ---------- */

.ks-platform-nav{
    display:flex;
    align-items:center;
    gap:7px;
    margin-right:4px
}

.ks-platform-link{
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 13px;
    border-radius:11px;
    text-decoration:none!important;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    transition:.18s ease
}

.ks-platform-link:hover{
    transform:translateY(-1px)
}

.ks-platform-link.builder{
    color:#fff!important;
    border:1px solid #7267ff;
    background:linear-gradient(
        135deg,
        #735dff,
        #397cff
    );
    box-shadow:0 8px 22px rgba(92,83,245,.24)
}

.ks-platform-link.chat{
    color:#fff!important;
    border:1px solid #253d6b;
    background:linear-gradient(
        135deg,
        #17234a,
        #101933
    );
    box-shadow:0 8px 20px rgba(20,33,70,.17)
}

.ks-platform-link-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:rgba(255,255,255,.13);
    font-size:12px
}

.ks-platform-live{
    width:6px;
    height:6px;
    margin-left:-2px;
    border-radius:50%;
    background:#28dc8e;
    box-shadow:0 0 0 3px rgba(40,220,142,.12)
}


/* ---------- RIGHT PROMO CARDS ---------- */

.ks-side-platforms{
    display:grid;
    gap:10px;
    margin-bottom:12px
}

.ks-side-platform-card{
    position:relative;
    overflow:hidden;
    min-height:174px;
    padding:18px;
    border-radius:18px;
    text-decoration:none!important;
    color:#fff!important;
    box-shadow:0 13px 30px rgba(15,23,42,.10)
}

.ks-side-platform-card.builder{
    background:
        radial-gradient(
            circle at 94% 20%,
            rgba(72,195,255,.38),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #7258ff,
            #486aff 52%,
            #168df5
        )
}

.ks-side-platform-card.chat{
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(83,91,255,.22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #111b3a,
            #0d1731
        )
}

.ks-side-platform-brand{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:9px;
    font-weight:950;
    letter-spacing:.14em
}

.ks-side-platform-brand i{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    font-style:normal;
    background:rgba(255,255,255,.17)
}

.ks-side-platform-card h3{
    position:relative;
    z-index:2;
    margin:16px 0 5px;
    color:#fff;
    font-size:25px;
    line-height:1
}

.ks-side-platform-card p{
    position:relative;
    z-index:2;
    width:58%;
    margin:0;
    color:rgba(255,255,255,.83);
    font-size:11px;
    line-height:1.45
}

.ks-side-platform-cta{
    position:absolute;
    left:18px;
    bottom:17px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 14px;
    border-radius:10px;
    color:#16233d;
    background:#fff;
    font-size:10px;
    font-weight:950
}

.ks-side-platform-live{
    position:absolute;
    top:14px;
    right:14px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    background:#0bb96a;
    color:#fff;
    font-size:8px;
    font-weight:900
}


/* Builder fake preview */

.ks-builder-mini-ui{
    position:absolute;
    right:-8px;
    top:38px;
    width:45%;
    height:104px;
    padding:8px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:12px;
    background:rgba(247,250,255,.94);
    transform:rotate(-2deg);
    box-shadow:0 15px 28px rgba(20,25,80,.20)
}

.ks-builder-mini-ui:before{
    content:"";
    display:block;
    width:100%;
    height:12px;
    margin-bottom:7px;
    border-radius:5px;
    background:#dce5ff
}

.ks-builder-mini-ui div{
    display:grid;
    grid-template-columns:25% 1fr;
    gap:5px;
    height:70px
}

.ks-builder-mini-ui div:before{
    content:"";
    border-radius:5px;
    background:#e7ecfa
}

.ks-builder-mini-ui div:after{
    content:"";
    border-radius:5px;
    background:
        linear-gradient(
            135deg,
            #bfcaff,
            #90d4ff
        )
}


/* Chat fake preview */

.ks-chat-mini-ui{
    position:absolute;
    right:14px;
    bottom:14px;
    width:42%;
    display:grid;
    gap:6px
}

.ks-chat-mini-ui span{
    display:block;
    padding:7px 8px;
    border-radius:10px;
    font-size:7px;
    line-height:1.3;
    background:rgba(255,255,255,.10)
}

.ks-chat-mini-ui span:nth-child(2){
    margin-left:15px;
    background:#176fe8
}


/* =========================================================
   TEMPLATE PAGE / PRODUCTS FIRST
   ========================================================= */

.ks-template-results-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin:5px 0 13px
}

.ks-template-results-head h2{
    margin:0;
    color:#0b1e3b;
    font-size:22px;
    letter-spacing:-.02em
}

.ks-template-results-head p{
    margin:4px 0 0;
    color:#71849c;
    font-size:11px
}


/* Normal masonry yerine premium düzenli grid */

body.ks-sector-market-layout .workspace-template-grid{
    columns:auto!important;
    display:grid!important;
    grid-template-columns:
        repeat(4,minmax(0,1fr))!important;
    gap:14px!important
}

body.ks-sector-market-layout .workspace-template-card{
    margin:0!important;
    break-inside:auto!important;
    width:100%!important
}

body.ks-sector-market-layout .workspace-template-cover{
    min-height:145px
}


/* =========================================================
   FILTERS UNDER PRODUCT CARDS
   ========================================================= */

.ks-related-filter-shell{
    margin:18px 0 20px;
    padding:16px;
    border:1px solid #dce6f2;
    border-radius:17px;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.035)
}

.ks-related-filter-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:11px
}

.ks-related-filter-title{
    display:flex;
    align-items:center;
    gap:10px
}

.ks-related-filter-title i{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#edf6ff;
    color:#1478ff;
    font-style:normal
}

.ks-related-filter-title b{
    display:block;
    color:#12243e;
    font-size:14px
}

.ks-related-filter-title small{
    display:block;
    margin-top:2px;
    color:#7c8da2;
    font-size:10px
}

.ks-related-filter-panel{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important
}

.ks-related-filter-panel a[href*="templates.php?category="]{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin:3px!important;
    padding:0 13px!important;
    border:1px solid #dce5ef!important;
    border-radius:999px!important;
    background:#f9fbfe!important;
    color:#334b68!important;
    font-size:10px!important;
    font-weight:750!important;
    text-decoration:none!important
}

.ks-related-filter-panel a.ks-relevant-filter{
    border-color:#b9d6ff!important;
    background:#edf6ff!important;
    color:#096ee5!important
}

.ks-related-filter-panel a.ks-filter-extra{
    display:none!important
}

.ks-related-filter-shell.show-all
.ks-related-filter-panel
a.ks-filter-extra{
    display:inline-flex!important
}

.ks-filter-more{
    border:0;
    background:none;
    color:#1478ff;
    font-size:10px;
    font-weight:900;
    cursor:pointer
}

.ks-filter-status-hidden{
    display:none!important
}


/* =========================================================
   CONTEXT TAGS
   ========================================================= */

.ks-context-tag-host{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:10px
}

.ks-context-tag-host a{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    background:#f3f6fa;
    color:#536982;
    text-decoration:none;
    font-size:9px;
    font-weight:700
}

.ks-context-tag-host a:hover{
    background:#e7f2ff;
    color:#126fe7
}


/* =========================================================
   CHAT ENTRY
   ========================================================= */

.ks-chat-entry-page{
    min-height:calc(100vh - 80px);
    display:grid;
    place-items:center;
    padding:45px 20px;
    background:
        radial-gradient(
            circle at 50% 0,
            #edf2ff,
            transparent 42%
        ),
        #f5f8fc
}

.ks-chat-entry-card{
    width:min(100%,470px);
    padding:34px;
    border:1px solid #dce5f0;
    border-radius:24px;
    background:#fff;
    box-shadow:0 30px 80px rgba(35,55,95,.12)
}

.ks-chat-entry-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin-bottom:15px;
    border-radius:17px;
    color:#fff;
    background:linear-gradient(135deg,#735cff,#397cff);
    font-size:23px
}

.ks-chat-entry-kicker{
    color:#675cf4;
    font-size:9px;
    font-weight:950;
    letter-spacing:.14em
}

.ks-chat-entry-card h1{
    margin:7px 0 9px;
    color:#13233c;
    font-size:28px
}

.ks-chat-entry-card>p{
    margin:0 0 22px;
    color:#6d8099;
    font-size:12px;
    line-height:1.65
}

.ks-chat-entry-card label{
    display:block;
    color:#31445f;
    font-size:11px;
    font-weight:850
}

.ks-chat-entry-card input{
    width:100%;
    height:46px;
    margin-top:7px;
    padding:0 13px;
    border:1px solid #ccd9e8;
    border-radius:11px;
    outline:none;
    font-size:13px
}

.ks-chat-entry-card input:focus{
    border-color:#685bf5;
    box-shadow:0 0 0 3px rgba(104,91,245,.10)
}

.ks-chat-entry-card form>small{
    display:block;
    margin:7px 0 16px;
    color:#8998aa;
    font-size:9px
}

.ks-chat-entry-submit{
    width:100%;
    height:46px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#705cff,#4371ff);
    color:#fff;
    font-size:12px;
    font-weight:950;
    cursor:pointer
}

.ks-chat-entry-error{
    margin-bottom:15px;
    padding:11px 12px;
    border:1px solid #fecaca;
    border-radius:10px;
    background:#fff1f2;
    color:#b42338;
    font-size:11px
}

.ks-chat-entry-user{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:19px;
    padding-top:16px;
    border-top:1px solid #edf1f6
}

.ks-chat-entry-user>span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eaf3ff;
    color:#1477ef;
    font-size:12px;
    font-weight:950
}

.ks-chat-entry-user b,
.ks-chat-entry-user small{
    display:block
}

.ks-chat-entry-user b{
    color:#253953;
    font-size:11px
}

.ks-chat-entry-user small{
    margin-top:2px;
    color:#8292a5;
    font-size:9px
}


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

@media(max-width:1350px){

    .ks-platform-link{
        padding:0 9px;
        font-size:10px
    }

    body.ks-sector-market-layout
    .workspace-template-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important
    }
}

@media(max-width:1100px){

    .ks-platform-link span.ks-platform-text{
        display:none
    }

    .ks-platform-link{
        width:39px;
        padding:0
    }
}

@media(max-width:820px){

    .ks-platform-nav{
        order:2
    }

    .ks-side-platforms{
        display:none
    }

    body.ks-sector-market-layout
    .workspace-template-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important
    }

    .ks-related-filter-shell{
        padding:13px
    }
}

@media(max-width:540px){

    body.ks-sector-market-layout
    .workspace-template-grid{
        grid-template-columns:1fr!important
    }

    .ks-chat-entry-card{
        padding:25px 20px;
        border-radius:18px
    }
}