/* header.css — siyah üst alan + ortalanmış logo + menü */
.site-header {
    position: relative;
    z-index: var(--z-header);
    background: transparent;
    color: #fff;
    padding: 38px clamp(24px, 7vw, 110px) 18px;
    opacity: 0;
    transform: translateY(-22px);
    transition: opacity .75s ease, transform .75s ease;
}
.main-site.is-visible .site-header { opacity: 1; transform: translateY(0); }
.top-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 42px;
    font-size: 10px;
    letter-spacing: .04em;
    color: rgba(255,255,255,.62);
}
.top-strip > a:first-child { justify-self: start; }
.top-strip > a:last-child { justify-self: end; }
.top-strip a { transition: color .2s ease; }
.top-strip a:hover { color: #fff; }
/* mail (sol) + telefon (sağ) — ikonlu satırlar */
.top-strip-mail, .top-strip-phone { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.top-strip-mail svg, .top-strip-phone svg { width:15px; height:15px; flex-shrink:0; color:var(--color-accent,#f36b21); opacity:1; }
.top-strip-mail span, .top-strip-phone span { letter-spacing:.03em; font-size:11px; color:rgba(255,255,255,.9); }
.site-logo { display:flex; align-items:center; justify-content:center; }
.site-logo img { width: clamp(92px, 9vw, 132px); height: auto; }
.main-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 30px;
    margin-top: 22px;
}
.nav-list {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    gap: clamp(14px, 2.2vw, 36px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .045em;
}
.nav-list a { position:relative; display:inline-flex; align-items:center; gap:6px; padding:8px 0; opacity:.82; transition:opacity .2s ease; }
.nav-list a::before { content:''; position:absolute; left:0; right:100%; bottom:2px; height:1.5px; background:var(--color-accent); transition:right .28s cubic-bezier(.2,.8,.2,1); }
.nav-list a:hover,.nav-list li.active>a { opacity:1; }
.nav-list a:hover::before,.nav-list li.active>a::before { right:0; }
.nav-item.has-children { position:relative; }
.nav-item.has-children>a::after { content:''; width:5px; height:5px; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); margin-top:-3px; }
.submenu { position:absolute; top:100%; left:0; min-width:190px; padding:9px; background:rgba(8,9,9,.98); border:1px solid rgba(255,255,255,.14); border-radius:12px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s ease; }
.nav-item.has-children:hover .submenu { opacity:1; visibility:visible; transform:none; }
.submenu a { display:block; padding:9px 10px; border-radius:8px; font-weight:500; }
.submenu a:hover { background:rgba(255,255,255,.08); }
.nav-mobile-contact { display:none; }
.nav-backdrop { display:none; }
.nav-toggle { display:none; width:40px; height:40px; position:relative; }
.nav-toggle svg { position:absolute; inset:0; margin:auto; transition:opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-toggle .icon-close { opacity:0; transform:rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .icon-burger { opacity:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .icon-close { opacity:1; transform:rotate(0); }
@media(max-width:960px){
 .site-header{padding-inline:20px}
 .nav-toggle{display:flex;align-items:center;justify-content:center;margin-left:auto;z-index:2}
 /* Menü açıkken kapatma butonu panelin üstünde sabit dursun */
 body.nav-locked .nav-toggle{
   position:fixed; top:16px; right:16px; margin:0;
   z-index:calc(var(--z-modal) + 1); color:#fff;
 }

 /* --- Sağdan açılan mobil menü paneli --- */
 .nav-list{
   position:fixed; top:0; right:0; bottom:0; left:auto;
   width:min(330px,86vw); height:100dvh;
   z-index:var(--z-modal);
   background:#080909;
   border-left:1px solid rgba(255,255,255,.08);
   box-shadow:-18px 0 46px rgba(0,0,0,.5);
   display:flex; flex-direction:column;
   flex-wrap:nowrap;
   align-items:stretch;
   justify-content:flex-start;   /* dikeyde ortalanmasın */
   gap:0;
   padding:96px 0 40px;
   overflow-y:auto;
   -webkit-overflow-scrolling:touch;
   overscroll-behavior:contain;
   transform:translateX(100%);
   transition:transform .35s cubic-bezier(.2,.8,.2,1);
   font-size:13px; letter-spacing:.04em;
 }
 .nav-list.is-open{transform:none}

 /* Panelin üstündeki logo */
 .nav-list::before{
   content:''; position:absolute; top:30px; left:24px;
   width:104px; height:30px;
   background:url('../images/logo.png') left center / contain no-repeat;
 }

 .nav-item{width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
 .nav-list > .nav-item > a{
   display:flex; align-items:center; justify-content:space-between;
   width:100%; padding:15px 24px; opacity:1;
   font-size:12.5px; font-weight:600;
 }
 .nav-list a::before{display:none}          /* masaüstü alt çizgisi kapalı */
 .nav-list li.active > a{color:var(--color-accent,#f36b21)}

 /* Alt menü oku */
 .nav-item.has-children > a::after{
   content:''; width:8px; height:8px; flex-shrink:0;
   border-right:1.5px solid rgba(255,255,255,.6);
   border-bottom:1.5px solid rgba(255,255,255,.6);
   transform:rotate(45deg) translateY(-2px);
   transition:transform .25s ease;
 }
 .nav-item.has-children.is-open > a::after{transform:rotate(-135deg) translateY(-2px)}

 .submenu{
   position:static; opacity:1; visibility:visible; transform:none;
   display:none; background:rgba(255,255,255,.03);
   border:0; border-radius:0; padding:4px 0; min-width:0;
 }
 .nav-item.has-children.is-open .submenu{display:block}
 .submenu a{
   padding:12px 24px 12px 34px; border-radius:0;
   font-size:12px; font-weight:400; color:rgba(255,255,255,.72);
 }
 .submenu a:hover{background:rgba(255,255,255,.06);color:#fff}

 /* Panel altındaki iletişim kısayolları */
 .nav-backdrop{display:block}
 .nav-mobile-contact{
   display:flex;
   margin-top:auto; padding:26px 24px 0;
   display:flex; flex-direction:column; gap:14px;
 }
 .nav-mobile-contact a{
   display:flex; align-items:center; gap:10px;
   font-size:12px; color:rgba(255,255,255,.85);
 }
 .nav-mobile-contact svg{width:15px;height:15px;flex-shrink:0;color:var(--color-accent,#f36b21)}
 .nav-mobile-social{display:flex;gap:10px;margin-top:6px}
 .nav-mobile-social a{
   width:34px;height:34px;border-radius:50%;
   display:grid;place-items:center;
   border:1px solid rgba(255,255,255,.18);
 }
 .nav-mobile-social svg{width:15px;height:15px;color:#fff}

 /* Menü açıkken arka planı karart */
 .nav-backdrop{
   position:fixed; inset:0; z-index:calc(var(--z-modal) - 1);
   background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
   opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease;
 }
 .nav-backdrop.is-open{opacity:1;visibility:visible}
 body.nav-locked{overflow:hidden}

 /* ÖNEMLİ: .site-header üzerindeki transform, içindeki position:fixed
    paneli viewport yerine header'a göre konumlandırıyordu. Menü açıkken
    transform'u sıfırlayıp header'ı üst katmana alıyoruz. */
 body.nav-locked .site-header{transform:none !important;position:relative !important;z-index:var(--z-modal)}
 body.nav-locked .hero-shell{overflow:visible}
 /* backdrop-filter de aynı şekilde fixed için containing block yaratır */
 .main-nav{backdrop-filter:none !important}
 body.nav-locked .site-header.scrolled{backdrop-filter:none !important}
}
@media(max-width:800px){
  .site-header{position:static !important;background:#0D0D0D}
  .site-header.scrolled{position:fixed !important}
}
@media(max-width:620px){.top-strip>a:not(.site-logo){display:none}.top-strip{grid-template-columns:1fr}.site-logo{justify-self:center}.site-header{padding-top:12px}
 .top-strip--compact .top-strip-mail span{display:none}}

.site-header{position:absolute;top:0;left:0;width:100%;}
.site-header.scrolled{position:fixed;background:rgba(8,9,9,.92);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.28);animation:fade .3s;padding-top:16px;padding-bottom:16px}
.site-header.scrolled .top-strip{min-height:0;margin-bottom:10px;opacity:.85}
.site-header.scrolled .site-logo img{width:clamp(78px,7vw,104px)}
.site-header.scrolled .main-nav{margin-top:10px}
@keyframes fade{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(max-width:620px){.site-header.scrolled .top-strip{display:none}.site-header.scrolled .main-nav{margin-top:0}}

/* --- İç sayfalar için kompakt header (Hakkımızda, İletişim, ...) --- */
.site-header--compact{padding:22px clamp(24px,7vw,110px) 0}
.top-strip--compact{display:flex;justify-content:space-between;align-items:center;gap:22px;min-height:0;padding-bottom:14px}
.top-strip-social{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.top-strip-social span{opacity:.4}
.top-strip-social a:hover{color:#fff}
.top-strip--compact .top-strip-mail,.top-strip--compact .top-strip-phone{font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.62)}
.top-strip--compact .top-strip-mail:hover,.top-strip--compact .top-strip-phone:hover{color:#fff}
.site-header--compact .main-nav{margin-top:0;background:rgba(15,12,10,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 16px 10px 22px;backdrop-filter:blur(6px)}
.site-logo--inline{display:flex;align-items:center;flex-shrink:0}
.site-logo--inline img{height:30px;width:auto}
.site-header--compact .nav-list{gap:clamp(16px,2vw,32px)}
@media(max-width:960px){.site-header--compact .main-nav{border-radius:20px;padding:10px 16px}}
@media(max-width:620px){.top-strip--compact{justify-content:center}.site-header--compact{padding-top:16px}}
.site-header--compact.scrolled{padding-top:10px}
.site-header--compact.scrolled .top-strip--compact{display:none}

/* Menü artık daha uzun (ÇÖZÜM ORTAKLARIMIZ) — masaüstünde tek satırda
   kalabilmesi için harf aralığını biraz kısıyoruz. */
@media(min-width:961px){
  .nav-list{flex-wrap:nowrap}
  .nav-list a{white-space:nowrap}
}
@media(max-width:1150px){ .nav-list{font-size:9.5px;gap:clamp(12px,1.8vw,26px)} }