/* ============================================================
   BASE.CSS — HEADER • FOOTER • 9'LU GRID PANEL  (final)
   ============================================================ */

/* ========== [GLOBAL DEĞİŞKENLER] ========== */
:root{
  /* Renkler */
  --clr-bg:#ffffff;                 /* Sayfa arkaplan rengi */
  --clr-ink:#0b0f17;                /* Ana metin rengi */
  --clr-muted:#6b7a8a;              /* Soluk metin rengi */
  --clr-white:#ffffff;              /* Beyaz sabiti */
  --clr-black:#000000;              /* Siyah sabiti */
  --clr-divider:rgba(0,0,0,.10);    /* İnce ayırıcı çizgiler */

  /* Header ölçüleri */
  --header-h-initial:20vh;          /* Şeffaf mod yüksekliği */
  --header-h-sticky:80px;           /* Sticky mod yüksekliği  */
  --header-z:50;                    /* Header katman sırası */
  --header-pad-x: clamp(12px,3vw,28px); /* Header yatay padding */

  /* Menü / tipografi */
  --menu-gap:24px;                  /* Menü elemanları arası boşluk */
  --menu-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Yazı tipi */
  --menu-font-size:14px;            /* Menü yazı boyutu */
  --menu-letter:.1px;               /* Menü harf aralığı */

  /* Logo tipografisi */
  --logo-font:"Bodoni Moda",serif; /* Logo fontu */
  --logo-lh:1.05;                   /* Logo satır yüksekliği */
  --logo-size-1:14px;               /* Logo satır 1 boyutu */
  --logo-size-2:16px;               /* Logo satır 2 boyutu */
  --logo-size-3:18px;               /* Logo satır 3 boyutu */
  --logo-tracking:.6px;             /* Logo harf aralığı */

  /* Animasyon süreleri */
  --t-fast:.18s;                    /* Hızlı geçiş */
  --t-medium:.28s;                  /* Orta geçiş */

  /* Footer */
  --footer-h:100vh;                 /* Footer yüksekliği (tasarımsal) */

  /* Quick Panel genişliği */
  --qp-w: min(520px, 94vw);         /* Sağ panel genişliği */
}

/* ========== [GENEL] ========== */
html,body{ margin:0; padding:0 }
*{ box-sizing:border-box }
body{ background:var(--clr-bg); color:var(--clr-ink); font-family:var(--menu-font) }
.container{ width:min(1200px,92%); margin:0 auto }

/* ============================================================
   HEADER — Şeffaf(20vh) → Scroll sonrası siyah(sticky)
   ============================================================ */
#siteHeader{
  position:fixed; left:0; right:0; /* Üste sabitle */
  top:0;                           /* Sayfanın tepesine yapış */
  padding-top:0;                   /* Toplam yükseklik koru */
  background-clip:padding-box;     /* Arkaplan çizgisi taşmasını engelle */
  z-index:var(--header-z);         /* Header z-index */
  transform:translateZ(0); will-change:transform; /* Performans iyileştirme */
  transition:
    background-color var(--t-medium) ease,
    height           var(--t-medium) ease,
    transform        var(--t-fast)   ease;         /* Scroll durum geçişleri */
}
.site-header.is-transparent{
  height:var(--header-h-initial);                 /* İlk durumda yüksek */
  background:rgba(0,0,0,0.003);                   /* Neredeyse şeffaf */
  -webkit-backdrop-filter:none; backdrop-filter:none; /* Blur yok */
  border-bottom:none;                              /* Alt çizgi yok */
}
.site-header.is-solid{
  height:var(--header-h-sticky);                  /* Sticky yükseklik */
  background:#000; color:#fff;                    /* Siyah zemin, açık metin */
}

/* Header alt çizgi (yalnız sticky) */
.header-divider{ height:1px; width:100%; background:var(--clr-divider) }
.site-header.is-transparent .header-divider{ display:none }
.site-header.is-solid       .header-divider{ display:block }

/* Header iç düzen: logo + menü */
.nav{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; /* Yatay dağılım */
  padding:0 var(--header-pad-x);                                    /* Yatay iç boşluk */
  gap:24px;                                                         /* Öğeler arası boşluk */
}

