@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#f6f2ea;color:#2e2924;font-family:Cairo,Arial,sans-serif;line-height:1.9}
a{color:inherit;text-decoration:none}.container{width:min(1120px,92%);margin:auto}.topbar{background:#30271f;color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{font-family:Amiri,serif;font-size:28px;font-weight:700}.menu{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.menu a{padding:7px 11px;border-radius:8px;color:#eee}.menu a:hover,.menu a.active{background:#9d7442}.hero{padding:28px 0 10px}
.hero h1{font-family:Amiri,serif;font-size:42px;margin:10px 0 0;text-align:center}.subtitle{text-align:center;color:#806b57}

solid #fff;box-shadow:0 3px 12px #0001}.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #e7dccd;border-radius:14px;padding:20px;box-shadow:0 6px 20px #0000000b}
.card h2,.card h3{font-family:Amiri,serif;margin-top:0}.card
.icon{font-size:34px}.btn{display:inline-block;background:#8b6236;color:#fff;padding:8px 16px;border-radius:8px;margin-top:8px}
.section{margin:32px 0}.section h2{font-family:Amiri,serif;font-size:30px;border-right:5px solid #9d7442;padding-right:12px}
.list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.list a,
.item{background:#fff;border:1px solid #eadfce;border-radius:10px;padding:14px}
.book{display:flex;gap:16px;align-items:flex-start}
.book-cover{width:110px;height:150px;border-radius:7px;background:
linear-gradient(145deg,#6f5132,#c49a62);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center
;font-family:Amiri;font-size:19px;padding:8px;flex:none}
.player{background:#211c18;color:#fff;border-radius:16px;padding:26px;margin:20px 0}
.player audio,.player video{width:100%}
.notice{background:#efe4d2;padding:16px;border-radius:10px;border-right:4px solid #9d7442}
.footer{margin-top:55px;background:#30271f;color:#eee;padding:28px 0;text-align:center}
.small{font-size:14px;color:#8a7967}.form{display:grid;gap:14px}
.form input,.form textarea{width:100%;padding:12px;border:1px solid #d9cdbd;border-radius:8px;font:inherit;background:#fff}
.form textarea{min-height:150px}.help{background:#fff8ed;border:1px dashed #b99162;padding:18px;border-radius:12px}
.help code{background:#eee4d7;padding:2px 6px;border-radius:4px;direction:ltr;display:inline-block}
.back{display:inline-block;margin:12px 0;color:#76522d}


@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&display=swap');

/* =========================
   تنظیمات عمومی
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f6f2ea;
    color: #2e2924;
    font-family: Cairo, Arial, sans-serif;
    line-height: 1.9;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1120px, 92%);
    margin: auto;
}

/* =========================
   نوار بالای سایت
========================= */

.topbar {
    background: #30271f;
    color: #fff;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
}

.brand {
    font-family: Amiri, serif;
    font-size: 28px;
    font-weight: 700;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.menu a {
    padding: 7px 11px;
    border-radius: 8px;
    color: #eee;
}

.menu a:hover,
.menu a.active {
    background: #9d7442;
}

/* =========================
   بخش اصلی / عنوان
========================= */

.hero {
    padding: 28px 0 10px;
}

.hero h1 {
    font-family: Amiri, serif;
    font-size: 42px;
    margin: 10px 0 0;
    text-align: center;
}

.subtitle {
    text-align: center;
    color: #806b57;
}


/* =========================
   کارت‌ها
========================= */

.cardgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.card {
    background: #fff;
    border: 1px solid #e7dccd;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 20px #0000000b;
}

.card h2,
.card h3 {
    font-family: Amiri, serif;
    margin-top: 0;
}

.card .icon {
    font-size: 34px;
}

/* =========================
   دکمه‌ها
========================= */

.btn {
    display: inline-block;
    background: #8b6236;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
}

/* =========================
   بخش‌ها
========================= */

.section {
    margin: 32px 0;
}

.section h2 {
    font-family: Amiri, serif;
    font-size: 30px;

    border-right: 5px solid #9d7442;
    padding-right: 12px;
}

/* =========================
   لیست‌ها
========================= */

.list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.list a,
.item {
    background: #fff;
    border: 1px solid #eadfce;
    border-radius: 10px;
    padding: 14px;
}

/* =========================
   کتاب
========================= */

.book {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.book-cover {
    width: 110px;
    height: 150px;

    border-radius: 7px;

    background: linear-gradient(
        145deg,
        #6f5132,
        #c49a62
    );

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

    color: #fff;
    text-align: center;

    font-family: Amiri, serif;
    font-size: 19px;

    padding: 8px;
    flex: none;
}

/* =========================
   پلیر
========================= */

.player {
    background: #211c18;
    color: #fff;
    border-radius: 16px;
    padding: 26px;
    margin: 20px 0;
}

.player audio,
.player video {
    width: 100%;
}

/* =========================
   اطلاعیه
========================= */

.notice {
    background: #efe4d2;
    padding: 16px;
    border-radius: 10px;
    border-right: 4px solid #9d7442;
}

/* =========================
   فوتر
========================= */

.footer {
    margin-top: 55px;
    background: #30271f;
    color: #eee;
    padding: 28px 0;
    text-align: center;
}

.small {
    font-size: 14px;
    color: #8a7967;
}

/* =========================
   فرم
========================= */

.form {
    display: grid;
    gap: 14px;
}

.form input,
.form textarea {
    width: 100%;
    padding: 12px;

    border: 1px solid #d9cdbd;
    border-radius: 8px;

    font: inherit;
    background: #fff;
}

.form textarea {
    min-height: 150px;
}

/* =========================
   راهنما
========================= */

.help {
    background: #fff8ed;
    border: 1px dashed #b99162;
    padding: 18px;
    border-radius: 12px;
}

.help code {
    background: #eee4d7;
    padding: 2px 6px;
    border-radius: 4px;

    direction: ltr;
    display: inline-block;
}
/* =========================
   معرض الصور
========================= */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 30px auto;
}

.gallery img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}


/* =========================
   الهاتف
========================= */

@media (max-width: 600px) {

    .gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
        margin: 20px auto;
    }

    .gallery img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
        display: block;
        border-radius: 8px;
    }
}
/* =========================
   عکس اصلی صفحه
========================= */

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 30px auto;
}

.hero-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    margin: 0 auto;
}
/* =========================
   محتويات الموقع في الهاتف
========================= */

@media screen and (max-width: 600px) {

    main.container {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .section {
        width: 100%;
        margin: 25px 0;
    }

    .section h2 {
        width: 100%;
        text-align: right;
    }

    .cardgrid {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .card {
        width: 100%;
        margin: 0;
    }

    .list {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .list a,
    .item {
        display: block;
        width: 100%;
        margin: 0;
    }

    .notice {
        width: 100%;
    }

    .player {
        width: 100%;
        margin: 20px 0;
    }

}