@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root{
  --blue-dark:#0f5aa6;
  --blue:#1376c8;
  --blue-soft:#1fa9e5;
  --blue-ink:#0f2440;
  --text:#10243f;
  --muted:#6d7b8f;
  --surface:#ffffff;
  --surface-2:#f4f8fc;
  --line:#dce7f3;
  --line-2:#eaf2f8;
  --shadow:0 18px 50px rgba(15,37,64,.08);
  --shadow-soft:0 12px 30px rgba(15,37,64,.06);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Roboto',Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#f4f8fc 0,#fff 240px);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1320px}
.muted{color:var(--muted)}

body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.offcanvas,
.modal,
.card,
.table,
.responsive-table,
.header-ultra-card{
  font-family:'Roboto',Arial,Helvetica,sans-serif !important;
}

/* =========================================================
   HEADER TOPBAR
========================================================= */

.micro-topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.micro-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  gap:20px;
  font-size:.92rem;
}

.micro-topbar-left,
.micro-topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.micro-topbar i{color:var(--blue-soft)}
.micro-topbar-right a{color:#4e5d72}

/* =========================================================
   HEADER MAIN
========================================================= */

.site-header-ultra{
  margin-bottom:0!important;
}

.header-sticky-shell{
  background:rgba(244,248,252,.94);
  backdrop-filter:blur(12px);
  z-index:1030;
  padding:14px 0 0;
  margin-bottom:0!important;
}

.header-ultra-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px 22px 20px;
}

.header-main-grid{
  display:grid;
  grid-template-columns:auto minmax(360px,1fr) auto auto;
  align-items:center;
  gap:18px;
}

.brand-mark img{
  height:102px;
  width:auto;
  object-fit:contain;
}

/* =========================================================
   HEADER SEARCH
========================================================= */

.global-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:2px solid #d8e5f2;
  border-radius:999px;
  padding:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.global-search-select{
  min-width:190px;
  height:56px;
  border-radius:999px;
  background:linear-gradient(135deg,#eef7fd,#f7fbff);
  border:1px solid #dce7f3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:700;
  color:var(--blue-ink);
  padding:0 16px;
  text-decoration:none;
}

.global-search-select:hover{
  background:#eaf6ff;
  color:var(--blue-dark);
}

.global-search-select i{color:var(--blue)}

.global-search input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:0 8px;
  font-size:1rem;
  color:var(--text);
}

.global-search button{
  height:56px;
  padding:0 28px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--blue-dark),var(--blue-soft));
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 16px 30px rgba(19,118,200,.25);
}

/* =========================================================
   HEADER CTA BUTTONS
========================================================= */

.header-cta-group{
  display:flex;
  gap:12px;
}

.header-mini-btn{
  min-width:142px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f8fbff);
  transition:.2s ease;
}

.header-mini-btn:hover{
  transform:translateY(-2px);
}

.header-mini-btn i{
  width:42px;
  height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#edf6ff;
  color:var(--blue-dark);
  font-size:1.15rem;
}

.header-mini-btn span{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.header-mini-btn small{
  font-size:.74rem;
  color:var(--muted);
  font-weight:700;
}

.header-mini-btn strong{
  font-size:.95rem;
  color:var(--text);
}

.header-mini-btn.cart{
  background:linear-gradient(135deg,var(--blue-dark),var(--blue));
  border-color:transparent;
  color:#fff;
}

.header-mini-btn.cart i{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.header-mini-btn.cart small,
.header-mini-btn.cart strong{
  color:#fff;
}

/* =========================================================
   MOBILE TOGGLER
========================================================= */

.ultra-toggler{
  display:none;
  border:none;
  background:transparent;
  padding:0;
  flex-direction:column;
  gap:5px;
}

.ultra-toggler span{
  width:28px;
  height:3px;
  border-radius:999px;
  background:var(--blue-dark);
  display:block;
}

/* =========================================================
   ICON SHORTCUTS
========================================================= */

.icon-shortcuts{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  padding:18px 0 14px;
}

.icon-shortcuts a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  border-radius:999px;
  background:#f7fbff;
  border:1px solid var(--line);
  font-weight:700;
  color:#26435f;
  transition:.2s ease;
}

.icon-shortcuts a:hover{
  transform:translateY(-2px);
}

.icon-shortcuts i{color:var(--blue)}

/* =========================================================
   MEGA MENU
========================================================= */

.mega-nav{padding-top:2px}

.mega-nav-scroller{
  display:flex;
  align-items:stretch;
  gap:14px;
  overflow:auto;
  padding-bottom:6px;
}

.mega-item{
  position:relative;
  flex:0 0 auto;
}

.mega-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  font-weight:800;
  color:#1d3854;
  min-height:60px;
  transition:.2s ease;
}

.mega-link:hover{
  transform:translateY(-2px);
}

.mega-link-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:#eef7ff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-dark);
}

.mega-link-arrow{
  color:#7992aa;
  font-size:.88rem;
}

