/*
 * awenclinic-site — bu paketin kendi CSS'i. Medicax'ın satın alınmış
 * main.css'i olduğu gibi kalıyor (proje kuralı: purchased CSS/JS aynen
 * korunur); tüm marka rengi + düzeltme + yeni bileşen stilleri burada.
 *
 * Yapı:
 *   1) Renk köprüsü — eski sistemdeki tenant_themes özelleştirmesinin
 *      (#987c5f primary, Roboto font) SABİT halde birebir karşılığı.
 *      Eski sistemde bu bir admin panelinden çalışma zamanında enjekte
 *      ediliyordu (CSS custom property); burada tek client'a özel statik
 *      dosya olduğu için doğrudan sabit değer.
 *   2) btzclinic-web'in medicax-cardio teması için yazdığı ~1400 satırlık
 *      düzeltme katmanı (theme.css) — birebir taşındı: header'ı okunur
 *      yapan, breadcrumb'ı görünür kılan, tablo/liste tipografisini
 *      düzelten gerçek, test edilmiş düzeltmeler. Yalnızca Vue-SPA'ya özel
 *      "JS bundle edilmedi, elementi zorla görünür yap" satırları
 *      ATLANMADI değil — DAHİL EDİLDİ: gerçek main.js'imiz zaten çalışıyor
 *      olsa da bu kural en kötü ihtimalle "giriş animasyonu oynamaz,
 *      içerik direkt görünür" sonucu veriyor — bir hata değil, kabul
 *      edilebilir bir sadeleşme.
 *   3) Bu paketin kendi yeni bileşenleri (Hakkımızda'nın Neden Biz/Süreç/
 *      Misyon-Vizyon/Uluslararası Hasta/Galeri vitrini kartları, tedavi/
 *      galeri/blog kartları, iletişim split-card formu, footer, üst
 *      menüdeki dil seçici, sabit telefon/WhatsApp/yukarı-çık butonları) —
 *      hepsi eski sistemin Vue bileşenlerindeki <style scoped> bloklarından
 *      birebir taşındı, yalnızca Vue'ya özel seçiciler (:deep(), .owl-item
 *      vb. runtime sınıfları) sadeleştirildi.
 */

/* Güvenlik kemeri: .awen-hero-full'ın 100vw/negatif margin tekniği (tam
   ekran taşma) bir kenarda yuvarlama hatasıyla hâlâ birkaç piksel dışarı
   taşırsa, sayfanın kendisi yatay kaymasın diye. */
html, body {
    overflow-x: clip;
}

.theme-medicax-cardio {
    --mx-primary: #987c5f;
    --mx-secondary: #1C293F;
    --mx-primary-soft: color-mix(in srgb, var(--mx-primary) 12%, white);
    --mx-primary-dark: color-mix(in srgb, var(--mx-primary) 22%, black);
    --ztc-text-text-11: var(--mx-primary-dark);
}

/* ============ Solid (non-transparent) header ============
 * index4 ships a transparent, absolutely-positioned header designed to
 * overlay a fixed two-column hero. This tenant uses the dynamic Hero
 * Slider instead, whose bright photo slides leave the transparent
 * header's grey nav links unreadable. Make the header solid white +
 * in-flow (relative) so the slider starts below it and the menu is
 * always legible — a cleaner, theme-inherited look. */
