/* =====================================================================================================
 *  kingstur-navbar.css  —  Alt gezinti çubuğu + kurumsal yan menü (#kt-menu)
 * -----------------------------------------------------------------------------------------------------
 *  /assets/css/navbar.css DOSYASINDAN SONRA yüklenir.
 *  Eski #side-menu paneli tamamen gizlenir; yerine index.php'deki #kt-menu kullanılır.
 *
 *    1  Değişkenler
 *    2  Alt gezinti çubuğu
 *    3  Alt çubuğun açılır menüleri
 *    4  Yan menü (#kt-menu)
 *    5  Masaüstü / RTL / hareket azaltma
 * ===================================================================================================== */

/* ============ 1  DEĞİŞKENLER ============================================================= */

:root {
  --kn-brand:      #e01b22;
  --kn-brand-dark: #b8151b;
  --kn-brand-soft: rgba(224, 27, 34, .10);
  --kn-navy:       #171a52;
  --kn-ink:        #12131a;
  --kn-ink-2:      #63656f;
  --kn-ink-3:      #9a9ca6;
  --kn-yuzey:      #ffffff;
  --kn-yuzey-2:    #f4f5f9;
  --kn-cizgi:      #e8e8ee;
  --kn-cizgi-2:    #dcdde6;
  --kn-h:          62px;
  --kn-alt:        env(safe-area-inset-bottom, 0px);
  --kn-r:          14px;
  --kn-hiz:        .18s cubic-bezier(.22, .61, .36, 1);
}

/* ============ 2  ALT GEZİNTİ ÇUBUĞU ===================================================== */

body nav.nav.containerss {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--kn-cizgi) !important;
  border-radius: 16px 16px 0 0 !important;
  /* DİKKAT: burada kesinlikle saydamlık YOK. Şeffaf kalınca içerik altından görünüyordu. */
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 -6px 24px rgba(16, 20, 40, .12) !important;
  transform: none !important;
  z-index: 9000 !important;   /* alttan açılan paneller 100070 — onların altında kalır */
}

body nav.nav.containerss #nav-menu,
body nav.nav.containerss .nav__menu {
  position: static !important;
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body nav.nav.containerss .nav__list {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 4px var(--kn-alt) !important;
  list-style: none !important;
}

body nav.nav.containerss .nav__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  list-style: none !important;
}

/* "Menü" öğesi bir <button> içinde .nav__link taşıyor — düğmeyi görünmez kılıyoruz. */
body nav.nav.containerss .nav__item > .th-menu-toggle {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  box-shadow: none !important;
  line-height: normal !important;
  position: static !important;
}

body nav.nav.containerss .nav__link {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  height: var(--kn-h) !important;
  margin: 0 !important;
  padding: 8px 2px 6px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: none !important;
  color: var(--kn-ink-2) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color var(--kn-hiz), background var(--kn-hiz);
  -webkit-tap-highlight-color: transparent;
}

body nav.nav.containerss .nav__link:hover { color: var(--kn-ink) !important; }
body nav.nav.containerss .nav__link:active { background: var(--kn-yuzey-2) !important; }

body nav.nav.containerss .nav__icon {
  display: block !important;
  font-size: 23px !important;
  line-height: 1 !important;
  color: inherit !important;
  margin: 0 !important;
}

body nav.nav.containerss .nav__name {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em;
  color: inherit !important;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1 !important;
}

body nav.nav.containerss .nav__link.active-link,
body nav.nav.containerss .nav__item.dropdownuser.active > .nav__link {
  color: var(--kn-brand) !important;
  background: var(--kn-brand-soft) !important;
}

/* İçerik çubuğun altında kalmasın */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(var(--kn-h) + var(--kn-alt) + 6px) !important; }
}

/* ============ 3  ALT ÇUBUĞUN AÇILIR MENÜLERİ ============================================ */

body nav.nav.containerss .dropdownuser { position: relative !important; }

body nav.nav.containerss .dropdownuser-menu {
  position: absolute !important;
  bottom: calc(var(--kn-h) + 8px) !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) translateY(6px) !important;
  width: max-content !important;
  min-width: 186px !important;
  max-width: 74vw !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid var(--kn-cizgi) !important;
  border-radius: var(--kn-r) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 44px rgba(10, 14, 30, .18), 0 2px 8px rgba(10, 14, 30, .06) !important;
  list-style: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--kn-hiz), transform var(--kn-hiz), visibility var(--kn-hiz);
  z-index: 9001 !important;
}

body nav.nav.containerss .dropdownuser-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-right: 1px solid var(--kn-cizgi);
  border-bottom: 1px solid var(--kn-cizgi);
  background: #fff;
  transform: rotate(45deg);
}

body nav.nav.containerss .dropdownuser:not(.active) .dropdownuser-menu { display: block !important; }
body nav.nav.containerss .dropdownuser.active .dropdownuser-menu {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) !important;
}

body nav.nav.containerss .dropdownuser-menu li { margin: 0 !important; }

body nav.nav.containerss .dropdownuser-menu a,
body nav.nav.containerss .dropdown-link2 {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 10px 12px !important;
  border-radius: 10px;
  color: var(--kn-ink) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--kn-hiz);
}
body nav.nav.containerss .dropdownuser-menu a:hover { background: var(--kn-yuzey-2) !important; }
body nav.nav.containerss .dropdownuser-menu a i { font-size: 16px; color: var(--kn-ink-2); }

/* ============ 4  YAN MENÜ  (#kt-menu) =================================================== */

