/*=========================
فونت ها
=========================*/

@font-face{
font-family:'IRANSans';
src:url('fonts/IRANSans.ttf');
}

@font-face{
font-family:'IranNastaliq';
src:url('fonts/IranNastaliq.ttf');
}

/*=========================
تنظیمات کلی
=========================*/

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

body{

background:#0b0b0b;

color:#fff;

font-family:'IRANSans',Tahoma,sans-serif;

}

.page{

width:95%;

max-width:1450px;

margin:25px auto;

background:#111;

border:2px solid #D4AF37;

border-radius:18px;

padding:25px;

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

min-height:95vh;

}

/*=========================
هدر
=========================*/

header{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

margin-bottom:30px;

}

.logo{

font-family:'IranNastaliq';

font-size:52px;

color:#D4AF37;

}

.titleBox{

width:100%;

display:flex;

justify-content:center;

}

.titleGlow{

padding:15px 40px;

border:2px solid #D4AF37;

border-radius:14px;

font-size:32px;

font-weight:bold;

color:#D4AF37;

animation:glow 1.5s infinite alternate;

}

@keyframes glow{

from{

box-shadow:0 0 8px #D4AF37;

}

to{

box-shadow:0 0 28px #D4AF37;

}

}
/*=========================
جستجو
=========================*/

.searchBox{

margin:25px 0;

}

.searchBox input{

width:100%;

height:58px;

background:#181818;

border:2px solid #D4AF37;

border-radius:12px;

padding:0 18px;

font-size:18px;

font-family:'IRANSans';

color:#fff;

outline:none;

transition:.3s;

}

.searchBox input:focus{

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

}

.searchBox input::placeholder{

color:#bfbfbf;

}


/*=========================
دسته بندی افقی
=========================*/

.categories{

display:flex;

gap:12px;

overflow-x:auto;

padding:12px 0;

margin-bottom:25px;

scrollbar-width:thin;

scrollbar-color:#D4AF37 #111;

}

.categories::-webkit-scrollbar{

height:8px;

}

.categories::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:20px;

}

.category{

flex:0 0 auto;

padding:12px 24px;

border:1px solid #D4AF37;

border-radius:30px;

color:#D4AF37;

cursor:pointer;

transition:.3s;

white-space:nowrap;

font-size:16px;

}

.category:hover{

background:#D4AF37;

color:#111;

}

.category.active{

background:#D4AF37;

color:#111;

font-weight:bold;

}


/*=========================
ریسپانسیو
=========================*/

@media(max-width:768px){

.logo{

font-size:34px;

}

.titleGlow{

font-size:22px;

padding:12px 20px;

}

.searchBox input{

height:52px;

font-size:16px;

}

.category{

padding:10px 18px;

font-size:15px;

}

.page{

width:98%;

padding:15px;

}

}
/*=========================
کارت قوانین
=========================*/

.laws{

display:flex;

flex-direction:column;

gap:18px;

margin-top:20px;

}

.law{

background:#151515;

border:1px solid #D4AF37;

border-radius:16px;

padding:18px;

transition:.3s;

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

}

.law:hover{

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

transform:translateY(-2px);

}

.law-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

}

.law-title{

font-size:22px;

font-weight:bold;

color:#D4AF37;

}

.law-actions{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:18px;

}

.law-actions a{

text-decoration:none;

background:#1b1b1b;

border:1px solid #D4AF37;

color:#D4AF37;

padding:10px 18px;

border-radius:8px;

transition:.3s;

font-size:15px;

}

.law-actions a:hover{

background:#D4AF37;

color:#111;

}

.law-text{

display:none;

margin-top:18px;

background:#0d0d0d;

border:1px solid #444;

border-right:4px solid #D4AF37;

border-radius:10px;

padding:18px;

line-height:2.2;

max-height:650px;

overflow-y:auto;

color:#f5f5f5;

}

.law-text::-webkit-scrollbar{

width:8px;

}

.law-text::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:20px;

}

@media(max-width:768px){

.law-title{

font-size:18px;

}

.law-actions{

flex-direction:row;

justify-content:center;

}

.law-actions a{

flex:1;

text-align:center;

font-size:14px;

padding:10px;

}

.law-text{

font-size:15px;

line-height:2;

}

}