/*
Theme Name: GrayGold Studio
Theme URI: https://example.com/
Author: ChatGPT
Description: قالب وردپرس مدرن خاکستری و طلایی
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: graygold
*/
:root{
 --gold:#c9a45c;
 --gold2:#e2c27d;
 --dark:#171717;
 --dark2:#222;
 --gray:#777;
 --light:#f4f3f0;
 --white:#fff;
 --border:#dedbd3;
}

*{box-sizing:border-box}

html{
 scroll-behavior:smooth;
}

body{
 margin:0;
 font-family:Tahoma,Arial,sans-serif;
 background:var(--light);
 color:#202020;
 line-height:1.8;
}

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

img{
 max-width:100%;
 height:auto;
}

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

/* =========================
   HEADER
========================= */

.site-header{
 position:sticky;
 top:0;
 z-index:50;
 background:rgba(23,23,23,.96);
 border-bottom:1px solid rgba(201,164,92,.35);
}

.header-inner{
 min-height:76px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}

.site-brand{
 display:flex;
 align-items:center;
 gap:12px;
 color:#fff;
 font-weight:800;
 font-size:21px;
}

.logo-mark{
 width:38px;
 height:38px;
 border:2px solid var(--gold);
 display:grid;
 place-items:center;
 color:var(--gold);
 font-size:17px;
}

.custom-logo{
 max-height:50px;
 width:auto;
}

.main-nav ul{
 list-style:none;
 margin:0;
 padding:0;
 display:flex;
 gap:7px;
}

.main-nav a{
 display:block;
 color:#eee;
 padding:10px 15px;
 border-radius:6px;
 transition:.2s;
}

.main-nav a:hover,
.main-nav .current-menu-item>a{
 color:var(--gold2);
 background:rgba(255,255,255,.06);
}

/* =========================
   HERO
========================= */

.hero{
 padding:115px 0 100px;
 background:
 radial-gradient(
   circle at 80% 20%,
   rgba(201,164,92,.18),
   transparent 35%
 ),
 linear-gradient(135deg,#191919,#303030);
 color:#fff;
}

.hero-grid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:60px;
 align-items:center;
}

.eyebrow{
 color:var(--gold2);
 letter-spacing:2px;
 font-size:13px;
 font-weight:bold;
}

.hero h1{
 font-size:clamp(38px,6vw,68px);
 line-height:1.2;
 margin:15px 0;
}

.hero p{
 font-size:18px;
 color:#ddd;
 max-width:650px;
}

.btn{
 display:inline-block;
 padding:12px 24px;
 border-radius:6px;
 border:1px solid var(--gold);
 font-weight:bold;
 transition:.2s;
}

.btn-gold{
 background:var(--gold);
 color:#171717;
}

.btn-gold:hover{
 background:var(--gold2);
}

.btn-outline{
 color:#fff;
 margin-right:8px;
}

.hero-card{
 border:1px solid rgba(201,164,92,.4);
 background:rgba(255,255,255,.05);
 padding:34px;
 border-radius:14px;
 box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.hero-card .number{
 font-size:56px;
 color:var(--gold);
 font-weight:800;
 line-height:1;
}

/* =========================
   SECTIONS
========================= */

.section{
 padding:85px 0;
}

.section-alt{
 background:#fff;
}

.section-head{
 text-align:center;
 max-width:720px;
 margin:0 auto 45px;
}

.section-head h2{
 font-size:36px;
 margin:8px 0 10px;
}

.section-head p{
 color:var(--gray);
}

/* =========================
   CARDS
========================= */

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

.card{
 background:#fff;
 border:1px solid var(--border);
 border-radius:12px;
 padding:30px;
 transition:.25s;
}

.card:hover{
 transform:translateY(-5px);
 box-shadow:0 18px 45px rgba(0,0,0,.08);
 border-color:rgba(201,164,92,.6);
}

.icon{
 width:48px;
 height:48px;
 border:1px solid var(--gold);
 color:var(--gold);
 display:grid;
 place-items:center;
 border-radius:50%;
 font-weight:bold;
 margin-bottom:18px;
}

/* =========================
   PORTFOLIO
========================= */

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

.portfolio-item{
 position:relative;
 overflow:hidden;
 border-radius:12px;
 background:#292929;
 min-height:260px;
}

.portfolio-item img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
 opacity:.88;
 transition:.3s;
}

.portfolio-overlay{
 position:absolute;
 inset:auto 0 0;
 padding:24px;
 color:#fff;
 background:linear-gradient(
   transparent,
   rgba(0,0,0,.9)
 );
}

.portfolio-item:hover img{
 transform:scale(1.04);
}

/* =========================
   POSTS
========================= */

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

