#constructionProgressV4{
    width:100%;
    margin:34px 0 42px;
    color:#fff;
}

.cpv4{
    position:relative;
    overflow:hidden;

    min-height:760px;

    padding:32px;

    border-radius:28px;

    border:1px solid rgba(56,238,223,.72);

    background:
        linear-gradient(
            90deg,
            rgba(3,28,42,.96) 0%,
            rgba(3,31,45,.90) 42%,
            rgba(3,28,41,.68) 100%
        ),
        url('/static/img/construction_bg_v70.svg?v=70')
        center top / cover no-repeat;

    box-shadow:
        0 28px 75px rgba(0,0,0,.38),
        0 0 35px rgba(41,229,218,.08),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* hareketli ışık */

.cpv4::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 28%,
            rgba(47,236,220,.04) 35%,
            transparent 42%
        );

    transform:translateX(-100%);

    animation:
        cp70Sweep
        8s linear infinite;

    pointer-events:none;
}

@keyframes cp70Sweep{
    to{
        transform:translateX(100%);
    }
}


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

.cp70-head{
    position:relative;
    z-index:3;

    display:grid;

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

    gap:30px;

    align-items:start;

    margin-bottom:28px;
}

.cp70-kicker{
    display:flex;
    align-items:center;
    gap:12px;

    color:#f1c658;

    font-size:13px;
    font-weight:1000;

    letter-spacing:6px;
}

.cp70-kicker::after{
    content:"";

    width:150px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #eac454,
            transparent
        );
}

.cp70-parcel{
    margin:12px 0 0;

    color:#f6ffff;

    font-size:
        clamp(
            43px,
            5.1vw,
            72px
        );

    line-height:.92;

    font-weight:1000;

    letter-spacing:-2px;

    text-shadow:
        0 0 22px
        rgba(76,237,226,.22);
}

.cp70-title{
    margin:8px 0 13px;

    color:#efc662;

    font-size:
        clamp(
            31px,
            4.2vw,
            53px
        );

    line-height:.95;

    font-weight:1000;
}

.cp70-location{
    display:flex;
    align-items:center;
    gap:11px;

    margin-top:16px;

    color:#9cebe6;

    font-size:21px;

    font-weight:800;
}

.cp70-pin{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border-radius:50%;

    color:#49eee0;

    font-size:24px;

    background:
        rgba(29,214,202,.13);

    border:
        1px solid
        rgba(67,239,224,.35);

    box-shadow:
        0 0 19px
        rgba(42,224,211,.16);
}

.cp70-description{
    margin-top:14px;

    max-width:920px;

    color:#d3e3e6;

    font-size:16px;
    line-height:1.6;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.45);
}


/* tarih */

.cp70-date{
    padding:19px;

    border-radius:20px;

    border:
        1px solid
        rgba(67,239,223,.62);

    background:
        rgba(3,41,54,.82);

    backdrop-filter:blur(8px);

    box-shadow:
        0 0 30px
        rgba(51,232,216,.13);
}

.cp70-date-icon{
    float:left;

    width:51px;
    height:51px;

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

    margin-right:14px;

    border-radius:14px;

    border:
        1px solid
        rgba(61,235,219,.47);

    background:
        rgba(32,217,201,.12);

    font-size:25px;
}

.cp70-date small{
    display:block;

    color:#9bb4ba;

    font-size:9px;

    font-weight:1000;

    letter-spacing:1px;
}

.cp70-date strong{
    display:block;

    margin-top:4px;

    color:#fff;

    font-size:20px;
    font-weight:1000;
}

.cp70-live{
    display:flex;
    align-items:center;
    gap:7px;

    margin-top:7px;

    color:#53edbf;

    font-size:10px;
    font-weight:900;
}

.cp70-live::before{
    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#36eeb4;

    box-shadow:
        0 0 12px
        #36eeb4;

    animation:
        cp70Pulse
        1.25s infinite;
}


/* ======================================================
   GENEL ILERLEME
====================================================== */

