/* ==========================
      Royal RolePlay
        Main CSS
========================== */


@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');



* {

margin:0;

padding:0;

box-sizing:border-box;

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

}



body {

background:#080808;

color:#fff;

direction:rtl;

}



a {

text-decoration:none;

color:inherit;

}



.container {

width:90%;

max-width:1400px;

margin:auto;

}



/* ==========================
          Header
========================== */


.header {

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

background:#111;

padding:15px 25px;

border-radius:15px;

margin-top:20px;

border:1px solid #222;

}



.logo {

display:flex;

align-items:center;

gap:15px;

}



.logo img {

width:65px;

height:65px;

object-fit:contain;

}



.logo h2 {

font-size:24px;

color:#fff;

}



.logo span {

font-size:14px;

color:#aaa;

}





/* Menu */


.menu {

display:flex;

gap:25px;

}



.menu a {

color:#ddd;

transition:.3s;

}



.menu a:hover {

color:#d4af37;

}





/* Buttons */


.header-buttons {

display:flex;

gap:10px;

}



.header-buttons a {

padding:10px 20px;

border-radius:10px;

font-size:14px;

}



.admin-btn {

background:#d4af37;

color:#000;

}



.login-btn {

background:#222;

}



.register-btn {

background:#6c35ff;

}
/* ==========================
            Hero
========================== */


.hero {

position:relative;

margin-top:30px;

height:450px;

overflow:hidden;

border-radius:20px;

}



.hero img {

width:100%;

height:100%;

object-fit:cover;

}



.hero::after {

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.85),

rgba(0,0,0,.2)

);

}





.hero-content {

position:absolute;

z-index:2;

bottom:50px;

right:50px;

max-width:600px;

}



.hero-content h1 {

font-size:40px;

margin-bottom:15px;

}



.hero-content p {

font-size:18px;

color:#ddd;

margin-bottom:25px;

}



.hero-content a {

display:inline-block;

background:#d4af37;

color:#000;

padding:14px 35px;

border-radius:12px;

font-weight:bold;

}





/* ==========================
          Search
========================== */


.search-box {

display:flex;

margin:30px 0;

background:#111;

padding:10px;

border-radius:15px;

}



.search-box input {

flex:1;

background:none;

border:none;

outline:none;

color:white;

font-size:16px;

padding:15px;

}



.search-box button {

width:60px;

border:none;

border-radius:10px;

background:#d4af37;

cursor:pointer;

font-size:20px;

}





/* ==========================
          Sections
========================== */


.section {

margin-top:40px;

}



.section-header {

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}



.section-header h2 {

font-size:28px;

}



.section-header a {

color:#d4af37;

}





/* ==========================
          Main Cards
========================== */


.main-cards {

display:grid;

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

gap:25px;

}



.main-card {

background:#111;

border-radius:18px;

overflow:hidden;

border:1px solid #222;

transition:.3s;

}



.main-card:hover {

transform:translateY(-5px);

border-color:#d4af37;

}



.main-card img {

width:100%;

height:220px;

object-fit:cover;

}



.card-content {

padding:20px;

}



.card-content h3 {

font-size:22px;

margin-bottom:10px;

}



.card-content p {

color:#aaa;

line-height:2;

margin-bottom:20px;

}



.card-content a {

display:inline-block;

background:#d4af37;

color:#000;

padding:10px 25px;

border-radius:10px;

font-weight:bold;

}
/* ==========================
        Empty Boxes
========================== */


.empty-box {

background:#111;

border:1px solid #222;

border-radius:15px;

padding:35px;

text-align:center;

color:#aaa;

}



.empty-box h3 {

color:white;

margin-bottom:10px;

font-size:22px;

}



.empty-box p {

line-height:2;

}



/* ==========================
          News
========================== */


.news-list {

display:flex;

flex-direction:column;

gap:15px;

}



.news-card {

background:#111;

padding:20px;

border-radius:15px;

border:1px solid #222;

display:flex;

align-items:center;

justify-content:space-between;

}





/* ==========================
          Topics
========================== */


.topics-list {

display:flex;

flex-direction:column;

gap:15px;

}



.topic-card {

background:#111;

padding:20px;

border-radius:15px;

border:1px solid #222;

}



.topic-card h3 {

margin-bottom:8px;

}



.topic-card p {

color:#999;

}





/* ==========================
          Replies
========================== */


.reply-list {

display:flex;

flex-direction:column;

gap:15px;

}



.reply-card {

background:#111;

padding:20px;

border-radius:15px;

border:1px solid #222;

}





/* ==========================
        Online Users
========================== */


