/* Utility Classes */
.blur-bg { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gpu-accelerate {
 -webkit-transform: translateZ(0); 
 transform: translateZ(0);
 will-change: transform;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 perspective: 1000px;
}

/* Mobile Main Styles - TouriumPrime */

/* Font Awesome Reset for Mobile */
@media only screen and (max-width: 1024px) {

 .fas,
 .fab,
 .far,
 .fa,
 .fa-solid,
 .fa-brands,
 .fa-regular {
 font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
 font-weight: 900 !important;
 display: inline-block !important;
 font-style: normal !important;
 font-variant: normal !important;
 text-rendering: auto !important;
 -webkit-font-smoothing: antialiased !important;
 }

 .fab,
 .fa-brands {
 font-weight: 400 !important;
 }
}

/* Hide PC elements on mobile */
@media only screen and (max-width: 1024px) {

 .pc-only,
 #recommended-tours,
 #recommended-locations,
 #recommended-cars,
 .bus-page-container,
 .ucak-hero-section,
 .scroll-down-indicator,
 .mosaic-wrapper,
 aside.filtre-karti,
 .search-summary-bar,
 main.main-content-area {
 display: none !important;
 }

 /* Uçak sayfasında sonuç listesi mobilde görünmeli */
 body.ucak-page .bus-page-container,
 body.ucak-page main.main-content-area {
 display: block !important;
 }

 body.ucak-page .bus-page-container {
 width: 100% !important;
 padding: 10px !important;
 box-sizing: border-box !important;
 }

 body.ucak-page main.main-content-area {
 width: 100% !important;
 display: block !important;
 }

 /* Reset Body for Mobile (Now Plain White) */
 /* Reset Body for Mobile (Frosted Glass Effect) */
 body {
 margin: 0;
 padding: 0;
 background: #f8fafc !important;
 /* Plain BG for content below header */
 background-size: auto !important;
 background-position: top left !important;
 /* background-attachment: fixed removed to prevent scroll glitches on mobile */
 transition: padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 color: #222;
 font-family: 'Comfortaa', sans-serif !important;

 overflow-x: hidden;
 padding-bottom: 70px;
 }

 body::before {
 content: "";
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(248, 250, 252, 1);
 z-index: -1;
 pointer-events: none;
 /* GPU Acceleration */
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 }

 /* Reveal Mobile Elements */
 .mobile-only {
 display: block !important;
 }
}

/* Hide Mobile elements on Desktop */
@media only screen and (min-width: 1025px) {
 .mobile-only {
 display: none !important;
 }
}

/* --- Mobile Header Styling --- */
.mobile-header {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 70px;
 z-index: 9999;
 border-bottom: none;
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 20px;
 box-sizing: border-box;
 padding: 0;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 background: rgba(236, 173, 41, 0.95);
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 -webkit-transform: translateY(0);
 transform: translateY(0);
 will-change: transform;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-header.tp-header-transparent {
 background: transparent !important;
 -webkit-backdrop-filter: none !important;
 backdrop-filter: none !important;
 box-shadow: none !important;
}

.mobile-header.header-hidden {
 transform: translateY(-100%) !important;
}

/* .home-page .mobile-header - index.php inline style yönetiyor */

body.has-banner .mobile-header {
 margin-top: 0;
}

/* App Banner - Premium Style */
/* Redundant banner styles removed. Spacing handled by app_banner_mobile.css and body padding. */

.mobile-header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
 width: 100%;
 padding: 0 15px;
 /* Internal spacing for logo and icons */
 box-sizing: border-box;
}

.mobile-logo img {
 height: 30px;
 width: auto;
 filter: brightness(0) invert(1);
 object-fit: contain;
 display: block;
}

.mobile-logo a {
 display: inline-block;
 background: transparent !important;
 padding: 0;
 border-radius: 0;
 text-decoration: none;
 box-shadow: none;
}

.mobile-actions {
 display: flex;
 align-items: center;
 gap: 12px;
}

.header-market-icons {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-right: 2px;
}

/* Dil seçici: yuvarlak bayrak, tıklanınca modal açılır */
.header-lang-wrap {
 display: flex;
 align-items: center;
 margin-right: 4px;
}

.header-lang-trigger {
 padding: 0;
 border: none;
 background: transparent;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
}

.header-lang-flag-pill {
 width: auto;
 min-width: 34px;
 height: 34px;
 padding: 0 8px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.4);
 border: 1.5px solid rgba(255, 255, 255, 0.6);
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 transition: all 0.2s ease;
}

.header-lang-text {
 font-size: 13px;
 font-weight: 800;
 color: #fff;
 letter-spacing: 0.5px;
}

.header-lang-flag-pill:active {
 transform: scale(0.9);
}


/* Dil seçim modali */
.tp-lang-modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 -webkit-backdrop-filter: blur(6px);
 backdrop-filter: blur(6px);
 z-index: 10002;
 opacity: 0;
 visibility: hidden;
 transition:
 opacity 0.25s ease,
 visibility 0.25s ease;
}

.tp-lang-modal-overlay.active {
 opacity: 1;
 visibility: visible;
}

.tp-lang-modal {
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%) scale(0.95);
 width: calc(100% - 40px);
 max-width: 340px;
 z-index: 10003;
 opacity: 0;
 visibility: hidden;
 transition:
 opacity 0.25s ease,
 visibility 0.25s ease,
 transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tp-lang-modal.active {
 opacity: 1;
 visibility: visible;
 transform: translate(-50%, -50%) scale(1);
}

.tp-lang-modal-inner {
 background: #fff;
 border-radius: 20px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 overflow: hidden;
}

.tp-lang-modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 20px;
 border-bottom: 1px solid #eee;
 background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.tp-lang-modal-header h3 {
 margin: 0;
 font-size: 18px;
 font-weight: 700;
 color: #fff;
}

.tp-lang-modal-close {
 width: 36px;
 height: 36px;
 border: none;
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
 font-size: 24px;
 line-height: 1;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 transition: background 0.2s;
}

.tp-lang-modal-close:hover {
 background: rgba(255, 255, 255, 0.25);
}

.tp-lang-modal-body {
 padding: 12px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.tp-lang-option {
 display: flex;
 align-items: center;
 gap: 14px;
 width: 100%;
 padding: 14px 16px;
 border: 1px solid rgba(0, 0, 0, 0.05);
 border-radius: 14px;
 background: #fdfdfd;
 color: #1a1a1a;
 font-size: 15px;
 font-weight: 600;
 text-align: left;
 cursor: pointer;
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tp-lang-option:hover {
 background: #f8f9fa;
 border-color: #ecad29;
 transform: translateX(4px);
}

.tp-lang-option:active {
 transform: scale(0.97);
}

.tp-lang-abbr {
 width: 36px;
 height: 36px;
 border-radius: 10px;
 background: #f1f5f9;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: 800;
 color: #475569;
 flex-shrink: 0;
 border: 1px solid #e2e8f0;
}

.tp-lang-option:hover .tp-lang-abbr {
 background: #ecad29;
 color: #fff;
 border-color: #ecad29;
}

.tp-lang-option span {
 flex: 1;
}

.tp-lang-option small {
 font-size: 11px;
 font-weight: 600;
 color: #888;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.tp-lang-option:hover small {
 color: rgba(0, 0, 0, 0.6);
}

.tp-lang-option-soon {
 opacity: 0.9;
}

/* PC nav içinde dil tetikleyici */
.header-lang-trigger-pc {
 margin: 0;
 display: inline-flex;
 align-items: center;
}

.header-lang-trigger-pc .header-lang-flag-pill {
 width: auto;
 height: 32px;
 min-width: 40px;
 border-radius: 8px;
}

.header-lang-trigger-pc .header-lang-text {
 font-size: 12px;
}

.h-app-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 color: #fff;
 text-decoration: none;
 padding: 0;
 height: auto;
 min-width: 0;
 border: none;
 transition: transform 0.2s ease;
}

.h-app-circle {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.3);
 color: #fff;
 font-size: 16px;
 flex-shrink: 0;
 border: 1.5px solid rgba(255, 255, 255, 0.8);
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 transition: all 0.2s ease;
}

