/* ======================================================
   PORTFOLIO SECTION
====================================================== */

.portfolio-section{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:linear-gradient(
        180deg,
        #F8FAFC 0%,
        #FFFFFF 100%
    );

}

.portfolio-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    right:-180px;

    border-radius:50%;

    background:#10B981;

    opacity:.08;

    filter:blur(120px);

}

.portfolio-section::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    left:-140px;

    bottom:-140px;

    border-radius:50%;

    background:#0EA5E9;

    opacity:.08;

    filter:blur(120px);

}

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

.portfolio-header{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

    text-align:center;

}

.portfolio-header .section-title{

    margin-top:22px;

}

.portfolio-header .section-description{

    margin-top:22px;

    color:#64748B;

    font-size:17px;

    line-height:1.9;

}

/* ======================================================
   ITEM
====================================================== */

.portfolio-item{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-top:110px;

    position:relative;

}

.portfolio-item.reverse{

    direction:rtl;

}

.portfolio-item.reverse>*{

    direction:ltr;

}

/* ======================================================
   PREVIEW
====================================================== */

.portfolio-preview{

    position:relative;

    z-index:2;

}

/* ======================================================
   BROWSER WINDOW
====================================================== */

.browser-window{

    overflow:hidden;

    border-radius:26px;

    background:#FFFFFF;

    border:1px solid rgba(226,232,240,.9);

    box-shadow:

        0 30px 70px rgba(15,23,42,.10);

    transition:

        transform .45s,

        box-shadow .45s;

}

.portfolio-item:hover .browser-window{

    transform:

        translateY(-10px);

    box-shadow:

        0 45px 90px rgba(15,23,42,.14);

}

/* ======================================================
   BROWSER TOP
====================================================== */

.browser-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 20px;

    background:#F8FAFC;

    border-bottom:1px solid #E2E8F0;

}

.browser-dots{

    display:flex;

    gap:8px;

}

.browser-dots .dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.dot.red{

    background:#EF4444;

}

.dot.yellow{

    background:#FACC15;

}

.dot.green{

    background:#22C55E;

}

.browser-title{

    flex:1;

    text-align:center;

    color:#64748B;

    font-size:13px;

    font-weight:600;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* ======================================================
   BROWSER BODY
====================================================== */

.browser-body{

    background:#FFFFFF;

}

.browser-body img{

    width:100%;

    display:block;

    transition:

        transform .6s;

}

.portfolio-item:hover .browser-body img{

    transform:scale(1.03);

}

.portfolio-image{

    overflow:hidden;

    border-radius:28px;

    background:white;

    border:1px solid #E2E8F0;

    box-shadow:

        0 30px 70px rgba(15,23,42,.08);

    transition:.4s;

}

.portfolio-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.portfolio-item:hover .portfolio-image{

    transform:translateY(-10px);

}

.portfolio-item:hover .portfolio-image img{

    transform:scale(1.04);

}

/* ======================================================
   BLUR
====================================================== */

.portfolio-blur{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    filter:blur(110px);

    opacity:.18;

    pointer-events:none;

    z-index:0;

}

.blur-left{

    background:#10B981;

    left:-80px;

    top:50%;

    transform:translateY(-50%);

}

.blur-right{

    background:#0EA5E9;

    right:-80px;

    top:50%;

    transform:translateY(-50%);

}

/* ======================================================
   PORTFOLIO CONTENT
====================================================== */

.portfolio-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

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

.portfolio-category{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:#ECFDF5;

    color:#059669;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

}

/* ======================================================
   TITLE
====================================================== */

.portfolio-content h3{

    margin:0;

    font-size:42px;

    line-height:1.15;

    color:#0F172A;

    font-weight:800;

}

.portfolio-content p{

    margin-top:26px;

    color:#64748B;

    font-size:16px;

    line-height:1.9;

}

.portfolio-content h4{

    margin-top:12px;

    color:#10B981;

    font-size:18px;

    font-weight:600;

}

/* ======================================================
   META
====================================================== */

.portfolio-meta{

    display:grid;

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

    gap:18px;

    margin-top:34px;

}

.meta-card{

    padding:20px;

    border-radius:18px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    transition:

        transform .35s,

        box-shadow .35s;

}

.meta-card:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px rgba(15,23,42,.08);

}