.post-card{
 background:#fff;
 border-radius:12px;
 overflow:hidden;
 border:1px solid var(--border);
}

.post-card .thumb{
 height:190px;
 background:#ddd;
 overflow:hidden;
}

.post-card .thumb img{
 width:100%;
 height:100%;
 object-fit:cover;
}

.post-card .content{
 padding:22px;
}

.meta{
 font-size:12px;
 color:#888;
}

/* =========================
   CONTACT
========================= */

.contact-box{
 background:#1d1d1d;
 color:#fff;
 border-radius:16px;
 padding:45px;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
}

.contact-box h2{
 color:var(--gold2);
}

/* =========================
   FOOTER
========================= */

.site-footer{
 background:#111;
 color:#aaa;
 padding:35px 0;
}

.footer-inner{
 display:flex;
 justify-content:space-between;
 gap:20px;
}

.footer-inner strong{
 color:var(--gold);
}

/* =========================
   SINGLE PAGE
========================= */

.entry-content{
 max-width:820px;
 margin:60px auto;
 background:#fff;
 padding:45px;
 border-radius:12px;
}

/* =========================
   MOBILE MENU
========================= */

.menu-toggle{
 display:none;
 background:none;
 border:1px solid var(--gold);
 color:var(--gold);
 padding:7px 11px;
 border-radius:6px;
 cursor:pointer;
 font-size:20px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:800px){

 .header-inner{
   position:relative;
 }

 .hero-grid,
 .contact-box{
   grid-template-columns:1fr;
 }

 .grid-3,
 .portfolio-grid,
 .post-grid{
   grid-template-columns:1fr;
 }

 /* همبرگری سمت راست */
 .menu-toggle{
   display:block;
   margin-left:auto;
   order:3;
 }

 /* منوی موبایل */
 .main-nav{
   display:none;
   position:absolute;
   top:76px;
   left:0;
   right:0;
   width:100%;
   background:#171717;
   padding:12px;
   border-top:1px solid rgba(201,164,92,.25);
 }

 .main-nav.open{
   display:block;
 }

 .main-nav ul{
   flex-direction:column;
   width:100%;
 }

 .main-nav li{
   width:100%;
 }

 .main-nav a{
   padding:12px 16px;
   width:100%;
 }

 .footer-inner{
   flex-direction:column;
 }

 .entry-content{
   width:92%;
   margin:35px auto;
   padding:25px;
 }

 .section{
   padding:60px 0;
 }

 .hero{
   padding:80px 0;
 }

}

/* موبایل کوچک */

@media(max-width:480px){

 .site-brand{
   font-size:17px;
 }

 .logo-mark{
   width:34px;
   height:34px;
 }

 .hero h1{
   font-size:36px;
 }

 .hero p{
   font-size:16px;
 }

 .contact-box{
   padding:25px;
 }

}
/* =========================================
   COMENSHINE PREMIUM HOME
========================================= */

body.home .cs-home-premium,
body.home .cs-home-premium * {
    box-sizing: border-box;
}

body.home .cs-home-premium {
    width: 100%;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(201,151,61,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #070707,
            #111111 55%,
            #080808
        );

    color: #fff;
}

body.home .cs-home-premium-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 65px 32px 30px;
}


/* HERO */

body.home .cs-home-premium-main {
    display: grid;
    grid-template-columns: 56% 44%;
    align-items: center;
    min-height: 570px;
}

body.home .cs-home-premium-copy {
    position: relative;
    z-index: 3;
}

body.home .cs-home-premium-eyebrow {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 24px;

    color: #d2a14a;

    font-family: Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 1.3px;
}

body.home .cs-home-premium-eyebrow i {
    font-style: normal;
    font-size: 9px;
}


body.home .cs-home-premium h1 {
    margin: 0 0 30px !important;
    padding: 0 !important;

    font-family: Arial, sans-serif !important;
    line-height: 1.04 !important;

    text-align: left !important;
}

body.home .cs-home-premium h1 span {
    display: block;
}

body.home .cs-home-premium-white {
    color: #fff;
    font-size: clamp(50px,5.6vw,76px);
    font-weight: 800;
}

body.home .cs-home-premium-gold {
    color: #d4a34d;
    font-size: clamp(54px,6vw,80px);
    font-weight: 800;
}


body.home .cs-home-premium-fa {
    direction: rtl;
    text-align: left;

    margin-bottom: 22px;
}

body.home .cs-home-premium-fa span,
body.home .cs-home-premium-fa strong {
    display: block;
    font-size: clamp(31px,3.7vw,48px);
    line-height: 1.65;
}

body.home .cs-home-premium-fa span {
    color: #fff;
}

body.home .cs-home-premium-fa strong {
    color: #d5a348;
}