.h-app-btn:active .h-app-circle {
 transform: scale(0.9);
 background: rgba(0, 0, 0, 0.5);
}

.h-app-content {
 display: none;
}

.h-app-content .app-small {
 font-size: 5px;
 /* Reduced from 6px */
 font-weight: 600;
 text-transform: uppercase;
 opacity: 0.8;
}

.h-app-content .app-label {
 font-size: 8px;
 /* Reduced from 9px */
 font-weight: 900;
 white-space: nowrap;
}

.mobile-menu-toggle {
 background: transparent !important;
 border: none !important;
 color: #000 !important;
 /* Dark text on yellow background */
 font-size: 24px !important;
 /* Adjusted from 28px for better proportion */
 padding: 0 8px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 cursor: pointer !important;
 box-shadow: none !important;
 width: 44px !important;
 /* Circle-like feel */
 height: 44px !important;
 border-radius: 50% !important;
 transition: all 0.2s ease !important;
 margin-left: 5px !important;
}

.mobile-menu-toggle:active {
 background: rgba(0, 0, 0, 0.1) !important;
 transform: scale(0.9);
}

/* Specific button icons */
.h-app-btn i.fab {
 margin-right: 0;
}

.mobile-auth-btn {
 font-size: 13px;
 font-weight: 600;
 color: #000;
 text-decoration: none;
 padding: 8px 14px;
 border-radius: 8px;
 transition: all 0.3s ease;
 white-space: nowrap;
}

.mobile-login-btn {
 color: #000;
 background: transparent;
}

.mobile-register-btn {
 background: #000;
 color: #ecad29;
}

/* --- Mobile Filter & Explorer Area --- */
@media only screen and (max-width: 1024px) {
 .mobile-filter-area {
 width: 100% !important;
 max-width: 100% !important;
 padding: 110px 15px 25px 15px !important;
 margin: 0 auto !important;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 gap: 0 !important;
 z-index: 900;
 position: relative !important;
 border-top-left-radius: 0 !important;
 border-top-right-radius: 0 !important;
 border-bottom-left-radius: 35px !important;
 border-bottom-right-radius: 35px !important;
 overflow: hidden !important;
 min-height: 0 !important;
 box-sizing: border-box !important;
 }

 .mobile-filter-area>* {
 width: 100% !important;
 max-width: 400px !important;
 }

 .mobile-filter-area::before {
 content: "" !important;
 position: absolute !important;
 inset: -50% !important;
 background-image: url("../../gorsel/mobil_deniz_kum.png") !important;
 background-size: cover !important;
 background-position: center !important;
 background-repeat: no-repeat !important;
 transform: rotate(90deg) !important;
 z-index: -1 !important;
 }

 .widget-row {
 display: flex;
 gap: 12px !important;
 margin-bottom: 12px !important;
 flex-wrap: nowrap !important;
 width: 100% !important;
 }

 .widget-block {
 flex: 1;
 background: rgba(255, 255, 255, 0.2) !important;
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(236, 173, 41, 0.2);
 border-radius: 10px;
 padding: 0 6px !important;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px !important;
 height: 50px !important;
 min-height: 50px !important;
 border-radius: 10px !important;
 box-sizing: border-box;
 margin: 0;
 }
}

/* Margin handled by gap */

.widget-block.half {
 flex: 1;
 width: auto;
}

.block-icon {
 color: #ecad29;
 font-size: 18px;
 width: 25px;
 /* Increased slightly for better centering */
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
}

.block-content {
 display: flex;
 flex-direction: column;
 flex: 1;
 overflow: hidden;
}

.block-content label {
 font-size: 9px;
 text-transform: uppercase;
 color: #888;
 font-weight: 800;
 margin-bottom: 1px;
 letter-spacing: 0.8px;
}

.block-content label.slogan-heybetli {
 font-size: 16px !important;
 color: #000 !important;
 font-weight: 900 !important;
 letter-spacing: -0.5px !important;
 font-style: italic !important;
 color: #ecad29 !important;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important;
 margin-bottom: 3px !important;
}

.block-content input {
 background: transparent;
 border: none;
 color: #111;
 font-size: 14px;
 font-weight: 600;
 padding: 0;
 width: 100%;
 outline: none;
 font-family: inherit;
 -webkit-appearance: none;
 appearance: none;
}

.block-content input[type="number"] {
 -moz-appearance: textfield;
 appearance: textfield;
}

.block-content input::-webkit-outer-spin-button,
.block-content input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 appearance: none;
 margin: 0;
}

.block-content input::placeholder {
 color: #000 !important;
 font-weight: 600 !important;
 font-style: normal !important;
 opacity: 0.5 !important;
 font-size: 14px !important;
}

#periodSelect {
 font-weight: 600 !important;
 font-style: normal !important;
 color: #111 !important;
 font-size: 14px !important;
}

.block-value {
 font-size: 13px;
 font-weight: 600;
 color: #111;
 white-space: nowrap;
}

.widget-search-btn {
 width: 100%;
 background: #ecad29 !important;
 color: #000;
 border: none;
 border-radius: 10px;
 padding: 0;
 height: 50px;
 font-size: 13px;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 margin-top: 10px;
 box-shadow: 0 4px 12px rgba(236, 173, 41, 0.1);
 cursor: pointer;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
}

.widget-search-btn:active {
 transform: scale(0.96);
 box-shadow: 0 4px 15px rgba(236, 173, 41, 0.3);
}

.mobile-filter-area .explorer-chips {
 display: flex !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
 gap: 8px !important;
 padding: 0 0 15px 0 !important;
 width: 92% !important;
 max-width: 400px !important;
 margin: 0 auto !important;
 box-sizing: border-box;
 background: transparent !important;
 -webkit-backdrop-filter: none !important;
 backdrop-filter: none !important;
 border: none !important;
 box-shadow: none !important;
 overflow: visible !important;
}

.mobile-filter-area .explorer-chip {
 width: calc(25% - 8px) !important;
 min-width: 0 !important;
 height: 60px !important;
 background: rgba(255, 255, 255, 0.1) !important;
 border: 1px solid rgba(255, 255, 255, 0.2) !important;
 color: #fff !important;
 padding: 6px !important;
 border-radius: 16px !important;
 font-size: 10px;
 font-weight: 700;
 white-space: normal;
 text-align: center;
 display: flex !important;
 flex-direction: column !important;
 align-items: center;
 justify-content: center;
 gap: 4px;
 -webkit-backdrop-filter: blur(5px);
 backdrop-filter: blur(5px);
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
 opacity: 1;
}

