/*
  KAREL İŞİTME - UI/UX fixes & modernization layer
  Loaded AFTER style.css and tablet-fix.css
*/

:root{
  --karel-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body{ font-family: var(--karel-font); }

/* Make headings more corporate/consistent */
h1, h2, h3, h4, h5, h6,
.heading__title,
.text-block__title,
.section__title,
.footer-widget__title{
  font-family: var(--karel-font) !important;
  letter-spacing: -0.01em;
}

/* Remove the green focus outline the user sees on click, while keeping accessibility */
:where(a, button, input, select, textarea):focus{ outline: none !important; box-shadow: none !important; }
:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid rgba(33,205,192,0.55) !important;
  outline-offset: 2px;
}

/* Hamburger: proper 3 lines */
.navbar-toggler .menu-lines,
.navbar-toggler .menu-lines span{
  background: transparent !important;
}
.navbar-toggler .menu-lines{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.navbar-toggler .menu-lines span{
  display:block;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #0e204d;
}

/* Desktop navbar layout stability */
@media (min-width: 992px){
  .navbar-nav{ align-items: center; }
  .navbar .nav__item-link{ white-space: nowrap; }
}

/* Multi-level dropdown support */
.karel-submenu{ position: relative; }
@media (min-width: 992px){
  .karel-submenu > .dropdown-menu{
    top: 0;
    left: 100%;
    margin-left: 6px;
  }
}

/* Mobile: make dropdowns tap-friendly */
@media (max-width: 1199.98px){

  /* Ensure the hamburger button is always tappable (some headers add overlays). */
  .navbar-toggler{
    position: relative;
    z-index: 3005;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* IMPORTANT: Theme uses .menu-opened to show the off-canvas menu.
     Because the element also has Bootstrap's .collapse class (display:none),
     on some devices the menu never becomes visible.
     Force it to be display:block on mobile; visibility/opacity is controlled by .menu-opened. */
  .navbar .navbar-collapse.collapse{ display:block !important; height:auto !important; }
  .navbar .navbar-collapse{ pointer-events:none; }
  .navbar .navbar-collapse.menu-opened{ pointer-events:auto; }

  #mainNavigation .dropdown-menu{ display: none; position: static; box-shadow: none; padding-left: 10px; }
  /* Our JS toggles .open on the parent li */
  #mainNavigation .nav__item.open > .dropdown-menu{ display: block !important; }
  /* Make sure submenu links are always clickable */
  #mainNavigation .navbar-nav, #mainNavigation .dropdown-menu{ pointer-events: auto; }
  #mainNavigation .nav__item-link{ font-family: var(--karel-font) !important; }
}

/* Help popup modal */
.karel-help-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  /* Ensure above WhatsApp widgets etc. */
  z-index: 10000000;
  padding: 16px;
}
.karel-help-modal.is-open{ display: flex; }
.karel-help-card{
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.karel-help-head{
  display:flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  padding: 18px 18px 10px;
}
.karel-help-head h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: #0e204d;
}
.karel-help-close{
  border: 0;
  background: rgba(14,32,77,0.08);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.karel-help-body{ padding: 0 18px 18px; }
.karel-help-body .form-control{ height: 52px; }
.karel-help-body .btn{ height: 52px; }
.karel-help-note{ font-size: 12px; color: #68758a; margin-top: 10px; }