.mega-item:hover .mega-link{
  border-color:#bcd7ec;
  box-shadow:var(--shadow-soft);
}

.mega-dropdown{
  position:absolute;
  left:0;
  top:calc(100% + 14px);
  width:560px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 24px 60px rgba(15,37,64,.14);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.22s ease;
  z-index:1200;
}

.mega-item:hover .mega-dropdown,
.mega-item.open .mega-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.mega-dropdown-visual{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg,#f7fbff,#eef7fd);
  margin-bottom:14px;
}

.mega-dropdown-visual img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
}

.mega-dropdown-visual strong{
  display:block;
  font-size:1rem;
}

.mega-dropdown-visual span{
  display:block;
  color:var(--muted);
  margin-top:4px;
}

.mega-sub-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.mega-sub-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:#fff;
  transition:.2s ease;
}

.mega-sub-card:hover{
  transform:translateY(-2px);
}

.mega-sub-card img{
  width:54px;
  height:54px;
  border-radius:10px;
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:6px;
}

.mega-sub-card span{
  font-weight:700;
  color:#243c57;
}

.mega-dropdown-brands{
  min-width:360px;
}

.mega-dropdown-visual.compact{
  grid-template-columns:1fr;
  padding-bottom:6px;
  margin-bottom:10px;
}

.mega-brand-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mega-brand-chip{
  padding:10px 12px;
  border-radius:999px;
  background:#f3f9ff;
  border:1px solid var(--line);
  font-weight:700;
  color:var(--blue-ink);
  text-decoration:none;
}

.mega-brand-chip:hover{
  background:#0f5aa6;
  color:#fff;
  border-color:transparent;
}

/* =========================================================
   MOBILE UTILITY BUTTONS
========================================================= */

.mobile-utility{
  display:none;
  grid-template-columns:1fr;
  gap:10px;
  padding-top:12px;
}

.mobile-utility-btn{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:13px 14px;
  border-radius:12px;
  background:#f7fbff;
  border:1px solid var(--line);
  font-weight:700;
}

.mobile-utility-btn.cart{
  background:linear-gradient(135deg,var(--blue-dark),var(--blue));
  color:#fff;
  border-color:transparent;
}

/* =========================================================
   SEARCH CATEGORY DROPDOWN
========================================================= */

.search-category-wrap{
  position:relative;
  flex:0 0 auto;
}

.search-select-arrow{
  font-size:.82rem;
  color:#7592ac;
}

.search-categories-dropdown{
  position:absolute;
  left:0;
  top:calc(100% + 12px);
  width:min(980px,78vw) !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:0 26px 60px rgba(15,37,64,.16) !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.22s ease;
  z-index:1400;
}

.search-category-wrap:hover .search-categories-dropdown,
.search-category-wrap:focus-within .search-categories-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.search-category-wrap:hover .global-search-select,
.search-category-wrap:focus-within .global-search-select{
  border-color:#bcd7ec;
  box-shadow:var(--shadow-soft);
}

.search-categories-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.search-category-card{
  border:1px solid var(--line-2);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  padding:14px;
  min-height:auto !important;
  overflow:hidden !important;
  transition:.18s ease;
}

.search-category-card:hover{
  border-color:#d5dde6;
  box-shadow:0 14px 30px rgba(15,37,64,.08);
}

.search-category-main,
.search-category-children{
  padding:0 !important;
  height:auto !important;
}

.search-category-head{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.search-category-head img{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:12px;
  object-fit:contain;
  object-position:center;
  border:1px solid var(--line);
  background:#f7fbff !important;
  padding:6px;
}

.search-category-content strong,
.search-category-head strong{
  display:block;
  color:#1d3854;
  font-size:1rem;
  font-weight:800;
  line-height:1.25;
}

.search-category-content small,
.search-category-head small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:.82rem;
  font-weight:600;
}

.search-category-open,
.search-category-direct,
.search-category-back{
  appearance:none !important;
  -webkit-appearance:none !important;
  min-height:36px !important;
  height:36px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  border:1px solid #d8dee5 !important;
  background:#f1f3f5 !important;
  color:#3d4b5a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:800 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:.16s ease !important;
}

.search-category-open,
.search-category-direct{
  margin-top:18px !important;
}

.search-category-back{
  margin-bottom:12px !important;
}

.search-category-open:hover,
.search-category-direct:hover,
.search-category-back:hover{
  background:#e7eaee !important;
  border-color:#cfd5dc !important;
  color:#27323d !important;
  text-decoration:none !important;
}

.search-category-open i,
.search-category-direct i,
.search-category-back i{
  font-size:10px !important;
  line-height:1 !important;
}

.search-category-children{
  display:none;
  background:#fff;
}

.search-category-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
  margin-top:12px !important;
  padding-top:12px !important;
  border-top:1px dashed #dbe7f2 !important;
  max-height:none !important;
  overflow:visible !important;
}

