/* =============================================================================
   TDP AgencyX — Global responsive fixes
   Loaded LAST in the cascade so it can override legacy Bootstrap 4 +
   theme-template rules that don't scale down for phones.
   ============================================================================= */

/* --------- Viewport safety nets ------------------------------------------- */
html,
body {
  overflow-x: hidden !important;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object,
video {
  max-width: 100%;
}

/* Cap any inline `style="width: NNNpx"` wrappers so an authored 720 /
   540 / 500 px decorative container never exceeds the viewport on
   tablet + phone. Smaller fixed widths (icons, buttons) already fit
   under 100 % so the cap is a no-op for them. */
@media (max-width: 991px) {
  [style*="width:"] {
    max-width: 100% !important;
  }
  /* Exclude flex/grid auto-width utilities where `width: auto` etc.
     should remain unconstrained. */
  [style*="width: auto"],
  [style*="width:auto"] {
    max-width: none !important;
  }
}

/* Heights over ~500 px on mobile eat screens. Cap any inline height
   > 400 px on tablet, > 320 on phone. Preserves aspect via height:auto
   fallback. */
@media (max-width: 767px) {
  [style*="height: 520"],
  [style*="height: 500"],
  [style*="height: 480"],
  [style*="height: 460"],
  [style*="height: 440"],
  [style*="height: 420"],
  [style*="height: 400"] {
    max-height: 360px !important;
    height: auto !important;
  }
}
@media (max-width: 480px) {
  [style*="height: 520"],
  [style*="height: 500"],
  [style*="height: 480"],
  [style*="height: 460"],
  [style*="height: 440"],
  [style*="height: 420"],
  [style*="height: 400"] {
    max-height: 280px !important;
  }
}

/* --------- Mobile navbar — desktop Bootstrap collapse hidden, side drawer
     takes over on phones. The drawer lives outside the <nav> element so it
     can slide over the full viewport. ------------------------------------- */

/* Hamburger button — BARE icon (no border, no tinted box).
   Color follows whatever the navbar shows; on mobile (always white nav)
   the bars are dark and read against the white. */
.tdp-mobile-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: oklch(0.18 0.04 270);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
  /* Pin to the right side of .responsive-mobile-menu (which is
     position:relative per the theme) so it sits next to the logo, not
     below it. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.tdp-mobile-toggler svg {
  width: 24px;
  height: 24px;
}
.tdp-mobile-toggler:hover,
.tdp-mobile-toggler:focus-visible {
  color: oklch(0.55 0.22 17);
  outline: none;
}
.tdp-mobile-toggler:active {
  transform: translateY(-50%) scale(0.94);
}

/* Hide desktop Bootstrap nav below lg; keep the hamburger.
   Keep the right-side "Bize Katıl" CTA OFF the bar so the logo + button
   have the top row to themselves. Navbar is fixed to the top with a
   solid white background and slides off-screen on scroll-down via the
   `.nav-hidden` class set by Header.tsx. */
@media (max-width: 991px) {
  .header-style-01 .tdp-desktop-nav,
  .header-style-01 .navbar-collapse.collapse.tdp-desktop-nav {
    display: none !important;
  }
  .header-style-01 .nav-right-content {
    display: none !important;
  }
  /* Guarantee the mobile menu container is visible even if a theme
     stylesheet toggled its display elsewhere. */
  .header-style-01 .responsive-mobile-menu {
    display: block !important;
    position: relative;
    width: 100%;
  }

  /* Always-white, fixed-to-top nav. No transparent-on-hero state on
     phone — readable, predictable, modern. */
  .header-style-01 .navbar-area {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    z-index: 1000;
    padding: 0 !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease;
    will-change: transform;
  }
  .header-style-01 .navbar-area.nav-fixed {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }
  /* Auto-hide on scroll-down. Header.tsx sets/removes .nav-hidden. */
  .header-style-01 .navbar-area.nav-hidden {
    transform: translateY(-100%);
  }
  .header-style-01 .navbar-area .nav-container {
    min-height: 64px;
    padding: 8px 16px;
  }
  /* Push page content below the fixed bar so the first section isn't
     hidden under it. The hero section already has its own large top
     padding so the offset only matters for non-hero routes. */
  body {
    padding-top: 64px;
  }
  /* Logo size sane on mobile. min-width:0 + flex-shrink lets the logo
     row shrink past Bootstrap's flex-basis defaults instead of forcing
     horizontal overflow on 360–390 px viewports. */
  .header-style-01 .logo-wrapper {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .header-style-01 .logo-wrapper .logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }
  .header-style-01 .logo-wrapper .logo img {
    height: 44px;
    width: auto;
    flex-shrink: 0;
  }
  /* Show the wordmark next to the logo on tablet (576–991 px). */
  .header-style-01 .tdp-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* On real phones (≤ 575 px) drop the wordmark — only the icon remains.
   The full party name still appears in the drawer header, so identity
   isn't lost. Logo image also shrinks slightly for breathing room next
   to the hamburger button. */
@media (max-width: 575px) {
  .header-style-01 .tdp-logo-text {
    display: none !important;
  }
  .header-style-01 .logo-wrapper .logo img {
    height: 36px;
  }
}

/* Desktop keeps its own original layout — no fixed-position override. */
@media (min-width: 992px) {
  .header-style-01 .navbar-area.nav-hidden {
    /* desktop never auto-hides */
    transform: none;
  }
}

/* Hide the hamburger + drawer above lg — desktop nav takes over. */
@media (min-width: 992px) {
  .tdp-mobile-toggler {
    display: none !important;
  }
}

/* ───── Side drawer ───── */
.tdp-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  /* High z-index so no fixed/sticky page chrome (counter, hero overlay,
     etc.) can leak above it on iOS where layer-painting reorders. */
  z-index: 9998;
  transition: opacity 0.28s ease;
}
.tdp-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tdp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  background: #ffffff;
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.28);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
}
.tdp-drawer.is-open {
  transform: translateX(0);
}
@media (min-width: 992px) {
  .tdp-drawer,
  .tdp-drawer-backdrop {
    display: none !important;
  }
}