.cp70-general{
    position:relative;
    z-index:3;

    display:grid;

    grid-template-columns:
        320px
        minmax(250px,1fr)
        250px;

    align-items:center;

    gap:28px;

    padding:26px;

    margin-bottom:18px;

    border-radius:23px;

    border:
        1px solid
        rgba(64,241,225,.72);

    background:
        linear-gradient(
            90deg,
            rgba(4,51,63,.94),
            rgba(5,70,72,.78),
            rgba(4,41,54,.82)
        );

    backdrop-filter:blur(7px);

    box-shadow:
        0 0 26px
        rgba(49,231,216,.09);
}

.cp70-general-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.cp70-general-icon{
    width:94px;
    height:94px;

    flex:0 0 94px;

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

    border-radius:50%;

    border:2px solid #4aede0;

    background:
        radial-gradient(
            circle,
            #075261,
            #042c3a
        );

    font-size:38px;

    box-shadow:
        0 0 30px
        rgba(54,234,218,.30),
        inset 0 0 18px
        rgba(58,228,213,.10);

    animation:
        cp70Glow
        2.1s ease-in-out infinite;
}

@keyframes cp70Glow{
    0%,100%{
        box-shadow:
            0 0 20px
            rgba(54,234,218,.18);
    }

    50%{
        box-shadow:
            0 0 42px
            rgba(54,234,218,.38);
    }
}

.cp70-general-label{
    color:#d0dfe2;

    font-size:13px;

    font-weight:1000;

    letter-spacing:3px;
}

.cp70-general-number{
    margin-top:5px;

    color:#50f0df;

    font-size:64px;

    line-height:.9;

    font-weight:1000;

    text-shadow:
        0 0 18px
        rgba(70,239,223,.17);
}


/* progress */

.cp70-mainbar{
    position:relative;

    height:32px;

    padding:4px;

    overflow:hidden;

    border-radius:999px;

    border:
        1px solid
        rgba(73,238,225,.65);

    background:
        rgba(2,30,43,.92);

    box-shadow:
        inset 0 0 15px
        rgba(0,0,0,.35);
}

.cp70-mainbar span{
    position:relative;

    display:block;

    height:100%;

    border-radius:999px;

    background:
        repeating-linear-gradient(
            -45deg,
            #1bd7c2 0,
            #1bd7c2 13px,
            #43edda 13px,
            #43edda 26px
        );

    box-shadow:
        0 0 25px
        rgba(53,237,220,.47);

    transform-origin:left;

    animation:
        cp70Grow 1.5s ease-out,
        cp70Stripe 1s linear infinite;
}

.cp70-mainbar span::after{
    content:"";

    position:absolute;

    right:-3px;
    top:1px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#dcfffb;

    box-shadow:
        0 0 24px
        #5df2df;
}

@keyframes cp70Grow{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}

@keyframes cp70Stripe{
    from{background-position:0 0}
    to{background-position:38px 0}
}

.cp70-progress-note{
    margin-top:11px;

    color:#c6d9dc;

    font-size:12px;
}


/* sağ sembol */

.cp70-general-right{
    display:flex;
    align-items:center;

    gap:17px;

    padding-left:22px;

    border-left:
        1px solid
        rgba(78,226,219,.35);
}

.cp70-city-symbol{
    width:90px;
    height:90px;

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

    font-size:43px;

    color:#54eee0;

    text-shadow:
        0 0 20px
        rgba(73,234,221,.35);
}

.cp70-general-right strong{
    display:block;

    color:#b8f8f2;

    font-size:15px;

    line-height:1.5;

    letter-spacing:2px;
}


/* ======================================================
   KARTLAR
====================================================== */

.cp70-grid{
    position:relative;
    z-index:3;

    display:grid;

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

    gap:16px;
}

