:root{--bg:#0b1c2d;--bg2:#10283f;--accent:#c89b3c;--text:#1b1f24;--muted:#6b7785;--card:#fff}
*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
html,body{height:100%;margin:0;padding:0;overscroll-behavior-y:none;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch}
body{color:var(--text);line-height:1.6;background:#fff;min-height:100%}
a{text-decoration:none;color:inherit}
.container{width:92%;max-width:1200px;margin:auto}
.header{position:sticky;top:0;background:var(--bg);color:#fff;z-index:60;box-shadow:0 6px 18px rgba(2,8,20,.30);transition:box-shadow .28s ease,padding .28s;}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
.navbar--stack{flex-direction:column;align-items:flex-start}
.brand-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}
.logo { display:inline-block; }
.logo img { display:none; } /* svg iptal edildi, eski görsel gizlendi */

.logo-text {
  display: flex;
  flex-direction: row; /* Promer ve MÜHENDİSLİK yan yana */
  align-items: baseline;
  gap: 8px;
}

.logo-top {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: #c31515;
  letter-spacing: 0.5px;
}

.logo-bottom {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px; /* biraz daha büyük yan yana görünmesi için */
  color: #fff; /* beyaz */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Küçük ekranlar */
@media (max-width: 700px) {
  .logo-text { gap:6px; }
  .logo-top { font-size: 22px; }
  .logo-bottom { font-size: 12px; letter-spacing: 0.8px; }
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.brand{display:flex;flex-direction:column;gap:2px}
.brand small{opacity:.85;font-size:12px;color:rgba(255,255,255,.92)}
.navlinks{display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin-right:60px;position:relative;box-shadow:0 4px 8px rgba(0,0,0,.12);}
.navlinks::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;pointer-events:none;}
.navlinks a{position:relative;display:inline-block;font-size:13px;text-transform:uppercase;opacity:.95;color:#fff;padding-bottom:8px;transition:transform .15s ease,color .15s ease}
.navlinks a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;background:var(--accent);width:100%;transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.2,.9,.2,1)}
.navlinks a:hover{transform:translateY(-3px);opacity:1}
.navlinks a:hover::after{transform:scaleX(1)}
.navlinks a.active,.navlinks a[aria-current="page"],.navlinks a[style*="text-decoration:underline"]{opacity:1}
.navlinks a.active::after,.navlinks a[aria-current="page"]::after,.navlinks a[style*="text-decoration:underline"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-block;background:var(--accent);color:#111;padding:12px 20px;border-radius:10px;font-weight:700;transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; will-change: transform;}
.btn:hover{
  filter:brightness(1.05);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(2,8,20,.18);
}
.btn:active{
  transform: translateY(0) scale(.99);
}
.lang-btn{
  background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:8px 12px;border-radius:8px;font-weight:700;font-size:13px;
  cursor:pointer;transition:all .2s ease;margin-right:8px;
}
.lang-btn:hover{background:rgba(255,255,255,.15);border-color:#fff}
@media (max-width: 720px){
  .lang-btn{margin-right:12px;padding:6px 10px}
}

.burger{display:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:10px 12px;font-size:18px;cursor:pointer;pointer-events:auto}
.mobile{display:none;flex-direction:column;gap:10px;padding:12px 0 18px 0;border-top:1px solid rgba(255,255,255,.12)}
.mobile a{padding:10px 0;opacity:.9}
.hero{background:var(--bg);color:#fff}
.hero-inner{display:block;padding:22px 0}
.hero h1{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:14px}
.hero p{opacity:.9;max-width:60ch;margin-bottom:18px}
.hero-media{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));border-radius:12px;overflow:hidden}
.hero-media .swiper{width:100%}
.hero-media .swiper-wrapper{display:flex;align-items:stretch}
.hero-media .swiper-slide{position:relative;overflow:hidden}
.hero-media .swiper-slide img{width:100%;display:block;height:240px;object-fit:cover;max-width:100%}
@media (max-width: 640px){
  .hero-media .swiper-slide img{height:auto;aspect-ratio:16/9;object-fit:cover}
}
@media (min-width: 640px){
  .hero-media .swiper-slide img{height:300px}
}
@media (min-width: 1100px){
  .hero-media .swiper-slide img{height:360px}
}
.hero-media .slide-caption{position:absolute;left:18px;bottom:18px;background:rgba(0,0,0,.6);padding:14px;border-radius:6px;color:#fff;text-align:left}
.hero-media .slide-title{font-weight:800;letter-spacing:1px;font-size:16px}
.hero-media .slide-sub{opacity:.9;margin-top:6px;font-size:13px}
.hero-media .swiper-button-prev, .hero-media .swiper-button-next{color:#fff}
.hero-media .swiper-pagination-bullet{background:rgba(255,255,255,.6)}
.hero-media.full-swiper{border-radius:18px}
.section{padding:70px 0}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:26px}
.section-title{font-size:28px}
.section-sub{color:var(--muted);max-width:70ch}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid #e9eef5;border-radius:16px;padding:20px;box-shadow:0 10px 25px rgba(11,28,45,.06);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,28,45,.10)}
.card:active{transform:translateY(0);box-shadow:0 6px 18px rgba(11,28,45,.12)}
.card p{color:var(--muted)}
.kicker{color:var(--accent);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.8px;margin-bottom:8px}
.project{padding:0;overflow:hidden}
.project img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.project .meta{padding:16px 18px}
.meta .title{font-weight:800}
.list{margin-top:10px;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}
.page-hero{width:100%;border-radius:18px;border:1px solid #e9eef5;box-shadow:0 10px 25px rgba(11,28,45,.06);display:block;max-height:none;height:auto;object-fit:contain}
/* gallery grid: responsive cards with equal sizes */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px; /* consistent spacing */
}
.gallery > div{
  display:flex;
  flex-direction:column;
}
/* card container sets an aspect ratio so all cards are identical regardless of image dimensions */
.gallery a{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e9eef5;
  box-shadow:0 10px 25px rgba(11,28,45,.06);
  transition:transform .2s ease,box-shadow .2s ease;
  cursor:pointer;
  aspect-ratio:4/3; /* adjust as desired */
}
.gallery a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,28,45,.10)}
.gallery a:active{transform:translateY(0);box-shadow:0 6px 18px rgba(11,28,45,.12)}
/* image fills the card completely and scales appropriately */
.gallery img{
  width:100%;
  height:100%;
  object-fit:contain; /* show full image without cropping */
  object-position:center center;
  background:#fff; /* in case of letterboxing */
  display:block;
}
.gcap{display:none}
.gcap{font-size:12px;color:var(--muted);margin-top:8px}
.footer{background:var(--bg);color:#fff;padding:38px 0;margin-top:40px}
.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
.footbar{border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding-top:14px;opacity:.85;font-size:13px}

/* --- Değişiklikler: header scroll animasyonu kaldırıldı, MÜHENDİSLİK beyaz yapıldı,
      menü ve "Bize Ulaşın" sağa hizalandı, butona hafif dokunma animasyonu eklendi --- */

/* header--scrolled: aşağı kayma transform'u kaldırıldı, sadece gölge/padding kalsın */
.header--scrolled{
  box-shadow: 0 18px 40px rgba(2,8,20,.45);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* global header shadow and scroll-direction animations */
.header {
  /* include transform in transition so hide/show is smooth */
  transition: box-shadow .28s ease,padding .28s,transform .3s ease;
}

/* when user scrolls down, hide header offscreen */
.header--hidden {
  transform: translateY(-100%);
}

/* when user scrolls up, header returns (no extra class needed; removal of --hidden does it) */


/* Mühendislik yazısını beyaz yap */
.logo-bottom {
  color: #fff; /* beyaz */
}

/* Masaüstünde navbar yatay: logo sol, navlinks+cta sağda aynı hizada */
@media (min-width: 721px) {
  .navbar--stack{ flex-direction:row; align-items:center; }
  .brand-row{ flex-direction:row; align-items:center; gap:12px; width:auto; }
  .nav-row{ display:flex; align-items:center; justify-content:flex-end; gap:16px; padding-top:0; border-top:none; width:auto; }
}

/* Mobilde önceki ayrımlar kalsın */
@media (max-width: 720px){
  .nav-row{ flex-direction:column; align-items:flex-start; padding-top:10px; border-top:1px solid rgba(255,255,255,.12) }
  .brand-row{ flex-direction:column; align-items:flex-start; width:100% }
}

/* Mobile hamburger/menu behavior */
@media (max-width: 720px) {
  .burger{display:block}
  .nav-cta{width:100%;display:flex;justify-content:space-between;align-items:center}
  /* hide horizontal navlinks on mobile by default */
  .navlinks{display:flex;flex-direction:column;gap:12px;width:100%;overflow:hidden;max-height:0;transition:max-height .7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s ease;padding:0;margin:0;box-shadow:none}
  .navlinks a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}
  /* when open, allow content to show */
  .navlinks.open{max-height:640px;padding-top:12px;padding-bottom:6px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
}

/* Submit button modern animation + loading spinner */
.submit-btn{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,background .18s ease;cursor:pointer;border:0;outline:0;-webkit-appearance:none}
.submit-btn:hover{transform:translateY(-3px);box-shadow:none;outline:0}
.submit-btn:active{transform:translateY(-1px) scale(.995)}
.submit-btn.loading{pointer-events:none;opacity:0.98}
.submit-btn.loading::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,0.85);border-top-color:transparent;animation:btn-spin .9s linear infinite}

@keyframes btn-spin{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}

/* small adaptive adjustments for spinner color on light buttons */
.btn{display:inline-block;background:var(--accent);color:#111;padding:12px 20px;border-radius:10px;font-weight:700}
.submit-btn{color:#111}

/* Inline success message shown beneath the submit button */
.form-success{margin-top:12px;color:var(--accent);font-weight:700;font-size:14px;display:none}
.form-success[style*="display:block"]{opacity:0;animation:fade-in .28s ease forwards}

@keyframes fade-in{to{opacity:1}}

/* Responsive improvements: make grids/images/nav adapt and avoid horizontal overflow */
img, .page-hero, .gallery img, .hero-media img{max-width:100%;height:auto;display:block}

@media (max-width:1100px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  /* keep cards flexible but reduce min width slightly */
  .gallery{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
  .hero-media .swiper-slide img{height:auto}
}

@media (max-width:768px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .container{width:94%}
  .navbar{padding:12px 0}
  .navlinks{margin-right:0}
  .nav-row{padding-right:0}
  .page-hero{max-height:none;height:auto}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .section{padding:40px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .section-sub{max-width:100%}
}

@media (max-width:420px){
  .logo-top{font-size:20px}
  .logo-bottom{font-size:11px}
  .nav-cta .btn{padding:10px 14px}
  .hero h1{font-size:clamp(22px,6vw,32px)}
}

/* footer mobile enhancements */
/* allow paragraphs to wrap naturally at word boundaries;
   avoid breaking individual words unless absolutely necessary */
.footergrid p{word-break:normal;overflow-wrap:break-word;}

/* --- gallery image modal/zoom --- */
.image-modal{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.8);
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;transition:opacity .2s ease;
  z-index:1000;
}
.image-modal.open{visibility:visible;opacity:1;}
.image-modal img{
  max-width:90%;max-height:90%;cursor:grab;
  transition:transform .2s ease;
  user-select:none;
}
@media (max-width:720px){
  .footergrid{grid-template-columns:1fr; text-align:center;}
  .footergrid h4, .footergrid p{text-align:center;}
}

/* Ensure no element causes horizontal overflow */
*:focus{outline-offset:2px}