/* =====================================================
   BIZKO
   STYLE.css
===================================================== */

@import url("variables.css");

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:var(--font-main);

    overflow-x:hidden;

    min-height:100vh;

    position:relative;

    transition:
        background var(--transition-slow),
        color var(--transition-slow);

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

    transition:var(--transition);

}

ul{

    list-style:none;

}

/* =====================================================
   LAYOUT
===================================================== */

.wrapper{

    display:grid;

    grid-template-columns:290px 1fr;

    min-height:100vh;

}

.main{

    display:flex;

    flex-direction:column;

    padding:45px 55px;

    position:relative;

}

.container{

    width:min(95%,var(--container));

    margin:auto;

}

/* =====================================================
   BACKGROUND
===================================================== */

.background-decoration{

    position:fixed;

    inset:0;

    z-index:-5;

    overflow:hidden;

    pointer-events:none;

}

.circle{

    position:absolute;

    border-radius:50%;

    border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);

    transition:var(--transition-slow);

}

.circle-1{

    width:950px;

    height:950px;

    right:-450px;

    top:-120px;

}

.circle-2{

    width:650px;

    height:650px;

    left:-330px;

    bottom:-250px;

}

.circle-3{

    width:350px;

    height:350px;

    right:180px;

    top:120px;

}

.circle-4{

    width:220px;

    height:220px;

    left:60px;

    bottom:70px;

}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{

    position:sticky;

    top:0;

    height:100vh;

    padding:50px 35px;

    display:flex;

    flex-direction:column;

    border-right:1px solid var(--border);

    transition:var(--transition-slow);

}

.logo{

    cursor:pointer;

    width:130px;

    height:130px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:80px;

    font-family:var(--font-title);

    font-size:42px;

    color:var(--gold);

    border:2px solid var(--gold);

    background:var(--white);

    backdrop-filter:blur(12px);

    box-shadow:var(--shadow);

    transition:var(--transition-slow);

}

.logo:hover{

    transform:rotate(8deg) scale(1.05);

    box-shadow:var(--shadow-large);

}

.menu{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.menu a{

    position:relative;

    width:max-content;

    font-size:var(--font-menu);

    padding-bottom:5px;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}

.menu a:hover{

    color:var(--gold-dark);

    transform:translateX(10px);

}

.menu a:hover::after{

    width:100%;

}

.menu .active{

    color:var(--gold-dark);

}

.menu .active::after{

    width:100%;

}

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

.header{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    margin-bottom:40px;

}

.user{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:999px;

    background:var(--white);

    border:1px solid var(--border);

    backdrop-filter:blur(12px);

    font-size:20px;

    font-weight:500;

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}

.user:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-2px);

}

/* =====================================================
   HERO
===================================================== */

.hero{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:heroAppear .9s ease;

}

.hero-card{

    position:relative;

    width:100%;

    max-width:1380px;

    min-height:720px;

    display:grid;

    grid-template-columns:46% 54%;

    overflow:hidden;

    border-radius:var(--radius-large);

    background:var(--white);

    border:1px solid var(--border);

    box-shadow:var(--shadow-large);

    backdrop-filter:blur(18px);

    transition:var(--transition-slow);

}

.hero-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.12);

}

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:80px;

    position:relative;

    z-index:2;

}

.hero-content h1{

    font-family:var(--font-title);

    font-size:72px;

    font-weight:600;

    line-height:1.1;

    margin-bottom:18px;

}

.hero-line{

    width:170px;

    height:3px;

    margin-bottom:35px;

    border-radius:50px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold),
            transparent
        );

}

.hero-content p{

    max-width:470px;

    margin-bottom:50px;

    color:var(--text-light);

    font-size:22px;

    line-height:1.9;

}

/* =====================================================
   BUTTONS
===================================================== */

.primary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:20px 48px;

    border-radius:60px;

    font-size:19px;

    font-weight:600;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-dark)
        );

    box-shadow:
        0 18px 40px rgba(185,147,74,.30);

}

.primary-button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 25px 55px rgba(185,147,74,.45);

}

.primary-button:active{

    transform:scale(.98);

}