/* ---------- LOGO ---------- */
.brand{ display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none }
.logo-stack{ display:flex; flex-direction:column; line-height:var(--logo-lh) }
.logo-stack em{
  font-family:var(--logo-font); font-style:normal; font-weight:900;
  letter-spacing:var(--logo-tracking); text-transform:uppercase; color:#fff;
}
.logo-stack em:nth-child(1){ font-size:var(--logo-size-1) }
.logo-stack em:nth-child(2){ font-size:var(--logo-size-2) }
.logo-stack em:nth-child(3){ font-size:var(--logo-size-3) }

/* ---------- MENÜ ---------- */
.menu{
  display:flex; align-items:center; gap:var(--menu-gap);
  list-style:none; margin:0; padding:0;
  font-size:var(--menu-font-size); letter-spacing:var(--menu-letter);
}
.menu > li{ position:relative; display:flex; align-items:center }
.menu > li > a,
.menu > li > button:not(.grid9){                /* grid9’un kendi stili var */
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 6px; line-height:1;
  background:none; border:0; cursor:pointer;
  text-decoration:none; color:#fff;
  transition:opacity var(--t-fast) ease;
}

/* Hover: SADECE gerçek link hover iken diğerleri soluklaşsın */
@supports(selector(:has(*))){
  .menu:has(> li > a:hover) > li > a{ opacity:.45 }
  .menu:has(> li > a:hover) > li > a:hover{ opacity:1 }
}

/* Dropdown okunu kaldır (masaüstü) */
.menu .has-dropdown > a::after{ content:none }

