:root{ --paloty:#e27924; --dark:#191919; --muted:#666; }

.design-container{max-width:1280px;margin:0 auto;padding:28px 16px;}
/* HERO */
.design-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.design-hero-text h1{font-size:clamp(26px,3.4vw,38px);margin:0 0 8px}
.design-hero-text p{color:var(--muted);margin:0 0 14px}
.design-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.btn{border-radius:12px;padding:12px 16px;font-weight:700;display:inline-block;text-decoration:none;border:none;cursor:pointer}
.btn-primary{background:var(--paloty);color:#fff}
.btn-primary:hover{background:#d1660f}
.btn-ghost{background:#fff;border:1.8px solid var(--dark);color:var(--dark)}
.btn-ghost:hover{background:var(--dark);color:#fff}
.design-bullets{margin:12px 0 0;padding-left:18px;color:#333}
.design-bullets li{margin:4px 0}
.design-hero-media img{width:100%;display:block;border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.08)}

/* ÖNE ÇIKANLAR */
.design-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}
.design-highlights .hl{background:#fff;border-radius:16px;padding:16px;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.design-highlights i{color:var(--paloty);font-size:22px}
.design-highlights h3{margin:8px 0 4px}

/* NASIL ÇALIŞIR */
.design-how h2,.design-gallery h2,.design-styles h2,.design-faq h2{font-size:20px;color:#555;margin:18px 0 8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border-radius:16px;padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.06);position:relative}
.step span{position:absolute;right:12px;top:10px;background:#f1ece5;color:var(--paloty);border-radius:999px;padding:4px 8px;font-weight:800}

/* GALERİ */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-grid img{width:100%;border-radius:14px;display:block}

/* STİLLER */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#f4f4f4;border:1px solid #e7e7e7;border-radius:999px;padding:8px 12px;font-weight:600}

/* SSS */
.design-faq details{background:#fff;border-radius:12px;padding:12px 14px;margin:8px 0;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.design-faq summary{cursor:pointer;font-weight:700}
.design-faq p{margin:8px 0 0;color:#555}

/* WIDE CTA */
.design-cta-wide{background:#f7f4ef;border-radius:16px;padding:18px;margin:18px 0;text-align:center}
.design-cta-wide h3{margin:0 0 10px}

/* Responsive */
@media (max-width:1100px){
    .design-hero{grid-template-columns:1fr}
    .design-highlights{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
    .design-highlights,.steps{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:1fr}
}