/* =========================================================
   EPISYS RESPONSIVE LAYER
   Existing desktop design is preserved above.
   Tablet + mobile rules only.
   ========================================================= */

/* TABLET */
@media (max-width: 1100px) {
  header .nav{
    padding:0 24px!important;
    gap:18px!important;
  }
  header .brand{
    flex-basis:185px!important;
    width:185px!important;
    min-width:185px!important;
  }
  header .brand strong{font-size:17px!important}
  header .tab{
    padding:12px 8px!important;
    font-size:12px!important;
  }
  header .contact-top{
    padding:10px 14px!important;
    font-size:12px!important;
  }

  .hero{
    min-height:680px!important;
  }
  .hero-grid{
    width:calc(100% - 48px)!important;
  }
  .hero-grid .copy{
    width:50%!important;
  }
  .copy h1{
    font-size:clamp(52px,7vw,78px)!important;
  }
  .copy p{
    font-size:16px!important;
  }
  .hero-grid .hero-art{
    width:50%!important;
  }
  .hero-grid .hero-art img{
    height:90%!important;
  }

  .two{
    grid-template-columns:1fr 1fr!important;
  }
  .three{
    grid-template-columns:1fr 1fr!important;
  }
  .four{
    grid-template-columns:1fr 1fr!important;
  }

  .about{
    grid-template-columns:1fr 1fr!important;
    gap:40px!important;
  }
  .contact-grid{
    grid-template-columns:1fr 1fr!important;
    gap:40px!important;
  }

  .service-original .hero2{
    grid-template-columns:1fr 1fr!important;
    gap:35px!important;
  }
  .service-original .feature{
    gap:40px!important;
  }
}

/* MOBILE */
@media (max-width: 760px) {
  html,body{
    width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  header{
    height:70px!important;
    min-height:70px!important;
    max-height:70px!important;
  }
  header .nav{
    height:70px!important;
    min-height:70px!important;
    max-height:70px!important;
    width:100%!important;
    padding:0 18px!important;
    gap:0!important;
  }
  header .brand{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
  }
  header .brand img{
    width:34px!important;
    height:34px!important;
  }
  header .brand strong{
    font-size:16px!important;
    letter-spacing:.18em!important;
  }
  header .brand small{
    font-size:6px!important;
  }

  /* Mobile menu */
  header .tabs{
    display:none!important;
    position:absolute!important;
    top:70px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    margin:0!important;
    padding:10px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;
    background:rgba(241,244,246,.99)!important;
    border:1px solid rgba(0,0,0,.10)!important;
    border-radius:12px!important;
    box-shadow:0 18px 45px rgba(0,0,0,.15)!important;
    z-index:10000!important;
  }
  header .tabs.open{
    display:flex!important;
  }
  header .tab{
    width:100%!important;
    padding:14px 14px!important;
    font-size:14px!important;
    border-radius:8px!important;
  }
  header .tab:after{
    display:none!important;
  }
  header .contact-top{
    display:none!important;
  }
  header .menu{
    display:flex!important;
    width:42px!important;
    height:42px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(20,40,52,.22)!important;
    background:transparent!important;
    border-radius:50%!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:4px!important;
    cursor:pointer!important;
  }
  header .menu span{
    display:block!important;
    width:17px!important;
    height:1.5px!important;
    background:#17303f!important;
  }

  .page{
    padding-top:70px!important;
  }

  /* Mobile hero: text first, complete figure below */
  .hero{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .hero-grid{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:0 20px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .hero-grid .copy{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    padding:72px 0 18px!important;
    margin:0!important;
  }
  .copy h1{
    font-size:clamp(48px,15vw,68px)!important;
    line-height:.91!important;
    letter-spacing:-.075em!important;
    margin:15px 0 22px!important;
  }
  .copy p{
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.65!important;
  }
  .actions{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    margin-top:24px!important;
  }
  .actions .btn{
    justify-content:center!important;
    width:100%!important;
  }
  .hero-grid .hero-art{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    height:58vh!important;
    min-height:360px!important;
    max-height:580px!important;
    margin:0!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  .hero-grid .hero-art img{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }

  .container,
  .content>.container,
  .service-original .wrapx,
  footer .container{
    width:calc(100% - 40px)!important;
    max-width:none!important;
  }

  .content{
    padding:65px 0 80px!important;
  }
  .head{
    display:block!important;
    margin-bottom:35px!important;
  }
  .head h1,.head h2{
    font-size:clamp(43px,13vw,60px)!important;
    line-height:.95!important;
    margin:10px 0 18px!important;
  }
  .head p{
    max-width:none!important;
    font-size:15px!important;
  }

  .two,.three,.four{
    grid-template-columns:1fr!important;
  }
  .grid{
    gap:12px!important;
  }
  .card{
    padding:24px!important;
    min-height:auto!important;
  }
  .service{
    min-height:0!important;
  }
  .service ul{
    columns:1!important;
  }

  .about{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .about h3{
    font-size:27px!important;
  }
  .about p{
    font-size:15px!important;
  }
  .values{
    margin-top:30px!important;
  }

  .about-wallpaper{
    background:
      linear-gradient(180deg,rgba(243,246,247,.97),rgba(243,246,247,.985)),
      url("assets/hakkimizda-wallpaper.svg") right top/auto 360px no-repeat!important;
  }
  .about-wallpaper .head{
    display:block!important;
  }

  .contact-grid{
    grid-template-columns:1fr!important;
    gap:35px!important;
  }
  .contact{
    font-size:clamp(48px,14vw,68px)!important;
  }
  .row{
    flex-direction:column!important;
    gap:7px!important;
  }

  footer .footer{
    flex-direction:column!important;
    gap:8px!important;
    line-height:1.5!important;
  }

  /* Solution detail pages */
  .service-original{
    padding:65px 0 80px!important;
  }
  .service-original .hero2{
    grid-template-columns:1fr!important;
    gap:30px!important;
    padding-bottom:55px!important;
  }
  .service-original h1{
    font-size:clamp(48px,13vw,68px)!important;
  }
  .service-original .intro{
    font-size:16px!important;
  }
  .service-original .visual{
    height:220px!important;
  }
  .service-original .feature{
    grid-template-columns:1fr!important;
    gap:30px!important;
    padding:55px 0!important;
  }
  .service-original .feature.darkbox{
    margin:0 -20px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .service-original h2{
    font-size:clamp(34px,10vw,48px)!important;
  }
  .service-original .cards{
    grid-template-columns:1fr!important;
  }

  /* Contact form */
  .form-page{
    padding:65px 0 80px!important;
  }
  .form-wrap{
    width:calc(100% - 40px)!important;
    max-width:none!important;
  }
  .mail-form{
    grid-template-columns:1fr!important;
  }
  .field.full,.form-actions{
    grid-column:auto!important;
  }
  .form-actions .btn{
    width:100%!important;
    justify-content:center!important;
  }
}