/* === style.css === */
/* =========================================


   FIVE:CNR - STYLE.CSS


========================================= */


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


* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}


html,


body {


    width: 100%;


    height: 100%;


}


body {


    background: #050505;


    font-family: "Rajdhani", sans-serif;


    overflow-x: hidden;


    overflow-y: auto;


}


/* =========================================


   ANA SAYFA / BANNER


========================================= */


.hero {


    position: relative;


    width: 100%;


    height: 100vh;


    overflow: hidden;


    background: #050505;


}


/* =========================================


   HAREKETLİ BANNER


========================================= */


.hero::before {


    content: "";


    position: absolute;


    inset: 0;


    background-image:


        linear-gradient(


            rgba(0, 0, 0, 0.55),


            rgba(0, 0, 0, 0.55)


        ),


        url("../../image/banner.jpg");


    background-size: cover;


    background-position: center center;


    background-repeat: no-repeat;


    /* Kenarlarda boşluk oluşmaması için */


    transform: scale(1.03);


    animation: bannerMove 18s ease-in-out infinite alternate;


    z-index: 0;


}


@keyframes bannerMove {


    0% {


        transform: scale(1.03) translate(0, 0);


    }


    100% {


        transform: scale(1.08) translate(-1%, -1%);


    }


}


/* =========================================


   ÜST MENÜ


========================================= */


.navbar {


    position: fixed;
top: 0;
left: 0;
z-index: 9999;

    z-index: 10;


    width: 100%;


    height: 72px;


    padding: 0 70px;


    display: flex;


    align-items: center;


    justify-content: space-between;


    background: #00000046;


}


/* =========================================


   SOL ÜST KÜÇÜK LOGO


========================================= */


.top-logo {


    display: flex;


    align-items: center;


    text-decoration: none;


}


.top-logo img {


    display: block;


    width: 105px;


    height: auto;


}


/* =========================================


   SAĞ ÜST MENÜ


========================================= */


.nav-menu {


    height: 100%;


    display: flex;


    align-items: center;


    gap: 45px;


}


.nav-menu a {


    position: relative;


    height: 100%;


    display: flex;


    align-items: center;


    color: #ffffff;


    text-decoration: none;


    font-size: 15px;


    font-weight: 700;


    letter-spacing: 1px;


    transition: 0.2s;


}


/* Menü normal hali */


.nav-menu a {


    position: relative;


    height: 100%;


    display: flex;


    align-items: center;


    color: #ffffff;


    text-decoration: none;


    font-size: 15px;


    font-weight: 700;


    letter-spacing: 1px;


    transition: color 0.25s ease;


}


/* Alt çizgi - normalde görünmez */


.nav-menu a::after {


    content: "";


    position: absolute;


    left: 0;


    right: 0;


    bottom: 0;


    height: 2px;


    background: #55C84A;


    transform: scaleX(0);


    transform-origin: center;


    transition: transform 0.25s ease;


}


/* Mouse üzerine gelince yazı yeşil */


.nav-menu a:hover {


    color: #55C84A;


}


/* Mouse üzerine gelince çizgi açılsın */


.nav-menu a:hover::after {


    transform: scaleX(1);


}


/* =========================================


   SOL ANA İÇERİK


========================================= */


.hero-content {


    position: relative;


    z-index: 5;


    width: 650px;


    margin-left: 40px;


    /* Logonun navbar ile arasındaki mesafe */


    padding-top: 127px;


}


/* =========================================


   BÜYÜK FIVE:CNR LOGOSU


========================================= */


.hero-logo {


    display: block;


    width: 500px;


    max-width: none;


    height: auto;


    margin: 0;


    transform: translateY(-50px);


}


/* =========================================


   YAZILI FIVE:CNR BAŞLIK


========================================= */


.hero-title {


    margin-left: 15px;


    transform: translateY(-09px);


}


.five-title {


    font-family: "Anton", sans-serif;


    font-size: 110px;


    font-weight: 400;


    line-height: 0.95;


    letter-spacing: 2px;


    color: #ffffff;


}


.five-subtitle {


    margin-top: 12px;


    font-family: "Teko", sans-serif;


    font-size: 38px;


    font-weight: 600;


    line-height: 1;


    letter-spacing: 2px;


    color: #55C84A;


}


/* =========================================


   AÇIKLAMA


========================================= */


.description {


    margin-top: 8px;


    margin-left: 15px;


    transform: translateY(-15px);


    color: #d0d0d0;


    font-family: "Inter", sans-serif;


    font-size: 17px;


    font-weight: 400;


    line-height: 1.6;


    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);


}


.description p {


    margin: 0 0 2px 0;


}


/* FIVE:CNR'DE YEŞİL */


.description span {


    color: #55C84A;


    font-weight: 700;


}


/* =========================================


   OYUNCU / DISCORD KUTULARI


========================================= */


/* =========================================


   OYUNCU / DISCORD KUTULARI


========================================= */


.stats {


    margin-left: 15px;


    display: flex;


    align-items: center;


    gap: 10px;


    margin-top: 20px;


}


.stat-box {


    height: 40px;


    padding: 0 14px;


    display: flex;


    align-items: center;


    gap: 8px;


    background: rgba(10, 10, 10, 0.72);


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


    font-family: "Inter", sans-serif;


    font-size: 14px;


    font-weight: 900;


    color: #d0d0d0;


}


.stat-box strong {


    color: #ffffff;


    font-weight: 600;


}


/* =========================================


   YEŞİL / MOR NOKTALAR


========================================= */


.status-dot {


    display: inline-block;


    width: 9px;


    height: 9px;


    flex-shrink: 0;


    border-radius: 50%;


    animation: statusPulse 1.8s ease-in-out infinite;


}


.status-dot.green {


    background: #55C84A;


    box-shadow: 0 0 7px rgba(0, 232, 107, 0.75);


}


.status-dot.purple {


    background: #696cff;


    box-shadow: 0 0 7px rgba(105, 108, 255, 0.75);


    animation-delay: 0.35s;


}


/* =========================================


   NOKTA ANİMASYONU


========================================= */


@keyframes statusPulse {


    0%,


    100% {


        opacity: 1;


        transform: scale(1);


    }


    50% {


        opacity: 0.35;


        transform: scale(0.75);


    }


}


/* =========================================


   OYNA / DISCORD BUTONLARI


========================================= */


.hero-buttons {


    display: flex;


    align-items: center;


    gap: 10px;


    margin-left: 15px;


    margin-top: 30px;


}


.hero-buttons .play-button,


.hero-buttons .discord-button {


    width: 170px;


    height: 48px;


    padding: 0;


    display: flex;


    align-items: center;


    justify-content: center;


    white-space: nowrap;


}


/* OYNA */


.play-button {


    width: 170px;


    height: 48px;


    padding: 0 28px;


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 9px;


    background: #55C84A;


    border: 1px solid #55C84A;


    color: #000000;


    text-decoration: none;


    font-family: "Teko", sans-serif;


    font-size: 20px;


    font-weight: 600;


    letter-spacing: 1px;


    transition: 0.2s ease;


}


.play-button:hover {


    background: #ffffff;


    border-color: #ffffff;


}


.play-icon {


    font-size: 13px;


}


/* DISCORD'A KATIL */


.discord-button {


    white-space: nowrap;


    width: 170px;


    height: 48px;


    padding: 0 28px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(10, 10, 10, 0.55);


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


    color: #ffffff;


    text-decoration: none;


    font-family: "Teko", sans-serif;


    font-size: 20px;


    font-weight: 600;


    letter-spacing: 1px;


    transition: 0.2s ease;


}


.discord-button:hover {
    background: rgba(88, 101, 242, 0.18);
    border-color: #5865F2;
    color: #ffffff;

    box-shadow: 0 0 18px rgba(88, 101, 242, 0.25);
}


/* =========================================


   SON GÜNCELLEME KARTI


========================================= */


/* =========================================


   SON GÜNCELLEME KARTI


========================================= */


.update-card {

    position: absolute;

    right: 70px;

    bottom: 70px;


    width: 360px;

    padding: 28px 30px;

    box-sizing: border-box;


    background: rgba(7, 9, 8, 0.88);

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

    border-left: 3px solid #55C84A;


    backdrop-filter: blur(7px);

    -webkit-backdrop-filter: blur(7px);


    z-index: 20;


    transition:

        transform 0.25s ease,

        border-color 0.25s ease,

        background 0.25s ease;

}


.update-card:hover {


    transform: translateY(-4px);


    background: rgba(7, 9, 8, 0.92);


    border-color: rgba(0, 232, 107, 0.45);


    border-left-color: #55C84A;


}


/* SON GÜNCELLEME */


.update-label {


    margin-bottom: 20px;


    font-family: "Inter", sans-serif;


    font-size: 11px;


    font-weight: 600;


    letter-spacing: 2px;


    color: #55C84A;


}


/* FIVE:CNR */


.update-version {


    margin-bottom: 4px;


    font-family: "Inter", sans-serif;


    font-size: 13px;


    font-weight: 500;


    letter-spacing: 1px;


    color: #a9a9a9;


}


/* SUNUCU GELİŞTİRME */


.update-title {


    margin-bottom: 15px;


    font-family: "Teko", sans-serif;


    font-size: 30px;


    font-weight: 600;


    line-height: 1;


    letter-spacing: 1px;


    color: #ffffff;


}


/* AÇIKLAMA */


.update-text {


    margin: 0 0 22px 0;


    font-family: "Inter", sans-serif;


    font-size: 14px;


    font-weight: 400;


    line-height: 1.65;


    color: #bdbdbd;


}


/* DEVAMINI OKU */


.update-link {


    display: inline-block;


    font-family: "Inter", sans-serif;


    font-size: 12px;


    font-weight: 600;


    letter-spacing: 1px;


    color: #ffffff;


    text-decoration: none;


    transition: 0.2s ease;


}


.update-link:hover {


    color: #55C84A;


}


/* =========================================


   SAYFA AÇILIŞ ANİMASYONU


========================================= */