.search-category-links a{
  position:relative;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:42px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
  background:#f8fbfe !important;
  border:1px solid #e7eef5 !important;
  color:#35516d !important;
  font-size:.82rem !important;
  font-weight:700 !important;
  text-decoration:none !important;
  transition:.16s ease !important;
}

.search-category-links a:before{
  display:none !important;
  content:none !important;
}

.search-category-links a img{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:8px !important;
  object-fit:contain !important;
  background:#fff !important;
  border:1px solid #e2eaf2 !important;
  padding:3px !important;
}

.search-category-links a span{
  display:block;
  line-height:1.25;
}

.search-category-links a:hover{
  background:#eef1f4 !important;
  border-color:#d6dde5 !important;
  color:#24313f !important;
}

.search-category-parent-link{
  grid-column:1 / -1;
  background:#f1f3f5 !important;
  color:#364657 !important;
  border-color:#d9dee5 !important;
}

.search-category-parent-link img{
  display:none !important;
}

/* =========================================================
   HEADER BOTTOM LINE
========================================================= */

.header-dual-line{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:10px;
  margin-bottom:-30px;
  border-radius:0;
  overflow:hidden;
  width:100%;
  position:relative;
  z-index:20;
  line-height:0;
}

.header-dual-line span{
  height:12px;
  display:block;
}

.header-dual-line span:first-child{
  background:var(--blue-dark);
  border-radius:0;
}

.header-dual-line span:last-child{
  background:var(--blue-soft);
  border-radius:0;
}

.site-header-ultra + main,
.site-header-ultra + section,
.site-header-ultra + .container{
  margin-top:0!important;
}

.site-header-ultra + main{
  padding-top:14px!important;
}

/* =========================================================
   RESPONSIVE HEADER
========================================================= */

@media (max-width:1199px){
  .header-main-grid{
    grid-template-columns:auto minmax(240px,1fr) auto;
  }
}

@media (max-width:991px){
  .micro-topbar{
    display:none!important;
  }

  .header-ultra-card{
    padding:16px;
  }

  .header-main-grid{
    grid-template-columns:auto 1fr auto;
    gap:12px;
  }

  .brand-mark img{
    height:82px;
  }

  .global-search{
    grid-column:1/-1;
    order:4;
  }

  .global-search-select{
    display:none;
  }

  .header-cta-group{
    display:none!important;
  }

  .ultra-toggler{
    display:flex;
  }

  .icon-shortcuts{
    padding:14px 0 14px;
  }

  .mega-nav-scroller{
    flex-direction:column;
    overflow:visible;
  }

  .mega-item{
    width:100%;
  }

  .mega-link{
    width:100%;
    justify-content:flex-start;
  }

  .mega-dropdown{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    margin-top:10px;
  }

  .mega-item:hover .mega-dropdown,
  .mega-item.open .mega-dropdown{
    display:block;
  }

  .mega-dropdown-brands{
    min-width:100%;
  }

  .mobile-utility{
    display:grid;
  }

  .search-categories-dropdown{
    width:min(92vw,620px) !important;
  }

  .search-categories-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:767px){
  .header-sticky-shell{
    padding-top:10px;
    margin-bottom:0!important;
  }

  .header-ultra-card{
    border-radius:16px;
  }

  .brand-mark img{
    height:72px;
  }

  .global-search{
    padding:5px;
  }

  .global-search button{
    height:50px;
    padding:0 18px;
  }

  .search-category-wrap{
    display:none;
  }

  .search-categories-grid{
    grid-template-columns:1fr;
  }

  .search-category-links{
    grid-template-columns:1fr;
  }

  .icon-shortcuts{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .icon-shortcuts a{
    justify-content:center;
  }
}

/* ---------- NAV ---------- */

.ts-navmenu{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
}

.ts-navmenu ul{
    display:flex;
    align-items:center;
    gap:34px;
    margin:0;
    padding:0;
    list-style:none;
}

.ts-navmenu li{
    margin:0;
}

.ts-navmenu a{
    position:relative;
    display:flex;
    align-items:center;
    height:44px;
    padding:0;
    font-size:15px;
    font-weight:800;
    color:#4d647b;
    text-decoration:none;
    transition:.25s;
}

.ts-navmenu a:hover{
    color:#004d91;
}

/* ince animasyonlu çizgi */

.ts-navmenu a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:6px;
    width:0;
    height:2px;
    border-radius:10px;
    background:#004d91;
    transform:translateX(-50%);
    transition:.25s;
}

.ts-navmenu a:hover::after,
.ts-navmenu .active::after{
    width:100%;
}

.ts-navmenu .active{
    color:#004d91;
}

/* mobil */

.mobile-nav-toggle{
    display:none;
}

@media(max-width:991px){

    .ts-navmenu ul{
        display:none;
    }

    .mobile-nav-toggle{
        display:block;
        font-size:30px;
        color:#004d91;
        cursor:pointer;
    }

}