body.home .cs-home-premium-desc {
    margin: 0 0 28px !important;

    direction: rtl;
    text-align: left;

    color: #e7e7e7 !important;

    font-size: 17px !important;
    line-height: 2 !important;
}


/* BUTTON */

body.home .cs-home-premium-buttons {
    display: flex;
    gap: 14px;
}

body.home .cs-home-premium-btn {
    min-height: 60px;

    padding: 0 24px;

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

    gap: 10px;

    border-radius: 9px;

    font-size: 16px;
    font-weight: 800;

    text-decoration: none !important;
}

body.home .cs-home-premium-btn-gold {
    color: #111 !important;

    border: 1px solid #e2b45a;

    background:
        linear-gradient(
            135deg,
            #ecc36d,
            #c8943c
        );
}

body.home .cs-home-premium-btn-outline {
    color: #fff !important;

    border: 1px solid #c8953e;

    background: rgba(10,10,10,.65);
}


/* ART */

body.home .cs-home-premium-art {
    position: relative;

    height: 520px;

    pointer-events: none;
}

body.home .cs-home-line {
    position: absolute;

    width: 440px;
    height: 440px;

    border: 1px solid rgba(212,160,67,.58);

    transform: rotate(45deg);

    box-shadow:
        0 0 18px rgba(210,155,60,.06);
}

body.home .cs-home-line-1 {
    right: -150px;
    top: 30px;
}

body.home .cs-home-line-2 {
    right: -270px;
    top: 30px;

    border-color: rgba(244,181,70,.85);

    box-shadow:
        0 0 15px rgba(243,174,56,.18);
}

body.home .cs-home-line-3 {
    right: -390px;
    top: 30px;

    border-color: rgba(175,125,44,.3);
}


/* BENEFITS */

body.home .cs-home-premium-benefits {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    padding: 26px 15px;

    border: 1px solid rgba(190,140,54,.52);
    border-radius: 18px;

    background: rgba(17,17,17,.82);
}

body.home .cs-home-premium-benefit {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    direction: rtl;

    padding: 5px 22px;
}

body.home .cs-home-premium-benefit:not(:last-child) {
    border-left: 1px solid rgba(196,146,57,.32);
}

body.home .cs-benefit-symbol {
    color: #d5a042;

    font-size: 42px;
    line-height: 1;
}

body.home .cs-home-premium-benefit h3 {
    margin: 0 0 6px !important;

    color: #fff !important;

    font-size: 17px !important;
}

body.home .cs-home-premium-benefit p {
    margin: 0 !important;

    color: #d7d7d7 !important;

    font-size: 13px !important;
    line-height: 1.9 !important;
}


/* BRANDS */

body.home .cs-home-premium-brands {
    margin-top: 32px;
}

body.home .cs-home-premium-brand-title {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 12px;

    color: #d0a04a;

    font-family: Arial,sans-serif;

    letter-spacing: 3px;
}

body.home .cs-home-premium-brand-title b {
    font-size: 12px;
    font-weight: 500;
}

body.home .cs-home-premium-brand-title span {
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            to right,
            transparent,
            #aa7931
        );
}

body.home .cs-home-premium-brand-title span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            #aa7931
        );
}


body.home .cs-home-premium-brand-row {
    display: grid;

    grid-template-columns:
        1fr 25px 1fr 25px 1fr;

    align-items: center;

    padding: 22px;

    border: 1px solid rgba(190,140,54,.65);
    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #171717,
            #0b0b0b
        );
}

body.home .cs-home-premium-brand {
    text-align: center;
}

body.home .cs-home-premium-brand strong {
    display: block;

    color: #fff;

    font-family: Arial,sans-serif;

    font-size: 28px;
    font-weight: 900;
}

body.home .cs-home-premium-brand small {
    color: #d8d8d8;

    font-family: Arial,sans-serif;

    font-size: 10px;
}

body.home .cs-home-sonax strong {
    font-size: 34px;
}

body.home .cs-home-premium-brand-dot {
    text-align: center;

    color: #ca963d;

    font-size: 23px;
}


/* SERVICES */

body.home .cs-home-premium-services {
    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 15px;

    margin-top: 30px;
}

body.home .cs-home-premium-service {
    min-height: 230px;

    padding: 28px 10px;

    text-align: center;

    direction: rtl;

    border: 1px solid rgba(184,132,50,.45);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.1)
        );
}

body.home .cs-home-premium-service-icon {
    color: #d5a144;

    font-size: 50px;

    line-height: 1;

    margin-bottom: 15px;
}

body.home .cs-home-premium-service h3 {
    margin: 0 !important;

    color: #fff !important;

    font-size: 19px !important;
}