.meta-card small{

    display:block;

    color:#94A3B8;

    font-size:12px;

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.meta-card strong{

    color:#0F172A;

    font-size:17px;

    font-weight:700;

}

/* ======================================================
   FEATURE
====================================================== */

.portfolio-feature{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:34px;

}

.portfolio-feature span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    color:#334155;

    font-size:14px;

    font-weight:600;

    transition:

        transform .3s,

        background .3s,

        border-color .3s;

}

.portfolio-feature span::before{

    content:"✓";

    color:#10B981;

    font-weight:700;

}

.portfolio-feature span:hover{

    transform:translateY(-4px);

    background:#ECFDF5;

    border-color:#10B981;

}

/* ======================================================
   TECHNOLOGY
====================================================== */

.portfolio-tech{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:34px;

}

.portfolio-tech span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px 18px;

    border-radius:14px;

    background:#0F172A;

    color:#FFFFFF;

    font-size:13px;

    font-weight:600;

    letter-spacing:.3px;

    transition:

        transform .3s,

        box-shadow .3s;

}

.portfolio-tech span::before{

    content:"●";

    color:#10B981;

}

.portfolio-tech span:hover{

    transform:translateY(-4px);

    box-shadow:

        0 15px 35px rgba(15,23,42,.20);

}

/* ======================================================
   PROJECT RESULT
====================================================== */

.portfolio-result{

    display:grid;

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

    gap:14px;

    margin-top:36px;

}

.result-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:16px;

    color:#334155;

    font-size:15px;

    font-weight:600;

    transition:

        transform .3s,

        box-shadow .3s;

}

.result-item:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px rgba(15,23,42,.08);

}

.result-item::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#10B981;

    flex-shrink:0;

}

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

.portfolio-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;

}

/* ======================================================
   STATUS
====================================================== */

.status-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.status-badge::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

}

.status-badge.completed{

    background:#ECFDF5;

    color:#059669;

}

.status-badge.completed::before{

    background:#10B981;

}

.status-badge.active{

    background:#EFF6FF;

    color:#2563EB;

}

.status-badge.active::before{

    background:#3B82F6;

}

.status-badge.development{

    background:#FEF3C7;

    color:#B45309;

}

.status-badge.development::before{

    background:#F59E0B;

}

.status-badge.maintenance{

    background:#F3F4F6;

    color:#475569;

}

.status-badge.maintenance::before{

    background:#94A3B8;

}

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

.portfolio-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    align-self:flex-start;

    margin-top:42px;

    padding:16px 28px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #10B981,
        #059669
    );

    color:#FFFFFF;

    text-decoration:none;

    font-weight:700;

    transition:

        transform .35s,

        box-shadow .35s,

        gap .35s;

    box-shadow:

        0 18px 40px rgba(16,185,129,.25);

}

.portfolio-button svg{

    width:18px;

    height:18px;

}

.portfolio-button:hover{

    transform:translateY(-4px);

    gap:18px;

    box-shadow:

        0 24px 55px rgba(16,185,129,.35);

}

/* ======================================================
   PORTFOLIO CLOSING
====================================================== */

.portfolio-closing{

    position:relative;

    overflow:hidden;

    margin-top:140px;

    padding:90px 70px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        #0F172A,
        #111827
    );

    text-align:center;

    color:#FFFFFF;

}

/* ======================================================
   GLOW
====================================================== */

.portfolio-closing-glow{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.portfolio-closing-glow::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-120px;

    top:-80px;

    border-radius:50%;

    background:#10B981;

    opacity:.18;

    filter:blur(110px);

}

.portfolio-closing-glow::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:#0EA5E9;

    opacity:.18;

    filter:blur(110px);

}

/* ======================================================
   CONTENT
====================================================== */