.mobile-filter-area .explorer-chip i {
 font-size: 22px;
 /* Larger icons */
 line-height: 1;
}

.mobile-filter-area .explorer-chip .tp-chip-svg {
 width: 38px;
 height: 38px;
 display: block;
 /* SVG canvas içinde boşluk varsa daha dolu görünsün */
 object-fit: cover;
 filter: none !important;
}

/* SVG ile yazı arası daha az boşluk */
.mobile-filter-area .explorer-chip {
 gap: 2px !important;
}

/* Sadece Rota Oluştur yazısı biraz yukarı */
.mobile-filter-area .tp-chip-rota .tp-chip-label {
 position: relative;
 top: -2px;
}

/* Rota Oluştur SVG: saat yönünde yavaş dönsün */
.mobile-filter-area .tp-chip-rota .tp-chip-svg {
 transform-origin: 50% 50%;
 animation: tpChipSpin 18s linear infinite;
}

@keyframes tpChipSpin {
 from {
 transform: rotate(0deg);
 }

 to {
 transform: rotate(360deg);
 }
}

@media (prefers-reduced-motion: reduce) {
 .mobile-filter-area .tp-chip-rota .tp-chip-svg {
 animation: none;
 }
}

.explorer-chips::-webkit-scrollbar {
 display: none;
}

.explorer-chip.active {
 background: rgba(255, 255, 255, 0.3) !important;
 border-color: rgba(255, 255, 255, 0.6) !important;
 color: #fff !important;
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.explorer-chip.active i {
 color: #ecad29 !important;
 transform: scale(1.1);
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.explorer-chip:active {
 transform: scale(0.95);
}

/* --- Mobile Stories (Seamless Mosaic) --- */
.mobile-stories {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 gap: 20px !important;
 /* Increased gap between circular items */
 overflow-x: auto;
 padding: 10px 0 !important;
 /* No side padding for full width */
 margin: 15px 0 !important;
 /* Vertical spacing above and below */
 scrollbar-width: none;
 -ms-overflow-style: none;
 width: 100% !important;
 box-sizing: border-box;
 border: none !important;
 background: transparent;
}

.mobile-stories::-webkit-scrollbar {
 display: none;
}

.story-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0;
 cursor: pointer;
 flex-shrink: 0;
 width: 90px;
 /* Matched to ring size */
 box-sizing: border-box;
}

.story-ring {
 width: 90px;
 height: 90px;
 border-radius: 50% !important;
 border: none !important;
 padding: 0;
 margin: 0 !important;
 display: flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 box-sizing: border-box;
 position: relative;
}

.story-circle {
 width: 100%;
 height: 100%;
 border-radius: 50% !important;
 background: #222;
 overflow: hidden;
 position: relative;
 border: 3px solid #ecad29 !important;
 box-sizing: border-box;
 /* ADDED */
}

.story-name {
 display: block;
 width: 100%;
 text-align: center;
 color: #333;
 font-size: 11px;
 font-weight: 600;
 margin-top: 8px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 opacity: 0.9;
}

.story-circle img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s;
}

/* Dark overlay for readability */
.story-circle::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.8));
 z-index: 1;
}

/* Removed old story-name class usage */

/* --- Mobile Travel Search (PC Clone - Scaled Horizontal) --- */
.mobile-travel-pc-clone {
 width: 100%;
 overflow: hidden;
 /* Crop any excess */
 padding: 10px 0;
 margin-bottom: 20px;
 display: flex;
 justify-content: center;
 background: transparent;
 height: 380px !important;
 /* Fixed height for the area */
}

/* Scale down the cloned component to fit mobile width */
.mobile-travel-pc-clone .travel-search-section-m {
 display: flex !important;
 flex-direction: row !important;
 /* Keep original horizontal layout */

 /* Magic Scaling Formula */
 transform: scale(0.4);
 /* Shrink to 40% size */
 transform-origin: top left;

 /* Expand width so when shrunk it fits limits */
 width: 250% !important;
 /* 100% / 0.40 = 250% */
 height: auto !important;

 margin-left: 0;
 gap: 0 !important;
 margin-top: 0 !important;
 /* Remove top margin from base css */
}

/* Ensure inner texts are legible-ish */
.mobile-travel-pc-clone .ts-panel-wrapper-m {
 width: auto !important;
 /* Let flex handle width */
 height: 600px !important;
 /* Force a height */
 margin: 0 !important;
 border-radius: 0 !important;
 flex: 1 !important;
}

/* Specific fix for active panel to grow */
.mobile-travel-pc-clone .ts-panel-wrapper-m.active {
 flex: 5 !important;
 min-width: 300px !important;
}

/* Hide clutter */
.mobile-travel-pc-clone .ts-content-container-m p {
 display: none !important;
}

.mobile-travel-pc-clone .ts-content-container-m h2 {
 font-size: 28px !important;
 white-space: nowrap;
}

.mobile-travel-pc-clone .ts-link-btn-m {
 font-size: 24px !important;
 padding: 15px 30px !important;
 height: 80px !important;
 /* Larger button for scale */
}

.mobile-travel-pc-clone .ts-link-btn {
 font-size: 24px !important;
 padding: 15px 30px !important;
}

/* --- Story Viewer Overlay --- */
.story-viewer {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #000;
 z-index: 100000;
 /* Above everything */
 display: none !important;
 /* Force hidden by default */
}

/* Add active class in JS to show it */
.story-viewer.active {
 display: block !important;
}

.story-image-container {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 background: #000;
 /* Clean background */
}

.story-image-container img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}

.story-caption {
 position: absolute;
 bottom: 50px;
 left: 0;
 width: 100%;
 text-align: center;
 color: #fff;
 font-size: 16px;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 pointer-events: none;
 padding: 20px;
 box-sizing: border-box;
}