.cp70-card{
    position:relative;
    overflow:hidden;

    min-height:170px;

    padding:20px;

    border-radius:21px;

    border:
        1px solid
        rgba(65,236,223,.60);

    background:
        linear-gradient(
            145deg,
            rgba(4,45,58,.92),
            rgba(3,34,48,.91)
        );

    backdrop-filter:
        blur(6px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.03),
        0 10px 30px
        rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.cp70-card:hover{
    transform:
        translateY(-5px);

    border-color:
        #65f4e5;

    box-shadow:
        0 18px 40px rgba(0,0,0,.23),
        0 0 27px rgba(55,234,217,.13);
}

.cp70-card-top{
    display:grid;

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

    align-items:center;

    gap:14px;

    margin-bottom:15px;
}

.cp70-symbol{
    width:62px;
    height:62px;

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

    border-radius:50%;

    border:
        1px solid
        rgba(82,240,222,.80);

    background:
        radial-gradient(
            circle,
            rgba(8,82,91,.95),
            rgba(4,39,52,.95)
        );

    font-size:30px;

    box-shadow:
        0 0 22px
        rgba(58,231,216,.19);
}

.cp70-name{
    color:#fff;

    font-size:18px;

    line-height:1.2;

    font-weight:1000;
}

.cp70-status{
    display:flex;
    align-items:center;

    gap:7px;

    padding:7px 11px;

    border-radius:999px;

    border:
        1px solid
        rgba(50,231,178,.42);

    background:
        rgba(6,112,83,.33);

    color:#56efbd;

    font-size:9px;
    font-weight:1000;

    white-space:nowrap;
}

.cp70-status::before{
    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#3aebb2;

    box-shadow:
        0 0 10px
        #3aebb2;

    animation:
        cp70Pulse
        1.2s infinite;
}

@keyframes cp70Pulse{
    0%,100%{opacity:.35}
    50%{opacity:1}
}

.cp70-row{
    display:grid;

    grid-template-columns:
        1fr
        65px;

    gap:12px;

    align-items:center;
}

.cp70-minibar{
    height:15px;
    padding:2px;

    overflow:hidden;

    border-radius:999px;

    border:
        1px solid
        rgba(64,222,214,.40);

    background:
        rgba(2,31,42,.95);
}

.cp70-minibar span{
    display:block;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #1dd7c2,
            #5bf1dc
        );

    box-shadow:
        0 0 15px
        rgba(55,234,217,.32);

    transform-origin:left;

    animation:
        cp70Grow
        1.3s ease-out;
}

.cp70-percent{
    color:#fff;

    text-align:right;

    font-size:23px;
    font-weight:1000;
}

.cp70-card-desc{
    margin-top:13px;

    color:#b7cdd1;

    font-size:13px;
    line-height:1.55;
}


/* ======================================================
   ALT SLOGAN
====================================================== */

.cp70-footer{
    position:relative;
    z-index:3;

    display:grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:center;

    gap:18px;

    margin-top:18px;

    padding:16px 21px;

    border-radius:18px;

    border:
        1px solid
        rgba(235,191,68,.47);

    background:
        rgba(5,37,45,.89);
}

.cp70-footer-icon{
    font-size:28px;
}

.cp70-footer strong{
    color:#efc65c;

    font-size:15px;

    font-style:italic;

    font-weight:1000;

    letter-spacing:3px;
}

.cp70-footer-right{
    color:#d8bc69;

    text-align:right;

    font-size:9px;

    font-weight:900;

    letter-spacing:2px;

    line-height:1.6;
}


/* ======================================================
   MOBIL
====================================================== */

@media(max-width:1100px){

    .cp70-general{
        grid-template-columns:1fr;
    }

    .cp70-general-right{
        border-left:0;
        padding-left:0;
    }

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

}


@media(max-width:720px){

    .cpv4{
        padding:17px;
        border-radius:20px;
    }

    .cp70-head{
        grid-template-columns:1fr;
    }

    .cp70-date{
        width:100%;
        box-sizing:border-box;
    }

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

    .cp70-card-top{
        grid-template-columns:
            60px
            1fr;
    }

    .cp70-status{
        grid-column:1 / -1;
        width:max-content;
    }

    .cp70-footer{
        grid-template-columns:auto 1fr;
    }

    .cp70-footer-right{
        grid-column:1/-1;
        text-align:left;
    }

    .cp70-description{
        font-size:14px;
    }

}