.tdp-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* iOS safe-area top — drawer head must clear the notch / dynamic island
     so the close button is always tappable. */
  padding: max(20px, env(safe-area-inset-top)) 20px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}
.tdp-drawer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: oklch(0.18 0.04 270);
}
.tdp-drawer-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.tdp-drawer-logo span {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.tdp-drawer-logo strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: oklch(0.55 0.22 17);
}
.tdp-drawer-logo em {
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: oklch(0.45 0 0);
  margin-top: 2px;
}

.tdp-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.18 0.04 270);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tdp-drawer-close svg {
  width: 18px;
  height: 18px;
}
.tdp-drawer-close:hover,
.tdp-drawer-close:focus-visible {
  background: oklch(0.55 0.22 17);
  border-color: oklch(0.55 0.22 17);
  color: #fff;
  outline: none;
}

.tdp-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 16px;
  -webkit-overflow-scrolling: touch;
}
.tdp-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tdp-drawer-nav > ul > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.tdp-drawer-nav > ul > li:last-child {
  border-bottom: none;
}
.tdp-drawer-nav > ul > li > a,
.tdp-drawer-nav > ul > li > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: oklch(0.15 0.02 270);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.tdp-drawer-nav > ul > li > a:hover,
.tdp-drawer-nav > ul > li > button:hover,
.tdp-drawer-nav > ul > li > a:focus-visible,
.tdp-drawer-nav > ul > li > button:focus-visible {
  background: oklch(0.97 0.02 17);
  color: oklch(0.55 0.22 17);
  outline: none;
}
.tdp-drawer-nav > ul > li.is-active > a,
.tdp-drawer-nav > ul > li.is-active > button {
  color: oklch(0.55 0.22 17);
  background: oklch(0.97 0.02 17 / 0.7);
}
.tdp-drawer-nav .chevron {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.tdp-drawer-nav li.is-open > button .chevron {
  transform: rotate(90deg);
  opacity: 1;
  color: oklch(0.55 0.22 17);
}

.tdp-drawer-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  padding-left: 12px;
}
.tdp-drawer-nav li.is-open .tdp-drawer-submenu {
  max-height: 500px;
  padding-bottom: 6px;
}
.tdp-drawer-submenu li a {
  display: block;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: oklch(0.35 0.02 270);
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid oklch(0.92 0 0);
  margin-left: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tdp-drawer-submenu li a:hover,
.tdp-drawer-submenu li a:focus-visible {
  color: oklch(0.55 0.22 17);
  border-left-color: oklch(0.55 0.22 17);
  background: oklch(0.97 0.02 17 / 0.6);
  outline: none;
}

.tdp-drawer-foot {
  /* iOS safe-area bottom — protects "Bize Katıl" CTA + contact rows from
     being hidden behind the iPhone home indicator / Chrome bottom URL bar. */
  padding: 16px 20px max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #fcfcfd 0%, #f8f8fb 100%);
  display: grid;
  gap: 10px;
}
.tdp-drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  background: oklch(0.55 0.22 17);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 20px oklch(0.55 0.22 17 / 0.32);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tdp-drawer-cta:hover,
.tdp-drawer-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px oklch(0.55 0.22 17 / 0.42);
  outline: none;
}
.tdp-drawer-cta svg {
  width: 16px;
  height: 16px;
}
.tdp-drawer-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: oklch(0.55 0.22 17);
  border: 1.5px solid oklch(0.55 0.22 17);
  border-radius: 10px;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, color 0.15s;
}
.tdp-drawer-secondary:hover,
.tdp-drawer-secondary:focus-visible {
  background: oklch(0.55 0.22 17);
  color: #fff;
  outline: none;
}
.tdp-drawer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  font-size: 12px;
}
.tdp-drawer-contact a {
  color: oklch(0.4 0 0);
  text-decoration: none;
  letter-spacing: 0.2px;
}
.tdp-drawer-contact a:hover {
  color: oklch(0.55 0.22 17);
}

