/* Yerleşim */
.base-template__wrapper{
  min-height: calc(100dvh - 300px);
  justify-content: flex-start;
  padding-bottom: 450px;
}
.wrapper{ width: 100%; position: absolute;  }
  
/* HEADER */
.header {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 20px 0 40px;
    border-radius: 60px;
    min-height: 82px;
    margin: 15px;
    backdrop-filter: blur(15px);
    background: var(--brand-gradient);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    z-index: 2;
}
.header__logo{ max-width:250px; padding:10px; }
.header__wrapper{ width:100%; display:flex; align-items:center; }
.header__navigation-wrapper{ display:flex; width:100%; padding-left:50px; }

.header__list{ display:flex; align-items:center; gap:28px; margin:0; padding:0; }
.header__list-item{
  display:flex; padding:30px 0 50px; margin-bottom:-20px; gap:8px; font-size:16px;
}
    .header__list-item > a {
        display: flex;
        align-items: center;
        gap: 8px;
        transition: var(--transition);
        color: white;
    }
.header__list-item > a svg path{ transition: var(--transition); }

/* Açılır menü yüzeyi */
.header__list-item .submenu-wrapper{
  position:absolute; width:100%; top:110%; left:0; border-radius:33px;
  padding:30px 30px 50px 30px;
  background: var(--brand-gradient);
  backdrop-filter: blur(15px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.24);
  opacity:0; visibility:hidden; pointer-events:none; transition: var(--transition);
}

.header__buttons-wrapper{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.header__button{
  display:flex; align-items:center; justify-content:center;
  min-height:42px; width:max-content; padding:6px 20px; border-radius:100px; gap:8px;
  font-size:16px; font-weight:400; transition: var(--transition);
  border: 1px solid var(--stroke-20);
  background: transparent;
  color:white;
}
.header__button:hover{ background: var(--hover-strong); border-color: var(--stroke-30); }

/* Alt menü başlık/metinleri */
.submenu-list__title,
.submenu-content__title{ width:max-content; margin-bottom:25px; font-size:12px; text-transform:uppercase; color: var(--text-muted); }

.submenu-list{ list-style:none; max-width:295px; width:100%; }
.submenu-list__item{ display:flex; padding-right:100px; margin-right:-100px; cursor:pointer; }
.submenu-list__wrapper{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; position:relative; }

.submenu-list__item-wrapper{
  width:100%; display:flex; align-items:center; padding:6px 16px 6px 6px; gap:16px; border-radius:14px;
  transition: var(--transition); background: transparent;
}
.submenu-list__item.has-submenu.active .submenu-list__item-wrapper,
.submenu-list__item:active .submenu-list__item-wrapper{ background: var(--hover-surface); }
.submenu-list__item-wrapper > svg{ margin-left:auto; opacity:0; visibility:hidden; transition: var(--transition); }
.submenu-list__item.has-submenu.active .submenu-list__item-wrapper > svg{ opacity:1; visibility:visible; }

.submenu-list__item-link{ display:flex; flex-direction:column; gap:6px; }
.submenu-list__item-title{ font-size:16px; font-weight:500; color: var(--text-on-dark); }
.submenu-list__item-subtile{ font-size:12px; font-weight:400; color: var(--text-subtle); }

/* İçerik paneli */
.submenu-content{
  position:absolute; right:0; top:0; max-width:calc(100% - 365px);
  opacity:0; visibility:hidden; pointer-events:none; transition: var(--transition);
}
.submenu-list__item.has-submenu.active .submenu-content{ opacity:1; visibility:visible; }

.submenu-content__list:not(.events){
  width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0;
}
.submenu-content__list.events{
  width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:0;
}
.submenu-content__list-item{
  display:block; border-radius:20px; background: var(--hover-surface); cursor:auto;
}
.submenu-content__link{
  display:flex; flex-direction:column; border-radius:20px; padding:10px 10px 20px;
  border:1px solid transparent; transition: var(--transition);
}
.submenu-content__link-img{ margin-bottom:20px; border-radius:13px; overflow:hidden; transition: var(--transition); }
.submenu-content__link-img img{ transition:0.4s ease-in; }

.submenu-content__link-title{ padding:0 10px; font-size:16px; font-weight:500; margin-bottom:12px; color: var(--text-on-dark); }
.submenu-content__link-text{ padding:0 10px; font-size:12px; color: var(--text-subtle); }

.submenu-content__link-wrapper{
  display:flex; gap:20px; padding:10px; border-radius:20px; background: var(--hover-surface);
}
.submenu-content__category{
  display:flex; align-items:center; gap:10px; width:max-content; padding:10px 20px; margin-bottom:20px; border-radius:30px;
  font-size:12px; font-weight:500; border:1px solid var(--stroke-20); color: var(--text-subtle);
}
.submenu-content__link-address,
.submenu-content__link-date{
  display:flex; align-items:center; gap:4px; margin-bottom:12px; font-size:12px; font-weight:400; color: var(--text-muted);
}
.submenu-content__url{
  display:flex; align-items:center; gap:8px; margin-top:auto; margin-bottom:20px;
  color: var(--text-on-dark); font-size:14px; transition: var(--transition);
}
.submenu-content__url:hover{ color: var(--accent); }
.submenu-content__url:hover svg{ transform: translateX(5px); }
.submenu-content__url:hover svg path{ stroke: var(--accent); }

/* Hover renkleri */
@media (hover:hover) and (pointer:fine){
  .header__list-item:hover .submenu-wrapper{ opacity:1; visibility:visible; pointer-events:auto; }
  .header__list-item:hover > a,
  .header__list-item:hover > a svg path{ color: var(--accent); fill: var(--accent); }
  .submenu-content__list-item:hover .submenu-content__link{ border-color: var(--stroke-30); }
  .submenu-content__list-item:hover .submenu-content__link-img img{ transform: scale(1.05); }
}

/* Burger */
.header__burger{ display:none; flex-direction:column; align-items:flex-end; gap:4px; width:24px; margin-left:auto; }
.header__burger i{ width:100%; height:2px; background: var(--text-on-dark); border-radius:13px; transition: var(--transition); }
.header__burger.active i:nth-child(1){ transform: rotate(45deg) translate(4px, 4px); }
.header__burger.active i:nth-child(2){ opacity:0; }
.header__burger.active i:nth-child(3){ transform: rotate(-45deg) translate(4px, -5px); }

/* Scrollbar (aqua uyumlu) */
.header__navigation-wrapper.open::-webkit-scrollbar{ width:10px; }
.header__navigation-wrapper.open::-webkit-scrollbar-track{ background: var(--glass-02); border-radius:10px; }
.header__navigation-wrapper.open::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22); border-radius:10px; border:2px solid transparent; background-clip: content-box;
}
.header__navigation-wrapper.open::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.32); }
@supports (scrollbar-color:auto){
  .header__navigation-wrapper.open{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.32) var(--glass-02); }
}

