/* ==========================================================
   KARTVİZİTLER
========================================================== */

.service-hero{
    padding:140px 0 80px;
    text-align:center;
}

.service-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    color:#c79b6a;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:20px;
}

.service-hero h1{
    font-size:clamp(2.4rem,5vw,4rem);
    color:#fff;
    margin-bottom:20px;
}

.service-hero p{
    max-width:760px;
    margin:auto;
    color:#b8b8b8;
    line-height:1.8;
    font-size:1.1rem;
}

/* ==========================================================
SHOWCASE
========================================================== */

.service-showcase{
    padding:70px 0;
}

.showcase-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:start;
}

.showcase-image img{
    width:90%;
    display:block;
    border-radius:22px;
    box-shadow:0 25px 40px rgba(0, 0, 0, 0);
}

/* ==========================================================
SERVICE CARD
========================================================== */

.service-card{
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:30px;
    position:sticky;
    top:110px;
}

.service-card h3{
    color:#fff;
    margin-bottom:25px;
    font-size:1.4rem;
}

.service-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.service-card li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.service-card span{
    color:#9fa7b4;
}

.service-card strong{
    color:#fff;
}

/* ==========================================================
BUTTONS
========================================================== */

.btn-primary{
    display:block;
    margin-top:30px;
    text-align:center;
    padding:16px;
    border-radius:12px;
    background:#c79b6a;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.btn-primary:hover{
    background:#c79b6a;
    transform:translateY(-2px);
}

.btn-whatsapp{
    display:block;
    margin-top:15px;
    text-align:center;
    padding:15px;
    border-radius:12px;
    text-decoration:none;
    color:#25d366;
    border:1px solid rgba(255,255,255,.08);
    transition:.3s;
}

.btn-whatsapp:hover{
    background:#1e1e1e;
}

/* ==========================================================
DESCRIPTION
========================================================== */

.service-description{
    margin-top:55px;
}

.service-description p{
    color:#bcc5d0;
    line-height:2;
    margin-bottom:22px;
    font-size:1.05rem;
}

/* ==========================================================
SECTION TITLE
========================================================== */

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#c79b6a;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
}

.section-title h2{
    color:#fff;
    margin:18px 0;
    font-size:2.4rem;
}

.section-title p{
    color:#a7a7a7;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

/* ==========================================================
CARD TYPES
========================================================== */

.card-types{
    padding:90px 0;
}

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

.type-card{
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:35px;
    transition:.35s;
}

.type-card:hover{
    transform:translateY(-10px);
    border-color:#c79b6a;
}

.type-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#c79b6a;
    color:#fff;
    font-size:1.6rem;
    margin-bottom:25px;
}

.type-card h3{
    color:#fff;
    margin-bottom:18px;
}

.type-card p{
    color:#aeb4bd;
    line-height:1.8;
}

/* ==========================================================
ADVANTAGES
========================================================== */

.advantages{
    padding:90px 0;
}

.advantages-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.advantage-item{
    background:#171717;
    border-radius:20px;
    padding:35px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
}

.advantage-item i{
    color:#c79b6a;
    font-size:2rem;
    margin-bottom:20px;
}

.advantage-item h4{
    color:#fff;
    margin-bottom:15px;
}

.advantage-item p{
    color:#adb5bd;
    line-height:1.8;
}

/* ==========================================================
FAQ
========================================================== */

.faq-section{
    padding:90px 0;
}

.faq-list{
    max-width:900px;
    margin:auto;
}

.faq-item{
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:28px;
    margin-bottom:20px;
}

.faq-item h3{
    color:#fff;
    margin-bottom:15px;
}

.faq-item p{
    color:#b4bcc7;
    line-height:1.9;
}

/* ==========================================================
CTA
========================================================== */

.service-cta{
    padding:90px 0 120px;
}

.cta-box{
    background:linear-gradient(135deg,#1d1d1d,#121212);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:70px;
    text-align:center;
}

.cta-box span{
    color:#c79b6a;
    letter-spacing:2px;
    font-size:.9rem;
    font-weight:700;
}

.cta-box h2{
    color:#fff;
    margin:20px 0;
    font-size:2.8rem;
}

.cta-box p{
    color:#b8b8b8;
    line-height:1.9;
    max-width:800px;
    margin:0 auto 40px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.cta-buttons a{
    min-width:230px;
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:1100px){

.showcase-grid{
    grid-template-columns:1fr;
}

.service-card{
    position:relative;
    top:0;
}

.types-grid{
    grid-template-columns:repeat(2,1fr);
}

.advantages-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.service-hero{
    padding:110px 0 60px;
}

.types-grid,
.advantages-grid{
    grid-template-columns:1fr;
}

.cta-box{
    padding:45px 25px;
}

.cta-box h2{
    font-size:2rem;
}

.service-card{
    padding:25px;
}

}