.story-header {
 position: absolute;
 top: 20px;
 left: 0;
 width: 100%;
 padding: 15px 20px;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: space-between;
 z-index: 20;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

.story-user {
 display: flex;
 align-items: center;
 gap: 10px;
 color: #fff;
 font-size: 14px;
 font-weight: 600;
}

.story-user img {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 border: 1px solid rgba(255, 255, 255, 0.3);
}

.story-time {
 font-weight: 400;
 opacity: 0.7;
 margin-left: 5px;
}

.story-close {
 background: none;
 border: none;
 color: #fff;
 font-size: 24px;
 cursor: pointer;
 padding: 5px;
}

/* Progress Bars */
.story-progress-bar {
 position: absolute;
 top: 10px;
 left: 10px;
 right: 10px;
 display: flex;
 gap: 5px;
 z-index: 30;
}

.progress-segment {
 flex: 1;
 height: 2px;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 2px;
 overflow: hidden;
}

.progress-fill {
 height: 100%;
 background: #fff;
 width: 0%;
 /* Transition handled by JS or class */
}

/* --- Mobile Sidebar Menu --- */
.mobile-menu-overlay {
 background: rgba(0, 0, 0, 0.8);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10000;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
 -webkit-backdrop-filter: blur(5px);
 backdrop-filter: blur(5px);
}

.mobile-menu-sidebar {
 position: fixed;
 top: 0;
 right: -300px;
 /* Start hidden right */
 width: 280px;
 height: 100%;
 background: #1a1a1a;
 z-index: 10001;
 /* Above overlay */
 transition: right 0.3s ease;
 display: flex;
 flex-direction: column;
 box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
 border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu-overlay.active {
 opacity: 1;
 pointer-events: auto;
}

.mobile-menu-sidebar.active {
 right: 0;
}

.menu-header {
 height: 70px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 20px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 background: rgba(0, 0, 0, 0.2);
}

.menu-logo-link {
 display: block;
 text-decoration: none;
}

.menu-logo {
 height: 30px;
 filter: brightness(0) invert(1);
}

.menu-close-btn {
 background: none;
 border: none;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 padding: 5px;
}

.menu-items {
 flex: 1;
 overflow-y: auto;
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 15px;
}

.menu-link {
 display: flex;
 align-items: center;
 gap: 15px;
 color: #eee;
 text-decoration: none;
 font-size: 15px;
 font-weight: 500;
 padding: 12px 16px;
 border-radius: 12px;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 border: 1px solid transparent;
}

.menu-link i {
 width: 25px;
 color: #ecad29;
 text-align: center;
}

.menu-user-avatar-container {
 width: 25px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-shrink: 0;
}

.menu-user-avatar-container i {
 width: 100%;
}

.menu-link-with-pp .menu-user-pp {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 border: 1.5px solid #ecad29;
 box-shadow: 0 0 10px rgba(236, 173, 41, 0.2);
}

.menu-link-with-pp {
 gap: 12px;
}

.menu-link:hover,
.menu-link.active {
 background: rgba(236, 173, 41, 0.15);
 color: #ecad29;
 border-color: rgba(236, 173, 41, 0.3);
 padding-left: 20px;
}

.menu-auth-buttons {
 margin-top: 20px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.btn-menu-auth {
 display: block;
 text-align: center;
 padding: 12px;
 border-radius: 8px;
 text-decoration: none;
 font-weight: 600;
}

.btn-menu-auth.login {
 background: rgba(255, 255, 255, 0.05) !important;
 border: 1px solid rgba(255, 255, 255, 0.2) !important;
 color: #fff !important;
 -webkit-backdrop-filter: blur(5px);
 backdrop-filter: blur(5px);
}

.btn-menu-auth.login:hover {
 background: rgba(255, 255, 255, 0.1) !important;
 border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn-menu-auth.register {
 background: linear-gradient(135deg, #ecad29 0%, #ff8a3c 100%) !important;
 color: #000 !important;
 border: none !important;
 box-shadow: 0 4px 15px rgba(236, 173, 41, 0.3);
}

.btn-menu-auth.register:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(236, 173, 41, 0.4);
}

@media only screen and (max-width: 1024px) {

 /* --- Mobile Bottom Nav (Instagram Style) --- */
 .mobile-bottom-nav {
 position: fixed !important;
 bottom: 12px !important;
 top: auto !important;
 left: 12px !important;
 right: 12px !important;
 width: auto !important;
 height: 55px !important;
 background: #ecad29 !important;
 border: 1px solid rgba(0, 0, 0, 0.1) !important;
 border-radius: 28px !important;
 margin: 0 !important;
 padding: 0 !important;
 box-sizing: border-box !important;

 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 justify-content: space-around !important;

 z-index: 9999 !important;
 padding-bottom: 0 !important;

 /* GPU Acceleration - Scroll titremesini önler */
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 will-change: transform !important;
 -webkit-backface-visibility: hidden !important;
 backface-visibility: hidden !important;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
 }

 .nav-item {
 color: rgba(0, 0, 0, 0.45);
 text-decoration: none;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 justify-content: center !important;
 width: 20% !important;
 height: 100% !important;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 gap: 2px !important;
 position: relative;
 }

 .nav-item i {
 font-size: 20px !important;
 transition: transform 0.3s ease;
 }

 .nav-item span {
 font-size: 9px !important;
 font-weight: 800 !important;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 white-space: nowrap !important;
 }

 .nav-item.active {
 color: #000;
 }

 .nav-item.active i {
 transform: translateY(-2px);
 }

 .nav-item.active::after {
 content: "";
 position: absolute;
 bottom: 6px;
 width: 4px;
 height: 4px;
 background: #000;
 border-radius: 50%;
 }

 .nav-item:active {
 transform: scale(0.9);
 }
}

/* --- TURBO FIXES --- */

/* 1. Force Stories Horizontal */
.mobile-stories {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 gap: 0 !important;
 overflow-x: auto !important;
 white-space: nowrap !important;
}

/* 2. Shrink Travel Search Aggressively */
.mobile-travel-pc-clone .travel-search-section-m {
 transform: scale(0.35) !important;
 /* Smaller scale */
 width: 285% !important;
 /* 100 / 0.35 = 285% width*/
 transform-origin: top left !important;
}

.mobile-travel-pc-clone {
 height: 320px !important;
 /* Reduce container height */
}

/* Shrink Texts inside Travel Search */
.mobile-travel-pc-clone .ts-content-container-m h2 {
 font-size: 20px !important;
 /* Much smaller headline */
 margin-bottom: 10px !important;
 white-space: normal !important;
 /* Allow wrapping if needed but scale helps */
 line-height: 1.2 !important;
}

.mobile-travel-pc-clone .ts-link-btn-m {
 height: 40px !important;
 /* Smaller button */
 font-size: 14px !important;
 /* Smaller text */
 padding: 0 20px !important;
 border-radius: 20px !important;
}

/* Hide description text completely to save space */
/* --- TURBO FIXES v2 (Mobile Only Wrapper) --- */
@media only screen and (max-width: 768px) {

 /* 1. Force Stories Horizontal (Strict Mode) */
 body .mobile-stories {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 width: 100% !important;
 gap: 20px !important;
 /* Fixed gaps */
 padding: 20px 15px !important;
 /* Added vertical padding to prevent top clipping */
 margin: 10px 0 !important;
 overflow-x: auto !important;
 white-space: nowrap !important;
 background: transparent !important;
 }

 body .story-item {
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 flex-shrink: 0 !important;
 width: 90px !important;
 /* Smaller circles */
 height: auto !important;
 gap: 5px !important;
 }

 /* 2. Travel Search: Full Width Horizontal but Shorter Height */
 .mobile-travel-pc-clone {
 width: 100vw !important;
 /* Full screen width */
 margin-left: -20px !important;
 /* Counteract padding if parent has it */
 padding: 0 !important;
 overflow: hidden !important;
 display: flex !important;
 justify-content: center !important;
 align-items: flex-start !important;
 height: 280px !important;
 /* Fixed compact height */
 background: transparent !important;
 }

 .mobile-travel-pc-clone .travel-search-section-m {
 transform: scale(0.55) !important;
 /* Scale */
 transform-origin: top center !important;
 width: 182% !important;
 /* 100 / 0.55 = ~182% */
 height: auto !important;
 margin-top: 0 !important;
 box-shadow: none !important;
 }

 .mobile-travel-pc-clone .ts-panel-wrapper-m {
 height: 400px !important;
 }

 .mobile-travel-pc-clone .ts-content-container-m h2 {
 font-size: 24px !important;
 margin-bottom: 5px !important;
 }

 .mobile-travel-pc-clone .ts-link-btn-m {
 height: 50px !important;
 font-size: 16px !important;
 border-radius: 25px !important;
 }
}

/* --- MOBILE SEARCH FILTER UI (New) --- */
@media only screen and (max-width: 1024px) {
 .mobile-search-container {
 padding: 20px;
 background: url("../../gorsel/mobile_flight_bg.png") no-repeat center center;
 background-size: cover;
 background-attachment: fixed;
 min-height: 100vh;
 margin-top: 0;
 border-radius: 0;
 box-shadow: none;

 /* Force Full Width */
 width: 100% !important;
 max-width: none !important;
 margin: 0 !important;
 box-sizing: border-box;
 }

 .m-radio-group {
 display: flex;
 justify-content: center;
 gap: 15px;
 margin-bottom: 20px;
 }

 .m-radio-item {
 display: flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 color: rgba(255, 255, 255, 0.7);
 /* Translucent white for inactive */
 transition: all 0.3s ease;
 }

 .m-radio-item.active {
 color: #ffffff;
 /* Pure white for active */
 }

 .radio-circle {
 width: 18px;
 height: 18px;
 border: 2px solid #cbd5e1;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 }

 .m-radio-item.active .radio-circle {
 border-color: #ecad29;
 }

 .radio-dot {
 width: 10px;
 height: 10px;
 background: #ecad29;
 border-radius: 50%;
 opacity: 0;
 transform: scale(0.5);
 transition: all 0.2s;
 }

 .m-radio-item.active .radio-dot {
 opacity: 1;
 transform: scale(1);
 }

 .m-card-row {
 display: flex;
 gap: 10px;
 margin-bottom: 10px;
 position: relative;
 }

 .m-card,
 .date-card,
 .passenger-card {
 background: #ffffff !important;
 /* Clean White Background */
 -webkit-backdrop-filter: none !important;
 backdrop-filter: none !important;
 border-radius: 16px;
 padding: 15px 10px;
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
 border: 1px solid rgba(255, 255, 255, 0.15) !important;
 position: relative;
 min-height: 80px;
 justify-content: center;
 }

 .m-card:active,
 .date-card:active,
 .passenger-card:active {
 background: rgba(0, 0, 0, 0.55) !important;
 transform: scale(0.98);
 }

 /* All labels in search cards */
 .m-card .lbl,
 .date-card .lbl,
 .location-card .lbl,
 .passenger-card .lbl {
 color: #64748b !important;
 /* Slate 500 for labels */
 font-size: 11px !important;
 margin-bottom: 5px !important;
 font-weight: 700 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.5px !important;
 opacity: 1 !important;
 text-shadow: none !important;
 }

 .location-card .val,
 .m-card .val,
 .date-card .val,
 .passenger-card .val {
 color: #0f172a !important;
 /* Dark Slate for Values */
 font-weight: 800;
 font-size: 18px;
 }

 .m-card span,
 .m-card div,
 .m-card i {
 color: #fff !important;
 }
}

.location-card .main-text {
 font-size: 17px;
 font-weight: 800;
 color: #ffffff;
 margin-bottom: 2px;
}

.location-card .sub-text {
 font-size: 10px;
 color: rgba(255, 255, 255, 0.6);
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 110px;
}

.m-swap-btn {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 36px;
 height: 36px;
 background: #ecad29;
 border: none;
 border-radius: 50%;
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #000;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 font-size: 18px;
}

/* Date Cards */
/* Date Cards Label Handled Above in Unified Block */
.date-card .lbl {
 text-align: center;
}

.date-big {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
}

.day-num {
 font-size: 34px;
 font-weight: 800;
 line-height: 1;
 color: #ffffff;
 letter-spacing: -1px;
}

.day-meta {
 display: flex;
 flex-direction: column;
 font-size: 10px;
 text-align: left;
 font-weight: 600;
 color: rgba(255, 255, 255, 0.8);
 line-height: 1.2;
}

.date-middle-icon {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 color: #94a3b8;
 z-index: 5;
 font-size: 18px;
}

.date-card.empty {
 color: #64748b;
 gap: 5px;
 flex-direction: row;
 font-weight: 600;
 font-size: 13px;
}

/* Passenger */
.m-card.passenger-card {
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 text-align: left;
 margin-bottom: 20px;
 height: 65px;
 min-height: 65px;
}

/* HIGH VISIBILITY CONTRAST FIXES FOR YELLOW BG */
/* HIGH VISIBILITY CONTRAST FIXES FOR SUNSET BG */
/* Search Button Style Cleaned */

/* RADIO BUTTON FIXES FOR BRIGHT BG */
.m-radio-item {
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.m-radio-item .radio-circle {
 border: 2px solid rgba(255, 255, 255, 0.6) !important;
 background: rgba(0, 0, 0, 0.2) !important;
}

.m-radio-item.active .radio-circle {
 border-color: #ecad29 !important;
 background: rgba(236, 173, 41, 0.1) !important;
}

.m-radio-item.active .radio-dot {
 background-color: #ecad29 !important;
 box-shadow: 0 0 15px rgba(236, 173, 41, 0.8);
}

/* MULTI CITY ICONS */
/* Handled above */

.add-flight-btn {
 color: #ffffff !important;
 font-weight: 800;
 display: flex;
 align-items: center;
 background: rgba(0, 0, 0, 0.3) !important;
 border: 1px solid rgba(255, 255, 255, 0.1) !important;
 padding: 10px 15px !important;
 font-family: inherit;
 font-size: 14px;
 border-radius: 20px;
 width: fit-content;
 margin-top: 10px;
}

.add-flight-btn i {
 background: #ecad29 !important;
 color: #000 !important;
 /* Yellow plus on black circle */
 border-radius: 50%;
 padding: 4px;
 font-size: 10px;
 margin-right: 8px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 20px;
 height: 20px;
 box-shadow: 0 0 10px rgba(236, 173, 41, 0.4);
}

.mf-remove {
 color: #111 !important;
 opacity: 0.6;
}

/* Arrow between cities in multi view */
.mf-sep {
 color: #111 !important;
 opacity: 0.6;
}

.m-checkbox-row span {
 color: #ffffff !important;
 font-weight: 500;
}

/* FORCE WHITE BG FOR PASSENGER CARD */
/* Glassy Passenger Card Unified Above */
.m-card.passenger-card {
 flex-direction: row;
 justify-content: space-between;
 padding: 0 20px;
 height: 65px;
 min-height: 65px;
}

/* FIX MULTI CITY CARDS TO MATCH STANDARD CARDS */
.mf-card {
 background: #ffffff !important;
 -webkit-backdrop-filter: none !important;
 backdrop-filter: none !important;
 border-radius: 12px !important;
 /* Slightly sharper for density */
 padding: 10px 8px !important;
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
 border: 1px solid #f1f5f9 !important;
 min-height: 70px !important;
 justify-content: center;
 text-decoration: none !important;
 margin-bottom: 0 !important;
}

.mf-card:active {
 background: rgba(0, 0, 0, 0.55) !important;
 transform: scale(0.98);
}

.multi-flight-row {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 10px;
}

.mf-card .mf-code,
.mf-card .mf-date-big {
 color: #64748b !important;
 /* Slate 500 */
 font-weight: 700 !important;
 font-size: 0.7rem !important;
 margin-bottom: 2px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.mf-card .mf-desc,
.mf-card .mf-date-small {
 color: #0f172a !important;
 font-weight: 800 !important;
 font-size: 0.9rem !important;
}

.mf-arrow,
.mf-remove {
 color: #1e293b;
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.8;
}

.mf-remove i {
 color: #ef4444;
 /* Slight red tint for remove */
}

/* FIX CHECKBOX VISIBILITY */
.chk-box {
 width: 22px;
 height: 22px;
 border: 2px solid rgba(255, 255, 255, 0.5) !important;
 background: rgba(0, 0, 0, 0.3) !important;
 margin-right: 12px;
 border-radius: 6px;
 position: relative;
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
}

.m-checkbox-row input:checked~.chk-box {
 background: #ecad29 !important;
 border-color: #ecad29 !important;
}

.chk-box::after {
 content: "\2713";
 color: #000;
 font-weight: 900;
 font-size: 14px;
 display: none;
}

.m-checkbox-row input:checked~.chk-box::after {
 display: block;
}

/* Hide tick unless checked */
.m-checkbox-row input:not(:checked)~.chk-box::after {
 display: none;
}

.m-radio-item {
 color: rgba(255, 255, 255, 0.7) !important;
}

.m-radio-item.active {
 color: #ffffff !important;
 font-weight: 700 !important;
}

/* Ensure Icon Colors in Cards are visible (Dark/Black) */
.m-card i {
 color: #ecad29 !important;
 /* Yellow icons inside white cards */
}

/* Restore text visibility in cards (Dark on White) */
.m-card .lbl {
 color: #64748b !important;
 opacity: 1 !important;
}

.m-card .val,
.m-card span,
.m-card div {
 color: #0f172a !important;
}

.p-left {
 font-size: 14px;
 color: rgba(255, 255, 255, 0.8);
}

.p-strong {
 font-weight: 800;
 color: #ffffff;
}

.p-right {
 font-size: 13px;
 color: #ffffff;
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 700;
}

/* Checkbox */
.m-checkbox-row {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 25px;
 cursor: pointer;
}

/* Custom Checkbox */
.m-checkbox-row input {
 display: none;
}

.chk-box {
 width: 22px;
 height: 22px;
 border: 2px solid rgba(255, 255, 255, 0.8);
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 background: rgba(0, 0, 0, 0.3);
}

.m-checkbox-row input:checked+.chk-box {
 background: #ecad29;
 border-color: #ecad29;
}

.chk-box::after {
 content: "\2713";
 /* Checkmark */
 color: #000;
 font-weight: 900;
 font-size: 14px;
 display: none;
}

.m-checkbox-row input:checked+.chk-box::after {
 display: block;
}

.m-checkbox-row span:last-child {
 font-size: 13px;
 color: #ffffff;
 font-weight: 700;
 text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Search Button Updated */
.m-search-btn {
 width: 100%;
 background: #ecad29 !important;
 /* Yellow */
 color: #000 !important;
 height: 56px;
 border: none !important;
 border-radius: 28px !important;
 font-size: 17px !important;
 font-weight: 900 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 10px !important;
 box-shadow: 0 10px 25px -5px rgba(236, 173, 41, 0.4) !important;
 transition: transform 0.1s !important;
}

.m-search-btn:active {
 transform: scale(0.98) !important;
 box-shadow: 0 5px 15px -3px rgba(236, 173, 41, 0.4) !important;
}

/* Dynamic Return Date Styles */
.return-filled {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 position: relative;
}

.return-close {
 position: absolute;
 top: -8px;
 right: -5px;
 width: 22px;
 height: 22px;
 background: #0f172a;
 /* Dark Blue */
 color: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 cursor: pointer;
 z-index: 10;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Multi City Styles */
.multi-flight-row {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-bottom: 8px;
}

.mf-card {
 background: #fff;
 border: 1px solid #f1f5f9;
 border-radius: 12px;
 padding: 10px 8px;
 flex: 1.2;
 min-width: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 56px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.mf-card:active {
 background: #f8fafc;
}

.mf-code {
 font-size: 14px;
 font-weight: 800;
 color: #0f172a;
 line-height: 1.2;
}

.mf-desc {
 font-size: 9px;
 color: #64748b;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 1.2;
 margin-top: 2px;
}

.mf-arrow {
 color: #0f172a;
 font-size: 12px;
 font-weight: 700;
}

.mf-card.mf-date {
 flex: 0.9;
 align-items: flex-start;
}

.mf-date-big {
 font-size: 14px;
 font-weight: 800;
 color: #0f172a;
}

.mf-date-small {
 font-size: 10px;
 color: #64748b;
 font-weight: 500;
}

.mf-remove {
 color: #94a3b8;
 font-size: 18px;
 padding: 5px;
 cursor: pointer;
}

.add-flight-btn {
 display: flex;
 align-items: center;
 gap: 8px;
 color: #0ea5e9;
 font-weight: 700;
 font-size: 14px;
 background: none;
 border: none;
 padding: 10px 0;
 cursor: pointer;
 margin-bottom: 15px;
 width: 100%;
 justify-content: flex-start;
}

/* Mobile Search Autocomplete Modal */
.mobile-search-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 background: #fff;
 z-index: 20000;
 /* Hidden by default, toggled via JS styles */
 display: none;
 flex-direction: column;
 font-family: 'Comfortaa', sans-serif !important;
}

/* Active class is handled by JS inline display:flex */

.mobile-search-modal.active {
 display: flex;
}

.ms-header {
 padding: 15px 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 1px solid #f1f5f9;
 background: #fff;
}

.ms-close-btn {
 font-size: 24px;
 color: #334155;
 background: none;
 border: none;
 padding: 0;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
}

.ms-title {
 font-size: 18px;
 font-weight: 600;
 color: #0f172a;
}

.ms-search-box {
 padding: 15px 20px;
 background: #fff;
 position: relative;
}

.ms-input {
 width: 100%;
 height: 48px;
 border-radius: 8px;
 border: 1px solid #22c55e;
 /* Green border as per request image clue if typical */
 /* Fallback to brand color or standard gray if green is not desired, but usually flight inputs are clear */
 border: 1px solid #cbd5e1;
 background: #fff;
 padding: 0 15px;
 font-size: 15px;
 color: #0f172a;
 outline: none;
 transition: border-color 0.2s;
}

.ms-input:focus {
 border-color: #ecad29;
}

/* Content Area */
.ms-content {
 flex: 1;
 overflow-y: auto;
 padding: 0;
 background: #fff;
}

/* Popular Cities Section */
.ms-section-title {
 font-size: 11px;
 font-weight: 700;
 color: #64748b;
 margin: 20px 20px 10px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.ms-popular-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 padding: 0 20px 20px;
}

.ms-chip {
 padding: 10px 16px;
 background: #fff;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 font-size: 14px;
 color: #334155;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.1s;
 /* Chip style */
}

.ms-chip:active {
 background: #f1f5f9;
 border-color: #94a3b8;
}

/* List Results */
.ms-item {
 padding: 16px 20px;
 border-bottom: 1px solid #f1f5f9;
 display: flex;
 align-items: center;
 gap: 15px;
 cursor: pointer;
}

.ms-item:active {
 background: #f8fafc;
}

.ms-item-icon {
 width: 32px;
 height: 32px;
 color: #64748b;
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.ms-item-text {
 display: flex;
 flex-direction: column;
}

.ms-city {
 font-size: 15px;
 font-weight: 600;
 color: #0f172a;
}

.ms-airport {
 font-size: 12px;
 color: #64748b;
}

/* FORCE FULL WIDTH OVERRIDES */
html,
body {
 overflow-x: hidden !important;
 width: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
}

body>.mobile-search-container {
 width: 100vw !important;
 max-width: 100vw !important;
 position: relative !important;
 left: 50% !important;
 right: 50% !important;
 margin-left: -50vw !important;
 margin-right: -50vw !important;

 padding-left: 20px !important;
 padding-right: 20px !important;
 box-sizing: border-box !important;
 background-size: cover !important;
 background-position: center !important;
 border-radius: 0 !important;
 /* Fixed height issue */
 padding-bottom: 50px !important;
}

/* MOBILE SLIDER SECTIONS (Tours, Hotels, etc.) */
.mobile-slider-section {
 display: none !important;
}

.mobile-slider-section .mosaic-wrapper {
 display: block !important;
 width: 100%;
 overflow: visible;
 margin: 0 !important;
 padding: 0 !important;
 max-width: none !important;
}

.mobile-slider-section .mosaic-grid {
 display: flex !important;
 flex-wrap: nowrap !important;
 overflow-x: auto !important;
 gap: 15px !important;
 padding: 0 20px 40px 20px !important;
 width: 100% !important;
 box-sizing: border-box !important;
 scroll-behavior: smooth;
}

/* Force items to become cards */
.mobile-slider-section .mosaic-item {
 flex: 0 0 auto !important;
 width: 280px !important;
 height: 350px !important;
 min-height: 350px !important;
 margin-bottom: 0 !important;
 border-radius: 20px !important;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
 background: #fff;
}

/* Hide scrollbar but keep functionality */
.mobile-slider-section .mosaic-grid::-webkit-scrollbar {
 display: none;
}

/* GLOBAL CONTAINER KILLER */
.container,
.uk-container,
.wrapper {
 max-width: none !important;
 padding-left: 0 !important;
 padding-right: 0 !important;
 width: 100% !important;
 margin: 0 !important;
}

html,
body {
 overflow-x: hidden !important;
 width: 100% !important;
}

/* MOBILE RECOMMENDATIONS SECTION */
.m-recommend-section {
 padding: 25px 20px 50px;
 background: #ffffff;
 margin-top: 0px;
 position: relative;
 z-index: 2;
 box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.05);
}

.m-slogan {
 margin-bottom: 20px;
 text-align: left;
}

.m-slogan h2 {
 font-size: 26px;
 font-weight: 900;
 color: #1e293b;
 margin: 0;
 line-height: 1.25;
}

.m-slogan p {
 font-size: 15px;
 color: #64748b;
 margin: 10px 0 0;
 font-weight: 500;
}

.m-section-title {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
}

.m-section-title h3 {
 font-size: 19px;
 font-weight: 800;
 color: #1e293b;
 margin: 0;
}

.m-see-all {
 color: #ecad29;
 font-size: 14px;
 font-weight: 700;
 text-decoration: none;
}

/* Horizontal Manual Scroller */
.tour-slider-outer {
 margin: 0 -20px;
 overflow-x: auto;
 overflow-y: hidden;
 padding: 10px 20px 20px;
 position: relative;
 width: calc(100% + 40px);
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.tour-slider-outer::-webkit-scrollbar {
 display: none;
}

.tour-slider-inner {
 display: flex;
 width: max-content;
 animation: none !important;
 will-change: transform;
 gap: 15px;
}

@keyframes slideInfinite {
 0% {
 transform: translateX(0);
 }

 100% {
 transform: translateX(-50%);
 }
}

.m-tour-card {
 width: 260px;
 background: #fff;
 border-radius: 20px;
 overflow: hidden;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
 border: 1px solid #f1f5f9;
 flex-shrink: 0;
}

.m-tour-img {
 width: 100%;
 height: 160px;
 position: relative;
}

.m-tour-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.m-tour-badge {
 position: absolute;
 top: 12px;
 left: 12px;
 background: rgba(236, 173, 41, 0.95);
 color: #000;
 padding: 5px 12px;
 border-radius: 10px;
 font-size: 11px;
 font-weight: 800;
 text-transform: uppercase;
 -webkit-backdrop-filter: blur(4px);
 backdrop-filter: blur(4px);
}

.m-tour-info {
 padding: 15px;
}

.m-tour-name {
 font-size: 16px;
 font-weight: 800;
 color: #1e293b;
 margin-bottom: 8px;
 height: 1.2em;
 line-height: 1.2;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.m-tour-meta {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 12px;
 font-size: 13px;
 color: #64748b;
}

.m-tour-meta i {
 color: #ecad29;
}

.m-tour-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-top: 1px solid #f1f5f9;
 padding-top: 12px;
}

.m-tour-price {
 display: flex;
 flex-direction: column;
}

.m-price-val {
 font-size: 19px;
 font-weight: 900;
 color: #1e293b;
}

.m-price-lbl {
 font-size: 11px;
 color: #94a3b8;
 text-transform: uppercase;
}

.m-tour-btn {
 background: #f8fafc;
 color: #1e293b;
 padding: 9px 15px;
 border-radius: 12px;
 font-size: 13px;
 font-weight: 700;
 text-decoration: none;
 border: 1px solid #e2e8f0;
}

/* --- Flight Result Cards (Mobile) --- */
@media screen and (max-width: 768px) {
 .bus-page-container {
 display: block !important;
 padding: 5px 15px 80px !important;
 /* Top padding reduced */
 background: #f8fafc;
 margin-top: -20px;
 /* Pull up to cover curve */
 }

 .main-content-area {
 width: 100% !important;
 padding: 0 !important;
 }

 .sefer-karti {
 background: #fff;
 border-radius: 16px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 margin-bottom: 15px;
 overflow: hidden;
 border: 1px solid #e2e8f0;
 }

 .sefer-karti .card-main {
 display: flex;
 flex-direction: column;
 padding: 15px;
 gap: 10px;
 }

 /* Airline Header */
 .sefer-karti .card-main>div:first-child {
 min-width: unset !important;
 width: 100%;
 justify-content: flex-start;
 border-bottom: 1px solid #f1f5f9;
 padding-bottom: 10px;
 margin-bottom: 5px;
 }

 /* Itinerary / Times */
 .sefer-itinerary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 margin: 0 !important;
 }

 .sefer-itinerary .stop {
 text-align: center;
 flex: 1;
 }

 .sefer-itinerary .time {
 font-size: 1.5rem !important;
 font-weight: 800;
 color: #1e293b;
 display: block;
 }

 .sefer-itinerary .travel-line {
 flex: 1.5;
 margin: 0 10px;
 height: 1px;
 background: #e2e8f0;
 }

 .sefer-itinerary .travel-line i {
 background: #fff;
 padding: 0 5px;
 font-size: 1.2rem;
 color: #ecad29;
 z-index: 2;
 position: relative;
 }

 /* Price & Button */
 .sefer-karti .card-main>div:last-child {
 border-left: none !important;
 padding-left: 0 !important;
 border-top: 1px dashed #e2e8f0;
 padding-top: 15px;
 text-align: center !important;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 }

 /* Bilet Fiyati Label */
 .sefer-karti .card-main>div:last-child>div:first-child {
 display: none;
 /* Hide 'Bilet Fiyatı' text on mobile to save space if needed, or keep it */
 }

 /* Price Value */
 .sefer-karti .card-main>div:last-child>div:nth-child(2) {
 font-size: 1.5rem !important;
 text-align: left;
 }

 .sefer-karti .buy-btn {
 width: auto !important;
 min-width: 120px;
 margin-top: 0 !important;
 padding: 12px 20px !important;
 }

 /* Details Wrapper */
 .flight-details-wrapper {
 border-radius: 0 !important;
 margin-top: 0 !important;
 border-top: 1px solid #e2e8f0;
 padding: 15px !important;
 }

 /* Hide Desktop Elements */
 .pc-only {
 display: none !important;
 }
}

/* --- IMPROVED MOBILE FLIGHT CARDS (Force Visibility) --- */
@media screen and (max-width: 768px) {

 /* Main Container overrides */
 .bus-page-container {
 display: block !important;
 position: relative !important;
 z-index: 10 !important;
 background: #f8fafc !important;
 padding: 10px 15px 120px !important;
 min-height: 100vh !important;
 margin-top: 0 !important;
 /* Reset negative margin to prevent overlap issues */
 }

 /* Result Loops */
 .main-content-area {
 display: block !important;
 width: 100% !important;
 padding: 0 !important;
 opacity: 1 !important;
 visibility: visible !important;
 }

 /* The Flight Card */
 .sefer-karti {
 display: block !important;
 background: #fff !important;
 border-radius: 16px !important;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
 border: 1px solid #e2e8f0 !important;
 margin-bottom: 20px !important;
 width: 100% !important;
 position: relative !important;
 z-index: 20 !important;
 }

 /* Inner Flex Layout - Vertical Stack */
 .sefer-karti .card-main {
 display: flex !important;
 flex-direction: column !important;
 padding: 20px !important;
 gap: 15px !important;
 }

 /* 1. Header: Logo & Airline */
 .sefer-karti .card-main>div:first-child {
 display: flex !important;
 width: 100% !important;
 min-width: unset !important;
 align-items: center !important;
 border-bottom: 1px solid #f1f5f9 !important;
 padding-bottom: 15px !important;
 margin-bottom: 5px !important;
 }

 /* 2. Itinerary: Times & Duration */
 .sefer-itinerary {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 width: 100% !important;
 margin: 0 !important;
 gap: 10px !important;
 }

 .sefer-itinerary .stop {
 flex: 1;
 text-align: center;
 }

 .sefer-itinerary .time {
 font-size: 1.6rem !important;
 font-weight: 800 !important;
 color: #0f172a !important;
 }

 .sefer-itinerary .travel-line {
 flex: 1.5;
 height: 1px;
 background: #e2e8f0;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 }

 .sefer-itinerary .travel-line i {
 background: #fff;
 padding: 0 5px;
 color: #ecad29;
 font-size: 1.2rem;
 z-index: 2;
 }

 /* 3. Footer: Price & Button */
 .sefer-karti .card-main>div:last-child {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 width: 100% !important;
 border-top: 1px dashed #e2e8f0 !important;
 padding-top: 15px !important;
 border-left: none !important;
 padding-left: 0 !important;
 text-align: left !important;
 }

 /* Hide 'Bilet Fiyatı' Label Text if it messes up layout, or keep it */
 .sefer-karti .card-main>div:last-child>div:first-child {
 display: none !important;
 }

 /* The Price Value */
 .sefer-karti .card-main>div:last-child>div:nth-child(2) {
 font-size: 1.5rem !important;
 font-weight: 900 !important;
 color: #ecad29 !important;
 text-align: left !important;
 }

 /* Button */
 .sefer-karti .buy-btn {
 width: auto !important;
 min-width: 120px !important;
 margin-top: 0 !important;
 padding: 12px 24px !important;
 font-size: 0.95rem !important;
 }

 /* Ensure Sidebar is hidden */
 .filtre-karti.pc-only {
 display: none !important;
 }
}

/* Safety Fix for Mobile Header Visibility */
.mobile-search-container.mobile-only {
 z-index: 50 !important;
 /* Ensure it stays above results */
}

/* Ensure Recommendations have space */
.m-recommend-section {
 position: relative;
 z-index: 5;
 background: #fff;
 padding-bottom: 80px;
 /* Space for bottom nav */
}

/* Visibility fixes must NOT affect desktop */
@media only screen and (max-width: 1024px) {

 /* Force Page Container Visible */
 .bus-page-container {
 padding-top: 15px !important;
 margin-top: 0 !important;
 }

 /* Ensure Search Result Sefer Karti is Cleanly Visible */
 .sefer-karti {
 background: #fff !important;
 color: #1e293b !important;
 opacity: 1 !important;
 visibility: visible !important;
 }

 /* FINAL VISIBILITY FIX - OVERRIDE EVERYTHING */
 body {
 background: #f8fafc !important;
 }

 .bus-page-container {
 display: block !important;
 position: relative !important;
 z-index: 10 !important;
 background: transparent !important;
 padding-top: 20px !important;
 min-height: 500px !important;
 margin-top: 0 !important;
 }

 .main-content-area {
 display: block !important;
 opacity: 1 !important;
 visibility: visible !important;
 }

 .sefer-karti {
 opacity: 1 !important;
 visibility: visible !important;
 margin-bottom: 20px !important;
 background: #fff !important;
 z-index: 20 !important;
 position: relative !important;
 border: 1px solid #e2e8f0 !important;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
 min-height: 200px;
 /* Ensure height */
 display: block !important;
 }

 /* Ensure no empty container blocks view */
 .m-recommend-section {
 position: relative !important;
 z-index: 30 !important;
 background: #fff !important;
 }

 /* Fix any potential header overlap */
 .mobile-header-container {
 z-index: 100 !important;
 }

 /* Specifically remove any 'transparent' overlays that might trap clicks */
 .bus-page-container::before,
 .bus-page-container::after {
 display: none !important;
 }

 /* Force ALL elements in main-content-area to allow overflow and visibility */
 .main-content-area,
 .main-content-area * {
 visibility: visible !important;
 opacity: 1 !important;
 }
}

/* Force pc-only to be hidden on mobile */
@media screen and (max-width: 768px) {
 .pc-only {
 display: none !important;
 }
}