/* Cross-device baseline for every B2C, B2B and admin screen. */
:root { --app-tap-target: 44px; }
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
/* A fixed 320px minimum creates horizontal scrolling when a vertical scrollbar
   reduces the usable viewport. Layouts must also work below that width. */
body { min-width: 0; overflow-wrap: break-word; }
main, section, article, aside, header, footer, .container, [class*="grid"] > *, [class*="flex"] > * { min-width: 0; }
img, video, canvas, svg, iframe, embed, object { max-inline-size: 100%; }
input, select, textarea, button { max-inline-size: 100%; }
textarea { min-height: 5rem; resize: vertical; }
pre, code, .break-all, .break-words { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
@media (pointer: coarse) { button, .btn, [role="button"], input[type="checkbox"], input[type="radio"], select, input[type="date"], input[type="time"] { min-height: var(--app-tap-target); } input[type="checkbox"], input[type="radio"] { min-width: 1.1rem; min-height: 1.1rem; } }
@media (max-width: 1023px) { .admin-screen .container { width: 100%; padding-inline: max(1rem, env(safe-area-inset-left, 0px)); } .admin-screen main, .admin-screen .card { min-width: 0; } .admin-screen header { padding-inline: max(.75rem, env(safe-area-inset-left, 0px)); } }
@media (max-width: 767px) { body { line-height: 1.5; } .container { padding-inline: 1rem; } input, select, textarea { font-size: 16px !important; } .card { border-radius: .75rem; } .admin-screen .btn, .admin-screen button { width: auto; min-height: var(--app-tap-target); } .admin-screen .overflow-auto, .admin-screen .overflow-x-auto { max-width: 100%; -webkit-overflow-scrolling: touch; } .admin-screen table { max-width: 100%; } .admin-screen th, .admin-screen td { overflow-wrap: anywhere; vertical-align: top; } .admin-footer { padding-bottom: env(safe-area-inset-bottom, 0px); } }
@media (max-width: 420px) { .container { padding-inline: .75rem; } .admin-screen .card { padding: 1rem; } .admin-screen h1, .admin-screen .text-3xl { font-size: 1.5rem; line-height: 1.25; } }
@media (prefers-contrast: more) { .card, input, select, textarea, button { border-color: currentColor; } }
@media print { .page-loader, nav, .admin-footer, [data-print-hidden] { display: none !important; } body { background: #fff !important; color: #000 !important; } a[href]::after { content: " (" attr(href) ")"; font-size: .75em; } }

/* App-like mobile navigation. Rendered only on B2C screens by the shared header. */
.app-mobile-nav { display: none; }
@media (max-width: 767px) {
  .public-screen { padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }
  .app-mobile-nav {
    position: fixed;
    z-index: 90;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    padding: .35rem max(.5rem, env(safe-area-inset-right, 0px)) calc(.35rem + env(safe-area-inset-bottom, 0px)) max(.5rem, env(safe-area-inset-left, 0px));
    background: #fff;
    background: color-mix(in srgb, #fff 94%, transparent);
    border-top: 1px solid rgba(148, 163, 184, .3);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .app-mobile-nav__item {
    display: flex;
    min-width: 0;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex-direction: column;
    padding: .25rem;
    border-radius: .75rem;
    color: #64748b;
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .app-mobile-nav__item .material-symbols-outlined { font-size: 1.35rem; }
  .app-mobile-nav__item.is-active { color: #1d4ed8; background: #eff6ff; }
  .app-mobile-nav__item:active { transform: scale(.96); background: #e2e8f0; }
  .admin-screen .admin-mobile-menu-trigger {
    bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
    left: calc(.85rem + env(safe-area-inset-left, 0px));
    box-shadow: 0 10px 26px rgba(15, 23, 42, .28);
  }
}

/* Footer layout must not depend solely on Tailwind CDN responsive variants.
   These rules are the stable fallback at the product's desktop breakpoint. */
[x-cloak] { display: none !important; }
.travel-footer { overflow: clip; }
.footer-main-grid > *, .footer-menu-grid > * { min-width: 0; }
.footer-back-to-top { -webkit-tap-highlight-color: transparent; }
@media (min-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: minmax(15.625rem, 1fr) minmax(0, 1.7fr) minmax(15.625rem, 1fr);
    gap: 3rem;
  }
  .footer-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-service-row { flex-direction: row; align-items: center; gap: 2rem; }
  .footer-bottom-content { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: start; }
  .footer-back-to-top { left: auto; right: 1.5rem; bottom: 1.5rem; width: 2.75rem; height: 2.75rem; }
}
@media (min-width: 1280px) { .footer-main-grid { gap: 3.5rem; } }
@media (max-width: 1023px) {
  .footer-back-to-top { left: max(1.5rem, env(safe-area-inset-left, 0px)); right: auto; bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Hero search modules ----------------------------------------------------
   Cars, ferries, transfers and buses have richer criteria than stays and
   flights. These explicit grids keep them equally compact even when a CDN
   responsive utility is delayed or a viewport sits between breakpoints. */
.hero-search-form.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
.hero-search-form .hero-search-grid { gap: .75rem; }
.hero-search-form .form-control { gap: .25rem; }
.hero-search-form .form-control > label {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .2rem;
  font-size: .875rem;
  line-height: 1.25;
}
.hero-search-form .form-control > label i { font-size: 1rem; }
.hero-search-form :is(.input, .input-with-icon, select) { min-height: 2.75rem; }
.hero-search-form fieldset { min-width: 0; padding: .65rem .75rem; }
.hero-search-form fieldset legend { line-height: 1; }
.hero-search-form fieldset label { line-height: 1.2; }
.hero-search-form fieldset .input { min-height: 2.5rem; }
.hero-search-trip-type > label { min-height: 2.5rem; padding: .5rem .75rem; }
.hero-search-secondary {
  gap: .75rem;
  padding-top: .75rem;
}
.hero-search-form > .flex.justify-end { margin-top: 0; }
.hero-search-form > .flex.justify-end .btn { min-height: 2.75rem; }
.hero-search-form { container-type: inline-size; }
/* Native time pickers need the same compact, predictable footprint as the
   date controls; this prevents their icon/padding area from wasting a column. */
.hero-search-form--shuttle .hero-search-date-time :is(input[type="time"], .input) { min-width: 0; }
.hero-search-form--shuttle input[type="time"] { padding-inline: .7rem; font-variant-numeric: tabular-nums; }

/* The available hero width can shrink well below the browser width when the
   administration sidebar or an embedded preview is open. Container queries
   react to that real space and override viewport-only Tailwind variants. */
@container (max-width: 58rem) {
  body .hero-search-grid--standard,
  body .hero-search-grid--cars,
  body .hero-search-grid--ferries,
  body .hero-search-grid--shuttle,
  body .hero-search-grid--bus { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body .hero-search-grid--standard > *,
  body .hero-search-grid--cars > *,
  body .hero-search-grid--ferries > *,
  body .hero-search-grid--shuttle > *,
  body .hero-search-grid--bus > * { grid-column: span 1; }

  body .hero-search-form--cars .hero-search-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
    padding-top: 0;
  }
  body .hero-search-form--cars .hero-search-secondary .form-control,
  body .hero-search-form--cars .hero-search-secondary .btn { grid-column: span 1; width: 100%; }
  body .hero-search-form--ferries .hero-search-passengers,
  body .hero-search-form--ferries .hero-search-vehicle,
  body .hero-search-form--shuttle .hero-search-passengers { grid-column: span 1; }
}

@container (max-width: 34rem) {
  body .hero-search-grid--standard,
  body .hero-search-grid--cars,
  body .hero-search-grid--ferries,
  body .hero-search-grid--shuttle,
  body .hero-search-grid--bus,
  body .hero-search-form--cars .hero-search-secondary { grid-template-columns: minmax(0, 1fr); }
  body .hero-search-grid--standard > *,
  body .hero-search-grid--cars > *,
  body .hero-search-grid--ferries > *,
  body .hero-search-grid--shuttle > *,
  body .hero-search-grid--bus > *,
  body .hero-search-form--cars .hero-search-secondary .form-control,
  body .hero-search-form--cars .hero-search-secondary .btn { grid-column: span 1; }
  body .hero-search-form fieldset .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .hero-search-form .hero-search-grid { gap: .875rem; }
  .hero-search-secondary { align-items: end; }
}

@media (min-width: 1024px) {
  body .hero-search-grid--cars {
    grid-template-columns: minmax(15rem, 2fr) repeat(4, minmax(8.5rem, 1fr));
  }
  body .hero-search-grid--cars .hero-search-location { grid-column: span 1; }
  body .hero-search-form--cars .hero-search-secondary {
    display: grid;
    grid-template-columns: minmax(15rem, 2fr) repeat(4, minmax(8.5rem, 1fr));
    border-top: 0;
    padding-top: 0;
  }
  body .hero-search-form--cars .hero-search-secondary .form-control { grid-column: span 2; width: auto; }
  body .hero-search-form--cars .hero-search-secondary .btn { grid-column: 5 / span 1; width: 100%; min-width: 0; }

  body .hero-search-grid--ferries,
  body .hero-search-grid--shuttle { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body .hero-search-grid--ferries .hero-search-route,
  body .hero-search-grid--shuttle .hero-search-route { grid-column: span 2; }
  body .hero-search-grid--ferries .hero-search-passengers,
  body .hero-search-grid--ferries .hero-search-vehicle { grid-column: span 3; }
  body .hero-search-grid--shuttle .hero-search-passengers { grid-column: span 2; }

  body .hero-search-grid--bus { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body .hero-search-grid--bus > .form-control:nth-child(1),
  body .hero-search-grid--bus > .form-control:nth-child(2) { grid-column: span 2; }
  body .hero-search-grid--bus > .form-control:nth-child(3),
  body .hero-search-grid--bus > .form-control:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 767px) {
  .hero-search-form .hero-search-grid { gap: .7rem; }
  .hero-search-trip-type { gap: .5rem; }
  .hero-search-trip-type > label { flex: 1 1 auto; justify-content: center; }
  .hero-search-form fieldset { padding: .65rem; }
  .hero-search-form fieldset .grid { gap: .5rem; }
  .hero-search-form > .flex.justify-end .btn { width: 100%; }
}

/* Header adapts to the width it actually receives. This prevents labels such
   as Hizmetler, Şirket, Bloglar, Turkish and TRY from breaking into letters
   when an admin sidebar, split view or browser panel reduces the content area. */
.site-header__content { container-type: inline-size; }
.site-header__inner,
.site-header__primary,
.site-header__actions { min-width: 0; }
.site-header__brand { flex: 0 0 auto; }
.site-header__brand img { max-width: min(8.75rem, 18cqw); }
.site-header__nav,
.site-header__actions { white-space: nowrap; }
.site-header__nav > *,
.site-header__actions > * { flex: 0 0 auto; }
.site-header__nav :is(a, button),
.site-header__actions :is(a, button) { white-space: nowrap; }

@container (max-width: 68rem) {
  .site-header__inner { gap: .5rem; }
  .site-header__primary { gap: .4rem; }
  .site-header__nav { gap: 0; }
  .site-header__nav :is(a, button) { padding-inline: .45rem; font-size: clamp(.72rem, 1.4cqw, .875rem) !important; }
  .site-header__actions { gap: .35rem; }
  .site-header__actions .btn,
  .site-header__locale > button { padding-inline: .6rem; font-size: clamp(.72rem, 1.4cqw, .875rem) !important; }
}

@container (max-width: 58rem) {
  .site-header__nav { display: none !important; }
  .site-header__mobile-toggle { display: inline-flex !important; }
}

@container (max-width: 46rem) {
  .site-header__brand img { max-width: 7.1rem; }
  .site-header__locale > button > span:nth-child(2) { display: none; }
  .site-header__actions .btn > span:not(.material-symbols-outlined) { display: none; }
  .site-header__actions .btn { min-width: 2.7rem; justify-content: center; padding-inline: .55rem; }
}

/* Viewport fallback for side-by-side browser and admin-shell sessions where
   legacy utility breakpoints would otherwise keep five/six-column forms. */
@media (min-width: 768px) and (max-width: 1279px) {
  body .hero-search-grid--cars,
  body .hero-search-grid--ferries,
  body .hero-search-grid--shuttle,
  body .hero-search-grid--bus { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .hero-search-grid--cars > *,
  body .hero-search-grid--ferries > *,
  body .hero-search-grid--shuttle > *,
  body .hero-search-grid--bus > * { grid-column: span 1 !important; }
  body .hero-search-form--cars .hero-search-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; padding-top: 0; }
  body .hero-search-form--cars .hero-search-secondary .form-control,
  body .hero-search-form--cars .hero-search-secondary .btn { grid-column: span 1; width: 100%; }
  body .hero-search-grid--ferries .hero-search-submit { grid-column: span 1 !important; }
  body .hero-search-grid--ferries .hero-search-submit .btn { width: 100%; }
}

/* Shared B2C module hero: same visual shell as flight search, with each
   module retaining only its own search criteria. */
.module-search-hero {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: 25rem;
  /* Hero içindeki seçim listeleri, sonraki içerik katmanının üzerinde
     açılabilmelidir. Arka plan kırpımı yerine görünür taşma kullanılır. */
  overflow: visible;
  background: #182b75 center / cover no-repeat;
  isolation: isolate;
}
.module-search-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(15 23 42 / .34), rgb(30 64 175 / .20)); }
.module-search-hero__inner { width: min(100%, 76rem); margin-inline: auto; padding: 2rem 1rem; }
.module-search-hero__card { border-radius: 1rem; background: #fff; padding: clamp(1rem, 2.2vw, 1.5rem); box-shadow: 0 16px 40px rgb(15 23 42 / .22); }
@media (max-width: 767px) {
  .module-search-hero { min-height: auto; }
  .module-search-hero__inner { padding: 1.25rem .75rem; }
  .module-search-hero__card { border-radius: .875rem; }
}