@keyframes fadeDown {


    from {


        opacity: 0;


        transform: translateY(-25px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}


@keyframes fadeUp {


    from {


        opacity: 0;


        transform: translateY(20px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}


/* 1 - ÜST MENÜ */


.navbar {


    opacity: 0;


    animation: fadeDown 0.65s ease forwards;


    animation-delay: 0.10s;


}


/* 2 - FIVE:CNR */


.five-title {


    opacity: 0;


    animation: fadeUp 0.65s ease forwards;


    animation-delay: 0.35s;


}


/* 3 - LOS SANTOS COPS & ROBBERS */


.five-subtitle {


    opacity: 0;


    animation: fadeUp 0.65s ease forwards;


    animation-delay: 0.55s;


}


/* 4 - AÇIKLAMA */


.description {


    opacity: 0;


    animation: fadeUp 0.65s ease forwards;


    animation-delay: 0.75s;


}


/* 5 - OYUNCU / DISCORD */


.stats {


    opacity: 0;


    animation: fadeUp 0.65s ease forwards;


    animation-delay: 0.95s;


}


/* 6 - OYNA / DISCORD'A KATIL */


.hero-buttons {


    opacity: 0;


    animation: fadeUp 0.65s ease forwards;


    animation-delay: 1.15s;


}


/* 7 - GÜNCELLEME KARTI */


.update-card {


    opacity: 0;


    animation: updateAppear 0.75s ease forwards;


    animation-delay: 1.40s;


}


@keyframes updateAppear {

    from { opacity: 0; }

    to   { opacity: 1; }

}

/* =========================================

   FIVE:CNR - SUNUCU SİSTEMLERİ

========================================= */


.systems-section {

    width: 100%;

    padding: 90px 70px 100px;

    background: #050607;

    border-top: 1px solid rgba(255, 255, 255, 0.10);
}


.systems-header {

    max-width: 900px;

    margin: 0 auto 60px;

    text-align: center;

}


.systems-label {

    margin-bottom: 12px;


    color: #55C84A;


    font-family: 'Rajdhani', sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.systems-header h2 {

    margin: 0;


    color: #ffffff;


    font-family: 'Anton', sans-serif;

    font-size: 46px;

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: 1px;

}


.systems-header p {

    max-width: 520px;

    margin: 20px auto 0;


    color: #a7a7a7;


    font-family: 'Inter', sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.5;

    text-align: center;

}

/* =========================================

   FIVE:CNR - SİSTEM KARTLARI

========================================= */


.systems-grid {

    max-width: 1180px;

    margin: 0 auto;


    display: grid;

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

    gap: 18px;

}


/* KART */


.system-card {

    min-height: 235px;

    padding: 30px 28px;


    background: #0a0c0d;

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

    border-radius: 8px;


    transition: 0.25s ease;

}


.system-card:hover {

    transform: translateY(-4px);

    border-color: rgba(0, 232, 107, 0.35);

    background: #0d1011;

}


/* İKON */


.system-icon {

    width: 48px;

    height: 48px;


    display: flex;

    align-items: center;

    justify-content: center;


    margin-bottom: 22px;


    border-radius: 8px;

    background: rgba(0, 232, 107, 0.08);


    color: #55C84A;

    font-size: 21px;

}


/* KART BAŞLIĞI */


.system-card h3 {

    margin: 0 0 13px;


    color: #ffffff;


    font-family: 'Rajdhani', sans-serif;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 0.5px;

}


/* AÇIKLAMA */


.system-card p {

    margin: 0;


    color: #8e9295;


    font-family: 'Inter', sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;

}


/* POLİS */


.police-card .system-icon {

    color: #348cff;

    background: rgba(52, 140, 255, 0.09);

}


/* SUÇLU */


.criminal-card .system-icon {

    color: #ff4141;

    background: rgba(255, 65, 65, 0.09);

}


/* SON KARTI ORTALA */


.systems-more {

    grid-column: 1 / -1;


    max-width: 600px;

    margin: 32px auto 0;


    text-align: center;

}


.systems-more .system-icon {

    margin: 0 auto 16px;


    background: transparent;

    color: #55C84A;


    width: auto;

    height: auto;

    font-size: 24px;

}


.systems-more h3 {

    margin: 0 0 10px;


    color: #ffffff;


    font-family: 'Rajdhani', sans-serif;

    font-size: 20px;

    font-weight: 700;

}


.systems-more p {

    margin: 0 auto;

    max-width: 560px;


    color: #8e9295;


    font-family: 'Inter', sans-serif;

    font-size: 13px;

    line-height: 1.7;

}

.police-card-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;


    background: #08182c;

    border-radius: 8px;


    font-size: 23px;

    line-height: 1;


    user-select: none;

    cursor: default;

}

.police-card-icon .police-emoji {

    font-size: 25px !important;

    line-height: 1 !important;

    display: block;

    transform: translateY(3px);

}

.criminal-card-icon .criminal-emoji {

    font-size: 25px !important;

    line-height: 1 !important;

    display: block;

    transform: translateY(3px);

}

.civilian-card-icon .civilian-emoji {

    font-size: 25px !important;

    line-height: 1 !important;

    display: block;

    transform: translateY(3px);

}

.group-card-icon .group-emoji {

    font-size: 25px !important;

    line-height: 1 !important;

    display: block;

    transform: translateY(3px);

}

.group-card-icon {

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

    color: #9a9a9a;

}


.group-card-icon i {

    font-size: 18px;

}

.gang-card-icon {

    background: rgba(255, 122, 24, 0.14);

}


.gang-card-icon .gang-emoji {

    font-size: 25px !important;

    line-height: 1 !important;

    display: block;

    transform: translateY(2px);

}

.vip-card-icon {

    background: rgba(255, 193, 7, 0.14);

}


.vip-card-icon .vip-emoji {

    font-size: 25px !important;

    line-height: 1 !important;

    display: block;

    transform: translateY(2px);

}

/* =========================================

   FIVE:CNR - NASIL BAĞLANILIR

========================================= */


.connect-section {

    width: 100%;

    padding: 95px 70px 100px;

    background: #050607;

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

}


.connect-header {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}


.connect-label {

    margin-bottom: 14px;

    color: #55C84A;

    font-family: 'Rajdhani', sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.connect-header h2 {

    margin: 0;

    color: #ffffff;

    font-family: 'Rajdhani', sans-serif;

    font-size: 52px;

    font-weight: 700;

    line-height: 1.1;

}


.connect-header p {

    margin: 18px auto 0;

    color: #a7a7a7;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    line-height: 1.6;

}

/* =========================================

   FIVE:CNR - BAĞLANTI ADIMLARI

========================================= */


.connect-steps {

    max-width: 1180px;

    margin: 70px auto 0;

    display: grid;

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

    gap: 35px;

}


.connect-step {

    position: relative;

    text-align: center;

}


/* 01 - 02 - 03 - 04 */

.step-number {

    position: relative;

    z-index: 2;


    width: 52px;

    height: 52px;

    margin: 0 auto 24px;


    display: flex;

    align-items: center;

    justify-content: center;


    background: #0b1510;

    border: 1px solid rgba(0, 232, 107, 0.35);

    border-radius: 50%;


    color: #55C84A;

    font-family: 'Rajdhani', sans-serif;

    font-size: 16px;

    font-weight: 700;

}


/* ADIMLAR ARASINDAKİ ÇİZGİ */

.connect-step:not(:last-child)::after {

    content: "";

    position: absolute;


    top: 26px;

    left: calc(50% + 26px);


    width: calc(100% + 35px - 52px);

    height: 1px;


    background: rgba(0, 232, 107, 0.22);

}


/* BAŞLIKLAR */

.connect-step h3 {

    margin: 0 0 12px;


    color: #ffffff;

    font-family: 'Rajdhani', sans-serif;

    font-size: 19px;

    font-weight: 700;

}


/* AÇIKLAMALAR */

.connect-step p {

    max-width: 245px;

    margin: 0 auto;


    color: #8e9295;

    font-family: 'Inter', sans-serif;

    font-size: 13px;

    line-height: 1.7;

}

.fivem-link {

    color: #55C84A;

    text-decoration: none;

    font-weight: 600;

    transition: 0.2s ease;

}


.fivem-link:hover {

    text-decoration: underline;

}

/* LSPD / LSSD - MAVİ */

.police-card:hover {

    border-color: rgba(52, 140, 255, 0.65);

    box-shadow: 0 0 18px rgba(52, 140, 255, 0.10);

}


/* SUÇLU YAŞAMI - KIRMIZI */

.criminal-card:hover {

    border-color: rgba(255, 65, 65, 0.65);

    box-shadow: 0 0 18px rgba(255, 65, 65, 0.10);

}


/* SERBEST YAŞAM - YEŞİL */

.civilian-card:hover {

    border-color: rgba(0, 232, 107, 0.65);

    box-shadow: 0 0 18px rgba(0, 232, 107, 0.10);

}


/* GRUP SİSTEMİ - GRİ */

.group-card:hover {

    border-color: rgba(160, 160, 160, 0.55);

    box-shadow: 0 0 18px rgba(160, 160, 160, 0.08);

}


/* BİRLİĞİNİ KUR - TURUNCU */

.gang-card:hover {

    border-color: rgba(255, 122, 24, 0.70);

    box-shadow: 0 0 18px rgba(255, 122, 24, 0.10);

}


/* VIP - ALTIN / SARI */

.vip-card:hover {

    border-color: rgba(255, 193, 7, 0.75);

    box-shadow: 0 0 18px rgba(255, 193, 7, 0.12);

}

/* =========================================

   FIVE:CNR - SUNUCU ADRESİ

========================================= */


.server-address {

    max-width: 600px;

    margin: 65px auto 0;

    padding: 16px 18px;


    display: flex;

    align-items: center;

    justify-content: space-between;


    background: #0a0c0d;

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

    border-radius: 8px;

}


.server-address-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.server-address-label {

    color: #777;

    font-family: 'Rajdhani', sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.server-address-value {

    color: #ffffff;

    font-family: 'Rajdhani', sans-serif;

    font-size: 18px;

    font-weight: 700;

}


.copy-address-btn {

    height: 40px;

    padding: 0 17px;


    display: flex;

    align-items: center;

    gap: 8px;


    border: 1px solid rgba(0, 232, 107, 0.25);

    border-radius: 6px;

    background: rgba(0, 232, 107, 0.08);


    color: #55C84A;

    font-family: 'Rajdhani', sans-serif;

    font-size: 12px;

    font-weight: 700;


    cursor: pointer;

    transition: 0.2s ease;

}


.copy-address-btn:hover {

    background: #55C84A;

    border-color: #55C84A;

    color: #050607;

}

/* =========================================
   FIVE:CNR - FOOTER
========================================= */

.footer-line {
    width: 100%;
    height: 1px;
    margin-top: 90px;
    background: rgba(255, 255, 255, 0.10);
}

.site-footer {
    width: 100%;
    padding: 42px 70px 28px;
    background: #050607;
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 18px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8b8b;
    font-size: 19px;
    text-decoration: none;
    transition: 0.2s ease;
}

.footer-socials a:hover {
    color: #55C84A;
    transform: translateY(-2px);
}

.footer-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
}

.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    color: #777777;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
}

.developed-by {
    margin-top: 6px !important;
    font-size: 10px !important;
}

.developed-by span {
    color: #55C84A;
    font-weight: 600;
}

.footer-links {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links a,
.footer-links span {
    color: #777777;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    text-decoration: none;
    transition: 0.2s ease;
}

.footer-links a:hover {
    color: #55C84A;
}
/* ========================================
   GİZLİLİK POLİTİKASI POPUP
======================================== */

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;

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

    padding: 30px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.legal-modal-box {
    position: relative;

    width: 100%;
    max-width: 780px;
    max-height: 82vh;

    padding: 38px 42px;

    background: #090b0a;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 2px solid #55C84A;

    border-radius: 8px;

    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}

.legal-modal-label {
    margin-bottom: 8px;

    color: #55C84A;

    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.legal-modal-box h2 {
    margin: 0 0 28px;

    color: #ffffff;

    font-family: 'Rajdhani', sans-serif;
    font-size: 34px;
    font-weight: 700;
}

.legal-modal-content {
    max-height: 55vh;
    overflow-y: auto;

    padding-right: 18px;
}

.legal-modal-content h3 {
    margin: 25px 0 8px;

    color: #ffffff;

    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.legal-modal-content h3:first-child {
    margin-top: 0;
}

.legal-modal-content p {
    margin: 0;

    color: #9b9f9d;

    font-family: 'Inter', sans-serif;
    font-size: 13px;

    line-height: 1.8;
}

/* KAPATMA BUTONU */

.legal-modal-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 38px;
    height: 38px;

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

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;

    background: rgba(255, 255, 255, 0.04);
    color: #8f9391;

    font-size: 16px;

    cursor: pointer;

    transition: 0.2s ease;
}

.legal-modal-close:hover {
    color: #ffffff;

    border-color: rgba(0, 232, 107, 0.45);
    background: rgba(0, 232, 107, 0.10);
}

/* SCROLLBAR */

.legal-modal-content::-webkit-scrollbar {
    width: 5px;
}

.legal-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.legal-modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 232, 107, 0.45);
    border-radius: 10px;
}
/* ========================================
   MOBİL UYUMLULUK - NAVBAR
======================================== */

@media (max-width: 768px) {

    .navbar {
        height: 64px;
        padding: 0 20px;
    }

    .navbar-logo img {
        max-width: 120px;
        height: auto;
    }

    .navbar-links {
        gap: 16px;
    }

    .navbar-links a {
        font-size: 12px;
    }
}

/* === hud-theme.css === */
/* FIVE:CNR | five_ayarlar HUD inspired visual system */
:root{--hud-green:#55C84A;--hud-panel:#080b0c;--hud-border:rgba(255,255,255,.10);--hud-muted:#9da6a2}
body{background:#070909!important;color:#f3f5f3;font-family:Arial,Helvetica,sans-serif!important}
.navbar{height:76px!important;background:rgba(3,5,6,.95)!important;border-bottom:1px solid var(--hud-border);backdrop-filter:blur(12px);padding-left:clamp(20px,5vw,70px)!important;padding-right:clamp(20px,5vw,70px)!important}
.top-logo{display:inline-flex;align-items:center;min-width:max-content}
.brand-wordmark{font-family:Arial,Helvetica,sans-serif;font-size:23px;font-weight:900;letter-spacing:-1.2px;color:#fff;line-height:1}
.brand-colon,.brand-cnr{color:var(--hud-green)}
.brand-cnr{letter-spacing:-.7px}
.nav-menu a{font-family:Arial,Helvetica,sans-serif!important;font-size:11px!important;font-weight:900!important;letter-spacing:1.1px!important}
.nav-menu a:hover{color:var(--hud-green)!important}.nav-menu a::after{background:var(--hud-green)!important}
.hero::before{background-image:linear-gradient(90deg,rgba(3,5,6,.94) 0%,rgba(3,5,6,.72) 47%,rgba(3,5,6,.60) 100%),url('../../image/banner.jpg')!important;animation:none!important;transform:none!important}
.hero::after{content:'';pointer-events:none;position:absolute;inset:76px 0 0;background:linear-gradient(0deg,#070909 0%,transparent 32%);z-index:0}
.hero-content,.update-card{z-index:2!important}
.five-title{font-family:Arial,Helvetica,sans-serif!important;font-weight:900!important;letter-spacing:-2px!important;text-shadow:none!important}
.five-subtitle{font-family:Arial,Helvetica,sans-serif!important;letter-spacing:2px!important;font-weight:800!important;color:var(--hud-green)!important}
.description p{font-family:Arial,Helvetica,sans-serif!important;line-height:1.8!important}
.description span{color:var(--hud-green)!important}
.stat-box,.update-card,.system-card,.systems-grid>*,.faq-item,.wiki-card{background:rgba(8,11,12,.95)!important;border:1px solid var(--hud-border)!important;border-radius:7px!important;box-shadow:0 14px 40px rgba(0,0,0,.17)!important}
.update-card{border-left:3px solid var(--hud-green)!important}
.update-label,.systems-label{color:var(--hud-green)!important;font-family:Arial,Helvetica,sans-serif!important;font-weight:900!important;letter-spacing:1.4px!important}
.play-button,.update-link,.discord-button{border-radius:5px!important;font-family:Arial,Helvetica,sans-serif!important;font-weight:900!important;letter-spacing:.5px!important}
.play-button{background:var(--hud-green)!important;color:#071107!important;border:1px solid var(--hud-green)!important}
.discord-button{background:#ffffff0b!important;border:1px solid #ffffff28!important;color:#fff!important}
.update-link{color:var(--hud-green)!important}
.systems-section{background:#070909!important}
.systems-header h2,.update-title{font-family:Arial,Helvetica,sans-serif!important;font-weight:900!important}
button,input,a{transition:background-color .2s,color .2s,border-color .2s!important}
:focus-visible{outline:2px solid var(--hud-green);outline-offset:3px}
@media(max-width:700px){.navbar{height:auto!important;min-height:70px;gap:16px;flex-wrap:wrap;padding-top:14px!important;padding-bottom:14px!important}.nav-menu{gap:15px!important;flex-wrap:wrap}.nav-menu a{font-size:10px!important}.brand-wordmark{font-size:21px}.hero{min-height:740px;height:auto!important}.hero-content{padding-top:125px!important}.five-title{font-size:clamp(44px,11vw,75px)!important}}

/* FIVE:CNR V2 | Clean HUD visual overhaul */
:root{--hud-green:#55C84A;--hud-muted:#A6ADA8}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif!important}
.navbar{height:76px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-inline:clamp(24px,4vw,76px)!important}
.nav-menu{display:flex!important;align-items:center!important;gap:clamp(17px,2.3vw,38px)!important}
.nav-menu a{font-size:12px!important;letter-spacing:.65px!important;white-space:nowrap}
.hero{height:auto!important;min-height:790px!important;display:flex!important;flex-direction:column!important;overflow:hidden}
.hero::before{background-image:linear-gradient(90deg,rgba(3,7,6,.92) 0%,rgba(3,7,6,.72) 43%,rgba(3,7,6,.37) 100%),url('../../image/banner.jpg')!important;background-position:center center!important}
.hero::after{inset:76px 0 0!important;background:linear-gradient(0deg,#070909 0%,transparent 25%)!important}
.hero-content{width:min(760px,calc(100% - 60px))!important;margin:0 0 0 clamp(24px,5vw,90px)!important;padding:clamp(105px,12vh,160px) 0 185px!important;z-index:3!important}
.hero-title{margin:0!important;transform:none!important}
.hero-eyebrow{display:flex;align-items:center;gap:10px;color:var(--hud-green);font-size:12px;font-weight:800;letter-spacing:2px;margin-bottom:24px}
.hero-eyebrow .status-dot{flex-shrink:0}
.five-title{font-family:Inter,Arial,sans-serif!important;font-size:clamp(38px,4.5vw,76px)!important;line-height:1.08!important;letter-spacing:-2.8px!important;font-weight:900!important;margin:0!important;max-width:850px}
.five-title span{color:var(--hud-green)}
.five-subtitle{font-family:Inter,Arial,sans-serif!important;font-size:clamp(13px,1.3vw,17px)!important;line-height:1.5!important;letter-spacing:2px!important;margin:24px 0 0!important;color:#d9e1db!important;font-weight:700!important}
.description{margin:18px 0 0!important;max-width:550px!important}
.description p{font-family:Inter,Arial,sans-serif!important;font-size:15px!important;line-height:1.7!important;color:#b7c0ba!important;margin:0 0 3px!important}
.stats{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:26px 0 0!important}
.stat-box{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;min-height:44px!important;box-sizing:border-box!important;background:#0c1310e8!important;border:1px solid #344038!important;border-radius:5px!important;box-shadow:none!important;font-size:12px!important;white-space:nowrap}
.stat-box strong{font-size:13px!important}
.hero-buttons{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;margin:24px 0 0!important}
.hero-buttons .play-button,.hero-buttons .discord-button{width:190px!important;min-width:0!important;height:50px!important;padding:0 16px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;white-space:nowrap!important;font-size:13px!important;line-height:1!important;text-decoration:none!important;transform:none!important}
.hero-buttons .discord-button:hover{border-color:var(--hud-green)!important;background:#18241b!important}
.hero-buttons .play-button:hover{background:#55C84A!important}
.update-card{right:clamp(24px,4vw,75px)!important;bottom:50px!important;width:min(365px,calc(100% - 48px))!important;padding:24px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0b100ef5!important;border-radius:5px!important;box-shadow:0 12px 36px #0007!important}
.update-title{font-size:22px!important;line-height:1.14!important;letter-spacing:-.6px!important}
.update-text{font-size:13px!important;line-height:1.7!important;color:#aeb7b1!important}
.systems-section,.connect-section{padding-left:clamp(20px,4vw,70px)!important;padding-right:clamp(20px,4vw,70px)!important}
.system-card,.systems-more{transition:transform .2s,border-color .2s!important;backdrop-filter:none!important}
.system-card:hover,.systems-more:hover{transform:translateY(-3px)!important;border-color:#55c84a75!important}
@media(max-width:1100px){.hero-content{padding-bottom:300px!important}.update-card{bottom:34px!important;left:clamp(24px,5vw,90px)!important;right:auto!important}}
@media(max-width:700px){.navbar{min-height:74px!important;height:auto!important;gap:14px!important;padding:16px 22px!important;flex-wrap:wrap!important}.nav-menu{gap:16px!important;flex-wrap:wrap!important}.nav-menu a{font-size:11px!important}.hero{min-height:0!important}.hero-content{width:calc(100% - 44px)!important;margin:0 22px!important;padding:80px 0 325px!important}.five-title{font-size:clamp(34px,8vw,56px)!important;letter-spacing:-1.7px!important}.five-subtitle{font-size:12px!important;letter-spacing:1px!important}.description p{font-size:13px!important}.hero-buttons .play-button,.hero-buttons .discord-button{width:calc(50% - 6px)!important;min-width:145px!important;font-size:11px!important;padding:0 8px!important}.update-card{left:22px!important;right:22px!important;bottom:28px!important;width:calc(100% - 44px)!important;padding:20px!important}}
@media(max-width:380px){.hero-buttons .play-button,.hero-buttons .discord-button{width:100%!important}.hero-content{padding-bottom:350px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* V4: Sunucu henüz açılmadı; üçlü eylem alanı */
.construction-status .amber{background:#e6ae43!important;box-shadow:0 0 9px #e6ae4366!important}
.construction-status strong{color:#e6ae43!important;letter-spacing:.5px}
.hero-buttons .play-button,.hero-buttons .discord-button{width:190px!important}
@media(max-width:700px){.hero-buttons .play-button,.hero-buttons .discord-button{width:calc(50% - 6px)!important;min-width:0!important}}
@media(max-width:430px){.hero-buttons .play-button,.hero-buttons .discord-button{width:100%!important}}

/* V6: tek ana eylem ve sade hero */
.hero-content{padding-bottom:clamp(110px,14vh,190px)!important}
.hero-buttons .play-button{width:auto!important;min-width:190px!important}
@media(max-width:700px){.hero-content{padding-bottom:110px!important}.hero-buttons .play-button{width:auto!important;min-width:190px!important}}


/* === cinematic-v7.css === */
/* FIVE:CNR / V7 Cinematic – overrides, no changes to original assets */
:root{--v7-green:#55C84A}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif!important}
.hero{min-height:820px!important;isolation:isolate}
.hero::before{background-image:linear-gradient(90deg,rgba(3,6,5,.92) 0%,rgba(3,6,5,.64) 39%,rgba(3,6,5,.14) 100%),url('../../image/banner.jpg')!important;animation:v7Cinema 24s ease-in-out infinite alternate!important;transform-origin:center!important;will-change:transform}
.hero::after{background:linear-gradient(0deg,#070909 0%,rgba(7,9,9,.1) 43%,transparent 78%)!important}
@keyframes v7Cinema{from{transform:scale(1.02)}to{transform:scale(1.095)}}
.hero-content{width:min(920px,calc(100% - 70px))!important;padding-top:clamp(110px,14vh,170px)!important;padding-bottom:155px!important}
.hero-kicker{font:800 12px Inter,Arial,sans-serif;letter-spacing:2.3px;color:#55C84A;margin-bottom:22px}.hero-kicker span{color:#84958a;padding:0 10px}
.five-title{font-family:Inter,Arial,sans-serif!important;font-size:clamp(52px,5.5vw,92px)!important;line-height:1.04!important;letter-spacing:-.065em!important;font-weight:900!important;max-width:950px!important}
.five-title span{color:#55C84A!important}.five-subtitle{font-family:Inter,Arial,sans-serif!important;letter-spacing:1.5px!important;margin-top:24px!important}
.description{margin-top:18px!important}.description p{font-family:Inter,Arial,sans-serif!important;line-height:1.65!important}
.hero-buttons .play-button{width:252px!important;min-height:54px!important;justify-content:space-between!important;padding:0 20px!important;border-radius:4px!important;font-weight:900!important;letter-spacing:.4px!important;box-shadow:none!important}
.cta-arrow{font-size:22px;transition:transform .2s ease}.play-button:hover .cta-arrow{transform:translate(3px,-3px)}
.roles-showcase{background:#070909;padding:100px clamp(22px,5vw,84px) 110px;border-top:1px solid #18221b}
.v7-section-head{max-width:1150px;margin:0 auto 38px}.v7-overline{color:#55C84A;font:800 12px Inter,Arial,sans-serif;letter-spacing:2px}.v7-section-head h2{color:white;font:900 clamp(34px,4vw,58px)/1.1 Inter,Arial,sans-serif;letter-spacing:-2px;margin:18px 0}.v7-section-head h2 em{font-style:normal;color:#55C84A}.v7-section-head p{color:#aab3ad;line-height:1.65}
.role-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.role-panel{min-height:420px;display:flex;align-items:end;position:relative;overflow:hidden;border:1px solid #2c382f;background:#101713;border-radius:6px;transition:transform .25s,border-color .25s}
.role-panel::before{content:'';position:absolute;inset:0;background-image:linear-gradient(0deg,#050807 3%,#05080744 85%),url('../../image/banner.jpg');background-size:cover;background-position:35% center;filter:grayscale(.65);transition:transform .4s}
.role-crime::before{background-position:75% center;filter:grayscale(.6) sepia(.15)}
.role-law::after,.role-crime::after{content:'✦';position:absolute;right:35px;top:25px;color:#55C84A;font-size:28px;opacity:.6}
.role-crime::after{content:'◆'}
.role-panel:hover{transform:translateY(-5px);border-color:#55C84A}.role-panel:hover::before{transform:scale(1.06)}
.role-panel-content{position:relative;z-index:1;padding:34px}.role-num{color:#55C84A;font-size:11px;font-weight:900;letter-spacing:2px}.role-panel h3{font:900 clamp(38px,4vw,64px)/1 Inter,Arial,sans-serif;letter-spacing:-2px;color:white;margin:14px 0}.role-panel p{max-width:370px;color:#d1d8d2;font-size:14px;line-height:1.65}.role-panel a{display:inline-flex;gap:20px;margin-top:17px;color:#55C84A;font-size:12px;font-weight:900;text-decoration:none;letter-spacing:.6px}
.systems-section{padding-top:110px!important}.systems-grid{gap:20px!important}.system-card{overflow:hidden!important}.system-card-banner{height:112px;margin:-1px -1px 24px;background:linear-gradient(120deg,#14271a,#0a0f0c 75%);border-bottom:1px solid #293b2d;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#55C84A}.system-card-banner span{font-size:11px;letter-spacing:2px;font-weight:900}.system-card-banner i{font-size:50px;opacity:.4}.criminal-card .system-card-banner{background:linear-gradient(120deg,#262015,#0a0f0c 75%)}.civilian-card .system-card-banner{background:linear-gradient(120deg,#142027,#0a0f0c 75%)}
@media(max-width:850px){.role-grid{grid-template-columns:1fr}.role-panel{min-height:340px}.hero-content{padding-top:100px!important}.hero{min-height:700px!important}.five-title{font-size:clamp(42px,8vw,65px)!important}}
@media(max-width:600px){.roles-showcase{padding:70px 20px}.hero-content{width:calc(100% - 40px)!important;margin:0 20px!important;padding-bottom:100px!important}.five-title{font-size:clamp(35px,9vw,54px)!important;letter-spacing:-2px!important}.hero-kicker{font-size:10px}.role-panel-content{padding:24px}.v7-section-head h2{letter-spacing:-1px}.hero-buttons .play-button{width:230px!important}.system-card-banner{height:80px}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none!important}.role-panel,.role-panel::before,.cta-arrow{transition:none!important}html{scroll-behavior:auto}}

/* V8 Discord CTA */
.hero-buttons .play-button{width:280px!important;min-height:58px!important;display:inline-flex!important;align-items:center!important;gap:16px!important;padding:0 9px 0 22px!important;background:#55C84A!important;color:#081109!important;border:1px solid #55C84A!important;transition:background .2s ease,transform .2s ease,border-color .2s ease!important;text-decoration:none!important}
.hero-buttons .play-button:hover{background:#55C84A!important;border-color:#55C84A!important;transform:translateY(-2px)!important}
.discord-cta-text{font-size:12px;font-weight:900;letter-spacing:.5px;white-space:nowrap}
.discord-cta-icon{width:42px;height:40px;display:grid;place-items:center;border-radius:3px;background:#111c13;color:#fff;font-size:22px;transition:background .2s ease,transform .2s ease}
.play-button:hover .discord-cta-icon{background:#182d1d;transform:scale(1.04)}
.hero-buttons .play-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:600px){.hero-buttons .play-button{width:280px!important;max-width:100%!important}}
@media(prefers-reduced-motion:reduce){.hero-buttons .play-button,.discord-cta-icon{transition:none!important}}


/* === cinematic-v9.css === */
/* FIVE:CNR cinematic V9 — original HTML/CSS assets preserved */
:root{--cnr-green:#55C84A}
.hero{min-height:760px!important;overflow:hidden}
.hero::before{background-image:linear-gradient(90deg,rgba(3,7,5,.88) 0%,rgba(3,7,5,.52) 42%,rgba(3,7,5,.07) 100%),url('../../image/banner.jpg')!important;animation:v9Cinema 26s ease-in-out infinite alternate!important}
@keyframes v9Cinema{from{transform:scale(1.01)}to{transform:scale(1.065)}}
.hero-content{padding-top:clamp(115px,15vh,165px)!important;padding-bottom:145px!important;max-width:1000px!important}
.five-title{font-family:Inter,Arial,sans-serif!important;font-size:clamp(53px,5.7vw,96px)!important;line-height:1.01!important;font-weight:900!important;letter-spacing:-.065em!important;max-width:990px!important;text-shadow:0 5px 22px rgba(0,0,0,.18)}
.five-title span{color:var(--cnr-green)!important}
.five-subtitle{margin-top:28px!important;letter-spacing:1.1px!important}
.description{position:relative;padding-top:12px!important}
.description:before{content:'';display:block;width:50px;height:2px;background:var(--cnr-green);margin-bottom:17px}
.hero-buttons{margin-top:25px!important}
.hero-buttons .play-button{position:relative;overflow:hidden;box-sizing:border-box;width:340px!important;max-width:100%!important;min-height:68px!important;padding:0 18px!important;display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;border:1px solid #55C84A!important;border-radius:8px!important;background:linear-gradient(105deg,#101b13,#07110a)!important;color:#fff!important;box-shadow:0 0 0 1px #55c84a33,inset 0 0 18px #55c84a18,0 0 22px #55c84a28!important;transition:transform .25s ease,box-shadow .25s ease,background .25s ease!important}
.hero-buttons .play-button:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,rgba(107,255,103,.16) 50%,transparent 75%);transform:translateX(-125%);transition:transform .65s ease}
.hero-buttons .play-button:hover:before{transform:translateX(125%)}
.hero-buttons .play-button:hover{transform:translateY(-3px)!important;box-shadow:0 0 0 1px #55c84a88,inset 0 0 25px #55c84a25,0 0 32px #55c84a60!important}
.discord-cta-icon{flex:none;order:0;width:48px;height:45px;display:grid;place-items:center;background:transparent!important;border-right:1px solid #55c84a66;border-radius:0!important;color:#fff!important;font-size:27px!important;padding-right:14px;transition:transform .25s ease!important}
.discord-cta-text{order:1;flex:1;font-size:13px!important;letter-spacing:.4px!important;text-align:center;white-space:nowrap;color:#fff!important}
.discord-cta-arrow{order:2;color:#55C84A;font-size:27px;line-height:1;transition:transform .25s ease}
.play-button:hover .discord-cta-arrow{transform:translateX(5px)}
.play-button:hover .discord-cta-icon{transform:scale(1.08)}
.play-button:focus-visible{outline:2px solid white!important;outline-offset:5px!important}
.roles-showcase{padding-top:80px!important}
.role-panel{min-height:350px!important}
@media(max-width:700px){.hero{min-height:690px!important}.hero-content{padding-top:120px!important;padding-bottom:95px!important}.five-title{font-size:clamp(42px,9.5vw,67px)!important}.hero-buttons .play-button{width:320px!important;min-height:64px!important}.roles-showcase{padding-top:60px!important}}
@media(max-width:390px){.five-title{font-size:39px!important}.hero-buttons .play-button{width:100%!important}.discord-cta-text{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none!important}.hero-buttons .play-button,.hero-buttons .play-button:before,.discord-cta-arrow,.discord-cta-icon{transition:none!important}}

/* V10: Subtle Discord hover, no neon flash */
.hero-buttons .play-button,.hero-buttons .play-button:hover{background:linear-gradient(110deg,#101b13,#0a150d)!important;border-color:#55C84A!important;box-shadow:0 2px 12px rgba(0,0,0,.2)!important;text-shadow:none!important;filter:none!important;}
.hero-buttons .play-button:hover{transform:translateY(-2px)!important;border-color:#55C84A!important;box-shadow:0 5px 18px rgba(0,0,0,.3),0 0 0 1px rgba(85,200,74,.12)!important;}
.hero-buttons .play-button:before,.hero-buttons .play-button:after{display:none!important;animation:none!important;}
.play-button:hover .discord-cta-icon{transform:none!important;}
.play-button:hover .discord-cta-arrow{transform:translateX(3px)!important;}
.systems-section{padding-top:65px!important;}


/* === footer-v13.css === */
/* FIVE:CNR V12 - minimal premium footer */
.cnr-footer{background:linear-gradient(115deg,#080c09 0%,#0b120e 52%,#101d14 100%);border-top:1px solid #25382a;padding:70px 28px 28px;color:#fff}
.cnr-footer *{box-sizing:border-box}
.cnr-footer-inner{max-width:1160px;margin:0 auto}
.cnr-footer-top{display:grid;grid-template-columns:minmax(250px,2.1fr) repeat(3,minmax(125px,1fr));gap:48px;align-items:start}
.cnr-footer-logo{display:inline-block;color:#fff;text-decoration:none;font-family:Inter,sans-serif;font-size:29px;font-weight:900;letter-spacing:-1.7px;line-height:1.1}
.cnr-footer-logo span{color:#55C84A}
.cnr-footer-brand strong{display:block;margin-top:15px;color:#d8e2da;font:700 12px Inter,sans-serif;letter-spacing:1.8px}
.cnr-footer-brand p{margin:11px 0 0;max-width:260px;color:#99a99d;font:400 13px/1.7 Inter,sans-serif}
.cnr-footer-group{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.cnr-footer-group h3{margin:2px 0 9px;color:#55C84A;font:800 11px Inter,sans-serif;letter-spacing:1.4px}
.cnr-footer-group>a{color:#c7d0c9;text-decoration:none;font:500 13px Inter,sans-serif;transition:color .2s ease,transform .2s ease}
.cnr-footer-group>a:hover{color:#55C84A;transform:translateX(3px)}
.cnr-footer-muted{font:400 12px Inter,sans-serif;color:#69796d}
.cnr-footer-group .cnr-footer-discord{display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #344a39;border-radius:7px;background:#132018;color:#eaf5eb}
.cnr-footer-discord i{font-size:18px}
.cnr-footer-divider{height:1px;background:#28362c;margin:55px 0 24px}
.cnr-footer-legal{display:flex;align-items:center;justify-content:center;gap:16px}
.cnr-footer-legal a,.cnr-footer-legal span{font:500 12px Inter,sans-serif;color:#a7b5aa;text-decoration:none}
.cnr-footer-legal a:hover{color:#55C84A}
.cnr-footer-copy,.cnr-footer-credit{text-align:center;margin:24px 0 0;color:#829187;font:400 12px Inter,sans-serif}
.cnr-footer-credit{margin-top:8px;font-size:11px}.cnr-footer-credit span{color:#55C84A}
@media(max-width:850px){.cnr-footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px}.cnr-footer{padding-top:52px}}
@media(max-width:480px){.cnr-footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}.cnr-footer-brand{grid-column:1/-1}.cnr-footer-logo{font-size:26px}.cnr-footer{padding:45px 20px 26px}.cnr-footer-group h3{font-size:10px}.cnr-footer-group>a{font-size:12px}.cnr-footer-divider{margin-top:38px}}
@media(prefers-reduced-motion:reduce){.cnr-footer-group>a{transition:none}}

/* V13 social icons and brand alignment */
.cnr-footer-logo{font-family:Inter,sans-serif;font-size:29px;font-weight:900;letter-spacing:-1.7px}
.cnr-footer-brand p{margin-top:14px}
.cnr-social-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cnr-footer-group .cnr-social-icons a{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border:1px solid #344a39;border-radius:9px;background:#101b14;color:#f0f7f1;text-decoration:none;font-size:20px;transition:background .2s,border-color .2s,transform .2s}
.cnr-footer-group .cnr-social-icons a:hover{background:#18291d;border-color:#55C84A;color:#55C84A;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.cnr-footer-group .cnr-social-icons a{transition:none}}


/* === footer-palms-v19.css === */
/* FIVE:CNR V19 — detailed Los Santos skyline and natural palms */
.cnr-footer{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(112deg,#070c09 0%,#0b130e 53%,#0c1810 100%)}
.cnr-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(4,9,6,.42) 0%,rgba(4,9,6,.24) 48%,rgba(4,9,6,.49) 100%),url("../../footer-palms-v19.svg") center bottom/100% auto no-repeat;opacity:.9}
.cnr-footer::after{content:"";position:absolute;inset:auto 0 0;height:70%;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(2,7,4,.44),transparent 90%)}
.cnr-footer-inner{position:relative;z-index:1}
@media(max-width:850px){.cnr-footer::before{background-size:auto 360px;background-position:center bottom;opacity:.7}}
@media(max-width:480px){.cnr-footer::before{background-size:auto 290px;opacity:.52}}


/* === footer-v20.css === */
/* V20: Los Santos footer refinement */
.cnr-footer{background:linear-gradient(115deg,#050b07,#0a160e 55%,#07100a)!important}
.cnr-footer::before{background:linear-gradient(180deg,rgba(3,9,5,.23),rgba(3,9,5,.15) 48%,rgba(2,7,4,.44)),url("../../footer-palms-v20.svg") center bottom/100% auto no-repeat!important;opacity:1!important}
.cnr-footer::after{height:77%!important;background:linear-gradient(0deg,rgba(1,6,3,.72),rgba(2,8,4,0) 95%)!important}
.cnr-footer-inner{position:relative;z-index:2}
.roles-showcase{padding-bottom:62px!important;margin-bottom:0!important}
@media(max-width:850px){.cnr-footer::before{background-size:auto 360px!important;background-position:center bottom!important}.roles-showcase{padding-bottom:45px!important}}
@media(max-width:480px){.cnr-footer::before{background-size:auto 290px!important;opacity:.75!important}}


/* === enhancements-v14.css === */
/* FIVE:CNR V14 - restrained interactive enhancements */
.role-panel::before{filter:none!important;transition:transform .35s ease,filter .35s ease!important}
.role-law::before{background-image:linear-gradient(0deg,rgba(3,8,12,.97) 0%,rgba(3,13,24,.34) 85%),linear-gradient(115deg,rgba(16,65,115,.35),transparent 70%),url('../../image/banner.jpg')!important;background-position:28% center!important}
.role-crime::before{background-image:linear-gradient(0deg,rgba(12,6,4,.97) 0%,rgba(28,12,8,.38) 85%),linear-gradient(115deg,rgba(126,51,12,.35),transparent 70%),url('../../image/banner.jpg')!important;background-position:78% center!important}
.role-panel::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#55C84A;transition:width .3s ease;pointer-events:none}
.role-panel:hover::before{transform:scale(1.03)!important}
.role-panel:hover::after,.role-panel:focus-within::after{width:100%}
.role-panel a span{display:inline-block;transition:transform .25s ease}.role-panel a:hover span{transform:translate(4px,-3px)}
.role-panel:focus-within{outline:2px solid #55C84A;outline-offset:3px}
.cnr-social-icons a{position:relative;transition:background .2s ease,border-color .2s ease,transform .2s ease!important}
.cnr-social-icons a:hover{transform:translateY(-2px);border-color:#55C84A!important;background:#15271a!important}
.cnr-social-icons a::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,4px);opacity:0;pointer-events:none;background:#101812;color:#fff;border:1px solid #334739;border-radius:4px;padding:5px 9px;font:600 11px Inter,Arial,sans-serif;white-space:nowrap;transition:opacity .2s,transform .2s}
.cnr-social-icons a:hover::after,.cnr-social-icons a:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.cnr-back-top{position:fixed;right:24px;bottom:24px;z-index:99;width:43px;height:43px;display:grid;place-items:center;border-radius:6px;border:1px solid #34553a;background:#0e1811;color:#55C84A;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .2s,transform .2s,visibility .2s,border-color .2s}
.cnr-back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.cnr-back-top:hover{border-color:#55C84A;background:#142219}.cnr-back-top:focus-visible{outline:2px solid #55C84A;outline-offset:3px}
@media(max-width:760px){.cnr-back-top{right:15px;bottom:18px;width:42px;height:42px}.cnr-footer-top{gap:28px!important}.role-panel{min-height:340px}}
@media(prefers-reduced-motion:reduce){.role-panel::before,.role-panel::after,.role-panel a span,.cnr-social-icons a,.cnr-back-top{transition:none!important}}

/* Mobile navigation: horizontal scrolling prevents clipped links without replacing existing links */
@media(max-width:800px){header nav, .navbar nav, .nav-links{max-width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#34553a transparent}header{max-width:100%}}


/* === effects-v15.css === */
/* FIVE:CNR V15 - lightweight cinematic polish */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:cnrOut .16s ease-in both}
::view-transition-new(root){animation:cnrIn .24s ease-out both}
@keyframes cnrOut{to{opacity:0}}
@keyframes cnrIn{from{opacity:0}to{opacity:1}}
/* Keep the original background and its dark overlay; use a restrained slow camera drift. */
.hero::before{animation:cnrCamera 38s ease-in-out infinite alternate!important;will-change:transform}
@keyframes cnrCamera{from{transform:scale(1.035) translate3d(0,0,0)}to{transform:scale(1.085) translate3d(-.7%,.35%,0)}}
.hero::after{pointer-events:none}
.cnr-toast-region{position:fixed;z-index:99999;right:22px;bottom:24px;display:flex;flex-direction:column;gap:9px;max-width:min(360px,calc(100vw - 32px));pointer-events:none}
.cnr-toast{--cnr-tone:#55C84A;pointer-events:auto;display:flex;align-items:flex-start;gap:11px;background:#0b110e;color:#eaf2ec;border:1px solid #2d4033;border-left:3px solid var(--cnr-tone);border-radius:6px;padding:12px 13px;box-shadow:0 8px 25px rgba(0,0,0,.28);font-family:Inter,Arial,sans-serif;animation:cnrToastIn .2s ease-out both}
.cnr-toast[data-type=error]{--cnr-tone:#ff4d4d}.cnr-toast[data-type=info]{--cnr-tone:#9daeb0}
.cnr-toast__mark{color:var(--cnr-tone);font-weight:900;font-size:15px}.cnr-toast__content{flex:1;min-width:0}.cnr-toast__title{font-size:12px;font-weight:800;letter-spacing:.04em}.cnr-toast__message{font-size:12px;color:#b7c4bb;line-height:1.5;margin-top:3px}.cnr-toast__close{color:#9cac9e;background:none;border:0;cursor:pointer;font-size:19px;line-height:1;padding:0 2px}.cnr-toast__close:hover{color:#fff}
.cnr-toast.is-leaving{animation:cnrToastOut .16s ease-in both}
@keyframes cnrToastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cnrToastOut{to{opacity:0;transform:translateY(6px)}}
@media(max-width:600px){.cnr-toast-region{left:16px;right:16px;bottom:16px;max-width:none}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}.hero::before{animation:none!important;will-change:auto}.cnr-toast,.cnr-toast.is-leaving{animation:none!important}}

/* V17: premium green HUD notification system */
.cnr-toast-region{right:24px;bottom:25px;max-width:min(390px,calc(100vw - 32px));gap:10px}
.cnr-toast{--cnr-tone:#55C84A;position:relative;overflow:hidden;align-items:center;gap:12px;min-width:min(320px,calc(100vw - 32px));padding:15px 16px;background:linear-gradient(115deg,rgba(19,40,25,.97),rgba(8,18,12,.98));border:1px solid rgba(85,200,74,.48);border-left:3px solid #55C84A;border-radius:7px;box-shadow:0 12px 36px rgba(0,0,0,.46),inset 0 1px rgba(150,255,160,.06);backdrop-filter:blur(8px)}
.cnr-toast[data-type=info],.cnr-toast[data-type=success]{--cnr-tone:#55C84A}
.cnr-toast[data-type=error]{--cnr-tone:#ff4d4d;border-color:rgba(255,77,77,.42);border-left-color:#ff4d4d;background:linear-gradient(115deg,rgba(43,17,19,.98),rgba(15,12,13,.98))}
.cnr-toast__mark{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:6px;border:1px solid rgba(85,200,74,.35);background:rgba(85,200,74,.12);color:#55C84A;font-size:17px;font-weight:800}
.cnr-toast[data-type=error] .cnr-toast__mark{border-color:rgba(255,77,77,.35);background:rgba(255,77,77,.12);color:#ff4d4d}
.cnr-toast__title{color:#55C84A;font-size:11px;font-weight:900;letter-spacing:.12em}
.cnr-toast[data-type=error] .cnr-toast__title{color:#ff4d4d}
.cnr-toast__message{color:#d3e2d6;font-size:12px;line-height:1.55;margin-top:5px}
.cnr-toast__close{align-self:flex-start;color:#96ae9c;font-size:19px;transition:color .2s}
.cnr-toast__close:hover{color:#55C84A}
.cnr-toast::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--cnr-tone);transform-origin:left;animation:cnrToastTimer var(--cnr-toast-duration,4000ms) linear forwards;opacity:.7}
@keyframes cnrToastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:600px){.cnr-toast-region{left:16px;right:16px;bottom:16px;max-width:none}.cnr-toast{min-width:0}}
@media(prefers-reduced-motion:reduce){.cnr-toast::after{animation:none!important}}


/* === effects-v16.css === */
/* FIVE:CNR V16 - restrained hero intro, responsive typography, scroll cue, optional audio */
.hero-content .hero-title{animation:cnrHeroReveal .8s cubic-bezier(.2,.7,.2,1) both}
.hero-content .description,.hero-content .hero-buttons{animation:cnrHeroReveal .75s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes cnrHeroReveal{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}
/* Responsive headline: preserve original desktop hierarchy and manual line breaks. */
.hero .five-title{font-size:clamp(2.85rem,5.15vw,6.7rem);line-height:1.01;letter-spacing:-.045em;max-width:100%;overflow-wrap:normal}
@media(max-width:800px){.hero .five-title{font-size:clamp(2.6rem,8.8vw,5rem)}.cnr-scroll-cue{bottom:17px;font-size:9px}.cnr-sound-toggle{right:16px;bottom:78px}}
@media(max-width:480px){.hero .five-title{font-size:clamp(2.25rem,9.1vw,3.5rem);letter-spacing:-.055em}.cnr-scroll-cue{bottom:12px}.hero-content{max-width:100%}}
@media(prefers-reduced-motion:reduce){.hero-content .hero-title,.hero-content .description,.hero-content .hero-buttons{animation:none!important}}


/* === v21-role-navbar-scroll.css === */
/* FIVE:CNR V21 — cinematic role selection, solid navbar, green scrollbar */
:root{scrollbar-color:#55C84A #090d0a;scrollbar-width:thin}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:11px}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:#080d09}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:#55C84A;border-radius:9px;border:3px solid #080d09}
html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{background:#55C84A}
.navbar{background:#050706!important;background-color:#050706!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1!important}
.roles-showcase .role-panel{min-height:370px!important;isolation:isolate;border-color:#293a30!important}
.roles-showcase .role-panel::before{background-size:cover!important;background-repeat:no-repeat!important;filter:none!important;transition:transform .6s ease!important}
.roles-showcase .role-law::before{background-image:linear-gradient(0deg,rgba(3,8,11,.98) 0%,rgba(3,8,11,.83) 18%,rgba(3,8,11,.05) 78%),linear-gradient(90deg,rgba(3,8,11,.28),transparent 75%),url('../../image/role-police.svg')!important;background-position:center center!important}
.roles-showcase .role-crime::before{background-image:linear-gradient(0deg,rgba(12,7,5,.98) 0%,rgba(12,7,5,.82) 18%,rgba(12,7,5,.06) 78%),linear-gradient(90deg,rgba(12,7,5,.3),transparent 75%),url('../../image/role-robber.svg')!important;background-position:center center!important}
.roles-showcase .role-panel:hover::before{transform:scale(1.045)!important}
.roles-showcase .role-panel:hover{border-color:#55C84A!important}
.roles-showcase .role-panel::after{content:''!important;top:auto!important;right:auto!important;bottom:0!important;left:0!important;height:2px!important;width:0!important;opacity:1!important;background:#55C84A!important;transition:width .3s ease!important}
.roles-showcase .role-panel:hover::after,.roles-showcase .role-panel:focus-within::after{width:100%!important}
.role-corner{position:absolute;right:27px;top:24px;z-index:2;display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(85,200,74,.4);border-radius:7px;background:rgba(5,12,8,.72);color:#55C84A;font-size:18px}
.role-panel-content{padding:32px!important}
.role-panel a{transition:color .2s ease!important}
.role-panel a:hover{color:#55C84A!important}
@media(max-width:850px){.roles-showcase .role-panel{min-height:355px!important}}
@media(max-width:600px){.roles-showcase .role-panel{min-height:340px!important}.role-corner{right:18px;top:18px;width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.roles-showcase .role-panel::before{transition:none!important}}


/* === v23-minimal.css === */
/* FIVE:CNR V23 — Minimal homepage: hero directly transitions to footer */
.hero{min-height: min(820px, 100svh)!important;}
.cnr-footer{margin-top:0!important;}
@media (max-width:700px){.hero{min-height:700px!important;}}


/* === v24-gelismeler.css === */
/* FIVE:CNR V24 — Neler Oluyor? */
.cnr-updates{position:relative;background:#070b09;color:#fff;padding:80px 24px 84px;border-top:1px solid #15251a;overflow:hidden}
.cnr-updates::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 100% at 50% 110%,rgba(85,200,74,.065),transparent 72%);pointer-events:none}
.cnr-updates-inner{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:64px;align-items:center}
.cnr-updates-intro{max-width:490px}
.cnr-updates-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#55C84A;font:800 11px/1.4 Inter,Arial,sans-serif;letter-spacing:2px}
.cnr-updates-dot{width:7px;height:7px;background:#55C84A;border-radius:50%;box-shadow:0 0 12px rgba(85,200,74,.3)}
.cnr-updates h2{margin:18px 0 17px;font:900 clamp(38px,4.3vw,62px)/.98 Inter,Arial,sans-serif;letter-spacing:-2.7px;color:#fff}
.cnr-updates h2 span{color:#55C84A}
.cnr-updates-intro p{margin:0;color:#aebbb1;font:400 14px/1.95 Inter,Arial,sans-serif}
.cnr-updates-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cnr-updates-card{min-height:244px;display:flex;flex-direction:column;align-items:flex-start;text-decoration:none!important;color:#fff!important;background:linear-gradient(155deg,#101a13,#090e0b);border:1px solid #253c2b;border-radius:6px;padding:25px 23px 21px;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.cnr-updates-card:hover,.cnr-updates-card:focus-visible{transform:translateY(-4px);border-color:#55C84A;box-shadow:0 12px 34px rgba(0,0,0,.18);outline:none}
.cnr-updates-icon{display:grid;place-items:center;width:40px;height:40px;color:#55C84A;background:#14251a;border:1px solid #294b30;border-radius:5px;font-size:18px;margin-bottom:21px}
.cnr-updates-card-title{font:900 20px/1 Inter,Arial,sans-serif;letter-spacing:-.4px;margin-bottom:12px}
.cnr-updates-card-desc{font:400 12px/1.7 Inter,Arial,sans-serif;color:#a5b3a8;flex:1}
.cnr-updates-action{display:flex;gap:10px;align-items:center;color:#55C84A;font:800 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.5px;margin-top:20px}
.cnr-updates-action i{font-size:10px;transition:transform .2s ease}.cnr-updates-card:hover .cnr-updates-action i{transform:translate(2px,-2px)}
@media(max-width:900px){.cnr-updates{padding:65px 22px}.cnr-updates-inner{grid-template-columns:1fr;gap:30px}.cnr-updates-intro{max-width:680px}}
@media(max-width:520px){.cnr-updates{padding:55px 18px}.cnr-updates h2{font-size:clamp(36px,10vw,48px);letter-spacing:-1.7px}.cnr-updates-links{grid-template-columns:1fr}.cnr-updates-card{min-height:190px;padding:22px}.cnr-updates-icon{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.cnr-updates-card,.cnr-updates-action i{transition:none}}


/* === v25-premium.css === */
/* FIVE:CNR V25 - polished, low-noise visual refinement */
:root{--cnr-accent:#55C84A}
/* Hero transitions into the updates section without a hard visual cut. */
.hero{position:relative;isolation:isolate}
.hero::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:clamp(100px,17vw,235px);pointer-events:none;z-index:1;background:linear-gradient(to bottom,transparent 0%,rgba(5,9,7,.22) 22%,rgba(5,9,7,.78) 70%,#070b09 100%)}
.cnr-updates{background:linear-gradient(180deg,#070b09 0%,#080e0a 56%,#07100a 100%);border-top:0;padding:76px 24px 78px;isolation:isolate}
.cnr-updates::before{background:radial-gradient(ellipse 65% 100% at 65% 85%,rgba(85,200,74,.048),transparent 75%)}
.cnr-updates-inner{max-width:1100px;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:clamp(28px,5vw,74px);align-items:center}
.cnr-updates-intro{max-width:470px}
.cnr-updates-eyebrow{letter-spacing:1.65px;font-size:10px}
.cnr-updates h2{font-size:clamp(36px,4vw,55px);line-height:1.03;letter-spacing:-2px;margin:17px 0 18px;white-space:normal}
.cnr-updates-intro p{max-width:450px;color:#afbbb2;font-size:13px;line-height:1.85}
.cnr-updates-links{gap:16px;align-items:stretch}
.cnr-updates-card{position:relative;overflow:hidden;min-height:240px;padding:25px 23px 23px;border-radius:9px;border:1px solid #294031;background:linear-gradient(150deg,rgba(19,34,23,.95) 0%,rgba(9,16,11,.98) 88%);box-shadow:0 7px 22px rgba(0,0,0,.12);transform:translateY(0);transition:transform .27s ease,border-color .27s ease,box-shadow .27s ease,background .27s ease}
.cnr-updates-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#55C84A;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.cnr-updates-card::after{content:"";position:absolute;right:-65px;top:-75px;width:165px;height:165px;border-radius:50%;background:radial-gradient(circle,rgba(85,200,74,.065),transparent 72%);pointer-events:none}
.cnr-updates-card:hover,.cnr-updates-card:focus-visible{transform:translateY(-3px);border-color:#55C84A;box-shadow:0 15px 36px rgba(0,0,0,.23);outline:none}
.cnr-updates-card:hover::before,.cnr-updates-card:focus-visible::before{transform:scaleX(1)}
.cnr-updates-icon{width:44px;height:44px;margin-bottom:21px;border-radius:7px;background:#15271a;border-color:#2b4b33;font-size:19px}
.cnr-updates-card-title{font-size:19px;letter-spacing:-.35px;margin-bottom:10px}
.cnr-updates-card-desc{font-size:12px;line-height:1.8;color:#b3beb6}
.cnr-updates-action{width:100%;justify-content:space-between;margin-top:24px;padding-top:12px;border-top:1px solid rgba(85,200,74,.12);font-size:10px;letter-spacing:.55px}
.cnr-updates-action i{font-size:12px}
.cnr-updates-card:hover .cnr-updates-action i{transform:translate(2px,-2px)}
/* Softer footer skyline, keeping palms at the far edges and legal links legible. */
.cnr-footer{border-top:1px solid rgba(85,200,74,.14)!important;background:linear-gradient(180deg,#07100a 0%,#07100a 30%,#050b07 100%)!important;padding-top:64px}
.cnr-footer::before{background:linear-gradient(180deg,rgba(3,9,5,.58) 0%,rgba(3,9,5,.48) 48%,rgba(2,7,4,.79) 100%),url("../../footer-palms-v20.svg") center bottom/100% auto no-repeat!important;opacity:.74!important}
.cnr-footer::after{background:linear-gradient(0deg,rgba(1,6,3,.80),transparent 90%)!important}
.cnr-footer-top{gap:clamp(22px,3vw,46px)}
.cnr-footer-divider{margin-top:46px;background:rgba(134,168,139,.22)}
.cnr-footer-group .cnr-social-icons a{width:47px;height:47px;border-radius:9px}
.cnr-footer-group .cnr-social-icons a:hover{transform:translateY(-2px)}
/* Small entrance motion, once only, without hiding content if JS is unavailable. */
@media(prefers-reduced-motion:no-preference){
 .cnr-updates-intro,.cnr-updates-card{animation:cnr-v25-enter .62s cubic-bezier(.2,.7,.2,1) both}
 .cnr-updates-card:nth-child(1){animation-delay:.08s}
 .cnr-updates-card:nth-child(2){animation-delay:.16s}
 @keyframes cnr-v25-enter{from{opacity:0;translate:0 13px}to{opacity:1;translate:0 0}}
}
@media(max-width:900px){.cnr-updates{padding:60px 22px 65px}.cnr-updates-inner{grid-template-columns:1fr;gap:30px}.cnr-updates-intro{max-width:680px}.cnr-updates-links{max-width:720px}.cnr-footer{padding-top:55px}.cnr-footer::before{background-size:auto 360px!important}}
@media(max-width:520px){.cnr-updates{padding:49px 18px 56px}.cnr-updates h2{font-size:clamp(34px,9vw,45px);letter-spacing:-1.3px}.cnr-updates-links{grid-template-columns:1fr;gap:12px}.cnr-updates-card{min-height:185px;padding:21px}.cnr-updates-icon{margin-bottom:14px}.cnr-updates-action{margin-top:18px}.cnr-footer::before{background-size:auto 290px!important;opacity:.62!important}}
@media(prefers-reduced-motion:reduce){.cnr-updates-intro,.cnr-updates-card{animation:none!important}.cnr-updates-card,.cnr-updates-card::before,.cnr-updates-action i{transition:none!important}}


/* === v26-hero-fix.css === */
/* FIVE:CNR V26 - Fix full-screen pseudo-element overlay causing horizontal dark band.
   Older hud-theme.css forces inset:76px 0 0!important on .hero::after.
   Reset ALL inset sides to anchor the gradient strictly to the hero bottom. */
.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 18% !important;
  max-height: 155px !important;
  min-height: 75px !important;
  background: linear-gradient(to bottom, rgba(7,11,9,0) 0%, rgba(7,11,9,.24) 46%, #070b09 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-content { position: relative; z-index: 2; }
@media (max-width: 700px) { .hero::after { height: 15% !important; max-height: 120px !important; } }


/* === v27-ayarlar-hud.css === */
/* FIVE:CNR V27 - five_ayarlar-inspired, flat HUD surfaces */
:root{--five-hud-black:#050709;--five-hud-panel:#090d10;--five-hud-border:#29332f;--five-hud-green:#55C84A}
/* The updates area continues into the footer without the previous green glow. */
.cnr-updates{background:#050709!important;border-top:1px solid #18201c!important;border-bottom:0!important;padding-top:76px;padding-bottom:76px}
.cnr-updates::before{display:none!important}
.cnr-updates-inner{position:relative;z-index:1}
.cnr-updates-intro p{color:#a6adb4!important}
.cnr-updates-dot{box-shadow:none!important}
/* HUD-style, squared-off cards: no gradients, bloom, or floating shadows. */
.cnr-updates-card{background:#090d10!important;border:1px solid #29332f!important;border-radius:7px!important;box-shadow:none!important;min-height:238px!important;padding:24px 22px 20px!important;transition:border-color .2s ease,background-color .2s ease!important}
.cnr-updates-card::before,.cnr-updates-card::after{display:none!important}
.cnr-updates-card:hover,.cnr-updates-card:focus-visible{background:#0b1012!important;border-color:#55C84A!important;box-shadow:none!important;transform:none!important;outline:none}
.cnr-updates-icon{background:#111a16!important;border:1px solid #293b30!important;border-radius:6px!important;color:#55C84A!important;width:43px!important;height:43px!important;margin-bottom:19px!important}
.cnr-updates-card-title{color:#fff!important;font-weight:900!important;letter-spacing:-.25px!important}
.cnr-updates-card-desc{color:#a6adb4!important;line-height:1.75!important}
.cnr-updates-action{border-top:1px solid #29332f!important;color:#55C84A!important;margin-top:23px!important;padding-top:13px!important}
.cnr-updates-card:hover .cnr-updates-action i{transform:translate(2px,-2px)}
/* Keep existing Los Santos silhouette/palms but remove the green wash at the section boundary. */
.cnr-footer{background:#050709!important;border-top:1px solid #18201c!important}
.cnr-footer::before{opacity:.68!important}
.cnr-footer::after{background:linear-gradient(0deg,rgba(1,6,3,.78),transparent 88%)!important}
@media(max-width:900px){.cnr-updates{padding-top:60px;padding-bottom:60px}}
@media(max-width:520px){.cnr-updates{padding-top:48px;padding-bottom:52px}.cnr-updates-card{min-height:190px!important;padding:21px!important}}
@media(prefers-reduced-motion:reduce){.cnr-updates-card{transition:none!important}}


/* === v30-clean-seams.css === */
/* FIVE:CNR V30 — one clean transition, no overlapping footer masks. */
/* Hero fades to the same base black as the updates section. */
.hero::after {
  inset:auto 0 0!important;
  top:auto!important;
  height:clamp(100px,19%,185px)!important;
  min-height:0!important;
  max-height:none!important;
  background:linear-gradient(to bottom,rgba(5,7,9,0) 0%,rgba(5,7,9,.35) 45%,#050709 100%)!important;
  pointer-events:none!important;
}
/* The fade belongs to the updates section, never on top of the palms. */
.cnr-updates {
  border:0!important;
  background:#050709!important;
  position:relative;
  isolation:isolate;
}
.cnr-updates::after { content:none!important; display:none!important; }
.cnr-updates-inner {position:relative;z-index:2;}
/* Footer starts on the exact same black, without a dividing line. */
.cnr-footer {
  border-top:0!important;
  background:#050709!important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* Restore the complete original skyline/palms image, without top-edge masking. */
.cnr-footer::before {
  inset:0!important;
  background:linear-gradient(to bottom,rgba(3,9,5,.28),rgba(3,9,5,.14) 48%,rgba(2,7,4,.46)),url("../../footer-palms-v20.svg") center bottom/100% auto no-repeat!important;
  opacity:.87!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  pointer-events:none!important;
}
/* Only a subtle bottom shadow for footer legibility; no top black stripe. */
.cnr-footer::after {
  inset:auto 0 0!important;
  height:45%!important;
  background:linear-gradient(to top,rgba(1,6,3,.62),rgba(1,6,3,0))!important;
  pointer-events:none!important;
}
.cnr-footer-inner {position:relative;z-index:2;}
@media(max-width:850px){.cnr-footer::before{background-size:auto 360px!important;background-position:center bottom!important;}}
@media(max-width:700px){.hero::after{height:clamp(75px,15%,130px)!important;}}
@media(max-width:480px){.cnr-footer::before{background-size:auto 290px!important;opacity:.77!important;}}


/* === v31-f1-hud-cards.css === */
/* FIVE:CNR V31 - F1 Active Players / five_ayarlar-inspired cards.
   Scoped only to the Wiki and Discord cards. V30 hero/footer untouched. */
.cnr-updates-links .cnr-updates-card {
  position:relative!important;
  isolation:isolate;
  display:flex!important;
  flex-direction:column!important;
  background:rgba(3,5,6,.97)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:7px!important;
  box-shadow:none!important;
  min-height:238px!important;
  padding:23px 19px 17px 24px!important;
  overflow:hidden!important;
  transform:none!important;
  transition:background-color .18s ease,border-color .18s ease!important;
}
/* The thin inset green side marker is identical in spirit to the HUD panel. */
.cnr-updates-links .cnr-updates-card::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:14px!important;
  bottom:14px!important;
  left:0!important;
  right:auto!important;
  width:3px!important;
  height:auto!important;
  background:#55C84A!important;
  border-radius:0 2px 2px 0!important;
  transform:none!important;
  transition:background-color .18s ease!important;
}
.cnr-updates-links .cnr-updates-card::after {display:none!important;content:none!important;}
.cnr-updates-links .cnr-updates-card:hover,
.cnr-updates-links .cnr-updates-card:focus-visible {
  background:#090d0e!important;
  border-color:rgba(85,200,74,.5)!important;
  outline:none!important;
  box-shadow:none!important;
  transform:none!important;
}
.cnr-updates-links .cnr-updates-icon {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  height:36px!important;
  margin:0 0 16px!important;
  border:1px solid rgba(85,200,74,.24)!important;
  border-radius:5px!important;
  background:#101915!important;
  color:#55C84A!important;
  font-size:16px!important;
}
.cnr-updates-links .cnr-updates-index {
  position:absolute;
  top:29px;
  right:19px;
  color:#55C84A;
  font-family:Arial,Helvetica,sans-serif;
  font-size:8px;
  font-weight:900;
  letter-spacing:.85px;
}
.cnr-updates-links .cnr-updates-card-title {
  color:#f3f5f3!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  font-size:17px!important;
  letter-spacing:.2px!important;
  margin-bottom:10px!important;
}
.cnr-updates-links .cnr-updates-card-desc {
  color:#a6adb4!important;
  font-size:11px!important;
  line-height:1.65!important;
  margin-bottom:16px!important;
}
/* F1 HUD info tile: inset dark-grey action surface. */
.cnr-updates-links .cnr-updates-action {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  margin-top:auto!important;
  padding:13px 12px!important;
  background:#111417!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:5px!important;
  color:#55C84A!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
}
.cnr-updates-links .cnr-updates-action i {color:#55C84A!important;transition:transform .18s ease!important;}
.cnr-updates-links .cnr-updates-card:hover .cnr-updates-action {background:#151a1b!important;}
.cnr-updates-links .cnr-updates-card:hover .cnr-updates-action i {transform:translate(2px,-2px)!important;}
@media(max-width:520px){
 .cnr-updates-links .cnr-updates-card {min-height:205px!important;padding:20px 16px 16px 21px!important;}
 .cnr-updates-links .cnr-updates-index {right:15px;top:26px;}
}
@media(prefers-reduced-motion:reduce){
 .cnr-updates-links .cnr-updates-card,.cnr-updates-links .cnr-updates-action i {transition:none!important;}
}


/* === v32-polish.css === */
/* FIVE:CNR V32 — scoped polish, V31 interactions retained */
:root{--cnr-green:#55C84A}
.cnr-updates{padding:84px 24px 82px!important}
.cnr-updates-inner{max-width:1180px!important;grid-template-columns:minmax(0,.93fr) minmax(0,1.16fr)!important;gap:42px!important;align-items:center!important}
.cnr-updates-intro{max-width:495px!important}
.cnr-updates h2{font-size:clamp(38px,3.55vw,54px)!important;line-height:1.08!important;letter-spacing:-2px!important;margin:17px 0 18px!important}
.cnr-updates-intro p{font-size:13px!important;line-height:1.85!important;color:#aeb8b4!important;max-width:480px!important}
.cnr-updates-links{gap:16px!important;align-items:stretch!important}
.cnr-updates-links .cnr-updates-card{min-width:0!important;min-height:258px!important;padding:23px 20px 18px 24px!important}
.cnr-updates-links .cnr-updates-icon{width:40px!important;height:40px!important;font-size:18px!important;margin-bottom:17px!important}
.cnr-updates-links .cnr-updates-index{top:29px!important;right:16px!important;font-size:9px!important}
.cnr-updates-links .cnr-updates-card-title{font-size:20px!important;margin-bottom:11px!important}
.cnr-updates-links .cnr-updates-card-desc{font-size:12.5px!important;line-height:1.7!important;margin-bottom:18px!important}
.cnr-updates-links .cnr-updates-action{font-size:10.5px!important;padding:14px 12px!important}
/* Footer: preserve full silhouette and palms, improve fine detail without overlay seams. */
.cnr-footer::before{opacity:.95!important;background:linear-gradient(to bottom,rgba(3,9,5,.12),rgba(3,9,5,.07) 52%,rgba(2,7,4,.31)),url("../../footer-palms-v32.svg") center bottom/100% auto no-repeat!important}
.cnr-footer::after{height:32%!important;background:linear-gradient(to top,rgba(1,6,3,.42),transparent)!important}
/* Current page: thin, unobtrusive underline. */
.nav-menu a[aria-current="page"]{position:relative;color:#55C84A!important}
.nav-menu a[aria-current="page"]::after{content:"";position:absolute;bottom:-11px;left:0;right:0;height:2px;background:#55C84A;border-radius:2px}
/* Responsive navigation stays visible and scrolls rather than overlapping. */
@media(max-width:980px){
 .cnr-updates-inner{gap:28px!important;grid-template-columns:1fr!important;max-width:720px!important}
 .cnr-updates-intro{max-width:680px!important}
 .cnr-updates{padding:68px 22px 72px!important}
 .navbar{gap:12px!important}
 .nav-menu{max-width:calc(100vw - 175px);overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex-wrap:nowrap!important;gap:clamp(12px,2vw,22px)!important}
 .nav-menu::-webkit-scrollbar{display:none}
 .nav-menu a{flex-shrink:0}
 .cnr-footer::before{background-size:auto 360px!important}
}
@media(max-width:600px){
 .cnr-updates{padding:55px 18px 64px!important}
 .cnr-updates-inner{gap:27px!important}
 .cnr-updates h2{font-size:clamp(33px,9vw,44px)!important;letter-spacing:-1.5px!important}
 .cnr-updates-intro p{font-size:12.5px!important}
 .cnr-updates-links{grid-template-columns:1fr!important;gap:12px!important}
 .cnr-updates-links .cnr-updates-card{min-height:216px!important;padding:20px 18px 17px 22px!important}
 .cnr-updates-links .cnr-updates-icon{margin-bottom:12px!important}
 .cnr-updates-links .cnr-updates-index{top:26px!important}
 .cnr-updates-links .cnr-updates-card-title{font-size:19px!important}
 .cnr-updates-links .cnr-updates-card-desc{font-size:12.5px!important}
 .cnr-footer::before{background-size:auto 295px!important}
 .nav-menu a[aria-current="page"]::after{bottom:-5px}
}
@media(prefers-reduced-motion:reduce){.cnr-updates-links .cnr-updates-card,.cnr-updates-links .cnr-updates-action i{transition:none!important}}


/* === v33-hud-refine.css === */
/* FIVE:CNR V33 — HUD styling, scoped; preserve V32 features */
/* F1-like black with a subtle green atmosphere; no harsh section boundaries. */
.cnr-updates {
  background:radial-gradient(ellipse 75% 90% at 52% 55%,rgba(24,56,30,.22) 0%,rgba(8,21,13,.13) 48%,rgba(5,7,9,0) 82%),#050709!important;
  border:0!important;
  position:relative!important;
  isolation:isolate;
}
/* Fade the updates background to the footer base, not the footer illustration. */
.cnr-updates::after {
  content:""!important;display:block!important;
  position:absolute!important;inset:auto 0 0!important;
  height:clamp(45px,13%,95px)!important;
  background:linear-gradient(to bottom,rgba(5,7,9,0),#050709)!important;
  pointer-events:none!important;z-index:1!important;
}
.cnr-updates-inner {position:relative!important;z-index:2!important;}
.cnr-footer {border-top:0!important;background-color:#050709!important;}
/* Hide labels even if an old cached HTML file still has them. */
.cnr-updates-links .cnr-updates-index{display:none!important;}
/* Main Discord call-to-action uses the same F1 HUD black and green side marker. */
.hero-buttons .play-button {
  position:relative!important;isolation:isolate!important;
  background:#080a0c!important;color:#f4f6f4!important;
  border:1px solid #2b3430!important;border-radius:6px!important;
  box-shadow:none!important;transform:none!important;
  overflow:hidden!important;
  transition:border-color .18s ease,background-color .18s ease!important;
}
.hero-buttons .play-button::before {
  content:""!important;position:absolute!important;inset:10px auto 10px 0!important;
  width:3px!important;background:#55C84A!important;
  transform:none!important;transition:none!important;
  pointer-events:none!important;
}
.hero-buttons .play-button:hover,
.hero-buttons .play-button:focus-visible {
  background:#0d1113!important;border-color:rgba(85,200,74,.65)!important;
  box-shadow:none!important;transform:none!important;
}
.hero-buttons .play-button .discord-cta-icon {
  color:#55C84A!important;background:#111417!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:5px!important;
  width:46px!important;height:42px!important;padding:0!important;
  flex-shrink:0!important;transform:none!important;
}
.hero-buttons .play-button:hover .discord-cta-icon {transform:none!important;}
.hero-buttons .play-button .discord-cta-text {color:#fff!important;}
.hero-buttons .play-button .discord-cta-arrow {color:#55C84A!important;}
@media(max-width:600px){
  .hero-buttons .play-button{max-width:100%!important;min-height:60px!important;padding:0 12px 0 15px!important;}
  .cnr-updates::after{height:45px!important;}
}
@media(prefers-reduced-motion:reduce){.hero-buttons .play-button{transition:none!important;}}


/* === v34-navbar-cta.css === */
/* V34: Left-hand F1 HUD accent on Discord CTA */
.hero-buttons .play-button{border-left:3px solid #55C84A!important;padding-left:15px!important;}
.hero-buttons .play-button::before{display:block!important;content:""!important;position:absolute!important;left:0!important;top:10px!important;bottom:10px!important;right:auto!important;width:3px!important;background:#55C84A!important;opacity:1!important;transform:none!important;animation:none!important;}
.hero-buttons .play-button:hover{border-left-color:#55C84A!important;}
.nav-menu a[aria-current="page"]{color:#55C84A!important}
@media(max-width:650px){.nav-menu{gap:13px!important}.nav-menu a{font-size:11px!important}}


/* === v35-cta-footer-fade.css === */
/* FIVE:CNR V35: F1 HUD CTA and seamless updates-to-footer fade. */
.hero-buttons .play-button {
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:14px!important;
  min-height:62px!important;
  padding:9px 17px 9px 20px!important;
  background:rgba(3,5,6,.97)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-left:1px solid rgba(255,255,255,.10)!important;
  border-radius:7px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.hero-buttons .play-button::before {
  content:""!important;
  position:absolute!important;
  left:0!important;right:auto!important;
  top:12px!important;bottom:12px!important;
  height:auto!important;width:3px!important;
  background:#55C84A!important;
  border-radius:0 2px 2px 0!important;
  transform:none!important;
  display:block!important;
}
.hero-buttons .play-button .discord-cta-icon {
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:40px!important;height:40px!important;
  background:#101915!important;border:1px solid rgba(85,200,74,.24)!important;
  color:#55C84A!important;border-radius:5px!important;
}
.hero-buttons .play-button .discord-cta-text {font-weight:900!important;color:#f3f5f3!important;}
.hero-buttons .play-button .discord-cta-arrow {margin-left:auto!important;color:#55C84A!important;}
.hero-buttons .play-button:hover,.hero-buttons .play-button:focus-visible {
  background:#090d0e!important;border-color:rgba(85,200,74,.5)!important;
}
/* A real vertical color fade, not a hard boundary or horizontal black bar. */
.cnr-updates {
  background:linear-gradient(180deg,#050709 0%,#050709 62%,#061009 85%,#08150c 100%)!important;
  border-bottom:0!important;
}
.cnr-updates::after {
  content:""!important;display:block!important;
  position:absolute!important;left:0!important;right:0!important;
  top:auto!important;bottom:0!important;
  height:clamp(90px,30%,170px)!important;
  background:linear-gradient(to bottom,rgba(5,7,9,0) 0%,rgba(5,11,7,.42) 48%,rgba(7,17,10,.80) 100%)!important;
  pointer-events:none!important;z-index:1!important;
}
.cnr-updates-inner {position:relative!important;z-index:2!important;}
.cnr-footer {
  background:linear-gradient(180deg,#08150c 0%,#07120a 32%,#050b07 100%)!important;
  border-top:0!important;
}
/* Keep palms behind text; blend their upper edge into the updates background. */
.cnr-footer::before {
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 16%,black 43%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 16%,black 43%)!important;
}
@media(max-width:600px){
 .hero-buttons .play-button{width:min(100%,340px)!important;min-height:60px!important;padding-left:18px!important;}
 .cnr-updates::after{height:90px!important;}
}


/* === v36-neutral-fade.css === */
/* FIVE:CNR V36 — neutral charcoal transition; remove V35 green band. */
.cnr-updates {
  background:linear-gradient(180deg,#050709 0%,#050709 67%,#040607 88%,#030505 100%)!important;
  border-bottom:0!important;
}
.cnr-updates::after {
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;top:auto!important;bottom:0!important;
  height:clamp(70px,18%,120px)!important;
  background:linear-gradient(180deg,rgba(3,5,5,0) 0%,rgba(3,5,5,.35) 48%,#030505 100%)!important;
  pointer-events:none!important;
  z-index:1!important;
}
.cnr-updates-inner {position:relative!important;z-index:2!important;}
.cnr-footer {
  background:linear-gradient(180deg,#030505 0%,#040706 32%,#030605 100%)!important;
  border-top:0!important;
}
/* Retain the skyline and palms, but do not let their green tint form a horizontal band. */
.cnr-footer::before {
  opacity:.55!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.55) 44%,black 70%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.55) 44%,black 70%)!important;
}
.cnr-footer::after {
  background:linear-gradient(180deg,rgba(3,5,5,.86) 0%,rgba(3,5,5,.38) 34%,rgba(2,5,4,.52) 100%)!important;
}
@media(max-width:600px){.cnr-updates::after{height:70px!important;}}


/* === v37-footer-fade-fix.css === */
/* V37: Transition only between updates and footer. No overlay over footer content. */
.cnr-updates { background:#050709!important; border:0!important; }
.cnr-updates::after { display:block!important; content:""!important; position:absolute!important; left:0!important; right:0!important; top:auto!important; bottom:0!important; height:95px!important; background:linear-gradient(to bottom,rgba(5,7,9,0),#030505)!important; pointer-events:none!important; }
.cnr-footer { background:#030505!important; border:0!important; }
/* Remove the bottom black band introduced by the previous fade. */
.cnr-footer::after { content:none!important; display:none!important; }
/* Preserve skyline/palms across the whole footer without an added dark mask. */
.cnr-footer::before { opacity:.80!important; -webkit-mask-image:none!important; mask-image:none!important; background:linear-gradient(to bottom,rgba(3,9,5,.18),rgba(3,9,5,.10) 48%,rgba(2,7,4,.26)),url("../../footer-palms-v20.svg") center bottom/100% auto no-repeat!important; }
@media(max-width:850px){.cnr-footer::before{background-size:auto 360px!important;}}
@media(max-width:480px){.cnr-footer::before{background-size:auto 290px!important;}.cnr-updates::after{height:65px!important;}}


/* === v38-seamless-transition.css === */
/* V38 — a single neutral transition at the updates/footer junction.
   No extra overlay across the footer and no green horizontal band. */
.cnr-updates {
  position:relative!important;
  background:#050709!important;
  border:0!important;
  padding-bottom:clamp(76px,9vw,118px)!important;
}
.cnr-updates::before {background:none!important;opacity:0!important;}
.cnr-updates::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;top:auto!important;
  height:clamp(105px,13vw,175px)!important;
  background:linear-gradient(to bottom,rgba(5,7,9,0) 0%,rgba(4,6,7,.28) 42%,#030505 100%)!important;
  pointer-events:none!important;
  z-index:1!important;
}
.cnr-updates-inner {position:relative!important;z-index:2!important;}
.cnr-footer {
  position:relative!important;
  border-top:0!important;
  background:#030505!important;
}
/* The skyline begins invisible at the join, appearing gently behind footer content. */
.cnr-footer::before {
  content:""!important;
  opacity:.8!important;
  background:linear-gradient(180deg,rgba(3,9,5,.18),rgba(3,9,5,.10) 48%,rgba(2,7,4,.26)),url("../../footer-palms-v20.svg") center bottom/100% auto no-repeat!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 17%,rgba(0,0,0,.75) 35%,#000 53%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 17%,rgba(0,0,0,.75) 35%,#000 53%)!important;
}
/* Important: never cover the footer's bottom half with a second fade. */
.cnr-footer::after {display:none!important;content:none!important;}
@media(max-width:850px){.cnr-footer::before{background-size:auto 360px!important;}}
@media(max-width:480px){
 .cnr-updates{padding-bottom:76px!important;}
 .cnr-updates::after{height:95px!important;}
 .cnr-footer::before{background-size:auto 290px!important;}
}


/* === v39-hero-premium.css === */
/* FIVE:CNR V39 — cinematic hero refinement; preserves the supplied banner and site functionality. */
.hero { isolation:isolate; background:#030506!important; }
.hero::before {
  /* Darker on the text side; police / chase scene stays legible on the right. */
  background-image:linear-gradient(90deg,rgba(2,4,5,.88) 0%,rgba(2,4,5,.73) 20%,rgba(2,4,5,.42) 39%,rgba(2,4,5,.08) 69%,rgba(2,4,5,.02) 100%),url('../../image/banner.jpg')!important;
  background-position:center center!important;
  background-size:cover!important;
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}
.hero::after {
  /* Only the hero bottom fades; never overlay the updates or footer. */
  inset:auto 0 0 0!important;
  height:clamp(130px,19%,205px)!important;
  min-height:0!important;max-height:none!important;
  background:linear-gradient(to bottom,rgba(3,5,6,0) 0%,rgba(3,5,6,.18) 32%,rgba(3,5,6,.65) 72%,#050709 100%)!important;
  pointer-events:none!important;
}
.hero-content { position:relative!important;z-index:2!important; }
.hero .five-title {
  font-size:clamp(48px,4.9vw,81px)!important;
  line-height:1.035!important;
  letter-spacing:-.059em!important;
  max-width:850px!important;
  text-shadow:0 3px 22px rgba(0,0,0,.28)!important;
}
.hero .five-subtitle {margin-top:22px!important;letter-spacing:1.15px!important;}
.hero .description {max-width:560px!important;}
.hero-buttons .play-button {
  width:310px!important;max-width:100%!important;min-height:62px!important;
  background:rgba(4,7,8,.96)!important;
  border:1px solid rgba(133,156,140,.26)!important;
  border-radius:6px!important;
  box-shadow:0 6px 20px rgba(0,0,0,.17)!important;
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease!important;
}
.hero-buttons .play-button::before {background:#55C84A!important;}
.hero-buttons .play-button:hover,.hero-buttons .play-button:focus-visible {
  background:#0b1210!important;border-color:rgba(85,200,74,.7)!important;
  box-shadow:0 7px 23px rgba(0,0,0,.25),0 0 0 1px rgba(85,200,74,.10)!important;
  transform:translateY(-2px)!important;
}
@media(max-width:850px){
 .hero::before{background-position:56% center!important;background-image:linear-gradient(90deg,rgba(2,4,5,.90),rgba(2,4,5,.60) 58%,rgba(2,4,5,.22)),url('../../image/banner.jpg')!important;}
 .hero .five-title{font-size:clamp(40px,7vw,62px)!important;}
}
@media(max-width:600px){
 .hero::before{background-position:58% center!important;background-image:linear-gradient(90deg,rgba(2,4,5,.90),rgba(2,4,5,.60)),url('../../image/banner.jpg')!important;}
 .hero .five-title{font-size:clamp(35px,9vw,51px)!important;letter-spacing:-.055em!important;}
 .hero-buttons .play-button{width:min(100%,310px)!important;}
 .hero::after{height:155px!important;}
}
@media(prefers-reduced-motion:reduce){.hero-buttons .play-button{transition:none!important;}}


/* === v40-hero-refine.css === */
/* FIVE:CNR V40 — focused refinements: text, active nav, hero-to-updates spacing. */
.hero .description {max-width:530px!important;}
.hero .description p {margin-bottom:0!important;line-height:1.75!important;}
/* Keep current-page indicator narrow, centered, and visually quiet. */
.nav-menu a[aria-current="page"] {position:relative!important;color:#55C84A!important;}
.nav-menu a[aria-current="page"]::after {
  content:""!important;display:block!important;position:absolute!important;
  left:50%!important;right:auto!important;bottom:-12px!important;
  width:32px!important;height:2px!important;border-radius:3px!important;
  background:#55C84A!important;transform:translateX(-50%)!important;
  box-shadow:none!important;
}
/* Reduce dead space under the hero content without clipping the photo or the text. */
@media(min-width:701px){
  .hero{height:min(820px,92svh)!important;min-height:690px!important;}
  .hero-content{padding-bottom:80px!important;}
}
@media(max-width:700px){
  .hero{height:auto!important;min-height:0!important;}
  .hero-content{padding-bottom:clamp(145px,27vw,230px)!important;}
  .nav-menu a[aria-current="page"]::after{bottom:-6px!important;width:24px!important;}
}
@media(prefers-reduced-motion:reduce){.nav-menu a[aria-current="page"]::after{transition:none!important;}}


/* === v41-layout-fix.css === */
/* FIVE:CNR V41 — navigation underline alignment and hero bottom spacing only. */
/* The menu links fill the entire header in older styles; constrain the active link
   to its text height so its underline is no longer at the bottom of the navbar. */
.nav-menu a[aria-current="page"]{
  height:auto!important;
  align-self:center!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.nav-menu a[aria-current="page"]::after{
  bottom:1px!important;
  left:50%!important;
  right:auto!important;
  width:32px!important;
  height:2px!important;
  transform:translateX(-50%) scaleX(1)!important;
}
/* Shorten the hero itself, not the footer or updates section. */
@media(min-width:701px){
  .hero{height:clamp(660px,78svh,740px)!important;min-height:660px!important;}
  .hero-content{padding-bottom:64px!important;}
}
@media(max-width:700px){
  .nav-menu a[aria-current="page"]::after{bottom:1px!important;width:24px!important;}
}


/* === v42-hud-notifications.css === */
/* V43: Wiki/Discord card language applied consistently to notification panels */
.cnr-toast-region{right:24px;bottom:24px;gap:10px;max-width:min(390px,calc(100vw - 32px))}
.cnr-toast{--cnr-tone:#55C84A;position:relative!important;isolation:isolate;display:flex!important;align-items:flex-start!important;gap:13px!important;min-width:min(320px,calc(100vw - 32px));padding:19px 36px 19px 21px!important;background:#030506!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:7px!important;box-shadow:0 12px 32px rgba(0,0,0,.40)!important;backdrop-filter:none!important;overflow:hidden!important}
.cnr-toast::before{content:""!important;position:absolute!important;top:12px!important;bottom:12px!important;left:0!important;width:3px!important;background:var(--cnr-tone)!important;border-radius:0 2px 2px 0!important;display:block!important}
.cnr-toast[data-type=info],.cnr-toast[data-type=success]{--cnr-tone:#55C84A}
.cnr-toast[data-type=error]{--cnr-tone:#ff4d4d}
.cnr-toast__mark{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 36px!important;width:36px!important;height:36px!important;margin:0!important;border:1px solid rgba(85,200,74,.24)!important;border-radius:5px!important;background:#101915!important;color:var(--cnr-tone)!important;font-size:16px!important;font-weight:800!important}
.cnr-toast[data-type=error] .cnr-toast__mark{background:#1b0e10!important;border-color:rgba(255,77,77,.3)!important}
.cnr-toast__content{min-width:0;flex:1;padding-top:2px}
.cnr-toast__title{color:#f3f5f3!important;font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:900!important;letter-spacing:0!important;line-height:1.25!important}
.cnr-toast__message{color:#abb5b3!important;font-size:12px!important;line-height:1.55!important;margin-top:7px!important}
.cnr-toast__close{position:absolute!important;top:13px!important;right:13px!important;align-self:auto!important;color:#89968e!important;font-size:18px!important;transition:color .18s}
.cnr-toast__close:hover{color:#55C84A!important}
.cnr-toast::after{height:2px!important;opacity:1!important;background:#55C84A!important;box-shadow:none!important}
.cnr-toast[data-type=error]::after{background:#ff4d4d!important}
@media(max-width:600px){.cnr-toast-region{left:16px;right:16px;bottom:16px;max-width:none}.cnr-toast{min-width:0}}


/* === v47-legal-modal-font.css === */
/* V47: footer legal links restored; modal retains HUD treatment and site font. */
.legal-modal{background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}
.legal-modal-box{background:#07090a;border:1px solid #252b2c;border-top:1px solid #252b2c;border-radius:7px;box-shadow:0 28px 85px rgba(0,0,0,.75);padding:38px 42px 34px 48px}
.legal-modal-box::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;background:#55C84A;border-radius:0 2px 2px 0}
.legal-modal-label{color:#55C84A;letter-spacing:1.5px}
.legal-modal-box h2{font-size:29px;letter-spacing:-.4px;margin-bottom:22px}
.legal-modal-content{border-top:1px solid #202627;padding-top:20px}
.legal-modal-content h3{font-size:16px}
.legal-modal-content p{color:#a8b0ad}
.legal-modal-close{background:#111517;border:1px solid #282f30;color:#b9c2be}
.legal-modal-close:hover{background:#152019;border-color:#55C84A;color:#55C84A}
.legal-modal-content::-webkit-scrollbar-thumb{background:#55C84A}
@media(max-width:600px){.cnr-footer-legal{gap:9px;padding:0 16px}.cnr-footer-legal>a{min-width:0;flex:1 1 170px;font-size:10px!important}.legal-modal{padding:14px}.legal-modal-box{padding:26px 20px 24px 27px;max-height:88vh}.legal-modal-box h2{font-size:23px}.legal-modal-content{max-height:65vh}}
@media(prefers-reduced-motion:reduce){.cnr-footer-legal>a{transition:none}}

.cnr-footer-legal, .cnr-footer-legal a {font-family: "Inter", Arial, sans-serif !important; font-weight: 500;}
.legal-modal-box, .legal-modal-box p, .legal-modal-box h3, .legal-modal-content {font-family: "Inter", Arial, sans-serif !important;}
.legal-modal-box h2 {font-family: "Anton", "Inter", sans-serif !important;}


/* === v48-legal-fix.css === */
/* V48: Legal modal headings consistent with FIVE:CNR HUD typography */
.legal-modal-box h2 {font-family:'Inter',Arial,sans-serif!important;font-size:26px!important;font-weight:900!important;line-height:1.24!important;letter-spacing:-.65px!important;text-transform:uppercase!important;overflow-wrap:anywhere;}
.legal-modal-content h3 {font-family:'Inter',Arial,sans-serif!important;font-size:15px!important;font-weight:750!important;line-height:1.45!important;letter-spacing:-.2px!important;}
.legal-modal-label {font-family:'Inter',Arial,sans-serif!important;font-size:10px!important;letter-spacing:1.4px!important;}
/* Slightly slimmer green scroll indicator inside legal windows */
.legal-modal-content {scrollbar-width:thin;scrollbar-color:#55C84A #0c100e;}
.legal-modal-content::-webkit-scrollbar {width:6px!important;}
.legal-modal-content::-webkit-scrollbar-thumb {border-radius:6px;}
@media(max-width:600px){.legal-modal-box h2{font-size:21px!important}.legal-modal-content h3{font-size:14px!important}}


/* === v49-navbar.css === */
/* FIVE:CNR V49 — minimal premium navigation */
.navbar{height:76px!important;padding-left:clamp(20px,4vw,70px)!important;padding-right:clamp(20px,4vw,70px)!important;transition:height .24s ease,background-color .24s ease,box-shadow .24s ease!important;background:#050706!important;z-index:9999!important}
.navbar .top-logo{flex-shrink:0;transition:transform .22s ease!important;transform-origin:left center;transform:scale(1.12)}
.navbar .nav-menu{gap:clamp(17px,2vw,35px)!important}
.navbar .nav-menu a{height:100%!important;align-self:stretch!important;padding-top:0!important;padding-bottom:0!important;position:relative!important;transition:color .2s ease!important;white-space:nowrap}
.navbar .nav-menu a::after{content:""!important;position:absolute!important;left:50%!important;right:auto!important;bottom:17px!important;width:0!important;height:2px!important;border-radius:2px!important;background:#55C84A!important;opacity:1!important;transform:translateX(-50%)!important;transition:width .24s ease!important}
.navbar .nav-menu a:hover,.navbar .nav-menu a:focus-visible{color:#55C84A!important}
.navbar .nav-menu a:hover::after,.navbar .nav-menu a:focus-visible::after{width:65%!important}
.navbar .nav-menu a[aria-current="page"]{color:#55C84A!important}
.navbar .nav-menu a[aria-current="page"]::after{width:38%!important}
.navbar.cnr-nav-scrolled{height:61px!important;background:#030504!important;box-shadow:0 8px 24px rgba(0,0,0,.25)!important}
.navbar.cnr-nav-scrolled .nav-menu a::after{bottom:12px!important}
.cnr-mobile-menu-button{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #26362b;border-radius:5px;background:#0b100d;color:#55C84A;font-size:19px;cursor:pointer}
.cnr-mobile-menu-button:hover{border-color:#55C84A}
@media(max-width:820px){
 .navbar{height:70px!important;padding:0 20px!important}
 .navbar.cnr-nav-scrolled{height:60px!important}
 .navbar .top-logo{transform:scale(1.08)}
 .cnr-mobile-menu-button{display:flex;flex-shrink:0}
 .navbar .nav-menu{display:none!important;position:absolute!important;top:100%;left:0;right:0;max-width:none!important;width:100%!important;height:auto!important;padding:13px 20px 19px!important;background:#050807!important;border-top:1px solid #1a2920;border-bottom:1px solid #25372a;box-shadow:0 16px 25px rgba(0,0,0,.5);flex-direction:column!important;align-items:stretch!important;gap:3px!important;overflow:visible!important;white-space:normal!important}
 .navbar.cnr-menu-open .nav-menu{display:flex!important}
 .navbar .nav-menu a{height:auto!important;min-height:44px!important;display:flex!important;align-items:center!important;padding:0 14px!important;border-left:2px solid transparent;font-size:12px!important}
 .navbar .nav-menu a[aria-current="page"]{border-left-color:#55C84A;background:#0b120d}
 .navbar .nav-menu a:hover{background:#0d1510;border-left-color:#55C84A}
 .navbar .nav-menu a::after{display:none!important}
}
@media(prefers-reduced-motion:reduce){.navbar,.navbar .top-logo,.navbar .nav-menu a,.navbar .nav-menu a::after{transition:none!important}}


/* === v52-navbar-underline.css === */
/* V52: Desktop menu underline stays below the text, not through it. */
@media (min-width:821px) {
  .navbar .nav-menu a,
  .navbar .nav-menu a[aria-current="page"] {
    height:100%!important; align-self:stretch!important;
    padding-top:0!important; padding-bottom:0!important;
    display:flex!important; align-items:center!important;
  }
  .navbar .nav-menu a::after,
  .navbar .nav-menu a[aria-current="page"]::after {
    bottom:17px!important; top:auto!important;
    height:2px!important;
  }
  .navbar.cnr-nav-scrolled .nav-menu a::after,
  .navbar.cnr-nav-scrolled .nav-menu a[aria-current="page"]::after {bottom:12px!important;}
}


/* === v53-premium-polish.css === */
/* V53: restrained premium polish; keep existing FIVE:CNR design intact */
@media(min-width:821px){
 .navbar{transition:height .3s ease,background-color .3s ease,box-shadow .3s ease!important}
 .navbar.cnr-nav-scrolled{background:#030504!important;box-shadow:0 9px 28px rgba(0,0,0,.34)!important}
 /* Single underline implementation: never intersects nav labels. */
 .navbar .nav-menu a::after,.navbar .nav-menu a[aria-current="page"]::after{top:auto!important;bottom:10px!important;height:2px!important}
 .navbar.cnr-nav-scrolled .nav-menu a::after,.navbar.cnr-nav-scrolled .nav-menu a[aria-current="page"]::after{bottom:7px!important}
 .navbar .nav-menu a:hover::after,.navbar .nav-menu a:focus-visible::after{width:50%!important}
 .navbar .nav-menu a[aria-current="page"]::after{width:38%!important}
}
/* Entry motion for content, without overriding the existing cinematic background drift. */
@keyframes cnrV53Enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero-content>*{animation:cnrV53Enter .65s cubic-bezier(.2,.7,.2,1) both}
.hero-content>*:nth-child(2){animation-delay:.09s}
.hero-content>*:nth-child(3){animation-delay:.16s}
.hero-content>*:nth-child(4){animation-delay:.23s}
.hero-content>*:nth-child(n+5){animation-delay:.28s}
/* Wiki and Discord: subtle lift and a brighter left-hand accent. */
.cnr-updates-links .cnr-updates-card{transition:transform .22s ease,border-color .22s ease,background-color .22s ease,box-shadow .22s ease!important;will-change:auto}
.cnr-updates-links .cnr-updates-card:hover,.cnr-updates-links .cnr-updates-card:focus-visible{transform:translateY(-3px)!important;border-color:rgba(85,200,74,.37)!important;box-shadow:0 9px 22px rgba(0,0,0,.2)!important}
.cnr-updates-links .cnr-updates-card:hover::before,.cnr-updates-links .cnr-updates-card:focus-visible::before{background:#55C84A!important;box-shadow:0 0 8px rgba(85,200,74,.22)!important}
/* Neutral black blending, not a green fog or stripe. Footer art remains untouched. */
.cnr-updates{background:#050709!important}
.cnr-updates::after{background:linear-gradient(to bottom,rgba(5,7,9,0) 0%,rgba(4,6,7,.55) 55%,#030505 100%)!important}
.cnr-footer{background-color:#030505!important}
@media(max-width:820px){.hero-content>*{animation-duration:.48s}.cnr-updates-links .cnr-updates-card:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){.hero-content>*{animation:none!important}.cnr-updates-links .cnr-updates-card{transition:none!important}}


/* === v54-enhancements.css === */
/* FIVE:CNR V54: minimal motion and mobile refinement */
:root{--cnr-accent:#55C84A}
/* Compact, unobtrusive logo splash, with reduced-motion support */
.cnr-v54-intro{position:fixed;inset:0;z-index:99999;background:#050709;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:cnrV54Hide .3s ease .62s forwards}
.cnr-v54-intro-brand{font-family:Inter,Arial,sans-serif;font-size:clamp(24px,5vw,43px);font-weight:900;letter-spacing:-1.5px;color:#fff;animation:cnrV54Brand .55s ease both}
.cnr-v54-intro-brand span{color:var(--cnr-accent)}
@keyframes cnrV54Brand{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes cnrV54Hide{to{opacity:0;visibility:hidden}}
/* Smooth page exit for internal links only */
body.cnr-v54-leaving{opacity:0;transition:opacity .17s ease!important}
/* CTA arrow: movement only, no scaling of the button */
.hero-buttons .play-button .discord-cta-arrow{display:inline-block;transition:transform .2s ease,color .2s ease!important}
.hero-buttons .play-button:hover .discord-cta-arrow,.hero-buttons .play-button:focus-visible .discord-cta-arrow{transform:translateX(4px)!important}
/* Social links: precise green borders, restrained contrast */
.cnr-social-icons a{transition:border-color .2s ease,color .2s ease,background-color .2s ease!important}
.cnr-social-icons a:hover,.cnr-social-icons a:focus-visible{border-color:#55C84A!important;color:#55C84A!important;background-color:#101711!important}
/* Card action arrows */
.cnr-updates-action i{display:inline-block;transition:transform .2s ease!important}
.cnr-updates-card:hover .cnr-updates-action i,.cnr-updates-card:focus-visible .cnr-updates-action i{transform:translate(3px,-2px)!important}
@media(max-width:820px){
 .navbar{padding-inline:clamp(14px,4vw,24px)!important}
 .navbar .top-logo{max-width:calc(100% - 65px)}
 .hero-content{box-sizing:border-box;width:100%;max-width:100%;padding-left:clamp(18px,5vw,32px)!important;padding-right:clamp(18px,5vw,32px)!important}
 .hero-content .five-title{font-size:clamp(37px,9.4vw,75px)!important;line-height:1.03!important;overflow-wrap:normal}
 .hero-content .five-subtitle{font-size:clamp(13px,3.4vw,19px)!important;letter-spacing:.03em!important}
 .hero-content .description,.hero-content .description p{max-width:100%;font-size:clamp(13px,3.3vw,16px)!important;line-height:1.55!important}
 .hero-buttons .play-button{box-sizing:border-box;max-width:100%;min-width:0!important}
 .cnr-updates-inner{box-sizing:border-box;max-width:100%;padding-inline:clamp(18px,5vw,28px)!important}
 .cnr-updates-links{grid-template-columns:1fr!important;display:grid!important;width:100%;min-width:0;gap:14px!important}
 .cnr-updates-links .cnr-updates-card{box-sizing:border-box;width:100%;min-width:0;max-width:none!important}
 .cnr-footer-inner{box-sizing:border-box;max-width:100%;padding-inline:clamp(18px,5vw,28px)!important}
}
@media(max-width:420px){.hero-content .five-title{font-size:clamp(33px,9.1vw,44px)!important}.cnr-updates-intro h2{font-size:clamp(32px,9vw,43px)!important}.cnr-social-icons{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.cnr-v54-intro{display:none!important}body.cnr-v54-leaving{transition:none!important}.hero-buttons .play-button .discord-cta-arrow,.cnr-updates-action i,.cnr-social-icons a{transition:none!important}}

/* V93 - Opening logo in place of text */
.cnr-v54-intro-logo{display:block;width:clamp(140px,20vw,245px);height:auto;max-height:170px;object-fit:contain;animation:cnrV54Brand .55s ease both}
@media(max-width:600px){.cnr-v54-intro-logo{width:155px}}


/* === v55-accessibility-theme.css === */
/* FIVE:CNR V55 — strict black / white / signature green */
:root{--cnr-black:#000000;--cnr-white:#ffffff;--cnr-green:#55C84A;color-scheme:dark}
html,body{background-color:#000!important;color:#fff}
/* Keep cinematic hero photo, but remove bluish/gray panel tints */
.navbar,.navbar.scrolled,.navbar.is-scrolled,.cnr-footer,.site-footer,.cnr-updates,.cnr-updates-inner,.legal-modal-box,.cnr-v54-intro{background-color:#000!important}
.cnr-updates-card,.news-card,.panel,.legal-modal-content{background-color:#080808!important}
.cnr-v54-intro{background:#000!important}
/* Only neutral grayscale overlays, no blue/green-black tint */
.legal-modal{background-color:rgba(0,0,0,.86)}
:where(a,button,[role="button"],input,select,textarea,[tabindex]):focus-visible{outline:2px solid #55C84A!important;outline-offset:4px!important;border-radius:3px}
:where(a,button,[role="button"]):focus:not(:focus-visible){outline:none}
.legal-modal[aria-hidden="true"]{display:none!important}
.legal-modal[aria-hidden="false"]{display:flex!important}
.legal-modal-box{max-height:min(86vh,780px);overflow:auto}
.cnr-skip-link{position:fixed;left:12px;top:12px;z-index:100000;background:#55C84A;color:#000;padding:12px 16px;font:700 13px Inter,Arial,sans-serif;transform:translateY(-170%)}
.cnr-skip-link:focus{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* === v56-fades.css === */
/* V56: bring back cinematic top and bottom fades, neutral black palette. */
.hero::after {
  content:""!important;display:block!important;
  inset:auto 0 0!important;top:auto!important;
  height:clamp(140px,23%,260px)!important;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.20) 25%,rgba(0,0,0,.65) 62%,#000 100%)!important;
  pointer-events:none!important;
}
.cnr-updates {
  background:linear-gradient(to bottom,#000 0%,#080808 18%,#080808 67%,#000 100%)!important;
  border-top:0!important;border-bottom:0!important;
  position:relative!important;
}
.cnr-updates::before {
  content:""!important;display:block!important;
  position:absolute!important;inset:0 0 auto!important;
  height:clamp(65px,10vw,140px)!important;
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0) 100%)!important;
  opacity:1!important;pointer-events:none!important;z-index:1!important;
}
.cnr-updates::after {
  content:""!important;display:block!important;
  position:absolute!important;inset:auto 0 0!important;
  height:clamp(100px,15vw,195px)!important;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.30) 43%,#000 100%)!important;
  pointer-events:none!important;z-index:1!important;
}
.cnr-updates-inner{position:relative!important;z-index:2!important}
.cnr-footer{background:#000!important;border-top:0!important}
/* Fade the skyline in gradually from the black junction. */
.cnr-footer::before{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.75) 32%,#000 53%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.75) 32%,#000 53%)!important;
}
@media(max-width:600px){.cnr-updates::before{height:65px!important}.cnr-updates::after{height:90px!important}.hero::after{height:145px!important}}


/* === v57-updates-seam-fix.css === */
/* V57: remove the rectangular grey patch behind the NELER OLUYOR copy.
   Keep cinematic transitions on the full-width section boundaries only. */
.cnr-updates {
  background:#000000!important;
  background-image:none!important;
  border:0!important;
}
.cnr-updates-inner,
.cnr-updates-copy,
.cnr-updates-content,
.cnr-updates-text {
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
/* The top fade lives at the bottom of the full-width hero. */
.hero::after {
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 28%,rgba(0,0,0,.72) 69%,#000 100%)!important;
}
/* A full-width bottom fade, without any rectangular content backdrop. */
.cnr-updates::before {
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0) 100%)!important;
}
.cnr-updates::after {
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 48%,#000 100%)!important;
}


/* === v58-hero-typography.css === */
/* V58 — hero typography only; no box, border or glow behind the headline. */
.hero .hero-content{width:min(690px,calc(100% - 70px))!important;max-width:690px!important;box-sizing:border-box!important;padding-top:clamp(105px,12vh,150px)!important;padding-bottom:clamp(115px,15vh,190px)!important;}
.hero .hero-title{margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;transform:none!important;}
.hero .cnr-hero-eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 21px;color:#55C84A;font-family:Inter,Arial,sans-serif;font-weight:800;font-size:11px;letter-spacing:1.3px;line-height:1.4;}
.hero .cnr-hero-rule{display:block;flex:0 0 24px;height:2px;background:#55C84A;}
.hero .five-title{font-size:clamp(42px,4.25vw,70px)!important;line-height:1.055!important;letter-spacing:-.052em!important;margin:0!important;max-width:690px!important;overflow-wrap:normal!important;}
.hero .five-subtitle{margin:22px 0 0!important;font-size:clamp(12px,1.06vw,15px)!important;letter-spacing:.65px!important;line-height:1.5!important;color:#fff!important;}
.hero .description{margin-top:25px!important;margin-bottom:0!important;max-width:570px!important;}
.hero .description p{font-size:14px!important;line-height:1.6!important;color:#a6adb4!important;}
.hero .hero-buttons{margin-top:22px!important;}
@media(max-width:700px){.hero .hero-content{width:calc(100% - 44px)!important;max-width:100%!important;margin:0 22px!important;padding-top:88px!important;padding-bottom:110px!important;}.hero .five-title{font-size:clamp(34px,8vw,54px)!important;letter-spacing:-.045em!important;}.hero .cnr-hero-eyebrow{font-size:10px;margin-bottom:18px;letter-spacing:.75px;}.hero .five-subtitle{margin-top:17px!important;font-size:12px!important;}.hero .description{margin-top:18px!important;}.hero .hero-buttons{margin-top:18px!important;}}
@media(max-width:390px){.hero .five-title{font-size:clamp(30px,8.15vw,36px)!important;}}


/* === v60-hero-balance.css === */
/* V60 — balanced, unboxed hero composition */
@media (min-width: 701px) {
  .hero .hero-content {
    padding-top: clamp(158px, 19vh, 205px) !important;
    padding-bottom: clamp(85px, 11vh, 125px) !important;
  }
}
.hero .hero-title,
.hero .hero-buttons { margin-left:0!important; padding-left:0!important; }
.hero .five-title { line-height:1.105!important; }
.hero .five-subtitle { margin-top:25px!important; }
.hero .hero-buttons { margin-top:18px!important; }
/* A gentle full-bleed darkening over the left of the image, never a rectangle. */
.hero::before {
  background-image:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.54) 24%,rgba(0,0,0,.19) 52%,rgba(0,0,0,0) 78%),url('../../image/banner.jpg')!important;
}
.hero-buttons .play-button { border-left-color:#55C84A!important; }
.hero-buttons .play-button:hover,
.hero-buttons .play-button:focus-visible { border-left-color:#55C84A!important; }
@media (max-width:700px) {
 .hero .hero-content {padding-top:98px!important;padding-bottom:115px!important;}
 .hero .five-title {line-height:1.09!important;}
 .hero .five-subtitle {margin-top:20px!important;}
 .hero .hero-buttons {margin-top:18px!important;}
 .hero::before {background-image:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.52) 65%,rgba(0,0,0,.26)),url('../../image/banner.jpg')!important;}
}


/* === v62-layout-performance.css === */
/* FIVE:CNR V62 — restrained layout and performance refinements */
:root{--cnr-v62-green:#55C84A}
/* Keep the cinematic hero, but eliminate unnecessary empty space below its content. */
@media(min-width:901px){
 .hero{height:auto!important;min-height:clamp(625px,78vh,790px)!important}
 .hero .hero-content{padding-top:clamp(135px,16vh,175px)!important;padding-bottom:clamp(78px,9vh,105px)!important}
 .cnr-updates{padding-top:58px!important;padding-bottom:66px!important}
 .cnr-updates-inner{align-items:center!important;gap:clamp(32px,4vw,58px)!important}
 .cnr-updates-intro{align-self:center!important}
 .cnr-updates-links{align-items:stretch!important}
 .cnr-updates-card{height:100%;box-sizing:border-box}
}
/* A hairline between navigation and the photo; no colored band. */
.hero .navbar{border-bottom:1px solid rgba(255,255,255,.095)!important}
/* The heading animates once, subtly, without altering the layout. */
@keyframes cnrV62TitleEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero .five-title{animation:cnrV62TitleEnter .62s cubic-bezier(.2,.7,.2,1) both}
.hero .five-subtitle{animation:cnrV62TitleEnter .62s cubic-bezier(.2,.7,.2,1) .12s both}
/* Keep CTA's existing sizing; improve feedback without any jump. */
.hero-buttons .play-button{border:1px solid rgba(85,200,74,.23)!important;border-left:3px solid var(--cnr-v62-green)!important;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.hero-buttons .play-button:hover,.hero-buttons .play-button:focus-visible{border-color:rgba(85,200,74,.65)!important;border-left-color:var(--cnr-v62-green)!important;background-color:rgba(5,13,7,.94)!important;box-shadow:0 0 0 1px rgba(85,200,74,.09)!important}
.hero-buttons .play-button .discord-cta-arrow{transition:transform .22s ease,color .22s ease!important}
.hero-buttons .play-button:hover .discord-cta-arrow,.hero-buttons .play-button:focus-visible .discord-cta-arrow{transform:translateX(3px)!important}
/* Balanced footer columns and unobtrusive social controls. */
.cnr-footer-top{column-gap:clamp(22px,3.5vw,64px)!important;row-gap:32px!important;align-items:start!important}
.cnr-footer-group{min-width:0}
.cnr-footer-group a{line-height:1.65}
.cnr-social-icons{gap:10px!important}
.cnr-social-icons a{transition:border-color .2s ease,background-color .2s ease,color .2s ease!important}
.cnr-footer-copy{line-height:1.6}
@media(min-width:701px) and (max-width:900px){
 .hero{height:auto!important;min-height:680px!important}
 .hero .hero-content{padding-bottom:95px!important}
 .cnr-updates{padding-top:58px!important;padding-bottom:65px!important}
 .cnr-updates-inner{gap:32px!important;align-items:center!important}
}
@media(max-width:700px){
 .hero{height:auto!important;min-height: min(760px, 92svh)!important}
 .hero .hero-content{padding-top:100px!important;padding-bottom:100px!important}
 .cnr-updates{padding-top:52px!important;padding-bottom:58px!important}
 .cnr-updates-inner{gap:25px!important}
 .cnr-updates-card{min-height:190px!important}
 .cnr-footer-top{row-gap:28px!important}
 .cnr-social-icons a{min-width:40px;min-height:40px}
 /* Prevent costly off-screen animation and overscroll on small devices. */
 .cnr-updates-card{transition:border-color .18s ease!important}
 .cnr-updates-card:hover{transform:none!important}
 .hero::before{background-position:center center!important}
}
@media(max-width:420px){
 .hero .hero-content{padding-top:86px!important;padding-bottom:85px!important}
 .cnr-updates{padding-top:44px!important;padding-bottom:50px!important}
 .cnr-footer-inner{padding-inline:18px!important}
}
@media(prefers-reduced-motion:reduce){
 .hero .five-title,.hero .five-subtitle{animation:none!important}
 .hero-buttons .play-button,.hero-buttons .play-button .discord-cta-arrow,.cnr-social-icons a{transition:none!important}
}


/* === v63-fullscreen-hero.css === */
/* V63 — The hero occupies the initial viewport; updates appear after scrolling. */
/* Loaded last to override previous hero-height rules without changing the artwork. */
.hero {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
}
/* The next section remains in normal document flow, directly after the hero. */
.cnr-updates { position: relative; }
@media (max-width: 700px) {
  .hero {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
  }
  /* If content exceeds a short phone screen, let it expand naturally. */
  .hero .hero-content { box-sizing: border-box; }
}


/* === v64-hero-position.css === */
/* V64 — move the complete hero copy down, without affecting the full-screen image. */
@media (min-width: 701px) {
  .hero .hero-content {
    padding-top: clamp(258px, calc(19vh + 110px), 315px) !important;
  }
}
/* Smaller viewports retain readable spacing and no forced displacement. */
@media (max-width: 700px) {
  .hero .hero-content { padding-top: 98px !important; }
}


/* === v65-scroll-responsive.css === */
/* FIVE:CNR V65 — scroll cue, scroll reveal and short-viewport/mobile support */
.hero{position:relative!important}
.cnr-scroll-hint{position:absolute;left:50%;bottom:clamp(18px,3.5vh,34px);transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.77);text-decoration:none;font:700 10px/1.3 Inter,Arial,sans-serif;letter-spacing:2px;transition:color .2s ease;white-space:nowrap}
.cnr-scroll-hint i{font-size:15px;color:#55C84A;animation:cnrV65Down 2.2s ease-in-out infinite}
.cnr-scroll-hint:hover,.cnr-scroll-hint:focus-visible{color:#fff}
.cnr-scroll-hint:focus-visible{outline:2px solid #55C84A;outline-offset:7px;border-radius:2px}
@keyframes cnrV65Down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* Reveal only after JS has confirmed IntersectionObserver support. No blank cards without JS. */
html.cnr-v65-observing .cnr-updates-intro,html.cnr-v65-observing .cnr-updates-card{opacity:0;transform:translateY(16px);transition:opacity .52s ease,transform .52s cubic-bezier(.2,.7,.2,1)}
html.cnr-v65-observing .cnr-updates-intro.cnr-v65-visible,html.cnr-v65-observing .cnr-updates-card.cnr-v65-visible{opacity:1;transform:translateY(0)}
html.cnr-v65-observing .cnr-updates-card:nth-child(2){transition-delay:.09s}
/* Keep text inside the viewport on shorter laptop screens. */
@media(min-width:701px) and (max-height:760px){
 .hero .hero-content{padding-top:clamp(155px,24vh,205px)!important;padding-bottom:105px!important}
 .hero .five-title{font-size:clamp(39px,6.8vh,67px)!important;line-height:1.02!important}
 .cnr-scroll-hint{bottom:14px}
}
@media(min-width:701px) and (max-height:570px){
 .hero{min-height:570px!important}
 .hero .hero-content{padding-top:135px!important;padding-bottom:75px!important}
 .cnr-scroll-hint{bottom:9px}
}
/* The photo uses a more useful horizontal crop on narrow phones; no duplicate images. */
@media(max-width:700px){
 .hero{min-height:100svh!important}
 .hero::before{background-position:58% center!important}
 .hero .hero-content{padding-top:clamp(112px,18svh,180px)!important;padding-bottom:120px!important}
 .cnr-scroll-hint{bottom:18px;font-size:9px}
}
@media(max-width:430px){
 .hero::before{background-position:54% center!important}
 .hero .hero-content{padding-top:clamp(105px,17svh,150px)!important;padding-bottom:115px!important}
 .hero .five-title{font-size:clamp(34px,10vw,52px)!important;overflow-wrap:normal}
}
@media(max-width:700px) and (max-height:650px){
 .hero{min-height:650px!important}
 .hero .hero-content{padding-top:104px!important;padding-bottom:108px!important}
}
@media(prefers-reduced-motion:reduce){
 .cnr-scroll-hint i{animation:none!important}
 html.cnr-v65-observing .cnr-updates-intro,html.cnr-v65-observing .cnr-updates-card{opacity:1!important;transform:none!important;transition:none!important}
}


/* === v66-scroll-cta-fix.css === */
/* V66: Keep the scroll cue on the hero only; unify CTA's two green strips. */
.cnr-scroll-hint{gap:6px!important;color:#fff!important;transition:opacity .22s ease,visibility .22s ease!important}
.cnr-scroll-hint.cnr-scroll-hint-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* Older themes draw a second strip with ::before. The actual left border is the only accent. */
.hero-buttons .play-button::before{content:none!important;display:none!important}
.hero-buttons .play-button{border-left:3px solid #55C84A!important}
.hero-buttons .play-button:hover,.hero-buttons .play-button:focus-visible{border-left-color:#55C84A!important}
@media(prefers-reduced-motion:reduce){.cnr-scroll-hint{transition:none!important}}


/* === v67-brand-green.css === */
/* FIVE:CNR V67 - Single consistent brand green (#55C84A) */
:root { --five-green: #55C84A; --cnr-accent: #55C84A; }
/* Keep the hero Discord CTA identical to the update cards: one left accent only. */
.hero-buttons .play-button {
  position: relative;
  border: 1px solid #202820 !important;
  border-left: 3px solid #55C84A !important;
  box-shadow: none !important;
}
.hero-buttons .play-button::before,
.hero-buttons .play-button::after { content: none !important; display: none !important; }
.hero-buttons .play-button:hover,
.hero-buttons .play-button:focus-visible {
  border-left-color: #55C84A !important;
  box-shadow: none !important;
}
/* Preserve original dark cards and their exact solid-green left edge. */
.cnr-update-card, .update-card { border-left-color: #55C84A !important; }
.cnr-update-card::before, .update-card::before { background-color: #55C84A; }
/* Countdown bar and prominent icon accents */
.cnr-toast__progress, .cnr-toast-progress { background: #55C84A !important; opacity: 1 !important; }
.discord-cta-arrow, .cnr-updates-icon { color: #55C84A !important; }


/* === v68-actual-edge-fix.css === */
/* FIVE:CNR V68 - verified selectors for actual site markup */
:root { --five-green:#55C84A; --cnr-accent:#55C84A; }
/* The CTA now uses the EXACT inset green strip geometry of the Wiki/Discord cards.
   No green border underneath it, preventing a double-line appearance. */
.hero-buttons a.play-button,
.hero-buttons a.play-button:hover,
.hero-buttons a.play-button:focus-visible {
  position:relative!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-left:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
}
.hero-buttons a.play-button::before,
.hero-buttons a.play-button:hover::before,
.hero-buttons a.play-button:focus-visible::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:12px!important;
  bottom:12px!important;
  left:0!important;
  right:auto!important;
  width:3px!important;
  height:auto!important;
  border-radius:0 2px 2px 0!important;
  background:#55C84A!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
}
.hero-buttons a.play-button::after {content:none!important;display:none!important;}
.cnr-updates-links .cnr-updates-card::before {background:#55C84A!important;opacity:1!important;}
.cnr-updates-links .cnr-updates-card:hover::before {background:#55C84A!important;}
.cnr-toast__progress,.cnr-toast-progress {background:#55C84A!important;opacity:1!important;}
.hero-buttons .discord-cta-arrow,.cnr-updates-action,.cnr-updates-icon {color:#55C84A!important;}


/* === v69-legal-black.css === */
/* FIVE:CNR V69 — Gizlilik Politikasi ve Kullanim Sartlari tam siyah HUD */
/* Her iki pencerenin kutusu ve icerigi ayni siyah zeminde. */
#privacyModal .legal-modal-box,
#termsModal .legal-modal-box,
#privacyModal .legal-modal-content,
#termsModal .legal-modal-content {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
}
#privacyModal .legal-modal-box,
#termsModal .legal-modal-box {
  border-color: #242424 !important;
}
#privacyModal .legal-modal-box::before,
#termsModal .legal-modal-box::before {
  background: #55C84A !important;
}
#privacyModal .legal-modal-content,
#termsModal .legal-modal-content {
  border-top-color: #202020 !important;
  scrollbar-color: #55C84A #000000 !important;
}
#privacyModal .legal-modal-content::-webkit-scrollbar-track,
#termsModal .legal-modal-content::-webkit-scrollbar-track {
  background: #000000 !important;
}
#privacyModal .legal-modal-content::-webkit-scrollbar-thumb,
#termsModal .legal-modal-content::-webkit-scrollbar-thumb {
  background: #55C84A !important;
}


/* === v70-polish.css === */
/* FIVE:CNR V70 — restrained interactions; brand green #55C84A */
.hero{isolation:isolate}
.cnr-v70-lights{position:absolute;inset:76px 0 0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse 24% 30% at 56% 12%,rgba(19,65,210,.075),transparent 78%),radial-gradient(ellipse 23% 27% at 15% 13%,rgba(205,25,38,.055),transparent 78%);animation:cnrV70Lights 9s ease-in-out infinite alternate}
@keyframes cnrV70Lights{0%{opacity:.22}45%{opacity:.58}100%{opacity:.28}}
.cnr-scroll-hint{transition:opacity .35s ease,visibility .35s ease,color .2s ease!important}
.cnr-scroll-hint.cnr-scroll-hint-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.hero-buttons .play-button .discord-cta-arrow{transition:transform .22s ease!important}
.hero-buttons .play-button:hover .discord-cta-arrow,.hero-buttons .play-button:focus-visible .discord-cta-arrow{transform:translateX(4px)!important}
/* Keep the green stripe untouched and animate only the card surface. */
.cnr-updates-links .cnr-updates-card{transition:opacity .45s ease,transform .25s ease,border-color .2s ease,box-shadow .25s ease!important}
.cnr-updates-links .cnr-updates-card.cnr-v65-visible:hover,.cnr-updates-links .cnr-updates-card.cnr-v65-visible:focus-visible{transform:translateY(-4px)!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important}
.cnr-updates-links .cnr-updates-card::before{background:#55C84A!important;box-shadow:none!important}
/* Nav underline width eases on hover, active page, and keyboard focus. */
@media(min-width:821px){.navbar .nav-menu a::after{transition:width .3s cubic-bezier(.22,.7,.25,1),bottom .24s ease!important}}
.cnr-back-top{transition:opacity .25s ease,visibility .25s ease,transform .25s ease,border-color .22s ease,background-color .22s ease!important}
.cnr-back-top.is-visible:hover{transform:translateY(-3px)!important;border-color:#55C84A!important}
.cnr-back-top i{transition:transform .22s ease}
.cnr-back-top:hover i{transform:translateY(-2px)}
/* Mobile: no costly lighting animation; preserve existing hero crop. */
@media(max-width:820px){.cnr-v70-lights{display:none}.cnr-updates-links .cnr-updates-card:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){.cnr-v70-lights{display:none!important}.cnr-scroll-hint,.cnr-back-top,.cnr-back-top i,.hero-buttons .play-button .discord-cta-arrow,.cnr-updates-links .cnr-updates-card,.navbar .nav-menu a::after{transition:none!important;animation:none!important}}


/* === v71-hero-alignment.css === */
/* V71: Align headline, subtitle and Discord CTA on the exact same left edge. */
.hero .hero-content .hero-title,
.hero .hero-content .hero-buttons {
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}
.hero .hero-content .five-title,
.hero .hero-content .five-subtitle {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
.hero .hero-content .hero-buttons {
  width: 100%;
  justify-content: flex-start !important;
  margin-top: 17px !important;
}
.hero .hero-content .hero-buttons .play-button {
  margin-left: 0 !important;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .hero .hero-content .hero-buttons { margin-top: 16px !important; }
}


/* === v72-left-alignment.css === */
/* V72: Hero copy begins on the same vertical line as the navbar FIVE:CNR logo. */
@media (min-width: 821px) {
  .hero .hero-content {
    margin-left: clamp(20px, 4vw, 70px) !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 820px) {
  .hero .hero-content {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: calc(100% - 40px) !important;
  }
}
/* Maintain identical starting edges for the subtitle and CTA. */
.hero .hero-content .hero-title,
.hero .hero-content .hero-buttons,
.hero .hero-content .five-title,
.hero .hero-content .five-subtitle {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* === v73-hero-unified-alignment.css === */
/* V73: one shared left alignment reference for all hero copy. */
.hero .hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.hero .hero-content > .hero-title,
.hero .hero-content > .hero-buttons {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  transform: none !important;
  width: 100% !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.hero .hero-content .five-title,
.hero .hero-content .five-subtitle {
  display: block !important;
  position: relative !important;
  left: 0 !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  text-indent: 0 !important;
  transform: none !important;
  text-align: left !important;
}
.hero .hero-content > .hero-buttons {
  display: flex !important;
  justify-content: flex-start !important;
}
.hero .hero-content > .hero-buttons > .play-button {
  margin-left: 0 !important;
  transform: none;
}


/* === v74-responsive-cache.css === */
/* V74: responsive alignment based on one shared page gutter. */
:root { --cnr-page-gutter: clamp(20px, 3.65vw, 78px); }
/* Match header wordmark and hero text without pixel nudges. */
.hero .navbar { padding-left: var(--cnr-page-gutter) !important; padding-right: var(--cnr-page-gutter) !important; box-sizing: border-box !important; }
.hero .hero-content { box-sizing: border-box !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; padding-left: var(--cnr-page-gutter) !important; padding-right: var(--cnr-page-gutter) !important; margin-left: 0 !important; margin-right: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.hero .hero-content > .hero-title, .hero .hero-content > .hero-buttons { width: auto !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; left: 0 !important; transform: none !important; }
.hero .hero-content .five-title, .hero .hero-content .five-subtitle { margin-left: 0 !important; padding-left: 0 !important; left: 0 !important; text-indent: 0 !important; }
.hero .hero-content > .hero-buttons { justify-content: flex-start !important; }
/* Keep copy and CTA visible on shorter laptops; never clip text. */
@media (max-height: 740px) and (min-width: 769px) { .hero .hero-content { top: auto !important; bottom: auto !important; } .hero .five-title { font-size: clamp(36px, 6.5vh, 70px) !important; line-height: 1.03 !important; } }
@media (max-width: 768px) { :root { --cnr-page-gutter: clamp(18px, 5vw, 28px); } .hero .hero-content { padding-left: var(--cnr-page-gutter) !important; padding-right: var(--cnr-page-gutter) !important; } .hero .five-title { font-size: clamp(35px, 9vw, 62px) !important; } }
@media (max-width: 360px) { .hero .five-title { font-size: 33px !important; } }


/* === v75-hero-visibility-fix.css === */
/* V75: Fail-safe hero visibility across browsers and reduced-motion settings.
   The previous opacity:0 + forwards animations could leave content invisible. */
.hero .hero-content,
.hero .hero-content > .hero-title,
.hero .hero-content > .hero-buttons,
.hero .hero-content .five-title,
.hero .hero-content .five-subtitle,
.hero .hero-content .description,
.hero .hero-content .stats,
.hero .hero-content .play-button {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Do not rely on keyframes to reveal essential content. Preserve existing layout. */
.hero .hero-content > .hero-title,
.hero .hero-content > .hero-buttons,
.hero .hero-content .five-title,
.hero .hero-content .five-subtitle,
.hero .hero-content .description,
.hero .hero-content .stats {
  animation: none !important;
}


/* === v76-responsive-hero-height.css === */
/* V76: cap cinematic hero height across displays, without changing the image. */
@media (min-width: 769px) {
  .hero {
    height: clamp(560px, 78svh, 760px) !important;
    min-height: 560px !important;
  }
  .hero .hero-content {
    padding-top: clamp(170px, 27svh, 255px) !important;
    padding-bottom: 85px !important;
  }
}
@media (min-width: 769px) and (max-height: 800px) {
  .hero {
    height: clamp(560px, 78svh, 620px) !important;
    min-height: 560px !important;
  }
  .hero .hero-content {
    padding-top: clamp(155px, 25svh, 195px) !important;
    padding-bottom: 65px !important;
  }
}
@media (min-width: 769px) and (max-height: 620px) {
  .hero { height: auto !important; min-height: 560px !important; }
  .hero .hero-content { padding-top: 140px !important; padding-bottom: 100px !important; }
}
@media (min-width: 701px) and (max-width: 768px) {
  .hero { height: auto !important; min-height: 620px !important; }
  .hero .hero-content { padding-top: 170px !important; padding-bottom: 105px !important; }
}
@media (max-width: 700px) {
  .hero { height: auto !important; min-height: 620px !important; }
  .hero .hero-content { padding-top: clamp(105px, 16svh, 150px) !important; padding-bottom: 115px !important; }
  .hero::before { background-position: 58% center !important; }
}
@media (max-width: 430px) {
  .hero { min-height: 580px !important; }
  .hero::before { background-position: 54% center !important; }
}
/* Updates stay directly after the hero, without a blank spacer. */
.cnr-updates { margin-top: 0 !important; }


/* === v77-hero-center-green.css === */
/* V77 — vertically balance the entire left-side copy as a single group. */
@media (min-width: 769px) and (min-height: 621px) {
  .hero { position: relative !important; }
  .hero .hero-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 55px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    pointer-events: none;
  }
  .hero .hero-content > * { pointer-events: auto; }
}
/* Keep the navbar-aligned left edge and color the last headline line. */
.hero .hero-content .five-title .cnr-safe-line {
  color: #55C84A !important;
}
/* The short-screen/mobile layouts retain the existing natural document flow. */


/* === v78-hero-clean.css === */
/* V78 — requested headline palette and no scroll hint. */
.hero .hero-content .five-title .cnr-city-line { color: #55C84A !important; }
.hero .hero-content .five-title .cnr-kimse-line { color: #fff !important; }
.hero .hero-content .five-title .cnr-safe-line { color: #55C84A !important; }
.cnr-scroll-hint { display: none !important; }


/* === v79-hero-copy.css === */
/* FIVE:CNR V79 — three-line headline and compact subtitle. */
.hero .hero-content .five-title .cnr-city-line { color: #FFFFFF !important; }
.hero .hero-content .five-title .cnr-kimse-line { color: #55C84A !important; }
.hero .hero-content .five-title .cnr-safe-line { color: #FFFFFF !important; }
.hero .hero-content .five-title { font-size: clamp(35px, 4.7vw, 76px) !important; line-height: 1.04 !important; }
.hero .hero-content .cnr-v79-description {
  margin: 17px 0 20px !important; padding: 0 !important;
  color: #FFFFFF; font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.65; font-weight: 400; text-align: left;
  opacity: 1 !important; transform: none !important;
}
.hero .hero-content .hero-buttons { margin-top: 0 !important; }
@media (max-width: 768px) {
 .hero .hero-content .five-title { font-size: clamp(27px, 6.5vw, 48px) !important; }
 .hero .hero-content .cnr-v79-description { font-size: 13px; margin: 13px 0 17px !important; }
}
@media (max-width: 390px) {
 .hero .hero-content .five-title { font-size: clamp(24px, 6.25vw, 28px) !important; }
}
@media (max-height: 680px) and (min-width: 769px) {
 .hero .hero-content .five-title { font-size: clamp(32px, 6vh, 58px) !important; }
 .hero .hero-content .cnr-v79-description { margin: 9px 0 12px !important; }
}


/* === v80-hero-typography.css === */
/* V80 — compact cinematic hero typography; preserves requested palette. */
.hero .hero-content .five-title {
  font-size: clamp(34px, 3.2vw, 52px) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.5px !important;
  max-width: min(590px, 100%) !important;
  margin: 0 !important;
}
.hero .hero-content .five-title .cnr-city-line { color: #fff !important; }
.hero .hero-content .five-title .cnr-kimse-line { color: #55C84A !important; }
.hero .hero-content .five-title .cnr-safe-line { color: #fff !important; }
.hero .hero-content .cnr-v79-description {
  margin: 20px 0 19px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #e7e7e7 !important;
}
@media (max-width: 1100px) and (min-width: 769px) {
 .hero .hero-content .five-title { font-size: clamp(31px, 3.5vw, 42px) !important; }
}
@media (max-width: 768px) {
 .hero .hero-content .five-title { font-size: clamp(25px, 5.3vw, 39px) !important; line-height: 1.16 !important; letter-spacing: -0.3px !important; }
 .hero .hero-content .cnr-v79-description { font-size: 13px !important; margin: 16px 0 !important; }
}
@media (max-width: 390px) {
 .hero .hero-content .five-title { font-size: clamp(22px, 5.8vw, 27px) !important; }
}


/* === v81-four-line-title.css === */
/* FIVE:CNR V81 — four-line title with only HIRSIZ POLİS highlighted. */
.hero .hero-content .five-title .cnr-city-line,
.hero .hero-content .five-title .cnr-kimse-line,
.hero .hero-content .five-title .cnr-safe-line { color: #FFFFFF !important; }
.hero .hero-content .five-title .cnr-robbers-line { color: #55C84A !important; }
.hero .hero-content .five-title { line-height: 1.08 !important; }
@media (max-width:768px) {
  .hero .hero-content .five-title { line-height: 1.12 !important; }
}


/* === v82-hero-fixes.css === */
/* V82 — highlight YAŞAYIN, align Discord arrow, inline description. */
.hero .hero-content .five-title .cnr-safe-line { color:#55C84A !important; }
.hero .hero-buttons .play-button .discord-cta-arrow {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:26px !important; height:26px !important; flex:0 0 26px !important;
  margin-left:auto !important; padding:0 !important; line-height:1 !important;
  vertical-align:middle !important;
}
.hero .hero-buttons .play-button .discord-cta-arrow svg { display:block; width:22px; height:22px; }
.hero .hero-content .cnr-v79-description { max-width:700px !important; }
@media (max-width:768px) { .hero .hero-content .cnr-v79-description { max-width:100% !important; } }


/* === v83-cinematic-overlay.css === */
/* FIVE:CNR V83 — cinematic treatment, preserving the original sharp banner. */
.hero .cnr-v83-cinematic-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.35) 24%, rgba(0,0,0,.14) 47%, rgba(0,0,0,.025) 78%),
    radial-gradient(ellipse 95% 100% at 50% 44%, transparent 47%, rgba(0,0,0,.17) 85%, rgba(0,0,0,.29) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.08));
}
/* Header and text remain above the visual treatment. */
.hero .hero-content { z-index: 5; }
@media (max-width: 768px) {
  .hero .cnr-v83-cinematic-overlay {
    background:
      linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.22) 72%,rgba(0,0,0,.08)),
      linear-gradient(0deg,rgba(0,0,0,.22),transparent 45%);
  }
}


/* === v84-subtle-banner-blur.css === */
/* FIVE:CNR V84 — subtle blur on the banner only. Text, CTA and overlays remain crisp. */
.hero::before {
  -webkit-filter: blur(2px) !important;
  filter: blur(2px) !important;
}
@media (max-width: 768px) {
  .hero::before {
    -webkit-filter: blur(1.5px) !important;
    filter: blur(1.5px) !important;
  }
}


/* === v91-footer-legal.css === */
/* V91: Social icon layout and legal heading refinement */
.cnr-footer-follow .cnr-social-icons {
  display: grid !important;
  grid-template-columns: repeat(2, 47px);
  gap: 10px !important;
  justify-content: start;
  align-items: center;
}
.cnr-footer-follow .cnr-social-icons a { width:47px; height:47px; }
.cnr-footer-follow .cnr-social-icons a[aria-label="Discord"] {grid-column:1;grid-row:1}
.cnr-footer-follow .cnr-social-icons a[aria-label="Instagram"] {grid-column:2;grid-row:1}
.cnr-footer-follow .cnr-social-icons a[aria-label="TikTok"] {grid-column:2;grid-row:2}
.cnr-footer-follow .cnr-social-icons a[aria-label="YouTube"] {grid-column:1;grid-row:2}
#privacyModal .legal-modal-label,
#termsModal .legal-modal-label {
  color:#929a96 !important;
  font-size:11px !important;
  letter-spacing:1.3px;
  margin-top:8px;
  margin-bottom:18px;
  text-align:center;
}

/* V92: Place FIVE:CNR immediately below legal modal headings, left aligned */
#privacyModal .legal-modal-box > h2,
#termsModal .legal-modal-box > h2 {
  margin-bottom: 5px !important;
}
#privacyModal .legal-modal-label,
#termsModal .legal-modal-label {
  display: block !important;
  text-align: left !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #929a96 !important;
}

/* FIVE:CNR V7 — ortak masaustu navigasyon geometrisi */
@media (min-width: 901px) {
  .navbar, .wiki-navbar {
    height: 76px !important; min-height: 76px !important;
    padding: 0 clamp(20px, 3.65vw, 70px) !important;
    box-sizing: border-box !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    background: #050706 !important;
  }
  .navbar .top-logo, .wiki-navbar .top-logo {
    flex-shrink: 0 !important; transform: scale(1.12) !important;
    transform-origin: left center !important;
  }
  .navbar .nav-menu, .wiki-navbar .nav-menu {
    display: flex !important; align-items: center !important;
    gap: clamp(17px, 2vw, 35px) !important;
    height: 100% !important; overflow: visible !important;
  }
  .navbar .nav-menu a, .wiki-navbar .nav-menu a {
    position: relative !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    height: 100% !important; padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important; font-weight: 900 !important;
    letter-spacing: 1.1px !important; line-height: 1 !important;
    white-space: nowrap !important; text-decoration: none !important;
    color: #fff !important;
  }
  .navbar .nav-menu a:hover, .wiki-navbar .nav-menu a:hover,
  .navbar .nav-menu a[aria-current="page"], .wiki-navbar .nav-menu a[aria-current="page"] {
    color: #55C84A !important;
  }
  .navbar .nav-menu a::after, .wiki-navbar .nav-menu a::after {
    content: "" !important; position: absolute !important;
    left: 50% !important; top: auto !important; bottom: 10px !important;
    height: 2px !important; width: 0 !important;
    border-radius: 2px !important; background: #55C84A !important;
    transform: translateX(-50%) !important;
    transition: width .24s ease !important;
  }
  .navbar .nav-menu a:hover::after, .wiki-navbar .nav-menu a:hover::after { width: 50% !important; }
  .navbar .nav-menu a[aria-current="page"]::after,
  .wiki-navbar .nav-menu a[aria-current="page"]::after { width: 38% !important; }
}

/* V8: shared pixel-aligned header across home and wiki */
@media (min-width:901px){
  .hero .navbar, body > .wiki-navbar {
    height:76px!important;min-height:76px!important;
    padding:0 60px!important; margin:0!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    width:100%!important;box-sizing:border-box!important;background:#000!important;
    border-bottom:1px solid #191c1b!important;
  }
  .hero .navbar .top-logo, body > .wiki-navbar .top-logo {transform:none!important;display:flex!important;align-items:center!important;}
  .hero .navbar .brand-wordmark,body > .wiki-navbar .brand-wordmark{font-family:Inter,Arial,sans-serif!important;font-size:23px!important;font-weight:900!important;letter-spacing:-1.3px!important;line-height:1!important;}
  .hero .navbar .nav-menu,body > .wiki-navbar .nav-menu{height:100%!important;display:flex!important;align-items:center!important;gap:30px!important;flex:0 0 auto!important;}
  .hero .navbar .nav-menu a,body > .wiki-navbar .nav-menu a{height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;padding:0!important;margin:0!important;font-family:Arial,Helvetica,sans-serif!important;font-size:11px!important;font-weight:900!important;letter-spacing:1.1px!important;line-height:1!important;white-space:nowrap!important;}
  .hero .navbar .nav-menu a::after,body > .wiki-navbar .nav-menu a::after{content:""!important;position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:10px!important;width:0!important;height:2px!important;transform:translateX(-50%)!important;background:#55C84A!important;border-radius:2px!important;transition:width .24s ease!important;}
  .hero .navbar .nav-menu a[aria-current="page"]::after,body > .wiki-navbar .nav-menu a[aria-current="page"]::after{width:38%!important;}
  .hero .navbar .nav-menu a:hover::after,body > .wiki-navbar .nav-menu a:hover::after{width:50%!important;}
}

html{scrollbar-gutter:stable;}

/* V14 — Ana sayfa okuma ilerleme çizgisi */
.cnr-reading-progress{position:fixed;top:76px;left:0;width:100%;height:2px;z-index:990;pointer-events:none;background:transparent}
.cnr-reading-progress-bar{display:block;width:0;height:100%;background:#55C84A;transition:width .08s linear}
@media(max-width:900px){.cnr-reading-progress{top:70px}}
@media(prefers-reduced-motion:reduce){.cnr-reading-progress-bar{transition:none}}

/* Ana sayfa üst sol FIVE:CNR yazısını Wiki ile birebir eşleştir */
.hero .navbar .top-logo{transform:scale(1.12)!important;transform-origin:left center!important;display:inline-flex!important;align-items:center!important;min-width:max-content!important}
.hero .navbar .brand-wordmark{font-family:Arial,Helvetica,sans-serif!important;font-size:23px!important;font-weight:900!important;letter-spacing:-1.2px!important;line-height:1!important;color:#fff!important}
.hero .navbar .brand-colon,.hero .navbar .brand-cnr{color:#55C84A!important}
.hero .navbar .brand-cnr{letter-spacing:-.7px!important}
@media(max-width:700px){.hero .navbar .brand-wordmark{font-size:21px!important}}

/* FINAL FIX: Ana sayfa ust logo = Wiki ile ayni tipografi ve gercek olcu. */
.hero .navbar .top-logo{transform:none!important;transform-origin:left center!important}
.hero .navbar .top-logo .brand-wordmark{font-family:Inter,Arial,sans-serif!important;font-size:23px!important;font-weight:900!important;letter-spacing:-1.3px!important;line-height:1!important}
.hero .navbar .top-logo .brand-colon,.hero .navbar .top-logo .brand-cnr{color:#55C84A!important}
.hero .navbar .top-logo .brand-cnr{letter-spacing:inherit!important}
@media(max-width:680px){.hero .navbar .top-logo .brand-wordmark{font-size:20px!important}}

/* Logo tam esitleme: Wiki ve Ana Sayfa ayni font ve ayni olcu. */
.hero .navbar .top-logo,body > .wiki-navbar .top-logo{transform:none!important;transform-origin:left center!important;display:flex!important;align-items:center!important}
.hero .navbar .top-logo .brand-wordmark,body > .wiki-navbar .top-logo .brand-wordmark{font-family:Arial,Helvetica,sans-serif!important;font-size:23px!important;font-weight:900!important;letter-spacing:-1.3px!important;line-height:1!important;color:#fff!important}
.hero .navbar .top-logo .brand-colon,.hero .navbar .top-logo .brand-cnr,body > .wiki-navbar .top-logo .brand-colon,body > .wiki-navbar .top-logo .brand-cnr{color:#55C84A!important;letter-spacing:inherit!important}
@media(max-width:680px){.hero .navbar .top-logo .brand-wordmark,body > .wiki-navbar .top-logo .brand-wordmark{font-size:20px!important}}

/* V95: Discord CTA icon matches the Discord card icon size. */
.hero-buttons .play-button .discord-cta-icon i.fa-discord{font-size:18px!important;line-height:1!important;}
/* Keep header and green reading-progress line at a constant vertical position while scrolling. */
@media(min-width:901px){
 .hero .navbar.cnr-nav-scrolled{height:76px!important;min-height:76px!important;}
 .hero .navbar.cnr-nav-scrolled .nav-menu a::after,
 .hero .navbar.cnr-nav-scrolled .nav-menu a[aria-current="page"]::after{bottom:10px!important;}
 .cnr-reading-progress{top:76px!important;}
}
@media(min-width:821px) and (max-width:900px){
 .hero .navbar.cnr-nav-scrolled{height:70px!important;min-height:70px!important;}
 .cnr-reading-progress{top:70px!important;}
}





/* =============================================================
   FIVE:CNR FOOTER V101 — Cinematic Los Santos, BRAND #55C84A
   This single final block supersedes the historic footer versions.
   ============================================================= */
:root { --five-green:#55C84A; --cnr-accent:#55C84A; --cnr-green:#55C84A; --cnr-v62-green:#55C84A; }

/* Preserve the rest of the homepage, tighten only the footer handoff. */
.cnr-updates { padding-bottom:34px!important; }
.cnr-footer {
  display:block!important; position:relative!important; isolation:isolate!important;
  overflow:hidden!important; box-sizing:border-box!important;
  margin:0!important; padding:30px 0 0!important; border:0!important;
  background:#000!important; color:#fff!important;
}
/* Retire legacy SVG skyline/palm pseudo-elements. */
.cnr-footer::before,.cnr-footer::after { content:none!important; display:none!important; }
.cnr-footer-inner {
  position:relative!important; z-index:3!important;
  width:100%!important; max-width:1036px!important;
  margin:0 auto!important; padding:0 28px!important;
}
.cnr-footer-top {
  display:grid!important;
  grid-template-columns:minmax(240px,1.85fr) repeat(3,minmax(115px,1fr))!important;
  gap:clamp(22px,3vw,54px)!important; align-items:start!important;
  position:relative!important; z-index:3!important;
}
.cnr-footer-brand { min-width:0!important; }
/* Override inline V90 width restrictions without changing the source logo. */
.cnr-footer .cnr-footer-logo-image {
  display:inline-flex!important; align-items:center!important;
  width:138px!important; max-width:138px!important;
  height:auto!important; line-height:1!important;
  padding:0!important; margin:0!important;
  transition:filter .28s ease!important;
}
.cnr-footer .cnr-footer-logo-image img {
  display:block!important; width:100%!important; height:auto!important;
  object-fit:contain!important;
}
.cnr-footer .cnr-footer-logo-image:hover {filter:drop-shadow(0 0 9px rgba(85,200,74,.19))!important;}
.cnr-footer-group h3 { color:#55C84A!important; }
.cnr-footer-group>a {color:#d0d7d1!important;}
.cnr-footer-group>a:hover,.cnr-footer-group>a:focus-visible{color:#55C84A!important;}
.cnr-footer-follow .cnr-social-icons {display:grid!important;grid-template-columns:repeat(2,47px)!important;gap:10px!important;}
.cnr-footer-follow .cnr-social-icons a { 
  display:flex!important; align-items:center!important; justify-content:center!important;
  width:47px!important; height:47px!important; border-radius:9px!important;
  border:1px solid rgba(85,200,74,.22)!important;
  background:#0d1710!important; color:#eff5ef!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease!important;
}
.cnr-footer-follow .cnr-social-icons a:hover,
.cnr-footer-follow .cnr-social-icons a:focus-visible {
  transform:translateY(-3px)!important;
  border-color:#55C84A!important; background:#142719!important;
  color:#55C84A!important;
  box-shadow:0 3px 20px rgba(85,200,74,.15), inset 0 0 15px rgba(85,200,74,.07)!important;
}
.cnr-footer-follow .cnr-social-icons a:focus-visible,
.cnr-footer a:focus-visible {outline:2px solid #55C84A!important;outline-offset:3px!important;}
/* Preserve Discord / Instagram / YouTube / TikTok positions. */
.cnr-footer-follow .cnr-social-icons a[aria-label="Discord"]{grid-column:1;grid-row:1}
.cnr-footer-follow .cnr-social-icons a[aria-label="Instagram"]{grid-column:2;grid-row:1}
.cnr-footer-follow .cnr-social-icons a[aria-label="YouTube"]{grid-column:1;grid-row:2}
.cnr-footer-follow .cnr-social-icons a[aria-label="TikTok"]{grid-column:2;grid-row:2}

/* Genuine HD skyline artwork: separate from semantic footer links. */
.cnr-footer-scene {
  position:relative!important; display:block!important;
  isolation:isolate!important; overflow:hidden!important;
  z-index:1!important; width:100%!important;
  height:clamp(155px,11.3vw,190px)!important;
  margin:-4px 0 0!important;
  pointer-events:none!important;
  background-color:#000!important;
  background-image:url("../../image/footer-los-santos-v101.webp")!important;
  background-repeat:no-repeat!important;
  background-size:100% auto!important;
  background-position:center bottom!important;
}
/* Soft black top fade keeps the illustration from intruding into navigation. */
.cnr-footer-scene::before {
  content:""!important; display:block!important; position:absolute!important;
  inset:0!important; z-index:2!important; pointer-events:none!important;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.93) 4%,rgba(0,0,0,.62) 18%,rgba(0,0,0,.12) 40%,transparent 61%)!important;
}
/* Low-cost, nearly imperceptible glow for a few city lamps, not moving scenery. */
.cnr-footer-scene::after {
  content:""!important; display:block!important; position:absolute!important;
  inset:20% 15% 0!important; z-index:2!important;pointer-events:none!important;
  opacity:.11!important;
  background:
    radial-gradient(ellipse 2.5% 7% at 39% 77%,rgba(85,200,74,.48),transparent 100%),
    radial-gradient(ellipse 2% 6% at 52% 72%,rgba(85,200,74,.38),transparent 100%),
    radial-gradient(ellipse 2% 6% at 64% 79%,rgba(85,200,74,.40),transparent 100%);
  animation:cnr-v101-nightlights 11s ease-in-out infinite alternate;
}
@keyframes cnr-v101-nightlights { from{opacity:.05} to{opacity:.13} }

/* An independent, legible, restrained legal strip. */
.cnr-footer-bottom {
  position:relative!important; z-index:4!important;
  display:flex!important; flex-direction:column!important;
  align-items:center!important; justify-content:center!important;
  width:100%!important; min-height:78px!important;
  margin:0!important; padding:16px 20px 17px!important;
  background:#030504!important;
  border-top:1px solid rgba(85,200,74,.30)!important;
}
.cnr-footer-bottom .cnr-footer-legal {
  display:flex!important; align-items:center!important; justify-content:center!important;
  gap:17px!important; padding:0!important; margin:0!important;
}
.cnr-footer-bottom .cnr-footer-legal a,
.cnr-footer-bottom .cnr-footer-legal span {
  color:#b6beb7!important; font-size:12px!important; line-height:1.4!important;
}
.cnr-footer-bottom .cnr-footer-legal a:hover,
.cnr-footer-bottom .cnr-footer-legal a:focus-visible{color:#55C84A!important;}
.cnr-footer-bottom .cnr-footer-legal span {color:rgba(85,200,74,.65)!important;}
.cnr-footer-bottom .cnr-footer-copy{
  margin:9px 0 0!important; padding:0!important;
  color:#929f95!important; font-size:11px!important; line-height:1.5!important;
}
.cnr-footer-bottom .cnr-footer-copy span {color:#55C84A!important;font-weight:700!important;}
.cnr-footer-divider{display:none!important;}

@media(max-width:900px){
  .cnr-footer-inner{padding:0 24px!important;}
  .cnr-footer-top{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px!important;}
  .cnr-footer-scene{height:165px!important;background-size:auto 195px!important;}
  .cnr-updates{padding-bottom:30px!important;}
}
@media(max-width:600px){
  .cnr-footer{padding-top:26px!important;}
  .cnr-footer-inner{padding:0 18px!important;}
  .cnr-footer-top {grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important;row-gap:23px!important;}
  .cnr-footer-brand{grid-column:1/-1!important;}
  .cnr-footer .cnr-footer-logo-image{width:114px!important;max-width:114px!important;}
  .cnr-footer-group h3{font-size:10px!important;}
  .cnr-footer-scene {height:140px!important;margin:10px 0 0!important;background-size:auto 165px!important;}
  .cnr-footer-bottom{min-height:79px!important;padding:15px 10px 16px!important;}
  .cnr-footer-bottom .cnr-footer-legal {gap:10px!important;flex-wrap:wrap!important;}
  .cnr-footer-bottom .cnr-footer-legal a {font-size:11px!important;}
  .cnr-updates{padding-bottom:24px!important;}
}
@media(prefers-reduced-motion:reduce){
  .cnr-footer-scene::after{animation:none!important;opacity:.09!important;}
  .cnr-footer-follow .cnr-social-icons a,
  .cnr-footer .cnr-footer-logo-image {transition:none!important;}
}

/* V101 mobile legal alignment: cancel a legacy flex-basis of 170px. */
.cnr-footer-bottom .cnr-footer-legal a { flex:0 0 auto!important; min-width:0!important; white-space:nowrap!important; }
.cnr-footer-bottom .cnr-footer-legal span {flex:0 0 auto!important;}
@media(max-width:600px){.cnr-footer-bottom .cnr-footer-legal{flex-wrap:nowrap!important;gap:12px!important;}}

/* FIVE:CNR V102 — Neler Oluyor / Footer spacing only */
@media (min-width: 901px) { .cnr-updates { padding-bottom: 84px !important; } }
@media (min-width: 601px) and (max-width: 900px) { .cnr-updates { padding-bottom: 70px !important; } }
@media (max-width: 600px) { .cnr-updates { padding-bottom: 58px !important; } }

/* FIVE:CNR V103 — subtle city softness and removal of footer green line */
.cnr-footer-scene {filter:blur(0.00px)!important;}
.cnr-footer-bottom {border-top:0!important;}
/* Keep the copyright name gray, without the dot immediately after the name. */
.cnr-footer-bottom .cnr-footer-copy span {color:#929f95!important;font-weight:400!important;}