/**
 * Zirve Sürücü Kursu - Responsive & Media Queries
 * Bafra, Samsun
 */

/* ==================================================
   MOBILE-ONLY COMPACTION PASS (<= 768px)
================================================== */
/* ==================================================
   MOBILE REBUILD PASS (<= 768px)
   Density, Rhythm, Information Hierarchy & Spacing
================================================== */
@media (max-width: 768px) {
  :root {
    --container-gutter: 1rem;
    --space-section-mobile: 48px;
  }

  /* Global Mobile Resets & Overflow Guards (clip allows sticky header to work) */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ==================================================
     1. MOBILE HEADER (Generous Sticky 68px, Bold 100px Logo)
  ================================================== */
  .site-header {
    height: var(--mobile-header-height, 68px) !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1300 !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease, background-color 0.2s ease !important;
  }

  .site-header.is-scrolled {
    background-color: #FFFFFF !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
    border-bottom-color: rgba(0, 0, 0, 0.09) !important;
  }

  .header-inner {
    height: 100% !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  .header-logo-link,
  .logo-link {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .header-logo-img,
  .logo-image {
    width: 106px !important;
    max-width: 108px !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .header-nav {
    display: none !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .header-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    background-color: var(--zirve-red) !important;
    color: #FFFFFF !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 999px !important;
    min-height: 40px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(215, 25, 32, 0.25) !important;
    white-space: nowrap !important;
  }

  .header-cta-btn img,
  .header-cta-btn svg {
    display: none !important;
  }

  @media (max-width: 365px) {
    .header-cta-btn {
      display: none !important;
    }
  }

  /* ==================================================
     1.1 MOBILE MENU OVERLAY & PANEL (VIEWPORT-FIXED MODAL DRAWER)
  ================================================== */
  .mobile-menu-backdrop,
  .mobile-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    background: rgba(15, 18, 22, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .mobile-menu-backdrop.is-open,
  .mobile-menu-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Stable scroll-lock: lock vertical scrolling without moving header or body */
  html.menu-open,
  html.mobile-menu-open {
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
    scroll-behavior: auto !important;
  }

  body.menu-open,
  body.mobile-menu-open {
    overscroll-behavior: none !important;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    background-color: #F9FAFB !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
    padding: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
  }

  .mobile-menu-btn:focus:not(:focus-visible) {
    outline: none !important;
  }

  .mobile-menu-btn:focus-visible {
    outline: 2px solid var(--zirve-red, #D71920) !important;
    outline-offset: 2px !important;
  }

  .mobile-menu-btn:active {
    transform: scale(0.97) !important;
  }

  .mobile-menu-btn.is-active,
  .mobile-menu-btn[aria-expanded="true"] {
    background-color: #F3F4F6 !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: var(--zirve-red) !important;
  }

  .mobile-menu-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
  }

  .mobile-menu-panel,
  .mobile-menu,
  .mobile-drawer {
    display: block !important;
    position: fixed !important;
    top: var(--mobile-header-height, 68px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22) !important;
    border-radius: 0 0 22px 22px !important;
    padding: 0.65rem 1rem 1.15rem 1rem !important;
    z-index: 1200 !important;
    max-height: calc(100dvh - var(--mobile-header-height, 68px) - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;

    /* GPU-accelerated 3D transform & opacity only (no height/margin/filter animation) */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -6px, 0) !important;
    transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation: none !important;
  }

  .mobile-menu-panel.is-open,
  .mobile-menu.is-open,
  .mobile-drawer.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .mobile-nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .mobile-nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 1px 0 !important;
  }

  .mobile-nav-item:last-child {
    border-bottom: none !important;
  }

  .mobile-nav-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 0 0.85rem !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    color: #1F2937 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    border-left: none !important;
    background-color: transparent !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease !important;
  }

  .mobile-nav-link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .mobile-nav-link:focus-visible {
    outline: 2px solid var(--zirve-red, #D71920) !important;
    outline-offset: -2px !important;
  }

  .mobile-nav-link:hover {
    background-color: #F9FAFB !important;
    color: #111827 !important;
  }

  .mobile-nav-link:active,
  .mobile-nav-link.is-navigating {
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    transform: scale(0.99) !important;
    transition: transform 90ms ease, background-color 90ms ease !important;
  }

  .mobile-nav-link.active {
    background-color: rgba(230, 20, 35, 0.06) !important;
    color: var(--zirve-red, #D71920) !important;
    font-weight: 700 !important;
    padding-left: 1.15rem !important;
  }

  .mobile-nav-link.active:active,
  .mobile-nav-link.active.is-navigating {
    background-color: rgba(230, 20, 35, 0.1) !important;
    transform: scale(0.99) !important;
    transition: transform 90ms ease, background-color 90ms ease !important;
  }

  .mobile-nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background-color: var(--zirve-red, #D71920) !important;
    border-radius: 999px !important;
  }

  /* Compact Contact Group */
  .mobile-contact-area {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
  }

  .mobile-contact-row,
  .mobile-contact-phone {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: color 0.12s ease, background-color 0.12s ease, transform 0.1s ease !important;
  }

  .mobile-contact-row {
    color: #4B5563 !important;
    font-weight: 500 !important;
  }

  .mobile-contact-phone {
    color: #111827 !important;
    font-weight: 700 !important;
  }

  .mobile-contact-phone:focus:not(:focus-visible) {
    outline: none !important;
  }

  .mobile-contact-phone:focus-visible {
    outline: 2px solid var(--zirve-red, #D71920) !important;
    outline-offset: 2px !important;
  }

  .mobile-contact-phone:hover {
    color: var(--zirve-red) !important;
    background-color: #F9FAFB !important;
  }

  .mobile-contact-phone:active {
    color: var(--zirve-red) !important;
    background-color: #F3F4F6 !important;
    transform: scale(0.99) !important;
    transition: transform 90ms ease !important;
  }

  .mobile-contact-row img,
  .mobile-contact-phone img,
  .mobile-contact-row svg,
  .mobile-contact-phone svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    opacity: 0.75 !important;
  }

  /* WhatsApp CTA */
  .mobile-wa-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 1rem !important;
    border-radius: 13px !important;
    text-decoration: none !important;
    margin-top: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 3px 12px rgba(37, 211, 102, 0.22) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    transition: background-color 0.12s ease, transform 0.1s ease !important;
  }

  .mobile-wa-btn:focus:not(:focus-visible) {
    outline: none !important;
  }

  .mobile-wa-btn:focus-visible {
    outline: 2px solid #128C7E !important;
    outline-offset: 2px !important;
  }

  .mobile-wa-btn:active {
    transform: scale(0.99) !important;
    background-color: #22bf5b !important;
    transition: transform 90ms ease, background-color 90ms ease !important;
  }

  .mobile-wa-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  /* ==================================================
     2. MOBILE HERO (Spacious, Premium, First-Viewport Balanced)
  ================================================== */
  .hero-board {
    border-radius: 22px !important;
    padding: 1.85rem 1.15rem 1.25rem 1.15rem !important;
    min-height: auto !important;
    background: linear-gradient(150deg, #D71920 0%, #B81319 100%) !important;
    box-shadow: 0 10px 32px rgba(215, 25, 32, 0.22) !important;
  }

  /* Step 1: Eyebrow row (top meta -> headline: 20px) */
  .hero-board__top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    margin-bottom: 20px !important;
  }

  .hero-board__top-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .hero-counter-pill {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 0.26rem 0.65rem !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    color: #111827 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }

  .hero-context-text {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .hero-board__top-right {
    display: none !important;
  }

  /* Step 2, 3: Headline & Description (headline -> desc: 14px, desc -> CTA: 20px) */
  .hero-board__main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-board__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .hero-headline {
    font-size: clamp(1.95rem, 7.2vw, 2.3rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 14px 0 !important;
    color: #FFFFFF !important;
    text-align: left !important;
  }

  .hero-title-badge {
    font-size: 0.9em !important;
    padding: 0.18rem 0.8rem !important;
    border-radius: 14px !important;
    margin-top: 0.35rem !important;
    display: inline-block !important;
    line-height: 1.15 !important;
  }

  /* Step 3: Description - complete 2-3 lines, NO ellipsis truncation */
  .hero-desc {
    display: block !important;
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.52 !important;
    margin: 0 0 5px 0 !important; /* Raised CTAs by 15px */
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .hero-tags-row {
    display: none !important;
  }

  /* Step 4: Two Clear Actions (CTA -> vehicle gap: ~26-28px) */
  .hero-board__ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin-bottom: 22px !important;
  }

  .hero-board__cta-primary,
  .hero-board__cta-wa {
    flex: 1 1 0% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 0.6rem !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    gap: 0.45rem !important;
    box-sizing: border-box !important;
  }

  .hero-board__cta-primary {
    background-color: #FFFFFF !important;
    color: var(--zirve-red) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16) !important;
  }

  .hero-board__cta-wa {
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(37, 211, 102, 0.28) !important;
  }

  .hero-board__cta-primary svg,
  .hero-board__cta-wa img {
    flex-shrink: 0 !important;
  }

  /* Step 5: Hero Visual - Vehicle as PRIMARY Dominant Element (+12–15% LARGER) */
  .hero-board__stage {
    width: 100% !important;
    height: 218px !important;
    min-height: 218px !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
  }

  .hero-vehicle-wrap {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
  }

  .hero-vehicle-img {
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease !important;
    will-change: transform, opacity !important;
  }

  /* All Mobile Hero Slides: Unified Dominant Vehicle Scale (approx 14% larger, unclipped) */
  .hero-vehicle-img,
  .hero-asset--vehicle,
  .hero-asset--training,
  .hero-asset--lesson,
  .hero-asset--instructor,
  .hero-asset--payment,
  [data-category="b"] .hero-vehicle-img,
  [data-category="direksiyon"] .hero-vehicle-img,
  [data-category="ozel-ders"] .hero-vehicle-img,
  [data-category="egitmen"] .hero-vehicle-img,
  [data-category="araclar"] .hero-vehicle-img,
  [data-category="odeme"] .hero-vehicle-img {
    max-width: 96vw !important;
    max-height: 205px !important;
    width: auto !important;
    height: auto !important;
    transform: scale(1) translateY(0) !important;
    transform-origin: center bottom !important;
  }

  .hero-watermark,
  .hero-info-strip,
  .hero-stage-ground {
    display: none !important;
  }

  /* Step 6: Zirve Rotası - Horizontal Stepper with Clean Peek & Precise Snapping (vehicle -> route gap: ~21-23px) */
  .zirve-route {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0.85rem !important;
    margin-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    width: 100% !important;
    gap: 0.35rem !important;
    position: relative !important;
  }

  .zirve-route__lead,
  .zirve-route__line-base,
  .zirve-route__line-fill {
    display: none !important;
  }

  .zirve-route__track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.35rem 1.75rem 0.35rem 0.25rem !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 0.5rem !important;
    min-width: 0 !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%) !important;
  }

  .zirve-route__stop {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-width: auto !important;
    min-height: 38px !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }

  .zirve-route__point {
    width: 6px !important;
    height: 6px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    margin: 0 !important;
  }

  .zirve-route__dot {
    display: none !important;
  }

  .zirve-route__num {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1 !important;
  }

  .zirve-route__label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: rgba(255, 255, 255, 0.92) !important;
    line-height: 1 !important;
  }

  .zirve-route__stop.active {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    transform: scale(1.02) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
  }

  .zirve-route__stop.active .zirve-route__point {
    background: var(--zirve-red) !important;
  }

  .zirve-route__stop.active .zirve-route__num {
    color: var(--zirve-red) !important;
    opacity: 1 !important;
    font-weight: 900 !important;
  }

  .zirve-route__stop.active .zirve-route__label {
    color: #111827 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
  }

  /* ==================================================
     3. SECTION SPACING (Comfortable 56–72px Rhythm)
  ================================================== */
  .section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .section--sm {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .section-header {
    margin-bottom: 1.4rem !important;
  }

  .section-header--between {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
  }

  .section-header--between .btn,
  .section-header--between a.btn {
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.95rem !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #111827 !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin-top: 0.15rem !important;
  }

  .section-header--between .btn:hover,
  .section-header--between a.btn:hover {
    background: var(--zirve-red) !important;
    color: #FFFFFF !important;
    border-color: var(--zirve-red) !important;
  }

  .section-header--between .btn .btn__arrow,
  .section-header--between a.btn .btn__arrow {
    color: var(--zirve-red) !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    transition: transform 0.2s ease !important;
  }

  .section-header--between .btn:hover .btn__arrow,
  .section-header--between a.btn:hover .btn__arrow {
    color: #FFFFFF !important;
    transform: translateX(3px) !important;
  }

  .section-title {
    font-size: clamp(1.65rem, 5.5vw, 1.95rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 0.45rem !important;
  }

  .section-subtitle {
    font-size: 0.9375rem !important;
    line-height: 1.48 !important;
  }

  .section-tag {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.35rem !important;
  }

  /* Trust Strip */
  .trust-strip {
    padding: 0.75rem 0 !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  .trust-strip__inner {
    font-size: 0.8125rem !important;
    gap: 0.45rem 0.65rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 0.25rem 0 !important;
  }

  /* ==================================================
     4. ABOUT SECTION (Prominent Real Photography)
  ================================================== */
  .brand-editorial-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
  }

  .brand-editorial-media {
    order: 2 !important;
    height: 220px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0.35rem 0 0 0 !important;
  }

  .brand-editorial-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .brand-editorial-badge {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    bottom: 0.65rem !important;
    left: 0.65rem !important;
  }

  .kisaca-content {
    order: 1 !important;
  }

  .kisaca-content__headline {
    font-size: clamp(1.45rem, 5vw, 1.75rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }

  .kisaca-content__lead {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.65rem !important;
  }

  .kisaca-content__sub {
    display: none !important;
  }

  .kisaca-checklist {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
    margin: 0.75rem 0 !important;
  }

  .kisaca-check-item {
    font-size: 0.8125rem !important;
    gap: 0.35rem !important;
    line-height: 1.3 !important;
  }

  .kisaca-check-item svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .kisaca-content .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 0.9375rem !important;
  }

  /* ==================================================
     5. REVIEWS: Horizontal Swipe (85vw Single-Card Focus)
  ================================================== */
  #yorumlar {
    padding-bottom: 34px !important;
  }

  .reviews-editorial-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.85rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -1rem !important;
    padding: 0.25rem 1rem 0 1rem !important;
  }

  .review-featured-card,
  .review-supporting-card {
    min-width: 85vw !important;
    max-width: 85vw !important;
    min-height: 220px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
    padding: 1.35rem 1.15rem !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .review-featured-card__stars,
  .review-supporting-card__stars {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .review-featured-card__quote {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem !important;
  }

  .review-featured-card__author {
    padding-top: 0.85rem !important;
    margin-top: auto !important;
  }

  .review-supporting-list {
    display: contents !important;
  }

  .review-supporting-card__text {
    font-size: 0.875rem !important;
    line-height: 1.48 !important;
    margin: 0 0 1rem !important;
  }

  .review-supporting-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid var(--zirve-border-light) !important;
    padding-top: 0.85rem !important;
    margin-top: auto !important;
  }

  /* ==================================================
     6. FINDER “HANGİ EĞİTİM SANA UYGUN?”
  ================================================== */
  .license-finder {
    padding: 1.35rem 1.15rem !important;
    border-radius: 16px !important;
  }

  .finder-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .finder-field label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.3rem !important;
  }

  .finder-select {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: 10px !important;
  }

  .finder-result-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
  }

  .finder-card {
    padding: 1.15rem 1rem !important;
    gap: 0.85rem !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .finder-card__media {
    max-width: 100% !important;
    height: 95px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .finder-card__img {
    max-height: 90px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .finder-card__title {
    font-size: 1.125rem !important;
    margin-bottom: 0.3rem !important;
  }

  .finder-card__stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .finder-stat {
    min-width: 0 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .finder-stat__num {
    font-size: 1.05rem !important;
  }

  .finder-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .finder-btn-page {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  .finder-btn-info {
    position: relative !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background-color: #17191D !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .finder-btn-info > span:first-child {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .finder-btn-info__arrow {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #17191D !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    pointer-events: none !important;
  }

  /* ==================================================
     7. SERVICES: Strong Single-Column Attractive Cards
  ================================================== */
  .license-catalogue-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .license-sidebar-card {
    padding: 1.25rem 1.05rem !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }

  .license-sidebar__title {
    font-size: 1.45rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.35rem !important;
  }

  .license-sidebar__desc {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.85rem !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .license-sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .license-sidebar-btn {
    min-height: 44px !important;
    padding: 0.55rem 0.65rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .license-sidebar-btn::after {
    display: none !important;
    content: '' !important;
  }

  .license-sidebar-btn.is-active {
    background: #FFFFFF !important;
    color: var(--zirve-red) !important;
    border-color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }

  .license-sidebar-contact {
    display: none !important;
  }

  /* Detailed Classes Filter Bar & Grid Mobile Styling */
  .license-filter-nav {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0.35rem !important;
    padding: 3px !important;
    margin-bottom: 1.15rem !important;
    margin-top: 0.25rem !important;
    border-radius: 9999px !important;
    background: #F3F4F6 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .license-filter-nav::-webkit-scrollbar {
    display: none !important;
  }

  .filter-tab {
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border: none !important;
    margin: 0 !important;
    color: #4B5563 !important;
    background: transparent !important;
  }

  .filter-tab.active {
    background-color: var(--zirve-red) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(215, 25, 32, 0.3) !important;
  }

  .license-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    width: 100% !important;
  }

  .license-card {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: opacity 220ms ease, transform 220ms ease !important;
  }

  .license-cat-card.is-hidden,
  .license-card.is-hidden {
    display: none !important;
  }

  /* Strong Single-Column Layout for Full Vehicle Stature */
  .license-catalogue-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .license-cat-card:not(.is-hidden) {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 1.25rem 1.15rem !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
  }

  .license-cat-card.is-hidden {
    display: none !important;
  }

  .license-cat-card__top {
    margin-bottom: 0.4rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .license-cat-card__badge {
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  .license-cat-card__media {
    height: 120px !important;
    margin-bottom: 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .license-cat-card__media img {
    max-height: 112px !important;
    width: auto !important;
    max-width: 90% !important;
    object-fit: contain !important;
  }

  .license-cat-card__title {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
  }

  .license-cat-card__desc {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    color: #4B5563 !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0.75rem !important;
  }

  .license-cat-card__specs {
    display: none !important;
  }

  .license-cat-card__link {
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.35rem 0 !important;
    margin-top: auto !important;
    color: var(--zirve-red) !important;
  }

  /* ==================================================
     8. LOCAL BAFRA SECTION (Prominent Real Parkur Photography)
  ================================================== */
  #bafra-egitim .section-header {
    margin-bottom: 1.15rem !important;
  }

  #bafra-egitim picture img {
    aspect-ratio: 16/10 !important;
    max-height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  #bafra-egitim > .container > div:nth-child(2) {
    margin-bottom: 1.15rem !important;
  }

  #bafra-egitim > .container > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
  }

  #bafra-egitim > .container > div:last-child > div {
    padding: 1.15rem 1.05rem !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  #bafra-egitim h3 {
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  #bafra-egitim p {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0.65rem !important;
  }

  #bafra-egitim a {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ==================================================
     9. NEDEN ZIRVE (Readable 2x2 Grid)
  ================================================== */
  .why-editorial-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  .why-editorial-row {
    padding: 1.05rem 0.95rem !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
  }

  .why-editorial-num {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: var(--zirve-red) !important;
    line-height: 1 !important;
  }

  .why-editorial-title {
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .why-editorial-desc {
    font-size: 0.8125rem !important;
    line-height: 1.42 !important;
    color: #4B5563 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ==================================================
     10. VIDEOS (1 Featured + Horizontal Swipe Thumbnails)
  ================================================== */
  .video-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .video-featured {
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .video-featured .video-media {
    aspect-ratio: 16/9 !important;
  }

  .video-featured > div:last-child {
    padding: 1.05rem 1rem !important;
  }

  .video-featured h3 {
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  .video-featured p {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .video-stack {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.75rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -1rem !important;
    padding: 0.25rem 1rem 0.65rem 1rem !important;
  }

  .video-mini-card {
    min-width: 200px !important;
    max-width: 215px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    padding: 0.55rem !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .video-mini-media {
    width: 100% !important;
    height: 110px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .video-mini-title {
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0.35rem !important;
  }

  .video-mini-sub {
    font-size: 0.72rem !important;
    color: #6B7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ==================================================
     11. GALLERY: 2-Column Square Grid
  ================================================== */
  .gallery-wall {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .gallery-item,
  .gallery-item--vertical,
  .gallery-item--horizontal,
  .gallery-item--square,
  .gallery-item--medium {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .gallery-caption {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.72rem !important;
  }

  /* ==================================================
     12. CONTACT CTA & FORM (Spacious, Tap-Friendly)
  ================================================== */
  .conversion-route {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .conversion-route__headline {
    font-size: clamp(1.55rem, 5.2vw, 1.85rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.45rem !important;
  }

  .conversion-route__lead {
    font-size: 0.875rem !important;
    line-height: 1.48 !important;
    margin-bottom: 1.15rem !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .conversion-route__flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
  }

  .conversion-route__direct {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .conversion-waypoint:nth-child(3) {
    display: none !important;
  }

  .conversion-waypoint {
    padding: 0.85rem 0.85rem !important;
    border-radius: 12px !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .conversion-waypoint__label {
    font-size: 0.72rem !important;
  }

  .conversion-waypoint__value {
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .conversion-waypoint__desc {
    display: none !important;
  }

  .conversion-route__form-box {
    padding: 1.35rem 1.15rem !important;
    border-radius: 16px !important;
  }

  .conversion-form__title {
    font-size: 1.125rem !important;
    margin-bottom: 0.3rem !important;
  }

  .conversion-form__sub {
    font-size: 0.8125rem !important;
    margin-bottom: 0.95rem !important;
  }

  .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .form-group {
    margin-bottom: 0.75rem !important;
  }

  .form-label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.35rem !important;
  }

  .form-input,
  .form-select {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: 10px !important;
  }

  textarea.form-input {
    height: 110px !important;
    min-height: 110px !important;
    max-height: 130px !important;
  }

  .btn--full {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
  }

  /* ==================================================
     13. FAQ (Comfortable Accordion)
  ================================================== */
  .faq-item {
    margin-bottom: 0.45rem !important;
    border-radius: 10px !important;
  }

  .faq-summary {
    padding: 0.75rem 0.85rem !important;
    min-height: 46px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
  }

  .faq-answer {
    padding: 0.45rem 0.85rem 0.85rem 0.85rem !important;
    font-size: 0.84rem !important;
    line-height: 1.48 !important;
  }

  /* ==================================================
     14. BLOG: Horizontal Swipe Cards
  ================================================== */
  .article-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.85rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -1rem !important;
    padding: 0.25rem 1rem 0.85rem 1rem !important;
  }

  .article-card {
    min-width: 84vw !important;
    max-width: 84vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    padding: 1.15rem !important;
    border-radius: 14px !important;
  }

  .article-card__media {
    height: 145px !important;
    border-radius: 10px !important;
    margin-bottom: 0.65rem !important;
  }

  .article-card__title {
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
  }

  .article-card__excerpt {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ==================================================
     15. FOOTER: Clear Branding & Touch-Friendly Links
  ================================================== */
  .site-footer {
    padding-top: 2.25rem !important;
    padding-bottom: 2.5rem !important;
  }

  .footer-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 1.15rem !important;
    gap: 0.75rem !important;
  }

  .footer-brand-logo {
    height: 34px !important;
    width: auto !important;
  }

  .footer-brand-tagline {
    display: none !important;
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    padding: 1.25rem 0 !important;
  }

  .footer-col {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .footer-col__title {
    display: block !important;
    padding: 0 !important;
    min-height: auto !important;
    margin: 0 0 0.85rem 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--zirve-red) !important;
    cursor: default !important;
  }

  .footer-col__title::after {
    display: none !important;
  }

  .footer-col > *:not(.footer-col__title) {
    display: block !important;
    padding: 0 !important;
  }

  .footer-col .footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .footer-col .footer-links li a {
    display: inline-flex !important;
    padding: 0.2rem 0 !important;
    font-size: 0.875rem !important;
    color: #9CA3AF !important;
  }

  .footer-col .footer-links li a:hover {
    color: #FFFFFF !important;
  }

  .footer-col .footer-contact-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* 1. "Bilgi & Kayıt Danışma" Premium Contact Card */
  .footer-col .footer-callout,
  .footer-callout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 68px !important;
    height: auto !important;
    background-color: #21252B !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 13px 16px !important;
    margin-top: 1.25rem !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  }

  .footer-callout:active {
    transform: scale(0.99) !important;
    background-color: #262B32 !important;
  }

  .footer-callout__text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .footer-callout__label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  .footer-callout__phone {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }

  .footer-callout__icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    background-color: var(--zirve-red, #E01823) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-left: 14px !important;
    box-shadow: 0 2px 8px rgba(224, 24, 35, 0.35) !important;
  }

  .footer-callout__icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* 2. Mobile Footer Bottom Area (Clean 3-Row Composition) */
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important; /* 12-16px gap between rows */
    padding-top: 26px !important; /* 24-28px */
    padding-bottom: 24px !important; /* 24px */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtle top divider */
    margin-top: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Flattens the container on mobile to place credit, legal, and copyright in 3 separate rows */
  .footer-bottom__left {
    display: contents !important;
  }

  .footer-bottom__left > .footer-bottom__sep {
    display: none !important;
  }

  /* Row 1 — Credit */
  .footer-credit {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    margin: 0 auto !important;
  }

  .footer-credit__logo {
    width: auto !important;
    height: 12px !important;
    object-fit: contain !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
  }

  .footer-credit:hover .footer-credit__logo,
  .footer-credit:active .footer-credit__logo {
    opacity: 1 !important;
    transform: translateY(-0.5px) !important;
  }

  .footer-credit__text {
    font-size: 12px !important;
    color: #9CA3AF !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
  }

  .footer-credit:hover .footer-credit__text,
  .footer-credit:active .footer-credit__text {
    color: #FFFFFF !important;
  }

  /* Row 2 — Legal Links */
  .footer-bottom__right {
    order: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .footer-bottom__link {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #9CA3AF !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    padding: 3px 0 !important;
    transition: color 0.2s ease !important;
  }

  .footer-bottom__link:hover,
  .footer-bottom__link:active {
    color: #FFFFFF !important;
  }

  .footer-bottom__right .footer-bottom__sep {
    display: inline-block !important;
    color: rgba(255, 255, 255, 0.2) !important;
    font-size: 11px !important;
    margin: 0 -2px !important;
    user-select: none !important;
  }

  /* Row 3 — Copyright */
  .footer-bottom__copy {
    order: 3 !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    color: #6B7280 !important;
    text-align: center !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    display: block !important;
    letter-spacing: -0.01em !important;
  }

  /* Sticky Bottom Mobile Action Bar */
  .mobile-action-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 990 !important;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, visibility 0s 0s !important;
  }

  .mobile-action-bar.is-footer-reached {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, visibility 0s 300ms !important;
  }

  /* Floating Scroll-To-Top Button on Mobile (floating above fixed bottom bar, drops when bar hides) */
  .scroll-to-top {
    right: 18px !important;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 44 !important;
    border-radius: 50% !important;
    background-color: rgba(26, 30, 36, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;
    transition: bottom 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease !important;
  }

  .scroll-to-top.is-footer-reached {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Ultra-Compact Screens (360px–375px) */
  @media (max-width: 375px) {
    .header-logo-img {
      width: 100px !important;
      max-width: 102px !important;
    }
    .hero-board {
      padding: 1.55rem 0.95rem 1.15rem 0.95rem !important;
    }
    .hero-headline {
      font-size: 1.85rem !important;
      line-height: 1.18 !important;
    }
    .hero-board__cta-primary,
    .hero-board__cta-wa {
      font-size: 0.8125rem !important;
      padding: 0 0.45rem !important;
      min-height: 48px !important;
      height: 48px !important;
    }
    .hero-board__stage {
      height: 196px !important;
      min-height: 196px !important;
      max-height: 198px !important;
    }
    .hero-vehicle-img,
    .hero-asset--vehicle,
    .hero-asset--training,
    .hero-asset--lesson,
    .hero-asset--instructor,
    .hero-asset--payment,
    [data-category="b"] .hero-vehicle-img,
    [data-category="direksiyon"] .hero-vehicle-img,
    [data-category="ozel-ders"] .hero-vehicle-img,
    [data-category="egitmen"] .hero-vehicle-img,
    [data-category="araclar"] .hero-vehicle-img,
    [data-category="odeme"] .hero-vehicle-img {
      max-height: 185px !important;
      max-width: 95vw !important;
    }
  }
}

/* ==================================================
   TABLET DEVICES (640px - 1023px)
================================================== */
@media (min-width: 640px) and (max-width: 1023px) {
  :root {
    --container-gutter: 1.25rem;
  }


}

/* ==================================================
   LARGE DESKTOP (>= 1280px)
================================================== */
@media (min-width: 1280px) {
  .hero-headline {
    font-size: 3.125rem;
  }
}

/* ==================================================
   NO HORIZONTAL OVERFLOW GUARD (clip enables sticky header on desktop)
================================================== */
html, body {
  overflow-x: clip !important;
  max-width: 100%;
}

/* ==================================================
   PRINT STYLES
================================================== */
@media print {
  .site-header,
  .site-footer,
  .mobile-action-bar,
  .fixed-contact-dock,
  .btn,
  .video-modal {
    display: none !important;
  }

  body {
    background-color: #FFFFFF;
    color: #000000;
  }

  .section {
    padding: 1.5rem 0;
  }
}

/* ==================================================
   SUBTLE MOTION PASS: MOBILE MOTION TUNING (< 768px)
================================================== */
@media (max-width: 767px) {
  .reveal-on-scroll {
    transform: translateY(8px);
    transition-duration: 320ms;
  }

  .hero-board.is-changing .hero-vehicle-wrap.is-switching-vehicle {
    transform: translateX(8px);
  }
}

/* ==================================================
   ACCESSIBILITY: PREFERS REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-board__content,
  .hero-vehicle-wrap,
  .hero-visual-stage,
  .hero-info-strip {
    transform: none !important;
    transition: opacity 0.15s ease !important;
  }

  .hero-board.is-changing .hero-board__content,
  .hero-board.is-changing .hero-vehicle-wrap.is-switching-vehicle {
    transform: none !important;
  }

  .btn:hover,
  .hero-mod-card:hover,
  .license-cat-card:hover,
  .instructor-card:hover,
  .leadership-card:hover,
  .video-card-item:hover,
  .btn:hover .btn__arrow,
  .hero-board__cta-primary:hover svg,
  .team-cta-btn-primary:hover svg,
  .contact-btn-submit:hover svg {
    transform: none !important;
  }

  .fixed-contact-dock,
  .fixed-contact-dock.is-scrolled,
  .fixed-contact-dock__loc,
  .fixed-contact-dock__divider,
  .dock-btn--call,
  .dock-btn--map,
  .fixed-contact-dock__inner {
    transition: opacity 0.05s ease !important;
    transform: translate(-50%, 0) scale(1) !important;
  }
}