/* Eski panel tamamen devre dışı. */
body #side-menu.th-menu-wrapper,
body .th-menu-wrapper.onepage-nav { display: none !important; }

.kt-menu[hidden] { display: none !important; }

.kt-menu {
  position: fixed;
  inset: 0;
  z-index: 100080;              /* alttan açılan panellerin de üstünde */
  display: block;
}

.kt-menu, .kt-menu * { box-sizing: border-box; }

.kt-menu__perde {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 30, .46);
  opacity: 0;
  transition: opacity .24s ease;
}
.kt-menu.kt-acik .kt-menu__perde { opacity: 1; }

.kt-menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  background: var(--kn-yuzey-2);
  box-shadow: 12px 0 44px rgba(10, 14, 30, .22);
  transform: translateX(-102%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.kt-menu.kt-acik .kt-menu__panel { transform: translateX(0); }

html[dir="rtl"] .kt-menu__panel { transform: translateX(102%); }
html[dir="rtl"] .kt-menu.kt-acik .kt-menu__panel { transform: translateX(0); }

/* --- Üst şerit --- */

.kt-menu__ust {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--kn-yuzey);
  border-bottom: 1px solid var(--kn-cizgi);
}

.kt-menu__logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

.kt-menu__kapat {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kn-cizgi);
  border-radius: 50%;
  background: var(--kn-yuzey);
  color: var(--kn-ink);
  cursor: pointer;
  transition: all var(--kn-hiz);
}
.kt-menu__kapat:hover { border-color: var(--kn-brand); color: var(--kn-brand); }
.kt-menu__kapat svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Gövde --- */

.kt-menu__govde {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 16px calc(24px + var(--kn-alt));
}

.kt-menu__giris {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.kt-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: all var(--kn-hiz);
}
.kt-dugme svg { width: 17px; height: 17px; fill: currentColor; }

.kt-dugme--dolu {
  background: var(--kn-navy);
  color: #fff !important;
}
.kt-dugme--dolu:hover { background: #0f1240; }

.kt-dugme--bos {
  background: var(--kn-yuzey);
  border-color: var(--kn-navy);
  color: var(--kn-navy) !important;
}
.kt-dugme--bos:hover { background: rgba(23, 26, 82, .06); }

.kt-dugme--cerceve {
  width: 100%;
  margin-top: 6px;
  background: var(--kn-yuzey);
  border-color: var(--kn-cizgi-2);
  color: var(--kn-ink) !important;
}
.kt-dugme--cerceve:hover { border-color: var(--kn-brand); color: var(--kn-brand) !important; }

/* Giriş yapılmışsa hesap satırı */
.kt-menu__hesap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 14px;
  border-radius: var(--kn-r);
  background: var(--kn-yuzey);
  border: 1px solid var(--kn-cizgi);
  color: var(--kn-ink) !important;
  text-decoration: none !important;
}
.kt-menu__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kn-brand-soft);
}
.kt-menu__avatar svg { width: 22px; height: 22px; fill: var(--kn-brand); }
.kt-menu__hesap-yazi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kt-menu__hesap-yazi b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-menu__hesap-yazi small { font-size: 12.5px; color: var(--kn-ink-2); }

/* --- Kartlar ve satırlar --- */

.kt-menu__kart {
  margin-bottom: 16px;
  border: 1px solid var(--kn-cizgi);
  border-radius: var(--kn-r);
  background: var(--kn-yuzey);
  overflow: hidden;
}

.kt-menu__baslik {
  margin: 0 0 10px;
  padding-inline-start: 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--kn-ink);
}

.kt-menu__sat {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border: 0;
  border-bottom: 1px solid var(--kn-cizgi);
  background: none;
  color: var(--kn-ink) !important;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--kn-hiz);
}
.kt-menu__kart > .kt-menu__sat:last-child { border-bottom: 0; }
.kt-menu__sat:hover { background: var(--kn-yuzey-2); }
.kt-menu__sat:active { background: var(--kn-cizgi); }

.kt-menu__ikon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kt-menu__ikon svg { width: 22px; height: 22px; fill: var(--kn-navy); }

.kt-menu__yazi {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kt-menu__deger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--kn-ink-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.kt-menu__bayrak {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.kt-menu__ok {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: var(--kn-ink-3);
}
html[dir="rtl"] .kt-menu__ok { transform: scaleX(-1); }

.kt-menu__belge {
  margin: 16px 2px 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--kn-ink-3);
  text-align: center;
}

body.kt-menu-acik { overflow: hidden !important; }

/* ============ 5  MASAÜSTÜ / RTL / HAREKET AZALTMA ======================================= */

@media (min-width: 992px) {
  body nav.nav.containerss { display: none !important; }
  body { padding-bottom: 0 !important; }

  .kt-menu__panel { width: 420px; }
}

@media (max-width: 400px) {
  .kt-menu__panel { width: 100vw; }
  .kt-menu__sat { padding: 13px 12px; font-size: 14.5px; }
  .kt-menu__govde { padding: 14px 12px calc(22px + var(--kn-alt)); }
}

html[dir="rtl"] body nav.nav.containerss .dropdownuser-menu { transform: translateX(50%) translateY(6px) !important; }
html[dir="rtl"] body nav.nav.containerss .dropdownuser.active .dropdownuser-menu { transform: translateX(50%) translateY(0) !important; }

@media (prefers-reduced-motion: reduce) {
  .kt-menu__panel, .kt-menu__perde,
  body nav.nav.containerss .nav__link,
  body nav.nav.containerss .dropdownuser-menu { transition: none !important; }
}