/* Responsive */
@media screen and (max-width:1280px){
  .header__navigation-wrapper{ padding-left:25px; }
  .submenu-list{ max-width:250px; }
  .submenu-content{ max-width: calc(100% - 270px); }
  .submenu-content__url{ margin-bottom:0; }
}

@media screen and (max-width:1024px){
  .header{ min-height:64px; padding:0 20px; }
  .header__burger{ display:flex; }

  .header__navigation-wrapper{
    flex-direction:column; align-items:center; position:absolute; top:110%; left:0; padding:20px;
    background: linear-gradient(180deg, var(--brand-1) 0%, var(--brand-2) 100%);
    border-radius:20px; opacity:0; visibility:hidden; transition: var(--transition);
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  }
  .header__navigation-wrapper.open{ opacity:1; visibility:visible; max-height: calc(100vh - 100px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter: stable both-edges; padding-right:8px; }

  .header__list{ flex-direction:column; gap:30px; }
  .header__buttons-wrapper{ flex-direction:column; margin-left:unset; margin-top:50px; gap:8px; }
  .header__navigation, .header__list{ width:100%; }
  .headerPD{ margin-left:auto !important; }

  .header__list-item{ flex-direction:column; width:100%; padding:0; gap:0; margin:0; }
  .header__list-item.active a, .header__list-item.active a > svg path{ color: var(--accent); fill: var(--accent); }

  .header__list-item .submenu-wrapper{
    position:static; padding:0; max-height:0; border-radius:0; opacity:1; visibility:visible; pointer-events:all;
    overflow:hidden; transition: max-height var(--transition);
    background: transparent; /* içerideki elemanlar zaten tema renkleri ile */
  }

  .submenu-list{ width:100%; max-width:100%; gap:5px; padding-left:0; }
  .submenu-list__wrapper{ margin-top:30px; }
  .submenu-list__item{ width:100%; padding:0; margin:0; }
  .submenu-list__title{ display:none; }
  .submenu-content{ display:none; }

  .header__button{ border: 1px solid var(--stroke-20); }
}

@media screen and (max-width:767.9px){
  .header__buttons-wrapper, .header__button{ width:100%; }
}

/* İnteraktif durumlar */
@media (hover:hover) and (pointer:fine){
  .submenu-list__item.has-submenu:hover .submenu-list__item-wrapper{ background: var(--hover-surface); }
  .submenu-list__item.has-submenu:hover .submenu-content,
  .submenu-list__item.has-submenu:hover .submenu-list__item-wrapper > svg{ opacity:1; visibility:visible; pointer-events:auto; }
}