/*style.css*/
/* -------------------- Fonts -------------------- */

@font-face {
    font-family: "Vazirmatn-FD";
    src: url("/static/vazirmatn-fd/fonts/webfonts/Vazirmatn-FD-Thin.woff2") format("woff2");
    font-weight: 100;
}

@font-face {
    font-family: "Vazirmatn-FD";
    src: url("/static/vazirmatn-fd/fonts/webfonts/Vazirmatn-FD-Light.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "Vazirmatn-FD";
    src: url("/static/vazirmatn-fd/fonts/webfonts/Vazirmatn-FD-Regular.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Vazirmatn-FD";
    src: url("/static/vazirmatn-fd/fonts/webfonts/Vazirmatn-FD-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Vazirmatn-FD";
    src: url("/static/vazirmatn-fd/fonts/webfonts/Vazirmatn-FD-Bold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "Vazirmatn-FD";
    src: url("/static/vazirmatn-fd/fonts/webfonts/Vazirmatn-FD-Black.woff2") format("woff2");
    font-weight: 900;
}

/* -------------------- Base Reset -------------------- */

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

body{
    font-family: 'Vazirmatn-FD', sans-serif;
    background: linear-gradient(180deg,#0f172a,#930c0c);
    color: #e2e8f0;
    line-height: 1.8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* -------------------- Container -------------------- */

.container{
width:100%;
max-width:1200px;
margin:auto;
}

.px-4{padding-left:20px;padding-right:20px;}
.py-4{padding-top:16px;padding-bottom:16px;}
.py-8{padding-top:32px;padding-bottom:32px;}
.py-12{padding-top:48px;padding-bottom:48px;}

.mx-auto{margin:auto;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-grow{flex-grow:1;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.text-center{text-align:center;}

.w-full{width:100%;}
.gap-4{gap:16px;}

/* -------------------- Header -------------------- */

header{
/*position:sticky;*/
top:0;
z-index:50;
background:rgba(15,23,42,0.75);
backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.05);
}

/* -------------------- Logo -------------------- */

header a{
text-decoration:none;
display:flex;
align-items:center;
}

header span{
font-size:24px;
font-weight:bold;
}

header svg{
width:30px;
height:30px;
margin-left:10px;
color:#f59e0b;
transition:.3s;
}

header a:hover svg{
color:#fbbf24;
}

/* -------------------- Search -------------------- */

form{
position:relative;
}

input[type="text"]{

width:100%;
background:#020617;

border:1px solid #334155;

border-radius:40px;

padding:12px 50px 12px 20px;

color:#e2e8f0;

font-size:15px;

transition:.25s;
}

input::placeholder{
color:#64748b;
}

input:focus{

outline:none;

border-color:#f59e0b;

box-shadow:0 0 0 2px rgba(245,158,11,.15);
}



button:hover{
color:#f59e0b;
}

/* -------------------- Main -------------------- */

main{

width:100%;
max-width:1100px;

margin:auto;
}

/* -------------------- Cards (ŲØŲ±Ų§ŪŒ ŲµŁŲ­Ų§ŲŖ Ų´Ų¹Ų±) -------------------- */

.card{

background:#020617;

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

border-radius:16px;

padding:26px;

margin-bottom:22px;

transition:.25s;
}

.card:hover{

border-color:#f59e0b55;

transform:translateY(-2px);

box-shadow:0 8px 30px rgba(0,0,0,.35);
}

/* -------------------- Typography -------------------- */

h1{
font-size:30px;
margin-bottom:20px;
}

h2{
font-size:24px;
margin-bottom:16px;
}

p{
color:#cbd5f5;
}

/* -------------------- Footer -------------------- */

footer{

background:#020617;

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

margin-top:auto;
}

footer p{
color:#94a3b8;
font-size:14px;
}

/* -------------------- Decorative Dots -------------------- */

footer .dots{
margin-top:14px;
}

footer .dots div{

width:6px;

height:6px;

border-radius:50%;

background:#f59e0b;

display:inline-block;

margin:0 4px;

opacity:.7;
}

/* -------------------- Scrollbar -------------------- */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#020617;
}

::-webkit-scrollbar-thumb{

background:#334155;

border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#f59e0b;
}

/* -------------------- Responsive -------------------- */

@media (max-width:900px){

header .container{
flex-direction:column;
}

}

@media (max-width:600px){

header span{
font-size:20px;
}

input[type="text"]{
font-size:14px;
}

}

::selection{
background:#f59e0b55;
color:#fff;
}

/* ŚÆŲ±ŪŒŲÆ Ų§Ų®ŲŖŲµŲ§ŲµŪŒ ŲØŲ±Ų§ŪŒ ŲÆŲ§Ų´ŲØŁˆŲ±ŲÆ */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr; /* Ł…ŁˆŲØŲ§ŪŒŁ„: 1 Ų³ŲŖŁˆŁ† */
    gap: 1.5rem; /* ŁŲ§ŲµŁ„Ł‡ ŲØŪŒŁ† Ś©Ų§Ų±ŲŖā€ŒŁ‡Ų§ */
}

/* ŲŖŲØŁ„ŲŖ: 2 Ų³ŲŖŁˆŁ† */
@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ŲÆŲ³Ś©ŲŖŲ§Ł¾: 3 Ų³ŲŖŁˆŁ† */
@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}