/* --------- Max-width traps (content gets locked narrower than viewport) ----- */
@media (max-width: 991px) {
  .tdp-hero-title,
  .tdp-hero-subtitle,
  .tdp-hero-desc {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  .party-single-item .content .title,
  .party-single-item .content .title.style-01,
  .party-single-item .content .description,
  .party-single-item .content .description.style-01,
  .party-single-item.style-02 .content .quotes .description {
    max-width: 100% !important;
  }
  .tdp-news-card,
  .tdp-news-thumbnail,
  .tdp-news-thumbnail.large,
  .tdp-news-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------- Large typography clamps ---------------------------------------- */
@media (max-width: 991px) {
  .party-single-item .content .title {
    font-size: 32px;
    line-height: 1.25;
  }
  .party-leader-item .name {
    font-size: 48px;
    line-height: 1.1;
  }
  .party-info-item .number {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .party-single-item .content .title {
    font-size: 24px;
  }
  .party-leader-item .name {
    font-size: 34px;
  }
  .single-counter.style-01 .count-num,
  .single-counter.style-01 .count-number,
  .counter-counter-up .count-num {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }
  .single-counterup-02 .content .count-wrap {
    font-size: 38px !important;
  }
  .tdp-title {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .party-leader-item .name {
    font-size: 26px;
  }
  .single-counter.style-01 .count-num,
  .single-counter.style-01 .count-number,
  .counter-counter-up .count-num {
    font-size: 28px !important;
  }
  .single-counterup-02 .content .count-wrap {
    font-size: 28px !important;
  }
}

/* --------- Section padding (120px eats 60% of phone viewport) ------------- */
@media (max-width: 991px) {
  .our-party-section-area,
  .our-party-section-area.political,
  .our-party-section-area .section-inner,
  .party-member-section-area,
  .accoridion-section,
  .campaign-section-area,
  .counter-section-area,
  .testimonial-section-area,
  .political-gallery-section,
  .header-bottom-area {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .section-one-bg {
    padding: 40px !important;
  }
  .margin-top-120 {
    margin-top: 60px !important;
  }
  .margin-top-90 {
    margin-top: 50px !important;
  }
}
@media (max-width: 767px) {
  .our-party-section-area,
  .our-party-section-area.political,
  .our-party-section-area .section-inner,
  .party-member-section-area,
  .accoridion-section,
  .campaign-section-area,
  .counter-section-area,
  .testimonial-section-area,
  .political-gallery-section,
  .header-bottom-area {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .section-one-bg {
    padding: 24px !important;
  }
  .margin-top-120 {
    margin-top: 40px !important;
  }
  .margin-top-90 {
    margin-top: 32px !important;
  }
  .form-section-area {
    padding: 32px 20px !important;
  }
}
@media (max-width: 576px) {
  .our-party-section-area,
  .our-party-section-area.political,
  .our-party-section-area .section-inner,
  .party-member-section-area,
  .accoridion-section,
  .campaign-section-area,
  .counter-section-area,
  .testimonial-section-area,
  .political-gallery-section,
  .header-bottom-area {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* --------- col-md-* compaction on phones ---------------------------------
   Bootstrap 4 only applies .col-md-* at ≥ 768 px. Below that, items fall
   back to Bootstrap's default .col auto-width (100%). This stacks "50+ Yıl /
   6 İlçe" stat blocks and 4-up team grids into one-per-row towers that eat
   pages of scroll. Force the common compact patterns to keep their share
   on phone:
     col-md-6  → 2 per row  (stats, team, card grids)
     col-md-4  → 3 per row  (small icons / tags)
     col-md-3  → 2 per row  (rarely used, keep readable)
   col-md-12 stays 100% — no rule needed, it already is.                 */
@media (max-width: 767px) {
  .row > .col-md-6,
  .row > [class*=" col-md-6"],
  .row > [class^="col-md-6 "] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .row > .col-md-4,
  .row > [class*=" col-md-4"],
  .row > [class^="col-md-4 "] {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }
  .row > .col-md-3,
  .row > [class*=" col-md-3"],
  .row > [class^="col-md-3 "] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* At truly narrow phones (≤ 420) the 3-per-row compact grids become
   cramped; drop them to 2 so labels stay readable. col-md-6 keeps 2. */
@media (max-width: 420px) {
  .row > .col-md-4,
  .row > [class*=" col-md-4"],
  .row > [class^="col-md-4 "] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Stat / counter items specifically — tighten padding when shown in a
   2-per-row grid so numbers don't overflow their cell. */
@media (max-width: 767px) {
  .counter-section-area .single-counterup-02,
  .counter-section-inner .single-counterup-02 {
    padding: 14px 8px !important;
    min-height: auto !important;
  }
  .counter-section-area .single-counterup-02 .count-wrap,
  .counter-section-inner .single-counterup-02 .count-wrap {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
  .counter-section-area .single-counterup-02 .title,
  .counter-section-inner .single-counterup-02 .title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-top: 4px;
  }
}
@media (max-width: 420px) {
  .counter-section-area .single-counterup-02 .count-wrap,
  .counter-section-inner .single-counterup-02 .count-wrap {
    font-size: 26px !important;
  }
  .counter-section-area .single-counterup-02 .title,
  .counter-section-inner .single-counterup-02 .title {
    font-size: 11px !important;
  }
}

/* --------- Bootstrap 4 col-lg-* orphan stacking ---------------------------- */
/* When a col-lg-* item has no `col-md-*` / `col-sm-*` / `col-12` fallback,
   Bootstrap 4 defaults it to auto-flex below lg — that cramps 3–4 cards
   into one row on mobile. Force stack to 1 col at ≤ 575 px across the site. */
@media (max-width: 575px) {
  .row > [class^="col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-6"]):not([class*="col-12"]),
  .row > [class*=" col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-6"]):not([class*="col-12"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* Same sweep at tablet/phone-landscape for tight 3-per-row layouts. */
@media (max-width: 767px) {
  .row > [class^="col-lg-3"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-6"]):not([class*="col-12"]),
  .row > [class*=" col-lg-3"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-6"]):not([class*="col-12"]),
  .row > [class^="col-lg-4"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-6"]):not([class*="col-12"]),
  .row > [class*=" col-lg-4"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-6"]):not([class*="col-12"]),
  .row > [class^="col-lg-6"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-12"]),
  .row > [class*=" col-lg-6"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]):not([class*="col-12"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --------- Testimonial section ("Vatandaşlarımız Ne Diyor") --------------- */
/* Built as CSS Grid so layout is intrinsically responsive — no absolute
   panels, no Bootstrap offset hacks, no cascade fights. */
.tdp-testi-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
}
.tdp-testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: 420px;
}
.tdp-testi-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.tdp-testi-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.tdp-testi-ring--lg {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
}
.tdp-testi-ring--md {
  width: 340px; height: 340px;
  border: 1px solid rgba(255,255,255,0.10);
}
.tdp-testi-ring--sm {
  width: 260px; height: 260px;
  border: 1px solid rgba(255,255,255,0.06);
}
.tdp-testi-logo-img {
  position: relative;
  z-index: 1;
  width: 200px; height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}
.tdp-testi-slider-col { min-width: 0; }

@media (max-width: 991px) {
  .tdp-testi-section { padding: 56px 0; }
  .tdp-testi-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
  }
  /* Hide decorative logo on mobile — quote card gets full width, no overlap. */
  .tdp-testi-logo { display: none; }
}
@media (max-width: 575px) {
  .tdp-testi-section { padding: 40px 0; }
  .tdp-testi-section .container { padding-left: 16px; padding-right: 16px; }
}

/* --------- Form inputs ---------------------------------------------------- */
@media (max-width: 767px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .contact-form-area input,
  .contact-form-area textarea,
  .contact-form-area select {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* --------- iframe / Google Maps aspect-safe wrapper ----------------------- */
/* Any .tdp-iframe-wrap or generic iframe container gets 16:9. Add the class
   to contact page's Google Maps iframe via JSX. */
.tdp-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}
.tdp-iframe-wrap > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------- Gallery + card polish ----------------------------------------- */
@media (max-width: 767px) {
  .political-gallery-item .gallery-single-items .thumb img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
  }
  /* Member card height on mobile — stop forcing 400px */
  .political-single-item,
  .team-single-item,
  .tdp-member-card {
    min-height: auto !important;
    height: auto !important;
  }
  .political-single-item .content .title,
  .team-single-item .content .title,
  .tdp-member-card .title {
    font-size: 18px;
  }
}

/* --------- /orgutlenme map + district cards ------------------------------- */
@media (max-width: 767px) {
  #kktc-map {
    max-height: 420px;
    width: 100%;
    height: auto;
  }
  #kktc-map .kktc-lbl,
  #kktc-map text {
    font-size: 10px !important;
  }
  #district-info {
    margin-top: 20px;
  }
}

/* --------- Video play icon sanity ----------------------------------------- */
@media (max-width: 576px) {
  .video-play.style-03 i {
    width: 72px !important;
    height: 72px !important;
    line-height: 72px !important;
    font-size: 22px !important;
  }
}

/* --------- Timeline ------------------------------------------------------- */
@media (max-width: 576px) {
  .timeline-vertical,
  [style*="borderLeft"][style*="2px solid"] {
    padding-left: 20px !important;
  }
}

/* --------- Footer stacks cleanly ----------------------------------------- */
@media (max-width: 767px) {
  .footer-area .footer-widgets {
    gap: 8px;
  }
  .footer-area .widget {
    margin-bottom: 28px;
  }
  .footer-cta,
  .footer-bottom-area {
    flex-wrap: wrap !important;
    gap: 12px;
    text-align: center;
  }
}

/* --------- Container padding on tiny screens ----------------------------- */
@media (max-width: 576px) {
  .container,
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  h1 { font-size: 28px !important; line-height: 1.2; }
  h2 { font-size: 24px !important; line-height: 1.25; }
  h3 { font-size: 20px !important; line-height: 1.3; }
  h4 { font-size: 18px !important; line-height: 1.3; }
  .description,
  p {
    word-break: break-word;
  }
}

/* --------- Hero cropping on very short phones (iPhone SE, etc.) ----------- */
@media (max-width: 576px) {
  .header-area.header-bg-02,
  .tdp-hero-content {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }
  .tdp-hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .tdp-hero-cta a {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* --------- /iletisim contact map ------------------------------------------ */
/* Desktop: fixed 480px tall, iframe fills it, overlay card floats left.
   Mobile: shorter, overlay card wraps under map.                           */
.tdp-contact-map-wrap {
  height: 480px;
}
.tdp-contact-map-wrap > iframe.tdp-contact-map-iframe {
  height: 100%;
}
@media (max-width: 991px) {
  .tdp-contact-map-wrap {
    height: 420px;
  }
}
@media (max-width: 767px) {
  .tdp-contact-map-wrap {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .tdp-contact-map-wrap > iframe.tdp-contact-map-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .tdp-contact-map-wrap > div[style*="position: absolute"]:not(iframe) {
    position: static !important;
    transform: none !important;
    max-width: calc(100% - 32px) !important;
    margin: -80px auto 0 !important;
    left: auto !important;
    top: auto !important;
  }
  .tdp-contact-map-section {
    padding-bottom: 40px !important;
  }
}

/* Legacy Bootstrap .navbar-toggler is no longer rendered (the Header now
   uses .tdp-mobile-toggler with inline SVG). Kept intentionally blank
   here as a breadcrumb so nobody re-adds a conflicting rule. */

/* =============================================================================
   Red-gradient PAGE BANNER (.tdp-page-header) — mobile/tablet polish
   -----------------------------------------------------------------------------
   The shared hero used on every non-homepage route (hakkimizda, yonetim,
   orgutlenme, politikalar, tarihce, genel-baskan, iletisim, gonullu, bagis,
   sss, tuzuk, medya, haberler, etkinlikler and their [slug] detail pages).
   Base styles live in /public/assets/css/tdp-news.css (.tdp-page-header).
   On narrow viewports the default padding (120/100/90px) is too tall, the
   h1 wraps awkwardly, and the inline-flex breadcrumb row cannot wrap —
   long strings like "Ana Sayfa / Etkinlikler / Etkinlik Detay" overflow.
   Rules below clamp padding, font-size, and let the breadcrumb wrap.
   Desktop (>= 992px) intentionally untouched.
   ============================================================================= */
@media (max-width: 991px) {
  .tdp-page-header {
    padding: 80px 16px 44px !important;
  }
  .tdp-page-header h1 {
    font-size: 30px !important;
    line-height: 1.2 !important;
    word-break: break-word;
    hyphens: auto;
  }
  .tdp-page-header .breadcrumb-nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    font-size: 13px;
    margin-bottom: 10px;
    max-width: 100%;
  }
  .tdp-page-header .breadcrumb-nav a,
  .tdp-page-header .breadcrumb-nav .current {
    font-size: 13px !important;
  }
}

@media (max-width: 767px) {
  .tdp-page-header {
    padding: 72px 14px 36px !important;
  }
  .tdp-page-header h1 {
    font-size: 26px !important;
  }
}

@media (max-width: 480px) {
  .tdp-page-header {
    padding: 64px 12px 32px !important;
  }
  .tdp-page-header h1 {
    font-size: 22px !important;
  }
  .tdp-page-header .breadcrumb-nav,
  .tdp-page-header .breadcrumb-nav a,
  .tdp-page-header .breadcrumb-nav .current {
    font-size: 12px !important;
  }
}

/* =============================================================================
   News / event DETAIL hero (.tdp-news-detail-hero) — mobile polish
   -----------------------------------------------------------------------------
   Base rule in tdp-news.css pins the hero height at 500px (down to 320px on
   767px) and absolutely-positions .tdp-hero-content at the bottom. Two fixes:
     1. Cover/center the <img> (already done via object-fit) AND fall back to
        cover for any inline backgroundImage (none in current TSX but defensive).
     2. Scope the .tdp-hero-cta / padding overrides added earlier (line ~697)
        so they DO NOT hijack .tdp-news-detail-hero .tdp-hero-content — that
        content is anchored to the bottom with its own padding.
     3. Let the meta row wrap tighter and shrink h1 further on narrow phones.
   ============================================================================= */
.tdp-news-detail-hero {
  background-size: cover;
  background-position: center;
}
.tdp-news-detail-hero img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 576px) {
  /* Undo the generic .tdp-hero-content padding bump for the detail hero only. */
  .tdp-news-detail-hero .tdp-hero-content {
    padding: 30px 0 24px !important;
  }
}

@media (max-width: 767px) {
  .tdp-news-detail-hero {
    height: auto;
    min-height: 280px;
  }
  .tdp-news-detail-hero .tdp-hero-content {
    position: absolute;
    padding: 36px 0 26px;
  }
  .tdp-news-detail-hero h1 {
    font-size: 20px !important;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  .tdp-news-detail-hero .tdp-breadcrumb {
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    margin-bottom: 10px;
  }
  .tdp-news-detail-hero .tdp-detail-meta {
    gap: 10px 14px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .tdp-news-detail-hero {
    min-height: 240px;
  }
  .tdp-news-detail-hero h1 {
    font-size: 18px !important;
  }
}