.secondary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:18px 42px;

    margin-left:18px;

    border-radius:60px;

    border:2px solid var(--gold);

    background:transparent;

    color:var(--gold-dark);

    font-size:18px;

    font-weight:600;

    transition:var(--transition);

}

.secondary-button:hover{

    background:var(--gold);

    color:#fff;

}

/* =====================================================
   HERO IMAGE
===================================================== */

.hero-image{

    position:relative;

    overflow:hidden;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 1.4s ease;

}

.hero-card:hover .hero-image img{

    transform:scale(1.05);

}

.hero-image::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(

            to left,

            transparent 35%,

            color-mix(in srgb,var(--background) 82%,transparent)

        );

}

.hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,0),

            rgba(0,0,0,.05)

        );

}

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

.hero-card::after{

    content:"";

    position:absolute;

    right:-420px;

    top:-380px;

    width:950px;

    height:950px;

    pointer-events:none;

    background:

        radial-gradient(

            circle,

            rgba(255,224,170,.24) 0%,

            rgba(255,224,170,.14) 20%,

            rgba(255,224,170,.08) 40%,

            rgba(255,224,170,.04) 60%,

            transparent 82%

        );

    transition:var(--transition-slow);

}

.hero-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

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

}
/* =====================================================
   FOOTER
===================================================== */

.footer{

    margin-top:45px;

    padding:28px 0;

    border-top:1px solid var(--border);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition-slow);

}

.datetime{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--text-light);

    font-size:17px;

    letter-spacing:.4px;

}

.separator{

    color:var(--gold);

    font-size:18px;

}

/* =====================================================
   ANIMATIONS
===================================================== */

.fade{

    animation:fadePage .8s ease;

}

@keyframes fadePage{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroAppear{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(212,175,55,.15);

    }

    50%{

        box-shadow:0 0 35px rgba(212,175,55,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(212,175,55,.15);

    }

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--background-secondary);

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            180deg,

            var(--gold-light),

            var(--gold-dark)

        );

    border-radius:50px;

    border:2px solid var(--background-secondary);

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(

            180deg,

            #E8C97C,

            var(--gold)

        );

}
/* =====================================================
   PROFILE MENU
===================================================== */

.profile{

    position:relative;

    display:flex;

    align-items:center;

}

.profile-btn{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 18px;

    border-radius:18px;

    background:var(--white);

    border:1px solid var(--border);

    color:var(--text);

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow-small);

    transition:var(--transition);

}

.profile-btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            var(--gold-light),

            var(--gold)

        );

    color:#111;

    font-size:19px;

    font-weight:700;

    user-select:none;

    transition:var(--transition);

}

.avatar img{

    width:100%;

    height:100%;

    border-radius:inherit;

    object-fit:cover;

}

.profile-btn:hover .avatar{

    transform:rotate(10deg) scale(1.08);

}

.arrow{

    margin-left:4px;

    font-size:12px;

    transition:.35s;

}

.profile.active .arrow{

    transform:rotate(180deg);

}

/* =====================================================
   PROFILE DROPDOWN
===================================================== */

.profile-menu{

    position:absolute;

    top:72px;

    right:0;

    width:270px;

    overflow:hidden;

    display:none;

    border-radius:22px;

    background:var(--white);

    border:1px solid var(--border);

    box-shadow:var(--shadow-large);

    backdrop-filter:blur(22px);

    animation:menuShow .25s ease;

    z-index:999;

}

.profile.active .profile-menu{

    display:block;

}

.profile-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 22px;

    color:var(--text);

    transition:var(--transition);

}

.profile-menu a:hover{

    background:var(--gold);

    color:#fff;

    padding-left:28px;

}

.profile-menu hr{

    border:none;

    border-top:1px solid var(--border);

}