.online-box {

background:#111;

border-radius:15px;

padding:25px;

}



.online-users {

display:flex;

gap:20px;

flex-wrap:wrap;

}



.user-card {

background:#151515;

padding:15px;

border-radius:12px;

text-align:center;

}



.user-card img {

width:70px;

height:70px;

border-radius:50%;

}





/* ==========================
        Members
========================== */


.members-box {

background:#111;

padding:25px;

border-radius:15px;

}



.member-card {

background:#151515;

padding:20px;

border-radius:15px;

text-align:center;

}



.member-card img {

width:80px;

height:80px;

border-radius:50%;

}
/* ==========================
          Stats
========================== */


.stats-container {

display:grid;

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

gap:20px;

}



.stat-card {

background:#111;

padding:25px;

border-radius:15px;

text-align:center;

border:1px solid #222;

}



.stat-card h3 {

font-size:35px;

color:#d4af37;

margin-bottom:10px;

}



.stat-card p {

color:#aaa;

}





/* ==========================
          About
========================== */


.about-box {

background:#111;

border-radius:20px;

padding:30px;

display:flex;

align-items:center;

gap:30px;

border:1px solid #222;

}



.about-box img {

width:120px;

height:120px;

object-fit:contain;

}



.about-content h3 {

font-size:25px;

margin-bottom:15px;

}



.about-content p {

color:#aaa;

line-height:2;

}





/* ==========================
        Rubika Channel
========================== */


.channel-box {

background:linear-gradient(

135deg,

#111,

#191919

);

padding:35px;

border-radius:20px;

text-align:center;

border:1px solid #222;

}



.channel-box h2 {

font-size:28px;

margin-bottom:15px;

}



.channel-box p {

color:#aaa;

margin-bottom:25px;

}



.channel-box a {

display:inline-block;

background:#00a884;

color:white;

padding:14px 35px;

border-radius:12px;

font-weight:bold;

}





/* ==========================
        Contact
========================== */


.contact-cards {

display:grid;

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

gap:20px;

}



.contact-card {

background:#111;

padding:25px;

border-radius:15px;

text-align:center;

border:1px solid #222;

}



.contact-card h3 {

color:#d4af37;

margin-bottom:10px;

}



.contact-card p {

color:#aaa;

}





/* ==========================
          Footer
========================== */


.footer {

margin-top:50px;

background:#0d0d0d;

padding:40px 25px;

border-radius:20px 20px 0 0;

text-align:center;

}



.footer-logo img {

width:80px;

}



.footer-logo h2 {

margin:15px 0;

}



.footer-logo p {

color:#aaa;

}



.footer-links {

display:flex;

justify-content:center;

gap:25px;

margin:25px 0;

}



.footer-links a {

color:#ddd;

}



.footer-links a:hover {

color:#d4af37;

}



.copyright {

color:#777;

font-size:14px;

}
/* ==========================
        Bottom Navigation
========================== */


.bottom-nav {

display:none;

}



/* ==========================
          Effects
========================== */


button,
a {

transition:.3s;

}



a:hover {

opacity:.85;

}



::-webkit-scrollbar {

width:8px;

}



::-webkit-scrollbar-track {

background:#080808;

}



::-webkit-scrollbar-thumb {

background:#d4af37;

border-radius:20px;

}





/* ==========================
          Selection
========================== */


::selection {

background:#d4af37;

color:#000;

}





/* ==========================
          Responsive
========================== */


@media(max-width:1000px){


.menu {

display:none;

}


.main-cards {

grid-template-columns:1fr;

}


.stats-container {

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

}


.contact-cards {

grid-template-columns:1fr;

}


.about-box {

flex-direction:column;

text-align:center;

}


}





@media(max-width:600px){


.container {

width:95%;

}



.header {

height:auto;

flex-direction:column;

gap:20px;

}



.logo h2 {

font-size:20px;

}



.header-buttons {

width:100%;

justify-content:center;

}



.hero {

height:350px;

}



.hero-content {

right:20px;

left:20px;

bottom:30px;

}



.hero-content h1 {

font-size:26px;

}



.stats-container {

grid-template-columns:1fr;

}



.footer-links {

flex-direction:column;

gap:15px;

}





/* Mobile Menu */


.bottom-nav {

position:fixed;

display:flex;

bottom:15px;

left:5%;

right:5%;

background:#111;

border:1px solid #222;

border-radius:20px;

padding:15px;

justify-content:space-around;

z-index:1000;

}



.bottom-nav a {

display:flex;

flex-direction:column;

align-items:center;

gap:5px;

font-size:13px;

}



.bottom-nav span {

color:#aaa;

}



}