@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ========== RESET ========== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"DM Sans",sans-serif;color:#222}

/* ========== HEADER ========== */
.site-header{
  position:sticky; top:0; z-index:1000; width:100%;
  background:#fff; border-bottom:1px solid #e0e0e0;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.header-container{
  padding:20px 40px; /* desktop’ta nefes */
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
}
.logo{display:inline-flex; align-items:center; text-decoration:none}
.logo img{max-height:52px; height:auto; width:auto}

/* ========== NAV (Desktop) ========== */
.main-nav{display:flex; justify-content:center}
.nav-menu{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px}
.nav-menu li{position:relative}
.nav-menu a{position:relative; text-decoration:none; color:#333; font-weight:700; font-size:14px; padding:8px 10px; white-space:nowrap; transition:color .25s}
.nav-menu a::after{content:""; position:absolute; left:0; bottom:2px; width:0; height:2px; background:#007bff; transition:width .25s}
.nav-menu a:hover{color:#007bff}
.nav-menu a:hover::after{width:100%}

/* ========== DROPDOWN (Desktop hover) ========== */
.dropdown-box{
  position:absolute; top:calc(100% + 8px); left:50%;
  min-width:500px; background:#fff; padding:24px 28px; border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-8px);
  transition:.25s; z-index:999;
}
@media (min-width: 993px){
  .dropdown:hover > .dropdown-box{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
}
.dropdown-menu{list-style:none; display:flex; flex-wrap:wrap; gap:16px 24px}
.dropdown-menu li{flex:1 1 45%}
.dropdown-menu a{font-size:14px; color:#222; font-weight:500; text-decoration:none}
.dropdown-menu a:hover{color:#007bff}

/* 2 sütun layout */
.dropdown-menu.dropdown-two-column{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; position:relative;
}
.dropdown-menu.dropdown-two-column::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#ddd; transform:translateX(-50%);
}

/* ========== ACTIONS ========== */
.header-actions{display:flex; align-items:center; gap:12px}
.btn{display:inline-block; padding:8px 14px; font-size:14px; font-weight:600; border-radius:5px; text-decoration:none; transition:.2s}
.btn-yellow{background:#ffc107; color:#000}.btn-yellow:hover{background:#e0a800}
.btn-dark{background:#333; color:#fff}.btn-dark:hover{background:#111}

/* Dil seçici */
.language-dropdown{position:relative}
.language-btn{background:#fff; border:1px solid #eee; border-radius:6px; padding:8px 12px; font-weight:700; cursor:pointer}
.language-menu{
  position:absolute; top:calc(100% + 6px); right:0; list-style:none;
  background:#fff; border:1px solid #eee; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  min-width:160px; display:none; padding:8px 0; z-index:1001;
}
.language-menu a{display:block; padding:8px 12px; color:#333; text-decoration:none}
.language-menu a:hover{background:#f7f7f7}
.language-dropdown.open .language-menu{display:block}

/* Bölüm ayracı */
.section-divider{height:6px; background:linear-gradient(to right,#f0f0f08f,#ccc,#f0f0f077)}

/* ========== HAMBURGER ========== */
.menu-toggle{
  display:none; position:relative; width:40px; height:36px; border:none; background:transparent; cursor:pointer;
}
.menu-bar{display:block; width:100%; height:3px; background:#333; margin:6px 0; transition:.2s}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ========== MOBILE/TABLET (≤ 992px) ========== */
:root{ --header-h: 76px; }
@media (max-width: 992px){
  :root{ --header-h: 64px; }

  .header-container{grid-template-columns:auto 1fr auto; padding:12px 16px; gap:10px}
  .logo img{max-height:46px}

  /* Hamburger görünür */
  .menu-toggle{display:block; order:2; justify-self:center}

  /* Actions sağda */
  .header-actions{order:3}
  .header-actions .btn{padding:7px 10px; font-size:13px}

  /* Ana menü: fixed panel */
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; background:#fff;
    border-top:1px solid #eee; box-shadow:0 8px 24px rgba(0,0,0,.08);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:.25s; z-index:9999;
    max-height:calc(100vh - var(--header-h)); overflow:auto;
    display:block;
  }
  .main-nav.open, .main-nav.active{transform:translateY(0); opacity:1; visibility:visible}

  .nav-menu{flex-direction:column; align-items:stretch; gap:0; padding:6px 0}
  .nav-menu li{width:100%}
  .nav-menu a{display:block; padding:14px 18px; font-size:15px; border-bottom:1px solid #f2f2f2}
  .nav-menu a::after{display:none}

  /* Mobil akordeon */
  .dropdown .dropdown-box{
    position:static; min-width:100%;
    background:#fafafa; border-top:1px solid #eee; box-shadow:none; border-radius:0;
    padding:0; display:none; opacity:1; visibility:visible; transform:none;
  }
  .dropdown.open > .dropdown-box{display:block}

  /* 2 sütun → tek sütun */
  .dropdown-menu.dropdown-two-column{display:block}
  .dropdown-menu.dropdown-two-column::before{display:none}
  .dropdown-menu a{padding:12px 24px; font-weight:600}

  /* Desktop hover etkisini mobilde nötrle */
  .dropdown:hover > .dropdown-box{opacity:1; visibility:visible; transform:none}
}

/* ========== SMALL PHONES (≤ 480px) ========== */
@media (max-width: 480px){
  .logo img{max-height:32px}
}

/* Sticky header ile anchor yapışmasını engelle */
html{ scroll-padding-top: calc(var(--header-h) + 12px); }
