/* =============================================================================
   GS KOR İSKELE MÜHENDİSLİĞİ — RESPONSIVE KATMANI
   Bu dosya SADECE media query içerir: tablet/mobil uyarlamaları, yazdırma ve
   azaltılmış hareket tercihi. Temel stiller: style.css
   Kırılım noktaları: 1320px · 1200px · 992px · 768px · 576px · 400px
   ========================================================================== */

/* =============================================================================
   0) <= 1320px — masaüstü header'ın sığmadığı ara bant
   Tam header (logo + 8 menü öğesi + telefon + CTA) ~1320px istiyor; 1201-1319
   arasında 5-24px yatay taşma yapıyordu. Telefon numarası üst şeritte kalıyor.
   ========================================================================== */
@media (max-width:1320px){
  .navbar__inner{gap:14px}
  .nav{gap:14px}
  .nav__link{padding:10px 7px;font-size:.8rem}
  .nav__cta{padding-left:10px}
  .nav__cta .btn span[data-site="phone"]{display:none}
  .nav__cta .btn--outline{padding-inline:12px}

  /* 4 kolonda referans rozetleri sığmıyor, 3 kolona düş */
  .ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =============================================================================
   1) <= 1200px — geniş tablet / küçük dizüstü
   ========================================================================== */
@media (max-width:1200px){
  :root{--container-pad:18px}

  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
  .lb__prev{left:-8px}
  .lb__next{right:-8px}
}

/* =============================================================================
   2) <= 992px — tablet
   ========================================================================== */