/* ---------- DROPDOWN (erken kapanma yok, aralık var, siyah tema) ---------- */
.has-dropdown{ position:relative }
.has-dropdown::after{
  content:""; position:absolute; left:0; right:0; bottom:-14px; height:14px;  /* hover köprüsü */
}
.dropdown{
  position:absolute; left:0; top:100%;               /* Bağlı dropdown */
  margin-top:12px; min-width:220px; padding:10px;    /* Boyutlar */
  border-radius:12px; background:#000;               /* Siyah zemin */
  border:1px solid rgba(255,255,255,.15);            /* İnce çizgi */
  box-shadow:0 12px 32px rgba(0,0,0,.45);            /* Gölge */
  opacity:0; transform:translateY(-6px); pointer-events:none; /* Kapalı durum */
  transition:opacity var(--t-fast) ease, transform var(--t-fast) ease; /* Açılış animasyonu */
}
.has-dropdown:hover .dropdown{ opacity:1; transform:translateY(0); pointer-events:auto }
.dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#fff; text-decoration:none;
}
.dropdown a:hover{ background:rgba(255,255,255,.08); color:#fff }

/* ---------- DİL BAYRAKLARI (göreli path!) ---------- */
.flag{
  width:18px; height:18px; border-radius:50%;
  background:center/cover no-repeat transparent; flex:0 0 18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset; /* ince kontur */
}
/* DİKKAT: base.css, assets/css’te. Bu yüzden ../img/... */
.flag--tr{ background-image:url('../img/flags/tr-round.svg') }
.flag--en{ background-image:url('../img/flags/gb-round.svg') }

/* Telefon */
.menu .phone a{ color:#fff; opacity:.9; letter-spacing:.3px; white-space:nowrap }

/* ---------- 9’LU GRID BUTON (panel tetikleyici) ---------- */
.grid9{
  display:inline-grid !important;               /* olası display override’larını kır */
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:3px; width:30px; height:30px; min-width:30px;
  padding:0; border-radius:8px;
  border:1px solid rgba(255,255,255,.45);
  background:transparent; cursor:pointer; flex:0 0 auto;
}
.grid9 span{ width:7px; height:7px; border-radius:50%; background:#fff; display:block }
.grid9:hover{ background:rgba(255,255,255,.08) }

/* Menü çok sıkışırsa taşma olmasın */
.menu{ gap:22px }

/* ============================================================
   9’LU GRID → QUICK PANEL (sağdan kayan)
   ============================================================ */
.qp{ position:fixed; inset:0; z-index:60 }                     /* Panel kök */
.qp[hidden]{ display:none !important }                         /* İlk yüklemede gizle */
.qp::before{                                                   /* Arka overlay */
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35); opacity:0;
  transition:opacity var(--t-fast) ease;       /* arka örtü */
}
.qp-sheet{                                                     /* Animasyonlu gövde */
  position:absolute; top:0; right:0;
  width:var(--qp-w); height:100%;
  background: linear-gradient(180deg, #f7f7f8 0%, #f1f2f4 60%, #eef0f2 100%);
  color:#0b0f17;
  transform:translateX(100%);                 /* Kapalı: sağda bekle */
  transition:transform var(--t-medium) ease;  /* Aç/Kapa animasyonu */
  display:flex; flex-direction:column;
}
.qp.open::before{ opacity:1 }
.qp.open .qp-sheet{ transform:translateX(0) }                  /* Açık: içeri kay */

/* Panel içi */
.qp-close{
  position:absolute; top:10px; right:14px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff; cursor:pointer; font-size:22px; line-height:1;
}
.qp-close:hover{ background:#f3f4f6 }

.qp-content{
  padding:28px; padding-top:48px;
  display:flex; flex-direction:column; gap:22px;
}
.qp-logo .qp-mark{
  display:flex; flex-direction:column; line-height:1.05;
  font-family:var(--logo-font); font-weight:900;
  letter-spacing:.6px; text-transform:uppercase;
  font-size:16px;
}

/* Kısa başlıklar */
.qp-kicker{ font-size:.78rem; letter-spacing:.7px; color:var(--clr-muted); font-weight:700; margin-bottom:6px }
.qp-text{ font-size:1rem }

/* Linkler */
.qp-link{ color:#0b65ff; text-decoration:none; display:block; margin:.5rem 0 }
.qp-link:hover{ text-decoration:underline }

/* Sosyal ikonlar */
.qp-socials{ display:flex; gap:12px; flex-wrap:wrap }
.qp-socials .ico{
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  display:grid; place-items:center;
  text-decoration:none; color:#0b0f17; background:#fff;
}
.qp-socials .ico:hover{ background:#f3f4f6 }
.qp-socials svg{ width:20px; height:20px; display:block }
.qp-socials svg path{ fill:currentColor }

/* CTA */
.qp-cta{
  margin-top:6px; display:inline-grid; place-items:center;
  height:48px; border-radius:12px; text-decoration:none;
  background:#8d2f2f; color: #e9e9e4;; font-weight:600;
}
.qp-cta:hover{ filter:brightness(1.05) }

/* ============================================================
   SCROLL STATE & MARGIN FIX
   ============================================================ */
body.scrolled #siteHeader{ transform:translateY(-100%) }
body.scrolled.ready #siteHeader{ transform:none }

/* İlk içerik bloğu üstten boşluk atmasın */
main > :first-child{ margin-top:0 !important }

/* ============================================================
   FOOTER (temiz sürüm) + BEYAZ ŞERİT (seam) FİX
   ============================================================ */

/* Son içerik bloğu ile footer arasında marj kalmasın */
main > section:last-of-type{ margin-bottom: 0 !important; }  /* son section alt boşluk = 0 */
main > *:last-child{ margin-bottom: 0 !important; }          /* son eleman alt boşluk = 0 */
footer{ margin-top: 0 !important; }                          /* footer üst boşluk = 0 */

/* Marjin çökmesini engelle */
.site-footer{ 
  display: flow-root;             /* Blok bağlamı: margin-top taşması olmaz */
  isolation: isolate;             /* Üst katmanlardan etkilenmesin */
}

/* Footer ana iskeleti */
.site-footer{
  min-height: var(--footer-h);    /* 100vh görünüm */
  background: #000;               /* Siyah zemin */
  color: #fff;                    /* Açık metin */
  border-top: 0;                  /* İnce üst çizgiyi kaldır (beyaz çizgi algısını önler) */
  display: flex;                  /* Dikey ortalama */
  align-items: center;            /* Dikey ortalama */
  padding: 48px 0 24px;           /* İç boşluk */
}

/* Genel kap: genişlik ve hizalama */
.site-footer .container{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding-top: 0;
}

/* Üst kısım: 3 kolon grid (mobilde 1) */
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr; /* Sol kolon geniş */
  gap: 28px;
  margin: 0;
}

/* Logo görseli */
.footer-logo{ height: 36px; margin-bottom: 12px; display: block }

/* Tipografi */
.footer-title{ font-weight: 700; margin: 0 0 10px 0 }
.footer-muted{ color: #c8d2dd; margin: 0 }
.footer-muted p{ margin: 0 0 8px 0 }

/* Alt şerit */
.footer-bottom{
  width: min(1200px, 92%);
  margin: 24px auto 0;
  padding-top: 18px;
  font-size: .95rem;
  opacity: .8;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align:center;
}

/* ===================== [MOBİL NAV — ≤ 900px] ===================== */
@media (max-width: 900px){

  /* Ölçüler + taşma engeli */
  :root{
    --header-h-initial:64px;
    --header-h-sticky:64px;
    --header-pad-x:16px;
    --menu-font-size:15px;
    --menu-gap:14px;
  }
  html,body{ overflow-x:hidden; }

  /* HEADER: şeffaf başla; scroll ile siyaha geç (ID kuralı çakışmasın) */
  .site-header{ height:var(--header-h-sticky); border-bottom:0; }
  .site-header.is-transparent{ background:transparent; color:#fff; }
  #siteHeader.is-solid,
  .site-header.is-solid{ background:#000; color:#fff; }

  /* Logo beyaz */
  .brand, .logo-stack em{ color:#fff !important; }

  /* HAMBURGER: şeffaf zemin, beyaz çizgiler */
  .hamburger{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background:transparent; border:1px solid rgba(255,255,255,.35);
    border-radius:10px; width:40px; height:40px;
    display:inline-grid; place-items:center; gap:5px; padding:0;
    cursor:pointer; flex:0 0 auto;
  }
  .hamburger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px }

  /* MENÜ PANELİ — mobil (kapalı başlar) */
  #mainMenu{
    position: fixed;              /* Ekrana sabitle */
    left: 0; right: 0;            /* Tam genişlik */
    top: var(--header-h-sticky);  /* Header’ın hemen altı */
    width: 100vw; max-width: 100vw; /* Viewport genişliği */
    background: #fff; color: #0b0f17; /* Beyaz zemin, koyu metin */
    display: none;                /* Başlangıç: kapalı */
    flex-direction: column;       /* Dikey liste */
    padding: 8px 0; gap: 0;       /* İç boşluklar */
    box-shadow: 0 16px 36px rgba(0,0,0,.10); /* Açılır panel gölgesi */
    border-bottom: 1px solid var(--clr-divider); /* Alt çizgi */
    z-index: 100;                 /* Üstte kalsın */
  }
  /* AÇIK DURUM */
  body.nav-open #mainMenu{ display: flex !important; }
  /* Menü açıkken arka plan scroll’u kilitle (opsiyonel) */
  body.nav-open{ overflow: hidden; }

  /* Menünün satırları */
  #mainMenu > li{ align-items:stretch; border-bottom:1px solid rgba(0,0,0,.06) }
  #mainMenu > li:last-child{ border-bottom:0 }

  #mainMenu > li > a,
  #mainMenu > li > button:not(.grid9){
    color:#0b0f17 !important;             /* Koyu metin */
    justify-content:center;               /* Metin ortada */
    text-align:center;                    /* Metin ortala */
    padding:14px 16px;                    /* Tıklama alanı */
  }

  /* Masaüstü hover dropdown kapalı → mobilde tıkla-aç/kapa */
  .has-dropdown::after{ display:none; }
  .has-dropdown .dropdown{
    position:static; left:auto; top:auto; /* Akışa dahil */
    margin:0; min-width:0; padding:6px 0; /* Sıkı padding */
    border:0; border-radius:0; box-shadow:none; /* Kart görünümü yok */
    background:#fff; opacity:1; transform:none; pointer-events:auto; /* Her zaman erişilebilir */
    display:none; /* Başlangıçta kapalı */
  }
  .has-dropdown.open .dropdown{ display:block; } /* Tıklayınca aç */

  /* Mobil caret (aşağı ok) — SEÇİCİ DÜZELTİLDİ */
  #mainMenu .has-dropdown > a::after{
    content:""; width:10px; height:10px; margin-left:8px;
    border-right:2px solid #0b0f17; border-bottom:2px solid #0b0f17; /* Ok çizgileri */
    transform:rotate(45deg); transition:transform var(--t-fast) ease; /* Döndürme animasyonu */
  }
  .has-dropdown.open > a::after{ transform:rotate(-135deg); }

  /* Hizmet Alanları mobilde dropdown değil: caret görünmesin */
  #mainMenu .services-dd > a::after{ display:none !important; content:none !important; border:0 !important; }

  /* Bayrak kenarlığı açık zemine göre */
  .flag{ box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }

  /* Quick Panel butonu ve header iç boşlukları */
  .nav{ gap:12px; }

  /* Menü açıkken hamburgeri koyulaştır (kontrast) */
  body.nav-open .hamburger{ background:#fff; border-color:rgba(0,0,0,.15) }
  body.nav-open .hamburger span{ background:#0b0f17 }

  /* Footer mobil */
  .site-footer{ padding:32px 0 18px }
  .footer-grid{ grid-template-columns:1fr }
  .footer-bottom{ margin-top:16px }
}

/* HAMBURGER en üste gelsin */
.hamburger{ z-index: 61; }              /* header(50) ve menü(100) ile güvenli */

/* NOT: Eski global kurallar kaldırıldı (z-index ve nav-open display tekrarları) */

/* Hamburger içindeki çizgiler (span) tıklamayı emmesin */
.hamburger * { pointer-events: none; }
/* Butonun kendisi her zaman tıklanabilir ve üstte olsun */
.hamburger, #menuToggle { position:relative; z-index:1002; pointer-events:auto; }

/* ===================== [MOBİL NAV — REFINEMENT OVERRIDES] ===================== */
@media (max-width: 900px){

  /* Panel arka plan: kırık beyaz, daha yumuşak görünüm */
  #mainMenu{
    background:#f7f8fa !important;
    color:#0b0f17 !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.10) !important;
  }

  /* Linkler: daha okunur – hafif kalın, satır aralığı ve padding ayarı */
  #mainMenu > li > a,
  #mainMenu > li > button:not(.grid9){
    color:#0b0f17 !important;
    font-weight:600 !important;
    letter-spacing:.2px;
    line-height:1.35;
    padding:14px 18px !important;
    justify-content:center !important;   /* Metin ortada */
    text-align:center;
    gap:10px;
  }

  /* “Hizmet Alanları” okunun sabitlenmesi: sağda absolute, metin artık oynamaz */
  #mainMenu .has-dropdown > a{
    position:relative;
    padding-right:36px !important; /* oka yer */
  }
  #mainMenu .has-dropdown > a::after{
    content:"";
    position:absolute; right:16px; top:50%;
    width:10px; height:10px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-50%) rotate(45deg);
    transition:transform var(--t-fast) ease, opacity var(--t-fast) ease;
    opacity:.85;
  }
  #mainMenu .has-dropdown.open > a::after{
    transform:translateY(-50%) rotate(-135deg);
  }

  /* Dropdown: panelle aynı ton + yumuşak giriş */
  #mainMenu .has-dropdown .dropdown{
    background:#f7f8fa !important;
    position:static; left:auto; top:auto;
    margin:0; min-width:0; padding:6px 0;
    border:0; border-radius:0; box-shadow:none;
    display:none;
  }
  #mainMenu .has-dropdown.open .dropdown{
    display:block; animation:mmSlide .22s ease both;
  }
  @keyframes mmSlide{
    from{ opacity:0; transform:translateY(-4px) }
    to  { opacity:1; transform:none }
  }

  /* Dropdown iç linkleri netleştir */
  #mainMenu .dropdown a{
    color:#0b0f17 !important;
    font-weight:500;
    padding:12px 16px;
    border-radius:8px;
    text-align:center;
    justify-content:center;
  }
  #mainMenu .dropdown a:hover{
    background:rgba(0,0,0,.05);
  }

  /* Ayırıcılar */
  #mainMenu > li{ border-bottom:1px solid rgba(0,0,0,.06) !important; }
  #mainMenu > li:last-child{ border-bottom:0 !important; }

  /* Telefon & dil satırları daha okunur */
  #mainMenu .phone a{ color:#0b0f17 !important; opacity:.95; font-weight:600 }
  .flag{ box-shadow:0 0 0 1px rgba(0,0,0,.15) inset !important; }
}

/* Güvenlik: hamburger üstte ve çocuklar tıklamayı emmesin (kalsın) */
.hamburger * { pointer-events:none; }
.hamburger, #menuToggle { position:relative; z-index:1002; pointer-events:auto; }