*{margin:0;padding:0;box-sizing:border-box;font-family:'Ubuntu',sans-serif;} body{ background:linear-gradient(to bottom,#35606b 0,#eef3f7 260px); transition:.3s; } .header{position:relative;overflow:visible;

background-color:#f8f6f2;

background-image:
    linear-gradient(
        rgba(248,246,242,0.84),
        rgba(248,246,242,0.84)
    ),
    url('/uploads/bg.webp');

background-size:auto 100%;
background-position:0 center;
background-repeat:repeat-x;

transition:.3s;

will-change:background-position;

animation:headerBgMove 90s linear infinite;

}

body.dark .header{background-color:#16252d;

background-image:
    linear-gradient(rgba(22,37,45,0.90), rgba(22,37,45,0.90)),
    url('/uploads/bg.webp');

}

@keyframes headerBgMove{from{background-position:0 center;}to{background-position:1400px center;}} .top-bar{ display:flex; align-items:center; justify-content:center; padding:14px 20px; position:relative; } .center-menu{ display:flex; align-items:center; gap:18px; position:absolute; left:50%; transform:translateX(-50%); } .icon-box{ width:38px;height:38px; display:flex;align-items:center;justify-content:center; border-radius:12px; background:rgba(0,0,0,0.05); transition:.25s; } .icon-box img{width:28px;height:28px;} .icon-box:hover{ transform:translateY(-4px) scale(1.1); background:#eef3f7; } body.dark .icon-box{ background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); } .sep{color:#bbb;} body.dark .sep{color:#666;} .right-menu{ position:absolute; right:calc((100% - 1300px)/2 + 20px); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:10px; } .auth-group{ display:flex; align-items:center; border-radius:12px; overflow:hidden; background:#3b82f6; box-shadow:0 4px 12px rgba(0,0,0,0.15); } .auth-btn{ padding:9px 16px; font-size:13.5px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:0.2px; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; color:#fff; background:transparent; transition:.2s; position:relative; } .auth-btn.active{ background:rgba(0,0,0,0.2); } .auth-btn:hover{ background:rgba(255,255,255,0.15); } .auth-icon{ width:22px;height:22px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:rgba(255,255,255,0.2); font-size:11px; } body.dark .auth-group{ background:#4c8fb0; } .theme-toggle{ background:#eef3f7; border-radius:10px; padding:9px 11px; cursor:pointer; display:flex; align-items:center; justify-content:center; } body.dark .theme-toggle{ background:#2c3e50; color:#fff; } .info-bar{position:relative;overflow:hidden;

background-color:#4c8fb0;

background-image:
    linear-gradient(rgba(76,143,176,0.82), rgba(76,143,176,0.82)),
    url('/uploads/bg.webp');

background-size:cover;
background-position:0 center;
background-repeat:repeat-x;

color:#fff;

height:42px;

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

font-size:13px;

animation:bgMove 40s linear infinite;

}

@keyframes bgMove{from{background-position:0 center;}to{background-position:1000px center;}}.hero{background:#2d5667;padding:20px;} .hero-inner{max-width:1250px;margin:auto;display:flex;gap:15px;} .slider{ flex:2; height:170px; border-radius:8px; position:relative; overflow:hidden; } .slide{ position:absolute; inset:0; display:none; padding:20px; color:#fff; background:#4c8fb0; } .slide[data-bg]{ background-size:cover; background-position:center; } .slide::after{content:'';position:absolute;inset:0;

background:
    linear-gradient(
        90deg,
        rgba(7,15,25,.38) 0%,
        rgba(7,15,25,.16) 32%,
        rgba(7,15,25,.04) 58%,
        rgba(7,15,25,0) 100%
    );

z-index:1;

} .slide-content{position:relative;z-index:2;} .slide.active{display:block;} .slider h2{font-size:22px;margin-bottom:5px;} .slider p{font-size:13px;width:60%;color:#dcecf5;} .dots{ position:absolute; bottom:10px; left:15px; display:flex; gap:6px; z-index:3; } .dot{ width:8px;height:8px;border-radius:50%; background:#8fc3d8; cursor:pointer; } .dot.active{background:#fff;} .right-panel{ flex:1; background:#294c5a; border-radius:10px; padding:15px; color:#fff; } .right-panel h3{font-size:14px;margin-bottom:12px;} .user{ display:flex; align-items:center; gap:12px; margin-bottom:10px; padding:6px; border-radius:10px; transition:.2s; } .user:hover{background:rgba(255,255,255,0.07);} .avatar{ width:64px;height:64px; border-radius:12px; background:url('/uploads/gorsel.webp') center/cover no-repeat; position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; } .avatar::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,0.35); } .avatar img{ position:relative; z-index:2; transition:.25s; } .user:hover .avatar img{transform:scale(1.15);} .username{ font-size:13px; background:rgba(255,255,255,0.08); padding:6px 12px; border-radius:8px; } .reg-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:9999; } .reg-card{ width:360px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.25); animation:fade .2s ease; } body.dark .reg-card{background:#16252d;color:#fff;} @keyframes fade{ from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} } .reg-head{ background:#4c8fb0; color:#fff; padding:14px; display:flex; justify-content:space-between; font-weight:600; } .reg-body{padding:20px;display:flex;flex-direction:column;gap:10px;} .reg-body input{ padding:10px; border-radius:8px; border:none; background:#eef3f7; } body.dark .reg-body input{background:#2c3e50;color:#fff;} .reg-btn{ background:#3b82f6; color:#fff; border:none; padding:10px; border-radius:8px; cursor:pointer; } .verify-avatar{ width:90px;height:90px; margin:auto; border-radius:12px; background:url('/uploads/gorsel.webp') center/cover no-repeat; display:flex;align-items:center;justify-content:center; } .verify-avatar img{width:65px;} .verify-code{ display:flex; align-items:center; justify-content:space-between; background:#eef3f7; padding:10px; border-radius:8px; font-weight:600; } .timer{ text-align:center; font-size:12px; color:#888; } .toast{ position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-20px); background:#1f2933; color:#fff; padding:12px 18px; border-radius:12px; font-size:13px; box-shadow:0 10px 25px rgba(0,0,0,.35); opacity:0; transition:.3s; z-index:99999; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .pass-box{ display:flex; align-items:center; gap:8px; background:#eef3f7; border-radius:10px; padding:6px 10px; } .pass-box i{ background:#dbe7ef; padding:8px; border-radius:8px; font-size:12px; } .pass-box input{ border:none; background:transparent; outline:none; width:100%; } .verify-avatar{ width:140px; height:120px; margin:auto; border-radius:16px; background:url('/uploads/gorsel.webp') center/cover no-repeat; display:flex; align-items:flex-end; justify-content:center; position:relative; overflow:visible; box-shadow:0 15px 30px rgba(0,0,0,.35); } .verify-avatar::after{ content:''; position:absolute; inset:0; border-radius:16px; background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.1)); } .verify-avatar img{ width:80px; position:relative; z-index:2; transform:translateY(10px); transition:.3s; } .verify-avatar:hover img{ transform:scale(1.1); } .verify-code{ display:flex; align-items:center; justify-content:space-between; background:#eef3f7; padding:12px; border-radius:10px; font-weight:600; } .verify-code button{ background:#3b82f6; color:#fff; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; transition:.2s; } .verify-code button:hover{ background:#2563eb; transform:scale(1.05); } body.dark .auth-btn{ color:#e5f3ff; } body.dark .auth-btn.active{ background:rgba(255,255,255,0.08); } body.dark .auth-btn:hover{ background:rgba(255,255,255,0.12); } body.dark .auth-icon{ background:rgba(255,255,255,0.12); color:#fff; } body.dark .auth-group{ background:#355f73; box-shadow:0 6px 18px rgba(0,0,0,0.4); } body.dark .auth-btn:hover .auth-icon{ background:#4c8fb0; } body.dark .verify-code{ backdrop-filter: blur(6px); } body.dark .verify-code{ background:#24343d; color:#e6f2f7; border:1px solid rgba(255,255,255,0.06); } body.dark .verify-code span{ color:#9fb6c3 !important; } body.dark .verify-code button{ background:#3b82f6; } body.dark .verify-code button:hover body.dark .pass-box{ background:#24343d; border:1px solid rgba(255,255,255,0.06); } body.dark .pass-box i{ background:#1b2a32; color:#9fb6c3; } body.dark .pass-box input{ color:#fff; } body.dark .pass-box input::placeholder{ color:#7f9aa8; } body.dark .reg-btn[style*="64748b"]{ background:#3a4d57 !important; color:#d7e7ef; } body.dark .reg-btn[style*="64748b"]:hover{ background:#2e3f48 !important; } body.dark .timer{ color:#9fb6c3; } body.dark .reg-card{ box-shadow:0 20px 60px rgba(0,0,0,.6); } .auth-group::before, .auth-group::after{ display:none !important; content:none !important; } .auth-group{ gap:4px; } .auth-btn{ font-family:'Outfit',sans-serif !important; font-weight:600; font-size:14px; letter-spacing:0.3px; } .auth-btn{ gap:8px; } .auth-icon{ width:24px; height:24px; border-radius:8px; } .auth-group{ background:#3b82f6; border-radius:14px; padding:4px; } .auth-btn.active{ background:rgba(0,0,0,0.25); } .auth-btn.active{ box-shadow:none !important; outline:none !important; } .auth-btn{ box-shadow:none !important; } .auth-btn{ padding:6px 12px; font-size:13px; } .auth-icon{ width:20px; height:20px; border-radius:6px; font-size:10px; } .auth-btn{ font-family:'Outfit',sans-serif !important; font-weight:600; letter-spacing:0.2px; } .auth-group{ padding:3px; gap:2px; } .auth-btn{ border-radius:8px; } .reg-body input{ font-family:'Inter',sans-serif !important; font-size:13.5px; font-weight:500; letter-spacing:0.2px; } .reg-body input::placeholder{ font-family:'Inter',sans-serif; color:#94a3b8; font-weight:500; } body.dark .reg-body input::placeholder{ color:#7f9aa8; } i.fa-solid{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,0.06); font-size:12px; } body.dark i.fa-solid{ background:rgba(255,255,255,0.08); color:#e6f2f7; } .reg-head i{ margin-right:8px; } .reg-btn i{ margin-right:6px; } .verify-code button i{ width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,0.2); } .pass-box i{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#dbe7ef; } body.dark .pass-box i{ background:#1b2a32; } .reg-body input{ background:#eef3f7; border:1px solid transparent; transition:.2s; } .reg-body input:focus{ border-color:#3b82f6; background:#fff; outline:none; } body.dark .reg-body input:focus .timer{ margin-top:8px; padding:8px 12px; border-radius:8px; background:#eef3f7; font-size:13px; font-weight:600; color:#334155; text-align:center; border:1px solid rgba(0,0,0,0.05); } body.dark .timer{ background:#24343d; color:#e6f2f7; border:1px solid rgba(255,255,255,0.06); } .reg-body{ align-items:center; } .reg-btn{ width:100%; max-width:260px; text-align:center; display:flex; justify-content:center; align-items:center; gap:6px; } .auth-icon{ background:none !important; width:auto; height:auto; } .reg-head i{ background:rgba(255,255,255,0.2); width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; } body.dark .reg-head i{ background:rgba(255,255,255,0.1); } .reg-btn i{ background:rgba(255,255,255,0.2); width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; } .verify-row{ display:flex; align-items:center; gap:14px; width:100%; margin-top:10px; } .verify-avatar{ width:95px; height:95px; flex-shrink:0; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.25); } .verify-avatar img{ width:100%; height:100%; object-fit:cover; } .verify-info{ flex:1; } .verify-code{ display:flex; justify-content:space-between; align-items:center; background:#eef3f7; padding:12px; border-radius:10px; } .verify-text{ display:flex; flex-direction:column; gap:4px; } .code-line{ font-size:14px; font-weight:600; color:#111; } .code-line b{ font-size:15px; } .motto-line{ font-size:12px; color:#64748b; } body.dark .verify-code{ background:#24343d; } body.dark .code-line{ color:#fff; } body.dark .motto-line{ color:#9fb6c3; } .action-box{ width:100%; margin-top:14px; padding:14px; border-radius:12px; background:#f1f5f9; display:flex; flex-direction:column; gap:10px; } body.dark .action-box{ background:#1f2f37; border:1px solid rgba(255,255,255,0.05); } .reg-btn.primary{ background:#3b82f6; font-weight:600; } .reg-btn.secondary{ background:#64748b; } .timer{ font-size:13px; font-weight:600; text-align:center; padding:10px; border-radius:10px; background:#e2e8f0; } body.dark .timer{ background:#24343d; } .copy-btn{ background:#3b82f6; border:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .copy-btn i{ background:none !important; color:#fff; } .verify-avatar{ position:relative; } .verify-username{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:0.3px; box-shadow:0 6px 15px rgba(0,0,0,0.25); z-index:5; } .verify-username::after{ content:''; position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,0.05); } body.dark .verify-username{ background:#3b82f6; color:#fff; } .verify-top{ width:100%; display:flex; justify-content:flex-start; margin-bottom:6px; padding-left:4px; } .verify-avatar{ position:relative; } .verify-row{position:relative;display:flex;align-items:flex-start;gap:16px;width:100%;margin-top:18px;} .verify-welcome{ position:absolute; top:-16px; left:0; background:#ffffff; color:#0f172a; font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.2px; padding:6px 14px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,0.12); white-space:nowrap; z-index:20; opacity:0; transform:translateY(-6px); transition:all .35s ease; } .verify-welcome.show{ right:100px; opacity:1; transform:translateY(0); } .verify-welcome span{ color:#3b82f6; font-weight:700; } body.dark .verify-welcome{ background:#1f2f37; color:#e6f2f7; } .user-menu{ position:relative; } .user-btn{ display:flex; align-items:center; gap:10px; background:#3b82f6; padding:6px 14px; border-radius:999px; cursor:pointer; color:#fff; font-weight:600; font-size:13px; transition:.25s; } .user-btn{ display:flex; align-items:center; gap:8px; background:#4c8fb0; padding:4px 10px 4px 4px; border-radius:999px; cursor:pointer; color:#fff; font-weight:600; font-size:12.5px; transition:.2s; } .user-btn img{ width:46px; height:46px; border-radius:50%; background:url('/uploads/stars.webp') center/cover no-repeat; object-fit:cover; object-position:40% 20%; image-rendering:auto; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; backface-visibility:hidden; transform:translateZ(0); } .arrow{ font-size:11px; transition:.25s; } .user-btn.active .arrow{ transform:rotate(180deg); } .user-dropdown{ position:absolute; top:45px; right:0; background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.2); display:none; flex-direction:column; min-width:160px; overflow:hidden; z-index:999; } .user-dropdown a{ padding:10px 12px; font-size:13px; text-decoration:none; color:#111; display:flex; align-items:center; gap:8px; transition:.2s; } .user-dropdown a:hover body.dark .user-dropdown{ background:#1f2f37; } body.dark .user-dropdown a{ color:#fff; } body.dark .user-dropdown a:hover .user-btn{ height:46px; padding:0 12px 0 4px; display:flex; align-items:center; } .user-btn{ overflow:hidden; } .user-btn{ line-height:1; } .user-menu{ position:relative; } .user-btn{ background:#4c8fb0; transition:0.2s; } .user-btn:hover .user-btn, .user-btn:focus, .user-btn:active, .user-btn:hover{ outline: none !important; -webkit-tap-highlight-color: transparent !important; box-shadow: none !important; } .user-btn{ background:#4c8fb0 !important; } .user-btn:hover{ background:#3f7c98 !important; } .logo-box{ display:flex; align-items:center; gap:10px; } .logo-box img{ height:72px; width:auto; object-fit:contain; image-rendering:auto; } .logo-box img{ transition:.25s; } .logo-box img:hover{ transform:scale(1.05); opacity:0.9; } .header{ position:relative; } .logo-box{ position:absolute; left:calc((100% - 1300px)/2 - 10px); top:78px; transform:translateY(-50%); z-index:30; } .logo-box img{ height:110px; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25)); } .center-menu{ display:flex; gap:28px; position:absolute; left:50%; transform:translateX(-50%); } .center-menu{ gap:34px; } .menu-item{ font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:600; color:#5b6b75; position:relative; }  .menu-item:hover{ color:#3b82f6; transform:translateY(-3px); } .menu-item:hover{ color:#3b82f6; transform:translateY(-3px); } .hero-inner{ max-width:1250px; width:100%; margin:auto; padding:0 20px; display:grid; grid-template-columns: 2fr 1fr; gap:20px; } body{ overflow-x:hidden; } .top-bar{ height:90px; } .menu-item, .menu-item span{ text-decoration:none !important; border:none !important; } .user-info{ display:flex; flex-direction:column; line-height:1.1; } .username-text{ font-size:12px; font-weight:700; }.role-badge{display:inline-flex;align-items:center;justify-content:center;

width:fit-content;
max-width:max-content;

padding:3px 10px;

border-radius:999px;

background:#1e3a8a;
color:#c7e0ff;

font-size:10px;
font-weight:800;
letter-spacing:.4px;
line-height:1;

white-space:nowrap;

margin-top:4px;

}.staff-btn{ background:#2563eb; color:#fff !important; font-weight:600; border-radius:8px; margin:4px; } .staff-btn:hover{ background:#1d4ed8 !important; } @media(max-width:900px){ .hero-inner{flex-direction:column;} .center-menu{position:static;transform:none;} } .menu-dropdown{position:relative;display:flex;align-items:center;}.search-user-btn{position:relative;

display:flex;
align-items:center;
justify-content:center;
gap:9px;

width:100%;
height:50px;

padding:0 15px;

border:none;
border-radius:14px;

background:#4c8fb0;

box-shadow:
    0 8px 18px rgba(76,143,176,.16),
    inset 0 1px 0 rgba(255,255,255,.06);

transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;

overflow:hidden;

}

.search-user-btn::after{content:'';

position:absolute;
inset:0;

background:linear-gradient(
    to bottom,
    rgba(255,255,255,.08),
    transparent 42%
);

pointer-events:none;

}

.search-user-btn:hover{background:#5697b7;

transform:translateY(-1px);

box-shadow:
    0 12px 24px rgba(76,143,176,.22),
    inset 0 1px 0 rgba(255,255,255,.08);

}

.search-user-btn:active{transform:scale(.985);}

.search-icon-box{width:32px;height:32px;

min-width:32px;

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

border-radius:10px;

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

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

transition:.18s ease;

}

.search-user-btn:hover .search-icon-box{background:rgba(255,255,255,.14);}

.search-icon-box img{width:20px;height:20px;

object-fit:contain;

image-rendering:auto;

filter:drop-shadow(0 1px 2px rgba(0,0,0,.14));

transition:transform .18s ease;

}

.search-user-btn:hover .search-icon-box img{transform:scale(1.06);}

.search-btn-text{font-family:'Outfit',sans-serif;

font-size:12.8px;
font-weight:800;

letter-spacing:.45px;

color:#fff;

text-transform:uppercase;

transform:translateY(.5px);

}

.header-user-top{display:flex;align-items:center;gap:5px;}

.header-user-icon{width:20px !important;height:20px !important;

min-width:20px !important;
max-width:20px !important;

min-height:20px !important;
max-height:20px !important;

object-fit:contain !important;
display:block !important;
flex:none !important;

border-radius:5px;

image-rendering:auto !important;

filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));