@media (max-width:992px){
  html{scroll-padding-top:92px}

  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid,
  .sys-grid,
  .post-grid,
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .stats--light .stat:nth-child(n+3){border-top-color:var(--line)}

  .process{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .process::before{display:none}

  .sys-detail{grid-template-columns:1fr;gap:26px}
  .sys-detail--flip .sys-detail__media,
  .sys-detail--flip .sys-detail__body{order:0}
  .sys-detail__media,
  .sys-detail--flip .sys-detail__media{clip-path:none;border-radius:var(--r-md)}

  .cta-band__inner{flex-direction:column;align-items:flex-start;text-align:left}
  .cta-band__title{max-width:none}

  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .footer__col--brand{grid-column:1 / -1;max-width:none}

  .article__body h2{font-size:var(--fs-xl)}
  .faq__a{padding-right:30px}
}

/* =============================================================================
   3) <= 768px — MOBİL: nav panel modu, tek sütun, alt çubuk
   ========================================================================== */
@media (max-width:768px){
  html{scroll-padding-top:76px}

  /* Alt sabit çubuk kadar gövde boşluğu */
  body{padding-bottom:68px}

  /* --- Topbar: yalnızca telefon --- */
  .topbar__inner{justify-content:center;min-height:36px}
  .topbar__item--addr,
  .topbar__item[href^="mailto"]{display:none}
  .topbar__item--tel{margin:0}

  /* --- Marka logosu: kompakt sürüme geç --- */
  .brand__logo{height:34px}
  .brand__logo--full{display:none}
  .brand__logo--compact{display:block}
  .site-header.is-shrunk .brand__logo{height:30px}

  /* --- Hamburger görünür --- */
  .nav-toggle{display:inline-flex}
  .navbar__inner{min-height:64px}
  .site-header.is-shrunk .navbar__inner{min-height:56px}

  /* --- Nav: sağdan açılan tam yükseklikte beyaz panel --- */
  .nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:var(--z-nav);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    width:min(340px,86vw);
    max-width:100%;
    margin:0;
    padding:22px 22px calc(28px + env(safe-area-inset-bottom,0));
    background:var(--surface);
    border-left:1px solid var(--line);
    box-shadow:-18px 0 44px rgba(15,27,51,.22);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform var(--t) var(--ease);
  }
  .nav.is-open{transform:translateX(0)}

  .nav::before{
    /* panel üstünde ince mavi vurgu çizgisi */
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:var(--brand-500);
  }

  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:26px 0 18px;
    width:100%;
  }
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__link{
    padding:14px 2px;
    font-size:var(--fs-md);
    font-weight:600;
    letter-spacing:.01em;
    color:var(--ink);
    white-space:normal;
  }
  .nav__link::after{left:2px;right:auto;bottom:8px;width:28px}
  .nav__link:hover::after,
  .nav__link.is-active::after{transform:scaleX(1)}

  .nav__cta{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    width:100%;
    padding:16px 0 0;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .nav__cta .btn{width:100%;white-space:normal}
  .nav__cta .btn span[data-site="phone"]{display:inline}

  /* --- Tek sütuna inen ızgaralar --- */
  .grid--3,
  .grid--4{grid-template-columns:1fr}
  .svc-grid,
  .sys-grid,
  .post-grid,
  .why-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* --- Süreç dikey --- */
  .process{grid-template-columns:1fr;row-gap:0}
  .process__step{
    display:grid;
    grid-template-columns:54px 1fr;
    column-gap:16px;
    align-items:start;
    text-align:left;
    padding-bottom:26px;
    position:relative;
  }
  .process__step:not(:last-child)::before{
    content:"";
    position:absolute;
    left:26px;
    top:58px;
    bottom:4px;
    width:2px;
    background:repeating-linear-gradient(180deg,
      rgba(8,104,184,.45) 0 8px,transparent 8px 16px);
  }
  .section--dark .process__step:not(:last-child)::before{
    background:repeating-linear-gradient(180deg,
      rgba(90,166,220,.5) 0 8px,transparent 8px 16px);
  }
  .process__num{grid-row:1 / span 2;margin-bottom:0}
  .process__title{margin-top:6px}

  /* --- Hero --- */
  .hero{min-height:min(78vh,660px);padding-block:64px 72px}
  .hero__title{max-width:none}
  .hero__text{font-size:var(--fs-md)}
  .hero__actions{gap:10px}
  .hero__actions .btn{flex:1 1 220px}

  /* --- Footer tek sütun --- */
  .footer__grid{grid-template-columns:1fr;gap:30px;padding-block:44px}
  .footer__col--brand{grid-column:auto}
  .brand__logo--stacked{width:132px;max-width:52%}
  .footer__bar-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .footer__legal{gap:6px 14px}

  /* --- Bölüm başlıkları --- */
  .section__head{margin-bottom:28px}
  .sys-detail{padding-block:28px}

  /* --- Form tek sütun --- */
  .form__row,
  .form__row--3{grid-template-columns:1fr}
  .form > .btn{align-self:stretch;width:100%}

  /* --- Makale --- */
  .article__body{font-size:var(--fs-base)}
  .article__hero{clip-path:none}
  .faq__q{font-size:var(--fs-md);gap:12px}
  .faq__a{padding-right:8px}

  /* --- Lightbox: ok butonları alta --- */
  .lb{padding:14px}
  .lb__dialog{gap:10px;padding-bottom:64px}
  .lb__img{max-width:94vw;max-height:64vh}
  .lb__close{top:-56px;right:0;width:46px;height:46px}
  .lb__prev,
  .lb__next{
    top:auto;
    bottom:0;
    width:46px;
    height:46px;
    transform:none;
  }
  .lb__prev{left:calc(50% - 58px)}
  .lb__next{right:calc(50% - 58px)}
  .lb__prev:hover,
  .lb__next:hover{transform:none}
  .lb__caption{font-size:var(--fs-2xs)}

  /* --- Yüzen öğeler alt çubuğun üstüne --- */
  .mobile-bar{display:grid}
  .wa-float{
    right:16px;
    bottom:calc(80px + env(safe-area-inset-bottom,0));
    width:52px;
    height:52px;
  }
  .wa-float svg{width:27px;height:27px}
  .to-top{
    right:16px;
    bottom:calc(142px + env(safe-area-inset-bottom,0));
    width:44px;
    height:44px;
  }

  /* --- Tablo taşmasını engelle --- */
  .ref-table{display:block;overflow-x:auto;white-space:nowrap}
  .article__body table{display:block;overflow-x:auto}
}

/* =============================================================================
   4) <= 576px — küçük telefon
   ========================================================================== */