.theme-medicax-cardio .vl-header-area.vl-transparent-header {
  position: relative !important;
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
}
/* Top bar sits inside the now-white header — keep a subtle divider */
.theme-medicax-cardio .vl-header-area.vl-transparent-header .header-top-area {
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
/* Nav links: dark on white (transparent-header CSS made them light) */
.theme-medicax-cardio .vl-header-area.vl-transparent-header .vl-main-menu nav > ul > li > a {
  color: #1a1a2e !important;
}
.theme-medicax-cardio .vl-header-area.vl-transparent-header .vl-main-menu nav > ul > li > a:hover,
.theme-medicax-cardio .vl-header-area.vl-transparent-header .vl-main-menu nav > ul > li.has-dropdown:hover > a {
  color: var(--mx-primary) !important;
}
/* Top-bar links (hours / mail / phone) dark on white */
.theme-medicax-cardio .vl-header-area.vl-transparent-header .header-top-area a {
  color: #4b5563 !important;
}
.theme-medicax-cardio .vl-header-area.vl-transparent-header .header-top-area a:hover {
  color: var(--mx-primary) !important;
}
/* Sticky state already solid in main.css; keep our shadow consistent */
.theme-medicax-cardio .vl-header-area.header-sticky {
  background: #ffffff !important;
}

.theme-medicax-cardio .vl-btn4,
.theme-medicax-cardio .vl-btn1,
.theme-medicax-cardio .vl-btn3,
.theme-medicax-cardio .theme-bg1,
.theme-medicax-cardio .btn1 {
  background-color: var(--mx-primary) !important;
  border-color: var(--mx-primary) !important;
}

.theme-medicax-cardio a:hover,
.theme-medicax-cardio .vl-main-menu nav ul li a:hover,
.theme-medicax-cardio .vl-main-menu nav ul li.has-dropdown:hover > a {
  color: var(--mx-primary) !important;
}

/* AOS plugin CSS is loaded (aos.css) but the JS init is not bundled —
 * AOS elements would stay invisible without `aos.init()`. We promote
 * them to fully visible so the page renders even without the JS.
 * Once we bundle AOS JS (or replace with Vue transitions) this can go.
 */
.theme-medicax-cardio [data-aos] {
  opacity: 1;
  transform: none;
}

/* Medicax's plugin-driven entrance animations (Splitetext, AOS, jquery
 * scroll observers, counter.js) all set opacity:0 + clip-path masks +
 * transform offsets in main.css, expecting JS to remove them on scroll.
 * We don't bundle the JS, so EVERYTHING wrapped in these helpers stays
 * invisible. Force-promote all such carriers to fully visible state.
 */
/* [data-aos] is now managed by AOS (bundled via Header.vue). Other
 * plugin-driven hidden states still need force-visible because their JS
 * isn't bundled (Splitetext, jquery image-anime observers, counter.js).
 */
.theme-medicax-cardio .image-anime,
.theme-medicax-cardio .reveal,
.theme-medicax-cardio .counter-boxarea,
.theme-medicax-cardio .counter,
.theme-medicax-cardio .text-anime-style-3,
.theme-medicax-cardio .text-anime-style-2,
.theme-medicax-cardio .text-anime-style-1,
.theme-medicax-cardio .split-line,
.theme-medicax-cardio .cs_case_study,
.theme-medicax-cardio .vl-blog-1-item,
.theme-medicax-cardio .vl-blog-1-thumb,
.theme-medicax-cardio .service-single-boxarea,
.theme-medicax-cardio .single-slider-box,
.theme-medicax-cardio .team-single-boxarea {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Anchor wrappers around our placeholder divs need to behave like blocks
 * so width:100%/height:100% on the gradient placeholder actually resolves.
 */
.theme-medicax-cardio .vl-blog-1-thumb a,
.theme-medicax-cardio .service-single-boxarea .img1 a,
.theme-medicax-cardio .team-single-boxarea .img1 a {
  display: block;
  width: 100%;
  height: 100%;
}

/* text-anime-style-3 hooks Splitetext.js — without the JS, the raw <h1>
 * text shows. Make sure it's not hidden by the plugin's pre-init CSS.
 */
.theme-medicax-cardio .text-anime-style-3 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Medicax decorative floating overlay images (.elements12..18 with
 * keyframe5 animation) rely on jQuery to position + animate them. Without
 * the JS they end up flow-positioned, often overlapping content. Hide them
 * across the theme; we can selectively re-enable once we bundle the JS.
 */
.theme-medicax-cardio .elements11,
.theme-medicax-cardio .elements12,
.theme-medicax-cardio .elements13,
.theme-medicax-cardio .elements14,
.theme-medicax-cardio .elements15,
.theme-medicax-cardio .elements16,
.theme-medicax-cardio .elements17,
.theme-medicax-cardio .elements18,
.theme-medicax-cardio .elements19,
.theme-medicax-cardio .keyframe5 {
  display: none !important;
}

/* Hero floating SVG icons can stay — they're absolute-positioned by main.css */
.theme-medicax-cardio .hero4-section-area .icons-area .icons1,
.theme-medicax-cardio .hero4-section-area .icons-area .icons2,
.theme-medicax-cardio .hero4-section-area .icons-area .icons3,
.theme-medicax-cardio .hero4-section-area .icons-area .icons4,
.theme-medicax-cardio .hero4-section-area .icons-area .icons5,
.theme-medicax-cardio .hero4-section-area .icons-area .icons6 {
  display: block !important;
}

.theme-medicax-cardio .team-single-boxarea .img1 img {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Anasayfa Treatments kartlarında başlık 1 veya 2 satır sürebiliyor
 * (ör. "Goiter" vs "Endoscopic 6-Month Gastric Balloon in Bursa") ve
 * main.css'in content-box'ı buna göre esniyor — kartlar arasında yükseklik
 * tutmuyor, resim de kart yüksekliğine göre gerilip sıkışıyor. Başlığı
 * 2 satırla sabitleyip (kısa olan boşluk bırakır, uzun olan 3. satıra
 * taşmadan kırpılır) content-box'a da o 2 satıra denk sabit bir yükseklik
 * veriyoruz — böylece tüm kartlar (1 veya 6 tane gösterilsin) aynı boyda. */
.theme-medicax-cardio .service-single-boxarea .content-box {
  min-height: 126px;
  box-sizing: border-box;
}
.theme-medicax-cardio .service-single-boxarea .content-box a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Anasayfa/Blog listesindeki blog kartları da aynı sorunu yaşıyor: başlık
 * uzunluğuna göre kart yüksekliği değişiyor, "Learn More" bazı kartlarda
 * üstte bazılarında altta kalıyor. Kartı flex-column yapıp .vl-blog-1-content'i
 * esnetip "Learn More"u margin-top:auto ile her zaman en alta sabitliyoruz —
 * satırdaki en uzun kart neyse hepsi ona eşitleniyor, başlık kırpılmıyor. */
.theme-medicax-cardio .vl-blog-1-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.theme-medicax-cardio .vl-blog-1-item .vl-blog-1-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.theme-medicax-cardio .vl-blog-1-item .vl-blog-1-icon {
  margin-top: auto;
}

/* Owl Carousel fallback layout — before Owl JS initializes (or if it
 * fails to load), the slider-area's direct boxarea children would
 * stack vertically as block elements. Force a flex row so cards lay
 * side-by-side immediately. Once Owl adds `.owl-loaded` it overrides
 * with its own owl-stage / owl-item layout.
 */
.theme-medicax-cardio .service-single-slider:not(.owl-loaded),
.theme-medicax-cardio .team-single-slider:not(.owl-loaded),
.theme-medicax-cardio .testimonial-single-slider:not(.owl-loaded) {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}
.theme-medicax-cardio .service-single-slider:not(.owl-loaded) > .service-single-boxarea {
  flex: 0 1 calc(25% - 24px);
  min-width: 240px;
}
.theme-medicax-cardio .team-single-slider:not(.owl-loaded) > .team-single-boxarea {
  flex: 0 1 calc(25% - 24px);
  min-width: 220px;
}
.theme-medicax-cardio .testimonial-single-slider:not(.owl-loaded) > .single-slider-box {
  flex: 0 1 calc(33.333% - 24px);
  min-width: 280px;
}

/* Rich HTML article content (service description, blog content, about page) —
 * main.css resets typography aggressively so v-html'd content lost bullets,
 * heading scale, list spacing. Restore sensible defaults scoped to the
 * detail page wrappers so admin-authored HTML renders as expected.
 */
.theme-medicax-cardio .service-main-content-details ul,
.theme-medicax-cardio .vl-blog-details-content ul,
.theme-medicax-cardio .doctor-deatisl-content-area ul,
.theme-medicax-cardio .about1-heading ul,
.theme-medicax-cardio .blog-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.theme-medicax-cardio .service-main-content-details ul li,
.theme-medicax-cardio .vl-blog-details-content ul li,
.theme-medicax-cardio .doctor-deatisl-content-area ul li,
.theme-medicax-cardio .about1-heading ul li,
.theme-medicax-cardio .blog-content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.theme-medicax-cardio .service-main-content-details h3,
.theme-medicax-cardio .vl-blog-details-content h3,
.theme-medicax-cardio .doctor-deatisl-content-area h3,
.theme-medicax-cardio .about1-heading h3,
.theme-medicax-cardio .blog-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--mx-primary);
}
.theme-medicax-cardio .service-main-content-details p,
.theme-medicax-cardio .vl-blog-details-content p,
.theme-medicax-cardio .doctor-deatisl-content-area p,
.theme-medicax-cardio .blog-content p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Inline-text + trailing icon pattern — Medicax template puts `<svg>`
 * after the label inside the same anchor/h5. main.css resets svg to
 * `display: block` in several spots, dropping the icon to a new line.
 * The fix is the same everywhere: make the WRAPPER inline-flex with a
 * small gap so text + icon sit side-by-side regardless of svg display.
 */
.theme-medicax-cardio .vl-section-subtitle,
.theme-medicax-cardio .vl-btn4,
.theme-medicax-cardio a.readmore,
.theme-medicax-cardio a.learnmore,
.theme-medicax-cardio .btn-area1 a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.theme-medicax-cardio .vl-section-subtitle svg,
.theme-medicax-cardio .vl-btn4 svg,
.theme-medicax-cardio a.readmore svg,
.theme-medicax-cardio a.learnmore svg,
.theme-medicax-cardio .btn-area1 a svg {
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 0;
}
.theme-medicax-cardio .vl-section-subtitle span,
.theme-medicax-cardio .vl-btn4 span {
  display: inline-flex;
  align-items: center;
}
/* btn-area1 itself can host MULTIPLE buttons → keep as flex row */
.theme-medicax-cardio .btn-area1 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────
 * Tailwind Preflight antidote (icon + text alignment).
 * The public SPA bundle ships Tailwind's base reset, which sets
 * `img, svg { display: block }` GLOBALLY. Medicax's main.css was
 * authored against the browser default (`inline`), so every
 * "inline icon + label" pattern — the eyebrow <h5><img> label, the
 * round .icons <svg> chips, tel:/mailto: links, and the work-step
 * circular thumbnails — had its icon drop onto its own line or lose
 * centering. The pre-existing inline-flex block above only covered
 * buttons (.vl-btn4/.btn-area1/.vl-section-subtitle); these carriers
 * were missed. Restore inline-level rendering so each icon sits on
 * the same line as its text, matching the original index4 1:1.
 * (Verified against html.vikinglab.agency/medicax/index4.html: there
 * img/svg compute to `inline`; here Preflight forced them to `block`.)
 * ───────────────────────────────────────────────────────────── */

/* Section eyebrow: <h5><img sub-logo> Label</h5> (icon was stacking above) */
.theme-medicax-cardio .heading1 h5,
.theme-medicax-cardio .heading2 h5,
.theme-medicax-cardio .heading3 h5,
.theme-medicax-cardio .heading4 h5 {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.theme-medicax-cardio .heading1 h5 img,
.theme-medicax-cardio .heading2 h5 img,
.theme-medicax-cardio .heading3 h5 img,
.theme-medicax-cardio .heading4 h5 img,
.theme-medicax-cardio .heading1 h5 svg,
.theme-medicax-cardio .heading2 h5 svg {
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 0;
}

/* tel:/mailto: links (contact widgets, CTA, footer top-bar) — icon
 * left of the number/address. Header .phone is handled separately
 * below; this is the broad safety net for the same pattern elsewhere. */
.theme-medicax-cardio a[href^="tel:"],
.theme-medicax-cardio a[href^="mailto:"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.theme-medicax-cardio a[href^="tel:"] svg,
.theme-medicax-cardio a[href^="mailto:"] svg,
.theme-medicax-cardio a[href^="tel:"] img,
.theme-medicax-cardio a[href^="mailto:"] img {
  display: inline-block !important;
  flex-shrink: 0;
}

/* Round decorative icon chips (<div class="icons"><svg></div>) — the
 * svg was display:block + top-left; recenter the glyph. text-align is
 * harmless if main.css already flex-centers, and rescues it if it
 * relied on the browser-default inline svg. */
.theme-medicax-cardio .icons {
  text-align: center;
}
.theme-medicax-cardio .icons > svg,
.theme-medicax-cardio .icons > img {
  display: inline-block !important;
  vertical-align: middle;
}

/* Work-step circular thumbnails — parent .img1 centers via
 * text-align:center, but a block <img> ignores that and hugs the
 * left edge, overlapping the connector arrow (elements4). Inline-block
 * lets the centering apply, restoring the index4 layout. */
.theme-medicax-cardio .work-single-boxarea .img1 {
  text-align: center;
}
.theme-medicax-cardio .work-single-boxarea .img1 img {
  display: inline-block !important;
}

/* About feature list check icons: <li><img check> text */
.theme-medicax-cardio .about1-section-area ul li img,
.theme-medicax-cardio .about-heading ul li img {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 6px;
}

/* Header right-side compaction — phone + Book Appointment + lang switcher
 * have to fit inside col-lg-4 (~360px on 1440 viewport). The full-sized
 * vl-btn4 (~50px tall, 20px padding x) + phone (~150px text) + lang
 * dropdown was overflowing. Tighter sizing keeps everything on one line
 * down to ~1100px viewport before the mobile burger kicks in.
 */
.theme-medicax-cardio .vl-header-area .btn-area1 {
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
.theme-medicax-cardio .vl-header-area .vl-btn4 {
  padding: 10px 18px !important;
  font-size: 14px !important;
  height: auto;
  white-space: nowrap;
}
.theme-medicax-cardio .vl-header-area .vl-btn4 span svg {
  width: 18px;
  height: 18px;
}
.theme-medicax-cardio .vl-header-area .phone {
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-medicax-cardio .vl-header-area .phone svg {
  width: 16px;
  height: 16px;
}
.theme-medicax-cardio .vl-header-area .vl-offcanvas-language,
.theme-medicax-cardio .vl-header-area .btn-area1 > div {
  flex-shrink: 0;
}

/* Nav menu density — at tight desktop widths the 6+ menu items need to
 * pack closer together so they don't shove the right-side block off the
 * row. Reduce horizontal padding inside each nav <li>.
 */
.theme-medicax-cardio .vl-main-menu nav > ul > li {
  margin: 0 !important;
}
.theme-medicax-cardio .vl-main-menu nav > ul > li > a {
  padding: 0 14px !important;
  font-size: 15px;
}

/* Compact-desktop range (≤1499px) — at 1440 the nav last item ('Contact')
 * still sat right against the phone link because the menu fills its full
 * col-lg-6 width. Hiding the phone label adds enough room. Full label
 * comes back at ≥1500.
 */
@media (max-width: 1499px) {
  .theme-medicax-cardio .vl-main-menu nav > ul > li > a {
    padding: 0 10px !important;
    font-size: 14px;
  }
  .theme-medicax-cardio .vl-header-area .phone {
    font-size: 0; /* hide label */
  }
  .theme-medicax-cardio .vl-header-area .phone svg {
    width: 22px;
    height: 22px;
  }
}

/* Blog detail sidebar — recent post thumb + content stack, not overlap.
 * main.css scopes recent-posts as a flex with absolute thumb overlap;
 * reset everything and rebuild as a simple horizontal flex row.
 */
.theme-medicax-cardio .recent-posts-area .recent-posts {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 18px !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
}
.theme-medicax-cardio .recent-posts-area .recent-posts .img1 {
  flex: 0 0 96px !important;
  width: 96px !important;
  height: 80px !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.theme-medicax-cardio .recent-posts-area .recent-posts .img1 img {
  width: 96px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  position: static !important;
}
.theme-medicax-cardio .recent-posts-area .recent-posts .img1 a {
  display: block;
  width: 100%;
  height: 100%;
}
.theme-medicax-cardio .recent-posts-area .recent-posts .content {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.theme-medicax-cardio .recent-posts .content h4 {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}
.theme-medicax-cardio .recent-posts .content h4,
.theme-medicax-cardio .recent-posts .content h4 a {
  color: #02015A;
  text-decoration: none;
}
.theme-medicax-cardio .recent-posts .content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.theme-medicax-cardio .recent-posts .content ul li,
.theme-medicax-cardio .recent-posts .content ul li a {
  font-size: 12px;
  color: #6b7280;
}
.theme-medicax-cardio .tags-area ul,
.theme-medicax-cardio .list-author {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.theme-medicax-cardio .tags-area li a {
  background: rgba(68, 22, 255, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-block;
}
.theme-medicax-cardio .category-list-area ul {
  list-style: none;
  padding: 0;
}
.theme-medicax-cardio .category-list-area li {
  border-bottom: 1px solid #eee;
}
.theme-medicax-cardio .category-list-area li a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

/* Inline CTA inside article — keep button readable (no white-on-white) */
.theme-medicax-cardio .blog-inline-cta .vl-btn4 {
  background: #fff !important;
  color: var(--mx-primary) !important;
}
.theme-medicax-cardio .blog-inline-cta h3 {
  font-size: 1.5rem;
  color: #fff !important;
}

/* Sub-1280: hide the language switcher entirely from the desktop header
 * row. It remains accessible inside the offcanvas / mobile menu, and on
 * the smaller viewport visitors are likely closer to mobile anyway.
 */
@media (max-width: 1279px) {
  .theme-medicax-cardio .vl-header-area .btn-area1 > .d-inline-block.align-middle,
  .theme-medicax-cardio .vl-header-area .btn-area1 .ms-2 {
    display: none !important;
  }
  .theme-medicax-cardio .vl-header-area .vl-btn4 {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* Detail-page sidebars (service/treatment/blog/staff) — sticky so the
 * "Other Services / Free Quote" cards follow the user while they read
 * a long article. Top offset accounts for the sticky header height. */
.theme-medicax-cardio .service-all-details-area > .container > .row > aside.col-lg-4,
.theme-medicax-cardio .service-all-details-area > .container > .row > .col-lg-4,
.theme-medicax-cardio .vl-blog-details-section > .container > .row > .col-lg-4,
.theme-medicax-cardio .team-all-details-area > .container > .row > .col-lg-4 {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  z-index: 1;
}


/* Replace hardcoded medicax purple (#4416ff at 10%/5%/20% opacity) with
 * tints derived from tenant primary, so badges (.heading4 h5 pill),
 * testimonial quote-icon backgrounds and various soft shadows pick up
 * the brand color. */
.theme-medicax-cardio {
  --mx-primary-tint: color-mix(in srgb, var(--mx-primary) 10%, transparent);
  --mx-primary-glow: color-mix(in srgb, var(--mx-primary) 20%, transparent);
  --mx-primary-shadow: color-mix(in srgb, var(--mx-primary) 5%, transparent);
}
.theme-medicax-cardio .heading1 h5,
.theme-medicax-cardio .heading2 h5,
.theme-medicax-cardio .testimonial1-section-area .single-slider-box .icons,
.theme-medicax-cardio .vl-blog-4-area .vl-blog-1-item .vl-blog-1-content .vl-blog-meta ul li a,
.theme-medicax-cardio .vl-blog-4-area-inner .vl-blog-1-item .vl-blog-1-content .vl-blog-meta ul li a,
.theme-medicax-cardio .testimonial-inner-area .single-slider-box .icons {
  background: var(--mx-primary-tint) !important;
  box-shadow: 0 3px 8px 0 var(--mx-primary-shadow) !important;
}

/* Hardcoded medicax light purple (#ECE8FF) → tenant primary-derived
 * pale tint. Used as section/card backgrounds and pill backgrounds. */
.theme-medicax-cardio {
  --mx-primary-bg-light: color-mix(in srgb, var(--mx-primary) 8%, #f7f7fb);
}
.theme-medicax-cardio .service1-section-area,
.theme-medicax-cardio .service-inner-area,
.theme-medicax-cardio .service-inner-area .service-single-boxarea,
.theme-medicax-cardio .work1-section-area .cs_case_study.cs_style_1,
.theme-medicax-cardio .pagination-area nav ul li a,
.theme-medicax-cardio .case-inenr-area .case-tabs-area ul li button {
  background: var(--mx-primary-bg-light) !important;
}

/* Owl carousel active dot — hardcoded #C5B7FF in main.css; use full
 * primary so the indicator clearly stands out in tenant's brand color. */
.theme-medicax-cardio .service1-section-area .service-single-slider .owl-dots button.active,
.theme-medicax-cardio .team1-section-area .team-single-slider .owl-dots button.active,
.theme-medicax-cardio .team-single-slider2 .owl-dots button.active,
.theme-medicax-cardio .testimonial1-section-area .testimonial-single-slider .owl-dots button.active,
.theme-medicax-cardio .testimonial-single-slider2 .owl-dots button.active {
  background: var(--mx-primary) !important;
}

/* readmore/learnmore link color (--ztc-text-text-12, hardcoded #4416FF
 * in main.css) → tenant primary; their inline SVG arrow icon fill is
 * pinned to currentColor so it tracks the link color too. */
.theme-medicax-cardio {
  --ztc-text-text-12: var(--mx-primary);
}
.theme-medicax-cardio .readmore svg path,
.theme-medicax-cardio .learnmore svg path,
.theme-medicax-cardio .vl-blog-1-icon svg path {
  fill: currentColor !important;
}

/* Active menu link uses secondary brand color so the current page stands
 * out without competing with hover (primary). Header link defaults are
 * also nudged darker than the medicax default for legibility on white. */
.theme-medicax-cardio .vl-main-menu nav ul li a {
  color: #1a1a2e !important;
}
.theme-medicax-cardio .vl-main-menu nav ul li a.router-link-exact-active,
.theme-medicax-cardio .vl-offcanvas-menu nav ul li a.router-link-exact-active {
  color: var(--color-secondary, var(--mx-primary)) !important;
  font-weight: 600;
}

/* Body copy darker for readability — medicax ships --ztc-text-text-3 as
 * a light gray which fades against white. Promote paragraph text near
 * black so admin-authored content remains legible. */
.theme-medicax-cardio .service1-section-area p,
.theme-medicax-cardio .service-inner-area p,
.theme-medicax-cardio .single-slider-box p,
.theme-medicax-cardio .single-slider-box .pera,
.theme-medicax-cardio .about1-section-area p,
.theme-medicax-cardio .about-heading p,
.theme-medicax-cardio .vl-blog-1-item p,
.theme-medicax-cardio .vl-blog-details-content p,
.theme-medicax-cardio .service-main-content-details p,
.theme-medicax-cardio .doctor-deatisl-content-area p {
  color: #1f2230 !important;
}

/* Footer text — medicax light-gray on light footer fades out; promote
 * h3 widget titles and link rows to near-black for stronger contrast. */
.theme-medicax-cardio .vl-footer1-section-area .footer-widget-area h3,
.theme-medicax-cardio .vl-footer1-section-area .footer-time-area h4,
.theme-medicax-cardio .vl-footer1-section-area .footer-time-area p {
  color: #0d0f1c !important;
}
.theme-medicax-cardio .vl-footer1-section-area .footer-widget-area ul li a {
  color: #1f2230 !important;
  font-weight: 500;
}
.theme-medicax-cardio .vl-footer1-section-area .footer-widget-area ul li a:hover {
  color: var(--mx-primary) !important;
}

/* Bridge medicax purple-background var (--ztc-bg-bg-11, #4416FF) to
 * tenant primary so the 27 selectors that use it (blog sidebar 'tags'
 * pill, hero CTA chips, share buttons etc.) all follow brand color.
 * Ensure text on these purple pills stays white on both rest + hover. */
.theme-medicax-cardio {
  --ztc-bg-bg-11: var(--mx-primary);
  /* hover slide-in pill (.vl-btn4:hover::after) shipped pinned to #02015A;
   * bridge to a darker tenant primary so hover stays on-brand. */
  --ztc-bg-bg-10: color-mix(in srgb, var(--mx-primary) 75%, black);
}

.theme-medicax-cardio .vl-blog-details-section .blog-others-sidebar .list-author li:nth-child(1) a {
  background: var(--mx-primary) !important;
  color: #fff !important;
}
.theme-medicax-cardio .vl-blog-details-section .blog-others-sidebar .list-author li:nth-child(1) a:hover {
  background: var(--mx-primary-dark) !important;
  color: #fff !important;
}

/* Treatments/Services inner-area cards — add a soft border so they
 * don't blend with the page background; bg is already primary-tinted. */
.theme-medicax-cardio .service-inner-area .service-single-boxarea {
  border: 1px solid color-mix(in srgb, var(--mx-primary) 18%, transparent);
}
.theme-medicax-cardio .service-inner-area .service-single-boxarea:hover {
  border-color: var(--mx-primary);
  box-shadow: 0 4px 16px 0 color-mix(in srgb, var(--mx-primary) 12%, transparent);
}

/* Contact widget hover — main.css only flips <a> color to white but the
 * address text sits in a plain <div class="text">, so it stayed dark
 * on the now-purple bg. Promote the whole text block + force the
 * already-overridden --mx-primary bg. */
.theme-medicax-cardio .contact-inner-section-area .conatct-widget-boxarea:hover {
  background: var(--mx-primary) !important;
}
.theme-medicax-cardio .contact-inner-section-area .conatct-widget-boxarea:hover .textarea .text,
.theme-medicax-cardio .contact-inner-section-area .conatct-widget-boxarea:hover .textarea .text a {
  color: #fff !important;
}

/* Treatment/Staff detail sidebar uses .category-list-area inside
 * .service-all-details-area (not .vl-blog-details-section), so main.css
 * never styled its <a> links — they fell back to browser blue. Mirror
 * the blog-sidebar treatment with tenant-tinted bg + dark text + primary
 * hover so all 'Diğer Tedaviler / Other Services' lists are consistent. */
.theme-medicax-cardio .service-all-details-area .category-list-area ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.theme-medicax-cardio .service-all-details-area .category-list-area ul li {
  margin-bottom: 12px;
}
.theme-medicax-cardio .service-all-details-area .category-list-area ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mx-primary-bg-light);
  color: var(--mx-primary-dark);
  padding: 14px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all .25s;
}
.theme-medicax-cardio .service-all-details-area .category-list-area ul li a:hover {
  background: var(--mx-primary);
  color: #fff;
  transform: translateY(-2px);
}
.theme-medicax-cardio .service-all-details-area .category-list-area ul li a span {
  display: inline-flex;
  transition: transform .25s;
}
.theme-medicax-cardio .service-all-details-area .category-list-area ul li a:hover span {
  transform: rotate(90deg);
}

/* ============ Offcanvas mobile menu — light brand-tinted sheet ============
 * Single-layer light background so we don't get the "window-in-window"
 * effect from nested wrappers. White surface with a soft brand-tinted
 * mesh; dark text for WCAG AA contrast. */

/* 1. Sheet background — collapse nested wrapper into one surface */
.theme-medicax-cardio .vl-offcanvas {
  background:
    radial-gradient(600px 400px at 0% 0%,
      color-mix(in srgb, var(--color-primary, #1d4ed8) 12%, transparent) 0%,
      transparent 60%),
    radial-gradient(700px 500px at 100% 100%,
      color-mix(in srgb, var(--color-accent, var(--color-primary, #1d4ed8)) 10%, transparent) 0%,
      transparent 60%),
    #ffffff !important;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-wrapper {
  background: transparent !important;
}

/* 2. Text colors — dark for light bg, AA contrast on white surface */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu ul li a,
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-sm-title,
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-close-toggle,
.theme-medicax-cardio .vl-offcanvas .sub-menu li a {
  color: #1f2230 !important;
}
.theme-medicax-cardio .vl-offcanvas .lang-switcher__label,
.theme-medicax-cardio .vl-offcanvas .lang-switcher__toggle { color: #1f2230 !important; }

/* 3. Menu link styling — proper rows with hover/active feedback */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul { padding: 0; margin: 0; list-style: none; }
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul > li {
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul > li:last-child { border-bottom: 0; }
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul > li > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px !important;
  font-weight: 500;
  letter-spacing: .01em;
  font-size: 16px;
  border: 0 !important;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul > li > a:hover,
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul > li.router-link-active > a,
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu nav > ul > li > a.router-link-exact-active {
  color: var(--mx-primary, #1d4ed8) !important;
}

/* 4. Dropdown — NavMenuItem.is-open shows sub-menu; visual treatment here */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu .sub-menu {
  list-style: none;
  padding: 4px 0 8px 16px !important;
  margin: 0 0 8px;
  border-left: 2px solid color-mix(in srgb, var(--mx-primary) 35%, transparent);
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu .sub-menu li a {
  display: block !important;
  padding: 8px 0 !important;
  font-size: 14.5px;
  font-weight: 400;
  color: #475569 !important;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-menu .sub-menu li a:hover { color: var(--mx-primary) !important; }
.theme-medicax-cardio .vl-offcanvas .arrow-size i { color: #94a3b8; font-size: 12px; }

/* 5. Contact info — light card with brand-tinted icon chips */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--mx-primary) 14%, transparent);
  border-radius: 14px;
  padding: 20px;
  margin-top: 8px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mx-primary) 10%, transparent);
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-sm-title {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #64748b !important;
  margin-bottom: 14px !important;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info > span {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info > span:last-of-type { border-bottom: 0; }
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info > span a,
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info > span > a {
  color: #1f2230 !important;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  margin: 0 !important;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info > span a:hover { color: var(--mx-primary) !important; }
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-info > span a i {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mx-primary, #1d4ed8) 12%, #fff);
  color: var(--mx-primary, #1d4ed8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 0 !important;
}

/* 6. Language switcher pill */
.theme-medicax-cardio .vl-offcanvas .lang-switcher__toggle {
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--mx-primary) 18%, transparent) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
}


/* 7b. CTA chip — Randevu Al button in place of the sidebar logo.
 * A small primary-filled pill keeps the booking entry point one tap
 * away from any drawer-open and is more useful than a logo nobody
 * tapped anyway. */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-cta .vl-btn4 {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--mx-primary) !important;
  color: #fff !important;
  border: 0;
  text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mx-primary) 24%, transparent);
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-cta .vl-btn4:hover {
  background: var(--mx-primary-dark) !important;
}

/* 7c. Language switcher position above contact + non-compact look */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-language { margin-top: 8px; }
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-language .lang-switcher__toggle {
  width: 100%;
  justify-content: space-between;
  padding: 10px 14px !important;
  font-weight: 500;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-language .lang-switcher__menu {
  width: 100%;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--mx-primary) 14%, transparent);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mx-primary) 12%, transparent);
}

/* 7. Close button — primary-tinted circular */
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-close-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mx-primary) 10%, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--mx-primary) 16%, transparent);
  color: var(--mx-primary) !important;
  transition: all .2s;
}
.theme-medicax-cardio .vl-offcanvas .vl-offcanvas-close-toggle:hover {
  background: var(--mx-primary);
  color: #fff !important;
  transform: rotate(90deg);
}

/* ============ Inner-page banner / page title — premium clinic redesign ============
 * main.css shipped .inner-header-section-area effectively transparent for this
 * tenant (bg9.png never resolved) → the title floated on empty white and the
 * white breadcrumb was invisible. Replace with a modern tenant-branded gradient
 * banner: primary gradient + soft decorative rings, big white title, glass
 * breadcrumb pill. Centered, clinic-appropriate, theme-coloured. */
.theme-medicax-cardio .inner-header-section-area {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 92px 0 78px;
  margin-bottom: 0;
  background:
    radial-gradient(115% 140% at 88% -25%, color-mix(in srgb, var(--mx-primary) 42%, transparent), transparent 58%),
    radial-gradient(95% 130% at 0% 125%, color-mix(in srgb, var(--mx-primary) 30%, transparent), transparent 55%),
    linear-gradient(135deg, var(--mx-primary-dark, #0b2a4a) 0%, var(--mx-primary) 100%);
}
/* soft decorative rings (instead of the stray elements28.png) */
.theme-medicax-cardio .inner-header-section-area .elements28 { display: none !important; }
.theme-medicax-cardio .inner-header-section-area::before,
.theme-medicax-cardio .inner-header-section-area::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.theme-medicax-cardio .inner-header-section-area::before {
  width: 340px; height: 340px; right: -100px; top: -130px;
  border: 1.5px solid rgba(255, 255, 255, .14);
}
.theme-medicax-cardio .inner-header-section-area::after {
  width: 210px; height: 210px; left: -80px; bottom: -100px;
  background: rgba(255, 255, 255, .06);
}
.theme-medicax-cardio .inner-header-section-area .hero-header { position: relative; z-index: 1; }
.theme-medicax-cardio .inner-header-section-area h1 {
  color: #fff !important;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.12;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .12);
}
.theme-medicax-cardio .inner-header-section-area .space28 { height: 16px; }
/* breadcrumb → glass pill (was white-on-white, invisible) */
.theme-medicax-cardio .inner-header-section-area .bradecrumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.theme-medicax-cardio .inner-header-section-area .bradecrumb a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s; }
.theme-medicax-cardio .inner-header-section-area .bradecrumb a:hover { color: #fff !important; }
.theme-medicax-cardio .inner-header-section-area .bradecrumb span { color: #fff; }
.theme-medicax-cardio .inner-header-section-area .bradecrumb i { font-size: 11px; opacity: .65; }
@media (max-width: 575px) {
  .theme-medicax-cardio .inner-header-section-area { padding: 72px 0 52px; }
}

/* NOTE (2026-05-30): footer / CTA backgrounds kept as the original Medicax
 * pastel static art (cta-bg1.png, footer #f4f4f9) for index4 fidelity; brand
 * colour flows via --mx-primary through buttons/links/icons. (Inner-banner is
 * the one section we DO repaint — see above — because its stock art was blank.) */

/* Rich-content tables (blog / treatment / service detail) — branded, zebra,
 * rounded. Editors insert raw <table> in the WYSIWYG; this makes them match
 * the theme instead of rendering as bare browser-default tables. */
.theme-medicax-cardio .blog-content table,
.theme-medicax-cardio .service-main-content-details table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 15px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}
.theme-medicax-cardio .blog-content table th,
.theme-medicax-cardio .service-main-content-details table th {
  background: var(--mx-primary, #02015A);
  color: #fff;
  font-weight: 600;
  text-align: start;
  padding: 14px 18px;
  border: none;
}
.theme-medicax-cardio .blog-content table td,
.theme-medicax-cardio .service-main-content-details table td {
  padding: 12px 18px;
  border-top: 1px solid #eef1f6;
  vertical-align: top;
  color: #31353d;
}
.theme-medicax-cardio .blog-content table tr:nth-child(even) td,
.theme-medicax-cardio .service-main-content-details table tr:nth-child(even) td {
  background: #f7f9fc;
}
.theme-medicax-cardio .blog-content table th p,
.theme-medicax-cardio .blog-content table td p,
.theme-medicax-cardio .service-main-content-details table th p,
.theme-medicax-cardio .service-main-content-details table td p {
  margin: 0;
}
@media (max-width: 575px) {
  .theme-medicax-cardio .blog-content table th,
  .theme-medicax-cardio .blog-content table td,
  .theme-medicax-cardio .service-main-content-details table th,
  .theme-medicax-cardio .service-main-content-details table td {
    padding: 9px 11px;
    font-size: 13px;
  }
}

/* Blog archive — category filter chips. */
.theme-medicax-cardio .blog-cats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.theme-medicax-cardio .blog-cat-chip {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--mx-primary, #02015A) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--mx-primary, #02015A) 18%, transparent);
  color: var(--mx-primary, #02015A);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease;
}
.theme-medicax-cardio .blog-cat-chip:hover {
  background: var(--mx-primary, #02015A);
  color: #fff;
}

/* ───────────────────────────────────────────────────────────────────────
   Anasayfa "Hakkımızda" 2×2 görsel grid (about1-section-area)
   Orijinal index4 demo görselleri 227×227 (1:1), her biri YAPRAK/petal maskeli
   (daire + tek keskin köşe merkeze bakar → çiçek kümesi). Admin'den yüklenen
   farklı oran/boyuttaki görseller bu tasarımı bozmasın diye her hücreyi KARE
   yapıp object-fit:cover ile dolduruyoruz (max) ve aynı petal maskesini CSS
   border-radius ile uyguluyoruz — eşit "dört köşe radius" DEĞİL.
   Demo webp alpha ölçümü: img1 keskin BR, img2 BL, img3 TR, img4 TL.
   border-radius sırası = TL TR BR BL.
   ─────────────────────────────────────────────────────────────────────── */
.theme-medicax-cardio .about1-section-area .about-images-area .img1 {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.theme-medicax-cardio .about1-section-area .about-images-area .img1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.theme-medicax-cardio .about1-section-area .about-images-area .row > div:nth-child(1) .img1 { border-radius: 50% 50% 0 50%; }
.theme-medicax-cardio .about1-section-area .about-images-area .row > div:nth-child(2) .img1 { border-radius: 50% 50% 50% 0; }
.theme-medicax-cardio .about1-section-area .about-images-area .row > div:nth-child(3) .img1 { border-radius: 50% 0 50% 50%; }
.theme-medicax-cardio .about1-section-area .about-images-area .row > div:nth-child(4) .img1 { border-radius: 0 50% 50% 50%; }

/* ───────────────────────────────────────────────────────────────────────
   Accent-color bridge: stock medicax accent #BEDC48 (lime) = --ztc-bg-bg-3.
   Buttons (.vl-btn1 .text/.arrow), service-card icon chips and link hovers all
   read it — bridge to tenant --mx-primary so they're theme-coloured, not lime.
   ─────────────────────────────────────────────────────────────────────── */
.theme-medicax-cardio {
  --ztc-bg-bg-3: var(--mx-primary);
  --ztc-text-text-4: var(--mx-primary);
}
/* .vl-btn1 visual sits on the .text pill + .arrow circle. The earlier blanket
   rule painted the <a> itself → a sharp primary rectangle peeked behind the
   rounded pill. Neutralise the <a>; force white glyphs on the now-primary
   pill/arrow for contrast. */
.theme-medicax-cardio a.vl-btn1 {
  background-color: transparent !important;
  border-color: transparent !important;
}
.theme-medicax-cardio .vl-btn1 .text,
.theme-medicax-cardio .vl-btn1 .arrow,
.theme-medicax-cardio .vl-btn1 .arrow i { color: #fff !important; }

/* Icon chips were positioned with line-height/text-align tricks and drifted
   off-centre — flex-centre them robustly. */
.theme-medicax-cardio .about1-section-area .about-images-area .about-contact span,
.theme-medicax-cardio .service-single-boxarea .content-box .icons,
.theme-medicax-cardio .service-single-boxarea .img1 .icons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.theme-medicax-cardio .about-contact span > svg,
.theme-medicax-cardio .service-single-boxarea .content-box .icons > img { display: block; }
/* Hover-reveal arrow over the service image: navy stroke on the now-primary
   circle is low-contrast → white. */
.theme-medicax-cardio .service-single-boxarea .img1 .icons a svg path { stroke: #fff !important; }

/* ───────────────────────────────────────────────────────────────────────
   More accent-var bridges + hover/button/icon polish (2026-06-04)
   ─────────────────────────────────────────────────────────────────────── */
/* Vivid blue accents (#4416FF=bg-11/text-12, #02015A=bg-10) → tenant primary
   (dental parity). Without this, service-card hover overlays/badges show raw
   blue instead of the tenant colour. */
.theme-medicax-cardio {
  --ztc-bg-bg-11: var(--mx-primary);
  --ztc-bg-bg-10: color-mix(in srgb, var(--mx-primary) 75%, black);
  --ztc-text-text-12: var(--mx-primary);
}
/* Service-card image hover overlay shipped navy (--ztc-bg-bg-2) → looked "blue".
   Theme it. */
.theme-medicax-cardio .service-single-boxarea .img1::after {
  background: var(--mx-primary) !important;
}
/* .vl-btn1 = pill(.text)+circle(.arrow); applies to <a> AND <button> (newsletter
   "Abone Ol" was a solid box because the blanket primary bg hit the <button>).
   Keep the element transparent/borderless; hover → themed dark-primary (was
   stock navy), white glyphs. */
.theme-medicax-cardio .vl-btn1 {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.theme-medicax-cardio .vl-btn1:hover .text,
.theme-medicax-cardio .vl-btn1:hover .arrow,
.theme-medicax-cardio .vl-btn1:hover .arrow i {
  background-color: var(--mx-primary-dark) !important;
  color: #fff !important;
}
/* Contact "Konum/Telefon/Mail" icon chip rendered tall/narrow inside the flex
   .single-box — pin its size + flex-centre the pin. */
.theme-medicax-cardio .contact1-section-area .single-box .icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  line-height: 1 !important;
}
/* KVKK consent: checkbox to the LEFT of the text, top-aligned. The form's
   main.css gives `.input-area input { width:100% !important }`, which also hits
   the checkbox → it became full-width and shoved the label far right. Force the
   checkbox to a fixed 16px (with !important to beat that rule) so it sits snug
   beside the label. */
.theme-medicax-cardio .kvkk-label {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  text-align: start;
}
.theme-medicax-cardio .kvkk-label input[type="checkbox"] {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
}
.theme-medicax-cardio .kvkk-label span { flex: 1 1 auto; }

/* ═══════════════════════════════════════════════════════════════════════
   Impressive header (2026-06-04) — brand-gradient top strip, animated nav
   underline, gradient+lift CTA, primary phone chip, refined sticky shadow.
   CSS-only (header script untouched). Scoped to .theme-medicax-cardio.
   ═══════════════════════════════════════════════════════════════════════ */
/* Top contact bar — clean light bar: location · phone · email · hours (with
   thin dividers + primary icons) on the left, social on the right. */
.theme-medicax-cardio .vl-header-area.vl-transparent-header .header-top-area.cx-topbar {
  background: #fff !important;
  border-bottom: 1px solid #eef1f6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 12px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.theme-medicax-cardio .cx-topbar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.theme-medicax-cardio .cx-topbar__info > li { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; position: relative; font-size: 13.5px; color: #5b6573; line-height: 1.3; }
.theme-medicax-cardio .cx-topbar__info > li:first-child { padding-left: 0; }
.theme-medicax-cardio .cx-topbar__info > li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: #e2e8f0; }
.theme-medicax-cardio .cx-topbar__info i { color: var(--mx-primary, #02015A) !important; font-size: 14px; opacity: 1; flex: 0 0 auto; }
.theme-medicax-cardio .cx-topbar__info a,
.theme-medicax-cardio .cx-topbar__info span { color: #5b6573 !important; text-decoration: none; transition: color .2s ease; }
.theme-medicax-cardio .cx-topbar__info a:hover { color: var(--mx-primary, #02015A) !important; }
.theme-medicax-cardio .cx-topbar__addr span { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-medicax-cardio .cx-topbar__social { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; flex: 0 0 auto; }
.theme-medicax-cardio .cx-topbar__social a { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mx-primary, #02015A) 8%, #f4f6fb); color: var(--mx-primary, #02015A) !important; font-size: 13px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.theme-medicax-cardio .cx-topbar__social a:hover { background: var(--mx-primary, #02015A); color: #fff !important; transform: translateY(-2px); }

/* Animated nav underline (grow from left on hover/active) */
.theme-medicax-cardio .vl-main-menu nav > ul > li > a { position: relative; }
.theme-medicax-cardio .vl-main-menu nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: var(--mx-primary, #02015A); border-radius: 2px;
  transition: right .28s cubic-bezier(.4, 0, .2, 1);
}
.theme-medicax-cardio .vl-main-menu nav > ul > li:hover > a::after,
.theme-medicax-cardio .vl-main-menu nav > ul > li.has-dropdown:hover > a::after,
.theme-medicax-cardio .vl-main-menu nav > ul > li.active > a::after { right: 0; }

/* Randevu Al button → gradient + lift */
.theme-medicax-cardio .vl-hero-btn .vl-btn4 {
  background: linear-gradient(120deg, var(--mx-primary, #02015A), var(--mx-primary-dark, #0b1f3a)) !important;
  border: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.theme-medicax-cardio .vl-hero-btn .vl-btn4:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--mx-primary, #02015A) 75%, transparent);
}
/* Phone link → soft primary chip */
.theme-medicax-cardio .vl-hero-btn .phone {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--mx-primary, #02015A) 9%, #fff);
  color: var(--mx-primary, #02015A) !important; font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.theme-medicax-cardio .vl-hero-btn .phone:hover { background: color-mix(in srgb, var(--mx-primary, #02015A) 16%, #fff); transform: translateY(-1px); }
.theme-medicax-cardio .vl-hero-btn .phone svg path { fill: var(--mx-primary, #02015A); }

/* Sticky header — refined shadow */
.theme-medicax-cardio .vl-header-area.header-sticky {
  box-shadow: 0 6px 28px rgba(15, 23, 42, .1) !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-medicax-cardio .vl-main-menu nav > ul > li > a::after,
  .theme-medicax-cardio .vl-hero-btn .vl-btn4,
  .theme-medicax-cardio .vl-hero-btn .phone { transition: none; }
}

/* about-contact pill (anasayfa "Online Konsültasyon") → tenant primary
   (shipped navy --ztc-bg-bg-2); white icon circle + primary glyph. */
.theme-medicax-cardio .about1-section-area .about-contact { background: var(--mx-primary, #02015A) !important; }
.theme-medicax-cardio .about1-section-area .about-contact span { background: #fff !important; }
.theme-medicax-cardio .about1-section-area .about-contact span svg path { fill: var(--mx-primary, #02015A) !important; }

/* Heading eyebrow icons (sub-logo glyph) + about checklist check icons → cap at
   20px so a large/unsized SVG never blows up next to a heading. */
.theme-medicax-cardio h5 img,
.theme-medicax-cardio .vl-section-subtitle img,
.theme-medicax-cardio .about-heading h5 img,
.theme-medicax-cardio .heading1 h5 img,
.theme-medicax-cardio .heading4 h5 img,
.theme-medicax-cardio .heading8 h5 img,
.theme-medicax-cardio .about-heading ul li img,
.theme-medicax-cardio .about1-heading ul li img {
  max-width: 20px !important;
  max-height: 20px !important;
  width: auto;
  height: auto;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────
   Blog/detail prefooter CTA + blog sidebar (2026-06-12)
   The VikingLab index4 source gives .cta4-section-area a pastel bg image
   (bg5.png); the Vue port dropped the inline style so the section rendered on
   bare white. Restore it here (scoped) so Blog/Service/Treatment detail CTAs
   sit on the intended pastel ground. Plus a sticky booking card so the blog
   sidebar is never empty (it previously held only recent posts, which are
   empty for locales/tenants with a single post).
   ───────────────────────────────────────────────────────────────────────── */
.theme-medicax-cardio .cta4-section-area {
  background-image: url('/themes/medicax/assets/img/all-images/bg/bg5.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep the sidebar in view while reading the article (desktop only). */
@media (min-width: 992px) {
  .theme-medicax-cardio .blog-auhtor-details-side {
    position: sticky;
    top: 100px;
  }
}

.theme-medicax-cardio .blog-side-cta {
  background: var(--mx-primary-soft, #f4f4f9);
  border: 1px solid color-mix(in srgb, var(--mx-primary, #1d4ed8) 14%, transparent);
  border-radius: 16px;
  padding: 32px 28px;
  margin-bottom: 32px;
}
.theme-medicax-cardio .blog-side-cta h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--mx-primary-dark, #02015a);
}
.theme-medicax-cardio .blog-side-cta p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
  opacity: 0.8;
}
.theme-medicax-cardio .blog-side-cta .blog-side-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.theme-medicax-cardio .blog-side-cta .blog-side-cta-phone {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
  color: var(--mx-primary-dark, #02015a);
  transition: color 0.3s ease;
}
.theme-medicax-cardio .blog-side-cta .blog-side-cta-phone:hover {
  color: var(--mx-primary, #1d4ed8);
}

/* ─────────────────────────────────────────────────────────────────────────
   About hero float-wrap (2026-06-13)
   The image floats so long About copy flows around it and continues full-width
   below it, instead of a rigid col-6/col-6 split that left the image column
   blank under long text. Stacks vertically on tablet/mobile.
   ───────────────────────────────────────────────────────────────────────── */
.theme-medicax-cardio .about1-floatwrap::after {
  content: '';
  display: block;
  clear: both;
}
.theme-medicax-cardio .about1-floatwrap .about1-float-figure {
  float: left;
  width: 44%;
  margin: 6px 40px 24px 0;
}
.theme-medicax-cardio .about1-floatwrap .about1-float-figure .img1 img {
  width: 100%;
  border-radius: 8px;
}
@media (max-width: 991px) {
  .theme-medicax-cardio .about1-floatwrap .about1-float-figure {
    float: none;
    width: 100%;
    margin: 0 0 24px;
  }
}

/* ─────────── Top contact bar (location · phone · email · social) ───────────
 * The cx-topbar markup had no dedicated CSS, so it inherited mixed styles from
 * the injected medicax main.css: address text 13.5px vs phone/email links 18px,
 * info icons 14px vs social icons 18px in 30px grey circles, and block list
 * items that left icons baseline-misaligned with their text. Normalize the whole
 * bar to one row with a single font size, centered icon+text, and consistent
 * icon→text spacing. !important guards the few props the runtime main.css sets.
 */
.theme-medicax-cardio .cx-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.theme-medicax-cardio .cx-topbar__info,
.theme-medicax-cardio .cx-topbar__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-medicax-cardio .cx-topbar__info { gap: 8px 24px; }
.theme-medicax-cardio .cx-topbar__social { gap: 14px; }

/* Each item: icon + text on one centered line with a small gap between them.
 * display !important — the runtime medicax main.css forces list items to
 * display:block, which defeats align-items:center and baseline-misaligns the
 * icon vs its text (location vs phone/email sat on different lines). */
.theme-medicax-cardio .cx-topbar__info > li,
.theme-medicax-cardio .cx-topbar__social > li {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  line-height: 1;
}
/* Normalize text box line-height too so every item's text shares one baseline. */
.theme-medicax-cardio .cx-topbar__info > li a,
.theme-medicax-cardio .cx-topbar__info > li span {
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
}

/* One uniform font size for every label/link/icon in the bar. */
.theme-medicax-cardio .cx-topbar__info > li,
.theme-medicax-cardio .cx-topbar__info > li a,
.theme-medicax-cardio .cx-topbar__info > li span,
.theme-medicax-cardio .cx-topbar__social > li a {
  font-size: 14px !important;
  line-height: 1.4;
}
.theme-medicax-cardio .cx-topbar__info > li a,
.theme-medicax-cardio .cx-topbar__info > li span {
  color: #5b6573;
  text-decoration: none;
}
.theme-medicax-cardio .cx-topbar__info > li i,
.theme-medicax-cardio .cx-topbar__social > li a i {
  font-size: 14px !important;
  line-height: 1;
  flex: 0 0 auto;
}
.theme-medicax-cardio .cx-topbar__info > li i {
  color: var(--mx-primary, #987c5f);
}

/* Social icons: drop the inconsistent 30px grey circle — render them as plain
 * icons matching the info bar, centered and the same size, with a hover tint. */
.theme-medicax-cardio .cx-topbar__social > li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #5b6573;
}
.theme-medicax-cardio .cx-topbar__info > li a:hover,
.theme-medicax-cardio .cx-topbar__social > li a:hover {
  color: var(--mx-primary, #987c5f);
}

/* ============================================================
 * Awen'e özel küçük ayarlar — eski sistemdeki tenant_themes.custom_css'in
 * (admin panelinden girilmiş) birebir karşılığı.
 * ============================================================ */
.testimonial1-section-area .testimonial-imges .success-rate ul li,
.testimonial1-section-area .testimonial-imges .success-rate p,
.testimonial1-section-area .testimonial-imges .success-rate h3 {
    color: #fff !important;
}
footer .cf-cta__phone:hover { color: #fff !important; }
.vl-main-menu nav ul li a { font-size: 0.9rem !important; }

/* ============================================================
 * Bu paketin kendi bileşenleri (Vue sürümünün <style scoped>
 * bloklarından taşındı) — Hakkımızda kartları
 * ============================================================ */
.mxd-eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-primary); }

.mxd-why { background: color-mix(in srgb, var(--mx-primary) 3%, #ffffff); }
.mxd-why__card { position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--mx-primary) 12%, transparent); border-radius: 18px; padding: 32px 28px; height: 100%; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mxd-why__card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--mx-primary), color-mix(in srgb, var(--mx-primary) 40%, var(--mx-secondary))); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.mxd-why__card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px color-mix(in srgb, var(--mx-secondary) 14%, transparent); border-color: color-mix(in srgb, var(--mx-primary) 40%, transparent); }
.mxd-why__card:hover::before { transform: scaleX(1); }
.mxd-why__icon { width: 58px; height: 58px; margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: color-mix(in srgb, var(--mx-primary) 12%, #fff); color: var(--mx-primary); font-size: 24px; transition: background .25s ease, color .25s ease; }
.mxd-why__card:hover .mxd-why__icon { background: var(--mx-primary); color: #fff; }
.mxd-why__title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--mx-secondary); }
.mxd-why__desc { font-size: 14px; line-height: 1.7; color: #64748b; margin: 0; }

.mxd-journey__card { position: relative; height: 100%; background: #fff; border: 1px solid color-mix(in srgb, var(--mx-primary) 12%, transparent); border-radius: 18px; padding: 26px 22px; padding-top: 30px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mxd-journey__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px color-mix(in srgb, var(--mx-secondary) 13%, transparent); border-color: color-mix(in srgb, var(--mx-primary) 40%, transparent); }
.mxd-journey__media { height: 150px; margin: -30px -22px 18px; border-radius: 18px 18px 0 0; overflow: hidden; background: var(--mx-primary-soft); }
.mxd-journey__media img { width: 100%; height: 100%; object-fit: cover; }
.mxd-journey__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px; font-size: 18px; font-weight: 800; color: #fff; background: var(--mx-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--mx-primary) 40%, transparent); }
.mxd-journey__title { font-size: 17px; font-weight: 700; color: var(--mx-secondary); margin: 0 0 8px; }
.mxd-journey__desc { font-size: 13.5px; line-height: 1.7; color: #64748b; margin: 0; }

.mxd-mv__card { background: #fff; border: 1px solid color-mix(in srgb, var(--mx-primary) 12%, transparent); border-radius: 18px; padding: 32px 26px; height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mxd-mv__card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px color-mix(in srgb, var(--mx-secondary) 14%, transparent); border-color: color-mix(in srgb, var(--mx-primary) 45%, transparent); }
.mxd-mv__card--vision { background: color-mix(in srgb, var(--mx-primary) 5%, #fff); }
.mxd-mv__icon { width: 56px; height: 56px; margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--mx-primary) 12%, #fff); color: var(--mx-primary); font-size: 22px; }
.mxd-mv__title { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--mx-secondary); }
.mxd-mv__text { font-size: 15px; line-height: 1.7; color: #51607a; margin: 0; white-space: pre-line; }

.mxd-support { position: relative; background: radial-gradient(620px 360px at 12% 0%, color-mix(in srgb, var(--mx-primary) 22%, transparent), transparent 60%), radial-gradient(620px 420px at 92% 100%, color-mix(in srgb, var(--mx-primary) 14%, transparent), transparent 60%), var(--mx-secondary); }
.mxd-support__eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-primary); }
.mxd-support__headline { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: #fff; margin: 0; }
.mxd-support__card { height: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: 28px 22px; text-align: center; backdrop-filter: blur(6px); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.mxd-support__card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); border-color: color-mix(in srgb, var(--mx-primary) 55%, transparent); }
.mxd-support__icon { width: 62px; height: 62px; margin: 0 auto 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--mx-primary) 24%, transparent); color: #fff; font-size: 26px; }
.mxd-support__title { font-size: 16.5px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.mxd-support__desc { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .76); margin: 0; }

.mxd-agal__cell, a.mxd-agal__cell { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #eef1f6; box-shadow: 0 16px 38px -24px rgba(2, 1, 90, .35); text-decoration: none; }
.mxd-agal__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mxd-agal__cell:hover img { transform: scale(1.05); }
.mxd-agal__cap { position: absolute; inset: auto 0 0 0; padding: 14px 16px 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .68), transparent); color: #fff; font-size: 14px; font-weight: 500; text-align: start; }
.mxd-agal__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; opacity: 0; background: color-mix(in srgb, var(--mx-primary) 45%, transparent); transition: opacity .25s ease; }
.mxd-agal__cell:hover .mxd-agal__zoom { opacity: 1; }

/* ============================================================
 * Tedavi kartları (liste + "diğer tedaviler" şeridi) ve detay yan çubuğu
 * ============================================================ */
.mxd-more { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--mx-primary) 6%, #fff), #fff 58%); }
.mxd-more__glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; left: -160px; bottom: -200px; background: radial-gradient(circle, color-mix(in srgb, var(--mx-primary) 12%, transparent), transparent 70%); pointer-events: none; }
.mxd-more .container { position: relative; z-index: 1; }
.mxd-more__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.mxd-more__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mx-primary); margin-bottom: 12px; position: relative; padding-bottom: 12px; }
.mxd-more__eyebrow::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 46px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--mx-primary) 55%, #ffb400); }
.mxd-more__title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: #14183a; margin: 0; }
.mxd-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.mxd-trt-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eef1f6; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px -28px rgba(2, 1, 90, .25); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; text-decoration: none; }
.mxd-trt-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(2, 1, 90, .45); border-color: color-mix(in srgb, var(--mx-primary) 30%, transparent); }
.mxd-trt-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f5fa; }
.mxd-trt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.mxd-trt-card:hover .mxd-trt-card__media img { transform: scale(1.07); }
.mxd-trt-card__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--mx-primary) 55%, transparent)); opacity: .55; transition: opacity .3s ease; }
.mxd-trt-card:hover .mxd-trt-card__veil { opacity: .8; }
.mxd-trt-card__go { position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--mx-primary); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); transform: translateY(8px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.mxd-trt-card:hover .mxd-trt-card__go { transform: none; opacity: 1; }
.mxd-trt-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.mxd-trt-card__title { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; }
.mxd-trt-card__title a { color: #14183a; text-decoration: none; transition: color .2s ease; }
.mxd-trt-card__title a:hover { color: var(--mx-primary); }
.mxd-trt-card__text { color: #64748b; font-size: 14px; line-height: 1.6; margin: 0 0 18px; flex: 1; }
.mxd-trt-card__link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--mx-primary); text-decoration: none; }
.mxd-trt-card__link i { transition: transform .25s ease; }
.mxd-trt-card__link:hover i { transform: translateX(4px); }

.tx-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.tx-card { background: #fff; border: 1px solid #eef1f6; border-radius: 18px; padding: 24px; box-shadow: 0 14px 38px -28px rgba(2, 1, 90, .28); }
.tx-card__title { font-size: 18px; font-weight: 700; color: #14183a; margin: 0 0 16px; position: relative; padding-bottom: 12px; }
.tx-card__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--mx-primary); }
.tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tx-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f7f9fc; color: #334155; text-decoration: none; font-weight: 500; font-size: 14.5px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.tx-list a:hover { background: var(--mx-primary); color: #fff; transform: translateX(3px); }
.tx-cta { position: relative; overflow: hidden; border-radius: 18px; padding: 24px; color: #fff; background: linear-gradient(150deg, var(--mx-primary-dark), var(--mx-primary)); }
.tx-cta__lead { font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; color: rgba(255, 255, 255, .9); }
.tx-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; text-decoration: none; transition: transform .2s, filter .2s; }
.tx-cta__btn + .tx-cta__btn { margin-top: 10px; }
.tx-cta__btn--wa { background: #25D366; color: #06351a; }
.tx-cta__btn--book { background: #fff; color: var(--mx-primary); }
.tx-cta__btn:hover { transform: translateY(-2px); }
@media (max-width: 991px) { .tx-side { position: static; } }

/* ============================================================
 * Galeri (liste + albüm detay ızgarası)
 * ============================================================ */
.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.gx-card { display: block; text-decoration: none; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px -28px rgba(2, 1, 90, .3); transition: transform .3s ease, box-shadow .3s ease; }
.gx-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px -30px rgba(2, 1, 90, .5); }
.gx-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--mx-primary) 8%, #eef1f6); }
.gx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
.gx-card:hover .gx-card__media img { transform: scale(1.08); }
.gx-card__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .05) 0%, transparent 35%, color-mix(in srgb, var(--mx-primary) 82%, transparent) 100%); opacity: .92; }
.gx-card__type { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, .92); color: var(--mx-primary); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.gx-card__zoom { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--mx-primary); font-size: 18px; opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .3s ease; }
.gx-card:hover .gx-card__zoom { opacity: 1; transform: scale(1); }
.gx-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; z-index: 1; }
.gx-card__title { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.gx-card__count { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.gx-empty { text-align: center; padding: 70px 20px; color: #64748b; }
.gx-empty i { font-size: 46px; color: color-mix(in srgb, var(--mx-primary) 30%, #cbd5e1); }
.gx-empty p { margin: 16px 0 4px; font-size: 18px; font-weight: 600; color: #334155; }

.album-tile { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: #f4f6fb; border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1 / 1; }
.album-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease-out; }
.album-tile__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 14px; text-align: center; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%); opacity: 0; transition: opacity .25s; color: #fff; }
.album-tile__zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: #0b1220; border-radius: 50%; transition: transform .25s; }
.album-tile__title { position: relative; font-weight: 600; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
@media (hover: hover) and (pointer: fine) {
    .album-tile:hover img { transform: scale(1.07); }
    .album-tile:hover .album-tile__overlay { opacity: 1; }
    .album-tile:hover .album-tile__zoom { transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
 * İletişim — split kart form
 * ============================================================ */
.ctc-section { padding: 70px 0; background: radial-gradient(110% 60% at 50% -5%, color-mix(in srgb, var(--mx-primary) 7%, #fff), #f4f6fb 60%); }
.ctc-card { display: grid; grid-template-columns: 5fr 7fr; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(2, 1, 90, .45); }
.ctc-info { position: relative; overflow: hidden; padding: 52px 44px; color: #fff; background: radial-gradient(90% 70% at 90% 0%, color-mix(in srgb, var(--mx-primary) 45%, transparent), transparent 60%), linear-gradient(150deg, var(--mx-primary-dark) 0%, var(--mx-primary) 100%); }
.ctc-info__inner { position: relative; z-index: 1; }
.ctc-info__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.ctc-info__ring--a { width: 280px; height: 280px; right: -110px; top: -110px; border: 1.5px solid rgba(255, 255, 255, .14); }
.ctc-info__ring--b { width: 180px; height: 180px; left: -80px; bottom: -70px; background: rgba(255, 255, 255, .06); }
.ctc-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); }
.ctc-info__title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.2; margin: 18px 0 12px; color: #fff; }
.ctc-info__lead { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .82); margin: 0 0 28px; }
.ctc-chan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ctc-chan li > a, .ctc-chan--static { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.ctc-chan li > a:hover { transform: translateX(4px); }
.ctc-chan__ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font-size: 18px; color: #fff; }
.ctc-chan__txt { display: flex; flex-direction: column; min-width: 0; }
.ctc-chan__txt small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.ctc-chan__txt b { font-size: 15px; font-weight: 600; word-break: break-word; }
.ctc-form { padding: 52px 48px; }
.ctc-form__title { font-size: 24px; font-weight: 800; color: #14183a; margin: 0 0 4px; }
.ctc-form__sub { font-size: 14px; color: #64748b; margin: 0 0 24px; }
.ctc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ctc-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.ctc-field--full { grid-column: 1 / -1; }
.ctc-field label { font-size: 13.5px; font-weight: 600; color: #14183a; margin-bottom: 7px; }
.ctc-field label span { color: #e5484d; }
.ctc-field input, .ctc-field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 15px; color: #14183a; background: #fff; transition: border-color .2s, box-shadow .2s; font-family: inherit; }
.ctc-field input:focus, .ctc-field textarea:focus { outline: 0; border-color: var(--mx-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-primary) 14%, transparent); }
.ctc-field input.is-invalid, .ctc-field textarea.is-invalid { border-color: #e5484d; }
.ctc-field textarea { resize: vertical; }
.ctc-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 13.5px; color: #475569; line-height: 1.5; cursor: pointer; }
.ctc-consent input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--mx-primary); }
.ctc-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 12px; padding: 8px 12px; font-size: 13px; margin: 6px 0 0; }
.ctc-btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border: 0; border-radius: 999px; background: var(--mx-primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .2s, transform .2s; }
.ctc-btn:hover { filter: brightness(.92); transform: translateY(-2px); }
.ctc-success { text-align: center; padding: 30px 10px; }
.ctc-success__icon { color: #16a34a; }
.ctc-success h3 { font-size: 22px; font-weight: 800; color: #14183a; margin: 12px 0 6px; }
.ctc-success p { color: #64748b; margin: 0; }
.ctc-map { position: relative; }
.ctc-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.ctc-map__card { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: 540px; width: calc(100% - 32px); background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35); text-decoration: none; color: inherit; }
.ctc-map__ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mx-primary) 12%, #fff); color: var(--mx-primary); font-size: 18px; }
.ctc-map__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ctc-map__txt b { font-size: 15px; color: #14183a; }
.ctc-map__txt small { font-size: 13px; color: #64748b; }
.ctc-map__dir { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--mx-primary); color: #fff; font-size: 13.5px; font-weight: 600; }
@media (max-width: 991px) {
    .ctc-card { grid-template-columns: 1fr; }
    .ctc-info, .ctc-form { padding: 40px 26px; }
    .ctc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Footer
 * ============================================================ */
.cf { position: relative; overflow: hidden; padding: 62px 0 26px; color: #cdd6e4; background: radial-gradient(120% 80% at 88% 0%, color-mix(in srgb, var(--mx-primary) 30%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--mx-primary) 20%, #0a0f1c) 0%, color-mix(in srgb, var(--mx-primary) 9%, #070b14) 100%); }
.cf__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--mx-primary), color-mix(in srgb, var(--mx-primary) 50%, #fff), var(--mx-primary), transparent); }
.cf__glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.cf__glow--a { width: 420px; height: 420px; right: -160px; top: 40px; background: radial-gradient(circle, color-mix(in srgb, var(--mx-primary) 22%, transparent), transparent 70%); }
.cf__glow--b { width: 320px; height: 320px; left: -150px; bottom: -120px; background: radial-gradient(circle, color-mix(in srgb, var(--mx-primary) 16%, transparent), transparent 70%); }
.cf .container { position: relative; z-index: 1; }
.cf-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; margin: 0 0 52px; padding: 30px 40px; border-radius: 22px; background: linear-gradient(120deg, var(--mx-primary-dark), var(--mx-primary)); box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--mx-primary) 80%, transparent); position: relative; overflow: hidden; }
.cf-cta__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 6px; }
.cf-cta__txt h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; color: #fff; margin: 0; }
.cf-cta__act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cf-cta__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; background: #fff; color: var(--mx-primary); font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.cf-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }
.cf-cta__phone { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; }
.cf-cta__phone i { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); font-size: 14px; }
.cf-cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cf-col__title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 20px; position: relative; padding-bottom: 12px; }
.cf-col__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2.5px; border-radius: 3px; background: var(--mx-primary); }
.cf-brand__logo { display: inline-block; margin-bottom: 18px; }
.cf-brand__logo img { max-height: 46px; width: auto; }
.cf-brand__about { font-size: 14px; line-height: 1.7; color: #9fabbd; margin: 0 0 22px; max-width: 320px; }
.cf-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cf-social a { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #cdd6e4; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 16px; transition: transform .2s, background .2s, color .2s; }
.cf-social a:hover { transform: translateY(-3px); background: var(--mx-primary); color: #fff; border-color: transparent; }
.cf-social--wa:hover { background: #25D366 !important; }
.cf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cf-links a { color: #9fabbd; text-decoration: none; font-size: 14.5px; }
.cf-links a:hover { color: #fff; }
.cf-cinfo { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cf-cinfo li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: #9fabbd; }
.cf-cinfo li a { color: #9fabbd; text-decoration: none; }
.cf-cinfo li a:hover { color: #fff; }
.cf-cinfo__ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mx-primary) 30%, transparent); color: #fff; font-size: 15px; }
.cf-hours { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 14px 16px; }
.cf-hours__head { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cf-hours p { margin: 0; font-size: 13px; color: #9fabbd; }
.cf-bottom { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; }
.cf-bottom__copy { margin: 0; font-size: 13.5px; color: #8b97a9; }
@media (max-width: 991px) { .cf-cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; } .cf-cta { padding: 26px 24px; } }
@media (max-width: 575px) { .cf-cols { grid-template-columns: 1fr; } }

/* ============================================================
 * Header dil seçici + sabit telefon/whatsapp/yukarı-çık butonları —
 * eski sistemde yoktu (Awen'in kendi ihtiyacı: randevu formu kaldırıldığı
 * için ziyaretçinin en hızlı iletişim yolu bu üç buton).
 * ============================================================ */
.awen-lang-switch { display: inline-block; margin-inline-start: 10px; vertical-align: middle; }
.awen-lang-switch__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: #1a1a2e; cursor: pointer; }
.awen-lang-switch--compact .awen-lang-switch__btn { padding: 6px 10px; }
.awen-lang-switch__menu { min-width: 170px; }
.awen-lang-switch__menu .dropdown-item { display: flex; align-items: center; gap: 8px; }
/* Bootstrap'ın kendi .dropdown-item.active'i mavi arka plan basıyor
   (--bs-dropdown-link-active-bg) — markanın hiçbir yerinde olmayan bir
   renk. Seçili dil, mavi kutu yerine hafif marka rengi tonu + kalın
   yazıyla işaretleniyor. */
.awen-lang-switch__menu .dropdown-item.active,
.awen-lang-switch__menu .dropdown-item:active {
    background-color: color-mix(in srgb, var(--mx-primary) 12%, #fff);
    color: var(--mx-secondary);
    font-weight: 700;
}
.awen-lang-switch__menu .dropdown-item:hover,
.awen-lang-switch__menu .dropdown-item:focus {
    background-color: color-mix(in srgb, var(--mx-primary) 8%, #fff);
    color: var(--mx-secondary);
}
.awen-lang-switch__flag { font-size: 15px; line-height: 1; }

.awen-floats { position: fixed; bottom: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.awen-floats--left { left: 24px; }
.awen-float-btn {
    width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); border: 0; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Rengi doğrudan burada sabitliyoruz — genel ".theme-medicax-cardio a:hover
   { color: var(--mx-primary) !important }" kuralı (theme.css'ten) telefon
   butonunun ikonunu, arka planla AYNI renge boyayıp görünmez yapıyordu. */
.awen-float-btn,
.theme-medicax-cardio .awen-float-btn:hover {
    color: #fff !important;
}
.awen-float-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,.5);
}
.awen-float-btn--wa { background: #25D366; }
.awen-float-btn--tel { background: var(--mx-primary); }
.awen-float-btn--top { position: fixed; right: 24px; bottom: 24px; z-index: 999; background: var(--mx-primary); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .2s ease, box-shadow .2s ease; }
.awen-float-btn--top.is-visible { opacity: 1; pointer-events: auto; }

/* "left: -9999px" ile görsel olarak gizlemenin klasik yolu YÖN'e bağlı —
 * Arapça (dir="rtl") sayfada bu, sayfanın kendisini binlerce piksel yatay
 * kaydırılabilir yapıyordu (document scrollWidth 1400px'lik bir ekranda
 * 11399'a çıkıyordu: 9999 + 1400), sayfa ilk açılışta bomboş görünüyordu.
 * Yönden bağımsız, standart "visually hidden" deseni (boyutu sıfırlayıp
 * clip'lemek) aynı sonucu (ekran okuyucuya görünür, gözle görünmez) hiçbir
 * yöne taşmadan veriyor. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    background: var(--mx-primary);
    color: #fff;
    z-index: 10000;
}
.skip-link:focus {
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    left: 10px;
    top: 10px;
}

/* ============================================================
 * Anasayfa hero — canlıdaki (awenclinic.com) gerçek görünüm: tam
 * genişlik/tam ekran arka plan fotoğrafı + koyu overlay + sol hizalı
 * içerik kutusu. Eski sistemde bu medicax'ın KENDİ hero1-section-area
 * kalıbı değildi — btzclinic-web'in her temaya ortak sunduğu, Tailwind
 * tabanlı "HeroSlider / full-width-bg" bileşeniydi (bkz.
 * HeroFullWidthBg.vue). O yüzden burada medicax sınıfları değil,
 * bilerek kendi (awen-hero-full) sınıflarımız var.
 * ============================================================ */
/* Eski sistemin AYNI bileşeninin (HeroSlider.vue) kendi yorumunda anlattığı,
   zaten bir kez yaşanmış bir hata: 100vw dikey scrollbar'ın genişliğini de
   sayıyor, gerçek görünür alandan (document.clientWidth) birkaç piksel
   geniş çıkıyor ve sayfanın altında yatay bir kaydırma çubuğu açıyordu.
   100dvw (destekleyen tarayıcılarda 100vw'nin üzerine yazar) scrollbar'ı
   hariç tutuyor; overflow-x: clip ikinci bir güvenlik katmanı. */
.awen-hero-full {
    position: relative;
    width: 100vw;
    width: 100dvw;
    margin-left: calc(50% - 50vw);
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50vw);
    margin-right: calc(50% - 50dvw);
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
.awen-hero-full__slide {
    position: absolute;
    inset: 0;
}
.awen-hero-full__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: awenHeroKenBurns 18s linear forwards;
}
/* dtmuratonen-site'ın hero'suyla aynı yavaş yakınlaşma (Ken Burns) */
@keyframes awenHeroKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .awen-hero-full__img { animation: none; }
}
.awen-hero-full__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .2;
    pointer-events: none;
}
.awen-hero-full__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
}
.awen-hero-full__content {
    width: 100%;
    max-width: 1200px;
    padding: 28px 0;
    text-align: start;
}
.awen-hero-full__badge {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.awen-hero-full__title {
    margin: 0 0 20px;
    font-size: clamp(32px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 2px 2px 16px rgba(0, 0, 0, .6);
}
.awen-hero-full__desc {
    max-width: 640px;
    margin: 0 0 28px;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .95);
    text-shadow: 2px 2px 16px rgba(0, 0, 0, .6);
}
.awen-hero-full__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.awen-hero-full__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.awen-hero-full__btn--primary {
    background: #fff;
    color: var(--mx-secondary);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
}
.awen-hero-full__btn--primary:hover {
    transform: translateY(-2px);
    color: var(--mx-secondary);
}
.awen-hero-full__btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .8);
}
.awen-hero-full__btn--secondary:hover {
    background: #fff;
    color: var(--mx-secondary);
}
/* Birden fazla gerçek slayt varsa (bugün tek slayt var) — custom.js
   owl-carousel'i ilklendiriyor, her .awen-hero-full__slide bir kart olur. */
.awen-hero-slider.owl-carousel .awen-hero-full__slide { position: relative; height: 100%; }
@media (max-width: 767px) {
    .awen-hero-full { min-height: 620px; }
}

/* ============================================================
 * Değerlendirme "devamını oku" tam ekran modalı
 * ============================================================ */
.awen-review-more {
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    color: var(--mx-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.awen-review-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.awen-review-modal.is-open { display: flex; }
.awen-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(2px);
}
.awen-review-modal__card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
}
.awen-review-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #f3f5fa;
    color: #334155;
    font-size: 16px;
    cursor: pointer;
}
.awen-review-modal__stars { color: #f5b301; font-size: 18px; margin-bottom: 18px; }
.awen-review-modal__text { font-size: 17px; line-height: 1.7; color: #14183a; margin: 0 0 20px; }
.awen-review-modal__author { font-size: 15px; font-weight: 700; color: var(--mx-primary); margin: 0; }

/* ============================================================
 * Üst menüdeki "Tedaviler" açılır listesi — 25 tedavi tek sütunda
 * taşıyor ve sabit bir yükseklik/scroll olmadan sayfanın geri kalanının
 * üzerine taşıyordu. Sabit yükseklik + kaydırma.
 * ============================================================ */
.theme-medicax-cardio .vl-main-menu ul > li .sub-menu {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mx-primary) 50%, #cbd5e1) transparent;
}
.theme-medicax-cardio .vl-main-menu ul > li .sub-menu::-webkit-scrollbar { width: 6px; }
.theme-medicax-cardio .vl-main-menu ul > li .sub-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mx-primary) 50%, #cbd5e1);
    border-radius: 3px;
}

/* Blog sayfalama — devre dışı Prev/Next (ilk/son sayfada) tıklanamaz ve
 * soluk görünsün, main.css'in vl-btn4'ü zaten aktif haliyle stilli. */
.theme-medicax-cardio .vl-btn4.disabled {
    opacity: .45;
    pointer-events: none;
    box-shadow: none;
}