/* =========================================================
   Duru Dizayn Mobilya — responsive.css
   ========================================================= */

/* Geniş masaüstü altı */
@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .features__grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(3,1fr);gap:22px 13px}
  .process-grid .process-step::after{display:none}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}

/* Tablet */
@media (max-width:980px){
  .hero{min-height:min(78vh,600px)}
  .hero__overlay{padding:50px 0}
  .hero__scrim{background:linear-gradient(90deg,rgba(11,18,32,.92) 0%,rgba(11,18,32,.8) 55%,rgba(11,18,32,.6) 100%)}
  .intro__grid{grid-template-columns:1fr;gap:30px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:25px}
  .detail-layout{grid-template-columns:1fr;gap:27px}
  .sidebar{position:static;grid-template-columns:1fr 1fr;display:grid}
  .cta-band__inner{flex-direction:column;text-align:center;align-items:center}
  .cta-band p{margin-inline:auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:27px 20px;padding:40px 0 30px}

  /* Mobil menü — transform ile gizlenir (yatay taşma oluşturmaz) */
  .mainnav{position:fixed;top:0;right:0;width:min(360px,86vw);height:100dvh;background:#fff;
    margin:0;padding:66px 17px 25px;overflow-y:auto;z-index:860;box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
  .mainnav.is-open{transform:translateX(0)}
  .mainnav__list{flex-direction:column;align-items:stretch;gap:2px}
  .mainnav__list>li>a{padding:12px 13px;border-radius:12px;font-size:1rem;justify-content:space-between}
  .hamburger{display:flex}
  .site-header__cta .btn--wa span{display:none}
  .site-header__cta .btn--wa{padding:9px 11px}

  /* Dropdown & mega -> accordion */
  .dropdown,.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    width:auto;padding:3px 0 3px 10px;max-height:0;overflow:hidden;transition:max-height .3s ease}
  /* Dokunmatik cihazlarda ":hover" durumu takılı kalabiliyor (iOS Safari) ve masaüstü
     hover kuralı (.has-mega:hover .mega{transform:translateX(-50%)...}) daha yüksek
     özgüllüğe sahip olduğundan mobilde menüyü sola kaydırıp görünmez yapıyordu. */
  .has-dropdown:hover .dropdown,.has-mega:hover .mega{position:static;transform:none;left:auto}
  .has-dropdown.is-expanded .dropdown,.has-mega.is-expanded .mega{max-height:1200px}
  .mega__inner{grid-template-columns:1fr}
  .mega__foot{flex-direction:column;align-items:stretch;text-align:center}
  .has-dropdown>a .caret,.has-mega>a .caret{transition:transform var(--t)}
  .has-dropdown.is-expanded>a .caret,.has-mega.is-expanded>a .caret{transform:rotate(180deg)}
}

/* Telefon */
@media (max-width:640px){
  .section{padding:46px 0}
  .section--tight{padding:37px 0}
  .container{padding:0 13px}
  .features{margin-top:33px}
  .features__grid{grid-template-columns:1fr;gap:12px}
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px}
  .gallery-grid .proj--tall{grid-row:span 1}
  .values-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr;gap:18px 12px}
  .form-grid{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .rating-band__inner{flex-direction:column;gap:17px}
  .rating-band__text{text-align:center}
  .cta-band__actions{flex-direction:column;width:100%}
  .cta-band__actions .btn{width:100%}
  .topbar__hide-sm{display:none}
  .hero__arrow{display:none}
  .hero__dots{bottom:16px}
  .section-head{margin-bottom:28px}
  .wa-float{width:52px;height:52px;right:14px;bottom:14px}
  .wa-popup{right:14px;bottom:76px}
  .footer-grid{grid-template-columns:1fr;gap:25px;text-align:left}
  .footer-bottom__inner{flex-direction:column;text-align:center;gap:12px}
  .footer-legal{justify-content:center}
  .footer-meta{flex-direction:column;justify-content:center}
}

@media (max-width:380px){
  .brand__name{font-size:1.15rem}
  .brand__mark{width:42px;height:42px}
}