@media (max-width:576px){
  :root{--container-pad:16px;--gap:16px}

  /* grid--2 bu noktaya kadar iki sütun kalabilir, burada tek sütuna iner */
  .grid--2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{padding:22px 16px;border-left:0}
  .stat:not(:first-child){border-top:1px solid rgba(255,255,255,.14)}
  .stats--light .stat:not(:first-child){border-top-color:var(--line)}
  .ref-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

  .hero{min-height:auto;padding-block:52px 60px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;flex:0 0 auto}
  .hero-badge{font-size:.688rem;padding:8px 12px 8px 11px}

  .page-hero{padding-block:36px 40px}
  .breadcrumb{font-size:.688rem;gap:4px 8px}

  .btn{padding:13px 20px}
  .btn--lg{padding:15px 24px;font-size:var(--fs-md)}

  .svc-card,
  .sys-card__body,
  .post-card__body{padding:20px}
  .svc-card__icon{width:48px;height:48px}
  .svc-card__icon .ico,
  .svc-card__icon svg{width:24px;height:24px}

  .placeholder-note{font-size:.78rem;padding:9px 12px;margin-bottom:18px}
  .toc{padding:16px 18px}
  .note{padding:14px 16px}
  .article__body blockquote{padding:16px 18px;font-size:var(--fs-md)}
  .article__body h2{padding-left:12px}

  .marquee__track{gap:12px}
  .ref-badge{min-width:200px;padding:12px 16px 12px 13px}
  .ref-badge__mark{width:36px;height:36px}

  .social__link{width:38px;height:38px}
  .footer__title{font-size:var(--fs-md)}

  .form__input,
  .form__select,
  .form__textarea{padding:12px 13px;font-size:16px} /* iOS zoom engeli */
  .form__textarea{min-height:130px}

  .mobile-bar__item{min-height:56px;font-size:.625rem;letter-spacing:.04em}
  .mobile-bar__item .ico{width:19px;height:19px}
  body{padding-bottom:64px}
}

/* =============================================================================
   5) <= 400px — çok dar ekran (360px taşma garantisi)
   ========================================================================== */
@media (max-width:400px){
  :root{--container-pad:14px}

  img,svg,video,iframe,table{max-width:100%}

  .gallery{grid-template-columns:1fr}
  .nav{width:min(300px,92vw);padding:18px 16px 24px}

  .brand__logo{height:30px}
  .site-header.is-shrunk .brand__logo{height:28px}
  .nav-toggle{width:42px;height:42px}

  .hero__title{font-size:clamp(1.9rem,7.6vw,2.4rem)}
  .hero__text{font-size:var(--fs-base)}
  .hero-badge{width:100%}

  .section__title,
  .page-hero__title{overflow-wrap:anywhere}

  .stat__num{font-size:2rem}
  .process__step{grid-template-columns:46px 1fr;column-gap:12px}
  .process__num{width:46px;height:46px;font-size:var(--fs-lg)}
  .process__step:not(:last-child)::before{left:22px;top:50px}

  .footer__bar-inner{padding-block:14px}
  .footer__legal{flex-direction:column;align-items:flex-start;gap:4px}

  .lb__img{max-height:56vh}
  .wa-float{width:48px;height:48px;right:12px}
  .wa-float svg{width:25px;height:25px}
  .to-top{right:12px;width:40px;height:40px}

  .mobile-bar__item{padding:8px 3px;font-size:.594rem}
  .mobile-bar__item span{overflow-wrap:anywhere}
}

/* =============================================================================
   6) YATAY / ALÇAK EKRAN
   ========================================================================== */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:48px}
  .nav{padding-block:14px}
  .lb__img{max-height:72vh}
}

/* =============================================================================
   7) İŞARETLEME CİHAZI DOKUNMATİK İSE — hover'a bağımlı öğeleri hep göster
   ========================================================================== */
@media (hover:none){
  .gallery__zoom{opacity:1;transform:none}
  .svc-card:hover,
  .sys-card:hover,
  .post-card:hover,
  .gallery__item:hover,
  .why-item:hover{transform:none}
  .btn:hover{transform:none}
}

/* =============================================================================
   8) AZALTILMIŞ HAREKET TERCİHİ — TÜM animasyon ve geçişler iptal
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }

  html{scroll-behavior:auto}

  /* JS çalışsa da çalışmasa da içerik görünür kalsın */
  .reveal,
  .reveal.is-visible{opacity:1 !important;transform:none !important}

  /* Sürekli dönen/kayan efektleri tamamen durdur */
  .marquee__track{animation:none !important;transform:none !important}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .wa-float::after{animation:none !important;display:none}
  .faq__a{animation:none !important}

  /* Hover yükselmelerini kaldır */
  .btn:hover,
  .svc-card:hover,
  .sys-card:hover,
  .post-card:hover,
  .gallery__item:hover,
  .why-item:hover,
  .stat:hover,
  .social__link:hover,
  .ref-badge:hover,
  .wa-float:hover{transform:none !important}

  .sys-card:hover .sys-card__media img,
  .post-card:hover .post-card__media img,
  .gallery__item:hover .gallery__img,
  .sys-detail__media:hover img{transform:none !important}
}