body.home .cs-home-premium-service > span {
    width: 30px;
    height: 2px;

    display: block;

    margin: 13px auto;

    background: #c48f38;

    box-shadow:
        0 0 8px rgba(211,158,63,.5);
}

body.home .cs-home-premium-service p {
    margin: 0 !important;

    color: #d8d8d8 !important;

    font-size: 13px !important;
    line-height: 2 !important;
}


/* DOWN */

body.home .cs-home-premium-down {
    height: 50px;

    text-align: center;

    color: #d2a044;

    font-size: 45px;

    line-height: 42px;
}



/* =========================================
   TABLET
========================================= */

@media (max-width:900px) {

    body.home .cs-home-premium-main {
        grid-template-columns: 62% 38%;
    }

    body.home .cs-home-premium-services {
        grid-template-columns: repeat(2,1fr);
    }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width:600px) {

    body.home .cs-home-premium-inner {
        padding:
            38px
            17px
            20px;
    }


    body.home .cs-home-premium-main {
        display: block;

        min-height: 0;

        position: relative;
    }


    body.home .cs-home-premium-copy {
        position: relative;

        z-index: 5;
    }


    body.home .cs-home-premium-art {
        position: absolute;

        width: 55%;
        height: 430px;

        right: -20px;
        top: 20px;

        z-index: 1;

        opacity: .75;
    }


    body.home .cs-home-line {
        width: 300px;
        height: 300px;

        right: -220px;
    }

    body.home .cs-home-line-1 {
        top: 40px;
    }

    body.home .cs-home-line-2 {
        right: -270px;
        top: 40px;
    }

    body.home .cs-home-line-3 {
        display: none;
    }


    body.home .cs-home-premium-eyebrow {
        gap: 9px;

        font-size: 10px;

        letter-spacing: .8px;

        margin-bottom: 18px;
    }


    body.home .cs-home-premium-white {
        font-size: 40px;
    }

    body.home .cs-home-premium-gold {
        font-size: 42px;
    }


    body.home .cs-home-premium-fa {
        margin-top: 24px;
    }

    body.home .cs-home-premium-fa span,
    body.home .cs-home-premium-fa strong {
        font-size: 28px;

        line-height: 1.65;
    }


    body.home .cs-home-premium-desc {
        font-size: 14px !important;

        line-height: 2 !important;
    }


    body.home .cs-home-premium-buttons {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 9px;
    }

    body.home .cs-home-premium-btn {
        min-height: 55px;

        padding: 0 8px;

        font-size: 13px;
    }


    /* FEATURES */

    body.home .cs-home-premium-benefits {
        margin-top: 42px;

        display: flex;
        flex-direction: column;

        padding: 4px 16px;
    }

    body.home .cs-home-premium-benefit {
        justify-content: flex-start;

        padding: 16px 0;
    }

    body.home .cs-home-premium-benefit:not(:last-child) {
        border-left: none;

        border-bottom:
            1px solid rgba(190,140,54,.24);
    }

    body.home .cs-benefit-symbol {
        font-size: 36px;
    }


    /* BRANDS */

    body.home .cs-home-premium-brand-title {
        margin-top: 25px;

        gap: 8px;

        letter-spacing: 2px;
    }

    body.home .cs-home-premium-brand-title b {
        font-size: 9px;
    }

    body.home .cs-home-premium-brand-row {
        grid-template-columns: 1fr;

        padding: 6px 18px;
    }

    body.home .cs-home-premium-brand {
        padding: 15px 0;
    }

    body.home .cs-home-premium-brand:not(:last-child) {
        border-bottom:
            1px solid rgba(190,140,54,.20);
    }

    body.home .cs-home-premium-brand-dot {
        display: none;
    }

    body.home .cs-home-premium-brand strong,
    body.home .cs-home-sonax strong {
        font-size: 25px;
    }


    /* SERVICES */

    body.home .cs-home-premium-services {
        grid-template-columns: 1fr 1fr;

        gap: 9px;

        margin-top: 22px;
    }

    body.home .cs-home-premium-service {
        min-height: 195px;

        padding: 22px 6px;
    }

    body.home .cs-home-premium-service-icon {
        font-size: 40px;
    }

    body.home .cs-home-premium-service h3 {
        font-size: 15px !important;
    }

    body.home .cs-home-premium-service p {
        font-size: 10px !important;
    }

}



/* موبایل خیلی کوچک */

@media (max-width:380px) {

    body.home .cs-home-premium-white {
        font-size: 34px;
    }

    body.home .cs-home-premium-gold {
        font-size: 35px;
    }

    body.home .cs-home-premium-fa span,
    body.home .cs-home-premium-fa strong {
        font-size: 24px;
    }

}