transition:.18s ease;

}

.header-user-top{display:flex;align-items:center;gap:6px;}

.header-user-top img{width:18px !important;height:18px !important;}

.user-btn:hover .header-user-icon{transform:scale(1.08);}

body.dark .search-user-btn{background:#355f73;

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

}

body.dark .search-user-btn:hover

body.dark .search-icon-box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.04);}

.submenu-icon{width:24px;height:24px;min-width:34px;

object-fit:contain;

border-radius:10px;

background:#eef4ff;

padding:4px;

transition:.22s;

}

.submenu a:hover .submenu-icon{background:#3b82f6;transform:scale(1.08);}

body.dark .submenu-icon{background:#243943;}

body.dark .submenu a:hover .submenu-icon{background:#4c8fb0;}

.menu-item:not(:last-child)::after{display:none !important;content:none !important;}



.center-menu{display:flex;align-items:flex-start;gap:34px;position:absolute;left:50%;transform:translateX(-50%);z-index:500;}



.menu-dropdown{position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:18px;}.pass-box img{width:37px;height:37px;

padding:8px;

border-radius:12px;

background:#f1f5f9;
border:1px solid rgba(15,23,42,0.06);

object-fit:contain;
flex-shrink:0;

}

body.dark .pass-box img{background:#22313a;border:1px solid rgba(255,255,255,0.04);}

.submenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);min-width:220px;background:#fff;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:4px;

opacity:0;
visibility:hidden;
pointer-events:none;

transition:
    opacity .18s ease,
    transform .18s ease;

box-shadow:
    0 20px 40px rgba(0,0,0,0.14),
    0 4px 10px rgba(0,0,0,0.08);

border:1px solid rgba(0,0,0,0.05);
z-index:99999;

}body.dark .menu-item{color:#8ea7b5;}

body.dark .menu-item span{color:#8ea7b5;transition:.22s ease;}

body.dark .menu-item:hover

body.dark .menu-item:hover span{color:#bfd9e6;}.menu-dropdown:hover .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}.menu-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;cursor:pointer;transition:.25s;position:relative;}

.submenu{position:absolute;left:50%;transform:translateX(-50%) translateY(10px);min-width:220px;background:#ffffff;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:4px;opacity:0;visibility:hidden;pointer-events:none;transition:.25s ease;box-shadow:0 20px 40px rgba(0,0,0,0.14),0 4px 10px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.05);z-index:9999;}

.submenu::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:#fff;border-left:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05);}

.menu-dropdown:hover .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}

.submenu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;text-decoration:none;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:#334155;transition:.22s;position:relative;overflow:hidden;}

.submenu a::before{content:'';position:absolute;inset:0;background:rgba(59,130,246,0.08);opacity:0;transition:.2s;}

.submenu a:hover::before{opacity:1;}

.submenu a:hover{transform:translateX(4px);color:#2563eb;}

.submenu a i{width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#eef4ff;color:#3b82f6;font-size:13px;transition:.22s;}

.submenu a:hover i{background:#3b82f6;color:#fff;transform:scale(1.08);}

body.dark .submenu{background:#1b2b33;border:1px solid rgba(255,255,255,0.05);box-shadow:0 20px 50px rgba(0,0,0,0.45);}

body.dark .submenu::before{background:#1b2b33;border-left:1px solid rgba(255,255,255,0.05);border-top:1px solid rgba(255,255,255,0.05);}

body.dark .submenu a{color:#d7e7ef;}

body.dark .submenu a:hover

body.dark .submenu a::before{background:rgba(125,211,252,0.08);}

body.dark .submenu a i{background:#243943;color:#7dd3fc;}

body.dark .submenu a:hover i{background:#4c8fb0;color:#fff;}

@media (max-width:1100px){

.top-bar{padding:14px 18px;height:auto;min-height:95px;flex-wrap:wrap;justify-content:space-between;align-items:center;}

.logo-box{position:relative !important;left:auto !important;top:auto !important;transform:none !important;order:1;}

.logo-box img{height:78px !important;}

.right-menu{position:relative !important;right:auto !important;top:auto !important;transform:none !important;order:2;margin-left:auto;gap:8px;}

.center-menu{position:relative !important;left:auto !important;transform:none !important;width:100%;order:3;margin-top:14px;justify-content:center;gap:20px;flex-wrap:wrap;padding-bottom:0;}

.menu-dropdown{padding-bottom:0;}

.hero-inner{grid-template-columns:1fr;}

.right-panel{width:100%;}

.slider{height:220px;}

.slider p{width:100%;}

}

@media (max-width:768px){

body{overflow-x:hidden;}

.header{overflow:visible;}

.top-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;

padding:8px 12px;
gap:10px;

height:auto;
min-height:auto;

flex-wrap:wrap;

}

.logo-box{position:relative !important;left:auto !important;top:auto !important;transform:none !important;

width:auto;
flex:1;

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

margin:0;
padding:0;

}

.logo-box img{height:56px !important;width:auto;display:block;}

.logo-box{margin-top:12px !important;}

.right-menu{position:relative !important;right:auto !important;top:auto !important;transform:none !important;

width:auto;
margin-left:auto;

display:flex;
align-items:center;
gap:8px;

flex-wrap:nowrap;

}

.auth-group{width:auto;max-width:none;

border-radius:16px;
overflow:hidden;

}

.auth-btn{padding:8px 12px;font-size:11.5px;}

.theme-toggle{width:44px;height:44px;min-width:44px;

border-radius:14px;

}

.center-menu{position:relative !important;left:auto !important;transform:none !important;

width:100%;
margin-top:2px;

display:grid !important;
grid-template-columns:repeat(5,1fr);

gap:10px;
padding:0;

}

.menu-dropdown{width:100%;padding-bottom:0;}

.menu-item{width:100%;

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

gap:8px;

}

.menu-item span{font-size:11px;text-align:center;line-height:1.2;font-weight:700;}

.icon-box{width:54px;height:54px;

border-radius:18px;

}

.icon-box img{width:30px;height:30px;}

.submenu{position:absolute !important;

top:calc(100% + 10px) !important;
left:50% !important;
bottom:auto !important;

transform:translateX(-50%) translateY(10px) !important;

width:min(220px, calc(100vw - 24px)) !important;
min-width:unset !important;
max-width:calc(100vw - 24px) !important;

border-radius:20px !important;

z-index:999999;

}

.menu-dropdown:hover .submenu,.menu-dropdown.active .submenu{opacity:1;visibility:visible;pointer-events:auto;

transform:translateX(-50%) translateY(0) !important;

}

.submenu::before{display:block !important;}

.submenu a{padding:14px;font-size:13px;}

.submenu a i{width:38px;height:38px;min-width:38px;}

}.info-bar{font-size:11px;text-align:center;padding:0 12px;line-height:1.4;}

.hero{padding:12px;}

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

font-size:13px;

background:rgba(255,255,255,0.08);

padding:6px 12px;

border-radius:8px;

}

.online-user-icon{width:18px;height:18px;

min-width:18px;

object-fit:contain;

border-radius:5px;

image-rendering:auto;

filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));

transition:.18s ease;

}

.user:hover .online-user-icon{transform:scale(1.08);}

.hero-inner{padding:0;gap:14px;}

.slider{height:190px;border-radius:16px;}

.slide{padding:18px;}

.slider h2{font-size:19px;line-height:1.25;}

.slider p{font-size:12px;width:100%;}

.right-panel{padding:14px;border-radius:16px;}

.right-panel h3{font-size:13px;}

.user{gap:10px;padding:4px;}

.avatar{width:54px;height:54px;}

.avatar img{top:20px;width:240px;}

.username{font-size:12px;padding:5px 10px;}

.user-btn{max-width:100%;height:auto;padding:4px 10px 4px 4px;}

.user-btn > img{width:46px;height:46px;border-radius:50%;background:url('/uploads/stars.webp') center/cover no-repeat;object-fit:cover;object-position:40% 20%;}

.username-text{font-size:11px;}

.role-badge{font-size:9px;}

.user-dropdown{right:50%;transform:translateX(50%);width:220px;}

.reg-card{width:calc(100% - 24px);max-width:360px;}

.reg-body{padding:16px;}

.user-dropdown a{display:flex;align-items:center;gap:12px;}

.menu-icon-box{width:38px;height:38px;

min-width:38px;

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

border-radius:12px;

background:#eef3f7;

border:1px solid rgba(0,0,0,0.05);

transition:.2s ease;

}

.user-dropdown a:hover .menu-icon-box{background:#dbeafe;transform:scale(1.05);}

body.dark .menu-icon-box{background:#24343d;border:1px solid rgba(255,255,255,0.05);}

.menu-icon{object-fit:contain;display:block;}

.icon-toolbar{width:28px;height:28px;}

.icon-profile{width:28px;height:28px;}

.icon-settings{width:28px;height:28px;}

.icon-logout{width:20px;height:20px;}

.verify-row{display:flex;align-items:flex-start;gap:14px;width:100%;position:relative;margin-top:25px;}

.verify-avatar{position:relative !important;

width:120px !important;
height:120px !important;
min-width:120px !important;

border-radius:18px;
overflow:hidden;

flex-shrink:0;

margin:0 !important;

}

.verify-avatar img{width:100%;height:100%;object-fit:cover;}

.verify-welcome{position:absolute;top:-16px;left:0;

display:inline-flex;
align-items:center;

width:max-content;
max-width:fit-content;

background:#ffffff;
color:#0f172a;

font-family:'Plus Jakarta Sans',sans-serif;
font-size:12.5px;
font-weight:500;
letter-spacing:0.2px;

padding:6px 14px;

border-radius:999px;

box-shadow:0 8px 20px rgba(0,0,0,0.12);

white-space:nowrap;

z-index:20;

opacity:0;
transform:translateY(-6px);

transition:all .35s ease;

}

.verify-welcome span{color:#3b82f6;}

.verify-info{flex:1;display:flex;align-items:flex-start;

margin-left:0 !important;
padding-top:8px;

}

.verify-code{width:100%;

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

padding:16px 18px;

border-radius:20px;

background:#eef3f7;

gap:14px;

}

.code-line{font-size:18px;font-weight:800;color:#0f172a;}

.motto-line{margin-top:6px;font-size:13px;line-height:1.45;color:#64748b;}

.copy-btn{width:52px;height:52px;min-width:52px;

border:none;
border-radius:14px;

background:#3b82f6;

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

}

.copy-btn i{background:none !important;color:#fff;font-size:16px;}@media(max-width:768px){

.verify-row{
    align-items:flex-start !important;
}

.verify-avatar{
    width:92px !important;
    height:92px !important;
    min-width:92px !important;
}

.verify-code{
    padding:14px !important;
    gap:12px !important;
}

.code-line,
.code-line b{
    font-size:16px !important;
}

.motto-line{
    font-size:12px !important;
    max-width:120px !important;
}

.copy-btn{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
}

}@media (max-width:520px){

.center-menu{grid-template-columns:repeat(2,1fr);}

.menu-item span{font-size:10.5px;}

.icon-box{width:48px;height:48px;}

.icon-box img{width:28px;height:28px;}

.auth-group{width:100%;justify-content:center;}

.auth-btn{flex:1;justify-content:center;}

.right-menu{gap:10px;}

.theme-toggle{width:100%;border-radius:12px;}

.info-bar{height:auto;min-height:42px;padding:10px 12px;}

.slider{height:170px;}

.slider h2{font-size:17px;}

.slider p{font-size:11.5px;}

.user-dropdown{width:100%;max-width:260px;}

}.online-users{position:relative;

max-height:154px;

overflow-y:auto;
overflow-x:hidden;

padding-right:8px;
padding-bottom:0;

scrollbar-width:none;

display:flex;
flex-direction:column;
gap:10px;

}

.online-users::-webkit-scrollbar{width:0;height:0;}

.online-users::after{content:'';

position:absolute;

top:8px;
right:1px;

width:3px;
height:72px;

border-radius:999px;

background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.22),
        rgba(255,255,255,0.08)
    );

box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 12px rgba(255,255,255,0.05);

opacity:.9;

pointer-events:none;

transition:.2s ease;

}

.online-users::before{content:'';

position:absolute;
left:0;
right:0;
bottom:0;

height:28px;

background:linear-gradient(
    to bottom,
    rgba(41,76,90,0),
    rgba(41,76,90,0.82)
);

pointer-events:none;

z-index:2;

}

body.dark .online-users::before{background:linear-gradient(to bottom,rgba(41,76,90,0),rgba(41,76,90,0.9));}

.user{position:relative;z-index:1;}

.top-bar{min-height:110px;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible;z-index:1000;}

.center-menu{display:flex;align-items:center;gap:34px;position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);z-index:500;}

.menu-dropdown{position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:0;}

.submenu{top:calc(100% + 18px);}

.menu-dropdown{position:relative;padding-bottom:20px;}

.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);

margin-top:0;

opacity:0;
visibility:hidden;
pointer-events:none;

transition:.18s ease;

}

.menu-dropdown:hover .submenu{opacity:1;visibility:visible;pointer-events:auto;}@media (max-width:768px){

.top-bar{display:flex;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;

padding:16px 14px !important;

gap:12px;
height:auto;

}

.logo-box{width:auto !important;

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

margin:0 !important;
padding:0 !important;

flex:0 0 auto !important;

}

.logo-box a{display:flex;align-items:center;}

.logo-box img{height:70px !important;}

.logo-box{margin-top:14px !important;}

.right-menu{position:relative !important;

margin-left:auto !important;

display:flex;
align-items:center;

gap:8px;

}

.center-menu{margin-top:14px !important;}

.auth-group{display:flex;align-items:center;width:auto;max-width:none;border-radius:14px;overflow:hidden;}

.auth-btn{padding:8px 10px;font-size:11.5px;min-width:auto;flex:none;}

.auth-icon{width:18px;height:18px;font-size:9px;}

.theme-toggle{width:42px;height:42px;min-width:42px;border-radius:12px;flex-shrink:0;}

.center-menu{position:relative !important;left:auto !important;transform:none !important;

width:100%;

display:grid !important;
grid-template-columns:repeat(5,1fr);

gap:8px;

margin-top:0;
padding:0;

}

.menu-dropdown{width:100%;padding-bottom:0;}

.menu-item{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}

.icon-box{width:50px;height:50px;border-radius:16px;}

.icon-box img{width:28px;height:28px;}

.menu-item span{font-size:10.5px;line-height:1.15;text-align:center;}

.submenu{top:calc(100% + 12px) !important;}

}

@media (max-width:768px){

.center-menu{position:relative !important;z-index:9999;}

.menu-dropdown{position:relative;}

.submenu{position:absolute !important;

top:100% !important;
left:50% !important;

transform:translateX(-50%) translateY(12px) !important;

width:220px !important;
min-width:220px !important;
max-width:220px !important;

z-index:999999 !important;

opacity:0;
visibility:hidden;
pointer-events:none;

}

.menu-dropdown:hover .submenu,.menu-dropdown.active .submenu{opacity:1;visibility:visible;pointer-events:auto;

transform:translateX(-50%) translateY(0) !important;

}

}

html,body{width:100%;max-width:100%;overflow-x:hidden;}

*{max-width:100%;}

.header{width:100%;overflow-x:clip;}

.slide-content{position:relative;z-index:2;

height:100%;

display:flex;
flex-direction:column;
justify-content:center;

align-items:flex-start;

}

.slide-readmore{display:inline-flex;align-items:center;gap:8px;

margin-top:14px;

padding:8px 14px;

border-radius:14px;

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

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

backdrop-filter:blur(5px);

text-decoration:none;

transition:
    background .18s ease,
    transform .18s ease,
    border-color .18s ease;

}

.slide-readmore span{color:#ffffff;

font-size:10px;
font-weight:700;

letter-spacing:1.2px;

text-transform:uppercase;

opacity:.95;

}

.slide-readmore-icon{width:22px;height:22px;

border-radius:999px;

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

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

transition:.18s ease;

}

.slide-readmore-icon i{font-size:9px;color:#fff;

opacity:.85;

transition:.18s ease;

}

.slide-readmore:hover{background:rgba(255,255,255,.13);

border-color:rgba(255,255,255,.16);

transform:translateY(-1px);

}

.slide-readmore:hover .slide-readmore-icon{background:rgba(255,255,255,.14);}

.slide-readmore:hover .slide-readmore-icon i{transform:translateX(1.5px);}

.slider h2{margin-bottom:6px;line-height:1.05;}

.slider p{margin-top:0;line-height:1.45;}

/* Nova Anasayfa */

.container{max-width:1250px;width:100%;margin:40px auto;display:flex;gap:25px;align-items:flex-start;padding:0;}

.left{flex:1;min-width:0;}

.right{flex:0 0 340px;width:340px;}.comment-showcase{max-width:1250px;width:100%;margin:34px auto 0 auto;overflow:hidden;}.comment-slider-track{width:max-content;}@media(max-width:1200px){

.container{
    flex-direction:column;
}

.right{
    width:100%;
    min-width:100%;
}

}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}

.card{background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:0 12px 28px rgba(0,0,0,0.12);

transition:.25s;

display:flex;
flex-direction:column;

width:100%;
height:100%;

}

.card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,0.18);}

.card-img{height:180px;background-size:cover;background-position:center;position:relative;transition:transform .4s ease;}

.card:hover .card-img{transform:scale(1.08);}

.category{position:absolute;top:12px;left:12px;padding:6px 14px;font-size:11px;font-weight:700;border-radius:6px;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,0.2);z-index:2;}

.kat-habbo{background:#3498db;color:#ebe7e7;}

.badge-row{position:absolute;bottom:-18px;left:12px;display:flex;gap:8px;background:#fff;padding:6px 10px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,0.25);}

.badge-item{width:36px;height:36px;border-radius:10px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;}

.badge-item img{width:26px;}

.card-body{padding:24px 15px 15px;}

.card-title{font-weight:700;font-size:15px;margin-bottom:6px;}

.card-desc{font-size:13px;color:#666;margin-bottom:12px;

min-height:42px;
line-height:1.6;

overflow:hidden;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

}

.card-footer{display:flex;justify-content:space-between;font-size:12px;color:#999;}.meta{display:flex;align-items:center;gap:8px;}

.meta-user-icon-wrap{width:30px;height:30px;

border-radius:10px;

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

background:
    linear-gradient(
        180deg,
        #ffffff,
        #eef3f8
    );

border:1px solid #dde7f0;

box-shadow:
    0 4px 10px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);

flex-shrink:0;

}

body.dark .meta-user-icon-wrap{background:linear-gradient(180deg,#22313a,#1a252d);

border:1px solid #314550;

box-shadow:
    0 4px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);

}.sidebar-short-news{position:sticky;top:20px;

height:calc(100vh + 580px);display:flex;flex-direction:column;

background:#ffffff;

border-radius:24px;

padding:14px;

border:1px solid #e8eef5;

overflow:hidden;

box-shadow:
    0 10px 35px rgba(15,23,42,.07);

transition:.25s ease;

}

.sidebar-short-news::before{content:'';

position:absolute;
inset:0;

pointer-events:none;

background:
    radial-gradient(
        circle at top right,
        rgba(59,130,246,.08),
        transparent 45%
    );

}

body.dark .sidebar-short-news{background:#16252d;

border:1px solid #263844;

box-shadow:
    0 14px 40px rgba(0,0,0,.38);

}

body.dark .sidebar-short-news::before{background:radial-gradient(circle at top right,rgba(59,130,246,.13),transparent 45%);}

.short-section-title{margin-bottom:18px;flex-shrink:0;}

.sidebar-short-feed{position:relative;

display:flex;
flex-direction:column;
gap:16px;

overflow-y:auto;
overflow-x:hidden;

padding-right:4px;
padding-bottom:85px;

flex:1;

scrollbar-width:none;

scroll-behavior:smooth;

mask-image:
    linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,.45) 96%,
        rgba(0,0,0,0) 100%
    );

}

.sidebar-short-feed::-webkit-scrollbar{display:none;}

.short-feed-card{overflow:hidden;

border-radius:24px;

background:#ffffff;

border:1px solid #e9eef5;

box-shadow:
    0 10px 28px rgba(15,23,42,.06);

transition:.20s ease;

flex-shrink:0;

min-height:220px;

}

.short-feed-card:hover{transform:translateY(-3px);

box-shadow:
    0 18px 40px rgba(15,23,42,.10);

}

body.dark .short-feed-card{background:#18262e;

border-color:#2b3d48;

box-shadow:
    0 14px 35px rgba(0,0,0,.32);

}

.short-feed-banner{position:relative;

min-height:118px;

padding:16px;

display:flex;
flex-direction:column;
justify-content:flex-end;

background-size:cover;
background-position:center;

}

.short-feed-overlay{position:absolute;inset:0;

background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.06),
        rgba(0,0,0,.76)
    );

}

.short-feed-top{position:relative;z-index:2;

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

margin-bottom:10px;

}

.short-feed-category{padding:6px 13px;

border-radius:999px;

background:#3b82f6;

color:#fff;

font-size:10px;
font-weight:800;

letter-spacing:.4px;

box-shadow:
    0 6px 16px rgba(37,99,235,.24);

}

.short-feed-date{display:flex;align-items:center;gap:6px;

color:#f8fafc;

font-size:10px;
font-weight:700;

}

.short-feed-title{position:relative;z-index:2;

display:block;

text-decoration:none;

color:#fff;

font-size:15px;
line-height:1.32;
font-weight:800;

margin-bottom:12px;

font-family:'Plus Jakarta Sans',sans-serif;

transition:.18s ease;

}

.short-feed-title:hover{opacity:.85;}

.short-feed-author{position:relative;z-index:2;

display:flex;
align-items:center;
gap:10px;

}

.short-feed-author-icon{width:36px;height:36px;

border-radius:12px;

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

background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.20),
        rgba(255,255,255,.08)
    );

backdrop-filter:blur(10px);

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

}

.short-feed-author-icon img{width:20px;height:20px;

object-fit:contain;

}

.short-feed-author span{color:#fff;

font-size:12px;
font-weight:700;

}

.short-feed-body{position:relative;

padding:14px 16px 15px;

border-top:1px solid #edf2f7;

overflow:hidden;

}

.short-feed-body *{max-width:100%;}

.short-feed-body img{width:100%;

border-radius:14px;

margin:10px 0;

display:block;

}

.short-feed-body p{font-size:12.5px;line-height:1.62;margin-bottom:8px;word-break:break-word;color:#475569;font-weight:500;text-align:left;

overflow:visible;

display:block;

-webkit-line-clamp:unset;
-webkit-box-orient:unset;

}.short-feed-body p:last-child{margin-bottom:0;}

body.dark .short-feed-body{border-top:1px solid #263844;}

body.dark .short-feed-body p{color:#d7e3ec;}

body.dark .short-feed-body{color:#d7e3ec;}

body.dark .short-feed-body p,body.dark .short-feed-body span,body.dark .short-feed-body div,body.dark .short-feed-body li,body.dark .short-feed-body strong,body.dark .short-feed-body b,body.dark .short-feed-body em{opacity:1;}

body.dark .short-feed-body *{background-color:transparent !important;}

body.dark .short-feed-body [style*="color"]{filter:brightness(1.18);}

@media(min-height:850px){

.short-feed-card{
    min-height:205px;
}

}

@media(max-width:900px){

.sidebar-short-news{
    position:relative;

    height:auto;

    max-height:1280px;

    overflow:hidden;
}

.sidebar-short-feed{overflow-y:auto;overflow-x:hidden;

padding-right:2px;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

max-height:1180px;

}

.sidebar-short-feed::-webkit-scrollbar{display:none;}.short-feed-card{min-height:220px;

    flex-shrink:0;
}

.short-feed-banner{
    min-height:135px;
}

.short-feed-title{
    font-size:16px;
}

.short-feed-body{
    padding:16px;
}

.short-feed-body p{
    font-size:13px;
    line-height:1.7;

    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
}

}.active{background:#00ff6a;}.passive{background:#ff3b3b;}body.dark{background-color:#0f1a20;

background-image:
    linear-gradient(
        rgba(15,26,32,.90),
        rgba(15,26,32,.90)
    ),
    url('/uploads/bgnova.gif');

background-repeat:repeat;
background-position:center;
background-size:auto;
background-attachment:fixed;

color:#e6f2f7;

}

body.dark .container{color:#e6f2f7;}

body.dark .card{background:#16252d;box-shadow:0 12px 28px rgba(0,0,0,0.6);}

body.dark .card-title{color:#fff;}

body.dark .card-desc{color:#9fb6c3;}

body.dark .card-footer{color:#7f9aa8;}

body.dark .kat-habbo{color:#000;}

body.dark .badge-row{background:#1b2a32;box-shadow:0 6px 14px rgba(0,0,0,0.6);}

body.dark .badge-item{background:#24343d;}

body.dark .box{background:#16252d;box-shadow:0 10px 25px rgba(0,0,0,0.6);}

body.dark .short-card{background:#1b2a32;}

body.dark .short-content{color:#cfe3ec;}

body.dark .badge-box{background:#1b2a32;box-shadow:0 4px 10px rgba(0,0,0,0.5);}

body.dark .passive{background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;}

body.dark h3{color:#fff;}

body.dark .meta{color:#9fb6c3;}@media(max-width:900px){.container{flex-direction:column;}.news-grid{grid-template-columns:1fr;}}

.section-title{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:14px 18px;border-radius:12px;

background-color:#f8fafc;

background-image:
    linear-gradient(rgba(248,250,252,0.92), rgba(248,250,252,0.92)),
    url('/uploads/newsbg.webp');

background-size:950px;
background-position:center;
background-repeat:repeat;

box-shadow:0 6px 16px rgba(0,0,0,0.08);

font-size:19px;
font-weight:600;
color:#2c3e50;
letter-spacing:.2px;

}.section-title img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#3498db;padding:6px;box-shadow:0 4px 10px rgba(0,0,0,0.18);transition:.25s;}

.section-title:hover img{transform:scale(1.05);}

body.dark .section-title{

background-color:#16252d;

background-image:
    linear-gradient(
        rgba(22,37,45,0.92),
        rgba(22,37,45,0.92)
    ),
    url('/uploads/newsbg.webp');

background-size:950px;
background-position:center;
background-repeat:repeat;

color:#e6f2f7;

box-shadow:
    0 6px 16px rgba(0,0,0,0.5);

}body.dark .section-title img{background:#2980b9;}.card-link{text-decoration:none;color:inherit;

display:flex;
height:100%;

}

.latest-badges-wrap{position:relative;margin-bottom:24px;}

.latest-badges-box{position:relative;overflow-x:auto;overflow-y:hidden;

background:#fff;
border-radius:16px;
padding:14px 52px;
border:1px solid #edf2f7;

box-shadow:
    0 8px 24px rgba(15,23,42,0.06);

scroll-behavior:smooth;
scrollbar-width:none;

}

.comment-showcase{margin-top:34px;}

.comment-showcase-header{display:flex;align-items:center;gap:14px;

margin-bottom:18px;

padding:14px 18px;

border-radius:12px;

background-color:#f8fafc;

background-image:
    linear-gradient(
        rgba(248,250,252,0.92),
        rgba(248,250,252,0.92)
    ),
    url('/uploads/commentsbg.webp');

background-size:950px;
background-position:center;
background-repeat:repeat;

box-shadow:
    0 6px 16px rgba(0,0,0,0.08);

font-size:19px;
font-weight:600;

color:#2c3e50;

letter-spacing:.2px;

}

.comment-showcase-header img{width:44px;height:44px;

object-fit:contain;

border-radius:10px;

background:#3498db;

padding:6px;

box-shadow:
    0 4px 10px rgba(0,0,0,0.18);

transition:.25s;

}

.comment-showcase-header:hover img{transform:scale(1.05);}

body.dark .comment-showcase-header{

background-color:#16252d;

background-image:
    linear-gradient(
        rgba(22,37,45,0.92),
        rgba(22,37,45,0.92)
    ),
    url('/uploads/commentsbg.webp');

background-size:950px;
background-position:center;
background-repeat:repeat;

color:#e6f2f7;

box-shadow:
    0 6px 16px rgba(0,0,0,0.5);

}

body.dark .comment-showcase-header img{background:#2980b9;}.comment-showcase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

.comment-box{position:relative;

overflow:hidden;

height:104px;

border-radius:20px;

text-decoration:none;

background:#fff;

border:1px solid #e8edf3;

transition:.18s ease;

box-shadow:
    0 6px 18px rgba(15,23,42,.05);

}

.comment-box:hover{transform:translateY(-2px);

box-shadow:
    0 10px 24px rgba(15,23,42,.08);

}



body.dark .comment-box{background:#16212b;

border:1px solid #273646;

box-shadow:
    0 8px 24px rgba(0,0,0,.22);

}.comment-box-bg{position:absolute;inset:0;

background-size:cover;
background-position:center;

opacity:.30;

transform:scale(1.05);

filter:
    brightness(.78)
    blur(.4px);

}

.comment-box-overlay{position:absolute;inset:0;

background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.64) 38%,
        rgba(255,255,255,.26) 100%
    );

}body.dark .comment-box-overlay{background:linear-gradient(90deg,rgba(8,12,20,.76) 0%,rgba(8,12,20,.58) 42%,rgba(8,12,20,.22) 100%);}

.comment-box-content{position:relative;z-index:2;

height:100%;

padding:12px 14px;

display:flex;
flex-direction:column;
justify-content:center;

}.comment-user-area{display:flex;align-items:center;gap:10px;}

.comment-avatar{width:54px;height:54px;

flex-shrink:0;

border-radius:14px;

overflow:hidden;

position:relative;

background-color:#edf2f7;

background-size:cover;
background-position:center;

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

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

}

body.dark .comment-avatar{background-color:#22303d;

border-color:rgba(255,255,255,.08);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 6px 16px rgba(0,0,0,.28);

}.comment-avatar img{width:68px;

position:absolute;

left:50%;
top:-7px;

transform:translateX(-50%);

filter:
    drop-shadow(0 3px 8px rgba(0,0,0,.22));

}.comment-user-meta{flex:1;}

.comment-user-top{display:flex;align-items:center;gap:7px;

margin-bottom:2px;

}

.comment-user-icon{width:16px;height:16px;

object-fit:contain;

}

.comment-user-top span{color:#111827;

font-size:14px;

font-weight:800;

font-family:'Plus Jakarta Sans',sans-serif;

letter-spacing:-0.3px;

}body.dark .comment-user-top span{color:#f8fafc;}.comment-date{color:#64748b;

font-size:11px;

font-weight:700;

margin-top:1px;

}body.dark .comment-date{color:#94a3b8;}.comment-message{margin-top:8px;

color:#334155;

font-size:13px;

line-height:1.45;

font-weight:500;

overflow:hidden;

display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;

max-width:95%;

}

body.dark .comment-message{color:#d8e2ec;}body.dark .comment-box{background:#0f172a;}

@media(max-width:900px){

.comment-showcase-grid{
    grid-template-columns:1fr;
}

}

.latest-badges-box::-webkit-scrollbar{display:none;}

body.dark .latest-badges-box{background:#16252d;border-color:#223540;

box-shadow:
    0 8px 24px rgba(0,0,0,0.35);

}

.latest-badge-card{min-width:68px;}.latest-badges-track::-webkit-scrollbar{display:none;}

.latest-badge-card{position:relative;

width:68px;
height:68px;

flex:0 0 68px;

border-radius:16px;

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

text-decoration:none;

background:
    linear-gradient(
        180deg,
        #f8fafc,
        #eef2f7
    );

border:1px solid #e2e8f0;

}

body.dark .latest-badge-card{background:linear-gradient(180deg,#21313a,#1b2a32);

border-color:#314550;

}

.latest-badge-card img{width:34px;

transition:
    transform .18s ease,
    filter .18s ease;

filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.22));

}

.latest-badge-card:hover img{transform:scale(1.18);

filter:
    drop-shadow(0 5px 10px rgba(0,0,0,0.30));

}

.latest-badge-tooltip{position:absolute;

left:50%;
top:78px;

transform:translateX(-50%);

background:#0f172a;
color:#fff;

font-size:10px;
font-weight:700;

padding:5px 8px;

border-radius:8px;

white-space:nowrap;

opacity:0;

transition:.18s ease;

pointer-events:none;

z-index:999;

}

.latest-badge-card:hover .latest-badge-tooltip{opacity:1;bottom:-26px;}.latest-badge-card:hover .latest-badge-tooltip{opacity:1;top:74px;}

.badges-arrow{position:absolute;

top:50%;

transform:translateY(-50%);

width:30px;
height:30px;

border:none;

border-radius:10px;

cursor:pointer;

z-index:10;

background:#f1f5f9;

color:#334155;

transition:.18s;

}

.badges-arrow:hover{transform:translateY(-50%)scale(1.06);

background:#e2e8f0;

}

body.dark .badges-arrow{background:#22313a;color:#dbe7ee;}

body.dark .badges-arrow:hover

.badges-arrow.left{left:12px;}

.badges-arrow.right{right:12px;}

.latest-badges-box{width:100%;}

.latest-badges-track{display:flex;gap:14px;align-items:center;}.latest-badges-box{overflow:hidden;}

.latest-badges-track{display:flex;gap:14px;}

.latest-badges-box{overflow:hidden;height:120px;display:flex;align-items:center;}



.logo-box{position:absolute;left:calc((100% - 1300px)/2 - 10px);top:78px;transform:translateY(-50%);z-index:30;

isolation:isolate;

}

.logo-box a{position:relative;display:inline-flex;align-items:center;justify-content:center;}

.logo-box img{height:135px;width:auto;object-fit:contain;

image-rendering:auto;
backface-visibility:hidden;
transform:translateZ(0);

transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    filter .45s ease,
    opacity .35s ease;

animation:
    logoFloat 5.5s ease-in-out infinite;

filter:
    drop-shadow(0 12px 24px rgba(0,0,0,.18))
    drop-shadow(0 4px 10px rgba(59,130,246,.18));

}

.logo-box::before{content:'';

position:absolute;
left:50%;
top:50%;

width:82%;
height:72%;

transform:
    translate(-50%, -50%);

background:
    radial-gradient(
        circle,
        rgba(59,130,246,.22) 0%,
        rgba(59,130,246,.10) 35%,
        transparent 72%
    );

filter:blur(26px);

opacity:.7;

z-index:-1;

animation:
    logoGlow 5s ease-in-out infinite;

pointer-events:none;

}

.logo-box a::after{content:'';

position:absolute;
inset:-10px;

background:
    linear-gradient(
        115deg,
        transparent 18%,
        rgba(255,255,255,.08) 34%,
        rgba(255,255,255,.42) 48%,
        rgba(255,255,255,.08) 62%,
        transparent 78%
    );

transform:
    translateX(-140%) skewX(-14deg);

opacity:0;

transition:
    opacity .25s ease;

pointer-events:none;

}

.logo-box:hover img{transform:scale(1.055)translateY(-3px);

filter:
    drop-shadow(0 18px 34px rgba(0,0,0,.26))
    drop-shadow(0 0 18px rgba(96,165,250,.32));

opacity:1;

}

.logo-box:hover::before{opacity:1;

filter:blur(34px);

}

.logo-box:hover a::after{opacity:1;

animation:
    logoShine 1.3s ease;

}

@keyframes logoFloat{

0%{
    transform:translateY(0px);
}

50%{
    transform:translateY(-6px);
}

100%{
    transform:translateY(0px);
}

}

@keyframes logoGlow{

0%{
    opacity:.45;
    transform:translate(-50%, -50%) scale(1);
}

50%{
    opacity:.9;
    transform:translate(-50%, -50%) scale(1.08);
}

100%{
    opacity:.45;
    transform:translate(-50%, -50%) scale(1);
}

}

@keyframes logoShine{

0%{
    transform:
        translateX(-140%)
        skewX(-14deg);
}

100%{
    transform:
        translateX(140%)
        skewX(-14deg);
}

}

body.dark .logo-box::before{background:radial-gradient(circle,rgba(96,165,250,.26) 0%,rgba(96,165,250,.10) 40%,transparent 74%);}



@media(max-width:900px){

.container{
    padding:0 14px;
    gap:18px;
}

.news-grid{
    grid-template-columns:1fr;
    gap:18px;
}

.card{
    border-radius:24px;
    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(15,23,42,.10);

    border:1px solid #edf2f7;
}

body.dark .card{
    border:1px solid #263844;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);
}

.card-img{
    height:210px;
}

.category{
    top:14px;
    left:14px;

    padding:7px 14px;

    border-radius:999px;

    font-size:10px;
    letter-spacing:.3px;

    backdrop-filter:blur(10px);
}

.badge-row{
    left:14px;
    bottom:-20px;

    gap:7px;

    padding:7px 10px;

    border-radius:16px;
}

.badge-item{
    width:34px;
    height:34px;

    border-radius:12px;
}

.badge-item img{
    width:23px;
}

.card-body{
    padding:
        30px 16px 16px;
}

.card-title{
    font-size:18px;
    line-height:1.35;

    margin-bottom:10px;

    font-family:'Plus Jakarta Sans',sans-serif;

    letter-spacing:-0.4px;
}

.card-desc{
    font-size:14px;
    line-height:1.7;

    color:#64748b;

    min-height:auto;

    -webkit-line-clamp:3;

    margin-bottom:18px;
}

body.dark .card-desc{
    color:#9fb6c3;
}

.card-footer{
    gap:12px;

    flex-wrap:wrap;

    justify-content:space-between;

    border-top:1px solid #edf2f7;

    padding-top:14px;
}

body.dark .card-footer{
    border-top:1px solid #263844;
}

.meta{
    gap:10px;

    font-size:12px;

    font-weight:700;
}

.meta-user-icon-wrap{
    width:34px;
    height:34px;

    border-radius:12px;
}

.meta-user-icon,
.meta-date-icon{
    width:18px;
    height:18px;
    object-fit:contain;
}

.card:hover{
    transform:none;
}

.card:hover .card-img{
    transform:none;
}

}

.comment-slider-wrap{position:relative;padding:0 58px;}

.comment-slider{overflow:hidden;width:100%;}

.comment-slider-track{display:flex;gap:14px;transition:.35s ease;}

.comment-box{min-width:calc((100% - 42px) / 4);flex:0 0 calc((100% - 42px) / 4);max-width:calc((100% - 42px) / 4);}.comment-slider{overflow:hidden;width:100%;max-width:100%;}.comment-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:30;

width:44px;
height:44px;

border:none;
border-radius:14px;

cursor:pointer;

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

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

color:#334155;

box-shadow:
    0 10px 25px rgba(0,0,0,.14);

backdrop-filter:blur(8px);

transition:.2s ease;

}

.comment-arrow:hover{transform:translateY(-50%)scale(1.06);}

.comment-arrow.left{left:6px;}.comment-arrow.right{right:6px;}

body.dark .comment-arrow{background:rgba(27,42,50,.95);color:#e2edf5;}

@media(max-width:900px){

.container{
    display:flex;
    flex-direction:column;
}

.right{
    order:1;
    width:100%;
}

.comment-showcase{
    order:2;
    margin-top:28px;
    margin-bottom:70px;
}

.comment-slider-wrap{
    padding:0 0 80px;
}

.comment-slider{
    overflow:hidden;
}

.comment-slider-track{
    gap:12px;
}

.comment-box{
    min-width:100%;
    flex:0 0 100%;
    max-width:100%;

    height:148px;

    border-radius:22px;
}

.comment-box-content{
    padding:16px;
}

.comment-user-area{
    align-items:flex-start;
}

.comment-avatar{
    width:62px;
    height:62px;
    border-radius:16px;
}

.comment-avatar img{
    width:78px;
    top:-6px;
}

.comment-user-top span{
    font-size:16px;
}

.comment-date{
    font-size:12px;
}

.comment-message{
    margin-top:12px;

    font-size:14px;
    line-height:1.5;

    -webkit-line-clamp:2;

    max-width:100%;
}

.comment-arrow{
    position:absolute;

    bottom:10px;
    top:auto;

    width:44px;
    height:44px;

    border-radius:14px;

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

    transform:none !important;
}

.comment-arrow:hover{
    transform:none !important;
}

.comment-arrow.left{
    left:calc(50% - 52px);
}

.comment-arrow.right{
    right:calc(50% - 52px);
}

}@media(max-width:900px){.comment-arrow{display:none !important;}}



@media (max-width:768px){

.top-bar{
    padding-top:22px !important;
}

.logo-box{
    position:relative !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    margin-top:18px !important;

    justify-content:center !important;
}

.logo-box img{
    height:72px !important;
}

}