@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');

/* ===================================== */
/* PAGE */
/* ===================================== */

.kritik-page{
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:140px 7% 80px;

    background:
    radial-gradient(
    circle at top right,
    rgba(182,137,91,0.08),
    transparent 25%
    );
}

/* ===================================== */
/* WRAPPER */
/* ===================================== */

.kritik-wrapper{
    width:100%;

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

    gap:60px;

    align-items:center;
}

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

.kritik-info{
    position:relative;
}

.kritik-info h1{
    font-size:4rem;

    line-height:1.15;

    margin-bottom:25px;

    color:#ffffff;

    font-weight:800;
}

.kritik-info h1 span{
    color:var(--primary);
}

.kritik-info p{
    color:#bdbdbd;

    line-height:1.9;

    font-size:1.05rem;

    max-width:520px;
}

/* ===================================== */
/* BADGE */
/* ===================================== */

.badge-kritik{
    display:inline-flex;

    align-items:center;

    gap:10px;

    background:
    rgba(182,137,91,0.12);

    color:var(--primary);

    padding:12px 20px;

    border-radius:999px;

    margin-bottom:25px;

    font-weight:700;

    border:
    1px solid rgba(182,137,91,0.25);

    backdrop-filter:blur(10px);
}

/* ===================================== */
/* DECORATION */
/* ===================================== */

.kritik-decoration{
    width:180px;
    height:180px;

    margin-top:50px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(182,137,91,0.35),
    transparent
    );

    filter:blur(20px);

    opacity:0.8;
}

/* ===================================== */
/* CARD */
/* ===================================== */

.kritik-card-modern{
    position:relative;

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

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius:35px;

    padding:45px;

    backdrop-filter:blur(14px);

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.45);

    transition:0.3s ease;
}

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

    border-color:
    rgba(182,137,91,0.3);
}

/* ===================================== */
/* INPUT */
/* ===================================== */

.input-group{
    margin-bottom:25px;
}

.input-group label{
    display:block;

    margin-bottom:12px;

    color:#ffffff;

    font-weight:600;

    font-size:15px;
}

.input-group input,
.input-group select,
.input-group textarea{
    width:100%;

    padding:16px 18px;

    border-radius:18px;

    background:#0c0c0c;

    border:
    1px solid rgba(255,255,255,0.08);

    color:#ffffff;

    font-size:15px;

    transition:0.3s;
}

.input-group input::placeholder,
.input-group textarea::placeholder{
    color:#7c7c7c;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 5px rgba(182,137,91,0.08);
}

.input-group textarea{
    resize:none;
}

/* ===================================== */
/* ANONIM */
/* ===================================== */

.anonim-box{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:15px;
}

.anonim-box input{
    width:18px;
    height:18px;

    accent-color:var(--primary);

    cursor:pointer;
}

.anonim-box label{
    margin:0;

    color:#bdbdbd;

    font-size:0.95rem;

    cursor:pointer;
}

/* ===================================== */
/* RATING */
/* ===================================== */

.rating-box{
    display:flex;

    flex-direction:row-reverse;

    justify-content:flex-end;

    gap:10px;
}

.rating-box input{
    display:none;
}

.rating-box label{
    font-size:2rem;

    color:#444;

    cursor:pointer;

    transition:0.25s;
}

.rating-box label:hover,
.rating-box label:hover ~ label,
.rating-box input:checked ~ label{
    color:#f5b301;

    transform:scale(1.12);
}

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

.kritik-btn{
    width:100%;

    margin-top:10px;

    padding:17px !important;

    border-radius:18px !important;

    font-size:1rem !important;

    font-weight:700 !important;

    transition:0.3s !important;
}

.kritik-btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 15px 30px rgba(182,137,91,0.2);
}

/* ===================================== */
/* LOGIN WARNING */
/* ===================================== */

.login-warning{
    text-align:center;
}

.login-warning i{
    font-size:4.5rem;

    color:var(--primary);

    margin-bottom:25px;
}

.login-warning h3{
    font-size:2rem;

    margin-bottom:15px;

    color:#ffffff;
}

.login-warning p{
    color:#bdbdbd;

    line-height:1.8;

    margin-bottom:35px;
}

.btn-open-login{
    width:100%;
}

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

@media(max-width:1000px){

    .kritik-wrapper{
        grid-template-columns:1fr;

        gap:50px;
    }

    .kritik-info{
        text-align:center;
    }

    .kritik-info p{
        max-width:100%;
    }

    .kritik-decoration{
        display:none;
    }
}

@media(max-width:768px){

    .kritik-page{
        padding:80px 5% 50px;
    }

    .kritik-info h1{
        font-size:3rem;
    }

    .kritik-card-modern{
        padding:20px;
    }
}

@media(max-width:500px){

    .kritik-info h1{
        font-size:2.4rem;
    }

    .kritik-card-modern{
        padding:25px;
        border-radius:28px;
    }

    .rating-box label{
        font-size:1.7rem;
    }

    .input-group input,
    .input-group select,
    .input-group textarea{
        padding:14px 16px;
    }
}