/* =============================================================================
   9) YAZDIRMA
   ========================================================================== */
@media print{
  @page{margin:14mm}

  html,
  body{
    background:#FFFFFF !important;
    color:#000000 !important;
    font-size:11pt;
    line-height:1.45;
    overflow:visible !important;
    padding-bottom:0 !important;
  }

  /* Ekrana özgü / etkileşimli her şey gizlenir */
  .site-header,
  .topbar,
  .navbar,
  .nav,
  .nav-toggle,
  .nav-backdrop,
  .site-footer,
  .wa-float,
  .to-top,
  .mobile-bar,
  .skip-link,
  .lb,
  .gallery__zoom,
  .cta-band,
  .marquee,
  .breadcrumb,
  .hero__media,
  .hero__overlay,
  .form,
  .map-embed,
  video,
  iframe{display:none !important}

  /* Siyah-beyaz sadeleştirme */
  *,
  *::before,
  *::after{
    background:transparent !important;
    color:#000000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
    filter:none !important;
    clip-path:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    animation:none !important;
    transition:none !important;
  }

  .section,
  .section--alt,
  .section--tint,
  .section--dark,
  .hero,
  .page-hero{
    padding-block:10mm 6mm !important;
    background:#FFFFFF !important;
    color:#000000 !important;
    min-height:0 !important;
  }

  h1,h2,h3,h4,h5,h6{
    color:#000000 !important;
    page-break-after:avoid;
    break-after:avoid;
  }
  h1{font-size:20pt}
  h2{font-size:16pt}
  h3{font-size:13pt}

  p,li,blockquote,table,figure,img{page-break-inside:avoid;break-inside:avoid}

  img{max-width:100% !important;filter:grayscale(100%) !important}

  .reveal{opacity:1 !important;transform:none !important}

  .grid,
  .grid--2,
  .grid--3,
  .grid--4,
  .svc-grid,
  .sys-grid,
  .post-grid,
  .why-grid,
  .gallery,
  .ref-grid,
  .process,
  .stats,
  .sys-detail,
  .form__row{
    display:block !important;
  }

  .svc-card,
  .sys-card,
  .post-card,
  .why-item,
  .note,
  .toc,
  .faq__item,
  .stat,
  .ref-badge{
    border:1px solid #999999 !important;
    margin-bottom:5mm;
    padding:4mm;
    page-break-inside:avoid;
    break-inside:avoid;
  }

  table,
  .ref-table{
    display:table !important;
    width:100% !important;
    white-space:normal !important;
    border:1px solid #999999 !important;
  }
  th,td{border:1px solid #999999 !important;padding:2mm !important}

  /* Yer tutucu uyarısı yazdırmada da görünür kalır */
  .placeholder-note{
    display:block !important;
    border:1px dashed #999999 !important;
    border-left:3px solid #333333 !important;
    color:#333333 !important;
    padding:3mm 4mm !important;
    margin:0 0 4mm !important;
    max-width:none !important;
    page-break-inside:avoid;
    break-inside:avoid;
  }

  .table-wrap{overflow:visible !important}

  /* SSS cevapları yazdırmada tamamen açık */
  .faq__a{display:block !important;padding:0 0 4mm !important}
  .faq__q::after{display:none !important}

  /* Bağlantılarda hedef adresi yazdır */
  a{text-decoration:underline !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:9pt}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:9pt}
  a[href^="#"]::after,
  a[href^="/"]::after,
  a[href^="."]::after{content:""}
}

/* =============================================================================
   9) İÇ SAYFA HERO YÜKSEKLİĞİ (bkz. style.css 28b)
   ========================================================================== */
@media (max-width:960px){
  .page-hero{min-height:min(42vh,330px)}
}
@media (max-width:640px){
  .page-hero{min-height:min(38vh,260px)}
}
@media (max-width:480px){
  .page-hero{min-height:auto}
}
@media (max-height:520px) and (orientation:landscape){
  .page-hero{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  .page-hero__media img{filter:none}
}
@media print{
  .page-hero{min-height:auto;display:block}
  .page-hero__media{display:none}
}