/*
  Bootstrap 5 migration overrides
  Keep this file small and page-scoped to avoid unintended regressions.
*/

/* Homepage only: remove Bootstrap 5 default link underlines */
.homepage a,
.homepage a:hover,
.homepage a:focus,
.homepage a:active {
    text-decoration: none;
}

/* Homepage only: suppress OL numbering for legacy <li> carousel indicators */
.homepage .homepage_slider .carousel-indicators {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.homepage .homepage_slider .carousel-indicators > li {
    list-style: none;
}

.homepage .homepage_slider .carousel-indicators > li::marker {
    content: '';
}

/* Media carousel: suppress OL numbering for legacy <li> indicators under Bootstrap 5 */
.carouselMedia .carousel-indicators {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.carouselMedia .carousel-indicators > li {
    list-style: none;
}

.carouselMedia .carousel-indicators > li::marker {
    content: '';
}

/* Layout5 pages: when breadcrumbs wrap onto multiple lines, add vertical spacing
   between rows (e.g., Anasayfa / Bilgilendirme).
   Do NOT set display here; otherwise it can override `.mobile-show-600 { display:none; }` on desktop. */
.breadcrumb.breadcrumb--spaced {
    row-gap: 10px;
}

/* Carousel control buttons: vertically center the arrow icons */
.homepage .homepage_slider .carousel-control-prev,
.homepage .homepage_slider .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.homepage .homepage_slider .carousel-control-prev {
    padding: 0 !important;
}

.homepage .homepage_slider .carousel-control-next {
    padding: 0 !important;
}

.homepage .homepage_slider .carousel-control-prev-icon,
.homepage .homepage_slider .carousel-control-next-icon {
    margin: 0 !important;
    background-position: center;
}

/* Layout5 pages: in legacy CSS, breadcrumb items are hidden under 1000px.
   For BS5 pages we keep the dedicated mobile breadcrumb at <=600px,
   but show the full breadcrumb on tablet widths to match desktop layout. */
@media (min-width: 601px) and (max-width: 1000px) {
    .breadcrumb.mobile-hidden-600 .breadcrumb-item {
        display: block;
    }
}

/* Layout5 pages: prevent decorative arrow pseudo-elements from drifting to the page edge
   by ensuring their components establish a positioning context. */
.link-box {
    position: relative;
    padding-right: 45px;
}

/* Layout5 pages: align the yellow arrow closer to the right edge (Bootstrap 4 look) */
.link-box::after {
    right: 20px;
}

.menu-left--mobile button {
    position: relative;
}

/* Homepage: keep Bilgilendirme background shape behind cards */
.homepage .homepage-bilgilendirme {
    position: relative;
}

.homepage .homepage-bilgilendirme::before {
    z-index: 0 !important;
    pointer-events: none;
}

.homepage .homepage-bilgilendirme .homepage-bilgilendirme-item {
    position: relative;
    z-index: 1;
}

/* Homepage: lock icon should be positioned relative to each Online İşlemler item */
.homepage .homepage-box-item--body .item {
    position: relative;
}

/* Homepage (Basvuru Takibi): legacy container height (40px) causes helper text to overlap
   because inputs are 46px tall. Keep spacing consistent under Bootstrap 5. */
.homepage .bg-basvuru-takibi .form-group.floating.text-input-full {
    height: 46px !important;
}

/* Add a bit of breathing room between input and helper text */
.homepage .bg-basvuru-takibi .form-group.floating.text-input-full + p {
    margin-top: 6px;
}

/* Homepage: search autocomplete dropdown should open aligned to the input and same width
   (Bootstrap 4 look). Also pull it slightly upward so it starts before the input's oval
   bottom rounding becomes visible. */
.homepage .homepage-search-box .search-input--autocomplete {
    position: relative;
}

.homepage .homepage-search-box .search-input--autocomplete > .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    /* tiny overlap to avoid a visible seam */
    margin-top: -1px !important;
    inset: auto !important;
    transform: none !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-top: 0 !important;
    z-index: 1000;
}

/* When the dropdown is open, remove the input's bottom oval rounding.
   JS ensures the wrapper gets `.show` (legacy behaviour). */
.homepage .homepage-search-box .search-input-radius::before {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.homepage .homepage-search-box .search-input-radius.show input {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.homepage .homepage-search-box .search-input-radius.show::before {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Layout5 pages: mobile header search autocomplete dropdown should behave like homepage
   (no gap and no horizontal drift under Bootstrap 5). */
@media (max-width: 1000px) {
    .header-mobile .search-input--autocomplete.show > .dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        inset: auto !important;
        transform: none !important;
        /* tiny overlap to remove the seam/gap */
        margin-top: -1px !important;
    }

    /* Keep hamburger panel above legacy search layers (`z-index: 9999`).
       Fixes mobile case where "Temizle" appears over the opened menu. */
    .header-mobile .dropdown .dropdown-menu.show {
        z-index: 10001 !important;
    }

    /* Hide search action layer when hamburger menu is open */
    body.mobile-menu-open [class*="search-input"] .button-box,
    body.mobile-menu-open [class*="search-input"] .dropdown-menu,
    body.mobile-menu-open [class*="search-input"] .bg_search-input,
    body.mobile-menu-open .button-box,
    body.mobile-menu-open .search-input-focus {
        display: none !important;
    }
}

/* Layout5 pages: on small screens, increase spacing between breadcrumb and the page title
   so 'Ana Sayfa' and the next line (e.g. 'Bilgilendirme') don't feel cramped. */
@media (max-width: 600px) {
    .breadcrumb--spaced {
        padding-bottom: 20px;
    }
}

/* Site: always show global loading overlay when body is in loading state.
   Fixes cases where the overlay stays hidden despite loadingGif(). */
body.body-loading .loading-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* BS5 removed `position: relative` from col-* classes (BS4 had it on every column).
   Restore it globally so absolutely-positioned children stack properly and
   reCAPTCHA iframes remain clickable at all viewport sizes. */
.row > [class*="col-"] {
  position: relative;
}

/* Ensure reCAPTCHA sits above sibling elements (info cards, floating labels, etc.).
   Use [data-sitekey] to cover all captcha containers regardless of class name. */
[data-sitekey] {
  position: relative;
  z-index: 2;
}