@keyframes menuShow{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================================================
   THEME SWITCH
===================================================== */

.theme-switch{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:18px;

}

.theme-icon{

    font-size:18px;

    color:var(--gold);

    user-select:none;

}

.switch{

    position:relative;

    width:64px;

    height:34px;

}

.switch input{

    display:none;

}

.slider{

    position:absolute;

    inset:0;

    cursor:pointer;

    border-radius:50px;

    background:#b9b9b9;

    transition:.35s;

}

.slider::before{

    content:"";

    position:absolute;

    width:28px;

    height:28px;

    left:3px;

    top:3px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--gold-light),

            var(--gold)

        );

    transition:.35s;

    box-shadow:

        0 4px 12px rgba(0,0,0,.25);

}

.switch input:checked + .slider{

    background:#2d2d2d;

}

.switch input:checked + .slider::before{

    transform:translateX(30px);

}
/* =====================================================
   DARK THEME
===================================================== */

body.dark{

    --background:#111315;
    --background-secondary:#181A1D;

    --white:#1E2125;

    --text:#F4F4F4;
    --text-light:#B8B8B8;

    --border:#30343A;

}

body.dark .sidebar{

    border-right:1px solid var(--border);

}

body.dark .logo{

    background:#22252A;

}

body.dark .hero-card{

    background:#1E2125;

}

body.dark .profile-btn,
body.dark .profile-menu,
body.dark .user{

    background:#22252A;

}

body.dark .footer{

    border-top:1px solid var(--border);

}

body.dark .hero-image::before{

    background:

        linear-gradient(

            to left,

            transparent 35%,

            rgba(17,19,21,.86)

        );

}

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

@media (max-width:1300px){

    .hero-card{

        grid-template-columns:1fr;

    }

    .hero-image{

        min-height:420px;

    }

}

@media (max-width:1100px){

    .wrapper{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:relative;

        height:auto;

        border-right:none;

        border-bottom:1px solid var(--border);

        align-items:center;

    }

    .menu{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

    }

    .main{

        padding:35px;

    }

}

@media (max-width:900px){

    .hero-content{

        padding:55px;

    }

    .hero-content h1{

        font-size:54px;

    }

    .hero-content p{

        font-size:19px;

    }

}

@media (max-width:700px){

    .main{

        padding:22px;

    }

    .hero-content{

        padding:38px 30px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .primary-button,
    .secondary-button{

        width:100%;

        justify-content:center;

        margin:12px 0 0;

    }

    .header{

        justify-content:center;

    }

    .profile-menu{

        width:100%;

        right:0;

    }

}

@media (max-width:520px){

    .logo{

        width:95px;
        height:95px;
        font-size:32px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:17px;

    }

    .menu{

        gap:18px;

    }

    .menu a{

        font-size:16px;

    }

}

/* =====================================================
   SELECTION
===================================================== */

::selection{

    background:var(--gold);

    color:#fff;

}

/* =====================================================
   FOCUS
===================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}

/* =====================================================
   ACHIEVEMENT NOTIFICATION
===================================================== */

.achievement-notification{
    position:fixed;
    top:24px;
    left:50%;
    z-index:2000;
    width:min(440px,calc(100% - 32px));
    display:flex;
    gap:16px;
    padding:18px 20px;
    border:1px solid rgba(212,177,108,.5);
    border-radius:20px;
    background:var(--white);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    opacity:0;
    transform:translate(-50%,-24px);
    transition:opacity .3s ease,transform .3s ease;
}

.achievement-notification.visible{
    opacity:1;
    transform:translate(-50%,0);
}

.achievement-notification-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
    font-size:24px;
}

.achievement-notification strong{
    display:block;
    margin-bottom:4px;
}

.achievement-notification p,
.achievement-notification small,
.achievement-notification em{
    display:block;
    color:var(--text-light);
    font-size:13px;
    line-height:1.45;
}

.achievement-notification small{
    margin-top:5px;
    color:var(--gold-dark);
    font-weight:700;
}

.achievement-notification em{
    margin-top:4px;
}

.language-switcher { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid var(--border-color, #e5dccb); font-size:14px; }
.language-switcher select { border:1px solid var(--gold, #b88a32); border-radius:8px; padding:5px 8px; background:transparent; color:inherit; }
.language-switcher-floating { position:fixed; right:22px; bottom:22px; z-index:1000; background:var(--surface, #fff); border:1px solid var(--gold, #b88a32); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.12); }