/* Live-site inline critical CSS overrides (banner/hero/validation), shipped globally to match production. */

/* ===== live inline style block 0 ===== */
/* Essential Reset */
        *{margin:0;padding:0;box-sizing:border-box}
        html{font-size:10px}
        body{font-size:1.6rem;font-family:"Montserrat",sans-serif;color:#3A3A3A;background:#fff}

        /* Critical Navbar */
        .navbar{width:100%;display:flex;justify-content:center;position:sticky;z-index:10000;top:0;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
        .navbar-inner{width:100%;max-width:1280px;padding:6px 20px;display:flex;justify-content:space-between;align-items:center}
        .navbar .logo{width:150px;height:55px}
        .navbar .logo img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
        .flag-icon{width:24px;height:18px}
        .navbar-mobile{display:none}

        /* Critical Hero */
        .hero-content{width:100%;display:grid;grid-template-columns:1fr;gap:16px;padding:20px}
        .hero-video video{width:100%;aspect-ratio:1/1;border-radius:32px;object-fit:cover}
        .hero-content-right{display:flex;flex-direction:column;gap:16px;justify-content:center}
        .hero-description{font-size:16px;font-weight:500;line-height:1.5}
        .book-now-btn{display:inline-flex;justify-content:center;align-items:center;background:#0A78AA;color:#fff;text-decoration:none;padding:12px 24px;border-radius:8px;font-weight:600;max-width:200px}

        /* Hero Features */
        .hero-features{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
        .feature-box{display:flex;align-items:center;gap:16px;padding:20px;border-radius:16px;min-height:100px}
        .feature-box img{width:60px;height:60px;border-radius:8px}

        /* Inner Page Banner - Critical for all pages */
        /* Live's regular banner has `padding: 40px 20px` (border-box), insetting the h1 to width 944
           (20px each side). Without it our h1 fills 984 and its text shifts ~20px + long titles wrap at
           a different width — worst on the short treatments-index pages where the banner is a big % of
           the page. banner-compact sets its own padding below, so scope this to the regular banner. */
        .inner-page-banner:not(.banner-compact){box-sizing:border-box;padding:40px 20px}
        /* Live's banner h1 has margin:0; ours inherits a 16px bottom margin that, in the flex-centered
           banner, lifts the title 8px above live (reddens the banner on short index pages). */
        .inner-page-banner:not(.banner-compact) h1{margin:0}
        /* Treatments-index full-bleed banner background (matches live: 100vw × 900px absolute <img>,
           z-index -1, anchored to the viewport top-left so it sits behind the whole top of the page). */
        /* Canlının GÜNCEL treatments-index banner'ı: görsel banner İÇİNDE sınırlı (inset:0, radius).
           Eski 100vw×900 full-bleed hali sayfa arkasına taşıp görseli "tekrarlatıyordu" (canlı bu
           aradaki dönemde değişmiş; 2026-07-23 re-crawl snapshot'ı inline inset:0 stilini gösteriyor). */
        .inner-page-banner{position:relative}
        /* Banner'ın full-bleed arka plan görseli olduğunda kendi stacking context'ini kur +
           taşanı kırp: z-index:-1 görsel yalnız banner kutusunda kalır, ASLA sayfa arkasına
           kaçmaz (eski bleed'in kalıcı çözümü — isolation + overflow). */
        .inner-page-banner:has(.banner-bg-fullbleed){isolation:isolate;overflow:hidden;border-radius:32px}
        .banner-bg-fullbleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;border-radius:32px}
        .inner-page-banner.banner-compact{width:100%;min-height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0A78AA,#096398);color:#fff;padding:40px 20px}
        .inner-page-banner.banner-compact h1{font-size:28px;font-weight:700;text-align:center;margin:0}

        /* Critical Layout */
        .page-container{min-height:100vh}
        .page-container-inner{max-width:1280px;margin:0 auto;padding:0 20px}

        /* Enhanced Buttons */
        .contact-btn{display:inline-flex;justify-content:center;align-items:center;background:#0A78AA;color:#fff;text-decoration:none;padding:12px 24px;border-radius:8px;font-weight:600;transition:transform .2s ease;border:none;cursor:pointer}
        .book-now-btn:hover,.contact-btn:hover{transform:translateY(-2px);background:#096398}

        /* CLS Prevention */
        img{height:auto;max-width:100%;font-size:0}
        h1,h2,h3,h4,h5{font-weight:700;line-height:1.3;margin:0 0 16px 0}
        h1{font-size:32px}h2{font-size:28px}h3{font-size:24px}

        /* Desktop */
        @media(min-width:992px){
            .hero-content{grid-template-columns:1fr 1fr;padding:40px}
            .hero-content-right{gap:32px}
            .hero-description{font-size:20px}
            .hero-features{grid-template-columns:1fr 1fr}
            .navbar-inner .navbar-right{display:flex;align-items:center;gap:32px}
            .inner-page-banner.banner-compact h1{font-size:36px}
            h1{font-size:42px}
        }

        /* Mobile Optimizations */
        @media(max-width:991px){
            .navbar-right{display:none}
            .navbar-mobile{display:block}
        }

        /* Fix for third-party ad containers and popups */
        .cf-overlay-boxed, #cta_176935, [id^="cta_"] {
            z-index: 9998 !important;
            margin-top: 120px !important; /* navbar + breadcrumb height */
            max-width: 100% !important;
            width: auto !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            box-sizing: border-box !important;
        }

        /* Mobile responsive fixes for ConvertFlow ads */
        @media (max-width: 768px) {
            .cf-overlay-boxed, #cta_176935, [id^="cta_"] {
                max-width: calc(100vw - 32px) !important;
                width: calc(100vw - 32px) !important;
                margin-left: 16px !important;
                margin-right: 16px !important;
                left: 0 !important;
                right: 0 !important;
                transform: none !important;
                margin-top: 100px !important; /* reduced for mobile */
            }

            /* Fix for any inner content that might overflow */
            .cf-overlay-boxed *, #cta_176935 *, [id^="cta_"] * {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Ensure buttons and form elements are responsive */
            .cf-overlay-boxed input,
            .cf-overlay-boxed button,
            #cta_176935 input,
            #cta_176935 button,
            [id^="cta_"] input,
            [id^="cta_"] button {
                max-width: 100% !important;
                width: auto !important;
                font-size: 14px !important;
            }
        }

        /* Ensure navbar always stays on top */
        .navbar {
            z-index: 10000 !important;
        }

        /* Ensure breadcrumb doesn't interfere */
        .expandable-breadcrumb {
            position: relative;
            z-index: 5 !important;
        }

/* ===== live inline style block 1 ===== */
.field-validation-error{
            width:100%;
        }

        label[for="51cb2bd1-8957-4929-bd34-e30040e28922"]{
            margin:0 !important;
        }
       
        .testimonials .right .splide .splide__slide .bottom {
            border-radius: 32px;
                background: #C7D6EA;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                max-height: 350px;
                overflow: auto;
        }

/* ===== live inline style block 3 ===== */
/* Mobilde taşmayı önleyen sihirli değnek */
    .inner-page-banner.banner-compact h1 {
        white-space: normal !important; /* Satırı zorla kırmayı engeller, alta atar */
        word-wrap: break-word !important; /* Çok uzun kelime gelirse böler */
        overflow-wrap: break-word !important;
        font-size: clamp(1.8rem, 5vw, 2.8rem) !important; /* Ekran küçüldükçe fontu küçültür */
        line-height: 1.2 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .inner-page-banner.banner-compact {
        padding: 40px 15px !important; /* Kenarlardan nefes payı bırakır */
        height: auto !important; /* Yükseklik sabitse metin sığmayabilir, auto yapıyoruz */
        min-height: 200px;
    }

/* Sticky contact form now renders live's own `.contact-form-container` markup (styled by
   style.css: fixed, left:60px, vertically centered next to the floating sidebar). */

/* ===== Dental-holiday hotel reels (.splide__otel-card) =====
   The mounter intentionally leaves these carousels un-initialized to match live, where the slides
   render stacked full-width (track overflow visible, list block). But splide.min.css forces
   `.splide__track{overflow:hidden}` + `.splide__list{display:flex}`, which clips the reel to a
   single slide (each hotel section rendered ~half height). Restore live's stacked layout. */
.splide__otel-card .splide__track { overflow: visible !important; visibility: visible !important; }
.splide__otel-card .splide__list { display: block !important; }
.splide__otel-card .splide__slide { visibility: visible !important; }
/* Live leaves the inline image's ~4px descender whitespace (each slide is 4px taller than the image);
   splide.min.css's `img{vertical-align:bottom}` removes it, so the stacked slides drift up and images
   2+ misregister. Restore the baseline whitespace to keep every stacked image pixel-aligned. */
.splide__otel-card .splide__slide img { vertical-align: baseline !important; }

/* Nav wrap is intentionally NOT forced single-line: with the corrected NAV_TEXTS labels (seed-globals.ts)
   our nav item widths now match live's, so de/tr/en fit one line and fr wraps to two lines exactly like
   live (the earlier nowrap override was compensating for wrong/short labels and wrongly kept fr on one
   line, shifting the fr banner 5px at ~1024px). */

/* 3rd-level nav flyout (Treatments categories → sub-treatments, About Us → Our Doctors/HTA).
   Live opens the nested submenu as a right-side flyout: position absolute, left calc(100% + 10px),
   top 0, no transform. style.css's base `.dropdown-language .dropdown-menu{left:50%;transform:
   translateX(-50%);margin-top:28px}` (authored for the 2nd level under the nav bar) would otherwise
   center it below the bar, so re-anchor the nested case here. Desktop only; mobile stacks inline. */
@media (min-width: 992px) {
  .navbar-right .dropdown-menu .dropdown-language > .dropdown-menu {
    left: calc(100% + 10px) !important;
    top: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* Footer is width-capped and centered on live (1240px, calc(100%-40px) below that, 24px bottom
   margin) — it floats inside the page gutter like the content container, not full-bleed.
   margin-top: on live the footer sits INSIDE .page-container-inner (flex column, gap:32px), so a
   32px flex gap separates it from the last section; our footer is a layout-level sibling of <main>
   and gets no gap, so reproduce it as a top margin. */
.footer {
  width: calc(100% - 40px);
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}

/* Mobile menu open state: style.css only defines the closed panel (translateX(-100%)) — live
   slides it in via its own JS; our Navbar toggles the .active class, so the open transform must
   exist in CSS or taps appear dead (panel stays off-screen). */
.navbar-inner .navbar-mobile.active {
  transform: translateX(0);
}

/* Dropdown hover bridges: the desktop dropdowns open 10px below their trigger
   (.navbar-right ... margin-top:10px) and the 3rd-level flyout 10px to the right. Crossing that
   empty gap fires mouseleave and the close timer can win against a slow/diagonal pointer path
   (menu vanishes before reaching it). Fill the gaps with invisible hover extensions. */
@media (min-width: 992px) {
  .navbar-right .navbar-mobile-ul > li.dropdown-language > .dropdown-menu::before,
  .navbar-right > .dropdown-language > .dropdown-menu::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: -12px;
    height: 12px;
  }
  .navbar-right .dropdown-menu .dropdown-language > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
    height: auto;
  }
}

/* Full-row click targets in desktop dropdowns: style.css pads the <li> (5px/10px 20px) and sizes the
   <a> to max-content, so most of each row (the padding + the space around the centered text) is a
   dead zone — clicks land on the li, not the link. Move the padding onto the <a> so the whole row
   navigates. Scoped to leaf rows (li without .dropdown-language) so category rows keep their
   nav-item-with-dropdown layout; also covers the language menu. */
@media (min-width: 992px) {
  .navbar-right .dropdown-menu li:not(.dropdown-language) {
    padding: 0 !important;
  }
  .navbar-right .dropdown-menu li:not(.dropdown-language) > a {
    width: 100% !important;
    padding: 5px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* 3rd-level flyout rows use the larger 10px padding from style.css. The li zero-padding is
     repeated at this depth because style.css's `... .dropdown-language > .dropdown-menu li
     {padding:10px 20px !important}` is (0,4,1) — more specific than the generic reset above. */
  .navbar-right .dropdown-menu .dropdown-language > .dropdown-menu li:not(.dropdown-language) {
    padding: 0 !important;
  }
  .navbar-right .dropdown-menu .dropdown-language > .dropdown-menu li:not(.dropdown-language) > a {
    padding: 10px 20px;
  }
  /* Category rows: shift the li padding onto the row wrapper so its full width is hoverable/clickable */
  .navbar-right .dropdown-menu li.dropdown-language {
    padding: 0 !important;
  }
  .navbar-right .dropdown-menu li.dropdown-language > .nav-item-with-dropdown {
    padding: 5px 20px;
  }
}

/* Mobile nested submenu stacking: style.css's `.dropdown-language .dropdown-menu li{display:flex;
   justify-content:center}` (authored for desktop rows) also hits the 2nd-level category <li> in the
   mobile panel, so an opened 3rd-level <ul> becomes a flex-row SIBLING of its label — it floats to
   the right of "Implant Dentistry" and overflows the panel instead of stacking below. Stack it. */
@media (max-width: 991px) {
  .navbar-mobile .dropdown-menu li.dropdown-language {
    display: block !important;
  }
}

/* ── Lead form validation UX (only visible on error — no effect on visual parity) ── */
.lead-field-error {
  display: block;
  color: #d0342c;
  font-size: 12px;
  line-height: 1.3;
  margin: 4px 0 0;
}
form input[aria-invalid='true'],
form textarea[aria-invalid='true'] {
  border-color: #d0342c !important;
}
/* intl-tel-input wrapper must fill the input's slot in both forms */
.iti {
  width: 100%;
}

/* ===== FARK agency credit (footer bottom-right) ===== */
.footer .footer-credit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(43, 43, 69, 0.12);
}
.footer-fark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.footer-fark:hover {
  opacity: 1;
}
.footer-fark img {
  width: 95px;
  height: auto;
  display: block;
}

/* ===== Sticky contact form — tidy up within the site's design language ===== */
.contact-form-container {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid #e6ecf5;
  box-shadow: 0 14px 34px rgba(10, 120, 170, 0.14);
}
.contact-form-container .form-header {
  margin-bottom: 14px;
}
.contact-form-container .form-header h5 {
  font-size: 16px;
  font-weight: 700;
  color: #0a2540;
  margin: 0;
}
.contact-form-container .form-header .close-button {
  color: #9aa5b4;
  line-height: 1;
  transition: color 0.15s ease;
}
.contact-form-container .form-header .close-button:hover {
  color: #0a2540;
}
.contact-form-container form input,
.contact-form-container form textarea,
.contact-form-container form select {
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid #d6dee9;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form-container form input::placeholder,
.contact-form-container form textarea::placeholder {
  color: #9aa5b4;
}
.contact-form-container form input:focus,
.contact-form-container form textarea:focus,
.contact-form-container form select:focus {
  outline: none;
  border-color: #0a78aa;
  box-shadow: 0 0 0 3px rgba(10, 120, 170, 0.12);
}
/* Reserve room for the intl-tel-input flag/dial button so it never overlaps the phone text.
   (The generic `padding:10px` above wipes the library's own left padding; higher specificity here.) */
.contact-form-container form input#sticky-phone,
.contact-form-container form input[type="tel"] {
  padding-left: 52px;
}
.contact-form-container .iti__selected-country {
  border-radius: 8px 0 0 8px;
}
.contact-form-container .kvkk-checkbox {
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b7280;
}
.contact-form-container .kvkk-checkbox input[type="checkbox"] {
  margin: 2px 0 0;
  accent-color: #0a78aa;
  flex: none;
}
.contact-form-container .kvkk-checkbox a {
  color: #0a78aa;
}
.contact-form-container form button.submit {
  margin-top: 2px;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: opacity 0.15s ease;
}
.contact-form-container form button.submit:hover {
  opacity: 0.9;
}

/* ===== Lighthouse: image-aspect-ratio =====
   CMS blok fotoğrafları sabit width/height (ör. 500×400) ile yüklenen görselin gerçek oranını
   ezip hafif distorsiyon yapıyordu; cover ile kutuyu doldurup kırpar (CLS'e dokunmaz). */
.hotel-card-gallery .right img,
.content-wt-img .image-item img,
.ig-post-item img {
  object-fit: cover;
}

/* ===== Lighthouse: target-size (mobil) =====
   Mobil menü metin linklerine yeterli dokunma yüksekliği (≥44px) — dar/yakın hedefleri açar. */
@media (max-width: 991px) {
  .navbar-mobile .nav-link,
  .navbar-mobile .navbar-mobile-ul > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}