.portfolio-closing-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.portfolio-closing h2{

    margin-top:24px;

    font-size:50px;

    line-height:1.2;

    font-weight:800;

    color:#FFFFFF;

}

.portfolio-closing p{

    margin-top:24px;

    color:#CBD5E1;

    line-height:1.9;

    font-size:17px;

}

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

.portfolio-summary{

    display:grid;

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

    gap:24px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

.summary-card{

    padding:32px 20px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    transition:

        transform .35s,

        background .35s;

}

.summary-card:hover{

    transform:translateY(-8px);

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

}

.summary-card strong{

    display:block;

    font-size:42px;

    color:#10B981;

    font-weight:800;

}

.summary-card span{

    display:block;

    margin-top:10px;

    color:#CBD5E1;

    font-size:15px;

}

/* ======================================================
   ACTION
====================================================== */

.portfolio-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    margin-top:60px;

    position:relative;

    z-index:2;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:16px;

    background:#10B981;

    color:#FFFFFF;

    text-decoration:none;

    font-weight:700;

    transition:

        transform .35s,

        box-shadow .35s;

    box-shadow:

        0 18px 45px rgba(16,185,129,.30);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 60px rgba(16,185,129,.40);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.15);

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

    color:#FFFFFF;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-secondary:hover{

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

    transform:translateY(-4px);

}

@media (max-width:1400px){

    .portfolio-item{

        gap:60px;

    }

    .portfolio-content h3{

        font-size:38px;

    }

}

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

@media (max-width:1200px){

    .portfolio-section{

        padding:110px 0;

    }

    .portfolio-item{

        gap:50px;

    }

    .browser-title{

        font-size:12px;

    }

    .portfolio-content h3{

        font-size:36px;

    }

    .portfolio-content h4{

        font-size:17px;

    }

}

/* ======================================================
   TABLET
====================================================== */

@media (max-width:992px){

    .portfolio-item{

        grid-template-columns:1fr;

        gap:45px;

        margin-top:90px;

    }

    .portfolio-item.reverse{

        direction:ltr;

    }

    .portfolio-preview{

        order:1;

    }

    .portfolio-content{

        order:2;

    }

    .portfolio-meta{

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

    }

    .portfolio-result{

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

    }

    .portfolio-summary{

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

    }

}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width:768px){

    .portfolio-section{

        padding:90px 0;

    }

    .portfolio-item{

        margin-top:70px;

        gap:35px;

    }

    .browser-window{

        border-radius:20px;

    }

    .browser-top{

        padding:12px 16px;

    }

    .browser-dots .dot{

        width:10px;

        height:10px;

    }

    .browser-title{

        font-size:11px;

    }

    .portfolio-top{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .portfolio-content h3{

        font-size:30px;

    }

    .portfolio-content h4{

        font-size:16px;

    }

    .portfolio-content p{

        font-size:15px;

    }

    .portfolio-meta{

        grid-template-columns:1fr;

    }

    .portfolio-result{

        grid-template-columns:1fr;

    }

    .portfolio-summary{

        grid-template-columns:1fr;

    }

    .portfolio-actions{

        flex-direction:column;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

    }

}

/* ======================================================
   SMALL MOBILE
====================================================== */

@media (max-width:576px){

    .portfolio-content h3{

        font-size:26px;

    }

    .portfolio-content h4{

        font-size:15px;

    }

    .portfolio-category,

    .status-badge{

        font-size:12px;

        padding:8px 14px;

    }

    .meta-card{

        padding:18px;

    }

    .portfolio-feature span{

        font-size:13px;

    }

    .portfolio-tech span{

        font-size:12px;

    }

    .result-item{

        font-size:14px;

        padding:14px 16px;

    }

    .portfolio-button{

        width:100%;

    }

}

/* ======================================================
   EXTRA SMALL
====================================================== */

@media (max-width:400px){

    .portfolio-content h3{

        font-size:23px;

    }

    .portfolio-closing{

        padding:45px 20px;

    }

    .portfolio-closing h2{

        font-size:28px;

    }

}